vueless 0.0.14 → 0.0.16

package/package.json

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

package/ui.button/index.vue

@@ -1,5 +1,12 @@
 <template>
-  <button :id="id" :disabled="disabled" :data-cy="dataCy" v-bind="buttonAttrs" @click="onClick">
+  <button
+    :id="id"
+    ref="buttonRef"
+    :disabled="disabled"
+    :data-cy="dataCy"
+    v-bind="buttonAttrs"
+    @click="onClick"
+  >
     <!-- @slot Use it to add something before text. -->
     <slot v-if="!loading" name="left" />
 
@@ -16,11 +23,13 @@
 </template>
 
 <script setup>
-import ULoader from "../ui.other-loader";
+import { ref } from "vue";
+
 import UIService, { getRandomId } from "../service.ui";
+import ULoader from "../ui.other-loader";
 
-import { useAttrs } from "./composables/attrs.composable";
 import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 import { UButton } from "./constants";
 
 /* Should be a string for correct web-types gen */
@@ -140,6 +149,10 @@ const emit = defineEmits(["click"]);
 
 const { textAttrs, buttonAttrs } = useAttrs(props);
 
+const buttonRef = ref(null);
+
+defineExpose({ buttonRef });
+
 function onClick(event) {
   if (props.disabled) return;
 

package/ui.button-link/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div tabindex="-1" v-bind="wrapperAttrs">
+  <div v-bind="wrapperAttrs" ref="wrapperRef" tabindex="-1">
     <div v-if="hasSlotContent(slots['left'])" v-bind="leftSlotAttrs">
       <!-- @slot Use it to add something before text. -->
       <slot name="left" />
@@ -49,8 +49,7 @@
 </template>
 
 <script setup>
-import { computed, useSlots } from "vue";
-
+import { computed, useSlots, ref } from "vue";
 import UIService from "../service.ui";
 
 import { useAttrs } from "./composables/attrs.composable";
@@ -181,6 +180,10 @@ const props = defineProps({
 
 const slots = useSlots();
 
+const wrapperRef = ref(null);
+
+defineExpose({ wrapperRef });
+
 const { wrapperAttrs, linkAttrs, rightSlotAttrs, leftSlotAttrs, textAttrs, hasSlotContent } =
   useAttrs(props);
 

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

@@ -2,7 +2,7 @@ export default /*tw*/ {
   htmlBody: "bg-gray-50 group/body-gray",
   wrapperMobile: "overflow-x-hidden mb-[theme('spacing.mobile-menu-height')]",
   wrapper: {
-    base: "min-h-screen overflow-auto",
+    base: "min-h-screen overflow-auto UNotifyPage",
     variants: {
       width: {
         xs: "md:w-[25rem] md:max-[500px]:!w-full",

package/ui.data-table/index.vue

@@ -277,7 +277,7 @@ import UIcon from "../ui.image-icon";
 import UEmpty from "../ui.text-empty";
 import UDivider from "../ui.container-divider";
 import UCheckbox from "../ui.form-checkbox";
-import ULoaderTop from "../ui.loader-top";
+import ULoaderTop from "../ui.other-loader-top";
 import UTableCell from "../ui.data-table-cell";
 
 import UIService from "../service.ui";

package/ui.data-table-cell/configs/default.config.js

@@ -1,13 +1,13 @@
 export default /*tw*/ {
   tableCell: {
     base: `
-      p-[1.125rem] py-5 first:p-5 [&:nth-child(2)]:pl-0 group-[]/body:truncate group-[]/body:align-top 
+      p-[1.125rem] py-5 first:p-5 [&:nth-child(2)]:pl-0 group-[]/body:truncate group-[]/body:align-top
       group-[]/body:last:p-5
     `,
     variants: {
       compact: {
         true: `
-          group-[]/body:px-4 group-[]/body:py-3 group-[]/body:last:px-4 group-[]/body:last:py-3 
+          group-[]/body:px-4 group-[]/body:py-3 group-[]/body:last:px-4 group-[]/body:last:py-3
           group-[]/body:first:px-4 group-[]/body:first:py-3 group-[]/footer:p-4:
         `,
       },

package/ui.dropdown-badge/index.vue

@@ -2,6 +2,7 @@
   <div v-bind="wrapperAttrs">
     <UBadge
       :id="id"
+      ref="badgeRef"
       :label="label"
       :size="size"
       :color="color"
@@ -10,6 +11,7 @@
       :data-cy="`${dataCy}-badge`"
       v-bind="badgeAttrs"
       @click.stop="onClickBadge"
+      @blur="onBlurBadge"
     >
       <template #right>
         <UIcon
@@ -192,6 +194,8 @@ const emit = defineEmits(["update:modelValue"]);
 
 const isShownOptions = ref(false);
 
+const badgeRef = ref(null);
+
 const { config, listWrapperAttrs, wrapperAttrs, badgeAttrs, listAttrs, iconAttrs, hasSlotContent } =
   useAttrs(props, { isShownOptions });
 
@@ -227,7 +231,13 @@ function hideOptions() {
 }
 
 function onClickOutside(event) {
-  if (!document.getElementById(props.id)?.contains(event.target)) {
+  if (!badgeRef.value?.wrapperRef?.contains(event.target)) {
+    hideOptions();
+  }
+}
+
+function onBlurBadge(event) {
+  if (!event.target.isEqualNode(event.relatedTarget) && event.relatedTarget) {
     hideOptions();
   }
 }

package/ui.dropdown-button/index.vue

@@ -2,6 +2,7 @@
   <div v-bind="wrapperAttrs">
     <UButton
       :id="id"
+      ref="buttonRef"
       :label="label"
       :size="size"
       :variant="variant"
@@ -13,6 +14,7 @@
       :data-cy="`${dataCy}-button`"
       v-bind="buttonAttrs"
       @click.stop="onClickButton"
+      @blur="onBlurButton"
     >
       <template #right>
         <UIcon
@@ -39,7 +41,10 @@
       :value-key="valueKey"
       :label-key="labelKey"
       :data-cy="`${dataCy}-item`"
+      tabindex="-1"
       v-bind="listAttrs"
+      @mousedown.stop
+      @click.stop
     />
   </div>
 </template>
@@ -54,8 +59,8 @@ import UDropdownList from "../ui.dropdown-list";
 import UIService, { getRandomId } from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
-import { UDropdownButton, BUTTON_VARIANT } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
+import { UDropdownButton, BUTTON_VARIANT } from "./constants";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UDropdownButton", inheritAttrs: false });
@@ -217,6 +222,7 @@ provide("hideDropdownOptions", () => hideOptions);
 const emit = defineEmits(["update:modelValue"]);
 
 const isShownOptions = ref(false);
+const buttonRef = ref(null);
 
 const {
   config,
@@ -264,7 +270,13 @@ function hideOptions() {
 }
 
 function onClickOutside(event) {
-  if (!document.getElementById(props.id)?.contains(event.target)) {
+  if (!buttonRef.value?.buttonRef?.contains(event.target)) {
+    hideOptions();
+  }
+}
+
+function onBlurButton(event) {
+  if (!event.target.isEqualNode(event.relatedTarget) && event.relatedTarget) {
     hideOptions();
   }
 }

package/ui.dropdown-link/index.vue

@@ -3,6 +3,7 @@
     <div v-bind="triggerAttrs">
       <ULink
         :id="id"
+        ref="linkRef"
         :label="label"
         :size="size"
         :color="color"
@@ -13,6 +14,7 @@
         :data-cy="`${dataCy}-link`"
         v-bind="linkAttrs"
         @click.stop="onClickLink"
+        @blur="onBlurLink"
       >
         <template #right>
           <UIcon
@@ -210,6 +212,8 @@ const emit = defineEmits(["update:modelValue"]);
 
 const isShownOptions = ref(false);
 
+const linkRef = ref(null);
+
 const {
   config,
   listWrapperAttrs,
@@ -254,7 +258,13 @@ function hideOptions() {
 }
 
 function onClickOutside(event) {
-  if (!document.getElementById(props.id)?.contains(event.target)) {
+  if (!linkRef.value?.wrapperRef?.contains(event.target)) {
+    hideOptions();
+  }
+}
+
+function onBlurLink(event) {
+  if (!event.target.isEqualNode(event.relatedTarget) && event.relatedTarget) {
     hideOptions();
   }
 }

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

@@ -40,7 +40,7 @@ export default /*tw*/ {
   activeMonth: "bg-gray-100",
   yearViewWrapper: "grid w-64 grid-cols-4 items-center justify-center px-3 pt-2",
   year: `
-    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-gray-100 
+    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-gray-100
     disabled:opacity-50 disabled:cursor-not-allowed
   `,
   selectedYear: "bg-gray-900 hover:bg-gray-900 text-white",

package/ui.form-checkbox/index.vue

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

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

@@ -6,7 +6,7 @@
       :disabled="disabled"
       :error="error"
       :size="size"
-      placement="topWithDesc"
+      align="topWithDesc"
       :data-cy="dataCy"
       v-bind="labelAttrs"
     >

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

@@ -7,14 +7,14 @@ export default /*tw*/ {
   },
   buttonWrapper: "flex h-full rounded-lg focus-within:ring-4 focus-within:ring-gray-600/[.15] max-md:justify-between",
   button: `
-    shrink-0 grow rounded-none border-0 bg-zinc-100 py-2 text-base font-medium text-gray-900 shadow-none 
-  hover:bg-zinc-200 hover:ring-gray-600/[.15] focus:border-0 focus:bg-zinc-200 focus:ring-0 focus:ring-gray-600/[.15] 
+    shrink-0 grow rounded-none border-0 bg-zinc-100 py-2 text-base font-medium text-gray-900 shadow-none
+  hover:bg-zinc-200 hover:ring-gray-600/[.15] focus:border-0 focus:bg-zinc-200 focus:ring-0 focus:ring-gray-600/[.15]
   active:bg-zinc-200 disabled:cursor-not-allowed
   `,
   buttonActive: "border-0 hover:bg-zinc-200 ring-0 ring-gray-600/[.15] bg-zinc-200",
   buttonWrapperActive: "ring-4 ring-gray-600/[.15]",
   shiftRangeButton: `
-    focus:bg-bg-zinc-200 flex items-center border-0 bg-zinc-100 py-[0.71875rem] shadow-none 
+    focus:bg-bg-zinc-200 flex items-center border-0 bg-zinc-100 py-[0.71875rem] shadow-none
     hover:bg-zinc-200 hover:ring-gray-600/[.15] focus:border-0 focus:ring-0 focus:ring-gray-600/[.15] active:bg-zinc-200
     disabled:cursor-not-allowed last:rounded-l-none last:rounded-r-lg first:rounded-l-lg first:rounded-r-none
   `,
@@ -29,7 +29,7 @@ export default /*tw*/ {
   },
   periodsRow: "mb-1 flex min-w-64 gap-1",
   periodButton: `
-    flex h-[3.125rem] w-full cursor-pointer flex-col items-center justify-center rounded-lg bg-zinc-100 
+    flex h-[3.125rem] w-full cursor-pointer flex-col items-center justify-center rounded-lg bg-zinc-100
     px-1.5 py-2.5 text-center text-xs font-medium text-gray-900 hover:bg-gray-200
     [&_span]:block [&_span]:font-normal [&_span]:text-gray-500
   `,

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

@@ -66,7 +66,7 @@ export default /*tw*/ {
     error: false,
     readonly: false,
     disabled: false,
-    labelOutside: false,
+    labelAlign: "topInside",
     noAutocomplete: false,
   },
 };

package/ui.form-input/index.vue

@@ -123,11 +123,12 @@ const props = defineProps({
   },
 
   /**
-   * Show label outside the input block.
+   * Set label placement related from the default slot.
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
-  labelOutside: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UInput).default.labelOutside,
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UInput).default.labelAlign,
   },
 
   /**
@@ -285,10 +286,6 @@ const {
   hasSlotContent,
 } = useAttrs(props, { isTypePassword, inputPasswordClasses });
 
-const labelAlign = computed(() => {
-  return props.labelOutside ? "top" : "topInside";
-});
-
 const passwordIconName = computed(() => {
   return isShownPassword.value
     ? config.value.passwordVisibleIconName

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",
   },
 };