@globalbrain/sefirot 3.41.0 → 3.42.0

package/lib/components/STooltip.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onKeyStroke } from '@vueuse/core'
-import { computed, ref, shallowRef } from 'vue'
+import { onClickOutside, onKeyStroke, useElementHover, useFocusWithin } from '@vueuse/core'
+import { computed, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
 import { type Position, useTooltip } from '../composables/Tooltip'
 
 const props = withDefaults(defineProps<{
@@ -17,13 +17,13 @@ const props = withDefaults(defineProps<{
   trigger: 'hover'
 })
 
-const el = shallowRef<HTMLElement | null>(null)
-const tip = shallowRef<HTMLElement | null>(null)
+const root = shallowRef<HTMLElement | null>(null)
 const content = shallowRef<HTMLElement | null>(null)
+const trigger = shallowRef<HTMLElement | null>(null)
 
 const rootClasses = computed(() => [
   props.display,
-  props.tabindex && (props.tabindex > -1) && 'focusable'
+  props.tabindex && props.tabindex > -1 && 'focusable'
 ])
 
 const containerClasses = computed(() => [props.position])
@@ -38,77 +38,76 @@ const tabindex = computed(() => {
 })
 
 const { on, show, hide } = useTooltip(
-  el,
+  root,
+  trigger,
   content,
-  tip,
   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()
+const isRootHovered = useElementHover(root, { delayLeave: 100 })
+const isContentHovered = useElementHover(content, { delayLeave: 100 })
+const { focused: isRootFocused } = useFocusWithin(root)
+const { focused: isContentFocused } = useFocusWithin(content)
+const ignore = ref(false)
+
+watch(
+  [isRootHovered, isContentHovered, isRootFocused, isContentFocused],
+  ([rootHover, contentHover, rootFocus, contentFocus]) => {
+    if (ignore.value) { return }
+    if (
+      (props.trigger === 'hover' && (rootHover || contentHover))
+      || (props.trigger === 'focus' && (rootFocus || contentHover || contentFocus))
+      || (props.trigger === 'both' && (rootHover || contentHover || rootFocus || contentFocus))
+    ) {
+      show()
+
+      if (rootFocus && props.timeout) {
+        timeoutId.value = window.setTimeout(hide, props.timeout)
+      }
+    } else {
+      hide()
+    }
   }
-}
+)
 
-function onFocus() {
-  if (props.trigger === 'focus' || props.trigger === 'both') {
-    show()
-    if (props.timeout) {
-      timeoutId.value = setTimeout(hide, props.timeout) as any
+const cleanups = [
+  onKeyStroke('Escape', (e) => {
+    if (
+      on.value
+      && props.trigger !== 'hover'
+      && (isRootFocused.value || isContentHovered.value || isContentFocused.value)
+    ) {
+      e.preventDefault()
+      e.stopPropagation()
+      ignore.value = true
+      hide()
+      setTimeout(() => { ignore.value = false })
     }
-  }
-}
+  }),
+  onClickOutside(root, hide, { ignore: [content] }),
+  () => timeoutId.value != null && window.clearTimeout(timeoutId.value)
+]
 
-function onBlur() {
-  if (
-    props.trigger === 'focus'
-    || (props.trigger === 'both' && !el.value?.matches(':hover'))
-  ) {
-    hide()
-  }
-}
+onBeforeUnmount(() => {
+  cleanups.forEach((cleanup) => cleanup())
+})
 </script>
 
 <template>
-  <component
-    ref="el"
-    :is="tag"
-    class="STooltip"
-    :class="rootClasses"
-    :tabindex="tabindex"
-    @mouseenter="onMouseEnter"
-    @mouseleave="onMouseLeave"
-    @focusin="onFocus"
-    @focusout="onBlur"
-  >
-    <span class="content" ref="content">
+  <component ref="root" :is="tag" class="STooltip" :class="rootClasses" :tabindex="tabindex">
+    <span class="trigger" ref="trigger">
       <slot />
     </span>
 
-    <transition name="fade">
-      <span v-show="on" class="container" :class="containerClasses" ref="tip">
-        <span v-if="$slots.text" class="tip"><slot name="text" /></span>
-        <span v-else-if="text" class="tip" v-html="text" />
-      </span>
-    </transition>
+    <Teleport to="#sefirot-modals">
+      <Transition name="fade">
+        <span v-show="on" class="container" :class="containerClasses" ref="content">
+          <span v-if="$slots.text" class="tip"><slot name="text" /></span>
+          <span v-else-if="text" class="tip" v-html="text" />
+        </span>
+      </Transition>
+    </Teleport>
   </component>
 </template>
 
@@ -129,7 +128,7 @@ function onBlur() {
   &.block        { display: block; }
 }
 
-.content {
+.trigger {
   white-space: nowrap;
 }
 
@@ -138,6 +137,7 @@ function onBlur() {
   z-index: var(--z-index-tooltip);
   display: block;
   transition: opacity 0.25s;
+  padding: 8px;
 }
 
 .container.fade-enter-from,
@@ -149,37 +149,11 @@ function onBlur() {
   &.left .tip   { transform: translateX(8px); }
 }
 
-.container.top {
-  top: 0;
-  left: 50%;
-  padding-bottom: 8px;
-  transform: translate(-50%, -100%);
-}
-
-.container.right {
-  top: 50%;
-  left: 100%;
-  transform: translate(8px, -50%);
-}
-
-.container.bottom {
-  bottom: 0;
-  left: 50%;
-  padding-top: 8px;
-  transform: translate(-50%, 100%);
-}
-
-.container.left {
-  top: 50%;
-  right: 100%;
-  transform: translate(-8px, -50%);
-}
-
 .tip {
   display: block;
   border: 1px solid var(--tooltip-border-color);
   border-radius: 6px;
-  padding: 10px 12px;
+  padding: 8px 12px;
   width: max-content;
   max-width: var(--tooltip-max-width);
   line-height: 20px;

package/lib/composables/Tooltip.ts

@@ -1,113 +1,148 @@
 import { type Ref, ref } from 'vue'
 
-export interface Tooltip {
-  on: Ref<boolean>
-  show: () => void
-  hide: () => void
-}
-
 export type Position = 'top' | 'right' | 'bottom' | 'left'
 
 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.
+ * the current window size.
  */
 export function useTooltip(
-  el: Ref<HTMLElement | null>,
+  root: Ref<HTMLElement | null>,
+  trigger: Ref<HTMLElement | null>,
   content: Ref<HTMLElement | null>,
-  tip: Ref<HTMLElement | null>,
   position: Ref<Position>,
   timeoutId: Ref<number | null>
-): Tooltip {
+) {
   const on = ref(false)
+  const showTimeout = ref<number | null>()
 
   function show(): void {
     if (on.value) { return }
     globalHide.value?.()
-    setPosition()
-    setTimeout(() => { on.value = true })
+    setPosition(trigger.value, content.value, position.value)
+    showTimeout.value = window.setTimeout(() => {
+      showTimeout.value = null
+      on.value = true
+    }, 200)
     globalHide.value = hide
   }
 
   function hide(): void {
+    if (showTimeout.value != null) {
+      window.clearTimeout(showTimeout.value)
+      showTimeout.value = null
+    }
+    if (timeoutId.value != null) {
+      window.clearTimeout(timeoutId.value)
+      timeoutId.value = null
+    }
     if (!on.value) { return }
-    setTimeout(() => {
-      if (timeoutId.value) {
-        clearTimeout(timeoutId.value)
-        timeoutId.value = null
-      }
+    globalHide.value = undefined
+    window.setTimeout(() => {
       on.value = false
-      if (el.value?.matches(':focus-within')) {
-        (document.activeElement as HTMLElement)?.blur?.()
+      if (root.value?.matches(':focus-within')) {
+        ;(document.activeElement as HTMLElement)?.blur?.()
       }
     })
   }
 
-  function setPosition(): void {
-    if (shouldPosition()) {
-      doSetPosition()
-    }
+  return {
+    on,
+    show,
+    hide
   }
+}
 
-  function doSetPosition(): void {
-    // Reset position first so that we can get the original position.
-    resetPosition()
-
-    // Temporally show tip to get its size.
-    tip.value!.style.display = 'block'
+function setPosition(
+  trigger: HTMLElement | null,
+  content: HTMLElement | null,
+  placement: Position
+): void {
+  if (typeof document === 'undefined' || !trigger || !content) { return }
 
-    const screenPadding = document.body.clientWidth >= 512 ? 24 : 8
-    const contentRect = content.value!.getBoundingClientRect()
-    const tipRect = tip.value!.getBoundingClientRect()
+  const pos = getCurrentPositions(trigger, content)
 
-    const contentRightX = contentRect.x + contentRect.width
-    const tipRightX = tipRect.x + tipRect.width
+  let top = pos.minY
+  let left = pos.minX
 
-    if (tipRect.x < screenPadding) {
-      adjustLeftPosition(screenPadding, contentRect.x)
-    } else if (tipRightX > (document.body.clientWidth - screenPadding)) {
-      adjustRightPosition(screenPadding, contentRightX)
+  if (placement === 'top') {
+    top = pos.triggerTop - pos.contentHeight
+    if (top < pos.minY) {
+      top = pos.triggerTop + pos.triggerHeight
+    }
+    left = pos.triggerLeft + pos.triggerWidth / 2 - pos.contentWidth / 2
+    if (left + pos.contentWidth > pos.maxX) {
+      left = pos.maxX - pos.contentWidth
+    }
+    if (left < pos.minX) {
+      left = pos.minX
+    }
+  } else if (placement === 'right') {
+    top = pos.triggerTop + pos.triggerHeight / 2 - pos.contentHeight / 2
+    if (top + pos.contentHeight > pos.maxY) {
+      top = pos.maxY - pos.contentHeight
+    }
+    if (top < pos.minY) {
+      top = pos.minY
+    }
+    left = pos.triggerLeft + pos.triggerWidth
+    if (left + pos.contentWidth > pos.maxX) {
+      left = pos.triggerLeft - pos.contentWidth
+    }
+  } else if (placement === 'bottom') {
+    top = pos.triggerTop + pos.triggerHeight
+    if (top + pos.contentHeight > pos.maxY) {
+      top = pos.triggerTop - pos.contentHeight
+    }
+    left = pos.triggerLeft + pos.triggerWidth / 2 - pos.contentWidth / 2
+    if (left + pos.contentWidth > pos.maxX) {
+      left = pos.maxX - pos.contentWidth
+    }
+    if (left < pos.minX) {
+      left = pos.minX
+    }
+  } else if (placement === 'left') {
+    top = pos.triggerTop + pos.triggerHeight / 2 - pos.contentHeight / 2
+    if (top + pos.contentHeight > pos.maxY) {
+      top = pos.maxY - pos.contentHeight
+    }
+    if (top < pos.minY) {
+      top = pos.minY
+    }
+    left = pos.triggerLeft - pos.contentWidth
+    if (left < pos.minX) {
+      left = pos.triggerLeft + pos.triggerWidth
     }
-
-    tip.value!.style.display = 'none'
-  }
-
-  function adjustLeftPosition(screenPadding: number, contentRectX: number): void {
-    tip.value!.style.left = '0'
-    tip.value!.style.right = 'auto'
-    setTransform(-contentRectX + screenPadding)
-  }
-
-  function adjustRightPosition(screenPadding: number, contentRightX: number): void {
-    tip.value!.style.left = 'auto'
-    tip.value!.style.right = '0'
-    setTransform((document.body.clientWidth - contentRightX) - screenPadding)
-  }
-
-  function resetPosition(): void {
-    tip.value!.style.left = ''
-    tip.value!.style.right = ''
-    tip.value!.style.transform = ''
-  }
-
-  function setTransform(x: number): void {
-    tip.value!.style.transform = `translate(${x}px, ${position.value === 'top' ? -100 : 100}%)`
   }
 
-  function shouldPosition(): boolean {
-    if (!tip.value || !content.value) {
-      return false
-    }
+  content.style.top = `${top}px`
+  content.style.left = `${left}px`
+}
 
-    return position.value === 'top' || position.value === 'bottom'
-  }
+function getCurrentPositions(trigger: HTMLElement, content: HTMLElement) {
+  const bodyRect = document.body.getBoundingClientRect()
+  const triggerRect = trigger.getBoundingClientRect()
+  const contentDisplay = content.style.display
+  content.style.display = 'block'
+  const contentRect = content.getBoundingClientRect()
+  content.style.display = contentDisplay
 
   return {
-    on,
-    show,
-    hide
+    minX: -bodyRect.left,
+    minY: -bodyRect.top,
+    maxX: bodyRect.width - bodyRect.left,
+    maxY: bodyRect.height - bodyRect.top,
+
+    triggerTop: triggerRect.top - bodyRect.top,
+    triggerLeft: triggerRect.left - bodyRect.left,
+    triggerWidth: triggerRect.width,
+    triggerHeight: triggerRect.height,
+
+    contentTop: contentRect.top - bodyRect.top,
+    contentLeft: contentRect.left - bodyRect.left,
+    contentWidth: contentRect.width,
+    contentHeight: contentRect.height
   }
 }

package/lib/validation/Rule.ts

@@ -6,6 +6,7 @@ import { _required } from './validators'
 export interface RuleOptions {
   optional?: boolean
   async?: boolean
+  params?: Record<string, any>
   message(params: MessageProps): string
   validation(value: unknown): boolean | Promise<boolean>
 }
@@ -19,14 +20,27 @@ export function createRule(
 ): ValidationRuleWithParams {
   const lang = useLang()
 
-  function validation(value: unknown) {
-    return options.optional && !_required(value)
-      ? true
-      : options.validation(value)
-  }
+  const params = options.params ?? {}
+
+  const validator = helpers.withParams(
+    params,
+    (value: unknown) => {
+      return options.optional && !_required(value)
+        ? true
+        : options.validation(value)
+    }
+  )
 
   return helpers.withMessage(
     (params) => options.message({ ...params, lang }),
-    options.async ? helpers.withAsync(validation) : validation
+    options.async
+      ? helpers.withAsync(validator, createParamsForAsyncValidator(params))
+      : validator
   )
 }
+
+function createParamsForAsyncValidator(params: Record<string, any>) {
+  return Object.keys(params).map((key) => {
+    return params[key]
+  })
+}

package/lib/validation/rules/requiredHmsIf.ts

@@ -10,6 +10,7 @@ export const message = {
 export function requiredHmsIf(condition: RequiredIfCondition, required?: HmsType[], msg?: string) {
   return createRule({
     async: true,
+    params: { condition },
     message: ({ lang }) => msg ?? message[lang],
     validation: (value) => baseRequiredHmsIf(value, condition, required)
   })

package/lib/validation/rules/requiredIf.ts

@@ -12,6 +12,7 @@ export function requiredIf(
 ) {
   return createRule({
     async: true,
+    params: { condition },
     message: ({ lang }) => msg ?? message[lang],
     validation: (value) => baseRequiredIf(value, condition)
   })

package/lib/validation/rules/requiredYmdIf.ts

@@ -10,6 +10,7 @@ export const message = {
 export function requiredYmdIf(condition: RequiredIfCondition, required?: YmdType[], msg?: string) {
   return createRule({
     async: true,
+    params: { condition },
     message: ({ lang }) => msg ?? message[lang],
     validation: (value) => baseRequiredYmdIf(value, condition, required)
   })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.41.0",
-  "packageManager": "pnpm@8.15.5",
+  "version": "3.42.0",
+  "packageManager": "pnpm@8.15.7",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -45,8 +45,9 @@
     "@iconify/vue": "^4.1.1",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
-    "@types/markdown-it": "^13.0.7",
-    "@vue/reactivity": "^3.4.21",
+    "@types/markdown-it": "^14.0.1",
+    "@vue/reactivity": "^3.4.22",
+    "@vue/runtime-core": "^3.4.22",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^10.9.0",
@@ -59,20 +60,20 @@
     "postcss": "^8.4.38",
     "postcss-nested": "^6.0.1",
     "v-calendar": "^3.1.2",
-    "vue": "^3.4.21",
+    "vue": "^3.4.22",
     "vue-router": "^4.3.0"
   },
   "dependencies": {
-    "@sentry/browser": "^8.0.0-alpha.7",
+    "@sentry/browser": "^8.0.0-beta.1",
     "@tanstack/vue-virtual": "3.0.0-beta.62",
     "@tinyhttp/content-disposition": "^2.2.0",
     "@tinyhttp/cookie": "^2.1.0",
     "@types/file-saver": "^2.0.7",
-    "@types/qs": "^6.9.14",
+    "@types/qs": "^6.9.15",
     "dayjs": "^1.11.10",
     "file-saver": "^2.0.5",
     "ofetch": "^1.3.4",
-    "qs": "^6.12.0"
+    "qs": "^6.12.1"
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^1.6.0",
@@ -83,11 +84,12 @@
     "@release-it/conventional-changelog": "^8.0.1",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
-    "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.11.30",
+    "@types/markdown-it": "^14.0.1",
+    "@types/node": "^20.12.7",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vitest/coverage-v8": "^1.4.0",
-    "@vue/reactivity": "^3.4.21",
+    "@vitest/coverage-v8": "^1.5.0",
+    "@vue/reactivity": "^3.4.22",
+    "@vue/runtime-core": "^3.4.22",
     "@vue/test-utils": "^2.4.5",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
@@ -95,7 +97,7 @@
     "body-scroll-lock": "4.0.0-beta.0",
     "eslint": "^8.57.0",
     "fuse.js": "^7.0.0",
-    "happy-dom": "^14.3.9",
+    "happy-dom": "^14.7.1",
     "histoire": "0.16.5",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
@@ -104,13 +106,13 @@
     "postcss": "^8.4.38",
     "postcss-nested": "^6.0.1",
     "punycode": "^2.3.1",
-    "release-it": "^17.1.1",
-    "typescript": "~5.4.3",
+    "release-it": "^17.2.0",
+    "typescript": "~5.4.5",
     "v-calendar": "^3.1.2",
-    "vite": "^5.2.6",
-    "vitepress": "1.0.1",
-    "vitest": "^1.4.0",
-    "vue": "^3.4.21",
+    "vite": "^5.2.9",
+    "vitepress": "^1.1.0",
+    "vitest": "^1.5.0",
+    "vue": "^3.4.22",
     "vue-router": "^4.3.0",
     "vue-tsc": "^1.8.27"
   }

package/lib/types/shims.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}