feat(1.6.0): weekly sync update to naruto

CHANGELOG.md

@@ -5,6 +5,22 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.6.0 `2023-08-10` 
+### 🚀 Features
+- `Icon`: 新增 960 个图标；调整图标命名 `photo` 为 `camera`，`books`为`bookmark`, `stop-cirle-1`为`stop-circle-stroke`；移除`money-circle`图标，具体请查看图标页面  @uyarn ([#2677](https://github.com/Tencent/tdesign-vue/pull/2677))
+- `Table`: 可编辑表格，新增 `edit.keepEditMode` ，用于控制单元格始终保持为编辑态 @chaishi ([#2662](https://github.com/Tencent/tdesign-vue/pull/2662))
+- `Image`: @chaishi ([#2665](https://github.com/Tencent/tdesign-vue/pull/2665))
+  - 属性 `src` 支持传入 File 文件类型显示图片
+  - 新增支持 `fallback` ，用于设置图片加载失败时的兜底图
+  - 新增支持 `referrerpolicy` 属性
+- `ImageViewer`: 属性 `images` 支持传入 File 文件类型预览图片 @chaishi ([#2665](https://github.com/Tencent/tdesign-vue/pull/2665))
+- `Upload`: 文件上传列表支持显示缩略图，通过 `showThumbnail` 属性控制 @chaishi ([#2665](https://github.com/Tencent/tdesign-vue/pull/2665))
+- `Link`: 新增透传 `download` 属性，支持浏览器直接下载，https://github.com/Tencent/tdesign-vue/issues/2628 @xiaosansiji ([#2659](https://github.com/Tencent/tdesign-vue/pull/2659))
+### 🐞 Bug Fixes
+- `InputAdornment`: 修复装饰文字折行的问题 @PengYYYYY ([common#1553](https://github.com/Tencent/tdesign-common/pull/1553))
+### 🚧 Others
+- `官网`: 新增分类展示全部图标的 UI  @uyarn ([#2677](https://github.com/Tencent/tdesign-vue/pull/2677))
+
 ## 🌈 1.5.2 `2023-08-01` 
 ### 🚀 Features
 - `Table`:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-vue",
   "purename": "tdesign",
-  "version": "1.5.2-naruto",
+  "version": "1.6.0-naruto",
   "description": "tdesign-vue",
   "title": "tdesign-vue",
   "keywords": [
@@ -96,7 +96,7 @@
     "mitt": "^3.0.0",
     "raf": "^3.4.1",
     "sortablejs": "^1.15.0",
-    "tdesign-icons-vue": "^0.1.6",
+    "tdesign-icons-vue": "^0.2.0",
     "tinycolor2": "^1.4.2",
     "validator": "^13.5.1"
   },
@@ -150,7 +150,7 @@
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-vue": "^8.1.1",
-    "fs-extra": "^10.1.0",
+    "fs-extra": "^11.1.1",
     "glob": "^8.0.3",
     "gray-matter": "^4.0.3",
     "husky": "^7.0.4",
@@ -176,7 +176,7 @@
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-terser": "~7.0.2",
     "rollup-plugin-vue": "^5.1.9",
-    "tdesign-icons-view": "^0.1.5",
+    "tdesign-icons-view": "^0.2.0",
     "tdesign-publish-cli": "^0.0.12",
     "tdesign-site-components": "^0.13.0",
     "tdesign-theme-generator": "^1.0.5",

src/anchor/__tests__/__snapshots__/anchor-target.test.jsx.snap

@@ -1,8 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`AnchorTarget > <slot> > should render default slot 1`] = `
-"<h1 id=\\"test-target\\" class=\\"t-anchor__target\\">this is default slots<svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-file-copy t-anchor__copy\\">
-    <path fill=\\"currentColor\\" d=\\"M4 1.92C4 1.34 4.52 1 5 1h4.37a1 1 0 01.71.3L13.71 5a1 1 0 01.29.7v6.38c0 .58-.52.92-1 .92H5c-.48 0-1-.34-1-.92V1.92zM5 2v10h8V6.01H9V2H5zm5 .65V5h2.32L10 2.65z\\" fill-opacity=\\"0.9\\"></path>
-    <path fill=\\"currentColor\\" d=\\"M2 5v9.01a1 1 0 001 1h8v-1H3V5H2z\\" fill-opacity=\\"0.9\\"></path>
+"<h1 id=\\"test-target\\" class=\\"t-anchor__target\\">this is default slots<svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-file-copy t-anchor__copy\\">
+    <path fill=\\"currentColor\\" d=\\"M6 1h9.41L21 6.59V19H6V1zm2 2v14h11V9h-6V3H8zm7 .41V7h3.59L15 3.41zM4 5v16h11v2H2V5h2z\\"></path>
   </svg></h1>"
 `;

src/back-top/__tests__/__snapshots__/vitest-back-top.test.jsx.snap

@@ -39,13 +39,12 @@ exports[`BackTop Component > props.shape is equal to circle 1`] = `
       class="t-icon t-icon-backtop t-back-top__icon"
       fill="none"
       height="1em"
-      viewBox="0 0 16 16"
+      viewBox="0 0 24 24"
       width="1em"
     >
       <path
-        d="M2 3h12V2H2v1zM3.38 10.23l4.1-4.03v8.64H8.5V6.2l4.18 4.08.71-.7-5.05-4.93a.5.5 0 00-.7 0l-4.98 4.9.72.69z"
+        d="M4 4h16v2H4V4zm8 3.59l6.91 6.91-1.41 1.41-4.5-4.5V21h-2v-9.59l-4.5 4.5-1.41-1.41L12 7.59z"
         fill="currentColor"
-        fill-opacity="0.9"
       />
     </svg>
     <span
@@ -68,13 +67,12 @@ exports[`BackTop Component > props.shape is equal to square 1`] = `
       class="t-icon t-icon-backtop t-back-top__icon"
       fill="none"
       height="1em"
-      viewBox="0 0 16 16"
+      viewBox="0 0 24 24"
       width="1em"
     >
       <path
-        d="M2 3h12V2H2v1zM3.38 10.23l4.1-4.03v8.64H8.5V6.2l4.18 4.08.71-.7-5.05-4.93a.5.5 0 00-.7 0l-4.98 4.9.72.69z"
+        d="M4 4h16v2H4V4zm8 3.59l6.91 6.91-1.41 1.41-4.5-4.5V21h-2v-9.59l-4.5 4.5-1.41-1.41L12 7.59z"
         fill="currentColor"
-        fill-opacity="0.9"
       />
     </svg>
     <span

src/breadcrumb/__tests__/__snapshots__/index.test.jsx.snap

@@ -29,13 +29,12 @@ exports[`Breadcrumb > <slot> > <separator> 1`] = `
         class="t-icon t-icon-chevron-right"
         fill="none"
         height="1em"
-        viewBox="0 0 16 16"
+        viewBox="0 0 24 24"
         width="1em"
       >
         <path
-          d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+          d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
           fill="currentColor"
-          fill-opacity="0.9"
         />
       </svg>
     </span>
@@ -64,13 +63,12 @@ exports[`Breadcrumb > <slot> > <separator> 1`] = `
         class="t-icon t-icon-chevron-right"
         fill="none"
         height="1em"
-        viewBox="0 0 16 16"
+        viewBox="0 0 24 24"
         width="1em"
       >
         <path
-          d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+          d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"
           fill="currentColor"
-          fill-opacity="0.9"
         />
       </svg>
     </span>

src/breadcrumb/_example/icon.vue

@@ -1,8 +1,8 @@
 <template>
   <t-breadcrumb>
-    <t-breadcrumbItem><icon name="books" slot="icon" />页面1</t-breadcrumbItem>
-    <t-breadcrumbItem><icon name="books" slot="icon" />页面2</t-breadcrumbItem>
-    <t-breadcrumbItem><icon name="books" slot="icon" />页面3</t-breadcrumbItem>
+    <t-breadcrumbItem><icon name="bookmark" slot="icon" />页面1</t-breadcrumbItem>
+    <t-breadcrumbItem><icon name="bookmark" slot="icon" />页面2</t-breadcrumbItem>
+    <t-breadcrumbItem><icon name="bookmark" slot="icon" />页面3</t-breadcrumbItem>
   </t-breadcrumb>
 </template>
 <script>

src/date-picker/__tests__/__snapshots__/index.test.jsx.snap

@@ -31,13 +31,12 @@ exports[`DatePicker > :mode 1`] = `
             class="t-icon t-icon-calendar"
             fill="none"
             height="1em"
-            viewBox="0 0 16 16"
+            viewBox="0 0 24 24"
             width="1em"
           >
             <path
-              d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"
+              d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"
               fill="currentColor"
-              fill-opacity="0.9"
             />
           </svg>
         </span>
@@ -79,13 +78,12 @@ exports[`DatePicker > :range 1`] = `
             class="t-icon t-icon-calendar"
             fill="none"
             height="1em"
-            viewBox="0 0 16 16"
+            viewBox="0 0 24 24"
             width="1em"
           >
             <path
-              d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"
+              d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"
               fill="currentColor"
-              fill-opacity="0.9"
             />
           </svg>
         </span>
@@ -126,13 +124,12 @@ exports[`DatePicker > :value 1`] = `
             class="t-icon t-icon-calendar"
             fill="none"
             height="1em"
-            viewBox="0 0 16 16"
+            viewBox="0 0 24 24"
             width="1em"
           >
             <path
-              d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"
+              d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"
               fill="currentColor"
-              fill-opacity="0.9"
             />
           </svg>
         </span>

src/date-picker/__tests__/__snapshots__/rangepicker.test.jsx.snap

@@ -31,13 +31,12 @@ exports[`DateRangePicker > :mode 1`] = `
             class="t-icon t-icon-calendar"
             fill="none"
             height="1em"
-            viewBox="0 0 16 16"
+            viewBox="0 0 24 24"
             width="1em"
           >
             <path
-              d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"
+              d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"
               fill="currentColor"
-              fill-opacity="0.9"
             />
           </svg>
         </span>
@@ -79,13 +78,12 @@ exports[`DateRangePicker > :range 1`] = `
             class="t-icon t-icon-calendar"
             fill="none"
             height="1em"
-            viewBox="0 0 16 16"
+            viewBox="0 0 24 24"
             width="1em"
           >
             <path
-              d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"
+              d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"
               fill="currentColor"
-              fill-opacity="0.9"
             />
           </svg>
         </span>
@@ -126,13 +124,12 @@ exports[`DateRangePicker > :value 1`] = `
             class="t-icon t-icon-calendar"
             fill="none"
             height="1em"
-            viewBox="0 0 16 16"
+            viewBox="0 0 24 24"
             width="1em"
           >
             <path
-              d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"
+              d="M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z"
               fill="currentColor"
-              fill-opacity="0.9"
             />
           </svg>
         </span>

src/hooks/index.ts

@@ -11,3 +11,4 @@ export * from './useLazyLoad';
 export * from './useResizeObserver';
 export * from './useVirtualScrollNew';
 export * from './useVModel';
+export * from './useImagePreviewUrl';

src/hooks/useImagePreviewUrl.ts

@@ -0,0 +1,27 @@
+import {
+  ComputedRef, ref, Ref, watch,
+} from 'vue';
+import { getFileUrlByFileRaw } from '../_common/js/upload/utils';
+
+export function useImagePreviewUrl(imgUrl: Ref<string | File> | ComputedRef<string | File>) {
+  const previewUrl = ref('');
+
+  watch(
+    [imgUrl],
+    ([imgUrl], [preImgUrl]) => {
+      if (preImgUrl === imgUrl) return;
+      if (typeof imgUrl === 'string') {
+        previewUrl.value = imgUrl;
+        return;
+      }
+      getFileUrlByFileRaw(imgUrl).then((url) => {
+        previewUrl.value = url;
+      });
+    },
+    { immediate: true },
+  );
+
+  return { previewUrl };
+}
+
+export default useImagePreviewUrl;

src/icon/_example/base.vue

@@ -1,32 +1,38 @@
 <template>
   <t-space direction="vertical">
     <t-space break-line>
-      <icon name="loading" style="color: #999999" />
-      <icon name="close" @click="onIconClose" />
-      <icon name="check-circle-filled" />
+      <p>How do you feel today?</p>
+      <icon name="sneer" @click="onIconClose" />
+      <icon name="unhappy" />
+      <icon name="excited" />
+      <icon name="surprised" />
+      <icon name="giggle" />
     </t-space>
     <t-space break-line align="center">
-      <icon name="check-circle-filled" size="small" />
-      <icon name="check-circle-filled" />
-      <icon name="check-circle-filled" size="medium" />
-      <icon name="check-circle-filled" size="large" />
-      <icon name="check-circle-filled" size="25px" />
-      <icon name="check-circle-filled" size="2em" />
+      <p>What's your favourite food?</p>
+      <icon name="tangerinr" color="orange" />
+      <icon name="bamboo-shoot" color="green" />
+      <icon name="apple" color="red" />
+      <icon name="milk" color="#0052D9" />
+      <icon name="peach" color="pink" />
     </t-space>
     <t-space break-line>
-      <icon name="check-circle-filled" style="color: red" />
-      <icon name="check-circle-filled" style="color: green" />
-      <icon name="check-circle-filled" style="color: orange" />
+      <p>How much icons does TDesign Icon includes?</p>
+      <icon name="numbers-1" style="color: var(--td-brand-color-5)" />
+      <icon name="numbers-2" style="color: var(--td-brand-color-6)" />
+      <icon name="numbers-0" style="color: var(--td-brand-color-7)" />
+      <icon name="numbers-3" style="color: var(--td-brand-color-8)" />
     </t-space>
   </t-space>
 </template>
-
 <script>
 import { Icon } from 'tdesign-icons-vue';
 
 export default {
-  components: { Icon },
-  methods: {
+  components: {
+    Icon,
+  },
+  method: {
     onIconClose() {
       console.log('icon was clicked.');
     },

src/icon/_example/iconfont.vue

@@ -1,35 +1,36 @@
 <template>
   <t-space direction="vertical">
     <t-space break-line>
-      <icon-font name="loading" />
-      <icon-font name="close" @click="onIconClose" />
-      <icon-font name="check-circle-filled" />
+      <p>How do you feel today?</p>
+      <icon-font name="sneer" />
+      <icon-font name="unhappy" />
+      <icon-font name="excited" />
+      <icon-font name="surprised" />
+      <icon-font name="giggle" />
     </t-space>
-    <t-space break-line align="center">
-      <icon-font name="check-circle-filled" size="small" />
-      <icon-font name="check-circle-filled" />
-      <icon-font name="check-circle-filled" size="medium" />
-      <icon-font name="check-circle-filled" size="large" />
-      <icon-font name="check-circle-filled" size="25px" />
-      <icon-font name="check-circle-filled" size="2em" />
+    <t-space break-line>
+      <p>What's your favourite food?</p>
+      <icon-font name="tangerinr" style="color: orange" />
+      <icon-font name="bamboo-shoot" style="color: green" />
+      <icon-font name="apple" style="color: red" />
+      <icon-font name="milk" style="color: #0052d9" />
+      <icon-font name="peach" style="color: pink" />
     </t-space>
-    <t-space break-line align="center">
-      <icon-font name="check-circle-filled" style="color: red" />
-      <icon-font name="check-circle-filled" style="color: green" />
-      <icon-font name="check-circle-filled" style="color: orange" />
+    <t-space break-line>
+      <p>How much icons does TDesign Icon includes?</p>
+      <icon-font name="numbers-1" style="color: var(--td-brand-color-5)" />
+      <icon-font name="numbers-2" style="color: var(--td-brand-color-6)" />
+      <icon-font name="numbers-0" style="color: var(--td-brand-color-7)" />
+      <icon-font name="numbers-3" style="color: var(--td-brand-color-8)" />
     </t-space>
   </t-space>
 </template>
-
 <script>
 import { IconFont } from 'tdesign-icons-vue';
 
 export default {
-  components: { IconFont },
-  methods: {
-    onIconClose() {
-      console.log('icon was clicked.');
-    },
+  components: {
+    IconFont,
   },
 };
 </script>