@mptw/skylens-ui 1.2.9 → 1.2.11

package/components/SLCalendarPopup.vue

@@ -123,7 +123,7 @@ import {
   previousDateRange,
   isValidDate,
 } from "~ui/utils";
-import { DEFAULT_END_DATE_BEFORE_NOW } from "~ui/utils/constants";
+import { CABLE_DEFAULT_END_DATE_BEFORE_NOW, MOBILE_DEFAULT_END_DATE_BEFORE_NOW } from "~ui/utils/constants";
 import type IDateRange from "~ui/interface/IDateRange";
 import { OnlineSourceType } from "~ui/interface/IWeb";
 
@@ -289,12 +289,12 @@ export default defineComponent({
       switch (dataSourceType.value) {
         case OnlineSourceType.Mobile:
           return formatDate(
-            subDays(new Date(), DEFAULT_END_DATE_BEFORE_NOW),
+            subDays(new Date(), MOBILE_DEFAULT_END_DATE_BEFORE_NOW),
             "yyyy/MM/dd"
           );
         default:
           return formatDate(
-            subDays(new Date(), DEFAULT_END_DATE_BEFORE_NOW + 2),
+            subDays(new Date(), CABLE_DEFAULT_END_DATE_BEFORE_NOW),
             "yyyy/MM/dd"
           );
       }

package/components/SLTwoLayerMultiSelect.vue

@@ -111,36 +111,53 @@ export default defineComponent({
       >,
       default: () => [],
     },
+    query: {
+      type: String,
+      default: '',
+    }
   },
-  emits: ["update:modelValue", "update:selecting"],
+  emits: ["update:modelValue", "update:selecting", 'update:query'],
   setup(props, { emit }) {
-    const { size, modelValue, options, placement } = toRefs(props);
+    const { size, modelValue, options, placement, query } = toRefs(props);
 
     const selectEl = shallowRef<HTMLElement | null>(null);
     const toggleEl = shallowRef<HTMLElement | null>(null);
     const popupEl = shallowRef<HTMLElement | null>(null);
-    const query = ref("");
+    const selfQuery = ref("");
     const selectedFirstOption = ref<string | null>(null);
     const isSelecting = ref(false);
 
     let popperInstance: any = null;
     let clickSubscriber: any = null;
 
+    const queryProxy = computed({
+      get() { query.value || selfQuery },
+      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 (query.value === "") {
+      if (queryProxy.value === "") {
         return options.value;
       }
 
       const regexp = new RegExp(`.*${query.value}.*`, "i");
       return options.value
-        .map((option) => ({
-          ...option,
-          subOptions: option.subOptions.filter((o) => regexp.test(o.name)),
-        }))
+        .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(() => {
@@ -309,7 +326,7 @@ export default defineComponent({
       selectEl,
       toggleEl,
       popupEl,
-      query,
+      queryProxy,
       sizeClass,
       selectedFirstOption,
       firstOptions,

package/package.json

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

package/utils/constants.ts

@@ -59,7 +59,8 @@ export const POI_CHART_COLORS = [
   "#b65f5f"
 ];
 
-export const DEFAULT_END_DATE_BEFORE_NOW = 6;
+export const CABLE_DEFAULT_END_DATE_BEFORE_NOW = 6;
+export const MOBILE_DEFAULT_END_DATE_BEFORE_NOW = 3;
 
 export const TAIWAN_COUNTRIES = [
   '台北市',