@veltra/desktop 1.0.0

package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,172 @@
+import _sfc_main from "../icon/icon.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeModels, nextTick, normalizeClass, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref, useModel, withCtx, withModifiers } from "vue";
+import { FORM_EMPTY_CONTENT, bem } from "@veltra/utils";
+import { useFocus, useFormComponent, useFormFallbackProps } from "@veltra/compositions";
+import { Close } from "@veltra/icons/normal";
+//#region src/components/input/input.vue?vue&type=script&setup=true&lang.tsx
+const _hoisted_1 = [
+	"placeholder",
+	"value",
+	"disabled",
+	"readonly"
+];
+var input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "Input",
+	__name: "input",
+	props: /* @__PURE__ */ mergeModels({
+		modelValue: {},
+		placeholder: { default: "请输入" },
+		prefix: {},
+		suffix: {},
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		nativeReadonly: { type: Boolean },
+		pattern: {},
+		tips: {},
+		span: {},
+		label: {},
+		field: {},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		size: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels([
+		"update:modelValue",
+		"change",
+		"suffix:click",
+		"prefix:click",
+		"focus",
+		"clear",
+		"blur",
+		"native:input"
+	], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const model = useModel(__props, "modelValue");
+		const inst = getCurrentInstance();
+		const cls = bem("input");
+		const { formProps } = useFormComponent();
+		const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props]);
+		const { focus, handleBlur, handleFocus } = useFocus((focused) => {
+			if (focused) emit("focus");
+			else emit("blur");
+		});
+		const inputClass = computed(() => {
+			return [
+				cls.b,
+				cls.m(size.value),
+				bem.is("disabled", disabled.value),
+				bem.is("readonly", readonly.value),
+				bem.is("focus", focus.value)
+			];
+		});
+		const prefixClass = [cls.e("prefix"), bem.is("clickable", !!inst?.vnode.props?.["onPrefix:click"])];
+		const suffixClass = [cls.e("suffix"), bem.is("clickable", !!inst?.vnode.props?.["onSuffix:click"])];
+		let isComposing = false;
+		function handleCompositionStart() {
+			isComposing = true;
+		}
+		function handleCompositionEnd(e) {
+			isComposing = false;
+			handleInput(e);
+		}
+		const handleInput = (e) => {
+			if (isComposing) return;
+			const inputVal = e.target.value;
+			emit("native:input", e);
+			if (!(props.pattern?.test(inputVal) ?? true)) return;
+			model.value = inputVal;
+		};
+		const handlePrefixClick = () => {
+			emit("prefix:click", model.value);
+		};
+		const handleSuffixClick = () => {
+			emit("suffix:click", model.value);
+		};
+		const clearModelValue = () => {
+			model.value = "";
+			emit("clear");
+		};
+		const hovered = ref(false);
+		const handleMouseEnter = () => {
+			hovered.value = true;
+		};
+		const handleMouseLeave = () => {
+			hovered.value = false;
+		};
+		const handleChange = (e) => {
+			const target = e.target;
+			if (props.pattern?.test(target.value) ?? true) emit("change", target.value);
+			else nextTick(() => {
+				target.value = model.value ?? "";
+			});
+		};
+		const el = shallowRef();
+		const generateModel = computed(() => {
+			if (!model.value) return "";
+			return `${props.prefix ?? ""}${model.value}${props.suffix ?? ""}`;
+		});
+		__expose({ el });
+		return (_ctx, _cache) => {
+			return !unref(readonly) ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(inputClass.value),
+				onMouseenter: handleMouseEnter,
+				onMouseleave: handleMouseLeave
+			}, [
+				_ctx.$slots.prefix || __props.prefix ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(prefixClass),
+					onClick: handlePrefixClick
+				}, [createTextVNode(toDisplayString(__props.prefix) + " ", 1), renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("v-if", true),
+				createElementVNode("input", {
+					class: normalizeClass(unref(cls).e("native")),
+					placeholder: props.placeholder,
+					type: "text",
+					value: model.value,
+					onInput: handleInput,
+					onChange: handleChange,
+					onFocus: _cache[0] || (_cache[0] = (...args) => unref(handleFocus) && unref(handleFocus)(...args)),
+					onBlur: _cache[1] || (_cache[1] = (...args) => unref(handleBlur) && unref(handleBlur)(...args)),
+					onCompositionstart: handleCompositionStart,
+					onCompositionend: handleCompositionEnd,
+					autocomplete: "off",
+					ref_key: "el",
+					ref: el,
+					disabled: unref(disabled),
+					readonly: __props.nativeReadonly
+				}, null, 42, _hoisted_1),
+				__props.clearable && !unref(disabled) && model.value ? (openBlock(), createBlock(unref(_sfc_main), {
+					key: 1,
+					class: normalizeClass([unref(cls).e("clear"), unref(bem).is("hidden", !hovered.value)]),
+					title: "清除",
+					onClick: withModifiers(clearModelValue, ["stop"])
+				}, {
+					default: withCtx(() => [createVNode(unref(Close))]),
+					_: 1
+				}, 8, ["class"])) : createCommentVNode("v-if", true),
+				_ctx.$slots.suffix || __props.suffix ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: normalizeClass(suffixClass),
+					onClick: handleSuffixClick
+				}, [createTextVNode(toDisplayString(__props.suffix) + " ", 1), renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("v-if", true)
+			], 34)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(generateModel.value || unref(FORM_EMPTY_CONTENT)), 1)], 64));
+		};
+	}
+});
+//#endregion
+export { input_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=input.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/input/input.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"inputClass\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n    v-if=\"!readonly\"\n  >\n    <span v-if=\"$slots.prefix || prefix\" :class=\"prefixClass\" @click=\"handlePrefixClick\">\n      {{ prefix }}\n      <slot name=\"prefix\"></slot>\n    </span>\n\n    <input\n      :class=\"cls.e('native')\"\n      :placeholder=\"props.placeholder\"\n      type=\"text\"\n      :value=\"model\"\n      @input=\"handleInput\"\n      @change=\"handleChange\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur\"\n      @compositionstart=\"handleCompositionStart\"\n      @compositionend=\"handleCompositionEnd\"\n      autocomplete=\"off\"\n      ref=\"el\"\n      :disabled=\"disabled\"\n      :readonly=\"nativeReadonly\"\n    />\n    <UIcon\n      v-if=\"clearable && !disabled && model\"\n      :class=\"[cls.e('clear'), bem.is('hidden', !hovered)]\"\n      title=\"清除\"\n      @click.stop=\"clearModelValue\"\n    >\n      <Close />\n    </UIcon>\n    <span :class=\"suffixClass\" @click=\"handleSuffixClick\" v-if=\"$slots.suffix || suffix\">\n      {{ suffix }}\n      <slot name=\"suffix\"></slot>\n    </span>\n  </div>\n\n  <template v-else>\n    {{ generateModel || FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { useFocus, useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { Close } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { computed, getCurrentInstance, ref, shallowRef, nextTick } from 'vue'\n\nimport type { InputEmits, InputProps, _InputExposed } from '../../types'\nimport { UIcon } from '../icon'\n\ndefineOptions({\n  name: 'Input'\n})\n\nconst props = withDefaults(defineProps<InputProps>(), {\n  placeholder: '请输入',\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst emit = defineEmits<InputEmits>()\n\nconst model = defineModel<string>()\n\nconst inst = getCurrentInstance()\n\nconst cls = bem('input')\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst { focus, handleBlur, handleFocus } = useFocus((focused) => {\n  if (focused) {\n    emit('focus')\n  } else {\n    emit('blur')\n  }\n})\n\nconst inputClass = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('disabled', disabled.value),\n    bem.is('readonly', readonly.value),\n    bem.is('focus', focus.value)\n  ]\n})\n\nconst prefixClass = [cls.e('prefix'), bem.is('clickable', !!inst?.vnode.props?.['onPrefix:click'])]\n\nconst suffixClass = [cls.e('suffix'), bem.is('clickable', !!inst?.vnode.props?.['onSuffix:click'])]\n\nlet isComposing = false\n\nfunction handleCompositionStart() {\n  isComposing = true\n}\n\nfunction handleCompositionEnd(e: Event) {\n  isComposing = false\n  handleInput(e)\n}\n\nconst handleInput = (e: Event) => {\n  if (isComposing) return\n\n  const inputVal = (e.target as HTMLInputElement).value\n  emit('native:input', e)\n\n  const valid = props.pattern?.test(inputVal) ?? true\n\n  if (!valid) return\n  model.value = inputVal\n}\n\nconst handlePrefixClick = () => {\n  emit('prefix:click', model.value)\n}\n\nconst handleSuffixClick = () => {\n  emit('suffix:click', model.value)\n}\n\nconst clearModelValue = () => {\n  model.value = ''\n  emit('clear')\n}\n\nconst hovered = ref(false)\nconst handleMouseEnter = () => {\n  hovered.value = true\n}\n\nconst handleMouseLeave = () => {\n  hovered.value = false\n}\n\nconst handleChange = (e: Event) => {\n  const target = e.target as HTMLInputElement\n\n  const valid = props.pattern?.test(target.value) ?? true\n\n  if (valid) {\n    emit('change', target.value)\n  } else {\n    nextTick(() => {\n      target.value = model.value ?? ''\n    })\n  }\n}\n\nconst el = shallowRef<HTMLInputElement>()\n\nconst generateModel = computed(() => {\n  if (!model.value) return ''\n\n  return `${props.prefix ?? ''}${model.value}${props.suffix ?? ''}`\n})\n\ndefineExpose<_InputExposed>({\n  el\n})\n</script>\n"],"mappings":"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"}

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

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

package/dist/components/input/style.js

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

package/dist/components/input/style2.css

@@ -0,0 +1,115 @@
+@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-input {
+  vertical-align: middle;
+  line-height: 1;
+  box-shadow: inset 0 0 1px 1px var(--u-border-color);
+  transition: box-shadow 0.25s ease;
+  overflow: hidden;
+  width: 100%;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-input:hover {
+  box-shadow: inset 0 0 0px 1px var(--u-color-primary);
+}
+.u-input--small {
+  height: var(--u-form-component-height-small);
+  border-radius: var(--u-radius-small);
+  padding: 0 calc(var(--u-gap-small) / 2);
+}
+.u-input--small .u-input__native {
+  height: var(--u-form-component-height-small);
+  line-height: var(--u-form-component-height-small);
+}
+.u-input--default {
+  height: var(--u-form-component-height-default);
+  border-radius: var(--u-radius-default);
+  padding: 0 calc(var(--u-gap-default) / 2);
+}
+.u-input--default .u-input__native {
+  height: var(--u-form-component-height-default);
+  line-height: var(--u-form-component-height-default);
+}
+.u-input--large {
+  height: var(--u-form-component-height-large);
+  border-radius: var(--u-radius-large);
+  padding: 0 calc(var(--u-gap-large) / 2);
+}
+.u-input--large .u-input__native {
+  height: var(--u-form-component-height-large);
+  line-height: var(--u-form-component-height-large);
+}
+.u-input.is-focus {
+  box-shadow: inset 0 0 1px 1px var(--u-color-primary);
+}
+.u-input__native {
+  outline: none;
+  border: none;
+  background-color: transparent;
+  width: 100%;
+  flex-grow: 1;
+  color: var(--u-text-color-main);
+  font-size: 1em;
+  padding: 0;
+  font-family: var(--u-font-family);
+}
+.u-input__native:-webkit-autofill {
+  color: #fff !important;
+  background-color: transparent;
+}
+.u-input__native::placeholder {
+  color: var(--u-text-color-placeholder);
+}
+.u-input__prefix, .u-input__suffix {
+  font-size: 14px;
+  color: var(--u-text-color-main);
+  flex-shrink: 0;
+  min-width: 20px;
+  text-align: center;
+  height: 100%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-input__prefix.is-clickable, .u-input__suffix.is-clickable {
+  cursor: pointer;
+}
+.u-input__clear {
+  flex-shrink: 0;
+  width: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--u-text-color-main);
+}
+.u-input__clear.is-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+.u-input.is-disabled {
+  background-color: var(--u-color-disabled);
+  box-shadow: inset 0 0 1px 1px var(--u-border-color);
+}
+.u-input.is-disabled .u-input__native {
+  cursor: not-allowed;
+}

package/dist/components/layout/di.js

@@ -0,0 +1,6 @@
+//#region src/components/layout/di.ts
+const LayoutDIKey = Symbol("LayoutDIKey");
+//#endregion
+export { LayoutDIKey };
+
+//# sourceMappingURL=di.js.map

package/dist/components/layout/di.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"di.js","names":[],"sources":["../../../src/components/layout/di.ts"],"sourcesContent":["import type { BEM } from '@veltra/utils'\nimport type { InjectionKey } from 'vue'\n\ninterface LayoutContext {\n  cls: BEM<'layout'>\n}\n\nexport const LayoutDIKey: InjectionKey<LayoutContext> = Symbol('LayoutDIKey')\n"],"mappings":";AAOA,MAAa,cAA2C,OAAO,cAAc"}

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

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

package/dist/components/layout/layout-resizer.js

@@ -0,0 +1,76 @@
+import _sfc_main$1 from "../icon/icon.js";
+import { LayoutDIKey } from "./di.js";
+import { computed, createElementBlock, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, shallowReactive, shallowRef, unref, withCtx } from "vue";
+import { bem } from "@veltra/utils";
+import { useDrag } from "@veltra/compositions";
+import { Move } from "@veltra/icons/normal";
+//#region src/components/layout/layout-resizer.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "LayoutResizer",
+	__name: "layout-resizer",
+	props: {
+		horizontal: { type: Boolean },
+		offset: {}
+	},
+	emits: [
+		"resize",
+		"resize-start",
+		"resize-end"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { cls } = inject(LayoutDIKey);
+		const className = computed(() => {
+			return [cls.e("resizer"), bem.is("horizontal", props.horizontal)];
+		});
+		const resizerRef = shallowRef();
+		let offset = props.offset ?? 0;
+		const offsets = shallowReactive({
+			x: props.horizontal ? "0" : offset + "px",
+			y: props.horizontal ? offset + "px" : "0"
+		});
+		let currentOffset = 0;
+		useDrag({
+			target: resizerRef,
+			onDragStart() {
+				currentOffset = offset;
+				emit("resize-start");
+			},
+			onDrag({ x, y }) {
+				if (!props.horizontal) {
+					offset = currentOffset + x;
+					offsets.x = offset + "px";
+					emit("resize", x);
+				} else {
+					offset = currentOffset + y;
+					offsets.y = offset + "px";
+					emit("resize", y);
+				}
+			},
+			onDragEnd() {
+				emit("resize-end");
+			}
+		});
+		__expose({ update(_offset) {
+			offset = _offset;
+			if (!props.horizontal) offsets.x = offset + "px";
+			else offsets.y = offset + "px";
+		} });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(className.value),
+				style: normalizeStyle({ transform: `translate3d(${unref(offsets).x}, ${unref(offsets).y}, 0)` }),
+				ref_key: "resizerRef",
+				ref: resizerRef
+			}, [createVNode(unref(_sfc_main$1), { size: 10 }, {
+				default: withCtx(() => [createVNode(unref(Move))]),
+				_: 1
+			})], 6);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=layout-resizer.js.map

package/dist/components/layout/layout-resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-resizer.js","names":[],"sources":["../../../src/components/layout/layout-resizer.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"className\"\n    :style=\"{ transform: `translate3d(${offsets.x}, ${offsets.y}, 0)` }\"\n    ref=\"resizerRef\"\n  >\n    <u-icon :size=\"10\"> <Move /> </u-icon>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { Move } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, inject, shallowReactive, shallowRef } from 'vue'\n\nimport { UIcon } from '../icon'\nimport { LayoutDIKey } from './di'\n\ndefineOptions({\n  name: 'LayoutResizer'\n})\n\nconst props = defineProps<{\n  /** 是否横向 */\n  horizontal?: boolean\n  /** 默认偏移量 */\n  offset?: number\n}>()\n\nconst emit = defineEmits<{\n  (e: 'resize', offset: number): void\n  (e: 'resize-start'): void\n  (e: 'resize-end'): void\n}>()\n\nconst { cls } = inject(LayoutDIKey)!\n\nconst className = computed(() => {\n  return [cls.e('resizer'), bem.is('horizontal', props.horizontal)]\n})\n\nconst resizerRef = shallowRef<HTMLDivElement>()\n\nlet offset = props.offset ?? 0\nconst offsets = shallowReactive({\n  x: props.horizontal ? '0' : offset + 'px',\n  y: props.horizontal ? offset + 'px' : '0'\n})\nlet currentOffset = 0\nuseDrag({\n  target: resizerRef,\n  onDragStart() {\n    currentOffset = offset\n    emit('resize-start')\n  },\n  onDrag({ x, y }) {\n    if (!props.horizontal) {\n      offset = currentOffset + x\n      offsets.x = offset + 'px'\n      emit('resize', x)\n    } else {\n      offset = currentOffset + y\n      offsets.y = offset + 'px'\n      emit('resize', y)\n    }\n  },\n  onDragEnd() {\n    emit('resize-end')\n  }\n})\n\ndefineExpose({\n  update(_offset: number): void {\n    offset = _offset\n    if (!props.horizontal) {\n      offsets.x = offset + 'px'\n    } else {\n      offsets.y = offset + 'px'\n    }\n  }\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAMb,MAAM,EAAE,QAAQ,OAAO,YAAY;EAEnC,MAAM,YAAY,eAAe;AAC/B,UAAO,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,GAAG,cAAc,MAAM,WAAW,CAAA;IACjE;EAED,MAAM,aAAa,YAA2B;EAE9C,IAAI,SAAS,MAAM,UAAU;EAC7B,MAAM,UAAU,gBAAgB;GAC9B,GAAG,MAAM,aAAa,MAAM,SAAS;GACrC,GAAG,MAAM,aAAa,SAAS,OAAO;GACvC,CAAA;EACD,IAAI,gBAAgB;AACpB,UAAQ;GACN,QAAQ;GACR,cAAc;AACZ,oBAAgB;AAChB,SAAK,eAAc;;GAErB,OAAO,EAAE,GAAG,KAAK;AACf,QAAI,CAAC,MAAM,YAAY;AACrB,cAAS,gBAAgB;AACzB,aAAQ,IAAI,SAAS;AACrB,UAAK,UAAU,EAAC;WACX;AACL,cAAS,gBAAgB;AACzB,aAAQ,IAAI,SAAS;AACrB,UAAK,UAAU,EAAC;;;GAGpB,YAAY;AACV,SAAK,aAAY;;GAEpB,CAAA;AAED,WAAa,EACX,OAAO,SAAuB;AAC5B,YAAS;AACT,OAAI,CAAC,MAAM,WACT,SAAQ,IAAI,SAAS;OAErB,SAAQ,IAAI,SAAS;KAG1B,CAAA;;uBAhFC,mBAMM,OAAA;IALH,OAAK,eAAE,UAAA,MAAS;IAChB,OAAK,eAAA,EAAA,WAAA,eAA8B,MAAA,QAAO,CAAC,EAAC,IAAK,MAAA,QAAO,CAAC,EAAC,OAAA,CAAA;aACvD;IAAJ,KAAI;OAEJ,YAAsC,MAAA,YAAA,EAAA,EAA7B,MAAM,IAAE,EAAA;2BAAW,CAAR,YAAQ,MAAA,KAAA,CAAA,CAAA,CAAA"}

package/dist/components/layout/layout.js

@@ -0,0 +1,119 @@
+import { LayoutDIKey } from "./di.js";
+import _sfc_main$1 from "./layout-resizer.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, unref, watch, watchEffect, withCtx } from "vue";
+import { bem, withUnit } from "@veltra/utils";
+import { useResizeObserver } from "@veltra/compositions";
+//#region src/components/layout/layout.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "Layout",
+	__name: "layout",
+	props: {
+		tag: { default: "div" },
+		gap: {},
+		cols: {},
+		rows: {},
+		resizable: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const cls = bem("layout");
+		const templateCols = ref([]);
+		watchEffect(() => {
+			const { cols } = props;
+			if (!cols) {
+				templateCols.value = [];
+				return;
+			}
+			templateCols.value = typeof cols === "string" ? cols.split(" ") : cols;
+		});
+		const style = computed(() => {
+			const { rows, gap, resizable } = props;
+			return {
+				gridTemplateColumns: templateCols.value.join(" "),
+				gridTemplateRows: rows ? typeof rows === "string" ? rows : rows.join(" ") : "",
+				columnGap: resizable ? "10px" : withUnit(gap, "px")
+			};
+		});
+		const containerRef = shallowRef();
+		const resizerRefs = shallowRef([]);
+		const resizerOffsets = ref([]);
+		function getResizeOffsets() {
+			const container = containerRef.value;
+			if (!props.resizable || !container || !props.cols) return resizerOffsets.value = [];
+			resizerOffsets.value = templateCols.value.slice(0, -1).map((_, index) => {
+				const dom = container.children[index];
+				if (!dom) return 0;
+				return dom.offsetLeft + dom.offsetWidth;
+			});
+		}
+		watch([
+			() => props.resizable,
+			containerRef,
+			() => props.cols
+		], () => {
+			nextTick(() => {
+				getResizeOffsets();
+			});
+		});
+		useResizeObserver({
+			targets: containerRef,
+			onResize() {
+				getResizeOffsets();
+				resizerRefs.value.forEach((r, i) => {
+					r.update(resizerOffsets.value[i]);
+				});
+			}
+		});
+		let prevSize = "0";
+		let nextSize = "0";
+		const handleStartResize = (index) => {
+			prevSize = templateCols.value[index];
+			nextSize = templateCols.value[index + 1];
+			if (!prevSize.endsWith("px") && !nextSize.endsWith("px")) {
+				const rect = containerRef.value?.children[index + 1]?.getBoundingClientRect();
+				if (rect) nextSize = rect.width + "px";
+			}
+		};
+		const handleResize = (offset, index) => {
+			if (prevSize?.endsWith("px")) templateCols.value[index] = `${parseInt(prevSize) + offset}px`;
+			if (nextSize?.endsWith("px")) templateCols.value[index + 1] = `${parseInt(nextSize) - offset}px`;
+		};
+		provide(LayoutDIKey, { cls });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+				class: normalizeClass(unref(cls).b),
+				style: normalizeStyle(style.value),
+				ref_key: "containerRef",
+				ref: containerRef
+			}, {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "default"),
+					createCommentVNode(" 竖向调节 "),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(resizerOffsets.value, (offset, index) => {
+						return openBlock(), createBlock(_sfc_main$1, {
+							offset,
+							key: index,
+							ref_for: true,
+							ref_key: "resizerRefs",
+							ref: resizerRefs,
+							direction: "vertical",
+							onResize: ($event) => handleResize($event, index),
+							onResizeStart: ($event) => handleStartResize(index)
+						}, null, 8, [
+							"offset",
+							"onResize",
+							"onResizeStart"
+						]);
+					}), 128)),
+					createCommentVNode(" 横向调节 "),
+					createCommentVNode(" <ULayoutResizer\n      v-for=\"item in horizontalResizerList\"\n      :key=\"item\"\n      direction=\"horizontal\"\n    /> ")
+				]),
+				_: 3
+			}, 8, ["class", "style"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=layout.js.map

package/dist/components/layout/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","names":[],"sources":["../../../src/components/layout/layout.vue"],"sourcesContent":["<template>\n  <component :is=\"tag\" :class=\"cls.b\" :style=\"style\" ref=\"containerRef\">\n    <slot />\n\n    <!-- 竖向调节 -->\n    <ULayoutResizer\n      v-for=\"(offset, index) of resizerOffsets\"\n      :offset=\"offset\"\n      :key=\"index\"\n      ref=\"resizerRefs\"\n      direction=\"vertical\"\n      @resize=\"handleResize($event, index)\"\n      @resize-start=\"handleStartResize(index)\"\n    >\n    </ULayoutResizer>\n\n    <!-- 横向调节 -->\n    <!-- <ULayoutResizer\n      v-for=\"item in horizontalResizerList\"\n      :key=\"item\"\n      direction=\"horizontal\"\n    /> -->\n  </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useResizeObserver } from '@veltra/compositions'\nimport { bem, withUnit } from '@veltra/utils'\nimport {\n  computed,\n  shallowRef,\n  type CSSProperties,\n  provide,\n  watchEffect,\n  ref,\n  watch,\n  nextTick\n} from 'vue'\n\nimport type { LayoutProps } from '../../types'\nimport { LayoutDIKey } from './di'\nimport ULayoutResizer from './layout-resizer.vue'\n\ndefineOptions({\n  name: 'Layout'\n})\n\nconst props = withDefaults(defineProps<LayoutProps>(), {\n  tag: 'div'\n})\n\nconst cls = bem('layout')\n\nconst templateCols = ref<string[]>([])\n\nwatchEffect(() => {\n  const { cols } = props\n  if (!cols) {\n    templateCols.value = []\n    return\n  }\n  templateCols.value = typeof cols === 'string' ? cols.split(' ') : cols\n})\n\nconst style = computed<CSSProperties>(() => {\n  const { rows, gap, resizable } = props\n  return {\n    gridTemplateColumns: templateCols.value.join(' '),\n    gridTemplateRows: rows ? (typeof rows === 'string' ? rows : rows.join(' ')) : '',\n    columnGap: resizable ? '10px' : withUnit(gap, 'px')\n  }\n})\n\nconst containerRef = shallowRef<HTMLElement>()\nconst resizerRefs = shallowRef<InstanceType<typeof ULayoutResizer>[]>([])\n\nconst resizerOffsets = ref<number[]>([])\n\nfunction getResizeOffsets() {\n  const container = containerRef.value\n  if (!props.resizable || !container || !props.cols) {\n    return (resizerOffsets.value = [])\n  }\n\n  resizerOffsets.value = templateCols.value.slice(0, -1).map((_, index) => {\n    const dom = container.children[index] as HTMLElement\n    if (!dom) return 0\n    return dom.offsetLeft + dom.offsetWidth\n  })\n}\n\nwatch([() => props.resizable, containerRef, () => props.cols], () => {\n  nextTick(() => {\n    getResizeOffsets()\n  })\n})\n\nuseResizeObserver({\n  targets: containerRef,\n  onResize() {\n    getResizeOffsets()\n    resizerRefs.value.forEach((r, i) => {\n      r.update(resizerOffsets.value![i]!)\n    })\n  }\n})\n\n// const horizontalResizerList = []\n\n// const resizing = shallowRef(false)\n\nlet prevSize = '0'\nlet nextSize = '0'\nconst handleStartResize = (index: number) => {\n  prevSize = templateCols.value[index]!\n  nextSize = templateCols.value[index + 1]!\n\n  if (!prevSize.endsWith('px') && !nextSize.endsWith('px')) {\n    const rect = containerRef.value?.children[index + 1]?.getBoundingClientRect()\n    if (rect) {\n      nextSize = rect.width + 'px'\n    }\n  }\n  // resizing.value = true\n}\nconst handleResize = (offset: number, index: number) => {\n  if (prevSize?.endsWith('px')) {\n    templateCols.value[index] = `${parseInt(prevSize) + offset}px`\n  }\n  if (nextSize?.endsWith('px')) {\n    templateCols.value[index + 1] = `${parseInt(nextSize) - offset}px`\n  }\n}\n\nprovide(LayoutDIKey, {\n  cls\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;EA+CA,MAAM,QAAQ;EAId,MAAM,MAAM,IAAI,SAAQ;EAExB,MAAM,eAAe,IAAc,EAAE,CAAA;AAErC,oBAAkB;GAChB,MAAM,EAAE,SAAS;AACjB,OAAI,CAAC,MAAM;AACT,iBAAa,QAAQ,EAAC;AACtB;;AAEF,gBAAa,QAAQ,OAAO,SAAS,WAAW,KAAK,MAAM,IAAI,GAAG;IACnE;EAED,MAAM,QAAQ,eAA8B;GAC1C,MAAM,EAAE,MAAM,KAAK,cAAc;AACjC,UAAO;IACL,qBAAqB,aAAa,MAAM,KAAK,IAAI;IACjD,kBAAkB,OAAQ,OAAO,SAAS,WAAW,OAAO,KAAK,KAAK,IAAI,GAAI;IAC9E,WAAW,YAAY,SAAS,SAAS,KAAK,KAAI;IACpD;IACD;EAED,MAAM,eAAe,YAAwB;EAC7C,MAAM,cAAc,WAAkD,EAAE,CAAA;EAExE,MAAM,iBAAiB,IAAc,EAAE,CAAA;EAEvC,SAAS,mBAAmB;GAC1B,MAAM,YAAY,aAAa;AAC/B,OAAI,CAAC,MAAM,aAAa,CAAC,aAAa,CAAC,MAAM,KAC3C,QAAQ,eAAe,QAAQ,EAAE;AAGnC,kBAAe,QAAQ,aAAa,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,GAAG,UAAU;IACvE,MAAM,MAAM,UAAU,SAAS;AAC/B,QAAI,CAAC,IAAK,QAAO;AACjB,WAAO,IAAI,aAAa,IAAI;KAC7B;;AAGH,QAAM;SAAO,MAAM;GAAW;SAAoB,MAAM;GAAK,QAAQ;AACnE,kBAAe;AACb,sBAAiB;KAClB;IACF;AAED,oBAAkB;GAChB,SAAS;GACT,WAAW;AACT,sBAAiB;AACjB,gBAAY,MAAM,SAAS,GAAG,MAAM;AAClC,OAAE,OAAO,eAAe,MAAO,GAAG;MACnC;;GAEJ,CAAA;EAMD,IAAI,WAAW;EACf,IAAI,WAAW;EACf,MAAM,qBAAqB,UAAkB;AAC3C,cAAW,aAAa,MAAM;AAC9B,cAAW,aAAa,MAAM,QAAQ;AAEtC,OAAI,CAAC,SAAS,SAAS,KAAK,IAAI,CAAC,SAAS,SAAS,KAAK,EAAE;IACxD,MAAM,OAAO,aAAa,OAAO,SAAS,QAAQ,IAAI,uBAAsB;AAC5E,QAAI,KACF,YAAW,KAAK,QAAQ;;;EAK9B,MAAM,gBAAgB,QAAgB,UAAkB;AACtD,OAAI,UAAU,SAAS,KAAK,CAC1B,cAAa,MAAM,SAAS,GAAG,SAAS,SAAS,GAAG,OAAO;AAE7D,OAAI,UAAU,SAAS,KAAK,CAC1B,cAAa,MAAM,QAAQ,KAAK,GAAG,SAAS,SAAS,GAAG,OAAO;;AAInE,UAAQ,aAAa,EACnB,KACD,CAAA;;uBAvIC,YAqBY,wBArBI,QAAA,IAAG,EAAA;IAAG,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC;IAAG,OAAK,eAAE,MAAA,MAAK;aAAM;IAAJ,KAAI;;2BAC7C;KAAR,WAAQ,KAAA,QAAA,UAAA;KAER,mBAAA,SAAa;uBACb,mBASiB,UAAA,MAAA,WARW,eAAA,QAAlB,QAAQ,UAAK;0BADvB,YASiB,aAAA;OAPN;OACR,KAAK;;gBACF;OAAJ,KAAI;OACJ,WAAU;OACT,WAAM,WAAE,aAAa,QAAQ,MAAK;OAClC,gBAAY,WAAE,kBAAkB,MAAK;;;;;;;KAIxC,mBAAA,SAAa;KACb,mBAAA,gIAIM"}

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

@@ -0,0 +1,21 @@
+import { LayoutProps } from "../../types/layout.js";
+import * as _$vue from "vue";
+
+//#region src/components/layout/layout.vue.d.ts
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<LayoutProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<LayoutProps> & Readonly<{}>, {
+  tag: string;
+}, {}, {}, {}, 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=layout.vue.d.ts.map

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

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

package/dist/components/layout/style.js

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

package/dist/components/layout/style2.css

@@ -0,0 +1,34 @@
+@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-layout {
+  display: grid;
+  position: relative;
+}
+.u-layout__resizer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  cursor: col-resize;
+  background-color: var(--u-bg-color-middle);
+  height: 100%;
+  width: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+}

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

@@ -0,0 +1,2 @@
+import { _default } from "./list.vue.js";
+import { _default as _default$1 } from "./list-item.vue.js";

package/dist/components/list/list-item.js

@@ -0,0 +1,17 @@
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+import { bem } from "@veltra/utils";
+//#region src/components/list/list-item.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "ListItem",
+	__name: "list-item",
+	setup(__props) {
+		const cls = bem("list-item");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", { class: normalizeClass(unref(cls).b) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=list-item.js.map

package/dist/components/list/list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.js","names":[],"sources":["../../../src/components/list/list-item.vue"],"sourcesContent":["<template>\n  <li :class=\"cls.b\">\n    <slot />\n  </li>\n</template>\n\n<script lang=\"ts\" setup>\nimport { bem } from '@veltra/utils'\n\ndefineOptions({\n  name: 'ListItem'\n})\n\nconst cls = bem('list-item')\n</script>\n"],"mappings":";;;;;;;EAaA,MAAM,MAAM,IAAI,YAAW;;uBAZzB,mBAEK,MAAA,EAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,EAAA,EAAA,CACf,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}

package/dist/components/list/list-item.vue.d.ts

@@ -0,0 +1,18 @@
+import * as _$vue from "vue";
+
+//#region src/components/list/list-item.vue.d.ts
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<{}, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, 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=list-item.vue.d.ts.map