frappe-ui 0.1.145 → 0.1.147

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.145",
+  "version": "0.1.147",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",
@@ -37,6 +37,7 @@
     "@tiptap/extension-code-block": "^2.11.9",
     "@tiptap/extension-code-block-lowlight": "^2.11.5",
     "@tiptap/extension-color": "^2.0.3",
+    "@tiptap/extension-heading": "^2.12.0",
     "@tiptap/extension-highlight": "^2.0.3",
     "@tiptap/extension-image": "^2.0.3",
     "@tiptap/extension-link": "^2.0.3",

package/src/components/Button/Button.vue

@@ -36,7 +36,7 @@
       <component v-else-if="icon" :is="icon" :class="slotClasses" />
       <slot name="icon" v-else-if="$slots.icon" />
     </template>
-    <span v-else :class="{ 'sr-only': isIconButton }">
+    <span v-else :class="{ 'sr-only': isIconButton }" class="truncate">
       <slot>{{ label }}</slot>
     </span>
 

package/src/components/Charts/Charts.story.vue

@@ -47,6 +47,10 @@ const simpleConfig: AxisChartConfig = {
   },
   yAxis: {
     title: 'Amount ($)',
+    echartOptions: {
+      min: 0,
+      max: 800,
+    }
   },
   series: [{ name: 'sales', type: 'bar' }],
 }

package/src/components/Charts/axisChartOptions.ts

@@ -1,5 +1,5 @@
 import useEchartsOptions from './eChartOptions'
-import { formatValue } from './helpers'
+import { formatValue, mergeDeep } from './helpers'
 import {
   AreaSeriesConfig,
   AxisChartConfig,
@@ -33,61 +33,60 @@ export default function useAxisChartOptions(config: AxisChartConfig) {
     baseOptions.yAxis[1].show = true
   }
 
-  return {
-    ...baseOptions,
-    series: config.series.map((s, idx) => {
-      let labelPosition = 'top'
-      if (s.type == 'bar' && config.stacked) {
-        labelPosition = idx == lastBarSeriesIdx ? 'top' : 'inside'
-      }
-      if (s.type == 'bar' && swapXY) {
-        labelPosition = 'right'
-      }
-
-      const standardOptions = {
-        type: s.type,
-        name: s.name,
-        data: data.map((row: any) => {
-          let x, y
-          if (swapXY) {
-            x = row[s.name]
-            y = row[config.xAxis.key]
-          } else {
-            x = row[config.xAxis.key]
-            y = row[s.name]
-          }
-          return [x, y]
-        }),
-        yAxisIndex: s.axis === 'y2' ? 1 : 0,
-        label: {
-          show: s.showDataLabels,
-          position: labelPosition,
-          formatter: (params: any) => {
-            const _val = swapXY ? params.value?.[0] : params.value?.[1]
-            return formatValue(_val, 1, true)
-          },
-          fontSize: 11,
-        },
-        labelLayout: { hideOverlap: true },
-        itemStyle: {
-          color: s.color,
+  baseOptions.series = config.series.map((s, idx) => {
+    let labelPosition = 'top'
+    if (s.type == 'bar' && config.stacked) {
+      labelPosition = idx == lastBarSeriesIdx ? 'top' : 'inside'
+    }
+    if (s.type == 'bar' && swapXY) {
+      labelPosition = 'right'
+    }
+
+    const standardSeriesOptions = {
+      type: s.type,
+      name: s.name,
+      data: data.map((row: any) => {
+        let x, y
+        if (swapXY) {
+          x = row[s.name]
+          y = row[config.xAxis.key]
+        } else {
+          x = row[config.xAxis.key]
+          y = row[s.name]
+        }
+        return [x, y]
+      }),
+      yAxisIndex: s.axis === 'y2' ? 1 : 0,
+      label: {
+        show: s.showDataLabels,
+        position: labelPosition,
+        formatter: (params: any) => {
+          const _val = swapXY ? params.value?.[0] : params.value?.[1]
+          return formatValue(_val, 1, true)
         },
-      }
-
-      let seriesTypeOptions = {}
-      if (s.type === 'bar') {
-        seriesTypeOptions = getBarSeriesOptions(config, s)
-      }
-      if (s.type === 'line') {
-        seriesTypeOptions = getLineSeriesOptions(config, s)
-      }
-      if (s.type === 'area') {
-        seriesTypeOptions = getAreaSeriesOptions(config, s)
-      }
-
-      return mergeDeep(standardOptions, seriesTypeOptions)
-    }),
-  }
+        fontSize: 11,
+      },
+      labelLayout: { hideOverlap: true },
+      itemStyle: {
+        color: s.color,
+      },
+    }
+
+    let seriesTypeOptions = {}
+    if (s.type === 'bar') {
+      seriesTypeOptions = getBarSeriesOptions(config, s)
+    }
+    if (s.type === 'line') {
+      seriesTypeOptions = getLineSeriesOptions(config, s)
+    }
+    if (s.type === 'area') {
+      seriesTypeOptions = getAreaSeriesOptions(config, s)
+    }
+
+    return mergeDeep(standardSeriesOptions, seriesTypeOptions, s.echartOptions)
+  })
+
+  return mergeDeep(baseOptions, config.echartOptions)
 }
 
 function getBarSeriesOptions(config: AxisChartConfig, series: BarSeriesConfig) {
@@ -143,22 +142,3 @@ function getAreaSeriesOptions(
     },
   }
 }
-
-function isObject(item: any) {
-  return item && typeof item === 'object' && !Array.isArray(item)
-}
-
-function mergeDeep(target: any, source: any) {
-  let output = Object.assign({}, target)
-  if (isObject(target) && isObject(source)) {
-    Object.keys(source).forEach((key) => {
-      if (isObject(source[key])) {
-        if (!(key in target)) Object.assign(output, { [key]: source[key] })
-        else output[key] = mergeDeep(target[key], source[key])
-      } else {
-        Object.assign(output, { [key]: source[key] })
-      }
-    })
-  }
-  return output
-}

package/src/components/Charts/eChartOptions.ts

@@ -1,4 +1,4 @@
-import { formatDate, formatLabel, formatValue } from './helpers'
+import { formatDate, formatLabel, formatValue, mergeDeep } from './helpers'
 import { AxisChartConfig } from './types'
 
 export const PADDING_TOP = 0
@@ -154,7 +154,7 @@ export function getTitleOptions(title: string, subtitle?: string) {
 }
 
 function getXAxisOptions(config: AxisChartConfig) {
-  return config.swapXY
+  const options = config.swapXY
     ? {
         show: true,
         type: 'value',
@@ -220,10 +220,12 @@ function getXAxisOptions(config: AxisChartConfig) {
           margin: 8,
         },
       }
+
+  return mergeDeep(options, config.swapXY ? config.yAxis.echartOptions : config.xAxis.echartOptions)
 }
 
 function getYAxisOptions(config: AxisChartConfig) {
-  const primaryYAxisOptions = config.swapXY
+  let primaryYAxisOptions = config.swapXY
     ? {
         show: true,
         type: config.xAxis.type,
@@ -288,7 +290,12 @@ function getYAxisOptions(config: AxisChartConfig) {
         max: config.yAxis.yMax,
       }
 
-  const secondaryYAxisOptions = {
+  primaryYAxisOptions = mergeDeep(
+    primaryYAxisOptions,
+    config.swapXY ? config.xAxis.echartOptions : config.yAxis.echartOptions
+  )
+
+  let secondaryYAxisOptions = {
     show: false,
     type: 'value',
     z: 2,
@@ -330,6 +337,11 @@ function getYAxisOptions(config: AxisChartConfig) {
     max: config.y2Axis?.yMax,
   }
 
+  secondaryYAxisOptions = mergeDeep(
+    secondaryYAxisOptions,
+    config.swapXY ? config.y2Axis?.echartOptions : config.y2Axis?.echartOptions
+  )
+
   return config.swapXY
     ? [primaryYAxisOptions]
     : [primaryYAxisOptions, secondaryYAxisOptions]

package/src/components/Charts/helpers.ts

@@ -73,3 +73,34 @@ export function formatDate(date: string, format?: string, grain: TimeGrain = 'da
 
   return dayjs(date).format(format)
 }
+
+
+export function isObject(item: any) {
+  return item && typeof item === 'object' && !Array.isArray(item)
+}
+
+export function mergeDeep(target: any, ...sources: any[]) {
+  if (!sources.length) return target;
+  const source = sources.shift();
+
+  if (!source || !isObject(target) || !isObject(source)) {
+    // Skip the current source if it's not a proper object
+    return mergeDeep(target, ...sources);
+  }
+
+  let output = Object.assign({}, target);
+
+  Object.keys(source).forEach((key) => {
+    if (isObject(source[key])) {
+      if (!(key in output)) {
+        output[key] = source[key];
+      } else {
+        output[key] = mergeDeep(output[key], source[key]);
+      }
+    } else {
+      output[key] = source[key];
+    }
+  });
+
+  return mergeDeep(output, ...sources);
+}

package/src/components/Charts/types.ts

@@ -10,20 +10,32 @@ export type AxisChartConfig = {
     type: 'category' | 'time' | 'value'
     timeGrain?: TimeGrain
     title?: string
+    echartOptions?: {
+      [key: string]: any
+    }
   }
   yAxis: {
     title?: string
     yMin?: number
     yMax?: number
+    echartOptions?: {
+      [key: string]: any
+    }
   }
   y2Axis?: {
     title?: string
     yMin?: number
     yMax?: number
+    echartOptions?: {
+      [key: string]: any
+    }
   }
   swapXY?: boolean
   stacked?: boolean
   series: (BarSeriesConfig | LineSeriesConfig | AreaSeriesConfig)[]
+  echartOptions?: {
+    [key: string]: any
+  }
 }
 
 export type SeriesConfig = {
@@ -32,6 +44,9 @@ export type SeriesConfig = {
   color?: string
   axis?: 'y' | 'y2'
   showDataLabels?: boolean
+  echartOptions?: {
+    [key: string]: any
+  }
 }
 
 export type BarSeriesConfig = SeriesConfig & {
@@ -61,6 +76,9 @@ export type DonutChartConfig = {
   valueColumn: string
   maxSliceCount?: number
   showInlineLabels?: boolean
+  echartOptions?: {
+    [key: string]: any
+  }
 }
 
 export type FunnelChartConfig = {
@@ -71,6 +89,9 @@ export type FunnelChartConfig = {
   categoryColumn: string
   valueColumn: string
   showPercentages?: boolean
+  echartOptions?: {
+    [key: string]: any
+  }
 }
 
 export type NumberChartConfig = {

package/src/components/FormControl.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="type != 'checkbox'" :class="['space-y-1.5', attrs.class]">
+  <div v-if="type != 'checkbox'" :class="['space-y-1.5', attrs.class]" :style="attrs.style">
     <FormLabel
       v-if="label"
       :label="label"
@@ -11,6 +11,7 @@
       v-if="type === 'select'"
       :id="id"
       v-bind="{ ...controlAttrs, size }"
+      v-model="model"
     >
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
@@ -19,6 +20,7 @@
     <Autocomplete
       v-else-if="type === 'autocomplete'"
       v-bind="{ ...controlAttrs }"
+      v-model="model"
     >
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
@@ -31,11 +33,13 @@
       v-else-if="type === 'textarea'"
       :id="id"
       v-bind="{ ...controlAttrs, size }"
+      v-model="model"
     />
     <TextInput
       v-else
       :id="id"
       v-bind="{ ...controlAttrs, type, size, required }"
+      v-model="model"
     >
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
@@ -52,6 +56,7 @@
     v-else
     :id="id"
     v-bind="{ ...controlAttrs, label, size, class: attrs.class }"
+    v-model="model"
   />
 </template>
 <script setup lang="ts">
@@ -79,6 +84,8 @@ const props = withDefaults(defineProps<FormControlProps>(), {
   size: 'sm',
 })
 
+const model = defineModel()
+
 const attrs = useAttrs()
 const controlAttrs = computed(() => {
   // pass everything except class and style
@@ -91,16 +98,6 @@ const controlAttrs = computed(() => {
   return _attrs
 })
 
-const labelClasses = computed(() => {
-  return [
-    {
-      sm: 'text-xs',
-      md: 'text-base',
-    }[props.size],
-    'text-ink-gray-5',
-  ]
-})
-
 const descriptionClasses = computed(() => {
   return [
     {

package/src/components/Input.vue

@@ -1,5 +1,5 @@
 <template>
-  <label :class="[type == 'checkbox' ? 'flex' : 'block', $attrs.class]">
+  <label :class="[type == 'checkbox' ? 'flex' : 'block', $attrs.class]" :style="$attrs.style">
     <span
       v-if="label && type != 'checkbox'"
       class="mb-2 block text-sm leading-4 text-gray-700"

package/src/components/ListView/ListView.vue

@@ -3,6 +3,7 @@
     <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 />

package/src/components/TextEditor/TextEditor.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="relative w-full" :class="$attrs.class" v-if="editor">
+  <div
+    class="relative w-full"
+    :class="$attrs.class"
+    :style="$attrs.style"
+    v-if="editor"
+  >
     <TextEditorBubbleMenu :buttons="bubbleMenu" :options="bubbleMenuOptions" />
     <TextEditorFixedMenu
       class="w-full overflow-x-auto rounded-t-lg border border-outline-gray-modals"
@@ -14,7 +19,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { normalizeClass, computed } from 'vue'
 import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
@@ -39,10 +44,12 @@ import configureMention from './mention'
 import TextEditorFixedMenu from './TextEditorFixedMenu.vue'
 import TextEditorBubbleMenu from './TextEditorBubbleMenu.vue'
 import TextEditorFloatingMenu from './TextEditorFloatingMenu.vue'
-import EmojiExtension from './emoji-extension'
-import SlashCommands from './slash-commands-extension'
+import EmojiExtension from './extensions/emoji/emoji-extension'
+import SlashCommands from './extensions/slash-commands/slash-commands-extension'
 import { detectMarkdown, markdownToHTML } from '../../utils/markdown'
 import { DOMParser } from 'prosemirror-model'
+import { TagNode, TagExtension } from './extensions/tag/tag-extension'
+import { Heading } from './extensions/heading/heading'
 
 const lowlight = createLowlight(common)
 
@@ -100,6 +107,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    tags: {
+      type: Array,
+      default: () => [],
+    },
     uploadFunction: {
       type: Function,
       default: () => null,
@@ -147,6 +158,13 @@ export default {
         StarterKit.configure({
           ...this.starterkitOptions,
           codeBlock: false,
+          heading: false,
+        }),
+        Heading.configure({
+          ...(typeof this.starterkitOptions?.heading === 'object' &&
+          this.starterkitOptions.heading !== null
+            ? this.starterkitOptions.heading
+            : {}),
         }),
         Table.configure({
           resizable: true,
@@ -185,6 +203,10 @@ export default {
         configureMention(this.mentions),
         EmojiExtension,
         SlashCommands,
+        TagNode,
+        TagExtension.configure({
+          tags: () => this.tags,
+        }),
         ...(this.extensions || []),
       ],
       onUpdate: ({ editor }) => {
@@ -306,4 +328,23 @@ img.ProseMirror-selectednode {
   border-radius: 3px;
   padding: 0 2px;
 }
+.tag-item,
+.tag-suggestion-active {
+  background-color: var(--surface-gray-1, #f8f8f8);
+  color: inherit;
+  border: 1px solid transparent;
+  padding: 0px 2px;
+  border-radius: 4px;
+  font-size: 1em;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.tag-item.ProseMirror-selectednode {
+  border-color: var(--outline-gray-3, #c7c7c7);
+}
+
+.tag-suggestion-active {
+  background-color: var(--surface-gray-2, #f3f3f3);
+}
 </style>

package/src/components/TextEditor/{EmojiList.vue → extensions/emoji/EmojiList.vue}

@@ -2,7 +2,7 @@
   <SuggestionList
     ref="suggestionList"
     :items="items"
-    :command="selectItem"
+    :command="(item) => onItemSelect(item as EmojiItem)"
     item-class="py-2"
   >
     <template #default="{ item }">
@@ -14,29 +14,34 @@
 
 <script setup lang="ts">
 import { ref, type PropType } from 'vue'
-import SuggestionList, { type SuggestionItem } from './SuggestionList.vue'
-
-interface EmojiItem extends SuggestionItem {
-  name: string
-  emoji: string
-}
+import SuggestionList from '../suggestion/SuggestionList.vue'
+import type { Editor, Range } from '@tiptap/core'
+import type { EmojiItem } from './emoji-extension'
 
 const props = defineProps({
   items: {
     type: Array as PropType<EmojiItem[]>,
     required: true,
   },
+  editor: {
+    type: Object as PropType<Editor>,
+    required: true,
+  },
+  range: {
+    type: Object as PropType<Range>,
+    required: true,
+  },
   command: {
-    type: Function as PropType<(params: { emoji: string }) => void>,
+    type: Function as PropType<(item: EmojiItem) => void>,
     required: true,
   },
 })
 
 const suggestionList = ref<InstanceType<typeof SuggestionList> | null>(null)
 
-const selectItem = (item: SuggestionItem) => {
+const onItemSelect = (item: EmojiItem) => {
   if (item) {
-    props.command({ emoji: item.emoji })
+    props.command(item)
   }
 }
 

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

@@ -0,0 +1,55 @@
+import { PluginKey } from 'prosemirror-state'
+import {
+  BaseSuggestionItem,
+  createSuggestionExtension,
+} from '../suggestion/createSuggestionExtension'
+import EmojiList from './EmojiList.vue'
+import _EMOJIS from './emojis.json'
+
+const EMOJIS = _EMOJIS as EmojiItem[]
+
+export interface EmojiItem extends BaseSuggestionItem {
+  name: string
+  emoji: string
+}
+
+export default createSuggestionExtension<EmojiItem>({
+  name: 'emoji',
+  char: ':',
+  pluginKey: new PluginKey('emojiSuggestion'),
+  items: ({ query }: { query: string }) => {
+    return EMOJIS.filter((item) =>
+      item.name.toLowerCase().includes(query.toLowerCase()),
+    )
+      .sort((a, b) => {
+        const aName = a.name.toLowerCase()
+        const bName = b.name.toLowerCase()
+        const queryLower = query.toLowerCase()
+
+        // Exact matches first
+        if (aName === queryLower && bName !== queryLower) return -1
+        if (bName === queryLower && aName !== queryLower) return 1
+
+        // Then names starting with the query
+        if (aName.startsWith(queryLower) && !bName.startsWith(queryLower))
+          return -1
+        if (bName.startsWith(queryLower) && !aName.startsWith(queryLower))
+          return 1
+
+        // Then sort by name length (shorter first)
+        return aName.length - bName.length
+      })
+      .slice(0, 5)
+  },
+  command: ({ editor, range, props: item }) => {
+    if (item && item.emoji) {
+      editor.chain().focus().deleteRange(range).insertContent(item.emoji).run()
+    } else {
+      console.error(
+        'Emoji command execution error: emoji property not found on selected item or item is invalid.',
+        item,
+      )
+    }
+  },
+  component: EmojiList,
+})

package/src/components/TextEditor/extensions/heading/heading.ts

@@ -0,0 +1,20 @@
+import TiptapHeading from '@tiptap/extension-heading'
+import { textblockTypeInputRule } from '@tiptap/core'
+
+// This custom Heading extension modifies the default input rule behavior.
+// The default Tiptap heading input rule converts text to a heading when '#' is followed by any whitespace (including Enter).
+// This customization ensures that headings are only created when '#' is followed by a literal space.
+// This change is necessary to prevent conflicts with other extensions, such as a tags extension,
+// which uses '#' followed by Enter to add a tag.
+export const Heading = TiptapHeading.extend({
+  addInputRules() {
+    return this.options.levels.map((level) => {
+      let regexp = new RegExp(`^(#{${level}}) $`)
+      return textblockTypeInputRule({
+        find: regexp,
+        type: this.type,
+        getAttributes: { level },
+      })
+    })
+  },
+})