@globalbrain/sefirot 2.32.0 → 2.33.0

package/lib/components/SButton.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import type { MaybeRef } from '@vueuse/core'
+import { computed, unref, useSlots } from 'vue'
+import type { Position } from '../composables/Tooltip'
+import SFragment from './SFragment.vue'
 import SIcon from './SIcon.vue'
 import SLink from './SLink.vue'
 import SSpinner from './SSpinner.vue'
+import STooltip from './STooltip.vue'
 
 export type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
 
@@ -18,6 +22,14 @@ export type Mode =
   | 'warning'
   | 'danger'
 
+export interface Tooltip {
+  tag?: string
+  text?: MaybeRef<string>
+  position?: Position
+  trigger?: 'hover' | 'focus' | 'both'
+  timeout?: number
+}
+
 const props = defineProps<{
   tag?: string
   size?: Size
@@ -32,6 +44,7 @@ const props = defineProps<{
   block?: boolean
   loading?: boolean
   disabled?: boolean
+  tooltip?: Tooltip
 }>()
 
 const emit = defineEmits<{
@@ -57,6 +70,12 @@ const computedTag = computed(() => {
     : props.href ? SLink : 'button'
 })
 
+const slots = useSlots()
+
+const hasTooltip = computed(() => {
+  return slots['tooltip-text'] || unref(props.tooltip?.text)
+})
+
 function handleClick(): void {
   if (!props.loading) {
     props.disabled ? emit('disabled-click') : emit('click')
@@ -65,29 +84,41 @@ function handleClick(): void {
 </script>
 
 <template>
-  <Component
-    :is="computedTag"
-    class="SButton"
-    :class="classes"
-    :href="href"
-    role="button"
-    @click="handleClick"
+  <SFragment
+    :is="hasTooltip && STooltip"
+    :tag="tooltip?.tag"
+    :text="unref(tooltip?.text)"
+    :position="tooltip?.position"
+    display="inline-block"
+    :trigger="tooltip?.trigger ?? 'both'"
+    :timeout="tooltip?.timeout"
+    :tabindex="-1"
   >
-    <span class="content">
-      <span v-if="icon" class="icon" :class="iconMode">
-        <SIcon :icon="icon" class="icon-svg" />
+    <template v-if="$slots['tooltip-text']" #text><slot name="tooltip-text" /></template>
+    <component
+      :is="computedTag"
+      class="SButton"
+      :class="classes"
+      :href="href"
+      role="button"
+      @click="handleClick"
+    >
+      <span class="content">
+        <span v-if="icon" class="icon" :class="iconMode">
+          <SIcon :icon="icon" class="icon-svg" />
+        </span>
+        <span v-if="label" class="label" :class="labelMode">
+          {{ label }}
+        </span>
       </span>
-      <span v-if="label" class="label" :class="labelMode">
-        {{ label }}
-      </span>
-    </span>
 
-    <Transition name="fade">
-      <span v-if="loading" key="loading" class="loader">
-        <SSpinner class="loader-icon" />
-      </span>
-    </Transition>
-  </Component>
+      <transition name="fade">
+        <span v-if="loading" key="loading" class="loader">
+          <SSpinner class="loader-icon" />
+        </span>
+      </transition>
+    </component>
+  </SFragment>
 </template>
 
 <style scoped lang="postcss">

package/lib/components/SFragment.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+defineProps<{ is?: any }>()
+</script>
+
+<template>
+  <component v-if="is" :is="is" v-bind="$attrs">
+    <template v-for="(_, slot) of $slots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
+    </template>
+  </component>
+  <slot v-else />
+</template>

package/lib/components/SInputHMS.vue

@@ -15,9 +15,9 @@ export interface Value {
 }
 
 export interface Placeholder {
-  hour: string
-  minute: string
-  second: string
+  hour?: string
+  minute?: string
+  second?: string
 }
 
 export type ValueType = 'hour' | 'minute' | 'second'
@@ -63,9 +63,9 @@ const padValue = computed(() => {
 
 const padPlaceholder = computed(() => {
   return {
-    hour: props.placeholder?.hour.toString().padStart(2, '0') ?? '00',
-    minute: props.placeholder?.minute.toString().padStart(2, '0') ?? '00',
-    second: props.placeholder?.second.toString().padStart(2, '0') ?? '00'
+    hour: props.placeholder?.hour?.toString().padStart(2, '0') ?? '00',
+    minute: props.placeholder?.minute?.toString().padStart(2, '0') ?? '00',
+    second: props.placeholder?.second?.toString().padStart(2, '0') ?? '00'
   }
 })
 

package/lib/components/SInputYMD.vue

@@ -17,9 +17,9 @@ export interface Value {
 export type ValueType = 'year' | 'month' | 'date'
 
 export interface Placeholder {
-  year: number
-  month: number
-  date: number
+  year?: number
+  month?: number
+  date?: number
 }
 
 const props = defineProps<{
@@ -64,9 +64,9 @@ const padValue = computed(() => {
 
 const padPlaceholder = computed(() => {
   return {
-    year: props.placeholder?.year.toString().padStart(4, '0') ?? '1998',
-    month: props.placeholder?.month.toString().padStart(2, '0') ?? '01',
-    date: props.placeholder?.date.toString().padStart(2, '0') ?? '14'
+    year: props.placeholder?.year?.toString().padStart(4, '0') ?? '1998',
+    month: props.placeholder?.month?.toString().padStart(2, '0') ?? '01',
+    date: props.placeholder?.date?.toString().padStart(2, '0') ?? '14'
   }
 })
 

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/Grid.ts

@@ -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/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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.32.0",
-  "packageManager": "pnpm@7.26.2",
+  "version": "2.33.0",
+  "packageManager": "pnpm@8.3.1",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -68,8 +68,8 @@
     "eslint": "^8.35.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",