frappe-ui 0.1.274 → 0.1.276

package/frappe/drive/components/MoveDialog.vue

@@ -163,7 +163,7 @@
             >
               {{ '/' }}
             </span>
-            <div class="flex w-48 overflow-scroll">
+            <div class="flex w-48 overflow-auto">
               <div
                 v-for="(crumb, index) in slicedBreadcrumbs"
                 :key="index"

package/package.json

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

package/readme.md

@@ -30,7 +30,7 @@ In 2019, I began building [Frappe Books](https://github.com/frappe/books) which
 
 ## Links
 
-- [Documentation](https://frappeui.com)
+- [Documentation](https://ui.frappe.io)
 - [Vite Plugins](vite/README.md)
 - [Frappe UI Starter Boilerplate](https://github.com/netchampfaris/frappe-ui-starter)
 - [Community](https://github.com/frappe/frappe-ui/discussions)

package/src/components/Charts/AxisChart.vue

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

package/src/components/Charts/DonutChart.vue

@@ -13,7 +13,16 @@ const props = defineProps<{ config: DonutChartConfig }>()
 const error = ref('')
 const options = computed(() => {
   try {
-    return useDonutChartOptions(props.config)
+    const config: DonutChartConfig = {
+      ...props.config,
+      dir:
+        props.config.dir ??
+        (typeof document !== 'undefined' &&
+        document.documentElement.dir === 'rtl'
+          ? 'rtl'
+          : 'ltr'),
+    }
+    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,16 @@ const props = defineProps<{ config: FunnelChartConfig }>()
 const error = ref('')
 const options = computed(() => {
   try {
-    return useFunnelChartOptions(props.config)
+    const config: FunnelChartConfig = {
+      ...props.config,
+      dir:
+        props.config.dir ??
+        (typeof document !== 'undefined' &&
+        document.documentElement.dir === 'rtl'
+          ? 'rtl'
+          : 'ltr'),
+    }
+    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.dir === 'rtl'
   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.dir === 'rtl'
+  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.dir === 'rtl'
   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.dir === 'rtl'
   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.dir === 'rtl'
+
   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.dir === 'rtl'
+
   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.dir === 'rtl'
   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,8 @@ export type AxisChartConfig = {
   title: string
   subtitle?: string
   colors?: string[]
+  /** Forces layout direction; defaults to document.documentElement.dir */
+  dir?: 'rtl' | 'ltr'
   xAxis: {
     key: string
     type: 'category' | 'time' | 'value'
@@ -72,6 +74,8 @@ export type DonutChartConfig = {
   title: string
   subtitle?: string
   colors?: string[]
+  /** Forces layout direction; defaults to document.documentElement.dir */
+  dir?: 'rtl' | 'ltr'
   categoryColumn: string
   valueColumn: string
   maxSliceCount?: number
@@ -86,6 +90,8 @@ export type FunnelChartConfig = {
   title: string
   subtitle?: string
   colors?: string[]
+  /** Forces layout direction; defaults to document.documentElement.dir */
+  dir?: 'rtl' | 'ltr'
   categoryColumn: string
   valueColumn: string
   showPercentages?: boolean

package/src/components/Dialog/Dialog.vue

@@ -12,7 +12,7 @@
           :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"
+            class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
             :class="{
               'max-w-7xl': options.size === '7xl',
               'max-w-6xl': options.size === '6xl',

package/src/components/Switch/Switch.vue

@@ -86,7 +86,7 @@ const switchCircleClasses = computed(() => {
   ]
 })
 
-const iconClasses = 'mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6'
+const iconClasses = 'me-2 h-4 w-4 flex-shrink-0 text-ink-gray-6'
 const switchLabelClasses = computed(() => {
   return [
     'font-medium leading-normal',
@@ -103,7 +103,7 @@ const switchGroupClasses = computed(() => {
   const classes = ['flex justify-between']
   if (!props.description) {
     classes.push(
-      'group items-center space-x-3 py-1.5 cursor-pointer rounded focus-visible:bg-surface-gray-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-outline-gray-3',
+      'group items-center gap-x-3 py-1.5 cursor-pointer rounded focus-visible:bg-surface-gray-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-outline-gray-3',
     )
 
     classes.push(
@@ -113,7 +113,7 @@ const switchGroupClasses = computed(() => {
     )
   } else {
     classes.push('items-start')
-    classes.push(props.size === 'md' ? 'space-x-3.5' : 'space-x-2.5')
+    classes.push(props.size === 'md' ? 'gap-x-3.5' : 'gap-x-2.5')
   }
 
   return classes

package/src/components/Tabs/Tabs.vue

@@ -8,11 +8,19 @@ import {
 } from 'reka-ui'
 
 import type { TabProps } from './types'
-import { h } from 'vue'
+import { computed, h } from 'vue'
 
 const props = defineProps<TabProps>()
 const model = defineModel<string | number>({ default: 0 })
 
+const dir = computed<'rtl' | 'ltr'>(
+  () =>
+    props.dir ??
+    (typeof document !== 'undefined' && document.documentElement.dir === 'rtl'
+      ? 'rtl'
+      : 'ltr'),
+)
+
 const indicatorXCss = `left-0 bottom-0 h-[2px] w-[--reka-tabs-indicator-size] transition-[width,transform]
                           translate-x-[--reka-tabs-indicator-position] translate-y-[1px]`
 
@@ -25,16 +33,21 @@ const Btn = h('button')
 
 defineSlots<{
   /** Custom renderer for a tab trigger (icon + label / router-link). */
-  'tab-item'?: (props: { tab: { label: string; icon?: string; route?: string } }) => any
+  'tab-item'?: (props: {
+    tab: { label: string; icon?: string; route?: string }
+  }) => any
 
   /** Content rendered for each tab panel. */
-  'tab-panel'?: (props: { tab: { label: string; icon?: string; route?: string } }) => any
+  'tab-panel'?: (props: {
+    tab: { label: string; icon?: string; route?: string }
+  }) => any
 }>()
 </script>
 
 <template>
   <TabsRoot
     :as="props.as"
+    :dir="dir"
     class="flex flex-1 overflow-hidden flex-col data-[orientation=vertical]:flex-row"
     :orientation="props.vertical ? 'vertical' : 'horizontal'"
     :default-value="props.tabs[0].label"

package/src/components/Tabs/types.ts

@@ -18,4 +18,7 @@ export interface TabProps {
 
   /** Renders tabs vertically instead of horizontally */
   vertical?: boolean
+
+  /** Forces layout direction; defaults to document.documentElement.dir */
+  dir?: 'rtl' | 'ltr'
 }

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]
 })