Orasund/elm-ui-widgets
1
1
Fork 0
mirror of https://github.com/Orasund/elm-ui-widgets.git synced 2024-10-26 07:30:37 +03:00
Code Issues Projects Releases Wiki Activity

elm-analyse

Browse Source
This commit is contained in:
Lucas Payr 2021-02-05 16:59:34 +01:00
parent 4a3314c72a
commit ddd3b89f7b
45 changed files with 898 additions and 580 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
elm.json
View File

@ -16,18 +16,15 @@
],
"elm-version": "0.19.0 <= v < 0.20.0",
"dependencies": {
"Orasund/elm-ui-framework": "1.6.1 <= v < 2.0.0",
"avh4/elm-color": "1.0.0 <= v < 2.0.0",
"elm/browser": "1.0.2 <= v < 2.0.0",
"elm/core": "1.0.2 <= v < 2.0.0",
"elm/html": "1.0.0 <= v < 2.0.0",
"elm/svg": "1.0.1 <= v < 2.0.0",
"elm/time": "1.0.0 <= v < 2.0.0",
"elm-community/intdict": "3.0.0 <= v < 4.0.0",
"mdgriffith/elm-ui": "1.1.7 <= v < 2.0.0",
"noahzgordon/elm-color-extra": "1.0.2 <= v < 2.0.0",
"turboMaCk/queue": "1.0.2 <= v < 2.0.0",
"wernerdegroot/listzipper": "4.0.0 <= v < 5.0.0"
"turboMaCk/queue": "1.0.2 <= v < 2.0.0"
},
"test-dependencies": {
"elm-explorations/test": "1.2.1 <= v < 2.0.0",

51
example/src/Data/Example.elm
View File

@ -2,24 +2,25 @@ module Data.Example exposing (Example, Model, Msg, asList, fromString, init, sub
import Data.Style exposing (Style)
import Element exposing (Element)
import Example.AppBar as AppBar
import Example.Button as Button
import Example.Dialog as Dialog
import Example.Icon as Icon
import Example.Layout as Layout
import Example.List as List
import Example.Modal as Modal
import Example.MultiSelect as MultiSelect
import Example.ProgressIndicator as ProgressIndicator
import Example.Select as Select
import Example.Sheet as Sheet
import Example.Snackbar as Snackbar
import Example.SortTable as SortTable
import Example.Switch as Switch
import Example.Tab as Tab
import Example.TextInput as TextInput
import Example.Sheet as Sheet
import Example.AppBar as AppBar
import Example.Snackbar as Snackbar
import Framework.Grid as Grid
import View.States as States
import Example.Layout as Layout
type Example
= ButtonExample
@ -100,15 +101,20 @@ toString example =
IconExample ->
"Icon"
SheetExample ->
"Sheet"
AppBarExample ->
"App Bar"
LayoutExample ->
"Layout"
SnackbarExample ->
"Snackbar"
fromString : String -> Maybe Example
fromString string =
case string of
@ -147,15 +153,16 @@ fromString string =
"Icon" ->
Just IconExample
"Sheet" ->
Just SheetExample
"App Bar" ->
Just AppBarExample
"Layout" ->
Just LayoutExample
"Snackbar" ->
Just SnackbarExample
@ -201,16 +208,16 @@ get example =
IconExample ->
.icon
SheetExample ->
.sheet
AppBarExample ->
.appBar
LayoutExample ->
.layout
SnackbarExample ->
.snackbar
@ -253,16 +260,16 @@ toTests example =
IconExample ->
States.icon
SheetExample ->
States.sheet
AppBarExample ->
States.appBar
LayoutExample ->
States.layout
SnackbarExample ->
States.snackbar
@ -285,6 +292,7 @@ type Msg
| Layout Layout.Msg
| Snackbar Snackbar.Msg
type alias Model =
{ button : Button.Model
, switch : Switch.Model
@ -392,16 +400,16 @@ init =
( iconModel, iconMsg ) =
Icon.init
( sheetModel, sheetMsg ) =
Sheet.init
( appBarModel, appBarMsg ) =
AppBar.init
( layoutModel, layoutMsg ) =
Layout.init
( snackbarModel, snackbarMsg ) =
Snackbar.init
in
@ -598,13 +606,16 @@ update msg model =
Icon m ->
updateField .icon m
Sheet m ->
updateField .sheet m
AppBar m ->
updateField .appBar m
Layout m ->
updateField .layout m
Snackbar m ->
updateField .snackbar m
)

36
example/src/Data/Style.elm
View File

@ -1,24 +1,20 @@
module Data.Style exposing (Style, style)
import Color exposing (Color)
import Color.Accessibility as Accessibility
import Color.Convert as Convert
import Element exposing (Attribute, Element)
import Element.Background as Background
import Element exposing (Attribute)
import Element.Border as Border
import Element.Font as Font
import FeatherIcons
import Html.Attributes as Attributes
import Icons
import Widget
exposing
( ButtonStyle
( AppBarStyle
, ButtonStyle
, ColumnStyle
, DialogStyle
, DividerStyle
, ExpansionItemStyle
, FullBleedItemStyle
, HeaderStyle
, ImageItemStyle
, InsetItemStyle
, ItemStyle
, MultiLineItemStyle
, ProgressIndicatorStyle
@ -27,14 +23,11 @@ import Widget
, SwitchStyle
, TabStyle
, TextInputStyle
, InsetItemStyle
, FullBleedItemStyle
, AppBarStyle
)
import Widget.Icon as Icon exposing (Icon)
import Widget.Snackbar exposing (SnackbarStyle)
import Widget.Icon exposing (Icon)
import Widget.Material as Material exposing (Palette)
import Widget.Material.Color as MaterialColor
import Widget.Snackbar exposing (SnackbarStyle)
style : Palette -> Style msg
@ -84,8 +77,9 @@ style palette =
, searchFill =
{ elementRow =
(Material.defaultPalette.surface
|> MaterialColor.textAndBackground) ++
[ Element.height <| Element.px 56 ]
|> MaterialColor.textAndBackground
)
++ [ Element.height <| Element.px 56 ]
, content =
{ chips =
{ elementRow = [ Element.spacing 8 ]
@ -97,9 +91,9 @@ style palette =
|> MaterialColor.textAndBackground
)
++ [ Border.width 0
, Element.mouseOver []
, Element.focused []
]
, Element.mouseOver []
, Element.focused []
]
}
}
}
@ -139,13 +133,13 @@ type alias Style msg =
, sideSheet : ColumnStyle msg
, fullBleedItem : ItemStyle (FullBleedItemStyle msg) msg
, selectItem : ItemStyle (ButtonStyle msg) msg
, menuBar :
, menuBar :
AppBarStyle
{ menuIcon : Icon msg
, title : List (Attribute msg)
}
msg
, tabBar :
, tabBar :
AppBarStyle
{ menuTabButton : ButtonStyle msg
, title : List (Attribute msg)

2
example/src/Data/Theme.elm
View File

@ -1,7 +1,7 @@
module Data.Theme exposing (Theme(..), toStyle)
import Data.Style as Style exposing (Style)
import Widget.Material as Material exposing (Palette)
import Widget.Material as Material
type Theme

143
example/src/Example/AppBar.elm
View File

@ -1,31 +1,29 @@
module Example.AppBar exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import FeatherIcons
import Widget exposing (Modal ,ItemStyle ,Button , TextInput ,TextInputStyle, AppBarStyle,ButtonStyle)
import Element exposing (Attribute, DeviceClass(..), Element)
import Material.Icons
import Material.Icons.Types exposing (Coloring(..))
import Widget exposing (AppBarStyle, ButtonStyle)
import Widget.Icon as Icon exposing (Icon)
import Widget.Material as Material
import Element exposing (Attribute, DeviceClass(..), Element)
import Widget.Material.Typography as Typography
import Material.Icons.Types exposing (Coloring(..))
import Material.Icons.Action
import Material.Icons
import Browser.Events as Events
type alias Style style msg =
{ style
| menuBar :
| menuBar :
AppBarStyle
{ menuIcon : Icon msg
, title : List (Attribute msg)
}
msg
, tabBar :
{ menuIcon : Icon msg
, title : List (Attribute msg)
}
msg
, tabBar :
AppBarStyle
{ menuTabButton : ButtonStyle msg
, title : List (Attribute msg)
}
msg
{ menuTabButton : ButtonStyle msg
, title : List (Attribute msg)
}
msg
}
@ -36,11 +34,11 @@ materialStyle =
}
type alias Model
= { isMenuBar : Bool
, selected : Int
, search : String
}
type alias Model =
{ isMenuBar : Bool
, selected : Int
, search : String
}
type Msg
@ -66,12 +64,14 @@ update msg menu =
( { menu | isMenuBar = bool }
, Cmd.none
)
SetSelected int ->
( { menu | selected = int}
SetSelected int ->
( { menu | selected = int }
, Cmd.none
)
SetSearch string ->
( { menu | search = string}
( { menu | search = string }
, Cmd.none
)
@ -81,50 +81,49 @@ subscriptions _ =
Sub.none
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
-}
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
view msgMapper style model =
let
primaryActions =
[ { icon =
Material.Icons.change_history
|> Icon.elmMaterialIcons Color
, text = "Action"
, onPress = Just <| msgMapper <| SetDesign (not model.isMenuBar)
}
]
search =
{ chips = []
, text = model.search
, placeholder = Nothing
, label = "Search"
, onChange = SetSearch >> msgMapper
}
in
( if model.isMenuBar then
Widget.menuBar style.menuBar
{ title =
"Title"
|> Element.text
|> Element.el Typography.h6
, deviceClass = Tablet
, openLeftSheet = Just <|msgMapper <| SetDesign (not model.isMenuBar)
, openRightSheet = Just <|msgMapper <| SetDesign (not model.isMenuBar)
, openTopSheet = Just <|msgMapper <| SetDesign (not model.isMenuBar)
, primaryActions = primaryActions
, search = Just search
let
primaryActions =
[ { icon =
Material.Icons.change_history
|> Icon.elmMaterialIcons Color
, text = "Action"
, onPress = Just <| msgMapper <| SetDesign (not model.isMenuBar)
}
]
else
Widget.tabBar style.tabBar
{ title =
"Title"
|> Element.text
|> Element.el Typography.h6
, menu =
search =
{ chips = []
, text = model.search
, placeholder = Nothing
, label = "Search"
, onChange = SetSearch >> msgMapper
}
in
(if model.isMenuBar then
Widget.menuBar style.menuBar
{ title =
"Title"
|> Element.text
|> Element.el Typography.h6
, deviceClass = Tablet
, openLeftSheet = Just <| msgMapper <| SetDesign (not model.isMenuBar)
, openRightSheet = Just <| msgMapper <| SetDesign (not model.isMenuBar)
, openTopSheet = Just <| msgMapper <| SetDesign (not model.isMenuBar)
, primaryActions = primaryActions
, search = Just search
}
else
Widget.tabBar style.tabBar
{ title =
"Title"
|> Element.text
|> Element.el Typography.h6
, menu =
{ selected = Just model.selected
, options =
[ "Home", "About" ]
@ -136,16 +135,14 @@ view msgMapper style model =
)
, onSelect = SetSelected >> msgMapper >> Just
}
, deviceClass = Phone
, openRightSheet = Just <| msgMapper <| SetDesign (not model.isMenuBar)
, openTopSheet = Just <| msgMapper <| SetDesign (not model.isMenuBar)
, primaryActions = primaryActions
, search = Just search
}
)
|> Element.el [ Element.width <| Element.minimum 400 <| Element.fill]
, deviceClass = Phone
, openRightSheet = Just <| msgMapper <| SetDesign (not model.isMenuBar)
, openTopSheet = Just <| msgMapper <| SetDesign (not model.isMenuBar)
, primaryActions = primaryActions
, search = Just search
}
)
|> Element.el [ Element.width <| Element.minimum 400 <| Element.fill ]
main : Program () Model Msg

3
example/src/Example/Button.elm
View File

@ -3,12 +3,11 @@ module Example.Button exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import Element.Background as Background
import Element.Border as Border
import Material.Icons as MaterialIcons
import Material.Icons.Types exposing (Coloring(..))
import Widget exposing (ButtonStyle, ColumnStyle, RowStyle)
import Widget.Icon as Icon
import Widget.Customize as Customize
import Widget.Icon as Icon
import Widget.Material as Material
import Widget.Material.Color as MaterialColor
import Widget.Material.Typography as Typography

5
example/src/Example/Icon.elm
View File

@ -4,17 +4,16 @@ import Ant.Icons.Svg
import Browser
import Element exposing (Element)
import FeatherIcons
import FontAwesome.Icon
import FontAwesome.Solid
import FontAwesome.Svg
import Heroicons.Solid
import Ionicon
import Material.Icons exposing (offline_bolt)
import Material.Icons
import Material.Icons.Action
import Material.Icons.Types exposing (Coloring(..))
import Octicons
import Widget exposing (ButtonStyle, RowStyle)
import Widget.Icon exposing (Icon)
import Widget.Icon
import Widget.Material as Material
import Zondicons

195
example/src/Example/Layout.elm
View File

@ -1,58 +1,68 @@
module Example.Layout exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element,Attribute,DeviceClass(..))
import FeatherIcons
import Widget exposing (TextInputStyle ,TextInput
,Dialog,DialogStyle,ColumnStyle
,ButtonStyle,Modal,AppBarStyle,ItemStyle,HeaderStyle,InsetItemStyle)
import Widget.Icon as Icon exposing (Icon)
import Widget.Material as Material
import Widget.Material.Typography as Typography
import Widget.Layout as Layout
import Widget.Snackbar as Snackbar exposing (Snackbar,Message,SnackbarStyle)
import Browser.Events as Events
import Widget.Material.Color as MaterialColor
import Element.Font as Font
import Element exposing (Attribute, DeviceClass(..), Element)
import Element.Border as Border
import Material.Icons.Types exposing (Coloring(..))
import Element.Font as Font
import Material.Icons
import Widget.Customize as Customize
import Material.Icons.Types exposing (Coloring(..))
import Time
import Widget
exposing
( AppBarStyle
, ButtonStyle
, ColumnStyle
, DialogStyle
, InsetItemStyle
, ItemStyle
, Modal
, TextInput
, TextInputStyle
)
import Widget.Icon as Icon exposing (Icon)
import Widget.Layout as Layout
import Widget.Material as Material
import Widget.Material.Color as MaterialColor
import Widget.Material.Typography as Typography
import Widget.Snackbar as Snackbar exposing (Snackbar, SnackbarStyle)
type Part
= LeftSheet
| RightSheet
| Search
type alias Style style msg =
{ style
| container : List (Attribute msg)
, snackbar : SnackbarStyle msg
, sideSheet : ColumnStyle msg
, sheetButton : ItemStyle (ButtonStyle msg) msg
, searchFill : TextInputStyle msg
, insetItem : ItemStyle (InsetItemStyle msg) msg
, menuBar :
AppBarStyle
{ menuIcon : Icon msg
, title : List (Attribute msg)
}
msg
, tabBar :
AppBarStyle
{ menuTabButton : ButtonStyle msg
, title : List (Attribute msg)
}
msg
, dialog : DialogStyle msg
, containedButton : ButtonStyle msg
, column : ColumnStyle msg
| container : List (Attribute msg)
, snackbar : SnackbarStyle msg
, sideSheet : ColumnStyle msg
, sheetButton : ItemStyle (ButtonStyle msg) msg
, searchFill : TextInputStyle msg
, insetItem : ItemStyle (InsetItemStyle msg) msg
, menuBar :
AppBarStyle
{ menuIcon : Icon msg
, title : List (Attribute msg)
}
msg
, tabBar :
AppBarStyle
{ menuTabButton : ButtonStyle msg
, title : List (Attribute msg)
}
msg
, dialog : DialogStyle msg
, containedButton : ButtonStyle msg
, column : ColumnStyle msg
}
materialStyle : Style {} msg
materialStyle =
{ container =
{ container =
(Material.defaultPalette.background |> MaterialColor.textAndBackground)
++ [ Font.family
[ Font.typeface "Roboto"
@ -69,8 +79,9 @@ materialStyle =
, searchFill =
{ elementRow =
(Material.defaultPalette.surface
|> MaterialColor.textAndBackground) ++
[ Element.height <| Element.px 56 ]
|> MaterialColor.textAndBackground
)
++ [ Element.height <| Element.px 56 ]
, content =
{ chips =
{ elementRow = [ Element.spacing 8 ]
@ -82,9 +93,9 @@ materialStyle =
|> MaterialColor.textAndBackground
)
++ [ Border.width 0
, Element.mouseOver []
, Element.focused []
]
, Element.mouseOver []
, Element.focused []
]
}
}
}
@ -94,14 +105,18 @@ materialStyle =
, column = Material.column
}
type alias Model
= { window : { height : Int, width : Int }
, showDialog : Bool
, snackbar : Snackbar String
, active : Maybe Part
, selected : Int
, searchText : String
}
type alias Model =
{ window :
{ height : Int
, width : Int
}
, showDialog : Bool
, snackbar : Snackbar String
, active : Maybe Part
, selected : Int
, searchText : String
}
type Msg
@ -126,33 +141,40 @@ init =
, Cmd.none
)
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
ChangedSidebar maybePart ->
( { model | active = maybePart}
( { model | active = maybePart }
, Cmd.none
)
Resized window ->
( { model | window = window }
, Cmd.none
)
SetSelected int ->
( { model | selected = int}
SetSelected int ->
( { model | selected = int }
, Cmd.none
)
AddSnackbar ->
( {model | snackbar = model.snackbar |> Snackbar.insert "This is a message"}
( { model | snackbar = model.snackbar |> Snackbar.insert "This is a message" }
, Cmd.none
)
ShowDialog bool ->
( { model | showDialog = bool}
( { model | showDialog = bool }
, Cmd.none
)
SetSearchText maybeString ->
( { model | searchText = maybeString}
( { model | searchText = maybeString }
, Cmd.none
)
TimePassed sec ->
( case model.active of
Just LeftSheet ->
@ -167,7 +189,7 @@ update msg model =
}
, Cmd.none
)
subscriptions : Model -> Sub Msg
subscriptions _ =
@ -176,16 +198,18 @@ subscriptions _ =
, Time.every 50 (always (TimePassed 50))
]
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
-}
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
view msgMapper style {snackbar,searchText,selected, window, showDialog, active } =
let
view msgMapper style { snackbar, searchText, selected, showDialog, active } =
let
deviceClass : DeviceClass
deviceClass =
Phone --Replace this line to make the layout responsive
--Layout.getDeviceClass window
Phone
--Replace this line to make the layout responsive
--Layout.getDeviceClass window
dialog : Maybe (Modal msg)
dialog =
if showDialog then
@ -203,12 +227,13 @@ view msgMapper style {snackbar,searchText,selected, window, showDialog, active }
}
|> Widget.dialog style.dialog
|> Just
else
Nothing
onChangedSidebar =
ChangedSidebar
ChangedSidebar
menu =
{ selected = Just selected
, options =
@ -224,21 +249,21 @@ view msgMapper style {snackbar,searchText,selected, window, showDialog, active }
actions =
{ icon =
Material.Icons.change_history
|> Icon.elmMaterialIcons Color
, text = "Action"
, onPress = Nothing
}
|> List.repeat 5
Material.Icons.change_history
|> Icon.elmMaterialIcons Color
, text = "Action"
, onPress = Nothing
}
|> List.repeat 5
{ primaryActions, moreActions } =
Layout.partitionActions actions
title =
"Title"
|> Element.text
|> Element.el (Typography.h6 ++ [ Element.paddingXY 8 0 ])
"Title"
|> Element.text
|> Element.el (Typography.h6 ++ [ Element.paddingXY 8 0 ])
search : TextInput msg
search =
{ chips = []
@ -253,7 +278,8 @@ view msgMapper style {snackbar,searchText,selected, window, showDialog, active }
if
(deviceClass == Phone)
|| (deviceClass == Tablet)
|| (menu.options |> List.length) > 5
|| (menu.options |> List.length)
> 5
then
Widget.menuBar style.menuBar
{ title = title
@ -270,16 +296,16 @@ view msgMapper style {snackbar,searchText,selected, window, showDialog, active }
{ title = title
, menu = menu
, deviceClass = deviceClass
, openRightSheet = Just <|msgMapper <| ChangedSidebar <| Just RightSheet
, openRightSheet = Just <| msgMapper <| ChangedSidebar <| Just RightSheet
, openTopSheet = Nothing
, primaryActions = primaryActions
, search = Just search
, search = Just search
}
snackbarElem : Element msg
snackbarElem =
snackbar
|> Snackbar.view style.snackbar
|> Snackbar.view style.snackbar
(\text ->
{ text = text
, button = Nothing
@ -323,7 +349,7 @@ view msgMapper style {snackbar,searchText,selected, window, showDialog, active }
, insetItem = style.insetItem
}
{ onDismiss = onDismiss
, moreActions =moreActions
, moreActions = moreActions
}
|> Just
@ -335,7 +361,7 @@ view msgMapper style {snackbar,searchText,selected, window, showDialog, active }
{ search = search
, onDismiss = onDismiss
}
|> Just
|> Just
else
Nothing
@ -352,19 +378,20 @@ view msgMapper style {snackbar,searchText,selected, window, showDialog, active }
, icon = always Element.none
}
]
|> Element.column [Element.width <| Element.fill, Element.spacing 8]
|> Element.el
|> Element.column [ Element.width <| Element.fill, Element.spacing 8 ]
|> Element.el
(List.concat
[ style.container
, [ Element.inFront snackbarElem ]
, modals
|> Widget.singleModal
, [ Element.height <| Element.minimum 200 <| Element.fill
, Element.width <| Element.minimum 400 <| Element.fill
]
, Element.width <| Element.minimum 400 <| Element.fill
]
]
)
main : Program () Model Msg
main =
Browser.element

56
example/src/Example/List.elm
View File

@ -4,7 +4,7 @@ import Browser
import Element exposing (Element)
import Element.Font as Font
import FeatherIcons
import Widget exposing (ButtonStyle,ColumnStyle,FullBleedItemStyle, DividerStyle, ExpansionItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, SwitchStyle, InsetItemStyle)
import Widget exposing (ButtonStyle, ColumnStyle, DividerStyle, ExpansionItemStyle, FullBleedItemStyle, HeaderStyle, ImageItemStyle, InsetItemStyle, ItemStyle, MultiLineItemStyle, SwitchStyle)
import Widget.Icon as Icon
import Widget.Material as Material
import Widget.Material.Color as MaterialColor
@ -86,7 +86,7 @@ view msgMapper style (IsExpanded isExpanded) =
, Widget.fullBleedItem style.fullBleedItem
{ onPress = Nothing
, icon =
\{ size, color } ->
\_ ->
Element.none
, text = "Full Bleed Item"
}
@ -99,7 +99,7 @@ view msgMapper style (IsExpanded isExpanded) =
|> Icon.elmFeather FeatherIcons.toHtml
, text = "Item with Icon"
, content =
\{ size, color } ->
\_ ->
Element.none
}
, Widget.imageItem style.imageItem
@ -145,7 +145,7 @@ view msgMapper style (IsExpanded isExpanded) =
, image = Element.none
, text = "Clickable Item with Switch"
, content =
\{ size, color } ->
\_ ->
Widget.switch style.switch
{ description = "Click Me"
, active = isExpanded
@ -181,25 +181,35 @@ view msgMapper style (IsExpanded isExpanded) =
}
]
}
++ [ "Menu" |> Widget.headerItem style.fullBleedHeader]
++ ({ selected = if isExpanded then Just 1 else Just 0
, options =
[ True, False ]
|> List.map
(\bool ->
{ text = if bool then "Expanded" else "Collapsed"
, icon = always Element.none
}
)
, onSelect = (\int ->
(int == 1)
|> ToggleCollapsable
|> msgMapper
|> Just
)
}
|> Widget.selectItem style.selectItem
)
++ [ "Menu" |> Widget.headerItem style.fullBleedHeader ]
++ ({ selected =
if isExpanded then
Just 1
else
Just 0
, options =
[ True, False ]
|> List.map
(\bool ->
{ text =
if bool then
"Expanded"
else
"Collapsed"
, icon = always Element.none
}
)
, onSelect =
\int ->
(int == 1)
|> ToggleCollapsable
|> msgMapper
|> Just
}
|> Widget.selectItem style.selectItem
)
|> Widget.itemList style.cardColumn

84
example/src/Example/Modal.elm
View File

@ -70,55 +70,55 @@ view msgMapper style (IsEnabled isEnabled) =
, Element.width <| Element.minimum 400 <| Element.fill
]
++ (if isEnabled then
[{ onDismiss =
[ { onDismiss =
ToggleModal False
|> msgMapper
|> Just
, content =
"Click on the area around this box to close it."
|> Element.text
|> List.singleton
|> Element.paragraph []
|> List.singleton
|> Widget.column style.cardColumn
|> Element.el
[ Element.width <| Element.px 250
, Element.centerX
, Element.centerY
]
}
, content =
"Click on the area around this box to close it."
|> Element.text
|> List.singleton
|> Element.paragraph []
|> List.singleton
|> Widget.column style.cardColumn
|> Element.el
[ Element.width <| Element.px 250
, Element.centerX
, Element.centerY
]
}
, { onDismiss = Nothing
, content =
, content =
"This card can not be selected."
|> Element.text
|> List.singleton
|> Element.paragraph []
|> List.singleton
|> Widget.column style.cardColumn
|> Element.el
[ Element.height <| Element.px 150
, Element.width <| Element.px 200
, Element.centerX
, Element.centerY
]
}
|> Element.text
|> List.singleton
|> Element.paragraph []
|> List.singleton
|> Widget.column style.cardColumn
|> Element.el
[ Element.height <| Element.px 150
, Element.width <| Element.px 200
, Element.centerX
, Element.centerY
]
}
, { onDismiss = Nothing
, content =
, content =
"This is message is behind the other two"
|> Element.text
|> List.singleton
|> Element.paragraph []
|> List.singleton
|> Widget.column style.cardColumn
|> Element.el
[ Element.height <| Element.px 300
, Element.width <| Element.px 300
, Element.centerX
, Element.centerY
]
}
] |> Widget.multiModal
|> Element.text
|> List.singleton
|> Element.paragraph []
|> List.singleton
|> Widget.column style.cardColumn
|> Element.el
[ Element.height <| Element.px 300
, Element.width <| Element.px 300
, Element.centerX
, Element.centerY
]
}
]
|> Widget.multiModal
else
[]

24
example/src/Example/Sheet.elm
View File

@ -3,11 +3,12 @@ module Example.Sheet exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import FeatherIcons
import Widget exposing (ButtonStyle, ColumnStyle,ItemStyle,HeaderStyle,InsetItemStyle)
import Widget exposing (ButtonStyle, ColumnStyle, HeaderStyle, InsetItemStyle, ItemStyle)
import Widget.Icon as Icon
import Widget.Material as Material
import Widget.Material.Typography as Typography
type alias Style style msg =
{ style
| sideSheet : ColumnStyle msg
@ -76,9 +77,9 @@ view msgMapper style (IsEnabled isEnabled) =
++ (if isEnabled then
{ content =
[ "Menu"
|> Element.text
|> Element.el Typography.h6
|> Widget.asItem
|> Element.text
|> Element.el Typography.h6
|> Widget.asItem
, Widget.insetItem style.insetItem
{ onPress = Just <| msgMapper <| ToggleModal False
, icon =
@ -86,7 +87,7 @@ view msgMapper style (IsEnabled isEnabled) =
|> Icon.elmFeather FeatherIcons.toHtml
, text = "Home"
, content =
\{ size, color } ->
\_ ->
Element.none
}
, Widget.insetItem style.insetItem
@ -96,16 +97,15 @@ view msgMapper style (IsEnabled isEnabled) =
|> Icon.elmFeather FeatherIcons.toHtml
, text = "About"
, content =
\{ size, color } ->
\_ ->
Element.none
}
]
|> Widget.itemList style.sideSheet
]
|> Widget.itemList style.sideSheet
, onDismiss = Just <| msgMapper <| ToggleModal False
}
|> List.singleton
|> Widget.singleModal
|> List.singleton
|> Widget.singleModal
else
[]
@ -120,4 +120,4 @@ main =
, view = \model -> model |> view identity materialStyle |> Element.layout []
, update = update
, subscriptions = subscriptions
}
}

5
example/src/Example/Snackbar.elm
View File

@ -2,11 +2,10 @@ module Example.Snackbar exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import FeatherIcons
import Time
import Widget exposing (ButtonStyle, ColumnStyle, RowStyle)
import Widget.Snackbar as Snackbar exposing (Snackbar,SnackbarStyle)
import Widget exposing (ButtonStyle, ColumnStyle)
import Widget.Material as Material
import Widget.Snackbar as Snackbar exposing (Snackbar, SnackbarStyle)
type alias Style style msg =

3
example/src/Example/Switch.elm
View File

@ -2,8 +2,7 @@ module Example.Switch exposing (Model, Msg, init, subscriptions, update, view)
import Browser
import Element exposing (Element)
import FeatherIcons
import Widget exposing (RowStyle, SwitchStyle)
import Widget exposing (SwitchStyle)
import Widget.Material as Material

157
example/src/Main.elm
View File

@ -6,10 +6,10 @@ import Browser.Dom as Dom exposing (Viewport)
import Browser.Events as Events
import Browser.Navigation as Navigation
import Data.Example as Example exposing (Example)
import Data.Section as Section exposing (Section(..))
import Data.Section exposing (Section(..))
import Data.Style exposing (Style)
import Data.Theme as Theme exposing (Theme(..))
import Element exposing (DeviceClass(..), Element,Attribute)
import Element exposing (Attribute, DeviceClass(..), Element)
import Element.Input as Input
import FeatherIcons
import Framework
@ -18,19 +18,19 @@ import Framework.Heading as Heading
import Html exposing (Html)
import Html.Attributes as Attributes
import Icons
import Material.Icons
import Material.Icons.Types exposing (Coloring(..))
import Reusable
import Set.Any as AnySet exposing (AnySet)
import Stateless
import Task
import Time
import Widget exposing (Modal,TextInput)
import Widget exposing (Modal, TextInput)
import Widget.Icon as Icon
import Widget.Layout as Layout
import Widget.Layout as Layout
import Widget.Material.Typography as Typography
import Widget.ScrollingNav as ScrollingNav
import Widget.Snackbar as Snackbar exposing (Message)
import Material.Icons.Types exposing (Coloring(..))
import Material.Icons
import Widget.Material.Typography as Typography
type Part
@ -38,6 +38,7 @@ type Part
| RightSheet
| Search
type alias LoadedModel =
{ stateless : Stateless.Model
, scrollingNav : ScrollingNav.ScrollingNav Example
@ -68,7 +69,6 @@ type LoadedMsg
| UpdateScrollingNav (ScrollingNav.ScrollingNav Example -> ScrollingNav.ScrollingNav Example)
| TimePassed Int
| AddSnackbar ( String, Bool )
| ToggleDialog Bool
| ChangedSidebar (Maybe Part)
| Resized { width : Int, height : Int }
| Load String
@ -108,7 +108,7 @@ initialModel { viewport } =
( { stateless = stateless
, scrollingNav = scrollingNav
, snackbar = Snackbar.init
, active = Nothing
, active = Nothing
, displayDialog = False
, window =
{ width = viewport.width |> round
@ -161,7 +161,7 @@ updateLoaded msg model =
model.search
in
( { model
| snackbar =
| snackbar =
case model.active of
Just LeftSheet ->
model.snackbar
@ -171,8 +171,6 @@ updateLoaded msg model =
_ ->
model.snackbar |> Snackbar.timePassed int
, search =
if search.remaining > 0 then
if search.remaining <= int then
@ -195,30 +193,23 @@ updateLoaded msg model =
AddSnackbar ( string, bool ) ->
( { model
| snackbar =
model.snackbar
|> Snackbar.insert
{ text = string
, button =
if bool then
Just
{ text = "Add"
, onPress =
Just <|
AddSnackbar ( "This is another message", False )
}
else
Nothing
| snackbar =
model.snackbar
|> Snackbar.insert
{ text = string
, button =
if bool then
Just
{ text = "Add"
, onPress =
Just <|
AddSnackbar ( "This is another message", False )
}
}
, Cmd.none
)
ToggleDialog bool ->
( { model | displayDialog = bool }
else
Nothing
}
}
, Cmd.none
)
@ -236,19 +227,12 @@ updateLoaded msg model =
( model, Navigation.load string )
JumpTo section ->
let
_ =
section
|> Example.toString
|> Debug.log "section"
in
( model
, model.scrollingNav
|> ScrollingNav.jumpTo
{ section = section
, onChange = always Idle
}
)
ChangedSearch string ->
@ -299,18 +283,19 @@ update msg model =
subscriptions : Model -> Sub Msg
subscriptions model =
(
[ Time.every 50 (always (TimePassed 50))
, Events.onResize (\h w -> Resized { height = h, width = w })
] ++
( case model of
Loading ->
[]
Loaded {stateless} ->
Stateless.subscriptions stateless
|> Sub.map StatelessSpecific
|> List.singleton
))
([ Time.every 50 (always (TimePassed 50))
, Events.onResize (\h w -> Resized { height = h, width = w })
]
++ (case model of
Loading ->
[]
Loaded { stateless } ->
Stateless.subscriptions stateless
|> Sub.map StatelessSpecific
|> List.singleton
)
)
|> Sub.batch
|> Sub.map LoadedSpecific
@ -333,21 +318,22 @@ view model =
<|
viewLoaded m
viewLayout : (LoadedMsg -> LoadedMsg) -> Style LoadedMsg -> LoadedModel -> List (Attribute LoadedMsg)
viewLayout msgMapper style model =
let
deviceClass : DeviceClass
deviceClass =
Layout.getDeviceClass model.window
dialog : Maybe (Modal LoadedMsg)
dialog =
Nothing
onChangedSidebar =
ChangedSidebar
menu =
ChangedSidebar
menu =
model.scrollingNav
|> ScrollingNav.toSelect
(\int ->
@ -359,48 +345,49 @@ viewLayout msgMapper style model =
actions =
[ { onPress = Just <| Load "https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/"
, text = "Docs"
, icon = FeatherIcons.book |> Icon.elmFeather FeatherIcons.toHtml
}
, text = "Docs"
, icon = FeatherIcons.book |> Icon.elmFeather FeatherIcons.toHtml
}
, { onPress = Just <| Load "https://github.com/Orasund/elm-ui-widgets"
, text = "Github"
, icon = FeatherIcons.github |> Icon.elmFeather FeatherIcons.toHtml
}
, text = "Github"
, icon = FeatherIcons.github |> Icon.elmFeather FeatherIcons.toHtml
}
, { onPress =
if model.theme /= Material then
Just <| SetTheme <| Material
else
Nothing
, text = "Material Theme"
, icon = FeatherIcons.penTool |> Icon.elmFeather FeatherIcons.toHtml
}
, text = "Material Theme"
, icon = FeatherIcons.penTool |> Icon.elmFeather FeatherIcons.toHtml
}
, { onPress =
if model.theme /= DarkMaterial then
Just <| SetTheme <| DarkMaterial
else
Nothing
, text = "Dark Material Theme"
, icon = FeatherIcons.penTool |> Icon.elmFeather FeatherIcons.toHtml
}
, text = "Dark Material Theme"
, icon = FeatherIcons.penTool |> Icon.elmFeather FeatherIcons.toHtml
}
]
{ primaryActions, moreActions } =
Layout.partitionActions actions
title =
"Elm-Ui-Widgets"
|> Element.text
|> Element.el (Typography.h6 ++ [ Element.paddingXY 8 0 ])
"Elm-Ui-Widgets"
|> Element.text
|> Element.el (Typography.h6 ++ [ Element.paddingXY 8 0 ])
search : TextInput LoadedMsg
search =
{ chips = []
, text = model.search.raw
, placeholder = Just <|
Input.placeholder [] <|
Element.text "Search Widgets..."
, placeholder =
Just <|
Input.placeholder [] <|
Element.text "Search Widgets..."
, label = "Search"
, onChange = ChangedSearch >> msgMapper
}
@ -410,7 +397,8 @@ viewLayout msgMapper style model =
if
(deviceClass == Phone)
|| (deviceClass == Tablet)
|| (menu.options |> List.length) > 5
|| (menu.options |> List.length)
> 5
then
Widget.menuBar style.menuBar
{ title = title
@ -427,10 +415,10 @@ viewLayout msgMapper style model =
{ title = title
, menu = menu
, deviceClass = deviceClass
, openRightSheet = Just <|msgMapper <| ChangedSidebar <| Just RightSheet
, openRightSheet = Just <| msgMapper <| ChangedSidebar <| Just RightSheet
, openTopSheet = Nothing
, primaryActions = primaryActions
, search = Just search
, search = Just search
}
snackbarElem : Element LoadedMsg
@ -475,7 +463,7 @@ viewLayout msgMapper style model =
, insetItem = style.insetItem
}
{ onDismiss = onDismiss
, moreActions =moreActions
, moreActions = moreActions
}
|> Just
@ -487,7 +475,7 @@ viewLayout msgMapper style model =
{ search = search
, onDismiss = onDismiss
}
|> Just
|> Just
else
Nothing
@ -497,12 +485,13 @@ viewLayout msgMapper style model =
List.concat
[ style.container
, [ Element.inFront snackbarElem
, Element.inFront nav
]
, Element.inFront nav
]
, modals
|> Widget.singleModal
]
viewLoaded : LoadedModel -> Element LoadedMsg
viewLoaded m =
let

3
example/src/Reusable.elm
View File

@ -36,6 +36,7 @@ snackbar style addSnackbar =
)
{--scrollingNavCard : Style msg -> ( String, Element msg, List (Element msg) )
scrollingNavCard _ =
( "Scrolling Nav"
@ -46,6 +47,7 @@ scrollingNavCard _ =
)
-}
view :
{ theme : Theme
, addSnackbar : ( String, Bool ) -> msg
@ -64,6 +66,7 @@ view { theme, addSnackbar } =
, description = "Reusable views have an internal state but no update function. You will need to do some wiring, but nothing complicated."
, items =
[ snackbar style addSnackbar
--, scrollingNavCard style
]
}

4
example/src/Stateless.elm
View File

@ -1,4 +1,4 @@
module Stateless exposing (Model, Msg, init, update,subscriptions, view)
module Stateless exposing (Model, Msg, init, subscriptions, update, view)
import Data.Example as Example
import Data.Theme as Theme exposing (Theme)
@ -44,10 +44,12 @@ update msg model =
Idle ->
( model, Cmd.none )
subscriptions : Model -> Sub Msg
subscriptions model =
Example.subscriptions model.example |> Sub.map ExampleSpecific
view :
{ theme : Theme
, msgMapper : Msg -> msg

14
example/src/View/States.elm
View File

@ -1,4 +1,4 @@
module View.States exposing (button,snackbar, sheet,dialog,layout, icon, list, modal,appBar, multiSelect, progressIndicator, select, sortTable, switch, tab, textInput)
module View.States exposing (appBar, button, dialog, icon, layout, list, modal, multiSelect, progressIndicator, select, sheet, snackbar, sortTable, switch, tab, textInput)
import Data.Style exposing (Style)
import Element exposing (Element)
@ -7,7 +7,7 @@ import Icons
import Set
import Widget
import Widget.Icon as Icon
import Widget.Layout
import Widget.Layout
button : msg -> Style msg -> List ( String, Element msg )
@ -548,18 +548,22 @@ icon : msg -> Style msg -> List ( String, Element msg )
icon _ style =
[]
sheet : msg -> Style msg -> List ( String, Element msg )
sheet _ style =
[]
appBar : msg -> Style msg -> List ( String, Element msg )
appBar _ style =
[]
layout : msg -> Style msg -> List ( String, Element msg )
layout _ style =
[]
snackbar : msg -> Style msg -> List ( String, Element msg )
snackbar _ style =
[]
[]

15
example/tests/IconBug.elm
View File

@ -1,16 +1,17 @@
module Main exposing (main)
module IconBug exposing (main)
import Browser
import Element exposing (..)
import Element.Border as Border
import Element.Input as Input
import Html exposing (Html)
import Svg
import Svg.Attributes
import Element.Border as Border
import Element.Input as Input
main : Html msg
main =
Element.layout [] <|
Element.layout [] <|
row []
[ el
[ width (shrink |> minimum 100)
@ -23,7 +24,10 @@ main =
none
)
]
{--Element.layout [] <|
{--Element.layout [] <|
row [ width shrink
]
[ Element.el
@ -37,4 +41,3 @@ main =
[ Element.el [centerX] <| text "test test test Test Test"]
)
]--}

16
src/Internal/AppBar.elm
View File

@ -1,19 +1,12 @@
module Internal.AppBar exposing (AppBarStyle, menuBar, tabBar)
import Array
import Element exposing (Attribute, DeviceClass(..), Element)
import Element.Input as Input
import Html exposing (Html)
import Internal.Button as Button exposing (Button, ButtonStyle)
import Internal.Dialog as Dialog
import Internal.Item as Item exposing (InsetItemStyle, ItemStyle)
import Internal.Modal as Modal exposing (Modal)
import Internal.Select as Select exposing (Select)
import Internal.Sheet as Sheet
import Internal.TextInput as TextInput exposing (TextInput, TextInputStyle)
import Widget.Customize as Customize
import Widget.Icon exposing (Icon)
import Widget.Snackbar as Snackbar exposing (Message, SnackbarStyle)
type alias AppBarStyle content msg =
@ -168,10 +161,10 @@ internalNav menuElements style { deviceClass, openRightSheet, openTopSheet, prim
|> Maybe.map
(\{ label } ->
if deviceClass == Tablet then
[ Button.button
( style.content.actions.content.button
--FIX FOR ISSUE #30
|> Customize.elementButton [ Element.width Element.shrink ]
[ Button.button
(style.content.actions.content.button
--FIX FOR ISSUE #30
|> Customize.elementButton [ Element.width Element.shrink ]
)
{ onPress = openTopSheet
, icon = style.content.actions.content.searchIcon
@ -206,6 +199,7 @@ internalNav menuElements style { deviceClass, openRightSheet, openTopSheet, prim
, case openRightSheet of
Nothing ->
[]
Just _ ->
[ Button.iconButton style.content.actions.content.button
{ onPress = openRightSheet

27
src/Internal/Item.elm
View File

@ -1,11 +1,32 @@
module Internal.Item exposing (DividerStyle
, ExpansionItem, ExpansionItemStyle, FullBleedItemStyle, HeaderStyle, ImageItem, ImageItemStyle, Item, ItemStyle, MultiLineItemStyle, InsetItem, InsetItemStyle, asItem, divider, expansionItem, fullBleedItem, headerItem, imageItem, multiLineItem, selectItem, insetItem, toItem)
module Internal.Item exposing
( DividerStyle
, ExpansionItem
, ExpansionItemStyle
, FullBleedItemStyle
, HeaderStyle
, ImageItem
, ImageItemStyle
, InsetItem
, InsetItemStyle
, Item
, ItemStyle
, MultiLineItemStyle
, asItem
, divider
, expansionItem
, fullBleedItem
, headerItem
, imageItem
, insetItem
, multiLineItem
, selectItem
, toItem
)
import Element exposing (Attribute, Element)
import Element.Input as Input
import Internal.Button exposing (Button, ButtonStyle)
import Internal.Select as Select exposing (Select)
import Widget.Customize exposing (content)
import Widget.Icon exposing (Icon, IconStyle)

2
src/Internal/List.elm
View File

@ -174,4 +174,4 @@ buttonColumn style =
style.elementColumn.content.otherwise
, content = style.content
}
>> Element.column style.elementColumn.elementColumn
>> Element.column style.elementColumn.elementColumn

5
src/Internal/Material/AppBar.elm
View File

@ -8,13 +8,8 @@ import Internal.AppBar exposing (AppBarStyle)
import Internal.Button exposing (ButtonStyle)
import Internal.Material.Button as Button
import Internal.Material.Icon as Icon
import Internal.Material.Item as Item
import Internal.Material.Palette exposing (Palette)
import Internal.Material.Sheet as Sheet
import Internal.Material.Snackbar as Snackbar
import Internal.Material.TextInput as TextInput
import Svg
import Svg.Attributes
import Widget.Customize as Customize
import Widget.Icon as Icon exposing (Icon)
import Widget.Material.Color as MaterialColor

2
src/Internal/Material/Button.elm
View File

@ -473,7 +473,7 @@ iconButton palette =
, Element.centerX
]
, content =
{ text = { contentText = [Element.centerX] }
{ text = { contentText = [ Element.centerX ] }
, icon =
{ ifActive =
{ size = 18

4
src/Internal/Material/Item.elm
View File

@ -6,10 +6,10 @@ module Internal.Material.Item exposing
, imageItem
, insetDivider
, insetHeader
, insetItem
, middleDivider
, multiLineItem
, selectItem
, insetItem
)
import Color
@ -19,7 +19,7 @@ import Element.Border as Border
import Element.Font as Font
import Html.Attributes as Attributes
import Internal.Button exposing (ButtonStyle)
import Internal.Item exposing (DividerStyle, ExpansionItemStyle, FullBleedItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, InsetItemStyle)
import Internal.Item exposing (DividerStyle, ExpansionItemStyle, FullBleedItemStyle, HeaderStyle, ImageItemStyle, InsetItemStyle, ItemStyle, MultiLineItemStyle)
import Internal.Material.Button as Button
import Internal.Material.Icon as Icon
import Internal.Material.Palette exposing (Palette)

24
src/Internal/Material/List.elm
View File

@ -1,10 +1,10 @@
module Internal.Material.List exposing
( buttonRow
( bottomSheet
, buttonRow
, cardColumn
, column
, row
, sideSheet
, bottomSheet
)
import Element
@ -149,16 +149,17 @@ cardColumn palette =
}
}
sideSheet : Palette -> ColumnStyle msg
sideSheet palette =
{ elementColumn =
(palette.surface |> MaterialColor.textAndBackground)
++ [ Element.width <| Element.maximum 360 <| Element.fill
, Element.height <| Element.fill
, Element.paddingXY 0 8
]
, Element.height <| Element.fill
, Element.paddingXY 0 8
]
, content =
{ element =
{ element =
[ Element.width <| Element.fill ]
, ifSingleton = []
, ifFirst = []
@ -167,20 +168,21 @@ sideSheet palette =
}
}
bottomSheet : Palette -> ColumnStyle msg
bottomSheet palette =
{ elementColumn =
(palette.surface |> MaterialColor.textAndBackground)
++ [ Element.height <| Element.fill
, Element.width <| Element.maximum 360 <| Element.fill
, Element.paddingXY 0 8
]
, Element.width <| Element.maximum 360 <| Element.fill
, Element.paddingXY 0 8
]
, content =
{ element =
{ element =
[ Element.width <| Element.fill ]
, ifSingleton = []
, ifFirst = []
, ifLast = []
, otherwise = []
}
}
}

8
src/Internal/Material/Sheet.elm
View File

@ -1,8 +0,0 @@
module Internal.Material.Sheet exposing (deleteMe)
import Element
import Internal.Material.Palette exposing (Palette)
import Widget.Material.Color as MaterialColor
deleteMe = True

10
src/Internal/Sheet.elm
View File

@ -1,10 +0,0 @@
module Internal.Sheet exposing (delete)
import Element exposing (Attribute, Element)
import Internal.Item exposing (Item)
import Internal.List
import Widget.Customize as Customize
delete = "deleteMe Pls"
-- >> Element.el (style.element)

224
src/Widget.elm
View File

@ -15,12 +15,12 @@ module Widget exposing
, DividerStyle, divider
, selectItem, asItem
, itemList
, menuBar, tabBar
, AppBarStyle, menuBar, tabBar
, SortTableStyle, SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
, TextInputStyle, TextInput, textInput
, TabStyle, Tab, tab
, ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator
, FullBleedItemStyle, InsetItem, InsetItemStyle, fullBleedItem, insetItem,AppBarStyle
, FullBleedItemStyle, InsetItem, InsetItemStyle, fullBleedItem, insetItem
)
{-| This module contains different stateless view functions. No wiring required.
@ -174,7 +174,6 @@ import Internal.List as List
import Internal.Modal as Modal
import Internal.ProgressIndicator as ProgressIndicator
import Internal.Select as Select
import Internal.Sheet as Sheet
import Internal.SortTable as SortTable
import Internal.Switch as Switch
import Internal.Tab as Tab
@ -611,6 +610,22 @@ singleModal =
{-| Same implementation as `singleModal` but also displays the "queued" modals.
import Element
type Msg
= Close
Element.layout
(multiModal
[ { onDismiss = Just Close
, content =
Element.text "Click outside this window to close it."
}
]
)
|> always "Ignore this line" --> "Ignore this line"
-}
multiModal : List { onDismiss : Maybe msg, content : Element msg } -> List (Attribute msg)
multiModal =
@ -971,6 +986,27 @@ type alias Item msg =
List (Attribute msg) -> Element msg
{-| A text item spanning the full width.
import Element
import Widget.Material as Material
[ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
}
, Widget.divider (Material.fullBleedDivider Material.defaultPalette )
, Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
}
]
|> Widget.itemList (Material.cardColumn Material.defaultPalette)
|> always "Ignore this line" --> "Ignore this line"
-}
fullBleedItem :
ItemStyle (FullBleedItemStyle msg) msg
->
@ -1010,22 +1046,16 @@ asItem =
import Element
import Widget.Material as Material
[ Widget.textItem (Material.textItem Material.defaultPalette)
[ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
, content =
\{ size, color } ->
Element.none
}
, Widget.divider (Material.insetDivider Material.defaultPalette )
, Widget.textItem (Material.textItem Material.defaultPalette)
, Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
, content =
\{ size, color } ->
Element.none
}
]
|> Widget.itemList (Material.cardColumn Material.defaultPalette)
@ -1042,23 +1072,17 @@ divider =
import Element
import Widget.Material as Material
[ Widget.textItem (Material.textItem Material.defaultPalette)
[ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
, content =
\{ size, color } ->
Element.none
}
, "Header"
|> Widget.headerItem (Material.insetHeader Material.defaultPalette )
, Widget.textItem (Material.textItem Material.defaultPalette)
, Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
, content =
\{ size, color } ->
Element.none
}
]
|> Widget.itemList (Material.cardColumn Material.defaultPalette)
@ -1075,7 +1099,7 @@ headerItem =
import Element
import Widget.Material as Material
[ Widget.textItem (Material.textItem Material.defaultPalette)
[ Widget.insetItem (Material.insetItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
@ -1084,7 +1108,7 @@ headerItem =
Element.none
}
, Widget.divider (Material.insetDivider Material.defaultPalette )
, Widget.textItem (Material.textItem Material.defaultPalette)
, Widget.insetItem (Material.insetItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
@ -1215,13 +1239,10 @@ imageItem =
isExpanded =
True
in
( [ Widget.textItem (Material.textItem Material.defaultPalette)
( [ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item with Icon"
, content =
\{ size, color } ->
Element.none
}
]
++ Widget.expansionItem (Material.expansionItem Material.defaultPalette )
@ -1230,13 +1251,10 @@ imageItem =
, icon = always Element.none
, text = "Expandable Item"
, content =
[ Widget.textItem (Material.textItem Material.defaultPalette)
[ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item with Icon"
, content =
\{ size, color } ->
Element.none
}
]
}
@ -1265,6 +1283,35 @@ expansionItem =
{-| Displays a selection of Buttons as a item list. This is intended to be used as a menu.
import Element
import Widget.Material as Material
import Widget.Material.Color as MaterialColor
import Element.Font as Font
type Msg =
Select Int
( { selected = Just 1
, options =
[ "Option 1", "Option 2" ]
|> List.map
(\text ->
{ text = text
, icon = always Element.none
}
)
, onSelect = (\int ->
int
|> Select
|> Just
)
}
|> Widget.selectItem (Material.selectItem Material.defaultPalette)
)
|> Widget.itemList (Material.cardColumn Material.defaultPalette)
|> always "Ignore this line" --> "Ignore this line"
-}
selectItem : ItemStyle (ButtonStyle msg) msg -> Select msg -> List (Item msg)
selectItem =
@ -1320,23 +1367,17 @@ column =
import Element
import Widget.Material as Material
[ Widget.textItem (Material.textItem Material.defaultPalette)
[ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
, content =
\{ size, color } ->
Element.none
}
, "Header"
|> Widget.headerItem (Material.insetHeader Material.defaultPalette )
, Widget.textItem (Material.textItem Material.defaultPalette)
, Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
, content =
\{ size, color } ->
Element.none
}
]
|> Widget.itemList (Material.cardColumn Material.defaultPalette)
@ -1395,6 +1436,35 @@ buttonRow =
{-| A column of buttons
import Element
import Widget.Material as Material
type Msg =
Select Int
selected : Maybe Int
selected =
Just 0
Widget.select
{ selected = selected
, options =
[ 1, 2, 42 ]
|> List.map
(\int ->
{ text = String.fromInt int
, icon = always Element.none
}
)
, onSelect = (\i -> Just (Select i ))
}
|> Widget.buttonColumn
{ elementColumn = Material.column
, content = Material.toggleButton Material.defaultPalette
}
|> always "Ignore this line" --> "Ignore this line"
-}
buttonColumn :
{ elementColumn : ColumnStyle msg
@ -1411,19 +1481,20 @@ buttonColumn =
-- APP BAR
--------------------------------------------------------------------------------
{-|-}
{-| -}
type alias AppBarStyle content msg =
{ elementRow : List (Attribute msg)
{ elementRow : List (Attribute msg)
, content :
{ menu :
{ elementRow : List (Attribute msg)
, content : content
}
, search : TextInputStyle msg
, search : TextInputStyle msg
, actions :
{ elementRow : List (Attribute msg)
, content :
{ button : ButtonStyle msg
{ button : ButtonStyle msg
, searchIcon : Icon msg
, moreVerticalIcon : Icon msg
}
@ -1431,10 +1502,39 @@ type alias AppBarStyle content msg =
}
}
{-| A app bar with a menu button on the left side.
This should be the default way to display the app bar. Specially for Phone users.
import Element exposing (DeviceClass(..))
import Widget.Material as Material
type Msg =
Select Int
selected : Int
selected = 0
Widget.menuBar style.tabBar
{ title =
"Title"
|> Element.text
|> Element.el Typography.h6
, deviceClass = Phone
, openRightSheet = Nothing
, openTopSheet = Nothing
, primaryActions =
[ { icon =
Material.Icons.change_history
|> Icon.elmMaterialIcons Color
, text = "Action"
, onPress = Nothing
}
]
, search = Nothing
}
-}
menuBar :
AppBarStyle
@ -1455,12 +1555,53 @@ menuBar :
menuBar =
AppBar.menuBar
{-| A app bar with tabs instead of a menu.
This is should be used for big screens.
It should be avoided for smaller screens or if you have more then 4 tabs
import Element exposing (DeviceClass(..))
import Widget.Material as Material
type Msg =
Select Int
selected : Int
selected = 0
Widget.tabBar style.tabBar
{ title =
"Title"
|> Element.text
|> Element.el Typography.h6
, menu =
{ selected = Just selected
, options =
[ "Home", "About" ]
|> List.map
(\string ->
{ text = string
, icon = always Element.none
}
)
, onSelect = \int -> int |> Select |> Just
}
, deviceClass = Phone
, openRightSheet = Nothing
, openTopSheet = Nothing
, primaryActions =
[ { icon =
Material.Icons.change_history
|> Icon.elmMaterialIcons Color
, text = "Action"
, onPress = Nothing
}
]
, search = Nothing
}
-}
tabBar :
AppBarStyle
@ -1483,7 +1624,6 @@ tabBar =
{----------------------------------------------------------
- SORT TABLE
----------------------------------------------------------}

1
src/Widget/Icon.elm
View File

@ -14,7 +14,6 @@ Just look for the function with the name of the package and copy&paste the respe
-}
import Color exposing (Color)
import Dict exposing (size)
import Element exposing (Element)
import Html exposing (Html)
import Svg exposing (Svg)

20
src/Widget/Layout.elm
View File

@ -13,6 +13,7 @@ module Widget.Layout exposing
It is responsive and changes view to apply to the [material design guidelines](https://material.io/components/app-bars-top).
# Sheets
@docs leftSheet, rightSheet, searchSheet
@ -24,21 +25,14 @@ It is responsive and changes view to apply to the [material design guidelines](h
-}
import Array
import Element exposing (Attribute, DeviceClass(..), Element)
import Element.Input as Input
import Html exposing (Html)
import Internal.AppBar as AppBar exposing (AppBarStyle)
import Internal.Button as Button exposing (Button, ButtonStyle)
import Internal.Dialog as Dialog
import Element exposing (DeviceClass(..), Element)
import Internal.Button exposing (Button, ButtonStyle)
import Internal.Item as Item exposing (InsetItemStyle, ItemStyle)
import Internal.Modal as Modal exposing (Modal)
import Internal.Select as Select exposing (Select)
import Internal.TextInput as TextInput exposing (TextInput, TextInputStyle)
import Internal.List as List exposing (ColumnStyle)
import Internal.Modal exposing (Modal)
import Internal.Select exposing (Select)
import Internal.TextInput as TextInput exposing (TextInput, TextInputStyle)
import Widget.Customize as Customize
import Widget.Icon exposing (Icon)
import Widget.Snackbar as Snackbar exposing (Message, SnackbarStyle)
{-| obtain the Device Calss from a given window.
@ -198,4 +192,4 @@ orderModals modals =
, modals.rightSheet
, modals.topSheet
]
|> List.filterMap identity
|> List.filterMap identity

13
src/Widget/Material.elm
View File

@ -121,7 +121,6 @@ You way want to use special items to visually organize the content of your list.
@docs tab, tabButton
# Advanced
To create your own Material Widgets, here are all internal functions.
@ -154,7 +153,6 @@ import Internal.Material.Item as Item
import Internal.Material.List as List
import Internal.Material.Palette as Palette
import Internal.Material.ProgressIndicator as ProgressIndicator
import Internal.Material.Sheet as Sheet
import Internal.Material.Snackbar as Snackbar
import Internal.Material.SortTable as SortTable
import Internal.Material.Switch as Switch
@ -352,6 +350,7 @@ tabBar =
AppBar.tabBar
{-------------------------------------------------------------------------------
-- L I S T
-------------------------------------------------------------------------------}
@ -370,23 +369,28 @@ column : ColumnStyle msg
column =
List.column
{-| A side sheet. Has a maximal width of 360.
-}
sideSheet : Palette -> ColumnStyle msg
sideSheet =
List.sideSheet
{-| A bottom sheet. Has a maximal width of 360.
{-| A bottom sheet. Has a maximal width of 360.
Should be align to the bottom right corner of the screen.
-}
bottomSheet : Palette -> ColumnStyle msg
bottomSheet =
List.bottomSheet
--------------------------------------------------------------------------------
-- ITEM
--------------------------------------------------------------------------------
{-| A divider covering the full length
-}
fullBleedDivider : Palette -> ItemStyle (DividerStyle msg) msg
@ -500,7 +504,6 @@ selectItem =
{-------------------------------------------------------------------------------
-- D I A L O G
-------------------------------------------------------------------------------}
@ -600,4 +603,4 @@ tabButton =
-}
tab : Palette -> TabStyle msg
tab =
Tab.tab
Tab.tab

1
src/Widget/ScrollingNav.elm
View File

@ -20,7 +20,6 @@ the page. Clicking on a navigation button will scroll directly to that section.
import Browser.Dom as Dom
import Element exposing (Element)
import Html
import Html.Attributes as Attributes
import IntDict exposing (IntDict)
import Task exposing (Task)

6
tests/VerifyExamples/Widget/Item0.elm → tests/VerifyExamples/Widget/AsItem0.elm
View File

@ -1,4 +1,4 @@
module VerifyExamples.Widget.Item0 exposing (..)
module VerifyExamples.Widget.AsItem0 exposing (..)
-- This file got generated by [elm-verify-examples](https://github.com/stoeffel/elm-verify-examples).
-- Please don't modify this file by hand!
@ -18,12 +18,12 @@ import Element
spec0 : Test.Test
spec0 =
Test.test "#item: \n\n Element.text \"Just a text\"\n |> Widget.item\n |> List.singleton\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
Test.test "#asItem: \n\n Element.text \"Just a text\"\n |> Widget.asItem\n |> List.singleton\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
\() ->
Expect.equal
(
Element.text "Just a text"
|> Widget.item
|> Widget.asItem
|> List.singleton
|> Widget.itemList (Material.cardColumn Material.defaultPalette)
|> always "Ignore this line"

48
tests/VerifyExamples/Widget/ButtonColumn0.elm Normal file
View File

@ -0,0 +1,48 @@
module VerifyExamples.Widget.ButtonColumn0 exposing (..)
-- This file got generated by [elm-verify-examples](https://github.com/stoeffel/elm-verify-examples).
-- Please don't modify this file by hand!
import Test
import Expect
import Widget exposing (..)
import Widget.Material as Material
import Element
type Msg =
Select Int
selected : Maybe Int
selected =
Just 0
spec0 : Test.Test
spec0 =
Test.test "#buttonColumn: \n\n Widget.select\n { selected = selected\n , options =\n [ 1, 2, 42 ]\n |> List.map\n (\\int ->\n { text = String.fromInt int\n , icon = always Element.none\n }\n )\n , onSelect = (\\i -> Just (Select i ))\n }\n |> Widget.buttonColumn\n { elementColumn = Material.column\n , content = Material.toggleButton Material.defaultPalette\n }\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
\() ->
Expect.equal
(
Widget.select
{ selected = selected
, options =
[ 1, 2, 42 ]
|> List.map
(\int ->
{ text = String.fromInt int
, icon = always Element.none
}
)
, onSelect = (\i -> Just (Select i ))
}
|> Widget.buttonColumn
{ elementColumn = Material.column
, content = Material.toggleButton Material.defaultPalette
}
|> always "Ignore this line"
)
(
"Ignore this line"
)

4
tests/VerifyExamples/Widget/Dialog0.elm
View File

@ -20,7 +20,7 @@ type Msg
spec0 : Test.Test
spec0 =
Test.test "#dialog: \n\n Element.layout\n (dialog (Material.alertDialog Material.defaultPalette)\n { title = Just \"Accept\"\n , text = \"Are you sure?\"\n , accept =\n { text = \"Accept\"\n , onPress = Just Submit\n }\n |> Just\n , dismiss =\n { text = \"Cancel\"\n , onPress = Just Close\n }\n |> Just\n }\n )\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
Test.test "#dialog: \n\n Element.layout\n (dialog (Material.alertDialog Material.defaultPalette)\n { title = Just \"Accept\"\n , text = \"Are you sure?\"\n , accept =\n { text = \"Accept\"\n , onPress = Just Submit\n }\n |> Just\n , dismiss =\n { text = \"Cancel\"\n , onPress = Just Close\n }\n |> Just\n }\n |> List.singleton\n |> singleModal\n )\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
\() ->
Expect.equal
(
@ -39,6 +39,8 @@ spec0 =
}
|> Just
}
|> List.singleton
|> singleModal
)
|> always "Ignore this line"
)

12
tests/VerifyExamples/Widget/Divider0.elm
View File

@ -18,26 +18,20 @@ import Element
spec0 : Test.Test
spec0 =
Test.test "#divider: \n\n [ Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n , Widget.divider (Material.insetDivider Material.defaultPalette )\n , Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
Test.test "#divider: \n\n [ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n , Widget.divider (Material.insetDivider Material.defaultPalette )\n , Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
\() ->
Expect.equal
(
[ Widget.textItem (Material.textItem Material.defaultPalette)
[ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
, content =
\{ size, color } ->
Element.none
}
, Widget.divider (Material.insetDivider Material.defaultPalette )
, Widget.textItem (Material.textItem Material.defaultPalette)
, Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
, content =
\{ size, color } ->
Element.none
}
]
|> Widget.itemList (Material.cardColumn Material.defaultPalette)

12
tests/VerifyExamples/Widget/ExpansionItem0.elm
View File

@ -21,7 +21,7 @@ type Msg =
spec0 : Test.Test
spec0 =
Test.test "#expansionItem: \n\n let\n isExpanded : Bool\n isExpanded =\n True\n in\n ( [ Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item with Icon\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n ]\n ++ Widget.expansionItem (Material.expansionItem Material.defaultPalette )\n { onToggle = Toggle\n , isExpanded = isExpanded\n , icon = always Element.none\n , text = \"Expandable Item\"\n , content =\n [ Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item with Icon\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n ]\n }\n )\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
Test.test "#expansionItem: \n\n let\n isExpanded : Bool\n isExpanded =\n True\n in\n ( [ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item with Icon\"\n }\n ]\n ++ Widget.expansionItem (Material.expansionItem Material.defaultPalette )\n { onToggle = Toggle\n , isExpanded = isExpanded\n , icon = always Element.none\n , text = \"Expandable Item\"\n , content =\n [ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item with Icon\"\n }\n ]\n }\n )\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
\() ->
Expect.equal
(
@ -30,13 +30,10 @@ spec0 =
isExpanded =
True
in
( [ Widget.textItem (Material.textItem Material.defaultPalette)
( [ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item with Icon"
, content =
\{ size, color } ->
Element.none
}
]
++ Widget.expansionItem (Material.expansionItem Material.defaultPalette )
@ -45,13 +42,10 @@ spec0 =
, icon = always Element.none
, text = "Expandable Item"
, content =
[ Widget.textItem (Material.textItem Material.defaultPalette)
[ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item with Icon"
, content =
\{ size, color } ->
Element.none
}
]
}

42
tests/VerifyExamples/Widget/FullBleedItem0.elm Normal file
View File

@ -0,0 +1,42 @@
module VerifyExamples.Widget.FullBleedItem0 exposing (..)
-- This file got generated by [elm-verify-examples](https://github.com/stoeffel/elm-verify-examples).
-- Please don't modify this file by hand!
import Test
import Expect
import Widget exposing (..)
import Widget.Material as Material
import Element
spec0 : Test.Test
spec0 =
Test.test "#fullBleedItem: \n\n [ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n , Widget.divider (Material.fullBleedDivider Material.defaultPalette )\n , Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
\() ->
Expect.equal
(
[ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
}
, Widget.divider (Material.fullBleedDivider Material.defaultPalette )
, Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
}
]
|> Widget.itemList (Material.cardColumn Material.defaultPalette)
|> always "Ignore this line"
)
(
"Ignore this line"
)

12
tests/VerifyExamples/Widget/HeaderItem0.elm
View File

@ -18,27 +18,21 @@ import Element
spec0 : Test.Test
spec0 =
Test.test "#headerItem: \n\n [ Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n , \"Header\"\n |> Widget.headerItem (Material.insetHeader Material.defaultPalette )\n , Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
Test.test "#headerItem: \n\n [ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n , \"Header\"\n |> Widget.headerItem (Material.insetHeader Material.defaultPalette )\n , Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
\() ->
Expect.equal
(
[ Widget.textItem (Material.textItem Material.defaultPalette)
[ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
, content =
\{ size, color } ->
Element.none
}
, "Header"
|> Widget.headerItem (Material.insetHeader Material.defaultPalette )
, Widget.textItem (Material.textItem Material.defaultPalette)
, Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
, content =
\{ size, color } ->
Element.none
}
]
|> Widget.itemList (Material.cardColumn Material.defaultPalette)

8
tests/VerifyExamples/Widget/TextItem0.elm → tests/VerifyExamples/Widget/InsetItem0.elm
View File

@ -1,4 +1,4 @@
module VerifyExamples.Widget.TextItem0 exposing (..)
module VerifyExamples.Widget.InsetItem0 exposing (..)
-- This file got generated by [elm-verify-examples](https://github.com/stoeffel/elm-verify-examples).
-- Please don't modify this file by hand!
@ -18,11 +18,11 @@ import Element
spec0 : Test.Test
spec0 =
Test.test "#textItem: \n\n [ Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n , Widget.divider (Material.insetDivider Material.defaultPalette )\n , Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
Test.test "#insetItem: \n\n [ Widget.insetItem (Material.insetItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n , Widget.divider (Material.insetDivider Material.defaultPalette )\n , Widget.insetItem (Material.insetItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
\() ->
Expect.equal
(
[ Widget.textItem (Material.textItem Material.defaultPalette)
[ Widget.insetItem (Material.insetItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
@ -31,7 +31,7 @@ spec0 =
Element.none
}
, Widget.divider (Material.insetDivider Material.defaultPalette )
, Widget.textItem (Material.textItem Material.defaultPalette)
, Widget.insetItem (Material.insetItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"

12
tests/VerifyExamples/Widget/ItemList0.elm
View File

@ -18,27 +18,21 @@ import Element
spec0 : Test.Test
spec0 =
Test.test "#itemList: \n\n [ Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n , \"Header\"\n |> Widget.headerItem (Material.insetHeader Material.defaultPalette )\n , Widget.textItem (Material.textItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n , content =\n \\{ size, color } ->\n Element.none\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
Test.test "#itemList: \n\n [ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n , \"Header\"\n |> Widget.headerItem (Material.insetHeader Material.defaultPalette )\n , Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)\n { onPress = Nothing\n , icon = always Element.none\n , text = \"Item\"\n }\n ]\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
\() ->
Expect.equal
(
[ Widget.textItem (Material.textItem Material.defaultPalette)
[ Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
, content =
\{ size, color } ->
Element.none
}
, "Header"
|> Widget.headerItem (Material.insetHeader Material.defaultPalette )
, Widget.textItem (Material.textItem Material.defaultPalette)
, Widget.fullBleedItem (Material.fullBleedItem Material.defaultPalette)
{ onPress = Nothing
, icon = always Element.none
, text = "Item"
, content =
\{ size, color } ->
Element.none
}
]
|> Widget.itemList (Material.cardColumn Material.defaultPalette)

36
tests/VerifyExamples/Widget/Modal0.elm
View File

@ -1,36 +0,0 @@
module VerifyExamples.Widget.Modal0 exposing (..)
-- This file got generated by [elm-verify-examples](https://github.com/stoeffel/elm-verify-examples).
-- Please don't modify this file by hand!
import Test
import Expect
import Widget exposing (..)
import Element
type Msg
= Close
spec0 : Test.Test
spec0 =
Test.test "#modal: \n\n Element.layout\n (modal\n { onDismiss = Just Close\n , content =\n Element.text \"Click outside this window to close it.\"\n }\n )\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
\() ->
Expect.equal
(
Element.layout
(modal
{ onDismiss = Just Close
, content =
Element.text "Click outside this window to close it."
}
)
|> always "Ignore this line"
)
(
"Ignore this line"
)

37
tests/VerifyExamples/Widget/MultiModal0.elm Normal file
View File

@ -0,0 +1,37 @@
module VerifyExamples.Widget.MultiModal0 exposing (..)
-- This file got generated by [elm-verify-examples](https://github.com/stoeffel/elm-verify-examples).
-- Please don't modify this file by hand!
import Test
import Expect
import Widget exposing (..)
import Element
type Msg
= Close
spec0 : Test.Test
spec0 =
Test.test "#multiModal: \n\n Element.layout\n (multiModal\n [ { onDismiss = Just Close\n , content =\n Element.text \"Click outside this window to close it.\"\n }\n ]\n )\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
\() ->
Expect.equal
(
Element.layout
(multiModal
[ { onDismiss = Just Close
, content =
Element.text "Click outside this window to close it."
}
]
)
|> always "Ignore this line"
)
(
"Ignore this line"
)

50
tests/VerifyExamples/Widget/SelectItem0.elm Normal file
View File

@ -0,0 +1,50 @@
module VerifyExamples.Widget.SelectItem0 exposing (..)
-- This file got generated by [elm-verify-examples](https://github.com/stoeffel/elm-verify-examples).
-- Please don't modify this file by hand!
import Test
import Expect
import Widget exposing (..)
import Element.Font as Font
import Widget.Material.Color as MaterialColor
import Widget.Material as Material
import Element
type Msg =
Select Int
spec0 : Test.Test
spec0 =
Test.test "#selectItem: \n\n ( { selected = Just 1\n , options =\n [ \"Option 1\", \"Option 2\" ]\n |> List.map\n (\\text ->\n { text = text\n , icon = always Element.none\n }\n )\n , onSelect = (\\int ->\n int\n |> Select\n |> Just\n )\n }\n |> Widget.selectItem (Material.selectItem Material.defaultPalette)\n )\n |> Widget.itemList (Material.cardColumn Material.defaultPalette)\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
\() ->
Expect.equal
(
( { selected = Just 1
, options =
[ "Option 1", "Option 2" ]
|> List.map
(\text ->
{ text = text
, icon = always Element.none
}
)
, onSelect = (\int ->
int
|> Select
|> Just
)
}
|> Widget.selectItem (Material.selectItem Material.defaultPalette)
)
|> Widget.itemList (Material.cardColumn Material.defaultPalette)
|> always "Ignore this line"
)
(
"Ignore this line"
)

37
tests/VerifyExamples/Widget/SingleModal0.elm Normal file
View File

@ -0,0 +1,37 @@
module VerifyExamples.Widget.SingleModal0 exposing (..)
-- This file got generated by [elm-verify-examples](https://github.com/stoeffel/elm-verify-examples).
-- Please don't modify this file by hand!
import Test
import Expect
import Widget exposing (..)
import Element
type Msg
= Close
spec0 : Test.Test
spec0 =
Test.test "#singleModal: \n\n Element.layout\n (singleModal\n [ { onDismiss = Just Close\n , content =\n Element.text \"Click outside this window to close it.\"\n }\n ]\n )\n |> always \"Ignore this line\"\n --> \"Ignore this line\"" <|
\() ->
Expect.equal
(
Element.layout
(singleModal
[ { onDismiss = Just Close
, content =
Element.text "Click outside this window to close it."
}
]
)
|> always "Ignore this line"
)
(
"Ignore this line"
)