frappe-ui 1.0.0-beta.3 → 1.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,
@@ -17,8 +17,8 @@
     "test:cypress:coverage": "cross-env COVERAGE=true cypress run --component",
     "coverage": "yarn test:coverage && yarn test:cypress:coverage && yarn coverage:merge",
     "coverage:merge": "tsx .github/scripts/merge-coverage.ts",
-    "type-check": "vue-tsc --noEmit",
-    "type-check:tsc": "tsc --noEmit",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json",
+    "type-check:tsc": "tsc --noEmit -p tsconfig.app.json",
     "format": "prettier -w ./src",
     "bump-and-release": "yarn test && git pull --rebase origin main && yarn run release-patch",
     "release-patch": "yarn version --patch && git push && git push --tags",
@@ -99,28 +99,38 @@
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.16",
     "@tiptap/core": "^3.11.0",
+    "@tiptap/extension-blockquote": "3.11.0",
+    "@tiptap/extension-bold": "3.11.0",
     "@tiptap/extension-bubble-menu": "^3.11.0",
     "@tiptap/extension-code": "^3.11.0",
     "@tiptap/extension-code-block": "^3.11.0",
     "@tiptap/extension-code-block-lowlight": "^3.11.0",
     "@tiptap/extension-color": "^3.11.0",
+    "@tiptap/extension-document": "3.11.0",
+    "@tiptap/extension-hard-break": "3.11.0",
     "@tiptap/extension-heading": "^3.11.0",
     "@tiptap/extension-highlight": "^3.11.0",
+    "@tiptap/extension-horizontal-rule": "3.11.0",
     "@tiptap/extension-image": "^3.11.0",
+    "@tiptap/extension-italic": "3.11.0",
     "@tiptap/extension-link": "^3.11.0",
     "@tiptap/extension-list": "^3.11.0",
     "@tiptap/extension-mention": "^3.11.0",
     "@tiptap/extension-node-range": "^3.11.0",
     "@tiptap/extension-placeholder": "^3.11.0",
+    "@tiptap/extension-paragraph": "3.11.0",
+    "@tiptap/extension-strike": "3.11.0",
     "@tiptap/extension-table": "^3.11.0",
     "@tiptap/extension-task-item": "^3.11.0",
     "@tiptap/extension-task-list": "^3.11.0",
+    "@tiptap/extension-text": "3.11.0",
     "@tiptap/extension-text-align": "^3.11.0",
     "@tiptap/extension-text-style": "^3.11.0",
     "@tiptap/extension-typography": "^3.11.0",
+    "@tiptap/extension-underline": "3.11.0",
     "@tiptap/extensions": "^3.11.0",
     "@tiptap/pm": "^3.11.0",
-    "@tiptap/starter-kit": "^3.11.0",
+    "@tiptap/starter-kit": "3.11.0",
     "@tiptap/suggestion": "^3.11.0",
     "@tiptap/vue-3": "^3.11.0",
     "@vueuse/core": "^10.4.1",
@@ -182,6 +192,22 @@
     "prosemirror-state": "1.4.3",
     "prosemirror-view": "1.40.0",
     "prosemirror-transform": "1.10.4",
+    "@tiptap/extension-blockquote": "3.11.0",
+    "@tiptap/extension-bold": "3.11.0",
+    "@tiptap/extension-bullet-list": "3.11.0",
+    "@tiptap/extension-document": "3.11.0",
+    "@tiptap/extension-dropcursor": "3.11.0",
+    "@tiptap/extension-gapcursor": "3.11.0",
+    "@tiptap/extension-hard-break": "3.11.0",
+    "@tiptap/extension-horizontal-rule": "3.11.0",
+    "@tiptap/extension-italic": "3.11.0",
+    "@tiptap/extension-list-item": "3.11.0",
+    "@tiptap/extension-list-keymap": "3.11.0",
+    "@tiptap/extension-ordered-list": "3.11.0",
+    "@tiptap/extension-paragraph": "3.11.0",
+    "@tiptap/extension-strike": "3.11.0",
+    "@tiptap/extension-text": "3.11.0",
+    "@tiptap/extension-underline": "3.11.0",
     "defu": "^6.1.5",
     "esbuild": "^0.25.0",
     "lodash": "^4.18.0",

package/src/components/Button/Button.api.md

@@ -10,27 +10,42 @@
     description: 'Visual color theme of the button',
     required: false,
     type: 'Theme',
-    default: '"gray"'
-  },
-  {
-    name: 'size',
-    description: 'Controls the button size',
-    required: false,
-    type: 'Size',
-    default: '"sm"'
+    default: '\'gray\''
   },
   {
     name: 'variant',
     description: 'Visual style of the button',
     required: false,
     type: 'Variant',
-    default: '"subtle"'
+    default: '\'subtle\''
+  },
+  {
+    name: 'type',
+    description: 'Native button type',
+    required: false,
+    type: '"button" | "submit" | "reset"',
+    default: '\'button\''
   },
   {
     name: 'label',
     description: 'Text label displayed inside the button',
     required: false,
-    type: 'string'
+    type: 'string',
+    default: 'undefined'
+  },
+  {
+    name: 'loading',
+    description: 'Shows a loading state and disables interaction',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  },
+  {
+    name: 'size',
+    description: 'Controls the button size',
+    required: false,
+    type: 'Size',
+    default: '\'sm\''
   },
   {
     name: 'icon',
@@ -54,20 +69,15 @@
     name: 'tooltip',
     description: 'Tooltip text shown on hover',
     required: false,
-    type: 'string'
-  },
-  {
-    name: 'loading',
-    description: 'Shows a loading state and disables interaction',
-    required: false,
-    type: 'boolean',
-    default: 'false'
+    type: 'string',
+    default: 'undefined'
   },
   {
     name: 'loadingText',
     description: 'Text shown while the button is loading',
     required: false,
-    type: 'string'
+    type: 'string',
+    default: 'undefined'
   },
   {
     name: 'disabled',
@@ -80,20 +90,15 @@
     name: 'route',
     description: 'Router destination when used as a link',
     required: false,
-    type: 'string | kt | Tt'
+    type: 'string | kt | Tt',
+    default: 'undefined'
   },
   {
     name: 'link',
     description: 'External link URL',
     required: false,
-    type: 'string'
-  },
-  {
-    name: 'type',
-    description: 'Native button type',
-    required: false,
-    type: '"button" | "submit" | "reset"',
-    default: '"button"'
+    type: 'string',
+    default: 'undefined'
   }
 ]
 
@@ -101,22 +106,22 @@
   {
     name: 'prefix',
     description: 'Content shown before the button label (left icon / custom content)',
-    type: 'any'
+    type: '[void]'
   },
   {
     name: 'icon',
     description: 'Icon-only content for icon buttons',
-    type: 'any'
+    type: '[void]'
   },
   {
     name: 'default',
     description: 'Main button content (overrides `label`)',
-    type: 'any'
+    type: '[void]'
   },
   {
     name: 'suffix',
     description: 'Content shown after the button label (right icon / custom content)',
-    type: 'any'
+    type: '[void]'
   }
 ]
 </script>

package/src/components/Button/Button.cy.ts

@@ -57,7 +57,7 @@ describe('<Button />', () => {
     })
     cy.get('button').should('be.disabled')
     cy.get('button').should('contain.text', 'Processing...')
-    cy.get('svg').should('exist') // Loading Spinner
+    cy.get('[role="status"]').should('exist') // Loading Spinner
   })
 
   it('handles prefix and suffix slots (replacing deprecated icon props)', () => {

package/src/components/Button/Button.vue

@@ -17,7 +17,7 @@ import {
 } from 'reka-ui'
 import { RouterLink } from 'vue-router'
 import FeatherIcon from '../FeatherIcon.vue'
-import LoadingIndicator from '../LoadingIndicator.vue'
+import Spinner from '../Spinner/Spinner.vue'
 import TooltipBubble from '../Tooltip/TooltipBubble.vue'
 import { warnFeatherIconUsage } from '../../utils/iconString'
 import { buttonProps, type ThemeVariant } from './types'
@@ -66,10 +66,7 @@ export default defineComponent({
     )
 
     const slotClasses = computed(
-      () =>
-        ({ xs: 'h-4', sm: 'h-4', md: 'h-4.5', lg: 'h-5', xl: 'h-6', '2xl': 'h-6' })[
-          props.size
-        ],
+      () => ({ xs: 'h-4', sm: 'h-4', md: 'h-4.5', lg: 'h-5' })[props.size],
     )
 
     const lucideSlotClasses = computed(
@@ -79,8 +76,6 @@ export default defineComponent({
           sm: 'size-4',
           md: 'size-4.5',
           lg: 'size-5',
-          xl: 'size-6',
-          '2xl': 'size-6',
         })[props.size],
     )
 
@@ -166,21 +161,22 @@ export default defineComponent({
             sm: 'h-7 w-7 rounded',
             md: 'h-8 w-8 rounded',
             lg: 'h-10 w-10 rounded-md',
-            xl: 'h-11.5 w-11.5 rounded-lg',
-            '2xl': 'h-13 w-13 rounded-xl',
           }[props.size]
         : {
             xs: 'h-6 text-sm px-1.5 rounded',
             sm: 'h-7 text-base px-2 rounded',
             md: 'h-8 text-base font-medium px-2.5 rounded',
             lg: 'h-10 text-lg font-medium px-3 rounded-md',
-            xl: 'h-11.5 text-xl font-medium px-3.5 rounded-lg',
-            '2xl': 'h-13 text-2xl font-medium px-3.5 rounded-xl',
           }[props.size]
 
       return [
         'inline-flex items-center justify-center gap-2 transition-colors focus:outline-none shrink-0',
-        isDisabled.value ? disabledClasses : variantClasses,
+        // Only an explicit `disabled` dims the button. A `loading` button keeps
+        // its normal look (it's still non-interactive via the native `disabled`
+        // attr below); `pointer-events-none` suppresses hover/active visuals so
+        // it doesn't appear clickable while busy.
+        props.disabled ? disabledClasses : variantClasses,
+        props.loading && !props.disabled ? 'pointer-events-none' : '',
         focusClasses,
         sizeClasses,
       ]
@@ -192,20 +188,28 @@ export default defineComponent({
     // The dynamic root: router link, external anchor, or native button. Using the
     // raw 'button' string (not <component :is>) sidesteps the historic recursion
     // with a globally-registered <Button> in consumer apps.
-    const root = computed<{ is: Component | string; props: Record<string, unknown> }>(
-      () => {
-        if (!isDisabled.value && props.route) {
-          return { is: RouterLink, props: { to: props.route } }
-        }
-        if (!isDisabled.value && props.link) {
-          return {
-            is: 'a',
-            props: { href: props.link, target: '_blank', rel: 'noreferrer noopener' },
-          }
+    const root = computed<{
+      is: Component | string
+      props: Record<string, unknown>
+    }>(() => {
+      if (!isDisabled.value && props.route) {
+        return { is: RouterLink, props: { to: props.route } }
+      }
+      if (!isDisabled.value && props.link) {
+        return {
+          is: 'a',
+          props: {
+            href: props.link,
+            target: '_blank',
+            rel: 'noreferrer noopener',
+          },
         }
-        return { is: 'button', props: { type: props.type, disabled: isDisabled.value } }
-      },
-    )
+      }
+      return {
+        is: 'button',
+        props: { type: props.type, disabled: isDisabled.value },
+      }
+    })
 
     /** Resolve an icon prop to a vnode: lucide class-span, FeatherIcon, or component. */
     function renderIcon(
@@ -231,12 +235,14 @@ export default defineComponent({
 
     function renderPrefix() {
       if (props.loading) {
-        return h(LoadingIndicator, {
+        // No `size`/`theme` props: button spinner diameters are tuned per
+        // button size and don't line up with Spinner's fixed sizes, and the
+        // spinner inherits the button's text color.
+        return h(Spinner, {
           class: {
-            'h-3 w-3': props.size === 'xs' || props.size === 'sm',
-            'h-[13.5px] w-[13.5px]': props.size === 'md',
-            'h-[15px] w-[15px]': props.size === 'lg',
-            'h-4.5 w-4.5': props.size === 'xl' || props.size === '2xl',
+            'size-4': props.size === 'xs' || props.size === 'sm',
+            'size-4.5': props.size === 'md',
+            'size-5': props.size === 'lg',
           },
         })
       }
@@ -250,7 +256,11 @@ export default defineComponent({
         if (props.icon) return renderIcon(props.icon, false)
         if (slots.icon) return slots.icon()
         if (hasLucideIconInDefaultSlot.value) {
-          return h('div', { class: slotClasses.value }, slots.default?.() ?? props.label)
+          return h(
+            'div',
+            { class: slotClasses.value },
+            slots.default?.() ?? props.label,
+          )
         }
         return null
       }
@@ -275,6 +285,7 @@ export default defineComponent({
         ...restAttrs,
         class: [attrClass, buttonClasses.value],
         'aria-label': props.label,
+        'aria-busy': props.loading || undefined,
         ref: rootRef,
       }
       const button =

package/src/components/Button/stories/Icons.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Button } from 'frappe-ui'
+import { Button, KeyboardShortcut } from 'frappe-ui'
 </script>
 
 <template>
@@ -23,5 +23,12 @@ import { Button } from 'frappe-ui'
     Get Started
   </Button>
 
+  <Button>
+    Discover
+    <template #suffix>
+      <KeyboardShortcut combo="Mod+K" :show-plus="false" />
+    </template>
+  </Button>
+
   <Button :loading="true"> Fetching </Button>
 </template>

package/src/components/Button/stories/Sizes.vue

@@ -3,9 +3,8 @@ import { Button } from 'frappe-ui'
 </script>
 
 <template>
+  <Button size="xs">Button</Button>
   <Button size="sm">Button</Button>
   <Button size="md">Button</Button>
   <Button size="lg">Button</Button>
-  <Button size="xl">Button</Button>
-  <Button size="2xl">Button</Button>
 </template>

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

@@ -4,7 +4,5 @@ import { Button } from 'frappe-ui'
 
 <template>
   <Button theme="gray">Gray</Button>
-  <Button theme="blue">Blue</Button>
-  <Button theme="green">Green</Button>
   <Button theme="red">Red</Button>
 </template>

package/src/components/Button/types.ts

@@ -2,7 +2,7 @@ import { type RouterLinkProps } from 'vue-router'
 import { type Component, type ExtractPublicPropTypes, type PropType } from 'vue'
 
 export type Theme = 'gray' | 'blue' | 'green' | 'red'
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+export type Size = 'xs' | 'sm' | 'md' | 'lg'
 export type Variant = 'solid' | 'subtle' | 'outline' | 'ghost'
 
 const iconProp = {

package/src/components/KeyboardShortcut.vue

@@ -1,7 +1,7 @@
 <template>
   <span
-    class="inline-flex items-center gap-1"
-    :class="!bg ? 'text-ink-gray-4 text-sm' : ''"
+    class="inline-flex items-center gap-0.5"
+    :class="!bg ? 'text-ink-gray-5 text-sm' : ''"
     :aria-label="ariaLabel"
     role="note"
     v-bind="$attrs"
@@ -45,11 +45,7 @@
             role="img"
             :aria-label="part.display"
           />
-          <span
-            v-else
-            class="font-mono leading-none tracking-wide uppercase text-[10px]"
-            >{{ part.display }}</span
-          >
+          <span v-else class="leading-none uppercase">{{ part.display }}</span>
         </span>
         <span
           v-if="idx < parsedParts.length - 1 && showPlus"

package/src/components/LoadingIndicator.vue

@@ -1,26 +1,17 @@
 <template>
-  <svg
-    class="max-w-xs animate-spin"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    :style="`scale: ${scale}%;`"
-    viewBox="0 0 24 24"
-  >
-    <circle
-      class="opacity-25"
-      cx="12"
-      cy="12"
-      r="10"
-      stroke="currentColor"
-      stroke-width="4"
-    ></circle>
-    <path
-      class="opacity-75"
-      fill="currentColor"
-      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-    ></path>
-  </svg>
+  <Spinner :style="scaleStyle" />
 </template>
+
 <script setup lang="ts">
-defineProps({ scale: { required: false, default: 100 } })
+import { computed } from 'vue'
+import Spinner from './Spinner/Spinner.vue'
+
+// Thin wrapper kept for backward compatibility: it forwards sizing/color
+// classes through to the new Spinner. Size and color come from the
+// width/height and text-color classes the caller passes.
+const props = withDefaults(defineProps<{ scale?: number }>(), { scale: 100 })
+
+const scaleStyle = computed(() =>
+  props.scale === 100 ? undefined : { scale: `${props.scale}%` },
+)
 </script>

package/src/components/LoadingText.vue

@@ -3,19 +3,9 @@
     <LoadingIndicator class="-ml-1 mr-2 h-3 w-3" /> {{ text }}
   </div>
 </template>
-<script>
+
+<script setup lang="ts">
 import LoadingIndicator from './LoadingIndicator.vue'
 
-export default {
-  name: 'Loading',
-  props: {
-    text: {
-      type: String,
-      default: 'Loading...',
-    },
-  },
-  components: {
-    LoadingIndicator,
-  },
-}
+withDefaults(defineProps<{ text?: string }>(), { text: 'Loading...' })
 </script>

package/src/components/Spinner/Spinner.api.md

@@ -0,0 +1,32 @@
+<!-- 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: 'size',
+    description: 'Diameter — xs=12px, sm=14px, md=16px, lg=20px. Omit to size with classes (default 16px).',
+    required: false,
+    type: 'SpinnerSize'
+  },
+  {
+    name: 'theme',
+    description: 'Spinner color. Omit to inherit the text color.',
+    required: false,
+    type: 'SpinnerTheme'
+  },
+  {
+    name: 'track',
+    description: 'Show a faint track behind the arc',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  }
+]
+</script>
+## API Reference
+
+<PropsTable name="Spinner" :data="propsData"/> 
+

package/src/components/Spinner/Spinner.cy.ts

@@ -0,0 +1,87 @@
+import Spinner from './Spinner.vue'
+
+describe('Spinner', () => {
+  it('renders with role="status" and default aria-label', () => {
+    cy.mount(Spinner)
+
+    cy.get('[role="status"]')
+      .should('exist')
+      .and('have.attr', 'aria-label', 'Loading')
+  })
+
+  describe('sizes', () => {
+    const sizes = [
+      { size: 'xs', px: 12 },
+      { size: 'sm', px: 14 },
+      { size: 'md', px: 16 },
+      { size: 'lg', px: 20 },
+    ] as const
+
+    sizes.forEach(({ size, px }) => {
+      it(`size="${size}" sets ${px}px width and height`, () => {
+        cy.mount(Spinner, { props: { size } })
+
+        cy.get('[role="status"]').should(($el) => {
+          expect($el[0].style.width).to.equal(`${px}px`)
+          expect($el[0].style.height).to.equal(`${px}px`)
+        })
+      })
+    })
+
+    it('no size prop applies no inline width/height and defaults to 16px via svg attributes', () => {
+      cy.mount(Spinner)
+
+      cy.get('[role="status"]').should(($el) => {
+        expect($el[0].style.width).to.equal('')
+        expect($el[0].style.height).to.equal('')
+        expect(getComputedStyle($el[0]).width).to.equal('16px')
+        expect(getComputedStyle($el[0]).height).to.equal('16px')
+      })
+    })
+
+    it('without size prop, width/height classes win over the CSS default', () => {
+      cy.mount(Spinner, { attrs: { class: 'h-3 w-3' } })
+
+      cy.get('[role="status"]').should(($el) => {
+        expect(getComputedStyle($el[0]).width).to.equal('12px')
+        expect(getComputedStyle($el[0]).height).to.equal('12px')
+      })
+    })
+  })
+
+  describe('theme', () => {
+    it('theme="gray" applies text-ink-gray-8 class', () => {
+      cy.mount(Spinner, { props: { theme: 'gray' } })
+
+      cy.get('[role="status"]').should('have.class', 'text-ink-gray-8')
+    })
+
+    it('theme="red" applies text-ink-red-4 class', () => {
+      cy.mount(Spinner, { props: { theme: 'red' } })
+
+      cy.get('[role="status"]').should('have.class', 'text-ink-red-4')
+    })
+
+    it('no theme prop applies no color class (inherits currentColor)', () => {
+      cy.mount(Spinner)
+
+      cy.get('[role="status"]')
+        .should('not.have.class', 'text-ink-gray-8')
+        .and('not.have.class', 'text-ink-red-4')
+    })
+  })
+
+  describe('track', () => {
+    it('track=false (default) does not apply track class', () => {
+      cy.mount(Spinner)
+
+      cy.get('[role="status"]').should('not.have.class', 'fui-spinner--track')
+    })
+
+    it('track=true applies fui-spinner--track class', () => {
+      cy.mount(Spinner, { props: { track: true } })
+
+      cy.get('[role="status"]').should('have.class', 'fui-spinner--track')
+    })
+  })
+})

package/src/components/Spinner/Spinner.md

@@ -0,0 +1,21 @@
+# Spinner
+
+Communicates an ongoing, indeterminate loading state.
+
+## Sizes
+
+<ComponentPreview name="Spinner-Sizes" />
+
+## Themes
+
+<ComponentPreview name="Spinner-Themes" />
+
+## Track
+
+<ComponentPreview name="Spinner-Track" />
+
+## In context
+
+<ComponentPreview name="Spinner-InContext" />
+
+<!-- @include: ./Spinner.api.md -->