@geckou/ui-vue 0.4.0 → 0.6.0

package/dist/components/TabUI.vue2.js

@@ -0,0 +1,77 @@
+import { defineComponent as L, ref as h, openBlock as a, createElementBlock as s, createElementVNode as S, normalizeClass as p, normalizeStyle as T, unref as A, Fragment as y, renderList as I, renderSlot as g, createTextVNode as D, toDisplayString as N, createCommentVNode as R, withDirectives as V, vShow as z } from "vue";
+import { COLOR as B } from "@geckou/ui-core";
+import { nextUniqueId as E } from "../scripts/unique-id.js";
+const K = ["id", "aria-controls", "aria-selected", "tabindex", "onClick"], O = ["id", "aria-labelledby"], _ = /* @__PURE__ */ L({
+  __name: "TabUI",
+  props: {
+    tabs: {},
+    color: { default: void 0 },
+    initialIndex: { default: 0 }
+  },
+  setup(l) {
+    const r = l, k = E("tabs"), f = (e) => `${k}_tab_${e}`, b = (e) => `${k}_panel_${e}`, d = r.tabs[r.initialIndex] ?? r.tabs[0], o = h((d == null ? void 0 : d.key) ?? ""), v = h([]), w = (e) => o.value = e, m = (e) => {
+      var n;
+      o.value = r.tabs[e].key, (n = v.value[e]) == null || n.focus();
+    }, x = (e) => {
+      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
+        return;
+      const n = r.tabs.findIndex(
+        (c) => c.key === o.value
+      );
+      if (n === -1)
+        return;
+      e.preventDefault();
+      const i = r.tabs.length - 1;
+      e.key === "ArrowLeft" ? m(n > 0 ? n - 1 : i) : m(n < i ? n + 1 : 0);
+    };
+    return (e, n) => {
+      var i, c, $;
+      return a(), s("div", null, [
+        S("div", {
+          class: p(e.$style.tabs),
+          style: T({
+            "--active-color": ((i = l.color) == null ? void 0 : i.active) || A(B).blue,
+            "--background-color": ((c = l.color) == null ? void 0 : c.background) || "transparent",
+            "--text-color": (($ = l.color) == null ? void 0 : $.text) || "inherit"
+          }),
+          role: "tablist",
+          onKeydown: x
+        }, [
+          (a(!0), s(y, null, I(l.tabs, (t, C) => (a(), s("button", {
+            id: f(t.key),
+            key: t.key,
+            ref_for: !0,
+            ref: (u) => {
+              u && (v.value[C] = u);
+            },
+            type: "button",
+            role: "tab",
+            "aria-controls": b(t.key),
+            "aria-selected": o.value === t.key,
+            tabindex: o.value === t.key ? 0 : -1,
+            class: p({ [e.$style.active]: o.value === t.key }),
+            onClick: (u) => w(t.key)
+          }, [
+            g(e.$slots, t.key),
+            e.$slots[t.key] ? R("", !0) : (a(), s(y, { key: 0 }, [
+              D(N(t.label), 1)
+            ], 64))
+          ], 10, K))), 128))
+        ], 38),
+        (a(!0), s(y, null, I(l.tabs, (t) => V((a(), s("div", {
+          id: b(t.key),
+          key: `${t.key}_panel`,
+          role: "tabpanel",
+          "aria-labelledby": f(t.key)
+        }, [
+          g(e.$slots, `${t.key}Contents`)
+        ], 8, O)), [
+          [z, o.value === t.key]
+        ])), 128))
+      ]);
+    };
+  }
+});
+export {
+  _ as default
+};

package/dist/components/TabUI.vue3.js

@@ -0,0 +1,9 @@
+const t = "_tabs_bthfs_1", s = "_active_bthfs_13", a = {
+  tabs: t,
+  active: s
+};
+export {
+  s as active,
+  a as default,
+  t as tabs
+};

package/dist/components/TextArea.vue.js

@@ -0,0 +1,9 @@
+import s from "./TextArea.vue2.js";
+import o from "./TextArea.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/TextArea.vue2.js

@@ -0,0 +1,82 @@
+import { defineComponent as x, computed as y, ref as v, onMounted as V, watch as p, openBlock as b, createBlock as S, normalizeClass as w, withCtx as B, withDirectives as C, createElementVNode as k, vModelText as q, createVNode as D, nextTick as M } from "vue";
+import { isEmptyValue as R, validateInputValue as E } from "@geckou/ui-core";
+import H from "./InputBox.vue.js";
+import T from "./ErrorMessage.vue.js";
+const j = ["name", "required", "placeholder", "disabled", "autocomplete", "rows", "maxlength", "aria-invalid"], N = /* @__PURE__ */ x({
+  __name: "TextArea",
+  props: {
+    name: {},
+    modelValue: { default: void 0 },
+    cssStyle: { default: void 0 },
+    placeholder: { default: "入力してください" },
+    isDisabled: { type: Boolean, default: !1 },
+    isRequired: { type: Boolean, default: !1 },
+    rows: { default: void 0 },
+    maxLength: { default: 100 },
+    autocomplete: { default: "off" },
+    validates: { default: () => [] },
+    autoAdjustHeight: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: h }) {
+    const g = h, t = e, l = y({
+      get: () => t.modelValue ?? "",
+      set: (r) => g("update:modelValue", r)
+    }), o = v([]), a = v(null), u = () => {
+      o.value = E(l.value, {
+        isRequired: t.isRequired,
+        validates: t.validates
+      });
+    }, d = () => {
+      t.autoAdjustHeight && M(() => {
+        a.value && (a.value.style.height = "auto", a.value.style.height = `calc(${a.value.scrollHeight}px - 2rem)`);
+      });
+    };
+    return V(d), p(
+      l,
+      () => {
+        u(), d();
+      },
+      // 数値 0 も初期値として扱うため truthy 判定は使わない
+      { immediate: !R(t.modelValue), flush: "post" }
+    ), (r, s) => (b(), S(H, {
+      cssStyle: e.cssStyle,
+      class: w(r.$style.text_area),
+      isErrored: !!o.value.length,
+      isDisabled: e.isDisabled
+    }, {
+      default: B(() => {
+        var i, n, m, c;
+        return [
+          C(k("textarea", {
+            ref_key: "textareaRef",
+            ref: a,
+            "onUpdate:modelValue": s[0] || (s[0] = (f) => l.value = f),
+            name: e.name,
+            required: e.isRequired,
+            placeholder: e.placeholder,
+            disabled: e.isDisabled,
+            autocomplete: e.autocomplete,
+            rows: e.rows,
+            maxlength: e.maxLength,
+            "aria-invalid": o.value.length ? "true" : void 0,
+            onBlur: s[1] || (s[1] = (f) => u())
+          }, null, 40, j), [
+            [q, l.value]
+          ]),
+          D(T, {
+            errorMessages: o.value,
+            cssStyle: {
+              textColor: (n = (i = e.cssStyle) == null ? void 0 : i.error) == null ? void 0 : n.backgroundColor,
+              backgroundColor: (c = (m = e.cssStyle) == null ? void 0 : m.error) == null ? void 0 : c.textColor
+            }
+          }, null, 8, ["errorMessages", "cssStyle"])
+        ];
+      }),
+      _: 1
+    }, 8, ["cssStyle", "class", "isErrored", "isDisabled"]));
+  }
+});
+export {
+  N as default
+};

package/dist/components/TextArea.vue3.js

@@ -0,0 +1,7 @@
+const t = "_text_area_1f3te_2", e = {
+  text_area: t
+};
+export {
+  e as default,
+  t as text_area
+};

package/dist/components/TextBox.vue.js

@@ -0,0 +1,9 @@
+import o from "./TextBox.vue2.js";
+import s from "./TextBox.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/TextBox.vue2.js

@@ -0,0 +1,76 @@
+import { defineComponent as y, ref as p, computed as g, watch as h, openBlock as b, createBlock as x, normalizeClass as V, withCtx as S, renderSlot as c, withDirectives as B, createElementVNode as C, vModelDynamic as D, createVNode as q } from "vue";
+import { convertFullWidthToHalfWidth as E, isEmptyValue as M, validateInputValue as k } from "@geckou/ui-core";
+import R from "./InputBox.vue.js";
+import T from "./ErrorMessage.vue.js";
+const $ = ["type", "name", "required", "placeholder", "disabled", "autocomplete", "maxlength", "aria-invalid"], w = /* @__PURE__ */ y({
+  __name: "TextBox",
+  props: {
+    name: {},
+    modelValue: { default: void 0 },
+    cssStyle: { default: void 0 },
+    inputType: { default: "text" },
+    placeholder: { default: "入力してください" },
+    isDisabled: { type: Boolean },
+    isRequired: { type: Boolean },
+    maxLength: { default: 30 },
+    autocomplete: { default: "off" },
+    validates: { default: () => [] }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: f }) {
+    const v = f, a = e, o = p([]), s = g({
+      get: () => a.modelValue ?? "",
+      set: (t) => {
+        const l = typeof t == "number" ? t : E(String(t));
+        v("update:modelValue", l);
+      }
+    }), d = () => {
+      o.value = k(s.value, {
+        isRequired: a.isRequired,
+        validates: a.validates
+      });
+    };
+    return h(s, () => d(), {
+      immediate: !M(a.modelValue),
+      flush: "post"
+    }), (t, l) => (b(), x(R, {
+      cssStyle: e.cssStyle,
+      class: V(t.$style.text_box),
+      isErrored: !!o.value.length,
+      isDisabled: e.isDisabled
+    }, {
+      default: S(() => {
+        var i, r, u, n;
+        return [
+          c(t.$slots, "before"),
+          B(C("input", {
+            "onUpdate:modelValue": l[0] || (l[0] = (m) => s.value = m),
+            type: e.inputType,
+            name: e.name,
+            required: e.isRequired,
+            placeholder: e.placeholder,
+            disabled: e.isDisabled,
+            autocomplete: e.autocomplete,
+            maxlength: e.maxLength,
+            "aria-invalid": o.value.length ? "true" : void 0,
+            onBlur: l[1] || (l[1] = (m) => d())
+          }, null, 40, $), [
+            [D, s.value]
+          ]),
+          c(t.$slots, "after"),
+          q(T, {
+            errorMessages: o.value,
+            cssStyle: {
+              textColor: (r = (i = e.cssStyle) == null ? void 0 : i.error) == null ? void 0 : r.backgroundColor,
+              backgroundColor: (n = (u = e.cssStyle) == null ? void 0 : u.error) == null ? void 0 : n.textColor
+            }
+          }, null, 8, ["errorMessages", "cssStyle"])
+        ];
+      }),
+      _: 3
+    }, 8, ["cssStyle", "class", "isErrored", "isDisabled"]));
+  }
+});
+export {
+  w as default
+};

package/dist/components/TextBox.vue3.js

@@ -0,0 +1,7 @@
+const t = "_text_box_dqty_1", x = {
+  text_box: t
+};
+export {
+  x as default,
+  t as text_box
+};

package/dist/components/TextButton.vue.js

@@ -0,0 +1,9 @@
+import o from "./TextButton.vue2.js";
+import s from "./TextButton.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/TextButton.vue2.js

@@ -0,0 +1,24 @@
+import { defineComponent as l, computed as n, openBlock as s, createElementBlock as r, normalizeClass as i, normalizeStyle as c, toDisplayString as u } from "vue";
+import { COLOR as d } from "@geckou/ui-core";
+const m = ["disabled"], x = /* @__PURE__ */ l({
+  __name: "TextButton",
+  props: {
+    text: {},
+    variant: { default: "default" },
+    isDisabled: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const e = t, o = n(
+      () => e.variant === "caution" ? d.red : "var(--link-color)"
+    );
+    return (a, p) => (s(), r("button", {
+      type: "button",
+      class: i(a.$style.text_button),
+      disabled: t.isDisabled,
+      style: c({ "--text-button-color": o.value })
+    }, u(t.text), 15, m));
+  }
+});
+export {
+  x as default
+};

package/dist/components/TextButton.vue3.js

@@ -0,0 +1,7 @@
+const t = "_text_button_awtwg_1", e = {
+  text_button: t
+};
+export {
+  e as default,
+  t as text_button
+};

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

@@ -1,23 +1,26 @@
-import { StateVariation, BaseStyle } from '../types';
+import { BaseStyle, StyleForEachStatus } from '../types';
+type ToggleStyle = {
+    on: BaseStyle;
+    off: BaseStyle;
+};
 type __VLS_Props = {
     name: string;
     label?: Record<'on' | 'off', string>;
     modelValue?: boolean;
     isDisabled?: boolean;
-    cssStyle?: Record<StateVariation, {
-        on: BaseStyle;
-        off: BaseStyle;
-    }>;
+    cssStyle?: StyleForEachStatus<ToggleStyle>;
+    /** アクセシブル名。可視ラベルがあるなら ariaLabelledBy でその要素を指すこと */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (newValue: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((newValue: boolean) => any) | undefined;
 }>, {
-    cssStyle: Record<StateVariation, {
-        on: BaseStyle;
-        off: BaseStyle;
-    }>;
+    cssStyle: StyleForEachStatus<ToggleStyle>;
     label: Record<"on" | "off", string>;
+    ariaLabel: string;
+    ariaLabelledBy: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
 export default _default;

package/dist/components/ToggleButton.vue.js

@@ -0,0 +1,9 @@
+import o from "./ToggleButton.vue2.js";
+import s from "./ToggleButton.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/ToggleButton.vue2.js

@@ -0,0 +1,94 @@
+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 { 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({
+  __name: "ToggleButton",
+  props: {
+    name: {},
+    label: { default: () => ({ on: "ON", off: "OFF" }) },
+    modelValue: { type: Boolean },
+    isDisabled: { type: Boolean },
+    cssStyle: { default: void 0 },
+    ariaLabel: { default: void 0 },
+    ariaLabelledBy: { default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: x }) {
+    const C = x, a = o, d = r({
+      get: () => a.modelValue ?? !1,
+      set: (e) => C("update:modelValue", e)
+    }), D = r(() => {
+      const e = a.label.on.length, t = a.label.off.length;
+      return e > t ? e : t;
+    }), i = r(() => {
+      var t, n;
+      const e = a.isDisabled ? (t = a.cssStyle) == null ? void 0 : t.disabled : (n = a.cssStyle) == null ? void 0 : n.default;
+      return {
+        on: {
+          textColor: a.isDisabled ? l.lightGray : l.white,
+          backgroundColor: a.isDisabled ? l.gray : l.blue,
+          border: {
+            color: a.isDisabled ? l.gray : l.blue,
+            size: "1px",
+            radius: ".25rem"
+          },
+          boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
+          ...e == null ? void 0 : e.on
+        },
+        off: {
+          textColor: a.isDisabled ? l.gray : l.white,
+          backgroundColor: a.isDisabled ? l.lightGray : l.darkGray,
+          border: {
+            color: a.isDisabled ? l.gray : l.darkGray,
+            size: "1px",
+            radius: ".25rem"
+          },
+          boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
+          ...e == null ? void 0 : e.off
+        }
+      }[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",
+          name: o.name,
+          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);
+    };
+  }
+});
+export {
+  M as default
+};

package/dist/components/ToggleButton.vue3.js

@@ -0,0 +1,13 @@
+const t = "_toggle_button_1phgw_1", o = "_text_1phgw_27", _ = "_on_1phgw_56", n = "_handle_1phgw_62", e = {
+  toggle_button: t,
+  text: o,
+  on: _,
+  handle: n
+};
+export {
+  e as default,
+  n as handle,
+  _ as on,
+  o as text,
+  t as toggle_button
+};

package/dist/const/list-theme.js

@@ -0,0 +1,65 @@
+const e = {
+  standard: {
+    jaName: "スタンダード",
+    enName: "Standard",
+    columnNumber: 3,
+    name: "Standard"
+  },
+  rounded: {
+    jaName: "ポップ",
+    enName: "Rounded",
+    columnNumber: 3,
+    name: "Rounded"
+  },
+  artistic: {
+    jaName: "アート",
+    enName: "Artistic",
+    columnNumber: 3,
+    name: "Artistic"
+  },
+  tile: {
+    jaName: "タイル",
+    enName: "Tile",
+    columnNumber: 3,
+    name: "Tile"
+  },
+  simple: {
+    jaName: "シンプル",
+    enName: "Simple",
+    columnNumber: 3,
+    name: "Simple"
+  },
+  row: {
+    jaName: "ワイド",
+    enName: "Row",
+    columnNumber: 1,
+    name: "Row"
+  },
+  news: {
+    jaName: "ニュース",
+    enName: "News",
+    columnNumber: 1,
+    name: "News"
+  },
+  grid: {
+    jaName: "グリッド",
+    enName: "Grid",
+    columnNumber: 4,
+    name: "Grid"
+  },
+  gallery: {
+    jaName: "ギャラリー",
+    enName: "Gallery",
+    columnNumber: 3,
+    name: "Gallery"
+  },
+  entertainment: {
+    jaName: "エンタテインメント",
+    enName: "Entertainment",
+    columnNumber: 3,
+    name: "Entertainment"
+  }
+};
+export {
+  e as LIST_THEME
+};