vueless 0.0.207 → 0.0.208

package/composable.ui/index.js

@@ -91,6 +91,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
     watch(config, updateVuelessAttrs, { immediate: true });
     watch(props, updateVuelessAttrs);
+    options?.classes && watch(options?.classes, updateVuelessAttrs);
 
     function updateVuelessAttrs() {
       const configKeyValue = config.value[configKey];

package/package.json

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

package/service.storybook/index.js

@@ -96,6 +96,15 @@ export function getArgTypes(componentName) {
       control: "text",
       table: { category: "slots" },
     };
+
+    // Hide autogenerated slot docs, but keep props with the same name
+    if (!component.attributes?.map((item) => item.name)?.includes(slot.name)) {
+      types[slot.name] = {
+        table: {
+          disable: true,
+        },
+      };
+    }
   });
 
   component.events?.forEach((event) => {

package/ui.button/index.stories.js

@@ -29,19 +29,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UButton v-bind="args">
-      ${allSlotsFragment}
-    </UButton>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UButton, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UButton v-bind="args">
-      ${args.slotTemplate}
+      ${args.slotTemplate || allSlotsFragment}
     </UButton>
   `,
 });
@@ -141,7 +129,7 @@ iconRight.args = {
   iconRight: "star",
 };
 
-export const slotDefault = SlotTemplate.bind({});
+export const slotDefault = DefaultTemplate.bind({});
 slotDefault.args = {
   slotTemplate: `
     <template #default>
@@ -150,7 +138,7 @@ slotDefault.args = {
   `,
 };
 
-export const iconLeftSlot = SlotTemplate.bind({});
+export const iconLeftSlot = DefaultTemplate.bind({});
 iconLeftSlot.args = {
   slotTemplate: `
     <template #icon-left>
@@ -162,7 +150,7 @@ iconLeftSlot.args = {
   `,
 };
 
-export const iconRightSlot = SlotTemplate.bind({});
+export const iconRightSlot = DefaultTemplate.bind({});
 iconRightSlot.args = {
   slotTemplate: `
     <template #icon-right>
@@ -174,7 +162,7 @@ iconRightSlot.args = {
   `,
 };
 
-export const leftSlot = SlotTemplate.bind({});
+export const leftSlot = DefaultTemplate.bind({});
 leftSlot.args = {
   slotTemplate: `
     <template #left>
@@ -186,7 +174,7 @@ leftSlot.args = {
   `,
 };
 
-export const rightSlot = SlotTemplate.bind({});
+export const rightSlot = DefaultTemplate.bind({});
 rightSlot.args = {
   slotTemplate: `
     <template #right>

package/ui.button/index.vue

@@ -36,7 +36,12 @@
 
       <!-- @slot Use it to add something instead of the text. -->
       <slot />
-      <div v-if="label" v-bind="textAttrs" tabindex="-1" v-text="label" />
+      <div
+        v-if="label && !hasSlotContent($slots['default'])"
+        v-bind="textAttrs"
+        tabindex="-1"
+        v-text="label"
+      />
 
       <!-- @slot Use it to add something after the text. -->
       <slot name="right" />

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

@@ -3,7 +3,7 @@ import useUI from "../../composable.ui";
 import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props, { isOpened }) {
+export default function useAttrs(props, { isOpened }) {
   const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
     defaultConfig,
     () => props.config,
@@ -13,19 +13,18 @@ export function useAttrs(props, { isOpened }) {
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
-    let classes = "";
-    let value = config.value[key];
+    const classes = computed(() => {
+      const value = config.value[key];
 
-    if (value.variants || value.compoundVariants) {
-      const getCVA = cva(value);
-
-      classes = computed(() =>
-        getCVA({
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
           ...props,
           isOpened: isOpened.value,
-        }),
-      );
-    }
+        });
+      }
+
+      return "";
+    });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
   }

package/ui.container-accordion/index.vue

@@ -28,7 +28,7 @@ import UIService, { getRandomId } from "../service.ui";
 
 import { UAccordion } from "./constants/index";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UAccordion", inheritAttrs: false });
@@ -85,7 +85,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the accordion item is toggled.
+   * @property {string} name
+   */
+  "click",
+]);
 
 const isOpened = ref(false);
 

package/ui.container-card/composable/attrs.composable.js

@@ -4,53 +4,46 @@ import { cva, cx } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props, { isMobileBreakpoint }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { wrapper } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    cvaWrapper({
-      padding: props.padding,
-      rounded: props.rounded,
-    }),
+export default function useAttrs(props, { isMobileBreakpoint }) {
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-  const headerAttrs = getAttrs("header");
-  const headerLeftAttrs = getAttrs("headerLeft");
-  const headerLeftFallbackAttrs = getAttrs("headerLeftFallback");
-  const titleAttrs = getAttrs("title", { isComponent: true });
-  const descriptionAttrs = getAttrs("description");
-  const contentAttrs = getAttrs("content");
-  const dividerAttrs = getAttrs("divider", { isComponent: true });
-  const footerAttrsRaw = getAttrs("footer");
-
-  const footerAttrs = computed(() => {
-    const footerMobileReverseClasses =
-      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse;
-
-    return {
-      ...footerAttrsRaw.value,
-      class: cx([footerAttrsRaw.value.class, footerMobileReverseClasses]),
-    };
-  });
+  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 });
+
+    if (key === "footer") {
+      const footerAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...footerAttrs.value,
+        class: cx([
+          footerAttrs.value.class,
+          props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
+        ]),
+      }));
+    }
+  }
 
   return {
+    ...attrs,
+    config,
     hasSlotContent,
-    wrapperAttrs,
-    titleAttrs,
-    dividerAttrs,
-    headerAttrs,
-    headerLeftAttrs,
-    headerLeftFallbackAttrs,
-    descriptionAttrs,
-    contentAttrs,
-    footerAttrs,
   };
 }

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

@@ -17,10 +17,10 @@ export default /*tw*/ {
   header: "flex justify-between",
   headerLeft: "flex items-center space-x-4 w-full",
   headerLeftFallback: "flex flex-col w-full",
-  title: "",
+  title: "{UHeader}",
   description: "mt-1.5 text-base font-normal text-gray-500",
   content: "",
-  divider: "",
+  divider: "{UDivider}",
   footer: "flex justify-between",
   footerMobileReverse: "flex flex-col-reverse space-y-reverse",
   defaultVariants: {

package/ui.container-card/index.vue

@@ -47,7 +47,7 @@ import UDivider from "../ui.container-divider";
 
 import { UCard } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composable/attrs.composable";
+import useAttrs from "./composable/attrs.composable";
 import useBreakpoint from "../composable.breakpoint";
 
 /* Should be a string for correct web-types gen */

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

@@ -4,62 +4,35 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { wrapper, divider, label } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
+export default function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
 
-  const cvaDivider = cva({
-    base: divider.base,
-    variants: divider.variants,
-    compoundVariants: divider.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const cvaLabel = cva({
-    base: label.base,
-    variants: label.variants,
-    compoundVariants: label.compoundVariants,
-  });
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const wrapperClasses = computed(() =>
-    cvaWrapper({
-      size: props.size,
-      vertical: props.vertical,
-      noPadding: props.noPadding,
-      noTopPadding: props.noTopPadding,
-      noBottomPadding: props.noBottomPadding,
-      noLeftPadding: props.noLeftPadding,
-      noRightPadding: props.noRightPadding,
-      label: Boolean(props.label),
-    }),
-  );
-
-  const dividerClasses = computed(() =>
-    cvaDivider({
-      variant: props.variant,
-      dashed: props.dashed,
-      dotted: props.dotted,
-      vertical: props.vertical,
-      noBorder: props.noBorder,
-      label: Boolean(props.label),
-    }),
-  );
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+          label: Boolean(props.label),
+        });
+      }
 
-  const labelClasses = computed(() => cvaLabel({ variant: props.variant }));
+      return "";
+    });
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-  const dividerAttrs = getAttrs("divider", { classes: dividerClasses });
-  const labelAttrs = getAttrs("label", { classes: labelClasses });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
+    config,
     hasSlotContent,
-    wrapperAttrs,
-    dividerAttrs,
-    labelAttrs,
   };
 }

package/ui.container-divider/index.vue

@@ -13,7 +13,7 @@ import UIService from "../service.ui";
 
 import { UDivider } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UDivider", inheritAttrs: false });

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

@@ -4,46 +4,30 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { content, header } = config.value;
-
-  const cvaContent = cva({
-    base: content.base,
-    variants: content.variants,
-    compoundVariants: content.compoundVariants,
-  });
-
-  const cvaHeader = cva({
-    base: header.base,
-    variants: header.variants,
-    compoundVariants: header.compoundVariants,
-  });
-
-  const contentClasses = computed(() =>
-    cvaContent({
-      gap: props.gap,
-      align: props.align,
-    }),
-  );
-
-  const headerClasses = computed(() => cvaHeader({ underlined: props.underlined }));
-
-  const wrapperAttrs = getAttrs("wrapper");
-  const upperlineAttrs = getAttrs("upperline", { isComponent: true });
-  const headerAttrs = getAttrs("header", { classes: headerClasses });
-  const headerFallbackAttrs = getAttrs("headerFallback");
-  const titleAttrs = getAttrs("title", { isComponent: true });
-  const underlineAttrs = getAttrs("underline", { isComponent: true });
-  const contentAttrs = getAttrs("content", { classes: contentClasses });
+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 {
-    contentAttrs,
-    headerAttrs,
-    wrapperAttrs,
-    headerFallbackAttrs,
-    titleAttrs,
-    upperlineAttrs,
-    underlineAttrs,
+    ...attrs,
+    config,
   };
 }

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

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: "w-full",
-  upperline: "",
+  upperline: "{UDivider}",
   header: {
     base: "flex items-center justify-between",
     variants: {
@@ -10,8 +10,8 @@ export default /*tw*/ {
     },
   },
   headerFallback: "flex items-center",
-  title: "pr-2",
-  underline: "pt-1.5",
+  title: "{UHeader} pr-2",
+  underline: "{UDivider} pt-1.5",
   content: {
     base: "flex flex-col",
     variants: {

package/ui.container-group/index.vue

@@ -7,12 +7,12 @@
         <!-- @slot Use it to add something left side of the header. -->
         <slot name="left">
           <div v-bind="headerFallbackAttrs">
-            <!-- @slot Use it to add something before title. -->
+            <!-- @slot Use it to add something before the title. -->
             <slot name="before-title" />
 
             <UHeader :label="title" size="xs" v-bind="titleAttrs" />
 
-            <!-- @slot Use it to add something after title. -->
+            <!-- @slot Use it to add something after the title. -->
             <slot name="after-title" />
           </div>
         </slot>
@@ -25,7 +25,7 @@
     </template>
 
     <div v-bind="contentAttrs">
-      <!-- @slot Use it to add something instead form. -->
+      <!-- @slot Use it to add something inside. -->
       <slot />
     </div>
   </div>
@@ -38,7 +38,7 @@ import UHeader from "../ui.text-header";
 
 import { UGroup } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UGroup", inheritAttrs: false });

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

@@ -4,26 +4,30 @@ import { cva } from "../../service.ui";
 import useUI from "../../composable.ui";
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { wrapper } = config.value;
+export default function useAttrs(props) {
+  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const attrs = {};
 
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const wrapperClasses = computed(() =>
-    cvaWrapper({
-      gap: props.gap,
-      align: props.align,
-    }),
-  );
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    wrapperAttrs,
+    ...attrs,
+    config,
   };
 }

package/ui.container-groups/index.vue

@@ -10,7 +10,7 @@ import UIService from "../service.ui";
 
 import { UGroups } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UGroups", inheritAttrs: false });