pimelon-ui 0.1.31 → 0.1.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.31",
+  "version": "0.1.45",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -8,9 +8,6 @@
     "prettier": "npx prettier -w ./src",
     "prepare": "husky install",
     "bump-and-release": "git pull --rebase origin main && yarn version --patch && git push && git push --tags",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:serve": "vitepress serve docs",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
@@ -62,12 +59,12 @@
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "^0.16.1",
+    "@histoire/plugin-vue": "^0.17.14",
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
     "cross-fetch": "^3.1.5",
-    "histoire": "^0.16.2",
-    "husky": "^9.0.11",
+    "histoire": "^0.17.14",
+    "husky": "^9.1.6",
     "lint-staged": ">=10",
     "postcss": "^8.4.21",
     "prettier": "2.7.1",
@@ -75,7 +72,6 @@
     "tailwindcss": "^3.2.7",
     "typescript": "^5.0.2",
     "vite": "^4.1.0",
-    "vitepress": "^1.0.0-alpha.29",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },

package/src/components/Autocomplete.vue

@@ -19,7 +19,7 @@
                 <span class="truncate text-base leading-5" v-if="selectedValue">
                   {{ displayValue(selectedValue) }}
                 </span>
-                <span class="text-base leading-5 text-gray-600" v-else>
+                <span class="text-base leading-5 text-gray-500" v-else>
                   {{ placeholder || '' }}
                 </span>
               </div>

package/src/components/FormControl.story.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 import FormControl from './FormControl.vue'
 import FeatherIcon from './FeatherIcon.vue'
 import Avatar from './Avatar.vue'
@@ -10,8 +10,11 @@ const state = reactive({
   placeholder: 'Placeholder',
   disabled: false,
   label: 'Label',
-  modelValue: '',
 })
+const inputValue = ref('')
+const selectValue = ref(null)
+const autocompleteValue = ref(null)
+const checkboxValue = ref(false)
 
 const inputTypes = [
   'text',
@@ -34,11 +37,7 @@ const variants = ['subtle', 'outline']
       :title="inputType"
     >
       <div class="p-2">
-        <FormControl
-          :type="inputType"
-          v-bind="state"
-          v-model="state.modelValue"
-        />
+        <FormControl :type="inputType" v-bind="state" v-model="inputValue" />
       </div>
     </Variant>
     <Variant title="select">
@@ -51,10 +50,11 @@ const variants = ['subtle', 'outline']
             { label: 'Three', value: '3' },
           ]"
           v-bind="state"
+          v-model="selectValue"
         />
       </div>
     </Variant>
-    <Variant title="select">
+    <Variant title="autocomplete">
       <div class="p-2">
         <FormControl
           type="autocomplete"
@@ -64,12 +64,13 @@ const variants = ['subtle', 'outline']
             { label: 'Three', value: '3' },
           ]"
           v-bind="state"
+          v-model="autocompleteValue"
         />
       </div>
     </Variant>
     <Variant title="checkbox">
       <div class="p-2">
-        <FormControl type="checkbox" v-bind="state" />
+        <FormControl type="checkbox" v-bind="state" v-model="checkboxValue" />
       </div>
     </Variant>
 

package/src/components/ListFilter/ListFilter.vue

@@ -114,7 +114,7 @@
 </template>
 
 <script setup>
-import { Autocomplete, FeatherIcon, FormControl } from 'pimelon-ui'
+import { Autocomplete, FeatherIcon, FormControl } from '../../index'
 import { computed, h } from 'vue'
 import FilterIcon from './FilterIcon.vue'
 import NestedPopover from './NestedPopover.vue'

package/src/components/ListFilter/SearchComplete.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import { Autocomplete, createListResource } from 'pimelon-ui'
+import { Autocomplete, createListResource } from '../../index'
 import { computed, ref, watch } from 'vue'
 
 const props = defineProps({

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,44 @@
+<template>
+  <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="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({
+  group: {
+    type: Object,
+    required: true,
+  },
+})
+
+const list = inject('list')
+
+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/ListHeaderItem.vue

@@ -1,8 +1,8 @@
 <template>
   <div
     ref="columnRef"
-    class="group flex items-center justify-between"
-    :class="alignmentMap[item.align]"
+    class="group flex items-center"
+    :class="item.align ? alignmentMap[item.align] : 'justify-between'"
   >
     <div
       class="flex items-center space-x-2 truncate text-sm text-gray-600"

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,23 @@
           ]"
         >
           <slot v-bind="{ idx: i, column, item: row[column.key] }">
-            <ListRowItem :item="row[column.key]" :align="column.align" />
+            <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]"
+              :align="column.align"
+            />
           </slot>
         </div>
       </div>
@@ -73,4 +90,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,19 +4,25 @@
       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'
+import { reactive, computed, provide, watch, useSlots } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
@@ -37,16 +43,23 @@ const props = defineProps({
   },
   options: {
     type: Object,
-    default: {
+    default: () => ({
       getRowRoute: null,
       onRowClick: null,
       showTooltip: true,
       selectable: true,
-      resizeColumn: true,
-    },
+      resizeColumn: false,
+      rowHeight: 40,
+      emptyState: {
+        title: 'No Data',
+        description: 'No data available',
+      },
+    }),
   },
 })
 
+const slots = useSlots()
+
 let selections = reactive(new Set())
 
 const emit = defineEmits(['update:selections'])
@@ -60,12 +73,18 @@ let _options = computed(() => {
     return value === undefined ? true : value
   }
 
+  function defaultFalse(value) {
+    return value === undefined ? false : value
+  }
+
   return {
     getRowRoute: props.options.getRowRoute || null,
     onRowClick: props.options.onRowClick || null,
     showTooltip: defaultTrue(props.options.showTooltip),
     selectable: defaultTrue(props.options.selectable),
-    resizeColumn: defaultTrue(props.options.resizeColumn),
+    resizeColumn: defaultFalse(props.options.resizeColumn),
+    rowHeight: props.options.rowHeight || 40,
+    emptyState: props.options.emptyState,
   }
 })
 
@@ -74,6 +93,16 @@ 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 && row.rows && Array.isArray(row.rows)
+  )
+})
+
 function toggleRow(row) {
   if (!selections.delete(row)) {
     selections.add(row)
@@ -97,6 +126,7 @@ provide(
     options: _options.value,
     selections: selections,
     allRowsSelected: allRowsSelected.value,
+    slots: slots,
     toggleRow,
     toggleAllRows,
   }))

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
@@ -78,7 +103,7 @@ required to be passed in the `row` object.
 4. showTooltip (Boolean) - if true, tooltip will be shown on hover of row -
    default is true
 5. resizeColumn (Boolean) - if true, column can be resized by dragging the
-   resizer on the right side of the column header - default is true
+   resizer on the right side of the column header - default is false
 
 ---
 

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,79 @@ 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"
+      >
+        <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
+          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="#melonui-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('melonui-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/components/Progress.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-w-50 space-y-[10px]">
+  <div class="w-full space-y-[10px]">
     <div
       v-if="props.label || props.hint"
       class="flex items-baseline justify-between"

package/src/components/Select.vue

@@ -10,6 +10,14 @@
     >
       <slot name="prefix"> </slot>
     </div>
+    <div
+      v-if="placeholder"
+      v-show="!modelValue"
+      class="pointer-events-none absolute text-gray-500"
+      :class="[fontSizeClasses, paddingClasses]"
+    >
+      {{ placeholder }}
+    </div>
     <select
       :class="selectClasses"
       :disabled="disabled"
@@ -33,7 +41,10 @@
 
 <script setup lang="ts">
 import { computed, useSlots, useAttrs } from 'vue'
-import debounce from '../utils/debounce'
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 type SelectOption =
   | string
@@ -86,19 +97,30 @@ const textColor = computed(() => {
   return props.disabled ? 'text-gray-500' : 'text-gray-800'
 })
 
-const selectClasses = computed(() => {
-  let sizeClasses = {
-    sm: 'text-base rounded h-7',
-    md: 'text-base rounded h-8',
-    lg: 'text-lg rounded-md h-10',
-    xl: 'text-xl rounded-md h-10',
+const fontSizeClasses = computed(() => {
+  return {
+    sm: 'text-base',
+    md: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
   }[props.size]
+})
 
-  let paddingClasses = {
-    sm: ['py-0', slots.prefix ? 'pl-8' : 'pl-2'],
-    md: ['py-0', slots.prefix ? 'pl-9' : 'pl-2.5'],
-    lg: ['py-0', slots.prefix ? 'pl-10' : 'pl-3'],
-    xl: ['py-0', slots.prefix ? 'pl-10' : 'pl-3'],
+const paddingClasses = computed(() => {
+  return {
+    sm: 'px-2',
+    md: 'px-2.5',
+    lg: 'px-3',
+    xl: 'px-3',
+  }[props.size]
+})
+
+const selectClasses = computed(() => {
+  let sizeClasses = {
+    sm: 'rounded h-7',
+    md: 'rounded h-8',
+    lg: 'rounded-md h-10',
+    xl: 'rounded-md h-10',
   }[props.size]
 
   let variant = props.disabled ? 'disabled' : props.variant
@@ -118,10 +140,11 @@ const selectClasses = computed(() => {
 
   return [
     sizeClasses,
-    paddingClasses,
+    fontSizeClasses.value,
+    paddingClasses.value,
     variantClasses,
     textColor.value,
-    'transition-colors w-full',
+    'transition-colors w-full py-0',
   ]
 })
 

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,9 +41,13 @@ 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'
+export { default as ListGroups } from './components/ListView/ListGroups.vue'
+export { default as ListGroupHeader } from './components/ListView/ListGroupHeader.vue'
+export { default as ListGroupRows } from './components/ListView/ListGroupRows.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'

package/src/resources/listResource.js

@@ -37,6 +37,7 @@ export function createListResource(options, vm) {
     doctype: options.doctype,
     fields: options.fields,
     filters: options.filters,
+    orFilters: options.orFilters,
     orderBy: options.orderBy,
     start: options.start || 0,
     pageLength: options.pageLength || 20,
@@ -59,6 +60,7 @@ export function createListResource(options, vm) {
             doctype: out.doctype,
             fields: out.fields,
             filters: out.filters,
+            or_filters: out.orFilters,
             order_by: out.orderBy,
             start: out.start,
             limit: out.pageLength,
@@ -71,9 +73,7 @@ export function createListResource(options, vm) {
         },
         onSuccess(data) {
           out.hasPreviousPage = !!out.start
-          if (data.length < out.pageLength) {
-            out.hasNextPage = false
-          }
+          out.hasNextPage = data.length < out.pageLength ? false : true
           let pagedData
           if (!out.start || out.start == 0) {
             pagedData = data

package/src/resources/plugin.js

@@ -23,11 +23,9 @@ let createMixin = (mixinOptions) => ({
                 console.warn('Failed to get resource options\n\n', error)
                 out = null
               }
-              return JSON.stringify(out)
+              return out
             },
-            (_options, _oldOptions) => {
-              let options = _options ? JSON.parse(_options) : null
-              let oldOptions = _oldOptions ? JSON.parse(_oldOptions) : null
+            (options, oldOptions) => {
               if (!options) {
                 return
               }

package/src/utils/melonRequest.js

@@ -31,7 +31,7 @@ export function melonRequest(options) {
       let url = options.url
       if (response.ok) {
         const data = await response.json()
-        if (data.docs || url === 'login') {
+        if (data.docs || url === '/api/method/login') {
           return data
         }
         if (data.exc) {

package/vite.js

@@ -1,27 +1,30 @@
 const path = require('path')
 const fs = require('fs')
 
-module.exports = function proxyOptions({ port = 8080 } = {}) {
+module.exports = function proxyOptions({
+  port = 8080,
+  source = '^/(app|login|api|assets|files)',
+ } = {}) {
   const config = getCommonSiteConfig()
   const webserver_port = config ? config.webserver_port : 8000
   if (!config) {
     console.log('No common_site_config.json found, using default port 8000')
   }
+  let proxy = {}
+  proxy[source] = {
+    target: `http://127.0.0.1:${webserver_port}`,
+    ws: true,
+    router: function (req) {
+      const site_name = req.headers.host.split(':')[0]
+      return `http://${site_name}:${webserver_port}`
+    }
+  }
   return {
     name: 'melonui-vite-plugin',
     config: () => ({
       server: {
         port: port,
-        proxy: {
-          '^/(app|login|api|assets|files)': {
-            target: `http://127.0.0.1:${webserver_port}`,
-            ws: true,
-            router: function (req) {
-              const site_name = req.headers.host.split(':')[0]
-              return `http://${site_name}:${webserver_port}`
-            },
-          },
-        },
+        proxy: proxy,
       },
     }),
   }