@geckou/ui-vue 0.6.0 → 0.7.0

package/dist/components/DateSelector.vue2.js

@@ -1,9 +1,10 @@
-import { defineComponent as N, ref as R, computed as m, watch as q, watchEffect as V, onBeforeUnmount as F, openBlock as s, createBlock as T, normalizeClass as u, withCtx as x, createElementVNode as i, createElementBlock as d, Fragment as p, renderList as g, toDisplayString as h, createVNode as y, createCommentVNode as A } from "vue";
-import { daysInMonth as O, splitDate as j } from "@geckou/ui-core";
-import z from "./InputBox.vue.js";
-import b from "./Icon/KeyboardArrowDownIcon.vue.js";
-import H from "./TextButton.vue.js";
-const L = ["value", "name", "aria-label", "required"], P = ["value"], U = ["value", "name", "aria-label", "required"], G = ["value"], J = ["value", "name", "aria-label", "required"], K = ["value"], ee = /* @__PURE__ */ N({
+import { defineComponent as T, ref as x, computed as y, watch as M, watchEffect as A, onBeforeUnmount as O, openBlock as s, createBlock as j, normalizeClass as u, withCtx as U, createElementVNode as o, createElementBlock as d, Fragment as h, renderList as $, toDisplayString as B, createVNode as c, createCommentVNode as Y, unref as k } from "vue";
+import { daysInMonth as z, splitDate as H } from "@geckou/ui-core";
+import P from "./InputBox.vue.js";
+import C from "./Icon/KeyboardArrowDownIcon.vue.js";
+import G from "./TextButton.vue.js";
+import { nextUniqueId as J } from "../scripts/unique-id.js";
+const K = ["value", "name", "aria-label", "aria-labelledby", "required"], Q = ["value"], W = ["value", "name", "aria-label", "aria-labelledby", "required"], X = ["value"], Z = ["value", "name", "aria-label", "aria-labelledby", "required"], w = ["value"], _ = ["id"], ee = ["id"], te = ["id"], de = /* @__PURE__ */ T({
   __name: "DateSelector",
   props: {
     name: {},
@@ -12,32 +13,34 @@ const L = ["value", "name", "aria-label", "required"], P = ["value"], U = ["valu
     formValidationManager: { default: null },
     type: { default: "date" },
     minYear: { default: void 0 },
-    maxYear: { default: void 0 }
+    maxYear: { default: void 0 },
+    ariaLabel: { default: void 0 },
+    ariaLabelledBy: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(l, { emit: B }) {
-    const C = B, o = l, n = R({
+  setup(i, { emit: D }) {
+    const q = D, l = i, m = J("date_selector_unit"), f = (e) => l.ariaLabelledBy ? void 0 : `${l.ariaLabel ?? l.name}の${e}`, v = (e) => l.ariaLabelledBy ? `${l.ariaLabelledBy} ${m}_${e}` : void 0, n = x({
       year: "",
       month: "",
       day: ""
-    }), M = m(() => {
-      const e = (/* @__PURE__ */ new Date()).getFullYear(), a = o.minYear ?? e - 100, t = o.maxYear ?? e - 14, r = Math.max(t - a + 1, 0);
-      return Array.from({ length: r }, (f, I) => (a + I).toString()).map((f) => ({ label: f, value: f }));
-    }), Y = m(() => Array.from({ length: 12 }, (e, a) => {
+    }), E = y(() => {
+      const e = (/* @__PURE__ */ new Date()).getFullYear(), a = l.minYear ?? e - 100, t = l.maxYear ?? e - 14, r = Math.max(t - a + 1, 0);
+      return Array.from({ length: r }, (g, F) => (a + F).toString()).map((g) => ({ label: g, value: g }));
+    }), N = y(() => Array.from({ length: 12 }, (e, a) => {
       const t = (a + 1).toString();
       return {
         label: t,
         value: t.padStart(2, "0")
       };
-    })), $ = m(() => {
+    })), S = y(() => {
       var t, r;
       const e = Number((t = n.value) == null ? void 0 : t.month);
       if (!e)
         return 31;
       const a = Number((r = n.value) == null ? void 0 : r.year) || 2e3;
-      return O(a, e);
-    }), D = m(() => {
-      const e = [], a = $.value;
+      return z(a, e);
+    }), R = y(() => {
+      const e = [], a = S.value;
       for (let t = 1; t <= a; t++) {
         const r = t.toString();
         e.push(r);
@@ -46,119 +49,136 @@ const L = ["value", "name", "aria-label", "required"], P = ["value"], U = ["valu
         label: t,
         value: String(t).padStart(2, "0")
       }));
-    }), v = (e) => {
+    }), b = (e) => {
       const t = e.currentTarget.firstElementChild;
       t && t.click();
-    }, c = (e, a) => {
+    }, p = (e, a) => {
       const t = e.target, { value: r } = t;
       n.value = { ...n.value, [a]: r };
     };
-    q($, (e) => {
+    M(S, (e) => {
       const a = Number(n.value.day);
       a && a > e && (n.value = { ...n.value, day: String(e).padStart(2, "0") });
     });
-    const E = { year: "", month: "", day: "" };
-    V(() => {
-      n.value = o.modelValue ? j(o.modelValue) : { ...E };
+    const V = { year: "", month: "", day: "" };
+    A(() => {
+      n.value = l.modelValue ? H(l.modelValue) : { ...V };
     });
-    const k = (e) => {
-      o.formValidationManager && o.formValidationManager.setValid(o.name, e);
-    }, S = (e) => {
-      const a = !!(e.year && e.month && (o.type === "month" || e.day)), t = !e.year && !e.month && !e.day;
-      return o.isRequired ? a : a || t;
+    const L = (e) => {
+      l.formValidationManager && l.formValidationManager.setValid(l.name, e);
+    }, I = (e) => {
+      const a = !!(e.year && e.month && (l.type === "month" || e.day)), t = !e.year && !e.month && !e.day;
+      return l.isRequired ? a : a || t;
     };
-    return k(S(n.value)), q(
+    return L(I(n.value)), M(
       () => n.value,
       (e) => {
-        const a = !!(e.year && e.month && (o.type === "month" || e.day)), t = !e.year && !e.month && !e.day;
-        if (k(S(e)), t)
-          C("update:modelValue", "");
+        const a = !!(e.year && e.month && (l.type === "month" || e.day)), t = !e.year && !e.month && !e.day;
+        if (L(I(e)), t)
+          q("update:modelValue", "");
         else if (a) {
-          const r = o.type === "month" ? [e.year, e.month] : [e.year, e.month, e.day];
-          C("update:modelValue", r.filter(Boolean).join("-"));
+          const r = l.type === "month" ? [e.year, e.month] : [e.year, e.month, e.day];
+          q("update:modelValue", r.filter(Boolean).join("-"));
         } else
           return;
       },
       { deep: !0 }
-    ), F(() => {
+    ), O(() => {
       var e;
-      return (e = o.formValidationManager) == null ? void 0 : e.remove(o.name);
-    }), (e, a) => (s(), T(z, {
+      return (e = l.formValidationManager) == null ? void 0 : e.remove(l.name);
+    }), (e, a) => (s(), j(P, {
       class: u(e.$style.date_selector)
     }, {
-      default: x(() => [
-        i("div", {
+      default: U(() => [
+        o("div", {
           class: u([e.$style.selector_wrapper]),
-          onClick: a[1] || (a[1] = (t) => v(t))
+          onClick: a[1] || (a[1] = (t) => b(t))
         }, [
-          i("select", {
+          o("select", {
             value: n.value.year,
-            name: `${l.name}-year`,
-            "aria-label": `${l.name}の年`,
-            required: l.isRequired,
+            name: `${i.name}-year`,
+            "aria-label": f("年"),
+            "aria-labelledby": v("年"),
+            required: i.isRequired,
             class: u(e.$style.year),
-            onChange: a[0] || (a[0] = (t) => c(t, "year"))
+            onChange: a[0] || (a[0] = (t) => p(t, "year"))
           }, [
-            a[7] || (a[7] = i("option", {
+            a[7] || (a[7] = o("option", {
               disabled: "",
               selected: "",
               value: ""
             }, "年", -1)),
-            (s(!0), d(p, null, g(M.value, (t) => (s(), d("option", {
+            (s(!0), d(h, null, $(E.value, (t) => (s(), d("option", {
               key: t.value,
               value: t.value
-            }, h(t.label), 9, P))), 128))
-          ], 42, L),
-          y(b)
+            }, B(t.label), 9, Q))), 128))
+          ], 42, K),
+          c(C)
         ], 2),
-        i("div", {
+        o("div", {
           class: u([e.$style.selector_wrapper]),
-          onClick: a[3] || (a[3] = (t) => v(t))
+          onClick: a[3] || (a[3] = (t) => b(t))
         }, [
-          i("select", {
+          o("select", {
             value: n.value.month,
-            name: `${l.name}-month`,
-            "aria-label": `${l.name}の月`,
-            required: l.isRequired,
-            onChange: a[2] || (a[2] = (t) => c(t, "month"))
+            name: `${i.name}-month`,
+            "aria-label": f("月"),
+            "aria-labelledby": v("月"),
+            required: i.isRequired,
+            onChange: a[2] || (a[2] = (t) => p(t, "month"))
           }, [
-            a[8] || (a[8] = i("option", {
+            a[8] || (a[8] = o("option", {
               disabled: "",
               selected: "",
               value: ""
             }, "月", -1)),
-            (s(!0), d(p, null, g(Y.value, (t) => (s(), d("option", {
+            (s(!0), d(h, null, $(N.value, (t) => (s(), d("option", {
               key: t.value,
               value: t.value
-            }, h(t.label), 9, G))), 128))
-          ], 40, U),
-          y(b)
+            }, B(t.label), 9, X))), 128))
+          ], 40, W),
+          c(C)
         ], 2),
-        l.type === "date" ? (s(), d("div", {
+        i.type === "date" ? (s(), d("div", {
           key: 0,
           class: u([e.$style.selector_wrapper]),
-          onClick: a[5] || (a[5] = (t) => v(t))
+          onClick: a[5] || (a[5] = (t) => b(t))
         }, [
-          i("select", {
+          o("select", {
             value: n.value.day,
-            name: `${l.name}-day`,
-            "aria-label": `${l.name}の日`,
-            required: l.isRequired,
-            onChange: a[4] || (a[4] = (t) => c(t, "day"))
+            name: `${i.name}-day`,
+            "aria-label": f("日"),
+            "aria-labelledby": v("日"),
+            required: i.isRequired,
+            onChange: a[4] || (a[4] = (t) => p(t, "day"))
           }, [
-            a[9] || (a[9] = i("option", {
+            a[9] || (a[9] = o("option", {
               disabled: "",
               selected: "",
               value: ""
             }, "日", -1)),
-            (s(!0), d(p, null, g(D.value, (t) => (s(), d("option", {
+            (s(!0), d(h, null, $(R.value, (t) => (s(), d("option", {
               key: t.value,
               value: t.value
-            }, h(t.label), 9, K))), 128))
-          ], 40, J),
-          y(b)
-        ], 2)) : A("", !0),
-        y(H, {
+            }, B(t.label), 9, w))), 128))
+          ], 40, Z),
+          c(C)
+        ], 2)) : Y("", !0),
+        i.ariaLabelledBy ? (s(), d("span", {
+          key: 1,
+          class: u(e.$style.unit_labels)
+        }, [
+          o("span", {
+            id: `${k(m)}_年`
+          }, "の年", 8, _),
+          o("span", {
+            id: `${k(m)}_月`
+          }, "の月", 8, ee),
+          o("span", {
+            id: `${k(m)}_日`
+          }, "の日", 8, te)
+        ], 2)) : Y("", !0),
+        c(G, {
           text: "削除",
           variant: "caution",
           class: u(e.$style.delete_button),
@@ -170,5 +190,5 @@ const L = ["value", "name", "aria-label", "required"], P = ["value"], U = ["valu
   }
 });
 export {
-  ee as default
+  de as default
 };

package/dist/components/DateSelector.vue3.js

@@ -1,13 +1,15 @@
-const e = "_date_selector_kckhg_1", t = "_selector_wrapper_kckhg_11", _ = "_year_kckhg_37", r = "_delete_button_kckhg_41", c = {
-  date_selector: e,
-  selector_wrapper: t,
-  year: _,
-  delete_button: r
+const e = "_unit_labels_pa04y_1", t = "_date_selector_pa04y_13", _ = "_selector_wrapper_pa04y_23", a = "_year_pa04y_49", l = "_delete_button_pa04y_53", s = {
+  unit_labels: e,
+  date_selector: t,
+  selector_wrapper: _,
+  year: a,
+  delete_button: l
 };
 export {
-  e as date_selector,
-  c as default,
-  r as delete_button,
-  t as selector_wrapper,
-  _ as year
+  t as date_selector,
+  s as default,
+  l as delete_button,
+  _ as selector_wrapper,
+  e as unit_labels,
+  a as year
 };

package/dist/components/LabeledCheckbox.vue3.js

@@ -1,4 +1,4 @@
-const e = "_labeled_check_box_ck3yh_1", l = "_label_ck3yh_1", _ = {
+const e = "_labeled_check_box_1y15f_1", l = "_label_1y15f_1", _ = {
   labeled_check_box: e,
   label: l
 };

package/dist/components/ModalBox.vue2.js

@@ -1,8 +1,8 @@
-import { defineComponent as v, ref as g, watch as $, nextTick as C, computed as L, onMounted as E, onBeforeUnmount as B, openBlock as i, createElementBlock as r, normalizeClass as o, withModifiers as I, createElementVNode as d, unref as k, renderSlot as c, createCommentVNode as w, createVNode as z } from "vue";
-import { createScrollLock as M } from "@geckou/ui-core";
-import N from "./Icon/CloseIcon.vue.js";
-import { nextUniqueId as V } from "../scripts/unique-id.js";
-const q = ["aria-hidden", "inert"], U = ["aria-labelledby", "aria-label"], D = ["id"], G = /* @__PURE__ */ v({
+import { defineComponent as p, ref as g, watch as $, nextTick as C, computed as E, onMounted as L, onBeforeUnmount as B, openBlock as i, createElementBlock as d, normalizeClass as o, withModifiers as I, createElementVNode as c, unref as k, renderSlot as u, createCommentVNode as w, createVNode as z } from "vue";
+import { createScrollLock as M, handleTabKey as N } from "@geckou/ui-core";
+import V from "./Icon/CloseIcon.vue.js";
+import { nextUniqueId as q } from "../scripts/unique-id.js";
+const K = ["aria-hidden", "inert"], T = ["aria-labelledby", "aria-label"], U = ["id"], H = /* @__PURE__ */ p({
   __name: "ModalBox",
   props: {
     isShown: { type: Boolean },
@@ -11,7 +11,7 @@ const q = ["aria-hidden", "inert"], U = ["aria-labelledby", "aria-label"], D = [
   },
   emits: ["close"],
   setup(n, { emit: b }) {
-    const t = n, u = V("modal_header"), m = g(null), S = b, f = M(), h = (e) => f.toggle(e), s = () => S("close");
+    const t = n, m = q("modal_header"), s = g(null), v = b, f = M(), h = (e) => f.toggle(e), a = () => v("close");
     $(
       () => t.isShown,
       (e) => h(e)
@@ -20,66 +20,72 @@ const q = ["aria-hidden", "inert"], U = ["aria-labelledby", "aria-label"], D = [
     $(
       () => t.isShown,
       async (e) => {
-        var a;
+        var r;
         if (!e) {
           l == null || l.focus(), l = null;
           return;
         }
-        l = typeof document > "u" ? null : document.activeElement, await C(), (a = m.value) == null || a.focus();
+        l = typeof document > "u" ? null : document.activeElement, await C(), (r = s.value) == null || r.focus();
       }
     );
-    const p = L(() => !t.isShown || void 0), y = (e) => {
-      t.isShown && e.key === "Escape" && s();
+    const S = E(() => !t.isShown || void 0), y = (e) => {
+      if (t.isShown) {
+        if (e.key === "Escape") {
+          a();
+          return;
+        }
+        N(s.value, e, document.activeElement);
+      }
     };
-    return E(() => {
+    return L(() => {
       h(t.isShown), document.addEventListener("keydown", y);
     }), B(() => {
       f.release(), document.removeEventListener("keydown", y);
-    }), (e, a) => (i(), r("div", {
+    }), (e, r) => (i(), d("div", {
       class: o([e.$style.overlay, { [e.$style.display]: n.isShown }]),
       "aria-hidden": !n.isShown,
-      inert: p.value,
-      onClick: I(s, ["self"])
+      inert: S.value,
+      onClick: I(a, ["self"])
     }, [
-      d("div", {
+      c("div", {
         ref_key: "dialog",
-        ref: m,
+        ref: s,
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": e.$slots.header ? k(u) : void 0,
+        "aria-labelledby": e.$slots.header ? k(m) : void 0,
         "aria-label": e.$slots.header ? void 0 : n.ariaLabel ?? "ダイアログ",
         tabindex: -1,
         class: o([e.$style.container, e.$style[n.size ?? "medium"]])
       }, [
-        e.$slots.header ? (i(), r("header", {
+        e.$slots.header ? (i(), d("header", {
           key: 0,
-          id: k(u),
+          id: k(m),
           class: o(e.$style.header)
         }, [
-          c(e.$slots, "header")
-        ], 10, D)) : w("", !0),
-        d("div", {
+          u(e.$slots, "header")
+        ], 10, U)) : w("", !0),
+        c("div", {
           class: o(e.$style.contents)
         }, [
-          c(e.$slots, "default")
+          u(e.$slots, "default")
         ], 2),
-        e.$slots.footer ? (i(), r("footer", {
+        e.$slots.footer ? (i(), d("footer", {
           key: 1,
           class: o(e.$style.footer)
         }, [
-          c(e.$slots, "footer")
+          u(e.$slots, "footer")
         ], 2)) : w("", !0),
-        d("button", {
+        c("button", {
           type: "button",
           class: o(e.$style.close_button),
-          onClick: s
+          onClick: a
         }, [
-          z(N)
+          z(V)
         ], 2)
-      ], 10, U)
-    ], 10, q));
+      ], 10, T)
+    ], 10, K));
   }
 });
 export {
-  G as default
+  H as default
 };

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

@@ -22,5 +22,5 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     label: Record<"on" | "off", string>;
     ariaLabel: string;
     ariaLabelledBy: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/ToggleButton.vue2.js

@@ -1,6 +1,7 @@
-import { defineComponent as w, computed as r, openBlock as L, createElementBlock as z, normalizeClass as s, normalizeStyle as B, withModifiers as V, withDirectives as $, createElementVNode as b, vModelCheckbox as S } from "vue";
+import { defineComponent as w, computed as r, openBlock as v, createElementBlock as k, Fragment as B, createElementVNode as s, mergeProps as z, withModifiers as $, normalizeClass as C, createCommentVNode as V } from "vue";
 import { COLOR as l } from "@geckou/ui-core";
-const G = ["disabled", "aria-checked", "aria-labelledby", "aria-label"], O = ["name", "disabled"], p = ["data-on", "data-off"], M = /* @__PURE__ */ w({
+const G = ["disabled", "data-checked", "aria-checked", "aria-labelledby", "aria-label"], O = ["data-on", "data-off"], S = ["name", "disabled"], E = /* @__PURE__ */ w({
+  inheritAttrs: !1,
   __name: "ToggleButton",
   props: {
     name: {},
@@ -12,11 +13,11 @@ const G = ["disabled", "aria-checked", "aria-labelledby", "aria-label"], O = ["n
     ariaLabelledBy: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(o, { emit: x }) {
-    const C = x, a = o, d = r({
+  setup(o, { emit: D }) {
+    const x = D, a = o, d = r({
       get: () => a.modelValue ?? !1,
-      set: (e) => C("update:modelValue", e)
-    }), D = r(() => {
+      set: (e) => x("update:modelValue", e)
+    }), L = r(() => {
       const e = a.label.on.length, t = a.label.off.length;
       return e > t ? e : t;
     }), i = r(() => {
@@ -48,47 +49,48 @@ const G = ["disabled", "aria-checked", "aria-labelledby", "aria-label"], O = ["n
       }[d.value ? "on" : "off"];
     });
     return (e, t) => {
-      var n, u, c, f, m, y, h, g, v;
-      return L(), z("button", {
-        class: s(e.$style.toggle_button),
-        style: B({
-          "--text-color": (n = i.value) == null ? void 0 : n.textColor,
-          "--border-color": (c = (u = i.value) == null ? void 0 : u.border) == null ? void 0 : c.color,
-          "--border-size": (m = (f = i.value) == null ? void 0 : f.border) == null ? void 0 : m.size,
-          "--radius-size": (h = (y = i.value) == null ? void 0 : y.border) == null ? void 0 : h.radius,
-          "--background-color": (g = i.value) == null ? void 0 : g.backgroundColor,
-          "--box-shadow": (v = i.value) == null ? void 0 : v.boxShadow,
-          "--inline-size": `${D.value * 2}ch`
-        }),
-        type: "button",
-        disabled: o.isDisabled,
-        role: "switch",
-        "aria-checked": d.value,
-        "aria-labelledby": o.ariaLabelledBy,
-        "aria-label": o.ariaLabelledBy ? void 0 : o.ariaLabel ?? o.name,
-        onClick: t[1] || (t[1] = V((k) => o.isDisabled ? null : d.value = !d.value, ["stop"]))
-      }, [
-        $(b("input", {
-          "onUpdate:modelValue": t[0] || (t[0] = (k) => d.value = k),
-          type: "checkbox",
-          tabindex: "-1",
+      var n, u, b, c, f, m, h, g, y;
+      return v(), k(B, null, [
+        s("button", z(e.$attrs, {
+          class: e.$style.toggle_button,
+          style: {
+            "--text-color": (n = i.value) == null ? void 0 : n.textColor,
+            "--border-color": (b = (u = i.value) == null ? void 0 : u.border) == null ? void 0 : b.color,
+            "--border-size": (f = (c = i.value) == null ? void 0 : c.border) == null ? void 0 : f.size,
+            "--radius-size": (h = (m = i.value) == null ? void 0 : m.border) == null ? void 0 : h.radius,
+            "--background-color": (g = i.value) == null ? void 0 : g.backgroundColor,
+            "--box-shadow": (y = i.value) == null ? void 0 : y.boxShadow,
+            "--inline-size": `${L.value * 2}ch`
+          },
+          type: "button",
+          disabled: o.isDisabled,
+          role: "switch",
+          "data-checked": d.value,
+          "aria-checked": d.value,
+          "aria-labelledby": o.ariaLabelledBy,
+          "aria-label": o.ariaLabelledBy ? void 0 : o.ariaLabel ?? o.name,
+          onClick: t[0] || (t[0] = $((F) => o.isDisabled ? null : d.value = !d.value, ["stop"]))
+        }), [
+          s("div", {
+            class: C([e.$style.text, { [e.$style.on]: d.value }]),
+            "data-on": o.label.on,
+            "data-off": o.label.off
+          }, null, 10, O),
+          s("div", {
+            class: C(e.$style.handle)
+          }, null, 2)
+        ], 16, G),
+        d.value ? (v(), k("input", {
+          key: 0,
+          type: "hidden",
           name: o.name,
+          value: "on",
           disabled: o.isDisabled
-        }, null, 8, O), [
-          [S, d.value]
-        ]),
-        b("div", {
-          class: s([e.$style.text, { [e.$style.on]: d.value }]),
-          "data-on": o.label.on,
-          "data-off": o.label.off
-        }, null, 10, p),
-        b("div", {
-          class: s(e.$style.handle)
-        }, null, 2)
-      ], 14, G);
+        }, null, 8, S)) : V("", !0)
+      ], 64);
     };
   }
 });
 export {
-  M as default
+  E as default
 };

package/dist/components/ToggleButton.vue3.js

@@ -1,4 +1,4 @@
-const t = "_toggle_button_1phgw_1", o = "_text_1phgw_27", _ = "_on_1phgw_56", n = "_handle_1phgw_62", e = {
+const t = "_toggle_button_tkkkr_1", o = "_text_tkkkr_16", _ = "_on_tkkkr_45", n = "_handle_tkkkr_51", e = {
   toggle_button: t,
   text: o,
   on: _,