@cypress-design/vue-checkbox 0.4.1 → 0.4.2

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 +9 -0
  2. package/dist/Checkbox.vue.d.ts +161 -37
  3. package/dist/Checkbox.vue.d.ts.map +1 -1
  4. package/dist/{index.es.js → index.es.mjs} +26 -28
  5. package/dist/index.es.mjs.map +1 -0
  6. package/dist/index.umd.js +2 -2
  7. package/dist/index.umd.js.map +1 -1
  8. package/package.json +3 -3
  9. package/dist/index.es.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @cypress-design/vue-checkbox
2
2
 
3
+ ## 0.4.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#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`
8
+
9
+ - Updated dependencies [[`8c577fb`](https://github.com/cypress-io/cypress-design/commit/8c577fb0c6a0411cf8218dfe78281834df3d6f13)]:
10
+ - @cypress-design/vue-icon@0.5.2
11
+
3
12
  ## 0.4.1
4
13
 
5
14
  ### Patch Changes
package/dist/Checkbox.vue.d.ts CHANGED
@@ -1,38 +1,156 @@
1
- declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
2
- /**
3
- * A unique identifier for the checkbox on the whole page.
4
- * It will be used to give match label with input for a11y.
5
- */
6
- id?: string | undefined;
7
- /**
8
- * Name attribute of the <input type="checkbox"/>.
9
- */
10
- name?: string | undefined;
11
- /**
12
- * Is the checkbox checked when it is first rendered.
13
- */
14
- checked?: boolean | undefined;
15
- /**
16
- * The color of the background in the checkbox.
17
- * The checkmark will always be white.
18
- */
19
- color?: "indigo" | "red" | "jade" | undefined;
20
- /**
21
- * If the checkbox is disabled, it will not be clickable.
22
- */
23
- disabled?: boolean | undefined;
24
- modelValue?: boolean | undefined;
25
- /**
26
- * Label for the checkbox.
27
- * It is very important to set this to make the checkbox accessible.
28
- */
29
- label?: string | undefined;
30
- }>, {
31
- id: () => string;
32
- color: string;
33
- }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
34
- "update:modelValue": (value: boolean) => void;
35
- }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
1
+ declare const _default: {
2
+ new (...args: any[]): {
3
+ $: import("vue").ComponentInternalInstance;
4
+ $data: {};
5
+ $props: Partial<{
6
+ id: string;
7
+ color: 'red' | 'indigo' | 'jade';
8
+ }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
9
+ /**
10
+ * A unique identifier for the checkbox on the whole page.
11
+ * It will be used to give match label with input for a11y.
12
+ */
13
+ id?: string | undefined;
14
+ /**
15
+ * Name attribute of the <input type="checkbox"/>.
16
+ */
17
+ name?: string | undefined;
18
+ /**
19
+ * Is the checkbox checked when it is first rendered.
20
+ */
21
+ checked?: boolean | undefined;
22
+ /**
23
+ * The color of the background in the checkbox.
24
+ * The checkmark will always be white.
25
+ */
26
+ color?: "indigo" | "red" | "jade" | undefined;
27
+ /**
28
+ * If the checkbox is disabled, it will not be clickable.
29
+ */
30
+ disabled?: boolean | undefined;
31
+ modelValue?: boolean | undefined;
32
+ /**
33
+ * Label for the checkbox.
34
+ * It is very important to set this to make the checkbox accessible.
35
+ */
36
+ label?: string | undefined;
37
+ }>, {
38
+ id: () => string;
39
+ color: string;
40
+ }>>> & {
41
+ "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
42
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "id" | "color">;
43
+ $attrs: {
44
+ [x: string]: unknown;
45
+ };
46
+ $refs: {
47
+ [x: string]: unknown;
48
+ };
49
+ $slots: Readonly<{
50
+ [name: string]: import("vue").Slot | undefined;
51
+ }>;
52
+ $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
53
+ $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
54
+ $emit: (event: "update:modelValue", value: boolean) => void;
55
+ $el: any;
56
+ $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
57
+ /**
58
+ * A unique identifier for the checkbox on the whole page.
59
+ * It will be used to give match label with input for a11y.
60
+ */
61
+ id?: string | undefined;
62
+ /**
63
+ * Name attribute of the <input type="checkbox"/>.
64
+ */
65
+ name?: string | undefined;
66
+ /**
67
+ * Is the checkbox checked when it is first rendered.
68
+ */
69
+ checked?: boolean | undefined;
70
+ /**
71
+ * The color of the background in the checkbox.
72
+ * The checkmark will always be white.
73
+ */
74
+ color?: "indigo" | "red" | "jade" | undefined;
75
+ /**
76
+ * If the checkbox is disabled, it will not be clickable.
77
+ */
78
+ disabled?: boolean | undefined;
79
+ modelValue?: boolean | undefined;
80
+ /**
81
+ * Label for the checkbox.
82
+ * It is very important to set this to make the checkbox accessible.
83
+ */
84
+ label?: string | undefined;
85
+ }>, {
86
+ id: () => string;
87
+ color: string;
88
+ }>>> & {
89
+ "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
90
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
91
+ "update:modelValue": (value: boolean) => void;
92
+ }, string, {
93
+ id: string;
94
+ color: 'red' | 'indigo' | 'jade';
95
+ }> & {
96
+ beforeCreate?: ((() => void) | (() => void)[]) | undefined;
97
+ created?: ((() => void) | (() => void)[]) | undefined;
98
+ beforeMount?: ((() => void) | (() => void)[]) | undefined;
99
+ mounted?: ((() => void) | (() => void)[]) | undefined;
100
+ beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
101
+ updated?: ((() => void) | (() => void)[]) | undefined;
102
+ activated?: ((() => void) | (() => void)[]) | undefined;
103
+ deactivated?: ((() => void) | (() => void)[]) | undefined;
104
+ beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
105
+ beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
106
+ destroyed?: ((() => void) | (() => void)[]) | undefined;
107
+ unmounted?: ((() => void) | (() => void)[]) | undefined;
108
+ renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
109
+ renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
110
+ 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;
111
+ };
112
+ $forceUpdate: () => void;
113
+ $nextTick: typeof import("vue").nextTick;
114
+ $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
115
+ } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
116
+ /**
117
+ * A unique identifier for the checkbox on the whole page.
118
+ * It will be used to give match label with input for a11y.
119
+ */
120
+ id?: string | undefined;
121
+ /**
122
+ * Name attribute of the <input type="checkbox"/>.
123
+ */
124
+ name?: string | undefined;
125
+ /**
126
+ * Is the checkbox checked when it is first rendered.
127
+ */
128
+ checked?: boolean | undefined;
129
+ /**
130
+ * The color of the background in the checkbox.
131
+ * The checkmark will always be white.
132
+ */
133
+ color?: "indigo" | "red" | "jade" | undefined;
134
+ /**
135
+ * If the checkbox is disabled, it will not be clickable.
136
+ */
137
+ disabled?: boolean | undefined;
138
+ modelValue?: boolean | undefined;
139
+ /**
140
+ * Label for the checkbox.
141
+ * It is very important to set this to make the checkbox accessible.
142
+ */
143
+ label?: string | undefined;
144
+ }>, {
145
+ id: () => string;
146
+ color: string;
147
+ }>>> & {
148
+ "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
149
+ } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
150
+ __isFragment?: undefined;
151
+ __isTeleport?: undefined;
152
+ __isSuspense?: undefined;
153
+ } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
36
154
  /**
37
155
  * A unique identifier for the checkbox on the whole page.
38
156
  * It will be used to give match label with input for a11y.
@@ -66,10 +184,16 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
66
184
  color: string;
67
185
  }>>> & {
68
186
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
69
- }, {
187
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
188
+ "update:modelValue": (value: boolean) => void;
189
+ }, string, {
70
190
  id: string;
71
191
  color: 'red' | 'indigo' | 'jade';
72
- }>;
192
+ }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
193
+ $slots: {
194
+ label: (_: {}) => any;
195
+ };
196
+ });
73
197
  export default _default;
74
198
  declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
75
199
  declare type __VLS_TypePropsToRuntimeProps<T> = {
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":";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"}
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"}
package/dist/{index.es.js → index.es.mjs} RENAMED
@@ -1,7 +1,7 @@
1
- import { defineComponent as k, h as p, ref as y, computed as C, openBlock as i, createElementBlock as b, createElementVNode as d, createBlock as v, unref as m, createCommentVNode as h, normalizeClass as g, renderSlot as x, toDisplayString as w } from "vue";
2
- import * as S from "@cypress-design/icon-registry";
3
- import { compileIcon as j, ICON_COLOR_PROP_NAMES as z } from "@cypress-design/icon-registry";
4
- const f = ({
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";
2
+ import * as w from "@cypress-design/icon-registry";
3
+ import { ICON_COLOR_PROP_NAMES as S } from "@cypress-design/icon-registry";
4
+ const j = ({
5
5
  body: e,
6
6
  compiledClasses: t,
7
7
  size: o,
@@ -9,7 +9,7 @@ const f = ({
9
9
  interactiveColorsOnGroup: c,
10
10
  ...a
11
11
  }) => {
12
- const n = Object.keys(a).reduce((u, s) => (z.includes(s) || (u[s] = a[s]), u), {}), r = {
12
+ const n = Object.keys(a).reduce((u, d) => (S.includes(d) || (u[d] = a[d]), u), {}), r = {
13
13
  width: o,
14
14
  height: o,
15
15
  fill: "none",
@@ -17,28 +17,26 @@ const f = ({
17
17
  ...n
18
18
  };
19
19
  return t.length && (r.class = t.join(" ")), r;
20
- };
21
- k((e) => p("svg", f(j(e))));
22
- const B = (e) => {
23
- const { sizeWithDefault: t, compiledClasses: o } = S.getComponentAttributes({ ...e, availableSizes: ["16"] }), l = {
20
+ }, z = (e) => {
21
+ const { sizeWithDefault: t, compiledClasses: o } = w.getComponentAttributes({ ...e, availableSizes: ["16"] }), l = {
24
22
  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"/>'
25
23
  }[t];
26
24
  if (!l)
27
25
  throw Error(`Icon "checkmark-small" is not available in size ${t}`);
28
- return p("svg", f({
26
+ return k("svg", j({
29
27
  ...e,
30
28
  size: t,
31
29
  body: l,
32
30
  compiledClasses: o
33
31
  }));
34
- }, O = { class: "relative flex items-center" }, V = ["id", "name", "disabled", "checked"], E = ["for"];
35
- function M() {
32
+ }, B = { class: "relative flex items-center" }, O = ["id", "name", "disabled", "checked"], V = ["for"];
33
+ function E() {
36
34
  return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, "");
37
35
  }
38
- const I = /* @__PURE__ */ k({
36
+ const D = /* @__PURE__ */ p({
39
37
  __name: "Checkbox",
40
38
  props: {
41
- id: { default: () => M() },
39
+ id: { default: () => E() },
42
40
  name: null,
43
41
  checked: { type: Boolean },
44
42
  color: { default: "indigo" },
@@ -48,11 +46,11 @@ const I = /* @__PURE__ */ k({
48
46
  },
49
47
  emits: ["update:modelValue"],
50
48
  setup(e, { emit: t }) {
51
- const o = e, l = y(o.modelValue || o.checked);
49
+ const o = e, l = f(o.modelValue || o.checked);
52
50
  function c() {
53
51
  l.value = !l.value, t("update:modelValue", l.value);
54
52
  }
55
- const a = C(() => [
53
+ const a = y(() => [
56
54
  "block border-1 rounded h-16px w-16px",
57
55
  o.disabled ? "border-gray-200 bg-gray-100" : l.value ? {
58
56
  "border-indigo-500 bg-indigo-400": o.color === "indigo",
@@ -60,8 +58,8 @@ const I = /* @__PURE__ */ k({
60
58
  "border-red-500 bg-red-400": o.color === "red"
61
59
  } : "border-gray-200 bg-white"
62
60
  ]);
63
- return (n, r) => (i(), b("div", O, [
64
- d("input", {
61
+ return (n, r) => (i(), b("div", B, [
62
+ s("input", {
65
63
  id: e.id,
66
64
  class: "absolute inset-0 w-0 h-0 opacity-0",
67
65
  name: e.name || e.id,
@@ -69,32 +67,32 @@ const I = /* @__PURE__ */ k({
69
67
  onChange: c,
70
68
  disabled: o.disabled,
71
69
  checked: l.value
72
- }, null, 40, V),
73
- l.value ? (i(), v(m(B), {
70
+ }, null, 40, O),
71
+ l.value ? (i(), C(m(z), {
74
72
  key: 0,
75
73
  strokeColor: "white",
76
74
  class: "absolute"
77
75
  })) : h("", !0),
78
- d("span", {
76
+ s("span", {
79
77
  class: g(m(a))
80
78
  }, null, 2),
81
- d("label", {
79
+ s("label", {
82
80
  class: "block",
83
81
  for: e.id
84
82
  }, [
85
- x(n.$slots, "label", {}, () => [
83
+ v(n.$slots, "label", {}, () => [
86
84
  e.label ? (i(), b("span", {
87
85
  key: 0,
88
86
  class: g(["ml-2 text-16px leading-normal font-light select-none", e.disabled ? "text-gray-500" : "text-gray-800"])
89
- }, w(e.label), 3)) : h("", !0)
87
+ }, x(e.label), 3)) : h("", !0)
90
88
  ])
91
- ], 8, E)
89
+ ], 8, V)
92
90
  ]));
93
91
  }
94
92
  });
95
93
  export {
96
- I as default
94
+ D as default
97
95
  };
98
- /* <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"> */
99
96
 
100
- //# sourceMappingURL=index.es.js.map
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"> */
98
+ //# sourceMappingURL=index.es.mjs.map