@sigmaott/base-next 1.0.6

package/src/components/FilterTimeDimensionsSingle.vue

@@ -0,0 +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>

package/src/components/HelpPanel.vue

@@ -0,0 +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>

package/src/components/HexagonPro.vue

@@ -0,0 +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>

package/src/components/IconCopyButton.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import ClipboardJS from 'clipboard'
+
+const props = withDefaults(defineProps<{
+  value: string
+  size?: number
+}>(), {
+  size: 16,
+})
+
+const copyRef = ref()
+const { t } = useI18n()
+onMounted(() => {
+  const clipboard = new ClipboardJS(copyRef.value.$el, {
+    text: () => props.value,
+  })
+
+  clipboard.on('success', (e) => {
+    ElMessage.success(`${t('Copy')} (${props.value.toString().length < 40 ? props.value.toString() : `${props.value.substring(0, 40)}...`})`)
+  })
+
+  clipboard.on('error', (e) => {
+    ElMessage.error(`${t('CopyFailed')}`)
+  })
+})
+</script>
+
+<template>
+  <el-icon ref="copyRef" class="cursor-copy" :size="size">
+    <div class="i-ep:copy-document" />
+  </el-icon>
+</template>
+
+<i18n lang="yaml">
+en:
+  ContentHover: Copy value
+  Copy: Copied
+  CopyFailed: Copy failed
+vi:
+  ContentHover: Sao chép nội dung
+  Copy: Đã sao chép
+  CopyFailed: Sao chép không thành công
+</i18n>

package/src/components/InformationLabel.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { isNil } from 'remeda'
+
+const props = withDefaults(defineProps<{
+  label: string
+  info?: any
+  information?: string
+  required?: boolean
+  minWidth?: string
+  maxWidth?: string
+  useHTMLString?: boolean
+}>(), {
+  label: '',
+  information: '',
+})
+
+const { label, info, maxWidth } = toRefs(props)
+const { openHelpPanel } = useSharedHelpPanel()
+const visible = ref(false)
+function renderMathJax() {
+  visible.value = true
+  nextTick(() => {
+    if (window.MathJax) {
+      window.MathJax.typeset()
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="inline-flex items-center gap-[2px]">
+    <slot name="label">
+      <span :class="minWidth ?? ''">{{ label }}</span>
+    </slot>
+    <template v-if="!isNil(info)">
+      <el-icon class="cursor-pointer text-info" @click.prevent.stop="openHelpPanel({ ...info, label })">
+        <div class="i-ep:info-filled text-blue-500" />
+      </el-icon>
+    </template>
+    <template v-else-if="information || $slots.information">
+      <el-tooltip
+        :visible="visible"
+        placement="top-start"
+        :z-index="999999"
+      >
+        <template #content>
+          <slot name="information">
+            <div
+              v-if="useHTMLString"
+              v-bind="$attrs"
+              class="max-w-390px"
+              :class="maxWidth"
+              v-html="information"
+            />
+            <p v-else class="max-w-390px">
+              {{ toUpperCaseFirstLetter(information) }}
+            </p>
+          </slot>
+        </template>
+        <el-icon class="cursor-pointer text-info" @mouseenter="renderMathJax" @mouseleave="visible = false">
+          <div class="i-ep:info-filled text-blue-500" />
+        </el-icon>
+      </el-tooltip>
+    </template>
+    <span v-if="required" class="text-[--el-color-danger]">*</span>
+  </div>
+</template>

package/src/components/Input/InputTags.vue

@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import { formContextKey, formItemContextKey } from 'element-plus'
+
+const props = withDefaults(defineProps<{
+  modelValue: string[]
+  disabled?: boolean
+  maxLengthItem?: number
+  maxItem?: number
+  label?: string
+}>(), {
+  modelValue: () => [],
+  disabled: false,
+  maxLengthItem: 35,
+  maxItem: 100,
+})
+
+const emit = defineEmits(['deleteTag'])
+const _value = useVModel(props, 'modelValue')
+const inputTag = ref('')
+const inputVisible = ref(false)
+const InputRef = ref()
+const context = inject(formContextKey)
+const itemCtx = inject(formItemContextKey)
+
+// Function to validate individual tag
+function isValidTag(tag: string): boolean {
+  // Check length
+  if (tag.trim().split(' ').join('').length > props.maxLengthItem)
+    return false
+
+  // Check special characters
+  if (/[`!@#$%^&*()+=[\]{};':"\\|,.<>/?~]/.test(tag))
+    return false
+
+  // Check accented characters and spaces
+  if (!new RegExp(`^[\\w-]{1,${props.maxLengthItem}}$`).test(tag))
+    return false
+
+  return true
+}
+
+function handleCloseTag(tag: string) {
+  _value.value?.splice(_value.value?.indexOf(tag), 1)
+  emit('deleteTag', tag)
+
+  context?.validateField?.(itemCtx?.prop)
+}
+
+function showInput() {
+  inputVisible.value = true
+  nextTick(() => {
+    InputRef.value!.input!.focus()
+  })
+}
+
+function handleInputConfirm() {
+  if (inputTag.value.trim() !== '')
+    _value.value?.push(inputTag.value)
+
+  inputVisible.value = false
+  nextTick(() => {
+    inputTag.value = ''
+  })
+}
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-0.5">
+    <template v-for="tag in _value" :key="tag">
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        :content="tag"
+        placement="top"
+      >
+        <el-tag
+          class="mx-1 my-1"
+          :closable="!disabled"
+          :disable-transitions="false"
+          :type="isValidTag(tag) ? undefined : 'danger'"
+          @close="handleCloseTag(tag)"
+        >
+          <div class="max-w-150px truncate py-1">
+            {{ tag }}
+          </div>
+        </el-tag>
+      </el-tooltip>
+    </template>
+    <el-input
+      v-show="inputVisible"
+      ref="InputRef"
+      v-model="inputTag"
+      class="my-1 w-100px!"
+      size="small"
+      :maxlength="maxLengthItem"
+      :disabled="disabled"
+      @keyup.enter="handleInputConfirm"
+      @blur="handleInputConfirm"
+    />
+    <div :class="{ '[&_.el-button--small]:!ml-1': _value.length > 0 }" class="mb-1">
+      <el-button
+        v-if="_value.length < props.maxItem"
+        type="button"
+        class="button-new-tag"
+        size="small"
+        :disabled="disabled"
+        @click="showInput"
+      >
+        + {{ label || t('newTag') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<i18n lang="yaml" global>
+en:
+  newTag: New Tag
+  validate:
+    accentedCharacters: Tag can not contain accented characters and spaces
+    duplicate: Tag can not contain duplicate
+    itemLength: Tag can not contain more than {0} characters
+    length: Tags can not contain more than 3 tags
+    required: Please input tag
+    specialCharacters: Tag can not contain special characters
+vi:
+  newTag: Thẻ mới
+  validate:
+    accentedCharacters: Thẻ không được chứa ký tự có dấu và khoảng cách
+    duplicate: Danh sách thẻ không được trùng lặp nhau
+    itemLength: Thẻ không vượt quá {0} ký tự
+    length: Danh sách thẻ không quá 3 thẻ
+    required: Vui lòng tạo thẻ
+    specialCharacters: Thẻ không được chứ ký tự đặc biệt
+</i18n>

package/src/components/Input/index.ts

@@ -0,0 +1 @@
+export { default as SSInputTags } from './InputTags.vue'

package/src/components/MainDefaultLayout/index.vue

@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import '../../assets/global.css'
+import type { RouteRecordRaw } from 'vue-router'
+import viVN from 'element-plus/es/locale/lang/vi'
+import enEN from 'element-plus/es/locale/lang/en'
+import { bus } from 'wujie'
+import GlobalASide from '../DefaultLayout/GlobalASide.vue'
+import GlobalHeader from '../DefaultLayout/GlobalHeader.vue'
+
+const props = withDefaults(defineProps<{
+  namespace?: string
+  asideWidth?: number
+  name?: string
+  routes: RouteRecordRaw[]
+  logoSrc?: string
+  padding?: number
+  layoutMode?: 'vertical' | 'horizontal' | string
+  version: string
+  zIndex?: number
+}>(), { padding: 12 })
+
+const { locale } = useI18n({
+  useScope: 'global',
+})
+
+const viVNCustom = { ...viVN }
+viVNCustom.el.datepicker.year = ''
+
+const localeConfig = computed(() => locale.value === 'vi' ? viVN : enEN)
+const layoutMode = useVModel(props, 'layoutMode', undefined, { defaultValue: 'vertical', passive: true })
+
+const wujieProps = window.$wujie?.props
+
+const showAside = computed(() => layoutMode?.value === 'vertical')
+
+useProvideLayoutStore({
+  ...toRefs(props),
+  layoutMode,
+})
+
+watch(layoutMode, (newValue, oldValue) => {
+  bus.$emit('__SET_STATE__', {
+    meta: {
+      layoutMode: newValue === 'horizontal' ? 'vertical' : 'horizontal',
+    },
+  })
+})
+
+// Chunk error
+
+useNuxtApp().hook('app:chunkError', () => {
+  window.location.reload()
+})
+</script>
+
+<template>
+  <el-config-provider :locale="localeConfig" :z-index="zIndex">
+    <el-container class="h-full w-full">
+      <GlobalASide v-if="showAside">
+        <template #header>
+          <slot name="aside-header" />
+        </template>
+        <template #content>
+          <slot name="aside-content" />
+        </template>
+        <template #extra>
+          <slot name="extra" />
+        </template>
+        <template #footer>
+          <slot name="aside-footer" />
+        </template>
+      </GlobalASide>
+      <el-container>
+        <el-header v-if="!showAside && wujieProps?.header !== false" :style="`--${ns}-header-padding: 0px;`">
+          <GlobalHeader>
+            <template #logo>
+              <slot name="logo" />
+            </template>
+          </GlobalHeader>
+        </el-header>
+        <el-main
+          id="main-container"
+          class="relative bg-fill"
+          :style="{
+            [`--el-main-padding`]: `${padding}px`,
+          }"
+        >
+          <slot />
+        </el-main>
+      </el-container>
+    </el-container>
+  </el-config-provider>
+</template>
+
+<style>
+.el-notification__content {
+  text-align: left !important;
+}
+
+.el-table .cell {
+  word-break: break-word !important;
+}
+</style>
+
+<i18n lang="yaml" global>
+en:
+  global:
+    loading: Loading...
+    went_wrong: Something went wrong, please try again later
+    error: Error
+  '403':
+    messsage_mutation: Your account is currently view-only and does not have editing permissions
+vi:
+  global:
+    loading: Đang tải...
+    went_wrong: Có lỗi xảy ra, vui lòng thử lại sau
+    error: Lỗi
+  '403':
+    messsage_mutation: Tài khoản của bạn hiện ở chế độ chỉ xem và không có quyền chỉnh sửa
+</i18n>