vueless 0.0.237 → 0.0.239

package/ui.form-input/index.stories.js

@@ -3,7 +3,7 @@ import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storyboo
 import UInput from "../ui.form-input";
 import UIcon from "../ui.image-icon";
 import UButton from "../ui.button";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 import URow from "../ui.container-row";
 
 /**
@@ -90,14 +90,14 @@ const ValidationRuleTemplate = (args, { argTypes } = {}) => ({
 });
 
 const LabelPlacementTemplate = (args) => ({
-  components: { UInput, UGroup },
+  components: { UInput, UCol },
   setup() {
     return {
       args,
     };
   },
   template: `
-    <UGroup gap="xl">
+    <UCol gap="xl">
       <UInput
         v-bind="args"
         label="top"
@@ -109,7 +109,7 @@ const LabelPlacementTemplate = (args) => ({
         label="topInside"
         :label-outside="false"
       />
-    </UGroup>
+    </UCol>
   `,
 });
 

package/ui.form-input/index.vue

@@ -1,6 +1,6 @@
 <template>
   <ULabel
-    ref="labelComponent"
+    ref="labelComponentRef"
     :for="id"
     :label="label"
     :description="description"
@@ -12,14 +12,14 @@
     v-bind="labelAttrs"
   >
     <label :for="id" v-bind="blockAttrs">
-      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper">
+      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapperRef">
         <!-- @slot Use it to add something before the text. -->
         <slot name="left" />
       </span>
 
       <span
         v-if="hasSlotContent($slots['icon-left']) || iconLeft"
-        ref="leftSlotWrapper"
+        ref="leftSlotWrapperRef"
         v-bind="leftIconSlotAttrs"
       >
         <!--
@@ -35,7 +35,7 @@
       <span v-bind="inputWrapperAttrs">
         <input
           :id="id"
-          ref="input"
+          ref="inputRef"
           v-model="inputValue"
           :placeholder="placeholder"
           :type="inputType"
@@ -315,11 +315,11 @@ const props = defineProps({
 const slots = useSlots();
 
 const isShownPassword = ref(false);
-const input = ref(null);
-const labelComponent = ref(null);
-const leftSlotWrapper = ref(null);
+const inputRef = ref(null);
+const labelComponentRef = ref(null);
+const leftSlotWrapperRef = ref(null);
 
-defineExpose({ input });
+defineExpose({ inputRef });
 
 const isTypePassword = computed(() => props.type === "password");
 
@@ -440,12 +440,12 @@ function setLabelPosition() {
     return;
   }
 
-  let leftSlotOrIconWidth = leftSlotWrapper.value.getBoundingClientRect().width;
+  let leftSlotOrIconWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
 
-  const leftPaddingValue = parseFloat(getComputedStyle(input.value).paddingLeft);
+  const leftPaddingValue = parseFloat(getComputedStyle(inputRef.value).paddingLeft);
 
-  if (labelComponent.value.labelElement) {
-    labelComponent.value.labelElement.style.left = `${leftSlotOrIconWidth + leftPaddingValue}px`;
+  if (labelComponentRef.value.labelElement) {
+    labelComponentRef.value.labelElement.style.left = `${leftSlotOrIconWidth + leftPaddingValue}px`;
   }
 }
 </script>

package/ui.form-input-money/index.stories.js

@@ -2,7 +2,7 @@ import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storyboo
 
 import UInputMoney from "../ui.form-input-money";
 import URow from "../ui.container-row";
-// import UGroup from "../ui.container-group";
+// import UCol from "../ui.container-col";
 
 /**
  * The `UInputMoney` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-input-money)
@@ -59,14 +59,14 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 
 // TODO: Rewrite to labelAlign
 // const LabelPlacementTemplate = (args) => ({
-//   components: { UInputMoney, UGroup },
+//   components: { UInputMoney, UCol },
 //   setup() {
 //     return {
 //       args,
 //     };
 //   },
 //   template: `
-//     <UGroup gap="xl">
+//     <UCol gap="xl">
 //       <UInputMoney
 //         v-bind="args"
 //         :label-outside="true"
@@ -78,7 +78,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 //         :label-outside="false"
 //         label="topInside"
 //       />
-//     </UGroup>
+//     </UCol>
 //   `,
 // });
 

package/ui.form-input-number/index.stories.js

@@ -1,7 +1,7 @@
 import { getArgTypes } from "../service.storybook";
 
 import UInputNumber from "../ui.form-input-number";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 
 /**
  * The `UInputNumber` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-input-number)
@@ -32,7 +32,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UInputNumber, UGroup },
+  components: { UInputNumber, UCol },
   setup() {
     return {
       args,
@@ -49,7 +49,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup gap="xl">
+    <UCol gap="xl">
       <UInputNumber
         v-for="(size, index) in sizes"
         v-bind="args"
@@ -58,7 +58,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
         :label="sizeValues[index].label"
         v-model="sizeValues[index].count"
       />
-    </UGroup>
+    </UCol>
   `,
 });
 

package/ui.form-label/index.stories.js

@@ -1,6 +1,6 @@
 import ULabel from "../ui.form-label";
 import URow from "../ui.container-row";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 import UText from "../ui.text-block";
 import UIcon from "../ui.image-icon";
 
@@ -72,7 +72,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 });
 
 const LabelPlacementTemplate = (args, { argTypes } = {}) => ({
-  components: { ULabel, UGroup, UText },
+  components: { ULabel, UCol, UText },
   setup() {
     return {
       args,
@@ -80,7 +80,7 @@ const LabelPlacementTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup>
+    <UCol>
       <ULabel
         v-for="(align, index) in placements"
         v-bind="args"
@@ -90,7 +90,7 @@ const LabelPlacementTemplate = (args, { argTypes } = {}) => ({
       >
         <UText>This is <b>"{{ align }}"</b> label placement.</UText>
       </ULabel>
-    </UGroup>
+    </UCol>
   `,
 });
 

package/ui.form-radio-group/index.stories.js

@@ -4,7 +4,7 @@ import URadioGroup from "../ui.form-radio-group";
 import URadio from "../ui.form-radio";
 import UAlert from "../ui.text-alert";
 import URow from "../ui.container-row";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 
 /**
  * The `URadioGroup` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-radio-group)
@@ -28,7 +28,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { URadioGroup, URadio, UAlert, URow, UGroup },
+  components: { URadioGroup, URadio, UAlert, URow, UCol },
   setup() {
     return { args };
   },
@@ -38,14 +38,14 @@ const DefaultTemplate = (args) => ({
     };
   },
   template: `
-    <UGroup gap="2xl">
+    <UCol gap="2xl">
       <URadioGroup v-bind="args" v-model="value">
         <URadio v-for="(radio, index) in args.radios" :key="index" v-bind="radio" />
       </URadioGroup>
       <UAlert color="gray" size="xs">
         <code>Selected value: <b>{{ value }}</b></code>
       </UAlert>
-    </UGroup>
+    </UCol>
   `,
 });
 

package/ui.form-select/configs/default.config.js

@@ -13,7 +13,7 @@ export default /*tw*/ {
     variants: {
       error: {
         true: `
-          border-red-300 hover:border-red-300
+          bg-red-50 border-red-300 hover:border-red-300
           focus-within:border-red-500 focus-within:ring-red-100
         `,
       },

package/ui.form-switch/configs/default.config.js

@@ -2,8 +2,7 @@ export default /*tw*/ {
   label: "{ULabel}",
   wrapper: {
     base: `
-      transition duration-300
-      flex items-center p-0.5 relative rounded-3xl cursor-pointer
+      flex items-center p-0.5 relative rounded-3xl cursor-pointer transition
       ring-opacity-10 focus-within:ring-dynamic focus-within:ring-offset-dynamic
     `,
     variants: {
@@ -28,7 +27,7 @@ export default /*tw*/ {
   },
   input: "absolute size-0 opacity-0",
   circle: {
-    base: "transition duration-300 rounded-full bg-white flex items-center justify-center",
+    base: "transition-all duration-300 rounded-full bg-white flex items-center justify-center",
     variants: {
       size: {
         sm: "size-3",
@@ -46,7 +45,7 @@ export default /*tw*/ {
   selectedIconName: "check",
   unselectedIconName: "close",
   toggleLabel: {
-    base: "absolute text-center text-2xs font-medium uppercase text-white transition duration-300",
+    base: "absolute text-center text-2xs font-medium uppercase text-white",
     compoundVariants: [
       { toggleLabel: true, checked: true, class: "w-1/2 left-1" },
       { toggleLabel: true, checked: false, class: "w-1/2 right-1" },

package/ui.form-textarea/configs/default.config.js

@@ -12,7 +12,7 @@ export default /*tw*/ {
     variants: {
       error: {
         true: `
-          border-red-300
+          bg-red-50 border-red-300
           hover:border-red-400 hover:focus-within:border-red-500
           focus-within:border-red-500 focus-within:ring-red-100
         `,
@@ -51,7 +51,6 @@ export default /*tw*/ {
     type: "text",
     inputmode: "text",
     labelAlign: "topInside",
-    error: false,
     disabled: false,
     readonly: false,
     noAutocomplete: false,

package/ui.form-textarea/index.stories.js

@@ -3,7 +3,7 @@ import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storyboo
 import UTextarea from "../ui.form-textarea";
 import UIcon from "../ui.image-icon";
 import URow from "../ui.container-row";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 
 /**
  * The `UTextarea` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-textarea)
@@ -72,14 +72,14 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 });
 
 const LabelPlacementTemplate = (args) => ({
-  components: { UTextarea, UGroup },
+  components: { UTextarea, UCol },
   setup() {
     return {
       args,
     };
   },
   template: `
-    <UGroup gap="xl">
+    <UCol gap="xl">
       <UTextarea
         v-bind="args"
         label-align="top"
@@ -91,7 +91,7 @@ const LabelPlacementTemplate = (args) => ({
         label-align="topInside"
         label="topInside"
       />
-    </UGroup>
+    </UCol>
   `,
 });
 

package/ui.form-textarea/index.vue

@@ -1,6 +1,6 @@
 <template>
   <ULabel
-    ref="labelComponent"
+    ref="labelComponentRef"
     :for="id"
     :label="label"
     :error="error"
@@ -13,17 +13,17 @@
   >
     <label
       v-if="hasSlotContent($slots['left'])"
-      ref="leftSlotWrapper"
+      ref="leftSlotWrapperRef"
       :for="id"
       v-bind="leftSlotAttrs"
     >
       <!-- @slot Use it to add something before the text. -->
       <slot name="left" />
     </label>
-    <label ref="textareaWrapper" :for="id" v-bind="textareaWrapperAttrs">
+    <label ref="textareaWrapperRef" :for="id" v-bind="textareaWrapperAttrs">
       <textarea
         :id="id"
-        ref="textarea"
+        ref="textareaRef"
         v-model="localValue"
         :value="modelValue"
         :placeholder="placeholder"
@@ -231,10 +231,10 @@ const {
   hasSlotContent,
 } = useAttrs(props);
 
-const textarea = ref(null);
-const labelComponent = ref(null);
-const leftSlotWrapper = ref(null);
-const textareaWrapper = ref(null);
+const textareaRef = ref(null);
+const labelComponentRef = ref(null);
+const leftSlotWrapperRef = ref(null);
+const textareaWrapperRef = ref(null);
 
 const localValue = computed({
   get() {
@@ -245,7 +245,7 @@ const localValue = computed({
   },
 });
 
-defineExpose({ textarea });
+defineExpose({ textareaRef });
 
 onMounted(() => toggleReadonly(true));
 
@@ -292,13 +292,13 @@ function toggleReadonly(hasReadonly) {
 function setLabelPosition() {
   if (props.labelAlign === "top" || !hasSlotContent(slots["left"])) return;
 
-  const leftSlotWidth = leftSlotWrapper.value.getBoundingClientRect().width;
+  const leftSlotWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
 
-  if (labelComponent.value.labelElement) {
-    labelComponent.value.labelElement.style.left = `${leftSlotWidth}px`;
+  if (labelComponentRef.value.labelElement) {
+    labelComponentRef.value.labelElement.style.left = `${leftSlotWidth}px`;
   }
 
-  textareaWrapper.value.style.paddingLeft = `${leftSlotWidth}px`;
+  textareaWrapperRef.value.style.paddingLeft = `${leftSlotWidth}px`;
 }
 
 onMounted(() => setLabelPosition());

package/ui.image-avatar/index.stories.js

@@ -2,7 +2,7 @@ import { getArgTypes } from "../service.storybook";
 
 import UAvatar from "../ui.image-avatar";
 import URow from "../ui.container-row";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 
 /**
  * The `UAvatar` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.image-avatar)
@@ -27,7 +27,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UGroup, URow, UAvatar },
+  components: { UCol, URow, UAvatar },
   setup() {
     return {
       args,
@@ -35,7 +35,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup gap="xl">
+    <UCol gap="xl">
       <URow>
         <UAvatar
           v-for="(size, index) in sizes"
@@ -54,12 +54,12 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
           :label="''"
         />
       </URow>
-    </UGroup>
+    </UCol>
   `,
 });
 
 const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UGroup, URow, UAvatar },
+  components: { UCol, URow, UAvatar },
   setup() {
     return {
       args,
@@ -67,7 +67,7 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup gap="xl">
+    <UCol gap="xl">
       <URow>
         <UAvatar
           v-for="(color, index) in colors"
@@ -86,12 +86,12 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
           :label="''"
         />
       </URow>
-    </UGroup>
+    </UCol>
   `,
 });
 
 const RoundedTemplate = (args, { argTypes } = {}) => ({
-  components: { UGroup, UAvatar, URow },
+  components: { UCol, UAvatar, URow },
   setup() {
     return {
       args,
@@ -99,7 +99,7 @@ const RoundedTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup>
+    <UCol>
       <URow>
         <UAvatar
           v-for="(rounded, index) in roundedValues"
@@ -109,7 +109,7 @@ const RoundedTemplate = (args, { argTypes } = {}) => ({
           :label="rounded"
         />
       </URow>
-    </UGroup>
+    </UCol>
   `,
 });
 

package/ui.loader-rendering/index.stories.js

@@ -1,6 +1,6 @@
 import ULoaderRendering from "../ui.loader-rendering";
 import UButton from "../ui.button";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 
 import { useLoaderRendering } from "./composables/useLoaderRendering";
 
@@ -36,7 +36,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const LoadingTemplate = (args) => ({
-  components: { ULoaderRendering, UButton, UGroup },
+  components: { ULoaderRendering, UButton, UCol },
   setup() {
     const { loaderRenderingOn, loaderRenderingOff, isLoading } = useLoaderRendering();
 
@@ -48,9 +48,9 @@ const LoadingTemplate = (args) => ({
     },
   },
   template: `
-    <UGroup align="center" class="pb-4">
+    <UCol align="center" class="pb-4">
       <UButton label="Toggle loading" size="sm" @click="toggleLoading"/>
-    </UGroup>
+    </UCol>
 
     <ULoaderRendering v-bind="args" class="!static w-full h-96" />
   `,

package/ui.loader-top/index.stories.js

@@ -1,7 +1,7 @@
 import ULoaderTop from "../ui.loader-top";
 import UButton from "../ui.button";
 import URow from "../ui.container-row";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 import UBadge from "../ui.text-badge";
 
 import { useLoaderTop } from "./composables/useLoaderTop";
@@ -39,7 +39,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { ULoaderTop, UButton, UGroup, URow, UBadge },
+  components: { ULoaderTop, UButton, UCol, URow, UBadge },
   setup() {
     return {
       args,
@@ -49,7 +49,7 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup>
+    <UCol>
       <URow gap="sm" class="pb-4">
         <UButton label="On" size="sm" @click="loaderTopOn('https://api.publicapis.org/images')" />
         <UButton label="Off" size="sm" @click="loaderTopOff('https://api.publicapis.org/images')" />
@@ -65,7 +65,7 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
         />
       </URow>
 
-    </UGroup>
+    </UCol>
   `,
 });
 

package/ui.navigation-progress/index.stories.js

@@ -1,7 +1,7 @@
 import { getArgTypes, allSlotsFragment, getSlotNames } from "../service.storybook";
 
 import UProgress from "./index.vue";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 import UButton from "../ui.button";
 import UIcon from "../ui.image-icon";
 
@@ -18,7 +18,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UGroup, UProgress, UButton, UIcon },
+  components: { UCol, UProgress, UButton, UIcon },
   setup() {
     const slots = getSlotNames(UProgress.name);
 
@@ -32,15 +32,15 @@ const DefaultTemplate = (args) => ({
     return { slots, args, updateProgress };
   },
   template: `
-    <UGroup align="start">
+    <UCol align="start">
       <UProgress v-bind="args">${args.slotTemplate || allSlotsFragment}</UProgress>
       <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
-    </UGroup>
+    </UCol>
   `,
 });
 
 const EnumVariantTemplate = (args, { argTypes } = {}) => ({
-  components: { UGroup, UButton, UProgress },
+  components: { UCol, UButton, UProgress },
   setup() {
     args.progress = 10;
 
@@ -51,8 +51,8 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     return { args, updateProgress, options: argTypes[args.enum].options };
   },
   template: `
-    <UGroup align="start">
-      <UGroup>
+    <UCol align="start">
+      <UCol>
         <UProgress
           v-for="(option, index) in options"
           :key="index"
@@ -60,10 +60,10 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
           v-bind="args"
           :value="args.progress"
         />
-      </UGroup>
+      </UCol>
 
       <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
-      </UGroup>
+      </UCol>
   `,
 });
 

package/ui.other-dot/index.stories.js

@@ -1,6 +1,6 @@
 import UDot from "../ui.other-dot";
 import URow from "../ui.container-row";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 import UBadge from "../ui.text-badge";
 
 import { getArgTypes } from "../service.storybook";
@@ -28,7 +28,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UGroup, URow, UDot, UBadge },
+  components: { UCol, URow, UDot, UBadge },
   setup() {
     return {
       args,
@@ -36,17 +36,17 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup>
+    <UCol>
       <URow v-for="(color, index) in colors" :key="index" gap="none" align="center">
         <UDot v-bind="args" :color="color"/>
         <UBadge :label="color" :color="color" variant="thirdary" />
       </URow>
-    </UGroup>
+    </UCol>
   `,
 });
 
 const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UGroup, URow, UDot, UBadge },
+  components: { UCol, URow, UDot, UBadge },
   setup() {
     return {
       args,
@@ -54,12 +54,12 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup>
+    <UCol>
       <URow v-for="(size, index) in sizes" :key="index" gap="none" align="center">
         <UDot v-bind="args" :size="size"/>
         <UBadge :label="size" variant="thirdary" />
       </URow>
-    </UGroup>
+    </UCol>
   `,
 });