vueless 0.0.613 → 0.0.614

package/composables/useUI.ts

@@ -158,10 +158,10 @@ export default function useUI<T>(
       vuelessAttrs.value = {
         ...commonAttrs,
         class: cx([...extendsClasses, toValue(classes)]),
-        config: merge({}, configAttr, extendsConfigAttr),
+        config: merge({}, extendsConfigAttr, configAttr),
         ...getDefaults({
-          ...(configAttr.defaults || {}),
           ...(extendsConfigAttr.defaults || {}),
+          ...(configAttr.defaults || {}),
         }),
       };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.613",
+  "version": "0.0.614",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.button-toggle/UToggle.vue

@@ -73,9 +73,8 @@ provide("getToggleSize", () => props.size);
 provide("getToggleRound", () => props.round);
 provide("getToggleBlock", () => props.block);
 provide("getToggleSquare", () => props.square);
-provide("getToggleVariant", () => props.variant);
 provide("getToggleDisabled", () => props.disabled);
-provide("getToggleSeparated", () => props.separated);
+provide("getToggleSplit", () => props.split);
 
 provide("toggleSelectedValue", {
   selectedValue: readonly(selectedValue),
@@ -109,7 +108,7 @@ const { toggleLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(defaultConfig)
           :name="name"
           :model-value="item.value"
           :value="item.value"
-          :disabled="disabled"
+          :disabled="disabled || item.disabled"
           :label="item.label"
           v-bind="itemAttrs"
           :data-test="`${dataTest}-item-${index}`"

package/ui.button-toggle/config.ts

@@ -18,36 +18,35 @@ export default /*tw*/ {
         lg: "gap-3",
         xl: "gap-3",
       },
-      separated: {
+      split: {
         true: "flex flex-wrap",
         false: `
-          flex flex-nowrap -space-x-px gap-0 rounded-dynamic transition w-fit
-          [&>:first-child]:rounded-dynamic [&>:first-child]:rounded-r-none
-          [&>:last-child]:rounded-dynamic [&>:last-child]:rounded-l-none
-          [&>:first-child>*>*]:rounded-dynamic [&>:first-child>*>*]:rounded-r-none
-          [&>:last-child>*>*]:rounded-dynamic [&>:last-child>*>*]:rounded-l-none
+          p-1 gap-1 flex flex-nowrap w-fit transition
+          border border-gray-300 rounded-dynamic
+          hover:border-gray-400 hover:focus-within:border-brand-500 focus-within:border-brand-500
           focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
         `,
       },
+      disabled: {
+        true: "pointer-events-none",
+      },
       block: {
         true: "w-full flex-nowrap",
       },
+      round: {
+        true: "rounded-full",
+      },
     },
-    compoundVariants: [
-      { separated: false, variant: "thirdary", class: "space-x-px" },
-      { separated: false, multiple: true, class: "space-x-px" },
-    ],
   },
   item: "{UToggleItem}",
   defaults: {
-    variant: "primary",
     labelAlign: "top",
     size: "md",
+    split: false,
     block: false,
     round: false,
     square: false,
     disabled: false,
     multiple: false,
-    separated: false,
   },
 };

package/ui.button-toggle/storybook/stories.ts

@@ -16,7 +16,7 @@ import type { Props } from "../types.ts";
 
 interface UToggleArgs extends Props {
   slotTemplate?: string;
-  enum: "variant" | "size";
+  enum: "size";
 }
 
 export default {
@@ -109,41 +109,34 @@ Sizes.args = {
   enum: "size",
 };
 
-export const Variants = EnumVariantTemplate.bind({});
-Variants.args = {
-  name: "sizeTemplate",
-  enum: "variant",
-};
-
 export const Multiple = DefaultTemplate.bind({});
 Multiple.args = { name: "multipleTemplate", multiple: true };
 
 export const Block = DefaultTemplate.bind({});
 Block.args = { name: "block", block: true };
 
-export const Separated = DefaultTemplate.bind({});
-Separated.args = { name: "separated", separated: true };
+export const Split = DefaultTemplate.bind({});
+Split.args = { name: "split", split: true };
 
 export const Round = DefaultTemplate.bind({});
-Round.args = { name: "round", round: true, separated: true };
+Round.args = { name: "round", round: true, split: true };
 
 export const Square = DefaultTemplate.bind({});
 Square.args = {
   name: "square",
-  variant: "secondary",
   square: true,
   slotTemplate: `
     <template #default>
       <UToggleItem value="1">
-        <UIcon name="star" />
+        <UIcon name="star" color="inherit" />
       </UToggleItem>
 
       <UToggleItem value="2" >
-        <UIcon name="add" />
+        <UIcon name="add" color="inherit" />
       </UToggleItem>
 
       <UToggleItem value="3">
-        <UIcon name="timer" />
+        <UIcon name="timer" color="inherit" />
       </UToggleItem>
     </template>
   `,

package/ui.button-toggle/types.ts

@@ -9,6 +9,7 @@ export type LabelSize = "sm" | "md" | "lg";
 export interface UToggleOption {
   value: string | number;
   label: string;
+  disabled?: boolean;
 }
 
 export interface Props {
@@ -22,11 +23,6 @@ export interface Props {
    */
   options?: UToggleOption[];
 
-  /**
-   * Toggle variant.
-   */
-  variant?: "primary" | "secondary" | "thirdary";
-
   /**
    * Toggle size.
    */
@@ -58,9 +54,9 @@ export interface Props {
   multiple?: boolean;
 
   /**
-   * Separate toggle items.
+   * Show items without a grouping border.
    */
-  separated?: boolean;
+  split?: boolean;
 
   /**
    * Make toggle disabled.

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref, useId, toValue } from "vue";
+import { computed, inject, onMounted, ref, useId } from "vue";
 
 import UButton from "../ui.button/UButton.vue";
 
@@ -48,10 +48,7 @@ const getToggleBlock = inject<() => boolean>("getToggleBlock", () =>
 const getToggleSquare = inject<() => boolean>("getToggleSquare", () =>
   getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).square || false
 );
-const getToggleVariant = inject<string>("getToggleVariant",
-  getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).variant || "secondary"
-);
-const getToggleSeparated = inject<boolean>("getToggleSeparated", true);
+const getToggleSplit = inject<() => boolean>("getToggleSplit", () => true);
 const getToggleDisabled = inject<() => boolean>("getToggleDisabled", () =>
   props.disabled || getDefaults<ToggleInjectValues, Config>(defaultConfig, COMPONENT_NAME).disabled || false
 );
@@ -99,29 +96,30 @@ function onClickSetValue() {
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
-  variant: toValue(getToggleVariant),
-  separated: toValue(getToggleSeparated),
   /* component state, not a props */
   selected: isSelected.value,
 }));
 
-const { toggleButtonAttrs, toggleInputAttrs } = useUI<Config>(defaultConfig, mutatedProps);
+const { toggleButtonAttrs, toggleButtonActiveAttrs, toggleInputAttrs } = useUI<Config>(
+  defaultConfig,
+  mutatedProps,
+);
 </script>
 
 <template>
   <UButton
+    :label="label"
     tabindex="0"
+    color="brand"
     :for="elementId"
-    :no-ring="!getToggleSeparated"
-    color="grayscale"
-    variant="secondary"
-    :label="label"
+    :filled="getToggleSplit()"
+    :no-ring="!getToggleSplit()"
     :size="getToggleSize()"
     :round="getToggleRound()"
     :block="getToggleBlock()"
     :square="getToggleSquare()"
-    :disabled="getToggleDisabled()"
-    v-bind="toggleButtonAttrs"
+    :disabled="getToggleDisabled() || disabled"
+    v-bind="isSelected ? toggleButtonActiveAttrs : toggleButtonAttrs"
     @click="onClickSetValue"
   >
     <template #left>

package/ui.button-toggle-item/config.ts

@@ -1,32 +1,15 @@
 export default /*tw*/ {
   toggleButton: {
-    base: `
-      {UButton}
-      border-gray-300 font-normal
-      hover:text-brand-600 hover:border-brand-600 hover:relative hover:z-10
-      focus:text-brand-600 focus:border-brand-600 focus:relative focus:z-10 focus:ring-brand-700/15
-      focus-within:ring-brand-700/15 active:text-brand-700 active:border-brand-700 active:relative
-      active:z-10 disabled:z-0
-    `,
-    variants: {
-      separated: {
-        false: "rounded-none focus:ring-0",
-      },
-      selected: {
-        false: "relative disabled:z-10",
-      },
-      variant: {
-        thirdary: `
-          !text-gray-900 !border-transparent bg-brand-600/10
-          hover:bg-brand-600/15 focus:bg-brand-600/15 active:bg-brand-600/20
-        `,
-      },
+    base: "{UButton} font-normal",
+    defaults: {
+      variant: "thirdary",
+    },
+  },
+  toggleButtonActive: {
+    base: "{UButton} {>toggleButton}",
+    defaults: {
+      variant: "primary",
     },
-    compoundVariants: [
-      { selected: true, variant: "primary", class: "!text-white bg-brand-600 !border-brand-600" },
-      { selected: true, variant: "secondary", class: "text-brand-600 border-brand-600 bg-brand-600/10" },
-      { selected: true, variant: "thirdary", class: "!bg-brand-600/20" },
-    ],
   },
   toggleInput: "p-0 m-0 size-0 invisible absolute",
   defaults: {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.613",
+  "version": "0.0.614",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -11566,21 +11566,6 @@
               },
               "default": "() => []"
             },
-            {
-              "name": "variant",
-              "required": false,
-              "description": "Toggle variant.",
-              "enum": [
-                "primary",
-                "secondary",
-                "thirdary"
-              ],
-              "value": {
-                "kind": "expression",
-                "type": "union"
-              },
-              "default": "primary"
-            },
             {
               "name": "size",
               "required": false,
@@ -11654,9 +11639,9 @@
               "default": "false"
             },
             {
-              "name": "separated",
+              "name": "split",
               "required": false,
-              "description": "Separate toggle items.",
+              "description": "Show items without a grouping border.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"