@veritree/ui 0.77.1 → 0.77.2

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, Object],
+      type: [Number, String],
       default: 5,
     },
   },
@@ -39,82 +39,11 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.77.1",
+  "version": "0.77.2",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Tooltip/VTTooltip.vue

@@ -31,34 +31,8 @@ export default {
       default: false,
     },
     /**
-     * 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}
+     * The placement of the component relative to its trigger element.
+     * @type {string}
      * @values 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'
      * @default 'bottom-start'
      */