@destyler/checkbox 0.0.1-beta.9 → 0.0.1

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/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2023-PRESENT Elone Hoo
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -0,0 +1,14 @@
1
+ 'use strict';
2
+
3
+ const index = require('./index.cjs');
4
+ require('vue');
5
+ require('@destyler/primitive');
6
+ require('@destyler/composition');
7
+ require('@destyler/shared');
8
+ require('@destyler/directives');
9
+ require('@destyler/presence');
10
+
11
+
12
+
13
+ exports.DestylerCheckboxIndicator = index.DestylerCheckboxIndicator;
14
+ exports.DestylerCheckboxRoot = index.DestylerCheckboxRoot;
@@ -0,0 +1,4 @@
1
+ export { DestylerCheckboxIndicator, DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, DestylerCheckboxRootProps } from './index.cjs';
2
+ import 'vue';
3
+ import '@destyler/primitive';
4
+ import '@destyler/shared';
@@ -0,0 +1,4 @@
1
+ export { DestylerCheckboxIndicator, DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, DestylerCheckboxRootProps } from './index.mjs';
2
+ import 'vue';
3
+ import '@destyler/primitive';
4
+ import '@destyler/shared';
@@ -0,0 +1,4 @@
1
+ export { DestylerCheckboxIndicator, DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, DestylerCheckboxRootProps } from './index.js';
2
+ import 'vue';
3
+ import '@destyler/primitive';
4
+ import '@destyler/shared';
@@ -0,0 +1,7 @@
1
+ export { DestylerCheckboxIndicator, DestylerCheckboxRoot } from './index.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/index.cjs CHANGED
@@ -15,7 +15,11 @@ function getState(checked) {
15
15
  }
16
16
 
17
17
  const destylerCheckboxRootProps = {
18
- ...primitive.destylerPrimitiveProp,
18
+ asChild: {
19
+ type: Boolean,
20
+ required: false,
21
+ default: false
22
+ },
19
23
  as: {
20
24
  type: [String, Object],
21
25
  required: false,
@@ -53,7 +57,7 @@ const destylerCheckboxRootProps = {
53
57
  required: false
54
58
  }
55
59
  };
56
- const [injectCheckboxRootContext, provideCheckboxRootContext] = shared.createContext("CheckboxRoot");
60
+ const [injectCheckboxRootContext, provideCheckboxRootContext] = shared.createContext("DestylerCheckboxRoot");
57
61
  const DestylerCheckboxRoot = vue.defineComponent({
58
62
  name: "DestylerCheckboxRoot",
59
63
  props: destylerCheckboxRootProps,
@@ -64,7 +68,7 @@ const DestylerCheckboxRoot = vue.defineComponent({
64
68
  defaultValue: props.defaultChecked,
65
69
  passive: props.checked === void 0
66
70
  });
67
- const { customElement, currentElement } = composition.useCustomElement();
71
+ const { forwardRef, currentElement } = composition.useForwardExpose();
68
72
  const isFormControl = composition.useFormControl(currentElement);
69
73
  const ariaLabel = vue.computed(() => props.id && currentElement.value ? document.querySelector(`[for="${props.id}"]`)?.textContent : void 0);
70
74
  provideCheckboxRootContext({
@@ -74,7 +78,7 @@ const DestylerCheckboxRoot = vue.defineComponent({
74
78
  return {
75
79
  disabled: disabledRef,
76
80
  checked: checkedRef,
77
- customElement,
81
+ forwardRef,
78
82
  isFormControl,
79
83
  ariaLabel
80
84
  };
@@ -83,7 +87,7 @@ const DestylerCheckboxRoot = vue.defineComponent({
83
87
  const useVShow = this.isFormControl;
84
88
  return [
85
89
  vue.withDirectives(vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
86
- "ref": "customElement",
90
+ "ref": (el) => this.forwardRef(el),
87
91
  "role": "checkbox",
88
92
  "asChild": this.$props.asChild,
89
93
  "as": this.$props.as,
@@ -97,7 +101,9 @@ const DestylerCheckboxRoot = vue.defineComponent({
97
101
  "onClick": () => {
98
102
  this.checked = !this.checked;
99
103
  }
100
- }), this.$slots.default?.()), [
104
+ }), {
105
+ default: () => this.$slots.default?.()
106
+ }), [
101
107
  [directives.BindOnceDirective, { id: this.$props.id }]
102
108
  ]),
103
109
  useVShow ? vue.h("input", {
@@ -122,7 +128,11 @@ const DestylerCheckboxRoot = vue.defineComponent({
122
128
  });
123
129
 
124
130
  const destylerCheckboxIndicatorProps = {
125
- ...primitive.destylerPrimitiveProp,
131
+ asChild: {
132
+ type: Boolean,
133
+ required: false,
134
+ default: false
135
+ },
126
136
  as: {
127
137
  type: [String, Object],
128
138
  required: false,
@@ -154,27 +164,11 @@ const DestylerCheckboxIndicator = vue.defineComponent({
154
164
  "style": {
155
165
  pointerEvents: "none"
156
166
  }
157
- }), this.$slots.default?.()));
167
+ }), {
168
+ default: () => this.$slots.default?.()
169
+ }));
158
170
  }
159
171
  });
160
172
 
161
- const name = "@destyler/checkbox";
162
-
163
- const packageName = name;
164
- function DestylerCheckboxResolver() {
165
- return {
166
- type: "component",
167
- resolve: (name2) => {
168
- if (name2 === "DestylerTemplate")
169
- return { name: name2, from: packageName };
170
- }
171
- };
172
- }
173
-
174
173
  exports.DestylerCheckboxIndicator = DestylerCheckboxIndicator;
175
- exports.DestylerCheckboxResolver = DestylerCheckboxResolver;
176
174
  exports.DestylerCheckboxRoot = DestylerCheckboxRoot;
177
- exports.destylerCheckboxIndicatorProps = destylerCheckboxIndicatorProps;
178
- exports.destylerCheckboxRootProps = destylerCheckboxRootProps;
179
- exports.injectCheckboxRootContext = injectCheckboxRootContext;
180
- exports.provideCheckboxRootContext = provideCheckboxRootContext;
package/dist/index.d.cts CHANGED
@@ -1,22 +1,16 @@
1
1
  import * as vue from 'vue';
2
- import { Component, PropType, Ref } from 'vue';
2
+ import { PropType, Component, Ref } from 'vue';
3
3
  import { AsTag } from '@destyler/primitive';
4
- import { ComponentResolver } from 'unplugin-vue-components';
4
+ import { ExtractPublicPropTypes } from '@destyler/shared';
5
5
 
6
6
  type CheckedState = boolean | 'indeterminate';
7
7
 
8
- interface DestylerCheckboxRootProps {
9
- asChild?: boolean;
10
- as?: AsTag | Component;
11
- defaultChecked?: boolean;
12
- checked?: boolean | 'indeterminate';
13
- disabled?: boolean;
14
- required?: boolean;
15
- name?: string;
16
- value?: string;
17
- id?: string;
18
- }
19
8
  declare const destylerCheckboxRootProps: {
9
+ readonly asChild: {
10
+ readonly type: PropType<boolean>;
11
+ readonly required: false;
12
+ readonly default: false;
13
+ };
20
14
  readonly as: {
21
15
  readonly type: PropType<AsTag | Component>;
22
16
  readonly required: false;
@@ -53,19 +47,18 @@ declare const destylerCheckboxRootProps: {
53
47
  readonly type: PropType<string>;
54
48
  readonly required: false;
55
49
  };
56
- readonly asChild: {
57
- type: PropType<boolean>;
58
- required: boolean;
59
- default: boolean;
60
- };
61
50
  };
51
+ type DestylerCheckboxRootProps = ExtractPublicPropTypes<typeof destylerCheckboxRootProps>;
62
52
  interface CheckboxRootContext {
63
53
  disabled: Ref<boolean>;
64
54
  state: Ref<CheckedState>;
65
55
  }
66
- declare const injectCheckboxRootContext: <T extends CheckboxRootContext | null | undefined = CheckboxRootContext>(fallback?: T | undefined) => T extends null ? CheckboxRootContext | null : CheckboxRootContext;
67
- declare const provideCheckboxRootContext: (contextValue: CheckboxRootContext) => CheckboxRootContext;
68
56
  declare const DestylerCheckboxRoot: vue.DefineComponent<{
57
+ readonly asChild: {
58
+ readonly type: PropType<boolean>;
59
+ readonly required: false;
60
+ readonly default: false;
61
+ };
69
62
  readonly as: {
70
63
  readonly type: PropType<AsTag | Component>;
71
64
  readonly required: false;
@@ -102,18 +95,18 @@ declare const DestylerCheckboxRoot: vue.DefineComponent<{
102
95
  readonly type: PropType<string>;
103
96
  readonly required: false;
104
97
  };
105
- readonly asChild: {
106
- type: PropType<boolean>;
107
- required: boolean;
108
- default: boolean;
109
- };
110
98
  }, {
111
99
  disabled: Ref<false> | Ref<true>;
112
100
  checked: Ref<CheckedState>;
113
- customElement: Ref<vue.ComponentPublicInstance | undefined>;
101
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
114
102
  isFormControl: vue.ComputedRef<boolean>;
115
103
  ariaLabel: vue.ComputedRef<string | null | undefined>;
116
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
+ };
117
110
  readonly as: {
118
111
  readonly type: PropType<AsTag | Component>;
119
112
  readonly required: false;
@@ -150,78 +143,72 @@ declare const DestylerCheckboxRoot: vue.DefineComponent<{
150
143
  readonly type: PropType<string>;
151
144
  readonly required: false;
152
145
  };
153
- readonly asChild: {
154
- type: PropType<boolean>;
155
- required: boolean;
156
- default: boolean;
157
- };
158
146
  }>> & {
159
147
  "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
160
148
  }, {
161
149
  readonly checked: boolean | "indeterminate";
150
+ readonly asChild: boolean;
162
151
  readonly as: AsTag | Component;
163
152
  readonly disabled: boolean;
164
153
  readonly value: string;
165
- readonly asChild: boolean;
166
154
  }, {}>;
167
155
 
168
156
  declare const destylerCheckboxIndicatorProps: {
169
- as: {
170
- type: PropType<AsTag | Component>;
171
- required: boolean;
172
- default: string;
157
+ readonly asChild: {
158
+ readonly type: PropType<boolean>;
159
+ readonly required: false;
160
+ readonly default: false;
173
161
  };
174
- forceMount: {
175
- type: PropType<boolean>;
176
- required: boolean;
177
- default: boolean;
162
+ readonly as: {
163
+ readonly type: PropType<AsTag | Component>;
164
+ readonly required: false;
165
+ readonly default: "button";
178
166
  };
179
- asChild: {
180
- type: PropType<boolean>;
181
- required: boolean;
182
- default: boolean;
167
+ readonly forceMount: {
168
+ readonly type: PropType<boolean>;
169
+ readonly required: false;
170
+ readonly default: false;
183
171
  };
184
172
  };
173
+ type DestylerCheckboxIndicatorProps = ExtractPublicPropTypes<typeof destylerCheckboxIndicatorProps>;
185
174
  declare const DestylerCheckboxIndicator: vue.DefineComponent<{
186
- as: {
187
- type: PropType<AsTag | Component>;
188
- required: boolean;
189
- default: string;
175
+ readonly asChild: {
176
+ readonly type: PropType<boolean>;
177
+ readonly required: false;
178
+ readonly default: false;
190
179
  };
191
- forceMount: {
192
- type: PropType<boolean>;
193
- required: boolean;
194
- default: boolean;
180
+ readonly as: {
181
+ readonly type: PropType<AsTag | Component>;
182
+ readonly required: false;
183
+ readonly default: "button";
195
184
  };
196
- asChild: {
197
- type: PropType<boolean>;
198
- required: boolean;
199
- default: boolean;
185
+ readonly forceMount: {
186
+ readonly type: PropType<boolean>;
187
+ readonly required: false;
188
+ readonly default: false;
200
189
  };
201
190
  }, {
202
191
  rootContext: CheckboxRootContext;
203
192
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
204
- as: {
205
- type: PropType<AsTag | Component>;
206
- required: boolean;
207
- default: string;
193
+ readonly asChild: {
194
+ readonly type: PropType<boolean>;
195
+ readonly required: false;
196
+ readonly default: false;
208
197
  };
209
- forceMount: {
210
- type: PropType<boolean>;
211
- required: boolean;
212
- default: boolean;
198
+ readonly as: {
199
+ readonly type: PropType<AsTag | Component>;
200
+ readonly required: false;
201
+ readonly default: "button";
213
202
  };
214
- asChild: {
215
- type: PropType<boolean>;
216
- required: boolean;
217
- default: boolean;
203
+ readonly forceMount: {
204
+ readonly type: PropType<boolean>;
205
+ readonly required: false;
206
+ readonly default: false;
218
207
  };
219
208
  }>>, {
220
- as: AsTag | Component;
221
- asChild: boolean;
222
- forceMount: boolean;
209
+ readonly asChild: boolean;
210
+ readonly as: AsTag | Component;
211
+ readonly forceMount: boolean;
223
212
  }, {}>;
224
213
 
225
- declare function DestylerCheckboxResolver(): ComponentResolver;
226
-
227
- export { type CheckboxRootContext, DestylerCheckboxIndicator, DestylerCheckboxResolver, DestylerCheckboxRoot, type DestylerCheckboxRootProps, destylerCheckboxIndicatorProps, destylerCheckboxRootProps, injectCheckboxRootContext, provideCheckboxRootContext };
214
+ export { DestylerCheckboxIndicator, type DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, type DestylerCheckboxRootProps };
package/dist/index.d.mts CHANGED
@@ -1,22 +1,16 @@
1
1
  import * as vue from 'vue';
2
- import { Component, PropType, Ref } from 'vue';
2
+ import { PropType, Component, Ref } from 'vue';
3
3
  import { AsTag } from '@destyler/primitive';
4
- import { ComponentResolver } from 'unplugin-vue-components';
4
+ import { ExtractPublicPropTypes } from '@destyler/shared';
5
5
 
6
6
  type CheckedState = boolean | 'indeterminate';
7
7
 
8
- interface DestylerCheckboxRootProps {
9
- asChild?: boolean;
10
- as?: AsTag | Component;
11
- defaultChecked?: boolean;
12
- checked?: boolean | 'indeterminate';
13
- disabled?: boolean;
14
- required?: boolean;
15
- name?: string;
16
- value?: string;
17
- id?: string;
18
- }
19
8
  declare const destylerCheckboxRootProps: {
9
+ readonly asChild: {
10
+ readonly type: PropType<boolean>;
11
+ readonly required: false;
12
+ readonly default: false;
13
+ };
20
14
  readonly as: {
21
15
  readonly type: PropType<AsTag | Component>;
22
16
  readonly required: false;
@@ -53,19 +47,18 @@ declare const destylerCheckboxRootProps: {
53
47
  readonly type: PropType<string>;
54
48
  readonly required: false;
55
49
  };
56
- readonly asChild: {
57
- type: PropType<boolean>;
58
- required: boolean;
59
- default: boolean;
60
- };
61
50
  };
51
+ type DestylerCheckboxRootProps = ExtractPublicPropTypes<typeof destylerCheckboxRootProps>;
62
52
  interface CheckboxRootContext {
63
53
  disabled: Ref<boolean>;
64
54
  state: Ref<CheckedState>;
65
55
  }
66
- declare const injectCheckboxRootContext: <T extends CheckboxRootContext | null | undefined = CheckboxRootContext>(fallback?: T | undefined) => T extends null ? CheckboxRootContext | null : CheckboxRootContext;
67
- declare const provideCheckboxRootContext: (contextValue: CheckboxRootContext) => CheckboxRootContext;
68
56
  declare const DestylerCheckboxRoot: vue.DefineComponent<{
57
+ readonly asChild: {
58
+ readonly type: PropType<boolean>;
59
+ readonly required: false;
60
+ readonly default: false;
61
+ };
69
62
  readonly as: {
70
63
  readonly type: PropType<AsTag | Component>;
71
64
  readonly required: false;
@@ -102,18 +95,18 @@ declare const DestylerCheckboxRoot: vue.DefineComponent<{
102
95
  readonly type: PropType<string>;
103
96
  readonly required: false;
104
97
  };
105
- readonly asChild: {
106
- type: PropType<boolean>;
107
- required: boolean;
108
- default: boolean;
109
- };
110
98
  }, {
111
99
  disabled: Ref<false> | Ref<true>;
112
100
  checked: Ref<CheckedState>;
113
- customElement: Ref<vue.ComponentPublicInstance | undefined>;
101
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
114
102
  isFormControl: vue.ComputedRef<boolean>;
115
103
  ariaLabel: vue.ComputedRef<string | null | undefined>;
116
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
+ };
117
110
  readonly as: {
118
111
  readonly type: PropType<AsTag | Component>;
119
112
  readonly required: false;
@@ -150,78 +143,72 @@ declare const DestylerCheckboxRoot: vue.DefineComponent<{
150
143
  readonly type: PropType<string>;
151
144
  readonly required: false;
152
145
  };
153
- readonly asChild: {
154
- type: PropType<boolean>;
155
- required: boolean;
156
- default: boolean;
157
- };
158
146
  }>> & {
159
147
  "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
160
148
  }, {
161
149
  readonly checked: boolean | "indeterminate";
150
+ readonly asChild: boolean;
162
151
  readonly as: AsTag | Component;
163
152
  readonly disabled: boolean;
164
153
  readonly value: string;
165
- readonly asChild: boolean;
166
154
  }, {}>;
167
155
 
168
156
  declare const destylerCheckboxIndicatorProps: {
169
- as: {
170
- type: PropType<AsTag | Component>;
171
- required: boolean;
172
- default: string;
157
+ readonly asChild: {
158
+ readonly type: PropType<boolean>;
159
+ readonly required: false;
160
+ readonly default: false;
173
161
  };
174
- forceMount: {
175
- type: PropType<boolean>;
176
- required: boolean;
177
- default: boolean;
162
+ readonly as: {
163
+ readonly type: PropType<AsTag | Component>;
164
+ readonly required: false;
165
+ readonly default: "button";
178
166
  };
179
- asChild: {
180
- type: PropType<boolean>;
181
- required: boolean;
182
- default: boolean;
167
+ readonly forceMount: {
168
+ readonly type: PropType<boolean>;
169
+ readonly required: false;
170
+ readonly default: false;
183
171
  };
184
172
  };
173
+ type DestylerCheckboxIndicatorProps = ExtractPublicPropTypes<typeof destylerCheckboxIndicatorProps>;
185
174
  declare const DestylerCheckboxIndicator: vue.DefineComponent<{
186
- as: {
187
- type: PropType<AsTag | Component>;
188
- required: boolean;
189
- default: string;
175
+ readonly asChild: {
176
+ readonly type: PropType<boolean>;
177
+ readonly required: false;
178
+ readonly default: false;
190
179
  };
191
- forceMount: {
192
- type: PropType<boolean>;
193
- required: boolean;
194
- default: boolean;
180
+ readonly as: {
181
+ readonly type: PropType<AsTag | Component>;
182
+ readonly required: false;
183
+ readonly default: "button";
195
184
  };
196
- asChild: {
197
- type: PropType<boolean>;
198
- required: boolean;
199
- default: boolean;
185
+ readonly forceMount: {
186
+ readonly type: PropType<boolean>;
187
+ readonly required: false;
188
+ readonly default: false;
200
189
  };
201
190
  }, {
202
191
  rootContext: CheckboxRootContext;
203
192
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
204
- as: {
205
- type: PropType<AsTag | Component>;
206
- required: boolean;
207
- default: string;
193
+ readonly asChild: {
194
+ readonly type: PropType<boolean>;
195
+ readonly required: false;
196
+ readonly default: false;
208
197
  };
209
- forceMount: {
210
- type: PropType<boolean>;
211
- required: boolean;
212
- default: boolean;
198
+ readonly as: {
199
+ readonly type: PropType<AsTag | Component>;
200
+ readonly required: false;
201
+ readonly default: "button";
213
202
  };
214
- asChild: {
215
- type: PropType<boolean>;
216
- required: boolean;
217
- default: boolean;
203
+ readonly forceMount: {
204
+ readonly type: PropType<boolean>;
205
+ readonly required: false;
206
+ readonly default: false;
218
207
  };
219
208
  }>>, {
220
- as: AsTag | Component;
221
- asChild: boolean;
222
- forceMount: boolean;
209
+ readonly asChild: boolean;
210
+ readonly as: AsTag | Component;
211
+ readonly forceMount: boolean;
223
212
  }, {}>;
224
213
 
225
- declare function DestylerCheckboxResolver(): ComponentResolver;
226
-
227
- export { type CheckboxRootContext, DestylerCheckboxIndicator, DestylerCheckboxResolver, DestylerCheckboxRoot, type DestylerCheckboxRootProps, destylerCheckboxIndicatorProps, destylerCheckboxRootProps, injectCheckboxRootContext, provideCheckboxRootContext };
214
+ export { DestylerCheckboxIndicator, type DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, type DestylerCheckboxRootProps };
package/dist/index.d.ts CHANGED
@@ -1,22 +1,16 @@
1
1
  import * as vue from 'vue';
2
- import { Component, PropType, Ref } from 'vue';
2
+ import { PropType, Component, Ref } from 'vue';
3
3
  import { AsTag } from '@destyler/primitive';
4
- import { ComponentResolver } from 'unplugin-vue-components';
4
+ import { ExtractPublicPropTypes } from '@destyler/shared';
5
5
 
6
6
  type CheckedState = boolean | 'indeterminate';
7
7
 
8
- interface DestylerCheckboxRootProps {
9
- asChild?: boolean;
10
- as?: AsTag | Component;
11
- defaultChecked?: boolean;
12
- checked?: boolean | 'indeterminate';
13
- disabled?: boolean;
14
- required?: boolean;
15
- name?: string;
16
- value?: string;
17
- id?: string;
18
- }
19
8
  declare const destylerCheckboxRootProps: {
9
+ readonly asChild: {
10
+ readonly type: PropType<boolean>;
11
+ readonly required: false;
12
+ readonly default: false;
13
+ };
20
14
  readonly as: {
21
15
  readonly type: PropType<AsTag | Component>;
22
16
  readonly required: false;
@@ -53,19 +47,18 @@ declare const destylerCheckboxRootProps: {
53
47
  readonly type: PropType<string>;
54
48
  readonly required: false;
55
49
  };
56
- readonly asChild: {
57
- type: PropType<boolean>;
58
- required: boolean;
59
- default: boolean;
60
- };
61
50
  };
51
+ type DestylerCheckboxRootProps = ExtractPublicPropTypes<typeof destylerCheckboxRootProps>;
62
52
  interface CheckboxRootContext {
63
53
  disabled: Ref<boolean>;
64
54
  state: Ref<CheckedState>;
65
55
  }
66
- declare const injectCheckboxRootContext: <T extends CheckboxRootContext | null | undefined = CheckboxRootContext>(fallback?: T | undefined) => T extends null ? CheckboxRootContext | null : CheckboxRootContext;
67
- declare const provideCheckboxRootContext: (contextValue: CheckboxRootContext) => CheckboxRootContext;
68
56
  declare const DestylerCheckboxRoot: vue.DefineComponent<{
57
+ readonly asChild: {
58
+ readonly type: PropType<boolean>;
59
+ readonly required: false;
60
+ readonly default: false;
61
+ };
69
62
  readonly as: {
70
63
  readonly type: PropType<AsTag | Component>;
71
64
  readonly required: false;
@@ -102,18 +95,18 @@ declare const DestylerCheckboxRoot: vue.DefineComponent<{
102
95
  readonly type: PropType<string>;
103
96
  readonly required: false;
104
97
  };
105
- readonly asChild: {
106
- type: PropType<boolean>;
107
- required: boolean;
108
- default: boolean;
109
- };
110
98
  }, {
111
99
  disabled: Ref<false> | Ref<true>;
112
100
  checked: Ref<CheckedState>;
113
- customElement: Ref<vue.ComponentPublicInstance | undefined>;
101
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
114
102
  isFormControl: vue.ComputedRef<boolean>;
115
103
  ariaLabel: vue.ComputedRef<string | null | undefined>;
116
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
+ };
117
110
  readonly as: {
118
111
  readonly type: PropType<AsTag | Component>;
119
112
  readonly required: false;
@@ -150,78 +143,72 @@ declare const DestylerCheckboxRoot: vue.DefineComponent<{
150
143
  readonly type: PropType<string>;
151
144
  readonly required: false;
152
145
  };
153
- readonly asChild: {
154
- type: PropType<boolean>;
155
- required: boolean;
156
- default: boolean;
157
- };
158
146
  }>> & {
159
147
  "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
160
148
  }, {
161
149
  readonly checked: boolean | "indeterminate";
150
+ readonly asChild: boolean;
162
151
  readonly as: AsTag | Component;
163
152
  readonly disabled: boolean;
164
153
  readonly value: string;
165
- readonly asChild: boolean;
166
154
  }, {}>;
167
155
 
168
156
  declare const destylerCheckboxIndicatorProps: {
169
- as: {
170
- type: PropType<AsTag | Component>;
171
- required: boolean;
172
- default: string;
157
+ readonly asChild: {
158
+ readonly type: PropType<boolean>;
159
+ readonly required: false;
160
+ readonly default: false;
173
161
  };
174
- forceMount: {
175
- type: PropType<boolean>;
176
- required: boolean;
177
- default: boolean;
162
+ readonly as: {
163
+ readonly type: PropType<AsTag | Component>;
164
+ readonly required: false;
165
+ readonly default: "button";
178
166
  };
179
- asChild: {
180
- type: PropType<boolean>;
181
- required: boolean;
182
- default: boolean;
167
+ readonly forceMount: {
168
+ readonly type: PropType<boolean>;
169
+ readonly required: false;
170
+ readonly default: false;
183
171
  };
184
172
  };
173
+ type DestylerCheckboxIndicatorProps = ExtractPublicPropTypes<typeof destylerCheckboxIndicatorProps>;
185
174
  declare const DestylerCheckboxIndicator: vue.DefineComponent<{
186
- as: {
187
- type: PropType<AsTag | Component>;
188
- required: boolean;
189
- default: string;
175
+ readonly asChild: {
176
+ readonly type: PropType<boolean>;
177
+ readonly required: false;
178
+ readonly default: false;
190
179
  };
191
- forceMount: {
192
- type: PropType<boolean>;
193
- required: boolean;
194
- default: boolean;
180
+ readonly as: {
181
+ readonly type: PropType<AsTag | Component>;
182
+ readonly required: false;
183
+ readonly default: "button";
195
184
  };
196
- asChild: {
197
- type: PropType<boolean>;
198
- required: boolean;
199
- default: boolean;
185
+ readonly forceMount: {
186
+ readonly type: PropType<boolean>;
187
+ readonly required: false;
188
+ readonly default: false;
200
189
  };
201
190
  }, {
202
191
  rootContext: CheckboxRootContext;
203
192
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
204
- as: {
205
- type: PropType<AsTag | Component>;
206
- required: boolean;
207
- default: string;
193
+ readonly asChild: {
194
+ readonly type: PropType<boolean>;
195
+ readonly required: false;
196
+ readonly default: false;
208
197
  };
209
- forceMount: {
210
- type: PropType<boolean>;
211
- required: boolean;
212
- default: boolean;
198
+ readonly as: {
199
+ readonly type: PropType<AsTag | Component>;
200
+ readonly required: false;
201
+ readonly default: "button";
213
202
  };
214
- asChild: {
215
- type: PropType<boolean>;
216
- required: boolean;
217
- default: boolean;
203
+ readonly forceMount: {
204
+ readonly type: PropType<boolean>;
205
+ readonly required: false;
206
+ readonly default: false;
218
207
  };
219
208
  }>>, {
220
- as: AsTag | Component;
221
- asChild: boolean;
222
- forceMount: boolean;
209
+ readonly asChild: boolean;
210
+ readonly as: AsTag | Component;
211
+ readonly forceMount: boolean;
223
212
  }, {}>;
224
213
 
225
- declare function DestylerCheckboxResolver(): ComponentResolver;
226
-
227
- export { type CheckboxRootContext, DestylerCheckboxIndicator, DestylerCheckboxResolver, DestylerCheckboxRoot, type DestylerCheckboxRootProps, destylerCheckboxIndicatorProps, destylerCheckboxRootProps, injectCheckboxRootContext, provideCheckboxRootContext };
214
+ export { DestylerCheckboxIndicator, type DestylerCheckboxIndicatorProps, DestylerCheckboxRoot, type DestylerCheckboxRootProps };
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, toRef, computed, withDirectives, h, mergeProps } from 'vue';
2
- import { destylerPrimitiveProp, DestylerPrimitive } from '@destyler/primitive';
3
- import { useVModel, useCustomElement, useFormControl } from '@destyler/composition';
2
+ import { DestylerPrimitive } from '@destyler/primitive';
3
+ import { useVModel, useForwardExpose, useFormControl } from '@destyler/composition';
4
4
  import { createContext } from '@destyler/shared';
5
5
  import { BindOnceDirective } from '@destyler/directives';
6
6
  import { DestylerPresence } from '@destyler/presence';
@@ -13,7 +13,11 @@ function getState(checked) {
13
13
  }
14
14
 
15
15
  const destylerCheckboxRootProps = {
16
- ...destylerPrimitiveProp,
16
+ asChild: {
17
+ type: Boolean,
18
+ required: false,
19
+ default: false
20
+ },
17
21
  as: {
18
22
  type: [String, Object],
19
23
  required: false,
@@ -51,7 +55,7 @@ const destylerCheckboxRootProps = {
51
55
  required: false
52
56
  }
53
57
  };
54
- const [injectCheckboxRootContext, provideCheckboxRootContext] = createContext("CheckboxRoot");
58
+ const [injectCheckboxRootContext, provideCheckboxRootContext] = createContext("DestylerCheckboxRoot");
55
59
  const DestylerCheckboxRoot = defineComponent({
56
60
  name: "DestylerCheckboxRoot",
57
61
  props: destylerCheckboxRootProps,
@@ -62,7 +66,7 @@ const DestylerCheckboxRoot = defineComponent({
62
66
  defaultValue: props.defaultChecked,
63
67
  passive: props.checked === void 0
64
68
  });
65
- const { customElement, currentElement } = useCustomElement();
69
+ const { forwardRef, currentElement } = useForwardExpose();
66
70
  const isFormControl = useFormControl(currentElement);
67
71
  const ariaLabel = computed(() => props.id && currentElement.value ? document.querySelector(`[for="${props.id}"]`)?.textContent : void 0);
68
72
  provideCheckboxRootContext({
@@ -72,7 +76,7 @@ const DestylerCheckboxRoot = defineComponent({
72
76
  return {
73
77
  disabled: disabledRef,
74
78
  checked: checkedRef,
75
- customElement,
79
+ forwardRef,
76
80
  isFormControl,
77
81
  ariaLabel
78
82
  };
@@ -81,7 +85,7 @@ const DestylerCheckboxRoot = defineComponent({
81
85
  const useVShow = this.isFormControl;
82
86
  return [
83
87
  withDirectives(h(DestylerPrimitive, mergeProps(this.$attrs, {
84
- "ref": "customElement",
88
+ "ref": (el) => this.forwardRef(el),
85
89
  "role": "checkbox",
86
90
  "asChild": this.$props.asChild,
87
91
  "as": this.$props.as,
@@ -95,7 +99,9 @@ const DestylerCheckboxRoot = defineComponent({
95
99
  "onClick": () => {
96
100
  this.checked = !this.checked;
97
101
  }
98
- }), this.$slots.default?.()), [
102
+ }), {
103
+ default: () => this.$slots.default?.()
104
+ }), [
99
105
  [BindOnceDirective, { id: this.$props.id }]
100
106
  ]),
101
107
  useVShow ? h("input", {
@@ -120,7 +126,11 @@ const DestylerCheckboxRoot = defineComponent({
120
126
  });
121
127
 
122
128
  const destylerCheckboxIndicatorProps = {
123
- ...destylerPrimitiveProp,
129
+ asChild: {
130
+ type: Boolean,
131
+ required: false,
132
+ default: false
133
+ },
124
134
  as: {
125
135
  type: [String, Object],
126
136
  required: false,
@@ -152,21 +162,10 @@ const DestylerCheckboxIndicator = defineComponent({
152
162
  "style": {
153
163
  pointerEvents: "none"
154
164
  }
155
- }), this.$slots.default?.()));
165
+ }), {
166
+ default: () => this.$slots.default?.()
167
+ }));
156
168
  }
157
169
  });
158
170
 
159
- const name = "@destyler/checkbox";
160
-
161
- const packageName = name;
162
- function DestylerCheckboxResolver() {
163
- return {
164
- type: "component",
165
- resolve: (name2) => {
166
- if (name2 === "DestylerTemplate")
167
- return { name: name2, from: packageName };
168
- }
169
- };
170
- }
171
-
172
- export { DestylerCheckboxIndicator, DestylerCheckboxResolver, DestylerCheckboxRoot, destylerCheckboxIndicatorProps, destylerCheckboxRootProps, injectCheckboxRootContext, provideCheckboxRootContext };
171
+ export { DestylerCheckboxIndicator, DestylerCheckboxRoot };
@@ -0,0 +1,21 @@
1
+ 'use strict';
2
+
3
+ const name = "@destyler/checkbox";
4
+
5
+ const packageName = name;
6
+ const checkboxComponentName = [
7
+ "DestylerCheckboxRoot",
8
+ "DestylerCheckboxIndicator"
9
+ ];
10
+ function DestylerCheckboxResolver() {
11
+ return {
12
+ type: "component",
13
+ resolve: (name2) => {
14
+ if (checkboxComponentName.includes(name2))
15
+ return { name: name2, from: packageName };
16
+ }
17
+ };
18
+ }
19
+
20
+ exports.DestylerCheckboxResolver = DestylerCheckboxResolver;
21
+ exports.checkboxComponentName = checkboxComponentName;
@@ -0,0 +1,6 @@
1
+ import { ComponentResolver } from 'unplugin-vue-components';
2
+
3
+ declare const checkboxComponentName: string[];
4
+ declare function DestylerCheckboxResolver(): ComponentResolver;
5
+
6
+ export { DestylerCheckboxResolver, checkboxComponentName };
@@ -0,0 +1,6 @@
1
+ import { ComponentResolver } from 'unplugin-vue-components';
2
+
3
+ declare const checkboxComponentName: string[];
4
+ declare function DestylerCheckboxResolver(): ComponentResolver;
5
+
6
+ export { DestylerCheckboxResolver, checkboxComponentName };
@@ -0,0 +1,6 @@
1
+ import { ComponentResolver } from 'unplugin-vue-components';
2
+
3
+ declare const checkboxComponentName: string[];
4
+ declare function DestylerCheckboxResolver(): ComponentResolver;
5
+
6
+ export { DestylerCheckboxResolver, checkboxComponentName };
@@ -0,0 +1,18 @@
1
+ const name = "@destyler/checkbox";
2
+
3
+ const packageName = name;
4
+ const checkboxComponentName = [
5
+ "DestylerCheckboxRoot",
6
+ "DestylerCheckboxIndicator"
7
+ ];
8
+ function DestylerCheckboxResolver() {
9
+ return {
10
+ type: "component",
11
+ resolve: (name2) => {
12
+ if (checkboxComponentName.includes(name2))
13
+ return { name: name2, from: packageName };
14
+ }
15
+ };
16
+ }
17
+
18
+ export { DestylerCheckboxResolver, checkboxComponentName };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@destyler/checkbox",
3
- "version": "0.0.1-beta.9",
3
+ "version": "0.0.1",
4
4
  "description": "unstyled checkbox component for vue",
5
5
  "author": "Elone Hoo <elonehoo@gmail.com>",
6
6
  "license": "MIT",
@@ -10,6 +10,16 @@
10
10
  "import": "./dist/index.mjs",
11
11
  "require": "./dist/index.cjs"
12
12
  },
13
+ "./resolver": {
14
+ "types": "./dist/resolver.d.ts",
15
+ "import": "./dist/resolver.mjs",
16
+ "require": "./dist/resolver.cjs"
17
+ },
18
+ "./component": {
19
+ "types": "./dist/component.d.ts",
20
+ "import": "./dist/component.mjs",
21
+ "require": "./dist/component.cjs"
22
+ },
13
23
  "./*": "./*"
14
24
  },
15
25
  "main": "dist/index.cjs",
@@ -23,11 +33,11 @@
23
33
  "vue": ">=3.3.4"
24
34
  },
25
35
  "dependencies": {
26
- "@destyler/presence": "0.0.1-beta.9",
27
- "@destyler/primitive": "0.0.1-beta.9",
28
- "@destyler/composition": "0.0.1-beta.9",
29
- "@destyler/shared": "0.0.1-beta.9",
30
- "@destyler/directives": "0.0.1-beta.9"
36
+ "@destyler/directives": "0.0.1",
37
+ "@destyler/presence": "0.0.1",
38
+ "@destyler/primitive": "0.0.1",
39
+ "@destyler/composition": "0.0.1",
40
+ "@destyler/shared": "0.0.1"
31
41
  },
32
42
  "scripts": {
33
43
  "clear": "rimraf ./dist",