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

package/vitepress/theme/index.ts

@@ -0,0 +1,21 @@
+import type { Theme } from 'vitepress'
+import '../css/style.css'
+
+import Layout from '../components/Layout.vue'
+import Demo from '../components/Docs/Demo.vue'
+import PropsTable from '../components/Docs/PropsTable.vue'
+import SlotsTable from '../components/Docs/SlotsTable.vue'
+import EmitsTable from '../components/Docs/EmitsTable.vue'
+
+// PROSE theme: layout + generic doc components only. Component-showcase
+// machinery (the *Builder.vue playgrounds) is not part of the reusable
+// theme — it lives in the frappe-ui docs site that documents those components.
+export const theme = {
+  Layout,
+  enhanceApp({ app }) {
+    app.component('ComponentPreview', Demo)
+    app.component('PropsTable', PropsTable)
+    app.component('SlotsTable', SlotsTable)
+    app.component('EmitsTable', EmitsTable)
+  },
+} satisfies Theme

package/frappe/telemetry/utils.ts

@@ -1,15 +0,0 @@
-import { call } from 'frappe-ui'
-
-export const silentCall = <T>(method: string): Promise<T> => {
-  // To prevent console errors/logs from being shown
-  // when method doesn't exist in older versions of Frappe
-  const originalError = console.error
-  const originalLog = console.log
-  console.error = () => {}
-  console.log = () => {}
-
-  return call(method).catch(() => {}).finally(() => {
-    console.log = originalLog
-    console.error = originalError
-  })
-}

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

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import { Badge } from 'frappe-ui'
-</script>
-
-<template>
-  <Badge theme="gray" size='lg'>Solid</Badge>
-  <Badge theme="blue" size='lg'>Subtle</Badge>
-  <Badge theme="green" size='lg'>Outline</Badge>
-  <Badge theme="orange" size='lg'>Ghost</Badge>
-</template>

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

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import { Badge } from 'frappe-ui'
-</script>
-
-<template>
-  <Badge variant="solid" size="lg">Solid</Badge>
-  <Badge variant="subtle" size="lg">Subtle</Badge>
-  <Badge variant="outline" size="lg">Outline</Badge>
-  <Badge variant="ghost" size="lg">Ghost</Badge>
-</template>

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

@@ -1,27 +0,0 @@
-<script setup>
-import { Button } from 'frappe-ui'
-</script>
-
-<template>
-  <Button>
-    <template #icon>
-      <LucideBolt class="size-4" />
-    </template>
-  </Button>
-
-  <Button>
-    <template #prefix>
-      <LucideDownload class="size-4" />
-    </template>
-    Download
-  </Button>
-
-  <Button>
-    <template #suffix>
-      <LucideArrowRight class="size-4" />
-    </template>
-    Get Started
-  </Button>
-
-  <Button :loading="true"> Fetching </Button>
-</template>

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

@@ -1,11 +0,0 @@
-<script setup>
-import { Button } from 'frappe-ui'
-</script>
-
-<template>
-  <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

@@ -1,10 +0,0 @@
-<script setup>
-import { Button } from 'frappe-ui'
-</script>
-
-<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/stories/Variants.vue

@@ -1,10 +0,0 @@
-<script setup>
-import { Button } from 'frappe-ui'
-</script>
-
-<template>
-  <Button variant="solid">Solid</Button>
-  <Button variant="subtle">Subtle</Button>
-  <Button variant="outline">Outline</Button>
-  <Button variant="ghost">Ghost</Button>
-</template>

package/src/components/Popover/stories/Hover.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { Button, Popover } from 'frappe-ui'
-</script>
-
-<template>
-  <Popover trigger="hover" :hover-delay="0.5">
-    <template #target>
-      <Button>Hover me</Button>
-    </template>
-    <template #body-main>
-      <div class="p-2 text-ink-gray-9">Popover content</div>
-    </template>
-  </Popover>
-</template>

package/src/components/Resource.vue

@@ -1,21 +0,0 @@
-<script>
-export default {
-  name: 'Resource',
-  props: ['options'],
-  resources: {
-    resource() {
-      return this.options
-    },
-  },
-  render() {
-    return this.$slots.default({
-      resource: this.$resources.resource,
-      data: this.$resources.resource.data,
-      error: this.$resources.resource.error,
-      loading: this.$resources.resource.loading,
-      fetch: (params) => this.$resources.resource.fetch(params),
-      submit: (params) => this.$resources.resource.submit(params),
-    })
-  },
-}
-</script>

package/src/components/Sidebar/stories/Example.vue

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-import { reactive } from 'vue'
-import { Sidebar } from 'frappe-ui'
-
-function toggleTheme() {
-  const currentTheme = document.documentElement.getAttribute('data-theme')
-  const newTheme = currentTheme === 'dark' ? 'light' : 'dark'
-  document.documentElement.setAttribute('data-theme', newTheme)
-}
-
-const crmSidebar = reactive({
-  header: {
-    title: 'Frappe CRM',
-    subtitle: 'Jane Doe',
-    logo: 'https://raw.githubusercontent.com/frappe/crm/develop/.github/logo.svg',
-    menuItems: [
-      { label: 'Toggle Theme', icon: 'lucide-moon', onClick: toggleTheme },
-      {
-        label: 'Help',
-        to: '/help',
-        icon: 'lucide-settings',
-        onClick: () => alert('Help clicked!'),
-      },
-      {
-        label: 'Logout',
-        to: '/logout',
-        icon: 'lucide-user',
-        onClick: () => alert('Logging out...'),
-      },
-    ],
-  },
-  sections: [
-    {
-      label: '',
-      items: [{ label: 'Notifications', icon: 'lucide-bell', to: '' }],
-    },
-    {
-      label: '',
-      items: [
-        { label: 'Leads', icon: 'lucide-users', to: '' },
-        { label: 'Deals', icon: 'lucide-briefcase', to: '' },
-        { label: 'Contacts', icon: 'lucide-user-check', to: '' },
-        { label: 'Organizations', icon: 'lucide-building', to: '' },
-        { label: 'Notes', icon: 'lucide-clipboard', to: '' },
-        { label: 'Tasks', icon: 'lucide-check-square', to: '' },
-        { label: 'Call Logs', icon: 'lucide-phone', to: '' },
-        {
-          label: 'Email Templates',
-          icon: 'lucide-mail',
-          to: '',
-        },
-      ],
-    },
-    {
-      label: 'Views',
-      collapsible: true,
-      items: [
-        { label: 'My Open Deals', icon: 'lucide-link', to: '' },
-        { label: 'Partnership Deals', icon: 'lucide-link', to: '' },
-        { label: 'Unassigned Deals', icon: 'lucide-link', to: '' },
-        {
-          label: 'Enterprise Pipeline',
-          icon: 'lucide-link',
-          to: '',
-        },
-      ],
-    },
-  ],
-})
-</script>
-
-<template>
-  <div class="w-full !-m-8">
-    <Sidebar :header="crmSidebar.header" :sections="crmSidebar.sections" />
-  </div>
-</template>

package/src/components/Spinner.vue

@@ -1,3 +0,0 @@
-<template>
-  <span class="lucide-loader-circle animate-spin size-4" />
-</template>

package/src/components/TabButtons/TabButtons.story.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import Story from "@/components/Story.vue";
-import { TabButtons } from "frappe-ui";
-const currentTab = ref("mytasks");
-</script>
-
-<template>
-  <div class="w-4/5">
-    <Story>
-      <TabButtons
-        :buttons='
-          [
-            { label: "Tasks assigned to me", value: "mytasks" },
-            { label: "Tasks created by me", value: "created" },
-          ]
-        '
-        v-model="currentTab"
-      />
-    </Story>
-  </div>
-</template>

package/src/utils/plugin.js

@@ -1,24 +0,0 @@
-import resourcesPlugin from '../resources/plugin'
-import call from './call'
-import initSocket from './socketio'
-
-let defaultOptions = {
-  resources: true,
-  call: true,
-  socketio: true,
-}
-
-export default {
-  install(app, options = {}) {
-    options = Object.assign({}, defaultOptions, options)
-    options.resources && app.use(resourcesPlugin, options.resources)
-
-    if (options.call) {
-      let callFunction = typeof options.call == 'function' ? options.call : call
-      app.config.globalProperties.$call = callFunction
-    }
-    if (options.socketio) {
-      app.config.globalProperties.$socket = initSocket(options.socketio)
-    }
-  },
-}