@progress/kendo-vue-common
Version:
Kendo UI for Vue Common Utilities package
524 lines (523 loc) • 15.4 kB
JavaScript
/**
* @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 d } from "./common.mjs";
import { calendarPrefix as u, dateInputs as n, base as e, elements as b, states as s, orientationMap as T, containers as o, cssUtils as G, actions as I, directionMap as D, sizeMap as h, inputs as F, inputPrefix as p, roundedMap as q, fillModeMap as B, components as v } from "./json-classes.mjs";
const x = {
footer: {
main: `${e.prefix}-${n.time}-${b.footer}`,
actions: `${e.prefix}-${o.actions}`,
stretched: `${e.prefix}-${o.actions}-${s.stretched}`,
horizontal: `${e.prefix}-${o.actions}-${T.horizontal}`
},
cancel: `${e.prefix}-${n.time}-${I.cancel}`,
accept: `${e.prefix}-${n.time}-${I.accept}`,
part: {
main: `${e.prefix}-${n.time}-${o.part}`,
disabled: `${e.prefix}-${s.disabled}`
},
header: `${e.prefix}-${n.time}-${b.header}`,
now: `${e.prefix}-${n.time}-${n.now}`,
listContainer: `${e.prefix}-${n.time}-${o.list}-${o.container}`,
highlight: `${e.prefix}-${n.time}-${s.highlight}`,
listWrapper: {
main: `${e.prefix}-${n.time}-${o.list}-${o.wrapper}`,
focused: `${e.prefix}-${s.focus}`
},
list: `${e.prefix}-${n.time}-${o.list}`,
container: {
main: `${e.prefix}-${n.time}-${o.container}`,
scrollable: `${e.prefix}-${s.scrollable}`,
content: `${e.prefix}-${o.content}`
},
containerSelector: `${e.prefix}-${n.time}-${o.container}`,
separator: `${e.prefix}-${n.time}-${o.separator}`,
ul: `${e.prefix}-${e.reset}`,
li: `${e.prefix}-${o.item}`,
title: `${e.prefix}-${b.title}`,
scrollablePlaceholder: `${e.prefix}-${s.scrollable}-${o.placeholder}`
}, R = {
footer: (t) => {
const { c: a = x } = t, r = a.footer;
return {
[r.main]: !0,
[r.actions]: !0,
[r.stretched]: !0,
[r.horizontal]: !0
};
},
cancel: d(x, "cancel"),
accept: d(x, "accept"),
part: (t) => {
const { c: a = x, mobileMode: r, disabled: i } = t, l = a.part;
return {
[l.main]: r,
[l.disabled]: i
};
},
header: d(x, "header"),
now: d(x, "now"),
listContainer: d(x, "listContainer"),
highlight: d(x, "highlight"),
listWrapper: (t) => {
const { c: a = x, focused: r } = t, i = a.listWrapper;
return {
[i.main]: !0,
[i.focused]: r
};
},
list: d(x, "list"),
container: (t) => {
const { c: a = x, content: r, scrollable: i } = t, l = a.container;
return {
[l.main]: !0,
[l.content]: r,
[l.scrollable]: i
};
},
containerSelector: d(x, "containerSelector"),
separator: d(x, "separator"),
ul: d(x, "ul"),
li: d(x, "li"),
title: d(x, "title"),
scrollablePlaceholder: d(x, "scrollablePlaceholder")
}, N = {
wrapper: {
main: `${e.prefix}-${v.timepicker}`,
input: `${p}`,
size: {
small: `${p}-${h.small}`,
medium: `${p}-${h.medium}`,
large: `${p}-${h.large}`
},
fillMode: {
solid: `${p}-${B.solid}`,
outline: `${p}-${B.outline}`,
flat: `${p}-${B.flat}`
},
rounded: {
small: `${e.prefix}-${e.rounded}-${q.small}`,
medium: `${e.prefix}-${e.rounded}-${q.medium}`,
large: `${e.prefix}-${e.rounded}-${q.large}`
},
disabled: `${e.prefix}-${s.disabled}`,
required: `${e.prefix}-${s.required}`,
invalid: `${e.prefix}-${s.invalid}`
},
inputButton: `${p}-${b.button}`,
popup: {
main: `${e.prefix}-${v.timepicker}-${o.popup}`,
container: `${e.prefix}-${o.list}-${o.container}`
},
timeSelector: {
main: `${e.prefix}-${n.timeselector}`,
size: {
medium: `${e.prefix}-${n.timeselector}-${h.medium}`,
large: `${e.prefix}-${n.timeselector}-${h.large}`
},
disabled: `${e.prefix}-${s.disabled}`,
reset: `${e.prefix}-${e.reset}`
}
}, U = {
wrapper: (t) => {
var k, M, S, y, P, w, z, c;
const { c: a = N, size: r, fillMode: i, rounded: l, disabled: f, required: g, invalid: C } = t, $ = a.wrapper;
return {
[$.main]: !0,
[$.input]: !0,
[(k = $.size) == null ? void 0 : k[r]]: (M = $.size) == null ? void 0 : M[r],
[`${p}-${r}`]: r && !((S = $.size) != null && S[r]),
[(y = $.fillMode) == null ? void 0 : y[i]]: (P = $.fillMode) == null ? void 0 : P[i],
[(w = $.rounded) == null ? void 0 : w[l]]: (z = $.rounded) == null ? void 0 : z[l],
[`${e.prefix}-${e.rounded}-${l}`]: l && !((c = $.rounded) != null && c[l]),
[$.disabled]: f,
[$.invalid]: C,
[$.required]: g
};
},
inputButton: d(N, "inputButton"),
popup: (t) => {
const { c: a = N } = t, r = a.popup;
return {
[r.main]: !0,
[r.container]: !0
};
},
timeSelector: (t) => {
const { c: a = N, disabled: r, mobileMode: i } = t, l = a.timeSelector;
return {
[l.main]: !0,
[l.size.large]: i,
[l.reset]: i,
[l.size.medium]: !i,
[l.disabled]: r
};
}
}, m = {
wrapper: {
main: `${u}`,
infinite: `${u}-${e.infinite}`,
disabled: `${e.prefix}-${s.disabled}`,
weekNumber: `${e.prefix}-${n.week}-${n.number}`,
size: {
medium: `${u}-${h.medium}`,
large: `${u}-${h.large}`
}
},
view: {
main: `${u}-${o.view}`,
vertical: `${e.prefix}-${G.vstack}`,
month: `${u}-${n.month}${o.view}`,
year: `${u}-${n.year}${o.view}`,
decade: `${u}-${n.decade}${o.view}`,
century: `${u}-${n.century}${o.view}`
},
navigation: `${u}-${n.navigation}`,
navigationHighlight: `${u}-${n.navigation}-${s.highlight}`,
table: {
main: `${u}-${b.table}`,
weekdays: `${u}-${n.weekdays}`
},
thead: `${u}-${b.thead}`,
tr: `${u}-${b.tr}`,
th: `${u}-${b.th}`,
caption: `${u}-${b.caption}`,
tbody: `${u}-${b.tbody}`,
ul: `${e.prefix}-${e.reset}`,
li: "",
td: {
main: `${u}-${b.td}`,
rangeStart: `${e.prefix}-${n.range}-${D.start}`,
rangeEnd: `${e.prefix}-${n.range}-${D.end}`,
rangeMid: `${e.prefix}-${n.range}-${D.mid}`,
rangeSplitEnd: `${e.prefix}-${n.range}-${I.split}-${D.end}`,
rangeSplitStart: `${e.prefix}-${n.range}-${I.split}-${D.start}`,
active: `${e.prefix}-${s.active}`,
focused: `${e.prefix}-${e.state}-${s.pending}-${s.focus}`,
selected: `${e.prefix}-${s.selected}`,
today: `${e.prefix}-${n.today}`,
weekend: `${e.prefix}-${n.weekend}`,
disabled: `${e.prefix}-${s.disabled}`,
isOtherMonth: `${e.prefix}-${n.other}-${n.month}`,
isEmpty: `${e.prefix}-${s.empty}`,
isWeek: `${e.prefix}-${s.alt}`
},
title: `${u}-${b.title}`,
header: {
main: `${u}-${b.header}`,
vertical: `${e.prefix}-${G.hstack}`
},
spacer: `${e.prefix}-${o.spacer}`,
nav: `${u}-${o.nav}`,
today: {
main: `${u}-${o.nav}-${n.today}`,
disabled: `${e.prefix}-${s.disabled}`
},
scrollable: {
main: `${e.prefix}-${s.scrollable}`,
content: `${e.prefix}-${o.content}`,
horizontal: `${e.prefix}-${s.scrollable}-${T.horizontal}`
},
scrollableSelector: `${e.prefix}-${s.scrollable}`,
scrollablePlaceholder: {
main: `${e.prefix}-${s.scrollable}-${o.placeholder}`,
horizontal: `${e.prefix}-${s.scrollable}-${T.horizontal}-${o.placeholder}`
},
link: `${e.prefix}-${b.link}`,
navigationMarker: `${u}-${n.navigation}-${n.marker}`
}, j = {
wrapper: (t) => {
const { c: a = m, disabled: r, weekNumber: i, mobileMode: l } = t, f = a.wrapper;
return {
[f.main]: !0,
[f.infinite]: !0,
[f.disabled]: r,
[f.weekNumber]: i,
[f.size.large]: l,
[f.size.medium]: !l
};
},
view: (t) => {
const { c: a = m, month: r, year: i, decade: l, century: f } = t, g = a.view;
return {
[g.main]: !0,
[g.vertical]: !0,
[g.month]: r,
[g.year]: i,
[g.decade]: l,
[g.century]: f
};
},
navigation: d(m, "navigation"),
navigationHighlight: d(m, "navigationHighlight"),
table: (t) => {
const { c: a = m, weekdays: r } = t, i = a.table;
return {
[i.main]: !0,
[i.weekdays]: r
};
},
thead: d(m, "thead"),
tr: d(m, "tr"),
th: d(m, "th"),
tbody: d(m, "tbody"),
title: d(m, "title"),
header: (t) => {
const { c: a = m, vertical: r } = t, i = a.header;
return {
[i.main]: !0,
[i.vertical]: r
};
},
today: (t) => {
const { c: a = m, disabled: r } = t, i = a.today;
return {
[i.main]: !0,
[i.disabled]: r
};
},
spacer: d(m, "spacer"),
nav: d(m, "nav"),
caption: d(m, "caption"),
ul: d(m, "ul"),
li: d(m, "li"),
td: (t) => {
const {
c: a = m,
rangeStart: r,
rangeEnd: i,
rangeMid: l,
rangeSplitEnd: f,
rangeSplitStart: g,
active: C,
focused: $,
selected: k,
today: M,
weekend: S,
disabled: y,
isOtherMonth: P,
isEmpty: w,
isWeek: z
} = t, c = a.td;
return z ? {
[c.main]: !0,
[c.isWeek]: z
} : w ? {
[c.main]: !0,
[c.isEmpty]: w
} : {
[c.main]: !0,
[c.rangeStart]: r,
[c.rangeEnd]: i,
[c.rangeMid]: l,
[c.rangeSplitEnd]: f,
[c.rangeSplitStart]: g,
[c.active]: C,
[c.focused]: $,
[c.selected]: k,
[c.today]: M,
[c.weekend]: S,
[c.disabled]: y,
[c.isOtherMonth]: P
};
},
scrollable: (t) => {
const { c: a = m, horizontal: r } = t, i = a.scrollable;
return {
[i.main]: !0,
[i.content]: !0,
[i.horizontal]: r
};
},
scrollableSelector: d(m, "scrollableSelector"),
scrollablePlaceholder: (t) => {
const { c: a = m, horizontal: r } = t, i = a.scrollablePlaceholder;
return {
[i.main]: !0,
[i.horizontal]: r
};
},
link: d(m, "link"),
navigationMarker: (t) => {
const { c: a = m, isRangeStart: r } = t;
return {
[a.navigationMarker]: r
};
}
}, E = {
wrapper: {
main: `${e.prefix}-${v.dateinput}`,
input: `${p}`,
size: {
small: `${p}-${h.small}`,
medium: `${p}-${h.medium}`,
large: `${p}-${h.large}`
},
fillMode: {
solid: `${p}-${B.solid}`,
outline: `${p}-${B.outline}`,
flat: `${p}-${B.flat}`
},
rounded: {
small: `${e.prefix}-${e.rounded}-${q.small}`,
medium: `${e.prefix}-${e.rounded}-${q.medium}`,
large: `${e.prefix}-${e.rounded}-${q.large}`
},
disabled: `${e.prefix}-${s.disabled}`,
required: `${e.prefix}-${s.required}`,
invalid: `${e.prefix}-${s.invalid}`
},
inputInner: `${p}-${F.inner}`,
inputSpinner: {
main: `${p}-${F.spinner}`,
button: `${e.prefix}-${F.spin}-${b.button}`
},
spinnerIncrease: `${e.prefix}-${F.spinner}-${I.increase}`,
spinnerDecrease: `${e.prefix}-${F.spinner}-${I.decrease}`,
clearButton: `${e.prefix}-${e.clear}-${e.value}`
}, A = {
wrapper: (t) => {
var k, M, S, y, P, w, z, c;
const { c: a = E, size: r, fillMode: i, rounded: l, disabled: f, required: g, invalid: C } = t, $ = a.wrapper;
return {
[$.main]: !0,
[$.input]: !0,
[(k = $.size) == null ? void 0 : k[r]]: (M = $.size) == null ? void 0 : M[r],
[`${p}-${r}`]: r && !((S = $.size) != null && S[r]),
[(y = $.fillMode) == null ? void 0 : y[i]]: (P = $.fillMode) == null ? void 0 : P[i],
[(w = $.rounded) == null ? void 0 : w[l]]: (z = $.rounded) == null ? void 0 : z[l],
[`${e.prefix}-${e.rounded}-${l}`]: l && !((c = $.rounded) != null && c[l]),
[$.disabled]: f,
[$.invalid]: C,
[$.required]: g
};
},
inputInner: d(E, "inputInner"),
inputSpinner: (t) => {
const { c: a = E } = t, r = a.inputSpinner;
return {
[r.main]: !0,
[r.button]: !0
};
},
spinnerIncrease: d(E, "spinnerIncrease"),
spinnerDecrease: d(E, "spinnerDecrease"),
clearButton: d(E, "clearButton")
}, W = {
wrapper: {
main: `${e.prefix}-${v.datetimepicker}`,
input: `${p}`,
size: {
small: `${p}-${h.small}`,
medium: `${p}-${h.medium}`,
large: `${p}-${h.large}`
},
fillMode: {
solid: `${p}-${B.solid}`,
outline: `${p}-${B.outline}`,
flat: `${p}-${B.flat}`
},
rounded: {
small: `${e.prefix}-${e.rounded}-${q.small}`,
medium: `${e.prefix}-${e.rounded}-${q.medium}`,
large: `${e.prefix}-${e.rounded}-${q.large}`
},
disabled: `${e.prefix}-${s.disabled}`,
required: `${e.prefix}-${s.required}`,
invalid: `${e.prefix}-${s.invalid}`
},
inputButton: `${p}-${b.button}`,
popup: {
main: `${e.prefix}-${v.datetime}-${o.container}`,
reset: `${e.prefix}-${e.reset}`
},
wrap: {
main: `${e.prefix}-${v.datetime}-${o.wrap}`,
date: `${e.prefix}-${n.date}-${o.tab}`,
time: `${e.prefix}-${n.time}-${o.tab}`,
disabled: `${e.prefix}-${s.disabled}`
},
timeFooter: {
main: `${e.prefix}-${v.datetime}-${b.footer}`,
actions: `${e.prefix}-${o.actions}`,
stretched: `${e.prefix}-${o.actions}-${s.stretched}`
},
buttonGroup: `${e.prefix}-${v.datetime}-${v.buttongroup}`,
selector: `${e.prefix}-${v.datetime}-${n.selector}`,
calendarWrap: `${e.prefix}-${v.datetime}-${u}-${o.wrap}`,
timeWrap: `${e.prefix}-${v.datetime}-${n.time}-${o.wrap}`,
timeSelector: {
main: `${e.prefix}-${n.timeselector}`,
size: {
medium: `${e.prefix}-${n.timeselector}-${h.medium}`,
large: `${e.prefix}-${n.timeselector}-${h.large}`
},
disabled: `${e.prefix}-${s.disabled}`,
reset: `${e.prefix}-${e.reset}`
}
}, J = {
wrapper: (t) => {
var k, M, S, y, P, w, z, c;
const { c: a = W, size: r, fillMode: i, rounded: l, disabled: f, required: g, invalid: C } = t, $ = a.wrapper;
return {
[$.main]: !0,
[$.input]: !0,
[(k = $.size) == null ? void 0 : k[r]]: (M = $.size) == null ? void 0 : M[r],
[`${p}-${r}`]: r && !((S = $.size) != null && S[r]),
[(y = $.fillMode) == null ? void 0 : y[i]]: (P = $.fillMode) == null ? void 0 : P[i],
[(w = $.rounded) == null ? void 0 : w[l]]: (z = $.rounded) == null ? void 0 : z[l],
[`${e.prefix}-${e.rounded}-${l}`]: l && !((c = $.rounded) != null && c[l]),
[$.disabled]: f,
[$.invalid]: C,
[$.required]: g
};
},
inputButton: d(W, "inputButton"),
popup: (t) => {
const { c: a = W } = t, r = a.popup;
return {
[r.main]: !0,
[r.reset]: !0
};
},
wrap: (t) => {
const { c: a = W, disabled: r, date: i, time: l } = t, f = a.wrap;
return {
[f.main]: !0,
[f.time]: l,
[f.date]: i,
[f.disabled]: r
};
},
timeFooter: (t) => {
const { c: a = W } = t, r = a.timeFooter;
return {
[r.main]: !0,
[r.actions]: !0,
[r.stretched]: !0
};
},
buttonGroup: d(W, "buttonGroup"),
selector: d(W, "selector"),
calendarWrap: d(W, "calendarWrap"),
timeWrap: d(W, "timeWrap"),
timeSelector: (t) => {
const { c: a = W, mobileMode: r } = t, i = a.timeSelector;
return {
[i.main]: r,
[i.size.large]: r,
[i.reset]: r
};
}
};
export {
j as uCalendar,
A as uDateInput,
J as uDateTimePicker,
R as uTime,
U as uTimePicker
};