rayyy-vue-table-components 1.2.20 → 1.2.21

package/package.json

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

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/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>