@globalbrain/sefirot 2.12.0 → 2.14.0

package/lib/components/STooltip.vue

@@ -1,112 +1,111 @@
 <script setup lang="ts">
-import { PropType, computed, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { Position, useTooltip } from '../composables/Tooltip'
 import SMarkdown from './SMarkdown.vue'
 
-const props = defineProps({
-  tag: { type: String, default: 'span' },
-  text: { type: String, default: null },
-  position: { type: String as PropType<Position>, default: 'top' }
-})
+const props = defineProps<{
+  tag?: string
+  text?: string
+  position?: Position
+}>()
 
 const tip = ref<HTMLElement | null>(null)
 const content = ref<HTMLElement | null>(null)
-const classes = computed(() => [props.position])
-const { on, show, hide } = useTooltip(content, tip, props.position)
+const classes = computed(() => [props.position ?? 'top'])
+
+const { on, show, hide } = useTooltip(
+  content,
+  tip,
+  computed(() => props.position ?? 'top')
+)
 </script>
 
 <template>
-  <component :is="tag" class="STooltip" @mouseenter="show" @mouseleave="hide">
-    <template v-if="text">
-      <span ref="content" class="STooltip-content">
-        <slot />
-      </span>
-
-      <transition name="fade">
-        <span v-show="on" ref="tip" class="STooltip-container" :class="classes">
-          <SMarkdown class="STooltip-tip" :content="text" inline />
-        </span>
-      </transition>
-    </template>
-
-    <template v-else>
-      <span class="STooltip-content">
-        <slot />
+  <component :is="tag ?? 'span'" class="STooltip" @mouseenter="show" @mouseleave="hide">
+    <span class="content" ref="content">
+      <slot />
+    </span>
+
+    <transition name="fade">
+      <span v-show="on" class="container" :class="classes" ref="tip">
+        <span v-if="$slots.text" class="tip"><slot name="text" /></span>
+        <SMarkdown v-else-if="text" tag="span" class="tip" :content="text" inline />
       </span>
-    </template>
+    </transition>
   </component>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .STooltip {
   position: relative;
 }
 
-.STooltip-container {
+.content {
+  white-space: nowrap;
+}
+
+.container {
   position: absolute;
-  display: block;
-  transition: opacity .25s;
   z-index: var(--z-index-tooltip);
+  display: block;
+  transition: opacity 0.25s;
 }
 
-.STooltip-container.fade-enter,
-.STooltip-container.fade-leave-to {
+.container.fade-enter-from,
+.container.fade-leave-to {
   opacity: 0;
-  &.top .STooltip-tip    { transform: translateY(8px); }
-  &.right .STooltip-tip  { transform: translateX(-8px); }
-  &.bottom .STooltip-tip { transform: translateY(-8px); }
-  &.left  .STooltip-tip  { transform: translateX(8px); }
+  &.top .tip    { transform: translateY(8px); }
+  &.right .tip  { transform: translateX(-8px); }
+  &.bottom .tip { transform: translateY(-8px); }
+  &.left  .tip  { transform: translateX(8px); }
 }
 
-.STooltip-container.top {
+.container.top {
   top: 0;
   left: 50%;
   padding-bottom: 8px;
   transform: translate(-50%, -100%);
 }
 
-.STooltip-container.right {
+.container.right {
   top: 50%;
   left: 100%;
   transform: translate(8px, -50%);
 }
 
-.STooltip-container.bottom {
+.container.bottom {
   bottom: 0;
   left: 50%;
   padding-top: 8px;
   transform: translate(-50%, 100%);
 }
 
-.STooltip-container.left {
+.container.left {
   top: 50%;
   right: 100%;
   transform: translate(-8px, -50%);
 }
 
-.STooltip-tip {
+.tip {
   display: block;
-  border-radius: 4px;
+  border: 1px solid var(--tooltip-border-color);
+  border-radius: 6px;
   padding: 12px;
   width: max-content;
-  max-width: 288px;
+  max-width: var(--tooltip-max-width);
   line-height: 18px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--c-text-dark-1);
-  background-color: rgba(0, 0, 0, .9);
-  transition: transform .25s;
+  color: var(--tooltip-text-color);
+  background-color: var(--tooltip-bg-color);
+  transition: transform 0.25s;
 }
 
-.STooltip-tip :deep(a) {
-  color: var(--c-info);
+.tip :deep(a) {
+  color: var(--c-info-text);
 
   &:hover {
-    color: var(--c-info-dark);
+    color: var(--c-info-text-dark);
   }
 }
-
-.STooltip-content {
-  white-space: nowrap;
-}
 </style>

package/lib/composables/Table.ts

@@ -6,6 +6,8 @@ export interface Table {
   orders: string[]
   columns: TableColumns
   records?: Record<string, any>[] | null
+  header?: boolean
+  footer?: boolean
   total?: number | null
   page?: number | null
   perPage?: number | null
@@ -25,6 +27,7 @@ export interface TableColumn {
   label: string
   className?: string
   dropdown?: DropdownSection[]
+  resizable?: boolean
   cell?: TableCell | ((value: any, record: any) => TableCell)
 }
 
@@ -115,6 +118,8 @@ export interface UseTableOptions {
   orders: MaybeRef<string[]>
   columns: MaybeRef<TableColumns>
   records?: MaybeRef<Record<string, any>[] | null | undefined>
+  header?: MaybeRef<boolean | undefined>
+  footer?: MaybeRef<boolean | undefined>
   total?: MaybeRef<number | null | undefined>
   page?: MaybeRef<number | null | undefined>
   perPage?: MaybeRef<number | null | undefined>

package/lib/composables/Tooltip.ts

@@ -12,7 +12,7 @@ const SCREEN_PADDING = 16
 export function useTooltip(
   content: Ref<HTMLElement | null>,
   tip: Ref<HTMLElement | null>,
-  position: Position
+  position: Ref<Position>
 ) {
   const on = ref(false)
 
@@ -72,7 +72,7 @@ export function useTooltip(
   }
 
   function setTransform(x: number): void {
-    tip.value!.style.transform = `translate(${x}px, ${position === 'top' ? -100 : 100}%)`
+    tip.value!.style.transform = `translate(${x}px, ${position.value === 'top' ? -100 : 100}%)`
   }
 
   function shouldPosition(): boolean {
@@ -80,7 +80,7 @@ export function useTooltip(
       return false
     }
 
-    return position === 'top' || position === 'bottom'
+    return position.value === 'top' || position.value === 'bottom'
   }
 
   return {

package/lib/composables/Utils.ts

@@ -1,5 +1,31 @@
+import { MaybeComputedRef, resolveUnref } from '@vueuse/core'
 import { ComputedRef, computed } from 'vue'
 
+export type WhenCondition<T> = MaybeComputedRef<T>
+
+export function computedWhen<T, C>(
+  condition: WhenCondition<C>,
+  fn: (item: NonNullable<C>) => T
+): ComputedRef<T | undefined>
+
+export function computedWhen<T, C, D>(
+  condition: WhenCondition<C>,
+  fn: (item: NonNullable<C>) => T,
+  whenFalse: D
+): ComputedRef<T | D>
+
+export function computedWhen<T, C, D>(
+  condition: WhenCondition<C>,
+  fn: (item: NonNullable<C>) => T,
+  whenFalse?: D
+): ComputedRef<T | D> {
+  return computed(() => {
+    const c = resolveUnref(condition)
+
+    return c ? fn(c) : whenFalse as D
+  })
+}
+
 export function computedArray<T = any>(fn: (arr: T[]) => void): ComputedRef<T[]> {
   return computed(() => {
     const arr = [] as T[]

package/lib/composables/Validation.ts

@@ -1,5 +1,4 @@
 import {
-  ErrorObject,
   GlobalConfig,
   Validation,
   ValidationArgs,
@@ -11,11 +10,15 @@ export type { Validation, ValidationArgs, GlobalConfig }
 
 export interface Validatable {
   readonly $dirty: boolean
-  readonly $errors: ErrorObject[]
   readonly $invalid: boolean
+  readonly $errors: ValidatableError[]
   readonly $touch: () => void
 }
 
+export interface ValidatableError {
+  readonly $message: string | Ref<string>
+}
+
 export function useValidation<
   T extends { [key in keyof R]: any },
   R extends ValidationArgs = ValidationArgs

package/lib/styles/variables.css

@@ -287,6 +287,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
+  --z-index-tooltip: 10;
   --z-index-dropdown: 1000;
   --z-index-backdrop: 2000;
 }
@@ -594,6 +595,17 @@
   --pill-fill-danger-active-bg-color: var(--c-danger-bg-darker);
 }
 
+/**
+ * Component: Tooltip
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --tooltip-max-width: 288px;
+  --tooltip-border-color: var(--c-divider-2);
+  --tooltip-text-color: var(--c-text-1);
+  --tooltip-bg-color: var(--c-bg-elv-3);
+}
+
 /**
  * Component: Dropdown
  * -------------------------------------------------------------------------- */
@@ -611,7 +623,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --table-border: 1px solid var(--c-divider-light);
+  --table-border: 1px solid var(--c-divider-2);
   --table-border-top: var(--table-border);
   --table-border-right: var(--table-border);
   --table-border-bottom: var(--table-border);

package/lib/support/Day.ts

@@ -0,0 +1,23 @@
+import dayjs, { ConfigType, Dayjs } from 'dayjs'
+import PluginRelativeTime from 'dayjs/plugin/relativeTime'
+import PluginTimezone from 'dayjs/plugin/timezone'
+import PluginUtc from 'dayjs/plugin/utc'
+
+export type Day = Dayjs
+export type Input = ConfigType
+
+dayjs.extend(PluginUtc)
+dayjs.extend(PluginTimezone)
+dayjs.extend(PluginRelativeTime)
+
+export function day(input?: Input): Day {
+  return dayjs(input)
+}
+
+export function utc(input?: Input): Day {
+  return dayjs.utc(input)
+}
+
+export function tz(input?: Input, timezone?: string): Day {
+  return dayjs.tz(input, timezone)
+}

package/lib/support/Time.ts

@@ -1,13 +1,9 @@
-type Awaited<T> = T extends undefined
-  ? T
-  : T extends PromiseLike<infer U> ? U : T
-
 export function sleep(ms = 500): Promise<undefined> {
   return new Promise<undefined>((resolve) => setTimeout(resolve, ms))
 }
 
-export function delay<T extends any[]>(
-  iterable: T,
+export function delay<T extends unknown[]>(
+  iterable: [...T],
   ms?: number
 ): Promise<{ [P in keyof T]: Awaited<T[P]> }> {
   return Promise.all([...iterable, sleep(ms)]) as any

package/lib/validation/rules/index.ts

@@ -1,19 +1,19 @@
-export { or, and, not } from '@vuelidate/validators'
-
+export { and, not, or } from '@vuelidate/validators'
 export * from './checked'
+export * from './decimal'
 export * from './email'
 export * from './fileExtension'
 export * from './hms'
+export * from './maxFileSize'
 export * from './maxLength'
-export * from './minLength'
 export * from './maxValue'
+export * from './minLength'
 export * from './minValue'
+export * from './month'
 export * from './required'
 export * from './requiredHms'
 export * from './requiredIf'
 export * from './requiredYmd'
+export * from './rule'
 export * from './url'
-export * from './decimal'
-export * from './month'
 export * from './ymd'
-export * from './rule'

package/lib/validation/rules/maxFileSize.ts

@@ -0,0 +1,16 @@
+import { helpers } from '@vuelidate/validators'
+import { maxFileSize as baseMaxFileSize } from '../validators/maxFileSize'
+
+export function maxFileSize(size: string, msg?: string) {
+  return helpers.withParams(
+    { size },
+    helpers.withMessage(
+      ({ $params }) => {
+        return msg ?? `The file must be smaller than ${$params.size}.`
+      },
+      (value: File) => {
+        return !helpers.req(value) || baseMaxFileSize(value, size)
+      }
+    )
+  )
+}

package/lib/validation/validators/maxFileSize.ts

@@ -0,0 +1,10 @@
+export function maxFileSize(file: File, size: string): boolean {
+  const factor = /gb/i.test(size)
+    ? 1e9
+    : /mb/i.test(size)
+      ? 1e6
+      : /kb/i.test(size)
+        ? 1e3
+        : 1
+  return file.size <= factor * +size.replace(/[^\d\.]/g, '')
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.12.0",
+  "version": "2.14.0",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -52,9 +52,9 @@
     "@types/body-scroll-lock": "^3.1.0",
     "@types/lodash-es": "^4.17.6",
     "@types/markdown-it": "^12.2.3",
-    "@types/node": "^18.11.11",
-    "@vitejs/plugin-vue": "^3.2.0",
-    "@vitest/coverage-c8": "^0.25.3",
+    "@types/node": "^18.11.18",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitest/coverage-c8": "^0.27.2",
     "@vue/test-utils": "^2.2.7",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
@@ -63,10 +63,10 @@
     "chalk": "^4.1.2",
     "conventional-changelog-cli": "^2.2.2",
     "enquirer": "^2.3.6",
-    "eslint": "^8.31.0",
+    "eslint": "^8.32.0",
     "execa": "^5.1.1",
     "fuse.js": "^6.6.2",
-    "happy-dom": "^8.1.0",
+    "happy-dom": "^8.1.4",
     "histoire": "^0.12.4",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.1",
@@ -77,12 +77,12 @@
     "semver": "^7.3.8",
     "typescript": "^4.9.4",
     "v-calendar": "3.0.0-alpha.8",
-    "vite": "^3.2.5",
-    "vitepress": "1.0.0-alpha.35",
-    "vitest": "^0.25.3",
+    "vite": "^4.0.4",
+    "vitepress": "1.0.0-alpha.38",
+    "vitest": "^0.27.2",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
-    "vue-tsc": "^1.0.11"
+    "vue-tsc": "^1.0.24"
   },
   "scripts": {
     "docs": "vitepress dev docs --port 4000",

package/lib/support/Day/Constant.ts

@@ -1,32 +0,0 @@
-// 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

@@ -1,11 +0,0 @@
-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): Day {
-  return dayjs(input)
-}

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

@@ -1,124 +0,0 @@
-// 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)
-  }
-}