@geckou/ui-vue 0.5.0 → 0.7.0

package/dist/components/ToggleButton.vue2.js

@@ -0,0 +1,96 @@
+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", "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: {},
+    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: D }) {
+    const x = D, a = o, d = r({
+      get: () => a.modelValue ?? !1,
+      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(() => {
+      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, 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, S)) : V("", !0)
+      ], 64);
+    };
+  }
+});
+export {
+  E as default
+};

package/dist/components/ToggleButton.vue3.js

@@ -0,0 +1,13 @@
+const t = "_toggle_button_tkkkr_1", o = "_text_tkkkr_16", _ = "_on_tkkkr_45", n = "_handle_tkkkr_51", 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
+};