vueless 0.0.537 → 0.0.538

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.537",
+  "version": "0.0.538",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.container-group/UGroup.vue

@@ -12,7 +12,6 @@ import type { UGroupProps } from "./types.ts";
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<UGroupProps>(), {
-  gap: getDefault<UGroupProps>(defaultConfig, UGroup).gap,
   upperlined: getDefault<UGroupProps>(defaultConfig, UGroup).upperlined,
   underlined: getDefault<UGroupProps>(defaultConfig, UGroup).underlined,
   dataTest: "",

package/ui.container-group/config.ts

@@ -12,21 +12,8 @@ export default /*tw*/ {
   header: "flex items-center justify-between",
   headerLeftFallback: "flex items-center",
   title: "{UHeader} pr-2",
-  content: {
-    base: "flex flex-col items-stretch",
-    variants: {
-      gap: {
-        none: "gap-0",
-        xs: "gap-8",
-        sm: "gap-10",
-        md: "gap-12",
-        lg: "gap-14",
-        xl: "gap-16",
-      },
-    },
-  },
+  content: "",
   defaults: {
-    gap: "md",
     upperlined: false,
     underlined: false,
   },

package/ui.container-group/types.ts

@@ -8,11 +8,6 @@ export interface UGroupProps {
    */
   title?: string;
 
-  /**
-   * The distance between nested elements.
-   */
-  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
-
   /**
    * Show line above the header.
    */

package/ui.container-groups/UGroups.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { getDefault } from "../utils/ui.ts";
+
+import { UGroups } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UGroupsProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UGroupsProps>(), {
+  gap: getDefault<UGroupsProps>(defaultConfig, UGroups).gap,
+  dataTest: "",
+});
+
+const { wrapperAttrs } = useAttrs(props);
+</script>
+
+<template>
+  <div v-bind="wrapperAttrs" :data-test="dataTest">
+    <!-- @slot Use it to add something inside. -->
+    <slot />
+  </div>
+</template>

package/ui.container-groups/config.ts

@@ -0,0 +1,18 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "flex flex-col items-stretch",
+    variants: {
+      gap: {
+        none: "gap-0",
+        xs: "gap-8",
+        sm: "gap-10",
+        md: "gap-12",
+        lg: "gap-14",
+        xl: "gap-16",
+      },
+    },
+  },
+  defaults: {
+    gap: "md",
+  },
+};

package/ui.container-groups/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 UGroups = "UGroup";

package/ui.container-groups/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/storybook.ts";
+
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?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-groups/storybook/stories.ts

@@ -0,0 +1,59 @@
+import { getArgTypes, getSlotNames } from "../../utils/storybook.ts";
+
+import UGroups from "../../ui.container-groups/UGroups.vue";
+import UGroup from "../../ui.container-group/UGroup.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UInput from "../../ui.form-input/UInput.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UGroupsProps } from "../types.ts";
+
+interface UGroupsArgs extends UGroupsProps {
+  slotTemplate?: string;
+}
+
+/**
+ * The `UGroups` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-groups)
+ */
+export default {
+  id: "5035",
+  title: "Containers / Groups",
+  component: UGroups,
+  args: {},
+  argTypes: {
+    ...getArgTypes(UGroups.__name),
+  },
+  parameters: {
+    docs: {
+      story: {
+        iframeHeight: 360,
+      },
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UGroupsArgs> = (args: UGroupsArgs) => ({
+  components: { UGroups, UGroup, UCol, UInput },
+  setup() {
+    const slots = getSlotNames(UGroups.__name);
+
+    return { args, slots };
+  },
+  template: `
+    <UGroups v-bind="args">
+      ${args.slotTemplate}
+    </UGroups>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  slotTemplate: `
+    <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
+      <UCol>
+        <UInput placeholder="input" label="Label" />
+        <UInput placeholder="input" label="Label" />
+      </UCol>
+    </UGroup>
+  `,
+};

package/ui.container-groups/types.ts

@@ -0,0 +1,20 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UGroupsProps {
+  /**
+   * The distance between nested elements.
+   */
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.container-groups/useAttrs.ts

@@ -0,0 +1,18 @@
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UGroupsProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UGroupsProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.537",
+  "version": "0.0.538",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5132,24 +5132,6 @@
                 "type": "string"
               }
             },
-            {
-              "name": "gap",
-              "required": false,
-              "description": "The distance between nested elements.",
-              "enum": [
-                "none",
-                "xs",
-                "sm",
-                "md",
-                "lg",
-                "xl"
-              ],
-              "value": {
-                "kind": "expression",
-                "type": "union"
-              },
-              "default": "md"
-            },
             {
               "name": "upperlined",
               "required": false,
@@ -5217,6 +5199,59 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "UGroups",
+          "description": "",
+          "attributes": [
+            {
+              "name": "gap",
+              "required": false,
+              "description": "The distance between nested elements.",
+              "enum": [
+                "none",
+                "xs",
+                "sm",
+                "md",
+                "lg",
+                "xl"
+              ],
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "md"
+            },
+            {
+              "name": "config",
+              "required": false,
+              "description": "Component config object.",
+              "value": {
+                "kind": "expression",
+                "type": "Config"
+              }
+            },
+            {
+              "name": "dataTest",
+              "required": false,
+              "description": "Data-test attribute for automated testing.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Use it to add something inside."
+            }
+          ],
+          "source": {
+            "module": "./src/ui.container-groups/UGroups.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "UHeader",
           "description": "",