@veritree/ui 0.20.0 → 0.21.0-0

package/src/components/Dialog/VTDialog.vue

@@ -1,38 +1,34 @@
 <template>
-  <Portal>
+  <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,
-      }"
+      :class="
+        headless
+          ? 'dialog'
+          : `fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 ${classes}`
+      "
       aria-modal="true"
+      v-bind="$attrs"
       @click="onClick"
     >
       <slot></slot>
     </div>
-  </Portal>
+  </Teleport>
 </template>
 
 <script>
-import { Portal } from '@linusborg/vue-simple-portal';
 import { genId } from '../../utils/ids';
 
 export default {
   name: 'VTDialog',
 
-  components: {
-    Portal,
-  },
+  inheritAttrs: false,
 
   provide() {
     return {
-      api: () => {
-        const id = this.id;
+      apiDialog: () => {
         const componentId = this.componentId;
-        const isDark = this.dark;
-        const isHeadless = this.headless;
 
         const registerContent = (content) => {
           if (!content) return;
@@ -48,26 +44,22 @@ export default {
 
         const emit = () => this.emit();
 
+        const full = this.full;
+
         return {
-          id,
           componentId,
-          isDark,
-          isHeadless,
           hide,
           emit,
           registerContent,
           registerOverlay,
+          full,
         };
       },
     };
   },
 
-  model: {
-    prop: 'visible',
-  },
-
   props: {
-    visible: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
@@ -75,7 +67,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    dark: {
+    full: {
       type: Boolean,
       default: false,
     },
@@ -94,6 +86,10 @@ export default {
       return `dialog-${this.componentId}`;
     },
 
+    classes() {
+      return !this.full ? 'p-4 md:p-6' : '';
+    },
+
     hasContent() {
       return this.content !== null;
     },
@@ -103,15 +99,9 @@ export default {
     },
   },
 
-  watch: {
-    visible(isVisible) {
-      if (!isVisible) this.hide();
-    },
-  },
-
   mounted() {
     if (this.hasContent) this.content.show();
-    if (this.hasOverlay) this.overlay.show();
+    // if (this.hasOverlay) this.overlay.show();
   },
 
   methods: {
@@ -122,7 +112,7 @@ export default {
 
     emit() {
       this.$nextTick(() => {
-        this.$emit('input', false);
+        this.$emit('update:modelValue', false);
         this.$emit('hidden');
       });
     },

package/src/components/Dialog/VTDialogClose.vue

@@ -2,48 +2,42 @@
   <VTButton
     variant="icon"
     :id="id"
-    :class="{
-      'Dialog-close': headless,
-    }"
-    :theme="theme"
+    :class="[headless ? 'dialog-close' : null]"
     @click.prevent="hide"
-    ><slot><IconClose class="h-5 w-5" /></slot
-  ></VTButton>
+  >
+    <slot>
+      <IconClose class="h-4 w-4" />
+    </slot>
+  </VTButton>
 </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}`;
-    },
-
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
     },
+  },
 
-    // temporary till button theme is implemented
-    theme() {
-      return this.dark ? "dark" : null;
+  computed: {
+    id() {
+      return `dialog-close-${this.apiDialog().componentId}`;
     },
   },
 
   methods: {
     hide() {
-      this.api().hide();
+      this.apiDialog().hide();
     },
   },
 };

package/src/components/Dialog/VTDialogContent.vue

@@ -1,25 +1,23 @@
 <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"
   >
     <div
       v-show="visible"
       :id="id"
-      :class="{
-        'Dialog-content': headless,
-        'relative m-auto max-h-full max-w-full overflow-auto rounded p-6 focus:outline-none sm:p-10 flex flex-col':
-          !headless,
-        'bg-white': !dark,
-        'bg-fd-600': dark,
-      }"
+      :class="
+        headless
+          ? 'dialog-content'
+          : `relative m-auto flex flex-col overflow-auto rounded bg-white p-4 focus:outline-none lg:p-6 ${classes}`
+      "
       tabindex="-1"
-      @keyup.esc="hide"
+      @keydown.esc.stop="hide"
     >
       <slot></slot>
     </div>
@@ -28,9 +26,16 @@
 
 <script>
 export default {
-  name: "VTDialogContent",
+  name: 'VTDialogContent',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
   data() {
     return {
@@ -40,20 +45,20 @@ export default {
 
   computed: {
     id() {
-      return `dialog-content-${this.api().componentId}`;
+      return `dialog-content-${this.apiDialog().componentId}`;
     },
 
-    dark() {
-      return this.api().isDark;
+    classes() {
+      return this.full ? 'h-screen w-screen' : 'max-h-full max-w-full';
     },
 
-    headless() {
-      return this.api().isHeadless;
+    full() {
+      return this.apiDialog().full;
     },
   },
 
   mounted() {
-    this.api().registerContent(this);
+    this.apiDialog().registerContent(this);
     this.show();
 
     this.$nextTick(() => this.$el.focus());
@@ -69,7 +74,7 @@ export default {
     },
 
     hideDialog() {
-      this.api().emit();
+      this.apiDialog().emit();
     },
   },
 };

package/src/components/Dialog/VTDialogFooter.vue

@@ -1,7 +1,11 @@
 <template>
   <component
     :is="as"
-    :class="{ 'Dialog-footer': headless, 'w-full': !headless }"
+    :class="[
+      headless
+        ? 'dialog-footer'
+        : '-mx-4 -mb-4 flex items-center justify-between gap-x-3 p-4 md:-mx-6 md:-mb-6 md:p-6',
+    ]"
   >
     <slot></slot>
   </component>
@@ -9,24 +13,15 @@
 
 <script>
 export default {
-  name: "VTDialogFooter",
-
-  inject: ["api"],
-
+  name: 'VTDialogFooter',
   props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
     as: {
       type: String,
-      default: "footer",
-    },
-  },
-
-  computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
+      default: 'footer',
     },
   },
 };

package/src/components/Dialog/VTDialogHeader.vue

@@ -2,10 +2,12 @@
   <component
     :is="as"
     :id="id"
-    :class="{
-      'Dialog-header': headless,
-      'mb-8 flex justify-between gap-x-3 items-center w-full': !headless,
-    }"
+    :class="[
+      headless
+        ? 'dialog-header'
+        : '-mx-4 -mt-4 flex items-center justify-between gap-x-3 p-4 md:-mx-6 md:-mt-6 md:p-6',
+    ]"
+    @click.stop
   >
     <slot></slot>
   </component>
@@ -13,28 +15,24 @@
 
 <script>
 export default {
-  name: "VTDialogHeader",
+  name: 'VTDialogHeader',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
     as: {
       type: String,
-      default: "header",
+      default: 'header',
     },
   },
 
   computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
-    },
-
     id() {
-      return `${this.api().id}-header`;
+      return `dialog-header-${this.apiDialog().componentId}`;
     },
   },
 
@@ -45,10 +43,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

@@ -2,10 +2,7 @@
   <component
     :is="as"
     :id="id"
-    :class="{
-      'Dialog-body': headless,
-      'flex-1 w-full h-full overflow-y-auto': !headless,
-    }"
+    :class="[headless ? 'dialog-body' : 'h-full flex-1 overflow-y-auto']"
   >
     <slot></slot>
   </component>
@@ -13,28 +10,24 @@
 
 <script>
 export default {
-  name: "VTDialogMain",
+  name: 'VTDialogMain',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
   props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
     as: {
       type: String,
-      default: "main",
+      default: 'main',
     },
   },
 
   computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
-    },
-
     id() {
-      return `${this.api().id}-desc`;
+      return `dialog-main-${this.apiDialog().componentId}`;
     },
   },
 
@@ -45,10 +38,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

@@ -3,25 +3,29 @@
     <div
       v-if="visible"
       :id="id"
-      :class="{
-        'Dialog-overlay': headless,
-        'fixed inset-0 bg-fd-450/80': !headless,
-      }"
-    ></div>
+      :class="[headless ? 'dialog-overlay' : 'bg-primary-200/80 fixed inset-0']"
+    />
   </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'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
   data() {
     return {
@@ -31,21 +35,13 @@ export default {
 
   computed: {
     id() {
-      return `dialog-overlay-${this.api().componentId}`;
-    },
-
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
+      return `dialog-overlay-${this.apiDialog().componentId}`;
     },
   },
 
   mounted() {
     this.visible = true;
-    this.api().registerOverlay(this);
+    this.apiDialog().registerOverlay(this);
   },
 
   methods: {

package/src/components/Dialog/VTDialogTitle.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     :id="id"
-    :class="{ 'Dialog-header': headless, 'text-2xl font-semibold': !headless }"
+    :class="[headless ? 'dialog-header' : 'text-2xl font-semibold']"
   >
     <slot></slot
   ></span>
@@ -9,17 +9,20 @@
 
 <script>
 export default {
-  name: "VTDialogTitle",
+  name: 'VTDialogTitle',
 
-  inject: ["api"],
+  inject: ['apiDialog'],
 
-  computed: {
-    headless() {
-      return this.api().isHeadless;
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
     },
+  },
 
+  computed: {
     id() {
-      return `${this.api().id}-title`;
+      return `dialog-overlay-${this.apiDialog().componentId}`;
     },
   },
 };

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

@@ -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

@@ -4,7 +4,7 @@
     :class="[
       headless
         ? 'details-header'
-        : 'flex cursor-pointer justify-between gap-3 text-body font-semibold',
+        : 'text-body flex cursor-pointer justify-between gap-3 font-semibold',
     ]"
     :aria-controls="ariaControls"
     :aria-expanded="String(ariaExpanded)"
@@ -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,7 +1,7 @@
 <template>
-  <Portal>
+  <Teleport to="body">
     <div
-      v-if="visible"
+      v-if="modelValue"
       :id="id"
       :class="{ Drawer: headless, 'fixed inset-0 z-50 h-screen': !headless }"
       aria-modal="true"
@@ -9,23 +9,18 @@
     >
       <slot></slot>
     </div>
-  </Portal>
+  </Teleport>
 </template>
 
 <script>
-import { Portal } from '@linusborg/vue-simple-portal';
 import { genId } from '../../utils/ids';
 
 export default {
   name: 'VTDrawer',
 
-  components: {
-    Portal,
-  },
-
   provide() {
     return {
-      api: () => {
+      apiDrawer: () => {
         const id = this.id;
         const isDark = this.dark;
         const isHeadless = this.headless;
@@ -58,12 +53,8 @@ export default {
     };
   },
 
-  model: {
-    prop: 'visible',
-  },
-
   props: {
-    visible: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
@@ -117,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

@@ -20,19 +20,19 @@ export default {
 
   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
@@ -43,7 +43,7 @@ export default {
 
   methods: {
     hide() {
-      this.api().hide();
+      this.apiDrawer().hide();
     },
   },
 };