@yh-ui/components 0.1.56 → 1.0.4

package/dist/time-select/src/time-select.vue

@@ -38,10 +38,15 @@ const emit = defineEmits(["update:modelValue", "change", "focus", "blur", "clear
 const ns = useNamespace("time-select");
 const { t } = useLocale();
 const inputId = useId();
-const { themeStyle } = useComponentTheme("time-select", computed(() => props.themeOverrides));
+const { themeStyle } = useComponentTheme(
+  "time-select",
+  computed(() => props.themeOverrides)
+);
 const { form, formItem, validate: triggerValidate } = useFormItem();
 const { globalSize } = useConfig();
-const selectSize = computed(() => props.size || formItem?.size || form?.size || globalSize.value || "default");
+const selectSize = computed(
+  () => props.size || formItem?.size || form?.size || globalSize.value || "default"
+);
 const wrapperRef = ref();
 const inputRef = ref();
 const optionsRef = ref();
@@ -56,13 +61,7 @@ const timeOptions = computed(() => {
   if (props.options && props.options.length > 0) {
     return props.options;
   }
-  return generateTimeOptions(
-    props.start,
-    props.end,
-    props.step,
-    props.format,
-    props.includeEndTime
-  );
+  return generateTimeOptions(props.start, props.end, props.step, props.format, props.includeEndTime);
 });
 const filteredOptions = computed(() => {
   let options = timeOptions.value;
@@ -107,9 +106,7 @@ const displayLabel = computed(() => {
 const showClear = computed(
   () => props.clearable && !props.disabled && props.modelValue !== void 0 && props.modelValue !== "" && (focused.value || hovering.value)
 );
-const hasValue = computed(
-  () => props.modelValue !== void 0 && props.modelValue !== ""
-);
+const hasValue = computed(() => props.modelValue !== void 0 && props.modelValue !== "");
 const wrapperClasses = computed(() => [
   ns.b(),
   ns.m(selectSize.value),
@@ -139,7 +136,9 @@ const updateDropdownPosition = () => {
 const scrollToSelected = () => {
   if (!optionsRef.value || !props.modelValue) return;
   nextTick(() => {
-    const selectedEl = optionsRef.value?.querySelector(`.${ns.is("selected", true).slice(1)}`);
+    const selectedEl = optionsRef.value?.querySelector(
+      `.${ns.is("selected", true).slice(1)}`
+    );
     if (selectedEl && optionsRef.value) {
       const containerHeight = optionsRef.value.clientHeight;
       const scrollTop = selectedEl.offsetTop - containerHeight / 2 + selectedEl.offsetHeight / 2;
@@ -295,31 +294,52 @@ const blur = () => {
 defineExpose({
   focus,
   blur,
-  inputRef: inputRef.value
+  inputRef
 });
 </script>
 
 <template>
-  <div ref="wrapperRef" :class="wrapperClasses" :style="themeStyle" @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave" @click="toggleDropdown">
+  <div
+    ref="wrapperRef"
+    :class="wrapperClasses"
+    :style="themeStyle"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @click="toggleDropdown"
+  >
     <!-- 输入区域 -->
     <div :class="ns.e('wrapper')">
       <!-- 前缀图标 -->
       <span :class="ns.e('prefix')">
         <slot name="prefix">
           <svg viewBox="0 0 1024 1024" width="1em" height="1em" :class="ns.e('icon')">
-            <path fill="currentColor"
-              d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 64a384 384 0 1 0 0 768 384 384 0 0 0 0-768zm0 128a32 32 0 0 1 32 32v192l128 64a32 32 0 0 1-28.864 57.088l-144-72A32 32 0 0 1 480 512V288a32 32 0 0 1 32-32z" />
+            <path
+              fill="currentColor"
+              d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 64a384 384 0 1 0 0 768 384 384 0 0 0 0-768zm0 128a32 32 0 0 1 32 32v192l128 64a32 32 0 0 1-28.864 57.088l-144-72A32 32 0 0 1 480 512V288a32 32 0 0 1 32-32z"
+            />
           </svg>
         </slot>
       </span>
 
       <!-- 输入框 -->
-      <input ref="inputRef" :id="inputId" :class="ns.e('inner')" :value="editable && visible ? query : ''"
-        :placeholder="hasValue ? '' : placeholder || t('timeselect.placeholder')" :disabled="disabled"
-        :readonly="!editable" :name="name" autocomplete="off" role="combobox" :aria-expanded="visible"
-        :aria-controls="`${inputId}-listbox`" @input="handleInput" @focus="handleFocus" @blur="handleBlur"
-        @keydown="handleKeydown" />
+      <input
+        ref="inputRef"
+        :id="inputId"
+        :class="ns.e('inner')"
+        :value="editable && visible ? query : ''"
+        :placeholder="hasValue ? '' : placeholder || t('timeselect.placeholder')"
+        :disabled="disabled"
+        :readonly="!editable"
+        :name="name"
+        autocomplete="off"
+        role="combobox"
+        :aria-expanded="visible"
+        :aria-controls="`${inputId}-listbox`"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @keydown="handleKeydown"
+      />
 
       <!-- 显示值 -->
       <span v-if="hasValue && !(editable && visible && query)" :class="ns.e('display-value')">
@@ -331,8 +351,10 @@ defineExpose({
         <!-- 清空按钮 -->
         <span v-if="showClear" :class="[ns.e('icon'), ns.e('clear')]" @click.stop="handleClear">
           <svg viewBox="0 0 1024 1024" width="1em" height="1em">
-            <path fill="currentColor"
-              d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z" />
+            <path
+              fill="currentColor"
+              d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"
+            />
           </svg>
         </span>
 
@@ -341,8 +363,10 @@ defineExpose({
   'is-reverse': visible
 }]">
           <svg viewBox="0 0 1024 1024" width="1em" height="1em">
-            <path fill="currentColor"
-              d="M831.872 340.864L512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z" />
+            <path
+              fill="currentColor"
+              d="M831.872 340.864L512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
+            />
           </svg>
         </span>
       </span>
@@ -351,9 +375,13 @@ defineExpose({
     <!-- 下拉框 -->
     <Teleport to="body" :disabled="!teleported">
       <Transition :name="ns.b('dropdown')">
-        <div v-show="visible" :class="[ns.e('dropdown'), popperClass, `is-${effect}`]"
-          :style="teleported ? dropdownStyle : {}" @mousedown="handleDropdownMousedown"
-          @mouseup="handleDropdownMouseup">
+        <div
+          v-show="visible"
+          :class="[ns.e('dropdown'), popperClass, `is-${effect}`]"
+          :style="teleported ? dropdownStyle : {}"
+          @mousedown="handleDropdownMousedown"
+          @mouseup="handleDropdownMouseup"
+        >
           <!-- 无数据 -->
           <div v-if="filteredOptions.length === 0" :class="ns.e('empty')">
             <slot name="empty">
@@ -362,16 +390,32 @@ defineExpose({
           </div>
 
           <!-- 选项列表 -->
-          <div v-else ref="optionsRef" :id="`${inputId}-listbox`" :class="ns.e('options')" role="listbox">
-            <div v-for="(option, index) in filteredOptions" :key="option.value" :class="[ns.e('option'), ns.is('selected', modelValue === option.value), ns.is('disabled', option.disabled), ns.is('hovering', hoveredIndex === index)]" role="option" :aria-selected="modelValue === option.value" @mousedown.prevent
-              @click="handleOptionClick(option, $event)" @mouseenter="hoveredIndex = index">
+          <div
+            v-else
+            ref="optionsRef"
+            :id="`${inputId}-listbox`"
+            :class="ns.e('options')"
+            role="listbox"
+          >
+            <div
+              v-for="(option, index) in filteredOptions"
+              :key="option.value"
+              :class="[ns.e('option'), ns.is('selected', modelValue === option.value), ns.is('disabled', option.disabled), ns.is('hovering', hoveredIndex === index)]"
+              role="option"
+              :aria-selected="modelValue === option.value"
+              @mousedown.prevent
+              @click="handleOptionClick(option, $event)"
+              @mouseenter="hoveredIndex = index"
+            >
               <slot name="option" :option="option">
                 {{ option.label }}
               </slot>
               <span v-if="modelValue === option.value" :class="ns.e('option-check')">
                 <svg viewBox="0 0 1024 1024" width="1em" height="1em">
-                  <path fill="currentColor"
-                    d="M406.656 706.944L195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z" />
+                  <path
+                    fill="currentColor"
+                    d="M406.656 706.944L195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"
+                  />
                 </svg>
               </span>
             </div>

package/dist/time-select/src/time-select.vue.d.ts

@@ -12,7 +12,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<TimeSelectProps, {
     focus: () => void;
     blur: () => void;
-    inputRef: HTMLInputElement | undefined;
+    inputRef: import("vue").Ref<HTMLInputElement | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     clear: () => any;
     focus: (event: FocusEvent) => any;

package/dist/tooltip/index.d.ts

@@ -497,3 +497,10 @@ export declare const YhTooltip: import("@yh-ui/utils").SFCWithInstall<{
 export default YhTooltip;
 export * from './src/tooltip';
 export type TooltipInstance = InstanceType<typeof Tooltip>;
+export type YhTooltipInstance = TooltipInstance;
+export type YhTooltipProps = import('./src/tooltip').TooltipProps;
+export type YhTooltipEmits = import('./src/tooltip').TooltipEmits;
+export type YhTooltipSlots = import('./src/tooltip').TooltipSlots;
+export type YhTooltipExpose = import('./src/tooltip').TooltipExpose;
+export type YhTooltipPlacement = import('./src/tooltip').TooltipPlacement;
+export type YhTooltipTrigger = import('./src/tooltip').TooltipTrigger;

package/dist/tooltip/src/tooltip.d.ts

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, PropType, StyleValue } from 'vue';
+import type { ExtractPropTypes, PropType, StyleValue, Ref } from 'vue';
 export declare const tooltipPlacements: readonly ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"];
 export type TooltipPlacement = (typeof tooltipPlacements)[number];
 export declare const tooltipTriggers: readonly ["hover", "click", "focus", "contextmenu", "manual"];
@@ -157,3 +157,13 @@ export declare const tooltipEmits: {
 };
 export type TooltipProps = ExtractPropTypes<typeof tooltipProps>;
 export type TooltipEmits = typeof tooltipEmits;
+export interface TooltipSlots {
+    default?: () => unknown;
+    content?: () => unknown;
+}
+export interface TooltipExpose {
+    updatePosition: () => Promise<void> | void;
+    visible: Ref<boolean>;
+    triggerRef: Ref<HTMLElement | undefined>;
+    popperRef: Ref<HTMLElement | undefined>;
+}

package/dist/transfer/index.d.ts

@@ -1,7 +1,3 @@
-/**
- * @yh-ui/transfer
- * @description Transfer 穿梭框组件
- */
 import type { Plugin } from 'vue';
 import Transfer from './src/transfer.vue';
 import TransferPanel from './src/transfer-panel.vue';
@@ -11,3 +7,9 @@ export * from './src/transfer';
 export default YhTransfer;
 export type TransferInstance = InstanceType<typeof Transfer>;
 export type TransferPanelInstance = InstanceType<typeof TransferPanel>;
+export type YhTransferInstance = TransferInstance;
+export type YhTransferPanelInstance = TransferPanelInstance;
+export type YhTransferProps = import('./src/transfer').TransferProps;
+export type YhTransferEmits = import('./src/transfer').TransferEmits;
+export type YhTransferExpose = import('./src/transfer').TransferExpose;
+export type YhTransferPanelExpose = import('./src/transfer').TransferPanelExpose;

package/dist/transfer/src/transfer-panel.vue

@@ -147,7 +147,7 @@ provide(transferPanelContextKey, {
 });
 defineExpose({
   clearChecked,
-  query: query.value
+  query
 });
 watch(query, () => {
   scrollTop.value = 0;
@@ -162,20 +162,31 @@ watch(query, () => {
     <!-- 头部 -->
     <div :class="ns.e('header')">
       <slot name="header">
-        <div :class="[ns.e('check-all'), {
+        <div
+          :class="[ns.e('check-all'), {
   'is-disabled': disabled || checkableData.length === 0
 }]"
-          @click="handleCheckAll">
-          <span :class="[ns.e('item-checkbox'), {
+          @click="handleCheckAll"
+        >
+          <span
+            :class="[ns.e('item-checkbox'), {
   'is-checked': isAllChecked,
   'is-indeterminate': isIndeterminate
-}]">
+}]"
+          >
             <!-- 选中图标 -->
             <svg v-if="isAllChecked" :class="ns.e('item-checkbox__icon')" viewBox="0 0 1024 1024">
-              <path fill="currentColor" d="M406.4 726.4l-236.8-236.8 57.6-57.6 179.2 179.2 390.4-390.4 57.6 57.6z" />
+              <path
+                fill="currentColor"
+                d="M406.4 726.4l-236.8-236.8 57.6-57.6 179.2 179.2 390.4-390.4 57.6 57.6z"
+              />
             </svg>
             <!-- 半选图标 -->
-            <svg v-if="isIndeterminate && !isAllChecked" :class="ns.e('item-checkbox__icon')" viewBox="0 0 1024 1024">
+            <svg
+              v-if="isIndeterminate && !isAllChecked"
+              :class="ns.e('item-checkbox__icon')"
+              viewBox="0 0 1024 1024"
+            >
               <path fill="currentColor" d="M192 480h640v64H192z" />
             </svg>
           </span>
@@ -198,8 +209,13 @@ watch(query, () => {
 
     <!-- 搜索框 -->
     <div v-if="filterable" :class="ns.e('filter')">
-      <input v-model="query" type="text" :class="ns.e('filter-input')"
-        :placeholder="filterPlaceholder || t('transfer.filterPlaceholder')" :disabled="disabled" />
+      <input
+        v-model="query"
+        type="text"
+        :class="ns.e('filter-input')"
+        :placeholder="filterPlaceholder || t('transfer.filterPlaceholder')"
+        :disabled="disabled"
+      />
     </div>
 
     <!-- 列表区域 -->
@@ -208,10 +224,14 @@ watch(query, () => {
       <div v-if="filteredData.length === 0" :class="ns.e('empty')">
         <slot name="empty">
           <svg :class="ns.e('empty-icon')" viewBox="0 0 1024 1024">
-            <path fill="currentColor"
-              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" />
-            <path fill="currentColor"
-              d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zM464 512v176c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16V512c0-8.8-7.2-16-16-16h-64c-8.8 0-16 7.2-16 16z" />
+            <path
+              fill="currentColor"
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+            />
+            <path
+              fill="currentColor"
+              d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zM464 512v176c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16V512c0-8.8-7.2-16-16-16h-64c-8.8 0-16 7.2-16 16z"
+            />
           </svg>
           <span :class="ns.e('empty-text')">{{ emptyText || t("transfer.noData") }}</span>
         </slot>
@@ -219,29 +239,48 @@ watch(query, () => {
 
       <!-- 虚拟滚动列表 -->
       <template v-else-if="virtual">
-        <div ref="virtualWrapperRef" :class="ns.e('virtual-wrapper')" :style="{
+        <div
+          ref="virtualWrapperRef"
+          :class="ns.e('virtual-wrapper')"
+          :style="{
   height: height + 'px'
 }"
-          @scroll="handleVirtualScroll">
+          @scroll="handleVirtualScroll"
+        >
           <div :style="{
   height: virtualConfig.totalHeight + 'px',
   position: 'relative'
 }">
-            <ul :class="ns.e('list')" :style="{
+            <ul
+              :class="ns.e('list')"
+              :style="{
   transform: `translateY(${virtualConfig.offsetY}px)`
-}">
-              <li v-for="item in displayItems" :key="getKey(item)" :class="[ns.e('item'), {
+}"
+            >
+              <li
+                v-for="item in displayItems"
+                :key="getKey(item)"
+                :class="[ns.e('item'), {
   'is-checked': isChecked(getKey(item)),
   'is-disabled': isItemDisabled(item)
-}]" :style="{
+}]"
+                :style="{
   height: itemHeight + 'px'
-}" @click="handleItemClick(item)">
+}"
+                @click="handleItemClick(item)"
+              >
                 <span :class="[ns.e('item-checkbox'), {
   'is-checked': isChecked(getKey(item))
 }]">
-                  <svg v-if="isChecked(getKey(item))" :class="ns.e('item-checkbox__icon')" viewBox="0 0 1024 1024">
-                    <path fill="currentColor"
-                      d="M406.4 726.4l-236.8-236.8 57.6-57.6 179.2 179.2 390.4-390.4 57.6 57.6z" />
+                  <svg
+                    v-if="isChecked(getKey(item))"
+                    :class="ns.e('item-checkbox__icon')"
+                    viewBox="0 0 1024 1024"
+                  >
+                    <path
+                      fill="currentColor"
+                      d="M406.4 726.4l-236.8-236.8 57.6-57.6 179.2 179.2 390.4-390.4 57.6 57.6z"
+                    />
                   </svg>
                 </span>
                 <span :class="ns.e('item-label')">
@@ -255,15 +294,27 @@ watch(query, () => {
 
       <!-- 普通列表 -->
       <ul v-else :class="ns.e('list')">
-        <li v-for="item in displayItems" :key="getKey(item)" :class="[ns.e('item'), {
+        <li
+          v-for="item in displayItems"
+          :key="getKey(item)"
+          :class="[ns.e('item'), {
   'is-checked': isChecked(getKey(item)),
   'is-disabled': isItemDisabled(item)
-}]" @click="handleItemClick(item)">
+}]"
+          @click="handleItemClick(item)"
+        >
           <span :class="[ns.e('item-checkbox'), {
   'is-checked': isChecked(getKey(item))
 }]">
-            <svg v-if="isChecked(getKey(item))" :class="ns.e('item-checkbox__icon')" viewBox="0 0 1024 1024">
-              <path fill="currentColor" d="M406.4 726.4l-236.8-236.8 57.6-57.6 179.2 179.2 390.4-390.4 57.6 57.6z" />
+            <svg
+              v-if="isChecked(getKey(item))"
+              :class="ns.e('item-checkbox__icon')"
+              viewBox="0 0 1024 1024"
+            >
+              <path
+                fill="currentColor"
+                d="M406.4 726.4l-236.8-236.8 57.6-57.6 179.2 179.2 390.4-390.4 57.6 57.6z"
+              />
             </svg>
           </span>
           <span :class="ns.e('item-label')">

package/dist/transfer/src/transfer-panel.vue.d.ts

@@ -17,7 +17,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<TransferPanelProps, {
     clearChecked: () => void;
-    query: string;
+    query: import("vue").Ref<string>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:checked": (value: TransferKey[]) => any;
     "checked-change": (value: TransferKey[], movedKeys?: TransferKey[] | undefined) => any;

package/dist/transfer/src/transfer.d.ts

@@ -2,7 +2,7 @@
  * Transfer Types & Props
  * @description 穿梭框组件类型定义，严格类型化
  */
-import type { InjectionKey, VNode } from 'vue';
+import type { InjectionKey, Ref, VNode } from 'vue';
 /**
  * 穿梭框尺寸
  */
@@ -114,7 +114,7 @@ export interface TransferEmits {
  */
 export interface TransferPanelExpose {
     clearChecked: () => void;
-    query: string;
+    query: Ref<string>;
 }
 /**
  * Transfer Expose 定义
@@ -122,8 +122,8 @@ export interface TransferPanelExpose {
 export interface TransferExpose {
     clearLeftChecked: () => void;
     clearRightChecked: () => void;
-    leftPanel: TransferPanelExpose | undefined;
-    rightPanel: TransferPanelExpose | undefined;
+    leftPanel: Ref<TransferPanelExpose | undefined>;
+    rightPanel: Ref<TransferPanelExpose | undefined>;
 }
 /**
  * Transfer Panel Props 定义

package/dist/transfer/src/transfer.vue

@@ -38,7 +38,10 @@ const emit = defineEmits(["update:modelValue", "change", "left-check-change", "r
 const ns = useNamespace("transfer");
 const { t } = useLocale();
 const { globalSize } = useConfig();
-const { themeStyle } = useComponentTheme("transfer", computed(() => props.themeOverrides));
+const { themeStyle } = useComponentTheme(
+  "transfer",
+  computed(() => props.themeOverrides)
+);
 const leftPanelRef = ref();
 const rightPanelRef = ref();
 const leftChecked = ref([...props.leftDefaultChecked]);
@@ -61,7 +64,9 @@ const rightData = computed(() => {
 const leftTitle = computed(() => props.leftTitle || props.titles?.[0] || t("transfer.titles.0"));
 const rightTitle = computed(() => props.rightTitle || props.titles?.[1] || t("transfer.titles.1"));
 const leftEmptyText = computed(() => props.leftEmptyText || props.emptyText || t("transfer.noData"));
-const rightEmptyText = computed(() => props.rightEmptyText || props.emptyText || t("transfer.noData"));
+const rightEmptyText = computed(
+  () => props.rightEmptyText || props.emptyText || t("transfer.noData")
+);
 const filterPlaceholder = computed(() => props.filterPlaceholder || t("transfer.filterPlaceholder"));
 const canMoveToRight = computed(() => leftChecked.value.length > 0);
 const canMoveToLeft = computed(() => rightChecked.value.length > 0);
@@ -123,18 +128,33 @@ watch(
 defineExpose({
   clearLeftChecked,
   clearRightChecked,
-  leftPanel: leftPanelRef.value,
-  rightPanel: rightPanelRef.value
+  leftPanel: leftPanelRef,
+  rightPanel: rightPanelRef
 });
 </script>
 
 <template>
   <div :class="containerClasses" :style="themeStyle">
-    <TransferPanel ref="leftPanelRef" :data="leftData" :checked="leftChecked" :title="leftTitle"
-      :filterable="filterable" :filter-placeholder="filterPlaceholder" :filter-method="filterMethod"
-      :disabled="disabled" :size="size" :props="props.props" :render-content="renderContent" :virtual="virtual"
-      :item-height="itemHeight" :height="height" :show-all-checkbox="showAllCheckbox" :empty-text="leftEmptyText"
-      @update:checked="handleLeftCheckedChange" @checked-change="handleLeftCheckedChange">
+    <TransferPanel
+      ref="leftPanelRef"
+      :data="leftData"
+      :checked="leftChecked"
+      :title="leftTitle"
+      :filterable="filterable"
+      :filter-placeholder="filterPlaceholder"
+      :filter-method="filterMethod"
+      :disabled="disabled"
+      :size="size"
+      :props="props.props"
+      :render-content="renderContent"
+      :virtual="virtual"
+      :item-height="itemHeight"
+      :height="height"
+      :show-all-checkbox="showAllCheckbox"
+      :empty-text="leftEmptyText"
+      @update:checked="handleLeftCheckedChange"
+      @checked-change="handleLeftCheckedChange"
+    >
       <template v-if="$slots['left-header']" #header>
         <slot name="left-header" />
       </template>
@@ -150,37 +170,73 @@ defineExpose({
     </TransferPanel>
 
     <div :class="ns.e('buttons')">
-      <slot name="buttons" :move-to-left="moveToLeft" :move-to-right="moveToRight" :left-checked="leftChecked"
-        :right-checked="rightChecked">
-        <button type="button" :class="[ns.e('button'), {
+      <slot
+        name="buttons"
+        :move-to-left="moveToLeft"
+        :move-to-right="moveToRight"
+        :left-checked="leftChecked"
+        :right-checked="rightChecked"
+      >
+        <button
+          type="button"
+          :class="[ns.e('button'), {
   'is-disabled': !canMoveToRight || disabled
 }]"
-          :disabled="!canMoveToRight || disabled" @click="moveToRight">
+          :disabled="!canMoveToRight || disabled"
+          @click="moveToRight"
+        >
           <svg :class="ns.e('button__icon')" viewBox="0 0 1024 1024">
-            <path fill="currentColor"
-              d="M340.864 149.312a30.592 30.592 0 000 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0042.752 43.458l355.136-362.88a30.592 30.592 0 000-43.52L383.616 106.56a30.592 30.592 0 00-42.752 42.752z" />
+            <path
+              fill="currentColor"
+              d="M340.864 149.312a30.592 30.592 0 000 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0042.752 43.458l355.136-362.88a30.592 30.592 0 000-43.52L383.616 106.56a30.592 30.592 0 00-42.752 42.752z"
+            />
           </svg>
-          <span v-if="buttonTexts && buttonTexts[0]" :class="ns.e('button__text')">{{ buttonTexts[0] }}</span>
+          <span v-if="buttonTexts && buttonTexts[0]" :class="ns.e('button__text')">{{
+            buttonTexts[0]
+          }}</span>
         </button>
 
-        <button type="button" :class="[ns.e('button'), {
+        <button
+          type="button"
+          :class="[ns.e('button'), {
   'is-disabled': !canMoveToLeft || disabled
 }]"
-          :disabled="!canMoveToLeft || disabled" @click="moveToLeft">
+          :disabled="!canMoveToLeft || disabled"
+          @click="moveToLeft"
+        >
           <svg :class="ns.e('button__icon')" viewBox="0 0 1024 1024">
-            <path fill="currentColor"
-              d="M685.248 104.256a30.592 30.592 0 010 42.752L373.376 512l311.872 364.992a30.592 30.592 0 11-42.752 43.458L287.38 555.52a30.592 30.592 0 010-43.52l355.136-364.93a30.592 30.592 0 0142.752 0z" />
+            <path
+              fill="currentColor"
+              d="M685.248 104.256a30.592 30.592 0 010 42.752L373.376 512l311.872 364.992a30.592 30.592 0 11-42.752 43.458L287.38 555.52a30.592 30.592 0 010-43.52l355.136-364.93a30.592 30.592 0 0142.752 0z"
+            />
           </svg>
-          <span v-if="buttonTexts && buttonTexts[1]" :class="ns.e('button__text')">{{ buttonTexts[1] }}</span>
+          <span v-if="buttonTexts && buttonTexts[1]" :class="ns.e('button__text')">{{
+            buttonTexts[1]
+          }}</span>
         </button>
       </slot>
     </div>
 
-    <TransferPanel ref="rightPanelRef" :data="rightData" :checked="rightChecked" :title="rightTitle"
-      :filterable="filterable" :filter-placeholder="filterPlaceholder" :filter-method="filterMethod"
-      :disabled="disabled" :size="size" :props="props.props" :render-content="renderContent" :virtual="virtual"
-      :item-height="itemHeight" :height="height" :show-all-checkbox="showAllCheckbox" :empty-text="rightEmptyText"
-      @update:checked="handleRightCheckedChange" @checked-change="handleRightCheckedChange">
+    <TransferPanel
+      ref="rightPanelRef"
+      :data="rightData"
+      :checked="rightChecked"
+      :title="rightTitle"
+      :filterable="filterable"
+      :filter-placeholder="filterPlaceholder"
+      :filter-method="filterMethod"
+      :disabled="disabled"
+      :size="size"
+      :props="props.props"
+      :render-content="renderContent"
+      :virtual="virtual"
+      :item-height="itemHeight"
+      :height="height"
+      :show-all-checkbox="showAllCheckbox"
+      :empty-text="rightEmptyText"
+      @update:checked="handleRightCheckedChange"
+      @checked-change="handleRightCheckedChange"
+    >
       <template v-if="$slots['right-header']" #header>
         <slot name="right-header" />
       </template>

package/dist/transfer/src/transfer.vue.d.ts

@@ -31,8 +31,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<TransferProps, {
     clearLeftChecked: () => void;
     clearRightChecked: () => void;
-    leftPanel: TransferPanelExpose | undefined;
-    rightPanel: TransferPanelExpose | undefined;
+    leftPanel: import("vue").Ref<TransferPanelExpose | undefined>;
+    rightPanel: import("vue").Ref<TransferPanelExpose | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     change: (value: TransferKey[], direction: import("./transfer").TransferDirection, movedKeys: TransferKey[]) => any;
     "update:modelValue": (value: TransferKey[]) => any;

package/dist/tree/index.d.ts

@@ -627,3 +627,10 @@ export default YhTree;
 export * from './src/tree';
 export type TreeInstance = InstanceType<typeof Tree>;
 export type TreeNodeInstance = InstanceType<typeof TreeNode>;
+export type YhTreeInstance = TreeInstance;
+export type YhTreeNodeInstance = TreeNodeInstance;
+export type YhTreeProps = import('./src/tree').TreeProps;
+export type YhTreeEmits = import('./src/tree').TreeEmits;
+export type YhTreeNodeData = import('./src/tree').TreeNodeData;
+export type YhTreeNode = import('./src/tree').TreeNode;
+export type YhTreeNodeSlotData = import('./src/tree').TreeNodeSlotData;