frappe-ui 0.1.274 → 0.1.275

package/package.json

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

package/src/components/Charts/AxisChart.vue

@@ -13,7 +13,11 @@ const props = defineProps<{ config: AxisChartConfig }>()
 const error = ref('')
 const options = computed(() => {
   try {
-    return useAxisChartOptions(props.config)
+    const config = {
+      ...props.config,
+      isRTL: props.config.isRTL ?? document.documentElement.dir === 'rtl',
+    }
+    return useAxisChartOptions(config)
   } catch (e: any) {
     error.value = e.message
     return {}

package/src/components/Charts/DonutChart.vue

@@ -13,7 +13,11 @@ const props = defineProps<{ config: DonutChartConfig }>()
 const error = ref('')
 const options = computed(() => {
   try {
-    return useDonutChartOptions(props.config)
+    const config = {
+      ...props.config,
+      isRTL: props.config.isRTL ?? document.documentElement.dir === 'rtl',
+    }
+    return useDonutChartOptions(config)
   } catch (e: any) {
     error.value = e.message
     return {}

package/src/components/Charts/ECharts.vue

@@ -56,7 +56,7 @@ watch(
 </script>
 
 <template>
-  <div ref="chartDiv" v-show="!error" :class="chartClass"></div>
+  <div ref="chartDiv" v-show="!error" dir="ltr" :class="chartClass"></div>
   <div
     v-show="error"
     class="flex h-full w-full items-center justify-center text-center text-ink-red-3"

package/src/components/Charts/FunnelChart.vue

@@ -13,7 +13,11 @@ const props = defineProps<{ config: FunnelChartConfig }>()
 const error = ref('')
 const options = computed(() => {
   try {
-    return useFunnelChartOptions(props.config)
+    const config = {
+      ...props.config,
+      isRTL: props.config.isRTL ?? document.documentElement.dir === 'rtl',
+    }
+    return useFunnelChartOptions(config)
   } catch (e: any) {
     error.value = e.message
     return {}

package/src/components/Charts/axisChartOptions.ts

@@ -22,6 +22,7 @@ export default function useAxisChartOptions(config: AxisChartConfig) {
     throw new Error('Swap axes is not supported for non-bar series or y2 axis')
   }
 
+  const isRTL = config.isRTL
   const swapXY = config.swapXY
   const lastBarSeriesIdx = config.series
     .slice()
@@ -39,7 +40,7 @@ export default function useAxisChartOptions(config: AxisChartConfig) {
       labelPosition = idx == lastBarSeriesIdx ? 'top' : 'inside'
     }
     if (s.type == 'bar' && swapXY) {
-      labelPosition = 'right'
+      labelPosition = isRTL ? 'left' : 'right'
     }
 
     const standardSeriesOptions = {
@@ -90,7 +91,11 @@ export default function useAxisChartOptions(config: AxisChartConfig) {
 }
 
 function getBarSeriesOptions(config: AxisChartConfig, series: BarSeriesConfig) {
-  const roundedCorners = config.swapXY ? [0, 2, 2, 0] : [2, 2, 0, 0]
+  const isRTL = config.isRTL
+  let roundedCorners = config.swapXY ? [0, 2, 2, 0] : [2, 2, 0, 0]
+  if (config.swapXY && isRTL) {
+    roundedCorners = [2, 0, 0, 2]
+  }
   const idx = config.series.findIndex((s) => s.name === series.name)
   const lastBarSeriesIdx = config.series
     .slice()

package/src/components/Charts/donutChartOptions.ts

@@ -3,6 +3,7 @@ import { formatValue } from './helpers'
 import { DonutChartConfig } from './types'
 
 export default function useDonutChartOptions(config: DonutChartConfig) {
+  const isRTL = config.isRTL
   let data = config.data || []
 
   data = data.sort((a, b) => {
@@ -44,7 +45,7 @@ export default function useDonutChartOptions(config: DonutChartConfig) {
     animationDuration: 700,
     color: config.colors,
     textStyle: { fontFamily: ['InterVar', 'sans-serif'] },
-    title: getTitleOptions(config.title, config.subtitle),
+    title: getTitleOptions(config.title, config.subtitle, isRTL),
     dataset: {
       source: [
         [config.categoryColumn, config.valueColumn],
@@ -117,13 +118,14 @@ export default function useDonutChartOptions(config: DonutChartConfig) {
       confine: true,
       appendToBody: false,
       formatter: function (params: any) {
+        const dirAttr = isRTL ? ' dir="rtl"' : ''
         const p = params as any
         const value = p.value[1]
         const percentage = total > 0 ? (value / total) * 100 : 0
         const formatted = isNaN(value) ? value : formatValue(value, 1, true)
         const formattedPercentage = percentage.toFixed(0)
         return `
-          <div class="flex items-center justify-between gap-5">
+          <div${dirAttr} class="flex items-center justify-between gap-5">
             <div>${p.name}</div>
             <div class="font-bold">
               ${formatted} (${formattedPercentage}%)

package/src/components/Charts/eChartOptions.ts

@@ -11,6 +11,7 @@ export const SUBTITLE_HEIGHT = 18
 export const TITLE_BOTTOM = 24
 
 export default function useEchartsOptions(config: AxisChartConfig) {
+  const isRTL = config.isRTL
   const title = config.title
   const subtitle = config.subtitle
   const hasTitle = title ? 1 : 0
@@ -27,11 +28,11 @@ export default function useEchartsOptions(config: AxisChartConfig) {
     animation: true,
     animationDuration: 700,
     textStyle: { fontFamily: ['InterVar', 'sans-serif'] },
-    title: getTitleOptions(title, subtitle),
+    title: getTitleOptions(title, subtitle, isRTL),
     color: config.colors,
     grid: {
-      left: '1%',
-      right: config.swapXY ? '2.5%' : '1.5%',
+      left: isRTL ? (config.swapXY ? '2.5%' : '1.5%') : '1%',
+      right: isRTL ? '1%' : config.swapXY ? '2.5%' : '1.5%',
       top:
         PADDING_TOP +
         TITLE_HEIGHT * hasTitle +
@@ -47,6 +48,8 @@ export default function useEchartsOptions(config: AxisChartConfig) {
       show: true,
       trigger: 'axis',
       formatter: (params: Object | Array<Object>) => {
+        const dirAttr = isRTL ? ' dir="rtl"' : ''
+
         if (Array.isArray(params)) {
           params = params
             // remove zero values
@@ -60,7 +63,7 @@ export default function useEchartsOptions(config: AxisChartConfig) {
           const value = config.swapXY ? p.value[0] : p.value[1]
           const formatted = isNaN(value) ? value : formatValue(value)
           return `
-                <div class="flex items-center justify-between gap-5">
+                <div${dirAttr} class="flex items-center justify-between gap-5">
                   <div>${p.name}</div>
                   <div class="font-bold">${formatted}</div>
                 </div>
@@ -77,7 +80,7 @@ export default function useEchartsOptions(config: AxisChartConfig) {
                 : xValue
             const formattedY = isNaN(yValue) ? yValue : formatValue(yValue)
             return `
-              <div class="flex flex-col">
+              <div${dirAttr} class="flex flex-col">
                 ${idx == 0 ? `<div>${formattedX}</div>` : ''}
                 <div class="flex items-center justify-between gap-5">
                   <div class="flex gap-1 items-center">
@@ -130,13 +133,13 @@ export default function useEchartsOptions(config: AxisChartConfig) {
   }
 }
 
-export function getTitleOptions(title: string, subtitle?: string) {
+export function getTitleOptions(title: string, subtitle?: string, isRTL?: boolean) {
   return {
     top: '4px',
-    left: '0.8%',
+    left: isRTL ? 'right' : '0.8%',
+    padding: isRTL ? [0, 10, 0, 0] : 0,
     text: title,
     subtext: subtitle,
-    padding: 0,
     itemGap: -3,
     textStyle: {
       fontSize: 14,
@@ -154,6 +157,8 @@ export function getTitleOptions(title: string, subtitle?: string) {
 }
 
 function getXAxisOptions(config: AxisChartConfig) {
+  const isRTL = config.isRTL
+
   const options = config.swapXY
     ? {
         show: true,
@@ -161,12 +166,13 @@ function getXAxisOptions(config: AxisChartConfig) {
         z: 2,
         scale: false,
         boundaryGap: false,
+        inverse: isRTL,
         position: 'top',
-        name: `${config.yAxis.title} →`,
+        name: isRTL ? `← ${config.yAxis.title}` : `${config.yAxis.title} →`,
         nameGap: 6,
         nameLocation: 'end',
         nameTextStyle: {
-          align: 'right',
+          align: isRTL ? 'left' : 'right',
           verticalAlign: 'bottom',
           padding: [0, 0, 26, 0],
           backgroundColor: 'var(--surface-white)',
@@ -205,6 +211,7 @@ function getXAxisOptions(config: AxisChartConfig) {
         z: 2,
         type: config.xAxis.type,
         scale: true,
+        inverse: isRTL,
         splitLine: {
           show: false,
         },
@@ -228,6 +235,8 @@ function getXAxisOptions(config: AxisChartConfig) {
 }
 
 function getYAxisOptions(config: AxisChartConfig) {
+  const isRTL = config.isRTL
+
   let primaryYAxisOptions = config.swapXY
     ? {
         show: true,
@@ -235,6 +244,7 @@ function getYAxisOptions(config: AxisChartConfig) {
         z: 2,
         scale: true,
         inverse: 'true',
+        position: isRTL ? 'right' : 'left',
         splitLine: {
           show: false,
         },
@@ -256,14 +266,15 @@ function getYAxisOptions(config: AxisChartConfig) {
         type: 'value',
         z: 2,
         scale: false,
+        position: isRTL ? 'right' : 'left',
         boundaryGap: ['0%', '1%'],
         name: `↑ ${config.yAxis.title}`,
         nameGap: 6,
         nameLocation: 'end',
         nameTextStyle: {
-          align: 'left',
+          align: isRTL ? 'right' : 'left',
           verticalAlign: 'top',
-          padding: [0, 0, 0, -2],
+          padding: isRTL ? [0, -2, 0, 0] : [0, 0, 0, -2],
           backgroundColor: 'var(--surface-white)',
           borderColor: 'var(--surface-white)',
           color: 'var(--ink-gray-8)',
@@ -307,13 +318,14 @@ function getYAxisOptions(config: AxisChartConfig) {
     z: 2,
     alignTicks: true,
     scale: false,
+    position: isRTL ? 'left' : 'right',
     boundaryGap: ['0%', '1%'],
-    name: `${config.y2Axis?.title} ↑`,
+    name: isRTL ? `↑ ${config.y2Axis?.title}` : `${config.y2Axis?.title} ↑`,
     nameLocation: 'end',
     nameTextStyle: {
-      align: 'right',
+      align: isRTL ? 'left' : 'right',
       verticalAlign: 'top',
-      padding: [0, 5, 0, 0],
+      padding: isRTL ? [0, 0, 0, 5] : [0, 5, 0, 0],
       backgroundColor: 'var(--surface-white)',
       borderColor: 'var(--surface-white)',
       color: 'var(--ink-gray-8)',
@@ -341,7 +353,6 @@ function getYAxisOptions(config: AxisChartConfig) {
       formatter: function (value: number) {
         return formatValue(value, 1, true)
       },
-      // color: '#000',
     },
     min: config.y2Axis?.yMin,
     max: config.y2Axis?.yMax,

package/src/components/Charts/funnelChartOptions.ts

@@ -9,6 +9,7 @@ import { formatValue } from './helpers'
 import { FunnelChartConfig } from './types'
 
 export default function getFunnelChartOptions(config: FunnelChartConfig) {
+  const isRTL = config.isRTL
   let data = config.data || []
 
   const labelPosition = 'alternate'
@@ -37,7 +38,7 @@ export default function getFunnelChartOptions(config: FunnelChartConfig) {
     animationDuration: 700,
     color: colors,
     textStyle: { fontFamily: ['InterVar', 'sans-serif'] },
-    title: getTitleOptions(config.title, config.subtitle),
+    title: getTitleOptions(config.title, config.subtitle, isRTL),
     series: [
       {
         name: 'Funnel',
@@ -98,13 +99,14 @@ export default function getFunnelChartOptions(config: FunnelChartConfig) {
       confine: true,
       appendToBody: false,
       formatter: function (params: any) {
+        const dirAttr = isRTL ? ' dir="rtl"' : ''
         const p = params as any
         const value = p.value
         const percentage = total > 0 ? (value / total) * 100 : 0
         const formatted = isNaN(value) ? value : formatValue(value, 1, true)
         const formattedPercentage = percentage.toFixed(0)
         return `
-          <div class="flex items-center justify-between gap-5">
+          <div${dirAttr} class="flex items-center justify-between gap-5">
             <div>${p.name}</div>
             <div class="font-bold">
               ${formatted} (${formattedPercentage}%)

package/src/components/Charts/types.ts

@@ -5,6 +5,7 @@ export type AxisChartConfig = {
   title: string
   subtitle?: string
   colors?: string[]
+  isRTL?: boolean
   xAxis: {
     key: string
     type: 'category' | 'time' | 'value'
@@ -72,6 +73,7 @@ export type DonutChartConfig = {
   title: string
   subtitle?: string
   colors?: string[]
+  isRTL?: boolean
   categoryColumn: string
   valueColumn: string
   maxSliceCount?: number
@@ -86,6 +88,7 @@ export type FunnelChartConfig = {
   title: string
   subtitle?: string
   colors?: string[]
+  isRTL?: boolean
   categoryColumn: string
   valueColumn: string
   showPercentages?: boolean

package/src/components/TextInput/TextInput.vue

@@ -6,7 +6,7 @@
   >
     <div
       :class="[
-        'absolute inset-y-0 left-0 flex items-center',
+        'absolute inset-y-0 start-0 flex items-center',
         textColor,
         prefixClasses,
       ]"
@@ -29,7 +29,7 @@
     />
     <div
       :class="[
-        'absolute inset-y-0 right-0 flex items-center',
+        'absolute inset-y-0 end-0 flex items-center',
         textColor,
         suffixClasses,
       ]"
@@ -94,23 +94,23 @@ const inputClasses = computed(() => {
   let paddingClasses = {
     sm: [
       'py-1.5',
-      slots.prefix ? 'pl-8' : 'pl-2',
-      slots.suffix ? 'pr-8' : 'pr-2',
+      slots.prefix ? 'ps-8' : 'ps-2',
+      slots.suffix ? 'pe-8' : 'pe-2',
     ],
     md: [
       'py-1.5',
-      slots.prefix ? 'pl-9' : 'pl-2.5',
-      slots.suffix ? 'pr-9' : 'pr-2.5',
+      slots.prefix ? 'ps-9' : 'ps-2.5',
+      slots.suffix ? 'pe-9' : 'pe-2.5',
     ],
     lg: [
       'py-1.5',
-      slots.prefix ? 'pl-10' : 'pl-3',
-      slots.suffix ? 'pr-10' : 'pr-3',
+      slots.prefix ? 'ps-10' : 'ps-3',
+      slots.suffix ? 'pe-10' : 'pe-3',
     ],
     xl: [
       'py-1.5',
-      slots.prefix ? 'pl-10' : 'pl-3',
-      slots.suffix ? 'pr-10' : 'pr-3',
+      slots.prefix ? 'ps-10' : 'ps-3',
+      slots.suffix ? 'pe-10' : 'pe-3',
     ],
   }[props.size]
 
@@ -140,19 +140,19 @@ const inputClasses = computed(() => {
 
 let prefixClasses = computed(() => {
   return {
-    sm: 'pl-2',
-    md: 'pl-2.5',
-    lg: 'pl-3',
-    xl: 'pl-3',
+    sm: 'ps-2',
+    md: 'ps-2.5',
+    lg: 'ps-3',
+    xl: 'ps-3',
   }[props.size]
 })
 
 let suffixClasses = computed(() => {
   return {
-    sm: 'pr-2',
-    md: 'pr-2.5',
-    lg: 'pr-3',
-    xl: 'pr-3',
+    sm: 'pe-2',
+    md: 'pe-2.5',
+    lg: 'pe-3',
+    xl: 'pe-3',
   }[props.size]
 })