frappe-ui 0.1.164 → 0.1.166

package/frappe/Billing/TrialBanner.vue

@@ -61,8 +61,7 @@ createResource({
     trialEndDays.value = calculateTrialEndDays(data.trial_end_date)
     baseEndpoint.value = data.base_url
     siteName.value = data.site_name
-    showBanner.value =
-      data.setup_complete && data.plan.is_trial_plan && trialEndDays.value > 0
+    showBanner.value = data.plan.is_trial_plan && trialEndDays.value > 0
   },
 })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.164",
+  "version": "0.1.166",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",
@@ -57,6 +57,7 @@
     "@tiptap/vue-3": "^2.0.3",
     "@vueuse/core": "^10.4.1",
     "dayjs": "^1.11.13",
+    "dompurify": "^3.2.6",
     "echarts": "^5.6.0",
     "feather-icons": "^4.28.0",
     "highlight.js": "^11.11.1",

package/src/components/Sidebar/Sidebar.story.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import Sidebar from './Sidebar.vue';
+
+import Notifications from '~icons/lucide/bell';
+import Deals from '~icons/lucide/briefcase';
+import Organizations from '~icons/lucide/building';
+import Tasks from '~icons/lucide/check-square';
+import Notes from '~icons/lucide/clipboard';
+import Link from '~icons/lucide/link';
+import EmailTemplates from '~icons/lucide/mail';
+import Moon from '~icons/lucide/moon';
+import CallLogs from '~icons/lucide/phone';
+import Settings from '~icons/lucide/settings';
+import User from '~icons/lucide/user';
+import Contacts from '~icons/lucide/user-check';
+import Leads from '~icons/lucide/users';
+
+const crmSidebar = reactive({
+  header: {
+    title: 'Frappe CRM',
+    subtitle: 'Jane Doe',
+    menuItems: [
+      { label: 'Toggle Theme', icon: Moon, onClick: toggleTheme },
+      { label: 'Help', to: '/help', icon: Settings, onClick: () => alert('Help clicked!') },
+      { label: 'Logout', to: '/logout', icon: User, onClick: () => alert('Logging out...') },
+    ]
+  },
+  sections: [
+    {
+      label: '',
+      items: [
+        { label: 'Notifications', icon: Notifications, to: '' },
+      ],
+    },
+    {
+      label: '',
+      items: [
+        { label: 'Leads', icon: Leads, to: '/leads' },
+        { label: 'Deals', icon: Deals, to: '/deals' },
+        { label: 'Contacts', icon: Contacts, to: '/contacts' },
+        { label: 'Organizations', icon: Organizations, to: '/organizations' },
+        { label: 'Notes', icon: Notes, to: '/notes' },
+        { label: 'Tasks', icon: Tasks, to: '/tasks' },
+        { label: 'Call Logs', icon: CallLogs, to: '/call-logs' },
+        { label: 'Email Templates', icon: EmailTemplates, to: '/email-templates' },
+      ]
+    },
+    {
+      label: 'Views',
+      collapsible: true,
+      items: [
+        { label: 'My Open Deals', icon: Link, to: '/my-open-deals' },
+        { label: 'Partnership Deals', icon: Link, to: '/partnership-deals' },
+        { label: 'Unassigned Deals', icon: Link, to: '/unassigned-deals' },
+        { label: 'Enterprise Pipeline', icon: Link, to: '/enterprise-pipeline' },
+      ]
+    }
+  ]
+})
+function toggleTheme() {
+  const currentTheme = document.documentElement.getAttribute('data-theme');
+  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+  document.documentElement.setAttribute('data-theme', newTheme);
+}
+</script>
+
+<template>
+  <Story>
+    <Variant title="Sidebar">
+      <div class="flex h-screen w-full flex-col bg-surface-white shadow">
+        <Sidebar
+          :header="crmSidebar.header"
+          :sections="crmSidebar.sections"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/Sidebar/Sidebar.vue

@@ -0,0 +1,60 @@
+<template>
+  <div
+    class="flex h-full flex-col flex-shrink-0 overflow-y-auto border-r border-outline-gray-1 bg-surface-menu-bar transition-all duration-300 ease-in-out p-2"
+    :class="isCollapsed ? 'w-12' : 'w-60'"
+  >
+    <SidebarHeader
+      v-if="props.header"
+      :isCollapsed="isCollapsed"
+      :title="props.header.title"
+      :subtitle="props.header.subtitle"
+      :menu-items="props.header.menuItems"
+    />
+
+    <SidebarSection
+      v-for="section in props.sections"
+      :key="section.label"
+      :label="section.label"
+      :items="section.items"
+      :collapsible="section.collapsible"
+    />
+
+    <div class="mt-auto flex flex-col gap-2">
+      <slot name="footer-items" />
+      <SidebarItem
+        :label="isCollapsed ? 'Expand' : 'Collapse'"
+        :isCollapsed="isCollapsed"
+        @click="isCollapsed = !isCollapsed"
+      >
+        <template #icon>
+          <LucidePanelRightOpen
+            class="size-4 text-ink-gray-6 duration-300 ease-in-out"
+            :class="{ 'rotate-180': isCollapsed }"
+          />
+        </template>
+      </SidebarItem>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import { provide, ref, watchEffect } from 'vue'
+import SidebarHeader from './SidebarHeader.vue'
+import SidebarItem from './SidebarItem.vue'
+import { SidebarProps } from './types'
+
+import LucidePanelRightOpen from '~icons/lucide/panel-right-open'
+import SidebarSection from './SidebarSection.vue'
+
+const props = defineProps<SidebarProps>()
+
+const isCollapsed = ref(false)
+provide('isSidebarCollapsed', isCollapsed)
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const isMobile = breakpoints.smaller('sm')
+watchEffect(() => {
+  isCollapsed.value = isMobile.value
+})
+</script>

package/src/components/Sidebar/SidebarHeader.vue

@@ -0,0 +1,55 @@
+<template>
+  <Dropdown :options="props.menuItems">
+    <template v-slot="{ open }">
+      <button
+        class="flex h-12 items-center rounded-md py-2 duration-300 ease-in-out w-[14rem]"
+        :class="
+          isCollapsed
+            ? 'w-auto px-0'
+            : open
+              ? 'bg-surface-white px-2 shadow-sm'
+              : 'px-2 hover:bg-surface-gray-3'
+        "
+      >
+        <slot name="logo">
+          <div class="w-8 h-8 rounded bg-surface-gray-4 flex items-center justify-center text-ink-gray-7">
+            {{ props.title.charAt(0).toUpperCase() }}
+          </div>
+        </slot>
+        <div
+          class="flex flex-1 flex-col text-left duration-300 ease-in-out truncate"
+          :class="
+            isCollapsed
+              ? 'ml-0 w-0 overflow-hidden opacity-0'
+              : 'ml-2 w-auto opacity-100'
+          "
+          >
+          <div class="text-base font-medium text-ink-gray-8 leading-none">{{ props.title }}</div>
+          <div class="mt-1 text-sm text-ink-gray-6 leading-none">
+            {{ props.subtitle }}
+          </div>
+        </div>
+        <div
+          class="duration-300 ease-in-out"
+          :class="
+            isCollapsed
+              ? 'ml-0 w-0 overflow-hidden opacity-0'
+              : 'ml-2 w-auto opacity-100'
+          "
+          >
+          <LucideChevronDown class="h-4 w-4 text-ink-gray-7"/>
+        </div>
+      </button>
+    </template>
+  </Dropdown>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import LucideChevronDown from '~icons/lucide/chevron-down';
+import { SidebarHeaderProps } from './types';
+import Dropdown from '../Dropdown/Dropdown.vue';
+
+const props = defineProps<SidebarHeaderProps>();
+const isCollapsed = inject('isSidebarCollapsed', false);
+</script>

package/src/components/Sidebar/SidebarItem.vue

@@ -0,0 +1,94 @@
+<template>
+  <Button
+    :label="props.label"
+    @click="handleClick"
+    class="!w-full"
+    :class="
+      props.isActive
+        ? '!bg-surface-selected shadow-sm'
+        : 'hover:bg-surface-gray-2'
+    "
+    variant="ghost"
+  >
+    <template #icon>
+      <div
+        class="flex w-full items-center justify-between transition-all ease-in-out px-2 py-1"
+      >
+        <div class="flex items-center truncate">
+          <Tooltip
+            :text="props.label"
+            placement="right"
+            :disabled="!isCollapsed"
+          >
+            <span class="grid flex-shrink-0 place-items-center">
+              <slot name="icon">
+                <span
+                  v-if="props.icon && typeof props.icon === 'string'"
+                  class="size-4 text-ink-gray-6"
+                >
+                  {{ props.icon }}
+                </span>
+                <component
+                  v-else
+                  :is="props.icon"
+                  class="size-4 text-ink-gray-6"
+                />
+              </slot>
+            </span>
+          </Tooltip>
+          <Tooltip
+            :text="props.label"
+            placement="right"
+            :disabled="isCollapsed"
+            :hoverDelay="1.5"
+          >
+            <span
+              class="flex-1 flex-shrink-0 truncate text-sm transition-all ease-in-out"
+              :class="
+                isCollapsed
+                  ? 'ml-0 w-0 overflow-hidden opacity-0'
+                  : 'ml-2 w-auto opacity-100'
+              "
+            >
+              {{ props.label }}
+            </span>
+          </Tooltip>
+        </div>
+        <div
+          class="transition-all ease-in-out"
+          :class="
+            isCollapsed
+              ? 'ml-0 w-0 overflow-hidden opacity-0'
+              : 'ml-auto w-auto opacity-100'
+          "
+        >
+          <slot name="suffix">
+            <span v-if="props.suffix" class="text-sm text-ink-gray-4">
+              {{ props.suffix }}
+            </span>
+          </slot>
+        </div>
+      </div>
+    </template>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import { useRouter } from 'vue-router'
+import Button from '../Button/Button.vue'
+import Tooltip from '../Tooltip/Tooltip.vue'
+import { SidebarItemProps } from './types'
+
+const props = defineProps<SidebarItemProps>()
+const isCollapsed = inject('isSidebarCollapsed', false)
+
+const router = useRouter()
+function handleClick() {
+  if (props.onClick) {
+    props.onClick()
+  } else if (props.to) {
+    router.replace(props.to)
+  }
+}
+</script>

package/src/components/Sidebar/SidebarSection.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="flex flex-col mt-2">
+    <div
+      v-if="props.label"
+      class="relative flex items-center gap-1 px-2 py-1.5"
+      :class="props.collapsible ? 'cursor-pointer' : ''"
+      @click="isCollapsed = !isCollapsed"
+    >
+      <h3
+        class="h-4 text-sm text-ink-gray-5 transition-all duration-300 ease-in-out"
+        :class="
+          isSidebarCollapsed
+            ? 'w-0 overflow-hidden opacity-0'
+            : 'w-auto opacity-100'
+        "
+      >
+        {{ props.label }}
+      </h3>
+      <div v-if="props.collapsible">
+        <LucideChevronRight
+          v-if="!isSidebarCollapsed"
+          class="w-4 h-4 text-ink-gray-5 transition-all duration-300 ease-in-out"
+          :class="{ 'rotate-90': !isCollapsed }"
+        />
+      </div>
+      <div
+        v-if="isSidebarCollapsed"
+        class="absolute top-0 left-0 flex h-full w-full items-center justify-center transition-all duration-300 ease-in-out"
+        :class="isSidebarCollapsed ? 'opacity-100' : 'opacity-0'"
+      >
+        <hr class="w-full border-t border-ink-gray-3" />
+      </div>
+    </div>
+    <transition
+      enter-active-class="duration-300 ease-in"
+      leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
+      enter-to-class="max-h-[200px] overflow-hidden"
+      leave-from-class="max-h-[200px] overflow-hidden"
+      enter-from-class="max-h-0 overflow-hidden"
+      leave-to-class="max-h-0 overflow-hidden"
+    >
+      <nav v-if="!isCollapsed" class="space-y-0.5">
+        <SidebarItem
+          v-for="item in props.items"
+          :key="item.label"
+          :label="item.label"
+          :icon="item.icon"
+          :suffix="item.suffix"
+          :to="item.to"
+          :isActive="item.isActive"
+          :isCollapsed="isSidebarCollapsed"
+          :onClick="item.onClick"
+        >
+        </SidebarItem>
+      </nav>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, ref } from 'vue';
+import SidebarItem from './SidebarItem.vue';
+import { SidebarSectionProps } from './types';
+
+const props = defineProps<SidebarSectionProps>()
+
+const isSidebarCollapsed = inject('isSidebarCollapsed', false)
+const isCollapsed = ref(false)
+</script>

package/src/components/Sidebar/index.ts

@@ -0,0 +1,2 @@
+export { default as Sidebar } from './Sidebar.vue'
+export type { SidebarProps } from './types'

package/src/components/Sidebar/types.ts

@@ -0,0 +1,31 @@
+import { RouteLocationRaw } from 'vue-router'
+
+export type SidebarHeaderProps = {
+  title: string
+  subtitle?: string
+  menuItems?: {
+    label: string
+    icon: any // Icon component
+    onClick?: () => void
+  }[]
+}
+
+export type SidebarItemProps = {
+  label: string
+  icon?: any // Icon component
+  suffix?: string
+  to?: RouteLocationRaw
+  isActive?: boolean
+  onClick?: () => void
+}
+
+export type SidebarSectionProps = {
+  label?: string
+  items: SidebarItemProps[]
+  collapsible?: boolean
+}
+
+export type SidebarProps = {
+  header?: SidebarHeaderProps
+  sections?: SidebarSectionProps[]
+}

package/src/components/TextEditor/video-extension.ts

@@ -111,9 +111,6 @@ export default Node.create<VideoOptions>({
         (editor.isEditable ? ' cursor-pointer' : '')
 
       const video = document.createElement('video')
-      if (editor.isEditable) {
-        video.className = 'pointer-events-none'
-      }
       video.src = node.attrs.src
       video.setAttribute('controls', '')
 

package/src/components/Toast/Toast.vue

@@ -27,9 +27,8 @@
         <ToastDescription
           v-if="message"
           class="text-p-sm break-words text-ink-white"
-        >
-          {{ message }}
-        </ToastDescription>
+          v-html="message"
+        />
       </div>
     </div>
     <div class="flex items-center gap-2 h-7">

package/src/components/Toast/index.ts

@@ -1,7 +1,8 @@
-import { ref, defineComponent, h, Ref } from 'vue'
+import DOMPurify from 'dompurify'
+import { defineComponent, h, ref, Ref } from 'vue'
+import LoadingIndicator from '../LoadingIndicator.vue'
 import ToastComponent from './Toast.vue'
 import type { ToastProps } from './types'
-import LoadingIndicator from '../LoadingIndicator.vue'
 
 interface ToastOptions
   extends Omit<Partial<ToastProps>, 'open' | 'message' | 'title'> {
@@ -56,10 +57,14 @@ export const toast = {
     const durationInMs =
       options.duration != null ? options.duration * 1000 : 5000
 
+    const sanitizedMessage = DOMPurify.sanitize(options.message, {
+      ALLOWED_TAGS: ['a', 'em', 'strong', 'i', 'b', 'u'],
+    })
+
     const toastItem: ToastItem = {
       id: options.id || id,
       open: true,
-      message: options.message,
+      message: sanitizedMessage,
       type: options.type || 'info',
       duration: durationInMs,
       action: options.action,

package/src/index.ts

@@ -70,6 +70,7 @@ export { default as NestedPopover } from './components/ListFilter/NestedPopover.
 export * from './components/CircularProgressBar'
 export * from './components/Tree'
 export { default as FrappeUIProvider } from './components/Provider/FrappeUIProvider.vue'
+export { default as Sidebar } from './components/Sidebar/Sidebar.vue'
 
 // chart components
 export { default as AxisChart } from './components/Charts/AxisChart.vue'