@progress/kendo-vue-common/unstyled/buttons.mjs

Kendo UI for Vue Common Utilities package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { getClassByName as h } from "./common.mjs";
import { buttonPrefix as e, elements as m, base as l, states as p, roundedMap as g, fillModeMap as $, themeColorMap as i, sizeMap as x, containers as u, directionMap as j, ddbPrefix as c } from "./json-classes.mjs";
const M = {
  wrapper: {
    main: e,
    size: {
      small: `${e}-${x.small}`,
      medium: `${e}-${x.medium}`,
      large: `${e}-${x.large}`
    },
    fillMode: {
      solid: `${e}-${$.solid}`,
      outline: `${e}-${$.outline}`,
      flat: `${e}-${$.flat}`,
      link: `${e}-${$.link}`,
      clear: `${e}-${$.clear}`
    },
    themeColor: {
      base: {
        fillMode: {
          solid: `${e}-${$.solid}-${i.base}`,
          outline: `${e}-${$.outline}-${i.base}`,
          flat: `${e}-${$.flat}-${i.base}`,
          link: `${e}-${$.link}-${i.base}`,
          clear: `${e}-${$.clear}-${i.base}`
        }
      },
      primary: {
        fillMode: {
          solid: `${e}-${$.solid}-${i.primary}`,
          outline: `${e}-${$.outline}-${i.primary}`,
          flat: `${e}-${$.flat}-${i.primary}`,
          link: `${e}-${$.link}-${i.primary}`,
          clear: `${e}-${$.clear}-${i.primary}`
        }
      },
      secondary: {
        fillMode: {
          solid: `${e}-${$.solid}-${i.secondary}`,
          outline: `${e}-${$.outline}-${i.secondary}`,
          flat: `${e}-${$.flat}-${i.secondary}`,
          link: `${e}-${$.link}-${i.secondary}`,
          clear: `${e}-${$.clear}-${i.secondary}`
        }
      },
      tertiary: {
        fillMode: {
          solid: `${e}-${$.solid}-${i.tertiary}`,
          outline: `${e}-${$.outline}-${i.tertiary}`,
          flat: `${e}-${$.flat}-${i.tertiary}`,
          link: `${e}-${$.link}-${i.tertiary}`,
          clear: `${e}-${$.clear}-${i.tertiary}`
        }
      },
      info: {
        fillMode: {
          solid: `${e}-${$.solid}-${i.info}`,
          outline: `${e}-${$.outline}-${i.info}`,
          flat: `${e}-${$.flat}-${i.info}`,
          link: `${e}-${$.link}-${i.info}`,
          clear: `${e}-${$.clear}-${i.info}`
        }
      },
      success: {
        fillMode: {
          solid: `${e}-${$.solid}-${i.success}`,
          outline: `${e}-${$.outline}-${i.success}`,
          flat: `${e}-${$.flat}-${i.success}`,
          link: `${e}-${$.link}-${i.success}`,
          clear: `${e}-${$.clear}-${i.success}`
        }
      },
      warning: {
        fillMode: {
          solid: `${e}-${$.solid}-${i.warning}`,
          outline: `${e}-${$.outline}-${i.warning}`,
          flat: `${e}-${$.flat}-${i.warning}`,
          link: `${e}-${$.link}-${i.warning}`,
          clear: `${e}-${$.clear}-${i.warning}`
        }
      },
      error: {
        fillMode: {
          solid: `${e}-${$.solid}-${i.error}`,
          outline: `${e}-${$.outline}-${i.error}`,
          flat: `${e}-${$.flat}-${i.error}`,
          link: `${e}-${$.link}-${i.error}`,
          clear: `${e}-${$.clear}-${i.error}`
        }
      },
      inverse: {
        fillMode: {
          solid: `${e}-${$.solid}-${i.inverse}`,
          outline: `${e}-${$.outline}-${i.inverse}`,
          flat: `${e}-${$.flat}-${i.inverse}`,
          link: `${e}-${$.link}-${i.inverse}`,
          clear: `${e}-${$.clear}-${i.inverse}`
        }
      }
    },
    rounded: {
      small: `${l.prefix}-${l.rounded}-${g.small}`,
      medium: `${l.prefix}-${l.rounded}-${g.medium}`,
      large: `${l.prefix}-${l.rounded}-${g.large}`
    },
    iconButton: `${l.prefix}-${m.icon}-${m.button}`,
    disabled: `${l.prefix}-${p.disabled}`,
    selected: `${l.prefix}-${p.selected}`,
    isRtl: `${l.prefix}-${l.rtl}`
  },
  text: `${e}-${m.text}`,
  icon: `${e}-${m.icon}`
}, J = {
  wrapper: (n) => {
    var y, z, B, v, D, R, G, P, F, N;
    const { isRtl: t, selected: a, disabled: o, size: r, fillMode: b, rounded: f, themeColor: A, iconButton: C, c: E = M } = n, d = E.wrapper, s = (y = d.themeColor) == null ? void 0 : y[A], w = (z = s == null ? void 0 : s.fillMode) == null ? void 0 : z[b];
    return {
      [d.main]: !0,
      [(B = d.size) == null ? void 0 : B[r]]: (v = d.size) == null ? void 0 : v[r],
      [`${e}-${r}`]: r && !((D = d.size) != null && D[r]),
      [(R = d.fillMode) == null ? void 0 : R[b]]: (G = d.fillMode) == null ? void 0 : G[b],
      [w]: w,
      [(P = d.rounded) == null ? void 0 : P[f]]: (F = d.rounded) == null ? void 0 : F[f],
      [`${l.prefix}-${l.rounded}-${f}`]: f && !((N = d.rounded) != null && N[f]),
      [d.iconButton]: C,
      [s == null ? void 0 : s.disabled]: o && (s == null ? void 0 : s.disabled),
      [s == null ? void 0 : s.selected]: a && (s == null ? void 0 : s.selected),
      [d.disabled]: o,
      [d.selected]: a,
      [d.isRtl]: t
    };
  },
  text: (n) => {
    const { c: t = M } = n;
    return {
      [t.text]: !0
    };
  },
  icon: (n) => {
    const { c: t = M } = n;
    return {
      [t.icon]: !0
    };
  }
}, q = {
  wrapper: {
    main: `${e}-${u.group}`,
    stretched: `${e}-${u.group}-${p.stretched}`,
    disabled: `${l.prefix}-${p.disabled}`
  },
  position: {
    start: `${l.prefix}-${u.group}-${j.start}`,
    end: `${l.prefix}-${u.group}-${j.end}`
  }
}, K = {
  wrapper: (n) => {
    const { stretched: t, disabled: a, c: o = q } = n, r = o.wrapper;
    return {
      [r.main]: !0,
      [r.stretched]: t,
      [r.disabled]: a
    };
  },
  position: (n) => {
    const { start: t, end: a, c: o = q } = n, r = o.position;
    return {
      [r.start]: t,
      [r.end]: a
    };
  }
}, k = {
  wrapper: {
    main: `${c}-${m.button}`,
    focus: `${l.prefix}-${p.focus}`,
    disabled: `${l.prefix}-${p.disabled}`
  },
  ul: {
    group: `${c}-${u.group}`,
    size: {
      small: `${c}-${u.group}-${x.small}`,
      medium: `${c}-${u.group}-${x.medium}`,
      large: `${c}-${u.group}-${x.large}`
    }
  },
  li: {
    item: `${l.prefix}-${u.item}`,
    focus: `${l.prefix}-${p.focus}`
  },
  item: `${c}-${u.item}`,
  link: {
    main: `${l.prefix}-${m.link}`,
    link: `${c}-${m.link}`,
    selected: `${l.prefix}-${p.selected}`,
    disabled: `${l.prefix}-${p.disabled}`
  },
  popup: `${c}-${u.popup}`
}, L = {
  wrapper: (n) => {
    const { focused: t, disabled: a, c: o = k } = n, r = o.wrapper;
    return {
      [r.main]: !0,
      [r.focus]: t,
      [r.disabled]: a
    };
  },
  ul: (n) => {
    var r, b, f;
    const { size: t, c: a = k } = n, o = a.ul;
    return {
      [o.group]: !0,
      [(r = o.size) == null ? void 0 : r[t]]: (b = o.size) == null ? void 0 : b[t],
      [`${c}-${u.group}-${t}`]: t && !((f = o.size) != null && f[t])
    };
  },
  li: (n) => {
    const { focused: t, c: a = k } = n, o = a.li;
    return {
      [o.item]: !0,
      [o.focus]: t
    };
  },
  item: h(k, "item"),
  link: (n) => {
    const { selected: t, disabled: a, c: o = k } = n, r = o.link;
    return {
      [r.main]: !0,
      [r.link]: !0,
      [r.selected]: t,
      [r.disabled]: a
    };
  },
  popup: h(k, "popup")
};
export {
  J as uButton,
  K as uButtonGroup,
  L as uDropDownButton
};