diff --git a/src/ButtonToggles.jl b/src/ButtonToggles.jl deleted file mode 100644 index 1f23973d..00000000 --- a/src/ButtonToggles.jl +++ /dev/null @@ -1,78 +0,0 @@ -module ButtonToggles - -using Genie, Stipple, StippleUI, StippleUI.API -import Genie.Renderer.Html: HTMLString, normal_element, template, register_normal_element - -export buttontoggle - -register_normal_element("q__btn__toggle", context = @__MODULE__) - -""" - buttontoggle(fieldname::Symbol, args...; options::Symbol, kwargs...) - - - ----------- -# Examples ----------- - -### Model - -```julia-repl -julia> @app begin - @in network = :google - @in networks = [Stipple.opts(label = x, value = Symbol(lowercase(x))) for x in ["Google", "Facebook", "Twitter", "Pinterest", "Reddit"]] - end -``` - -### View -```julia-repl -julia> buttontoggle(:network, options = :networks, label="Social Networks", rounded = true, color = "white", textcolor= "primary") -"" -``` - ----------- -# Arguments ----------- - -1. Behaviour - * `name::String` - Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists ex. `car-id` `car-id` -2. Content - * `tablecolspan::Union{Int, String}` - The number of columns in the table (you need this if you use table-layout: fixed) ex. `tablecolspan="12"` - * `spread::Bool`- Spread horizontally to all available space - * `no-caps::Bool`- Avoid turning label text into caps (which happens by default) - * `no-wrap::Bool`- Avoid label text wrapping - * `stack::Bool`- Stack icon and label vertically instead of on same line (like it is by default) - * `stretch::Bool`- When used on flexbox parent, button will stretch to parent's height -3. Model - * `options::Vector` - Available options that the user can select from. For best performance freeze the list of options ex. `options=[ 'BMW', 'Samsung Phone' ]` - * `clearable::Bool` - Clears model on click of the already selected button -4. State - * `disable::Bool` - Put component in disabled mode - * `readonly::Bool` - Put component in readonly mode -5. Style - * `color::String` - Color name for component from the Quasar Color Palette - * `text-color::String` - Overrides text color (if needed); Color name from the Quasar Color Palette - * `toggle-color::String` - Color name for component from the Quasar Color Palette - * `toggle-text-color::String` - Overrides text color (if needed); Color name from the Quasar Color Palette - * `outline::Boolean` - Use 'outline' design - * `flat::Boolean` - Use 'flat' design - * `unelevated::Boolean` - Remove shadow - * `rounded::Boolean` - Applies a more prominent border-radius for a squared shape button - * `push::Boolean` - Use 'push' design - * `glossy::Boolean` - Applies a glossy effect - * `size::String` - Button size name or a CSS unit including unit name - * `padding::String` - Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set - * `ripple::Union{Boolean, Dict}`` - Configure material ripple (disable it by setting it to 'false' or supply a Dict with `js_attr`, e.g. `js_attr(Stipple.opts(early = true, center = true, color = 'teal', keyCodes = []))`) - * `dense::Boolean` - Dense mode; occupies less space -""" -function buttontoggle(fieldname::Symbol, - args...; - options::Symbol, - kwargs...) - - q__btn__toggle(args...; kw( - [Symbol(":options") => options, :fieldname => fieldname, kwargs...])...) -end - -end diff --git a/src/Buttons.jl b/src/Buttons.jl index 9ca42f00..f50cf75e 100644 --- a/src/Buttons.jl +++ b/src/Buttons.jl @@ -3,11 +3,12 @@ module Buttons using Genie, Stipple, StippleUI, StippleUI.API import Genie.Renderer.Html: HTMLString, normal_element, register_normal_element -export btn, btngroup, btndropdown, Btn +export btn, btngroup, btndropdown, Btn, btntoggle register_normal_element("q__btn", context = @__MODULE__) register_normal_element("q__btn__group", context = @__MODULE__) register_normal_element("q__btn__dropdown", context = @__MODULE__) +register_normal_element("q__btn__toggle", context = @__MODULE__) """ Stipple has a component called `btn` which is a button with a few extra useful features. For instance, it comes in two shapes: rectangle (default) and round. It also has the material ripple effect baked in (which can be disabled). @@ -210,5 +211,72 @@ function btndropdown(args...; kwargs...) q__btn__dropdown(args...; kw(kwargs)...) end +""" + btntoggle(fieldname::Symbol, args...; options::Symbol, kwargs...) + + + +---------- +# Examples +---------- + +### Model + +```julia-repl +julia> @app begin + @in network = :google + @in networks = [Stipple.opts(label = x, value = Symbol(lowercase(x))) for x in ["Google", "Facebook", "Twitter", "Pinterest", "Reddit"]] + end +``` + +### View +```julia-repl +julia> btntoggle(:network, options = :networks, label="Social Networks", rounded = true, color = "white", textcolor= "primary") +"" +``` + +---------- +# Arguments +---------- + +1. Behaviour + * `name::String` - Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists ex. `car-id` `car-id` +2. Content + * `tablecolspan::Union{Int, String}` - The number of columns in the table (you need this if you use table-layout: fixed) ex. `tablecolspan="12"` + * `spread::Bool`- Spread horizontally to all available space + * `no-caps::Bool`- Avoid turning label text into caps (which happens by default) + * `no-wrap::Bool`- Avoid label text wrapping + * `stack::Bool`- Stack icon and label vertically instead of on same line (like it is by default) + * `stretch::Bool`- When used on flexbox parent, button will stretch to parent's height +3. Model + * `options::Vector` - Available options that the user can select from. For best performance freeze the list of options ex. `options=[ 'BMW', 'Samsung Phone' ]` + * `clearable::Bool` - Clears model on click of the already selected button +4. State + * `disable::Bool` - Put component in disabled mode + * `readonly::Bool` - Put component in readonly mode +5. Style + * `color::String` - Color name for component from the Quasar Color Palette + * `text-color::String` - Overrides text color (if needed); Color name from the Quasar Color Palette + * `toggle-color::String` - Color name for component from the Quasar Color Palette + * `toggle-text-color::String` - Overrides text color (if needed); Color name from the Quasar Color Palette + * `outline::Boolean` - Use 'outline' design + * `flat::Boolean` - Use 'flat' design + * `unelevated::Boolean` - Remove shadow + * `rounded::Boolean` - Applies a more prominent border-radius for a squared shape button + * `push::Boolean` - Use 'push' design + * `glossy::Boolean` - Applies a glossy effect + * `size::String` - Button size name or a CSS unit including unit name + * `padding::String` - Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set + * `ripple::Union{Boolean, Dict}`` - Configure material ripple (disable it by setting it to 'false' or supply a Dict with `js_attr`, e.g. `js_attr(Stipple.opts(early = true, center = true, color = 'teal', keyCodes = []))`) + * `dense::Boolean` - Dense mode; occupies less space +""" +function btntoggle(fieldname::Symbol, + args...; + options::Symbol, + kwargs...) + + q__btn__toggle(args...; kw( + [Symbol(":options") => options, :fieldname => fieldname, kwargs...])...) +end end diff --git a/src/StippleUI.jl b/src/StippleUI.jl index 7b325fff..4474e8b0 100644 --- a/src/StippleUI.jl +++ b/src/StippleUI.jl @@ -63,7 +63,6 @@ include("Badges.jl") include("Banners.jl") include("BigNumbers.jl") include("Buttons.jl") -include("ButtonToggles.jl") include("Cards.jl") include("ChatMessages.jl") include("Checkboxes.jl") @@ -120,7 +119,6 @@ export quasar, quasar_pure, vue, vue_pure, xelem, xelem_pure, csscolors @reexport using .Banners @reexport using .BigNumbers @reexport using .Buttons -@reexport using .ButtonToggles @reexport using .Cards @reexport using .ChatMessages @reexport using .Checkboxes