vueless 0.0.113 → 0.0.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.113",
+  "version": "0.0.114",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button/index.vue

@@ -65,7 +65,7 @@ const props = defineProps({
 
   /**
    * Button size.
-   * @values sm, md, lg
+   * @values xs, sm, md, lg
    */
   size: {
     type: String,

package/ui.container-row/composables/attrs.composable.js

@@ -13,7 +13,13 @@ export function useAttrs(props) {
     compoundVariants: wrapper.compoundVariants,
   });
 
-  const wrapperClasses = computed(() => cvaWrapper({ noMobile: props.noMobile }));
+  const wrapperClasses = computed(() =>
+    cvaWrapper({
+      gap: props.gap,
+      align: props.align,
+      noMobile: props.noMobile,
+    }),
+  );
 
   const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
 

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

@@ -1,14 +1,43 @@
 export default /*tw*/ {
   wrapper: {
-    base: "flex items-start w-full",
+    base: "flex flex-col md:flex-row w-full",
     variants: {
+      gap: {
+        none: "space-y-0 md:space-x-0",
+        "2xs": "space-y-1 md:space-x-1",
+        xs: "space-y-2 md:space-x-2",
+        sm: "space-y-3 md:space-x-3",
+        md: "space-y-4 md:space-x-4",
+        lg: "space-y-5 md:space-x-5",
+        xl: "space-y-6 md:space-x-6",
+        "2xl": "space-y-8 md:space-x-8",
+      },
+      align: {
+        end: "items-end",
+        start: "items-start",
+        center: "items-center",
+        stretch: "items-stretch",
+        baseline: "items-baseline",
+      },
       noMobile: {
-        true: "flex-row space-x-4",
-        false: "flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4",
+        true: "flex-row space-y-0",
+        false: "md:space-y-0",
       },
     },
+    compoundVariants: [
+      { gap: "none", noMobile: true, class: "space-x-0" },
+      { gap: "2xs", noMobile: true, class: "space-x-1" },
+      { gap: "xs", noMobile: true, class: "space-x-2" },
+      { gap: "sm", noMobile: true, class: "space-x-3" },
+      { gap: "md", noMobile: true, class: "space-x-4" },
+      { gap: "lg", noMobile: true, class: "space-x-5" },
+      { gap: "xl", noMobile: true, class: "space-x-6" },
+      { gap: "2xl", noMobile: true, class: "space-x-8" },
+    ],
   },
   defaultVariants: {
+    gap: "md",
+    align: "start",
     noMobile: false,
   },
 };

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

@@ -2,6 +2,8 @@ import { getArgTypes } from "../service.storybook";
 
 import URow from "../ui.container-row";
 import UInput from "../ui.form-input";
+import UGroup from "../ui.container-group";
+import UButton from "../ui.button";
 
 export default {
   id: "5020",
@@ -13,24 +15,67 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { URow, UInput },
+  components: { URow, UInput, UButton },
   setup() {
     return { args };
   },
   template: `
     <URow v-bind="args">
-      ${args.slotTemplate}
+      ${
+        args.slotTemplate ||
+        `
+          <UInput label="Name" />
+          <UButton label="Submit" size="xs" block />
+        `
+      }
     </URow>
   `,
 });
 
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-  slotTemplate: `
-    <UInput label="Name" />
-    <UInput label="Lastname" />
+const GapTemplate = (args, { argTypes } = {}) => ({
+  components: { UGroup, URow, UInput },
+  setup() {
+    return {
+      args,
+      gaps: argTypes.gap.options,
+    };
+  },
+  template: `
+    <UGroup size="lg">
+      <URow v-for="(gap, index) in gaps" :key="index" v-bind="args" :gap="gap" align="center">
+        <UInput :label="gap" />
+        <UInput :label="gap" />
+      </URow>
+    </UGroup>
   `,
-};
+});
+
+const AlignTemplate = (args, { argTypes } = {}) => ({
+  components: { UGroup, URow, UInput, UButton },
+  setup() {
+    return {
+      args,
+      aligns: argTypes.align.options,
+    };
+  },
+  template: `
+    <UGroup size="lg">
+      <URow v-for="(align, index) in aligns" :key="index" v-bind="args" :align="align">
+        <UButton :label="align" size="xs" block />
+        <UInput label="Name" />
+      </URow>
+    </UGroup>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Gap = GapTemplate.bind({});
+Gap.args = {};
+
+export const Align = AlignTemplate.bind({});
+Align.args = {};
 
 export const noMobile = DefaultTemplate.bind({});
 noMobile.args = {
@@ -53,8 +98,8 @@ nestedRows.args = {
   `,
 };
 
-export const textBlocks = DefaultTemplate.bind({});
-textBlocks.args = {
+export const textBlocksExample = DefaultTemplate.bind({});
+textBlocksExample.args = {
   slotTemplate: `
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit,

package/ui.container-row/index.vue

@@ -16,6 +16,24 @@ import { useAttrs } from "./composables/attrs.composable";
 defineOptions({ name: "URow", inheritAttrs: false });
 
 const props = defineProps({
+  /**
+   * Row spacing between nested elements.
+   * @values none, 2xs, xs, sm, md, lg, xl, 2xl
+   */
+  gap: {
+    type: String,
+    default: UIService.get(defaultConfig, URow).default.gap,
+  },
+
+  /**
+   * Row nested elements vertical align (align-items).
+   * @values start, end, center, stretch, baseline
+   */
+  align: {
+    type: String,
+    default: UIService.get(defaultConfig, URow).default.align,
+  },
+
   /**
    * Disables mobile adaptivity.
    */

package/ui.form-calendar/index.stories.js

@@ -3,7 +3,7 @@ import { getArgTypes, getSlotNames } from "../service.storybook";
 import UCalendar from "../ui.form-calendar";
 
 export default {
-  id: "3171",
+  id: "3165",
   title: "Form Inputs & Controls / Calendar",
   component: UCalendar,
   args: {

package/ui.other-dot/configs/default.config.js

@@ -1,15 +1,17 @@
 export default /*tw*/ {
   wrapper: {
-    base: "rounded-full bg-{color}-500 mr-1",
+    base: "rounded-full bg-{color}-500",
     variants: {
       color: {
         white: "bg-white",
         grayscale: "bg-gray-900",
       },
       size: {
+        xs: "size-0.5",
         sm: "size-1",
         md: "size-1.5",
         lg: "size-2",
+        xl: "size-2.5",
       },
     },
   },

package/ui.other-dot/index.stories.js

@@ -1,5 +1,7 @@
 import UDot from "../ui.other-dot";
 import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
+import UBadge from "../ui.text-badge";
 
 import { getArgTypes } from "../service.storybook";
 
@@ -23,7 +25,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UDot, URow },
+  components: { UGroup, URow, UDot, UBadge },
   setup() {
     return {
       args,
@@ -31,19 +33,17 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <URow>
-      <UDot
-        v-for="(color, index) in colors"
-        v-bind="args"
-        :color="color"
-        :key="index"
-      />
-    </URow>
+    <UGroup>
+      <URow v-for="(color, index) in colors" :key="index" gap="none" align="center">
+        <UDot v-bind="args" :color="color"/>
+        <UBadge :label="color" :color="color" variant="thirdary" />
+      </URow>
+    </UGroup>
   `,
 });
 
 const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UDot, URow },
+  components: { UGroup, URow, UDot, UBadge },
   setup() {
     return {
       args,
@@ -51,20 +51,13 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <URow>
-      <UDot
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :key="index"
-      />
-    </URow>
+    <UGroup>
+      <URow v-for="(size, index) in sizes" :key="index" gap="none" align="center">
+        <UDot v-bind="args" :size="size"/>
+        <UBadge :label="size" variant="thirdary" />
+      </URow>
+    </UGroup>
   `,
-  methods: {
-    getText(value) {
-      return `Tag ${value}`;
-    },
-  },
 });
 
 export const Default = DefaultTemplate.bind({});

package/ui.other-dot/index.vue

@@ -24,7 +24,7 @@ const props = defineProps({
 
   /**
    * Dot size.
-   * @values sm, md, lg
+   * @values xs, sm, md, lg, xl
    */
   size: {
     type: String,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.113",
+  "version": "0.0.114",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -559,7 +559,7 @@
               "description": "Button size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'xs' | 'sm' | 'md' | 'lg'"
               },
               "default": "md"
             },
@@ -1962,7 +1962,7 @@
               "description": "Dot size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -5807,6 +5807,24 @@
           "name": "URow",
           "description": "",
           "attributes": [
+            {
+              "name": "gap",
+              "description": "Row spacing between nested elements.",
+              "value": {
+                "kind": "expression",
+                "type": "'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'"
+              },
+              "default": "md"
+            },
+            {
+              "name": "align",
+              "description": "Row nested elements vertical align (align-items).",
+              "value": {
+                "kind": "expression",
+                "type": "'start' | 'end' | 'center' | 'stretch' | 'baseline'"
+              },
+              "default": "start"
+            },
             {
               "name": "noMobile",
               "description": "Disables mobile adaptivity.",