feat: ability for alternative auth in useList & useDoc

components.d.ts

@@ -47,7 +47,6 @@ declare module 'vue' {
     CommandPalette: typeof import('./src/components/CommandPalette/CommandPalette.vue')['default']
     CommandPaletteItem: typeof import('./src/components/CommandPalette/CommandPaletteItem.vue')['default']
     ConfirmDialog: typeof import('./src/components/ConfirmDialog.vue')['default']
-    DateMonthYearPicker: typeof import('./src/components/Calendar/DateMonthYearPicker.vue')['default']
     DatePicker: typeof import('./src/components/DatePicker/DatePicker.vue')['default']
     'DatePicker.story': typeof import('./src/components/DatePicker/DatePicker.story.vue')['default']
     DateRangePicker: typeof import('./src/components/DatePicker/DateRangePicker.vue')['default']
@@ -121,11 +120,6 @@ declare module 'vue' {
     'ListView.story': typeof import('./src/components/ListView/ListView.story.vue')['default']
     LoadingIndicator: typeof import('./src/components/LoadingIndicator.vue')['default']
     LoadingText: typeof import('./src/components/LoadingText.vue')['default']
-    LucideCalendar: typeof import('~icons/lucide/calendar')['default']
-    LucideCheck: typeof import('~icons/lucide/check')['default']
-    LucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
-    LucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
-    LucideX: typeof import('~icons/lucide/x')['default']
     MentionList: typeof import('./src/components/TextEditor/MentionList.vue')['default']
     Menu: typeof import('./src/components/TextEditor/Menu.vue')['default']
     MonthIcon: typeof import('./src/components/Calendar/Icon/MonthIcon.vue')['default']

package.json

@@ -87,17 +87,17 @@
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.17",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^5.2.4",
     "autoprefixer": "^10.4.13",
     "histoire": "^0.17.17",
-    "lint-staged": ">=10",
+    "lint-staged": "^15.0.0",
     "msw": "^2.7.0",
     "postcss": "^8.4.21",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.2.7",
-    "vite": "^5.1.8",
+    "vite": "^5.4.8",
     "vitest": "^2.1.8",
-    "vue": "^3.3.0",
+    "vue": "^3.5.22",
     "vue-router": "^4.1.6"
   },
   "resolutions": {

src/components/Charts/ECharts.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { EChartsOption, init } from 'echarts'
+import type { EChartsOption } from 'echarts'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import debounce from '../../utils/debounce'
 
@@ -11,13 +11,17 @@ const props = defineProps<{
   error?: string
 }>()
 
+let echarts
 let chart: echarts.ECharts
 const chartDiv = ref<HTMLDivElement>()
 
-onMounted(() => {
+onMounted(async () => {
+  // Lazy-loading for build size
+  echarts = await import('echarts')
+
   if (!chartDiv.value) return
 
-  chart = init(chartDiv.value, 'light', { renderer: 'svg' })
+  chart = echarts.init(chartDiv.value, 'light', { renderer: 'svg' })
   chart.setOption({ ...props.options }, true)
 
   if (props.events?.click) {

src/data-fetching/useCall/types.ts

@@ -14,6 +14,8 @@ export interface UseCallOptions<
   immediate?: boolean
   refetch?: boolean
   baseUrl?: string
+  headers?: Record<string, string>
+  credentials?: string
   initialData?: TResponse
   beforeSubmit?: (params?: TParams) => void
   transform?: (data: TResponse) => TResponse

src/data-fetching/useCall/useCall.ts

@@ -23,6 +23,11 @@ export function useCall<TResponse, TParams extends BasicParams = undefined>(
     onError,
   } = options
 
+  const extraFetchOptions = {
+    ...(options?.headers && { headers: options.headers }),
+    ...(options?.credentials && { credentials: options.credentials }),
+  }
+
   let submitParams = ref<TParams | null | undefined>(null)
 
   let resolve: (value?: any) => void
@@ -63,6 +68,9 @@ export function useCall<TResponse, TParams extends BasicParams = undefined>(
     immediate,
     refetch,
     initialData,
+    beforeFetch: ({ options }) => {
+      Object.assign(options, extraFetchOptions)
+    },
     afterFetch(ctx: AfterFetchContext<FrappeResponse<TResponse>>) {
       if (ctx.data) {
         if (transform) {

src/data-fetching/useDoc/useDoc.ts

@@ -33,6 +33,8 @@ interface UseDocOptions<TDoc> {
   doctype: string
   name: MaybeRefOrGetter<string>
   baseUrl?: string
+  headers?: Record<string, string>
+  credentials?: string
   methods?: Record<string, string | DocMethodOption>
   immediate?: boolean
   transform?: (doc: TDoc & { doctype: string }) => TDoc & { doctype: string }
@@ -50,8 +52,14 @@ export function useDoc<TDoc extends { name: string }, TMethods = {}>(
     transform,
   } = options
 
+  const extraFetchOptions = {
+    ...(options?.headers && { headers: options.headers }),
+    ...(options?.credentials && { credentials: options.credentials }),
+  }
+
   const url = computed(
-    () => `${baseUrl}/api/v2/document/${doctype}/${toValue(name)}`,
+    () =>
+      `${baseUrl}/api/v2/document/${encodeURIComponent(doctype)}/${encodeURIComponent(toValue(name))}`,
   )
 
   type SuccessCallback = (doc: TDoc) => void
@@ -69,6 +77,9 @@ export function useDoc<TDoc extends { name: string }, TMethods = {}>(
   const fetchOptions: UseFetchOptions = {
     immediate,
     refetch: true,
+    beforeFetch: ({ options }) => {
+      Object.assign(options, extraFetchOptions)
+    },
     afterFetch(ctx: AfterFetchContext<{ data: TDoc }>) {
       if (ctx.data) {
         let doc = {
@@ -114,21 +125,17 @@ export function useDoc<TDoc extends { name: string }, TMethods = {}>(
         refetch: false,
         method: 'POST',
         ...option,
-        baseUrl,
-        url: computed(
-          () =>
-            `/api/v2/document/${doctype}/${toValue(name)}/method/${option.name}`,
-        ),
+        url: computed(() => `${url.value}/method/${option.name}`),
+        ...extraFetchOptions,
       }
 
       docMethods[key] = readonly(useCall(callOptions))
     }
   }
 
   let setValue = useCall<TDoc, Partial<TDoc>>({
-    url: computed(() => `/api/v2/document/${doctype}/${toValue(name)}`),
+    url,
     method: 'PUT',
-    baseUrl,
     immediate: false,
     refetch: false,
     onSuccess(data) {
@@ -139,19 +146,20 @@ export function useDoc<TDoc extends { name: string }, TMethods = {}>(
       docStore.setDoc(docWithType)
       listStore.updateRow(doctype, data)
     },
+    ...extraFetchOptions,
   })
 
   type DeleteResponse = 'ok'
   const delete_ = useCall<DeleteResponse>({
-    url: computed(() => `/api/v2/document/${doctype}/${toValue(name)}`),
+    url,
     method: 'DELETE',
-    baseUrl,
     immediate: false,
     refetch: false,
     onSuccess() {
       docStore.removeDoc(doctype, toValue(name))
       listStore.removeRow(doctype, toValue(name))
     },
+    ...extraFetchOptions,
   })
 
   const doc = docStore.getDoc(doctype, name) as Ref<TDoc | null>

src/data-fetching/useList/types.ts

@@ -38,6 +38,8 @@ export interface UseListOptions<T> {
   immediate?: boolean
   refetch?: boolean
   baseUrl?: string
+  headers?: Record<string, string>
+  credentials?: string
   url?: `/${string}`
   transform?: (data: T[]) => T[]
   onSuccess?: (data: T[]) => void

src/data-fetching/useList/useList.ts

@@ -42,6 +42,11 @@ export function useList<T extends { name: string }>(
     transform,
   } = options
 
+  const extraFetchOptions = {
+    ...(options?.headers && { headers: options.headers }),
+    ...(options?.credentials && { credentials: options.credentials }),
+  }
+
   const _start = ref(start || 0)
   const _limit = ref(limit || 20)
 
@@ -72,6 +77,9 @@ export function useList<T extends { name: string }>(
     immediate,
     refetch,
     initialData: initialData || null,
+    beforeFetch: ({ options }) => {
+      Object.assign(options, extraFetchOptions)
+    },
     afterFetch: handleAfterFetch<T>({
       ...options,
       allData,