srcdev-nuxt-components 6.1.16 → 6.1.18

package/app/components/display-card/DisplayCard.vue

@@ -1,12 +1,16 @@
 <template>
-  <component :is="tag" class="display-card" :class="[variant, elementClasses]">
-    <div v-if="slots.header" class="display-card-header">
+  <component
+    :is="tag"
+    class="display-card"
+    :class="[variant, elementClasses, { 'has-dividers': hasDividers }, { 'no-outline': noOutline }]"
+  >
+    <div v-if="slots.header" class="card-row display-card-header">
       <slot name="header"></slot>
     </div>
-    <div v-if="slots.default" class="display-card-content">
+    <div v-if="slots.default" class="card-row display-card-content">
       <slot name="default"></slot>
     </div>
-    <div v-if="slots.footer" class="display-card-footer">
+    <div v-if="slots.footer" class="card-row display-card-footer">
       <slot name="footer"></slot>
     </div>
   </component>
@@ -21,9 +25,17 @@ const props = defineProps({
       return ["div", "section", "article", "aside", "main", "nav"].includes(value)
     },
   },
+  hasDividers: {
+    type: Boolean,
+    default: false,
+  },
+  noOutline: {
+    type: Boolean,
+    default: false,
+  },
   variant: {
     type: String,
-    default: "subtle",
+    default: "solid",
     validator(value: string) {
       return ["solid", "subtle", "soft", "outline"].includes(value)
     },
@@ -48,6 +60,10 @@ watch(
 <style lang="css">
 .display-card {
   --_inner-padding: 1rem;
+  --_background-color: transparent;
+  --_border-color: transparent;
+  --_border-width: 0.2rem;
+  --_box-shadow-color: transparent;
 
   display: grid;
   grid-auto-flow: row;
@@ -55,40 +71,49 @@ watch(
   border-radius: 0.5rem;
   overflow: hidden;
 
+  background-color: var(--_background-color, transparent);
+  border: var(--_border-width) solid var(--_border-color, transparent);
+  box-shadow: 0 0 0.4rem var(--_border-width) var(--_box-shadow-color, transparent);
+
+  &.no-outline {
+    --_border-width: 0;
+  }
+
   &.solid {
-    background-color: light-dark(var(--gray-0), var(--gray-12));
-    border: 0.2rem solid light-dark(var(--gray-4), var(--gray-8));
+    --_background-color: light-dark(var(--gray-0), var(--gray-12));
+    --_border-color: light-dark(var(--gray-4), var(--gray-8));
   }
 
   &.subtle {
-    background-color: color-mix(in oklab, light-dark(var(--gray-1), var(--gray-8)) 50%, transparent);
-    border: 0.2rem solid light-dark(var(--gray-3), var(--gray-9));
+    --_background-color: color-mix(in oklab, light-dark(var(--gray-1), var(--gray-8)) 50%, transparent);
+    --_border-color: light-dark(var(--gray-3), var(--gray-9));
   }
 
   &.soft {
-    background-color: color-mix(in oklab, light-dark(var(--gray-1), var(--gray-8)) 20%, transparent);
-    box-shadow: 0px 0px 4px 2px color-mix(in oklab, light-dark(var(--gray-2), var(--gray-8)) 80%, transparent);
+    --_background-color: color-mix(in oklab, light-dark(var(--gray-1), var(--gray-8)) 20%, transparent);
+    --_box-shadow-color: color-mix(in oklab, light-dark(var(--gray-2), var(--gray-8)) 80%, transparent);
   }
 
   &.outline {
-    background-color: transparent;
-    border: 0.2rem solid light-dark(var(--gray-4), var(--gray-8));
+    --_background-color: transparent;
+    --_border-color: light-dark(var(--gray-4), var(--gray-8));
+  }
+
+  &.has-dividers {
+    .card-row + .card-row {
+      border-top: 0.2rem solid var(--_border-color);
+    }
   }
 
   .display-card-header {
-    /* background-color: darkblue; */
     padding: var(--_inner-padding);
-    border-bottom: 0.2rem solid light-dark(var(--gray-1), var(--gray-8));
   }
 
   .display-card-content {
-    /* background-color: darkgreen; */
     padding: var(--_inner-padding);
-    border-bottom: 0.2rem solid light-dark(var(--gray-1), var(--gray-8));
   }
 
   .display-card-footer {
-    /* background-color: darkslateblue; */
     padding: var(--_inner-padding);
   }
 }

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

@@ -1,5 +1,9 @@
 <template>
-  <div class="display-prompt-core" :class="[{ dismissed: hide }]" :data-test-id="`display-prompt-core-${theme}`">
+  <div
+    class="display-prompt-core"
+    :class="[{ closed: !compopnentOpen }]"
+    :data-test-id="`display-prompt-core-${theme}`"
+  >
     <div class="display-prompt-wrapper" :data-theme="theme" :class="[elementClasses]" data-test-id="display-prompt">
       <div class="display-prompt-inner">
         <div class="display-prompt-icon" data-test-id="prompt-icon">
@@ -17,7 +21,7 @@
         </div>
         <button
           v-if="dismissible"
-          @click.prevent="dismissPrompt()"
+          @click.prevent="updateComponentState()"
           data-test-id="display-prompt-action"
           class="display-prompt-action"
         >
@@ -70,12 +74,17 @@ const props = defineProps({
 })
 
 const slots = useSlots()
-const hide = ref(false)
+const parentComponentState = defineModel<boolean>("parentComponentState", { default: false })
+const compopnentOpen = ref(true)
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const dismissPrompt = () => {
-  // styleClassPassthrough.value = '';
-  hide.value = true
+const updateComponentState = () => {
+  if (parentComponentState.value) {
+    parentComponentState.value = false
+    return
+  }
+
+  compopnentOpen.value = false
 }
 </script>
 
@@ -86,7 +95,7 @@ const dismissPrompt = () => {
   opacity: 1;
   transition: all 200ms ease-in-out;
 
-  &.dismissed {
+  &.closed {
     grid-template-rows: 0fr;
     opacity: 0;
     pointer-events: none;
@@ -141,7 +150,7 @@ const dismissPrompt = () => {
         }
 
         .text {
-          font-size: var(--step-5);
+          font-size: var(--step-4);
           font-weight: normal;
           line-height: 1.3;
           color: var(--colour-theme-8);

package/app/components/display-toast/DisplayToast.vue

@@ -0,0 +1,327 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="privateToastState"
+      class="display-notification"
+      :class="[
+        elementClasses,
+        {
+          [theme]: !slots.default,
+          'has-theme': !slots.default,
+          show: publicToastState && !isHiding && displayDurationInt === 0,
+          'use-timer': displayDurationInt > 0,
+          hide: isHiding,
+        },
+      ]"
+    >
+      <slot v-if="slots.default"></slot>
+
+      <div v-else class="display-notification-body">
+        <div class="display-notification-description">
+          <div class="description-icon icon__wrapper" :class="[theme]">
+            <Icon name="akar-icons:circle-check-fill" class="icon-circle-check-fill" />
+          </div>
+          <div class="description-text page-body-normal">{{ toastDisplayText }}</div>
+          <div class="description-close">
+            <button class="description-close-btn" @click.prevent="closeToast()">
+              <Icon name="material-symbols:close" class="close" :class="[theme]" />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div v-if="displayDurationInt > 0" @transitionend="closeToast()" class="display-notification-progress"></div>
+    </div>
+  </Teleport>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  theme: {
+    type: String,
+    default: "ghost",
+    validator(value: string) {
+      return ["primary", "secondary", "tertiary", "ghost", "error", "info", "success", "warning"].includes(value)
+    },
+  },
+  revealDuration: {
+    type: Number,
+    default: 3000,
+  },
+  duration: {
+    type: Number,
+    default: 5000,
+  },
+  toastDisplayText: {
+    type: String,
+    default: "",
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+})
+
+const slots = useSlots()
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough)
+  }
+)
+
+const privateToastState = ref(false)
+const isHiding = ref(false)
+const publicToastState = defineModel<boolean>({ default: false })
+
+const revealDurationInt = computed(() => props.revealDuration)
+const revealDuration = computed(() => revealDurationInt.value + "ms")
+const displayDurationInt = computed(() => props.duration)
+const displayDuration = computed(() => displayDurationInt.value + "ms")
+
+const progressDurationInt = computed(() => Math.floor(displayDurationInt.value - revealDurationInt.value / 2))
+const progressDuration = computed(() => progressDurationInt.value + "ms")
+
+const sendCloseEvent = () => {
+  publicToastState.value = false
+  privateToastState.value = false
+  isHiding.value = false
+}
+
+const closeToast = async () => {
+  isHiding.value = true
+  await useSleep(revealDurationInt.value)
+  sendCloseEvent()
+}
+
+watch(
+  () => publicToastState.value,
+  async (newValue, previousValue) => {
+    if (!previousValue && newValue) {
+      privateToastState.value = true
+
+      if (newValue && displayDurationInt.value > 0) {
+        await useSleep(displayDurationInt.value)
+        sendCloseEvent()
+      }
+    } else if (previousValue && !newValue) {
+      closeToast()
+    }
+  }
+)
+</script>
+
+<style lang="css">
+@keyframes fade-in {
+  5% {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+  95% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes show {
+  to {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+}
+
+@keyframes hide {
+  0% {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-30px);
+  }
+}
+
+@keyframes progress {
+  to {
+    transform: scaleX(1);
+  }
+}
+
+.display-notification {
+  display: block;
+  overflow: hidden;
+  position: fixed;
+  margin: 0;
+  opacity: 0;
+  visibility: hidden;
+
+  z-index: 100;
+
+  &.use-timer {
+    animation: fade-in v-bind(displayDuration) linear;
+  }
+
+  &.show {
+    animation: show v-bind(revealDuration)
+      linear(
+        0,
+        0.029 1.6%,
+        0.123 3.5%,
+        0.651 10.6%,
+        0.862 14.1%,
+        1.002 17.7%,
+        1.046 19.6%,
+        1.074 21.6%,
+        1.087 23.9%,
+        1.086 26.6%,
+        1.014 38.5%,
+        0.994 46.3%,
+        1
+      )
+      forwards;
+  }
+
+  &.hide {
+    animation: hide v-bind(revealDuration)
+      linear(
+        0,
+        0.029 1.6%,
+        0.123 3.5%,
+        0.651 10.6%,
+        0.862 14.1%,
+        1.002 17.7%,
+        1.046 19.6%,
+        1.074 21.6%,
+        1.087 23.9%,
+        1.086 26.6%,
+        1.014 38.5%,
+        0.994 46.3%,
+        1
+      )
+      forwards;
+  }
+
+  &:hover {
+    .display-notification-progress {
+      animation-play-state: paused;
+    }
+  }
+
+  &.full-width {
+    left: 24px;
+    right: 24px;
+  }
+
+  &.left {
+    left: 24px;
+  }
+
+  &.right {
+    right: 24px;
+  }
+
+  &.top {
+    top: 24px;
+    transform: translateY(-30px);
+  }
+  &.bottom {
+    bottom: 24px;
+    transform: translateY(30px);
+  }
+
+  &.has-theme {
+    align-items: center;
+    border: 2px solid transparent;
+    border-radius: 12px;
+    background-color: #9ce6a8;
+    color: white;
+
+    &.success {
+      background-color: var(--green-4);
+      border-color: var(--green-2);
+    }
+    &.error {
+      background-color: var(--red-3);
+      border-color: var(--red-2);
+    }
+  }
+
+  .display-notification-body {
+    display: flex;
+    flex-direction: row;
+    padding: 6px 12px 10px 12px;
+  }
+
+  .display-notification-description {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 1rem;
+    flex-grow: 2;
+
+    .description {
+      .description-icon {
+        transform: translateY(2px);
+
+        &.success {
+          background-color: var(--green-4);
+          border-color: var(--green-2);
+        }
+        &.error {
+          background-color: var(--red-3);
+          border-color: var(--red-2);
+        }
+      }
+
+      .description-text {
+        flex-grow: 1;
+        text-align: right;
+      }
+      .description-close {
+        .description-close-btn {
+          background-color: transparent;
+          border: none;
+          outline: 0;
+          margin: 0;
+          padding: 0;
+          line-height: initial;
+
+          svg {
+            border-radius: 50%;
+            border-width: 1px;
+            border-style: solid;
+            color: var(--gray-0);
+
+            &.success {
+              background-color: var(--green-2);
+              border-color: var(--green-2);
+            }
+            &.error {
+              background-color: var(--red-2);
+              border-color: var(--red-2);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .display-notification-progress {
+    position: absolute;
+    right: 8px;
+    bottom: 4px;
+    width: calc(100% - 16px);
+    height: 3px;
+    transform: scaleX(0);
+    transform-origin: right;
+    background: linear-gradient(to right, #9ce6a8, #9ce6a8);
+    border-radius: inherit;
+    animation: progress v-bind(progressDuration) linear forwards;
+  }
+}
+</style>

package/app/components/glowing-border/GlowingBorder.vue

@@ -0,0 +1,140 @@
+<template>
+  <component :is="tag" class="glowing-border" :class="[elementClasses, variant]">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  tag: {
+    type: String,
+    default: "div",
+    validator(value: string) {
+      return [
+        "div",
+        "p",
+        "span",
+        "section",
+        "article",
+        "aside",
+        "header",
+        "footer",
+        "main",
+        "nav",
+        "ul",
+        "ol",
+      ].includes(value)
+    },
+  },
+  variant: {
+    type: String,
+    default: "subtle",
+    validator(value: string) {
+      return ["subtle", "vivid", "silver", "steel"].includes(value)
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+})
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough)
+  }
+)
+</script>
+
+<style scoped lang="css">
+@property --glow-deg {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: -90deg;
+}
+
+/* the colors don't need to be registed */
+@property --clr-1 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: red;
+}
+
+@property --clr-2 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: yellow;
+}
+
+@property --clr-3 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: green;
+}
+
+@property --clr-4 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: blue;
+}
+
+@property --clr-5 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: purple;
+}
+
+.glowing-border {
+  &.vivid {
+    --clr-1: #ff0000;
+    --clr-2: #ffa500;
+    --clr-3: #ffff00;
+    --clr-4: #008000;
+    --clr-5: #0000ff;
+  }
+
+  &.subtle {
+    --clr-1: #ff9a9e;
+    --clr-2: #fad0c4;
+    --clr-3: #fad0c4;
+    --clr-4: #fbc2eb;
+    --clr-5: #a18cd1;
+  }
+
+  &.silver {
+    --clr-1: #d4d4d4;
+    --clr-2: #e4e4e4;
+    --clr-3: #f5f5f5;
+    --clr-4: #e4e4e4;
+    --clr-5: #d4d4d4;
+  }
+
+  &.steel {
+    --clr-1: #434343;
+    --clr-2: #5a5a5a;
+    --clr-3: #6e6e6e;
+    --clr-4: #5a5a5a;
+    --clr-5: #434343;
+  }
+
+  --gradient-glow: var(--clr-1), var(--clr-2), var(--clr-3), var(--clr-4), var(--clr-5), var(--clr-1);
+
+  border: var(--border-width, 3px) solid transparent;
+  border-radius: 30px;
+  background: linear-gradient(var(--surface, canvas) 0 0) padding-box,
+    conic-gradient(from var(--glow-deg), var(--gradient-glow)) border-box;
+
+  animation: glow 10s infinite linear;
+
+  overflow: hidden;
+}
+
+@keyframes glow {
+  100% {
+    --glow-deg: 270deg;
+  }
+}
+</style>

package/app/composables/useSleep.ts

@@ -0,0 +1,8 @@
+const useSleep = async (duration: number) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true)
+    }, duration)
+  })
+}
+export default useSleep

package/app/types/display-toast.d.ts

@@ -0,0 +1,6 @@
+export interface IToastConfig {
+  showToast: boolean
+  variant: string
+  duration: number
+  toastDisplayText: string
+}

package/package.json

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