frappe-ui 0.1.276 → 0.1.278

package/frappe/drive/components/MoveDialog.vue

@@ -443,13 +443,13 @@ function closeEntity(name) {
 }
 
 const moveFile = async () => {
-  open.value = false
   emit('success')
   await move.submit({
     entity_names: props.entities.map((obj) => obj.name),
     new_parent: selected.value,
     team: chosenTeam.value,
   })
+  open.value = false
   emit('complete')
 }
 </script>

package/frappe/drive/components/RenameDialog.vue

@@ -8,7 +8,7 @@
         {
           label: 'Confirm',
           variant: 'solid',
-          disabled: !newTitle || newTitle === entity.title,
+          disabled: !newTitle || newTitle === entity.title || rename.loading,
           onClick: submit,
         },
       ],
@@ -42,7 +42,7 @@ import { Dialog } from '../../../src'
 import { rename } from '../js/resources'
 
 const props = defineProps({ entity: Object, modelValue: String })
-const emit = defineEmits(['update:modelValue', 'success'])
+const emit = defineEmits(['success', 'complete'])
 const dialogType = defineModel()
 const open = ref(true)
 
@@ -64,10 +64,18 @@ if (props.entity.is_group || props.entity.doc || props.entity.is_link) {
 const submit = () => {
   const formattedTitle =
     newTitle.value + (file_ext.value ? '.' + file_ext.value : '')
-  rename.submit({
-    entity_name: props.entity.name,
-    new_title: formattedTitle,
-  })
+  rename.submit(
+    {
+      entity_name: props.entity.name,
+      new_title: formattedTitle,
+    },
+    {
+      onSuccess: () => {
+        open.value = false
+        emit('complete')
+      },
+    },
+  )
   emit('success', {
     name: props.entity.name,
     title: formattedTitle,

package/frappe/drive/components/TagInput/TagInput.vue

@@ -120,7 +120,7 @@ function removeTag(tag: string) {
 [data-state='active'] {
   background: var(--surface-gray-1);
 }
-[aria-label='Show popup'] {
+:deep([aria-label='Show popup']) {
   display: none;
 }
 </style>

package/frappe/drive/js/resources.js

@@ -1,5 +1,6 @@
 import { createResource, toast } from '../../../src'
-import { prettyData } from '../js/utils'
+import { prettyData, openEntity } from '../js/utils'
+
 export const getTeams = createResource({
   url: 'drive.api.permissions.get_teams',
   params: {
@@ -39,9 +40,10 @@ export const updateMoved = (team, new_parent, special) => {
 export const move = createResource({
   url: 'drive.api.files.move',
   onSuccess(data) {
+    console.log(data)
     toast.success('Moved to ' + data.title, {
       action: {
-        label: 'Go',
+        label: 'Go to folder',
         onClick: () => {
           if (!data.special)
             openEntity({

package/frappe/drive/js/utils.js

@@ -26,7 +26,7 @@ export function getFileLink(entity, copy = true) {
   }
   if (!copy) return link
   try {
-    copyToClipboard(link).then(() => toast.success('Copied to your clipboard!'))
+    copyToClipboard(link).then(() => toast.success('Copied to your clipboard.'))
   } catch (err) {
     console.error('Failed to copy link:', err)
   }
@@ -108,3 +108,34 @@ export const formatDate = (date) => {
 
   return `${formattedDate}, ${formattedTime}`
 }
+
+
+export const openEntity = (entity, new_tab = false) => {
+  if (new_tab) {
+    return window.open(getFileLink(entity, false), '_blank')
+  }
+
+  if (entity.name === '') {
+    if (entity.is_private) window.location.href = '/drive/'
+    else window.location.href = '/drive/t/' + entity.team
+  } else if (entity.is_group) {
+    window.location.href = '/drive/d/' + entity.name
+  } else if (entity.is_link) {
+    const origin = new URL(entity.path).origin
+    if (
+      confirm(
+        `This will open an external link to ${origin} - are you sure you want to open?`,
+      )
+    )
+      window.open(entity.path, '_blank')
+  } else if (entity.mime_type === 'frappe/slides') {
+    window.location.href = '/slides/presentation/' + entity.path
+  } else if (
+    entity.mime_type === 'frappe_doc' ||
+    entity.mime_type === 'text/markdown'
+  ) {
+    window.location.href = '/writer/w/' + entity.name
+  } else {
+    window.location.href = '/drive/f/' + entity.name
+  }
+}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.276",
+  "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,