feat: select keydown

examples/pagination/demos/more.vue

@@ -1,5 +1,6 @@
 <template>
-  <div>
+  <div class="tdesign-demo-block-row">
+    <span>展示首尾页码省略</span>
     <t-pagination
       v-model="current"
       v-model:pageSize="pageSize"
@@ -8,6 +9,16 @@
       @pageSizeChange="onPageSizeChange"
       @currentChange="onCurrentChange"
     />
+    <span>不展示首尾页码省略</span>
+    <t-pagination
+      v-model="current"
+      v-model:pageSize="pageSize"
+      :total="100"
+      page-ellipsis-mode="empty"
+      @change="onChange"
+      @pageSizeChange="onPageSizeChange"
+      @currentChange="onCurrentChange"
+    />
   </div>
 </template>
 

examples/pagination/pagination.md

@@ -10,6 +10,7 @@ defaultCurrent | Number | 1 | 当前页。非受控属性 | N
 disabled | Boolean | false | 是否禁用分页组件 | N
 foldedMaxPageBtn | Number | 5 | 折叠时最多显示页码按钮数 | N
 maxPageBtn | Number | 10 | 最多显示页码按钮数 | N
+pageEllipsisMode | String | ellipsis | 页码数量超出时，前后省略模式。可选项：ellipsis/empty | N
 pageSize | Number | 10 | 分页总页数。支持语法糖 `v-model:pageSize` | N
 defaultPageSize | Number | 10 | 分页总页数。非受控属性 | N
 pageSizeOptions | Array | () => [5, 10, 20, 50] | 分页大小控制器，值为 [] 则不显示。TS 类型：`Array<number | { label: string; value: number }>` | N

examples/skeleton/demos/delay.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <t-switch v-model="loading" class="mb-20"></t-switch>
+
+    <div>
+      <t-skeleton :loading="loading" :delay="2000">
+        <div class="t-skeleton-demo-paragraph">
+          <p>
+            骨架屏组件，是指当网络较慢时，在页面真实数据加载之前，给用户展示出页面的大致结构。
+            一方面让用户对页面有一定的心理预期，另一方面可以改善长期停留在空白屏给用户带来的枯燥和不适感。它可以为用户提供更好视觉效果和使用体验。
+          </p>
+        </div>
+      </t-skeleton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+
+const loading = ref(false);
+</script>
+
+<style scoped>
+.mb-20 {
+  margin-bottom: 20px;
+}
+.t-skeleton-demo-paragraph {
+  line-height: 25px;
+}
+</style>

examples/skeleton/skeleton.md

@@ -5,7 +5,8 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-animation | String | - | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画。可选项：gradient/flashed | N
+animation | String | none | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画。可选项：gradient/flashed/none | N
+delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
 loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N
-rowCol | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/skeleton/type.ts) | N
+rowCol | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<Number | SkeletonRowColObj | Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string | TNode; type?: 'rect' | 'circle' | 'text' }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/skeleton/type.ts) | N
 theme | String | text | 快捷定义骨架图风格，有基础、头像组合等，具体参看代码示例。可选项：text/avatar/paragraph/avatar-text/tab/article | N

script/rollup.config.js

@@ -170,12 +170,7 @@ const esmConfig = {
   // 为了保留 style/index.js
   treeshake: false,
   external: externalDeps.concat(externalPeerDeps),
-  plugins: [
-    multiInput(),
-    postcss({
-      extensions: ['.sass', '.scss', '.css', '.less'],
-    }),
-  ].concat(getPlugins({ ignoreLess: false })),
+  plugins: [multiInput()].concat(getPlugins({ ignoreLess: false })),
   output: {
     banner,
     dir: 'esm/',
@@ -189,12 +184,7 @@ const esmConfig = {
 const cjsConfig = {
   input: inputList,
   external: externalDeps.concat(externalPeerDeps),
-  plugins: [
-    multiInput(),
-    postcss({
-      extensions: ['.sass', '.scss', '.css', '.less'],
-    }),
-  ].concat(getPlugins({ ignoreLess: false })),
+  plugins: [multiInput()].concat(getPlugins({ ignoreLess: false })),
   output: {
     banner,
     dir: 'lib/',

site/site.config.mjs

@@ -13,8 +13,7 @@ export default {
         {
           title: '最佳实践',
           name: 'quick-start',
-          meta: {
-          },
+          meta: {},
           path: '/vue-next/quick-start',
           component: () => import('@/site/docs/starter.md'),
         },
@@ -27,8 +26,7 @@ export default {
         {
           title: '组件概览',
           name: 'overview',
-          meta: {
-          },
+          meta: {},
           path: '/vue-next/overview',
           component: () => import('@common/docs/web/overview.md'),
         },
@@ -107,8 +105,7 @@ export default {
         {
           title: 'Affix 固钉',
           name: 'affix',
-          meta: {
-          },
+          meta: {},
           path: '/vue-next/components/affix',
           component: () => import('@/examples/affix/affix.md'),
         },
@@ -163,8 +160,7 @@ export default {
         {
           title: 'Cascader 级联组件',
           name: 'cascader',
-          meta: {
-          },
+          meta: {},
           path: '/vue-next/components/cascader',
           component: () => import('@/examples/cascader/cascader.md'),
         },
@@ -285,8 +281,7 @@ export default {
         {
           title: 'Avatar 头像',
           name: 'avatar',
-          meta: {
-          },
+          meta: {},
           path: '/vue-next/components/avatar',
           component: () => import('@/examples/avatar/avatar.md'),
         },
@@ -317,8 +312,7 @@ export default {
         {
           title: 'Comment 评论',
           name: 'comment',
-          meta: {
-          },
+          meta: {},
           path: '/vue-next/components/comment',
           component: () => import('@/examples/comment/comment.md'),
         },

site/src/components/components.jsx

@@ -94,7 +94,7 @@ export default defineComponent({
           <t-select
             id="historyVersion"
             slot="extra"
-            value={this.version}
+            value={this.version.replace(/\./g, '_')}
             popupProps={{ zIndex: 500, attach: this.getAttach }}
             onChange={this.changeVersion}
             options={this.options}

src/alert/alert.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, VNode, ComponentPublicInstance, ref, onMounted, onBeforeUnmount } from 'vue';
+import { defineComponent, VNode, ref, onMounted, onBeforeUnmount } from 'vue';
 import {
   CheckCircleFilledIcon,
   CloseIcon,
@@ -23,9 +23,9 @@ export default defineComponent({
 
     const renderIconTNode = useIcon();
     // alert的dom引用
-    const ele = ref<HTMLElement | null>(null);
+    const alertRef = ref<HTMLElement | null>(null);
     // description的dom引用
-    const description = ref<HTMLElement | null>(null);
+    const descriptionRef = ref<HTMLElement | null>(null);
     // desc高度
     const descHeight = ref(0);
     // 是否可见，关闭后置为false
@@ -62,22 +62,22 @@ export default defineComponent({
       ) : null;
     };
 
-    const renderTitle = (context: ComponentPublicInstance) => {
+    const renderTitle = () => {
       const titleContent = renderTNodeJSX('title');
       return titleContent ? <div class={`${COMPONENT_NAME.value}__title`}> {titleContent}</div> : null;
     };
 
-    const renderMessage = (context: ComponentPublicInstance) => {
+    const renderMessage = () => {
       const operationContent = renderTNodeJSX('operation');
       return (
         <div class={`${COMPONENT_NAME.value}__message`}>
-          {renderDescription(context)}
+          {renderDescription()}
           {operationContent ? <div class={`${COMPONENT_NAME.value}__operation`}>{operationContent}</div> : null}
         </div>
       );
     };
 
-    const renderDescription = (context: ComponentPublicInstance) => {
+    const renderDescription = () => {
       let messageContent;
 
       messageContent = renderTNodeJSX('default');
@@ -86,19 +86,20 @@ export default defineComponent({
       }
       const contentLength = Array.isArray(messageContent) ? (messageContent as Array<SlotReturnValue>).length : 1;
       const hasCollapse = props.maxLine > 0 && props.maxLine < contentLength;
-      const height = (description.value?.children[0] as HTMLElement)?.offsetHeight;
+      const height = (descriptionRef.value?.children[0] as HTMLElement)?.offsetHeight;
       if (hasCollapse && collapsed.value) {
         // 折叠
         messageContent = (messageContent as Array<SlotReturnValue>).slice(0, props.maxLine as number);
-        height && (description.value.style.height = `${descHeight.value}px`);
+        height && (descriptionRef.value.style.height = `${descHeight.value}px`);
       } else if (hasCollapse) {
         // 展开
-        height && (description.value.style.height = `${height * (contentLength - props.maxLine) + descHeight.value}px`);
+        height &&
+          (descriptionRef.value.style.height = `${height * (contentLength - props.maxLine) + descHeight.value}px`);
       }
 
       // 如果需要折叠，则元素之间补<br/>；否则不补
       return (
-        <div class={`${COMPONENT_NAME.value}__description`} ref="description">
+        <div class={`${COMPONENT_NAME.value}__description`} ref={descriptionRef}>
           {hasCollapse
             ? (messageContent as Array<string | VNode>).map((content) => <div>{content}</div>)
             : messageContent}
@@ -115,17 +116,17 @@ export default defineComponent({
         </div>
       );
     };
-    const renderContent = (context: ComponentPublicInstance) => {
+    const renderContent = () => {
       return (
         <div class={`${COMPONENT_NAME.value}__content`}>
-          {renderTitle(context)}
-          {renderMessage(context)}
+          {renderTitle()}
+          {renderMessage()}
         </div>
       );
     };
     const handleClose = (e: MouseEvent) => {
       props.onClose?.({ e });
-      addClass(ele.value, `${COMPONENT_NAME.value}--closing`);
+      addClass(alertRef.value, `${COMPONENT_NAME.value}--closing`);
     };
 
     const handleCloseEnd = (e: TransitionEvent) => {
@@ -136,42 +137,26 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      on(ele.value, 'transitionend', handleCloseEnd);
-      descHeight.value = description.value.offsetHeight;
+      on(alertRef.value, 'transitionend', handleCloseEnd);
+      descHeight.value = descriptionRef.value.offsetHeight;
     });
     onBeforeUnmount(() => {
-      off(ele.value, 'transitionend', handleCloseEnd);
+      off(alertRef.value, 'transitionend', handleCloseEnd);
     });
-    return {
-      COMPONENT_NAME,
-      classPrefix,
-      ele,
-      description,
-      visible,
-      collapsed,
-      renderIcon,
-      renderTitle,
-      renderMessage,
-      renderDescription,
-      renderContent,
-      renderClose,
-      handleClose,
-      handleCloseEnd,
-    };
-  },
-  render() {
-    const { theme, visible, $attrs, renderIcon, renderContent, renderClose, classPrefix } = this;
-    const CLASS = [
-      `${this.COMPONENT_NAME}`,
-      `${this.COMPONENT_NAME}--${theme}`,
-      {
-        [`${classPrefix}-is-hidden`]: !visible,
-      },
-    ];
-    return (
-      <div class={CLASS} {...$attrs} ref="ele">
+
+    return () => (
+      <div
+        ref={alertRef}
+        class={[
+          `${COMPONENT_NAME.value}`,
+          `${COMPONENT_NAME.value}--${props.theme}`,
+          {
+            [`${classPrefix}-is-hidden`]: !visible.value,
+          },
+        ]}
+      >
         {renderIcon()}
-        {renderContent(this)}
+        {renderContent()}
         {renderClose()}
       </div>
     );

src/anchor/anchor.tsx

@@ -28,7 +28,7 @@ export interface Anchor extends ComponentPublicInstance {
 export default defineComponent({
   name: 'TAnchor',
   props,
-  setup(props: TdAnchorProps, { slots, attrs }) {
+  setup(props: TdAnchorProps, { attrs }) {
     const anchorRef = ref<HTMLElement | null>(null);
     const links = ref<string[]>([]);
     const active = ref('');

src/avatar/group.tsx

@@ -6,9 +6,6 @@ import { usePrefixClass } from '../hooks/useConfig';
 
 export default defineComponent({
   name: 'TAvatarGroup',
-  components: {
-    Avatar,
-  },
   props,
 
   setup(props) {

src/checkbox/group.tsx

@@ -9,6 +9,7 @@ import { CheckboxGroupInjectionKey } from './constants';
 import useVModel from '../hooks/useVModel';
 import { usePrefixClass } from '../hooks/useConfig';
 import { useTNodeJSX } from '../hooks/tnode';
+import { useChildComponentSlots } from '../hooks/slot';
 
 export default defineComponent({
   name: 'TCheckboxGroup',
@@ -121,7 +122,10 @@ export default defineComponent({
       }
     };
 
-    const getOptionListBySlots = (nodes: VNode[]) => {
+    const getChildComponentSlots = useChildComponentSlots();
+
+    const getOptionListBySlots = () => {
+      const nodes = getChildComponentSlots('checkbox');
       const arr: Array<CheckboxOptionObj> = [];
       nodes?.forEach((node) => {
         const option = node.props as CheckboxOptionObj;
@@ -166,7 +170,7 @@ export default defineComponent({
         ));
       } else {
         const nodes = renderTNodeJSX('default');
-        optionList.value = getOptionListBySlots(nodes);
+        optionList.value = getOptionListBySlots();
         children = nodes;
       }
       return <div class={COMPONENT_NAME.value}>{children}</div>;

src/color-picker/panel/alpha.tsx

@@ -5,9 +5,6 @@ import { useBaseClassName } from '../hooks';
 
 export default defineComponent({
   name: 'AlphaSlider',
-  components: {
-    ColorSlider,
-  },
   inheritAttrs: false,
   props: {
     color: {
@@ -43,7 +40,7 @@ export default defineComponent({
   render() {
     const { baseClassName } = this;
     return (
-      <color-slider
+      <ColorSlider
         class={[`${baseClassName}__alpha`, `${baseClassName}--bg-alpha`]}
         color={this.color}
         value={this.color.alpha * 100}