srcdev-nuxt-components 4.0.5 → 5.0.0

package/assets/styles/variables/components/_container-glow-core.css

@@ -1,16 +0,0 @@
-.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,
-    #fc0303 144.0000021457672deg,
-    #709ab9 216.00000858306885deg,
-    #4dffbf 288.0000042915344deg,
-    hsla(0, 0%, 98%, 1) 1turn
-  );
-}

package/assets/styles/variables/components/_display-dialog-core.css

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

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

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

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

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

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

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

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

@@ -1,39 +0,0 @@
-[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/index.css

@@ -1,5 +0,0 @@
-@import './_accordian';
-@import './_tabs';
-@import './display-prompt-core';
-@import './_display-dialog-core';
-@import './_container-glow-core.css';

package/assets/styles/variables/index.css

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

package/components/functional/accordian/AccordianCore.vue

@@ -1,138 +0,0 @@
-<template>
-  <div class="display-accordian" :class="[elementClasses]" ref="accordianRef">
-    <details v-for="(item, key) in data" :key="key" class="accordion-panel" :name="accordianName">
-      <summary class="accordion-trigger" :id="`accordian-${key}-trigger`" :aria-controls="`accordian-${key}-content`">
-        <span class="label">
-          <slot :name="`accordian-${key}-trigger`"></slot>
-        </span>
-        <Icon name="bi:caret-down-fill" class="icon mi-12" />
-      </summary>
-      <div class="accordion-content" :aria-labelledby="`accordian-${key}-trigger`" :id="`accordian-${key}-content`" role="region">
-        <div class="accordion-content-inner">
-          <slot :name="`accordian-${key}-content`"></slot>
-        </div>
-      </div>
-    </details>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface IAccordianData {
-  title: string;
-  content: string;
-}
-
-const props = defineProps({
-  data: {
-    type: Array as PropType<IAccordianData[]>,
-    default: () => [],
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-const accordianName = useId();
-</script>
-
-<style lang="css">
-.display-accordian {
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.accordion-panel {
-  @property --_grid-template-rows {
-    syntax: '<length-percentage> | auto | min-content | max-content | minmax( <length-percentage> , <length-percentage> ) | fit-content( <length-percentage> ) | <flex>';
-    inherits: true;
-    initial-value: 0fr;
-  }
-
-  @property --_accordian-content-transform {
-    syntax: '<transform-list>';
-    inherits: true;
-    initial-value: scaleY(0);
-  }
-
-  --_grid-template-rows: 0fr;
-  --_details-content-height: 0px;
-  --_icon-transform: scaleY(1);
-  --_accordian-content-transform: scaleY(0);
-
-  border: var(--accordian-panel-border);
-  border-radius: var(--accordian-panel-border-radius);
-  margin-block-end: var(--accordian-panel-mbe);
-
-  summary::-webkit-details-marker,
-  summary::marker {
-    display: none;
-  }
-
-  .accordion-trigger {
-    display: flex !important;
-    align-items: center;
-    gap: 12px;
-    list-style: none;
-    padding: 1rem;
-
-    .label {
-      display: block;
-      flex-grow: 1;
-    }
-
-    .icon {
-      display: block;
-      font-size: 1.2rem;
-
-      transform: var(--_icon-transform);
-      transition: transform 200ms;
-    }
-  }
-
-  .accordion-content {
-    /* display: block; */
-    /* display: grid; */
-    /* grid-template-rows: 0fr; */
-    /* grid-template-rows: var(--_grid-template-rows); */
-
-    /* transform: var(--_accordian-content-transform); */
-    /* transform: scaleY(0); */
-    /* transform-origin: top; */
-    /* transition: all 2000ms; */
-
-    .accordion-content-inner {
-      background-color: red;
-
-      overflow: clip;
-      height: var(--_details-content-height);
-      transition: all 2000ms;
-      transition-behavior: allow-discrete;
-
-      @starting-style {
-        height: 0;
-      }
-    }
-  }
-
-  &[open] {
-    --_grid-template-rows: 1fr;
-    --_details-content-height: calc-size(auto, size);
-
-    --_icon-transform: scaleY(-1);
-    --_accordian-content-transform: scaleY(1);
-
-    .accordion-content {
-      /* transform: scaleY(1); */
-      /* grid-template-rows: unset; */
-      grid-template-rows: 1fr;
-
-      .accordion-content-inner {
-        /* grid-template-rows: 1fr; */
-        /* transform: scaleY(1); */
-      }
-    }
-  }
-}
-</style>

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>