-----------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings  #-}
{-# LANGUAGE RecordWildCards   #-}
-----------------------------------------------------------------------------
module Miso.UI.Tooltip
  ( -- ** Props
    TooltipProps (..)
  , defaultTooltipProps
    -- ** Views
  , tooltip_
  , tooltipAttrs_
    -- ** Samples
  , tooltipSample
  , tooltipCodeSample
  , tooltipPropsApi
  ) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
-----------------------------------------------------------------------------
import           Miso.UI.Button
import           Miso.UI.Types
-----------------------------------------------------------------------------
-- | Props for 'tooltip_'
data TooltipProps action
  = TooltipProps
  { forall action. TooltipProps action -> MisoString
tooltipText :: MisoString
    -- ^ Tooltip content (@data-tooltip@)
  , forall action. TooltipProps action -> Side
tooltipSide :: Side
    -- ^ Placement (@data-side@); 'TopSide' by default
  , forall action. TooltipProps action -> ButtonProps action
tooltipButton :: ButtonProps action
    -- ^ Props for the trigger button rendered by 'tooltip_'
  }
-----------------------------------------------------------------------------
-- | Smart constructor: tooltip on top of an outline button
defaultTooltipProps :: TooltipProps action
defaultTooltipProps :: forall action. TooltipProps action
defaultTooltipProps
  = TooltipProps
  { tooltipText :: MisoString
tooltipText = MisoString
""
  , tooltipSide :: Side
tooltipSide = Side
TopSide
  , tooltipButton :: ButtonProps action
tooltipButton = ButtonProps action
forall action. ButtonProps action
defaultButtonProps { buttonVariant = Outline }
  }
-----------------------------------------------------------------------------
-- | The basecoat tooltip attributes, for attaching to any element
tooltipAttrs_ :: MisoString -> Side -> [Attribute action]
tooltipAttrs_ :: forall action. MisoString -> Side -> [Attribute action]
tooltipAttrs_ MisoString
tip Side
side = [[Attribute action]] -> [Attribute action]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
  [ [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.data_ MisoString
"tooltip" MisoString
tip ]
  , [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.data_ MisoString
"side" (Side -> MisoString
sideText Side
side) | Side
side Side -> Side -> Bool
forall a. Eq a => a -> a -> Bool
/= Side
TopSide ]
  ]
-----------------------------------------------------------------------------
-- | <https://basecoatui.com/components/tooltip/ Tooltip>: button with a tooltip.
-- For tooltips on arbitrary elements use 'tooltipAttrs_'.
tooltip_
  :: TooltipProps action
  -> [View model action]
  -> View model action
tooltip_ :: forall action model.
TooltipProps action -> [View model action] -> View model action
tooltip_ TooltipProps {MisoString
Side
ButtonProps action
tooltipText :: forall action. TooltipProps action -> MisoString
tooltipSide :: forall action. TooltipProps action -> Side
tooltipButton :: forall action. TooltipProps action -> ButtonProps action
tooltipText :: MisoString
tooltipSide :: Side
tooltipButton :: ButtonProps action
..} [View model action]
kids =
  ButtonProps action -> [View model action] -> View model action
forall action model.
ButtonProps action -> [View model action] -> View model action
button_ ButtonProps action
tooltipButton
    { buttonAttrs = tooltipAttrs_ tooltipText tooltipSide ++ buttonAttrs tooltipButton
    } [View model action]
kids
-----------------------------------------------------------------------------
tooltipSample :: View model action
tooltipSample :: forall model action. View model action
tooltipSample =
  [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-wrap items-center gap-4" ]
  [ TooltipProps action -> [View model action] -> View model action
forall action model.
TooltipProps action -> [View model action] -> View model action
tooltip_ TooltipProps action
forall action. TooltipProps action
defaultTooltipProps { tooltipText = "Top tooltip" } [ View model action
"Top" ]
  , TooltipProps action -> [View model action] -> View model action
forall action model.
TooltipProps action -> [View model action] -> View model action
tooltip_ TooltipProps action
forall action. TooltipProps action
defaultTooltipProps { tooltipText = "Right tooltip", tooltipSide = RightSide } [ View model action
"Right" ]
  , TooltipProps action -> [View model action] -> View model action
forall action model.
TooltipProps action -> [View model action] -> View model action
tooltip_ TooltipProps action
forall action. TooltipProps action
defaultTooltipProps { tooltipText = "Bottom tooltip", tooltipSide = BottomSide } [ View model action
"Bottom" ]
  , TooltipProps action -> [View model action] -> View model action
forall action model.
TooltipProps action -> [View model action] -> View model action
tooltip_ TooltipProps action
forall action. TooltipProps action
defaultTooltipProps { tooltipText = "Left tooltip", tooltipSide = LeftSide } [ View model action
"Left" ]
  ]
-----------------------------------------------------------------------------
tooltipCodeSample :: View model action
tooltipCodeSample :: forall model action. View model action
tooltipCodeSample =
  View model action
"""
  -----------------------------------------------------------------------------
  module MyTooltip (tooltipSample) where
  -----------------------------------------------------------------------------
  import           Miso
  import qualified Miso.Html.Element as H
  import qualified Miso.Html.Property as P
  import           Miso.UI.Button
  import           Miso.UI.Types
  import           Miso.UI.Tooltip
  -----------------------------------------------------------------------------
  tooltipSample :: View model action
  tooltipSample =
    H.div_
    [ P.class_ "flex flex-wrap items-center gap-4" ]
    [ tooltip_ defaultTooltipProps { tooltipText = "Top tooltip" } [ "Top" ]
    , tooltip_ defaultTooltipProps { tooltipText = "Right tooltip", tooltipSide = RightSide } [ "Right" ]
    , tooltip_ defaultTooltipProps { tooltipText = "Bottom tooltip", tooltipSide = BottomSide } [ "Bottom" ]
    , tooltip_ defaultTooltipProps { tooltipText = "Left tooltip", tooltipSide = LeftSide } [ "Left" ]
    ]
  """
-----------------------------------------------------------------------------
tooltipPropsApi :: View model action
tooltipPropsApi :: forall model action. View model action
tooltipPropsApi =
  View model action
"""
  -- | Props for 'tooltip_'
  data TooltipProps action
    = TooltipProps
    { tooltipText :: MisoString
      -- ^ Tooltip content (@data-tooltip@)
    , tooltipSide :: Side
      -- ^ Placement (@data-side@); 'TopSide' by default
    , tooltipButton :: ButtonProps action
      -- ^ Props for the trigger button rendered by 'tooltip_'
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor: tooltip on top of an outline button
  defaultTooltipProps :: TooltipProps action
  defaultTooltipProps
    = TooltipProps
    { tooltipText = ""
    , tooltipSide = TopSide
    , tooltipButton = defaultButtonProps { buttonVariant = Outline }
    }
  """
-----------------------------------------------------------------------------