frappe-ui 0.1.215 → 0.1.216

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -1,25 +1,10 @@
 <template>
-  <div class="flex min-w-0 items-center">
-    <template v-if="dropdownItems.length">
+  <div class="flex min-w-0 items-center" ref="crumbsRef">
+    <template v-if="overflowedX">
       <Dropdown class="h-7" :options="dropdownItems">
         <Button variant="ghost">
           <template #icon>
-            <svg
-              class="w-4 text-ink-gray-5"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <circle cx="12" cy="12" r="1" />
-              <circle cx="19" cy="12" r="1" />
-              <circle cx="5" cy="12" r="1" />
-            </svg>
+            <LucideEllipsis class="w-4 text-ink-gray-5" />
           </template>
         </Button>
       </Dropdown>
@@ -27,9 +12,8 @@
         /
       </span>
     </template>
-    <div
-      class="flex min-w-0 items-center overflow-hidden text-ellipsis whitespace-nowrap"
-    >
+
+    <div class="flex min-w-0 items-center text-ellipsis whitespace-nowrap">
       <template v-for="(item, i) in crumbs" :key="item.label">
         <router-link
           v-if="item.route"
@@ -75,26 +59,43 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
-import { useWindowSize } from '@vueuse/core'
-import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { Dropdown } from '../Dropdown'
 import { Button } from '../Button'
 import type { BreadcrumbsProps } from './types'
+import { ref, computed, nextTick, useTemplateRef } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import LucideEllipsis from '~icons/lucide/ellipsis'
+
+const crumbsEl = useTemplateRef<HTMLDivElement>('crumbsRef')
 
 const props = defineProps<BreadcrumbsProps>()
 
 const router = useRouter()
-const { width } = useWindowSize()
+const overflowedX = ref(false)
 
 const items = computed(() => {
   return (props.items || []).filter(Boolean)
 })
 
-const dropdownItems = computed(() => {
-  if (width.value > 640) return []
+const checkOverflow = () => {
+  if (!crumbsEl.value) return
+
+  // tmp show all items to measure item width
+  overflowedX.value = false
 
+  nextTick(() => {
+    const scrollWidth = crumbsEl.value?.scrollWidth || 0
+    const clientWidth = crumbsEl.value?.clientWidth || 0
+    overflowedX.value = scrollWidth > clientWidth
+  })
+}
+
+useResizeObserver(crumbsEl, checkOverflow)
+
+const dropdownItems = computed(() => {
   let allExceptLastTwo = items.value.slice(0, -2)
   return allExceptLastTwo.map((item) => {
     let onClick = () => {
@@ -114,10 +115,5 @@ const dropdownItems = computed(() => {
   })
 })
 
-const crumbs = computed(() => {
-  if (width.value > 640) return items.value
-
-  let lastTwo = items.value.slice(-2)
-  return lastTwo
-})
+const crumbs = computed(() => items.value.slice(overflowedX.value ? -2 : 0))
 </script>

package/src/components/Calendar/Calendar.story.vue

@@ -97,6 +97,7 @@ import Calendar from './Calendar.vue'
 import { Select } from '../Select'
 import DatePicker from '../DatePicker/DatePicker.vue'
 import { Button } from '../Button'
+import { logEvent } from 'histoire/client'
 
 const config = {
   defaultMode: 'Month',

package/src/components/Calendar/Calendar.vue

@@ -145,7 +145,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['create', 'update', 'delete'])
+const emit = defineEmits(['create', 'update', 'delete', 'rangeChange'])
 
 const defaultConfig = {
   scrollToHour: 15,
@@ -208,10 +208,14 @@ onUnmounted(() => {
   window.removeEventListener('keydown', handleShortcuts)
 })
 function handleShortcuts(e) {
-  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable) {
+  if (
+    e.target.tagName === 'INPUT' ||
+    e.target.tagName === 'TEXTAREA' ||
+    e.target.isContentEditable
+  ) {
     return
   }
-  
+
   if (e.key.toLowerCase() === 'm') {
     activeView.value = 'Month'
   }
@@ -601,6 +605,64 @@ function setCalendarDate(d) {
   })
 }
 
+function getVisibleRange() {
+  const toDateString = (date) => (date ? dayjs(date).format('YYYY-MM-DD') : '')
+
+  if (activeView.value === 'Day') {
+    const day = selectedDay.value
+    if (!day) return null
+    const start = dayjs(day).startOf('day')
+    const end = dayjs(day).endOf('day')
+    return {
+      startDate: toDateString(start),
+      endDate: toDateString(end),
+    }
+  }
+
+  if (activeView.value === 'Week') {
+    const weekDates = datesInWeeks.value[week.value] || []
+    if (!weekDates.length) return null
+    const orderedWeek = [...weekDates].sort((a, b) => a - b)
+    const start = dayjs(orderedWeek[0]).startOf('day')
+    const end = dayjs(orderedWeek[orderedWeek.length - 1]).endOf('day')
+    return {
+      startDate: toDateString(start),
+      endDate: toDateString(end),
+    }
+  }
+
+  const start = dayjs(
+    new Date(currentYear.value, currentMonth.value, 1),
+  ).startOf('day')
+  const end = dayjs(
+    new Date(currentYear.value, currentMonth.value + 1, 0),
+  ).endOf('day')
+  return {
+    startDate: toDateString(start),
+    endDate: toDateString(end),
+  }
+}
+
+let lastRangeKey = ''
+watch(
+  () => {
+    const range = getVisibleRange()
+    if (!range) return null
+    return {
+      view: activeView.value,
+      ...range,
+    }
+  },
+  (payload) => {
+    if (!payload) return
+    const key = `${payload.view}-${payload.startDate}-${payload.endDate}`
+    if (key === lastRangeKey) return
+    lastRangeKey = key
+    emit('rangeChange', payload)
+  },
+  { immediate: true },
+)
+
 defineExpose({
   reloadEvents,
   currentMonthYear,

package/src/components/Checkbox/Checkbox.vue

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

package/src/components/Checkbox/types.ts

@@ -1,7 +1,6 @@
 export interface CheckboxProps {
   size?: 'sm' | 'md'
   label?: string
-  checked?: boolean
   disabled?: boolean
   padding?: boolean
   modelValue?: boolean | 1 | 0

package/src/components/FileUploader/FileUploader.vue

@@ -19,11 +19,16 @@
         success,
         openFileSelector,
       }"
-    />
+    >
+      <Button @click="openFileSelector" :loading="uploading">
+        {{ uploading ? `Uploading ${progress}%` : 'Upload File' }}
+      </Button>
+    </slot>
   </div>
 </template>
 
 <script>
+import { Button } from '../Button'
 import FileUploadHandler from '../../utils/fileUploadHandler'
 
 export default {

package/src/components/Select/Select.vue

@@ -77,7 +77,7 @@ const selectOptions = computed(() => {
 })
 
 const textColor = computed(() => {
-  return props.disabled ? 'text-ink-gray-4' : 'text-ink-gray-8'
+  return props.disabled ? 'text-ink-gray-5' : 'text-ink-gray-8'
 })
 
 const fontSizeClasses = computed(() => {