vueless 0.0.238 → 0.0.240

package/ui.form-color-picker/index.stories.js

@@ -1,6 +1,6 @@
 import { getArgTypes } from "../service.storybook";
 import UColorPicker from "../ui.form-color-picker";
-import UGroup from "../ui.container-group";
+import UCol from "../ui.container-col";
 
 /**
  * The `UColorPicker` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-color-picker)
@@ -29,7 +29,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UGroup, UColorPicker },
+  components: { UCol, UColorPicker },
   setup() {
     return {
       args,
@@ -37,7 +37,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup>
+    <UCol>
       <UColorPicker
         v-for="(size, index) in sizes"
         v-bind="args"
@@ -46,7 +46,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
         :name="size"
         v-model="args.value"
       />
-    </UGroup>
+    </UCol>
   `,
 });
 

package/ui.form-date-picker/composables/attrs.composable.js

@@ -3,7 +3,7 @@ import { cva } from "../../service.ui";
 import { computed, watchEffect } from "vue";
 
 import defaultConfig from "../configs/default.config";
-import { POSITION } from "../../composable.adjustElementPosition";
+import { POSITION } from "../../composable.autoPosition";
 
 export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
   const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);

package/ui.form-date-picker/configs/default.config.js

@@ -111,6 +111,7 @@ export default /*tw*/ {
     size: "md",
     openDirectionX: "auto",
     openDirectionY: "auto",
+    labelAlign: "topInside",
     timepicker: false,
     disabled: false,
     dateFormat: undefined,

package/ui.form-date-picker/index.vue

@@ -4,6 +4,7 @@
       :id="id"
       :key="isShownCalendar"
       v-model="userFormatDate"
+      :label-align="labelAlign"
       :label="label"
       :placeholder="placeholder"
       :error="error"
@@ -68,7 +69,7 @@ import { addDays, isSameDay } from "../ui.form-calendar/services/date.service";
 
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
-import { useAdjustElementPosition } from "../composable.adjustElementPosition";
+import { useAutoPosition } from "../composable.autoPosition";
 
 import defaultConfig from "./configs/default.config";
 import { UDatePicker } from "./constants";
@@ -85,6 +86,15 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Set label placement related from the default slot.
+   * @values top, topInside, topWithDesc, left, right
+   */
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UDatePicker).default.labelAlign,
+  },
+
   /**
    * Datepicker placeholder.
    */
@@ -248,10 +258,10 @@ const calendarRef = ref(null);
 
 const calendarWrapperRef = computed(() => calendarRef?.value?.wrapperRef);
 
-const { isTop, isRight, adjustPositionY, adjustPositionX } = useAdjustElementPosition(
+const { isTop, isRight, adjustPositionY, adjustPositionX } = useAutoPosition(
   wrapperRef,
   calendarWrapperRef,
-  { x: props.openDirectionX, y: props.openDirectionY },
+  computed(() => ({ x: props.openDirectionX, y: props.openDirectionY })),
   { x: "left", y: "bottom" },
 );
 

package/ui.form-date-picker-range/composables/attrs.composable.js

@@ -4,7 +4,7 @@ import { cx, cva } from "../../service.ui";
 import { computed, watchEffect } from "vue";
 
 import defaultConfig from "../configs/default.config";
-import { POSITION } from "../../composable.adjustElementPosition";
+import { POSITION } from "../../composable.autoPosition";
 
 export default function useAttrs(props, { isShownMenu, isTop, isRight }) {
   const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);

package/ui.form-date-picker-range/index.stories.js

@@ -151,7 +151,7 @@ export const MinMax = DefaultTemplate.bind({});
 MinMax.args = {
   minDate: new Date(2022, 2, 22),
   maxDate: new Date(2022, 2, 26),
-  value: { from: new Date(2022, 2, 24), to: null },
+  value: { from: new Date(2022, 2, 24), to: new Date(2022, 2, 25) },
 };
 
 export const DateFormat = DefaultTemplate.bind({});

package/ui.form-date-picker-range/index.vue

@@ -259,7 +259,7 @@ import {
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
 import useBreakpoint from "../composable.breakpoint";
-import { useAdjustElementPosition } from "../composable.adjustElementPosition";
+import { useAutoPosition } from "../composable.autoPosition";
 
 import defaultConfig from "./configs/default.config";
 import {
@@ -443,17 +443,11 @@ const buttonPrevRef = ref(null);
 const buttonNextRef = ref(null);
 const inputRef = ref(null);
 
-const { isTop, isRight, adjustPositionY, adjustPositionX } = useAdjustElementPosition(
+const { isTop, isRight, adjustPositionY, adjustPositionX } = useAutoPosition(
   wrapperRef,
   menuRef,
-  {
-    x: props.openDirectionX,
-    y: props.openDirectionY,
-  },
-  {
-    x: "left",
-    y: "bottom",
-  },
+  computed(() => ({ x: props.openDirectionX, y: props.openDirectionY })),
+  { x: "left", y: "bottom" },
 );
 
 const {

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,26 +90,24 @@ 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"
-        :label-outside="true"
+        label-align="top"
       />
 
       <UInput
         v-bind="args"
-        label="topInside"
-        :label-outside="false"
+        label-align="topInside"
       />
-    </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>
   `,
 });