@cypress-design/vue-checkbox 0.4.5 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @cypress-design/vue-checkbox
 
+## 0.5.0
+
+### Minor Changes
+
+- [#151](https://github.com/cypress-io/cypress-design/pull/151) [`8b0e735`](https://github.com/cypress-io/cypress-design/commit/8b0e7356eb64a6b3583d3486dda8ecbb11c34cca) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: use clases compatible with both windi and tailwind
+
+### Patch Changes
+
+- Updated dependencies [[`106b61a`](https://github.com/cypress-io/cypress-design/commit/106b61a97888f956a4c9d235fde5efb4243e1445), [`7b4f416`](https://github.com/cypress-io/cypress-design/commit/7b4f4162a0d150aa8cab7ec239faebb58c39464d)]:
+  - @cypress-design/vue-icon@0.18.0
+
+## 0.4.6
+
+### Patch Changes
+
+- [#112](https://github.com/cypress-io/cypress-design/pull/112) [`d229b48`](https://github.com/cypress-io/cypress-design/commit/d229b48a3806a882abe83c9ebf9c32ed18d2c47f) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: when label is too big avoid checkbox shrinking
+
 ## 0.4.5
 
 ### Patch Changes

package/Checkbox.vue

@@ -60,7 +60,6 @@ function updated() {
 }
 
 const checkboxClasses = computed(() => [
-  'block border-1 border-solid rounded h-16px w-16px',
   props.disabled
     ? 'border-gray-200 bg-gray-100'
     : localChecked.value
@@ -90,12 +89,15 @@ const checkboxClasses = computed(() => [
         strokeColor="white"
         class="absolute"
       />
-      <span :class="checkboxClasses" />
+      <span
+        :class="checkboxClasses"
+        class="block border border-solid rounded h-[16px] w-[16px] flex-shrink-0"
+      />
       <slot name="label">
         <span
           v-if="label"
           :class="[
-            'ml-2 text-16px leading-normal font-light select-none',
+            'ml-[8px] text-[16px] leading-[24px] font-light select-none',
             disabled ? 'text-gray-500' : 'text-gray-800',
           ]"
         >

package/CheckboxVue.cy.tsx

@@ -18,8 +18,10 @@ describe('<Checkbox />', () => {
     })
 
     cy.get('input[type="checkbox"]').should('be.checked')
+    cy.percySnapshot()
     cy.contains('Welcome guide settings').click()
     cy.get('input[type="checkbox"]').should('not.be.checked')
+    cy.percySnapshot()
   })
 
   it('changes when checkbox is clicked', () => {
@@ -39,6 +41,19 @@ describe('<Checkbox />', () => {
     cy.get('input[type="checkbox"]').should('not.be.checked')
   })
 
+  it('keeps its width when label is long', () => {
+    mount(() => {
+      return (
+        <Checkbox
+          label="lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+          id="lorem-checkbox"
+        />
+      )
+    })
+
+    cy.get('label span:first-child').invoke('outerWidth').should('equal', 16)
+  })
+
   it('renders vModel', () => {
     const isChecked = ref(false)
     mount(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../Checkbox.vue.ts"],"names":[],"mappings":";;;;;gBAkFS,MAAM;mBAaH,KAAK,GAAG,QAAQ,GAAG,MAAM;;YAjBjC;;;eAGG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;;eAGG;;YAEH;;eAEG;;;YAGH;;;eAGG;;;;;;;;;;;;;;;;;;;;;;YA1BH;;;eAGG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;;eAGG;;YAEH;;eAEG;;;YAGH;;;eAGG;;;;;;;;;;gBAtBE,MAAM;mBAaH,KAAK,GAAG,QAAQ,GAAG,MAAM;;;;;;;;;;;;;;;;;;;;;;QAjBjC;;;WAGG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;;WAGG;;QAEH;;WAEG;;;QAGH;;;WAGG;;;;;;;;;;;;IA1BH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;;IAGH;;;OAGG;;;;;;;;;;QAtBE,MAAM;WAaH,KAAK,GAAG,QAAQ,GAAG,MAAM;;;;;;AApFrC,wBAgHK;AACL,aAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,aAAK,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,aAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE3B,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"}
+{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../Checkbox.vue.ts"],"names":[],"mappings":";;;;;gBAiFS,MAAM;mBAaH,KAAK,GAAG,QAAQ,GAAG,MAAM;;YAjBjC;;;eAGG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;;eAGG;;YAEH;;eAEG;;;YAGH;;;eAGG;;;;;;;;;;;;;;;;;;;;;;YA1BH;;;eAGG;;YAEH;;eAEG;;YAEH;;eAEG;;YAEH;;;eAGG;;YAEH;;eAEG;;;YAGH;;;eAGG;;;;;;;;;;gBAtBE,MAAM;mBAaH,KAAK,GAAG,QAAQ,GAAG,MAAM;;;;;;;;;;;;;;;;;;;;;;QAjBjC;;;WAGG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;;WAGG;;QAEH;;WAEG;;;QAGH;;;WAGG;;;;;;;;;;;;IA1BH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;;IAGH;;;OAGG;;;;;;;;;;QAtBE,MAAM;WAaH,KAAK,GAAG,QAAQ,GAAG,MAAM;;;;;;AAnFrC,wBA+GK;AACL,aAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,aAAK,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,aAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE3B,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"}

package/dist/index.es.mjs

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