vueless 0.0.13 → 0.0.15

package/ui.form-input-file/configs/default.config.js

@@ -49,7 +49,7 @@ export default /*tw*/ {
   },
   defaultVariants: {
     size: "md",
-    labelOutside: false,
+    labelAlign: "topInside",
     allowedFileTypes: [".png", ".jpg", ".jpeg", ".pdf", ".txt", ".doc", ".docx", "xls", ".xlsx"],
     maxFileSize: 1,
     maxFiles: 3,

package/ui.form-input-file/index.vue

@@ -100,11 +100,11 @@ const props = defineProps({
 
   /**
    * Set label placement related from the default slot.
-   * @values topInside, top, left, right
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
-  labelOutside: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UInputFile).default.labelOutside,
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputFile).default.labelAlign,
   },
 
   /**
@@ -226,10 +226,6 @@ const filesList = computed(() => {
   });
 });
 
-const labelAlign = computed(() => {
-  return props.labelOutside ? "top" : "topInside";
-});
-
 const fileId = computed(() => {
   return `file-${props.id}`;
 });

package/ui.form-input-rating/configs/default.config.js

@@ -20,6 +20,6 @@ export default /*tw*/ {
     starsNumber: 5,
     selectable: false,
     noCounter: false,
-    labelOutside: false,
+    labelAlign: "topInside",
   },
 };

package/ui.form-input-rating/index.vue

@@ -97,11 +97,11 @@ const props = defineProps({
 
   /**
    * Set label placement related from the default slot.
-   * @values topInside, top, left, right
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
-  labelOutside: {
+  labelAlign: {
     type: String,
-    default: UIService.get(defaultConfig, UInputRating).default.placement,
+    default: UIService.get(defaultConfig, UInputRating).default.labelAlign,
   },
 
   /**
@@ -152,10 +152,6 @@ const hovered = ref(null);
 const { counterAttrs, ratingAttrs, wrapperAttrs, iconsAttrs, iconsContainerAttrs, labelAttrs } =
   useAttrs(props);
 
-const labelAlign = computed(() => {
-  return props.labelOutside ? "top" : "topInside";
-});
-
 const iconSize = computed(() => {
   const sizes = {
     sm: "xs",

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

@@ -13,6 +13,7 @@ export default /*tw*/ {
         topWithDesc: "flex-col-reverse w-fit",
         left: "flex-row w-fit",
         right: "flex-row-reverse w-fit",
+        bottom: "flex-col-reverse  w-fit",
       },
     },
     compoundVariants: [
@@ -72,6 +73,7 @@ export default /*tw*/ {
         top: "pl-0",
         left: "pl-0",
         right: "pl-0",
+        bottom: "-order-1",
       },
       error: {
         true: "text-red-500",

package/ui.form-label/index.vue

@@ -91,7 +91,7 @@ const props = defineProps({
 
   /**
    * Set label placement related from the default slot.
-   * @values topInside, top, topWithDesc, left, right
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
   align: {
     type: String,
@@ -154,10 +154,10 @@ const wrapperRef = ref(null);
 const { wrapperAttrs, labelWrapperAttrs, labelAttrs, descriptionAttrs } = useAttrs(props);
 
 const isHorizontalPlacement = computed(
-  () => props.placement === PLACEMENT.left || props.placement === PLACEMENT.right,
+  () => props.align === PLACEMENT.left || props.align === PLACEMENT.right,
 );
 
-const isTopWithDescPlacement = computed(() => props.placement === PLACEMENT.topWithDesc);
+const isTopWithDescPlacement = computed(() => props.align === PLACEMENT.topWithDesc);
 
 const labelElement = computed(() => labelRef.value);
 const wrapperElement = computed(() => wrapperRef.value);

package/ui.form-radio/index.vue

@@ -21,6 +21,8 @@
       @focus="onFocus"
     />
 
+    <slot />
+
     <template #footer>
       <slot name="footer" />
     </template>
@@ -93,7 +95,7 @@ const props = defineProps({
 
   /**
    * Set label placement related from the default slot.
-   * @values left, right
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
   labelAlign: {
     type: String,
@@ -142,7 +144,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:value"]);
+const emit = defineEmits(["update:modelValue"]);
 
 const setRadioGroupSelectedItem = inject("setRadioGroupSelectedItem", null);
 const getRadioGroupName = inject("getRadioGroupName", null);
@@ -165,6 +167,6 @@ watchEffect(() => (radioSize.value = getRadioGroupSize ? getRadioGroupSize() : p
 function onFocus(event) {
   setRadioGroupSelectedItem && setRadioGroupSelectedItem(props.value);
 
-  emit("update:value", event.target.value);
+  emit("update:modelValue", event.target.value);
 }
 </script>

package/ui.form-radio-card/composables/attrs.composable.js

@@ -17,8 +17,9 @@ export function useAttrs(props) {
   const radioClasses = computed(() => setColor(cvaRadio({ color: props.color }), props.color));
 
   const wrapperAttrsRaw = getAttrs("wrapper");
+  const itemsAttrs = getAttrs("items");
+  const labelAttrs = getAttrs("label");
   const radioAttrs = getAttrs("radio", { isComponent: true, classes: radioClasses });
-  const labelAttrs = getAttrs("label", { isComponent: true });
   const iconAttrs = getAttrs("icon", { isComponent: true });
 
   const wrapperAttrs = computed(() => (classes) => ({
@@ -31,5 +32,6 @@ export function useAttrs(props) {
     iconAttrs,
     wrapperAttrs,
     labelAttrs,
+    itemsAttrs,
   };
 }

package/ui.form-radio-card/configs/default.config.js

@@ -3,12 +3,18 @@ export default /*tw*/ {
   title: "text-base font-normal text-gray-900 mb-1 mt-3",
   description: "text-xs font-normal text-gray-500/[85]",
   radio: {
-    base: "absolute right-4 top-2 !gap-0",
-    label: "mr-1",
+    base: "w-full right-4 top-2 !gap-0",
+    radio: "absolute right-6 top-4",
   },
+  label: "size-full cursor-pointer",
+  items: `
+    relative mr-1 w-full cursor-pointer rounded-lg border border-solid border-gray-300 px-6 py-4
+    focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15] hover:border-gray-400
+  `,
   icon: "mb-3 flex justify-center",
   defaultVariants: {
     color: "brand",
+    labelAlign: "top",
     gridCols: 2,
     withIcon: true,
   },

package/ui.form-radio-card/index.vue

@@ -1,20 +1,25 @@
 <template>
   <div v-bind="wrapperAttrs(gridColsClass)">
-    <template v-for="(item, index) in options" :key="id + index">
-      <URadio
-        :id="id + index"
-        v-model="selectedItem"
-        :value="item.value"
-        :name="name"
-        v-bind="radioAttrs"
-        :label="item.label"
-        :description="item.description"
-      />
-      <!-- @slot Use it to add icon. -->
-      <slot v-if="withIcon" name="icon" :item="item">
-        <UIcon :name="item.iconName" size="xl" :color="color" v-bind="iconAttrs" />
-      </slot>
-    </template>
+    <div v-for="(item, index) in options" :key="id + index" v-bind="itemsAttrs">
+      <label :for="id + index" v-bind="labelAttrs">
+        <URadio
+          :id="id + index"
+          v-model="selectedItem"
+          :value="item.value"
+          :name="name"
+          :label="item.label"
+          :checked="item.value === selectedItem"
+          :description="item.description"
+          :label-align="labelAlign"
+          v-bind="radioAttrs"
+        >
+          <!-- @slot Use it to add icon. -->
+          <slot v-if="withIcon" name="icon" :item="item">
+            <UIcon :name="item.iconName" size="xl" :color="color" v-bind="iconAttrs" />
+          </slot>
+        </URadio>
+      </label>
+    </div>
   </div>
 </template>
 
@@ -95,6 +100,11 @@ const props = defineProps({
     default: () => getRandomId(),
   },
 
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, URadioCard).default.labelAlign,
+  },
+
   /**
    * Sets component ui config object.
    */
@@ -112,33 +122,9 @@ const props = defineProps({
   },
 });
 
-// const labelConfig = {
-//   wrapper: {
-//     base: `
-//     rounded-lg border border-solid border-gray-300 cursor-pointer relative w-full
-//     hover:border-gray-400 focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
-//     px-6 py-4`,
-//   },
-//   label: {
-//     base: "h-full w-full cursor-pointer",
-//     variants: {
-//       placement: {
-//         topInside: "left-0 !top-0",
-//       },
-//     },
-//   },
-//   description: {
-//     variants: {
-//       placement: {
-//         topInside: "pl-0",
-//       },
-//     },
-//   },
-// };
-
 const emit = defineEmits(["update:modelValue"]);
 
-const { radioAttrs, iconAttrs, wrapperAttrs /* labelAttrs */ } = useAttrs(props);
+const { radioAttrs, iconAttrs, wrapperAttrs, labelAttrs, itemsAttrs } = useAttrs(props);
 
 const isMobileDevice = computed(() => {
   return store.getters["breakpoint/isMobileDevice"];

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

@@ -1,8 +1,8 @@
 export default /*tw*/ {
-  label: "relative w-full",
+  label: "w-full relative",
   wrapper: {
     base: `
-      pb-2 flex flex-row-reverse justify-between w-full min-h-full static box-border
+      pb-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
       rounded-lg border border-gray-300 bg-white
       hover:border-gray-400 hover:transition hover:duration-100 hover:ease-in-out hover:focus-within:border-gray-500
       focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15] focus-within:outline-none
@@ -133,6 +133,6 @@ export default /*tw*/ {
     searchable: true,
     noClear: false,
     addOption: false,
-    labelOutside: false,
+    labelAlign: "topInside",
   },
 };

package/ui.form-select/index.vue

@@ -4,8 +4,8 @@
     :for="id"
     :size="size"
     :label="label"
-    :error="errorMessage"
-    :description="descriptionMessage"
+    :error="error"
+    :description="description"
     :align="labelAlign"
     :disabled="disabled"
     :data-cy="dataCy"
@@ -244,11 +244,12 @@ const props = defineProps({
   },
 
   /**
-   * Show label outside the select block.
+   * Set label placement related from the default slot.
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
-  labelOutside: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, USelect).default.labelOutside,
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, USelect).default.labelAlign,
   },
 
   /**
@@ -506,10 +507,6 @@ const isSelectedValueLabelVisible = computed(() => {
   return !props.multiple && isLocalValue.value && (!isOpen.value || !props.searchable);
 });
 
-const labelAlign = computed(() => {
-  return props.labelOutside ? "top" : "topInside";
-});
-
 const filteredOptions = computed(() => {
   const normalizedSearch = search.value.toLowerCase().trim();
 
@@ -561,14 +558,6 @@ const isLocalValue = computed(() => {
     : Boolean(String(localValue.value));
 });
 
-const errorMessage = computed(() => {
-  return !isOpen.value && props.error ? props.error : "";
-});
-
-const descriptionMessage = computed(() => {
-  return !isOpen.value && props.description ? props.description : "";
-});
-
 watch(search, () => onSearchChange);
 watch(
   localValue,

package/ui.form-switch/index.vue

@@ -61,7 +61,7 @@ const props = defineProps({
 
   /**
    * Label alignment.
-   * @values left, right
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
   labelAlign: {
     type: String,

package/ui.form-textarea/index.vue

@@ -99,8 +99,8 @@ const props = defineProps({
   },
 
   /**
-   * Input label place (above the input box or inside of it).
-   * @values topInside, top
+   * Set label placement related from the default slot.
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
   labelAlign: {
     type: String,

package/ui.navigation-stepper/index.vue

@@ -46,7 +46,7 @@ import colors from "tailwindcss/colors";
 
 import UHeader from "../ui.text-header";
 import UIService from "../service.ui";
-import { grayColors } from "../service.tailwind";
+import { grayColors } from "../preset.tailwind";
 
 import { UStepper } from "./constants/index";
 import defaultConfig from "./configs/default.config";

package/ui.notify/index.vue

@@ -1,7 +1,7 @@
 <template>
   <notifications
     group="notify"
-    class="vueless-notify !top-3 mt-safe-top !w-full px-3 max-md:!left-0 md:!w-[22rem] md:px-0 lg:!top-4 lg:!mt-0"
+    class="vueless-notify mt-safe-top !top-3 !w-full px-3 max-md:!left-0 md:!w-[22rem] md:px-0 lg:!top-4 lg:!mt-0"
     :position="position"
   >
     <template #body="{ item, close: onClickClose }">
@@ -145,8 +145,8 @@ export default {
 
       const NOTIFY_CLASS = "vueless-notify";
       const classes = globalComponentConfig.UNotify?.positionClasses;
-      const pageWidth = getOffsetWidth(classes.page);
-      const asideWidth = getOffsetWidth(classes.aside);
+      const pageWidth = getOffsetWidth(classes.page || "UNotifyPage");
+      const asideWidth = getOffsetWidth(classes.aside || "UNotifyAside");
       const notifyWidth = getOffsetWidth(NOTIFY_CLASS);
 
       if (!pageWidth) return;

package/ui.other-loader-top/composables/attrs.composable.js

@@ -0,0 +1,32 @@
+import useUI from "vueless/composable.ui";
+import { cva } from "vueless/service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { progress } = config.value;
+
+  const cvaProgress = cva({
+    base: progress.base,
+    variants: progress.variants,
+    compoundVariants: progress.compoundVariants,
+  });
+
+  const progressClasses = computed(() =>
+    setColor(
+      cvaProgress({
+        position: props.position,
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const progressAttrs = getAttrs("progress", { classes: progressClasses.value });
+
+  return {
+    progressAttrs,
+  };
+}

package/ui.other-loader-top/configs/default.config.js

@@ -0,0 +1,20 @@
+export default /*tw*/ {
+  progress: {
+    base: "top-0 left-0 right-0 fixed h-[3px] transition-all ease-linear bg-{color}-500",
+    variants: {
+      position: {
+        fixed: "fixed",
+        absolute: "absolute",
+      },
+      error: {
+        true: "bg-red-500",
+      },
+    },
+  },
+  progressMobile: "mt-safe-top mx-3 rounded max-w-[calc(100%-1.5rem)]",
+  defaultVariants: {
+    color: "blue",
+    position: "fixed",
+  },
+  safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
+};

package/ui.other-loader-top/constants/index.js

@@ -0,0 +1,8 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const ULoaderTop = "ULoaderTop";
+
+export const MAXIMUM = 97.5;
+export const SPEED = 150;