srcdev-nuxt-components 5.0.2 → 6.0.0

package/components/display-details/DisplayDetailsCore.vue

@@ -1,301 +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: 'linear',
-        }
-      );
-
-      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: 'linear',
-        }
-      );
-
-      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 {
-  border: none;
-  outline: none;
-  box-shadow: none;
-  border-radius: 0;
-
-  &[open] {
-    .display-details-summary {
-      .icon {
-        transform: scaleY(-1);
-      }
-    }
-  }
-
-  .display-details-summary {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-direction: row;
-    gap: 0;
-
-    list-style: none;
-
-    &::-webkit-details-marker,
-    &::marker {
-      display: none;
-    }
-
-    overflow: clip;
-
-    .label {
-      display: block;
-      flex-grow: 1;
-    }
-
-    .icon {
-      display: block;
-
-      transform: scaleY(1);
-      transition: transform 200ms;
-
-      font-size: 1.2rem;
-      &.medium {
-        font-size: 1.8rem;
-      }
-      &.large {
-        font-size: 2.4rem;
-      }
-    }
-  }
-
-  .display-details-content {
-    /* Use an inner element for styling */
-  }
-}
-</style>

package/components/display-dialog/DisplayDialogCore.vue

@@ -1,255 +0,0 @@
-<template>
-  <dialog class="display-dialog-core" :class="[elementClasses]" role="dialog" :align-dialog :justify-dialog :open :data-dialog-id="dataDialogId" ref="dialogRef">
-    <focus-trap v-model:active="open" :clickOutsideDeactivates="true" @deactivate="closeDialog()">
-      <div class="inner" :class="[variant]">
-        <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),
-  },
-  justifyDialog: {
-    type: String,
-    default: 'center',
-    validator: (val) => ['start', 'center', 'end'].includes(val as string),
-  },
-  alignDialog: {
-    type: String,
-    default: 'center',
-    validator: (val) => ['start', 'center', 'end'].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);
-
-onMounted(() => {
-  bodyTag.value = document.querySelector('body');
-  if (lockViewport.value && bodyTag.value !== null) {
-    bodyTag.value.classList.add('lock');
-  }
-});
-</script>
-
-<style lang="css">
-.display-dialog-core {
-  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: 999999;
-  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;
-    }
-  }
-
-  /* * Positioning the dialog */
-  &[justify-dialog='start'] {
-    justify-content: flex-start;
-  }
-
-  &[justify-dialog='center'] {
-    justify-content: center;
-  }
-
-  &[justify-dialog='end'] {
-    justify-content: flex-end;
-  }
-
-  &[align-dialog='start'] {
-    align-items: flex-start;
-  }
-
-  &[align-dialog='center'] {
-    align-items: center;
-  }
-  &[align-dialog='end'] {
-    align-items: flex-end;
-  }
-
-  .inner {
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-
-    border-radius: 8px;
-    border: 1px solid light-dark(var(--gray-10), var(--gray-2));
-    outline: 1px solid light-dark(var(--gray-12), var(--gray-0));
-
-    background-color: var(--dialog-inner-background);
-    height: initial;
-    width: 100vw;
-    overflow: hidden;
-
-    &.confirm {
-      width: initial;
-    }
-
-    &.dialog {
-      height: 70dvh;
-      width: min(75%, 720px);
-    }
-
-    &.form {
-      width: initial;
-    }
-
-    &.fullscreen {
-      width: initial;
-    }
-
-    &.modal {
-      width: initial;
-    }
-
-    .header {
-      display: grid;
-      grid-template-columns: auto 1fr auto;
-      align-items: center;
-
-      padding: 12px;
-
-      .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: 12px;
-
-      &.allow-content-scroll {
-        overflow-y: auto;
-        &::-webkit-scrollbar {
-          display: none;
-        }
-      }
-    }
-
-    .footer {
-      display: flex;
-      gap: 1.2rem;
-      justify-content: flex-end;
-      padding: 12px;
-    }
-  }
-}
-</style>

package/components/display-dialog/variants/DisplayDialogConfirm.vue

@@ -1,45 +0,0 @@
-<template>
-  <DisplayDialogCore variant="confirm" :styleClassPassthrough :lockViewport="true" :dataDialogId>
-    <template #dialogTitle>
-      <slot name="dialogTitle">
-        <p class="text-normal wght-700">Confirm</p>
-      </slot>
-    </template>
-    <template #dialogContent>
-      <slot name="dialogContent"></slot>
-    </template>
-    <template #actionButtons>
-      <slot name="actionButtonLeft"></slot>
-      <slot name="actionButtonRight"></slot>
-    </template>
-  </DisplayDialogCore>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-  dataDialogId: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-
-<style lang="css">
-.display-dialog-core {
-  .inner {
-    .header {
-      /* background-color: aquamarine; */
-    }
-    .dialog-content {
-      /* background-color: bisque; */
-    }
-    .footer {
-      /* background-color: blueviolet; */
-    }
-  }
-}
-</style>

package/components/display-dialog/variants/DisplayDialogScrollableContent.vue

@@ -1,49 +0,0 @@
-<template>
-  <DisplayDialogCore variant="dialog" :styleClassPassthrough :lockViewport="true" :allowContentScroll :dataDialogId>
-    <template #dialogTitle>
-      <slot name="dialogTitle">
-        <p class="text-normal wght-700">Confirm</p>
-      </slot>
-    </template>
-    <template #dialogContent>
-      <slot name="dialogContent"></slot>
-    </template>
-    <template #actionButtons>
-      <slot name="actionButtonLeft"></slot>
-      <slot name="actionButtonRight"></slot>
-    </template>
-  </DisplayDialogCore>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-  allowContentScroll: {
-    type: Boolean,
-    default: false,
-  },
-  dataDialogId: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-
-<style lang="css">
-.display-dialog-core {
-  .inner {
-    .header {
-      /* background-color: aquamarine; */
-    }
-    .dialog-content {
-      /* background-color: bisque; */
-    }
-    .footer {
-      /* background-color: blueviolet; */
-    }
-  }
-}
-</style>

package/components/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>