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

package/src/components/Textarea/Textarea.vue

@@ -2,7 +2,7 @@
   <LabelingWrapper
     :enabled="hasLabeling"
     :wrapper-class="['space-y-1.5', attrs.class]"
-    :wrapper-style="attrs.style"
+    :wrapper-style="attrs.style as StyleValue"
   >
     <InputLabel
       v-if="props.label || $slots.label"
@@ -10,7 +10,6 @@
       :for-id="inputId"
       :label="props.label"
       :required="props.required"
-      class="text-p-sm font-medium text-ink-gray-7"
     >
       <template v-if="$slots.label" #default="slotProps">
         <slot name="label" v-bind="slotProps" />
@@ -42,16 +41,13 @@
     >
       <slot v-if="$slots.description" name="description" />
     </InputDescription>
-    <InputError
-      v-if="hasError"
-      :id="errorMessageId"
-      :lines="errorLines"
-    />
+    <InputError v-if="hasError" :id="errorMessageId" :lines="errorLines" />
   </LabelingWrapper>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, useAttrs, useSlots } from 'vue'
+import type { StyleValue } from 'vue'
 import debounce from '../../utils/debounce'
 import { useInputLabeling } from '../../composables/useInputLabeling'
 import InputLabel from '../InputLabeling/InputLabel.vue'
@@ -102,10 +98,10 @@ const {
 const hasLabeling = computed(() => {
   return Boolean(
     props.label ||
-      slots.label ||
-      showDescription.value ||
-      slots.description ||
-      hasError.value,
+    slots.label ||
+    showDescription.value ||
+    slots.description ||
+    hasError.value,
   )
 })
 
@@ -120,7 +116,7 @@ const inputClasses = computed(() => {
     sm: 'text-base rounded',
     md: 'text-base rounded',
     lg: 'text-lg rounded-md',
-    xl: 'text-xl rounded-md',
+    xl: 'text-2xl rounded-md',
   }[props.size]
 
   let paddingClasses = {
@@ -133,16 +129,16 @@ const inputClasses = computed(() => {
   let variant = props.disabled ? 'disabled' : props.variant
   let variantClasses = {
     subtle:
-      'border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+      'border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-elevation-2 hover:bg-surface-gray-3 focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0',
     outline:
-      'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+      'border border-outline-gray-2 bg-surface-base placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0',
     disabled: [
       'border bg-surface-gray-1 placeholder-ink-gray-3',
       props.variant === 'outline'
         ? 'border-outline-gray-2'
         : 'border-transparent',
     ],
-    ghost: 'border-0 focus:ring-0 focus-visible:ring-0',
+    ghost: 'border-0 focus:ring-0 focus-visible:outline-none',
   }[variant]
 
   return [

package/src/components/ThemeSwitcher/ThemePreview.vue

@@ -0,0 +1,74 @@
+<!-- Presentational, theme-independent mock shown inside each ThemeSwitcher
+     card: a window (PreviewWindow) inset on a gray "desktop" frame. The
+     light/dark previews use one full-width frame; the system preview sets a
+     light and a dark frame side by side-->
+<template>
+  <div :class="{ flex: frames.length > 1 }">
+    <div
+      v-for="(frame, index) in frames"
+      :key="index"
+      :class="frame.frameClass"
+    >
+      <PreviewWindow
+        :tone="frame.tone"
+        :bars="showBars"
+        :fill="frame.fill"
+        :logo="logo"
+        :name="name"
+        :logo-is-image="logoIsImage"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import type { Theme } from '../../utils/theme'
+import PreviewWindow, { type PreviewTone } from './previews/PreviewWindow.vue'
+
+defineOptions({ name: 'ThemePreview' })
+
+const props = defineProps<{
+  theme: Theme
+  logo?: string | Component
+  name?: string
+  logoIsImage: boolean
+}>()
+
+/** A window tone inset on its gray desktop frame. */
+interface PreviewFrame {
+  tone: PreviewTone
+  frameClass: string
+  /** Whether the window stretches to fill the frame (single) or is clipped (system). */
+  fill: boolean
+}
+
+const frames = computed<PreviewFrame[]>(() => {
+  if (props.theme === 'system') {
+    return [
+      {
+        tone: 'light',
+        fill: false,
+        frameClass:
+          'flex flex-1 overflow-hidden pl-5 pt-3.5 bg-surface-gray-2 rounded-tl-[10.5px] max-h-[78px]',
+      },
+      {
+        tone: 'dark',
+        fill: false,
+        frameClass:
+          'flex flex-1 overflow-hidden pl-5 pt-3.5 bg-surface-gray-3 rounded-tr-[10.5px] max-h-[78px]',
+      },
+    ]
+  }
+  return [
+    {
+      tone: props.theme === 'dark' ? 'dark' : 'light',
+      fill: true,
+      frameClass: 'pl-5 pt-3.5 bg-surface-gray-2 rounded-t-[10.5px]',
+    },
+  ]
+})
+
+// Content rows only appear on the single light/dark previews.
+const showBars = computed(() => props.theme !== 'system')
+</script>

package/src/components/ThemeSwitcher/ThemeSwitcher.api.md

@@ -0,0 +1,82 @@
+<!-- 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 propsData = [
+  {
+    name: 'modelValue',
+    description: 'Selected theme. Falls back to the shared `useTheme` state when unbound.',
+    required: false,
+    type: 'Theme'
+  },
+  {
+    name: 'label',
+    description: 'Heading rendered above the options.',
+    required: false,
+    type: 'string',
+    default: '"Theme"'
+  },
+  {
+    name: 'description',
+    description: 'Helper text rendered below the heading.',
+    required: false,
+    type: 'string',
+    default: '"Switch between light, dark, or system theme"'
+  },
+  {
+    name: 'logo',
+    description: 'Brand logo shown inside each preview. A string is treated as an image source; a component value is rendered with `<component :is>`.',
+    required: false,
+    type: 'string | Component'
+  },
+  {
+    name: 'name',
+    description: 'Brand name shown inside each preview.',
+    required: false,
+    type: 'string',
+    default: '""'
+  },
+  {
+    name: 'themeLabels',
+    description: 'Overrides the per-option labels. For richer per-item content, use the `#item-label` slot, which takes precedence over this prop.',
+    required: false,
+    type: 'Partial<Record<Theme, string>>'
+  }
+]
+
+  const slotsData = [
+  {
+    name: 'label',
+    description: 'Overrides the heading content.',
+    type: 'any'
+  },
+  {
+    name: 'description',
+    description: 'Overrides the helper-text content.',
+    type: 'any'
+  },
+  {
+    name: 'item-label',
+    description: 'Overrides a single option\'s label. Receives the option\'s `value`. Falls back to the `themeLabels` prop, then the built-in label.',
+    type: '{ value: Theme; }'
+  }
+]
+
+  const emitsData = [
+  {
+    name: 'update:modelValue',
+    description: 'Fired when the model value changes.',
+    type: '[theme: Theme]'
+  }
+]
+</script>
+## API Reference
+
+<PropsTable name="ThemeSwitcher" :data="propsData"/> 
+
+<SlotsTable :data="slotsData"/> 
+
+<EmitsTable :data="emitsData"/> 
+

package/src/components/ThemeSwitcher/ThemeSwitcher.cy.ts

@@ -0,0 +1,101 @@
+import ThemeSwitcher from './ThemeSwitcher.vue'
+import { _resetWarnDeprecated } from '../../utils/warnDeprecated'
+
+describe('<ThemeSwitcher />', () => {
+  beforeEach(() => {
+    _resetWarnDeprecated()
+    localStorage.removeItem('theme')
+    document.documentElement.removeAttribute('data-theme')
+  })
+
+  it('warns that ThemeSwitcher is deprecated', () => {
+    cy.window().then((win) => {
+      cy.spy(win.console, 'warn').as('consoleWarn')
+    })
+    cy.mount(ThemeSwitcher)
+    cy.get('@consoleWarn').should(
+      'have.been.calledWithMatch',
+      /ThemeSwitcher is deprecated.*Select.*useTheme/,
+    )
+  })
+
+  it('renders the three theme options as a radiogroup', () => {
+    cy.mount(ThemeSwitcher)
+
+    cy.get('[role="radiogroup"]').should('exist')
+    cy.get('[role="radio"]').should('have.length', 3)
+    cy.get('[data-theme-option="light"]').should('exist')
+    cy.get('[data-theme-option="dark"]').should('exist')
+    cy.get('[data-theme-option="system"]').should('exist')
+  })
+
+  it('renders the default heading and description', () => {
+    cy.mount(ThemeSwitcher)
+
+    cy.contains('Theme').should('exist')
+    cy.contains('Switch between light, dark, or system theme').should('exist')
+  })
+
+  it('drives <html data-theme> and emits on selection', () => {
+    cy.mount(ThemeSwitcher, {
+      props: { 'onUpdate:modelValue': cy.spy().as('onUpdate') },
+    })
+
+    cy.get('[data-theme-option="dark"]').click()
+    cy.get('@onUpdate').should('have.been.calledWith', 'dark')
+    cy.document().its('documentElement').should('have.attr', 'data-theme', 'dark')
+
+    cy.get('[data-theme-option="light"]').click()
+    cy.get('@onUpdate').should('have.been.calledWith', 'light')
+    cy.document().its('documentElement').should('have.attr', 'data-theme', 'light')
+  })
+
+  it('marks the bound theme as checked (controlled)', () => {
+    cy.mount(ThemeSwitcher, { props: { modelValue: 'dark' } })
+
+    cy.get('[data-theme-option="dark"]').should(
+      'have.attr',
+      'data-state',
+      'checked',
+    )
+    cy.get('[data-theme-option="light"]').should(
+      'have.attr',
+      'data-state',
+      'unchecked',
+    )
+  })
+
+  it('reflects the selection through aria-checked', () => {
+    cy.mount(ThemeSwitcher, { props: { modelValue: 'dark' } })
+
+    cy.get('[data-theme-option="dark"]').should(
+      'have.attr',
+      'aria-checked',
+      'true',
+    )
+    cy.get('[data-theme-option="light"]').should(
+      'have.attr',
+      'aria-checked',
+      'false',
+    )
+    cy.get('[data-theme-option="system"]').should(
+      'have.attr',
+      'aria-checked',
+      'false',
+    )
+  })
+
+  it('renders a custom brand name and translated option labels', () => {
+    cy.mount(ThemeSwitcher, {
+      props: {
+        name: 'Acme',
+        themeLabels: { light: 'Claro', dark: 'Oscuro', system: 'Sistema' },
+      },
+    })
+
+    cy.get('[data-theme-option="light"]').contains('Acme').should('exist')
+    cy.contains('Claro').should('exist')
+    cy.contains('Oscuro').should('exist')
+    cy.contains('Sistema').should('exist')
+  })
+})

package/src/components/ThemeSwitcher/ThemeSwitcher.md

@@ -0,0 +1,70 @@
+# ThemeSwitcher
+
+A labeled control for choosing between **light**, **dark**, and **system**
+appearance. Each option is a preview card depicting that mode, and selecting one
+drives the global `<html data-theme>` through [`useTheme`](#usetheme), so a bare
+`<ThemeSwitcher />` switches the whole app with no wiring.
+
+<ComponentPreview name="ThemeSwitcher-Default" layout="stacked" />
+
+## Branding
+
+Pass a `name` and a `logo` (an image URL or a Component) to show your branding
+inside the theme panel previews. The `label` and `description` props set the heading of the component.
+
+<ComponentPreview name="ThemeSwitcher-Branded" layout="stacked" />
+
+## Toggle button
+
+In a header or sidebar you rarely want the full card preview. You want a single
+labelled button that flips the state. Build one from the same
+[`useTheme`](#usetheme) composable: because both controls share the one
+`<html data-theme>`, they stay in sync, and the button drops straight into a
+sidebar or menu.
+
+<ComponentPreview name="ThemeSwitcher-Toggle" layout="stacked" />
+
+## In a user menu
+
+A user menu is the most common home for theme switching. Nest the three options
+as a hover submenu inside a [`Dropdown`](/docs/components/dropdown), drive them through the same
+[`useTheme`](#usetheme) singleton, and mark the active one with `selected` so the menu
+always reflects the shared `<html data-theme>`.
+
+<ComponentPreview name="ThemeSwitcher-Menu" layout="stacked" />
+
+## useTheme
+
+The component is backed by the `useTheme` composable, exported from the library.
+Its state is a shared singleton, so every consumer (the switcher, a sidebar
+toggle, a user-menu entry) stays in sync with the single `<html data-theme>`
+source of truth.
+
+There is nothing to set up. The first `useTheme()` call restores the saved theme
+(falling back to `system`) and starts following the OS preference. Calling it
+near your app root simply makes that happen as early as possible.
+
+```ts
+import { useTheme } from 'frappe-ui'
+
+const { currentTheme, setTheme, toggleTheme } = useTheme()
+```
+
+The selection persists to `localStorage` under the `theme` key and is reapplied
+on the next load.
+
+| Member            | Type                        | Description                                                        |
+| ----------------- | --------------------------- | ----------------------------------------------------------------- |
+| `currentTheme`    | `Ref<Theme>`                | The selected theme: `'light' \| 'dark' \| 'system'`.              |
+| `setTheme`        | `(theme: Theme) => void`    | Sets the theme, applies `data-theme`, and persists to storage.    |
+| `toggleTheme`     | `() => void`                | Flips between light and dark.                                      |
+| `initializeTheme` | `() => void`                | Restores the saved theme (or `system`). Run once automatically.   |
+| `getSystemTheme`  | `() => 'light' \| 'dark'`   | Resolves the current OS preference.                               |
+
+> **Avoid the flash.** The theme is applied from JavaScript once the app loads,
+> so a page that ships without a `data-theme` briefly shows the default theme
+> before switching. Set an initial `data-theme` on your `<html>`, or inline a
+> small script that reads `localStorage.theme`, to render the right theme from
+> the first paint.
+
+<!-- @include: ./ThemeSwitcher.api.md -->

package/src/components/ThemeSwitcher/ThemeSwitcher.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <div
+      v-if="showLabel || showDescription"
+      class="flex flex-col gap-1"
+    >
+      <span
+        v-if="showLabel"
+        :id="headingId"
+        class="text-base font-medium text-ink-gray-8"
+      >
+        <slot name="label">{{ props.label }}</slot>
+      </span>
+      <span
+        v-if="showDescription"
+        class="text-p-sm text-ink-gray-6"
+      >
+        <slot name="description">{{ props.description }}</slot>
+      </span>
+    </div>
+
+    <RadioGroupRoot
+      v-model="selected"
+      orientation="horizontal"
+      loop
+      data-slot="control"
+      class="flex items-center gap-3"
+      :aria-label="showLabel ? undefined : props.label || 'Theme'"
+      :aria-labelledby="showLabel ? headingId : undefined"
+    >
+      <RadioGroupItem
+        v-for="option in themeOptions"
+        :key="option.value"
+        v-slot="{ checked }"
+        as="template"
+        :value="option.value"
+      >
+        <div
+          data-slot="option"
+          :data-theme-option="option.value"
+          class="flex-1 max-w-[227px] min-h-[42px] cursor-pointer overflow-hidden rounded-lg border outline-none transition-colors motion-reduce:transition-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+          :class="checked ? 'border-outline-gray-5' : 'border-outline-gray-modals'"
+        >
+          <ThemePreview
+            :theme="option.value"
+            :logo="props.logo"
+            :name="props.name"
+            :logo-is-image="logoIsImage"
+          />
+          <div class="flex items-center justify-between border-t px-3 py-2 relative z-10 overflow-hidden">
+            <div class="text-base text-ink-gray-7">
+              <slot name="item-label" :value="option.value">{{
+                optionLabel(option)
+              }}</slot>
+            </div>
+            <div
+              class="size-3.5 rounded-full"
+              :class="
+                checked
+                  ? 'border-4 border-outline-gray-5'
+                  : 'border border-outline-gray-4'
+              "
+            />
+          </div>
+        </div>
+      </RadioGroupItem>
+    </RadioGroupRoot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useId, useSlots } from 'vue'
+import { RadioGroupItem, RadioGroupRoot } from 'reka-ui'
+import { useTheme, type Theme } from '../../utils/theme'
+import { warnDeprecated } from '../../utils/warnDeprecated'
+import ThemePreview from './ThemePreview.vue'
+import type { ThemeSwitcherProps } from './types'
+
+defineOptions({ name: 'ThemeSwitcher' })
+
+warnDeprecated('ThemeSwitcher', 'Select with the useTheme composable')
+
+interface ThemeOption {
+  value: Theme
+  defaultLabel: string
+}
+
+const themeOptions: ThemeOption[] = [
+  { value: 'light', defaultLabel: 'Light' },
+  { value: 'dark', defaultLabel: 'Dark' },
+  { value: 'system', defaultLabel: 'System' },
+]
+
+const props = withDefaults(defineProps<ThemeSwitcherProps>(), {
+  label: 'Theme',
+  description: 'Switch between light, dark, or system theme',
+  name: '',
+})
+
+const emit = defineEmits<{
+  /** Fired when the selected theme changes. */
+  'update:modelValue': [theme: Theme]
+}>()
+
+defineSlots<{
+  /** Overrides the heading content. */
+  label?: () => any
+  /** Overrides the helper-text content. */
+  description?: () => any
+  /**
+   * Overrides a single option's label. Receives the option's `value`.
+   * Falls back to the `themeLabels` prop, then the built-in label.
+   */
+  'item-label'?: (props: { value: Theme }) => any
+}>()
+
+const { currentTheme, setTheme } = useTheme()
+
+// Not `defineModel`: when unbound, the switcher falls back to the shared
+// `currentTheme` and must keep mirroring it in real time (so a separate toggle
+// button stays in sync); a local `defineModel` ref can't track that once
+// written. The setter always drives `setTheme`, so a bare `<ThemeSwitcher />`
+// still switches the app theme.
+const selected = computed<Theme>({
+  get: () => props.modelValue ?? currentTheme.value,
+  set: (value) => {
+    setTheme(value)
+    emit('update:modelValue', value)
+  },
+})
+
+const slots = useSlots()
+const headingId = useId()
+const showLabel = computed(() => Boolean(props.label || slots.label))
+const showDescription = computed(() =>
+  Boolean(props.description || slots.description),
+)
+const logoIsImage = computed(
+  () => typeof props.logo === 'string' && props.logo.length > 0,
+)
+
+function optionLabel(option: ThemeOption): string {
+  return props.themeLabels?.[option.value] ?? option.defaultLabel
+}
+</script>

package/src/components/ThemeSwitcher/index.ts

@@ -0,0 +1,2 @@
+export { default as ThemeSwitcher } from './ThemeSwitcher.vue'
+export type { ThemeSwitcherProps } from './types'

package/src/components/ThemeSwitcher/previews/PreviewWindow.vue

@@ -0,0 +1,74 @@
+<!-- SVG for the ThemeSwitcher preview card used in ThemePreview as per theme variant. -->
+<template>
+  <div
+    class="relative"
+    :class="fill ? 'w-full' : 'w-fit shrink-0'"
+  >
+    <svg
+      width="207"
+      height="68"
+      viewBox="0 0 207 68"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="block h-auto rounded-tl-sm"
+      :class="{ 'w-full': fill }"
+    >
+      <path d="M0 4C0 1.79086 1.79086 0 4 0H207V83H0V4Z" :fill="colors.background" />
+      <template v-if="bars">
+        <rect x="104" y="28" width="103" height="6" :fill="colors.bar" />
+        <rect x="104" y="39" width="103" height="6" :fill="colors.bar" />
+        <rect x="104" y="50" width="103" height="6" :fill="colors.bar" />
+      </template>
+      <rect x="4" y="3" width="6" height="6" rx="3" fill="#FF5F57" />
+      <rect x="13" y="3" width="6" height="6" rx="3" fill="#FEBC2D" />
+      <rect x="22" y="3" width="6" height="6" rx="3" fill="#28C840" />
+      <line y1="13.5" x2="207" y2="13.5" :stroke="colors.line" />
+    </svg>
+
+    <div
+      class="absolute flex items-center gap-1 text-xs font-semibold text-ink-gray-5 top-[24px] left-[10px]"
+    >
+      <img
+        v-if="logoIsImage"
+        :src="logo as string"
+        class="size-5 object-cover"
+        alt=""
+      />
+      <component
+        :is="logo"
+        v-else-if="logo"
+        class="size-5 shrink-0 rounded-[5px]"
+      />
+      <div v-if="name">{{ name }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+
+export type PreviewTone = 'light' | 'dark'
+
+defineOptions({ name: 'PreviewWindow' })
+
+const props = withDefaults(
+  defineProps<{
+    tone: PreviewTone
+    /** Placeholder content rows, shown for single previews, hidden for system. */
+    bars?: boolean
+    /** Stretch to the container instead of rendering at natural width. */
+    fill?: boolean
+    logo?: string | Component
+    name?: string
+    logoIsImage?: boolean
+  }>(),
+  { bars: true, fill: false },
+)
+
+const tones: Record<PreviewTone, { background: string; bar: string; line: string }> = {
+  light: { background: '#FFFFFF', bar: '#F3F3F3', line: '#EDEDED' },
+  dark: { background: '#171717', bar: '#383838', line: '#383838' },
+}
+
+const colors = computed(() => tones[props.tone])
+</script>

package/src/components/ThemeSwitcher/stories/Branded.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ThemeSwitcher } from 'frappe-ui'
+</script>
+
+<template>
+  <ThemeSwitcher
+    name="CRM"
+    logo="https://raw.githubusercontent.com/frappe/crm/develop/.github/logo.svg"
+    label="Appearance"
+    description="Pick how your branding looks on different theme modes"
+  />
+</template>

package/src/components/ThemeSwitcher/stories/Default.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ThemeSwitcher } from 'frappe-ui'
+</script>
+
+<template>
+  <ThemeSwitcher />
+</template>