@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/FilterTimeDimensionsSingle.vue

@@ -1,214 +1,214 @@
-<script setup lang="ts">
-import { dayjs } from 'element-plus'
-
-const props = withDefaults(defineProps<{
-  dateType: 'datetimerange' | 'daterange'
-  title?: string
-  maxDays?: number
-}>(), {
-  dateType: 'datetimerange',
-  maxDays: 90,
-})
-
-const dateRange = defineModel<[string, string]>()
-const timeRange = ref('Today')
-
-const { t } = useI18n()
-
-function getDateRangeFromTime(dateRange?: string) {
-  const now = dayjs().tz(TIMEZONE_USER.value)
-  let query: [string, string]
-
-  switch (dateRange) {
-    case 'Today':
-      query = [
-        now.startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-      ]
-      break
-    case 'Yesterday':
-      query = [
-        now.subtract(1, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-      ]
-      break
-    case 'This week':
-      query = [
-        now.startOf('week').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.endOf('week').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-      ]
-      break
-    case 'This month':
-      query = [
-        now.startOf('month').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.endOf('month').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-      ]
-      break
-    case 'Last 7 days':
-      query = [
-        now.subtract(7, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-      ]
-      break
-    case 'last_14_days':
-      query = [
-        now.subtract(14, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-      ]
-      break
-    case 'Last 30 days':
-      query = [
-        now.subtract(30, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-      ]
-      break
-    default:
-      query = [
-        now.subtract(6, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
-        now.endOf('day').format('YYYY-MM-DDTHH:mm:ss'), // Lấy hết ngày hôm nay
-      ]
-      break
-  }
-
-  const timeRangeEpg = ref([0, 23])
-  query[0] = formatTime(`${query[0].split('T')[0]} ${timeRangeEpg.value[0]}:00:00`)
-  query[1] = formatTime(`${query[1].split('T')[0]} ${timeRangeEpg.value[1]}:59:59`)
-
-  return query
-}
-
-// NOTE: reset on validate
-watch(() => dateRange.value, (newValue, oldValue) => {
-  const ONE_DAY = 24 * 60 * 60 * 1000
-  const isOverMaxDays = (dayjs(newValue[1]) - dayjs(newValue[0])) / ONE_DAY > props.maxDays
-  if (isOverMaxDays) {
-    dateRange.value = getDateRangeFromTime()
-    ElNotification.warning(t('TimeRangeDimension.message.isOverMaxDays', { max: props.maxDays }))
-  }
-})
-
-watch(timeRange, (newTypeTimeRange) => {
-  if (newTypeTimeRange === 'custom') {
-    dateRange.value = getDateRangeFromTime()
-  }
-  else {
-    dateRange.value = getDateRangeFromTime(newTypeTimeRange)
-  }
-})
-
-const renderTimes = computed(() => {
-  const now = dayjs().tz(TIMEZONE_USER.value)
-  const dayOfWeek = now.day() - 1
-  const firstOfWeek = now.add(-dayOfWeek, 'day')
-
-  switch (timeRange.value) {
-    case 'Today':
-      return `${t('TimeRangeDimension.day')} <strong>${now.format('YYYY-MM-DD')}</strong>`
-    case 'Yesterday':
-      return `${t('TimeRangeDimension.day')} <strong>${now.add(-1, 'day').format('YYYY-MM-DD')}</strong>`
-    case 'This week':
-      return `${t('TimeRangeDimension.from')} <strong>${firstOfWeek.format('YYYY-MM-DD')}</strong> ${t('TimeRangeDimension.to')} <strong>${firstOfWeek.add(6, 'day').format('YYYY-MM-DD')}</strong>`
-    case 'This month':
-      return `${t('TimeRangeDimension.month')} <strong>${now.format('MM-YYYY')}</strong>`
-    case 'This year':
-      return `${t('TimeRangeDimension.year')} <strong>${now.format('YYYY')}</strong>`
-    case 'Last 7 days':
-      return `${t('TimeRangeDimension.from')} <strong>${now.add(-7, 'day').format('YYYY-MM-DD')}</strong> ${t('TimeRangeDimension.to')} <strong>${now.add(-1, 'day').format('YYYY-MM-DD')}</strong>`
-    case 'Last 30 days':
-      return `${t('TimeRangeDimension.from')} <strong>${now.add(-30, 'day').format('YYYY-MM-DD')}</strong> ${t('TimeRangeDimension.to')} <strong>${now.add(-1, 'day').format('YYYY-MM-DD')}</strong>`
-    case 'Last year':
-      return `${t('TimeRangeDimension.year')} <strong>${now.add(-1, 'year').format('YYYY')}</strong>`
-    default:
-      return ''
-  }
-})
-
-const timeZone = computed(() => {
-  // function to return format UTC + 07:00
-  const offset = dayjs().tz(TIMEZONE_USER.value).format('Z') // e.g. "+07:00"
-  return `UTC${offset.startsWith('-') ? '-' : '+'}${offset.replace(/^[-+]/, '')}`
-})
-</script>
-
-<template>
-  <div class="flex flex-wrap gap-x-2">
-    <el-form-item
-      :show-message="false"
-      class="mb-0!"
-    >
-      <el-select v-model="timeRange" fit-input-width class="w-150px!">
-        <el-option
-          v-for="item in TimeRangeOptions"
-          :key="item.value"
-          :label="t(`TimeRangeOptions.${item.key}`)"
-          :value="item.value"
-        />
-      </el-select>
-    </el-form-item>
-    <el-form-item v-if="timeRange === 'custom'" :show-message="false" class="mb-0!">
-      <el-date-picker
-        v-model="dateRange"
-        class="mr-1"
-        :type="dateType"
-        :clearable="false"
-        :popper-options="{
-          placement: 'bottom-end',
-          modifiers: [
-            { name: 'flip', enabled: false },
-          ],
-        }"
-        :start-placeholder="t('DateTime.startDate')"
-        :end-placeholder="t('DateTime.endDate')"
-        value-format="YYYY-MM-DDTHH:mm:ss"
-      />
-      ({{ timeZone }})
-    </el-form-item>
-    <el-form-item v-else class="mb-0!">
-      <span v-html="renderTimes" /> &nbsp;({{ timeZone }})
-    </el-form-item>
-  </div>
-</template>
-
-<i18n lang="yaml" global>
-en:
-  TimeRangeDimension:
-    day: Day
-    from: From
-    to: To
-    month: Month
-    year: Year
-    message:
-      isOverMaxDays: Time query filter does not exceed {max} days
-  TimeRangeOptions:
-    all_time: All time
-    custom: Custom
-    last_30_days: Last 30 days
-    last_7_days: Last 7 days
-    last_year: Last year
-    this_month: This month
-    this_week: This week
-    this_year: This year
-    today: Today
-    yesterday: Yesterday
-
-vi:
-  TimeRangeDimension:
-    day: Ngày
-    from: Từ
-    to: Đến
-    month: Tháng
-    year: Năm
-    message:
-      isOverMaxDays: Bộ lọc truy vấn thời gian không vượt quá {max} ngày
-  TimeRangeOptions:
-    all_time: Tất cả thời gian
-    custom: Tùy chỉnh
-    last_30_days: 30 ngày trước
-    last_7_days: 7 ngày trước
-    last_year: Năm trước
-    this_month: Tháng này
-    this_week: Tuần này
-    this_year: Năm nay
-    today: Hôm nay
-    yesterday: Hôm qua
-</i18n>
+<script setup lang="ts">
+import { dayjs } from 'element-plus'
+
+const props = withDefaults(defineProps<{
+  dateType: 'datetimerange' | 'daterange'
+  title?: string
+  maxDays?: number
+}>(), {
+  dateType: 'datetimerange',
+  maxDays: 90,
+})
+
+const dateRange = defineModel<[string, string]>()
+const timeRange = ref('Today')
+
+const { t } = useI18n()
+
+function getDateRangeFromTime(dateRange?: string) {
+  const now = dayjs().tz(TIMEZONE_USER.value)
+  let query: [string, string]
+
+  switch (dateRange) {
+    case 'Today':
+      query = [
+        now.startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'Yesterday':
+      query = [
+        now.subtract(1, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'This week':
+      query = [
+        now.startOf('week').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.endOf('week').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'This month':
+      query = [
+        now.startOf('month').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.endOf('month').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'Last 7 days':
+      query = [
+        now.subtract(7, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'last_14_days':
+      query = [
+        now.subtract(14, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    case 'Last 30 days':
+      query = [
+        now.subtract(30, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.subtract(1, 'day').endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+      ]
+      break
+    default:
+      query = [
+        now.subtract(6, 'day').startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+        now.endOf('day').format('YYYY-MM-DDTHH:mm:ss'), // Lấy hết ngày hôm nay
+      ]
+      break
+  }
+
+  const timeRangeEpg = ref([0, 23])
+  query[0] = formatTime(`${query[0].split('T')[0]} ${timeRangeEpg.value[0]}:00:00`)
+  query[1] = formatTime(`${query[1].split('T')[0]} ${timeRangeEpg.value[1]}:59:59`)
+
+  return query
+}
+
+// NOTE: reset on validate
+watch(() => dateRange.value, (newValue, oldValue) => {
+  const ONE_DAY = 24 * 60 * 60 * 1000
+  const isOverMaxDays = (dayjs(newValue[1]) - dayjs(newValue[0])) / ONE_DAY > props.maxDays
+  if (isOverMaxDays) {
+    dateRange.value = getDateRangeFromTime()
+    ElNotification.warning(t('TimeRangeDimension.message.isOverMaxDays', { max: props.maxDays }))
+  }
+})
+
+watch(timeRange, (newTypeTimeRange) => {
+  if (newTypeTimeRange === 'custom') {
+    dateRange.value = getDateRangeFromTime()
+  }
+  else {
+    dateRange.value = getDateRangeFromTime(newTypeTimeRange)
+  }
+})
+
+const renderTimes = computed(() => {
+  const now = dayjs().tz(TIMEZONE_USER.value)
+  const dayOfWeek = now.day() - 1
+  const firstOfWeek = now.add(-dayOfWeek, 'day')
+
+  switch (timeRange.value) {
+    case 'Today':
+      return `${t('TimeRangeDimension.day')} <strong>${now.format('YYYY-MM-DD')}</strong>`
+    case 'Yesterday':
+      return `${t('TimeRangeDimension.day')} <strong>${now.add(-1, 'day').format('YYYY-MM-DD')}</strong>`
+    case 'This week':
+      return `${t('TimeRangeDimension.from')} <strong>${firstOfWeek.format('YYYY-MM-DD')}</strong> ${t('TimeRangeDimension.to')} <strong>${firstOfWeek.add(6, 'day').format('YYYY-MM-DD')}</strong>`
+    case 'This month':
+      return `${t('TimeRangeDimension.month')} <strong>${now.format('MM-YYYY')}</strong>`
+    case 'This year':
+      return `${t('TimeRangeDimension.year')} <strong>${now.format('YYYY')}</strong>`
+    case 'Last 7 days':
+      return `${t('TimeRangeDimension.from')} <strong>${now.add(-7, 'day').format('YYYY-MM-DD')}</strong> ${t('TimeRangeDimension.to')} <strong>${now.add(-1, 'day').format('YYYY-MM-DD')}</strong>`
+    case 'Last 30 days':
+      return `${t('TimeRangeDimension.from')} <strong>${now.add(-30, 'day').format('YYYY-MM-DD')}</strong> ${t('TimeRangeDimension.to')} <strong>${now.add(-1, 'day').format('YYYY-MM-DD')}</strong>`
+    case 'Last year':
+      return `${t('TimeRangeDimension.year')} <strong>${now.add(-1, 'year').format('YYYY')}</strong>`
+    default:
+      return ''
+  }
+})
+
+const timeZone = computed(() => {
+  // function to return format UTC + 07:00
+  const offset = dayjs().tz(TIMEZONE_USER.value).format('Z') // e.g. "+07:00"
+  return `UTC${offset.startsWith('-') ? '-' : '+'}${offset.replace(/^[-+]/, '')}`
+})
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-x-2">
+    <el-form-item
+      :show-message="false"
+      class="mb-0!"
+    >
+      <el-select v-model="timeRange" fit-input-width class="w-150px!">
+        <el-option
+          v-for="item in TimeRangeOptions"
+          :key="item.value"
+          :label="t(`TimeRangeOptions.${item.key}`)"
+          :value="item.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item v-if="timeRange === 'custom'" :show-message="false" class="mb-0!">
+      <el-date-picker
+        v-model="dateRange"
+        class="mr-1"
+        :type="dateType"
+        :clearable="false"
+        :popper-options="{
+          placement: 'bottom-end',
+          modifiers: [
+            { name: 'flip', enabled: false },
+          ],
+        }"
+        :start-placeholder="t('DateTime.startDate')"
+        :end-placeholder="t('DateTime.endDate')"
+        value-format="YYYY-MM-DDTHH:mm:ss"
+      />
+      ({{ timeZone }})
+    </el-form-item>
+    <el-form-item v-else class="mb-0!">
+      <span v-html="renderTimes" /> &nbsp;({{ timeZone }})
+    </el-form-item>
+  </div>
+</template>
+
+<i18n lang="yaml" global>
+en:
+  TimeRangeDimension:
+    day: Day
+    from: From
+    to: To
+    month: Month
+    year: Year
+    message:
+      isOverMaxDays: Time query filter does not exceed {max} days
+  TimeRangeOptions:
+    all_time: All time
+    custom: Custom
+    last_30_days: Last 30 days
+    last_7_days: Last 7 days
+    last_year: Last year
+    this_month: This month
+    this_week: This week
+    this_year: This year
+    today: Today
+    yesterday: Yesterday
+
+vi:
+  TimeRangeDimension:
+    day: Ngày
+    from: Từ
+    to: Đến
+    month: Tháng
+    year: Năm
+    message:
+      isOverMaxDays: Bộ lọc truy vấn thời gian không vượt quá {max} ngày
+  TimeRangeOptions:
+    all_time: Tất cả thời gian
+    custom: Tùy chỉnh
+    last_30_days: 30 ngày trước
+    last_7_days: 7 ngày trước
+    last_year: Năm trước
+    this_month: Tháng này
+    this_week: Tuần này
+    this_year: Năm nay
+    today: Hôm nay
+    yesterday: Hôm qua
+</i18n>

package/src/components/HelpPanel.vue

@@ -1,87 +1,87 @@
-<script lang="ts" setup>
-import { isNil } from 'remeda'
-
-const { isShowHelpPanel, schemaObj } = useSharedHelpPanel()
-</script>
-
-<template>
-  <el-drawer v-model="isShowHelpPanel" :size="420" :z-index="99999">
-    <template #header>
-      <el-text tag="b" size="large" class="block text-xl">
-        {{ $t('general.information') }}
-      </el-text>
-    </template>
-    <div class="">
-      <el-text tag="b" size="large" class="block">
-        {{ schemaObj.label }}
-      </el-text>
-      <el-text>
-        {{ schemaObj?.description }}
-      </el-text>
-    </div>
-    <div class="mt-4">
-      <el-text tag="b" size="large" class="block">
-        {{ $t('general.condition') }}
-      </el-text>
-      <ul class="list-disc">
-        <el-text v-if="!isNil(schemaObj.default)" class="block">
-          <el-text>
-            - {{ $t('general.default_value') }}:
-          </el-text>
-          <el-text tag="b">
-            {{ schemaObj.default }}
-          </el-text>
-        </el-text>
-        <template v-if="schemaObj.type === 'number'">
-          <el-text v-if="!isNil(schemaObj.minimum)" class="block">
-            - {{ $t('general.minimum_value') }}: <el-text tag="b">
-              {{ schemaObj.minimum }}
-            </el-text>
-          </el-text>
-          <el-text v-if="!isNil(schemaObj.maximum)" class="block">
-            - {{ $t('general.maximum_value') }}: <el-text tag="b">
-              {{ schemaObj.maximum }}
-            </el-text>
-          </el-text>
-          <el-text v-if="!isNil(schemaObj.enum)" class="block">
-            - {{ $t('general.enum') }}: <el-text tag="b">
-              {{ schemaObj.enum.join(", ") }}
-            </el-text>
-          </el-text>
-        </template>
-        <template v-if="schemaObj.type === 'array'">
-          <el-text v-if="!isNil(schemaObj?.items?.enum)" class="block">
-            - {{ $t('general.enum') }}: <el-text tag="b">
-              {{ schemaObj.items.enum.join(", ") }}
-            </el-text>
-          </el-text>
-        </template>
-        <template v-if="schemaObj.type === 'string'">
-          <el-text v-if="!isNil(schemaObj.minLength)" class="block">
-            - {{ $t('general.minlength') }}: <el-text tag="b">
-              {{ schemaObj.minLength }}
-            </el-text>
-          </el-text>
-          <el-text v-if="!isNil(schemaObj.maxLength)" class="block">
-            - {{ $t('general.maxlength') }}: <el-text tag="b">
-              {{ schemaObj.maxLength }}
-            </el-text>
-          </el-text>
-          <el-text v-if="!isNil(schemaObj.enum)" class="block">
-            - {{ $t('general.enum') }}: <el-text tag="b">
-              {{ schemaObj.enum.join(", ") }}
-            </el-text>
-          </el-text>
-          <el-text v-if="!isNil(schemaObj.example)" class="block">
-            - {{ $t('general.example') }}: <el-text tag="b">
-              {{ schemaObj.example }}
-            </el-text>
-          </el-text>
-        </template>
-      </ul>
-      <DevOnly>
-        <VueJsonPretty :data="schemaObj" />
-      </DevOnly>
-    </div>
-  </el-drawer>
-</template>
+<script lang="ts" setup>
+import { isNil } from 'remeda'
+
+const { isShowHelpPanel, schemaObj } = useSharedHelpPanel()
+</script>
+
+<template>
+  <el-drawer v-model="isShowHelpPanel" :size="420" :z-index="99999">
+    <template #header>
+      <el-text tag="b" size="large" class="block text-xl">
+        {{ $t('general.information') }}
+      </el-text>
+    </template>
+    <div class="">
+      <el-text tag="b" size="large" class="block">
+        {{ schemaObj.label }}
+      </el-text>
+      <el-text>
+        {{ schemaObj?.description }}
+      </el-text>
+    </div>
+    <div class="mt-4">
+      <el-text tag="b" size="large" class="block">
+        {{ $t('general.condition') }}
+      </el-text>
+      <ul class="list-disc">
+        <el-text v-if="!isNil(schemaObj.default)" class="block">
+          <el-text>
+            - {{ $t('general.default_value') }}:
+          </el-text>
+          <el-text tag="b">
+            {{ schemaObj.default }}
+          </el-text>
+        </el-text>
+        <template v-if="schemaObj.type === 'number'">
+          <el-text v-if="!isNil(schemaObj.minimum)" class="block">
+            - {{ $t('general.minimum_value') }}: <el-text tag="b">
+              {{ schemaObj.minimum }}
+            </el-text>
+          </el-text>
+          <el-text v-if="!isNil(schemaObj.maximum)" class="block">
+            - {{ $t('general.maximum_value') }}: <el-text tag="b">
+              {{ schemaObj.maximum }}
+            </el-text>
+          </el-text>
+          <el-text v-if="!isNil(schemaObj.enum)" class="block">
+            - {{ $t('general.enum') }}: <el-text tag="b">
+              {{ schemaObj.enum.join(", ") }}
+            </el-text>
+          </el-text>
+        </template>
+        <template v-if="schemaObj.type === 'array'">
+          <el-text v-if="!isNil(schemaObj?.items?.enum)" class="block">
+            - {{ $t('general.enum') }}: <el-text tag="b">
+              {{ schemaObj.items.enum.join(", ") }}
+            </el-text>
+          </el-text>
+        </template>
+        <template v-if="schemaObj.type === 'string'">
+          <el-text v-if="!isNil(schemaObj.minLength)" class="block">
+            - {{ $t('general.minlength') }}: <el-text tag="b">
+              {{ schemaObj.minLength }}
+            </el-text>
+          </el-text>
+          <el-text v-if="!isNil(schemaObj.maxLength)" class="block">
+            - {{ $t('general.maxlength') }}: <el-text tag="b">
+              {{ schemaObj.maxLength }}
+            </el-text>
+          </el-text>
+          <el-text v-if="!isNil(schemaObj.enum)" class="block">
+            - {{ $t('general.enum') }}: <el-text tag="b">
+              {{ schemaObj.enum.join(", ") }}
+            </el-text>
+          </el-text>
+          <el-text v-if="!isNil(schemaObj.example)" class="block">
+            - {{ $t('general.example') }}: <el-text tag="b">
+              {{ schemaObj.example }}
+            </el-text>
+          </el-text>
+        </template>
+      </ul>
+      <DevOnly>
+        <VueJsonPretty :data="schemaObj" />
+      </DevOnly>
+    </div>
+  </el-drawer>
+</template>

package/src/components/HexagonPro.vue

@@ -1,7 +1,7 @@
-<script setup lang="ts">
-// const { rightMenu, isDark } = useLayoutStore()
-</script>
-
-<template>
-  <img class="pb-3" src="../public/icon-block-free-app.png" alt="icon-block-free-app" border="0">
-</template>
+<script setup lang="ts">
+// const { rightMenu, isDark } = useLayoutStore()
+</script>
+
+<template>
+  <img class="pb-3" src="../public/icon-block-free-app.png" alt="icon-block-free-app" border="0">
+</template>