@veritree/ui 0.22.0-0 → 0.22.1-0

package/mixins/floating-ui.js

@@ -1,6 +1,13 @@
 import { computePosition, flip, shift, offset, size } from '@floating-ui/dom';
 
 export const floatingUiMixin = {
+  props: {
+    offset: {
+      type: [Number, String],
+      default: 5,
+    },
+  },
+
   data() {
     return {
       component: null,
@@ -40,7 +47,7 @@ export const floatingUiMixin = {
       computePosition(trigger, content, {
         placement: this.placement,
         middleware: [
-          offset(5),
+          offset(Number(this.offset)),
           flip(),
           shift({ padding: 5 }),
           size({
@@ -64,4 +71,4 @@ export const floatingUiMixin = {
       });
     },
   },
-};
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.22.0-0",
+  "version": "0.22.1-0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -8,16 +8,21 @@
   "author": "jb",
   "license": "MIT",
   "publishConfig": {
-    "access": "public"
+    "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.0.4",
+    "@floating-ui/dom": "^1.4.5",
     "@veritree/icons": "^0.45.1"
   },
   "devDependencies": {
     "@nuxt/kit": "^3.0.0",
+    "np": "^8.0.4",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.2.4"
+  },
+  "engines": {
+    "npm": ">=8.0.0",
+    "node": ">=18.0.0"
   }
 }

package/src/components/DropdownMenu/VTDropdownMenu.vue

@@ -83,11 +83,5 @@ export default {
       floatingUiMinWidth: 200,
     };
   },
-
-  computed: {
-    id() {
-      return `dropdown-menu-${this.componentId}`;
-    },
-  },
 };
 </script>

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -51,7 +51,11 @@ export default {
 
   computed: {
     as() {
-      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+      return this.href
+        ? 'a'
+        : this.to
+        ? resolveComponent('NuxtLink')
+        : 'button';
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuTrigger.vue

@@ -57,7 +57,7 @@ export default {
 
   mounted() {
     const trigger = {
-      id: this.id,
+      id: this.$el.getAttribute('id'), // avoids issues with hydration
       el: this.$el,
       cancel: this.cancel,
       focus: this.focus,

package/src/components/Image/VTImage.vue

@@ -1,7 +1,14 @@
 <template>
   <img
     :src="srcComputed"
-    :class="{ 'animate-pulse': !isLoaded }"
+    :class="[
+      headless ? null : isLoaded ? null : 'animate-pulse',
+      headless
+        ? null
+        : hasObjectFit
+        ? `h-full w-full ${objectFitComputed}`
+        : null,
+    ]"
     v-bind="$attrs"
     @load="onLoad"
     @error="onError"
@@ -15,18 +22,26 @@ export default {
   name: 'VTImage',
 
   props: {
-    src: {
-      type: String,
-      default: '',
+    headless: {
+      type: Boolean,
+      default: false,
     },
     cdnSrc: {
       type: [String, Object],
       default: null,
     },
+    objectFit: {
+      type: String,
+      default: null,
+    },
     placeholder: {
       type: String,
       default: `data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22600%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23bbb%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E`,
     },
+    src: {
+      type: String,
+      default: '',
+    },
   },
 
   data() {
@@ -56,6 +71,20 @@ export default {
 
       return null;
     },
+
+    hasObjectFit() {
+      return this.objectFit;
+    },
+
+    objectFitComputed() {
+      return this.hasObjectFit
+        ? this.objectFit === 'cover'
+          ? 'object-cover'
+          : this.objectFit === 'contain'
+          ? 'object-contain'
+          : null
+        : null;
+    },
   },
 
   methods: {

package/src/components/Tabs/VTTab.vue

@@ -32,7 +32,7 @@ import { keys } from '../../utils/keyboard';
 export default {
   name: 'VTTabItem',
 
-  inject: ['api'],
+  inject: ['apiTabs'],
 
   props: {
     headless: {
@@ -43,7 +43,7 @@ export default {
 
   data() {
     return {
-      api: this.api(),
+      api: this.apiTabs(),
       index: null,
       indexFocus: null,
       selected: false,