vueless 0.0.141 → 0.0.143

package/package.json

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

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

@@ -28,7 +28,7 @@ export function useAttrs(props) {
         variant: props.variant,
         pill: props.pill,
         block: props.block,
-        square: props.square,
+        square: props.loading || props.square,
         filled: props.filled,
         loading: props.loading,
         disabled: props.disabled,
@@ -37,12 +37,22 @@ export function useAttrs(props) {
     ),
   );
 
-  const textClasses = computed(() => setColor(cvaText({ color: props.color }), props.color));
+  const textClasses = computed(() =>
+    setColor(
+      cvaText({
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
   const buttonAttrs = getAttrs("button", { classes: buttonClasses });
+  const loaderAttrs = getAttrs("loader");
   const textAttrs = getAttrs("text", { classes: textClasses });
 
   return {
-    textAttrs,
     buttonAttrs,
+    loaderAttrs,
+    textAttrs,
   };
 }

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

@@ -44,7 +44,7 @@ export default /*tw*/ {
         `,
       },
       loading: {
-        true: "pointer-events-none",
+        true: "pointer-events-none gap-0",
       },
       pill: {
         true: "rounded-full",

package/ui.button/index.vue

@@ -8,22 +8,28 @@
     v-bind="buttonAttrs"
     @click="onClick"
   >
-    <!-- @slot Use it to add something before text. -->
-    <slot v-if="!loading" name="left" />
-
-    <!-- @slot Use it to add something instead of text. -->
-    <slot v-if="!loading" />
-
-    <div v-if="label" v-bind="textAttrs" tabindex="-1" v-text="label" />
-    <ULoader v-if="loading" :size="size" color="white" />
-
-    <!-- @slot Use it to add something after text. -->
-    <slot v-if="!loading" name="right" />
+    <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" />
+      <ULoader :size="loaderSize" :color="loaderColor" v-bind="loaderAttrs" />
+    </template>
+
+    <template v-else>
+      <!-- @slot Use it to add something before text. -->
+      <slot name="left" />
+
+      <!-- @slot Use it to add something instead of text. -->
+      <slot />
+      <div v-if="label" v-bind="textAttrs" tabindex="-1" v-text="label" />
+
+      <!-- @slot Use it to add something after text. -->
+      <slot name="right" />
+    </template>
   </component>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import UIService, { getRandomId } from "../service.ui";
 import ULoader from "../ui.loader";
@@ -155,12 +161,29 @@ const props = defineProps({
 
 const emit = defineEmits(["click"]);
 
-const { textAttrs, buttonAttrs } = useAttrs(props);
+const { buttonAttrs, loaderAttrs, textAttrs } = useAttrs(props);
 
 const buttonRef = ref(null);
 
 defineExpose({ buttonRef });
 
+const loaderSize = computed(() => {
+  const sizes = {
+    "2xs": "sm",
+    xs: "sm",
+    sm: "md",
+    md: "md",
+    lg: "lg",
+    xl: "lg",
+  };
+
+  return sizes[props.size];
+});
+
+const loaderColor = computed(() => {
+  return props.variant === "primary" ? "white" : props.color;
+});
+
 function onClick(event) {
   if (props.disabled) return;
 

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

@@ -36,7 +36,7 @@ export default /*tw*/ {
   },
   defaultVariants: {
     gap: "md",
-    align: "start",
+    align: "stretch",
     upperlined: true,
     underlined: false,
   },

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

@@ -1,16 +1,16 @@
 export default /*tw*/ {
   loader: {
-    base: "relative mx-1 flex h-4 items-center",
+    base: "relative flex items-center",
     variants: {
       size: {
-        sm: "w-9",
-        md: "w-[3.625rem]",
-        lg: "w-20",
+        sm: "h-1.5 w-9",
+        md: "h-2.5 w-[3.625rem]",
+        lg: "h-4 w-20",
       },
     },
   },
   ellipse: {
-    base: `absolute rounded-full bg-{color}-500 ease-[cubic-bezier(0,1,1,0)]`,
+    base: "absolute rounded-full bg-{color}-600 ease-[cubic-bezier(0,1,1,0)]",
     variants: {
       color: {
         white: "bg-white",
@@ -18,30 +18,32 @@ export default /*tw*/ {
       },
       size: {
         sm: `
-            h-1.5 w-1.5
-            [&:nth-child(1)]:left-1
-            [&:nth-child(4)]:left-7
-          `,
+          h-1.5 w-1.5
+          [&:nth-child(1)]:left-1
+          [&:nth-child(2)]:left-1
+          [&:nth-child(3)]:left-4
+          [&:nth-child(4)]:left-7
+        `,
         md: `
-            h-2.5 w-2.5
-            [&:nth-child(1)]:left-1.5
-            [&:nth-child(2)]:left-1.5
-            [&:nth-child(3)]:left-6
-            [&:nth-child(4)]:left-[2.625rem]
-          `,
+          h-2.5 w-2.5
+          [&:nth-child(1)]:left-1.5
+          [&:nth-child(2)]:left-1.5
+          [&:nth-child(3)]:left-6
+          [&:nth-child(4)]:left-[2.625rem]
+        `,
         lg: `
-            h-4 w-4
-            [&:nth-child(1)]:left-2
-            [&:nth-child(2)]:left-2
-            [&:nth-child(3)]:left-8
-            [&:nth-child(4)]:left-14
-          `,
+          h-4 w-4
+          [&:nth-child(1)]:left-2
+          [&:nth-child(2)]:left-2
+          [&:nth-child(3)]:left-8
+          [&:nth-child(4)]:left-14
+        `,
       },
     },
   },
   defaultVariants: {
-    size: "md",
     color: "brand",
+    size: "md",
   },
-  safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
+  safelist: (colors) => [{ pattern: `bg-(${colors})-600` }],
 };

package/ui.loader/index.stories.js

@@ -34,14 +34,14 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <div class="flex gap-4 flex-wrap">
+    <URow class="flex-wrap">
       <ULoader
         v-for="(color, index) in colors"
         :color="color"
         v-bind="args"
         :key="index"
       />
-    </div>
+    </URow>
   `,
 });
 
@@ -57,25 +57,19 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     <URow>
       <ULoader
         v-for="(size, index) in sizes"
-        :size="size"
-        :label="getText(size)"
-        v-bind="args"
         :key="index"
+        v-bind="args"
+        :size="size"
       />
     </URow>
   `,
-  methods: {
-    getText(value) {
-      return `Tag ${value}`;
-    },
-  },
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Colors = ColorsTemplate.bind({});
-Colors.args = {};
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
+export const colors = ColorsTemplate.bind({});
+colors.args = {};

package/ui.loader/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div v-bind="loaderAttrs">
-    <div v-for="ellipse in ellipsesAmount" :key="ellipse" v-bind="ellipseAttrs(ellipseClasses)" />
+    <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs(ellipseClasses)" />
   </div>
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import UIService from "../service.ui";
 
 import { ULoader } from "./constants";
@@ -17,7 +17,7 @@ defineOptions({ name: "ULoader", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * The size of the button.
+   * Loader size.
    * @values sm, md, lg
    */
   size: {
@@ -35,7 +35,7 @@ const props = defineProps({
   },
 });
 
-const ellipsesAmount = ref(4);
+const ELLIPSES_AMOUNT = 4;
 
 const { loaderAttrs, ellipseAttrs } = useAttrs(props);
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.141",
+  "version": "0.0.143",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2914,7 +2914,7 @@
                 "kind": "expression",
                 "type": "'start' | 'end' | 'center' | 'stretch' | 'baseline'"
               },
-              "default": "start"
+              "default": "stretch"
             },
             {
               "name": "upperlined",
@@ -4480,7 +4480,7 @@
           "attributes": [
             {
               "name": "size",
-              "description": "The size of the button.",
+              "description": "Loader size.",
               "value": {
                 "kind": "expression",
                 "type": "'sm' | 'md' | 'lg'"