@globalbrain/sefirot 2.9.0 → 2.11.0

package/lib/components/STableCell.vue

@@ -1,70 +1,84 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { TableCell } from '../composables/Table'
 import STableCellAvatar from './STableCellAvatar.vue'
 import STableCellAvatars from './STableCellAvatars.vue'
 import STableCellDay from './STableCellDay.vue'
 import STableCellPill from './STableCellPill.vue'
+import STableCellPills from './STableCellPills.vue'
 import STableCellText from './STableCellText.vue'
 
-defineProps<{
+const props = defineProps<{
   name: string
   className?: string
-  cell?: TableCell
+  cell?: any
   value: any
   record: any
   records: Record<string, any>
 }>()
+
+const computedCell = computed<TableCell | undefined>(() =>
+  typeof props.cell === 'function'
+    ? props.cell(props.value, props.record)
+    : props.cell
+)
 </script>
 
 <template>
   <div class="STableCell" :class="[className, `col-${name}`]">
     <STableCellText
-      v-if="!cell || cell.type === 'text'"
+      v-if="!computedCell || computedCell.type === 'text'"
       :value="value"
       :record="record"
-      :icon="cell?.icon"
-      :getter="cell?.value"
-      :link="cell?.link"
-      :color="cell?.color"
-      :icon-color="cell?.iconColor"
-      :on-click="cell?.onClick"
+      :icon="computedCell?.icon"
+      :getter="computedCell?.value"
+      :link="computedCell?.link"
+      :color="computedCell?.color"
+      :icon-color="computedCell?.iconColor"
+      :on-click="computedCell?.onClick"
     />
     <STableCellDay
-      v-else-if="cell.type === 'day'"
+      v-else-if="computedCell.type === 'day'"
       :value="value"
       :record="record"
-      :format="cell.format"
-      :color="cell.color"
+      :format="computedCell.format"
+      :color="computedCell.color"
     />
     <STableCellPill
-      v-else-if="cell.type === 'pill'"
+      v-else-if="computedCell.type === 'pill'"
+      :value="value"
+      :record="record"
+      :getter="computedCell.value"
+      :color="computedCell.color"
+    />
+    <STableCellPills
+      v-else-if="computedCell.type === 'pills'"
       :value="value"
       :record="record"
-      :getter="cell.value"
-      :color="cell.color"
+      :pills="computedCell.pills"
     />
     <STableCellAvatar
-      v-else-if="cell.type === 'avatar'"
+      v-else-if="computedCell.type === 'avatar'"
       :value="value"
       :record="record"
-      :image="cell.image"
-      :name="cell.name"
-      :link="cell.link"
-      :color="cell.color"
+      :image="computedCell.image"
+      :name="computedCell.name"
+      :link="computedCell.link"
+      :color="computedCell.color"
     />
     <STableCellAvatars
-      v-else-if="cell.type === 'avatars'"
+      v-else-if="computedCell.type === 'avatars'"
       :value="value"
       :record="record"
-      :avatars="cell.avatars"
-      :color="cell.color"
+      :avatars="computedCell.avatars"
+      :color="computedCell.color"
     />
     <component
-      v-else-if="cell.type === 'component'"
-      :is="cell.component"
+      v-else-if="computedCell.type === 'component'"
+      :is="computedCell.component"
       :value="value"
       :record="record"
-      v-bind="cell.props"
+      v-bind="computedCell.props"
     />
   </div>
 </template>

package/lib/components/STableCellDay.vue

@@ -26,8 +26,8 @@ defineProps<{
 .value {
   line-height: 24px;
   font-family: var(--font-family-number);
-  font-size: 12px;
-  font-weight: 500;
+  font-size: var(--table-cell-font-size);
+  font-weight: var(--table-cell-font-weight);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/lib/components/STableCellPill.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import SPill from './SPill.vue'
 
-export type Color = 'info' | 'success' | 'warning' | 'danger' | 'mute'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
   value?: any
@@ -22,7 +23,7 @@ const _value = computed(() => {
 
 const _color = computed(() => {
   if (props.color === undefined) {
-    return null
+    return props.color
   }
 
   return typeof props.color === 'string'
@@ -32,54 +33,21 @@ const _color = computed(() => {
 </script>
 
 <template>
-  <div class="STableCellPill" :class="[_color ?? 'mute']">
-    <div v-if="_value" class="value">{{ _value }}</div>
+  <div class="STableCellPill" :class="[_color ?? 'neutral']">
+    <SPill
+      v-if="_value"
+      size="mini"
+      :mode="_color"
+      :label="value"
+    />
   </div>
 </template>
 
 <style scoped lang="postcss">
 .STableCellPill {
-  padding: 7px 16px 9px;
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
   min-height: 40px;
 }
-
-.value {
-  display: inline-block;
-  border: 1px solid transparent;
-  border-radius: 14px;
-  padding: 0 8px;
-  line-height: 18px;
-  font-size: 12px;
-  font-weight: 500;
-
-  .STableCellPill.info & {
-    border-color: var(--c-info);
-    color: var(--c-info);
-    background-color: var(--c-info-bg);
-  }
-
-  .STableCellPill.success & {
-    border-color: var(--c-success);
-    color: var(--c-success);
-    background-color: var(--c-success-bg);
-  }
-
-  .STableCellPill.warning & {
-    border-color: var(--c-warning);
-    color: var(--c-warning);
-    background-color: var(--c-warning-bg);
-  }
-
-  .STableCellPill.danger & {
-    border-color: var(--c-danger);
-    color: var(--c-danger);
-    background-color: var(--c-danger-bg);
-  }
-
-  .STableCellPill.mute & {
-    border-color: var(--c-divider);
-    color: var(--c-text-2);
-    background-color: var(--c-bg-elv);
-  }
-}
 </style>

package/lib/components/STableCellPills.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TableCellPillColor } from '../composables/Table'
+import STableCellPill from './STableCellPill.vue'
+
+export interface Pill {
+  label: string
+  color: TableCellPillColor
+}
+
+const props = defineProps<{
+  value: string[]
+  record: any
+  pills(value: string[], record: any): Pill[]
+}>()
+
+const items = computed(() => props.pills(props.value, props.record))
+</script>
+
+<template>
+  <div class="STableCellPills">
+    <STableCellPill
+      v-for="item in items"
+      :key="item.label"
+      :value="item.label"
+      :record="record"
+      :color="item.color"
+    />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableCellPills {
+  display: flex;
+  padding: 0 14px;
+
+  :deep(.STableCellPill) {
+    padding-right: 2px;
+    padding-left: 2px;
+  }
+}
+</style>

package/lib/components/STableCellText.vue

@@ -78,8 +78,8 @@ const _iconColor = computed(() => {
 
 .text {
   line-height: 24px;
-  font-size: 12px;
-  font-weight: 500;
+  font-size: var(--table-cell-font-size);
+  font-weight: var(--table-cell-font-weight);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/lib/composables/Table.ts

@@ -25,18 +25,19 @@ export interface TableColumn {
   label: string
   className?: string
   dropdown?: DropdownSection[]
-  cell?: TableCell
+  cell?: TableCell | ((value: any, record: any) => TableCell)
 }
 
 export type TableCell =
   | TableCellText
   | TableCellDay
   | TableCellPill
+  | TableCellPills
   | TableCellAvatar
   | TableCellAvatars
   | TableCellComponent
 
-export type TableCellType = 'text' | 'day' | 'pill' | 'avatar' | 'avatars' | 'component'
+export type TableCellType = 'text' | 'day' | 'pill' | 'pills' | 'avatar' | 'avatars' | 'component'
 
 export interface TableCellBase {
   type: TableCellType
@@ -73,7 +74,17 @@ export interface TableCellPill extends TableCellBase {
   color?: TableCellPillColor | ((value: any) => TableCellPillColor)
 }
 
-export type TableCellPillColor = 'info' | 'success' | 'warning' | 'danger' | 'mute'
+export type TableCellPillColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+
+export interface TableCellPills extends TableCellBase {
+  type: 'pills'
+  pills(value: any, record: any): TableCellPillItem[]
+}
+
+export interface TableCellPillItem {
+  label: string
+  color: TableCellPillColor
+}
 
 export interface TableCellAvatar extends TableCellBase {
   type: 'avatar'

package/lib/composables/Tooltip.ts

@@ -46,8 +46,7 @@ export function useTooltip(
 
     if (tipRect.x < 0) {
       adjustLeftPosition(contentRect.x)
-    }
-    else if (tipRightX > window.outerWidth) {
+    } else if (tipRightX > window.outerWidth) {
       adjustRightPosition(contentRightX)
     }
 

package/lib/composables/Utils.ts

@@ -0,0 +1,9 @@
+import { ComputedRef, computed } from 'vue'
+
+export function computedArray<T = any>(fn: (arr: T[]) => void): ComputedRef<T[]> {
+  return computed(() => {
+    const arr = [] as T[]
+    fn(arr)
+    return arr
+  })
+}