@destyler/dynamic 0.0.1-beta.21

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-PRESENT Elone Hoo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/component.cjs

@@ -0,0 +1,20 @@
+'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;

package/dist/component.d.cts

@@ -0,0 +1,4 @@
+export { DestylerDynamicClear, DestylerDynamicClearProps, DestylerDynamicInput, DestylerDynamicInputProps, DestylerDynamicItem, DestylerDynamicItemDelete, DestylerDynamicItemDeleteProps, DestylerDynamicItemProops, DestylerDynamicItemText, DestylerDynamicItemTextProps, DestylerDynamicRoot, DestylerDynamicRootProps } from './index.cjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';

package/dist/component.d.mts

@@ -0,0 +1,4 @@
+export { DestylerDynamicClear, DestylerDynamicClearProps, DestylerDynamicInput, DestylerDynamicInputProps, DestylerDynamicItem, DestylerDynamicItemDelete, DestylerDynamicItemDeleteProps, DestylerDynamicItemProops, DestylerDynamicItemText, DestylerDynamicItemTextProps, DestylerDynamicRoot, DestylerDynamicRootProps } from './index.mjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';

package/dist/component.d.ts

@@ -0,0 +1,4 @@
+export { DestylerDynamicClear, DestylerDynamicClearProps, DestylerDynamicInput, DestylerDynamicInputProps, DestylerDynamicItem, DestylerDynamicItemDelete, DestylerDynamicItemDeleteProps, DestylerDynamicItemProops, DestylerDynamicItemText, DestylerDynamicItemTextProps, DestylerDynamicRoot, DestylerDynamicRootProps } from './index.js';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';

package/dist/component.mjs

@@ -0,0 +1,9 @@
+export { DestylerDynamicClear, DestylerDynamicInput, DestylerDynamicItem, DestylerDynamicItemDelete, DestylerDynamicItemText, DestylerDynamicRoot } from './index.mjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/composition';
+import '@destyler/shared';
+import '@vueuse/core';
+import '@destyler/collection';
+import '@destyler/visually-hidden/dist/component';
+import '@destyler/directives';

package/dist/index.cjs

@@ -0,0 +1,533 @@
+'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;