@geckou/ui-vue 0.6.0 → 0.7.0

package/README.md

@@ -64,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
@@ -291,6 +301,20 @@ const articles = ref<any[]>([])
 
 定義例はデモの `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` と揃えた）。

package/dist/components/ArticleList/Parts/CardHeading.vue.d.ts

@@ -1,4 +1,9 @@
 type __VLS_Props = {
+    /**
+     * 見出し。**HTML 文字列として描画する**（WordPress の `title.rendered` は
+     * `&` などにエンコード済みなので、テキストのまま出すとエンティティが見えてしまう）。
+     * WP 以外から渡す場合は、埋め込む前にサニタイズすること
+     */
     heading: string;
     color?: string;
     fontSize?: string;
@@ -8,5 +13,5 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     color: string;
     fontSize: string;
     fontWeight: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/ArticleList/Parts/CardHeading.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as n, openBlock as a, createElementBlock as o, normalizeClass as l, normalizeStyle as i, createElementVNode as r, toDisplayString as d } from "vue";
-const g = /* @__PURE__ */ n({
+import { defineComponent as t, openBlock as o, createElementBlock as a, normalizeClass as i, normalizeStyle as l, createElementVNode as r } from "vue";
+const d = ["innerHTML"], h = /* @__PURE__ */ t({
   __name: "CardHeading",
   props: {
     heading: {},
@@ -8,18 +8,18 @@ const g = /* @__PURE__ */ n({
     fontWeight: { default: "bold" }
   },
   setup(e) {
-    return (t, c) => (a(), o("div", {
-      class: l(t.$style.heading),
-      style: i({
+    return (n, c) => (o(), a("div", {
+      class: i(n.$style.heading),
+      style: l({
         "--heading-color": e.color,
         "--heading-font-size": e.fontSize,
         "--heading-font-weight": e.fontWeight
       })
     }, [
-      r("h2", null, d(e.heading), 1)
+      r("h2", { innerHTML: e.heading }, null, 8, d)
     ], 6));
   }
 });
 export {
-  g as default
+  h as default
 };

package/dist/components/CheckBox.vue.d.ts

@@ -20,7 +20,7 @@ declare function __VLS_template(): {
         check?(_: {}): any;
     };
     refs: {};
-    rootEl: HTMLButtonElement;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
@@ -32,7 +32,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     value: string | number;
     ariaLabel: string;
     ariaLabelledBy: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/CheckBox.vue2.js

@@ -1,7 +1,8 @@
-import { defineComponent as x, computed as f, openBlock as v, createElementBlock as S, normalizeClass as h, normalizeStyle as V, withModifiers as z, withDirectives as L, createElementVNode as C, vModelCheckbox as g, renderSlot as p, createBlock as $, createCommentVNode as w } from "vue";
-import G from "./Icon/CheckIcon.vue.js";
+import { defineComponent as g, computed as f, openBlock as r, createElementBlock as h, Fragment as L, createElementVNode as v, mergeProps as S, withModifiers as V, normalizeClass as $, renderSlot as z, createBlock as x, createCommentVNode as C } from "vue";
+import p from "./Icon/CheckIcon.vue.js";
 import { COLOR as t } from "@geckou/ui-core";
-const A = ["aria-checked", "aria-labelledby", "aria-label"], E = ["name", "value", "disabled"], I = /* @__PURE__ */ x({
+const A = ["disabled", "data-checked", "aria-checked", "aria-labelledby", "aria-label"], G = ["name", "value", "disabled"], F = /* @__PURE__ */ g({
+  inheritAttrs: !1,
   __name: "CheckBox",
   props: {
     name: {},
@@ -15,12 +16,12 @@ const A = ["aria-checked", "aria-labelledby", "aria-label"], E = ["name", "value
   },
   emits: ["update:modelValue"],
   setup(e, { emit: B }) {
-    const D = B, l = e, i = f({
+    const D = B, l = e, d = f({
       get: () => l.modelValue ?? !1,
       set: (a) => D("update:modelValue", a)
-    }), d = f(() => {
-      var o, r;
-      const a = l.isDisabled ? (o = l.cssStyle) == null ? void 0 : o.disabled : (r = l.cssStyle) == null ? void 0 : r.default;
+    }), i = f(() => {
+      var o, s;
+      const a = l.isDisabled ? (o = l.cssStyle) == null ? void 0 : o.disabled : (s = l.cssStyle) == null ? void 0 : s.default;
       return {
         textColor: l.isDisabled ? t.darkGray : t.blue,
         backgroundColor: l.isDisabled ? t.lightGray : t.white,
@@ -33,44 +34,45 @@ const A = ["aria-checked", "aria-labelledby", "aria-label"], E = ["name", "value
       };
     });
     return (a, o) => {
-      var r, s, n, u, c, b, m, y;
-      return v(), S("button", {
-        class: h(a.$style.check_box),
-        style: V({
-          "--text-color": (r = d.value) == null ? void 0 : r.textColor,
-          "--border-color": (n = (s = d.value) == null ? void 0 : s.border) == null ? void 0 : n.color,
-          "--border-size": (c = (u = d.value) == null ? void 0 : u.border) == null ? void 0 : c.size,
-          "--radius-size": (m = (b = d.value) == null ? void 0 : b.border) == null ? void 0 : m.radius,
-          "--background-color": (y = d.value) == null ? void 0 : y.backgroundColor,
-          "--duration": e.isDisableAnimation ? "0s" : ".3s"
-        }),
-        type: "button",
-        role: "checkbox",
-        "aria-checked": i.value,
-        "aria-labelledby": e.ariaLabelledBy,
-        "aria-label": e.ariaLabelledBy ? void 0 : e.ariaLabel ?? e.name,
-        onClick: o[1] || (o[1] = z((k) => e.isDisabled ? null : i.value = !i.value, ["stop"]))
-      }, [
-        L(C("input", {
-          "onUpdate:modelValue": o[0] || (o[0] = (k) => i.value = k),
-          type: "checkbox",
-          tabindex: "-1",
+      var s, n, u, c, b, m, k, y;
+      return r(), h(L, null, [
+        v("button", S(a.$attrs, {
+          class: a.$style.check_box,
+          style: {
+            "--text-color": (s = i.value) == null ? void 0 : s.textColor,
+            "--border-color": (u = (n = i.value) == null ? void 0 : n.border) == null ? void 0 : u.color,
+            "--border-size": (b = (c = i.value) == null ? void 0 : c.border) == null ? void 0 : b.size,
+            "--radius-size": (k = (m = i.value) == null ? void 0 : m.border) == null ? void 0 : k.radius,
+            "--background-color": (y = i.value) == null ? void 0 : y.backgroundColor,
+            "--duration": e.isDisableAnimation ? "0s" : ".3s"
+          },
+          type: "button",
+          role: "checkbox",
+          disabled: e.isDisabled,
+          "data-checked": d.value,
+          "aria-checked": d.value,
+          "aria-labelledby": e.ariaLabelledBy,
+          "aria-label": e.ariaLabelledBy ? void 0 : e.ariaLabel ?? e.name,
+          onClick: o[0] || (o[0] = V((w) => e.isDisabled ? null : d.value = !d.value, ["stop"]))
+        }), [
+          v("div", {
+            class: $(a.$style.check_container)
+          }, [
+            z(a.$slots, "check"),
+            a.$slots.check ? C("", !0) : (r(), x(p, { key: 0 }))
+          ], 2)
+        ], 16, A),
+        d.value ? (r(), h("input", {
+          key: 0,
+          type: "hidden",
           name: e.name,
-          value: e.value,
+          value: e.value ?? "on",
           disabled: e.isDisabled
-        }, null, 8, E), [
-          [g, i.value]
-        ]),
-        C("div", {
-          class: h(a.$style.check_container)
-        }, [
-          p(a.$slots, "check"),
-          a.$slots.check ? w("", !0) : (v(), $(G, { key: 0 }))
-        ], 2)
-      ], 14, A);
+        }, null, 8, G)) : C("", !0)
+      ], 64);
     };
   }
 });
 export {
-  I as default
+  F as default
 };

package/dist/components/CheckBox.vue3.js

@@ -1,4 +1,4 @@
-const c = "_check_box_1956i_15", _ = "_pop_1956i_1", o = "_check_container_1956i_53", e = {
+const c = "_check_box_1flnz_15", _ = "_pop_1flnz_1", o = "_check_container_1flnz_42", n = {
   check_box: c,
   pop: _,
   check_container: o
@@ -6,6 +6,6 @@ const c = "_check_box_1956i_15", _ = "_pop_1956i_1", o = "_check_container_1956i
 export {
   c as check_box,
   o as check_container,
-  e as default,
+  n as default,
   _ as pop
 };

package/dist/components/DatePicker.vue.d.ts

@@ -9,6 +9,13 @@ type __VLS_Props = {
     maxDate?: string;
     size?: 'small' | 'medium';
     type?: 'date' | 'month';
+    /**
+     * 年月日それぞれの読み上げ名の土台。「の年」「の月」「の日」を後ろに繋げる。
+     * 可視ラベルがあるなら ariaLabelledBy でその要素を指すこと。
+     * どちらも無いときだけ name を使う（機械名でも無いよりはマシ）
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (newValue: string | null) => any;
@@ -17,6 +24,8 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }>, {
     isDisabled: boolean;
     type: "date" | "month";
+    ariaLabel: string;
+    ariaLabelledBy: string;
     size: "small" | "medium";
     formValidationManager: FormValidationManager | null;
     minDate: string;

package/dist/components/DatePicker.vue2.js

@@ -1,9 +1,10 @@
-import { defineComponent as E, ref as f, reactive as C, watch as V, onBeforeUnmount as R, openBlock as b, createBlock as U, normalizeClass as r, withCtx as N, createElementVNode as m, createVNode as p, withDirectives as u, vModelDynamic as O, vModelText as v, createTextVNode as z, createElementBlock as g, createCommentVNode as h } from "vue";
-import { MESSAGES as I, validateDateObject as P, splitDate as S, composeDateValue as j, formatDateValue as T } from "@geckou/ui-core";
-import w from "./InputBox.vue.js";
-import A from "./Icon/CalendarIcon.vue.js";
-import G from "./ErrorMessage.vue.js";
-const F = ["type", "name", "max", "min", "required", "disabled"], H = ["aria-label", "disabled"], J = ["aria-label", "disabled"], K = { key: 0 }, L = ["aria-label", "disabled"], _ = /* @__PURE__ */ E({
+import { defineComponent as I, ref as v, reactive as R, watch as D, onBeforeUnmount as N, openBlock as y, createBlock as O, normalizeClass as o, withCtx as z, createElementVNode as n, createVNode as M, withDirectives as b, vModelDynamic as P, vModelText as h, createTextVNode as S, createElementBlock as $, createCommentVNode as g, unref as B } from "vue";
+import { MESSAGES as j, validateDateObject as T, splitDate as w, composeDateValue as A, formatDateValue as G } from "@geckou/ui-core";
+import F from "./InputBox.vue.js";
+import H from "./Icon/CalendarIcon.vue.js";
+import J from "./ErrorMessage.vue.js";
+import { nextUniqueId as K } from "../scripts/unique-id.js";
+const Q = ["type", "name", "max", "min", "required", "disabled"], W = ["aria-label", "aria-labelledby", "disabled"], X = ["aria-label", "aria-labelledby", "disabled"], Y = { key: 0 }, Z = ["aria-label", "aria-labelledby", "disabled"], _ = ["id"], ee = ["id"], ae = ["id"], re = /* @__PURE__ */ I({
   __name: "DatePicker",
   props: {
     name: {},
@@ -14,71 +15,73 @@ const F = ["type", "name", "max", "min", "required", "disabled"], H = ["aria-lab
     minDate: { default: "" },
     maxDate: { default: "" },
     size: { default: "medium" },
-    type: { default: "date" }
+    type: { default: "date" },
+    ariaLabel: { default: void 0 },
+    ariaLabelledBy: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(t, { emit: M }) {
-    const k = M, x = f(null), l = t, d = C({
+  setup(t, { emit: x }) {
+    const L = x, q = v(null), l = t, u = K("date_picker_unit"), f = (e) => l.ariaLabelledBy ? void 0 : `${l.ariaLabel ?? l.name}の${e}`, c = (e) => l.ariaLabelledBy ? `${l.ariaLabelledBy} ${u}_${e}` : void 0, d = R({
       year: "",
       month: "",
       day: ""
-    }), s = f(""), n = f(""), o = (e) => {
+    }), s = v(""), r = v(""), m = (e) => {
       l.formValidationManager && l.formValidationManager.setValid(l.name, e);
-    }, y = (e) => !e && l.isRequired ? { isValid: !1, message: I.required } : { isValid: !0, message: "" }, $ = (e) => P(
+    }, p = (e) => !e && l.isRequired ? { isValid: !1, message: j.required } : { isValid: !0, message: "" }, E = (e) => T(
       { year: e.year, month: e.month, day: e.day ?? "" },
       { type: l.type, isRequired: l.isRequired }
-    ), c = (e) => {
-      const { year: a, month: i, day: B } = S(e);
-      d.year = a, d.month = i, d.day = l.type === "month" ? "" : B;
-    }, q = () => j({ ...d }, l.type);
-    V(
+    ), V = (e) => {
+      const { year: a, month: i, day: C } = w(e);
+      d.year = a, d.month = i, d.day = l.type === "month" ? "" : C;
+    }, U = () => A({ ...d }, l.type);
+    D(
       () => s.value,
       (e) => {
-        c(e);
-        const { isValid: a, message: i } = y(e);
-        n.value = i, k("update:modelValue", e), o(a);
+        V(e);
+        const { isValid: a, message: i } = p(e);
+        r.value = i, L("update:modelValue", e), m(a);
       }
-    ), V(
+    ), D(
       () => d,
       (e) => {
-        const { isValid: a, message: i } = $(e);
-        n.value = i, o(a), a && (s.value = q());
+        const { isValid: a, message: i } = E(e);
+        r.value = i, m(a), a && (s.value = U());
       },
       { deep: !0 }
     );
-    const D = (e) => {
+    const k = (e) => {
       if (!e) {
-        s.value = "", c(""), n.value = "", o(y("").isValid);
+        s.value = "", V(""), r.value = "", m(p("").isValid);
         return;
       }
-      const a = T(e, l.type);
-      !a || a === s.value || (s.value = a, c(a));
+      const a = G(e, l.type);
+      !a || a === s.value || (s.value = a, V(a));
     };
-    return V(
+    return D(
       () => l.modelValue,
-      (e) => D(e)
-    ), D(l.modelValue), o(y(s.value).isValid), R(() => {
+      (e) => k(e)
+    ), k(l.modelValue), m(p(s.value).isValid), N(() => {
       var e;
       return (e = l.formValidationManager) == null ? void 0 : e.remove(l.name);
-    }), (e, a) => (b(), U(w, {
+    }), (e, a) => (y(), O(F, {
       isDisabled: t.isDisabled,
-      class: r([
+      class: o([
         e.$style.date_picker,
         e.$style[t.size],
         { [e.$style.is_disabled]: t.isDisabled }
       ]),
-      isErrored: !!n.value
+      isErrored: !!r.value
     }, {
-      default: N(() => [
-        m("div", {
-          class: r(e.$style.date_input)
+      default: z(() => [
+        n("div", {
+          class: o(e.$style.date_input)
         }, [
-          p(A, {
-            class: r(e.$style.icon)
+          M(H, {
+            class: o(e.$style.icon)
           }, null, 8, ["class"]),
-          u(m("input", {
+          b(n("input", {
             ref_key: "datePicker",
-            ref: x,
+            ref: q,
             "onUpdate:modelValue": a[0] || (a[0] = (i) => s.value = i),
             type: t.type,
             name: t.name,
@@ -86,46 +89,63 @@ const F = ["type", "name", "max", "min", "required", "disabled"], H = ["aria-lab
             min: t.minDate,
             required: t.isRequired,
             disabled: t.isDisabled
-          }, null, 8, F), [
-            [O, s.value]
+          }, null, 8, Q), [
+            [P, s.value]
           ])
         ], 2),
-        u(m("input", {
+        b(n("input", {
           "onUpdate:modelValue": a[1] || (a[1] = (i) => d.year = i),
           placeholder: "年",
-          "aria-label": `${t.name}の年`,
+          "aria-label": f("年"),
+          "aria-labelledby": c("年"),
           maxlength: "4",
           type: "text",
           disabled: t.isDisabled,
-          class: r(e.$style.year)
-        }, null, 10, H), [
-          [v, d.year]
+          class: o(e.$style.year)
+        }, null, 10, W), [
+          [h, d.year]
         ]),
-        a[4] || (a[4] = z("/ ", -1)),
-        u(m("input", {
+        a[4] || (a[4] = S("/ ", -1)),
+        b(n("input", {
           "onUpdate:modelValue": a[2] || (a[2] = (i) => d.month = i),
           placeholder: "月",
-          "aria-label": `${t.name}の月`,
+          "aria-label": f("月"),
+          "aria-labelledby": c("月"),
           maxlength: "2",
           type: "text",
           disabled: t.isDisabled
-        }, null, 8, J), [
-          [v, d.month]
+        }, null, 8, X), [
+          [h, d.month]
         ]),
-        t.type === "date" ? (b(), g("span", K, "/")) : h("", !0),
-        t.type === "date" ? u((b(), g("input", {
+        t.type === "date" ? (y(), $("span", Y, "/")) : g("", !0),
+        t.type === "date" ? b((y(), $("input", {
           key: 1,
           "onUpdate:modelValue": a[3] || (a[3] = (i) => d.day = i),
           placeholder: "日",
-          "aria-label": `${t.name}の日`,
+          "aria-label": f("日"),
+          "aria-labelledby": c("日"),
           maxlength: "2",
           type: "text",
           disabled: t.isDisabled
-        }, null, 8, L)), [
-          [v, d.day]
-        ]) : h("", !0),
-        p(G, {
-          errorMessages: n.value ? [n.value] : []
+        }, null, 8, Z)), [
+          [h, d.day]
+        ]) : g("", !0),
+        t.ariaLabelledBy ? (y(), $("span", {
+          key: 2,
+          class: o(e.$style.unit_labels)
+        }, [
+          n("span", {
+            id: `${B(u)}_年`
+          }, "の年", 8, _),
+          n("span", {
+            id: `${B(u)}_月`
+          }, "の月", 8, ee),
+          n("span", {
+            id: `${B(u)}_日`
+          }, "の日", 8, ae)
+        ], 2)) : g("", !0),
+        M(J, {
+          errorMessages: r.value ? [r.value] : []
         }, null, 8, ["errorMessages"])
       ]),
       _: 1
@@ -133,5 +153,5 @@ const F = ["type", "name", "max", "min", "required", "disabled"], H = ["aria-lab
   }
 });
 export {
-  _ as default
+  re as default
 };

package/dist/components/DatePicker.vue3.js

@@ -1,15 +1,17 @@
-const _ = "_icon_13vkb_1", t = "_date_input_13vkb_14", e = "_date_picker_13vkb_34", a = "_year_13vkb_45", c = "_small_13vkb_51", n = {
-  icon: _,
-  date_input: t,
-  date_picker: e,
-  year: a,
-  small: c
+const _ = "_unit_labels_1r4fv_1", t = "_icon_1r4fv_13", e = "_date_input_1r4fv_26", a = "_date_picker_1r4fv_46", n = "_year_1r4fv_57", s = "_small_1r4fv_63", l = {
+  unit_labels: _,
+  icon: t,
+  date_input: e,
+  date_picker: a,
+  year: n,
+  small: s
 };
 export {
-  t as date_input,
-  e as date_picker,
-  n as default,
-  _ as icon,
-  c as small,
-  a as year
+  e as date_input,
+  a as date_picker,
+  l as default,
+  t as icon,
+  s as small,
+  _ as unit_labels,
+  n as year
 };

package/dist/components/DateSelector.vue.d.ts

@@ -8,6 +8,13 @@ type __VLS_Props = {
     /** 選べる年の下限・上限。既定は「今年 -100 〜 今年 -14」（生年月日向け） */
     minYear?: number;
     maxYear?: number;
+    /**
+     * 年月日それぞれの読み上げ名の土台。「の年」「の月」「の日」を後ろに繋げる。
+     * 可視ラベルがあるなら ariaLabelledBy でその要素を指すこと。
+     * どちらも無いときだけ name を使う（機械名でも無いよりはマシ）
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (newValue: string) => any;
@@ -15,6 +22,8 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     "onUpdate:modelValue"?: ((newValue: string) => any) | undefined;
 }>, {
     type: "date" | "month";
+    ariaLabel: string;
+    ariaLabelledBy: string;
     formValidationManager: FormValidationManager | null;
     minYear: number;
     maxYear: number;