nene-lang-ui 0.1.1 → 0.1.2

package/README.md

@@ -1,6 +1,6 @@
 # nene-lang-ui
 
-[Nene](https://github.com/kimuracoki/nene) の公式 UI 部品集。ボタン・入力欄・ダイアログなど、アプリを作るのに必要な部品がそろっている。ライトとダークの両方に対応し、色は CSS 変数で変えられる。
+[Nene](https://github.com/kimuracoki/nene) の公式 UI 部品集。ボタン・入力欄・ダイアログ・メニューなど 20 の部品がそろっている。ライトとダークの両方に対応し、色は CSS 変数で変えられる。
 
 `nene new` で作ったプロジェクトには、はじめから入っている。あとから入れるときは:
 
@@ -39,10 +39,15 @@ import Ui.Theme (Tone(..))
 | `Ui.Spinner` | `<Spinner />` | `size`、`label` |
 | `Ui.Avatar` | `<Avatar />` | `name`（頭文字を出す）、`src`、`size` |
 | `Ui.Badge` | `<Badge>…</Badge>` | `count`（0 なら出さない）、`max`、`tone` |
+| `Ui.Menu` | `<Menu />` | `id`、`label`、`items`（`Item { label, onClick, icon, tone }` のリスト）、`variant` |
+| `Ui.Popover` | `<Popover>…</Popover>` | `id`、`label`、`variant`。中身は自由 |
+| `Ui.Accordion` | `<Accordion>…</Accordion>` | `title`、`open`（最初から開くか）、`group`（同じ group は 1 つだけ開く） |
+| `Ui.Tooltip` | `<Tooltip>…</Tooltip>` | `text` |
 
 - 色の種類 `tone` は、どの部品でも `Ui.Theme` の `Primary` `Neutral` `Success` `Warning` `Danger`。
 - 大きさ `size` は、レイアウトタグと同じ `S` `M` `L`。
-- 開いているか・選んでいるかなどの状態は、ほかの値と同じく model に持つ。
+- アプリが知る必要のある状態（入力した値、選んだタブ、Dialog を開いているか）は model に持つ。
+- Menu・Popover・Accordion・Tooltip の開け閉めはブラウザが受け持つので、model に何も足さなくてよい。Menu と Popover の `id` は、ページの中で重ならない名前にする。
 
 ## 色と形を変える
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nene-lang-ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Nene の公式 UI 部品集。ボタン・入力欄・ダイアログなど",
   "type": "module",
   "nene": {
@@ -11,7 +11,7 @@
     "README.md"
   ],
   "peerDependencies": {
-    "nene-lang": "^0.1.1"
+    "nene-lang": "^0.1.2"
   },
   "publishConfig": {
     "access": "public"

package/src/Ui/Accordion.nn

@@ -0,0 +1,43 @@
+-- 見出しを押すと開け閉めできる枠。開け閉めはブラウザが受け持つので、model に何も足さなくてよい
+--
+--   <Accordion title="よくある質問">…</Accordion>
+--   <Accordion title="支払い" group="faq">…</Accordion>   -- 同じ group のものは、1 つだけが開く
+module Ui.Accordion (AccordionProps, accordion) where
+
+import qualified Ui.Icon as Icon
+
+
+type AccordionProps =
+  { title :: String
+  , open  :: Bool   = False    -- 最初から開いておくか
+  , group :: String = ""
+  }
+
+
+accordion :: AccordionProps -> [Html msg] -> Html msg
+accordion props children =
+  <details class={css.accordion} open={props.open} name={props.group}>
+    <summary class={css.summary}>
+      <Row gap={S} align={Center}>
+        <span class={css.title}>{props.title}</span>
+        <Spacer />
+        <span class={css.chevron}><Icon name={Icon.chevronDown} /></span>
+      </Row>
+    </summary>
+    <div class={css.body}>{children}</div>
+  </details>
+
+
+style
+  .accordion { border-bottom: 1px solid var(--border); }
+  .summary {
+    padding: 12px 4px;
+    list-style: none;
+    cursor: pointer;
+  }
+  .summary::-webkit-details-marker { display: none; }
+  .summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 4px; }
+  .title { font-weight: 600; }
+  .chevron { display: inline-flex; color: var(--muted); transition: transform .2s; }
+  .accordion[open] .chevron { transform: rotate(180deg); }
+  .body { padding: 0 4px 16px; color: var(--muted); }

package/src/Ui/Menu.nn

@@ -0,0 +1,122 @@
+-- ボタンを押すと開くメニュー。開け閉めはブラウザが受け持つので、model に何も足さなくてよい
+-- （外を押すか Esc で閉じ、項目を押すとメッセージが届いて閉じる）
+--
+--   <Menu id="sort" label="並び替え" items={sortItems} />
+--     where
+--       sortItems =
+--         [ Item { label = "新しい順", onClick = SortBy Newest }
+--         , Item { label = "削除", onClick = Remove, icon = Just Icon.delete, tone = Danger }
+--         ]
+--
+-- id は、ページの中でほかと重ならない名前にする
+module Ui.Menu (MenuProps, Item, menu) where
+
+import Ui.Button (Variant(..))
+import qualified Ui.Icon as Icon
+import Ui.Theme (Tone(..), toneVars)
+
+
+type Item msg =
+  { label   :: String
+  , onClick :: msg
+  , icon    :: Maybe Icon.Icon = Nothing
+  , tone    :: Tone            = Neutral
+  }
+
+type MenuProps msg =
+  { id      :: String
+  , label   :: String
+  , items   :: [Item msg]
+  , variant :: Variant = Outlined
+  }
+
+
+menu :: MenuProps msg -> Html msg
+menu props =
+  <div class={css.menu} vars={anchor}>
+    <button class={trigger} type="button" popovertarget={props.id} aria-haspopup="menu">
+      <Row gap={S} align={Center}>
+        <span>{props.label}</span>
+        <Icon name={Icon.chevronDown} />
+      </Row>
+    </button>
+    <div class={css.list} id={props.id} popover role="menu">
+      <Column>{map entry props.items}</Column>
+    </div>
+  </div>
+  where
+    anchor = { anchor = "--menu-" ++ props.id }
+    trigger = classes [css.trigger, variantClass props.variant]
+
+    -- 項目を押すと、メッセージが届き、メニューが閉じる
+    entry item =
+      <button class={css.item} vars={colors} type="button" role="menuitem" popovertarget={props.id} popovertargetaction="hide" onClick={item.onClick}>
+        <Row gap={S} align={Center}>
+          <Mark icon={item.icon} />
+          <span>{item.label}</span>
+        </Row>
+      </button>
+      where
+        colors = toneVars item.tone
+
+
+mark :: { icon :: Maybe Icon.Icon } -> Html msg
+mark { icon = Just i }  = <Icon name={i} />
+mark { icon = Nothing } = <></>
+
+
+variantClass :: Variant -> Class
+variantClass Filled   = css.filled
+variantClass Outlined = css.outlined
+variantClass Plain    = css.plain
+
+
+style
+  .menu { display: inline-block; anchor-name: var(--anchor); }
+  .trigger {
+    padding: 8px 12px;
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    font-weight: 600;
+    line-height: 1.2;
+  }
+  .filled { background: var(--primary); color: var(--on-tone); }
+  .outlined { border-color: var(--border); background: var(--surface); }
+  .plain { background: none; }
+  .outlined:hover, .plain:hover { background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
+  .trigger:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); }
+
+  .list {
+    min-width: 180px;
+    margin: 0;
+    padding: 4px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--surface);
+    color: var(--text);
+    box-shadow: 0 12px 32px rgb(0 0 0 / .14);
+  }
+  /* ボタンのすぐ下に出す。この機能のないブラウザでは、画面の中央に出る */
+  @supports (anchor-name: --a) {
+    .list {
+      position-anchor: var(--anchor);
+      inset: auto;
+      top: anchor(bottom);
+      left: anchor(left);
+      margin-top: 4px;
+      position-try-fallbacks: flip-block, flip-inline;
+    }
+  }
+  .item {
+    width: 100%;
+    padding: 8px 10px;
+    border: none;
+    border-radius: calc(var(--radius) - 4px);
+    background: none;
+    color: var(--tone);
+    text-align: left;
+  }
+  .item:hover, .item:focus-visible {
+    outline: none;
+    background: color-mix(in srgb, var(--tone) 10%, transparent);
+  }

package/src/Ui/Popover.nn

@@ -0,0 +1,72 @@
+-- ボタンを押すと開く、自由な中身の吹き出し。外を押すか Esc で閉じる。model に何も足さなくてよい
+--
+--   <Popover id="profile" label="プロフィール">
+--     <Column gap={S}>…</Column>
+--   </Popover>
+--
+-- id は、ページの中でほかと重ならない名前にする
+module Ui.Popover (PopoverProps, popover) where
+
+import Ui.Button (Variant(..))
+
+
+type PopoverProps =
+  { id      :: String
+  , label   :: String
+  , variant :: Variant = Outlined
+  }
+
+
+popover :: PopoverProps -> [Html msg] -> Html msg
+popover props children =
+  <div class={css.popover} vars={anchor}>
+    <button class={trigger} type="button" popovertarget={props.id}>{props.label}</button>
+    <div class={css.panel} id={props.id} popover>{children}</div>
+  </div>
+  where
+    anchor = { anchor = "--popover-" ++ props.id }
+    trigger = classes [css.trigger, variantClass props.variant]
+
+
+variantClass :: Variant -> Class
+variantClass Filled   = css.filled
+variantClass Outlined = css.outlined
+variantClass Plain    = css.plain
+
+
+style
+  .popover { display: inline-block; anchor-name: var(--anchor); }
+  .trigger {
+    padding: 8px 12px;
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    font-weight: 600;
+    line-height: 1.2;
+  }
+  .filled { background: var(--primary); color: var(--on-tone); }
+  .outlined { border-color: var(--border); background: var(--surface); }
+  .plain { background: none; }
+  .outlined:hover, .plain:hover { background: color-mix(in srgb, var(--text) 6%, var(--surface)); }
+  .trigger:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); }
+  .panel {
+    min-width: 220px;
+    max-width: min(360px, calc(100vw - 32px));
+    margin: 0;
+    padding: 16px;
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) + 2px);
+    background: var(--surface);
+    color: var(--text);
+    box-shadow: 0 12px 32px rgb(0 0 0 / .14);
+  }
+  /* ボタンのすぐ下に出す。この機能のないブラウザでは、画面の中央に出る */
+  @supports (anchor-name: --a) {
+    .panel {
+      position-anchor: var(--anchor);
+      inset: auto;
+      top: anchor(bottom);
+      left: anchor(left);
+      margin-top: 6px;
+      position-try-fallbacks: flip-block, flip-inline;
+    }
+  }

package/src/Ui/Tooltip.nn

@@ -0,0 +1,45 @@
+-- 子要素にマウスを載せるか、キーボードで選んだときに出る説明
+--
+--   <Tooltip text="保存（⌘S）">
+--     <IconButton icon={Icon.check} label="保存" onClick={Save} />
+--   </Tooltip>
+module Ui.Tooltip (TooltipProps, tooltip) where
+
+
+type TooltipProps =
+  { text :: String
+  }
+
+
+tooltip :: TooltipProps -> [Html msg] -> Html msg
+tooltip props children =
+  <span class={css.anchor}>
+    {children}
+    <span class={css.tip} role="tooltip">{props.text}</span>
+  </span>
+
+
+style
+  .anchor { position: relative; display: inline-flex; }
+  .tip {
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 50%;
+    z-index: 50;
+    padding: 4px 8px;
+    border-radius: 6px;
+    background: var(--text);
+    color: var(--surface);
+    font-size: .75rem;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transform: translate(-50%, 4px);
+    transition: opacity .12s, transform .12s;
+  }
+  .anchor:hover > .tip,
+  .anchor:focus-within > .tip {
+    opacity: 1;
+    transform: translate(-50%, 0);
+    transition-delay: .3s;
+  }