@mptw/skylens-ui 1.5.0 → 1.5.2

package/app/components/SLTable.vue

@@ -90,7 +90,7 @@
               div(v-if="loading", style="min-height: 200px")
               slot(v-else name='noItems')
                 .flex.flex-col.items-center.py-8.px-4.space-y-3
-                  img(src="~/assets/images/commons/empty-box.png")
+                  img(src="~ui/app/assets/images/commons/empty-box.png")
                   .text-lg.text-primary-600 {{ noItems }}
                   .text-sm.text-pgray-3(v-if="reason") 可能的原因：{{ reason }}
       SLLoading(
@@ -114,342 +114,359 @@
           )
           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({
-    name: 'SLTable',
-    components: {
+
+<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({
+  name: "SLTable",
+  components: {},
+  props: {
+    componentClass: {
+      type: [String, Array, Object],
+      default: "",
     },
-    props: {
-      componentClass: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      items: {
-        type: Array,
-        default: () => [],
-      },
-      bodyHeaderItems: {
-        type: Array,
-        default: () => [],
-      },
-      fields: {
-        type: Array as PropType<Array<ITableField>>,
-        default: () => [],
-      },
-      sortBy: {
-        type: String,
-        default: '',
-      },
-      sortDesc: {
-        type: Boolean,
-        default: false,
-      },
-      filterBy: {
-        type: String,
-        default: '',
-      },
-      hoverableRows: {
-        type: Boolean,
-        default: false,
-      },
-      clickableRows: {
-        type: Boolean,
-        default: false,
-      },
-      loading: {
-        type: Boolean,
-        default: false,
-      },
-      responsive: {
-        type: Boolean,
-        default: true,
-      },
-      tdBorderColor: {
-        type: String,
-        default: 'border-primary-600',
-      },
-      tdHoverColor: {
-        type: String,
-        default: 'bg-primary-100',
-      },
-      noItems: {
-        type: String,
-        default: 'No Items',
-      },
-      reason: {
-        type: String,
-        default: '',
-      },
+    items: {
+      type: Array,
+      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) => {
-          if (!field.colspan) return 1;
-          return field.colspan;
-        });
+    bodyHeaderItems: {
+      type: Array,
+      default: () => [],
+    },
+    fields: {
+      type: Array as PropType<Array<ITableField>>,
+      default: () => [],
+    },
+    sortBy: {
+      type: String,
+      default: "",
+    },
+    sortDesc: {
+      type: Boolean,
+      default: false,
+    },
+    filterBy: {
+      type: String,
+      default: "",
+    },
+    hoverableRows: {
+      type: Boolean,
+      default: false,
+    },
+    clickableRows: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    responsive: {
+      type: Boolean,
+      default: true,
+    },
+    tdBorderColor: {
+      type: String,
+      default: "border-primary-600",
+    },
+    tdHoverColor: {
+      type: String,
+      default: "bg-primary-100",
+    },
+    noItems: {
+      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) => {
+        if (!field.colspan) return 1;
+        return field.colspan;
       });
-      const columnSpans = computed(() => {
-        return fields.value.map((field) => {
-          if (!field.col) return 1;
-          if (!field.col.span) return 1;
-          return field.col.span;
-        });
+    });
+    const columnSpans = computed(() => {
+      return fields.value.map((field) => {
+        if (!field.col) return 1;
+        if (!field.col.span) return 1;
+        return field.col.span;
       });
-  
-      function sort(fieldKey: string) {
-        if (fieldKey === sortBy.value) {
-          emit('update:sortDesc', !sortDesc.value);
-        } else {
-          emit('update:sortBy', fieldKey);
-        }
+    });
+
+    function sort(fieldKey: string) {
+      if (fieldKey === sortBy.value) {
+        emit("update:sortDesc", !sortDesc.value);
+      } else {
+        emit("update:sortBy", fieldKey);
       }
+    }
 
-      function onClickedHeaderCol(fieldKey: string) {
-        const field = fields.value.find((f) => f.key === fieldKey);
-        if (!field || (!field.sortable && !field.filterable)) return;
+    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;
-  
-        emit('row-clicked', item, index, e);
-      }
-  
-      function rowMouseEntered(item: any, index: number, e: Event) {
-        if (!hoverableRows.value) return;
-  
-        hoverRowIndex.value = index;
-        emit('row-mouseentered', item, index, e);
-      }
-  
-      function rowMouseLeaved(item: any, index: number, e: Event) {
-        if (!hoverableRows.value) return;
-  
-        hoverRowIndex.value = -1;
-        emit('row-mouseleaved', item, index, e);
-      }
-  
-      function onMousemoved(e: Event) {
-        if (!hoverableRows.value) return;
-  
-        emit('table-mousemoved', e);
+      if (field.sortable) {
+        sort(field.key);
       }
 
-      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();
-          }
-        });
+      if (field.filterable) {
+        filterOptions.value = [...field.filterOptions];
+        filterHeaderCol = el.value.querySelector(`th[name=${field.key}-header]`)
+          .children[0] as HTMLElement;
+        show();
       }
+    }
 
-      function unsubscribeClick() {
-        if (clickSubscriber) {
-          clickSubscriber.unsubscribe();
+    function rowClicked(item: any, index: number, e: Event) {
+      if (!clickableRows.value) return;
+
+      emit("row-clicked", item, index, e);
+    }
+
+    function rowMouseEntered(item: any, index: number, e: Event) {
+      if (!hoverableRows.value) return;
+
+      hoverRowIndex.value = index;
+      emit("row-mouseentered", item, index, e);
+    }
+
+    function rowMouseLeaved(item: any, index: number, e: Event) {
+      if (!hoverableRows.value) return;
+
+      hoverRowIndex.value = -1;
+      emit("row-mouseleaved", item, index, e);
+    }
+
+    function onMousemoved(e: Event) {
+      if (!hoverableRows.value) return;
+
+      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();
         }
-        clickSubscriber = null;
+      });
+    }
+
+    function unsubscribeClick() {
+      if (clickSubscriber) {
+        clickSubscriber.unsubscribe();
       }
+      clickSubscriber = null;
+    }
 
-      function show() {
-        if (!popupEl.value || !filterHeaderCol || !popperInstance) return;
+    function show() {
+      if (!popupEl.value || !filterHeaderCol || !popperInstance) return;
 
-        popupEl.value.setAttribute('data-show', '');
+      popupEl.value.setAttribute("data-show", "");
 
-        subscribeClick();
-        popperInstance.state.elements.reference = filterHeaderCol;
-        popperInstance.setOptions({
-          modifiers: [
-            {
-              name: 'offset',
-              options: {
-                offset: [0, 4],
-              },
+      subscribeClick();
+      popperInstance.state.elements.reference = filterHeaderCol;
+      popperInstance.setOptions({
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 4],
             },
-            { name: 'eventListeners', enabled: true },
-          ],
-        });
-        popperInstance.update();
-      }
+          },
+          { name: "eventListeners", enabled: true },
+        ],
+      });
+      popperInstance.update();
+    }
 
-      function hide() {
-        if (
-          !popupEl.value ||
-          popupEl.value.getAttribute('data-show') === null ||
-          !popperInstance
-        )
-          return;
+    function hide() {
+      if (
+        !popupEl.value ||
+        popupEl.value.getAttribute("data-show") === null ||
+        !popperInstance
+      )
+        return;
 
-        unsubscribeClick();
+      unsubscribeClick();
 
-        if (popupEl.value) {
-          popupEl.value.removeAttribute('data-show');
-        }
+      if (popupEl.value) {
+        popupEl.value.removeAttribute("data-show");
+      }
+
+      popperInstance.setOptions({
+        modifiers: [{ name: "eventListeners", enabled: false }],
+      });
+    }
+
+    function onClickedFilter(filterKey: string) {
+      emit("update:filterBy", filterKey);
+      hide();
+    }
 
-        popperInstance.setOptions({
-          modifiers: [{ name: 'eventListeners', enabled: false }],
+    onMounted(() => {
+      if (el.value && popupEl.value) {
+        popperInstance = createPopper(el.value, popupEl.value, {
+          placement: "bottom-end",
+          modifiers: [{ name: "eventListeners", enabled: false }],
         });
       }
+    });
 
-      function onClickedFilter(filterKey: string) {
-        emit('update:filterBy', filterKey);
-        hide();
+    onBeforeUnmount(() => {
+      if (popperInstance) {
+        popperInstance.destroy();
       }
+      popperInstance = null;
+    });
 
-      onMounted(() => {
-        if (el.value && popupEl.value) {
-          popperInstance = createPopper(el.value, popupEl.value, {
-            placement: 'bottom-end',
-            modifiers: [{ name: 'eventListeners', enabled: false }],
-          });
-        }
-      });
+    return {
+      el,
+      popupEl,
+      hoverRowIndex,
+      filterOptions,
+      headerColumnSpans,
+      columnSpans,
+      onClickedHeaderCol,
+      sort,
+      rowClicked,
+      rowMouseEntered,
+      rowMouseLeaved,
+      onMousemoved,
+      onClickedFilter,
+    };
+  },
+});
+</script>
 
-      onBeforeUnmount(() => {
-        if (popperInstance) {
-          popperInstance.destroy();
-        }
-        popperInstance = null;
-      });
-  
-      return {
-        el,
-        popupEl,
-        hoverRowIndex,
-        filterOptions,
-        headerColumnSpans,
-        columnSpans,
-        onClickedHeaderCol,
-        sort,
-        rowClicked,
-        rowMouseEntered,
-        rowMouseLeaved,
-        onMousemoved,
-        onClickedFilter,
-      };
-    },
-  });
-  </script>
-  
-  <style lang="stylus">
-  .table
-    @apply block relative w-full overflow-hidden
-  
-    &.table-responsive
-      @apply overflow-auto
-  
-      table
-        @apply table-auto
-  
-    table
-      @apply w-full table-fixed
-  
-      thead
-        tr
-          @apply border-b border-primary-600 bg-white
-  
-          th
-            @apply px-2 pb-2 text-base font-normal text-primary whitespace-nowrap
-            
-            &.sortable, &.filterable
-              @apply cursor-pointer
-            .sort-icon
-              @apply opacity-0
-              transition transform 0.2s ease, opacity 0.1s ease
-            &:hover,
-            &.sorting
-              .sort-icon
-                @apply opacity-100
-            &.filterable
-              .filter-icon
-                @apply opacity-100
-  
-      tbody
-        &.clickable
-          tr
-            @apply cursor-pointer
-  
-        tr
-          &.body-header-row
-            td
-              @apply bg-primary-50 text-lg font-bold shadow-inline
-
-          td
-            @apply p-2 border-b border-opacity-50 text-base text-pgray-2
-
-            &.text-right.sortable
-                @apply pr-8
-
-  .table-header-filter-popup
-    @apply z-10 flex border border-primary-600 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-pgray-3
-        @apply s('hover:bg-primary-50')
-
-        &.active
-          @apply bg-primary-100 text-primary
-
-          .icon
-            @apply text-primary
-
-        .icon
-          @apply text-base leading-none
-  </style>
-  
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.table {
+  @apply block relative w-full overflow-hidden;
+}
+
+.table.table-responsive {
+  @apply overflow-auto;
+}
+
+.table.table-responsive table {
+  @apply table-auto;
+}
+
+.table table {
+  @apply w-full table-fixed;
+}
+
+.table table thead tr {
+  @apply border-b border-primary-600 bg-white;
+}
+
+.table table thead tr th {
+  @apply px-2 pb-2 text-base font-normal text-primary whitespace-nowrap;
+}
+
+.table table thead tr th.sortable,
+.table table thead tr th.filterable {
+  @apply cursor-pointer;
+}
+
+.table table thead tr th .sort-icon {
+  @apply opacity-0;
+  transition: transform 0.2s ease, opacity 0.1s ease;
+}
+
+.table table thead tr th:hover .sort-icon,
+.table table thead tr th.sorting .sort-icon {
+  @apply opacity-100;
+}
+
+.table table thead tr th.filterable .filter-icon {
+  @apply opacity-100;
+}
+
+.table table tbody.clickable tr {
+  @apply cursor-pointer;
+}
+
+.table table tbody tr.body-header-row td {
+  @apply bg-primary-50 text-lg font-bold shadow-inline;
+}
+
+.table table tbody tr td {
+  @apply p-2 border-b border-opacity-50 text-base text-pgray-2;
+}
+
+.table table tbody tr td.text-right.sortable {
+  @apply pr-8;
+}
+
+.table-header-filter-popup {
+  @apply z-10 flex border border-primary-600 rounded overflow-hidden invisible pointer-events-none;
+}
+
+.table-header-filter-popup[data-show] {
+  @apply visible pointer-events-auto;
+}
+
+.table-header-filter-popup-content {
+  @apply flex flex-col;
+}
+
+.table-header-filter-popup-content .table-header-filter-item {
+  @apply inline-flex justify-center p-2 bg-white text-sm text-pgray-3 hover:bg-primary-50;
+}
+
+.table-header-filter-popup-content .table-header-filter-item.active {
+  @apply bg-primary-100 text-primary;
+}
+
+.table-header-filter-popup-content .table-header-filter-item.active .icon {
+  @apply text-primary;
+}
+
+.table-header-filter-popup-content .table-header-filter-item .icon {
+  @apply text-base leading-none;
+}
+</style>