vueless 0.0.285 → 0.0.287

package/directive.tooltip/index.js

@@ -22,6 +22,8 @@ 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.285",
+  "version": "0.0.287",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@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.51",
     "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.13",
     "autoprefixer": "^10.4.19",

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}",
+  centerIcon: "{UIcon}",
   defaultVariants: {
     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);

package/ui.button-link/index.vue

@@ -9,7 +9,7 @@
       v-if="isPresentRoute"
       :to="route"
       :target="targetValue"
-      :data-cy="dataCy"
+      :data-test="dataTest"
       v-bind="linkAttrs"
       tabindex="0"
       @blur="onBlur"
@@ -28,7 +28,7 @@
       v-else
       :href="href"
       :target="targetValue"
-      :data-cy="dataCy"
+      :data-test="dataTest"
       v-bind="linkAttrs"
       tabindex="0"
       @blur="onBlur"
@@ -254,9 +254,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

@@ -42,7 +42,7 @@ export default /*tw*/ {
     labelAlign: "top",
     size: "md",
     block: false,
-    pill: false,
+    round: false,
     square: false,
     disabled: false,
     multiple: false,

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

@@ -123,10 +123,10 @@ separated.args = {
   separated: true,
 };
 
-export const pill = DefaultTemplate.bind({});
-pill.args = {
-  name: "pill",
-  pill: true,
+export const round = DefaultTemplate.bind({});
+round.args = {
+  name: "round",
+  round: true,
   separated: true,
 };
 

package/ui.button-toggle/index.vue

@@ -7,7 +7,7 @@
     :disabled="disabled"
     centred
     v-bind="labelAttrs"
-    :data-cy="dataCy"
+    :data-test="dataTest"
   >
     <div v-bind="itemsAttrs">
       <!-- @slot Use it to add UToggleItem directly. -->
@@ -20,7 +20,7 @@
           :value="item.value"
           :disabled="disabled"
           :label="item.label"
-          :data-cy="`${dataCy}-item-${index}`"
+          :data-test="`${dataTest}-item-${index}`"
           v-bind="itemAttrs"
         />
       </slot>
@@ -145,9 +145,9 @@ const props = defineProps({
   /**
    * Set button corners rounded.
    */
-  pill: {
+  round: {
     type: Boolean,
-    default: getDefault(defaultConfig, UToggle).pill,
+    default: getDefault(defaultConfig, UToggle).round,
   },
 
   /**
@@ -167,9 +167,9 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },
@@ -227,7 +227,7 @@ function updateSelectedValue(value, checked) {
 provide("getToggleName", () => props.name);
 provide("getToggleType", () => type.value);
 provide("getToggleSize", () => props.size);
-provide("getTogglePill", () => props.pill);
+provide("getToggleRound", () => props.round);
 provide("getToggleBlock", () => props.block);
 provide("getToggleSquare", () => props.square);
 provide("getToggleVariant", () => props.variant);

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

@@ -47,7 +47,7 @@ export default /*tw*/ {
     type: "radio",
     size: "md",
     block: false,
-    pill: false,
+    round: false,
     square: false,
     disabled: false,
   },

package/ui.button-toggle-item/index.vue

@@ -7,7 +7,7 @@
     variant="secondary"
     :label="label"
     :size="getToggleSize()"
-    :pill="getTogglePill()"
+    :round="getToggleRound()"
     :block="getToggleBlock()"
     :square="getToggleSquare()"
     :disabled="getToggleDisabled()"
@@ -107,9 +107,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },
@@ -127,7 +127,7 @@ const emit = defineEmits([
 const getToggleName = inject("getToggleName", () => "toggle");
 const getToggleType = inject("getToggleType", () => getDefault(defaultConfig, UToggleItem).type);
 const getToggleSize = inject("getToggleSize", () => getDefault(defaultConfig, UToggleItem).size);
-const getTogglePill = inject("getTogglePill", () => getDefault(defaultConfig, UToggleItem).pill);
+const getToggleRound = inject("getToggleRound", () => getDefault(defaultConfig, UToggleItem).round);
 const getToggleBlock = inject("getToggleBlock", () => getDefault(defaultConfig, UToggleItem).block);
 const getToggleSquare = inject("getToggleSquare", () => getDefault(defaultConfig, UToggleItem).square);
 const getToggleVariant = inject("getToggleVariant",() => getDefault(defaultConfig, UToggleItem).variant);

package/ui.container-accordion/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClickItem">
+  <div :data-test="dataTest" v-bind="wrapperAttrs" @click="onClickItem">
     <div v-bind="bodyAttrs">
       <div v-bind="titleAttrs">
         {{ title }}
@@ -77,9 +77,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

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

package/ui.container-card/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+  <div :data-test="dataTest" v-bind="wrapperAttrs">
     <div v-if="isShownHeader" v-bind="headerAttrs">
       <div v-bind="headerLeftAttrs">
         <!-- @slot Use it to add something before left side of the header. -->
@@ -98,9 +98,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

package/ui.container-col/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="wrapperAttrs" :data-cy="dataCy">
+  <div v-bind="wrapperAttrs" :data-test="dataTest">
     <!-- @slot Use it to add something inside. -->
     <slot />
   </div>
@@ -68,9 +68,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

package/ui.container-divider/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+  <div :data-test="dataTest" v-bind="wrapperAttrs">
     <div v-bind="dividerAttrs" />
     <template v-if="label && !vertical">
       <span v-bind="labelAttrs" v-text="label" />
@@ -126,9 +126,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },

package/ui.container-group/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="wrapperAttrs" :data-cy="dataCy">
+  <div v-bind="wrapperAttrs" :data-test="dataTest">
     <template v-if="title">
       <UDivider v-if="upperlined" size="xl" no-top-padding v-bind="upperlineAttrs" />
 
@@ -86,9 +86,9 @@ const props = defineProps({
   },
 
   /**
-   * Data-cy attribute for automated testing.
+   * Data-test attribute for automated testing.
    */
-  dataCy: {
+  dataTest: {
     type: String,
     default: "",
   },