vueless 0.0.146 → 0.0.148

package/package.json

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

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

@@ -1,16 +1,46 @@
+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 { label, 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 cvaLabel = cva({
+    base: label.base,
+    variants: label.variants,
+    compoundVariants: label.compoundVariants,
+  });
+
+  const itemsClasses = computed(() =>
+    cvaItems({
+      size: props.size,
+      separated: props.separated,
+    }),
+  );
+
+  const labelClasses = computed(() =>
+    cvaLabel({
+      block: props.block,
+    }),
+  );
+
+  const labelAttrs = getAttrs("label", { isComponent: true, classes: labelClasses });
+  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,18 +1,44 @@
 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: {
+    base: "flex flex-wrap",
+    variants: {
+      block: {
+        true: "w-full",
+      },
+    },
+  },
+  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="labelSize"
+    :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";
 
@@ -72,6 +83,31 @@ const props = defineProps({
     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.
    */
@@ -97,6 +133,22 @@ const props = defineProps({
     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.
    */
@@ -132,13 +184,26 @@ 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,
   set: (value) => emit("update:modelValue", value),
 });
 
+const labelSize = computed(() => {
+  const sizes = {
+    "2xs": "sm",
+    xs: "sm",
+    sm: "md",
+    md: "md",
+    lg: "lg",
+    xl: "lg",
+  };
+
+  return sizes[props.size];
+});
+
 const type = computed(() => {
   return props.multiple ? TYPE_CHECKBOX : TYPE_RADIO;
 });
@@ -150,10 +215,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));
   }
 }
 
@@ -165,6 +230,7 @@ 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);
 

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,6 +1,31 @@
 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-brand-700 !border-brand-700" },
+      { color: "grayscale", variant: "secondary", class: "!text-brand-700 !border-brand-700 !bg-brand-50 !bg-opacity-100" },
+      { color: "grayscale", variant: "thirdary", class: "!text-brand-700 !bg-brand-50" },
+      { color: "white", variant: "primary", class: "!text-brand-700 !border-brand-600 !bg-brand-50" },
+      { color: "white", variant: "secondary", class: "!text-brand-700 !border-brand-600 !bg-brand-50" },
+      { color: "white", variant: "thirdary", class: "!text-brand-700 !bg-brand-50" },
+    ],
+  },
   defaultVariants: {
     color: "brand",
     variant: "primary",

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

@@ -7,12 +7,12 @@
     :size="toValue(size)"
     :block="toValue(block)"
     :variant="toValue(variant)"
-    :color="color"
-    :pill="pill"
-    :filled="filled"
-    :square="square"
+    :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" />
@@ -25,8 +25,9 @@
         :name="name"
         :type="type"
         :value="value"
-        :disabled="disabled"
+        :disabled="toValue(disabled)"
         v-bind="inputAttrs"
+        @click.stop
       />
 
       <slot name="default" />
@@ -123,13 +124,16 @@ const color = inject("toggleColor", UIService.get(defaultConfig, UToggleItem).de
 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 { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
 
-const { buttonAttrs, inputAttrs } = useAttrs(props);
-
 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.146",
+  "version": "0.0.148",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -7038,6 +7038,33 @@
               },
               "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.",
@@ -7065,6 +7092,24 @@
               },
               "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.",