vueless 0.0.327 → 0.0.329

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(

package/ui.text-header/{index.vue → UHeader.vue}

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

package/ui.text-header/{configs/default.config.js → config.js}

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   header: {
-    base: "text-{color}-600",
+    base: "text-{color}-600 font-medium",
     variants: {
       size: {
         xs: "text-lg",

package/ui.text-header/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-header/{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 UHeader from "../ui.text-header";
-import UCol from "../ui.container-col";
+import UHeader from "../../ui.text-header/UHeader.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 
 /**
  * The `UHeader` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-header)
@@ -14,14 +14,14 @@ export default {
     label: "Header",
   },
   argTypes: {
-    ...getArgTypes(UHeader.name),
+    ...getArgTypes(UHeader.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UHeader },
   setup() {
-    const slots = getSlotNames(UHeader.name);
+    const slots = getSlotNames(UHeader.__name);
 
     return { args, slots };
   },

package/ui.text-header/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-money/{index.vue → UMoney.vue}

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

package/ui.text-money/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-money/{index.stories.js → storybook/stories.js}

@@ -1,10 +1,10 @@
-import UMoney from "../ui.text-money";
-import UIcon from "../ui.image-icon";
-import URow from "../ui.container-row";
-import DebitIcon from "../ui.text-money/assets/debit.svg?component";
-import CreditIcon from "../ui.text-money/assets/credit.svg?component";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import UMoney from "../../ui.text-money/UMoney.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
+import DebitIcon from "../../ui.text-money/assets/debit.svg?component";
+import CreditIcon from "../../ui.text-money/assets/credit.svg?component";
 
 const COMPONENT_CLASSES = "flex justify-center w-1/6";
 
@@ -21,14 +21,14 @@ export default {
     sign: "positive",
   },
   argTypes: {
-    ...getArgTypes(UMoney.name),
+    ...getArgTypes(UMoney.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UMoney, UIcon },
   setup() {
-    const slots = getSlotNames(UMoney.name);
+    const slots = getSlotNames(UMoney.__name);
 
     const icons = {
       Debit: DebitIcon,
@@ -49,7 +49,7 @@ const DefaultTemplate = (args) => ({
 const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UMoney, URow },
   setup() {
-    const slots = getSlotNames(UMoney.name);
+    const slots = getSlotNames(UMoney.__name);
 
     return {
       args,

package/ui.text-money/{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 function useAttrs(props) {

package/ui.text-notify/{index.vue → UNotify.vue}

@@ -80,17 +80,16 @@
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { merge } from "lodash-es";
 
-import { cx, getDefault, vuelessConfig } from "../service.ui";
-import { useLocale } from "../composable.locale";
-import useAttrs from "./composables/attrs.composable";
+import { cx, getDefault, vuelessConfig } from "../utils/utilUI.js";
+import { useLocale } from "../composables/useLocale.js";
+import useAttrs from "./useAttrs.js";
 
-import defaultConfig from "./configs/default.config";
-import { UNotify, NOTIFY_TYPE, POSITION } from "./constants";
+import defaultConfig from "./config.js";
+import { UNotify, NOTIFY_TYPE, POSITION } from "./constants.js";
 
-import UIcon from "../ui.image-icon";
+import UIcon from "../ui.image-icon/UIcon.vue";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UNotify", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.text-notify/{Docs.mdx → storybook/Docs.mdx}

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
-import { getSource } from "../service.storybook";
+import { getSource } from "../../utils/utilStorybook.js";
 
-import * as stories from "./index.stories";
-import defaultConfig from "./configs/default.config?raw"
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.text-notify/{index.stories.js → storybook/stories.js}

@@ -1,10 +1,10 @@
-import { notify } from "./services";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UNotify from "../ui.text-notify";
-import UButton from "../ui.button";
-import UCol from "../ui.container-col";
+import { notify } from "../utilNotify.js";
 
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import UNotify from "../../ui.text-notify/UNotify.vue";
+import UButton from "../../ui.button/UButton.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 
 /**
  * The `UNotify` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-notify)
@@ -14,7 +14,7 @@ export default {
   title: "Text & Content / Notify",
   component: UNotify,
   argTypes: {
-    ...getArgTypes(UNotify.name),
+    ...getArgTypes(UNotify.__name),
   },
   parameters: {
     docs: {
@@ -36,7 +36,7 @@ const DefaultTemplate = (args) => ({
       });
     }
 
-    const slots = getSlotNames(UNotify.name);
+    const slots = getSlotNames(UNotify.__name);
 
     return { args, slots, onClick };
   },

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

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

package/ui.text-notify/{services/index.js → utilNotify.js}

@@ -1,5 +1,5 @@
-import { getRandomId, vuelessConfig } from "../../service.ui";
-import { DELAY_BETWEEN_CLONES, DURATION, LOCAL_STORAGE_ID, NOTIFY_TYPE } from "../constants";
+import { getRandomId, vuelessConfig } from "../utils/utilUI.js";
+import { DELAY_BETWEEN_CLONES, DURATION, LOCAL_STORAGE_ID, NOTIFY_TYPE } from "./constants.js";
 
 const globalNotifyDuration = vuelessConfig.component?.UNotify?.duration;
 const notifyClearAllEvent = new Event("notifyClearAll");

package/{service.theme/index.js → utils/utilTheme.js}

@@ -1,6 +1,6 @@
 import colors from "tailwindcss/colors.js";
 
-import { vuelessConfig } from "../service.ui";
+import { vuelessConfig } from "./utilUI.js";
 import {
   GRAY_COLOR,
   COOL_COLOR,
@@ -14,7 +14,7 @@ import {
   DARK_MODE_SELECTOR,
   GRAY_COLORS,
   PX_IN_REM,
-} from "../constants/index.js";
+} from "../constants";
 
 export function themeInit() {
   const prefersColorSchemeDark = window && window.matchMedia("(prefers-color-scheme: dark)");

package/{service.ui/index.js → utils/utilUI.js}

@@ -1,13 +1,13 @@
 import { merge } from "lodash-es";
 import { defineConfig } from "cva";
 import { extendTailwindMerge } from "tailwind-merge";
-import { cloneDeep, isCSR, isSSR } from "../service.helper/index.js";
+import { cloneDeep, isCSR, isSSR } from "./utilHelper.js";
 import {
   BRAND_COLOR,
   GRAYSCALE_COLOR,
   DEFAULT_BRAND_COLOR,
   NESTED_COMPONENT_REG_EXP,
-} from "../constants/index.js";
+} from "../constants";
 
 /**
  Load Vueless config from the project root.