@destyler/toggle 0.0.6 → 0.0.7-beta.2

package/dist/component.mjs

@@ -1,250 +0,0 @@
-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/resolver.cjs

@@ -1,22 +0,0 @@
-'use strict';
-
-const name = "@destyler/toggle";
-
-const packageName = name;
-const toggleComponentName = [
-  "Toggle",
-  "ToggleGroupRoot",
-  "ToggleGroupItem"
-];
-function ToggleResolver() {
-  return {
-    type: "component",
-    resolve: (name2) => {
-      if (toggleComponentName.includes(name2))
-        return { name: name2, from: packageName };
-    }
-  };
-}
-
-exports.ToggleResolver = ToggleResolver;
-exports.toggleComponentName = toggleComponentName;

package/dist/resolver.d.cts

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

package/dist/resolver.d.mts

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

package/dist/resolver.d.ts

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

package/dist/resolver.mjs

@@ -1,19 +0,0 @@
-const name = "@destyler/toggle";
-
-const packageName = name;
-const toggleComponentName = [
-  "Toggle",
-  "ToggleGroupRoot",
-  "ToggleGroupItem"
-];
-function ToggleResolver() {
-  return {
-    type: "component",
-    resolve: (name2) => {
-      if (toggleComponentName.includes(name2))
-        return { name: name2, from: packageName };
-    }
-  };
-}
-
-export { ToggleResolver, toggleComponentName };