@mptw/skylens-ui 1.4.11 → 1.4.13

package/components/SLSelect.vue

@@ -16,7 +16,7 @@
       slot(name='invalid-feedback') {{ invalidFeedback }}
   ClientOnly
     Teleport(to="body")
-      .select-options(ref='optionList', :style="`min-width: ${popupMaxWidth}px`")
+      .select-options(ref='optionList', :class='{ "select-options--sm": size === "sm", "select-options--xs": size === "xs" }', :style="`min-width: ${popupMaxWidth}px`")
         .options-header(v-if='withSearch')
           SLSearchInput(
             v-model='search',
@@ -59,7 +59,7 @@ export default defineComponent({
     size: {
       type: String,
       default: "",
-      validator: (val: string) => ["", "sm"].includes(val),
+      validator: (val: string) => ["", "sm", "xs"].includes(val),
     },
     modelValue: {
       type: [Number, String, Object, Array] as PropType<any>,
@@ -465,16 +465,16 @@ export default defineComponent({
     .form-control
       @apply flex-grow
 
+  &.custom-select-xs
+    .form-control
+      label
+        @apply py-px s('px-0.75') text-xs
+
   &.custom-select-sm
     .form-control
       label
         @apply s("py-0.75") text-sm
 
-    .select-options
-      .option-list
-        .option-button
-          @apply py-1 text-sm
-
   &.disabled, &.readonly
     .form-control
       label
@@ -517,6 +517,16 @@ export default defineComponent({
 .select-options
   @apply flex flex-col z-60 absolute invisible border border-primary-light rounded bg-white overflow-hidden pointer-events-none
 
+  &.select-options--xs
+    .option-list
+      .option-button
+        @apply py-1 text-xs
+
+  &.select-options--sm
+    .option-list
+      .option-button
+        @apply py-1 text-sm
+
   &[data-show]
     @apply visible pointer-events-auto
 

package/package.json

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

package/utils/index.ts

@@ -138,9 +138,9 @@ export const hexToRgba = (hex: string, opacity: number) => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result
     ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
-        result[3],
-        16
-      )}, ${opacity})`
+      result[3],
+      16
+    )}, ${opacity})`
     : `rgba(255, 255, 255, 0)`;
 };
 
@@ -233,8 +233,8 @@ export const getBarChartGridTop = (maxValue: number, showLabel = true) => {
     30 +
     (showLabel
       ? Number(maxValue).toLocaleString().length *
-        8 *
-        Math.sin((30 / 180) * Math.PI)
+      8 *
+      Math.sin((30 / 180) * Math.PI)
       : 0)
   );
 };
@@ -250,8 +250,8 @@ export const getBarChartBarLabelHeight = (maxValue: string | number, showLabel =
     16 +
     (showLabel
       ? Number(maxValue).toLocaleString().length *
-        8 *
-        Math.sin((30 / 180) * Math.PI)
+      8 *
+      Math.sin((30 / 180) * Math.PI)
       : 0)
   );
 };
@@ -286,11 +286,11 @@ export const getDayDatesMatchWeekDay = (dateRange1: IDateRange, dateRange2: IDat
   const weekDayDiff = weekDayOfRange1Start - weekDayOfRange2Start;
 
   if (
-      (weekDayDiff > 0 && weekDayDiff <= 3)
-      || (weekDayDiff < -3)
-    ) {
-      const iteratorTimes = weekDayDiff > 0 ? weekDayDiff : (weekDayDiff + 7);
-    for(let i = 0; i < iteratorTimes; i += 1) {
+    (weekDayDiff > 0 && weekDayDiff <= 3)
+    || (weekDayDiff < -3)
+  ) {
+    const iteratorTimes = weekDayDiff > 0 ? weekDayDiff : (weekDayDiff + 7);
+    for (let i = 0; i < iteratorTimes; i += 1) {
       const day = addDays(dateRange2.start, i);
       dayDates.push({
         date: formatDate(day, 'yyyy/MM/dd'),
@@ -301,7 +301,7 @@ export const getDayDatesMatchWeekDay = (dateRange1: IDateRange, dateRange2: IDat
   }
 
   const daysOfLastMonth = differenceInCalendarDays(dateRange1.end, dateRange1.start) + 1;
-  for(let i = 0; i < daysOfLastMonth; i += 1) {
+  for (let i = 0; i < daysOfLastMonth; i += 1) {
     const day = addDays(dateRange1.start, i);
     dayDates.push({
       date: formatDate(day, 'yyyy/MM/dd'),
@@ -312,7 +312,7 @@ export const getDayDatesMatchWeekDay = (dateRange1: IDateRange, dateRange2: IDat
 
   const overMonth1Days = getDate(dateRange2.end) - getDate(dateRange1.end) - (7 - Math.abs(weekDayDiff));
   if (overMonth1Days > 0) {
-    for(let j = overMonth1Days; j > 0; j -= 1) {
+    for (let j = overMonth1Days; j > 0; j -= 1) {
       const day = subDays(dateRange2.end, j);
       dayDates.push({
         date: formatDate(day, 'yyyy/MM/dd'),
@@ -327,7 +327,7 @@ export const getDayDatesMatchWeekDay = (dateRange1: IDateRange, dateRange2: IDat
 }
 
 export const translateDayToLocale = (day: number) => {
-  switch(day) {
+  switch (day) {
     case 0:
       return '日';
     case 1:
@@ -402,11 +402,11 @@ export const downloadBlob = (data: ExcelJS.Buffer, fileName: string, mimeType: s
 };
 
 export const isDateRangesEqual = (dateRange1: IDateRange, dateRange2: IDateRange) => {
-  return getYear(dateRange1.start) === getYear(dateRange2.start) && 
-    getMonth(dateRange1.start) === getMonth(dateRange2.start) && 
-    getDate(dateRange1.start) === getDate(dateRange2.start) && 
-    getYear(dateRange1.end) === getYear(dateRange2.end) && 
-    getMonth(dateRange1.end) === getMonth(dateRange2.end) && 
+  return getYear(dateRange1.start) === getYear(dateRange2.start) &&
+    getMonth(dateRange1.start) === getMonth(dateRange2.start) &&
+    getDate(dateRange1.start) === getDate(dateRange2.start) &&
+    getYear(dateRange1.end) === getYear(dateRange2.end) &&
+    getMonth(dateRange1.end) === getMonth(dateRange2.end) &&
     getDate(dateRange1.end) === getDate(dateRange2.end);
 }
 
@@ -472,7 +472,16 @@ export const ga4ev = ({ category, action, label, value, cb }: {
       data.eventCallback = cb;
     }
 
-    window.dataLayer?.push(data);
+    const eventParams: any = {
+      action,
+      value,
+    };
+
+    if (cb) {
+      eventParams.event_callback = cb;
+    }
+
+    window.dataLayer?.push('event', label, eventParams);
   }
 };
 
@@ -543,14 +552,14 @@ export const waitForTime = (ms: number) => {
 }
 
 export const waitForever = () => {
-  return new Promise(r => {});
+  return new Promise(r => { });
 }
 
 export const waitFor = async (condition: () => boolean, pollInterval = 50, timeoutAfter: number) => {
   const startTime = Date.now();
 
-  while(true) {
-    if (typeof(timeoutAfter) === 'number' && Date.now() > startTime + timeoutAfter) {
+  while (true) {
+    if (typeof (timeoutAfter) === 'number' && Date.now() > startTime + timeoutAfter) {
       throw 'Condition not met before timeout';
     }