rayyy-vue-table-components 1.3.4 → 1.3.5

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

@@ -11,7 +11,9 @@ export { default as TransferItem } from './transfer/transferItem.vue';
 export { default as FunctionHeader } from './layout/FunctionHeader.vue';
 export { default as MainPanel } from './layout/MainPanel.vue';
 export { default as SearchableListPanel } from './layout/SearchableListPanel.vue';
-export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, BaseInputProps, BaseInputEmits, BaseInputInstance, SortTableProps, SortTableEmits, SortTableInstance, TitleTableProps, TitleTableEmits, TitleTableInstance, SearchBarProps, SearchBarEmits, SearchBarInstance, SearchBarSlots, TransferDialogProps, TransferDialogEmits, TransferDialogInstance, TransferItemProps, TransferItemEmits, TransferItemInstance, MainPanelProps, MainPanelEmits, MainPanelInstance, SearchableListPanelProps, SearchableListPanelEmits, SearchableListPanelInstance, SearchableListPanelSlots, FunctionHeaderProps, FunctionHeaderEmits, FunctionHeaderInstance, PluginOptions, VueTableComponentsPlugin } from '../types/components.d';
+export { default as DetailLayout } from './layout/DetailLayout.vue';
+export { default as FilterLayout } from './layout/FilterLayout.vue';
+export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, BaseInputProps, BaseInputEmits, BaseInputInstance, SortTableProps, SortTableEmits, SortTableInstance, TitleTableProps, TitleTableEmits, TitleTableInstance, SearchBarProps, SearchBarEmits, SearchBarInstance, SearchBarSlots, TransferDialogProps, TransferDialogEmits, TransferDialogInstance, TransferItemProps, TransferItemEmits, TransferItemInstance, MainPanelProps, MainPanelEmits, MainPanelInstance, SearchableListPanelProps, SearchableListPanelEmits, SearchableListPanelInstance, SearchableListPanelSlots, FunctionHeaderProps, FunctionHeaderEmits, FunctionHeaderInstance, DetailLayoutProps, DetailLayoutEmits, DetailLayoutInstance, FilterLayoutProps, FilterLayoutEmits, FilterLayoutInstance, PluginOptions, VueTableComponentsPlugin } from '../types/components.d';
 export type { default as BaseTableType } from './tables/BaseTable.vue';
 export type { default as BaseBtnType } from './items/BaseBtn.vue';
 export type { default as BaseInputType } from './form/BaseInput.vue';
@@ -25,3 +27,5 @@ export type { default as SearchableListPanelType } from './layout/SearchableList
 export type { default as BaseMultipleInputType } from './form/BaseMultipleInput.vue';
 export type { default as FunctionHeaderType } from './layout/FunctionHeader.vue';
 export type { default as MainPanelType } from './layout/MainPanel.vue';
+export type { default as DetailLayoutType } from './layout/DetailLayout.vue';
+export type { default as FilterLayoutType } from './layout/FilterLayout.vue';

package/dist/src/components/layout/DetailLayout.vue.d.ts

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    title: string;
+    showBack?: boolean | string | object;
+    isEditable: boolean;
+    pageLoading?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        detailHeader?(_: {}): any;
+        main?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:saveEdit": (value: boolean) => any;
+    "update:cancelEdit": () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:saveEdit"?: ((value: boolean) => any) | undefined;
+    "onUpdate:cancelEdit"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/layout/FilterLayout.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    mainTitle: string;
+    filterTitle: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    submitEmit: () => any;
+    resetEmit: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmitEmit?: (() => any) | undefined;
+    onResetEmit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/router/constants.d.ts

@@ -16,6 +16,8 @@ export declare const ROUTES: {
     readonly SEARCH_BAR: "/demo/search-bar";
     readonly FUNCTION_HEADER: "/demo/function-header";
     readonly MAIN_PANEL: "/demo/main-panel";
+    readonly DETAIL_LAYOUT: "/demo/detail-layout";
+    readonly FILTER_LAYOUT: "/demo/filter-layout";
     readonly NOT_FOUND: "/:catchAll(.*)";
 };
 export declare const ROUTE_NAMES: {
@@ -35,5 +37,7 @@ export declare const ROUTE_NAMES: {
     readonly SEARCH_BAR: "SearchBar";
     readonly FUNCTION_HEADER: "FunctionHeader";
     readonly MAIN_PANEL: "MainPanel";
+    readonly DETAIL_LAYOUT: "DetailLayout";
+    readonly FILTER_LAYOUT: "FilterLayout";
     readonly NOT_FOUND: "NotFoundPage";
 };

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

@@ -472,6 +472,62 @@ export interface MainPanelInstance {
   $emit: MainPanelEmits
 }
 
+// ==================== DetailLayout 組件類型 ====================
+
+/** DetailLayout 組件 Props 類型 */
+export interface DetailLayoutProps {
+  /** 標題 */
+  title: string
+  /** 是否顯示返回按鈕 */
+  showBack?: boolean | string | object
+  /** 是否可編輯 */
+  isEditable: boolean
+  /** 頁面加載狀態 */
+  pageLoading?: boolean
+}
+
+/** DetailLayout 組件 Emits 類型 */
+export interface DetailLayoutEmits {
+  /** 保存編輯事件 */
+  (e: 'update:saveEdit', value: boolean): void
+  /** 取消編輯事件 */
+  (e: 'update:cancelEdit'): void
+}
+
+/** DetailLayout 組件實例類型 */
+export interface DetailLayoutInstance {
+  /** 組件 Props */
+  $props: DetailLayoutProps
+  /** 組件 Emits */
+  $emit: DetailLayoutEmits
+}
+
+// ==================== FilterLayout 組件類型 ====================
+
+/** FilterLayout 組件 Props 類型 */
+export interface FilterLayoutProps {
+  /** 主要標題 */
+  mainTitle: string
+  /** 篩選標題 */
+  filterTitle: string
+}
+
+/** FilterLayout 組件 Emits 類型 */
+export interface FilterLayoutEmits {
+  /** 提交篩選事件 */
+  (e: 'submitEmit'): void
+  /** 重置篩選事件 */
+  (e: 'resetEmit'): void
+}
+
+/** FilterLayout 組件實例類型 */
+export interface FilterLayoutInstance {
+  /** 組件 Props */
+  $props: FilterLayoutProps
+  /** 組件 Emits */
+  $emit: FilterLayoutEmits
+}
+
 // ==================== 轉移相關組件類型 ====================
 
 // ==================== TransferItem 組件類型 ====================
@@ -704,6 +760,38 @@ export declare const MainPanel: DefineComponent<
   install: (app: App) => void
 }
 
+/** DetailLayout 組件定義 */
+export declare const DetailLayout: DefineComponent<
+  DetailLayoutProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  DetailLayoutEmits
+> & {
+  /** 安裝方法 */
+  install: (app: App) => void
+}
+
+/** FilterLayout 組件定義 */
+export declare const FilterLayout: DefineComponent<
+  FilterLayoutProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  FilterLayoutEmits
+> & {
+  /** 安裝方法 */
+  install: (app: App) => void
+}
+
 /** TransferItem 組件定義 */
 export declare const TransferItem: DefineComponent<
   TransferItemProps<any>,
@@ -758,6 +846,10 @@ export interface VueTableComponentsPlugin {
   FunctionHeader: typeof FunctionHeader
   /** MainPanel 組件 */
   MainPanel: typeof MainPanel
+  /** DetailLayout 組件 */
+  DetailLayout: typeof DetailLayout
+  /** FilterLayout 組件 */
+  FilterLayout: typeof FilterLayout
   /** TransferItem 組件 */
   TransferItem: typeof TransferItem
 }
@@ -778,6 +870,8 @@ declare module '@vue/runtime-core' {
     SearchableListPanel: typeof SearchableListPanel
     FunctionHeader: typeof FunctionHeader
     MainPanel: typeof MainPanel
+    DetailLayout: typeof DetailLayout
+    FilterLayout: typeof FilterLayout
     TransferItem: typeof TransferItem
   }
 }

package/dist/src/views/demo/DetailLayoutDemo.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/src/views/demo/FilterLayoutDemo.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/package.json

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

package/src/components/index.ts

@@ -12,6 +12,8 @@ export { default as TransferItem } from './transfer/transferItem.vue'
 export { default as FunctionHeader } from './layout/FunctionHeader.vue'
 export { default as MainPanel } from './layout/MainPanel.vue'
 export { default as SearchableListPanel } from './layout/SearchableListPanel.vue'
+export { default as DetailLayout } from './layout/DetailLayout.vue'
+export { default as FilterLayout } from './layout/FilterLayout.vue'
 
 // 導出組件類型
 export type {
@@ -65,6 +67,14 @@ export type {
   FunctionHeaderProps,
   FunctionHeaderEmits,
   FunctionHeaderInstance,
+  // DetailLayout 組件類型
+  DetailLayoutProps,
+  DetailLayoutEmits,
+  DetailLayoutInstance,
+  // FilterLayout 組件類型
+  FilterLayoutProps,
+  FilterLayoutEmits,
+  FilterLayoutInstance,
   // 插件類型
   PluginOptions,
   VueTableComponentsPlugin
@@ -84,3 +94,5 @@ export type { default as SearchableListPanelType } from './layout/SearchableList
 export type { default as BaseMultipleInputType } from './form/BaseMultipleInput.vue'
 export type { default as FunctionHeaderType } from './layout/FunctionHeader.vue'
 export type { default as MainPanelType } from './layout/MainPanel.vue'
+export type { default as DetailLayoutType } from './layout/DetailLayout.vue'
+export type { default as FilterLayoutType } from './layout/FilterLayout.vue'

package/src/components/layout/FilterLayout.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { MainPanel, BaseBtn } from '@/components'
+
+defineProps<{
+  mainTitle: string
+  filterTitle: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'submitEmit'): void
+  (e: 'resetEmit'): void
+}>()
+
+const doFilter = () => {
+  emit('submitEmit')
+}
+const resetFilter = () => {
+  emit('resetEmit')
+}
+</script>
+
+<template>
+  <main-panel :title="mainTitle">
+    <template #main>
+      <div class="filter-container">
+        <div class="filter-header">{{ filterTitle }}</div>
+
+        <slot></slot>
+      </div>
+    </template>
+    <template #footer>
+      <div class="submit-row">
+        <base-btn text="執行" is-fill type="primary" @click="doFilter" />
+        <base-btn text="重設" type="primary" @click="resetFilter" />
+      </div>
+    </template>
+  </main-panel>
+</template>
+
+<style scoped>
+.filter-container {
+  @apply w-full md:w-3/5;
+}
+
+.filter-header {
+  @apply px-4 py-2   font-bold  border-b text-lg;
+}
+
+.submit-row {
+  @apply flex items-center justify-end w-full;
+  @apply pt-2 border-t;
+}
+</style>

package/src/types/components.d.ts

@@ -473,6 +473,62 @@ export interface MainPanelInstance {
   $emit: MainPanelEmits
 }
 
+// ==================== DetailLayout 組件類型 ====================
+
+/** DetailLayout 組件 Props 類型 */
+export interface DetailLayoutProps {
+  /** 標題 */
+  title: string
+  /** 是否顯示返回按鈕 */
+  showBack?: boolean | string | object
+  /** 是否可編輯 */
+  isEditable: boolean
+  /** 頁面加載狀態 */
+  pageLoading?: boolean
+}
+
+/** DetailLayout 組件 Emits 類型 */
+export interface DetailLayoutEmits {
+  /** 保存編輯事件 */
+  (e: 'update:saveEdit', value: boolean): void
+  /** 取消編輯事件 */
+  (e: 'update:cancelEdit'): void
+}
+
+/** DetailLayout 組件實例類型 */
+export interface DetailLayoutInstance {
+  /** 組件 Props */
+  $props: DetailLayoutProps
+  /** 組件 Emits */
+  $emit: DetailLayoutEmits
+}
+
+// ==================== FilterLayout 組件類型 ====================
+
+/** FilterLayout 組件 Props 類型 */
+export interface FilterLayoutProps {
+  /** 主要標題 */
+  mainTitle: string
+  /** 篩選標題 */
+  filterTitle: string
+}
+
+/** FilterLayout 組件 Emits 類型 */
+export interface FilterLayoutEmits {
+  /** 提交篩選事件 */
+  (e: 'submitEmit'): void
+  /** 重置篩選事件 */
+  (e: 'resetEmit'): void
+}
+
+/** FilterLayout 組件實例類型 */
+export interface FilterLayoutInstance {
+  /** 組件 Props */
+  $props: FilterLayoutProps
+  /** 組件 Emits */
+  $emit: FilterLayoutEmits
+}
+
 // ==================== 轉移相關組件類型 ====================
 
 // ==================== TransferItem 組件類型 ====================
@@ -705,6 +761,38 @@ export declare const MainPanel: DefineComponent<
   install: (app: App) => void
 }
 
+/** DetailLayout 組件定義 */
+export declare const DetailLayout: DefineComponent<
+  DetailLayoutProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  DetailLayoutEmits
+> & {
+  /** 安裝方法 */
+  install: (app: App) => void
+}
+
+/** FilterLayout 組件定義 */
+export declare const FilterLayout: DefineComponent<
+  FilterLayoutProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  FilterLayoutEmits
+> & {
+  /** 安裝方法 */
+  install: (app: App) => void
+}
+
 /** TransferItem 組件定義 */
 export declare const TransferItem: DefineComponent<
   TransferItemProps<any>,
@@ -759,6 +847,10 @@ export interface VueTableComponentsPlugin {
   FunctionHeader: typeof FunctionHeader
   /** MainPanel 組件 */
   MainPanel: typeof MainPanel
+  /** DetailLayout 組件 */
+  DetailLayout: typeof DetailLayout
+  /** FilterLayout 組件 */
+  FilterLayout: typeof FilterLayout
   /** TransferItem 組件 */
   TransferItem: typeof TransferItem
 }
@@ -779,6 +871,8 @@ declare module '@vue/runtime-core' {
     SearchableListPanel: typeof SearchableListPanel
     FunctionHeader: typeof FunctionHeader
     MainPanel: typeof MainPanel
+    DetailLayout: typeof DetailLayout
+    FilterLayout: typeof FilterLayout
     TransferItem: typeof TransferItem
   }
 }