@cypress-design/vue-checkbox 0.4.2 → 0.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/Checkbox.vue +28 -15
  3. package/CheckboxVue.cy.tsx +18 -1
  4. package/dist/Checkbox.vue.d.ts.map +1 -1
  5. package/dist/index.es.mjs +20 -17
  6. package/dist/index.es.mjs.map +1 -1
  7. package/dist/index.umd.js +2 -2
  8. package/dist/index.umd.js.map +1 -1
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @cypress-design/vue-checkbox
2
2
 
3
+ ## 0.4.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#101](https://github.com/cypress-io/cypress-design/pull/101) [`1630e4c`](https://github.com/cypress-io/cypress-design/commit/1630e4c4200944cf6414cee9e92dcce6b4d8a576) Thanks [@mapsandapps](https://github.com/mapsandapps)! - Fix styles for Checkbox
8
+
9
+ ## 0.4.3
10
+
11
+ ### Patch Changes
12
+
13
+ - [#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
14
+
3
15
  ## 0.4.2
4
16
 
5
17
  ### Patch Changes
package/Checkbox.vue CHANGED
@@ -37,7 +37,7 @@ const props = withDefaults(
37
37
  disabled?: boolean
38
38
  modelValue?: boolean
39
39
  /**
40
- * Label for the checkbox.
40
+ * Label for the checkbox.
41
41
  * It is very important to set this to make the checkbox accessible.
42
42
  */
43
43
  label?: string
@@ -48,8 +48,6 @@ const props = withDefaults(
48
48
  }
49
49
  )
50
50
 
51
-
52
-
53
51
  const localChecked = ref(props.modelValue || props.checked)
54
52
 
55
53
  const emit = defineEmits<{
@@ -62,30 +60,45 @@ function updated() {
62
60
  }
63
61
 
64
62
  const checkboxClasses = computed(() => [
65
- 'block border-1 rounded h-16px w-16px',
63
+ 'block border-1 border-solid rounded h-16px w-16px',
66
64
  props.disabled
67
65
  ? 'border-gray-200 bg-gray-100'
68
66
  : localChecked.value
69
- ? {
67
+ ? {
70
68
  'border-indigo-500 bg-indigo-400': props.color === 'indigo',
71
69
  'border-jade-500 bg-jade-400': props.color === 'jade',
72
70
  'border-red-500 bg-red-400': props.color === 'red',
73
71
  }
74
- : 'border-gray-200 bg-white']
75
- )
76
-
72
+ : 'border-gray-200 bg-white',
73
+ ])
77
74
  </script>
78
75
 
79
76
  <template>
80
77
  <div class="relative flex items-center">
81
- <input :id="id" class="absolute inset-0 w-0 h-0 opacity-0" :name="name || id" type="checkbox" @change="updated"
82
- :disabled="props.disabled" :checked="localChecked" />
83
- <IconCheckmarkSmall v-if="localChecked" strokeColor="white" class="absolute" />
84
- <span :class="checkboxClasses" />
85
- <label class="block" :for="id">
78
+ <input
79
+ :id="id"
80
+ class="absolute inset-0 w-0 h-0 opacity-0"
81
+ :name="name || id"
82
+ type="checkbox"
83
+ @change="updated"
84
+ :disabled="props.disabled"
85
+ :checked="localChecked"
86
+ />
87
+ <label className="flex items-center" :for="id">
88
+ <IconCheckmarkSmall
89
+ v-if="localChecked"
90
+ strokeColor="white"
91
+ class="absolute"
92
+ />
93
+ <span :class="checkboxClasses" />
86
94
  <slot name="label">
87
- <span v-if="label"
88
- :class="['ml-2 text-16px leading-normal font-light select-none', disabled ? 'text-gray-500' : 'text-gray-800']">
95
+ <span
96
+ v-if="label"
97
+ :class="[
98
+ 'ml-2 text-16px leading-normal font-light select-none',
99
+ disabled ? 'text-gray-500' : 'text-gray-800',
100
+ ]"
101
+ >
89
102
  {{ label }}
90
103
  </span>
91
104
  </slot>
package/CheckboxVue.cy.tsx CHANGED
@@ -5,7 +5,7 @@ import { mount } from 'cypress/vue'
5
5
  import Checkbox from './Checkbox.vue'
6
6
 
7
7
  describe('<Checkbox />', () => {
8
- it('renders', () => {
8
+ it('changes when the label is clicked', () => {
9
9
  mount(() => {
10
10
  return (
11
11
  <Checkbox
@@ -22,6 +22,23 @@ describe('<Checkbox />', () => {
22
22
  cy.get('input[type="checkbox"]').should('not.be.checked')
23
23
  })
24
24
 
25
+ it('changes when checkbox is clicked', () => {
26
+ mount(() => {
27
+ return (
28
+ <Checkbox
29
+ label="Welcome guide settings"
30
+ id="welcome-opt-out"
31
+ checked
32
+ class="m-2 px-2 py-1 border-1 border-gray-300 rounded"
33
+ />
34
+ )
35
+ })
36
+
37
+ cy.get('input[type="checkbox"]').should('be.checked')
38
+ cy.get('svg').click()
39
+ cy.get('input[type="checkbox"]').should('not.be.checked')
40
+ })
41
+
25
42
  it('renders vModel', () => {
26
43
  const isChecked = ref(false)
27
44
  mount(() => {
package/dist/Checkbox.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../Checkbox.vue.ts"],"names":[],"mappings":";;;;;gBAqFS,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;;;;;;AAvFrC,wBAmHK;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"}
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"}
package/dist/index.es.mjs CHANGED
@@ -1,4 +1,4 @@
1
- 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";
1
+ import { h as k, defineComponent as p, ref as f, computed as y, openBlock as i, createElementBlock as m, createElementVNode as s, createBlock as C, unref as b, createCommentVNode as h, normalizeClass as g, renderSlot as v, toDisplayString as x } from "vue";
2
2
  import * as w from "@cypress-design/icon-registry";
3
3
  import { ICON_COLOR_PROP_NAMES as S } from "@cypress-design/icon-registry";
4
4
  const j = ({
@@ -30,13 +30,13 @@ const j = ({
30
30
  compiledClasses: o
31
31
  }));
32
32
  }, B = { class: "relative flex items-center" }, O = ["id", "name", "disabled", "checked"], V = ["for"];
33
- function E() {
33
+ function N() {
34
34
  return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, "");
35
35
  }
36
36
  const D = /* @__PURE__ */ p({
37
37
  __name: "Checkbox",
38
38
  props: {
39
- id: { default: () => E() },
39
+ id: { default: () => N() },
40
40
  name: null,
41
41
  checked: { type: Boolean },
42
42
  color: { default: "indigo" },
@@ -51,14 +51,14 @@ const D = /* @__PURE__ */ p({
51
51
  l.value = !l.value, t("update:modelValue", l.value);
52
52
  }
53
53
  const a = y(() => [
54
- "block border-1 rounded h-16px w-16px",
54
+ "block border-1 border-solid rounded h-16px w-16px",
55
55
  o.disabled ? "border-gray-200 bg-gray-100" : l.value ? {
56
56
  "border-indigo-500 bg-indigo-400": o.color === "indigo",
57
57
  "border-jade-500 bg-jade-400": o.color === "jade",
58
58
  "border-red-500 bg-red-400": o.color === "red"
59
59
  } : "border-gray-200 bg-white"
60
60
  ]);
61
- return (n, r) => (i(), b("div", B, [
61
+ return (n, r) => (i(), m("div", B, [
62
62
  s("input", {
63
63
  id: e.id,
64
64
  class: "absolute inset-0 w-0 h-0 opacity-0",
@@ -68,22 +68,25 @@ const D = /* @__PURE__ */ p({
68
68
  disabled: o.disabled,
69
69
  checked: l.value
70
70
  }, null, 40, O),
71
- l.value ? (i(), C(m(z), {
72
- key: 0,
73
- strokeColor: "white",
74
- class: "absolute"
75
- })) : h("", !0),
76
- s("span", {
77
- class: g(m(a))
78
- }, null, 2),
79
71
  s("label", {
80
- class: "block",
72
+ className: "flex items-center",
81
73
  for: e.id
82
74
  }, [
75
+ l.value ? (i(), C(b(z), {
76
+ key: 0,
77
+ strokeColor: "white",
78
+ class: "absolute"
79
+ })) : h("", !0),
80
+ s("span", {
81
+ class: g(b(a))
82
+ }, null, 2),
83
83
  v(n.$slots, "label", {}, () => [
84
- e.label ? (i(), b("span", {
84
+ e.label ? (i(), m("span", {
85
85
  key: 0,
86
- class: g(["ml-2 text-16px leading-normal font-light select-none", e.disabled ? "text-gray-500" : "text-gray-800"])
86
+ class: g([
87
+ "ml-2 text-16px leading-normal font-light select-none",
88
+ e.disabled ? "text-gray-500" : "text-gray-800"
89
+ ])
87
90
  }, x(e.label), 3)) : h("", !0)
88
91
  ])
89
92
  ], 8, V)
@@ -94,5 +97,5 @@ export {
94
97
  D as default
95
98
  };
96
99
 
97
- /* <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"> */
100
+ /* <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"> */
98
101
  //# sourceMappingURL=index.es.mjs.map