srcdev-nuxt-components 0.0.15 → 0.0.17

package/components/functional/display-dialog/DisplayDialogCore.vue

@@ -0,0 +1,168 @@
+<template>
+  <dialog class="display-dialog wrapper" :class="[elementClasses]" :align-dialog="`${positionY}-${positionX}`" :open="displayDialog" ref="dialogRef">
+    <focus-trap v-model:active="displayDialog" :clickOutsideDeactivates="true" @deactivate="closeDialog()">
+      <div class="inner">
+        <div class="top-bar">
+          <template v-if="hasDialogTitle">
+            <div class="col-left">
+              <slot name="dialogTitle"></slot>
+            </div>
+          </template>
+
+          <div class="col-center">
+            <p class="text-normal wght-700">Center col</p>
+          </div>
+          <div class="col-right">
+            <button @click.prevent="closeDialog()">x</button>
+          </div>
+        </div>
+        <slot v-if="hasDialogContent" name="dialogContent"></slot>
+        <template v-if="hasActionButtons">
+          <div class="button-row">
+            <slot name="actionButtons"></slot>
+          </div>
+        </template>
+      </div>
+    </focus-trap>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { FocusTrap } from 'focus-trap-vue';
+const props = defineProps({
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  variant: {
+    type: String,
+    default: 'dialog',
+    validator: (val) => ['dialog', 'modal'].includes(val as string),
+  },
+  positionX: {
+    type: String,
+    default: 'center',
+    validator: (val) => ['left', 'center', 'right'].includes(val as string),
+  },
+  positionY: {
+    type: String,
+    default: 'center',
+    validator: (val) => ['top', 'center', 'bottom'].includes(val as string),
+  },
+  lockViewport: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const displayDialog = defineModel<boolean>();
+const bodyTag = ref<HTMLBodyElement | null>(null);
+const lockViewport = toRef<boolean>(props.lockViewport);
+
+const closeDialog = () => {
+  displayDialog.value = false;
+
+  if (lockViewport.value && bodyTag.value !== null) {
+    bodyTag.value.classList.remove('lock');
+  }
+};
+
+const slots = useSlots();
+const hasDialogTitle = computed(() => slots.dialogTitle !== undefined);
+const hasDialogContent = computed(() => slots.dialogContent !== undefined);
+const hasActionButtons = computed(() => slots.actionButtons !== undefined);
+
+onMounted(() => {
+  bodyTag.value = document.querySelector('body');
+  if (lockViewport.value && bodyTag.value !== null) {
+    bodyTag.value.classList.add('lock');
+  }
+});
+</script>
+
+<style lang="css">
+.display-dialog {
+  display: flex;
+
+  &[align-dialog$='center'] {
+    justify-content: center;
+  }
+  &[align-dialog^='center'] {
+    align-items: center;
+  }
+
+  &.wrapper {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(5px);
+    background-color: rgba(0, 0, 0, 0.5);
+    border: 1px solid var(--color-grey-1);
+    z-index: 13;
+    opacity: 0;
+
+    display: none;
+    transition: opacity 200ms, display 200ms, overlay 200ms;
+    transition-behavior: allow-discrete;
+
+    &[open] {
+      display: flex;
+      opacity: 1;
+
+      @starting-style {
+        display: flex;
+        opacity: 0;
+      }
+    }
+  }
+
+  .inner {
+    background-color: var(--page-bg);
+    width: 100vw;
+    margin: 12px;
+    padding: 12px;
+
+    @media only screen and (min-width: 768px) {
+      width: 720px;
+    }
+
+    /* @media only screen and (min-width: 1024px) {
+       height: 100dvh;
+       width: 100vw;
+     } */
+  }
+
+  .top-bar {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+
+    .col-left {
+      /* grid-column: 1; */
+      /* display: none; */
+    }
+
+    .col-center {
+      /* grid-column: 2; */
+      text-align: center;
+
+      color: var(--color-red-1);
+      display: none;
+    }
+
+    .col-right {
+      grid-column: 3;
+    }
+  }
+
+  /* .button-row {
+     display: flex;
+     gap: 12px;
+     justify-content: flex-end;
+   } */
+}
+</style>

package/components/functional/display-dialog/variants/DisplayDialogConfirm.vue

@@ -0,0 +1,41 @@
+<template>
+  <DisplayDialogCore :styleClassPassthrough :lockViewport="true">
+    <template #dialogTitle>
+      <slot name="dialogTitle">
+        <p class="text-normal wght-700">Confirm</p>
+      </slot>
+    </template>
+    <template #dialogContent>
+      <slot name="dialogContent"></slot>
+    </template>
+    <template #actionButtons>
+      <slot name="actionButtonLeft"></slot>
+      <slot name="actionButtonRight"></slot>
+    </template>
+  </DisplayDialogCore>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+</script>
+
+<style lang="css">
+.display-dialog {
+  &.content-width {
+    .inner {
+      width: initial;
+
+      .button-row {
+        display: grid;
+        gap: 12px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+  }
+}
+</style>

package/components/functional/pop-over/PopOver.vue

@@ -4,9 +4,9 @@
       <slot name="trigger"></slot>
     </button>
 
-    <div class="dialog-popover" popover :id="popovertarget" :class="[elementClasses]">
+    <dialog class="dialog-popover" popover :id="popovertarget" :class="[elementClasses]">
       <slot name="popoverCotent"></slot>
-    </div>
+    </dialog>
   </ClientOnly>
 </template>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -41,6 +41,7 @@
     }
   },
   "dependencies": {
+    "focus-trap-vue": "^4.0.3",
     "modern-normalize": "3.0.1"
   }
 }