rayyy-vue-table-components 1.3.11 → 1.3.13

package/dist/src/components/form/BaseMultipleInput.vue.d.ts

@@ -49,7 +49,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             readonly validateEvent: boolean;
             readonly inputStyle: string | false | import('vue').CSSProperties | import('vue').StyleValue[] | null;
             readonly rows: number;
-            readonly resize?: ("none" | "both" | "horizontal" | "vertical") | undefined;
+            readonly resize?: ("none" | "horizontal" | "vertical" | "both") | undefined;
             readonly size?: ("" | "default" | "small" | "large") | undefined;
             readonly id?: string | undefined;
             readonly ariaLabel?: string | undefined;
@@ -147,7 +147,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
                 readonly default: "text";
             };
             readonly resize: {
-                readonly type: import('vue').PropType<"none" | "both" | "horizontal" | "vertical">;
+                readonly type: import('vue').PropType<"none" | "horizontal" | "vertical" | "both">;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
@@ -404,7 +404,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             readonly default: "text";
         };
         readonly resize: {
-            readonly type: import('vue').PropType<"none" | "both" | "horizontal" | "vertical">;
+            readonly type: import('vue').PropType<"none" | "horizontal" | "vertical" | "both">;
             readonly required: false;
             readonly validator: ((val: unknown) => boolean) | undefined;
             __epPropKey: true;

package/dist/src/components/tables/BaseTable.vue.d.ts

@@ -6,8 +6,10 @@ declare const _default: <T extends Record<string, unknown> = Record<string, unkn
         readonly "onSelection-change"?: ((selection: T[]) => any) | undefined;
         readonly "onCurrent-change"?: ((currentRow: T) => any) | undefined;
         readonly "onColumn-sort-change"?: ((value: SortChangValue<T>) => any) | undefined;
+        readonly "onClick:checkRow"?: ((row: T) => any) | undefined;
+        readonly "onClick:editRow"?: ((row: T) => any) | undefined;
         readonly "onCell-click"?: ((column: TableColumn<T>, row: T) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onSelection-change" | "onCurrent-change" | "onColumn-sort-change" | "onCell-click"> & {
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onSelection-change" | "onCurrent-change" | "onColumn-sort-change" | "onClick:checkRow" | "onClick:editRow" | "onCell-click"> & {
         loading?: boolean;
         data: T[];
         columns: TableColumn<T>[];
@@ -22,6 +24,7 @@ declare const _default: <T extends Record<string, unknown> = Record<string, unkn
             row: T;
             rowIndex: number;
         }) => string) | undefined;
+        showOperator?: boolean;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
@@ -31,6 +34,8 @@ declare const _default: <T extends Record<string, unknown> = Record<string, unkn
         (e: "current-change", currentRow: T): void;
         (e: "cell-click", column: TableColumn<T>, row: T): void;
         (e: "column-sort-change", value: SortChangValue<T>): void;
+        (e: "click:checkRow", row: T): void;
+        (e: "click:editRow", row: T): void;
     };
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/src/components/tables/SortTable.vue.d.ts

@@ -3,11 +3,13 @@ import { TableColumnCtx } from 'element-plus';
 import { VNode } from 'vue';
 declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onClick:cell"?: ((column: TableColumn<T>, row: T) => any) | undefined;
+        readonly "onClick:checkRow"?: ((row: T) => any) | undefined;
+        readonly "onClick:editRow"?: ((row: T) => any) | undefined;
         readonly "onUpdate:selectRow"?: ((value: T[]) => any) | undefined;
+        readonly "onClick:cell"?: ((column: TableColumn<T>, row: T) => any) | undefined;
         readonly "onOpen:transfer"?: (() => any) | undefined;
         readonly "onClick:columnSort"?: ((data: SortChangValue<T>) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick:cell" | "onUpdate:selectRow" | "onOpen:transfer" | "onClick:columnSort"> & {
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick:checkRow" | "onClick:editRow" | "onUpdate:selectRow" | "onClick:cell" | "onOpen:transfer" | "onClick:columnSort"> & {
         data: T[];
         columns: TableColumn<T>[];
         tableTitle?: string;
@@ -23,6 +25,7 @@ declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNull
             row: T;
             rowIndex: number;
         }) => string;
+        showOperator?: boolean;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
@@ -32,6 +35,8 @@ declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNull
         (e: "update:selectRow", value: T[]): void;
         (e: "click:cell", column: TableColumn<T>, row: T): void;
         (e: "click:columnSort", data: SortChangValue<T>): void;
+        (e: "click:checkRow", row: T): void;
+        (e: "click:editRow", row: T): void;
     };
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/src/components/tables/TitleTable.vue.d.ts

@@ -3,12 +3,13 @@ import { TableColumnCtx } from 'element-plus';
 import { TableColumn } from 'src/types';
 declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onClick:checkRow"?: ((row: T) => any) | undefined;
+        readonly "onClick:editRow"?: ((row: T) => any) | undefined;
         readonly "onClick:add"?: (() => any) | undefined;
-        readonly "onClick:edit"?: (() => any) | undefined;
         readonly "onClick:delete"?: (() => any) | undefined;
-        readonly "onClick:cell"?: ((column: TableColumn<T>, row: T) => any) | undefined;
         readonly "onUpdate:selectRow"?: ((value: T[]) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick:add" | "onClick:edit" | "onClick:delete" | "onClick:cell" | "onUpdate:selectRow"> & {
+        readonly "onClick:cell"?: ((column: TableColumn<T>, row: T) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick:checkRow" | "onClick:editRow" | "onClick:add" | "onClick:delete" | "onUpdate:selectRow" | "onClick:cell"> & {
         data: T[];
         columns: TableColumn<T>[];
         tableTitle?: string;
@@ -23,6 +24,7 @@ declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNull
             columns: TableColumnCtx<Record<string, unknown>>[];
             data: T[];
         }) => (string | VNode)[];
+        showOperator?: boolean;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
@@ -31,10 +33,11 @@ declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNull
     };
     emit: {
         (e: "click:add"): void;
-        (e: "click:edit"): void;
         (e: "click:delete"): void;
         (e: "update:selectRow", value: T[]): void;
         (e: "click:cell", column: TableColumn<T>, row: T): void;
+        (e: "click:checkRow", row: T): void;
+        (e: "click:editRow", row: T): void;
     };
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/src/types/components.d.ts

@@ -26,6 +26,8 @@ export interface BaseTableProps<T extends Record<string, unknown> = Record<strin
   }) => (string | VNode)[]
   /** 行樣式類名 */
   baseTableRowClassName?: (data: { row: T; rowIndex: number }) => string
+  /** 是否顯示操作列 */
+  showOperator?: boolean
 }
 
 /** BaseTable 組件 Emits 類型 */
@@ -38,6 +40,10 @@ export interface BaseTableEmits<T extends Record<string, unknown> = Record<strin
   'cell-click': (column: TableColumn<T>, row: T) => void
   /** 列排序變更事件 */
   'column-sort-change': (value: SortChangValue<T>) => void
+  /** 查看按鈕點擊事件 */
+  'click:checkRow': (row: T) => void
+  /** 編輯按鈕點擊事件 */
+  'click:editRow': (row: T) => void
 }
 
 /** BaseTable 組件實例類型 */
@@ -73,6 +79,8 @@ export interface SortTableProps<T extends Record<string, unknown> = Record<strin
   }) => (string | import('vue').VNode)[]
   /** 行樣式類名 */
   sortTableRowClassName?: (data: { row: T; rowIndex: number }) => string
+  /** 是否顯示操作列 */
+  showOperator?: boolean
 }
 
 /** SortTable 組件 Emits 類型 */
@@ -85,6 +93,10 @@ export interface SortTableEmits<T extends Record<string, unknown> = Record<strin
   (e: 'click:cell', column: import('./index').TableColumn<T>, row: T): void
   /** 列排序點擊事件 */
   (e: 'click:columnSort', data: import('./index').SortChangValue<T>): void
+  /** 查看按鈕點擊事件 */
+  (e: 'click:checkRow', row: T): void
+  /** 編輯按鈕點擊事件 */
+  (e: 'click:editRow', row: T): void
 }
 
 /** SortTable 組件實例類型 */
@@ -124,20 +136,24 @@ export interface TitleTableProps<T extends Record<string, unknown> = Record<stri
     columns: import('element-plus').TableColumnCtx<Record<string, unknown>>[]
     data: T[]
   }) => (string | import('vue').VNode)[]
+  /** 是否顯示操作列 */
+  showOperator?: boolean
 }
 
 /** TitleTable 組件 Emits 類型 */
 export interface TitleTableEmits<T extends Record<string, unknown> = Record<string, unknown>> {
   /** 新增按鈕點擊事件 */
   (e: 'click:add'): void
-  /** 編輯按鈕點擊事件 */
-  (e: 'click:edit'): void
   /** 刪除按鈕點擊事件 */
   (e: 'click:delete'): void
   /** 更新選擇行事件 */
   (e: 'update:selectRow', value: T[]): void
   /** 單元格點擊事件 */
   (e: 'click:cell', column: import('./index').TableColumn<T>, row: T): void
+  /** 查看按鈕點擊事件 */
+  (e: 'click:checkRow', row: T): void
+  /** 編輯按鈕點擊事件 */
+  (e: 'click:editRow', row: T): void
 }
 
 /** TitleTable 組件實例類型 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayyy-vue-table-components",
-  "version": "1.3.11",
+  "version": "1.3.13",
   "description": "Vue 3 + Element Plus 表格組件庫",
   "type": "module",
   "main": "./dist/index.umd.js",

package/src/components/tables/BaseTable.vue

@@ -15,6 +15,7 @@ type Props<T extends Record<string, unknown> = Record<string, unknown>> = {
     data: T[]
   }) => (string | VNode)[]
   baseTableRowClassName?: (data: { row: T; rowIndex: number }) => string
+  showOperator?: boolean
 }
 
 // 組件屬性默認值
@@ -24,6 +25,7 @@ const props = withDefaults(defineProps<Props<T>>(), {
   showSelection: false,
   showSummary: false,
   showOverFlowTooltip: false,
+  showOperator: false,
   summaryMethod: () => [],
   baseTableRowClassName: () => '',
 })
@@ -33,6 +35,8 @@ const emit = defineEmits<{
   (e: 'current-change', currentRow: T): void
   (e: 'cell-click', column: TableColumn<T>, row: T): void
   (e: 'column-sort-change', value: SortChangValue<T>): void
+  (e: 'click:checkRow', row: T): void
+  (e: 'click:editRow', row: T): void
 }>()
 
 const handleCellClick = (column: TableColumn<T>, row: T) => {
@@ -55,6 +59,9 @@ const tableRowClassName = (data: RowClassNameData<T>) => {
 const onSortChange = (value: SortChangValue<T>) => {
   emit('column-sort-change', value)
 }
+const handleOperateClick = (value: T, clickType: 'check' | 'edit') => {
+  clickType == 'check' ? emit('click:checkRow', value) : emit('click:editRow', value)
+}
 </script>
 
 <template>
@@ -95,6 +102,27 @@ const onSortChange = (value: SortChangValue<T>) => {
         </div>
       </template>
     </el-table-column>
+    <el-table-column v-if="showOperator" width="120" align="center" fixed="right">
+      <template #default="{ row }">
+        <div class="flex items-center justify-center">
+          <base-btn
+            type="primary"
+            :text-btn="true"
+            size="small"
+            text="查看"
+            @click="handleOperateClick(row, 'check')"
+          />
+          <el-divider direction="vertical" class="!mx-1" />
+          <base-btn
+            type="primary"
+            :text-btn="true"
+            size="small"
+            text="编辑"
+            @click="handleOperateClick(row, 'edit')"
+          />
+        </div>
+      </template>
+    </el-table-column>
   </el-table>
 </template>
 

package/src/components/tables/SortTable.vue

@@ -18,6 +18,7 @@ defineProps<{
     data: T[]
   }) => (string | VNode)[]
   sortTableRowClassName?: (data: { row: T; rowIndex: number }) => string
+  showOperator?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -25,6 +26,8 @@ const emit = defineEmits<{
   (e: 'update:selectRow', value: T[]): void
   (e: 'click:cell', column: TableColumn<T>, row: T): void
   (e: 'click:columnSort', data: SortChangValue<T>): void
+  (e: 'click:checkRow', row: T): void
+  (e: 'click:editRow', row: T): void
 }>()
 
 const openTransferDialog = () => {
@@ -41,6 +44,14 @@ const handleCellClick = (column: TableColumn<T>, row: T) => {
 const handleColumnSortChange = (data: SortChangValue<T>) => {
   emit('click:columnSort', data)
 }
+
+const handleCheckClick = (row: T) => {
+  emit('click:checkRow', row)
+}
+
+const handleEditClick = (row: T) => {
+  emit('click:editRow', row)
+}
 </script>
 
 <template>
@@ -66,9 +77,12 @@ const handleColumnSortChange = (data: SortChangValue<T>) => {
       :summary-method="summaryMethod"
       :show-selection="showSelection"
       :base-table-row-class-name="sortTableRowClassName"
+      :show-operator="showOperator"
       @selection-change="handleSelectionChange"
       @cell-click="handleCellClick"
       @column-sort-change="handleColumnSortChange"
+      @click:checkRow="handleCheckClick"
+      @click:editRow="handleEditClick"
     />
   </div>
 </template>

package/src/components/tables/TitleTable.vue

@@ -20,14 +20,16 @@ defineProps<{
     columns: TableColumnCtx<Record<string, unknown>>[]
     data: T[]
   }) => (string | VNode)[]
+  showOperator?: boolean
 }>()
 
 const emit = defineEmits<{
   (e: 'click:add'): void
-  (e: 'click:edit'): void
   (e: 'click:delete'): void
   (e: 'update:selectRow', value: T[]): void
   (e: 'click:cell', column: TableColumn<T>, row: T): void
+  (e: 'click:checkRow', row: T): void
+  (e: 'click:editRow', row: T): void
 }>()
 
 const addInvoiceDetail = () => {
@@ -42,6 +44,14 @@ const handleSelectionChange = (selectList: T[]) => {
 const handleCellClick = (column: TableColumn<T>, row: T) => {
   emit('click:cell', column, row)
 }
+
+const handleCheckClick = (row: T) => {
+  emit('click:checkRow', row)
+}
+
+const handleEditClick = (row: T) => {
+  emit('click:editRow', row)
+}
 </script>
 
 <template>
@@ -73,8 +83,11 @@ const handleCellClick = (column: TableColumn<T>, row: T) => {
       :summary-method="summaryMethod"
       :show-selection="propIsEditable || showSelection"
       :show-over-flow-tooltip="showOverFlowTooltip"
+      :show-operator="showOperator"
       @selection-change="handleSelectionChange"
       @cell-click="handleCellClick"
+      @click:checkRow="handleCheckClick"
+      @click:editRow="handleEditClick"
     />
   </div>
 </template>

package/src/types/components.d.ts

@@ -27,6 +27,8 @@ export interface BaseTableProps<T extends Record<string, unknown> = Record<strin
   }) => (string | VNode)[]
   /** 行樣式類名 */
   baseTableRowClassName?: (data: { row: T; rowIndex: number }) => string
+  /** 是否顯示操作列 */
+  showOperator?: boolean
 }
 
 /** BaseTable 組件 Emits 類型 */
@@ -39,6 +41,10 @@ export interface BaseTableEmits<T extends Record<string, unknown> = Record<strin
   'cell-click': (column: TableColumn<T>, row: T) => void
   /** 列排序變更事件 */
   'column-sort-change': (value: SortChangValue<T>) => void
+  /** 查看按鈕點擊事件 */
+  'click:checkRow': (row: T) => void
+  /** 編輯按鈕點擊事件 */
+  'click:editRow': (row: T) => void
 }
 
 /** BaseTable 組件實例類型 */
@@ -74,6 +80,8 @@ export interface SortTableProps<T extends Record<string, unknown> = Record<strin
   }) => (string | import('vue').VNode)[]
   /** 行樣式類名 */
   sortTableRowClassName?: (data: { row: T; rowIndex: number }) => string
+  /** 是否顯示操作列 */
+  showOperator?: boolean
 }
 
 /** SortTable 組件 Emits 類型 */
@@ -86,6 +94,10 @@ export interface SortTableEmits<T extends Record<string, unknown> = Record<strin
   (e: 'click:cell', column: import('./index').TableColumn<T>, row: T): void
   /** 列排序點擊事件 */
   (e: 'click:columnSort', data: import('./index').SortChangValue<T>): void
+  /** 查看按鈕點擊事件 */
+  (e: 'click:checkRow', row: T): void
+  /** 編輯按鈕點擊事件 */
+  (e: 'click:editRow', row: T): void
 }
 
 /** SortTable 組件實例類型 */
@@ -125,20 +137,24 @@ export interface TitleTableProps<T extends Record<string, unknown> = Record<stri
     columns: import('element-plus').TableColumnCtx<Record<string, unknown>>[]
     data: T[]
   }) => (string | import('vue').VNode)[]
+  /** 是否顯示操作列 */
+  showOperator?: boolean
 }
 
 /** TitleTable 組件 Emits 類型 */
 export interface TitleTableEmits<T extends Record<string, unknown> = Record<string, unknown>> {
   /** 新增按鈕點擊事件 */
   (e: 'click:add'): void
-  /** 編輯按鈕點擊事件 */
-  (e: 'click:edit'): void
   /** 刪除按鈕點擊事件 */
   (e: 'click:delete'): void
   /** 更新選擇行事件 */
   (e: 'update:selectRow', value: T[]): void
   /** 單元格點擊事件 */
   (e: 'click:cell', column: import('./index').TableColumn<T>, row: T): void
+  /** 查看按鈕點擊事件 */
+  (e: 'click:checkRow', row: T): void
+  /** 編輯按鈕點擊事件 */
+  (e: 'click:editRow', row: T): void
 }
 
 /** TitleTable 組件實例類型 */