Merge branch 'main' into VL-133_USelect-stories-refinement_Vitalii-Du…

…dnik

docs/global-customization/general.md

@@ -23,7 +23,9 @@ Vueless uses Tailwind CSS under the hood, so you can use any of the [Tailwind CS
 You can set the ring width globally for all Vueless components.
 
 <pre class="language-js" data-title="vueless.config.{js,ts}"><code class="lang-js">export default {
+  ringSm: 2, /* px */
   ring: 4, /* px */
+  ringLg: 6, /* px */
 }<a data-footnote-ref href="#user-content-fn-2">;</a>
 </code></pre>
 

docs/global-customization/ring.md

@@ -3,16 +3,30 @@
 You can set the ring width, ring offset width and ring offset dark and light colors globally for all Vueless components.
 
 <pre class="language-js" data-title="vueless.config.{js,ts}"><code class="lang-js">export default {
+  ringSm: 2,
   ring: 4, /* default -> 2 (pixels) */
+  ringLg: 6,
   ringOffsetColorLight: "#ffffff", /* default -> white */
   ringOffsetColorDark: "#111827",  /* default -> gray-900 */
 }<a data-footnote-ref href="#user-content-fn-1">;</a>
 </code></pre>
 
 For `ring`, you can use any value in pixels; however, we highly recommend sticking to the predefined Tailwind CSS [ring width](https://tailwindcss.com/docs/ring-width) values for consistency.
 
+If you define only the `ring` value, `ringSm` and `ringLg` will be automatically calculated. The expected values are listed in the table below:
+
+| ringSm | ring | ringLg |
+| ------ | ---- | ------ |
+| 0      | 0    | 0      |
+| 0      | 1    | 2      |
+| 1      | 2    | 3      |
+| 2      | 3    | 4      |
+| 3      | 4    | 5      |
+| 4      | 5    | 6      |
+| 5      | 6    | 7      |
+
 ## Custom tailwind classes
 
-To implement global ring styling, Vueless provides custom Tailwind CSS classes: `ring-dynamic`,  and `ring-offset-color-dynamic`. Feel free to use these classes in your components whenever you need consistent ring styling throughout your project.
+To implement global ring styling, Vueless provides custom Tailwind CSS classes: `ring-dynamic`, `ring-dynamic-sm, ring-dynamic-lg` and `ring-offset-color-dynamic`. Feel free to use these classes in your components whenever you need consistent ring styling throughout your project.
 
 [^1]: 

docs/global-customization/rounding.md

@@ -13,17 +13,17 @@ You can set any border-radius value in pixels, but we highly recommend adhering
 
 If you define only the `rounding` value, `roundingSm` and `roundingLg` will be automatically calculated. The expected values are listed in the table below:
 
-| rounding (md) | roundingSm | roundingLg |
-| ------------- | ---------- | ---------- |
-| 0             | 0          | 2          |
-| 2             | 0          | 8          |
-| 4             | 2          | 10         |
-| 6             | 4          | 12         |
-| 8             | 4          | 14         |
-| 10            | 6          | 16         |
-| 12            | 8          | 18         |
-| 14            | 10         | 20         |
-| 16            | 12         | 22         |
+| roundingSm | rounding | roundingLg |
+| ---------- | -------- | ---------- |
+| 0          | 0        | 2          |
+| 0          | 2        | 8          |
+| 2          | 4        | 10         |
+| 4          | 6        | 12         |
+| 4          | 8        | 14         |
+| 6          | 10       | 16         |
+| 8          | 12       | 18         |
+| 10         | 14       | 20         |
+| 12         | 16       | 22         |
 
 {% hint style="info" %}
 In the config, values are specified in `pixels` for simplicity, but they are automatically converted into `rem` under the hood.

package.json

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

src/constants.js

@@ -18,6 +18,8 @@ export const COLOR_MODE_KEY = "vl-color-mode";
 export const DEFAULT_BRAND_COLOR = GRAYSCALE_COLOR;
 export const DEFAULT_GRAY_COLOR = COOL_COLOR;
 export const DEFAULT_RING = 2; /* pixels */
+export const RING_DECREMENT = 1; /* pixels */
+export const RING_INCREMENT = 1; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
 export const DEFAULT_RING_OFFSET_COLOR_DARK = "#111827"; // gray-900
 export const DEFAULT_ROUNDING = 8; /* pixels */
@@ -171,7 +173,7 @@ export const TAILWIND_MERGE_EXTENSION = {
       spacing: ["safe-top", "safe-bottom", "safe-left", "safe-right"],
     },
     classGroups: {
-      "ring-w": [{ ring: ["dynamic", "dynamic-1"] }],
+      "ring-w": [{ ring: ["dynamic", "dynamic-sm", "dynamic-lg"] }],
       "ring-offset-color": [{ "ring-offset": ["color-dynamic"] }],
       "font-size": [{ text: ["2xs"] }],
       rounded: [{ rounded: ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],

src/preset-tailwind.js

@@ -17,6 +17,10 @@ import {
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
   GRAYSCALE_COLOR,
+  ROUNDING_DECREMENT,
+  ROUNDING_INCREMENT,
+  RING_INCREMENT,
+  RING_DECREMENT,
 } from "./constants.js";
 
 const globalSettings = process.env.VUELESS_GLOBAL_SETTINGS || {};
@@ -92,24 +96,27 @@ export const vuelessTailwindConfig = {
         "dynamic-lg": "var(--vl-rounding-lg)",
       },
       ringWidth: {
+        "dynamic-sm": "var(--vl-ring-sm)",
         dynamic: "var(--vl-ring)",
-        "dynamic-1": "calc(var(--vl-ring) - 1px)",
+        "dynamic-lg": "var(--vl-ring-lg)",
       },
       ringOffsetColor: {
         dynamic: twColorWithOpacity("--vl-ring-offset-color"),
       },
     },
     configViewer: {
       themeReplacements: {
-        /* eslint-disable prettier/prettier */
+        /* eslint-disable prettier/prettier, vue/max-len */
+        "var(--vl-ring-sm)": globalSettings.ringSm || Math.max(0, (globalSettings.ring || DEFAULT_RING) - RING_DECREMENT),
         "var(--vl-ring)": globalSettings.ring || DEFAULT_RING,
+        "var(--vl-ring-lg)": globalSettings.ringLg || Math.max(0, (globalSettings.ring || DEFAULT_RING) + RING_INCREMENT),
         "var(--vl-ring-offset-color)": globalSettings.ringOffsetColorLight || DEFAULT_RING_OFFSET_COLOR_LIGHT,
-        "var(--vl-rounding-sm)": globalSettings.roundingSm || (globalSettings.ring || DEFAULT_ROUNDING) / 2,
+        "var(--vl-rounding-sm)": globalSettings.roundingSm || Math.max(0, (globalSettings.rounding || DEFAULT_ROUNDING) - ROUNDING_DECREMENT),
         "var(--vl-rounding)": globalSettings.ring || DEFAULT_ROUNDING,
-        "var(--vl-rounding-lg)": globalSettings.roundingLg || (globalSettings.ring || DEFAULT_ROUNDING) * 2,
+        "var(--vl-rounding-lg)": globalSettings.roundingLg || Math.max(0, (globalSettings.rounding || DEFAULT_ROUNDING) - ROUNDING_INCREMENT),
         ...getReplacementColors(GRAY_COLOR, globalSettings.gray || DEFAULT_GRAY_COLOR),
         ...getReplacementColors(BRAND_COLOR, globalSettings.brand || DEFAULT_BRAND_COLOR),
-        /* eslint-enable prettier/prettier */
+        /* eslint-enable prettier/prettier, vue/max-len */
       },
     },
   },

src/types.ts

@@ -81,7 +81,7 @@ export interface ThemeConfig {
   gray?: GrayColors;
 
   /**
-   * Default components "sm" size rounding (border-radius).
+   * Default components small size rounding (border-radius).
    */
   roundingSm?: number;
 
@@ -91,15 +91,25 @@ export interface ThemeConfig {
   rounding?: number;
 
   /**
-   * Default components "lg" size rounding (border-radius).
+   * Default components large size rounding (border-radius).
    */
   roundingLg?: number;
 
+  /**
+   * Default components small size ring width.
+   */
+  ringSm?: number;
+
   /**
    * Default components ring width.
    */
   ring?: number;
 
+  /**
+   * Default components large size ring width.
+   */
+  ringLg?: number;
+
   /**
    * Default components ring color for light theme.
    */
@@ -339,7 +349,9 @@ export interface TailwindColorShades {
 }
 
 export interface VuelessCssVariables {
+  "--vl-ring-sm": string;
   "--vl-ring": string;
+  "--vl-ring-lg": string;
   "--vl-ring-offset-color": string;
   "--vl-rounding-sm": string;
   "--vl-rounding": string;

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

@@ -17,26 +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", () => false);
 
 const getToggleDisabled = inject<() => boolean>(
   "getToggleDisabled",
@@ -48,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>("");
@@ -85,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,
 }));

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,

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",

src/ui.form-input-file/config.ts

@@ -5,7 +5,7 @@ export default /*tw*/ {
       p-3 size-auto w-full bg-white transition
       rounded-dynamic border border-solid border-gray-300
       hover:border-gray-400 hover:focus-within:border-brand-600 focus-within:border-brand-600
-      focus-within:ring-brand-600 focus-within:ring-dynamic-1
+      focus-within:ring-brand-600 focus-within:ring-dynamic-sm
     `,
     variants: {
       error: {

src/ui.form-input/config.ts

@@ -4,7 +4,7 @@ export default /*tw*/ {
     base: `
       border rounded-dynamic border-gray-300 relative flex w-full bg-white transition
       hover:border-gray-400 hover:focus-within:border-brand-600 focus-within:border-brand-600
-      focus-within:ring-dynamic-1 focus-within:ring-brand-600
+      focus-within:ring-dynamic-sm focus-within:ring-brand-600
     `,
     variants: {
       error: {

src/ui.form-select/config.ts

@@ -5,7 +5,7 @@ export default /*tw*/ {
       flex flex-row-reverse justify-between w-full min-h-full box-border relative
       rounded-dynamic border border-gray-300 bg-white
       hover:border-gray-400 hover:transition hover:focus-within:border-brand-600
-      focus-within:ring-brand-600 focus-within:ring-dynamic-1
+      focus-within:ring-brand-600 focus-within:ring-dynamic-sm
       focus-within:border-brand-600 focus-within:outline-none
     `,
     variants: {

src/ui.form-textarea/config.ts

@@ -7,7 +7,7 @@ export default /*tw*/ {
     base: `
       flex bg-white transition w-full
       rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-600
-      focus-within:border-brand-600 focus-within:ring-dynamic-1
+      focus-within:border-brand-600 focus-within:ring-dynamic-sm
       focus-within:ring-brand-600 focus-within:outline-none
     `,
     variants: {