vueless 0.0.184 → 0.0.186

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.184",
+  "version": "0.0.186",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button/index.vue

@@ -6,7 +6,6 @@
     :disabled="disabled"
     :data-cy="dataCy"
     v-bind="buttonAttrs"
-    @click="onClick"
   >
     <template v-if="loading">
       <!-- Label is needed to prevent changing button height -->
@@ -180,8 +179,6 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["click"]);
-
 const { buttonAttrs, loaderAttrs, textAttrs } = useAttrs(props);
 
 const buttonRef = ref(null);
@@ -204,10 +201,4 @@ const loaderSize = computed(() => {
 const componentColor = computed(() => {
   return props.variant === "primary" ? "white" : props.color;
 });
-
-function onClick(event) {
-  if (props.disabled) return;
-
-  emit("click", event);
-}
 </script>

package/ui.dropdown-badge/index.vue

@@ -189,7 +189,7 @@ const props = defineProps({
 
 const emit = defineEmits(["select"]);
 
-provide("hideDropdownOptions", () => hideOptions);
+provide("hideDropdownOptions", hideOptions);
 
 const isShownOptions = ref(false);
 const selectedItem = ref("");

package/ui.dropdown-button/index.vue

@@ -224,7 +224,7 @@ const props = defineProps({
 
 const emit = defineEmits(["select"]);
 
-provide("hideDropdownOptions", () => hideOptions);
+provide("hideDropdownOptions", hideOptions);
 
 const isShownOptions = ref(false);
 const selectedItem = ref("");

package/ui.dropdown-link/index.vue

@@ -210,7 +210,7 @@ const props = defineProps({
 
 const emit = defineEmits(["select"]);
 
-provide("hideDropdownOptions", () => hideOptions());
+provide("hideDropdownOptions", hideOptions);
 
 const isShownOptions = ref(false);
 const selectedItem = ref("");

package/ui.dropdown-list/composables/usePointer.js

@@ -1,17 +1,32 @@
-import { ref, computed } from "vue";
+import { ref, computed, toValue } from "vue";
 
-export default function usePointer(options, optionHeight, listWrapperElement) {
+export default function usePointer(options, optionElements, listWrapperElement) {
   const pointer = ref(null);
   const pointerDirty = ref(false);
 
+  const activeElementHeight = computed(() => {
+    const isGroupLabel = toValue(optionElements).at(pointer.value).dataset.groupLabel;
+    const groupIndex = 2;
+
+    if (isGroupLabel) {
+      return toValue(optionElements)
+        .at(pointer.value - groupIndex)
+        .getBoundingClientRect().height;
+    }
+
+    return toValue(optionElements).at(pointer.value).getBoundingClientRect().height;
+  });
+
   const pointerPosition = computed(() => {
-    return pointer.value * optionHeight || 0;
+    return pointer.value * activeElementHeight.value || 0;
   });
 
   function scrollWrapperToElement() {
-    const visibleElements = listWrapperElement.value.getBoundingClientRect().height / optionHeight;
+    const visibleElements =
+      listWrapperElement.value.getBoundingClientRect().height / activeElementHeight.value;
     const currentElement = visibleElements - 1;
-    const currentPointerPosition = pointerPosition.value - currentElement * optionHeight;
+    const currentPointerPosition =
+      pointerPosition.value - currentElement * activeElementHeight.value;
 
     if (listWrapperElement.value.scrollTop <= currentPointerPosition) {
       listWrapperElement.value.scrollTop = currentPointerPosition;
@@ -22,10 +37,7 @@ export default function usePointer(options, optionHeight, listWrapperElement) {
     if (pointer.value < options.length - 1) {
       pointer.value++;
 
-      const isGroup =
-        options[pointer.value].$isLabel ||
-        options[pointer.value].isSubGroup ||
-        options[pointer.value].$groupLabel;
+      const isGroup = options[pointer.value].isSubGroup || options[pointer.value].groupLabel;
 
       if (listWrapperElement) scrollWrapperToElement();
 
@@ -41,10 +53,7 @@ export default function usePointer(options, optionHeight, listWrapperElement) {
     if (pointer.value > 0) {
       pointer.value--;
 
-      const isGroup =
-        options[pointer.value].$isLabel ||
-        options[pointer.value].isSubGroup ||
-        options[pointer.value].$groupLabel;
+      const isGroup = options[pointer.value].isSubGroup || options[pointer.value].groupLabel;
 
       if (listWrapperElement && listWrapperElement.value.scrollTop >= pointerPosition.value) {
         listWrapperElement.value.scrollTop = pointerPosition.value;
@@ -54,7 +63,7 @@ export default function usePointer(options, optionHeight, listWrapperElement) {
         pointerBackward();
       }
     } else {
-      if (options[pointer.value] && options[0].$isLabel) {
+      if (options[pointer.value] && options[0].groupLabel) {
         pointerForward();
       }
     }

package/ui.dropdown-list/configs/default.config.js

@@ -66,7 +66,7 @@ export default /*tw*/ {
     labelKey: "label",
     valueKey: "id",
     optionHeight: 40,
-    maxHeight: undefined,
+    visibleOptions: undefined,
     disabled: false,
     addOption: false,
   },

package/ui.dropdown-list/index.vue

@@ -13,15 +13,14 @@
         v-for="(option, index) of options"
         :id="`${id}-${index}`"
         :key="index"
-        :role="!(option && (option.$isLabel || option.$isDisabled)) ? 'option' : null"
         v-bind="optionItemAttrs"
+        ref="optionsRef"
+        :role="!(option && option.groupLabel) ? 'option' : null"
+        :data-group-label="Boolean(option.groupLabel)"
       >
         <!-- option title -->
         <span
-          v-if="
-            !(option && (option.$isLabel || option.$isDisabled || option.isSubGroup)) &&
-            !option.isHidden
-          "
+          v-if="!(option && (option.groupLabel || option.isSubGroup)) && !option.isHidden"
           v-bind="optionAttrs(optionHighlight(index, option))"
           @click.stop="select(option)"
           @mouseenter.self="pointerSet(index)"
@@ -42,14 +41,8 @@
         </span>
 
         <!-- group title -->
-        <div
-          v-if="
-            option &&
-            (option.$isLabel || option.$isDisabled || option.isSubGroup) &&
-            !option.isHidden
-          "
-        >
-          <div v-if="option.$groupLabel" v-bind="groupLabelAttrs" v-text="option.$groupLabel" />
+        <div v-if="option && (option.groupLabel || option.isSubGroup) && !option.isHidden">
+          <div v-if="option.groupLabel" v-bind="groupLabelAttrs" v-text="option.groupLabel" />
 
           <div
             v-else-if="option.isSubGroup"
@@ -180,19 +173,11 @@ const props = defineProps({
   },
 
   /**
-   * List max height in pixels.
+   * Amount of options you can see without scroll.
    */
-  maxHeight: {
+  visibleOptions: {
     type: Number,
-    default: UIService.get(defaultConfig, UDropdownList).default.maxHeight,
-  },
-
-  /**
-   * List option height in pixels.
-   */
-  optionHeight: {
-    type: Number,
-    default: UIService.get(defaultConfig, UDropdownList).default.optionHeight,
+    default: UIService.get(defaultConfig, UDropdownList).default.visibleOptions,
   },
 
   /**
@@ -216,9 +201,10 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue", "addOption"]);
 
 const wrapperRef = ref(null);
+const optionsRef = ref([]);
 
 const { pointer, pointerDirty, pointerSet, pointerBackward, pointerForward, pointerReset } =
-  usePointer(props.options, props.optionHeight, wrapperRef);
+  usePointer(props.options, optionsRef, wrapperRef);
 
 const {
   config,
@@ -240,7 +226,15 @@ const {
 
 const { tm } = useLocale();
 
-defineExpose({ pointerSet, pointerBackward, pointerForward, pointerReset, addPointerElement });
+defineExpose({
+  pointerSet,
+  pointerBackward,
+  pointerForward,
+  pointerReset,
+  addPointerElement,
+  optionsRef,
+  wrapperRef,
+});
 
 const i18nGlobal = tm(UDropdownList);
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
@@ -249,16 +243,21 @@ const addOptionKeyCombination = computed(() => {
   return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";
 });
 
-const wrapperHeight = computed(() =>
-  props.maxHeight === undefined ? "auto" : `${props.maxHeight}px`,
-);
+const wrapperHeight = computed(() => {
+  const maxHeight = optionsRef.value
+    .slice(0, props.visibleOptions)
+    .map((el) => el.getBoundingClientRect().height)
+    .reduce((acc, cur) => acc + cur, 0);
+
+  return props.visibleOptions === undefined ? "auto" : `${maxHeight}px`;
+});
 
 function onClickAddOption() {
   emit("addOption");
 }
 
 function select(option, key) {
-  if (props.disabled || option.$isDisabled || option.$isLabel) {
+  if (props.disabled || option.groupLabel) {
     return;
   }
 

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

@@ -4,7 +4,7 @@ import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props) {
+export function useAttrs(props, { checkboxColor, checkboxSize }) {
   const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { checkbox, iconWrapper } = config.value;
 
@@ -23,22 +23,22 @@ export function useAttrs(props) {
   const checkboxClasses = computed(() =>
     setColor(
       cvaCheckbox({
-        size: props.size,
+        size: checkboxSize.value,
         label: Boolean(props.label),
-        color: getColor(props.color),
-        disabled: props.color,
+        color: getColor(checkboxColor.value),
+        disabled: props.disabled,
       }),
-      props.color,
+      checkboxColor.value,
     ),
   );
 
   const iconWrapperClasses = computed(() =>
     setColor(
       cvaIconWrapper({
-        size: props.size,
-        color: getColor(props.color),
+        size: checkboxSize.value,
+        color: getColor(checkboxColor.value),
       }),
-      props.color,
+      checkboxColor.value,
     ),
   );
 

package/ui.form-checkbox/index.vue

@@ -1,7 +1,7 @@
 <template>
   <ULabel
     :for="id"
-    :size="size"
+    :size="checkboxSize"
     :label="label"
     :description="description"
     :align="labelAlign"
@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-import { inject, ref, onMounted, computed } from "vue";
+import { inject, ref, onMounted, computed, watchEffect } from "vue";
 import { isEqual } from "lodash-es";
 
 import UIcon from "../ui.image-icon";
@@ -54,9 +54,11 @@ import { useAttrs } from "./composables/attrs.composable";
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UCheckbox", inheritAttrs: false });
 
-const checkboxGroupName = inject("checkboxGroupName", null);
-const checkboxGroupCheckedItems = inject("checkboxGroupCheckedItems", null);
+const getCheckboxGroupName = inject("getCheckboxGroupName", null);
+const getCheckboxGroupCheckedItems = inject("getCheckboxGroupCheckedItems", null);
 const setCheckboxGroupCheckedItems = inject("setCheckboxGroupCheckedItems", null);
+const getCheckboxGroupColor = inject("getCheckboxGroupColor", null);
+const getCheckboxSize = inject("getCheckboxSize", null);
 
 const props = defineProps({
   /**
@@ -187,8 +189,13 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue", "input"]);
 
 const checkboxName = ref("");
+const checkboxSize = ref(props.size);
+const checkboxColor = ref(props.color);
 
-const { config, checkboxAttrs, iconWrapperCellAttrs, labelAttrs, iconAttrs } = useAttrs(props);
+const { config, checkboxAttrs, iconWrapperCellAttrs, labelAttrs, iconAttrs } = useAttrs(props, {
+  checkboxColor,
+  checkboxSize,
+});
 
 const iconSize = computed(() => {
   const sizes = {
@@ -203,7 +210,7 @@ const iconSize = computed(() => {
 });
 
 const isBinary = computed(() => !Array.isArray(props.modelValue));
-const isCheckboxInGroup = computed(() => Boolean(checkboxGroupName));
+const isCheckboxInGroup = computed(() => Boolean(getCheckboxGroupName()));
 
 const isChecked = computed(() => {
   return isBinary.value && !isCheckboxInGroup.value
@@ -216,13 +223,18 @@ const checkboxValue = computed(() => {
 });
 
 const currentValue = computed(() => {
-  return isCheckboxInGroup.value ? checkboxGroupCheckedItems.value : props.modelValue;
+  return isCheckboxInGroup.value ? getCheckboxGroupCheckedItems() : props.modelValue;
 });
 
 onMounted(() => {
-  checkboxName.value = isCheckboxInGroup.value ? checkboxGroupName : props.name;
+  checkboxName.value = isCheckboxInGroup.value ? getCheckboxGroupName() : props.name;
 });
 
+watchEffect(
+  () => (checkboxColor.value = getCheckboxGroupColor ? getCheckboxGroupColor() : props.color),
+);
+watchEffect(() => (checkboxSize.value = getCheckboxSize ? getCheckboxSize() : props.size));
+
 function onChange() {
   let newModelValue;
 

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

@@ -1,6 +1,9 @@
 import { getArgTypes } from "../service.storybook";
 
 import UCheckboxGroup from "../ui.form-checkbox-group";
+import UCheckbox from "../ui.form-checkbox";
+import UAlert from "../ui.text-alert";
+import URow from "../ui.container-row";
 
 /**
  * The `UCheckboxGroup` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-checkbox-group)
@@ -16,7 +19,7 @@ export default {
       { label: "checkbox 2", description: "some description 2", value: "2" },
       { label: "checkbox 3", description: "some description 3", value: "3" },
     ],
-    value: ["1"],
+    value: ["One"],
   },
   argTypes: {
     ...getArgTypes(UCheckboxGroup.name),
@@ -24,25 +27,157 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UCheckboxGroup },
+  components: { UCheckboxGroup, UCheckbox, UAlert, URow },
   setup() {
     return { args };
   },
   data() {
     return {
-      test: ["1"],
+      value: args.value,
     };
   },
   template: `
-    <UCheckboxGroup v-bind="args" name="default" v-model="test" />
+    <URow class="!flex-col">
+      <UCheckboxGroup v-bind="args" v-model="value">
+        <template v-for="(radio, index) in args.options" :key="index">
+          <UCheckbox
+            v-bind="radio"
+          >
+          </UCheckbox>
+        </template>
+      </UCheckboxGroup>
+
+      <URow>
+        <UAlert color="red" v-if=args.isDefaultStory>
+          <b>NOTE:</b> <p>UCheckboxGroup component have to have unique name attribute</p>
+        </UAlert>
+        <UAlert color="blue">
+          <p>Selected value: {{ value }}</p>
+        </UAlert>
+      </URow>
+    </URow>
+  `,
+});
+
+const OptionsTemplate = (args) => ({
+  components: { UCheckboxGroup, UCheckbox, UAlert, URow },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      value: args.value,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <UCheckboxGroup v-bind="args" v-model="value" :options="args.options" />
+  
+      <URow>
+        <UAlert color="blue">
+          <p>Selected value: {{ value }}</p>
+        </UAlert>
+      </URow>
+    </URow>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {};
+Default.args = {
+  name: "Default",
+  isDefaultStory: true,
+  options: [
+    { name: "Default", label: "String", description: "some description 1", value: "One" },
+    { name: "Default", label: "Boolean", description: "some description 2", value: false },
+    {
+      name: "Default",
+      label: "Object",
+      description: "some description 3",
+      value: { key: "value" },
+    },
+    {
+      name: "Default",
+      label: "Object",
+      description: "some description 4",
+      value: ["Array", 1],
+    },
+  ],
+};
+
+export const Options = OptionsTemplate.bind({});
+Options.args = {
+  name: "Options",
+  options: [
+    { name: "Options", label: "Boolean", value: false },
+    { name: "Options", label: "String", value: "One" },
+    { name: "Options", label: "Number", value: 3 },
+    { name: "Options", label: "Object", value: { key: "value" } },
+    { name: "Options", label: "Array", value: ["Array", 1] },
+  ],
+};
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { UCheckboxGroup, URow },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      value: args.value,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <UCheckboxGroup 
+        v-bind="args"
+        v-for="color in colors" 
+        :key="color" 
+        :label="color" 
+        :color="color"
+        :options="args.options" 
+        name="color"
+        v-model="value" 
+      />
+    </URow>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UCheckboxGroup, URow },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      value: args.value,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <UCheckboxGroup 
+        v-bind="args"
+        v-for="size in sizes" 
+        :key="size" 
+        :label="size" 
+        :size="size"
+        :options="args.options" 
+        name="size"
+        v-model="value" 
+      />
+    </URow>
+  `,
+});
 
 export const disabled = DefaultTemplate.bind({});
-disabled.args = { disabled: true };
+disabled.args = { name: "Disabled", disabled: true };
 
 export const error = DefaultTemplate.bind({});
-error.args = { error: "some error" };
+error.args = { name: "Error", error: "some error" };
+
+export const Colors = ColorsTemplate.bind({});
+Colors.args = { name: "Colors" };
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = { name: "Sizes" };

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

@@ -144,8 +144,10 @@ const checkedItems = ref([]);
 const { labelAttrs, checkboxAttrs, listAttrs } = useAttrs(props);
 
 provide("setCheckboxGroupCheckedItems", (value) => (checkedItems.value = value));
-provide("checkboxGroupCheckedItems", checkedItems);
-provide("checkboxGroupName", props.name);
+provide("getCheckboxGroupCheckedItems", () => checkedItems.value);
+provide("getCheckboxGroupName", () => props.name);
+provide("getCheckboxGroupColor", () => props.color);
+provide("getCheckboxSize", () => props.size);
 
 watch(() => checkedItems.value.length, onChangeCheckedItems);
 watch(() => props.modelValue.length, onModelValueChange, { immediate: true });

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

@@ -1,7 +1,11 @@
 export default /*tw*/ {
-  label: "inline-flex",
+  label: {
+    wrapper: "inline-flex",
+    label: "cursor-pointer",
+  },
   radio: {
     base: `
+      cursor-pointer
       transition duration-100 ease-in-out
       border border-solid border-{color}-300 text-{color}-500
       hover:border-{color}-400

package/ui.form-radio/index.vue

@@ -15,10 +15,10 @@
       :disabled="disabled"
       :name="radioName"
       :value="radioValue"
-      :checked="checked"
+      :checked="checked || isChecked"
       :data-cy="dataCy"
       v-bind="radioAttrs"
-      @focus="onFocus"
+      @change="onChange"
     />
 
     <slot />
@@ -42,7 +42,21 @@ import { URadio } from "./constants";
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "URadio", inheritAttrs: false });
 
+const setRadioGroupSelectedItem = inject("setRadioGroupSelectedItem", null);
+const getRadioGroupName = inject("getRadioGroupName", null);
+const getRadioGroupColor = inject("getRadioGroupColor", null);
+const getRadioGroupSize = inject("getRadioGroupSize", null);
+const getRadioGroupSelectedItem = inject("getRadioGroupSelectedItem", null);
+
 const props = defineProps({
+  /**
+   * Native value attribute.
+   */
+  modelValue: {
+    type: [Boolean, String, Number, Array, Object],
+    default: null,
+  },
+
   /**
    * Native value attribute.
    */
@@ -146,15 +160,21 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
-const setRadioGroupSelectedItem = inject("setRadioGroupSelectedItem", null);
-const getRadioGroupName = inject("getRadioGroupName", null);
-const getRadioGroupColor = inject("getRadioGroupColor", null);
-const getRadioGroupSize = inject("getRadioGroupSize", null);
-
-const radioName = ref("");
+const localValue = ref("");
+const radioName = ref(null);
 const radioColor = ref(getRadioGroupColor ? getRadioGroupColor() : props.color);
 const radioSize = ref(getRadioGroupSize ? getRadioGroupSize() : props.size);
 
+const isChecked = computed(() => {
+  const currentValue = props.modelValue ?? localValue.value;
+
+  if (typeof currentValue !== "object") {
+    return currentValue === props.value;
+  }
+
+  return JSON.stringify(currentValue) === JSON.stringify(props.value);
+});
+
 const { radioAttrs, labelAttrs } = useAttrs(props, { radioColor, radioSize });
 
 const radioValue = computed(() => {
@@ -162,13 +182,18 @@ const radioValue = computed(() => {
 });
 
 onMounted(() => {
-  radioName.value = props.name || getRadioGroupName;
+  radioName.value = props.name || getRadioGroupName();
 });
 
 watchEffect(() => (radioColor.value = getRadioGroupColor ? getRadioGroupColor() : props.color));
 watchEffect(() => (radioSize.value = getRadioGroupSize ? getRadioGroupSize() : props.size));
+watchEffect(() => {
+  localValue.value = getRadioGroupSelectedItem ? getRadioGroupSelectedItem() : null;
+
+  emit("update:modelValue", props.value);
+});
 
-function onFocus(event) {
+function onChange(event) {
   setRadioGroupSelectedItem && setRadioGroupSelectedItem(props.value);
 
   emit("update:modelValue", event.target.value);

package/ui.form-radio-group/Docs.mdx

@@ -14,3 +14,4 @@ import defaultConfig from "./configs/default.config?raw"
 
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />
+

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

@@ -7,6 +7,7 @@ export default /*tw*/ {
         sm: "gap-2",
         md: "gap-3",
         lg: "gap-4",
+        xl: "gap-5",
       },
     },
   },

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

@@ -2,6 +2,8 @@ import { getArgTypes } from "../service.storybook";
 
 import URadioGroup from "../ui.form-radio-group";
 import URadio from "../ui.form-radio";
+import UAlert from "../ui.text-alert";
+import URow from "../ui.container-row";
 
 /**
  * The `URadioGroup` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-radio-group)
@@ -10,9 +12,16 @@ export default {
   id: "3160",
   title: "Form Inputs & Controls / Radio Group",
   component: URadioGroup,
+  parameters: {
+    docs: {
+      description: {
+        story: "Another description on the story, overriding the comments",
+      },
+    },
+  },
   args: {
     label: "Label",
-    value: "1",
+    value: "One",
     radios: [
       { name: "radio", label: "Radio 1", value: "1" },
       { name: "radio", label: "Radio 2", value: "2" },
@@ -25,21 +34,142 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { URadioGroup, URadio },
+  components: { URadioGroup, URadio, UAlert, URow },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      value: args.value,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <URadioGroup v-bind="args" v-model="value">
+        <template v-for="(radio,index) in args.radios" :key="index">
+          <URadio
+            v-bind="radio"
+          >
+          </URadio>
+        </template>
+      </URadioGroup>
+
+      <URow>
+        <UAlert color="red" v-if=args.isDefaultStory>
+          <b>NOTE:</b> <p>URadioGroup component have to have unique name attribute</p>
+        </UAlert>
+        <UAlert color="blue">
+          <p>Selected value: {{ value }}</p>
+        </UAlert>
+      </URow>
+    </URow>
+  `,
+});
+
+const OptionsTemplate = (args) => ({
+  components: { URadioGroup, URadio, UAlert, URow },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      value: args.value,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <URadioGroup v-bind="args" v-model="value" :options="args.radios" />
+  
+      <URow>
+        <UAlert color="blue">
+          <p>Selected value: {{ value }}</p>
+        </UAlert>
+      </URow>
+    </URow>
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { URadioGroup, URow },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      value: args.value,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <URadioGroup 
+        v-bind="args"
+        v-for="color in colors" 
+        :key="color" 
+        :label="color" 
+        :color="color"
+        :options="args.radios" 
+        name="color"
+        v-model="value" 
+      />
+    </URow>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { URadioGroup, URow },
   setup() {
     return { args };
   },
+  data() {
+    return {
+      value: args.value,
+      sizes: argTypes.size.options,
+    };
+  },
   template: `
-    <URadioGroup v-bind="args" v-model="args.value">
-      <template v-for="(radio,index) in args.radios" :key="index">
-        <URadio
-          v-bind="radio"
-        >
-        </URadio>
-      </template>
-    </URadioGroup>
+    <URow class="!flex-col">
+      <URadioGroup 
+        v-bind="args"
+        v-for="size in sizes" 
+        :key="size" 
+        :label="size" 
+        :size="size"
+        :options="args.radios" 
+        name="size"
+        v-model="value" 
+      />
+    </URow>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {};
+Default.args = {
+  name: "Default",
+  isDefaultStory: true,
+  radios: [
+    { name: "slotValues", label: "Boolean", value: false },
+    { name: "slotValues", label: "String", value: "One" },
+    { name: "slotValues", label: "Number", value: 3 },
+    { name: "slotValues", label: "Object", value: { key: "value" } },
+    { name: "slotValues", label: "Array", value: ["Array", 1] },
+  ],
+};
+
+export const Options = OptionsTemplate.bind({});
+Options.args = {
+  name: "Options",
+  radios: [
+    { name: "radioValues", label: "Boolean", value: false },
+    { name: "radioValues", label: "String", value: "One" },
+    { name: "radioValues", label: "Number", value: 3 },
+    { name: "radioValues", label: "Object", value: { key: "value" } },
+    { name: "radioValues", label: "Array", value: ["Array", 1] },
+  ],
+};
+
+export const Colors = ColorsTemplate.bind({});
+Colors.args = { name: "Colors" };
+
+export const Sizes = SizesTemplate.bind({});
+Sizes.args = { name: "Sizes" };

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

@@ -14,7 +14,7 @@
         <URadio
           v-for="(option, index) in options"
           :key="option.value"
-          :model-value="modelValue"
+          :model-value="selectedItem"
           :value="option.value"
           :label="option.label"
           :description="option.description"
@@ -143,6 +143,7 @@ const selectedItem = computed({
 });
 
 provide("setRadioGroupSelectedItem", (value) => (selectedItem.value = value));
+provide("getRadioGroupSelectedItem", () => selectedItem.value);
 provide("getRadioGroupName", () => props.name);
 provide("getRadioGroupColor", () => props.color);
 provide("getRadioGroupSize", () => props.size);

package/ui.form-select/configs/default.config.js

@@ -123,9 +123,8 @@ export default /*tw*/ {
     openDirection: "auto",
     labelKey: "label",
     valueKey: "id",
-    optionsLimit: 100,
-    maxHeight: 300,
-    optionHeight: 40,
+    optionsLimit: 0,
+    visibleOptions: 8,
     multiple: false,
     disabled: false,
     searchable: true,

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

@@ -222,12 +222,12 @@ Multiple.args = { modelValue: [] };
 export const openDirection = OpenDirectionsTemplate.bind({});
 openDirection.args = {};
 
-export const groupValues = GroupValuesTemplate.bind({});
-groupValues.args = {
+export const groupValue = GroupValuesTemplate.bind({});
+groupValue.args = {
   modelValue: "",
   modelValueMultiple: [],
-  groupValues: "libs",
-  groupLabel: "language",
+  groupValueKey: "libs",
+  groupLabelKey: "language",
   labelKey: "name",
   valueKey: "name",
   options: [

package/ui.form-select/index.vue

@@ -117,7 +117,6 @@
             :id="id"
             ref="searchInputRef"
             v-model="search"
-            :name="name"
             type="text"
             autocomplete="off"
             :spellcheck="false"
@@ -159,14 +158,13 @@
       </div>
 
       <UDropdownList
-        v-show="isOpen"
+        v-if="isOpen"
         ref="dropdownListRef"
         v-model="dropdownValue"
         :options="filteredOptions"
         :disabled="disabled"
         :size="size"
-        :max-height="optimizedHeight"
-        :option-height="optionHeight"
+        :visible-options="visibleOptions"
         :value-key="valueKey"
         :label-key="labelKey"
         :add-option="addOption"
@@ -318,8 +316,7 @@ const props = defineProps({
   /**
    * Set a name of the property containing the group label.
    */
-  // TODO: groupLabelKey ???
-  groupLabel: {
+  groupLabelKey: {
     type: String,
     default: "label",
   },
@@ -327,17 +324,7 @@ const props = defineProps({
   /**
    * Set a name of the property containing the group values.
    */
-  // TODO: groupValueKey ???
-  groupValues: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * name attribute to match optional label element.
-   */
-  // TODO: what is it?
-  name: {
+  groupValueKey: {
     type: String,
     default: "",
   },
@@ -351,18 +338,11 @@ const props = defineProps({
   },
 
   /**
-   * Sets maxHeight style value of the dropdown
+   * Amount of options you can see without scroll.
    */
-  // TODO: Should be in option amount not in pixels (option may have be different height)
-  maxHeight: {
-    type: Number,
-    default: UIService.get(defaultConfig, USelect).default.maxHeight,
-  },
-
-  // TODO: there is no desc
-  optionHeight: {
+  visibleOptions: {
     type: Number,
-    default: UIService.get(defaultConfig, USelect).default.optionHeight,
+    default: UIService.get(defaultConfig, USelect).default.visibleOptions,
   },
 
   /**
@@ -448,7 +428,6 @@ const { tm } = useLocale();
 const isOpen = ref(false);
 const preferredOpenDirection = ref(DIRECTION.bottom);
 const search = ref("");
-const optimizedHeight = ref(props.maxHeight);
 
 const dropdownListRef = ref(null);
 const wrapperRef = ref(null);
@@ -543,17 +522,17 @@ const filteredOptions = computed(() => {
   let options = props.multiple
     ? SelectService.removeSelectedValues(
         props.options,
-        props.groupValues,
+        props.groupValueKey,
         props.valueKey,
         props.modelValue,
       )
     : [...props.options];
 
-  options = props.groupValues
+  options = props.groupValueKey
     ? filterAndFlat(options, normalizedSearch, props.labelKey)
     : SelectService.filterOptions(options, normalizedSearch, props.labelKey);
 
-  return options.slice(0, props.optionsLimit);
+  return options.slice(0, props.optionsLimit || options.length);
 });
 
 const localValue = computed(() => {
@@ -561,14 +540,14 @@ const localValue = computed(() => {
     return SelectService.getCurrentOption(
       props.modelValue,
       props.options,
-      props.groupValues,
+      props.groupValueKey,
       props.valueKey,
     );
   }
 
   return props.modelValue
     ? props.modelValue.map((item) =>
-        SelectService.getCurrentOption(item, props.options, props.groupValues, props.valueKey),
+        SelectService.getCurrentOption(item, props.options, props.groupValueKey, props.valueKey),
       )
     : [];
 });
@@ -610,7 +589,6 @@ const onSearchChange = debounce(async function (query) {
 
 function getOptionLabel(option) {
   if (!option) return "";
-  if (option.$isLabel) return option.$groupLabel;
 
   return option[props.labelKey] || "";
 }
@@ -640,11 +618,11 @@ function filterAndFlat(options, search, label) {
     options,
     search,
     label,
-    props.groupValues,
-    props.groupLabel,
+    props.groupValueKey,
+    props.groupLabelKey,
   );
 
-  return SelectService.flattenOptions(filteredGroups, props.groupValues, props.groupLabel);
+  return SelectService.flattenOptions(filteredGroups, props.groupValueKey, props.groupLabelKey);
 }
 
 function toggle() {
@@ -681,25 +659,22 @@ function activate() {
 }
 
 function adjustPosition() {
-  if (typeof window === "undefined") return;
+  if (typeof window === "undefined" || !dropdownListRef.value) return;
 
+  const dropdownHeight = dropdownListRef.value.wrapperRef.getBoundingClientRect().height;
   const spaceAbove = wrapperRef.value.getBoundingClientRect().top;
   const spaceBelow = window.innerHeight - wrapperRef.value.getBoundingClientRect().bottom;
-  const hasEnoughSpaceBelow = spaceBelow > props.maxHeight;
+  const hasEnoughSpaceBelow = spaceBelow > dropdownHeight;
 
   if (hasEnoughSpaceBelow || spaceBelow > spaceAbove || props.openDirection === DIRECTION.bottom) {
     preferredOpenDirection.value = DIRECTION.bottom;
-    // TODO: magic numbers
-    optimizedHeight.value = Math.min(spaceBelow - 40, props.maxHeight);
   } else {
     preferredOpenDirection.value = DIRECTION.top;
-    optimizedHeight.value = Math.min(spaceAbove - 40, props.maxHeight);
   }
 }
 
 function removeElement(option, shouldClose = true) {
   if (props.disabled) return;
-  if (option.$isDisabled) return;
 
   if (props.noClear && !props.multiple) {
     deactivate();

package/ui.form-select/services/select.service.js

@@ -4,12 +4,15 @@ export default class SelectService {
       ? options
           .filter((option) => this.interpolateLabel(option, label).includes(search))
           .sort((a, b) => {
-            return this.interpolateLabel(a, label).length - this.interpolateLabel(b, label).length;
+            return (
+              this.interpolateLabel(a, label).indexOf(search) -
+              this.interpolateLabel(b, label).indexOf(search)
+            );
           })
       : options;
   }
 
-  static filterGroups(options, search, label, values, groupLabel) {
+  static filterGroups(options, search, label, values, groupLabelKey) {
     return options.map((group) => {
       if (!group[values]) {
         // eslint-disable-next-line no-console
@@ -22,20 +25,17 @@ export default class SelectService {
 
       return groupOptions.length
         ? {
-            [groupLabel]: group[groupLabel],
+            [groupLabelKey]: group[groupLabelKey],
             [values]: groupOptions,
           }
         : [];
     });
   }
 
-  static flattenOptions(options, values, label) {
+  static flattenOptions(options, values, groupLabelKey) {
     return options.reduce((prev, curr) => {
       if (curr[values] && curr[values].length) {
-        prev.push({
-          $groupLabel: curr[label],
-          $isLabel: true,
-        });
+        prev.push({ groupLabel: curr[groupLabelKey] });
 
         return prev.concat(curr[values]);
       }
@@ -51,25 +51,27 @@ export default class SelectService {
     return !opt;
   }
 
-  static removeEmptyGroups(options, groupValues) {
+  static removeEmptyGroups(options, groupValueKey) {
     return options.filter((group) => {
-      return Boolean(group[groupValues].filter((item) => !item.isSubGroup).length);
+      return Boolean(group[groupValueKey].filter((item) => !item.isSubGroup).length);
     });
   }
 
-  static removeSelectedValues(options, groupValues, valueKey, modelValue) {
-    if (!groupValues) {
+  static removeSelectedValues(options, groupValueKey, valueKey, modelValue) {
+    if (!groupValueKey) {
       return options.filter((option) => !modelValue.includes(option[valueKey]));
     }
 
     const availableValues = options.map((group) => {
       return {
         ...group,
-        [groupValues]: group[groupValues].filter((item) => !modelValue.includes(item[valueKey])),
+        [groupValueKey]: group[groupValueKey].filter(
+          (item) => !modelValue.includes(item[valueKey]),
+        ),
       };
     });
 
-    return this.removeEmptyGroups(availableValues, groupValues);
+    return this.removeEmptyGroups(availableValues, groupValueKey);
   }
 
   static interpolateLabel(option, label) {
@@ -78,17 +80,17 @@ export default class SelectService {
     return label ? option[label] : option;
   }
 
-  static getGroupOption(item, options, groupValues, valueKey) {
+  static getGroupOption(item, options, groupValueKey, valueKey) {
     const groupOptions = options.find((option) =>
-      option[groupValues]?.find((value) => value[valueKey] === item),
+      option[groupValueKey]?.find((value) => value[valueKey] === item),
     );
 
-    return groupOptions?.[groupValues].find((value) => value[valueKey] === item);
+    return groupOptions?.[groupValueKey].find((value) => value[valueKey] === item);
   }
 
-  static getCurrentOption(item, options, groupValues, valueKey) {
-    if (groupValues) {
-      return this.getGroupOption(item, options, groupValues, valueKey);
+  static getCurrentOption(item, options, groupValueKey, valueKey) {
+    if (groupValueKey) {
+      return this.getGroupOption(item, options, groupValueKey, valueKey);
     }
 
     const value = item[valueKey] || item;

package/ui.text-alert/configs/default.config.js

@@ -17,7 +17,7 @@ export default /*tw*/ {
     base: `
       flex gap-2 items-baseline
       font-normal leading-normal
-      [&_b]:font-bold [&_i]:italic [&_p]:font-normal
+      [&_b]:font-bold [&_b]:font-bold [&_i]:italic [&_em]:italic [&_p]:font-normal
       [&_a:not([class])]:underline [&_a:not([class])]:underline-offset-4
       [&_a:not([class]):hover]:no-underline [&_a:not([class])]:font-bold
       [&_ul]:font-normal [&_ol]:font-normal

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.184",
+  "version": "0.0.186",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -826,11 +826,6 @@
               "default": "\"\""
             }
           ],
-          "events": [
-            {
-              "name": "click"
-            }
-          ],
           "slots": [
             {
               "name": "left",
@@ -2853,22 +2848,13 @@
               "default": "md"
             },
             {
-              "name": "maxHeight",
-              "description": "List max height in pixels.",
+              "name": "visibleOptions",
+              "description": "Amount of options you can see without scroll.",
               "value": {
                 "kind": "expression",
                 "type": "number"
               }
             },
-            {
-              "name": "optionHeight",
-              "description": "List option height in pixels.",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "40"
-            },
             {
               "name": "id",
               "description": "@ignore: Generates unique element id.",
@@ -5796,6 +5782,15 @@
           "name": "URadio",
           "description": "",
           "attributes": [
+            {
+              "name": "modelValue",
+              "description": "Native value attribute.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean|string|number|array|object"
+              },
+              "default": "null"
+            },
             {
               "name": "value",
               "description": "Native value attribute.",
@@ -6207,7 +6202,7 @@
               "default": "id"
             },
             {
-              "name": "groupLabel",
+              "name": "groupLabelKey",
               "description": "Set a name of the property containing the group label.",
               "value": {
                 "kind": "expression",
@@ -6216,7 +6211,7 @@
               "default": "\"label\""
             },
             {
-              "name": "groupValues",
+              "name": "groupValueKey",
               "description": "Set a name of the property containing the group values.",
               "value": {
                 "kind": "expression",
@@ -6224,15 +6219,6 @@
               },
               "default": "\"\""
             },
-            {
-              "name": "name",
-              "description": "name attribute to match optional label element.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
             {
               "name": "optionsLimit",
               "description": "Number of options displayed in the dropdown.",
@@ -6240,24 +6226,16 @@
                 "kind": "expression",
                 "type": "number"
               },
-              "default": "100"
-            },
-            {
-              "name": "maxHeight",
-              "description": "Sets maxHeight style value of the dropdown",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "300"
+              "default": "0"
             },
             {
-              "name": "optionHeight",
+              "name": "visibleOptions",
+              "description": "Amount of options you can see without scroll.",
               "value": {
                 "kind": "expression",
                 "type": "number"
               },
-              "default": "40"
+              "default": "8"
             },
             {
               "name": "noClear",