@globalbrain/sefirot 2.32.0 → 2.34.0

package/lib/components/STableCellDay.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { Day } from '../support/Day'
+import { type Day } from '../support/Day'
 
 const props = defineProps<{
   value?: Day | null

package/lib/components/STableCellPills.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { TableCellPillColor } from '../composables/Table'
+import { type TableCellPillColor } from '../composables/Table'
 import STableCellPill from './STableCellPill.vue'
 
 export interface Pill {

package/lib/components/STableColumn.vue

@@ -1,7 +1,7 @@
 <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 { type DropdownSection } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { isArray } from '../support/Utils'
 import SDropdown from './SDropdown.vue'

package/lib/components/STooltip.vue

@@ -1,34 +1,111 @@
 <script setup lang="ts">
-import { computed, shallowRef } from 'vue'
-import type { Position } from '../composables/Tooltip'
-import { useTooltip } from '../composables/Tooltip'
+import { onKeyStroke } from '@vueuse/core'
+import { computed, ref, shallowRef } from 'vue'
+import { type Position, useTooltip } from '../composables/Tooltip'
 import SMarkdown from './SMarkdown.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   tag?: string
   text?: string
   position?: Position
-}>()
-
+  display?: 'inline' | 'inline-block' | 'block'
+  trigger?: 'hover' | 'focus' | 'both'
+  timeout?: number
+  tabindex?: number
+}>(), {
+  tag: 'span',
+  position: 'top',
+  trigger: 'hover'
+})
+
+const el = shallowRef<HTMLElement | null>(null)
 const tip = shallowRef<HTMLElement | null>(null)
 const content = shallowRef<HTMLElement | null>(null)
-const classes = computed(() => [props.position ?? 'top'])
+
+const rootClasses = computed(() => [
+  props.display,
+  props.tabindex && (props.tabindex > -1) && 'focusable'
+])
+
+const containerClasses = computed(() => [props.position])
+
+const timeoutId = ref<number | null>(null)
+
+const tabindex = computed(() => {
+  if (props.trigger === 'focus' || props.trigger === 'both') {
+    return props.tabindex ?? 0
+  }
+  return -1
+})
 
 const { on, show, hide } = useTooltip(
+  el,
   content,
   tip,
-  computed(() => props.position ?? 'top')
+  computed(() => props.position),
+  timeoutId
 )
+
+onKeyStroke('Escape', (e) => {
+  if (on.value && el.value?.matches(':focus-within')) {
+    e.preventDefault()
+    e.stopPropagation()
+    hide()
+  }
+})
+
+function onMouseEnter() {
+  if (props.trigger === 'hover' || props.trigger === 'both') {
+    show()
+  }
+}
+
+function onMouseLeave() {
+  if (
+    props.trigger === 'hover'
+    || (props.trigger === 'both' && !el.value?.matches(':focus-within'))
+  ) {
+    hide()
+  }
+}
+
+function onFocus() {
+  if (props.trigger === 'focus' || props.trigger === 'both') {
+    show()
+    if (props.timeout) {
+      timeoutId.value = setTimeout(hide, props.timeout) as any
+    }
+  }
+}
+
+function onBlur() {
+  if (
+    props.trigger === 'focus'
+    || (props.trigger === 'both' && !el.value?.matches(':hover'))
+  ) {
+    hide()
+  }
+}
 </script>
 
 <template>
-  <component :is="tag ?? 'span'" class="STooltip" @mouseenter="show" @mouseleave="hide">
+  <component
+    ref="el"
+    :is="tag"
+    class="STooltip"
+    :class="rootClasses"
+    :tabindex="tabindex"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+    @focusin="onFocus"
+    @focusout="onBlur"
+  >
     <span class="content" ref="content">
       <slot />
     </span>
 
     <transition name="fade">
-      <span v-show="on" class="container" :class="classes" ref="tip">
+      <span v-show="on" class="container" :class="containerClasses" 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>
@@ -39,6 +116,18 @@ const { on, show, hide } = useTooltip(
 <style scoped lang="postcss">
 .STooltip {
   position: relative;
+
+  &:focus {
+    outline: none;
+  }
+
+  &.focusable {
+    cursor: pointer;
+  }
+
+  &.inline       { display: inline; }
+  &.inline-block { display: inline-block; }
+  &.block        { display: block; }
 }
 
 .content {
@@ -58,7 +147,7 @@ const { on, show, hide } = useTooltip(
   &.top .tip    { transform: translateY(8px); }
   &.right .tip  { transform: translateX(-8px); }
   &.bottom .tip { transform: translateY(-8px); }
-  &.left  .tip  { transform: translateX(8px); }
+  &.left .tip   { transform: translateX(8px); }
 }
 
 .container.top {
@@ -91,12 +180,11 @@ const { on, show, hide } = useTooltip(
   display: block;
   border: 1px solid var(--tooltip-border-color);
   border-radius: 6px;
-  padding: 12px;
+  padding: 10px 12px;
   width: max-content;
   max-width: var(--tooltip-max-width);
-  line-height: 18px;
+  line-height: 20px;
   font-size: 12px;
-  font-weight: 500;
   color: var(--tooltip-text-color);
   background-color: var(--tooltip-bg-color);
   transition: transform 0.25s;

package/lib/composables/Data.ts

@@ -1,6 +1,6 @@
 import { watchOnce } from '@vueuse/core'
 import cloneDeep from 'lodash-es/cloneDeep'
-import type { WatchSource } from 'vue'
+import { type WatchSource } from 'vue'
 import { reactive } from 'vue'
 import { isNullish, isObject } from '../support/Utils'
 

package/lib/composables/Dropdown.ts

@@ -1,6 +1,6 @@
-import type { MaybeRef } from '@vueuse/core'
+import { type MaybeRef } from '@vueuse/core'
 import { useElementBounding, useWindowSize } from '@vueuse/core'
-import type { Ref } from 'vue'
+import { type Ref } from 'vue'
 import { ref, unref } from 'vue'
 
 export type DropdownSection =

package/lib/composables/Flyout.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import { type Ref } from 'vue'
 import { ref, watch } from 'vue'
 
 export function useFlyout(container?: Ref<any>) {

package/lib/composables/Grid.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import { type Ref } from 'vue'
 import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
 
 export interface Grid {
@@ -13,32 +13,32 @@ export interface UseGridOptions {
 
 type CssStyles = Partial<Record<keyof CSSStyleDeclaration, string>>
 
-export function useGrid(options: UseGridOptions): Grid {
+export function useGrid(options: UseGridOptions = {}): Grid {
   const container: Ref<HTMLElement | null> = ref(null)
 
   const spacerClass = options.class ? toClassName(options.class) : 'spacer'
   const spacerTag = options.tag ?? 'div'
   const type = options.type ?? 'fit'
 
-  const observer = new MutationObserver((_, observer) => {
-    observer.disconnect()
-
-    adjustSpacer()
-
-    observer.observe(container.value!, { childList: true })
-  })
+  let observer: MutationObserver | null = null
 
   watchEffect(() => {
-    observer.disconnect()
+    observer?.disconnect()
 
     if (container.value) {
       adjustSpacer()
-      observer.observe(container.value, { childList: true })
+      observer?.observe(container.value, { childList: true })
     }
   })
 
   onMounted(() => {
     window.addEventListener('resize', adjustSpacer)
+
+    observer = new MutationObserver((_, observer) => {
+      observer.disconnect()
+      adjustSpacer()
+      observer.observe(container.value!, { childList: true })
+    })
   })
 
   onUnmounted(() => {

package/lib/composables/Markdown.ts

@@ -1,8 +1,8 @@
 import MarkdownIt from 'markdown-it'
-import type { Ref } from 'vue'
+import { type Ref } from 'vue'
 import { onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import type { LinkAttrs } from './markdown/LinkPlugin'
+import { type LinkAttrs } from './markdown/LinkPlugin'
 import { isCallbackUrl, isExternalUrl, linkPlugin } from './markdown/LinkPlugin'
 
 export type UseMarkdown = (source: string, inline: boolean) => string

package/lib/composables/Table.ts

@@ -1,7 +1,7 @@
-import type { MaybeRef } from '@vueuse/core'
-import type { Component } from 'vue'
-import type { Day } from '../support/Day'
-import type { DropdownSection } from './Dropdown'
+import { type MaybeRef } from '@vueuse/core'
+import { type Component } from 'vue'
+import { type Day } from '../support/Day'
+import { type DropdownSection } from './Dropdown'
 
 export interface Table<
   O extends string = any,
@@ -20,6 +20,7 @@ export interface Table<
   reset?: MaybeRef<boolean | undefined>
   borderless?: MaybeRef<boolean>
   loading?: MaybeRef<boolean | undefined>
+  virtualScroll?: MaybeRef<boolean | undefined>
   onPrev?(): void
   onNext?(): void
   onReset?(): void

package/lib/composables/Tooltip.ts

@@ -1,29 +1,51 @@
-import type { Ref } from 'vue'
-import { ref } from 'vue'
+import { type Ref, ref } from 'vue'
+
+export interface Tooltip {
+  on: Ref<boolean>
+  show: () => void
+  hide: () => void
+}
 
 export type Position = 'top' | 'right' | 'bottom' | 'left'
 
 const SCREEN_PADDING = 16
 
+const globalHide = ref<() => void>()
+
 /**
  * Prevent tooltip going off-screen by adjusting the position depending on
  * the current window size. This only applies to position `top` and
  * `bottom` since we only care about left and right of the screen.
  */
 export function useTooltip(
+  el: Ref<HTMLElement | null>,
   content: Ref<HTMLElement | null>,
   tip: Ref<HTMLElement | null>,
-  position: Ref<Position>
-) {
+  position: Ref<Position>,
+  timeoutId: Ref<number | null>
+): Tooltip {
   const on = ref(false)
 
   function show(): void {
+    if (on.value) { return }
+    globalHide.value?.()
     setPosition()
     setTimeout(() => { on.value = true })
+    globalHide.value = hide
   }
 
   function hide(): void {
-    setTimeout(() => { on.value = false })
+    if (!on.value) { return }
+    setTimeout(() => {
+      if (timeoutId.value) {
+        clearTimeout(timeoutId.value)
+        timeoutId.value = null
+      }
+      on.value = false
+      if (el.value?.matches(':focus-within')) {
+        (document.activeElement as HTMLElement)?.blur?.()
+      }
+    })
   }
 
   function setPosition(): void {

package/lib/composables/Utils.ts

@@ -1,6 +1,6 @@
-import type { MaybeComputedRef } from '@vueuse/core'
+import { type MaybeComputedRef } from '@vueuse/core'
 import { resolveUnref } from '@vueuse/core'
-import type { ComputedRef } from 'vue'
+import { type ComputedRef } from 'vue'
 import { computed } from 'vue'
 
 export type WhenCondition<T> = MaybeComputedRef<T>

package/lib/composables/Validation.ts

@@ -1,12 +1,12 @@
-import type {
-  GlobalConfig,
-  Validation,
-  ValidationArgs
+import {
+  type GlobalConfig,
+  type Validation,
+  type ValidationArgs
 } from '@vuelidate/core'
 import {
   useVuelidate
 } from '@vuelidate/core'
-import type { Ref, ToRefs } from 'vue'
+import { type Ref, type ToRefs } from 'vue'
 
 export type { Validation, ValidationArgs, GlobalConfig }
 

package/lib/mixins/Sheet.ts

@@ -1,4 +1,4 @@
-import type { App } from 'vue'
+import { type App } from 'vue'
 import SSheet from '../components/SSheet.vue'
 import SSheetFooter from '../components/SSheetFooter.vue'
 import SSheetFooterAction from '../components/SSheetFooterAction.vue'

package/lib/styles/variables.css

@@ -7,6 +7,22 @@
  * -------------------------------------------------------------------------- */
 
 :root {
+  /**
+   * DEPRECATED: These values are no longer used. Equivalent colors are defined
+   * directly in theme-aware color definitions.
+   */
+  --c-white-soft: #fafafa;
+  --c-white-mute: #f2f2f2;
+  --c-white-elv: #fafafa;
+  --c-white-elv-up: #ffffff;
+  --c-white-elv-down: #f2f2f2;
+  --c-black: #000000;
+  --c-black-soft: #171717;
+  --c-black-mute: #1c1c1e;
+  --c-black-elv: #171717;
+  --c-black-elv-up: #1c1c1e;
+  --c-black-elv-down: #000000;
+
   --c-white: #ffffff;
   --c-black: #000000;
 
@@ -135,22 +151,6 @@
   --c-danger-bg-lighter: var(--c-danger-lighter);
   --c-danger-bg-dark: var(--c-danger-dark);
   --c-danger-bg-darker: var(--c-danger-darker);
-
-  /**
-   * DEPRECATED: These values are no longer used. Equivalent colors are defined
-   * directly in theme-aware color definitions.
-   */
-  --c-white-soft: #fafafa;
-  --c-white-mute: #f2f2f2;
-  --c-white-elv: #fafafa;
-  --c-white-elv-up: #ffffff;
-  --c-white-elv-down: #f2f2f2;
-  --c-black: #000000;
-  --c-black-soft: #171717;
-  --c-black-mute: #1c1c1e;
-  --c-black-elv: #171717;
-  --c-black-elv-up: #1c1c1e;
-  --c-black-elv-down: #000000;
 }
 
 /**
@@ -158,6 +158,23 @@
  * -------------------------------------------------------------------------- */
 
 :root {
+  /* DEPRECATED: Use `--c-bg-elv-{number}`. */
+  --c-bg: var(--c-white);
+  --c-bg-soft: var(--c-white-soft);
+  --c-bg-mute: var(--c-white-mute);
+  --c-bg-elv: var(--c-white-elv);
+  --c-bg-elv-up: var(--c-white-elv-up);
+  --c-bg-elv-down: var(--c-white-elv-down);
+  --c-bg-lift-1: var(--c-white-soft);
+  --c-bg-lift-2: var(--c-white-mute);
+
+  /* DEPRECATED: Use `--c-divider-x`. */
+  --c-divider: var(--c-divider-light-1);
+  --c-divider-light: var(--c-divider-light-2);
+
+  /* DEPRECATED: Use `--c-bg-soft`. */
+  --c-soft: var(--c-white-soft);
+
   --c-bg-elv-1: #ffffff;
   --c-bg-elv-2: #f9f9f9;
   --c-bg-elv-3: #ffffff;
@@ -193,26 +210,26 @@
   --c-mute-darker: #d1d1d1;
   --c-mute-dimm-1: #f1f1f1;
   --c-mute-dimm-2: #e3e3e3;
+}
 
-  /* DEPRECATED: Use `--c-bg-elv-{number}`. */
-  --c-bg: var(--c-white);
-  --c-bg-soft: var(--c-white-soft);
-  --c-bg-mute: var(--c-white-mute);
-  --c-bg-elv: var(--c-white-elv);
-  --c-bg-elv-up: var(--c-white-elv-up);
-  --c-bg-elv-down: var(--c-white-elv-down);
-  --c-bg-lift-1: var(--c-white-soft);
-  --c-bg-lift-2: var(--c-white-mute);
+.dark {
+  /* DEPRECATED: Use `--c-bg-elv-x`. */
+  --c-bg-elv: var(--c-black-elv);
+  --c-bg-elv-up: var(--c-black-elv-up);
+  --c-bg-elv-down: var(--c-black-elv-down);
+  --c-bg: var(--c-black);
+  --c-bg-soft: var(--c-black-soft);
+  --c-bg-mute: var(--c-black-mute);
+  --c-bg-lift-1: #222226;
+  --c-bg-lift-2: #2c2c2e;
 
-  /* DEPRECATED: Use `--c-divider-x`. */
-  --c-divider: var(--c-divider-light-1);
-  --c-divider-light: var(--c-divider-light-2);
+  /* DEPRECATED: Use `--c-divider-1` and `--c-divider-2` instead. */
+  --c-divider: var(--c-divider-dark-1);
+  --c-divider-light: var(--c-divider-dark-2);
 
   /* DEPRECATED: Use `--c-bg-soft`. */
-  --c-soft: var(--c-white-soft);
-}
+  --c-soft: #222226;
 
-.dark {
   --c-bg-elv-1: #000000;
   --c-bg-elv-2: #171717;
   --c-bg-elv-3: #1c1c1e;
@@ -248,23 +265,6 @@
   --c-mute-darker: #1c1c1e;
   --c-mute-dimm-1: #222226;
   --c-mute-dimm-2: #2c2c2e;
-
-  /* DEPRECATED: Use `--c-bg-elv-x`. */
-  --c-bg-elv: var(--c-black-elv);
-  --c-bg-elv-up: var(--c-black-elv-up);
-  --c-bg-elv-down: var(--c-black-elv-down);
-  --c-bg: var(--c-black);
-  --c-bg-soft: var(--c-black-soft);
-  --c-bg-mute: var(--c-black-mute);
-  --c-bg-lift-1: #222226;
-  --c-bg-lift-2: #2c2c2e;
-
-  /* DEPRECATED: Use `--c-divider-1` and `--c-divider-2` instead. */
-  --c-divider: var(--c-divider-dark-1);
-  --c-divider-light: var(--c-divider-dark-2);
-
-  /* DEPRECATED: Use `--c-bg-soft`. */
-  --c-soft: #222226;
 }
 
 /**
@@ -658,7 +658,7 @@
   --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);
+  --tooltip-bg-color: var(--c-bg-soft);
 }
 
 /**

package/lib/support/Day.ts

@@ -1,4 +1,4 @@
-import type { ConfigType, Dayjs } from 'dayjs'
+import { type ConfigType, type Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import PluginRelativeTime from 'dayjs/plugin/relativeTime'
 import PluginTimezone from 'dayjs/plugin/timezone'

package/lib/validation/rules/hms.ts

@@ -1,5 +1,5 @@
 import { helpers } from '@vuelidate/validators'
-import type { Hms } from '../../support/Day'
+import { type Hms } from '../../support/Day'
 import { hms as baseHms } from '../validators/hms'
 
 type HmsType = 'h' | 'm' | 's'

package/lib/validation/rules/requiredHms.ts

@@ -1,5 +1,5 @@
 import { helpers } from '@vuelidate/validators'
-import type { Hms } from '../../support/Day'
+import { type Hms } from '../../support/Day'
 import { requiredHms as baseRequiredHms } from '../validators/requiredHms'
 
 type HmsType = 'h' | 'm' | 's'

package/lib/validation/rules/requiredYmd.ts

@@ -1,5 +1,5 @@
 import { helpers } from '@vuelidate/validators'
-import type { Ymd } from '../../support/Day'
+import { type Ymd } from '../../support/Day'
 import { requiredYmd as baseRequiredYmd } from '../validators/requiredYmd'
 
 type YmdType = 'y' | 'm' | 'd'

package/lib/validation/rules/ymd.ts

@@ -1,5 +1,5 @@
 import { helpers } from '@vuelidate/validators'
-import type { Ymd } from '../../support/Day'
+import { type Ymd } from '../../support/Day'
 import { ymd as baseYmd } from '../validators/ymd'
 
 type YmdType = 'y' | 'm' | 'd'

package/lib/validation/validators/hms.ts

@@ -1,4 +1,4 @@
-import type { Hms } from '../../support/Day'
+import { type Hms } from '../../support/Day'
 
 type HmsType = 'h' | 'm' | 's'
 

package/lib/validation/validators/requiredHms.ts

@@ -1,4 +1,4 @@
-import type { Hms } from '../../support/Day'
+import { type Hms } from '../../support/Day'
 
 type HmsType = 'h' | 'm' | 's'
 

package/lib/validation/validators/requiredYmd.ts

@@ -1,4 +1,4 @@
-import type { Ymd } from '../../support/Day'
+import { type Ymd } from '../../support/Day'
 
 type YmdType = 'y' | 'm' | 'd'
 

package/lib/validation/validators/ymd.ts

@@ -1,5 +1,5 @@
 import day from 'dayjs'
-import type { Ymd } from '../../support/Day'
+import { type Ymd } from '../../support/Day'
 
 type YmdType = 'y' | 'm' | 'd'
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.32.0",
-  "packageManager": "pnpm@7.26.2",
+  "version": "2.34.0",
+  "packageManager": "pnpm@8.3.1",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -47,7 +47,7 @@
     "dayjs": "^1.11.7"
   },
   "devDependencies": {
-    "@globalbrain/eslint-config": "^1.3.0",
+    "@globalbrain/eslint-config": "^1.5.0",
     "@histoire/plugin-vue": "^0.15.8",
     "@iconify-icons/ph": "^1.2.3",
     "@iconify/vue": "^4.0.2",
@@ -65,11 +65,11 @@
     "chalk": "^4.1.2",
     "conventional-changelog-cli": "^2.2.2",
     "enquirer": "^2.3.6",
-    "eslint": "^8.35.0",
+    "eslint": "^8.40.0",
     "execa": "^5.1.1",
     "fuse.js": "^6.6.2",
+    "happy-dom": "^9.9.2",
     "histoire": "^0.15.8",
-    "jsdom": "^21.1.1",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.1",
     "normalize.css": "^8.0.1",