Skip to content

Add command-menu example from 0.3.6. #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+263 −2
Open

Add command-menu example from 0.3.6. #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ all: update build optim
update:
wasm32-wasi-cabal update

js: update-js build-js

build:
wasm32-wasi-cabal build
rm -rf public
Expand All @@ -24,3 +26,13 @@ serve:
clean:
rm -rf dist-newstyle public

update-js:
cabal update --with-ghc=javascript-unknown-ghcjs-ghc --with-hc-pkg=javascript-unknown-ghcjs-ghc-pkg

build-js:
cabal build --with-ghc=javascript-unknown-ghcjs-ghc --with-hc-pkg=javascript-unknown-ghcjs-ghc-pkg
cp -v ./dist-newstyle/build/javascript-ghcjs/ghc-9.12.2/*/x/app/build/app/app.jsexe/all.js .
rm -rf public
cp -rv static public
bunx swc ./all.js -o public/index.js

1 change: 1 addition & 0 deletions app.cabal
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ library
Miso.UI.Card
Miso.UI.Checkbox
Miso.UI.Combobox
Miso.UI.CommandMenu
Miso.UI.Dialog
Miso.UI.DropDownMenu
Miso.UI.Form
Expand Down
3 changes: 2 additions & 1 deletion app/Main.hs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ main = run $ withJS $ startComponent app
[ Href "https://basecoatui.com/assets/styles.css"
]
, scripts =
[ Src "https://cdn.jsdelivr.net/npm/basecoat-css@0.3.5/dist/js/basecoat.min.js"
[ Src "https://cdn.jsdelivr.net/npm/basecoat-css@0.3.6/dist/js/basecoat.min.js"
, Script
"""
(() => {
Expand Down Expand Up @@ -499,6 +499,7 @@ asideView = aside_
, li_ [] [a_ [ P.href_ "#card"] ["Card"]]
, li_ [] [a_ [ P.href_ "#checkbox"] ["Checkbox"]]
, li_ [] [a_ [ P.href_ "#combobox"] ["Combobox"]]
, li_ [] [a_ [ P.href_ "#command-menu"] ["Command Menu"]]
, li_ [] [a_ [ P.href_ "#dialog"] ["Dialog"]]
, li_ [] [a_ [ P.href_ "#dropdown-menu"] ["Dropdown Menu"]]
, li_ [] [a_ [ P.href_ "#form"] ["Form"]]
Expand Down
7 changes: 7 additions & 0 deletions app/pages/KitchenSink.hs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import Miso.Svg.Property hiding (id_, height_, width_, path_)
-----------------------------------------------------------------------------
import Miso.UI.AlertDialog (alertDialogComponent)
import Miso.UI.Dialog (dialogComponent)
import Miso.UI.CommandMenu (commandMenu)
-----------------------------------------------------------------------------
import Types
-----------------------------------------------------------------------------
Expand Down Expand Up @@ -2325,6 +2326,12 @@ kitchenSinkPage = div_
]
]
]
, h1_
[ class_ "text-3xl font-semibold tracking-tight"
, id_ "command-menu"
]
["Command menu"]
, commandMenu
, h1_
[class_ "text-3xl font-semibold tracking-tight"]
["Dialog"]
Expand Down
240 changes: 240 additions & 0 deletions src/Miso/UI/CommandMenu.hs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,240 @@
{-# LANGUAGE OverloadedStrings #-}
module Miso.UI.CommandMenu where

import Miso
import Miso.Html hiding (data_)
import Miso.Html.Property
import Miso.Svg
import Miso.Svg.Property hiding (id_, height_, width_, path_)

commandMenu :: View m a
commandMenu = div_
[ aria_ "label" "Command menu"
, class_ "command rounded-lg border shadow-md"
, id_ "demo-command-standalone"
]
[ header_
[]
[ svg_
[ class_ "lucide lucide-search-icon lucide-search"
, strokeLinejoin_ "round"
, strokeLinecap_ "round"
, strokeWidth_ "2"
, stroke_ "currentColor"
, fill_ "none"
, viewBox_ "0 0 24 24"
, height_ "24"
, width_ "24"
, xmlns_ "http://www.w3.org/2000/svg"
]
[ circle_ [r_ "8", cy_ "11", cx_ "11"]
, path_ [d_ "m21 21-4.3-4.3"]
]
, input_
[ aria_ "controls" "demo-command-standalone-menu"
, aria_ "expanded" "true"
, role_ "combobox"
, aria_ "autocomplete" "list"
, spellcheck_ False
, autocorrect_ False
, autocomplete_ False
, placeholder_ "Type a command or search..."
, id_ "demo-command-standalone-input"
, type_ "text"
]
]
, div_
[ class_ "scrollbar"
, data_ "empty" "No results found."
, aria_ "orientation" "vertical"
, id_ "demo-command-standalone-menu"
, role_ "menu"
]
[ div_
[ aria_ "labelledby" "suggestions"
, role_ "group"
]
[ span_
[id_ "suggestions", role_ "heading"]
["Suggestions"]
, div_
[ role_ "menuitem"
]
[ svg_
[ strokeLinejoin_ "round"
, strokeLinecap_ "round"
, strokeWidth_ "2"
, stroke_ "currentColor"
, fill_ "none"
, viewBox_ "0 0 24 24"
, height_ "24"
, width_ "24"
, xmlns_ "http://www.w3.org/2000/svg"
]
[ path_ [d_ "M8 2v4"]
, path_ [d_ "M16 2v4"]
, rect_
[ rx_ "2"
, y_ "4"
, x_ "3"
, height_ "18"
, width_ "18"
]
, path_ [d_ "M3 10h18"]
]
, span_ [] ["Calendar"]
]
, div_
[ textProp "onclick" "console.log('Search emoji')"
, role_ "menuitem"
]
[ svg_
[ strokeLinejoin_ "round"
, strokeLinecap_ "round"
, strokeWidth_ "2"
, stroke_ "currentColor"
, fill_ "none"
, viewBox_ "0 0 24 24"
, height_ "24"
, width_ "24"
, xmlns_ "http://www.w3.org/2000/svg"
]
[ circle_ [r_ "10", cy_ "12", cx_ "12"]
, path_ [d_ "M8 14s1.5 2 4 2 4-2 4-2"]
, line_ [y2_ "9", y1_ "9", x2_ "9.01", x1_ "9"]
, line_
[y2_ "9", y1_ "9", x2_ "15.01", x1_ "15"]
]
, span_ [] ["Search Emoji"]
]
, div_
[aria_ "disabled" "true", role_ "menuitem"]
[ svg_
[ strokeLinejoin_ "round"
, strokeLinecap_ "round"
, strokeWidth_ "2"
, stroke_ "currentColor"
, fill_ "none"
, viewBox_ "0 0 24 24"
, height_ "24"
, width_ "24"
, xmlns_ "http://www.w3.org/2000/svg"
]
[ rect_
[ rx_ "2"
, y_ "2"
, x_ "4"
, height_ "20"
, width_ "16"
]
, line_ [y2_ "6", y1_ "6", x2_ "16", x1_ "8"]
, line_
[y2_ "18", y1_ "14", x2_ "16", x1_ "16"]
, path_ [d_ "M16 10h.01"]
, path_ [d_ "M12 10h.01"]
, path_ [d_ "M8 10h.01"]
, path_ [d_ "M12 14h.01"]
, path_ [d_ "M8 14h.01"]
, path_ [d_ "M12 18h.01"]
, path_ [d_ "M8 18h.01"]
]
, span_ [] ["Calculator"]
]
]
, hr_ [role_ "separator"]
, div_
[aria_ "labelledby" "settings", role_ "group"]
[ span_
[ id_ "settings"
, role_ "heading"
]
[ "Settings"
]
, div_
[ data_ "filter" "Profile"
, role_ "menuitem"
]
[ svg_
[ strokeLinejoin_ "round"
, strokeLinecap_ "round"
, strokeWidth_ "2"
, stroke_ "currentColor"
, fill_ "none"
, viewBox_ "0 0 24 24"
, height_ "24"
, width_ "24"
, xmlns_ "http://www.w3.org/2000/svg"
]
[ path_
[ d_ "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" ]
, circle_ [ r_ "4", cy_ "7", cx_ "12" ]
]
, span_ [] ["Profile"]
, kbd_
[ class_
"ml-auto text-muted-foreground bg-transparent tracking-widest"
]
["⌘P"]
]
, div_
[ data_ "filter" "Billing"
, role_ "menuitem"
]
[ svg_
[ strokeLinejoin_ "round"
, strokeLinecap_ "round"
, strokeWidth_ "2"
, stroke_ "currentColor"
, fill_ "none"
, viewBox_ "0 0 24 24"
, height_ "24"
, width_ "24"
, xmlns_ "http://www.w3.org/2000/svg"
]
[ rect_
[ rx_ "2"
, y_ "5"
, x_ "2"
, height_ "14"
, width_ "20"
]
, line_ [y2_ "10", y1_ "10", x2_ "22", x1_ "2"]
]
, span_ [] ["Billing"]
, kbd_
[ class_
"ml-auto text-muted-foreground bg-transparent tracking-widest"
]
["⌘B"]
]
, div_
[ data_ "filter" "Settings"
, role_ "menuitem"
]
[ svg_
[ strokeLinejoin_ "round"
, strokeLinecap_ "round"
, strokeWidth_ "2"
, stroke_ "currentColor"
, fill_ "none"
, viewBox_ "0 0 24 24"
, height_ "24"
, width_ "24"
, xmlns_ "http://www.w3.org/2000/svg"
]
[ path_
[ d_
"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"
]
, circle_ [r_ "3", cy_ "12", cx_ "12"]
]
, span_ [] ["Settings"]
, kbd_
[ class_
"ml-auto text-muted-foreground bg-transparent tracking-widest"
]
["⌘S"]
]
]
]
]
2 changes: 1 addition & 1 deletion static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> miso-ui </title>
<script defer src="https://cdn.jsdelivr.net/npm/basecoat-css@0.3.5/dist/js/all.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/basecoat-css@0.3.6/dist/js/all.min.js"></script>
<link href="https://basecoatui.com/assets/styles.css" rel="stylesheet" />
<meta http-equiv="Content-Language" content="en">
<meta name="description" content="A miso component library built on Tailwind, ShadCN and Basecoat CSS" />
Expand Down