@mptw/skylens-ui 1.3.0 → 1.3.1

package/components/SLTable.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  div
+  div(ref="el")
     .table(
         :class="{ 'table-responsive': responsive }"
         @mousemove="onMousemoved"
@@ -16,10 +16,12 @@
                 )
               th(
                   v-else
-                  :style="field._style"
-                  :class="[field._class, { sortable: field.sortable, sorting: field.key === sortBy, 'sort-desc': sortDesc}]"
-                  :colspan="headerColumnSpans[index]"
-                  :key="field.key"
+                  :style="field._style",
+                  :class="[field._class, { sortable: field.sortable, sorting: field.key === sortBy, 'sort-desc': sortDesc, filterable: field.filterable, filtering: filterBy !== ''}]",
+                  :colspan="headerColumnSpans[index]",
+                  :name="`${field.key}-header`",
+                  :key="field.key",
+                  @click.prevent="onClickedHeaderCol(field.key)"
                 )
                 .inline-flex.items-center.space-x-1
                   SLElementWithTitle(v-if='field.info', :title="field.info")
@@ -27,6 +29,12 @@
                   component(:is='field.sortable ? "a" : "div"', href='javascript:;' class='inline-flex items-center', @click="field.sortable && sort(field.key)")
                     span {{ field.label }}
                     SLIcon.sort-icon.ml-2(v-if="field.sortable" :icon="sortDesc ? 'descending' : 'ascending'")
+                  
+                  SLIcon.filter-icon(
+                    v-if="field.filterable"
+                    class="ml-0.5"
+                    :icon="filterBy !== '' ? 'filter-on' : 'filter'"
+                  )
         tbody(:class="{ 'hoverable': hoverableRows, 'clickable': clickableRows }")
           template(v-for="(item, itemIndex) in bodyHeaderItems" :key="itemIndex")
             tr.body-header-row(
@@ -72,15 +80,38 @@
                 ) {{ item[field.key] }}
           tr(v-if="items.length === 0")
             td(:colspan="fields.length")
-              .my-28.text-base.text-gray-2.text-center {{ noItems }}
+              div(v-if="loading", style="min-height: 200px")
+              .flex.flex-col.items-center.py-8.px-4.space-y-3(v-else)
+                img(src="~/assets/images/commons/empty-box.png")
+                .text-lg.text-primary-light {{ noItems }}
+                .text-sm.text-gray-3(v-if="reason") 可能的原因：{{ reason }}
       SLLoading(
-          v-if="loading"
-          :boundaries="[{ sides: ['top'], query: 'td' }, { sides: ['bottom'], query: 'tbody' }]"
-        )
+        v-if="loading"
+        :boundaries="[{ sides: ['top'], query: 'td' }, { sides: ['bottom'], query: 'tbody' }]"
+      )
+  .table-header-filter-popup(ref="popupEl")
+    .table-header-filter-popup-content
+      a.table-header-filter-item(
+        v-for="option in filterOptions"
+        href="javascript:;"
+        :class="{ active: filterBy === option.key }"
+        :key="option.key"
+        @click="onClickedFilter(option.key)"
+      )
+        .inline-flex.items-center.space-x-1
+          SLIcon(
+            v-if="option.icon"
+            :icon="option.icon"
+            :class="option._iconClass"
+          )
+          span(v-if="option.label") {{ option.label }}
   </template>
   
   <script lang="ts">
   import type { PropType } from 'vue';
+  import { fromEvent, Subscription } from 'rxjs';
+  import { createPopper } from '@popperjs/core';
+  import type { Instance as PopperInstance } from '@popperjs/core';
   import type ITableField from '@/interface/ITableField';
   
   export default defineComponent({
@@ -108,6 +139,10 @@
         type: Boolean,
         default: false,
       },
+      filterBy: {
+        type: String,
+        default: '',
+      },
       hoverableRows: {
         type: Boolean,
         default: false,
@@ -136,12 +171,38 @@
         type: String,
         default: 'No Items',
       },
+      reason: {
+        type: String,
+        default: '',
+      },
     },
+    emits: [
+      'update:sortDesc',
+      'update:sortBy',
+      'update:filterBy',
+      'row-clicked',
+      'row-mouseentered',
+      'row-mouseleaved',
+      'table-mousemoved',
+    ],
     setup(props, { emit }) {
       const { fields, sortBy, sortDesc, clickableRows, hoverableRows } =
         toRefs(props);
   
+      const el = shallowRef<HTMLElement | null>(null);
+      const popupEl = shallowRef<HTMLElement | null>(null);
       const hoverRowIndex = ref(-1);
+      const filterOptions = ref<
+        {
+          key: string;
+          label?: string;
+          icon?: string;
+        }[]
+      >([]);
+
+      let popperInstance: PopperInstance | null = null;
+      let clickSubscriber: Subscription | null = null;
+      let filterHeaderCol: HTMLElement | null = null;
   
       const headerColumnSpans = computed(() => {
         return fields.value.map((field) => {
@@ -164,6 +225,22 @@
           emit('update:sortBy', fieldKey);
         }
       }
+
+      function onClickedHeaderCol(fieldKey: string) {
+        const field = fields.value.find((f) => f.key === fieldKey);
+        if (!field || (!field.sortable && !field.filterable)) return;
+
+        if (field.sortable) {
+          sort(field.key);
+        }
+
+        if (field.filterable) {
+          filterOptions.value = [...field.filterOptions];
+          filterHeaderCol = el.value.querySelector(`th[name=${field.key}-header]`)
+            .children[0] as HTMLElement;
+          show();
+        }
+      }
   
       function rowClicked(item: any, index: number, e: Event) {
         if (!clickableRows.value) return;
@@ -190,16 +267,103 @@
   
         emit('table-mousemoved', e);
       }
+
+      function subscribeClick() {
+        clickSubscriber = fromEvent(window, 'click').subscribe((e) => {
+          const { target } = e;
+          if (
+            filterHeaderCol &&
+            popupEl.value &&
+            !filterHeaderCol.contains(target as HTMLElement) &&
+            !popupEl.value.contains(target as HTMLElement)
+          ) {
+            hide();
+          }
+        });
+      }
+
+      function unsubscribeClick() {
+        if (clickSubscriber) {
+          clickSubscriber.unsubscribe();
+        }
+        clickSubscriber = null;
+      }
+
+      function show() {
+        if (!popupEl.value || !filterHeaderCol || !popperInstance) return;
+
+        popupEl.value.setAttribute('data-show', '');
+
+        subscribeClick();
+        popperInstance.state.elements.reference = filterHeaderCol;
+        popperInstance.setOptions({
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 4],
+              },
+            },
+            { name: 'eventListeners', enabled: true },
+          ],
+        });
+        popperInstance.update();
+      }
+
+      function hide() {
+        if (
+          !popupEl.value ||
+          popupEl.value.getAttribute('data-show') === null ||
+          !popperInstance
+        )
+          return;
+
+        unsubscribeClick();
+
+        if (popupEl.value) {
+          popupEl.value.removeAttribute('data-show');
+        }
+
+        popperInstance.setOptions({
+          modifiers: [{ name: 'eventListeners', enabled: false }],
+        });
+      }
+
+      function onClickedFilter(filterKey: string) {
+        emit('update:filterBy', filterKey);
+        hide();
+      }
+
+      onMounted(() => {
+        if (el.value && popupEl.value) {
+          popperInstance = createPopper(el.value, popupEl.value, {
+            placement: 'bottom-end',
+            modifiers: [{ name: 'eventListeners', enabled: false }],
+          });
+        }
+      });
+
+      onBeforeUnmount(() => {
+        if (popperInstance) {
+          popperInstance.destroy();
+        }
+        popperInstance = null;
+      });
   
       return {
+        el,
+        popupEl,
         hoverRowIndex,
+        filterOptions,
         headerColumnSpans,
         columnSpans,
+        onClickedHeaderCol,
         sort,
         rowClicked,
         rowMouseEntered,
         rowMouseLeaved,
         onMousemoved,
+        onClickedFilter,
       };
     },
   });
@@ -225,15 +389,18 @@
           th
             @apply px-2 pb-2 text-base font-normal text-primary whitespace-nowrap
             
-            &.sortable
-              cursor pointer
+            &.sortable, &.filterable
+              @apply cursor-pointer
             .sort-icon
-              opacity 0
+              @apply opacity-0
               transition transform 0.2s ease, opacity 0.1s ease
             &:hover,
             &.sorting
               .sort-icon
-                opacity 1
+                @apply opacity-100
+            &.filterable
+              .filter-icon
+                @apply opacity-100
   
       tbody
         &.clickable
@@ -250,5 +417,27 @@
 
             &.text-right.sortable
                 @apply pr-8
+
+  .table-header-filter-popup
+    @apply z-10 flex border border-primary-light rounded overflow-hidden invisible pointer-events-none
+
+    &[data-show]
+      @apply visible pointer-events-auto
+
+    &-content
+      @apply flex flex-col
+
+      .table-header-filter-item
+        @apply inline-flex justify-center p-2 bg-white text-sm text-gray-3
+        @apply s('hover:bg-bg-middle')
+
+        &.active
+          @apply bg-bg text-primary
+
+          .icon
+            @apply text-primary
+
+        .icon
+          @apply text-base leading-none
   </style>
   

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",