@mptw/skylens-ui 1.2.21 → 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/components/SLTextInput.vue

@@ -172,24 +172,22 @@ export default defineComponent({
     }
 
     function onInputCompositionEnd(e: CompositionEvent) {
-      const target = e.target as HTMLInputElement;
-      if (target) {
-        if (Number.isInteger(lazy.value) || lazy.value) {
-          debounceUpdateModelValue(target.value);
-        }
+      isComposing.value = false;
 
-        emit("update:modelValue", target.value);
-      }
+      updateModelValue(e);
     }
 
     function onInputedModelValue(e: Event) {
       const inputEvent = e as InputEvent;
-      if (isComposing.value && !inputEvent.isComposing) {
-        isComposing.value = false;
+      if (isComposing.value || inputEvent.isComposing) {
         return;
       }
 
-      const target = inputEvent.target as HTMLInputElement;
+      updateModelValue(e);
+    }
+
+    function updateModelValue(e: Event) {
+      const target = e.target as HTMLInputElement;
 
       if (target) {
         if (Number.isInteger(lazy.value) || lazy.value) {

package/components/SLTwoLayerSingleSelect.vue

@@ -0,0 +1,313 @@
+<template lang="pug">
+.two-layer-single-select(:class="[sizeClass]" ref="selectEl")
+  a(
+    href="javascript:;"
+    :class="{ selected: !!modelValue }"
+    @click="onClickedToggle"
+    ref="toggleEl"
+    data-cy="project-button-toggle"
+  ).toggle-button
+    span.button-title {{ placeholder }}
+    SLIcon(icon="caret-down")
+  SLTwoLayerSelect(
+    :search-placeholder='searchPlaceholder',
+    :first-layer-title='firstOptionTitle',
+    :second-layer-title='secondOptionTitle',
+    :model-value='modelValue',
+    :selected-first-layer-key='selectedFirstOption',
+    :query='queryProxy',
+    :first-layers='firstOptions',
+    :second-layers='secondOptions',
+    ref='popupComp',
+    @update:model-value="onInputedSecondOption",
+    @search="onSearch"
+    @select-first-layer="onClickedFirstOption"
+  )
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { fromEvent } from "rxjs";
+import { createPopper } from "@popperjs/core";
+import type { Placement } from "@popperjs/core";
+import { SLTwoLayerSelect } from '#components';
+
+type SLTwoLayerSelectType = InstanceType<typeof SLTwoLayerSelect>;
+
+export default defineComponent({
+  name: "SLTwoLayerSingleSelect",
+  components: {},
+  props: {
+    size: {
+      type: String,
+      default: "",
+      validator: (val: string) => ["sm", ""].includes(val),
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    searchPlaceholder: {
+      type: String,
+      default: "",
+    },
+    placement: {
+      type: String as PropType<Placement>,
+      default: "bottom-start",
+    },
+    firstOptionTitle: {
+      type: String,
+      default: "",
+    },
+    secondOptionTitle: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: Object as PropType<{
+        firstLayer: string;
+        secondLayer: string;
+      } | null>,
+      default: () => [],
+    },
+    options: {
+      type: Array as PropType<
+        {
+          key: string;
+          name: string;
+          subOptions: { key: string; name: string }[];
+        }[]
+      >,
+      default: () => [],
+    },
+    query: {
+      type: String,
+      default: '',
+    }
+  },
+  emits: ["update:modelValue", "update:selecting", 'update:query'],
+  setup(props, { emit }) {
+    const { size, options, placement, query } = toRefs(props);
+
+    const selectEl = shallowRef<HTMLElement | null>(null);
+    const toggleEl = shallowRef<HTMLElement | null>(null);
+    const popupComp = shallowRef<SLTwoLayerSelectType | null>(null);
+    const selfQuery = ref(query.value);
+    const selectedFirstOption = ref<string | null>(null);
+    const isSelecting = ref(false);
+
+    let popperInstance: any = null;
+    let clickSubscriber: any = null;
+
+    const queryProxy = computed({
+      get() { return selfQuery.value },
+      set(newValue: string) {
+        emit('update:query', newValue);
+        selfQuery.value = newValue;
+      },
+    });
+    const sizeClass = computed(() => {
+      if (!size.value) return "";
+      return `two-layer-multi-select-${size.value}`;
+    });
+    const filteredOptions = computed(() => {
+      if (!queryProxy.value) {
+        return options.value;
+      }
+
+      const regexp = new RegExp(`[.]*${queryProxy.value}[.]*`, "ig");
+      return options.value
+        .map((option) => {
+          if (regexp.test(option.name)) {
+            return option;
+          }
+
+          return {
+            ...option,
+            subOptions: option.subOptions.filter((o) => regexp.test(o.name)),
+          };
+        })
+        .filter((option) => option.subOptions.length > 0);
+    });
+    const firstOptions = computed(() => {
+      return filteredOptions.value
+    });
+    const secondOptions = computed(() => {
+      const found = filteredOptions.value.find(
+        (option) =>
+          selectedFirstOption.value && option.key === selectedFirstOption.value
+      );
+      return found?.subOptions || [];
+    });
+
+    function onClickedFirstOption(key: string) {
+      selectedFirstOption.value = key;
+    }
+
+    function onInputedFirstOption(key: string) {
+      selectedFirstOption.value = key;
+    }
+
+    function onInputedSecondOption(newValue: {
+      firstLayer: string;
+      secondLayer: string;
+    } | null) {
+      emit("update:modelValue", newValue);
+    }
+
+    function onClearQuery() {
+      queryProxy.value = "";
+    }
+
+    function subscribeClick() {
+      clickSubscriber = fromEvent(window, "click").subscribe((e) => {
+        const { target } = e;
+        if (selectEl.value && !selectEl.value.contains(target as HTMLElement)) {
+          hide();
+        }
+      });
+    }
+
+    function unsubscribeClick() {
+      if (clickSubscriber) {
+        clickSubscriber.unsubscribe();
+      }
+      clickSubscriber = null;
+    }
+
+    function show() {
+      if (!popupComp.value?.$el) return;
+
+      isSelecting.value = true;
+
+      const body = document.querySelector("body");
+      if (body) {
+        body.classList.add("popup");
+      }
+
+      if (popupComp.value?.$el) {
+        popupComp.value.$el.setAttribute("data-show", "");
+      }
+      subscribeClick();
+      popperInstance.setOptions({
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 8],
+            },
+          },
+          { name: "eventListeners", enabled: true },
+        ],
+      });
+    }
+
+    function hide() {
+      const body = document.querySelector("body");
+      if (body) {
+        body.classList.remove("popup");
+      }
+
+      if (!popupComp.value?.$el || popupComp.value?.$el.getAttribute("data-show") === null)
+        return;
+
+      isSelecting.value = false;
+
+      unsubscribeClick();
+
+      if (popupComp.value?.$el) {
+        popupComp.value?.$el.removeAttribute("data-show");
+      }
+      popperInstance.setOptions({
+        modifiers: [{ name: "eventListeners", enabled: false }],
+      });
+
+      queryProxy.value = "";
+    }
+
+    function onClickedToggle() {
+      if (!popupComp.value?.$el || popupComp.value?.$el.getAttribute("data-show") !== null) {
+        hide();
+        return;
+      }
+
+      show();
+    }
+
+    function onSearch(search: string) {
+      console.log("search", search === '');
+      queryProxy.value = search;
+    }
+
+    watch(isSelecting, () => {
+      emit("update:selecting", isSelecting.value);
+    });
+
+    onMounted(() => {
+      if (!popupComp.value?.$el) return;
+
+      if (selectEl.value && popupComp.value?.$el) {
+        popperInstance = createPopper(selectEl.value, popupComp.value?.$el, {
+          placement: placement.value as Placement,
+          modifiers: [{ name: "eventListeners", enabled: false }],
+        });
+      }
+    });
+    onBeforeUnmount(() => {
+      const body = document.querySelector("body");
+      if (body) {
+        body.classList.remove("popup");
+      }
+
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+      popperInstance = null;
+    });
+
+    return {
+      selectEl,
+      toggleEl,
+      popupComp,
+      queryProxy,
+      sizeClass,
+      selectedFirstOption,
+      firstOptions,
+      secondOptions,
+      onClickedFirstOption,
+      onInputedFirstOption,
+      onInputedSecondOption,
+      onClearQuery,
+      onClickedToggle,
+      onSearch,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.two-layer-single-select
+  @apply relative w-full
+
+  &.two-layer-single-select-sm
+    .toggle-button
+      @apply text-sm
+
+  .toggle-button
+    @apply relative flex items-center w-full s('p-1.75') s('space-x-1.75') border border-primary-light rounded text-base text-gray-4
+
+    &.selected
+      @apply text-gray-2
+
+    .button-title
+      @apply flex-grow
+
+    .icon
+      @apply flex-grow-0 flex-shrink-0 inline-flex text-xs text-gray-2 leading-none
+
+  .tw-layer-select
+    @apply z-10 invisible pointer-events-none
+
+    &[data-show]
+      @apply visible pointer-events-auto
+</style>

package/package.json

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