vueless 0.0.192 → 0.0.194

package/composable.ui/index.js

@@ -1,5 +1,6 @@
 import {
   ref,
+  watch,
   watchEffect,
   getCurrentInstance,
   toValue,
@@ -69,7 +70,6 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
   });
 
   function getAttrs(configKey, options) {
-    const cvaClasses = options?.classes || "";
     const nestedComponent = options?.isComponent || getNestedComponent(defaultConfig[configKey]); // TODO: Remove `options?.isComponent` when all `attrs.composable.js` will be migranted
 
     const attrs = useAttrs();
@@ -87,7 +87,9 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
     // Delete value key to prevent v-model overwrite
     delete commonAttrs.value;
 
-    watchEffect(() => {
+    watch(config, updateVuelessAttrs, { immediate: true });
+
+    function updateVuelessAttrs() {
       const configKeyValue = config.value[configKey];
       const isObject = typeof configKeyValue === "object";
 
@@ -97,16 +99,15 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
       };
 
       const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
-
       const attrClass = isTopLevelClassKey && !nestedComponent ? attrs.class : "";
-      const configKeyClass = isObject ? configKeyValue.base : configKeyValue;
+      const classes = options?.classes ? toValue(options?.classes) : getBaseClasses(configKeyValue);
 
       vuelessAttrs.value = {
         ...commonAttrs,
-        class: cx([configKeyClass, toValue(cvaClasses), attrClass]),
+        class: cx([classes, attrClass]),
         ...((isObject && configAttrs) || {}),
       };
-    });
+    }
 
     return vuelessAttrs;
   }
@@ -261,6 +262,8 @@ function mergeConfigs({
   @returns {Object}
  */
 function stringToObject(value) {
+  if (value === undefined) value = "";
+
   return typeof value === "object" ? value : { base: value };
 }
 
@@ -359,13 +362,22 @@ function mergeClassesIntoConfig(config, topLevelClassKey, attrs) {
   return config;
 }
 
+/**
+ Return base classes.
+ @param { String | Object } value
+ @returns { String }
+ */
+function getBaseClasses(value) {
+  return typeof value === "object" ? value.base || "" : value || "";
+}
+
 /**
  Check is config key contains component name and if contains return it.
  @param { String | Object } value
  @returns { String }
  */
 function getNestedComponent(value) {
-  const classes = typeof value === "object" ? value.base || "" : value || "";
+  const classes = getBaseClasses(value);
   const match = classes.match(nestedComponentRegEx);
 
   return match ? match[1] : "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.192",
+  "version": "0.0.194",
   "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/index.vue

@@ -47,7 +47,7 @@ const props = defineProps({
    */
   modelValue: {
     type: [String, Number, Array],
-    default: () => (!this.multiple ? "" : []),
+    default: "",
   },
 
   /**

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