rayyy-vue-table-components 1.2.19 → 1.2.21

package/src/components/form/BaseForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends Record<string, unknown>">
-import { computed, ref } from 'vue'
+import { computed, ref, useAttrs } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 
 type Props<T extends object = object> = {
@@ -10,6 +10,9 @@ type Props<T extends object = object> = {
 }
 const props = withDefaults(defineProps<Props>(), {})
 
+// 獲取所有非 props 屬性
+const attrs = useAttrs()
+
 const computedLabelWidth = computed(() => {
   if (props.labelWidth) return props.labelWidth
   else return '100px'
@@ -47,6 +50,7 @@ defineExpose({
 
 <template>
   <el-form
+    v-bind="attrs"
     ref="formRef"
     :model="formData"
     :label-width="computedLabelWidth"

package/src/components/form/BaseInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { Search } from '@element-plus/icons-vue'
 
 const props = defineProps<{
@@ -20,6 +20,9 @@ const emits = defineEmits<{
   (e: 'update:clearValue'): void
 }>()
 
+// 獲取所有非 props 屬性
+const attrs = useAttrs()
+
 const v = computed({
   get: () => props.modelValue,
   set: (val: string | number | null | undefined) => emits('update:modelValue', val),
@@ -31,6 +34,7 @@ const handlerClear = () => {
 
 <template>
   <el-input
+    v-bind="attrs"
     v-model="v"
     :placeholder="props.placeholder"
     :type="props.type"

package/src/components/form/BaseMultipleInput.vue

@@ -1,6 +1,6 @@
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, useAttrs } from 'vue'
 import type { ElInput } from 'element-plus'
 
 const inputValue = ref<string>('')
@@ -18,6 +18,9 @@ const props = withDefaults(
   }
 )
 
+// 獲取所有非 props 屬性
+const attrs = useAttrs()
+
 const emits = defineEmits<{
   (e: 'update:modelValue', val: string[]): void
   (e: 'inputError'): void
@@ -60,7 +63,7 @@ const deleteLastTag = () => {
 </script>
 
 <template>
-  <div class="w-full border border-t rounded" @click="focusInput" >
+  <div v-bind="attrs" class="w-full border border-t rounded" @click="focusInput" >
     <el-tag
       v-for="(tag, position) in props.modelValue"
       :key="tag"

package/src/components/form/BaseSelector.vue

@@ -1,5 +1,6 @@
 <template>
   <el-select
+    v-bind="attrs"
     :model-value="modelValue"
     :class="props.class"
     :placeholder="props.placeholder"
@@ -17,6 +18,7 @@
 </template>
 
 <script lang="ts" setup>
+import { useAttrs } from 'vue'
 import type { ElOptions } from '@/types/OptionDto.ts'
 
 export type Selection = string | string[]
@@ -42,6 +44,9 @@ const props = withDefaults(
   },
 )
 
+// 獲取所有非 props 屬性
+const attrs = useAttrs()
+
 const emits = defineEmits<{
   (e: 'update:modelValue', data?: Selection): void
 }>()

package/src/components/index.ts

@@ -25,6 +25,33 @@ export type {
   BaseDialogProps,
   BaseDialogEmits,
   BaseDialogInstance,
+  BaseInputProps,
+  BaseInputEmits,
+  BaseInputInstance,
+  FilterBtnProps,
+  FilterBtnEmits,
+  FilterBtnInstance,
+  BaseFormProps,
+  BaseFormEmits,
+  BaseFormInstance,
+  SortTableProps,
+  SortTableEmits,
+  SortTableInstance,
+  SearchBarProps,
+  SearchBarEmits,
+  SearchBarInstance,
+  TransferDialogProps,
+  TransferDialogEmits,
+  TransferDialogInstance,
+  TransferItemProps,
+  TransferItemEmits,
+  TransferItemInstance,
+  MainPanelProps,
+  MainPanelEmits,
+  MainPanelInstance,
+  FunctionHeaderProps,
+  FunctionHeaderEmits,
+  FunctionHeaderInstance,
   PluginOptions,
   VueTableComponentsPlugin,
 } from '../types/components'
@@ -35,9 +62,12 @@ export type { default as BaseBtnType } from './items/BaseBtn.vue'
 export type { default as BaseInputType } from './form/BaseInput.vue'
 export type { default as FilterBtnType } from './items/FilterBtn.vue'
 export type { default as BaseDialogType } from './items/BaseDialog.vue'
+export type { default as BaseFormType } from './form/BaseForm.vue'
 export type { default as SortTableType } from './tables/SortTable.vue'
 export type { default as SearchBarType } from './items/SearchBar.vue'
 export type { default as TransferDialogType } from './transfer/TransferDialog.vue'
 export type { default as TransferItemType } from './transfer/transferItem.vue'
 export type { default as SearchableListPanelType } from './layout/SearchableListPanel.vue'
 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'

package/src/components/items/BaseBtn.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 
 const props = defineProps<{
   text?: string
@@ -19,6 +19,9 @@ const emits = defineEmits<{
   (e: 'click', evt: MouseEvent): void
 }>()
 
+// 獲取所有非 props 屬性
+const attrs = useAttrs()
+
 const click = (evt: MouseEvent) => {
   emits('click', evt)
 }
@@ -33,6 +36,7 @@ const buttonClass = computed(() => {
 
 <template>
   <el-button
+    v-bind="attrs"
     :type="props.type"
     :size="props.size"
     :plain="props.plain"

package/src/components/items/FilterBtn.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, ref, useAttrs } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 import { BaseBtn } from '@/components'
 import { Search, Filter } from '@element-plus/icons-vue'
@@ -10,6 +10,9 @@ defineProps<{
   badgeValue?: number
 }>()
 
+// 獲取所有非 props 屬性
+const attrs = useAttrs()
+
 const showDrawer = ref(false)
 
 function onClickBtn() {
@@ -40,7 +43,7 @@ const submitFilter = () => {
 </script>
 
 <template>
-  <base-btn type="primary" class="filter-btn" @click="onClickBtn">
+  <base-btn v-bind="attrs" type="primary" class="filter-btn" @click="onClickBtn">
     <el-badge
       :value="badgeValue"
       class="!flex justify-center items-center"

package/src/components/items/SearchBar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, useAttrs } from 'vue'
 import BaseInput from '../form/BaseInput.vue'
 import FilterBtn from './FilterBtn.vue'
 
@@ -16,6 +16,9 @@ const emits = defineEmits<{
   (e: 'update:resetFilter'): void
 }>()
 
+// 獲取所有非 props 屬性
+const attrs = useAttrs()
+
 const keyword = ref('')
 
 const doSearch = () => {
@@ -30,7 +33,7 @@ const resetFilter = () => {
 </script>
 
 <template>
-  <div class="search-bar">
+  <div v-bind="attrs" class="search-bar">
     <div class="search-bar-left">
       <slot name="button" />
     </div>

package/src/components/layout/FunctionHeader.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-import { useRouter, useRoute } from 'vue-router'
 import { ArrowLeftBold } from '@element-plus/icons-vue'
-import { extractSubRoutes } from '@/utils/routeFormatters.ts'
 
 const props = defineProps({
   title: { type: String, required: false, default: '' },
@@ -13,21 +11,26 @@ const props = defineProps({
   depth: { type: Number, required: false, default: 1 },
 })
 
-const { push } = useRouter()
-const { path } = useRoute()
+const emit = defineEmits<{
+  back: [payload: { path?: string; [key: string]: unknown }]
+}>()
 
 const handleClick = () => {
-  const subdirectory = { path: extractSubRoutes(path, props.depth) }
+  const backPayload: { path?: string; [key: string]: unknown } = {}
+
   switch (typeof props.showBack) {
     case 'string':
-      push(props.showBack)
+      backPayload.path = props.showBack
       break
     case 'object':
-      push({ ...subdirectory, ...props.showBack })
+      Object.assign(backPayload, props.showBack)
       break
     default:
-      push(subdirectory)
+      // 當 showBack 為 true 時，發出預設的返回事件
+      backPayload.path = ''
   }
+
+  emit('back', backPayload)
 }
 </script>