@destyler/dynamic 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -1,533 +1,27 @@
 'use strict';
 
-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 component = require('@destyler/visually-hidden/dist/component');
-const directives = require('@destyler/directives');
-
-const destylerDynamicRootProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  modelValue: {
-    type: Array,
-    required: false,
-    default: () => []
-  },
-  defaultValue: {
-    type: Array,
-    required: false
-  },
-  addOnPaste: {
-    type: Boolean,
-    required: false
-  },
-  duplicate: {
-    type: Boolean,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  delimiter: {
-    type: String,
-    required: false,
-    default: ","
-  },
-  dir: {
-    type: String,
-    required: false
-  },
-  max: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  required: {
-    type: Boolean,
-    required: false
-  },
-  name: {
-    type: String,
-    required: false
-  },
-  id: {
-    type: String,
-    required: false
-  }
-};
-const [injectDynamicRootContext, provideDynamicRootContext] = shared.createContext("DestylerDynamicRoot");
-const DestylerDynamicRoot = vue.defineComponent({
-  name: "DestylerDynamicRoot",
-  props: destylerDynamicRootProps,
-  emits: ["update:modelValue", "invalid"],
-  setup(props, { emit }) {
-    const { addOnPaste, disabled, delimiter, max, id, dir: propDir } = 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 } = collection.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,
-      dir,
-      disabled,
-      delimiter,
-      max,
-      id
-    });
-    return {
-      forwardRef,
-      dir,
-      isInvalidInput,
-      disabled,
-      focused,
-      modelValue,
-      isFormControl
-    };
-  },
-  render() {
-    return vue.h(collection.DestylerCollectionSlot, {}, {
-      default: () => {
-        return vue.h(primitive.DestylerPrimitive, {
-          "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
-        }, {
-          default: () => {
-            return [
-              this.$slots.default?.({ modelValue: this.modelValue }),
-              this.isFormControl && this.$props.name ? vue.h(component.DestylerVisuallyhiddenInput, {
-                name: this.$props.name,
-                value: this.modelValue,
-                required: this.required,
-                disabled: this.disabled
-              }) : null
-            ];
-          }
-        });
-      }
-    });
-  }
-});
-
-const destylerDynamicClearProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "button"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const DestylerDynamicClear = vue.defineComponent({
-  name: "DestylerDynamicClear",
-  props: destylerDynamicClearProps,
-  setup() {
-    composition.useForwardExpose();
-    const context = injectDynamicRootContext();
-    function handleCancel() {
-      if (context.disabled.value)
-        return;
-      context.modelValue.value = [];
-    }
-    return {
-      context,
-      handleCancel
-    };
-  },
-  render() {
-    return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$props, {
-      "type": this.$props.as === "button" ? "button" : void 0,
-      "data-disabled": this.context.disabled.value ? "" : void 0,
-      "onClick": () => {
-        this.handleCancel();
-      }
-    }), {
-      default: () => this.$slots.default?.()
-    });
-  }
-});
-
-const destylerDynamicInputProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "input"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  placeholder: {
-    type: String,
-    required: false
-  },
-  autoFocus: {
-    type: Boolean,
-    required: false
-  },
-  maxLength: {
-    type: Number,
-    required: false
-  }
-};
-const DestylerDynamicInput = vue.defineComponent({
-  name: "DestylerDynamicInput",
-  props: destylerDynamicInputProps,
-  setup(props) {
-    const context = injectDynamicRootContext();
-    const { forwardRef, currentElement } = composition.useForwardExpose();
-    async function handleEnter(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,
-      handleEnter
-    };
-  },
-  render() {
-    return vue.withDirectives(vue.h(primitive.DestylerPrimitive, {
-      "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);
-      },
-      "onPaste": (event) => {
-        this.handlePaste(event);
-      },
-      "onKeydown": (event) => {
-        if (event.key === "Enter")
-          this.handleEnter(event);
-        else
-          this.context.onInputKeydown(event);
-      }
-    }, {
-      default: () => this.$slots.default?.()
-    }), [
-      [directives.BindOnceDirective, { id: this.context.id?.value }]
-    ]);
-  }
-});
-
-const destylerDynamicItemProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  value: {
-    type: String,
-    required: true
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  }
-};
-const [injectDynamicItemContext, provideDynamicItemContext] = shared.createContext("DestylerDynamicItem");
-const DestylerDynamicItem = vue.defineComponent({
-  name: "DestylerDynamicItem",
-  props: destylerDynamicItemProps,
-  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.DestylerCollectionItem, {}, {
-      default: () => {
-        return vue.h(primitive.DestylerPrimitive, {
-          "ref": (el) => this.forwardRef(el),
-          "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"
-        }, {
-          default: () => this.$slots.default?.()
-        });
-      }
-    });
-  }
-});
-
-const destylerDynamicItemDeleteProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "button"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const DestylerDynamicItemDelete = vue.defineComponent({
-  name: "DestylerDynamicItemDelete",
-  props: destylerDynamicItemDeleteProps,
-  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.DestylerPrimitive, 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();
-      }
-    }), {
-      default: () => this.$slots.default?.()
-    });
-  }
-});
-
-const destylerDynamicItemTextProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "span"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const DestylerDynamicItemText = vue.defineComponent({
-  name: "DestylerDynamicItemText",
-  props: destylerDynamicItemTextProps,
-  setup() {
-    const itemContext = injectDynamicItemContext();
-    composition.useForwardExpose();
-    return {
-      itemContext
-    };
-  },
-  render() {
-    return vue.withDirectives(vue.h(primitive.DestylerPrimitive, this.$props, {
-      default: () => this.$slots.default ? this.$slots.default?.() : this.itemContext.value.value
-    }), [
-      [directives.BindOnceDirective, { id: this.itemContext.textId }]
-    ]);
-  }
-});
-
-exports.DestylerDynamicClear = DestylerDynamicClear;
-exports.DestylerDynamicInput = DestylerDynamicInput;
-exports.DestylerDynamicItem = DestylerDynamicItem;
-exports.DestylerDynamicItemDelete = DestylerDynamicItemDelete;
-exports.DestylerDynamicItemText = DestylerDynamicItemText;
-exports.DestylerDynamicRoot = DestylerDynamicRoot;
+const index = require('./component.cjs');
+require('vue');
+require('@destyler/primitive');
+require('@destyler/composition');
+require('@destyler/shared');
+require('@vueuse/core');
+require('@destyler/collection');
+require('@destyler/collection/composition');
+require('@destyler/visually-hidden/component');
+require('@destyler/directives');
+
+
+
+exports.DynamicClear = index.DynamicClear;
+exports.DynamicInput = index.DynamicInput;
+exports.DynamicItem = index.DynamicItem;
+exports.DynamicItemDelete = index.DynamicItemDelete;
+exports.DynamicItemText = index.DynamicItemText;
+exports.DynamicRoot = index.DynamicRoot;
+exports.dynamicClearProps = index.dynamicClearProps;
+exports.dynamicInputProps = index.dynamicInputProps;
+exports.dynamicItemDeleteProps = index.dynamicItemDeleteProps;
+exports.dynamicItemProps = index.dynamicItemProps;
+exports.dynamicItemTextProps = index.dynamicItemTextProps;
+exports.dynamicRootProps = index.dynamicRootProps;