@transsionfe/semi-ui-vue 0.0.1

package/lib/es/components/dropdown/context.js

@@ -0,0 +1,14 @@
+import { inject as t, provide as e } from "vue";
+const o = Symbol("DropdownContext");
+function p() {
+  return t(o, { level: 0 });
+}
+function d(n) {
+  e(o, n);
+}
+export {
+  o as DropdownContextKey,
+  d as provideDropdownContext,
+  p as useDropdownContext
+};
+//# sourceMappingURL=context.js.map

package/lib/es/components/dropdown/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../../src/components/dropdown/context.ts"],"sourcesContent":["import { InjectionKey, provide, inject } from 'vue';\nimport type { DropdownContextType } from './interface';\n\nexport const DropdownContextKey: InjectionKey<DropdownContextType> = Symbol('DropdownContext');\n\nexport function useDropdownContext() {\n    return inject(DropdownContextKey, { level: 0 });\n}\n\nexport function provideDropdownContext(context: DropdownContextType) {\n    provide(DropdownContextKey, context);\n}\n"],"names":["DropdownContextKey","useDropdownContext","inject","provideDropdownContext","context","provide"],"mappings":";AAGO,MAAMA,IAAwD,OAAO,iBAAiB;AAEtF,SAASC,IAAqB;AACjC,SAAOC,EAAOF,GAAoB,EAAE,OAAO,GAAG;AAClD;AAEO,SAASG,EAAuBC,GAA8B;AACjE,EAAAC,EAAQL,GAAoBI,CAAO;AACvC;"}

package/lib/es/components/dropdown/index.js

@@ -0,0 +1,19 @@
+import r from "./Dropdown.vue.js";
+import i from "./DropdownMenu.vue.js";
+import m from "./DropdownItem.vue.js";
+import t from "./DropdownDivider.vue.js";
+import n from "./DropdownTitle.vue.js";
+/* empty css              */
+const o = r;
+o.Menu = i;
+o.Item = m;
+o.Divider = t;
+o.Title = n;
+export {
+  t as DropdownDivider,
+  m as DropdownItem,
+  i as DropdownMenu,
+  n as DropdownTitle,
+  o as default
+};
+//# sourceMappingURL=index.js.map

package/lib/es/components/dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/dropdown/index.ts"],"sourcesContent":["import Dropdown from './Dropdown.vue';\nimport DropdownMenu from './DropdownMenu.vue';\nimport DropdownItem from './DropdownItem.vue';\nimport DropdownDivider from './DropdownDivider.vue';\nimport DropdownTitle from './DropdownTitle.vue';\n\n// 导入样式（自动引入）\nimport './dropdown.scss';\n\nexport type {\n    DropdownProps,\n    DropdownMenuProps,\n    DropdownItemProps,\n    DropdownDividerProps,\n    DropdownTitleProps,\n    DropDownMenuItem,\n    DropDownMenuItemItem,\n    DropDownMenuItemDivider,\n    DropDownMenuItemTitle,\n    Type,\n} from './interface';\n\n// Static properties for compound component pattern\nconst DropdownWithSub = Dropdown as typeof Dropdown & {\n    Menu: typeof DropdownMenu;\n    Item: typeof DropdownItem;\n    Divider: typeof DropdownDivider;\n    Title: typeof DropdownTitle;\n};\n\nDropdownWithSub.Menu = DropdownMenu;\nDropdownWithSub.Item = DropdownItem;\nDropdownWithSub.Divider = DropdownDivider;\nDropdownWithSub.Title = DropdownTitle;\n\nexport { DropdownMenu, DropdownItem, DropdownDivider, DropdownTitle };\nexport default DropdownWithSub;\n"],"names":["DropdownWithSub","Dropdown","DropdownMenu","DropdownItem","DropdownDivider","DropdownTitle"],"mappings":";;;;;;AAuBA,MAAMA,IAAkBC;AAOxBD,EAAgB,OAAOE;AACvBF,EAAgB,OAAOG;AACvBH,EAAgB,UAAUI;AAC1BJ,EAAgB,QAAQK;"}

package/lib/es/components/empty/Empty.vue.js

@@ -0,0 +1,102 @@
+import { defineComponent as B, ref as V, onMounted as x, onUnmounted as z, computed as g, h as p, createElementBlock as r, openBlock as o, normalizeStyle as v, normalizeClass as n, createElementVNode as M, unref as a, createBlock as m, createCommentVNode as u, resolveDynamicComponent as k, withCtx as D, renderSlot as $, Fragment as N, createTextVNode as S, toDisplayString as I } from "vue";
+import F from "classnames";
+import { cssClasses as P } from "@douyinfe/semi-foundation/empty/constants";
+import j from "../typography/Title.vue.js";
+const T = /* @__PURE__ */ B({
+  name: "Empty",
+  __name: "Empty",
+  props: {
+    layout: { default: "vertical" },
+    imageStyle: {},
+    title: {},
+    description: {},
+    image: {},
+    darkModeImage: {},
+    style: {},
+    className: {}
+  },
+  setup(i) {
+    const l = P.PREFIX, s = i, h = (e) => typeof e == "string", y = V(null);
+    let d = null, c = null;
+    const b = () => {
+      if (d) {
+        const e = d.getAttribute("theme-mode");
+        e !== y.value && (y.value = e);
+      }
+    }, w = (e) => {
+      for (const t of e)
+        t.type === "attributes" && t.attributeName === "theme-mode" && b();
+    };
+    x(() => {
+      if (s.darkModeImage) {
+        d = window.document.body, b();
+        const e = { attributes: !0, childList: !1, subtree: !1 };
+        c = new MutationObserver(w), c.observe(d, e);
+      }
+    }), z(() => {
+      c && c.disconnect();
+    });
+    const f = g(() => {
+      const e = typeof s.description == "string" ? s.description : "empty", t = y.value === "dark" && s.darkModeImage ? s.darkModeImage : s.image;
+      return typeof t == "string" ? p("img", { alt: e, src: t }) : t && typeof t == "object" && "id" in t ? p("svg", { "aria-hidden": "true" }, [p("use", { "xlink:href": `#${t.id}` })]) : t || null;
+    }), E = g(() => F(s.className, l, {
+      [`${l}-${s.layout}`]: s.layout
+    })), C = g(() => f.value ? {
+      heading: 4,
+      style: void 0
+    } : {
+      heading: 6,
+      style: { fontWeight: 400 }
+    });
+    return (e, t) => (o(), r("div", {
+      class: n(E.value),
+      style: v(i.style)
+    }, [
+      M("div", {
+        class: n(`${a(l)}-image`),
+        style: v(i.imageStyle),
+        "x-semi-prop": "image,darkModeImage"
+      }, [
+        f.value ? (o(), m(k(f.value), { key: 0 })) : u("", !0)
+      ], 6),
+      M("div", {
+        class: n(`${a(l)}-content`)
+      }, [
+        i.title || e.$slots.title ? (o(), m(j, {
+          key: 0,
+          class: n(`${a(l)}-title`),
+          heading: C.value.heading,
+          style: v(C.value.style),
+          "x-semi-prop": "title"
+        }, {
+          default: D(() => [
+            e.$slots.title ? $(e.$slots, "title", { key: 0 }) : h(i.title) ? (o(), r(N, { key: 1 }, [
+              S(I(i.title), 1)
+            ], 64)) : (o(), m(k(() => i.title), { key: 2 }))
+          ]),
+          _: 3
+        }, 8, ["class", "heading", "style"])) : u("", !0),
+        i.description || e.$slots.description ? (o(), r("div", {
+          key: 1,
+          class: n(`${a(l)}-description`),
+          "x-semi-prop": "description"
+        }, [
+          e.$slots.description ? $(e.$slots, "description", { key: 0 }) : h(i.description) ? (o(), r(N, { key: 1 }, [
+            S(I(i.description), 1)
+          ], 64)) : (o(), m(k(() => i.description), { key: 2 }))
+        ], 2)) : u("", !0),
+        e.$slots.default ? (o(), r("div", {
+          key: 2,
+          class: n(`${a(l)}-footer`),
+          "x-semi-prop": "children"
+        }, [
+          $(e.$slots, "default")
+        ], 2)) : u("", !0)
+      ], 2)
+    ], 6));
+  }
+});
+export {
+  T as default
+};
+//# sourceMappingURL=Empty.vue.js.map

package/lib/es/components/empty/Empty.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Empty.vue.js","sources":["../../../../src/components/empty/Empty.vue"],"sourcesContent":["<template>\n    <div :class=\"wrapperCls\" :style=\"style\">\n        <div :class=\"`${prefixCls}-image`\" :style=\"imageStyle\" x-semi-prop=\"image,darkModeImage\">\n            <component :is=\"imageNode\" v-if=\"imageNode\" />\n        </div>\n        <div :class=\"`${prefixCls}-content`\">\n            <TypographyTitle\n                v-if=\"title || $slots.title\"\n                :class=\"`${prefixCls}-title`\"\n                :heading=\"titleProps.heading\"\n                :style=\"titleProps.style\"\n                x-semi-prop=\"title\"\n            >\n                <slot v-if=\"$slots.title\" name=\"title\"></slot>\n                <template v-else-if=\"isString(title)\">{{ title }}</template>\n                <component :is=\"() => title\" v-else />\n            </TypographyTitle>\n            <div v-if=\"description || $slots.description\" :class=\"`${prefixCls}-description`\" x-semi-prop=\"description\">\n                <slot v-if=\"$slots.description\" name=\"description\"></slot>\n                <template v-else-if=\"isString(description)\">{{ description }}</template>\n                <component :is=\"() => description\" v-else />\n            </div>\n            <div v-if=\"$slots.default\" :class=\"`${prefixCls}-footer`\" x-semi-prop=\"children\">\n                <slot></slot>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, onMounted, onUnmounted, h } from 'vue';\nimport cls from 'classnames';\nimport { cssClasses } from '@douyinfe/semi-foundation/empty/constants';\nimport TypographyTitle from '../typography/Title.vue';\nimport { EmptyProps, SVGNode } from './interface';\n\ndefineOptions({\n    name: 'Empty',\n});\n\nconst prefixCls = cssClasses.PREFIX;\n\nconst props = withDefaults(defineProps<EmptyProps>(), {\n    layout: 'vertical',\n});\n\n// 类型判断辅助函数\nconst isString = (val: unknown): val is string => typeof val === 'string';\n\n// 主题模式监听\nconst mode = ref<string | null>(null);\nlet body: HTMLElement | null = null;\nlet observer: MutationObserver | null = null;\n\nconst updateMode = () => {\n    if (body) {\n        const val = body.getAttribute('theme-mode');\n        if (val !== mode.value) {\n            mode.value = val;\n        }\n    }\n};\n\nconst observe = (mutationsList: MutationRecord[]) => {\n    for (const mutation of mutationsList) {\n        if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {\n            updateMode();\n        }\n    }\n};\n\nonMounted(() => {\n    if (props.darkModeImage) {\n        body = window.document.body;\n        updateMode();\n        const config = { attributes: true, childList: false, subtree: false };\n        observer = new MutationObserver(observe);\n        observer.observe(body, config);\n    }\n});\n\nonUnmounted(() => {\n    if (observer) {\n        observer.disconnect();\n    }\n});\n\n// 计算图片节点\nconst imageNode = computed(() => {\n    const alt = typeof props.description === 'string' ? props.description : 'empty';\n    const imgSrc = mode.value === 'dark' && props.darkModeImage ? props.darkModeImage : props.image;\n\n    if (typeof imgSrc === 'string') {\n        return h('img', { alt, src: imgSrc });\n    } else if (imgSrc && typeof imgSrc === 'object' && 'id' in imgSrc) {\n        return h('svg', { 'aria-hidden': 'true' }, [h('use', { 'xlink:href': `#${(imgSrc as SVGNode).id}` })]);\n    } else if (imgSrc) {\n        return imgSrc;\n    }\n    return null;\n});\n\n// 计算样式类\nconst wrapperCls = computed(() => {\n    return cls(props.className, prefixCls, {\n        [`${prefixCls}-${props.layout}`]: props.layout,\n    });\n});\n\n// 标题属性\nconst titleProps = computed(() => {\n    if (imageNode.value) {\n        return {\n            heading: 4 as const,\n            style: undefined,\n        };\n    }\n    return {\n        heading: 6 as const,\n        style: { fontWeight: 400 },\n    };\n});\n</script>\n"],"names":["prefixCls","cssClasses","props","__props","isString","val","mode","ref","body","observer","updateMode","observe","mutationsList","mutation","onMounted","config","onUnmounted","imageNode","computed","alt","imgSrc","h","wrapperCls","cls","titleProps","_createElementBlock","_createElementVNode","_unref","_openBlock","_createBlock","_resolveDynamicComponent","$slots","TypographyTitle","_normalizeStyle","_renderSlot","_ctx","_Fragment"],"mappings":"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"}

package/lib/es/components/empty/index.js

@@ -0,0 +1,7 @@
+import t from "./Empty.vue.js";
+/* empty css           */
+export {
+  t as Empty,
+  t as default
+};
+//# sourceMappingURL=index.js.map

package/lib/es/components/empty/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/lib/es/components/form/ArrayField.vue.js

@@ -0,0 +1,86 @@
+import { defineComponent as R, ref as p, computed as o, provide as E, onMounted as $, onUnmounted as D, watch as N, renderSlot as O } from "vue";
+import { getUuidv4 as y } from "@douyinfe/semi-foundation/utils/uuid";
+import v from "fast-copy";
+import { ArrayFieldContextKey as P } from "./context.js";
+import b from "@douyinfe/semi-foundation/utils/warning";
+import x from "./hooks/useFormUpdater.js";
+const G = /* @__PURE__ */ R({
+  name: "SemiFormArrayField",
+  inheritAttrs: !1,
+  __name: "ArrayField",
+  props: {
+    initValue: {},
+    field: {},
+    children: { type: Function }
+  },
+  setup(V) {
+    const t = V, a = x(), A = (e) => e.map(() => y()), F = (e) => {
+      if (e && e && e.updateKey)
+        return e.updateKey;
+    }, g = (e) => {
+      const r = [];
+      return Array.isArray(e) ? e : (b(
+        e !== void 0,
+        "[Semi Form ArrayField] initValue of ArrayField must be an array. Please check the type of your props"
+      ), r);
+    }, s = (e, r) => {
+      const l = g(e);
+      return A(l).map((k, m) => r && r[m] ? r[m] : k);
+    }, i = p([]), n = p(null), d = p(!0), h = t.initValue, U = o(() => a.getValue(t.field)), f = o(() => h || U.value), w = o(() => !a.getArrayField(t.field || "") || d.value), K = o(() => ({
+      shouldUseInitValue: w.value
+    }));
+    E(P, K), $(() => {
+      if (!t.field) return;
+      const e = a.getValue(t.field) || f.value;
+      i.value = s(e);
+      const r = v(f.value), l = v(f.value);
+      a.registerArrayField(t.field, l), a.updateStateValue(t.field, r, { notNotify: !0, notUpdate: !0 });
+    }), D(() => {
+      t.field && a.unRegisterArrayField(t.field);
+    }), N(
+      () => {
+        if (!t.field) return null;
+        const e = a.getValue(t.field), r = a.getArrayField(t.field), l = F(r);
+        return { fieldValue: e, updateKey: l };
+      },
+      (e) => {
+        if (!t.field || !e) return;
+        const { fieldValue: r, updateKey: l } = e;
+        l !== n.value && (Array.isArray(r) && (i.value = s(r, i.value)), n.value = l, n.value !== null && n.value !== void 0 && (d.value = !1));
+      },
+      { immediate: !0 }
+    );
+    const S = () => {
+      if (!t.field) return;
+      i.value.push(y()), d.value = !0;
+      const e = (/* @__PURE__ */ new Date()).valueOf();
+      a.updateArrayField(t.field, { updateKey: e }), n.value = e;
+    }, I = (e) => {
+      if (!t.field) return;
+      let r = a.getError(t.field);
+      const l = { notNotify: !0, notUpdate: !0 };
+      Array.isArray(r) && (r = [...r], r.splice(e, 1), a.updateStateError(t.field, r, l));
+      let u = a.getValue(t.field);
+      Array.isArray(u) ? (u = [...u], u.splice(e, 1), a.updateStateValue(t.field, u), i.value = s(u)) : i.value = [];
+    }, C = (e) => {
+      if (!t.field) return;
+      const r = a.getValue(t.field) || [], l = v(e), u = [...r, l];
+      i.value.push(y()), d.value = !0;
+      const c = (/* @__PURE__ */ new Date()).valueOf();
+      a.updateStateValue(t.field, u, {}), a.updateArrayField(t.field, { updateKey: c }), n.value = c;
+    }, _ = o(() => i.value.map((e, r) => ({
+      key: e,
+      field: `${t.field}[${r}]`,
+      remove: () => I(r)
+    })));
+    return (e, r) => O(e.$slots, "default", {
+      arrayFields: _.value,
+      add: S,
+      addWithInitValue: C
+    });
+  }
+});
+export {
+  G as default
+};
+//# sourceMappingURL=ArrayField.vue.js.map

package/lib/es/components/form/ArrayField.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayField.vue.js","sources":["../../../../src/components/form/ArrayField.vue"],"sourcesContent":["<template>\n    <slot :array-fields=\"arrayFields\" :add=\"add\" :add-with-init-value=\"addWithInitValue\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, provide, onMounted, onUnmounted } from 'vue';\nimport { getUuidv4 } from '@douyinfe/semi-foundation/utils/uuid';\nimport copy from 'fast-copy';\nimport { useFormUpdater } from './hooks';\nimport { ArrayFieldContextKey } from './context';\nimport warning from '@douyinfe/semi-foundation/utils/warning';\nimport type { ArrayFieldProps, ArrayFieldChildrenProps } from './interface';\n\ndefineOptions({ name: 'SemiFormArrayField', inheritAttrs: false });\n\nconst props = defineProps<ArrayFieldProps>();\n\nconst updater = useFormUpdater();\n\nconst getUuidByArray = (array: any[]) => array.map(() => getUuidv4());\n\nconst getUpdateKey = (arrayField: any): string | undefined => {\n    if (!arrayField) {\n        return undefined;\n    }\n    if (arrayField && arrayField.updateKey) {\n        return arrayField.updateKey;\n    }\n    return undefined;\n};\n\nconst initValueAdapter = (initValue: any) => {\n    const iv: any[] = [];\n    if (Array.isArray(initValue)) {\n        return initValue;\n    } else {\n        warning(\n            initValue !== undefined,\n            '[Semi Form ArrayField] initValue of ArrayField must be an array. Please check the type of your props'\n        );\n        return iv;\n    }\n};\n\nconst generateKeys = (value: any[], oldKeys?: string[]) => {\n    const val = initValueAdapter(value);\n    const newKeys = getUuidByArray(val);\n    const keys = newKeys.map((key, i) => (oldKeys && oldKeys[i] ? oldKeys[i] : key));\n    return keys;\n};\n\nconst keys = ref<string[]>([]);\nconst cacheUpdateKey = ref<string | number | null>(null);\nconst shouldUseInitValueRef = ref(true);\n\nconst initValueInProps = props.initValue;\nconst initValueInForm = computed(() => updater.getValue(props.field));\nconst initValue = computed(() => initValueInProps || initValueInForm.value);\n\nconst shouldUseInitValue = computed(() => {\n    const arrayField = updater.getArrayField(props.field || '');\n    return !arrayField || shouldUseInitValueRef.value;\n});\n\nconst arrayFieldContext = computed(() => ({\n    shouldUseInitValue: shouldUseInitValue.value,\n}));\n\nprovide(ArrayFieldContextKey, arrayFieldContext);\n\nonMounted(() => {\n    if (!props.field) return;\n\n    const currentValue = updater.getValue(props.field) || initValue.value;\n    keys.value = generateKeys(currentValue);\n\n    const initValueCopyForFormState = copy(initValue.value);\n    const initValueCopyForReset = copy(initValue.value);\n    updater.registerArrayField(props.field, initValueCopyForReset);\n    updater.updateStateValue(props.field, initValueCopyForFormState, { notNotify: true, notUpdate: true });\n});\n\nonUnmounted(() => {\n    if (props.field) {\n        updater.unRegisterArrayField(props.field);\n    }\n});\n\nwatch(\n    () => {\n        if (!props.field) return null;\n        const fieldValue = updater.getValue(props.field);\n        const arrayField = updater.getArrayField(props.field);\n        const updateKey = getUpdateKey(arrayField);\n        return { fieldValue, updateKey };\n    },\n    (result) => {\n        if (!props.field || !result) return;\n        const { fieldValue, updateKey } = result;\n\n        if (updateKey !== cacheUpdateKey.value) {\n            if (Array.isArray(fieldValue)) {\n                keys.value = generateKeys(fieldValue, keys.value);\n            }\n            cacheUpdateKey.value = updateKey;\n            if (cacheUpdateKey.value !== null && cacheUpdateKey.value !== undefined) {\n                shouldUseInitValueRef.value = false;\n            }\n        }\n    },\n    { immediate: true }\n);\n\nconst add = () => {\n    if (!props.field) return;\n    keys.value.push(getUuidv4());\n    shouldUseInitValueRef.value = true;\n    const updateKey = new Date().valueOf();\n    updater.updateArrayField(props.field, { updateKey });\n    cacheUpdateKey.value = updateKey;\n};\n\nconst remove = (index: number) => {\n    if (!props.field) return;\n\n    // 更新错误状态\n    let newArrayFieldError = updater.getError(props.field);\n    const opts = { notNotify: true, notUpdate: true };\n    if (Array.isArray(newArrayFieldError)) {\n        newArrayFieldError = [...newArrayFieldError];\n        newArrayFieldError.splice(index, 1);\n        updater.updateStateError(props.field, newArrayFieldError, opts);\n    }\n\n    // 更新值\n    let newArrayFieldValue = updater.getValue(props.field);\n    if (Array.isArray(newArrayFieldValue)) {\n        newArrayFieldValue = [...newArrayFieldValue];\n        newArrayFieldValue.splice(index, 1);\n        updater.updateStateValue(props.field, newArrayFieldValue);\n\n        // 重新生成所有keys,确保key与新数组一一对应\n        // 这样可以避免Vue的diff算法错误复用组件实例\n        keys.value = generateKeys(newArrayFieldValue);\n    } else {\n        keys.value = [];\n    }\n};\n\nconst addWithInitValue = (lineObject: Record<string, any>) => {\n    if (!props.field) return;\n    const currentValue = updater.getValue(props.field) || [];\n    const cloneRowVal = copy(lineObject);\n    const newValue = [...currentValue, cloneRowVal];\n    // 立即更新 keys，确保新行能立即显示\n    keys.value.push(getUuidv4());\n    shouldUseInitValueRef.value = true;\n    const updateKey = new Date().valueOf();\n    updater.updateStateValue(props.field, newValue, {});\n    updater.updateArrayField(props.field, { updateKey });\n    cacheUpdateKey.value = updateKey;\n};\n\nconst arrayFields = computed<ArrayFieldChildrenProps['arrayFields']>(() => {\n    return keys.value.map((key, index) => ({\n        key,\n        field: `${props.field}[${index}]`,\n        remove: () => remove(index),\n    }));\n});\n</script>\n"],"names":["props","__props","updater","useFormUpdater","getUuidByArray","array","getUuidv4","getUpdateKey","arrayField","initValueAdapter","initValue","iv","warning","generateKeys","value","oldKeys","val","key","i","keys","ref","cacheUpdateKey","shouldUseInitValueRef","initValueInProps","initValueInForm","computed","shouldUseInitValue","arrayFieldContext","provide","ArrayFieldContextKey","onMounted","currentValue","initValueCopyForFormState","copy","initValueCopyForReset","onUnmounted","watch","fieldValue","updateKey","result","add","remove","index","newArrayFieldError","opts","newArrayFieldValue","addWithInitValue","lineObject","cloneRowVal","newValue","arrayFields","_renderSlot","_ctx"],"mappings":"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"}

package/lib/es/components/form/ErrorMessage.vue.js

@@ -0,0 +1,61 @@
+import { defineComponent as g, computed as r, createElementBlock as l, createCommentVNode as s, openBlock as o, normalizeStyle as T, normalizeClass as u, createBlock as B, resolveDynamicComponent as C, toDisplayString as p } from "vue";
+import k from "classnames";
+import { cssClasses as S } from "@douyinfe/semi-foundation/form/constants";
+import d from "../icons/icons/IconAlertCircle.js";
+import A from "../icons/icons/IconAlertTriangle.js";
+const M = ["id"], w = ["id"], z = /* @__PURE__ */ g({
+  name: "SemiFormErrorMessage",
+  inheritAttrs: !1,
+  __name: "ErrorMessage",
+  props: {
+    error: { type: [Boolean, String, Array] },
+    className: {},
+    style: {},
+    showValidateIcon: { type: Boolean, default: !0 },
+    validateStatus: { default: "default" },
+    helpText: {},
+    isInInputGroup: { type: Boolean },
+    errorMessageId: {},
+    helpTextId: {}
+  },
+  setup(t) {
+    const e = t, n = S.PREFIX, m = r(() => {
+      if (typeof e.error == "string")
+        return e.error;
+      if (Array.isArray(e.error)) {
+        const a = e.error.filter((c) => c);
+        return a.length ? a.join(", ") : "";
+      }
+      return "";
+    }), i = r(() => e.error || e.helpText), f = r(() => e.isInInputGroup ? !!e.error : e.showValidateIcon && !!i.value), h = r(() => e.isInInputGroup ? d : e.validateStatus === "warning" ? A : e.validateStatus === "error" ? d : null), I = r(
+      () => k(
+        {
+          [`${n}-field-error-message`]: !!e.error,
+          [`${n}-field-help-text`]: !!e.helpText
+        },
+        e.className
+      )
+    ), y = r(() => `${n}-field-validate-status-icon`), v = r(() => e.errorMessageId), x = r(() => e.helpTextId);
+    return (a, c) => t.error || t.helpText ? (o(), l("div", {
+      key: 0,
+      class: u(I.value),
+      style: T(e.style)
+    }, [
+      f.value && i.value ? (o(), B(C(h.value), {
+        key: 0,
+        class: u(y.value)
+      }, null, 8, ["class"])) : s("", !0),
+      t.error ? (o(), l("span", {
+        key: 1,
+        id: v.value
+      }, p(m.value), 9, M)) : t.helpText ? (o(), l("span", {
+        key: 2,
+        id: x.value
+      }, p(t.helpText), 9, w)) : s("", !0)
+    ], 6)) : s("", !0);
+  }
+});
+export {
+  z as default
+};
+//# sourceMappingURL=ErrorMessage.vue.js.map

package/lib/es/components/form/ErrorMessage.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.vue.js","sources":["../../../../src/components/form/ErrorMessage.vue"],"sourcesContent":["<template>\n    <div v-if=\"error || helpText\" :class=\"cls\" :style=\"props.style\">\n        <component :is=\"iconComponent\" v-if=\"showIcon && text\" :class=\"iconCls\" />\n        <span v-if=\"error\" :id=\"errorMessageId\">{{ errorText }}</span>\n        <span v-else-if=\"helpText\" :id=\"helpTextId\">{{ helpText }}</span>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport classNames from 'classnames';\nimport { cssClasses } from '@douyinfe/semi-foundation/form/constants';\nimport { IconAlertTriangle, IconAlertCircle } from '../icons';\n\ndefineOptions({ name: 'SemiFormErrorMessage', inheritAttrs: false });\n\nexport type FieldError = boolean | string | Array<any> | undefined | unknown;\n\nexport interface ErrorMessageProps {\n    error?: FieldError;\n    className?: string;\n    style?: Record<string, any>;\n    showValidateIcon?: boolean;\n    validateStatus?: string;\n    helpText?: string;\n    isInInputGroup?: boolean;\n    errorMessageId?: string;\n    helpTextId?: string;\n}\n\nconst props = withDefaults(defineProps<ErrorMessageProps>(), {\n    showValidateIcon: true,\n    validateStatus: 'default',\n});\n\nconst prefix = cssClasses.PREFIX;\n\nconst errorText = computed(() => {\n    if (typeof props.error === 'string') {\n        return props.error;\n    } else if (Array.isArray(props.error)) {\n        const err = props.error.filter((e) => e);\n        return err.length ? err.join(', ') : '';\n    }\n    return '';\n});\n\nconst text = computed(() => props.error || props.helpText);\n\nconst showIcon = computed(() => {\n    if (props.isInInputGroup) {\n        return Boolean(props.error);\n    }\n    return props.showValidateIcon && Boolean(text.value);\n});\n\nconst iconComponent = computed(() => {\n    if (props.isInInputGroup) {\n        return IconAlertCircle;\n    }\n    if (props.validateStatus === 'warning') {\n        return IconAlertTriangle;\n    }\n    if (props.validateStatus === 'error') {\n        return IconAlertCircle;\n    }\n    return null;\n});\n\nconst cls = computed(() =>\n    classNames(\n        {\n            [`${prefix}-field-error-message`]: Boolean(props.error),\n            [`${prefix}-field-help-text`]: Boolean(props.helpText),\n        },\n        props.className\n    )\n);\n\nconst iconCls = computed(() => `${prefix}-field-validate-status-icon`);\n\nconst errorMessageId = computed(() => props.errorMessageId);\nconst helpTextId = computed(() => props.helpTextId);\n</script>\n"],"names":["props","__props","prefix","cssClasses","errorText","computed","err","e","text","showIcon","iconComponent","IconAlertCircle","IconAlertTriangle","cls","classNames","iconCls","errorMessageId","helpTextId","_createElementBlock","_normalizeStyle","_openBlock","_createBlock","_resolveDynamicComponent","_hoisted_1","_hoisted_2"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8BA,UAAMA,IAAQC,GAKRC,IAASC,EAAW,QAEpBC,IAAYC,EAAS,MAAM;AAC7B,UAAI,OAAOL,EAAM,SAAU;AACvB,eAAOA,EAAM;AACjB,UAAW,MAAM,QAAQA,EAAM,KAAK,GAAG;AACnC,cAAMM,IAAMN,EAAM,MAAM,OAAO,CAACO,MAAMA,CAAC;AACvC,eAAOD,EAAI,SAASA,EAAI,KAAK,IAAI,IAAI;AAAA,MACzC;AACA,aAAO;AAAA,IACX,CAAC,GAEKE,IAAOH,EAAS,MAAML,EAAM,SAASA,EAAM,QAAQ,GAEnDS,IAAWJ,EAAS,MAClBL,EAAM,iBACC,EAAQA,EAAM,QAElBA,EAAM,oBAAoB,EAAQQ,EAAK,KACjD,GAEKE,IAAgBL,EAAS,MACvBL,EAAM,iBACCW,IAEPX,EAAM,mBAAmB,YAClBY,IAEPZ,EAAM,mBAAmB,UAClBW,IAEJ,IACV,GAEKE,IAAMR;AAAA,MAAS,MACjBS;AAAA,QACI;AAAA,UACI,CAAC,GAAGZ,CAAM,sBAAsB,GAAG,EAAQF,EAAM;AAAA,UACjD,CAAC,GAAGE,CAAM,kBAAkB,GAAG,EAAQF,EAAM;AAAA,QAAQ;AAAA,QAEzDA,EAAM;AAAA,MAAA;AAAA,IACV,GAGEe,IAAUV,EAAS,MAAM,GAAGH,CAAM,6BAA6B,GAE/Dc,IAAiBX,EAAS,MAAML,EAAM,cAAc,GACpDiB,IAAaZ,EAAS,MAAML,EAAM,UAAU;qBAjFnCC,EAAA,SAASA,EAAA,iBAApBiB,EAIM,OAAA;AAAA;MAJyB,SAAOL,EAAA,KAAG;AAAA,MAAG,OAAKM,EAAEnB,EAAM,KAAK;AAAA,IAAA;MACrBS,EAAA,SAAYD,EAAA,SAAjDY,KAAAC,EAA0EC,EAA1DZ,EAAA,KAAa,GAAA;AAAA;QAA2B,SAAOK,EAAA,KAAO;AAAA,MAAA;MAC1Dd,EAAA,cAAZiB,EAA8D,QAAA;AAAA;QAA1C,IAAIF,EAAA;AAAA,MAAA,KAAmBZ,EAAA,KAAS,GAAA,GAAAmB,CAAA,KACnCtB,EAAA,iBAAjBiB,EAAiE,QAAA;AAAA;QAArC,IAAID,EAAA;AAAA,MAAA,KAAehB,EAAA,QAAQ,GAAA,GAAAuB,CAAA;;;;"}