@destyler/toggle 0.0.6 → 0.0.7-beta.2

package/dist/component.cjs

@@ -1,259 +0,0 @@
-'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 toggleProps = {
-  ...primitive.primitiveProps,
-  /**
-   * @default button
-   */
-  as: {
-    ...primitive.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 = vue.defineComponent({
-  name: "DestylerToggle",
-  props: toggleProps,
-  emits: toggleEmits,
-  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.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 = {
-  ...primitive.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] = shared.createContext("DestylerToggleGroupRoot");
-const ToggleGroupRoot = vue.defineComponent({
-  name: "DestylerToggleGroupRoot",
-  props: toggleGroupRootProps,
-  emits: toggleGroupRootEmits,
-  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.RovingFocusGroup : primitive.Primitive, {
-      asChild: true,
-      orientation: this.rovingFocus ? this.$props.orientation : void 0,
-      dir: this.dir,
-      loop: this.rovingFocus ? this.loop : void 0
-    }, () => vue.h(primitive.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 = vue.defineComponent({
-  name: "ToggleGroupItem",
-  props: toggleGroupItemProps,
-  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.RovingFocusItem : primitive.Primitive, {
-      asChild: true,
-      focusable: !this.disabled,
-      active: this.pressed
-    }, () => vue.h(Toggle, 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);
-      }
-    }), () => this.$slots.default?.()));
-  }
-});
-
-exports.Toggle = Toggle;
-exports.ToggleGroupItem = ToggleGroupItem;
-exports.ToggleGroupRoot = ToggleGroupRoot;
-exports.toggleEmits = toggleEmits;
-exports.toggleGroupItemProps = toggleGroupItemProps;
-exports.toggleGroupRootEmits = toggleGroupRootEmits;
-exports.toggleGroupRootProps = toggleGroupRootProps;
-exports.toggleProps = toggleProps;