{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings #-}
{-# LANGUAGE RecordWildCards #-}
module Miso.UI.RadioGroup
(
RadioGroupProps (..)
, defaultRadioGroupProps
, RadioProps (..)
, defaultRadioProps
, radioGroup_
, radio_
, radioInput_
, radioGroupUsage
, radioGroupSample
, radioGroupCodeSample
, radioGroupPropsApi
) where
import Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
data RadioGroupProps action
= RadioGroupProps
{ forall action. RadioGroupProps action -> [MisoString]
radioGroupClasses :: [MisoString]
, forall action. RadioGroupProps action -> [Attribute action]
radioGroupAttrs :: [Attribute action]
}
defaultRadioGroupProps :: RadioGroupProps action
defaultRadioGroupProps :: forall action. RadioGroupProps action
defaultRadioGroupProps
= RadioGroupProps
{ radioGroupClasses :: [MisoString]
radioGroupClasses = []
, radioGroupAttrs :: [Attribute action]
radioGroupAttrs = []
}
data RadioProps action
= RadioProps
{ forall action. RadioProps action -> MisoString
radioName :: MisoString
, forall action. RadioProps action -> MisoString
radioValue :: MisoString
, forall action. RadioProps action -> Bool
radioChecked :: Bool
, forall action. RadioProps action -> Bool
radioDisabled :: Bool
, forall action. RadioProps action -> [MisoString]
radioClasses :: [MisoString]
, forall action. RadioProps action -> [MisoString]
radioLabelClasses :: [MisoString]
, forall action. RadioProps action -> [Attribute action]
radioAttrs :: [Attribute action]
}
defaultRadioProps :: RadioProps action
defaultRadioProps :: forall action. RadioProps action
defaultRadioProps
= RadioProps
{ radioName :: MisoString
radioName = MisoString
"radio-group"
, radioValue :: MisoString
radioValue = MisoString
""
, radioChecked :: Bool
radioChecked = Bool
False
, radioDisabled :: Bool
radioDisabled = Bool
False
, radioClasses :: [MisoString]
radioClasses = []
, radioLabelClasses :: [MisoString]
radioLabelClasses = []
, radioAttrs :: [Attribute action]
radioAttrs = []
}
radioGroup_
:: RadioGroupProps action
-> [View model action]
-> View model action
radioGroup_ :: forall action model.
RadioGroupProps action -> [View model action] -> View model action
radioGroup_ RadioGroupProps {[MisoString]
[Attribute action]
radioGroupClasses :: forall action. RadioGroupProps action -> [MisoString]
radioGroupAttrs :: forall action. RadioGroupProps action -> [Attribute action]
radioGroupClasses :: [MisoString]
radioGroupAttrs :: [Attribute action]
..} [View model action]
kids =
[Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.fieldset_
( [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (MisoString
"grid" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: MisoString
"gap-3" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: [MisoString]
radioGroupClasses)
Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
radioGroupAttrs
) [View model action]
kids
radio_
:: RadioProps action
-> [View model action]
-> View model action
radio_ :: forall action model.
RadioProps action -> [View model action] -> View model action
radio_ RadioProps 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]
: RadioProps action -> [MisoString]
forall action. RadioProps action -> [MisoString]
radioLabelClasses RadioProps action
cfg) ]
( RadioProps action -> View model action
forall action model. RadioProps action -> View model action
radioInput_ RadioProps action
cfg View model action -> [View model action] -> [View model action]
forall a. a -> [a] -> [a]
: [View model action]
kids )
radioInput_ :: RadioProps action -> View model action
radioInput_ :: forall action model. RadioProps action -> View model action
radioInput_ RadioProps {Bool
[MisoString]
[Attribute action]
MisoString
radioName :: forall action. RadioProps action -> MisoString
radioValue :: forall action. RadioProps action -> MisoString
radioChecked :: forall action. RadioProps action -> Bool
radioDisabled :: forall action. RadioProps action -> Bool
radioClasses :: forall action. RadioProps action -> [MisoString]
radioLabelClasses :: forall action. RadioProps action -> [MisoString]
radioAttrs :: forall action. RadioProps action -> [Attribute action]
radioName :: MisoString
radioValue :: MisoString
radioChecked :: Bool
radioDisabled :: Bool
radioClasses :: [MisoString]
radioLabelClasses :: [MisoString]
radioAttrs :: [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]
radioClasses)
, MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.type_ MisoString
"radio"
, MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.name_ MisoString
radioName
, MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.value_ MisoString
radioValue
]
, [ Bool -> Attribute action
forall action. Bool -> Attribute action
P.checked_ Bool
True | Bool
radioChecked ]
, [ Attribute action
forall action. Attribute action
P.disabled_ | Bool
radioDisabled ]
, [Attribute action]
radioAttrs
]
radioGroupUsage :: View model action
radioGroupUsage :: forall model action. View model action
radioGroupUsage =
RadioGroupProps action -> [View model action] -> View model action
forall action model.
RadioGroupProps action -> [View model action] -> View model action
radioGroup_ RadioGroupProps action
forall action. RadioGroupProps action
defaultRadioGroupProps
[ RadioProps action -> [View model action] -> View model action
forall action model.
RadioProps action -> [View model action] -> View model action
radio_ RadioProps action
forall action. RadioProps action
defaultRadioProps { radioName = "my-group", radioValue = "default" }
[ View model action
"Default" ]
, RadioProps action -> [View model action] -> View model action
forall action model.
RadioProps action -> [View model action] -> View model action
radio_ RadioProps action
forall action. RadioProps action
defaultRadioProps
{ radioName = "my-group"
, radioValue = "comfortable"
, radioChecked = True
}
[ View model action
"Comfortable" ]
, RadioProps action -> [View model action] -> View model action
forall action model.
RadioProps action -> [View model action] -> View model action
radio_ RadioProps action
forall action. RadioProps action
defaultRadioProps
{ radioName = "my-group"
, radioValue = "compact"
, radioDisabled = True
}
[ View model action
"Compact" ]
]
radioGroupSample :: View model action
radioGroupSample :: forall model action. View model action
radioGroupSample =
[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
"flex flex-col gap-y-6" ]
[ RadioGroupProps action -> [View model action] -> View model action
forall action model.
RadioGroupProps action -> [View model action] -> View model action
radioGroup_ RadioGroupProps action
forall action. RadioGroupProps action
defaultRadioGroupProps
[ RadioProps action -> [View model action] -> View model action
forall action model.
RadioProps action -> [View model action] -> View model action
radio_ RadioProps action
forall action. RadioProps action
defaultRadioProps { radioName = "demo-radio-group", radioValue = "default" }
[ View model action
"Default" ]
, RadioProps action -> [View model action] -> View model action
forall action model.
RadioProps action -> [View model action] -> View model action
radio_ RadioProps action
forall action. RadioProps action
defaultRadioProps
{ radioName = "demo-radio-group"
, radioValue = "comfortable"
, radioChecked = True
}
[ View model action
"Comfortable" ]
, RadioProps action -> [View model action] -> View model action
forall action model.
RadioProps action -> [View model action] -> View model action
radio_ RadioProps action
forall action. RadioProps action
defaultRadioProps { radioName = "demo-radio-group", radioValue = "compact" }
[ View model action
"Compact" ]
]
, RadioGroupProps action -> [View model action] -> View model action
forall action model.
RadioGroupProps action -> [View model action] -> View model action
radioGroup_ RadioGroupProps action
forall action. RadioGroupProps action
defaultRadioGroupProps { radioGroupClasses = [ "max-w-sm" ] }
[ View model action -> View model action -> View model action
forall {model} {action}.
View model action -> View model action -> View model action
plan View model action
"Starter Plan"
View model action
"Perfect for small businesses getting started with our platform"
, View model action -> View model action -> View model action
forall {model} {action}.
View model action -> View model action -> View model action
plan View model action
"Pro Plan"
View model action
"Advanced features for growing businesses with higher demands"
]
]
where
plan :: View model action -> View model action -> View model action
plan View model action
name View model action
description =
RadioProps action -> [View model action] -> View model action
forall action model.
RadioProps action -> [View model action] -> View model action
radio_ RadioProps action
forall action. RadioProps action
defaultRadioProps
{ radioName = "demo-radio-group-styled"
, radioValue = "no"
, radioClasses =
[ "checked:bg-green-600"
, "checked:border-green-600"
, "dark:checked:bg-input/30"
, "checked:before:bg-background"
, "dark:checked:before:bg-primary"
]
, radioLabelClasses =
[ "gap-3", "items-start", "hover:bg-accent/50", "rounded-lg", "border", "p-4"
, "has-[input[type='radio']:checked]:border-green-600"
, "has-[input[type='radio']:checked]:bg-green-50"
, "dark:has-[input[type='radio']:checked]:border-green-900"
, "dark:has-[input[type='radio']:checked]:bg-green-950"
]
}
[ [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 font-normal" ]
[ [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" ] [ View model action
name ]
, [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 leading-snug" ] [ View model action
description ]
]
]
radioGroupCodeSample :: View model action
radioGroupCodeSample :: forall model action. View model action
radioGroupCodeSample =
View model action
"""
-----------------------------------------------------------------------------
module MyRadioGroup (radioGroupUsage) where
-----------------------------------------------------------------------------
import Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
import Miso.UI.RadioGroup
-----------------------------------------------------------------------------
radioGroupUsage :: View model action
radioGroupUsage =
radioGroup_ defaultRadioGroupProps
[ radio_ defaultRadioProps { radioName = "my-group", radioValue = "default" }
[ "Default" ]
, radio_ defaultRadioProps
{ radioName = "my-group"
, radioValue = "comfortable"
, radioChecked = True
}
[ "Comfortable" ]
, radio_ defaultRadioProps
{ radioName = "my-group"
, radioValue = "compact"
, radioDisabled = True
}
[ "Compact" ]
]
"""
radioGroupPropsApi :: View model action
radioGroupPropsApi :: forall model action. View model action
radioGroupPropsApi =
View model action
"""
-- | Props for 'radioGroup_'
data RadioGroupProps action
= RadioGroupProps
{ radioGroupClasses :: [MisoString]
-- ^ Extra classes appended to the @fieldset@
, radioGroupAttrs :: [Attribute action]
}
-----------------------------------------------------------------------------
-- | Smart constructor
defaultRadioGroupProps :: RadioGroupProps action
defaultRadioGroupProps
= RadioGroupProps
{ radioGroupClasses = []
, radioGroupAttrs = []
}
-----------------------------------------------------------------------------
-- | Props for a single 'radio_' inside a group
data RadioProps action
= RadioProps
{ radioName :: MisoString
-- ^ Groups radios together (required)
, radioValue :: MisoString
, radioChecked :: Bool
, radioDisabled :: Bool
, radioClasses :: [MisoString]
-- ^ Extra classes appended to the @input@
, radioLabelClasses :: [MisoString]
-- ^ Extra classes appended to the wrapping @label@
, radioAttrs :: [Attribute action]
}
-----------------------------------------------------------------------------
-- | Smart constructor: unchecked, enabled
defaultRadioProps :: RadioProps action
defaultRadioProps
= RadioProps
{ radioName = "radio-group"
, radioValue = ""
, radioChecked = False
, radioDisabled = False
, radioClasses = []
, radioLabelClasses = []
, radioAttrs = []
}
"""