@veritree/ui 0.76.1-9 → 0.77.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.76.1-9",
+  "version": "0.77.0-0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Form/VTInputDate.vue

@@ -7,7 +7,7 @@
         <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>

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'
      */