@globalbrain/sefirot 4.2.0 → 4.3.0

package/lib/components/SControlActionBarClose.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import SControlActionBarButton from './SControlActionBarButton.vue'
 import IconX from '~icons/ph/x-bold'
+import SControlActionBarButton from './SControlActionBarButton.vue'
 
 defineProps<{
   as?: string

package/lib/components/SControlActionBarCollapse.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import IconArrowsInLineVertical from '~icons/ph/arrows-in-line-vertical-bold'
+import IconArrowsOutLineVertical from '~icons/ph/arrows-out-line-vertical-bold'
 import { computed, shallowRef } from 'vue'
 import { useCardState } from '../composables/Card'
 import SControlActionBarButton from './SControlActionBarButton.vue'
-import IconArrowsInLineVertical from '~icons/ph/arrows-in-line-vertical-bold'
-import IconArrowsOutLineVertical from '~icons/ph/arrows-out-line-vertical-bold'
 
 const props = defineProps<{
   as?: string

package/lib/components/SControlInputSearch.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import IconMagnifyingGlass from '~icons/ph/magnifying-glass-bold'
 import { computed } from 'vue'
 import { useControlSize } from '../composables/Control'
 import { useTrans } from '../composables/Lang'
 import { type Validatable } from '../composables/Validation'
 import SInputText, { type Align, type TextColor } from './SInputText.vue'
-import IconMagnifyingGlass from '~icons/ph/magnifying-glass-bold'
 
 const props = defineProps<{
   placeholder?: string

package/lib/components/SDescFile.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import IconDownloadSimple from '~icons/ph/download-simple-bold'
+import IconFileText from '~icons/ph/file-text-bold'
 import { computed } from 'vue'
 import SButton from './SButton.vue'
 import SDescEmpty from './SDescEmpty.vue'
-import IconDownloadSimple from '~icons/ph/download-simple-bold'
-import IconFileText from '~icons/ph/file-text-bold'
 
 export interface Item {
   name: string

package/lib/components/SDropdownSectionFilter.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import IconCheck from '~icons/ph/check'
 import Fuse from 'fuse.js'
 import { type MaybeRef, computed, onMounted, ref, unref } from 'vue'
 import { type DropdownSectionFilterOption, type DropdownSectionFilterSelectedValue } from '../composables/Dropdown'
 import { useTrans } from '../composables/Lang'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
-import IconCheck from '~icons/ph/check'
 
 const props = defineProps<{
   search?: boolean

package/lib/components/SIndicator.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import IconCheckCircleFill from '~icons/ph/check-circle-fill'
 import IconCircle from '~icons/ph/circle-bold'
 import IconCircleDashed from '~icons/ph/circle-dashed-bold'
 import IconCircleNotch from '~icons/ph/circle-notch-bold'
 import IconXCircle from '~icons/ph/x-circle-bold'
+import { computed } from 'vue'
 
 export type Size = 'nano' | 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
 export type State = 'pending' | 'ready' | 'queued' | 'running' | 'completed' | 'failed'

package/lib/components/SInputAddon.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import IconCaretDown from '~icons/ph/caret-down-bold'
 import { type Component, computed, ref } from 'vue'
 import {
   type DropdownSection,
@@ -8,7 +9,6 @@ import {
 import { useFlyout } from '../composables/Flyout'
 import { isString } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
-import IconCaretDown from '~icons/ph/caret-down-bold'
 
 const props = withDefaults(defineProps<{
   label?: Component | string

package/lib/components/SInputBase.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import IconQuestion from '~icons/ph/question'
 import { type Component, computed, unref, useSlots } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import STooltip from './STooltip.vue'
-import IconQuestion from '~icons/ph/question'
 
 type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 

package/lib/components/SInputCheckbox.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import IconCheck from '~icons/ph/check-bold'
+import IconMinus from '~icons/ph/minus-bold'
 import { type Component, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
-import IconCheck from '~icons/ph/check-bold'
-import IconMinus from '~icons/ph/minus-bold'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'

package/lib/components/SInputDropdown.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import IconCaretDown from '~icons/ph/caret-down-bold'
+import IconCaretUp from '~icons/ph/caret-up-bold'
 import xor from 'lodash-es/xor'
 import { type Component, computed, ref } from 'vue'
 import { type DropdownSectionFilter, useManualDropdownPosition } from '../composables/Dropdown'
@@ -7,8 +9,6 @@ import { type Validatable } from '../composables/Validation'
 import SDropdown from './SDropdown.vue'
 import SInputBase from './SInputBase.vue'
 import SInputDropdownItem from './SInputDropdownItem.vue'
-import IconCaretDown from '~icons/ph/caret-down-bold'
-import IconCaretUp from '~icons/ph/caret-up-bold'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'

package/lib/components/SInputDropdownItemAvatar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import SAvatar from './SAvatar.vue'
 import IconX from '~icons/ph/x-bold'
+import SAvatar from './SAvatar.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
 

package/lib/components/SInputFileUploadItem.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import IconFileText from '~icons/ph/file-text'
+import IconTrash from '~icons/ph/trash'
 import { computed } from 'vue'
 import { formatSize } from '../support/File'
 import SButton from './SButton.vue'
 import SCardBlock from './SCardBlock.vue'
-import IconFileText from '~icons/ph/file-text'
-import IconTrash from '~icons/ph/trash'
 
 const props = defineProps<{
   file: File

package/lib/components/SInputImage.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import IconImage from '~icons/ph/image-bold'
 import { type Component, computed, ref } from 'vue'
 import { useImageSrcFromFile } from '../composables/Image'
 import { type Validatable } from '../composables/Validation'
 import SButton from './SButton.vue'
 import SInputBase from './SInputBase.vue'
-import IconImage from '~icons/ph/image-bold'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'

package/lib/components/SInputSelect.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import IconCaretDown from '~icons/ph/caret-down-bold'
+import IconCaretUp from '~icons/ph/caret-up-bold'
 import { type Component, computed, ref } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
-import IconCaretDown from '~icons/ph/caret-down-bold'
-import IconCaretUp from '~icons/ph/caret-up-bold'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'

package/lib/components/SLoginPage.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import IconLockKey from '~icons/ph/lock-key-fill'
+import IconGoogle from '~icons/ri/google-fill'
 import { computed, ref } from 'vue'
 import { usePower } from '../composables/Power'
 import SButton from './SButton.vue'
@@ -6,8 +8,6 @@ import SLink from './SLink.vue'
 import SLoginPagePasswordDialog from './SLoginPagePasswordDialog.vue'
 import SModal from './SModal.vue'
 import SIconGbLogoWhite from './icon/SIconGbLogoWhite.vue'
-import IconLockKey from '~icons/ph/lock-key-fill'
-import IconGoogle from '~icons/ri/google-fill'
 
 export interface CoverTitle {
   text: string

package/lib/components/SPagination.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import IconCaretLeft from '~icons/ph/caret-left-bold'
+import IconCaretRight from '~icons/ph/caret-right-bold'
 import { computed } from 'vue'
 import { useTrans } from '../composables/Lang'
 import { format } from '../support/Num'
 import SButton from './SButton.vue'
-import IconCaretLeft from '~icons/ph/caret-left-bold'
-import IconCaretRight from '~icons/ph/caret-right-bold'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Align = 'left' | 'center' | 'right'

package/lib/components/SSnackbar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import IconX from '~icons/ph/x'
 import { type SnackbarAction, useSnackbars } from '../stores/Snackbars'
 import SButton from './SButton.vue'
-import IconX from '~icons/ph/x'
 
 const props = defineProps<{
   id: number

package/lib/components/SStep.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type PropType } from 'vue'
-import { type BarMode, type StepStatus } from '../composables/Step'
 import IconCheck from '~icons/ph/check'
 import IconX from '~icons/ph/x'
+import { type PropType } from 'vue'
+import { type BarMode, type StepStatus } from '../composables/Step'
 
 defineProps({
   status: { type: String as PropType<StepStatus>, required: true },

package/lib/components/STableColumn.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import IconDotsThree from '~icons/ph/dots-three'
 import { computed, nextTick, ref, unref, watch } from 'vue'
 import { type DropdownSection } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import SDropdown from './SDropdown.vue'
-import IconDotsThree from '~icons/ph/dots-three'
 
 const props = withDefaults(defineProps<{
   name: string

package/lib/components/STableFooter.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { format } from '../support/Num'
 import IconCaretLeft from '~icons/ph/caret-left-bold'
 import IconCaretRight from '~icons/ph/caret-right-bold'
+import { computed } from 'vue'
+import { format } from '../support/Num'
 
 const props = defineProps<{
   total?: number | null

package/lib/components/STableHeaderMenuItem.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import IconCaretDown from '~icons/ph/caret-down-bold'
 import { type DropdownSection } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import SDropdown from './SDropdown.vue'
-import IconCaretDown from '~icons/ph/caret-down-bold'
 
 defineProps<{
   label: string

package/lib/http/Http.ts

@@ -12,6 +12,8 @@ import { stringify } from 'qs'
 import { type Lang } from '../composables/Lang'
 import { isBlob, isError, isFormData, isRequest, isResponse, isString } from '../support/Utils'
 
+type Awaitable<T> = T | PromiseLike<T>
+
 export interface HttpClient {
   <T = any>(request: FetchRequest, options?: Omit<FetchOptions, 'method'>): Promise<T>
   raw<T = any>(request: FetchRequest, options?: Omit<FetchOptions, 'method'>): Promise<FetchResponse<T>>
@@ -23,6 +25,7 @@ export interface HttpOptions {
   client?: HttpClient
   lang?: Lang
   payloadKey?: string
+  headers?: () => Awaitable<Record<string, string>>
 }
 
 export class Http {
@@ -31,6 +34,7 @@ export class Http {
   private static client: HttpClient = ofetch
   private static lang: Lang | undefined = undefined
   private static payloadKey = '__payload__'
+  private static headers: () => Awaitable<Record<string, string>> = async () => ({})
 
   static config(options: HttpOptions) {
     if (options.baseUrl) {
@@ -48,6 +52,9 @@ export class Http {
     if (options.payloadKey) {
       Http.payloadKey = options.payloadKey
     }
+    if (options.headers) {
+      Http.headers = options.headers
+    }
   }
 
   private async ensureXsrfToken(): Promise<string | undefined> {
@@ -74,10 +81,7 @@ export class Http {
     const xsrfToken
       = ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method || '') && (await this.ensureXsrfToken())
 
-    const queryString = stringify(
-      { ...params, ...query },
-      { arrayFormat: 'brackets', encodeValuesOnly: true }
-    )
+    const queryString = stringify({ ...params, ...query }, { encodeValuesOnly: true })
 
     return [
       `${url}${queryString ? `?${queryString}` : ''}`,
@@ -88,6 +92,7 @@ export class Http {
         ...options,
         headers: {
           Accept: 'application/json',
+          ...(await Http.headers()),
           ...(xsrfToken && { 'X-Xsrf-Token': xsrfToken }),
           ...(Http.lang && { 'Accept-Language': Http.lang }),
           ...options.headers

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.2.0",
-  "packageManager": "pnpm@9.6.0",
+  "version": "4.3.0",
+  "packageManager": "pnpm@9.9.0",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -29,9 +29,9 @@
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress serve docs --port 4011",
     "story": "pnpm story:dev",
-    "story:dev": "histoire dev --port 4010",
-    "story:build": "histoire build",
-    "story:preview": "histoire preview --port 4010",
+    "story:dev": "NODE_NO_WARNINGS=1 VITE_CJS_IGNORE_WARNING=1 histoire dev --port 4010",
+    "story:build": "NODE_NO_WARNINGS=1 VITE_CJS_IGNORE_WARNING=1 histoire build",
+    "story:preview": "NODE_NO_WARNINGS=1 VITE_CJS_IGNORE_WARNING=1 histoire preview --port 4010",
     "type": "vue-tsc --noEmit",
     "lint": "eslint --fix .",
     "lint:fail": "eslint .",
@@ -43,30 +43,30 @@
     "release": "release-it"
   },
   "peerDependencies": {
-    "@iconify-json/ph": "^1.1.14",
-    "@iconify-json/ri": "^1.1.22",
+    "@iconify-json/ph": "^1.2.0",
+    "@iconify-json/ri": "^1.2.0",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
-    "@vue/reactivity": "^3.4.36",
+    "@vue/reactivity": "^3.5.1",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.11.0",
+    "@vueuse/core": "^11.0.3",
     "body-scroll-lock": "4.0.0-beta.0",
-    "dayjs": "^1.11.12",
+    "dayjs": "^1.11.13",
     "fuse.js": "^7.0.0",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
-    "pinia": "^2.2.1",
-    "postcss": "^8.4.41",
+    "pinia": "^2.2.2",
+    "postcss": "^8.4.45",
     "postcss-nested": "^6.2.0",
     "v-calendar": "^3.1.2",
-    "vue": "^3.4.36",
-    "vue-router": "^4.4.2"
+    "vue": "^3.5.1",
+    "vue-router": "^4.4.3"
   },
   "dependencies": {
-    "@sentry/browser": "^8.24.0",
+    "@sentry/browser": "^8.28.0",
     "@tanstack/vue-virtual": "3.0.0-beta.62",
     "@tinyhttp/content-disposition": "^2.2.1",
     "@tinyhttp/cookie": "^2.1.1",
@@ -75,27 +75,27 @@
     "file-saver": "^2.0.5",
     "ofetch": "^1.3.4",
     "qs": "^6.13.0",
-    "unplugin-icons": "^0.19.1"
+    "unplugin-icons": "^0.19.2"
   },
   "devDependencies": {
-    "@globalbrain/eslint-config": "^1.6.0",
+    "@globalbrain/eslint-config": "^1.7.1",
     "@histoire/plugin-vue": "0.16.5",
-    "@iconify-json/ph": "^1.1.14",
-    "@iconify-json/ri": "^1.1.22",
+    "@iconify-json/ph": "^1.2.0",
+    "@iconify-json/ri": "^1.2.0",
     "@release-it/conventional-changelog": "^8.0.1",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^22.1.0",
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@types/node": "^22.5.3",
+    "@vitejs/plugin-vue": "^5.1.3",
     "@vitest/coverage-v8": "^2.0.5",
-    "@vue/reactivity": "^3.4.36",
+    "@vue/reactivity": "^3.5.1",
     "@vue/test-utils": "^2.4.6",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.11.0",
+    "@vueuse/core": "^11.0.3",
     "body-scroll-lock": "4.0.0-beta.0",
-    "dayjs": "^1.11.12",
+    "dayjs": "^1.11.13",
     "eslint": "8.57.0",
     "fuse.js": "^7.0.0",
     "happy-dom": "^14.12.3",
@@ -103,18 +103,18 @@
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
-    "pinia": "^2.2.1",
-    "postcss": "^8.4.41",
+    "pinia": "^2.2.2",
+    "postcss": "^8.4.45",
     "postcss-nested": "^6.2.0",
     "punycode": "^2.3.1",
     "release-it": "^17.6.0",
     "typescript": "~5.5.4",
     "v-calendar": "^3.1.2",
-    "vite": "^5.3.5",
-    "vitepress": "^1.3.2",
+    "vite": "^5.4.3",
+    "vitepress": "^1.3.4",
     "vitest": "^2.0.5",
-    "vue": "^3.4.36",
-    "vue-router": "^4.4.2",
-    "vue-tsc": "^2.0.29"
+    "vue": "^3.5.1",
+    "vue-router": "^4.4.3",
+    "vue-tsc": "^2.1.6"
   }
 }