vueless 0.0.145 → 0.0.146

package/package.json

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

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

@@ -6,9 +6,13 @@ export default /*tw*/ {
   `,
   toggleItem: "",
   defaultVariants: {
+    color: "brand",
     variant: "primary",
     size: "md",
     block: false,
+    pill: false,
+    square: false,
+    filled: false,
     multiple: false,
   },
 };

package/ui.button-toggle/index.vue

@@ -39,7 +39,7 @@ const props = defineProps({
   },
 
   /**
-   * Toggle variants.
+   * Toggle variant.
    * @values primary, secondary, thirdary
    */
   variant: {
@@ -65,7 +65,7 @@ const props = defineProps({
 
   /**
    * Toggle size.
-   * @values xs, sm, md, lg
+   * @values 2xs, xs, sm, md, lg, xl
    */
   size: {
     type: String,
@@ -88,6 +88,39 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UToggle).default.multiple,
   },
 
+  /**
+   * Button color.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
+   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, UToggle).default.color,
+  },
+
+  /**
+   * Fill the background for thirdary variant.
+   */
+  filled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UToggle).default.filled,
+  },
+
+  /**
+   * Set button corners rounded.
+   */
+  pill: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UToggle).default.pill,
+  },
+
+  /**
+   * Set the same paddings for the button.
+   */
+  square: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UToggle).default.square,
+  },
+
   /**
    * Sets data-cy attribute for automated testing.
    */
@@ -129,6 +162,12 @@ provide("toggleName", () => props.name);
 provide("toggleSize", () => props.size);
 provide("toggleBlock", () => props.block);
 provide("toggleVariant", () => props.variant);
+provide("toggleColor", () => props.color);
+provide("toggleFilled", () => props.filled);
+provide("toggleDisabled", () => props.disabled);
+provide("togglePill", () => props.pill);
+provide("toggleSquare", () => props.square);
+
 provide("toggleSelectedValue", {
   selectedValue: readonly(selectedValue),
   updateSelectedValue,

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

@@ -2,10 +2,14 @@ export default /*tw*/ {
   button: "rounded-none",
   input: "p-0 m-0 size-0 invisible peer absolute",
   defaultVariants: {
+    color: "brand",
     variant: "primary",
     type: "radio",
     size: "md",
     block: false,
+    pill: false,
+    square: false,
+    filled: false,
     disabled: false,
   },
 };

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

@@ -7,6 +7,10 @@
     :size="toValue(size)"
     :block="toValue(block)"
     :variant="toValue(variant)"
+    :color="color"
+    :pill="pill"
+    :filled="filled"
+    :square="square"
     v-bind="buttonAttrs"
     @click="onClickSetValue"
   >
@@ -115,6 +119,11 @@ const type = inject("toggleType", UIService.get(defaultConfig, UToggleItem).defa
 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 color = inject("toggleColor", UIService.get(defaultConfig, UToggleItem).default.color);
+const filled = inject("toggleFilled", UIService.get(defaultConfig, UToggleItem).default.filled);
+const pill = inject("togglePill", UIService.get(defaultConfig, UToggleItem).default.pill);
+const square = inject("toggleSquare", UIService.get(defaultConfig, UToggleItem).default.square);
+
 const { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
 
 const { buttonAttrs, inputAttrs } = useAttrs(props);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.145",
+  "version": "0.0.146",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -7004,7 +7004,7 @@
             },
             {
               "name": "variant",
-              "description": "Toggle variants.",
+              "description": "Toggle variant.",
               "value": {
                 "kind": "expression",
                 "type": "'primary' | 'secondary' | 'thirdary'"
@@ -7034,7 +7034,7 @@
               "description": "Toggle size.",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg'"
+                "type": "'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -7056,6 +7056,42 @@
               },
               "default": "false"
             },
+            {
+              "name": "color",
+              "description": "Button color.",
+              "value": {
+                "kind": "expression",
+                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
+              },
+              "default": "brand"
+            },
+            {
+              "name": "filled",
+              "description": "Fill the background for thirdary variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "pill",
+              "description": "Set button corners rounded.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "square",
+              "description": "Set the same paddings for the button.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "dataCy",
               "description": "Sets data-cy attribute for automated testing.",