@destyler/switch 0.0.6 → 0.0.7-beta.1

package/dist/index.cjs

@@ -1,189 +1,286 @@
 'use strict';
 
-const vue = require('vue');
-const primitive = require('@destyler/primitive');
-const composition = require('@destyler/composition');
-const shared = require('@destyler/shared');
-const directives = require('@destyler/directives');
+const anatomy$1 = require('@zag-js/anatomy');
+const domQuery = require('@zag-js/dom-query');
+const focusVisible = require('@zag-js/focus-visible');
+const core = require('@zag-js/core');
+const domEvent = require('@zag-js/dom-event');
+const formUtils = require('@zag-js/form-utils');
+const utils = require('@zag-js/utils');
+const types = require('@zag-js/types');
 
-const switchRootProps = {
-  ...primitive.primitiveProps,
-  /**
-   * @default button
-   */
-  as: {
-    ...primitive.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] = shared.createContext("DestylerSwitchRoot");
-const SwitchRoot = vue.defineComponent({
-  name: "DestylerSwitchRoot",
-  props: switchRootProps,
-  emits: switchRootEmits,
-  setup(props, { emit }) {
-    const { disabled } = vue.toRefs(props);
-    const checked = composition.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 } = composition.useForwardExpose();
-    const isFormControl = composition.useFormControl(currentElement);
-    const ariaLabel = vue.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 [
-      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,
-        "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 = anatomy$1.createAnatomy("switch").parts("root", "label", "control", "thumb");
+const parts = anatomy.build();
+
+const dom = domQuery.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$1 = !disabled && state.context.focusVisible;
+  const dataAttrs = {
+    "data-active": domQuery.dataAttr(state.context.active),
+    "data-focus": domQuery.dataAttr(focused),
+    "data-focus-visible": domQuery.dataAttr(focusVisible$1),
+    "data-readonly": domQuery.dataAttr(readOnly),
+    "data-hover": domQuery.dataAttr(state.context.hovered),
+    "data-disabled": domQuery.dataAttr(disabled),
+    "data-state": state.context.checked ? "checked" : "unchecked",
+    "data-invalid": domQuery.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": vue.withModifiers(() => {
-          this.toggleCheck();
-        }, ["enter", "prevent"])
-      }), () => this.$slots.default?.()), [
-        [directives.BindOnceDirective, { id: this.$props.id }]
-      ]),
-      this.isFormControl ? vue.h("input", {
+        onPointerLeave() {
+          if (disabled)
+            return;
+          send({ type: "CONTEXT.SET", context: { hovered: false } });
+        },
+        onClick(event) {
+          if (disabled)
+            return;
+          const target = domQuery.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": domQuery.visuallyHiddenStyle,
+        onFocus() {
+          const focusVisible2 = focusVisible.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 = {
-  ...primitive.primitiveProps,
-  /**
-   * @default span
-   */
-  as: {
-    ...primitive.primitiveProps.as,
-    default: "span"
+const { not } = core.guards;
+const invoke = {
+  change: (ctx) => {
+    ctx.onCheckedChange?.({ checked: ctx.checked });
   }
 };
-const SwitchThumb = vue.defineComponent({
-  name: "DestylerSwitchThump",
-  props: switchThumbProps,
-  setup(_) {
-    const rootContext = injectSwitchRootContext();
-    composition.useForwardExpose();
-    return {
-      rootContext
-    };
-  },
-  render() {
-    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,
-      "as": this.$props.as
-    }, () => this.$slots.default?.());
+const set = {
+  checked: (ctx, checked) => {
+    if (utils.isEqual(ctx.checked, checked))
+      return;
+    ctx.checked = checked;
+    invoke.change(ctx);
   }
-});
+};
+function machine(userContext) {
+  const ctx = utils.compact(userContext);
+  return core.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 domEvent.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 focusVisible.trackFocusVisible({ root: dom.getRootNode(ctx2) });
+        },
+        trackFormControlState(ctx2, _evt, { send, initialContext }) {
+          return formUtils.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);
+          formUtils.dispatchInputCheckedEvent(inputEl, { checked: ctx2.checked });
+        }
+      }
+    }
+  );
+}
+
+const props = types.createProps()([
+  "checked",
+  "dir",
+  "disabled",
+  "form",
+  "getRootNode",
+  "id",
+  "ids",
+  "invalid",
+  "label",
+  "name",
+  "onCheckedChange",
+  "readOnly",
+  "required",
+  "value"
+]);
+const splitProps = utils.createSplitProps(props);
 
-exports.SwitchRoot = SwitchRoot;
-exports.SwitchThumb = SwitchThumb;
-exports.switchRootEmits = switchRootEmits;
-exports.switchRootProps = switchRootProps;
-exports.switchThumbProps = switchThumbProps;
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;
+exports.splitProps = splitProps;