-----------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings  #-}
{-# LANGUAGE RecordWildCards   #-}
-----------------------------------------------------------------------------
module Miso.UI.Popover
  ( -- ** Props
    PopoverProps (..)
  , defaultPopoverProps
    -- ** Views
  , popover_
    -- ** Samples
  , popoverSample
  , popoverCodeSample
  , popoverPropsApi
  ) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
-----------------------------------------------------------------------------
import           Miso.UI.Input
import           Miso.UI.Label
import           Miso.UI.Types
-----------------------------------------------------------------------------
-- | Props for 'popover_'
data PopoverProps model action
  = PopoverProps
  { forall model action. PopoverProps model action -> MisoString
popoverId :: MisoString
    -- ^ Base id; trigger\/popover ids are derived from it (required)
  , forall model action.
PopoverProps model action -> [View model action]
popoverTrigger :: [View model action]
    -- ^ Content of the trigger button (nests other views)
  , forall model action. PopoverProps model action -> [MisoString]
popoverTriggerClasses :: [MisoString]
    -- ^ Classes of the trigger button (defaults to @btn-outline@)
  , forall model action. PopoverProps model action -> [MisoString]
popoverClasses :: [MisoString]
    -- ^ Extra classes for the popover (e.g. @w-80@)
  , forall model action. PopoverProps model action -> Side
popoverSide :: Side
    -- ^ Placement side (@data-side@)
  , forall model action. PopoverProps model action -> Align
popoverAlign :: Align
    -- ^ Placement alignment (@data-align@)
  , forall model action.
PopoverProps model action -> [Attribute action]
popoverAttrs :: [Attribute action]
  }
-----------------------------------------------------------------------------
-- | Smart constructor: outline trigger, bottom placement
defaultPopoverProps :: PopoverProps model action
defaultPopoverProps :: forall model action. PopoverProps model action
defaultPopoverProps
  = PopoverProps
  { popoverId :: MisoString
popoverId = MisoString
"popover"
  , popoverTrigger :: [View model action]
popoverTrigger = []
  , popoverTriggerClasses :: [MisoString]
popoverTriggerClasses = [ MisoString
"btn-outline" ]
  , popoverClasses :: [MisoString]
popoverClasses = [ MisoString
"w-80" ]
  , popoverSide :: Side
popoverSide = Side
BottomSide
  , popoverAlign :: Align
popoverAlign = Align
CenterAlign
  , popoverAttrs :: [Attribute action]
popoverAttrs = []
  }
-----------------------------------------------------------------------------
-- | <https://basecoatui.com/components/popover/ Popover>, driven by 'PopoverProps'.
-- Children render inside the popover.
popover_
  :: PopoverProps model action
  -> [View model action]
  -> View model action
popover_ :: forall model action.
PopoverProps model action
-> [View model action] -> View model action
popover_ PopoverProps model 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.div_
  ( MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"popover"
  Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ (PopoverProps model action -> MisoString
forall model action. PopoverProps model action -> MisoString
popoverId PopoverProps model action
cfg)
  Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: PopoverProps model action -> [Attribute action]
forall model action.
PopoverProps model action -> [Attribute action]
popoverAttrs PopoverProps model action
cfg
  )
  [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.button_
    [ [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (PopoverProps model action -> [MisoString]
forall model action. PopoverProps model action -> [MisoString]
popoverTriggerClasses PopoverProps model action
cfg)
    , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"controls" (PopoverProps model action -> MisoString
forall model action. PopoverProps model action -> MisoString
popoverId PopoverProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-popover")
    , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"expanded" MisoString
"false"
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.type_ MisoString
"button"
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ (PopoverProps model action -> MisoString
forall model action. PopoverProps model action -> MisoString
popoverId PopoverProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-trigger")
    ]
    (PopoverProps model action -> [View model action]
forall model action.
PopoverProps model action -> [View model action]
popoverTrigger PopoverProps model action
cfg)
  , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
    ( [[Attribute action]] -> [Attribute action]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
      [ [ [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (PopoverProps model action -> [MisoString]
forall model action. PopoverProps model action -> [MisoString]
popoverClasses PopoverProps model action
cfg)
        , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"hidden" MisoString
"true"
        , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.data_ MisoString
"popover" MisoString
""
        , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ (PopoverProps model action -> MisoString
forall model action. PopoverProps model action -> MisoString
popoverId PopoverProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-popover")
        ]
      , [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.data_ MisoString
"side" (Side -> MisoString
sideText (PopoverProps model action -> Side
forall model action. PopoverProps model action -> Side
popoverSide PopoverProps model action
cfg)) | PopoverProps model action -> Side
forall model action. PopoverProps model action -> Side
popoverSide PopoverProps model action
cfg Side -> Side -> Bool
forall a. Eq a => a -> a -> Bool
/= Side
BottomSide ]
      , [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.data_ MisoString
"align" (Align -> MisoString
alignText (PopoverProps model action -> Align
forall model action. PopoverProps model action -> Align
popoverAlign PopoverProps model action
cfg)) | PopoverProps model action -> Align
forall model action. PopoverProps model action -> Align
popoverAlign PopoverProps model action
cfg Align -> Align -> Bool
forall a. Eq a => a -> a -> Bool
/= Align
CenterAlign ]
      ]
    ) [View model action]
kids
  ]
-----------------------------------------------------------------------------
popoverSample :: View model action
popoverSample :: forall model action. View model action
popoverSample =
  PopoverProps model action
-> [View model action] -> View model action
forall model action.
PopoverProps model action
-> [View model action] -> View model action
popover_ PopoverProps (ZonkAny 0) action
forall model action. PopoverProps model action
defaultPopoverProps
    { popoverId = "demo-popover"
    , popoverTrigger = [ "Open popover" ]
    }
    [ [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-4" ]
      [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.header_
        [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"grid gap-1.5" ]
        [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.h4_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"leading-none font-medium" ] [ View model action
"Dimensions" ]
        , [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
"Set the dimensions for the layer." ]
        ]
      , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.form_
        [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"form grid gap-2" ]
        [ MisoString -> MisoString -> MisoString -> View model action
forall {model} {action}.
MisoString -> MisoString -> MisoString -> View model action
dimension MisoString
"demo-popover-width" MisoString
"Width" MisoString
"100%"
        , MisoString -> MisoString -> MisoString -> View model action
forall {model} {action}.
MisoString -> MisoString -> MisoString -> View model action
dimension MisoString
"demo-popover-max-width" MisoString
"Max. width" MisoString
"300px"
        , MisoString -> MisoString -> MisoString -> View model action
forall {model} {action}.
MisoString -> MisoString -> MisoString -> View model action
dimension MisoString
"demo-popover-height" MisoString
"Height" MisoString
"25px"
        , MisoString -> MisoString -> MisoString -> View model action
forall {model} {action}.
MisoString -> MisoString -> MisoString -> View model action
dimension MisoString
"demo-popover-max-height" MisoString
"Max. height" MisoString
"none"
        ]
      ]
    ]
  where
    dimension :: MisoString -> MisoString -> MisoString -> View model action
dimension MisoString
fieldId MisoString
labelText MisoString
val =
      [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 grid-cols-3 items-center gap-4" ]
      [ LabelProps action -> [View model action] -> View model action
forall action model.
LabelProps action -> [View model action] -> View model action
label_ LabelProps action
forall action. LabelProps action
defaultLabelProps { labelFor = Just fieldId } [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
labelText ]
      , InputProps action -> View model action
forall action model. InputProps action -> View model action
input_ InputProps action
forall action. InputProps action
defaultInputProps
        { inputId = Just fieldId
        , inputValue = Just val
        , inputClasses = [ "col-span-2", "h-8" ]
        }
      ]
-----------------------------------------------------------------------------
popoverCodeSample :: View model action
popoverCodeSample :: forall model action. View model action
popoverCodeSample =
  View model action
"""
  -----------------------------------------------------------------------------
  module MyPopover (popoverSample) where
  -----------------------------------------------------------------------------
  import           Miso
  import qualified Miso.Html.Element as H
  import qualified Miso.Html.Property as P
  import           Miso.UI.Input
  import           Miso.UI.Label
  import           Miso.UI.Types
  import           Miso.UI.Popover
  -----------------------------------------------------------------------------
  popoverSample :: View model action
  popoverSample =
    popover_ defaultPopoverProps
      { popoverId = "demo-popover"
      , popoverTrigger = [ "Open popover" ]
      }
      [ H.div_
        [ P.class_ "grid gap-4" ]
        [ H.header_
          [ P.class_ "grid gap-1.5" ]
          [ H.h4_ [ P.class_ "leading-none font-medium" ] [ "Dimensions" ]
          , H.p_ [ P.class_ "text-muted-foreground text-sm" ]
            [ "Set the dimensions for the layer." ]
          ]
        , H.form_
          [ P.class_ "form grid gap-2" ]
          [ dimension "demo-popover-width" "Width" "100%"
          , dimension "demo-popover-max-width" "Max. width" "300px"
          , dimension "demo-popover-height" "Height" "25px"
          , dimension "demo-popover-max-height" "Max. height" "none"
          ]
        ]
      ]
    where
      dimension fieldId labelText val =
        H.div_
        [ P.class_ "grid grid-cols-3 items-center gap-4" ]
        [ label_ defaultLabelProps { labelFor = Just fieldId } [ text labelText ]
        , input_ defaultInputProps
          { inputId = Just fieldId
          , inputValue = Just val
          , inputClasses = [ "col-span-2", "h-8" ]
          }
        ]
  """
-----------------------------------------------------------------------------
popoverPropsApi :: View model action
popoverPropsApi :: forall model action. View model action
popoverPropsApi =
  View model action
"""
  -- | Props for 'popover_'
  data PopoverProps model action
    = PopoverProps
    { popoverId :: MisoString
      -- ^ Base id; trigger\\/popover ids are derived from it (required)
    , popoverTrigger :: [View model action]
      -- ^ Content of the trigger button (nests other views)
    , popoverTriggerClasses :: [MisoString]
      -- ^ Classes of the trigger button (defaults to @btn-outline@)
    , popoverClasses :: [MisoString]
      -- ^ Extra classes for the popover (e.g. @w-80@)
    , popoverSide :: Side
      -- ^ Placement side (@data-side@)
    , popoverAlign :: Align
      -- ^ Placement alignment (@data-align@)
    , popoverAttrs :: [Attribute action]
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor: outline trigger, bottom placement
  defaultPopoverProps :: PopoverProps model action
  defaultPopoverProps
    = PopoverProps
    { popoverId = "popover"
    , popoverTrigger = []
    , popoverTriggerClasses = [ "btn-outline" ]
    , popoverClasses = [ "w-80" ]
    , popoverSide = BottomSide
    , popoverAlign = CenterAlign
    , popoverAttrs = []
    }
  """
-----------------------------------------------------------------------------