@mptw/skylens-ui 1.4.59 → 1.4.61

package/app.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-SLProfileButton(
-  username='Sherwin'
+SLCalendarButton(
+  :allow-quicks="['last7Days']"
 )
 </template>

package/components/SLCalendarButton.vue

@@ -4,10 +4,10 @@
   ref="button"
 )
   a(
-      href="javascript:;"
-      @click="onClickedToggle"
-      ref="toggle"
-    ).toggle-button
+    href="javascript:;"
+    @click="onClickedToggle"
+    ref="toggle"
+  ).toggle-button
     .date-range
       SLIcon(icon="calendar")
       span.divider
@@ -19,17 +19,18 @@
   ClientOnly
     Teleport(to="body")
       SLCalendarPopup(
-          :data-source-type='dataSourceType'
-          :show-quicks="showQuicks"
-          :showCompareSwitch="showCompareSwitch"
-          :min-date="minDate"
-          :maxDate="maxDate"
-          :maxDays="maxDays"
-          :modelValue="modelValue"
-          @compare:change="onCompareChanged"
-          @update:modelValue="onInputed"
-          ref="popup"
-        )
+        :data-source-type='dataSourceType'
+        :show-quicks="showQuicks"
+        :allow-quicks='allowQuicks'
+        :showCompareSwitch="showCompareSwitch"
+        :min-date="minDate"
+        :maxDate="maxDate"
+        :maxDays="maxDays"
+        :modelValue="modelValue"
+        @compare:change="onCompareChanged"
+        @update:modelValue="onInputed"
+        ref="popup"
+      )
 </template>
 
 <script lang="ts">
@@ -57,6 +58,15 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    allowQuicks: {
+      type: Array as PropType<Array<string>>,
+      default: () => [
+        'last7Days',
+        'last30Days',
+        'last90Days',
+        'lastMonth'
+      ],
+    },
     showCompareSwitch: {
       type: Boolean,
       default: true,

package/components/SLCalendarPopup.vue

@@ -141,6 +141,15 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    allowQuicks: {
+      type: Array as PropType<Array<string>>,
+      default: () => [
+        'last7Days',
+        'last30Days',
+        'last90Days',
+        'lastMonth'
+      ],
+    },
     showCompareSwitch: {
       type: Boolean,
       default: true,
@@ -168,7 +177,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const runtimeConfig = useRuntimeConfig();
 
-    const { dataSourceType, minDate, maxDate, maxDays, modelValue } =
+    const { allowQuicks, dataSourceType, minDate, maxDate, maxDays, modelValue } =
       toRefs(props);
 
     const el = shallowRef<HTMLElement | null>(null);
@@ -328,14 +337,25 @@ export default defineComponent({
       return formatDate(baseDate.value, "yyyy/MM/dd");
     });
     const quicks = computed(() => {
-      const quicks = [
-        { key: "last7Days", label: "過去7天" },
-        { key: "last30Days", label: "過去30天" },
-      ];
-
-      if (maxDaysProxy.value >= 90) {
-        quicks.push({ key: "last90Days", label: "過去90天" });
-      }
+      const quicks: {
+        key: 'last7Days' | 'last30Days' | 'last90Days' | 'lastMonth';
+        label: string;
+      }[] = [];
+
+      allowQuicks.value.forEach((allowQuick) => {
+        if (allowQuick === 'last7Days') {
+          quicks.push({ key: "last7Days", label: "過去7天" });
+        }
+        if (allowQuick === 'last30Days') {
+          quicks.push({ key: "last30Days", label: "過去30天" });
+        }
+        if (allowQuick === 'last90Days' && maxDaysProxy.value >= 90) {
+          quicks.push({ key: "last90Days", label: "過去90天" });
+        }
+        if (allowQuick === 'lastMonth') {
+          quicks.push({ key: "lastMonth", label: "上個月" });
+        }
+      });
 
       // if (diffNow.value <= 0) {
       //   quicks.push({ key: 'yesterday', label: '昨天' });
@@ -343,7 +363,7 @@ export default defineComponent({
       //   quicks.push({ key: 'yesterday', label: '過去1天' });
       // }
 
-      return [...quicks, { key: "lastMonth", label: "上個月" }];
+      return quicks;
     });
     const maxDate1 = computed(() => {
       return maxDate.value;
@@ -381,8 +401,8 @@ export default defineComponent({
       if (!dateRange1.value) return "";
 
       return `${dateRange1.value.start
-          ? formatDate(dateRange1.value.start, "yyyy/MM/dd")
-          : ""
+        ? formatDate(dateRange1.value.start, "yyyy/MM/dd")
+        : ""
         }${dateRange1.value.end
           ? `-${formatDate(dateRange1.value.end, "yyyy/MM/dd")}`
           : ""
@@ -425,8 +445,8 @@ export default defineComponent({
       if (!dateRange2.value) return "";
 
       return `${dateRange2.value.start
-          ? formatDate(dateRange2.value.start, "yyyy/MM/dd")
-          : ""
+        ? formatDate(dateRange2.value.start, "yyyy/MM/dd")
+        : ""
         }${dateRange2.value.end
           ? `-${formatDate(dateRange2.value.end, "yyyy/MM/dd")}`
           : ""
@@ -435,8 +455,8 @@ export default defineComponent({
     const dateRange2Style2 = computed(() => {
       if (!dateRange2.value) return "";
       return `${dateRange2.value.start
-          ? formatDate(dateRange2.value.start, "yyyy/MM/dd")
-          : ""
+        ? formatDate(dateRange2.value.start, "yyyy/MM/dd")
+        : ""
         }${dateRange2.value.end
           ? ` - ${formatDate(dateRange2.value.end, "yyyy/MM/dd")}`
           : ""

package/package.json

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