@cypress-design/vue-checkbox 0.5.0 → 1.0.0

package/dist/index.es.mjs

@@ -1,101 +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 r = Object.keys(a).reduce((u, n) => (!B.includes(n) && n !== "name" && (u[n] = a[n]), u), {}), s = {
-    width: e,
-    height: e,
-    viewBox: `0 0 ${e} ${e}`,
-    fill: "none",
-    innerHTML: o,
-    ...r
-  };
-  return t.length && (s.class = t.join(" ")), s;
-}, 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(() => [
-      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 (r, s) => (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), "block border border-solid rounded h-[16px] w-[16px] flex-shrink-0"])
+        })) : m("", !0),
+        i("span", {
+          class: t([g.value, o(r).visibleCheckbox])
         }, null, 2),
-        C(r.$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="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 block relative flex items-center absolute inset-0 w-0 h-0 opacity-0 border border-solid rounded h-[16px] w-[16px] flex-shrink-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"> */