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

package/src/components/MobileShell/MobileShell.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    data-slot="mobile-shell"
+    class="fixed inset-0 flex touch-none flex-col overflow-hidden"
+  >
+    <!-- Pages teleport their headers here. Extra top padding clears the notch /
+         status bar when running as an installed PWA (display-mode: standalone). -->
+    <PageHeaderTarget
+      class="[@media(display-mode:standalone)]:pt-[env(safe-area-inset-top)]"
+    />
+
+    <!--
+      Native momentum scroll (not ScrollArea's custom bar — a mobile surface
+      wants the platform's own overscroll + inertia). Registered into the shared
+      scroll-container registry so `useScrollContainer()` resolves it.
+    -->
+    <div
+      ref="scroll"
+      data-slot="mobile-shell-scroll"
+      class="flex-1 overflow-y-auto overscroll-auto bg-surface-base [-webkit-overflow-scrolling:touch]"
+    >
+      <slot />
+    </div>
+
+    <slot name="nav" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, useTemplateRef } from 'vue'
+import PageHeaderTarget from '../PageHeader/PageHeaderTarget.vue'
+import {
+  registerScrollContainer,
+  unregisterScrollContainer,
+} from '../../composables/useScrollContainer'
+
+const scroll = useTemplateRef<HTMLElement>('scroll')
+
+onMounted(() => scroll.value && registerScrollContainer(scroll.value))
+onBeforeUnmount(() => scroll.value && unregisterScrollContainer(scroll.value))
+</script>

package/src/components/MobileShell/index.ts

@@ -0,0 +1,3 @@
+export { default as MobileShell } from './MobileShell.vue'
+
+export type { MobileShellProps } from './types'

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

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  MobileShell,
+  MobileNav,
+  MobileNavItem,
+  PageHeaderMobile,
+  Avatar,
+} from 'frappe-ui'
+
+const tab = ref('home')
+</script>
+
+<template>
+  <!--
+    MobileShell is `fixed inset-0`. The `transform` on this wrapper makes it the
+    containing block for that fixed positioning, so the shell stays inside the
+    preview box instead of covering the page. (A story-only concern.)
+  -->
+  <div
+    class="mx-auto h-[600px] w-[360px] transform-gpu overflow-hidden rounded-xl border bg-surface-white"
+  >
+    <MobileShell>
+      <PageHeaderMobile>
+        <span class="text-base font-semibold text-ink-gray-8">Home</span>
+      </PageHeaderMobile>
+
+      <div class="p-4">
+        <p
+          v-for="n in 30"
+          :key="n"
+          class="mb-3 text-base text-ink-gray-7"
+        >
+          Row {{ n }} — scroll; the header and tab bar stay fixed.
+        </p>
+      </div>
+
+      <template #nav>
+        <MobileNav>
+          <MobileNavItem
+            label="Home"
+            icon="lucide-house"
+            :active="tab === 'home'"
+            @click="tab = 'home'"
+          />
+          <MobileNavItem
+            label="Notifications"
+            icon="lucide-bell"
+            :active="tab === 'notifications'"
+            @click="tab = 'notifications'"
+          />
+          <MobileNavItem
+            label="Search"
+            icon="lucide-search"
+            :active="tab === 'search'"
+            @click="tab = 'search'"
+          />
+          <MobileNavItem
+            label="You"
+            :active="tab === 'you'"
+            @click="tab = 'you'"
+          >
+            <template #default="{ active }">
+              <Avatar
+                label="Jane Doe"
+                size="md"
+                :class="active ? 'ring-2 ring-outline-gray-4' : ''"
+              />
+            </template>
+          </MobileNavItem>
+        </MobileNav>
+      </template>
+    </MobileShell>
+  </div>
+</template>

package/src/components/MobileShell/types.ts

@@ -0,0 +1,7 @@
+/**
+ * `MobileShell` has no props — it's a pure slot frame (default slot = scrolling
+ * content, `#nav` slot = bottom navigation). This interface exists so the docs
+ * PropsTable and `defineProps` share one source of truth as props are added.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface MobileShellProps {}

package/src/components/MonthPicker/MonthPicker.cy.ts

@@ -1,9 +1,25 @@
 import MonthPicker from './MonthPicker.vue'
+import { _resetWarnDeprecated } from '../../utils/warnDeprecated'
 
 const currentYear = new Date().getFullYear()
 const yearRangeStart = currentYear - (currentYear % 12)
 
 describe('MonthPicker', () => {
+  beforeEach(() => {
+    _resetWarnDeprecated()
+  })
+
+  it('warns that MonthPicker is deprecated', () => {
+    cy.window().then((win) => {
+      cy.spy(win.console, 'warn').as('consoleWarn')
+    })
+    cy.mount(MonthPicker)
+    cy.get('@consoleWarn').should(
+      'have.been.calledWithMatch',
+      /MonthPicker is deprecated.*Select/,
+    )
+  })
+
   it('renders', () => {
     cy.mount(MonthPicker)
 

package/src/components/MonthPicker/MonthPicker.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { MonthPickerProps } from './types'
+import { warnDeprecated } from '../../utils/warnDeprecated'
 
 import Button from '../Button/Button.vue'
 import Popover from '../Popover/Popover.vue'
 
+warnDeprecated('MonthPicker', 'Select for simple month picking')
+
 const props = withDefaults(defineProps<MonthPickerProps>(), {
   placeholder: 'Select month',
 })
@@ -63,30 +66,38 @@ const formatBtn = (v: string | number) =>
   viewMode.value == 'month' ? (v as String).slice(0, 3) : v
 
 const txtClass = computed(() => {
-  return model.value || props.disabled ? '': '!text-ink-gray-5' 
+  return model.value || props.disabled ? '' : '!text-ink-gray-5'
 })
 </script>
 
 <template>
   <Popover
-    popover-class="mt-2 shadow-xl rounded-lg border bg-surface-modal p-2"
+    popover-class="mt-2 shadow-xl rounded-lg border bg-surface-elevation-2 p-2"
   >
     <template #target="{ togglePopover, isOpen }">
-      <Button @click="togglePopover" class="w-full justify-between border" :class="txtClass"
-				:disabled="disabled" aria-haspopup="dialog" :aria-expanded="isOpen">
+      <Button
+        @click="togglePopover"
+        class="w-full justify-between border"
+        :class="txtClass"
+        :disabled="disabled"
+        aria-haspopup="dialog"
+        :aria-expanded="isOpen"
+      >
         {{ model || props.placeholder }}
-        <template #suffix> <span class="lucide-calendar size-4 text-ink-gray-6" /> </template>
+        <template #suffix>
+          <span class="lucide-calendar size-4 text-ink-gray-6" />
+        </template>
       </Button>
     </template>
 
     <template #body>
       <div class="flex gap-2 justify-between">
-        <Button variant="ghost" @click="prevClick" label='previous'>
+        <Button variant="ghost" @click="prevClick" label="previous">
           <span class="lucide-chevron-left size-4 text-ink-gray-5" />
         </Button>
 
         <!-- view toggler -->
-         <Button @click="toggleViewMode" label="Toggle view mode">
+        <Button @click="toggleViewMode" label="Toggle view mode">
           <template v-if="viewMode == 'month'">
             {{ model.split(' ')[1] ?? currentYear }}
           </template>
@@ -95,7 +106,7 @@ const txtClass = computed(() => {
           </template>
         </Button>
 
-        <Button variant="ghost" @click="nextClick" label='next'>
+        <Button variant="ghost" @click="nextClick" label="next">
           <span class="lucide-chevron-right size-4 text-ink-gray-5" />
         </Button>
       </div>

package/src/components/MultiSelect/MultiSelect.api.md

@@ -235,9 +235,8 @@
 </script>
 ## API Reference
 
-<PropsTable name="MultiSelect" :data="propsData"/> 
+<PropsTable name="MultiSelect" :data="propsData"/>
 
-<SlotsTable :data="slotsData"/> 
-
-<EmitsTable :data="emitsData"/> 
+<SlotsTable :data="slotsData"/>
 
+<EmitsTable :data="emitsData"/>

package/src/components/MultiSelect/MultiSelect.md

@@ -1,49 +1,81 @@
 # MultiSelect
 
-Searchable multi-choice picker. Matches the `Combobox` / `Select` item-slot model and provides built-in Clear All / Select All footer controls.
+Searchable multi-choice picker. Matches the `Combobox` / `Select` item-slot
+model and provides built-in Clear All / Select All footer controls.
+
+## Playground
+
+<ClientOnly><MultiSelectBuilder /></ClientOnly>
 
 ## Default
-A plain picker — button trigger opens a popover with a search input, option list, and default footer.
+
+A plain picker — button trigger opens a popover with a search input, option
+list, and default footer.
 
 <ComponentPreview name="MultiSelect-Example" />
 
 ## Item Prefix
-Use `#item-prefix` to render avatars, icons, or indicators next to each option label.
+
+Use `#item-prefix` to render avatars, icons, or indicators next to each option
+label.
 
 <ComponentPreview name="MultiSelect-Options" />
 
 ## Members
-Use `#prefix` to render an aggregate visual across the current selection — here, a stack of avatars capped at three with a "+N" overflow badge. When `#prefix` is provided it owns the entire prefix area regardless of selection count, so the same template handles 0 / 1 / many.
+
+Use `#prefix` to render an aggregate visual across the current selection — here,
+a stack of avatars capped at three with a "+N" overflow badge. When `#prefix` is
+provided it owns the entire prefix area regardless of selection count, so the
+same template handles 0 / 1 / many.
 
 <ComponentPreview name="MultiSelect-Members" />
 
 ## Grouped Options
-Options can be split into named groups. Group labels render above each group's items.
+
+Options can be split into named groups. Group labels render above each group's
+items.
 
 <ComponentPreview name="MultiSelect-Grouped" />
 
 ## Async Options
-Fetch options from a server as the user types. Listen to `@update:query`, debounce the request, and feed the results back into `:options`. The `:loading` prop swaps the result body for a loading state. Two things to watch for: drop stale responses with a request id so a slower earlier query can't overwrite the latest results, and merge currently-selected items into the options array so chips stay resolvable after the query narrows the list.
+
+Fetch options from a server as the user types. Listen to `@update:query`,
+debounce the request, and feed the results back into `:options`. The `:loading`
+prop swaps the result body for a loading state. Two things to watch for: drop
+stale responses with a request id so a slower earlier query can't overwrite the
+latest results, and merge currently-selected items into the options array so
+chips stay resolvable after the query narrows the list.
 
 <ComponentPreview name="MultiSelect-AsyncOptions" />
 
 ## Custom Footer
-Replace the default Clear All / Select All footer with a custom one. The slot receives `clearAll`, `selectAll`, `selectedOptions`, and `query`.
+
+Replace the default Clear All / Select All footer with a custom one. The slot
+receives `clearAll`, `selectAll`, `selectedOptions`, and `query`.
 
 <ComponentPreview name="MultiSelect-Footer" />
 
 ## Custom Trigger
-Use `#trigger` to fully replace the default button trigger. The slot receives `open`, `disabled`, `selectedOptions`, `displayValue`, `clearAll`, and `toggleOpen`.
+
+Use `#trigger` to fully replace the default button trigger. The slot receives
+`open`, `disabled`, `selectedOptions`, `displayValue`, `clearAll`, and
+`setOpen`.
 
 <ComponentPreview name="MultiSelect-TriggerSlot" />
 
 ## Tags Trigger
-A chips-style trigger: each selected option renders as a removable `Badge`, with inline remove buttons. Authored through `#trigger` using `selectedOptions` and the parent's `v-model`.
+
+A chips-style trigger: each selected option renders as a removable `Badge`, with
+inline remove buttons. Authored through `#trigger` using `selectedOptions` and
+the parent's `v-model`.
 
 <ComponentPreview name="MultiSelect-TagsTrigger" />
 
 ## Label, Description, Error
-`MultiSelect` supports `label`, `description`, `error`, and `required` directly — no `FormControl` wrapper needed. The error suppresses the description and wires `aria-invalid` + `aria-errormessage` onto the trigger.
+
+`MultiSelect` supports `label`, `description`, `error`, and `required` directly
+— no `FormControl` wrapper needed. The error suppresses the description and
+wires `aria-invalid` + `aria-errormessage` onto the trigger.
 
 <ComponentPreview name="MultiSelect-Labeling" />