rayyy-vue-table-components 1.3.8 → 1.3.10

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

@@ -2,6 +2,7 @@ export { default as BaseTable } from './tables/BaseTable.vue';
 export { default as BaseBtn } from './items/BaseBtn.vue';
 export { default as BaseInput } from './form/BaseInput.vue';
 export { default as BaseDialog } from './items/BaseDialog.vue';
+export { default as BaseWaringDialog } from './items/BaseWaringDialog.vue';
 export { default as BaseMultipleInput } from './form/BaseMultipleInput.vue';
 export { default as SortTable } from './tables/SortTable.vue';
 export { default as TitleTable } from './tables/TitleTable.vue';
@@ -13,11 +14,12 @@ 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 { 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 { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, BaseWaringDialogProps, BaseWaringDialogEmits, BaseWaringDialogInstance, 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';
 export type { default as BaseDialogType } from './items/BaseDialog.vue';
+export type { default as BaseWaringDialogType } from './items/BaseWaringDialog.vue';
 export type { default as SortTableType } from './tables/SortTable.vue';
 export type { default as TitleTableType } from './tables/TitleTable.vue';
 export type { default as SearchBarType } from './items/SearchBar.vue';

package/dist/src/components/items/BaseWaringDialog.vue.d.ts

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    modelValue: boolean;
+    waringText?: string;
+    subWaringText?: string;
+    titleText?: string;
+    modalWidth?: 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, {} & {
+    "update:modelValue": (value: boolean) => any;
+    "update:submit": () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onUpdate:submit"?: (() => any) | undefined;
+}>, {
+    waringText: string;
+    titleText: string;
+}, {}, {}, {}, 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

@@ -11,6 +11,7 @@ export declare const ROUTES: {
     readonly BASE_BTN: "/demo/base-btn";
     readonly BASE_INPUT: "/demo/base-input";
     readonly BASE_DIALOG: "/demo/base-dialog";
+    readonly BASE_WARING_DIALOG: "/demo/base-waring-dialog";
     readonly BASE_FORM: "/demo/base-form";
     readonly TABLE: "/demo/table";
     readonly SEARCH_BAR: "/demo/search-bar";
@@ -33,6 +34,7 @@ export declare const ROUTE_NAMES: {
     readonly BASE_BTN: "BaseBtn";
     readonly BASE_INPUT: "BaseInput";
     readonly BASE_DIALOG: "BaseDialog";
+    readonly BASE_WARING_DIALOG: "BaseWaringDialog";
     readonly TABLE: "Table";
     readonly SEARCH_BAR: "SearchBar";
     readonly FUNCTION_HEADER: "FunctionHeader";

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

@@ -234,6 +234,38 @@ export interface BaseDialogInstance {
   $emit: BaseDialogEmits
 }
 
+// ==================== BaseWaringDialog 組件類型 ====================
+
+/** BaseWaringDialog 組件 Props 類型 */
+export interface BaseWaringDialogProps {
+  /** 是否顯示對話框 */
+  modelValue: boolean
+  /** 警告文字 */
+  waringText?: string
+  /** 副警告文字 */
+  subWaringText?: string
+  /** 標題文字 */
+  titleText?: string
+  /** 對話框寬度 */
+  modalWidth?: string
+}
+
+/** BaseWaringDialog 組件 Emits 類型 */
+export interface BaseWaringDialogEmits {
+  /** 更新 modelValue 事件 */
+  (e: 'update:modelValue', value: boolean): void
+  /** 提交事件 */
+  (e: 'update:submit'): void
+}
+
+/** BaseWaringDialog 組件實例類型 */
+export interface BaseWaringDialogInstance {
+  /** 組件 Props */
+  $props: BaseWaringDialogProps
+  /** 組件 Emits */
+  $emit: BaseWaringDialogEmits
+}
+
 // ==================== TransferDialog 組件類型 ====================
 
 /** TransferDialog 組件 Props 類型 */
@@ -663,6 +695,23 @@ export declare const BaseDialog: DefineComponent<
   install: (app: App) => void
 }
 
+/** BaseWaringDialog 組件定義 */
+export declare const BaseWaringDialog: DefineComponent<
+  BaseWaringDialogProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  BaseWaringDialogEmits
+> & {
+  /** 安裝方法 */
+  install: (app: App) => void
+}
+
 /** TransferDialog 組件定義 */
 export declare const TransferDialog: DefineComponent<
   TransferDialogProps<any>,
@@ -847,6 +896,8 @@ export interface VueTableComponentsPlugin {
   BaseBtn: typeof BaseBtn
   /** BaseDialog 組件 */
   BaseDialog: typeof BaseDialog
+  /** BaseWaringDialog 組件 */
+  BaseWaringDialog: typeof BaseWaringDialog
   /** TransferDialog 組件 */
   TransferDialog: typeof TransferDialog
   /** BaseInput 組件 */
@@ -878,6 +929,7 @@ declare module '@vue/runtime-core' {
     TitleTable: typeof TitleTable
     BaseBtn: typeof BaseBtn
     BaseDialog: typeof BaseDialog
+    BaseWaringDialog: typeof BaseWaringDialog
     TransferDialog: typeof TransferDialog
     BaseInput: typeof BaseInput
     BaseMultipleInput: typeof BaseMultipleInput

package/dist/src/views/demo/BaseWaringDialogDemo.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, {}, HTMLDivElement>;
+export default _default;

package/package.json

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

package/src/assets/styles/_dialogs.scss

@@ -36,14 +36,14 @@
 // 警告對話框樣式
 .waring-dialog {
   .el-dialog__header {
-    @apply border-b-orange;
+    @apply border-b-orange border border-solid;
   }
 }
 
 // 上傳結果對話框樣式
 .upload-result-dialog {
   .el-dialog__header {
-    @apply border-b-blue-10;
+    @apply border-b-blue-10 border border-solid;
   }
 }
 

package/src/components/index.ts

@@ -3,6 +3,7 @@ export { default as BaseTable } from './tables/BaseTable.vue'
 export { default as BaseBtn } from './items/BaseBtn.vue'
 export { default as BaseInput } from './form/BaseInput.vue'
 export { default as BaseDialog } from './items/BaseDialog.vue'
+export { default as BaseWaringDialog } from './items/BaseWaringDialog.vue'
 export { default as BaseMultipleInput } from './form/BaseMultipleInput.vue'
 export { default as SortTable } from './tables/SortTable.vue'
 export { default as TitleTable } from './tables/TitleTable.vue'
@@ -29,6 +30,10 @@ export type {
   BaseDialogProps,
   BaseDialogEmits,
   BaseDialogInstance,
+  // BaseWaringDialog 組件類型
+  BaseWaringDialogProps,
+  BaseWaringDialogEmits,
+  BaseWaringDialogInstance,
   // BaseInput 組件類型
   BaseInputProps,
   BaseInputEmits,
@@ -85,6 +90,7 @@ 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'
 export type { default as BaseDialogType } from './items/BaseDialog.vue'
+export type { default as BaseWaringDialogType } from './items/BaseWaringDialog.vue'
 export type { default as SortTableType } from './tables/SortTable.vue'
 export type { default as TitleTableType } from './tables/TitleTable.vue'
 export type { default as SearchBarType } from './items/SearchBar.vue'

package/src/components/items/BaseWaringDialog.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import BaseDialog from './BaseDialog.vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    waringText?: string
+    subWaringText?: string
+    titleText?: string
+    modalWidth?: string
+  }>(),
+  {
+    waringText: '請問是否確認移除該使用者',
+    titleText: '警告',
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'update:submit'): void
+}>()
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+})
+
+const handleSubmit = () => {
+  emit('update:submit')
+}
+</script>
+
+<template>
+  <base-dialog
+    v-model="dialogVisible"
+    :title="titleText"
+    :custom-width="modalWidth"
+    :is-waring="true"
+    @click:submit="handleSubmit"
+  >
+    <div class="w-full h-16 flex items-center justify-center flex-col">
+      <slot>
+        <p>{{ subWaringText }}</p>
+        <p>{{ waringText }} ?</p>
+      </slot>
+    </div>
+  </base-dialog>
+</template>
+
+<style scoped lang="scss"></style>

package/src/types/components.d.ts

@@ -235,6 +235,38 @@ export interface BaseDialogInstance {
   $emit: BaseDialogEmits
 }
 
+// ==================== BaseWaringDialog 組件類型 ====================
+
+/** BaseWaringDialog 組件 Props 類型 */
+export interface BaseWaringDialogProps {
+  /** 是否顯示對話框 */
+  modelValue: boolean
+  /** 警告文字 */
+  waringText?: string
+  /** 副警告文字 */
+  subWaringText?: string
+  /** 標題文字 */
+  titleText?: string
+  /** 對話框寬度 */
+  modalWidth?: string
+}
+
+/** BaseWaringDialog 組件 Emits 類型 */
+export interface BaseWaringDialogEmits {
+  /** 更新 modelValue 事件 */
+  (e: 'update:modelValue', value: boolean): void
+  /** 提交事件 */
+  (e: 'update:submit'): void
+}
+
+/** BaseWaringDialog 組件實例類型 */
+export interface BaseWaringDialogInstance {
+  /** 組件 Props */
+  $props: BaseWaringDialogProps
+  /** 組件 Emits */
+  $emit: BaseWaringDialogEmits
+}
+
 // ==================== TransferDialog 組件類型 ====================
 
 /** TransferDialog 組件 Props 類型 */
@@ -664,6 +696,23 @@ export declare const BaseDialog: DefineComponent<
   install: (app: App) => void
 }
 
+/** BaseWaringDialog 組件定義 */
+export declare const BaseWaringDialog: DefineComponent<
+  BaseWaringDialogProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  BaseWaringDialogEmits
+> & {
+  /** 安裝方法 */
+  install: (app: App) => void
+}
+
 /** TransferDialog 組件定義 */
 export declare const TransferDialog: DefineComponent<
   TransferDialogProps<any>,
@@ -848,6 +897,8 @@ export interface VueTableComponentsPlugin {
   BaseBtn: typeof BaseBtn
   /** BaseDialog 組件 */
   BaseDialog: typeof BaseDialog
+  /** BaseWaringDialog 組件 */
+  BaseWaringDialog: typeof BaseWaringDialog
   /** TransferDialog 組件 */
   TransferDialog: typeof TransferDialog
   /** BaseInput 組件 */
@@ -879,6 +930,7 @@ declare module '@vue/runtime-core' {
     TitleTable: typeof TitleTable
     BaseBtn: typeof BaseBtn
     BaseDialog: typeof BaseDialog
+    BaseWaringDialog: typeof BaseWaringDialog
     TransferDialog: typeof TransferDialog
     BaseInput: typeof BaseInput
     BaseMultipleInput: typeof BaseMultipleInput

package/src/components/form/BaseForm.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts" generic="T extends Record<string, unknown>">
-import { computed, ref, useAttrs } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
-
-type Props<T extends object = object> = {
-  modelValue?: T
-  rules?: FormRules
-  labelWidth?: string
-}
-const props = withDefaults(defineProps<Props>(), {})
-
-// 獲取所有非 props 屬性
-const attrs = useAttrs()
-
-const computedLabelWidth = computed(() => {
-  if (props.labelWidth) return props.labelWidth
-  else return '100px'
-})
-
-const formData = computed(() => props.modelValue)
-
-defineEmits<{
-  (e: 'update:modelValue', value: Record<string, unknown>): void
-  (e: 'submit'): void
-  (e: 'validate', valid: boolean): void
-}>()
-
-const formRef = ref<FormInstance>()
-
-const validate = async () => {
-  if (!formRef.value) return false
-  return await formRef.value.validate()
-}
-
-const resetFields = () => {
-  formRef.value?.resetFields()
-}
-
-const clearValidate = (props?: string | string[]) => {
-  formRef.value?.clearValidate(props)
-}
-
-const validateField = (prop: string) => {
-  formRef.value?.validateField(prop)
-}
-
-defineExpose({
-  validate,
-  resetFields,
-  clearValidate,
-  validateField,
-})
-</script>
-
-<template>
-  <el-form
-    v-bind="attrs"
-    ref="formRef"
-    :model="formData"
-    :label-width="computedLabelWidth"
-    :rules="rules"
-    @submit.prevent
-    class="filter-form"
-  >
-    <slot></slot>
-  </el-form>
-</template>
-
-<style scoped lang="scss"></style>