frappe-ui 0.1.36 → 0.1.37

package/package.json

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

package/src/components/ListView/ListEmptyState.vue

@@ -0,0 +1,24 @@
+<template>
+  <div
+    class="flex h-full w-full flex-col items-center justify-center text-base"
+  >
+    <slot>
+      <div class="text-xl font-medium">{{ list.options.emptyState.title }}</div>
+      <div class="mt-1 text-base text-gray-600">
+        {{ list.options.emptyState.description }}
+      </div>
+      <Button
+        v-if="list.options.emptyState.button"
+        v-bind="list.options.emptyState.button"
+        class="mt-4"
+      ></Button>
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { inject } from 'vue'
+import Button from '../Button.vue'
+
+const list = inject('list')
+</script>

package/src/components/ListView/ListGroupHeader.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex items-center px-2 py-1.5">
+    <button @click="toggleGroup" class="-ml-[1px] rounded-sm hover:bg-gray-50">
+      <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>
+  </div>
+  <div class="mx-2 h-px border-t border-gray-200"></div>
+</template>
+<script setup>
+import DownSolid from '../../icons/DownSolid.vue'
+
+const props = defineProps({
+  group: {
+    type: Object,
+    required: true,
+  },
+})
+
+function toggleGroup() {
+  if (props.group.collapsed == null) {
+    props.group.collapsed = false
+  }
+  props.group.collapsed = !props.group.collapsed
+}
+</script>

package/src/components/ListView/ListGroupRows.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="mb-5 mt-2" v-if="!group.collapsed">
+    <ListRow v-for="row in group.rows" :key="row[list.rowKey]" :row="row" />
+  </div>
+</template>
+<script setup>
+import ListRow from './ListRow.vue'
+import { inject } from 'vue'
+
+const props = defineProps({
+  group: {
+    type: Object,
+    required: true,
+  },
+})
+const list = inject('list')
+</script>

package/src/components/ListView/ListGroups.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="h-full overflow-y-auto">
+    <div v-for="group in list.rows" :key="group.group">
+      <ListGroupHeader :group="group">
+        <slot
+          name="group-header"
+          v-if="$slots['group-header']"
+          v-bind="{ group }"
+        />
+      </ListGroupHeader>
+      <ListGroupRows :group="group" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ListGroupHeader from './ListGroupHeader.vue'
+import ListGroupRows from './ListGroupRows.vue'
+import { inject } from 'vue'
+
+const list = inject('list')
+</script>

package/src/components/ListView/ListRow.vue

@@ -14,13 +14,14 @@
       class="[all:unset] hover:[all:unset]"
     >
       <div
-        class="grid items-center space-x-4 rounded px-2 py-2.5"
+        class="grid items-center space-x-4 rounded px-2"
         :class="
           list.selections.has(row[list.rowKey])
             ? 'bg-gray-100 hover:bg-gray-200'
             : 'hover:bg-gray-50'
         "
         :style="{
+          height: rowHeight,
           gridTemplateColumns: getGridTemplateColumns(
             list.columns,
             list.options.selectable
@@ -42,7 +43,12 @@
           ]"
         >
           <slot v-bind="{ idx: i, column, item: row[column.key] }">
-            <ListRowItem :item="row[column.key]" :align="column.align" />
+            <ListRowItem
+              :column="column"
+              :row="row"
+              :item="row[column.key]"
+              :align="column.align"
+            />
           </slot>
         </div>
       </div>
@@ -73,4 +79,11 @@ const isLastRow = computed(() => {
     props.row[list.value.rowKey]
   )
 })
+
+const rowHeight = computed(() => {
+  if (typeof list.value.options.rowHeight === 'number') {
+    return `${list.value.options.rowHeight}px`
+  }
+  return list.value.options.rowHeight
+})
 </script>

package/src/components/ListView/ListRowItem.vue

@@ -5,21 +5,38 @@
     class="flex items-center space-x-2"
     :class="alignmentMap[align]"
   >
-    <slot name="prefix" />
+    <slot name="prefix">
+      <component
+        v-if="column.prefix"
+        :is="
+          typeof column.prefix === 'function'
+            ? column.prefix({ row })
+            : column.prefix
+        "
+      />
+    </slot>
     <slot v-bind="{ label }">
       <div class="truncate text-base">
-        {{ label }}
+        {{ column?.getLabel ? column.getLabel({ row }) : label }}
       </div>
     </slot>
     <slot name="suffix" />
   </component>
 </template>
 <script setup>
-import { alignmentMap } from './utils'
-import Tooltip from '../Tooltip.vue'
 import { computed, inject } from 'vue'
+import Tooltip from '../Tooltip.vue'
+import { alignmentMap } from './utils'
 
 const props = defineProps({
+  column: {
+    type: Object,
+    default: {},
+  },
+  row: {
+    type: Object,
+    default: {},
+  },
   item: {
     type: [String, Number, Object],
     default: '',

package/src/components/ListView/ListView.vue

@@ -4,17 +4,23 @@
       class="flex w-max min-w-full flex-col overflow-y-hidden"
       :class="$attrs.class"
     >
-      <slot>
+      <slot v-bind="{ showGroupedRows, selectable }">
         <ListHeader />
-        <ListRows />
-        <ListSelectBanner v-if="_options.selectable" />
+        <template v-if="props.rows.length">
+          <ListGroups v-if="showGroupedRows" />
+          <ListRows v-else />
+        </template>
+        <ListEmptyState v-else />
+        <ListSelectBanner v-if="selectable" />
       </slot>
     </div>
   </div>
 </template>
 <script setup>
+import ListEmptyState from './ListEmptyState.vue'
 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'
 
@@ -37,13 +43,18 @@ const props = defineProps({
   },
   options: {
     type: Object,
-    default: {
+    default: () => ({
       getRowRoute: null,
       onRowClick: null,
       showTooltip: true,
       selectable: true,
       resizeColumn: false,
-    },
+      rowHeight: 40,
+      emptyState: {
+        title: 'No Data',
+        description: 'No data available',
+      },
+    }),
   },
 })
 
@@ -70,6 +81,8 @@ let _options = computed(() => {
     showTooltip: defaultTrue(props.options.showTooltip),
     selectable: defaultTrue(props.options.selectable),
     resizeColumn: defaultFalse(props.options.resizeColumn),
+    rowHeight: props.options.rowHeight || 40,
+    emptyState: props.options.emptyState,
   }
 })
 
@@ -78,6 +91,14 @@ const allRowsSelected = computed(() => {
   return selections.size === props.rows.length
 })
 
+const selectable = computed(() => {
+  return _options.value.selectable
+})
+
+let showGroupedRows = computed(() => {
+  return props.rows.every((row) => row.group)
+})
+
 function toggleRow(row) {
   if (!selections.delete(row)) {
     selections.add(row)

package/src/components/ListView.story.md

@@ -62,6 +62,31 @@ required to be passed in the `row` object.
    }
    ```
 
+### Grouped Rows
+
+To render grouped rows, you must provide `rows` in the following format:
+
+```
+[
+    {
+        group: 'Group Title 1',
+        collapsed: false,
+        rows: [
+            {id: 1, key1: value1, key2: value2, ...},
+            {id: 2, key1: value1, key2: value2, ...},
+        ]
+    },
+    {
+        group: 'Group Title 2',
+        collapsed: false,
+        rows: [
+            {id: 3, key1: value1, key2: value2, ...},
+            {id: 4, key1: value1, key2: value2, ...},
+        ]
+    },
+]
+```
+
 ### Options
 
 1. If you want to route using router-link just add a `getRowRoute` function

package/src/components/ListView.story.vue

@@ -1,21 +1,31 @@
 <script setup>
-import ListView from './ListView/ListView.vue'
+import { reactive, h, ref } from 'vue'
+import Avatar from './Avatar.vue'
+import Badge from './Badge.vue'
+import Button from './Button.vue'
+import FeatherIcon from './FeatherIcon.vue'
 import ListHeader from './ListView/ListHeader.vue'
 import ListHeaderItem from './ListView/ListHeaderItem.vue'
-import ListRows from './ListView/ListRows.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 FeatherIcon from './FeatherIcon.vue'
-import Badge from './Badge.vue'
-import Button from './Button.vue'
-import Avatar from './Avatar.vue'
-import { reactive } from 'vue'
+import ListView from './ListView/ListView.vue'
 
 const state = reactive({
   selectable: true,
   showTooltip: true,
   resizeColumn: true,
+  emptyState: {
+    title: 'No records found',
+    description: 'Create a new record to get started',
+    button: {
+      label: 'New Record',
+      variant: 'solid',
+      onClick: () => console.log('New Record'),
+    },
+  },
 })
 
 const simple_columns = reactive([
@@ -23,6 +33,14 @@ const simple_columns = reactive([
     label: 'Name',
     key: 'name',
     width: 3,
+    getLabel: ({ row }) => row.name,
+    prefix: ({ row }) => {
+      return h(Avatar, {
+        shape: 'circle',
+        image: row.user_image,
+        size: 'sm',
+      })
+    },
   },
   {
     label: 'Email',
@@ -46,6 +64,7 @@ const simple_rows = [
     email: 'john@doe.com',
     status: 'Active',
     role: 'Developer',
+    user_image: 'https://avatars.githubusercontent.com/u/499550',
   },
   {
     id: 2,
@@ -53,9 +72,148 @@ const simple_rows = [
     email: 'jane@doe.com',
     status: 'Inactive',
     role: 'HR',
+    user_image: 'https://avatars.githubusercontent.com/u/499120',
   },
 ]
 
+const group_columns = reactive([
+  {
+    label: 'Name',
+    key: 'name',
+    width: 3,
+  },
+  {
+    label: 'Email',
+    key: 'email',
+    width: '200px',
+  },
+  {
+    label: 'Role',
+    key: 'role',
+  },
+  {
+    label: 'Status',
+    key: 'status',
+  },
+])
+
+const grouped_rows = ref([
+  {
+    group: 'Developer',
+    collapsed: false,
+    rows: [
+      {
+        id: 2,
+        name: 'Gary Fox',
+        email: 'gary@fox.com',
+        status: 'Inactive',
+        role: 'Developer',
+      },
+      {
+        id: 6,
+        name: 'Emily Davis',
+        email: 'emily@davis.com',
+        status: 'Active',
+        role: 'Developer',
+      },
+      {
+        id: 9,
+        name: 'David Lee',
+        email: 'david@lee.com',
+        status: 'Inactive',
+        role: 'Developer',
+      },
+    ],
+  },
+  {
+    group: 'Manager',
+    collapsed: false,
+    rows: [
+      {
+        id: 3,
+        name: 'John Doe',
+        email: 'john@doe.com',
+        status: 'Active',
+        role: 'Manager',
+      },
+      {
+        id: 8,
+        name: 'Sarah Wilson',
+        email: 'sarah@wilson.com',
+        status: 'Active',
+        role: 'Manager',
+      },
+    ],
+  },
+  {
+    group: 'Designer',
+    collapsed: false,
+    rows: [
+      {
+        id: 4,
+        name: 'Alice Smith',
+        email: 'alice@smith.com',
+        status: 'Active',
+        role: 'Designer',
+      },
+      {
+        id: 10,
+        name: 'Olivia Taylor',
+        email: 'olivia@taylor.com',
+        status: 'Active',
+        role: 'Designer',
+      },
+    ],
+  },
+  {
+    group: 'HR',
+    collapsed: false,
+    rows: [
+      {
+        id: 1,
+        name: 'Jane Mary',
+        email: 'jane@doe.com',
+        status: 'Inactive',
+        role: 'HR',
+      },
+      {
+        id: 7,
+        name: 'Michael Brown',
+        email: 'michael@brown.com',
+        status: 'Inactive',
+        role: 'HR',
+      },
+      {
+        id: 12,
+        name: 'Sophia Martinez',
+        email: 'sophia@martinez.com',
+        status: 'Active',
+        role: 'HR',
+      },
+    ],
+  },
+  {
+    group: 'Tester',
+    collapsed: false,
+    rows: [
+      {
+        id: 5,
+        name: 'Bob Johnson',
+        email: 'bob@johnson.com',
+        status: 'Inactive',
+        role: 'Tester',
+      },
+      {
+        id: 11,
+        name: 'James Anderson',
+        email: 'james@anderson.com',
+        status: 'Inactive',
+        role: 'Tester',
+      },
+    ],
+  },
+])
+
 const custom_columns = reactive([
   {
     label: 'Name',
@@ -121,7 +279,7 @@ const custom_rows = [
   <Story :layout="{ type: 'grid', width: '95%' }">
     <Variant title="Simple List">
       <ListView
-        class="h-[250px]"
+        class="h-[150px]"
         :columns="simple_columns"
         :rows="simple_rows"
         :options="{
@@ -135,7 +293,7 @@ const custom_rows = [
     </Variant>
     <Variant title="Custom List">
       <ListView
-        class="h-[250px]"
+        class="h-[150px]"
         :columns="custom_columns"
         :rows="custom_rows"
         :options="{
@@ -202,11 +360,64 @@ const custom_rows = [
         </ListSelectBanner>
       </ListView>
     </Variant>
+    <Variant title="Grouped Rows">
+      <ListView
+        class="h-[250px]"
+        :columns="group_columns"
+        :rows="grouped_rows"
+        :options="{
+          getRowRoute: (row) => ({ name: 'User', params: { userId: row.id } }),
+          selectable: state.selectable,
+          showTooltip: state.showTooltip,
+          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" />
+      </ListView>
+    </Variant>
+    <Variant title="Empty List">
+      <div>
+        <ListView
+          class="h-[250px]"
+          :columns="simple_columns"
+          :rows="[]"
+          :options="{
+            selectable: state.selectable,
+            showTooltip: state.showTooltip,
+            resizeColumn: state.resizeColumn,
+            emptyState: state.emptyState,
+          }"
+          row-key="id"
+        />
+      </div>
+    </Variant>
 
     <template #controls>
       <HstCheckbox v-model="state.selectable" title="Selectable" />
       <HstCheckbox v-model="state.showTooltip" title="Show tooltip" />
       <HstCheckbox v-model="state.resizeColumn" title="Resize Column" />
+      <!-- empty state config -->
+      <HstText
+        v-model="state.emptyState.title"
+        title="Empty Title"
+        placeholder="No records found"
+      />
+      <HstText
+        v-model="state.emptyState.description"
+        title="Empty Description"
+        placeholder="Create a new record to get started"
+      />
     </template>
   </Story>
 </template>

package/src/components/Popover.vue

@@ -17,8 +17,8 @@
     <teleport to="#frappeui-popper-root">
       <div
         ref="popover"
-        :class="popoverClass"
-        class="popover-container relative z-[100]"
+        class="relative z-[100]"
+        :class="[popoverContainerClass, popoverClass]"
         :style="{ minWidth: targetWidth ? targetWidth + 'px' : null }"
         @mouseover="pointerOverTargetOrPopup = true"
         @mouseleave="onMouseleave"
@@ -87,6 +87,7 @@ export default {
   expose: ['open', 'close'],
   data() {
     return {
+      popoverContainerClass: 'body-container',
       showPopup: false,
       targetWidth: null,
       pointerOverTargetOrPopup: false,
@@ -111,14 +112,35 @@ export default {
   },
   mounted() {
     this.listener = (e) => {
-      let $els = [this.$refs.reference, this.$refs.popover]
-      let insideClick = $els.some(
-        ($el) => $el && (e.target === $el || $el.contains(e.target))
-      )
+      const clickedElement = e.target
+      const reference = this.$refs.reference
+      const popoverBody = this.$refs.popover
+      const insideClick =
+        clickedElement === reference ||
+        clickedElement === popoverBody ||
+        reference?.contains(clickedElement) ||
+        popoverBody?.contains(clickedElement)
       if (insideClick) {
         return
       }
-      this.close()
+
+      const root = document.getElementById('frappeui-popper-root')
+      const insidePopoverRoot = root.contains(clickedElement)
+      if (!insidePopoverRoot) {
+        return this.close()
+      }
+
+      const bodyClass = `.${this.popoverContainerClass}`
+      const clickedElementBody = clickedElement?.closest(bodyClass)
+      const currentPopoverBody = reference?.closest(bodyClass)
+      const isSiblingClicked =
+        clickedElementBody &&
+        currentPopoverBody &&
+        clickedElementBody === currentPopoverBody
+
+      if (isSiblingClicked) {
+        this.close()
+      }
     }
     if (this.hideOnBlur) {
       document.addEventListener('click', this.listener)

package/src/icons/DownSolid.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
+    <path
+      fill="currentColor"
+      d="M4.293 5.28h7.413a.5.5 0 0 1 .41.787l-3.707 5.295a.5.5 0 0 1-.82 0L3.884 6.067a.5.5 0 0 1 .41-.787Z"
+    />
+  </svg>
+</template>

package/src/index.js

@@ -41,6 +41,7 @@ export {
 export { default as ListView } from './components/ListView/ListView.vue'
 export { default as ListHeader } from './components/ListView/ListHeader.vue'
 export { default as ListHeaderItem } from './components/ListView/ListHeaderItem.vue'
+export { default as ListEmptyState } from './components/ListView/ListEmptyState.vue'
 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'