frappe-ui 0.1.277 → 0.1.278

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.277",
+  "version": "0.1.278",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,
   "scripts": {
     "test": "vitest --run",
     "type-check": "tsc --noEmit",
-    "prettier": "yarn prettier -w ./src",
+    "prettier": "yarn run prettier -w ./src",
     "bump-and-release": "yarn test && git pull --rebase origin main && yarn run release-patch",
     "release-patch": "yarn version --patch && git push && git push --tags",
     "dev": "vite",
@@ -16,7 +16,8 @@
     "docs:dev": "vitepress dev docs --host",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
-    "docs:gen": "node docs/scripts/propsgen.ts --trace-uncaught"
+    "docs:gen": "tsx docs/scripts/propsgen.ts",
+    "docs:gen:all": "yarn docs:gen --all"
   },
   "exports": {
     ".": {
@@ -49,8 +50,8 @@
       "import": "./src/components/TextEditor/style.css"
     },
     "./tsconfig.base.json": {
-      "default": "./tsconfig.base.json",
-      "types": "./tsconfig.base.json"
+      "types": "./tsconfig.base.json",
+      "default": "./tsconfig.base.json"
     }
   },
   "files": [
@@ -140,6 +141,7 @@
     "postcss": "^8.4.21",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.2.7",
+    "tsx": "^4.20.6",
     "vite": "^5.1.8",
     "vitepress": "^2.0.0-alpha.15",
     "vitest": "^2.1.8",

package/src/components/Autocomplete/Autocomplete.vue

@@ -321,6 +321,7 @@ const findOption = (option: AutocompleteOption) => {
 }
 
 const makeOption = (option: AutocompleteOption) => {
+  if (option == null) return { label: '', value: '' }
   return isOption(option) ? option : { label: option, value: option }
 }
 

package/src/components/Button/Button.vue

@@ -1,14 +1,25 @@
 <template>
-  <Tooltip :text="tooltip" :disabled="!tooltip?.length">
-    <button
-      v-bind="$attrs"
-      :class="buttonClasses"
-      @click="handleClick"
-      :disabled="isDisabled"
-      :ariaLabel="label"
-      :type = "props.type"
-      ref="rootRef"
-    >
+  <!--
+    The <button> is the effective DOM root. reka's Tooltip primitives
+    (TooltipProvider/TooltipRoot/TooltipTrigger) are renderless / pass-
+    through, so consumers wrapping <Button> in their own reka primitives
+    (e.g. ComboboxTrigger as-child) see a native <button> element with
+    all forwarded attrs — tabindex, aria-expanded, role — intact. Using
+    the separate <Tooltip> component as a wrapper dropped those attrs
+    because it's a Vue component with `inheritAttrs: false`.
+  -->
+  <TooltipProvider>
+    <TooltipRoot>
+      <TooltipTrigger as-child>
+        <button
+          v-bind="$attrs"
+          :class="buttonClasses"
+          @click="handleClick"
+          :disabled="isDisabled"
+          :aria-label="label"
+          :type="props.type"
+          ref="rootRef"
+        >
       <LoadingIndicator
         v-if="loading"
         :class="{
@@ -19,8 +30,13 @@
         }"
       />
       <slot name="prefix" v-else-if="$slots['prefix'] || iconLeft">
+        <span
+          v-if="iconLeft && typeof iconLeft === 'string' && iconLeft.startsWith('lucide-')"
+          :class="[iconLeft, lucideSlotClasses]"
+          aria-hidden="true"
+        />
         <FeatherIcon
-          v-if="iconLeft && typeof iconLeft === 'string'"
+          v-else-if="iconLeft && typeof iconLeft === 'string'"
           :name="iconLeft"
           :class="slotClasses"
           aria-hidden="true"
@@ -30,8 +46,13 @@
 
       <template v-if="loading && loadingText">{{ loadingText }}</template>
       <template v-else-if="isIconButton && !loading">
+        <span
+          v-if="icon && typeof icon === 'string' && icon.startsWith('lucide-')"
+          :class="[icon, lucideSlotClasses]"
+          aria-hidden="true"
+        />
         <FeatherIcon
-          v-if="icon && typeof icon === 'string'"
+          v-else-if="icon && typeof icon === 'string'"
           :name="icon"
           :class="slotClasses"
         />
@@ -46,28 +67,37 @@
       </span>
 
       <slot name="suffix">
+        <span
+          v-if="iconRight && typeof iconRight === 'string' && iconRight.startsWith('lucide-')"
+          :class="[iconRight, lucideSlotClasses]"
+          aria-hidden="true"
+        />
         <FeatherIcon
-          v-if="iconRight && typeof iconRight === 'string'"
+          v-else-if="iconRight && typeof iconRight === 'string'"
           :name="iconRight"
           :class="slotClasses"
           aria-hidden="true"
         />
-          <component
-            v-else-if="iconRight"
-            :is="iconRight"
-            :class="slotClasses"
-          />
+        <component
+          v-else-if="iconRight"
+          :is="iconRight"
+          :class="slotClasses"
+        />
       </slot>
-    </button>
-  </Tooltip>
+        </button>
+      </TooltipTrigger>
+      <TooltipBubble v-if="tooltip?.length" :text="tooltip" />
+    </TooltipRoot>
+  </TooltipProvider>
 </template>
 <script lang="ts" setup>
 import { computed, useSlots, ref } from 'vue'
+import { TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
 import FeatherIcon from '../FeatherIcon.vue'
 import LoadingIndicator from '../LoadingIndicator.vue'
+import TooltipBubble from '../Tooltip/TooltipBubble.vue'
 import { useRouter } from 'vue-router'
 import type { ButtonProps, ThemeVariant } from './types'
-import Tooltip from '../Tooltip/Tooltip.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -197,6 +227,16 @@ const slotClasses = computed(() => {
   return classes
 })
 
+const lucideSlotClasses = computed(() => {
+  return {
+    sm: 'size-4',
+    md: 'size-4.5',
+    lg: 'size-5',
+    xl: 'size-6',
+    '2xl': 'size-6',
+  }[props.size]
+})
+
 const isDisabled = computed(() => {
   return props.disabled || props.loading
 })

package/src/components/Calendar/Calendar.vue

@@ -182,6 +182,9 @@ function updateActiveView(value, d, isPreviousMonth, isNextMonth) {
     isPreviousMonth && decrementMonth()
     isNextMonth && incrementMonth()
   }
+  if (value === 'Week') {
+    week.value = findCurrentWeek(currentMonthDates.value[date.value])
+  }
 }
 
 const selectedMonthDate = ref(dayjs().format('YYYY-MM-DD'))
@@ -251,6 +254,12 @@ function handleShortcuts(e) {
 provide('activeView', activeView)
 provide('config', overrideConfig)
 
+watch(activeView, (value) => {
+  if (value === 'Week') {
+    week.value = findCurrentWeek(currentMonthDates.value[date.value])
+  }
+})
+
 const parseEvents = computed(() => {
   return (
     props.events?.map((event) => {
@@ -401,6 +410,34 @@ let date = ref(
 )
 let selectedDay = computed(() => currentMonthDates.value[date.value])
 
+function computeCurrentDay() {
+  if (activeView.value === 'Week') {
+    const weekDates = datesInWeeks.value[week.value] || []
+    return weekDates[0] ? weekDates[0].getDate() : null
+  }
+  if (activeView.value === 'Day') {
+    const day = selectedDay.value
+    return day ? new Date(day).getDate() : null
+  }
+  return 1
+}
+
+let currentDay = ref(computeCurrentDay())
+let _lastInternalDay = currentDay.value
+
+watch([activeView, week, date], () => {
+  const val = computeCurrentDay()
+  _lastInternalDay = val
+  currentDay.value = val
+})
+
+watch(currentDay, (newVal) => {
+  if (newVal == null) return
+  if (newVal === _lastInternalDay) return
+  const target = new Date(currentYear.value, currentMonth.value, newVal)
+  setCalendarDate(target)
+})
+
 function updateCurrentDate(d) {
   activeView.value = 'Day'
   date.value = findIndexOfDate(d)
@@ -685,6 +722,7 @@ defineExpose({
   currentMonthYear,
   currentYear,
   currentMonth,
+  currentDay,
   enabledModes,
   activeView,
   decrement,