vueless 0.0.287 → 0.0.288

package/composable.ui/index.js

@@ -83,7 +83,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
       const configAttrs = {
         config: configKeyValue,
-        ...configKeyValue?.defaultVariants,
+        ...configKeyValue?.defaults,
       };
 
       const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
@@ -192,6 +192,7 @@ function mergeConfigs({
 
   const {
     i18n,
+    defaults,
     strategy,
     safelist,
     component,
@@ -217,7 +218,7 @@ function mergeConfigs({
         }
       } else if (key === strategy) {
         config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
-      } else if (key === defaultVariants) {
+      } else if (key === defaults || key === defaultVariants) {
         config[key] = { ...defaultConfig[key], ...globalConfig[key], ...propsConfig[key] };
       } else if (key === compoundVariants) {
         config[key] = mergeCompoundVariants({

package/constants/index.js

@@ -56,11 +56,12 @@ export const CVA_CONFIG_KEY = {
 /* Vueless default config keys */
 export const SYSTEM_CONFIG_KEY = {
   i18n: "i18n",
+  defaults: "defaults",
   strategy: "strategy",
   safelist: "safelist",
   component: "component",
-  safelistColors: "safelistColors",
   transition: "transition",
+  safelistColors: "safelistColors",
   iconName: "iconName",
   ...CVA_CONFIG_KEY,
 };

package/directive.tooltip/index.js

@@ -16,14 +16,13 @@ const defaultSettings = {
   theme: "light",
   animation: "shift-away",
 };
+
 const mergedSettings = merge(defaultSettings, globalSettings);
 
 tippy.setDefaultProps(mergedSettings);
 
 export default {
   mounted(el, bindings) {
-    if (!bindings.value.content) return;
-
     tippy(el, merge(mergedSettings, bindings.value || {}));
   },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.287",
+  "version": "0.0.288",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,9 +37,9 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.51",
+    "@vueless/plugin-vite": "^0.0.54",
     "@vueless/storybook": "^0.0.34",
-    "@vueless/web-types": "^0.0.13",
+    "@vueless/web-types": "^0.0.14",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
     "eslint": "^8.55.0",

package/service.ui/index.js

@@ -132,14 +132,11 @@ function setFavicon(faviconPath) {
 }
 
 function getDefault(defaultConfig, name) {
-  const defaultVariants = merge(
-    cloneDeep(defaultConfig.defaultVariants),
-    globalComponentConfig[name]?.defaultVariants,
-  );
+  const defaults = merge(cloneDeep(defaultConfig.defaults), globalComponentConfig[name]?.defaults);
 
-  defaultVariants.color = getColor(defaultVariants.color);
+  defaults.color = getColor(defaults.color);
 
-  return defaultVariants;
+  return defaults;
 }
 
 function getColor(color) {

package/ui.button/configs/default.config.js

@@ -147,7 +147,7 @@ export default /*tw*/ {
   leftIcon: "{UIcon}",
   rightIcon: "{UIcon}",
   centerIcon: "{UIcon}",
-  defaultVariants: {
+  defaults: {
     color: "brand",
     variant: "primary",
     tag: "button",

package/ui.button/index.vue

@@ -280,7 +280,7 @@ const loaderSize = computed(() => {
 
 const iconSize = computed(() => {
   const sizes = {
-    "2xs": "xs",
+    "2xs": "2xs",
     xs: "xs",
     sm: "sm",
     md: "sm",

package/ui.button-link/composables/attrs.composable.js

@@ -33,39 +33,29 @@ export default function useAttrs(props, { isActive, isExactActive }) {
     if (key === "wrapper") {
       const wrapperAttrs = attrs[`${key}Attrs`];
 
-      attrs[`${key}Attrs`] = computed(() => {
-        const hasDefaultSlot = hasSlotContent(slots["default"]);
-        const hasRightSlot = hasSlotContent(slots["right"]);
-        const hasLeftSlot = hasSlotContent(slots["left"]);
-
-        return {
-          ...wrapperAttrs.value,
-          class: cx([
-            wrapperAttrs.value.class,
-            (hasDefaultSlot || hasLeftSlot || hasRightSlot) && config.value.withSlots,
-            isActive.value && props.wrapperActiveClass,
-            isExactActive.value && props.wrapperExactActiveClass,
-          ]),
-        };
-      });
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...wrapperAttrs.value,
+        class: cx([
+          wrapperAttrs.value.class,
+          hasSlotContent(slots["default"]) && config.value.withChild,
+          isActive.value && props.wrapperActiveClass,
+          isExactActive.value && props.wrapperExactActiveClass,
+        ]),
+      }));
     }
 
     if (key === "link") {
       const linkAttrs = attrs[`${key}Attrs`];
 
-      attrs[`${key}Attrs`] = computed(() => {
-        const hasDefaultSlot = hasSlotContent(slots["default"]);
-
-        return {
-          ...linkAttrs.value,
-          class: cx([
-            linkAttrs.value.class,
-            hasDefaultSlot && config.value.withSlots,
-            isActive.value && props.activeClass,
-            isExactActive.value && props.exactActiveClass,
-          ]),
-        };
-      });
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...linkAttrs.value,
+        class: cx([
+          linkAttrs.value.class,
+          hasSlotContent(slots["default"]) && config.value.withChild,
+          isActive.value && props.activeClass,
+          isExactActive.value && props.exactActiveClass,
+        ]),
+      }));
     }
   }
 

package/ui.button-link/configs/default.config.js

@@ -1,10 +1,15 @@
 export default /*tw*/ {
   wrapper: {
     base: `
-      w-fit inline-flex rounded transition focus-visible:outline-none
+      w-fit inline-flex items-center rounded transition focus-visible:outline-none
       focus-within:ring-dynamic focus-within:ring-offset-4 focus-within:ring-{color}-700/15
     `,
     variants: {
+      size: {
+        sm: "gap-1",
+        md: "gap-1.5",
+        lg: "gap-1.5",
+      },
       color: {
         grayscale: "focus-within:ring-gray-700/15",
         white: "focus-within:ring-white/15",
@@ -56,11 +61,8 @@ export default /*tw*/ {
       },
     },
   },
-  text: "w-full",
-  withSlots: "flex items-center no-underline hover:no-underline focus-within:ring-0 focus-within:ring-offset-0",
-  leftSlot: "mr-1",
-  rightSlot: "ml-1",
-  defaultVariants: {
+  withChild: "flex items-center no-underline hover:no-underline focus-within:ring-0 focus-within:ring-offset-0",
+  defaults: {
     color: "brand",
     type: "link",
     size: "md",

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

@@ -1,6 +1,7 @@
 import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import ULink from "../ui.button-link";
+import UIcon from "../ui.image-icon";
 import UButton from "../ui.button";
 import URow from "../ui.container-row";
 
@@ -21,7 +22,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { ULink, UButton },
+  components: { ULink, UButton, UIcon },
   setup() {
     const slots = getSlotNames(ULink.name);
 
@@ -106,3 +107,21 @@ slotDefault.args = {
     </template>
   `,
 };
+
+export const slotLeft = DefaultTemplate.bind({});
+slotLeft.args = {
+  slotTemplate: `
+    <template #left>
+      <UIcon name="star" size="xs" />
+    </template>
+  `,
+};
+
+export const slotRight = DefaultTemplate.bind({});
+slotRight.args = {
+  slotTemplate: `
+    <template #right>
+      <UIcon name="star" size="xs" />
+    </template>
+  `,
+};

package/ui.button-link/index.vue

@@ -1,16 +1,14 @@
 <template>
   <div v-bind="wrapperAttrs" ref="wrapperRef" tabindex="-1">
-    <div v-if="hasSlotContent($slots['left'])" v-bind="leftSlotAttrs">
-      <!-- @slot Use it to add something before the text. -->
-      <slot name="left" />
-    </div>
+    <!-- @slot Use it to add something before the text. -->
+    <slot name="left" />
 
     <router-link
       v-if="isPresentRoute"
       :to="route"
       :target="targetValue"
-      :data-test="dataTest"
       v-bind="linkAttrs"
+      :data-test="dataTest"
       tabindex="0"
       @blur="onBlur"
       @focus="onFocus"
@@ -20,16 +18,16 @@
     >
       <!-- @slot Use it replace the text. -->
       <slot>
-        <span v-if="!hasSlotContent($slots['default'])" v-bind="textAttrs" v-text="label" />
+        {{ label }}
       </slot>
     </router-link>
 
     <a
       v-else
-      :href="href"
+      :href="prefixedHref"
       :target="targetValue"
-      :data-test="dataTest"
       v-bind="linkAttrs"
+      :data-test="dataTest"
       tabindex="0"
       @blur="onBlur"
       @focus="onFocus"
@@ -39,14 +37,12 @@
     >
       <!-- @slot Use it replace the text. -->
       <slot>
-        <span v-if="!hasSlotContent($slots['default'])" v-bind="textAttrs" v-text="label" />
+        {{ label }}
       </slot>
     </a>
 
-    <div v-if="hasSlotContent($slots['right'])" v-bind="rightSlotAttrs">
-      <!-- @slot Use it to add something after the text. -->
-      <slot name="right" />
-    </div>
+    <!-- @slot Use it to add something after the text. -->
+    <slot name="right" />
   </div>
 </template>
 
@@ -99,17 +95,17 @@ const props = defineProps({
   },
 
   /**
-   * Link url.
+   * Link href url.
    */
-  url: {
+  href: {
     type: String,
     default: "",
   },
 
   /**
-   * Vue route object.
+   * Vue-router route object.
    */
-  route: {
+  to: {
     type: Object,
     default: () => ({}),
   },
@@ -142,7 +138,7 @@ const props = defineProps({
   },
 
   /**
-   * Open link in new window.
+   * Open link in the new tab.
    */
   targetBlank: {
     type: Boolean,
@@ -263,7 +259,7 @@ const props = defineProps({
 });
 
 const isPresentRoute = computed(() => {
-  for (let key in props.route) return true;
+  for (let key in props.to) return true;
 
   return false;
 });
@@ -274,28 +270,27 @@ const { route, isActive, isExactActive } = useLink({
   exactActiveClass: props.exactActiveClass,
   custom: props.custom,
   replace: props.replace,
-  to: isPresentRoute.value ? props.route : "/",
+  to: isPresentRoute.value ? props.to : "/",
 });
 
 const wrapperRef = ref(null);
 
 defineExpose({ wrapperRef });
 
-const { wrapperAttrs, linkAttrs, rightSlotAttrs, leftSlotAttrs, textAttrs, hasSlotContent } =
-  useAttrs(props, { isActive, isExactActive });
+const { wrapperAttrs, linkAttrs } = useAttrs(props, { isActive, isExactActive });
 
 const targetValue = computed(() => {
   return props.targetBlank ? "_blank" : "_self";
 });
 
-const href = computed(() => {
+const prefixedHref = computed(() => {
   const types = {
     phone: "tel:",
     email: "mailto:",
     link: "",
   };
 
-  return props.url ? `${types[props.type]}${props.url}` : null;
+  return props.href ? `${types[props.type]}${props.href}` : null;
 });
 
 function onClick(event) {

package/ui.button-toggle/configs/default.config.js

@@ -37,7 +37,7 @@ export default /*tw*/ {
     ],
   },
   item: "{UToggleItem}",
-  defaultVariants: {
+  defaults: {
     variant: "primary",
     labelAlign: "top",
     size: "md",

package/ui.button-toggle-item/configs/default.config.js

@@ -42,7 +42,7 @@ export default /*tw*/ {
     ],
   },
   input: "p-0 m-0 size-0 invisible absolute",
-  defaultVariants: {
+  defaults: {
     variant: "primary",
     type: "radio",
     size: "md",

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

@@ -28,7 +28,7 @@ export default /*tw*/ {
   expandIconName: "add",
   collapseIconName: "remove",
   divider: "{UDivider} group-last:hidden",
-  defaultVariants: {
+  defaults: {
     size: "md",
   },
 };

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

@@ -18,7 +18,7 @@ export default /*tw*/ {
   divider: "{UDivider}",
   footer: "flex justify-between",
   footerMobileReverse: "flex flex-col-reverse space-y-reverse",
-  defaultVariants: {
+  defaults: {
     padding: "md",
     mobileFooterReverse: false,
   },

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

@@ -84,7 +84,7 @@ export const slotHeaderLeftBefore = DefaultTemplate.bind({});
 slotHeaderLeftBefore.args = {
   slotTemplate: `
     <template #header-left-before>
-      <UIcon name="star" size="sm" round />
+      <UIcon name="star" size="sm" />
     </template>
     ${defaultTemplate}
   `,
@@ -104,7 +104,7 @@ export const slotHeaderLeftAfter = DefaultTemplate.bind({});
 slotHeaderLeftAfter.args = {
   slotTemplate: `
     <template #header-left-after>
-      <UIcon name="star" size="sm" round />
+      <UIcon name="star" size="sm" />
     </template>
     ${defaultTemplate}
   `,

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

@@ -38,7 +38,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     gap: "md",
     align: "start",
     justify: "start",

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

@@ -63,7 +63,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     variant: "default",
     size: "md",
     dashed: false,

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

@@ -25,7 +25,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     gap: "md",
     upperlined: false,
     underlined: false,

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

@@ -55,7 +55,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     width: "sm",
     inner: false,
     closeIcon: true,

package/ui.container-modal/index.vue

@@ -27,7 +27,7 @@
                     v-if="isShownArrowButton"
                     size="sm"
                     color="gray"
-                    :route="backRoute"
+                    :to="backRoute"
                     v-bind="backLinkAttrs"
                     @click="onClickBackLink"
                   >

package/ui.container-modal-confirm/configs/default.config.js

@@ -7,7 +7,7 @@ export default /*tw*/ {
     confirm: "Confirm",
     cancel: "Cancel",
   },
-  defaultVariants: {
+  defaults: {
     width: "sm",
     confirmColor: "brand",
     confirmDisabled: false,

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

@@ -38,7 +38,7 @@ export default /*tw*/ {
   header: "flex items-start justify-between mb-4 md:mb-6",
   headerLeft: "flex items-center space-x-4",
   headerLeftFallback: "flex flex-col",
-  backLink: "{ULink} flex items-center gap-0.5",
+  backLink: "{ULink}",
   backLinkIcon: "{UIcon}",
   backLinkIconName: "arrow_back",
   title: "{UHeader}",
@@ -61,7 +61,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     titleSize: "lg",
     width: "wide",
     gray: false,

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

@@ -82,9 +82,9 @@ widePage.args = { widePage: true, width: "sm" };
 
 export const backRoute = DefaultTemplate.bind({});
 backRoute.args = {
+  backLabel: "back",
   backRoute: {
-    name: "",
-    title: "some route title",
+    path: "/",
     params: {},
   },
 };

package/ui.container-page/index.vue

@@ -14,19 +14,22 @@
             <div v-bind="headerLeftFallbackAttrs">
               <ULink
                 v-if="isShownArrowButton"
-                size="xs"
+                no-ring
+                size="sm"
                 color="gray"
-                :route="backRoute"
+                :to="backRoute"
+                :label="backLabel"
                 v-bind="backLinkAttrs"
               >
-                <UIcon
-                  internal
-                  size="xs"
-                  color="gray"
-                  :name="config.backLinkIconName"
-                  v-bind="backLinkIconAttrs"
-                />
-                {{ backRoute.title }}
+                <template #left>
+                  <UIcon
+                    internal
+                    size="xs"
+                    color="gray"
+                    :name="config.backLinkIconName"
+                    v-bind="backLinkIconAttrs"
+                  />
+                </template>
               </ULink>
 
               <UHeader :label="title" :size="titleSize" v-bind="titleAttrs" />
@@ -133,13 +136,21 @@ const props = defineProps({
   },
 
   /**
-   * Set Vue router route params for back arrow.
+   * Back link vue-router route object.
    */
   backRoute: {
     type: Object,
     default: () => ({}),
   },
 
+  /**
+   * Back link label.
+   */
+  backLabel: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Set gray background color.
    */

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

@@ -39,7 +39,7 @@ export default /*tw*/ {
       },
     },
   },
-  defaultVariants: {
+  defaults: {
     gap: "md",
     align: "start",
     justify: "start",

package/ui.data-list/configs/default.config.js

@@ -40,7 +40,7 @@ export default /*tw*/ {
     emptyTitle: "",
     emptyDescription: "There is no data in the list.",
   },
-  defaultVariants: {
+  defaults: {
     size: "md",
     labelKey: "label",
     valueKey: "id",

package/ui.data-table/configs/default.config.js

@@ -95,7 +95,7 @@ export default /*tw*/ {
   i18n: {
     noData: "There is no data in the table.",
   },
-  defaultVariants: {
+  defaults: {
     nesting: false,
     compact: false,
     selectable: false,

package/ui.data-table/index.stories.js

@@ -366,7 +366,7 @@ cellSlots.args = {
     </template>
 
     <template #cell-email="{ value }">
-      <ULink :label="value" :url="value" type="email" size="sm" />
+      <ULink :label="value" :url="value" type="email" />
     </template>
 
     <template #cell-tags="{ value }">

package/ui.dropdown-badge/configs/default.config.js

@@ -22,7 +22,7 @@ export default /*tw*/ {
     },
   },
   list: "{UDropdownList} w-fit",
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     weight: "medium",

package/ui.dropdown-button/configs/default.config.js

@@ -22,7 +22,7 @@ export default /*tw*/ {
     },
   },
   list: "{UDropdownList} w-fit",
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     variant: "primary",

package/ui.dropdown-link/configs/default.config.js

@@ -23,7 +23,7 @@ export default /*tw*/ {
     },
   },
   list: "{UDropdownList} w-fit",
-  defaultVariants: {
+  defaults: {
     color: "brand",
     size: "md",
     labelKey: "label",

package/ui.dropdown-list/configs/default.config.js

@@ -61,7 +61,7 @@ export default /*tw*/ {
     noDataToShow: "No data to show.",
     add: "Add",
   },
-  defaultVariants: {
+  defaults: {
     size: "md",
     labelKey: "label",
     valueKey: "id",