@destyler/toggle 0.0.2 → 0.0.4

package/dist/component.mjs

@@ -1,6 +1,250 @@
-export { DestylerToggle, DestylerToggleGroupItem, DestylerToggleGroupRoot } from './index.mjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/composition';
-import '@destyler/shared';
-import '@destyler/roving-focus';
+import { defineComponent, computed, h, toRefs, mergeProps } from 'vue';
+import { primitiveProps, Primitive } from '@destyler/primitive';
+import { useForwardExpose, useVModel, useDirection, useSingleOrMultipleValue } from '@destyler/composition';
+import { createContext } from '@destyler/shared';
+import { RovingFocusGroup, RovingFocusItem } from '@destyler/roving-focus';
+
+const toggleProps = {
+  ...primitiveProps,
+  /**
+   * @default button
+   */
+  as: {
+    ...primitiveProps.as,
+    default: "button"
+  },
+  /**
+   * The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.
+   */
+  defaultValue: {
+    type: Boolean,
+    required: false
+  },
+  /**
+   * The controlled pressed state of the toggle. Can be bind as `v-model`.
+   *
+   * @default undefined
+   */
+  pressed: {
+    type: Boolean,
+    required: false,
+    default: void 0
+  },
+  /**
+   * When `true`, prevents the user from interacting with the toggle.
+   */
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const toggleEmits = {
+  /**
+   * Event handler called when the pressed state of the toggle changes.
+   */
+  "update:pressed": (_value) => true
+};
+const Toggle = defineComponent({
+  name: "DestylerToggle",
+  props: toggleProps,
+  emits: toggleEmits,
+  setup(props, { emit }) {
+    useForwardExpose();
+    const pressed = useVModel(props, "pressed", emit, {
+      defaultValue: props.defaultValue,
+      passive: props.pressed === void 0
+    });
+    function togglePressed() {
+      pressed.value = !pressed.value;
+    }
+    const dataState = computed(() => {
+      return pressed.value ? "on" : "off";
+    });
+    return {
+      pressed,
+      togglePressed,
+      dataState
+    };
+  },
+  render() {
+    return h(Primitive, {
+      "as": this.$props.as,
+      "asChild": this.$props.asChild,
+      "type": this.$props.as === "button" ? "button" : void 0,
+      "aria-pressed": this.pressed,
+      "data-state": this.dataState,
+      "data-disabled": this.$props.disabled ? "" : void 0,
+      "disabled": this.$props.disabled,
+      "onClick": () => {
+        this.togglePressed();
+      }
+    }, () => this.$slots.default?.());
+  }
+});
+
+const toggleGroupRootProps = {
+  ...primitiveProps,
+  /**
+   * Determines whether a "single" or "multiple" items can be pressed at a time.
+   *
+   * This prop will be ignored if any of `v-model` or `defaultValue` is an defined, as the type will be inferred from the value.
+   *
+   * @default single
+   */
+  type: {
+    type: String,
+    required: false,
+    default: "single"
+  },
+  /**
+   * The default active value of the item(s).
+   *
+   * Use when you do not need to control the state of the item(s).
+   */
+  defaultValue: {
+    type: [String, Array],
+    required: false
+  },
+  /**
+   * The controlled value of the active item(s).
+   *
+   * Use this when you need to control the state of the items. Can be binded with `v-model`
+   */
+  modelValue: {
+    type: [String, Array],
+    required: false
+  },
+  /**
+   * When `false`, navigating through the items using arrow keys will be disabled.
+   *
+   * @default true
+   */
+  rovingFocus: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  /**
+   * When `true`, prevents the user from interacting with the toggle group and all its items.
+   *
+   * @default false
+   */
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  /**
+   * The orientation of the component, which determines how focus moves: `horizontal` for left/right arrows and `vertical` for up/down arrows.
+   */
+  orientation: {
+    type: String,
+    required: false
+  },
+  /**
+   * The reading direction of the combobox when applicable.
+   */
+  dir: {
+    type: String,
+    required: false
+  },
+  /**
+   * When `loop` and `rovingFocus` is `true`, keyboard navigation will loop from last item to first, and vice versa.
+   */
+  loop: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+};
+const toggleGroupRootEmits = {
+  /**
+   * Event handler called when the value changes.
+   */
+  "update:modelValue": (_value) => true
+};
+const [injectToggleGroupRootContext, provideToggleGroupRootContext] = createContext("DestylerToggleGroupRoot");
+const ToggleGroupRoot = defineComponent({
+  name: "DestylerToggleGroupRoot",
+  props: toggleGroupRootProps,
+  emits: toggleGroupRootEmits,
+  setup(props, { emit }) {
+    const { loop, rovingFocus, disabled, dir: propDir } = toRefs(props);
+    const dir = useDirection(propDir);
+    const { forwardRef } = useForwardExpose();
+    const { modelValue, changeModelValue } = useSingleOrMultipleValue(props, emit);
+    provideToggleGroupRootContext({
+      type: props.type,
+      modelValue,
+      changeModelValue,
+      dir,
+      orientation: props.orientation,
+      loop,
+      rovingFocus,
+      disabled
+    });
+    return {
+      rovingFocus,
+      dir,
+      loop,
+      forwardRef
+    };
+  },
+  render() {
+    return h(this.rovingFocus ? RovingFocusGroup : Primitive, {
+      asChild: true,
+      orientation: this.rovingFocus ? this.$props.orientation : void 0,
+      dir: this.dir,
+      loop: this.rovingFocus ? this.loop : void 0
+    }, () => h(Primitive, {
+      ref: (el) => this.forwardRef(el),
+      role: "group",
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }, () => this.$slots.default?.()));
+  }
+});
+
+const toggleGroupItemProps = {
+  ...toggleProps,
+  /**
+   * A string value for the toggle group item. All items within a toggle group should use a unique value.
+   */
+  value: {
+    type: String,
+    required: true
+  }
+};
+const ToggleGroupItem = defineComponent({
+  name: "ToggleGroupItem",
+  props: toggleGroupItemProps,
+  setup(props) {
+    const rootContext = injectToggleGroupRootContext();
+    const disabled = computed(() => rootContext.disabled?.value || props.disabled);
+    const pressed = computed(() => rootContext.modelValue.value?.includes(props.value));
+    const { forwardRef } = useForwardExpose();
+    return {
+      rootContext,
+      disabled,
+      pressed,
+      forwardRef
+    };
+  },
+  render() {
+    return h(this.rootContext.rovingFocus.value ? RovingFocusItem : Primitive, {
+      asChild: true,
+      focusable: !this.disabled,
+      active: this.pressed
+    }, () => h(Toggle, mergeProps(this.$props, {
+      "ref": (el) => this.forwardRef(el),
+      "disabled": this.disabled,
+      "pressed": this.rootContext.type === "single" ? this.rootContext.modelValue.value === this.$props.value : this.rootContext.modelValue.value?.includes(this.$props.value),
+      "onUpdate:pressed": () => {
+        this.rootContext.changeModelValue(this.$props.value);
+      }
+    }), () => this.$slots.default?.()));
+  }
+});
+
+export { Toggle, ToggleGroupItem, ToggleGroupRoot, toggleEmits, toggleGroupItemProps, toggleGroupRootEmits, toggleGroupRootProps, toggleProps };

package/dist/index.cjs

@@ -1,217 +1,17 @@
 'use strict';
 
-const vue = require('vue');
-const primitive = require('@destyler/primitive');
-const composition = require('@destyler/composition');
-const shared = require('@destyler/shared');
-const rovingFocus = require('@destyler/roving-focus');
+const index = require('./component.cjs');
+require('vue');
+require('@destyler/primitive');
+require('@destyler/composition');
+require('@destyler/shared');
+require('@destyler/roving-focus');
 
-const destylerToggleProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "button"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  defaultValue: {
-    type: Boolean,
-    required: false
-  },
-  pressed: {
-    type: Boolean,
-    required: false,
-    default: void 0
-  },
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const DestylerToggle = vue.defineComponent({
-  name: "DestylerToggle",
-  props: destylerToggleProps,
-  emits: ["update:pressed"],
-  setup(props, { emit }) {
-    composition.useForwardExpose();
-    const pressed = composition.useVModel(props, "pressed", emit, {
-      defaultValue: props.defaultValue,
-      passive: props.pressed === void 0
-    });
-    function togglePressed() {
-      pressed.value = !pressed.value;
-    }
-    const dataState = vue.computed(() => {
-      return pressed.value ? "on" : "off";
-    });
-    return {
-      pressed,
-      togglePressed,
-      dataState
-    };
-  },
-  render() {
-    return vue.h(primitive.DestylerPrimitive, {
-      "as": this.$props.as,
-      "asChild": this.$props.asChild,
-      "type": this.$props.as === "button" ? "button" : void 0,
-      "aria-pressed": this.pressed,
-      "data-state": this.dataState,
-      "data-disabled": this.$props.disabled ? "" : void 0,
-      "disabled": this.$props.disabled,
-      "onClick": () => {
-        this.togglePressed();
-      }
-    }, {
-      default: () => this.$slots.default?.()
-    });
-  }
-});
 
-const destylerToggleGroupRootProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  type: {
-    type: String,
-    required: false,
-    default: "single"
-  },
-  defaultValue: {
-    type: [String, Array],
-    required: false
-  },
-  modelValue: {
-    type: [String, Array],
-    required: false
-  },
-  rovingFocus: {
-    type: Boolean,
-    required: false,
-    default: true
-  },
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  orientation: {
-    type: String,
-    required: false
-  },
-  dir: {
-    type: String,
-    required: false
-  },
-  loop: {
-    type: Boolean,
-    required: false,
-    default: true
-  }
-};
-const [injectToggleGroupRootContext, provideToggleGroupRootContext] = shared.createContext("DestylerToggleGroupRoot");
-const DestylerToggleGroupRoot = vue.defineComponent({
-  name: "DestylerToggleGroupRoot",
-  props: destylerToggleGroupRootProps,
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const { loop, rovingFocus, disabled, dir: propDir } = vue.toRefs(props);
-    const dir = composition.useDirection(propDir);
-    const { forwardRef } = composition.useForwardExpose();
-    const { modelValue, changeModelValue } = composition.useSingleOrMultipleValue(props, emit);
-    provideToggleGroupRootContext({
-      type: props.type,
-      modelValue,
-      changeModelValue,
-      dir,
-      orientation: props.orientation,
-      loop,
-      rovingFocus,
-      disabled
-    });
-    return {
-      rovingFocus,
-      dir,
-      loop,
-      forwardRef
-    };
-  },
-  render() {
-    return vue.h(this.rovingFocus ? rovingFocus.DestylerRovingFocusGroup : primitive.DestylerPrimitive, {
-      asChild: true,
-      orientation: this.rovingFocus ? this.$props.orientation : void 0,
-      dir: this.dir,
-      loop: this.rovingFocus ? this.loop : void 0
-    }, {
-      default: () => {
-        return vue.h(primitive.DestylerPrimitive, {
-          ref: (el) => this.forwardRef(el),
-          role: "group",
-          as: this.$props.as,
-          asChild: this.$props.asChild
-        }, {
-          default: () => this.$slots.default?.()
-        });
-      }
-    });
-  }
-});
 
-const destylerToggleGroupItemProps = {
-  ...destylerToggleProps,
-  value: {
-    type: String,
-    required: true
-  }
-};
-const DestylerToggleGroupItem = vue.defineComponent({
-  name: "DestylerToggleGroupItem",
-  props: destylerToggleGroupItemProps,
-  setup(props) {
-    const rootContext = injectToggleGroupRootContext();
-    const disabled = vue.computed(() => rootContext.disabled?.value || props.disabled);
-    const pressed = vue.computed(() => rootContext.modelValue.value?.includes(props.value));
-    const { forwardRef } = composition.useForwardExpose();
-    return {
-      rootContext,
-      disabled,
-      pressed,
-      forwardRef
-    };
-  },
-  render() {
-    return vue.h(this.rootContext.rovingFocus.value ? rovingFocus.DestylerRovingFocusItem : primitive.DestylerPrimitive, {
-      asChild: true,
-      focusable: !this.disabled,
-      active: this.pressed
-    }, {
-      default: () => {
-        return vue.h(DestylerToggle, vue.mergeProps(this.$props, {
-          "ref": (el) => this.forwardRef(el),
-          "disabled": this.disabled,
-          "pressed": this.rootContext.type === "single" ? this.rootContext.modelValue.value === this.$props.value : this.rootContext.modelValue.value?.includes(this.$props.value),
-          "onUpdate:pressed": () => {
-            this.rootContext.changeModelValue(this.$props.value);
-          }
-        }), {
-          default: () => this.$slots.default?.()
-        });
-      }
-    });
-  }
-});
-
-exports.DestylerToggle = DestylerToggle;
-exports.DestylerToggleGroupItem = DestylerToggleGroupItem;
-exports.DestylerToggleGroupRoot = DestylerToggleGroupRoot;
+exports.Toggle = index.Toggle;
+exports.ToggleGroupItem = index.ToggleGroupItem;
+exports.ToggleGroupRoot = index.ToggleGroupRoot;
+exports.toggleGroupItemProps = index.toggleGroupItemProps;
+exports.toggleGroupRootProps = index.toggleGroupRootProps;
+exports.toggleProps = index.toggleProps;