@destyler/dynamic 0.0.3 → 0.0.5

package/dist/index.mjs

@@ -1,504 +1,10 @@
-import { defineComponent, toRefs, ref, h, mergeProps, onMounted, withDirectives, nextTick, computed } from 'vue';
-import { DestylerPrimitive } from '@destyler/primitive';
-import { useDirection, useVModel, useForwardExpose, useFormControl, useArrowNavigation, useId } from '@destyler/composition';
-import { createContext } from '@destyler/shared';
-import { useFocusWithin } from '@vueuse/core';
-import { createCollection, DestylerCollectionSlot, DestylerCollectionItem } from '@destyler/collection';
-import { DestylerVisuallyhiddenInput } from '@destyler/visually-hidden/dist/component';
-import { BindOnceDirective } from '@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] = createContext("DestylerDynamicRoot");
-const DestylerDynamicRoot = defineComponent({
-  name: "DestylerDynamicRoot",
-  props: destylerDynamicRootProps,
-  emits: ["update:modelValue", "invalid"],
-  setup(props, { emit }) {
-    const { addOnPaste, disabled, delimiter, max, id, dir: propDir } = 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,
-      dir,
-      disabled,
-      delimiter,
-      max,
-      id
-    });
-    return {
-      forwardRef,
-      dir,
-      isInvalidInput,
-      disabled,
-      focused,
-      modelValue,
-      isFormControl
-    };
-  },
-  render() {
-    return h(DestylerCollectionSlot, {}, () => h(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
-    }, () => [
-      this.$slots.default?.({ modelValue: this.modelValue }),
-      this.isFormControl && this.$props.name ? h(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 = defineComponent({
-  name: "DestylerDynamicClear",
-  props: destylerDynamicClearProps,
-  setup() {
-    useForwardExpose();
-    const context = injectDynamicRootContext();
-    function handleCancel() {
-      if (context.disabled.value)
-        return;
-      context.modelValue.value = [];
-    }
-    return {
-      context,
-      handleCancel
-    };
-  },
-  render() {
-    return h(DestylerPrimitive, 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 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 = defineComponent({
-  name: "DestylerDynamicInput",
-  props: destylerDynamicInputProps,
-  setup(props) {
-    const context = injectDynamicRootContext();
-    const { forwardRef, currentElement } = useForwardExpose();
-    async function handleEnter(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,
-      handleEnter
-    };
-  },
-  render() {
-    return withDirectives(h(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);
-      }
-    }, () => this.$slots.default?.()), [
-      [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] = createContext("DestylerDynamicItem");
-const DestylerDynamicItem = defineComponent({
-  name: "DestylerDynamicItem",
-  props: destylerDynamicItemProps,
-  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(DestylerCollectionItem, {}, () => h(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"
-    }, () => this.$slots.default?.()));
-  }
-});
-
-const destylerDynamicItemDeleteProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "button"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const DestylerDynamicItemDelete = defineComponent({
-  name: "DestylerDynamicItemDelete",
-  props: destylerDynamicItemDeleteProps,
-  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(DestylerPrimitive, 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 destylerDynamicItemTextProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "span"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const DestylerDynamicItemText = defineComponent({
-  name: "DestylerDynamicItemText",
-  props: destylerDynamicItemTextProps,
-  setup() {
-    const itemContext = injectDynamicItemContext();
-    useForwardExpose();
-    return {
-      itemContext
-    };
-  },
-  render() {
-    return withDirectives(h(DestylerPrimitive, this.$props, () => this.$slots.default ? this.$slots.default?.() : this.itemContext.value.value), [
-      [BindOnceDirective, { id: this.itemContext.textId }]
-    ]);
-  }
-});
-
-export { DestylerDynamicClear, DestylerDynamicInput, DestylerDynamicItem, DestylerDynamicItemDelete, DestylerDynamicItemText, DestylerDynamicRoot };
+export { DynamicClear, DynamicInput, DynamicItem, DynamicItemDelete, DynamicItemText, DynamicRoot, dynamicClearProps, dynamicInputProps, dynamicItemDeleteProps, dynamicItemProps, dynamicItemTextProps, dynamicRootProps } from './component.mjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/composition';
+import '@destyler/shared';
+import '@vueuse/core';
+import '@destyler/collection';
+import '@destyler/collection/composition';
+import '@destyler/visually-hidden/component';
+import '@destyler/directives';

package/dist/resolver.cjs

@@ -3,18 +3,23 @@
 const name = "@destyler/dynamic";
 
 const packageName = name;
-const destylerComponentName = [
-  "DestylerTemplate"
+const dynamicComponentName = [
+  "DynamicClear",
+  "DynamicInput",
+  "DynamicItem",
+  "DynamicItemDelete",
+  "DynamicItemText",
+  "DynamicRoot"
 ];
-function DestylerTemplateResolver() {
+function DynamicResolver() {
   return {
     type: "component",
     resolve: (name2) => {
-      if (destylerComponentName.includes(name2))
+      if (dynamicComponentName.includes(name2))
         return { name: name2, from: packageName };
     }
   };
 }
 
-exports.DestylerTemplateResolver = DestylerTemplateResolver;
-exports.destylerComponentName = destylerComponentName;
+exports.DynamicResolver = DynamicResolver;
+exports.dynamicComponentName = dynamicComponentName;

package/dist/resolver.d.cts

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

package/dist/resolver.d.mts

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

package/dist/resolver.d.ts

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

package/dist/resolver.mjs

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

package/package.json

@@ -1,25 +1,22 @@
 {
   "name": "@destyler/dynamic",
   "type": "module",
-  "version": "0.0.3",
-  "description": "unstyled dynamic component for vue",
+  "version": "0.0.5",
+  "description": "inputs render tags inside an input, followed by an actual text input.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     },
     "./resolver": {
-      "types": "./dist/resolver.d.ts",
-      "import": "./dist/resolver.mjs",
-      "require": "./dist/resolver.cjs"
+      "types": "./dist/resolver.d.mts",
+      "default": "./dist/resolver.mjs"
     },
     "./component": {
-      "types": "./dist/component.d.ts",
-      "import": "./dist/component.mjs",
-      "require": "./dist/component.cjs"
+      "types": "./dist/component.d.mts",
+      "default": "./dist/component.mjs"
     },
     "./*": "./*"
   },
@@ -31,19 +28,20 @@
     "dist"
   ],
   "peerDependencies": {
-    "vue": ">=3.3.4"
+    "vue": ">=3.4.21"
   },
   "dependencies": {
     "@vueuse/core": "^10.9.0",
-    "@destyler/composition": "0.0.3",
-    "@destyler/directives": "0.0.3",
-    "@destyler/primitive": "0.0.3",
-    "@destyler/collection": "0.0.3",
-    "@destyler/shared": "0.0.3",
-    "@destyler/visually-hidden": "0.0.3"
+    "@destyler/collection": "0.0.5",
+    "@destyler/composition": "0.0.5",
+    "@destyler/primitive": "0.0.5",
+    "@destyler/directives": "0.0.5",
+    "@destyler/shared": "0.0.5",
+    "@destyler/visually-hidden": "0.0.5"
   },
   "scripts": {
     "clear": "rimraf ./dist",
-    "build": "pnpm run clear && unbuild"
+    "build": "pnpm run clear && unbuild",
+    "stub": "unbuild --stub"
   }
 }