@sigmaott/base-next 1.0.6

package/src/components/dashboard/SSDashboardGuideline.vue

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

package/src/components/dashboard/SSDashboardInfo.vue

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

package/src/components/dashboard/SSDashboardInfoRoot.vue

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

package/src/components/dashboard/SSDashboardInfoTime.vue

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

package/src/components/markdown/Markdown.vue

@@ -0,0 +1,295 @@
+<script lang="ts">
+import type { Options as DeepMergeOptions } from 'deepmerge'
+import type { Element, Root, RootContent } from 'hast'
+import type { Options } from 'rehype-sanitize'
+import type { PropType, VNodeArrayChildren } from 'vue'
+import deepmerge from 'deepmerge'
+import { selectAll } from 'hast-util-select'
+import { find, html } from 'property-information'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import { unified } from 'unified'
+import { defineComponent, h } from 'vue'
+
+interface Context {
+  listDepth: number
+  listOrdered: boolean
+  listItemIndex: number
+  currentContext?: string
+}
+type Attributes = Record<string, any>
+type CustomAttrsValue = Record<string, any>
+type CustomAttrsFunctionValue = (node: Element, combinedAttrs: Attributes) => Record<string, CustomAttrsValue>
+export type CustomAttrs = Record<string, CustomAttrsValue | CustomAttrsFunctionValue>
+type AliasList = string[]
+
+export interface SanitizeOptions {
+  sanitizeOptions?: Options
+  mergeOptions?: DeepMergeOptions
+}
+
+export default defineComponent({
+  name: 'UiMarkdown',
+  props: {
+    markdown: {
+      type: String,
+      default: '',
+    },
+    customAttrs: {
+      type: Object as PropType<CustomAttrs>,
+      default: () => ({}),
+    },
+    remarkPlugins: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+    rehypePlugins: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+    sanitize: {
+      type: Boolean,
+      default: false,
+    },
+    sanitizeOptions: {
+      type: Object as PropType<SanitizeOptions>,
+      default: () => ({}),
+    },
+    iframeSandbox: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { slots, attrs }) {
+    const processor = unified()
+      .use(remarkParse)
+      .use(props.remarkPlugins)
+      .use(remarkRehype, { allowDangerousHtml: true })
+      .use(rehypeRaw)
+      .use(props.rehypePlugins)
+      .use(
+        props.sanitize
+          ? [
+              [
+                rehypeSanitize,
+                deepmerge(
+                  defaultSchema,
+                  props.sanitizeOptions.sanitizeOptions || {},
+                  props.sanitizeOptions.mergeOptions || {},
+                ),
+              ],
+            ]
+          : [],
+      )
+
+    const computeCustomAttrs = (node: Element, aliasList: AliasList, combinedAttrs: Attributes) => {
+      for (let i = aliasList.length - 1; i >= 0; i--) {
+        const name = aliasList[i]
+        if (name in props.customAttrs) {
+          const customAttrs = props.customAttrs[name]
+
+          return typeof customAttrs === 'function' ? customAttrs(node, combinedAttrs) : customAttrs
+        }
+      }
+      return {}
+    }
+
+    const parseChildren = (nodeList: RootContent[], context: Context, parent: Element | Root): VNodeArrayChildren => {
+      const keyCounter: {
+        [key: string]: number
+      } = {}
+
+      return nodeList.map((node) => {
+        const aliasList: AliasList = []
+        let attrs = {}
+        const props: Attributes = {}
+        const thisContext = { ...context }
+
+        switch (node.type) {
+          case 'text':
+            return [node.value]
+
+          case 'element': {
+            aliasList.push(node.tagName)
+            keyCounter[node.tagName] = node.tagName in keyCounter ? keyCounter[node.tagName] + 1 : 0
+            props.key = `${node.tagName}-${keyCounter[node.tagName]}`
+            node.properties = node.properties || {}
+
+            attrs = Object.entries(node.properties).reduce<Attributes>((acc, [hastKey, value]) => {
+              const attrInfo = find(html, hastKey)
+              acc[attrInfo.attribute] = value
+
+              return acc
+            }, {})
+
+            switch (node.tagName) {
+              case 'h1':
+              case 'h2':
+              case 'h3':
+              case 'h4':
+              case 'h5':
+              case 'h6':
+                props.level = Number.parseFloat(node.tagName.slice(1))
+                aliasList.push('heading')
+                break
+
+              case 'code':
+                props.languageOriginal = Array.isArray(props.class)
+                  ? props.class.find(cls => cls.startsWith('language-'))
+                  : ''
+                props.language = props.languageOriginal ? props.languageOriginal.replace('language-', '') : ''
+                props.inline = 'tagName' in parent && parent.tagName !== 'pre'
+                aliasList.push(props.inline ? 'inline-code' : 'block-code')
+                break
+
+              case 'thead':
+              case 'tbody':
+                thisContext.currentContext = node.tagName
+                break
+
+              case 'td':
+              case 'th':
+              case 'tr':
+                props.isHead = context.currentContext === 'thead'
+                break
+
+              case 'ul':
+              case 'ol':
+                thisContext.listDepth = context.listDepth + 1
+                thisContext.listOrdered = node.tagName === 'ol'
+                thisContext.listItemIndex = -1
+                props.ordered = thisContext.listOrdered
+                props.depth = thisContext.listDepth
+                aliasList.push('list')
+                break
+
+              case 'li':
+                thisContext.listItemIndex++
+                props.ordered = thisContext.listOrdered
+                props.depth = thisContext.listDepth
+                props.index = thisContext.listItemIndex
+                aliasList.push('list-item')
+                break
+
+              case 'slot':
+                if (typeof node.properties.name === 'string') {
+                  aliasList.push(node.properties.name)
+                  delete node.properties.name
+                }
+                break
+
+              case 'br': {
+                node.tagName = 'div'
+                attrs = { class: 'ui-br' }
+                break
+              }
+
+              default:
+                break
+            }
+            break
+          }
+
+          default:
+            return null
+        }
+
+        attrs = {
+          ...attrs,
+          ...computeCustomAttrs(node, aliasList, { ...attrs, ...props }),
+        }
+
+        for (let i = aliasList.length - 1; i >= 0; i--) {
+          const targetSlot = slots[aliasList[i]]
+          const targetSlotRender = typeof targetSlot === 'function' ? targetSlot : null
+          if (targetSlotRender) {
+            return targetSlotRender({
+              ...attrs,
+              ...props,
+              children: () => parseChildren(node.children, thisContext, node),
+            })
+          }
+        }
+
+        return h(node.tagName, attrs, parseChildren(node.children, thisContext, node))
+      })
+    }
+
+    const processMarkdownContent = (content: string) => {
+      const mdast = processor.parse(content)
+      const hast = processor.runSync(mdast) as Root
+      const slots = (selectAll('slot[id]', hast) as Element[]).reverse()
+      const slotsGrouped = slots.reduce((acc, slot) => {
+        const id = slot.properties.id as string
+        if (!acc[id])
+          acc[id] = []
+        acc[id].push(slot)
+        return acc
+      }, {} as Record<string, Element[]>)
+
+      let processedContent = content
+      const slotsToRemove = Object.values(slotsGrouped)
+        .map(slots => slots.slice(1))
+        .flat()
+
+      for (const slot of slotsToRemove) {
+        if (slot.position?.start?.offset != null && slot.position?.end?.offset != null) {
+          processedContent = processedContent.slice(0, slot.position.start.offset)
+          + processedContent.slice(slot.position.end.offset)
+        }
+      }
+
+      const finalHast = processor.runSync(processor.parse(processedContent)) as Root
+      return h(
+        'div',
+        attrs,
+        parseChildren(finalHast.children, { listDepth: -1, listOrdered: false, listItemIndex: -1 }, finalHast),
+      )
+    }
+
+    return () => {
+      const markdown = props.markdown
+
+      // Extract HTML content if exists and get its position
+      const htmlMatch = markdown.match(/<!DOCTYPE html>[\s\S]*?<\/html>/i)
+      const elements: VNodeArrayChildren = []
+
+      if (htmlMatch) {
+        const htmlContent = htmlMatch[0]
+        const htmlStartIndex = htmlMatch.index!
+        const htmlEndIndex = htmlStartIndex + htmlContent.length
+
+        // Process markdown content before HTML
+        const beforeHtml = markdown.slice(0, htmlStartIndex).trim()
+        if (beforeHtml) {
+          elements.push(processMarkdownContent(beforeHtml))
+        }
+
+        // Add iframe for HTML content
+        elements.push(
+          h('iframe', {
+            srcDoc: htmlContent,
+            style: 'width: 100%; border: none; min-height: 500px;',
+            sandbox: props.iframeSandbox,
+            class: attrs.class,
+          }),
+        )
+
+        // Process markdown content after HTML
+        const afterHtml = markdown.slice(htmlEndIndex).trim()
+        if (afterHtml) {
+          elements.push(processMarkdownContent(afterHtml))
+        }
+      }
+      else {
+        // If no HTML content, process entire markdown
+        elements.push(processMarkdownContent(markdown))
+      }
+
+      return elements
+    }
+  },
+})
+</script>

package/src/components/tabs/Tabs.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

package/src/components/tabs/TabsContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring"
+    :class="[props.class]"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/src/components/tabs/TabsList.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { TabsList, type TabsListProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    class="inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground"
+    :class="[props.class]"
+  >
+    <slot />
+  </TabsList>
+</template>

package/src/components/tabs/TabsTrigger.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all disabled:pointer-events-none data-[state=active]:bg-background data-[state=active]:text-foreground disabled:opacity-50 data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring"
+    :class="[props.class]"
+  >
+    <span class="truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>

package/src/composables/asset.ts

@@ -0,0 +1,13 @@
+import { QueryKeys } from '../enums/index'
+
+export function useAssetDetail(_assetId: MaybeRefOrGetter<string>, queryKeys?: MaybeRef<string>[] = [], _disabled?: MaybeRefOrGetter<boolean>) {
+  const assetId = toRef(_assetId)
+  const disabled = toRef(_disabled)
+
+  return useQuery({
+    queryKey: [QueryKeys.ASSET, assetId, ...queryKeys],
+    queryFn: () => $libraryApi('api/library/assets/{id}', { pathParams: { id: assetId.value } }),
+    enabled: computed(() => (!!assetId.value && !disabled.value)),
+    refetchOnWindowFocus: false,
+  })
+}