@progress/kendo-vue-inputs
Version:
419 lines (418 loc) • 12.6 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as A, createVNode as o, isVNode as R, h as I } from "vue";
import { Button as D } from "@progress/kendo-vue-buttons";
import { ADAPTIVE_SMALL_BREAKPOINT as M, ADAPTIVE_MEDIUM_BREAKPOINT as E, kendoThemeMaps as c, validatePackage as N, guid as p, canUseDOM as H, getRef as a, getTabIndex as F, classNames as h, Icon as L, getIconName as K, Keys as n, setRef as _ } from "@progress/kendo-vue-common";
import { packageMetadata as z } from "../package-metadata.mjs";
import { Picker as j } from "./Picker.mjs";
import { FlatColorPicker as x } from "./FlatColorPicker.mjs";
import { DEFAULT_GRADIENT_SETTINGS as W } from "./utils/color-cache.mjs";
import { provideLocalizationService as G } from "@progress/kendo-vue-intl";
import { colorPickerDropdownButtonAriaLabel as f, messages as s, colorPickerAdaptiveTitle as m, flatColorPickerApplyBtn as g, flatColorPickerCancelBtn as b } from "../messages/main.mjs";
import { caretAltDownIcon as U } from "@progress/kendo-svg-icons";
import { DEFAULT_PRESET as q } from "./ColorPalette.mjs";
import { ColorsAdaptiveMode as J } from "./common/ColorsAdaptiveMode.mjs";
function Q(e) {
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !R(e);
}
const ue = /* @__PURE__ */ A({
name: "KendoColorPicker",
model: {
event: "changemodel"
},
emits: {
open: null,
close: null,
changemodel: null,
"update:modelValue": null,
"update:modelRgbaValue": null,
activecolorclick: null,
focus: null,
blur: null,
change: null,
viewchange: null
},
props: {
modelValue: String,
modelRgbaValue: String,
value: {
type: String,
default: void 0
},
defaultValue: String,
disabled: Boolean,
dir: String,
id: String,
ariaLabelledBy: String,
ariaDescribedBy: String,
showClearButton: {
type: Boolean,
default: !0
},
showPreview: {
type: Boolean,
default: !0
},
showButtons: {
type: Boolean,
default: !0
},
paletteSettings: {
type: Object,
default: function() {
return {
palette: q
};
}
},
valid: {
type: Boolean,
default: !0
},
tabIndex: {
type: Number,
default: 0
},
title: String,
icon: String,
svgIcon: Object,
iconClassName: String,
popupSettings: {
type: Object,
default: function() {
return {};
}
},
gradientSettings: {
type: Object,
default: function() {
return W;
}
},
flatColorPickerSettings: {
type: Object,
default: function() {
return {};
}
},
open: {
type: Boolean,
default: void 0
},
size: {
type: String,
default: "medium",
validator: function(e) {
return [null, "small", "medium", "large"].includes(e);
}
},
rounded: {
type: String,
default: "medium",
validator: function(e) {
return [null, "small", "medium", "large", "full"].includes(e);
}
},
fillMode: {
type: String,
default: "solid",
validator: function(e) {
return [null, "solid", "flat", "outline"].includes(e);
}
},
view: {
type: String,
default: "combo",
validator: function(e) {
return ["gradient", "palette", "combo"].includes(e);
}
},
selectedView: {
type: Number,
default: void 0
},
adaptive: {
type: Boolean,
default: !1
},
adaptiveTitle: {
type: String
}
},
inject: {
kendoLocalizationService: {
default: null
},
adaptiveModeBreakpoints: {
default: {
small: M,
medium: E
}
}
},
data() {
return {
focused: !1,
currentValue: this.$props.defaultValue,
currentOpen: !1,
flatcolorpickerRef: null,
windowWidth: 0,
observer: null
};
},
computed: {
isValueControlled() {
return this.$props.value !== void 0;
},
isOpenControlled() {
return this.$props.open !== void 0;
},
computedValue() {
return this.isValueControlled ? this.$props.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.$props.modelRgbaValue !== void 0 ? this.$props.modelRgbaValue : this.currentValue !== void 0 ? this.currentValue : this.defaultValue;
},
computedOpen() {
return this.isOpenControlled ? this.$props.open : this.currentOpen;
},
wrapperClassName() {
const {
size: e,
fillMode: i,
rounded: t
} = this.$props;
return {
"k-picker": !0,
"k-colorpicker": !0,
"k-icon-picker": !0,
[`k-picker-${c.sizeMap[e] || e}`]: e,
[`k-picker-${i}`]: i,
[`k-rounded-${c.roundedMap[t] || t}`]: t,
"k-invalid": !this.valid,
"k-disabled": this.disabled,
"k-focus": this.focused
};
},
animationStyles() {
return this.windowWidth <= this.adaptiveModeBreakpoints.small ? {
top: 0,
width: "100%",
height: "100%"
} : void 0;
},
classNameAdaptive() {
return this.windowWidth <= this.adaptiveModeBreakpoints.small ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom";
},
adaptiveState() {
return !!(this.$props.adaptive && this.windowWidth && this.windowWidth <= this.adaptiveModeBreakpoints.medium);
}
},
created() {
N(z), this._popupId = "popup" + p(), this.focusableElementGuid = p();
},
mounted() {
this.observer = H && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.flatcolorpickerRef = a(this, "flatcolorpicker"), this.button = a(this, "button");
},
unmounted() {
var e;
(e = this.document) != null && e.body && this.observer && this.observer.disconnect();
},
render() {
let e;
const {
disabled: i,
tabIndex: t,
dir: u,
view: k,
selectedView: v,
showClearButton: w,
showPreview: y,
showButtons: C,
popupSettings: S,
size: B,
adaptiveTitle: V
} = this.$props, l = G(this), O = l.toLanguageString(f, s[f]), $ = V || l.toLanguageString(m, s[m]), T = l.toLanguageString(g, s[g]), P = l.toLanguageString(b, s[b]), d = function() {
return I(x, {
onKeydown: this.onKeyDownHandler,
ref: _(this, "flatcolorpicker"),
view: k,
selectedView: v,
showClearButton: w,
showPreview: y,
showButtons: this.adaptiveState ? !1 : C,
size: this.adaptiveState ? "large" : B,
value: this.computedValue || void 0,
onChange: this.onFlatChangeHandler,
onFocusout: this.onBlurHandler,
onViewchange: this.onViewChange,
paletteSettings: this.paletteSettings,
gradientSettings: this.gradientSettings,
adaptive: this.adaptiveState,
...this.flatColorPickerSettings
});
};
return o("span", {
class: this.wrapperClassName,
role: "combobox",
dir: u,
id: this.$props.id,
"aria-labelledby": this.$props.ariaLabelledBy,
"aria-describedby": this.$props.ariaDescribedBy,
"aria-disabled": this.$props.disabled,
"aria-haspopup": "dialog",
"aria-expanded": this.computedOpen,
ref: this.focusableElementGuid,
tabindex: F(t, i),
title: this.$props.title,
onKeydown: this.onButtonKeyDown,
onFocusin: this.onFocusHandler,
onFocusout: this.onButtonBlur
}, [o("span", {
onClick: this.onActiveColorClickHandler,
class: "k-input-inner"
}, [o("span", {
class: h("k-value-icon", "k-color-preview", {
"k-no-color": !this.computedValue,
"k-icon-color-preview": this.icon || this.iconClassName
})
}, [(this.iconClassName || this.icon || this.svgIcon) && o(L, {
class: h("k-color-preview-icon", this.iconClassName),
name: K(this.icon),
icon: this.svgIcon
}, null), o("span", {
class: "k-color-preview-mask",
style: {
backgroundColor: this.computedValue
}
}, null)])]), o(D, {
type: "button",
tabIndex: -1,
ref: (r) => {
this.buttonRef = r;
},
onClick: this.onClickHandler,
rounded: null,
class: "k-input-button",
icon: "caret-alt-down",
svgIcon: U,
"aria-label": O
}, null), !this.adaptiveState && o(j, {
dir: u,
id: this._popupId,
open: this.computedOpen,
onOpen: this.onOpenHandler,
popupAnchor: this.focusableElementGuid,
popupSettings: {
...S
}
}, Q(e = d.call(this)) ? e : {
default: () => [e]
}), this.adaptiveState && o(J, {
expand: this.computedOpen,
animationStyles: this.animationStyles,
classNameAdaptive: this.classNameAdaptive,
title: $,
applyText: T,
cancelText: P,
componentToRender: d.call(this),
onActionSheetClose: () => this.setOpen(!this.computedOpen),
onCancelBtnClick: () => this.flatcolorpickerRef.handleCancelBtnClick(),
onApplyBtnClick: (r) => this.flatcolorpickerRef.triggerChange(r)
}, null)]);
},
methods: {
calculateMedia(e) {
for (let i of e)
this.windowWidth = i.target.clientWidth;
},
focusElement() {
this.$el && this.$el.focus();
},
setOpen(e, i) {
!e && !i && this.$el && this.$el.focus(), this.currentOpen = e, this.$emit(e ? "open" : "close");
},
onButtonKeyDown(e) {
const {
altKey: i,
keyCode: t
} = e;
if (t === n.esc) {
e.preventDefault(), e.stopPropagation(), this.setOpen(!1);
return;
}
if (t === n.enter) {
e.preventDefault(), e.stopPropagation(), this.setOpen(!this.computedOpen);
return;
}
i && t === n.down && (e.preventDefault(), e.stopPropagation(), this.setOpen(!0));
},
onKeyDownHandler(e) {
const {
altKey: i,
keyCode: t
} = e;
if (t === n.esc) {
e.preventDefault(), e.stopPropagation(), this.setOpen(!1);
return;
}
if (t === n.enter) {
e.preventDefault(), e.stopPropagation(), this.focusElement();
return;
}
i && t === n.up && (e.preventDefault(), e.stopPropagation(), this.setOpen(!1), this.focusElement());
},
onOpenHandler() {
const e = a(this, "flatcolorpicker");
e && e.focus();
},
onClickHandler() {
this.setOpen(!this.computedOpen, !0);
},
onActiveColorClickHandler(e) {
this.$emit("activecolorclick", {
event: e,
value: this.computedValue
});
},
isViewFocused() {
return !!(document.activeElement && document.activeElement.closest(`#${this._popupId}`));
},
onButtonBlur(e) {
this.focused = this.isViewFocused(), this.$emit("blur", {
event: e
});
},
onFocusHandler(e) {
this.blurTimeoutRef ? (clearTimeout(this.blurTimeoutRef), this.blurTimeoutRef = void 0, e.target === this.$el && this.setOpen(!1)) : this.focused = !0, this.$emit("focus", {
event: e
});
},
onBlurTimeout() {
const e = this.isViewFocused();
e || this.setOpen(!1, !0), this.focused = e, this.blurTimeoutRef = void 0;
},
onBlurHandler() {
clearTimeout(this.blurTimeoutRef), this.palette = a(this, "palette"), this.gradient = a(this, "gradient"), this.blurTimeoutRef = setTimeout(this.onBlurTimeout, 200);
},
onViewChange(e) {
this.$emit("viewchange", e);
},
onChangeHandler(e, i) {
const t = e.value;
this.isValueControlled || (this.currentValue = t), i && this.setOpen(!1), this.$emit("changemodel", t), this.$emit("update:modelRgbaValue", e.rgbaValue), this.$emit("update:modelValue", t), this.$emit("change", {
value: t,
rgbaValue: e.rgbaValue,
event: e
});
},
onFlatChangeHandler(e) {
this.onChangeHandler(e, !0);
}
}
});
export {
ue as ColorPicker
};