vueless 0.0.286 → 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,6 +16,7 @@ const defaultSettings = {
   theme: "light",
   animation: "shift-away",
 };
+
 const mergedSettings = merge(defaultSettings, globalSettings);
 
 tippy.setDefaultProps(mergedSettings);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.286",
+  "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.50",
+    "@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

@@ -1,9 +1,8 @@
 export default /*tw*/ {
   button: {
     base: `
-      flex items-center justify-center
-      font-medium outline-none
-      border border-solid transition
+      flex items-center justify-center transition
+      border font-medium outline-none whitespace-nowrap
       focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
       focus-within:ring-{color}-700/15 focus-within:ring-dynamic focus-within:ring-offset-dynamic
       disabled:ring-0 disabled:ring-offset-0 disabled:cursor-not-allowed cursor-pointer
@@ -42,22 +41,22 @@ export default /*tw*/ {
           disabled:text-gray-400 disabled:bg-transparent
         `,
       },
-      color: {
-        grayscale: "focus:ring-gray-700/15 focus-within:ring-gray-700/15",
-        white: "focus:ring-gray-700/15 focus-within:ring-gray-700/15",
+      round: {
+        false: "rounded-dynamic",
+        true: "rounded-full",
+      },
+      noRing: {
+        true: "focus:ring-0 focus:ring-offset-0 focus-within:ring-0 focus-within:ring-offset-0",
       },
       loading: {
         true: "pointer-events-none gap-0",
       },
-      pill: {
-        false: "rounded-dynamic",
-        true: "rounded-full",
-      },
       block: {
         true: "w-full",
       },
-      noRing: {
-        true: "focus:ring-0 focus:ring-offset-0 focus-within:ring-0 focus-within:ring-offset-0",
+      color: {
+        grayscale: "focus:ring-gray-700/15 focus-within:ring-gray-700/15",
+        white: "focus:ring-gray-700/15 focus-within:ring-gray-700/15",
       },
     },
     compoundVariants: [
@@ -144,15 +143,16 @@ export default /*tw*/ {
       { square: true, size: "xl", class: "p-4" },
     ],
   },
-  text: "whitespace-nowrap focus-visible:outline-none",
+  loader: "{ULoader}",
   leftIcon: "{UIcon}",
   rightIcon: "{UIcon}",
-  defaultVariants: {
+  centerIcon: "{UIcon}",
+  defaults: {
     color: "brand",
     variant: "primary",
     tag: "button",
     size: "md",
-    pill: false,
+    round: false,
     block: false,
     square: false,
     filled: false,
@@ -164,15 +164,12 @@ export default /*tw*/ {
     { pattern: `border-(${colors})-600` },
     { pattern: `border-(${colors})-700`, variants: ["hover", "focus"] },
     { pattern: `border-(${colors})-800`, variants: ["active"] },
-    { pattern: `border-(${colors})-300`, variants: ["disabled"] },
     { pattern: `bg-(${colors})-600` },
     { pattern: `bg-(${colors})-700`, variants: ["hover", "focus"] },
     { pattern: `bg-(${colors})-800`, variants: ["active"] },
-    { pattern: `bg-(${colors})-300`, variants: ["disabled"] },
     { pattern: `text-(${colors})-600` },
     { pattern: `text-(${colors})-700`, variants: ["hover", "focus"] },
     { pattern: `text-(${colors})-800`, variants: ["active"] },
-    { pattern: `text-(${colors})-300`, variants: ["disabled"] },
     { pattern: `ring-(${colors})-700`, variants: ["focus", "focus-within"] },
   ],
 };

package/ui.button/index.stories.js

@@ -88,8 +88,8 @@ variants.args = { enum: "variant" };
 export const sizes = EnumVariantTemplate.bind({});
 sizes.args = { enum: "size" };
 
-export const pilled = EnumVariantTemplate.bind({});
-pilled.args = { enum: "variant", pill: true };
+export const round = EnumVariantTemplate.bind({});
+round.args = { enum: "variant", round: true };
 
 export const disabled = EnumVariantTemplate.bind({});
 disabled.args = { enum: "variant", disabled: true };
@@ -126,6 +126,7 @@ leftIconSlot.args = {
       <UIcon
         name="star"
         color="green"
+        size="sm"
       />
     </template>
   `,
@@ -138,6 +139,7 @@ rightIconSlot.args = {
       <UIcon
         name="star"
         color="green"
+        size="sm"
       />
     </template>
   `,
@@ -150,6 +152,7 @@ leftSlot.args = {
       <UIcon
         name="archive"
         color="red"
+        size="sm"
       />
     </template>
   `,
@@ -162,6 +165,7 @@ rightSlot.args = {
       <UIcon
         name="archive"
         color="red"
+        size="sm"
       />
     </template>
   `,

package/ui.button/index.vue

@@ -4,78 +4,92 @@
     :id="id"
     ref="buttonRef"
     :disabled="disabled"
-    :data-cy="dataCy"
     v-bind="buttonAttrs"
+    :tabindex="loading && '-1'"
+    :data-test="dataTest"
   >
     <template v-if="loading">
       <!-- Label is needed to prevent changing button height -->
-      <div v-bind="textAttrs" tabindex="-1" class="invisible w-0" v-text="label" />
+      <div tabindex="-1" class="invisible w-0" v-text="label" />
       <ULoader :loading="loading" :size="loaderSize" :color="componentColor" v-bind="loaderAttrs" />
     </template>
 
     <template v-else>
-      <div v-if="hasSlotContent($slots['left-icon']) || leftIcon">
-        <!--
-          @slot Use it to add icon before the text.
-          @binding {string} icon-name
-          @binding {string} icon-size
-          @binding {string} icon-color
-        -->
-        <slot
-          name="left-icon"
-          :icon-name="leftIcon"
-          :icon-size="iconSize"
-          :icon-color="componentColor"
-        >
-          <UIcon
-            v-if="leftIcon"
-            :name="leftIcon"
-            :size="iconSize"
-            :color="componentColor"
-            internal
-            v-bind="leftIconAttrs"
-          />
-        </slot>
-      </div>
-
-      <!-- @slot Use it to add something before the text. -->
+      <!--
+        @slot Use it to add icon before the label.
+        @binding {string} icon-name
+        @binding {string} icon-size
+        @binding {string} icon-color
+      -->
+      <slot
+        name="left-icon"
+        :icon-name="leftIcon"
+        :icon-size="iconSize"
+        :icon-color="componentColor"
+      >
+        <UIcon
+          v-if="leftIcon"
+          internal
+          :name="leftIcon"
+          :size="iconSize"
+          :color="componentColor"
+          v-bind="leftIconAttrs"
+        />
+      </slot>
+
+      <!-- @slot Use it to add something before the label. -->
       <slot name="left" />
 
-      <!-- @slot Use it to add something instead of the text. -->
-      <slot />
-      <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 Use it to add something instead of the label.
+        @binding {string} icon-name
+        @binding {string} icon-size
+        @binding {string} icon-color
+      -->
+      <slot
+        name="default"
+        :label="label"
+        :icon-name="icon"
+        :icon-size="iconSize"
+        :icon-color="componentColor"
+      >
+        <UIcon
+          v-if="icon"
+          internal
+          :name="icon"
+          :size="iconSize"
+          :color="componentColor"
+          v-bind="centerIconAttrs"
+        />
+        <template v-else>
+          {{ label }}
+        </template>
+      </slot>
+
+      <!-- @slot Use it to add something after the label. -->
       <slot name="right" />
 
-      <div v-if="hasSlotContent($slots['right-icon']) || rightIcon">
-        <!--
-          @slot Use it to add icon after the text.
-          @binding {string} icon-name
-          @binding {string} icon-size
-          @binding {string} icon-color
-        -->
-        <slot
-          name="right-icon"
-          :icon-name="rightIcon"
-          :icon-size="iconSize"
-          :icon-color="componentColor"
-        >
-          <UIcon
-            v-if="rightIcon"
-            :name="rightIcon"
-            :size="iconSize"
-            :color="componentColor"
-            internal
-            v-bind="rightIconAttrs"
-          />
-        </slot>
-      </div>
+      <!--
+        @slot Use it to add icon after the label.
+        @binding {string} icon-name
+        @binding {string} icon-size
+        @binding {string} icon-color
+      -->
+      <slot
+        name="right-icon"
+        :icon-name="rightIcon"
+        :icon-size="iconSize"
+        :icon-color="componentColor"
+      >
+        <UIcon
+          v-if="rightIcon"
+          internal
+          :name="rightIcon"
+          :size="iconSize"
+          :color="componentColor"
+          v-bind="rightIconAttrs"
+        />
+      </slot>
     </template>
   </component>
 </template>
@@ -123,35 +137,43 @@ const props = defineProps({
   },
 
   /**
-   * Left side icon name.
+   * Button label.
    */
-  leftIcon: {
+  label: {
     type: String,
     default: "",
   },
 
   /**
-   * Right side icon name.
+   * Allows changing button html tag.
    */
-  rightIcon: {
+  tag: {
+    type: String,
+    default: getDefault(defaultConfig, UButton).tag,
+  },
+
+  /**
+   * Icon name (appears instead of label).
+   */
+  icon: {
     type: String,
     default: "",
   },
 
   /**
-   * Button label.
+   * Left side icon name.
    */
-  label: {
+  leftIcon: {
     type: String,
     default: "",
   },
 
   /**
-   * Allows changing button html tag.
+   * Right side icon name.
    */
-  tag: {
+  rightIcon: {
     type: String,
-    default: getDefault(defaultConfig, UButton).tag,
+    default: "",
   },
 
   /**
@@ -181,9 +203,9 @@ const props = defineProps({
   /**
    * Set button corners rounded.
    */
-  pill: {
+  round: {
     type: Boolean,
-    default: getDefault(defaultConfig, UButton).pill,
+    default: getDefault(defaultConfig, UButton).round,
   },
 
   /**
@@ -203,7 +225,7 @@ const props = defineProps({
   },
 
   /**
-   * Remove outline ring on focus.
+   * Remove button ring on focus.
    */
   noRing: {
     type: Boolean,
@@ -228,15 +250,15 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },
 });
 
-const { buttonAttrs, loaderAttrs, textAttrs, leftIconAttrs, rightIconAttrs, hasSlotContent } =
+const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } =
   useAttrs(props);
 
 const buttonRef = ref(null);
@@ -258,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>
+  `,
+};