@veritree/ui 0.76.1-1 → 0.76.1-3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.76.1-1",
+  "version": "0.76.1-3",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -15,10 +15,10 @@
     "release": "np --no-tests --no-2fa"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.2.0",
+    "@floating-ui/dom": "^1.6.5",
     "@linusborg/vue-simple-portal": "^0.1.5",
-    "@veritree/icons": "^0.60.0",
-    "v-calendar": "^2.4.2"
+    "@sum.cumo/vue-datepicker": "^4.0.0",
+    "@veritree/icons": "^0.62.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.23.10",
@@ -33,7 +33,7 @@
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^36.0.0",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.3"
   },
   "engines": {
     "npm": ">=8.0.0",

package/src/components/Form/VTInputDate.vue

@@ -2,10 +2,8 @@
   <VTPopover>
     <VTPopoverTrigger ref="trigger">
       <button :class="classComputed" :disabled="disabled" @click.prevent>
-        <span v-if="valueModel">{{
-          new Date(valueModel).toISOString().split('T')[0]
-        }}</span>
-        <span class="text-gray-500" v-else>yyyy-mm-dd</span>
+        <span v-if="valueModel">{{ valueModelFormatted }}</span>
+        <span class="text-gray-500" v-else>{{ format }}</span>
         <span
           v-if="!iconless"
           class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2"
@@ -15,17 +13,24 @@
         </span>
       </button>
     </VTPopoverTrigger>
-    <VTPopoverContent @hidden="$emit('hidden')" @shown="$emit('shown')">
-      <DatePicker
+    <VTPopoverContent @hidden="$emit('hidden')" @shown="onShown">
+      <Datepicker
         v-model="valueModel"
-        :min-date="min"
-        :max-date="max"
-        :model-config="modelConfig"
-        :available-dates="availableDates"
-        color="null"
-        class="min-w-full"
-        @dayclick="onDayClick"
-      />
+        :inline="true"
+        :initial-view="initialView"
+        :minimum-view="minimumView"
+        :maximum-view="maximumView"
+        :show-edge-dates="showEdgeDates"
+        :disabled-dates="disabledDates"
+        @input="onInput"
+      >
+        <template #prevIntervalBtn>
+          <IconChevronLeft />
+        </template>
+        <template #nextIntervalBtn>
+          <IconChevronRight />
+        </template>
+      </Datepicker>
     </VTPopoverContent>
   </VTPopover>
 </template>
@@ -38,7 +43,9 @@ import {
 import VTPopover from './../Popover/VTPopover.vue';
 import VTPopoverTrigger from './../Popover/VTPopoverTrigger.vue';
 import VTPopoverContent from './../Popover/VTPopoverContent.vue';
-import DatePicker from 'v-calendar/lib/components/date-picker.umd';
+import Datepicker from '@sum.cumo/vue-datepicker';
+import { IconChevronLeft, IconChevronRight } from '@veritree/icons';
+import { format } from 'date-fns';
 
 export default {
   name: 'VTInputDate',
@@ -46,16 +53,18 @@ export default {
   mixins: [formControlMixin, formControlStyleMixin],
 
   components: {
+    Datepicker,
+    IconChevronLeft,
+    IconChevronRight,
     VTPopover,
     VTPopoverTrigger,
     VTPopoverContent,
-    DatePicker,
   },
 
   props: {
-    availableDates: {
-      type: Object,
-      default: null,
+    format: {
+      type: String,
+      default: 'YYYY-MM-DD',
     },
     min: {
       type: [String, Date],
@@ -65,17 +74,26 @@ export default {
       type: [String, Date],
       default: null,
     },
+    initialView: {
+      type: String,
+      default: 'day',
+    },
+    minimumView: {
+      type: String,
+      default: 'day',
+    },
+    maximumView: {
+      type: String,
+      default: 'year',
+    },
+    showEdgeDates: {
+      type: Boolean,
+      default: true,
+    },
     iconless: {
       type: Boolean,
       default: false,
     },
-    modelConfig: {
-      type: Object,
-      default: () => ({
-        type: 'string',
-        mask: 'YYYY-MM-DD',
-      }),
-    },
   },
 
   computed: {
@@ -88,12 +106,313 @@ export default {
         this.$emit('change', newDate);
       },
     },
+
+    valueModelFormatted() {
+      return format(this.value, this.format, {
+        useAdditionalDayOfYearTokens: true,
+      });
+    },
+
+    disabledDates() {
+      return {
+        to: this.min,
+        from: this.max,
+      };
+    },
   },
 
   methods: {
-    onDayClick() {
+    onShown() {
+      this.$emit('shown');
+      this.setFocus();
+    },
+
+    /**
+     * Sets the focus on the datepicker element.
+     * If there is a selected date, it focuses on that date.
+     * If there is no selected date, it focuses on today's date.
+     */
+    setFocus() {
+      const elDatepicker = document.querySelector('.vdp-datepicker');
+
+      if (!elDatepicker) {
+        return;
+      }
+
+      const elSelected = elDatepicker.querySelector('.selected');
+
+      if (elSelected) {
+        elSelected.focus();
+        return;
+      }
+
+      const elToday = elDatepicker.querySelector('.today');
+
+      if (elToday) {
+        elToday.focus();
+      }
+    },
+
+    onInput() {
       this.$refs.trigger.cancel();
     },
   },
 };
 </script>
+
+<style>
+.rtl {
+  direction: rtl;
+}
+
+.vdp-datepicker {
+  font-size: 14px;
+}
+
+.vdp-datepicker__calendar .today {
+  background-color: #f2f2f2;
+}
+
+.vdp-datepicker__calendar {
+  & button {
+    background: inherit;
+    text-align: center;
+  }
+
+  & button:disabled {
+    color: #ddd;
+  }
+}
+
+/* header */
+.vdp-datepicker__calendar header {
+  display: flex;
+
+  & button {
+    border: none;
+  }
+
+  & button:hover:not(:disabled) {
+    background: #f2f2f2;
+  }
+
+  & button.vdp-datepicker__up {
+    color: inherit;
+    font-weight: 500;
+    flex-grow: 1;
+  }
+
+  & .next,
+  & .prev {
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    height: 2rem;
+    aspect-ratio: 1 / 1;
+    position: relative;
+  }
+
+  & .next .default,
+  & .prev .default {
+    display: flex;
+    text-indent: -10000px;
+  }
+
+  & .next .default:after,
+  & .prev .default:after {
+    border: 6px solid transparent;
+    content: '';
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
+
+  & .next.rtl,
+  & .prev.rtl {
+    transform: rotate(180deg);
+  }
+
+  & .prev .default:after {
+    border-right: 10px solid #000;
+    margin-left: -5px;
+  }
+
+  & .prev:disabled .default:after {
+    border-right: 10px solid #ddd;
+  }
+
+  & .next .default:after {
+    border-left: 10px solid #000;
+    margin-left: 5px;
+  }
+
+  & .next:disabled .default:after {
+    border-left: 10px solid #ddd;
+  }
+}
+
+/* body (days, months and years) */
+.vdp-datepicker__calendar .picker-cells {
+  display: grid;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  &:has(.cell.day) {
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  &:has(.cell.month),
+  &:has(.cell.year) {
+    min-height: calc(6 * 2rem);
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  & .cell {
+    border: 1px solid transparent;
+  }
+
+  & .cell:not(.selected):focus {
+    border-color: #cccccc;
+  }
+
+  & .cell.day {
+    border-radius: 50%;
+    /* height: 2rem; */
+    aspect-ratio: 1 / 1;
+  }
+}
+
+/* cell states */
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year {
+  cursor: pointer;
+}
+
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
+  border-color: #333;
+}
+
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:focus,
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:focus,
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:focus {
+  z-index: 1;
+}
+
+.vdp-datepicker__calendar .cell.muted {
+  color: #ccc;
+}
+
+.vdp-datepicker__calendar .cell.selected {
+  background: #333;
+  color: #fff;
+}
+
+.vdp-datepicker__calendar .cell.selected.highlighted,
+.vdp-datepicker__calendar .cell.selected:hover {
+  background: #333;
+}
+
+.vdp-datepicker__calendar .cell.highlighted {
+  background: #cae5ed;
+  color: #104756;
+}
+
+.vdp-datepicker__calendar .cell.highlighted.disabled {
+  color: #accad2;
+}
+
+.vdp-datepicker__calendar .cell.muted.disabled:not(.selected) {
+  color: #ddd;
+}
+
+.vdp-datepicker__calendar .cell.muted.disabled:not(.selected).highlighted {
+  color: #accad2;
+}
+
+.vdp-datepicker__calendar .day-header {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+
+  & span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1 / 1;
+    height: 2rem;
+    color: #767676;
+    font-size: 14px;
+    white-space: nowrap;
+  }
+}
+
+/* .vdp-datepicker__calendar .picker-view {
+  width: inherit;
+} */
+
+.vdp-datepicker__calendar .picker-view .cells-wrapper {
+  overflow: hidden;
+  position: relative;
+}
+
+.vdp-datepicker__calendar .picker-view .cells-wrapper .picker-cells {
+  transition: all 0.25s ease-in-out;
+}
+
+.vdp-datepicker__calendar .picker-view .slide-right-enter-active {
+  top: 0;
+}
+
+.vdp-datepicker__calendar .picker-view .slide-right-leave-active {
+  position: absolute;
+  top: 0;
+}
+
+.vdp-datepicker__calendar .picker-view .slide-right-enter {
+  transform: translate(100%);
+}
+
+.vdp-datepicker__calendar .picker-view .slide-right-leave-to {
+  transform: translate(-100%);
+}
+
+.vdp-datepicker__calendar .picker-view .slide-left-enter-active {
+  top: 0;
+}
+
+.vdp-datepicker__calendar .picker-view .slide-left-leave-active {
+  position: absolute;
+  top: 0;
+}
+
+.vdp-datepicker__calendar .picker-view .slide-left-enter {
+  transform: translate(-100%);
+}
+
+.vdp-datepicker__calendar .picker-view .slide-left-leave-to {
+  transform: translate(100%);
+}
+
+.view-leave-active {
+  position: absolute;
+}
+
+.vdp-datepicker__calendar-button,
+.vdp-datepicker__clear-button {
+  border: none;
+  font-style: normal;
+}
+
+.vdp-datepicker__calendar-button.input-group-append,
+.vdp-datepicker__calendar-button.input-group-prepend,
+.vdp-datepicker__clear-button.input-group-append,
+.vdp-datepicker__clear-button.input-group-prepend {
+  padding: 0;
+}
+</style>