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

package/vitepress/components/Docs/Demo.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Button } from 'frappe-ui'
+
+interface ComponentPreviewProps {
+  name: string
+}
+
+const props = defineProps<ComponentPreviewProps>()
+
+const expanded = ref(false)
+
+// The editor renders its own `prose prose-v3` content, but Tailwind Typography's
+// `.not-prose` (used here to shield demos from the docs article's prose) also
+// suppresses prose *inside* it — and you can't re-enable it deeper in the tree.
+// So editor demos opt their preview out of `.not-prose`; every other demo keeps
+// the isolation unchanged.
+const isEditorDemo = computed(() => props.name?.startsWith('Editor'))
+</script>
+
+<template>
+  <div>
+    <div
+      class="rounded-xl overflow-hidden border border-outline-gray-1 divide-y divide-outline-gray-1"
+    >
+      <div
+        :class="[
+          isEditorDemo ? '' : 'not-prose',
+          'bg-surface-base p-4 sm:p-8 overflow-x-auto scrollbar flex flex-wrap gap-3 items-center justify-center min-h-[200px]',
+        ]"
+      >
+        <slot />
+      </div>
+
+      <div class="component-preview-code not-prose relative">
+        <div
+          :class="[
+            expanded
+              ? ''
+              : 'max-h-[80px] sm:max-h-[96px] overflow-hidden [&_.shiki]:!max-h-none [&_.shiki]:!overflow-hidden [&_.copy]:hidden',
+          ]"
+        >
+          <slot name="code" />
+        </div>
+
+        <div
+          v-if="!expanded"
+          class="pointer-events-none absolute inset-0 bg-gradient-to-t from-surface-gray-1 via-surface-gray-1/70 dark:from-surface-base dark:via-surface-base/70 to-transparent"
+        />
+
+        <div
+          v-if="!expanded"
+          class="absolute inset-0 flex items-center justify-center"
+        >
+          <Button variant="outline" @click="expanded = true">View Code</Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/vitepress/components/Docs/EmitsTable.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+interface ItemProp {
+  name: string
+  description?: string
+  type?: string
+  deprecated?: string | boolean
+}
+
+interface Props {
+  data: ItemProp[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="not-prose mt-8">
+    <table class="hidden sm:table w-full border-collapse border-b text-left">
+      <thead>
+        <tr class="border-b">
+          <th class="w-[24%] py-2.5 pr-2 text-sm font-semibold text-ink-gray-9">
+            Event
+          </th>
+          <th class="w-[76%] px-2 py-2.5 text-sm font-semibold text-ink-gray-9">
+            Payload
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="x in data" :key="x.name" class="border-b last:border-b-0">
+          <td class="py-2 pr-2 align-top">
+            <div
+              class="font-mono text-xs font-medium leading-6 text-ink-gray-9 break-words"
+            >
+              <span :class="{ 'line-through': x.deprecated }">{{
+                x.name
+              }}</span>
+            </div>
+          </td>
+
+          <td class="px-2 py-2 align-top">
+            <div
+              v-if="!x.deprecated"
+              class="whitespace-normal break-words font-mono text-xs leading-6 text-ink-gray-8"
+            >
+              {{ x.type || '—' }}
+            </div>
+            <p
+              v-if="typeof x.deprecated === 'string'"
+              class="whitespace-pre-wrap font-mono text-xs text-ink-gray-6"
+            >
+              Deprecated — {{ x.deprecated }}
+            </p>
+            <p
+              v-else-if="x.description"
+              class="mt-1 whitespace-pre-wrap font-mono text-xs leading-6 text-ink-gray-6"
+            >
+              {{ x.description }}
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="sm:hidden">
+      <div
+        v-for="x in data"
+        :key="x.name"
+        class="border-b last:border-b-0 py-3 grid gap-1.5"
+      >
+        <div
+          class="font-mono text-xs font-medium leading-6 text-ink-gray-9 break-all"
+        >
+          <span :class="{ 'line-through': x.deprecated }">{{ x.name }}</span>
+        </div>
+
+        <div
+          v-if="!x.deprecated"
+          class="whitespace-normal break-words font-mono text-xs leading-6 text-ink-gray-8"
+        >
+          {{ x.type || '—' }}
+        </div>
+        <p
+          v-if="typeof x.deprecated === 'string'"
+          class="whitespace-pre-wrap font-mono text-xs text-ink-gray-6"
+        >
+          Deprecated — {{ x.deprecated }}
+        </p>
+        <p
+          v-else-if="x.description"
+          class="whitespace-pre-wrap font-mono text-xs leading-6 text-ink-gray-6"
+        >
+          {{ x.description }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

package/vitepress/components/Docs/MobileNavSheet.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useData, useRoute, withBase } from 'vitepress'
+import { Button, TextInput } from 'frappe-ui'
+import { isActiveLink, type SidebarSection } from './sidebarList'
+import { state } from '../../state'
+
+const route = useRoute()
+const { site, theme } = useData()
+// Sidebar is supplied via themeConfig in the {text, items:[{text,link}]} shape.
+const list = (theme.value.sidebar ?? []) as SidebarSection[]
+const query = ref('')
+
+const filteredList = computed(() => {
+  const q = query.value.trim().toLowerCase()
+  if (!q) return list
+  return list
+    .map((section) => ({
+      ...section,
+      items: section.items.filter((item) =>
+        item.text.toLowerCase().includes(q),
+      ),
+    }))
+    .filter((section) => section.items.length > 0)
+})
+
+function close() {
+  state.mobsidebar = false
+}
+function toggle() {
+  state.mobsidebar = !state.mobsidebar
+}
+function isActive(link: string) {
+  return isActiveLink(route.path, link, site.value.base)
+}
+
+function onKey(e: KeyboardEvent) {
+  if (e.key === 'Escape') close()
+}
+
+watch(
+  () => state.mobsidebar,
+  (v) => {
+    document.documentElement.classList.toggle('overflow-hidden', v)
+    if (!v) query.value = ''
+  },
+)
+
+onMounted(() => window.addEventListener('keydown', onKey))
+onUnmounted(() => {
+  window.removeEventListener('keydown', onKey)
+  document.documentElement.classList.remove('overflow-hidden')
+})
+</script>
+
+<template>
+  <Button
+    v-if="!state.mobsidebar"
+    icon-left="lucide-menu"
+    theme="gray"
+    variant="outline"
+    size="lg"
+    label="Menu"
+    aria-label="Open navigation"
+    :aria-expanded="state.mobsidebar"
+    class="lg:hidden fixed bottom-4 right-4 z-30 shadow-2xl"
+    @click="toggle"
+  >
+    Menu
+  </Button>
+
+  <Transition
+    enter-active-class="transition-opacity duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]"
+    leave-active-class="transition-opacity duration-200 ease-[cubic-bezier(0.32,0.72,0,1)]"
+    enter-from-class="opacity-0"
+    leave-to-class="opacity-0"
+  >
+    <div
+      v-if="state.mobsidebar"
+      class="lg:hidden fixed inset-0 bg-black/40 z-40"
+      @click="close"
+      aria-hidden="true"
+    />
+  </Transition>
+
+  <Transition
+    enter-active-class="transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]"
+    leave-active-class="transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)]"
+    enter-from-class="translate-y-full"
+    leave-to-class="translate-y-full"
+  >
+    <div
+      v-if="state.mobsidebar"
+      class="lg:hidden fixed inset-x-0 bottom-0 z-50 h-[80dvh] bg-surface-base rounded-t-2xl shadow-2xl flex flex-col"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Navigation"
+    >
+      <div class="pt-2 pb-1 flex items-center justify-center shrink-0">
+        <div class="h-1.5 w-10 rounded-full bg-surface-gray-3" />
+      </div>
+
+      <div class="px-3 pt-2 pb-1 shrink-0">
+        <TextInput
+          v-model="query"
+          type="search"
+          size="lg"
+          placeholder="Search"
+          aria-label="Search navigation"
+          class="w-full"
+        >
+          <template #prefix>
+            <span class="lucide-search size-[18px] text-ink-gray-5" />
+          </template>
+        </TextInput>
+      </div>
+
+      <nav class="flex-1 overflow-y-auto px-3 pb-6 pt-2 flex flex-col gap-6">
+        <div
+          v-if="filteredList.length === 0"
+          class="px-2 py-6 text-md text-ink-gray-5 text-center"
+        >
+          No results for "{{ query }}"
+        </div>
+        <div v-for="section in filteredList" :key="section.text">
+          <div class="px-2 text-base flex items-center h-8 text-ink-gray-5">
+            {{ section.text }}
+          </div>
+          <div class="flex flex-col gap-0.5">
+            <a
+              v-for="item in section.items"
+              :key="item.text"
+              :href="withBase(item.link)"
+              class="pl-2 flex h-11 items-center rounded-md text-md transition-colors"
+              :class="
+                isActive(item.link)
+                  ? 'bg-surface-gray-2 text-ink-gray-8'
+                  : 'text-ink-gray-7 hover:bg-surface-gray-2 hover:text-ink-gray-8'
+              "
+            >
+              {{ item.text }}
+            </a>
+          </div>
+        </div>
+      </nav>
+    </div>
+  </Transition>
+</template>

package/vitepress/components/Docs/OnThisPage.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vitepress'
+
+interface Heading {
+  type: string
+  name: string
+  id: string
+  scrollPos: number
+}
+
+const headings = ref<Heading[]>([])
+const activeHeading = ref()
+const h2Exists = ref(false)
+
+const setHeadings = () => {
+  const elements = Array.from(document.querySelectorAll('h2, h3'))
+
+  h2Exists.value = elements.some((el) => el.tagName == 'H2')
+
+  headings.value = elements.map((el) => ({
+    type: el.tagName.toLowerCase(),
+    name: el.textContent?.trim(),
+    id: el.id,
+    scrollPos: el.offsetTop,
+  }))
+}
+
+const setActiveHeading = () => {
+  const curScrollPos = document.documentElement.scrollTop
+
+  for (let i = 0; i < headings.value.length; i++) {
+    if (curScrollPos <= headings.value[i].scrollPos) {
+      activeHeading.value = headings.value[i].id
+      break
+    }
+  }
+}
+
+const route = useRoute()
+
+onMounted(() => {
+  setHeadings()
+  document.addEventListener('scroll', setActiveHeading)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('scroll', setActiveHeading)
+})
+
+watch(route, setHeadings)
+</script>
+
+<template>
+  <aside
+    class="sticky top-24 hidden lg:flex flex-col h-fit mt-10 leading-relaxed w-[200px]"
+    :class="{ invisible: headings.length == 0 }"
+  >
+    <span class="font-medium whitespace-nowrap pl-3">On this page</span>
+
+    <a
+      v-for="x in headings"
+      :href="`#${x.id}`"
+      class="text-ink-gray-6 pl-4 py-1 border-l hover:text-ink-gray-9"
+      @click="activeHeading = x.id"
+      :class="{
+        'pl-7': x.type == 'h3' && h2Exists,
+        'border-outline-gray-7 text-ink-gray-9':
+          activeHeading && x.id == activeHeading,
+      }"
+      >{{ x.name }}</a
+    >
+  </aside>
+</template>

package/vitepress/components/Docs/PrevNextBtns.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { state } from '../../state'
+import { useData, useRoute, withBase } from 'vitepress'
+import { isActiveLink } from './sidebarList'
+
+import LucideLeft from '~icons/lucide/arrow-left'
+import LucideRight from '~icons/lucide/arrow-right'
+
+const route = useRoute()
+const { frontmatter, site } = useData()
+
+const visible = computed(() => frontmatter.value.nextprev ?? true)
+
+const linkInfos = state.sidebarList?.reduce((acc, cur) => {
+  cur.items ? acc.push(...cur.items) : acc.push(cur)
+  return acc
+}, [])
+
+const currentIndex = computed(() =>
+  linkInfos.findIndex((x) => isActiveLink(route.path, x.link, site.value.base)),
+)
+
+const prevLink = computed(() => {
+  const index = currentIndex.value
+  if (index <= 0) return null
+  return linkInfos[index - 1]
+})
+
+const nextLink = computed(() => {
+  const index = currentIndex.value
+  if (index === -1 || index === linkInfos.length - 1) return null
+  return linkInfos[index + 1]
+})
+
+const subtleMdLink =
+  'inline-flex items-center gap-2 ' +
+  'h-8 px-2.5 rounded ' +
+  'text-base font-medium ' +
+  'text-ink-gray-8 bg-surface-gray-2 ' +
+  'hover:bg-surface-gray-3 active:bg-surface-gray-4 ' +
+  'transition-colors ' +
+  'focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-3'
+</script>
+
+<template>
+  <div class="flex justify-between gap-5 mt-10" v-if="visible">
+    <a v-if="prevLink" :href="withBase(prevLink.link)" :class="subtleMdLink">
+      <LucideLeft class="h-4 w-4" />
+      {{ prevLink.text }}
+    </a>
+
+    <a v-if="nextLink" :href="withBase(nextLink.link)" :class="subtleMdLink">
+      {{ nextLink.text }}
+      <LucideRight class="h-4 w-4" />
+    </a>
+  </div>
+</template>

package/vitepress/components/Docs/PropsTable.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+interface ItemProp {
+  name: string
+  description?: string
+  type?: string
+  required: boolean
+  default?: string
+  deprecated?: string | boolean
+}
+
+interface Props {
+  name?: string
+  data: ItemProp[]
+}
+
+const props = defineProps<Props>()
+const slots = useSlots()
+
+const hasCustomCodeSlot = computed(() => Boolean(slots.code))
+
+const typeDefinition = computed(() => {
+  const typeName = props.name ? `${props.name}Props` : 'ComponentProps'
+  const lines = [`interface ${typeName} {`]
+
+  for (const item of props.data) {
+    const key = /^[A-Za-z_$][\w$]*$/.test(item.name)
+      ? item.name
+      : JSON.stringify(item.name)
+    const optional = item.required ? '' : '?'
+    const type = item.type || 'unknown'
+
+    lines.push(`  ${key}${optional}: ${type}`)
+  }
+
+  lines.push('}')
+  return lines.join('\n')
+})
+</script>
+
+<template>
+  <div class="not-prose mt-2">
+    <details class="group">
+      <summary
+        class="flex rounded cursor-pointer list-none items-center gap-2 py-2 text-sm font-medium text-ink-gray-6 transition-colors hover:text-ink-gray-9"
+      >
+        <LucideChevronRight
+          class="size-4 shrink-0 transition-transform group-open:rotate-90"
+        />
+        Show types
+      </summary>
+
+      <div class="mt-1 overflow-hidden rounded-xl border bg-surface-gray-1">
+        <slot v-if="hasCustomCodeSlot" name="code" />
+        <pre
+          v-else
+          class="overflow-x-auto whitespace-pre px-4 py-3 font-mono text-xs leading-6 text-ink-gray-7"
+        ><code>{{ typeDefinition }}</code></pre>
+      </div>
+    </details>
+
+    <div class="mt-4 hidden sm:block">
+      <table class="w-full border-collapse border-b text-left">
+        <thead>
+          <tr class="border-b">
+            <th
+              class="w-[24%] py-2.5 pr-2 text-sm font-semibold text-ink-gray-9"
+            >
+              Prop
+            </th>
+            <th
+              class="w-[20%] px-2 py-2.5 text-sm font-semibold text-ink-gray-9"
+            >
+              Default
+            </th>
+            <th
+              class="w-[56%] px-2 py-2.5 text-sm font-semibold text-ink-gray-9"
+            >
+              Type
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr v-for="x in data" :key="x.name" class="border-b last:border-b-0">
+            <td class="py-2 pr-2 align-top">
+              <div
+                class="font-mono text-xs font-medium leading-6 text-ink-gray-9 break-words"
+              >
+                <span :class="{ 'line-through': x.deprecated }">{{
+                  x.name
+                }}</span
+                ><span
+                  v-if="x.required"
+                  class="text-ink-gray-5"
+                  title="Required"
+                  aria-label="required"
+                  >*</span
+                >
+              </div>
+            </td>
+
+            <td class="px-2 py-2 align-top">
+              <div
+                class="whitespace-pre-wrap break-words font-mono text-xs leading-6 text-ink-gray-6"
+              >
+                {{ x.default || '—' }}
+              </div>
+            </td>
+
+            <td class="px-2 py-2 align-top">
+              <div
+                v-if="!x.deprecated"
+                class="whitespace-normal break-words font-mono text-xs leading-6 text-ink-gray-8"
+              >
+                {{ x.type || '—' }}
+              </div>
+              <p
+                v-if="typeof x.deprecated === 'string'"
+                class="whitespace-pre-wrap text-p-sm text-ink-gray-6"
+              >
+                Deprecated — {{ x.deprecated }}
+              </p>
+              <p
+                v-else-if="x.description"
+                class="mt-1 whitespace-pre-wrap text-p-sm leading-6 text-ink-gray-6"
+              >
+                {{ x.description }}
+              </p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="mt-4 sm:hidden">
+      <div
+        v-for="x in data"
+        :key="x.name"
+        class="border-b last:border-b-0 py-3 grid gap-1.5"
+      >
+        <div class="flex items-baseline justify-between gap-3">
+          <div
+            class="font-mono text-xs font-medium leading-6 text-ink-gray-9 break-all"
+          >
+            <span :class="{ 'line-through': x.deprecated }">{{ x.name }}</span
+            ><span
+              v-if="x.required"
+              class="text-ink-gray-5"
+              title="Required"
+              aria-label="required"
+              >*</span
+            >
+          </div>
+          <span
+            v-if="x.default"
+            class="font-mono text-xs leading-6 text-ink-gray-6 shrink-0"
+          >
+            = {{ x.default }}
+          </span>
+        </div>
+
+        <div
+          v-if="!x.deprecated"
+          class="whitespace-normal break-words font-mono text-xs leading-6 text-ink-gray-8"
+        >
+          {{ x.type || '—' }}
+        </div>
+        <p
+          v-if="typeof x.deprecated === 'string'"
+          class="whitespace-pre-wrap text-p-sm text-ink-gray-6"
+        >
+          Deprecated — {{ x.deprecated }}
+        </p>
+        <p
+          v-else-if="x.description"
+          class="whitespace-pre-wrap text-p-sm leading-6 text-ink-gray-6"
+        >
+          {{ x.description }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

package/vitepress/components/Docs/Search.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+import { Button } from 'frappe-ui'
+import { state } from '../../state'
+import CommandPalette from './CommandPalette.vue'
+
+// Cmd/Ctrl+K toggles the command palette.
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+    e.preventDefault()
+    state.searchDialog = !state.searchDialog
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', onKeydown))
+onUnmounted(() => window.removeEventListener('keydown', onKeydown))
+</script>
+
+<template>
+  <Button aria-label="Open search" @click="state.searchDialog = true">
+    <template #prefix>
+      <span class="lucide-search size-4" />
+    </template>
+    Search
+    <template #suffix>
+      <span class="flex items-center gap-1 text-xs text-ink-gray-5">
+        <span class="lucide-command size-3" />
+        K
+      </span>
+    </template>
+  </Button>
+
+  <CommandPalette v-model:open="state.searchDialog" />
+</template>