vueless 1.3.6-beta.2 → 1.3.6-beta.4

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";

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";

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;

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",

package/package.json

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

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).",
+    },
+  },
+};

package/ui.container-grid/types.ts

@@ -0,0 +1,91 @@
+import defaultConfig from "./config";
+
+import type { ComponentConfig } from "../types";
+
+export type Config = typeof defaultConfig;
+
+export interface Props {
+  /**
+   * Number of columns.
+   */
+  cols?: string;
+
+  /**
+   * Number of rows.
+   */
+  rows?: string;
+
+  /**
+   * Gap between items.
+   */
+  gap?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+  /**
+   * Vertical gap override.
+   */
+  rowGap?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+  /**
+   * Horizontal gap override.
+   */
+  colGap?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+  /**
+   * Vertical alignment (align-items).
+   */
+  align?: "start" | "end" | "center" | "stretch" | "baseline" | "normal";
+
+  /**
+   * Items vertical align for multi-row grid containers (align-content).
+   */
+  content?:
+    | "start"
+    | "end"
+    | "center"
+    | "around"
+    | "evenly"
+    | "between"
+    | "normal"
+    | "stretch"
+    | "baseline";
+
+  /**
+   * Control how grid items are aligned along their inline axis (justify-items).
+   */
+  justify?: "start" | "end" | "end-safe" | "center" | "center-safe" | "stretch" | "normal";
+
+  /**
+   * Control how content is justified and aligned within the grid (place-content).
+   */
+  placeContent?:
+    | "start"
+    | "end"
+    | "end-safe"
+    | "center"
+    | "center-safe"
+    | "around"
+    | "evenly"
+    | "between"
+    | "stretch"
+    | "baseline";
+
+  /**
+   * Control how items are justified and aligned within the grid (place-items).
+   */
+  placeItems?: "start" | "end" | "end-safe" | "center" | "center-safe" | "stretch" | "baseline";
+
+  /**
+   * Allows changing HTML tag.
+   */
+  tag?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string | null;
+}