vueless 0.0.192 → 0.0.193

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.192",
+  "version": "0.0.193",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -38,8 +38,8 @@
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vueless/plugin-vite": "^0.0.34",
-    "@vueless/storybook": "^0.0.32",
-    "@vueless/web-types": "^0.0.12",
+    "@vueless/storybook": "^0.0.33",
+    "@vueless/web-types": "^0.0.13",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
     "eslint": "^8.55.0",

package/service.storybook/index.js

@@ -18,10 +18,6 @@ export function getArgTypes(componentName) {
 
   const types = {};
 
-  getSlotNames(componentName)?.forEach((slotName) => {
-    types[slotName] = { control: "text" };
-  });
-
   component.attributes?.forEach((attribute) => {
     const type = attribute.value.type;
 
@@ -84,16 +80,48 @@ export function getArgTypes(componentName) {
     }
   });
 
-  if (import.meta.env.STORYBOOK_FULL) {
-    component.events?.forEach((event) => {
+  component.slots?.forEach((slot) => {
+    const bindings = [];
+
+    slot.bindings?.forEach((binding) => {
+      const description = binding.description ? ` (${binding.description})` : "";
+
+      bindings.push(`${binding.name}: ${binding.type}${description}`);
+    });
+
+    types[`${slot.name}Slot`] = {
+      name: slot.name,
+      description: slot.description,
+      type: slot.bindings ? `{ ${bindings.join(", ")} }` : null,
+      control: "text",
+      table: { category: "slots" },
+    };
+  });
+
+  component.events?.forEach((event) => {
+    const properties = [];
+
+    event.properties?.forEach((property) => {
+      const description = property.description ? ` (${property.description})` : "";
+
+      properties.push(`${property.name}: ${property.type}${description}`);
+    });
+
+    types[event.name] = {
+      type: event.properties ? `{ ${properties.join(", ")} }` : null,
+      name: event.name,
+      description: event.description,
+    };
+
+    if (import.meta.env.STORYBOOK_FULL) {
       const eventName = "on" + event.name.charAt(0).toUpperCase() + event.name.slice(1);
 
       types[eventName] = {
         action: event.name,
         table: { category: "Storybook Events" },
       };
-    });
-  }
+    }
+  });
 
   return types;
 }
@@ -101,3 +129,9 @@ export function getArgTypes(componentName) {
 export function getSource(defaultCnfig) {
   return defaultCnfig.replace("export default /*tw*/ ", "").replace(";", "");
 }
+
+export const allSlotsFragment = `
+  <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+    <template v-if="args[slot + 'Slot']">{{ args[slot + 'Slot'] }}</template>
+  </template>
+`;

package/ui.button-toggle-item/index.vue

@@ -146,9 +146,7 @@ function onClickSetValue() {
     selectedItem.value = props.value;
   }
 
-  if (updateSelectedValue) {
-    updateSelectedValue(props.value, !selectedItem.value);
-  }
+  updateSelectedValue && updateSelectedValue(props.value, !selectedItem.value);
 
   emit("update:modelValue", props.value);
 }

package/ui.dropdown-item/index.vue

@@ -46,7 +46,7 @@ function onClick() {
   // invokes click event on current item
   emit("click");
 
-  if (hideDropdownOptions) hideDropdownOptions();
+  hideDropdownOptions && hideDropdownOptions();
 }
 
 const { wrapperAttrs } = useAttrs(props);

package/ui.form-checkbox/index.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-import { inject, ref, onMounted, computed, watchEffect } from "vue";
+import { inject, ref, onMounted, computed, watchEffect, toValue } from "vue";
 import { isEqual } from "lodash-es";
 
 import UIcon from "../ui.image-icon";
@@ -210,7 +210,7 @@ const iconSize = computed(() => {
 });
 
 const isBinary = computed(() => !Array.isArray(props.modelValue));
-const isCheckboxInGroup = computed(() => Boolean(getCheckboxGroupName()));
+const isCheckboxInGroup = computed(() => Boolean(toValue(getCheckboxGroupName)));
 
 const isChecked = computed(() => {
   return isBinary.value && !isCheckboxInGroup.value
@@ -223,17 +223,15 @@ const checkboxValue = computed(() => {
 });
 
 const currentValue = computed(() => {
-  return isCheckboxInGroup.value ? getCheckboxGroupCheckedItems() : props.modelValue;
+  return isCheckboxInGroup.value ? toValue(getCheckboxGroupCheckedItems) : props.modelValue;
 });
 
 onMounted(() => {
-  checkboxName.value = isCheckboxInGroup.value ? getCheckboxGroupName() : props.name;
+  checkboxName.value = isCheckboxInGroup.value ? toValue(getCheckboxGroupName) : props.name;
 });
 
-watchEffect(
-  () => (checkboxColor.value = getCheckboxGroupColor ? getCheckboxGroupColor() : props.color),
-);
-watchEffect(() => (checkboxSize.value = getCheckboxSize ? getCheckboxSize() : props.size));
+watchEffect(() => (checkboxColor.value = toValue(getCheckboxGroupColor) || props.color));
+watchEffect(() => (checkboxSize.value = toValue(getCheckboxSize) || props.size));
 
 function onChange() {
   let newModelValue;

package/ui.form-input-rating/composables/attrs.composable.js

@@ -1,35 +1,37 @@
+import { computed } from "vue";
 import useUI from "../../composable.ui";
 import { cva } from "../../service.ui";
-
 import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { counter } = config.value;
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
+
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    let classes = "";
+    let value = config.value[key];
 
-  const cvaCounter = cva({
-    base: counter.base,
-    variants: counter.variants,
-    compoundVariants: counter.compoundVariants,
-  });
+    if (value.variants || value.compoundVariants) {
+      const getCVA = cva(value);
 
-  const counterClasses = computed(() => cvaCounter({ size: props.size }));
+      classes = computed(() =>
+        getCVA({
+          ...props,
+        }),
+      );
+    }
 
-  const counterAttrs = getAttrs("counter", { classes: counterClasses });
-  const ratingAttrs = getAttrs("rating");
-  const wrapperAttrs = getAttrs("wrapper");
-  const iconAttrs = getAttrs("icon", { isComponent: true });
-  const iconWrapperAttrs = getAttrs("iconWrapper");
-  const labelAttrs = getAttrs("label", { isComponent: true });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    counterAttrs,
-    ratingAttrs,
-    wrapperAttrs,
-    iconAttrs,
-    iconWrapperAttrs,
-    labelAttrs,
+    hasSlotContent,
   };
 }

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

@@ -1,27 +1,42 @@
 export default /*tw*/ {
-  rating: "flex flex-col",
-  label: "",
-  wrapper: "",
-  iconWrapper: "leading-none flex",
-  icon: "",
+  label: "{ULabel}",
+  wrapper: {
+    base: "flex items-center text-gray-500 !leading-none",
+    variants: {
+      size: {
+        sm: "gap-1.5",
+        md: "gap-2",
+        lg: "gap-2.5",
+      },
+    },
+  },
+  stars: "flex",
+  star: "{UIcon}",
   selectedIconName: "star-fill",
   unselectedIconName: "star",
   counter: {
-    base: "leading-none",
     variants: {
       size: {
-        sm: "text-2xs",
-        md: "text-xs",
-        lg: "text-sm",
+        sm: "text-base",
+        md: "text-xl",
+        lg: "text-2xl",
+      },
+    },
+  },
+  total: {
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-xl",
       },
     },
   },
   defaultVariants: {
+    labelAlign: "top",
     size: "md",
-    modelValue: 0,
-    starsNumber: 5,
+    stars: 5,
+    counter: false,
     selectable: false,
-    noCounter: false,
-    labelAlign: "topInside",
   },
 };

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UInputRating from "../ui.form-input-rating";
 import URow from "../ui.container-row";
@@ -11,8 +11,8 @@ export default {
   title: "Form Inputs & Controls / Input Rating",
   component: UInputRating,
   args: {
+    modelValue: 2,
     label: "Label",
-    value: 2,
   },
   argTypes: {
     ...getArgTypes(UInputRating.name),
@@ -29,12 +29,9 @@ const DefaultTemplate = (args) => ({
   template: `
     <UInputRating
       v-bind="args"
-      v-model="args.value"
+      v-model="args.modelValue"
     >
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-
+      ${allSlotsFragment}
     </UInputRating>
   `,
 });
@@ -47,7 +44,7 @@ const SlotTemplate = (args) => ({
   template: `
     <UInputRating
       v-bind="args"
-      v-model="args.value"
+      v-model="args.modelValue"
     >
       ${args.slotTemplate}
     </UInputRating>
@@ -63,12 +60,13 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <URow>
+    <URow gap="2xl">
       <UInputRating
         v-for="(size, index) in sizes"
+        :key="index"
         v-bind="args"
+        v-model="args.modelValue"
         :size="size"
-        :key="index"
       />
     </URow>
   `,
@@ -80,32 +78,39 @@ Default.args = {};
 export const sizes = SizesTemplate.bind({});
 sizes.args = {};
 
+export const starAmount = DefaultTemplate.bind({});
+starAmount.args = { value: 4, stars: 7 };
+
 export const selectable = DefaultTemplate.bind({});
 selectable.args = { selectable: true };
 
-export const starsNumber = DefaultTemplate.bind({});
-starsNumber.args = { value: 4, starsNumber: 7 };
+export const description = DefaultTemplate.bind({});
+description.args = { description: "Some description" };
 
 export const error = DefaultTemplate.bind({});
-error.args = { error: "some error" };
+error.args = { error: "Some error" };
+
+export const withCounter = DefaultTemplate.bind({});
+withCounter.args = { counter: true };
 
-export const withoutCounter = DefaultTemplate.bind({});
-withoutCounter.args = { withCounter: false };
+export const withTotal = DefaultTemplate.bind({});
+withTotal.args = { total: 250 };
 
 export const slotCounter = SlotTemplate.bind({});
 slotCounter.args = {
   slotTemplate: `
-    <template #counter>
-      some counter
+    <template #counter="{counter}">
+      Rating: {{counter}}
     </template>
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
-slotRight.args = {
+export const slotTotal = SlotTemplate.bind({});
+slotTotal.args = {
+  total: 250,
   slotTemplate: `
-    <template #right>
-      🤘🤘🤘
+    <template #total="{total}">
+      ({{total}}) reviews
     </template>
   `,
 };

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.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 });

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.192",
+  "version": "0.0.193",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -260,7 +260,19 @@
           ],
           "slots": [
             {
-              "name": "`cell-${key}`"
+              "name": "`cell-${key}`",
+              "scoped": true,
+              "bindings": [
+                {
+                  "name": "name"
+                },
+                {
+                  "name": "value"
+                },
+                {
+                  "name": "row"
+                }
+              ]
             }
           ],
           "source": {
@@ -451,11 +463,23 @@
               "description": "Use it to add something above text."
             },
             {
-              "name": "title"
+              "name": "title",
+              "scoped": true,
+              "bindings": [
+                {
+                  "name": "title"
+                }
+              ]
             },
             {
               "name": "description",
-              "description": "Use it to add something instead of the description."
+              "scoped": true,
+              "description": "Use it to add something instead of the description.",
+              "bindings": [
+                {
+                  "name": "description"
+                }
+              ]
             },
             {
               "name": "left",
@@ -1681,11 +1705,23 @@
           "slots": [
             {
               "name": "label",
-              "description": "Use it to modify label."
+              "scoped": true,
+              "description": "Use it to modify label.",
+              "bindings": [
+                {
+                  "name": "item"
+                }
+              ]
             },
             {
               "name": "actions",
-              "description": "Use it to add custom actions."
+              "scoped": true,
+              "description": "Use it to add custom actions.",
+              "bindings": [
+                {
+                  "name": "item"
+                }
+              ]
             }
           ],
           "source": {
@@ -2885,18 +2921,45 @@
           "slots": [
             {
               "name": "before-option",
-              "description": "Use it to add something before option."
+              "scoped": true,
+              "description": "Use it to add something before option.",
+              "bindings": [
+                {
+                  "name": "option"
+                }
+              ]
             },
             {
               "name": "option",
-              "description": "Use it to add something before option."
+              "scoped": true,
+              "description": "Use it to add something before option.",
+              "bindings": [
+                {
+                  "name": "option"
+                },
+                {
+                  "name": "index"
+                }
+              ]
             },
             {
               "name": "after-option",
-              "description": "Use it to add something after option."
+              "scoped": true,
+              "description": "Use it to add something after option.",
+              "bindings": [
+                {
+                  "name": "option"
+                }
+              ]
             },
             {
-              "name": "empty"
+              "name": "empty",
+              "scoped": true,
+              "bindings": [
+                {
+                  "name": "empty-styles"
+                }
+              ]
             }
           ],
           "source": {
@@ -3034,10 +3097,22 @@
           ],
           "slots": [
             {
-              "name": "left"
+              "name": "left",
+              "scoped": true,
+              "bindings": [
+                {
+                  "name": "file"
+                }
+              ]
             },
             {
-              "name": "right"
+              "name": "right",
+              "scoped": true,
+              "bindings": [
+                {
+                  "name": "file"
+                }
+              ]
             }
           ],
           "source": {
@@ -3110,11 +3185,23 @@
             },
             {
               "name": "left",
-              "description": "Use it to add something left."
+              "scoped": true,
+              "description": "Use it to add something left.",
+              "bindings": [
+                {
+                  "name": "file"
+                }
+              ]
             },
             {
               "name": "right",
-              "description": "Use it to add something right."
+              "scoped": true,
+              "description": "Use it to add something right.",
+              "bindings": [
+                {
+                  "name": "file"
+                }
+              ]
             }
           ],
           "source": {
@@ -4130,18 +4217,9 @@
           "name": "UInputRating",
           "description": "",
           "attributes": [
-            {
-              "name": "label",
-              "description": "Set input rating  label.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
             {
               "name": "modelValue",
-              "description": "Set input rating value.",
+              "description": "Rating value.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -4149,8 +4227,8 @@
               "default": "0"
             },
             {
-              "name": "starsNumber",
-              "description": "Set the number of stars.",
+              "name": "stars",
+              "description": "Rating number of stars.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -4159,7 +4237,7 @@
             },
             {
               "name": "size",
-              "description": "Set component size.",
+              "description": "Rating size.",
               "value": {
                 "kind": "expression",
                 "type": "'sm' | 'md' | 'lg'"
@@ -4167,26 +4245,26 @@
               "default": "md"
             },
             {
-              "name": "selectable",
-              "description": "Make stars selectable.",
+              "name": "label",
+              "description": "Rating label.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "false"
+              "default": "\"\""
             },
             {
               "name": "labelAlign",
-              "description": "Set label placement related from the default slot.",
+              "description": "Rating label placement.",
               "value": {
                 "kind": "expression",
                 "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
-              "default": "topInside"
+              "default": "top"
             },
             {
               "name": "error",
-              "description": "Set error message.",
+              "description": "Rating error message.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -4195,7 +4273,7 @@
             },
             {
               "name": "description",
-              "description": "Set description text.",
+              "description": "Rating description.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -4203,8 +4281,26 @@
               "default": "\"\""
             },
             {
-              "name": "noCounter",
-              "description": "Hide / show counter.",
+              "name": "total",
+              "description": "Rating total.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "0"
+            },
+            {
+              "name": "counter",
+              "description": "Show rating counter.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "selectable",
+              "description": "Make rating selectable.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -4213,7 +4309,7 @@
             },
             {
               "name": "config",
-              "description": "Sets component ui config object.",
+              "description": "Component ui config object.",
               "value": {
                 "kind": "expression",
                 "type": "object"
@@ -4222,7 +4318,7 @@
             },
             {
               "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
+              "description": "Data-cy attribute for automated testing.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -4232,17 +4328,48 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "update:modelValue",
+              "description": "Triggers when the rating is changes.",
+              "properties": [
+                {
+                  "type": [
+                    "number"
+                  ],
+                  "name": "modelValue"
+                }
+              ]
             }
           ],
           "slots": [
             {
               "name": "counter",
-              "description": "Use it to add counter."
+              "scoped": true,
+              "description": "Use it to customise counter.",
+              "bindings": [
+                {
+                  "type": "number",
+                  "name": "counter"
+                },
+                {
+                  "type": "number",
+                  "name": "total"
+                }
+              ]
             },
             {
-              "name": "right",
-              "description": "Use it to add something right."
+              "name": "total",
+              "scoped": true,
+              "description": "Use it to customise total.",
+              "bindings": [
+                {
+                  "type": "number",
+                  "name": "counter"
+                },
+                {
+                  "type": "number",
+                  "name": "total"
+                }
+              ]
             }
           ],
           "source": {
@@ -5767,10 +5894,37 @@
           ],
           "slots": [
             {
-              "name": "indicator"
-            },
-            {
-              "name": "`step-${index}`"
+              "name": "indicator",
+              "scoped": true,
+              "bindings": [
+                {
+                  "name": "percent"
+                },
+                {
+                  "name": "value"
+                },
+                {
+                  "name": "max"
+                }
+              ]
+            },
+            {
+              "name": "`step-${index}`",
+              "scoped": true,
+              "bindings": [
+                {
+                  "name": "name"
+                },
+                {
+                  "name": "step"
+                },
+                {
+                  "name": "value"
+                },
+                {
+                  "name": "max"
+                }
+              ]
             }
           ],
           "source": {
@@ -6339,19 +6493,46 @@
           "slots": [
             {
               "name": "after-caret",
-              "description": "Use it to add something after caret."
+              "scoped": true,
+              "description": "Use it to add something after caret.",
+              "bindings": [
+                {
+                  "name": "scope-props"
+                }
+              ]
             },
             {
               "name": "before-caret",
-              "description": "Use it to add something after caret."
+              "scoped": true,
+              "description": "Use it to add something after caret.",
+              "bindings": [
+                {
+                  "name": "scope-props"
+                }
+              ]
             },
             {
               "name": "selected-label",
-              "description": "Use it to add selected value label."
+              "scoped": true,
+              "description": "Use it to add selected value label.",
+              "bindings": [
+                {
+                  "name": "selected-label"
+                },
+                {
+                  "name": "value"
+                }
+              ]
             },
             {
               "name": "selected-label-after",
-              "description": "Use it to add selected value label."
+              "scoped": true,
+              "description": "Use it to add selected value label.",
+              "bindings": [
+                {
+                  "name": "scope-props"
+                }
+              ]
             },
             {
               "name": "left",
@@ -6359,14 +6540,35 @@
             },
             {
               "name": "before-option",
-              "description": "Use it to add something before option."
+              "scoped": true,
+              "description": "Use it to add something before option.",
+              "bindings": [
+                {
+                  "name": "option"
+                }
+              ]
             },
             {
-              "name": "option"
+              "name": "option",
+              "scoped": true,
+              "bindings": [
+                {
+                  "name": "option"
+                },
+                {
+                  "name": "index"
+                }
+              ]
             },
             {
               "name": "after-option",
-              "description": "Use it to add something after option."
+              "scoped": true,
+              "description": "Use it to add something after option.",
+              "bindings": [
+                {
+                  "name": "option"
+                }
+              ]
             }
           ],
           "source": {
@@ -6728,26 +6930,68 @@
           "slots": [
             {
               "name": "header-actions",
-              "description": "Use it to add action buttons instead of table row when some rows are selected."
+              "scoped": true,
+              "description": "Use it to add action buttons instead of table row when some rows are selected.",
+              "bindings": [
+                {
+                  "name": "selected-rows"
+                }
+              ]
             },
             {
               "name": "`header-${column.key}`",
-              "description": "Use it to customise table column."
+              "scoped": true,
+              "description": "Use it to customise table column.",
+              "bindings": [
+                {
+                  "name": "name"
+                },
+                {
+                  "name": "column"
+                }
+              ]
             },
             {
               "name": "`header-${column.key}-after`",
-              "description": "Use it to add content after table column."
+              "scoped": true,
+              "description": "Use it to add content after table column.",
+              "bindings": [
+                {
+                  "name": "name"
+                },
+                {
+                  "name": "column"
+                }
+              ]
             },
             {
               "name": "before-header",
-              "description": "Use it to add something before header row."
+              "scoped": true,
+              "description": "Use it to add something before header row.",
+              "bindings": [
+                {
+                  "name": "cols-count"
+                }
+              ]
             },
             {
               "name": "before-first-row",
               "description": "Use it to add something before first row."
             },
             {
-              "name": "`cell-${key}`"
+              "name": "`cell-${key}`",
+              "scoped": true,
+              "bindings": [
+                {
+                  "name": "name"
+                },
+                {
+                  "name": "value"
+                },
+                {
+                  "name": "row"
+                }
+              ]
             },
             {
               "name": "after-last-row",
@@ -6759,7 +7003,13 @@
             },
             {
               "name": "footer",
-              "description": "Use it to add something in table footer."
+              "scoped": true,
+              "description": "Use it to add something in table footer.",
+              "bindings": [
+                {
+                  "name": "cols-count"
+                }
+              ]
             }
           ],
           "source": {