frappe-ui 0.1.39 → 0.1.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.39",
+  "version": "0.1.41",
   "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/ListView.vue

@@ -98,7 +98,9 @@ const selectable = computed(() => {
 })
 
 let showGroupedRows = computed(() => {
-  return props.rows.every((row) => row.group)
+  return props.rows.every(
+    (row) => row.group && row.rows && Array.isArray(row.rows)
+  )
 })
 
 function toggleRow(row) {

package/src/components/ListView.story.vue

@@ -372,18 +372,12 @@ 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">