@destyler/switch 0.0.3 → 0.0.4

package/README.md

@@ -0,0 +1,7 @@
+# @destyler/switch
+
+[![NPM version](https://img.shields.io/npm/v/@destyler/switch?color=a1b858&switch=)](https://www.npmjs.com/package/@destyler/switch)
+
+> a control that allows the user to toggle between checked and not checked.
+
+[GitHub](https://github.com/destyler/destyler) | [Documentation](https://destyler-dev.zeabur.app/)

package/dist/component.cjs

@@ -9,5 +9,8 @@ require('@destyler/directives');
 
 
 
-exports.DestylerSwitchRoot = index.DestylerSwitchRoot;
-exports.DestylerSwitchThump = index.DestylerSwitchThump;
+exports.SwitchRoot = index.SwitchRoot;
+exports.SwitchThumb = index.SwitchThumb;
+exports.switchRootEmits = index.switchRootEmits;
+exports.switchRootProps = index.switchRootProps;
+exports.switchThumbProps = index.switchThumbProps;

package/dist/component.d.cts

@@ -1,4 +1,4 @@
-export { DestylerSwitchRoot, DestylerSwitchRootProps, DestylerSwitchThump, DestylerSwitchThumpProps } from './index.cjs';
+export { SwitchRoot, SwitchRootProps, SwitchThumb, SwitchThumbProps, switchRootEmits, switchRootProps, switchThumbProps } from './index.cjs';
 import 'vue';
 import '@destyler/primitive';
 import '@destyler/shared';

package/dist/component.d.mts

@@ -1,4 +1,4 @@
-export { DestylerSwitchRoot, DestylerSwitchRootProps, DestylerSwitchThump, DestylerSwitchThumpProps } from './index.mjs';
+export { SwitchRoot, SwitchRootProps, SwitchThumb, SwitchThumbProps, switchRootEmits, switchRootProps, switchThumbProps } from './index.mjs';
 import 'vue';
 import '@destyler/primitive';
 import '@destyler/shared';

package/dist/component.d.ts

@@ -1,4 +1,4 @@
-export { DestylerSwitchRoot, DestylerSwitchRootProps, DestylerSwitchThump, DestylerSwitchThumpProps } from './index.js';
+export { SwitchRoot, SwitchRootProps, SwitchThumb, SwitchThumbProps, switchRootEmits, switchRootProps, switchThumbProps } from './index.js';
 import 'vue';
 import '@destyler/primitive';
 import '@destyler/shared';

package/dist/component.mjs

@@ -1,4 +1,4 @@
-export { DestylerSwitchRoot, DestylerSwitchThump } from './index.mjs';
+export { SwitchRoot, SwitchThumb, switchRootEmits, switchRootProps, switchThumbProps } from './index.mjs';
 import 'vue';
 import '@destyler/primitive';
 import '@destyler/composition';

package/dist/index.cjs

@@ -6,53 +6,77 @@ const composition = require('@destyler/composition');
 const shared = require('@destyler/shared');
 const directives = require('@destyler/directives');
 
-const destylerSwitchRootProps = {
+const switchRootProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.primitiveProps.as,
     default: "button"
   },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+  /**
+   * The state of the switch when it is initially rendered.
+   * Use when you do not need to control its state.
+   */
   defaultChecked: {
     type: Boolean,
     required: false
   },
+  /**
+   * The controlled state of the switch.
+   * Can be bind as `v-model:checked`.
+   */
   checked: {
     type: Boolean,
     required: false,
     default: void 0
   },
+  /**
+   * When `true`, prevents the user from interacting with the switch.
+   */
   disabled: {
     type: Boolean,
     required: false
   },
+  /**
+   * When `true`, indicates that the user must check the switch before the owning form can be submitted.
+   */
   required: {
     type: Boolean,
     required: false
   },
+  /**
+   * The name of the switch. Submitted with its owning form as part of a name/value pair.
+   */
   name: {
     type: String,
     required: false
   },
+  /**
+   * Id of the element
+   */
   id: {
     type: String,
     required: false
   },
+  /**
+   * The value given as data when submitted with a `name`.
+   */
   value: {
     type: String,
     required: false,
     default: "on"
   }
 };
+const switchRootEmits = {
+  "update:checked": (_checked) => true
+};
 const [injectSwitchRootContext, provideSwitchRootContext] = shared.createContext("DestylerSwitchRoot");
-const DestylerSwitchRoot = vue.defineComponent({
+const SwitchRoot = vue.defineComponent({
   name: "DestylerSwitchRoot",
-  props: destylerSwitchRootProps,
-  emits: ["update:checked"],
+  props: switchRootProps,
+  emits: switchRootEmits,
   setup(props, { emit }) {
     const { disabled } = vue.toRefs(props);
     const checked = composition.useVModel(props, "checked", emit, {
@@ -83,7 +107,7 @@ const DestylerSwitchRoot = vue.defineComponent({
   },
   render() {
     return [
-      vue.withDirectives(vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
+      vue.withDirectives(vue.h(primitive.Primitive, vue.mergeProps(this.$attrs, {
         "ref": (el) => this.forwardRef(el),
         "role": "switch",
         "type": this.$props.as === "button" ? "button" : void 0,
@@ -128,21 +152,19 @@ const DestylerSwitchRoot = vue.defineComponent({
   }
 });
 
-const destylerSwitchThumpProps = {
+const switchThumbProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default span
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.primitiveProps.as,
     default: "span"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
   }
 };
-const DestylerSwitchThump = vue.defineComponent({
+const SwitchThumb = vue.defineComponent({
   name: "DestylerSwitchThump",
-  props: destylerSwitchThumpProps,
+  props: switchThumbProps,
   setup(_) {
     const rootContext = injectSwitchRootContext();
     composition.useForwardExpose();
@@ -151,7 +173,7 @@ const DestylerSwitchThump = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(primitive.DestylerPrimitive, {
+    return vue.h(primitive.Primitive, {
       "data-state": this.rootContext.checked?.value ? "checked" : "unchecked",
       "data-disabled": this.rootContext.disabled.value ? "" : void 0,
       "asChild": this.$props.asChild,
@@ -160,5 +182,8 @@ const DestylerSwitchThump = vue.defineComponent({
   }
 });
 
-exports.DestylerSwitchRoot = DestylerSwitchRoot;
-exports.DestylerSwitchThump = DestylerSwitchThump;
+exports.SwitchRoot = SwitchRoot;
+exports.SwitchThumb = SwitchThumb;
+exports.switchRootEmits = switchRootEmits;
+exports.switchRootProps = switchRootProps;
+exports.switchThumbProps = switchThumbProps;

package/dist/index.d.cts

@@ -1,97 +1,152 @@
 import * as vue from 'vue';
-import { PropType, Component, Ref } from 'vue';
-import { AsTag } from '@destyler/primitive';
+import { PropType, Ref } from 'vue';
+import * as _destyler_primitive from '@destyler/primitive';
 import { ExtractPublicPropTypes } from '@destyler/shared';
 
-declare const destylerSwitchRootProps: {
+declare const switchRootProps: {
+    /**
+     * @default button
+     */
     readonly as: {
-        readonly type: PropType<AsTag | Component>;
-        readonly required: false;
         readonly default: "button";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
         readonly required: false;
-        readonly default: false;
     };
+    /**
+     * The state of the switch when it is initially rendered.
+     * Use when you do not need to control its state.
+     */
     readonly defaultChecked: {
         readonly type: PropType<boolean>;
         readonly required: false;
     };
+    /**
+     * The controlled state of the switch.
+     * Can be bind as `v-model:checked`.
+     */
     readonly checked: {
         readonly type: PropType<boolean>;
         readonly required: false;
         readonly default: undefined;
     };
+    /**
+     * When `true`, prevents the user from interacting with the switch.
+     */
     readonly disabled: {
         readonly type: PropType<boolean>;
         readonly required: false;
     };
+    /**
+     * When `true`, indicates that the user must check the switch before the owning form can be submitted.
+     */
     readonly required: {
         readonly type: PropType<boolean>;
         readonly required: false;
     };
+    /**
+     * The name of the switch. Submitted with its owning form as part of a name/value pair.
+     */
     readonly name: {
         readonly type: PropType<string>;
         readonly required: false;
     };
+    /**
+     * Id of the element
+     */
     readonly id: {
         readonly type: PropType<string>;
         readonly required: false;
     };
+    /**
+     * The value given as data when submitted with a `name`.
+     */
     readonly value: {
         readonly type: PropType<string>;
         readonly required: false;
         readonly default: "on";
     };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type SwitchRootProps = ExtractPublicPropTypes<typeof switchRootProps>;
+declare const switchRootEmits: {
+    'update:checked': (_checked: boolean) => boolean;
 };
-type DestylerSwitchRootProps = ExtractPublicPropTypes<typeof destylerSwitchRootProps>;
 interface SwitchRootContext {
     checked?: Ref<boolean>;
     toggleCheck: () => void;
     disabled: Ref<boolean | undefined>;
 }
-declare const DestylerSwitchRoot: vue.DefineComponent<{
+declare const SwitchRoot: vue.DefineComponent<{
+    /**
+     * @default button
+     */
     readonly as: {
-        readonly type: PropType<AsTag | Component>;
-        readonly required: false;
         readonly default: "button";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
         readonly required: false;
-        readonly default: false;
     };
+    /**
+     * The state of the switch when it is initially rendered.
+     * Use when you do not need to control its state.
+     */
     readonly defaultChecked: {
         readonly type: PropType<boolean>;
         readonly required: false;
     };
+    /**
+     * The controlled state of the switch.
+     * Can be bind as `v-model:checked`.
+     */
     readonly checked: {
         readonly type: PropType<boolean>;
         readonly required: false;
         readonly default: undefined;
     };
+    /**
+     * When `true`, prevents the user from interacting with the switch.
+     */
     readonly disabled: {
         readonly type: PropType<boolean>;
         readonly required: false;
     };
+    /**
+     * When `true`, indicates that the user must check the switch before the owning form can be submitted.
+     */
     readonly required: {
         readonly type: PropType<boolean>;
         readonly required: false;
     };
+    /**
+     * The name of the switch. Submitted with its owning form as part of a name/value pair.
+     */
     readonly name: {
         readonly type: PropType<string>;
         readonly required: false;
     };
+    /**
+     * Id of the element
+     */
     readonly id: {
         readonly type: PropType<string>;
         readonly required: false;
     };
+    /**
+     * The value given as data when submitted with a `name`.
+     */
     readonly value: {
         readonly type: PropType<string>;
         readonly required: false;
         readonly default: "on";
     };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
 }, {
     forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
     toggleCheck: () => void;
@@ -99,96 +154,133 @@ declare const DestylerSwitchRoot: vue.DefineComponent<{
     ariaLabel: vue.ComputedRef<string | null | undefined>;
     checked: Ref<boolean>;
     disabled: Ref<boolean | undefined>;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:checked"[], "update:checked", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:checked': (_checked: boolean) => boolean;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * @default button
+     */
     readonly as: {
-        readonly type: PropType<AsTag | Component>;
-        readonly required: false;
         readonly default: "button";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
         readonly required: false;
-        readonly default: false;
     };
+    /**
+     * The state of the switch when it is initially rendered.
+     * Use when you do not need to control its state.
+     */
     readonly defaultChecked: {
         readonly type: PropType<boolean>;
         readonly required: false;
     };
+    /**
+     * The controlled state of the switch.
+     * Can be bind as `v-model:checked`.
+     */
     readonly checked: {
         readonly type: PropType<boolean>;
         readonly required: false;
         readonly default: undefined;
     };
+    /**
+     * When `true`, prevents the user from interacting with the switch.
+     */
     readonly disabled: {
         readonly type: PropType<boolean>;
         readonly required: false;
     };
+    /**
+     * When `true`, indicates that the user must check the switch before the owning form can be submitted.
+     */
     readonly required: {
         readonly type: PropType<boolean>;
         readonly required: false;
     };
+    /**
+     * The name of the switch. Submitted with its owning form as part of a name/value pair.
+     */
     readonly name: {
         readonly type: PropType<string>;
         readonly required: false;
     };
+    /**
+     * Id of the element
+     */
     readonly id: {
         readonly type: PropType<string>;
         readonly required: false;
     };
+    /**
+     * The value given as data when submitted with a `name`.
+     */
     readonly value: {
         readonly type: PropType<string>;
         readonly required: false;
         readonly default: "on";
     };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
 }>> & {
-    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:checked"?: ((_checked: boolean) => any) | undefined;
 }, {
-    readonly as: AsTag | Component;
-    readonly asChild: boolean;
+    readonly as: _destyler_primitive.AsTag | vue.Component;
     readonly checked: boolean;
     readonly value: string;
+    readonly asChild: boolean;
 }, {}>;
 
-declare const destylerSwitchThumpProps: {
+declare const switchThumbProps: {
+    /**
+     * @default span
+     */
     readonly as: {
-        readonly type: PropType<AsTag | Component>;
-        readonly required: false;
         readonly default: "span";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
     };
     readonly asChild: {
-        readonly type: PropType<boolean>;
+        readonly type: vue.PropType<boolean>;
         readonly required: false;
         readonly default: false;
     };
 };
-type DestylerSwitchThumpProps = ExtractPublicPropTypes<typeof destylerSwitchThumpProps>;
-declare const DestylerSwitchThump: vue.DefineComponent<{
+type SwitchThumbProps = ExtractPublicPropTypes<typeof switchThumbProps>;
+declare const SwitchThumb: vue.DefineComponent<{
+    /**
+     * @default span
+     */
     readonly as: {
-        readonly type: PropType<AsTag | Component>;
-        readonly required: false;
         readonly default: "span";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
     };
     readonly asChild: {
-        readonly type: PropType<boolean>;
+        readonly type: vue.PropType<boolean>;
         readonly required: false;
         readonly default: false;
     };
 }, {
     rootContext: SwitchRootContext;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * @default span
+     */
     readonly as: {
-        readonly type: PropType<AsTag | Component>;
-        readonly required: false;
         readonly default: "span";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
     };
     readonly asChild: {
-        readonly type: PropType<boolean>;
+        readonly type: vue.PropType<boolean>;
         readonly required: false;
         readonly default: false;
     };
 }>>, {
-    readonly as: AsTag | Component;
+    readonly as: _destyler_primitive.AsTag | vue.Component;
     readonly asChild: boolean;
 }, {}>;
 
-export { DestylerSwitchRoot, type DestylerSwitchRootProps, DestylerSwitchThump, type DestylerSwitchThumpProps };
+export { SwitchRoot, type SwitchRootProps, SwitchThumb, type SwitchThumbProps, switchRootEmits, switchRootProps, switchThumbProps };