@cypress-design/vue-checkbox 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @cypress-design/vue-checkbox
 
+## 0.4.0
+
+### Minor Changes
+
+- [#51](https://github.com/cypress-io/cypress-design/pull/51) [`ccd8f9a`](https://github.com/cypress-io/cypress-design/commit/ccd8f9a8feb624c0a52deaa9754c76969f43fc1e) Thanks [@elevatebart](https://github.com/elevatebart)! - in the build asset, add a comment containing all used windicss classes in the component
+
+### Patch Changes
+
+- [#57](https://github.com/cypress-io/cypress-design/pull/57) [`6fa7d52`](https://github.com/cypress-io/cypress-design/commit/6fa7d52e409762bd1b32a8b04edaf78765830754) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: move the input for checkboxes outside of label for accessibility
+
+  Source: https://www.a11ymatters.com/pattern/checkbox/
+
+- Updated dependencies [[`ccd8f9a`](https://github.com/cypress-io/cypress-design/commit/ccd8f9a8feb624c0a52deaa9754c76969f43fc1e), [`0866c65`](https://github.com/cypress-io/cypress-design/commit/0866c654f24c36951c98468d789462748606b428), [`43b53eb`](https://github.com/cypress-io/cypress-design/commit/43b53eb6bd10111629239a87374cfcc894eda0e3)]:
+  - @cypress-design/vue-icon@0.5.0
+
+## 0.3.0
+
+### Minor Changes
+
+- [#44](https://github.com/cypress-io/cypress-design/pull/44) [`2fdaf6b`](https://github.com/cypress-io/cypress-design/commit/2fdaf6be6f81a2a851761258347ed213577c5b26) Thanks [@elevatebart](https://github.com/elevatebart)! - Add missing descriptions of props in button, tooltip, checkbox
+
+## 0.2.1
+
+### Patch Changes
+
+- [`e3eb9c7`](https://github.com/cypress-io/cypress-design/commit/e3eb9c7fee2d7a6e0a773e85ed4b73be04d83587) Thanks [@elevatebart](https://github.com/elevatebart)! - downgrade typescript to 4.4 for compat with app
+
+- Updated dependencies [[`e3eb9c7`](https://github.com/cypress-io/cypress-design/commit/e3eb9c7fee2d7a6e0a773e85ed4b73be04d83587)]:
+  - @cypress-design/vue-icon@0.4.2
+
 ## 0.2.0
 
 ### Minor Changes

package/Checkbox.stories.mdx

@@ -30,7 +30,7 @@ import Checkbox from './Checkbox.vue'
         <br />
         <Checkbox label="Unchecked" :color="color"/>
         <br />
-        <Checkbox chedked disabled label="Disabled & checked" :color="color"/>
+        <Checkbox checked disabled label="Disabled & checked" :color="color"/>
         <br />
         <Checkbox disabled label="Disabled & unchecked" :color="color"/>
       `,

package/Checkbox.vue

@@ -1,25 +1,55 @@
+<script lang="ts">
+function uid() {
+  return String(Date.now().toString(32) + Math.random().toString(16)).replace(
+    /\./g,
+    ''
+  )
+}
+</script>
+
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 import { IconCheckmarkSmall } from '@cypress-design/vue-icon'
 
-
-type CheckboxColor = 'red' | 'indigo' | 'jade'
-
 const props = withDefaults(
   defineProps<{
+    /**
+     * A unique identifier for the checkbox on the whole page.
+     * It will be used to give match label with input for a11y.
+     */
     id?: string
+    /**
+     * Name attribute of the <input type="checkbox"/>.
+     */
+    name?: string
+    /**
+     * Is the checkbox checked when it is first rendered.
+     */
+    checked?: boolean
+    /**
+     * The color of the background in the checkbox.
+     * The checkmark will always be white.
+     */
+    color?: 'red' | 'indigo' | 'jade'
+    /**
+     * If the checkbox is disabled, it will not be clickable.
+     */
+    disabled?: boolean
     modelValue?: boolean
-    color?: CheckboxColor
+    /**
+     * Label for the checkbox. 
+     * It is very important to set this to make the checkbox accessible.
+     */
     label?: string
-    disabled?: boolean
-    checked?: boolean
   }>(),
   {
-    id: crypto.randomUUID(),
+    id: uid(),
     color: 'indigo',
   }
 )
 
+
+
 const localChecked = ref(props.modelValue || props.checked)
 
 const emit = defineEmits<{
@@ -47,16 +77,18 @@ const checkboxClasses = computed(() => [
 </script>
 
 <template>
-  <label class="relative flex items-center">
-    <input :id="id" class="absolute inset-0 w-0 h-0 opacity-0" :name="id" type="checkbox" @change="updated"
+  <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" />
-    <slot name="label">
-      <span v-if="label"
-        :class="['block ml-2 text-16px leading-normal font-light select-none', disabled ? 'text-gray-500' : 'text-gray-800']">
-        {{ label }}
-      </span>
-    </slot>
-  </label>
+    <label class="block" :for="id">
+      <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']">
+          {{ label }}
+        </span>
+      </slot>
+    </label>
+  </div>
 </template>

package/dist/Checkbox.vue.d.ts

@@ -1,22 +1,66 @@
 declare const _default: import("vue").DefineComponent<__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;
-    color?: ("indigo" | "red" | "jade") | undefined;
+    /**
+     * Label for the checkbox.
+     * It is very important to set this to make the checkbox accessible.
+     */
     label?: string | undefined;
-    disabled?: boolean | undefined;
-    checked?: boolean | 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;
-    color?: ("indigo" | "red" | "jade") | undefined;
+    /**
+     * Label for the checkbox.
+     * It is very important to set this to make the checkbox accessible.
+     */
     label?: string | undefined;
-    disabled?: boolean | undefined;
-    checked?: boolean | undefined;
 }>, {
     id: string;
     color: string;
@@ -24,7 +68,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }, {
     id: string;
-    color: "indigo" | "red" | "jade";
+    color: 'red' | 'indigo' | 'jade';
 }>;
 export default _default;
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

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

package/dist/index.es.js

@@ -1,137 +1,98 @@
-import { h, defineComponent, ref, computed, openBlock, createElementBlock, createElementVNode, createBlock, unref, createCommentVNode, normalizeClass, renderSlot, toDisplayString } from "vue";
-import * as iconsRegistry from "@cypress-design/icon-registry";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const compileVueIconProperties = (_a) => {
-  var _b = _a, {
-    body,
-    compiledClasses,
-    size,
-    strokeColor,
-    fillColor,
-    secondaryStrokeColor,
-    secondaryFillColor,
-    class: className
-  } = _b, attributes = __objRest(_b, [
-    "body",
-    "compiledClasses",
-    "size",
-    "strokeColor",
-    "fillColor",
-    "secondaryStrokeColor",
-    "secondaryFillColor",
-    "class"
-  ]);
-  const componentProps = __spreadValues({
-    width: size,
-    height: size,
+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 = ({
+  body: e,
+  compiledClasses: t,
+  size: o,
+  class: l,
+  interactiveColorsOnGroup: c,
+  ...a
+}) => {
+  const n = Object.keys(a).reduce((u, d) => (S.includes(d) || (u[d] = a[d]), u), {}), r = {
+    width: o,
+    height: o,
     fill: "none",
-    innerHTML: body
-  }, attributes);
-  if (compiledClasses.length) {
-    componentProps.class = compiledClasses.join(" ");
-  }
-  return componentProps;
-};
-const IconCheckmarkSmall = (props) => {
-  const { sizeWithDefault: size, compiledClasses } = iconsRegistry.getComponentAttributes(__spreadProps(__spreadValues({}, props), { availableSizes: ["16"] }));
-  const iconBodies = {
-    "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"/>'
+    innerHTML: e,
+    ...n
   };
-  const body = iconBodies[size];
-  if (!body) {
-    throw Error(`Icon "checkmark-small" is not available in size ${size}`);
-  }
-  return h("svg", compileVueIconProperties(__spreadProps(__spreadValues({}, props), {
-    size,
-    body,
-    compiledClasses
-  })));
-};
-const _hoisted_1 = { class: "relative flex items-center" };
-const _hoisted_2 = ["id", "name", "disabled", "checked"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
+  return t.length && (r.class = t.join(" ")), r;
+}, z = (e) => {
+  const { sizeWithDefault: t, compiledClasses: o } = w.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({
+    ...e,
+    size: t,
+    body: l,
+    compiledClasses: o
+  }));
+}, B = { class: "relative flex items-center" }, O = ["id", "name", "disabled", "checked"], V = ["for"];
+function E() {
+  return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, "");
+}
+const D = /* @__PURE__ */ p({
+  __name: "Checkbox",
   props: {
-    id: { default: crypto.randomUUID() },
-    modelValue: { type: Boolean },
+    id: { default: E() },
+    name: null,
+    checked: { type: Boolean },
     color: { default: "indigo" },
-    label: null,
     disabled: { type: Boolean },
-    checked: { type: Boolean }
+    modelValue: { type: Boolean },
+    label: null
   },
   emits: ["update:modelValue"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const localChecked = ref(props.modelValue || props.checked);
-    function updated() {
-      localChecked.value = !localChecked.value;
-      emit("update:modelValue", localChecked.value);
+  setup(e, { emit: t }) {
+    const o = e, l = f(o.modelValue || o.checked);
+    function c() {
+      l.value = !l.value, t("update:modelValue", l.value);
     }
-    const checkboxClasses = computed(() => [
+    const a = y(() => [
       "block border-1 rounded h-16px w-16px",
-      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"
+      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"
       } : "border-gray-200 bg-white"
     ]);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1, [
-        createElementVNode("input", {
-          id: __props.id,
-          class: "absolute inset-0 w-0 h-0 opacity-0",
-          name: __props.id,
-          type: "checkbox",
-          onChange: updated,
-          disabled: props.disabled,
-          checked: localChecked.value
-        }, null, 40, _hoisted_2),
-        localChecked.value ? (openBlock(), createBlock(unref(IconCheckmarkSmall), {
-          key: 0,
-          strokeColor: "white",
-          class: "absolute"
-        })) : createCommentVNode("", true),
-        createElementVNode("span", {
-          class: normalizeClass(unref(checkboxClasses))
-        }, null, 2),
-        renderSlot(_ctx.$slots, "label", {}, () => [
-          __props.label ? (openBlock(), createElementBlock("span", {
+    return (n, r) => (i(), b("div", B, [
+      s("input", {
+        id: e.id,
+        class: "absolute inset-0 w-0 h-0 opacity-0",
+        name: e.name || e.id,
+        type: "checkbox",
+        onChange: c,
+        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",
+        for: e.id
+      }, [
+        v(n.$slots, "label", {}, () => [
+          e.label ? (i(), b("span", {
             key: 0,
-            class: normalizeClass(["block ml-2 text-16px leading-normal font-light select-none", __props.disabled ? "text-gray-500" : "text-gray-800"])
-          }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
+            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)
+    ]));
   }
 });
-export { _sfc_main as default };
+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