frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/Charts/NumberChart.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="flex max-h-[140px] items-center gap-2 overflow-hidden bg-surface-white text-ink-gray-8 px-6 pt-5"
+    class="flex max-h-[140px] items-center gap-2 overflow-hidden bg-surface-base text-ink-gray-8 px-6 pt-5"
     :class="config.delta ? 'pb-6' : 'pb-3'"
   >
     <slot name="body">
       <div class="flex w-full flex-col">
         <slot name="title">
-          <span class="truncate text-sm font-medium text-ink-gray-5">
+          <span class="truncate text-sm-medium text-ink-gray-5">
             {{ config.title }}
           </span>
         </slot>
@@ -25,15 +25,15 @@
         <slot name="delta" v-bind="{ formatValue }">
           <div
             v-if="config.delta"
-            class="flex items-center gap-0.5 text-xs font-medium"
+            class="flex items-center gap-0.5 text-xs-medium"
             :class="[
               config.negativeIsBetter
                 ? config.delta >= 0
-                  ? 'text-ink-red-4'
-                  : 'text-ink-green-3'
+                  ? 'text-ink-red-8'
+                  : 'text-ink-green-6'
                 : config.delta >= 0
-                  ? 'text-ink-green-3'
-                  : 'text-ink-red-4',
+                  ? 'text-ink-green-6'
+                  : 'text-ink-red-8',
             ]"
           >
             <span class="">

package/src/components/Charts/eChartOptions.ts

@@ -133,7 +133,11 @@ export default function useEchartsOptions(config: AxisChartConfig) {
   }
 }
 
-export function getTitleOptions(title: string, subtitle?: string, isRTL?: boolean) {
+export function getTitleOptions(
+  title: string,
+  subtitle?: string,
+  isRTL?: boolean,
+) {
   return {
     top: '4px',
     left: isRTL ? 'right' : '0.8%',
@@ -168,15 +172,19 @@ function getXAxisOptions(config: AxisChartConfig) {
         boundaryGap: false,
         inverse: isRTL,
         position: 'top',
-        name: isRTL ? `← ${config.yAxis.title}` : `${config.yAxis.title} →`,
+        name: config.yAxis.title
+          ? isRTL
+            ? `← ${config.yAxis.title}`
+            : `${config.yAxis.title} →`
+          : undefined,
         nameGap: 6,
         nameLocation: 'end',
         nameTextStyle: {
           align: isRTL ? 'left' : 'right',
           verticalAlign: 'bottom',
           padding: [0, 0, 26, 0],
-          backgroundColor: 'var(--surface-white)',
-          borderColor: 'var(--surface-white)',
+          backgroundColor: 'var(--surface-base)',
+          borderColor: 'var(--surface-base)',
           color: 'var(--ink-gray-8)',
           borderWidth: 4,
         },
@@ -231,7 +239,10 @@ function getXAxisOptions(config: AxisChartConfig) {
         },
       }
 
-  return mergeDeep(options, config.swapXY ? config.yAxis.echartOptions : config.xAxis.echartOptions)
+  return mergeDeep(
+    options,
+    config.swapXY ? config.yAxis.echartOptions : config.xAxis.echartOptions,
+  )
 }
 
 function getYAxisOptions(config: AxisChartConfig) {
@@ -268,15 +279,15 @@ function getYAxisOptions(config: AxisChartConfig) {
         scale: false,
         position: isRTL ? 'right' : 'left',
         boundaryGap: ['0%', '1%'],
-        name: `↑ ${config.yAxis.title}`,
+        name: config.yAxis.title ? `↑ ${config.yAxis.title}` : undefined,
         nameGap: 6,
         nameLocation: 'end',
         nameTextStyle: {
           align: isRTL ? 'right' : 'left',
           verticalAlign: 'top',
           padding: isRTL ? [0, -2, 0, 0] : [0, 0, 0, -2],
-          backgroundColor: 'var(--surface-white)',
-          borderColor: 'var(--surface-white)',
+          backgroundColor: 'var(--surface-base)',
+          borderColor: 'var(--surface-base)',
           color: 'var(--ink-gray-8)',
           borderWidth: 4,
         },
@@ -309,7 +320,7 @@ function getYAxisOptions(config: AxisChartConfig) {
 
   primaryYAxisOptions = mergeDeep(
     primaryYAxisOptions,
-    config.swapXY ? config.xAxis.echartOptions : config.yAxis.echartOptions
+    config.swapXY ? config.xAxis.echartOptions : config.yAxis.echartOptions,
   )
 
   let secondaryYAxisOptions = {
@@ -320,14 +331,18 @@ function getYAxisOptions(config: AxisChartConfig) {
     scale: false,
     position: isRTL ? 'left' : 'right',
     boundaryGap: ['0%', '1%'],
-    name: isRTL ? `↑ ${config.y2Axis?.title}` : `${config.y2Axis?.title} ↑`,
+    name: config.y2Axis?.title
+      ? isRTL
+        ? `↑ ${config.y2Axis.title}`
+        : `${config.y2Axis.title} ↑`
+      : undefined,
     nameLocation: 'end',
     nameTextStyle: {
       align: isRTL ? 'left' : 'right',
       verticalAlign: 'top',
       padding: isRTL ? [0, 0, 0, 5] : [0, 5, 0, 0],
-      backgroundColor: 'var(--surface-white)',
-      borderColor: 'var(--surface-white)',
+      backgroundColor: 'var(--surface-base)',
+      borderColor: 'var(--surface-base)',
       color: 'var(--ink-gray-8)',
     },
     nameGap: 6,
@@ -360,7 +375,7 @@ function getYAxisOptions(config: AxisChartConfig) {
 
   secondaryYAxisOptions = mergeDeep(
     secondaryYAxisOptions,
-    config.swapXY ? config.y2Axis?.echartOptions : config.y2Axis?.echartOptions
+    config.swapXY ? config.y2Axis?.echartOptions : config.y2Axis?.echartOptions,
   )
 
   return config.swapXY

package/src/components/Checkbox/Checkbox.api.md

@@ -32,6 +32,12 @@
     required: false,
     type: 'boolean | 0 | 1'
   },
+  {
+    name: 'indeterminate',
+    description: 'Renders the mixed "—" state (e.g. a select-all that\'s partially selected).\nPurely visual — the native `indeterminate` DOM property is not reflected as\nan attribute, so it must be set via this prop, not markup.',
+    required: false,
+    type: 'boolean'
+  },
   {
     name: 'label',
     description: 'Label rendered above (or beside, for binary controls) the input.',

package/src/components/Checkbox/Checkbox.cy.ts

@@ -19,7 +19,10 @@ describe('Checkbox', () => {
     })
 
     cy.get('input[type="checkbox"]').should('be.disabled')
-    cy.get('label').should('have.class', 'text-ink-gray-4')
+    cy.get('label')
+      .should('have.class', 'text-base')
+      .and('have.class', 'text-ink-gray-7')
+      .and('not.have.class', 'text-ink-gray-5')
   })
 
   it('test v-model', () => {
@@ -59,7 +62,12 @@ describe('Checkbox', () => {
 
     it('renders the canonical data-* hooks on the control', () => {
       cy.mount(Checkbox, {
-        props: { label: 'Accept', size: 'md', required: true, modelValue: true },
+        props: {
+          label: 'Accept',
+          size: 'md',
+          required: true,
+          modelValue: true,
+        },
       })
       cy.get('input').should('have.attr', 'data-slot', 'control')
       cy.get('input').should('have.attr', 'data-size', 'md')

package/src/components/Checkbox/Checkbox.md

@@ -2,6 +2,10 @@
 
 Allows users to select or deselect an option, commonly used in forms and settings where multiple choices are available.
 
+## Playground
+
+<ClientOnly><CheckboxBuilder /></ClientOnly>
+
 <ComponentPreview name="Checkbox-Default" layout="stacked" />
 
 ## Sizes
@@ -20,4 +24,28 @@ error stack below the row, indented under the label region.
 
 <ComponentPreview name="Checkbox-States" />
 
+## Group
+
+Stack related options into a vertical settings group.
+
+<ComponentPreview name="Checkbox-Group" />
+
+## With description
+
+Pair each option with helper text to clarify its effect.
+
+<ComponentPreview name="Checkbox-WithDescription" />
+
+## Horizontal group
+
+Wrap multiple options inline under a section title.
+
+<ComponentPreview name="Checkbox-HorizontalGroup" />
+
+## Setting row
+
+Compose a checkbox group as the value side of a label/value row.
+
+<ComponentPreview name="Checkbox-SettingRow" />
+
 <!-- @include: ./Checkbox.api.md -->

package/src/components/Checkbox/Checkbox.vue

@@ -1,16 +1,14 @@
 <template>
   <div class="inline-flex flex-col">
-    <div
-      class="inline-flex gap-2 rounded transition"
-      :class="rowClasses"
-    >
+    <div class="inline-flex gap-2 rounded transition" :class="rowClasses">
       <input
-        class="rounded-sm mt-[1px] bg-surface-white"
+        class="rounded-sm mt-[1px] bg-surface-base"
         :class="inputClasses"
         type="checkbox"
         :disabled="disabled"
         :id="inputId"
         :checked="checked"
+        :indeterminate="indeterminate"
         :required="required"
         :aria-required="required || undefined"
         :aria-invalid="hasError || undefined"
@@ -26,6 +24,7 @@
         :for-id="inputId"
         :label="props.label"
         :required="props.required"
+        color="gray-7"
         :class="labelClasses"
       >
         <template v-if="$slots.label" #default="slotProps">
@@ -41,11 +40,7 @@
       >
         <slot v-if="$slots.description" name="description" />
       </InputDescription>
-      <InputError
-        v-if="hasError"
-        :id="errorMessageId"
-        :lines="errorLines"
-      />
+      <InputError v-if="hasError" :id="errorMessageId" :lines="errorLines" />
     </div>
   </div>
 </template>
@@ -106,15 +101,7 @@ const {
 })
 
 const labelClasses = computed(() => {
-  return [
-    {
-      sm: 'text-base',
-      md: 'text-lg',
-    }[props.size],
-    'font-medium',
-    props.disabled ? 'text-ink-gray-4' : 'text-ink-gray-8',
-    'select-none',
-  ]
+  return 'select-none'
 })
 
 const rowClasses = computed(() => {
@@ -128,14 +115,14 @@ const rowClasses = computed(() => {
 
 const inputClasses = computed(() => {
   let baseClasses = props.disabled
-    ? 'border-outline-gray-2 bg-surface-menu-bar text-ink-gray-3'
-    : 'border-outline-gray-4 text-ink-gray-9 hover:border-outline-gray-5 focus:ring-offset-0 focus:border-outline-gray-8 active:border-outline-gray-6 transition'
+    ? 'border-outline-gray-2 bg-surface-sidebar text-ink-gray-3'
+    : 'border-outline-gray-4 text-ink-gray-9 hover:border-outline-gray-7 focus:ring-offset-0 focus:border-outline-gray-8 active:border-outline-gray-6 transition'
 
   let interactionClasses = props.disabled
     ? ''
     : props.padding
       ? 'focus:ring-0'
-      : 'hover:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 active:bg-surface-gray-2'
+      : 'hover:shadow-sm focus:ring-0 active:bg-surface-gray-2'
 
   let sizeClasses = {
     sm: 'w-3.5 h-3.5',

package/src/components/Checkbox/stories/Group.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { Checkbox } from 'frappe-ui'
+
+const settings = reactive({
+  paymentDays: true,
+  taxApplicable: true,
+  deductFullTax: false,
+  roundToInteger: false,
+  doNotInclude: true,
+  removeIfZero: false,
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1 items-start w-80">
+    <Checkbox v-model="settings.paymentDays" label="Depends on payment days" />
+    <Checkbox v-model="settings.taxApplicable" label="Is Tax Applicable" />
+    <Checkbox
+      v-model="settings.deductFullTax"
+      label="Deduct full tax on selected payroll date"
+    />
+    <Checkbox v-model="settings.roundToInteger" label="Round to the nearest integer" />
+    <Checkbox v-model="settings.doNotInclude" label="Do not include in total" disabled />
+    <Checkbox v-model="settings.removeIfZero" label="Remove if zero valued" />
+  </div>
+</template>

package/src/components/Checkbox/stories/HorizontalGroup.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { Checkbox } from 'frappe-ui'
+
+const settings = reactive({
+  inclusiveText: false,
+  paymentSchedule: false,
+  taxesAsTable: true,
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 items-start w-[32rem]">
+    <p class="text-lg-medium text-ink-gray-9">Print settings</p>
+    <div class="flex flex-wrap gap-x-8 gap-y-2">
+      <Checkbox v-model="settings.inclusiveText" label="Show inclusive text in print" />
+      <Checkbox
+        v-model="settings.paymentSchedule"
+        label="Show payment schedule in print"
+      />
+      <Checkbox v-model="settings.taxesAsTable" label="Show taxes as table in print" />
+    </div>
+  </div>
+</template>

package/src/components/Checkbox/stories/SettingRow.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { Checkbox } from 'frappe-ui'
+
+const ticketTypes = reactive({
+  primary: true,
+  promotions: true,
+  social: true,
+  updates: true,
+})
+</script>
+
+<template>
+  <div class="flex gap-3 items-start border-b border-outline-gray-1 py-3 w-[28rem]">
+    <p class="text-base text-ink-gray-7 pt-1.5 w-40 shrink-0">Default ticket type</p>
+    <div class="flex flex-col gap-1 items-start">
+      <Checkbox v-model="ticketTypes.primary" label="Primary" disabled />
+      <Checkbox v-model="ticketTypes.promotions" label="Promotions" />
+      <Checkbox v-model="ticketTypes.social" label="Social" />
+      <Checkbox v-model="ticketTypes.updates" label="Updates" />
+    </div>
+  </div>
+</template>

package/src/components/Checkbox/stories/WithDescription.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { Checkbox } from 'frappe-ui'
+
+const settings = reactive({
+  roundToInteger: false,
+  removeIfZero: false,
+})
+
+const helperText =
+  'If enabled, the value specified or calculated in this component will not contribute to the earnings or deductions. However, its value can be referenced by other components that can be added or deducted.'
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 items-start w-[28rem]">
+    <Checkbox
+      v-model="settings.roundToInteger"
+      label="Round to the nearest integer"
+      :description="helperText"
+    />
+    <Checkbox
+      v-model="settings.removeIfZero"
+      label="Remove if zero valued"
+      :description="helperText"
+    />
+  </div>
+</template>

package/src/components/Checkbox/types.ts

@@ -16,6 +16,13 @@ export interface CheckboxProps extends InputLabelingProps {
 
   /** Checked state of the checkbox. `boolean` is canonical; `1`/`0` are kept for v1 backwards compatibility. */
   modelValue?: boolean | 1 | 0
+
+  /**
+   * Renders the mixed "—" state (e.g. a select-all that's partially selected).
+   * Purely visual — the native `indeterminate` DOM property is not reflected as
+   * an attribute, so it must be set via this prop, not markup.
+   */
+  indeterminate?: boolean
 }
 
 export interface CheckboxEmits {

package/src/components/CodeEditor/CodeEditor.api.md

@@ -0,0 +1,139 @@
+<!-- Auto Generated by scripts/propsgen.ts -->
+<script setup>
+  import PropsTable from '@/components/Docs/PropsTable.vue'
+  import SlotsTable from '@/components/Docs/SlotsTable.vue'
+  import EmitsTable from '@/components/Docs/EmitsTable.vue'
+
+  const codeEditorProps = [
+  {
+    name: 'modelValue',
+    description: 'The editor\'s text content (controlled, two-way via `v-model`).',
+    required: true,
+    type: 'string'
+  },
+  {
+    name: 'language',
+    description: 'CodeMirror language key; falls through to plain text when unset/unknown.\nTyped as `CodeLanguage | (string & {})` so the known keys autocomplete\nwhile an arbitrary string still type-checks.',
+    required: false,
+    type: 'CodeLanguage | (string & {})',
+    default: '"plain"'
+  },
+  {
+    name: 'disabled',
+    description: 'If true, the editor is disabled: greyed out and not editable.',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  },
+  {
+    name: 'placeholder',
+    description: 'Placeholder shown when the editor is empty.',
+    required: false,
+    type: 'string',
+    default: '""'
+  },
+  {
+    name: 'variant',
+    description: 'Surface style; derived from the shared `InputVariant` union so the code\nfield can\'t drift from the TextInput/Textarea fields it sits next to.\n`subtle` is the filled default, `outline` is a bordered-on-white box.\n`ghost` (borderless) is excluded — a borderless code surface reads as plain\ntext and loses the affordance that it\'s an editable field. Defaults to\n`subtle`.',
+    required: false,
+    type: '"subtle" | "outline"',
+    default: '"subtle"'
+  },
+  {
+    name: 'size',
+    description: 'Size token, mirroring frappe-ui inputs. Scales the editor\'s font size and\nminimum height (`sm | md | lg | xl`). Defaults to `md`.',
+    required: false,
+    type: 'InputSize',
+    default: '"md"'
+  },
+  {
+    name: 'label',
+    description: 'Label rendered above (or beside, for binary controls) the input.',
+    required: false,
+    type: 'string'
+  },
+  {
+    name: 'description',
+    description: 'Helper text rendered below the input.\nHidden when `error` is set.',
+    required: false,
+    type: 'string'
+  },
+  {
+    name: 'error',
+    description: 'Error message rendered below the input. When set, the control receives\n`aria-invalid="true"` and `data-state="invalid"`. May be either a string\nor an `Error` object whose `messages?: string[]` is rendered as stacked\nlines (with `Error.message` as the fallback).',
+    required: false,
+    type: 'string | FrappeUIError'
+  },
+  {
+    name: 'required',
+    description: 'Marks the field as required. Renders an asterisk next to the label and\nforwards `required` / `aria-required` to the underlying control.',
+    required: false,
+    type: 'boolean'
+  },
+  {
+    name: 'id',
+    description: 'HTML id of the underlying control. Auto-generated via `useId()` if omitted.',
+    required: false,
+    type: 'string'
+  }
+]
+
+  const codeEditorSlots = [
+  {
+    name: 'label',
+    description: 'Overrides the rendered label content. Receives `{ required }`.',
+    type: '{ required: boolean; }'
+  },
+  {
+    name: 'description',
+    description: 'Overrides the rendered description content.',
+    type: 'any'
+  }
+]
+
+  const codeEditorEmits = [
+  {
+    name: 'update:modelValue',
+    description: 'Fired when the model value changes.',
+    type: '[value: string]'
+  },
+  {
+    name: 'change',
+    description: 'Fired after the value is committed.',
+    type: '[value: string]'
+  },
+  {
+    name: 'overflow',
+    description: '',
+    type: '[overflowing: boolean]'
+  }
+]
+
+  const codePreviewProps = [
+  {
+    name: 'modelValue',
+    description: 'The source text to render as sanitized preview output.',
+    required: true,
+    type: 'string'
+  },
+  {
+    name: 'language',
+    description: 'Only `markdown` / `html` render a preview; anything else renders nothing.',
+    required: false,
+    type: 'CodeLanguage | (string & {})'
+  }
+]
+</script>
+## API Reference
+
+### CodeEditor
+
+<PropsTable name="CodeEditor" :data="codeEditorProps"/>
+
+<SlotsTable :data="codeEditorSlots"/>
+
+<EmitsTable :data="codeEditorEmits"/>
+
+### CodePreview
+
+<PropsTable folder="CodeEditor" name="CodePreview" :data="codePreviewProps"/>