@destyler/switch 0.0.6 → 0.0.7-beta.1

package/dist/index.mjs

@@ -1,183 +1,280 @@
-import { defineComponent, toRefs, computed, withDirectives, h, mergeProps, withModifiers } from 'vue';
-import { primitiveProps, Primitive } from '@destyler/primitive';
-import { useVModel, useForwardExpose, useFormControl } from '@destyler/composition';
-import { createContext } from '@destyler/shared';
-import { BindOnceDirective } from '@destyler/directives';
+import { createAnatomy } from '@zag-js/anatomy';
+import { createScope, dataAttr, getEventTarget, visuallyHiddenStyle } from '@zag-js/dom-query';
+import { isFocusVisible, trackFocusVisible } from '@zag-js/focus-visible';
+import { createMachine, guards } from '@zag-js/core';
+import { trackPress } from '@zag-js/dom-event';
+import { trackFormControl, dispatchInputCheckedEvent } from '@zag-js/form-utils';
+import { compact, isEqual, createSplitProps } from '@zag-js/utils';
+import { createProps } from '@zag-js/types';
 
-const switchRootProps = {
-  ...primitiveProps,
-  /**
-   * @default button
-   */
-  as: {
-    ...primitiveProps.as,
-    default: "button"
-  },
-  /**
-   * 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] = createContext("DestylerSwitchRoot");
-const SwitchRoot = defineComponent({
-  name: "DestylerSwitchRoot",
-  props: switchRootProps,
-  emits: switchRootEmits,
-  setup(props, { emit }) {
-    const { disabled } = toRefs(props);
-    const checked = useVModel(props, "checked", emit, {
-      defaultValue: props.defaultChecked,
-      passive: props.checked === void 0
-    });
-    function toggleCheck() {
-      if (disabled.value)
-        return;
-      checked.value = !checked.value;
-    }
-    const { forwardRef, currentElement } = useForwardExpose();
-    const isFormControl = useFormControl(currentElement);
-    const ariaLabel = computed(() => props.id && currentElement.value ? document.querySelector(`[for="${props.id}"]`)?.textContent : void 0);
-    provideSwitchRootContext({
-      checked,
-      toggleCheck,
-      disabled
-    });
-    return {
-      forwardRef,
-      toggleCheck,
-      isFormControl,
-      ariaLabel,
-      checked,
-      disabled
-    };
-  },
-  render() {
-    return [
-      withDirectives(h(Primitive, mergeProps(this.$attrs, {
-        "ref": (el) => this.forwardRef(el),
-        "role": "switch",
-        "type": this.$props.as === "button" ? "button" : void 0,
-        "value": this.value,
-        "aria-label": this.$attrs["aria-label"] || this.ariaLabel,
-        "aria-checked": this.checked,
-        "aria-required": this.$props.required,
-        "data-state": this.checked ? "checked" : "unchecked",
-        "data-disabled": this.disabled ? "" : void 0,
-        "as": this.$props.as,
-        "asChild": this.$props.asChild,
-        "disabled": this.disabled,
-        "onClick": () => {
-          this.toggleCheck();
+const anatomy = createAnatomy("switch").parts("root", "label", "control", "thumb");
+const parts = anatomy.build();
+
+const dom = createScope({
+  getRootId: (ctx) => ctx.ids?.root ?? `switch:${ctx.id}`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `switch:${ctx.id}:label`,
+  getThumbId: (ctx) => ctx.ids?.thumb ?? `switch:${ctx.id}:thumb`,
+  getControlId: (ctx) => ctx.ids?.control ?? `switch:${ctx.id}:control`,
+  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `switch:${ctx.id}:input`,
+  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
+});
+
+function connect(state, send, normalize) {
+  const disabled = state.context.isDisabled;
+  const readOnly = state.context.readOnly;
+  const checked = state.context.checked;
+  const focused = !disabled && state.context.focused;
+  const focusVisible = !disabled && state.context.focusVisible;
+  const dataAttrs = {
+    "data-active": dataAttr(state.context.active),
+    "data-focus": dataAttr(focused),
+    "data-focus-visible": dataAttr(focusVisible),
+    "data-readonly": dataAttr(readOnly),
+    "data-hover": dataAttr(state.context.hovered),
+    "data-disabled": dataAttr(disabled),
+    "data-state": state.context.checked ? "checked" : "unchecked",
+    "data-invalid": dataAttr(state.context.invalid)
+  };
+  return {
+    checked,
+    disabled,
+    focused,
+    setChecked(checked2) {
+      send({ type: "CHECKED.SET", checked: checked2, isTrusted: false });
+    },
+    toggleChecked() {
+      send({ type: "CHECKED.TOGGLE", checked, isTrusted: false });
+    },
+    getRootProps() {
+      return normalize.label({
+        ...parts.root.attrs,
+        ...dataAttrs,
+        dir: state.context.dir,
+        id: dom.getRootId(state.context),
+        htmlFor: dom.getHiddenInputId(state.context),
+        onPointerMove() {
+          if (disabled)
+            return;
+          send({ type: "CONTEXT.SET", context: { hovered: true } });
         },
-        "onKeydown": withModifiers(() => {
-          this.toggleCheck();
-        }, ["enter", "prevent"])
-      }), () => this.$slots.default?.()), [
-        [BindOnceDirective, { id: this.$props.id }]
-      ]),
-      this.isFormControl ? h("input", {
+        onPointerLeave() {
+          if (disabled)
+            return;
+          send({ type: "CONTEXT.SET", context: { hovered: false } });
+        },
+        onClick(event) {
+          if (disabled)
+            return;
+          const target = getEventTarget(event);
+          if (target === dom.getHiddenInputEl(state.context)) {
+            event.stopPropagation();
+          }
+        }
+      });
+    },
+    getLabelProps() {
+      return normalize.element({
+        ...parts.label.attrs,
+        ...dataAttrs,
+        dir: state.context.dir,
+        id: dom.getLabelId(state.context)
+      });
+    },
+    getThumbProps() {
+      return normalize.element({
+        ...parts.thumb.attrs,
+        ...dataAttrs,
+        "dir": state.context.dir,
+        "id": dom.getThumbId(state.context),
+        "aria-hidden": true
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        ...dataAttrs,
+        "dir": state.context.dir,
+        "id": dom.getControlId(state.context),
+        "aria-hidden": true
+      });
+    },
+    getHiddenInputProps() {
+      return normalize.input({
+        "id": dom.getHiddenInputId(state.context),
         "type": "checkbox",
-        "name": this.$props.name,
-        "tabindex": -1,
-        "aria-hidden": "",
-        "disabled": this.disabled,
-        "required": this.$props.required,
-        "value": this.value,
-        "checked": !!this.checked,
-        "data-state": this.checked ? "checked" : "unchecked",
-        "data-disabled": this.disabled ? "" : void 0,
-        "style": {
-          transform: "translateX(-100%)",
-          position: "absolute",
-          pointerEvents: "none",
-          opacity: 0,
-          margin: 0
+        "required": state.context.required,
+        "defaultChecked": checked,
+        "disabled": disabled,
+        "aria-labelledby": dom.getLabelId(state.context),
+        "aria-invalid": state.context.invalid,
+        "name": state.context.name,
+        "form": state.context.form,
+        "value": state.context.value,
+        "style": visuallyHiddenStyle,
+        onFocus() {
+          const focusVisible2 = isFocusVisible();
+          send({ type: "CONTEXT.SET", context: { focused: true, focusVisible: focusVisible2 } });
+        },
+        onBlur() {
+          send({ type: "CONTEXT.SET", context: { focused: false, focusVisible: false } });
+        },
+        onClick(event) {
+          if (readOnly) {
+            event.preventDefault();
+            return;
+          }
+          const checked2 = event.currentTarget.checked;
+          send({ type: "CHECKED.SET", checked: checked2, isTrusted: true });
         }
-      }) : null
-    ];
-  }
-});
+      });
+    }
+  };
+}
 
-const switchThumbProps = {
-  ...primitiveProps,
-  /**
-   * @default span
-   */
-  as: {
-    ...primitiveProps.as,
-    default: "span"
+const { not } = guards;
+const invoke = {
+  change: (ctx) => {
+    ctx.onCheckedChange?.({ checked: ctx.checked });
   }
 };
-const SwitchThumb = defineComponent({
-  name: "DestylerSwitchThump",
-  props: switchThumbProps,
-  setup(_) {
-    const rootContext = injectSwitchRootContext();
-    useForwardExpose();
-    return {
-      rootContext
-    };
-  },
-  render() {
-    return h(Primitive, {
-      "data-state": this.rootContext.checked?.value ? "checked" : "unchecked",
-      "data-disabled": this.rootContext.disabled.value ? "" : void 0,
-      "asChild": this.$props.asChild,
-      "as": this.$props.as
-    }, () => this.$slots.default?.());
+const set = {
+  checked: (ctx, checked) => {
+    if (isEqual(ctx.checked, checked))
+      return;
+    ctx.checked = checked;
+    invoke.change(ctx);
   }
-});
+};
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "switch",
+      initial: "ready",
+      context: {
+        checked: false,
+        label: "switch",
+        value: "on",
+        disabled: false,
+        ...ctx,
+        fieldsetDisabled: false,
+        focusVisible: false
+      },
+      computed: {
+        isDisabled: (ctx2) => ctx2.disabled || ctx2.fieldsetDisabled
+      },
+      watch: {
+        disabled: "removeFocusIfNeeded",
+        checked: "syncInputElement"
+      },
+      activities: ["trackFormControlState", "trackPressEvent", "trackFocusVisible"],
+      on: {
+        "CHECKED.TOGGLE": [
+          {
+            guard: not("isTrusted"),
+            actions: ["toggleChecked", "dispatchChangeEvent"]
+          },
+          {
+            actions: ["toggleChecked"]
+          }
+        ],
+        "CHECKED.SET": [
+          {
+            guard: not("isTrusted"),
+            actions: ["setChecked", "dispatchChangeEvent"]
+          },
+          {
+            actions: ["setChecked"]
+          }
+        ],
+        "CONTEXT.SET": {
+          actions: ["setContext"]
+        }
+      },
+      states: {
+        ready: {}
+      }
+    },
+    {
+      guards: {
+        isTrusted: (_ctx, evt) => !!evt.isTrusted
+      },
+      activities: {
+        trackPressEvent(ctx2) {
+          if (ctx2.isDisabled)
+            return;
+          return trackPress({
+            pointerNode: dom.getRootEl(ctx2),
+            keyboardNode: dom.getHiddenInputEl(ctx2),
+            isValidKey: (event) => event.key === " ",
+            onPress: () => ctx2.active = false,
+            onPressStart: () => ctx2.active = true,
+            onPressEnd: () => ctx2.active = false
+          });
+        },
+        trackFocusVisible(ctx2) {
+          if (ctx2.isDisabled)
+            return;
+          return trackFocusVisible({ root: dom.getRootNode(ctx2) });
+        },
+        trackFormControlState(ctx2, _evt, { send, initialContext }) {
+          return trackFormControl(dom.getHiddenInputEl(ctx2), {
+            onFieldsetDisabledChange(disabled) {
+              ctx2.fieldsetDisabled = disabled;
+            },
+            onFormReset() {
+              send({ type: "CHECKED.SET", checked: !!initialContext.checked, src: "form-reset" });
+            }
+          });
+        }
+      },
+      actions: {
+        setContext(ctx2, evt) {
+          Object.assign(ctx2, evt.context);
+        },
+        syncInputElement(ctx2) {
+          const inputEl = dom.getHiddenInputEl(ctx2);
+          if (!inputEl)
+            return;
+          inputEl.checked = !!ctx2.checked;
+        },
+        removeFocusIfNeeded(ctx2) {
+          if (ctx2.disabled && ctx2.focused) {
+            ctx2.focused = false;
+          }
+        },
+        setChecked(ctx2, evt) {
+          set.checked(ctx2, evt.checked);
+        },
+        toggleChecked(ctx2, _evt) {
+          set.checked(ctx2, !ctx2.checked);
+        },
+        dispatchChangeEvent(ctx2) {
+          const inputEl = dom.getHiddenInputEl(ctx2);
+          dispatchInputCheckedEvent(inputEl, { checked: ctx2.checked });
+        }
+      }
+    }
+  );
+}
+
+const props = createProps()([
+  "checked",
+  "dir",
+  "disabled",
+  "form",
+  "getRootNode",
+  "id",
+  "ids",
+  "invalid",
+  "label",
+  "name",
+  "onCheckedChange",
+  "readOnly",
+  "required",
+  "value"
+]);
+const splitProps = createSplitProps(props);
 
-export { SwitchRoot, SwitchThumb, switchRootEmits, switchRootProps, switchThumbProps };
+export { anatomy, connect, machine, props, splitProps };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@destyler/switch",
   "type": "module",
-  "version": "0.0.6",
-  "description": "a control that allows the user to toggle between checked and not checked.",
+  "version": "0.0.7-beta.1",
+  "description": "A control that allows the user to toggle between checked and not checked.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
@@ -10,14 +10,6 @@
       "types": "./dist/index.d.mts",
       "default": "./dist/index.mjs"
     },
-    "./resolver": {
-      "types": "./dist/resolver.d.mts",
-      "default": "./dist/resolver.mjs"
-    },
-    "./component": {
-      "types": "./dist/component.d.mts",
-      "default": "./dist/component.mjs"
-    },
     "./*": "./*"
   },
   "main": "dist/index.cjs",
@@ -27,17 +19,19 @@
     "*.d.ts",
     "dist"
   ],
-  "peerDependencies": {
-    "vue": ">=3.4.21"
-  },
   "dependencies": {
-    "@destyler/directives": "0.0.6",
-    "@destyler/composition": "0.0.6",
-    "@destyler/primitive": "0.0.6",
-    "@destyler/shared": "0.0.6"
+    "@zag-js/anatomy": "^0.80.0",
+    "@zag-js/core": "^0.80.0",
+    "@zag-js/dom-event": "^0.80.0",
+    "@zag-js/dom-query": "^0.80.0",
+    "@zag-js/focus-visible": "^0.80.0",
+    "@zag-js/form-utils": "^0.80.0",
+    "@zag-js/types": "^0.80.0",
+    "@zag-js/utils": "^0.80.0"
   },
   "scripts": {
     "clear": "rimraf ./dist",
+    "clear:node_modules": "rimraf ./node_modules",
     "build": "pnpm run clear && unbuild",
     "stub": "unbuild --stub"
   }

package/README.md

@@ -1,7 +0,0 @@
-# @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

@@ -1,16 +0,0 @@
-'use strict';
-
-const index = require('./index.cjs');
-require('vue');
-require('@destyler/primitive');
-require('@destyler/composition');
-require('@destyler/shared');
-require('@destyler/directives');
-
-
-
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-export { SwitchRoot, SwitchRootProps, SwitchThumb, SwitchThumbProps, switchRootEmits, switchRootProps, switchThumbProps } from './index.js';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';

package/dist/component.mjs

@@ -1,6 +0,0 @@
-export { SwitchRoot, SwitchThumb, switchRootEmits, switchRootProps, switchThumbProps } from './index.mjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/composition';
-import '@destyler/shared';
-import '@destyler/directives';

package/dist/resolver.cjs

@@ -1,21 +0,0 @@
-'use strict';
-
-const name = "@destyler/switch";
-
-const packageName = name;
-const switchComponentName = [
-  "SwitchRoot",
-  "SwitchThumb"
-];
-function SwitchResolver() {
-  return {
-    type: "component",
-    resolve: (name2) => {
-      if (switchComponentName.includes(name2))
-        return { name: name2, from: packageName };
-    }
-  };
-}
-
-exports.SwitchResolver = SwitchResolver;
-exports.switchComponentName = switchComponentName;

package/dist/resolver.d.cts

@@ -1,6 +0,0 @@
-import { ComponentResolver } from 'unplugin-vue-components';
-
-declare const switchComponentName: string[];
-declare function SwitchResolver(): ComponentResolver;
-
-export { SwitchResolver, switchComponentName };

package/dist/resolver.d.mts

@@ -1,6 +0,0 @@
-import { ComponentResolver } from 'unplugin-vue-components';
-
-declare const switchComponentName: string[];
-declare function SwitchResolver(): ComponentResolver;
-
-export { SwitchResolver, switchComponentName };

package/dist/resolver.d.ts

@@ -1,6 +0,0 @@
-import { ComponentResolver } from 'unplugin-vue-components';
-
-declare const switchComponentName: string[];
-declare function SwitchResolver(): ComponentResolver;
-
-export { SwitchResolver, switchComponentName };

package/dist/resolver.mjs

@@ -1,18 +0,0 @@
-const name = "@destyler/switch";
-
-const packageName = name;
-const switchComponentName = [
-  "SwitchRoot",
-  "SwitchThumb"
-];
-function SwitchResolver() {
-  return {
-    type: "component",
-    resolve: (name2) => {
-      if (switchComponentName.includes(name2))
-        return { name: name2, from: packageName };
-    }
-  };
-}
-
-export { SwitchResolver, switchComponentName };