@veritree/ui 0.77.2 → 0.78.0-0

package/mixins/floating-ui.js

@@ -3,7 +3,7 @@ import { computePosition, flip, shift, offset, size } from '@floating-ui/dom';
 export const floatingUiMixin = {
   props: {
     offset: {
-      type: [Number, String],
+      type: [Number, String, Object],
       default: 5,
     },
   },
@@ -39,11 +39,90 @@ export const floatingUiMixin = {
       this.active = null;
     },
 
+    positionContentToTriggerByTopAndLeft(trigger, content, minWidthLimit) {
+      /*
+        TODO: Try to replace this with the offset object from floating-ui, using mainAxis, crossAxis, and alignmentAxis.
+        The problem is that the floating-ui offset values are px values, not percentages, which is the use case I am trying to solve.
+        I tried to calculate the percentage based off of the width and height of the trigger element, 
+        but depending on the placement prop, mainAxis could be x OR y and crossAxis could be x OR y,
+        so to calculate the offset based on the width/height of the trigger element
+        we would have to calculate it differently for each individual placement preset. 
+      */
+      const contentRect = content.getBoundingClientRect();
+      const contentWidth = contentRect.width;
+      const contentHeight = contentRect.height;
+      const triggerWidth = trigger.getBoundingClientRect().width;
+
+      let leftObject = this.leftPosition || {};
+      let topObject = this.topPosition || {};
+
+      let left = leftObject.value || 0;
+      let top = topObject.value || 0;
+
+      if (leftObject.unit === '%') {
+        left = (triggerWidth * left) / 100;
+      }
+      if (topObject.unit === '%') {
+        top = (triggerWidth * top) / 100;
+      }
+      if (leftObject.positionBy === 'center') {
+        left = left - contentWidth / 2;
+      }
+      if (leftObject.positionBy === 'end') {
+        left = left - contentWidth;
+      }
+      if (topObject.positionBy === 'top') {
+        top = top + contentHeight;
+      }
+      if (topObject.positionBy === 'center') {
+        top = top + contentHeight / 2;
+      }
+
+      computePosition(trigger, content, {
+        placement: 'top-start',
+        middleware: [
+          flip(),
+          shift({ padding: 5 }),
+          size({
+            apply({ rects }) {
+              if (!minWidthLimit) return;
+
+              const width = rects.reference.width;
+              const minWidth = width < minWidthLimit ? minWidthLimit : width;
+
+              Object.assign(content.style, {
+                minWidth: `${minWidth}px`,
+              });
+            },
+          }),
+        ],
+      }).then(({ x, y }) => {
+        Object.assign(content.style, {
+          left: `${x + left}px`,
+          top: `${y + top}px`,
+        });
+      });
+    },
+
     positionContentToTrigger() {
       const trigger = document.getElementById(this.componentTrigger.id);
       const content = document.getElementById(this.componentContent.id);
       const minWidthLimit = Number(this.floatingUiMinWidth);
 
+      if (
+        this.top !== null ||
+        this.top !== undefined ||
+        this.left !== null ||
+        this.left !== undefined
+      ) {
+        this.positionContentToTriggerByTopAndLeft(
+          trigger,
+          content,
+          minWidthLimit,
+        );
+        return;
+      }
+
       computePosition(trigger, content, {
         placement: this.placement,
         middleware: [

package/mixins/form-control-icon.js

@@ -30,10 +30,10 @@ export const formControlIconMixin = {
         this.headless
           ? `form-control-icon--${this.placement}`
           : this.isLeft
-          ? '[&_input]:pl-9'
-          : this.isRight
-          ? '[&_input]:pr-9'
-          : null,
+            ? '[&_input]:pl-9'
+            : this.isRight
+              ? '[&_input]:pr-9'
+              : null,
       ];
     },
 
@@ -46,10 +46,10 @@ export const formControlIconMixin = {
         this.headless
           ? null
           : this.isLeft
-          ? 'left-1'
-          : this.isRight
-          ? 'right-1'
-          : null,
+            ? 'left-1'
+            : this.isRight
+              ? 'right-1'
+              : null,
       ];
     },
   },

package/nuxt.js

@@ -23,6 +23,7 @@ const components = [
   'src/components/Tooltip',
   'src/components/Switch',
   'src/components/Separator',
+  'src/components/ScrollShadows',
 ];
 
 export default function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.77.2",
+  "version": "0.78.0-0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -15,10 +15,11 @@
     "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",
+    "dayjs": "^1.11.11"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.23.10",
@@ -33,7 +34,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/Dialog/VTDialogFooter.vue

@@ -7,7 +7,7 @@
         : '-mx-4 flex items-center justify-between gap-x-3 p-4 md:-mx-6 md:px-6 md:py-5',
     ]"
   >
-    <slot></slot>
+    <slot :hide="hide"></slot>
   </component>
 </template>
 
@@ -15,6 +15,8 @@
 export default {
   name: 'VTDialogFooter',
 
+  inject: ['apiDialog'],
+
   props: {
     headless: {
       type: Boolean,
@@ -25,5 +27,11 @@ export default {
       default: 'footer',
     },
   },
+
+  methods: {
+    hide() {
+      this.apiDialog().hide();
+    },
+  },
 };
 </script>

package/src/components/Form/VTInputDate.vue

@@ -2,30 +2,35 @@
   <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"
-          :class="[disabled ? 'bg-gray-100' : 'bg-white']"
+          :class="[disabled ? 'bg-gray-200' : 'bg-white']"
         >
           <IconCalendar class="-z-0 h-5 w-5 scale-90 text-gray-600" />
         </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="disabledDatesComputed"
+        @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 dayjs from 'dayjs';
 
 export default {
   name: 'VTInputDate',
@@ -46,17 +53,23 @@ export default {
   mixins: [formControlMixin, formControlStyleMixin],
 
   components: {
+    Datepicker,
+    IconChevronLeft,
+    IconChevronRight,
     VTPopover,
     VTPopoverTrigger,
     VTPopoverContent,
-    DatePicker,
   },
 
   props: {
-    availableDates: {
-      type: Object,
+    disabledDates: {
+      type: [Function, Object],
       default: null,
     },
+    format: {
+      type: String,
+      default: 'YYYY-MM-DD',
+    },
     min: {
       type: [String, Date],
       default: null,
@@ -65,17 +78,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 +110,315 @@ export default {
         this.$emit('change', newDate);
       },
     },
+
+    valueModelFormatted() {
+      return dayjs(this.value).format(this.format);
+    },
+
+    disabledDatesComputed() {
+      if (this.disabledDates) {
+        return this.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>

package/src/components/Form/VTInputIcon.vue

@@ -7,8 +7,9 @@
       v-bind="$attrs"
       v-on="listeners"
     />
-    <div :class="classComputedWrapperIcon">
-      <component :is="icon" class="h-5 w-5" />
+    <div :class="classes">
+      <component v-if="icon" :is="icon" class="h-5 w-5"> </component>
+      <slot v-else />
     </div>
   </div>
 </template>
@@ -25,12 +26,39 @@ export default {
     icon: {
       type: String,
       default: null,
-      required: true,
     },
     iconPlacement: {
       type: String,
       default: 'left',
     },
   },
+
+  computed: {
+    classes() {
+      const list = this.classComputedWrapperIcon;
+      if (!this.icon) {
+        list.push('text-gray-700');
+      }
+      return list;
+    },
+  },
 };
 </script>
+
+<style scoped>
+/* input[type='date']::-webkit-inner-spin-button,
+input[type='date']::-webkit-calendar-picker-indicator {
+  position: absolute;
+  opacity: 0;
+} */
+
+input[type='number'] {
+  appearance: textfield;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  appearance: none;
+  -webkit-appearance: none;
+}
+</style>

package/src/components/ProgressBar/VTProgressBar.vue

@@ -3,7 +3,7 @@
     :class="[
       headless
         ? 'progress-bar'
-        : 'relative min-h-[12px] w-full overflow-hidden rounded bg-gray-200',
+        : 'relative min-h-[12px] w-full flex items-stretch overflow-hidden rounded bg-gray-200',
     ]"
     role="progressbar"
     aria-valuemin="0"
@@ -11,14 +11,13 @@
     :aria-valuenow="value"
     :aria-label="label"
   >
-    <div
-      :class="[
-        headless
-          ? 'progress-bar__indicator'
-          : 'bg-secondary-300 absolute left-0 h-full transition-all duration-500',
-      ]"
-      :style="{ width: `${percentageComputed}%` }"
-    ></div>
+    <slot>
+      <VTProgressBarIndicator
+        :headless="headless"
+        :percentage="percentageComputed"
+        :variant="variant"
+      />
+    </slot>
   </div>
 </template>
 
@@ -49,6 +48,10 @@ export default {
       type: String,
       default: 'rounded-full',
     },
+    variant: {
+      type: String,
+      default: 'default', // default, alert, warning
+    },
   },
 
   computed: {

package/src/components/ProgressBar/VTProgressBarIndicator.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    :class="[
+      headless
+        ? 'progress-bar__indicator'
+        : `${backgroundComputed} min-h-min transition-all duration-500`,
+    ]"
+    :style="{ width: `${percentage}%` }"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: 'VTProgressBarIndicator',
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    percentage: {
+      type: [String, Number],
+      default: null,
+    },
+    variant: {
+      type: String,
+      default: 'default', // default, alert, warning
+    },
+  },
+
+  computed: {
+    backgroundComputed() {
+      if (this.variant === 'default') {
+        return 'bg-secondary-300';
+      }
+
+      if (this.variant === 'error') {
+        return 'bg-error-500';
+      }
+
+      if (this.variant === 'warning') {
+        return 'bg-warning-500';
+      }
+    },
+  },
+};
+</script>

package/src/components/ScrollShadows/VTScrollShadows.vue

@@ -0,0 +1,76 @@
+<template>
+  <component :is="tag" :class="`scroll-shadows-${orientation}`">
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTScrollShadows',
+
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    orientation: {
+      type: String,
+      default: 'vertical', // horizontal
+    },
+  },
+};
+</script>
+
+<style scoped>
+.scroll-shadows-vertical {
+  background:
+    /* Shadow Cover TOP */
+    linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,
+    /* Shadow Cover BOTTOM */ linear-gradient(rgba(255, 255, 255, 0), white 70%)
+      center bottom,
+    /* Shadow TOP */
+      radial-gradient(
+        farthest-side at 50% 0,
+        rgba(0, 0, 0, 0.1),
+        rgba(0, 0, 0, 0)
+      )
+      center top,
+    /* Shadow BOTTOM */
+      radial-gradient(
+        farthest-side at 50% 100%,
+        rgba(0, 0, 0, 0.1),
+        rgba(0, 0, 0, 0)
+      )
+      center bottom;
+
+  background-repeat: no-repeat;
+  background-size:
+    100% 30px,
+    100% 30px,
+    100% 8px,
+    100% 8px;
+  background-attachment: local, local, scroll, scroll;
+}
+
+.scroll-shadows-horizontal {
+  background:
+    linear-gradient(90deg, white 30%, rgba(255, 255, 255, 0)),
+    linear-gradient(90deg, rgba(255, 255, 255, 0), white 70%) 0 100%,
+    radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), white),
+    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), white) 0 100%;
+
+  background-repeat: no-repeat;
+  background-color: white;
+  background-position:
+    top left,
+    top right,
+    top left,
+    top right;
+  background-size:
+    10px 100%,
+    10px 100%,
+    5px 100%,
+    5px 100%;
+  background-attachment: local, local, scroll, scroll;
+}
+</style>

package/src/components/Tooltip/VTTooltip.vue

@@ -31,8 +31,34 @@ export default {
       default: false,
     },
     /**
-     * The placement of the component relative to its trigger element.
-     * @type {string}
+     * The position of the tooltip from the top of the trigger. This overrides the placement prop.
+     *
+     * @type {Object}
+     * @property {string} unit - The unit of the top position (% or px).
+     * @property {string} positionBy - Whether to position the top, center, or bottom of the tooltip at it's top value. Defaults to bottom.
+     * @property {number} value - The value of the top position.
+     * @default null
+     */
+    topPosition: {
+      type: Object,
+      default: null,
+    },
+    /**
+     * The position of the tooltip from the start (left) of the trigger. This overrides the placement prop.
+     *
+     * @type {Object}
+     * @property {string} unit - The unit of the top position (& or px).
+     * @property {string} positionBy - Whether to position the start, center, or end of the tooltip at it's left value. Defaults to start.
+     * @property {number} value - The value of the top position.
+     * @default null
+     */
+    leftPosition: {
+      type: Object,
+      default: null,
+    },
+    /**
+     * The placement of the component relative to its trigger element. If top or bottom are supplied, this value will be ignored.
+     * @type {string|number}
      * @values 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'
      * @default 'bottom-start'
      */