@globalbrain/sefirot 2.7.2 → 2.8.0

package/lib/components/STable.vue

@@ -102,10 +102,17 @@ function updateColWidth(key: string, value: string) {
         >
           <div class="block">
             <div class="row">
-              <STableItem v-for="key in orders" :key="key" :name="key" :width="colWidths[key]">
+              <STableItem
+                v-for="key in orders"
+                :key="key"
+                :name="key"
+                :class-name="columns[key].className"
+                :width="colWidths[key]"
+              >
                 <STableColumn
                   :name="key"
                   :label="columns[key].label"
+                  :class-name="columns[key].className"
                   :dropdown="columns[key].dropdown"
                   @resize="(value) => updateColWidth(key, value)"
                 />
@@ -124,9 +131,16 @@ function updateColWidth(key: string, value: string) {
         >
           <div class="block">
             <div v-for="(record, rIndex) in records" :key="rIndex" class="row">
-              <STableItem v-for="key in orders" :key="key" :name="key" :width="colWidths[key]">
+              <STableItem
+                v-for="key in orders"
+                :key="key"
+                :name="key"
+                :class-name="columns[key].className"
+                :width="colWidths[key]"
+              >
                 <STableCell
                   :name="key"
+                  :class-name="columns[key].className"
                   :cell="columns[key].cell"
                   :value="record[key]"
                   :record="record"

package/lib/components/STableCell.vue

@@ -8,6 +8,7 @@ import STableCellText from './STableCellText.vue'
 
 defineProps<{
   name: string
+  className?: string
   cell?: TableCell
   value: any
   record: any
@@ -16,7 +17,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="STableCell" :class="[`col-${name}`]">
+  <div class="STableCell" :class="[className, `col-${name}`]">
     <STableCellText
       v-if="!cell || cell.type === 'text'"
       :value="value"
@@ -26,6 +27,7 @@ defineProps<{
       :link="cell?.link"
       :color="cell?.color"
       :icon-color="cell?.iconColor"
+      :on-click="cell?.onClick"
     />
     <STableCellDay
       v-else-if="cell.type === 'day'"

package/lib/components/STableCellText.vue

@@ -8,6 +8,7 @@ export type Color =
   | 'soft'
   | 'mute'
   | 'info'
+  | 'success'
   | 'warning'
   | 'danger'
 
@@ -15,10 +16,11 @@ const props = defineProps<{
   value?: any
   record: any
   icon?: any
-  getter?: string | ((value: any) => string)
+  getter?: string | ((value: any, record: any) => string)
   color?: Color | ((value: any, record: any) => Color)
   iconColor?: Color | ((value: any, record: any) => Color)
   link?(value: any, record: any): string
+  onClick?(value: any, record: any): void
 }>()
 
 const _value = computed(() => {
@@ -28,7 +30,7 @@ const _value = computed(() => {
 
   return typeof props.getter === 'string'
     ? props.getter
-    : props.getter(props.value)
+    : props.getter(props.value, props.record)
 })
 
 const _color = computed(() => {
@@ -45,8 +47,14 @@ const _iconColor = computed(() => {
 </script>
 
 <template>
-  <div class="STableCellText" :class="[{ link }, _color]">
-    <SLink v-if="_value" class="container" :href="link?.(value, record)">
+  <div class="STableCellText" :class="[{ link: link || onClick }, _color]">
+    <SLink
+      v-if="_value"
+      class="container"
+      :href="link?.(value, record)"
+      :role="onClick ? 'button' : null"
+      @click="() => onClick?.(value, record)"
+    >
       <div v-if="icon" class="icon" :class="[_iconColor ?? _color]">
         <SIcon :icon="icon" class="svg" />
       </div>
@@ -81,6 +89,7 @@ const _iconColor = computed(() => {
   &.soft    { color: var(--c-text-2); }
   &.mute    { color: var(--c-text-3); }
   &.info    { color: var(--c-info); }
+  &.success { color: var(--c-success); }
   &.warning { color: var(--c-warning); }
   &.danger  { color: var(--c-danger); }
 
@@ -92,9 +101,11 @@ const _iconColor = computed(() => {
   .STableCellText.link &.soft          { color: var(--c-text-2); }
   .STableCellText.link:hover &.soft    { color: var(--c-info); }
   .STableCellText.link &.mute          { color: var(--c-text-3); }
-  .STableCellText.link:hover &.mute    { color: var(--c-info); }
+  .STableCellText.link:hover &.mute    { color: var(--c-text-3); }
   .STableCellText.link &.info          { color: var(--c-info); }
   .STableCellText.link:hover &.info    { color: var(--c-info-dark); }
+  .STableCellText.link &.success       { color: var(--c-success); }
+  .STableCellText.link:hover &.success { color: var(--c-success-dark); }
   .STableCellText.link &.warning       { color: var(--c-warning); }
   .STableCellText.link:hover &.warning { color: var(--c-warning-darker); }
   .STableCellText.link &.danger        { color: var(--c-danger); }
@@ -126,6 +137,8 @@ const _iconColor = computed(() => {
   .STableCellText.link:hover &.mute    { color: var(--c-info); }
   .STableCellText.link &.info          { color: var(--c-info); }
   .STableCellText.link:hover &.info    { color: var(--c-info-dark); }
+  .STableCellText.link &.success       { color: var(--c-success); }
+  .STableCellText.link:hover &.success { color: var(--c-success-dark); }
   .STableCellText.link &.warning       { color: var(--c-warning); }
   .STableCellText.link:hover &.warning { color: var(--c-warning-dark); }
   .STableCellText.link &.danger        { color: var(--c-danger); }

package/lib/components/STableColumn.vue

@@ -112,7 +112,7 @@ function stopDialogPositionListener() {
 </script>
 
 <template>
-  <div class="STableColumn STableCell" :class="[{ active }, className ?? `col-${name}`]" ref="column">
+  <div class="STableColumn STableCell" :class="[{ active }, className, `col-${name}`]" ref="column">
     <div class="container">
       <p class="label">{{ label }}</p>
 

package/lib/components/STableItem.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 defineProps<{
   name: string
+  className?: string
   width?: string
 }>()
 </script>
@@ -8,7 +9,7 @@ defineProps<{
 <template>
   <div
     class="STableItem"
-    :class="[`col-${name}`, { adjusted: width }]"
+    :class="[className, `col-${name}`, { adjusted: width }]"
   >
     <slot />
   </div>

package/lib/composables/Table.ts

@@ -45,10 +45,11 @@ export interface TableCellBase {
 export interface TableCellText extends TableCellBase {
   type: 'text'
   icon?: any
-  value?: string | ((value: any) => string)
+  value?: string | ((value: any, record: any) => string)
   link?(value: any, record: any): string
   color?: TableCellTextColor | ((value: any, record: any) => TableCellTextColor)
   iconColor?: TableCellTextColor | ((value: any, record: any) => TableCellTextColor)
+  onClick?(value: any, record: any): void
 }
 
 export type TableCellTextColor =
@@ -56,6 +57,7 @@ export type TableCellTextColor =
   | 'soft'
   | 'mute'
   | 'info'
+  | 'success'
   | 'warning'
   | 'danger'
 
@@ -99,8 +101,8 @@ export interface TableCellAvatarsOption {
 }
 
 export interface UseTableOptions {
-  orders: string[]
-  columns: TableColumns
+  orders: MaybeRef<string[]>
+  columns: MaybeRef<TableColumns>
   records?: MaybeRef<Record<string, any>[] | null | undefined>
   total?: MaybeRef<number | null | undefined>
   page?: MaybeRef<number | null | undefined>

package/lib/support/Day/Constant.ts

@@ -0,0 +1,32 @@
+// This file is copied from the source to avoid plugin resolution problem.
+
+export const SECONDS_A_MINUTE = 60
+export const SECONDS_A_HOUR = SECONDS_A_MINUTE * 60
+export const SECONDS_A_DAY = SECONDS_A_HOUR * 24
+export const SECONDS_A_WEEK = SECONDS_A_DAY * 7
+
+export const MILLISECONDS_A_SECOND = 1e3
+export const MILLISECONDS_A_MINUTE = SECONDS_A_MINUTE * MILLISECONDS_A_SECOND
+export const MILLISECONDS_A_HOUR = SECONDS_A_HOUR * MILLISECONDS_A_SECOND
+export const MILLISECONDS_A_DAY = SECONDS_A_DAY * MILLISECONDS_A_SECOND
+export const MILLISECONDS_A_WEEK = SECONDS_A_WEEK * MILLISECONDS_A_SECOND
+
+// English locales
+export const MS = 'millisecond'
+export const S = 'second'
+export const MIN = 'minute'
+export const H = 'hour'
+export const D = 'day'
+export const W = 'week'
+export const M = 'month'
+export const Q = 'quarter'
+export const Y = 'year'
+export const DATE = 'date'
+
+export const FORMAT_DEFAULT = 'YYYY-MM-DDTHH:mm:ssZ'
+
+export const INVALID_DATE_STRING = 'Invalid Date'
+
+// Regex
+export const REGEX_PARSE = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/
+export const REGEX_FORMAT = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g

package/lib/support/Day/index.ts

@@ -0,0 +1,11 @@
+import dayjs, { ConfigType, Dayjs } from 'dayjs'
+import { relativeTime } from './plugins/RelativeTime'
+
+export type Day = Dayjs
+export type Input = ConfigType
+
+dayjs.extend(relativeTime)
+
+export function day(input?: Input): Dayjs {
+  return dayjs(input)
+}

package/lib/support/Day/plugins/RelativeTime.ts

@@ -0,0 +1,125 @@
+// This file is copied from the source to avoid plugin resolution problem.
+
+import { PluginFunc } from 'dayjs'
+import * as C from '../Constant'
+
+declare module 'dayjs' {
+  interface Dayjs {
+    fromNow(withoutSuffix?: boolean): string
+    from(compared: ConfigType, withoutSuffix?: boolean): string
+    toNow(withoutSuffix?: boolean): string
+    to(compared: ConfigType, withoutSuffix?: boolean): string
+  }
+}
+
+export interface RelativeTimeOptions {
+  rounding?: (num: number) => number
+  thresholds?: RelativeTimeThreshold[]
+}
+
+export interface RelativeTimeThreshold {
+  l: string
+  r?: number
+  d?: string
+}
+
+export const relativeTime: PluginFunc<RelativeTimeOptions> = (o, c, d) => {
+  o = o || {}
+
+  const proto = c.prototype
+
+  const relObj = {
+    future: 'in %s',
+    past: '%s ago',
+    s: 'a few seconds',
+    m: 'a minute',
+    mm: '%d minutes',
+    h: 'an hour',
+    hh: '%d hours',
+    d: 'a day',
+    dd: '%d days',
+    M: 'a month',
+    MM: '%d months',
+    y: 'a year',
+    yy: '%d years'
+  }
+
+  ;(d as any).en.relativeTime = relObj
+
+  ;(proto as any).fromToBase = (input: any, withoutSuffix: any, instance: any, isFrom: any, postFormat: any) => {
+    const loc = instance.$locale().relativeTime || relObj
+
+    const T = o.thresholds || [
+      { l: 's', r: 44, d: C.S },
+      { l: 'm', r: 89 },
+      { l: 'mm', r: 44, d: C.MIN },
+      { l: 'h', r: 89 },
+      { l: 'hh', r: 21, d: C.H },
+      { l: 'd', r: 35 },
+      { l: 'dd', r: 25, d: C.D },
+      { l: 'M', r: 45 },
+      { l: 'MM', r: 10, d: C.M },
+      { l: 'y', r: 17 },
+      { l: 'yy', d: C.Y }
+    ]
+
+    const Tl = T.length
+
+    let result
+    let out
+    let isFuture
+
+    for (let i = 0; i < Tl; i += 1) {
+      let t = T[i]
+      if (t.d) {
+        result = isFrom
+          ? d(input).diff(instance, (t as any).d, true)
+          : instance.diff(input, t.d, true)
+      }
+      let abs = (o.rounding || Math.round)(Math.abs(result))
+      isFuture = result > 0
+      if (abs <= (t as any).r || !t.r) {
+        if (abs <= 1 && i > 0) { t = T[i - 1] } // 1 minutes -> a minute, 0 seconds -> 0 second
+        const format = loc[t.l]
+        if (postFormat) {
+          abs = postFormat(`${abs}`)
+        }
+        if (typeof format === 'string') {
+          out = (format as any).replace('%d', abs)
+        }
+        else {
+          out = format(abs, withoutSuffix, t.l, isFuture)
+        }
+        break
+      }
+    }
+    if (withoutSuffix) { return out }
+    const pastOrFuture = isFuture ? loc.future : loc.past
+    if (typeof pastOrFuture === 'function') {
+      return pastOrFuture(out)
+    }
+    return pastOrFuture.replace('%s', out)
+  }
+
+  function fromTo(input: any, withoutSuffix: any, instance: any, isFrom?: any) {
+    return (proto as any).fromToBase(input, withoutSuffix, instance, isFrom)
+  }
+
+  proto.to = function (input, withoutSuffix) {
+    return fromTo(input, withoutSuffix, this, true)
+  }
+
+  proto.from = function (input, withoutSuffix) {
+    return fromTo(input, withoutSuffix, this)
+  }
+
+  const makeNow = (thisDay: any) => (thisDay.$u ? (d as any).utc() : d())
+
+  proto.toNow = function (withoutSuffix?: boolean) {
+    return this.to(makeNow(this), withoutSuffix)
+  }
+
+  proto.fromNow = function (withoutSuffix) {
+    return this.from(makeNow(this), withoutSuffix)
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",

package/lib/support/Day.ts

@@ -1,11 +0,0 @@
-import dayjs, { ConfigType, Dayjs } from 'dayjs/esm'
-import RelativeTime from 'dayjs/esm/plugin/relativeTime'
-
-export type Day = Dayjs
-export type Input = ConfigType
-
-dayjs.extend(RelativeTime)
-
-export function day(input?: Input): Dayjs {
-  return dayjs(input)
-}