@veritree/ui 0.76.1-9 → 0.77.1

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,82 @@ 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.left || {};
+      let topObject = this.top || {};
+
+      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/nuxt.js

@@ -23,7 +23,6 @@ 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.76.1-9",
+  "version": "0.77.1",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -15,11 +15,10 @@
     "release": "np --no-tests --no-2fa"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.5",
+    "@floating-ui/dom": "^1.2.0",
     "@linusborg/vue-simple-portal": "^0.1.5",
-    "@sum.cumo/vue-datepicker": "^4.0.0",
-    "@veritree/icons": "^0.62.0",
-    "dayjs": "^1.11.11"
+    "@veritree/icons": "^0.60.0",
+    "v-calendar": "^2.4.2"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.23.10",
@@ -34,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.3"
+    "tailwindcss": "^3.4.1"
   },
   "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 :hide="hide"></slot>
+    <slot></slot>
   </component>
 </template>
 
@@ -15,8 +15,6 @@
 export default {
   name: 'VTDialogFooter',
 
-  inject: ['apiDialog'],
-
   props: {
     headless: {
       type: Boolean,
@@ -27,11 +25,5 @@ export default {
       default: 'footer',
     },
   },
-
-  methods: {
-    hide() {
-      this.apiDialog().hide();
-    },
-  },
 };
 </script>

package/src/components/Form/VTInputDate.vue

@@ -2,8 +2,10 @@
   <VTPopover>
     <VTPopoverTrigger ref="trigger">
       <button :class="classComputed" :disabled="disabled" @click.prevent>
-        <span v-if="valueModel">{{ valueModelFormatted }}</span>
-        <span class="text-gray-500" v-else>{{ format }}</span>
+        <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="!iconless"
           class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2"
@@ -13,24 +15,17 @@
         </span>
       </button>
     </VTPopoverTrigger>
-    <VTPopoverContent @hidden="$emit('hidden')" @shown="onShown">
-      <Datepicker
+    <VTPopoverContent @hidden="$emit('hidden')" @shown="$emit('shown')">
+      <DatePicker
         v-model="valueModel"
-        :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>
+        :min-date="min"
+        :max-date="max"
+        :model-config="modelConfig"
+        :available-dates="availableDates"
+        color="null"
+        class="min-w-full"
+        @dayclick="onDayClick"
+      />
     </VTPopoverContent>
   </VTPopover>
 </template>
@@ -43,9 +38,7 @@ import {
 import VTPopover from './../Popover/VTPopover.vue';
 import VTPopoverTrigger from './../Popover/VTPopoverTrigger.vue';
 import VTPopoverContent from './../Popover/VTPopoverContent.vue';
-import Datepicker from '@sum.cumo/vue-datepicker';
-import { IconChevronLeft, IconChevronRight } from '@veritree/icons';
-import dayjs from 'dayjs';
+import DatePicker from 'v-calendar/lib/components/date-picker.umd';
 
 export default {
   name: 'VTInputDate',
@@ -53,23 +46,17 @@ export default {
   mixins: [formControlMixin, formControlStyleMixin],
 
   components: {
-    Datepicker,
-    IconChevronLeft,
-    IconChevronRight,
     VTPopover,
     VTPopoverTrigger,
     VTPopoverContent,
+    DatePicker,
   },
 
   props: {
-    disabledDates: {
-      type: [Function, Object],
+    availableDates: {
+      type: Object,
       default: null,
     },
-    format: {
-      type: String,
-      default: 'YYYY-MM-DD',
-    },
     min: {
       type: [String, Date],
       default: null,
@@ -78,26 +65,17 @@ 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: {
@@ -110,315 +88,12 @@ 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: {
-    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() {
+    onDayClick() {
       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/ProgressBar/VTProgressBar.vue

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

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
+     */
+    top: {
+      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
+     */
+    left: {
+      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'
      */

package/src/components/ProgressBar/VTProgressBarIndicator.vue

@@ -1,47 +0,0 @@
-<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

@@ -1,76 +0,0 @@
-<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>