vueless 0.0.237 → 0.0.239

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.237",
+  "version": "0.0.239",
   "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.43",
+    "@vueless/plugin-vite": "^0.0.44",
     "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.13",
     "autoprefixer": "^10.4.19",

package/ui.button/index.stories.js

@@ -3,7 +3,7 @@ import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storyboo
 import UButton from "../ui.button";
 import UIcon from "../ui.image-icon";
 import URow from "../ui.container-row";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 
 /**
  * The `UButton` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.button)
@@ -77,7 +77,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 });
 
 const ColorTemplate = (args, { argTypes } = {}) => ({
-  components: { UButton, URow, UGroup },
+  components: { UButton, URow, UCol },
   setup() {
     return {
       args,
@@ -86,7 +86,7 @@ const ColorTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup>
+    <UCol>
       <URow v-for="(variant, index) in variants" :key="index">
         <UButton
           v-for="(color, index) in colors"
@@ -97,7 +97,7 @@ const ColorTemplate = (args, { argTypes } = {}) => ({
           :key="index"
         />
       </URow>
-    </UGroup>
+    </UCol>
   `,
 });
 

package/ui.container-col/Docs.mdx

@@ -0,0 +1,16 @@
+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-col/composables/attrs.composable.js

@@ -0,0 +1,33 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+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-col/configs/default.config.js

@@ -0,0 +1,46 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "flex flex-col",
+    variants: {
+      reverse: {
+        false: "flex-col",
+        true: "flex-col-reverse",
+      },
+      wrap: {
+        true: "flex-wrap",
+      },
+      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",
+      },
+      align: {
+        end: "items-end",
+        start: "items-start",
+        center: "items-center",
+        stretch: "items-stretch",
+        baseline: "items-baseline",
+      },
+      justify: {
+        end: "justify-end",
+        start: "justify-start",
+        center: "justify-center",
+        around: "justify-around",
+        evenly: "justify-evenly",
+        between: "justify-between",
+      },
+    },
+  },
+  defaultVariants: {
+    gap: "md",
+    align: "start",
+    justify: "start",
+    wrap: false,
+    reverse: false,
+  },
+};

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

@@ -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 UCol = "UCol";

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

@@ -0,0 +1,64 @@
+import { getArgTypes } from "../service.storybook";
+
+import UCol from "../ui.container-col";
+import UInput from "../ui.form-input";
+import UButton from "../ui.button";
+
+/**
+ * The `UGroup` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-group)
+ */
+export default {
+  id: "5015",
+  title: "Containers / Col",
+  component: UCol,
+  args: {},
+  argTypes: {
+    ...getArgTypes(UCol.name),
+  },
+  parameters: {
+    docs: {
+      story: {
+        iframeHeight: 360,
+      },
+    },
+  },
+};
+
+const defaultSlotTemplate = `
+  <template #default>
+    <UInput placeholder="Vasyl" label="Name" />
+    <UInput placeholder="Vasylenko" label="Surname" />
+    <UInput placeholder="Kyiv" label="Town" />
+  </template>
+`;
+
+const DefaultTemplate = (args) => ({
+  components: { UCol, UInput, UButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UCol v-bind="args">
+      ${args.slotTemplate || defaultSlotTemplate}
+    </UCol>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const slotDefault = DefaultTemplate.bind({});
+slotDefault.args = {
+  slotTemplate: `
+    <template #default>
+      <UInput placeholder="placeholder" label="Label" />
+    </template>
+  `,
+};
+slotDefault.parameters = {
+  docs: {
+    story: {
+      iframeHeight: 240,
+    },
+  },
+};

package/ui.container-col/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div v-bind="wrapperAttrs" :data-cy="dataCy">
+    <!-- @slot Use it to add something inside. -->
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import UIService from "../service.ui";
+
+import { UCol } 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: "UCol", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * The distance between nested elements.
+   * @values none, 2xs, xs, sm, md, lg, xl, 2xl
+   */
+  gap: {
+    type: String,
+    default: UIService.get(defaultConfig, UCol).default.gap,
+  },
+
+  /**
+   * Nested items align (flex align-items).
+   * @values start, end, center, stretch, baseline
+   */
+  align: {
+    type: String,
+    default: UIService.get(defaultConfig, UCol).default.align,
+  },
+
+  /**
+   * Nested items horizontally align (flex justify-content).
+   * @values start, end, center, around, evenly, between
+   */
+  justify: {
+    type: String,
+    default: UIService.get(defaultConfig, UCol).default.justify,
+  },
+
+  /**
+   * Reverse nested items order.
+   */
+  reverse: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UCol).default.reverse,
+  },
+
+  /**
+   * Allow items to wrap (flex flex-wrap).
+   */
+  wrap: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UCol).default.wrap,
+  },
+
+  /**
+   *Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { wrapperAttrs } = useAttrs(props);
+</script>

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

@@ -54,7 +54,7 @@ export default /*tw*/ {
     },
   },
   label: {
-    base: "px-2 shrink-0",
+    base: "px-2 shrink-0 text-sm",
     variants: {
       variant: {
         light: "text-gray-400",

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

@@ -12,49 +12,7 @@ export default /*tw*/ {
   headerFallback: "flex items-center",
   title: "{UHeader} pr-2",
   underline: "{UDivider} pt-1.5",
-  content: {
-    base: "flex flex-col",
-    variants: {
-      reverse: {
-        false: "flex-col",
-        true: "flex-col-reverse",
-      },
-      wrap: {
-        true: "flex-wrap",
-      },
-      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",
-      },
-      align: {
-        end: "items-end",
-        start: "items-start",
-        center: "items-center",
-        stretch: "items-stretch",
-        baseline: "items-baseline",
-      },
-      justify: {
-        end: "justify-end",
-        start: "justify-start",
-        center: "justify-center",
-        around: "justify-around",
-        evenly: "justify-evenly",
-        between: "justify-between",
-      },
-    },
-  },
   defaultVariants: {
-    gap: "md",
-    align: "start",
-    justify: "start",
-    wrap: false,
-    reverse: false,
     upperlined: true,
     underlined: false,
   },

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

@@ -1,6 +1,7 @@
 import { getArgTypes } from "../service.storybook";
 
 import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 import UInput from "../ui.form-input";
 import UButton from "../ui.button";
 
@@ -28,14 +29,16 @@ export default {
 
 const defaultSlotTemplate = `
   <template #default>
-    <UInput placeholder="Vasyl" label="Name" />
-    <UInput placeholder="Vasylenko" label="Surname" />
-    <UInput placeholder="Kyiv" label="Town" />
+    <UCol>
+      <UInput placeholder="Vasyl" label="Name" />
+      <UInput placeholder="Vasylenko" label="Surname" />
+      <UInput placeholder="Kyiv" label="Town" />
+    </UCol>
   </template>
 `;
 
 const DefaultTemplate = (args) => ({
-  components: { UGroup, UInput, UButton },
+  components: { UGroup, UCol, UInput, UButton },
   setup() {
     return { args };
   },

package/ui.container-group/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+  <div v-bind="wrapperAttrs" :data-cy="dataCy">
     <template v-if="title">
       <UDivider v-if="upperlined" size="xl" no-top-padding v-bind="upperlineAttrs" />
 
@@ -24,10 +24,8 @@
       <UDivider v-if="underlined" size="xl" v-bind="underlineAttrs" />
     </template>
 
-    <div v-bind="contentAttrs">
-      <!-- @slot Use it to add something inside. -->
-      <slot />
-    </div>
+    <!-- @slot Use it to add something inside. -->
+    <slot />
   </div>
 </template>
 
@@ -52,49 +50,6 @@ const props = defineProps({
     default: "",
   },
 
-  /**
-   * The distance between nested elements.
-   * @values none, 2xs, xs, sm, md, lg, xl, 2xl
-   */
-  gap: {
-    type: String,
-    default: UIService.get(defaultConfig, UGroup).default.gap,
-  },
-
-  /**
-   * Nested items align (flex align-items).
-   * @values start, end, center, stretch, baseline
-   */
-  align: {
-    type: String,
-    default: UIService.get(defaultConfig, UGroup).default.align,
-  },
-
-  /**
-   * Nested items horizontally align (flex justify-content).
-   * @values start, end, center, around, evenly, between
-   */
-  justify: {
-    type: String,
-    default: UIService.get(defaultConfig, UGroup).default.justify,
-  },
-
-  /**
-   * Reverse nested items order.
-   */
-  reverse: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UGroup).default.reverse,
-  },
-
-  /**
-   * Allow items to wrap (flex flex-wrap).
-   */
-  wrap: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UGroup).default.wrap,
-  },
-
   /**
    * Show line above the header.
    */
@@ -129,7 +84,6 @@ const props = defineProps({
 });
 
 const {
-  contentAttrs,
   headerAttrs,
   wrapperAttrs,
   headerFallbackAttrs,

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

@@ -2,6 +2,7 @@ import { getArgTypes } 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";
 
 /**
@@ -26,14 +27,16 @@ export default {
 const defaultSlotTemplate = `
   <template #default>
     <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
-      <UInput placeholder="input" label="Label" />
-      <UInput placeholder="input" label="Label" />
+      <UCol>
+        <UInput placeholder="input" label="Label" />
+        <UInput placeholder="input" label="Label" />
+      </UCol>
     </UGroup>
   </template>
 `;
 
 const DefaultTemplate = (args) => ({
-  components: { UGroups, UGroup, UInput },
+  components: { UGroups, UGroup, UCol, UInput },
   setup() {
     return { args };
   },

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

@@ -2,7 +2,7 @@ import { getArgTypes } from "../service.storybook";
 
 import URow from "../ui.container-row";
 import UInput from "../ui.form-input";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 import UButton from "../ui.button";
 
 /**
@@ -37,7 +37,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const GapTemplate = (args, { argTypes } = {}) => ({
-  components: { UGroup, URow, UInput },
+  components: { UCol, URow, UInput },
   setup() {
     return {
       args,
@@ -45,17 +45,17 @@ const GapTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup gap="xl">
+    <UCol gap="xl">
       <URow v-for="(gap, index) in gaps" :key="index" v-bind="args" :gap="gap" align="center">
         <UInput :label="gap" />
         <UInput :label="gap" />
       </URow>
-    </UGroup>
+    </UCol>
   `,
 });
 
 const AlignTemplate = (args, { argTypes } = {}) => ({
-  components: { UGroup, URow, UInput, UButton },
+  components: { UCol, URow, UInput, UButton },
   setup() {
     return {
       args,
@@ -63,12 +63,12 @@ const AlignTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup gap="xl">
+    <UCol gap="xl">
       <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>
+    </UCol>
   `,
 });
 

package/ui.container-row/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+  <div v-bind="wrapperAttrs" :data-cy="dataCy">
     <!-- @slot Use it to add something inside. -->
     <slot />
   </div>

package/ui.dropdown-button/index.stories.js

@@ -3,7 +3,7 @@ import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storyboo
 import UDropdownButton from "../ui.dropdown-button";
 import UDropdownItem from "../ui.dropdown-item";
 import URow from "../ui.container-row";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 
 /**
  * The `UDropdownButton` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.dropdown-button)
@@ -105,7 +105,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 });
 
 const VariantColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UDropdownButton, URow, UGroup },
+  components: { UDropdownButton, URow, UCol },
   setup() {
     return {
       args,
@@ -114,7 +114,7 @@ const VariantColorsTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup>
+    <UCol>
       <URow v-for="(variant, index) in variants" :key="index">
         <UDropdownButton
           v-for="(color, idx) in colors"
@@ -125,7 +125,7 @@ const VariantColorsTemplate = (args, { argTypes } = {}) => ({
           :key="idx"
         />
       </URow>
-    </UGroup>
+    </UCol>
   `,
 });
 

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

@@ -3,7 +3,7 @@ import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storyboo
 import UCheckbox from "../ui.form-checkbox";
 import UCheckboxGroup from "../ui.form-checkbox-group";
 import UBadge from "../ui.text-badge";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 
 /**
  * The `UCheckbox` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-checkbox)
@@ -36,7 +36,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const ValueTypesTemplate = (args) => ({
-  components: { UCheckbox, UCheckboxGroup, UGroup },
+  components: { UCheckbox, UCheckboxGroup, UCol },
   setup() {
     return { args };
   },
@@ -48,7 +48,7 @@ const ValueTypesTemplate = (args) => ({
     };
   },
   template: `
-    <UGroup gap="xl">
+    <UCol gap="xl">
       <UCheckbox
         v-bind="args"
         v-model="defaultValue"
@@ -85,12 +85,12 @@ const ValueTypesTemplate = (args) => ({
           {{ arrayValue }}
         </span>
       </div>
-    </UGroup>
+    </UCol>
   `,
 });
 
 const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UCheckbox, UGroup },
+  components: { UCheckbox, UCol },
   setup() {
     return {
       args,
@@ -98,7 +98,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup gap="xl">
+    <UCol gap="xl">
       <UCheckbox
         v-for="(size, index) in sizes"
         :key="index"
@@ -107,7 +107,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
         :size="size"
         :label="size"
       />
-    </UGroup>
+    </UCol>
   `,
 });
 

package/ui.form-color-picker/index.stories.js

@@ -1,6 +1,6 @@
 import { getArgTypes } from "../service.storybook";
 import UColorPicker from "../ui.form-color-picker";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 
 /**
  * The `UColorPicker` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-color-picker)
@@ -29,7 +29,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UGroup, UColorPicker },
+  components: { UCol, UColorPicker },
   setup() {
     return {
       args,
@@ -37,7 +37,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup>
+    <UCol>
       <UColorPicker
         v-for="(size, index) in sizes"
         v-bind="args"
@@ -46,7 +46,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
         :name="size"
         v-model="args.value"
       />
-    </UGroup>
+    </UCol>
   `,
 });