vueless 0.0.114 → 0.0.116

package/assets/icons/image.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M182.15-114.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-595.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h595.7q27.7 0 48.03 20.34 20.34 20.33 20.34 48.03v595.7q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-595.7Zm0-68.13h595.7v-595.7h-595.7v595.7Zm50.74-92.7h495.22L578-476.59l-132 171-93-127-120.11 157.74Zm-50.74 92.7v-595.7 595.7Z"/></svg>

package/package.json

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

package/ui.container-accordion/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-group/composables/attrs.composable.js

@@ -20,7 +20,12 @@ export function useAttrs(props) {
     compoundVariants: header.compoundVariants,
   });
 
-  const contentClasses = computed(() => cvaContent({ size: props.size }));
+  const contentClasses = computed(() =>
+    cvaContent({
+      gap: props.gap,
+      align: props.align,
+    }),
+  );
 
   const headerClasses = computed(() => cvaHeader({ underlined: props.underlined }));
 

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

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: "",
+  wrapper: "w-full",
   upperline: "",
   header: {
     base: "flex items-center justify-between",
@@ -13,16 +13,30 @@ export default /*tw*/ {
   title: "pr-2",
   underline: "pt-1.5",
   content: {
+    base: "flex flex-col",
     variants: {
-      size: {
-        sm: "space-y-2",
+      gap: {
+        none: "space-y-0",
+        "2xs": "space-y-1",
+        xs: "space-y-2",
+        sm: "space-y-3",
         md: "space-y-4",
-        lg: "space-y-6",
+        lg: "space-y-5",
+        xl: "space-y-6",
+        "2xl": "space-y-8",
+      },
+      align: {
+        end: "items-end",
+        start: "items-start",
+        center: "items-center",
+        stretch: "items-stretch",
+        baseline: "items-baseline",
       },
     },
   },
   defaultVariants: {
-    size: "md",
+    gap: "md",
+    align: "start",
     upperlined: true,
     underlined: false,
   },

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

@@ -10,15 +10,6 @@ export default {
   component: UGroup,
   args: {
     title: "Form group",
-    slotTemplate: `
-    <template #default>
-      <UInput placeholder="Vasyl" label="Name" />
-
-      <UInput placeholder="Vasylenko" label="Surname" />
-
-      <UInput placeholder="Kyiv" label="Town" />
-    </template>
-  `,
   },
   argTypes: {
     ...getArgTypes(UGroup.name),
@@ -32,6 +23,14 @@ export default {
   },
 };
 
+const defaultSlotTemplate = `
+  <template #default>
+    <UInput placeholder="Vasyl" label="Name" />
+    <UInput placeholder="Vasylenko" label="Surname" />
+    <UInput placeholder="Kyiv" label="Town" />
+  </template>
+`;
+
 const DefaultTemplate = (args) => ({
   components: { UGroup, UInput, UButton },
   setup() {
@@ -39,7 +38,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UGroup v-bind="args">
-      ${args.slotTemplate}
+      ${args.slotTemplate || defaultSlotTemplate}
     </UGroup>
   `,
 });

package/ui.container-group/index.vue

@@ -53,12 +53,21 @@ const props = defineProps({
   },
 
   /**
-   * The distance between nested components.
-   * @values sm, md, lg
+   * The distance between nested elements.
+   * @values none, 2xs, xs, sm, md, lg, xl, 2xl
    */
-  size: {
+  gap: {
     type: String,
-    default: UIService.get(defaultConfig, UGroup).default.size,
+    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,
   },
 
   /**
@@ -78,7 +87,7 @@ const props = defineProps({
   },
 
   /**
-   * Set component ui config object.
+   *Component ui config object.
    */
   config: {
     type: Object,
@@ -86,7 +95,7 @@ const props = defineProps({
   },
 
   /**
-   * Set data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,

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

@@ -1,10 +1,27 @@
+import { computed } from "vue";
+
+import { cva } from "../../service.ui";
 import useUI from "../../composable.ui";
 import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
-  const { getAttrs } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { wrapper } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    cvaWrapper({
+      gap: props.gap,
+      align: props.align,
+    }),
+  );
 
-  const wrapperAttrs = getAttrs("wrapper");
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
 
   return {
     wrapperAttrs,

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

@@ -1,3 +1,26 @@
 export default /*tw*/ {
-  wrapper: "flex flex-col space-y-14",
+  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

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

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

@@ -1,7 +1,7 @@
 import { getArgTypes } from "../service.storybook";
 
-import UGroup from "../ui.container-group";
 import UGroups from "../ui.container-groups";
+import UGroup from "../ui.container-group";
 import UInput from "../ui.form-input";
 
 export default {
@@ -20,26 +20,26 @@ 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" />
+    </UGroup>
+  </template>
+`;
+
 const DefaultTemplate = (args) => ({
   components: { UGroups, UGroup, UInput },
   setup() {
     return { args };
   },
   template: `
-    <UGroups>
-      ${args.slotTemplate}
+    <UGroups v-bind="args">
+      ${args.slotTemplate || defaultSlotTemplate}
     </UGroups>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {
-  slotTemplate: `
-    <template #default>
-      <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
-        <UInput placeholder="input" label="Label" />
-        <UInput placeholder="input" label="Label" />
-      </UGroup>
-    </template>
-  `,
-};
+Default.args = {};

package/ui.container-groups/index.vue

@@ -6,6 +6,10 @@
 </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 */
@@ -13,7 +17,25 @@ defineOptions({ name: "UGroups", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set component ui config object.
+   * 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,
@@ -21,7 +43,7 @@ const props = defineProps({
   },
 
   /**
-   * Set data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,

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

@@ -14,6 +14,13 @@ export default {
   },
 };
 
+const defaultSlotTemplate = `
+  <template #default>
+    <UInput label="Name" />
+    <UButton label="Submit" size="xs" block />
+  </template>
+`;
+
 const DefaultTemplate = (args) => ({
   components: { URow, UInput, UButton },
   setup() {
@@ -21,13 +28,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <URow v-bind="args">
-      ${
-        args.slotTemplate ||
-        `
-          <UInput label="Name" />
-          <UButton label="Submit" size="xs" block />
-        `
-      }
+      ${args.slotTemplate || defaultSlotTemplate}
     </URow>
   `,
 });
@@ -41,7 +42,7 @@ const GapTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <URow v-for="(gap, index) in gaps" :key="index" v-bind="args" :gap="gap" align="center">
         <UInput :label="gap" />
         <UInput :label="gap" />
@@ -59,7 +60,7 @@ const AlignTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup 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" />

package/ui.container-row/index.vue

@@ -26,7 +26,7 @@ const props = defineProps({
   },
 
   /**
-   * Row nested elements vertical align (align-items).
+   * Nested items align (flex align-items).
    * @values start, end, center, stretch, baseline
    */
   align: {
@@ -43,7 +43,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets component ui config object.
+   * Component ui config object.
    */
   config: {
     type: Object,
@@ -51,7 +51,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,

package/ui.data-list/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.form-checkbox/index.stories.js

@@ -47,7 +47,7 @@ const ValueTypesTemplate = (args) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <UCheckbox
         v-bind="args"
         v-model="defaultValue"
@@ -97,7 +97,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <UCheckbox
         v-for="(size, index) in sizes"
         :key="index"

package/ui.form-color-picker/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.form-date-picker-range/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.form-input/index.stories.js

@@ -98,7 +98,7 @@ const LabelPlacementTemplate = (args) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <UInput
         v-bind="args"
         label="top"

package/ui.form-input-file/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.form-input-money/index.stories.js

@@ -65,7 +65,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 //     };
 //   },
 //   template: `
-//     <UGroup size="lg">
+//     <UGroup gap="xl">
 //       <UInputMoney
 //         v-bind="args"
 //         :label-outside="true"

package/ui.form-input-number/index.stories.js

@@ -46,7 +46,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <UInputNumber
         v-for="(size, index) in sizes"
         v-bind="args"

package/ui.form-input-rating/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.form-input-search/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.form-switch/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.form-textarea/index.stories.js

@@ -78,7 +78,7 @@ const LabelPlacementTemplate = (args) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <UTextarea
         v-bind="args"
         label-align="top"

package/ui.image-avatar/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.image-avatar/composables/attrs.composable.js

@@ -27,8 +27,10 @@ export function useAttrs(props) {
   );
 
   const avatarAttrs = getAttrs("avatar", { classes: avatarClasses });
+  const iconAttrs = getAttrs("icon", { isComponent: true });
 
   return {
     avatarAttrs,
+    iconAttrs,
   };
 }