srcdev-nuxt-components 4.0.5 → 5.0.0

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

@@ -0,0 +1 @@
+@import './colors/';

package/components/accordian/AccordianCore.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="display-accordian" :class="[elementClasses]">
+    <ExpandingPanel v-for="(item, key) in itemCount" :key="key" :name :animation-duration="300" icon-size="medium" :style-class-passthrough="['accordian-item']">
+      <template #summary>
+        <slot :name="`accordian-${key}-summary`"></slot>
+      </template>
+      <template #icon>
+        <slot :name="`accordian-${key}-icon`"></slot>
+      </template>
+      <template #content>
+        <slot :name="`accordian-${key}-content`"></slot>
+      </template>
+    </ExpandingPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  name: {
+    type: String,
+    default: null,
+  },
+  itemCount: {
+    type: Number as PropType<number>,
+    default: 0,
+  },
+  animationDuration: {
+    type: Number,
+    default: 400,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const animationDurationStr = computed(() => `${props.animationDuration}ms`);
+</script>
+
+<style lang="css">
+.display-accordian {
+  max-width: 600px;
+  margin: 0 auto;
+}
+</style>

package/components/{presentation/container-glow → container-glow}/ContainerGlowCore.vue

@@ -1,24 +1,26 @@
 <template>
-  <div class="container-glow-wrapper" ref="containerGlowWrapper">
-    <template v-for="(item, key) in data" :key="key">
-      <component :is="tag" class="container-glow-core" :class="elementClasses" ref="containerGlowItem">
-        <div class="glows"></div>
-        <slot :name="`container-glow-${key}`"></slot>
-      </component>
-    </template>
+  <div class="container-glow-wrapper" :class="elementClasses" ref="containerGlowWrapper">
+    <component :is="tag" v-for="(item, key) in itemCount" :key="key" class="container-glow-core" ref="containerGlowItem">
+      <div class="glows"></div>
+      <slot :name="`container-glow-${key}`"></slot>
+    </component>
   </div>
 </template>
 
 <script setup lang="ts">
-interface Data {
-  title: string;
-  content: string;
+interface Config {
+  proximity: number;
+  spread: number;
+  blur: number;
+  gap: number;
+  vertical: boolean;
+  opacity: number;
 }
 
 const props = defineProps({
-  data: {
-    type: Array as PropType<Data[]>,
-    default: () => [],
+  itemCount: {
+    type: Number,
+    required: true,
   },
   tag: {
     type: String as PropType<string>,
@@ -28,6 +30,17 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
+  config: {
+    type: Object as PropType<Config>,
+    default: () => ({
+      proximity: 40,
+      spread: 80,
+      blur: 20,
+      gap: 32,
+      vertical: false,
+      opacity: 0.15,
+    }),
+  },
 });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -37,54 +50,43 @@ const controller = new AbortController();
 const containerGlowWrapper = ref<HTMLElement>();
 const containerGlowItem = ref<HTMLElement[]>([]);
 
-const CONFIG = {
-  proximity: 40,
-  spread: 80,
-  blur: 20,
-  gap: 32,
-  vertical: false,
-  opacity: 0,
-};
-
-const PROXIMITY = 10;
-
-const UPDATE = (event: PointerEvent) => {
+const updateStyles = (event: PointerEvent) => {
   // get the angle based on the center point of the card and pointer position
-  for (const CARD of containerGlowItem.value) {
+  for (const cardElem of containerGlowItem.value) {
     // Check the card against the proximity and then start updating
-    const CARD_BOUNDS = CARD.getBoundingClientRect();
+    const cardBounds = cardElem.getBoundingClientRect();
     // Get distance between pointer and outerbounds of card
     if (
-      event?.x > CARD_BOUNDS.left - CONFIG.proximity &&
-      event?.x < CARD_BOUNDS.left + CARD_BOUNDS.width + CONFIG.proximity &&
-      event?.y > CARD_BOUNDS.top - CONFIG.proximity &&
-      event?.y < CARD_BOUNDS.top + CARD_BOUNDS.height + CONFIG.proximity
+      event?.x > cardBounds.left - props.config.proximity &&
+      event?.x < cardBounds.left + cardBounds.width + props.config.proximity &&
+      event?.y > cardBounds.top - props.config.proximity &&
+      event?.y < cardBounds.top + cardBounds.height + props.config.proximity
     ) {
       // If within proximity set the active opacity
-      CARD.style.setProperty('--active', String(1));
+      cardElem.style.setProperty('--opacity-active', String(1));
     } else {
-      CARD.style.setProperty('--active', String(CONFIG.opacity));
+      cardElem.style.setProperty('--opacity-active', String(props.config.opacity));
     }
-    const CARD_CENTER = [CARD_BOUNDS.left + CARD_BOUNDS.width * 0.5, CARD_BOUNDS.top + CARD_BOUNDS.height * 0.5];
-    let ANGLE = (Math.atan2(event?.y - CARD_CENTER[1], event?.x - CARD_CENTER[0]) * 180) / Math.PI;
-    ANGLE = ANGLE < 0 ? ANGLE + 360 : ANGLE;
-    CARD.style.setProperty('--start', String(ANGLE + 90));
+    const cardCentre = [cardBounds.left + cardBounds.width * 0.5, cardBounds.top + cardBounds.height * 0.5];
+    let angle = (Math.atan2(event?.y - cardCentre[1], event?.x - cardCentre[0]) * 180) / Math.PI;
+    angle = angle < 0 ? angle + 360 : angle;
+    cardElem.style.setProperty('--start', String(angle + 90));
   }
 };
 
-const RESTYLE = () => {
-  containerGlowWrapper.value?.style.setProperty('--gap', String(CONFIG.gap));
-  containerGlowWrapper.value?.style.setProperty('--blur', String(CONFIG.blur));
-  containerGlowWrapper.value?.style.setProperty('--spread', String(CONFIG.spread));
-  containerGlowWrapper.value?.style.setProperty('--direction', CONFIG.vertical ? 'column' : 'row');
+const applyStyles = () => {
+  containerGlowWrapper.value?.style.setProperty('--gap', String(props.config.gap));
+  containerGlowWrapper.value?.style.setProperty('--blur', String(props.config.blur));
+  containerGlowWrapper.value?.style.setProperty('--spread', String(props.config.spread));
+  containerGlowWrapper.value?.style.setProperty('--direction', props.config.vertical ? 'column' : 'row');
 };
 
-// document.body.addEventListener('pointermove', UPDATE);
+// document.body.addEventListener('pointermove', updateStyles);
 
 onMounted(() => {
-  RESTYLE();
+  applyStyles();
   if (containerGlowWrapper.value) {
-    document.body.addEventListener('pointermove', UPDATE, {
+    document.body.addEventListener('pointermove', updateStyles, {
       signal: controller.signal,
     });
   }
@@ -97,21 +99,6 @@ onBeforeUnmount(() => {
 
 <style lang="css">
 .container-glow-wrapper {
-  --container-bg-colour: light-dark(hsl(250, 18%, 93%), hsl(246 44% 7%));
-  --container-border-colour: hsl(280 10% 50% / 1);
-  --card: light-dark(white, hsl(246 44% 7%));
-  --container-border-width: 2px;
-  --container-border-radius: 12px;
-  --gradient: conic-gradient(
-    from 180deg at 50% 70%,
-    hsla(0, 0%, 98%, 1) 0deg,
-    #eec32d 72.0000010728836deg,
-    #ec4b4b 144.0000021457672deg,
-    #709ab9 216.00000858306885deg,
-    #4dffbf 288.0000042915344deg,
-    hsla(0, 0%, 98%, 1) 1turn
-  );
-
   @property --start {
     syntax: '<number>';
     inherits: true;
@@ -128,55 +115,68 @@ onBeforeUnmount(() => {
       box-sizing: border-box;
     }
 
-    --active: 0.15;
+    --gradient: conic-gradient(
+      from 180deg at 50% 70%,
+      hsla(0, 0%, 98%, 1) 0deg,
+      #eec32d 72.0000010728836deg,
+      #ec4b4b 144.0000021457672deg,
+      #709ab9 216.00000858306885deg,
+      #4dffbf 288.0000042915344deg,
+      hsla(0, 0%, 98%, 1) 1turn
+    );
+    --opacity-active: 0.15;
     --start: 0;
+
+    position: relative;
+
     height: 100%;
-    background: var(--card);
+    background: light-dark(white, hsl(246 44% 7%));
     padding: 2rem;
     aspect-ratio: 330 / 400;
-    border-radius: var(--container-border-radius);
+    border-radius: 12px;
     min-width: 280px;
     max-width: 280px;
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
-    position: relative;
 
     &:is(:hover, :focus-visible) {
       z-index: 2;
     }
 
-    &::before {
+    &::before,
+    &::after {
+      content: '';
       position: absolute;
       inset: 0;
-      border: var(--container-border-width) solid transparent;
-      content: '';
-      border-radius: var(--container-border-radius);
+    }
+
+    &::before {
       pointer-events: none;
-      background: var(--container-border-colour);
+
+      border: 2px solid transparent;
+      border-radius: 12px;
+      background: hsl(280 10% 50% / 1);
       background-attachment: fixed;
-      border-radius: var(--container-border-radius);
+      border-radius: 12px;
       mask: linear-gradient(#0000, #0000),
         conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg), hsl(0 0% 100% / 0.15) 0deg, white, hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg));
       mask-clip: padding-box, border-box;
       mask-composite: intersect;
-      opacity: var(--active);
+      opacity: var(--opacity-active);
       transition: opacity 1s;
     }
 
     &::after {
-      /* --container-bg-colour-size: 100%; */
-      content: '';
       pointer-events: none;
-      position: absolute;
+
       background: var(--gradient);
       background-attachment: fixed;
-      border-radius: var(--container-border-radius);
-      opacity: var(--active, 0);
+      border-radius: 12px;
+      opacity: var(--opacity-active, 0);
       transition: opacity 1s;
       --alpha: 0;
-      inset: 0;
-      border: var(--container-border-width) solid transparent;
+      border: 2px solid transparent;
       mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
       filter: brightness(1.5);
       mask-clip: padding-box, border-box;
@@ -198,11 +198,11 @@ onBeforeUnmount(() => {
         position: absolute;
         inset: -5px;
         border: 10px solid transparent;
-        border-radius: var(--container-border-radius);
+        border-radius: 12px;
         mask: linear-gradient(#0000, #0000), conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));
         mask-composite: intersect;
         mask-clip: padding-box, border-box;
-        opacity: var(--active);
+        opacity: var(--opacity-active);
         transition: opacity 1s;
       }
     }

package/components/content-grid/ContentGrid.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="ui-content-grid" :class="[applyClasses]" :data-testid="dataTestid">
+    <div v-if="hasSlot1" class="col-1">
+      <slot name="slot1"></slot>
+    </div>
+    <div v-if="hasSlot2" class="col-2">
+      <slot name="slot2"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'ui-content-grid',
+  },
+  applyClasses: {
+    type: String,
+    default: '',
+  },
+});
+
+const slots = useSlots();
+const hasSlot1 = ref(slots.slot1 !== undefined);
+const hasSlot2 = ref(slots.slot2 !== undefined);
+</script>
+
+<style lang="css">
+.ui-content-grid {
+  --_margin-inline: 0;
+  --_grid-template-columns: repeat(4, 1fr);
+  --_grid-template-rows: repeat(2, auto);
+  --_grid-gap: 1.6rem;
+
+  display: grid;
+  gap: var(--_grid-gap);
+  grid-template-columns: var(--_grid-template-columns);
+  grid-template-rows: var(--_grid-template-rows);
+  margin-inline: var(--_margin-inline);
+
+  @container content (min-width: 768px) {
+    --_margin-inline: 0;
+    --_grid-template-columns: repeat(6, 1fr);
+    --_grid-gap: 3.2rem;
+  }
+
+  @container content (min-width: 1024px) {
+    --_margin-inline: 0;
+    --_grid-template-columns: repeat(12, 1fr);
+    --_grid-template-rows: initial;
+  }
+
+  .col-1 {
+    --_grid-column: 1 / span 4;
+    --_grid-row: 1;
+    grid-column: var(--_grid-column);
+    grid-row: var(--_grid-row);
+
+    @container content (min-width: 768px) {
+      --_grid-column: 1 / span 6;
+    }
+
+    @container content (min-width: 1024px) {
+      --_grid-column: 1 / span 6;
+    }
+  }
+
+  .col-2 {
+    --_grid-column: 1 / span 4;
+    --_grid-row: 2;
+    grid-column: var(--_grid-column);
+    grid-row: var(--_grid-row);
+
+    @container content (min-width: 768px) {
+      --_grid-column: 1 / span 6;
+    }
+
+    @container content (min-width: 1024px) {
+      --_grid-column: 7 / span 6;
+      --_grid-row: 1;
+    }
+  }
+}
+</style>

package/components/display-details/DisplayDetailsCore.vue

@@ -18,7 +18,13 @@
 // Create a global store to track open details elements by name
 const openDetailsByName = reactive(new Map<string, HTMLDetailsElement>());
 
-export const useDetailsTransition = (detailsRef: Ref<HTMLDetailsElement | null>, summaryRef: Ref<HTMLElement | null>, contentRef: Ref<HTMLDivElement | null>, name: string, animationDuration: number) => {
+export const useDetailsTransition = (
+  detailsRef: Ref<HTMLDetailsElement | null>,
+  summaryRef: Ref<HTMLElement | null>,
+  contentRef: Ref<HTMLDivElement | null>,
+  name: string,
+  animationDuration: number
+) => {
   // State
   const animation = ref<Animation | null>(null);
   const isClosing = ref(false);
@@ -101,7 +107,7 @@ export const useDetailsTransition = (detailsRef: Ref<HTMLDetailsElement | null>,
         },
         {
           duration: animationDuration,
-          easing: 'ease-out',
+          easing: 'linear',
         }
       );
 
@@ -140,7 +146,7 @@ export const useDetailsTransition = (detailsRef: Ref<HTMLDetailsElement | null>,
         },
         {
           duration: animationDuration,
-          easing: 'ease-out',
+          easing: 'linear',
         }
       );
 
@@ -237,76 +243,59 @@ onMounted(() => {
 </script>
 
 <style lang="css">
-  .display-details {
-    /* Component setup */
-    --_display-details-icon-transform: scaleY(1);
-    --_display-details-icon-size: 1.2rem;
+.display-details {
+  border: none;
+  outline: none;
+  box-shadow: none;
+  border-radius: 0;
 
-    /* Configurable properties */
-    --_display-details-border: none;
-    --_display-details-outline: none;
-    --_display-details-box-shadow: none;
-    --_display-details-border-radius: 0;
-    --_display-details-mbe: 1em;
-
-    --_display-details-summary-gap: 12px;
-    --_display-details-summary-flex-direction: row;
-
-    --_display-details-content-padding: 0;
-
-    &.medium {
-      --_display-details-icon-size: 1.8rem;
-    }
-    &.large {
-      --_display-details-icon-size: 2.4rem;
+  &[open] {
+    .display-details-summary {
+      .icon {
+        transform: scaleY(-1);
+      }
     }
+  }
 
-    &[open] {
-      --_display-details-icon-transform: scaleY(-1);
-    }
+  .display-details-summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row;
+    gap: 0;
 
-    border: var(--_display-details-border);
-    outline: var(--_display-details-outline);
-    box-shadow: var(--_display-details-box-shadow);
-    border-radius: var(--_display-details-border-radius);
-    margin-block-end: var(--_display-details-mbe);
+    list-style: none;
 
-    .display-details-summary {
+    &::-webkit-details-marker,
+    &::marker {
+      display: none;
+    }
 
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+    overflow: clip;
 
-      list-style: none;
+    .label {
+      display: block;
+      flex-grow: 1;
+    }
 
-      &::-webkit-details-marker,
-      &::marker {
-        display: none;
-      }
+    .icon {
+      display: block;
 
-      display: flex !important;
-      flex-direction: var(--_display-details-summary-flex-direction);
-      align-items: center;
-      gap: var(--_display-details-summary-gap);
-      overflow: clip;
+      transform: scaleY(1);
+      transition: transform 200ms;
 
-      .label {
-        display: block;
-        flex-grow: 1;
+      font-size: 1.2rem;
+      &.medium {
+        font-size: 1.8rem;
       }
-
-      .icon {
-        display: block;
-
-        font-size: var(--_display-details-icon-size);
-        transform: var(--_display-details-icon-transform);
-        transition: transform 200ms;
+      &.large {
+        font-size: 2.4rem;
       }
     }
-
-    .display-details-content {
-      padding: var(--_display-details-content-padding);
-    }
   }
 
+  .display-details-content {
+    /* Use an inner element for styling */
+  }
+}
 </style>