vueless 0.0.238 → 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-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-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.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>
   `,
 });
 

package/ui.text-alert/index.stories.js

@@ -2,7 +2,7 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storyboo
 
 import UAlert from "../ui.text-alert";
 import URow from "../ui.container-row";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 import UIcon from "../ui.image-icon";
 
 /**
@@ -36,7 +36,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const EnumVariantTemplate = (args, { argTypes } = {}) => ({
-  components: { UAlert, UGroup },
+  components: { UAlert, UCol },
   setup() {
     const options = argTypes[args.enum].options;
     let prefixedOptions = options;
@@ -52,7 +52,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     return { args, options: argTypes[args.enum].options, prefixedOptions };
   },
   template: `
-    <UGroup align="stretch">
+    <UCol align="stretch">
       <UAlert
         v-for="(option, index) in options"
         :key="index"
@@ -60,7 +60,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
         :[args.enum]="option"
         :title="prefixedOptions[index]"
       />
-    </UGroup>
+    </UCol>
   `,
 });
 

package/ui.text-badge/index.stories.js

@@ -3,7 +3,7 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storyboo
 import UBadge from "../ui.text-badge";
 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 `UBadge` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-badge)
@@ -35,7 +35,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UBadge, URow, UGroup },
+  components: { UBadge, URow, UCol },
   setup() {
     return {
       args,
@@ -44,7 +44,7 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup>
+    <UCol>
       <URow v-for="(variant, index) in variants" :key="index">
         <UBadge
           v-for="(color, index) in colors"
@@ -55,7 +55,7 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
           :key="index"
         />
       </URow>
-    </UGroup>
+    </UCol>
   `,
 });
 

package/ui.text-header/index.stories.js

@@ -1,7 +1,7 @@
 import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UHeader from "../ui.text-header";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 
 /**
  * The `UHeader` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-header)
@@ -33,7 +33,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const EnumVariantTemplate = (args, { argTypes } = {}) => ({
-  components: { UHeader, UGroup },
+  components: { UHeader, UCol },
   setup() {
     return {
       args,
@@ -41,7 +41,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup>
+    <UCol>
       <UHeader
         v-for="(option, index) in options"
         :key="index"
@@ -49,7 +49,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
         :[args.enum]="option"
         :label="'Header ' + option"
       />
-    </UGroup>
+    </UCol>
   `,
 });
 

package/ui.text-notify/index.stories.js

@@ -2,7 +2,7 @@ import { notify } from "./services";
 
 import UNotify from "../ui.text-notify";
 import UButton from "../ui.button";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 
 import { getArgTypes, getSlotsFragment } from "../service.storybook";
 
@@ -47,7 +47,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const TypesTemplate = (args) => ({
-  components: { UNotify, UButton, UGroup },
+  components: { UNotify, UButton, UCol },
   setup() {
     function onClick(type) {
       if (type === "success") {
@@ -80,11 +80,11 @@ const TypesTemplate = (args) => ({
   template: `
     <UNotify class="m-4" />
 
-    <UGroup>
+    <UCol>
       <UButton label="Success" color="green" @click="onClick('success')"/>
       <UButton label="Warning" color="orange" @click="onClick('warning')"/>
       <UButton label="Error" color="red" @click="onClick('error')"/>
-    </UGroup>
+    </UCol>
   `,
 });