frappe-ui 1.0.0-beta.20 → 1.0.0-beta.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.20",
+  "version": "1.0.0-beta.24",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": [
@@ -172,6 +172,7 @@
     "@tiptap/extension-typography": "^3.26.0",
     "@tiptap/extension-underline": "^3.26.0",
     "@tiptap/extensions": "^3.26.0",
+    "@tiptap/markdown": "^3.26.0",
     "@tiptap/pm": "^3.26.0",
     "@tiptap/starter-kit": "^3.26.0",
     "@tiptap/suggestion": "^3.26.0",

package/src/components/Avatar/Avatar.api.md

@@ -30,6 +30,13 @@
     required: false,
     type: '"circle" | "square"',
     default: '"circle"'
+  },
+  {
+    name: 'theme',
+    description: 'Visual color theme used for the fallback avatar',
+    required: false,
+    type: '"gray" | "blue" | "green" | "amber" | "red" | "violet"',
+    default: '"gray"'
   }
 ]
 
@@ -51,4 +58,3 @@
 <PropsTable name="Avatar" :data="propsData"/> 
 
 <SlotsTable :data="slotsData"/> 
-

package/src/components/Avatar/Avatar.cy.ts

@@ -44,4 +44,25 @@ describe('Avatar', () => {
 
     cy.get('[data-cy="avatar"]').should('have.text', 'A')
   })
+
+  it('Uses gray fallback theme by default', () => {
+    cy.mount(Avatar, {
+      props: { 'data-cy': 'avatar', label: 'Abc' },
+    })
+
+    cy.get('[data-cy="avatar"] > div')
+      .should('have.class', 'bg-surface-gray-2')
+      .and('have.class', 'text-ink-gray-5')
+  })
+
+  it('Supports colorful fallback themes', () => {
+    cy.mount(Avatar, {
+      props: { 'data-cy': 'avatar', label: 'Abc', theme: 'blue' },
+    })
+
+    cy.get('[data-cy="avatar"] > div')
+      .should('have.class', 'bg-surface-blue-2')
+      .and('have.class', 'text-ink-blue-8')
+  })
+
 })

package/src/components/Avatar/Avatar.md

@@ -6,10 +6,13 @@ A visual representation of a user, typically shown as an image, initials, or an
 
 <ClientOnly><AvatarBuilder /></ClientOnly>
 
-## Themes
+## Shapes
 <ComponentPreview name="Avatar-Shapes" />
 
-## Controlled state
+## Sizes
 <ComponentPreview name="Avatar-Sizes" />
 
+## Themes
+<ComponentPreview name="Avatar-Themes" />
+
 <!-- @include: ./Avatar.api.md -->

package/src/components/Avatar/Avatar.vue

@@ -12,8 +12,8 @@
     />
     <div
       v-else
-      class="flex h-full w-full items-center justify-center bg-surface-gray-2 uppercase text-ink-gray-5 select-none"
-      :class="[labelClasses, shapeClasses]"
+      class="flex h-full w-full items-center justify-center uppercase select-none"
+      :class="[labelClasses, fallbackThemeClasses, shapeClasses]"
     >
       <div :class="iconClasses" v-if="$slots.default">
         <slot></slot>
@@ -37,14 +37,47 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import type { AvatarProps } from './types'
+import { ref, computed, useAttrs } from 'vue'
+import type { AvatarProps, AvatarTheme } from './types'
 
 const imgFetchError = ref(false)
 
 const props = withDefaults(defineProps<AvatarProps>(), {
   size: 'md',
   shape: 'circle',
+  theme: 'gray',
+})
+
+const fallbackThemeClasses = computed(() => {
+  const classes: Record<AvatarTheme, string> = {
+    gray: 'bg-surface-gray-2 text-ink-gray-5',
+    blue: 'bg-surface-blue-2 text-ink-blue-8',
+    green: 'bg-surface-green-2 text-ink-green-8',
+    amber: 'bg-surface-amber-2 text-ink-amber-8',
+    red: 'bg-surface-red-2 text-ink-red-8',
+    violet: 'bg-surface-violet-2 text-ink-violet-8',
+  }
+  return classes[props.theme]
+})
+
+// Let a consumer size the avatar with a Tailwind utility (`class="size-16"`)
+// instead of the `size` prop enum. When a sizing utility is present we drop the
+// enum's `w-*/h-*` so the two don't both land on the root and fight; the class
+// (applied via inheritAttrs) then wins on its own. Handles responsive/variant
+// prefixes like `sm:size-16`.
+const attrs = useAttrs()
+const hasSizeOverride = computed(() => {
+  const cls = Array.isArray(attrs.class)
+    ? attrs.class.join(' ')
+    : typeof attrs.class === 'string'
+      ? attrs.class
+      : ''
+  return cls.split(/\s+/).some((token) => {
+    const base = token.includes(':')
+      ? token.slice(token.lastIndexOf(':') + 1)
+      : token
+    return /^-?(size|w|h|min-w|max-w|min-h|max-h)-/.test(base)
+  })
 })
 
 const shapeClasses = computed(() => {
@@ -63,6 +96,7 @@ const shapeClasses = computed(() => {
 })
 
 const sizeClasses = computed(() => {
+  if (hasSizeOverride.value) return ''
   return {
     xs: 'w-4 h-4',
     sm: 'w-5 h-5',
@@ -123,7 +157,7 @@ const iconClasses = computed(() => {
   }[props.size]
 })
 
-function handleImageError(err) {
+function handleImageError(err: Event) {
   if (err.type) {
     imgFetchError.value = true
   }
@@ -136,5 +170,4 @@ defineSlots<{
   /** Small indicator shown at the bottom-right of the avatar */
   indicator?: () => any
 }>()
-
 </script>

package/src/components/Avatar/index.ts

@@ -1,2 +1,2 @@
 export { default as Avatar } from './Avatar.vue'
-export type { AvatarProps } from './types'
+export type { AvatarProps, AvatarTheme } from './types'

package/src/components/Avatar/stories/Themes.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Avatar } from 'frappe-ui'
+import type { AvatarTheme } from 'frappe-ui'
+
+const themes: AvatarTheme[] = [
+  'gray',
+  'blue',
+  'green',
+  'amber',
+  'red',
+  'violet',
+]
+</script>
+
+<template>
+  <Avatar
+    v-for="theme in themes"
+    :key="theme"
+    :label="theme"
+    :theme="theme"
+    size="lg"
+  />
+</template>

package/src/components/Avatar/types.ts

@@ -1,3 +1,11 @@
+export type AvatarTheme =
+  | 'gray'
+  | 'blue'
+  | 'green'
+  | 'amber'
+  | 'red'
+  | 'violet'
+
 export interface AvatarProps {
   /** Image URL used for the avatar */
   image?: string
@@ -10,4 +18,7 @@ export interface AvatarProps {
 
   /** Defines the avatar shape */
   shape?: 'circle' | 'square'
+
+  /** Visual color theme used for the fallback avatar */
+  theme?: AvatarTheme
 }

package/src/components/BottomSheet/BottomSheet.api.md

@@ -0,0 +1,57 @@
+<!-- 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: 'open',
+    description: 'Controls whether the sheet is open (`v-model:open`).',
+    required: false,
+    type: 'boolean'
+  },
+  {
+    name: 'title',
+    description: 'Optional centered title rendered in the drag-handle area.',
+    required: false,
+    type: 'string'
+  },
+  {
+    name: 'dismissible',
+    description: 'Allow outside-click, Escape, and swipe-down to close. Default `true`.',
+    required: false,
+    type: 'boolean',
+    default: 'true'
+  }
+]
+
+  const slotsData = [
+  {
+    name: 'default',
+    description: '',
+    type: '{}'
+  }
+]
+
+  const emitsData = [
+  {
+    name: 'update:open',
+    description: 'Fired when the open state changes.',
+    type: '[value: boolean]'
+  },
+  {
+    name: 'after-leave',
+    description: '',
+    type: '[]'
+  }
+]
+</script>
+
+## API Reference
+
+<PropsTable name="BottomSheet" :data="propsData"/>
+
+<SlotsTable :data="slotsData"/>
+
+<EmitsTable :data="emitsData"/>

package/src/components/BottomSheet/BottomSheet.vue

@@ -0,0 +1,232 @@
+<template>
+  <DialogRoot v-model:open="isOpen">
+    <DialogPortal>
+      <DialogOverlay
+        class="fixed inset-0 z-50 bg-black-overlay-200 dark:bg-black-overlay-700 bottom-sheet-overlay outline-none"
+        @after-leave="emit('after-leave')"
+      />
+      <DialogContent
+        class="fixed inset-x-0 bottom-0 z-50 mx-auto w-full max-w-2xl transform-gpu rounded-t-[36px] bg-surface-base shadow-lg [corner-shape:squircle] bottom-sheet-content focus:outline-none after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-surface-base"
+        :style="dragStyle"
+        :aria-label="title || 'Bottom sheet'"
+        @escape-key-down="onDismissAttempt"
+        @interact-outside="onDismissAttempt"
+        @open-auto-focus="(e: Event) => e.preventDefault()"
+      >
+        <div
+          ref="handleRef"
+          class="cursor-grab touch-none select-none active:cursor-grabbing"
+        >
+          <div class="flex justify-center pb-2 pt-3">
+            <div class="h-1.5 w-10 rounded-full bg-surface-gray-3" />
+          </div>
+          <DialogTitle
+            v-if="title"
+            class="px-2 pb-3 pt-2 text-center text-3xl-semibold text-ink-gray-9"
+          >
+            {{ title }}
+          </DialogTitle>
+        </div>
+        <div class="h-[70vh] overflow-y-auto">
+          <slot />
+        </div>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import {
+  DialogRoot,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogTitle,
+} from 'reka-ui'
+import { usePointerSwipe } from '@vueuse/core'
+import type { BottomSheetProps, BottomSheetEmits } from './types'
+
+const props = withDefaults(defineProps<BottomSheetProps>(), {
+  dismissible: true,
+})
+const emit = defineEmits<BottomSheetEmits>()
+
+const isOpen = computed({
+  get: () => props.open || false,
+  set(value: boolean) {
+    emit('update:open', value)
+  },
+})
+
+function onDismissAttempt(event: Event) {
+  if (!props.dismissible) event.preventDefault()
+}
+
+// Swipe-down-to-dismiss on the handle. While dragging we translate the sheet
+// 1:1 with the pointer (transition off). On release we either fling it shut
+// *from the release point* or spring it back to rest.
+const handleRef = ref<HTMLElement | null>(null)
+const dragY = ref(0)
+const dragging = ref(false)
+const closing = ref(false)
+
+// Dismiss when the drag passes this fraction of the sheet's own height...
+const CLOSE_HEIGHT_RATIO = 0.25
+// ...or when released with at least this downward speed (px per ms) — a flick.
+const CLOSE_VELOCITY = 0.5
+const CLOSE_DURATION = 260
+
+// Recent (offset, timestamp) samples during a drag, for release-velocity.
+let samples: { y: number; t: number }[] = []
+// Sheet height captured at drag start — drives both the rubber-band and the
+// height-relative close threshold without re-measuring on every move.
+let dragHeight = 0
+
+/**
+ * iOS-style resistance for the upward overscroll: the further you pull past the
+ * resting position, the less the sheet follows, asymptotically. `overscroll` is
+ * a positive distance; returns the (negative) damped offset.
+ */
+function rubberband(overscroll: number, dimension: number, constant = 0.55) {
+  const d = dimension || window.innerHeight
+  return -((overscroll * d * constant) / (d + constant * overscroll))
+}
+
+/** Downward speed (px/ms) over the last ~100ms of the drag; positive = down. */
+function flickVelocity() {
+  if (samples.length < 2) return 0
+  const latest = samples[samples.length - 1]
+  const oldest = samples.find((s) => latest.t - s.t <= 100) ?? samples[0]
+  const dt = latest.t - oldest.t
+  return dt > 0 ? (latest.y - oldest.y) / dt : 0
+}
+
+const dragStyle = computed(() => {
+  // Fling shut: keep sliding down from the current offset and off-screen.
+  // `animation: none` suppresses reka's exit keyframe so it can't restart the
+  // slide from translateY(0) — which is what caused the "jump back up" flash.
+  if (closing.value) {
+    return {
+      transform: 'translateY(100%)',
+      transition: `transform ${CLOSE_DURATION}ms cubic-bezier(0.32, 0.72, 0, 1)`,
+      animation: 'none',
+    }
+  }
+  // Live drag: track the pointer with no transition.
+  if (dragging.value) {
+    return { transform: `translateY(${dragY.value}px)`, transition: 'none' }
+  }
+  // Rest / spring-back.
+  return {
+    transform: dragY.value ? `translateY(${dragY.value}px)` : undefined,
+    transition: 'transform 200ms ease-out',
+  }
+})
+
+const { distanceY, direction } = usePointerSwipe(handleRef, {
+  // Accept mouse and pen as well as touch, so the handle is draggable on desktop.
+  pointerTypes: ['mouse', 'touch', 'pen'],
+  // Track from the first pixel — the default 50px threshold makes the sheet sit
+  // still, then jump 50px once crossed, which reads as choppy.
+  threshold: 0,
+  onSwipeStart() {
+    samples = []
+    dragHeight =
+      handleRef.value?.closest<HTMLElement>('.bottom-sheet-content')
+        ?.offsetHeight ?? window.innerHeight
+  },
+  onSwipe() {
+    if (!props.dismissible || closing.value) return
+    dragging.value = true
+    // distanceY is start.y - current.y, so -distanceY is +down / -up.
+    // Down tracks 1:1; up gets rubber-band resistance and springs back on release.
+    const raw = -distanceY.value
+    dragY.value = raw >= 0 ? raw : rubberband(-raw, dragHeight)
+    samples.push({ y: dragY.value, t: performance.now() })
+  },
+  onSwipeEnd() {
+    if (!props.dismissible || closing.value) return
+    dragging.value = false
+    // Close on either a long-enough downward pull (relative to the sheet's
+    // height) or a fast downward flick; anything else (incl. an upward pull)
+    // springs back to rest.
+    const draggedDown = direction.value === 'down' && dragY.value > 0
+    const shouldClose =
+      draggedDown &&
+      (dragY.value > dragHeight * CLOSE_HEIGHT_RATIO ||
+        flickVelocity() > CLOSE_VELOCITY)
+    if (shouldClose) {
+      // Animate the fling, then unmount. `closing` stays true through the
+      // unmount so reka drops the node without replaying its own exit.
+      closing.value = true
+      window.setTimeout(() => (isOpen.value = false), CLOSE_DURATION + 20)
+    } else {
+      dragY.value = 0
+    }
+  },
+})
+
+// Fresh drag state each time the sheet opens.
+watch(isOpen, (open) => {
+  if (open) {
+    closing.value = false
+    dragY.value = 0
+  }
+})
+</script>
+
+<style scoped>
+@keyframes bottom-sheet-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes bottom-sheet-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes bottom-sheet-content-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes bottom-sheet-content-out {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+:global(.bottom-sheet-overlay[data-state='open']) {
+  animation: bottom-sheet-overlay-in 150ms ease-out;
+}
+
+:global(.bottom-sheet-overlay[data-state='closed']) {
+  animation: bottom-sheet-overlay-out 200ms ease-in;
+}
+
+/* iOS-style sheet easing (fast-out, settle-in) — a spring feel without a lib. */
+:global(.bottom-sheet-content[data-state='open']) {
+  animation: bottom-sheet-content-in 300ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+:global(.bottom-sheet-content[data-state='closed']) {
+  animation: bottom-sheet-content-out 200ms ease-in;
+}
+</style>

package/src/components/BottomSheet/index.ts

@@ -0,0 +1,6 @@
+export { default as BottomSheet } from './BottomSheet.vue'
+export type {
+  BottomSheetProps,
+  BottomSheetEmits,
+  BottomSheetSlots,
+} from './types'

package/src/components/BottomSheet/types.ts

@@ -0,0 +1,23 @@
+export interface BottomSheetProps {
+  /** Controls whether the sheet is open (`v-model:open`). */
+  open?: boolean
+
+  /** Optional centered title rendered in the drag-handle area. */
+  title?: string
+
+  /** Allow outside-click, Escape, and swipe-down to close. Default `true`. */
+  dismissible?: boolean
+}
+
+export interface BottomSheetEmits {
+  /** Fired when the open state changes via `v-model:open`. */
+  'update:open': [value: boolean]
+
+  /** Fired after the close animation finishes. */
+  'after-leave': []
+}
+
+export interface BottomSheetSlots {
+  /** Sheet body, rendered in a scrollable region below the handle. */
+  default?: () => any
+}

package/src/components/Calendar/Calendar.api.md

@@ -8,33 +8,34 @@
   {
     name: 'events',
     description: '',
-    required: false,
-    type: 'Record<string, any>',
+    required: true,
+    type: 'CalendarEvent[]',
     default: '[]'
   },
   {
     name: 'config',
     description: '',
     required: false,
-    type: 'Record<string, any>'
+    type: 'Partial<CalendarConfig>',
+    default: '{}'
   },
   {
     name: 'onClick',
     description: '',
     required: false,
-    type: 'Function'
+    type: '((data: { e: MouseEvent; calendarEvent: CalendarEvent; }) => void)'
   },
   {
     name: 'onDblClick',
     description: '',
     required: false,
-    type: 'Function'
+    type: '((data: { e: MouseEvent | null; calendarEvent: CalendarEvent; }) => void)'
   },
   {
     name: 'onCellClick',
     description: '',
     required: false,
-    type: 'Function'
+    type: '((data: CalendarCellClickData) => void)'
   }
 ]
 
@@ -42,12 +43,12 @@
   {
     name: 'header',
     description: '',
-    type: '{ currentMonthYear: any; currentYear: number; currentMonth: number; enabledModes: { label: string; v'
+    type: '{ currentMonthYear: string; currentYear: number; currentMonth: number; enabledModes: CalendarActionO'
   },
   {
     name: 'event-popover-content',
     description: '',
-    type: 'any'
+    type: '{ calendarEvent: { [x: string]: unknown; id?: string | number | undefined; name?: string | number | '
   },
   {
     name: 'daily-header',
@@ -60,30 +61,29 @@
   {
     name: 'delete',
     description: '',
-    type: 'any[]'
+    type: '[eventID: string | number | undefined]'
   },
   {
     name: 'create',
     description: '',
-    type: 'any[]'
+    type: '[event: CalendarEvent]'
   },
   {
     name: 'update',
     description: '',
-    type: 'any[]'
+    type: '[event: CalendarEvent]'
   },
   {
     name: 'rangeChange',
     description: '',
-    type: 'any[]'
+    type: '[payload: { view: CalendarMode; startDate: string; endDate: string; }]'
   }
 ]
 </script>
 ## API Reference
 
-<PropsTable name="Calendar" :data="propsData"/> 
-
-<SlotsTable :data="slotsData"/> 
+<PropsTable name="Calendar" :data="propsData"/>
 
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>