@veltra/desktop 1.0.0

package/dist/components/steps/steps.js

@@ -0,0 +1,146 @@
+import _sfc_main$1 from "../icon/icon.js";
+import NodeRender from "../node-render/node-render.js";
+import _sfc_main$2 from "../tip/tip.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, useSlots, useTemplateRef, watch, withCtx } from "vue";
+import { n, o } from "@cat-kit/core";
+import { bem } from "@veltra/utils";
+import { useFallbackProps } from "@veltra/compositions";
+import { Check } from "@veltra/icons/normal";
+//#region src/components/steps/steps.vue
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["onMouseenter"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "Steps",
+	__name: "steps",
+	props: {
+		current: {},
+		size: {},
+		items: {},
+		labelKey: { default: "label" },
+		currentKey: {},
+		direction: { default: "horizontal" },
+		alignCenter: { type: Boolean },
+		currentStepType: {},
+		finishedStepType: { default: "success" }
+	},
+	emits: ["update:current", "item-click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const cls = bem("steps");
+		const { size } = useFallbackProps([props], { size: "default" });
+		const className = computed(() => {
+			const { direction, currentStepType, finishedStepType } = props;
+			const ret = [
+				cls.b,
+				bem.is(direction),
+				cls.m(size.value),
+				bem.is("align-center", props.alignCenter),
+				cls.em("finished", finishedStepType)
+			];
+			currentStepType && ret.push(cls.em("current", currentStepType));
+			return ret;
+		});
+		const stepsRef = useTemplateRef("steps");
+		const currentToIndexMap = computed(() => {
+			const { currentKey, items } = props;
+			if (!currentKey) return void 0;
+			return items.reduce((acc, item, index) => {
+				acc[o(item).get(currentKey)] = index;
+				return acc;
+			}, {});
+		});
+		/** 当前索引 */
+		const currentIndex = computed(() => {
+			const { currentKey, current } = props;
+			if (current === void 0) return void 0;
+			if (currentKey) return currentToIndexMap.value?.[current];
+			if (typeof current !== "number") return void 0;
+			return n(current).range(0, props.items.length - 1);
+		});
+		watch(currentIndex, (index) => {
+			if (index === void 0 || props.direction === "vertical") return;
+			const step = stepsRef.value?.children[index];
+			if (step) step.scrollIntoView({
+				behavior: "smooth",
+				block: "center"
+			});
+		});
+		function handleStepClick(item, index) {
+			emit("item-click", item, index);
+			emit("update:current", props.currentKey ? o(item).get(props.currentKey) : index);
+		}
+		const tipVisible = shallowRef(false);
+		const tipTriggerDom = shallowRef();
+		const tipContent = shallowRef();
+		function handleStepMouseenter(event, item, index) {
+			if (!slots.tip) return;
+			tipTriggerDom.value = event.target;
+			tipVisible.value = true;
+			tipContent.value = slots.tip?.({
+				item,
+				index
+			});
+		}
+		let timer = void 0;
+		function closeTip() {
+			timer = setTimeout(() => {
+				tipVisible.value = false;
+				tipContent.value = void 0;
+				tipTriggerDom.value = void 0;
+			}, 250);
+		}
+		function handleTipUpdateVisible(visible) {
+			visible && clearTimeout(timer);
+		}
+		function handleStepMouseleave() {
+			if (!slots.tip) return;
+			closeTip();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("ol", {
+				class: normalizeClass(className.value),
+				ref: "steps"
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+				return openBlock(), createElementBlock("li", {
+					class: normalizeClass([
+						unref(cls).e("item"),
+						unref(bem).is("current", index === currentIndex.value),
+						unref(bem).is("finished", currentIndex.value === void 0 || index < currentIndex.value)
+					]),
+					onClick: ($event) => handleStepClick(item, index)
+				}, [createElementVNode("div", { class: normalizeClass(unref(cls).e("node")) }, [index !== __props.items.length - 1 ? (openBlock(), createElementBlock("i", {
+					key: 0,
+					class: normalizeClass(unref(cls).e("link"))
+				}, null, 2)) : createCommentVNode("v-if", true), createElementVNode("span", {
+					class: normalizeClass(unref(cls).e("icon")),
+					onMouseenter: ($event) => handleStepMouseenter($event, item, index),
+					onMouseleave: handleStepMouseleave
+				}, [renderSlot(_ctx.$slots, "icon", {
+					item,
+					index
+				}, () => [currentIndex.value === void 0 || index < currentIndex.value ? (openBlock(), createBlock(unref(_sfc_main$1), { key: 0 }, {
+					default: withCtx(() => [createVNode(unref(Check))]),
+					_: 1
+				})) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(index + 1), 1)], 64))])], 42, _hoisted_2)], 2), createElementVNode("div", { class: normalizeClass(unref(cls).e("content")) }, [renderSlot(_ctx.$slots, "content", {
+					item,
+					index
+				}, () => [createTextVNode(toDisplayString(unref(o)(item).get(__props.labelKey)), 1)])], 2)], 10, _hoisted_1);
+			}), 256)), slots.tip ? (openBlock(), createBlock(unref(_sfc_main$2), {
+				key: 0,
+				ref: "tip",
+				"trigger-dom": tipTriggerDom.value,
+				visible: tipVisible.value,
+				"onUpdate:visible": [_cache[0] || (_cache[0] = ($event) => tipVisible.value = $event), handleTipUpdateVisible]
+			}, {
+				content: withCtx(() => [createVNode(unref(NodeRender), { content: tipContent.value }, null, 8, ["content"])]),
+				_: 1
+			}, 8, ["trigger-dom", "visible"])) : createCommentVNode("v-if", true)], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=steps.js.map

package/dist/components/steps/steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps.js","names":[],"sources":["../../../src/components/steps/steps.vue"],"sourcesContent":["<template>\n  <ol :class=\"className\" ref=\"steps\">\n    <li\n      v-for=\"(item, index) in items\"\n      :class=\"[\n        cls.e('item'),\n        bem.is('current', index === currentIndex),\n        bem.is('finished', currentIndex === undefined || index < currentIndex)\n      ]\"\n      @click=\"handleStepClick(item, index)\"\n    >\n      <div :class=\"cls.e('node')\">\n        <i :class=\"cls.e('link')\" v-if=\"index !== items.length - 1\"></i>\n\n        <span\n          :class=\"cls.e('icon')\"\n          @mouseenter=\"handleStepMouseenter($event, item, index)\"\n          @mouseleave=\"handleStepMouseleave\"\n        >\n          <slot name=\"icon\" :item=\"item\" :index=\"index\">\n            <UIcon v-if=\"currentIndex === undefined || index < currentIndex\">\n              <Check />\n            </UIcon>\n\n            <template v-else>\n              {{ index + 1 }}\n            </template>\n          </slot>\n        </span>\n      </div>\n\n      <div :class=\"cls.e('content')\">\n        <slot name=\"content\" :item=\"item\" :index=\"index\">\n          {{ o(item).get(labelKey) }}\n        </slot>\n      </div>\n    </li>\n\n    <u-tip\n      v-if=\"slots.tip\"\n      ref=\"tip\"\n      :trigger-dom=\"tipTriggerDom\"\n      v-model:visible=\"tipVisible\"\n      @update:visible=\"handleTipUpdateVisible\"\n    >\n      <template #content>\n        <UNodeRender :content=\"tipContent\" />\n      </template>\n    </u-tip>\n  </ol>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n, o } from '@cat-kit/core'\nimport { useFallbackProps } from '@veltra/compositions'\nimport { Check } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { StepsProps, StepsEmits, ComponentSize, StepsSlotScope } from '../../types'\nimport { UIcon } from '../icon'\nimport { UNodeRender } from '../node-render'\nimport { UTip } from '../tip'\n\ndefineOptions({\n  name: 'Steps'\n})\n\nconst props = withDefaults(defineProps<StepsProps>(), {\n  direction: 'horizontal',\n  finishedStepType: 'success',\n  labelKey: 'label'\n})\n\nconst emit = defineEmits<StepsEmits>()\n\nconst slots = defineSlots<{\n  icon?: (scope: StepsSlotScope) => any\n  content?: (scope: StepsSlotScope) => any\n  tip?: (scope: StepsSlotScope) => any\n}>()\n\nconst cls = bem('steps')\n\nconst { size } = useFallbackProps([props], {\n  size: 'default' as ComponentSize\n})\n\nconst className = computed(() => {\n  const { direction, currentStepType, finishedStepType } = props\n  const ret: string[] = [\n    cls.b,\n    bem.is(direction),\n    cls.m(size.value),\n    bem.is('align-center', props.alignCenter),\n    cls.em('finished', finishedStepType)\n  ]\n  currentStepType && ret.push(cls.em('current', currentStepType))\n  return ret\n})\n\nconst stepsRef = useTemplateRef('steps')\n\nconst currentToIndexMap = computed<Record<string, number> | undefined>(() => {\n  const { currentKey, items } = props\n  if (!currentKey) return undefined\n  return items.reduce(\n    (acc, item, index) => {\n      acc[o(item).get(currentKey)] = index\n      return acc\n    },\n    {} as Record<string, number>\n  )\n})\n\n/** 当前索引 */\nconst currentIndex = computed<number | undefined>(() => {\n  const { currentKey, current } = props\n  if (current === undefined) return undefined\n\n  if (currentKey) {\n    return currentToIndexMap.value?.[current]\n  }\n\n  if (typeof current !== 'number') return undefined\n  return n(current).range(0, props.items.length - 1)\n})\n\nwatch(currentIndex, (index) => {\n  if (index === undefined || props.direction === 'vertical') return\n  const step = stepsRef.value?.children[index]\n  if (step) {\n    step.scrollIntoView({\n      behavior: 'smooth',\n      block: 'center'\n    })\n  }\n})\n\n// 点击步骤项\nfunction handleStepClick(item: Record<string, any>, index: number) {\n  emit('item-click', item, index)\n  emit('update:current', props.currentKey ? o(item).get(props.currentKey) : index)\n}\n\n// 提示\nconst tipVisible = shallowRef(false)\nconst tipTriggerDom = shallowRef<HTMLElement>()\nconst tipContent = shallowRef()\n\nfunction handleStepMouseenter(event: MouseEvent, item: Record<string, any>, index: number) {\n  if (!slots.tip) return\n  tipTriggerDom.value = event.target as HTMLElement\n  tipVisible.value = true\n  tipContent.value = slots.tip?.({ item, index })\n}\n\nlet timer: number | undefined = undefined\nfunction closeTip() {\n  timer = setTimeout(() => {\n    tipVisible.value = false\n    tipContent.value = undefined\n    tipTriggerDom.value = undefined\n  }, 250)\n}\n\nfunction handleTipUpdateVisible(visible: boolean) {\n  visible && clearTimeout(timer)\n}\n\nfunction handleStepMouseleave() {\n  if (!slots.tip) return\n  closeTip()\n}\n</script>\n"],"mappings":"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"}

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

@@ -0,0 +1,31 @@
+import { StepsProps, StepsSlotScope } from "../../types/steps.js";
+import * as _$vue from "vue";
+import * as _$_veltra_utils0 from "@veltra/utils";
+
+//#region src/components/steps/steps.vue.d.ts
+type __VLS_Slots = {
+  icon?: (scope: StepsSlotScope) => any;
+  content?: (scope: StepsSlotScope) => any;
+  tip?: (scope: StepsSlotScope) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<StepsProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
+  "update:current": (value?: string | number | undefined) => any;
+  "item-click": (item: Record<string, any>, index: number) => any;
+}, string, _$vue.PublicProps, Readonly<StepsProps> & Readonly<{
+  "onUpdate:current"?: ((value?: string | number | undefined) => any) | undefined;
+  "onItem-click"?: ((item: Record<string, any>, index: number) => any) | undefined;
+}>, {
+  labelKey: string;
+  direction: "horizontal" | "vertical";
+  finishedStepType: _$_veltra_utils0.ColorType;
+}, {}, {}, {}, 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=steps.vue.d.ts.map

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

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

package/dist/components/steps/style.js

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

package/dist/components/steps/style2.css

@@ -0,0 +1,217 @@
+@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-steps {
+  padding: 0;
+  margin: 0;
+  /** 颜色变量 */
+}
+.u-steps__finished--primary {
+  --finished-color: var(--u-color-primary);
+}
+.u-steps__current--primary {
+  --current-color: var(--u-color-primary);
+}
+.u-steps__finished--success {
+  --finished-color: var(--u-color-success);
+}
+.u-steps__current--success {
+  --current-color: var(--u-color-success);
+}
+.u-steps__finished--warning {
+  --finished-color: var(--u-color-warning);
+}
+.u-steps__current--warning {
+  --current-color: var(--u-color-warning);
+}
+.u-steps__finished--danger {
+  --finished-color: var(--u-color-danger);
+}
+.u-steps__current--danger {
+  --current-color: var(--u-color-danger);
+}
+.u-steps__finished--info {
+  --finished-color: var(--u-color-info);
+}
+.u-steps__current--info {
+  --current-color: var(--u-color-info);
+}
+.u-steps__finished--disabled {
+  --finished-color: var(--u-color-disabled);
+}
+.u-steps__current--disabled {
+  --current-color: var(--u-color-disabled);
+}
+.u-steps__finished--default {
+  --finished-color: var(--u-color-default);
+}
+.u-steps__current--default {
+  --current-color: var(--u-color-default);
+}
+.u-steps {
+  /** 步骤项 */
+}
+.u-steps__item {
+  font-weight: 600;
+  color: var(--u-text-color-placeholder);
+}
+.u-steps__item.is-finished {
+  color: var(--finished-color);
+}
+.u-steps__item.is-current {
+  color: var(--current-color);
+}
+.u-steps__node {
+  position: relative;
+}
+.u-steps__link {
+  background-color: currentColor;
+  position: absolute;
+  margin: auto;
+  z-index: 0;
+}
+@keyframes steps-link-flow-horizontal {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 20px 0;
+  }
+}
+@keyframes steps-link-flow-vertical {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 20px;
+  }
+}
+@keyframes steps-icon-breathing {
+  0% {
+    color: var(--u-text-color-placeholder);
+    border-color: var(--u-text-color-placeholder);
+  }
+  50% {
+    color: currentColor;
+    border-color: currentColor;
+  }
+  100% {
+    color: var(--u-text-color-placeholder);
+    border-color: var(--u-text-color-placeholder);
+  }
+}
+.u-steps__icon {
+  display: flex;
+  cursor: default;
+  border: 2px solid currentColor;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--u-bg-color-top);
+  position: relative;
+  z-index: 1;
+  transition: opacity 0.3s ease;
+}
+.u-steps .u-steps__item.is-current .u-steps__icon {
+  animation: steps-icon-breathing 2s ease-in-out infinite;
+  will-change: opacity;
+}
+.u-steps {
+  /** 步骤项描述 */
+}
+.u-steps__content {
+  padding: 4px 0;
+}
+.u-steps.is-horizontal {
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+.u-steps.is-horizontal .u-steps__item {
+  flex: 1;
+  min-width: 150px;
+}
+.u-steps.is-horizontal .u-steps__item.is-current .u-steps__link {
+  background-color: transparent;
+  background-image: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%, transparent 100%);
+  background-size: 10px 2px;
+  animation: steps-link-flow-horizontal 1s linear infinite;
+}
+.u-steps.is-horizontal .u-steps__link {
+  width: 100%;
+  height: 2px;
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+.u-steps.is-horizontal.is-align-center .u-steps__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.u-steps.is-horizontal.is-align-center .u-steps__node {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.u-steps.is-horizontal.is-align-center .u-steps__link {
+  left: 50%;
+}
+.u-steps.is-vertical .u-steps__item {
+  min-height: 60px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  flex-wrap: nowrap;
+}
+.u-steps.is-vertical .u-steps__item.is-current .u-steps__link {
+  background-color: transparent;
+  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 50%, transparent 50%, transparent 100%);
+  background-size: 2px 10px;
+  animation: steps-link-flow-vertical 1s linear infinite;
+}
+.u-steps.is-vertical .u-steps__link {
+  height: 100%;
+  width: 2px;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.u-steps--small.is-vertical .u-steps__item {
+  gap: var(--u-gap-small);
+}
+.u-steps--small .u-steps__icon {
+  font-size: var(--u-font-size-title-small);
+  width: var(--u-form-component-height-small);
+  height: var(--u-form-component-height-small);
+}
+.u-steps--default.is-vertical .u-steps__item {
+  gap: var(--u-gap-default);
+}
+.u-steps--default .u-steps__icon {
+  font-size: var(--u-font-size-title-default);
+  width: var(--u-form-component-height-default);
+  height: var(--u-form-component-height-default);
+}
+.u-steps--large.is-vertical .u-steps__item {
+  gap: var(--u-gap-large);
+}
+.u-steps--large .u-steps__icon {
+  font-size: var(--u-font-size-title-large);
+  width: var(--u-form-component-height-large);
+  height: var(--u-form-component-height-large);
+}

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

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

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

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

package/dist/components/switch/style.js

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

package/dist/components/switch/style2.css

@@ -0,0 +1,99 @@
+@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-switch {
+  --u-switch-height-small: 18px;
+  --u-switch-height-default: 20px;
+  --u-switch-height-large: 24px;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  gap: var(--u-gap-default);
+}
+.u-switch.is-disabled {
+  cursor: not-allowed;
+}
+.u-switch.is-disabled .u-switch__button {
+  background-color: var(--u-bg-color-bottom);
+}
+.u-switch.is-disabled .u-switch__thumb {
+  background-color: var(--u-bg-color-middle);
+}
+.u-switch.is-disabled.is-checked .u-switch__button {
+  background-color: var(--u-color-primary-light-5);
+}
+.u-switch.is-readonly {
+  cursor: default;
+}
+.u-switch--small .u-switch__button {
+  height: var(--u-switch-height-small);
+  width: calc(var(--u-switch-height-small) * 2 - 4px);
+}
+.u-switch--small .u-switch__thumb {
+  width: calc(var(--u-switch-height-small) - 4px);
+  height: calc(var(--u-switch-height-small) - 4px);
+}
+.u-switch--default .u-switch__button {
+  height: var(--u-switch-height-default);
+  width: calc(var(--u-switch-height-default) * 2 - 4px);
+}
+.u-switch--default .u-switch__thumb {
+  width: calc(var(--u-switch-height-default) - 4px);
+  height: calc(var(--u-switch-height-default) - 4px);
+}
+.u-switch--large .u-switch__button {
+  height: var(--u-switch-height-large);
+  width: calc(var(--u-switch-height-large) * 2 - 4px);
+}
+.u-switch--large .u-switch__thumb {
+  width: calc(var(--u-switch-height-large) - 4px);
+  height: calc(var(--u-switch-height-large) - 4px);
+}
+.u-switch__native {
+  opacity: 0;
+  visibility: hidden;
+}
+.u-switch__button {
+  border-radius: 100px;
+  background-color: var(--u-bg-color-bottom);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  padding: 2px;
+  flex-shrink: 0;
+}
+.u-switch__thumb {
+  display: block;
+  background-color: var(--u-bg-color-top);
+  border-radius: 50%;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+}
+.u-switch__text {
+  font-weight: 500;
+}
+.u-switch__text.is-selected {
+  color: var(--u-color-primary);
+  font-weight: 800;
+}
+.u-switch.is-checked .u-switch__button {
+  background-color: var(--u-color-primary);
+}
+.u-switch.is-checked .u-switch__thumb {
+  transform: translateX(100%);
+}

package/dist/components/switch/switch.js

@@ -0,0 +1,82 @@
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, openBlock, toDisplayString, unref, useModel, withModifiers } from "vue";
+import { bem } from "@veltra/utils";
+import { useFormComponent, useFormFallbackProps } from "@veltra/compositions";
+//#region src/components/switch/switch.vue
+const _hoisted_1 = ["checked", "disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "Switch",
+	__name: "switch",
+	props: /* @__PURE__ */ mergeModels({
+		modelValue: { type: Boolean },
+		activeText: {},
+		inactiveText: {},
+		tips: {},
+		span: {},
+		label: {},
+		field: {},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		size: {}
+	}, {
+		"modelValue": { type: Boolean },
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["update:modelValue", "change"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const model = useModel(__props, "modelValue");
+		const cls = bem("switch");
+		const { formProps } = useFormComponent();
+		const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props]);
+		const switchClass = computed(() => {
+			return [
+				cls.b,
+				cls.m(size.value),
+				bem.is("disabled", disabled.value),
+				bem.is("readonly", readonly.value),
+				bem.is("checked", model.value)
+			];
+		});
+		const handleInput = (e) => {
+			if (disabled.value || readonly.value) return;
+			const newValue = e.target.checked;
+			model.value = newValue;
+			emit("change", newValue);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("label", {
+				class: normalizeClass(switchClass.value),
+				onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+			}, [
+				createElementVNode("input", {
+					type: "checkbox",
+					class: normalizeClass(unref(cls).e("native")),
+					hidden: "",
+					checked: model.value,
+					disabled: unref(disabled),
+					onInput: handleInput
+				}, null, 42, _hoisted_1),
+				__props.inactiveText ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass([unref(cls).e("text"), unref(bem).is("selected", !model.value)])
+				}, toDisplayString(__props.inactiveText), 3)) : createCommentVNode("v-if", true),
+				createElementVNode("div", { class: normalizeClass(unref(cls).e("button")) }, [createElementVNode("span", { class: normalizeClass(unref(cls).e("thumb")) }, null, 2)], 2),
+				__props.activeText ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass([unref(cls).e("text"), unref(bem).is("selected", model.value)])
+				}, toDisplayString(__props.activeText), 3)) : createCommentVNode("v-if", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=switch.js.map

package/dist/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","names":[],"sources":["../../../src/components/switch/switch.vue"],"sourcesContent":["<template>\n  <label :class=\"switchClass\" @click.stop>\n    <input\n      type=\"checkbox\"\n      :class=\"cls.e('native')\"\n      hidden\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      @input=\"handleInput\"\n    />\n    <span :class=\"[cls.e('text'), bem.is('selected', !model)]\" v-if=\"inactiveText\">\n      {{ inactiveText }}\n    </span>\n\n    <div :class=\"cls.e('button')\">\n      <span :class=\"cls.e('thumb')\"></span>\n    </div>\n\n    <span v-if=\"activeText\" :class=\"[cls.e('text'), bem.is('selected', model)]\">\n      {{ activeText }}\n    </span>\n  </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { SwitchEmits, SwitchProps, _SwitchExposed } from '../../types'\n\ndefineOptions({\n  name: 'Switch'\n})\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst emit = defineEmits<SwitchEmits>()\n\nconst model = defineModel<boolean>()\n\nconst cls = bem('switch')\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst switchClass = 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('checked', model.value)\n  ]\n})\n\nconst handleInput = (e: Event) => {\n  if (disabled.value || readonly.value) return\n\n  const newValue = (e.target as HTMLInputElement).checked\n  model.value = newValue\n  emit('change', newValue)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAoB,SAAA,aAAC;EAEnC,MAAM,MAAM,IAAI,SAAQ;EAExB,MAAM,EAAE,cAAc,kBAAiB;EAEvC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,CAAA;EAElF,MAAM,cAAc,eAAe;AACjC,UAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,MAAM;IACjB,IAAI,GAAG,YAAY,SAAS,MAAM;IAClC,IAAI,GAAG,YAAY,SAAS,MAAM;IAClC,IAAI,GAAG,WAAW,MAAM,MAAK;IAC/B;IACD;EAED,MAAM,eAAe,MAAa;AAChC,OAAI,SAAS,SAAS,SAAS,MAAO;GAEtC,MAAM,WAAY,EAAE,OAA4B;AAChD,SAAM,QAAQ;AACd,QAAK,UAAU,SAAQ;;;uBAhEvB,mBAoBQ,SAAA;IApBA,OAAK,eAAE,YAAA,MAAW;IAAG,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;;IACrC,mBAOE,SAAA;KANA,MAAK;KACJ,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA;KACb,QAAA;KACC,SAAS,MAAA;KACT,UAAU,MAAA,SAAQ;KAClB,SAAO;;IAEuD,QAAA,gBAAA,WAAA,EAAjE,mBAEO,QAAA;;KAFA,OAAK,eAAA,CAAG,MAAA,IAAG,CAAC,EAAC,OAAA,EAAU,MAAA,IAAG,CAAC,GAAE,YAAA,CAAc,MAAA,MAAK,CAAA,CAAA;uBAClD,QAAA,aAAY,EAAA,EAAA,IAAA,mBAAA,QAAA,KAAA;IAGjB,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA,EAAA,EAAA,CAChB,mBAAqC,QAAA,EAA9B,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA,EAAA,EAAA,MAAA,EAAA,CAAA,EAAA,EAAA;IAGT,QAAA,cAAA,WAAA,EAAZ,mBAEO,QAAA;;KAFkB,OAAK,eAAA,CAAG,MAAA,IAAG,CAAC,EAAC,OAAA,EAAU,MAAA,IAAG,CAAC,GAAE,YAAa,MAAA,MAAK,CAAA,CAAA;uBACnE,QAAA,WAAU,EAAA,EAAA,IAAA,mBAAA,QAAA,KAAA"}

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

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

package/dist/components/table/di.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"di.js","names":[],"sources":["../../../src/components/table/di.ts"],"sourcesContent":["import type { VirtualReturned } from '@veltra/compositions'\nimport type { BEM } from '@veltra/utils'\nimport type { InjectionKey, ShallowRef, Slots } from 'vue'\n\nimport type {\n  TableProps,\n  TableColumnSlotsScope,\n  TableColumnRenderContext,\n  TableRow,\n  RenderReturn,\n  TableColumn,\n  TableRowSlotsScope\n} from '../../types'\nimport type { ColumnNode } from './node/col'\nimport type { ColumnConfig } from './use-columns'\n\nexport const TableDIKey: InjectionKey<\n  {\n    /** 表格属性 */\n    tableProps: TableProps\n    /** 表格插槽 */\n    tableSlots: Slots\n    /** 类 */\n    cls: BEM<'table'>\n    /** 行 */\n    rows: ShallowRef<TableRow[]>\n    /** 选中行 */\n    checkedRows: ShallowRef<Set<TableRow>>\n    /** 结构化列 */\n    columnConfig: ColumnConfig\n    /** 事件处理方法 */\n    handleRowClick: (row: TableRow, ev: MouseEvent) => void\n    /** 单元格点击 */\n    handleCellClick: (row: TableRow, column: TableColumn, ev: MouseEvent) => void\n    /** 表格列插槽node */\n    getColumnSlotsNode: (ctx: TableColumnSlotsScope | TableColumnRenderContext) => RenderReturn\n    /** 展开行插槽node */\n    getExpandRowSlotsNode: (ctx: TableRowSlotsScope) => RenderReturn\n    /** 表头插槽node */\n    getHeaderSlotsNode: (ctx: { column: ColumnNode }) => RenderReturn\n\n    /** 展开/隐藏子节点 */\n    toggleTreeRowExpand: (row: TableRow) => void\n\n    /** 获取单元格的类 */\n    getCellClass: (column: ColumnNode) => string\n\n    /** 获取表头单元格的类 */\n    getHeaderCellClass: (column: ColumnNode) => string\n\n    /** 获取单元格上下文 */\n    getCellCtx: (\n      row: TableRow,\n      column: ColumnNode\n    ) => TableColumnSlotsScope | TableColumnRenderContext\n  } & VirtualReturned\n> = Symbol('TableDIKey')\n\nexport const TableResizeKey: InjectionKey<{\n  handleResizeMousedown: (e: MouseEvent, resizeColumn: ColumnNode) => void\n  headerRef: ShallowRef<HTMLElement | undefined>\n}> = Symbol('TableResizeKey')\n"],"mappings":";AAgBA,MAAa,aAwCT,OAAO,aAAa;AAExB,MAAa,iBAGR,OAAO,iBAAiB"}

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

@@ -0,0 +1,2 @@
+import { _default } from "./table.vue.js";
+import { defineTableColumns } from "./use-columns.js";