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

package/src/components/TabButtons/TabButtons.vue

@@ -1,97 +1,80 @@
 <script setup lang="ts">
-import { computed, watch, watchEffect, type Component } from 'vue'
+import { computed, watch, watchEffect, h, type FunctionalComponent } from 'vue'
 import { RadioGroupItem, RadioGroupRoot } from 'reka-ui'
-import { Button, type ButtonProps } from '../Button'
-import FeatherIcon from '../FeatherIcon.vue'
+import { RouterLink } from 'vue-router'
+import Pill from './Pill.vue'
+import type { BrowserTabBase } from './pillTypes'
+import { warnDeprecated } from '../../utils/warnDeprecated'
 import { warnFeatherIconUsage } from '../../utils/iconString'
+import type { TabButton, TabButtonsEmits, TabButtonsProps } from './types'
 
 defineOptions({
   name: 'TabButtons',
   inheritAttrs: false,
 })
 
-type TabButtonValue = string | number | boolean
-
-type TabButtonIcon = string | Component
-
-type NativeButtonClass = string | string[] | Record<string, boolean>
-
-interface TabButton extends Omit<
-  ButtonProps,
-  'label' | 'icon' | 'iconLeft' | 'iconRight'
-> {
-  label?: string | number
-  value?: TabButtonValue
-  icon?: TabButtonIcon
-  iconLeft?: TabButtonIcon
-  iconRight?: TabButtonIcon
-  hideLabel?: boolean
-  active?: boolean
-  class?: NativeButtonClass
-  onClick?: (event: MouseEvent) => void
-}
+const props = withDefaults(defineProps<TabButtonsProps>(), {
+  type: 'subtle',
+  size: 'sm',
+  vertical: false,
+  direction: 'left',
+})
+
+const emit = defineEmits<TabButtonsEmits>()
 
-const props = defineProps<{
-  buttons: TabButton[]
-  modelValue?: TabButtonValue
-}>()
+watchEffect(() => {
+  if (props.buttons) {
+    warnDeprecated('TabButtons `buttons` prop', '`options`')
+  }
+})
 
-const emit = defineEmits<{
-  'update:modelValue': [value: TabButtonValue | undefined]
-}>()
+const options = computed(() => props.options ?? props.buttons ?? [])
 
 watchEffect(() => {
-  for (const button of props.buttons) {
-    warnFeatherIconUsage('TabButtons', 'button.icon', button.icon)
-    warnFeatherIconUsage('TabButtons', 'button.iconLeft', button.iconLeft)
-    warnFeatherIconUsage('TabButtons', 'button.iconRight', button.iconRight)
+  for (const option of options.value) {
+    warnFeatherIconUsage('TabButtons', 'options.icon', option.icon)
+    warnFeatherIconUsage('TabButtons', 'options.iconLeft', option.iconLeft)
+    warnFeatherIconUsage('TabButtons', 'options.iconRight', option.iconRight)
   }
 })
 
 const resolvedButtons = computed(() => {
-  return props.buttons.map((button, index) => {
+  return options.value.map((button, index) => {
     const {
       value,
       label,
       icon,
       iconLeft,
       iconRight,
-      hideLabel = false,
       active = false,
       class: customClass,
       onClick,
       tooltip,
-      ...buttonProps
+      disabled,
+      route,
+      href,
     } = button
 
-    const leadingIcon = iconLeft ?? icon
-    const trailingIcon = iconRight
-    const visibleLabel = hasLabel(label) && !hideLabel
-    const useIconProp = Boolean(leadingIcon) && !trailingIcon && !visibleLabel
+    const isIconOnly = Boolean(icon)
+    const visibleLabel = hasLabel(label) && !isIconOnly
     const accessibleLabel = hasLabel(label) ? String(label) : tooltip
 
     return {
       key: `tab-button-${index}`,
       label,
-      hideLabel,
+      icon,
+      iconLeft,
+      iconRight,
       active,
       customClass,
       onClick,
-      leadingIcon,
-      trailingIcon,
+      tooltip,
+      disabled,
       visibleLabel,
-      useIconProp,
       accessibleLabel,
+      route,
+      href,
       modelValue: value ?? label ?? index,
-      buttonProps: {
-        theme: 'gray' as const,
-        variant: 'subtle' as const,
-        size: 'sm' as const,
-        tooltip,
-        ...buttonProps,
-        label: accessibleLabel,
-        icon: useIconProp ? leadingIcon : undefined,
-      },
     }
   })
 })
@@ -122,9 +105,7 @@ const selectedButtonKey = computed({
       Object.is(button.modelValue, props.modelValue),
     )
 
-    if (selectedButton) {
-      return selectedButton.key
-    }
+    if (selectedButton) return selectedButton.key
 
     return resolvedButtons.value.find((button) => button.active)?.key
   },
@@ -136,26 +117,154 @@ const selectedButtonKey = computed({
   },
 })
 
+const rootClasses = computed(() =>
+  props.vertical ? verticalClasses() : horizontalClasses(),
+)
+
+function horizontalClasses() {
+  const base = ['inline-flex shrink-0 items-center overflow-hidden']
+  const isSm = props.size === 'sm'
+
+  switch (props.type) {
+    case 'subtle':
+    case 'ghost': {
+      const surface =
+        props.type === 'subtle' ? 'bg-surface-gray-2' : 'bg-surface-base'
+      const shape = isSm ? 'gap-1 rounded' : 'gap-1.5 rounded-[10px]'
+      return [...base, 'p-px', surface, shape]
+    }
+    case 'underline':
+      return [...base, 'border-b border-outline-gray-1 gap-6']
+    case 'browser-tab':
+      return [...base, 'border-b border-outline-gray-1 gap-1']
+  }
+  return base
+}
+
+// Vertical mode is a separate layout. Buttons/pills below get `w-full` so
+// every tab stretches to the container's intrinsic max width — the active
+// indicator then lands on the container's rail rather than at the pill's
+// own text width.
+function verticalClasses() {
+  const base = ['inline-flex shrink-0 flex-col']
+  const isSm = props.size === 'sm'
+
+  switch (props.type) {
+    case 'subtle':
+    case 'ghost': {
+      const surface =
+        props.type === 'subtle' ? 'bg-surface-gray-2' : 'bg-surface-base'
+      const shape = isSm ? 'gap-1 rounded' : 'gap-1.5 rounded-[10px]'
+      return [...base, 'p-px', surface, shape, 'items-center']
+    }
+    case 'underline':
+      return [...base, 'border-r border-outline-gray-1 gap-1.5']
+    case 'browser-tab': {
+      const rule =
+        props.direction === 'right'
+          ? 'border-r border-outline-gray-1'
+          : 'border-l border-outline-gray-1'
+      return [...base, rule, 'gap-1']
+    }
+  }
+  return base
+}
+
+const pillVariant = computed(() => {
+  if (props.type === 'underline') return 'underline'
+  if (props.type === 'browser-tab') return 'browser-tab'
+  return 'default'
+})
+
+const pillActiveStyle = computed(() =>
+  props.type === 'ghost' ? 'subtle' : 'raised',
+)
+
+function browserTabBase(checked: boolean): BrowserTabBase {
+  if (props.type !== 'browser-tab') return 'none'
+  if (!props.vertical) return 'default'
+  if (!checked) return 'none'
+  return props.direction
+}
+
+function tabButtonRadiusClass(checked: boolean) {
+  if (props.type === 'underline') return ''
+
+  if (props.type === 'browser-tab') {
+    const base = browserTabBase(checked)
+    if (base === 'left')
+      return props.size === 'sm' ? 'rounded-r-[7px]' : 'rounded-r-[9px]'
+    if (base === 'right')
+      return props.size === 'sm' ? 'rounded-l-[7px]' : 'rounded-l-[9px]'
+    if (base === 'default')
+      return props.size === 'sm' ? 'rounded-t-[7px]' : 'rounded-t-[9px]'
+  }
+
+  return props.size === 'sm' ? 'rounded-[7px]' : 'rounded-[9px]'
+}
+
 function hasLabel(label: TabButton['label']) {
   return label !== undefined && label !== null && label !== ''
 }
+
+// Native tab elements are rendered through these functional wrappers rather
+// than bare 'button'/'a' tag strings. A string `:is` binding runs through
+// Vue's component resolver, which capitalizes the name and matches a globally
+// registered component — so in apps that do `app.component('Button', ...)`
+// (e.g. Gameplan), `<component :is="'button'">` resolves to that Button
+// component instead of a native <button>. Binding a component value skips the
+// resolver. `inheritAttrs: false` keeps the merged Reka/data/class/@click
+// attrs from being applied twice.
+const NativeButton: FunctionalComponent = (_props, { attrs, slots }) =>
+  h('button', attrs, slots.default?.())
+NativeButton.inheritAttrs = false
+const NativeAnchor: FunctionalComponent = (_props, { attrs, slots }) =>
+  h('a', attrs, slots.default?.())
+NativeAnchor.inheritAttrs = false
+
+// Pick the wrapper element for a tab. `route` → RouterLink, `href` →
+// anchor, otherwise a native button. Disabled forces the button form so
+// `:disabled` actually blocks interaction.
+function tabElement(button: (typeof resolvedButtons.value)[number]) {
+  if (button.disabled) return NativeButton
+  if (button.route) return RouterLink
+  if (button.href) return NativeAnchor
+  return NativeButton
+}
+
+function tabElementProps(button: (typeof resolvedButtons.value)[number]) {
+  if (!button.disabled && button.route) {
+    return { to: button.route }
+  }
+  if (!button.disabled && button.href) {
+    return {
+      href: button.href,
+      target: '_blank',
+      rel: 'noreferrer noopener',
+    }
+  }
+  return { type: 'button' as const, disabled: button.disabled }
+}
 </script>
 
 <template>
-  <RadioGroupRoot v-model="selectedButtonKey" v-bind="$attrs">
-    <div
-      class="inline-flex min-h-7 items-center gap-0.5 rounded-md bg-surface-gray-2 p-px ring-1 ring-inset ring-outline-gray-1"
-    >
+  <RadioGroupRoot
+    v-model="selectedButtonKey"
+    :orientation="vertical ? 'vertical' : 'horizontal'"
+    v-bind="$attrs"
+  >
+    <div :class="rootClasses">
       <RadioGroupItem
         v-for="button in resolvedButtons"
         :key="button.key"
         v-slot="{ checked, disabled }"
         as="template"
-        :disabled="button.buttonProps.disabled || button.buttonProps.loading"
+        :disabled="button.disabled"
         :value="button.key"
       >
-        <Button
-          v-bind="button.buttonProps"
+        <component
+          :is="tabElement(button)"
+          v-bind="tabElementProps(button)"
           data-slot="tab-button"
           :data-state="checked ? 'checked' : 'unchecked'"
           :data-disabled="disabled ? '' : undefined"
@@ -167,58 +276,47 @@ function hasLabel(label: TabButton['label']) {
           :title="
             button.accessibleLabel && !button.visibleLabel
               ? button.accessibleLabel
-              : undefined
+              : button.tooltip
           "
           :class="[
-            '!h-6.5 shrink-0 !rounded-[9px] transition-[transform,background-color,color,box-shadow,border-color] duration-150 ease-out motion-safe:active:scale-[0.98] motion-reduce:transform-none motion-reduce:transition-none',
-            button.hideLabel ? '!w-7 !px-0' : '',
-            checked
-              ? '!border-outline-gray-1 !bg-surface-white !text-ink-gray-8 shadow-sm'
-              : disabled
-                ? '!bg-transparent !text-ink-gray-4'
-                : '!bg-transparent !text-ink-gray-5 hover:!bg-surface-gray-3/80 hover:!text-ink-gray-7',
+            'inline-flex appearance-none border-0 bg-transparent p-0 text-inherit no-underline disabled:pointer-events-none disabled:opacity-60',
+            tabButtonRadiusClass(checked),
+            vertical && 'w-full',
             button.customClass,
           ]"
           @click="button.onClick?.($event)"
         >
-          <template v-if="button.leadingIcon && !button.useIconProp" #prefix>
-            <FeatherIcon
-              v-if="typeof button.leadingIcon === 'string'"
-              :name="button.leadingIcon"
-              class="h-4 w-4 shrink-0"
-              aria-hidden="true"
-            />
-            <component
-              :is="button.leadingIcon"
-              v-else
-              class="h-4 w-4 shrink-0"
-              aria-hidden="true"
-            />
-          </template>
-
-          <span
-            v-if="hasLabel(button.label)"
-            class="flex min-w-0 items-center truncate"
-            :class="button.hideLabel ? 'sr-only' : undefined"
+          <Pill
+            :class="vertical ? 'w-full !justify-start' : ''"
+            :label="button.label"
+            :icon="button.icon"
+            :icon-left="button.iconLeft"
+            :icon-right="button.iconRight"
+            :active="checked"
+            :size="size"
+            :variant="pillVariant"
+            :browser-tab-base="browserTabBase(checked)"
+            :orientation="vertical ? 'vertical' : 'horizontal'"
+            :active-style="pillActiveStyle"
           >
-            {{ button.label }}
-          </span>
-
-          <template v-if="button.trailingIcon" #suffix>
-            <FeatherIcon
-              v-if="typeof button.trailingIcon === 'string'"
-              :name="button.trailingIcon"
-              class="h-4 w-4 shrink-0"
-              aria-hidden="true"
-            />
-            <component
-              :is="button.trailingIcon"
-              v-else
-              class="h-4 w-4 shrink-0"
-              aria-hidden="true"
-            />
-          </template>
-        </Button>
+            <template v-if="$slots.prefix" #prefix>
+              <slot
+                name="prefix"
+                :button="button"
+                :checked="checked"
+                :disabled="disabled"
+              />
+            </template>
+            <template v-if="$slots.suffix" #suffix>
+              <slot
+                name="suffix"
+                :button="button"
+                :checked="checked"
+                :disabled="disabled"
+              />
+            </template>
+          </Pill>
+        </component>
       </RadioGroupItem>
     </div>
   </RadioGroupRoot>

package/src/components/TabButtons/index.ts

@@ -1 +1,11 @@
-export { default as TabButtons } from './TabButtons.vue'
+export { default as TabButtons } from './TabButtons.vue'
+export type {
+  NativeButtonClass,
+  TabButton,
+  TabButtonIcon,
+  TabButtonsDirection,
+  TabButtonsEmits,
+  TabButtonsProps,
+  TabButtonsType,
+  TabButtonValue,
+} from './types'

package/src/components/TabButtons/pillTypes.ts

@@ -0,0 +1,43 @@
+import type { Component } from 'vue'
+
+export type PillSize = 'sm' | 'md'
+export type PillVariant = 'default' | 'outline' | 'underline' | 'browser-tab'
+export type BrowserTabBase = 'none' | 'default' | 'left' | 'right'
+export type PillIcon = string | Component
+export type PillOrientation = 'horizontal' | 'vertical'
+export type PillActiveStyle = 'raised' | 'subtle'
+
+export interface PillProps {
+  /** Text shown inside the pill. */
+  label?: string | number
+
+  /** Visual variant. */
+  variant?: PillVariant
+
+  /** Size of the pill. */
+  size?: PillSize
+
+  /** Active/selected state. */
+  active?: boolean
+
+  /**
+   * Icon-only content. When set, the pill renders as a square icon button
+   * and any `label` is exposed only to assistive tech (sr-only).
+   */
+  icon?: PillIcon
+
+  /** Leading accent icon, rendered next to a visible label. */
+  iconLeft?: PillIcon
+
+  /** Trailing accent icon, rendered next to a visible label. */
+  iconRight?: PillIcon
+
+  /** Browser-tab active edge shape. */
+  browserTabBase?: BrowserTabBase
+
+  /** Axis used by underline tabs. */
+  orientation?: PillOrientation
+
+  /** Active treatment for default pills. */
+  activeStyle?: PillActiveStyle
+}

package/src/components/TabButtons/stories/PrefixSuffix.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+
+const inboxTab = ref('comments')
+const viewTab = ref('list')
+
+const inboxButtons = [
+  { label: 'Inbox', value: 'inbox' },
+  { label: 'Comments', value: 'comments' },
+]
+
+const inboxIcons = {
+  inbox: 'lucide-inbox',
+  comments: 'lucide-message-square',
+}
+
+const inboxCounts = {
+  inbox: 8,
+  comments: 14,
+}
+
+const viewButtons = [
+  { label: 'List', value: 'list', icon: 'lucide-list' },
+  { label: 'Board', value: 'board', icon: 'lucide-columns-3' },
+  { label: 'Calendar', value: 'calendar', icon: 'lucide-calendar' },
+]
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 p-2">
+    <TabButtons v-model="inboxTab" :options="inboxButtons" size="md">
+      <template #prefix="{ button }">
+        <span :class="inboxIcons[button.modelValue]" class="size-4 shrink-0" />
+      </template>
+      <template #suffix="{ button }">
+        <span
+          class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
+        >
+          {{ inboxCounts[button.modelValue] }}
+        </span>
+      </template>
+    </TabButtons>
+
+    <TabButtons
+      v-model="inboxTab"
+      :options="inboxButtons"
+      type="underline"
+      size="md"
+    >
+      <template #prefix="{ button }">
+        <span :class="inboxIcons[button.modelValue]" class="size-4 shrink-0" />
+      </template>
+      <template #suffix="{ button }">
+        <span
+          class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
+        >
+          {{ inboxCounts[button.modelValue] }}
+        </span>
+      </template>
+    </TabButtons>
+
+    <TabButtons v-model="viewTab" :options="viewButtons" />
+  </div>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup>
+import { ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+
+const current = ref('list')
+const currentMd = ref('list')
+
+const buttons = [
+  { label: 'List', value: 'list', iconLeft: 'lucide-list' },
+  { label: 'Board', value: 'board', iconLeft: 'lucide-columns-3' },
+  { label: 'Calendar', value: 'calendar', iconLeft: 'lucide-calendar' },
+]
+</script>
+
+<template>
+  <div class="flex flex-col gap-5 p-2">
+    <div class="flex items-center gap-6">
+      <div class="w-16 text-sm text-ink-gray-6">Small</div>
+      <TabButtons v-model="current" :options="buttons" size="sm" />
+    </div>
+    <div class="flex items-center gap-6">
+      <div class="w-16 text-sm text-ink-gray-6">Medium</div>
+      <TabButtons v-model="currentMd" :options="buttons" size="md" />
+    </div>
+  </div>
+</template>

package/src/components/TabButtons/stories/Variants.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+
+const buttons = [
+  { label: 'Home', value: 'home', iconLeft: 'lucide-home' },
+  { label: 'Task', value: 'task', iconLeft: 'lucide-list-checks' },
+  { label: 'Contact', value: 'contact', iconLeft: 'lucide-contact' },
+  { label: 'Others', value: 'others', iconLeft: 'lucide-globe' },
+]
+
+const subtle = ref('task')
+const ghost = ref('task')
+const underline = ref('task')
+const browserTab = ref('task')
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 p-2">
+    <div class="flex items-center gap-6">
+      <div class="w-24 text-sm text-ink-gray-6">Subtle</div>
+      <TabButtons v-model="subtle" :options="buttons" type="subtle" />
+    </div>
+
+    <div class="flex items-center gap-6">
+      <div class="w-24 text-sm text-ink-gray-6">Ghost</div>
+      <TabButtons v-model="ghost" :options="buttons" type="ghost" />
+    </div>
+
+    <div class="flex items-center gap-6">
+      <div class="w-24 text-sm text-ink-gray-6">Underline</div>
+      <TabButtons v-model="underline" :options="buttons" type="underline" />
+    </div>
+
+    <div class="flex items-center gap-6">
+      <div class="w-24 text-sm text-ink-gray-6">Browser tab</div>
+      <TabButtons v-model="browserTab" :options="buttons" type="browser-tab" />
+    </div>
+  </div>
+</template>

package/src/components/TabButtons/stories/Vertical.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+
+const subtle = ref('home')
+const underline = ref('home')
+const browserLeft = ref('home')
+const sidebar = ref('home')
+
+const navButtons = [
+  { label: 'Home', value: 'home', iconLeft: 'lucide-home' },
+  { label: 'Task', value: 'task', iconLeft: 'lucide-list-checks' },
+  { label: 'Contact', value: 'contact', iconLeft: 'lucide-contact' },
+  { label: 'Others', value: 'others', iconLeft: 'lucide-globe' },
+]
+
+const iconButtons = [
+  { label: 'Search', value: 'search', icon: 'lucide-search' },
+  { label: 'Inbox', value: 'inbox', icon: 'lucide-inbox' },
+  { label: 'Home', value: 'home', icon: 'lucide-home' },
+  { label: 'Team', value: 'team', icon: 'lucide-users' },
+  { label: 'Settings', value: 'settings', icon: 'lucide-settings' },
+]
+</script>
+
+<template>
+  <div class="flex items-start gap-10 p-2">
+    <div class="flex flex-col gap-3">
+      <div class="text-sm text-ink-gray-6">Subtle</div>
+      <TabButtons v-model="subtle" :options="navButtons" vertical />
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div class="text-sm text-ink-gray-6">Underline</div>
+      <TabButtons
+        v-model="underline"
+        :options="navButtons"
+        type="underline"
+        vertical
+      />
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div class="text-sm text-ink-gray-6">Browser tab</div>
+      <TabButtons
+        v-model="browserLeft"
+        :options="navButtons"
+        type="browser-tab"
+        vertical
+        direction="left"
+      />
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div class="text-sm text-ink-gray-6">Icon sidebar</div>
+      <TabButtons
+        v-model="sidebar"
+        :options="iconButtons"
+        type="ghost"
+        vertical
+      />
+    </div>
+  </div>
+</template>