frappe-ui 0.1.21 → 0.1.23

package/package.json

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

package/src/components/ListView/ListFooter.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="flex justify-between gap-2">
+    <slot>
+      <slot name="left">
+        <TabButtons
+          v-model="pageLengthCount"
+          :buttons="pageLengthOptions.map((o) => ({ label: o, value: o }))"
+        />
+      </slot>
+      <slot name="right">
+        <div class="flex items-center">
+          <Button
+            v-if="showLoadMore"
+            label="Load More"
+            @click="emit('loadMore')"
+          />
+          <div v-if="showLoadMore" class="mx-3 h-[80%] border-l" />
+          <div class="flex items-center gap-1 text-base text-gray-600">
+            <div>{{ options.rowCount || '0' }}</div>
+            <div>of</div>
+            <div>{{ options.totalCount || '0' }}</div>
+          </div>
+        </div>
+      </slot>
+    </slot>
+  </div>
+</template>
+<script setup>
+import TabButtons from '../TabButtons.vue'
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 20,
+  },
+  options: {
+    type: Object,
+    default: () => ({
+      rowCount: 0,
+      totalCount: 0,
+      pageLengthOptions: [20, 50, 100],
+    }),
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'loadMore'])
+
+const pageLengthCount = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+})
+
+const pageLengthOptions = ref(props.options.pageLengthOptions || [20, 50, 100])
+
+const showLoadMore = computed(() => {
+  return (
+    props.options.rowCount &&
+    props.options.totalCount &&
+    props.options.rowCount < props.options.totalCount
+  )
+})
+</script>

package/src/components/Tabs.vue

@@ -6,18 +6,21 @@
     :selectedIndex="changedIndex"
     @change="(idx) => (changedIndex = idx)"
   >
-    <TabList class="relative flex items-center gap-6 border-b pl-5">
+    <TabList
+      class="relative flex items-center gap-6 overflow-x-auto border-b pl-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 focus-visible:rounded focus-visible:ring-2 focus-visible:ring-gray-400"
+        class="focus:outline-none focus:transition-none"
       >
         <slot name="tab" v-bind="{ tab, selected }">
           <button
-            class="-mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
+            class="flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
             :class="{ 'text-gray-900': selected }"
           >
             <component v-if="tab.icon" :is="tab.icon" class="h-5" />
@@ -27,12 +30,12 @@
       </Tab>
       <div
         ref="indicator"
-        class="absolute -bottom-px h-px bg-gray-900"
+        class="absolute bottom-0 h-px bg-gray-900"
         :class="transitionClass"
         :style="{ left: `${indicatorLeft}px` }"
       />
     </TabList>
-    <TabPanels class="flex flex-1 overflow-hidden">
+    <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"
@@ -57,6 +60,14 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  tablistClass: {
+    type: String,
+    default: '',
+  },
+  tabPanelClass: {
+    type: String,
+    default: '',
+  },
   options: {
     type: Object,
     default: () => ({

package/src/index.js

@@ -45,6 +45,7 @@ export { default as ListRows } from './components/ListView/ListRows.vue'
 export { default as ListRow } from './components/ListView/ListRow.vue'
 export { default as ListRowItem } from './components/ListView/ListRowItem.vue'
 export { default as ListSelectBanner } from './components/ListView/ListSelectBanner.vue'
+export { default as ListFooter } from './components/ListView/ListFooter.vue'
 export { default as Toast } from './components/Toast.vue'
 export { toast, Toasts } from './components/toast.js'
 export { default as Tooltip } from './components/Tooltip.vue'