@wfrog/vc-ui 1.0.0

package/dist/es/components/tags/tags.mjs

@@ -0,0 +1,296 @@
+import './index.css'
+import '../../chunk/E_WRn0OP.mjs';
+import '../../chunk/DqUIKX7f.mjs';
+/* empty css                    */
+import { E as ElAlert } from '../../chunk/zfg5SOj1.mjs';
+import { E as ElInput } from '../../chunk/Dvi7RsXg.mjs';
+import { E as ElSpace } from '../../chunk/Ce9ApjrT.mjs';
+import { E as ElTag } from '../../chunk/CZ4ggqDE.mjs';
+import { defineComponent, ref, computed, watch, createBlock, openBlock, withCtx, createElementBlock, Fragment, renderList, unref, mergeProps, createTextVNode, toDisplayString, createVNode, createCommentVNode, normalizeClass, isRef, withDirectives, withKeys } from 'vue';
+import Draggable from 'vuedraggable-es-fix';
+import { C as Component$1 } from '../button/button.mjs';
+import { E as ElPopover } from '../../chunk/C7iSSBUr.mjs';
+import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';
+
+const vFocus = {
+  mounted: (el) => {
+    if (el.tagName === "input") {
+      setTimeout(() => el.focus(), 0);
+    } else {
+      const elInput = el.getElementsByTagName("input");
+      if (elInput.length > 0) {
+        setTimeout(() => elInput[0].focus(), 0);
+      }
+    }
+  }
+};
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "tags",
+  props: {
+    modelValue: {},
+    limit: { default: 5 },
+    regexp: { default: () => /\S+/ },
+    sameMessage: { default: "内容重复了" },
+    errorMessage: { default: "" },
+    readonly: { type: Boolean, default: false },
+    valueFormat: { type: Function, default: (val) => val }
+  },
+  emits: ["update:modelValue", "change", "dragStart", "dragEnd"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const errorVisible = ref(false);
+    const createVisible = ref(false);
+    const currentTag = ref("");
+    const bakTag = ref("");
+    const sameContentMessage = ref("");
+    const currentInput = ref();
+    const timerId = ref();
+    const currentRef = ref();
+    const tags = computed({
+      get() {
+        return props.modelValue.map((tag) => ({ name: tag, editVisible: tag === bakTag.value }));
+      },
+      set(val) {
+        const data = val.map((item) => props.valueFormat(item.name || item));
+        emits("update:modelValue", data);
+      }
+    });
+    const isLimited = computed(() => props.modelValue.length >= props.limit);
+    function handleClick(name) {
+      currentTag.value = name;
+      bakTag.value = name;
+    }
+    function handleDelete(name) {
+      const data = [...props.modelValue];
+      data.splice(data.indexOf(name), 1);
+      tags.value = data;
+      emits("change", data);
+    }
+    const isSameContent = (name) => props.modelValue.includes(name) && bakTag.value !== name;
+    const isPassTest = (name) => props.regexp.test(name);
+    const checkTag = (name) => !isSameContent(name) && isPassTest(name);
+    function closeError() {
+      errorVisible.value = false;
+      sameContentMessage.value = "";
+      clearTimeout(timerId.value);
+    }
+    function showError() {
+      clearTimeout(timerId.value);
+      if (isSameContent(currentTag.value)) {
+        sameContentMessage.value = props.sameMessage;
+      }
+      errorVisible.value = true;
+      currentInput.value?.focus();
+      timerId.value = setTimeout(() => closeError(), 3e3);
+    }
+    function handleSave({ target }) {
+      currentRef.value = target;
+      currentTag.value = currentTag.value.trim();
+      if (currentTag.value === "") {
+        handleDelete(bakTag.value);
+        return;
+      }
+      currentInput.value = target;
+      if (!checkTag(currentTag.value)) {
+        showError();
+        return;
+      }
+      const data = tags.value.map((item) => item.name === bakTag.value ? currentTag.value : item.name);
+      bakTag.value = "";
+      tags.value = data;
+      emits("change", data);
+      currentTag.value = "";
+    }
+    function handleSaveClear() {
+      closeError();
+      currentTag.value = bakTag.value;
+    }
+    function showCreate() {
+      currentTag.value = "";
+      createVisible.value = true;
+    }
+    function handleInsert({ target }) {
+      currentRef.value = target;
+      currentTag.value = currentTag.value.trim();
+      if (currentTag.value === "") {
+        createVisible.value = false;
+        return;
+      }
+      currentInput.value = target;
+      if (!checkTag(currentTag.value)) {
+        showError();
+        return;
+      }
+      const data = [...props.modelValue, currentTag.value];
+      createVisible.value = false;
+      tags.value = data;
+      emits("change", data);
+      setTimeout(() => showCreate(), 0);
+    }
+    function handleInsertClear() {
+      closeError();
+      createVisible.value = false;
+      currentTag.value = "";
+    }
+    function handleBlur({ target }) {
+      if (!target) {
+        return;
+      }
+      currentRef.value = target;
+      const myTarget = target;
+      myTarget.blur();
+    }
+    function handleDragStart(event) {
+      emits("dragStart", event);
+    }
+    function handleDragEnd(event) {
+      emits("change", props.modelValue);
+      emits("dragEnd", event);
+    }
+    watch(isLimited, async (val) => {
+      if (!val) {
+        return;
+      }
+      setTimeout(() => {
+        createVisible.value = false;
+      }, 0);
+    });
+    return (_ctx, _cache) => {
+      const _component_ElTag = ElTag;
+      const _component_ElSpace = ElSpace;
+      const _component_ElInput = ElInput;
+      const _component_ElAlert = ElAlert;
+      const _component_ElPopover = ElPopover;
+      return __props.readonly ? (openBlock(), createBlock(_component_ElSpace, {
+        key: 0,
+        wrap: ""
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(tags), (tag) => {
+            return openBlock(), createBlock(_component_ElTag, mergeProps({
+              key: tag.name,
+              "disable-transitions": ""
+            }, { ref_for: true }, _ctx.$attrs), {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(tag.name), 1)
+              ]),
+              _: 2
+            }, 1040);
+          }), 128))
+        ]),
+        _: 1
+      })) : (openBlock(), createBlock(_component_ElSpace, {
+        key: 1,
+        wrap: ""
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Draggable), {
+            modelValue: unref(tags),
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(tags) ? tags.value = $event : null),
+            "drag-class": "el-tag--success",
+            class: normalizeClass(_ctx.$style.draggable),
+            tag: "span",
+            "item-key": "name",
+            animation: "400",
+            onStart: handleDragStart,
+            onEnd: handleDragEnd
+          }, {
+            item: withCtx(({ element }) => [
+              !element.editVisible ? (openBlock(), createBlock(_component_ElTag, mergeProps({
+                key: 0,
+                "disable-transitions": "",
+                closable: "",
+                class: _ctx.$style.tag
+              }, _ctx.$attrs, {
+                onClose: ($event) => handleDelete(element.name),
+                onDblclick: ($event) => handleClick(element.name)
+              }), {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(element.name), 1)
+                ]),
+                _: 2
+              }, 1040, ["class", "onClose", "onDblclick"])) : withDirectives((openBlock(), createBlock(_component_ElInput, {
+                key: 1,
+                modelValue: unref(currentTag),
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(currentTag) ? currentTag.value = $event : null),
+                size: "small",
+                clearable: "",
+                class: normalizeClass(_ctx.$style.input),
+                onClear: handleSaveClear,
+                onKeyup: withKeys(handleBlur, ["enter"]),
+                onBlur: handleSave
+              }, null, 8, ["modelValue", "class"])), [
+                [unref(vFocus)]
+              ])
+            ]),
+            footer: withCtx(() => [
+              unref(createVisible) && !unref(isLimited) ? withDirectives((openBlock(), createBlock(_component_ElInput, {
+                key: 0,
+                modelValue: unref(currentTag),
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(currentTag) ? currentTag.value = $event : null),
+                size: "small",
+                clearable: "",
+                class: normalizeClass(_ctx.$style.input),
+                onClear: handleInsertClear,
+                onKeyup: withKeys(handleBlur, ["enter"]),
+                onBlur: handleInsert
+              }, null, 8, ["modelValue", "class"])), [
+                [unref(vFocus)]
+              ]) : !unref(isLimited) ? (openBlock(), createBlock(Component$1, {
+                key: 1,
+                size: "small",
+                icon: { name: "Plus" },
+                onClick: showCreate
+              })) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["modelValue", "class"]),
+          unref(errorVisible) ? (openBlock(), createBlock(_component_ElPopover, {
+            key: 0,
+            "virtual-ref": unref(currentRef),
+            visible: unref(errorVisible),
+            placement: "bottom"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_ElAlert, {
+                type: "error",
+                closable: false,
+                class: normalizeClass(_ctx.$style.alert)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(sameContentMessage) || __props.errorMessage), 1)
+                ]),
+                _: 1
+              }, 8, ["class"])
+            ]),
+            _: 1
+          }, 8, ["virtual-ref", "visible"])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }));
+    };
+  }
+});
+
+/* unplugin-vue-components disabled */const input = "_input_1tp7v_1";
+const draggable = "_draggable_1tp7v_5";
+const alert = "_alert_1tp7v_17";
+const style0 = {
+	input: input,
+	draggable: draggable,
+	alert: alert
+};
+
+const cssModules = {
+  "$style": style0
+};
+const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+
+const __vite_glob_0_30 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+    __proto__: null,
+    default: Component
+}, Symbol.toStringTag, { value: 'Module' }));
+
+export { Component as C, __vite_glob_0_30 as _ };

package/dist/es/components/tags/tags.vue.d.ts

@@ -0,0 +1,20 @@
+import { ITagsProps } from './tags';
+declare const _default: import('vue').DefineComponent<ITagsProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (val: any[]) => any;
+    "update:modelValue": (val: any[]) => any;
+    dragStart: (event: any) => any;
+    dragEnd: (event: any) => any;
+}, string, import('vue').PublicProps, Readonly<ITagsProps> & Readonly<{
+    onChange?: ((val: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: any[]) => any) | undefined;
+    onDragStart?: ((event: any) => any) | undefined;
+    onDragEnd?: ((event: any) => any) | undefined;
+}>, {
+    readonly: boolean;
+    valueFormat: (val: string | number) => string | number;
+    limit: number;
+    regexp: RegExp;
+    sameMessage: string;
+    errorMessage: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/es/components/text-ellipsis/index.css

@@ -0,0 +1,15 @@
+/* source: src/components/text-ellipsis/text-ellipsis.vue */
+._main_eqh40_1 {
+  display: inline-block;
+  width: 100%;
+  vertical-align: bottom;
+}
+._ellipsis_eqh40_7 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+._text_eqh40_13 {
+  display: inline;
+  white-space: nowrap;
+}

package/dist/es/components/text-ellipsis/index.d.ts

@@ -0,0 +1,4 @@
+import { SFCWithInstall } from '../../utils/typescript';
+import { default as Component } from './text-ellipsis.vue';
+export declare const VcTextEllipsis: SFCWithInstall<typeof Component>;
+export default VcTextEllipsis;

package/dist/es/components/text-ellipsis/index.mjs

@@ -0,0 +1,6 @@
+import { w as withInstall } from '../../chunk/ClZGuAIb.mjs';
+import { C as Component } from './text-ellipsis.mjs';
+
+const VcTextEllipsis = withInstall(Component);
+
+export { VcTextEllipsis, VcTextEllipsis as default };

package/dist/es/components/text-ellipsis/text-ellipsis.d.ts

@@ -0,0 +1,12 @@
+import { Placement, PopperEffect } from 'element-plus/es/components/popper';
+export interface ITextEllipsisProps {
+    type?: 'single';
+    effect?: PopperEffect;
+    placement?: Placement;
+    content?: string;
+    popperOptions?: object;
+    popperClass?: string;
+    enterable?: boolean;
+    maxWidth?: number;
+    showTooltip?: boolean;
+}

package/dist/es/components/text-ellipsis/text-ellipsis.mjs

@@ -0,0 +1,137 @@
+import './index.css'
+import '../../chunk/E_WRn0OP.mjs';
+/* empty css                    */
+import { a as ElTooltip } from '../../chunk/DqUIKX7f.mjs';
+import { defineComponent, ref, useTemplateRef, computed, watch, onMounted, nextTick, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createBlock, createCommentVNode, withCtx, createElementVNode, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "text-ellipsis",
+  props: {
+    type: { default: "single" },
+    effect: { default: "light" },
+    placement: { default: "top" },
+    content: { default: "" },
+    popperOptions: { default: () => ({ boundariesElement: "body", gpuAcceleration: false }) },
+    popperClass: { default: "" },
+    enterable: { type: Boolean, default: false },
+    maxWidth: { default: 0 },
+    showTooltip: { type: Boolean, default: true }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const tipsVisible = ref(false);
+    const textVisible = ref(false);
+    const realWidth = ref(0);
+    const mainRef = useTemplateRef("mainRef");
+    const textRef = useTemplateRef("textRef");
+    const ellipsisRef = useTemplateRef("ellipsisRef");
+    const mainStyle = computed(() => props.maxWidth ? { width: `${props.maxWidth}px` } : {});
+    const fixStyle = computed(() => ({ width: `${realWidth.value}px` }));
+    function isOverflow() {
+      return new Promise((resolve) => {
+        tipsVisible.value = true;
+        textVisible.value = true;
+        nextTick(() => {
+          if (textRef.value && ellipsisRef.value) {
+            const originWidth = textRef.value?.offsetWidth;
+            const ellipsisWidth = props.maxWidth || ellipsisRef.value?.offsetWidth;
+            resolve(originWidth > ellipsisWidth);
+          } else {
+            resolve(false);
+          }
+        });
+      });
+    }
+    async function update() {
+      const isOverflowX = await isOverflow();
+      tipsVisible.value = isOverflowX;
+      textVisible.value = !isOverflowX;
+      realWidth.value = mainRef.value?.clientWidth || 0;
+    }
+    const watchData = computed(() => `${props.content}${props.maxWidth}${props.popperClass}`);
+    watch(watchData, () => update(), { immediate: true });
+    watch(realWidth, () => update());
+    onMounted(() => nextTick(() => update()));
+    __expose({ tipsVisible });
+    return (_ctx, _cache) => {
+      const _component_ElTooltip = ElTooltip;
+      return openBlock(), createElementBlock("div", {
+        ref_key: "mainRef",
+        ref: mainRef,
+        class: normalizeClass(_ctx.$style.main),
+        style: normalizeStyle(unref(mainStyle))
+      }, [
+        unref(tipsVisible) && __props.showTooltip ? (openBlock(), createBlock(_component_ElTooltip, {
+          key: 0,
+          effect: __props.effect,
+          placement: __props.placement,
+          "popper-class": __props.popperClass,
+          "popper-options": __props.popperOptions,
+          enterable: __props.enterable
+        }, {
+          content: withCtx(() => [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(toDisplayString(__props.content), 1)
+            ])
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", {
+              ref_key: "ellipsisRef",
+              ref: ellipsisRef,
+              class: normalizeClass(_ctx.$style.ellipsis),
+              style: normalizeStyle(unref(fixStyle))
+            }, [
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                createTextVNode(toDisplayString(__props.content), 1)
+              ])
+            ], 6)
+          ]),
+          _: 3
+        }, 8, ["effect", "placement", "popper-class", "popper-options", "enterable"])) : createCommentVNode("", true),
+        unref(tipsVisible) && !__props.showTooltip ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          ref_key: "ellipsisRef",
+          ref: ellipsisRef,
+          class: normalizeClass(_ctx.$style.ellipsis),
+          style: normalizeStyle(unref(fixStyle))
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(__props.content), 1)
+          ])
+        ], 6)) : createCommentVNode("", true),
+        unref(textVisible) ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          ref_key: "textRef",
+          ref: textRef,
+          class: normalizeClass(_ctx.$style.text)
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(__props.content), 1)
+          ])
+        ], 2)) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+
+/* unplugin-vue-components disabled */const main = "_main_eqh40_1";
+const ellipsis = "_ellipsis_eqh40_7";
+const text = "_text_eqh40_13";
+const style0 = {
+	main: main,
+	ellipsis: ellipsis,
+	text: text
+};
+
+const cssModules = {
+  "$style": style0
+};
+const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+
+const __vite_glob_0_31 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: Component
+}, Symbol.toStringTag, { value: 'Module' }));
+
+export { Component as C, __vite_glob_0_31 as _ };

package/dist/es/components/text-ellipsis/text-ellipsis.vue.d.ts

@@ -0,0 +1,41 @@
+import { ITextEllipsisProps } from './text-ellipsis';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        default?(_: {}): any;
+        default?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {
+        mainRef: HTMLDivElement;
+        ellipsisRef: HTMLDivElement;
+        textRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ITextEllipsisProps, {
+    tipsVisible: globalThis.Ref<boolean, boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ITextEllipsisProps> & Readonly<{}>, {
+    type: "single";
+    effect: import('element-plus').PopperEffect;
+    popperClass: string;
+    popperOptions: object;
+    placement: Placement;
+    content: string;
+    enterable: boolean;
+    maxWidth: number;
+    showTooltip: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    mainRef: HTMLDivElement;
+    ellipsisRef: HTMLDivElement;
+    textRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/es/components/thousand-input/index.css

@@ -0,0 +1,4 @@
+/* source: src/components/thousand-input/thousand-input.vue */
+._main_m3b07_1 .el-input__wrapper input {
+  text-align: right;
+}

package/dist/es/components/thousand-input/index.d.ts

@@ -0,0 +1,4 @@
+import { SFCWithInstall } from '../../utils/typescript';
+import { default as Component } from './thousand-input.vue';
+export declare const VcThousandInput: SFCWithInstall<typeof Component>;
+export default VcThousandInput;

package/dist/es/components/thousand-input/index.mjs

@@ -0,0 +1,6 @@
+import { w as withInstall } from '../../chunk/ClZGuAIb.mjs';
+import { C as Component } from './thousand-input.mjs';
+
+const VcThousandInput = withInstall(Component);
+
+export { VcThousandInput, VcThousandInput as default };

package/dist/es/components/thousand-input/thousand-input.d.ts

@@ -0,0 +1,11 @@
+export interface IOptionType {
+    decimalScale: number;
+    integerScale: number;
+    prefix?: string;
+}
+export interface IThousandInputProps {
+    modelValue?: string;
+    formatValue?: string;
+    options?: IOptionType;
+    padDecimal?: boolean;
+}