@globalbrain/sefirot 3.50.0 → 4.0.0-0

package/config/nuxt.d.ts

@@ -0,0 +1,4 @@
+// @ts-ignore
+declare const defineConfig: import('nuxt/config').DefineNuxtConfig
+
+export { defineConfig }

package/config/nuxt.js

@@ -0,0 +1,31 @@
+// @ts-check
+
+import { fileURLToPath } from 'node:url'
+import icons from 'unplugin-icons/nuxt'
+import { mergeConfig } from 'vite'
+import { baseConfig as baseViteConfig } from './vite.js'
+
+delete baseViteConfig.plugins
+delete baseViteConfig.resolve?.alias
+
+export const baseConfig = {
+  alias: { sefirot: fileURLToPath(new URL('../lib', import.meta.url)) },
+  app: { teleportId: 'sefirot-modals' },
+  modules: [
+    /**
+     * @param {any} _
+     * @param {any} nuxt
+     */
+    function (_, nuxt) {
+      // eslint-disable-next-line @typescript-eslint/no-invalid-this
+      return icons.bind(this, { scale: 1 }, nuxt)()
+    }
+  ],
+  postcss: { plugins: { 'postcss-nested': {} } },
+  telemetry: false,
+  vite: baseViteConfig
+}
+
+export function defineConfig(config = {}) {
+  return mergeConfig(baseConfig, config)
+}

package/config/vite.d.ts

@@ -0,0 +1,8 @@
+declare const baseConfig: import('vite').UserConfig
+
+declare function defineConfig(config?: import('vite').UserConfig): import('vite').UserConfig
+declare function defineConfig(config?: Promise<import('vite').UserConfig>): Promise<import('vite').UserConfig>
+declare function defineConfig(config?: import('vite').UserConfigFnObject): import('vite').UserConfigFnObject
+declare function defineConfig(config?: import('vite').UserConfigExport): import('vite').UserConfigExport
+
+export { baseConfig, defineConfig }

package/config/vite.js

@@ -0,0 +1,69 @@
+// @ts-check
+
+/**
+ * Adapted from
+ * @see https://github.com/unplugin/unplugin-icons/blob/67fd9b7791dc1754cb8dc46b854b22c8bb4cf380/src/core/compilers/vue3.ts
+ * @see https://github.com/unplugin/unplugin-icons/blob/639ec9691e022e52c641d0f96f585dbf04dab095/src/core/svgId.ts
+ *
+ * Original licenses:
+ *
+ * Copyright (c) 2020 Anthony Fu <https://github.com/antfu>
+ * @license MIT
+ */
+
+import { fileURLToPath } from 'node:url'
+import icons from 'unplugin-icons/vite'
+import { mergeConfig } from 'vite'
+
+/** @type {import('vite').UserConfig} */
+export const baseConfig = {
+  plugins: [icons({ scale: 1 })],
+
+  resolve: {
+    alias: { 'sefirot/': fileURLToPath(new URL('../lib/', import.meta.url)) },
+
+    dedupe: [
+      '@sentry/browser',
+      '@tanstack/vue-virtual',
+      '@tinyhttp/content-disposition',
+      '@tinyhttp/cookie',
+      '@vue/reactivity',
+      '@vuelidate/core',
+      '@vuelidate/validators',
+      '@vueuse/core',
+      'body-scroll-lock',
+      'dayjs',
+      'file-saver',
+      'fuse.js',
+      'lodash-es',
+      'markdown-it',
+      'normalize.css',
+      'ofetch',
+      'pinia',
+      'qs',
+      'v-calendar',
+      'vue-router',
+      'vue'
+    ]
+  },
+
+  ssr: { noExternal: [/sentry/] },
+
+  optimizeDeps: {
+    include: [
+      'dayjs',
+      'dayjs/plugin/relativeTime',
+      'dayjs/plugin/timezone',
+      'dayjs/plugin/utc',
+      'markdown-it'
+    ]
+  }
+}
+
+/**
+ * @param {import('vite').UserConfigExport} config
+ */
+export function defineConfig(config = {}) {
+  return async (/** @type {import("vite").ConfigEnv} */ configEnv) =>
+    mergeConfig(baseConfig, await (typeof config === 'function' ? config(configEnv) : config))
+}

package/lib/components/SActionList.vue

@@ -16,7 +16,6 @@ defineProps<{
       :key="index"
       :lead-icon="item.leadIcon"
       :label="item.label"
-      :text="item.text"
       :link="item.link"
       :disabled="item.disabled"
       :tooltip="item.tooltip"

package/lib/components/SActionListItem.vue

@@ -1,26 +1,18 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { computed } from 'vue'
+import { type Component, computed } from 'vue'
 import SButton, { type Tooltip } from './SButton.vue'
 
 export interface ActionListItem {
-  leadIcon?: IconifyIcon
+  leadIcon?: Component
   link?: string
   label?: string
   disabled?: boolean
   tooltip?: Tooltip
   onClick?: () => void
-
-  /** @deprecated Use `:label` instead. */
-  text?: string
 }
 
 const props = defineProps<ActionListItem>()
 
-const _label = computed(() => {
-  return props.label ?? props.text
-})
-
 const _tooltip = computed<Tooltip | undefined>(() => {
   return props.tooltip ? { display: 'block', ...props.tooltip } : undefined
 })
@@ -33,7 +25,7 @@ const _tooltip = computed<Tooltip | undefined>(() => {
       size="small"
       type="text"
       :icon="leadIcon"
-      :label="_label"
+      :label="label"
       :href="link"
       :disabled="disabled"
       :tooltip="_tooltip"

package/lib/components/SAlert.vue

@@ -1,28 +1,23 @@
 <script setup lang="ts">
-import IconSuccess from '@iconify-icons/ph/check-bold'
-import IconInfo from '@iconify-icons/ph/info-bold'
-import IconWarning from '@iconify-icons/ph/warning-bold'
-import IconDanger from '@iconify-icons/ph/warning-octagon-bold'
-import SIcon from './SIcon.vue'
+import IconCheck from '~icons/ph/check-bold'
+import IconInfo from '~icons/ph/info-bold'
+import IconWarning from '~icons/ph/warning-bold'
+import IconWarningOctagon from '~icons/ph/warning-octagon-bold'
 
 withDefaults(defineProps<{
   mode?: 'info' | 'success' | 'warning' | 'danger'
 }>(), {
   mode: 'info'
 })
-
-const iconDict = {
-  info: IconInfo,
-  success: IconSuccess,
-  warning: IconWarning,
-  danger: IconDanger
-} as const
 </script>
 
 <template>
   <div class="SAlert" :class="[mode]">
     <div class="icon">
-      <SIcon :icon="iconDict[mode]" class="icon-svg" />
+      <IconInfo v-if="mode === 'info'" class="icon-svg" />
+      <IconCheck v-if="mode === 'success'" class="icon-svg" />
+      <IconWarning v-if="mode === 'warning'" class="icon-svg" />
+      <IconWarningOctagon v-if="mode === 'danger'" class="icon-svg" />
     </div>
     <div class="content">
       <slot />

package/lib/components/SButton.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { type MaybeRef, computed, unref, useSlots } from 'vue'
+import { type Component, type MaybeRef, computed, unref, useSlots } from 'vue'
 import { type Position } from '../composables/Tooltip'
 import SFragment from './SFragment.vue'
-import SIcon from './SIcon.vue'
 import SLink from './SLink.vue'
 import SSpinner from './SSpinner.vue'
 import STooltip from './STooltip.vue'
@@ -37,9 +36,9 @@ const props = defineProps<{
   size?: Size
   type?: Type
   mode?: Mode
-  icon?: any
-  leadIcon?: any
-  trailIcon?: any
+  icon?: Component
+  leadIcon?: Component
+  trailIcon?: Component
   iconMode?: Mode
   label?: string
   labelMode?: Mode
@@ -62,9 +61,9 @@ const classes = computed(() => [
   props.size ?? 'medium',
   props.type ?? 'fill',
   props.mode ?? 'default',
-  { 'has-label': props.label },
-  { 'has-lead-icon': _leadIcon.value },
-  { 'has-trail-icon': props.trailIcon },
+  { 'has-label': !!props.label },
+  { 'has-lead-icon': !!_leadIcon.value },
+  { 'has-trail-icon': !!props.trailIcon },
   { loading: props.loading },
   { rounded: props.rounded },
   { block: props.block },
@@ -115,13 +114,13 @@ function handleClick(): void {
     >
       <span class="content">
         <span v-if="_leadIcon" class="icon" :class="iconMode">
-          <SIcon :icon="_leadIcon" class="icon-svg" />
+          <component :is="_leadIcon" class="icon-svg" />
         </span>
         <span v-if="label" class="label" :class="labelMode">
           {{ label }}
         </span>
         <span v-if="trailIcon" class="icon" :class="iconMode">
-          <SIcon :icon="trailIcon" class="icon-svg" />
+          <component :is="trailIcon" class="icon-svg" />
         </span>
       </span>
 

package/lib/components/SCardBlock.vue

@@ -11,15 +11,9 @@ export type Bg =
   | 'elv-4'
   | 'none'
 
-// @deprecated Use CSS utility classes instead.
-export type Space = 'compact' | 'wide' | 'xwide'
-
 const props = withDefaults(defineProps<{
   size?: CardBlockSize
   bg?: Bg
-
-  // @deprecated Use CSS utility classes instead.
-  space?: Space
 }>(), {
   bg: 'elv-3'
 })

package/lib/components/SControlActionBarClose.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import IconX from '@iconify-icons/ph/x-bold'
 import SControlActionBarButton from './SControlActionBarButton.vue'
+import IconX from '~icons/ph/x-bold'
 
 defineProps<{
   as?: string

package/lib/components/SControlActionBarCollapse.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import IconArrowsInLineVertical from '@iconify-icons/ph/arrows-in-line-vertical-bold'
-import IconArrowsOutLineVertical from '@iconify-icons/ph/arrows-out-line-vertical-bold'
 import { computed, shallowRef } from 'vue'
 import { useCardState } from '../composables/Card'
 import SControlActionBarButton from './SControlActionBarButton.vue'
+import IconArrowsInLineVertical from '~icons/ph/arrows-in-line-vertical-bold'
+import IconArrowsOutLineVertical from '~icons/ph/arrows-out-line-vertical-bold'
 
 const props = defineProps<{
   as?: string

package/lib/components/SControlInputSearch.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import IconMagnifyingGlass from '@iconify-icons/ph/magnifying-glass-bold'
 import { computed } from 'vue'
 import { useControlSize } from '../composables/Control'
 import { useTrans } from '../composables/Lang'
-import { type Validatable } from '../composables/V'
+import { type Validatable } from '../composables/Validation'
 import SInputText, { type Align, type TextColor } from './SInputText.vue'
+import IconMagnifyingGlass from '~icons/ph/magnifying-glass-bold'
 
 const props = defineProps<{
   placeholder?: string

package/lib/components/SDescAvatar.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { isArray } from '../support/Utils'
 import SAvatar from './SAvatar.vue'
 import SDescEmpty from './SDescEmpty.vue'
 
@@ -21,7 +20,7 @@ const _avatar = computed(() => {
     return null
   }
 
-  return isArray(props.avatar) ? props.avatar : [props.avatar]
+  return Array.isArray(props.avatar) ? props.avatar : [props.avatar]
 })
 </script>
 

package/lib/components/SDescFile.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import IconDownloadSimple from '@iconify-icons/ph/download-simple-bold'
-import IconFileText from '@iconify-icons/ph/file-text-bold'
 import { computed } from 'vue'
-import { isArray } from '../support/Utils'
 import SButton from './SButton.vue'
 import SDescEmpty from './SDescEmpty.vue'
-import SIcon from './SIcon.vue'
+import IconDownloadSimple from '~icons/ph/download-simple-bold'
+import IconFileText from '~icons/ph/file-text-bold'
 
 export interface Item {
   name: string
@@ -18,7 +16,7 @@ const props = defineProps<{
 
 const items = computed(() => {
   return props.item
-    ? isArray(props.item) ? props.item : [props.item]
+    ? Array.isArray(props.item) ? props.item : [props.item]
     : null
 })
 </script>
@@ -28,7 +26,7 @@ const items = computed(() => {
     <div class="value">
       <div v-for="item, index in items" :key="index" class="item">
         <div class="data">
-          <div class="icon"><SIcon class="icon-svg" :icon="IconFileText" /></div>
+          <div class="icon"><IconFileText class="icon-svg" /></div>
           <div class="name">{{ item.name }}</div>
         </div>
         <div class="actions">

package/lib/components/SDescPill.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { isArray } from '../support/Utils'
 import SDescEmpty from './SDescEmpty.vue'
 import SPill, { type Mode } from './SPill.vue'
 
@@ -15,7 +14,7 @@ const props = defineProps<{
 
 const pills = computed(() => {
   return props.pill
-    ? isArray(props.pill) ? props.pill : [props.pill]
+    ? Array.isArray(props.pill) ? props.pill : [props.pill]
     : null
 })
 </script>

package/lib/components/SDescText.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 const classes = computed(() => [
-  { 'line-clamp': props.lineClamp },
+  { 'line-clamp': !!props.lineClamp },
   { 'pre-wrap': props.preWrap }
 ])
 

package/lib/components/SDropdownSectionDateRange.vue

@@ -2,7 +2,7 @@
 import { type MaybeRefOrGetter, computed, shallowRef, toValue } from 'vue'
 import { type DropdownSectionActionsOption } from '../composables/Dropdown'
 import { useTrans } from '../composables/Lang'
-import { useV } from '../composables/V'
+import { useValidation } from '../composables/Validation'
 import { DateRange, type DateRangePreset, type DateRangePresetType } from '../support/DateRange'
 import SDropdownSectionActions from './SDropdownSectionActions.vue'
 import SDropdownSectionDateRangeDateFromTo from './SDropdownSectionDateRangeDateFromTo.vue'
@@ -50,7 +50,7 @@ const actions: DropdownSectionActionsOption[] = [
   { label: t.a_apply, mode: 'info', onClick: onApply }
 ]
 
-const { validate } = useV()
+const { validate } = useValidation()
 
 function onPresetChange(value: any) {
   _range.value = new DateRange().setPreset(value as DateRangePresetType)

package/lib/components/SDropdownSectionDateRangeDateFromTo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useV } from '../composables/V'
+import { useValidation } from '../composables/Validation'
 import { DateFromTo } from '../support/DateRange'
 import { type Day } from '../support/Day'
 import { required } from '../validation/rules'
@@ -13,7 +13,7 @@ const emit = defineEmits<{
   (e: 'change', value: DateFromTo): void
 }>()
 
-const { validation } = useV(() => ({
+const { validation } = useValidation(() => ({
   from: props.preset.from,
   to: props.preset.to
 }), {

package/lib/components/SDropdownSectionDateRangeYear.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useV } from '../composables/V'
+import { useValidation } from '../composables/Validation'
 import { Year } from '../support/DateRange'
 import { maxValue, minValue, required } from '../validation/rules'
 import SInputNumber from './SInputNumber.vue'
@@ -12,7 +12,7 @@ const emit = defineEmits<{
   (e: 'change', value: Year): void
 }>()
 
-const { validation } = useV(() => ({
+const { validation } = useValidation(() => ({
   year: props.preset.year
 }), {
   year: {

package/lib/components/SDropdownSectionDateRangeYearHalf.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useV } from '../composables/V'
+import { useValidation } from '../composables/Validation'
 import { YearHalf } from '../support/DateRange'
 import { maxValue, minValue, required } from '../validation/rules'
 import SInputNumber from './SInputNumber.vue'
@@ -13,7 +13,7 @@ const emit = defineEmits<{
   (e: 'change', value: YearHalf): void
 }>()
 
-const { validation } = useV(() => ({
+const { validation } = useValidation(() => ({
   year: props.preset.year
 }), {
   year: {

package/lib/components/SDropdownSectionDateRangeYearQuarter.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useV } from '../composables/V'
+import { useValidation } from '../composables/Validation'
 import { YearQuarter } from '../support/DateRange'
 import { maxValue, minValue, required } from '../validation/rules'
 import SInputNumber from './SInputNumber.vue'
@@ -13,7 +13,7 @@ const emit = defineEmits<{
   (e: 'change', value: YearQuarter): void
 }>()
 
-const { validation } = useV(() => ({
+const { validation } = useValidation(() => ({
   year: props.preset.year
 }), {
   year: {

package/lib/components/SDropdownSectionFilter.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import IconCheck from '@iconify-icons/ph/check'
 import Fuse from 'fuse.js'
 import { type MaybeRef, computed, onMounted, ref, unref } from 'vue'
 import { type DropdownSectionFilterOption, type DropdownSectionFilterSelectedValue } from '../composables/Dropdown'
 import { useTrans } from '../composables/Lang'
-import { isArray } from '../support/Utils'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
-import SIcon from './SIcon.vue'
+import IconCheck from '~icons/ph/check'
 
 const props = defineProps<{
   search?: boolean
@@ -50,7 +48,7 @@ onMounted(() => {
 function isActive(value: any) {
   const selected = unref(props.selected)
 
-  return isArray(selected)
+  return Array.isArray(selected)
     ? selected.includes(value)
     : selected === value
 }
@@ -85,9 +83,9 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
           @keyup.down.prevent="focusNext"
           @click="handleClick(option, option.value)"
         >
-          <span v-if="isArray(unref(selected))" class="checkbox">
+          <span v-if="Array.isArray(unref(selected))" class="checkbox">
             <span class="checkbox-box">
-              <SIcon :icon="IconCheck" class="checkbox-icon" />
+              <IconCheck class="checkbox-icon" />
             </span>
           </span>
           <span v-else class="radio">

package/lib/components/SIndicator.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import IconCheckCircleFill from '@iconify-icons/ph/check-circle-fill'
-import IconCircle from '@iconify-icons/ph/circle-bold'
-import IconCircleDashed from '@iconify-icons/ph/circle-dashed-bold'
-import IconCircleNotch from '@iconify-icons/ph/circle-notch-bold'
-import IconXCircle from '@iconify-icons/ph/x-circle-bold'
 import { computed } from 'vue'
-import SIcon from './SIcon.vue'
+import IconCheckCircleFill from '~icons/ph/check-circle-fill'
+import IconCircle from '~icons/ph/circle-bold'
+import IconCircleDashed from '~icons/ph/circle-dashed-bold'
+import IconCircleNotch from '~icons/ph/circle-notch-bold'
+import IconXCircle from '~icons/ph/x-circle-bold'
 
 export type Size = 'nano' | 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
 export type State = 'pending' | 'ready' | 'queued' | 'running' | 'completed' | 'failed'
@@ -25,20 +24,15 @@ const classes = computed(() => [
   props.state,
   props.mode
 ])
-
-const stateIconDict = {
-  pending: IconCircle,
-  ready: IconCircle,
-  queued: IconCircleDashed,
-  running: IconCircleNotch,
-  completed: IconCheckCircleFill,
-  failed: IconXCircle
-}
 </script>
 
 <template>
   <div class="SIndicator" :class="classes">
-    <SIcon class="icon" :icon="stateIconDict[state]" />
+    <IconCircle v-if="props.state === 'pending' || props.state === 'ready'" class="icon" />
+    <IconCircleDashed v-if="props.state === 'queued'" class="icon" />
+    <IconCircleNotch v-if="props.state === 'running'" class="icon" />
+    <IconCheckCircleFill v-if="props.state === 'completed'" class="icon" />
+    <IconXCircle v-if="props.state === 'failed'" class="icon" />
   </div>
 </template>
 

package/lib/components/SInputAddon.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
-import { computed, ref } from 'vue'
+import { type Component, computed, ref } from 'vue'
 import {
   type DropdownSection,
   getSelectedOption,
@@ -9,10 +8,10 @@ import {
 import { useFlyout } from '../composables/Flyout'
 import { isString } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
-import SIcon from './SIcon.vue'
+import IconCaretDown from '~icons/ph/caret-down-bold'
 
 const props = withDefaults(defineProps<{
-  label?: any
+  label?: Component | string
   clickable?: boolean
   dropdown?: DropdownSection[]
   dropdownCaret?: boolean
@@ -80,20 +79,19 @@ function handleClickButton() {
       @click="handleClickButton"
     >
       <span class="action-label">
-        <SIcon
+        <component
           v-if="props.label && !isString(props.label)"
+          :is="props.label"
           class="action-icon"
-          :icon="props.label"
         />
         <span v-else>
           {{ props.label ?? selectedOptionLabel }}
         </span>
       </span>
 
-      <SIcon
+      <IconCaretDown
         v-if="props.dropdown.length && props.dropdownCaret"
         class="caret"
-        :icon="IconCaretDown"
       />
     </component>
 

package/lib/components/SInputBase.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import IconQuestion from '@iconify-icons/ph/question'
-import { type DefineComponent, computed, unref, useSlots } from 'vue'
-import { type Validatable } from '../composables/V'
-import SIcon from './SIcon.vue'
+import { type Component, computed, unref, useSlots } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import STooltip from './STooltip.vue'
+import IconQuestion from '~icons/ph/question'
 
 type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
@@ -14,7 +12,7 @@ const props = defineProps<{
   info?: string
   note?: string
   help?: string
-  checkIcon?: IconifyIcon | DefineComponent
+  checkIcon?: Component
   checkText?: string
   checkColor?: Color
   validation?: Validatable
@@ -61,7 +59,7 @@ function getErrorMsg(validation: Validatable) {
 
       <STooltip v-if="hasInfo" :text="info" trigger="focus" @click.prevent>
         <div class="label-info">
-          <SIcon class="label-info-icon" :icon="IconQuestion" />
+          <IconQuestion class="label-info-icon" />
         </div>
         <template v-if="$slots.info" #text><slot name="info" /></template>
       </STooltip>
@@ -69,7 +67,7 @@ function getErrorMsg(validation: Validatable) {
       <span class="label-note" :class="{ 'has-info': hasInfo }">{{ note }}</span>
 
       <span v-if="checkIcon || checkText" class="check" :class="checkColor || 'neutral'">
-        <SIcon v-if="checkIcon" class="check-icon" :icon="checkIcon" />
+        <component v-if="checkIcon" :is="checkIcon" class="check-icon" />
         <span v-if="checkText" class="check-text">{{ checkText }}</span>
       </span>
     </label>