vueless 0.0.178 → 0.0.180

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

@@ -1,53 +1,53 @@
 <template>
-  <div v-bind="wrapperAttrs">
-    <ULabel
-      :label="label"
-      :description="description"
-      :disabled="disabled"
-      :error="error"
-      :size="size"
-      align="topWithDesc"
-      :data-cy="dataCy"
-      v-bind="labelAttrs"
-    >
-      <div v-bind="listAttrs">
-        <div v-bind="uncoloredAttrs">
-          <URadio
-            key="uncolored"
-            name="uncolored"
-            :checked="selectedItem === ''"
-            :disabled="disabled"
-            :size="size"
-            color="grayscale"
-            v-bind="uncoloredRadioAttrs"
-            @update:value="onInputRadio('')"
-          />
+  <ULabel
+    :label="label"
+    :description="description"
+    :disabled="disabled"
+    :error="error"
+    :size="size"
+    align="topWithDesc"
+    :data-cy="dataCy"
+    v-bind="labelAttrs"
+  >
+    <div v-bind="listAttrs">
+      <div v-bind="unselectedAttrs">
+        <URadio
+          :id="id"
+          :name="name"
+          :size="size"
+          color="grayscale"
+          :checked="selectedItem === ''"
+          :disabled="disabled"
+          v-bind="unselectedRadioAttrs"
+          @update:model-value="onUpdateValue('')"
+        />
 
+        <label :for="id">
           <UIcon
             v-if="selectedItem === ''"
             internal
+            :size="iconSize"
             color="gray"
-            :name="config.iconName"
-            v-bind="iconAttrs"
-            size="sm"
+            :name="config.unselectedIconName"
+            v-bind="unselectedIconAttrs"
           />
-        </div>
-
-        <URadio
-          v-for="(color, index) in colorOptions"
-          :key="index"
-          :name="name"
-          :value="color"
-          :checked="selectedItem === color"
-          :color="color"
-          :disabled="disabled"
-          :size="size"
-          v-bind="radioAttrs"
-          @update:value="onInputRadio(color)"
-        />
+        </label>
       </div>
-    </ULabel>
-  </div>
+
+      <URadio
+        v-for="(color, index) in colorOptions"
+        :key="index"
+        :name="name"
+        :size="size"
+        :value="color"
+        :color="color"
+        :checked="selectedItem === color"
+        :disabled="disabled"
+        v-bind="radioAttrs"
+        @update:model-value="onUpdateValue(color)"
+      />
+    </div>
+  </ULabel>
 </template>
 
 <script setup>
@@ -56,7 +56,7 @@ import { computed } from "vue";
 import UIcon from "../ui.image-icon";
 import URadio from "../ui.form-radio";
 import ULabel from "../ui.form-label";
-import UIService from "../service.ui";
+import UIService, { getRandomId } from "../service.ui";
 
 import { UColorPicker } from "./constants";
 import defaultConfig from "./configs/default.config";
@@ -75,11 +75,11 @@ const props = defineProps({
   },
 
   /**
-   * Color picker colors.
+   * Color picker name.
    */
-  colorOptions: {
-    type: Array,
-    default: () => UIService.get(defaultConfig, UColorPicker).default.colorOptions,
+  name: {
+    type: String,
+    default: UIService.get(defaultConfig, UColorPicker).default.name,
   },
 
   /**
@@ -108,7 +108,7 @@ const props = defineProps({
 
   /**
    * Color picker size.
-   * @values sm, md, lg
+   * @values xs, sm, md, lg, xl
    */
   size: {
     type: String,
@@ -116,12 +116,11 @@ const props = defineProps({
   },
 
   /**
-   * Color picker name.
+   * Color picker color list.
    */
-  name: {
-    type: String,
-    required: true,
-    default: "",
+  colorOptions: {
+    type: Array,
+    default: () => UIService.get(defaultConfig, UColorPicker).default.colorOptions,
   },
 
   /**
@@ -132,6 +131,15 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UColorPicker).default.disabled,
   },
 
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
   /**
    * Component ui config object.
    */
@@ -153,13 +161,12 @@ const emit = defineEmits(["update:modelValue"]);
 
 const {
   config,
-  wrapperAttrs,
-  listAttrs,
   labelAttrs,
+  listAttrs,
   radioAttrs,
-  iconAttrs,
-  uncoloredAttrs,
-  uncoloredRadioAttrs,
+  unselectedIconAttrs,
+  unselectedAttrs,
+  unselectedRadioAttrs,
 } = useAttrs(props);
 
 const selectedItem = computed({
@@ -167,7 +174,19 @@ const selectedItem = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-function onInputRadio(value) {
+const iconSize = computed(() => {
+  const sizes = {
+    xs: "3xs",
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
+    xl: "md",
+  };
+
+  return sizes[props.size];
+});
+
+function onUpdateValue(value) {
   selectedItem.value = value;
 }
 </script>

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

@@ -221,6 +221,8 @@ const STANDARD_USER_FORMAT = "l, j F, Y";
 
 const { tm } = useLocale();
 
+const i18nGlobal = tm(UDatePicker);
+
 const isShownCalendar = ref(false);
 const userFormatDate = ref("");
 const formattedDate = ref("");
@@ -255,6 +257,8 @@ const localValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+
 const { config, inputAttrs, calendarAttrs, wrapperAttrs } = useAttrs(props, {
   isShownCalendar,
   isTop,
@@ -299,9 +303,6 @@ function onBlur(event) {
 function formatUserDate(data) {
   if (props.userFormat !== STANDARD_USER_FORMAT) return data;
 
-  const i18nGlobal = tm(UDatePicker);
-  const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
-
   let prefix = "";
   const formattedDate = data.charAt(0).toUpperCase() + data.toLowerCase().slice(1);
   const formattedDateWithoutDay = formattedDate.split(",").slice(1).join("").trim();

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

@@ -3,6 +3,7 @@
     <UInput
       v-if="isVariant.input"
       :id="id"
+      ref="inputRef"
       v-model="userFormatDate"
       :label="label"
       :placeholder="placeholder"
@@ -421,6 +422,7 @@ const rangeInputEndRef = ref(null);
 const buttonRef = ref(null);
 const buttonPrevRef = ref(null);
 const buttonNextRef = ref(null);
+const inputRef = ref(null);
 
 const { isTop, isRight, adjustPositionY, adjustPositionX } = useAdjustElementPosition(
   wrapperRef,
@@ -463,10 +465,6 @@ const i18nGlobal = tm(UDatePickerRange);
 
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
-const clickOutsideOptions = computed(() => ({
-  ignore: [buttonRef.value.buttonRef, buttonPrevRef.value.buttonRef, buttonNextRef.value.buttonRef],
-}));
-
 const locale = computed(() => {
   const { months, weekdays } = currentLocale.value;
 
@@ -610,6 +608,20 @@ const isVariant = computed(() => ({
   input: props.variant === DATE_PICKER_INPUT_TYPE,
 }));
 
+const clickOutsideOptions = computed(() => {
+  if (isVariant.value.input) {
+    return { ignore: [inputRef.value.input] };
+  }
+
+  return {
+    ignore: [
+      buttonRef.value.buttonRef,
+      buttonPrevRef.value.buttonRef,
+      buttonNextRef.value.buttonRef,
+    ],
+  };
+});
+
 const userFormatDate = computed(() => {
   if ((!localValue.value.from && !localValue.value.to) || !localValue.value.from) return "";
 

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

@@ -47,7 +47,7 @@ const SlotTemplate = (args) => ({
   template: `
     <UInput v-bind="args"
     >
-      ${args.slotTemplate}
+      ${args.slotTemplate || ""}
     </UInput>
   `,
 });
@@ -150,8 +150,18 @@ sizes.args = {};
 export const validationRules = ValidationRuleTemplate.bind({});
 validationRules.args = {};
 
-export const slotLeft = SlotTemplate.bind({});
-slotLeft.args = {
+export const iconLeft = DefaultTemplate.bind({});
+iconLeft.args = {
+  iconLeft: "star",
+};
+
+export const iconRight = DefaultTemplate.bind({});
+iconRight.args = {
+  iconRight: "star",
+};
+
+export const iconLeftSlot = SlotTemplate.bind({});
+iconLeftSlot.args = {
   slotTemplate: `
     <template #left>
       🥸
@@ -159,8 +169,8 @@ slotLeft.args = {
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
-slotRight.args = {
+export const iconRightSlot = SlotTemplate.bind({});
+iconRightSlot.args = {
   slotTemplate: `
     <template #right>
       🥸

package/ui.form-input/index.vue

@@ -11,9 +11,15 @@
     v-bind="labelAttrs"
   >
     <label :for="id" v-bind="blockAttrs">
-      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper" v-bind="leftSlotAttrs">
-        <!-- @slot Use it to add some component before text. -->
-        <slot name="left" />
+      <span
+        v-if="hasSlotContent($slots['left']) || iconLeft"
+        ref="leftSlotWrapper"
+        v-bind="leftSlotAttrs"
+      >
+        <!-- @slot Use it to add icon before text. -->
+        <slot name="left">
+          <UIcon v-if="iconLeft" :name="iconLeft" />
+        </slot>
       </span>
 
       <span v-bind="inputWrapperAttrs">
@@ -38,30 +44,24 @@
         />
       </span>
 
-      <label
-        v-if="hasSlotContent($slots['right-icon']) || isTypePassword"
-        v-bind="rightSlotAttrs"
-        :for="id"
-      >
-        <!-- @slot Use it to add icon after text. -->
-        <slot name="right-icon">
-          <UIcon
-            v-if="isTypePassword"
-            :name="isShownPassword ? config.passwordVisibleIconName : config.passwordHiddenIconName"
-            color="gray"
-            interactive
-            internal
-            :data-cy="`${dataCy}-show-password`"
-            v-bind="passwordIconAttrs"
-            @click="onClickShowPassword"
-          />
-        </slot>
+      <label v-if="isTypePassword" v-bind="rightSlotAttrs" :for="id">
+        <UIcon
+          v-if="isTypePassword"
+          :name="isShownPassword ? config.passwordVisibleIconName : config.passwordHiddenIconName"
+          color="gray"
+          interactive
+          internal
+          :data-cy="`${dataCy}-show-password`"
+          v-bind="passwordIconAttrs"
+          @click="onClickShowPassword"
+        />
       </label>
 
-      <span v-if="hasSlotContent($slots['right'])" v-bind="rightSlotAttrs">
-        <!-- @slot Use it to add some component after text. -->
-
-        <slot name="right" />
+      <span v-if="hasSlotContent($slots['right']) || iconRight" v-bind="rightSlotAttrs">
+        <!-- @slot Use it to add icon after text. -->
+        <slot name="right">
+          <UIcon v-if="iconRight" :name="iconRight" />
+        </slot>
       </span>
     </label>
   </ULabel>
@@ -247,6 +247,22 @@ const props = defineProps({
     type: String,
     default: "",
   },
+
+  /**
+   * Left side icon name.
+   */
+  iconLeft: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right side icon name.
+   */
+  iconRight: {
+    type: String,
+    default: "",
+  },
 });
 
 const slots = useSlots();
@@ -360,11 +376,23 @@ function transformValue(value, exp) {
 }
 
 function setLabelPosition() {
-  if (props.labelAlign === "top" || !hasSlotContent(slots["left"])) return;
+  if (props.labelAlign === "top" || (!hasSlotContent(slots["left"]) && !props.iconLeft)) return;
+
+  let leftSlotOrIconWidth = 0;
+
+  if (leftSlotWrapper.value) {
+    leftSlotOrIconWidth = leftSlotWrapper.value.getBoundingClientRect().width;
+  }
+
+  if (props.iconLeft) {
+    const iconLeftElement = document.querySelector(`#${props.id} ~ .ui-icon`);
 
-  const leftSlotWidth = leftSlotWrapper.value.getBoundingClientRect().width;
+    if (iconLeftElement) {
+      leftSlotOrIconWidth = iconLeftElement.getBoundingClientRect().width;
+    }
+  }
 
-  labelComponent.value.labelElement.style.left = `${leftSlotWidth}px`;
+  labelComponent.value.labelElement.style.left = `${leftSlotOrIconWidth}px`;
 }
 </script>
 

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

@@ -12,7 +12,7 @@ export default {
   component: URadio,
   args: {
     name: "radio1",
-    label: "radio",
+    label: "Radio",
     value: "1",
     color: "brand",
   },
@@ -29,7 +29,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <URadio v-bind="args" description="description">
+    <URadio v-bind="args">
       <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
         <template v-if="args[slot]">{{ args[slot] }}</template>
       </template>
@@ -43,7 +43,7 @@ const SlotTemplate = (args) => ({
     return { args };
   },
   template: `
-    <URadio v-bind="args" description="description">
+    <URadio v-bind="args">
       ${args.slotTemplate}
     </URadio>
   `,
@@ -56,7 +56,7 @@ export const disabled = DefaultTemplate.bind({});
 disabled.args = { disabled: true, name: "radio2" };
 
 export const description = DefaultTemplate.bind({});
-description.args = { name: "radio3" };
+description.args = { name: "radio3", description: "description" };
 
 export const checked = DefaultTemplate.bind({});
 checked.args = { checked: true, name: "radio4" };

package/ui.form-radio/index.vue

@@ -14,7 +14,7 @@
       type="radio"
       :disabled="disabled"
       :name="radioName"
-      :value="value"
+      :value="radioValue"
       :checked="checked"
       :data-cy="dataCy"
       v-bind="radioAttrs"
@@ -30,7 +30,7 @@
 </template>
 
 <script setup>
-import { inject, onMounted, ref, watchEffect } from "vue";
+import { computed, inject, onMounted, ref, watchEffect } from "vue";
 
 import ULabel from "../ui.form-label";
 import UIService, { getRandomId } from "../service.ui";
@@ -44,10 +44,10 @@ defineOptions({ name: "URadio", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Radio value.
+   * Native value attribute.
    */
   value: {
-    type: [String, Number],
+    type: [Boolean, String, Number, Array, Object],
     default: "",
   },
 
@@ -157,6 +157,10 @@ const radioSize = ref(getRadioGroupSize ? getRadioGroupSize() : props.size);
 
 const { radioAttrs, labelAttrs } = useAttrs(props, { radioColor, radioSize });
 
+const radioValue = computed(() => {
+  return props.value === "" ? "on" : props.value;
+});
+
 onMounted(() => {
   radioName.value = props.name || getRadioGroupName;
 });

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

@@ -19,9 +19,11 @@ export function useAttrs(props) {
 
   const labelAttrs = getAttrs("label", { isComponent: true });
   const listAttrs = getAttrs("list", { classes: listClasses });
+  const radioAttrs = getAttrs("radio", { isComponent: true });
 
   return {
     labelAttrs,
     listAttrs,
+    radioAttrs,
   };
 }

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

@@ -4,9 +4,9 @@ export default /*tw*/ {
     base: "flex flex-col",
     variants: {
       size: {
-        sm: "space-y-3",
-        md: "space-y-4",
-        lg: "space-y-5",
+        sm: "gap-2",
+        md: "gap-3",
+        lg: "gap-4",
       },
     },
   },

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

@@ -14,9 +14,9 @@ export default {
     label: "Label",
     value: "1",
     radios: [
-      { name: "radio", label: "radio 1", description: "description", value: "1" },
-      { name: "radio", label: "radio 2", description: "description", value: "2" },
-      { name: "radio", label: "radio 3", description: "description", value: "3" },
+      { name: "radio", label: "Radio 1", value: "1" },
+      { name: "radio", label: "Radio 2", value: "2" },
+      { name: "radio", label: "Radio 3", value: "3" },
     ],
   },
   argTypes: {

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

@@ -1,16 +1,28 @@
 <template>
   <ULabel
+    :size="size"
     :label="label"
+    :error="error"
     :description="description"
     :disabled="disabled"
-    :error="error"
-    :size="size"
     align="topWithDesc"
     :data-cy="dataCy"
     v-bind="labelAttrs"
   >
     <div v-bind="listAttrs">
-      <slot />
+      <slot>
+        <URadio
+          v-for="(option, index) in options"
+          :key="option.value"
+          :model-value="modelValue"
+          :value="option.value"
+          :label="option.label"
+          :description="option.description"
+          :disabled="disabled"
+          :data-cy="`${dataCy}-item-${index}`"
+          v-bind="radioAttrs"
+        />
+      </slot>
     </div>
   </ULabel>
 </template>
@@ -19,6 +31,7 @@
 import { computed, provide } from "vue";
 
 import ULabel from "../ui.form-label";
+import URadio from "../ui.form-radio";
 import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
@@ -33,10 +46,18 @@ const props = defineProps({
    * Radio group selected value.
    */
   modelValue: {
-    type: [String, Number],
+    type: [Boolean, String, Number, Array, Object],
     default: "",
   },
 
+  /**
+   * Radio group options.
+   */
+  options: {
+    type: Array,
+    default: () => [],
+  },
+
   /**
    * Radio group label.
    */
@@ -46,7 +67,7 @@ const props = defineProps({
   },
 
   /**
-   * Input description.
+   * Radio group description.
    */
   description: {
     type: String,
@@ -54,7 +75,7 @@ const props = defineProps({
   },
 
   /**
-   * Error message.
+   * Radio group error message.
    */
   error: {
     type: String,
@@ -63,7 +84,7 @@ const props = defineProps({
 
   /**
    * Radio size.
-   * @values sm, md, lg
+   * @values xs, sm, md, lg, xl
    */
   size: {
     type: String,
@@ -114,7 +135,7 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
-const { listAttrs, labelAttrs } = useAttrs(props);
+const { labelAttrs, listAttrs, radioAttrs } = useAttrs(props);
 
 const selectedItem = computed({
   get: () => props.modelValue,

package/ui.loader-top/Docs.mdx

@@ -25,9 +25,8 @@ const {
   loaderTopOn,
   loaderTopOff,
   requestQueue,
-  componentRequestQueue,
-  setComponentRequestQueue,
-  removeComponentRequestQueue
+  addRequestUrl
+  removeRequestUrl
 } = useLoaderTop();
 
 // get loader state
@@ -42,14 +41,13 @@ loaderTopOff("/transactions");
 // get current resource array
 console.log(requestQueue.value);
 
-// get current resource array for component relayed loaders (UTable)
-console.log(componentRequestQueue.value);
+// add resource into loader queue
+addRequestUrl("/transactions");
+addRequestUrl(["/transactions", "/products"]);
 
-// add resource into component related loader queue
-setComponentRequestQueue("/transactions");
-
-// remove resource from component related loader queue
-removeComponentRequestQueue("/transactions");
+// remove resource from loader queue
+removeRequestUrl("/transactions");
+removeRequestUrl(["/transactions", "/products"]);
 `} language="jsx" dark />
 
 ## Using loader outside Vue components