@globalbrain/sefirot 2.32.0 → 2.34.0

package/lib/components/SButton.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { type MaybeRef } from '@vueuse/core'
+import { 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'
 
 export type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
 
@@ -18,6 +22,14 @@ export type Mode =
   | 'warning'
   | 'danger'
 
+export interface Tooltip {
+  tag?: string
+  text?: MaybeRef<string>
+  position?: Position
+  trigger?: 'hover' | 'focus' | 'both'
+  timeout?: number
+}
+
 const props = defineProps<{
   tag?: string
   size?: Size
@@ -32,6 +44,7 @@ const props = defineProps<{
   block?: boolean
   loading?: boolean
   disabled?: boolean
+  tooltip?: Tooltip
 }>()
 
 const emit = defineEmits<{
@@ -57,6 +70,12 @@ const computedTag = computed(() => {
     : props.href ? SLink : 'button'
 })
 
+const slots = useSlots()
+
+const hasTooltip = computed(() => {
+  return slots['tooltip-text'] || unref(props.tooltip?.text)
+})
+
 function handleClick(): void {
   if (!props.loading) {
     props.disabled ? emit('disabled-click') : emit('click')
@@ -65,29 +84,41 @@ function handleClick(): void {
 </script>
 
 <template>
-  <Component
-    :is="computedTag"
-    class="SButton"
-    :class="classes"
-    :href="href"
-    role="button"
-    @click="handleClick"
+  <SFragment
+    :is="hasTooltip && STooltip"
+    :tag="tooltip?.tag"
+    :text="unref(tooltip?.text)"
+    :position="tooltip?.position"
+    display="inline-block"
+    :trigger="tooltip?.trigger ?? 'both'"
+    :timeout="tooltip?.timeout"
+    :tabindex="-1"
   >
-    <span class="content">
-      <span v-if="icon" class="icon" :class="iconMode">
-        <SIcon :icon="icon" class="icon-svg" />
+    <template v-if="$slots['tooltip-text']" #text><slot name="tooltip-text" /></template>
+    <component
+      :is="computedTag"
+      class="SButton"
+      :class="classes"
+      :href="href"
+      role="button"
+      @click="handleClick"
+    >
+      <span class="content">
+        <span v-if="icon" class="icon" :class="iconMode">
+          <SIcon :icon="icon" class="icon-svg" />
+        </span>
+        <span v-if="label" class="label" :class="labelMode">
+          {{ label }}
+        </span>
       </span>
-      <span v-if="label" class="label" :class="labelMode">
-        {{ label }}
-      </span>
-    </span>
 
-    <Transition name="fade">
-      <span v-if="loading" key="loading" class="loader">
-        <SSpinner class="loader-icon" />
-      </span>
-    </Transition>
-  </Component>
+      <transition name="fade">
+        <span v-if="loading" key="loading" class="loader">
+          <SSpinner class="loader-icon" />
+        </span>
+      </transition>
+    </component>
+  </SFragment>
 </template>
 
 <style scoped lang="postcss">

package/lib/components/SDropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DropdownSection } from '../composables/Dropdown'
+import { type DropdownSection } from '../composables/Dropdown'
 import SDropdownSection from './SDropdownSection.vue'
 
 defineProps<{

package/lib/components/SDropdownSection.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DropdownSection } from '../composables/Dropdown'
+import { type DropdownSection } from '../composables/Dropdown'
 import SDropdownSectionActions from './SDropdownSectionActions.vue'
 import SDropdownSectionComponent from './SDropdownSectionComponent.vue'
 import SDropdownSectionFilter from './SDropdownSectionFilter.vue'

package/lib/components/SDropdownSectionActions.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DropdownSectionActionsOption } from '../composables/Dropdown'
+import { type DropdownSectionActionsOption } from '../composables/Dropdown'
 
 defineProps<{
   options: DropdownSectionActionsOption[]

package/lib/components/SDropdownSectionComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DefineComponent } from 'vue'
+import { type DefineComponent } from 'vue'
 
 defineProps<{
   comp: DefineComponent

package/lib/components/SDropdownSectionFilter.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import IconCheck from '@iconify-icons/ph/check'
-import type { MaybeRef } from '@vueuse/core'
+import { type MaybeRef } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { computed, onMounted, ref, unref } from 'vue'
-import type { DropdownSectionFilterOption, DropdownSectionFilterSelectedValue } from '../composables/Dropdown'
+import { type DropdownSectionFilterOption, type DropdownSectionFilterSelectedValue } from '../composables/Dropdown'
 import { isArray } from '../support/Utils'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
 import SIcon from './SIcon.vue'

package/lib/components/SDropdownSectionFilterItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DropdownSectionFilterOption } from '../composables/Dropdown'
+import { type DropdownSectionFilterOption } from '../composables/Dropdown'
 import SDropdownSectionFilterItemAvatar from './SDropdownSectionFilterItemAvatar.vue'
 import SDropdownSectionFilterItemText from './SDropdownSectionFilterItemText.vue'
 

package/lib/components/SDropdownSectionMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DropdownSectionMenuOption } from '../composables/Dropdown'
+import { type DropdownSectionMenuOption } from '../composables/Dropdown'
 
 defineProps<{
   options: DropdownSectionMenuOption[]

package/lib/components/SFragment.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+defineProps<{ is?: any }>()
+</script>
+
+<template>
+  <component v-if="is" :is="is" v-bind="$attrs">
+    <template v-for="(_, slot) of $slots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
+    </template>
+  </component>
+  <slot v-else />
+</template>

package/lib/components/SIcon.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon, IconifyIcon } from '@iconify/vue/dist/offline'
-import type { DefineComponent } from 'vue'
+import { type DefineComponent } from 'vue'
 
 defineProps<{
   icon: IconifyIcon | DefineComponent

package/lib/components/SInputAddon.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
-import type { DropdownSection } from 'sefirot/composables/Dropdown'
+import { type DropdownSection } from 'sefirot/composables/Dropdown'
 import {
   getSelectedOption,
   useManualDropdownPosition

package/lib/components/SInputBase.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconQuestion from '@iconify-icons/ph/question'
-import type { DefineComponent } from 'vue'
+import { type DefineComponent } from 'vue'
 import { computed, unref, useSlots } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import STooltip from './STooltip.vue'
 

package/lib/components/SInputCheckbox.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconCheck from '@iconify-icons/ph/check-bold'
 import { computed } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputCheckboxes.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { computed } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputCheckbox from './SInputCheckbox.vue'
 

package/lib/components/SInputDate.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { DatePicker } from 'v-calendar'
 import { computed } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import { type Day, day } from '../support/Day'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputDropdown.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
 import IconCaretUp from '@iconify-icons/ph/caret-up-bold'
 import xor from 'lodash-es/xor'
-import type { DefineComponent } from 'vue'
+import { type DefineComponent } from 'vue'
 import { computed, ref } from 'vue'
-import type { DropdownSectionFilter } from '../composables/Dropdown'
+import { type DropdownSectionFilter } from '../composables/Dropdown'
 import { useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import { isArray } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
 import SIcon from './SIcon.vue'

package/lib/components/SInputFile.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
-import type { DefineComponent } from 'vue'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import { type DefineComponent } from 'vue'
 import { computed, ref } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SInputHMS.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
-import type { DefineComponent } from 'vue'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import { type DefineComponent } from 'vue'
 import { computed, ref } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
@@ -15,9 +15,9 @@ export interface Value {
 }
 
 export interface Placeholder {
-  hour: string
-  minute: string
-  second: string
+  hour?: string
+  minute?: string
+  second?: string
 }
 
 export type ValueType = 'hour' | 'minute' | 'second'
@@ -63,9 +63,9 @@ const padValue = computed(() => {
 
 const padPlaceholder = computed(() => {
   return {
-    hour: props.placeholder?.hour.toString().padStart(2, '0') ?? '00',
-    minute: props.placeholder?.minute.toString().padStart(2, '0') ?? '00',
-    second: props.placeholder?.second.toString().padStart(2, '0') ?? '00'
+    hour: props.placeholder?.hour?.toString().padStart(2, '0') ?? '00',
+    minute: props.placeholder?.minute?.toString().padStart(2, '0') ?? '00',
+    second: props.placeholder?.second?.toString().padStart(2, '0') ?? '00'
   }
 })
 

package/lib/components/SInputNumber.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
-import type { DefineComponent } from 'vue'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import { type DefineComponent } from 'vue'
 import { computed } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import { isNullish, isString } from '../support/Utils'
 import SInputText from './SInputText.vue'
 

package/lib/components/SInputRadio.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
-import type { DefineComponent } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import { type DefineComponent } from 'vue'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SInputRadios.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
-import type { DefineComponent } from 'vue'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import { type DefineComponent } from 'vue'
 import { computed } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'
 

package/lib/components/SInputSelect.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
 import IconCaretUp from '@iconify-icons/ph/caret-up-bold'
-import type { DefineComponent } from 'vue'
+import { type DefineComponent } from 'vue'
 import { computed, ref } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputSwitch.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
-import type { DefineComponent } from 'vue'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import { type DefineComponent } from 'vue'
 import { computed } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SInputSwitches.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
-import type { DefineComponent } from 'vue'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import { type DefineComponent } from 'vue'
 import { computed } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputSwitch from './SInputSwitch.vue'
 

package/lib/components/SInputText.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
-import type { DefineComponent } from 'vue'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import { type DefineComponent } from 'vue'
 import { computed, ref } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import { isString } from '../support/Utils'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'

package/lib/components/SInputTextarea.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { computed } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SInputYMD.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue/dist/offline'
-import type { DefineComponent } from 'vue'
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import { type DefineComponent } from 'vue'
 import { computed, ref } from 'vue'
-import type { Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
@@ -17,9 +17,9 @@ export interface Value {
 export type ValueType = 'year' | 'month' | 'date'
 
 export interface Placeholder {
-  year: number
-  month: number
-  date: number
+  year?: number
+  month?: number
+  date?: number
 }
 
 const props = defineProps<{
@@ -64,9 +64,9 @@ const padValue = computed(() => {
 
 const padPlaceholder = computed(() => {
   return {
-    year: props.placeholder?.year.toString().padStart(4, '0') ?? '1998',
-    month: props.placeholder?.month.toString().padStart(2, '0') ?? '01',
-    date: props.placeholder?.date.toString().padStart(2, '0') ?? '14'
+    year: props.placeholder?.year?.toString().padStart(4, '0') ?? '1998',
+    month: props.placeholder?.month?.toString().padStart(2, '0') ?? '01',
+    date: props.placeholder?.date?.toString().padStart(2, '0') ?? '14'
   }
 })
 

package/lib/components/SMarkdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, shallowRef, watch } from 'vue'
-import type { LinkCallback, LinkSubscriberPayload } from '../composables/Markdown'
+import { type LinkCallback, type LinkSubscriberPayload } from '../composables/Markdown'
 import { useLink, useMarkdown } from '../composables/Markdown'
 
 const props = defineProps<{

package/lib/components/SSheetFooterAction.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Mode, Type } from './SButton.vue'
+import { type Mode, type Type } from './SButton.vue'
 import SButton from './SButton.vue'
 
 defineProps<{

package/lib/components/SSnackbar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import IconX from '@iconify-icons/ph/x'
-import type { SnackbarAction } from '../stores/Snackbars'
+import { type SnackbarAction } from '../stores/Snackbars'
 import { useSnackbars } from '../stores/Snackbars'
 import SButton from './SButton.vue'
 import SIcon from './SIcon.vue'

package/lib/components/SStep.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import IconCheck from '@iconify-icons/ph/check'
 import IconX from '@iconify-icons/ph/x'
-import type { PropType } from 'vue'
-import type { BarMode, StepStatus } from '../composables/Step'
+import { type PropType } from 'vue'
+import { type BarMode, type StepStatus } from '../composables/Step'
 import SIcon from './SIcon.vue'
 
 defineProps({

package/lib/components/SSteps.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
+import { type PropType } from 'vue'
 import { computed } from 'vue'
-import type { BarMode, Step } from '../composables/Step'
+import { type BarMode, type Step } from '../composables/Step'
 import SStep from './SStep.vue'
 
 const props = defineProps({

package/lib/components/STable.vue

@@ -10,7 +10,7 @@ import {
   watch
 } from 'vue'
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
-import type { Table } from '../composables/Table'
+import { type Table } from '../composables/Table'
 import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
 import STableColumn from './STableColumn.vue'
@@ -259,19 +259,52 @@ function getCell(key: string, index: number) {
           @mouseleave="lockBody(false)"
           @scroll="syncBodyScroll"
         >
-          <DynamicScroller
-            :items="recordsWithSummary"
-            :min-item-size="40"
-            key-field="__index"
-            class="block"
-            :style="blockWidth ? { width: `${blockWidth}px` } : undefined"
-            :prerender="Math.min(10, recordsWithSummary.length)"
-          >
-            <template #default="{ item: record, index: rIndex, active }">
-              <DynamicScrollerItem
-                :item="record"
-                :active="active"
-                :data-index="rIndex"
+          <template v-if="unref(options.virtualScroll)">
+            <DynamicScroller
+              :items="recordsWithSummary"
+              :min-item-size="40"
+              key-field="__index"
+              class="block"
+              :style="blockWidth ? { width: `${blockWidth}px` } : undefined"
+              :prerender="Math.min(10, recordsWithSummary.length)"
+            >
+              <template #default="{ item: record, index: rIndex, active }">
+                <DynamicScrollerItem
+                  :item="record"
+                  :active="active"
+                  :data-index="rIndex"
+                >
+                  <div class="row" :class="isSummaryOrLastClass(rIndex)">
+                    <STableItem
+                      v-for="key in unref(options.orders)"
+                      :key="key"
+                      :name="key"
+                      :class-name="unref(options.columns)[key].className"
+                      :width="colWidths[key]"
+                    >
+                      <STableCell
+                        :name="key"
+                        :class="isSummary(rIndex) && 'summary'"
+                        :class-name="unref(options.columns)[key].className"
+                        :cell="getCell(key, rIndex)"
+                        :value="record[key]"
+                        :record="record"
+                        :records="unref(options.records)!"
+                      />
+                    </STableItem>
+                  </div>
+                </DynamicScrollerItem>
+              </template>
+            </DynamicScroller>
+          </template>
+          <template v-else>
+            <div
+              class="block"
+              :style="blockWidth ? { width: `${blockWidth}px` } : undefined"
+            >
+              <div
+                v-for="(record, rIndex) in recordsWithSummary"
+                :key="record.__index"
               >
                 <div class="row" :class="isSummaryOrLastClass(rIndex)">
                   <STableItem
@@ -292,9 +325,9 @@ function getCell(key: string, index: number) {
                     />
                   </STableItem>
                 </div>
-              </DynamicScrollerItem>
-            </template>
-          </DynamicScroller>
+              </div>
+            </div>
+          </template>
         </div>
       </div>
 
@@ -378,7 +411,6 @@ function getCell(key: string, index: number) {
 
   .block {
     max-height: var(--table-max-height, 100%);
-    overflow-y: auto;
   }
 }
 

package/lib/components/STableCell.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { TableCell } from '../composables/Table'
+import { type TableCell } from '../composables/Table'
 import STableCellAvatar from './STableCellAvatar.vue'
 import STableCellAvatars from './STableCellAvatars.vue'
 import STableCellDay from './STableCellDay.vue'

package/lib/components/STableCellAvatars.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { TableCellAvatarsOption } from '../composables/Table'
+import { type TableCellAvatarsOption } from '../composables/Table'
 import SAvatar from './SAvatar.vue'
 
 const props = defineProps<{