@veritree/ui 0.27.0 → 0.28.0-1

package/src/components/Dialog/VTDialog.vue

@@ -1,31 +1,29 @@
 <template>
-  <Portal>
+  <Teleport to="body">
     <div
-      v-if="visible"
+      v-if="modelValue"
       :id="id"
-      :class="[
+      :class="
         headless
           ? 'dialog'
-          : 'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8',
-      ]"
+          : `fixed inset-0 ${zIndexClass} grid grid-cols-1 grid-rows-1 ${classes} ${additionalClass}`
+      "
       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 {
@@ -42,27 +40,22 @@ export default {
           this.overlay = overlay;
         };
 
-        const hide = () => this.hide();
-
-        const emit = () => this.emit();
-
         return {
           componentId,
-          hide,
-          emit,
+          hide: () => this.hide(),
+          emitHidden: () => this.emitHidden(),
+          emitShown: () => this.emitShown(),
           registerContent,
           registerOverlay,
+          full: this.full,
+          type: this.type,
         };
       },
     };
   },
 
-  model: {
-    prop: 'visible',
-  },
-
   props: {
-    visible: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
@@ -70,6 +63,22 @@ export default {
       type: Boolean,
       default: false,
     },
+    type: {
+      type: String,
+      default: null, // null or static: when set to static, the dialog will not close when clicking outside it or on esc.
+    },
+    full: {
+      type: Boolean,
+      default: false,
+    },
+    zIndex: {
+      type: String,
+      default: 'highest',
+    },
+    additionalClass: {
+      type: String,
+      default: '',
+    },
   },
 
   data() {
@@ -85,6 +94,25 @@ export default {
       return `dialog-${this.componentId}`;
     },
 
+    zIndexClass() {
+      switch (this.zIndex) {
+        case 'highest':
+          return 'z-50';
+        case 'high':
+          return 'z-40';
+        case 'normal':
+          return 'z-30';
+        case 'low':
+          return 'z-20';
+        case 'lowest':
+          return 'z-10';
+      }
+    },
+
+    classes() {
+      return !this.full ? 'p-4 md:p-6' : '';
+    },
+
     hasContent() {
       return this.content !== null;
     },
@@ -95,7 +123,7 @@ export default {
   },
 
   watch: {
-    visible(isVisible) {
+    modelValue(isVisible) {
       if (!isVisible) this.hide();
     },
   },
@@ -111,13 +139,19 @@ export default {
       if (this.hasContent) this.content.hide();
     },
 
-    emit() {
+    emitHidden() {
       this.$nextTick(() => {
-        this.$emit('input', false);
+        this.$emit('update:modelValue', false);
         this.$emit('hidden');
       });
     },
 
+    emitShown() {
+      this.$nextTick(() => {
+        this.$emit('shown');
+      });
+    },
+
     /**
      * Hides the dialog when clicking outside its content.
      *
@@ -125,7 +159,7 @@ export default {
      */
     onClick(ev) {
       if (!ev || ev.target.id !== this.overlay?.id) return;
-      this.hide();
+      if (this.type !== 'static') this.hide();
     },
   },
 };

package/src/components/Dialog/VTDialogClose.vue

@@ -2,11 +2,11 @@
   <VTButton
     variant="icon"
     :id="id"
-    :class="[headless ? 'dialog-close' : null]"
+    :class="[headless ? 'dialog-close' : 'self-start']"
     @click.prevent="hide"
   >
     <slot>
-      <IconClose class="h-5 w-5" />
+      <IconClose class="h-4 w-4" />
     </slot>
   </VTButton>
 </template>
@@ -38,6 +38,7 @@ export default {
   methods: {
     hide() {
       this.apiDialog().hide();
+      this.$emit('click');
     },
   },
 };

package/src/components/Dialog/VTDialogContent.vue

@@ -1,23 +1,24 @@
 <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-enter="showDialog"
     @after-leave="hideDialog"
   >
     <div
       v-show="visible"
       :id="id"
-      :class="[
+      :class="
         headless
           ? 'dialog-content'
-          : 'relative m-auto flex max-h-full max-w-full flex-col overflow-auto rounded bg-white p-6 focus:outline-none lg:p-8',
-      ]"
+          : `relative m-auto flex flex-col overflow-auto rounded bg-white px-4 focus:outline-none md:px-6 ${classes}`
+      "
       tabindex="-1"
-      @keydown.esc.stop="hide"
+      @keydown.esc.stop="onEsc"
     >
       <slot></slot>
     </div>
@@ -47,6 +48,18 @@ export default {
     id() {
       return `dialog-content-${this.apiDialog().componentId}`;
     },
+
+    classes() {
+      return this.full ? 'h-screen w-screen' : 'max-h-full max-w-full';
+    },
+
+    full() {
+      return this.apiDialog().full;
+    },
+
+    type() {
+      return this.apiDialog().type;
+    },
   },
 
   mounted() {
@@ -57,6 +70,11 @@ export default {
   },
 
   methods: {
+    onEsc() {
+      if (this.type === 'static') return;
+      this.hide();
+    },
+
     show() {
       this.visible = true;
     },
@@ -66,7 +84,11 @@ export default {
     },
 
     hideDialog() {
-      this.apiDialog().emit();
+      this.apiDialog().emitHidden();
+    },
+
+    showDialog() {
+      this.apiDialog().emitShown();
     },
   },
 };

package/src/components/Dialog/VTDialogFooter.vue

@@ -1,6 +1,13 @@
 <template>
-  <component :is="as" :class="[headless ? 'dialog-footer' : 'w-full']">
-    <slot></slot>
+  <component
+    :is="as"
+    :class="[
+      headless
+        ? 'dialog-footer'
+        : '-mx-4 flex items-center justify-between gap-x-3 p-4 md:-mx-6 md:px-6 md:py-5',
+    ]"
+  >
+    <slot :hide="hide"></slot>
   </component>
 </template>
 
@@ -8,6 +15,8 @@
 export default {
   name: 'VTDialogFooter',
 
+  inject: ['apiDialog'],
+
   props: {
     headless: {
       type: Boolean,
@@ -18,5 +27,11 @@ export default {
       default: 'footer',
     },
   },
+
+  methods: {
+    hide() {
+      this.apiDialog().hide();
+    },
+  },
 };
 </script>

package/src/components/Dialog/VTDialogHeader.vue

@@ -5,8 +5,9 @@
     :class="[
       headless
         ? 'dialog-header'
-        : 'mb-6 flex w-full items-center justify-between gap-x-3',
+        : '-mx-4 flex items-center justify-between gap-x-3 p-4 md:-mx-6 md:px-6 md:py-5',
     ]"
+    @click.stop
   >
     <slot></slot>
   </component>

package/src/components/Dialog/VTDialogMain.vue

@@ -2,7 +2,11 @@
   <component
     :is="as"
     :id="id"
-    :class="[headless ? 'dialog-body' : 'h-full w-full flex-1 overflow-y-auto']"
+    :class="[
+      headless
+        ? 'dialog-body'
+        : '-mx-4 flex-1 overflow-y-auto p-4 md:-mx-6 md:px-6 md:py-5',
+    ]"
   >
     <slot></slot>
   </component>

package/src/components/Dialog/VTDialogOverlay.vue

@@ -3,7 +3,11 @@
     <div
       v-if="visible"
       :id="id"
-      :class="[headless ? 'dialog-overlay' : 'bg-primary-200/80 fixed inset-0']"
+      :class="[
+        headless
+          ? 'dialog-overlay'
+          : 'bg-primary-200/80 fixed inset-0 backdrop-blur-[3px]',
+      ]"
     />
   </FadeInOut>
 </template>

package/src/components/Dialog/VTDialogTitle.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     :id="id"
-    :class="[headless ? 'dialog-header' : 'text-2xl font-semibold']"
+    :class="[headless ? 'dialog-header' : 'text-xl font-semibold']"
   >
     <slot></slot
   ></span>

package/src/components/Disclosure/VTDisclosure.vue

@@ -11,11 +11,8 @@ export default {
   provide() {
     return {
       apiDisclosure: () => {
-        const details = this.details;
-        const contents = this.contents;
         const accordion = this.accordion;
-        const headers = this.headers;
-        const icons = this.icons;
+        const details = this.details;
 
         const register = (objKey, item) => {
           if (!item) return;
@@ -28,11 +25,8 @@ export default {
         };
 
         return {
-          details,
-          contents,
-          headers,
-          icons,
           accordion,
+          details,
           register,
           unregister,
         };
@@ -50,9 +44,6 @@ export default {
   data() {
     return {
       details: [],
-      contents: [],
-      headers: [],
-      icons: [],
     };
   },
 };

package/src/components/Disclosure/VTDisclosureContent.vue

@@ -4,12 +4,19 @@
     :class="[
       headless
         ? 'details-content'
-        : 'overflow-hidden transition-[height] duration-300 ease-linear',
-      invisible ? 'absolute opacity-0' : 'h-[var(--height)]',
+        : 'grid transition-[grid-template-rows] duration-300 ease-linear',
+      headless
+        ? isVisible
+          ? 'details-content--expanded'
+          : null
+        : isVisible
+          ? 'grid-rows-[1fr]'
+          : 'grid-rows-[0fr]',
     ]"
-    :style="`--height: ${height};`"
   >
-    <slot></slot>
+    <div :class="[headless ? 'detail-content__overflow' : 'overflow-hidden']">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
@@ -24,14 +31,15 @@ export default {
       type: Boolean,
       default: false,
     },
+    open: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
     return {
       idGroup: this.apiDetails().idGroup,
-      expanded: false,
-      expandedHeight: null,
-      invisible: false,
     };
   },
 
@@ -40,56 +48,22 @@ export default {
       return `disclosure-content-${this.idGroup}`;
     },
 
-    height() {
-      return this.expanded ? this.expandedHeight : 0;
+    isVisible() {
+      return this.apiDetails().isVisible();
     },
   },
 
-  mounted() {
-    this.handleVisibleHeight();
-
-    const content = {
-      id: this.id,
-      idGroup: this.idGroup,
-      collapse: this.collapse,
-      expand: this.expand,
-      isVisible: this.isVisible,
-    };
-
-    this.apiDisclosure().register('contents', content);
-  },
-
-  beforeDestroy() {
-    this.apiDisclosure().unregister('contents', this.id);
-  },
-
-  methods: {
-    handleVisibleHeight() {
-      // make panel position absolute and opacity 0,
-      // to have it fully opened but not visible
-      this.invisible = true;
-
-      setTimeout(() => {
-        // get computed height now since its fully opened
-        // this height will be used by a css custom property to enable the transition
-        this.expandedHeight = window.getComputedStyle(this.$el).height;
-
-        // make invisible false once the full height is set
-        this.invisible = false;
-      }, 500);
-    },
-
-    expand() {
-      this.expanded = true;
-    },
-
-    collapse() {
-      this.expanded = false;
+  watch: {
+    open(value) {
+      this.apiDetails().setVisible(value);
+      this.expand = value;
     },
+  },
 
-    isVisible() {
-      return this.expanded;
-    },
+  mounted() {
+    if (this.open) {
+      this.apiDetails().setVisible(this.open);
+    }
   },
 };
 </script>

package/src/components/Disclosure/VTDisclosureDetails.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="[
-      headless ? 'disclosure-details' : 'group relative',
+      headless ? 'disclosure-details' : 'relative',
       headless ? (visible ? 'is-open' : null) : null,
     ]"
   >
@@ -26,6 +26,7 @@ export default {
         const idContent = `details-content-${idGroup}`;
 
         const isVisible = () => this.isVisible();
+        const setVisible = (visible) => this.setVisible(visible);
 
         return {
           idGroup,
@@ -33,6 +34,8 @@ export default {
           idIcon,
           idContent,
           isVisible,
+          setVisible,
+          visible: this.visible,
         };
       },
     };
@@ -52,6 +55,22 @@ export default {
     };
   },
 
+  watch: {
+    visible(value) {
+      if (value && this.apiDisclosure().accordion) {
+        this.apiDisclosure().details.forEach((detail) => {
+          if (detail.idGroup !== this.idGroup) {
+            detail.hide();
+          }
+
+          if (detail.idGroup === this.idGroup) {
+            detail.show();
+          }
+        });
+      }
+    },
+  },
+
   mounted() {
     const detail = {
       idGroup: this.idGroup,
@@ -69,16 +88,22 @@ export default {
 
   methods: {
     show() {
+      this.$emit('toggle', true);
       this.visible = true;
     },
 
     hide() {
+      this.$emit('toggle', false);
       this.visible = false;
     },
 
     isVisible() {
       return this.visible;
     },
+
+    setVisible(visible) {
+      this.visible = visible;
+    },
   },
 };
-</script>
+</script>