frappe-ui 0.1.203 → 0.1.205

package/package.json

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

package/src/components/Checkbox/Checkbox.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inline-flex space-x-2 rounded transition bg-surface-white"
+    class="inline-flex space-x-2 rounded transition"
     :class="{
       'px-2.5 py-1.5': padding && size === 'sm',
       'px-3 py-2': padding && size === 'md',
@@ -9,7 +9,7 @@
     }"
   >
     <input
-      class="rounded-sm mt-[1px]"
+      class="rounded-sm mt-[1px] bg-surface-white"
       :class="inputClasses"
       type="checkbox"
       :disabled="disabled"

package/src/components/Dialog/Dialog.vue

@@ -9,6 +9,7 @@
         <div
           class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
           :class="dialogPositionClasses"
+          :style="dialogPositionStyles"
         >
           <DialogContent
             class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-left align-middle shadow-xl dialog-content focus-visible:outline-none"
@@ -216,6 +217,8 @@ const icon = computed(() => {
 })
 
 const dialogPositionClasses = computed(() => {
+  if (props.options?.paddingTop) return ''
+
   const position = props.options?.position || 'center'
   const classMap: Record<string, string> = {
     center: 'justify-center',
@@ -224,6 +227,13 @@ const dialogPositionClasses = computed(() => {
   return classMap[position]
 })
 
+const dialogPositionStyles = computed(() => {
+  if (props.options?.paddingTop) {
+    return { paddingTop: props.options.paddingTop }
+  }
+  return {}
+})
+
 const dialogIconBgClasses = computed(() => {
   const appearance = icon.value?.appearance
   if (!appearance) return 'bg-surface-gray-2'

package/src/components/Dialog/types.ts

@@ -25,6 +25,7 @@ type DialogOptions = {
   actions?: Array<DialogAction>
   // default position = 'center'
   position?: 'top' | 'center'
+  paddingTop?: string | number
 }
 
 export type DialogActionContext = {

package/src/components/TextEditor/LinkPopup.vue

@@ -0,0 +1,104 @@
+<template>
+  <div
+    class="p-2 w-72 flex items-center gap-2 bg-surface-white shadow-xl rounded"
+  >
+    <TextInput
+      v-if="edit"
+      ref="input"
+      type="text"
+      class="w-full"
+      placeholder="https://example.com"
+      v-model="_href"
+      @keydown.enter="submitLink"
+      @keydown.esc="$emit('close')"
+    />
+    <a
+      v-else
+      class="text-ink-gray-700 underline text-sm flex-1 truncate pl-1"
+      :title="_href"
+      :href="_href"
+      target="_blank"
+    >
+      {{ _href }}
+    </a>
+    <div class="shrink-0 flex items-center gap-1.5 ml-auto">
+      <template v-if="edit">
+        <Button
+          @click="submitLink"
+          tooltip="Submit"
+          :icon="LucideCheck"
+          variant="subtle"
+        />
+        <Button
+          @click="props.href ? (edit = false) : $emit('updateHref', '')"
+          tooltip="Exit"
+          :icon="LucideX"
+          variant="subtle"
+        />
+      </template>
+      <template v-else>
+        <Button
+          @click="copyLink"
+          tooltip="Copy"
+          :icon="LucideCopy"
+          variant="subtle"
+        />
+        <Button
+          @click="edit = true"
+          tooltip="Edit"
+          :icon="LucidePencil"
+          variant="subtle"
+        />
+        <Button
+          tooltip="Remove"
+          variant="subtle"
+          @click="$emit('updateHref', '')"
+          :icon="Link2Off"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, useTemplateRef, nextTick } from 'vue'
+import Button from '../Button/Button.vue'
+import TextInput from '../TextInput/TextInput.vue'
+import LucideCopy from '~icons/lucide/copy'
+import LucideCheck from '~icons/lucide/check'
+import LucidePencil from '~icons/lucide/pencil'
+import LucideX from '~icons/lucide/x'
+import Link2Off from '~icons/lucide/link-2-off'
+import { isValidUrl } from '../../utils/url-validation'
+
+const props = defineProps<{
+  href: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'updateHref', href: string): void
+  (e: 'close'): void
+}>()
+
+const _href = ref(props.href)
+const input = useTemplateRef('input')
+const edit = ref(props.href === '')
+
+const submitLink = () => {
+  if (_href.value === '' || isValidUrl(_href.value)) {
+    emit('updateHref', _href.value)
+  }
+}
+
+const copyLink = async () => {
+  if (_href.value) await navigator.clipboard.writeText(_href.value)
+}
+
+onMounted(async () => {
+  await nextTick()
+  if (input.value?.el) {
+    input.value.el.focus()
+    input.value.el.select()
+  }
+})
+</script>

package/src/components/TextEditor/link-extension.ts

@@ -4,7 +4,7 @@ import tippy, { type Instance as TippyInstance } from 'tippy.js'
 import { getMarkRange, Range, Editor } from '@tiptap/core'
 import { MarkType, Mark as ProseMirrorMark } from '@tiptap/pm/model'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
-import EditLink from './EditLink.vue'
+import LinkPopup from './LinkPopup.vue'
 import { linkPasteHandler } from './linkPasteHandler'
 
 declare module '@tiptap/core' {
@@ -50,10 +50,8 @@ export const LinkExtension = Link.extend({
             const markRange = getMarkRange($pos, this.type)
             if (markRange) {
               range = markRange
-              mark = doc
-                .resolve(markRange.from)
-                .marks()
-                .find((m) => m.type === this.type)
+              const node = doc.nodeAt($pos.pos)
+              if(node) mark = node.marks.find((m) => m.type === this.type)
 
               // Select the link text
               editor
@@ -147,7 +145,6 @@ export const LinkExtension = Link.extend({
 
   addProseMirrorPlugins() {
     let plugins = this.parent?.() || []
-
     plugins.push(
       linkPasteHandler({
         editor: this.editor,
@@ -162,7 +159,23 @@ export const LinkExtension = Link.extend({
         type: this.type,
       }),
     )
-
+    plugins.push(
+      new Plugin({
+        props: {
+          handleClick: (view, pos, event) => {
+            if (!this.editor.isEditable) return
+            if (!this.editor.isActive('link')) return false
+            event.preventDefault()
+            if (event.metaKey) {
+              const url = event.target?.getAttribute('href')
+              if (url) window.open(url, '_blank')
+            } else {
+              this.editor.commands.openLinkEditor()
+            }
+          },
+        },
+      }),
+    )
     return plugins
   },
 })
@@ -233,7 +246,7 @@ function openLinkEditor(href: string, anchor: HTMLElement): Promise<string> {
 
     app = createApp({
       render() {
-        return h(EditLink, {
+        return h(LinkPopup, {
           href,
           onClose: () => {
             settlePromise('reject', 'Link editing cancelled')

package/src/components/TextEditor/EditLink.vue

@@ -1,63 +0,0 @@
-<template>
-  <div
-    class="p-2 flex min-w-72 items-center gap-2 bg-surface-white shadow-xl rounded-lg"
-  >
-    <TextInput
-      ref="input"
-      type="text"
-      class="w-full"
-      placeholder="https://example.com"
-      v-model="_href"
-      @keydown.enter="submitLink"
-      @keydown.esc="$emit('close')"
-    />
-    <div class="shrink-0 flex items-center gap-2">
-      <Tooltip text="Submit" placement="top">
-        <Button label="Submit" @click="submitLink">
-          <template #icon><LucideCheck class="size-4" /></template>
-        </Button>
-      </Tooltip>
-      <Tooltip text="Remove link" placement="top">
-        <Button label="Remove link" @click="$emit('updateHref', '')">
-          <template #icon><LucideX class="size-4" /></template>
-        </Button>
-      </Tooltip>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, useTemplateRef, nextTick } from 'vue'
-import Button from '../Button/Button.vue'
-import TextInput from '../TextInput/TextInput.vue'
-import Tooltip from '../Tooltip/Tooltip.vue'
-import LucideCheck from '~icons/lucide/check'
-import LucideX from '~icons/lucide/x'
-import { isValidUrl } from '../../utils/url-validation'
-
-const props = defineProps<{
-  href: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'updateHref', href: string): void
-  (e: 'close'): void
-}>()
-
-const _href = ref(props.href)
-const input = useTemplateRef('input')
-
-const submitLink = () => {
-  if (_href.value === '' || isValidUrl(_href.value)) {
-    emit('updateHref', _href.value)
-  }
-}
-
-onMounted(async () => {
-  await nextTick()
-  if (input.value?.el) {
-    input.value.el.focus()
-    input.value.el.select()
-  }
-})
-</script>