@destyler/dynamic 0.0.6 → 0.0.7-beta.1

package/dist/component.mjs

@@ -1,608 +0,0 @@
-import { defineComponent, toRefs, ref, h, mergeProps, onMounted, withDirectives, withKeys, nextTick, computed } from 'vue';
-import { primitiveProps, Primitive } from '@destyler/primitive';
-import { useDirection, useVModel, useForwardExpose, useFormControl, useArrowNavigation, useId } from '@destyler/composition';
-import { createContext } from '@destyler/shared';
-import { useFocusWithin } from '@vueuse/core';
-import { CollectionSlot, CollectionItem } from '@destyler/collection';
-import { createCollection } from '@destyler/collection/composition';
-import { VisuallyHiddenInput } from '@destyler/visually-hidden/component';
-import { BindOnceDirective } from '@destyler/directives';
-
-const dynamicRootProps = {
-  ...primitiveProps,
-  /**
-   * The controlled value of the tags input. Can be bind as `v-model`.
-   *
-   * @default () => []
-   */
-  modelValue: {
-    type: Array,
-    required: false,
-    default: () => []
-  },
-  /**
-   * The value of the tags that should be added.
-   * Use when you do not need to control the state of the tags input
-   */
-  defaultValue: {
-    type: Array,
-    required: false
-  },
-  /**
-   * When `true`, allow adding tags on paste.
-   * Work in conjunction with delimiter prop.
-   *
-   * @default false
-   */
-  addOnPaste: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  /**
-   * When `true` allow adding tags on tab keydown
-   *
-   * @default false
-   */
-  addOnTab: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  /**
-   * When `true` allow adding tags blur input
-   *
-   * @default false
-   */
-  addOnBlur: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  /**
-   * When `true`, allow duplicated tags.
-   *
-   * @default false
-   */
-  duplicate: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  /**
-   * When `true`, prevents the user from interacting with the tags input.
-   *
-   * @default false
-   */
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  /**
-   * The character to trigger the addition of a new tag.
-   * Also used to split tags for `@paste` event
-   *
-   * @default ,
-   */
-  delimiter: {
-    type: String,
-    required: false,
-    default: ","
-  },
-  /**
-   s* The reading direction of the combobox when applicable.
-   */
-  dir: {
-    type: String,
-    required: false
-  },
-  /**
-   * Maximum number of tags.
-   *
-   * @default 0
-   */
-  max: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  /**
-   * When `true`, indicates that the user must add the
-   * tags input before the owning form can be submitted.
-   *
-   * @default false
-   */
-  required: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  /**
-   * The name of the tags input submitted with its
-   * owning form as part of a name/value pair.
-   */
-  name: {
-    type: String,
-    required: false
-  },
-  /**
-   * The unique identifier of the machine.
-   */
-  id: {
-    type: String,
-    required: false
-  }
-};
-const dynamicRootEmits = {
-  /**
-   * Event handler called when the value is invalid
-   */
-  "invalid": (_payload) => true,
-  /**
-   * Event handler called when the value changes
-   */
-  "update:modelValue": (_value) => true
-};
-const [injectDynamicRootContext, provideDynamicRootContext] = createContext("DestylerDynamicRoot");
-const DynamicRoot = defineComponent({
-  name: "DestylerDynamicRoot",
-  props: dynamicRootProps,
-  emits: dynamicRootEmits,
-  slots: Object,
-  setup(props, { emit }) {
-    const { addOnPaste, disabled, delimiter, max, id, dir: propDir, addOnBlur, addOnTab } = toRefs(props);
-    const dir = useDirection(propDir);
-    const modelValue = useVModel(props, "modelValue", emit, {
-      defaultValue: props.defaultValue,
-      passive: true,
-      deep: true
-    });
-    const { forwardRef, currentElement } = useForwardExpose();
-    const { focused } = useFocusWithin(currentElement);
-    const isFormControl = useFormControl(currentElement);
-    const { getItems } = createCollection();
-    const selectedElement = ref();
-    const isInvalidInput = ref(false);
-    provideDynamicRootContext({
-      modelValue,
-      onAddValue: (payload) => {
-        if (modelValue.value.length >= max.value && !!max.value) {
-          emit("invalid", payload);
-          return false;
-        }
-        if (props.duplicate) {
-          modelValue.value.push(payload);
-          return true;
-        } else {
-          const exist = modelValue.value.includes(payload);
-          if (!exist) {
-            modelValue.value.push(payload);
-            return true;
-          } else {
-            isInvalidInput.value = true;
-          }
-        }
-        emit("invalid", payload);
-        return false;
-      },
-      onRemoveValue: (index) => {
-        if (index !== -1)
-          modelValue.value.splice(index, 1);
-      },
-      onInputKeydown: (event) => {
-        const target = event.target;
-        const collection = getItems().map((i) => i.ref).filter((i) => i.dataset.disabled !== "");
-        if (!collection.length)
-          return;
-        const lastTag = collection.at(-1);
-        switch (event.key) {
-          case "Delete":
-          case "Backspace": {
-            if (target.selectionStart !== 0 || target.selectionEnd !== 0)
-              break;
-            if (selectedElement.value) {
-              const index = collection.findIndex((i) => i === selectedElement.value);
-              modelValue.value.splice(index, 1);
-              selectedElement.value = selectedElement.value === lastTag ? collection.at(index - 1) : collection.at(index + 1);
-              event.preventDefault();
-            } else if (event.key === "Backspace") {
-              selectedElement.value = lastTag;
-              event.preventDefault();
-            }
-            break;
-          }
-          case "Home":
-          case "End":
-          case "ArrowRight":
-          case "ArrowLeft": {
-            const isArrowRight = event.key === "ArrowRight" && dir.value === "ltr" || event.key === "ArrowLeft" && dir.value === "rtl";
-            const isArrowLeft = !isArrowRight;
-            if (target.selectionStart !== 0 || target.selectionEnd !== 0)
-              break;
-            if (isArrowLeft && !selectedElement.value) {
-              selectedElement.value = lastTag;
-              event.preventDefault();
-            } else if (isArrowRight && lastTag && selectedElement.value === lastTag) {
-              selectedElement.value = void 0;
-              event.preventDefault();
-            } else if (selectedElement.value) {
-              const el = useArrowNavigation(event, selectedElement.value, void 0, {
-                itemsArray: collection,
-                loop: false,
-                dir: dir.value
-              });
-              if (el)
-                selectedElement.value = el;
-              event.preventDefault();
-            }
-            break;
-          }
-          case "ArrowUp":
-          case "ArrowDown": {
-            if (selectedElement.value)
-              event.preventDefault();
-            break;
-          }
-          default: {
-            selectedElement.value = void 0;
-          }
-        }
-      },
-      selectedElement,
-      isInvalidInput,
-      addOnPaste,
-      addOnBlur,
-      addOnTab,
-      dir,
-      disabled,
-      delimiter,
-      max,
-      id
-    });
-    return {
-      forwardRef,
-      dir,
-      isInvalidInput,
-      disabled,
-      focused,
-      modelValue,
-      isFormControl
-    };
-  },
-  render() {
-    return h(CollectionSlot, {}, () => h(Primitive, {
-      "ref": (el) => this.forwardRef(el),
-      "dir": this.dir,
-      "as": this.$props.as,
-      "asChild": this.$props.asChild,
-      "data-invalid": this.isInvalidInput ? "" : void 0,
-      "data-disabled": this.disabled ? "" : void 0,
-      "data-focused": this.focused ? "" : void 0
-    }, () => [
-      this.$slots.default?.({ modelValue: this.modelValue }),
-      this.isFormControl && this.$props.name ? h(VisuallyHiddenInput, {
-        name: this.$props.name,
-        value: this.modelValue,
-        required: this.required,
-        disabled: this.disabled
-      }) : null
-    ]));
-  }
-});
-
-const dynamicClearProps = {
-  ...primitiveProps,
-  /**
-   * @default button
-   */
-  as: {
-    ...primitiveProps.as,
-    default: "button"
-  }
-};
-const DynamicClear = defineComponent({
-  name: "DestylerDynamicClear",
-  props: dynamicClearProps,
-  setup() {
-    useForwardExpose();
-    const context = injectDynamicRootContext();
-    function handleCancel() {
-      if (context.disabled.value)
-        return;
-      context.modelValue.value = [];
-    }
-    return {
-      context,
-      handleCancel
-    };
-  },
-  render() {
-    return h(Primitive, mergeProps(this.$props, {
-      "type": this.$props.as === "button" ? "button" : void 0,
-      "data-disabled": this.context.disabled.value ? "" : void 0,
-      "onClick": () => {
-        this.handleCancel();
-      }
-    }), () => this.$slots.default?.());
-  }
-});
-
-const dynamicInputProps = {
-  ...primitiveProps,
-  /**
-   * @default input
-   */
-  as: {
-    ...primitiveProps.as,
-    default: "input"
-  },
-  /**
-   * The placeholder character to use for empty tags input.
-   */
-  placeholder: {
-    type: String,
-    required: false
-  },
-  /**
-   * Focus on element when mounted.
-   */
-  autoFocus: {
-    type: Boolean,
-    required: false
-  },
-  /**
-   * Maximum number of character allowed.
-   */
-  maxLength: {
-    type: Number,
-    required: false
-  }
-};
-const DynamicInput = defineComponent({
-  name: "DestylerDynamicInput",
-  props: dynamicInputProps,
-  setup(props) {
-    const context = injectDynamicRootContext();
-    const { forwardRef, currentElement } = useForwardExpose();
-    function handleBlur(event) {
-      if (!context.addOnBlur.value)
-        return;
-      const target = event.target;
-      if (!target.value)
-        return;
-      const isAdded = context.onAddValue(target.value);
-      if (isAdded)
-        target.value = "";
-    }
-    function handleTab(event) {
-      if (!context.addOnTab.value)
-        return;
-      handleCustomKeydown(event);
-    }
-    async function handleCustomKeydown(event) {
-      await nextTick();
-      if (event.defaultPrevented)
-        return;
-      const target = event.target;
-      if (!target.value)
-        return;
-      const isAdded = context.onAddValue(target.value);
-      if (isAdded)
-        target.value = "";
-      event.preventDefault();
-    }
-    function handleInput(event) {
-      context.isInvalidInput.value = false;
-      const delimiter = context.delimiter.value;
-      if (delimiter === event.data) {
-        const target = event.target;
-        target.value = target.value.replaceAll(delimiter, "");
-        const isAdded = context.onAddValue(target.value);
-        if (isAdded)
-          target.value = "";
-      }
-    }
-    function handlePaste(event) {
-      if (context.addOnPaste.value) {
-        event.preventDefault();
-        const clipboardData = event.clipboardData;
-        if (!clipboardData)
-          return;
-        const value = clipboardData.getData("text");
-        if (context.delimiter.value) {
-          const splittedValue = value.split(context.delimiter.value);
-          splittedValue.forEach((v) => {
-            context.onAddValue(v);
-          });
-        } else {
-          context.onAddValue(value);
-        }
-      }
-    }
-    onMounted(() => {
-      const inputEl = currentElement.value.nodeName === "INPUT" ? currentElement.value : currentElement.value.querySelector("input");
-      if (!inputEl)
-        return;
-      setTimeout(() => {
-        if (props.autoFocus)
-          inputEl?.focus();
-      }, 1);
-    });
-    return {
-      forwardRef,
-      context,
-      handleInput,
-      handlePaste,
-      handleCustomKeydown,
-      handleBlur,
-      handleTab
-    };
-  },
-  render() {
-    return withDirectives(h(Primitive, {
-      "ref": (el) => this.forwardRef(el),
-      "type": "text",
-      "autocomplete": "off",
-      "autocorrect": "off",
-      "autocapitalize": "off",
-      "as": this.$props.as,
-      "asChild": this.$props.asChild,
-      "maxlength": this.$props.maxLength,
-      "placeholder": this.$props.placeholder,
-      "disabled": this.context.disabled.value,
-      "data-invalid": this.context.isInvalidInput.value ? "" : void 0,
-      "onInput": (event) => {
-        this.handleInput(event);
-      },
-      "onKeydown": [
-        withKeys(this.handleCustomKeydown, ["enter"]),
-        withKeys(this.handleTab, ["tab"]),
-        this.context.onInputKeydown
-      ],
-      "onBlur": (event) => {
-        this.handleBlur(event);
-      },
-      "onPaste": (event) => {
-        this.handlePaste(event);
-      }
-    }, () => this.$slots.default?.()), [
-      [BindOnceDirective, { id: this.context.id?.value }]
-    ]);
-  }
-});
-
-const dynamicItemProps = {
-  ...primitiveProps,
-  /**
-   * Value associated with the tags
-   */
-  value: {
-    type: String,
-    required: true
-  },
-  /**
-   * When `true`, prevents the user from interacting with the tags input.
-   */
-  disabled: {
-    type: Boolean,
-    required: false
-  }
-};
-const [injectDynamicItemContext, provideDynamicItemContext] = createContext("DestylerDynamicItem");
-const DynamicItem = defineComponent({
-  name: "DestylerDynamicItem",
-  props: dynamicItemProps,
-  setup(props) {
-    const { value } = toRefs(props);
-    const context = injectDynamicRootContext();
-    const { forwardRef, currentElement } = useForwardExpose();
-    const isSelected = computed(() => context.selectedElement.value === currentElement.value);
-    const textId = useId();
-    const disabled = computed(() => props.disabled || context.disabled.value);
-    provideDynamicItemContext({
-      value,
-      isSelected,
-      disabled,
-      textId
-    });
-    return {
-      forwardRef,
-      textId,
-      isSelected,
-      disabled
-    };
-  },
-  render() {
-    return h(CollectionItem, {}, () => h(Primitive, {
-      "ref": this.forwardRef,
-      "as": this.$props.as,
-      "asChild": this.$props.asChild,
-      "aria-labelledby": this.textId,
-      "aria-current": this.isSelected,
-      "data-disabled": this.disabled ? "" : void 0,
-      "data-state": this.isSelected ? "active" : "inactive"
-    }, () => this.$slots.default?.()));
-  }
-});
-
-const dynamicItemDeleteProps = {
-  ...primitiveProps,
-  /**
-   * @default button
-   */
-  as: {
-    ...primitiveProps.as,
-    default: "button"
-  }
-};
-const DynamicItemDelete = defineComponent({
-  name: "DestylerDynamicItemDelete",
-  props: dynamicItemDeleteProps,
-  setup() {
-    useForwardExpose();
-    const context = injectDynamicRootContext();
-    const itemContext = injectDynamicItemContext();
-    const disabled = computed(() => itemContext.disabled?.value || context.disabled.value);
-    function handleDelete() {
-      if (disabled.value)
-        return;
-      const index = context.modelValue.value.findIndex((i) => i === itemContext.value.value);
-      context.onRemoveValue(index);
-    }
-    return {
-      context,
-      itemContext,
-      disabled,
-      handleDelete
-    };
-  },
-  render() {
-    return h(Primitive, mergeProps(this.$props, {
-      "tabindex": "-1",
-      "aria-labelledby": this.itemContext.textId,
-      "aria-current": this.itemContext.isSelected.value,
-      "data-state": this.itemContext.isSelected.value ? "active" : "inactive",
-      "data-disabled": this.disabled ? "" : void 0,
-      "type": this.$props.as === "button" ? "button" : void 0,
-      "onClick": () => {
-        this.handleDelete();
-      }
-    }), () => this.$slots.default?.());
-  }
-});
-
-const dynamicItemTextProps = {
-  ...primitiveProps,
-  /**
-   * @default span
-   */
-  as: {
-    ...primitiveProps.as,
-    default: "span"
-  }
-};
-const DynamicItemText = defineComponent({
-  name: "DestylerDynamicItemText",
-  props: dynamicItemTextProps,
-  slots: Object,
-  setup() {
-    const itemContext = injectDynamicItemContext();
-    useForwardExpose();
-    itemContext.textId || (itemContext.textId = useId(void 0, "destyler-tags-input-item-text"));
-    return {
-      itemContext
-    };
-  },
-  render() {
-    return withDirectives(h(
-      Primitive,
-      this.$props,
-      () => this.$slots.default ? this.$slots.default?.({ text: this.itemContext.value.value }) : this.itemContext.value.value
-    ), [
-      [BindOnceDirective, { id: this.itemContext.textId }]
-    ]);
-  }
-});
-
-export { DynamicClear, DynamicInput, DynamicItem, DynamicItemDelete, DynamicItemText, DynamicRoot, dynamicClearProps, dynamicInputProps, dynamicItemDeleteProps, dynamicItemProps, dynamicItemTextProps, dynamicRootEmits, dynamicRootProps };

package/dist/resolver.cjs

@@ -1,25 +0,0 @@
-'use strict';
-
-const name = "@destyler/dynamic";
-
-const packageName = name;
-const dynamicComponentName = [
-  "DynamicClear",
-  "DynamicInput",
-  "DynamicItem",
-  "DynamicItemDelete",
-  "DynamicItemText",
-  "DynamicRoot"
-];
-function DynamicResolver() {
-  return {
-    type: "component",
-    resolve: (name2) => {
-      if (dynamicComponentName.includes(name2))
-        return { name: name2, from: packageName };
-    }
-  };
-}
-
-exports.DynamicResolver = DynamicResolver;
-exports.dynamicComponentName = dynamicComponentName;

package/dist/resolver.d.cts

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

package/dist/resolver.d.mts

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

package/dist/resolver.d.ts

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

package/dist/resolver.mjs

@@ -1,22 +0,0 @@
-const name = "@destyler/dynamic";
-
-const packageName = name;
-const dynamicComponentName = [
-  "DynamicClear",
-  "DynamicInput",
-  "DynamicItem",
-  "DynamicItemDelete",
-  "DynamicItemText",
-  "DynamicRoot"
-];
-function DynamicResolver() {
-  return {
-    type: "component",
-    resolve: (name2) => {
-      if (dynamicComponentName.includes(name2))
-        return { name: name2, from: packageName };
-    }
-  };
-}
-
-export { DynamicResolver, dynamicComponentName };