srcdev-nuxt-components 3.0.0 → 4.0.1

package/components/masonry-grid-ordered/MasonryGridOrdered.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="masonry-grid-ordered" :class="[elementClasses]">
+    <div class="masonry-grid-ordered-wrapper" ref="gridWrapper">
+      <div v-for="item in gridData" :key="item.id" class="masonry-grid-ordered-item" ref="gridItemsRefs">
+        <slot :name="item.id"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBreakpoints, useElementSize, useResizeObserver } from '@vueuse/core';
+
+const props = defineProps({
+  gridData: {
+    type: Object,
+    default: {},
+  },
+  minTileWidth: {
+    type: Number,
+    default: 312,
+  },
+  gap: {
+    type: Number,
+    default: 12,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  mobilePreferredColCount: {
+    type: Number,
+    default: 1,
+  },
+  fixedWidth: {
+    type: Boolean,
+    default: false,
+  },
+  justify: {
+    type: String as PropType<String>,
+    default: 'left',
+    validator: (val: string) => ['left', 'center', 'right'].includes(val),
+  },
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const gridData = toRef(() => props.gridData);
+
+const minTileWidth = toRef(() => props.minTileWidth);
+const gridWrapper = ref<null | HTMLDivElement>(null);
+const gridItemsRefs = ref<HTMLDivElement[]>([]);
+const { width } = useElementSize(gridWrapper);
+const columnCount = computed(() => {
+  return Math.floor(width.value / minTileWidth.value);
+});
+
+const gapNum = toRef(props.gap);
+const gapStr = toRef(props.gap + 'px');
+
+const fixedWidth = toRef(() => props.fixedWidth);
+const minTileWidthStr = toRef(props.minTileWidth + 'px');
+const maxTileWidth = computed(() => {
+  return fixedWidth.value ? minTileWidth.value + 'px' : '1fr';
+});
+
+const justify = computed(() => {
+  return fixedWidth.value ? props.justify : 'stretch';
+});
+
+const updateGrid = () => {
+  if (gridWrapper.value !== null) {
+    const wrapperWidth = gridWrapper.value?.offsetWidth ?? 0;
+    const itemWidth = fixedWidth.value ? minTileWidth.value : Math.floor((wrapperWidth - (columnCount.value - 1) * gapNum.value) / columnCount.value);
+
+    const colHeights = Array(columnCount.value).fill(0);
+
+    gridItemsRefs.value.forEach((item) => {
+      const minHeight = Math.min(...colHeights);
+      const minIndex = colHeights.indexOf(minHeight);
+
+      item?.style.setProperty('--_position', 'absolute');
+      item?.style.setProperty('--_position-top', minHeight + 'px');
+      item?.style.setProperty('--_position-left', minIndex * (100 / columnCount.value) + '%');
+      item?.style.setProperty('--_element-width', itemWidth + 'px');
+
+      colHeights[minIndex] += Math.floor(item.offsetHeight + gapNum.value);
+    });
+
+    const maxHeight = Math.max(...colHeights);
+    gridWrapper.value?.style.setProperty('--_wrapper-height', maxHeight + 'px');
+  }
+};
+
+useResizeObserver(gridWrapper, () => {
+  updateGrid();
+});
+
+watch(
+  () => fixedWidth.value,
+  () => {
+    updateGrid();
+  }
+);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style scoped lang="css">
+.masonry-grid-ordered {
+  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
+  --_transition-duration: 0.3s;
+
+  container-type: inline-size;
+  position: relative;
+
+  transition: max-width var(--_transition-duration) ease;
+
+  .masonry-grid-ordered-wrapper {
+    display: grid;
+    justify-self: v-bind(justify);
+    grid-gap: v-bind(gapStr);
+    grid-template-columns: repeat(1, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
+    position: relative;
+
+    height: var(--_wrapper-height);
+
+    @container (min-width: 768px) {
+      grid-template-columns: repeat(2, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
+    }
+
+    @container (min-width: 1024px) {
+      grid-template-columns: repeat(3, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
+    }
+    @container (min-width: 1280px) {
+      grid-template-columns: repeat(4, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
+    }
+
+    .masonry-grid-ordered-item {
+      transition: position var(--_transition-duration) ease, top var(--_transition-duration) ease, left var(--_transition-duration) ease;
+
+      position: var(--_position);
+      top: var(--_position-top);
+      left: var(--_position-left);
+      width: var(--_element-width);
+
+      outline: 0.1rem solid var(--_border-color);
+      padding: 1.2rem;
+      border-radius: 4px;
+    }
+  }
+}
+</style>

package/components/presentation/container-glow/ContainerGlowCore.vue

@@ -0,0 +1,211 @@
+<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>
+</template>
+
+<script setup lang="ts">
+interface Data {
+  title: string;
+  content: string;
+}
+
+const props = defineProps({
+  data: {
+    type: Array as PropType<Data[]>,
+    default: () => [],
+  },
+  tag: {
+    type: String as PropType<string>,
+    default: 'div',
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+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) => {
+  // get the angle based on the center point of the card and pointer position
+  for (const CARD of containerGlowItem.value) {
+    // Check the card against the proximity and then start updating
+    const CARD_BOUNDS = CARD.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
+    ) {
+      // If within proximity set the active opacity
+      CARD.style.setProperty('--active', String(1));
+    } else {
+      CARD.style.setProperty('--active', String(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 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');
+};
+
+// document.body.addEventListener('pointermove', UPDATE);
+
+onMounted(() => {
+  RESTYLE();
+  if (containerGlowWrapper.value) {
+    document.body.addEventListener('pointermove', UPDATE, {
+      signal: controller.signal,
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  return controller.abort();
+});
+</script>
+
+<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;
+    initial-value: 0;
+  }
+
+  display: flex;
+  gap: 3.2rem;
+
+  .container-glow-core {
+    & *,
+    & *:after,
+    & *:before {
+      box-sizing: border-box;
+    }
+
+    --active: 0.15;
+    --start: 0;
+    height: 100%;
+    background: var(--card);
+    padding: 2rem;
+    aspect-ratio: 330 / 400;
+    border-radius: var(--container-border-radius);
+    min-width: 280px;
+    max-width: 280px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    position: relative;
+
+    &:is(:hover, :focus-visible) {
+      z-index: 2;
+    }
+
+    &::before {
+      position: absolute;
+      inset: 0;
+      border: var(--container-border-width) solid transparent;
+      content: '';
+      border-radius: var(--container-border-radius);
+      pointer-events: none;
+      background: var(--container-border-colour);
+      background-attachment: fixed;
+      border-radius: var(--container-border-radius);
+      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);
+      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);
+      transition: opacity 1s;
+      --alpha: 0;
+      inset: 0;
+      border: var(--container-border-width) 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;
+      mask-composite: intersect;
+    }
+
+    .glows {
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+      filter: blur(calc(var(--blur) * 1px));
+
+      &::after,
+      &::before {
+        --alpha: 0;
+        content: '';
+        background: var(--gradient);
+        background-attachment: fixed;
+        position: absolute;
+        inset: -5px;
+        border: 10px solid transparent;
+        border-radius: var(--container-border-radius);
+        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);
+        transition: opacity 1s;
+      }
+    }
+  }
+}
+</style>

package/components/presentation/display-grid/DisplayGridCore.vue

@@ -0,0 +1,22 @@
+<template>
+  <div :class="[elementClasses]">
+    <slot v-for="item in gridData" :key="item.id" :name="item.id"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  gridData: {
+    type: Object,
+    default: {},
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const gridData = toRef(() => props.gridData);
+</script>

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

@@ -0,0 +1,150 @@
+<template>
+  <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>
+      </div>
+      <div class="display-prompt-content">
+        <p class="title" data-test-id="display-prompt-title">
+          <slot name="title"></slot>
+        </p>
+        <p v-if="hasContent" class="text" data-test-id="display-prompt-content">
+          <slot name="content"></slot>
+        </p>
+      </div>
+      <button v-if="dismissible" @click.prevent="dismissPrompt()" data-test-id="display-prompt-action" class="display-prompt-action">
+        <Icon name="bitcoin-icons:cross-filled" class="icon" />
+        <span class="sr-only">Really Close</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  dismissible: {
+    type: Boolean,
+    default: false,
+  },
+  theme: {
+    type: String,
+    default: 'error',
+    validator(value: string) {
+      return ['error', 'info', 'success', 'warning', 'secondary'].includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  iconColor: {
+    type: String as PropType<string>,
+    default: 'dark-grey',
+    validator(value: string) {
+      return ['dark-grey', 'white'].includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasContent = ref(slots.content !== undefined);
+const hide = ref(false);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const dismissPrompt = () => {
+  // styleClassPassthrough.value = '';
+  hide.value = true;
+};
+</script>
+
+<style lang="css">
+.display-prompt-wrapper {
+  background-color: var(--display-prompt-wrapper-background-color);
+  border-radius: var(--display-prompt-wrapper-border-radius);
+  border: var(--display-prompt-wrapper-border);
+  outline: var(--display-prompt-wrapper-outline);
+  overflow: hidden;
+  transition: height 200ms, opacity 200ms, display 200ms;
+  transition-behavior: allow-discrete;
+
+  &.dismissed {
+    opacity: 0;
+    height: 0;
+    display: none;
+  }
+
+  .display-prompt-inner {
+    background-color: var(--display-prompt-inner-background-color);
+    align-items: center;
+    border-radius: var(--display-prompt-inner-border-radius);
+    display: flex;
+    gap: var(--display-prompt-inner-gap);
+    justify-content: space-between;
+    padding: var(--display-prompt-inner-padding);
+    margin: var(--display-prompt-inner-margin);
+
+    .display-prompt-icon {
+      display: inline-flex;
+      .icon {
+        color: var(--display-prompt-icon-color);
+        display: inline-block;
+        font-size: var(--display-prompt-icon-size);
+        font-style: normal;
+        font-weight: var(--display-prompt-icon-weight);
+        overflow: hidden;
+      }
+    }
+
+    .display-prompt-content {
+      display: block flex;
+      flex-direction: column;
+      flex-grow: 1;
+      gap: var(--display-prompt-inner-content-gap);
+      margin: var(--display-prompt-content-margin);
+      padding: var(--display-prompt-content-padding);
+
+      .title {
+        font-size: var(--display-prompt-content-title-font-size);
+        font-weight: var(--display-prompt-content-title-font-weight);
+        line-height: var(--display-prompt-content-title-line-height);
+        color: var(--display-prompt-content-title-color);
+        margin: var(--display-prompt-content-title-margin);
+        padding: var(--display-prompt-content-title-padding);
+      }
+
+      .text {
+        font-size: var(--display-prompt-content-text-font-size);
+        font-weight: var(--display-prompt-content-text-font-weight);
+        line-height: var(--display-prompt-content-text-line-height);
+        color: var(--display-prompt-content-text-color);
+        margin: var(--display-prompt-content-text-margin);
+        padding: var(--display-prompt-content-text-padding);
+      }
+    }
+    .display-prompt-action {
+      /* all: unset; */
+      background-color: transparent;
+      display: block flex;
+      align-items: center;
+      justify-content: center;
+      margin: var(--display-prompt-button-margin);
+      padding: var(--display-prompt-button-padding);
+      border: var(--display-prompt-button-border);
+      border-radius: var(--display-prompt-button-border-radius);
+      outline: var(--display-prompt-button-outline);
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      .icon {
+        color: var(--display-prompt-button-icon-color);
+        display: block;
+        font-size: var(--display-prompt-button-icon-font-size);
+        border: 1px solid green;
+        padding: 1rem;
+      }
+    }
+  }
+}
+</style>

package/components/presentation/display-prompt/variants/DisplayPromptError.vue

@@ -0,0 +1,53 @@
+<template>
+  <DisplayPromptCore variant="error" :dismissible icon-color="white" :style-class-passthrough>
+    <template #icon>
+      <Icon name="akar-icons:circle-alert" class="icon" />
+    </template>
+    <template #title>
+      <slot name="title"></slot>
+    </template>
+    <template v-if="hasContent" #content>
+      <slot name="content"></slot>
+    </template>
+  </DisplayPromptCore>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  dismissible: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const slots = useSlots();
+const hasContent = ref(slots.content !== undefined);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+.display-prompt.error {
+  --bg-color: var(--red-2);
+  --text-color: var(--gray-00);
+}
+
+.display-prompt {
+  &.error {
+    background-color: var(--bg-color);
+  }
+
+  &-icon {
+    .icon {
+      color: var(--text-color);
+    }
+  }
+
+  &-content {
+    color: var(--text-color);
+  }
+}
+</style>

package/components/presentation/layout-grids/LayoutGridA.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="layout-grid-a-wrapper" :class="[elementClasses]">
+    <div class="layout-grid-a">
+      <div class="slot1">
+        <slot name="slot1"></slot>
+      </div>
+      <div class="slot2">
+        <slot name="slot2"></slot>
+      </div>
+      <div class="slot3">
+        <slot name="slot3"></slot>
+      </div>
+      <div class="slot4">
+        <slot name="slot4"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+.layout-grid-a-wrapper {
+  container-type: inline-size;
+
+  .layout-grid-a {
+    display: grid;
+    gap: 20px;
+
+    & > div {
+      padding: 20px;
+      outline: 1px solid light-dark(black, white);
+      border-radius: 5px;
+    }
+
+    @container (min-width: 768px) {
+      grid-template-columns: repeat(2, auto);
+      grid-template-rows: repeat(3, auto);
+
+      .slot1 {
+        grid-column: 1 / span 2;
+        grid-row: 1;
+      }
+
+      .slot2 {
+        grid-column: 1 / span 2;
+        grid-row: 2;
+      }
+
+      .slot3 {
+        grid-column: 1;
+        grid-row: 3;
+      }
+
+      .slot4 {
+        grid-column: 2;
+        grid-row: 3;
+      }
+    }
+
+    @container (min-width: 1060px) {
+      grid-template-columns: repeat(3, auto);
+      grid-template-rows: repeat(2, auto);
+
+      .slot1 {
+        grid-column: 1;
+        grid-row: 1 / span 2;
+      }
+
+      .slot2 {
+        grid-column: 2 / span 2;
+        grid-row: 1;
+      }
+
+      .slot3 {
+        grid-column: 2;
+        grid-row: 2;
+      }
+
+      .slot4 {
+        grid-column: 3;
+        grid-row: 2;
+      }
+    }
+  }
+}
+</style>