frappe-ui 0.1.146 → 0.1.148

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.146",
+  "version": "0.1.148",
   "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/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/TextEditor/FontColor.vue

@@ -8,7 +8,7 @@
     <template #body-main>
       <div class="p-2">
         <div class="text-sm text-ink-gray-7">Text Color</div>
-        <div class="mt-1 grid grid-cols-8 gap-1">
+        <div class="mt-1 grid grid-cols-6 gap-1">
           <Tooltip
             class="flex"
             v-for="color in foregroundColors"
@@ -18,9 +18,7 @@
             <button
               :aria-label="color.name"
               class="flex h-5 w-5 items-center justify-center rounded border text-base"
-              :style="{
-                color: color.hex,
-              }"
+              :class="color.class"
               @click="setForegroundColor(color)"
             >
               A
@@ -28,7 +26,7 @@
           </Tooltip>
         </div>
         <div class="mt-2 text-sm text-ink-gray-7">Background Color</div>
-        <div class="mt-1 grid grid-cols-8 gap-1">
+        <div class="mt-1 grid grid-cols-6 gap-1">
           <Tooltip
             class="flex"
             v-for="color in backgroundColors"
@@ -38,12 +36,7 @@
             <button
               :aria-label="color.name"
               class="flex h-5 w-5 items-center justify-center rounded border text-base text-ink-gray-9"
-              :class="
-                !color.hex ? 'border-outline-gray-modals' : 'border-transparent'
-              "
-              :style="{
-                backgroundColor: color.hex,
-              }"
+              :class="color.class"
               @click="setBackgroundColor(color)"
             >
               A
@@ -65,14 +58,22 @@ export default {
   methods: {
     setBackgroundColor(color) {
       if (color.name != 'Default') {
-        this.editor.chain().focus().toggleHighlight({ color: color.hex }).run()
+        this.editor
+          .chain()
+          .focus()
+          .toggleHighlightByName(color.name.toLowerCase())
+          .run()
       } else {
         this.editor.chain().focus().unsetHighlight().run()
       }
     },
     setForegroundColor(color) {
       if (color.name != 'Default') {
-        this.editor.chain().focus().setColor(color.hex).run()
+        this.editor
+          .chain()
+          .focus()
+          .setColorByName(color.name.toLowerCase())
+          .run()
       } else {
         this.editor.chain().focus().unsetColor().run()
       }
@@ -80,29 +81,63 @@ export default {
   },
   computed: {
     foregroundColors() {
-      // tailwind css colors, scale 600
       return [
-        { name: 'Default', hex: '#1F272E' },
-        { name: 'Yellow', hex: '#ca8a04' },
-        { name: 'Orange', hex: '#ea580c' },
-        { name: 'Red', hex: '#dc2626' },
-        { name: 'Green', hex: '#16a34a' },
-        { name: 'Blue', hex: '#1579D0' },
-        { name: 'Purple', hex: '#9333ea' },
-        { name: 'Pink', hex: '#db2777' },
+        { name: 'Default', class: 'text-ink-gray-9' },
+        { name: 'Red', class: 'text-red-600 dark:text-dark-red-400' },
+        { name: 'Orange', class: 'text-orange-600 dark:text-dark-orange-400' },
+        { name: 'Yellow', class: 'text-yellow-600 dark:text-dark-yellow-400' },
+        { name: 'Green', class: 'text-green-600 dark:text-dark-green-400' },
+        { name: 'Teal', class: 'text-teal-600 dark:text-dark-teal-400' },
+        { name: 'Cyan', class: 'text-cyan-600 dark:text-dark-cyan-400' },
+        { name: 'Blue', class: 'text-blue-600 dark:text-dark-blue-400' },
+        { name: 'Purple', class: 'text-purple-600 dark:text-dark-purple-400' },
+        { name: 'Pink', class: 'text-pink-600 dark:text-dark-pink-400' },
+        { name: 'Gray', class: 'text-gray-600 dark:text-dark-gray-400' },
       ]
     },
     backgroundColors() {
-      // tailwind css colors, scale 100
       return [
-        { name: 'Default', hex: null },
-        { name: 'Yellow', hex: '#fef9c3' },
-        { name: 'Orange', hex: '#ffedd5' },
-        { name: 'Red', hex: '#fee2e2' },
-        { name: 'Green', hex: '#dcfce7' },
-        { name: 'Blue', hex: '#D3E9FC' },
-        { name: 'Purple', hex: '#f3e8ff' },
-        { name: 'Pink', hex: '#fce7f3' },
+        { name: 'Default', class: 'border-outline-gray-modals' },
+        {
+          name: 'Red',
+          class: 'bg-red-100 dark:bg-dark-red-800 border-transparent',
+        },
+        {
+          name: 'Orange',
+          class: 'bg-orange-100 dark:bg-dark-orange-800 border-transparent',
+        },
+        {
+          name: 'Yellow',
+          class: 'bg-yellow-100 dark:bg-dark-yellow-800 border-transparent',
+        },
+        {
+          name: 'Green',
+          class: 'bg-green-100 dark:bg-dark-green-800 border-transparent',
+        },
+        {
+          name: 'Teal',
+          class: 'bg-teal-100 dark:bg-dark-teal-800 border-transparent',
+        },
+        {
+          name: 'Cyan',
+          class: 'bg-cyan-100 dark:bg-dark-cyan-800 border-transparent',
+        },
+        {
+          name: 'Blue',
+          class: 'bg-blue-100 dark:bg-dark-blue-800 border-transparent',
+        },
+        {
+          name: 'Purple',
+          class: 'bg-purple-100 dark:bg-dark-purple-800 border-transparent',
+        },
+        {
+          name: 'Pink',
+          class: 'bg-pink-100 dark:bg-dark-pink-800 border-transparent',
+        },
+        {
+          name: 'Gray',
+          class: 'bg-gray-100 dark:bg-dark-gray-800 border-transparent',
+        },
       ]
     },
   },

package/src/components/TextEditor/TextEditor.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="relative w-full" :class="$attrs.class" :style="$attrs.style" 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'
@@ -30,8 +35,8 @@ import VideoExtension from './video-extension'
 import LinkExtension from './link-extension'
 import Typography from '@tiptap/extension-typography'
 import TextStyle from '@tiptap/extension-text-style'
-import Highlight from '@tiptap/extension-highlight'
-import { Color } from '@tiptap/extension-color'
+import NamedColorExtension from './extensions/color'
+import NamedHighlightExtension from './extensions/highlight'
 import { common, createLowlight } from 'lowlight'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import CodeBlockComponent from './CodeBlockComponent.vue'
@@ -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,
@@ -159,8 +177,8 @@ export default {
           types: ['heading', 'paragraph'],
         }),
         TextStyle,
-        Color,
-        Highlight.configure({ multicolor: true }),
+        NamedColorExtension,
+        NamedHighlightExtension,
         CodeBlockLowlight.extend({
           addNodeView() {
             return VueNodeViewRenderer(CodeBlockComponent)
@@ -185,6 +203,10 @@ export default {
         configureMention(this.mentions),
         EmojiExtension,
         SlashCommands,
+        TagNode,
+        TagExtension.configure({
+          tags: () => this.tags,
+        }),
         ...(this.extensions || []),
       ],
       onUpdate: ({ editor }) => {
@@ -237,6 +259,9 @@ export default {
 }
 </script>
 <style>
+@import './extensions/color/color-styles.css';
+@import './extensions/highlight/highlight-styles.css';
+
 .ProseMirror {
   outline: none;
   caret-color: var(--ink-gray-9);
@@ -302,8 +327,23 @@ img.ProseMirror-selectednode {
   cursor: col-resize;
 }
 
-.ProseMirror mark {
-  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>