vueless 0.0.192 → 0.0.194

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

@@ -1,43 +1,52 @@
 <template>
-  <div :data-cy="dataCy" v-bind="ratingAttrs">
-    <ULabel
-      :label="label"
-      :error="error"
-      :size="size"
-      :description="description"
-      :align="labelAlign"
-      v-bind="labelAttrs"
-    >
-      <div v-bind="wrapperAttrs">
-        <div v-if="!noCounter" v-bind="counterAttrs">
-          <!-- @slot Use it to add counter. -->
-          <slot name="counter">
-            {{ ratingCounter }}
-          </slot>
-        </div>
-
-        <div v-bind="iconWrapperAttrs">
-          <UIcon
-            v-for="star in starsNumber"
-            :key="star"
-            internal
-            color="yellow"
-            :size="iconSize"
-            :interactive="selectable"
-            :data-cy="`${dataCy}-rating-star-${star}`"
-            :name="star <= ratingCounter ? config.selectedIconName : config.unselectedIconName"
-            v-bind="iconAttrs"
-            @mouseover="onMouseHover(star)"
-            @mouseleave="onMouseHover()"
-            @click="onClickStar(star)"
-          />
-        </div>
-
-        <!-- @slot Use it to add something right. -->
-        <slot name="right" />
+  <ULabel
+    :label="label"
+    :error="error"
+    :size="size"
+    :align="labelAlign"
+    :description="description"
+    v-bind="labelAttrs"
+    :data-cy="dataCy"
+  >
+    <div v-bind="wrapperAttrs">
+      <div v-if="counter || hasSlotContent($slots['counter'])" v-bind="counterAttrs">
+        <!--
+          @slot Use it to customise counter.
+          @binding {number} counter
+          @binding {number} total
+        -->
+        <slot name="counter" :counter="counterValue" :total="total">
+          {{ counterValue }}
+        </slot>
       </div>
-    </ULabel>
-  </div>
+
+      <div v-bind="starsAttrs">
+        <UIcon
+          v-for="star in stars"
+          :key="star"
+          internal
+          color="yellow"
+          :size="iconSize"
+          :interactive="selectable"
+          :name="star <= counterValue ? config.selectedIconName : config.unselectedIconName"
+          v-bind="starAttrs"
+          :data-cy="`${dataCy}-rating-star-${star}`"
+          @click="onClickStar(star)"
+          @mouseleave="onMouseHover()"
+          @mouseover="onMouseHover(star)"
+        />
+      </div>
+
+      <div v-if="total || hasSlotContent($slots['total'])" v-bind="totalAttrs">
+        <!--
+          @slot Use it to customise total.
+          @binding {number} counter
+          @binding {number} total
+        -->
+        <slot name="total" :counter="counter" :total="total">({{ total }})</slot>
+      </div>
+    </div>
+  </ULabel>
 </template>
 
 <script setup>
@@ -56,31 +65,23 @@ defineOptions({ name: "UInputRating", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set input rating  label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Set input rating value.
+   * Rating value.
    */
   modelValue: {
     type: Number,
-    default: UIService.get(defaultConfig, UInputRating).default.modelValue,
+    default: 0,
   },
 
   /**
-   * Set the number of stars.
+   * Rating number of stars.
    */
-  starsNumber: {
+  stars: {
     type: Number,
-    default: UIService.get(defaultConfig, UInputRating).default.starsNumber,
+    default: UIService.get(defaultConfig, UInputRating).default.stars,
   },
 
   /**
-   * Set component size.
+   * Rating size.
    * @values sm, md, lg
    */
   size: {
@@ -89,15 +90,15 @@ const props = defineProps({
   },
 
   /**
-   * Make stars selectable.
+   * Rating label.
    */
-  selectable: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UInputRating).default.selectable,
+  label: {
+    type: String,
+    default: "",
   },
 
   /**
-   * Set label placement related from the default slot.
+   * Rating label placement.
    * @values top, topInside, topWithDesc, bottom, left, right
    */
   labelAlign: {
@@ -106,7 +107,7 @@ const props = defineProps({
   },
 
   /**
-   * Set error message.
+   * Rating error message.
    */
   error: {
     type: String,
@@ -114,7 +115,7 @@ const props = defineProps({
   },
 
   /**
-   * Set description text.
+   * Rating description.
    */
   description: {
     type: String,
@@ -122,15 +123,31 @@ const props = defineProps({
   },
 
   /**
-   * Hide / show counter.
+   * Rating total.
+   */
+  total: {
+    type: Number,
+    default: 0,
+  },
+
+  /**
+   * Show rating counter.
    */
-  noCounter: {
+  counter: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UInputRating).default.noCounter,
+    default: UIService.get(defaultConfig, UInputRating).default.counter,
   },
 
   /**
-   * Sets component ui config object.
+   * Make rating selectable.
+   */
+  selectable: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputRating).default.selectable,
+  },
+
+  /**
+   * Component ui config object.
    */
   config: {
     type: Object,
@@ -138,7 +155,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,
@@ -146,12 +163,26 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the rating is changes.
+   * @property {number} modelValue
+   */
+  "update:modelValue",
+]);
 
 const hovered = ref(null);
 
-const { config, counterAttrs, ratingAttrs, wrapperAttrs, iconAttrs, iconWrapperAttrs, labelAttrs } =
-  useAttrs(props);
+const {
+  config,
+  labelAttrs,
+  wrapperAttrs,
+  counterAttrs,
+  totalAttrs,
+  starsAttrs,
+  starAttrs,
+  hasSlotContent,
+} = useAttrs(props);
 
 const iconSize = computed(() => {
   const sizes = {
@@ -163,7 +194,7 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
-const ratingCounter = computed(() => {
+const counterValue = computed(() => {
   return hovered.value || props.modelValue;
 });
 

package/ui.form-radio/index.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script setup>
-import { computed, inject, onMounted, ref, watchEffect } from "vue";
+import { computed, inject, onMounted, ref, watchEffect, toValue } from "vue";
 
 import ULabel from "../ui.form-label";
 import UIService, { getRandomId } from "../service.ui";
@@ -162,8 +162,8 @@ const emit = defineEmits(["update:modelValue"]);
 
 const localValue = ref("");
 const radioName = ref(null);
-const radioColor = ref(getRadioGroupColor ? getRadioGroupColor() : props.color);
-const radioSize = ref(getRadioGroupSize ? getRadioGroupSize() : props.size);
+const radioColor = ref(toValue(getRadioGroupColor) || props.color);
+const radioSize = ref(toValue(getRadioGroupSize) || props.size);
 
 const isChecked = computed(() => {
   const currentValue = props.modelValue ?? localValue.value;
@@ -182,14 +182,13 @@ const radioValue = computed(() => {
 });
 
 onMounted(() => {
-  radioName.value = props.name || getRadioGroupName();
+  radioName.value = props.name || toValue(getRadioGroupName);
 });
 
-watchEffect(() => (radioColor.value = getRadioGroupColor ? getRadioGroupColor() : props.color));
-watchEffect(() => (radioSize.value = getRadioGroupSize ? getRadioGroupSize() : props.size));
+watchEffect(() => (radioColor.value = toValue(getRadioGroupColor) || props.color));
+watchEffect(() => (radioSize.value = toValue(getRadioGroupSize) || props.size));
 watchEffect(() => {
-  localValue.value = getRadioGroupSelectedItem ? getRadioGroupSelectedItem() : null;
-
+  localValue.value = toValue(getRadioGroupSelectedItem) || null;
   emit("update:modelValue", props.value);
 });
 

package/ui.form-select/composables/attrs.composable.js

@@ -21,20 +21,19 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
-    let classes = "";
-    let value = config.value[key];
+    const classes = computed(() => {
+      const value = config.value[key];
 
-    if (value.variants || value.compoundVariants) {
-      const getCVA = cva(value);
-
-      classes = computed(() =>
-        getCVA({
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
           ...props,
           error: Boolean(props.error),
           label: Boolean(props.label),
-        }),
-      );
-    }
+        });
+      }
+
+      return "";
+    });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
 

package/ui.navigation-tab/index.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import { computed, inject } from "vue";
+import { computed, inject, toValue } from "vue";
 
 import UIService from "../service.ui";
 
@@ -68,11 +68,11 @@ const props = defineProps({
 });
 
 const selected = computed(() => {
-  return getUTabsSelectedItem && getUTabsSelectedItem() === props.value && !props.disabled;
+  return toValue(getUTabsSelectedItem) === props.value && !props.disabled;
 });
 
 const size = computed(() => {
-  return getUTabsSize ? getUTabsSize() : UIService.get(defaultConfig, UTab).default.size;
+  return toValue(getUTabsSize) || UIService.get(defaultConfig, UTab).default.size;
 });
 
 const { wrapperAttrs } = useAttrs(props, { selected, size });