@veritree/ui 0.19.2-2 → 0.19.2-4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.19.2-2",
+  "version": "0.19.2-4",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -14,6 +14,6 @@
     "@veritree/icons": "^0.36.1-0"
   },
   "devDependencies": {
-    "@nuxt/kit": "^3.0.0-rc.12"
+    "@nuxt/kit": "^3.0.0-rc.13"
   }
 }

package/src/components/Dialog/VTDialog.vue

@@ -27,7 +27,7 @@ export default {
 
   provide() {
     return {
-      api: () => {
+      apiDialog: () => {
         const id = this.id;
         const componentId = this.componentId;
         const isDark = this.dark;

package/src/components/Dialog/VTDialogClose.vue

@@ -12,38 +12,38 @@
 </template>
 
 <script>
-import { IconClose } from "@veritree/icons";
-import VTButton from "../Button/VTButton.vue";
+import { IconClose } from '@veritree/icons';
+import VTButton from '../Button/VTButton.vue';
 
 export default {
-  name: "VTDialogClose",
+  name: 'VTDialogClose',
 
   components: { IconClose, VTButton },
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   computed: {
     id() {
-      return `dialog-close-${this.api().componentId}`;
+      return `dialog-close-${this.apiDialog().componentId}`;
     },
 
     dark() {
-      return this.api().isDark;
+      return this.apiDialog().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDialog().isHeadless;
     },
 
     // temporary till button theme is implemented
     theme() {
-      return this.dark ? "dark" : null;
+      return this.dark ? 'dark' : null;
     },
   },
 
   methods: {
     hide() {
-      this.api().hide();
+      this.apiDialog().hide();
     },
   },
 };

package/src/components/Dialog/VTDialogContent.vue

@@ -1,10 +1,10 @@
 <template>
   <transition
     enter-active-class="duration-300 ease-out"
-    enter-class="translate-y-[50px] opacity-0"
+    enter-from-class="translate-y-[50px] opacity-0"
     enter-to-class="translate-y-0 opacity-100"
     leave-active-class="duration-300 ease-out"
-    leave-class="translate-y-0 opacity-100"
+    leave-from-class="translate-y-0 opacity-100"
     leave-to-class="translate-y-[50px] opacity-0"
     @after-leave="hideDialog"
   >
@@ -28,9 +28,9 @@
 
 <script>
 export default {
-  name: "VTDialogContent",
+  name: 'VTDialogContent',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   data() {
     return {
@@ -40,20 +40,20 @@ export default {
 
   computed: {
     id() {
-      return `dialog-content-${this.api().componentId}`;
+      return `dialog-content-${this.apiDialog().componentId}`;
     },
 
     dark() {
-      return this.api().isDark;
+      return this.apiDialog().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDialog().isHeadless;
     },
   },
 
   mounted() {
-    this.api().registerContent(this);
+    this.apiDialog().registerContent(this);
     this.show();
 
     this.$nextTick(() => this.$el.focus());
@@ -69,7 +69,7 @@ export default {
     },
 
     hideDialog() {
-      this.api().emit();
+      this.apiDialog().emit();
     },
   },
 };

package/src/components/Dialog/VTDialogFooter.vue

@@ -9,24 +9,24 @@
 
 <script>
 export default {
-  name: "VTDialogFooter",
+  name: 'VTDialogFooter',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   props: {
     as: {
       type: String,
-      default: "footer",
+      default: 'footer',
     },
   },
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDialog().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDialog().isHeadless;
     },
   },
 };

package/src/components/Dialog/VTDialogHeader.vue

@@ -13,28 +13,28 @@
 
 <script>
 export default {
-  name: "VTDialogHeader",
+  name: 'VTDialogHeader',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   props: {
     as: {
       type: String,
-      default: "header",
+      default: 'header',
     },
   },
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDialog().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDialog().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-header`;
+      return `${this.apiDialog().id}-header`;
     },
   },
 
@@ -45,10 +45,10 @@ export default {
   methods: {
     // In here because if there is no header, the dialog will not be labelled by
     setDialogLabelledby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDialog().id);
 
       if (dialog) {
-        dialog.setAttribute("aria-labelledby", this.id);
+        dialog.setAttribute('aria-labelledby', this.id);
       }
     },
   },

package/src/components/Dialog/VTDialogMain.vue

@@ -13,28 +13,28 @@
 
 <script>
 export default {
-  name: "VTDialogMain",
+  name: 'VTDialogMain',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   props: {
     as: {
       type: String,
-      default: "main",
+      default: 'main',
     },
   },
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDialog().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDialog().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-desc`;
+      return `${this.apiDialog().id}-desc`;
     },
   },
 
@@ -45,10 +45,10 @@ export default {
   methods: {
     // In here because if there is no body, the dialog will not be described by
     setDialogDescribedby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDialog().id);
 
       if (dialog) {
-        dialog.setAttribute("aria-describedby", this.id);
+        dialog.setAttribute('aria-describedby', this.id);
       }
     },
   },

package/src/components/Dialog/VTDialogOverlay.vue

@@ -12,16 +12,16 @@
 </template>
 
 <script>
-import FadeInOut from "../Transitions/FadeInOut.vue";
+import FadeInOut from '../Transitions/FadeInOut.vue';
 
 export default {
-  name: "VTDialogOverlay",
+  name: 'VTDialogOverlay',
 
   components: {
     FadeInOut,
   },
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   data() {
     return {
@@ -31,21 +31,21 @@ export default {
 
   computed: {
     id() {
-      return `dialog-overlay-${this.api().componentId}`;
+      return `dialog-overlay-${this.apiDialog().componentId}`;
     },
 
     dark() {
-      return this.api().isDark;
+      return this.apiDialog().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDialog().isHeadless;
     },
   },
 
   mounted() {
     this.visible = true;
-    this.api().registerOverlay(this);
+    this.apiDialog().registerOverlay(this);
   },
 
   methods: {

package/src/components/Dialog/VTDialogTitle.vue

@@ -9,17 +9,17 @@
 
 <script>
 export default {
-  name: "VTDialogTitle",
+  name: 'VTDialogTitle',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   computed: {
     headless() {
-      return this.api().isHeadless;
+      return this.apiDialog().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-title`;
+      return `${this.apiDialog().id}-title`;
     },
   },
 };

package/src/components/Drawer/VTDrawer.vue

@@ -1,13 +1,15 @@
 <template>
-  <div
-    v-if="visible"
-    :id="id"
-    :class="{ Drawer: headless, 'fixed inset-0 z-50 h-screen': !headless }"
-    aria-modal="true"
-    @click="onClick"
-  >
-    <slot></slot>
-  </div>
+  <Teleport to="body">
+    <div
+      v-if="visible"
+      :id="id"
+      :class="{ Drawer: headless, 'fixed inset-0 z-50 h-screen': !headless }"
+      aria-modal="true"
+      @click="onClick"
+    >
+      <slot></slot>
+    </div>
+  </Teleport>
 </template>
 
 <script>
@@ -18,7 +20,7 @@ export default {
 
   provide() {
     return {
-      api: () => {
+      apiDrawer: () => {
         const id = this.id;
         const isDark = this.dark;
         const isHeadless = this.headless;

package/src/components/Drawer/VTDrawerClose.vue

@@ -12,38 +12,38 @@
 </template>
 
 <script>
-import { IconLeft } from "@veritree/icons";
-import VTButton from "../Button/VTButton.vue";
+import { IconLeft } from '@veritree/icons';
+import VTButton from '../Button/VTButton.vue';
 
 export default {
-  name: "VTDrawerClose",
+  name: 'VTDrawerClose',
 
   components: { IconLeft, VTButton },
 
-  inject: ["api"],
+  inject: ['api'],
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     right() {
-      return this.api().isRight;
+      return this.apiDrawer().isRight;
     },
 
     // temporary till button theme is implemented
     theme() {
-      return this.dark ? "dark" : null;
+      return this.dark ? 'dark' : null;
     },
   },
 
   methods: {
     hide() {
-      this.api().hide();
+      this.apiDrawer().hide();
     },
   },
 };

package/src/components/Drawer/VTDrawerContent.vue

@@ -1,10 +1,10 @@
 <template>
   <transition
     :enter-active-class="activeClass"
-    :enter-class="enterClass"
+    :enter-from-class="enterClass"
     :enter-to-class="enterToClass"
     :leave-active-class="activeClass"
-    :leave-class="leaveClass"
+    :leave-from-class="leaveClass"
     :leave-to-class="leaveToClass"
     @after-leave="hideDrawer"
   >
@@ -33,7 +33,7 @@
 export default {
   name: 'VTDrawerContent',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   data() {
     return {
@@ -43,15 +43,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     position() {
-      return this.api().position;
+      return this.apiDrawer().position;
     },
 
     activeClass() {
@@ -132,7 +132,7 @@ export default {
   },
 
   mounted() {
-    this.api().registerContent(this);
+    this.apiDrawer().registerContent(this);
     this.show();
 
     this.$nextTick(() => this.$el.focus());
@@ -148,7 +148,7 @@ export default {
     },
 
     hideDrawer() {
-      this.api().emit();
+      this.apiDrawer().emit();
     },
   },
 };

package/src/components/Drawer/VTDrawerFooter.vue

@@ -8,7 +8,7 @@
 export default {
   name: 'VTDrawerFooter',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -19,11 +19,11 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
   },
 };

package/src/components/Drawer/VTDrawerHeader.vue

@@ -15,7 +15,7 @@
 export default {
   name: 'VTDrawerHeader',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -26,15 +26,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-header`;
+      return `${this.apiDrawer().id}-header`;
     },
   },
 };

package/src/components/Drawer/VTDrawerMain.vue

@@ -12,7 +12,7 @@
 export default {
   name: 'VTDrawerMain',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -23,15 +23,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-desc`;
+      return `${this.apiDrawer().id}-desc`;
     },
   },
 
@@ -42,7 +42,7 @@ export default {
   methods: {
     // In here because if there is no body, the dialog will not be described by
     setDialogDescribedby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDrawer().id);
 
       if (dialog) {
         dialog.setAttribute('aria-describedby', this.id);

package/src/components/Drawer/VTDrawerOverlay.vue

@@ -12,14 +12,14 @@
 </template>
 
 <script>
-import FadeInOut from "../Transitions/FadeInOut.vue";
+import FadeInOut from '../Transitions/FadeInOut.vue';
 
 export default {
   components: {
     FadeInOut,
   },
 
-  inject: ["api"],
+  inject: ['api'],
 
   data() {
     return {
@@ -29,21 +29,21 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-overlay`;
+      return `${this.apiDrawer().id}-overlay`;
     },
   },
 
   mounted() {
     this.visible = true;
-    this.api().registerOverlay(this);
+    this.apiDrawer().registerOverlay(this);
   },
 
   methods: {

package/src/components/Drawer/VTDrawerTitle.vue

@@ -15,7 +15,7 @@
 export default {
   name: 'VTDrawerTitle',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -26,15 +26,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-title`;
+      return `${this.apiDrawer().id}-title`;
     },
   },
 
@@ -45,7 +45,7 @@ export default {
   methods: {
     // In here because if there is no header, the dialog will not be labelled by
     setDialogLabelledby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDrawer().id);
 
       if (dialog) {
         dialog.setAttribute('aria-labelledby', this.id);

package/src/components/DropdownMenu/VTDropdownMenu.vue

@@ -5,14 +5,14 @@
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTDropdownMenu",
+  name: 'VTDropdownMenu',
 
   provide() {
     return {
-      api: () => {
+      apiDropdownMenu: () => {
         const { dark: isDark, headless: isHeadless, right: isRight } = this;
         const { id, trigger, content, items } = this;