@geckou/ui-vue 0.5.0 → 0.6.0

package/dist/components/CheckBox.vue2.js

@@ -0,0 +1,76 @@
+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 { COLOR as t } from "@geckou/ui-core";
+const A = ["aria-checked", "aria-labelledby", "aria-label"], E = ["name", "value", "disabled"], I = /* @__PURE__ */ x({
+  __name: "CheckBox",
+  props: {
+    name: {},
+    value: { default: void 0 },
+    modelValue: { type: Boolean },
+    isDisabled: { type: Boolean },
+    cssStyle: { default: void 0 },
+    isDisableAnimation: { type: Boolean },
+    ariaLabel: { default: void 0 },
+    ariaLabelledBy: { default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: B }) {
+    const D = B, l = e, i = 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;
+      return {
+        textColor: l.isDisabled ? t.darkGray : t.blue,
+        backgroundColor: l.isDisabled ? t.lightGray : t.white,
+        border: {
+          color: l.isDisabled ? t.darkGray : t.blue,
+          size: "1px",
+          radius: ".25rem"
+        },
+        ...a
+      };
+    });
+    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",
+          name: e.name,
+          value: e.value,
+          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);
+    };
+  }
+});
+export {
+  I as default
+};

package/dist/components/CheckBox.vue3.js

@@ -0,0 +1,11 @@
+const c = "_check_box_1956i_15", _ = "_pop_1956i_1", o = "_check_container_1956i_53", e = {
+  check_box: c,
+  pop: _,
+  check_container: o
+};
+export {
+  c as check_box,
+  o as check_container,
+  e as default,
+  _ as pop
+};

package/dist/components/CheckBoxes.vue.js

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

package/dist/components/CheckBoxes.vue2.js

@@ -0,0 +1,104 @@
+import { defineComponent as V, ref as k, computed as E, watch as m, openBlock as i, createElementBlock as y, normalizeClass as q, Fragment as M, renderList as x, createBlock as B, createVNode as D } from "vue";
+import { COLOR as v, MESSAGES as _ } from "@geckou/ui-core";
+import A from "./LabeledCheckbox.vue.js";
+import L from "./ErrorMessage.vue.js";
+const F = /* @__PURE__ */ V({
+  __name: "CheckBoxes",
+  props: {
+    name: {},
+    options: {},
+    modelValue: { default: void 0 },
+    isDisabled: { type: Boolean },
+    isRequired: { type: Boolean },
+    cssStyle: { default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(p, { emit: g }) {
+    var b, f;
+    const S = g, a = p, s = k(
+      a.options.map((e) => {
+        var r;
+        return {
+          value: e.value,
+          label: e.label,
+          checked: ((r = a.modelValue) == null ? void 0 : r.includes(e.value)) || !1
+        };
+      })
+    ), c = E(
+      () => s.value.filter((e) => e.checked).map((e) => e.value)
+    ), n = k(""), C = () => n.value = a.isRequired && c.value.length === 0 ? _.required : "";
+    m(
+      c,
+      (e, r) => {
+        r && ((l, u) => l.length === u.length && l.every((o, d) => o === u[d]))(e, r) || (C(), S("update:modelValue", e));
+      },
+      {
+        deep: !0,
+        immediate: !!((b = a.modelValue) != null && b.length)
+      }
+    ), m(
+      () => a.modelValue,
+      (e) => {
+        e && s.value.forEach(
+          (r) => r.checked = e.includes(r.value)
+        );
+      },
+      {
+        deep: !0,
+        immediate: !0
+      }
+    ), m(
+      () => a.options,
+      (e) => {
+        if (e.length === s.value.length && e.every(
+          (l, u) => {
+            var o, d;
+            return l.value === ((o = s.value[u]) == null ? void 0 : o.value) && l.label === ((d = s.value[u]) == null ? void 0 : d.label);
+          }
+        ))
+          return;
+        const t = new Set(c.value);
+        s.value = e.map((l) => ({
+          value: l.value,
+          label: l.label,
+          checked: a.modelValue ? a.modelValue.includes(l.value) : t.has(l.value)
+        }));
+      },
+      { deep: !0 }
+    );
+    const h = {
+      ...((f = a.cssStyle) == null ? void 0 : f.error) ?? {},
+      textColor: v.white,
+      backgroundColor: v.red,
+      border: {
+        color: v.red,
+        size: "1px",
+        radius: ".25rem"
+      }
+    };
+    return (e, r) => (i(), y("div", {
+      class: q(e.$style.check_boxes)
+    }, [
+      (i(!0), y(M, null, x(s.value, (t, l) => (i(), B(A, {
+        key: t.value,
+        modelValue: s.value[l].checked,
+        "onUpdate:modelValue": (u) => s.value[l].checked = u,
+        name: p.name,
+        value: t.value,
+        label: t.label,
+        isDisabled: a.isDisabled,
+        cssStyle: a.cssStyle
+      }, null, 8, ["modelValue", "onUpdate:modelValue", "name", "value", "label", "isDisabled", "cssStyle"]))), 128)),
+      D(L, {
+        errorMessages: n.value ? [n.value] : [],
+        cssStyle: {
+          textColor: h.textColor,
+          backgroundColor: h.backgroundColor
+        }
+      }, null, 8, ["errorMessages", "cssStyle"])
+    ], 2));
+  }
+});
+export {
+  F as default
+};

package/dist/components/CheckBoxes.vue3.js

@@ -0,0 +1,7 @@
+const c = "_check_boxes_1cn70_1", e = {
+  check_boxes: c
+};
+export {
+  c as check_boxes,
+  e as default
+};

package/dist/components/CheckButton.vue.js

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

package/dist/components/CheckButton.vue2.js

@@ -0,0 +1,54 @@
+import { defineComponent as C, ref as V, computed as B, watch as b, openBlock as k, createElementBlock as D, normalizeClass as f, normalizeStyle as S, withDirectives as z, createElementVNode as p, vModelCheckbox as $, renderSlot as g, createBlock as w, createCommentVNode as x } from "vue";
+import A from "./Icon/CheckIcon.vue.js";
+const E = ["name", "disabled"], M = /* @__PURE__ */ C({
+  __name: "CheckButton",
+  props: {
+    name: {},
+    modelValue: { type: Boolean },
+    isDisabled: { type: Boolean },
+    cssStyle: { default: () => ({ default: {} }) },
+    isDisableAnimation: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: y }) {
+    const h = y, l = o, t = V(l.modelValue ?? !1), a = B(() => l.isDisabled ? l.cssStyle.disabled : l.cssStyle.default);
+    return b(
+      () => t.value,
+      (e) => h("update:modelValue", e)
+    ), b(
+      () => l.modelValue,
+      (e) => t.value = e,
+      { immediate: !0 }
+    ), (e, s) => {
+      var r, n, i, d, c, u, m;
+      return k(), D("label", {
+        class: f(e.$style.check_box),
+        style: S({
+          "--border-color": ((n = (r = a.value) == null ? void 0 : r.border) == null ? void 0 : n.color) || "blue",
+          "--border-size": ((d = (i = a.value) == null ? void 0 : i.border) == null ? void 0 : d.size) || "1px",
+          "--radius-size": ((u = (c = a.value) == null ? void 0 : c.border) == null ? void 0 : u.radius) || "0.25rem",
+          "--background-color": ((m = a.value) == null ? void 0 : m.backgroundColor) || "#fff",
+          "--duration": o.isDisableAnimation ? "0s" : ".3s"
+        })
+      }, [
+        z(p("input", {
+          "onUpdate:modelValue": s[0] || (s[0] = (v) => t.value = v),
+          type: "checkbox",
+          name: o.name,
+          disabled: o.isDisabled
+        }, null, 8, E), [
+          [$, t.value]
+        ]),
+        p("div", {
+          class: f(e.$style.check_container)
+        }, [
+          g(e.$slots, "check"),
+          e.$slots.check ? x("", !0) : (k(), w(A, { key: 0 }))
+        ], 2)
+      ], 6);
+    };
+  }
+});
+export {
+  M as default
+};

package/dist/components/CheckButton.vue3.js

@@ -0,0 +1,11 @@
+const c = "_check_box_7lw3v_15", _ = "_pop_7lw3v_1", o = "_check_container_7lw3v_52", e = {
+  check_box: c,
+  pop: _,
+  check_container: o
+};
+export {
+  c as check_box,
+  o as check_container,
+  e as default,
+  _ as pop
+};

package/dist/components/DatePicker.vue.js

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

package/dist/components/DatePicker.vue2.js

@@ -0,0 +1,137 @@
+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({
+  __name: "DatePicker",
+  props: {
+    name: {},
+    modelValue: {},
+    isDisabled: { type: Boolean, default: !1 },
+    isRequired: { type: Boolean },
+    formValidationManager: { default: null },
+    minDate: { default: "" },
+    maxDate: { default: "" },
+    size: { default: "medium" },
+    type: { default: "date" }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: M }) {
+    const k = M, x = f(null), l = t, d = C({
+      year: "",
+      month: "",
+      day: ""
+    }), s = f(""), n = f(""), o = (e) => {
+      l.formValidationManager && l.formValidationManager.setValid(l.name, e);
+    }, y = (e) => !e && l.isRequired ? { isValid: !1, message: I.required } : { isValid: !0, message: "" }, $ = (e) => P(
+      { 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(
+      () => s.value,
+      (e) => {
+        c(e);
+        const { isValid: a, message: i } = y(e);
+        n.value = i, k("update:modelValue", e), o(a);
+      }
+    ), V(
+      () => d,
+      (e) => {
+        const { isValid: a, message: i } = $(e);
+        n.value = i, o(a), a && (s.value = q());
+      },
+      { deep: !0 }
+    );
+    const D = (e) => {
+      if (!e) {
+        s.value = "", c(""), n.value = "", o(y("").isValid);
+        return;
+      }
+      const a = T(e, l.type);
+      !a || a === s.value || (s.value = a, c(a));
+    };
+    return V(
+      () => l.modelValue,
+      (e) => D(e)
+    ), D(l.modelValue), o(y(s.value).isValid), R(() => {
+      var e;
+      return (e = l.formValidationManager) == null ? void 0 : e.remove(l.name);
+    }), (e, a) => (b(), U(w, {
+      isDisabled: t.isDisabled,
+      class: r([
+        e.$style.date_picker,
+        e.$style[t.size],
+        { [e.$style.is_disabled]: t.isDisabled }
+      ]),
+      isErrored: !!n.value
+    }, {
+      default: N(() => [
+        m("div", {
+          class: r(e.$style.date_input)
+        }, [
+          p(A, {
+            class: r(e.$style.icon)
+          }, null, 8, ["class"]),
+          u(m("input", {
+            ref_key: "datePicker",
+            ref: x,
+            "onUpdate:modelValue": a[0] || (a[0] = (i) => s.value = i),
+            type: t.type,
+            name: t.name,
+            max: t.maxDate,
+            min: t.minDate,
+            required: t.isRequired,
+            disabled: t.isDisabled
+          }, null, 8, F), [
+            [O, s.value]
+          ])
+        ], 2),
+        u(m("input", {
+          "onUpdate:modelValue": a[1] || (a[1] = (i) => d.year = i),
+          placeholder: "年",
+          "aria-label": `${t.name}の年`,
+          maxlength: "4",
+          type: "text",
+          disabled: t.isDisabled,
+          class: r(e.$style.year)
+        }, null, 10, H), [
+          [v, d.year]
+        ]),
+        a[4] || (a[4] = z("/ ", -1)),
+        u(m("input", {
+          "onUpdate:modelValue": a[2] || (a[2] = (i) => d.month = i),
+          placeholder: "月",
+          "aria-label": `${t.name}の月`,
+          maxlength: "2",
+          type: "text",
+          disabled: t.isDisabled
+        }, null, 8, J), [
+          [v, d.month]
+        ]),
+        t.type === "date" ? (b(), g("span", K, "/")) : h("", !0),
+        t.type === "date" ? u((b(), g("input", {
+          key: 1,
+          "onUpdate:modelValue": a[3] || (a[3] = (i) => d.day = i),
+          placeholder: "日",
+          "aria-label": `${t.name}の日`,
+          maxlength: "2",
+          type: "text",
+          disabled: t.isDisabled
+        }, null, 8, L)), [
+          [v, d.day]
+        ]) : h("", !0),
+        p(G, {
+          errorMessages: n.value ? [n.value] : []
+        }, null, 8, ["errorMessages"])
+      ]),
+      _: 1
+    }, 8, ["isDisabled", "class", "isErrored"]));
+  }
+});
+export {
+  _ as default
+};

package/dist/components/DatePicker.vue3.js

@@ -0,0 +1,15 @@
+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
+};
+export {
+  t as date_input,
+  e as date_picker,
+  n as default,
+  _ as icon,
+  c as small,
+  a as year
+};

package/dist/components/DateRangePicker.vue.js

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

package/dist/components/DateRangePicker.vue2.js

@@ -0,0 +1,74 @@
+import { defineComponent as R, computed as i, watch as z, onBeforeUnmount as E, openBlock as b, createElementBlock as q, normalizeClass as c, createVNode as r, createElementVNode as x, unref as k } from "vue";
+import { MESSAGES as B } from "@geckou/ui-core";
+import g from "./DatePicker.vue.js";
+import S from "./ErrorMessage.vue.js";
+const A = /* @__PURE__ */ R({
+  __name: "DateRangePicker",
+  props: {
+    name: {},
+    modelValue: { default: () => ({ start: "", end: "" }) },
+    isDisabled: { type: Boolean, default: !1 },
+    isRequired: { type: Boolean, default: !1 },
+    formValidationManager: { default: null },
+    minDate: { default: "" },
+    maxDate: { default: "" },
+    size: { default: "medium" },
+    type: { default: "date" }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: M }) {
+    const u = M, t = e, l = i(() => t.modelValue.start), n = i(() => t.modelValue.end), s = i(
+      () => !(l.value && n.value && l.value > n.value)
+    ), f = i(() => `${t.name}Range`);
+    z(
+      [s, f],
+      ([a, d], m) => {
+        var V, D;
+        const o = m == null ? void 0 : m[1];
+        o && o !== d && ((V = t.formValidationManager) == null || V.remove(o)), (D = t.formValidationManager) == null || D.setValid(d, a);
+      },
+      { immediate: !0 }
+    ), E(() => {
+      var a;
+      return (a = t.formValidationManager) == null ? void 0 : a.remove(f.value);
+    });
+    const v = (a) => u("update:modelValue", { start: a ?? "", end: n.value }), y = (a) => u("update:modelValue", { start: l.value, end: a ?? "" });
+    return (a, d) => (b(), q("div", {
+      class: c(a.$style.date_range_picker)
+    }, [
+      r(g, {
+        name: `${e.name}Start`,
+        modelValue: l.value,
+        isDisabled: e.isDisabled,
+        isRequired: e.isRequired,
+        formValidationManager: e.formValidationManager,
+        minDate: e.minDate,
+        maxDate: n.value || e.maxDate,
+        size: e.size,
+        type: e.type,
+        "onUpdate:modelValue": v
+      }, null, 8, ["name", "modelValue", "isDisabled", "isRequired", "formValidationManager", "minDate", "maxDate", "size", "type"]),
+      x("div", {
+        class: c(a.$style.range)
+      }, "〜", 2),
+      r(g, {
+        name: `${e.name}End`,
+        modelValue: n.value,
+        isDisabled: e.isDisabled,
+        isRequired: e.isRequired,
+        formValidationManager: e.formValidationManager,
+        minDate: l.value || e.minDate,
+        maxDate: e.maxDate,
+        size: e.size,
+        type: e.type,
+        "onUpdate:modelValue": y
+      }, null, 8, ["name", "modelValue", "isDisabled", "isRequired", "formValidationManager", "minDate", "maxDate", "size", "type"]),
+      r(S, {
+        errorMessages: s.value ? void 0 : [k(B).startAfterEnd]
+      }, null, 8, ["errorMessages"])
+    ], 2));
+  }
+});
+export {
+  A as default
+};

package/dist/components/DateRangePicker.vue3.js

@@ -0,0 +1,9 @@
+const e = "_date_range_picker_797j1_1", _ = "_range_797j1_9", a = {
+  date_range_picker: e,
+  range: _
+};
+export {
+  e as date_range_picker,
+  a as default,
+  _ as range
+};

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

@@ -5,6 +5,9 @@ type __VLS_Props = {
     isRequired?: boolean;
     formValidationManager?: FormValidationManager | null;
     type?: 'date' | 'month';
+    /** 選べる年の下限・上限。既定は「今年 -100 〜 今年 -14」（生年月日向け） */
+    minYear?: number;
+    maxYear?: number;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (newValue: string) => any;
@@ -13,5 +16,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }>, {
     type: "date" | "month";
     formValidationManager: FormValidationManager | null;
+    minYear: number;
+    maxYear: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/DateSelector.vue.js

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