@cypress-design/vue-checkbox 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/vue-checkbox
 
+## 0.4.1
+
+### Patch Changes
+
+- [`2afa4d5`](https://github.com/cypress-io/cypress-design/commit/2afa4d54a2373692f82bee35ae40446bc9bb3f91) Thanks [@elevatebart](https://github.com/elevatebart)! - avoid duplicate ids in checkboxes
+
 ## 0.4.0
 
 ### Minor Changes

package/Checkbox.vue

@@ -43,7 +43,7 @@ const props = withDefaults(
     label?: string
   }>(),
   {
-    id: uid(),
+    id: () => uid(),
     color: 'indigo',
   }
 )

package/dist/Checkbox.vue.d.ts

@@ -28,7 +28,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
      */
     label?: string | undefined;
 }>, {
-    id: string;
+    id: () => string;
     color: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => void;
@@ -62,7 +62,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
      */
     label?: string | undefined;
 }>, {
-    id: string;
+    id: () => string;
     color: string;
 }>>> & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;

package/dist/index.es.js

@@ -1,7 +1,7 @@
-import { h as k, defineComponent as p, ref as f, computed as y, openBlock as i, createElementBlock as b, createElementVNode as s, createBlock as C, unref as m, createCommentVNode as h, normalizeClass as g, renderSlot as v, toDisplayString as x } from "vue";
-import * as w from "@cypress-design/icon-registry";
-import { ICON_COLOR_PROP_NAMES as S } from "@cypress-design/icon-registry";
-const j = ({
+import { defineComponent as k, h as p, ref as y, computed as C, openBlock as i, createElementBlock as b, createElementVNode as d, createBlock as v, unref as m, createCommentVNode as h, normalizeClass as g, renderSlot as x, toDisplayString as w } from "vue";
+import * as S from "@cypress-design/icon-registry";
+import { compileIcon as j, ICON_COLOR_PROP_NAMES as z } from "@cypress-design/icon-registry";
+const f = ({
   body: e,
   compiledClasses: t,
   size: o,
@@ -9,7 +9,7 @@ const j = ({
   interactiveColorsOnGroup: c,
   ...a
 }) => {
-  const n = Object.keys(a).reduce((u, d) => (S.includes(d) || (u[d] = a[d]), u), {}), r = {
+  const n = Object.keys(a).reduce((u, s) => (z.includes(s) || (u[s] = a[s]), u), {}), r = {
     width: o,
     height: o,
     fill: "none",
@@ -17,26 +17,28 @@ const j = ({
     ...n
   };
   return t.length && (r.class = t.join(" ")), r;
-}, z = (e) => {
-  const { sizeWithDefault: t, compiledClasses: o } = w.getComponentAttributes({ ...e, availableSizes: ["16"] }), l = {
+};
+k((e) => p("svg", f(j(e))));
+const B = (e) => {
+  const { sizeWithDefault: t, compiledClasses: o } = S.getComponentAttributes({ ...e, 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", j({
+  return p("svg", f({
     ...e,
     size: t,
     body: l,
     compiledClasses: o
   }));
-}, B = { class: "relative flex items-center" }, O = ["id", "name", "disabled", "checked"], V = ["for"];
-function E() {
+}, O = { class: "relative flex items-center" }, V = ["id", "name", "disabled", "checked"], E = ["for"];
+function M() {
   return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, "");
 }
-const D = /* @__PURE__ */ p({
+const I = /* @__PURE__ */ k({
   __name: "Checkbox",
   props: {
-    id: { default: E() },
+    id: { default: () => M() },
     name: null,
     checked: { type: Boolean },
     color: { default: "indigo" },
@@ -46,11 +48,11 @@ const D = /* @__PURE__ */ p({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const o = e, l = f(o.modelValue || o.checked);
+    const o = e, l = y(o.modelValue || o.checked);
     function c() {
       l.value = !l.value, t("update:modelValue", l.value);
     }
-    const a = y(() => [
+    const a = C(() => [
       "block border-1 rounded h-16px w-16px",
       o.disabled ? "border-gray-200 bg-gray-100" : l.value ? {
         "border-indigo-500 bg-indigo-400": o.color === "indigo",
@@ -58,8 +60,8 @@ const D = /* @__PURE__ */ p({
         "border-red-500 bg-red-400": o.color === "red"
       } : "border-gray-200 bg-white"
     ]);
-    return (n, r) => (i(), b("div", B, [
-      s("input", {
+    return (n, r) => (i(), b("div", O, [
+      d("input", {
         id: e.id,
         class: "absolute inset-0 w-0 h-0 opacity-0",
         name: e.name || e.id,
@@ -67,31 +69,31 @@ const D = /* @__PURE__ */ p({
         onChange: c,
         disabled: o.disabled,
         checked: l.value
-      }, null, 40, O),
-      l.value ? (i(), C(m(z), {
+      }, null, 40, V),
+      l.value ? (i(), v(m(B), {
         key: 0,
         strokeColor: "white",
         class: "absolute"
       })) : h("", !0),
-      s("span", {
+      d("span", {
         class: g(m(a))
       }, null, 2),
-      s("label", {
+      d("label", {
         class: "block",
         for: e.id
       }, [
-        v(n.$slots, "label", {}, () => [
+        x(n.$slots, "label", {}, () => [
           e.label ? (i(), b("span", {
             key: 0,
             class: g(["ml-2 text-16px leading-normal font-light select-none", e.disabled ? "text-gray-500" : "text-gray-800"])
-          }, x(e.label), 3)) : h("", !0)
+          }, w(e.label), 3)) : h("", !0)
         ])
-      ], 8, V)
+      ], 8, E)
     ]));
   }
 });
 export {
-  D as default
+  I as default
 };
 /* <windicss-keep class="block border-1 rounded h-16px w-16px 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-2 text-16px leading-normal font-light select-none text-gray-500 text-gray-800 icon-dark-white"> */