frappe-ui 0.1.224 → 0.1.226

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.224",
+  "version": "0.1.226",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,

package/src/components/Checkbox/Checkbox.vue

@@ -14,6 +14,7 @@
       type="checkbox"
       :disabled="disabled"
       :id="htmlId"
+      :checked="Boolean(modelValue)"
       @change="
         (e) =>
           $emit('update:modelValue', (e.target as HTMLInputElement).checked)

package/src/components/Combobox/Combobox.vue

@@ -314,6 +314,7 @@ defineExpose({
         @click="handleClick"
       >
         <div class="flex items-center gap-2 flex-1 overflow-hidden">
+          <slot name="prefix" />
           <RenderIcon v-if="selectedOptionIcon" :icon="selectedOptionIcon" />
           <ComboboxInput
             :value="searchTerm"

package/src/components/FormControl/FormControl.story.vue

@@ -54,10 +54,10 @@ const variants = ['subtle', 'outline']
         />
       </div>
     </Variant>
-    <Variant title="autocomplete">
+    <Variant title="Combobox">
       <div class="p-2">
         <FormControl
-          type="autocomplete"
+          type="combobox"
           :options="[
             { label: 'One', value: '1' },
             { label: 'Two', value: '2' },

package/src/components/FormControl/FormControl.vue

@@ -20,6 +20,15 @@
         <slot name="prefix" />
       </template>
     </Select>
+    <Combobox
+      v-else-if="type === 'combobox'"
+      :id="id"
+      v-bind="{ ...controlAttrs, variant }"
+    >
+      <template #prefix v-if="$slots.prefix">
+        <slot name="prefix" />
+      </template>
+    </Combobox>
     <Autocomplete
       v-else-if="type === 'autocomplete'"
       v-bind="{ ...controlAttrs }"
@@ -66,6 +75,7 @@ import { Select } from '../Select'
 import { Textarea } from '../Textarea'
 import { Checkbox } from '../Checkbox'
 import { Autocomplete } from '../Autocomplete'
+import { Combobox } from '../Combobox'
 import FormLabel from '../FormLabel.vue'
 import type { FormControlProps } from './types'
 

package/src/components/FormControl/types.ts

@@ -3,7 +3,7 @@ import type { TextInputTypes } from '../types/TextInput'
 export interface FormControlProps {
   label?: string
   description?: string
-  type?: TextInputTypes | 'textarea' | 'select' | 'checkbox' | 'autocomplete'
+  type?: TextInputTypes | 'textarea' | 'select' | 'checkbox' | 'autocomplete' | 'combobox'
   size?: 'sm' | 'md'
   variant?: 'subtle' | 'outline'
   required?: boolean

package/src/components/Select/Select.vue

@@ -77,7 +77,7 @@ const selectClasses = computed(() => {
 const selectOptions = computed(() => {
   const str = typeof props.options?.[0] == 'string'
   const tmp = props.options?.map((x) => ({ label: x, value: x }))
-  return (str ? tmp : props.options)?.filter((x) => x && x.value) || []
+  return (str ? tmp : props.options)?.filter((x) => x && String(x.value)) || []
 })
 </script>
 

package/src/components/Tabs/Tabs.story.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { h, reactive } from 'vue'
+import { reactive } from 'vue'
 import Tabs from './Tabs.vue'
-import FeatherIcon from '../FeatherIcon.vue'
+import LucideGithub from "~icons/lucide/github";
+import LucideTwitter from "~icons/lucide/twitter";
+import LucideLinkedin from "~icons/lucide/linkedin";
+
 const state = reactive({
   index: 0,
   tabs_without_icon: [
@@ -21,24 +24,25 @@ const state = reactive({
         'LinkedIn is an American business and employment-oriented online service that operates via websites and mobile apps.',
     },
   ],
+
   tabs_with_icon: [
     {
       label: 'Github',
       content:
         'Github is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.',
-      icon: h(FeatherIcon, { class: 'w-4 h-4', name: 'github' }),
+      icon: LucideGithub,
     },
     {
       label: 'Twitter',
       content:
         'Twitter is an American microblogging and social networking service on which users post and interact with messages known as "tweets".',
-      icon: h(FeatherIcon, { class: 'w-4 h-4', name: 'twitter' }),
+      icon: LucideTwitter,
     },
     {
       label: 'Linkedin',
       content:
         'LinkedIn is an American business and employment-oriented online service that operates via websites and mobile apps.',
-      icon: h(FeatherIcon, { class: 'w-4 h-4', name: 'linkedin' }),
+      icon: LucideLinkedin,
     },
   ],
 })
@@ -48,7 +52,6 @@ const state = reactive({
   <Story :layout="{ type: 'grid', width: '80%' }">
     <Variant title="Without Icon">
       <Tabs
-        as="div"
         class="border rounded"
         v-model="state.index"
         :tabs="state.tabs_without_icon"
@@ -60,9 +63,9 @@ const state = reactive({
         </template>
       </Tabs>
     </Variant>
+
     <Variant title="With Icon">
       <Tabs
-        as="div"
         class="border rounded"
         v-model="state.index"
         :tabs="state.tabs_with_icon"
@@ -74,13 +77,13 @@ const state = reactive({
         </template>
       </Tabs>
     </Variant>
+
     <Variant title="Vertical Tabs">
       <Tabs
-        as="div"
         class="border rounded"
         v-model="state.index"
         :tabs="state.tabs_with_icon"
-        vertical
+        :vertical='true'
       >
         <template #tab-panel="{ tab }">
           <div class="p-5">

package/src/components/Tabs/Tabs.vue

@@ -1,57 +1,64 @@
+<script setup lang="ts">
+import {
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsRoot,
+  TabsTrigger,
+} from 'reka-ui'
+
+import type { TabProps } from './types'
+import { h } from 'vue'
+
+const props = defineProps<TabProps>()
+
+const indicatorXCss = `left-0 bottom-0 h-[1px] w-[--reka-tabs-indicator-size] transition-[width,transform] 
+                          translate-x-[--reka-tabs-indicator-position] translate-y-[1px]`
+
+const indicatorYCss = `right-0 w-[1px] h-[--reka-tabs-indicator-size] transition-[height,transform]
+                           translate-y-[--reka-tabs-indicator-position] translate-x-[1px]`
+
+// Using a plain <button> element via `h('button')` to avoid picking up
+// the globally registered Button component and its styles.
+const Btn = h('button')
+</script>
+
 <template>
-  <TabGroup
-    v-bind="
-      as !== 'template'
-        ? {
-            as,
-            class: ['flex flex-1 overflow-hidden', vertical ? '' : 'flex-col '],
-          }
-        : {}
-    "
-    :defaultIndex="tabIndex"
-    :selectedIndex="tabIndex"
-    @change="(idx) => (tabIndex = idx)"
+  <TabsRoot
+    :as="props.as"
+    class="data-[orientation=vertical]:flex"
+    :orientation="props.vertical ? 'vertical' : 'horizontal'"
+    :default-value="props.tabs[0].label"
   >
-    <slot>
-      <TabList v-slot="{ tab, selected }">
-        <slot name="tab-item" v-bind="{ tab, selected }" />
-      </TabList>
-      <TabPanel v-slot="{ tab }">
-        <slot name="tab-panel" v-bind="{ tab }" />
-      </TabPanel>
-    </slot>
-  </TabGroup>
-</template>
+    <TabsList
+      class="relative flex data-[orientation=vertical]:flex-col p-1 border-b  data-[orientation=vertical]:border-r"
+    >
+      <TabsIndicator
+        class="absolute rounded-full duration-300"
+        :class="props.vertical ? indicatorYCss : indicatorXCss"
+      >
+        <div class="w-full h-full bg-surface-gray-7" />
+      </TabsIndicator>
 
-<script setup>
-import TabList from './TabList.vue'
-import TabPanel from './TabPanel.vue'
-import { TabGroup } from '@headlessui/vue'
-import { computed, provide } from 'vue'
-
-const props = defineProps({
-  as: {
-    type: String,
-    default: 'template',
-  },
-  tabs: {
-    type: Array,
-    required: true,
-  },
-  vertical: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const tabIndex = defineModel()
-
-provide(
-  'tab',
-  computed(() => ({
-    tabIndex,
-    tabs: props.tabs,
-    vertical: props.vertical,
-  })),
-)
-</script>
+      <TabsTrigger as="template" v-for="(tab, i) in props.tabs" :value="i">
+        <slot name="tab-item" v-bind="{ tab }">
+          <component
+            :is="tab.route ? 'router-link' : Btn"
+            :to="tab.route"
+            class="flex items-center gap-1.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:text-ink-gray-9 p-2.5 data-[state=active]:text-ink-gray-9"
+            :class="{ 'py-2.5': props.vertical,  }"
+          >
+            <component v-if="tab.icon" :is="tab.icon" class="size-4">
+            </component>
+
+            {{ tab.label }}
+          </component>
+        </slot>
+      </TabsTrigger>
+    </TabsList>
+
+    <TabsContent v-for="(tab, i) in props.tabs" :value="i">
+      <slot name="tab-panel" v-bind="{ tab }"> </slot>
+    </TabsContent>
+  </TabsRoot>
+</template>

package/src/components/Tabs/types.ts

@@ -0,0 +1,11 @@
+type Tab = {
+  label: string
+  icon?: string
+	route?:string
+}
+
+export interface TabProps {
+  as?: string
+  tabs: Tab[]
+  vertical?: Boolean
+}

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

@@ -257,7 +257,7 @@ function openLinkEditor(href: string, anchor: HTMLElement): Promise<string> {
       content: container,
       trigger: 'manual',
       interactive: true,
-      appendTo: document.body,
+      appendTo: () => anchor.closest('[role="dialog"]') || document.body,
       placement: 'top',
       arrow: false,
       theme: 'link-editor',

package/src/index.ts

@@ -33,8 +33,6 @@ export * from './components/Spinner'
 export * from './components/Switch'
 export * from './components/TabButtons'
 export { default as Tabs } from './components/Tabs/Tabs.vue'
-export { default as TabList } from './components/Tabs/TabList.vue'
-export { default as TabPanel } from './components/Tabs/TabPanel.vue'
 export * from './components/TextInput'
 export * from './components/Textarea'
 export * from './components/TextEditor'

package/tsconfig.base.json

@@ -14,9 +14,7 @@
     "skipLibCheck": true,
     "noEmit": true,
     "types": ["vitest/globals", "unplugin-icons/types/vue"],
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
+    "declaration": true,
+    "emitDeclarationOnly": true,
   }
 }

package/vite/index.js

@@ -29,6 +29,22 @@ function frappeuiPlugin(
   if (options.buildConfig) {
     plugins.push(buildConfig(options.buildConfig))
   }
+
+  const DepsIncludePlugin = {
+    name: 'optimize-deps-include',
+    config(config) {
+      if (!config.optimizeDeps) config.optimizeDeps = {}
+
+      const includedDeps = config.optimizeDeps?.include || []
+      const moduleName = 'highlight.js/lib/core'
+
+      if (includedDeps.includes(moduleName)) return
+      config.optimizeDeps.include = [moduleName, ...includedDeps]
+    },
+  }
+
+  plugins.push(DepsIncludePlugin)
+
   return plugins
 }
 

package/src/components/Tabs/TabList.vue

@@ -1,82 +0,0 @@
-<template>
-  <TabList
-    class="relative flex"
-    :class="
-      t.vertical
-        ? 'flex-col border-r overflow-y-auto'
-        : 'gap-7.5 border-b overflow-x-auto items-center px-5'
-    "
-  >
-    <Tab
-      ref="tabRef"
-      as="template"
-      v-for="(tab, i) in t.tabs"
-      :key="i"
-      v-slot="{ selected }"
-      class="focus:outline-none focus:transition-none"
-    >
-      <slot v-bind="{ tab, selected }">
-        <button
-          class="flex items-center gap-1.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:text-ink-gray-9"
-          :class="[
-            selected ? 'text-ink-gray-9' : '',
-            t.vertical
-              ? 'py-2.5 px-4 border-r border-transparent hover:border-outline-gray-3'
-              : 'py-3 border-b border-transparent hover:border-outline-gray-3',
-          ]"
-        >
-          <component v-if="tab.icon" :is="tab.icon" class="size-4" />
-          {{ tab.label }}
-        </button>
-      </slot>
-    </Tab>
-    <div
-      ref="indicator"
-      class="tab-indicator absolute bg-surface-gray-7"
-      :class="[t.vertical ? 'right-0 w-px' : 'bottom-0 h-px', transitionClass]"
-    />
-  </TabList>
-</template>
-<script setup>
-import { TabList, Tab } from '@headlessui/vue'
-import { ref, watch, computed, onMounted, nextTick, inject } from 'vue'
-
-const t = inject('tab')
-
-const tabRef = ref([])
-const indicator = ref(null)
-const tabsLength = computed(() => t.value.tabs.value?.length)
-
-const transitionClass = ref('')
-
-function moveIndicator(index) {
-  if (index >= tabsLength.value) {
-    index = tabsLength.value - 1
-  }
-  const selectedTab = tabRef.value[index].el
-  if (t.value.vertical.value) {
-    indicator.value.style.height = `${selectedTab.offsetHeight}px`
-    indicator.value.style.top = `${selectedTab.offsetTop}px`
-  } else {
-    indicator.value.style.width = `${selectedTab.offsetWidth}px`
-    indicator.value.style.left = `${selectedTab.offsetLeft}px`
-  }
-}
-
-watch(
-  () => t.value.tabIndex.value,
-  (index) => {
-    if (index >= tabsLength.value) {
-      t.value.tabIndex.value = tabsLength.value - 1
-    }
-    transitionClass.value = 'transition-all duration-300 ease-in-out'
-    nextTick(() => moveIndicator(index))
-  },
-)
-
-onMounted(() => {
-  nextTick(() => moveIndicator(t.value.tabIndex.value))
-  // Fix for indicator not moving on initial load
-  setTimeout(() => moveIndicator(t.value.tabIndex.value), 100)
-})
-</script>

package/src/components/Tabs/TabPanel.vue

@@ -1,17 +0,0 @@
-<template>
-  <TabPanels class="flex flex-1 overflow-hidden">
-    <TabPanel
-      class="flex flex-1 flex-col overflow-y-auto focus:outline-none"
-      v-for="(tab, i) in t.tabs"
-      :key="i"
-    >
-      <slot v-bind="{ tab }" />
-    </TabPanel>
-  </TabPanels>
-</template>
-<script setup>
-import { TabPanels, TabPanel } from '@headlessui/vue'
-import { inject } from 'vue'
-
-const t = inject('tab')
-</script>

package/src/components/Tabs/Tabs.story.md

@@ -1,97 +0,0 @@
-## Props
-
-### tabs
-
-It is an array of objects which contains the following attributes:
-
-1. `label` is the name of the tab, it is required.
-2. `icon` is the icon to be shown in the tab, it accept component and it is
-   optional.
-3. You can add more attributes which can be used for custom rendering in the tab
-   header or content.
-
-### v-model
-
-It is used to set the active tab or change the active tab. It is required.
-
-### vertical
-
-It is used to show the tabs vertically. It is optional.
-
-### as
-
-You can set it to `div` to wrap tabs in a `div`. It can be any valid HTML tag.
-This is useful to control the layout of the tabs. It is optional.
-
-1. `as="div"` or any valid HTML tag
-
-```html
-<div>
-  <!-- container div -->
-  <div>
-    <div active>Tab 1</div>
-    <div>Tab 2</div>
-    <div>Tab 3</div>
-  </div>
-  <div>
-    <div active>Content 1</div>
-    <div>Content 2</div>
-    <div>Content 3</div>
-  </div>
-</div>
-```
-
-2. `as` is not set
-
-```html
-<div>
-  <div active>Tab 1</div>
-  <div>Tab 2</div>
-  <div>Tab 3</div>
-</div>
-<div>
-  <div active>Content 1</div>
-  <div>Content 2</div>
-  <div>Content 3</div>
-</div>
-```
-
-## Slots
-
-1. **tab-item:** You can use this slot to render custom tab items. It is
-   optional.
-2. **tab-panel:** You can use this slot to render custom tab panels. It is
-   required. Example:
-
-```vue
-<Tabs v-model="tabIndex" :tabs="tabs">
-   <template #tab-item="{ tab, selected }">
-      <div :class="{ 'text-gray-900 font-semibold': selected }">
-         <span>{{ tab.label }}</span>
-         <span>{{ tab.icon }}</span>
-      </div>
-   </template>
-   <template #tab-panel="{ tab }">
-      <div>{{ tab.content }}</div>
-   </template>
-</Tabs>
-```
-
-## Layout Customization
-
-You can customize the layout of the tabs by using `<TabList />` and `<TabPanels />`
-components.
-
-```vue
-<Tabs v-model="tabIndex" :tabs="tabs">
-   <TabList v-slot="{ tab, selected }">
-      <div :class="{ 'text-gray-900 font-semibold': selected }">
-         <span>{{ tab.label }}</span>
-         <span>{{ tab.icon }}</span>
-      </div>
-   </TabList>
-   <TabPanel v-slot="{ tab }">
-      <div>{{ tab.content }}</div>
-   </TabPanel>
-</Tabs>
-```