rayyy-vue-table-components 1.2.13 → 1.2.14

package/dist/src/components/BaseForm.vue.d.ts

@@ -0,0 +1,33 @@
+import { FormRules } from 'element-plus';
+declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onSubmit?: (() => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+        readonly onValidate?: ((valid: boolean) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onSubmit" | "onUpdate:modelValue" | "onValidate"> & {
+        modelValue?: object | undefined;
+        rules?: FormRules;
+        labelWidth?: string;
+        dataCy?: string;
+    } & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{
+        validate: () => Promise<boolean>;
+        resetFields: () => void;
+        clearValidate: (props?: string | string[]) => void;
+    }>): void;
+    attrs: any;
+    slots: {
+        default?(_: {}): any;
+    };
+    emit: {
+        (e: "update:modelValue", value: Record<string, unknown>): void;
+        (e: "submit"): void;
+        (e: "validate", valid: boolean): void;
+    };
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -3,6 +3,7 @@ export { default as BaseBtn } from './items/BaseBtn.vue';
 export { default as BaseInput } from './items/BaseInput.vue';
 export { default as FilterBtn } from './items/FilterBtn.vue';
 export { default as BaseDialog } from './BaseDialog.vue';
+export { default as BaseForm } from './BaseForm.vue';
 export { default as SortTable } from './tables/SortTable.vue';
 export { default as SearchBar } from './SearchBar.vue';
 export { default as TransferDialog } from './transfer/TransferDialog.vue';

package/dist/src/stores/layoutStore.d.ts

@@ -0,0 +1,5 @@
+export declare const layoutStore: import('pinia').Store<"layoutStore", {
+    doResetFilter: boolean;
+}, {}, {
+    filterDrawerResetClick(): Promise<void>;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayyy-vue-table-components",
-  "version": "1.2.13",
+  "version": "1.2.14",
   "description": "Vue 3 + Element Plus 表格組件庫",
   "type": "module",
   "main": "./dist/index.umd.js",
@@ -125,6 +125,7 @@
     "vite": "^6.2.1",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-vue-devtools": "^7.7.2",
+    "vite-svg-loader": "^5.1.0",
     "vitest": "^3.0.8",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",

package/src/assets/styles/_components.scss

@@ -22,12 +22,15 @@
   @apply text-sky-500;
 
   p {
-    @apply text-black ml-2 font-bold;
+    @apply text-primary-80 ml-2 text-base font-bold;
   }
 
   i {
     @apply text-xl;
   }
+  .filter-icon {
+    @apply w-5 h-5 stroke-primary;
+  }
 
   &:hover {
     @apply text-white bg-sky-500;
@@ -35,6 +38,12 @@
     p {
       @apply text-white;
     }
+    .filter-icon {
+      @apply  stroke-white;
+    }
+    .fill-icon path {
+      @apply stroke-white;
+    }
   }
 
   &:disabled {

package/src/components/BaseForm.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import { computed, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+
+type Props<T extends object = object> = {
+  modelValue?: T
+  rules?: FormRules
+  labelWidth?: string
+  dataCy?: string
+}
+const props = withDefaults(defineProps<Props>(), {})
+
+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)
+}
+
+defineExpose({
+  validate,
+  resetFields,
+  clearValidate,
+})
+</script>
+
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :label-width="computedLabelWidth"
+    :rules="rules"
+    @submit.prevent
+    class="filter-form"
+  >
+    <slot></slot>
+  </el-form>
+</template>
+
+<style scoped lang="scss"></style>

package/src/components/index.ts

@@ -4,6 +4,7 @@ export { default as BaseBtn } from './items/BaseBtn.vue'
 export { default as BaseInput } from './items/BaseInput.vue'
 export { default as FilterBtn } from './items/FilterBtn.vue'
 export { default as BaseDialog } from './BaseDialog.vue'
+export { default as BaseForm } from './BaseForm.vue'
 export { default as SortTable } from './tables/SortTable.vue'
 export { default as SearchBar } from './SearchBar.vue'
 export { default as TransferDialog } from './transfer/TransferDialog.vue'

package/src/components/items/FilterBtn.vue

@@ -3,6 +3,9 @@ import { computed, ref } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 import { BaseBtn } from '@/components'
 import { Search, Filter } from '@element-plus/icons-vue'
+import { layoutStore } from '@/stores/layoutStore.ts'
+import IconFilter from '@/assets/icons/icon-filter.svg?component'
+import IconFilterBlue from '@/assets/icons/icon-filter-blue.svg?component'
 
 const { width } = useWindowSize()
 
@@ -16,7 +19,9 @@ function onClickBtn() {
   showDrawer.value = !showDrawer.value
 }
 
-const resetValue = () => {}
+const resetValue = () => {
+  layoutStore.filterDrawerResetClick()
+}
 const computedDrawerSize = computed(() => {
   if (width.value > 1200) {
     return '30%'
@@ -34,10 +39,15 @@ const submitFilter = () => {
 
 <template>
   <base-btn type="primary" class="filter-btn" @click="onClickBtn">
-    <el-badge :value="badgeValue" class="item" type="primary" v-if="badgeValue && badgeValue > 0">
-      <el-icon><Filter /></el-icon>
+    <el-badge
+      :value="badgeValue"
+      class="!flex justify-center items-center"
+      type="primary"
+      v-if="badgeValue && badgeValue > 0"
+    >
+      <IconFilterBlue class="filter-icon fill-icon" />
     </el-badge>
-    <el-icon v-else><Filter /></el-icon>
+    <IconFilter v-else class="filter-icon" />
   </base-btn>
   <el-drawer v-model="showDrawer" append-to-body :size="computedDrawerSize">
     <template #header>
@@ -55,12 +65,13 @@ const submitFilter = () => {
 
     <template #footer>
       <base-btn type="primary" class="filter-btn" @click="submitFilter">
-        <el-icon><Search /></el-icon>
-        <p class="ml-2 text-base">查詢</p>
+        <el-icon>
+          <Search />
+        </el-icon>
+        <p>查詢</p>
       </base-btn>
     </template>
   </el-drawer>
 </template>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>

package/dist/src/stores/counter.d.ts

@@ -1,13 +0,0 @@
-export declare const useCounterStore: import('pinia').StoreDefinition<"counter", Pick<{
-    count: import('vue').Ref<number, number>;
-    doubleCount: import('vue').ComputedRef<number>;
-    increment: () => void;
-}, "count">, Pick<{
-    count: import('vue').Ref<number, number>;
-    doubleCount: import('vue').ComputedRef<number>;
-    increment: () => void;
-}, "doubleCount">, Pick<{
-    count: import('vue').Ref<number, number>;
-    doubleCount: import('vue').ComputedRef<number>;
-    increment: () => void;
-}, "increment">>;