chore(datepicker): update version and props

indielayer · Feb 17, 2025 · 23300bd · 23300bd
1 parent 96c78cd
commit 23300bd
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 72 deletions.
diff --git a/.changeset/grumpy-owls-complain.md b/.changeset/grumpy-owls-complain.md
@@ -0,0 +1,6 @@
+---
+"@indielayer/create-ui": patch
+"@indielayer/ui": patch
+---
+
+chore(datepicker): update version and props
diff --git a/packages/create-ui/templates/nuxt/base/package.json b/packages/create-ui/templates/nuxt/base/package.json
@@ -10,12 +10,12 @@
     "@indielayer/ui": "^1.5.1",
     "@nuxt/devtools": "latest",
     "@types/node": "^18",
-    "@vuepic/vue-datepicker": "^8.0.0",
+    "@vuepic/vue-datepicker": "^11.0.1",
     "@vueuse/core": "^11.1.0",
     "autoprefixer": "^10.4.0",
     "floating-vue": "^5.2.2",
     "nuxt": "^3.10.1",
     "postcss": "^8.4.24",
     "tailwindcss": "^3.3.2"
   }
-}
+}
diff --git a/packages/demo-nuxt/package.json b/packages/demo-nuxt/package.json
@@ -12,7 +12,7 @@
     "@indielayer/ui": "^1.5.1",
     "@nuxt/devtools": "latest",
     "@types/node": "^18",
-    "@vuepic/vue-datepicker": "^8.0.0",
+    "@vuepic/vue-datepicker": "^11.0.1",
     "@vueuse/core": "^11.1.0",
     "autoprefixer": "^10.4.0",
     "eslint": "^8.43.0",
@@ -21,4 +21,4 @@
     "postcss": "^8.4.24",
     "tailwindcss": "^3.3.2"
   }
-}
+}
diff --git a/packages/ui/docs/pages/component/datepicker/usage.vue b/packages/ui/docs/pages/component/datepicker/usage.vue
@@ -13,7 +13,9 @@ date.value = [startDate, endDate]
     v-model="date"
     label="Date"
     tooltip="Use it to pick a date"
+    text-input
     multi-calendars
+    time-picker-inline
     range
   />
 </template>
diff --git a/packages/ui/index.html b/packages/ui/index.html
@@ -8,7 +8,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
-    <script defer data-domain="indielayer.com" src="/psbl/js/vendor.js" data-api="/psbl/api/event"></script>
+    <!-- <script defer data-domain="indielayer.com" src="/psbl/js/vendor.js" data-api="/psbl/api/event"></script> -->
   </head>
   <body>
     <div id="app" class="flex flex-col h-full"></div>

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -74,7 +74,7 @@
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/test-utils": "^2.4.0",
     "@vue/tsconfig": "^0.4.0",
-    "@vuepic/vue-datepicker": "^8.3.2",
+    "@vuepic/vue-datepicker": "^11.0.1",
     "@vueuse/core": "^11.1.0",
     "autoprefixer": "^10.4.0",
     "c8": "^7.12.0",
@@ -112,4 +112,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}
diff --git a/packages/ui/src/components/datepicker/Datepicker.vue b/packages/ui/src/components/datepicker/Datepicker.vue
@@ -18,22 +18,18 @@ const vueDatepickerProps = {
   offset: { type: [Number, String] as PropType<number | string>, default: 10 },
   hideNavigation: { type: Array as PropType<VueDatePickerProps['hideNavigation']>, default: () => [] },
   timezone: { type: [String, Object] as PropType<VueDatePickerProps['timezone']>, default: null },
-  emitTimezone: { type: String as PropType<string>, default: null },
   vertical: { type: Boolean as PropType<boolean>, default: false },
   disableMonthYearSelect: { type: Boolean as PropType<boolean>, default: false },
   disableYearSelect: { type: Boolean as PropType<boolean>, default: false },
-  menuClassName: { type: String as PropType<string>, default: null },
   dayClass: { type: Function as PropType<(date: Date) => string>, default: null },
   yearRange: { type: Array as PropType<number[]>, default: () => [1900, 2100] },
-  calendarCellClassName: { type: String as PropType<string>, default: null },
   enableTimePicker: { type: Boolean as PropType<boolean>, default: true },
   autoApply: { type: Boolean as PropType<boolean>, default: false },
   disabledDates: { type: [Array, Function] as PropType<VueDatePickerProps['disabledDates']>, default: () => [] },
   monthNameFormat: { type: String as PropType<'long' | 'short'>, default: 'short' },
   startDate: { type: [Date, String] as PropType<string | Date>, default: null },
   startTime: { type: [Object, Array] as PropType<VueDatePickerProps['startTime']>, default: null },
   hideOffsetDates: { type: Boolean as PropType<boolean>, default: false },
-  autoRange: { type: [Number, String] as PropType<number | string>, default: null },
   noToday: { type: Boolean as PropType<boolean>, default: false },
   disabledWeekDays: { type: Array as PropType<string[] | number[]>, default: () => [] },
   allowedDates: { type: Array as PropType<string[] | Date[]>, default: null },
@@ -46,14 +42,10 @@ const vueDatepickerProps = {
   flow: { type: Array as PropType<VueDatePickerProps['flow']>, default: () => [] },
   partialFlow: { type: Boolean as PropType<boolean>, default: false },
   preventMinMaxNavigation: { type: Boolean as PropType<boolean>, default: false },
-  minRange: { type: [Number, String] as PropType<number | string>, default: null },
-  maxRange: { type: [Number, String] as PropType<number | string>, default: null },
-  multiDatesLimit: { type: [Number, String] as PropType<number | string>, default: null },
   reverseYears: { type: Boolean as PropType<boolean>, default: false },
   weekPicker: { type: Boolean as PropType<boolean>, default: false },
   filters: { type: Object as PropType<Partial<VueDatePickerProps['filters']>>, default: () => ({}) },
   arrowNavigation: { type: Boolean as PropType<boolean>, default: false },
-  disableTimeRangeValidation: { type: Boolean as PropType<boolean>, default: false },
   highlight: {
     type: [Function, Object] as PropType<VueDatePickerProps['highlight']>,
     default: null,
@@ -67,7 +59,6 @@ const vueDatepickerProps = {
     type: [String, Function, Object] as PropType<VueDatePickerProps['weekNumbers']>,
     default: null,
   },
-  calendarClassName: { type: String as PropType<string>, default: null },
   monthChangeOnScroll: { type: [Boolean, String] as PropType<boolean | 'inverse'>, default: true },
   dayNames: {
     type: [Function, Array] as PropType<((lang: string, weekStart: number) => string[]) | string[]>,
@@ -84,7 +75,6 @@ const vueDatepickerProps = {
     default: () => '',
   },
   multiDates: { type: Boolean as PropType<boolean>, default: false },
-  partialRange: { type: Boolean as PropType<boolean>, default: true },
   ignoreTimeValidation: { type: Boolean as PropType<boolean>, default: false },
   minDate: { type: [Date, String] as PropType<Date | string>, default: null },
   maxDate: { type: [Date, String] as PropType<Date | string>, default: null },
@@ -93,13 +83,10 @@ const vueDatepickerProps = {
   placeholder: { type: String as PropType<string>, default: '' },
   hideInputIcon: { type: Boolean as PropType<boolean>, default: false },
   clearable: { type: Boolean as PropType<boolean>, default: false },
+  alwaysClearable: { type: Boolean as PropType<boolean>, default: false },
   state: { type: Boolean as PropType<VueDatePickerProps['state']>, default: null },
   required: { type: Boolean as PropType<boolean>, default: false },
   autocomplete: { type: String as PropType<string>, default: 'off' },
-  inputClassName: { type: String as PropType<string>, default: null },
-  fixedStart: { type: Boolean as PropType<boolean>, default: false },
-  fixedEnd: { type: Boolean as PropType<boolean>, default: false },
-  timePicker: { type: Boolean as PropType<boolean>, default: false },
   enableSeconds: { type: Boolean as PropType<boolean>, default: false },
   is24: { type: Boolean as PropType<boolean>, default: true },
   noHoursOverlay: { type: Boolean as PropType<boolean>, default: false },
@@ -126,6 +113,9 @@ const vueDatepickerProps = {
   config: { type: Object as PropType<Partial<VueDatePickerProps['config']>>, default: undefined },
   quarterPicker: { type: Boolean as PropType<boolean>, default: false },
   yearFirst: { type: Boolean as PropType<boolean>, default: false },
+  onInternalModelChange: { type: [Function, Object] as PropType<(...args: any[]) => void>, default: null },
+  enableMinutes: { type: Boolean as PropType<boolean>, default: true },
+  ui: { type: Object as PropType<Partial<VueDatePickerProps['ui']>>, default: () => ({}) },
 }
 
 const datepickerProps = {
@@ -206,6 +196,7 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
     ]"
   >
     <vue-datepicker
+      :ui="ui"
       :model-value="modelValue"
       :multi-calendars="multiCalendars"
       :model-type="modelType"
@@ -221,22 +212,18 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
       :offset="offset"
       :hide-navigation="hideNavigation"
       :timezone="timezone"
-      :emit-timezone="emitTimezone"
       :vertical="vertical"
       :disable-month-year-select="disableMonthYearSelect"
       :disable-year-select="disableYearSelect"
-      :menu-class-name="menuClassName"
       :day-class="dayClass"
       :year-range="yearRange"
-      :calendar-cell-class-name="calendarCellClassName"
       :enable-time-picker="enableTimePicker"
       :auto-apply="autoApply"
       :disabled-dates="disabledDates"
       :month-name-format="monthNameFormat"
       :start-date="startDate"
       :start-time="startTime"
       :hide-offset-dates="hideOffsetDates"
-      :auto-range="autoRange"
       :no-today="noToday"
       :disabled-week-days="disabledWeekDays"
       :allowed-dates="allowedDates"
@@ -249,22 +236,17 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
       :flow="flow"
       :partial-flow="partialFlow"
       :prevent-min-max-navigation="preventMinMaxNavigation"
-      :min-range="minRange"
-      :max-range="maxRange"
-      :multi-dates-limit="multiDatesLimit"
       :reverse-years="reverseYears"
       :week-picker="weekPicker"
       :filters="filters"
       :arrow-navigation="arrowNavigation"
-      :disable-time-range-validation="disableTimeRangeValidation"
       :highlight="highlight"
       :teleport="teleport"
       :teleport-center="teleportCenter"
       :locale="locale"
       :week-num-name="weekNumName"
       :week-start="weekStart"
       :week-numbers="weekNumbers"
-      :calendar-class-name="calendarClassName"
       :month-change-on-scroll="monthChangeOnScroll"
       :day-names="dayNames"
       :month-picker="monthPicker"
@@ -275,7 +257,6 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
       :cancel-text="cancelText"
       :preview-format="previewFormat"
       :multi-dates="multiDates"
-      :partial-range="partialRange"
       :ignore-time-validation="ignoreTimeValidation"
       :min-date="minDate"
       :max-date="maxDate"
@@ -285,10 +266,6 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
       :state="state"
       :required="required"
       :autocomplete="autocomplete"
-      :input-class-name="inputClassName"
-      :fixed-start="fixedStart"
-      :fixed-end="fixedEnd"
-      :time-picker="timePicker"
       :enable-seconds="enableSeconds"
       :no-hours-overlay="noHoursOverlay"
       :no-minutes-overlay="noMinutesOverlay"
@@ -320,14 +297,15 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
       <template #dp-input="{ value, onEnter, onTab }">
         <x-input
           ref="inputRef"
-          readonly
+          :readonly="textInput === false || readonly"
           :model-value="value"
           :label="label"
           :size="size"
           :disabled="disabled"
           :helper="helper"
           icon-right="calendar"
           :loading="loading"
+          data-1p-ignore
           :name="name"
           :rules="rules"
           :tooltip="tooltip"
@@ -416,4 +394,20 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
   --dp-range-between-dates-text-color: var(--x-datepicker-text, #212121) !important;
   --dp-range-between-border-color: var(--x-datepicker-range, #f3f3f3) !important;
 }
+
+.dark .dp__cell_inner {
+  border: 0 !important;
+}
+
+.dp__selection_preview {
+  padding: 4px;
+  font-weight: 500;
+  word-spacing: 4px;
+  letter-spacing: 0.5px;
+}
+
+.dp__action_row {
+  border-top: 1px solid #eee;
+  margin-top: 10px;
+}
 </style>
diff --git a/packages/ui/src/components/datepicker/theme/Datepicker.base.theme.ts b/packages/ui/src/components/datepicker/theme/Datepicker.base.theme.ts
@@ -11,8 +11,6 @@ const theme: DatepickerTheme = {
     const vars: Array<Record<string, string> | string> = [`
     /*General*/
     --dp-font-family: var(--font-family-sans);
-    --dp-border-radius: 8px; /*Configurable border-radius*/
-    --dp-cell-border-radius: 8px; /*Specific border radius for the calendar cell*/
     --dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/
 
     /*Sizing*/
@@ -36,7 +34,7 @@ const theme: DatepickerTheme = {
 
     /*Font sizes*/
     --dp-font-size: 0.875rem; /*Default font-size*/
-    --dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
+    --dp-preview-font-size: 0.875rem; /*Font size of the date preview in the action row*/
     --dp-time-font-size: 0.8rem; /*Font size in the time picker*/
 
     /*Transitions*/
@@ -48,19 +46,19 @@ const theme: DatepickerTheme = {
     vars.push(css.variables({
       bg: '#fff',
       text: secondary[800],
-      disabled: secondary[800],
-      range: secondary[200],
+      disabled: secondary[300],
+      range: primary[100],
       icon: secondary[500],
       primary: primary[500],
       border: secondary[100],
       dark: {
         bg: secondary[800],
         text: secondary[100],
-        disabled: secondary[700],
-        range: secondary[600],
+        disabled: secondary[600],
+        range: primary[900],
         icon: secondary[200],
         primary: primary[500],
-        border: secondary[700],
+        border: secondary[800],
       },
     }))
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml