vueless 0.0.183 → 0.0.185

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.183",
+  "version": "0.0.185",
   "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.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-input-file/configs/default.config.js

@@ -11,8 +11,8 @@ export default /*tw*/ {
   },
   dropzoneWrapper: {
     base: `
-      size-auto w-full rounded border border-solid border-gray-300 bg-white
-      p-4 px-5 py-6 hover:border-gray-400
+      size-auto w-full rounded-lg border border-solid border-gray-300 bg-white
+      p-4 px-5 py-6 transition-all hover:border-gray-400
     `,
     variants: {
       error: {

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.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.183",
+  "version": "0.0.185",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -826,11 +826,6 @@
               "default": "\"\""
             }
           ],
-          "events": [
-            {
-              "name": "click"
-            }
-          ],
           "slots": [
             {
               "name": "left",
@@ -5796,6 +5791,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.",