srcdev-nuxt-components 2.5.17 → 3.0.0

package/components/display-details/DisplayDetailsCore.vue

@@ -1,312 +0,0 @@
-<template>
-  <details @click.prevent="handleClick()" :name="name" class="display-details" :class="[elementClasses]" ref="detailsRef">
-    <summary class="display-details-summary" :id="triggerId" :aria-controls="contentId" ref="summaryRef">
-      <span class="label">
-        <slot name="summary"></slot>
-      </span>
-      <slot name="summaryIcon">
-        <Icon name="bi:caret-down-fill" class="icon mi-12" :class="iconSize" />
-      </slot>
-    </summary>
-    <div class="display-details-content" :aria-labelledby="triggerId" :id="contentId" role="region" ref="contentRef">
-      <slot name="content"></slot>
-    </div>
-  </details>
-</template>
-
-<script lang="ts">
-// 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) => {
-  // State
-  const animation = ref<Animation | null>(null);
-  const isClosing = ref(false);
-  const isExpanding = ref(false);
-
-  // Check if refs are available
-  if (!detailsRef.value || !summaryRef.value || !contentRef.value) {
-    console.warn('Details, summary, or content ref is null');
-    return {
-      clickAction: () => console.warn('Component not fully initialized'),
-    };
-  }
-
-  const closeOtherDetailsWithSameName = () => {
-    const currentDetails = detailsRef.value;
-    if (!currentDetails || !name) return;
-
-    // Get the currently open details with the same name
-    const openDetails = openDetailsByName.get(name);
-
-    // If there's an open details with the same name and it's not the current one, close it
-    if (openDetails && openDetails !== currentDetails && openDetails.open) {
-      // Simulate a click on the other details to close it with animation
-      const otherSummary = openDetails.querySelector('summary');
-      if (otherSummary) {
-        otherSummary.click();
-      } else {
-        // Fallback: close directly without animation
-        openDetails.open = false;
-      }
-    }
-
-    // Update the map with the current details if it's open
-    if (currentDetails.open) {
-      openDetailsByName.set(name, currentDetails);
-    } else {
-      // If it's closed and was the one in the map, remove it
-      if (openDetailsByName.get(name) === currentDetails) {
-        openDetailsByName.delete(name);
-      }
-    }
-  };
-
-  const clickAction = () => {
-    const details = detailsRef.value;
-    const summary = summaryRef.value;
-    const content = contentRef.value;
-
-    if (!details || !summary || !content) return;
-
-    // Add overflow hidden to avoid content jumping
-    details.style.overflow = 'hidden';
-
-    if (isClosing.value || !details.open) {
-      // Close other details with the same name first
-      closeOtherDetailsWithSameName();
-
-      // Open the details
-      details.open = true;
-      isExpanding.value = true;
-      isClosing.value = false;
-
-      // Get the height of the content
-      const detailsHeight = details.offsetHeight;
-      const contentHeight = content.offsetHeight;
-      const summaryHeight = summary.offsetHeight;
-
-      const startHeight = `${detailsHeight - contentHeight}px`;
-      const endHeight = `${summaryHeight + contentHeight}px`;
-
-      // If there's an animation running, cancel it
-      if (animation.value) {
-        animation.value.cancel();
-      }
-
-      // Start animation
-      animation.value = details.animate(
-        {
-          height: [startHeight, endHeight],
-        },
-        {
-          duration: animationDuration,
-          easing: 'ease-out',
-        }
-      );
-
-      animation.value.onfinish = () => {
-        // Animation finished - reset everything
-        details.style.height = 'auto';
-        details.style.overflow = '';
-        isExpanding.value = false;
-        animation.value = null;
-
-        // Register this as the open details for this name
-        openDetailsByName.set(name, details);
-      };
-
-      animation.value.oncancel = () => {
-        isExpanding.value = false;
-      };
-    } else if (isExpanding.value || details.open) {
-      // Close the details
-      isClosing.value = true;
-      isExpanding.value = false;
-
-      // Get the height of the content
-      const startHeight = `${details.offsetHeight}px`;
-      const endHeight = `${details.offsetHeight - content.offsetHeight}px`;
-
-      // If there's an animation running, cancel it
-      if (animation.value) {
-        animation.value.cancel();
-      }
-
-      // Start animation
-      animation.value = details.animate(
-        {
-          height: [startHeight, endHeight],
-        },
-        {
-          duration: animationDuration,
-          easing: 'ease-out',
-        }
-      );
-
-      animation.value.onfinish = () => {
-        // Animation finished - reset everything
-        details.open = false;
-        details.style.height = 'auto';
-        details.style.overflow = '';
-        isClosing.value = false;
-        animation.value = null;
-
-        // Remove this from the open details map if it's there
-        if (openDetailsByName.get(name) === details) {
-          openDetailsByName.delete(name);
-        }
-      };
-
-      animation.value.oncancel = () => {
-        isClosing.value = false;
-      };
-    }
-  };
-
-  return {
-    clickAction,
-    isClosing,
-    isExpanding,
-  };
-};
-</script>
-
-<script setup lang="ts">
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  id: {
-    type: String,
-    required: true,
-  },
-  animationDuration: {
-    type: Number,
-    default: 400,
-  },
-  iconSize: {
-    type: String,
-    default: 'small',
-    validator(value: string) {
-      return ['small', 'medium', 'large'].includes(value);
-    },
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-
-const triggerId = computed(() => `${props.id}-trigger`);
-const contentId = computed(() => `${props.id}-content`);
-
-const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-updateElementClasses([props.iconSize]);
-
-const detailsRef = ref<HTMLDetailsElement | null>(null);
-const summaryRef = ref<HTMLElement | null>(null);
-const contentRef = ref<HTMLDivElement | null>(null);
-
-// Initialize with dummy function that will be replaced when refs are available
-let clickAction = () => console.warn('Component not fully initialized');
-
-// Handle click with the current clickAction function
-const handleClick = () => {
-  clickAction();
-};
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-
-onMounted(() => {
-  // Initialize the composable once the component is mounted and refs are available
-  if (detailsRef.value && contentRef.value && summaryRef.value) {
-    const details = useDetailsTransition(detailsRef, summaryRef, contentRef, props.name, props.animationDuration);
-    clickAction = details.clickAction; // Assign the real click handler
-  } else {
-    console.error('Refs not available after mounting');
-  }
-});
-</script>
-
-<style lang="css">
-  .display-details {
-    /* Component setup */
-    --_display-details-icon-transform: scaleY(1);
-    --_display-details-icon-size: 1.2rem;
-
-    /* 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-icon-transform: scaleY(-1);
-    }
-
-    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);
-
-    .display-details-summary {
-
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      list-style: none;
-
-      &::-webkit-details-marker,
-      &::marker {
-        display: none;
-      }
-
-      display: flex !important;
-      flex-direction: var(--_display-details-summary-flex-direction);
-      align-items: center;
-      gap: var(--_display-details-summary-gap);
-      overflow: clip;
-
-      .label {
-        display: block;
-        flex-grow: 1;
-      }
-
-      .icon {
-        display: block;
-
-        font-size: var(--_display-details-icon-size);
-        transform: var(--_display-details-icon-transform);
-        transition: transform 200ms;
-      }
-    }
-
-    .display-details-content {
-      padding: var(--_display-details-content-padding);
-    }
-  }
-
-</style>

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/functional/display-dialog/DisplayDialogCore.vue

@@ -1,244 +0,0 @@
-<template>
-  <dialog class="display-dialog-core" :class="[variant, elementClasses]" role="dialog" :align-dialog :open :data-dialog-id="dataDialogId" ref="dialogRef">
-    <focus-trap v-model:active="open" :clickOutsideDeactivates="true" @deactivate="closeDialog()">
-      <div class="inner">
-        <div class="header">
-          <div v-if="hasDialogTitle" class="col-left">
-            <slot name="dialogTitle"></slot>
-          </div>
-
-          <div class="col-center">
-            <p class="text-normal wght-700">Center col</p>
-          </div>
-          <div class="col-right">
-            <button @click.prevent="closeDialog()" data-test-id="display-dialog-header-close" class="display-prompt-action">
-              <Icon name="bitcoin-icons:cross-filled" class="icon" />
-              <span class="sr-only">Really Close</span>
-            </button>
-          </div>
-        </div>
-        <div v-if="hasDialogContent" class="dialog-content" :class="[{ 'allow-content-scroll': allowContentScroll }]">
-          <slot name="dialogContent"></slot>
-        </div>
-        <div v-if="hasActionButtons" class="footer">
-          <slot name="actionButtons"></slot>
-        </div>
-      </div>
-    </focus-trap>
-  </dialog>
-</template>
-
-<script setup lang="ts">
-import { FocusTrap } from 'focus-trap-vue';
-const props = defineProps({
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-  variant: {
-    type: String,
-    default: 'dialog',
-    validator: (val) => ['dialog', 'modal', 'confirm'].includes(val as string),
-  },
-  positionX: {
-    type: String,
-    default: 'center',
-    validator: (val) => ['left', 'center', 'right'].includes(val as string),
-  },
-  positionY: {
-    type: String,
-    default: 'center',
-    validator: (val) => ['top', 'center', 'bottom'].includes(val as string),
-  },
-  lockViewport: {
-    type: Boolean,
-    default: true,
-  },
-  allowContentScroll: {
-    type: Boolean,
-    default: false,
-  },
-  dataDialogId: {
-    type: String,
-    required: true,
-  },
-});
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const open = defineModel<boolean>();
-const bodyTag = ref<HTMLBodyElement | null>(null);
-const lockViewport = toRef<boolean>(props.lockViewport);
-
-const closeDialog = () => {
-  open.value = false;
-
-  if (lockViewport.value && bodyTag.value !== null) {
-    bodyTag.value.classList.remove('lock');
-  }
-};
-
-const slots = useSlots();
-const hasDialogTitle = computed(() => slots.dialogTitle !== undefined);
-const hasDialogContent = computed(() => slots.dialogContent !== undefined);
-const hasActionButtons = computed(() => slots.actionButtons !== undefined);
-
-const alignDialog = computed(() => `${props.positionY}-${props.positionX}`);
-
-onMounted(() => {
-  bodyTag.value = document.querySelector('body');
-  if (lockViewport.value && bodyTag.value !== null) {
-    bodyTag.value.classList.add('lock');
-  }
-});
-</script>
-
-<style lang="css">
-.display-dialog-core {
-  --_dialog-inner-height: initial;
-  --_dialog-inner-width: 100vw;
-
-  display: flex;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  backdrop-filter: blur(5px);
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 13;
-  opacity: 0;
-  border: none;
-  padding: 0;
-
-  display: none;
-  transition: opacity 200ms, display 200ms, overlay 200ms;
-  transition-behavior: allow-discrete;
-
-  &[open] {
-    display: flex;
-    opacity: 1;
-
-    @starting-style {
-      display: flex;
-      opacity: 0;
-    }
-  }
-
-  &[align-dialog$='center'] {
-    justify-content: center;
-  }
-  &[align-dialog^='center'] {
-    align-items: center;
-  }
-
-  &.confirm {
-    --_dialog-inner-width: initial;
-  }
-
-  &.dialog {
-    --_dialog-inner-height: 70dvh;
-    --_dialog-inner-width: min(75%, 720px);
-  }
-
-  &.form {
-    --_dialog-inner-width: initial;
-  }
-
-  &.fullscreen {
-    --_dialog-inner-width: initial;
-  }
-
-  &.modal {
-    --_dialog-inner-width: initial;
-  }
-
-  .inner {
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-
-    border-radius: var(--dialog-border-radius);
-    border: var(--dialog-border);
-    outline: var(--dialog-outline);
-
-    background-color: var(--dialog-inner-background);
-    height: var(--_dialog-inner-height);
-    width: var(--_dialog-inner-width);
-
-    overflow: hidden;
-
-    .header {
-      display: grid;
-      grid-template-columns: auto 1fr auto;
-      align-items: center;
-
-      padding: var(--dialog-header-padding);
-
-      .col-left {
-        /* grid-column: 1; */
-        /* display: none; */
-      }
-
-      .col-center {
-        /* grid-column: 2; */
-        text-align: center;
-
-        color: var(--color-red-1);
-        display: none;
-      }
-
-      .col-right {
-        grid-column: 3;
-
-        .display-prompt-action {
-          background-color: transparent;
-          display: block flex;
-          align-items: center;
-          justify-content: center;
-          margin: var(--dialog-header-button-margin);
-          padding: var(--dialog-header-button-padding);
-          border: var(--dialog-header-button-border);
-          border-radius: var(--dialog-header-button-border-radius);
-          outline: var(--dialog-header-button-outline);
-
-          transition: border-color 0.2s, outline-color 0.2s;
-
-          &:hover,
-          &:focus-visible {
-            cursor: pointer;
-            border: var(--dialog-header-button-border-hover);
-            outline: var(--dialog-header-button-outline-hover);
-          }
-
-          .icon {
-            color: var(--dialog-header-button-icon-color);
-            display: block;
-            font-size: var(--dialog-header-button-icon-font-size);
-            border: 1px solid green;
-            padding: 1rem;
-          }
-        }
-      }
-    }
-
-    .dialog-content {
-      overflow: hidden;
-      padding: var(--dialog-content-padding);
-
-      &.allow-content-scroll {
-        overflow-y: auto;
-        &::-webkit-scrollbar {
-          display: none;
-        }
-      }
-    }
-
-    .footer {
-      display: flex;
-      gap: 1.2rem;
-      justify-content: flex-end;
-      padding: var(--dialog-footer-padding);
-    }
-  }
-}
-</style>