frappe-ui 0.1.38 → 0.1.40

package/package.json

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

package/src/components/ListView/ListGroupHeader.vue

@@ -1,22 +1,29 @@
 <template>
-  <div class="flex items-center px-2 py-1.5">
-    <button @click="toggleGroup" class="-ml-[1px] rounded-sm hover:bg-gray-50">
+  <div class="flex items-center">
+    <button
+      @click="toggleGroup"
+      class="ml-[3px] mr-[11px] rounded p-1 hover:bg-gray-100"
+    >
       <DownSolid
         class="h-4 w-4 text-gray-900 transition-transform duration-200"
         :class="[group.collapsed ? '-rotate-90' : '']"
       />
     </button>
-    <div class="ml-[15px] w-full">
-      <slot>
-        <span class="text-base font-medium leading-6">
-          {{ group.group }}
-        </span>
-      </slot>
+    <div class="w-full py-1.5 pr-2">
+      <component
+        v-if="list.slots['group-header']"
+        :is="list.slots['group-header']"
+        v-bind="{ group }"
+      />
+      <span v-else class="text-base font-medium leading-6">
+        {{ group.group }}
+      </span>
     </div>
   </div>
   <div class="mx-2 h-px border-t border-gray-200"></div>
 </template>
 <script setup>
+import { inject } from 'vue'
 import DownSolid from '../../icons/DownSolid.vue'
 
 const props = defineProps({
@@ -26,6 +33,8 @@ const props = defineProps({
   },
 })
 
+const list = inject('list')
+
 function toggleGroup() {
   if (props.group.collapsed == null) {
     props.group.collapsed = false

package/src/components/ListView/ListRow.vue

@@ -43,7 +43,18 @@
           ]"
         >
           <slot v-bind="{ idx: i, column, item: row[column.key] }">
+            <component
+              v-if="list.slots.cell"
+              :is="list.slots.cell"
+              v-bind="{
+                column,
+                row,
+                item: row[column.key],
+                align: column.align,
+              }"
+            />
             <ListRowItem
+              v-else
               :column="column"
               :row="row"
               :item="row[column.key]"

package/src/components/ListView/ListView.vue

@@ -22,7 +22,7 @@ import ListHeader from './ListHeader.vue'
 import ListRows from './ListRows.vue'
 import ListGroups from './ListGroups.vue'
 import ListSelectBanner from './ListSelectBanner.vue'
-import { reactive, computed, provide, watch } from 'vue'
+import { reactive, computed, provide, watch, useSlots } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
@@ -58,6 +58,8 @@ const props = defineProps({
   },
 })
 
+const slots = useSlots()
+
 let selections = reactive(new Set())
 
 const emit = defineEmits(['update:selections'])
@@ -122,6 +124,7 @@ provide(
     options: _options.value,
     selections: selections,
     allRowsSelected: allRowsSelected.value,
+    slots: slots,
     toggleRow,
     toggleAllRows,
   }))

package/src/components/ListView.story.vue

@@ -372,20 +372,35 @@ const custom_rows = [
           resizeColumn: state.resizeColumn,
         }"
         row-key="id"
-        v-slot="{ showGroupedRows, selectable }"
       >
-        <ListHeader />
-        <ListGroups v-if="showGroupedRows">
-          <template #group-header="{ group }">
-            <span class="text-base font-medium leading-6 text-gray-900">
-              {{ group.group }} ({{ group.rows.length }})
-            </span>
-          </template>
-        </ListGroups>
-        <ListRows v-else />
-        <ListSelectBanner v-if="selectable" />
+        <template #group-header="{ group }">
+          <span class="text-base font-medium leading-6 text-gray-900">
+            {{ group.group }} ({{ group.rows.length }})
+          </span>
+        </template>
       </ListView>
     </Variant>
+    <Variant title="Cell Slot">
+      <div>
+        <ListView
+          class="h-[250px]"
+          :columns="simple_columns"
+          :rows="simple_rows"
+          :options="{
+            selectable: state.selectable,
+            showTooltip: state.showTooltip,
+            resizeColumn: state.resizeColumn,
+            emptyState: state.emptyState,
+          }"
+          row-key="id"
+        >
+          <template #cell="{ item, row, column }">
+            <Badge v-if="column.key == 'status'">{{ item }}</Badge>
+            <span class="font-medium text-gray-700" v-else>{{ item }}</span>
+          </template>
+        </ListView>
+      </div>
+    </Variant>
     <Variant title="Empty List">
       <div>
         <ListView