srcdev-nuxt-components 9.4.6 → 9.4.7

package/app/components/masonry-grid-ordered/stories/MasonryGridOrdered.stories.ts

@@ -1,354 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import StorybookComponent from "../MasonryGridOrdered.vue";
-import type { IQuote } from "~/types/types.quotes";
-
-// Custom interface for story args
-interface MasonryGridOrderedStoryArgs {
-  gridData: IQuote[];
-  gap: number;
-  minTileWidth: number;
-  fixedWidth: boolean;
-  styleClassPassthrough: string[];
-  // Display options for stories
-  showBorders: boolean;
-  showNumbers: boolean;
-  itemVariant: "simple" | "card" | "detailed";
-}
-
-// Sample data for stories
-const sampleQuotes: IQuote[] = [
-  {
-    id: 1,
-    quote: "The only way to do great work is to love what you do.",
-    author: "Steve Jobs",
-  },
-  {
-    id: 2,
-    quote: "Life is what happens to you while you're busy making other plans.",
-    author: "John Lennon",
-  },
-  {
-    id: 3,
-    quote: "The future belongs to those who believe in the beauty of their dreams.",
-    author: "Eleanor Roosevelt",
-  },
-  {
-    id: 4,
-    quote: "It is during our darkest moments that we must focus to see the light.",
-    author: "Aristotle",
-  },
-  {
-    id: 5,
-    quote: "The way to get started is to quit talking and begin doing.",
-    author: "Walt Disney",
-  },
-  {
-    id: 6,
-    quote: "Don't let yesterday take up too much of today.",
-    author: "Will Rogers",
-  },
-  {
-    id: 7,
-    quote: "You learn more from failure than from success. Don't let it stop you. Failure builds character.",
-    author: "Unknown",
-  },
-  {
-    id: 8,
-    quote: "It's not whether you get knocked down, it's whether you get up.",
-    author: "Vince Lombardi",
-  },
-  {
-    id: 9,
-    quote:
-      "If you are working on something that you really care about, you don't have to be pushed. The vision pulls you.",
-    author: "Steve Jobs",
-  },
-  {
-    id: 10,
-    quote: "People who are crazy enough to think they can change the world, are the ones who do.",
-    author: "Rob Siltanen",
-  },
-  {
-    id: 11,
-    quote: "We don't make mistakes, just happy little accidents.",
-    author: "Bob Ross",
-  },
-  {
-    id: 12,
-    quote: "In the middle of every difficulty lies opportunity.",
-    author: "Albert Einstein",
-  },
-];
-
-export default {
-  title: "Components/UI/MasonryGridOrdered",
-  component: StorybookComponent,
-  argTypes: {
-    // Layout Configuration
-    gap: {
-      control: { type: "range", min: 0, max: 50, step: 2 },
-      description: "Gap between grid items in pixels",
-      table: {
-        category: "Layout",
-      },
-    },
-    minTileWidth: {
-      control: { type: "range", min: 200, max: 500, step: 10 },
-      description: "Minimum width for each grid tile",
-      table: {
-        category: "Layout",
-      },
-    },
-    fixedWidth: {
-      control: { type: "boolean" },
-      description: "Whether to use fixed width for tiles",
-      table: {
-        category: "Layout",
-      },
-    },
-    styleClassPassthrough: {
-      control: { type: "object" },
-      description: "Additional CSS classes to pass through",
-      table: {
-        category: "Layout",
-      },
-    },
-    // Data Configuration
-    gridData: {
-      control: { type: "object" },
-      description: "Array of quote objects to display in the grid",
-      table: {
-        category: "Data",
-      },
-    },
-    // Display Options (for stories only)
-    showBorders: {
-      control: { type: "boolean" },
-      description: "Show borders around grid items",
-      table: {
-        category: "Display Options",
-      },
-    },
-    showNumbers: {
-      control: { type: "boolean" },
-      description: "Show index numbers on grid items",
-      table: {
-        category: "Display Options",
-      },
-    },
-    itemVariant: {
-      control: { type: "select" },
-      options: ["simple", "card", "detailed"],
-      description: "Style variant for grid items",
-      table: {
-        category: "Display Options",
-      },
-    },
-  },
-  args: {
-    gridData: sampleQuotes.slice(0, 8),
-    gap: 12,
-    minTileWidth: 300,
-    fixedWidth: true,
-    styleClassPassthrough: ["mi-auto"],
-    showBorders: true,
-    showNumbers: true,
-    itemVariant: "card",
-  },
-} as Meta<MasonryGridOrderedStoryArgs>;
-
-const Template: StoryFn<MasonryGridOrderedStoryArgs> = (args) => ({
-  components: {
-    StorybookComponent,
-  },
-  setup() {
-    const getItemClasses = (variant: string, showBorders: boolean) => {
-      const baseClasses = ["p-10"];
-
-      if (showBorders) {
-        baseClasses.push("border", "border-1", "border-grey-dark");
-
-        if (variant === "card") {
-          baseClasses.push("border-r-4");
-        }
-      }
-
-      if (variant === "detailed") {
-        baseClasses.push("bg-gray-1", "rounded-4");
-      }
-
-      return baseClasses.join(" ");
-    };
-
-    return { args, getItemClasses };
-  },
-  template: `
-    <div style="padding: 20px; max-width: 1200px; margin: 0 auto;">
-      <div style="margin-bottom: 20px;">
-        <h3 style="margin-bottom: 10px;">MasonryGridOrdered Component</h3>
-        <p style="color: #666; margin-bottom: 20px;">
-          Displaying {{ args.gridData.length }} items with {{ args.gap }}px gap and {{ args.minTileWidth }}px minimum width
-        </p>
-      </div>
-
-      <StorybookComponent
-        :gridData="args.gridData"
-        :gap="args.gap"
-        :min-tile-width="args.minTileWidth"
-        :fixed-width="args.fixedWidth"
-        :styleClassPassthrough="args.styleClassPassthrough"
-      >
-        <template v-for="(item, index) in args.gridData" v-slot:[item.id]>
-          <div :class="getItemClasses(args.itemVariant, args.showBorders)">
-            <p v-if="args.showNumbers" class="text-normal wght-700" style="margin-bottom: 8px;">
-              {{ index + 1 }}: {{ item.author }}
-            </p>
-            <p v-else class="text-normal wght-700" style="margin-bottom: 8px;">
-              {{ item.author }}
-            </p>
-            <p class="text-normal">{{ item.quote }}</p>
-          </div>
-        </template>
-      </StorybookComponent>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-export const SmallGap = Template.bind({});
-SmallGap.args = {
-  gap: 4,
-  minTileWidth: 250,
-  fixedWidth: false,
-  itemVariant: "simple",
-  showBorders: false,
-  showNumbers: false,
-};
-
-export const LargeGap = Template.bind({});
-LargeGap.args = {
-  gap: 24,
-  minTileWidth: 320,
-  fixedWidth: true,
-  itemVariant: "card",
-  showBorders: true,
-  showNumbers: true,
-};
-
-export const WideItems = Template.bind({});
-WideItems.args = {
-  gap: 16,
-  minTileWidth: 400,
-  fixedWidth: false,
-  itemVariant: "detailed",
-  showBorders: true,
-  showNumbers: false,
-};
-
-export const NarrowItems = Template.bind({});
-NarrowItems.args = {
-  gap: 8,
-  minTileWidth: 200,
-  fixedWidth: true,
-  itemVariant: "simple",
-  showBorders: true,
-  showNumbers: true,
-};
-
-export const ManyItems = Template.bind({});
-ManyItems.args = {
-  gridData: sampleQuotes, // All 12 items
-  gap: 12,
-  minTileWidth: 280,
-  fixedWidth: true,
-  itemVariant: "card",
-  showBorders: true,
-  showNumbers: true,
-};
-
-export const FewItems = Template.bind({});
-FewItems.args = {
-  gridData: sampleQuotes.slice(0, 4),
-  gap: 20,
-  minTileWidth: 350,
-  fixedWidth: false,
-  itemVariant: "detailed",
-  showBorders: true,
-  showNumbers: false,
-};
-
-export const MinimalStyle = Template.bind({});
-MinimalStyle.args = {
-  gap: 16,
-  minTileWidth: 300,
-  fixedWidth: false,
-  styleClassPassthrough: [],
-  itemVariant: "simple",
-  showBorders: false,
-  showNumbers: false,
-};
-
-export const CustomStyles = Template.bind({});
-CustomStyles.args = {
-  gap: 12,
-  minTileWidth: 320,
-  fixedWidth: true,
-  styleClassPassthrough: ["mi-auto", "mb-20"],
-  itemVariant: "detailed",
-  showBorders: true,
-  showNumbers: true,
-};
-
-// Example with different content structure
-const Template2: StoryFn<MasonryGridOrderedStoryArgs> = (args) => ({
-  components: {
-    StorybookComponent,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div style="padding: 20px; max-width: 1200px; margin: 0 auto;">
-      <div style="margin-bottom: 20px;">
-        <h3 style="margin-bottom: 10px;">Custom Content Example</h3>
-        <p style="color: #666; margin-bottom: 20px;">
-          Showing how different content can be displayed in the masonry grid
-        </p>
-      </div>
-
-      <StorybookComponent
-        :gridData="args.gridData"
-        :gap="args.gap"
-        :min-tile-width="args.minTileWidth"
-        :fixed-width="args.fixedWidth"
-        :styleClassPassthrough="args.styleClassPassthrough"
-      >
-        <template v-for="(item, index) in args.gridData" v-slot:[item.id]>
-          <div class="p-16 bg-gray-1 rounded-8 border border-1 border-gray-6">
-            <div style="display: flex; align-items: center; margin-bottom: 12px;">
-              <div
-                style="width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; margin-right: 12px; font-size: 14px;"
-              >
-                {{ index + 1 }}
-              </div>
-              <h4 class="text-normal wght-700" style="margin: 0;">{{ item.author }}</h4>
-            </div>
-            <blockquote class="text-normal" style="font-style: italic; border-left: 3px solid #667eea; padding-left: 12px; margin: 0;">
-              "{{ item.quote }}"
-            </blockquote>
-          </div>
-        </template>
-      </StorybookComponent>
-    </div>
-  `,
-});
-
-export const RichContent = Template2.bind({});
-RichContent.args = {
-  gridData: sampleQuotes.slice(0, 6),
-  gap: 16,
-  minTileWidth: 320,
-  fixedWidth: false,
-  styleClassPassthrough: ["mi-auto"],
-};

package/app/components/masonry-grid-sorted/MasonryGridSorted.vue

@@ -1,120 +0,0 @@
-<template>
-  <div
-    class="masonry-grid-wrapper"
-    :class="[elementClasses]"
-    :style="`--_masonry-grid-gap: ${gap}${unit}; --_item-min-width: ${itemMinWidth}px`"
-    ref="gridWrapper"
-  >
-    <template v-for="item in rearrangedItems" :key="item.id">
-      <div class="masonry-grid-item">
-        <slot :name="item.id"></slot>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  gridData: {
-    type: Array as PropType<any[]>,
-    default: () => [],
-  },
-  itemMinWidth: {
-    type: Number,
-    default: 300,
-  },
-  gap: {
-    type: Number,
-    default: 1.2,
-  },
-  unit: {
-    type: String,
-    default: "rem",
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-
-const gridData = toRef(() => props.gridData)
-
-const gridWrapper = ref<HTMLDivElement>()
-
-const getColumnCountWithinGridWrapper = () => {
-  return gridWrapper.value ? Math.floor(gridWrapper.value.clientWidth / props.itemMinWidth) : 0
-}
-
-// const columns = ref(4);
-const columns = computed(() => {
-  return gridWrapper.value ? Math.floor(gridWrapper.value.clientWidth / props.itemMinWidth) : 0
-})
-
-const rearrangeArray = (items: any[], columns: number): any[] => {
-  const rows = Math.ceil(items.length / columns)
-  const rearrangedArray = []
-
-  for (let col = 0; col < columns; col++) {
-    for (let row = 0; row < rows; row++) {
-      const index = row * columns + col
-      if (index < items.length) {
-        rearrangedArray.push(items[index])
-      }
-    }
-  }
-
-  return rearrangedArray
-}
-
-const rearrangedItems = computed(() => rearrangeArray(props.gridData, columns.value))
-// const rearrangedItems = computed(() => {
-//   const rows = Math.ceil(props.gridData.length / columns.value);
-//   const rearrangedArray = [];
-
-//   for (let col = 0; col < columns.value; col++) {
-//     for (let row = 0; row < rows; row++) {
-//       const index = row * columns.value + col;
-//       if (index < props.gridData.length) {
-//         rearrangedArray.push(props.gridData[index]);
-//       }
-//     }
-//   }
-
-//   return rearrangedArray;
-// });
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough)
-  }
-)
-
-// onMounted(() => {
-//   console.log(getColumnCountWithinGridWrapper());
-// });
-
-// useResizeObserver(gridWrapper, () => {
-//   console.log(getColumnCountWithinGridWrapper());
-// });
-</script>
-
-<style lang="css">
-@layer components {
-.masonry-grid-wrapper {
-  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-
-  columns: var(--_item-min-width);
-  gap: var(--_masonry-grid-gap);
-
-  .masonry-grid-item {
-    break-inside: avoid;
-    outline: 0.1rem solid var(--_border-color);
-    padding: 1.2rem;
-    margin-block-end: var(--_masonry-grid-gap);
-  }
-}
-}
-</style>

package/app/components/pop-over/PopOver.vue

@@ -1,90 +0,0 @@
-<template>
-  <ClientOnly>
-    <button :popovertarget popovertargetaction="toggle" class="popover-trigger" :class="[elementClasses]">
-      <slot name="trigger"></slot>
-    </button>
-
-    <div class="dialog" popover role="tooltip" :id="popovertarget" :class="[elementClasses]">
-      <button :popovertarget popovertargetaction="hide">x</button>
-      <slot name="popoverCotent"></slot>
-    </div>
-  </ClientOnly>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  popovertarget: {
-    type: String,
-    required: true,
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const anchorName = `--anchor-${useId()}`
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-</script>
-
-<style scoped lang="css">
-@layer components {
-@layer popover-setup {
-  /* @position-try --right {
-    inset: auto;
-    top: anchor(top);
-    left: calc(anchor(right) + 10px);
-  }
-
-  @position-try --left {
-    inset: auto;
-    top: anchor(top);
-    right: calc(anchor(left) + 10px);
-  } */
-
-  .popover-trigger {
-    anchor-name: v-bind(anchorName);
-  }
-
-  .dialog {
-    display: none;
-    position: absolute;
-    position-anchor: v-bind(anchorName);
-    margin: 0;
-    inset: auto;
-    top: calc(anchor(top) + 0px);
-    left: calc(anchor(right) + 10px);
-    opacity: 0;
-    transition: opacity 200ms, display 200ms, overlay 200ms;
-    transition-behavior: allow-discrete;
-
-    position-try-fallbacks: flip-inline;
-
-    &:popover-open {
-      display: block;
-      opacity: 1;
-
-      @starting-style {
-        display: block;
-        opacity: 0;
-      }
-    }
-  }
-
-  @position-try --top-left {
-    top: anchor(top);
-    right: calc(anchor(left + 10px));
-    left: unset;
-    /* width: revert; */
-  }
-
-  @position-try --bottom-right {
-    top: anchor(bottom);
-    /* right: calc(anchor(left + 10px)); */
-    /* left: unset; */
-    /* width: revert; */
-  }
-}
-}
-</style>