vueless 1.3.5-beta.1 → 1.3.5-beta.3

package/README.md

@@ -28,7 +28,7 @@ A UI library with Open Architecture for Vue.js 3 and Nuxt.js 3 / 4, powered by [
 - 🖼️ Inline SVG icons
 - 🪄 Auto component imports (as you use them)
 - 🧿 Uncompiled source in npm for better DX
-- 🧪️ 1300+ unit tests ensuring consistent logic
+- 🧪️ 1400+ unit tests ensuring consistent logic
 - 🛡️ Full TypeScript support with type safety
 
 ## Built-In Storybook

package/components.d.ts

@@ -36,7 +36,6 @@ export { default as UNotify } from "./ui.text-notify/UNotify.vue";
 export { default as UNumber } from "./ui.text-number/UNumber.vue";
 export { default as UFile } from "./ui.text-file/UFile.vue";
 export { default as UFiles } from "./ui.text-files/UFiles.vue";
-export { default as UEmpty } from "./ui.text-empty/UEmpty.vue";
 export { default as UBadge } from "./ui.text-badge/UBadge.vue";
 /* Containers */
 export { default as UDivider } from "./ui.container-divider/UDivider.vue";
@@ -46,6 +45,8 @@ export { default as UGroup } from "./ui.container-group/UGroup.vue";
 export { default as UGroups } from "./ui.container-groups/UGroups.vue";
 export { default as UAccordion } from "./ui.container-accordion/UAccordion.vue";
 export { default as UAccordionItem } from "./ui.container-accordion-item/UAccordionItem.vue";
+export { default as UEmpty } from "./ui.container-empty/UEmpty.vue";
+export { default as UPlaceholder } from "./ui.container-placeholder/UPlaceholder.vue";
 export { default as UCard } from "./ui.container-card/UCard.vue";
 export { default as UModal } from "./ui.container-modal/UModal.vue";
 export { default as UModalConfirm } from "./ui.container-modal-confirm/UModalConfirm.vue";

package/components.ts

@@ -36,7 +36,6 @@ export { default as UNotify } from "./ui.text-notify/UNotify.vue";
 export { default as UNumber } from "./ui.text-number/UNumber.vue";
 export { default as UFile } from "./ui.text-file/UFile.vue";
 export { default as UFiles } from "./ui.text-files/UFiles.vue";
-export { default as UEmpty } from "./ui.text-empty/UEmpty.vue";
 export { default as UBadge } from "./ui.text-badge/UBadge.vue";
 /* Containers */
 export { default as UDivider } from "./ui.container-divider/UDivider.vue";
@@ -46,6 +45,8 @@ export { default as UGroup } from "./ui.container-group/UGroup.vue";
 export { default as UGroups } from "./ui.container-groups/UGroups.vue";
 export { default as UAccordion } from "./ui.container-accordion/UAccordion.vue";
 export { default as UAccordionItem } from "./ui.container-accordion-item/UAccordionItem.vue";
+export { default as UEmpty } from "./ui.container-empty/UEmpty.vue";
+export { default as UPlaceholder } from "./ui.container-placeholder/UPlaceholder.vue";
 export { default as UCard } from "./ui.container-card/UCard.vue";
 export { default as UModal } from "./ui.container-modal/UModal.vue";
 export { default as UModalConfirm } from "./ui.container-modal-confirm/UModalConfirm.vue";

package/composables/useBreakpoint.ts

@@ -1,7 +1,7 @@
 import { onMounted, ref, watch, computed, onBeforeUnmount } from "vue";
 import { isSSR } from "../utils/helper";
 
-import type { Ref } from "vue";
+type ResponsiveConfig<T> = Partial<Record<BreakpointName, T>>;
 
 enum BreakpointName {
   Xs = "xs",
@@ -21,12 +21,16 @@ enum BreakpointWidth {
   "2xl" = 1536,
 }
 
-export function useBreakpoint() {
-  let animationId: number | undefined;
+let isInitialized = false;
+let animationId: number | undefined;
+
+const windowWidth = ref(0);
+const currentBreakpoint = ref(BreakpointName.Xs);
+const BREAKPOINT_KEYS = Object.keys(BreakpointName) as (keyof typeof BreakpointName)[];
 
-  const windowWidth = ref(0);
-  const currentBreakpoint: Ref<BreakpointName> = ref(BreakpointName.Xs);
+watch(windowWidth, setBreakpoint, { immediate: true });
 
+export function useBreakpoint() {
   const isPhone = computed(() => {
     return currentBreakpoint.value === BreakpointName.Xs;
   });
@@ -63,50 +67,14 @@ export function useBreakpoint() {
     return isDesktop.value || isLargeDesktop.value;
   });
 
-  watch(windowWidth, setBreakpoint, { immediate: true });
-
   onMounted(() => {
-    if (isSSR) return;
-
-    windowWidth.value = window.innerWidth;
-
-    window.addEventListener("resize", resizeListener, { passive: true });
+    initBreakpointListener();
   });
 
   onBeforeUnmount(() => {
-    if (isSSR) return;
-
     window.removeEventListener("resize", resizeListener);
   });
 
-  function resizeListener() {
-    if (isSSR) return;
-
-    if (animationId) {
-      window.cancelAnimationFrame(animationId);
-    }
-
-    animationId = window.requestAnimationFrame(() => {
-      windowWidth.value = window.innerWidth;
-    });
-  }
-
-  function setBreakpoint(newWindowWidth: number) {
-    if (newWindowWidth === undefined) return;
-
-    const breakpoints = [
-      { width: BreakpointWidth["2xl"], name: BreakpointName["2xl"] },
-      { width: BreakpointWidth.Xl, name: BreakpointName.Xl },
-      { width: BreakpointWidth.Lg, name: BreakpointName.Lg },
-      { width: BreakpointWidth.Md, name: BreakpointName.Md },
-      { width: BreakpointWidth.Sm, name: BreakpointName.Sm },
-    ];
-
-    currentBreakpoint.value =
-      breakpoints.find((breakpoint) => newWindowWidth >= breakpoint.width)?.name ||
-      BreakpointName.Xs;
-  }
-
   return {
     isPhone,
     isLargePhone,
@@ -120,3 +88,90 @@ export function useBreakpoint() {
     breakpoint: currentBreakpoint,
   };
 }
+
+/**
+ * Shorthand function that can be used directly in templates.
+ * Returns the appropriate value based on the current breakpoint.
+ * Vue will track the reactive dependency and re-render when the breakpoint changes.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <UButton :size="r({ sm: 'sm', md: 'md' })">Click me</UButton>
+ * </template>
+ *
+ * <script setup>
+ * import { r } from "vueless";
+ * </script>
+ * ```
+ */
+export function r<T>(config: ResponsiveConfig<T>): T {
+  initBreakpointListener();
+
+  const definedKeys = BREAKPOINT_KEYS.filter((key) => BreakpointName[key] in config);
+
+  if (!definedKeys.length) {
+    return undefined as T;
+  }
+
+  const currentIndex = BREAKPOINT_KEYS.findIndex(
+    (key) => BreakpointName[key] === currentBreakpoint.value,
+  );
+  const smallestDefinedIndex = BREAKPOINT_KEYS.indexOf(definedKeys[0]);
+  const largestDefinedIndex = BREAKPOINT_KEYS.indexOf(definedKeys[definedKeys.length - 1]);
+
+  if (currentIndex <= smallestDefinedIndex) {
+    return config[BreakpointName[definedKeys[0]]] as T;
+  }
+
+  if (currentIndex >= largestDefinedIndex) {
+    return config[BreakpointName[definedKeys[definedKeys.length - 1]]] as T;
+  }
+
+  for (let i = currentIndex; i >= 0; i--) {
+    const bp = BreakpointName[BREAKPOINT_KEYS[i]];
+
+    if (bp in config) {
+      return config[bp] as T;
+    }
+  }
+
+  return config[BreakpointName[definedKeys[0]]] as T;
+}
+
+function setBreakpoint(newWindowWidth: number) {
+  if (newWindowWidth === undefined) return;
+
+  for (let i = BREAKPOINT_KEYS.length - 1; i >= 0; i--) {
+    const key = BREAKPOINT_KEYS[i];
+
+    if (newWindowWidth >= BreakpointWidth[key]) {
+      currentBreakpoint.value = BreakpointName[key];
+
+      return;
+    }
+  }
+
+  currentBreakpoint.value = BreakpointName.Xs;
+}
+
+function resizeListener() {
+  if (isSSR) return;
+
+  if (animationId) {
+    window.cancelAnimationFrame(animationId);
+  }
+
+  animationId = window.requestAnimationFrame(() => {
+    windowWidth.value = window.innerWidth;
+  });
+}
+
+function initBreakpointListener() {
+  if (isInitialized || isSSR) return;
+
+  isInitialized = true;
+  windowWidth.value = window.innerWidth;
+
+  window.addEventListener("resize", resizeListener, { passive: true });
+}

package/constants.d.ts

@@ -176,7 +176,6 @@ export namespace COMPONENTS {
     let UNumber: string;
     let UFile: string;
     let UFiles: string;
-    let UEmpty: string;
     let UBadge: string;
     let UDivider: string;
     let UCol: string;
@@ -185,6 +184,8 @@ export namespace COMPONENTS {
     let UGroups: string;
     let UAccordion: string;
     let UAccordionItem: string;
+    let UEmpty: string;
+    let UPlaceholder: string;
     let UCard: string;
     let UModal: string;
     let UModalConfirm: string;

package/constants.js

@@ -284,7 +284,6 @@ export const COMPONENTS = {
   UNumber: "ui.text-number",
   UFile: "ui.text-file",
   UFiles: "ui.text-files",
-  UEmpty: "ui.text-empty",
   UBadge: "ui.text-badge",
 
   /* Containers */
@@ -295,6 +294,8 @@ export const COMPONENTS = {
   UGroups: "ui.container-groups",
   UAccordion: "ui.container-accordion",
   UAccordionItem: "ui.container-accordion-item",
+  UEmpty: "ui.container-empty",
+  UPlaceholder: "ui.container-placeholder",
   UCard: "ui.container-card",
   UModal: "ui.container-modal",
   UModalConfirm: "ui.container-modal-confirm",

package/index.d.ts

@@ -29,7 +29,7 @@ export { useLocale } from "./composables/useLocale";
 export { useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
 export { useRequestQueue } from "./composables/useRequestQueue";
-export { useBreakpoint } from "./composables/useBreakpoint";
+export { useBreakpoint, r } from "./composables/useBreakpoint";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";

package/index.ts

@@ -35,7 +35,7 @@ export { useLocale } from "./composables/useLocale";
 export { useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
 export { useRequestQueue } from "./composables/useRequestQueue";
-export { useBreakpoint } from "./composables/useBreakpoint";
+export { useBreakpoint, r } from "./composables/useBreakpoint";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.5-beta.1",
+  "version": "1.3.5-beta.3",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -57,7 +57,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.2.13",
+    "@vueless/storybook": "^1.3.1",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^10.0.2",
     "eslint-plugin-vue": "^10.3.0",

package/types.ts

@@ -1,6 +1,6 @@
 import UTextDefaultConfig from "./ui.text-block/config";
 import UAlertDefaultConfig from "./ui.text-alert/config";
-import UEmptyDefaultConfig from "./ui.text-empty/config";
+import UEmptyDefaultConfig from "./ui.container-empty/config";
 import UFileDefaultConfig from "./ui.text-file/config";
 import UFilesDefaultConfig from "./ui.text-files/config";
 import UHeaderDefaultConfig from "./ui.text-header/config";

package/ui.container-col/config.ts

@@ -12,6 +12,12 @@ export default /*tw*/ {
       block: {
         true: "w-full",
       },
+      grow: {
+        true: "flex-grow",
+      },
+      shrink: {
+        true: "flex-shrink",
+      },
       gap: {
         none: "gap-0",
         "3xs": "gap-0.5",
@@ -61,5 +67,7 @@ export default /*tw*/ {
     wrap: false,
     reverse: false,
     block: false,
+    grow: false,
+    shrink: false,
   },
 };

package/ui.container-col/tests/UCol.test.ts

@@ -140,6 +140,32 @@ describe("UCol.vue", () => {
       expect(component.attributes("class")).toContain(expectedClasses);
     });
 
+    it("Grow – applies the correct grow class", () => {
+      const grow = true;
+      const expectedClasses = "flex-grow";
+
+      const component = mount(UCol, {
+        props: {
+          grow,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(expectedClasses);
+    });
+
+    it("Shrink – applies the correct shrink class", () => {
+      const shrink = true;
+      const expectedClasses = "flex-shrink";
+
+      const component = mount(UCol, {
+        props: {
+          shrink,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(expectedClasses);
+    });
+
     it("Tag – renders the correct HTML tag", () => {
       const tags = ["div", "section", "article", "main", "aside", "nav", "span"];
 

package/ui.container-col/types.ts

@@ -49,6 +49,16 @@ export interface Props {
    */
   block?: boolean;
 
+  /**
+   * Allow flex item to grow to fill available space (flex-grow).
+   */
+  grow?: boolean;
+
+  /**
+   * Allow flex item to shrink if necessary (flex-shrink).
+   */
+  shrink?: boolean;
+
   /**
    * Allows changing HTML tag.
    */

package/{ui.text-empty → ui.container-empty}/storybook/stories.ts

@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UEmpty from "../../ui.text-empty/UEmpty.vue";
+import UEmpty from "../../ui.container-empty/UEmpty.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
@@ -25,8 +25,8 @@ interface UEmptyArgs extends Props {
 }
 
 export default {
-  id: "4090",
-  title: "Text & Content / Empty",
+  id: "5055",
+  title: "Containers / Empty",
   component: UEmpty,
   args: {
     title: "No contacts",
@@ -95,12 +95,15 @@ DefaultSlot.args = {
   `,
 };
 
+export const PlaceholderIcon = DefaultTemplate.bind({});
+PlaceholderIcon.args = { placeholderIcon: "inbox", title: "No messages" };
+
 export const FooterSlot = DefaultTemplate.bind({});
 FooterSlot.args = {
   slotTemplate: `
     <template #footer>
       <UButton
-        label="Add new one"
+        label="Add"
         size="sm"
         color="grayscale"
         variant="soft"

package/ui.container-placeholder/UPlaceholder.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+
+import { useUI } from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
+
+import { COMPONENT_NAME } from "./constants";
+import defaultConfig from "./config";
+
+import type { Props, Config } from "./types";
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  label: "",
+});
+
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+
+defineExpose({
+  /**
+   * A reference to the component's wrapper element for direct DOM manipulation.
+   * @property {HTMLDivElement}
+   */
+  wrapperRef,
+});
+
+const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs } = useUI<Config>(defaultConfig);
+</script>
+
+<template>
+  <div
+    ref="wrapper"
+    role="region"
+    :aria-label="label || 'Placeholder area'"
+    v-bind="wrapperAttrs"
+    :data-test="getDataTest()"
+  >
+    <div v-bind="contentAttrs">
+      <!--
+        @slot Use it to add custom content inside the placeholder.
+        @binding {string} label
+      -->
+      <slot :label="label">
+        <span v-if="label" v-bind="labelAttrs">{{ label }}</span>
+      </slot>
+    </div>
+  </div>
+</template>

package/ui.container-placeholder/config.ts

@@ -0,0 +1,40 @@
+export default /*tw*/ {
+  wrapper: {
+    base: `
+      flex items-center justify-center w-full h-full
+      border-solid border-2 border-{color}/15
+    `,
+    variants: {
+      rounded: {
+        sm: "rounded-small",
+        md: "rounded-medium",
+        lg: "rounded-large",
+        none: "rounded-none",
+      },
+      dashed: {
+        true: "border-dashed",
+      },
+      dotted: {
+        true: "border-dotted",
+      },
+    },
+  },
+  content: "flex items-center justify-center",
+  label: {
+    base: "text-{color} select-none",
+    variants: {
+      size: {
+        sm: "text-small",
+        md: "text-medium",
+        lg: "text-large",
+      },
+    },
+  },
+  defaults: {
+    color: "neutral",
+    size: "md",
+    rounded: "md",
+    dashed: false,
+    dotted: false,
+  },
+};

package/ui.container-placeholder/constants.ts

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const COMPONENT_NAME = "UPlaceholder";

package/ui.container-placeholder/storybook/docs.mdx

@@ -0,0 +1,15 @@
+import { Meta, Title, Description, Primary, Controls, Stories } from "@storybook/addon-docs/blocks";
+import * as PlaceholderStories from "./stories";
+
+<Meta of={PlaceholderStories} />
+
+<Title />
+
+<Description />
+
+<Primary />
+
+<Controls />
+
+<Stories />
+

package/ui.container-placeholder/storybook/stories.ts

@@ -0,0 +1,126 @@
+import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import {
+  getArgs,
+  getArgTypes,
+  getSlotNames,
+  getSlotsFragment,
+  getDocsDescription,
+} from "../../utils/storybook";
+
+import UPlaceholder from "../UPlaceholder.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UText from "../../ui.text-block/UText.vue";
+import UHeader from "../../ui.text-header/UHeader.vue";
+
+import type { Props } from "../types";
+
+interface PlaceholderArgs extends Props {
+  slotTemplate?: string;
+  enum?: string;
+}
+
+export default {
+  id: "5052",
+  title: "Containers / Placeholder",
+  args: {
+    label: "Placeholder label.",
+    dashed: true,
+  },
+  argTypes: {
+    ...getArgTypes(UPlaceholder.__name),
+  },
+  parameters: {
+    docs: {
+      ...getDocsDescription(UPlaceholder.__name),
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<PlaceholderArgs> = (args: PlaceholderArgs) => ({
+  components: { UPlaceholder, URow, UText },
+  setup: () => ({ args, slots: getSlotNames(UPlaceholder.__name) }),
+  template: `
+    <UPlaceholder v-bind="args" class="h-32">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UPlaceholder>
+  `,
+});
+
+const EnumTemplate: StoryFn<PlaceholderArgs> = (args: PlaceholderArgs, { argTypes }) => ({
+  components: { UPlaceholder, URow },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <URow>
+      <UPlaceholder
+        v-for="option in argTypes?.[args.enum]?.options"
+        v-bind="getArgs(args, option)"
+        :key="option"
+        class="h-32"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const NoLabel = DefaultTemplate.bind({});
+NoLabel.args = { label: "" };
+
+export const Sizes = EnumTemplate.bind({});
+Sizes.args = { enum: "size", label: "{enumValue}" };
+
+export const Rounded = EnumTemplate.bind({});
+Rounded.args = { enum: "rounded", label: "{enumValue}" };
+
+export const BorderStyle: StoryFn<PlaceholderArgs> = (args: PlaceholderArgs) => ({
+  components: { UPlaceholder, URow },
+  setup: () => ({ args }),
+  template: `
+    <URow>
+      <UPlaceholder label="Solid" class="h-32" />
+      <UPlaceholder label="Dashed" dashed class="h-32" />
+      <UPlaceholder label="Dotted" dotted class="h-32" />
+    </URow>
+  `,
+});
+
+export const Colors = EnumTemplate.bind({});
+Colors.args = { enum: "color", label: "{enumValue}" };
+
+export const WithSlot: StoryFn<PlaceholderArgs> = (args: PlaceholderArgs) => ({
+  components: { UPlaceholder, UCol, UText, UHeader },
+  setup: () => ({ args }),
+  template: `
+    <UPlaceholder v-bind="args" class="h-32">
+      <UCol align="center" gap="2xs">
+        <UHeader size="lg">📦</UHeader>
+        <UText color="neutral">Custom slot content</UText>
+      </UCol>
+    </UPlaceholder>
+  `,
+});
+
+export const FixedSize: StoryFn<PlaceholderArgs> = (args: PlaceholderArgs) => ({
+  components: { UPlaceholder },
+  setup: () => ({ args }),
+  template: `
+    <UPlaceholder label="Fixed size: 300x150" class="w-[300px] h-[150px]" />
+  `,
+});
+
+export const LayoutExample: StoryFn<PlaceholderArgs> = (args: PlaceholderArgs) => ({
+  components: { UPlaceholder, URow, UCol },
+  setup: () => ({ args }),
+  template: `
+    <URow align="stretch" class="h-96">
+      <UPlaceholder label="Sidebar" class="w-64" />
+      <UCol align="stretch" grow>
+        <UPlaceholder label="Header" class="h-16" />
+        <UPlaceholder label="Main Content" />
+        <UPlaceholder label="Footer" class="h-12" />
+      </UCol>
+    </URow>
+  `,
+});

package/ui.container-placeholder/tests/UPlaceholder.test.ts

@@ -0,0 +1,173 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+
+import UPlaceholder from "../UPlaceholder.vue";
+
+import type { Props } from "../types";
+
+describe("UPlaceholder.vue", () => {
+  describe("Props", () => {
+    it("Size – applies the correct size class", () => {
+      const sizeClasses = {
+        sm: "text-small",
+        md: "text-medium",
+        lg: "text-large",
+      };
+
+      Object.entries(sizeClasses).forEach(([size, classes]) => {
+        const component = mount(UPlaceholder, {
+          props: {
+            size: size as Props["size"],
+            label: "Test",
+          },
+        });
+
+        const labelElement = component.find("span");
+
+        expect(labelElement.attributes("class")).toContain(classes);
+      });
+    });
+
+    it("Rounded – applies the correct rounded class", () => {
+      const roundedClasses = {
+        sm: "rounded-small",
+        md: "rounded-medium",
+        lg: "rounded-large",
+        none: "rounded-none",
+      };
+
+      Object.entries(roundedClasses).forEach(([rounded, classes]) => {
+        const component = mount(UPlaceholder, {
+          props: {
+            rounded: rounded as Props["rounded"],
+          },
+        });
+
+        expect(component.attributes("class")).toContain(classes);
+      });
+    });
+
+    it("Dashed – applies the correct border class", () => {
+      const dashed = true;
+      const expectedClass = "border-dashed";
+
+      const component = mount(UPlaceholder, {
+        props: {
+          dashed,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(expectedClass);
+    });
+
+    it("Dotted – applies the correct border class", () => {
+      const dotted = true;
+      const expectedClass = "border-dotted";
+
+      const component = mount(UPlaceholder, {
+        props: {
+          dotted,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(expectedClass);
+    });
+
+    it("Border – applies solid border class by default", () => {
+      const expectedClass = "border-solid";
+
+      const component = mount(UPlaceholder, {
+        props: {
+          dashed: false,
+          dotted: false,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(expectedClass);
+    });
+
+    it("Color – applies the correct color class", () => {
+      const color = "primary";
+
+      const component = mount(UPlaceholder, {
+        props: {
+          color,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(`border-${color}`);
+    });
+
+    it("Label – renders the correct label text", () => {
+      const label = "Test Label";
+
+      const component = mount(UPlaceholder, {
+        props: {
+          label,
+        },
+      });
+
+      expect(component.text()).toContain(label);
+    });
+
+    it("Label – sets aria-label from label prop", () => {
+      const label = "Test Area";
+
+      const component = mount(UPlaceholder, {
+        props: {
+          label,
+        },
+      });
+
+      expect(component.attributes("aria-label")).toBe(label);
+    });
+
+    it("Label – sets default aria-label when no label provided", () => {
+      const component = mount(UPlaceholder);
+
+      expect(component.attributes("aria-label")).toBe("Placeholder area");
+    });
+
+    it("Role – applies the correct role attribute", () => {
+      const component = mount(UPlaceholder);
+
+      expect(component.attributes("role")).toBe("region");
+    });
+
+    it("Data Test – applies the correct data-test attribute", () => {
+      const dataTest = "custom-test-id";
+
+      const component = mount(UPlaceholder, {
+        props: {
+          dataTest,
+        },
+      });
+
+      expect(component.attributes("data-test")).toBe(dataTest);
+    });
+  });
+
+  describe("Slots", () => {
+    it("Default – renders content from default slot", () => {
+      const slotContent = "Custom Content";
+      const slotClass = "custom-content";
+
+      const component = mount(UPlaceholder, {
+        slots: {
+          default: `<div class='${slotClass}'>${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.text()).toContain(slotContent);
+    });
+  });
+
+  describe("Exposed refs", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
+      const component = mount(UPlaceholder);
+
+      expect(component.vm.wrapperRef).toBeDefined();
+    });
+  });
+});

package/ui.container-placeholder/types.ts

@@ -0,0 +1,56 @@
+import defaultConfig from "./config";
+
+import type { ComponentConfig } from "../types";
+
+export type Config = typeof defaultConfig;
+
+export interface Props {
+  /**
+   * Placeholder label text.
+   */
+  label?: string;
+
+  /**
+   * Label text size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Border radius size.
+   */
+  rounded?: "sm" | "md" | "lg" | "none";
+
+  /**
+   * Use dashed border style.
+   */
+  dashed?: boolean;
+
+  /**
+   * Use dotted border style.
+   */
+  dotted?: boolean;
+
+  /**
+   * Border color.
+   */
+  color?:
+    | "primary"
+    | "secondary"
+    | "error"
+    | "warning"
+    | "success"
+    | "info"
+    | "notice"
+    | "neutral"
+    | "grayscale";
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string | null;
+}

package/ui.container-row/config.ts

@@ -12,6 +12,12 @@ export default /*tw*/ {
       block: {
         true: "w-full",
       },
+      grow: {
+        true: "flex-grow",
+      },
+      shrink: {
+        true: "flex-shrink",
+      },
       gap: {
         none: "gap-0",
         "2xs": "gap-1",
@@ -59,5 +65,7 @@ export default /*tw*/ {
     wrap: false,
     block: false,
     reverse: false,
+    grow: false,
+    shrink: false,
   },
 };

package/ui.container-row/tests/URow.test.ts

@@ -138,6 +138,32 @@ describe("URow.vue", () => {
       expect(component.attributes("class")).toContain(expectedClasses);
     });
 
+    it("Grow – applies the correct grow class", () => {
+      const grow = true;
+      const expectedClasses = "flex-grow";
+
+      const component = mount(URow, {
+        props: {
+          grow,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(expectedClasses);
+    });
+
+    it("Shrink – applies the correct shrink class", () => {
+      const shrink = true;
+      const expectedClasses = "flex-shrink";
+
+      const component = mount(URow, {
+        props: {
+          shrink,
+        },
+      });
+
+      expect(component.attributes("class")).toContain(expectedClasses);
+    });
+
     it("Tag – renders the correct HTML tag", () => {
       const tags = ["div", "section", "article", "main", "aside", "nav", "span"];
 

package/ui.container-row/types.ts

@@ -49,6 +49,16 @@ export interface Props {
    */
   block?: boolean;
 
+  /**
+   * Allow flex item to grow to fill available space (flex-grow).
+   */
+  grow?: boolean;
+
+  /**
+   * Allow flex item to shrink if necessary (flex-shrink).
+   */
+  shrink?: boolean;
+
   /**
    * Allows changing HTML tag.
    */

package/ui.data-list/UDataList.vue

@@ -7,7 +7,7 @@ import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
-import UEmpty from "../ui.text-empty/UEmpty.vue";
+import UEmpty from "../ui.container-empty/UEmpty.vue";
 
 import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";

package/ui.data-list/tests/UDataList.test.ts

@@ -2,7 +2,7 @@ import { mount, VueWrapper } from "@vue/test-utils";
 import { describe, it, expect } from "vitest";
 
 import UDataList from "../UDataList.vue";
-import UEmpty from "../../ui.text-empty/UEmpty.vue";
+import UEmpty from "../../ui.container-empty/UEmpty.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import draggable from "vuedraggable";
 

package/ui.data-table/UTable.vue

@@ -12,7 +12,7 @@ import {
 } from "vue";
 import { isEqual } from "lodash-es";
 
-import UEmpty from "../ui.text-empty/UEmpty.vue";
+import UEmpty from "../ui.container-empty/UEmpty.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 import ULoaderProgress from "../ui.loader-progress/ULoaderProgress.vue";
 import UTableRow from "./UTableRow.vue";

package/ui.data-table/tests/UTable.test.ts

@@ -4,7 +4,7 @@ import { nextTick } from "vue";
 
 import UTable from "../UTable.vue";
 import UTableRow from "../UTableRow.vue";
-import UEmpty from "../../ui.text-empty/UEmpty.vue";
+import UEmpty from "../../ui.container-empty/UEmpty.vue";
 import ULoaderProgress from "../../ui.loader-progress/ULoaderProgress.vue";
 import UDivider from "../../ui.container-divider/UDivider.vue";
 import {