vueless 0.0.191 → 0.0.193

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.191",
+  "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.loader/composables/attrs.composable.js

@@ -47,5 +47,6 @@ export function useAttrs(props) {
   return {
     loaderAttrs,
     ellipseAttrs,
+    config,
   };
 }