frappe-ui 0.1.276 → 0.1.277

package/frappe/drive/components/MoveDialog.vue

@@ -443,13 +443,13 @@ function closeEntity(name) {
 }
 
 const moveFile = async () => {
-  open.value = false
   emit('success')
   await move.submit({
     entity_names: props.entities.map((obj) => obj.name),
     new_parent: selected.value,
     team: chosenTeam.value,
   })
+  open.value = false
   emit('complete')
 }
 </script>

package/frappe/drive/components/RenameDialog.vue

@@ -8,7 +8,7 @@
         {
           label: 'Confirm',
           variant: 'solid',
-          disabled: !newTitle || newTitle === entity.title,
+          disabled: !newTitle || newTitle === entity.title || rename.loading,
           onClick: submit,
         },
       ],
@@ -42,7 +42,7 @@ import { Dialog } from '../../../src'
 import { rename } from '../js/resources'
 
 const props = defineProps({ entity: Object, modelValue: String })
-const emit = defineEmits(['update:modelValue', 'success'])
+const emit = defineEmits(['success', 'complete'])
 const dialogType = defineModel()
 const open = ref(true)
 
@@ -64,10 +64,18 @@ if (props.entity.is_group || props.entity.doc || props.entity.is_link) {
 const submit = () => {
   const formattedTitle =
     newTitle.value + (file_ext.value ? '.' + file_ext.value : '')
-  rename.submit({
-    entity_name: props.entity.name,
-    new_title: formattedTitle,
-  })
+  rename.submit(
+    {
+      entity_name: props.entity.name,
+      new_title: formattedTitle,
+    },
+    {
+      onSuccess: () => {
+        open.value = false
+        emit('complete')
+      },
+    },
+  )
   emit('success', {
     name: props.entity.name,
     title: formattedTitle,

package/frappe/drive/components/TagInput/TagInput.vue

@@ -120,7 +120,7 @@ function removeTag(tag: string) {
 [data-state='active'] {
   background: var(--surface-gray-1);
 }
-[aria-label='Show popup'] {
+:deep([aria-label='Show popup']) {
   display: none;
 }
 </style>

package/frappe/drive/js/resources.js

@@ -1,5 +1,6 @@
 import { createResource, toast } from '../../../src'
-import { prettyData } from '../js/utils'
+import { prettyData, openEntity } from '../js/utils'
+
 export const getTeams = createResource({
   url: 'drive.api.permissions.get_teams',
   params: {
@@ -39,9 +40,10 @@ export const updateMoved = (team, new_parent, special) => {
 export const move = createResource({
   url: 'drive.api.files.move',
   onSuccess(data) {
+    console.log(data)
     toast.success('Moved to ' + data.title, {
       action: {
-        label: 'Go',
+        label: 'Go to folder',
         onClick: () => {
           if (!data.special)
             openEntity({

package/frappe/drive/js/utils.js

@@ -26,7 +26,7 @@ export function getFileLink(entity, copy = true) {
   }
   if (!copy) return link
   try {
-    copyToClipboard(link).then(() => toast.success('Copied to your clipboard!'))
+    copyToClipboard(link).then(() => toast.success('Copied to your clipboard.'))
   } catch (err) {
     console.error('Failed to copy link:', err)
   }
@@ -108,3 +108,34 @@ export const formatDate = (date) => {
 
   return `${formattedDate}, ${formattedTime}`
 }
+
+
+export const openEntity = (entity, new_tab = false) => {
+  if (new_tab) {
+    return window.open(getFileLink(entity, false), '_blank')
+  }
+
+  if (entity.name === '') {
+    if (entity.is_private) window.location.href = '/drive/'
+    else window.location.href = '/drive/t/' + entity.team
+  } else if (entity.is_group) {
+    window.location.href = '/drive/d/' + entity.name
+  } else if (entity.is_link) {
+    const origin = new URL(entity.path).origin
+    if (
+      confirm(
+        `This will open an external link to ${origin} - are you sure you want to open?`,
+      )
+    )
+      window.open(entity.path, '_blank')
+  } else if (entity.mime_type === 'frappe/slides') {
+    window.location.href = '/slides/presentation/' + entity.path
+  } else if (
+    entity.mime_type === 'frappe_doc' ||
+    entity.mime_type === 'text/markdown'
+  ) {
+    window.location.href = '/writer/w/' + entity.name
+  } else {
+    window.location.href = '/drive/f/' + entity.name
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.276",
+  "version": "0.1.277",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,

package/src/components/Combobox/Combobox.cy.ts

@@ -90,4 +90,25 @@ describe('Combobox', () => {
     cy.root().click(0, 0, { force: true })
     cy.get('@onBlurSpy').should('have.been.called')
   })
+
+  it('custom value', () => {
+    cy.mount(Combobox, {
+      props: {
+        options,
+        allowCustomValue: true,
+        openOnFocus: true,
+        'onUpdate:modelValue': cy.spy().as('onUpdate'),
+      },
+    })
+
+    cy.get('[role=option]').should('have.length', 0)
+    cy.get('input').focus()
+    cy.get('[role=option]').should('have.length', options.length)
+
+    cy.get('input').type('..')
+    cy.get('[role=option]').should('have.length', 1)
+    cy.get('[role=option]:first').should('contain.text', 'Create ".."')
+    cy.get('[role=option]:first').click()
+    cy.get('@onUpdate').should('have.been.calledWith', '..')
+  })
 })

package/src/components/Combobox/Combobox.vue

@@ -54,7 +54,6 @@ const emit = defineEmits<{
   input: (value: string) => void
 }>()
 
-
 const searchTerm = ref(getDisplayValue(props.modelValue))
 const internalModelValue = ref(props.modelValue)
 const isOpen = ref(false)
@@ -76,10 +75,13 @@ watch(
 )
 
 const onUpdateModelValue = (value: string | null) => {
-  const selectedOpt = value
+  let selectedOpt = value
     ? allOptionsFlat.value.find((opt) => getKey(opt) === value) || null
     : null
 
+  selectedOpt =
+    !selectedOpt && props.allowCustomValue && value ? value : selectedOpt
+
   if (selectedOpt && isCustomOption(selectedOpt)) {
     const context = { searchTerm: lastSearchTerm.value }
     selectedOpt.onClick(context)
@@ -311,9 +313,11 @@ defineSlots<{
   prefix?: () => any
 
   /** Custom slot for individual options, only used if the option has `slotName` */
-  [slotName: string]: (props: { option: SimpleOption; searchTerm: string }) => any
+  [slotName: string]: (props: {
+    option: SimpleOption
+    searchTerm: string
+  }) => any
 }>()
-
 </script>
 
 <template>
@@ -363,11 +367,29 @@ defineSlots<{
             class="max-h-60 overflow-auto pb-1.5"
             :class="{ 'px-1.5 pt-1.5': !isGroup(filteredOptions[0]) }"
           >
+            <ComboboxItem
+              v-if="
+                filteredOptions?.length == 0 && allowCustomValue && searchTerm
+              "
+              :value="searchTerm"
+              class="text-base leading-none text-ink-gray-7 rounded flex items-center h-7 px-2.5 py-1.5 select-none data-[highlighted]:bg-surface-gray-3"
+            >
+              <span class="flex items-center gap-2">
+                Create "{{ searchTerm }}"
+              </span>
+            </ComboboxItem>
+
             <ComboboxEmpty
               class="text-ink-gray-5 text-base text-center py-1.5 px-2.5"
+              v-else
             >
-              {{ searchTerm ? `No results found for "${searchTerm}"` : "No results found" }}
+              {{
+                searchTerm
+                  ? `No results found for "${searchTerm}"`
+                  : 'No results found'
+              }}
             </ComboboxEmpty>
+
             <template
               v-for="(optionOrGroup, index) in filteredOptions"
               :key="index"

package/src/components/Combobox/stories/CustomValue.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Combobox } from 'frappe-ui'
+
+const value = ref('')
+
+const options = ['John Doe', 'Jane Doe', 'John Smith', 'Jane Smith']
+</script>
+
+<template>
+  <Combobox
+    v-model="value"
+    :options="options"
+    placeholder="Select an option"
+    show-cancel
+    :allowCustomValue="true"
+  />
+
+  <div class="text-sm text-gray-600">Selected: {{ value || 'None' }}</div>
+</template>

package/src/components/Combobox/types.ts

@@ -51,4 +51,7 @@ export interface ComboboxProps {
 
   /** Dropdown placement relative to the input */
   placement?: 'start' | 'center' | 'end'
+
+  /** Custom Value if no results found & based on searchterm*/
+  allowCustomValue?: boolean
 }

package/src/components/ListView/ListRow.vue

@@ -4,17 +4,21 @@
     :class="[
       roundedClass,
       isSelected || isActive ? 'bg-surface-gray-2' : '',
-      isHoverable ? 'cursor-pointer' : '',
-      isHoverable
+      isHoverable && !row.disabled ? 'cursor-pointer' : '',
+      isHoverable && !row.disabled
         ? isSelected || isActive
           ? 'hover:bg-surface-gray-3'
           : 'hover:bg-surface-menu-bar'
         : '',
+      row.disabled ? 'pointer-events-none' : '',
     ]"
     class="flex flex-col transition-all duration-300 ease-in-out"
     v-bind="{
       ...getLinkBindings(),
       onClick: onRowClick,
+      ...(row.disabled
+        ? { 'aria-disabled': 'true', tabindex: -1 }
+        : {}),
     }"
   >
     <component
@@ -23,6 +27,10 @@
     >
       <div
         class="grid items-center gap-4 px-2"
+        :class="{
+          'cursor-not-allowed': row.disabled,
+          'opacity-50': row.disabled,
+        }"
         :style="{
           height: rowHeight,
           gridTemplateColumns: getGridTemplateColumns(
@@ -39,16 +47,19 @@
         >
           <Checkbox
             :modelValue="isSelected"
+            :disabled="row.disabled"
             class="cursor-pointer duration-300"
             @click.stop="handleCheckboxClick"
           />
         </div>
+
         <div
           v-for="(column, i) in list.columns"
           :key="column.key"
           :class="[
             alignmentMap[column.align],
             i == 0 ? 'text-ink-gray-9' : 'text-ink-gray-7',
+            'overflow-x-hidden',
           ]"
         >
           <slot v-bind="{ idx: i, column, item: row[column.key], isActive }">
@@ -72,6 +83,7 @@
           </slot>
         </div>
       </div>
+
       <div
         v-if="!isLastRow"
         class="h-px border-t"
@@ -107,17 +119,16 @@ const rowRoute = computed(
 
 const isExternalRoute = computed(() => {
   if (!rowRoute.value) return false
-  // Check if it's a URL (string starting with http/https or /)
   return typeof rowRoute.value === 'string' && rowRoute.value.startsWith('http')
 })
 
 const getLinkComponent = () => {
-  if (!rowRoute.value) return 'div'
+  if (!rowRoute.value || props.row.disabled) return 'div'
   return isExternalRoute.value ? 'a' : 'router-link'
 }
 
 const getLinkBindings = () => {
-  if (!rowRoute.value) return {}
+  if (!rowRoute.value || props.row.disabled) return {}
   return isExternalRoute.value
     ? {
         href: rowRoute.value,
@@ -136,6 +147,7 @@ const isLastRow = computed(() => {
 const isSelected = computed(() => {
   return list.value.selections.has(props.row[list.value.rowKey])
 })
+
 const isActive = computed(
   () =>
     list.value.options.enableActive &&
@@ -155,6 +167,7 @@ const rowHeight = computed(() => {
 
 const roundedClass = computed(() => {
   if (!isSelected.value) return 'rounded'
+
   const selections = [...list.value.selections]
   let groups = list.value.rows[0]?.group
     ? list.value.rows.map((k) => k.rows)
@@ -163,15 +176,20 @@ const roundedClass = computed(() => {
   for (let rows of groups) {
     let currentIndex = rows.findIndex((k) => k == props.row)
     if (currentIndex === -1) continue
+
     let atBottom = !selections.includes(rows[currentIndex + 1]?.name)
     let atTop = !selections.includes(rows[currentIndex - 1]?.name)
+
     return (atBottom ? 'rounded-b ' : '') + (atTop ? 'rounded-t' : '')
   }
 })
 
 const onRowClick = (event) => {
+  if (props.row.disabled) return
+
   if (list.value.options.onRowClick)
     list.value.options.onRowClick(props.row, event)
+
   if (list.value.activeRow.value === props.row.name) {
     list.value.activeRow.value = null
   } else {
@@ -180,22 +198,31 @@ const onRowClick = (event) => {
 }
 
 const handleCheckboxClick = (event) => {
+  if (props.row.disabled) return
+
   const value = props.row[list.value.rowKey]
+
   if (event.shiftKey && !list.value.selections.has(value)) {
     const lastSelected = Array.from(list.value.selections).pop()
+
     const rows = list.value.rows.find((k) => k.group)
       ? list.value.rows.reduce((acc, curr) => acc.concat(curr.rows), [])
       : list.value.rows
+
     const lastIndex = rows.findIndex(
       (k) => lastSelected === k[list.value.rowKey]
     )
     const curIndex = rows.findIndex((k) => value === k[list.value.rowKey])
+
     const start = Math.min(lastIndex, curIndex)
     const end = Math.max(lastIndex, curIndex)
+
     for (let i = start; i <= end; i++) {
+      if (rows[i].disabled) continue
       list.value.selections.add(rows[i][list.value.rowKey])
     }
   } else {
+    if (props.row.disabled) return
     list.value.toggleRow(value)
   }
 }

package/src/components/ListView/ListView.vue

@@ -1,10 +1,6 @@
 <template>
   <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"
-      :style="$attrs.style"
-    >
+    <div class="flex w-max min-w-full flex-col overflow-y-hidden" :class="$attrs.class" :style="$attrs.style">
       <slot v-bind="{ showGroupedRows, selectable }">
         <ListHeader />
         <template v-if="props.rows.length">
@@ -17,6 +13,7 @@
     </div>
   </div>
 </template>
+
 <script setup>
 import ListEmptyState from './ListEmptyState.vue'
 import ListHeader from './ListHeader.vue'
@@ -103,13 +100,14 @@ let _options = computed(() => {
 
 const allRowsSelected = computed(() => {
   if (!props.rows.length) return false
-  if (showGroupedRows.value) {
-    return (
-      selections.size ===
-      props.rows.reduce((acc, row) => acc + row.rows.length, 0)
-    )
-  }
-  return selections.size === props.rows.length
+
+  const rows = showGroupedRows.value
+    ? props.rows.flatMap(r => r.rows)
+    : props.rows
+
+  const total = rows.filter(r => !r.disabled).length
+
+  return total > 0 && selections.size === total
 })
 
 const selectable = computed(() => {
@@ -123,7 +121,7 @@ let showGroupedRows = computed(() => {
 })
 
 function toggleRow(row) {
-  if (!selections.delete(row)) {
+  if (!selections.delete(row) && !row.disabled) {
     selections.add(row)
   }
 }
@@ -135,11 +133,19 @@ function toggleAllRows(select) {
   }
   if (showGroupedRows.value) {
     props.rows.forEach((row) => {
-      row.rows.forEach((r) => selections.add(r[props.rowKey]))
+      row.rows.forEach((r) => {
+        if (!r.disabled) {
+          selections.add(r[props.rowKey])
+        }
+      })
     })
     return
   }
-  props.rows.forEach((row) => selections.add(row[props.rowKey]))
+  props.rows.forEach((row) => {
+    if (!row.disabled) {
+      selections.add(row[props.rowKey])
+    }
+  })
 }
 
 provide(

package/src/components/ListView/stories/Disabled.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { h, reactive } from 'vue'
+
+import { Avatar, ListView } from 'frappe-ui'
+
+const columns = reactive([
+  {
+    label: 'Name',
+    key: 'name',
+    width: 3,
+    getLabel: ({ row }) => row.name,
+    prefix: ({ row }) =>
+      h(Avatar, { shape: 'circle', image: row.user_image, size: 'sm' }),
+  },
+  { label: 'Email', key: 'email', width: '200px' },
+  { label: 'Role', key: 'role' },
+  { label: 'Status', key: 'status' },
+])
+
+const rows = [
+  {
+    id: 1,
+    disabled: true,
+    name: 'John Doe',
+    email: 'john@doe.com',
+    status: 'Active',
+    role: 'Developer',
+    user_image: 'https://avatars.githubusercontent.com/u/499550',
+  },
+  {
+    id: 2,
+    name: 'Jane Doe',
+    email: 'jane@doe.com',
+    status: 'Inactive',
+    role: 'HR',
+    user_image: 'https://avatars.githubusercontent.com/u/499120',
+  },
+]
+</script>
+
+<template>
+  <ListView
+    class="h-[150px]"
+    :columns="columns"
+    :rows="rows"
+    :options="{
+      getRowRoute: (row) => ({
+        name: 'User',
+        params: { userId: row.id },
+      }),
+      selectable: true,
+      showTooltip: true,
+      resizeColumn: true,
+    }"
+    row-key="id"
+  />
+</template>

package/src/components/Spinner.vue

@@ -0,0 +1,7 @@
+<script setup>
+import LucideLoaderCircle from '~icons/lucide/loader-circle'
+</script>
+
+<template>
+  <LucideLoaderCircle class='animate-spin size-4' />
+</template>

package/src/index.ts

@@ -28,6 +28,7 @@ export { default as ListItem } from './components/ListItem.vue'
 export { default as LoadingIndicator } from './components/LoadingIndicator.vue'
 export { default as LoadingText } from './components/LoadingText.vue'
 export * from './components/Progress'
+export { default as Spinner } from './components/Spinner.vue'
 export * from './components/Popover'
 export * from './components/Rating'
 export { default as Resource } from './components/Resource.vue'
@@ -78,6 +79,7 @@ export { default as NumberChart } from './components/Charts/NumberChart.vue'
 export { default as DonutChart } from './components/Charts/DonutChart.vue'
 export { default as FunnelChart } from './components/Charts/FunnelChart.vue'
 export { default as ECharts } from './components/Charts/ECharts.vue'
+export { default as useAxisChartOptions } from './components/Charts/axisChartOptions'
 
 // directives
 export { default as onOutsideClickDirective } from './directives/onOutsideClick'