@cypress-design/vue-checkbox 1.0.0 → 1.1.0
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.
- package/.turbo/turbo-build.log +5 -10
- package/CHANGELOG.md +6 -0
- package/Checkbox.vue +34 -8
- package/dist/Checkbox.vue.d.ts +41 -0
- package/dist/Checkbox.vue.d.ts.map +1 -1
- package/dist/index.es.mjs +46 -41
- package/dist/index.es.mjs.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/package.json +5 -5
- package/vite.config.ts +1 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
|
|
4
|
-
[33mThe CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.[39m
|
|
5
|
-
[36mvite v5.2.12 [32mbuilding for production...[36m[39m
|
|
1
|
+
[33mThe CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.[39m
|
|
2
|
+
[36mvite v5.4.19 [32mbuilding for production...[36m[39m
|
|
6
3
|
transforming...
|
|
7
4
|
[32m✓[39m 4 modules transformed.
|
|
8
5
|
rendering chunks...
|
|
9
6
|
computing gzip size...
|
|
10
|
-
[2mdist/[22m[36mindex.es.mjs [39m[1m[2m3.
|
|
11
|
-
[2mdist/[22m[36mindex.umd.js [39m[1m[2m2.
|
|
12
|
-
[32m✓ built in 2.
|
|
13
|
-
$ yarn vue-tsc --project ./tsconfig.build.json
|
|
14
|
-
$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json
|
|
7
|
+
[2mdist/[22m[36mindex.es.mjs [39m[1m[2m3.35 kB[22m[1m[22m[2m │ gzip: 1.43 kB[22m[2m │ map: 6.32 kB[22m
|
|
8
|
+
[2mdist/[22m[36mindex.umd.js [39m[1m[2m2.85 kB[22m[1m[22m[2m │ gzip: 1.32 kB[22m[2m │ map: 6.18 kB[22m
|
|
9
|
+
[32m✓ built in 2.13s[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @cypress-design/vue-checkbox
|
|
2
2
|
|
|
3
|
+
## 1.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#733](https://github.com/cypress-io/cypress-design/pull/733) [`5e916fb`](https://github.com/cypress-io/cypress-design/commit/5e916fbe2b83d1503ed80820a85a8705bdcaeef1) Thanks [@jennifer-shehane](https://github.com/jennifer-shehane)! - Depend on `@cypress-design/vue-icon` and `@cypress-design/react-icon` 3.x. These packages were last published against icon 1.x, so installs stayed on 1.x and missed the 3.x fixes, including tree-shakable named icon imports. None of the icons these components use were renamed or removed in 2.0 or 3.0, so there are no API changes. `@cypress-design/vue-modal` now also lists `@cypress-design/vue-icon` as a dependency instead of a devDependency, since its build imports it at runtime.
|
|
8
|
+
|
|
3
9
|
## 1.0.0
|
|
4
10
|
|
|
5
11
|
### Major Changes
|
package/Checkbox.vue
CHANGED
|
@@ -10,7 +10,10 @@ function uid() {
|
|
|
10
10
|
<script lang="ts" setup>
|
|
11
11
|
import { ref, computed } from 'vue'
|
|
12
12
|
import { IconCheckmarkSmall } from '@cypress-design/vue-icon'
|
|
13
|
-
import {
|
|
13
|
+
import {
|
|
14
|
+
CssCheckboxColors,
|
|
15
|
+
CssClasses,
|
|
16
|
+
} from '@cypress-design/constants-checkbox'
|
|
14
17
|
|
|
15
18
|
const props = withDefaults(
|
|
16
19
|
defineProps<{
|
|
@@ -42,10 +45,30 @@ const props = withDefaults(
|
|
|
42
45
|
* It is very important to set this to make the checkbox accessible.
|
|
43
46
|
*/
|
|
44
47
|
label?: string
|
|
48
|
+
/**
|
|
49
|
+
* Forwarded to the underlying `<input type="checkbox">`. Use `-1`
|
|
50
|
+
* when the checkbox is a decorative affordance inside a wider
|
|
51
|
+
* interactive row (e.g. Select's checkbox-row) — the wrapping row
|
|
52
|
+
* carries the interactive role and keyboard nav, and the input
|
|
53
|
+
* must not be independently focusable to satisfy axe's
|
|
54
|
+
* `nested-interactive` rule.
|
|
55
|
+
*/
|
|
56
|
+
inputTabIndex?: number
|
|
57
|
+
/**
|
|
58
|
+
* When true, the real `<input>` is removed from the accessibility
|
|
59
|
+
* tree and the layout with `display: none`. Use inside a wider
|
|
60
|
+
* interactive row (e.g. Select's checkbox-row) where the row itself
|
|
61
|
+
* is the option — axe's `nested-interactive` rule flags a focusable
|
|
62
|
+
* input inside a clickable row even when the input carries
|
|
63
|
+
* `aria-hidden` / `tabindex="-1"`; `display: none` is the one form
|
|
64
|
+
* axe accepts.
|
|
65
|
+
*/
|
|
66
|
+
hideInput?: boolean
|
|
45
67
|
}>(),
|
|
46
68
|
{
|
|
47
69
|
id: () => uid(),
|
|
48
70
|
color: 'indigo',
|
|
71
|
+
hideInput: false,
|
|
49
72
|
},
|
|
50
73
|
)
|
|
51
74
|
|
|
@@ -84,10 +107,10 @@ function updated() {
|
|
|
84
107
|
|
|
85
108
|
const checkboxClasses = computed(() =>
|
|
86
109
|
props.disabled
|
|
87
|
-
?
|
|
110
|
+
? CssCheckboxColors.disabled
|
|
88
111
|
: localChecked.value
|
|
89
|
-
?
|
|
90
|
-
:
|
|
112
|
+
? CssCheckboxColors[props.color]
|
|
113
|
+
: CssCheckboxColors.empty,
|
|
91
114
|
)
|
|
92
115
|
</script>
|
|
93
116
|
|
|
@@ -95,25 +118,28 @@ const checkboxClasses = computed(() =>
|
|
|
95
118
|
<span class="relative flex items-center">
|
|
96
119
|
<input
|
|
97
120
|
:id="id"
|
|
98
|
-
:class="
|
|
121
|
+
:class="CssClasses.hiddenInput"
|
|
99
122
|
:name="name || id"
|
|
100
123
|
type="checkbox"
|
|
101
124
|
:disabled="props.disabled"
|
|
102
125
|
:checked="localChecked"
|
|
126
|
+
:tabindex="inputTabIndex"
|
|
127
|
+
:aria-hidden="hideInput || undefined"
|
|
128
|
+
:style="hideInput ? { display: 'none' } : undefined"
|
|
103
129
|
@change="updated"
|
|
104
130
|
/>
|
|
105
|
-
<label :class="
|
|
131
|
+
<label :class="CssClasses.labelTag" :for="id">
|
|
106
132
|
<IconCheckmarkSmall
|
|
107
133
|
v-if="localChecked"
|
|
108
134
|
strokeColor="white"
|
|
109
135
|
class="absolute"
|
|
110
136
|
/>
|
|
111
|
-
<span :class="[checkboxClasses,
|
|
137
|
+
<span :class="[checkboxClasses, CssClasses.visibleCheckbox]" />
|
|
112
138
|
<slot name="label">
|
|
113
139
|
<span
|
|
114
140
|
v-if="label"
|
|
115
141
|
:class="[
|
|
116
|
-
|
|
142
|
+
CssClasses.trueLabel,
|
|
117
143
|
disabled ? 'text-gray-500' : 'text-gray-800',
|
|
118
144
|
]"
|
|
119
145
|
>
|
package/dist/Checkbox.vue.d.ts
CHANGED
|
@@ -27,9 +27,29 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
27
27
|
* It is very important to set this to make the checkbox accessible.
|
|
28
28
|
*/
|
|
29
29
|
label?: string | undefined;
|
|
30
|
+
/**
|
|
31
|
+
* Forwarded to the underlying `<input type="checkbox">`. Use `-1`
|
|
32
|
+
* when the checkbox is a decorative affordance inside a wider
|
|
33
|
+
* interactive row (e.g. Select's checkbox-row) — the wrapping row
|
|
34
|
+
* carries the interactive role and keyboard nav, and the input
|
|
35
|
+
* must not be independently focusable to satisfy axe's
|
|
36
|
+
* `nested-interactive` rule.
|
|
37
|
+
*/
|
|
38
|
+
inputTabIndex?: number | undefined;
|
|
39
|
+
/**
|
|
40
|
+
* When true, the real `<input>` is removed from the accessibility
|
|
41
|
+
* tree and the layout with `display: none`. Use inside a wider
|
|
42
|
+
* interactive row (e.g. Select's checkbox-row) where the row itself
|
|
43
|
+
* is the option — axe's `nested-interactive` rule flags a focusable
|
|
44
|
+
* input inside a clickable row even when the input carries
|
|
45
|
+
* `aria-hidden` / `tabindex="-1"`; `display: none` is the one form
|
|
46
|
+
* axe accepts.
|
|
47
|
+
*/
|
|
48
|
+
hideInput?: boolean | undefined;
|
|
30
49
|
}>, {
|
|
31
50
|
id: () => string;
|
|
32
51
|
color: string;
|
|
52
|
+
hideInput: boolean;
|
|
33
53
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
34
54
|
"update:modelValue": (value: boolean | string[]) => void;
|
|
35
55
|
change: (value: boolean) => void;
|
|
@@ -62,15 +82,36 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
62
82
|
* It is very important to set this to make the checkbox accessible.
|
|
63
83
|
*/
|
|
64
84
|
label?: string | undefined;
|
|
85
|
+
/**
|
|
86
|
+
* Forwarded to the underlying `<input type="checkbox">`. Use `-1`
|
|
87
|
+
* when the checkbox is a decorative affordance inside a wider
|
|
88
|
+
* interactive row (e.g. Select's checkbox-row) — the wrapping row
|
|
89
|
+
* carries the interactive role and keyboard nav, and the input
|
|
90
|
+
* must not be independently focusable to satisfy axe's
|
|
91
|
+
* `nested-interactive` rule.
|
|
92
|
+
*/
|
|
93
|
+
inputTabIndex?: number | undefined;
|
|
94
|
+
/**
|
|
95
|
+
* When true, the real `<input>` is removed from the accessibility
|
|
96
|
+
* tree and the layout with `display: none`. Use inside a wider
|
|
97
|
+
* interactive row (e.g. Select's checkbox-row) where the row itself
|
|
98
|
+
* is the option — axe's `nested-interactive` rule flags a focusable
|
|
99
|
+
* input inside a clickable row even when the input carries
|
|
100
|
+
* `aria-hidden` / `tabindex="-1"`; `display: none` is the one form
|
|
101
|
+
* axe accepts.
|
|
102
|
+
*/
|
|
103
|
+
hideInput?: boolean | undefined;
|
|
65
104
|
}>, {
|
|
66
105
|
id: () => string;
|
|
67
106
|
color: string;
|
|
107
|
+
hideInput: boolean;
|
|
68
108
|
}>>> & {
|
|
69
109
|
"onUpdate:modelValue"?: ((value: boolean | string[]) => any) | undefined;
|
|
70
110
|
onChange?: ((value: boolean) => any) | undefined;
|
|
71
111
|
}, {
|
|
72
112
|
id: string;
|
|
73
113
|
color: 'red' | 'indigo' | 'jade';
|
|
114
|
+
hideInput: boolean;
|
|
74
115
|
}, {}>, {
|
|
75
116
|
label?(_: {}): any;
|
|
76
117
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../Checkbox.vue"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../Checkbox.vue"],"names":[],"mappings":"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"}
|
package/dist/index.es.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { IconCheckmarkSmall as
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as g, ref as y, computed as k, createElementBlock as u, openBlock as i, createElementVNode as s, normalizeStyle as x, normalizeClass as d, unref as o, createBlock as C, createCommentVNode as p, renderSlot as v, toDisplayString as V } from "vue";
|
|
2
|
+
import { IconCheckmarkSmall as I } from "@cypress-design/vue-icon";
|
|
3
|
+
const n = {
|
|
4
4
|
wrapper: "relative flex items-center",
|
|
5
5
|
hiddenInput: "absolute inset-0 w-0 h-0 opacity-0",
|
|
6
6
|
labelTag: "flex items-center",
|
|
@@ -12,14 +12,14 @@ const r = {
|
|
|
12
12
|
red: "border-red-500 bg-red-400",
|
|
13
13
|
disabled: "border-gray-200 bg-gray-100",
|
|
14
14
|
empty: "border-gray-200 bg-white"
|
|
15
|
-
}, w = { class: "relative flex items-center" }, B = ["id", "name", "disabled", "checked"], S = ["for"];
|
|
15
|
+
}, w = { class: "relative flex items-center" }, B = ["id", "name", "disabled", "checked", "tabindex", "aria-hidden"], S = ["for"];
|
|
16
16
|
function A() {
|
|
17
17
|
return String(Date.now().toString(32) + Math.random().toString(16)).replace(
|
|
18
18
|
/\./g,
|
|
19
19
|
""
|
|
20
20
|
);
|
|
21
21
|
}
|
|
22
|
-
const
|
|
22
|
+
const z = /* @__PURE__ */ g({
|
|
23
23
|
__name: "Checkbox",
|
|
24
24
|
props: {
|
|
25
25
|
id: { default: () => A() },
|
|
@@ -28,65 +28,70 @@ const I = /* @__PURE__ */ f({
|
|
|
28
28
|
color: { default: "indigo" },
|
|
29
29
|
disabled: { type: Boolean },
|
|
30
30
|
modelValue: { type: [Boolean, Array] },
|
|
31
|
-
label: {}
|
|
31
|
+
label: {},
|
|
32
|
+
inputTabIndex: {},
|
|
33
|
+
hideInput: { type: Boolean, default: !1 }
|
|
32
34
|
},
|
|
33
35
|
emits: ["update:modelValue", "change"],
|
|
34
|
-
setup(
|
|
35
|
-
const
|
|
36
|
-
(Array.isArray(
|
|
37
|
-
),
|
|
36
|
+
setup(m, { emit: b }) {
|
|
37
|
+
const a = m, l = y(
|
|
38
|
+
(Array.isArray(a.modelValue) ? a.name ? a.modelValue.includes(a.name) : !1 : a.modelValue) || a.checked
|
|
39
|
+
), t = b;
|
|
38
40
|
function h() {
|
|
39
|
-
if (l.value = !l.value, Array.isArray(
|
|
40
|
-
const
|
|
41
|
-
if (!
|
|
41
|
+
if (l.value = !l.value, Array.isArray(a.modelValue)) {
|
|
42
|
+
const e = [...a.modelValue];
|
|
43
|
+
if (!a.name)
|
|
42
44
|
return;
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
+
const r = e.indexOf(a.name);
|
|
46
|
+
r === -1 ? e.push(a.name) : e.splice(r, 1), t("update:modelValue", e);
|
|
45
47
|
} else
|
|
46
|
-
|
|
47
|
-
|
|
48
|
+
t("update:modelValue", l.value);
|
|
49
|
+
t("change", l.value);
|
|
48
50
|
}
|
|
49
|
-
const
|
|
50
|
-
() =>
|
|
51
|
+
const f = k(
|
|
52
|
+
() => a.disabled ? c.disabled : l.value ? c[a.color] : c.empty
|
|
51
53
|
);
|
|
52
|
-
return (
|
|
53
|
-
|
|
54
|
-
id:
|
|
55
|
-
class:
|
|
56
|
-
name:
|
|
54
|
+
return (e, r) => (i(), u("span", w, [
|
|
55
|
+
s("input", {
|
|
56
|
+
id: e.id,
|
|
57
|
+
class: d(o(n).hiddenInput),
|
|
58
|
+
name: e.name || e.id,
|
|
57
59
|
type: "checkbox",
|
|
58
|
-
disabled:
|
|
60
|
+
disabled: a.disabled,
|
|
59
61
|
checked: l.value,
|
|
62
|
+
tabindex: e.inputTabIndex,
|
|
63
|
+
"aria-hidden": e.hideInput || void 0,
|
|
64
|
+
style: x(e.hideInput ? { display: "none" } : void 0),
|
|
60
65
|
onChange: h
|
|
61
|
-
}, null,
|
|
62
|
-
|
|
63
|
-
class:
|
|
64
|
-
for:
|
|
66
|
+
}, null, 46, B),
|
|
67
|
+
s("label", {
|
|
68
|
+
class: d(o(n).labelTag),
|
|
69
|
+
for: e.id
|
|
65
70
|
}, [
|
|
66
|
-
l.value ? (
|
|
71
|
+
l.value ? (i(), C(o(I), {
|
|
67
72
|
key: 0,
|
|
68
73
|
strokeColor: "white",
|
|
69
74
|
class: "absolute"
|
|
70
|
-
})) :
|
|
71
|
-
|
|
72
|
-
class:
|
|
75
|
+
})) : p("", !0),
|
|
76
|
+
s("span", {
|
|
77
|
+
class: d([f.value, o(n).visibleCheckbox])
|
|
73
78
|
}, null, 2),
|
|
74
|
-
|
|
75
|
-
|
|
79
|
+
v(e.$slots, "label", {}, () => [
|
|
80
|
+
e.label ? (i(), u("span", {
|
|
76
81
|
key: 0,
|
|
77
|
-
class:
|
|
78
|
-
o(
|
|
79
|
-
|
|
82
|
+
class: d([
|
|
83
|
+
o(n).trueLabel,
|
|
84
|
+
e.disabled ? "text-gray-500" : "text-gray-800"
|
|
80
85
|
])
|
|
81
|
-
},
|
|
86
|
+
}, V(e.label), 3)) : p("", !0)
|
|
82
87
|
])
|
|
83
88
|
], 10, S)
|
|
84
89
|
]));
|
|
85
90
|
}
|
|
86
91
|
});
|
|
87
92
|
export {
|
|
88
|
-
|
|
93
|
+
z as default
|
|
89
94
|
};
|
|
90
95
|
//# sourceMappingURL=index.es.mjs.map
|
|
91
96
|
|
|
92
|
-
/* <wind-keep class="relative flex items-center absolute text-gray-500 text-gray-800 icon-dark-white
|
|
97
|
+
/* <wind-keep class="relative flex items-center absolute text-gray-500 text-gray-800 icon-dark-white"> */
|
package/dist/index.es.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.
|
|
1
|
+
{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.es.mjs","../Checkbox.vue"],"sourcesContent":["const CssClasses = {\n wrapper: 'relative flex items-center',\n hiddenInput: 'absolute inset-0 w-0 h-0 opacity-0',\n labelTag: 'flex items-center',\n visibleCheckbox: 'border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white',\n trueLabel: 'block ml-[8px] text-[16px] leading-[24px] font-light select-none',\n};\nconst CssCheckboxColors = {\n indigo: 'border-indigo-500 bg-indigo-400',\n jade: 'border-jade-500 bg-jade-400',\n red: 'border-red-500 bg-red-400',\n disabled: 'border-gray-200 bg-gray-100',\n empty: 'border-gray-200 bg-white',\n};\n\nexport { CssCheckboxColors, CssClasses };\n//# sourceMappingURL=index.es.mjs.map\n","<script lang=\"ts\">\nfunction uid() {\n return String(Date.now().toString(32) + Math.random().toString(16)).replace(\n /\\./g,\n '',\n )\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { ref, computed } from 'vue'\nimport { IconCheckmarkSmall } from '@cypress-design/vue-icon'\nimport {\n CssCheckboxColors,\n CssClasses,\n} from '@cypress-design/constants-checkbox'\n\nconst props = withDefaults(\n defineProps<{\n /**\n * A unique identifier for the checkbox on the whole page.\n * It will be used to give match label with input for a11y.\n */\n id?: string\n /**\n * Name attribute of the <input type=\"checkbox\"/>.\n */\n name?: string\n /**\n * Is the checkbox checked when it is first rendered.\n */\n checked?: boolean\n /**\n * The color of the background in the checkbox.\n * The checkmark will always be white.\n */\n color?: 'red' | 'indigo' | 'jade'\n /**\n * If the checkbox is disabled, it will not be clickable.\n */\n disabled?: boolean\n modelValue?: boolean | Array<string>\n /**\n * Label for the checkbox.\n * It is very important to set this to make the checkbox accessible.\n */\n label?: string\n /**\n * Forwarded to the underlying `<input type=\"checkbox\">`. Use `-1`\n * when the checkbox is a decorative affordance inside a wider\n * interactive row (e.g. Select's checkbox-row) — the wrapping row\n * carries the interactive role and keyboard nav, and the input\n * must not be independently focusable to satisfy axe's\n * `nested-interactive` rule.\n */\n inputTabIndex?: number\n /**\n * When true, the real `<input>` is removed from the accessibility\n * tree and the layout with `display: none`. Use inside a wider\n * interactive row (e.g. Select's checkbox-row) where the row itself\n * is the option — axe's `nested-interactive` rule flags a focusable\n * input inside a clickable row even when the input carries\n * `aria-hidden` / `tabindex=\"-1\"`; `display: none` is the one form\n * axe accepts.\n */\n hideInput?: boolean\n }>(),\n {\n id: () => uid(),\n color: 'indigo',\n hideInput: false,\n },\n)\n\nconst localChecked = ref(\n (Array.isArray(props.modelValue)\n ? props.name\n ? props.modelValue.includes(props.name)\n : false\n : props.modelValue) || props.checked,\n)\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: boolean | Array<string>]\n change: [value: boolean]\n}>()\n\nfunction updated() {\n localChecked.value = !localChecked.value\n if (Array.isArray(props.modelValue)) {\n const arrayModelValue = [...props.modelValue]\n if (!props.name) {\n return\n }\n const index = arrayModelValue.indexOf(props.name)\n if (index === -1) {\n arrayModelValue.push(props.name)\n } else {\n arrayModelValue.splice(index, 1)\n }\n emit('update:modelValue', arrayModelValue)\n } else {\n emit('update:modelValue', localChecked.value)\n }\n emit('change', localChecked.value)\n}\n\nconst checkboxClasses = computed(() =>\n props.disabled\n ? CssCheckboxColors.disabled\n : localChecked.value\n ? CssCheckboxColors[props.color]\n : CssCheckboxColors.empty,\n)\n</script>\n\n<template>\n <span class=\"relative flex items-center\">\n <input\n :id=\"id\"\n :class=\"CssClasses.hiddenInput\"\n :name=\"name || id\"\n type=\"checkbox\"\n :disabled=\"props.disabled\"\n :checked=\"localChecked\"\n :tabindex=\"inputTabIndex\"\n :aria-hidden=\"hideInput || undefined\"\n :style=\"hideInput ? { display: 'none' } : undefined\"\n @change=\"updated\"\n />\n <label :class=\"CssClasses.labelTag\" :for=\"id\">\n <IconCheckmarkSmall\n v-if=\"localChecked\"\n strokeColor=\"white\"\n class=\"absolute\"\n />\n <span :class=\"[checkboxClasses, CssClasses.visibleCheckbox]\" />\n <slot name=\"label\">\n <span\n v-if=\"label\"\n :class=\"[\n CssClasses.trueLabel,\n disabled ? 'text-gray-500' : 'text-gray-800',\n ]\"\n >\n {{ label }}\n </span>\n </slot>\n </label>\n </span>\n</template>\n"],"names":["CssClasses","CssCheckboxColors","uid","props","__props","localChecked","ref","emit","__emit","updated","arrayModelValue","index","checkboxClasses","computed"],"mappings":";;AAAA,MAAMA,IAAa;AAAA,EACf,SAAS;AAAA,EACT,aAAa;AAAA,EACb,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,WAAW;AACf,GACMC,IAAoB;AAAA,EACtB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AAAA,EACV,OAAO;AACX;ACZA,SAASC,IAAM;AACb,SAAO,OAAO,KAAK,IAAA,EAAM,SAAS,EAAE,IAAI,KAAK,OAAA,EAAS,SAAS,EAAE,CAAC,EAAE;AAAA,IAClE;AAAA,IACA;AAAA,EAAA;AAEJ;;;;;;;;;;;;;;;;AAWA,UAAMC,IAAQC,GAyDRC,IAAeC;AAAA,OAClB,MAAM,QAAQH,EAAM,UAAU,IAC3BA,EAAM,OACJA,EAAM,WAAW,SAASA,EAAM,IAAI,IACpC,KACFA,EAAM,eAAeA,EAAM;AAAA,IAAA,GAG3BI,IAAOC;AAKb,aAASC,IAAU;AAEjB,UADAJ,EAAa,QAAQ,CAACA,EAAa,OAC/B,MAAM,QAAQF,EAAM,UAAU,GAAG;AACnC,cAAMO,IAAkB,CAAC,GAAGP,EAAM,UAAU;AAC5C,YAAI,CAACA,EAAM;AACT;AAEF,cAAMQ,IAAQD,EAAgB,QAAQP,EAAM,IAAI;AAChD,QAAIQ,MAAU,KACZD,EAAgB,KAAKP,EAAM,IAAI,IAE/BO,EAAgB,OAAOC,GAAO,CAAC,GAEjCJ,EAAK,qBAAqBG,CAAe;AAAA,MAC3C;AACE,QAAAH,EAAK,qBAAqBF,EAAa,KAAK;AAE9C,MAAAE,EAAK,UAAUF,EAAa,KAAK;AAAA,IACnC;AAEA,UAAMO,IAAkBC;AAAA,MAAS,MAC/BV,EAAM,WACFF,EAAkB,WAClBI,EAAa,QACXJ,EAAkBE,EAAM,KAAK,IAC7BF,EAAkB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(e,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("vue"),require("@cypress-design/vue-icon")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/vue-icon"],o):(e=typeof globalThis<"u"?globalThis:e||self,e.Checkbox=o(e.Vue,e.
|
|
1
|
+
(function(e,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("vue"),require("@cypress-design/vue-icon")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/vue-icon"],o):(e=typeof globalThis<"u"?globalThis:e||self,e.Checkbox=o(e.Vue,e.Icon))})(this,function(e,o){"use strict";const t={wrapper:"relative flex items-center",hiddenInput:"absolute inset-0 w-0 h-0 opacity-0",labelTag:"flex items-center",visibleCheckbox:"border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white",trueLabel:"block ml-[8px] text-[16px] leading-[24px] font-light select-none"},d={indigo:"border-indigo-500 bg-indigo-400",jade:"border-jade-500 bg-jade-400",red:"border-red-500 bg-red-400",disabled:"border-gray-200 bg-gray-100",empty:"border-gray-200 bg-white"},s={class:"relative flex items-center"},c=["id","name","disabled","checked","tabindex","aria-hidden"],m=["for"];function p(){return String(Date.now().toString(32)+Math.random().toString(16)).replace(/\./g,"")}return e.defineComponent({__name:"Checkbox",props:{id:{default:()=>p()},name:{},checked:{type:Boolean},color:{default:"indigo"},disabled:{type:Boolean},modelValue:{type:[Boolean,Array]},label:{},inputTabIndex:{},hideInput:{type:Boolean,default:!1}},emits:["update:modelValue","change"],setup(u,{emit:b}){const a=u,l=e.ref((Array.isArray(a.modelValue)?a.name?a.modelValue.includes(a.name):!1:a.modelValue)||a.checked),i=b;function f(){if(l.value=!l.value,Array.isArray(a.modelValue)){const n=[...a.modelValue];if(!a.name)return;const r=n.indexOf(a.name);r===-1?n.push(a.name):n.splice(r,1),i("update:modelValue",n)}else i("update:modelValue",l.value);i("change",l.value)}const h=e.computed(()=>a.disabled?d.disabled:l.value?d[a.color]:d.empty);return(n,r)=>(e.openBlock(),e.createElementBlock("span",s,[e.createElementVNode("input",{id:n.id,class:e.normalizeClass(e.unref(t).hiddenInput),name:n.name||n.id,type:"checkbox",disabled:a.disabled,checked:l.value,tabindex:n.inputTabIndex,"aria-hidden":n.hideInput||void 0,style:e.normalizeStyle(n.hideInput?{display:"none"}:void 0),onChange:f},null,46,c),e.createElementVNode("label",{class:e.normalizeClass(e.unref(t).labelTag),for:n.id},[l.value?(e.openBlock(),e.createBlock(e.unref(o.IconCheckmarkSmall),{key:0,strokeColor:"white",class:"absolute"})):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass([h.value,e.unref(t).visibleCheckbox])},null,2),e.renderSlot(n.$slots,"label",{},()=>[n.label?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([e.unref(t).trueLabel,n.disabled?"text-gray-500":"text-gray-800"])},e.toDisplayString(n.label),3)):e.createCommentVNode("",!0)])],10,m)]))}})});
|
|
2
2
|
//# sourceMappingURL=index.umd.js.map
|
|
3
3
|
|
|
4
|
-
/* <wind-keep class="relative flex items-center absolute text-gray-500 text-gray-800 icon-dark-white
|
|
4
|
+
/* <wind-keep class="relative flex items-center absolute text-gray-500 text-gray-800 icon-dark-white"> */
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.
|
|
1
|
+
{"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.es.mjs","../Checkbox.vue"],"sourcesContent":["const CssClasses = {\n wrapper: 'relative flex items-center',\n hiddenInput: 'absolute inset-0 w-0 h-0 opacity-0',\n labelTag: 'flex items-center',\n visibleCheckbox: 'border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white',\n trueLabel: 'block ml-[8px] text-[16px] leading-[24px] font-light select-none',\n};\nconst CssCheckboxColors = {\n indigo: 'border-indigo-500 bg-indigo-400',\n jade: 'border-jade-500 bg-jade-400',\n red: 'border-red-500 bg-red-400',\n disabled: 'border-gray-200 bg-gray-100',\n empty: 'border-gray-200 bg-white',\n};\n\nexport { CssCheckboxColors, CssClasses };\n//# sourceMappingURL=index.es.mjs.map\n","<script lang=\"ts\">\nfunction uid() {\n return String(Date.now().toString(32) + Math.random().toString(16)).replace(\n /\\./g,\n '',\n )\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { ref, computed } from 'vue'\nimport { IconCheckmarkSmall } from '@cypress-design/vue-icon'\nimport {\n CssCheckboxColors,\n CssClasses,\n} from '@cypress-design/constants-checkbox'\n\nconst props = withDefaults(\n defineProps<{\n /**\n * A unique identifier for the checkbox on the whole page.\n * It will be used to give match label with input for a11y.\n */\n id?: string\n /**\n * Name attribute of the <input type=\"checkbox\"/>.\n */\n name?: string\n /**\n * Is the checkbox checked when it is first rendered.\n */\n checked?: boolean\n /**\n * The color of the background in the checkbox.\n * The checkmark will always be white.\n */\n color?: 'red' | 'indigo' | 'jade'\n /**\n * If the checkbox is disabled, it will not be clickable.\n */\n disabled?: boolean\n modelValue?: boolean | Array<string>\n /**\n * Label for the checkbox.\n * It is very important to set this to make the checkbox accessible.\n */\n label?: string\n /**\n * Forwarded to the underlying `<input type=\"checkbox\">`. Use `-1`\n * when the checkbox is a decorative affordance inside a wider\n * interactive row (e.g. Select's checkbox-row) — the wrapping row\n * carries the interactive role and keyboard nav, and the input\n * must not be independently focusable to satisfy axe's\n * `nested-interactive` rule.\n */\n inputTabIndex?: number\n /**\n * When true, the real `<input>` is removed from the accessibility\n * tree and the layout with `display: none`. Use inside a wider\n * interactive row (e.g. Select's checkbox-row) where the row itself\n * is the option — axe's `nested-interactive` rule flags a focusable\n * input inside a clickable row even when the input carries\n * `aria-hidden` / `tabindex=\"-1\"`; `display: none` is the one form\n * axe accepts.\n */\n hideInput?: boolean\n }>(),\n {\n id: () => uid(),\n color: 'indigo',\n hideInput: false,\n },\n)\n\nconst localChecked = ref(\n (Array.isArray(props.modelValue)\n ? props.name\n ? props.modelValue.includes(props.name)\n : false\n : props.modelValue) || props.checked,\n)\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: boolean | Array<string>]\n change: [value: boolean]\n}>()\n\nfunction updated() {\n localChecked.value = !localChecked.value\n if (Array.isArray(props.modelValue)) {\n const arrayModelValue = [...props.modelValue]\n if (!props.name) {\n return\n }\n const index = arrayModelValue.indexOf(props.name)\n if (index === -1) {\n arrayModelValue.push(props.name)\n } else {\n arrayModelValue.splice(index, 1)\n }\n emit('update:modelValue', arrayModelValue)\n } else {\n emit('update:modelValue', localChecked.value)\n }\n emit('change', localChecked.value)\n}\n\nconst checkboxClasses = computed(() =>\n props.disabled\n ? CssCheckboxColors.disabled\n : localChecked.value\n ? CssCheckboxColors[props.color]\n : CssCheckboxColors.empty,\n)\n</script>\n\n<template>\n <span class=\"relative flex items-center\">\n <input\n :id=\"id\"\n :class=\"CssClasses.hiddenInput\"\n :name=\"name || id\"\n type=\"checkbox\"\n :disabled=\"props.disabled\"\n :checked=\"localChecked\"\n :tabindex=\"inputTabIndex\"\n :aria-hidden=\"hideInput || undefined\"\n :style=\"hideInput ? { display: 'none' } : undefined\"\n @change=\"updated\"\n />\n <label :class=\"CssClasses.labelTag\" :for=\"id\">\n <IconCheckmarkSmall\n v-if=\"localChecked\"\n strokeColor=\"white\"\n class=\"absolute\"\n />\n <span :class=\"[checkboxClasses, CssClasses.visibleCheckbox]\" />\n <slot name=\"label\">\n <span\n v-if=\"label\"\n :class=\"[\n CssClasses.trueLabel,\n disabled ? 'text-gray-500' : 'text-gray-800',\n ]\"\n >\n {{ label }}\n </span>\n </slot>\n </label>\n </span>\n</template>\n"],"names":["CssClasses","CssCheckboxColors","uid","props","__props","localChecked","ref","emit","__emit","updated","arrayModelValue","index","checkboxClasses","computed"],"mappings":"6TAAA,MAAMA,EAAa,CACf,QAAS,6BACT,YAAa,qCACb,SAAU,oBACV,gBAAiB,2FACjB,UAAW,kEACf,EACMC,EAAoB,CACtB,OAAQ,kCACR,KAAM,8BACN,IAAK,4BACL,SAAU,8BACV,MAAO,0BACX,iHCZA,SAASC,GAAM,CACb,OAAO,OAAO,KAAK,IAAA,EAAM,SAAS,EAAE,EAAI,KAAK,OAAA,EAAS,SAAS,EAAE,CAAC,EAAE,QAClE,MACA,EAAA,CAEJ,iTAWA,MAAMC,EAAQC,EAyDRC,EAAeC,EAAAA,KAClB,MAAM,QAAQH,EAAM,UAAU,EAC3BA,EAAM,KACJA,EAAM,WAAW,SAASA,EAAM,IAAI,EACpC,GACFA,EAAM,aAAeA,EAAM,OAAA,EAG3BI,EAAOC,EAKb,SAASC,GAAU,CAEjB,GADAJ,EAAa,MAAQ,CAACA,EAAa,MAC/B,MAAM,QAAQF,EAAM,UAAU,EAAG,CACnC,MAAMO,EAAkB,CAAC,GAAGP,EAAM,UAAU,EAC5C,GAAI,CAACA,EAAM,KACT,OAEF,MAAMQ,EAAQD,EAAgB,QAAQP,EAAM,IAAI,EAC5CQ,IAAU,GACZD,EAAgB,KAAKP,EAAM,IAAI,EAE/BO,EAAgB,OAAOC,EAAO,CAAC,EAEjCJ,EAAK,oBAAqBG,CAAe,CAC3C,MACEH,EAAK,oBAAqBF,EAAa,KAAK,EAE9CE,EAAK,SAAUF,EAAa,KAAK,CACnC,CAEA,MAAMO,EAAkBC,EAAAA,SAAS,IAC/BV,EAAM,SACFF,EAAkB,SAClBI,EAAa,MACXJ,EAAkBE,EAAM,KAAK,EAC7BF,EAAkB,KAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cypress-design/vue-checkbox",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"*"
|
|
6
6
|
],
|
|
@@ -16,14 +16,14 @@
|
|
|
16
16
|
},
|
|
17
17
|
"scripts": {
|
|
18
18
|
"build": "yarn build:module && yarn build:types",
|
|
19
|
-
"build:module": "yarn vite build",
|
|
20
|
-
"build:types": "yarn vue-tsc --project ./tsconfig.build.json"
|
|
19
|
+
"build:module": "yarn exec vite build",
|
|
20
|
+
"build:types": "yarn exec vue-tsc --project ./tsconfig.build.json"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@cypress-design/
|
|
24
|
-
"@cypress-design/vue-icon": "^1.0.0"
|
|
23
|
+
"@cypress-design/vue-icon": "^3.3.2"
|
|
25
24
|
},
|
|
26
25
|
"devDependencies": {
|
|
26
|
+
"@cypress-design/constants-checkbox": "*",
|
|
27
27
|
"@cypress-design/rollup-plugin-tailwind-keep": "*"
|
|
28
28
|
},
|
|
29
29
|
"license": "MIT"
|
package/vite.config.ts
CHANGED