@veltra/desktop 1.0.0

package/dist/components/palette/palette.js

@@ -0,0 +1,128 @@
+import _sfc_main$1 from "../tip/tip.js";
+import { HEX2RGBA, HSV2RGB, RGB2HEX, RGB2HSV } from "./color-transform.js";
+import { PaletteDIKey } from "./di.js";
+import _sfc_main$2 from "./palette-alpha.js";
+import _sfc_main$3 from "./palette-color-switch.js";
+import _sfc_main$4 from "./palette-hue.js";
+import _sfc_main$5 from "./palette-sv.js";
+import { useHSV } from "./use-hsv.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, provide, shallowRef, unref, useModel, useTemplateRef, watch, withCtx } from "vue";
+import { bem } from "@veltra/utils";
+import { useFormComponent, useFormFallbackProps, useUpdateLock } from "@veltra/compositions";
+//#region src/components/palette/palette.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "Palette",
+	__name: "palette",
+	props: /* @__PURE__ */ mergeModels({
+		modelValue: {},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		tips: {},
+		span: {},
+		label: {},
+		field: {},
+		size: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const { formProps } = useFormComponent();
+		const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props]);
+		const cls = bem("palette");
+		const className = computed(() => {
+			return [
+				cls.b,
+				cls.m(size.value),
+				bem.is("no-color", !color.value)
+			];
+		});
+		const { HSV, alpha, ...rest } = useHSV();
+		const color = useModel(__props, "modelValue");
+		const RGB = computed(() => HSV2RGB(HSV));
+		const updater = useUpdateLock();
+		watch([alpha, RGB], ([alpha, RGB]) => {
+			color.value = `#${RGB2HEX(RGB, alpha)}`;
+		});
+		const visible = shallowRef(false);
+		function handleClear() {
+			updater.updateAndLock(() => {
+				color.value = "";
+				rest.updateAlpha(1);
+				visible.value = false;
+			});
+		}
+		const paletteSVRef = useTemplateRef("palette-sv");
+		const paletteHueRef = useTemplateRef("palette-hue");
+		const paletteAlphaRef = useTemplateRef("palette-alpha");
+		watch(color, (color) => {
+			if (!color) return;
+			updater.update(() => {
+				const { RGB, alpha } = HEX2RGBA(color);
+				const hsv = RGB2HSV(RGB);
+				rest.updateHue(hsv.h);
+				rest.updateSV({
+					s: hsv.s,
+					v: hsv.v
+				});
+				rest.updateAlpha(alpha);
+				paletteSVRef.value?.init();
+				paletteHueRef.value?.init();
+				paletteAlphaRef.value?.init();
+			});
+		}, { immediate: true });
+		provide(PaletteDIKey, {
+			cls,
+			HSV,
+			RGB,
+			alpha,
+			updater,
+			...rest
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(_sfc_main$1), {
+				trigger: "click",
+				class: normalizeClass(unref(cls).e("panel")),
+				visible: visible.value,
+				"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
+				disabled: unref(disabled) || unref(readonly)
+			}, {
+				content: withCtx(() => [
+					createCommentVNode(" 饱和度和亮度 "),
+					createVNode(_sfc_main$5, { ref: "palette-sv" }, null, 512),
+					createCommentVNode(" 色相 "),
+					createVNode(_sfc_main$4, { ref: "palette-hue" }, null, 512),
+					createCommentVNode(" 透明度 "),
+					createVNode(_sfc_main$2, { ref: "palette-alpha" }, null, 512),
+					createCommentVNode(" 颜色切换 "),
+					createVNode(_sfc_main$3, {
+						color: color.value,
+						"onUpdate:color": _cache[0] || (_cache[0] = ($event) => color.value = $event),
+						onClear: handleClear
+					}, null, 8, ["color"])
+				]),
+				default: withCtx(() => [createElementVNode("span", {
+					class: normalizeClass(className.value),
+					style: normalizeStyle({ backgroundColor: color.value })
+				}, null, 6)]),
+				_: 1
+			}, 8, [
+				"class",
+				"visible",
+				"disabled"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=palette.js.map

package/dist/components/palette/palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.js","names":[],"sources":["../../../src/components/palette/palette.vue"],"sourcesContent":["<template>\n  <u-tip\n    trigger=\"click\"\n    :class=\"cls.e('panel')\"\n    v-model:visible=\"visible\"\n    :disabled=\"disabled || readonly\"\n  >\n    <span :class=\"className\" :style=\"{ backgroundColor: color }\"> </span>\n\n    <template #content>\n      <!-- 饱和度和亮度 -->\n      <PaletteSV ref=\"palette-sv\" />\n\n      <!-- 色相 -->\n      <PaletteHue ref=\"palette-hue\" />\n\n      <!-- 透明度 -->\n      <PaletteAlpha ref=\"palette-alpha\" />\n\n      <!-- 颜色切换 -->\n      <PaletteColorSwitch v-model:color=\"color\" @clear=\"handleClear\" />\n    </template>\n  </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormComponent, useFormFallbackProps, useUpdateLock } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { PaletteProps } from '../../types'\nimport { UTip } from '../tip'\nimport { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'\nimport { PaletteDIKey } from './di'\nimport PaletteAlpha from './palette-alpha.vue'\nimport PaletteColorSwitch from './palette-color-switch.vue'\nimport PaletteHue from './palette-hue.vue'\nimport PaletteSV from './palette-sv.vue'\nimport { useHSV } from './use-hsv'\n\ndefineOptions({\n  name: 'Palette'\n})\n\nconst props = withDefaults(defineProps<PaletteProps>(), {\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst cls = bem('palette')\n\nconst className = computed(() => {\n  return [cls.b, cls.m(size.value), bem.is('no-color', !color.value)]\n})\n\nconst { HSV, alpha, ...rest } = useHSV()\n\nconst color = defineModel<string>()\nconst RGB = computed(() => HSV2RGB(HSV))\nconst updater = useUpdateLock()\n\nwatch([alpha, RGB], ([alpha, RGB]) => {\n  color.value = `#${RGB2HEX(RGB, alpha)}`\n})\n\nconst visible = shallowRef(false)\n\nfunction handleClear() {\n  updater.updateAndLock(() => {\n    color.value = ''\n    rest.updateAlpha(1)\n    visible.value = false\n  })\n}\n\nconst paletteSVRef = useTemplateRef('palette-sv')\nconst paletteHueRef = useTemplateRef('palette-hue')\nconst paletteAlphaRef = useTemplateRef('palette-alpha')\n\nwatch(\n  color,\n  (color) => {\n    if (!color) return\n\n    updater.update(() => {\n      const { RGB, alpha } = HEX2RGBA(color)\n      const hsv = RGB2HSV(RGB)\n      rest.updateHue(hsv.h)\n      rest.updateSV({ s: hsv.s, v: hsv.v })\n      rest.updateAlpha(alpha)\n\n      paletteSVRef.value?.init()\n      paletteHueRef.value?.init()\n      paletteAlphaRef.value?.init()\n    })\n  },\n  { immediate: true }\n)\n\nprovide(PaletteDIKey, {\n  cls,\n  HSV,\n  RGB,\n  alpha,\n  updater,\n  ...rest\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,MAAM,QAAQ;EAKd,MAAM,EAAE,cAAc,kBAAiB;EAEvC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,CAAA;EAElF,MAAM,MAAM,IAAI,UAAS;EAEzB,MAAM,YAAY,eAAe;AAC/B,UAAO;IAAC,IAAI;IAAG,IAAI,EAAE,KAAK,MAAM;IAAE,IAAI,GAAG,YAAY,CAAC,MAAM,MAAM;IAAA;IACnE;EAED,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS,QAAO;EAEvC,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAClC,MAAM,MAAM,eAAe,QAAQ,IAAI,CAAA;EACvC,MAAM,UAAU,eAAc;AAE9B,QAAM,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,SAAS;AACpC,SAAM,QAAQ,IAAI,QAAQ,KAAK,MAAM;IACtC;EAED,MAAM,UAAU,WAAW,MAAK;EAEhC,SAAS,cAAc;AACrB,WAAQ,oBAAoB;AAC1B,UAAM,QAAQ;AACd,SAAK,YAAY,EAAC;AAClB,YAAQ,QAAQ;KACjB;;EAGH,MAAM,eAAe,eAAe,aAAY;EAChD,MAAM,gBAAgB,eAAe,cAAa;EAClD,MAAM,kBAAkB,eAAe,gBAAe;AAEtD,QACE,QACC,UAAU;AACT,OAAI,CAAC,MAAO;AAEZ,WAAQ,aAAa;IACnB,MAAM,EAAE,KAAK,UAAU,SAAS,MAAK;IACrC,MAAM,MAAM,QAAQ,IAAG;AACvB,SAAK,UAAU,IAAI,EAAC;AACpB,SAAK,SAAS;KAAE,GAAG,IAAI;KAAG,GAAG,IAAI;KAAG,CAAA;AACpC,SAAK,YAAY,MAAK;AAEtB,iBAAa,OAAO,MAAK;AACzB,kBAAc,OAAO,MAAK;AAC1B,oBAAgB,OAAO,MAAK;KAC7B;KAEH,EAAE,WAAW,MAAK,CACpB;AAEA,UAAQ,cAAc;GACpB;GACA;GACA;GACA;GACA;GACA,GAAG;GACJ,CAAA;;uBA7GC,YAqBQ,MAAA,YAAA,EAAA;IApBN,SAAQ;IACP,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;IACL,SAAS,QAAA;8DAAA,QAAO,QAAA;IACvB,UAAU,MAAA,SAAQ,IAAI,MAAA,SAAQ;;IAIpB,SAAO,cACD;KAAf,mBAAA,WAAe;KACf,YAA8B,aAAA,EAAnB,KAAI,cAAY,EAAA,MAAA,IAAA;KAE3B,mBAAA,OAAW;KACX,YAAgC,aAAA,EAApB,KAAI,eAAa,EAAA,MAAA,IAAA;KAE7B,mBAAA,QAAY;KACZ,YAAoC,aAAA,EAAtB,KAAI,iBAAe,EAAA,MAAA,IAAA;KAEjC,mBAAA,SAAa;KACb,YAAiE,aAAA;MAArC,OAAO,MAAA;8DAAA,MAAK,QAAA;MAAG,SAAO;;;2BAbiB,CAArE,mBAAqE,QAAA;KAA9D,OAAK,eAAE,UAAA,MAAS;KAAG,OAAK,eAAA,EAAA,iBAAqB,MAAA,OAAK,CAAA"}

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

@@ -0,0 +1,21 @@
+import { PaletteProps } from "../../types/palette.js";
+import * as _$vue from "vue";
+
+//#region src/components/palette/palette.vue.d.ts
+type __VLS_Props = PaletteProps;
+type __VLS_ModelProps = {
+  modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (value: string | undefined) => any;
+}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+  readonly: boolean;
+  disabled: boolean;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };
+//# sourceMappingURL=palette.vue.d.ts.map

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

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

package/dist/components/palette/style.js

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

package/dist/components/palette/style2.css

@@ -0,0 +1,132 @@
+@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-palette {
+  border-radius: 50%;
+  display: inline-block;
+  border: var(--u-border);
+  cursor: pointer;
+}
+.u-palette--small {
+  width: var(--u-form-component-height-small);
+  height: var(--u-form-component-height-small);
+}
+.u-palette--default {
+  width: var(--u-form-component-height-default);
+  height: var(--u-form-component-height-default);
+}
+.u-palette--large {
+  width: var(--u-form-component-height-large);
+  height: var(--u-form-component-height-large);
+}
+.u-palette__panel {
+  width: 250px;
+}
+.u-palette__sv {
+  height: 150px;
+  position: relative;
+}
+.u-palette__sv-thumb {
+  width: 10px;
+  height: 10px;
+  top: -5px;
+  left: -5px;
+  position: absolute;
+  background-color: #fff;
+  border: var(--u-border);
+  border-color: #000;
+  border-radius: 50%;
+  pointer-events: none;
+}
+.u-palette__sv-s, .u-palette__sv-v {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.u-palette__sv-v {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
+}
+.u-palette__hue, .u-palette__alpha {
+  height: 12px;
+  margin: var(--u-gap-large) 0;
+  position: relative;
+  border: var(--u-border);
+}
+.u-palette__hue {
+  background: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0));
+}
+.u-palette.is-no-color {
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 0, 6px -6px, 0 6px;
+}
+.u-palette__alpha {
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 0, 6px -6px, 0 6px;
+}
+.u-palette__alpha-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.u-palette__hue-thumb, .u-palette__alpha-thumb {
+  height: 100%;
+  background-color: #000;
+  left: -3px;
+  width: 6px;
+  top: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.u-palette__color-switch {
+  gap: var(--u-gap-small);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-palette__clear-btn {
+  flex-shrink: 0;
+}
+.u-palette__color-type {
+  width: 60px;
+  cursor: pointer;
+  text-align: center;
+  flex-shrink: 0;
+  user-select: none;
+}
+.u-palette__color-rgba {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-palette__color-rgba .u-input__native {
+  text-align: center;
+}
+.u-palette__color-hexa {
+  flex-grow: 1;
+  text-align: center;
+}
+.u-palette__color-hexa .u-input__native {
+  text-align: center;
+}

package/dist/components/palette/use-hsv.js

@@ -0,0 +1,49 @@
+import { HUE2RGB } from "./color-transform.js";
+import { computed, reactive, readonly, ref } from "vue";
+import { n } from "@cat-kit/core";
+//#region src/components/palette/use-hsv.ts
+function useHSV() {
+	const HSV = reactive({
+		h: 0,
+		s: 1,
+		v: 1
+	});
+	/** 透明度 */
+	const alpha = ref(1);
+	/** 色调 RGB 值 */
+	const hueRGB = computed(() => HUE2RGB(HSV.h));
+	/**
+	* 更新色相值
+	* @param deg 色相值, 0-360
+	*/
+	function updateHue(deg) {
+		HSV.h = deg;
+	}
+	/**
+	* 更新饱和度和亮度
+	* @param sv { s: 饱和度, v: 亮度 }
+	*/
+	function updateSV({ s, v }) {
+		HSV.s = s;
+		HSV.v = v;
+	}
+	/**
+	* 更新调色盘的透明度
+	* @param a 透明度, 0-1
+	*/
+	function updateAlpha(a) {
+		alpha.value = +n(a).fixed({ maxPrecision: 2 });
+	}
+	return {
+		HSV: readonly(HSV),
+		alpha,
+		hueRGB,
+		updateHue,
+		updateSV,
+		updateAlpha
+	};
+}
+//#endregion
+export { useHSV };
+
+//# sourceMappingURL=use-hsv.js.map

package/dist/components/palette/use-hsv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hsv.js","names":[],"sources":["../../../src/components/palette/use-hsv.ts"],"sourcesContent":["import { n } from '@cat-kit/core'\nimport { reactive, readonly, ref, computed, type Ref, type ComputedRef } from 'vue'\n\nimport type { PaletteRGB } from '../../types'\nimport { HUE2RGB } from './color-transform'\n\ninterface UseHSVReturned {\n  HSV: { h: number; s: number; v: number }\n  alpha: Ref<number>\n  hueRGB: ComputedRef<PaletteRGB>\n  updateHue: (deg: number) => void\n  updateSV: ({ s, v }: { s: number; v: number }) => void\n  updateAlpha: (a: number) => void\n}\n\nexport function useHSV(): UseHSVReturned {\n  const HSV = reactive({ h: 0, s: 1, v: 1 })\n  /** 透明度 */\n  const alpha = ref(1)\n  /** 色调 RGB 值 */\n  const hueRGB = computed(() => HUE2RGB(HSV.h))\n\n  /**\n   * 更新色相值\n   * @param deg 色相值, 0-360\n   */\n  function updateHue(deg: number) {\n    HSV.h = deg\n  }\n\n  /**\n   * 更新饱和度和亮度\n   * @param sv { s: 饱和度, v: 亮度 }\n   */\n  function updateSV({ s, v }: { s: number; v: number }) {\n    HSV.s = s\n    HSV.v = v\n  }\n\n  /**\n   * 更新调色盘的透明度\n   * @param a 透明度, 0-1\n   */\n  function updateAlpha(a: number) {\n    alpha.value = +n(a).fixed({ maxPrecision: 2 })\n  }\n\n  return {\n    HSV: readonly(HSV),\n    alpha,\n    hueRGB,\n\n    updateHue,\n    updateSV,\n    updateAlpha\n  }\n}\n"],"mappings":";;;;AAeA,SAAgB,SAAyB;CACvC,MAAM,MAAM,SAAS;EAAE,GAAG;EAAG,GAAG;EAAG,GAAG;EAAG,CAAC;;CAE1C,MAAM,QAAQ,IAAI,EAAE;;CAEpB,MAAM,SAAS,eAAe,QAAQ,IAAI,EAAE,CAAC;;;;;CAM7C,SAAS,UAAU,KAAa;AAC9B,MAAI,IAAI;;;;;;CAOV,SAAS,SAAS,EAAE,GAAG,KAA+B;AACpD,MAAI,IAAI;AACR,MAAI,IAAI;;;;;;CAOV,SAAS,YAAY,GAAW;AAC9B,QAAM,QAAQ,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,cAAc,GAAG,CAAC;;AAGhD,QAAO;EACL,KAAK,SAAS,IAAI;EAClB;EACA;EAEA;EACA;EACA;EACD"}

package/dist/components/password-input/index.d.ts

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

package/dist/components/password-input/password-input.js

@@ -0,0 +1,136 @@
+import _sfc_main$1 from "../icon/icon.js";
+import input_default from "../input/input.js";
+import { Transition, computed, createBlock, createSlots, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, renderSlot, shallowRef, unref, useModel, useSlots, withCtx } from "vue";
+import { o } from "@cat-kit/core";
+import { bem } from "@veltra/utils";
+import { useFormComponent, useFormFallbackProps } from "@veltra/compositions";
+import { Hide, View } from "@veltra/icons/normal";
+//#region src/components/password-input/password-input.vue
+const passwordChar = "●";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "PasswordInput",
+	__name: "password-input",
+	props: /* @__PURE__ */ mergeModels({
+		modelValue: {},
+		placeholder: {},
+		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: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const { formProps } = useFormComponent();
+		const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+			size: "default",
+			disabled: false,
+			readonly: false
+		});
+		const inputProps = computed(() => {
+			return o(props).pick([
+				"clearable",
+				"disabled",
+				"placeholder",
+				"size"
+			]);
+		});
+		const cls = bem("password-input");
+		const model = useModel(__props, "modelValue");
+		const handleUpdatePwd = (e) => {
+			const target = e.target;
+			const val = target.value;
+			if (!val) {
+				model.value = val;
+				return;
+			}
+			if (!model.value) {
+				model.value = val;
+				return;
+			}
+			const pointIndex = target.selectionStart;
+			let inputChar = pointIndex === 0 ? "" : val[pointIndex - 1];
+			if (inputChar === passwordChar) inputChar = "";
+			const rightLen = val.length - pointIndex;
+			const leftLen = inputChar === "" ? pointIndex : pointIndex - 1;
+			const leftVal = model.value.slice(0, leftLen);
+			const rightVal = rightLen === 0 ? "" : model.value.slice(-rightLen);
+			model.value = leftVal + inputChar + rightVal;
+			nextTick(() => {
+				target.selectionStart = pointIndex;
+				target.selectionEnd = pointIndex;
+			});
+		};
+		const handleClear = () => {
+			model.value = "";
+		};
+		const pwdVisible = shallowRef(false);
+		const passwordText = computed(() => {
+			if (pwdVisible.value) return model.value;
+			return model.value ? passwordChar.repeat(model.value.length) : "";
+		});
+		const toggleVisible = () => {
+			pwdVisible.value = !pwdVisible.value;
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(input_default), mergeProps({
+				class: unref(cls).b,
+				"model-value": passwordText.value
+			}, inputProps.value, {
+				size: unref(size),
+				readonly: unref(readonly),
+				disabled: unref(disabled),
+				"onNative:input": handleUpdatePwd,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => !$event && handleClear()),
+				"onSuffix:click": toggleVisible
+			}), createSlots({
+				suffix: withCtx(() => [createVNode(Transition, { name: "fade" }, {
+					default: withCtx(() => [createVNode(unref(_sfc_main$1), {
+						class: normalizeClass(unref(cls).e("visibility-toggle")),
+						size: 18
+					}, {
+						default: withCtx(() => [pwdVisible.value ? (openBlock(), createBlock(unref(Hide), { key: 0 })) : (openBlock(), createBlock(unref(View), { key: 1 }))]),
+						_: 1
+					}, 8, ["class"])]),
+					_: 1
+				})]),
+				_: 2
+			}, [slots.prefix ? {
+				name: "prefix",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "prefix")]),
+				key: "0"
+			} : void 0]), 1040, [
+				"class",
+				"model-value",
+				"size",
+				"readonly",
+				"disabled"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=password-input.js.map

package/dist/components/password-input/password-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-input.vue"],"sourcesContent":["<template>\n  <u-input\n    :class=\"cls.b\"\n    :model-value=\"passwordText\"\n    v-bind=\"inputProps\"\n    :size=\"size\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    @native:input=\"handleUpdatePwd\"\n    @update:model-value=\"!$event && handleClear()\"\n    @suffix:click=\"toggleVisible\"\n  >\n    <template #suffix>\n      <Transition name=\"fade\">\n        <UIcon :class=\"cls.e('visibility-toggle')\" :size=\"18\">\n          <Hide v-if=\"pwdVisible\" />\n          <View v-else />\n        </UIcon>\n      </Transition>\n    </template>\n\n    <template #prefix v-if=\"slots.prefix\">\n      <slot name=\"prefix\" />\n    </template>\n  </u-input>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { Hide, View } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, nextTick, shallowRef } from 'vue'\n\nimport type { PasswordInputProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({\n  name: 'PasswordInput'\n})\n\nconst props = withDefaults(defineProps<PasswordInputProps>(), {\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst slots = defineSlots<{\n  prefix?: () => any\n}>()\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false,\n  readonly: false\n})\n\nconst inputProps = computed(() => {\n  return o(props).pick(['clearable', 'disabled', 'placeholder', 'size'])\n})\n\nconst cls = bem('password-input')\n\nconst model = defineModel<string>()\n\nconst passwordChar = '●'\n\nconst handleUpdatePwd = (e: Event): void => {\n  const target = e.target as HTMLInputElement\n  const val = target.value\n  if (!val) {\n    model.value = val\n    return\n  }\n\n  // 字符从无到有\n  if (!model.value) {\n    model.value = val\n    return\n  }\n\n  const pointIndex = target.selectionStart!\n  let inputChar = pointIndex === 0 ? '' : val[pointIndex - 1]!\n  if (inputChar === passwordChar) inputChar = ''\n\n  // 光标右侧字符数量（当前字符长度减去光标位置）\n  const rightLen = val.length - pointIndex\n  // 光标左侧字符数量 （当光标前的字符是刚刚输入的，则为这个字符前的所有的字符，否则为光标前的所有赐福）\n  const leftLen = inputChar === '' ? pointIndex : pointIndex - 1\n\n  const leftVal = model.value.slice(0, leftLen)\n  const rightVal = rightLen === 0 ? '' : model.value.slice(-rightLen)\n\n  model.value = leftVal + inputChar + rightVal\n\n  nextTick(() => {\n    target.selectionStart = pointIndex\n    target.selectionEnd = pointIndex\n  })\n}\n\nconst handleClear = (): void => {\n  model.value = ''\n}\n\nconst pwdVisible = shallowRef(false)\n\nconst passwordText = computed<string | undefined>(() => {\n  if (pwdVisible.value) return model.value\n  return model.value ? passwordChar.repeat(model.value.length) : ''\n})\n\nconst toggleVisible = () => {\n  pwdVisible.value = !pwdVisible.value\n}\n</script>\n"],"mappings":";;;;;;;;AAoEA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA1BrB,MAAM,QAAQ;EAMd,MAAM,QAAQ,UAAA;EAId,MAAM,EAAE,cAAc,kBAAiB;EAEvC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE;GAClF,MAAM;GACN,UAAU;GACV,UAAU;GACX,CAAA;EAED,MAAM,aAAa,eAAe;AAChC,UAAO,EAAE,MAAM,CAAC,KAAK;IAAC;IAAa;IAAY;IAAe;IAAO,CAAA;IACtE;EAED,MAAM,MAAM,IAAI,iBAAgB;EAEhC,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAIlC,MAAM,mBAAmB,MAAmB;GAC1C,MAAM,SAAS,EAAE;GACjB,MAAM,MAAM,OAAO;AACnB,OAAI,CAAC,KAAK;AACR,UAAM,QAAQ;AACd;;AAIF,OAAI,CAAC,MAAM,OAAO;AAChB,UAAM,QAAQ;AACd;;GAGF,MAAM,aAAa,OAAO;GAC1B,IAAI,YAAY,eAAe,IAAI,KAAK,IAAI,aAAa;AACzD,OAAI,cAAc,aAAc,aAAY;GAG5C,MAAM,WAAW,IAAI,SAAS;GAE9B,MAAM,UAAU,cAAc,KAAK,aAAa,aAAa;GAE7D,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,QAAO;GAC5C,MAAM,WAAW,aAAa,IAAI,KAAK,MAAM,MAAM,MAAM,CAAC,SAAQ;AAElE,SAAM,QAAQ,UAAU,YAAY;AAEpC,kBAAe;AACb,WAAO,iBAAiB;AACxB,WAAO,eAAe;KACvB;;EAGH,MAAM,oBAA0B;AAC9B,SAAM,QAAQ;;EAGhB,MAAM,aAAa,WAAW,MAAK;EAEnC,MAAM,eAAe,eAAmC;AACtD,OAAI,WAAW,MAAO,QAAO,MAAM;AACnC,UAAO,MAAM,QAAQ,aAAa,OAAO,MAAM,MAAM,OAAO,GAAG;IAChE;EAED,MAAM,sBAAsB;AAC1B,cAAW,QAAQ,CAAC,WAAW;;;uBAnH/B,YAuBU,MAAA,cAAA,EAvBV,WAuBU;IAtBP,OAAO,MAAA,IAAG,CAAC;IACX,eAAa,aAAA;MACN,WAAA,OAAU;IACjB,MAAM,MAAA,KAAI;IACV,UAAU,MAAA,SAAQ;IAClB,UAAU,MAAA,SAAQ;IAClB,kBAAc;IACd,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAA,CAAG,UAAU,aAAW;IAC1C,kBAAc;;IAEJ,QAAM,cAMF,CALb,YAKa,YAAA,EALD,MAAK,QAAM,EAAA;4BAIb,CAHR,YAGQ,MAAA,YAAA,EAAA;MAHA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,oBAAA,CAAA;MAAwB,MAAM;;6BACtB,CAAd,WAAA,SAAA,WAAA,EAAZ,YAA0B,MAAA,KAAA,EAAA,EAAA,KAAA,GAAA,CAAA,KAAA,WAAA,EAC1B,YAAe,MAAA,KAAA,EAAA,EAAA,KAAA,GAAA,CAAA,EAAA,CAAA;;;;;;OAKG,MAAM,SAAA;UAAnB;sBACa,CAAtB,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/components/password-input/password-input.vue.d.ts

@@ -0,0 +1,31 @@
+import { PasswordInputProps } from "../../types/password-input.js";
+import * as _$vue from "vue";
+
+//#region src/components/password-input/password-input.vue.d.ts
+type __VLS_Props = PasswordInputProps;
+type __VLS_Slots = {
+  prefix?: () => 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;
+}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+  readonly: boolean;
+  disabled: boolean;
+  clearable: boolean;
+}, {}, {}, {}, 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=password-input.vue.d.ts.map

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

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

package/dist/components/password-input/style.js

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

package/dist/components/password-input/style2.css

@@ -0,0 +1,17 @@
+@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 选择器策略一致 */

package/dist/components/pop-confirm/index.d.ts

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

package/dist/components/pop-confirm/pop-confirm.js

@@ -0,0 +1,91 @@
+import _sfc_main$1 from "../icon/icon.js";
+import _sfc_main$2 from "../button/button.js";
+import _sfc_main$3 from "../tip/tip.js";
+import { createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { bem } from "@veltra/utils";
+import { useFormComponent, useFormFallbackProps } from "@veltra/compositions";
+import { QuestionFilled } from "@veltra/icons/normal";
+//#region src/components/pop-confirm/pop-confirm.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "PopConfirm",
+	__name: "pop-confirm",
+	props: {
+		title: {},
+		icon: { default: QuestionFilled },
+		iconColor: { default: "#ffc107" },
+		confirmText: { default: "确认" },
+		cancelText: { default: "取消" },
+		alignment: {},
+		direction: { default: "bottom" },
+		trigger: { default: "click" },
+		contentTag: {}
+	},
+	emits: ["confirm", "cancel"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const cls = bem("pop-confirm");
+		const visible = ref(false);
+		const { formProps } = useFormComponent();
+		const { size } = useFormFallbackProps([formProps ?? {}], { size: "default" });
+		const confirm = () => {
+			emit("confirm");
+			visible.value = false;
+		};
+		const cancel = () => {
+			emit("cancel");
+			visible.value = false;
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(_sfc_main$3), {
+				class: normalizeClass(unref(cls).b),
+				trigger: __props.trigger,
+				direction: __props.direction,
+				alignment: __props.alignment,
+				"content-tag": __props.contentTag,
+				visible: visible.value,
+				"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => visible.value = $event)
+			}, {
+				content: withCtx(() => [createElementVNode("div", { class: normalizeClass([unref(cls).m("main"), unref(cls).m(unref(size))]) }, [createVNode(unref(_sfc_main$1), {
+					size: 16,
+					class: normalizeClass(unref(cls).m("icon")),
+					style: normalizeStyle({ color: __props.iconColor })
+				}, {
+					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(__props.icon)))]),
+					_: 1
+				}, 8, ["class", "style"]), createElementVNode("span", null, toDisplayString(__props.title), 1)], 2), createElementVNode("div", { class: normalizeClass(unref(cls).m("action")) }, [
+					createVNode(unref(_sfc_main$2), {
+						size: "small",
+						onClick: cancel,
+						type: "primary",
+						text: ""
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.cancelText), 1)]),
+						_: 1
+					}),
+					_cache[1] || (_cache[1] = createTextVNode(" \xA0 ", -1)),
+					createVNode(unref(_sfc_main$2), {
+						size: "small",
+						type: "primary",
+						onClick: confirm
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.confirmText), 1)]),
+						_: 1
+					})
+				], 2)]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "reference")]),
+				_: 3
+			}, 8, [
+				"class",
+				"trigger",
+				"direction",
+				"alignment",
+				"content-tag",
+				"visible"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=pop-confirm.js.map

package/dist/components/pop-confirm/pop-confirm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pop-confirm.js","names":[],"sources":["../../../src/components/pop-confirm/pop-confirm.vue"],"sourcesContent":["<template>\n  <u-tip\n    :class=\"cls.b\"\n    :trigger=\"trigger\"\n    :direction=\"direction\"\n    :alignment=\"alignment\"\n    :content-tag=\"contentTag\"\n    v-model:visible=\"visible\"\n  >\n    <slot name=\"reference\" />\n\n    <template #content>\n      <div :class=\"[cls.m('main'), cls.m(size)]\">\n        <u-icon :size=\"16\" :class=\"cls.m('icon')\" :style=\"{ color: iconColor }\">\n          <component :is=\"icon\" />\n        </u-icon>\n        <span>\n          {{ title }}\n        </span>\n      </div>\n      <div :class=\"cls.m('action')\">\n        <u-button size=\"small\" @click=\"cancel\" type=\"primary\" text>\n          {{ cancelText }}\n        </u-button>\n        &nbsp;\n        <u-button size=\"small\" type=\"primary\" @click=\"confirm\">\n          {{ confirmText }}\n        </u-button>\n      </div>\n    </template>\n  </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { QuestionFilled } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { ref } from 'vue'\n\nimport type { PopConfirmProps, PopConfirmEmits } from '../../types'\nimport { UButton } from '../button'\nimport { UIcon } from '../icon'\nimport { UTip } from '../tip'\n\ndefineOptions({\n  name: 'PopConfirm'\n})\n\nconst emit = defineEmits<PopConfirmEmits>()\n\nwithDefaults(defineProps<PopConfirmProps>(), {\n  trigger: 'click',\n  icon: QuestionFilled,\n  direction: 'bottom',\n  iconColor: '#ffc107',\n  confirmText: '确认',\n  cancelText: '取消'\n})\n\nconst cls = bem('pop-confirm')\n\nconst visible = ref(false)\n\nconst { formProps } = useFormComponent()\n\nconst { size } = useFormFallbackProps([formProps ?? {}], {\n  size: 'default'\n})\n\nconst confirm = () => {\n  emit('confirm')\n  visible.value = false\n}\n\nconst cancel = () => {\n  emit('cancel')\n  visible.value = false\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAgDA,MAAM,OAAO;EAWb,MAAM,MAAM,IAAI,cAAa;EAE7B,MAAM,UAAU,IAAI,MAAK;EAEzB,MAAM,EAAE,cAAc,kBAAiB;EAEvC,MAAM,EAAE,SAAS,qBAAqB,CAAC,aAAa,EAAE,CAAC,EAAE,EACvD,MAAM,WACP,CAAA;EAED,MAAM,gBAAgB;AACpB,QAAK,UAAS;AACd,WAAQ,QAAQ;;EAGlB,MAAM,eAAe;AACnB,QAAK,SAAQ;AACb,WAAQ,QAAQ;;;uBA3EhB,YA6BQ,MAAA,YAAA,EAAA;IA5BL,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC;IACZ,SAAS,QAAA;IACT,WAAW,QAAA;IACX,WAAW,QAAA;IACX,eAAa,QAAA;IACN,SAAS,QAAA;8DAAA,QAAO,QAAA;;IAIb,SAAO,cAQV,CAPN,mBAOM,OAAA,EAPA,OAAK,eAAA,CAAG,MAAA,IAAG,CAAC,EAAC,OAAA,EAAU,MAAA,IAAG,CAAC,EAAE,MAAA,KAAI,CAAA,CAAA,CAAA,EAAA,EAAA,CACrC,YAES,MAAA,YAAA,EAAA;KAFA,MAAM;KAAK,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,OAAA,CAAA;KAAW,OAAK,eAAA,EAAA,OAAW,QAAA,WAAS,CAAA;;4BAC1C,EAAA,WAAA,EAAxB,YAAwB,wBAAR,QAAA,KAAI,CAAA,EAAA,CAAA;;+BAEtB,mBAEO,QAAA,MAAA,gBADF,QAAA,MAAK,EAAA,EAAA,CAAA,EAAA,EAAA,EAGZ,mBAQM,OAAA,EARA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA,EAAA,EAAA;KAChB,YAEW,MAAA,YAAA,EAAA;MAFD,MAAK;MAAS,SAAO;MAAQ,MAAK;MAAU,MAAA;;6BACpC,CAAA,gBAAA,gBAAb,QAAA,WAAU,EAAA,EAAA,CAAA,CAAA;;;+CACJ,UAEX,GAAA;KAAA,YAEW,MAAA,YAAA,EAAA;MAFD,MAAK;MAAQ,MAAK;MAAW,SAAO;;6BAC3B,CAAA,gBAAA,gBAAd,QAAA,YAAW,EAAA,EAAA,CAAA,CAAA;;;;2BAjBK,CAAzB,WAAyB,KAAA,QAAA,YAAA,CAAA,CAAA"}