frappe-ui 0.1.209 → 0.1.211

package/frappe/Link/Link.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="flex flex-col gap-1.5" :class="attrs.class" :style="attrs.style">
+    <FormLabel v-if="label" :label="label" size="sm" :required="required" />
+    <Combobox
+      v-model="model"
+      :placeholder="placeholder || `Select ${doctype}`"
+      :options="linkOptions"
+      @input="handleInputChange"
+      @focus="() => loadOptions('')"
+      :open-on-focus="true"
+      v-bind="attrsWithoutClassStyle"
+    >
+      <template #create-new="{ searchTerm }">
+        <LucidePlus class="size-4 mr-2" />
+        <span class="font-medium"> Create new {{ doctype }}</span>
+      </template>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch, useAttrs, computed } from 'vue'
+import { Combobox, type ComboboxOption } from '../../src/components/Combobox'
+import FormLabel from '../../src/components/FormLabel.vue'
+import debounce from '../../src/utils/debounce'
+// @ts-ignore - Vue SFC without explicit types
+import { createResource } from '../../src/resources'
+import { frappeRequest } from '../../src/utils/frappeRequest'
+import type { LinkProps, SelectOption } from './types'
+import LucidePlus from '~icons/lucide/plus'
+
+const props = withDefaults(defineProps<LinkProps>(), {
+  label: '',
+  filters: () => ({}),
+})
+const model = defineModel<string | null>({ default: '' })
+const emit = defineEmits<{
+  (e: 'create', searchTerm: string): void
+}>()
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs() as Record<string, any>
+const attrsWithoutClassStyle = computed(() => {
+  return Object.fromEntries(
+    Object.entries(attrs).filter(([key]) => key !== 'class' && key !== 'style'),
+  )
+})
+
+const options = createResource({
+  url: 'frappe.desk.search.search_link',
+  params: {
+    doctype: props.doctype,
+    txt: '',
+    filters: props.filters,
+  },
+  method: 'POST',
+  resourceFetcher: frappeRequest,
+  transform: (data: SelectOption[]) => {
+    return data.map((doc) => ({
+      label: doc.label || doc.value,
+      value: doc.value,
+    }))
+  },
+})
+
+const createNewOption = {
+  type: 'custom' as const,
+  key: 'create_new',
+  label: 'Create New',
+  slotName: 'create-new',
+  condition: () => true,
+  onClick: ({ searchTerm }) => emit('create', searchTerm),
+} as ComboboxOption
+
+const linkOptions = computed(() => {
+  if (props.allowCreate) {
+    return [...(options.data || []), createNewOption]
+  }
+  return options.data
+})
+
+const loadOptions = (txt: string = '') => {
+  options.update({
+    params: {
+      txt,
+      doctype: props.doctype,
+      filters: props.filters,
+    },
+  })
+  options.reload()
+}
+
+const handleInputChange = debounce((inputString: string) => {
+  loadOptions(inputString || '')
+}, 300)
+
+watch([() => props.doctype, () => props.filters], () => loadOptions(''), {
+  immediate: true,
+  deep: true,
+})
+</script>

package/frappe/Link/index.ts

@@ -0,0 +1,2 @@
+export { default as Link } from './Link.vue'
+export type { LinkProps } from './types'

package/frappe/Link/types.ts

@@ -0,0 +1,10 @@
+export interface LinkProps {
+  doctype: string
+  label?: string
+  placeholder?: string
+  filters?: Record<string, string | [string, string]>
+  required?: boolean
+  allowCreate?: boolean
+}
+
+export type SelectOption = { value: string; label: string }

package/frappe/index.js

@@ -1,3 +1,6 @@
+// components dependent on frappe backend
+export * from './Link'
+
 // help components
 export { default as HelpModal } from './Help/HelpModal.vue'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.209",
+  "version": "0.1.211",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",

package/src/components/Autocomplete/Autocomplete.vue

@@ -309,11 +309,8 @@ const selectedValue = computed({
   set(val) {
     query.value = ''
     if (val && !props.multiple) showOptions.value = false
-    if (!props.multiple) {
-      emit('update:modelValue', val)
-      return
-    }
     emit('update:modelValue', val)
+    emit('change', val)
   },
 })
 

package/src/components/Combobox/Combobox.vue

@@ -38,6 +38,7 @@ const emit = defineEmits([
   'update:selectedOption',
   'focus',
   'blur',
+  'input',
 ])
 
 const searchTerm = ref(getDisplayValue(props.modelValue))
@@ -238,6 +239,7 @@ const handleInputChange = (event: Event) => {
     internalModelValue.value = null
     emit('update:modelValue', null)
   }
+  emit('input', searchTerm.value)
 }
 
 const handleOpenChange = (open: boolean) => {

package/src/components/TextEditor/TextEditor.vue

@@ -56,6 +56,7 @@ import TaskItem from '@tiptap/extension-task-item'
 import TaskList from '@tiptap/extension-task-list'
 import NamedColorExtension from './extensions/color'
 import NamedHighlightExtension from './extensions/highlight'
+import improvedList from './extensions/list-extension'
 
 import { MentionExtension } from './extensions/mention'
 import TextEditorFixedMenu from './TextEditorFixedMenu.vue'
@@ -165,16 +166,7 @@ onMounted(() => {
       }).extend({
         addKeyboardShortcuts() {
           return {
-            Backspace: () => {
-              const selection = this.editor.view.state.selection
-              const { $from } = selection
-              if (
-                !this.editor.can().liftListItem('listItem') ||
-                $from.parentOffset > 0 || !selection.empty
-              )
-                return false
-              return this.editor.commands.liftListItem('listItem')
-            },
+            Backspace: () => improvedList(this.editor),
           }
         },
       }),

package/src/components/TextEditor/extensions/list-extension.ts

@@ -0,0 +1,32 @@
+import { Selection } from '@tiptap/pm/state'
+import { Editor } from '@tiptap/core'
+
+export default function improvedList(editor: Editor) {
+  const selection = editor.view.state.selection
+  const { $from } = selection
+  if ($from.parentOffset > 0 || !selection.empty) return false
+
+  let nodeBefore = editor.view.state.doc.resolve($from.pos - 1).nodeBefore
+  if (!nodeBefore)
+    nodeBefore = editor.state.doc.resolve($from.before() - 1).nodeBefore
+  console.log(nodeBefore)
+  if (nodeBefore && ['bulletList', 'orderedList', 'listItem'].includes(nodeBefore.type.name)) {
+    // Join item with the last bullet item
+    editor
+      .chain()
+      .command(({ tr }) => {
+        const paragraphContent = $from.parent.content
+        const inList = nodeBefore.type.name === 'listItem'
+        console.log(inList)
+        tr.delete($from.before() - (inList ? 1 : 0), $from.after())
+        const insertPos = $from.pos - 4
+        tr.insert(insertPos, paragraphContent)
+        tr.setSelection(Selection.near(tr.doc.resolve(insertPos)))
+      })
+      .run()
+    return true
+  }
+
+  if (editor.can().liftListItem('listItem'))
+    return editor.commands.liftListItem('listItem')
+}

package/src/index.ts

@@ -22,7 +22,6 @@ export * from './components/FormControl'
 export { default as FormLabel } from './components/FormLabel.vue'
 export { default as GreenCheckIcon } from './components/GreenCheckIcon.vue'
 export { default as Input } from './components/Input.vue'
-export { default as Link } from './components/Link.vue'
 export { default as ListItem } from './components/ListItem.vue'
 export { default as LoadingIndicator } from './components/LoadingIndicator.vue'
 export { default as LoadingText } from './components/LoadingText.vue'

package/src/components/Link.vue

@@ -1,28 +0,0 @@
-<template>
-  <component
-    :is="isExternal ? 'a' : 'router-link'"
-    v-bind="attributes"
-    class="cursor-pointer text-blue-500 hover:text-blue-600"
-  >
-    <slot></slot>
-  </component>
-</template>
-
-<script>
-export default {
-  props: ['to'],
-  computed: {
-    attributes() {
-      return {
-        ...this.$attrs,
-        target: this.isExternal ? '_blank' : null,
-        to: !this.isExternal ? this.to : undefined,
-        href: this.isExternal ? this.to : undefined,
-      }
-    },
-    isExternal() {
-      return this.to.startsWith('http')
-    },
-  },
-}
-</script>