Add rename layout title.

components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     Fixed: typeof import('./src/components/list/fixed.vue')['default']
     List: typeof import('./src/components/list/list.vue')['default']
     Resize: typeof import('./src/components/list/resize.vue')['default']
+    Size: typeof import('./src/components/tools/size.vue')['default']
     Skeleton: typeof import('./src/components/skeleton.vue')['default']
     Sort: typeof import('./src/components/list/sort.vue')['default']
     Table: typeof import('./src/components/list/table.vue')['default']

src/assets/i18n/en.ts

@@ -3,7 +3,8 @@ export default {
     },
     show:{
         title:{
-            default: 'Default'
+            default: 'Default',
+            rename: 'Rename'
         }
     },
     list:{

src/assets/i18n/zh-cn.ts

@@ -3,7 +3,8 @@ export default {
     },
     show: {
         title: {
-            default: '默认'
+            default: '默认',
+            rename: '重命名'
         }
     },
     list: {

src/assets/icon.ts

@@ -17,4 +17,11 @@ export const EMAIL = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:
 export const URL = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M30 11h-5v10h2v-3h3a2.003 2.003 0 0 0 2-2v-3a2.002 2.002 0 0 0-2-2zm-3 5v-3h3l.001 3z" fill="currentColor"></path><path d="M10 13h2v8h2v-8h2v-2h-6v2z" fill="currentColor"></path><path d="M23 11h-6v2h2v8h2v-8h2v-2z" fill="currentColor"></path><path d="M6 11v4H3v-4H1v10h2v-4h3v4h2V11H6z" fill="currentColor"></path></svg>'
 export const PHONE = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M26 29h-.17C6.18 27.87 3.39 11.29 3 6.23A3 3 0 0 1 5.76 3h5.51a2 2 0 0 1 1.86 1.26L14.65 8a2 2 0 0 1-.44 2.16l-2.13 2.15a9.37 9.37 0 0 0 7.58 7.6l2.17-2.15a2 2 0 0 1 2.17-.41l3.77 1.51A2 2 0 0 1 29 20.72V26a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v.08C5.46 12 8.41 26 25.94 27a1 1 0 0 0 1.06-.94v-5.34l-3.77-1.51l-2.87 2.85l-.48-.06c-8.7-1.09-9.88-9.79-9.88-9.88l-.06-.48l2.84-2.87L11.28 5z" fill="currentColor"></path></svg>'
 export const PASSWORD = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M21 2a8.998 8.998 0 0 0-8.612 11.612L2 24v6h6l10.388-10.388A9 9 0 1 0 21 2zm0 16a7.013 7.013 0 0 1-2.032-.302l-1.147-.348l-.847.847l-3.181 3.181L12.414 20L11 21.414l1.379 1.379l-1.586 1.586L9.414 23L8 24.414l1.379 1.379L7.172 28H4v-3.172l9.802-9.802l.848-.847l-.348-1.147A7 7 0 1 1 21 18z" fill="currentColor"></path><circle cx="22" cy="10" r="2" fill="currentColor"></circle></svg>'
-export const DELETE = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M12 12h2v12h-2z" fill="currentColor"></path><path d="M18 12h2v12h-2z" fill="currentColor"></path><path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" fill="currentColor"></path><path d="M12 2h8v2h-8z" fill="currentColor"></path></svg>'
+export const DELETE = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M12 12h2v12h-2z" fill="currentColor"></path><path d="M18 12h2v12h-2z" fill="currentColor"></path><path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" fill="currentColor"></path><path d="M12 2h8v2h-8z" fill="currentColor"></path></svg>'
+export const CHART = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M6 9.99h2v7H6zm8 3h2v4h-2zm-4-6h2v10h-2zM20 7V4h-2v3h-3v2h3v3h2V9h3V7zm-2 12H4V5h12V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5h-2v5z" fill="currentColor"></path></svg>'
+export const LIST = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M8 4.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-6-1A1.5 1.5 0 0 1 3.5 14h1A1.5 1.5 0 0 1 6 15.5v1A1.5 1.5 0 0 1 4.5 18h-1A1.5 1.5 0 0 1 2 16.5v-1zm0-6A1.5 1.5 0 0 1 3.5 8h1A1.5 1.5 0 0 1 6 9.5v1A1.5 1.5 0 0 1 4.5 12h-1A1.5 1.5 0 0 1 2 10.5v-1zm0-6A1.5 1.5 0 0 1 3.5 2h1A1.5 1.5 0 0 1 6 3.5v1A1.5 1.5 0 0 1 4.5 6h-1A1.5 1.5 0 0 1 2 4.5v-1z" fill="currentColor"></path></g></svg>'
+export const CALENDAR = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="16" rx="2"></rect><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></g></svg>'
+export const BOARD = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none"><path d="M18.251 2.498a3.25 3.25 0 0 1 3.245 3.066l.005.184v12.004a3.25 3.25 0 0 1-3.25 3.25h-12a3.25 3.25 0 0 1-3.246-3.066L3 17.752V5.748a3.25 3.25 0 0 1 3.25-3.25h12.001zm-6.751 7l-7 .001v8.253l.007.16a1.75 1.75 0 0 0 1.743 1.59l5.25-.001V9.498zm8.5 6l-7 .001v4.002h5.25a1.75 1.75 0 0 0 1.75-1.75v-2.253zm-1.749-11.5L13 3.997V14l7-.001l.001-8.25l-.007-.16a1.75 1.75 0 0 0-1.743-1.59zM11.5 3.997l-5.25.001l-.143.006a1.75 1.75 0 0 0-1.606 1.744L4.5 8h7V3.996z" fill="currentColor"></path></g></svg>'
+export const GANTT = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none"><path d="M6 8a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2H6zm5 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1zm4 2a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2h-3zM5.25 4A3.25 3.25 0 0 0 2 7.25v9.5A3.25 3.25 0 0 0 5.25 20h13.5A3.25 3.25 0 0 0 22 16.75v-9.5A3.25 3.25 0 0 0 18.75 4H5.25zM8 5.5V7h1.5V5.5h5V10H16V5.5h2.75c.966 0 1.75.784 1.75 1.75v9.5a1.75 1.75 0 0 1-1.75 1.75H16V17h-1c-.173 0-.34-.022-.5-.063V18.5h-5V11H8v7.5H5.25a1.75 1.75 0 0 1-1.75-1.75v-9.5c0-.966.784-1.75 1.75-1.75H8z" fill="currentColor"></path></g></svg>'
+export const MORE1 = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024"><path fill="currentColor" d="M456 231a56 56 0 1 0 112 0a56 56 0 1 0-112 0zm0 280a56 56 0 1 0 112 0a56 56 0 1 0-112 0zm0 280a56 56 0 1 0 112 0a56 56 0 1 0-112 0z"></path></svg>'
+export const RENAME = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M6.5 2a.5.5 0 0 0 0 1h1v10h-1a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-1V3h1a.5.5 0 0 0 0-1h-3zM4 4h2.5v1H4a1 1 0 0 0-1 1v3.997a1 1 0 0 0 1 1h2.5v1H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm8 6.997H9.5v1H12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H9.5v1H12a1 1 0 0 1 1 1v3.997a1 1 0 0 1-1 1z" fill="currentColor"></path></g></svg>'

src/assets/main.scss

@@ -59,4 +59,10 @@ $modifier-separator: '--' !default;
       @content;
     }
   }
+}
+
+input{
+  padding: 1px;
+  border: 1px solid var(--el-border-color);
+  border-radius: 4px;
 }

src/components/conf.ts

@@ -4,6 +4,8 @@ import { SortConf } from "./sort/conf"
 import * as Filter from './filter/conf'
 import * as Sort from './sort/conf'
 import i18n from '../i18n'
+import * as iconSvg from "../assets/icon"
+
 const { t } = i18n.global
 
 export interface TableBasicConf {
@@ -17,7 +19,8 @@ export interface TableStyleConf {
 
 export interface TableShowConf {
     title: string,
-    layout: LayoutKind,
+    layoutKind: LayoutKind,
+    icon: string,
     dateColumn?: { start: string, end: string }
     fixedColumnIdx: number,
     filters: FilterGroupConf[]
@@ -31,9 +34,27 @@ export function initConf(props: TableProps): [TableBasicConf, { [key: string]: T
     let shows: { [key: string]: TableShowConf } = {}
     if (props.shows) {
         props.shows.forEach(show => {
+            let icon = ''
+            switch (show.layoutKind) {
+                case LayoutKind.CHART:
+                    icon = iconSvg.CHART
+                    break
+                case LayoutKind.CALENDAR:
+                    icon = iconSvg.CALENDAR
+                    break
+                case LayoutKind.BOARD:
+                    icon = iconSvg.BOARD
+                    break
+                case LayoutKind.GANTT:
+                    icon = iconSvg.GANTT
+                    break
+                default:
+                    icon = iconSvg.TEXT
+            }
             shows[show.id] = {
                 title: show.title,
-                layout: show.layout,
+                layoutKind: show.layoutKind,
+                icon: icon,
                 dateColumn: show.dateColumn,
                 fixedColumnIdx: props.columns.findIndex(column => column.name === show.fixedColumn) ?? -1,
                 filters: Filter.initConf(props),
@@ -44,7 +65,8 @@ export function initConf(props: TableProps): [TableBasicConf, { [key: string]: T
     } else {
         shows['default'] = {
             title: t('show.title.default'),
-            layout: LayoutKind.LIST,
+            layoutKind: LayoutKind.LIST,
+            icon: iconSvg.TEXT,
             fixedColumnIdx: -1,
             filters: [],
             sorts: [],

src/components/list/conf.ts

@@ -1,6 +1,6 @@
 import { DataKind, SizeKind, TableProps } from "../props"
 import * as iconSvg from "../../assets/icon"
-import { TableBasicConf, TableShowConf } from "../conf"
+import { TableBasicConf } from "../conf"
 
 export interface ListConf {
     basic: ListBasicConf

src/components/list/delete.vue

@@ -18,5 +18,5 @@ const deleteData = (event: MouseEvent) => {
 </script>
 
 <template>
-  <p className="iw-list-contextmenu__item" @click="deleteData"><svg v-html="iconSvg.DELETE"></svg> {{ $t('list.delete.title') }}</p>
+  <p className="iw-contextmenu__item" @click="deleteData"><svg v-html="iconSvg.DELETE"></svg> {{ $t('list.delete.title') }}</p>
 </template>

src/components/list/fill.vue

@@ -42,11 +42,11 @@ onMounted(() => {
   selectDiv.appendChild(dragDiv)
   listEle.appendChild(selectDiv)
 
-  dragDiv.addEventListener('mousedown', () => {
+  dragDiv.addEventListener('pointerdown', () => {
     isDragging = true
   })
 
-  selectDiv.addEventListener('mouseup', () => {
+  selectDiv.addEventListener('pointerup', () => {
     if (!isDragging) {
       return
     }
@@ -76,7 +76,7 @@ onMounted(() => {
   })
 
   // 不用dragDiv为解决向上拖拽的问题
-  selectDiv.addEventListener('mousemove', (event) => {
+  selectDiv.addEventListener('pointermove', (event) => {
     if (!isDragging) {
       return
     }

src/components/list/fixed.vue

@@ -39,7 +39,7 @@ export function setFixedColumnStyles(styles: any, colIdx: number, fixedColumnIdx
 </script>
 
 <template>
-  <p className="iw-list-contextmenu__item" @click="setFixedColumn">
+  <p className="iw-contextmenu__item" @click="setFixedColumn">
     <svg v-html="iconSvg.LOCK"></svg> {{ props.currentColIdx == props.show.fixedColumnIdx ? $t('list.fixed.unFixedTitle') : $t('list.fixed.fixedTitle') }}
   </p>
 </template>

src/components/list/list.vue

@@ -38,7 +38,7 @@ const showHeaderContextMenu = (event: MouseEvent) => {
     contextmenuEle.style.display = 'flex'
     contextmenuEle.style.left = targetOffset.left + 'px'
     contextmenuEle.style.top = targetOffset.top + targetOffset.height + 5 + 'px'
-    document.addEventListener('mousedown', (e) => {
+    document.addEventListener('pointerdown', (e) => {
       // @ts-ignore
       if (e.target == null || !contextmenuEle.contains(e.target)) {
         contextmenuEle.style.display = 'none'
@@ -60,7 +60,7 @@ const showRowContextMenu = (event: MouseEvent) => {
     contextmenuEle.style.display = 'flex'
     contextmenuEle.style.left = event.x + 'px'
     contextmenuEle.style.top = event.y + 'px'
-    document.addEventListener('mousedown', (e) => {
+    document.addEventListener('pointerdown', (e) => {
       // @ts-ignore
       if (e.target == null || !contextmenuEle.contains(e.target)) {
         contextmenuEle.style.display = 'none'
@@ -73,7 +73,7 @@ const showRowContextMenu = (event: MouseEvent) => {
 <script lang="ts">
 export function closeContextMenu(event: MouseEvent) {
   const targetEle = event.target as HTMLElement
-  const contextmenuEle = targetEle.closest('.iw-list-contextmenu') as HTMLElement
+  const contextmenuEle = targetEle.closest('.iw-contextmenu') as HTMLElement
   contextmenuEle.style.display = 'none'
 }
 </script>
@@ -90,7 +90,7 @@ export function closeContextMenu(event: MouseEvent) {
         @click="showHeaderContextMenu"
       >
         <svg v-html="column.icon"></svg> {{ column.name }}
-        <div className="iw-list-header-contextmenu iw-list-contextmenu" style="display: none">
+        <div className="iw-list-header-contextmenu iw-contextmenu" style="display: none">
           <fixed-comp :current-col-idx="colIndex" :basic-conf="basicConf" :show="listConf.show"></fixed-comp>
         </div>
       </div>
@@ -108,7 +108,7 @@ export function closeContextMenu(event: MouseEvent) {
         </div>
       </template>
     </div>
-    <div className="iw-list-row-contextmenu iw-list-contextmenu" style="display: none">
+    <div className="iw-list-row-contextmenu iw-contextmenu" style="display: none">
       <delete-comp :select-pks="selectedDataPks" v-show="basicConf.editable"></delete-comp>
     </div>
   </div>
@@ -168,19 +168,6 @@ export function closeContextMenu(event: MouseEvent) {
   }
 }
 
-@include b('list-contextmenu') {
-  flex-direction: column;
-  align-items: flex-start;
-  position: fixed;
-  min-width: 120px;
-  min-height: 80px;
-  z-index: 1000;
-  border-radius: 3px;
-  background-color: var(--el-bg-color);
-  border: 1px solid var(--el-border-color);
-  box-shadow: 0 0 5px var(--el-border-color);
-}
-
 @include b('list-row') {
   display: flex;
   border-right: 1px solid var(--el-border-color);
@@ -196,23 +183,3 @@ export function closeContextMenu(event: MouseEvent) {
   background-color: var(--el-bg-color);
 }
 </style>
-
-<style lang="scss">
-@import '../../assets/main.scss';
-
-@include b('list-contextmenu') {
-  @include e('item') {
-    display: flex;
-    align-items: center;
-    padding: 6px;
-    margin: 0;
-    cursor: pointer;
-
-    & svg {
-      width: 1em;
-      height: 1em;
-      margin-right: 3px;
-    }
-  }
-}
-</style>

src/components/list/resize.vue

@@ -25,16 +25,16 @@ onMounted(() => {
   dragDiv.appendChild(subDragDiv)
   listHeaderEle.appendChild(dragDiv)
 
-  dragDiv.addEventListener('mousedown', () => {
+  dragDiv.addEventListener('pointerdown', () => {
     isDragging = true
   })
 
-  dragDiv.addEventListener('mouseup', () => {
+  dragDiv.addEventListener('pointerup', () => {
     isDragging = false
     dragDiv.style.display = 'none'
   })
 
-  dragDiv.addEventListener('mousemove', (event) => {
+  dragDiv.addEventListener('pointermove', (event) => {
     if (!isDragging) {
       return
     }
@@ -46,7 +46,7 @@ onMounted(() => {
     }
   })
 
-  listHeaderEle.addEventListener('mousemove', (event) => {
+  listHeaderEle.addEventListener('pointermove', (event) => {
     const targetEle = event.target as HTMLElement
     if (!targetEle.classList.contains('iw-list-header-cell')) {
       return

src/components/props.ts

@@ -90,7 +90,7 @@ export interface TableColumnProps {
 export interface TableShowProps {
     id: string,
     title: string,
-    layout: LayoutKind,
+    layoutKind: LayoutKind,
     dateColumn?: { start: string, end: string }
     fixedColumn?: string,
     filters?: TableFilterGroupProps[][]