diff --git a/components.d.ts b/components.d.ts index 110d756..d666b8d 100644 --- a/components.d.ts +++ b/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'] diff --git a/src/assets/i18n/en.ts b/src/assets/i18n/en.ts index c72de8c..7802776 100644 --- a/src/assets/i18n/en.ts +++ b/src/assets/i18n/en.ts @@ -3,7 +3,8 @@ export default { }, show:{ title:{ - default: 'Default' + default: 'Default', + rename: 'Rename' } }, list:{ diff --git a/src/assets/i18n/zh-cn.ts b/src/assets/i18n/zh-cn.ts index 248f1eb..5746cfe 100644 --- a/src/assets/i18n/zh-cn.ts +++ b/src/assets/i18n/zh-cn.ts @@ -3,7 +3,8 @@ export default { }, show: { title: { - default: '默认' + default: '默认', + rename: '重命名' } }, list: { diff --git a/src/assets/icon.ts b/src/assets/icon.ts index 23f5ef8..56eed73 100644 --- a/src/assets/icon.ts +++ b/src/assets/icon.ts @@ -17,4 +17,11 @@ export const EMAIL = '' export const PHONE = '' export const PASSWORD = '' -export const DELETE = '' \ No newline at end of file +export const DELETE = '' +export const CHART = '' +export const LIST = '' +export const CALENDAR = '' +export const BOARD = '' +export const GANTT = '' +export const MORE1 = '' +export const RENAME = '' \ No newline at end of file diff --git a/src/assets/main.scss b/src/assets/main.scss index e08daea..95a45ac 100644 --- a/src/assets/main.scss +++ b/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; } \ No newline at end of file diff --git a/src/components/conf.ts b/src/components/conf.ts index 5cb7dbe..fec00cc 100644 --- a/src/components/conf.ts +++ b/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: [], diff --git a/src/components/list/conf.ts b/src/components/list/conf.ts index 8512428..e4062d9 100644 --- a/src/components/list/conf.ts +++ b/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 diff --git a/src/components/list/delete.vue b/src/components/list/delete.vue index 96c91c7..5d5d965 100644 --- a/src/components/list/delete.vue +++ b/src/components/list/delete.vue @@ -18,5 +18,5 @@ const deleteData = (event: MouseEvent) => { diff --git a/src/components/list/fill.vue b/src/components/list/fill.vue index 9b6941b..4115762 100644 --- a/src/components/list/fill.vue +++ b/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 } diff --git a/src/components/list/fixed.vue b/src/components/list/fixed.vue index f39cd1f..f526cf2 100644 --- a/src/components/list/fixed.vue +++ b/src/components/list/fixed.vue @@ -39,7 +39,7 @@ export function setFixedColumnStyles(styles: any, colIdx: number, fixedColumnIdx diff --git a/src/components/list/list.vue b/src/components/list/list.vue index 8568f1e..8df124b 100644 --- a/src/components/list/list.vue +++ b/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) => { @@ -90,7 +90,7 @@ export function closeContextMenu(event: MouseEvent) { @click="showHeaderContextMenu" > {{ column.name }} -
+
@@ -108,7 +108,7 @@ export function closeContextMenu(event: MouseEvent) { -
+
@@ -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); } - - diff --git a/src/components/list/resize.vue b/src/components/list/resize.vue index 6e8d7f0..fc7e4b2 100644 --- a/src/components/list/resize.vue +++ b/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 diff --git a/src/components/props.ts b/src/components/props.ts index fa49d3b..f07a038 100644 --- a/src/components/props.ts +++ b/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[][] diff --git a/src/components/skeleton.vue b/src/components/skeleton.vue index 57e2ff7..89eed64 100644 --- a/src/components/skeleton.vue +++ b/src/components/skeleton.vue @@ -7,6 +7,7 @@ import * as List from './list/conf' import ListComp from './list/list.vue' import { LayoutKind, TableProps } from './props' import * as Sort from './sort/conf' +import * as iconSvg from '../assets/icon' const props = defineProps() @@ -102,11 +103,33 @@ onMounted(async () => { }) await init() }) + +const showLayoutMenu = (event: MouseEvent) => { + const targetEle = event.target as HTMLElement + const selectedLayoutEle = targetEle.parentElement as HTMLElement + const contextmenuEle = selectedLayoutEle.parentElement?.parentElement?.querySelector('.iw-tt-layout-contextmenu') as HTMLElement + if (contextmenuEle) { + let targetOffset = selectedLayoutEle.getBoundingClientRect() + contextmenuEle.style.display = 'flex' + contextmenuEle.style.left = targetOffset.left + 'px' + contextmenuEle.style.top = targetOffset.top + targetOffset.height + 5 + 'px' + document.addEventListener('pointerdown', (e) => { + // @ts-ignore + if (e.target == null || !contextmenuEle.contains(e.target)) { + contextmenuEle.style.display = 'none' + } + }) + } +} @@ -136,8 +163,35 @@ onMounted(async () => { } @include b('tt-layouts') { - height: 40px; - border: 1px solid red; + display: flex; + align-items: center; + padding: 2px; + margin: 0; + border-bottom: 1px solid var(--el-border-color); +} + +@include b('tt-layout') { + display: flex; + align-items: center; + padding: 2px; + margin: 0; + cursor: pointer; + border: 1px solid var(--el-border-color); + border-radius: 6px; + + & svg { + width: 1em; + height: 1em; + margin-right: 3px; + } + + @include m('active') { + background-color: var(--el-color-info-light-7); + } +} + +@include b('tt-layout-contextmenu') { + z-index: 2000; } @include b('tt-tools') { @@ -149,3 +203,34 @@ onMounted(async () => { width: 100%; } + + diff --git a/src/components/tools/size.vue b/src/components/tools/size.vue new file mode 100644 index 0000000..e69de29