@globalbrain/sefirot 2.10.0 → 2.12.0

package/lib/components/STable.vue

@@ -180,8 +180,11 @@ function updateColWidth(key: string, value: string) {
 <style scoped lang="postcss">
 .box {
   position: relative;
-  border: 1px solid var(--c-divider-light);
-  border-radius: 6px;
+  border-top: var(--table-border);
+  border-right: var(--table-border);
+  border-bottom: var(--table-border);
+  border-left: var(--table-border);
+  border-radius: var(--table-border-radius);
   width: 100%;
 
   .STable.borderless & {

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/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

@@ -74,7 +74,7 @@ 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'

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
+  })
+}