frappe-ui 0.1.99 → 0.1.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.99",
+  "version": "0.1.101",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {

package/src/components/FormControl.vue

@@ -29,7 +29,11 @@
       :id="id"
       v-bind="{ ...controlAttrs, size }"
     />
-    <TextInput v-else :id="id" v-bind="{ ...controlAttrs, type, size }">
+    <TextInput
+      v-else
+      :id="id"
+      v-bind="{ ...controlAttrs, type, size, required }"
+    >
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
       </template>

package/src/components/TextInput.vue

@@ -22,6 +22,7 @@
       :disabled="disabled"
       :id="id"
       :value="modelValue"
+      :required="required"
       @input="handleChange"
       @change="handleChange"
       v-bind="attrsWithoutClassStyle"
@@ -53,6 +54,7 @@ interface TextInputProps {
   id?: string
   modelValue?: string | number
   debounce?: number
+  required?: boolean
 }
 
 defineOptions({

package/src/data-fetching/useCall/useCall.test.ts

@@ -145,7 +145,7 @@ describe('useCall', () => {
     const call = useCall<Response>({
       url: url('/api/v2/method/post'),
       method: 'POST',
-      refetch: true,
+      refetch: false,
       immediate: false,
     })
 

package/src/data-fetching/useCall/useCall.ts

@@ -88,11 +88,15 @@ export function useCall<TResponse, TParams extends BasicParams = undefined>(
     canAbort,
     aborted,
     abort,
-    execute,
+    execute: _execute,
     onFetchResponse,
     onFetchError,
   } = result
 
+  function execute(): Promise<TResponse | null> {
+    return _execute().then((r) => data.value)
+  }
+
   onFetchResponse(() => {
     resolve()
     promise.value = makePromise()
@@ -107,7 +111,9 @@ export function useCall<TResponse, TParams extends BasicParams = undefined>(
     if (beforeSubmit) {
       beforeSubmit(params)
     }
-    submitParams.value = params
+    if (params != null) {
+      submitParams.value = params
+    }
     if (!refetch) {
       return execute()
     }
@@ -122,14 +128,14 @@ export function useCall<TResponse, TParams extends BasicParams = undefined>(
 
   const _data = computed(() => {
     if (normalizedCacheKey && (out.loading || !out.isFinished)) {
-      let data = cachedResponse.value as TResponse
+      let cachedData = cachedResponse.value as TResponse
       if (transform) {
-        let returnValue = transform(data)
+        let returnValue = transform(cachedData)
         if (returnValue !== undefined) {
-          data = returnValue
+          cachedData = returnValue
         }
       }
-      return data
+      return cachedData
     }
     return data.value
   })

package/src/data-fetching/useDoc/useDoc.ts

@@ -100,7 +100,7 @@ export function useDoc<TDoc extends { name: string }, TMethods = {}>(
 
       let callOptions: UseCallOptions = {
         immediate: false,
-        refetch: true,
+        refetch: false,
         method: 'POST',
         ...option,
         baseUrl,

package/src/data-fetching/useList/types.ts

@@ -1,7 +1,9 @@
-import { Reactive, Ref } from 'vue'
+import { MaybeRefOrGetter, Reactive, Ref } from 'vue'
 import { CacheKey } from '../useCall/types'
 
 export type Field = string
+export type LinkField = `${Field}.${Field}` | `${Field}.${Field} as ${string}`
+export type FieldWithAlias = `${Field} as ${string}`
 
 export type ChildTableField = {
   [key: string]: Field[]
@@ -25,9 +27,9 @@ export type OrderBy =
 
 export interface UseListOptions<T> {
   doctype: string
-  fields?: Array<keyof T | ChildTableField>
-  filters?: Reactive<Filters>
-  orderBy?: OrderBy
+  fields?: Array<keyof T | ChildTableField | LinkField | FieldWithAlias | '*'>
+  filters?: MaybeRefOrGetter<Filters>
+  orderBy?: MaybeRefOrGetter<OrderBy>
   start?: number
   limit?: number
   groupBy?: Field
@@ -44,7 +46,4 @@ export interface UseListOptions<T> {
   onError?: (error: Error) => void
 }
 
-export interface UseListResponse<T> {
-  result: T[]
-  has_next_page: boolean
-}
+export type UseListResponse<T> = T[]

package/src/data-fetching/useList/useList.test.ts

@@ -27,7 +27,7 @@ describe('useList', () => {
     // Verify initial state
     expect(users.data).toBe(null)
     expect(users.error).toBe(null)
-    expect(users.hasNextPage).toBe(false)
+    expect(users.hasNextPage).toBe(true)
     expect(typeof users.fetch).toBe('function')
 
     // fetch

package/src/data-fetching/useList/useList.ts

@@ -46,11 +46,12 @@ export function useList<T extends { name: string }>(
   const _limit = ref(limit || 20)
 
   const _url = computed(() => {
-    const parsedFilters = parseFilters(filters || {})
+    const parsedFilters = parseFilters(filters ? toValue(filters) : {})
+    const _fields = fields ? toValue(fields) : []
     const params = makeGetParams({
-      fields: fields?.length ? JSON.stringify(fields) : null,
+      fields: _fields.length ? JSON.stringify(_fields) : null,
       filters: parsedFilters ? JSON.stringify(parsedFilters) : null,
-      order_by: orderBy,
+      order_by: toValue(orderBy),
       start: _start.value,
       limit: _limit.value,
       group_by: groupBy,
@@ -64,14 +65,20 @@ export function useList<T extends { name: string }>(
   })
 
   const allData: Ref<T[] | null> = ref(null)
+  const hasNextPage = ref(true)
+  const hasPreviousPage = computed(() => _start.value > 0)
 
   const fetchOptions: UseFetchOptions = {
     immediate,
     refetch,
-    initialData: initialData
-      ? { result: initialData, has_next_page: false }
-      : null,
-    afterFetch: handleAfterFetch<T>({ ...options, allData, _start }),
+    initialData: initialData || null,
+    afterFetch: handleAfterFetch<T>({
+      ...options,
+      allData,
+      _start,
+      _limit,
+      hasNextPage,
+    }),
     onFetchError: handleFetchError<T>(options),
   }
 
@@ -94,24 +101,16 @@ export function useList<T extends { name: string }>(
       let data = cachedResponse.value
       if (data) {
         if (transform) {
-          let returnValue = transform(data.result as T[])
+          let returnValue = transform(data as T[])
           if (returnValue !== undefined) {
             return returnValue
           }
         }
-        return data.result
+        return data
       }
     }
     return allData.value
   })
-  const hasNextPage = computed(() => {
-    if (normalizedCacheKey && (out.loading || !out.isFinished)) {
-      let data = cachedResponse.value
-      return data?.has_next_page ?? false
-    }
-    return data.value?.has_next_page ?? false
-  })
-  const hasPreviousPage = computed(() => _start.value > 0)
 
   if (normalizedCacheKey) {
     idbStore.get(normalizedCacheKey).then((data) => {
@@ -247,7 +246,7 @@ export function useList<T extends { name: string }>(
 
   let out = reactive({
     data: result,
-    hasNextPage,
+    hasNextPage: readonly(hasNextPage),
     hasPreviousPage,
     start: readonly(_start),
     limit: readonly(_limit),
@@ -283,15 +282,24 @@ function handleAfterFetch<T extends { name: string }>({
   cacheKey,
   allData,
   _start,
+  _limit,
+  hasNextPage,
 }: UseListOptions<T> & {
   allData: Ref<T[] | null>
   _start: Ref<number>
+  _limit: Ref<number>
+  hasNextPage: Ref<boolean>
 }) {
   return function (ctx: AfterFetchContext) {
-    let resultData = (ctx.data.result as T[]).map((item) => ({
-      ...item,
-      name: String(item.name),
-    }))
+    let resultData = ctx.data
+    if (resultData[0]?.name) {
+      resultData = resultData.map((item) => ({
+        ...item,
+        name: String(item.name),
+      }))
+    }
+    hasNextPage.value = resultData.length < _limit.value ? false : true
+
     if (transform) {
       const returnValue = transform(resultData)
       if (Array.isArray(returnValue)) {
@@ -300,11 +308,11 @@ function handleAfterFetch<T extends { name: string }>({
     }
 
     if (_start.value === 0) {
-      allData.value = resultData
+      allData.value = resultData as T[]
     } else {
       allData.value = [...(allData.value || []), ...resultData]
     }
-    ctx.data.result = allData.value
+    ctx.data = allData.value
 
     let normalizedCacheKey = normalizeCacheKey(cacheKey, 'useList')
     if (normalizedCacheKey) {

package/src/data-fetching/useNewDoc/useNewDoc.ts

@@ -1,6 +1,7 @@
 import { reactive, unref } from 'vue'
 import { useCall } from '../useCall/useCall'
 import { UseCallOptions } from '../useCall/types'
+import { docStore } from '../docStore'
 
 type UseNewDocOptions = Omit<
   UseCallOptions,
@@ -18,7 +19,11 @@ export function useNewDoc<T extends object>(
 ) {
   let doc = reactive<NewDoc<T>>(initialValues)
 
-  const out = useCall<T>({
+  type DocResponse = T & {
+    name: string
+  }
+
+  const out = useCall<DocResponse>({
     url: `/api/v2/document/${doctype}`,
     method: 'POST',
     params() {
@@ -34,8 +39,19 @@ export function useNewDoc<T extends object>(
     ...options,
   })
 
+  function submit() {
+    return out
+      .submit()
+      .then((doc) =>
+        docStore
+          .setDoc({ doctype, ...(doc as DocResponse) })
+          .then(() => docStore.getDoc(doctype, doc.name.toString()).value as T),
+      )
+  }
+
   return reactive({
     ...out,
+    submit,
     doc,
   })
 }

package/src/mocks/handlers.ts

@@ -59,10 +59,7 @@ export const handlers = [
     let result = getUsers(listParams)
 
     return HttpResponse.json({
-      data: {
-        result,
-        has_next_page: true,
-      },
+      data: result,
     })
   }),