rayyy-vue-table-components 1.2.20 → 1.2.22

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

@@ -1,7 +1,6 @@
 type __VLS_Props = {
     showFilter?: boolean;
     showSearch?: boolean;
-    fullInput?: boolean;
     badgeValue?: number;
 };
 declare function __VLS_template(): {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayyy-vue-table-components",
-  "version": "1.2.20",
+  "version": "1.2.22",
   "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,12 +1,11 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, useAttrs } from 'vue'
 import BaseInput from '../form/BaseInput.vue'
 import FilterBtn from './FilterBtn.vue'
 
 defineProps<{
   showFilter?: boolean
   showSearch?: boolean
-  fullInput?: boolean
   badgeValue?: number
 }>()
 
@@ -16,6 +15,9 @@ const emits = defineEmits<{
   (e: 'update:resetFilter'): void
 }>()
 
+// 獲取所有非 props 屬性
+const attrs = useAttrs()
+
 const keyword = ref('')
 
 const doSearch = () => {
@@ -30,13 +32,13 @@ const resetFilter = () => {
 </script>
 
 <template>
-  <div class="search-bar">
+  <div v-bind="attrs" class="search-bar">
     <div class="search-bar-left">
       <slot name="button" />
     </div>
 
     <div class="flex items-center justify-end">
-      <div v-if="showSearch" :class="{ 'w-full': fullInput, 'search-input': !fullInput }">
+      <div v-if="showSearch" class="search-input">
         <base-input
           v-model="keyword"
           placeholder="請輸入關鍵字搜尋列表"

package/src/components/layout/SearchableListPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import { toRefs, computed } from 'vue'
 import type { Pager } from '@/types'
 import { MainPanel, SearchBar } from '@/components'
 
@@ -22,6 +22,9 @@ const emits = defineEmits<{
   (e: 'updatePageSize', limit: number): boolean
 }>()
 
+const showAllFeatures = computed(() => {
+  return props.showDefaultSearch || (props.showSearch && props.showEdit && props.showFilter)
+})
 const search = (keyword: string) => {
   emits('search', keyword)
 }
@@ -43,15 +46,15 @@ const changePageSize = (limit: number) => {
   <main-panel :title="props.title" :show-back="showBack">
     <template #searchBar>
       <search-bar
-        :show-filter="showFilter"
-        :show-search="showSearch"
+        :show-filter="showAllFeatures || showFilter"
+        :show-search="showAllFeatures || showSearch"
         :badge-value="badgeValue"
         @keydown:enter="search"
         @update:clear="clearable"
       >
         <template #button>
           <slot name="firstButton"></slot>
-          <slot name="customButton"> </slot>
+          <slot name="customButton" v-if="showAllFeatures || showEdit"> </slot>
           <slot name="lastButton"></slot>
         </template>
         <template #filterBody>