vueless 0.0.328 → 0.0.329

package/ui.other-dot/storybook/Docs.mdx

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

@@ -1,9 +1,9 @@
-import UDot from "../ui.other-dot";
-import URow from "../ui.container-row";
-import UCol from "../ui.container-col";
-import UBadge from "../ui.text-badge";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import UDot from "../../ui.other-dot/UDot.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
 
 /**
  * The `UDot` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.other-dot)
@@ -13,14 +13,14 @@ export default {
   title: "Other / Dot",
   component: UDot,
   argTypes: {
-    ...getArgTypes(UDot.name),
+    ...getArgTypes(UDot.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UDot },
   setup() {
-    const slots = getSlotNames(UDot.name);
+    const slots = getSlotNames(UDot.__name);
 
     return { args, slots };
   },
@@ -44,11 +44,10 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
       <URow
         v-for="(option, index) in options"
         :key="index"
-        gap="none"
         align="center"
       >
         <UDot v-bind="args" :[args.enum]="option"/>
-        <UBadge :label="option" :[args.enum]="option" variant="thirdary" />
+        <UBadge :label="option" :[args.enum]="option" variant="thirdary" size="md"/>
       </URow>
     </UCol>
   `,

package/ui.other-dot/useAttrs.js

@@ -0,0 +1,38 @@
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
+
+import defaultConfig from "./config.js";
+import { computed } from "vue";
+
+export default function useAttrs(props) {
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
+
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
+      }
+
+      return setColor(value, props.color);
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
+
+  return {
+    ...attrs,
+    config,
+    hasSlotContent,
+  };
+}

package/ui.text-alert/{index.vue → UAlert.vue}

@@ -80,17 +80,16 @@
 <script setup>
 import { onMounted, ref, computed } from "vue";
 
-import UIcon from "../ui.image-icon";
-import UButton from "../ui.button";
-import UText from "../ui.text-block";
-import { getDefault } from "../service.ui";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import UButton from "../ui.button/UButton.vue";
+import UText from "../ui.text-block/UText.vue";
+import { getDefault } from "../utils/utilUI.js";
 
-import { UAlert } from "./constatns";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { UAlert } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UAlert" });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.text-alert/storybook/Docs.mdx

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

@@ -1,10 +1,10 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UAlert from "../ui.text-alert";
-import URow from "../ui.container-row";
-import UCol from "../ui.container-col";
-import UIcon from "../ui.image-icon";
-import UButton from "../ui.button";
+import UAlert from "../../ui.text-alert/UAlert.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import UButton from "../../ui.button/UButton.vue";
 
 /**
  * The `UAlert` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-alert)
@@ -18,14 +18,14 @@ export default {
     description: "Default Description",
   },
   argTypes: {
-    ...getArgTypes(UAlert.name),
+    ...getArgTypes(UAlert.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UAlert, UIcon, URow, UButton },
   setup() {
-    const slots = getSlotNames(UAlert.name);
+    const slots = getSlotNames(UAlert.__name);
 
     return { args, slots };
   },

package/ui.text-alert/{composables/attrs.composable.js → useAttrs.js}

@@ -1,7 +1,7 @@
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props) {

package/ui.text-badge/{index.vue → UBadge.vue}

@@ -77,15 +77,14 @@
 <script setup>
 import { ref, computed } from "vue";
 
-import { getDefault } from "../service.ui";
-import UIcon from "../ui.image-icon";
+import { getDefault } from "../utils/utilUI.js";
+import UIcon from "../ui.image-icon/UIcon.vue";
 
-import { UBadge } from "./constants";
-import useAttrs from "./composables/attrs.composable";
-import defaultConfig from "./configs/default.config";
+import { UBadge } from "./constants.js";
+import useAttrs from "./useAttrs.js";
+import defaultConfig from "./config.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UBadge", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.text-badge/storybook/Docs.mdx

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

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UBadge from "../ui.text-badge";
-import UIcon from "../ui.image-icon";
-import URow from "../ui.container-row";
-import UCol from "../ui.container-col";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 
 /**
  * The `UBadge` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-badge)
@@ -16,14 +16,14 @@ export default {
     label: "Badge",
   },
   argTypes: {
-    ...getArgTypes(UBadge.name),
+    ...getArgTypes(UBadge.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UBadge, UIcon },
   setup() {
-    const slots = getSlotNames(UBadge.name);
+    const slots = getSlotNames(UBadge.__name);
 
     return { args, slots };
   },

package/ui.text-badge/{composables/attrs.composable.js → useAttrs.js}

@@ -1,9 +1,9 @@
 import { computed, useSlots } from "vue";
 
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
   const slots = useSlots();

package/ui.text-block/{index.vue → UText.vue}

@@ -7,14 +7,13 @@
 </template>
 
 <script setup>
-import { getDefault } from "../service.ui";
+import { getDefault } from "../utils/utilUI.js";
 
-import { UText } from "./constatns";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { UText } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UText" });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.text-block/storybook/Docs.mdx

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

@@ -1,7 +1,7 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UText from "../ui.text-block";
-import URow from "../ui.container-row";
+import UText from "../../ui.text-block/UText.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 /**
  * The `UText` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-block)
@@ -11,7 +11,7 @@ export default {
   title: "Text & Content / Text",
   component: UText,
   argTypes: {
-    ...getArgTypes(UText.name),
+    ...getArgTypes(UText.__name),
   },
   args: {},
 };
@@ -27,7 +27,7 @@ const defaultTemplate = `
 const DefaultTemplate = (args) => ({
   components: { UText, URow },
   setup() {
-    const slots = getSlotNames(UText.name);
+    const slots = getSlotNames(UText.__name);
 
     return { args, slots };
   },

package/ui.text-block/{composables/attrs.composable.js → useAttrs.js}

@@ -1,7 +1,7 @@
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 import { computed } from "vue";
 
 export default function useAttrs(props) {

package/ui.text-empty/{index.vue → UEmpty.vue}

@@ -31,16 +31,15 @@
 <script setup>
 import { computed } from "vue";
 
-import UIcon from "../ui.image-icon";
-import UHeader from "../ui.text-header";
-import { getDefault } from "../service.ui";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import UHeader from "../ui.text-header/UHeader.vue";
+import { getDefault } from "../utils/utilUI.js";
 
-import { UEmpty } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { UEmpty } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UEmpty", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.text-empty/storybook/Docs.mdx

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

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UEmpty from "../ui.text-empty";
-import UButton from "../ui.button";
-import UIcon from "../ui.image-icon";
-import URow from "../ui.container-row";
+import UEmpty from "../../ui.text-empty/UEmpty.vue";
+import UButton from "../../ui.button/UButton.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 /**
  * The `UEmpty` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-empty)
@@ -17,14 +17,14 @@ export default {
     description: "There is no contacts in the list.",
   },
   argTypes: {
-    ...getArgTypes(UEmpty.name),
+    ...getArgTypes(UEmpty.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UEmpty, UIcon, UButton },
   setup() {
-    const slots = getSlotNames(UEmpty.name);
+    const slots = getSlotNames(UEmpty.__name);
 
     return { args, slots };
   },

package/ui.text-empty/useAttrs.js

@@ -0,0 +1,37 @@
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
+
+import defaultConfig from "./config.js";
+import { computed } from "vue";
+
+export default function useAttrs(props) {
+  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
+
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+        });
+      }
+
+      return value;
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
+
+  return {
+    ...attrs,
+    config,
+    hasSlotContent,
+  };
+}

package/ui.text-file/{index.vue → UFile.vue}

@@ -29,17 +29,16 @@
 <script setup>
 import { computed, ref } from "vue";
 
-import ULink from "../ui.button-link";
-import UIcon from "../ui.image-icon";
+import ULink from "../ui.button-link/ULink.vue";
+import UIcon from "../ui.image-icon/UIcon.vue";
 
-import { getRandomId, getDefault } from "../service.ui";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
 
-import useAttrs from "./composables/attrs.composable";
-import { UFile } from "./constants";
-import defaultConfig from "./configs/default.config";
+import useAttrs from "./useAttrs.js";
+import { UFile } from "./constants.js";
+import defaultConfig from "./config.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UFile", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.text-file/storybook/Docs.mdx

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

@@ -1,6 +1,6 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UFile from "../ui.text-file";
+import UFile from "../../ui.text-file/UFile.vue";
 
 /**
  * The `UFile` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-file)
@@ -14,14 +14,14 @@ export default {
     url: "https://storybook.js.org/",
   },
   argTypes: {
-    ...getArgTypes(UFile.name),
+    ...getArgTypes(UFile.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UFile },
   setup() {
-    const slots = getSlotNames(UFile.name);
+    const slots = getSlotNames(UFile.__name);
 
     return { args, slots };
   },

package/ui.text-file/{composables/attrs.composable.js → useAttrs.js}

@@ -1,8 +1,8 @@
 import { computed } from "vue";
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 
 export default function useAttrs(props, { focus }) {
   const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(

package/ui.text-files/{index.vue → UFiles.vue}

@@ -22,7 +22,7 @@
         >
           <template #left="{ file: currentFile }">
             <!-- @slot Use it to add something left.
-             @binding {object} file
+              @binding {object} file
             -->
             <slot name="left" :file="currentFile" />
           </template>
@@ -40,17 +40,16 @@
 </template>
 
 <script setup>
-import UFile from "../ui.text-file";
-import ULabel from "../ui.form-label";
-import { getDefault } from "../service.ui";
+import UFile from "../ui.text-file/UFile.vue";
+import ULabel from "../ui.form-label/ULabel.vue";
+import { getDefault } from "../utils/utilUI.js";
 
-import { UFiles } from "./constants";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { UFiles } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 import { computed } from "vue";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UFiles", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.text-files/storybook/Docs.mdx

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

@@ -1,6 +1,6 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UFiles from "../ui.text-files";
+import UFiles from "../../ui.text-files/UFiles.vue";
 
 /**
  * The `UFiles` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-files)
@@ -17,14 +17,14 @@ export default {
     ],
   },
   argTypes: {
-    ...getArgTypes(UFiles.name),
+    ...getArgTypes(UFiles.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UFiles },
   setup() {
-    const slots = getSlotNames(UFiles.name);
+    const slots = getSlotNames(UFiles.__name);
 
     return { args, slots };
   },

package/ui.text-files/{composables/attrs.composable.js → useAttrs.js}

@@ -1,8 +1,8 @@
 import { computed } from "vue";
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
   const { getAttrs, config, isSystemKey, hasSlotContent, isCVA } = useUI(