vueless 0.0.105 → 0.0.106

package/package.json

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

package/ui.button-toggle/configs/default.config.js

@@ -6,6 +6,7 @@ export default /*tw*/ {
   `,
   toggleItem: "",
   defaultVariants: {
+    variant: "primary",
     size: "md",
     block: false,
     multiple: false,

package/ui.button-toggle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapperRef" :data-cy="dataCy" v-bind="wrapperAttrs">
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
     <slot>
       <UToggleItem
         v-for="(item, index) in options"
@@ -16,7 +16,7 @@
 </template>
 
 <script setup>
-import { computed, provide, readonly, ref } from "vue";
+import { computed, provide, readonly } from "vue";
 
 import UToggleItem from "../ui.button-toggle-item";
 import UIService from "../service.ui";
@@ -30,39 +30,40 @@ defineOptions({ name: "UToggle", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set buttons name.
+   * Selected value.
    */
-  name: {
-    type: String,
-    required: true,
+  modelValue: {
+    type: [String, Number, Array],
+    default: () => (!this.multiple ? "" : []),
   },
 
   /**
-   * Set data for buttons.
+   * Toggle variants.
+   * @values primary, secondary, thirdary
    */
-  options: {
-    type: Array,
-    default: () => [],
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UToggle).default.variant,
   },
 
   /**
-   * Set current value.
+   * Toggle item options.
    */
-  modelValue: {
-    type: [String, Number, Array],
-    default: () => (!this.multiple ? "" : []),
+  options: {
+    type: Array,
+    default: () => [],
   },
 
   /**
-   * Allow to select a few options and return them as array.
+   * Toggle name.
    */
-  multiple: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UToggle).default.multiple,
+  name: {
+    type: String,
+    required: true,
   },
 
   /**
-   * The size of the buttons.
+   * Toggle size.
    * @values xs, sm, md, lg
    */
   size: {
@@ -78,6 +79,14 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UToggle).default.block,
   },
 
+  /**
+   * Allow selecting a few options and return them as an array.
+   */
+  multiple: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UToggle).default.multiple,
+  },
+
   /**
    * Sets data-cy attribute for automated testing.
    */
@@ -91,14 +100,14 @@ const emit = defineEmits(["update:modelValue"]);
 
 const { wrapperAttrs, toggleItemAttrs } = useAttrs(props);
 
-const wrapperRef = ref();
-
 const selectedValue = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
 });
 
-const type = computed(() => (props.multiple ? TYPE_CHECKBOX : TYPE_RADIO));
+const type = computed(() => {
+  return props.multiple ? TYPE_CHECKBOX : TYPE_RADIO;
+});
 
 function updateSelectedValue(value, checked) {
   if (type.value === TYPE_RADIO) {
@@ -114,14 +123,11 @@ function updateSelectedValue(value, checked) {
   }
 }
 
+provide("toggleType", readonly(type));
 provide("toggleName", () => props.name);
-
 provide("toggleSize", () => props.size);
-
 provide("toggleBlock", () => props.block);
-
-provide("toggleType", readonly(type));
-
+provide("toggleVariant", () => props.variant);
 provide("toggleSelectedValue", {
   selectedValue: readonly(selectedValue),
   updateSelectedValue,

package/ui.button-toggle-item/composables/attrs.composable.js

@@ -4,7 +4,7 @@ import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props, { size, block }) {
+export function useAttrs(props, { size, block, variant }) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
   const { label, labelText, wrapper } = config.value;
 
@@ -33,7 +33,7 @@ export function useAttrs(props, { size, block }) {
   const labelClasses = computed(() =>
     cvaLabel({
       size: toValue(size),
-      variant: props.variant,
+      variant: toValue(variant),
       disabled: props.disabled,
     }),
   );

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

@@ -3,10 +3,10 @@
     <input
       :id="id"
       v-model="selectedItem"
-      :disabled="disabled"
-      :value="value"
       :name="name"
       :type="type"
+      :value="value"
+      :disabled="disabled"
       v-bind="inputAttrs"
     />
     <label tabindex="0" :for="id" v-bind="labelAttrs" @click="onClickSetValue">
@@ -42,7 +42,7 @@ defineOptions({ name: "UToggleItem", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set data for button.
+   * Selected value.
    */
   modelValue: {
     type: [String, Number, Array],
@@ -50,7 +50,7 @@ const props = defineProps({
   },
 
   /**
-   * Set value for checkbox state.
+   * Value for checkbox state.
    */
   value: {
     type: [String, Number],
@@ -58,7 +58,7 @@ const props = defineProps({
   },
 
   /**
-   * Set label.
+   * Toggle item label.
    */
   label: {
     type: String,
@@ -66,22 +66,13 @@ const props = defineProps({
   },
 
   /**
-   * Make item disabled.
+   * Make toggle item disabled.
    */
   disabled: {
     type: Boolean,
     default: UIService.get(defaultConfig, UToggleItem).default.disabled,
   },
 
-  /**
-   * The variant of the button.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: UIService.get(defaultConfig, UToggleItem).default.variant,
-  },
-
   /**
    * Generates unique element id.
    * @ignore
@@ -92,7 +83,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets component ui config object.
+   * Component ui config object.
    */
   config: {
     type: Object,
@@ -100,7 +91,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,
@@ -110,15 +101,17 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
+const name = inject("toggleName", () => "toggle");
 const type = inject("toggleType", UIService.get(defaultConfig, UToggleItem).default.type);
-const name = inject("toggleName", "toggle");
 const size = inject("toggleSize", UIService.get(defaultConfig, UToggleItem).default.size);
 const block = inject("toggleBlock", UIService.get(defaultConfig, UToggleItem).default.block);
+const variant = inject("toggleVariant", UIService.get(defaultConfig, UToggleItem).default.variant);
 const { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
 
 const { wrapperAttrs, labelTextAttrs, labelAttrs, inputAttrs, hasSlotContent } = useAttrs(props, {
   size,
   block,
+  variant,
 });
 
 const selectedItem = ref("");

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.105",
+  "version": "0.0.106",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -6952,44 +6952,44 @@
           "description": "",
           "attributes": [
             {
-              "name": "name",
-              "required": true,
-              "description": "Set buttons name.",
+              "name": "modelValue",
+              "description": "Selected value.",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
+                "type": "string|number|array"
+              },
+              "default": "() => (!this.multiple ? \"\" : [])"
             },
             {
-              "name": "options",
-              "description": "Set data for buttons.",
+              "name": "variant",
+              "description": "Toggle variants.",
               "value": {
                 "kind": "expression",
-                "type": "array"
+                "type": "'primary' | 'secondary' | 'thirdary'"
               },
-              "default": "[]"
+              "default": "primary"
             },
             {
-              "name": "modelValue",
-              "description": "Set current value.",
+              "name": "options",
+              "description": "Toggle item options.",
               "value": {
                 "kind": "expression",
-                "type": "string|number|array"
+                "type": "array"
               },
-              "default": "() => (!this.multiple ? \"\" : [])"
+              "default": "[]"
             },
             {
-              "name": "multiple",
-              "description": "Allow to select a few options and return them as array.",
+              "name": "name",
+              "required": true,
+              "description": "Toggle name.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "string"
+              }
             },
             {
               "name": "size",
-              "description": "The size of the buttons.",
+              "description": "Toggle size.",
               "value": {
                 "kind": "expression",
                 "type": "'xs' | 'sm' | 'md' | 'lg'"
@@ -7005,6 +7005,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "multiple",
+              "description": "Allow selecting a few options and return them as an array.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "dataCy",
               "description": "Sets data-cy attribute for automated testing.",
@@ -7036,7 +7045,7 @@
           "attributes": [
             {
               "name": "modelValue",
-              "description": "Set data for button.",
+              "description": "Selected value.",
               "value": {
                 "kind": "expression",
                 "type": "string|number|array"
@@ -7045,7 +7054,7 @@
             },
             {
               "name": "value",
-              "description": "Set value for checkbox state.",
+              "description": "Value for checkbox state.",
               "value": {
                 "kind": "expression",
                 "type": "string|number"
@@ -7054,7 +7063,7 @@
             },
             {
               "name": "label",
-              "description": "Set label.",
+              "description": "Toggle item label.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -7063,22 +7072,13 @@
             },
             {
               "name": "disabled",
-              "description": "Make item disabled.",
+              "description": "Make toggle item disabled.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
             },
-            {
-              "name": "variant",
-              "description": "The variant of the button.",
-              "value": {
-                "kind": "expression",
-                "type": "'primary' | 'secondary' | 'thirdary'"
-              },
-              "default": "primary"
-            },
             {
               "name": "id",
               "description": "@ignore: Generates unique element id.",
@@ -7090,7 +7090,7 @@
             },
             {
               "name": "config",
-              "description": "Sets component ui config object.",
+              "description": "Component ui config object.",
               "value": {
                 "kind": "expression",
                 "type": "object"
@@ -7099,7 +7099,7 @@
             },
             {
               "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
+              "description": "Data-cy attribute for automated testing.",
               "value": {
                 "kind": "expression",
                 "type": "string"