@veltra/desktop 1.5.0 → 1.6.0

package/dist/components/button/button.js

@@ -47,8 +47,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			];
 		});
 		const ripple = computed(() => {
-			if (props.disabled || props.loading) return false;
-			if ((props.plain || props.text) && props.type) return bem.is(`ripple-${props.type}`);
+			if (props.disabled || props.loading || props.text) return false;
+			if (props.plain && props.type) return bem.is(`ripple-${props.type}`);
 			return true;
 		});
 		const handleClick = (e) => {

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"classList\"\n    type=\"button\"\n    aria-label=\"button\"\n    ref=\"buttonRef\"\n    v-ripple=\"ripple\"\n    @click=\"handleClick\"\n  >\n    <!-- 加载图标 -->\n    <u-icon v-if=\"loading\" :class=\"[bem.is('loading')]\" :size=\"iconSize\">\n      <component :is=\"loadingIcon\" />\n    </u-icon>\n\n    <!-- 左侧图标 -->\n    <u-icon v-if=\"!!icon && iconPosition === 'left' && !loading\" :size=\"iconSize\">\n      <component :is=\"icon\" />\n    </u-icon>\n\n    <slot />\n\n    <!-- 右侧图标 -->\n    <u-icon v-if=\"!!icon && iconPosition === 'right'\" :size=\"iconSize\">\n      <component :is=\"icon\" />\n    </u-icon>\n  </button>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { Loading } from '@veltra/icons'\nimport { bem } from '@veltra/utils'\nimport { computed, shallowRef } from 'vue'\n\nimport type { ButtonEmits, ButtonProps, _ButtonExposed, ComponentSize } from '../../types'\nimport { UIcon } from '../icon'\n\ndefineOptions({ name: 'UButton' })\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  iconPosition: 'left',\n  loadingIcon: () => Loading,\n  disabled: false,\n  propagate: true\n})\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst emit = defineEmits<ButtonEmits>()\n\nconst cls = bem('button')\n\nconst classList = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    props.type && cls.m('color-' + props.type),\n    bem.is('circle', props.circle),\n    bem.is('disabled', props.disabled),\n    bem.is('loading', props.loading),\n    bem.is('plain', props.plain),\n    bem.is('text', props.text)\n  ]\n})\n\nconst ripple = computed(() => {\n  if (props.disabled || props.loading) return false\n  if ((props.plain || props.text) && props.type) {\n    return bem.is(`ripple-${props.type}`)\n  }\n  return true\n})\n\nconst handleClick = (e: MouseEvent) => {\n  if (props.disabled || props.loading) {\n    e.stopPropagation()\n    return\n  }\n\n  !props.propagate && e.stopPropagation()\n\n  emit('click', e)\n}\n\nconst buttonRef = shallowRef<HTMLButtonElement>()\n\nconst exposed: _ButtonExposed = { el: buttonRef }\n\ndefineExpose(exposed)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCA,MAAM,QAAQ;EAOd,MAAM,EAAE,SAAS,iBAAiB,CAAC,KAAK,GAAG,EAAE,MAAM,UAA2B,CAAC;EAE/E,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,QAAQ;EAExB,MAAM,YAAY,eAAe;GAC/B,OAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,KAAK;IAChB,MAAM,QAAQ,IAAI,EAAE,WAAW,MAAM,IAAI;IACzC,IAAI,GAAG,UAAU,MAAM,MAAM;IAC7B,IAAI,GAAG,YAAY,MAAM,QAAQ;IACjC,IAAI,GAAG,WAAW,MAAM,OAAO;IAC/B,IAAI,GAAG,SAAS,MAAM,KAAK;IAC3B,IAAI,GAAG,QAAQ,MAAM,IAAI;GAC3B;EACF,CAAC;EAED,MAAM,SAAS,eAAe;GAC5B,IAAI,MAAM,YAAY,MAAM,SAAS,OAAO;GAC5C,KAAK,MAAM,SAAS,MAAM,SAAS,MAAM,MACvC,OAAO,IAAI,GAAG,UAAU,MAAM,MAAM;GAEtC,OAAO;EACT,CAAC;EAED,MAAM,eAAe,MAAkB;GACrC,IAAI,MAAM,YAAY,MAAM,SAAS;IACnC,EAAE,gBAAgB;IAClB;GACF;GAEA,CAAC,MAAM,aAAa,EAAE,gBAAgB;GAEtC,KAAK,SAAS,CAAC;EACjB;EAEA,MAAM,YAAY,WAA8B;EAIhD,SAAa,EAFqB,IAAI,UAEzB,CAAO;;GAxFlB,OAAA,gBAAA,UAAA,GAAA,mBAwBS,UAAA;IAvBN,OAAK,eAAE,UAAA,KAAS;IACjB,MAAK;IACL,cAAW;IACP,SAAA;IAAJ,KAAI;IAEH,SAAO;;IAER,mBAAA,QAAA;IACc,QAAA,WAAA,UAAA,GAAd,YAES,MAAA,WAAA,GAAA;;KAFe,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,GAAE,SAAA,CAAA,CAAA;KAAe,MAAM,QAAA;;KAC1B,SAAA,cAAA,EAAA,UAAA,GAA/B,YAA+B,wBAAf,QAAA,WAAW,CAAA,EAAA,CAAA;;;IAG7B,mBAAA,QAAA;IACgB,CAAA,CAAA,QAAA,QAAQ,QAAA,iBAAY,UAAA,CAAgB,QAAA,WAAA,UAAA,GAApD,YAES,MAAA,WAAA,GAAA;;KAFqD,MAAM,QAAA;;KAC1C,SAAA,cAAA,EAAA,UAAA,GAAxB,YAAwB,wBAAR,QAAA,IAAI,CAAA,EAAA,CAAA;;;IAGtB,WAAQ,KAAA,QAAA,SAAA;IAER,mBAAA,QAAA;IACgB,CAAA,CAAA,QAAA,QAAQ,QAAA,iBAAY,WAAA,UAAA,GAApC,YAES,MAAA,WAAA,GAAA;;KAF0C,MAAM,QAAA;;KAC/B,SAAA,cAAA,EAAA,UAAA,GAAxB,YAAwB,wBAAR,QAAA,IAAI,CAAA,EAAA,CAAA;;;GAjBZ,GAAA,CAAA,IAAA,CAAA,CAAA,MAAA,OAAA,GAAA,OAAA,KAAM,CAAA,CAAA"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"classList\"\n    type=\"button\"\n    aria-label=\"button\"\n    ref=\"buttonRef\"\n    v-ripple=\"ripple\"\n    @click=\"handleClick\"\n  >\n    <!-- 加载图标 -->\n    <u-icon v-if=\"loading\" :class=\"[bem.is('loading')]\" :size=\"iconSize\">\n      <component :is=\"loadingIcon\" />\n    </u-icon>\n\n    <!-- 左侧图标 -->\n    <u-icon v-if=\"!!icon && iconPosition === 'left' && !loading\" :size=\"iconSize\">\n      <component :is=\"icon\" />\n    </u-icon>\n\n    <slot />\n\n    <!-- 右侧图标 -->\n    <u-icon v-if=\"!!icon && iconPosition === 'right'\" :size=\"iconSize\">\n      <component :is=\"icon\" />\n    </u-icon>\n  </button>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { Loading } from '@veltra/icons'\nimport { bem } from '@veltra/utils'\nimport { computed, shallowRef } from 'vue'\n\nimport type { ButtonEmits, ButtonProps, _ButtonExposed, ComponentSize } from '../../types'\nimport { UIcon } from '../icon'\n\ndefineOptions({ name: 'UButton' })\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  iconPosition: 'left',\n  loadingIcon: () => Loading,\n  disabled: false,\n  propagate: true\n})\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst emit = defineEmits<ButtonEmits>()\n\nconst cls = bem('button')\n\nconst classList = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    props.type && cls.m('color-' + props.type),\n    bem.is('circle', props.circle),\n    bem.is('disabled', props.disabled),\n    bem.is('loading', props.loading),\n    bem.is('plain', props.plain),\n    bem.is('text', props.text)\n  ]\n})\n\nconst ripple = computed(() => {\n  if (props.disabled || props.loading || props.text) return false\n  if (props.plain && props.type) {\n    return bem.is(`ripple-${props.type}`)\n  }\n  return true\n})\n\nconst handleClick = (e: MouseEvent) => {\n  if (props.disabled || props.loading) {\n    e.stopPropagation()\n    return\n  }\n\n  !props.propagate && e.stopPropagation()\n\n  emit('click', e)\n}\n\nconst buttonRef = shallowRef<HTMLButtonElement>()\n\nconst exposed: _ButtonExposed = { el: buttonRef }\n\ndefineExpose(exposed)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCA,MAAM,QAAQ;EAOd,MAAM,EAAE,SAAS,iBAAiB,CAAC,KAAK,GAAG,EAAE,MAAM,UAA2B,CAAC;EAE/E,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,QAAQ;EAExB,MAAM,YAAY,eAAe;GAC/B,OAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,KAAK;IAChB,MAAM,QAAQ,IAAI,EAAE,WAAW,MAAM,IAAI;IACzC,IAAI,GAAG,UAAU,MAAM,MAAM;IAC7B,IAAI,GAAG,YAAY,MAAM,QAAQ;IACjC,IAAI,GAAG,WAAW,MAAM,OAAO;IAC/B,IAAI,GAAG,SAAS,MAAM,KAAK;IAC3B,IAAI,GAAG,QAAQ,MAAM,IAAI;GAC3B;EACF,CAAC;EAED,MAAM,SAAS,eAAe;GAC5B,IAAI,MAAM,YAAY,MAAM,WAAW,MAAM,MAAM,OAAO;GAC1D,IAAI,MAAM,SAAS,MAAM,MACvB,OAAO,IAAI,GAAG,UAAU,MAAM,MAAM;GAEtC,OAAO;EACT,CAAC;EAED,MAAM,eAAe,MAAkB;GACrC,IAAI,MAAM,YAAY,MAAM,SAAS;IACnC,EAAE,gBAAgB;IAClB;GACF;GAEA,CAAC,MAAM,aAAa,EAAE,gBAAgB;GAEtC,KAAK,SAAS,CAAC;EACjB;EAEA,MAAM,YAAY,WAA8B;EAIhD,SAAa,EAFqB,IAAI,UAEzB,CAAO;;GAxFlB,OAAA,gBAAA,UAAA,GAAA,mBAwBS,UAAA;IAvBN,OAAK,eAAE,UAAA,KAAS;IACjB,MAAK;IACL,cAAW;IACP,SAAA;IAAJ,KAAI;IAEH,SAAO;;IAER,mBAAA,QAAA;IACc,QAAA,WAAA,UAAA,GAAd,YAES,MAAA,WAAA,GAAA;;KAFe,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,GAAE,SAAA,CAAA,CAAA;KAAe,MAAM,QAAA;;KAC1B,SAAA,cAAA,EAAA,UAAA,GAA/B,YAA+B,wBAAf,QAAA,WAAW,CAAA,EAAA,CAAA;;;IAG7B,mBAAA,QAAA;IACgB,CAAA,CAAA,QAAA,QAAQ,QAAA,iBAAY,UAAA,CAAgB,QAAA,WAAA,UAAA,GAApD,YAES,MAAA,WAAA,GAAA;;KAFqD,MAAM,QAAA;;KAC1C,SAAA,cAAA,EAAA,UAAA,GAAxB,YAAwB,wBAAR,QAAA,IAAI,CAAA,EAAA,CAAA;;;IAGtB,WAAQ,KAAA,QAAA,SAAA;IAER,mBAAA,QAAA;IACgB,CAAA,CAAA,QAAA,QAAQ,QAAA,iBAAY,WAAA,UAAA,GAApC,YAES,MAAA,WAAA,GAAA;;KAF0C,MAAM,QAAA;;KAC/B,SAAA,cAAA,EAAA,UAAA,GAAxB,YAAwB,wBAAR,QAAA,IAAI,CAAA,EAAA,CAAA;;;GAjBZ,GAAA,CAAA,IAAA,CAAA,CAAA,MAAA,OAAA,GAAA,OAAA,KAAM,CAAA,CAAA"}

package/dist/components/button/style2.css

@@ -51,16 +51,9 @@
   box-shadow: none !important;
 }
 .u-button.is-plain {
-  background-color: var(--u-bg-color-top);
-  border-color: var(--u-color-default-dark-1);
+  border-color: transparent;
   box-shadow: none;
 }
-.u-button.is-plain:hover {
-  border-color: var(--u-color-default-dark-1);
-}
-.u-button.is-plain.is-disabled {
-  color: var(--u-text-color-second);
-}
 .u-button--small {
   height: var(--u-form-component-height-small);
   line-height: var(--u-form-component-height-small);
@@ -133,37 +126,37 @@
 }
 .u-button--color-primary.is-text {
   color: var(--u-color-primary);
+  border-color: transparent;
   box-shadow: none;
 }
-.u-button--color-primary.is-text:hover {
-  box-shadow: 0px 0px 0px 1px var(--u-color-primary);
-}
 .u-button--color-primary.is-text:not(.is-disabled):not(.is-loading):hover, .u-button--color-primary.is-text:not(.is-disabled):not(.is-loading):focus {
   background-color: var(--u-button-primary-plain-bg, var(--u-color-primary-light-9));
 }
 .u-button--color-primary.is-text.is-disabled {
+  border-color: transparent;
   color: var(--u-color-primary-light-5);
 }
 .u-button--color-primary.is-text.is-loading {
+  border-color: transparent;
   color: var(--u-color-primary-light-5);
 }
 .u-button--color-primary.is-plain {
+  border-color: transparent;
   color: var(--u-button-primary-plain-color, var(--u-color-primary));
   background-color: var(--u-button-primary-plain-bg, var(--u-color-primary-light-9));
-  border-color: var(--u-button-primary-plain-border, var(--u-color-primary-light-5));
-  box-shadow: none;
 }
 .u-button--color-primary.is-plain:not(.is-disabled):not(.is-loading):hover {
-  color: var(--u-color-primary);
-  border-color: var(--u-color-primary);
-  background-color: var(--u-color-primary-light-9);
-}
-.u-button--color-primary.is-plain:active {
-  box-shadow: none;
+  background-color: var(--u-color-primary-light-7);
 }
 .u-button--color-primary.is-plain.is-disabled {
+  border-color: transparent;
   color: var(--u-color-primary-light-5);
-  border-color: var(--u-color-primary-light-8);
+  background-color: var(--u-color-primary-light-9);
+}
+.u-button--color-primary.is-plain.is-loading {
+  border-color: transparent;
+  color: var(--u-color-primary-light-5);
+  background-color: var(--u-color-primary-light-9);
 }
 .u-button .is-ripple-success {
   background-color: var(--u-color-success);
@@ -193,37 +186,37 @@
 }
 .u-button--color-success.is-text {
   color: var(--u-color-success);
+  border-color: transparent;
   box-shadow: none;
 }
-.u-button--color-success.is-text:hover {
-  box-shadow: 0px 0px 0px 1px var(--u-color-success);
-}
 .u-button--color-success.is-text:not(.is-disabled):not(.is-loading):hover, .u-button--color-success.is-text:not(.is-disabled):not(.is-loading):focus {
   background-color: var(--u-button-success-plain-bg, var(--u-color-success-light-9));
 }
 .u-button--color-success.is-text.is-disabled {
+  border-color: transparent;
   color: var(--u-color-success-light-5);
 }
 .u-button--color-success.is-text.is-loading {
+  border-color: transparent;
   color: var(--u-color-success-light-5);
 }
 .u-button--color-success.is-plain {
+  border-color: transparent;
   color: var(--u-button-success-plain-color, var(--u-color-success));
   background-color: var(--u-button-success-plain-bg, var(--u-color-success-light-9));
-  border-color: var(--u-button-success-plain-border, var(--u-color-success-light-5));
-  box-shadow: none;
 }
 .u-button--color-success.is-plain:not(.is-disabled):not(.is-loading):hover {
-  color: var(--u-color-success);
-  border-color: var(--u-color-success);
-  background-color: var(--u-color-success-light-9);
-}
-.u-button--color-success.is-plain:active {
-  box-shadow: none;
+  background-color: var(--u-color-success-light-7);
 }
 .u-button--color-success.is-plain.is-disabled {
+  border-color: transparent;
   color: var(--u-color-success-light-5);
-  border-color: var(--u-color-success-light-8);
+  background-color: var(--u-color-success-light-9);
+}
+.u-button--color-success.is-plain.is-loading {
+  border-color: transparent;
+  color: var(--u-color-success-light-5);
+  background-color: var(--u-color-success-light-9);
 }
 .u-button .is-ripple-warning {
   background-color: var(--u-color-warning);
@@ -253,37 +246,37 @@
 }
 .u-button--color-warning.is-text {
   color: var(--u-color-warning);
+  border-color: transparent;
   box-shadow: none;
 }
-.u-button--color-warning.is-text:hover {
-  box-shadow: 0px 0px 0px 1px var(--u-color-warning);
-}
 .u-button--color-warning.is-text:not(.is-disabled):not(.is-loading):hover, .u-button--color-warning.is-text:not(.is-disabled):not(.is-loading):focus {
   background-color: var(--u-button-warning-plain-bg, var(--u-color-warning-light-9));
 }
 .u-button--color-warning.is-text.is-disabled {
+  border-color: transparent;
   color: var(--u-color-warning-light-5);
 }
 .u-button--color-warning.is-text.is-loading {
+  border-color: transparent;
   color: var(--u-color-warning-light-5);
 }
 .u-button--color-warning.is-plain {
+  border-color: transparent;
   color: var(--u-button-warning-plain-color, var(--u-color-warning));
   background-color: var(--u-button-warning-plain-bg, var(--u-color-warning-light-9));
-  border-color: var(--u-button-warning-plain-border, var(--u-color-warning-light-5));
-  box-shadow: none;
 }
 .u-button--color-warning.is-plain:not(.is-disabled):not(.is-loading):hover {
-  color: var(--u-color-warning);
-  border-color: var(--u-color-warning);
-  background-color: var(--u-color-warning-light-9);
-}
-.u-button--color-warning.is-plain:active {
-  box-shadow: none;
+  background-color: var(--u-color-warning-light-7);
 }
 .u-button--color-warning.is-plain.is-disabled {
+  border-color: transparent;
   color: var(--u-color-warning-light-5);
-  border-color: var(--u-color-warning-light-8);
+  background-color: var(--u-color-warning-light-9);
+}
+.u-button--color-warning.is-plain.is-loading {
+  border-color: transparent;
+  color: var(--u-color-warning-light-5);
+  background-color: var(--u-color-warning-light-9);
 }
 .u-button .is-ripple-danger {
   background-color: var(--u-color-danger);
@@ -313,37 +306,37 @@
 }
 .u-button--color-danger.is-text {
   color: var(--u-color-danger);
+  border-color: transparent;
   box-shadow: none;
 }
-.u-button--color-danger.is-text:hover {
-  box-shadow: 0px 0px 0px 1px var(--u-color-danger);
-}
 .u-button--color-danger.is-text:not(.is-disabled):not(.is-loading):hover, .u-button--color-danger.is-text:not(.is-disabled):not(.is-loading):focus {
   background-color: var(--u-button-danger-plain-bg, var(--u-color-danger-light-9));
 }
 .u-button--color-danger.is-text.is-disabled {
+  border-color: transparent;
   color: var(--u-color-danger-light-5);
 }
 .u-button--color-danger.is-text.is-loading {
+  border-color: transparent;
   color: var(--u-color-danger-light-5);
 }
 .u-button--color-danger.is-plain {
+  border-color: transparent;
   color: var(--u-button-danger-plain-color, var(--u-color-danger));
   background-color: var(--u-button-danger-plain-bg, var(--u-color-danger-light-9));
-  border-color: var(--u-button-danger-plain-border, var(--u-color-danger-light-5));
-  box-shadow: none;
 }
 .u-button--color-danger.is-plain:not(.is-disabled):not(.is-loading):hover {
-  color: var(--u-color-danger);
-  border-color: var(--u-color-danger);
-  background-color: var(--u-color-danger-light-9);
-}
-.u-button--color-danger.is-plain:active {
-  box-shadow: none;
+  background-color: var(--u-color-danger-light-7);
 }
 .u-button--color-danger.is-plain.is-disabled {
+  border-color: transparent;
   color: var(--u-color-danger-light-5);
-  border-color: var(--u-color-danger-light-8);
+  background-color: var(--u-color-danger-light-9);
+}
+.u-button--color-danger.is-plain.is-loading {
+  border-color: transparent;
+  color: var(--u-color-danger-light-5);
+  background-color: var(--u-color-danger-light-9);
 }
 .u-button .is-ripple-info {
   background-color: var(--u-color-info);
@@ -373,37 +366,37 @@
 }
 .u-button--color-info.is-text {
   color: var(--u-color-info);
+  border-color: transparent;
   box-shadow: none;
 }
-.u-button--color-info.is-text:hover {
-  box-shadow: 0px 0px 0px 1px var(--u-color-info);
-}
 .u-button--color-info.is-text:not(.is-disabled):not(.is-loading):hover, .u-button--color-info.is-text:not(.is-disabled):not(.is-loading):focus {
   background-color: var(--u-button-info-plain-bg, var(--u-color-info-light-9));
 }
 .u-button--color-info.is-text.is-disabled {
+  border-color: transparent;
   color: var(--u-color-info-light-5);
 }
 .u-button--color-info.is-text.is-loading {
+  border-color: transparent;
   color: var(--u-color-info-light-5);
 }
 .u-button--color-info.is-plain {
+  border-color: transparent;
   color: var(--u-button-info-plain-color, var(--u-color-info));
   background-color: var(--u-button-info-plain-bg, var(--u-color-info-light-9));
-  border-color: var(--u-button-info-plain-border, var(--u-color-info-light-5));
-  box-shadow: none;
 }
 .u-button--color-info.is-plain:not(.is-disabled):not(.is-loading):hover {
-  color: var(--u-color-info);
-  border-color: var(--u-color-info);
-  background-color: var(--u-color-info-light-9);
-}
-.u-button--color-info.is-plain:active {
-  box-shadow: none;
+  background-color: var(--u-color-info-light-7);
 }
 .u-button--color-info.is-plain.is-disabled {
+  border-color: transparent;
   color: var(--u-color-info-light-5);
-  border-color: var(--u-color-info-light-8);
+  background-color: var(--u-color-info-light-9);
+}
+.u-button--color-info.is-plain.is-loading {
+  border-color: transparent;
+  color: var(--u-color-info-light-5);
+  background-color: var(--u-color-info-light-9);
 }
 .u-button .is-ripple-disabled {
   background-color: var(--u-color-disabled);
@@ -433,37 +426,37 @@
 }
 .u-button--color-disabled.is-text {
   color: var(--u-color-disabled);
+  border-color: transparent;
   box-shadow: none;
 }
-.u-button--color-disabled.is-text:hover {
-  box-shadow: 0px 0px 0px 1px var(--u-color-disabled);
-}
 .u-button--color-disabled.is-text:not(.is-disabled):not(.is-loading):hover, .u-button--color-disabled.is-text:not(.is-disabled):not(.is-loading):focus {
   background-color: var(--u-button-disabled-plain-bg, var(--u-color-disabled-light-9));
 }
 .u-button--color-disabled.is-text.is-disabled {
+  border-color: transparent;
   color: var(--u-color-disabled-light-5);
 }
 .u-button--color-disabled.is-text.is-loading {
+  border-color: transparent;
   color: var(--u-color-disabled-light-5);
 }
 .u-button--color-disabled.is-plain {
+  border-color: transparent;
   color: var(--u-button-disabled-plain-color, var(--u-color-disabled));
   background-color: var(--u-button-disabled-plain-bg, var(--u-color-disabled-light-9));
-  border-color: var(--u-button-disabled-plain-border, var(--u-color-disabled-light-5));
-  box-shadow: none;
 }
 .u-button--color-disabled.is-plain:not(.is-disabled):not(.is-loading):hover {
-  color: var(--u-color-disabled);
-  border-color: var(--u-color-disabled);
-  background-color: var(--u-color-disabled-light-9);
-}
-.u-button--color-disabled.is-plain:active {
-  box-shadow: none;
+  background-color: var(--u-color-disabled-light-7);
 }
 .u-button--color-disabled.is-plain.is-disabled {
+  border-color: transparent;
   color: var(--u-color-disabled-light-5);
-  border-color: var(--u-color-disabled-light-8);
+  background-color: var(--u-color-disabled-light-9);
+}
+.u-button--color-disabled.is-plain.is-loading {
+  border-color: transparent;
+  color: var(--u-color-disabled-light-5);
+  background-color: var(--u-color-disabled-light-9);
 }
 .u-button .is-ripple-default {
   background-color: var(--u-color-default);
@@ -493,37 +486,37 @@
 }
 .u-button--color-default.is-text {
   color: var(--u-color-default);
+  border-color: transparent;
   box-shadow: none;
 }
-.u-button--color-default.is-text:hover {
-  box-shadow: 0px 0px 0px 1px var(--u-color-default);
-}
 .u-button--color-default.is-text:not(.is-disabled):not(.is-loading):hover, .u-button--color-default.is-text:not(.is-disabled):not(.is-loading):focus {
   background-color: var(--u-button-default-plain-bg, var(--u-color-default-light-9));
 }
 .u-button--color-default.is-text.is-disabled {
+  border-color: transparent;
   color: var(--u-color-default-light-5);
 }
 .u-button--color-default.is-text.is-loading {
+  border-color: transparent;
   color: var(--u-color-default-light-5);
 }
 .u-button--color-default.is-plain {
+  border-color: transparent;
   color: var(--u-button-default-plain-color, var(--u-color-default));
   background-color: var(--u-button-default-plain-bg, var(--u-color-default-light-9));
-  border-color: var(--u-button-default-plain-border, var(--u-color-default-light-5));
-  box-shadow: none;
 }
 .u-button--color-default.is-plain:not(.is-disabled):not(.is-loading):hover {
-  color: var(--u-color-default);
-  border-color: var(--u-color-default);
-  background-color: var(--u-color-default-light-9);
-}
-.u-button--color-default.is-plain:active {
-  box-shadow: none;
+  background-color: var(--u-color-default-light-7);
 }
 .u-button--color-default.is-plain.is-disabled {
+  border-color: transparent;
   color: var(--u-color-default-light-5);
-  border-color: var(--u-color-default-light-8);
+  background-color: var(--u-color-default-light-9);
+}
+.u-button--color-default.is-plain.is-loading {
+  border-color: transparent;
+  color: var(--u-color-default-light-5);
+  background-color: var(--u-color-default-light-9);
 }
 .u-button.is-circle {
   border-radius: 50%;

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

@@ -1,6 +1,6 @@
 import _sfc_main$1 from "../icon/icon.js";
 import { CollapseDIKey } from "./di.js";
-import { computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch, withCtx, withKeys, withModifiers } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch, withCtx, withKeys, withModifiers } from "vue";
 import { useModel as useModel$1 } from "@veltra/compositions";
 import { ExpandTransition, bem } from "@veltra/utils";
 import { ArrowDown } from "@veltra/icons/normal";
@@ -23,7 +23,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		},
 		title: {},
 		disabled: { type: Boolean },
-		expandIcon: {}
+		expandIcon: {},
+		destroyOnCollapse: { type: Boolean }
 	},
 	emits: ["update:modelValue", "change"],
 	setup(__props, { emit: __emit }) {
@@ -64,14 +65,27 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			emit("change", next);
 		};
 		const wrapperEl = ref();
+		/** 内容是否挂载：destroyOnCollapse 时折叠态卸载内容 DOM，展开前重新挂载 */
+		const contentMounted = ref(isActive.value || !props.destroyOnCollapse);
 		onMounted(() => {
 			if (context && props.value !== void 0) context.register(props.value);
 			if (!wrapperEl.value) return;
 			expandTransition.setExpanded(wrapperEl.value, isActive.value);
 		});
-		watch(isActive, (active) => {
+		watch(isActive, async (active) => {
+			if (active) {
+				if (!contentMounted.value) {
+					contentMounted.value = true;
+					await nextTick();
+				}
+				if (!wrapperEl.value || !isActive.value) return;
+				expandTransition.expand(wrapperEl.value);
+				return;
+			}
 			if (!wrapperEl.value) return;
-			active ? expandTransition.expand(wrapperEl.value) : expandTransition.collapse(wrapperEl.value);
+			expandTransition.collapse(wrapperEl.value, () => {
+				if (!isActive.value && props.destroyOnCollapse) contentMounted.value = false;
+			});
 		});
 		onBeforeUnmount(() => {
 			if (context && props.value !== void 0) context.unregister(props.value);
@@ -87,15 +101,18 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				tabindex: __props.disabled ? -1 : 0,
 				onClick: handleClick,
 				onKeydown: [withKeys(withModifiers(handleClick, ["prevent"]), ["enter"]), withKeys(withModifiers(handleClick, ["prevent"]), ["space"])]
-			}, [createElementVNode("span", { class: normalizeClass(unref(cls).e("title")) }, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2), createElementVNode("span", { class: normalizeClass(unref(cls).e("icon")) }, [renderSlot(_ctx.$slots, "icon", { isActive: isActive.value }, () => [createVNode(unref(_sfc_main$1), null, {
+			}, [renderSlot(_ctx.$slots, "header", { isActive: isActive.value }, () => [createElementVNode("span", { class: normalizeClass(unref(cls).e("title")) }, toDisplayString(__props.title), 3), createElementVNode("span", { class: normalizeClass(unref(cls).e("icon")) }, [createVNode(unref(_sfc_main$1), null, {
 				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(iconComponent.value)))]),
 				_: 1
-			})])], 2)], 42, _hoisted_1), createElementVNode("div", {
+			})], 2)])], 42, _hoisted_1), createElementVNode("div", {
 				ref_key: "wrapperEl",
 				ref: wrapperEl,
 				class: normalizeClass(unref(cls).e("content-wrapper")),
 				"aria-hidden": !isActive.value
-			}, [createElementVNode("div", { class: normalizeClass(unref(cls).e("content")) }, [renderSlot(_ctx.$slots, "default")], 2)], 10, _hoisted_2)], 2);
+			}, [contentMounted.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(cls).e("content"))
+			}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("v-if", true)], 10, _hoisted_2)], 2);
 		};
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"collapse-item.js","names":[],"sources":["../../../src/components/collapse/collapse-item.vue"],"sourcesContent":["<template>\n  <div :class=\"classList\">\n    <div\n      :class=\"headerClassList\"\n      role=\"button\"\n      :aria-expanded=\"isActive\"\n      :aria-disabled=\"disabled\"\n      :tabindex=\"disabled ? -1 : 0\"\n      @click=\"handleClick\"\n      @keydown.enter.prevent=\"handleClick\"\n      @keydown.space.prevent=\"handleClick\"\n    >\n      <span :class=\"cls.e('title')\">\n        <slot name=\"title\">{{ title }}</slot>\n      </span>\n\n      <span :class=\"cls.e('icon')\">\n        <slot name=\"icon\" :is-active=\"isActive\">\n          <UIcon><component :is=\"iconComponent\" /></UIcon>\n        </slot>\n      </span>\n    </div>\n    <div ref=\"wrapperEl\" :class=\"cls.e('content-wrapper')\" :aria-hidden=\"!isActive\">\n      <div :class=\"cls.e('content')\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useModel } from '@veltra/compositions'\nimport { ArrowDown } from '@veltra/icons/normal'\nimport { bem, ExpandTransition } from '@veltra/utils'\nimport { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport type { CollapseItemEmits, CollapseItemProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { CollapseDIKey } from './di'\n\ndefineOptions({ name: 'UCollapseItem' })\n\nconst props = withDefaults(defineProps<CollapseItemProps>(), { modelValue: false })\nconst emit = defineEmits<CollapseItemEmits>()\n\nconst context = inject(CollapseDIKey, undefined)\n\nconst cls = context?.cls ?? bem('collapse')\n\nconst standaloneModel = useModel<CollapseItemProps, 'modelValue'>({\n  props,\n  emit,\n  defaultValue: false\n})\n\nconst isActive = computed(() => {\n  if (context) {\n    return props.value !== undefined && context.activeValues.value.includes(props.value)\n  }\n  return !!standaloneModel.value\n})\n\nconst iconComponent = computed(() => context?.expandIcon.value ?? props.expandIcon ?? ArrowDown)\n\nconst classList = computed(() => [\n  cls.e('item'),\n  bem.is('active', isActive.value),\n  bem.is('disabled', props.disabled)\n])\n\nconst headerClassList = computed(() => [\n  cls.e('header'),\n  bem.is('disabled', props.disabled),\n  bem.is('active', isActive.value)\n])\n\nconst expandTransition =\n  context?.expandTransition ??\n  new ExpandTransition({ transition: 'height 0.24s cubic-bezier(0.4, 0, 0.2, 1)' })\n\nconst handleClick = () => {\n  if (props.disabled) return\n\n  if (context) {\n    if (props.value === undefined) return\n    context.toggle(props.value)\n    return\n  }\n\n  const next = !standaloneModel.value\n  standaloneModel.value = next\n  emit('change', next)\n}\n\nconst wrapperEl = ref<HTMLElement>()\n\nonMounted(() => {\n  if (context && props.value !== undefined) {\n    context.register(props.value)\n  }\n  if (!wrapperEl.value) return\n  expandTransition.setExpanded(wrapperEl.value, isActive.value)\n})\n\nwatch(isActive, (active) => {\n  if (!wrapperEl.value) return\n  active ? expandTransition.expand(wrapperEl.value) : expandTransition.collapse(wrapperEl.value)\n})\n\nonBeforeUnmount(() => {\n  if (context && props.value !== undefined) {\n    context.unregister(props.value)\n  }\n  if (!wrapperEl.value) return\n  expandTransition.cancel(wrapperEl.value)\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"collapse-item.js","names":[],"sources":["../../../src/components/collapse/collapse-item.vue"],"sourcesContent":["<template>\n  <div :class=\"classList\">\n    <div\n      :class=\"headerClassList\"\n      role=\"button\"\n      :aria-expanded=\"isActive\"\n      :aria-disabled=\"disabled\"\n      :tabindex=\"disabled ? -1 : 0\"\n      @click=\"handleClick\"\n      @keydown.enter.prevent=\"handleClick\"\n      @keydown.space.prevent=\"handleClick\"\n    >\n      <slot name=\"header\" :is-active=\"isActive\">\n        <span :class=\"cls.e('title')\">{{ title }}</span>\n\n        <span :class=\"cls.e('icon')\">\n          <UIcon><component :is=\"iconComponent\" /></UIcon>\n        </span>\n      </slot>\n    </div>\n    <div ref=\"wrapperEl\" :class=\"cls.e('content-wrapper')\" :aria-hidden=\"!isActive\">\n      <div v-if=\"contentMounted\" :class=\"cls.e('content')\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useModel } from '@veltra/compositions'\nimport { ArrowDown } from '@veltra/icons/normal'\nimport { bem, ExpandTransition } from '@veltra/utils'\nimport { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport type { CollapseItemEmits, CollapseItemProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { CollapseDIKey } from './di'\n\ndefineOptions({ name: 'UCollapseItem' })\n\nconst props = withDefaults(defineProps<CollapseItemProps>(), { modelValue: false })\nconst emit = defineEmits<CollapseItemEmits>()\n\ndefineSlots<{\n  /** 自定义整个头部，作用域参数 `isActive` 指示展开状态；缺省渲染 title + 展开图标 */\n  header?: (scope: { isActive: boolean }) => any\n  /** 折叠面板内容 */\n  default?: () => any\n}>()\n\nconst context = inject(CollapseDIKey, undefined)\n\nconst cls = context?.cls ?? bem('collapse')\n\nconst standaloneModel = useModel<CollapseItemProps, 'modelValue'>({\n  props,\n  emit,\n  defaultValue: false\n})\n\nconst isActive = computed(() => {\n  if (context) {\n    return props.value !== undefined && context.activeValues.value.includes(props.value)\n  }\n  return !!standaloneModel.value\n})\n\nconst iconComponent = computed(() => context?.expandIcon.value ?? props.expandIcon ?? ArrowDown)\n\nconst classList = computed(() => [\n  cls.e('item'),\n  bem.is('active', isActive.value),\n  bem.is('disabled', props.disabled)\n])\n\nconst headerClassList = computed(() => [\n  cls.e('header'),\n  bem.is('disabled', props.disabled),\n  bem.is('active', isActive.value)\n])\n\nconst expandTransition =\n  context?.expandTransition ??\n  new ExpandTransition({ transition: 'height 0.24s cubic-bezier(0.4, 0, 0.2, 1)' })\n\nconst handleClick = () => {\n  if (props.disabled) return\n\n  if (context) {\n    if (props.value === undefined) return\n    context.toggle(props.value)\n    return\n  }\n\n  const next = !standaloneModel.value\n  standaloneModel.value = next\n  emit('change', next)\n}\n\nconst wrapperEl = ref<HTMLElement>()\n\n/** 内容是否挂载：destroyOnCollapse 时折叠态卸载内容 DOM，展开前重新挂载 */\nconst contentMounted = ref(isActive.value || !props.destroyOnCollapse)\n\nonMounted(() => {\n  if (context && props.value !== undefined) {\n    context.register(props.value)\n  }\n  if (!wrapperEl.value) return\n  expandTransition.setExpanded(wrapperEl.value, isActive.value)\n})\n\nwatch(isActive, async (active) => {\n  if (active) {\n    // 展开前先挂载内容，待 DOM 更新后再测量高度驱动展开动画\n    if (!contentMounted.value) {\n      contentMounted.value = true\n      await nextTick()\n    }\n    if (!wrapperEl.value || !isActive.value) return\n    expandTransition.expand(wrapperEl.value)\n    return\n  }\n  if (!wrapperEl.value) return\n  // 收起动画落定后再卸载内容 DOM；期间被重新展开则不卸载\n  expandTransition.collapse(wrapperEl.value, () => {\n    if (!isActive.value && props.destroyOnCollapse) contentMounted.value = false\n  })\n})\n\nonBeforeUnmount(() => {\n  if (context && props.value !== undefined) {\n    context.unregister(props.value)\n  }\n  if (!wrapperEl.value) return\n  expandTransition.cancel(wrapperEl.value)\n})\n</script>\n"],"mappings":"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"}

package/dist/components/dialog/style2.css

@@ -88,11 +88,13 @@
   cursor: text;
 }
 .u-dialog__body {
-  padding: 8px;
   background-color: var(--u-bg-color-top);
   backdrop-filter: var(--u-bg-filter);
   flex-grow: 1;
 }
+.u-dialog__body .u-scroll__content {
+  padding: 8px;
+}
 .u-dialog__footer {
   border-top: var(--u-border);
   padding: 8px;

package/dist/components/layout/layout.js

@@ -12,10 +12,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		gap: {},
 		cols: {},
 		rows: {},
-		resizable: { type: Boolean }
+		resizable: { type: Boolean },
+		colMinSizes: {}
 	},
-	setup(__props) {
+	emits: ["resize-start", "resize-end"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const cls = bem("layout");
 		const templateCols = ref([]);
 		watchEffect(() => {
@@ -52,18 +55,22 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			() => props.cols
 		], () => {
 			nextTick(() => {
-				getResizeOffsets();
+				syncResizers();
 			});
 		});
 		useResizeObserver({
 			targets: containerRef,
 			onResize() {
-				getResizeOffsets();
-				resizerRefs.value.forEach((r, i) => {
-					r.update(resizerOffsets.value[i]);
-				});
+				syncResizers();
 			}
 		});
+		/** 重新测量各列边界并同步所有拖拽手柄位置（容器尺寸或 cols 程序化变化后调用） */
+		function syncResizers() {
+			getResizeOffsets();
+			resizerRefs.value.forEach((r, i) => {
+				r.update(resizerOffsets.value[i]);
+			});
+		}
 		let prevSize = 0;
 		let nextSize = 0;
 		const handleStartResize = (index) => {
@@ -73,9 +80,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			const nextDom = container.children[index + 1];
 			prevSize = prevDom ? prevDom.getBoundingClientRect().width : 0;
 			nextSize = nextDom ? nextDom.getBoundingClientRect().width : 0;
+			emit("resize-start", index);
 		};
 		const handleResize = (offset, index) => {
-			const clamped = Math.max(-prevSize, Math.min(nextSize, offset));
+			const minPrev = props.colMinSizes?.[index] ?? 0;
+			const minNext = props.colMinSizes?.[index + 1] ?? 0;
+			const clamped = Math.max(minPrev - prevSize, Math.min(nextSize - minNext, offset));
 			templateCols.value[index] = `${prevSize + clamped}px`;
 			templateCols.value[index + 1] = `${nextSize - clamped}px`;
 		};
@@ -99,11 +109,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							ref: resizerRefs,
 							direction: "vertical",
 							onResize: ($event) => handleResize($event, index),
-							onResizeStart: ($event) => handleStartResize(index)
+							onResizeStart: ($event) => handleStartResize(index),
+							onResizeEnd: ($event) => emit("resize-end", index)
 						}, null, 8, [
 							"offset",
 							"onResize",
-							"onResizeStart"
+							"onResizeStart",
+							"onResizeEnd"
 						]);
 					}), 128)),
 					createCommentVNode(" 横向调节 "),

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

@@ -1 +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({ name: 'ULayout' })\n\nconst props = withDefaults(defineProps<LayoutProps>(), { tag: 'div' })\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  const container = containerRef.value\n  if (!container) return\n\n  // 拖拽前把相邻两列按实际渲染宽度固定成 px，\n  // 这样拖拽时两列等量增减、容器整体宽度保持不变。\n  const prevDom = container.children[index] as HTMLElement | undefined\n  const nextDom = container.children[index + 1] as HTMLElement | undefined\n  prevSize = prevDom ? prevDom.getBoundingClientRect().width : 0\n  nextSize = nextDom ? nextDom.getBoundingClientRect().width : 0\n}\nconst handleResize = (offset: number, index: number) => {\n  // 钳位到 [-prevSize, nextSize]，避免轨道尺寸出现负值——\n  // 一旦 grid-template-columns 中带负值，整条声明会被浏览器丢弃。\n  const clamped = Math.max(-prevSize, Math.min(nextSize, offset))\n  templateCols.value[index] = `${prevSize + clamped}px`\n  templateCols.value[index + 1] = `${nextSize - clamped}px`\n}\n\nprovide(LayoutDIKey, { cls })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;EA6CA,MAAM,QAAQ;EAEd,MAAM,MAAM,IAAI,QAAQ;EAExB,MAAM,eAAe,IAAc,CAAC,CAAC;EAErC,kBAAkB;GAChB,MAAM,EAAE,SAAS;GACjB,IAAI,CAAC,MAAM;IACT,aAAa,QAAQ,CAAC;IACtB;GACF;GACA,aAAa,QAAQ,OAAO,SAAS,WAAW,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI;EAC5E,CAAC;EAED,MAAM,QAAQ,eAA8B;GAC1C,MAAM,EAAE,MAAM,KAAK,cAAc;GACjC,OAAO;IACL,qBAAqB,aAAa,MAAM,KAAK,GAAG;IAChD,kBAAkB,OAAQ,OAAO,SAAS,WAAW,OAAO,KAAK,KAAK,GAAG,IAAK;IAC9E,WAAW,YAAY,SAAS,SAAS,KAAK,IAAI;GACpD;EACF,CAAC;EAED,MAAM,eAAe,WAAwB;EAC7C,MAAM,cAAc,WAAkD,CAAC,CAAC;EAExE,MAAM,iBAAiB,IAAc,CAAC,CAAC;EAEvC,SAAS,mBAAmB;GAC1B,MAAM,YAAY,aAAa;GAC/B,IAAI,CAAC,MAAM,aAAa,CAAC,aAAa,CAAC,MAAM,MAC3C,OAAQ,eAAe,QAAQ,CAAC;GAGlC,eAAe,QAAQ,aAAa,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,KAAK,GAAG,UAAU;IACvE,MAAM,MAAM,UAAU,SAAS;IAC/B,IAAI,CAAC,KAAK,OAAO;IACjB,OAAO,IAAI,aAAa,IAAI;GAC9B,CAAC;EACH;EAEA,MAAM;SAAO,MAAM;GAAW;SAAoB,MAAM;EAAI,SAAS;GACnE,eAAe;IACb,iBAAiB;GACnB,CAAC;EACH,CAAC;EAED,kBAAkB;GAChB,SAAS;GACT,WAAW;IACT,iBAAiB;IACjB,YAAY,MAAM,SAAS,GAAG,MAAM;KAClC,EAAE,OAAO,eAAe,MAAO,EAAG;IACpC,CAAC;GACH;EACF,CAAC;EAMD,IAAI,WAAW;EACf,IAAI,WAAW;EACf,MAAM,qBAAqB,UAAkB;GAC3C,MAAM,YAAY,aAAa;GAC/B,IAAI,CAAC,WAAW;GAIhB,MAAM,UAAU,UAAU,SAAS;GACnC,MAAM,UAAU,UAAU,SAAS,QAAQ;GAC3C,WAAW,UAAU,QAAQ,sBAAsB,CAAC,CAAC,QAAQ;GAC7D,WAAW,UAAU,QAAQ,sBAAsB,CAAC,CAAC,QAAQ;EAC/D;EACA,MAAM,gBAAgB,QAAgB,UAAkB;GAGtD,MAAM,UAAU,KAAK,IAAI,CAAC,UAAU,KAAK,IAAI,UAAU,MAAM,CAAC;GAC9D,aAAa,MAAM,SAAS,GAAG,WAAW,QAAQ;GAClD,aAAa,MAAM,QAAQ,KAAK,GAAG,WAAW,QAAQ;EACxD;EAEA,QAAQ,aAAa,EAAE,IAAI,CAAC;;GA/H1B,OAAA,UAAA,GAAA,YAqBY,wBArBI,QAAA,GAAG,GAAA;IAAG,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,CAAC;IAAG,OAAK,eAAE,MAAA,KAAK;IAAM,SAAA;IAAJ,KAAI;;IAC7C,SAAA,cAAA;KAAR,WAAQ,KAAA,QAAA,SAAA;KAER,mBAAA,QAAA;MACA,UAAA,IAAA,GAAA,mBASiB,UAAA,MAAA,WARW,eAAA,QAAlB,QAAQ,UAAK;MADvB,OAAA,UAAA,GAAA,YASiB,aAAA;OAPN;OACR,KAAK;;OACF,SAAA;OAAJ,KAAI;OACJ,WAAU;OACT,WAAM,WAAE,aAAa,QAAQ,KAAK;OAClC,gBAAY,WAAE,kBAAkB,KAAK;;;;;;;KAIxC,mBAAA,QAAA;KACA,mBAAA,+HAAA"}
+{"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      @resize-end=\"emit('resize-end', 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 { LayoutEmits, LayoutProps } from '../../types'\nimport { LayoutDIKey } from './di'\nimport ULayoutResizer from './layout-resizer.vue'\n\ndefineOptions({ name: 'ULayout' })\n\nconst props = withDefaults(defineProps<LayoutProps>(), { tag: 'div' })\n\nconst emit = defineEmits<LayoutEmits>()\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    syncResizers()\n  })\n})\n\nuseResizeObserver({\n  targets: containerRef,\n  onResize() {\n    syncResizers()\n  }\n})\n\n/** 重新测量各列边界并同步所有拖拽手柄位置（容器尺寸或 cols 程序化变化后调用） */\nfunction syncResizers() {\n  getResizeOffsets()\n  resizerRefs.value.forEach((r, i) => {\n    r.update(resizerOffsets.value![i]!)\n  })\n}\n\n// const horizontalResizerList = []\n\n// const resizing = shallowRef(false)\n\nlet prevSize = 0\nlet nextSize = 0\nconst handleStartResize = (index: number) => {\n  const container = containerRef.value\n  if (!container) return\n\n  // 拖拽前把相邻两列按实际渲染宽度固定成 px，\n  // 这样拖拽时两列等量增减、容器整体宽度保持不变。\n  const prevDom = container.children[index] as HTMLElement | undefined\n  const nextDom = container.children[index + 1] as HTMLElement | undefined\n  prevSize = prevDom ? prevDom.getBoundingClientRect().width : 0\n  nextSize = nextDom ? nextDom.getBoundingClientRect().width : 0\n  emit('resize-start', index)\n}\nconst handleResize = (offset: number, index: number) => {\n  // 钳位到 [colMin-prevSize, nextSize-colMin]，避免轨道尺寸出现负值或小于列最小宽度——\n  // 一旦 grid-template-columns 中带负值，整条声明会被浏览器丢弃。\n  const minPrev = props.colMinSizes?.[index] ?? 0\n  const minNext = props.colMinSizes?.[index + 1] ?? 0\n  const clamped = Math.max(minPrev - prevSize, Math.min(nextSize - minNext, offset))\n  templateCols.value[index] = `${prevSize + clamped}px`\n  templateCols.value[index + 1] = `${nextSize - clamped}px`\n}\n\nprovide(LayoutDIKey, { cls })\n</script>\n"],"mappings":"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"}

package/dist/components/table/use-col-resize.js

@@ -1,6 +1,8 @@
 import { TableResizeKey } from "./di.js";
 import { allocateLeafColumnWidths } from "./allocate-column-widths.js";
-import { nextTick, provide, shallowRef, watchEffect } from "vue";
+import { computed, nextTick, provide, shallowRef, watchEffect } from "vue";
+import { useResizeObserver } from "@veltra/compositions";
+import { debounce } from "@cat-kit/core";
 //#region src/components/table/use-col-resize.ts
 function useColResize(options) {
 	const { scrollRef, leafColumns } = options;
@@ -27,6 +29,12 @@ function useColResize(options) {
 		}, 0);
 	}
 	watchEffect(correctColumnStyle);
+	const debouncedCorrectColumnStyle = debounce(correctColumnStyle);
+	const containerRef = computed(() => scrollRef.value?.containerRef ?? null);
+	useResizeObserver({
+		targets: containerRef,
+		onResize: debouncedCorrectColumnStyle
+	});
 	function updateResizeLine(transformX) {
 		if (!resizeLineRef.value) return;
 		resizeLineRef.value.style.transform = `translateX(${transformX}px)`;

package/dist/components/table/use-col-resize.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-col-resize.js","names":[],"sources":["../../../src/components/table/use-col-resize.ts"],"sourcesContent":["import { nextTick, provide, shallowRef, watchEffect, type ShallowRef } from 'vue'\n\nimport type { ScrollExposed } from '../../types'\nimport { allocateLeafColumnWidths } from './allocate-column-widths'\nimport { TableResizeKey } from './di'\nimport type { ColumnNode } from './node/col'\n\ninterface Options {\n  scrollRef: ShallowRef<ScrollExposed | undefined>\n  leafColumns: ShallowRef<ColumnNode[]>\n}\n\ninterface UseColResizeReturned {\n  resizeLineRef: ShallowRef<HTMLElement | undefined>\n  colgroupRef: ShallowRef<HTMLElement | undefined>\n  showResizeLine: ShallowRef<boolean>\n  handleResizeMousedown: (e: MouseEvent, resizeColumn: ColumnNode) => void\n}\n\nexport function useColResize(options: Options): UseColResizeReturned {\n  const { scrollRef, leafColumns } = options\n\n  const showResizeLine = shallowRef(false)\n\n  const resizeLineRef = shallowRef<HTMLElement>()\n  const colgroupRef = shallowRef<HTMLElement>()\n  const headerRef = shallowRef<HTMLElement>()\n\n  /**\n   * 修正列样式\n   */\n  function correctColumnStyle() {\n    // 获取表格容器宽度\n    const containerWidth = scrollRef.value?.containerRef?.clientWidth\n\n    if (!containerWidth || !leafColumns.value.length) return\n\n    allocateLeafColumnWidths(leafColumns.value, containerWidth)\n\n    const fixedLeft = leafColumns.value.filter((column) => column.fixed === 'left')\n    const fixedRight = leafColumns.value.filter((column) => column.fixed === 'right')\n\n    fixedLeft.reduce((acc, cur) => {\n      cur.style.left = acc\n      return acc + (cur.width ?? cur.minWidth!)\n    }, 0)\n\n    fixedRight.reduceRight((acc, cur) => {\n      cur.style.right = acc\n      return acc + (cur.width ?? cur.minWidth!)\n    }, 0)\n  }\n\n  watchEffect(correctColumnStyle)\n\n  function updateResizeLine(transformX: number): void {\n    if (!resizeLineRef.value) return\n    resizeLineRef.value.style.transform = `translateX(${transformX}px)`\n  }\n\n  // 表格相对于页面左边缘的偏移量，\n  // 此处作为缓存以减少频繁地调用 getBoundingClientRect 方法\n  let containerLeft = 0\n  let originX = 0\n  let originWidth = 0\n  let currentResizeColumn: ColumnNode | null = null\n\n  function handleResizeMousedown(e: MouseEvent, resizeColumn: ColumnNode): void {\n    const tableEl = scrollRef.value?.el\n    if (!tableEl) return\n\n    showResizeLine.value = true\n    currentResizeColumn = resizeColumn\n    originX = e.pageX\n    originWidth = resizeColumn.width ?? 0\n\n    const { left } = tableEl.getBoundingClientRect()\n    containerLeft = left\n\n    nextTick(() => {\n      updateResizeLine(e.pageX - left)\n    })\n\n    document.addEventListener('mousemove', handleResizeMousemove)\n    document.addEventListener('mouseup', handleResizeMouseup)\n  }\n\n  function handleResizeMousemove(e: MouseEvent): void {\n    updateResizeLine(e.pageX - containerLeft)\n  }\n\n  function handleResizeMouseup(e: MouseEvent): void {\n    currentResizeColumn!.width = Math.max(\n      originWidth + e.pageX - originX,\n      currentResizeColumn!.minWidth!\n    )\n    currentResizeColumn!.explicitWidth = true\n\n    showResizeLine.value = false\n    currentResizeColumn = null\n    correctColumnStyle()\n\n    document.removeEventListener('mouseup', handleResizeMouseup)\n    document.removeEventListener('mousemove', handleResizeMousemove)\n  }\n\n  provide(TableResizeKey, { handleResizeMousedown, headerRef })\n\n  return { resizeLineRef, colgroupRef, showResizeLine, handleResizeMousedown }\n}\n"],"mappings":";;;;AAmBA,SAAgB,aAAa,SAAwC;CACnE,MAAM,EAAE,WAAW,gBAAgB;CAEnC,MAAM,iBAAiB,WAAW,KAAK;CAEvC,MAAM,gBAAgB,WAAwB;CAC9C,MAAM,cAAc,WAAwB;CAC5C,MAAM,YAAY,WAAwB;;;;CAK1C,SAAS,qBAAqB;EAE5B,MAAM,iBAAiB,UAAU,OAAO,cAAc;EAEtD,IAAI,CAAC,kBAAkB,CAAC,YAAY,MAAM,QAAQ;EAElD,yBAAyB,YAAY,OAAO,cAAc;EAE1D,MAAM,YAAY,YAAY,MAAM,QAAQ,WAAW,OAAO,UAAU,MAAM;EAC9E,MAAM,aAAa,YAAY,MAAM,QAAQ,WAAW,OAAO,UAAU,OAAO;EAEhF,UAAU,QAAQ,KAAK,QAAQ;GAC7B,IAAI,MAAM,OAAO;GACjB,OAAO,OAAO,IAAI,SAAS,IAAI;EACjC,GAAG,CAAC;EAEJ,WAAW,aAAa,KAAK,QAAQ;GACnC,IAAI,MAAM,QAAQ;GAClB,OAAO,OAAO,IAAI,SAAS,IAAI;EACjC,GAAG,CAAC;CACN;CAEA,YAAY,kBAAkB;CAE9B,SAAS,iBAAiB,YAA0B;EAClD,IAAI,CAAC,cAAc,OAAO;EAC1B,cAAc,MAAM,MAAM,YAAY,cAAc,WAAW;CACjE;CAIA,IAAI,gBAAgB;CACpB,IAAI,UAAU;CACd,IAAI,cAAc;CAClB,IAAI,sBAAyC;CAE7C,SAAS,sBAAsB,GAAe,cAAgC;EAC5E,MAAM,UAAU,UAAU,OAAO;EACjC,IAAI,CAAC,SAAS;EAEd,eAAe,QAAQ;EACvB,sBAAsB;EACtB,UAAU,EAAE;EACZ,cAAc,aAAa,SAAS;EAEpC,MAAM,EAAE,SAAS,QAAQ,sBAAsB;EAC/C,gBAAgB;EAEhB,eAAe;GACb,iBAAiB,EAAE,QAAQ,IAAI;EACjC,CAAC;EAED,SAAS,iBAAiB,aAAa,qBAAqB;EAC5D,SAAS,iBAAiB,WAAW,mBAAmB;CAC1D;CAEA,SAAS,sBAAsB,GAAqB;EAClD,iBAAiB,EAAE,QAAQ,aAAa;CAC1C;CAEA,SAAS,oBAAoB,GAAqB;EAChD,oBAAqB,QAAQ,KAAK,IAChC,cAAc,EAAE,QAAQ,SACxB,oBAAqB,QACvB;EACA,oBAAqB,gBAAgB;EAErC,eAAe,QAAQ;EACvB,sBAAsB;EACtB,mBAAmB;EAEnB,SAAS,oBAAoB,WAAW,mBAAmB;EAC3D,SAAS,oBAAoB,aAAa,qBAAqB;CACjE;CAEA,QAAQ,gBAAgB;EAAE;EAAuB;CAAU,CAAC;CAE5D,OAAO;EAAE;EAAe;EAAa;EAAgB;CAAsB;AAC7E"}
+{"version":3,"file":"use-col-resize.js","names":[],"sources":["../../../src/components/table/use-col-resize.ts"],"sourcesContent":["import { debounce } from '@cat-kit/core'\nimport { useResizeObserver } from '@veltra/compositions'\nimport { computed, nextTick, provide, shallowRef, watchEffect, type ShallowRef } from 'vue'\n\nimport type { ScrollExposed } from '../../types'\nimport { allocateLeafColumnWidths } from './allocate-column-widths'\nimport { TableResizeKey } from './di'\nimport type { ColumnNode } from './node/col'\n\ninterface Options {\n  scrollRef: ShallowRef<ScrollExposed | undefined>\n  leafColumns: ShallowRef<ColumnNode[]>\n}\n\ninterface UseColResizeReturned {\n  resizeLineRef: ShallowRef<HTMLElement | undefined>\n  colgroupRef: ShallowRef<HTMLElement | undefined>\n  showResizeLine: ShallowRef<boolean>\n  handleResizeMousedown: (e: MouseEvent, resizeColumn: ColumnNode) => void\n}\n\nexport function useColResize(options: Options): UseColResizeReturned {\n  const { scrollRef, leafColumns } = options\n\n  const showResizeLine = shallowRef(false)\n\n  const resizeLineRef = shallowRef<HTMLElement>()\n  const colgroupRef = shallowRef<HTMLElement>()\n  const headerRef = shallowRef<HTMLElement>()\n\n  /**\n   * 修正列样式\n   */\n  function correctColumnStyle() {\n    // 获取表格容器宽度\n    const containerWidth = scrollRef.value?.containerRef?.clientWidth\n\n    if (!containerWidth || !leafColumns.value.length) return\n\n    allocateLeafColumnWidths(leafColumns.value, containerWidth)\n\n    const fixedLeft = leafColumns.value.filter((column) => column.fixed === 'left')\n    const fixedRight = leafColumns.value.filter((column) => column.fixed === 'right')\n\n    fixedLeft.reduce((acc, cur) => {\n      cur.style.left = acc\n      return acc + (cur.width ?? cur.minWidth!)\n    }, 0)\n\n    fixedRight.reduceRight((acc, cur) => {\n      cur.style.right = acc\n      return acc + (cur.width ?? cur.minWidth!)\n    }, 0)\n  }\n\n  watchEffect(correctColumnStyle)\n\n  // 容器宽度变化（窗口缩放、父布局变化、纵向滚动条出现/消失等）时重新分配列宽，\n  // 直到所有未显式设宽的列回落到 minWidth。计算开销较大，用防抖合并连续的 resize 触发。\n  const debouncedCorrectColumnStyle = debounce(correctColumnStyle)\n  const containerRef = computed(() => scrollRef.value?.containerRef ?? null)\n  useResizeObserver({ targets: containerRef, onResize: debouncedCorrectColumnStyle })\n\n  function updateResizeLine(transformX: number): void {\n    if (!resizeLineRef.value) return\n    resizeLineRef.value.style.transform = `translateX(${transformX}px)`\n  }\n\n  // 表格相对于页面左边缘的偏移量，\n  // 此处作为缓存以减少频繁地调用 getBoundingClientRect 方法\n  let containerLeft = 0\n  let originX = 0\n  let originWidth = 0\n  let currentResizeColumn: ColumnNode | null = null\n\n  function handleResizeMousedown(e: MouseEvent, resizeColumn: ColumnNode): void {\n    const tableEl = scrollRef.value?.el\n    if (!tableEl) return\n\n    showResizeLine.value = true\n    currentResizeColumn = resizeColumn\n    originX = e.pageX\n    originWidth = resizeColumn.width ?? 0\n\n    const { left } = tableEl.getBoundingClientRect()\n    containerLeft = left\n\n    nextTick(() => {\n      updateResizeLine(e.pageX - left)\n    })\n\n    document.addEventListener('mousemove', handleResizeMousemove)\n    document.addEventListener('mouseup', handleResizeMouseup)\n  }\n\n  function handleResizeMousemove(e: MouseEvent): void {\n    updateResizeLine(e.pageX - containerLeft)\n  }\n\n  function handleResizeMouseup(e: MouseEvent): void {\n    currentResizeColumn!.width = Math.max(\n      originWidth + e.pageX - originX,\n      currentResizeColumn!.minWidth!\n    )\n    currentResizeColumn!.explicitWidth = true\n\n    showResizeLine.value = false\n    currentResizeColumn = null\n    correctColumnStyle()\n\n    document.removeEventListener('mouseup', handleResizeMouseup)\n    document.removeEventListener('mousemove', handleResizeMousemove)\n  }\n\n  provide(TableResizeKey, { handleResizeMousedown, headerRef })\n\n  return { resizeLineRef, colgroupRef, showResizeLine, handleResizeMousedown }\n}\n"],"mappings":";;;;;;AAqBA,SAAgB,aAAa,SAAwC;CACnE,MAAM,EAAE,WAAW,gBAAgB;CAEnC,MAAM,iBAAiB,WAAW,KAAK;CAEvC,MAAM,gBAAgB,WAAwB;CAC9C,MAAM,cAAc,WAAwB;CAC5C,MAAM,YAAY,WAAwB;;;;CAK1C,SAAS,qBAAqB;EAE5B,MAAM,iBAAiB,UAAU,OAAO,cAAc;EAEtD,IAAI,CAAC,kBAAkB,CAAC,YAAY,MAAM,QAAQ;EAElD,yBAAyB,YAAY,OAAO,cAAc;EAE1D,MAAM,YAAY,YAAY,MAAM,QAAQ,WAAW,OAAO,UAAU,MAAM;EAC9E,MAAM,aAAa,YAAY,MAAM,QAAQ,WAAW,OAAO,UAAU,OAAO;EAEhF,UAAU,QAAQ,KAAK,QAAQ;GAC7B,IAAI,MAAM,OAAO;GACjB,OAAO,OAAO,IAAI,SAAS,IAAI;EACjC,GAAG,CAAC;EAEJ,WAAW,aAAa,KAAK,QAAQ;GACnC,IAAI,MAAM,QAAQ;GAClB,OAAO,OAAO,IAAI,SAAS,IAAI;EACjC,GAAG,CAAC;CACN;CAEA,YAAY,kBAAkB;CAI9B,MAAM,8BAA8B,SAAS,kBAAkB;CAC/D,MAAM,eAAe,eAAe,UAAU,OAAO,gBAAgB,IAAI;CACzE,kBAAkB;EAAE,SAAS;EAAc,UAAU;CAA4B,CAAC;CAElF,SAAS,iBAAiB,YAA0B;EAClD,IAAI,CAAC,cAAc,OAAO;EAC1B,cAAc,MAAM,MAAM,YAAY,cAAc,WAAW;CACjE;CAIA,IAAI,gBAAgB;CACpB,IAAI,UAAU;CACd,IAAI,cAAc;CAClB,IAAI,sBAAyC;CAE7C,SAAS,sBAAsB,GAAe,cAAgC;EAC5E,MAAM,UAAU,UAAU,OAAO;EACjC,IAAI,CAAC,SAAS;EAEd,eAAe,QAAQ;EACvB,sBAAsB;EACtB,UAAU,EAAE;EACZ,cAAc,aAAa,SAAS;EAEpC,MAAM,EAAE,SAAS,QAAQ,sBAAsB;EAC/C,gBAAgB;EAEhB,eAAe;GACb,iBAAiB,EAAE,QAAQ,IAAI;EACjC,CAAC;EAED,SAAS,iBAAiB,aAAa,qBAAqB;EAC5D,SAAS,iBAAiB,WAAW,mBAAmB;CAC1D;CAEA,SAAS,sBAAsB,GAAqB;EAClD,iBAAiB,EAAE,QAAQ,aAAa;CAC1C;CAEA,SAAS,oBAAoB,GAAqB;EAChD,oBAAqB,QAAQ,KAAK,IAChC,cAAc,EAAE,QAAQ,SACxB,oBAAqB,QACvB;EACA,oBAAqB,gBAAgB;EAErC,eAAe,QAAQ;EACvB,sBAAsB;EACtB,mBAAmB;EAEnB,SAAS,oBAAoB,WAAW,mBAAmB;EAC3D,SAAS,oBAAoB,aAAa,qBAAqB;CACjE;CAEA,QAAQ,gBAAgB;EAAE;EAAuB;CAAU,CAAC;CAE5D,OAAO;EAAE;EAAe;EAAa;EAAgB;CAAsB;AAC7E"}

package/dist/types/collapse.d.ts

@@ -43,7 +43,7 @@ interface CollapseItemProps {
    * @default false
    */
   modelValue?: boolean;
-  /** 标题文本（也可使用 #title 插槽） */
+  /** 标题文本（也可通过 #header 插槽自定义整个头部） */
   title?: string;
   /** 是否禁用 */
   disabled?: boolean;
@@ -52,6 +52,12 @@ interface CollapseItemProps {
    * 在 `UCollapse` 内由父组件 `expandIcon` 统一管理。
    */
   expandIcon?: Component;
+  /**
+   * 折叠动画结束后卸载内容 DOM（展开时重新挂载），减少长列表的内存与渲染成本。
+   * 注意：卸载会丢失内容区的本地组件状态。
+   * @default false
+   */
+  destroyOnCollapse?: boolean;
 }
 interface CollapseItemEmits {
   (e: 'update:modelValue', value: boolean): void;

package/dist/types/layout.d.ts

@@ -37,9 +37,24 @@ interface LayoutProps {
    * @description 注意：当为true时，gap固定且需要有一项宽度为固定像素才能够拖拽
    */
   resizable?: boolean;
+  /**
+   * 每列的最小宽度（px），按列索引与 cols 对应，仅 resizable 拖拽时生效。
+   * 未指定的列不限制（可被压至 0）。
+   * @example
+   * ```ts
+   * // 三栏拖拽时，左栏不小于 120px，右栏不小于 200px
+   * :cols="['1fr', '2fr', '300px']" :col-min-sizes="[120, undefined, 200]"
+   * ```
+   */
+  colMinSizes?: (number | undefined)[];
 }
 /** 布局组件定义的事件 */
-interface LayoutEmits {}
+interface LayoutEmits {
+  /** 开始拖拽调节某条间隔（index 为间隔左侧列的索引） */
+  (e: 'resize-start', index: number): void;
+  /** 拖拽调节结束 */
+  (e: 'resize-end', index: number): void;
+}
 /** 布局组件暴露的属性和方法(组件内部使用) */
 interface _LayoutExposed {}
 /** 布局组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "files": [
     "dist",
     "src"
@@ -71,12 +71,12 @@
   "peerDependencies": {
     "@cat-kit/core": ">=1.1.8",
     "@cat-kit/fe": ">=1.1.8",
-    "@veltra/compositions": "^1.5.0",
-    "@veltra/directives": "^1.5.0",
+    "@veltra/compositions": "^1.6.0",
+    "@veltra/directives": "^1.6.0",
     "@veltra/icons": "^1.5.0",
-    "@veltra/sheet-core": "^2.1.1",
-    "@veltra/styles": "^1.5.0",
-    "@veltra/utils": "^1.5.0",
+    "@veltra/sheet-core": "^2.3.0",
+    "@veltra/styles": "^1.6.0",
+    "@veltra/utils": "^1.6.0",
     "vue": ">=3.5.41"
   },
   "peerDependenciesMeta": {

package/src/components/button/button.vue

@@ -65,8 +65,8 @@ const classList = computed(() => {
 })
 
 const ripple = computed(() => {
-  if (props.disabled || props.loading) return false
-  if ((props.plain || props.text) && props.type) {
+  if (props.disabled || props.loading || props.text) return false
+  if (props.plain && props.type) {
     return bem.is(`ripple-${props.type}`)
   }
   return true

package/src/components/button/style.scss

@@ -47,17 +47,8 @@ $root-name: button;
   }
 
   @include m.is(plain) {
-    background-color: fn.use-var(bg-color, top);
-    border-color: fn.use-var(color, default, 'dark-1');
+    border-color: transparent;
     box-shadow: none;
-
-    &:hover {
-      border-color: fn.use-var(color, default, 'dark-1');
-    }
-
-    &.is-disabled {
-      color: fn.use-var(text-color, second);
-    }
   }
 
   // 尺寸
@@ -122,12 +113,9 @@ $root-name: button;
 
       @include m.is(text) {
         color: fn.use-var(color, $type);
+        border-color: transparent;
         box-shadow: none;
 
-        &:hover {
-          box-shadow: 0px 0px 0px 1px fn.use-var(color, $type);
-        }
-
         @include m.is-not(disabled, loading) {
           &:hover,
           &:focus {
@@ -140,39 +128,30 @@ $root-name: button;
         }
 
         @include m.is(disabled, loading) {
+          border-color: transparent;
           color: fn.use-var(color, $type, 'light-5');
         }
       }
 
       @include m.is(plain) {
+        border-color: transparent;
         color: fn.component-var(button, #{$type}-plain-color, fn.use-var(color, $type));
         background-color: fn.component-var(
           button,
           #{$type}-plain-bg,
           fn.use-var(color, $type, light-9)
         );
-        border-color: fn.component-var(
-          button,
-          #{$type}-plain-border,
-          fn.use-var(color, $type, light-5)
-        );
-        box-shadow: none;
 
         @include m.is-not(disabled, loading) {
           &:hover {
-            color: fn.use-var(color, $type);
-            border-color: fn.use-var(color, $type);
-            background-color: fn.use-var(color, $type, light-9);
+            background-color: fn.use-var(color, $type, light-7);
           }
         }
 
-        &:active {
-          box-shadow: none;
-        }
-
-        &.is-disabled {
+        @include m.is(disabled, loading) {
+          border-color: transparent;
           color: fn.use-var(color, $type, light-5);
-          border-color: fn.use-var(color, $type, light-8);
+          background-color: fn.use-var(color, $type, light-9);
         }
       }
     }

package/src/components/collapse/__test__/collapse.test.ts

@@ -353,3 +353,62 @@ describe('CollapseItem standalone', () => {
     }
   })
 })
+
+describe('CollapseItem destroyOnCollapse', () => {
+  it('keeps content mounted by default even when collapsed', async () => {
+    const { host, unmount } = mountStandaloneItem({ title: 'Standalone' })
+
+    try {
+      await nextTick()
+      expect(host.querySelector('.u-collapse__item.is-active')).toBeFalsy()
+      expect(host.querySelector('.u-collapse__content')?.textContent).toBe('Standalone content')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('does not mount content when initially collapsed', async () => {
+    const { host, unmount } = mountStandaloneItem({ title: 'Standalone', destroyOnCollapse: true })
+
+    try {
+      await nextTick()
+      expect(host.querySelector('.u-collapse__item.is-active')).toBeFalsy()
+      // 内容未挂载，但包装容器仍在（承载高度动画与 aria-hidden）
+      expect(host.querySelector('.u-collapse__content')).toBeFalsy()
+      expect(host.querySelector('.u-collapse__content-wrapper')).toBeTruthy()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('unmounts content after collapse and remounts on expand', async () => {
+    const { host, model, unmount } = mountStandaloneItem({
+      title: 'Standalone',
+      modelValue: true,
+      destroyOnCollapse: true
+    })
+
+    try {
+      await nextTick()
+      expect(host.querySelector('.u-collapse__content')?.textContent).toBe('Standalone content')
+
+      const header = host.querySelector('.u-collapse__header') as HTMLElement
+      header.click()
+      await nextTick()
+
+      expect(model.value).toBe(false)
+      // happy-dom 无真实布局，收起动画直接落定，内容随即卸载
+      await nextTick()
+      expect(host.querySelector('.u-collapse__content')).toBeFalsy()
+
+      header.click()
+      await nextTick()
+      await nextTick()
+
+      expect(model.value).toBe(true)
+      expect(host.querySelector('.u-collapse__content')?.textContent).toBe('Standalone content')
+    } finally {
+      unmount()
+    }
+  })
+})

package/src/components/collapse/collapse-item.vue

@@ -10,18 +10,16 @@
       @keydown.enter.prevent="handleClick"
       @keydown.space.prevent="handleClick"
     >
-      <span :class="cls.e('title')">
-        <slot name="title">{{ title }}</slot>
-      </span>
+      <slot name="header" :is-active="isActive">
+        <span :class="cls.e('title')">{{ title }}</span>
 
-      <span :class="cls.e('icon')">
-        <slot name="icon" :is-active="isActive">
+        <span :class="cls.e('icon')">
           <UIcon><component :is="iconComponent" /></UIcon>
-        </slot>
-      </span>
+        </span>
+      </slot>
     </div>
     <div ref="wrapperEl" :class="cls.e('content-wrapper')" :aria-hidden="!isActive">
-      <div :class="cls.e('content')">
+      <div v-if="contentMounted" :class="cls.e('content')">
         <slot />
       </div>
     </div>
@@ -32,7 +30,7 @@
 import { useModel } from '@veltra/compositions'
 import { ArrowDown } from '@veltra/icons/normal'
 import { bem, ExpandTransition } from '@veltra/utils'
-import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import type { CollapseItemEmits, CollapseItemProps } from '../../types'
 import { UIcon } from '../icon'
@@ -43,6 +41,13 @@ defineOptions({ name: 'UCollapseItem' })
 const props = withDefaults(defineProps<CollapseItemProps>(), { modelValue: false })
 const emit = defineEmits<CollapseItemEmits>()
 
+defineSlots<{
+  /** 自定义整个头部，作用域参数 `isActive` 指示展开状态；缺省渲染 title + 展开图标 */
+  header?: (scope: { isActive: boolean }) => any
+  /** 折叠面板内容 */
+  default?: () => any
+}>()
+
 const context = inject(CollapseDIKey, undefined)
 
 const cls = context?.cls ?? bem('collapse')
@@ -94,6 +99,9 @@ const handleClick = () => {
 
 const wrapperEl = ref<HTMLElement>()
 
+/** 内容是否挂载：destroyOnCollapse 时折叠态卸载内容 DOM，展开前重新挂载 */
+const contentMounted = ref(isActive.value || !props.destroyOnCollapse)
+
 onMounted(() => {
   if (context && props.value !== undefined) {
     context.register(props.value)
@@ -102,9 +110,22 @@ onMounted(() => {
   expandTransition.setExpanded(wrapperEl.value, isActive.value)
 })
 
-watch(isActive, (active) => {
+watch(isActive, async (active) => {
+  if (active) {
+    // 展开前先挂载内容，待 DOM 更新后再测量高度驱动展开动画
+    if (!contentMounted.value) {
+      contentMounted.value = true
+      await nextTick()
+    }
+    if (!wrapperEl.value || !isActive.value) return
+    expandTransition.expand(wrapperEl.value)
+    return
+  }
   if (!wrapperEl.value) return
-  active ? expandTransition.expand(wrapperEl.value) : expandTransition.collapse(wrapperEl.value)
+  // 收起动画落定后再卸载内容 DOM；期间被重新展开则不卸载
+  expandTransition.collapse(wrapperEl.value, () => {
+    if (!isActive.value && props.destroyOnCollapse) contentMounted.value = false
+  })
 })
 
 onBeforeUnmount(() => {

package/src/components/dialog/style.scss

@@ -76,10 +76,14 @@ $root-name: dialog;
   }
 
   @include m.e(body) {
-    padding: 8px;
     background-color: fn.use-var(bg-color, top);
     backdrop-filter: fn.use-var(bg-filter);
     flex-grow: 1;
+
+    // padding 加在滚动内容而非 body 本身：u-scroll 的 overflow 会裁切子元素 box-shadow
+    @include m.bem(scroll, content) {
+      padding: 8px;
+    }
   }
 
   @include m.e(footer) {

package/src/components/layout/layout.vue

@@ -11,6 +11,7 @@
       direction="vertical"
       @resize="handleResize($event, index)"
       @resize-start="handleStartResize(index)"
+      @resize-end="emit('resize-end', index)"
     >
     </ULayoutResizer>
 
@@ -37,7 +38,7 @@ import {
   nextTick
 } from 'vue'
 
-import type { LayoutProps } from '../../types'
+import type { LayoutEmits, LayoutProps } from '../../types'
 import { LayoutDIKey } from './di'
 import ULayoutResizer from './layout-resizer.vue'
 
@@ -45,6 +46,8 @@ defineOptions({ name: 'ULayout' })
 
 const props = withDefaults(defineProps<LayoutProps>(), { tag: 'div' })
 
+const emit = defineEmits<LayoutEmits>()
+
 const cls = bem('layout')
 
 const templateCols = ref<string[]>([])
@@ -87,20 +90,25 @@ function getResizeOffsets() {
 
 watch([() => props.resizable, containerRef, () => props.cols], () => {
   nextTick(() => {
-    getResizeOffsets()
+    syncResizers()
   })
 })
 
 useResizeObserver({
   targets: containerRef,
   onResize() {
-    getResizeOffsets()
-    resizerRefs.value.forEach((r, i) => {
-      r.update(resizerOffsets.value![i]!)
-    })
+    syncResizers()
   }
 })
 
+/** 重新测量各列边界并同步所有拖拽手柄位置（容器尺寸或 cols 程序化变化后调用） */
+function syncResizers() {
+  getResizeOffsets()
+  resizerRefs.value.forEach((r, i) => {
+    r.update(resizerOffsets.value![i]!)
+  })
+}
+
 // const horizontalResizerList = []
 
 // const resizing = shallowRef(false)
@@ -117,11 +125,14 @@ const handleStartResize = (index: number) => {
   const nextDom = container.children[index + 1] as HTMLElement | undefined
   prevSize = prevDom ? prevDom.getBoundingClientRect().width : 0
   nextSize = nextDom ? nextDom.getBoundingClientRect().width : 0
+  emit('resize-start', index)
 }
 const handleResize = (offset: number, index: number) => {
-  // 钳位到 [-prevSize, nextSize]，避免轨道尺寸出现负值——
+  // 钳位到 [colMin-prevSize, nextSize-colMin]，避免轨道尺寸出现负值或小于列最小宽度——
   // 一旦 grid-template-columns 中带负值，整条声明会被浏览器丢弃。
-  const clamped = Math.max(-prevSize, Math.min(nextSize, offset))
+  const minPrev = props.colMinSizes?.[index] ?? 0
+  const minNext = props.colMinSizes?.[index + 1] ?? 0
+  const clamped = Math.max(minPrev - prevSize, Math.min(nextSize - minNext, offset))
   templateCols.value[index] = `${prevSize + clamped}px`
   templateCols.value[index + 1] = `${nextSize - clamped}px`
 }

package/src/components/table/use-col-resize.ts

@@ -1,4 +1,6 @@
-import { nextTick, provide, shallowRef, watchEffect, type ShallowRef } from 'vue'
+import { debounce } from '@cat-kit/core'
+import { useResizeObserver } from '@veltra/compositions'
+import { computed, nextTick, provide, shallowRef, watchEffect, type ShallowRef } from 'vue'
 
 import type { ScrollExposed } from '../../types'
 import { allocateLeafColumnWidths } from './allocate-column-widths'
@@ -53,6 +55,12 @@ export function useColResize(options: Options): UseColResizeReturned {
 
   watchEffect(correctColumnStyle)
 
+  // 容器宽度变化（窗口缩放、父布局变化、纵向滚动条出现/消失等）时重新分配列宽，
+  // 直到所有未显式设宽的列回落到 minWidth。计算开销较大，用防抖合并连续的 resize 触发。
+  const debouncedCorrectColumnStyle = debounce(correctColumnStyle)
+  const containerRef = computed(() => scrollRef.value?.containerRef ?? null)
+  useResizeObserver({ targets: containerRef, onResize: debouncedCorrectColumnStyle })
+
   function updateResizeLine(transformX: number): void {
     if (!resizeLineRef.value) return
     resizeLineRef.value.style.transform = `translateX(${transformX}px)`

package/src/types/collapse.ts

@@ -52,7 +52,7 @@ export interface CollapseItemProps {
    */
   modelValue?: boolean
 
-  /** 标题文本（也可使用 #title 插槽） */
+  /** 标题文本（也可通过 #header 插槽自定义整个头部） */
   title?: string
 
   /** 是否禁用 */
@@ -63,6 +63,13 @@ export interface CollapseItemProps {
    * 在 `UCollapse` 内由父组件 `expandIcon` 统一管理。
    */
   expandIcon?: Component
+
+  /**
+   * 折叠动画结束后卸载内容 DOM（展开时重新挂载），减少长列表的内存与渲染成本。
+   * 注意：卸载会丢失内容区的本地组件状态。
+   * @default false
+   */
+  destroyOnCollapse?: boolean
 }
 
 export interface CollapseItemEmits {

package/src/types/layout.ts

@@ -38,10 +38,25 @@ export interface LayoutProps {
    * @description 注意：当为true时，gap固定且需要有一项宽度为固定像素才能够拖拽
    */
   resizable?: boolean
+  /**
+   * 每列的最小宽度（px），按列索引与 cols 对应，仅 resizable 拖拽时生效。
+   * 未指定的列不限制（可被压至 0）。
+   * @example
+   * ```ts
+   * // 三栏拖拽时，左栏不小于 120px，右栏不小于 200px
+   * :cols="['1fr', '2fr', '300px']" :col-min-sizes="[120, undefined, 200]"
+   * ```
+   */
+  colMinSizes?: (number | undefined)[]
 }
 
 /** 布局组件定义的事件 */
-export interface LayoutEmits {}
+export interface LayoutEmits {
+  /** 开始拖拽调节某条间隔（index 为间隔左侧列的索引） */
+  (e: 'resize-start', index: number): void
+  /** 拖拽调节结束 */
+  (e: 'resize-end', index: number): void
+}
 
 /** 布局组件暴露的属性和方法(组件内部使用) */
 export interface _LayoutExposed {}