@globalbrain/sefirot 3.8.0 → 3.9.0

package/lib/components/SErrorBoundary.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { onErrorCaptured, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const emit = defineEmits<{
+  (e: 'error', value: any): void
+}>()
+
+const error = ref<Error | null>(null)
+
+onErrorCaptured((e) => {
+  if (import.meta.env.DEV) {
+    console.error(e)
+  }
+  if (!import.meta.env.SSR) {
+    error.value = e
+    emit('error', e)
+    return false
+  }
+})
+
+async function clearError(options: { redirect?: string } = {}) {
+  if (options.redirect) {
+    await useRouter().replace(options.redirect)
+  }
+  error.value = null
+}
+</script>
+
+<template>
+  <slot v-if="error != null" name="error" :error="error" :clear-error="clearError" />
+  <slot v-else />
+</template>

package/lib/composables/Api.ts

@@ -0,0 +1,71 @@
+import { type Ref, ref } from 'vue'
+import { Http } from '../http/Http'
+
+export interface Query<Data = any> {
+  loading: Ref<boolean>
+  data: Ref<Data | undefined>
+  execute(): Promise<Data>
+}
+
+export interface UseQueryOptions {
+  /**
+   * controls whether the query should execute immediately
+   * @default true
+   */
+  immediate?: boolean
+}
+
+export interface Mutation<Data = any, Args extends any[] = any[]> {
+  loading: Ref<boolean>
+  data: Ref<Data | undefined>
+  execute(...args: Args): Promise<Data>
+}
+
+export type Get<Data = any, Args extends any[] = any[]> = Mutation<Data, Args>
+
+export function useQuery<Data = any>(
+  req: (http: Http) => Promise<Data>,
+  options: UseQueryOptions = {}
+): Query<Data> {
+  const loading = ref(false)
+  const data = ref<Data | undefined>()
+
+  if (options.immediate !== false) {
+    execute()
+  }
+
+  async function execute(): Promise<Data> {
+    loading.value = true
+
+    const res: Data = await req(new Http())
+    data.value = res
+
+    loading.value = false
+    return res
+  }
+
+  return { loading, data, execute }
+}
+
+export function useMutation<Data = any, Args extends any[] = any[]>(
+  req: (http: Http, ...args: Args) => Promise<Data>
+): Mutation<Data, Args> {
+  const loading = ref(false)
+  const data = ref<Data | undefined>()
+
+  async function execute(...args: Args): Promise<Data> {
+    loading.value = true
+
+    const res: Data = await req(new Http(), ...args)
+    data.value = res
+
+    loading.value = false
+    return res
+  }
+
+  return { loading, data, execute }
+}
+
+export const useGet: <Data = any, Args extends any[] = any[]>(
+  req: (http: Http, ...args: Args) => Promise<Data>
+) => Get<Data, Args> = useMutation

package/lib/composables/Data.ts

@@ -44,7 +44,7 @@ export function useData<T extends Record<string, any>>(
   }
 
   return {
-    state: reactiveState,
+    state: reactiveState as T,
     init
   }
 }

package/lib/composables/Url.ts

@@ -0,0 +1,96 @@
+import isPlainObject from 'lodash-es/isPlainObject'
+import { watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export interface UseUrlQuerySyncOptions {
+  casts?: Record<string, (value: string) => any>
+  exclude?: string[]
+}
+
+export function useUrlQuerySync(
+  state: Record<string, any>,
+  { casts = {}, exclude }: UseUrlQuerySyncOptions = {}
+): void {
+  const router = useRouter()
+  const route = useRoute()
+
+  const flattenInitialState = flattenObject(JSON.parse(JSON.stringify(state)))
+
+  setStateFromQuery()
+
+  watch(() => state, setQueryFromState, { deep: true, immediate: true })
+
+  function setStateFromQuery() {
+    const flattenState = flattenObject(state)
+    const flattenQuery = flattenObject(route.query)
+
+    Object.keys(flattenQuery).forEach((key) => {
+      if (exclude?.includes(key)) {
+        return
+      }
+
+      const value = flattenQuery[key]
+      if (value === undefined) {
+        return
+      }
+
+      const cast = casts[key]
+      flattenState[key] = cast ? cast(value) : value
+    })
+
+    Object.assign(state, unflattenObject(flattenState))
+  }
+
+  async function setQueryFromState() {
+    const flattenState = flattenObject(state)
+    const flattenQuery = flattenObject(route.query)
+
+    Object.keys(flattenState).forEach((key) => {
+      if (exclude?.includes(key)) {
+        return
+      }
+
+      const value = flattenState[key]
+      const initialValue = flattenInitialState[key]
+
+      if (value === initialValue) {
+        delete flattenQuery[key]
+      } else {
+        flattenQuery[key] = value
+      }
+
+      if (flattenQuery[key] === undefined) {
+        delete flattenQuery[key]
+      }
+    })
+
+    await router.replace({ query: unflattenObject(flattenQuery) })
+  }
+}
+
+function flattenObject(obj: Record<string, any>, prefix = '') {
+  return Object.keys(obj).reduce((acc, k) => {
+    const pre = prefix.length ? `${prefix}.` : ''
+    if (isPlainObject(obj[k])) {
+      Object.assign(acc, flattenObject(obj[k], pre + k))
+    } else {
+      acc[pre + k] = obj[k]
+    }
+    return acc
+  }, {} as Record<string, any>)
+}
+
+function unflattenObject(obj: Record<string, any>) {
+  return Object.keys(obj).reduce((acc, k) => {
+    const keys = k.split('.')
+    keys.reduce((a, c, i) => {
+      if (i === keys.length - 1) {
+        a[c] = obj[k]
+      } else {
+        a[c] = a[c] || {}
+      }
+      return a[c]
+    }, acc)
+    return acc
+  }, {} as Record<string, any>)
+}

package/lib/http/Http.ts

@@ -0,0 +1,137 @@
+import { parse as parseContentDisposition } from '@tinyhttp/content-disposition'
+import { parse as parseCookie } from '@tinyhttp/cookie'
+import FileSaver from 'file-saver'
+import { $fetch, type FetchOptions } from 'ofetch'
+import { stringify } from 'qs'
+
+export class Http {
+  static xsrfUrl = '/api/csrf-cookie'
+
+  private async ensureXsrfToken(): Promise<string | undefined> {
+    let xsrfToken = parseCookie(document.cookie)['XSRF-TOKEN']
+
+    if (!xsrfToken) {
+      await this.head(Http.xsrfUrl)
+      xsrfToken = parseCookie(document.cookie)['XSRF-TOKEN']
+    }
+
+    return xsrfToken
+  }
+
+  private async buildRequest(
+    url: string,
+    _options: FetchOptions = {}
+  ): Promise<[string, FetchOptions]> {
+    const { method, params, query, ...options } = _options
+
+    const xsrfToken
+      = ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method || '') && (await this.ensureXsrfToken())
+
+    const queryString = stringify(
+      { ...params, ...query },
+      { arrayFormat: 'brackets', encodeValuesOnly: true }
+    )
+
+    return [
+      `${url}${queryString ? `?${queryString}` : ''}`,
+      {
+        method,
+        credentials: 'include',
+        ...options,
+        headers: {
+          Accept: 'application/json',
+          ...(xsrfToken && { 'X-XSRF-TOKEN': xsrfToken }),
+          ...options.headers
+        }
+      }
+    ]
+  }
+
+  private async performRequest<T>(url: string, options: FetchOptions = {}) {
+    return $fetch<T, any>(...(await this.buildRequest(url, options)))
+  }
+
+  private async performRequestRaw<T>(url: string, options: FetchOptions = {}) {
+    return $fetch.raw<T, any>(...(await this.buildRequest(url, options)))
+  }
+
+  private objectToFormData(obj: any, form?: FormData, namespace?: string) {
+    const fd = form || new FormData()
+    let formKey: string
+
+    for (const property in obj) {
+      if (Reflect.has(obj, property)) {
+        if (namespace) {
+          formKey = `${namespace}[${property}]`
+        } else {
+          formKey = property
+        }
+
+        if (obj[property] === undefined) {
+          continue
+        }
+
+        if (typeof obj[property] === 'object' && !(obj[property] instanceof Blob)) {
+          this.objectToFormData(obj[property], fd, property)
+        } else {
+          fd.append(formKey, obj[property])
+        }
+      }
+    }
+
+    return fd
+  }
+
+  async get<T = any>(url: string, options?: FetchOptions): Promise<T> {
+    return this.performRequest<T>(url, { method: 'GET', ...options })
+  }
+
+  async head<T = any>(url: string, options?: FetchOptions): Promise<T> {
+    return this.performRequest<T>(url, { method: 'HEAD', ...options })
+  }
+
+  async post<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
+    return this.performRequest<T>(url, { method: 'POST', body, ...options })
+  }
+
+  async put<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
+    return this.performRequest<T>(url, { method: 'PUT', body, ...options })
+  }
+
+  async patch<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
+    return this.performRequest<T>(url, { method: 'PATCH', body, ...options })
+  }
+
+  async delete<T = any>(url: string, options?: FetchOptions): Promise<T> {
+    return this.performRequest<T>(url, { method: 'DELETE', ...options })
+  }
+
+  async upload<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
+    const formData = this.objectToFormData(body)
+
+    return this.performRequest<T>(url, {
+      method: 'POST',
+      body: formData,
+      ...options
+    })
+  }
+
+  async download(url: string, options?: FetchOptions): Promise<void> {
+    const { _data: blob, headers } = await this.performRequestRaw<Blob>(url, {
+      method: 'GET',
+      responseType: 'blob',
+      ...options
+    })
+
+    if (!blob) {
+      throw new Error('No blob')
+    }
+
+    const { filename = 'download' }
+      = parseContentDisposition(headers.get('Content-Disposition') || '')?.parameters || {}
+
+    FileSaver.saveAs(blob, filename as string)
+  }
+}
+
+export type { FetchOptions }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.8.0",
-  "packageManager": "pnpm@8.10.5",
+  "version": "3.9.0",
+  "packageManager": "pnpm@8.11.0",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -41,66 +41,72 @@
     "@iconify-icons/ph": "^1.2.5",
     "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "^4.1.1",
-    "@tanstack/vue-virtual": "3.0.0-beta.62",
     "@types/body-scroll-lock": "^3.1.2",
-    "@types/lodash-es": "^4.17.11",
-    "@types/markdown-it": "^13.0.6",
+    "@types/lodash-es": "^4.17.12",
+    "@types/markdown-it": "^13.0.7",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.6.1",
+    "@vueuse/core": "^10.7.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "fuse.js": "^7.0.0",
     "lodash-es": "^4.17.21",
-    "markdown-it": "^13.0.2",
+    "markdown-it": "^14.0.0",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.32",
     "postcss-nested": "^6.0.1",
     "v-calendar": "^3.1.2",
-    "vue": "^3.3.8",
+    "vue": "^3.3.10",
     "vue-router": "^4.2.5"
   },
   "dependencies": {
-    "dayjs": "^1.11.10"
+    "@tanstack/vue-virtual": "3.0.0-beta.62",
+    "@tinyhttp/content-disposition": "^2.2.0",
+    "@tinyhttp/cookie": "^2.1.0",
+    "dayjs": "^1.11.10",
+    "file-saver": "^2.0.5",
+    "ofetch": "^1.3.3",
+    "qs": "^6.11.2"
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^1.5.2",
-    "@histoire/plugin-vue": "^0.17.5",
+    "@histoire/plugin-vue": "^0.17.6",
     "@iconify-icons/ph": "^1.2.5",
     "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "^4.1.1",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@tanstack/vue-virtual": "3.0.0-beta.62",
     "@types/body-scroll-lock": "^3.1.2",
-    "@types/lodash-es": "^4.17.11",
-    "@types/markdown-it": "^13.0.6",
-    "@types/node": "^20.9.2",
-    "@vitejs/plugin-vue": "^4.5.0",
-    "@vitest/coverage-v8": "^1.0.0-beta.5",
-    "@vue/test-utils": "^2.4.2",
+    "@types/file-saver": "^2.0.7",
+    "@types/lodash-es": "^4.17.12",
+    "@types/markdown-it": "^13.0.7",
+    "@types/node": "^20.10.4",
+    "@types/qs": "^6.9.10",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitest/coverage-v8": "^1.0.2",
+    "@vue/test-utils": "^2.4.3",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.6.1",
+    "@vueuse/core": "^10.7.0",
     "body-scroll-lock": "4.0.0-beta.0",
-    "eslint": "^8.54.0",
+    "eslint": "^8.55.0",
     "fuse.js": "^7.0.0",
     "happy-dom": "^12.10.3",
-    "histoire": "^0.17.5",
+    "histoire": "^0.17.6",
     "lodash-es": "^4.17.21",
-    "markdown-it": "^13.0.2",
+    "markdown-it": "^14.0.0",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.32",
     "postcss-nested": "^6.0.1",
     "punycode": "^2.3.1",
     "release-it": "^17.0.0",
-    "typescript": "~5.2.2",
+    "typescript": "~5.3.3",
     "v-calendar": "^3.1.2",
-    "vite": "^5.0.0",
-    "vitepress": "1.0.0-rc.29",
-    "vitest": "^1.0.0-beta.5",
-    "vue": "^3.3.8",
+    "vite": "^5.0.6",
+    "vitepress": "1.0.0-rc.31",
+    "vitest": "^1.0.2",
+    "vue": "^3.3.10",
     "vue-router": "^4.2.5",
-    "vue-tsc": "^1.8.22"
+    "vue-tsc": "^1.8.25"
   }
 }