-----------------------------------------------------------------------------
{-# LANGUAGE GeneralizedNewtypeDeriving #-}
{-# LANGUAGE ExistentialQuantification  #-}
{-# LANGUAGE DerivingStrategies         #-}
{-# LANGUAGE OverloadedStrings          #-}
{-# LANGUAGE TypeApplications           #-}
{-# LANGUAGE RecordWildCards            #-}
{-# LANGUAGE LambdaCase                 #-}
{-# LANGUAGE MultilineStrings           #-}
-----------------------------------------------------------------------------
module Miso.UI.CommandMenu
  ( -- ** Component
    commandMenuComponent
    -- ** Samples
  , commandMenuCodeSample
  ) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.CSS as CSS
import           Miso.Html hiding (data_)
import           Miso.Html.Property hiding (form_, label_)
import           Miso.Svg hiding (view_)
import           Miso.Svg.Property hiding (path_)
import           Miso.Lens
-----------------------------------------------------------------------------
import           Control.Monad
-----------------------------------------------------------------------------
data Action
  = ShowDialog MisoString DOMRef
  | CloseDialog 
  | NoOp
-----------------------------------------------------------------------------
commandMenuComponent :: Component parent props MisoString Action
commandMenuComponent :: forall parent props. Component parent props MisoString Action
commandMenuComponent = MisoString
-> (Action -> Effect parent props MisoString Action)
-> (props -> MisoString -> View MisoString Action)
-> Component parent props MisoString Action
forall model action parent props.
model
-> (action -> Effect parent props model action)
-> (props -> model -> View model action)
-> Component parent props model action
component MisoString
"" Action -> Effect parent props MisoString Action
forall {parent} {props} {action}.
Action
-> RWST
     (ComponentInfo parent props)
     [Schedule action]
     MisoString
     Identity
     ()
update_ ((props -> MisoString -> View MisoString Action)
 -> Component parent props MisoString Action)
-> (props -> MisoString -> View MisoString Action)
-> Component parent props MisoString Action
forall a b. (a -> b) -> a -> b
$ \props
_ MisoString
_ -> View MisoString Action
forall m. View m Action
view_
  where
    update_ :: Action
-> RWST
     (ComponentInfo parent props)
     [Schedule action]
     MisoString
     Identity
     ()
update_ Action
NoOp = ()
-> RWST
     (ComponentInfo parent props)
     [Schedule action]
     MisoString
     Identity
     ()
forall a.
a
-> RWST
     (ComponentInfo parent props)
     [Schedule action]
     MisoString
     Identity
     a
forall (f :: * -> *) a. Applicative f => a -> f a
pure ()
    update_ (ShowDialog MisoString
sel JSVal
domRef) = do
      Lens MisoString MisoString
forall a. Lens a a
this Lens MisoString MisoString
-> MisoString
-> RWST
     (ComponentInfo parent props)
     [Schedule action]
     MisoString
     Identity
     ()
forall record (m :: * -> *) field.
MonadState record m =>
Lens record field -> field -> m ()
.= MisoString
sel
      IO ()
-> RWST
     (ComponentInfo parent props)
     [Schedule action]
     MisoString
     Identity
     ()
forall parent props model action.
IO () -> Effect parent props model action
io_ (IO ()
 -> RWST
      (ComponentInfo parent props)
      [Schedule action]
      MisoString
      Identity
      ())
-> IO ()
-> RWST
     (ComponentInfo parent props)
     [Schedule action]
     MisoString
     Identity
     ()
forall a b. (a -> b) -> a -> b
$ do
        dialogRef <- JSVal -> IO JSVal
nextSibling JSVal
domRef
        void $ dialogRef # ("showModal" :: MisoString) $ ()

    update_ Action
CloseDialog = do
      sel <- Lens MisoString MisoString
-> RWST
     (ComponentInfo parent props)
     [Schedule action]
     MisoString
     Identity
     MisoString
forall record (m :: * -> *) field.
MonadState record m =>
Lens record field -> m field
use Lens MisoString MisoString
forall a. Lens a a
this
      io_ $ do
        dialog <- jsg "document"
          # ("getElementById" :: MisoString)
          $ [sel :: MisoString]
        void $ dialog # ("close" :: MisoString) $ ()
-----------------------------------------------------------------------------
view_ :: View m Action
view_ :: forall m. View m Action
view_ = [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
section_
    [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"command-menu"
    , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"w-full rounded-lg scroll-mt-14"
    ]
    [ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
button_
      [ (JSVal -> Action) -> Attribute Action
forall action. (JSVal -> action) -> Attribute action
onClickWith (MisoString -> JSVal -> Action
ShowDialog MisoString
"demo-command-dialog")
      , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"btn-outline"
      , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
type_ MisoString
"button"
      ]
      [ View m Action
"Open Command Menu"
      , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
kbd_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"kbd"] [View m Action
"⌘J"]
      ]
    , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
dialog_
      [ Action -> Attribute Action
forall action. action -> Attribute action
onClick Action
CloseDialog
      , MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_ MisoString
"label" MisoString
"Command Menu"
      , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"command-dialog"
      , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"demo-command-dialog"
      ]
      [ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
        [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"command"]
        [ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
header_
            []
            [ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
svg_
                [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"lucide lucide-search-icon lucide-search"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinejoin_ MisoString
"round"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinecap_ MisoString
"round"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeWidth_ MisoString
"2"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
stroke_ MisoString
"currentColor"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
fill_ MisoString
"none"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
viewBox_ MisoString
"0 0 24 24"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
height_ MisoString
"24"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
width_ MisoString
"24"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
xmlns_ MisoString
"http://www.w3.org/2000/svg"
                ]
                [ [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
circle_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
r_ MisoString
"8", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
cy_ MisoString
"11", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
cx_ MisoString
"11"]
                , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"m21 21-4.3-4.3"]
                ]
            , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
input_
                [ MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_ MisoString
"controls" MisoString
"demo-command-dialog-menu"
                , MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_ MisoString
"expanded" MisoString
"true"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
role_ MisoString
"combobox"
                , MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_ MisoString
"autocomplete" MisoString
"list"
                , Options -> Action -> Attribute Action
forall action. Options -> action -> Attribute action
onClickWithOptions Options
stopPropagation Action
NoOp
                , Bool -> Attribute Action
forall action. Bool -> Attribute action
spellcheck_ Bool
False
                , Bool -> Attribute Action
forall action. Bool -> Attribute action
autocorrect_ Bool
False
                , Bool -> Attribute Action
forall action. Bool -> Attribute action
autocomplete_ Bool
False
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
placeholder_ MisoString
"Type a command or search..."
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"demo-command-dialog-input"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
type_ MisoString
"text"
                ]
            ]
        , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
            [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"scrollbar"
            , MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
data_ MisoString
"empty" MisoString
"No results found."
            , MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_ MisoString
"orientation" MisoString
"vertical"
            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"demo-command-dialog-menu"
            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
role_ MisoString
"menu"
            ]
            [ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
                [ MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_ MisoString
"labelledby" MisoString
"cmd-suggestions"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
role_ MisoString
"group"
                ]
                [ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
span_
                    [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"cmd-suggestions", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
role_ MisoString
"heading"]
                    [View m Action
"Suggestions"]
                , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
                    [ -- onclick_ "console.log('Open calendar')"
                      MisoString -> Attribute Action
forall action. MisoString -> Attribute action
role_ MisoString
"menuitem"
                    ]
                    [ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
svg_
                        [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinejoin_ MisoString
"round"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinecap_ MisoString
"round"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeWidth_ MisoString
"2"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
stroke_ MisoString
"currentColor"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
fill_ MisoString
"none"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
viewBox_ MisoString
"0 0 24 24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
height_ MisoString
"24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
width_ MisoString
"24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
xmlns_ MisoString
"http://www.w3.org/2000/svg"
                        ]
                        [ [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M8 2v4"]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M16 2v4"]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
rect_
                            [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
rx_ MisoString
"2"
                            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
y_ MisoString
"4"
                            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
x_ MisoString
"3"
                            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
height_ MisoString
"18"
                            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
width_ MisoString
"18"
                            ]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M3 10h18"]
                        ]
                    , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
span_ [] [View m Action
"Calendar"]
                    ]
                , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
                    [ -- onclick_ "console.log('Search emoji')"
                      MisoString -> Attribute Action
forall action. MisoString -> Attribute action
role_ MisoString
"menuitem"
                    ]
                    [ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
svg_
                        [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinejoin_ MisoString
"round"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinecap_ MisoString
"round"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeWidth_ MisoString
"2"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
stroke_ MisoString
"currentColor"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
fill_ MisoString
"none"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
viewBox_ MisoString
"0 0 24 24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
height_ MisoString
"24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
width_ MisoString
"24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
xmlns_ MisoString
"http://www.w3.org/2000/svg"
                        ]
                        [ [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
circle_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
r_ MisoString
"10", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
cy_ MisoString
"12", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
cx_ MisoString
"12"]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M8 14s1.5 2 4 2 4-2 4-2"]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
line_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
y2_ MisoString
"9", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
y1_ MisoString
"9", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
x2_ MisoString
"9.01", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
x1_ MisoString
"9"]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
line_
                            [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
y2_ MisoString
"9", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
y1_ MisoString
"9", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
x2_ MisoString
"15.01", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
x1_ MisoString
"15"]
                        ]
                    , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
span_ [] [View m Action
"Search Emoji"]
                    ]
                , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
                    [MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_ MisoString
"disabled" MisoString
"true", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
role_ MisoString
"menuitem"]
                    [ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
svg_
                        [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinejoin_ MisoString
"round"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinecap_ MisoString
"round"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeWidth_ MisoString
"2"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
stroke_ MisoString
"currentColor"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
fill_ MisoString
"none"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
viewBox_ MisoString
"0 0 24 24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
height_ MisoString
"24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
width_ MisoString
"24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
xmlns_ MisoString
"http://www.w3.org/2000/svg"
                        ]
                        [ [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
rect_
                            [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
rx_ MisoString
"2"
                            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
y_ MisoString
"2"
                            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
x_ MisoString
"4"
                            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
height_ MisoString
"20"
                            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
width_ MisoString
"16"
                            ]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
line_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
y2_ MisoString
"6", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
y1_ MisoString
"6", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
x2_ MisoString
"16", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
x1_ MisoString
"8"]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
line_
                            [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
y2_ MisoString
"18", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
y1_ MisoString
"14", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
x2_ MisoString
"16", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
x1_ MisoString
"16"]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M16 10h.01"]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M12 10h.01"]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M8 10h.01"]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M12 14h.01"]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M8 14h.01"]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M12 18h.01"]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M8 18h.01"]
                        ]
                    , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
span_ [] [View m Action
"Calculator"]
                    ]
                ]
            , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
hr_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
role_ MisoString
"separator"]
            , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
                [ MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_ MisoString
"labelledby" MisoString
"cmd-settings"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
role_ MisoString
"group"
                ]
                [ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
span_
                    [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"cmd-settings", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
role_ MisoString
"heading"]
                    [View m Action
"Settings"]
                , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
                    [ MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
data_ MisoString
"filter" MisoString
"Profile"
                    -- , onclick_ "console.log('Open profile')"
                    , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
role_ MisoString
"menuitem"
                    ]
                    [ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
svg_
                        [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinejoin_ MisoString
"round"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinecap_ MisoString
"round"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeWidth_ MisoString
"2"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
stroke_ MisoString
"currentColor"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
fill_ MisoString
"none"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
viewBox_ MisoString
"0 0 24 24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
height_ MisoString
"24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
width_ MisoString
"24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
xmlns_ MisoString
"http://www.w3.org/2000/svg"
                        ]
                        [ [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_
                            [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
circle_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
r_ MisoString
"4", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
cy_ MisoString
"7", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
cx_ MisoString
"12"]
                        ]
                    , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
span_ [] [View m Action
"Profile"]
                    , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
kbd_
                        [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_
                            MisoString
"ml-auto text-muted-foreground bg-transparent tracking-widest"
                        ]
                        [View m Action
"⌘P"]
                    ]
                , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
                    [ MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
data_ MisoString
"filter" MisoString
"Billing"
                    -- , onclick_ "console.log('Open billing')"
                    , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
role_ MisoString
"menuitem"
                    ]
                    [ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
svg_
                        [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinejoin_ MisoString
"round"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinecap_ MisoString
"round"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeWidth_ MisoString
"2"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
stroke_ MisoString
"currentColor"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
fill_ MisoString
"none"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
viewBox_ MisoString
"0 0 24 24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
height_ MisoString
"24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
width_ MisoString
"24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
xmlns_ MisoString
"http://www.w3.org/2000/svg"
                        ]
                        [ [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
rect_
                            [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
rx_ MisoString
"2"
                            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
y_ MisoString
"5"
                            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
x_ MisoString
"2"
                            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
height_ MisoString
"14"
                            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
width_ MisoString
"20"
                            ]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
line_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
y2_ MisoString
"10", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
y1_ MisoString
"10", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
x2_ MisoString
"22", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
x1_ MisoString
"2"]
                        ]
                    , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
span_ [] [View m Action
"Billing"]
                    , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
kbd_
                        [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_
                            MisoString
"ml-auto text-muted-foreground bg-transparent tracking-widest"
                        ]
                        [View m Action
"⌘B"]
                    ]
                , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
                    [ MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
data_ MisoString
"filter" MisoString
"Settings"
                    -- , onclick_ "console.log('Open settings')"
                    , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
role_ MisoString
"menuitem"
                    ]
                    [ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
svg_
                        [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinejoin_ MisoString
"round"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinecap_ MisoString
"round"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeWidth_ MisoString
"2"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
stroke_ MisoString
"currentColor"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
fill_ MisoString
"none"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
viewBox_ MisoString
"0 0 24 24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
height_ MisoString
"24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
width_ MisoString
"24"
                        , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
xmlns_ MisoString
"http://www.w3.org/2000/svg"
                        ]
                        [ [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_
                            [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_
                                MisoString
"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
                            ]
                        , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
circle_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
r_ MisoString
"3", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
cy_ MisoString
"12", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
cx_ MisoString
"12"]
                        ]
                    , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
span_ [] [View m Action
"Settings"]
                    , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
kbd_
                        [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_
                            MisoString
"ml-auto text-muted-foreground bg-transparent tracking-widest"
                        ]
                        [View m Action
"⌘S"]
                    ]
                ]
            ]
        , [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
button_
            [ Action -> Attribute Action
forall action. action -> Attribute action
onClick Action
CloseDialog
            , MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_ MisoString
"label" MisoString
"Close dialog"
            , [Style] -> Attribute Action
forall action. [Style] -> Attribute action
CSS.style_ [ MisoString -> Style
CSS.cursor MisoString
"pointer" ]
            , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
type_ MisoString
"button"
            ]
            [ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
svg_
                [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"lucide lucide-x-icon lucide-x"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinejoin_ MisoString
"round"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinecap_ MisoString
"round"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeWidth_ MisoString
"2"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
stroke_ MisoString
"currentColor"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
fill_ MisoString
"none"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
viewBox_ MisoString
"0 0 24 24"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
height_ MisoString
"24"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
width_ MisoString
"24"
                , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
xmlns_ MisoString
"http://www.w3.org/2000/svg"
                ]
                [ [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M18 6 6 18"]
                , [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"m6 6 12 12"]
                ]
            ]
        ]
    ]
 ]

-----------------------------------------------------------------------------
commandMenuCodeSample :: View model action
commandMenuCodeSample :: forall model action. View model action
commandMenuCodeSample =
  View model action
"""
  -----------------------------------------------------------------------------
  module MyCommandMenu (myView) where
  -----------------------------------------------------------------------------
  import           Miso
  -----------------------------------------------------------------------------
  import           Miso.UI.CommandMenu
  -----------------------------------------------------------------------------
  -- Mounts the stateful command menu component (Ctrl-K style palette)
  myView :: View model action
  myView = mount_ commandMenuComponent
  """
-----------------------------------------------------------------------------