vueless 1.3.6-beta.0 → 1.3.6-beta.10

package/components.d.ts

@@ -41,6 +41,7 @@ export { default as UBadge } from "./ui.text-badge/UBadge.vue";
 export { default as UDivider } from "./ui.container-divider/UDivider.vue";
 export { default as UCol } from "./ui.container-col/UCol.vue";
 export { default as URow } from "./ui.container-row/URow.vue";
+export { default as UGrid } from "./ui.container-grid/UGrid.vue";
 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";
@@ -55,6 +56,7 @@ export { default as UPage } from "./ui.container-page/UPage.vue";
 /* Images and Icons */
 export { default as UIcon } from "./ui.image-icon/UIcon.vue";
 export { default as UAvatar } from "./ui.image-avatar/UAvatar.vue";
+export { default as UAvatarGroup } from "./ui.image-avatar-group/UAvatarGroup.vue";
 /* Data */
 export { default as UTable } from "./ui.data-table/UTable.vue";
 export { default as UDataList } from "./ui.data-list/UDataList.vue";

package/components.ts

@@ -41,6 +41,7 @@ export { default as UBadge } from "./ui.text-badge/UBadge.vue";
 export { default as UDivider } from "./ui.container-divider/UDivider.vue";
 export { default as UCol } from "./ui.container-col/UCol.vue";
 export { default as URow } from "./ui.container-row/URow.vue";
+export { default as UGrid } from "./ui.container-grid/UGrid.vue";
 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";
@@ -55,6 +56,7 @@ export { default as UPage } from "./ui.container-page/UPage.vue";
 /* Images and Icons */
 export { default as UIcon } from "./ui.image-icon/UIcon.vue";
 export { default as UAvatar } from "./ui.image-avatar/UAvatar.vue";
+export { default as UAvatarGroup } from "./ui.image-avatar-group/UAvatarGroup.vue";
 /* Data */
 export { default as UTable } from "./ui.data-table/UTable.vue";
 export { default as UDataList } from "./ui.data-list/UDataList.vue";

package/constants.d.ts

@@ -180,6 +180,7 @@ export namespace COMPONENTS {
     let UDivider: string;
     let UCol: string;
     let URow: string;
+    let UGrid: string;
     let UGroup: string;
     let UGroups: string;
     let UAccordion: string;
@@ -193,6 +194,7 @@ export namespace COMPONENTS {
     let UDrawer: string;
     let UIcon: string;
     let UAvatar: string;
+    let UAvatarGroup: string;
     let UTable: string;
     let UDataList: string;
     let UTab: string;

package/constants.js

@@ -290,6 +290,7 @@ export const COMPONENTS = {
   UDivider: "ui.container-divider",
   UCol: "ui.container-col",
   URow: "ui.container-row",
+  UGrid: "ui.container-grid",
   UGroup: "ui.container-group",
   UGroups: "ui.container-groups",
   UAccordion: "ui.container-accordion",
@@ -305,6 +306,7 @@ export const COMPONENTS = {
   /* Images and Icons */
   UIcon: "ui.image-icon",
   UAvatar: "ui.image-avatar",
+  UAvatarGroup: "ui.image-avatar-group",
 
   /* Data */
   UTable: "ui.data-table",

package/index.d.ts

@@ -15,9 +15,18 @@ export {
   createDebounce,
   hasSlotContent,
 } from "./utils/helper";
+export {
+  cx,
+  cva,
+  compose,
+  setColor,
+  getDefaults,
+  vuelessConfig,
+  setVuelessConfig,
+  getMergedConfig as mergeConfigs,
+} from "./utils/ui";
 export { addToRequestQueue, removeFromRequestQueue } from "./utils/requestQueue";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
-export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
 export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar, setRootCSSVariables } from "./utils/theme";
 export { getArgs, getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */

package/index.ts

@@ -21,9 +21,18 @@ export {
   createDebounce,
   hasSlotContent,
 } from "./utils/helper";
+export {
+  cx,
+  cva,
+  compose,
+  setColor,
+  getDefaults,
+  vuelessConfig,
+  setVuelessConfig,
+  getMergedConfig as mergeConfigs,
+} from "./utils/ui";
 export { addToRequestQueue, removeFromRequestQueue } from "./utils/requestQueue";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
-export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
 export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar, setRootCSSVariables } from "./utils/theme";
 export { getArgs, getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.6-beta.0",
+  "version": "1.3.6-beta.10",
   "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.3.4",
+    "@vueless/storybook": "^1.3.14",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^10.0.2",
     "eslint-plugin-vue": "^10.3.0",

package/types.ts

@@ -39,6 +39,7 @@ import UTabConfig from "./ui.navigation-tab/config";
 import UTabsConfig from "./ui.navigation-tabs/config";
 import UBreadcrumbsConfig from "./ui.navigation-breadcrumbs/config";
 import UAvatarConfig from "./ui.image-avatar/config";
+import UAvatarGroupConfig from "./ui.image-avatar-group/config";
 import UIconConfig from "./ui.image-icon/config";
 import UCheckboxConfig from "./ui.form-checkbox/config";
 import UCheckboxGroupConfig from "./ui.form-checkbox-group/config";
@@ -306,6 +307,7 @@ export interface Components {
   UTabs: Partial<typeof UTabsConfig>;
   UBreadcrumbs: Partial<typeof UBreadcrumbsConfig>;
   UAvatar: Partial<typeof UAvatarConfig>;
+  UAvatarGroup: Partial<typeof UAvatarGroupConfig>;
   UIcon: Partial<typeof UIconConfig>;
   UCheckbox: Partial<typeof UCheckboxConfig>;
   UCheckboxGroup: Partial<typeof UCheckboxGroupConfig>;

package/ui.button/UButton.vue

@@ -62,7 +62,7 @@ defineExpose({
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
-  icon: Boolean(props.icon) || hasSlotContent(slots["default"]),
+  icon: Boolean(props.icon) || (!props.label && hasSlotContent(slots["default"])),
   leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left"]),
   rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
   label: Boolean(props.label),

package/ui.button/storybook/stories.ts

@@ -79,8 +79,8 @@ const MultiEnumTemplate: StoryFn<UButtonArgs> = (args: UButtonArgs, { argTypes }
 export const Default = DefaultTemplate.bind({});
 Default.args = { label: "Button" };
 
-export const Variant = EnumTemplate.bind({});
-Variant.args = { enum: "variant", label: "{enumValue}" };
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant", label: "{enumValue}" };
 
 export const Round = EnumTemplate.bind({});
 Round.args = { enum: "variant", label: "{enumValue}", round: true };

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

@@ -125,8 +125,8 @@ Description.args = {
   description: "Customize your cookie settings to enhance your browsing experience.",
 };
 
-export const Variant = EnumTemplate.bind({});
-Variant.args = { enum: "variant", title: "{enumValue}" };
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant", title: "{enumValue}" };
 
 export const BeforeTitleSlot = DefaultTemplate.bind({});
 BeforeTitleSlot.args = {

package/ui.container-drawer/UDrawer.vue

@@ -197,8 +197,6 @@ function closeDrawer() {
 }
 
 function onDragStart(e: MouseEvent | TouchEvent) {
-  e.preventDefault();
-
   const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
   const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
 
@@ -211,6 +209,8 @@ function onDragStart(e: MouseEvent | TouchEvent) {
 
   if (!props.handle || !isDraggingFromHandle.value) return;
 
+  e.preventDefault();
+
   document.addEventListener("mousemove", onDragMove);
   document.addEventListener("mouseup", onDragEnd);
   document.addEventListener("touchmove", onDragMove, { passive: false });

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

@@ -162,8 +162,8 @@ NoCloseOnCross.args = { closeOnCross: false };
 export const Position = EnumTemplate.bind({});
 Position.args = { enum: "position", modelValues: {} };
 
-export const Variant = EnumTemplate.bind({});
-Variant.args = { enum: "variant", modelValues: {} };
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant", modelValues: {} };
 
 export const BeforeTitleSlot = DefaultTemplate.bind({});
 BeforeTitleSlot.args = {

package/ui.container-grid/UGrid.vue

@@ -0,0 +1,39 @@
+<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),
+});
+
+const wrapperRef = useTemplateRef<HTMLElement>("wrapper");
+
+defineExpose({
+  /**
+   * A reference to the component's wrapper element for direct DOM manipulation.
+   * @property {HTMLElement}
+   */
+  wrapperRef,
+});
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { getDataTest, wrapperAttrs } = useUI<Config>(defaultConfig);
+</script>
+
+<template>
+  <component :is="tag" ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()">
+    <!-- @slot Use it to add grid items. -->
+    <slot />
+  </component>
+</template>

package/ui.container-grid/config.ts

@@ -0,0 +1,123 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "grid",
+    variants: {
+      cols: {
+        "1": "grid-cols-1",
+        "2": "grid-cols-2",
+        "3": "grid-cols-3",
+        "4": "grid-cols-4",
+        "5": "grid-cols-5",
+        "6": "grid-cols-6",
+        "7": "grid-cols-7",
+        "8": "grid-cols-8",
+        "9": "grid-cols-9",
+        "10": "grid-cols-10",
+        "11": "grid-cols-11",
+        "12": "grid-cols-12",
+      },
+      rows: {
+        "1": "grid-rows-1",
+        "2": "grid-rows-2",
+        "3": "grid-rows-3",
+        "4": "grid-rows-4",
+        "5": "grid-rows-5",
+        "6": "grid-rows-6",
+        "7": "grid-rows-7",
+        "8": "grid-rows-8",
+        "9": "grid-rows-9",
+        "10": "grid-rows-10",
+        "11": "grid-rows-11",
+        "12": "grid-rows-12",
+      },
+      gap: {
+        none: "gap-0",
+        "2xs": "gap-1",
+        xs: "gap-2",
+        sm: "gap-3",
+        md: "gap-4",
+        lg: "gap-5",
+        xl: "gap-6",
+        "2xl": "gap-8",
+      },
+      rowGap: {
+        none: "gap-y-0",
+        "2xs": "gap-y-1",
+        xs: "gap-y-2",
+        sm: "gap-y-3",
+        md: "gap-y-4",
+        lg: "gap-y-5",
+        xl: "gap-y-6",
+        "2xl": "gap-y-8",
+      },
+      colGap: {
+        none: "gap-x-0",
+        "2xs": "gap-x-1",
+        xs: "gap-x-2",
+        sm: "gap-x-3",
+        md: "gap-x-4",
+        lg: "gap-x-5",
+        xl: "gap-x-6",
+        "2xl": "gap-x-8",
+      },
+      align: {
+        start: "items-start",
+        end: "items-end",
+        center: "items-center",
+        stretch: "items-stretch",
+        baseline: "items-baseline",
+        normal: "items-normal",
+      },
+      content: {
+        start: "content-start",
+        end: "content-end",
+        center: "content-center",
+        around: "content-around",
+        evenly: "content-evenly",
+        between: "content-between",
+        normal: "content-normal",
+        stretch: "content-stretch",
+        baseline: "content-baseline",
+      },
+      justify: {
+        start: "justify-items-start",
+        end: "justify-items-end",
+        "end-safe": "justify-items-end-safe",
+        center: "justify-items-center",
+        "center-safe": "justify-items-center-safe",
+        stretch: "justify-items-stretch",
+        normal: "justify-items-normal",
+      },
+      placeContent: {
+        start: "place-content-start",
+        end: "place-content-end",
+        "end-safe": "place-content-end-safe",
+        center: "place-content-center",
+        "center-safe": "place-content-center-safe",
+        around: "place-content-around",
+        evenly: "place-content-evenly",
+        between: "place-content-between",
+        stretch: "place-content-stretch",
+        baseline: "place-content-baseline",
+      },
+      placeItems: {
+        start: "place-items-start",
+        end: "place-items-end",
+        "end-safe": "place-items-end-safe",
+        center: "place-items-center",
+        "center-safe": "place-items-center-safe",
+        stretch: "place-items-stretch",
+        baseline: "place-items-baseline",
+      },
+    },
+  },
+  defaults: {
+    gap: "md",
+    align: "normal",
+    content: "normal",
+    justify: "normal",
+    placeContent: "start",
+    placeItems: "start",
+    tag: "div",
+  },
+};

package/ui.container-grid/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 = "UGrid";

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

@@ -0,0 +1,17 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
+import { getSource } from "../../utils/storybook";
+
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />
+

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

@@ -0,0 +1,246 @@
+import {
+  getArgs,
+  getArgTypes,
+  getSlotNames,
+  getSlotsFragment,
+  getDocsDescription,
+} from "../../utils/storybook";
+
+import UGrid from "../UGrid.vue";
+import UText from "../../ui.text-block/UText.vue";
+import UPlaceholder from "../../ui.container-placeholder/UPlaceholder.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Props } from "../types";
+
+interface UGridArgs extends Props {
+  slotTemplate?: string;
+  enum:
+    | "gap"
+    | "rowGap"
+    | "colGap"
+    | "align"
+    | "content"
+    | "justify"
+    | "placeContent"
+    | "placeItems";
+  class?: string;
+  itemClass?: string;
+}
+
+export default {
+  id: "5025",
+  title: "Containers / Grid",
+  component: UGrid,
+  argTypes: {
+    ...getArgTypes(UGrid.__name),
+  },
+  parameters: {
+    docs: {
+      ...getDocsDescription(UGrid.__name),
+    },
+  },
+} as Meta;
+
+const defaultTemplate = `
+  <UPlaceholder label="1" class="min-h-10 col-span-1 row-span-3" />
+  <UPlaceholder label="2" class="min-h-10 col-span-3 row-span-1" />
+  <UPlaceholder label="3" class="min-h-10 col-span-3 row-span-2" />
+`;
+
+const DefaultTemplate: StoryFn<UGridArgs> = (args: UGridArgs) => ({
+  components: { UGrid, UPlaceholder },
+  setup: () => ({ args, slots: getSlotNames(UGrid.__name) }),
+  template: `
+    <UGrid v-bind="args">
+      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
+    </UGrid>
+  `,
+});
+
+const EnumTemplate: StoryFn<UGridArgs> = (args: UGridArgs, { argTypes }) => ({
+  components: { UGrid, UText, UPlaceholder, UCol },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <UCol block gap="lg">
+      <UGrid
+        v-for="option in argTypes?.[args.enum]?.options"
+        v-bind="getArgs(args, option)"
+        :key="option"
+        cols="3"
+        class="border border-primary border-dashed rounded p-4 w-full"
+        :class="args.class"
+      >
+        <UPlaceholder :label="option" class="h-auto" :class="args.itemClass" />
+        <UPlaceholder :label="option" class="h-auto" :class="args.itemClass" />
+        <UPlaceholder :label="option" class="h-auto" :class="args.itemClass" />
+        <UPlaceholder :label="option" class="h-auto" :class="args.itemClass" />
+        <UPlaceholder :label="option" class="h-auto" :class="args.itemClass" />
+        <UPlaceholder :label="option" class="h-auto" :class="args.itemClass" />
+      </UGrid>
+    </UCol>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = { cols: "4", rows: "3", gap: "md" };
+
+export const Gap = EnumTemplate.bind({});
+Gap.args = { enum: "gap" };
+Gap.parameters = {
+  docs: {
+    description: {
+      story: "Gap between items.",
+    },
+  },
+};
+
+export const RowGap = EnumTemplate.bind({});
+RowGap.args = { enum: "rowGap" };
+RowGap.parameters = {
+  docs: {
+    description: {
+      story: "Vertical gap override.",
+    },
+  },
+};
+
+export const ColGap = EnumTemplate.bind({});
+ColGap.args = { enum: "colGap" };
+ColGap.parameters = {
+  docs: {
+    description: {
+      story: "Horizontal gap override.",
+    },
+  },
+};
+
+export const Justify = EnumTemplate.bind({});
+Justify.args = { enum: "justify", itemClass: "w-auto min-w-20" };
+Justify.parameters = {
+  docs: {
+    description: {
+      story: "Horizontal alignment (justify-items).",
+    },
+  },
+};
+
+export const Align = EnumTemplate.bind({});
+Align.args = {
+  enum: "align",
+  class: "h-40 !content-normal",
+};
+Align.parameters = {
+  docs: {
+    description: {
+      story: "Vertical alignment (align-items).",
+    },
+  },
+};
+
+export const Content: StoryFn<UGridArgs> = (args: UGridArgs, { argTypes }) => ({
+  components: { UGrid, UText, UPlaceholder, UCol },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <UCol gap="lg" block>
+      <UGrid
+        v-for="option in argTypes?.[args.enum]?.options"
+        v-bind="getArgs(args, option)"
+        :key="option"
+        cols="3"
+        class="h-52 w-full border border-primary border-dashed rounded-medium p-4"
+      >
+        <UPlaceholder :label="option" />
+        <UPlaceholder :label="option" />
+        <UPlaceholder :label="option" />
+        <UPlaceholder :label="option" />
+        <UPlaceholder :label="option" />
+      </UGrid>
+    </UCol>
+  `,
+});
+Content.args = { enum: "content", gap: "md" };
+Content.parameters = {
+  docs: {
+    description: {
+      story: "Items vertical align for multi-row grid containers (align-content).",
+    },
+  },
+};
+
+export const PlaceContent: StoryFn<UGridArgs> = (args: UGridArgs, { argTypes }) => ({
+  components: { UGrid, UText, UPlaceholder, UCol },
+  setup: () => {
+    function getItemClass(option: string) {
+      return option === "stretch" ? "w-auto" : "size-14";
+    }
+
+    function getGridClass(option: string) {
+      return option === "stretch" ? "grid-cols-2" : "grid-cols-[repeat(2,56px)]";
+    }
+
+    return { args, argTypes, getArgs, getItemClass, getGridClass };
+  },
+  template: `
+    <UCol block gap="lg">
+      <UGrid
+        v-for="option in argTypes?.[args.enum]?.options"
+        v-bind="getArgs(args, option)"
+        :key="option"
+        class="border border-primary border-dashed rounded p-4 w-full h-56"
+        :class="getGridClass(option)"
+      >
+        <UPlaceholder :label="option" :class="getItemClass(option)" />
+        <UPlaceholder :label="option" :class="getItemClass(option)" />
+        <UPlaceholder :label="option" :class="getItemClass(option)" />
+        <UPlaceholder :label="option" :class="getItemClass(option)" />
+      </UGrid>
+    </UCol>
+  `,
+});
+PlaceContent.args = { enum: "placeContent" };
+PlaceContent.parameters = {
+  docs: {
+    description: {
+      story: "Control how content is justified and aligned within the grid (place-content).",
+    },
+  },
+};
+
+export const PlaceItems: StoryFn<UGridArgs> = (args: UGridArgs, { argTypes }) => ({
+  components: { UGrid, UText, UPlaceholder, UCol },
+  setup: () => {
+    function getItemClass(option: string) {
+      return option === "stretch" ? "w-auto" : "size-14";
+    }
+
+    return { args, argTypes, getArgs, getItemClass };
+  },
+  template: `
+    <UCol block gap="lg">
+      <UGrid
+        v-for="option in argTypes?.[args.enum]?.options"
+        v-bind="getArgs(args, option)"
+        :key="option"
+        cols="3"
+        class="border border-primary border-dashed rounded p-4 w-full h-56"
+      >
+        <UPlaceholder :label="option" :class="getItemClass(option)" />
+        <UPlaceholder :label="option" :class="getItemClass(option)" />
+        <UPlaceholder :label="option" :class="getItemClass(option)" />
+        <UPlaceholder :label="option" :class="getItemClass(option)" />
+        <UPlaceholder :label="option" :class="getItemClass(option)" />
+        <UPlaceholder :label="option" :class="getItemClass(option)" />
+      </UGrid>
+    </UCol>
+  `,
+});
+PlaceItems.args = { enum: "placeItems" };
+PlaceItems.parameters = {
+  docs: {
+    description: {
+      story: "Control how items are justified and aligned within the grid (place-items).",
+    },
+  },
+};