frappe-ui 0.1.155 → 0.1.158

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.155",
+  "version": "0.1.158",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",

package/src/components/Autocomplete/Autocomplete.vue

@@ -322,7 +322,7 @@ const makeOption = (option: AutocompleteOption) => {
 
 const getLabel = (option: AutocompleteOption) => {
   if (isOption(option)) {
-    return option?.label || option?.value || 'No label'
+    return option?.label || option?.value
   }
   return option
 }

package/src/components/DatePicker/DatePicker.vue

@@ -15,7 +15,9 @@
         :class="inputClass"
         v-bind="$attrs"
       >
-        <template v-if="!hideIcon" #prefix><LucideCalendar class="size-4" /></template>
+        <template #prefix v-if="$slots.prefix">
+          <slot name="prefix" />
+        </template>
       </TextInput>
     </template>
 
@@ -128,16 +130,15 @@
 import { computed, onMounted } from 'vue'
 
 import { Button } from '../Button'
-import { Popover } from '../Popover'
 import FeatherIcon from '../FeatherIcon.vue'
+import { Popover } from '../Popover'
 import { TextInput } from '../TextInput'
-import LucideCalendar from '~icons/lucide/calendar'
 
-import { getDate, getDateValue } from './utils'
-import { useDatePicker } from './useDatePicker'
 import { dayjsLocal } from '../../utils/dayjs'
+import { useDatePicker } from './useDatePicker'
+import { getDate, getDateValue } from './utils'
 
-import type { DatePickerProps, DatePickerEmits } from './types'
+import type { DatePickerEmits, DatePickerProps } from './types'
 
 const props = defineProps<DatePickerProps>()
 const emit = defineEmits<DatePickerEmits>()

package/src/components/DatePicker/DateRangePicker.vue

@@ -1,5 +1,6 @@
 <template>
   <Popover
+    ref="popoverRef"
     @open="selectCurrentMonthYear"
     class="flex w-full [&>div:first-child]:w-full"
     :placement="placement"
@@ -8,14 +9,17 @@
       <TextInput
         readonly
         type="text"
-        icon-left="calendar"
         :placeholder="placeholder"
         :value="dateValue && formatter ? formatDates(dateValue) : dateValue"
         @focus="!readonly ? togglePopover() : null"
         class="w-full"
         :class="inputClass"
         v-bind="$attrs"
-      />
+      >
+        <template #prefix v-if="$slots.prefix">
+          <slot name="prefix" />
+        </template>
+      </TextInput>
     </template>
 
     <template #body="{ togglePopover }">
@@ -120,15 +124,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
-import { Button } from '../Button'
 import { Popover } from '../Popover'
-import FeatherIcon from '../FeatherIcon.vue'
 import { TextInput } from '../TextInput'
 
-import { getDate, getDateValue } from './utils'
 import { useDatePicker } from './useDatePicker'
+import { getDate, getDateValue } from './utils'
 
 import type { DatePickerEmits, DatePickerProps } from './types'
 
@@ -161,8 +163,8 @@ const dateValue = computed(() => {
   return props.value ? props.value : props.modelValue
 })
 
-const fromDate = ref<string>(dateValue.value ? dateValue.value[0] : '')
-const toDate = ref<string>(dateValue.value ? dateValue.value[1] : '')
+const fromDate = ref<string>('')
+const toDate = ref<string>('')
 
 function handleDateClick(date: Date) {
   if (fromDate.value && toDate.value) {
@@ -215,13 +217,15 @@ function isInRange(date: Date) {
   return date >= getDate(fromDate.value) && date <= getDate(toDate.value)
 }
 
-function formatDates(value: string) {
-  if (!value) {
-    return ''
+function formatDates(value: string | string[]) {
+  if (!value) return ''
+
+  if (typeof value === 'string') {
+    value = value.split(',')
   }
-  const values = value.split(',')
+
   return props.formatter
-    ? props.formatter(values[0]) + ' to ' + props.formatter(values[1])
+    ? props.formatter(value[0]) + ' to ' + props.formatter(value[1])
     : value
 }
 
@@ -231,5 +235,22 @@ function clearDates() {
   selectDates()
 }
 
-onMounted(() => selectCurrentMonthYear())
+const popoverRef = ref<InstanceType<typeof Popover>>()
+
+onMounted(() => {
+  let dates: string | string[] | undefined =
+    typeof dateValue?.value === 'string'
+      ? dateValue.value.split(',')
+      : dateValue.value
+  fromDate.value = dates?.[0] || ''
+  toDate.value = dates?.[1] || ''
+
+  selectCurrentMonthYear()
+})
+
+defineExpose({
+  open: () => {
+    popoverRef.value?.open()
+  },
+})
 </script>

package/src/components/DatePicker/DateTimePicker.vue

@@ -8,7 +8,6 @@
       <TextInput
         readonly
         type="text"
-        icon-left="calendar"
         :placeholder="placeholder"
         :value="dateValue && formatter ? formatter(dateValue) : dateValue"
         @focus="!readonly ? togglePopover() : null"
@@ -16,7 +15,9 @@
         :class="inputClass"
         v-bind="$attrs"
       >
-        <template v-if="!hideIcon" #prefix><LucideCalendar class="size-4" /></template>
+        <template #prefix v-if="$slots.prefix">
+          <slot name="prefix" />
+        </template>
       </TextInput>
     </template>
 
@@ -189,17 +190,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import { Button } from '../Button'
-import { Popover } from '../Popover'
 import FeatherIcon from '../FeatherIcon.vue'
+import { Popover } from '../Popover'
 import { TextInput } from '../TextInput'
-import LucideCalendar from '~icons/lucide/calendar'
 
-import { getDate } from './utils'
-import { useDatePicker } from './useDatePicker'
 import { dayjs, dayjsLocal, dayjsSystem } from '../../utils/dayjs'
+import { useDatePicker } from './useDatePicker'
+import { getDate } from './utils'
 
 import type { DatePickerEmits, DatePickerProps } from './types'
 

package/src/components/DatePicker/types.ts

@@ -1,12 +1,11 @@
 export interface DatePickerProps {
-  value?: string
-  modelValue?: string
+  value?: string | string[] // format: "YYYY-MM-DD,YYYY-MM-DD" or ["YYYY-MM-DD","YYYY-MM-DD"]
+  modelValue?: string | string[] // format: "YYYY-MM-DD,YYYY-MM-DD" or ["YYYY-MM-DD","YYYY-MM-DD"]
   placeholder?: string
   formatter?: (date: string) => string
   readonly?: boolean
   inputClass?: string | Array<string> | Record<string, boolean>
-  placement?: string,
-  hideIcon?: boolean
+  placement?: string
 }
 
 export type DatePickerEmits = {

package/src/components/FormControl/FormControl.vue

@@ -15,7 +15,6 @@
       v-if="type === 'select'"
       :id="id"
       v-bind="{ ...controlAttrs, size, variant }"
-      v-model="model"
     >
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
@@ -24,7 +23,6 @@
     <Autocomplete
       v-else-if="type === 'autocomplete'"
       v-bind="{ ...controlAttrs }"
-      v-model="model"
     >
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
@@ -37,13 +35,11 @@
       v-else-if="type === 'textarea'"
       :id="id"
       v-bind="{ ...controlAttrs, size, variant }"
-      v-model="model"
     />
     <TextInput
       v-else
       :id="id"
       v-bind="{ ...controlAttrs, type, size, variant, required }"
-      v-model="model"
     >
       <template #prefix v-if="$slots.prefix">
         <slot name="prefix" />
@@ -60,7 +56,6 @@
     v-else
     :id="id"
     v-bind="{ ...controlAttrs, label, size, class: attrs.class }"
-    v-model="model"
   />
 </template>
 <script setup lang="ts">
@@ -81,8 +76,6 @@ const props = withDefaults(defineProps<FormControlProps>(), {
   variant: 'subtle',
 })
 
-const model = defineModel()
-
 const attrs = useAttrs()
 const controlAttrs = computed(() => {
   // pass everything except class and style

package/src/components/Select/types.ts

@@ -12,7 +12,6 @@ export interface SelectProps {
   placeholder?: string
   disabled?: boolean
   id?: string
-  value?: string | number
   modelValue?: string | number
   options?: SelectOption[]
 }

package/src/components/TextInput/types.ts

@@ -7,7 +7,6 @@ export interface TextInputProps {
   placeholder?: string
   disabled?: boolean
   id?: string
-  value?: string | number
   modelValue?: string | number
   debounce?: number
   required?: boolean