rayyy-vue-table-components 1.3.2 → 1.3.4

package/package.json

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

package/src/assets/styles/_components.scss

@@ -19,63 +19,30 @@
 }
 
 
-// ==================== TransferItem 組件樣式 ====================
-.transfer-item-wrapper {
-  @apply border-t border-gray-200 px-4 flex items-center justify-between w-full;
-}
-
-.transfer-arrow-wrapper {
-  @apply w-28 text-primary-10;
-}
 
 // ==================== TransferDialog 組件樣式 ====================
 .transfer-sort-wrapper {
-  @apply border border-gray-200 h-96 overflow-auto;
+  @apply border-2 border-gray-200 border-solid;
+  @apply h-96 overflow-auto;
 }
 
 .transfer-active-bg {
-  background-color: rgba(103, 133, 193, 0.1);
+  @apply bg-primary/10;
 }
 
 .transfer-active-border {
-  @apply border border-primary-10 rounded;
+  @apply border rounded border-solid;
+  @apply border-blue-10;
 }
 
-// ==================== 組件樣式配置 ====================
-.component-styles {
-  // SortTable
-  .sort-table-container {
-    @apply w-full mb-4;
-  }
-
-  .sort-table-function-bar {
-    @apply flex items-center h-12 bg-primary-20 px-1.5 rounded-t justify-end;
-  }
-
-  .sort-table-settings-btn {
-    @apply cursor-pointer text-primary-dark text-xl flex items-center justify-center;
-  }
-
 
-  // TransferDialog
-  .transfer-sort-wrapper {
-    @apply border border-gray-200 h-96 overflow-auto;
-  }
-
-  .transfer-active-bg {
-    background-color: rgba(103, 133, 193, 0.1);
-  }
-
-  .transfer-active-border {
-    @apply border border-primary-10 rounded;
-  }
-
-  // TransferItem
-  .transfer-item-wrapper {
-    @apply border-t border-gray-200 px-4 flex items-center justify-between w-full;
-  }
+// ==================== TransferItem 組件樣式 ====================
+.transfer-item-wrapper {
+  @apply border-t px-4;
+  @apply flex items-center justify-between w-full;
+}
 
-  .transfer-arrow-wrapper {
-    @apply w-28 text-primary-10;
-  }
+.transfer-arrow-wrapper {
+  @apply w-28;
+  @apply text-blue-10;
 }

package/src/components/form/BaseInput.vue

@@ -48,7 +48,9 @@ const handlerClear = () => {
     @clear="handlerClear"
   >
     <template #prefix>
-      <el-icon><Search /></el-icon>
+      <div class="text-text-border w-full h-full flex items-center justify-center text-lg">
+        <el-icon><Search /></el-icon>
+      </div>
     </template>
   </el-input>
 </template>

package/src/components/tables/SortTable.vue

@@ -48,7 +48,7 @@ const handleColumnSortChange = (data: SortChangValue<T>) => {
     <div class="flex items-center h-12 bg-gray-200 px-1.5 rounded-t justify-end">
       <div class="flex items-center mr-4">
         <div
-          class="cursor-pointer text-blue-800 text-xl flex items-center justify-center hover:text-blue-600"
+          class="cursor-pointer text-text text-xl flex items-center justify-center hover:text-blue-600"
           @click="openTransferDialog"
         >
           <el-icon><Setting /></el-icon>

package/src/components/transfer/TransferDialog.vue

@@ -16,7 +16,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void
   (e: 'update:submit', data: TableColumn<T>[]): void
-  (e: 'update:checkChange', data: { columns: TableColumn<T>[], checkList: string[] }): void
+  (e: 'update:checkChange', data: { columns: TableColumn<T>[]; checkList: string[] }): void
 }>()
 
 const dialogVisible = computed({
@@ -82,7 +82,6 @@ watch(
   },
 )
 const handlerSubmit = () => {
-  console.log('state.localColumns', state.localColumns)
   emit('update:submit', state.localColumns)
 }
 
@@ -99,7 +98,7 @@ const handleCheckChange = (val: CheckboxValueType[]) => {
   // 即時 emit checkbox 狀態變更
   emit('update:checkChange', {
     columns: state.localColumns,
-    checkList: state.checkList
+    checkList: state.checkList,
   })
 }
 
@@ -128,9 +127,7 @@ const doFilterColumn = (keyword: string) => {
   <base-dialog v-model="dialogVisible" :title="transferTitle" @click:submit="handlerSubmit">
     <div class="search-bar">
       <search-bar
-        :show-filter="false"
         :show-search="true"
-        :full-input="true"
         @update:clear="resetFilterColumn"
         @keydown:enter="doFilterColumn"
       />
@@ -149,25 +146,23 @@ const doFilterColumn = (keyword: string) => {
           :handle-mousedown="(prop: string) => (state.clickItemProp = prop)"
         >
           <!-- 默認的靜態列表 -->
-          <div class="max-h-96 overflow-y-auto">
-            <template v-for="(element, index) in state.localColumns" :key="element.prop">
-              <transfer-item
-                :dialog-modal-visible="dialogVisible"
-                :columns-value="element"
-                :columns-index="index"
-                :columns-len="state.localColumns.length"
-                :class="{
-                  'transfer-active-bg': element.checkActive,
-                  'transfer-active-border': state.clickItemProp == element.prop,
-                }"
-                @mousedown="state.clickItemProp = element.prop || ''"
-                @update:toTop="handleItemEvents.toTop(index)"
-                @update:toBottom="handleItemEvents.toBottom(index)"
-                @update:toPre="handleItemEvents.toPre(index)"
-                @update:toNext="handleItemEvents.toNext(index)"
-              />
-            </template>
-          </div>
+          <template v-for="(element, index) in state.localColumns" :key="element.prop">
+            <transfer-item
+              :dialog-modal-visible="dialogVisible"
+              :columns-value="element"
+              :columns-index="index"
+              :columns-len="state.localColumns.length"
+              :class="{
+                'transfer-active-bg': element.checkActive,
+                'transfer-active-border': state.clickItemProp == element.prop,
+              }"
+              @mousedown="state.clickItemProp = element.prop || ''"
+              @update:toTop="handleItemEvents.toTop(index)"
+              @update:toBottom="handleItemEvents.toBottom(index)"
+              @update:toPre="handleItemEvents.toPre(index)"
+              @update:toNext="handleItemEvents.toNext(index)"
+            />
+          </template>
         </slot>
       </el-checkbox-group>
     </div>