srcdev-nuxt-components 1.0.1 → 1.0.3

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/_accordian.css

@@ -0,0 +1,7 @@
+:root {
+  --accordian-panel-border: 0.1rem solid light-dark(var(--gray-3), var(--gray-6));
+  --accordian-panel-border-radius: 0.4rem;
+  --accordian-panel-mbe: 1.6rem;
+
+  --accordion-trigger-bg: light-dark(var(--gray-3), var(--gray-6));
+}

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/_tabs.css

@@ -0,0 +1,18 @@
+:root {
+  --tabs-default-text: light-dark(var(--gray-12), var(--gray-0));
+  --tabs-active-bg: light-dark(var(--gray-12), var(--gray-0));
+  --tabs-active-text: light-dark(var(--gray-0), var(--gray-12));
+  --tabs-active-indicator: var(--green-6);
+  --tabs-hovered-bg: light-dark(var(--gray-7), var(--gray-3));
+  --tabs-hovered-text: light-dark(var(--gray-0), var(--gray-12));
+  --tabs-border-bottom: 0px solid var(--green-6);
+
+  --tabs-content-border: 0.1rem solid var(--green-6);
+  --tabs-content-outline: 0.1rem solid var(--green-12);
+  --tabs-content-bg: light-dark(var(--gray-1), var(--gray-8));
+
+  --tabs-content-start-start-radius: 0;
+  --tabs-content-start-end-radius: 0;
+  --tabs-content-end-start-radius: 1rem;
+  --tabs-content-end-end-radius: 1rem;
+}

package/assets/styles/variables/components/display-prompt-core/_scaffolding.css

@@ -0,0 +1,57 @@
+:root {
+  /*
+  * Wrapper styles
+  */
+  --display-prompt-wrapper-border-radius: 0.5rem;
+
+  /*
+  * Inner styles
+  */
+  --display-prompt-inner-margin: 0 0 0 0.7rem;
+  --display-prompt-inner-padding: 1rem 1.5rem;
+  --display-prompt-inner-gap: 1.6rem;
+  --display-prompt-inner-border-radius: 0.2rem;
+
+  /*
+  * Icon styles
+  */
+  --display-prompt-icon-size: 3rem;
+  --display-prompt-icon-weight: normal;
+
+  /*
+  * Title styles
+  */
+  --display-prompt-inner-content-gap: 1rem;
+  --display-prompt-content-margin: 0;
+  --display-prompt-content-padding: 0.2rem;
+
+  /*
+  * Title styles
+  */
+  --display-prompt-content-title-font-size: var(--step-2);
+  --display-prompt-content-title-font-weight: bold;
+  --display-prompt-content-title-line-height: 1.3;
+  --display-prompt-content-title-margin: 0;
+  --display-prompt-content-title-padding: 0;
+
+  /*
+  * Text styles
+  */
+  --display-prompt-content-text-font-size: var(--step-2);
+  --display-prompt-content-text-font-weight: normal;
+  --display-prompt-content-text-line-height: 1.3;
+  --display-prompt-content-title-margin: 0;
+  --display-prompt-content-title-padding: 0;
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-border-radius: 50%;
+  --display-prompt-button-margin: 1rem;
+  --display-prompt-button-padding: 0.5rem;
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-icon-font-size: var(--step-2);
+}

package/assets/styles/variables/components/display-prompt-core/index.css

@@ -0,0 +1,2 @@
+@import './_scaffolding.css';
+@import './themes';

package/assets/styles/variables/components/display-prompt-core/themes/_error.css

@@ -0,0 +1,39 @@
+[data-prompt-theme='error'] {
+  /*
+  * Wrapper styles
+  */
+  --display-prompt-wrapper-background-color: var(--red-8);
+  --display-prompt-wrapper-border: 0.1rem solid var(--red-8);
+  --display-prompt-wrapper-outline: 0.1rem solid var(--red-5);
+
+  /*
+  * Inner styles
+  */
+  --display-prompt-inner-background-color: var(--red-0);
+
+  /*
+  * Icon styles
+  */
+  --display-prompt-icon-color: var(--red-8);
+
+  /*
+  * Title styles
+  */
+  --display-prompt-content-title-color: var(--red-8);
+
+  /*
+  * Text styles
+  */
+  --display-prompt-content-text-color: var(--red-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-border: 0.1rem solid var(--red-8);
+  --display-prompt-button-outline: 0.1rem solid var(--red-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-icon-color: var(--red-8);
+}

package/assets/styles/variables/components/display-prompt-core/themes/_info.css

@@ -0,0 +1,39 @@
+[data-prompt-theme='info'] {
+  /*
+  * Wrapper styles
+  */
+  --display-prompt-wrapper-background-color: var(--blue-8);
+  --display-prompt-wrapper-border: 0.1rem solid var(--blue-8);
+  --display-prompt-wrapper-outline: 0.1rem solid var(--blue-5);
+
+  /*
+  * Inner styles
+  */
+  --display-prompt-inner-background-color: var(--blue-0);
+
+  /*
+  * Icon styles
+  */
+  --display-prompt-icon-color: var(--blue-8);
+
+  /*
+  * Title styles
+  */
+  --display-prompt-content-title-color: var(--blue-8);
+
+  /*
+  * Text styles
+  */
+  --display-prompt-content-text-color: var(--blue-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-border: 0.1rem solid var(--blue-8);
+  --display-prompt-button-outline: 0.1rem solid var(--blue-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-icon-color: var(--blue-8);
+}

package/assets/styles/variables/components/display-prompt-core/themes/_success.css

@@ -0,0 +1,39 @@
+[data-prompt-theme='success'] {
+  /*
+  * Wrapper styles
+  */
+  --display-prompt-wrapper-background-color: var(--green-8);
+  --display-prompt-wrapper-border: 0.1rem solid var(--green-8);
+  --display-prompt-wrapper-outline: 0.1rem solid var(--green-5);
+
+  /*
+  * Inner styles
+  */
+  --display-prompt-inner-background-color: var(--green-0);
+
+  /*
+  * Icon styles
+  */
+  --display-prompt-icon-color: var(--green-8);
+
+  /*
+  * Title styles
+  */
+  --display-prompt-content-title-color: var(--green-8);
+
+  /*
+  * Text styles
+  */
+  --display-prompt-content-text-color: var(--green-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-border: 0.1rem solid var(--green-8);
+  --display-prompt-button-outline: 0.1rem solid var(--green-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-icon-color: var(--green-8);
+}

package/assets/styles/variables/components/display-prompt-core/themes/_warning.css

@@ -0,0 +1,39 @@
+[data-prompt-theme='warning'] {
+  /*
+  * Wrapper styles
+  */
+  --display-prompt-wrapper-background-color: var(--orange-8);
+  --display-prompt-wrapper-border: 0.1rem solid var(--orange-8);
+  --display-prompt-wrapper-outline: 0.1rem solid var(--orange-5);
+
+  /*
+  * Inner styles
+  */
+  --display-prompt-inner-background-color: var(--orange-0);
+
+  /*
+  * Icon styles
+  */
+  --display-prompt-icon-color: var(--orange-8);
+
+  /*
+  * Title styles
+  */
+  --display-prompt-content-title-color: var(--orange-8);
+
+  /*
+  * Text styles
+  */
+  --display-prompt-content-text-color: var(--orange-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-border: 0.1rem solid var(--orange-8);
+  --display-prompt-button-outline: 0.1rem solid var(--orange-8);
+
+  /*
+  * Button styles
+  */
+  --display-prompt-button-icon-color: var(--orange-8);
+}

package/assets/styles/variables/components/display-prompt-core/themes/index.css

@@ -0,0 +1,4 @@
+@import './_error';
+@import './_success';
+@import './_warning';
+@import './_info';

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

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

package/assets/styles/variables/index.css

@@ -1 +1,2 @@
 @import './colors/colors.css';
+@import './components';

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]" :align-dialog :open 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,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  allowContentScroll: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -85,8 +90,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 +128,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);
 
-    .col-left {
-      /* grid-column: 1; */
-      /* display: none; */
+    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-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">
     <template #dialogTitle>
       <slot name="dialogTitle">
         <p class="text-normal wght-700">Confirm</p>
@@ -25,16 +25,16 @@ const props = defineProps({
 </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,45 @@
+<template>
+  <DisplayDialogCore variant="dialog" :styleClassPassthrough :lockViewport="true" :allowContentScroll>
+    <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,
+  },
+});
+</script>
+
+<style lang="css">
+.display-dialog-core {
+  .inner {
+    .header {
+      /* background-color: aquamarine; */
+    }
+    .dialog-content {
+      /* background-color: bisque; */
+    }
+    .footer {
+      /* background-color: blueviolet; */
+    }
+  }
+}
+</style>

package/components/presentation/display-prompt/DisplayPromptCore.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="display-prompt-wrapper" :class="[theme, elementClasses, { dismissed: hide }]" data-test-id="display-prompt">
+  <div class="display-prompt-wrapper" :data-prompt-theme="theme" :class="[elementClasses, { dismissed: hide }]" data-test-id="display-prompt">
     <div class="display-prompt-inner">
       <div class="display-prompt-icon" data-test-id="prompt-icon">
         <slot name="icon"></slot>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -25,18 +25,19 @@
     "types/"
   ],
   "devDependencies": {
-    "@nuxt/eslint-config": "0.7.3",
-    "@nuxt/icon": "1.10.2",
+    "@iconify-json/akar-icons": "^1.2.2",
+    "@iconify-json/bitcoin-icons": "^1.2.2",
+    "@nuxt/eslint-config": "0.7.5",
+    "@nuxt/icon": "1.10.3",
     "@oddbird/css-anchor-positioning": "0.4.0",
-    "eslint": "9.17.0",
-    "happy-dom": "15.11.7",
-    "nuxt": "3.14.1592",
-    "release-it": "17.10.0",
-    "typescript": "5.7.2",
-    "vue": "3.5.13"
+    "eslint": "9.19.0",
+    "happy-dom": "16.7.2",
+    "nuxt": "3.15.3",
+    "release-it": "18.1.2",
+    "typescript": "5.7.3"
   },
   "dependencies": {
-    "@vueuse/core": "12.0.0",
+    "@vueuse/core": "12.5.0",
     "focus-trap-vue": "4.0.3",
     "modern-normalize": "3.0.1"
   },