@veritree/ui 0.19.2-1 → 0.19.2-10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.19.2-1",
+  "version": "0.19.2-10",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -11,9 +11,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@veritree/icons": "^0.36.0"
+    "@veritree/icons": "^0.36.1-0"
   },
   "devDependencies": {
-    "@nuxt/kit": "^3.0.0-rc.12"
+    "@nuxt/kit": "^3.0.0"
   }
 }

package/src/components/Button/VTButton.vue

@@ -115,7 +115,11 @@ export default {
     },
 
     tag() {
-      return this.$attrs.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+      return this.$attrs.href
+        ? 'a'
+        : this.to
+        ? resolveComponent('NuxtLink')
+        : 'button';
     },
 
     type() {

package/src/components/Dialog/VTDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
     <div
-      v-if="visible"
+      v-if="modelValue"
       :id="id"
       :class="{
         Dialog: headless,
@@ -27,7 +27,7 @@ export default {
 
   provide() {
     return {
-      api: () => {
+      apiDialog: () => {
         const id = this.id;
         const componentId = this.componentId;
         const isDark = this.dark;
@@ -61,12 +61,8 @@ export default {
     };
   },
 
-  model: {
-    prop: 'visible',
-  },
-
   props: {
-    visible: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
@@ -121,7 +117,7 @@ export default {
 
     emit() {
       this.$nextTick(() => {
-        this.$emit('input', false);
+        this.$emit('update:modelValue', false);
         this.$emit('hidden');
       });
     },

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/Disclosure/VTDisclosureDetails.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { genId } from '@/utils/ids';
+import { genId } from '../../utils/ids';
 
 export default {
   name: 'VTDisclosureDetails',

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="modelValue"
+      :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;
@@ -51,12 +53,8 @@ export default {
     };
   },
 
-  model: {
-    prop: 'visible',
-  },
-
   props: {
-    visible: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
@@ -110,7 +108,7 @@ export default {
 
     emit() {
       this.$nextTick(() => {
-        this.$emit('input', false);
+        this.$emit('update:modelValue', false);
         this.$emit('hidden');
       });
     },

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: ['apiDrawer'],
 
   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: ['apiDrawer'],
 
   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: {