frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/ListFilter/ListFilter.vue

@@ -3,18 +3,18 @@
     <template #target>
       <Button label="Filter">
         <template #prefix><FilterIcon class="h-4" /></template>
-        <template v-if="filters.size" #suffix>
+        <template v-if="filters.length" #suffix>
           <div
-            class="flex h-5 w-5 items-center justify-center rounded bg-surface-gray-7 pt-[1px] text-2xs font-medium text-ink-white"
+            class="flex h-5 w-5 items-center justify-center rounded bg-surface-gray-10 pt-[1px] text-2xs-medium text-ink-base"
           >
-            {{ filters.size }}
+            {{ filters.length }}
           </div>
         </template>
       </Button>
     </template>
     <template #body="{ close }">
       <div
-        class="my-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl"
+        class="my-2 rounded-lg border border-gray-100 bg-surface-base shadow-xl"
       >
         <div class="min-w-[400px] p-2">
           <div
@@ -32,19 +32,19 @@
               </div>
               <div id="fieldname" class="!min-w-[140px] flex-1">
                 <Autocomplete
-                  :value="filter.fieldname"
-                  :options="fields"
-                  @change="filter.fieldname = $event.value"
                   placeholder="Filter by..."
+                  :options="fields"
+                  :value="filter.fieldname"
+                  @change="selectFilterField(i, $event)"
                 />
               </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)"
+                  :modelValue="filter.operator"
                   placeholder="Operator"
+                  @update:modelValue="updateFilterOperator(i, $event)"
                 />
               </div>
               <div id="value" class="!min-w-[140px] flex-1">
@@ -53,9 +53,9 @@
                     typeLink.includes(filter.field.fieldtype) &&
                     ['=', '!='].includes(filter.operator)
                   "
-                  :doctype="filter.field.options"
+                  :doctype="filter.field.options || ''"
                   :value="filter.value"
-                  @change="filter.value = $event.value"
+                  @change="updateFilterValueFromOption(i, $event)"
                   placeholder="Value"
                 />
                 <component
@@ -66,13 +66,18 @@
                       filter.field.options,
                     )
                   "
-                  v-model="filter.value"
+                  :modelValue="filter.value"
+                  @update:modelValue="updateFilterValue(i, $event)"
                   placeholder="Value"
                 />
               </div>
             </div>
             <div class="flex-shrink-0">
-              <Button variant="ghost" icon="lucide-x" @click="removeFilter(i)" />
+              <Button
+                variant="ghost"
+                icon="lucide-x"
+                @click="removeFilter(i)"
+              />
             </div>
           </div>
           <div
@@ -85,8 +90,8 @@
             <Autocomplete
               value=""
               :options="fields"
-              @change="(field) => addFilter(field.value)"
               placeholder="Filter by..."
+              @change="addFilterFromOption"
             >
               <template #target="{ togglePopover }">
                 <Button
@@ -115,17 +120,59 @@
   </NestedPopover>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { Autocomplete, FormControl } from '../../index'
 import { computed, h } from 'vue'
 import FilterIcon from './FilterIcon.vue'
 import NestedPopover from './NestedPopover.vue'
 import SearchComplete from './SearchComplete.vue'
+import type { AutocompleteOption } from '../Autocomplete/types'
+
+type FilterFieldtype =
+  | 'Check'
+  | 'Link'
+  | 'Float'
+  | 'Int'
+  | 'Select'
+  | 'Data'
+  | 'Long Text'
+  | 'Small Text'
+  | 'Text Editor'
+  | 'Text'
+  | 'JSON'
+  | 'Code'
+  | string
+
+interface DocField {
+  fieldname: string
+  label?: string
+  fieldtype: FilterFieldtype
+  options?: string
+  is_virtual?: boolean
+  [key: string]: any
+}
+
+type FilterOperator = '=' | '!=' | 'like' | 'not like' | '<' | '>' | '<=' | '>='
+type FilterValue = any
+type FiltersDict = Record<string, [FilterOperator, FilterValue]>
 
-const typeCheck = ['Check']
-const typeLink = ['Link']
-const typeNumber = ['Float', 'Int']
-const typeSelect = ['Select']
+interface FilterItem {
+  fieldname: string
+  operator: FilterOperator
+  value: FilterValue
+  field: DocField
+}
+
+type FieldOption = DocField & {
+  label: string
+  value: string
+  description: string
+}
+
+const typeCheck: FilterFieldtype[] = ['Check']
+const typeLink: FilterFieldtype[] = ['Link']
+const typeNumber: FilterFieldtype[] = ['Float', 'Int']
+const typeSelect: FilterFieldtype[] = ['Select']
 const typeString = [
   'Data',
   'Long Text',
@@ -136,17 +183,20 @@ const typeString = [
   'Code',
 ]
 
-const emits = defineEmits(['update:modelValue'])
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default: () => ({}),
-  },
-  docfields: {
-    type: Array,
-    default: () => [],
+const emits = defineEmits<{
+  'update:modelValue': [value: FiltersDict]
+}>()
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: FiltersDict
+    docfields?: DocField[]
+  }>(),
+  {
+    modelValue: () => ({}),
+    docfields: () => [],
   },
-})
+)
 
 const fields = computed(() => {
   const fields = props.docfields
@@ -162,13 +212,13 @@ const fields = computed(() => {
     })
     .map((field) => {
       return {
-        label: field.label,
+        label: field.label || field.fieldname,
         value: field.fieldname,
         description: field.fieldtype,
         ...field,
       }
     })
-  return fields
+  return fields as FieldOption[]
 })
 
 const filters = computed({
@@ -176,69 +226,69 @@ const filters = computed({
   set: (value) => emits('update:modelValue', makeFiltersDict(value)),
 })
 
-function makeFiltersList(filtersDict) {
+function makeFiltersList(filtersDict: FiltersDict): FilterItem[] {
   return Object.entries(filtersDict).map(([fieldname, [operator, value]]) => {
     const field = getField(fieldname)
     return {
       fieldname,
       operator,
       value,
-      field,
+      field: field!,
     }
   })
 }
 
-function getField(fieldname) {
+function getField(fieldname: string) {
   return fields.value.find((f) => f.fieldname === fieldname)
 }
 
-function makeFiltersDict(filtersList) {
-  return filtersList.reduce((acc, filter) => {
+function makeFiltersDict(filtersList: FilterItem[]) {
+  return filtersList.reduce<FiltersDict>((acc, filter) => {
     const { fieldname, operator, value } = filter
     acc[fieldname] = [operator, value]
     return acc
   }, {})
 }
 
-function getOperators(fieldtype) {
-  let options = []
+function getOperators(fieldtype: FilterFieldtype) {
+  let options: Array<{ label: string; value: FilterOperator }> = []
   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' },
+        { label: 'Equals', value: '=' as const },
+        { label: 'Not Equals', value: '!=' as const },
+        { label: 'Like', value: 'like' as const },
+        { label: 'Not Like', value: 'not like' as const },
       ],
     )
   }
   if (typeNumber.includes(fieldtype)) {
     options.push(
       ...[
-        { label: '<', value: '<' },
-        { label: '>', value: '>' },
-        { label: '<=', value: '<=' },
-        { label: '>=', value: '>=' },
-        { label: 'Equals', value: '=' },
-        { label: 'Not Equals', value: '!=' },
+        { label: '<', value: '<' as const },
+        { label: '>', value: '>' as const },
+        { label: '<=', value: '<=' as const },
+        { label: '>=', value: '>=' as const },
+        { label: 'Equals', value: '=' as const },
+        { label: 'Not Equals', value: '!=' as const },
       ],
     )
   }
   if (typeSelect.includes(fieldtype)) {
     options.push(
       ...[
-        { label: 'Equals', value: '=' },
-        { label: 'Not Equals', value: '!=' },
+        { label: 'Equals', value: '=' as const },
+        { label: 'Not Equals', value: '!=' as const },
       ],
     )
   }
   if (typeCheck.includes(fieldtype)) {
-    options.push(...[{ label: 'Equals', value: '=' }])
+    options.push(...[{ label: 'Equals', value: '=' as const }])
   }
   return options
 }
 
-function getDefaultOperator(fieldtype) {
+function getDefaultOperator(fieldtype: FilterFieldtype): FilterOperator {
   if (
     typeSelect.includes(fieldtype) ||
     typeLink.includes(fieldtype) ||
@@ -250,7 +300,7 @@ function getDefaultOperator(fieldtype) {
   return 'like'
 }
 
-function getValueSelector(fieldtype, options) {
+function getValueSelector(fieldtype: FilterFieldtype, options?: string) {
   if (typeSelect.includes(fieldtype) || typeCheck.includes(fieldtype)) {
     const _options =
       fieldtype == 'Check' ? ['Yes', 'No'] : getSelectOptions(options)
@@ -263,7 +313,7 @@ function getValueSelector(fieldtype, options) {
   }
 }
 
-function getDefaultValue(field) {
+function getDefaultValue(field: DocField) {
   if (typeSelect.includes(field.fieldtype)) {
     return getSelectOptions(field.options)[0]
   }
@@ -273,12 +323,13 @@ function getDefaultValue(field) {
   return ''
 }
 
-function getSelectOptions(options) {
+function getSelectOptions(options = '') {
   return options.split('\n')
 }
 
-function addFilter(fieldname) {
+function addFilter(fieldname: string) {
   const field = getField(fieldname)
+  if (!field) return
   const filter = {
     fieldname,
     operator: getDefaultOperator(field.fieldtype),
@@ -288,7 +339,60 @@ function addFilter(fieldname) {
   filters.value = [...filters.value, filter]
 }
 
-function removeFilter(index) {
+function addFilterFromOption(option: AutocompleteOption) {
+  const fieldname = getOptionValue(option)
+  if (fieldname) addFilter(String(fieldname))
+}
+
+function updateFilter(
+  index: number,
+  getNextFilter: (filter: FilterItem) => FilterItem,
+) {
+  filters.value = filters.value.map((filter, i) =>
+    i === index ? getNextFilter(filter) : filter,
+  )
+}
+
+function selectFilterField(index: number, option: AutocompleteOption) {
+  const fieldname = getOptionValue(option)
+  if (!fieldname) return
+
+  const field = getField(String(fieldname))
+  if (!field) return
+
+  updateFilter(index, () => ({
+    fieldname: String(fieldname),
+    field,
+    operator: getDefaultOperator(field.fieldtype),
+    value: getDefaultValue(field),
+  }))
+}
+
+function updateFilterOperator(index: number, option: unknown) {
+  const operator = getOptionValue(option)
+  if (!operator) return
+  updateFilter(index, (filter) => ({
+    ...filter,
+    operator: operator as FilterOperator,
+  }))
+}
+
+function updateFilterValueFromOption(index: number, option: unknown) {
+  updateFilterValue(index, getOptionValue(option))
+}
+
+function updateFilterValue(index: number, value: FilterValue) {
+  updateFilter(index, (filter) => ({ ...filter, value }))
+}
+
+function getOptionValue(option: unknown) {
+  if (option && typeof option === 'object' && 'value' in option) {
+    return (option as { value?: any }).value
+  }
+  return option
+}
+
+function removeFilter(index: number) {
   filters.value = filters.value.filter((_, i) => i !== index)
 }
 </script>

package/src/components/ListFilter/NestedPopover.vue

@@ -23,24 +23,31 @@
   </Popover>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
-import { createPopper } from '@popperjs/core'
+import { createPopper, type Instance, type Placement } from '@popperjs/core'
 import { nextTick, ref, onBeforeUnmount } from 'vue'
 
-const props = defineProps({
-  placement: {
-    type: String,
-    default: 'bottom-start',
+const props = withDefaults(
+  defineProps<{
+    placement?: Placement
+  }>(),
+  {
+    placement: 'bottom-start',
   },
-})
+)
+
+type HeadlessElementRef = {
+  el: HTMLElement
+}
 
-const reference = ref(null)
-const popover = ref(null)
+const reference = ref<HeadlessElementRef | null>(null)
+const popover = ref<HeadlessElementRef | null>(null)
 
-let popper = ref(null)
+let popper = ref<Instance | null>(null)
 
 function setupPopper() {
+  if (!reference.value?.el || !popover.value?.el) return
   if (!popper.value) {
     popper.value = createPopper(reference.value.el, popover.value.el, {
       placement: props.placement,

package/src/components/ListFilter/SearchComplete.vue

@@ -3,46 +3,35 @@
     placeholder="Select an option"
     :options="options"
     :value="selection"
-    @update:query="(q) => onUpdateQuery(q)"
-    @change="(v) => (selection = v)"
+    @update:query="onUpdateQuery"
+    @change="onChange"
   />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { Autocomplete, createListResource } from '../../index'
 import { computed, ref, watch } from 'vue'
+import type { Option } from '../Autocomplete/types'
 
-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,
+type SearchResult = Record<string, any>
+
+const props = withDefaults(
+  defineProps<{
+    value?: string
+    doctype: string
+    searchField?: string
+    labelField?: string
+    valueField?: string
+    pageLength?: number
+  }>(),
+  {
+    value: '',
+    searchField: 'name',
+    labelField: 'name',
+    valueField: 'name',
+    pageLength: 10,
   },
-})
+)
 
 watch(
   () => props.doctype,
@@ -60,20 +49,24 @@ const r = createListResource({
   fields: [props.labelField, props.searchField, props.valueField],
   onSuccess: () => {
     selection.value = props.value
-      ? options.value.find((o) => o.value === props.value)
+      ? (options.value.find((o) => o.value === props.value) ?? null)
       : null
   },
 })
-const options = computed(
+const options = computed<Option[]>(
   () =>
-    r.data?.map((result) => ({
+    r.data?.map((result: SearchResult) => ({
       label: result[props.labelField],
       value: result[props.valueField],
     })) || [],
 )
-const selection = ref(null)
+const selection = ref<Option | null>(null)
+
+function onChange(value: Option) {
+  selection.value = value
+}
 
-function onUpdateQuery(query) {
+function onUpdateQuery(query: string) {
   r.update({
     filters: {
       [props.searchField]: ['like', `%${query}%`],

package/src/components/ListItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center justify-between py-3">
     <div>
-      <h3 class="text-base font-medium text-gray-900">
+      <h3 class="text-base-medium text-gray-900">
         {{ title }}
       </h3>
       <div class="mt-1" v-if="secondaryText || $slots.subtitle">

package/src/components/ListView/ListEmptyState.vue

@@ -3,7 +3,7 @@
     class="flex h-full w-full flex-col items-center justify-center text-base"
   >
     <slot>
-      <div class="text-xl font-medium text-ink-gray-8 mt-6">{{ list.options.emptyState.title }}</div>
+      <div class="text-2xl-medium text-ink-gray-8 mt-6">{{ list.options.emptyState.title }}</div>
       <div class="mt-1 text-base text-ink-gray-5">
         {{ list.options.emptyState.description }}
       </div>

package/src/components/ListView/ListGroupHeader.vue

@@ -16,13 +16,13 @@
           :is="list.slots['group-header']"
           v-bind="{ group }"
         />
-        <span v-else class="text-ink-gray-8 text-base font-medium leading-6">
+        <span v-else class="text-ink-gray-8 text-base-medium leading-6">
           {{ group.group }}
         </span>
       </div>
     </slot>
   </div>
-  <div class="mx-2 h-px border-t border-outline-gray-modals"></div>
+  <div class="mx-2 h-px border-t border-outline-elevation-2"></div>
 </template>
 <script setup>
 import { inject } from 'vue'

package/src/components/ListView/ListRow.vue

@@ -8,7 +8,7 @@
       isHoverable && !row.disabled
         ? isSelected || isActive
           ? 'hover:bg-surface-gray-3'
-          : 'hover:bg-surface-menu-bar'
+          : 'hover:bg-surface-sidebar'
         : '',
       row.disabled ? 'pointer-events-none' : '',
     ]"

package/src/components/ListView/ListSelectBanner.vue

@@ -12,7 +12,7 @@
       class="absolute inset-x-0 bottom-6 mx-auto w-max text-base"
     >
       <div
-        class="flex min-w-[596px] items-center gap-3 rounded-lg bg-surface-white px-4 py-2 shadow-2xl"
+        class="flex min-w-[596px] items-center gap-3 rounded-lg bg-surface-base px-4 py-2 shadow-2xl"
         :class="$attrs.class"
       >
         <slot