@globalbrain/sefirot 3.49.0 → 4.0.0-0

package/lib/http/Http.ts

@@ -1,9 +1,16 @@
 import { parse as parseContentDisposition } from '@tinyhttp/content-disposition'
 import { parse as parseCookie } from '@tinyhttp/cookie'
 import FileSaver from 'file-saver'
-import { type FetchOptions, type FetchRequest, type FetchResponse, ofetch } from 'ofetch'
+import {
+  FetchError,
+  type FetchOptions,
+  type FetchRequest,
+  type FetchResponse,
+  ofetch
+} from 'ofetch'
 import { stringify } from 'qs'
 import { type Lang } from '../composables/Lang'
+import { isBlob, isError, isFormData, isRequest, isResponse, isString } from '../support/Utils'
 
 export interface HttpClient {
   <T = any>(request: FetchRequest, options?: Omit<FetchOptions, 'method'>): Promise<T>
@@ -106,11 +113,11 @@ export class Http {
   }
 
   async post<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
-    if (body && !(body instanceof FormData)) {
+    if (body && !isFormData(body)) {
       let hasFile = false
 
       const payload = JSON.stringify(body, (_, value) => {
-        if (value instanceof Blob) {
+        if (isBlob(value)) {
           hasFile = true
           return undefined
         }
@@ -177,15 +184,11 @@ export class Http {
         return
       }
 
-      if (
-        typeof obj[property] === 'object'
-        && !(obj[property] instanceof Blob)
-        && obj[property] !== null
-      ) {
+      if (typeof obj[property] === 'object' && !isBlob(obj[property]) && obj[property] !== null) {
         this.objectToFormData(obj[property], fd, property, onlyFiles)
       } else {
         const value = obj[property] === null ? '' : obj[property]
-        if (onlyFiles && !(value instanceof Blob)) {
+        if (onlyFiles && !isBlob(value)) {
           return
         }
         fd.append(formKey, value)
@@ -196,4 +199,18 @@ export class Http {
   }
 }
 
-export type { FetchOptions }
+export function isFetchError(e: unknown): e is FetchError {
+  return (
+    e instanceof FetchError
+    || (isError(e)
+      && (isString((e as FetchError).request) || isRequest((e as FetchError).request))
+      && ((e as FetchError).response === undefined || isResponse((e as FetchError).response))
+      && e.message.startsWith(
+        `[${((e as FetchError).request as Request | undefined)?.method || (e as FetchError).options?.method || 'GET'}] ${
+          JSON.stringify(((e as FetchError).request as Request | undefined)?.url || String((e as FetchError).request) || '/')
+        }: `
+      ))
+  )
+}
+
+export { FetchError, type FetchOptions, type FetchRequest, type FetchResponse } from 'ofetch'

package/lib/mixins/Card.ts

@@ -1,42 +1,15 @@
 import { type App } from 'vue'
 import SCard from '../components/SCard.vue'
 import SCardBlock from '../components/SCardBlock.vue'
-import SCardFooter from '../components/SCardFooter.vue'
-import SCardFooterAction from '../components/SCardFooterAction.vue'
-import SCardFooterActions from '../components/SCardFooterActions.vue'
-import SCardHeader from '../components/SCardHeader.vue'
-import SCardHeaderAction from '../components/SCardHeaderAction.vue'
-import SCardHeaderActionClose from '../components/SCardHeaderActionClose.vue'
-import SCardHeaderActionCollapse from '../components/SCardHeaderActionCollapse.vue'
-import SCardHeaderActions from '../components/SCardHeaderActions.vue'
-import SCardHeaderTitle from '../components/SCardHeaderTitle.vue'
 
 export function mixin(app: App): void {
   app.component('SCard', SCard)
   app.component('SCardBlock', SCardBlock)
-  app.component('SCardFooter', SCardFooter)
-  app.component('SCardFooterAction', SCardFooterAction)
-  app.component('SCardFooterActions', SCardFooterActions)
-  app.component('SCardHeader', SCardHeader)
-  app.component('SCardHeaderAction', SCardHeaderAction)
-  app.component('SCardHeaderActionClose', SCardHeaderActionClose)
-  app.component('SCardHeaderActionCollapse', SCardHeaderActionCollapse)
-  app.component('SCardHeaderActions', SCardHeaderActions)
-  app.component('SCardHeaderTitle', SCardHeaderTitle)
 }
 
 declare module 'vue' {
   export interface GlobalComponents {
     SCard: typeof SCard
     SCardBlock: typeof SCardBlock
-    SCardFooter: typeof SCardFooter
-    SCardFooterAction: typeof SCardFooterAction
-    SCardFooterActions: typeof SCardFooterActions
-    SCardHeader: typeof SCardHeader
-    SCardHeaderAction: typeof SCardHeaderAction
-    SCardHeaderActionClose: typeof SCardHeaderActionClose
-    SCardHeaderActionCollapse: typeof SCardHeaderActionCollapse
-    SCardHeaderActions: typeof SCardHeaderActions
-    SCardHeaderTitle: typeof SCardHeaderTitle
   }
 }

package/lib/mixins/Fundamental.ts

@@ -1,7 +1,6 @@
 import { type App } from 'vue'
 import SContent from '../components/SContent.vue'
 import SDivider from '../components/SDivider.vue'
-import SIcon from '../components/SIcon.vue'
 import SLink from '../components/SLink.vue'
 import SModal from '../components/SModal.vue'
 import STrans from '../components/STrans.vue'
@@ -22,7 +21,6 @@ export function mixin(app: App): void {
 
   app.component('SContent', SContent)
   app.component('SDivider', SDivider)
-  app.component('SIcon', SIcon)
   app.component('SLink', SLink)
   app.component('SModal', SModal)
   app.component('STrans', STrans)
@@ -32,7 +30,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     SContent: typeof SContent
     SDivider: typeof SDivider
-    SIcon: typeof SIcon
     SLink: typeof SLink
     SModal: typeof SModal
     STrans: typeof STrans

package/lib/support/Day.ts

@@ -2,7 +2,7 @@ import dayjs, { type ConfigType, type Dayjs } from 'dayjs'
 import PluginRelativeTime from 'dayjs/plugin/relativeTime'
 import PluginTimezone from 'dayjs/plugin/timezone'
 import PluginUtc from 'dayjs/plugin/utc'
-import { isNullish, isNumber, isObject, isString } from './Utils'
+import { isNumber, isObject, isString } from './Utils'
 
 dayjs.extend(PluginUtc)
 dayjs.extend(PluginTimezone)
@@ -67,7 +67,7 @@ export function createYmd(
   month: number | null = null,
   date: number | null = null
 ): Ymd {
-  if (isNumber(yearOrDay) || isNullish(yearOrDay)) {
+  if (isNumber(yearOrDay) || yearOrDay == null) {
     return {
       year: yearOrDay,
       month,
@@ -92,7 +92,7 @@ export function createHms(
   minute: string | null = null,
   second: string | null = null
 ): Hms {
-  if (isString(hourOrDay) || isNullish(hourOrDay)) {
+  if (isString(hourOrDay) || hourOrDay == null) {
     return {
       hour: hourOrDay,
       minute,
@@ -108,7 +108,7 @@ export function createHms(
 }
 
 export function isYmd(value: unknown, required: YmdType[] = ['y', 'm', 'd']): value is Ymd {
-  if (isNullish(value) || !isObject(value)) {
+  if (value == null || !isObject(value)) {
     return false
   }
 
@@ -121,7 +121,7 @@ export function isYmd(value: unknown, required: YmdType[] = ['y', 'm', 'd']): va
 }
 
 export function isHms(value: unknown, required: HmsType[] = ['h', 'm', 's']): value is Hms {
-  if (isNullish(value) || !isObject(value)) {
+  if (value == null || !isObject(value)) {
     return false
   }
 

package/lib/support/Utils.ts

@@ -1,28 +1,49 @@
-export function isNullish(value: unknown): value is undefined | null {
-  return value == null
+// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+// @ts-ignore internal
+import baseGetTag from 'lodash-es/_baseGetTag'
+
+import _isDate from 'lodash-es/isDate'
+import _isError from 'lodash-es/isError'
+import _isNumber from 'lodash-es/isNumber'
+import _isPlainObject from 'lodash-es/isPlainObject'
+import _isString from 'lodash-es/isString'
+
+export function isBlob(value: unknown): value is Blob {
+  return value instanceof Blob || baseGetTag(value) === '[object Blob]'
 }
 
-export function isString(value: unknown): value is string {
-  return typeof value === 'string'
+export function isDate(value: unknown): value is Date {
+  return _isDate(value)
+}
+
+export function isError(value: unknown): value is Error {
+  return _isError(value)
+}
+
+export function isFile(value: unknown): value is File {
+  return value instanceof File || baseGetTag(value) === '[object File]'
+}
+
+export function isFormData(value: unknown): value is FormData {
+  return value instanceof FormData || baseGetTag(value) === '[object FormData]'
 }
 
 export function isNumber(value: unknown): value is number {
-  return typeof value === 'number'
+  return _isNumber(value)
 }
 
-export function isArray(value: unknown): value is unknown[] {
-  return Array.isArray(value)
+export function isObject(value: unknown): value is Record<string, unknown> {
+  return _isPlainObject(value)
 }
 
-export function isObject(value: unknown): value is Record<string, any> {
-  return typeof value === 'object' && value !== null && !isArray(value)
+export function isRequest(value: unknown): value is Request {
+  return value instanceof Request || baseGetTag(value) === '[object Request]'
 }
 
-export function isFile(value: unknown): value is File {
-  return value instanceof File
+export function isResponse(value: unknown): value is Response {
+  return value instanceof Response || baseGetTag(value) === '[object Response]'
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-export function isFunction(value: unknown): value is Function {
-  return typeof value === 'function'
+export function isString(value: unknown): value is string {
+  return _isString(value)
 }

package/lib/validation/validators/maxLength.ts

@@ -1,7 +1,7 @@
-import { isArray, isString } from '../../support/Utils'
+import { isString } from '../../support/Utils'
 
 export function maxLength(value: unknown, length: number): boolean {
-  if (!(isString(value) || isArray(value))) {
+  if (!(isString(value) || Array.isArray(value))) {
     return false
   }
 

package/lib/validation/validators/maxValue.ts

@@ -1,7 +1,7 @@
-import { isNumber, isString } from '../../support/Utils'
+import { isDate, isNumber, isString } from '../../support/Utils'
 
 export function maxValue(value: unknown, max: number) {
-  if (isNumber(value) || isString(value) || value instanceof Date) {
+  if (isNumber(value) || isString(value) || isDate(value)) {
     return +value <= max
   }
 

package/lib/validation/validators/minLength.ts

@@ -1,7 +1,7 @@
-import { isArray, isString } from '../../support/Utils'
+import { isString } from '../../support/Utils'
 
 export function minLength(value: unknown, length: number): boolean {
-  if (!(isString(value) || isArray(value))) {
+  if (!(isString(value) || Array.isArray(value))) {
     return false
   }
 

package/lib/validation/validators/minValue.ts

@@ -1,7 +1,7 @@
-import { isNumber, isString } from '../../support/Utils'
+import { isDate, isNumber, isString } from '../../support/Utils'
 
 export function minValue(value: unknown, min: number) {
-  if (isNumber(value) || isString(value) || value instanceof Date) {
+  if (isNumber(value) || isString(value) || isDate(value)) {
     return +value >= min
   }
 

package/lib/validation/validators/required.ts

@@ -1,4 +1,4 @@
-import { isArray, isNullish, isString } from '../../support/Utils'
+import { isDate, isString } from '../../support/Utils'
 
 export function required(value: unknown): boolean {
   if (isString(value)) {
@@ -9,11 +9,11 @@ export function required(value: unknown): boolean {
 }
 
 export function _required(value: unknown): boolean {
-  if (isArray(value)) {
+  if (Array.isArray(value)) {
     return !!value.length
   }
 
-  if (isNullish(value)) {
+  if (value == null) {
     return false
   }
 
@@ -21,7 +21,7 @@ export function _required(value: unknown): boolean {
     return true
   }
 
-  if (value instanceof Date) {
+  if (isDate(value)) {
     return !Number.isNaN(value.getTime())
   }
 

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.49.0",
-  "packageManager": "pnpm@9.1.1",
+  "type": "module",
+  "version": "4.0.0-0",
+  "packageManager": "pnpm@9.5.0",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -18,7 +19,8 @@
     "vue component"
   ],
   "files": [
-    "lib"
+    "lib",
+    "config"
   ],
   "scripts": {
     "docs": "pnpm docs:dev",
@@ -40,81 +42,79 @@
     "release": "release-it"
   },
   "peerDependencies": {
-    "@iconify-icons/ph": "^1.2.5",
-    "@iconify-icons/ri": "^1.2.10",
-    "@iconify/vue": "^4.1.2",
+    "@iconify-json/ph": "^1.1.13",
+    "@iconify-json/ri": "^1.1.21",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.1",
-    "@vue/reactivity": "^3.4.27",
-    "@vue/runtime-core": "^3.4.27",
+    "@vue/reactivity": "^3.4.33",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.11.0",
     "body-scroll-lock": "4.0.0-beta.0",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.12",
     "fuse.js": "^7.0.0",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
-    "postcss": "^8.4.38",
-    "postcss-nested": "^6.0.1",
+    "postcss": "^8.4.39",
+    "postcss-nested": "^6.2.0",
+    "unplugin-icons": "^0.19.0",
     "v-calendar": "^3.1.2",
-    "vue": "^3.4.27",
-    "vue-router": "^4.3.2"
+    "vue": "^3.4.33",
+    "vue-router": "^4.4.0"
   },
   "dependencies": {
-    "@sentry/browser": "^8.0.0",
+    "@sentry/browser": "^8.19.0",
     "@tanstack/vue-virtual": "3.0.0-beta.62",
-    "@tinyhttp/content-disposition": "^2.2.0",
-    "@tinyhttp/cookie": "^2.1.0",
+    "@tinyhttp/content-disposition": "^2.2.1",
+    "@tinyhttp/cookie": "^2.1.1",
     "@types/file-saver": "^2.0.7",
     "@types/qs": "^6.9.15",
     "file-saver": "^2.0.5",
     "ofetch": "^1.3.4",
-    "qs": "^6.12.1"
+    "qs": "^6.12.3"
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^1.6.0",
     "@histoire/plugin-vue": "0.16.5",
-    "@iconify-icons/ph": "^1.2.5",
-    "@iconify-icons/ri": "^1.2.10",
-    "@iconify/vue": "^4.1.2",
+    "@iconify-json/ph": "^1.1.13",
+    "@iconify-json/ri": "^1.1.21",
     "@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.1",
-    "@types/node": "^20.12.11",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vitest/coverage-v8": "^1.6.0",
-    "@vue/reactivity": "^3.4.27",
-    "@vue/runtime-core": "^3.4.27",
+    "@types/node": "^20.14.11",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitest/coverage-v8": "^2.0.3",
+    "@vue/reactivity": "^3.4.33",
     "@vue/test-utils": "^2.4.6",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.11.0",
     "body-scroll-lock": "4.0.0-beta.0",
-    "dayjs": "^1.11.11",
-    "eslint": "^8.57.0",
+    "dayjs": "^1.11.12",
+    "eslint": "8.57.0",
     "fuse.js": "^7.0.0",
-    "happy-dom": "^14.10.2",
+    "happy-dom": "^14.12.3",
     "histoire": "0.16.5",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
-    "postcss": "^8.4.38",
-    "postcss-nested": "^6.0.1",
+    "postcss": "^8.4.39",
+    "postcss-nested": "^6.2.0",
     "punycode": "^2.3.1",
-    "release-it": "^17.2.1",
-    "typescript": "~5.4.5",
+    "release-it": "^17.6.0",
+    "typescript": "~5.5.3",
+    "unplugin-icons": "npm:@globalbrain/unplugin-icons@^0.19.1",
     "v-calendar": "^3.1.2",
-    "vite": "^5.2.11",
-    "vitepress": "^1.1.4",
-    "vitest": "^1.6.0",
-    "vue": "^3.4.27",
-    "vue-router": "^4.3.2",
-    "vue-tsc": "^1.8.27"
+    "vite": "^5.3.4",
+    "vitepress": "^1.3.1",
+    "vitest": "^2.0.3",
+    "vue": "^3.4.33",
+    "vue-router": "^4.4.0",
+    "vue-tsc": "^2.0.26"
   }
 }

package/lib/components/SCardFooter.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-export type Space = 'compact' | 'wide' | 'xwide'
-
-defineProps<{
-  space?: Space
-}>()
-</script>
-
-<template>
-  <div class="SCardFooter" :class="[space ?? 'compact']">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.SCardFooter {
-  display: flex;
-  align-items: center;
-  border-radius: 0 0 5px 5px;
-  background-color: var(--c-bg-elv-3);
-}
-</style>

package/lib/components/SCardFooterAction.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import SButton, { type Mode, type Tooltip } from './SButton.vue'
-
-defineProps<{
-  mode?: Mode
-  label?: string
-  labelMode?: Mode
-  loading?: boolean
-  disabled?: boolean
-  tooltip?: string | Tooltip
-}>()
-
-defineEmits<{
-  (e: 'click'): void
-}>()
-</script>
-
-<template>
-  <div class="SCardFooterAction">
-    <SButton
-      size="medium"
-      :mode="mode"
-      :label="label"
-      :label-mode="labelMode"
-      :loading="loading"
-      :disabled="disabled"
-      :tooltip="tooltip"
-      @click="$emit('click')"
-    />
-  </div>
-</template>

package/lib/components/SCardFooterActions.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="SCardFooterActions">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.SCardFooterActions {
-  display: flex;
-  justify-content: flex-end;
-  flex-grow: 1;
-  gap: 12px;
-
-  .SCardFooter.compact > & { padding: 12px 24px; }
-  .SCardFooter.wide > &    { padding: 16px 32px; }
-  .SCardFooter.xwide > &   { padding: 24px 48px; }
-}
-</style>

package/lib/components/SCardHeader.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="SCardHeader">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.SCardHeader {
-  display: flex;
-  align-items: center;
-  border-radius: 5px 5px 0 0;
-  height: 48px;
-  background-color: var(--c-bg-elv-4);
-}
-</style>

package/lib/components/SCardHeaderAction.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import SButton, { type Tooltip } from './SButton.vue'
-
-defineProps<{
-  icon: IconifyIcon
-  disabled?: boolean
-  tooltip?: string | Tooltip
-}>()
-
-defineEmits<{
-  (e: 'click'): void
-}>()
-</script>
-
-<template>
-  <div class="SCardHeaderAction">
-    <SButton
-      type="text"
-      mode="mute"
-      size="small"
-      :icon="icon"
-      :disabled="disabled"
-      :tooltip="tooltip"
-      @click="$emit('click')"
-    />
-  </div>
-</template>

package/lib/components/SCardHeaderActionClose.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import IconX from '@iconify-icons/ph/x-bold'
-import SButton, { type Tooltip } from './SButton.vue'
-
-defineProps<{
-  disabled?: boolean
-  tooltip?: string | Tooltip
-}>()
-
-defineEmits<{
-  (e: 'click'): void
-}>()
-</script>
-
-<template>
-  <div class="SCardHeaderActionClose">
-    <SButton
-      type="text"
-      mode="mute"
-      size="small"
-      :icon="IconX"
-      :disabled="disabled"
-      :tooltip="tooltip"
-      @click="$emit('click')"
-    />
-  </div>
-</template>

package/lib/components/SCardHeaderActionCollapse.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import IconArrowsInLineVertical from '@iconify-icons/ph/arrows-in-line-vertical-bold'
-import IconArrowsOutLineVertical from '@iconify-icons/ph/arrows-out-line-vertical-bold'
-import { computed, shallowRef } from 'vue'
-import { useCardState } from '../composables/Card'
-import SButton, { type Tooltip } from './SButton.vue'
-
-const props = defineProps<{
-  collapsed?: boolean
-  disabled?: boolean
-  tooltip?: string | Tooltip
-}>()
-
-defineEmits<{
-  (e: 'click'): void
-}>()
-
-const { isCollapsed, setCollapse, toggleCollapse } = useCardState()
-
-setCollapse(props.collapsed)
-
-const el = shallowRef<HTMLElement | null>(null)
-
-const icon = computed(() => {
-  return isCollapsed.value
-    ? IconArrowsOutLineVertical
-    : IconArrowsInLineVertical
-})
-</script>
-
-<template>
-  <div
-    class="SCardHeaderActionCollapse"
-    :class="{ collapsed: isCollapsed }"
-    ref="el"
-  >
-    <SButton
-      type="text"
-      mode="mute"
-      size="small"
-      :icon="icon"
-      :disabled="disabled"
-      :tooltip="tooltip"
-      @click="toggleCollapse"
-    />
-  </div>
-</template>

package/lib/components/SCardHeaderActions.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="SCardHeaderActions">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.SCardHeaderActions {
-  display: flex;
-  justify-content: flex-end;
-  padding-right: 8px;
-}
-</style>