@cypress-design/vue-checkbox 0.4.6 → 1.0.0

package/dist/index.es.mjs

@@ -1,102 +1,92 @@
-import { h as k, defineComponent as p, ref as f, computed as x, openBlock as i, createElementBlock as b, createElementVNode as d, createBlock as y, unref as m, createCommentVNode as h, normalizeClass as g, renderSlot as C, toDisplayString as v } from "vue";
-import * as w from "@cypress-design/icon-registry";
-import { ICON_COLOR_PROP_NAMES as B } from "@cypress-design/icon-registry";
-const S = ({
-  body: o,
-  compiledClasses: t,
-  size: e,
-  class: l,
-  interactiveColorsOnGroup: c,
-  ...a
-}) => {
-  const n = Object.keys(a).reduce((u, s) => (B.includes(s) || (u[s] = a[s]), u), {}), r = {
-    width: e,
-    height: e,
-    viewBox: `0 0 ${e} ${e}`,
-    fill: "none",
-    innerHTML: o,
-    ...n
-  };
-  return t.length && (r.class = t.join(" ")), r;
-}, j = (o) => {
-  const { sizeWithDefault: t, compiledClasses: e } = w.getComponentAttributes({ ...o, availableSizes: ["16"] }), l = {
-    16: '<path d="M5 8.5 7.5 11 11 5" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
-  }[t];
-  if (!l)
-    throw Error(`Icon "checkmark-small" is not available in size ${t}`);
-  return k("svg", S({
-    ...o,
-    size: t,
-    body: l,
-    compiledClasses: e
-  }));
-}, z = { class: "block relative flex items-center" }, O = ["id", "name", "disabled", "checked"], V = ["for"];
-function N() {
-  return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, "");
+import { defineComponent as f, ref as k, computed as y, openBlock as s, createElementBlock as u, createElementVNode as i, normalizeClass as t, unref as o, createBlock as x, createCommentVNode as m, renderSlot as C, toDisplayString as v } from "vue";
+import { IconCheckmarkSmall as V } from "@cypress-design/vue-icon";
+const r = {
+  wrapper: "relative flex items-center",
+  hiddenInput: "absolute inset-0 w-0 h-0 opacity-0",
+  labelTag: "flex items-center",
+  visibleCheckbox: "border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white",
+  trueLabel: "block ml-[8px] text-[16px] leading-[24px] font-light select-none"
+}, c = {
+  indigo: "border-indigo-500 bg-indigo-400",
+  jade: "border-jade-500 bg-jade-400",
+  red: "border-red-500 bg-red-400",
+  disabled: "border-gray-200 bg-gray-100",
+  empty: "border-gray-200 bg-white"
+}, w = { class: "relative flex items-center" }, B = ["id", "name", "disabled", "checked"], S = ["for"];
+function A() {
+  return String(Date.now().toString(32) + Math.random().toString(16)).replace(
+    /\./g,
+    ""
+  );
 }
-const $ = /* @__PURE__ */ p({
+const I = /* @__PURE__ */ f({
   __name: "Checkbox",
   props: {
-    id: { default: () => N() },
-    name: null,
+    id: { default: () => A() },
+    name: {},
     checked: { type: Boolean },
     color: { default: "indigo" },
     disabled: { type: Boolean },
-    modelValue: { type: Boolean },
-    label: null
+    modelValue: { type: [Boolean, Array] },
+    label: {}
   },
-  emits: ["update:modelValue"],
-  setup(o, { emit: t }) {
-    const e = o, l = f(e.modelValue || e.checked);
-    function c() {
-      l.value = !l.value, t("update:modelValue", l.value);
+  emits: ["update:modelValue", "change"],
+  setup(b, { emit: p }) {
+    const e = b, l = k(
+      (Array.isArray(e.modelValue) ? e.name ? e.modelValue.includes(e.name) : !1 : e.modelValue) || e.checked
+    ), d = p;
+    function h() {
+      if (l.value = !l.value, Array.isArray(e.modelValue)) {
+        const a = [...e.modelValue];
+        if (!e.name)
+          return;
+        const n = a.indexOf(e.name);
+        n === -1 ? a.push(e.name) : a.splice(n, 1), d("update:modelValue", a);
+      } else
+        d("update:modelValue", l.value);
+      d("change", l.value);
     }
-    const a = x(() => [
-      "block border-1 border-solid rounded h-16px w-16px flex-shrink-0",
-      e.disabled ? "border-gray-200 bg-gray-100" : l.value ? {
-        "border-indigo-500 bg-indigo-400": e.color === "indigo",
-        "border-jade-500 bg-jade-400": e.color === "jade",
-        "border-red-500 bg-red-400": e.color === "red"
-      } : "border-gray-200 bg-white"
-    ]);
-    return (n, r) => (i(), b("span", z, [
-      d("input", {
-        id: o.id,
-        class: "absolute inset-0 w-0 h-0 opacity-0",
-        name: o.name || o.id,
+    const g = y(
+      () => e.disabled ? c.disabled : l.value ? c[e.color] : c.empty
+    );
+    return (a, n) => (s(), u("span", w, [
+      i("input", {
+        id: a.id,
+        class: t(o(r).hiddenInput),
+        name: a.name || a.id,
         type: "checkbox",
-        onChange: c,
         disabled: e.disabled,
-        checked: l.value
-      }, null, 40, O),
-      d("label", {
-        className: "flex items-center",
-        for: o.id
+        checked: l.value,
+        onChange: h
+      }, null, 42, B),
+      i("label", {
+        class: t(o(r).labelTag),
+        for: a.id
       }, [
-        l.value ? (i(), y(m(j), {
+        l.value ? (s(), x(o(V), {
           key: 0,
           strokeColor: "white",
           class: "absolute"
-        })) : h("", !0),
-        d("span", {
-          class: g(m(a))
+        })) : m("", !0),
+        i("span", {
+          class: t([g.value, o(r).visibleCheckbox])
         }, null, 2),
-        C(n.$slots, "label", {}, () => [
-          o.label ? (i(), b("span", {
+        C(a.$slots, "label", {}, () => [
+          a.label ? (s(), u("span", {
             key: 0,
-            class: g([
-              "ml-8px text-16px leading-24px font-light select-none",
-              o.disabled ? "text-gray-500" : "text-gray-800"
+            class: t([
+              o(r).trueLabel,
+              a.disabled ? "text-gray-500" : "text-gray-800"
             ])
-          }, v(o.label), 3)) : h("", !0)
+          }, v(a.label), 3)) : m("", !0)
         ])
-      ], 8, V)
+      ], 10, S)
     ]));
   }
 });
 export {
-  $ as default
+  I as default
 };
-
-/* <windicss-keep class="block border-1 border-solid rounded h-16px w-16px flex-shrink-0 border-gray-200 bg-gray-100 border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 bg-white relative flex items-center absolute inset-0 w-0 h-0 opacity-0 ml-8px text-16px leading-24px font-light select-none text-gray-500 text-gray-800 icon-dark-white"> */
 //# sourceMappingURL=index.es.mjs.map
+
+/* <wind-keep class="relative flex items-center absolute text-gray-500 text-gray-800 icon-dark-white inset-0 w-0 h-0 opacity-0 border border-solid rounded h-[16px] w-[16px] flex-shrink-0 text-white block ml-[8px] text-[16px] leading-[24px] font-light select-none border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 border-gray-200 bg-gray-100 bg-white"> */