-----------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings  #-}
{-# LANGUAGE RecordWildCards   #-}
-----------------------------------------------------------------------------
module Miso.UI.InputGroup
  ( -- ** Props
    InputGroupProps (..)
  , defaultInputGroupProps
    -- ** Views
  , inputGroup_
  , inputGroupHeader_
  , inputGroupFooter_
    -- ** Samples
  , inputGroupUsage
  , inputGroupSample
  , inputGroupCodeSample
  , inputGroupPropsApi
  ) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
import qualified Miso.Svg           as S
import qualified Miso.Svg.Property  as SP
-----------------------------------------------------------------------------
import           Miso.UI.Button
import           Miso.UI.Icons
import           Miso.UI.Textarea
import           Miso.UI.Types
-----------------------------------------------------------------------------
-- | Props for 'inputGroup_'. Header and footer overlay the wrapped control.
data InputGroupProps model action
  = InputGroupProps
  { forall model action.
InputGroupProps model action -> [View model action]
inputGroupHeader :: [View model action]
    -- ^ Content pinned to the top of the group
  , forall model action.
InputGroupProps model action -> [View model action]
inputGroupFooter :: [View model action]
    -- ^ Content pinned to the bottom of the group
  , forall model action. InputGroupProps model action -> [MisoString]
inputGroupClasses :: [MisoString]
  , forall model action.
InputGroupProps model action -> [Attribute action]
inputGroupAttrs :: [Attribute action]
  }
-----------------------------------------------------------------------------
-- | Smart constructor
defaultInputGroupProps :: InputGroupProps model action
defaultInputGroupProps :: forall model action. InputGroupProps model action
defaultInputGroupProps
  = InputGroupProps
  { inputGroupHeader :: [View model action]
inputGroupHeader = []
  , inputGroupFooter :: [View model action]
inputGroupFooter = []
  , inputGroupClasses :: [MisoString]
inputGroupClasses = []
  , inputGroupAttrs :: [Attribute action]
inputGroupAttrs = []
  }
-----------------------------------------------------------------------------
-- | <https://basecoatui.com/components/input-group/ Input Group>: control with
-- pinned header\/footer rows. Children are the wrapped control(s).
inputGroup_
  :: InputGroupProps model action
  -> [View model action]
  -> View model action
inputGroup_ :: forall model action.
InputGroupProps model action
-> [View model action] -> View model action
inputGroup_ InputGroupProps {[MisoString]
[Attribute action]
[View model action]
inputGroupHeader :: forall model action.
InputGroupProps model action -> [View model action]
inputGroupFooter :: forall model action.
InputGroupProps model action -> [View model action]
inputGroupClasses :: forall model action. InputGroupProps model action -> [MisoString]
inputGroupAttrs :: forall model action.
InputGroupProps model action -> [Attribute action]
inputGroupHeader :: [View model action]
inputGroupFooter :: [View model action]
inputGroupClasses :: [MisoString]
inputGroupAttrs :: [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.div_
    ( [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (MisoString
"relative" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: [MisoString]
inputGroupClasses)
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
inputGroupAttrs
    )
    ([View model action] -> View model action)
-> [View model action] -> View model action
forall a b. (a -> b) -> a -> b
$ [[View model action]] -> [View model action]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
    [ [View model action]
kids
    , [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
inputGroupHeader_ [] [View model action]
inputGroupHeader | Bool -> Bool
not ([View model action] -> Bool
forall a. [a] -> Bool
forall (t :: * -> *) a. Foldable t => t a -> Bool
null [View model action]
inputGroupHeader) ]
    , [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
inputGroupFooter_ [] [View model action]
inputGroupFooter | Bool -> Bool
not ([View model action] -> Bool
forall a. [a] -> Bool
forall (t :: * -> *) a. Foldable t => t a -> Bool
null [View model action]
inputGroupFooter) ]
    ]
-----------------------------------------------------------------------------
inputGroupHeader_
  :: [Attribute action]
  -> [View model action]
  -> View model action
inputGroupHeader_ :: forall action model.
[Attribute action] -> [View model action] -> View model action
inputGroupHeader_ [Attribute action]
attrs [View model action]
kids =
  [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
"absolute top-0 flex items-center w-full gap-2 p-3 border-b"
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
attrs
    ) [View model action]
kids
-----------------------------------------------------------------------------
inputGroupFooter_
  :: [Attribute action]
  -> [View model action]
  -> View model action
inputGroupFooter_ :: forall action model.
[Attribute action] -> [View model action] -> View model action
inputGroupFooter_ [Attribute action]
attrs [View model action]
kids =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.footer_
    ( MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"absolute bottom-0 flex items-center w-full gap-2 p-3 border-t"
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
attrs
    ) [View model action]
kids
-----------------------------------------------------------------------------
-- | Compact usage example (source of the kitchen sink "Code" tab)
inputGroupUsage :: View model action
inputGroupUsage :: forall model action. View model action
inputGroupUsage =
  InputGroupProps model action
-> [View model action] -> View model action
forall model action.
InputGroupProps model action
-> [View model action] -> View model action
inputGroup_ InputGroupProps (ZonkAny 0) action
forall model action. InputGroupProps model action
defaultInputGroupProps
  { inputGroupHeader =
    [ H.span_
      [ P.class_ "font-mono text-sm text-muted-foreground mr-auto" ]
      [ "script.js" ]
    ]
  , inputGroupFooter =
    [ H.span_
      [ P.class_ "text-sm text-muted-foreground mr-auto" ]
      [ "Line 1, Column 1" ]
    , button_ defaultButtonProps { buttonSize = Small } [ "Run" ]
    ]
  }
  [ TextareaProps action -> View model action
forall action model. TextareaProps action -> View model action
textarea_ TextareaProps action
forall action. TextareaProps action
defaultTextareaProps
    { textareaPlaceholder = Just "console.log('Hello, world!')."
    , textareaClasses = [ "pt-15", "pb-17", "min-h-77" ]
    }
  ]
-----------------------------------------------------------------------------
inputGroupSample :: View model action
inputGroupSample :: forall model action. View model action
inputGroupSample =
  InputGroupProps model action
-> [View model action] -> View model action
forall model action.
InputGroupProps model action
-> [View model action] -> View model action
inputGroup_ InputGroupProps (ZonkAny 1) action
forall model action. InputGroupProps model action
defaultInputGroupProps
    { inputGroupHeader =
      [ jsIcon
      , H.span_
        [ P.class_ "font-mono text-sm text-muted-foreground mr-auto" ]
        [ "script.js" ]
      , button_ defaultButtonProps
        { buttonSize = Small
        , buttonIcon = True
        , buttonVariant = Ghost
        , buttonClasses = [ "text-muted-foreground", "hover:text-accent-foreground", "size-6" ]
        }
        [ refreshIcon ]
      , button_ defaultButtonProps
        { buttonSize = Small
        , buttonIcon = True
        , buttonVariant = Ghost
        , buttonClasses = [ "text-muted-foreground", "hover:text-accent-foreground", "size-6" ]
        }
        [ copyIcon ]
      ]
    , inputGroupFooter =
      [ H.span_
        [ P.class_ "text-sm text-muted-foreground mr-auto" ]
        [ "Line 1, Column 1" ]
      , button_ defaultButtonProps { buttonSize = Small }
        [ "Run", returnIcon ]
      ]
    }
    [ TextareaProps action -> View model action
forall action model. TextareaProps action -> View model action
textarea_ TextareaProps action
forall action. TextareaProps action
defaultTextareaProps
      { textareaPlaceholder = Just "console.log('Hello, world!')."
      , textareaClasses = [ "pt-15", "pb-17", "min-h-77" ]
      }
    ]
  where
    jsIcon :: View model action
jsIcon = [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
lucide_
      [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"size-4 text-muted-foreground" ]
      [ [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M20 4l-2 14.5l-6 2l-6 -2l-2 -14.5z" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M7.5 8h3v8l-2 -1" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_
        [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M16.5 8h-2.5a.5 .5 0 0 0 -.5 .5v3a.5 .5 0 0 0 .5 .5h1.423a.5 .5 0 0 1 .495 .57l-.418 2.93l-2 .5"
        ]
      ]
    refreshIcon :: View model action
refreshIcon = [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
lucide_ []
      [ [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M3 3v5h5" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M16 16h5v5" ]
      ]
    copyIcon :: View model action
copyIcon = [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
lucide_ []
      [ [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.rect_
        [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.x_ MisoString
"8", MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.y_ MisoString
"8", MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.rx_ MisoString
"2", MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.ry_ MisoString
"2"
        , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.width_ MisoString
"14", MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.height_ MisoString
"14"
        ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" ]
      ]
    returnIcon :: View model action
returnIcon = [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
lucide_ []
      [ [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.polyline_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.points_ MisoString
"9 10 4 15 9 20" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M20 4v7a4 4 0 0 1-4 4H4" ]
      ]
-----------------------------------------------------------------------------
inputGroupCodeSample :: View model action
inputGroupCodeSample :: forall model action. View model action
inputGroupCodeSample =
  View model action
"""
  -----------------------------------------------------------------------------
  module MyInputGroup (inputGroupUsage) where
  -----------------------------------------------------------------------------
  import           Miso
  import qualified Miso.Html.Element as H
  import qualified Miso.Html.Property as P
  import qualified Miso.Svg           as S
  import qualified Miso.Svg.Property  as SP
  import           Miso.UI.Button
  import           Miso.UI.Icons
  import           Miso.UI.Textarea
  import           Miso.UI.Types
  import           Miso.UI.InputGroup
  -----------------------------------------------------------------------------
  inputGroupUsage :: View model action
  inputGroupUsage =
    inputGroup_ defaultInputGroupProps
    { inputGroupHeader =
      [ H.span_
        [ P.class_ "font-mono text-sm text-muted-foreground mr-auto" ]
        [ "script.js" ]
      ]
    , inputGroupFooter =
      [ H.span_
        [ P.class_ "text-sm text-muted-foreground mr-auto" ]
        [ "Line 1, Column 1" ]
      , button_ defaultButtonProps { buttonSize = Small } [ "Run" ]
      ]
    }
    [ textarea_ defaultTextareaProps
      { textareaPlaceholder = Just "console.log('Hello, world!')."
      , textareaClasses = [ "pt-15", "pb-17", "min-h-77" ]
      }
    ]
  """
-----------------------------------------------------------------------------
inputGroupPropsApi :: View model action
inputGroupPropsApi :: forall model action. View model action
inputGroupPropsApi =
  View model action
"""
  -- | Props for 'inputGroup_'. Header and footer overlay the wrapped control.
  data InputGroupProps model action
    = InputGroupProps
    { inputGroupHeader :: [View model action]
      -- ^ Content pinned to the top of the group
    , inputGroupFooter :: [View model action]
      -- ^ Content pinned to the bottom of the group
    , inputGroupClasses :: [MisoString]
    , inputGroupAttrs :: [Attribute action]
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor
  defaultInputGroupProps :: InputGroupProps model action
  defaultInputGroupProps
    = InputGroupProps
    { inputGroupHeader = []
    , inputGroupFooter = []
    , inputGroupClasses = []
    , inputGroupAttrs = []
    }
  """
-----------------------------------------------------------------------------