frappe-ui 0.1.6 → 0.1.8

package/package.json

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

package/src/components/Dialog.vue

@@ -196,7 +196,7 @@ export default {
         this.dialogActions = actions.map((action) => {
           let _action = {
             ...action,
-            loading: false,
+            loading: action.loading || false,
             _onClick: action.onClick,
             onClick: () => this.handleAction(_action),
           }

package/src/components/ListFilter/FilterIcon.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg
+    width="16"
+    height="17"
+    viewBox="0 0 16 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 4.5H14"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4 8.5H12"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6.5 12.5H9.5"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/components/ListFilter/ListFilter.vue

@@ -0,0 +1,292 @@
+<template>
+  <NestedPopover>
+    <template #target>
+      <Button label="Filter">
+        <template #prefix><FilterIcon class="h-4" /></template>
+        <template v-if="filters.size" #suffix>
+          <div
+            class="flex h-5 w-5 items-center justify-center rounded bg-gray-900 pt-[1px] text-2xs font-medium text-white"
+          >
+            {{ filters.size }}
+          </div>
+        </template>
+      </Button>
+    </template>
+    <template #body="{ close }">
+      <div class="my-2 rounded-lg border border-gray-100 bg-white shadow-xl">
+        <div class="min-w-[400px] p-2">
+          <div
+            v-if="filters.length"
+            v-for="(filter, i) in filters"
+            :key="i"
+            id="filter-list"
+            class="mb-3 flex items-center justify-between gap-2"
+          >
+            <div class="flex flex-1 items-center gap-2">
+              <div
+                class="w-13 flex-shrink-0 pl-2 text-end text-base text-gray-600"
+              >
+                {{ i == 0 ? 'Where' : 'And' }}
+              </div>
+              <div id="fieldname" class="!min-w-[140px] flex-1">
+                <Autocomplete
+                  :value="filter.fieldname"
+                  :options="fields"
+                  @change="filter.fieldname = $event.value"
+                  placeholder="Filter by..."
+                />
+              </div>
+              <div id="operator" class="!min-w-[140px] flex-shrink-0">
+                <FormControl
+                  type="select"
+                  :modelValue="filter.operator"
+                  @update:modelValue="filter.operator = $event.value"
+                  :options="getOperators(filter.field.fieldtype)"
+                  placeholder="Operator"
+                />
+              </div>
+              <div id="value" class="!min-w-[140px] flex-1">
+                <SearchComplete
+                  v-if="
+                    typeLink.includes(filter.field.fieldtype) &&
+                    ['=', '!='].includes(filter.operator)
+                  "
+                  :doctype="filter.field.options"
+                  :value="filter.value"
+                  @change="filter.value = $event.value"
+                  placeholder="Value"
+                />
+                <component
+                  v-else
+                  :is="
+                    getValueSelector(
+                      filter.field.fieldtype,
+                      filter.field.options
+                    )
+                  "
+                  v-model="filter.value"
+                  placeholder="Value"
+                />
+              </div>
+            </div>
+            <div class="flex-shrink-0">
+              <Button variant="ghost" icon="x" @click="removeFilter(i)" />
+            </div>
+          </div>
+          <div
+            v-else
+            class="mb-3 flex h-7 items-center px-3 text-sm text-gray-600"
+          >
+            Empty - Choose a field to filter by
+          </div>
+          <div class="flex items-center justify-between gap-2">
+            <Autocomplete
+              value=""
+              :options="fields"
+              @change="(field) => addFilter(field.value)"
+              placeholder="Filter by..."
+            >
+              <template #target="{ togglePopover }">
+                <Button
+                  class="!text-gray-600"
+                  variant="ghost"
+                  @click="togglePopover()"
+                  label="Add filter"
+                >
+                  <template #prefix>
+                    <FeatherIcon name="plus" class="h-4" />
+                  </template>
+                </Button>
+              </template>
+            </Autocomplete>
+            <Button
+              v-if="filters.length"
+              class="!text-gray-600"
+              variant="ghost"
+              label="Clear all filter"
+              @click="filters = []"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </NestedPopover>
+</template>
+
+<script setup>
+import { Autocomplete, FeatherIcon, FormControl } from 'frappe-ui'
+import { computed, h } from 'vue'
+import FilterIcon from './FilterIcon.vue'
+import NestedPopover from './NestedPopover.vue'
+import SearchComplete from './SearchComplete.vue'
+
+const typeCheck = ['Check']
+const typeLink = ['Link']
+const typeNumber = ['Float', 'Int']
+const typeSelect = ['Select']
+const typeString = [
+  'Data',
+  'Long Text',
+  'Small Text',
+  'Text Editor',
+  'Text',
+  'JSON',
+  'Code',
+]
+
+const emits = defineEmits(['update:modelValue'])
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({}),
+  },
+  docfields: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const fields = computed(() => {
+  const fields = props.docfields
+    .filter((field) => {
+      return (
+        !field.is_virtual &&
+        (typeCheck.includes(field.fieldtype) ||
+          typeLink.includes(field.fieldtype) ||
+          typeNumber.includes(field.fieldtype) ||
+          typeSelect.includes(field.fieldtype) ||
+          typeString.includes(field.fieldtype))
+      )
+    })
+    .map((field) => {
+      return {
+        label: field.label,
+        value: field.fieldname,
+        description: field.fieldtype,
+        ...field,
+      }
+    })
+  return fields
+})
+
+const filters = computed({
+  get: () => makeFiltersList(props.modelValue),
+  set: (value) => emits('update:modelValue', makeFiltersDict(value)),
+})
+
+function makeFiltersList(filtersDict) {
+  return Object.entries(filtersDict).map(([fieldname, [operator, value]]) => {
+    const field = getField(fieldname)
+    return {
+      fieldname,
+      operator,
+      value,
+      field,
+    }
+  })
+}
+
+function getField(fieldname) {
+  return fields.value.find((f) => f.fieldname === fieldname)
+}
+
+function makeFiltersDict(filtersList) {
+  return filtersList.reduce((acc, filter) => {
+    const { fieldname, operator, value } = filter
+    acc[fieldname] = [operator, value]
+    return acc
+  }, {})
+}
+
+function getOperators(fieldtype) {
+  let options = []
+  if (typeString.includes(fieldtype) || typeLink.includes(fieldtype)) {
+    options.push(
+      ...[
+        { label: 'Equals', value: '=' },
+        { label: 'Not Equals', value: '!=' },
+        { label: 'Like', value: 'like' },
+        { label: 'Not Like', value: 'not like' },
+      ]
+    )
+  }
+  if (typeNumber.includes(fieldtype)) {
+    options.push(
+      ...[
+        { label: '<', value: '<' },
+        { label: '>', value: '>' },
+        { label: '<=', value: '<=' },
+        { label: '>=', value: '>=' },
+        { label: 'Equals', value: '=' },
+        { label: 'Not Equals', value: '!=' },
+      ]
+    )
+  }
+  if (typeSelect.includes(fieldtype)) {
+    options.push(
+      ...[
+        { label: 'Equals', value: '=' },
+        { label: 'Not Equals', value: '!=' },
+      ]
+    )
+  }
+  if (typeCheck.includes(fieldtype)) {
+    options.push(...[{ label: 'Equals', value: '=' }])
+  }
+  return options
+}
+
+function getDefaultOperator(fieldtype) {
+  if (
+    typeSelect.includes(fieldtype) ||
+    typeLink.includes(fieldtype) ||
+    typeCheck.includes(fieldtype) ||
+    typeNumber.includes(fieldtype)
+  ) {
+    return '='
+  }
+  return 'like'
+}
+
+function getValueSelector(fieldtype, options) {
+  if (typeSelect.includes(fieldtype) || typeCheck.includes(fieldtype)) {
+    const _options =
+      fieldtype == 'Check' ? ['Yes', 'No'] : getSelectOptions(options)
+    return h(FormControl, {
+      type: 'select',
+      options: _options,
+    })
+  } else {
+    return h(FormControl, { type: 'text' })
+  }
+}
+
+function getDefaultValue(field) {
+  if (typeSelect.includes(field.fieldtype)) {
+    return getSelectOptions(field.options)[0]
+  }
+  if (typeCheck.includes(field.fieldtype)) {
+    return 'Yes'
+  }
+  return ''
+}
+
+function getSelectOptions(options) {
+  return options.split('\n')
+}
+
+function addFilter(fieldname) {
+  const field = getField(fieldname)
+  const filter = {
+    fieldname,
+    operator: getDefaultOperator(field.fieldtype),
+    value: getDefaultValue(field),
+    field,
+  }
+  filters.value = [...filters.value, filter]
+}
+
+function removeFilter(index) {
+  filters.value = filters.value.filter((_, i) => i !== index)
+}
+</script>

package/src/components/ListFilter/NestedPopover.vue

@@ -0,0 +1,60 @@
+<template>
+  <Popover v-slot="{ open }">
+    <PopoverButton
+      as="div"
+      ref="reference"
+      @click="updatePosition"
+      @focusin="updatePosition"
+      @keydown="updatePosition"
+      v-slot="{ open }"
+    >
+      <slot name="target" v-bind="{ open }" />
+    </PopoverButton>
+    <div v-show="open">
+      <PopoverPanel
+        v-slot="{ open, close }"
+        ref="popover"
+        static
+        class="z-[100]"
+      >
+        <slot name="body" v-bind="{ open, close }" />
+      </PopoverPanel>
+    </div>
+  </Popover>
+</template>
+
+<script setup>
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { createPopper } from '@popperjs/core'
+import { nextTick, ref, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  placement: {
+    type: String,
+    default: 'bottom-start',
+  },
+})
+
+const reference = ref(null)
+const popover = ref(null)
+
+let popper = ref(null)
+
+function setupPopper() {
+  if (!popper.value) {
+    popper.value = createPopper(reference.value.el, popover.value.el, {
+      placement: props.placement,
+    })
+  } else {
+    popper.value.update()
+  }
+}
+
+function updatePosition() {
+  nextTick(() => setupPopper())
+}
+
+onBeforeUnmount(() => {
+  popper.value?.destroy()
+})
+</script>

package/src/components/ListFilter/SearchComplete.vue

@@ -0,0 +1,85 @@
+<template>
+  <Autocomplete
+    placeholder="Select an option"
+    :options="options"
+    :value="selection"
+    @update:query="(q) => onUpdateQuery(q)"
+    @change="(v) => (selection = v)"
+  />
+</template>
+
+<script setup>
+import { Autocomplete, createListResource } from 'frappe-ui'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  value: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  doctype: {
+    type: String,
+    required: true,
+  },
+  searchField: {
+    type: String,
+    required: false,
+    default: 'name',
+  },
+  labelField: {
+    type: String,
+    required: false,
+    default: 'name',
+  },
+  valueField: {
+    type: String,
+    required: false,
+    default: 'name',
+  },
+  pageLength: {
+    type: Number,
+    required: false,
+    default: 10,
+  },
+})
+
+watch(
+  () => props.doctype,
+  (value) => {
+    r.doctype = value
+    r.reload()
+  }
+)
+
+const r = createListResource({
+  doctype: props.doctype,
+  pageLength: props.pageLength,
+  cache: ['link_doctype', props.doctype],
+  auto: true,
+  fields: [props.labelField, props.searchField, props.valueField],
+  onSuccess: () => {
+    selection.value = props.value
+      ? options.value.find((o) => o.value === props.value)
+      : null
+  },
+})
+const options = computed(
+  () =>
+    r.data?.map((result) => ({
+      label: result[props.labelField],
+      value: result[props.valueField],
+    })) || []
+)
+const selection = ref(null)
+
+function onUpdateQuery(query) {
+  r.update({
+    filters: {
+      [props.searchField]: ['like', `%${query}%`],
+    },
+  })
+
+  r.reload()
+}
+</script>

package/src/components/ListView/ListHeader.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+    :style="{
+      gridTemplateColumns: getGridTemplateColumns(columns, options.selectable),
+    }"
+  >
+    <Checkbox
+      v-if="options.selectable"
+      class="cursor-pointer duration-300"
+      :modelValue="allRowsSelected"
+      @click.stop="toggleAllRows"
+    />
+    <slot>
+      <ListHeaderItem
+        v-for="column in columns"
+        :key="column.key"
+        :item="column"
+      />
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import Checkbox from '../Checkbox.vue'
+import ListHeaderItem from './ListHeaderItem.vue'
+import { getGridTemplateColumns } from './utils'
+import { inject } from 'vue'
+
+const { columns, options, allRowsSelected, toggleAllRows } = inject('list')
+</script>

package/src/components/ListView/ListHeaderItem.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="flex items-center space-x-2 text-base text-gray-600"
+    :class="alignmentMap[item.align]"
+  >
+    <slot name="prefix" v-bind="{ item }" />
+    <div>
+      {{ item.label }}
+    </div>
+    <slot name="suffix" v-bind="{ item }" />
+  </div>
+</template>
+
+<script setup>
+import { alignmentMap } from './utils'
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+})
+</script>

package/src/components/ListView/ListRow.vue

@@ -1,29 +1,72 @@
-<script setup>
-import { inject } from 'vue'
-import Checkbox from '../Checkbox.vue'
-
-const list = inject('list')
-const props = defineProps({
-  as: { type: String, default: 'div' },
-  row: { type: Object, default: () => ({}), required: true },
-})
-</script>
-
 <template>
   <component
-    :is="as"
-    class="mx-2 flex cursor-pointer items-center space-x-4 border-b py-2 transition-all duration-300 ease-in-out"
-    :class="
-      list.selections.has(row.name)
-        ? 'bg-gray-100 hover:bg-gray-200'
-        : 'hover:bg-gray-50'
+    :is="options.getRowRoute ? 'router-link' : 'div'"
+    class="flex cursor-pointer flex-col transition-all duration-300 ease-in-out"
+    v-bind="
+      options.getRowRoute
+        ? { to: options.getRowRoute(row) }
+        : { onClick: () => options.onRowClick(row) }
     "
   >
-    <Checkbox
-      :modelValue="list.selections.has(row.name)"
-      @click.stop="list.toggleSelection(row.name)"
-      class="cursor-pointer duration-300"
-    />
-    <slot></slot>
+    <component
+      :is="options.getRowRoute ? 'template' : 'button'"
+      class="[all:unset] hover:[all:unset]"
+    >
+      <div
+        class="grid items-center space-x-4 rounded px-2 py-2.5"
+        :class="
+          selections.has(row[rowKey])
+            ? 'bg-gray-100 hover:bg-gray-200'
+            : 'hover:bg-gray-50'
+        "
+        :style="{
+          gridTemplateColumns: getGridTemplateColumns(
+            columns,
+            options.selectable
+          ),
+        }"
+      >
+        <Checkbox
+          v-if="options.selectable"
+          :modelValue="selections.has(row[rowKey])"
+          @click.stop="toggleRow(row[rowKey])"
+          class="cursor-pointer duration-300"
+        />
+        <div
+          v-for="column in columns"
+          :key="column.key"
+          :class="alignmentMap[column.align]"
+        >
+          <slot v-bind="{ column, item: row[column.key] }">
+            <ListRowItem
+              :item="row[column.key]"
+              :type="column.type"
+              :align="column.align"
+            />
+          </slot>
+        </div>
+      </div>
+      <div v-if="!isLastRow" class="mx-2 h-px border-t border-gray-200" />
+    </component>
   </component>
 </template>
+
+<script setup>
+import Checkbox from '../Checkbox.vue'
+import ListRowItem from './ListRowItem.vue'
+import { alignmentMap, getGridTemplateColumns } from './utils'
+import { computed, inject } from 'vue'
+
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+  },
+})
+
+const isLastRow = computed(() => {
+  return rows[rows.length - 1][rowKey] === props.row[rowKey]
+})
+
+const { rows, columns, rowKey, options, selections, toggleRow } = inject('list')
+</script>

package/src/components/ListView/ListRowItem.vue

@@ -1,10 +1,45 @@
-<script setup></script>
-
 <template>
-  <div
-    class="flex min-h-[1.5rem] flex-1 items-center space-x-2 truncate text-base"
-    :class="$attrs.class"
+  <component
+    :is="options.showTooltip ? Tooltip : 'div'"
+    v-bind="options.showTooltip ? { text: label } : {}"
+    class="flex items-center space-x-2"
+    :class="alignmentMap[align]"
   >
-    <slot> </slot>
-  </div>
+    <slot name="prefix" />
+    <slot v-bind="{ label }">
+      <div class="truncate text-base">
+        {{ label }}
+      </div>
+    </slot>
+    <slot name="suffix" />
+  </component>
 </template>
+<script setup>
+import { alignmentMap } from './utils'
+import Tooltip from '../Tooltip.vue'
+import { computed, inject } from 'vue'
+
+const props = defineProps({
+  item: {
+    type: [String, Number, Object],
+    default: '',
+  },
+  align: {
+    type: String,
+    default: 'left',
+  },
+})
+
+const label = computed(() => {
+  return getValue(props.item).label || ''
+})
+
+function getValue(value) {
+  if (value && typeof value === 'object') {
+    return value
+  }
+  return { label: value }
+}
+
+const { options } = inject('list')
+</script>

package/src/components/ListView/ListRows.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="h-full overflow-y-auto">
+    <slot>
+      <ListRow v-for="(row, i) in rows" :key="row[rowKey]" :row="row" />
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import ListRow from './ListRow.vue'
+import { inject } from 'vue'
+
+const { rows, rowKey } = inject('list')
+</script>

package/src/components/ListView/ListSelectBanner.vue

@@ -0,0 +1,82 @@
+<template>
+  <transition
+    enter-active-class="duration-300 ease-out"
+    enter-from-class="transform opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="duration-300 ease-in"
+    leave-from-class="opacity-100"
+    leave-to-class="transform opacity-0"
+  >
+    <div
+      v-if="selections.size"
+      class="absolute inset-x-0 bottom-6 mx-auto w-max text-base"
+    >
+      <div
+        class="flex min-w-[596px] items-center space-x-3 rounded-lg bg-white px-4 py-2 shadow-2xl"
+        :class="$attrs.class"
+      >
+        <slot
+          v-bind="{
+            selections,
+            allRowsSelected,
+            selectAll: () => toggleAllRows(true),
+            unselectAll: () => toggleAllRows(false),
+          }"
+        >
+          <div
+            class="flex flex-1 justify-between border-r border-gray-300 text-gray-900"
+          >
+            <div class="flex items-center space-x-3">
+              <Checkbox
+                :modelValue="true"
+                :disabled="true"
+                class="text-gray-900"
+              />
+              <div>{{ selectedText }}</div>
+            </div>
+            <div class="mr-3">
+              <slot
+                name="actions"
+                v-bind="{
+                  selections,
+                  allRowsSelected,
+                  selectAll: () => toggleAllRows(true),
+                  unselectAll: () => toggleAllRows(false),
+                }"
+              />
+            </div>
+          </div>
+          <div class="flex items-center space-x-1">
+            <Button
+              class="w- text-gray-700"
+              :disabled="allRowsSelected"
+              :class="allRowsSelected ? 'cursor-not-allowed' : ''"
+              variant="ghost"
+              @click="toggleAllRows(true)"
+            >
+              Select all
+            </Button>
+            <Button icon="x" variant="ghost" @click="toggleAllRows(false)" />
+          </div>
+        </slot>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import Checkbox from '../Checkbox.vue'
+import Button from '../Button.vue'
+import { computed, inject } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+let selectedText = computed(() => {
+  let title = selections.size === 1 ? 'Row' : 'Rows'
+  return `${selections.size} ${title} selected`
+})
+
+const { selections, allRowsSelected, toggleAllRows } = inject('list')
+</script>

package/src/components/ListView/ListView.vue

@@ -1,116 +1,93 @@
 <template>
-  <div id="content" class="flex w-full flex-1 flex-col overflow-x-auto">
-    <div class="flex w-max min-w-full flex-col overflow-y-hidden">
-      <div
-        id="list-header"
-        class="mx-2 flex items-center space-x-4 border-b py-2"
-      >
-        <Checkbox
-          class="cursor-pointer duration-300"
-          :modelValue="state.allRowsSelected"
-          @click.stop="state.toggleAllRows(!allRowsSelected)"
-        />
-        <div
-          v-for="column in props.columns"
-          :key="column"
-          class="flex-1 text-sm text-gray-600"
-          :class="column.class"
-        >
-          {{ column.label }}
-        </div>
-      </div>
-      <div id="list-rows" class="h-full overflow-y-auto">
-        <template v-for="row in props.rows" :key="row.name">
-          <slot name="list-row" :row="row">
-            <ListRow as="div" :row="row">
-              <ListRowItem v-for="column in props.columns" :key="column.name">
-                {{ row[column.name] }}
-              </ListRowItem>
-            </ListRow>
-          </slot>
-        </template>
-      </div>
-      <transition
-        enter-active-class="duration-300 ease-out"
-        enter-from-class="transform opacity-0"
-        enter-to-class="opacity-100"
-        leave-active-class="duration-300 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="transform opacity-0"
-      >
-        <div
-          v-if="state.selections.size"
-          class="fixed inset-x-0 bottom-6 mx-auto w-max text-base"
-        >
-          <div
-            class="flex w-[596px] items-center space-x-3 rounded-lg bg-white px-4 py-2 shadow-2xl"
-          >
-            <div
-              class="flex flex-1 items-center space-x-3 border-r border-gray-300 text-gray-900"
-            >
-              <Checkbox
-                :modelValue="true"
-                :disabled="true"
-                class="text-gray-900"
-              />
-              <div>{{ state.selectedText }}</div>
-            </div>
-            <div class="flex items-center space-x-1">
-              <Button
-                class="text-gray-700"
-                :disabled="state.allRowsSelected"
-                :class="state.allRowsSelected ? 'cursor-not-allowed' : ''"
-                variant="ghost"
-                @click="state.toggleAllRows(true)"
-              >
-                Select all
-              </Button>
-              <Button
-                icon="x"
-                variant="ghost"
-                @click="state.toggleAllRows(false)"
-              />
-            </div>
-          </div>
-        </div>
-      </transition>
+  <div class="relative flex w-full flex-1 flex-col overflow-x-auto">
+    <div
+      class="flex w-max min-w-full flex-col overflow-y-hidden"
+      :class="$attrs.class"
+    >
+      <slot>
+        <ListHeader />
+        <ListRows />
+        <ListSelectBanner v-if="_options.selectable" />
+      </slot>
     </div>
   </div>
 </template>
 <script setup>
-import { computed, provide, reactive } from 'vue'
-import Button from '../Button.vue'
-import Checkbox from '../Checkbox.vue'
-import ListRow from './ListRow.vue'
-import ListRowItem from './ListRowItem.vue'
+import ListHeader from './ListHeader.vue'
+import ListRows from './ListRows.vue'
+import ListSelectBanner from './ListSelectBanner.vue'
+import { reactive, computed, provide } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const props = defineProps({
-  columns: { type: Array, default: [] },
-  rows: { type: Array, default: [] },
+  columns: {
+    type: Array,
+    default: [],
+  },
+  rows: {
+    type: Array,
+    default: [],
+  },
+  rowKey: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Object,
+    default: {
+      getRowRoute: null,
+      onRowClick: null,
+      showTooltip: true,
+      selectable: true,
+    },
+  },
 })
 
-const state = reactive({
-  selections: new Set(),
-  allRowsSelected: computed(() => state.selections.size === props.rows.length),
-  selectedText: computed(() => {
-    return state.selections.size > 1
-      ? `${state.selections.size} items selected`
-      : `${state.selections.size} item selected`
-  }),
+let selections = reactive(new Set())
+
+let _options = computed(() => {
+  function defaultTrue(value) {
+    return value === undefined ? true : value
+  }
+
+  return {
+    getRowRoute: props.options.getRowRoute || null,
+    onRowClick: props.options.onRowClick || null,
+    showTooltip: defaultTrue(props.options.showTooltip),
+    selectable: defaultTrue(props.options.selectable),
+  }
 })
-provide('list', state)
 
-state.toggleAllRows = () => {
-  return state.allRowsSelected
-    ? state.selections.clear()
-    : props.rows.forEach((row) => state.selections.add(row.name))
+const allRowsSelected = computed(() => {
+  if (!props.rows.length) return false
+  return selections.size === props.rows.length
+})
+
+function toggleRow(row) {
+  if (!selections.delete(row)) {
+    selections.add(row)
+  }
 }
 
-state.toggleSelection = (name) => {
-  if (state.selections.has(name)) {
-    state.selections.delete(name)
-  } else {
-    state.selections.add(name)
+function toggleAllRows(select) {
+  if (!select || allRowsSelected.value) {
+    selections.clear()
+    return
   }
+  props.rows.forEach((row) => selections.add(row[props.rowKey]))
 }
+
+provide('list', {
+  rowKey: props.rowKey,
+  rows: props.rows,
+  columns: props.columns,
+  options: _options.value,
+  selections,
+  allRowsSelected,
+  toggleRow,
+  toggleAllRows,
+})
 </script>

package/src/components/ListView/utils.js

@@ -0,0 +1,22 @@
+export function getGridTemplateColumns(columns, withCheckbox = true) {
+  let checkBoxWidth = withCheckbox ? '14px ' : ''
+  let columnsWidth = columns
+    .map((col) => {
+      let width = col.width || 1
+      if (typeof width === 'number') {
+        return width + 'fr'
+      }
+      return width
+    })
+    .join(' ')
+  return checkBoxWidth + columnsWidth
+}
+
+export const alignmentMap = {
+  left: 'justify-start',
+  start: 'justify-start',
+  center: 'justify-center',
+  middle: 'justify-center',
+  right: 'justify-end',
+  end: 'justify-end',
+}

package/src/components/ListView.story.md

@@ -0,0 +1,123 @@
+**Column:**
+
+1. `label` & `key` is required in column object.
+
+2. `width` is optional and it is used to set column width in list
+
+   1. If you need a column to be `3` times a default column then add `3`. if
+      width is not mentioned default will be `1`
+   2. You can also add custom width in px and rem e.g `300px` or `12rem`
+   3. Combination of both can also be used.
+
+3. `align` is also optional. You can change the alignment of the content in the
+   column by setting it as.
+
+   1. `start` or `left` (default)
+   2. `center` or `middle`
+   3. `end` or `right`
+
+4. You can add more attributes which can be used to render custom column header
+   items.
+
+**Row**
+
+1. The row object must contain a unique_key which was mentioned in ListView
+   `row-key`
+2. You can either add all row fields in a separate `row` object or just add them
+   in directly if the fieldnames doesn't conflict with `route` or `onClick` E.g.
+   1
+
+   ```
+   {
+   	// unique_key 'id'
+   	id: 1,
+
+   	// row fields
+   	name: 'John Doe',
+   	age: 25,
+   	email: 'john@doe.com',
+
+   	// if you need to route
+   	route: { label: 'User', { params: { userId: 1 } }
+
+   	// if you need to perform action
+   	onClick: () => console.log('John Doe was clicked')
+
+   	// you can add more options after this which you can use to render custom row items
+   }
+   ```
+
+   E.g. 2
+
+   ```
+   {
+   	// unique_key 'id'
+   	id: 1,
+
+   	// row fields in separate row object
+   	row: {
+   	name: 'John Doe',
+   	age: 25,
+   	email: 'john@doe.com',
+   	route: '', // used separate row to avoid this conflict
+   	}
+
+   	// if you need to route
+   	route: { label: 'User', { params: { userId: 1 } }
+
+   	// if you need to perform action
+   	onClick: () => console.log('John Doe was clicked')
+
+   	// you can add more options after this which you can use to render custom row items
+   }
+   ```
+
+3. You can also add an object for the field value but make sure it has a `label`
+   attribute which holds the actual value to be shown
+   ```
+   row: {
+   	name: {
+   		label: 'John Doe',
+   		image: '/johndoe.jpg',
+   	},
+   	age: 25,
+   	status: {
+   		label: 'Active',
+   		color: 'green'
+   	}
+   }
+   ```
+4. Click action: Add route or onClick event in row object
+   1. If you want to route using router-link just add a
+      `route: { name: 'User', params: { userId: 2 } }`
+   2. if you need to do some action or open a dialog add a click event instead
+      of a route `onClick: () => console.log('John Doe was clicked')`
+
+**Selection Banner:**
+
+**Without custom action buttons:**
+<img width="1213" alt="image" src="https://github.com/frappe/frappe-ui/assets/30859809/36fafcf5-45c6-43f0-acde-f64afe38b550">
+
+**With custom action buttons:**
+<img width="1212" alt="image" src="https://github.com/frappe/frappe-ui/assets/30859809/55e751b2-df66-4ff0-b852-af463014463f">
+
+```
+<ListSelectBanner>
+	<template #actions>
+	  <div class="flex gap-2">
+	    <Button variant="ghost" label="Delete" />
+	    <Button variant="ghost" label="Edit" />
+	  </div>
+	</template>
+</ListSelectBanner>
+```
+
+You can also make your own custom selection banner
+
+<img width="629" alt="image" src="https://github.com/frappe/frappe-ui/assets/30859809/38dfa834-96a2-4ac5-ad4b-30b3e6871d3f">
+
+```
+<ListSelectBanner>
+	<div>Custom Banner</div>
+</ListSelectBanner>
+```

package/src/components/ListView.story.vue

@@ -0,0 +1,200 @@
+<script setup>
+import ListView from './ListView/ListView.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 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'
+
+const simple_columns = [
+  {
+    label: 'Name',
+    key: 'name',
+    width: 3,
+  },
+  {
+    label: 'Email',
+    key: 'email',
+    width: '200px',
+  },
+  {
+    label: 'Role',
+    key: 'role',
+  },
+  {
+    label: 'Status',
+    key: 'status',
+  },
+]
+
+const simple_rows = [
+  {
+    id: 1,
+    row: {
+      name: 'John Doe',
+      email: 'john@doe.com',
+      status: 'Active',
+      role: 'Developer',
+    },
+    onClick: () => console.log('John Doe was clicked'),
+  },
+  {
+    id: 2,
+    row: {
+      name: 'Jane Doe',
+      email: 'jane@doe.com',
+      status: 'Inactive',
+      role: 'HR',
+    },
+    route: { name: 'User', params: { userId: 2 } },
+  },
+]
+
+const custom_columns = [
+  {
+    label: 'Name',
+    key: 'name',
+    width: 3,
+    icon: 'user',
+  },
+  {
+    label: 'Email',
+    key: 'email',
+    width: '200px',
+    icon: 'at-sign',
+  },
+  {
+    label: 'Role',
+    key: 'role',
+    icon: 'users',
+  },
+  {
+    label: 'Status',
+    key: 'status',
+    icon: 'check-circle',
+  },
+]
+
+const custom_rows = [
+  {
+    id: 1,
+    row: {
+      name: {
+        label: 'John Doe',
+        image: 'https://avatars.githubusercontent.com/u/499550',
+      },
+      email: 'john@doe.com',
+      status: {
+        label: 'Active',
+        bg_color: 'bg-green-600',
+      },
+      role: {
+        label: 'Developer',
+        color: 'green',
+      },
+    },
+    onClick: () => console.log('John Doe was clicked'),
+  },
+  {
+    id: 2,
+    row: {
+      name: {
+        label: 'Jane Doe',
+        image: 'https://avatars.githubusercontent.com/u/499120',
+      },
+      email: 'jane@doe.com',
+      status: {
+        label: 'Inactive',
+        bg_color: 'bg-red-600',
+      },
+      role: {
+        label: 'HR',
+        color: 'red',
+      },
+    },
+    route: { name: 'User', params: { userId: 2 } },
+  },
+]
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: '95%' }">
+    <Variant title="Simple List">
+      <ListView
+        class="h-[250px]"
+        :columns="simple_columns"
+        :rows="simple_rows"
+        row-key="id"
+      />
+    </Variant>
+    <Variant title="Custom List">
+      <ListView
+        class="h-[250px]"
+        :columns="custom_columns"
+        :rows="custom_rows"
+        row-key="id"
+      >
+        <ListHeader>
+          <ListHeaderItem
+            v-for="column in custom_columns"
+            :key="column.key"
+            :column="column"
+          >
+            <template #prefix="{ column }">
+              <FeatherIcon :name="column.icon" class="h-4 w-4" />
+            </template>
+          </ListHeaderItem>
+        </ListHeader>
+        <ListRows>
+          <ListRow
+            v-for="(row, i) in custom_rows"
+            :key="i"
+            v-slot="{ column, item }"
+            :row="row"
+            :idx="i"
+          >
+            <ListRowItem :item="item" :align="column.align">
+              <template #prefix>
+                <div
+                  v-if="column.key == 'status'"
+                  class="h-3 w-3 rounded-full"
+                  :class="item.bg_color"
+                />
+                <Avatar
+                  v-if="column.key == 'name'"
+                  :shape="'circle'"
+                  :image="item.image"
+                  size="sm"
+                />
+              </template>
+              <Badge
+                v-if="column.key == 'role'"
+                variant="subtle"
+                :theme="item.color"
+                size="md"
+                :label="item.label"
+              />
+            </ListRowItem>
+          </ListRow>
+        </ListRows>
+        <ListSelectBanner>
+          <template #actions="{ unselectAll }">
+            <div class="flex gap-2">
+              <Button variant="ghost" label="Delete" />
+              <Button
+                variant="ghost"
+                label="Unselect all"
+                @click="unselectAll"
+              />
+            </div>
+          </template>
+        </ListSelectBanner>
+      </ListView>
+    </Variant>
+  </Story>
+</template>

package/src/index.js

@@ -38,14 +38,19 @@ export {
   TextEditorFloatingMenu,
   TextEditorContent,
 } from './components/TextEditor'
-export { default as List } from './components/ListView/ListView.vue'
+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 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 Toast } from './components/Toast.vue'
 export { toast, Toasts } from './components/toast.js'
 export { default as Tooltip } from './components/Tooltip.vue'
 export { default as CommandPalette } from './components/CommandPalette/CommandPalette.vue'
 export { default as CommandPaletteItem } from './components/CommandPalette/CommandPaletteItem.vue'
+export { default as ListFilter } from './components/ListFilter/ListFilter.vue'
 
 // directives
 export { default as onOutsideClickDirective } from './directives/onOutsideClick.js'