@geckou/ui-vue 0.5.0 → 0.7.0

package/dist/components/InputBox.vue2.js

@@ -0,0 +1,62 @@
+import { defineComponent as y, ref as v, computed as f, onMounted as S, onBeforeUnmount as h, watch as m, openBlock as E, createElementBlock as x, normalizeClass as B, normalizeStyle as _, renderSlot as L } from "vue";
+import { INPUT_BOX_DEFAULT_STYLES as k } from "@geckou/ui-core";
+const g = /* @__PURE__ */ y({
+  __name: "InputBox",
+  props: {
+    cssStyle: {},
+    isErrored: { type: Boolean },
+    isDisabled: { type: Boolean }
+  },
+  setup(p) {
+    const a = p, r = v(null), n = f(() => ({
+      ...k,
+      ...a.cssStyle ?? {}
+    })), u = f(
+      () => n.value[t.value] ?? n.value.default
+    ), t = v("default"), b = (e) => e.length === 0 ? t.value = "default" : e.every((l) => l.matches(":disabled")) ? t.value = "disabled" : e.some((l) => l.matches(":focus")) ? t.value = "focus" : a.isErrored || e.some((l) => l.matches(":invalid")) ? t.value = "error" : e.every((l) => l.value !== "") ? t.value = "valid" : t.value = "default", o = () => {
+      var e;
+      b(
+        Array.from(
+          ((e = r.value) == null ? void 0 : e.querySelectorAll(
+            "input, textarea, select"
+          )) ?? []
+        )
+      );
+    };
+    let s = null;
+    return S(() => {
+      r.value && (s = new MutationObserver(o), s.observe(r.value, { childList: !0, subtree: !0 }), r.value.addEventListener("focusin", o, !0), r.value.addEventListener("blur", o, !0));
+    }), h(() => {
+      s == null || s.disconnect(), s = null, r.value && (r.value.removeEventListener("focusin", o, !0), r.value.removeEventListener("blur", o, !0));
+    }), m(
+      () => a.isDisabled,
+      () => t.value = a.isDisabled ? "disabled" : "default",
+      { immediate: !0 }
+    ), m(
+      () => a.isErrored,
+      () => {
+        a.isDisabled || o();
+      }
+    ), (e, l) => {
+      var i, d, c;
+      return E(), x("div", {
+        ref_key: "inputBox",
+        ref: r,
+        class: B(e.$style.input_box),
+        style: _({
+          "--text-color": u.value.textColor,
+          "--placeholder-color": u.value.placeholderColor,
+          "--background-color": u.value.backgroundColor,
+          "--border-style": `0 0 0 ${((i = u.value.border) == null ? void 0 : i.size) || "1px"} ${(d = u.value.border) == null ? void 0 : d.color} inset`,
+          "--radius-size": ((c = u.value.border) == null ? void 0 : c.radius) || ".25rem",
+          "--box-shadow": u.value.boxShadow || "0 0 0 0 rgba(0, 0, 0, 0)"
+        })
+      }, [
+        L(e.$slots, "default")
+      ], 6);
+    };
+  }
+});
+export {
+  g as default
+};

package/dist/components/InputBox.vue3.js

@@ -0,0 +1,7 @@
+const t = "_input_box_4lok0_1", o = {
+  input_box: t
+};
+export {
+  o as default,
+  t as input_box
+};

package/dist/components/InputGroup.vue.js

@@ -0,0 +1,17 @@
+import { openBlock as o, createElementBlock as s, normalizeClass as r, renderSlot as t } from "vue";
+import l from "./InputGroup.vue2.js";
+import n from "../_virtual/_plugin-vue_export-helper.js";
+const c = {};
+function p(e, a) {
+  return o(), s("div", {
+    class: r(e.$style.input_group)
+  }, [
+    t(e.$slots, "default")
+  ], 2);
+}
+const u = {
+  $style: l
+}, d = /* @__PURE__ */ n(c, [["render", p], ["__cssModules", u]]);
+export {
+  d as default
+};

package/dist/components/InputGroup.vue2.js

@@ -0,0 +1,7 @@
+const t = "_input_group_7evrk_1", p = {
+  input_group: t
+};
+export {
+  p as default,
+  t as input_group
+};

package/dist/components/LabeledCheckbox.vue.js

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

package/dist/components/LabeledCheckbox.vue2.js

@@ -0,0 +1,60 @@
+import { defineComponent as k, computed as r, openBlock as D, createElementBlock as C, normalizeClass as u, createVNode as p, unref as m, createElementVNode as S, normalizeStyle as v, toDisplayString as V } from "vue";
+import x from "./CheckBox.vue.js";
+import { nextUniqueId as B } from "../scripts/unique-id.js";
+import { COLOR as o } from "@geckou/ui-core";
+const h = ["id"], E = /* @__PURE__ */ k({
+  __name: "LabeledCheckbox",
+  props: {
+    name: {},
+    label: {},
+    value: { default: void 0 },
+    modelValue: { type: Boolean },
+    isDisabled: { type: Boolean },
+    cssStyle: { default: void 0 },
+    isDisableAnimation: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: b }) {
+    const y = b, l = e, i = B("labeled_check_box_label"), n = r({
+      get: () => l.modelValue ?? !1,
+      set: (a) => y("update:modelValue", a)
+    }), d = r(() => {
+      var t, s;
+      const a = l.isDisabled ? (t = l.cssStyle) == null ? void 0 : t.disabled : (s = l.cssStyle) == null ? void 0 : s.default;
+      return {
+        textColor: l.isDisabled ? o.darkGray : o.black,
+        backgroundColor: l.isDisabled ? o.darkGray : o.blue,
+        ...a ?? {}
+      };
+    });
+    return (a, t) => {
+      var s, c;
+      return D(), C("label", {
+        class: u(a.$style.labeled_check_box)
+      }, [
+        p(x, {
+          modelValue: n.value,
+          "onUpdate:modelValue": t[0] || (t[0] = (f) => n.value = f),
+          name: e.name,
+          value: e.value,
+          isDisabled: e.isDisabled,
+          cssStyle: e.cssStyle,
+          isDisableAnimation: e.isDisableAnimation,
+          ariaLabelledBy: m(i),
+          style: { "pointer-events": "none" }
+        }, null, 8, ["modelValue", "name", "value", "isDisabled", "cssStyle", "isDisableAnimation", "ariaLabelledBy"]),
+        S("span", {
+          id: m(i),
+          class: u(a.$style.label),
+          style: v({
+            "--text-color": (s = d.value) == null ? void 0 : s.textColor,
+            "--checked-color": (c = d.value) == null ? void 0 : c.backgroundColor
+          })
+        }, V(e.label), 15, h)
+      ], 2);
+    };
+  }
+});
+export {
+  E as default
+};

package/dist/components/LabeledCheckbox.vue3.js

@@ -0,0 +1,9 @@
+const e = "_labeled_check_box_1y15f_1", l = "_label_1y15f_1", _ = {
+  labeled_check_box: e,
+  label: l
+};
+export {
+  _ as default,
+  l as label,
+  e as labeled_check_box
+};

package/dist/components/LabeledFieldset.vue.js

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

package/dist/components/LabeledFieldset.vue2.js

@@ -0,0 +1,29 @@
+import { defineComponent as n, openBlock as s, createElementBlock as t, normalizeClass as l, createElementVNode as a, renderSlot as o, createCommentVNode as i } from "vue";
+const r = ["disabled"], c = /* @__PURE__ */ n({
+  __name: "LabeledFieldset",
+  props: {
+    isDisabled: { type: Boolean }
+  },
+  setup(d) {
+    return (e, m) => (s(), t("div", {
+      class: l(e.$style.fieldset)
+    }, [
+      a("fieldset", { disabled: d.isDisabled }, [
+        e.$slots.label ? (s(), t("legend", {
+          key: 0,
+          class: l(e.$style.legend)
+        }, [
+          o(e.$slots, "label")
+        ], 2)) : i("", !0),
+        a("div", {
+          class: l(e.$style.input)
+        }, [
+          o(e.$slots, "default")
+        ], 2)
+      ], 8, r)
+    ], 2));
+  }
+});
+export {
+  c as default
+};

package/dist/components/LabeledFieldset.vue3.js

@@ -0,0 +1,11 @@
+const e = "_fieldset_1iro5_1", t = "_legend_1iro5_9", n = "_input_1iro5_14", i = {
+  fieldset: e,
+  legend: t,
+  input: n
+};
+export {
+  i as default,
+  e as fieldset,
+  n as input,
+  t as legend
+};

package/dist/components/LoadingSpinner.vue.js

@@ -0,0 +1,15 @@
+import { openBlock as r, createElementBlock as e, createStaticVNode as t } from "vue";
+import i from "../_virtual/_plugin-vue_export-helper.js";
+const o = {}, a = {
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function n(l, c) {
+  return r(), e("svg", a, [...c[0] || (c[0] = [
+    t('<g><circle cx="12" cy="2.5" r="1.5" opacity=".14"></circle><circle cx="16.75" cy="3.77" r="1.5" opacity=".29"></circle><circle cx="20.23" cy="7.25" r="1.5" opacity=".43"></circle><circle cx="21.50" cy="12.00" r="1.5" opacity=".57"></circle><circle cx="20.23" cy="16.75" r="1.5" opacity=".71"></circle><circle cx="16.75" cy="20.23" r="1.5" opacity=".86"></circle><circle cx="12" cy="21.5" r="1.5"></circle><animateTransform attributeName="transform" type="rotate" calcMode="discrete" dur="0.75s" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" repeatCount="indefinite"></animateTransform></g>', 1)
+  ])]);
+}
+const y = /* @__PURE__ */ i(o, [["render", n]]);
+export {
+  y as default
+};

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

@@ -1,24 +1,30 @@
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
+type __VLS_Props = {
     isShown: boolean;
-    size?: "small" | "medium" | "large";
+    size?: 'small' | 'medium' | 'large';
     /** header スロットを使わない場合のダイアログ名 */
     ariaLabel?: string;
-}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    closeModal: (state: boolean) => any;
-}, string, import('vue').PublicProps, Readonly<{
-    isShown: boolean;
-    size?: "small" | "medium" | "large";
-    /** header スロットを使わない場合のダイアログ名 */
-    ariaLabel?: string;
-}> & Readonly<{
-    onCloseModal?: ((state: boolean) => any) | undefined;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {
+        dialog: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     dialog: HTMLDivElement;
-}, HTMLDivElement>, {
-    header?(_: {}): any;
-    default?(_: {}): any;
-    footer?(_: {}): any;
-}>;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/components/ModalBox.vue.js

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

package/dist/components/ModalBox.vue2.js

@@ -0,0 +1,91 @@
+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 },
+    size: {},
+    ariaLabel: {}
+  },
+  emits: ["close"],
+  setup(n, { emit: b }) {
+    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)
+    );
+    let l = null;
+    $(
+      () => t.isShown,
+      async (e) => {
+        var r;
+        if (!e) {
+          l == null || l.focus(), l = null;
+          return;
+        }
+        l = typeof document > "u" ? null : document.activeElement, await C(), (r = s.value) == null || r.focus();
+      }
+    );
+    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 L(() => {
+      h(t.isShown), document.addEventListener("keydown", y);
+    }), B(() => {
+      f.release(), document.removeEventListener("keydown", y);
+    }), (e, r) => (i(), d("div", {
+      class: o([e.$style.overlay, { [e.$style.display]: n.isShown }]),
+      "aria-hidden": !n.isShown,
+      inert: S.value,
+      onClick: I(a, ["self"])
+    }, [
+      c("div", {
+        ref_key: "dialog",
+        ref: s,
+        role: "dialog",
+        "aria-modal": "true",
+        "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(), d("header", {
+          key: 0,
+          id: k(m),
+          class: o(e.$style.header)
+        }, [
+          u(e.$slots, "header")
+        ], 10, U)) : w("", !0),
+        c("div", {
+          class: o(e.$style.contents)
+        }, [
+          u(e.$slots, "default")
+        ], 2),
+        e.$slots.footer ? (i(), d("footer", {
+          key: 1,
+          class: o(e.$style.footer)
+        }, [
+          u(e.$slots, "footer")
+        ], 2)) : w("", !0),
+        c("button", {
+          type: "button",
+          class: o(e.$style.close_button),
+          onClick: a
+        }, [
+          z(V)
+        ], 2)
+      ], 10, T)
+    ], 10, K));
+  }
+});
+export {
+  H as default
+};

package/dist/components/ModalBox.vue3.js

@@ -0,0 +1,23 @@
+const o = "_container_1r8pd_1", t = "_small_1r8pd_13", _ = "_large_1r8pd_16", e = "_header_1r8pd_20", n = "_contents_1r8pd_34", r = "_footer_1r8pd_45", s = "_close_button_1r8pd_62", a = "_overlay_1r8pd_80", l = "_display_1r8pd_105", c = {
+  container: o,
+  small: t,
+  large: _,
+  header: e,
+  contents: n,
+  footer: r,
+  close_button: s,
+  overlay: a,
+  display: l
+};
+export {
+  s as close_button,
+  o as container,
+  n as contents,
+  c as default,
+  l as display,
+  r as footer,
+  e as header,
+  _ as large,
+  a as overlay,
+  t as small
+};

package/dist/components/PopupBox.vue.js

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

package/dist/components/PopupBox.vue2.js

@@ -0,0 +1,35 @@
+import { defineComponent as u, ref as i, onBeforeUnmount as r, openBlock as a, createBlock as p, Teleport as f, createElementVNode as m, normalizeClass as c, renderSlot as d } from "vue";
+const h = /* @__PURE__ */ u({
+  __name: "PopupBox",
+  props: {
+    position: { default: () => ({ x: "right", y: "top" }) }
+  },
+  setup(t, { expose: s }) {
+    const l = i(!1);
+    let e = null;
+    const n = () => {
+      l.value = !0, e !== null && clearTimeout(e), e = setTimeout(() => {
+        l.value = !1, e = null;
+      }, 3e3);
+    };
+    return r(() => {
+      e !== null && clearTimeout(e);
+    }), s({
+      showPopup: n
+    }), (o, y) => (a(), p(f, { to: "body" }, [
+      m("div", {
+        class: c([
+          o.$style.popup,
+          o.$style[`x-${t.position.x}`],
+          o.$style[`y-${t.position.y}`],
+          { [o.$style.show]: l.value }
+        ])
+      }, [
+        d(o.$slots, "default")
+      ], 2)
+    ]));
+  }
+});
+export {
+  h as default
+};

package/dist/components/PopupBox.vue3.js

@@ -0,0 +1,15 @@
+const t = "_popup_1gz6t_23", _ = "_show_1gz6t_38", o = {
+  "x-left": "_x-left_1gz6t_1",
+  "x-right": "_x-right_1gz6t_4",
+  "x-center": "_x-center_1gz6t_7",
+  "y-top": "_y-top_1gz6t_12",
+  "y-bottom": "_y-bottom_1gz6t_15",
+  "y-center": "_y-center_1gz6t_18",
+  popup: t,
+  show: _
+};
+export {
+  o as default,
+  t as popup,
+  _ as show
+};

package/dist/components/RadioButtons.vue.js

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

package/dist/components/RadioButtons.vue2.js

@@ -0,0 +1,75 @@
+import { defineComponent as C, ref as B, computed as y, watch as E, openBlock as u, createElementBlock as n, normalizeClass as f, Fragment as M, renderList as R, normalizeStyle as z, withDirectives as G, createElementVNode as g, unref as w, vModelRadio as x, toDisplayString as A, createVNode as N } from "vue";
+import { COLOR as r, isEmptyValue as k, MESSAGES as L } from "@geckou/ui-core";
+import { nextUniqueId as O } from "../scripts/unique-id.js";
+import U from "./ErrorMessage.vue.js";
+const $ = ["name", "value", "disabled", "required", "checked"], J = /* @__PURE__ */ C({
+  __name: "RadioButtons",
+  props: {
+    modelValue: {},
+    options: {},
+    name: { default: void 0 },
+    isDisabled: { type: Boolean },
+    isRequired: { type: Boolean },
+    cssStyle: { default: void 0 },
+    isDisableAnimation: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(s, { emit: V }) {
+    const D = V, e = s, S = e.name ?? O("radio_group"), i = B([]), o = y({
+      get: () => e.modelValue ?? "",
+      set: (a) => D("update:modelValue", a)
+    }), d = y(() => {
+      var t, l;
+      const a = e.isDisabled ? (t = e.cssStyle) == null ? void 0 : t.disabled : (l = e.cssStyle) == null ? void 0 : l.default;
+      return {
+        textColor: e.isDisabled ? r.darkGray : r.black,
+        backgroundColor: e.isDisabled ? r.lightGray : r.white,
+        border: {
+          color: e.isDisabled ? r.darkGray : r.blue,
+          size: "1px"
+        },
+        ...a ?? {}
+      };
+    }), h = () => {
+      i.value = [], k(o.value) && e.isRequired && i.value.push(L.required);
+    };
+    return E(
+      () => o.value,
+      () => h(),
+      { immediate: !k(e.modelValue) }
+    ), (a, t) => (u(), n("div", {
+      class: f(a.$style.radios)
+    }, [
+      (u(!0), n(M, null, R(s.options, (l) => {
+        var c, m, b, v, p;
+        return u(), n("label", {
+          key: l.value,
+          class: f(a.$style.radio),
+          style: z({
+            "--border-color": (m = (c = d.value) == null ? void 0 : c.border) == null ? void 0 : m.color,
+            "--border-size": (v = (b = d.value) == null ? void 0 : b.border) == null ? void 0 : v.size,
+            "--background-color": (p = d.value) == null ? void 0 : p.backgroundColor,
+            "--duration": s.isDisableAnimation ? "0s" : ".3s"
+          })
+        }, [
+          G(g("input", {
+            "onUpdate:modelValue": t[0] || (t[0] = (q) => o.value = q),
+            type: "radio",
+            name: w(S),
+            value: l.value,
+            disabled: s.isDisabled,
+            required: s.isRequired,
+            checked: l.value === o.value
+          }, null, 8, $), [
+            [x, o.value]
+          ]),
+          g("span", null, A(l.label), 1)
+        ], 6);
+      }), 128)),
+      N(U, { errorMessages: i.value }, null, 8, ["errorMessages"])
+    ], 2));
+  }
+});
+export {
+  J as default
+};

package/dist/components/RadioButtons.vue3.js

@@ -0,0 +1,11 @@
+const o = "_radios_hh7eh_15", h = "_radio_hh7eh_15", s = "_pop_hh7eh_1", _ = {
+  radios: o,
+  radio: h,
+  pop: s
+};
+export {
+  _ as default,
+  s as pop,
+  h as radio,
+  o as radios
+};

package/dist/components/SelectBox.vue.js

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