@veritree/ui 0.19.2-2 → 0.19.2-21

package/src/components/Dialog/VTDialog.vue

@@ -1,13 +1,14 @@
 <template>
   <Teleport to="body">
     <div
-      v-if="visible"
+      v-if="modelValue"
       :id="id"
       :class="{
         Dialog: headless,
         'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8': !headless,
       }"
       aria-modal="true"
+      v-bind="$attrs"
       @click="onClick"
     >
       <slot></slot>
@@ -21,13 +22,11 @@ import { genId } from '../../utils/ids';
 export default {
   name: 'VTDialog',
 
-  components: {
-    Portal,
-  },
+  inheritAttrs: false,
 
   provide() {
     return {
-      api: () => {
+      apiDialog: () => {
         const id = this.id;
         const componentId = this.componentId;
         const isDark = this.dark;
@@ -61,12 +60,8 @@ export default {
     };
   },
 
-  model: {
-    prop: 'visible',
-  },
-
   props: {
-    visible: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
@@ -121,7 +116,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

@@ -5,23 +5,23 @@
       :id="id"
       :class="{
         'Dialog-overlay': headless,
-        'fixed inset-0 bg-fd-450/80': !headless,
+        'bg-primary-200/80 fixed inset-0': !headless,
       }"
     ></div>
   </FadeInOut>
 </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/VTDisclosureContent.vue

@@ -59,7 +59,7 @@ export default {
     this.apiDisclosure().register('contents', content);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.apiDisclosure().unregister('contents', this.id);
   },
 

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',
@@ -63,7 +63,7 @@ export default {
     this.apiDisclosure().register('details', detail);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.apiDisclosure().unregister('details', this.id);
   },
 

package/src/components/Disclosure/VTDisclosureHeader.vue

@@ -78,7 +78,7 @@ export default {
     this.apiDisclosure().register('headers', header);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.apiDisclosure().unregister('headers', this.id);
   },
 

package/src/components/Disclosure/VTDisclosureIcon.vue

@@ -50,7 +50,7 @@ export default {
     this.apiDisclosure().register('icons', icon);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.apiDisclosure().unregister('icons', this.id);
   },
 

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);