frappe-ui 0.1.102 → 0.1.104

package/package.json

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

package/src/components/Tabs/TabList.vue

@@ -2,7 +2,7 @@
   <TabList
     class="relative flex"
     :class="
-      vertical
+      t.vertical
         ? 'flex-col border-r overflow-y-auto'
         : 'gap-7.5 border-b overflow-x-auto items-center px-5'
     "
@@ -10,7 +10,7 @@
     <Tab
       ref="tabRef"
       as="template"
-      v-for="(tab, i) in tabs"
+      v-for="(tab, i) in t.tabs"
       :key="i"
       v-slot="{ selected }"
       class="focus:outline-none focus:transition-none"
@@ -20,7 +20,7 @@
           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
+            t.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',
           ]"
@@ -33,7 +33,7 @@
     <div
       ref="indicator"
       class="tab-indicator absolute bg-surface-gray-7"
-      :class="[vertical ? 'right-0 w-px' : 'bottom-0 h-px', transitionClass]"
+      :class="[t.vertical ? 'right-0 w-px' : 'bottom-0 h-px', transitionClass]"
     />
   </TabList>
 </template>
@@ -41,13 +41,11 @@
 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 t = inject('tab')
 
 const tabRef = ref([])
 const indicator = ref(null)
-const tabsLength = computed(() => tabs.value?.length)
+const tabsLength = computed(() => t.value.tabs.value?.length)
 
 const transitionClass = ref('')
 
@@ -56,7 +54,7 @@ function moveIndicator(index) {
     index = tabsLength.value - 1
   }
   const selectedTab = tabRef.value[index].el
-  if (vertical) {
+  if (t.value.vertical.value) {
     indicator.value.style.height = `${selectedTab.offsetHeight}px`
     indicator.value.style.top = `${selectedTab.offsetTop}px`
   } else {
@@ -65,17 +63,20 @@ function moveIndicator(index) {
   }
 }
 
-watch(tabIndex, (index) => {
-  if (index >= tabsLength.value) {
-    tabIndex.value = tabsLength.value - 1
-  }
-  transitionClass.value = 'transition-all duration-300 ease-in-out'
-  nextTick(() => moveIndicator(index))
-})
+watch(
+  () => t.value.tabIndex.value,
+  (index) => {
+    if (index >= tabsLength.value) {
+      t.value.tabIndex.value = tabsLength.value - 1
+    }
+    transitionClass.value = 'transition-all duration-300 ease-in-out'
+    nextTick(() => moveIndicator(index))
+  },
+)
 
 onMounted(() => {
-  nextTick(() => moveIndicator(tabIndex.value))
+  nextTick(() => moveIndicator(t.value.tabIndex.value))
   // Fix for indicator not moving on initial load
-  setTimeout(() => moveIndicator(tabIndex.value), 100)
+  setTimeout(() => moveIndicator(t.value.tabIndex.value), 100)
 })
 </script>

package/src/components/Tabs/TabPanel.vue

@@ -2,7 +2,7 @@
   <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"
+      v-for="(tab, i) in t.tabs"
       :key="i"
     >
       <slot v-bind="{ tab }" />
@@ -13,5 +13,5 @@
 import { TabPanels, TabPanel } from '@headlessui/vue'
 import { inject } from 'vue'
 
-const tabs = inject('tabs')
+const t = inject('tab')
 </script>

package/src/components/Tabs/Tabs.vue

@@ -27,7 +27,7 @@
 import TabList from './TabList.vue'
 import TabPanel from './TabPanel.vue'
 import { TabGroup } from '@headlessui/vue'
-import { provide } from 'vue'
+import { computed, provide } from 'vue'
 
 const props = defineProps({
   as: {
@@ -46,7 +46,12 @@ const props = defineProps({
 
 const tabIndex = defineModel()
 
-provide('tabIndex', tabIndex)
-provide('tabs', props.tabs)
-provide('vertical', props.vertical)
+provide(
+  'tab',
+  computed(() => ({
+    tabIndex,
+    tabs: props.tabs,
+    vertical: props.vertical,
+  })),
+)
 </script>

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

@@ -48,6 +48,13 @@ function useDelete(doctype: string, options: UseDoctypeOptions = {}) {
     method: 'DELETE',
     immediate: false,
     baseUrl,
+    onSuccess() {
+      if (delete_.params.name) {
+        let { name } = delete_.params
+        docStore.removeDoc(doctype, name)
+        listStore.removeRow(doctype, name)
+      }
+    },
   })
 
   return reactive({

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

@@ -204,7 +204,14 @@ export function useList<T extends { name: string }>(
       }
     },
     onSuccess() {
-      if (refetch) execute()
+      if (refetch) {
+        execute()
+      }
+      if (delete_.params.name) {
+        let { name } = delete_.params
+        docStore.removeDoc(doctype, name)
+        listStore.removeRow(doctype, name)
+      }
     },
   })
 

package/src/tailwind/plugin.js

@@ -87,7 +87,7 @@ module.exports = plugin(
         '2xs': [
           '11px',
           {
-            lineHeight: '1.15',
+            lineHeight: '1.4',
             letterSpacing: '0.01em',
             fontWeight: '420',
           },
@@ -95,7 +95,7 @@ module.exports = plugin(
         xs: [
           '12px',
           {
-            lineHeight: '1.15',
+            lineHeight: '1.4',
             letterSpacing: '0.02em',
             fontWeight: '420',
           },
@@ -103,7 +103,7 @@ module.exports = plugin(
         sm: [
           '13px',
           {
-            lineHeight: '1.15',
+            lineHeight: '1.4',
             letterSpacing: '0.02em',
             fontWeight: '420',
           },
@@ -111,7 +111,7 @@ module.exports = plugin(
         base: [
           '14px',
           {
-            lineHeight: '1.15',
+            lineHeight: '1.4',
             letterSpacing: '0.02em',
             fontWeight: '420',
           },
@@ -119,7 +119,7 @@ module.exports = plugin(
         lg: [
           '16px',
           {
-            lineHeight: '1.15',
+            lineHeight: '1.4',
             letterSpacing: '0.02em',
             fontWeight: '400',
           },
@@ -127,7 +127,7 @@ module.exports = plugin(
         xl: [
           '18px',
           {
-            lineHeight: '1.15',
+            lineHeight: '1.3',
             letterSpacing: '0.01em',
             fontWeight: '400',
           },
@@ -135,7 +135,7 @@ module.exports = plugin(
         '2xl': [
           '20px',
           {
-            lineHeight: '1.15',
+            lineHeight: '1.3',
             letterSpacing: '0.01em',
             fontWeight: '400',
           },
@@ -143,7 +143,7 @@ module.exports = plugin(
         '3xl': [
           '24px',
           {
-            lineHeight: '1.15',
+            lineHeight: '1.25',
             fontWeight: 400,
             letterSpacing: '0.005em',
           },