vueless 0.0.709 → 0.0.710

package/package.json

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

package/ui.button-toggle/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   toggleLabel: {
-    base: "{ULabel} flex flex-wrap",
+    base: "{ULabel} flex-wrap",
     variants: {
       block: {
         true: "w-full",
@@ -18,19 +18,19 @@ export default /*tw*/ {
     },
   },
   items: {
-    base: "",
+    base: "flex",
     variants: {
       size: {
-        "2xs": "gap-1",
+        "2xs": "gap-1.5",
         xs: "gap-1.5",
         sm: "gap-2",
-        md: "gap-2.5",
-        lg: "gap-3",
-        xl: "gap-3",
+        md: "gap-2",
+        lg: "gap-2.5",
+        xl: "gap-2.5",
       },
       split: {
-        true: "flex flex-wrap",
-        false: "p-1 gap-1 flex flex-nowrap w-fit transition border rounded-dynamic border-gray-300",
+        true: "flex-wrap",
+        false: "flex-nowrap gap-1 p-1 w-fit border rounded-dynamic border-gray-300",
       },
       disabled: {
         true: "pointer-events-none",

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

@@ -17,27 +17,13 @@ type ButtonSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
-  modelValue: "",
-  label: "",
-});
-
-const emit = defineEmits([
-  /**
-   * Triggers when new value is set.
-   * @property {string} modelValue
-   */
-  "update:modelValue",
-]);
-
 const getToggleName = inject<() => string>("getToggleName", () => "toggle");
 const getToggleType = inject<() => string>("getToggleType", () => TYPE_RADIO);
 const getToggleSize = inject<() => ButtonSize>("getToggleSize", () => "md" as ButtonSize);
 const getToggleRound = inject<() => boolean>("getToggleRound", () => false);
 const getToggleBlock = inject<() => boolean>("getToggleBlock", () => false);
 const getToggleSquare = inject<() => boolean>("getToggleSquare", () => false);
-const getToggleSplit = inject<() => boolean>("getToggleSplit", () => true);
+const getToggleSplit = inject<() => boolean>("getToggleSplit", () => false);
 
 const getToggleDisabled = inject<() => boolean>(
   "getToggleDisabled",
@@ -49,6 +35,20 @@ const { selectedValue, updateSelectedValue } = inject<ToggleContextType>("toggle
   updateSelectedValue: () => {},
 });
 
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  modelValue: "",
+  label: "",
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when new value is set.
+   * @property {string} modelValue
+   */
+  "update:modelValue",
+]);
+
 const elementId = props.id || useId();
 
 const selectedItem = ref<string | boolean>("");
@@ -86,6 +86,7 @@ function onClickSetValue() {
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
+  split: getToggleSplit(),
   /* component state, not a props */
   selected: isSelected.value,
 }));
@@ -100,9 +101,8 @@ const { toggleButtonInactiveAttrs, toggleButtonActiveAttrs, toggleInputAttrs } =
   <UButton
     :label="label"
     tabindex="0"
-    color="brand"
+    color="gray"
     :for="elementId"
-    :filled="getToggleSplit()"
     :size="getToggleSize()"
     :round="getToggleRound()"
     :block="getToggleBlock()"

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

@@ -5,10 +5,31 @@ export default /*tw*/ {
       variant: "thirdary",
     },
   },
-  toggleButtonInactive: "{>toggleButton} text-gray-900",
+  toggleButtonInactive: {
+    base: "{>toggleButton}",
+    variants: {
+      split: {
+        false: "border-0",
+        true: `
+          border border-gray-300 hover:border-gray-400
+          hover:bg-transparent dark:hover:bg-transparent
+          active:bg-transparent dark:active:bg-transparent
+        `,
+      },
+    },
+  },
   toggleButtonActive: {
-    base: "{>toggleButton} !bg-{color}-600/15",
+    base: "{>toggleButton}",
+    variants: {
+      split: {
+        false: "border-0",
+        true: `
+          border border-brand-600
+        `,
+      },
+    },
     defaults: {
+      color: "brand",
       filled: true,
     },
   },

package/ui.navigation-tab/config.ts

@@ -10,7 +10,7 @@ export default /*tw*/ {
     },
   },
   tabButtonActive: {
-    base: "{>tabButton} border-b-brand-600",
+    base: "{>tabButton} -mb-0.5 border-b-2 border-b-brand-600",
     defaults: {
       color: "brand",
     },