1
0
mirror of https://github.com/tabler/tabler.git synced 2026-08-14 15:22:22 +04:00

update core to v1.0.0-beta19

This commit is contained in:
codecalm
2023-06-05 15:57:48 +02:00
parent d9e00b2c53
commit fc91e6ae8c
782 changed files with 55013 additions and 14765 deletions
+55 -44
View File
@@ -1,5 +1,5 @@
/*!
* Bootstrap v5.3.0-alpha3 (https://getbootstrap.com/)
* Bootstrap v5.3.0 (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
@@ -311,6 +311,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -589,6 +590,7 @@
* --------------------------------------------------------------------------
*/
/**
* Class definition
*/
@@ -641,11 +643,12 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
const VERSION = '5.3.0-alpha2';
const VERSION = '5.3.0';
/**
* Class definition
@@ -708,6 +711,7 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
const getSelector = element => {
let selector = element.getAttribute('data-bs-target');
if (!selector || selector === '#') {
@@ -796,6 +800,7 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
const enableDismissTrigger = (component, method = 'hide') => {
const clickEvent = `click.dismiss${component.EVENT_KEY}`;
const name = component.NAME;
@@ -821,6 +826,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -895,6 +901,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -958,6 +965,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -1077,6 +1085,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -1449,6 +1458,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -2126,7 +2136,6 @@
}
if (!contains(state.elements.popper, arrowElement)) {
return;
}
@@ -2268,7 +2277,6 @@
adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
_options$roundOffsets = options.roundOffsets,
roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
var commonStyles = {
placement: getBasePlacement(state.placement),
variation: getVariation(state.placement),
@@ -3336,8 +3344,7 @@
state.orderedModifiers = orderedModifiers.filter(function (m) {
return m.enabled;
}); // Validate the provided modifiers so that the consumer will get warned
});
runModifierEffects();
return instance.update();
},
@@ -3357,7 +3364,6 @@
// anymore
if (!areValidElements(reference, popper)) {
return;
} // Store the reference and popper rects to be read by modifiers
@@ -3382,7 +3388,6 @@
});
for (var index = 0; index < state.orderedModifiers.length; index++) {
if (state.reset === true) {
state.reset = false;
index = -1;
@@ -3420,7 +3425,6 @@
};
if (!areValidElements(reference, popper)) {
return instance;
}
@@ -3435,11 +3439,11 @@
// one.
function runModifierEffects() {
state.orderedModifiers.forEach(function (_ref3) {
var name = _ref3.name,
_ref3$options = _ref3.options,
options = _ref3$options === void 0 ? {} : _ref3$options,
effect = _ref3.effect;
state.orderedModifiers.forEach(function (_ref) {
var name = _ref.name,
_ref$options = _ref.options,
options = _ref$options === void 0 ? {} : _ref$options,
effect = _ref.effect;
if (typeof effect === 'function') {
var cleanupFn = effect({
@@ -3527,6 +3531,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -3894,6 +3899,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -4018,6 +4024,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -4116,6 +4123,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -4213,6 +4221,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -4517,6 +4526,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -4747,34 +4757,6 @@
* --------------------------------------------------------------------------
*/
const uriAttributes = new Set(['background', 'cite', 'href', 'itemtype', 'longdesc', 'poster', 'src', 'xlink:href']);
/**
* A pattern that recognizes a commonly useful subset of URLs that are safe.
*
* Shout-out to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts
*/
const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file|sms):|[^#&/:?]*(?:[#/?]|$))/i;
/**
* A pattern that matches safe data URLs. Only matches image, video and audio types.
*
* Shout-out to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts
*/
const DATA_URL_PATTERN = /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[\d+/a-z]+=*$/i;
const allowedAttribute = (attribute, allowedAttributeList) => {
const attributeName = attribute.nodeName.toLowerCase();
if (allowedAttributeList.includes(attributeName)) {
if (uriAttributes.has(attributeName)) {
return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue) || DATA_URL_PATTERN.test(attribute.nodeValue));
}
return true;
}
// Check if a regular expression validates the attribute.
return allowedAttributeList.filter(attributeRegex => attributeRegex instanceof RegExp).some(regex => regex.test(attributeName));
};
// js-docs-start allow-list
const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i;
const DefaultAllowlist = {
@@ -4812,6 +4794,28 @@
};
// js-docs-end allow-list
const uriAttributes = new Set(['background', 'cite', 'href', 'itemtype', 'longdesc', 'poster', 'src', 'xlink:href']);
/**
* A pattern that recognizes URLs that are safe wrt. XSS in URL navigation
* contexts.
*
* Shout-out to Angular https://github.com/angular/angular/blob/15.2.8/packages/core/src/sanitization/url_sanitizer.ts#L38
*/
// eslint-disable-next-line unicorn/better-regex
const SAFE_URL_PATTERN = /^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:/?#]*(?:[/?#]|$))/i;
const allowedAttribute = (attribute, allowedAttributeList) => {
const attributeName = attribute.nodeName.toLowerCase();
if (allowedAttributeList.includes(attributeName)) {
if (uriAttributes.has(attributeName)) {
return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue));
}
return true;
}
// Check if a regular expression validates the attribute.
return allowedAttributeList.filter(attributeRegex => attributeRegex instanceof RegExp).some(regex => regex.test(attributeName));
};
function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) {
if (!unsafeHtml.length) {
return unsafeHtml;
@@ -4846,6 +4850,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -4981,6 +4986,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -5492,6 +5498,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -5572,6 +5579,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -5750,11 +5758,11 @@
if (!anchor.hash || isDisabled(anchor)) {
continue;
}
const observableSection = SelectorEngine.findOne(anchor.hash, this._element);
const observableSection = SelectorEngine.findOne(decodeURI(anchor.hash), this._element);
// ensure that the observableSection exists & is visible
if (isVisible(observableSection)) {
this._targetLinks.set(anchor.hash, anchor);
this._targetLinks.set(decodeURI(anchor.hash), anchor);
this._observableSections.set(anchor.hash, observableSection);
}
}
@@ -5831,6 +5839,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -6092,6 +6101,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -6274,6 +6284,7 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
const index_umd = {
Alert,
Button,
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+48 -32
View File
@@ -1,5 +1,5 @@
/*!
* Bootstrap v5.3.0-alpha3 (https://getbootstrap.com/)
* Bootstrap v5.3.0 (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
@@ -307,6 +307,7 @@ const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -585,6 +586,7 @@ const Manipulator = {
* --------------------------------------------------------------------------
*/
/**
* Class definition
*/
@@ -637,11 +639,12 @@ class Config {
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
const VERSION = '5.3.0-alpha2';
const VERSION = '5.3.0';
/**
* Class definition
@@ -704,6 +707,7 @@ class BaseComponent extends Config {
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
const getSelector = element => {
let selector = element.getAttribute('data-bs-target');
if (!selector || selector === '#') {
@@ -792,6 +796,7 @@ const SelectorEngine = {
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
const enableDismissTrigger = (component, method = 'hide') => {
const clickEvent = `click.dismiss${component.EVENT_KEY}`;
const name = component.NAME;
@@ -817,6 +822,7 @@ const enableDismissTrigger = (component, method = 'hide') => {
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -891,6 +897,7 @@ defineJQueryPlugin(Alert);
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -954,6 +961,7 @@ defineJQueryPlugin(Button);
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -1073,6 +1081,7 @@ class Swipe extends Config {
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -1445,6 +1454,7 @@ defineJQueryPlugin(Carousel);
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -1678,6 +1688,7 @@ defineJQueryPlugin(Collapse);
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -2045,6 +2056,7 @@ defineJQueryPlugin(Dropdown);
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -2169,6 +2181,7 @@ class Backdrop extends Config {
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -2267,6 +2280,7 @@ class FocusTrap extends Config {
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -2364,6 +2378,7 @@ class ScrollBarHelper {
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -2668,6 +2683,7 @@ defineJQueryPlugin(Modal);
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -2898,34 +2914,6 @@ defineJQueryPlugin(Offcanvas);
* --------------------------------------------------------------------------
*/
const uriAttributes = new Set(['background', 'cite', 'href', 'itemtype', 'longdesc', 'poster', 'src', 'xlink:href']);
/**
* A pattern that recognizes a commonly useful subset of URLs that are safe.
*
* Shout-out to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts
*/
const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file|sms):|[^#&/:?]*(?:[#/?]|$))/i;
/**
* A pattern that matches safe data URLs. Only matches image, video and audio types.
*
* Shout-out to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts
*/
const DATA_URL_PATTERN = /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[\d+/a-z]+=*$/i;
const allowedAttribute = (attribute, allowedAttributeList) => {
const attributeName = attribute.nodeName.toLowerCase();
if (allowedAttributeList.includes(attributeName)) {
if (uriAttributes.has(attributeName)) {
return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue) || DATA_URL_PATTERN.test(attribute.nodeValue));
}
return true;
}
// Check if a regular expression validates the attribute.
return allowedAttributeList.filter(attributeRegex => attributeRegex instanceof RegExp).some(regex => regex.test(attributeName));
};
// js-docs-start allow-list
const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i;
const DefaultAllowlist = {
@@ -2963,6 +2951,28 @@ const DefaultAllowlist = {
};
// js-docs-end allow-list
const uriAttributes = new Set(['background', 'cite', 'href', 'itemtype', 'longdesc', 'poster', 'src', 'xlink:href']);
/**
* A pattern that recognizes URLs that are safe wrt. XSS in URL navigation
* contexts.
*
* Shout-out to Angular https://github.com/angular/angular/blob/15.2.8/packages/core/src/sanitization/url_sanitizer.ts#L38
*/
// eslint-disable-next-line unicorn/better-regex
const SAFE_URL_PATTERN = /^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:/?#]*(?:[/?#]|$))/i;
const allowedAttribute = (attribute, allowedAttributeList) => {
const attributeName = attribute.nodeName.toLowerCase();
if (allowedAttributeList.includes(attributeName)) {
if (uriAttributes.has(attributeName)) {
return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue));
}
return true;
}
// Check if a regular expression validates the attribute.
return allowedAttributeList.filter(attributeRegex => attributeRegex instanceof RegExp).some(regex => regex.test(attributeName));
};
function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) {
if (!unsafeHtml.length) {
return unsafeHtml;
@@ -2997,6 +3007,7 @@ function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) {
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -3132,6 +3143,7 @@ class TemplateFactory extends Config {
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -3643,6 +3655,7 @@ defineJQueryPlugin(Tooltip);
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -3723,6 +3736,7 @@ defineJQueryPlugin(Popover);
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -3901,11 +3915,11 @@ class ScrollSpy extends BaseComponent {
if (!anchor.hash || isDisabled(anchor)) {
continue;
}
const observableSection = SelectorEngine.findOne(anchor.hash, this._element);
const observableSection = SelectorEngine.findOne(decodeURI(anchor.hash), this._element);
// ensure that the observableSection exists & is visible
if (isVisible(observableSection)) {
this._targetLinks.set(anchor.hash, anchor);
this._targetLinks.set(decodeURI(anchor.hash), anchor);
this._observableSections.set(anchor.hash, observableSection);
}
}
@@ -3982,6 +3996,7 @@ defineJQueryPlugin(ScrollSpy);
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -4243,6 +4258,7 @@ defineJQueryPlugin(Tab);
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+49 -32
View File
@@ -1,5 +1,5 @@
/*!
* Bootstrap v5.3.0-alpha3 (https://getbootstrap.com/)
* Bootstrap v5.3.0 (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
@@ -330,6 +330,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -608,6 +609,7 @@
* --------------------------------------------------------------------------
*/
/**
* Class definition
*/
@@ -660,11 +662,12 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
const VERSION = '5.3.0-alpha2';
const VERSION = '5.3.0';
/**
* Class definition
@@ -727,6 +730,7 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
const getSelector = element => {
let selector = element.getAttribute('data-bs-target');
if (!selector || selector === '#') {
@@ -815,6 +819,7 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
const enableDismissTrigger = (component, method = 'hide') => {
const clickEvent = `click.dismiss${component.EVENT_KEY}`;
const name = component.NAME;
@@ -840,6 +845,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -914,6 +920,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -977,6 +984,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -1096,6 +1104,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -1468,6 +1477,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -1701,6 +1711,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -2068,6 +2079,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -2192,6 +2204,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -2290,6 +2303,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -2387,6 +2401,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -2691,6 +2706,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -2921,34 +2937,6 @@
* --------------------------------------------------------------------------
*/
const uriAttributes = new Set(['background', 'cite', 'href', 'itemtype', 'longdesc', 'poster', 'src', 'xlink:href']);
/**
* A pattern that recognizes a commonly useful subset of URLs that are safe.
*
* Shout-out to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts
*/
const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file|sms):|[^#&/:?]*(?:[#/?]|$))/i;
/**
* A pattern that matches safe data URLs. Only matches image, video and audio types.
*
* Shout-out to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts
*/
const DATA_URL_PATTERN = /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[\d+/a-z]+=*$/i;
const allowedAttribute = (attribute, allowedAttributeList) => {
const attributeName = attribute.nodeName.toLowerCase();
if (allowedAttributeList.includes(attributeName)) {
if (uriAttributes.has(attributeName)) {
return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue) || DATA_URL_PATTERN.test(attribute.nodeValue));
}
return true;
}
// Check if a regular expression validates the attribute.
return allowedAttributeList.filter(attributeRegex => attributeRegex instanceof RegExp).some(regex => regex.test(attributeName));
};
// js-docs-start allow-list
const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i;
const DefaultAllowlist = {
@@ -2986,6 +2974,28 @@
};
// js-docs-end allow-list
const uriAttributes = new Set(['background', 'cite', 'href', 'itemtype', 'longdesc', 'poster', 'src', 'xlink:href']);
/**
* A pattern that recognizes URLs that are safe wrt. XSS in URL navigation
* contexts.
*
* Shout-out to Angular https://github.com/angular/angular/blob/15.2.8/packages/core/src/sanitization/url_sanitizer.ts#L38
*/
// eslint-disable-next-line unicorn/better-regex
const SAFE_URL_PATTERN = /^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:/?#]*(?:[/?#]|$))/i;
const allowedAttribute = (attribute, allowedAttributeList) => {
const attributeName = attribute.nodeName.toLowerCase();
if (allowedAttributeList.includes(attributeName)) {
if (uriAttributes.has(attributeName)) {
return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue));
}
return true;
}
// Check if a regular expression validates the attribute.
return allowedAttributeList.filter(attributeRegex => attributeRegex instanceof RegExp).some(regex => regex.test(attributeName));
};
function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) {
if (!unsafeHtml.length) {
return unsafeHtml;
@@ -3020,6 +3030,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -3155,6 +3166,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -3666,6 +3678,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -3746,6 +3759,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -3924,11 +3938,11 @@
if (!anchor.hash || isDisabled(anchor)) {
continue;
}
const observableSection = SelectorEngine.findOne(anchor.hash, this._element);
const observableSection = SelectorEngine.findOne(decodeURI(anchor.hash), this._element);
// ensure that the observableSection exists & is visible
if (isVisible(observableSection)) {
this._targetLinks.set(anchor.hash, anchor);
this._targetLinks.set(decodeURI(anchor.hash), anchor);
this._observableSections.set(anchor.hash, observableSection);
}
}
@@ -4005,6 +4019,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -4266,6 +4281,7 @@
* --------------------------------------------------------------------------
*/
/**
* Constants
*/
@@ -4448,6 +4464,7 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
const index_umd = {
Alert,
Button,
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+577
View File
@@ -0,0 +1,577 @@
.clr-picker {
display: none;
flex-wrap: wrap;
position: absolute;
width: 200px;
z-index: 1000;
border-radius: 10px;
background-color: #fff;
justify-content: flex-end;
direction: ltr;
box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.clr-picker.clr-open,
.clr-picker[data-inline="true"] {
display: flex;
}
.clr-picker[data-inline="true"] {
position: relative;
}
.clr-gradient {
position: relative;
width: 100%;
height: 100px;
margin-bottom: 15px;
border-radius: 3px 3px 0 0;
background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);
cursor: pointer;
}
.clr-marker {
position: absolute;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border: 1px solid #fff;
border-radius: 50%;
background-color: currentColor;
cursor: pointer;
}
.clr-picker input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
}
.clr-picker input[type="range"]::-webkit-slider-thumb {
width: 8px;
height: 8px;
-webkit-appearance: none;
}
.clr-picker input[type="range"]::-moz-range-track {
width: 100%;
height: 8px;
border: 0;
}
.clr-picker input[type="range"]::-moz-range-thumb {
width: 8px;
height: 8px;
border: 0;
}
.clr-hue {
background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
}
.clr-hue,
.clr-alpha {
position: relative;
width: calc(100% - 40px);
height: 8px;
margin: 5px 20px;
border-radius: 4px;
}
.clr-alpha span {
display: block;
height: 100%;
width: 100%;
border-radius: inherit;
background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);
}
.clr-hue input,
.clr-alpha input {
position: absolute;
width: calc(100% + 16px);
height: 16px;
left: -8px;
top: -4px;
margin: 0;
background-color: transparent;
opacity: 0;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.clr-hue div,
.clr-alpha div {
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 50%;
margin-left: -8px;
transform: translateY(-50%);
border: 2px solid #fff;
border-radius: 50%;
background-color: currentColor;
box-shadow: 0 0 1px #888;
pointer-events: none;
}
.clr-alpha div:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
border-radius: 50%;
background-color: currentColor;
}
.clr-format {
display: none;
order: 1;
width: calc(100% - 40px);
margin: 0 20px 20px;
}
.clr-segmented {
display: flex;
position: relative;
width: 100%;
margin: 0;
padding: 0;
border: 1px solid #ddd;
border-radius: 15px;
box-sizing: border-box;
color: #999;
font-size: 12px;
}
.clr-segmented input,
.clr-segmented legend {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
left: 0;
top: 0;
opacity: 0;
pointer-events: none;
}
.clr-segmented label {
flex-grow: 1;
margin: 0;
padding: 4px 0;
font-size: inherit;
font-weight: normal;
line-height: initial;
text-align: center;
cursor: pointer;
}
.clr-segmented label:first-of-type {
border-radius: 10px 0 0 10px;
}
.clr-segmented label:last-of-type {
border-radius: 0 10px 10px 0;
}
.clr-segmented input:checked + label {
color: #fff;
background-color: #666;
}
.clr-swatches {
order: 2;
width: calc(100% - 32px);
margin: 0 16px;
}
.clr-swatches div {
display: flex;
flex-wrap: wrap;
padding-bottom: 12px;
justify-content: center;
}
.clr-swatches button {
position: relative;
width: 20px;
height: 20px;
margin: 0 4px 6px 4px;
padding: 0;
border: 0;
border-radius: 50%;
color: inherit;
text-indent: -1000px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}
.clr-swatches button:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: inherit;
background-color: currentColor;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
input.clr-color {
order: 1;
width: calc(100% - 80px);
height: 32px;
margin: 15px 20px 20px auto;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 16px;
color: #444;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
text-align: center;
box-shadow: none;
}
input.clr-color:focus {
outline: none;
border: 1px solid #1e90ff;
}
.clr-close,
.clr-clear {
display: none;
order: 2;
height: 24px;
margin: 0 20px 20px;
padding: 0 20px;
border: 0;
border-radius: 12px;
color: #fff;
background-color: #666;
font-family: inherit;
font-size: 12px;
font-weight: 400;
cursor: pointer;
}
.clr-close {
display: block;
margin: 0 20px 20px auto;
}
.clr-preview {
position: relative;
width: 32px;
height: 32px;
margin: 15px 0 20px 20px;
border-radius: 50%;
overflow: hidden;
}
.clr-preview:before,
.clr-preview:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
border: 1px solid #fff;
border-radius: 50%;
}
.clr-preview:after {
border: 0;
background-color: currentColor;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
.clr-preview button {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
outline-offset: -2px;
background-color: transparent;
text-indent: -9999px;
cursor: pointer;
overflow: hidden;
}
.clr-marker,
.clr-hue div,
.clr-alpha div,
.clr-color {
box-sizing: border-box;
}
.clr-field {
display: inline-block;
position: relative;
color: transparent;
}
.clr-field input {
margin: 0;
direction: ltr;
}
.clr-field.clr-rtl input {
text-align: right;
}
.clr-field button {
position: absolute;
width: 30px;
height: 100%;
right: 0;
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 0;
border: 0;
color: inherit;
text-indent: -1000px;
white-space: nowrap;
overflow: hidden;
pointer-events: none;
}
.clr-field.clr-rtl button {
right: auto;
left: 0;
}
.clr-field button:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: inherit;
background-color: currentColor;
box-shadow: inset 0 0 1px rgba(0,0,0,.5);
}
.clr-alpha,
.clr-alpha div,
.clr-swatches button,
.clr-preview:before,
.clr-field button {
background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
background-position: 0 0, 4px 4px;
background-size: 8px 8px;
}
.clr-marker:focus {
outline: none;
}
.clr-keyboard-nav .clr-marker:focus,
.clr-keyboard-nav .clr-hue input:focus + div,
.clr-keyboard-nav .clr-alpha input:focus + div,
.clr-keyboard-nav .clr-segmented input:focus + label {
outline: none;
box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;
}
.clr-picker[data-alpha="false"] .clr-alpha {
display: none;
}
.clr-picker[data-minimal="true"] {
padding-top: 16px;
}
.clr-picker[data-minimal="true"] .clr-gradient,
.clr-picker[data-minimal="true"] .clr-hue,
.clr-picker[data-minimal="true"] .clr-alpha,
.clr-picker[data-minimal="true"] .clr-color,
.clr-picker[data-minimal="true"] .clr-preview {
display: none;
}
/** Dark theme **/
.clr-dark {
background-color: #444;
}
.clr-dark .clr-segmented {
border-color: #777;
}
.clr-dark .clr-swatches button:after {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.clr-dark input.clr-color {
color: #fff;
border-color: #777;
background-color: #555;
}
.clr-dark input.clr-color:focus {
border-color: #1e90ff;
}
.clr-dark .clr-preview:after {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.clr-dark .clr-alpha,
.clr-dark .clr-alpha div,
.clr-dark .clr-swatches button,
.clr-dark .clr-preview:before {
background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);
}
/** Polaroid theme **/
.clr-picker.clr-polaroid {
border-radius: 6px;
box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2);
}
.clr-picker.clr-polaroid:before {
content: '';
display: block;
position: absolute;
width: 16px;
height: 10px;
left: 20px;
top: -10px;
border: solid transparent;
border-width: 0 8px 10px 8px;
border-bottom-color: currentColor;
box-sizing: border-box;
color: #fff;
filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));
pointer-events: none;
}
.clr-picker.clr-polaroid.clr-dark:before {
color: #444;
}
.clr-picker.clr-polaroid.clr-left:before {
left: auto;
right: 20px;
}
.clr-picker.clr-polaroid.clr-top:before {
top: auto;
bottom: -10px;
transform: rotateZ(180deg);
}
.clr-polaroid .clr-gradient {
width: calc(100% - 20px);
height: 120px;
margin: 10px;
border-radius: 3px;
}
.clr-polaroid .clr-hue,
.clr-polaroid .clr-alpha {
width: calc(100% - 30px);
height: 10px;
margin: 6px 15px;
border-radius: 5px;
}
.clr-polaroid .clr-hue div,
.clr-polaroid .clr-alpha div {
box-shadow: 0 0 5px rgba(0,0,0,.2);
}
.clr-polaroid .clr-format {
width: calc(100% - 20px);
margin: 0 10px 15px;
}
.clr-polaroid .clr-swatches {
width: calc(100% - 12px);
margin: 0 6px;
}
.clr-polaroid .clr-swatches div {
padding-bottom: 10px;
}
.clr-polaroid .clr-swatches button {
width: 22px;
height: 22px;
}
.clr-polaroid input.clr-color {
width: calc(100% - 60px);
margin: 10px 10px 15px auto;
}
.clr-polaroid .clr-clear {
margin: 0 10px 15px 10px;
}
.clr-polaroid .clr-close {
margin: 0 10px 15px auto;
}
.clr-polaroid .clr-preview {
margin: 10px 0 15px 10px;
}
/** Large theme **/
.clr-picker.clr-large {
width: 275px;
}
.clr-large .clr-gradient {
height: 150px;
}
.clr-large .clr-swatches button {
width: 22px;
height: 22px;
}
/** Pill (horizontal) theme **/
.clr-picker.clr-pill {
width: 380px;
padding-left: 180px;
box-sizing: border-box;
}
.clr-pill .clr-gradient {
position: absolute;
width: 180px;
height: 100%;
left: 0;
top: 0;
margin-bottom: 0;
border-radius: 3px 0 0 3px;
}
.clr-pill .clr-hue {
margin-top: 20px;
}
+475
View File
@@ -0,0 +1,475 @@
/**
* Converts an input field to a color picker input.
*/
declare function Coloris(opts: Coloris.ColorisOptions): void;
declare global {
interface GlobalEventHandlersEventMap {
"coloris:pick": CustomEvent<Coloris.PickEventData>;
}
}
declare namespace Coloris {
/**
* All color themes supported by the color picker. More themes might be added
* in the future.
*/
type Theme =
| "default"
| "large"
| "polaroid"
| "pill";
/**
* All theme modes.
*/
type ThemeMode =
| "light"
| "dark"
| "auto";
/**
* Color format used by the color picker. The format affects which value is
* shown in the input field.
* - `hex` outputs `#RRGGBB` or `#RRGGBBAA`.
* - `rgb` outputs `rgb(R, G, B)` or `rgba(R, G, B, A)`.
* - `hsl` outputs `hsl(H, S, L)` or `hsla(H, S, L, A)`.
* - `auto` guesses the format from the active input field. Defaults to `hex` if
* it fails.
* - `mixed` outputs `#RRGGBB` when alpha is 1; otherwise `rgba(R, G, B, A)`.
*/
type ColorFormat =
| "hex"
| "rgb"
| "hsl"
| "auto"
| "mixed";
/**
* A function that is called whenever a new color is picked.
*
* @param color The newly selected color, as a CSS color string.
* @since 0.18.0
*/
type OnChangeCallback = (color: string) => void;
interface Accessibility {
/**
* @default "Open color picker"
*/
open: string;
/**
* @default "Close color picker"
*/
close: string;
/**
* @default "Clear the selected color"
*/
clear: string;
/**
* @default "Saturation: {s}. Brightness: {v}."
*/
marker: string;
/**
* @default "Hue slider"
*/
hueSlider: string;
/**
* @default "Opacity slider"
*/
alphaSlider: string;
/**
* @default "Color swatch"
*/
input: string;
/**
* @default "Color format"
*/
format: string;
/**
* @default "Color swatch"
*/
swatch: string;
/**
* @default "Saturation and brightness selector. Use up, down, left and right arrow keys to select."
*/
instruction: string;
}
/**
* Configuration for the optional clear button on the color picker.
* @deprecated Use the `clearLabel` setting to specify the label.
*/
interface ClearButtonOptions {
/**
* Whether the clear button is displayed when the color picker is opened.
*/
show: boolean;
/**
* The label text shown on the clear button.
*/
label: string;
}
/**
* Configuration for the optional close button on the color picker.
* @deprecated Use the `closeLabel` setting to specify the label.
*/
interface CloseButtonOptions {
/**
* Whether the close button is displayed when the color picker is opened.
*/
show: boolean;
/**
* The label text shown on the close button.
*/
label: string;
}
interface PickEventData {
/**
* The newly selected color which was picked.
*/
color: string;
}
/**
* Settings that can be configured for each color picker instance separately.
* @since 0.15.0
*/
interface ColorisVirtualInstanceOptions {
/**
* CSS selector for the parent.
*
* The default behavior is to append the color picker's dialog to the end of the document's
* body. but it is possible to append it to a custom parent instead. This is especially useful
* if the color fields are in a scrollable container and you want color picker' dialog to stay
* anchored to them. You will need to set the position of the container to relative or absolute.
* Note: This should be a scrollable container with enough space to display the picker.
*
* @default null
*/
parent?: null | string;
/**
* The color theme to use for the color picker. More themes might be added
* in the future. Available themes: default, large, polaroid.
*
* @default "default"
*/
theme?: Theme;
/**
* Set the theme to light or dark mode:
* - light: light mode.
* - dark: dark mode.
* - auto: automatically enables dark mode when the user prefers a dark color scheme.
*
* @default "light"
*/
themeMode?: ThemeMode,
/**
* The margin in pixels between the input fields and the color picker's
* dialog.
*
* @default 2
*/
margin?: number;
/**
* Sets the preferred color string format. The format affects which value is
* shown in the input field. See {@link ColorFormat} for more details.
*
* @default "hex"
*/
format?: ColorFormat;
/**
* Set to true to enable format toggle buttons in the color picker dialog.
*
* This will also force the format to auto.
*
* @default true
*/
formatToggle?: boolean;
/**
* Focus the color value input when the color picker dialog is opened.
*
* @default true
*/
focusInput?: boolean;
/**
* Select and focus the color value input when the color picker dialog is opened.
*
* @default false
*/
selectInput?: boolean;
/**
* Set to true to hide all the color picker widgets (spectrum, hue, ...) except the swatches.
*
* @default false
*/
swatchesOnly?: boolean;
/**
* Enable or disable alpha support.
*
* When disabled, it will strip the alpha value from the existing color
* value in all formats.
*
* @default true
*/
alpha?: boolean;
/**
* Set to true to always include the alpha value in the color value even if the opacity is 100%.
*
* @default false
*/
forceAlpha?: boolean,
/**
* Whether to show an optional clear button. Use `clearLabel` to set the label.
*
* Note that this should be a boolean, a `ClearButtonOptions` object is still
* supported for backwards compatibility, but it is deprecated.
*
* @default false
*/
clearButton?: boolean | ClearButtonOptions;
/**
* Set the label of the clear button.
* @default Clear
* @since 0.17.0
*/
clearLabel?: string,
/**
* Whether to show an optional close button. Use `closeLabel` to set the label.
*
* Note that this should be a boolean, a `CloseButtonOptions` object is still
* supported for backwards compatibility, but it is deprecated.
*
* @default false
*/
closeButton?: boolean | CloseButtonOptions;
/**
* Set the label of the close button.
*
* @default Close
* @since 0.17.0
*/
closeLabel?: string;
/**
* An array of the desired color swatches to display. If omitted or the
* array is empty, the color swatches will be disabled.
*
* @default []
*/
swatches?: string[];
/**
* A function that is called whenever a new color is picked.
* @since 0.18.0
*/
onChange?: OnChangeCallback;
}
interface ColorisOptions extends ColorisVirtualInstanceOptions {
/**
* Accessibility messages for various aria attribute etc.
*/
a11y?: Accessibility;
/**
* In inline mode, this is the default color that is set when the picker is initialized.
*/
defaultColor?: string;
/**
* A custom CSS selector to bind the color picker to. This must point to
* one or more {@link HTMLInputElement}s.
*/
el: string;
/**
* Set to `true` to use the color picker as an inline widget. In this mode the color picker is
* always visible and positioned statically within its container, which is by default the body
* of the document. Use the "parent" option to set a custom container.
*
* Note: In this mode, the best way to get the picked color is by listening to the `coloris:pick`
* event and reading the value from the event detail (see the example below). The other way is
* to read the value of the input field with the ID `clr-color-value`.
*
* @example
* ```js
* document.addEventListener("coloris:pick", event => {
* console.log("New color", event.detail.color);
* });
* ```
*/
inline?: boolean;
/**
* Set to true to activate basic right-to-left support.
*
* @default false
*/
rtl?: boolean;
/**
* The bound input fields are wrapped in a div that adds a thumbnail
* showing the current color and a button to open the color picker (for
* accessibility only).
*
* If you wish to keep your fields unaltered, set this to `false`, in which
* case you will lose the color thumbnail and the accessible button (not
* recommended).
*
* @default true
*/
wrap?: boolean;
}
/**
* The color picker dialog can be closed by clicking anywhere on the
* page or by pressing the ESC on the keyboard. The later will also
* revert the color to its original value.
*
* If you would like to close the dialog programmatically, you can do so
* by calling this method.
*
* @param {boolean} revert When `true`, resets the color to its original
* value. Defaults to `false`.
*/
function close(revert?: boolean): void;
/**
* Update the color picker's position and the color gradient's offset.
*/
function updatePosition(): void;
/**
* Converts an input field to a color picker input.
*/
function coloris(opts: ColorisOptions): void;
/**
* Adds a virtual instance with separate options.
*
* Although there is only one physical instance of the color picker in the document, it is possible
* to simulate multiple instances, each with its own appearance and behavior, by updating the
* configuration at runtime, when the color picker is opened.
*
* Here is an example of how to do it by manually setting configuration options in response to click events:
*
* ```js
* // Regular color fields use the default light theme
* document.querySelectorAll('.color-fields').forEach(input => {
* input.addEventListener('click', e => {
* Coloris({
* theme: 'default',
* themeMode: 'light',
* });
* });
* });
*
* // But the special color fields use the polaroid dark theme
* document.querySelectorAll('.special-color-fields').forEach(input => {
* input.addEventListener('click', e => {
* Coloris({
* theme: 'polaroid',
* themeMode: 'dark',
* });
* });
* });
* ```
*
* This works well and is quite versatile, but it can get a little hard to keep track of each
* change every "instance" makes and revert them to the default values.
*
* So as of version 0.15.0, there is a new way to automatically manage virtual instances. This works
* by assigning configuration overrides to a CSS selector representing one or more color fields.
*
* @example
* ```js
* // Color fields that have the class "instance1" have a format toggle,
* // no alpha slider, a dark theme and custom swatches
* Coloris.setInstance('.instance1', {
* theme: 'polaroid',
* themeMode: 'dark',
* alpha: false,
* formatToggle: true,
* swatches: [
* '#264653',
* '#2a9d8f',
* '#e9c46a'
* ]
* });
*
* // Fields matching the class "instance2" show color swatches only
* Coloris.setInstance('.instance2', {
* swatchesOnly: true,
* swatches: [
* '#264653',
* '#2a9d8f',
* '#e9c46a'
* ]
* });
* ```
* @param selector CSS selector for the input fields to which the options should apply.
* @param opts Options to apply to all color picker input fields matching the given selector.
* @since 0.15.0
*/
function setInstance(selector: string, opts: Partial<ColorisVirtualInstanceOptions>): void;
/**
* Removes a virtual instance that was added by {@link setInstance}. Note that
* to remove an instance, the selector must be exactly equal to what was passed
* to `setInstance`, it cannot merely be a different selector that happens to
* match the same elements.
* @param selector CSS selector to remove from the set of virtual instances.
*/
function removeInstance(selector: string): void;
/**
* Initializes the Coloris color picker and binds the color picker to all
* input fields with the `data-coloris` attribute.
*
* When the script file is loaded directly in a browser, this method is
* called automatically. When called in a module environment (e.g.
* browserify, rollup, or webpack), you need to call this method once before
* any other calls to any {@link Coloris} methods. This method checks for
* when the document is ready, so you do not have to call this method inside
* some document ready block.
*/
function init(): void;
}
export as namespace Coloris;
/**
* The main entry point or namespace for Coloris. This object is callable and
* can be used to initialize Coloris. It also contains several utility
* methods.
*/
export = Coloris;
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
+3
View File
@@ -0,0 +1,3 @@
{
"type": "module"
}
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
+3
View File
@@ -0,0 +1,3 @@
{
"type": "commonjs"
}