frappe-ui 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.7",
+  "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

@@ -1,9 +1,12 @@
 <template>
   <div
-    class="mx-5 mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
-    :style="{ gridTemplateColumns: getGridTemplateColumns(columns) }"
+    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"
@@ -12,7 +15,7 @@
       <ListHeaderItem
         v-for="column in columns"
         :key="column.key"
-        :column="column"
+        :item="column"
       />
     </slot>
   </div>
@@ -24,5 +27,5 @@ import ListHeaderItem from './ListHeaderItem.vue'
 import { getGridTemplateColumns } from './utils'
 import { inject } from 'vue'
 
-const { columns, allRowsSelected, toggleAllRows } = inject('list')
+const { columns, options, allRowsSelected, toggleAllRows } = inject('list')
 </script>

package/src/components/ListView/ListHeaderItem.vue

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

package/src/components/ListView/ListRow.vue

@@ -1,11 +1,15 @@
 <template>
   <component
-    :is="row.route ? 'router-link' : 'div'"
-    class="mx-5 flex cursor-pointer flex-col transition-all duration-300 ease-in-out"
-    v-bind="row.route ? { to: row.route } : { onClick: row.onClick }"
+    :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) }
+    "
   >
     <component
-      :is="row.route ? 'template' : 'button'"
+      :is="options.getRowRoute ? 'template' : 'button'"
       class="[all:unset] hover:[all:unset]"
     >
       <div
@@ -15,9 +19,15 @@
             ? 'bg-gray-100 hover:bg-gray-200'
             : 'hover:bg-gray-50'
         "
-        :style="{ gridTemplateColumns: getGridTemplateColumns(columns) }"
+        :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"
@@ -27,19 +37,16 @@
           :key="column.key"
           :class="alignmentMap[column.align]"
         >
-          <slot v-bind="{ column, item: _row(row)[column.key] }">
+          <slot v-bind="{ column, item: row[column.key] }">
             <ListRowItem
-              :item="_row(row)[column.key]"
+              :item="row[column.key]"
               :type="column.type"
               :align="column.align"
             />
           </slot>
         </div>
       </div>
-      <div
-        v-if="idx < rows.length - 1"
-        class="mx-2 h-px border-t border-gray-200"
-      />
+      <div v-if="!isLastRow" class="mx-2 h-px border-t border-gray-200" />
     </component>
   </component>
 </template>
@@ -48,25 +55,18 @@
 import Checkbox from '../Checkbox.vue'
 import ListRowItem from './ListRowItem.vue'
 import { alignmentMap, getGridTemplateColumns } from './utils'
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
 
 const props = defineProps({
   row: {
     type: Object,
     required: true,
   },
-  idx: {
-    type: Number,
-    required: true,
-  },
 })
 
-function _row(row) {
-  if (row.row && typeof row.row === 'object' && (row.onClick || row.route)) {
-    return row.row
-  }
-  return row
-}
+const isLastRow = computed(() => {
+  return rows[rows.length - 1][rowKey] === props.row[rowKey]
+})
 
-const { rows, columns, rowKey, selections, toggleRow } = inject('list')
+const { rows, columns, rowKey, options, selections, toggleRow } = inject('list')
 </script>

package/src/components/ListView/ListRowItem.vue

@@ -1,6 +1,7 @@
 <template>
-  <Tooltip
-    :text="label"
+  <component
+    :is="options.showTooltip ? Tooltip : 'div'"
+    v-bind="options.showTooltip ? { text: label } : {}"
     class="flex items-center space-x-2"
     :class="alignmentMap[align]"
   >
@@ -11,12 +12,12 @@
       </div>
     </slot>
     <slot name="suffix" />
-  </Tooltip>
+  </component>
 </template>
 <script setup>
 import { alignmentMap } from './utils'
 import Tooltip from '../Tooltip.vue'
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 
 const props = defineProps({
   item: {
@@ -39,4 +40,6 @@ function getValue(value) {
   }
   return { label: value }
 }
+
+const { options } = inject('list')
 </script>

package/src/components/ListView/ListRows.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="h-full overflow-y-auto">
     <slot>
-      <ListRow
-        v-for="(row, i) in rows"
-        :key="row[rowKey]"
-        :row="row"
-        :idx="i"
-      />
+      <ListRow v-for="(row, i) in rows" :key="row[rowKey]" :row="row" />
     </slot>
   </div>
 </template>

package/src/components/ListView/ListSelectBanner.vue

@@ -78,5 +78,5 @@ let selectedText = computed(() => {
   return `${selections.size} ${title} selected`
 })
 
-const { list, selections, allRowsSelected, toggleAllRows } = inject('list')
+const { selections, allRowsSelected, toggleAllRows } = inject('list')
 </script>

package/src/components/ListView/ListView.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="relative flex w-full flex-1 flex-col overflow-x-auto">
     <div
-      class="mt-3 flex w-max min-w-full flex-col overflow-y-hidden"
+      class="flex w-max min-w-full flex-col overflow-y-hidden"
       :class="$attrs.class"
     >
       <slot>
         <ListHeader />
         <ListRows />
-        <ListSelectBanner />
+        <ListSelectBanner v-if="_options.selectable" />
       </slot>
     </div>
   </div>
@@ -35,10 +35,32 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  options: {
+    type: Object,
+    default: {
+      getRowRoute: null,
+      onRowClick: null,
+      showTooltip: true,
+      selectable: true,
+    },
+  },
 })
 
 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),
+  }
+})
+
 const allRowsSelected = computed(() => {
   if (!props.rows.length) return false
   return selections.size === props.rows.length
@@ -62,6 +84,7 @@ provide('list', {
   rowKey: props.rowKey,
   rows: props.rows,
   columns: props.columns,
+  options: _options.value,
   selections,
   allRowsSelected,
   toggleRow,

package/src/components/ListView/utils.js

@@ -1,16 +1,15 @@
-export function getGridTemplateColumns(columns) {
-  return (
-    '14px ' +
-    columns
-      .map((col) => {
-        let width = col.width || 1
-        if (typeof width === 'number') {
-          return width + 'fr'
-        }
-        return width
-      })
-      .join(' ')
-  )
+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 = {

package/src/index.js

@@ -50,6 +50,7 @@ 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'