@veltra/desktop 1.0.0

package/dist/components/tabs/tabs.js

@@ -0,0 +1,148 @@
+import _sfc_main$1 from "../icon/icon.js";
+import _sfc_main$2 from "../scroll/scroll.js";
+import { Fragment, KeepAlive, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, openBlock, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useModel, useSlots, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { bem } from "@veltra/utils";
+import { useFallbackProps } from "@veltra/compositions";
+import { vRipple } from "@veltra/directives";
+import { Close, Plus } from "@veltra/icons/normal";
+//#region src/components/tabs/tabs.vue
+const _hoisted_1 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "Tabs",
+	__name: "tabs",
+	props: /* @__PURE__ */ mergeModels({
+		modelValue: {},
+		items: {},
+		position: { default: "top" },
+		editable: { type: Boolean },
+		keepAlive: { type: Boolean },
+		size: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels([
+		"update:modelValue",
+		"update:items",
+		"update:active",
+		"delete",
+		"create",
+		"click"
+	], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const { size } = useFallbackProps([props], { size: "default" });
+		const tabItems = computed(() => {
+			return props.items;
+		});
+		const cls = bem("tabs");
+		const headerRef = shallowRef();
+		/** 当前活动标签 */
+		const index = shallowRef(-1);
+		const model = useModel(__props, "modelValue");
+		const markStyle = shallowRef({});
+		let changedByEvent = false;
+		watch([model, () => props.items], ([model, items]) => {
+			if (changedByEvent) return;
+			index.value = items.findIndex((item) => item.key === model);
+		}, { immediate: true });
+		watch([
+			index,
+			() => props.position,
+			() => props.editable
+		], async ([index, position, editable]) => {
+			if (index === -1 || editable) return;
+			await nextTick();
+			const headerEl = headerRef.value;
+			const headerRect = headerEl.getBoundingClientRect();
+			const el = headerEl.children[index];
+			const { offsetWidth, offsetHeight } = el;
+			const rect = el.getBoundingClientRect();
+			if (position === "top" || position === "bottom") markStyle.value = {
+				width: offsetWidth + "px",
+				transform: `translate3d(${rect.left - headerRect.left}px, 0, 0)`
+			};
+			else markStyle.value = {
+				height: offsetHeight + "px",
+				transform: `translate3d(0, ${rect.top - headerRect.top}px, 0)`
+			};
+		}, { immediate: true });
+		const handleClick = (item, _index) => {
+			if (item.disabled) return;
+			changedByEvent = true;
+			index.value = _index;
+			model.value = item.key;
+			nextTick(() => {
+				changedByEvent = false;
+			});
+		};
+		const renderSlots = () => {
+			const key = model.value;
+			if (!key) return null;
+			const nodes = slots[key]?.({ key });
+			if (Array.isArray(nodes)) return createVNode(_sfc_main$2, { class: cls.e("content") }, { default: () => nodes });
+			return nodes;
+		};
+		/** 关闭标签 */
+		const handleClose = (item, index) => {
+			const { items } = props;
+			if (model.value === item.key) model.value = (items[index + 1] ?? items[index - 1]).key;
+			emit("update:items", [...items.slice(0, index), ...items.slice(index + 1)]);
+			emit("delete", item, index);
+		};
+		const handleAdd = () => {
+			emit("create");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass([
+				unref(cls).b,
+				unref(cls).m(__props.position),
+				unref(cls).m(unref(size))
+			]) }, [createElementVNode("ul", {
+				class: normalizeClass([unref(cls).e("header"), unref(cls).em("header", __props.position)]),
+				ref_key: "headerRef",
+				ref: headerRef
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(tabItems.value, (item, index) => {
+				return withDirectives((openBlock(), createElementBlock("li", {
+					key: item.key,
+					class: normalizeClass([
+						unref(cls).e("header-item"),
+						unref(bem).is("active", model.value === item.key),
+						unref(bem).is("disabled", item.disabled === true)
+					]),
+					onClick: withModifiers(($event) => handleClick(item, index), ["stop"])
+				}, [renderSlot(_ctx.$slots, `name:${item.key}`, {}, () => [createTextVNode(toDisplayString(item.name), 1)]), __props.editable ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [!item.disabled ? (openBlock(), createBlock(unref(_sfc_main$1), {
+					key: 0,
+					class: normalizeClass(unref(cls).e("close")),
+					onClick: withModifiers(($event) => handleClose(item, index), ["stop"]),
+					onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+				}, {
+					default: withCtx(() => [createVNode(unref(Close))]),
+					_: 1
+				}, 8, ["class", "onClick"])) : (openBlock(), createElementBlock("i", {
+					key: 1,
+					class: normalizeClass(unref(cls).e("close-placeholder"))
+				}, null, 2))], 64)) : createCommentVNode("v-if", true)], 10, _hoisted_1)), [[unref(vRipple), item.disabled ? false : unref(cls).e("ripple")]]);
+			}), 128)), __props.editable ? (openBlock(), createElementBlock("li", {
+				key: 0,
+				class: normalizeClass([unref(cls).e("header-item"), unref(cls).e("add")]),
+				onClick: handleAdd
+			}, [createVNode(unref(_sfc_main$1), null, {
+				default: withCtx(() => [createVNode(unref(Plus))]),
+				_: 1
+			})], 2)) : createCommentVNode("v-if", true)], 2), createVNode(Transition, {
+				name: "fade",
+				mode: "out-in"
+			}, {
+				default: withCtx(() => [__props.keepAlive ? (openBlock(), createBlock(KeepAlive, { key: 0 }, [(openBlock(), createBlock(resolveDynamicComponent(renderSlots()), { key: model.value }))], 1024)) : (openBlock(), createBlock(resolveDynamicComponent(renderSlots()), { key: model.value }))]),
+				_: 1
+			})], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../src/components/tabs/tabs.vue"],"sourcesContent":["<template>\n  <div :class=\"[cls.b, cls.m(position!), cls.m(size)]\">\n    <ul :class=\"[cls.e('header'), cls.em('header', position!)]\" ref=\"headerRef\">\n      <li\n        v-for=\"(item, index) in tabItems\"\n        :key=\"item.key\"\n        :class=\"[\n          cls.e('header-item'),\n          bem.is('active', model === item.key),\n          bem.is('disabled', item.disabled === true)\n        ]\"\n        v-ripple=\"item.disabled ? false : cls.e('ripple')\"\n        @click.stop=\"handleClick(item, index)\"\n      >\n        <slot :name=\"`name:${item.key}`\">\n          {{ item.name }}\n        </slot>\n\n        <template v-if=\"editable\">\n          <u-icon\n            v-if=\"!item.disabled\"\n            :class=\"cls.e('close')\"\n            @click.stop=\"handleClose(item, index)\"\n            @mousedown.stop\n          >\n            <Close />\n          </u-icon>\n          <i v-else :class=\"cls.e('close-placeholder')\"></i>\n        </template>\n      </li>\n\n      <li v-if=\"editable\" :class=\"[cls.e('header-item'), cls.e('add')]\" @click=\"handleAdd\">\n        <u-icon>\n          <Plus />\n        </u-icon>\n      </li>\n    </ul>\n\n    <transition name=\"fade\" mode=\"out-in\">\n      <KeepAlive v-if=\"keepAlive\">\n        <component :key=\"model\" :is=\"renderSlots()\" />\n      </KeepAlive>\n      <component v-else :key=\"model\" :is=\"renderSlots()\" />\n    </transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { Close, Plus } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, createVNode, nextTick, shallowRef, watch, type CSSProperties } from 'vue'\n\nimport type { TabItem, TabsProps, TabsEmits, ComponentSize } from '../../types'\nimport { UIcon } from '../icon'\nimport { UScroll } from '../scroll'\n\ndefineOptions({\n  name: 'Tabs'\n})\n\nconst props = withDefaults(defineProps<TabsProps>(), {\n  position: 'top'\n})\n\nconst emit = defineEmits<TabsEmits>()\n\nconst slots = defineSlots<{\n  [key: string]: (props: { key: string }) => any\n  [key: `name:${string}`]: () => any\n}>()\n\nconst { size } = useFallbackProps([props], {\n  size: 'default' as ComponentSize\n})\n\nconst tabItems = computed(() => {\n  return props.items\n})\n\nconst cls = bem('tabs')\n\nconst headerRef = shallowRef<HTMLElement>()\n\n/** 当前活动标签 */\nconst index = shallowRef(-1)\nconst model = defineModel<string>()\n\nconst markStyle = shallowRef<CSSProperties>({})\n\nlet changedByEvent = false\nwatch(\n  [model, () => props.items],\n  ([model, items]) => {\n    if (changedByEvent) return\n    index.value = items.findIndex((item) => item.key === model)\n  },\n  { immediate: true }\n)\n\nwatch(\n  [index, () => props.position, () => props.editable],\n  async ([index, position, editable]) => {\n    if (index === -1 || editable) return\n    await nextTick()\n\n    const headerEl = headerRef.value!\n\n    const headerRect = headerEl.getBoundingClientRect()\n    const el = headerEl.children[index]! as HTMLLIElement\n    const { offsetWidth, offsetHeight } = el\n\n    const rect = el.getBoundingClientRect()\n\n    if (position === 'top' || position === 'bottom') {\n      markStyle.value = {\n        width: offsetWidth + 'px',\n        transform: `translate3d(${rect.left - headerRect.left}px, 0, 0)`\n      }\n    } else {\n      markStyle.value = {\n        height: offsetHeight + 'px',\n        transform: `translate3d(0, ${rect.top - headerRect.top}px, 0)`\n      }\n    }\n  },\n  { immediate: true }\n)\n\nconst handleClick = (item: TabItem, _index: number) => {\n  if (item.disabled) return\n\n  changedByEvent = true\n  index.value = _index\n  model.value = item.key\n  nextTick(() => {\n    changedByEvent = false\n  })\n}\n\nconst renderSlots = () => {\n  const key = model.value\n  if (!key) return null\n  const nodes = slots[key]?.({ key })\n  if (Array.isArray(nodes)) {\n    return createVNode(UScroll, { class: cls.e('content') }, { default: () => nodes })\n  }\n  return nodes\n}\n\n/** 关闭标签 */\nconst handleClose = (item: TabItem, index: number) => {\n  const { items } = props\n  if (model.value === item.key) {\n    model.value = (items[index + 1] ?? items[index - 1])!.key\n  }\n\n  emit('update:items', [...items.slice(0, index), ...items.slice(index + 1)])\n\n  emit('delete', item, index)\n}\n\nconst handleAdd = () => {\n  emit('create')\n}\n</script>\n"],"mappings":"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"}

package/dist/components/tabs/tabs.vue.d.ts

@@ -0,0 +1,44 @@
+import { TabItem, TabsProps } from "../../types/tabs.js";
+import * as _$vue from "vue";
+
+//#region src/components/tabs/tabs.vue.d.ts
+type __VLS_Props = TabsProps;
+type __VLS_Slots = {
+  [key: string]: (props: {
+    key: string;
+  }) => any;
+  [key: `name:${string}`]: () => any;
+};
+type __VLS_ModelProps = {
+  modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (value: string | undefined) => any;
+} & {
+  create: () => any;
+  delete: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string | number) => any;
+  "update:items": (items: TabItem[]) => any;
+  "update:active": (active: string | number) => any;
+}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  onCreate?: (() => any) | undefined;
+  onDelete?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+  "onUpdate:items"?: ((items: TabItem[]) => any) | undefined;
+  "onUpdate:active"?: ((active: string | number) => any) | undefined;
+}>, {
+  position: "left" | "right" | "top" | "bottom";
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=tabs.vue.d.ts.map

package/dist/components/tag/index.d.ts

@@ -0,0 +1 @@
+import { _default } from "./tag.vue.js";

package/dist/components/tag/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/tag/style.js

@@ -0,0 +1 @@
+import "./style2.css";

package/dist/components/tag/style2.css

@@ -0,0 +1,181 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+:root {
+  --u-tag-small: 20px;
+  --u-tag-default: 24px;
+  --u-tag-large: 28px;
+}
+
+.u-tag {
+  cursor: default;
+  color: var(--u-text-color-main);
+  background-color: var(--u-color-default);
+  overflow: hidden;
+  min-width: 0;
+  border: 1px solid var(--u-text-color-main);
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  animation: tag-zoom-in 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.u-tag__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 1;
+}
+.u-tag__icon-close {
+  cursor: pointer;
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+.u-tag--small {
+  height: var(--u-tag-small);
+  font-size: var(--u-font-size-main-small);
+  padding: 0 var(--u-gap-small);
+  border-radius: var(--u-radius-small);
+}
+.u-tag--small .u-tag__icon-close {
+  margin-left: calc(var(--u-gap-small) / 2);
+}
+.u-tag--small.is-round {
+  border-radius: calc(var(--u-tag-small) / 2);
+}
+.u-tag--default {
+  height: var(--u-tag-default);
+  font-size: var(--u-font-size-main-default);
+  padding: 0 var(--u-gap-default);
+  border-radius: var(--u-radius-default);
+}
+.u-tag--default .u-tag__icon-close {
+  margin-left: calc(var(--u-gap-default) / 2);
+}
+.u-tag--default.is-round {
+  border-radius: calc(var(--u-tag-default) / 2);
+}
+.u-tag--large {
+  height: var(--u-tag-large);
+  font-size: var(--u-font-size-main-large);
+  padding: 0 var(--u-gap-large);
+  border-radius: var(--u-radius-large);
+}
+.u-tag--large .u-tag__icon-close {
+  margin-left: calc(var(--u-gap-large) / 2);
+}
+.u-tag--large.is-round {
+  border-radius: calc(var(--u-tag-large) / 2);
+}
+.u-tag.is-dark {
+  border-color: var(--u-color-default);
+}
+.u-tag--color-primary {
+  color: var(--u-color-primary);
+  border-color: var(--u-color-primary);
+  background-color: var(--u-color-primary-light-9);
+}
+.u-tag--color-primary.is-dark {
+  color: var(--u-text-color-white);
+  background-color: var(--u-color-primary);
+}
+.u-tag--color-primary .u-tag__icon-close:hover {
+  border: 1px solid var(--u-color-primary);
+}
+.u-tag--color-success {
+  color: var(--u-color-success);
+  border-color: var(--u-color-success);
+  background-color: var(--u-color-success-light-9);
+}
+.u-tag--color-success.is-dark {
+  color: var(--u-text-color-white);
+  background-color: var(--u-color-success);
+}
+.u-tag--color-success .u-tag__icon-close:hover {
+  border: 1px solid var(--u-color-success);
+}
+.u-tag--color-warning {
+  color: var(--u-color-warning);
+  border-color: var(--u-color-warning);
+  background-color: var(--u-color-warning-light-9);
+}
+.u-tag--color-warning.is-dark {
+  color: var(--u-text-color-white);
+  background-color: var(--u-color-warning);
+}
+.u-tag--color-warning .u-tag__icon-close:hover {
+  border: 1px solid var(--u-color-warning);
+}
+.u-tag--color-danger {
+  color: var(--u-color-danger);
+  border-color: var(--u-color-danger);
+  background-color: var(--u-color-danger-light-9);
+}
+.u-tag--color-danger.is-dark {
+  color: var(--u-text-color-white);
+  background-color: var(--u-color-danger);
+}
+.u-tag--color-danger .u-tag__icon-close:hover {
+  border: 1px solid var(--u-color-danger);
+}
+.u-tag--color-info {
+  color: var(--u-color-info);
+  border-color: var(--u-color-info);
+  background-color: var(--u-color-info-light-9);
+}
+.u-tag--color-info.is-dark {
+  color: var(--u-text-color-white);
+  background-color: var(--u-color-info);
+}
+.u-tag--color-info .u-tag__icon-close:hover {
+  border: 1px solid var(--u-color-info);
+}
+.u-tag--color-disabled {
+  color: var(--u-color-disabled);
+  border-color: var(--u-color-disabled);
+  background-color: var(--u-color-disabled-light-9);
+}
+.u-tag--color-disabled.is-dark {
+  color: var(--u-text-color-white);
+  background-color: var(--u-color-disabled);
+}
+.u-tag--color-disabled .u-tag__icon-close:hover {
+  border: 1px solid var(--u-color-disabled);
+}
+.u-tag--color-default {
+  color: var(--u-color-default);
+  border-color: var(--u-color-default);
+  background-color: var(--u-color-default-light-9);
+}
+.u-tag--color-default.is-dark {
+  color: var(--u-text-color-white);
+  background-color: var(--u-color-default);
+}
+.u-tag--color-default .u-tag__icon-close:hover {
+  border: 1px solid var(--u-color-default);
+}
+
+@keyframes tag-zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale3d(0, 0, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}

package/dist/components/tag/tag.js

@@ -0,0 +1,52 @@
+import _sfc_main$1 from "../icon/icon.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx, withModifiers } from "vue";
+import { bem } from "@veltra/utils";
+import { useFormComponent, useFormFallbackProps } from "@veltra/compositions";
+import { Close } from "@veltra/icons/normal";
+//#region src/components/tag/tag.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "Tag",
+	__name: "tag",
+	props: {
+		type: {},
+		closable: { type: Boolean },
+		size: {},
+		round: { type: Boolean },
+		dark: { type: Boolean }
+	},
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const cls = bem("tag");
+		const props = __props;
+		const emit = __emit;
+		const { formProps } = useFormComponent();
+		const { size } = useFormFallbackProps([formProps ?? {}, props], { size: "default" });
+		const handleClose = () => {
+			emit("close");
+		};
+		const className = computed(() => {
+			const { type } = props;
+			return [
+				cls.b,
+				cls.m(size.value),
+				type && cls.m("color-" + type),
+				bem.is("round", props.round),
+				bem.is("dark", props.dark)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(className.value) }, [createElementVNode("span", { class: normalizeClass(unref(cls).e("content")) }, [renderSlot(_ctx.$slots, "default")], 2), __props.closable ? (openBlock(), createBlock(unref(_sfc_main$1), {
+				key: 0,
+				onClick: withModifiers(handleClose, ["stop"]),
+				class: normalizeClass(unref(cls).e("icon-close"))
+			}, {
+				default: withCtx(() => [createVNode(unref(Close))]),
+				_: 1
+			}, 8, ["class"])) : createCommentVNode("v-if", true)], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=tag.js.map

package/dist/components/tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","names":[],"sources":["../../../src/components/tag/tag.vue"],"sourcesContent":["<template>\n  <span :class=\"className\">\n    <span :class=\"cls.e('content')\">\n      <slot />\n    </span>\n\n    <u-icon v-if=\"closable\" @click.stop=\"handleClose\" :class=\"cls.e('icon-close')\">\n      <Close />\n    </u-icon>\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { Close } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { TagEmits, TagProps } from '../../types'\nimport { UIcon } from '../icon'\n\ndefineOptions({\n  name: 'Tag'\n})\n\nconst cls = bem('tag')\n\nconst props = defineProps<TagProps>()\n\nconst emit = defineEmits<TagEmits>()\n\nconst { formProps } = useFormComponent()\nconst { size } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default'\n})\n\nconst handleClose = () => {\n  emit('close')\n}\n\nconst className = computed(() => {\n  const { type } = props\n  return [\n    cls.b,\n    cls.m(size.value),\n    type && cls.m('color-' + type),\n    bem.is('round', props.round),\n    bem.is('dark', props.dark)\n  ]\n})\n\n// const classRound = computed(() => {\n//   return [bem.is('round', props.round)]\n// })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAyBA,MAAM,MAAM,IAAI,MAAK;EAErB,MAAM,QAAQ;EAEd,MAAM,OAAO;EAEb,MAAM,EAAE,cAAc,kBAAiB;EACvC,MAAM,EAAE,SAAS,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAC9D,MAAM,WACP,CAAA;EAED,MAAM,oBAAoB;AACxB,QAAK,QAAO;;EAGd,MAAM,YAAY,eAAe;GAC/B,MAAM,EAAE,SAAS;AACjB,UAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,MAAM;IACjB,QAAQ,IAAI,EAAE,WAAW,KAAK;IAC9B,IAAI,GAAG,SAAS,MAAM,MAAM;IAC5B,IAAI,GAAG,QAAQ,MAAM,KAAI;IAC3B;IACD;;uBAhDC,mBAQO,QAAA,EARA,OAAK,eAAE,UAAA,MAAS,EAAA,EAAA,CACrB,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,UAAA,CAAA,EAAA,EAAA,CACjB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,EAGI,QAAA,YAAA,WAAA,EAAd,YAES,MAAA,YAAA,EAAA;;IAFgB,SAAK,cAAO,aAAW,CAAA,OAAA,CAAA;IAAG,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,aAAA,CAAA;;2BACpD,CAAT,YAAS,MAAA,MAAA,CAAA,CAAA,CAAA"}

package/dist/components/tag/tag.vue.d.ts

@@ -0,0 +1,23 @@
+import { TagProps } from "../../types/tag.js";
+import * as _$vue from "vue";
+
+//#region src/components/tag/tag.vue.d.ts
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<TagProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
+  close: () => any;
+}, string, _$vue.PublicProps, Readonly<TagProps> & Readonly<{
+  onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=tag.vue.d.ts.map

package/dist/components/text/index.d.ts

@@ -0,0 +1 @@
+import { _default } from "./text.vue.js";

package/dist/components/text/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/text/style.js

@@ -0,0 +1 @@
+import "./style2.css";

package/dist/components/text/style2.css

@@ -0,0 +1,54 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-text {
+  margin: 0;
+  line-height: 1.3;
+  overflow: hidden;
+  position: relative;
+}
+.u-text.is-main-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+.u-text.is-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+.u-text.is-sub-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #999;
+}
+.u-text.is-content {
+  font-size: 14px;
+  font-weight: 300;
+  color: #666;
+}
+.u-text.is-additional {
+  font-size: 12px;
+  font-weight: 300;
+  color: #999;
+}
+.u-text.is-italic {
+  font-style: italic;
+}
+.u-text.is-bold {
+  font-weight: bold;
+}

package/dist/components/text/text.js

@@ -0,0 +1,64 @@
+import NodeRender from "../node-render/node-render.js";
+import { computed, createElementBlock, createTextVNode, createVNode, defineComponent, h, normalizeClass, normalizeStyle, openBlock, unref, useSlots } from "vue";
+import { bem, getHighlightChunks, isTextNode, withUnit } from "@veltra/utils";
+//#region src/components/text/text.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "Text",
+	__name: "text",
+	props: {
+		as: { default: "content" },
+		fontSize: {},
+		deleted: { type: Boolean },
+		underline: { type: Boolean },
+		bold: { type: Boolean },
+		italic: { type: Boolean },
+		highlight: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const cls = bem("text");
+		const classList = computed(() => {
+			return [
+				cls.b,
+				bem.is(props.as),
+				bem.is("bold", props.bold),
+				bem.is("italic", props.italic)
+			];
+		});
+		const style = computed(() => {
+			const style = { fontSize: withUnit(props.fontSize, "px") };
+			const { deleted, underline } = props;
+			if (deleted) style.textDecoration = "line-through";
+			if (underline) style.textDecoration = "underline";
+			return style;
+		});
+		const slots = useSlots();
+		const getTextVNode = () => {
+			const nodes = slots.default?.();
+			if (!nodes?.length) return void 0;
+			const textNodes = nodes.filter((node) => isTextNode(node));
+			const { highlight } = props;
+			if (!highlight) return textNodes;
+			return textNodes.reduce((nodes, textNode) => {
+				getHighlightChunks(textNode.children, Array.isArray(highlight) ? highlight : [highlight]).forEach((chunk) => {
+					if (chunk.highlight) nodes.push(h("mark", chunk.text));
+					else nodes.push(createTextVNode(chunk.text));
+				});
+				return nodes;
+			}, []);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", {
+				class: normalizeClass(classList.value),
+				style: normalizeStyle(style.value)
+			}, [createVNode(unref(NodeRender), {
+				content: getTextVNode(),
+				ref: "aa"
+			}, null, 8, ["content"])], 6);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=text.js.map

package/dist/components/text/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":[],"sources":["../../../src/components/text/text.vue"],"sourcesContent":["<template>\n  <p :class=\"classList\" :style=\"style\">\n    <UNodeRender :content=\"getTextVNode()\" ref=\"aa\" />\n  </p>\n</template>\n\n<script lang=\"ts\" setup>\nimport { bem, withUnit, isTextNode, getHighlightChunks } from '@veltra/utils'\nimport { type CSSProperties, type VNode, computed, useSlots, h, createTextVNode } from 'vue'\n\nimport type { TextProps } from '../../types'\nimport { UNodeRender } from '../node-render'\n\ndefineOptions({\n  name: 'Text'\n})\n\nconst props = withDefaults(defineProps<TextProps>(), {\n  as: 'content'\n})\n\nconst cls = bem('text')\n\nconst classList = computed(() => {\n  return [cls.b, bem.is(props.as), bem.is('bold', props.bold), bem.is('italic', props.italic)]\n})\n\nconst style = computed(() => {\n  const style: CSSProperties = {\n    fontSize: withUnit(props.fontSize, 'px')\n  }\n  const { deleted, underline } = props\n  if (deleted) {\n    style.textDecoration = 'line-through'\n  }\n  if (underline) {\n    style.textDecoration = 'underline'\n  }\n\n  return style\n})\n\nconst slots = useSlots()\nconst getTextVNode = () => {\n  const nodes = slots.default?.()\n  if (!nodes?.length) return undefined\n\n  // 只允许渲染文本\n  const textNodes = nodes.filter((node) => isTextNode(node))\n\n  const { highlight } = props\n\n  if (!highlight) {\n    return textNodes\n  }\n\n  return textNodes.reduce((nodes, textNode) => {\n    const chunks = getHighlightChunks(\n      textNode.children as string,\n      Array.isArray(highlight) ? highlight : [highlight]\n    )\n\n    chunks.forEach((chunk) => {\n      if (chunk.highlight) {\n        nodes.push(h('mark', chunk.text))\n      } else {\n        nodes.push(createTextVNode(chunk.text))\n      }\n    })\n\n    return nodes\n  }, [] as VNode[])\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ;EAId,MAAM,MAAM,IAAI,OAAM;EAEtB,MAAM,YAAY,eAAe;AAC/B,UAAO;IAAC,IAAI;IAAG,IAAI,GAAG,MAAM,GAAG;IAAE,IAAI,GAAG,QAAQ,MAAM,KAAK;IAAE,IAAI,GAAG,UAAU,MAAM,OAAO;IAAA;IAC5F;EAED,MAAM,QAAQ,eAAe;GAC3B,MAAM,QAAuB,EAC3B,UAAU,SAAS,MAAM,UAAU,KAAI,EACzC;GACA,MAAM,EAAE,SAAS,cAAc;AAC/B,OAAI,QACF,OAAM,iBAAiB;AAEzB,OAAI,UACF,OAAM,iBAAiB;AAGzB,UAAO;IACR;EAED,MAAM,QAAQ,UAAS;EACvB,MAAM,qBAAqB;GACzB,MAAM,QAAQ,MAAM,WAAU;AAC9B,OAAI,CAAC,OAAO,OAAQ,QAAO,KAAA;GAG3B,MAAM,YAAY,MAAM,QAAQ,SAAS,WAAW,KAAK,CAAA;GAEzD,MAAM,EAAE,cAAc;AAEtB,OAAI,CAAC,UACH,QAAO;AAGT,UAAO,UAAU,QAAQ,OAAO,aAAa;AAC5B,uBACb,SAAS,UACT,MAAM,QAAQ,UAAU,GAAG,YAAY,CAAC,UAAS,CACnD,CAEO,SAAS,UAAU;AACxB,SAAI,MAAM,UACR,OAAM,KAAK,EAAE,QAAQ,MAAM,KAAK,CAAA;SAEhC,OAAM,KAAK,gBAAgB,MAAM,KAAK,CAAA;MAEzC;AAED,WAAO;MACN,EAAE,CAAW;;;uBAtEhB,mBAEI,KAAA;IAFA,OAAK,eAAE,UAAA,MAAS;IAAG,OAAK,eAAE,MAAA,MAAK;OACjC,YAAkD,MAAA,WAAA,EAAA;IAApC,SAAS,cAAY;IAAI,KAAI"}

package/dist/components/text/text.vue.d.ts

@@ -0,0 +1,11 @@
+import { TextProps } from "../../types/text.js";
+import * as _$vue from "vue";
+
+//#region src/components/text/text.vue.d.ts
+declare const __VLS_export: _$vue.DefineComponent<TextProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<TextProps> & Readonly<{}>, {
+  as: "main-title" | "title" | "sub-title" | "content" | "additional";
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };
+//# sourceMappingURL=text.vue.d.ts.map

package/dist/components/textarea/index.d.ts

@@ -0,0 +1 @@
+import { _default } from "./textarea.vue.js";

package/dist/components/textarea/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/textarea/style.js

@@ -0,0 +1,2 @@
+import "./style2.css";
+import "@veltra/styles/anime/zoom-in.scss";