srcdev-nuxt-components 3.0.0 → 4.0.0

package/components/display-details/DisplayDetailsCore.vue

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

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

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