From 8d1e0031a6efd025988c59b5cb9292aff3194b6b Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 28 Jan 2025 14:03:21 +0800
Subject: [PATCH] Improved styles.

---
 src/ui.button-toggle-item/UToggleItem.vue | 31 ++++++++++++-----------
 src/ui.button-toggle-item/config.ts       | 22 +++++++++++++++-
 src/ui.button-toggle/config.ts            | 12 +++++++--
 3 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/ui.button-toggle-item/UToggleItem.vue b/src/ui.button-toggle-item/UToggleItem.vue
index 4d7e93f0..ded5ed69 100644
--- a/src/ui.button-toggle-item/UToggleItem.vue
+++ b/src/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,
 }));
diff --git a/src/ui.button-toggle-item/config.ts b/src/ui.button-toggle-item/config.ts
index b9f38f09..aed65803 100644
--- a/src/ui.button-toggle-item/config.ts
+++ b/src/ui.button-toggle-item/config.ts
@@ -5,9 +5,29 @@ export default /*tw*/ {
       variant: "thirdary",
     },
   },
-  toggleButtonInactive: "{>toggleButton}",
+  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}",
+    variants: {
+      split: {
+        false: "border-0",
+        true: `
+          border border-brand-600
+        `,
+      },
+    },
     defaults: {
       color: "brand",
       filled: true,
diff --git a/src/ui.button-toggle/config.ts b/src/ui.button-toggle/config.ts
index e2da0cc9..9d9e605c 100644
--- a/src/ui.button-toggle/config.ts
+++ b/src/ui.button-toggle/config.ts
@@ -18,11 +18,19 @@ export default /*tw*/ {
     },
   },
   items: {
-    base: "flex gap-1",
+    base: "flex",
     variants: {
+      size: {
+        "2xs": "gap-1.5",
+        xs: "gap-1.5",
+        sm: "gap-2",
+        md: "gap-2",
+        lg: "gap-2.5",
+        xl: "gap-2.5",
+      },
       split: {
         true: "flex-wrap",
-        false: "flex-nowrap p-1 w-fit border rounded-dynamic border-gray-300",
+        false: "flex-nowrap gap-1 p-1 w-fit border rounded-dynamic border-gray-300",
       },
       disabled: {
         true: "pointer-events-none",