@destyler/dynamic 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,7 @@
+# @destyler/dynamic
+
+[![NPM version](https://img.shields.io/npm/v/@destyler/dynamic?color=a1b858&label=)](https://www.npmjs.com/package/@destyler/dynamic)
+
+> inputs render tags inside an input, followed by an actual text input.
+
+[GitHub](https://github.com/destyler/destyler) | [Documentation](https://destyler-dev.zeabur.app/)

package/dist/component.cjs

@@ -1,20 +1,622 @@
 'use strict';
 
-const index = require('./index.cjs');
-require('vue');
-require('@destyler/primitive');
-require('@destyler/composition');
-require('@destyler/shared');
-require('@vueuse/core');
-require('@destyler/collection');
-require('@destyler/visually-hidden/dist/component');
-require('@destyler/directives');
-
-
-
-exports.DestylerDynamicClear = index.DestylerDynamicClear;
-exports.DestylerDynamicInput = index.DestylerDynamicInput;
-exports.DestylerDynamicItem = index.DestylerDynamicItem;
-exports.DestylerDynamicItemDelete = index.DestylerDynamicItemDelete;
-exports.DestylerDynamicItemText = index.DestylerDynamicItemText;
-exports.DestylerDynamicRoot = index.DestylerDynamicRoot;
+const vue = require('vue');
+const primitive = require('@destyler/primitive');
+const composition = require('@destyler/composition');
+const shared = require('@destyler/shared');
+const core = require('@vueuse/core');
+const collection = require('@destyler/collection');
+const composition$1 = require('@destyler/collection/composition');
+const component = require('@destyler/visually-hidden/component');
+const directives = require('@destyler/directives');
+
+const dynamicRootProps = {
+  ...primitive.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] = shared.createContext("DestylerDynamicRoot");
+const DynamicRoot = vue.defineComponent({
+  name: "DestylerDynamicRoot",
+  props: dynamicRootProps,
+  emits: dynamicRootEmits,
+  slots: Object,
+  setup(props, { emit }) {
+    const { addOnPaste, disabled, delimiter, max, id, dir: propDir, addOnBlur, addOnTab } = vue.toRefs(props);
+    const dir = composition.useDirection(propDir);
+    const modelValue = composition.useVModel(props, "modelValue", emit, {
+      defaultValue: props.defaultValue,
+      passive: true,
+      deep: true
+    });
+    const { forwardRef, currentElement } = composition.useForwardExpose();
+    const { focused } = core.useFocusWithin(currentElement);
+    const isFormControl = composition.useFormControl(currentElement);
+    const { getItems } = composition$1.createCollection();
+    const selectedElement = vue.ref();
+    const isInvalidInput = vue.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 = composition.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 vue.h(collection.CollectionSlot, {}, () => vue.h(primitive.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 ? vue.h(component.VisuallyHiddenInput, {
+        name: this.$props.name,
+        value: this.modelValue,
+        required: this.required,
+        disabled: this.disabled
+      }) : null
+    ]));
+  }
+});
+
+const dynamicClearProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
+  as: {
+    ...primitive.primitiveProps.as,
+    default: "button"
+  }
+};
+const DynamicClear = vue.defineComponent({
+  name: "DestylerDynamicClear",
+  props: dynamicClearProps,
+  setup() {
+    composition.useForwardExpose();
+    const context = injectDynamicRootContext();
+    function handleCancel() {
+      if (context.disabled.value)
+        return;
+      context.modelValue.value = [];
+    }
+    return {
+      context,
+      handleCancel
+    };
+  },
+  render() {
+    return vue.h(primitive.Primitive, vue.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 = {
+  ...primitive.primitiveProps,
+  /**
+   * @default input
+   */
+  as: {
+    ...primitive.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 = vue.defineComponent({
+  name: "DestylerDynamicInput",
+  props: dynamicInputProps,
+  setup(props) {
+    const context = injectDynamicRootContext();
+    const { forwardRef, currentElement } = composition.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 vue.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);
+        }
+      }
+    }
+    vue.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 vue.withDirectives(vue.h(primitive.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": [
+        vue.withKeys(this.handleCustomKeydown, ["enter"]),
+        vue.withKeys(this.handleTab, ["tab"]),
+        this.context.onInputKeydown
+      ],
+      "onBlur": (event) => {
+        this.handleBlur(event);
+      },
+      "onPaste": (event) => {
+        this.handlePaste(event);
+      }
+    }, () => this.$slots.default?.()), [
+      [directives.BindOnceDirective, { id: this.context.id?.value }]
+    ]);
+  }
+});
+
+const dynamicItemProps = {
+  ...primitive.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] = shared.createContext("DestylerDynamicItem");
+const DynamicItem = vue.defineComponent({
+  name: "DestylerDynamicItem",
+  props: dynamicItemProps,
+  setup(props) {
+    const { value } = vue.toRefs(props);
+    const context = injectDynamicRootContext();
+    const { forwardRef, currentElement } = composition.useForwardExpose();
+    const isSelected = vue.computed(() => context.selectedElement.value === currentElement.value);
+    const textId = composition.useId();
+    const disabled = vue.computed(() => props.disabled || context.disabled.value);
+    provideDynamicItemContext({
+      value,
+      isSelected,
+      disabled,
+      textId
+    });
+    return {
+      forwardRef,
+      textId,
+      isSelected,
+      disabled
+    };
+  },
+  render() {
+    return vue.h(collection.CollectionItem, {}, () => vue.h(primitive.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 = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
+  as: {
+    ...primitive.primitiveProps.as,
+    default: "button"
+  }
+};
+const DynamicItemDelete = vue.defineComponent({
+  name: "DestylerDynamicItemDelete",
+  props: dynamicItemDeleteProps,
+  setup() {
+    composition.useForwardExpose();
+    const context = injectDynamicRootContext();
+    const itemContext = injectDynamicItemContext();
+    const disabled = vue.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 vue.h(primitive.Primitive, vue.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 = {
+  ...primitive.primitiveProps,
+  /**
+   * @default span
+   */
+  as: {
+    ...primitive.primitiveProps.as,
+    default: "span"
+  }
+};
+const DynamicItemText = vue.defineComponent({
+  name: "DestylerDynamicItemText",
+  props: dynamicItemTextProps,
+  slots: Object,
+  setup() {
+    const itemContext = injectDynamicItemContext();
+    composition.useForwardExpose();
+    itemContext.textId || (itemContext.textId = composition.useId(void 0, "destyler-tags-input-item-text"));
+    return {
+      itemContext
+    };
+  },
+  render() {
+    return vue.withDirectives(vue.h(
+      primitive.Primitive,
+      this.$props,
+      () => this.$slots.default ? this.$slots.default?.({ text: this.itemContext.value.value }) : this.itemContext.value.value
+    ), [
+      [directives.BindOnceDirective, { id: this.itemContext.textId }]
+    ]);
+  }
+});
+
+exports.DynamicClear = DynamicClear;
+exports.DynamicInput = DynamicInput;
+exports.DynamicItem = DynamicItem;
+exports.DynamicItemDelete = DynamicItemDelete;
+exports.DynamicItemText = DynamicItemText;
+exports.DynamicRoot = DynamicRoot;
+exports.dynamicClearProps = dynamicClearProps;
+exports.dynamicInputProps = dynamicInputProps;
+exports.dynamicItemDeleteProps = dynamicItemDeleteProps;
+exports.dynamicItemProps = dynamicItemProps;
+exports.dynamicItemTextProps = dynamicItemTextProps;
+exports.dynamicRootEmits = dynamicRootEmits;
+exports.dynamicRootProps = dynamicRootProps;