@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/context-menu/ContextMenuSubTrigger.vue

@@ -1,33 +1,33 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import {
-  ContextMenuSubTrigger,
-  type ContextMenuSubTriggerProps,
-  useForwardProps,
-} from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
-
-const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <ContextMenuSubTrigger
-    v-bind="forwardedProps"
-    :class="cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-      inset && 'pl-8',
-      props.class,
-    )"
-  >
-    <slot />
-    <ChevronRight class="ml-auto h-4 w-4" />
-  </ContextMenuSubTrigger>
-</template>
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  ContextMenuSubTrigger,
+  type ContextMenuSubTriggerProps,
+  useForwardProps,
+} from 'radix-vue'
+import { ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </ContextMenuSubTrigger>
+</template>

package/src/components/context-menu/ContextMenuTrigger.vue

@@ -1,13 +1,13 @@
-<script setup lang="ts">
-import { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'
-
-const props = defineProps<ContextMenuTriggerProps>()
-
-const forwardedProps = useForwardProps(props)
-</script>
-
-<template>
-  <ContextMenuTrigger v-bind="forwardedProps">
-    <slot />
-  </ContextMenuTrigger>
-</template>
+<script setup lang="ts">
+import { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'radix-vue'
+
+const props = defineProps<ContextMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <ContextMenuTrigger v-bind="forwardedProps">
+    <slot />
+  </ContextMenuTrigger>
+</template>

package/src/components/context-menu/index.ts

@@ -1,14 +1,14 @@
-export { default as ContextMenu } from './ContextMenu.vue'
-export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'
-export { default as ContextMenuContent } from './ContextMenuContent.vue'
-export { default as ContextMenuGroup } from './ContextMenuGroup.vue'
-export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
-export { default as ContextMenuItem } from './ContextMenuItem.vue'
-export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
-export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
-export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
-export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
-export { default as ContextMenuLabel } from './ContextMenuLabel.vue'
-export { default as ContextMenuSub } from './ContextMenuSub.vue'
-export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
-export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'
+export { default as ContextMenu } from './ContextMenu.vue'
+export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'
+export { default as ContextMenuContent } from './ContextMenuContent.vue'
+export { default as ContextMenuGroup } from './ContextMenuGroup.vue'
+export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
+export { default as ContextMenuItem } from './ContextMenuItem.vue'
+export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
+export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
+export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
+export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
+export { default as ContextMenuLabel } from './ContextMenuLabel.vue'
+export { default as ContextMenuSub } from './ContextMenuSub.vue'
+export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
+export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'

package/src/components/dashboard/SSDashboard.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+interface Props {
+  // Documentation props
+  doc?: {
+    productName: string
+    productType: string
+    data: Array<{ title: string, url: string }>
+    getStarted: Array<{ title: string, url: string, description: string }>
+    seeMore?: { description: string, title: string, url: string }
+  }
+  hideFilter?: boolean
+}
+
+const { doc } = defineProps<Props>()
+
+const dateRange = defineModel<{
+  dateRange: [string, string]
+}>()
+const elGuideline = useTemplateRef('elGuideline')
+const { height: heightGuideline } = useElementSize(elGuideline)
+const elInfo = useTemplateRef('elInfo')
+const { height: heightInfo } = useElementSize(elInfo)
+const timeRange = computed(() => {
+  const now = dayjs().tz(TIMEZONE_USER.value)
+  const offset = dayjs().tz(TIMEZONE_USER.value).format('Z') // e.g. "+07:00"
+  return `<strong>${now.format('YYYY-MM-DD')}</strong> (UTC${offset.startsWith('-') ? '-' : '+'}${offset.replace(/^[-+]/, '')})`
+})
+</script>
+
+<template>
+  <div class="h-full">
+    <div
+      class="mb-2 w-full flex flex-1 gap-2"
+      :style="{ height: `calc(100% - ${(heightGuideline + 10) > 220 ? 220 : heightGuideline + 10}px)` }"
+    >
+      <!-- Main Content Card -->
+      <el-card class="w-full [&_.el-card\_\_header]:py-1" body-class="p-2 h-full">
+        <!-- Common Header -->
+        <template #header>
+          <div class="w-full flex flex-wrap items-center justify-between">
+            <div class="text-lg font-bold">
+              <!-- Title slot with default -->
+              <slot name="title">
+                {{ $t('Dashboard.overview') }}
+              </slot>
+            </div>
+            <!-- Filter slot with default date range filter -->
+            <slot name="filter">
+              <SSFilterTimeDimensionsSingle v-if="!hideFilter" v-model="dateRange" />
+              <span v-else class="text-sm" v-html="timeRange" />
+            </slot>
+          </div>
+        </template>
+
+        <!-- Main Content Area -->
+        <div class="h-[calc(100%)] min-h-230px overflow-y-auto">
+          <!-- Default slot for main content -->
+          <slot />
+          <div ref="elInfo">
+            <slot name="info" />
+          </div>
+          <div
+            class="min-h-200px w-full flex justify-center gap-12px pl-2"
+            :style="{ height: `calc(100% - ${heightInfo + 8}px)` }"
+          >
+            <slot name="chart" />
+          </div>
+        </div>
+      </el-card>
+
+      <!-- Common Documentation Sidebar -->
+      <SSDashboardDocument v-if="doc" v-bind="doc" />
+    </div>
+
+    <!-- Common Guidelines -->
+    <SSDashboardGuideline v-show="doc" v-bind="doc" ref="elGuideline" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/dashboard/SSDashboardChartRoot.vue

@@ -1,18 +1,18 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  title: string
-  description: string
-}>()
-</script>
-
-<template>
-  <div class="grid border-t border-border">
-    <div tag="b" class="mt-2 text-lg font-bold">
-      {{ title }}
-    </div>
-    <div v-if="description" class="mb-2 mt-1 text-sm">
-      {{ description }}
-    </div>
-    <slot />
-  </div>
-</template>
+<script lang="ts" setup>
+const props = defineProps<{
+  title: string
+  description: string
+}>()
+</script>
+
+<template>
+  <div class="border-t border-border pt-2">
+    <el-text size="large" tag="b">
+      {{ title }}
+    </el-text>
+    <el-text v-if="description" size="small">
+      ({{ description }})
+    </el-text>
+    <slot />
+  </div>
+</template>

package/src/components/dashboard/SSDashboardDocument.vue

@@ -1,45 +1,45 @@
-<script lang="ts" setup>
-defineProps<{
-  productName: string
-  productType: string
-  data: {
-    title: string
-    url: string
-  }[]
-  getStarted: {
-    title: string
-    url: string
-    description: string
-  }[]
-  seeMore: {
-    description: string
-    title: string
-    url: string
-  }
-}>()
-</script>
-
-<template>
-  <el-card class="w-400px" style="--el-card-padding: 12px">
-    <template #header>
-      <div class="flex items-center justify-between">
-        <div class="text-lg font-bold">
-          {{ $t('Dashboard.documentation') }}
-        </div>
-        <div class="cursor-pointer text-base text-primary font-semibold">
-          <a :href="seeMore?.url" target="_blank">
-            {{ $t('Dashboard.see_more') }}
-          </a>
-        </div>
-      </div>
-    </template>
-
-    <ul class="cursor-pointer list-disc list-inside text-primary text-primary font-semibold">
-      <li v-for="(item, index) in data" :key="index" class="text-pretty">
-        <a :href="item.url" target="_blank">
-          {{ item.title }}
-        </a>
-      </li>
-    </ul>
-  </el-card>
-</template>
+<script lang="ts" setup>
+defineProps<{
+  productName: string
+  productType: string
+  data: {
+    title: string
+    url: string
+  }[]
+  getStarted: {
+    title: string
+    url: string
+    description: string
+  }[]
+  seeMore: {
+    description: string
+    title: string
+    url: string
+  }
+}>()
+</script>
+
+<template>
+  <el-card class="w-350px 2xl:w-400px [&_.el-card\_\_header]:py-1.5">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="text-lg font-bold">
+          {{ $t('Dashboard.documentation') }}
+        </div>
+        <div class="cursor-pointer text-sm text-primary font-semibold 2xl:text-base">
+          <a :href="seeMore?.url" target="_blank">
+            {{ $t('Dashboard.see_more') }}
+          </a>
+        </div>
+      </div>
+    </template>
+
+    <ul class="cursor-pointer list-disc list-inside text-sm text-primary text-primary font-semibold 2xl:text-base">
+      <li v-for="(item, index) in data" :key="index" class="text-pretty">
+        <a :href="item.url" target="_blank">
+          {{ item.title }}
+        </a>
+      </li>
+    </ul>
+  </el-card>
+</template>

package/src/components/dashboard/SSDashboardEmpty.vue

@@ -1,16 +1,16 @@
-<script lang="ts" setup>
-
-</script>
-
-<template>
-  <el-empty>
-    <template #description>
-      <strong>
-        {{ $t('base.no_data') }}
-      </strong>
-      <p class="text-sm text-text-primary">
-        {{ $t('base.there_is_no_data_to_display') }}
-      </p>
-    </template>
-  </el-empty>
-</template>
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <el-empty>
+    <template #description>
+      <strong>
+        {{ $t('base.no_data') }}
+      </strong>
+      <p class="text-sm text-text-primary">
+        {{ $t('base.there_is_no_data_to_display') }}
+      </p>
+    </template>
+  </el-empty>
+</template>

package/src/components/dashboard/SSDashboardGuideline.vue

@@ -1,45 +1,45 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  productName: string
-  productType: string
-  data: {
-    title: string
-    url: string
-  }[]
-  getStarted: {
-    title: string
-    url: string
-    description: string
-  }[]
-}>()
-const active = computed(() => props.getStarted?.length)
-</script>
-
-<template>
-  <el-card class="min-h-240px [&_.el-card\_\_body]:(p-20px)" style="--el-card-padding: 12px">
-    <template #header>
-      <div class="text-lg font-bold">
-        {{ $t('Dashboard.getting_started') }}
-      </div>
-    </template>
-
-    <el-steps
-      :active="active"
-      align-center
-      class="[&_.el-step\_\_title]:(text-base text-text-primary font-bold) [&_.el-step\_\_description.is-finish]:text-text-primary [&_.el-step\_\_description]:(px-30px!)"
-    >
-      <el-step v-for="(item, i) in getStarted" :key="i" :title="item.title">
-        <template #description>
-          <div class="mt-2 text-xs text-text-secondary font-semibold">
-            {{ item.description }}
-          </div>
-          <div class="cursor-pointer text-sm text-primary font-semibold underline">
-            <a :href="item.url" target="_blank">
-              {{ $t('base.learn_more') }}
-            </a>
-          </div>
-        </template>
-      </el-step>
-    </el-steps>
-  </el-card>
-</template>
+<script lang="ts" setup>
+const props = defineProps<{
+  productName: string
+  productType: string
+  data: {
+    title: string
+    url: string
+  }[]
+  getStarted: {
+    title: string
+    url: string
+    description: string
+  }[]
+}>()
+const active = computed(() => props.getStarted?.length)
+</script>
+
+<template>
+  <el-card class="min-h-180px [&_.el-card\_\_body]:(p-20px) [&_.el-card\_\_header]:py-1.5">
+    <template #header>
+      <div class="text-lg font-bold">
+        {{ $t('Dashboard.getting_started') }}
+      </div>
+    </template>
+
+    <el-steps
+      :active="active"
+      align-center
+      class="[&_.el-step\_\_title]:(text-sm text-text-primary font-bold 2xl:text-base) [&_.el-step\_\_description.is-finish]:text-text-primary [&_.el-step\_\_description]:(px-30px!)"
+    >
+      <el-step v-for="(item, i) in getStarted" :key="i" :title="item.title">
+        <template #description>
+          <div class="mt-2 text-xs text-text-secondary font-semibold">
+            {{ item.description }}
+          </div>
+          <div class="cursor-pointer text-sm text-primary font-semibold underline">
+            <a :href="item.url" target="_blank">
+              {{ $t('base.learn_more') }}
+            </a>
+          </div>
+        </template>
+      </el-step>
+    </el-steps>
+  </el-card>
+</template>

package/src/components/dashboard/SSDashboardInfo.vue

@@ -1,36 +1,36 @@
-<script lang="ts" setup>
-import Vue3Odometer from 'vue3-odometer'
-
-defineOptions({
-  inheritAttrs: false,
-})
-defineProps<{ label: string, value: any, suffix?: string }>()
-const mounted = useMounted()
-</script>
-
-<template>
-  <div v-if="mounted" class="flex flex-col justify-between pl-2">
-    <div class="text-lg font-bold">
-      {{ label }}
-    </div>
-    <div class="flex items-center gap-1 font-semibold">
-      <Vue3Odometer
-        class="text-3xl text-primary font-semibold font-sans! underline! underline-2px! underline-primary! underline-offset-4!"
-        :value="value"
-        format="d"
-        v-bind="$attrs"
-        :class="[mounted ? 'odemeter' : '']"
-      />
-      <span v-if="suffix" class="text-30px text-primary">{{ suffix }}</span>
-    </div>
-  </div>
-</template>
-
-<style>
-.odometer-value {
-  text-decoration-line: underline;
-  text-decoration-thickness: 2px;
-  text-decoration-color: var(--el-color-primary);
-  text-underline-offset: 4px;
-}
-</style>
+<script lang="ts" setup>
+import Vue3Odometer from 'vue3-odometer'
+
+defineOptions({
+  inheritAttrs: false,
+})
+defineProps<{ label: string, value: any, suffix?: string }>()
+const mounted = useMounted()
+</script>
+
+<template>
+  <div v-if="mounted" class="flex flex-col justify-between pl-2">
+    <div class="text-sm font-bold 2xl:text-base">
+      {{ label }}
+    </div>
+    <div class="flex items-center gap-1 font-semibold">
+      <Vue3Odometer
+        class="text-xl text-primary font-semibold font-sans! underline! underline-2px! underline-primary! underline-offset-4!"
+        :value="value"
+        format="d"
+        v-bind="$attrs"
+        :class="[mounted ? 'odemeter' : '']"
+      />
+      <span v-if="suffix" class="text-2xl text-primary">{{ suffix }}</span>
+    </div>
+  </div>
+</template>
+
+<style>
+.odometer-value {
+  text-decoration-line: underline;
+  text-decoration-thickness: 2px;
+  text-decoration-color: var(--el-color-primary);
+  text-underline-offset: 4px;
+}
+</style>

package/src/components/dashboard/SSDashboardInfoRoot.vue

@@ -1,9 +1,9 @@
-<script lang="ts" setup>
-import 'odometer/themes/odometer-theme-default.css'
-</script>
-
-<template>
-  <div class="grid grid-cols-3 gap-x-10 gap-y-5 divide-x divide-border">
-    <slot />
-  </div>
-</template>
+<script lang="ts" setup>
+import 'odometer/themes/odometer-theme-default.css'
+</script>
+
+<template>
+  <div class="grid grid-cols-3 gap-x-10 gap-y-5 divide-x divide-border">
+    <slot />
+  </div>
+</template>

package/src/components/dashboard/SSDashboardInfoTime.vue

@@ -1,38 +1,38 @@
-<script lang="ts" setup>
-import Vue3Odometer from 'vue3-odometer'
-
-defineOptions({
-  inheritAttrs: false,
-})
-defineProps<{ label: string, value?: any, onClick?: () => void }>()
-</script>
-
-<template>
-  <div class="flex flex-col justify-between pl-4">
-    <div class="text-lg font-bold" :class="[Boolean(onClick) && 'cursor-pointer hover:text-primary']" @click="onClick">
-      {{ label }}
-    </div>
-    <div class="flex items-end gap-1 font-semibold">
-      <Vue3Odometer
-        class="cursor-pointer text-3xl text-primary font-semibold font-sans! underline! underline-2px! underline-primary! underline-offset-4!"
-        :value="value?.hour"
-        format="d"
-      />
-      <span class="text-18px text-primary leading-32px">H</span>
-
-      <Vue3Odometer
-        class="cursor-pointer text-3xl text-primary font-semibold font-sans! underline! underline-2px! underline-primary! underline-offset-4!"
-        :value="value?.minute"
-        format="d"
-      />
-      <span class="text-18px text-primary leading-32px">M</span>
-
-      <Vue3Odometer
-        class="cursor-pointer text-3xl text-primary font-semibold font-sans! underline! underline-2px! underline-primary! underline-offset-4!"
-        :value="value?.seconds"
-        format="d"
-      />
-      <span class="text-18px text-primary leading-32px">S</span>
-    </div>
-  </div>
-</template>
+<script lang="ts" setup>
+import Vue3Odometer from 'vue3-odometer'
+
+defineOptions({
+  inheritAttrs: false,
+})
+defineProps<{ label: string, value?: any, onClick?: () => void }>()
+</script>
+
+<template>
+  <div class="flex flex-col justify-between pl-4">
+    <div class="text-sm font-bold 2xl:text-base" :class="[Boolean(onClick) && 'cursor-pointer hover:text-primary']" @click="onClick">
+      {{ label }}
+    </div>
+    <div class="flex items-end gap-1 font-semibold">
+      <Vue3Odometer
+        class="cursor-pointer text-xl text-primary font-semibold font-sans! underline! underline-2px! underline-primary! underline-offset-4!"
+        :value="value?.hour"
+        format="d"
+      />
+      <span class="text-14px text-primary leading-32px">H</span>
+
+      <Vue3Odometer
+        class="cursor-pointer text-xl text-primary font-semibold font-sans! underline! underline-2px! underline-primary! underline-offset-4!"
+        :value="value?.minute"
+        format="d"
+      />
+      <span class="text-14px text-primary leading-32px">M</span>
+
+      <Vue3Odometer
+        class="cursor-pointer text-xl text-primary font-semibold font-sans! underline! underline-2px! underline-primary! underline-offset-4!"
+        :value="value?.seconds"
+        format="d"
+      />
+      <span class="text-14px text-primary leading-32px">S</span>
+    </div>
+  </div>
+</template>