@destyler/checkbox 0.0.3 → 0.0.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.
package/dist/index.d.mts CHANGED
@@ -1,215 +1,4 @@
1
- import * as vue from 'vue';
2
- import { PropType, Component, Ref } from 'vue';
3
- import { AsTag } from '@destyler/primitive';
4
- import { ExtractPublicPropTypes } from '@destyler/shared';
5
-
6
- type CheckedState = boolean | 'indeterminate';
7
-
8
- declare const destylerCheckboxRootProps: {
9
- readonly asChild: {
10
- readonly type: PropType<boolean>;
11
- readonly required: false;
12
- readonly default: false;
13
- };
14
- readonly as: {
15
- readonly type: PropType<AsTag | Component>;
16
- readonly required: false;
17
- readonly default: "button";
18
- };
19
- readonly defaultChecked: {
20
- readonly type: PropType<boolean>;
21
- readonly required: false;
22
- };
23
- readonly checked: {
24
- readonly type: PropType<boolean | "indeterminate">;
25
- readonly required: false;
26
- readonly default: undefined;
27
- };
28
- readonly disabled: {
29
- readonly type: PropType<boolean>;
30
- readonly required: false;
31
- readonly default: false;
32
- };
33
- readonly required: {
34
- readonly type: PropType<boolean>;
35
- readonly required: false;
36
- };
37
- readonly name: {
38
- readonly type: PropType<string>;
39
- readonly required: false;
40
- };
41
- readonly value: {
42
- readonly type: PropType<string>;
43
- readonly required: false;
44
- readonly default: "on";
45
- };
46
- readonly id: {
47
- readonly type: PropType<string>;
48
- readonly required: false;
49
- };
50
- };
51
- type DestylerCheckboxRootProps = ExtractPublicPropTypes<typeof destylerCheckboxRootProps>;
52
- interface CheckboxRootContext {
53
- disabled: Ref<boolean>;
54
- state: Ref<CheckedState>;
55
- }
56
- declare const DestylerCheckboxRoot: vue.DefineComponent<{
57
- readonly asChild: {
58
- readonly type: PropType<boolean>;
59
- readonly required: false;
60
- readonly default: false;
61
- };
62
- readonly as: {
63
- readonly type: PropType<AsTag | Component>;
64
- readonly required: false;
65
- readonly default: "button";
66
- };
67
- readonly defaultChecked: {
68
- readonly type: PropType<boolean>;
69
- readonly required: false;
70
- };
71
- readonly checked: {
72
- readonly type: PropType<boolean | "indeterminate">;
73
- readonly required: false;
74
- readonly default: undefined;
75
- };
76
- readonly disabled: {
77
- readonly type: PropType<boolean>;
78
- readonly required: false;
79
- readonly default: false;
80
- };
81
- readonly required: {
82
- readonly type: PropType<boolean>;
83
- readonly required: false;
84
- };
85
- readonly name: {
86
- readonly type: PropType<string>;
87
- readonly required: false;
88
- };
89
- readonly value: {
90
- readonly type: PropType<string>;
91
- readonly required: false;
92
- readonly default: "on";
93
- };
94
- readonly id: {
95
- readonly type: PropType<string>;
96
- readonly required: false;
97
- };
98
- }, {
99
- disabled: Ref<false> | Ref<true>;
100
- checked: Ref<CheckedState>;
101
- forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
102
- isFormControl: vue.ComputedRef<boolean>;
103
- ariaLabel: vue.ComputedRef<string | null | undefined>;
104
- }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:checked"[], "update:checked", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
105
- readonly asChild: {
106
- readonly type: PropType<boolean>;
107
- readonly required: false;
108
- readonly default: false;
109
- };
110
- readonly as: {
111
- readonly type: PropType<AsTag | Component>;
112
- readonly required: false;
113
- readonly default: "button";
114
- };
115
- readonly defaultChecked: {
116
- readonly type: PropType<boolean>;
117
- readonly required: false;
118
- };
119
- readonly checked: {
120
- readonly type: PropType<boolean | "indeterminate">;
121
- readonly required: false;
122
- readonly default: undefined;
123
- };
124
- readonly disabled: {
125
- readonly type: PropType<boolean>;
126
- readonly required: false;
127
- readonly default: false;
128
- };
129
- readonly required: {
130
- readonly type: PropType<boolean>;
131
- readonly required: false;
132
- };
133
- readonly name: {
134
- readonly type: PropType<string>;
135
- readonly required: false;
136
- };
137
- readonly value: {
138
- readonly type: PropType<string>;
139
- readonly required: false;
140
- readonly default: "on";
141
- };
142
- readonly id: {
143
- readonly type: PropType<string>;
144
- readonly required: false;
145
- };
146
- }>> & {
147
- "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
148
- }, {
149
- readonly checked: boolean | "indeterminate";
150
- readonly asChild: boolean;
151
- readonly as: AsTag | Component;
152
- readonly disabled: boolean;
153
- readonly value: string;
154
- }, {}>;
155
-
156
- declare const destylerCheckboxIndicatorProps: {
157
- readonly asChild: {
158
- readonly type: PropType<boolean>;
159
- readonly required: false;
160
- readonly default: false;
161
- };
162
- readonly as: {
163
- readonly type: PropType<AsTag | Component>;
164
- readonly required: false;
165
- readonly default: "span";
166
- };
167
- readonly forceMount: {
168
- readonly type: PropType<boolean>;
169
- readonly required: false;
170
- readonly default: false;
171
- };
172
- };
173
- type DestylerCheckboxIndicatorProps = ExtractPublicPropTypes<typeof destylerCheckboxIndicatorProps>;
174
- declare const DestylerCheckboxIndicator: vue.DefineComponent<{
175
- readonly asChild: {
176
- readonly type: PropType<boolean>;
177
- readonly required: false;
178
- readonly default: false;
179
- };
180
- readonly as: {
181
- readonly type: PropType<AsTag | Component>;
182
- readonly required: false;
183
- readonly default: "span";
184
- };
185
- readonly forceMount: {
186
- readonly type: PropType<boolean>;
187
- readonly required: false;
188
- readonly default: false;
189
- };
190
- }, {
191
- rootContext: CheckboxRootContext;
192
- forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
193
- }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
194
- readonly asChild: {
195
- readonly type: PropType<boolean>;
196
- readonly required: false;
197
- readonly default: false;
198
- };
199
- readonly as: {
200
- readonly type: PropType<AsTag | Component>;
201
- readonly required: false;
202
- readonly default: "span";
203
- };
204
- readonly forceMount: {
205
- readonly type: PropType<boolean>;
206
- readonly required: false;
207
- readonly default: false;
208
- };
209
- }>>, {
210
- readonly asChild: boolean;
211
- readonly as: AsTag | Component;
212
- readonly forceMount: boolean;
213
- }, {}>;
214
-
215
- export { DestylerCheckboxIndicator, type DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, type DestylerCheckboxRootProps };
1
+ export { CheckboxIndicator, CheckboxIndicatorProps, CheckboxRoot, CheckboxRootProps, checkboxIndicatorProps, checkboxRootProps } from './component.mjs';
2
+ import 'vue';
3
+ import '@destyler/primitive';
4
+ import '@destyler/shared';
package/dist/index.d.ts CHANGED
@@ -1,215 +1,4 @@
1
- import * as vue from 'vue';
2
- import { PropType, Component, Ref } from 'vue';
3
- import { AsTag } from '@destyler/primitive';
4
- import { ExtractPublicPropTypes } from '@destyler/shared';
5
-
6
- type CheckedState = boolean | 'indeterminate';
7
-
8
- declare const destylerCheckboxRootProps: {
9
- readonly asChild: {
10
- readonly type: PropType<boolean>;
11
- readonly required: false;
12
- readonly default: false;
13
- };
14
- readonly as: {
15
- readonly type: PropType<AsTag | Component>;
16
- readonly required: false;
17
- readonly default: "button";
18
- };
19
- readonly defaultChecked: {
20
- readonly type: PropType<boolean>;
21
- readonly required: false;
22
- };
23
- readonly checked: {
24
- readonly type: PropType<boolean | "indeterminate">;
25
- readonly required: false;
26
- readonly default: undefined;
27
- };
28
- readonly disabled: {
29
- readonly type: PropType<boolean>;
30
- readonly required: false;
31
- readonly default: false;
32
- };
33
- readonly required: {
34
- readonly type: PropType<boolean>;
35
- readonly required: false;
36
- };
37
- readonly name: {
38
- readonly type: PropType<string>;
39
- readonly required: false;
40
- };
41
- readonly value: {
42
- readonly type: PropType<string>;
43
- readonly required: false;
44
- readonly default: "on";
45
- };
46
- readonly id: {
47
- readonly type: PropType<string>;
48
- readonly required: false;
49
- };
50
- };
51
- type DestylerCheckboxRootProps = ExtractPublicPropTypes<typeof destylerCheckboxRootProps>;
52
- interface CheckboxRootContext {
53
- disabled: Ref<boolean>;
54
- state: Ref<CheckedState>;
55
- }
56
- declare const DestylerCheckboxRoot: vue.DefineComponent<{
57
- readonly asChild: {
58
- readonly type: PropType<boolean>;
59
- readonly required: false;
60
- readonly default: false;
61
- };
62
- readonly as: {
63
- readonly type: PropType<AsTag | Component>;
64
- readonly required: false;
65
- readonly default: "button";
66
- };
67
- readonly defaultChecked: {
68
- readonly type: PropType<boolean>;
69
- readonly required: false;
70
- };
71
- readonly checked: {
72
- readonly type: PropType<boolean | "indeterminate">;
73
- readonly required: false;
74
- readonly default: undefined;
75
- };
76
- readonly disabled: {
77
- readonly type: PropType<boolean>;
78
- readonly required: false;
79
- readonly default: false;
80
- };
81
- readonly required: {
82
- readonly type: PropType<boolean>;
83
- readonly required: false;
84
- };
85
- readonly name: {
86
- readonly type: PropType<string>;
87
- readonly required: false;
88
- };
89
- readonly value: {
90
- readonly type: PropType<string>;
91
- readonly required: false;
92
- readonly default: "on";
93
- };
94
- readonly id: {
95
- readonly type: PropType<string>;
96
- readonly required: false;
97
- };
98
- }, {
99
- disabled: Ref<false> | Ref<true>;
100
- checked: Ref<CheckedState>;
101
- forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
102
- isFormControl: vue.ComputedRef<boolean>;
103
- ariaLabel: vue.ComputedRef<string | null | undefined>;
104
- }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:checked"[], "update:checked", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
105
- readonly asChild: {
106
- readonly type: PropType<boolean>;
107
- readonly required: false;
108
- readonly default: false;
109
- };
110
- readonly as: {
111
- readonly type: PropType<AsTag | Component>;
112
- readonly required: false;
113
- readonly default: "button";
114
- };
115
- readonly defaultChecked: {
116
- readonly type: PropType<boolean>;
117
- readonly required: false;
118
- };
119
- readonly checked: {
120
- readonly type: PropType<boolean | "indeterminate">;
121
- readonly required: false;
122
- readonly default: undefined;
123
- };
124
- readonly disabled: {
125
- readonly type: PropType<boolean>;
126
- readonly required: false;
127
- readonly default: false;
128
- };
129
- readonly required: {
130
- readonly type: PropType<boolean>;
131
- readonly required: false;
132
- };
133
- readonly name: {
134
- readonly type: PropType<string>;
135
- readonly required: false;
136
- };
137
- readonly value: {
138
- readonly type: PropType<string>;
139
- readonly required: false;
140
- readonly default: "on";
141
- };
142
- readonly id: {
143
- readonly type: PropType<string>;
144
- readonly required: false;
145
- };
146
- }>> & {
147
- "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
148
- }, {
149
- readonly checked: boolean | "indeterminate";
150
- readonly asChild: boolean;
151
- readonly as: AsTag | Component;
152
- readonly disabled: boolean;
153
- readonly value: string;
154
- }, {}>;
155
-
156
- declare const destylerCheckboxIndicatorProps: {
157
- readonly asChild: {
158
- readonly type: PropType<boolean>;
159
- readonly required: false;
160
- readonly default: false;
161
- };
162
- readonly as: {
163
- readonly type: PropType<AsTag | Component>;
164
- readonly required: false;
165
- readonly default: "span";
166
- };
167
- readonly forceMount: {
168
- readonly type: PropType<boolean>;
169
- readonly required: false;
170
- readonly default: false;
171
- };
172
- };
173
- type DestylerCheckboxIndicatorProps = ExtractPublicPropTypes<typeof destylerCheckboxIndicatorProps>;
174
- declare const DestylerCheckboxIndicator: vue.DefineComponent<{
175
- readonly asChild: {
176
- readonly type: PropType<boolean>;
177
- readonly required: false;
178
- readonly default: false;
179
- };
180
- readonly as: {
181
- readonly type: PropType<AsTag | Component>;
182
- readonly required: false;
183
- readonly default: "span";
184
- };
185
- readonly forceMount: {
186
- readonly type: PropType<boolean>;
187
- readonly required: false;
188
- readonly default: false;
189
- };
190
- }, {
191
- rootContext: CheckboxRootContext;
192
- forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
193
- }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
194
- readonly asChild: {
195
- readonly type: PropType<boolean>;
196
- readonly required: false;
197
- readonly default: false;
198
- };
199
- readonly as: {
200
- readonly type: PropType<AsTag | Component>;
201
- readonly required: false;
202
- readonly default: "span";
203
- };
204
- readonly forceMount: {
205
- readonly type: PropType<boolean>;
206
- readonly required: false;
207
- readonly default: false;
208
- };
209
- }>>, {
210
- readonly asChild: boolean;
211
- readonly as: AsTag | Component;
212
- readonly forceMount: boolean;
213
- }, {}>;
214
-
215
- export { DestylerCheckboxIndicator, type DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, type DestylerCheckboxRootProps };
1
+ export { CheckboxIndicator, CheckboxIndicatorProps, CheckboxRoot, CheckboxRootProps, checkboxIndicatorProps, checkboxRootProps } from './component.js';
2
+ import 'vue';
3
+ import '@destyler/primitive';
4
+ import '@destyler/shared';
package/dist/index.mjs CHANGED
@@ -1,170 +1,7 @@
1
- import { defineComponent, toRef, computed, withDirectives, h, mergeProps, renderSlot } from 'vue';
2
- import { DestylerPrimitive } from '@destyler/primitive';
3
- import { useVModel, useForwardExpose, useFormControl } from '@destyler/composition';
4
- import { createContext } from '@destyler/shared';
5
- import { BindOnceDirective } from '@destyler/directives';
6
- import { DestylerPresence } from '@destyler/presence';
7
-
8
- function isIndeterminate(checked) {
9
- return checked === "indeterminate";
10
- }
11
- function getState(checked) {
12
- return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
13
- }
14
-
15
- const destylerCheckboxRootProps = {
16
- asChild: {
17
- type: Boolean,
18
- required: false,
19
- default: false
20
- },
21
- as: {
22
- type: [String, Object],
23
- required: false,
24
- default: "button"
25
- },
26
- defaultChecked: {
27
- type: Boolean,
28
- required: false
29
- },
30
- checked: {
31
- type: [Boolean, String],
32
- required: false,
33
- default: void 0
34
- },
35
- disabled: {
36
- type: Boolean,
37
- required: false,
38
- default: false
39
- },
40
- required: {
41
- type: Boolean,
42
- required: false
43
- },
44
- name: {
45
- type: String,
46
- required: false
47
- },
48
- value: {
49
- type: String,
50
- required: false,
51
- default: "on"
52
- },
53
- id: {
54
- type: String,
55
- required: false
56
- }
57
- };
58
- const [injectCheckboxRootContext, provideCheckboxRootContext] = createContext("DestylerCheckboxRoot");
59
- const DestylerCheckboxRoot = defineComponent({
60
- name: "DestylerCheckboxRoot",
61
- props: destylerCheckboxRootProps,
62
- emits: ["update:checked"],
63
- setup(props, { emit }) {
64
- const disabledRef = toRef(props.disabled);
65
- const checkedRef = useVModel(props, "checked", emit, {
66
- defaultValue: props.defaultChecked,
67
- passive: props.checked === void 0
68
- });
69
- const { forwardRef, currentElement } = useForwardExpose();
70
- const isFormControl = useFormControl(currentElement);
71
- const ariaLabel = computed(() => props.id && currentElement.value ? document.querySelector(`[for="${props.id}"]`)?.textContent : void 0);
72
- provideCheckboxRootContext({
73
- disabled: disabledRef,
74
- state: checkedRef
75
- });
76
- return {
77
- disabled: disabledRef,
78
- checked: checkedRef,
79
- forwardRef,
80
- isFormControl,
81
- ariaLabel
82
- };
83
- },
84
- render() {
85
- const useVShow = this.isFormControl;
86
- return [
87
- withDirectives(h(DestylerPrimitive, mergeProps(this.$attrs, {
88
- "ref": (el) => this.forwardRef(el),
89
- "role": "checkbox",
90
- "asChild": this.$props.asChild,
91
- "as": this.$props.as,
92
- "type": this.$props.as === "button" ? "button" : void 0,
93
- "aria-checked": isIndeterminate(this.checked) ? "mixed" : this.checked,
94
- "aria-required": false,
95
- "aria-label": this.$attrs["aria-label"] || this.ariaLabel,
96
- "data-state": getState(this.checked),
97
- "data-disabled": this.disabled ? "" : void 0,
98
- "disabled": this.disabled,
99
- "onClick": () => {
100
- this.checked = !this.checked;
101
- }
102
- }), () => this.$slots.default?.()), [
103
- [BindOnceDirective, { id: this.$props.id }]
104
- ]),
105
- useVShow ? h("input", {
106
- "type": "checkbox",
107
- "tabindex": "-1",
108
- "aria-hidden": "",
109
- "value": this.$props.value,
110
- "checked": this.checked,
111
- "name": this.$props.name,
112
- "disabled": this.disabled,
113
- "required": this.$props.required,
114
- "style": {
115
- transform: "translateX(-100%)",
116
- position: "absolute",
117
- pointerEvents: "none",
118
- opacity: 0,
119
- margin: 0
120
- }
121
- }) : null
122
- ];
123
- }
124
- });
125
-
126
- const destylerCheckboxIndicatorProps = {
127
- asChild: {
128
- type: Boolean,
129
- required: false,
130
- default: false
131
- },
132
- as: {
133
- type: [String, Object],
134
- required: false,
135
- default: "span"
136
- },
137
- forceMount: {
138
- type: Boolean,
139
- required: false,
140
- default: false
141
- }
142
- };
143
- const DestylerCheckboxIndicator = defineComponent({
144
- name: "DestylerCheckboxIndicator",
145
- props: destylerCheckboxIndicatorProps,
146
- setup() {
147
- const rootContext = injectCheckboxRootContext();
148
- const { forwardRef } = useForwardExpose();
149
- return {
150
- rootContext,
151
- forwardRef
152
- };
153
- },
154
- render() {
155
- return h(DestylerPresence, {
156
- present: this.$props.forceMount || isIndeterminate(this.rootContext.state.value) || this.rootContext.state.value === true
157
- }, () => h(DestylerPrimitive, mergeProps(this.$attrs, {
158
- "ref": (el) => this.forwardRef(el),
159
- "data-state": getState(this.rootContext.state.value),
160
- "data-disabled": this.rootContext.disabled.value ? "" : void 0,
161
- "asChild": this.$props.asChild,
162
- "as": this.$props.as,
163
- "style": {
164
- pointerEvents: "none"
165
- }
166
- }), () => renderSlot(this.$slots, "default")));
167
- }
168
- });
169
-
170
- export { DestylerCheckboxIndicator, DestylerCheckboxRoot };
1
+ export { CheckboxIndicator, CheckboxRoot, checkboxIndicatorProps, checkboxRootProps } from './component.mjs';
2
+ import 'vue';
3
+ import '@destyler/primitive';
4
+ import '@destyler/composition';
5
+ import '@destyler/shared';
6
+ import '@destyler/directives';
7
+ import '@destyler/presence';
package/dist/resolver.cjs CHANGED
@@ -4,10 +4,10 @@ const name = "@destyler/checkbox";
4
4
 
5
5
  const packageName = name;
6
6
  const checkboxComponentName = [
7
- "DestylerCheckboxRoot",
8
- "DestylerCheckboxIndicator"
7
+ "CheckboxRoot",
8
+ "CheckboxIndicator"
9
9
  ];
10
- function DestylerCheckboxResolver() {
10
+ function CheckboxResolver() {
11
11
  return {
12
12
  type: "component",
13
13
  resolve: (name2) => {
@@ -17,5 +17,5 @@ function DestylerCheckboxResolver() {
17
17
  };
18
18
  }
19
19
 
20
- exports.DestylerCheckboxResolver = DestylerCheckboxResolver;
20
+ exports.CheckboxResolver = CheckboxResolver;
21
21
  exports.checkboxComponentName = checkboxComponentName;
@@ -1,6 +1,6 @@
1
1
  import { ComponentResolver } from 'unplugin-vue-components';
2
2
 
3
3
  declare const checkboxComponentName: string[];
4
- declare function DestylerCheckboxResolver(): ComponentResolver;
4
+ declare function CheckboxResolver(): ComponentResolver;
5
5
 
6
- export { DestylerCheckboxResolver, checkboxComponentName };
6
+ export { CheckboxResolver, checkboxComponentName };
@@ -1,6 +1,6 @@
1
1
  import { ComponentResolver } from 'unplugin-vue-components';
2
2
 
3
3
  declare const checkboxComponentName: string[];
4
- declare function DestylerCheckboxResolver(): ComponentResolver;
4
+ declare function CheckboxResolver(): ComponentResolver;
5
5
 
6
- export { DestylerCheckboxResolver, checkboxComponentName };
6
+ export { CheckboxResolver, checkboxComponentName };
@@ -1,6 +1,6 @@
1
1
  import { ComponentResolver } from 'unplugin-vue-components';
2
2
 
3
3
  declare const checkboxComponentName: string[];
4
- declare function DestylerCheckboxResolver(): ComponentResolver;
4
+ declare function CheckboxResolver(): ComponentResolver;
5
5
 
6
- export { DestylerCheckboxResolver, checkboxComponentName };
6
+ export { CheckboxResolver, checkboxComponentName };
package/dist/resolver.mjs CHANGED
@@ -2,10 +2,10 @@ const name = "@destyler/checkbox";
2
2
 
3
3
  const packageName = name;
4
4
  const checkboxComponentName = [
5
- "DestylerCheckboxRoot",
6
- "DestylerCheckboxIndicator"
5
+ "CheckboxRoot",
6
+ "CheckboxIndicator"
7
7
  ];
8
- function DestylerCheckboxResolver() {
8
+ function CheckboxResolver() {
9
9
  return {
10
10
  type: "component",
11
11
  resolve: (name2) => {
@@ -15,4 +15,4 @@ function DestylerCheckboxResolver() {
15
15
  };
16
16
  }
17
17
 
18
- export { DestylerCheckboxResolver, checkboxComponentName };
18
+ export { CheckboxResolver, checkboxComponentName };