frappe-ui 0.1.97 → 0.1.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.97",
+  "version": "0.1.99",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -60,7 +60,7 @@
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "vue": ">=3.3.0",
+    "vue": ">=3.5.0",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {

package/src/components/Dropdown.vue

@@ -16,7 +16,7 @@
 
       <template #body>
         <MenuItems
-          class="mt-2 min-w-40 divide-y divide-outline-gray-1 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+          class="mt-2 min-w-40 divide-y divide-outline-gray-modals rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
           :class="{
             'left-0 origin-top-left': placement == 'left',
             'right-0 origin-top-right': placement == 'right',

package/src/components/ListView/ListRow.vue

@@ -69,7 +69,7 @@
       </div>
       <div
         v-if="!isLastRow"
-        class="mx-2 h-px border-t border-outline-gray-modals"
+        class="mx-2 h-px border-t border-outline-gray-1"
       />
     </component>
   </component>

package/src/components/{ListView.story.vue → ListView/ListView.story.vue}

@@ -1,17 +1,16 @@
 <script setup>
 import { reactive, h, ref } from 'vue'
-import Avatar from './Avatar.vue'
-import Badge from './Badge.vue'
-import { Button } from './Button'
-import FeatherIcon from './FeatherIcon.vue'
-import ListHeader from './ListView/ListHeader.vue'
-import ListHeaderItem from './ListView/ListHeaderItem.vue'
-import ListRow from './ListView/ListRow.vue'
-import ListRowItem from './ListView/ListRowItem.vue'
-import ListRows from './ListView/ListRows.vue'
-import ListGroups from './ListView/ListGroups.vue'
-import ListSelectBanner from './ListView/ListSelectBanner.vue'
-import ListView from './ListView/ListView.vue'
+import Avatar from '../Avatar.vue'
+import Badge from '../Badge.vue'
+import { Button } from '../Button'
+import FeatherIcon from '../FeatherIcon.vue'
+import ListHeader from './ListHeader.vue'
+import ListHeaderItem from './ListHeaderItem.vue'
+import ListRow from './ListRow.vue'
+import ListRowItem from './ListRowItem.vue'
+import ListRows from './ListRows.vue'
+import ListSelectBanner from './ListSelectBanner.vue'
+import ListView from './ListView.vue'
 
 const state = reactive({
   selectable: true,

package/src/components/ListView/ListView.vue

@@ -143,4 +143,11 @@ provide(
     toggleAllRows,
   })),
 )
+
+defineExpose({
+  selections,
+  allRowsSelected,
+  toggleRow,
+  toggleAllRows,
+})
 </script>

package/src/components/Tabs/TabList.vue

@@ -0,0 +1,81 @@
+<template>
+  <TabList
+    class="relative flex"
+    :class="
+      vertical
+        ? 'flex-col border-r overflow-y-auto'
+        : 'gap-7.5 border-b overflow-x-auto items-center px-5'
+    "
+  >
+    <Tab
+      ref="tabRef"
+      as="template"
+      v-for="(tab, i) in tabs"
+      :key="i"
+      v-slot="{ selected }"
+      class="focus:outline-none focus:transition-none"
+    >
+      <slot v-bind="{ tab, selected }">
+        <button
+          class="flex items-center gap-1.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:text-ink-gray-9"
+          :class="[
+            selected ? 'text-ink-gray-9' : '',
+            vertical
+              ? 'py-2.5 px-4 border-r border-transparent hover:border-outline-gray-3'
+              : 'py-3 border-b border-transparent hover:border-outline-gray-3',
+          ]"
+        >
+          <component v-if="tab.icon" :is="tab.icon" class="size-4" />
+          {{ tab.label }}
+        </button>
+      </slot>
+    </Tab>
+    <div
+      ref="indicator"
+      class="tab-indicator absolute bg-surface-gray-7"
+      :class="[vertical ? 'right-0 w-px' : 'bottom-0 h-px', transitionClass]"
+    />
+  </TabList>
+</template>
+<script setup>
+import { TabList, Tab } from '@headlessui/vue'
+import { ref, watch, computed, onMounted, nextTick, inject } from 'vue'
+
+const tabIndex = inject('tabIndex')
+const tabs = inject('tabs')
+const vertical = inject('vertical')
+
+const tabRef = ref([])
+const indicator = ref(null)
+const tabsLength = computed(() => tabs.value?.length)
+
+const transitionClass = ref('')
+
+function moveIndicator(index) {
+  if (index >= tabsLength.value) {
+    index = tabsLength.value - 1
+  }
+  const selectedTab = tabRef.value[index].el
+  if (vertical) {
+    indicator.value.style.height = `${selectedTab.offsetHeight}px`
+    indicator.value.style.top = `${selectedTab.offsetTop}px`
+  } else {
+    indicator.value.style.width = `${selectedTab.offsetWidth}px`
+    indicator.value.style.left = `${selectedTab.offsetLeft}px`
+  }
+}
+
+watch(tabIndex, (index) => {
+  if (index >= tabsLength.value) {
+    tabIndex.value = tabsLength.value - 1
+  }
+  transitionClass.value = 'transition-all duration-300 ease-in-out'
+  nextTick(() => moveIndicator(index))
+})
+
+onMounted(() => {
+  nextTick(() => moveIndicator(tabIndex.value))
+  // Fix for indicator not moving on initial load
+  setTimeout(() => moveIndicator(tabIndex.value), 100)
+})
+</script>

package/src/components/Tabs/TabPanel.vue

@@ -0,0 +1,17 @@
+<template>
+  <TabPanels class="flex flex-1 overflow-hidden">
+    <TabPanel
+      class="flex flex-1 flex-col overflow-y-auto focus:outline-none"
+      v-for="(tab, i) in tabs"
+      :key="i"
+    >
+      <slot v-bind="{ tab }" />
+    </TabPanel>
+  </TabPanels>
+</template>
+<script setup>
+import { TabPanels, TabPanel } from '@headlessui/vue'
+import { inject } from 'vue'
+
+const tabs = inject('tabs')
+</script>

package/src/components/Tabs/Tabs.story.md

@@ -0,0 +1,97 @@
+## Props
+
+### tabs
+
+It is an array of objects which contains the following attributes:
+
+1. `label` is the name of the tab, it is required.
+2. `icon` is the icon to be shown in the tab, it accept component and it is
+   optional.
+3. You can add more attributes which can be used for custom rendering in the tab
+   header or content.
+
+### v-model
+
+It is used to set the active tab or change the active tab. It is required.
+
+### vertical
+
+It is used to show the tabs vertically. It is optional.
+
+### as
+
+You can set it to `div` to wrap tabs in a `div`. It can be any valid HTML tag.
+This is useful to control the layout of the tabs. It is optional.
+
+1. `as="div"` or any valid HTML tag
+
+```html
+<div>
+  <!-- container div -->
+  <div>
+    <div active>Tab 1</div>
+    <div>Tab 2</div>
+    <div>Tab 3</div>
+  </div>
+  <div>
+    <div active>Content 1</div>
+    <div>Content 2</div>
+    <div>Content 3</div>
+  </div>
+</div>
+```
+
+2. `as` is not set
+
+```html
+<div>
+  <div active>Tab 1</div>
+  <div>Tab 2</div>
+  <div>Tab 3</div>
+</div>
+<div>
+  <div active>Content 1</div>
+  <div>Content 2</div>
+  <div>Content 3</div>
+</div>
+```
+
+## Slots
+
+1. **tab-item:** You can use this slot to render custom tab items. It is
+   optional.
+2. **tab-panel:** You can use this slot to render custom tab panels. It is
+   required. Example:
+
+```vue
+<Tabs v-model="tabIndex" :tabs="tabs">
+   <template #tab-item="{ tab, selected }">
+      <div :class="{ 'text-gray-900 font-semibold': selected }">
+         <span>{{ tab.label }}</span>
+         <span>{{ tab.icon }}</span>
+      </div>
+   </template>
+   <template #tab-panel="{ tab }">
+      <div>{{ tab.content }}</div>
+   </template>
+</Tabs>
+```
+
+## Layout Customization
+
+You can customize the layout of the tabs by using `<TabList />` and `<TabPanels />`
+components.
+
+```vue
+<Tabs v-model="tabIndex" :tabs="tabs">
+   <TabList v-slot="{ tab, selected }">
+      <div :class="{ 'text-gray-900 font-semibold': selected }">
+         <span>{{ tab.label }}</span>
+         <span>{{ tab.icon }}</span>
+      </div>
+   </TabList>
+   <TabPanel v-slot="{ tab }">
+      <div>{{ tab.content }}</div>
+   </TabPanel>
+</Tabs>
+```

package/src/components/{Tabs.story.vue → Tabs/Tabs.story.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { h, reactive } from 'vue'
 import Tabs from './Tabs.vue'
-import FeatherIcon from './FeatherIcon.vue'
+import FeatherIcon from '../FeatherIcon.vue'
 const state = reactive({
   index: 0,
   tabs_without_icon: [
@@ -48,20 +48,45 @@ const state = reactive({
   <Story :layout="{ type: 'grid', width: '80%' }">
     <Variant title="Without Icon">
       <Tabs
-        v-slot="{ tab }"
+        as="div"
+        class="border rounded"
         v-model="state.index"
         :tabs="state.tabs_without_icon"
       >
-        <div class="p-5">
-          {{ tab.content }}
-        </div>
+        <template #tab-panel="{ tab }">
+          <div class="p-5">
+            {{ tab.content }}
+          </div>
+        </template>
       </Tabs>
     </Variant>
     <Variant title="With Icon">
-      <Tabs v-slot="{ tab }" v-model="state.index" :tabs="state.tabs_with_icon">
-        <div class="p-5">
-          {{ tab.content }}
-        </div>
+      <Tabs
+        as="div"
+        class="border rounded"
+        v-model="state.index"
+        :tabs="state.tabs_with_icon"
+      >
+        <template #tab-panel="{ tab }">
+          <div class="p-5">
+            {{ tab.content }}
+          </div>
+        </template>
+      </Tabs>
+    </Variant>
+    <Variant title="Vertical Tabs">
+      <Tabs
+        as="div"
+        class="border rounded"
+        v-model="state.index"
+        :tabs="state.tabs_with_icon"
+        vertical
+      >
+        <template #tab-panel="{ tab }">
+          <div class="p-5">
+            {{ tab.content }}
+          </div>
+        </template>
       </Tabs>
     </Variant>
 

package/src/components/Tabs/Tabs.vue

@@ -0,0 +1,52 @@
+<template>
+  <TabGroup
+    v-bind="
+      as !== 'template'
+        ? {
+            as,
+            class: ['flex flex-1 overflow-hidden', vertical ? '' : 'flex-col '],
+          }
+        : {}
+    "
+    :defaultIndex="tabIndex"
+    :selectedIndex="tabIndex"
+    @change="(idx) => (tabIndex = idx)"
+  >
+    <slot>
+      <TabList v-slot="{ tab, selected }">
+        <slot name="tab-item" v-bind="{ tab, selected }" />
+      </TabList>
+      <TabPanel v-slot="{ tab }">
+        <slot name="tab-panel" v-bind="{ tab }" />
+      </TabPanel>
+    </slot>
+  </TabGroup>
+</template>
+
+<script setup>
+import TabList from './TabList.vue'
+import TabPanel from './TabPanel.vue'
+import { TabGroup } from '@headlessui/vue'
+import { provide } from 'vue'
+
+const props = defineProps({
+  as: {
+    type: String,
+    default: 'template',
+  },
+  tabs: {
+    type: Array,
+    required: true,
+  },
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const tabIndex = defineModel()
+
+provide('tabIndex', tabIndex)
+provide('tabs', props.tabs)
+provide('vertical', props.vertical)
+</script>

package/src/data-fetching/docStore.ts

@@ -1,4 +1,4 @@
-import { type Ref, type ComputedRef, unref, ref } from 'vue'
+import { Ref, ref, MaybeRefOrGetter, toValue } from 'vue'
 import { idbStore } from './idbStore'
 
 type Doc = {
@@ -49,11 +49,8 @@ class DocStore {
     }
   }
 
-  getDoc(
-    doctype: string,
-    name: string | Ref<string> | ComputedRef<string>,
-  ): Ref<Doc | null> {
-    const nameStr = unref(name)
+  getDoc(doctype: string, name: MaybeRefOrGetter<string>): Ref<Doc | null> {
+    const nameStr = toValue(name)
     if (!doctype || !nameStr) {
       throw new Error('doctype and name are required')
     }
@@ -114,6 +111,10 @@ class DocStore {
     await this.cleanup(key)
   }
 
+  removeDoc(doctype: string, name: string) {
+    return this.invalidateDoc(doctype, name)
+  }
+
   private getKey(doctype: string, name: string): DocKey {
     return `${doctype.trim()}/${name.trim()}` as DocKey
   }

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

@@ -1,4 +1,11 @@
-import { computed, MaybeRef, reactive, readonly, unref, Ref } from 'vue'
+import {
+  computed,
+  reactive,
+  readonly,
+  Ref,
+  MaybeRefOrGetter,
+  toValue,
+} from 'vue'
 import { UseFetchOptions } from '@vueuse/core'
 import { useFrappeFetch } from '../useFrappeFetch'
 import { useCall } from '../useCall/useCall'
@@ -24,7 +31,7 @@ interface DocMethodOption<T = any>
 
 interface UseDocOptions {
   doctype: string
-  name: string | MaybeRef<string>
+  name: MaybeRefOrGetter<string>
   baseUrl?: string
   methods?: Record<string, string | DocMethodOption>
   immediate?: boolean
@@ -42,15 +49,28 @@ export function useDoc<TDoc extends { name: string }, TMethods = {}>(
   } = options
 
   const url = computed(
-    () => `${baseUrl}/api/v2/document/${doctype}/${unref(name)}`,
+    () => `${baseUrl}/api/v2/document/${doctype}/${toValue(name)}`,
   )
 
+  type SuccessCallback = (doc: TDoc) => void
+  const successCallbacks: SuccessCallback[] = []
+  const triggerSuccessCallbacks = (doc: TDoc) => {
+    for (let cb of successCallbacks) {
+      try {
+        cb(doc)
+      } catch (e) {
+        console.error('Error in onSuccess hook:', e)
+      }
+    }
+  }
+
   const fetchOptions: UseFetchOptions = {
     immediate,
     refetch: true,
     afterFetch(ctx) {
       docStore.setDoc({ doctype, ...ctx.data })
       listStore.updateRow(doctype, ctx.data)
+      triggerSuccessCallbacks(ctx.data)
       return ctx
     },
   }
@@ -86,7 +106,7 @@ export function useDoc<TDoc extends { name: string }, TMethods = {}>(
         baseUrl,
         url: computed(
           () =>
-            `/api/v2/document/${doctype}/${unref(name)}/method/${option.name}`,
+            `/api/v2/document/${doctype}/${toValue(name)}/method/${option.name}`,
         ),
       }
 
@@ -95,17 +115,30 @@ export function useDoc<TDoc extends { name: string }, TMethods = {}>(
   }
 
   let setValue = useCall<TDoc, Partial<TDoc>>({
-    immediate: false,
-    refetch: false,
+    url: computed(() => `/api/v2/document/${doctype}/${toValue(name)}`),
     method: 'PUT',
     baseUrl,
-    url: computed(() => `/api/v2/document/${doctype}/${unref(name)}`),
+    immediate: false,
+    refetch: false,
     onSuccess(data) {
       docStore.setDoc({ doctype, ...data })
       listStore.updateRow(doctype, data)
     },
   })
 
+  type DeleteResponse = 'ok'
+  const delete_ = useCall<DeleteResponse>({
+    url: computed(() => `/api/v2/document/${doctype}/${toValue(name)}`),
+    method: 'DELETE',
+    baseUrl,
+    immediate: false,
+    refetch: false,
+    onSuccess() {
+      docStore.removeDoc(doctype, toValue(name))
+      listStore.removeRow(doctype, toValue(name))
+    },
+  })
+
   const doc = docStore.getDoc(doctype, name) as Ref<TDoc | null>
 
   let out = reactive({
@@ -121,6 +154,17 @@ export function useDoc<TDoc extends { name: string }, TMethods = {}>(
     reload: execute,
     abort,
     setValue,
+    delete: delete_,
+    onSuccess: (callback: SuccessCallback) => {
+      successCallbacks.push(callback)
+      return () => {
+        // unsubscribe function
+        const index = successCallbacks.indexOf(callback)
+        if (index > -1) {
+          successCallbacks.splice(index, 1)
+        }
+      }
+    },
     ...docMethods,
   })
 

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

@@ -13,14 +13,16 @@ export function useDoctype<T>(
 ) {
   const insert = useInsert<T>(doctype, options)
   const delete_ = useDelete(doctype, options)
-  const runDocMethod = useRunDocMethod(doctype, options)
   const setValue = useSetValue<T>(doctype, options)
+  const runDocMethod = useRunDocMethod(doctype, options)
+  const runMethod = useRunMethod(doctype, options)
 
   return reactive({
     insert,
     delete: delete_,
     setValue,
     runDocMethod,
+    runMethod,
   })
 }
 
@@ -107,6 +109,54 @@ function useRunDocMethod(doctype: string, options: UseDoctypeOptions = {}) {
   } as RunDocMethodReturnValue)
 }
 
+function useRunMethod(doctype: string, options: UseDoctypeOptions = {}) {
+  let { baseUrl = '' } = options
+  let url = ref(`/api/v2/method/${doctype}/<method>`)
+
+  interface RunMethodParams {
+    method: string
+    validate?: () => string | void
+    params?: Record<string, any>
+  }
+
+  type RunMethodReturnValue = ReturnType<typeof useCall> & {
+    submit: (params: RunMethodParams) => Promise<any>
+    isLoading: (method: string) => boolean
+  }
+
+  let runMethod = useCall<any, RunMethodParams['params']>({
+    url,
+    method: 'POST',
+    immediate: false,
+    baseUrl,
+  })
+
+  let validateError = ref<Error | null>(null)
+
+  return reactive({
+    ...runMethod,
+    error: computed(() => validateError.value || runMethod.error),
+    submit: ({ method, validate, params }: RunMethodParams) => {
+      url.value = `/api/v2/method/${doctype}/${method}`
+      if (validate) {
+        const errorMessage = validate()
+        if (errorMessage) {
+          validateError.value = new Error(errorMessage)
+          return Promise.reject(validateError.value)
+        } else {
+          validateError.value = null
+        }
+      }
+      return runMethod.submit(params)
+    },
+    isLoading: (method: string) => {
+      return (
+        runMethod.loading && url.value === `/api/v2/method/${doctype}/${method}`
+      )
+    },
+  } as RunMethodReturnValue)
+}
+
 function useSetValue<T>(doctype: string, options: UseDoctypeOptions = {}) {
   let { baseUrl = '' } = options
   let url = ref(`/api/v2/document/${doctype}/<name>`)

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

@@ -30,6 +30,13 @@ class ListStore {
     })
   }
 
+  removeRow(doctype: string, name: string) {
+    this.ensureList(doctype)
+    this.byDocType[doctype].forEach((list) => {
+      list.removeRow(name)
+    })
+  }
+
   ensureList(docType: string) {
     if (!this.byDocType[docType]) {
       this.byDocType[docType] = []

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

@@ -13,7 +13,7 @@ export type FilterValue =
   | boolean
   | [string, string | number | boolean | Ref<string | number | boolean>]
 
-export interface ListFilters {
+export interface Filters {
   [key: Field]: FilterValue
 }
 
@@ -26,7 +26,7 @@ export type OrderBy =
 export interface UseListOptions<T> {
   doctype: string
   fields?: Array<keyof T | ChildTableField>
-  filters?: Reactive<ListFilters>
+  filters?: Reactive<Filters>
   orderBy?: OrderBy
   start?: number
   limit?: number
@@ -38,6 +38,7 @@ export interface UseListOptions<T> {
   immediate?: boolean
   refetch?: boolean
   baseUrl?: string
+  url?: `/${string}`
   transform?: (data: T[]) => T[]
   onSuccess?: (data: T[]) => void
   onError?: (error: Error) => void

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

@@ -64,6 +64,8 @@ describe('useList', () => {
     expect(users.start).toBe(2)
     expect(users.hasPreviousPage).toBe(true)
     expect(users.data).toStrictEqual([
+      { name: 'User1', email: 'user1@example.com' },
+      { name: 'User2', email: 'user2@example.com' },
       { name: 'User3', email: 'user3@example.com' },
       { name: 'User4', email: 'user4@example.com' },
     ])

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

@@ -1,4 +1,12 @@
-import { computed, reactive, readonly, ref, triggerRef } from 'vue'
+import {
+  computed,
+  MaybeRefOrGetter,
+  reactive,
+  readonly,
+  Ref,
+  ref,
+  toValue,
+} from 'vue'
 import {
   AfterFetchContext,
   OnFetchErrorContext,
@@ -10,6 +18,7 @@ import { parseFilters, makeGetParams, normalizeCacheKey } from '../utils'
 import { UseListOptions, UseListResponse } from './types'
 import { idbStore } from '../idbStore'
 import { listStore } from './listStore'
+import { docStore } from '../docStore'
 
 export function useList<T extends { name: string }>(
   options: UseListOptions<T>,
@@ -29,13 +38,14 @@ export function useList<T extends { name: string }>(
     refetch = true,
     cacheKey,
     baseUrl = '',
+    url = '',
     transform,
   } = options
 
   const _start = ref(start || 0)
   const _limit = ref(limit || 20)
 
-  const url = computed(() => {
+  const _url = computed(() => {
     const parsedFilters = parseFilters(filters || {})
     const params = makeGetParams({
       fields: fields?.length ? JSON.stringify(fields) : null,
@@ -47,16 +57,21 @@ export function useList<T extends { name: string }>(
       parent: parent,
       debug: debug,
     })
+    if (url) {
+      return `${baseUrl}${url}?${params}`
+    }
     return `${baseUrl}/api/v2/document/${doctype}?${params}`
   })
 
+  const allData: Ref<T[] | null> = ref(null)
+
   const fetchOptions: UseFetchOptions = {
     immediate,
     refetch,
     initialData: initialData
       ? { result: initialData, has_next_page: false }
       : null,
-    afterFetch: handleAfterFetch<T>(options),
+    afterFetch: handleAfterFetch<T>({ ...options, allData, _start }),
     onFetchError: handleFetchError<T>(options),
   }
 
@@ -69,7 +84,7 @@ export function useList<T extends { name: string }>(
     aborted,
     abort,
     execute,
-  } = useFrappeFetch<UseListResponse<T>>(url, fetchOptions).get()
+  } = useFrappeFetch<UseListResponse<T>>(_url, fetchOptions).get()
 
   let normalizedCacheKey = normalizeCacheKey(cacheKey, 'useList')
   let cachedResponse = ref<UseListResponse<T> | null>(null)
@@ -87,7 +102,7 @@ export function useList<T extends { name: string }>(
         return data.result
       }
     }
-    return data.value?.result ?? null
+    return allData.value
   })
   const hasNextPage = computed(() => {
     if (normalizedCacheKey && (out.loading || !out.isFinished)) {
@@ -119,23 +134,30 @@ export function useList<T extends { name: string }>(
   type PartialDoc = Partial<T extends { name: string } ? T : { name: string }>
 
   const updateRow = (doc: PartialDoc) => {
-    if (data.value?.result) {
-      let changed = false
-      for (let row of data.value.result) {
-        if (doc.name && doc.name === row.name) {
-          for (let key in doc) {
-            if (key in row) {
-              row[key] = doc[key]
-              changed = true
-            }
+    if (allData.value == null) return
+    let changed = false
+    for (let row of allData.value) {
+      if (doc.name && doc.name === row.name) {
+        for (let key in doc) {
+          if (key in row) {
+            row[key] = doc[key]
+            changed = true
           }
-          break
         }
+        break
       }
-      if (changed) {
-        data.value.result = [...data.value.result]
-        triggerRef(data)
-      }
+    }
+    if (changed) {
+      allData.value = [...allData.value]
+    }
+  }
+
+  const removeRow = (name: string) => {
+    if (allData.value == null) return
+    const index = allData.value.findIndex((row) => row.name === name)
+    if (index > -1) {
+      allData.value.splice(index, 1)
+      allData.value = [...allData.value]
     }
   }
 
@@ -149,6 +171,26 @@ export function useList<T extends { name: string }>(
     },
   })
 
+  const setValueUrl = ref(`/api/v2/document/${doctype}/<name>`)
+
+  const setValue = useCall<T, Partial<T>>({
+    url: setValueUrl,
+    method: 'PUT',
+    baseUrl,
+    immediate: false,
+    refetch: false,
+    beforeSubmit(params) {
+      if (params?.name) {
+        setValueUrl.value = `/api/v2/document/${doctype}/${params.name}`
+      }
+    },
+    onSuccess(data) {
+      docStore.setDoc({ doctype, ...data })
+      listStore.updateRow(doctype, data)
+      if (refetch) execute()
+    },
+  })
+
   let deleteUrl = ref(`/api/v2/document/${doctype}/<name>`)
   type DeleteResponse = 'ok'
   type DeleteParams = { name: string }
@@ -167,6 +209,42 @@ export function useList<T extends { name: string }>(
     },
   })
 
+  function useEdit(name: MaybeRefOrGetter<string>) {
+    if (!allData.value) {
+      throw new Error('Data not found')
+    }
+    let row = allData.value.find((row) => row.name === toValue(name))
+    if (!row) {
+      throw new Error(`Couldn't find row with name ${toValue(name)}`)
+    }
+
+    let originalRow = JSON.parse(JSON.stringify(row))
+    let doc = reactive(row)
+
+    const setValue = useCall<T, Partial<T>>({
+      url: `/api/v2/document/${doctype}/${toValue(name)}`,
+      method: 'PUT',
+      baseUrl,
+      immediate: false,
+      refetch: false,
+      onSuccess(data) {
+        docStore.setDoc({ doctype, ...data })
+        listStore.updateRow(doctype, data)
+      },
+    })
+
+    return {
+      doc,
+      reset: () => {
+        for (let key in originalRow) {
+          doc[key] = originalRow[key]
+        }
+      },
+      setValue,
+      update: () => setValue.submit(doc),
+    }
+  }
+
   let out = reactive({
     data: result,
     hasNextPage,
@@ -179,7 +257,7 @@ export function useList<T extends { name: string }>(
     isFinished,
     canAbort,
     aborted,
-    url,
+    url: _url,
     abort,
     next,
     previous,
@@ -187,8 +265,11 @@ export function useList<T extends { name: string }>(
     fetch: execute,
     reload: execute,
     updateRow,
+    removeRow,
     insert,
+    setValue,
     delete: delete_,
+    edit: useEdit,
   })
 
   listStore.addList(doctype, out)
@@ -196,19 +277,35 @@ export function useList<T extends { name: string }>(
   return out
 }
 
-function handleAfterFetch<T>({
+function handleAfterFetch<T extends { name: string }>({
   transform,
   onSuccess,
   cacheKey,
-}: UseListOptions<T>) {
+  allData,
+  _start,
+}: UseListOptions<T> & {
+  allData: Ref<T[] | null>
+  _start: Ref<number>
+}) {
   return function (ctx: AfterFetchContext) {
+    let resultData = (ctx.data.result as T[]).map((item) => ({
+      ...item,
+      name: String(item.name),
+    }))
     if (transform) {
-      const returnValue = transform(ctx.data.result)
+      const returnValue = transform(resultData)
       if (Array.isArray(returnValue)) {
-        ctx.data.result = returnValue
+        resultData = returnValue
       }
     }
 
+    if (_start.value === 0) {
+      allData.value = resultData
+    } else {
+      allData.value = [...(allData.value || []), ...resultData]
+    }
+    ctx.data.result = allData.value
+
     let normalizedCacheKey = normalizeCacheKey(cacheKey, 'useList')
     if (normalizedCacheKey) {
       idbStore.set(normalizedCacheKey, ctx.data)
@@ -216,7 +313,7 @@ function handleAfterFetch<T>({
 
     if (onSuccess) {
       try {
-        onSuccess(ctx.data.result)
+        onSuccess(allData.value)
       } catch (e) {
         console.error('Error in onSuccess hook:', e)
       }

package/src/data-fetching/utils.ts

@@ -1,5 +1,5 @@
 import { MaybeRef, unref } from 'vue'
-import { ListFilters } from './useList/types'
+import { Filters } from './useList/types'
 
 export function makeGetParams(params: Record<string, any>) {
   let url = new URLSearchParams()
@@ -16,8 +16,8 @@ export function isEmptyObject(obj: any) {
   return Object.keys(obj).length === 0 && obj.constructor === Object
 }
 
-export function parseFilters(filters: ListFilters): ListFilters | null {
-  let parsedFilters: ListFilters = {}
+export function parseFilters(filters: Filters): Filters | null {
+  let parsedFilters: Filters = {}
   for (let key in filters) {
     let value = filters[key]
     if (Array.isArray(value)) {

package/src/index.js

@@ -32,7 +32,9 @@ export { default as Select } from './components/Select.vue'
 export { default as Spinner } from './components/Spinner.vue'
 export { default as Switch } from './components/Switch.vue'
 export { default as TabButtons } from './components/TabButtons.vue'
-export { default as Tabs } from './components/Tabs.vue'
+export { default as Tabs } from './components/Tabs/Tabs.vue'
+export { default as TabList } from './components/Tabs/TabList.vue'
+export { default as TabPanel } from './components/Tabs/TabPanel.vue'
 export { default as TextInput } from './components/TextInput.vue'
 export { default as Textarea } from './components/Textarea.vue'
 export {

package/src/components/Tabs.story.md

@@ -1,15 +0,0 @@
-## Props
-
-### Tabs
-
-It is an array of objects which contains the following attributes:
-
-1. `label` is the name of the tab, it is required.
-2. `icon` is the icon to be shown in the tab, it accept component and it is
-   optional.
-3. You can add more attributes which can be used for custom rendering in the tab
-   header or content.
-
-## v-model
-
-It is used to set the active tab or change the active tab. It is required.

package/src/components/Tabs.vue

@@ -1,110 +0,0 @@
-<template>
-  <TabGroup
-    as="div"
-    class="flex flex-1 flex-col overflow-y-hidden"
-    :style="`height: calc(100vh - ${tabListRef?.$el.offsetTop}px)`"
-    :defaultIndex="changedIndex"
-    :selectedIndex="changedIndex"
-    @change="(idx) => (changedIndex = idx)"
-  >
-    <TabList
-      ref="tabListRef"
-      class="relative flex items-center gap-7.5 overflow-x-auto border-b px-5"
-      :class="tablistClass"
-    >
-      <Tab
-        ref="tabRef"
-        as="template"
-        v-for="(tab, i) in tabs"
-        :key="i"
-        v-slot="{ selected }"
-        class="focus:outline-none focus:transition-none"
-      >
-        <slot name="tab" v-bind="{ tab, selected }">
-          <button
-            class="flex items-center gap-1.5 border-b border-transparent py-3 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
-            :class="{ 'text-ink-gray-9': selected }"
-          >
-            <component v-if="tab.icon" :is="tab.icon" class="size-4" />
-            {{ tab.label }}
-          </button>
-        </slot>
-      </Tab>
-      <div
-        ref="indicator"
-        class="tab-indicator absolute bottom-0 h-px bg-surface-gray-7"
-        :class="transitionClass"
-      />
-    </TabList>
-    <TabPanels class="flex flex-1 overflow-hidden" :class="tabPanelClass">
-      <TabPanel
-        class="flex flex-1 flex-col overflow-y-auto focus:outline-none"
-        v-for="(tab, i) in tabs"
-        :key="i"
-      >
-        <slot v-bind="{ tab }" />
-      </TabPanel>
-    </TabPanels>
-  </TabGroup>
-</template>
-
-<script setup>
-import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
-import { ref, watch, computed, onMounted, nextTick } from 'vue'
-
-const props = defineProps({
-  tabs: {
-    type: Array,
-    required: true,
-  },
-  modelValue: {
-    type: Number,
-    default: 0,
-  },
-  tablistClass: {
-    type: String,
-    default: '',
-  },
-  tabPanelClass: {
-    type: String,
-    default: '',
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const changedIndex = computed({
-  get: () => props.modelValue,
-  set: (index) => emit('update:modelValue', index),
-})
-
-const tabListRef = ref(null)
-const tabRef = ref([])
-const indicator = ref(null)
-const tabsLength = computed(() => props.tabs?.length)
-
-const transitionClass = ref('')
-
-function moveIndicator(index) {
-  if (index >= tabsLength.value) {
-    index = tabsLength.value - 1
-  }
-  const selectedTab = tabRef.value[index].el
-  indicator.value.style.width = `${selectedTab.offsetWidth}px`
-  indicator.value.style.left = `${selectedTab.offsetLeft}px`
-}
-
-watch(changedIndex, (index) => {
-  if (index >= tabsLength.value) {
-    changedIndex.value = tabsLength.value - 1
-  }
-  transitionClass.value = 'transition-all duration-300 ease-in-out'
-  nextTick(() => moveIndicator(index))
-})
-
-onMounted(() => {
-  nextTick(() => moveIndicator(changedIndex.value))
-  // Fix for indicator not moving on initial load
-  setTimeout(() => moveIndicator(changedIndex.value), 100)
-})
-</script>