srcdev-nuxt-components 2.5.18 → 3.0.0

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

@@ -1,158 +0,0 @@
-<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

@@ -1,211 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-<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

@@ -1,150 +0,0 @@
-<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

@@ -1,53 +0,0 @@
-<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

@@ -1,103 +0,0 @@
-<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>