{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings #-}
{-# LANGUAGE RecordWildCards #-}
module Miso.UI.Switch
(
SwitchProps (..)
, defaultSwitchProps
, switch_
, switchInput_
, switchSample
, switchCodeSample
, switchPropsApi
) where
import Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
data SwitchProps action
= SwitchProps
{ forall action. SwitchProps action -> Maybe MisoString
switchId :: Maybe MisoString
, forall action. SwitchProps action -> MisoString
switchName :: MisoString
, forall action. SwitchProps action -> Bool
switchChecked :: Bool
, forall action. SwitchProps action -> Bool
switchDisabled :: Bool
, forall action. SwitchProps action -> [MisoString]
switchClasses :: [MisoString]
, forall action. SwitchProps action -> [MisoString]
switchLabelClasses :: [MisoString]
, forall action. SwitchProps action -> [Attribute action]
switchAttrs :: [Attribute action]
}
defaultSwitchProps :: SwitchProps action
defaultSwitchProps :: forall action. SwitchProps action
defaultSwitchProps
= SwitchProps
{ switchId :: Maybe MisoString
switchId = Maybe MisoString
forall a. Maybe a
Nothing
, switchName :: MisoString
switchName = MisoString
"switch"
, switchChecked :: Bool
switchChecked = Bool
False
, switchDisabled :: Bool
switchDisabled = Bool
False
, switchClasses :: [MisoString]
switchClasses = []
, switchLabelClasses :: [MisoString]
switchLabelClasses = []
, switchAttrs :: [Attribute action]
switchAttrs = []
}
switch_
:: SwitchProps action
-> [View model action]
-> View model action
switch_ :: forall action model.
SwitchProps action -> [View model action] -> View model action
switch_ SwitchProps action
cfg [View model action]
kids =
[Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.label_
[ [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (MisoString
"label" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: SwitchProps action -> [MisoString]
forall action. SwitchProps action -> [MisoString]
switchLabelClasses SwitchProps action
cfg) ]
( SwitchProps action -> View model action
forall action model. SwitchProps action -> View model action
switchInput_ SwitchProps action
cfg View model action -> [View model action] -> [View model action]
forall a. a -> [a] -> [a]
: [View model action]
kids )
switchInput_ :: SwitchProps action -> View model action
switchInput_ :: forall action model. SwitchProps action -> View model action
switchInput_ SwitchProps {Bool
[MisoString]
[Attribute action]
Maybe MisoString
MisoString
switchId :: forall action. SwitchProps action -> Maybe MisoString
switchName :: forall action. SwitchProps action -> MisoString
switchChecked :: forall action. SwitchProps action -> Bool
switchDisabled :: forall action. SwitchProps action -> Bool
switchClasses :: forall action. SwitchProps action -> [MisoString]
switchLabelClasses :: forall action. SwitchProps action -> [MisoString]
switchAttrs :: forall action. SwitchProps action -> [Attribute action]
switchId :: Maybe MisoString
switchName :: MisoString
switchChecked :: Bool
switchDisabled :: Bool
switchClasses :: [MisoString]
switchLabelClasses :: [MisoString]
switchAttrs :: [Attribute action]
..} = [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
H.input_ ([Attribute action] -> View model action)
-> [Attribute action] -> View model action
forall a b. (a -> b) -> a -> b
$ [[Attribute action]] -> [Attribute action]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
[ [ [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (MisoString
"input" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: [MisoString]
switchClasses)
, MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.type_ MisoString
"checkbox"
, MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"switch"
, MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.name_ MisoString
switchName
]
, [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ MisoString
i | Just MisoString
i <- [Maybe MisoString
switchId] ]
, [ Bool -> Attribute action
forall action. Bool -> Attribute action
P.checked_ Bool
True | Bool
switchChecked ]
, [ Attribute action
forall action. Attribute action
P.disabled_ | Bool
switchDisabled ]
, [Attribute action]
switchAttrs
]
switchSample :: View model action
switchSample :: forall model action. View model action
switchSample =
[Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
[ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"inline-flex flex-col gap-y-6" ]
[ SwitchProps action -> [View model action] -> View model action
forall action model.
SwitchProps action -> [View model action] -> View model action
switch_ SwitchProps action
forall action. SwitchProps action
defaultSwitchProps [ View model action
"Airplane Mode" ]
, SwitchProps action -> [View model action] -> View model action
forall action model.
SwitchProps action -> [View model action] -> View model action
switch_ SwitchProps action
forall action. SwitchProps action
defaultSwitchProps
{ switchChecked = True
, switchClasses = [ "checked:bg-blue-500", "dark:checked:bg-blue-600" ]
}
[ View model action
"Bluetooth" ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.label_
[ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"label gap-6 leading-none border rounded-lg p-4 has-[input[type='checkbox']:checked]:border-blue-600" ]
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
[ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"grid gap-1" ]
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.h2_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"font-medium text-sm" ] [ View model action
"Share across devices" ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.p_
[ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"text-muted-foreground text-sm" ]
[ View model action
"Focus is shared across devices, and turns off when you leave the app." ]
]
, SwitchProps action -> View model action
forall action model. SwitchProps action -> View model action
switchInput_ SwitchProps action
forall action. SwitchProps action
defaultSwitchProps
{ switchClasses = [ "checked:bg-blue-500", "dark:checked:bg-blue-600" ]
}
]
]
switchCodeSample :: View model action
switchCodeSample :: forall model action. View model action
switchCodeSample =
View model action
"""
-----------------------------------------------------------------------------
module MySwitch (switchSample) where
-----------------------------------------------------------------------------
import Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
import Miso.UI.Switch
-----------------------------------------------------------------------------
switchSample :: View model action
switchSample =
H.div_
[ P.class_ "inline-flex flex-col gap-y-6" ]
[ switch_ defaultSwitchProps [ "Airplane Mode" ]
, switch_ defaultSwitchProps
{ switchChecked = True
, switchClasses = [ "checked:bg-blue-500", "dark:checked:bg-blue-600" ]
}
[ "Bluetooth" ]
, H.label_
[ P.class_ "label gap-6 leading-none border rounded-lg p-4 has-[input[type='checkbox']:checked]:border-blue-600" ]
[ H.div_
[ P.class_ "grid gap-1" ]
[ H.h2_ [ P.class_ "font-medium text-sm" ] [ "Share across devices" ]
, H.p_
[ P.class_ "text-muted-foreground text-sm" ]
[ "Focus is shared across devices, and turns off when you leave the app." ]
]
, switchInput_ defaultSwitchProps
{ switchClasses = [ "checked:bg-blue-500", "dark:checked:bg-blue-600" ]
}
]
]
"""
switchPropsApi :: View model action
switchPropsApi :: forall model action. View model action
switchPropsApi =
View model action
"""
-- | Props for 'switch_'
data SwitchProps action
= SwitchProps
{ switchId :: Maybe MisoString
, switchName :: MisoString
, switchChecked :: Bool
, switchDisabled :: Bool
, switchClasses :: [MisoString]
-- ^ Extra classes appended to the @input@ (e.g. @checked:bg-blue-500@)
, switchLabelClasses :: [MisoString]
-- ^ Extra classes appended to the wrapping @label@
, switchAttrs :: [Attribute action]
}
-----------------------------------------------------------------------------
-- | Smart constructor: unchecked, enabled
defaultSwitchProps :: SwitchProps action
defaultSwitchProps
= SwitchProps
{ switchId = Nothing
, switchName = "switch"
, switchChecked = False
, switchDisabled = False
, switchClasses = []
, switchLabelClasses = []
, switchAttrs = []
}
"""