@cypress-design/vue-checkbox 0.4.0 → 0.4.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @cypress-design/vue-checkbox
 
+## 0.4.3
+
+### Patch Changes
+
+- [#71](https://github.com/cypress-io/cypress-design/pull/71) [`379079e`](https://github.com/cypress-io/cypress-design/commit/379079e08802b6c3fae243925e3b9e8881e8ef54) Thanks [@elevatebart](https://github.com/elevatebart)! - allow users to click the checkbox instead of the label
+
+## 0.4.2
+
+### Patch Changes
+
+- [#68](https://github.com/cypress-io/cypress-design/pull/68) [`8c577fb`](https://github.com/cypress-io/cypress-design/commit/8c577fb0c6a0411cf8218dfe78281834df3d6f13) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: publish `.mjs` files for esm intead of `.js`
+
+- Updated dependencies [[`8c577fb`](https://github.com/cypress-io/cypress-design/commit/8c577fb0c6a0411cf8218dfe78281834df3d6f13)]:
+  - @cypress-design/vue-icon@0.5.2
+
+## 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

@@ -37,19 +37,17 @@ const props = withDefaults(
     disabled?: boolean
     modelValue?: boolean
     /**
-     * Label for the checkbox. 
+     * Label for the checkbox.
      * It is very important to set this to make the checkbox accessible.
      */
     label?: string
   }>(),
   {
-    id: uid(),
+    id: () => uid(),
     color: 'indigo',
   }
 )
 
-
-
 const localChecked = ref(props.modelValue || props.checked)
 
 const emit = defineEmits<{
@@ -66,26 +64,41 @@ const checkboxClasses = computed(() => [
   props.disabled
     ? 'border-gray-200 bg-gray-100'
     : localChecked.value
-      ? {
+    ? {
         'border-indigo-500 bg-indigo-400': props.color === 'indigo',
         'border-jade-500 bg-jade-400': props.color === 'jade',
         'border-red-500 bg-red-400': props.color === 'red',
       }
-      : 'border-gray-200 bg-white']
-)
-
+    : 'border-gray-200 bg-white',
+])
 </script>
 
 <template>
   <div class="relative flex items-center">
-    <input :id="id" class="absolute inset-0 w-0 h-0 opacity-0" :name="name || id" type="checkbox" @change="updated"
-      :disabled="props.disabled" :checked="localChecked" />
-    <IconCheckmarkSmall v-if="localChecked" strokeColor="white" class="absolute" />
-    <span :class="checkboxClasses" />
-    <label class="block" :for="id">
+    <input
+      :id="id"
+      class="absolute inset-0 w-0 h-0 opacity-0"
+      :name="name || id"
+      type="checkbox"
+      @change="updated"
+      :disabled="props.disabled"
+      :checked="localChecked"
+    />
+    <label className="flex items-center" :for="id">
+      <IconCheckmarkSmall
+        v-if="localChecked"
+        strokeColor="white"
+        class="absolute"
+      />
+      <span :class="checkboxClasses" />
       <slot name="label">
-        <span v-if="label"
-          :class="['ml-2 text-16px leading-normal font-light select-none', disabled ? 'text-gray-500' : 'text-gray-800']">
+        <span
+          v-if="label"
+          :class="[
+            'ml-2 text-16px leading-normal font-light select-none',
+            disabled ? 'text-gray-500' : 'text-gray-800',
+          ]"
+        >
           {{ label }}
         </span>
       </slot>

package/CheckboxVue.cy.tsx

@@ -5,7 +5,7 @@ import { mount } from 'cypress/vue'
 import Checkbox from './Checkbox.vue'
 
 describe('<Checkbox />', () => {
-  it('renders', () => {
+  it('changes when the label is clicked', () => {
     mount(() => {
       return (
         <Checkbox
@@ -22,6 +22,23 @@ describe('<Checkbox />', () => {
     cy.get('input[type="checkbox"]').should('not.be.checked')
   })
 
+  it('changes when checkbox is clicked', () => {
+    mount(() => {
+      return (
+        <Checkbox
+          label="Welcome guide settings"
+          id="welcome-opt-out"
+          checked
+          class="m-2 px-2 py-1 border-1 border-gray-300 rounded"
+        />
+      )
+    })
+
+    cy.get('input[type="checkbox"]').should('be.checked')
+    cy.get('svg').click()
+    cy.get('input[type="checkbox"]').should('not.be.checked')
+  })
+
   it('renders vModel', () => {
     const isChecked = ref(false)
     mount(() => {

package/dist/Checkbox.vue.d.ts

@@ -1,4 +1,156 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            id: string;
+            color: 'red' | 'indigo' | 'jade';
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+            /**
+             * A unique identifier for the checkbox on the whole page.
+             * It will be used to give match label with input for a11y.
+             */
+            id?: string | undefined;
+            /**
+             * Name attribute of the <input type="checkbox"/>.
+             */
+            name?: string | undefined;
+            /**
+             * Is the checkbox checked when it is first rendered.
+             */
+            checked?: boolean | undefined;
+            /**
+             * The color of the background in the checkbox.
+             * The checkmark will always be white.
+             */
+            color?: "indigo" | "red" | "jade" | undefined;
+            /**
+             * If the checkbox is disabled, it will not be clickable.
+             */
+            disabled?: boolean | undefined;
+            modelValue?: boolean | undefined;
+            /**
+             * Label for the checkbox.
+             * It is very important to set this to make the checkbox accessible.
+             */
+            label?: string | undefined;
+        }>, {
+            id: () => string;
+            color: string;
+        }>>> & {
+            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "id" | "color">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: "update:modelValue", value: boolean) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+            /**
+             * A unique identifier for the checkbox on the whole page.
+             * It will be used to give match label with input for a11y.
+             */
+            id?: string | undefined;
+            /**
+             * Name attribute of the <input type="checkbox"/>.
+             */
+            name?: string | undefined;
+            /**
+             * Is the checkbox checked when it is first rendered.
+             */
+            checked?: boolean | undefined;
+            /**
+             * The color of the background in the checkbox.
+             * The checkmark will always be white.
+             */
+            color?: "indigo" | "red" | "jade" | undefined;
+            /**
+             * If the checkbox is disabled, it will not be clickable.
+             */
+            disabled?: boolean | undefined;
+            modelValue?: boolean | undefined;
+            /**
+             * Label for the checkbox.
+             * It is very important to set this to make the checkbox accessible.
+             */
+            label?: string | undefined;
+        }>, {
+            id: () => string;
+            color: string;
+        }>>> & {
+            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "update:modelValue": (value: boolean) => void;
+        }, string, {
+            id: string;
+            color: 'red' | 'indigo' | 'jade';
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+        /**
+         * A unique identifier for the checkbox on the whole page.
+         * It will be used to give match label with input for a11y.
+         */
+        id?: string | undefined;
+        /**
+         * Name attribute of the <input type="checkbox"/>.
+         */
+        name?: string | undefined;
+        /**
+         * Is the checkbox checked when it is first rendered.
+         */
+        checked?: boolean | undefined;
+        /**
+         * The color of the background in the checkbox.
+         * The checkmark will always be white.
+         */
+        color?: "indigo" | "red" | "jade" | undefined;
+        /**
+         * If the checkbox is disabled, it will not be clickable.
+         */
+        disabled?: boolean | undefined;
+        modelValue?: boolean | undefined;
+        /**
+         * Label for the checkbox.
+         * It is very important to set this to make the checkbox accessible.
+         */
+        label?: string | undefined;
+    }>, {
+        id: () => string;
+        color: string;
+    }>>> & {
+        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * A unique identifier for the checkbox on the whole page.
      * It will be used to give match label with input for a11y.
@@ -28,48 +180,20 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
      */
     label?: string | undefined;
 }>, {
-    id: string;
-    color: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    /**
-     * A unique identifier for the checkbox on the whole page.
-     * It will be used to give match label with input for a11y.
-     */
-    id?: string | undefined;
-    /**
-     * Name attribute of the <input type="checkbox"/>.
-     */
-    name?: string | undefined;
-    /**
-     * Is the checkbox checked when it is first rendered.
-     */
-    checked?: boolean | undefined;
-    /**
-     * The color of the background in the checkbox.
-     * The checkmark will always be white.
-     */
-    color?: "indigo" | "red" | "jade" | undefined;
-    /**
-     * If the checkbox is disabled, it will not be clickable.
-     */
-    disabled?: boolean | undefined;
-    modelValue?: boolean | undefined;
-    /**
-     * Label for the checkbox.
-     * It is very important to set this to make the checkbox accessible.
-     */
-    label?: string | undefined;
-}>, {
-    id: string;
+    id: () => string;
     color: string;
 }>>> & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}, {
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => void;
+}, string, {
     id: string;
     color: 'red' | 'indigo' | 'jade';
-}>;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        label: (_: {}) => any;
+    };
+});
 export default _default;
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 declare type __VLS_TypePropsToRuntimeProps<T> = {

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../Checkbox.vue.ts"],"names":[],"mappings":";IAiFI;;;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;;AAvFrC,wBAoJK;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;KAE5B,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":";;;;;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"}

package/dist/{index.es.js → index.es.mjs}

@@ -1,4 +1,4 @@
-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 { h as k, defineComponent as p, ref as f, computed as y, openBlock as s, createElementBlock as m, createElementVNode as d, createBlock as C, unref as b, 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 = ({
@@ -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, i) => (S.includes(i) || (u[i] = a[i]), u), {}), r = {
     width: o,
     height: o,
     fill: "none",
@@ -30,13 +30,13 @@ const j = ({
     compiledClasses: o
   }));
 }, B = { class: "relative flex items-center" }, O = ["id", "name", "disabled", "checked"], V = ["for"];
-function E() {
+function N() {
   return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, "");
 }
 const D = /* @__PURE__ */ p({
   __name: "Checkbox",
   props: {
-    id: { default: E() },
+    id: { default: () => N() },
     name: null,
     checked: { type: Boolean },
     color: { default: "indigo" },
@@ -58,8 +58,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) => (s(), m("div", B, [
+      d("input", {
         id: e.id,
         class: "absolute inset-0 w-0 h-0 opacity-0",
         name: e.name || e.id,
@@ -68,22 +68,25 @@ const D = /* @__PURE__ */ p({
         disabled: o.disabled,
         checked: l.value
       }, null, 40, O),
-      l.value ? (i(), C(m(z), {
-        key: 0,
-        strokeColor: "white",
-        class: "absolute"
-      })) : h("", !0),
-      s("span", {
-        class: g(m(a))
-      }, null, 2),
-      s("label", {
-        class: "block",
+      d("label", {
+        className: "flex items-center",
         for: e.id
       }, [
+        l.value ? (s(), C(b(z), {
+          key: 0,
+          strokeColor: "white",
+          class: "absolute"
+        })) : h("", !0),
+        d("span", {
+          class: g(b(a))
+        }, null, 2),
         v(n.$slots, "label", {}, () => [
-          e.label ? (i(), b("span", {
+          e.label ? (s(), m("span", {
             key: 0,
-            class: g(["ml-2 text-16px leading-normal font-light select-none", e.disabled ? "text-gray-500" : "text-gray-800"])
+            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)
         ])
       ], 8, V)
@@ -93,6 +96,6 @@ const D = /* @__PURE__ */ p({
 export {
   D 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"> */
 
-//# sourceMappingURL=index.es.js.map
+/* <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"> */
+//# sourceMappingURL=index.es.mjs.map