@geckou/ui-vue 0.5.0 → 0.7.0

package/README.md

@@ -14,7 +14,20 @@ Vue 3 用の再利用可能な UI コンポーネント集。
 yarn add @geckou/ui-vue
 ```
 
-Vue 本体は同梱していません。プロジェクト側の Vue 3.0 以上を使います（`peerDependencies`）。
+Vue 本体は同梱していません。プロジェクト側の Vue 3.5 以上を使います（`peerDependencies`）。
+3.5 未満では `onScopeDispose(fn, true)` と `useId()` が無いため動きません。
+
+⚠️ **1 ページに複数の Vue アプリをマウントする場合は、アプリごとに
+`app.config.idPrefix` を変えてください。** DOM id と `RadioButtons` のグループ
+`name` は `useId()` で採番しており（SSR と client で一致させるため）、既定の
+prefix はどのアプリでも同じです。分けないと、別アプリのラジオグループが同じ
+`name` になって片方を選ぶともう片方の選択が外れます。`RadioButtons` に `name` を
+明示すれば個別に回避できます。
+
+```ts
+const app = createApp(App)
+app.config.idPrefix = 'checkout'
+```
 
 ## Usage
 
@@ -51,6 +64,16 @@ import { TextBox, StandardList } from '@geckou/ui-vue'
 
 `DatePicker` / `DateRangePicker` / `DateSelector`
 
+`DatePicker` / `DateSelector` の年月日欄の読み上げ名は、既定では `name` から作られます
+（`name="startedOn"` なら「startedOnの年」）。`CheckBox` と同じ `ariaLabel` / `ariaLabelledBy`
+を渡すと、そちらを土台に「の年」「の月」「の日」を繋げます。可視ラベルがあるなら
+`ariaLabelledBy` でその要素を指してください（WCAG 2.5.3 Label in Name）。
+
+```vue
+<DatePicker v-model="startedOn" name="startedOn" ariaLabel="開始日" />
+<DatePicker v-model="startedOn" name="startedOn" :ariaLabelledBy="labelId" />
+```
+
 `FormValidationManager` を渡すと、フォーム内の各入力の検証結果をまとめて追跡できます。
 
 ```vue
@@ -247,7 +270,7 @@ const articles = ref<any[]>([])
 | `modelValue`       | `string \| number`          | ✅       | -                  | テキストボックスの値                           |
 | `name`             | `string`                    | ✅       | -                  | `name`属性                                     |
 | `cssStyle`         | `InputBoxStyleForEachStatus`| ❌       | -                  | テキストボックスのスタイル                     |
-| `type`             | `string`                    | ❌       | `text`             | テキストボックスのタイプ                       |
+| `inputType`        | `string`                    | ❌       | `text`             | `input` の `type` 属性                         |
 | `isDisabled`       | `boolean`                   | ❌       | `false`            | テキストボックスの活性/非活性                  |
 | `isRequired`       | `boolean`                   | ❌       | `false`            | 必須項目かどうか                               |
 | `maxLength`        | `number`                    | ❌       | `30`               | 最大入力文字数                                 |
@@ -255,6 +278,57 @@ const articles = ref<any[]>([])
 | `validates`        | `Validates[]`               | ❌       | `[]`               | バリデーションの設定                           |
 
 
+## Design tokens
+
+**トークンの一覧はルートの [README](../../README.md#design-tokens) が正。**
+ここに挙げるのは、そのうちフォールバックを持つもの（未定義でも壊れない）だけ。
+
+⚠️ `--sp-*` / `--white` / `--gray` / `--radius-small` / `--icon-medium` などは
+**フォールバックを持たない**。未定義だと padding が消える等、普通に崩れるので、
+`:root` で定義すること。
+
+| トークン | 既定値 | 使う場所 |
+|---|---|---|
+| `--overlay-color` | `rgba(0, 8, 26, 0.5)` | ModalBox の背面 |
+| `--shadow-color` | `rgba(21, 20, 58, 0.12)` | ModalBox の drop-shadow |
+| `--z-index-overlay` | `90` | ModalBox / PopupBox の重なり |
+| `--z-index-nav` | `70` | ModalBox の閉じるボタン（+1 で重ねる） |
+| `--contents-max-width` | `1440px` | ModalBox の最大幅、PopupBox の左右位置 |
+| `--global-header-height` | `0px` | PopupBox の上端 |
+| `--mobile-lower-width` | `430px` | PopupBox の最大幅 |
+| `--small-icon-size` | `0.9375rem` | ArticleList のアイコン |
+| `--medium-icon-size` | `1.125rem` | アイコン全般（`mixin.scss` の既定） |
+
+定義例はデモの `demo/styles/base.scss` を参照。
+
+## 0.7.0 の変更
+
+- `DatePicker` / `DateSelector` が `ariaLabel` / `ariaLabelledBy` を受ける
+  （未指定なら従来どおり `name` から読み上げ名を作る）
+- `CheckBox` / `ToggleButton` が `<button>` の中に `<input>` を置かなくなった。
+  状態は `<button>` の `data-checked` / `disabled` で表し、送信用の入力は
+  チェック時だけ `<input type="hidden">` として `<button>` の外に描かれる。
+  `:has(input:checked)` などで見た目を上書きしていた場合は追従が要る
+- `CheckBox` が `isDisabled` のとき `<button disabled>` を出す（Tab で止まらなくなる）
+- `ArticleList` の `CardHeading` が `heading` を HTML として描画する
+  （WordPress の `title.rendered` のエンティティがそのまま出ていた）。
+  WP 以外から渡す場合は埋め込む前にサニタイズすること
+- `ModalBox` が開いている間、Tab / Shift+Tab をダイアログ内で循環させる（フォーカストラップ）
+
+## 0.6.0 の破壊的変更
+
+- `ModalBox` のイベント名が `closeModal` → `close`（React の `onClose` と揃えた）。
+  親が `isShown=false` にしたときと unmount 時には emit しなくなった
+- `TabUI` の `cssStyle` prop を削除（宣言のみで未使用だった）。`color.text` は配線した
+- `CheckBox` / `ToggleButton` のロールが `aria-pressed` から
+  `role="checkbox" + aria-checked` / `role="switch" + aria-checked` に変わった。
+  アクセシブル名は `ariaLabel` / `ariaLabelledBy` で渡せる（未指定なら従来どおり `name`）
+- id の採番が `useId()` になり、Vue 3.5 未満では動かない（→ Installation）
+- `dist` が `preserveModules` 構成になった（`import '@geckou/ui-vue/style.css'` は引き続き必要）
+- `DateSelector` に `minYear` / `maxYear` を追加（既定は従来どおり「今年 -100 〜 今年 -14」）
+- `DateRangePicker` が範囲（開始 > 終了）を検証し、`<name>Range` という名前で
+  `FormValidationManager` に登録する。`invalidNames` を見ている場合は増える
+
 ## License
 
 [MIT](../../LICENSE)

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};

package/dist/components/ArticleList/Card/Artistic.vue.js

@@ -0,0 +1,9 @@
+import s from "./Artistic.vue2.js";
+import o from "./Artistic.vue3.js";
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const r = {
+  $style: o
+}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
+export {
+  f as default
+};

package/dist/components/ArticleList/Card/Artistic.vue2.js

@@ -0,0 +1,105 @@
+import { defineComponent as m, openBlock as r, createElementBlock as d, normalizeClass as t, createBlock as l, withCtx as g, createVNode as i, createElementVNode as y, createCommentVNode as s, unref as o } from "vue";
+import { returnAuthor as n } from "../../../scripts/utils.js";
+import u from "../Parts/CardContainer.vue.js";
+import f from "../Parts/ThumbnailImage.vue.js";
+import h from "../Parts/AuthorInfo.vue.js";
+import k from "../Parts/CardHeading.vue.js";
+import $ from "../Parts/CategoryList.vue.js";
+import C from "../Parts/TagList.vue.js";
+import v from "../Parts/PostedDate.vue.js";
+import b from "../Parts/ExcerptText.vue.js";
+const S = /* @__PURE__ */ m({
+  __name: "Artistic",
+  props: {
+    article: {},
+    path: {},
+    isPickUpItem: { type: Boolean },
+    postConfig: {},
+    categories: {}
+  },
+  setup(e) {
+    return (a, p) => (r(), d("div", {
+      class: t([a.$style.wrapper, { [a.$style.pickup]: e.isPickUpItem }])
+    }, [
+      e.article ? (r(), l(u, {
+        key: 0,
+        class: t(a.$style.container),
+        path: e.path
+      }, {
+        default: g(() => {
+          var c;
+          return [
+            i(f, {
+              article: e.article,
+              aspectRatio: {
+                desktop: e.isPickUpItem ? "21/9" : "4/3",
+                tablet: e.isPickUpItem ? "21/9" : "4/3",
+                mobile: "4/3"
+              },
+              class: t(a.$style.thumbnail),
+              style: { "grid-area": "thumbnail" }
+            }, null, 8, ["article", "aspectRatio", "class"]),
+            y("div", {
+              class: t(a.$style.overlay)
+            }, [
+              i(b, {
+                excerpt: e.article.excerpt.rendered,
+                class: t(a.$style.excerpt),
+                color: "var(--white)",
+                style: { "grid-area": "excerpt" }
+              }, null, 8, ["excerpt", "class"])
+            ], 2),
+            i(v, {
+              date: e.article.date,
+              formatString: "yy.M.d",
+              class: t(a.$style.date),
+              style: { "grid-area": "date" }
+            }, null, 8, ["date", "class"]),
+            i(k, {
+              heading: e.article.title.rendered,
+              class: t(a.$style.heading),
+              style: { "grid-area": "heading" }
+            }, null, 8, ["heading", "class"]),
+            e.postConfig.tag ? (r(), l(C, {
+              key: 0,
+              article: e.article,
+              label: {
+                color: "var(--text-color)",
+                fontSize: "smaller"
+              },
+              class: t(a.$style.tag),
+              delimiter: "/",
+              style: { "grid-area": "tag" }
+            }, null, 8, ["article", "class"])) : s("", !0),
+            e.postConfig.author && o(n)(e.article) ? (r(), l(h, {
+              key: 1,
+              avatarUrls: (c = o(n)(e.article)) == null ? void 0 : c.avatar_urls,
+              thumbnail: {
+                size: "large",
+                shape: "circle"
+              },
+              class: t(a.$style.author),
+              style: { "grid-area": "author" }
+            }, null, 8, ["avatarUrls", "class"])) : s("", !0),
+            e.postConfig.category && e.article.categories ? (r(), l($, {
+              key: 2,
+              categoryIds: e.article.categories,
+              categoryData: e.categories,
+              label: {
+                backgroundColor: "var(--main-color)",
+                color: "var(--white)",
+                fontSize: "small"
+              },
+              class: t(a.$style.category),
+              style: { "grid-area": "category" }
+            }, null, 8, ["categoryIds", "categoryData", "class"])) : s("", !0)
+          ];
+        }),
+        _: 1
+      }, 8, ["class", "path"])) : s("", !0)
+    ], 2));
+  }
+});
+export {
+  S as default
+};

package/dist/components/ArticleList/Card/Artistic.vue3.js

@@ -0,0 +1,27 @@
+const o = "_wrapper_1gqog_1", t = "_container_1gqog_28", _ = "_overlay_1gqog_31", g = "_excerpt_1gqog_32", a = "_pickup_1gqog_36", e = "_thumbnail_1gqog_43", c = "_heading_1gqog_49", n = "_date_1gqog_50", r = "_tag_1gqog_51", p = "_author_1gqog_52", s = "_category_1gqog_53", i = {
+  wrapper: o,
+  container: t,
+  overlay: _,
+  excerpt: g,
+  pickup: a,
+  thumbnail: e,
+  heading: c,
+  date: n,
+  tag: r,
+  author: p,
+  category: s
+};
+export {
+  p as author,
+  s as category,
+  t as container,
+  n as date,
+  i as default,
+  g as excerpt,
+  c as heading,
+  _ as overlay,
+  a as pickup,
+  r as tag,
+  e as thumbnail,
+  o as wrapper
+};

package/dist/components/ArticleList/Card/Entertainment.vue.js

@@ -0,0 +1,9 @@
+import s from "./Entertainment.vue2.js";
+import t from "./Entertainment.vue3.js";
+import o from "../../../_virtual/_plugin-vue_export-helper.js";
+const r = {
+  $style: t
+}, f = /* @__PURE__ */ o(s, [["__cssModules", r]]);
+export {
+  f as default
+};

package/dist/components/ArticleList/Card/Entertainment.vue2.js

@@ -0,0 +1,120 @@
+import { defineComponent as f, openBlock as r, createBlock as i, normalizeClass as a, withCtx as u, createElementVNode as c, createVNode as l, createCommentVNode as o, unref as m } from "vue";
+import { returnAuthor as d } from "../../../scripts/utils.js";
+import y from "../Parts/CardContainer.vue.js";
+import g from "../Parts/ThumbnailImage.vue.js";
+import h from "../Parts/AuthorInfo.vue.js";
+import $ from "../Parts/CardHeading.vue.js";
+import k from "../Parts/CategoryList.vue.js";
+import b from "../Parts/TagList.vue.js";
+import s from "../Parts/PostedDate.vue.js";
+import v from "../Parts/ExcerptText.vue.js";
+const N = /* @__PURE__ */ f({
+  __name: "Entertainment",
+  props: {
+    article: {},
+    path: {},
+    isPickUpItem: { type: Boolean },
+    postConfig: {},
+    categories: {}
+  },
+  setup(e) {
+    return (t, C) => e.article ? (r(), i(y, {
+      key: 0,
+      class: a([t.$style.container, { [t.$style.pickup]: e.isPickUpItem }]),
+      path: e.path
+    }, {
+      default: u(() => {
+        var n;
+        return [
+          c("div", {
+            class: a(t.$style.date)
+          }, [
+            l(s, {
+              date: e.article.date,
+              class: a(t.$style.year),
+              formatString: "yyyy",
+              fontSize: "medium",
+              fontWeight: "bold",
+              color: "var(--text-color)"
+            }, null, 8, ["date", "class"]),
+            l(s, {
+              date: e.article.date,
+              class: a(t.$style.month),
+              formatString: "M",
+              fontSize: "xxx-large",
+              fontWeight: "bold",
+              color: "var(--text-color)"
+            }, null, 8, ["date", "class"]),
+            l(s, {
+              date: e.article.date,
+              class: a(t.$style.day),
+              formatString: "d",
+              fontSize: "xxx-large",
+              fontWeight: "bold",
+              color: "var(--text-color)"
+            }, null, 8, ["date", "class"])
+          ], 2),
+          l(g, {
+            article: e.article,
+            aspectRatio: {
+              desktop: e.isPickUpItem ? "21/9" : "4/3",
+              tablet: e.isPickUpItem ? "16/9" : "4/3",
+              mobile: (e.isPickUpItem, "4/3")
+            },
+            class: a(t.$style.thumbnail)
+          }, null, 8, ["article", "aspectRatio", "class"]),
+          c("div", {
+            class: a(t.$style.contents)
+          }, [
+            e.postConfig.category && e.article.categories ? (r(), i(k, {
+              key: 0,
+              categoryIds: e.article.categories,
+              categoryData: e.categories,
+              label: {
+                color: "var(--main-color)",
+                fontSize: "small",
+                fontWeight: "bold"
+              },
+              class: a(t.$style.category)
+            }, null, 8, ["categoryIds", "categoryData", "class"])) : o("", !0),
+            l($, {
+              heading: e.article.title.rendered,
+              class: a(t.$style.heading)
+            }, null, 8, ["heading", "class"]),
+            c("div", {
+              class: a(t.$style.row)
+            }, [
+              e.postConfig.tag ? (r(), i(b, {
+                key: 0,
+                article: e.article,
+                label: {
+                  color: "var(--text-color)",
+                  fontSize: "small"
+                },
+                class: a(t.$style.tag),
+                delimiter: "/"
+              }, null, 8, ["article", "class"])) : o("", !0),
+              e.postConfig.author && m(d)(e.article) ? (r(), i(h, {
+                key: 1,
+                avatarUrls: (n = m(d)(e.article)) == null ? void 0 : n.avatar_urls,
+                class: a(t.$style.author),
+                thumbnail: {
+                  size: "medium",
+                  shape: "circle"
+                }
+              }, null, 8, ["avatarUrls", "class"])) : o("", !0)
+            ], 2),
+            l(v, {
+              excerpt: e.article.excerpt.rendered,
+              class: a(t.$style.excerpt)
+            }, null, 8, ["excerpt", "class"])
+          ], 2)
+        ];
+      }),
+      _: 1
+    }, 8, ["class", "path"])) : o("", !0);
+  }
+});
+export {
+  N as default
+};

package/dist/components/ArticleList/Card/Entertainment.vue3.js

@@ -0,0 +1,31 @@
+const t = "_thumbnail_uuh1j_1", _ = "_date_uuh1j_9", u = "_year_uuh1j_19", n = "_month_uuh1j_23", o = "_day_uuh1j_24", c = "_contents_uuh1j_42", e = "_category_uuh1j_53", a = "_heading_uuh1j_57", h = "_row_uuh1j_62", r = "_author_uuh1j_69", s = "_excerpt_uuh1j_73", j = "_container_uuh1j_82", i = "_pickup_uuh1j_93", d = {
+  thumbnail: t,
+  date: _,
+  year: u,
+  month: n,
+  day: o,
+  contents: c,
+  category: e,
+  heading: a,
+  row: h,
+  author: r,
+  excerpt: s,
+  container: j,
+  pickup: i
+};
+export {
+  r as author,
+  e as category,
+  j as container,
+  c as contents,
+  _ as date,
+  o as day,
+  d as default,
+  s as excerpt,
+  a as heading,
+  n as month,
+  i as pickup,
+  h as row,
+  t as thumbnail,
+  u as year
+};

package/dist/components/ArticleList/Card/Gallery.vue.js

@@ -0,0 +1,9 @@
+import s from "./Gallery.vue2.js";
+import o from "./Gallery.vue3.js";
+import r from "../../../_virtual/_plugin-vue_export-helper.js";
+const t = {
+  $style: o
+}, c = /* @__PURE__ */ r(s, [["__cssModules", t]]);
+export {
+  c as default
+};

package/dist/components/ArticleList/Card/Gallery.vue2.js

@@ -0,0 +1,103 @@
+import { defineComponent as n, openBlock as l, createBlock as i, normalizeClass as a, withCtx as d, createVNode as r, unref as s, createCommentVNode as c } from "vue";
+import { returnAuthor as m } from "../../../scripts/utils.js";
+import g from "../Parts/CardContainer.vue.js";
+import y from "../Parts/ThumbnailImage.vue.js";
+import f from "../Parts/AuthorInfo.vue.js";
+import u from "../Parts/CardHeading.vue.js";
+import h from "../Parts/CategoryList.vue.js";
+import k from "../Parts/TagList.vue.js";
+import I from "../Parts/PostedDate.vue.js";
+import b from "../Parts/ExcerptText.vue.js";
+const A = /* @__PURE__ */ n({
+  __name: "Gallery",
+  props: {
+    article: {},
+    path: {},
+    isPickUpItem: { type: Boolean },
+    postConfig: {},
+    categories: {}
+  },
+  setup(e) {
+    return (t, C) => e.article ? (l(), i(g, {
+      key: 0,
+      class: a([t.$style.container, { [t.$style.pickup]: e.isPickUpItem }]),
+      path: e.path
+    }, {
+      default: d(() => {
+        var o;
+        return [
+          r(y, {
+            article: e.article,
+            aspectRatio: {
+              desktop: e.isPickUpItem ? "2.85/1" : "4/3",
+              tablet: e.isPickUpItem ? "16/9" : "4/3",
+              mobile: (e.isPickUpItem, "4/3")
+            },
+            class: a(t.$style.thumbnail),
+            style: { "grid-area": "thumbnail" }
+          }, null, 8, ["article", "aspectRatio", "class"]),
+          r(u, {
+            heading: e.article.title.rendered,
+            class: a(t.$style.heading),
+            color: "var(--white)",
+            style: { "grid-area": "heading" }
+          }, null, 8, ["heading", "class"]),
+          r(I, {
+            date: e.article.date,
+            class: a(t.$style.date),
+            fontSize: e.isPickUpItem ? "medium" : "small",
+            formatString: "yyyy.M.d",
+            color: "var(--white)",
+            fontWeight: "bold",
+            style: { "grid-area": "date" }
+          }, null, 8, ["date", "class", "fontSize"]),
+          e.postConfig.author && s(m)(e.article) ? (l(), i(f, {
+            key: 0,
+            name: (o = s(m)(e.article)) == null ? void 0 : o.name,
+            class: a(t.$style.author),
+            text: {
+              color: "var(--white)",
+              fontSize: e.isPickUpItem ? "medium" : "small",
+              fontWeight: "bold"
+            },
+            style: { "grid-area": "author" }
+          }, null, 8, ["name", "class", "text"])) : c("", !0),
+          e.postConfig.category && e.article.categories ? (l(), i(h, {
+            key: 1,
+            categoryIds: e.article.categories,
+            categoryData: e.categories,
+            label: {
+              color: "var(--white)",
+              fontSize: e.isPickUpItem ? "medium" : "small"
+            },
+            class: a(t.$style.category),
+            style: { "grid-area": "category" }
+          }, null, 8, ["categoryIds", "categoryData", "label", "class"])) : c("", !0),
+          e.postConfig.tag ? (l(), i(k, {
+            key: 2,
+            article: e.article,
+            label: {
+              color: "var(--white)",
+              fontSize: e.isPickUpItem ? "medium" : "small"
+            },
+            class: a(t.$style.tag),
+            delimiter: "/",
+            style: { "grid-area": "tag" }
+          }, null, 8, ["article", "label", "class"])) : c("", !0),
+          r(b, {
+            excerpt: e.article.excerpt.rendered,
+            class: a(t.$style.excerpt),
+            color: "var(--white)",
+            fontSize: "small",
+            row: 2,
+            style: { "grid-area": "excerpt" }
+          }, null, 8, ["excerpt", "class"])
+        ];
+      }),
+      _: 1
+    }, 8, ["class", "path"])) : c("", !0);
+  }
+});
+export {
+  A as default
+};

package/dist/components/ArticleList/Card/Gallery.vue3.js

@@ -0,0 +1,23 @@
+const t = "_container_1hse0_1", e = "_thumbnail_1hse0_16", _ = "_category_1hse0_20", a = "_tag_1hse0_21", c = "_excerpt_1hse0_22", n = "_pickup_1hse0_53", s = "_heading_1hse0_73", o = "_date_1hse0_105", h = "_author_1hse0_106", r = {
+  container: t,
+  thumbnail: e,
+  category: _,
+  tag: a,
+  excerpt: c,
+  pickup: n,
+  heading: s,
+  date: o,
+  author: h
+};
+export {
+  h as author,
+  _ as category,
+  t as container,
+  o as date,
+  r as default,
+  c as excerpt,
+  s as heading,
+  n as pickup,
+  a as tag,
+  e as thumbnail
+};

package/dist/components/ArticleList/Card/Grid.vue.js

@@ -0,0 +1,9 @@
+import s from "./Grid.vue2.js";
+import o from "./Grid.vue3.js";
+import r from "../../../_virtual/_plugin-vue_export-helper.js";
+const t = {
+  $style: o
+}, f = /* @__PURE__ */ r(s, [["__cssModules", t]]);
+export {
+  f as default
+};