srcdev-nuxt-components 9.4.6 → 9.4.7

package/app/components/05.forms/input-textarea/stories/InputTextareaWithLabel.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import StorybookComponent from "../variants/InputTextareaWithLabel.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
@@ -12,7 +13,7 @@ interface InputTextareaWithLabelStoryArgs {
   fieldHasError: boolean;
   required: boolean;
   theme: FormUiTheme;
-  InputUiVariant: InputUiVariant;
+  inputVariant: InputUiVariant;
   styleClassPassthrough: string[];
   useDescriptionTextSlot: boolean;
   useDescriptionHtmlSlot: boolean;
@@ -99,7 +100,7 @@ export default {
         category: "Styling",
       },
     },
-    InputUiVariant: {
+    inputVariant: {
       control: { type: "select" },
       options: ["normal", "outlined", "underlined"],
       description: "Textarea variant style",
@@ -196,37 +197,42 @@ export default {
   },
 } as Meta<typeof StorybookComponent>;
 
+// `args` is Storybook's own reactive object — bind to it directly (`args.x`) rather than
+// destructuring it into local variables/refs, which would snapshot the values once at setup()
+// and stop reflecting later Controls-panel changes. `componentArgs` strips the non-prop
+// slot-toggle args so they don't leak onto the component as unknown attributes.
 const Template: StoryFn<InputTextareaWithLabelStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const { modelValue, ...otherArgs } = args;
-    const textareaValue = ref(modelValue);
+    const componentArgs = computed(() => {
+      const {
+        useDescriptionTextSlot,
+        useDescriptionHtmlSlot,
+        descriptionTextContent,
+        descriptionHtmlContent,
+        useLeftSlot,
+        useRightSlot,
+        leftSlotContent,
+        rightSlotContent,
+        ...rest
+      } = args;
+      return rest;
+    });
 
-    return {
-      textareaValue,
-      args: otherArgs,
-      descriptionTextContent: args.descriptionTextContent,
-      descriptionHtmlContent: args.descriptionHtmlContent,
-      useDescriptionTextSlot: args.useDescriptionTextSlot,
-      useDescriptionHtmlSlot: args.useDescriptionHtmlSlot,
-      leftSlotContent: args.leftSlotContent,
-      rightSlotContent: args.rightSlotContent,
-      useLeftSlot: args.useLeftSlot,
-      useRightSlot: args.useRightSlot,
-    };
+    return { args, componentArgs };
   },
   template: `
     <StorybookComponent
-      v-model="textareaValue"
-      v-bind="args"
+      v-model="args.modelValue"
+      v-bind="componentArgs"
     >
-      <template v-if="useDescriptionTextSlot" #descriptionText>{{ descriptionTextContent }}</template>
-      <template v-if="useDescriptionHtmlSlot" #descriptionHtml v-html="descriptionHtmlContent"></template>
-      <template v-if="useLeftSlot" #left>{{ leftSlotContent }}</template>
-      <template v-if="useRightSlot" #right>{{ rightSlotContent }}</template>
+      <template v-if="args.useDescriptionTextSlot" #descriptionText>{{ args.descriptionTextContent }}</template>
+      <template v-if="args.useDescriptionHtmlSlot" #descriptionHtml v-html="args.descriptionHtmlContent"></template>
+      <template v-if="args.useLeftSlot" #left>{{ args.leftSlotContent }}</template>
+      <template v-if="args.useRightSlot" #right>{{ args.rightSlotContent }}</template>
     </StorybookComponent>
     <div class="mt-4 text-sm text-gray-600">
-      Character count: {{ textareaValue.length }} / {{ args.maxlength }}
+      Character count: {{ args.modelValue.length }} / {{ args.maxlength }}
     </div>
   `,
 });
@@ -305,7 +311,7 @@ Required.args = {
 
 export const Outlined = Template.bind({});
 Outlined.args = {
-  InputUiVariant: "outlined",
+  inputVariant: "outlined",
   label: "Outlined Textarea",
   placeholder: "This is an outlined textarea",
   useDescriptionTextSlot: true,
@@ -314,7 +320,7 @@ Outlined.args = {
 
 export const Underlined = Template.bind({});
 Underlined.args = {
-  InputUiVariant: "underlined",
+  inputVariant: "underlined",
   label: "Underlined Textarea",
   placeholder: "This is an underlined textarea",
 };
@@ -359,7 +365,7 @@ AllVariants.render = (args) => ({
         <h3 class="text-lg font-semibold capitalize">{{ variant }} Variant</h3>
         <StorybookComponent
           v-model="textareaValues[variant]"
-          v-bind="{ ...args, InputUiVariant: variant, label: variant + ' Textarea', name: variant + '-textarea' }"
+          v-bind="{ ...args, inputVariant: variant, label: variant + ' Textarea', name: variant + '-textarea' }"
         />
       </div>
     </div>

package/app/types/forms/types.forms.d.ts

@@ -16,7 +16,7 @@ export type CheckboxStyle = "check" | "cross";
 export type RadioAppearance = null | "with-decorator";
 export type OptionsLayout = "block" | "inline" | "equal-widths";
 export type LabelWeight = "normal" | "semi-bold" | "bold";
-export type InputTypesText = "text" | "email" | "password" | "number" | "tel" | "url";
+export type InputTypesText = "text" | "email" | "password" | "number" | "tel" | "url" | "date";
 export type InputMode = "text" | "email" | "tel" | "url" | "search" | "numeric" | "none" | "decimal";
 
 // Weight types for form components

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.4.6",
+  "version": "9.4.7",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",

package/app/components/masonry-grid/MasonryGrid.vue

@@ -1,68 +0,0 @@
-<template>
-  <div
-    class="masonry-grid-wrapper"
-    :class="[elementClasses]"
-    :style="`--_masonry-grid-gap: ${gap}${unit}; --_item-min-width: ${itemMinWidth}px`"
-  >
-    <template v-for="item in gridData" :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: Object,
-    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);
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-</script>
-
-<style lang="css">
-@layer components {
-.masonry-grid-wrapper {
-  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-  --_color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-
-  columns: auto var(--_item-min-width);
-  column-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/masonry-grid-ordered/MasonryGridOrdered.vue

@@ -1,163 +0,0 @@
-<template>
-  <div class="masonry-grid-ordered" :class="[elementClasses]">
-    <div class="masonry-grid-ordered-wrapper" ref="gridWrapper">
-      <div v-for="item in gridData" :key="item.id" class="masonry-grid-ordered-item" ref="gridItemsRefs">
-        <slot :name="item.id"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useElementSize, useResizeObserver } from "@vueuse/core"
-
-const props = defineProps({
-  gridData: {
-    type: Object,
-    default: () => ({}),
-  },
-  minTileWidth: {
-    type: Number,
-    default: 312,
-  },
-  gap: {
-    type: Number,
-    default: 12,
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-  mobilePreferredColCount: {
-    type: Number,
-    default: 1,
-  },
-  fixedWidth: {
-    type: Boolean,
-    default: false,
-  },
-  justify: {
-    type: String as PropType<String>,
-    default: "left",
-    validator: (val: string) => ["left", "center", "right"].includes(val),
-  },
-})
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-
-const gridData = toRef(() => props.gridData)
-
-const minTileWidth = toRef(() => props.minTileWidth)
-const gridWrapper = ref<null | HTMLDivElement>(null)
-const gridItemsRefs = ref<HTMLDivElement[]>([])
-const { width } = useElementSize(gridWrapper)
-const columnCount = computed(() => {
-  return Math.floor(width.value / minTileWidth.value)
-})
-
-const gapNum = toRef(props.gap)
-const gapStr = toRef(props.gap + "px")
-
-const fixedWidth = toRef(() => props.fixedWidth)
-const minTileWidthStr = toRef(props.minTileWidth + "px")
-const maxTileWidth = computed(() => {
-  return fixedWidth.value ? minTileWidth.value + "px" : "1fr"
-})
-
-const justify = computed(() => {
-  return fixedWidth.value ? props.justify : "stretch"
-})
-
-const updateGrid = () => {
-  if (gridWrapper.value !== null) {
-    const wrapperWidth = gridWrapper.value?.offsetWidth ?? 0
-    const itemWidth = fixedWidth.value
-      ? minTileWidth.value
-      : Math.floor((wrapperWidth - (columnCount.value - 1) * gapNum.value) / columnCount.value)
-
-    const colHeights = Array(columnCount.value).fill(0)
-
-    gridItemsRefs.value.forEach((item) => {
-      const minHeight = Math.min(...colHeights)
-      const minIndex = colHeights.indexOf(minHeight)
-
-      item?.style.setProperty("--_position", "absolute")
-      item?.style.setProperty("--_position-top", minHeight + "px")
-      item?.style.setProperty("--_position-left", minIndex * (100 / columnCount.value) + "%")
-      item?.style.setProperty("--_element-width", itemWidth + "px")
-
-      colHeights[minIndex] += Math.floor(item.offsetHeight + gapNum.value)
-    })
-
-    const maxHeight = Math.max(...colHeights)
-    gridWrapper.value?.style.setProperty("--_wrapper-height", maxHeight + "px")
-  }
-}
-
-useResizeObserver(gridWrapper, () => {
-  updateGrid()
-})
-
-watch(
-  () => fixedWidth.value,
-  () => {
-    updateGrid()
-  }
-)
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough)
-  }
-)
-</script>
-
-<style scoped lang="css">
-@layer components {
-.masonry-grid-ordered {
-  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-  --_transition-duration: 0.3s;
-
-  container-type: inline-size;
-  position: relative;
-
-  transition: max-width var(--_transition-duration) ease;
-
-  .masonry-grid-ordered-wrapper {
-    display: grid;
-    justify-self: v-bind(justify);
-    grid-gap: v-bind(gapStr);
-    grid-template-columns: repeat(1, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
-    position: relative;
-
-    height: var(--_wrapper-height);
-
-    @container (min-width: 768px) {
-      grid-template-columns: repeat(2, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
-    }
-
-    @container (min-width: 1024px) {
-      grid-template-columns: repeat(3, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
-    }
-    @container (min-width: 1280px) {
-      grid-template-columns: repeat(4, minmax(v-bind(minTileWidthStr), v-bind(maxTileWidth)));
-    }
-
-    .masonry-grid-ordered-item {
-      transition: position var(--_transition-duration) ease, top var(--_transition-duration) ease,
-        left var(--_transition-duration) ease;
-
-      position: var(--_position);
-      top: var(--_position-top);
-      left: var(--_position-left);
-      width: var(--_element-width);
-
-      outline: 0.1rem solid var(--_border-color);
-      padding: 1.2rem;
-      border-radius: 4px;
-    }
-  }
-}
-}
-</style>

package/app/components/masonry-grid-ordered/MasonryGridOrderedGridExperiment.vue

@@ -1,259 +0,0 @@
-<template>
-  <div class="masonry-grid-ordered" :class="[elementClasses]">
-    <div
-      ref="gridWrapper"
-      class="masonry-grid-ordered-wrapper"
-      :class="[{ 'multiple-cols': !isSingleColumn, 'setup-complete': isSetupComplete }]"
-    >
-      <div v-for="item in props.gridData" :key="item.id" ref="gridItemsRefs" class="masonry-grid-ordered-item">
-        <div ref="gridContentRefs" class="masonry-grid-ordered-content">
-          <slot :name="item.id"></slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useElementSize, useResizeObserver } from "@vueuse/core";
-
-const props = defineProps({
-  gridData: {
-    type: Array as PropType<{ id: string }[]>,
-    default: () => [],
-  },
-  minTileWidth: {
-    type: Number,
-    default: 312,
-  },
-  gap: {
-    type: Number,
-    default: 12,
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-  fixedWidth: {
-    type: Boolean,
-    default: false,
-  },
-  justify: {
-    type: String as PropType<"left" | "center" | "right">,
-    default: "left",
-    validator: (val: string) => ["left", "center", "right"].includes(val),
-  },
-});
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const gridWrapper = ref<null | HTMLDivElement>(null);
-const gridItemsRefs = ref<HTMLDivElement[]>([]);
-const gridContentRefs = ref<HTMLDivElement[]>([]);
-const { width } = useElementSize(gridWrapper);
-
-// Track item properties for masonry positioning
-interface ItemData {
-  height: number;
-  column: number;
-  row: number;
-  top: number;
-  bottom: number;
-  translateY: number;
-}
-const itemDataArray = ref<ItemData[]>([]);
-const isSetupComplete = ref(false);
-
-const columnCount = computed(() => {
-  if (width.value === 0) return 1;
-  // Match the CSS container query breakpoint (636px hard-coded for now)
-  // if (width.value < 636) return 1
-  return Math.max(1, Math.floor(width.value / (props.minTileWidth + props.gap)));
-});
-
-const isSingleColumn = computed(() => columnCount.value === 1);
-
-const gapStr = computed(() => `${props.gap}px`);
-
-const minTileWidthStr = computed(() => `${props.minTileWidth}px`);
-
-const updateGrid = () => {
-  if (gridWrapper.value !== null && columnCount.value > 1) {
-    // Initialize or reset the item data array
-    itemDataArray.value = Array(props.gridData.length)
-      .fill(null)
-      .map(() => ({ height: 0, column: 0, row: 0, top: 0, bottom: 0, translateY: 0 }));
-
-    // Step 1: Hide items for measurement
-    gridItemsRefs.value.forEach((itemEl) => {
-      if (itemEl) {
-        itemEl.style.setProperty("--_opacity", "0");
-      }
-    });
-
-    // Force a reflow to get accurate measurements in grid layout
-    void gridWrapper.value.offsetHeight;
-
-    // Step 2: Measure heights and store in array
-    gridContentRefs.value.forEach((contentEl, index) => {
-      if (!contentEl || !gridItemsRefs.value[index] || !itemDataArray.value[index]) return;
-
-      const itemEl = gridItemsRefs.value[index];
-      const contentHeight = contentEl.offsetHeight;
-
-      // Calculate which column this item would be in based on CSS Grid's auto-fit
-      const column = index % columnCount.value;
-
-      // Calculate which row this item would be in based on CSS Grid's auto-fit
-      const row = Math.floor(index / columnCount.value);
-
-      let top: number;
-      let bottom: number;
-      let translateY: number;
-
-      // Always get the actual measured position first
-      const wrapperRect = gridWrapper.value!.getBoundingClientRect();
-      const itemRect = itemEl.getBoundingClientRect();
-      const actualTop = itemRect.top - wrapperRect.top;
-
-      if (row === 0) {
-        // First row: use natural CSS Grid position
-        top = actualTop;
-        bottom = top + contentHeight;
-        translateY = 0; // No transform needed for first row
-      } else {
-        // Subsequent rows: position based on item above in same column
-        const itemAboveIndex = index - columnCount.value;
-        const itemAbove = itemDataArray.value[itemAboveIndex];
-
-        if (itemAbove) {
-          top = itemAbove.bottom + props.gap;
-          bottom = top + contentHeight;
-          // Calculate the transform needed to move from actual position to desired position
-          translateY = top - actualTop;
-        } else {
-          // Fallback to natural position if no item above found
-          top = actualTop;
-          bottom = top + contentHeight;
-          translateY = 0;
-        }
-      }
-
-      // Store the data in our tracking array
-      itemDataArray.value[index].height = contentHeight;
-      itemDataArray.value[index].column = column;
-      itemDataArray.value[index].row = row;
-      itemDataArray.value[index].top = top;
-      itemDataArray.value[index].bottom = bottom;
-      itemDataArray.value[index].translateY = translateY;
-
-      // Set the CSS custom properties
-      itemEl.style.setProperty("--_item-height", `${contentHeight}px`);
-      itemEl.style.setProperty("--_translate-y", `${translateY}px`);
-      itemEl.style.setProperty("--_opacity", "1");
-    });
-
-    // Log the complete item data array when calculations are complete
-    // console.log("📊 Item data array:", itemDataArray.value)
-
-    // Mark setup as complete
-    isSetupComplete.value = true;
-  } else {
-    // Reset setup state for single column
-    isSetupComplete.value = false;
-
-    // Reset item data array
-    itemDataArray.value = [];
-
-    // Single column: reset to normal flow
-    gridItemsRefs.value.forEach((itemEl) => {
-      if (itemEl) {
-        itemEl.style.removeProperty("--_opacity");
-        itemEl.style.removeProperty("--_item-height");
-        itemEl.style.removeProperty("--_translate-y");
-      }
-    });
-    gridWrapper.value?.style.removeProperty("--_wrapper-height");
-  }
-};
-
-useResizeObserver(gridWrapper, async () => {
-  // console.log("useResizeObserver triggered")
-  // itemDataArray.value = [] // Clear previous data
-  // await useSleep(100)
-  // console.log("useResizeObserver after sleep")
-  nextTick(() => updateGrid());
-
-  // requestAnimationFrame(() => {
-  // updateGrid()
-  // nextTick(() => updateGrid())
-  // })
-
-  // Add a small delay to ensure DOM is fully rendered and measured
-  // setTimeout(() => {
-  //   nextTick(() => updateGrid())
-  // }, 100)
-});
-
-onMounted(() => {
-  // Add a small delay to ensure DOM is fully rendered and measured
-  setTimeout(() => {
-    nextTick(() => updateGrid());
-  }, 100);
-});
-
-watch(
-  () => props.fixedWidth,
-  () => {
-    updateGrid();
-  }
-);
-
-watch(
-  () => props.gridData,
-  () => {
-    // nextTick(() => updateGrid())
-  }
-);
-
-watch(
-  () => width.value,
-  (newWidth) => {
-    if (newWidth > 0) {
-      // nextTick(() => updateGrid())
-    }
-  }
-);
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-</script>
-
-<style lang="css">
-@layer components {
-.masonry-grid-ordered {
-  --_transition-duration: 0.3s;
-
-  .masonry-grid-ordered-wrapper {
-    display: grid;
-    gap: v-bind(gapStr);
-    grid-template-columns: repeat(auto-fit, minmax(v-bind(minTileWidthStr), 1fr));
-
-    height: var(--_wrapper-height, auto);
-
-    &.multiple-cols {
-      .masonry-grid-ordered-item {
-        height: var(--_item-height, auto);
-        opacity: var(--_opacity, 1);
-        transform: translateY(var(--_translate-y, 0px));
-        transition: transform var(--_transition-duration) ease;
-      }
-    }
-  }
-}
-}
-</style>