@destyler/dynamic 0.0.1-beta.21

package/dist/index.mjs

@@ -0,0 +1,526 @@
+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, {}, {
+      default: () => {
+        return 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
+        }, {
+          default: () => {
+            return [
+              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();
+      }
+    }), {
+      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 = 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);
+      }
+    }, {
+      default: () => 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, {}, {
+      default: () => {
+        return 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"
+        }, {
+          default: () => 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();
+      }
+    }), {
+      default: () => 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, {
+      default: () => this.$slots.default ? this.$slots.default?.() : this.itemContext.value.value
+    }), [
+      [BindOnceDirective, { id: this.itemContext.textId }]
+    ]);
+  }
+});
+
+export { DestylerDynamicClear, DestylerDynamicInput, DestylerDynamicItem, DestylerDynamicItemDelete, DestylerDynamicItemText, DestylerDynamicRoot };

package/dist/resolver.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+const name = "@destyler/dynamic";
+
+const packageName = name;
+const destylerComponentName = [
+  "DestylerTemplate"
+];
+function DestylerTemplateResolver() {
+  return {
+    type: "component",
+    resolve: (name2) => {
+      if (destylerComponentName.includes(name2))
+        return { name: name2, from: packageName };
+    }
+  };
+}
+
+exports.DestylerTemplateResolver = DestylerTemplateResolver;
+exports.destylerComponentName = destylerComponentName;

package/dist/resolver.d.cts

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

package/dist/resolver.d.mts

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

package/dist/resolver.d.ts

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

package/dist/resolver.mjs

@@ -0,0 +1,17 @@
+const name = "@destyler/dynamic";
+
+const packageName = name;
+const destylerComponentName = [
+  "DestylerTemplate"
+];
+function DestylerTemplateResolver() {
+  return {
+    type: "component",
+    resolve: (name2) => {
+      if (destylerComponentName.includes(name2))
+        return { name: name2, from: packageName };
+    }
+  };
+}
+
+export { DestylerTemplateResolver, destylerComponentName };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@destyler/dynamic",
+  "version": "0.0.1-beta.21",
+  "description": "unstyled dynamic component for vue",
+  "author": "Elone Hoo <elonehoo@gmail.com>",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./resolver": {
+      "types": "./dist/resolver.d.ts",
+      "import": "./dist/resolver.mjs",
+      "require": "./dist/resolver.cjs"
+    },
+    "./component": {
+      "types": "./dist/component.d.ts",
+      "import": "./dist/component.mjs",
+      "require": "./dist/component.cjs"
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "*.d.ts",
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": ">=3.3.4"
+  },
+  "dependencies": {
+    "@vueuse/core": "^10.7.2",
+    "@destyler/composition": "0.0.1-beta.21",
+    "@destyler/directives": "0.0.1-beta.21",
+    "@destyler/visually-hidden": "0.0.1-beta.21",
+    "@destyler/collection": "0.0.1-beta.21",
+    "@destyler/primitive": "0.0.1-beta.21",
+    "@destyler/shared": "0.0.1-beta.21"
+  },
+  "scripts": {
+    "clear": "rimraf ./dist",
+    "build": "pnpm run clear && unbuild"
+  }
+}