@veltra/desktop 1.3.5 → 1.3.6

package/dist/components/select/use-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-options.js","names":["o","chainObj"],"sources":["../../../src/components/select/use-options.ts"],"sourcesContent":["import { debounce, o as chainObj } from '@cat-kit/core'\nimport { fieldKey } from '@veltra/utils'\nimport { computed, shallowRef, watch, type ShallowRef, type ComputedRef } from 'vue'\n\nimport type { SelectProps } from '../../types'\n\ninterface Options {\n  props: SelectProps\n}\n\ninterface UseOptionsReturned {\n  /** 查询字符串 */\n  queryString: ShallowRef<string>\n  /** 选项 */\n  options: ComputedRef<Record<string, any>[]>\n  /** 所有选项 */\n  allOptions: ComputedRef<Record<string, any>[]>\n  /** 将临时选项转换为创建的选项 */\n  temOptionsToCreatedOptions: () => void\n  /** 清空用户创建的选项 */\n  clearCreatedOptions: () => void\n}\n\n// 允许创建的实现\n// 1. 在过滤时将选项加入待选列表中\n// 2. 如果选择了改临时选项，则取消该选项的临时标记\n// 3. 如果第二次重新选择\n\nexport function useOptions(o: Options): UseOptionsReturned {\n  const { props } = o\n\n  /** 筛选 */\n  const queryString = shallowRef('')\n\n  const remoteOptions = shallowRef<Record<string, any>[]>([])\n  const filteredOptions = shallowRef<Record<string, any>[]>([])\n  // 临时选项\n  const tempOptions = shallowRef<({ __isTemp: true } & Record<string, any>)[]>([])\n  // 创建的选项\n  const createdOptions = shallowRef<({ __isTemp: false } & Record<string, any>)[]>([])\n\n  function temOptionsToCreatedOptions() {\n    createdOptions.value = tempOptions.value.map((item) => {\n      return { ...item, __isTemp: false }\n    })\n  }\n\n  function clearCreatedOptions() {\n    createdOptions.value = []\n  }\n\n  const setTempOption = (qs: string, options?: Record<string, any>[]) => {\n    if (!qs?.trim() || !props.creatable) {\n      tempOptions.value = []\n      return\n    }\n    const labelKey = fieldKey(props.labelKey, 'label')\n    const valueKey = fieldKey(props.valueKey, 'value')\n    const exactMatch = options\n      ? options.some((option) => {\n          return chainObj(option).get(labelKey) === qs\n        })\n      : false\n\n    if (!exactMatch) {\n      tempOptions.value = [{ [labelKey]: qs, [valueKey]: qs, __isTemp: true }]\n    }\n  }\n\n  const allOptions = computed(() => {\n    const { options } = props\n    if (typeof options === 'function') return remoteOptions.value\n    return options ?? []\n  })\n\n  /** 展示的选项 */\n  const options = computed(() => {\n    const { options } = props\n\n    if (typeof options === 'function') return remoteOptions.value\n\n    const prependOptions = tempOptions.value?.length ? tempOptions.value : createdOptions.value\n\n    if (!options) {\n      return prependOptions\n    }\n\n    return [...prependOptions, ...filteredOptions.value]\n  })\n\n  // TODO: 如有性能问题可以考虑优化\n  watch(\n    [queryString, () => props.options],\n    debounce(async ([qs, propsOptions]) => {\n      if (typeof propsOptions === 'function') {\n        const options = await propsOptions(qs)\n        remoteOptions.value = options\n        setTempOption(qs, options)\n      } else {\n        // 当选项不是函数时，可以创建选项\n        const labelKey = fieldKey(props.labelKey, 'label')\n\n        if (!qs) {\n          filteredOptions.value = propsOptions ?? []\n          setTempOption(qs, filteredOptions.value)\n          return\n        }\n\n        const _filteredOptions =\n          propsOptions?.filter((item) => {\n            return chainObj(item).get(labelKey)?.includes(qs) ?? false\n          }) ?? []\n\n        setTempOption(qs, _filteredOptions)\n        filteredOptions.value = _filteredOptions\n      }\n    }, 200),\n    { immediate: true }\n  )\n\n  return { queryString, options, allOptions, temOptionsToCreatedOptions, clearCreatedOptions }\n}\n"],"mappings":";;;;AA4BA,SAAgB,WAAW,KAAgC;CACzD,MAAM,EAAE,UAAUA;;CAGlB,MAAM,cAAc,WAAW,EAAE;CAEjC,MAAM,gBAAgB,WAAkC,CAAC,CAAC;CAC1D,MAAM,kBAAkB,WAAkC,CAAC,CAAC;CAE5D,MAAM,cAAc,WAAyD,CAAC,CAAC;CAE/E,MAAM,iBAAiB,WAA0D,CAAC,CAAC;CAEnF,SAAS,6BAA6B;EACpC,eAAe,QAAQ,YAAY,MAAM,KAAK,SAAS;GACrD,OAAO;IAAE,GAAG;IAAM,UAAU;GAAM;EACpC,CAAC;CACH;CAEA,SAAS,sBAAsB;EAC7B,eAAe,QAAQ,CAAC;CAC1B;CAEA,MAAM,iBAAiB,IAAY,YAAoC;EACrE,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC,MAAM,WAAW;GACnC,YAAY,QAAQ,CAAC;GACrB;EACF;EACA,MAAM,WAAW,SAAS,MAAM,UAAU,OAAO;EACjD,MAAM,WAAW,SAAS,MAAM,UAAU,OAAO;EAOjD,IAAI,EANe,UACf,QAAQ,MAAM,WAAW;GACvB,OAAOC,EAAS,MAAM,CAAC,CAAC,IAAI,QAAQ,MAAM;EAC5C,CAAC,IACD,QAGF,YAAY,QAAQ,CAAC;IAAG,WAAW;IAAK,WAAW;GAAI,UAAU;EAAK,CAAC;CAE3E;CAEA,MAAM,aAAa,eAAe;EAChC,MAAM,EAAE,YAAY;EACpB,IAAI,OAAO,YAAY,YAAY,OAAO,cAAc;EACxD,OAAO,WAAW,CAAC;CACrB,CAAC;;CAGD,MAAM,UAAU,eAAe;EAC7B,MAAM,EAAE,YAAY;EAEpB,IAAI,OAAO,YAAY,YAAY,OAAO,cAAc;EAExD,MAAM,iBAAiB,YAAY,OAAO,SAAS,YAAY,QAAQ,eAAe;EAEtF,IAAI,CAAC,SACH,OAAO;EAGT,OAAO,CAAC,GAAG,gBAAgB,GAAG,gBAAgB,KAAK;CACrD,CAAC;CAGD,MACE,CAAC,mBAAmB,MAAM,OAAO,GACjC,SAAS,OAAO,CAAC,IAAI,kBAAkB;EACrC,IAAI,OAAO,iBAAiB,YAAY;GACtC,MAAM,UAAU,MAAM,aAAa,EAAE;GACrC,cAAc,QAAQ;GACtB,cAAc,IAAI,OAAO;EAC3B,OAAO;GAEL,MAAM,WAAW,SAAS,MAAM,UAAU,OAAO;GAEjD,IAAI,CAAC,IAAI;IACP,gBAAgB,QAAQ,gBAAgB,CAAC;IACzC,cAAc,IAAI,gBAAgB,KAAK;IACvC;GACF;GAEA,MAAM,mBACJ,cAAc,QAAQ,SAAS;IAC7B,OAAOA,EAAS,IAAI,CAAC,CAAC,IAAI,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK;GACvD,CAAC,KAAK,CAAC;GAET,cAAc,IAAI,gBAAgB;GAClC,gBAAgB,QAAQ;EAC1B;CACF,GAAG,GAAG,GACN,EAAE,WAAW,KAAK,CACpB;CAEA,OAAO;EAAE;EAAa;EAAS;EAAY;EAA4B;CAAoB;AAC7F"}
+{"version":3,"file":"use-options.js","names":["o","chainObj"],"sources":["../../../src/components/select/use-options.ts"],"sourcesContent":["import { debounce, o as chainObj } from '@cat-kit/core'\nimport { fieldKey } from '@veltra/utils'\nimport { computed, shallowRef, watch, type ShallowRef, type ComputedRef } from 'vue'\n\nimport type { SelectProps } from '../../types'\n\ninterface Options {\n  props: SelectProps\n}\n\ninterface UseOptionsReturned {\n  /** 查询字符串 */\n  queryString: ShallowRef<string>\n  /** 选项 */\n  options: ComputedRef<Record<string, any>[]>\n  /** 所有选项 */\n  allOptions: ComputedRef<Record<string, any>[]>\n  /** 将临时选项转换为创建的选项 */\n  temOptionsToCreatedOptions: () => void\n  /** 清空用户创建的选项 */\n  clearCreatedOptions: () => void\n}\n\n// 允许创建的实现\n// 1. 在过滤时将选项加入待选列表中\n// 2. 如果选择了该临时选项，则取消该选项的临时标记并并入已创建列表\n// 3. 多次创建累计保留，已创建项参与后续过滤匹配\n\nexport function useOptions(o: Options): UseOptionsReturned {\n  const { props } = o\n\n  /** 筛选 */\n  const queryString = shallowRef('')\n\n  const remoteOptions = shallowRef<Record<string, any>[]>([])\n  const filteredOptions = shallowRef<Record<string, any>[]>([])\n  // 临时选项\n  const tempOptions = shallowRef<({ __isTemp: true } & Record<string, any>)[]>([])\n  // 创建的选项\n  const createdOptions = shallowRef<({ __isTemp: false } & Record<string, any>)[]>([])\n\n  function getSourceOptions(propsOptions: SelectProps['options']) {\n    if (typeof propsOptions === 'function') return remoteOptions.value\n    return [...createdOptions.value, ...(propsOptions ?? [])]\n  }\n\n  /** 无查询时同步展示完整列表（含已创建项），避免选择后等高亮索引错位 */\n  function resetToSourceOptions() {\n    const sourceOptions = getSourceOptions(props.options)\n    if (typeof props.options === 'function') {\n      setTempOption('', remoteOptions.value)\n      return\n    }\n    filteredOptions.value = sourceOptions\n    tempOptions.value = []\n  }\n\n  function temOptionsToCreatedOptions() {\n    if (!tempOptions.value.length) return\n\n    createdOptions.value = [\n      ...createdOptions.value,\n      ...tempOptions.value.map((item) => {\n        return { ...item, __isTemp: false as const }\n      })\n    ]\n    // 立即清掉临时项并回到完整列表，不等待过滤防抖\n    resetToSourceOptions()\n  }\n\n  function clearCreatedOptions() {\n    createdOptions.value = []\n    resetToSourceOptions()\n  }\n\n  const setTempOption = (qs: string, options?: Record<string, any>[]) => {\n    if (!qs?.trim() || !props.creatable) {\n      tempOptions.value = []\n      return\n    }\n    const labelKey = fieldKey(props.labelKey, 'label')\n    const valueKey = fieldKey(props.valueKey, 'value')\n    const exactMatch = options\n      ? options.some((option) => {\n          return chainObj(option).get(labelKey) === qs\n        })\n      : false\n\n    tempOptions.value = exactMatch ? [] : [{ [labelKey]: qs, [valueKey]: qs, __isTemp: true }]\n  }\n\n  const allOptions = computed(() => {\n    const { options } = props\n    if (typeof options === 'function') return remoteOptions.value\n    return [...createdOptions.value, ...(options ?? [])]\n  })\n\n  /**\n   * 展示的选项\n   * @description 已创建选项并入过滤数据源参与匹配；临时选项（待创建）固定置顶\n   */\n  const options = computed(() => {\n    const { options } = props\n\n    if (typeof options === 'function') return remoteOptions.value\n\n    return [...tempOptions.value, ...filteredOptions.value]\n  })\n\n  const applyLocalFilter = (qs: string, propsOptions: Record<string, any>[] | undefined) => {\n    const labelKey = fieldKey(props.labelKey, 'label')\n    const sourceOptions = [...createdOptions.value, ...(propsOptions ?? [])]\n\n    if (!qs) {\n      filteredOptions.value = sourceOptions\n      setTempOption(qs, filteredOptions.value)\n      return\n    }\n\n    const _filteredOptions = sourceOptions.filter((item) => {\n      return chainObj(item).get(labelKey)?.includes(qs) ?? false\n    })\n\n    setTempOption(qs, _filteredOptions)\n    filteredOptions.value = _filteredOptions\n  }\n\n  // 仅对「有查询词」的本地过滤做防抖；清空查询同步生效，避免选中后列表延迟重建\n  const debouncedLocalFilter = debounce(\n    (qs: string, propsOptions: Record<string, any>[] | undefined) => {\n      // 防抖回调可能晚于清空查询到达，以当前 queryString 为准\n      if (!queryString.value) {\n        applyLocalFilter('', propsOptions)\n        return\n      }\n      applyLocalFilter(qs, propsOptions)\n    },\n    200\n  )\n\n  const debouncedRemoteFilter = debounce(async (qs: string, propsOptions: Function) => {\n    const options = await propsOptions(queryString.value)\n    remoteOptions.value = options\n    setTempOption(queryString.value, options)\n  }, 200)\n\n  watch(\n    [queryString, () => props.options, createdOptions],\n    ([qs, propsOptions]) => {\n      if (typeof propsOptions === 'function') {\n        debouncedRemoteFilter(qs, propsOptions)\n        return\n      }\n\n      if (!qs) {\n        applyLocalFilter('', propsOptions)\n        return\n      }\n\n      debouncedLocalFilter(qs, propsOptions)\n    },\n    { immediate: true }\n  )\n\n  return { queryString, options, allOptions, temOptionsToCreatedOptions, clearCreatedOptions }\n}\n"],"mappings":"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"}

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

@@ -7,11 +7,11 @@ type __VLS_Slots = {
   tip?: (scope: StepsSlotScope) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<StepsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-  "item-click": (item: Record<string, any>, index: number) => any;
   "update:current": (value?: string | number | undefined) => any;
+  "item-click": (item: Record<string, any>, index: number) => any;
 }, string, import("vue").PublicProps, Readonly<StepsProps> & Readonly<{
-  "onItem-click"?: ((item: Record<string, any>, index: number) => any) | undefined;
   "onUpdate:current"?: ((value?: string | number | undefined) => any) | undefined;
+  "onItem-click"?: ((item: Record<string, any>, index: number) => any) | undefined;
 }>, {
   labelKey: string;
   direction: "horizontal" | "vertical";

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

@@ -16,12 +16,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
   "update:modelValue": (value: string) => any;
-  click: (item: TabItem, index: number) => any;
   close: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClick?: ((item: TabItem, index: number) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
 }>, {
   closable: boolean;
   block: boolean;

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

@@ -16,12 +16,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
   "update:modelValue": (value: string) => any;
-  click: (item: TabItem, index: number) => any;
   close: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClick?: ((item: TabItem, index: number) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
 }>, {
   closable: boolean;
   rounded: boolean;

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

@@ -11,12 +11,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
   "update:modelValue": (value: string) => any;
-  click: (item: TabItem, index: number) => any;
   close: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClick?: ((item: TabItem, index: number) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
 }>, {
   closable: boolean;
   block: boolean;

package/dist/components/textarea/style2.css

@@ -82,6 +82,7 @@
 }
 .u-textarea.is-focus {
   border-color: var(--u-color-primary);
+  box-shadow: var(--u-focus-ring);
 }
 .u-textarea.is-disabled {
   background-color: var(--u-color-disabled);

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

@@ -21,11 +21,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
   onFocus?: (() => any) | undefined;
   onBlur?: (() => any) | undefined;
 }>, {
+  resize: boolean;
   placeholder: string;
   clearable: boolean;
   disabled: boolean;
   readonly: boolean;
-  resize: boolean;
   autosize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -21,9 +21,9 @@ declare const __VLS_base: import("vue").DefineComponent<TreeProps, _TreeExposed,
   "onNode-contextmenu"?: ((event: MouseEvent, node: TreeNode<Record<string, any>>) => any) | undefined;
   "onSelected-synced"?: ((selected?: Record<string, any> | undefined) => any) | undefined;
 }>, {
+  expandOnClickNode: boolean;
   labelKey: string;
   valueKey: string;
-  expandOnClickNode: boolean;
   childrenKey: string;
   data: Record<string, any>[];
   checkStrictly: boolean;

package/dist/components/tree-select/style2.css

@@ -35,8 +35,8 @@
   padding: 0;
   background: none;
 }
-.u-tree-select__filter {
-  margin-bottom: 4px;
+.u-tree-select__clear {
+  cursor: pointer;
 }
 .u-tree-select__content-header {
   padding: 4px 12px;
@@ -48,35 +48,26 @@
   flex-wrap: nowrap;
 }
 .u-tree-select__content-tree {
-  max-height: 200px;
-}
-.u-tree-select__panel--small .u-tree-select__content-filter {
-  padding: calc(var(--u-gap-small) / 2) var(--u-gap-small);
+  max-height: 240px;
 }
 .u-tree-select__panel--small .u-tree-select__content-tree {
-  padding: calc(var(--u-gap-small) / 2) var(--u-gap-small);
+  padding: var(--u-gap-small);
 }
 .u-tree-select__panel--small .u-tree-select__empty {
   height: var(--u-form-component-height-small);
   line-height: var(--u-form-component-height-small);
   padding: 0 var(--u-gap-small);
 }
-.u-tree-select__panel--default .u-tree-select__content-filter {
-  padding: calc(var(--u-gap-default) / 2) var(--u-gap-default);
-}
 .u-tree-select__panel--default .u-tree-select__content-tree {
-  padding: calc(var(--u-gap-default) / 2) var(--u-gap-default);
+  padding: var(--u-gap-default);
 }
 .u-tree-select__panel--default .u-tree-select__empty {
   height: var(--u-form-component-height-default);
   line-height: var(--u-form-component-height-default);
   padding: 0 var(--u-gap-default);
 }
-.u-tree-select__panel--large .u-tree-select__content-filter {
-  padding: calc(var(--u-gap-large) / 2) var(--u-gap-large);
-}
 .u-tree-select__panel--large .u-tree-select__content-tree {
-  padding: calc(var(--u-gap-large) / 2) var(--u-gap-large);
+  padding: var(--u-gap-large);
 }
 .u-tree-select__panel--large .u-tree-select__empty {
   height: var(--u-form-component-height-large);

package/dist/components/tree-select/tree-select.js

@@ -2,10 +2,10 @@ import _sfc_main$1 from "../icon/icon.js";
 import _sfc_main$2 from "../dropdown/dropdown.js";
 import input_default from "../input/input.js";
 import _sfc_main$3 from "../tree/tree.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, renderSlot, shallowRef, toDisplayString, unref, useModel, useSlots, watch, withCtx } from "vue";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, renderSlot, shallowRef, toDisplayString, unref, useModel, useSlots, useTemplateRef, watch, withCtx, withModifiers } from "vue";
 import { useFormFallbackProps } from "@veltra/compositions";
 import { FORM_EMPTY_CONTENT, bem, fieldKey, injectFormContext } from "@veltra/utils";
-import { ArrowDown, Search } from "@veltra/icons/normal";
+import { ArrowDown, Close } from "@veltra/icons/normal";
 import { dfs, o } from "@cat-kit/core";
 //#region src/components/tree-select/tree-select.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
@@ -93,6 +93,52 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		const model = useModel(__props, "modelValue");
 		const label = shallowRef();
+		const dropdownVisible = shallowRef(false);
+		/**
+		* 是否处于查询态：决定触发输入框显示查询串还是选中标签。
+		* 与面板可见状态解耦 —— 选择后立即退出查询态，
+		* 不等面板关闭动画结束（否则显示值会延迟一个动画时长才恢复）。
+		*/
+		const querying = shallowRef(false);
+		const inputRef = useTemplateRef("inputRef");
+		/** 触发输入框的值：查询态下承载查询串，否则展示选中标签 */
+		const inputValue = computed(() => {
+			if (props.filterable && querying.value) return qs.value;
+			return props.text ?? (model.value ? label.value : void 0);
+		});
+		/** 查询态下已选标签降级为占位提示 */
+		const inputPlaceholder = computed(() => {
+			const display = props.text ?? (model.value ? label.value : void 0);
+			if (props.filterable && querying.value && display) return display;
+			return props.placeholder;
+		});
+		function handleQueryInput(value) {
+			if (!props.filterable) return;
+			qs.value = value;
+		}
+		const hovered = shallowRef(false);
+		/** 悬停且存在选中值时展示清除按钮（替代下拉箭头） */
+		const showClear = computed(() => {
+			if (!props.clearable || disabled.value || !hovered.value) return false;
+			return !!(props.text ?? (model.value ? label.value : void 0));
+		});
+		/**
+		* 过滤模式下拦截输入区域的点击：
+		* 阻止 dropdown 的 trigger 开合切换，保持面板展开以不中断输入。
+		* 非输入区域（箭头、留白）放行，维持原开合行为。
+		*/
+		function handleTriggerClickCapture(e) {
+			if (!props.filterable || disabled.value) return;
+			if (!(e.target instanceof HTMLInputElement)) return;
+			e.stopPropagation();
+			if (!dropdownVisible.value) dropdownRef.value?.open();
+		}
+		watch(dropdownVisible, (visible) => {
+			if (visible && props.filterable) {
+				querying.value = true;
+				nextTick(() => inputRef.value?.el?.focus());
+			} else if (!visible) querying.value = false;
+		});
 		const { formProps } = injectFormContext();
 		const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props]);
 		const treeRef = shallowRef();
@@ -136,6 +182,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			else label.value = "";
 			emit("change", selectedData);
 			emit("update:text", label.value);
+			querying.value = false;
+			qs.value = "";
 			dropdownRef.value?.close();
 		};
 		const handleDropdownVisible = (visible) => {
@@ -153,24 +201,47 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"content-style": __props.contentStyle,
 				ref_key: "dropdownRef",
 				ref: dropdownRef,
+				visible: dropdownVisible.value,
+				"onUpdate:visible": [_cache[0] || (_cache[0] = ($event) => dropdownVisible.value = $event), handleDropdownVisible],
 				"min-width": __props.minWidth,
 				width: __props.width,
 				disabled: unref(disabled),
-				"onUpdate:visible": handleDropdownVisible
+				onMouseenter: _cache[1] || (_cache[1] = ($event) => hovered.value = true),
+				onMouseleave: _cache[2] || (_cache[2] = ($event) => hovered.value = false)
 			}), {
 				trigger: withCtx(() => [createVNode(unref(input_default), {
+					ref_key: "inputRef",
+					ref: inputRef,
 					size: unref(size),
 					disabled: unref(disabled),
-					placeholder: __props.placeholder,
-					clearable: __props.clearable,
-					"model-value": __props.text ?? (model.value ? label.value : void 0),
-					onClear: handleClear,
-					"native-readonly": ""
+					placeholder: inputPlaceholder.value,
+					clearable: false,
+					"model-value": inputValue.value,
+					"onUpdate:modelValue": handleQueryInput,
+					"native-readonly": !__props.filterable || !querying.value,
+					onClickCapture: handleTriggerClickCapture
 				}, createSlots({
-					suffix: withCtx(() => [createVNode(unref(_sfc_main$1), { class: normalizeClass(unref(cls).e("arrow")) }, {
-						default: withCtx(() => [createVNode(unref(ArrowDown))]),
+					suffix: withCtx(() => [createVNode(Transition, {
+						name: "zoom-in",
+						mode: "out-in"
+					}, {
+						default: withCtx(() => [showClear.value ? (openBlock(), createBlock(unref(_sfc_main$1), {
+							class: normalizeClass(unref(cls).e("clear")),
+							title: "清除",
+							key: "clear",
+							onClick: withModifiers(handleClear, ["stop"])
+						}, {
+							default: withCtx(() => [createVNode(unref(Close))]),
+							_: 1
+						}, 8, ["class"])) : (openBlock(), createBlock(unref(_sfc_main$1), {
+							class: normalizeClass(unref(cls).e("arrow")),
+							key: "arrow"
+						}, {
+							default: withCtx(() => [createVNode(unref(ArrowDown))]),
+							_: 1
+						}, 8, ["class"]))]),
 						_: 1
-					}, 8, ["class"])]),
+					})]),
 					_: 2
 				}, [_ctx.$slots.prefix ? {
 					name: "prefix",
@@ -180,42 +251,25 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"size",
 					"disabled",
 					"placeholder",
-					"clearable",
-					"model-value"
+					"model-value",
+					"native-readonly"
 				])]),
-				content: withCtx(() => [
-					createCommentVNode(" 过滤器 "),
-					__props.filterable ? (openBlock(), createElementBlock("div", {
-						key: 0,
-						class: normalizeClass([unref(cls).e("content-filter"), unref(cls).m(unref(size))])
-					}, [createVNode(unref(input_default), {
-						placeholder: "输入关键字进行过滤",
-						modelValue: qs.value,
-						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => qs.value = $event)
-					}, {
-						suffix: withCtx(() => [createVNode(unref(_sfc_main$1), null, {
-							default: withCtx(() => [createVNode(unref(Search))]),
-							_: 1
-						})]),
-						_: 1
-					}, 8, ["modelValue"])], 2)) : createCommentVNode("v-if", true),
-					createCommentVNode(" 菜单列表 "),
-					createVNode(unref(_sfc_main$3), mergeProps(treeProps.value, {
-						selected: model.value,
-						"onUpdate:selected": handleSelect,
-						ref_key: "treeRef",
-						ref: treeRef,
-						selectable: "",
-						class: unref(cls).e("content-tree"),
-						slots,
-						"scroll-to-view": ""
-					}), null, 16, ["selected", "class"])
-				]),
+				content: withCtx(() => [createCommentVNode(" 菜单列表 "), createVNode(unref(_sfc_main$3), mergeProps(treeProps.value, {
+					selected: model.value,
+					"onUpdate:selected": handleSelect,
+					ref_key: "treeRef",
+					ref: treeRef,
+					selectable: "",
+					class: unref(cls).e("content-tree"),
+					slots,
+					"scroll-to-view": ""
+				}), null, 16, ["selected", "class"])]),
 				_: 3
 			}, 16, [
 				"class",
 				"content-class",
 				"content-style",
+				"visible",
 				"min-width",
 				"width",
 				"disabled"

package/dist/components/tree-select/tree-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-select.js","names":["$attrs","$slots"],"sources":["../../../src/components/tree-select/tree-select.vue"],"sourcesContent":["<template>\n  <u-dropdown\n    v-if=\"!readonly\"\n    v-bind=\"$attrs\"\n    :class=\"[cls.b, bem.is('disabled', disabled)]\"\n    trigger=\"click\"\n    :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n    :content-style=\"contentStyle\"\n    ref=\"dropdownRef\"\n    :min-width=\"minWidth\"\n    :width=\"width\"\n    :disabled=\"disabled\"\n    @update:visible=\"handleDropdownVisible\"\n  >\n    <template #trigger>\n      <u-input\n        :size=\"size\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder\"\n        :clearable=\"clearable\"\n        :model-value=\"text ?? (model ? label : undefined)\"\n        @clear=\"handleClear\"\n        native-readonly\n      >\n        <template #prefix v-if=\"$slots.prefix\">\n          <slot name=\"prefix\" />\n        </template>\n        <template #suffix>\n          <u-icon :class=\"cls.e('arrow')\"><ArrowDown /></u-icon>\n        </template>\n      </u-input>\n    </template>\n    <template #content>\n      <!-- 过滤器 -->\n      <div v-if=\"filterable\" :class=\"[cls.e('content-filter'), cls.m(size)]\">\n        <u-input placeholder=\"输入关键字进行过滤\" v-model=\"qs\">\n          <template #suffix>\n            <u-icon><Search /></u-icon>\n          </template>\n        </u-input>\n      </div>\n      <!-- 菜单列表 -->\n\n      <u-tree\n        v-bind=\"treeProps\"\n        :selected=\"model\"\n        @update:selected=\"handleSelect\"\n        ref=\"treeRef\"\n        selectable\n        :class=\"cls.e('content-tree')\"\n        :slots=\"slots\"\n        scroll-to-view\n      />\n    </template>\n  </u-dropdown>\n\n  <template v-else>\n    {{ text || label || FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { dfs, o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { ArrowDown, Search } from '@veltra/icons/normal'\nimport { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, watch } from 'vue'\n\nimport type { TreeSelectProps, TreeSelectEmits, TreeExposed } from '../../types'\nimport { UDropdown } from '../dropdown'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UTree } from '../tree'\nimport type { TreeSlotsScope } from '../tree/di'\n\ndefineOptions({ name: 'UTreeSelect', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<TreeSelectProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  placeholder: '请选择',\n  expandAll: false,\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined,\n  filterable: false,\n  minWidth: '280px'\n})\n\nconst emit = defineEmits<TreeSelectEmits>()\n\nconst slots = defineSlots<{\n  /** 默认插槽 */\n  default?: (props: TreeSlotsScope) => any\n  /** 前缀插槽 */\n  prefix?: () => any\n}>()\n\nconst treeProps = computed(() => {\n  return o(props as Record<string, any>).omit([\n    'tips',\n    'field',\n    'placeholder',\n    'disabled',\n    'label',\n    'readonly',\n    'contentClass',\n    'contentStyle',\n    'minWidth',\n    'width'\n  ])\n})\n\nconst cls = bem('tree-select')\n\nconst labelKey = computed(() => fieldKey(props.labelKey, 'label'))\nconst valueKey = computed(() => fieldKey(props.valueKey, 'value'))\n\n/**过滤 */\nconst qs = shallowRef('')\nwatch(qs, (qs) => {\n  treeRef.value?.filter(qs)\n})\n\nconst model = defineModel<string | number>()\n\nconst label = shallowRef<string>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst treeRef = shallowRef<TreeExposed>()\n\nconst dropdownRef = shallowRef<InstanceType<typeof UDropdown>>()\n\n/**清空 */\nconst handleClear = () => {\n  model.value = ''\n  label.value = undefined\n  emit('clear')\n  emit('change', undefined)\n  emit('update:text', '')\n}\n\nlet changedByEvent = false\nwatch(\n  [() => props.data, model],\n  ([data, model]) => {\n    if (changedByEvent) return\n    if (!data?.length || model === undefined) {\n      label.value = undefined\n      model = undefined\n      return\n    }\n\n    let founded = false\n    const childrenKey = props.childrenKey ?? 'children'\n    data.some((item) => {\n      dfs(\n        item,\n        (v) => {\n          if (v[valueKey.value] === model) {\n            label.value = v[labelKey.value]\n            founded = true\n            return true\n          }\n        },\n        childrenKey\n      )\n\n      return founded\n    })\n  },\n  { immediate: true }\n)\n\nconst handleSelect = (selected?: string | number, selectedData?: Record<string, any>) => {\n  changedByEvent = true\n  nextTick(() => {\n    changedByEvent = false\n  })\n\n  model.value = selected ?? ''\n\n  if (selectedData) {\n    label.value = o(selectedData).get(labelKey.value)\n  } else {\n    label.value = ''\n  }\n\n  emit('change', selectedData)\n  emit('update:text', label.value)\n  dropdownRef.value?.close()\n}\n\nconst handleDropdownVisible = (visible: boolean) => {\n  if (!visible) {\n    qs.value = ''\n  }\n}\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"tree-select.js","names":["$attrs","$slots"],"sources":["../../../src/components/tree-select/tree-select.vue"],"sourcesContent":["<template>\n  <u-dropdown\n    v-if=\"!readonly\"\n    v-bind=\"$attrs\"\n    :class=\"[cls.b, bem.is('disabled', disabled)]\"\n    trigger=\"click\"\n    :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n    :content-style=\"contentStyle\"\n    ref=\"dropdownRef\"\n    v-model:visible=\"dropdownVisible\"\n    :min-width=\"minWidth\"\n    :width=\"width\"\n    :disabled=\"disabled\"\n    @update:visible=\"handleDropdownVisible\"\n    @mouseenter=\"hovered = true\"\n    @mouseleave=\"hovered = false\"\n  >\n    <template #trigger>\n      <u-input\n        ref=\"inputRef\"\n        :size=\"size\"\n        :disabled=\"disabled\"\n        :placeholder=\"inputPlaceholder\"\n        :clearable=\"false\"\n        :model-value=\"inputValue\"\n        @update:model-value=\"handleQueryInput\"\n        :native-readonly=\"!filterable || !querying\"\n        @click.capture=\"handleTriggerClickCapture\"\n      >\n        <template #prefix v-if=\"$slots.prefix\">\n          <slot name=\"prefix\" />\n        </template>\n        <template #suffix>\n          <transition name=\"zoom-in\" mode=\"out-in\">\n            <u-icon\n              v-if=\"showClear\"\n              :class=\"cls.e('clear')\"\n              title=\"清除\"\n              key=\"clear\"\n              @click.stop=\"handleClear\"\n            >\n              <Close />\n            </u-icon>\n            <u-icon v-else :class=\"cls.e('arrow')\" key=\"arrow\"><ArrowDown /></u-icon>\n          </transition>\n        </template>\n      </u-input>\n    </template>\n    <template #content>\n      <!-- 菜单列表 -->\n\n      <u-tree\n        v-bind=\"treeProps\"\n        :selected=\"model\"\n        @update:selected=\"handleSelect\"\n        ref=\"treeRef\"\n        selectable\n        :class=\"cls.e('content-tree')\"\n        :slots=\"slots\"\n        scroll-to-view\n      />\n    </template>\n  </u-dropdown>\n\n  <template v-else>\n    {{ text || label || FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { dfs, o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { ArrowDown, Close } from '@veltra/icons/normal'\nimport { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { TreeSelectProps, TreeSelectEmits, TreeExposed, InputExposed } from '../../types'\nimport { UDropdown } from '../dropdown'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UTree } from '../tree'\nimport type { TreeSlotsScope } from '../tree/di'\n\ndefineOptions({ name: 'UTreeSelect', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<TreeSelectProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  placeholder: '请选择',\n  expandAll: false,\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined,\n  filterable: false,\n  minWidth: '280px'\n})\n\nconst emit = defineEmits<TreeSelectEmits>()\n\nconst slots = defineSlots<{\n  /** 默认插槽 */\n  default?: (props: TreeSlotsScope) => any\n  /** 前缀插槽 */\n  prefix?: () => any\n}>()\n\nconst treeProps = computed(() => {\n  return o(props as Record<string, any>).omit([\n    'tips',\n    'field',\n    'placeholder',\n    'disabled',\n    'label',\n    'readonly',\n    'contentClass',\n    'contentStyle',\n    'minWidth',\n    'width'\n  ])\n})\n\nconst cls = bem('tree-select')\n\nconst labelKey = computed(() => fieldKey(props.labelKey, 'label'))\nconst valueKey = computed(() => fieldKey(props.valueKey, 'value'))\n\n/**过滤 */\nconst qs = shallowRef('')\nwatch(qs, (qs) => {\n  treeRef.value?.filter(qs)\n})\n\nconst model = defineModel<string | number>()\n\nconst label = shallowRef<string>()\n\nconst dropdownVisible = shallowRef(false)\n\n/**\n * 是否处于查询态：决定触发输入框显示查询串还是选中标签。\n * 与面板可见状态解耦 —— 选择后立即退出查询态，\n * 不等面板关闭动画结束（否则显示值会延迟一个动画时长才恢复）。\n */\nconst querying = shallowRef(false)\n\nconst inputRef = useTemplateRef<InputExposed>('inputRef')\n\n/** 触发输入框的值：查询态下承载查询串，否则展示选中标签 */\nconst inputValue = computed(() => {\n  if (props.filterable && querying.value) return qs.value\n  return props.text ?? (model.value ? label.value : undefined)\n})\n\n/** 查询态下已选标签降级为占位提示 */\nconst inputPlaceholder = computed(() => {\n  const display = props.text ?? (model.value ? label.value : undefined)\n  if (props.filterable && querying.value && display) {\n    return display\n  }\n  return props.placeholder\n})\n\nfunction handleQueryInput(value: string) {\n  if (!props.filterable) return\n  qs.value = value\n}\n\nconst hovered = shallowRef(false)\n\n/** 悬停且存在选中值时展示清除按钮（替代下拉箭头） */\nconst showClear = computed(() => {\n  if (!props.clearable || disabled.value || !hovered.value) return false\n  return !!(props.text ?? (model.value ? label.value : undefined))\n})\n\n/**\n * 过滤模式下拦截输入区域的点击：\n * 阻止 dropdown 的 trigger 开合切换，保持面板展开以不中断输入。\n * 非输入区域（箭头、留白）放行，维持原开合行为。\n */\nfunction handleTriggerClickCapture(e: MouseEvent) {\n  if (!props.filterable || disabled.value) return\n  if (!(e.target instanceof HTMLInputElement)) return\n\n  e.stopPropagation()\n  if (!dropdownVisible.value) dropdownRef.value?.open()\n}\n\nwatch(dropdownVisible, (visible) => {\n  if (visible && props.filterable) {\n    // 面板展开后进入查询态并聚焦输入框，可以立即输入查询\n    querying.value = true\n    nextTick(() => inputRef.value?.el?.focus())\n  } else if (!visible) {\n    querying.value = false\n  }\n})\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst treeRef = shallowRef<TreeExposed>()\n\nconst dropdownRef = shallowRef<InstanceType<typeof UDropdown>>()\n\n/**清空 */\nconst handleClear = () => {\n  model.value = ''\n  label.value = undefined\n  emit('clear')\n  emit('change', undefined)\n  emit('update:text', '')\n}\n\nlet changedByEvent = false\nwatch(\n  [() => props.data, model],\n  ([data, model]) => {\n    if (changedByEvent) return\n    if (!data?.length || model === undefined) {\n      label.value = undefined\n      model = undefined\n      return\n    }\n\n    let founded = false\n    const childrenKey = props.childrenKey ?? 'children'\n    data.some((item) => {\n      dfs(\n        item,\n        (v) => {\n          if (v[valueKey.value] === model) {\n            label.value = v[labelKey.value]\n            founded = true\n            return true\n          }\n        },\n        childrenKey\n      )\n\n      return founded\n    })\n  },\n  { immediate: true }\n)\n\nconst handleSelect = (selected?: string | number, selectedData?: Record<string, any>) => {\n  changedByEvent = true\n  nextTick(() => {\n    changedByEvent = false\n  })\n\n  model.value = selected ?? ''\n\n  if (selectedData) {\n    label.value = o(selectedData).get(labelKey.value)\n  } else {\n    label.value = ''\n  }\n\n  emit('change', selectedData)\n  emit('update:text', label.value)\n  // 立即退出查询态，输入框同步恢复显示选中标签\n  querying.value = false\n  qs.value = ''\n  dropdownRef.value?.close()\n}\n\nconst handleDropdownVisible = (visible: boolean) => {\n  if (!visible) {\n    qs.value = ''\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/components/tree-select/tree-select.vue.d.ts

@@ -26,9 +26,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   onChange?: ((selectedData?: Record<string, any> | undefined) => any) | undefined;
   "onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
 }>, {
+  expandAll: boolean;
   labelKey: string;
   valueKey: string;
-  expandAll: boolean;
   placeholder: string;
   clearable: boolean;
   filterable: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "files": [
     "dist",
     "src"
@@ -57,11 +57,11 @@
     "@cat-kit/core": ">=1.1.8",
     "@cat-kit/excel": ">=1.0.0",
     "@cat-kit/fe": "^1.1.8",
-    "@veltra/compositions": "1.3.5",
-    "@veltra/directives": "1.3.5",
-    "@veltra/icons": "1.3.5",
-    "@veltra/styles": "1.3.5",
-    "@veltra/utils": "1.3.5",
+    "@veltra/compositions": "1.3.6",
+    "@veltra/directives": "1.3.6",
+    "@veltra/icons": "1.3.6",
+    "@veltra/styles": "1.3.6",
+    "@veltra/utils": "1.3.6",
     "vue": ">=3.5.40"
   },
   "devDependencies": {

package/src/components/cascade/cascade.vue

@@ -2,7 +2,13 @@
   <u-dropdown
     v-if="!readonly"
     v-bind="$attrs"
-    :class="[cls.b, bem.is('disabled', disabled), bem.is('multiple', multiple), cls.m(size)]"
+    :class="[
+      cls.b,
+      bem.is('disabled', disabled),
+      bem.is('multiple', multiple),
+      cls.m(size),
+      bem.is('focus', multiple && dropdownVisible)
+    ]"
     :content-class="[cls.e('panel'), cls.em('panel', size)]"
     trigger="click"
     ref="dropdownRef"
@@ -10,7 +16,7 @@
     width="auto"
     @mouseenter="hovered = true"
     @mouseleave="hovered = false"
-    @update:visible="!$event && (qs = '')"
+    @update:visible="handleDropdownVisible"
   >
     <template #trigger>
       <!-- 单选展示 -->
@@ -233,6 +239,13 @@ function handleClear() {
 // 过滤
 const qs = shallowRef<string>('')
 
+const dropdownVisible = shallowRef(false)
+
+const handleDropdownVisible = (visible: boolean) => {
+  dropdownVisible.value = visible
+  if (!visible) qs.value = ''
+}
+
 watch([qs, forest], ([qs, forest]) => {
   const { filterable } = props
   if (!filterable || !qs) {

package/src/components/cascade/style.scss

@@ -23,6 +23,11 @@ $menu-name: $root-name + '-panel-item';
     &:hover {
       border-color: fn.use-var(color, primary);
     }
+
+    @include m.is(focus) {
+      border-color: fn.use-var(color, primary);
+      box-shadow: fn.use-var(focus-ring);
+    }
   }
 
   @include m.size using ($size) {

package/src/components/date-range-picker/date-range-picker.vue

@@ -10,6 +10,7 @@
     :disabled="disabled"
     @mouseenter.native="hovered = true"
     @mouseleave.native="hovered = false"
+    @update:visible="dropdownVisible = $event"
   >
     <template #trigger>
       <input
@@ -87,8 +88,15 @@ const emit = defineEmits<DateRangePickerEmits>()
 
 const cls = bem('date-range-picker')
 
+const dropdownVisible = shallowRef(false)
+
 const className = computed(() => {
-  return [cls.b, cls.m(size.value), bem.is('disabled', disabled.value)]
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', disabled.value),
+    bem.is('focus', dropdownVisible.value)
+  ]
 })
 
 const { formProps } = injectFormContext()

package/src/components/date-range-picker/style.scss

@@ -32,6 +32,11 @@ $root-name: date-range-picker;
     border-color: fn.use-var(color, primary);
   }
 
+  @include m.is(focus) {
+    border-color: fn.use-var(color, primary);
+    box-shadow: fn.use-var(focus-ring);
+  }
+
   @include m.e(input) {
     outline: none;
     border: none;

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

@@ -7,11 +7,11 @@
     >
       <u-tip v-if="tips" :content="tips" :class="cls.e('tips')" :show-delay="500">
         <span :class="cls.e('tip-label')">
-          <slot name="label">{{ label }}:</slot>
+          <slot name="label">{{ label }}{{ labelPosition === 'top' ? '' : ':' }}</slot>
         </span>
       </u-tip>
       <template v-else>
-        <slot name="label">{{ label }}:</slot>
+        <slot name="label">{{ label }}{{ labelPosition === 'top' ? '' : ':' }}</slot>
       </template>
     </label>
 

package/src/components/form-item/style.scss

@@ -28,7 +28,7 @@ $root-name: form-item;
     color: fn.use-var(text-color, main);
     text-align: right;
     line-height: 1.3;
-    font-weight: 300;
+    font-weight: 400;
 
     @include m.flex($justify: flex-end);
 
@@ -99,6 +99,7 @@ $root-name: form-item;
       padding-right: 0;
       padding-bottom: 4px;
       text-align: left;
+      color: fn.use-var(text-color, second);
       justify-content: flex-start;
     }
   }

package/src/components/grid-input/style.scss

@@ -26,6 +26,7 @@ $root-name: grid-input;
 
       @include m.is(focus) {
         border-color: fn.use-var(color, primary);
+        box-shadow: fn.use-var(focus-ring);
 
         @keyframes fade {
           0% {