@uzum-tech/ui 2.3.8 → 3.0.0-alpha.0

package/es/_internal/button-v3/src/ButtonV3.mjs

@@ -0,0 +1,200 @@
+import { computed, defineComponent, h, ref, watchEffect } from 'vue';
+import { useConfig, useFormItem, useTheme, useThemeClass } from "../../../_mixins/index.mjs";
+import { call, createKey, warnOnce } from "../../../_utils/index.mjs";
+import { buttonV3Light } from "../styles/index.mjs";
+import { buttonV3Props } from "./interface.mjs";
+import style from "./styles/index.cssr.mjs";
+import { renderIconSlot, renderSpinner, resolveSpinnerStrokeWidth, resolveVariantKey, upperFirst } from "./utils.mjs";
+const ButtonV3 = defineComponent({
+  name: 'ButtonV3',
+  props: buttonV3Props,
+  slots: Object,
+  setup(props, {
+    attrs
+  }) {
+    if (process.env.NODE_ENV !== 'production') {
+      watchEffect(() => {
+        if (props.type === 'secondary' && props.tone === 'negative') {
+          warnOnce('button-v3', 'У типа `secondary` нет тона `negative` — используется тон `default`.');
+        }
+        if (props.iconOnly && !attrs['aria-label'] && !attrs['aria-labelledby'] && !attrs.title) {
+          warnOnce('button-v3', 'Кнопке с `icon-only` нужен `aria-label` (или `title`) — иначе действие непонятно.');
+        }
+      });
+    }
+    const selfElRef = ref(null);
+    const {
+      inlineThemeDisabled,
+      mergedClsPrefixRef
+    } = useConfig(props);
+    const themeRef = useTheme('ButtonV3', '-button-v3', style, buttonV3Light, props, mergedClsPrefixRef);
+    const {
+      mergedSizeRef
+    } = useFormItem({}, {
+      defaultSize: 'medium',
+      mergedSize: UFormItem => {
+        const {
+          size
+        } = props;
+        if (size) return size;
+        const {
+          mergedSize: formItemSize
+        } = UFormItem || {};
+        if (formItemSize) return formItemSize.value;
+        return 'medium';
+      }
+    });
+    const variantKeyRef = computed(() => resolveVariantKey(props.type, props.tone));
+    const mergedDisabledRef = computed(() => props.disabled);
+    const inertRef = computed(() => props.disabled || props.loading);
+    const mergedFocusableRef = computed(() => props.focusable && !props.disabled);
+    const spinnerStrokeWidthRef = computed(() => {
+      const {
+        self
+      } = themeRef.value;
+      return resolveSpinnerStrokeWidth(self[createKey('iconSize', mergedSizeRef.value)], self.spinnerStrokeWidth);
+    });
+    const handleClick = e => {
+      if (inertRef.value) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      const {
+        onClick
+      } = props;
+      if (onClick) call(onClick, e);
+    };
+    const cssVarsRef = computed(() => {
+      const {
+        common: {
+          cubicBezierEaseInOut
+        },
+        self
+      } = themeRef.value;
+      const {
+        fontFamily,
+        fontSize,
+        lineHeight,
+        fontWeight,
+        letterSpacing,
+        iconMargin,
+        borderWidth,
+        focusRingWidth,
+        focusRingColor,
+        pressedOverlayColor,
+        textColorDisabled
+      } = self;
+      const size = mergedSizeRef.value;
+      const variant = upperFirst(variantKeyRef.value);
+      const colors = self;
+      return {
+        '--u-bezier': cubicBezierEaseInOut,
+        '--u-height': self[createKey('height', size)],
+        '--u-padding': self[createKey('padding', size)],
+        '--u-border-radius': self[createKey('borderRadius', size)],
+        '--u-icon-size': self[createKey('iconSize', size)],
+        '--u-icon-margin': iconMargin,
+        '--u-font-family': fontFamily,
+        '--u-font-size': fontSize,
+        '--u-line-height': lineHeight,
+        '--u-font-weight': fontWeight,
+        '--u-letter-spacing': letterSpacing,
+        '--u-border-width': borderWidth,
+        '--u-focus-ring-width': focusRingWidth,
+        '--u-focus-ring-color': focusRingColor,
+        '--u-pressed-overlay-color': pressedOverlayColor,
+        '--u-color': colors[`color${variant}`],
+        '--u-color-hover': colors[`color${variant}Hover`],
+        '--u-color-disabled': colors[`color${variant}Disabled`],
+        '--u-text-color': colors[`textColor${variant}`],
+        '--u-text-color-hover': colors[`textColor${variant}Hover`],
+        '--u-text-color-disabled': textColorDisabled,
+        '--u-border-color': colors[`borderColor${variant}`],
+        '--u-border-color-disabled': colors[`borderColor${variant}Disabled`]
+      };
+    });
+    const themeClassHashRef = computed(() => `${variantKeyRef.value}-${mergedSizeRef.value}`);
+    const themeClassHandle = inlineThemeDisabled ? useThemeClass('button-v3', themeClassHashRef, cssVarsRef, props) : undefined;
+    return {
+      selfElRef,
+      mergedClsPrefix: mergedClsPrefixRef,
+      mergedSize: mergedSizeRef,
+      mergedDisabled: mergedDisabledRef,
+      mergedFocusable: mergedFocusableRef,
+      inert: inertRef,
+      spinnerStrokeWidth: spinnerStrokeWidthRef,
+      handleClick,
+      cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+      themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+      onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+    };
+  },
+  render() {
+    const {
+      $slots,
+      mergedClsPrefix: clsPrefix,
+      tag: Component,
+      iconOnly,
+      loading,
+      mergedDisabled,
+      inert,
+      spinnerStrokeWidth: strokeWidth,
+      onRender
+    } = this;
+    onRender === null || onRender === void 0 ? void 0 : onRender();
+    const iconStartSlot = $slots['icon-start'];
+    const iconEndSlot = $slots['icon-end'];
+    const hasIconStart = !!iconStartSlot;
+    const hasIconEnd = !!iconEndSlot;
+    const centeredSpinner = loading && !iconOnly && !hasIconStart && !hasIconEnd;
+    const children = [];
+    if (iconOnly) {
+      children.push(renderIconSlot({
+        clsPrefix,
+        slot: iconStartSlot || $slots.default,
+        showSpinner: loading,
+        strokeWidth,
+        key: 'icon'
+      }));
+    } else {
+      children.push(renderIconSlot({
+        clsPrefix,
+        slot: iconStartSlot,
+        showSpinner: loading && hasIconStart,
+        strokeWidth,
+        key: 'icon-start'
+      }));
+      if ($slots.default) {
+        children.push(h("span", {
+          class: `${clsPrefix}-button-v3__label`
+        }, $slots.default()));
+      }
+      children.push(renderIconSlot({
+        clsPrefix,
+        slot: iconEndSlot,
+        showSpinner: loading && !hasIconStart && hasIconEnd,
+        strokeWidth,
+        key: 'icon-end'
+      }));
+      if (centeredSpinner) {
+        children.push(h("span", {
+          class: `${clsPrefix}-button-v3__spinner`
+        }, renderSpinner(clsPrefix, strokeWidth)));
+      }
+    }
+    return h(Component, {
+      ref: "selfElRef",
+      class: [`${clsPrefix}-button-v3`, this.themeClass, `${clsPrefix}-button-v3--${this.type}-type`, `${clsPrefix}-button-v3--${this.tone}-tone`, `${clsPrefix}-button-v3--${this.mergedSize}-size`, iconOnly && `${clsPrefix}-button-v3--icon-only`, this.block && `${clsPrefix}-button-v3--block`, mergedDisabled && `${clsPrefix}-button-v3--disabled`, loading && `${clsPrefix}-button-v3--loading`, centeredSpinner && `${clsPrefix}-button-v3--loading-text-only`],
+      style: this.cssVars,
+      type: Component === 'button' ? this.attrType : undefined,
+      disabled: Component === 'button' ? mergedDisabled : undefined,
+      tabindex: this.mergedFocusable ? 0 : -1,
+      "aria-disabled": inert ? 'true' : undefined,
+      "aria-busy": loading ? 'true' : undefined,
+      onClick: this.handleClick
+    }, children);
+  }
+});
+export default ButtonV3;
+export const XButtonV3 = ButtonV3;

package/es/_internal/button-v3/src/interface.d.ts

@@ -0,0 +1,281 @@
+import type { ButtonHTMLAttributes, ExtractPropTypes, PropType, VNode } from 'vue';
+import type { ExtractPublicPropTypes, MaybeArray } from '../../../_utils';
+export declare const buttonV3Props: {
+    readonly type: {
+        readonly type: PropType<ButtonV3Type>;
+        readonly default: "primary";
+    };
+    readonly tone: {
+        readonly type: PropType<ButtonV3Tone>;
+        readonly default: "default";
+    };
+    readonly size: PropType<ButtonV3Size>;
+    readonly iconOnly: BooleanConstructor;
+    readonly block: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
+    readonly loading: BooleanConstructor;
+    readonly focusable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly tag: {
+        readonly type: PropType<ButtonV3Tag>;
+        readonly default: "button";
+    };
+    readonly attrType: {
+        readonly type: PropType<ButtonV3AttrType>;
+        readonly default: "button";
+    };
+    readonly onClick: PropType<ButtonV3ClickHandler>;
+    readonly theme: PropType<import("../../../_mixins").Theme<"ButtonV3", {
+        fontFamily: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        letterSpacing: string;
+        pressedOverlayColor: string;
+        focusRingColor: string;
+        textColorDisabled: string;
+        colorPrimary: string;
+        colorPrimaryHover: string;
+        textColorPrimary: string;
+        textColorPrimaryHover: string;
+        borderColorPrimary: string;
+        colorPrimaryDisabled: string;
+        borderColorPrimaryDisabled: string;
+        colorPrimaryNegative: string;
+        colorPrimaryNegativeHover: string;
+        textColorPrimaryNegative: string;
+        textColorPrimaryNegativeHover: string;
+        borderColorPrimaryNegative: string;
+        colorPrimaryNegativeDisabled: string;
+        borderColorPrimaryNegativeDisabled: string;
+        colorSecondary: string;
+        colorSecondaryHover: string;
+        textColorSecondary: string;
+        textColorSecondaryHover: string;
+        borderColorSecondary: string;
+        colorSecondaryDisabled: string;
+        borderColorSecondaryDisabled: string;
+        colorTertiary: string;
+        colorTertiaryHover: string;
+        textColorTertiary: string;
+        textColorTertiaryHover: string;
+        borderColorTertiary: string;
+        colorTertiaryDisabled: string;
+        borderColorTertiaryDisabled: string;
+        colorTertiaryNegative: string;
+        colorTertiaryNegativeHover: string;
+        textColorTertiaryNegative: string;
+        textColorTertiaryNegativeHover: string;
+        borderColorTertiaryNegative: string;
+        colorTertiaryNegativeDisabled: string;
+        borderColorTertiaryNegativeDisabled: string;
+        colorGhost: string;
+        colorGhostHover: string;
+        textColorGhost: string;
+        textColorGhostHover: string;
+        borderColorGhost: string;
+        colorGhostDisabled: string;
+        borderColorGhostDisabled: string;
+        colorGhostNegative: string;
+        colorGhostNegativeHover: string;
+        textColorGhostNegative: string;
+        textColorGhostNegativeHover: string;
+        borderColorGhostNegative: string;
+        colorGhostNegativeDisabled: string;
+        borderColorGhostNegativeDisabled: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        borderRadiusSmall: string;
+        borderRadiusMedium: string;
+        borderRadiusLarge: string;
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        iconMargin: string;
+        borderWidth: string;
+        focusRingWidth: string;
+        spinnerStrokeWidth: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"ButtonV3", {
+        fontFamily: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        letterSpacing: string;
+        pressedOverlayColor: string;
+        focusRingColor: string;
+        textColorDisabled: string;
+        colorPrimary: string;
+        colorPrimaryHover: string;
+        textColorPrimary: string;
+        textColorPrimaryHover: string;
+        borderColorPrimary: string;
+        colorPrimaryDisabled: string;
+        borderColorPrimaryDisabled: string;
+        colorPrimaryNegative: string;
+        colorPrimaryNegativeHover: string;
+        textColorPrimaryNegative: string;
+        textColorPrimaryNegativeHover: string;
+        borderColorPrimaryNegative: string;
+        colorPrimaryNegativeDisabled: string;
+        borderColorPrimaryNegativeDisabled: string;
+        colorSecondary: string;
+        colorSecondaryHover: string;
+        textColorSecondary: string;
+        textColorSecondaryHover: string;
+        borderColorSecondary: string;
+        colorSecondaryDisabled: string;
+        borderColorSecondaryDisabled: string;
+        colorTertiary: string;
+        colorTertiaryHover: string;
+        textColorTertiary: string;
+        textColorTertiaryHover: string;
+        borderColorTertiary: string;
+        colorTertiaryDisabled: string;
+        borderColorTertiaryDisabled: string;
+        colorTertiaryNegative: string;
+        colorTertiaryNegativeHover: string;
+        textColorTertiaryNegative: string;
+        textColorTertiaryNegativeHover: string;
+        borderColorTertiaryNegative: string;
+        colorTertiaryNegativeDisabled: string;
+        borderColorTertiaryNegativeDisabled: string;
+        colorGhost: string;
+        colorGhostHover: string;
+        textColorGhost: string;
+        textColorGhostHover: string;
+        borderColorGhost: string;
+        colorGhostDisabled: string;
+        borderColorGhostDisabled: string;
+        colorGhostNegative: string;
+        colorGhostNegativeHover: string;
+        textColorGhostNegative: string;
+        textColorGhostNegativeHover: string;
+        borderColorGhostNegative: string;
+        colorGhostNegativeDisabled: string;
+        borderColorGhostNegativeDisabled: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        borderRadiusSmall: string;
+        borderRadiusMedium: string;
+        borderRadiusLarge: string;
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        iconMargin: string;
+        borderWidth: string;
+        focusRingWidth: string;
+        spinnerStrokeWidth: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"ButtonV3", {
+        fontFamily: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        letterSpacing: string;
+        pressedOverlayColor: string;
+        focusRingColor: string;
+        textColorDisabled: string;
+        colorPrimary: string;
+        colorPrimaryHover: string;
+        textColorPrimary: string;
+        textColorPrimaryHover: string;
+        borderColorPrimary: string;
+        colorPrimaryDisabled: string;
+        borderColorPrimaryDisabled: string;
+        colorPrimaryNegative: string;
+        colorPrimaryNegativeHover: string;
+        textColorPrimaryNegative: string;
+        textColorPrimaryNegativeHover: string;
+        borderColorPrimaryNegative: string;
+        colorPrimaryNegativeDisabled: string;
+        borderColorPrimaryNegativeDisabled: string;
+        colorSecondary: string;
+        colorSecondaryHover: string;
+        textColorSecondary: string;
+        textColorSecondaryHover: string;
+        borderColorSecondary: string;
+        colorSecondaryDisabled: string;
+        borderColorSecondaryDisabled: string;
+        colorTertiary: string;
+        colorTertiaryHover: string;
+        textColorTertiary: string;
+        textColorTertiaryHover: string;
+        borderColorTertiary: string;
+        colorTertiaryDisabled: string;
+        borderColorTertiaryDisabled: string;
+        colorTertiaryNegative: string;
+        colorTertiaryNegativeHover: string;
+        textColorTertiaryNegative: string;
+        textColorTertiaryNegativeHover: string;
+        borderColorTertiaryNegative: string;
+        colorTertiaryNegativeDisabled: string;
+        borderColorTertiaryNegativeDisabled: string;
+        colorGhost: string;
+        colorGhostHover: string;
+        textColorGhost: string;
+        textColorGhostHover: string;
+        borderColorGhost: string;
+        colorGhostDisabled: string;
+        borderColorGhostDisabled: string;
+        colorGhostNegative: string;
+        colorGhostNegativeHover: string;
+        textColorGhostNegative: string;
+        textColorGhostNegativeHover: string;
+        borderColorGhostNegative: string;
+        colorGhostNegativeDisabled: string;
+        borderColorGhostNegativeDisabled: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        borderRadiusSmall: string;
+        borderRadiusMedium: string;
+        borderRadiusLarge: string;
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        iconMargin: string;
+        borderWidth: string;
+        focusRingWidth: string;
+        spinnerStrokeWidth: string;
+    }, any>>>;
+};
+export interface ButtonV3Slots {
+    default?: () => VNode[];
+    'icon-start'?: () => VNode[];
+    'icon-end'?: () => VNode[];
+}
+export interface ButtonV3ThemeSelfVars {
+    [key: string]: string;
+}
+export interface ButtonV3IconSlotOptions {
+    clsPrefix: string;
+    slot: (() => VNode[]) | undefined;
+    showSpinner: boolean;
+    strokeWidth: number;
+    key: string;
+}
+export type ButtonV3Type = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+export type ButtonV3Tone = 'default' | 'negative';
+export type ButtonV3Size = 'small' | 'medium' | 'large';
+export type ButtonV3Tag = keyof HTMLElementTagNameMap;
+export type ButtonV3AttrType = 'button' | 'submit' | 'reset';
+export type ButtonV3VariantKey = 'primary' | 'primaryNegative' | 'secondary' | 'tertiary' | 'tertiaryNegative' | 'ghost' | 'ghostNegative';
+export type ButtonV3ClickHandler = MaybeArray<(e: MouseEvent) => void>;
+export type ButtonV3Props = ExtractPublicPropTypes<typeof buttonV3Props>;
+export type InternalButtonV3Props = ExtractPropTypes<typeof buttonV3Props>;
+export type ButtonV3NativeProps = Omit<ButtonHTMLAttributes, keyof InternalButtonV3Props>;
+export type ButtonV3MergedProps = Partial<InternalButtonV3Props & ButtonV3NativeProps>;

package/es/_internal/button-v3/src/interface.mjs

@@ -0,0 +1,29 @@
+import { useTheme } from "../../../_mixins/index.mjs";
+export const buttonV3Props = Object.assign(Object.assign({}, useTheme.props), {
+  type: {
+    type: String,
+    default: 'primary'
+  },
+  tone: {
+    type: String,
+    default: 'default'
+  },
+  size: String,
+  iconOnly: Boolean,
+  block: Boolean,
+  disabled: Boolean,
+  loading: Boolean,
+  focusable: {
+    type: Boolean,
+    default: true
+  },
+  tag: {
+    type: String,
+    default: 'button'
+  },
+  attrType: {
+    type: String,
+    default: 'button'
+  },
+  onClick: [Function, Array]
+});

package/es/_internal/button-v3/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/es/_internal/button-v3/src/styles/index.cssr.mjs

@@ -0,0 +1,119 @@
+import { c, cB, cE, cM, cNotM } from "../../../../_utils/cssr/index.mjs";
+export default c([c('@keyframes u-button-v3-spin', `
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ `), cB('button-v3', `
+ box-sizing: border-box;
+ position: relative;
+ display: inline-flex;
+ flex-wrap: nowrap;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ gap: var(--u-icon-margin);
+ margin: 0;
+ max-width: 100%;
+ height: var(--u-height);
+ padding: var(--u-padding);
+ border: var(--u-border-width) solid var(--u-border-color);
+ border-radius: var(--u-border-radius);
+ background-color: var(--u-color);
+ color: var(--u-text-color);
+ font-family: var(--u-font-family);
+ font-size: var(--u-font-size);
+ line-height: var(--u-line-height);
+ font-weight: var(--u-font-weight);
+ letter-spacing: var(--u-letter-spacing);
+ text-align: center;
+ text-decoration: none;
+ white-space: nowrap;
+ cursor: pointer;
+ outline: none;
+ user-select: none;
+ -webkit-user-select: none;
+ -webkit-tap-highlight-color: transparent;
+ transition:
+ color .3s var(--u-bezier),
+ background-color .3s var(--u-bezier),
+ border-color .3s var(--u-bezier);
+ `, [c('&::after', `
+ content: "";
+ position: absolute;
+ inset: calc(var(--u-border-width) * -1);
+ z-index: 0;
+ border-radius: inherit;
+ background-color: var(--u-pressed-overlay-color);
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity .2s var(--u-bezier);
+ `), cE('label', `
+ position: relative;
+ z-index: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ `), cE('icon', `
+ position: relative;
+ z-index: 1;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex: none;
+ width: var(--u-icon-size);
+ height: var(--u-icon-size);
+ font-size: var(--u-icon-size);
+ line-height: 1;
+ `, [c('svg', `
+ width: 1em;
+ height: 1em;
+ `)]), cE('spinner', `
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: var(--u-icon-size);
+ height: var(--u-icon-size);
+ font-size: var(--u-icon-size);
+ line-height: 1;
+ `), cE('spinner-icon', `
+ display: block;
+ width: 100%;
+ height: 100%;
+ color: currentColor;
+ animation: u-button-v3-spin 1s linear infinite;
+ `), cM('block', `
+ display: flex;
+ width: 100%;
+ `), cM('icon-only', `
+ padding: 0;
+ width: var(--u-height);
+ `), cNotM('disabled', [c('&:hover', `
+ background-color: var(--u-color-hover);
+ color: var(--u-text-color-hover);
+ `), c('&:focus-visible', `
+ outline: var(--u-focus-ring-width) solid var(--u-focus-ring-color);
+ outline-offset: 0;
+ `), cNotM('loading', [c('&:active', `
+ background-color: var(--u-color);
+ `, [c('&::after', `
+ opacity: 1;
+ `)])])]), cM('ghost-type', [c('&::after', `
+ display: none;
+ `), cNotM('disabled', [c('&:focus-visible', `
+ color: var(--u-text-color-hover);
+ `)])]), cM('disabled', `
+ cursor: not-allowed;
+ background-color: var(--u-color-disabled);
+ border-color: var(--u-border-color-disabled);
+ color: var(--u-text-color-disabled);
+ `), cM('loading', `
+ cursor: default;
+ `), cM('loading-text-only', [cE('label', `
+ visibility: hidden;
+ `)])])]);

package/es/_internal/button-v3/src/utils.d.ts

@@ -0,0 +1,10 @@
+import type { VNode } from 'vue';
+import type { ButtonV3IconSlotOptions, ButtonV3Tone, ButtonV3Type, ButtonV3VariantKey } from './interface';
+export declare const SPINNER_VIEWBOX = 100;
+export declare const SPINNER_ARC = 0.75;
+export declare const DEFAULT_SPINNER_STROKE_WIDTH = 18.5;
+export declare function resolveVariantKey(type: ButtonV3Type, tone: ButtonV3Tone): ButtonV3VariantKey;
+export declare function upperFirst(value: string): string;
+export declare function resolveSpinnerStrokeWidth(iconSize: string, strokeWidth: string): number;
+export declare function renderSpinner(clsPrefix: string, strokeWidth: number): VNode;
+export declare function renderIconSlot(options: ButtonV3IconSlotOptions): VNode | null;

package/es/_internal/button-v3/src/utils.mjs

@@ -0,0 +1,52 @@
+import { h } from 'vue';
+export const SPINNER_VIEWBOX = 100;
+export const SPINNER_ARC = 0.75;
+export const DEFAULT_SPINNER_STROKE_WIDTH = 18.5;
+export function resolveVariantKey(type, tone) {
+  if (tone !== 'negative' || type === 'secondary') return type;
+  return `${type}Negative`;
+}
+export function upperFirst(value) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+export function resolveSpinnerStrokeWidth(iconSize, strokeWidth) {
+  const size = Number.parseFloat(iconSize);
+  const stroke = Number.parseFloat(strokeWidth);
+  if (!size || !stroke) return DEFAULT_SPINNER_STROKE_WIDTH;
+  return stroke / size * SPINNER_VIEWBOX;
+}
+export function renderSpinner(clsPrefix, strokeWidth) {
+  const radius = (SPINNER_VIEWBOX - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const arc = SPINNER_ARC * circumference;
+  return h('svg', {
+    class: `${clsPrefix}-button-v3__spinner-icon`,
+    viewBox: `0 0 ${SPINNER_VIEWBOX} ${SPINNER_VIEWBOX}`,
+    xmlns: 'http://www.w3.org/2000/svg',
+    role: 'img',
+    'aria-label': 'loading'
+  }, [h('circle', {
+    cx: SPINNER_VIEWBOX / 2,
+    cy: SPINNER_VIEWBOX / 2,
+    r: radius,
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': strokeWidth,
+    'stroke-linecap': 'round',
+    'stroke-dasharray': `${arc} ${circumference - arc}`
+  })]);
+}
+export function renderIconSlot(options) {
+  const {
+    clsPrefix,
+    slot,
+    showSpinner,
+    strokeWidth,
+    key
+  } = options;
+  if (!showSpinner && !slot) return null;
+  return h('span', {
+    key,
+    class: `${clsPrefix}-button-v3__icon`
+  }, showSpinner ? [renderSpinner(clsPrefix, strokeWidth)] : slot === null || slot === void 0 ? void 0 : slot());
+}