srcdev-nuxt-components 1.0.2 → 1.0.4

package/assets/styles/utils/_page.css

@@ -22,3 +22,9 @@ a {
   font-family: var(--font-family);
   font-size: var(--step-1);
 }
+
+body {
+  &.lock {
+    overflow: hidden;
+  }
+}

package/assets/styles/variables/components/_display-dialog-core.css

@@ -0,0 +1,35 @@
+.display-dialog-core {
+  --dialog-border: 0.1rem solid light-dark(var(--gray-8), var(--gray-0));
+  --dialog-outline: 0.1rem solid light-dark(var(--gray-8), var(--gray-0));
+  --dialog-border-radius: 0.4rem;
+
+  --dialog-inner-background: light-dark(var(--gray-0), var(--gray-9));
+
+  /*
+  * Header styles
+  */
+  --dialog-header-padding: 0 1.2rem;
+
+  --dialog-header-button-margin: 0;
+  --dialog-header-button-padding: 0.4rem;
+  --dialog-header-button-border-radius: 50%;
+
+  --dialog-header-button-border: 1px solid transparent;
+  --dialog-header-button-outline: 1px solid transparent;
+
+  --dialog-header-button-border-hover: 1px solid light-dark(var(--gray-8), var(--gray-0));
+  --dialog-header-button-outline-hover: 1px solid light-dark(var(--gray-8), var(--gray-0));
+
+  --dialog-header-button-icon-color: light-dark(var(--gray-8), var(--gray-0));
+  --dialog-header-button-icon-font-size: 1.4rem;
+
+  /*
+  * Header styles
+  */
+  --dialog-content-padding: 1.2rem;
+
+  /*
+  * Footerer styles
+  */
+  --dialog-footer-padding: 1.2rem;
+}

package/assets/styles/variables/components/index.css

@@ -1,3 +1,4 @@
 @import './_accordian';
 @import './_tabs';
 @import './display-prompt-core';
+@import './_display-dialog-core';

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

@@ -1,27 +1,28 @@
 <template>
-  <dialog class="display-dialog wrapper" :class="[elementClasses]" :align-dialog :open ref="dialogRef">
+  <dialog class="display-dialog-core" :class="[variant, elementClasses]" role="dialog" :align-dialog :open :data-dialog-id="dataDialogId" ref="dialogRef">
     <focus-trap v-model:active="open" :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="header">
+          <div v-if="hasDialogTitle" class="col-left">
+            <slot name="dialogTitle"></slot>
+          </div>
 
           <div class="col-center">
             <p class="text-normal wght-700">Center col</p>
           </div>
           <div class="col-right">
-            <button @click.prevent="closeDialog()">x</button>
+            <button @click.prevent="closeDialog()" data-test-id="display-dialog-header-close" class="display-prompt-action">
+              <Icon name="bitcoin-icons:cross-filled" class="icon" />
+              <span class="sr-only">Really Close</span>
+            </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 v-if="hasDialogContent" class="dialog-content" :class="[{ 'allow-content-scroll': allowContentScroll }]">
+          <slot name="dialogContent"></slot>
+        </div>
+        <div v-if="hasActionButtons" class="footer">
+          <slot name="actionButtons"></slot>
+        </div>
       </div>
     </focus-trap>
   </dialog>
@@ -37,7 +38,7 @@ const props = defineProps({
   variant: {
     type: String,
     default: 'dialog',
-    validator: (val) => ['dialog', 'modal'].includes(val as string),
+    validator: (val) => ['dialog', 'modal', 'confirm'].includes(val as string),
   },
   positionX: {
     type: String,
@@ -53,6 +54,14 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  allowContentScroll: {
+    type: Boolean,
+    default: false,
+  },
+  dataDialogId: {
+    type: String,
+    required: true,
+  },
 });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -85,8 +94,36 @@ onMounted(() => {
 </script>
 
 <style lang="css">
-.display-dialog {
+.display-dialog-core {
+  --_dialog-inner-height: initial;
+  --_dialog-inner-width: 100vw;
+
   display: flex;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(5px);
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 13;
+  opacity: 0;
+  border: none;
+  padding: 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;
+    }
+  }
 
   &[align-dialog$='center'] {
     justify-content: center;
@@ -95,76 +132,113 @@ onMounted(() => {
     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: 0.1rem 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;
+  &.confirm {
+    --_dialog-inner-width: initial;
+  }
 
-      @starting-style {
-        display: flex;
-        opacity: 0;
-      }
-    }
+  &.dialog {
+    --_dialog-inner-height: 70dvh;
+    --_dialog-inner-width: min(75%, 720px);
   }
 
-  .inner {
-    background-color: var(--page-bg);
-    width: 100vw;
-    margin: 1.2rem;
-    padding: 1.2rem;
+  &.form {
+    --_dialog-inner-width: initial;
+  }
 
-    @media only screen and (min-width: 768px) {
-      width: 720px;
-    }
+  &.fullscreen {
+    --_dialog-inner-width: initial;
+  }
 
-    /* @media only screen and (min-width: 1024px) {
-       height: 100dvh;
-       width: 100vw;
-     } */
+  &.modal {
+    --_dialog-inner-width: initial;
   }
 
-  .top-bar {
+  .inner {
     display: grid;
-    grid-template-columns: auto 1fr auto;
-    align-items: center;
+    grid-template-rows: auto 1fr auto;
+
+    border-radius: var(--dialog-border-radius);
+    border: var(--dialog-border);
+    outline: var(--dialog-outline);
+
+    background-color: var(--dialog-inner-background);
+    height: var(--_dialog-inner-height);
+    width: var(--_dialog-inner-width);
+
+    overflow: hidden;
+
+    .header {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: center;
+
+      padding: var(--dialog-header-padding);
 
-    .col-left {
-      /* grid-column: 1; */
-      /* display: none; */
+      .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;
+
+        .display-prompt-action {
+          background-color: transparent;
+          display: block flex;
+          align-items: center;
+          justify-content: center;
+          margin: var(--dialog-header-button-margin);
+          padding: var(--dialog-header-button-padding);
+          border: var(--dialog-header-button-border);
+          border-radius: var(--dialog-header-button-border-radius);
+          outline: var(--dialog-header-button-outline);
+
+          transition: border-color 0.2s, outline-color 0.2s;
+
+          &:hover,
+          &:focus-visible {
+            cursor: pointer;
+            border: var(--dialog-header-button-border-hover);
+            outline: var(--dialog-header-button-outline-hover);
+          }
+
+          .icon {
+            color: var(--dialog-header-button-icon-color);
+            display: block;
+            font-size: var(--dialog-header-button-icon-font-size);
+            border: 1px solid green;
+            padding: 1rem;
+          }
+        }
+      }
     }
 
-    .col-center {
-      /* grid-column: 2; */
-      text-align: center;
+    .dialog-content {
+      overflow: hidden;
+      padding: var(--dialog-content-padding);
 
-      color: var(--color-red-1);
-      display: none;
+      &.allow-content-scroll {
+        overflow-y: auto;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
     }
 
-    .col-right {
-      grid-column: 3;
+    .footer {
+      display: flex;
+      gap: 1.2rem;
+      justify-content: flex-end;
+      padding: var(--dialog-footer-padding);
     }
   }
-
-  /* .button-row {
-     display: flex;
-     gap: 1.2rem;
-     justify-content: flex-end;
-   } */
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <DisplayDialogCore :styleClassPassthrough :lockViewport="true">
+  <DisplayDialogCore variant="confirm" :styleClassPassthrough :lockViewport="true" :dataDialogId>
     <template #dialogTitle>
       <slot name="dialogTitle">
         <p class="text-normal wght-700">Confirm</p>
@@ -21,20 +21,24 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
+  dataDialogId: {
+    type: String,
+    required: true,
+  },
 });
 </script>
 
 <style lang="css">
-.display-dialog {
-  &.content-width {
-    .inner {
-      width: initial;
-
-      .button-row {
-        display: grid;
-        gap: 1.2rem;
-        grid-template-columns: 1fr 1fr;
-      }
+.display-dialog-core {
+  .inner {
+    .header {
+      /* background-color: aquamarine; */
+    }
+    .dialog-content {
+      /* background-color: bisque; */
+    }
+    .footer {
+      /* background-color: blueviolet; */
     }
   }
 }

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

@@ -0,0 +1,49 @@
+<template>
+  <DisplayDialogCore variant="dialog" :styleClassPassthrough :lockViewport="true" :allowContentScroll :dataDialogId>
+    <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: () => [],
+  },
+  allowContentScroll: {
+    type: Boolean,
+    default: false,
+  },
+  dataDialogId: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style lang="css">
+.display-dialog-core {
+  .inner {
+    .header {
+      /* background-color: aquamarine; */
+    }
+    .dialog-content {
+      /* background-color: bisque; */
+    }
+    .footer {
+      /* background-color: blueviolet; */
+    }
+  }
+}
+</style>

package/composables/useDialogControls.ts

@@ -0,0 +1,23 @@
+export const useDialogControls = () => {
+  interface DialogConfig {
+    [key: string]: boolean;
+  }
+
+  const dialogsConfig = reactive<DialogConfig>({});
+
+  function initialiseDialogs(dialogIds: string[]) {
+    dialogIds.forEach((id) => {
+      dialogsConfig[id] = false;
+    });
+  }
+
+  const controlDialogs = (name: string, state: boolean) => {
+    dialogsConfig[name] = state;
+  };
+
+  return {
+    dialogsConfig,
+    controlDialogs,
+    initialiseDialogs,
+  };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",