@globalbrain/sefirot 4.30.1 → 4.31.0

package/config/nuxt.js

@@ -5,9 +5,6 @@ import icons from 'unplugin-icons/nuxt'
 import { mergeConfig } from 'vite'
 import { baseConfig as baseViteConfig } from './vite.js'
 
-delete baseViteConfig.plugins
-delete baseViteConfig.resolve?.alias
-
 export const baseConfig = {
   alias: { sefirot: fileURLToPath(new URL('../lib', import.meta.url)) },
   app: { teleportId: 'sefirot-modals' },
@@ -23,7 +20,13 @@ export const baseConfig = {
   ],
   postcss: { plugins: { 'postcss-nested': {} } },
   telemetry: false,
-  vite: baseViteConfig
+  vite: {
+    ...baseViteConfig,
+    resolve: { ...baseViteConfig.resolve, alias: {} },
+    plugins: baseViteConfig.plugins?.filter(
+      (plugin) => plugin && 'name' in plugin && plugin.name !== 'unplugin-icons'
+    )
+  }
 }
 
 export function defineConfig(config = {}) {

package/config/vite.js

@@ -1,16 +1,5 @@
 // @ts-check
 
-/**
- * Adapted from
- * @see https://github.com/unplugin/unplugin-icons/blob/67fd9b7791dc1754cb8dc46b854b22c8bb4cf380/src/core/compilers/vue3.ts
- * @see https://github.com/unplugin/unplugin-icons/blob/639ec9691e022e52c641d0f96f585dbf04dab095/src/core/svgId.ts
- *
- * Original licenses:
- *
- * Copyright (c) 2020 Anthony Fu <https://github.com/antfu>
- * @license MIT
- */
-
 import { fileURLToPath } from 'node:url'
 import MagicString from 'magic-string'
 import icons from 'unplugin-icons/vite'
@@ -48,6 +37,7 @@ export const baseConfig = {
 
     // list the client-side direct dependencies/peerDependencies which get bundled
     dedupe: [
+      '@popperjs/core',
       '@sentry/browser',
       '@sentry/vue',
       '@tanstack/vue-virtual',

package/lib/components/SActionMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type Component, ref } from 'vue'
+import { type Component, ref, useTemplateRef } from 'vue'
 import { type DropdownSection, useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import SButton, { type Mode, type Size, type Tooltip, type Type } from './SButton.vue'
@@ -29,21 +29,52 @@ const props = withDefaults(defineProps<{
   dropdownAlign: 'left'
 })
 
-const container = ref<any>(null)
+const containerRef = useTemplateRef('container')
+const dropdownRef = useTemplateRef('dropdown')
 
-const { isOpen, toggle } = useFlyout(container)
-const { position, update: updatePosition } = useManualDropdownPosition(container)
+const { isOpen, toggle } = useFlyout(containerRef)
+const { position: verticalPlacement, update: updateVerticalPlacement }
+  = useManualDropdownPosition(containerRef)
+
+const actualAlign = ref(props.dropdownAlign)
+
+function calculateOptimalAlign(dropdownElement: HTMLElement): 'left' | 'right' {
+  // Temporarily show the dropdown to measure it (similar to tooltip approach)
+  const originalDisplay = dropdownElement.style.display
+  dropdownElement.style.display = 'block'
+  const dropdownRect = dropdownElement.getBoundingClientRect()
+  dropdownElement.style.display = originalDisplay
+
+  const dropdownWidth = dropdownRect.width
+
+  const viewportWidth = window.innerWidth
+  const containerRect = containerRef.value!.getBoundingClientRect()
+
+  const spaceOnRight = viewportWidth - containerRect.left
+  const spaceOnLeft = containerRect.right
+
+  if (props.dropdownAlign === 'left') {
+    return spaceOnRight >= dropdownWidth ? 'left' : 'right'
+  }
+
+  return spaceOnLeft >= dropdownWidth ? 'right' : 'left'
+}
 
 async function onOpen() {
   if (!props.disabled) {
-    updatePosition()
+    updateVerticalPlacement()
+
+    if (dropdownRef.value) {
+      actualAlign.value = calculateOptimalAlign(dropdownRef.value)
+    }
+
     toggle()
   }
 }
 </script>
 
 <template>
-  <div class="SActionMenu" :class="[{ block }, dropdownAlign]" ref="container">
+  <div class="SActionMenu" :class="[{ block }, actualAlign]" ref="container">
     <div class="button">
       <SButton
         :tag
@@ -64,7 +95,12 @@ async function onOpen() {
         @click="onOpen"
       />
     </div>
-    <div v-if="isOpen" class="dropdown" :class="position">
+    <div
+      class="dropdown"
+      :class="verticalPlacement"
+      :style="{ display: isOpen ? 'block' : 'none' }"
+      ref="dropdown"
+    >
       <SDropdown :sections="options" />
     </div>
   </div>

package/lib/components/SDescText.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useLinkifyIt } from 'sefirot/composables/Markdown'
 import { computed } from 'vue'
+import { useLinkifyIt } from '../composables/Markdown'
 import { useHasSlotContent } from '../composables/Utils'
 import SDescEmpty from './SDescEmpty.vue'
 

package/lib/composables/Api.ts

@@ -1,6 +1,6 @@
-import { useHttpConfig } from 'sefirot/stores/HttpConfig'
 import { type Ref, type WatchSource, ref, watch } from 'vue'
 import { Http } from '../http/Http'
+import { useHttpConfig } from '../stores/HttpConfig'
 import { tryOnMounted } from './Utils'
 
 export interface Query<Data = any> {

package/lib/composables/App.ts

@@ -1,22 +1,24 @@
-import { type HttpOptions } from 'sefirot/stores/HttpConfig'
-import { useSetupHttp } from './Http'
-import { type HasLang, useSetupLang } from './Lang'
-import { type HasTheme, useSetupTheme } from './Theme'
+import { type HttpOptions, useHttpConfig } from '../stores/HttpConfig'
+import { type Lang, getBrowserLang, provideLang } from './Lang'
+import { type Theme, useTheme } from './Theme'
 
-export interface SetupAppUser extends HasLang, HasTheme {}
+export interface SetupAppUser {
+  lang?: Lang
+  theme?: Theme
+}
 
 export interface SetupAppOptions {
   http?: HttpOptions
 }
 
 export function useSetupApp(): (user?: SetupAppUser | null, options?: SetupAppOptions) => void {
-  const setupLang = useSetupLang()
-  const setupTheme = useSetupTheme()
-  const setupHttp = useSetupHttp()
+  const theme = useTheme()
+  const httpConfig = useHttpConfig()
 
   return (user, options) => {
-    setupLang(user)
-    setupTheme(user)
-    setupHttp(user, options?.http)
+    const lang = user?.lang ?? getBrowserLang()
+    provideLang(lang)
+    if (user?.theme) { theme.value = user.theme }
+    httpConfig.apply({ lang, ...options?.http })
   }
 }

package/lib/composables/Lang.ts

@@ -11,20 +11,8 @@ export interface TransMessages<T> {
   ja: T
 }
 
-export interface HasLang {
-  lang: Lang
-}
-
 export const SefirotLangKey: InjectionKey<Lang> = Symbol.for('sefirot-lang-key')
 
-export function useSetupLang(): (user?: HasLang | null) => void {
-  const browserLang = useBrowserLang()
-
-  return (user) => {
-    provideLang(user?.lang ?? browserLang)
-  }
-}
-
 export function provideLang(lang: Lang) {
   getCurrentInstance()!.appContext.app._context.provides[SefirotLangKey] = lang
 }
@@ -33,12 +21,16 @@ export function useLang(): Lang {
   return inject(SefirotLangKey, 'en')
 }
 
-export function useBrowserLang(): Lang {
-  const lang = navigator.language
-
+export function getBrowserLang(): Lang {
+  const lang = String(globalThis.navigator?.language || 'en')
   return lang.split('-')[0] === 'ja' ? 'ja' : 'en'
 }
 
+/** @deprecated use `getBrowserLang` instead */
+export function useBrowserLang(): Lang {
+  return getBrowserLang()
+}
+
 export function useTrans<T>(messages: TransMessages<T>): Trans<T> {
   const lang = useLang()
 

package/lib/composables/Theme.ts

@@ -3,18 +3,6 @@ import { type WritableComputedRef, computed } from 'vue'
 
 export type Theme = 'light' | 'dark'
 
-export interface HasTheme {
-  theme: Theme
-}
-
-export function useSetupTheme(): (user?: HasTheme | null) => void {
-  const theme = useTheme()
-
-  return (user) => {
-    theme.value = user?.theme ?? 'light'
-  }
-}
-
 export function useTheme(): WritableComputedRef<Theme> {
   const _isDark = useDark()
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.30.1",
+  "version": "4.31.0",
   "packageManager": "pnpm@9.15.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
@@ -45,10 +45,11 @@
   "peerDependencies": {
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/ri": "^1.2.5",
+    "@popperjs/core": "^2.11.8",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
-    "@vue/reactivity": "^3.5.16",
+    "@vue/reactivity": "^3.5.18",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^12 || ^13",
@@ -59,15 +60,15 @@
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
     "pinia": "^3.0.3",
-    "postcss": "^8.5.5",
+    "postcss": "^8.5.6",
     "postcss-nested": "^7.0.2",
     "v-calendar": "3.0.1",
-    "vue": "^3.5.16",
+    "vue": "^3.5.18",
     "vue-router": "^4.5.1"
   },
   "dependencies": {
-    "@sentry/browser": "^9.29.0",
-    "@sentry/vue": "^9.29.0",
+    "@sentry/browser": "^10.5.0",
+    "@sentry/vue": "^10.5.0",
     "@tanstack/vue-virtual": "3.0.0-beta.62",
     "@tinyhttp/content-disposition": "^2.2.2",
     "@tinyhttp/cookie": "^2.1.1",
@@ -81,21 +82,22 @@
     "magic-string": "^0.30.17",
     "ofetch": "^1.4.1",
     "qs": "^6.14.0",
-    "unplugin-icons": "^22.1.0"
+    "unplugin-icons": "^22.2.0"
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^1.7.1",
     "@histoire/plugin-vue": "0.16.5",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/ri": "^1.2.5",
+    "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^10.0.1",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^24.0.1",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "@vitest/coverage-v8": "^3.2.3",
-    "@vue/reactivity": "^3.5.16",
+    "@types/node": "^24.3.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vue/reactivity": "^3.5.18",
     "@vue/test-utils": "^2.4.6",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
@@ -110,17 +112,17 @@
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
     "pinia": "^3.0.3",
-    "postcss": "^8.5.5",
+    "postcss": "^8.5.6",
     "postcss-nested": "^7.0.2",
     "punycode": "^2.3.1",
-    "release-it": "^19.0.3",
-    "typescript": "~5.8.3",
+    "release-it": "^19.0.4",
+    "typescript": "~5.9.2",
     "v-calendar": "3.0.1",
     "vite": "^6.3.5",
-    "vitepress": "^2.0.0-alpha.6",
-    "vitest": "^3.2.3",
-    "vue": "^3.5.16",
+    "vitepress": "^2.0.0-alpha.11",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.18",
     "vue-router": "^4.5.1",
-    "vue-tsc": "^3.0.4"
+    "vue-tsc": "^3.0.5"
   }
 }

package/lib/composables/Http.ts

@@ -1,18 +0,0 @@
-import { type Lang, useBrowserLang } from 'sefirot/composables/Lang'
-import { type HttpOptions, useHttpConfig } from 'sefirot/stores/HttpConfig'
-
-export interface HasLang {
-  lang: Lang
-}
-
-export function useSetupHttp(): (user?: HasLang | null, options?: HttpOptions) => void {
-  const browserLang = useBrowserLang()
-  const httpConfig = useHttpConfig()
-
-  return (user, options = {}) => {
-    httpConfig.apply({
-      lang: user?.lang ?? browserLang,
-      ...options
-    })
-  }
-}