vueless 0.0.244 → 0.0.245

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.244",
+  "version": "0.0.245",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.44",
+    "@vueless/plugin-vite": "^0.0.45",
     "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.13",
     "autoprefixer": "^10.4.19",

package/ui.container-group/configs/default.config.js

@@ -12,8 +12,22 @@ export default /*tw*/ {
   headerFallback: "flex items-center",
   title: "{UHeader} pr-2",
   underline: "{UDivider} pt-1.5",
+  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",
+      },
+    },
+  },
   defaultVariants: {
-    upperlined: true,
+    gap: "md",
+    upperlined: false,
     underlined: false,
   },
 };

package/ui.container-group/index.stories.js

@@ -60,12 +60,23 @@ upperlined.args = { upperlined: false, underlined: true };
 export const underlined = DefaultTemplate.bind({});
 underlined.args = { upperlined: true, underlined: false };
 
+export const nestedGroups = DefaultTemplate.bind({});
+nestedGroups.args = {
+  title: "",
+  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>
+  `,
+};
+
 export const slotDefault = DefaultTemplate.bind({});
 slotDefault.args = {
   slotTemplate: `
-    <template #default>
-      <UInput placeholder="placeholder" label="Label" />
-    </template>
+    <UInput placeholder="placeholder" label="Label" />
   `,
 };
 slotDefault.parameters = {
@@ -79,10 +90,10 @@ slotDefault.parameters = {
 export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
-    ${defaultTemplate}
     <template #right>
       <UButton size="sm" label="Edit"/>
     </template>
+    ${defaultTemplate}
   `,
 };
 slotRight.parameters = {

package/ui.container-group/index.vue

@@ -24,8 +24,10 @@
       <UDivider v-if="underlined" size="xl" v-bind="underlineAttrs" />
     </template>
 
-    <!-- @slot Use it to add something inside. -->
-    <slot />
+    <div v-bind="contentAttrs">
+      <!-- @slot Use it to add something inside. -->
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -50,6 +52,15 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * The distance between nested elements.
+   * @values none, xs, sm, md, lg, xl
+   */
+  gap: {
+    type: String,
+    default: UIService.get(defaultConfig, UGroup).default.gap,
+  },
+
   /**
    * Show line above the header.
    */
@@ -90,5 +101,6 @@ const {
   titleAttrs,
   upperlineAttrs,
   underlineAttrs,
+  contentAttrs,
 } = useAttrs(props);
 </script>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.244",
+  "version": "0.0.245",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3645,6 +3645,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "gap",
+              "description": "The distance between nested elements.",
+              "value": {
+                "kind": "expression",
+                "type": "'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+              },
+              "default": "md"
+            },
             {
               "name": "upperlined",
               "description": "Show line above the header.",
@@ -3652,7 +3661,7 @@
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "true"
+              "default": "false"
             },
             {
               "name": "underlined",
@@ -3709,58 +3718,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "UGroups",
-          "description": "",
-          "attributes": [
-            {
-              "name": "gap",
-              "description": "The distance between nested elements.",
-              "value": {
-                "kind": "expression",
-                "type": "'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'"
-              },
-              "default": "md"
-            },
-            {
-              "name": "align",
-              "description": "Nested items align (flex align-items).",
-              "value": {
-                "kind": "expression",
-                "type": "'start' | 'end' | 'center' | 'stretch' | 'baseline'"
-              },
-              "default": "start"
-            },
-            {
-              "name": "config",
-              "description": "Component ui config object.",
-              "value": {
-                "kind": "expression",
-                "type": "object"
-              },
-              "default": "{}"
-            },
-            {
-              "name": "dataCy",
-              "description": "Data-cy 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/index.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "UHeader",
           "description": "",

package/ui.container-groups/Docs.mdx

@@ -1,16 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../service.storybook";
-
-import * as stories from "./index.stories";
-import defaultConfig from "./configs/default.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-groups/composables/attrs.composable.js

@@ -1,33 +0,0 @@
-import { computed } from "vue";
-
-import { cva } from "../../service.ui";
-import useUI from "../../composable.ui";
-import defaultConfig from "../configs/default.config";
-
-export default function useAttrs(props) {
-  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
-  const attrs = {};
-
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
-
-    const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
-          ...props,
-        });
-      }
-
-      return "";
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
-
-  return {
-    ...attrs,
-    config,
-  };
-}

package/ui.container-groups/configs/default.config.js

@@ -1,26 +0,0 @@
-export default /*tw*/ {
-  wrapper: {
-    base: "flex flex-col",
-    variants: {
-      gap: {
-        none: "space-y-0",
-        xs: "space-y-10",
-        sm: "space-y-12",
-        md: "space-y-14",
-        lg: "space-y-16",
-        xl: "space-y-20",
-      },
-      align: {
-        end: "items-end",
-        start: "items-start",
-        center: "items-center",
-        stretch: "items-stretch",
-        baseline: "items-baseline",
-      },
-    },
-  },
-  defaultVariants: {
-    gap: "md",
-    align: "start",
-  },
-};

package/ui.container-groups/constants/index.js

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

package/ui.container-groups/index.stories.js

@@ -1,52 +0,0 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
-
-import UGroups from "../ui.container-groups";
-import UGroup from "../ui.container-group";
-import UCol from "../ui.container-col";
-import UInput from "../ui.form-input";
-
-/**
- * The `UGroups` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-groups)
- */
-export default {
-  id: "5040",
-  title: "Containers / Groups",
-  component: UGroups,
-  args: {},
-  argTypes: {
-    ...getArgTypes(UGroups.name),
-  },
-  parameters: {
-    docs: {
-      story: {
-        iframeHeight: 760,
-      },
-    },
-  },
-};
-
-const defaultTemplate = `
-  <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>
-`;
-
-const DefaultTemplate = (args) => ({
-  components: { UGroups, UGroup, UCol, UInput },
-  setup() {
-    const slots = getSlotNames(UGroups.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UGroups v-bind="args">
-      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
-    </UGroups>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/ui.container-groups/index.vue

@@ -1,55 +0,0 @@
-<template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
-    <!-- @slot Use it to add something inside. -->
-    <slot />
-  </div>
-</template>
-
-<script setup>
-import UIService from "../service.ui";
-
-import { UGroups } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UGroups", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * The distance between nested elements.
-   * @values none, xs, sm, md, lg, xl
-   */
-  gap: {
-    type: String,
-    default: UIService.get(defaultConfig, UGroups).default.gap,
-  },
-
-  /**
-   * Nested items align (flex align-items).
-   * @values start, end, center, stretch, baseline
-   */
-  align: {
-    type: String,
-    default: UIService.get(defaultConfig, UGroups).default.align,
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const { wrapperAttrs } = useAttrs(props);
-</script>