@cypress-design/vue-checkbox 0.3.1 → 0.3.3

package/.turbo/turbo-build.log

@@ -1,13 +1,13 @@
 $ yarn build:module && yarn build:types
 $ yarn vite build
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
-vite v4.2.2 building for production...
+vite v4.3.9 building for production...
 transforming...
 ✓ 5 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.es.mjs  3.71 kB │ gzip: 1.72 kB │ map: 262.14 kB
-dist/index.umd.js  3.39 kB │ gzip: 1.67 kB │ map: 261.92 kB
-✓ built in 9.75s
+dist/index.es.mjs  4.03 kB │ gzip: 1.75 kB │ map: 292.01 kB
+dist/index.umd.js  3.67 kB │ gzip: 1.70 kB │ map: 291.75 kB
+✓ built in 3.65s
 $ yarn vue-tsc --project ./tsconfig.build.json
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @cypress-design/vue-checkbox
 
+## 0.3.3
+
+### Patch Changes
+
+- [#245](https://github.com/cypress-io/cypress-design/pull/245) [`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171) Thanks [@elevatebart](https://github.com/elevatebart)! - use tailwind to rollup classes in the final package
+
+- Updated dependencies [[`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171)]:
+  - @cypress-design/vue-icon@0.23.1
+
+## 0.3.2
+
+### Patch Changes
+
+- [`08ba16d`](https://github.com/cypress-io/cypress-design/commit/08ba16da4a8663676ee96ac4950938857bd0d9a3) Thanks [@elevatebart](https://github.com/elevatebart)! - fix wind-keep plugin
+
+- Updated dependencies [[`08ba16d`](https://github.com/cypress-io/cypress-design/commit/08ba16da4a8663676ee96ac4950938857bd0d9a3)]:
+  - @cypress-design/vue-icon@0.22.1
+
 ## 0.3.1
 
 ### Patch Changes

package/CheckboxVue.cy.tsx

@@ -68,7 +68,7 @@ describe('<Checkbox />', () => {
         <div>
           <Checkbox
             label="Welcome guide settings"
-            vModel={isChecked.value}
+            v-model={isChecked.value}
             class="px-2 py-1 m-2 border border-gray-300 rounded"
           />
           <div

package/ReadMe.md

@@ -11,3 +11,9 @@ or with yarn
 ```bash
 yarn add @cypress-design/vue-checkbox
 ```
+
+## Usage
+
+```ts
+import Checkbox from '@cypress-design/vue-checkbox'
+```

package/dist/Checkbox.vue.d.ts

@@ -69,8 +69,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     id: string;
     color: 'red' | 'indigo' | 'jade';
-}>, {
-    label: (_: {}) => any;
+}, {}>, {
+    label?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -83,13 +83,16 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 //# sourceMappingURL=Checkbox.vue.d.ts.map

package/dist/Checkbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../Checkbox.vue.ts"],"names":[],"mappings":";IA+EI;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;;IAGH;;;OAGG;;;;;;;;IA1BH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;;IAGH;;;OAGG;;;;;;;;QAtBE,MAAM;WAaH,KAAK,GAAG,QAAQ,GAAG,MAAM;;sBA8GP,GAAG;;AAlMjC,wBAqNc;AACd,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG;QACzD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,GAAG,CAAC,CAAC,CAAC,CAAC;CACR,CAAC;AAWN,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAAE,MAAM,EAAE,CAAC,CAAA;KAAE,CAAA;CAAE,CAAC"}
+{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../Checkbox.vue.ts"],"names":[],"mappings":";IAgFI;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;;IAGH;;;OAGG;;;;;;;;IA1BH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;;IAGH;;;OAGG;;;;;;;;QAtBE,MAAM;WAaH,KAAK,GAAG,QAAQ,GAAG,MAAM;;mBAoIT,GAAG;;AAxN/B,wBAwO0G;AAC1G,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AAWN,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC;AACJ,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/index.es.mjs

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