@veritree/ui 0.37.0 → 0.38.0

package/mixins/floating-ui-content.js

@@ -20,7 +20,7 @@ export const floatingUiContentMixin = {
   },
 
   mounted() {
-    document.addEventListener('click', (e) => this.onDocumentClick(e));
+    document.addEventListener('click', (e) => this.onDocumentClick);
   },
 
   destroyed() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -17,8 +17,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.2.0",
     "@linusborg/vue-simple-portal": "^0.1.5",
-    "@veritree/icons": "^0.43.0",
-    "vue": "^2.7.2"
+    "@veritree/icons": "^0.43.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue2": "^1.1.2",
@@ -29,6 +28,7 @@
     "tailwindcss": "^3.2.4",
     "vite": "latest",
     "vitest": "latest",
+    "vue": "^2.7.2",
     "vue-template-compiler": "^2.7.2"
   }
 }

package/src/components/Alert/VTAlert.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="show"
+    v-if="visible"
     :class="[
       // default styles
       headless ? 'alert' : 'flex items-start gap-3 rounded border border-solid',
@@ -29,7 +29,15 @@
     <button
       v-if="dismissable"
       :class="[
-        headless ? 'alert-close' : 'ml-auto mt-1 h-4 w-4 shrink-0 text-current',
+        // default styles
+        headless ? 'alert-close' : 'ml-auto  h-4 w-4 shrink-0 text-current',
+        headless
+          ? `alert-close--${variant}`
+          : isLarge
+          ? 'mt-1'
+          : isSmall
+          ? 'mt-0.5'
+          : null,
       ]"
       @click="hide"
     >
@@ -48,6 +56,10 @@ export default {
     IconClose,
   },
 
+  model: {
+    prop: 'visible',
+  },
+
   props: {
     variant: {
       type: String,
@@ -65,12 +77,10 @@ export default {
       type: Boolean,
       default: false,
     },
-  },
-
-  data() {
-    return {
-      show: true,
-    };
+    visible: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -97,7 +107,7 @@ export default {
 
   methods: {
     hide() {
-      this.show = false;
+      this.$emit('input', false);
       this.$emit('dismiss');
     },
   },

package/src/components/Tooltip/VTTooltipTrigger.vue

@@ -2,7 +2,6 @@
   <div
     :id="id"
     :aria-describedby="ariaDescribedBy"
-    class="flex min-w-min"
     @mouseenter="onMouseenter"
     @mouseleave="onmouseout"
   >
@@ -75,8 +74,7 @@ export default {
       // delay stop propagation to close other visible
       // dropdowns and delay click event to control
       // this dropdown visibility
-      setTimeout(() => e.stopImmediatePropagation(), 50);
-      setTimeout(() => this.showComponentContent(), 100);
+      this.showComponentContent();
     },
 
     cancel() {

package/src/components/Utils/FloatingUi.vue

@@ -2,11 +2,11 @@
   <Portal>
     <transition
       enter-active-class="duration-200 ease-out"
-      enter-class="translate-y-[15px] opacity-0"
-      enter-to-class="translate-y-0 opacity-100"
+      :enter-class="transitionEnterClass"
+      :enter-to-class="transitionEnterToClass"
       leave-active-class="duration-200 ease-in"
-      leave-class="translate-y-0 opacity-100"
-      leave-to-class="translate-y-[15px] opacity-0"
+      :leave-class="transitionLeaveClass"
+      :leave-to-class="transitionLeaveToClass"
       @after-leave="hidden"
       @after-enter="shown"
     >
@@ -62,6 +62,22 @@ export default {
         ? 'bg-gray-800 text-sm text-white py-1 px-2'
         : 'bg-white py-2 px-3';
     },
+
+    transitionEnterClass() {
+      return this.isTooltip ? 'opacity-0' : 'translate-y-[15px] opacity-0';
+    },
+
+    transitionEnterToClass() {
+      return this.isTooltip ? 'opacity-100' : 'translate-y-0 opacity-100';
+    },
+
+    transitionLeaveClass() {
+      return this.transitionEnterToClass;
+    },
+
+    transitionLeaveToClass() {
+      return this.transitionEnterClass;
+    },
   },
 
   methods: {

package/.github/workflows/node.js.yml

@@ -1,31 +0,0 @@
-# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
-
-name: Node.js CI
-
-on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    branches: [ "main" ]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [14.x, 16.x, 18.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run build --if-present
-    - run: npm test