@globalbrain/sefirot 3.50.0 → 4.0.0-0

package/lib/components/SPill.vue

@@ -12,9 +12,6 @@ const props = defineProps<{
   mode?: Mode
   label?: string
   clickable?: boolean
-
-  // @deprecated Use `as` instead.
-  tag?: string
 }>()
 
 const emit = defineEmits<{
@@ -29,8 +26,7 @@ const classes = computed(() => [
 ])
 
 const computedTag = computed(() => {
-  const as = props.as ?? props.tag
-  return as || (props.clickable ? 'button' : 'span')
+  return props.as || (props.clickable ? 'button' : 'span')
 })
 
 function onClick() {

package/lib/components/SSnackbar.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import IconX from '@iconify-icons/ph/x'
 import { type SnackbarAction, useSnackbars } from '../stores/Snackbars'
 import SButton from './SButton.vue'
-import SIcon from './SIcon.vue'
+import IconX from '~icons/ph/x'
 
 const props = defineProps<{
   id: number
@@ -21,7 +20,7 @@ function close() {
 <template>
   <div class="SSnackbar" :class="[mode ?? 'neutral']">
     <button class="close" @click="close">
-      <SIcon :icon="IconX" class="close-icon" />
+      <IconX class="close-icon" />
     </button>
 
     <p class="content">

package/lib/components/SStep.vue

@@ -1,9 +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, type StepStatus } from '../composables/Step'
-import SIcon from './SIcon.vue'
+import IconCheck from '~icons/ph/check'
+import IconX from '~icons/ph/x'
 
 defineProps({
   status: { type: String as PropType<StepStatus>, required: true },
@@ -19,8 +18,8 @@ defineProps({
       <div class="bar" :class="[barLeft]" />
       <div class="point">
         <div v-if="status === 'active'" class="inner-dot" />
-        <SIcon v-else-if="status === 'done'" :icon="IconCheck" class="icon" />
-        <SIcon v-else-if="status === 'failed'" :icon="IconX" class="icon" />
+        <IconCheck v-else-if="status === 'done'" class="icon" />
+        <IconX v-else-if="status === 'failed'" class="icon" />
       </div>
       <div class="bar" :class="[barRight]" />
     </div>

package/lib/components/STable.vue

@@ -98,7 +98,7 @@ const showFooter = computed(() => {
     return footer
   }
 
-  return (
+  return !!(
     unref(props.options.page)
     && unref(props.options.perPage)
     && unref(props.options.total)
@@ -363,7 +363,6 @@ function updateSelected(selected: any) {
         :total="unref(options.total)"
         :reset="unref(options.reset)"
         :menu="unref(options.menu)"
-        :actions="unref(options.actions)"
         :borderless="unref(options.borderless)"
         :on-reset="options.onReset"
         :selected="Array.isArray(selected) ? selected : undefined"

package/lib/components/STableCell.vue

@@ -37,7 +37,7 @@ const computedCell = computed<TableCell | undefined>(() =>
       :record="record"
       :align="computedCell?.align"
       :icon="computedCell?.icon"
-      :getter="computedCell?.value"
+      :text="computedCell?.value"
       :link="computedCell?.link"
       :color="computedCell?.color"
       :icon-color="computedCell?.iconColor"
@@ -49,7 +49,7 @@ const computedCell = computed<TableCell | undefined>(() =>
       :record="record"
       :align="computedCell.align"
       :icon="computedCell.icon"
-      :getter="computedCell.value"
+      :number="computedCell.value"
       :separator="computedCell.separator"
       :link="computedCell.link"
       :color="computedCell.color"
@@ -58,29 +58,23 @@ const computedCell = computed<TableCell | undefined>(() =>
     />
     <STableCellDay
       v-else-if="computedCell.type === 'day'"
-      :value="value"
-      :record="record"
       :align="computedCell.align"
-      :getter="computedCell.value"
+      :day="computedCell.value"
       :format="computedCell.format"
       :color="computedCell.color"
     />
     <STableCellPill
       v-else-if="computedCell.type === 'pill'"
-      :value="value"
-      :record="record"
-      :getter="computedCell.value"
+      :pill="computedCell.value"
       :color="computedCell.color"
     />
     <STableCellPills
       v-else-if="computedCell.type === 'pills'"
-      :value="value"
-      :record="record"
       :pills="computedCell.pills"
     />
     <STableCellState
       v-else-if="computedCell.type === 'state'"
-      :value="computedCell.label"
+      :state="computedCell.label"
       :mode="computedCell.mode"
     />
     <STableCellAvatar
@@ -95,8 +89,6 @@ const computedCell = computed<TableCell | undefined>(() =>
     />
     <STableCellAvatars
       v-else-if="computedCell.type === 'avatars'"
-      :value="value"
-      :record="record"
       :avatars="computedCell.avatars"
       :color="computedCell.color"
       :avatar-count="computedCell.avatarCount"

package/lib/components/STableCellAvatar.vue

@@ -1,48 +1,31 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import SAvatar from './SAvatar.vue'
 import SLink from './SLink.vue'
 
-const props = defineProps<{
+defineProps<{
   value?: any
   record?: any
-  image?: string | null | ((value: any, record: any) => string | null | undefined)
-  name?: string | null | ((value: any, record: any) => string | null | undefined)
-  link?: string | null | ((value: any, record: any) => string | null | undefined)
+  image?: string | null
+  name?: string | null
+  link?: string | null
   color?: 'neutral' | 'soft' | 'mute'
   onClick?(value: any, record: any): void
 }>()
-
-const _image = computed(() => resolve(props.image))
-const _name = computed(() => resolve(props.name))
-const _link = computed(() => resolve(props.link))
-
-function resolve(
-  value?: string | null | ((value: any, record: any) => string | null | undefined)
-) {
-  if (value == null || value === '') {
-    return null
-  }
-
-  return typeof value === 'function'
-    ? value(props.value, props.record)
-    : value
-}
 </script>
 
 <template>
-  <div class="STableCellAvatar" :class="[{ link: link || onClick }, color]">
+  <div class="STableCellAvatar" :class="[{ link: !!(link || onClick) }, color]">
     <SLink
       class="container"
-      :href="_link ?? undefined"
+      :href="link || undefined"
       :role="onClick ? 'button' : null"
       @click="() => onClick?.(value, record)"
     >
-      <div v-if="_image || _name" class="avatar">
-        <SAvatar size="mini" :avatar="_image" :name="_name" />
+      <div v-if="image || name" class="avatar">
+        <SAvatar size="mini" :avatar="image" :name="name" />
       </div>
-      <span v-if="_name" class="name">
-        {{ _name }}
+      <span v-if="name" class="name">
+        {{ name }}
       </span>
     </SLink>
   </div>

package/lib/components/STableCellAvatars.vue

@@ -5,9 +5,7 @@ import { type Position } from '../composables/Tooltip'
 import SAvatar from './SAvatar.vue'
 
 const props = withDefaults(defineProps<{
-  value?: any
-  record?: any
-  avatars: TableCellAvatarsOption[] | ((value: any, record: any) => TableCellAvatarsOption[])
+  avatars: TableCellAvatarsOption[]
   color?: 'neutral' | 'soft' | 'mute'
   avatarCount?: number
   nameCount?: number
@@ -17,22 +15,16 @@ const props = withDefaults(defineProps<{
   nameCount: 2
 })
 
-const _avatars = computed(() => {
-  return typeof props.avatars === 'function'
-    ? props.avatars(props.value, props.record)
-    : props.avatars
-})
-
 const avatarDiff = computed(() => {
-  return _avatars.value.length - props.avatarCount
+  return props.avatars.length - props.avatarCount
 })
 
 const displayAvatars = computed(() => {
-  return _avatars.value.slice(0, props.avatarCount)
+  return props.avatars.slice(0, props.avatarCount)
 })
 
 const nameDiff = computed(() => {
-  return _avatars.value.length - props.nameCount
+  return props.avatars.length - props.nameCount
 })
 
 const displayNames = computed(() => {
@@ -41,8 +33,7 @@ const displayNames = computed(() => {
     return null
   }
 
-  const slicedAvatars = _avatars.value.slice(0, props.nameCount)
-
+  const slicedAvatars = props.avatars.slice(0, props.nameCount)
   const names = slicedAvatars.map((avatar) => avatar.name).join(', ')
 
   if (nameDiff.value > 0) {
@@ -57,11 +48,7 @@ const displayNames = computed(() => {
   <div class="STableCellAvatars" :class="[color]">
     <div class="container">
       <div v-if="displayAvatars.length" class="avatars">
-        <div
-          v-for="(avatar, index) in displayAvatars"
-          :key="index"
-          class="avatar"
-        >
+        <div v-for="(avatar, index) in displayAvatars" :key="index" class="avatar">
           <div class="avatar-box">
             <SAvatar size="mini" :avatar="avatar.image" :name="avatar.name" :tooltip="tooltip" />
           </div>

package/lib/components/STableCellDay.vue

@@ -1,25 +1,18 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { type Day } from '../support/Day'
 
-const props = defineProps<{
-  value?: Day | null
-  record?: any
+defineProps<{
+  day?: Day | null
   align?: 'left' | 'center' | 'right'
-  getter?: Day | null
   format?: string
   color?: 'neutral' | 'soft' | 'mute'
 }>()
-
-const _value = computed(() => {
-  return props.getter ? props.getter : props.value
-})
 </script>
 
 <template>
   <div class="STableCellDay" :class="[align ?? 'left', color ?? 'neutral']">
-    <div v-if="_value" class="value">
-      {{ _value.format(format ?? 'YYYY-MM-DD HH:mm:ss') }}
+    <div v-if="day" class="value">
+      {{ day.format(format ?? 'YYYY-MM-DD HH:mm:ss') }}
     </div>
   </div>
 </template>

package/lib/components/STableCellNumber.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { type Component, computed } from 'vue'
 import { type TableCellValueColor } from '../composables/Table'
 import { format } from '../support/Num'
-import SIcon from './SIcon.vue'
 import SLink from './SLink.vue'
 
 const props = defineProps<{
   value?: any
   record?: any
   align?: 'left' | 'center' | 'right'
-  icon?: any
-  getter?: number | null
+  icon?: Component
+  number?: number | null
   separator?: boolean
   color?: TableCellValueColor
   iconColor?: TableCellValueColor
@@ -18,14 +17,14 @@ const props = defineProps<{
   onClick?(value: any, record: any): void
 }>()
 
-const _value = computed(() => props.getter ?? props.value)
+const _value = computed(() => props.number ?? props.value)
 const _color = computed(() => props.color ?? 'neutral')
 const _iconColor = computed(() => props.iconColor ?? _color.value)
 
 const classes = computed(() => [
   props.align ?? 'left',
   _color,
-  { link: props.link || props.onClick }
+  { link: !!(props.link || props.onClick) }
 ])
 </script>
 
@@ -38,10 +37,10 @@ const classes = computed(() => [
       :role="onClick ? 'button' : null"
       @click="() => onClick?.(value, record)"
     >
-      <div v-if="icon" class="icon" :class="[_iconColor]">
-        <SIcon :icon="icon" class="svg" />
+      <div v-if="icon" class="icon" :class="_iconColor">
+        <component :is="icon" class="svg" />
       </div>
-      <div class="value" :class="[_color ?? 'neutral']">
+      <div class="value" :class="_color">
         {{ separator ? format(_value) : _value }}
       </div>
     </SLink>

package/lib/components/STableCellPill.vue

@@ -1,43 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import SPill, { type Mode } from './SPill.vue'
 
-const props = defineProps<{
-  value?: any
-  record?: any
-  getter?: string | ((value: any, record: any) => string)
-  color?: Mode | ((value: any, record: any) => Mode)
+defineProps<{
+  pill?: string
+  color?: Mode
 }>()
-
-const _value = computed(() => {
-  if (props.getter === undefined) {
-    return props.value
-  }
-
-  return typeof props.getter === 'string'
-    ? props.getter
-    : props.getter(props.value, props.record)
-})
-
-const _color = computed(() => {
-  if (props.color === undefined) {
-    return props.color
-  }
-
-  return typeof props.color === 'string'
-    ? props.color
-    : props.color(props.value, props.record)
-})
 </script>
 
 <template>
-  <div class="STableCellPill" :class="[_color ?? 'neutral']">
-    <SPill
-      v-if="_value"
-      size="mini"
-      :mode="_color"
-      :label="_value"
-    />
+  <div class="STableCellPill" :class="[color || 'neutral']">
+    <SPill v-if="pill" size="mini" :mode="color" :label="pill" />
   </div>
 </template>
 

package/lib/components/STableCellPills.vue

@@ -1,28 +1,18 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { type TableCellPillItem } from '../composables/Table'
 import STableCellPill from './STableCellPill.vue'
 
-const props = defineProps<{
-  value?: any
-  record?: any
-  pills: TableCellPillItem[] | ((value: any, record: any) => TableCellPillItem[])
+defineProps<{
+  pills: TableCellPillItem[]
 }>()
-
-const items = computed(() => {
-  return Array.isArray(props.pills)
-    ? props.pills
-    : props.pills(props.value, props.record)
-})
 </script>
 
 <template>
   <div class="STableCellPills">
     <STableCellPill
-      v-for="item in items"
+      v-for="item in pills"
       :key="item.label"
-      :value="item.label"
-      :record="record"
+      :pill="item.label"
       :color="item.color"
     />
   </div>

package/lib/components/STableCellState.vue

@@ -2,7 +2,7 @@
 import SState, { type Mode } from './SState.vue'
 
 defineProps<{
-  value?: string
+  state?: string
   mode?: Mode
 }>()
 </script>
@@ -10,10 +10,10 @@ defineProps<{
 <template>
   <div class="STableCellState" :class="[mode ?? 'neutral']">
     <SState
-      v-if="value"
+      v-if="state"
       size="mini"
       :mode="mode"
-      :label="value"
+      :label="state"
     />
   </div>
 </template>

package/lib/components/STableCellText.vue

@@ -1,72 +1,44 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import SIcon from './SIcon.vue'
+import { type Component, computed } from 'vue'
+import { type TableCellValueColor } from '../composables/Table'
 import SLink from './SLink.vue'
 
-export type Color =
-  | 'default'
-  | 'mute'
-  | 'neutral'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger'
-  | 'soft'
-
 const props = defineProps<{
   value?: any
-  record: any
+  record?: any
   align?: 'left' | 'center' | 'right'
-  icon?: any
-  getter?: string | null | ((value: any, record: any) => string | null)
-  color?: Color | ((value: any, record: any) => Color)
-  iconColor?: Color | ((value: any, record: any) => Color)
-  link?: string | null | ((value: any, record: any) => string)
+  icon?: Component
+  text?: string | null
+  color?: TableCellValueColor
+  iconColor?: TableCellValueColor
+  link?: string | null
   onClick?(value: any, record: any): void
 }>()
 
-const _value = computed(() => {
-  if (props.getter === undefined) {
-    return props.value
-  }
+const _value = computed(() => props.text ?? props.value)
+const _color = computed(() => props.color ?? 'neutral')
+const _iconColor = computed(() => props.iconColor ?? _color.value)
 
-  return typeof props.getter === 'function'
-    ? props.getter(props.value, props.record)
-    : props.getter
-})
-
-const _link = computed(() => {
-  return typeof props.link === 'function'
-    ? props.link(props.value, props.record)
-    : props.link
-})
-
-const _color = computed(() => {
-  return typeof props.color === 'function'
-    ? props.color(props.value, props.record)
-    : props.color ?? 'neutral'
-})
-
-const _iconColor = computed(() => {
-  return typeof props.iconColor === 'function'
-    ? props.iconColor(props.value, props.record)
-    : props.iconColor ?? _color.value
-})
+const classes = computed(() => [
+  props.align ?? 'left',
+  _color,
+  { link: !!(props.link || props.onClick) }
+])
 </script>
 
 <template>
-  <div class="STableCellText" :class="[align ?? 'left', { link: link || onClick }, _color]">
+  <div class="STableCellText" :class="classes">
     <SLink
-      v-if="_value"
+      v-if="_value != null"
       class="container"
-      :href="_link"
+      :href="link"
       :role="onClick ? 'button' : null"
       @click="() => onClick?.(value, record)"
     >
-      <div v-if="icon" class="icon" :class="[_iconColor ?? _color]">
-        <SIcon :icon="icon" class="svg" />
+      <div v-if="icon" class="icon" :class="_iconColor">
+        <component :is="icon" class="svg" />
       </div>
-      <div class="text" :class="[_color]">
+      <div class="text" :class="_color">
         {{ _value }}
       </div>
     </SLink>

package/lib/components/STableColumn.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import IconDotsThree from '@iconify-icons/ph/dots-three'
 import { computed, nextTick, ref, unref, watch } from 'vue'
 import { type DropdownSection } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
-import { isArray } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
-import SIcon from './SIcon.vue'
+import IconDotsThree from '~icons/ph/dots-three'
 
 const props = withDefaults(defineProps<{
   name: string
@@ -40,8 +38,8 @@ const active = computed(() => {
 
     const selected = unref(item.selected)
 
-    if (!isArray(selected)) {
-      return selected !== null
+    if (!Array.isArray(selected)) {
+      return selected != null
     }
 
     if (!selected.length) {
@@ -130,7 +128,7 @@ function stopDialogPositionListener() {
 
         <div v-if="dropdown" class="action" ref="container">
           <button class="button" :class="{ active: buttonActive }" @click="toggle">
-            <SIcon :icon="IconDotsThree" class="icon" />
+            <IconDotsThree class="icon" />
           </button>
 
           <transition name="fade">

package/lib/components/STableFooter.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import IconCaretLeft from '@iconify-icons/ph/caret-left-bold'
-import IconCaretRight from '@iconify-icons/ph/caret-right-bold'
 import { computed } from 'vue'
 import { format } from '../support/Num'
-import SIcon from './SIcon.vue'
+import IconCaretLeft from '~icons/ph/caret-left-bold'
+import IconCaretRight from '~icons/ph/caret-right-bold'
 
 const props = defineProps<{
   total?: number | null
@@ -44,10 +43,10 @@ const hasNext = computed(() => {
 
       <div v-if="onPrev && onNext" class="actions">
         <button class="button prev" :class="{ active: hasPrev }" @click="() => hasPrev && onPrev?.()">
-          <SIcon :icon="IconCaretLeft" class="icon" />
+          <IconCaretLeft class="icon" />
         </button>
         <button class="button next" :class="{ active: hasNext }" @click="() => hasNext && onNext?.()">
-          <SIcon :icon="IconCaretRight" class="icon" />
+          <IconCaretRight class="icon" />
         </button>
       </div>
     </div>

package/lib/components/STableHeader.vue

@@ -1,23 +1,19 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { type TableHeaderAction, type TableMenu } from '../composables/Table'
+import { type TableMenu } from '../composables/Table'
 import { format } from '../support/Num'
-import { isNullish } from '../support/Utils'
-import STableHeaderActions from './STableHeaderActions.vue'
 import STableHeaderMenu from './STableHeaderMenu.vue'
 
 const props = defineProps<{
   total?: number | null
-  reset?: boolean
   menu?: TableMenu[] | TableMenu[][]
-  actions?: TableHeaderAction[]
   borderless?: boolean
   onReset?(): void
   selected?: unknown[]
 }>()
 
 const stats = computed(() => {
-  if (isNullish(props.total)) {
+  if (props.total == null) {
     return null
   }
 
@@ -25,13 +21,6 @@ const stats = computed(() => {
     ? `${format(props.selected.length)} of ${props.total} selected`
     : `${format(props.total)} ${props.total > 1 ? 'records' : 'record'}`
 })
-
-// deprecated `reset` prop in favor of `actions`, remove this in next major version
-const resetAction = computed(() => {
-  return props.reset
-    ? [{ label: 'Reset filters', onClick: props.onReset!, type: 'info' }] // onReset is required when reset is true
-    : []
-})
 </script>
 
 <template>
@@ -41,12 +30,6 @@ const resetAction = computed(() => {
         <div v-if="stats" class="stats">
           {{ stats }}
         </div>
-        <div v-if="actions?.length" class="actions">
-          <STableHeaderActions :actions="actions" />
-        </div>
-        <div v-else-if="resetAction.length">
-          <STableHeaderActions :actions="resetAction" />
-        </div>
       </div>
       <div v-if="menu && menu.length" class="menu">
         <STableHeaderMenu :menu="menu" />

package/lib/components/STableHeaderMenu.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { type TableMenu } from '../composables/Table'
-import { isArray } from '../support/Utils'
 import STableHeaderMenuItem from './STableHeaderMenuItem.vue'
 
 const props = defineProps<{
@@ -9,7 +8,7 @@ const props = defineProps<{
 }>()
 
 const normalizedMenu = computed(() => {
-  return isArray(props.menu[0])
+  return Array.isArray(props.menu[0])
     ? props.menu as TableMenu[][]
     : [props.menu] as TableMenu[][]
 })