vueless 0.0.145 → 0.0.147

package/package.json

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

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

@@ -1,16 +1,34 @@
+import { computed } from "vue";
 import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { items } = config.value;
 
-  const wrapperAttrs = getAttrs("wrapper");
-  const toggleItemAttrs = getAttrs("toggleItem", { isComponent: true });
+  const cvaItems = cva({
+    base: items.base,
+    variants: items.variants,
+    compoundVariants: items.compoundVariants,
+  });
+
+  const itemsClasses = computed(() =>
+    cvaItems({
+      size: props.size,
+      separated: props.separated,
+    }),
+  );
+
+  const labelAttrs = getAttrs("label", { isComponent: true });
+  const itemsAttrs = getAttrs("items", { classes: itemsClasses });
+  const itemAttrs = getAttrs("item", { isComponent: true });
 
   return {
     config,
-    wrapperAttrs,
-    toggleItemAttrs,
+    labelAttrs,
+    itemsAttrs,
+    itemAttrs,
   };
 }

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

@@ -1,14 +1,37 @@
 export default /*tw*/ {
-  wrapper: `
-    flex gap-px
-    [&>*:first-child]:rounded-l-lg [&>*:first-child]:rounded-r-none
-    [&>*:last-child]:rounded-r-lg [&>*:last-child]:rounded-l-none
-  `,
-  toggleItem: "",
+  label: "",
+  items: {
+    base: "flex flex-wrap",
+    variants: {
+      size: {
+        "2xs": "gap-2",
+        xs: "gap-3",
+        sm: "gap-4",
+        md: "gap-5",
+        lg: "gap-6",
+        xl: "gap-7",
+      },
+      separated: {
+        false: `
+          gap-px flex-nowrap
+          [&>*:first-child]:rounded-l-lg [&>*:first-child]:rounded-r-none
+          [&>*:last-child]:rounded-r-lg [&>*:last-child]:rounded-l-none
+        `,
+      },
+    },
+  },
+  item: "",
   defaultVariants: {
+    color: "brand",
     variant: "primary",
+    labelAlign: "top",
     size: "md",
     block: false,
+    pill: false,
+    square: false,
+    filled: false,
+    disabled: false,
     multiple: false,
+    separated: false,
   },
 };

package/ui.button-toggle/index.vue

@@ -1,24 +1,35 @@
 <template>
-  <div :data-cy="dataCy" v-bind="wrapperAttrs">
-    <!-- @slot Use it to add UToggleItem directly. -->
-    <slot>
-      <UToggleItem
-        v-for="(item, index) in options"
-        :key="item.value"
-        :name="name"
-        :model-value="item.value"
-        :value="item.value"
-        :label="item.label"
-        :data-cy="`${dataCy}-item-${index}`"
-        v-bind="toggleItemAttrs"
-      />
-    </slot>
-  </div>
+  <ULabel
+    :size="size"
+    :label="label"
+    :description="description"
+    :align="labelAlign"
+    :disabled="disabled"
+    :data-cy="dataCy"
+    v-bind="labelAttrs"
+  >
+    <div v-bind="itemsAttrs">
+      <!-- @slot Use it to add UToggleItem directly. -->
+      <slot>
+        <UToggleItem
+          v-for="(item, index) in options"
+          :key="item.value"
+          :name="name"
+          :model-value="item.value"
+          :value="item.value"
+          :label="item.label"
+          :data-cy="`${dataCy}-item-${index}`"
+          v-bind="itemAttrs"
+        />
+      </slot>
+    </div>
+  </ULabel>
 </template>
 
 <script setup>
 import { computed, provide, readonly } from "vue";
 
+import ULabel from "../ui.form-label";
 import UToggleItem from "../ui.button-toggle-item";
 import UIService from "../service.ui";
 
@@ -39,7 +50,7 @@ const props = defineProps({
   },
 
   /**
-   * Toggle variants.
+   * Toggle variant.
    * @values primary, secondary, thirdary
    */
   variant: {
@@ -65,13 +76,38 @@ const props = defineProps({
 
   /**
    * Toggle size.
-   * @values xs, sm, md, lg
+   * @values 2xs, xs, sm, md, lg, xl
    */
   size: {
     type: String,
     default: UIService.get(defaultConfig, UToggle).default.size,
   },
 
+  /**
+   * Toggle label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Toggle description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Label placement.
+   * @values top, topInside, topWithDesc, bottom, left, right
+   */
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UToggle).default.labelAlign,
+  },
+
   /**
    * Make the toggle fill the width with its container.
    */
@@ -88,6 +124,55 @@ 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,
+  },
+
+  /**
+   * Separate toggle items.
+   */
+  separated: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UToggle).default.separated,
+  },
+
+  /**
+   * Make toggle disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UToggle).default.disabled,
+  },
+
+  /**
+   * 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.
    */
@@ -99,7 +184,7 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
-const { wrapperAttrs, toggleItemAttrs } = useAttrs(props);
+const { labelAttrs, itemsAttrs, itemAttrs } = useAttrs(props);
 
 const selectedValue = computed({
   get: () => props.modelValue,
@@ -117,10 +202,10 @@ function updateSelectedValue(value, checked) {
     return;
   }
 
-  if (!checked) {
-    selectedValue.value = selectedValue.value.filter((item) => item !== value);
-  } else {
+  if (checked) {
     selectedValue.value.push(value);
+  } else {
+    selectedValue.value = selectedValue.value.filter((item) => String(item) !== String(value));
   }
 }
 
@@ -129,6 +214,13 @@ 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("toggleSeparated", () => props.separated);
+provide("togglePill", () => props.pill);
+provide("toggleSquare", () => props.square);
+
 provide("toggleSelectedValue", {
   selectedValue: readonly(selectedValue),
   updateSelectedValue,

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

@@ -1,13 +1,55 @@
+import { computed, toValue } from "vue";
+import { cx, cva } from "../../service.ui";
 import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props) {
-  const { getAttrs } = useUI(defaultConfig, () => props.config);
+export function useAttrs(props, { selectedValue, separated, variant, color }) {
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { button, selected } = config.value;
 
-  const buttonAttrs = getAttrs("button");
+  const cvaButton = cva({
+    base: button.base,
+    variants: button.variants,
+    compoundVariants: button.compoundVariants,
+  });
+
+  const buttonClasses = computed(() =>
+    cvaButton({
+      separated: toValue(separated),
+    }),
+  );
+
+  const cvaSelected = cva({
+    base: selected.base,
+    variants: selected.variants,
+    compoundVariants: selected.compoundVariants,
+  });
+
+  const selectedClasses = computed(() =>
+    setColor(
+      cvaSelected({
+        color: toValue(color),
+        variant: toValue(variant),
+      }),
+      toValue(color),
+    ),
+  );
+
+  const buttonAttrsRaw = getAttrs("button", { isComponent: true, classes: buttonClasses });
   const inputAttrs = getAttrs("input");
 
+  const buttonAttrs = computed(() => {
+    const isSelected = Array.isArray(selectedValue.value)
+      ? selectedValue.value?.includes(props.value)
+      : selectedValue.value === props.value;
+
+    return {
+      ...buttonAttrsRaw.value,
+      class: cx([buttonAttrsRaw.value.class, isSelected && selectedClasses.value]),
+    };
+  });
+
   return {
     buttonAttrs,
     inputAttrs,

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

@@ -1,11 +1,40 @@
 export default /*tw*/ {
-  button: "rounded-none",
-  input: "p-0 m-0 size-0 invisible peer absolute",
+  button: {
+    base: "",
+    variants: {
+      separated: {
+        false: "rounded-none",
+      },
+    },
+  },
+  input: "p-0 m-0 size-0 invisible absolute",
+  selected: {
+    base: "",
+    variants: {
+      variant: {
+        primary: "!bg-{color}-800 !border-{color}-800",
+        secondary: "!text-{color}-800 !border-{color}-800 bg-{color}-800 bg-opacity-10",
+        thirdary: "!text-{color}-800 !bg-{color}-800 !bg-opacity-10",
+      },
+    },
+    compoundVariants: [
+      { color: "grayscale", variant: "primary", class: "!bg-gray-700 !border-gray-700" },
+      { color: "grayscale", variant: "secondary", class: "!text-gray-700 !border-gray-700 !bg-gray-700 !bg-opacity-15" },
+      { color: "grayscale", variant: "thirdary", class: "!text-gray-700 !bg-gray-700" },
+      { color: "white", variant: "primary", class: "!text-gray-700 !border-gray-100 !bg-gray-100" },
+      { color: "white", variant: "secondary", class: "!text-gray-700 !border-gray-400" },
+      { color: "white", variant: "thirdary", class: "!text-gray-700 !bg-white" },
+    ],
+  },
   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,8 +7,12 @@
     :size="toValue(size)"
     :block="toValue(block)"
     :variant="toValue(variant)"
+    :color="toValue(color)"
+    :pill="toValue(pill)"
+    :filled="toValue(filled)"
+    :square="toValue(square)"
     v-bind="buttonAttrs"
-    @click="onClickSetValue"
+    @click.stop="onClickSetValue"
   >
     <template #left>
       <slot name="left" />
@@ -21,8 +25,9 @@
         :name="name"
         :type="type"
         :value="value"
-        :disabled="disabled"
+        :disabled="toValue(disabled)"
         v-bind="inputAttrs"
+        @click.stop
       />
 
       <slot name="default" />
@@ -115,12 +120,20 @@ 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 { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
+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 separated = inject("toggleSeparated", false);
+// eslint-disable-next-line vue/no-dupe-keys, prettier/prettier
+const disabled = inject("toggleDisabled", UIService.get(defaultConfig, UToggleItem).default.disabled);
 
-const { buttonAttrs, inputAttrs } = useAttrs(props);
+const { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
 
 const selectedItem = ref("");
 
+const { buttonAttrs, inputAttrs } = useAttrs(props, { selectedValue, separated, variant, color });
+
 onMounted(() => {
   if (type.value === TYPE_RADIO) {
     selectedItem.value = selectedValue ? selectedValue.value : selectedItem.value;

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

@@ -1,8 +1,8 @@
+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, setColor } = useUI(defaultConfig, () => props.config);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.145",
+  "version": "0.0.147",
   "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,10 +7034,37 @@
               "description": "Toggle size.",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg'"
+                "type": "'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
+            {
+              "name": "label",
+              "description": "Toggle label.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "description",
+              "description": "Toggle description.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "labelAlign",
+              "description": "Label placement.",
+              "value": {
+                "kind": "expression",
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+              },
+              "default": "top"
+            },
             {
               "name": "block",
               "description": "Make the toggle fill the width with its container.",
@@ -7056,6 +7083,60 @@
               },
               "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": "separated",
+              "description": "Separate toggle items.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "disabled",
+              "description": "Make toggle disabled.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "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.",