@agnos-ui/core-bootstrap 0.7.0 → 0.8.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{accordion-B-uoNLHJ.cjs → accordion-C1fPM-Yp.cjs} +4 -6
- package/{accordion-DBVC9W8u.js → accordion-Dy6WokG3.js} +4 -6
- package/{collapse-_elTaNvN.cjs → collapse-CSP8JFq-.cjs} +25 -11
- package/{collapse-DAqth71Q.js → collapse-DJJ1jB2v.js} +26 -12
- package/components/accordion/index.cjs +1 -1
- package/components/accordion/index.js +1 -1
- package/components/collapse/collapse.d.ts +4 -0
- package/components/collapse/index.cjs +1 -1
- package/components/collapse/index.js +1 -1
- package/components/slider/index.cjs +1 -1
- package/components/slider/index.js +1 -1
- package/components/slider/slider.d.ts +14 -1
- package/css/agnosui.css +49 -2
- package/css/agnosui.css.map +1 -1
- package/css/slider.css +49 -2
- package/css/slider.css.map +1 -1
- package/css/tree.css.map +1 -1
- package/index.cjs +3 -3
- package/index.js +3 -3
- package/package.json +2 -2
- package/scss/_functions.scss +7 -5
- package/scss/_variables.scss +10 -0
- package/scss/slider.scss +62 -5
- package/{slider-CLWQS0Ke.js → slider-Bj081WdM.js} +2 -1
- package/{slider-UHwPs1vO.cjs → slider-CosrWCnn.cjs} +2 -1
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
const accordion = require("@agnos-ui/core/components/accordion");
|
|
3
3
|
const collapse = require("./collapse-sUYbZqEx.cjs");
|
|
4
4
|
const extendWidget = require("@agnos-ui/core/services/extendWidget");
|
|
5
|
+
const func = require("@agnos-ui/core/utils/func");
|
|
5
6
|
const defaultConfigExtraProps = {
|
|
6
7
|
itemStructure: void 0
|
|
7
8
|
};
|
|
@@ -18,12 +19,9 @@ const accordionItemDefaultConfig = {
|
|
|
18
19
|
animated: false,
|
|
19
20
|
transition: collapse.collapseVerticalTransition,
|
|
20
21
|
destroyOnHide: false,
|
|
21
|
-
onShown:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
},
|
|
25
|
-
onVisibleChange: () => {
|
|
26
|
-
},
|
|
22
|
+
onShown: func.noop,
|
|
23
|
+
onHidden: func.noop,
|
|
24
|
+
onVisibleChange: func.noop,
|
|
27
25
|
visible: false,
|
|
28
26
|
disabled: false,
|
|
29
27
|
id: "",
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { getAccordionDefaultConfig as getAccordionDefaultConfig$1, createAccordionItem as createAccordionItem$1, factoryCreateAccordion } from "@agnos-ui/core/components/accordion";
|
|
2
2
|
import { c as collapseVerticalTransition } from "./collapse-CVjUhnIz.js";
|
|
3
3
|
import { extendWidgetProps } from "@agnos-ui/core/services/extendWidget";
|
|
4
|
+
import { noop } from "@agnos-ui/core/utils/func";
|
|
4
5
|
const defaultConfigExtraProps = {
|
|
5
6
|
itemStructure: void 0
|
|
6
7
|
};
|
|
@@ -17,12 +18,9 @@ const accordionItemDefaultConfig = {
|
|
|
17
18
|
animated: false,
|
|
18
19
|
transition: collapseVerticalTransition,
|
|
19
20
|
destroyOnHide: false,
|
|
20
|
-
onShown:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
},
|
|
24
|
-
onVisibleChange: () => {
|
|
25
|
-
},
|
|
21
|
+
onShown: noop,
|
|
22
|
+
onHidden: noop,
|
|
23
|
+
onVisibleChange: noop,
|
|
26
24
|
visible: false,
|
|
27
25
|
disabled: false,
|
|
28
26
|
id: "",
|
|
@@ -4,6 +4,7 @@ const stores = require("@agnos-ui/core/utils/stores");
|
|
|
4
4
|
const directive = require("@agnos-ui/core/utils/directive");
|
|
5
5
|
const writables = require("@agnos-ui/core/utils/writables");
|
|
6
6
|
const collapse = require("./collapse-sUYbZqEx.cjs");
|
|
7
|
+
const func = require("@agnos-ui/core/utils/func");
|
|
7
8
|
const equal = (a, b) => Object.is(a, b) && (!a || typeof a !== "object") && typeof a !== "function";
|
|
8
9
|
const subscribersQueue = [];
|
|
9
10
|
let willProcessQueue = false;
|
|
@@ -283,7 +284,7 @@ class RawStoreTrackingUsage extends RawStoreWritable {
|
|
|
283
284
|
const flags = this.flags;
|
|
284
285
|
if (flags & 2 && !this.extraUsages && !this.consumerLinks.length) {
|
|
285
286
|
if (inFlushUnused || flags & 1) {
|
|
286
|
-
this.flags &=
|
|
287
|
+
this.flags &= -3;
|
|
287
288
|
untrack(() => this.endUse());
|
|
288
289
|
} else if (!(flags & 4)) {
|
|
289
290
|
this.flags |= 4;
|
|
@@ -450,7 +451,7 @@ class RawStoreComputedOrDerived extends RawStoreTrackingUsage {
|
|
|
450
451
|
}
|
|
451
452
|
} finally {
|
|
452
453
|
setActiveConsumer(prevActiveConsumer);
|
|
453
|
-
this.flags &=
|
|
454
|
+
this.flags &= -9;
|
|
454
455
|
}
|
|
455
456
|
}
|
|
456
457
|
}
|
|
@@ -571,12 +572,9 @@ function computed(fn, options) {
|
|
|
571
572
|
const defaultCollapseConfig = {
|
|
572
573
|
visible: true,
|
|
573
574
|
horizontal: false,
|
|
574
|
-
onVisibleChange:
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
},
|
|
578
|
-
onHidden: () => {
|
|
579
|
-
},
|
|
575
|
+
onVisibleChange: func.noop,
|
|
576
|
+
onShown: func.noop,
|
|
577
|
+
onHidden: func.noop,
|
|
580
578
|
animated: true,
|
|
581
579
|
animatedOnInit: false,
|
|
582
580
|
className: "",
|
|
@@ -597,7 +595,11 @@ const commonCollapseConfigValidator = {
|
|
|
597
595
|
id: writables.typeString
|
|
598
596
|
};
|
|
599
597
|
function createCollapse(config) {
|
|
600
|
-
const [
|
|
598
|
+
const [
|
|
599
|
+
{ animatedOnInit$, animated$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, horizontal$, id$: _dirtyId$, ...stateProps },
|
|
600
|
+
patch
|
|
601
|
+
] = stores.writablesForProps(defaultCollapseConfig, config, commonCollapseConfigValidator);
|
|
602
|
+
const id$ = stores.idWithDefault(_dirtyId$);
|
|
601
603
|
const currentTransitionFn$ = asWritable(computed(() => horizontal$() ? collapse.collapseHorizontalTransition : collapse.collapseVerticalTransition));
|
|
602
604
|
const transition = baseTransitions.createTransition({
|
|
603
605
|
props: {
|
|
@@ -625,10 +627,22 @@ function createCollapse(config) {
|
|
|
625
627
|
transition.directives.directive,
|
|
626
628
|
directive.createAttributesDirective(() => ({
|
|
627
629
|
attributes: {
|
|
628
|
-
id:
|
|
630
|
+
id: id$
|
|
631
|
+
},
|
|
632
|
+
classNames: {
|
|
633
|
+
"au-collapse": stores.true$
|
|
629
634
|
}
|
|
630
635
|
}))
|
|
631
|
-
)
|
|
636
|
+
),
|
|
637
|
+
triggerDirective: directive.createAttributesDirective(() => ({
|
|
638
|
+
attributes: {
|
|
639
|
+
"aria-expanded": computed(() => `${visible$()}`),
|
|
640
|
+
"aria-controls": id$
|
|
641
|
+
},
|
|
642
|
+
events: {
|
|
643
|
+
click: () => transition.api.toggle()
|
|
644
|
+
}
|
|
645
|
+
}))
|
|
632
646
|
}
|
|
633
647
|
};
|
|
634
648
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { createTransition } from "@agnos-ui/core/services/transitions/baseTransitions";
|
|
2
|
-
import { writablesForProps, stateStores } from "@agnos-ui/core/utils/stores";
|
|
2
|
+
import { writablesForProps, idWithDefault, stateStores, true$ } from "@agnos-ui/core/utils/stores";
|
|
3
3
|
import { mergeDirectives, createAttributesDirective } from "@agnos-ui/core/utils/directive";
|
|
4
4
|
import { typeBoolean, typeFunction, typeString } from "@agnos-ui/core/utils/writables";
|
|
5
5
|
import { a as collapseHorizontalTransition, c as collapseVerticalTransition } from "./collapse-CVjUhnIz.js";
|
|
6
|
+
import { noop as noop$1 } from "@agnos-ui/core/utils/func";
|
|
6
7
|
const equal = (a, b) => Object.is(a, b) && (!a || typeof a !== "object") && typeof a !== "function";
|
|
7
8
|
const subscribersQueue = [];
|
|
8
9
|
let willProcessQueue = false;
|
|
@@ -282,7 +283,7 @@ class RawStoreTrackingUsage extends RawStoreWritable {
|
|
|
282
283
|
const flags = this.flags;
|
|
283
284
|
if (flags & 2 && !this.extraUsages && !this.consumerLinks.length) {
|
|
284
285
|
if (inFlushUnused || flags & 1) {
|
|
285
|
-
this.flags &=
|
|
286
|
+
this.flags &= -3;
|
|
286
287
|
untrack(() => this.endUse());
|
|
287
288
|
} else if (!(flags & 4)) {
|
|
288
289
|
this.flags |= 4;
|
|
@@ -449,7 +450,7 @@ class RawStoreComputedOrDerived extends RawStoreTrackingUsage {
|
|
|
449
450
|
}
|
|
450
451
|
} finally {
|
|
451
452
|
setActiveConsumer(prevActiveConsumer);
|
|
452
|
-
this.flags &=
|
|
453
|
+
this.flags &= -9;
|
|
453
454
|
}
|
|
454
455
|
}
|
|
455
456
|
}
|
|
@@ -570,12 +571,9 @@ function computed(fn, options) {
|
|
|
570
571
|
const defaultCollapseConfig = {
|
|
571
572
|
visible: true,
|
|
572
573
|
horizontal: false,
|
|
573
|
-
onVisibleChange:
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
},
|
|
577
|
-
onHidden: () => {
|
|
578
|
-
},
|
|
574
|
+
onVisibleChange: noop$1,
|
|
575
|
+
onShown: noop$1,
|
|
576
|
+
onHidden: noop$1,
|
|
579
577
|
animated: true,
|
|
580
578
|
animatedOnInit: false,
|
|
581
579
|
className: "",
|
|
@@ -596,7 +594,11 @@ const commonCollapseConfigValidator = {
|
|
|
596
594
|
id: typeString
|
|
597
595
|
};
|
|
598
596
|
function createCollapse(config) {
|
|
599
|
-
const [
|
|
597
|
+
const [
|
|
598
|
+
{ animatedOnInit$, animated$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, horizontal$, id$: _dirtyId$, ...stateProps },
|
|
599
|
+
patch
|
|
600
|
+
] = writablesForProps(defaultCollapseConfig, config, commonCollapseConfigValidator);
|
|
601
|
+
const id$ = idWithDefault(_dirtyId$);
|
|
600
602
|
const currentTransitionFn$ = asWritable(computed(() => horizontal$() ? collapseHorizontalTransition : collapseVerticalTransition));
|
|
601
603
|
const transition = createTransition({
|
|
602
604
|
props: {
|
|
@@ -624,10 +626,22 @@ function createCollapse(config) {
|
|
|
624
626
|
transition.directives.directive,
|
|
625
627
|
createAttributesDirective(() => ({
|
|
626
628
|
attributes: {
|
|
627
|
-
id:
|
|
629
|
+
id: id$
|
|
630
|
+
},
|
|
631
|
+
classNames: {
|
|
632
|
+
"au-collapse": true$
|
|
628
633
|
}
|
|
629
634
|
}))
|
|
630
|
-
)
|
|
635
|
+
),
|
|
636
|
+
triggerDirective: createAttributesDirective(() => ({
|
|
637
|
+
attributes: {
|
|
638
|
+
"aria-expanded": computed(() => `${visible$()}`),
|
|
639
|
+
"aria-controls": id$
|
|
640
|
+
},
|
|
641
|
+
events: {
|
|
642
|
+
click: () => transition.api.toggle()
|
|
643
|
+
}
|
|
644
|
+
}))
|
|
631
645
|
}
|
|
632
646
|
};
|
|
633
647
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const accordion = require("../../accordion-
|
|
3
|
+
const accordion = require("../../accordion-C1fPM-Yp.cjs");
|
|
4
4
|
const accordion$1 = require("@agnos-ui/core/components/accordion");
|
|
5
5
|
exports.createAccordion = accordion.createAccordion;
|
|
6
6
|
exports.createAccordionItem = accordion.createAccordionItem;
|
|
@@ -108,6 +108,10 @@ export interface CollapseDirectives {
|
|
|
108
108
|
* Directive to apply the collapse.
|
|
109
109
|
*/
|
|
110
110
|
collapseDirective: Directive;
|
|
111
|
+
/**
|
|
112
|
+
* Directive to apply to a trigger;
|
|
113
|
+
*/
|
|
114
|
+
triggerDirective: Directive;
|
|
111
115
|
}
|
|
112
116
|
/**
|
|
113
117
|
* Represents a widget for handling collapse functionality.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const collapse = require("../../collapse-
|
|
3
|
+
const collapse = require("../../collapse-CSP8JFq-.cjs");
|
|
4
4
|
exports.createCollapse = collapse.createCollapse;
|
|
5
5
|
exports.getCollapseDefaultConfig = collapse.getCollapseDefaultConfig;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const slider = require("../../slider-
|
|
3
|
+
const slider = require("../../slider-CosrWCnn.cjs");
|
|
4
4
|
const slider$1 = require("@agnos-ui/core/components/slider");
|
|
5
5
|
exports.createSlider = slider.createSlider;
|
|
6
6
|
exports.getSliderDefaultConfig = slider.getSliderDefaultConfig;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { SliderDirectives, SliderHandle, SliderProps as CoreProps, SliderState as CoreState } from '@agnos-ui/core/components/slider';
|
|
1
|
+
import type { SliderDirectives, SliderHandle, SliderProps as CoreProps, SliderState as CoreState, SliderTick } from '@agnos-ui/core/components/slider';
|
|
2
2
|
import type { SlotContent, Widget, WidgetFactory, WidgetSlotContext } from '@agnos-ui/core/types';
|
|
3
3
|
export * from '@agnos-ui/core/components/slider';
|
|
4
4
|
/**
|
|
@@ -27,6 +27,15 @@ export interface SliderSlotHandleContext extends SliderContext {
|
|
|
27
27
|
*/
|
|
28
28
|
item: SliderHandle;
|
|
29
29
|
}
|
|
30
|
+
/**
|
|
31
|
+
* Represents the context for a slider tick slot
|
|
32
|
+
*/
|
|
33
|
+
export interface SliderSlotTickContext extends SliderContext {
|
|
34
|
+
/**
|
|
35
|
+
* tick context
|
|
36
|
+
*/
|
|
37
|
+
tick: SliderTick;
|
|
38
|
+
}
|
|
30
39
|
interface SliderExtraProps {
|
|
31
40
|
/**
|
|
32
41
|
* Slot to change the default display of the slider
|
|
@@ -45,6 +54,10 @@ interface SliderExtraProps {
|
|
|
45
54
|
* Slot to change the handlers
|
|
46
55
|
*/
|
|
47
56
|
handle: SlotContent<SliderSlotHandleContext>;
|
|
57
|
+
/**
|
|
58
|
+
* Slot to change the ticks
|
|
59
|
+
*/
|
|
60
|
+
tick: SlotContent<SliderSlotTickContext>;
|
|
48
61
|
}
|
|
49
62
|
/**
|
|
50
63
|
* Represents the state of a slider component.
|
package/css/agnosui.css
CHANGED
|
@@ -97,6 +97,12 @@
|
|
|
97
97
|
--bs-slider-handle-outline: none;
|
|
98
98
|
--bs-slider-handle-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
99
99
|
--bs-slider-handle-focus-hover-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
100
|
+
--bs-slider-tick-primary-size: 1rem;
|
|
101
|
+
--bs-slider-tick-secondary-size: 1rem;
|
|
102
|
+
--bs-slider-tick-neutral-color: var(--bs-light-emphasis, #666666);
|
|
103
|
+
--bs-slider-tick-selected-color: var(--bs-primary, #0d6efd);
|
|
104
|
+
--bs-slider-tick-disabled-color: var(--bs-dark-bg-subtle, #ced4da);
|
|
105
|
+
--bs-slider-tick-label-translate-vertical: translateY(75%);
|
|
100
106
|
--bs-slider-progress-color: var(--bs-primary, #0d6efd);
|
|
101
107
|
--bs-slider-progress-height: 0.25rem;
|
|
102
108
|
--bs-slider-progress-vertical-transform: rotate(90deg);
|
|
@@ -137,7 +143,10 @@
|
|
|
137
143
|
--bs-slider-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0rem);
|
|
138
144
|
--bs-slider-vertical-margin-inline-end: calc((1.5rem - 0.3125rem) / 2 + 0rem + 3ch + 0rem);
|
|
139
145
|
--bs-slider-handle-size: 1.5rem;
|
|
146
|
+
--bs-slider-tick-primary-size: 1.25rem;
|
|
147
|
+
--bs-slider-tick-secondary-size: 1.25rem;
|
|
140
148
|
--bs-slider-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.5rem - 0.3125rem) / 2));
|
|
149
|
+
--bs-slider-tick-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.25rem - 0.3125rem) / 2));
|
|
141
150
|
--bs-slider-label-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0.3125rem + 0rem);
|
|
142
151
|
}
|
|
143
152
|
.au-slider.au-slider-sm {
|
|
@@ -149,7 +158,10 @@
|
|
|
149
158
|
--bs-slider-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0rem);
|
|
150
159
|
--bs-slider-vertical-margin-inline-end: calc((1rem - 0.2rem) / 2 + 0rem + 3ch + 0rem);
|
|
151
160
|
--bs-slider-handle-size: 1rem;
|
|
161
|
+
--bs-slider-tick-primary-size: 0.75rem;
|
|
162
|
+
--bs-slider-tick-secondary-size: 0.75rem;
|
|
152
163
|
--bs-slider-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (1rem - 0.2rem) / 2));
|
|
164
|
+
--bs-slider-tick-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (0.75rem - 0.2rem) / 2));
|
|
153
165
|
--bs-slider-label-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0.2rem + 0rem);
|
|
154
166
|
}
|
|
155
167
|
.au-slider.au-slider-horizontal {
|
|
@@ -162,6 +174,10 @@
|
|
|
162
174
|
top: calc(50% - var(--bs-slider-handle-size) / 2);
|
|
163
175
|
transform: var(--bs-slider-translate-horizontal);
|
|
164
176
|
}
|
|
177
|
+
.au-slider.au-slider-horizontal .au-slider-tick-horizontal {
|
|
178
|
+
top: calc(50% - var(--bs-slider-tick-primary-size) / 2);
|
|
179
|
+
transform: var(--bs-slider-translate-horizontal);
|
|
180
|
+
}
|
|
165
181
|
.au-slider.au-slider-vertical {
|
|
166
182
|
height: var(--bs-slider-primary-size);
|
|
167
183
|
width: var(--bs-slider-secondary-size);
|
|
@@ -172,6 +188,10 @@
|
|
|
172
188
|
left: calc(50% - var(--bs-slider-handle-size) / 2);
|
|
173
189
|
transform: var(--bs-slider-translate-vertical);
|
|
174
190
|
}
|
|
191
|
+
.au-slider.au-slider-vertical .au-slider-tick-vertical {
|
|
192
|
+
left: calc(50% - var(--bs-slider-tick-primary-size) / 2);
|
|
193
|
+
transform: var(--bs-slider-translate-vertical);
|
|
194
|
+
}
|
|
175
195
|
.au-slider .au-slider-handle {
|
|
176
196
|
background-color: var(--bs-slider-handle-color);
|
|
177
197
|
border: var(--bs-slider-handle-border);
|
|
@@ -191,6 +211,26 @@
|
|
|
191
211
|
.au-slider .au-slider-handle:focus-visible {
|
|
192
212
|
box-shadow: var(--bs-slider-handle-focus-box-shadow);
|
|
193
213
|
}
|
|
214
|
+
.au-slider .au-slider-tick {
|
|
215
|
+
position: absolute;
|
|
216
|
+
height: var(--bs-slider-tick-primary-size);
|
|
217
|
+
width: var(--bs-slider-tick-secondary-size);
|
|
218
|
+
cursor: var(--bs-slider-clickable-area-cursor);
|
|
219
|
+
}
|
|
220
|
+
.au-slider .au-slider-tick svg {
|
|
221
|
+
display: block;
|
|
222
|
+
}
|
|
223
|
+
.au-slider .au-slider-tick-label {
|
|
224
|
+
position: absolute;
|
|
225
|
+
text-wrap: nowrap;
|
|
226
|
+
transform: var(--bs-slider-translate-horizontal);
|
|
227
|
+
margin-block-start: var(--bs-slider-label-margin-block-start);
|
|
228
|
+
}
|
|
229
|
+
.au-slider .au-slider-tick-label-vertical {
|
|
230
|
+
position: absolute;
|
|
231
|
+
margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
|
|
232
|
+
transform: var(--bs-slider-tick-label-translate-vertical);
|
|
233
|
+
}
|
|
194
234
|
.au-slider .au-slider-progress {
|
|
195
235
|
background-color: var(--bs-slider-progress-color);
|
|
196
236
|
border-radius: var(--bs-slider-border-radius);
|
|
@@ -203,6 +243,7 @@
|
|
|
203
243
|
font-weight: var(--bs-slider-label-font-weight);
|
|
204
244
|
margin-block-start: var(--bs-slider-label-margin-block-start);
|
|
205
245
|
position: absolute;
|
|
246
|
+
text-wrap: nowrap;
|
|
206
247
|
}
|
|
207
248
|
.au-slider .au-slider-label.au-slider-label-min:not(.au-slider-rtl) {
|
|
208
249
|
left: var(--bs-slider-label-min-position);
|
|
@@ -260,11 +301,16 @@
|
|
|
260
301
|
flex-shrink: var(--bs-slider-clickable-area-vertical-flex-shrink);
|
|
261
302
|
cursor: var(--bs-slider-clickable-area-cursor);
|
|
262
303
|
}
|
|
304
|
+
.au-slider .au-slider-clickable-area-with-ticks {
|
|
305
|
+
cursor: default;
|
|
306
|
+
}
|
|
263
307
|
.au-slider.disabled {
|
|
264
308
|
cursor: var(--bs-slider-disabled-cursor);
|
|
265
309
|
}
|
|
266
310
|
.au-slider.disabled .au-slider-label,
|
|
267
|
-
.au-slider.disabled .au-slider-label-vertical
|
|
311
|
+
.au-slider.disabled .au-slider-label-vertical,
|
|
312
|
+
.au-slider.disabled .au-slider-tick-label,
|
|
313
|
+
.au-slider.disabled .au-slider-tick-label-vertical {
|
|
268
314
|
color: var(--bs-slider-disabled-color);
|
|
269
315
|
}
|
|
270
316
|
.au-slider.disabled .au-slider-progress,
|
|
@@ -273,7 +319,8 @@
|
|
|
273
319
|
cursor: var(--bs-slider-disabled-cursor);
|
|
274
320
|
}
|
|
275
321
|
.au-slider.disabled .au-slider-clickable-area,
|
|
276
|
-
.au-slider.disabled .au-slider-clickable-area-vertical
|
|
322
|
+
.au-slider.disabled .au-slider-clickable-area-vertical,
|
|
323
|
+
.au-slider.disabled .au-slider-tick {
|
|
277
324
|
cursor: var(--bs-slider-disabled-cursor);
|
|
278
325
|
}
|
|
279
326
|
|
package/css/agnosui.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../scss/_functions.scss","../scss/tree.scss","../scss/select.scss","../scss/slider.scss","../scss/rating.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../scss/_functions.scss","../scss/tree.scss","../scss/select.scss","../scss/slider.scss","../scss/rating.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;AAgBA;AAAA;AAAA;AAAA;ACfA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAIA;EACC;;;ACpEJ;EACC;;;AAID;EACC;EACA;EACA;;;ACeD;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EA5FA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAuFA;EAvGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAkGA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGA;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;AACA;AAAA;AAAA;AAAA;EAIC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;AAAA;EAGC;;;AC9SF;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"agnosui.css"}
|
package/css/slider.css
CHANGED
|
@@ -20,6 +20,12 @@
|
|
|
20
20
|
--bs-slider-handle-outline: none;
|
|
21
21
|
--bs-slider-handle-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
22
22
|
--bs-slider-handle-focus-hover-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
23
|
+
--bs-slider-tick-primary-size: 1rem;
|
|
24
|
+
--bs-slider-tick-secondary-size: 1rem;
|
|
25
|
+
--bs-slider-tick-neutral-color: var(--bs-light-emphasis, #666666);
|
|
26
|
+
--bs-slider-tick-selected-color: var(--bs-primary, #0d6efd);
|
|
27
|
+
--bs-slider-tick-disabled-color: var(--bs-dark-bg-subtle, #ced4da);
|
|
28
|
+
--bs-slider-tick-label-translate-vertical: translateY(75%);
|
|
23
29
|
--bs-slider-progress-color: var(--bs-primary, #0d6efd);
|
|
24
30
|
--bs-slider-progress-height: 0.25rem;
|
|
25
31
|
--bs-slider-progress-vertical-transform: rotate(90deg);
|
|
@@ -60,7 +66,10 @@
|
|
|
60
66
|
--bs-slider-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0rem);
|
|
61
67
|
--bs-slider-vertical-margin-inline-end: calc((1.5rem - 0.3125rem) / 2 + 0rem + 3ch + 0rem);
|
|
62
68
|
--bs-slider-handle-size: 1.5rem;
|
|
69
|
+
--bs-slider-tick-primary-size: 1.25rem;
|
|
70
|
+
--bs-slider-tick-secondary-size: 1.25rem;
|
|
63
71
|
--bs-slider-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.5rem - 0.3125rem) / 2));
|
|
72
|
+
--bs-slider-tick-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.25rem - 0.3125rem) / 2));
|
|
64
73
|
--bs-slider-label-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0.3125rem + 0rem);
|
|
65
74
|
}
|
|
66
75
|
.au-slider.au-slider-sm {
|
|
@@ -72,7 +81,10 @@
|
|
|
72
81
|
--bs-slider-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0rem);
|
|
73
82
|
--bs-slider-vertical-margin-inline-end: calc((1rem - 0.2rem) / 2 + 0rem + 3ch + 0rem);
|
|
74
83
|
--bs-slider-handle-size: 1rem;
|
|
84
|
+
--bs-slider-tick-primary-size: 0.75rem;
|
|
85
|
+
--bs-slider-tick-secondary-size: 0.75rem;
|
|
75
86
|
--bs-slider-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (1rem - 0.2rem) / 2));
|
|
87
|
+
--bs-slider-tick-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (0.75rem - 0.2rem) / 2));
|
|
76
88
|
--bs-slider-label-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0.2rem + 0rem);
|
|
77
89
|
}
|
|
78
90
|
.au-slider.au-slider-horizontal {
|
|
@@ -85,6 +97,10 @@
|
|
|
85
97
|
top: calc(50% - var(--bs-slider-handle-size) / 2);
|
|
86
98
|
transform: var(--bs-slider-translate-horizontal);
|
|
87
99
|
}
|
|
100
|
+
.au-slider.au-slider-horizontal .au-slider-tick-horizontal {
|
|
101
|
+
top: calc(50% - var(--bs-slider-tick-primary-size) / 2);
|
|
102
|
+
transform: var(--bs-slider-translate-horizontal);
|
|
103
|
+
}
|
|
88
104
|
.au-slider.au-slider-vertical {
|
|
89
105
|
height: var(--bs-slider-primary-size);
|
|
90
106
|
width: var(--bs-slider-secondary-size);
|
|
@@ -95,6 +111,10 @@
|
|
|
95
111
|
left: calc(50% - var(--bs-slider-handle-size) / 2);
|
|
96
112
|
transform: var(--bs-slider-translate-vertical);
|
|
97
113
|
}
|
|
114
|
+
.au-slider.au-slider-vertical .au-slider-tick-vertical {
|
|
115
|
+
left: calc(50% - var(--bs-slider-tick-primary-size) / 2);
|
|
116
|
+
transform: var(--bs-slider-translate-vertical);
|
|
117
|
+
}
|
|
98
118
|
.au-slider .au-slider-handle {
|
|
99
119
|
background-color: var(--bs-slider-handle-color);
|
|
100
120
|
border: var(--bs-slider-handle-border);
|
|
@@ -114,6 +134,26 @@
|
|
|
114
134
|
.au-slider .au-slider-handle:focus-visible {
|
|
115
135
|
box-shadow: var(--bs-slider-handle-focus-box-shadow);
|
|
116
136
|
}
|
|
137
|
+
.au-slider .au-slider-tick {
|
|
138
|
+
position: absolute;
|
|
139
|
+
height: var(--bs-slider-tick-primary-size);
|
|
140
|
+
width: var(--bs-slider-tick-secondary-size);
|
|
141
|
+
cursor: var(--bs-slider-clickable-area-cursor);
|
|
142
|
+
}
|
|
143
|
+
.au-slider .au-slider-tick svg {
|
|
144
|
+
display: block;
|
|
145
|
+
}
|
|
146
|
+
.au-slider .au-slider-tick-label {
|
|
147
|
+
position: absolute;
|
|
148
|
+
text-wrap: nowrap;
|
|
149
|
+
transform: var(--bs-slider-translate-horizontal);
|
|
150
|
+
margin-block-start: var(--bs-slider-label-margin-block-start);
|
|
151
|
+
}
|
|
152
|
+
.au-slider .au-slider-tick-label-vertical {
|
|
153
|
+
position: absolute;
|
|
154
|
+
margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
|
|
155
|
+
transform: var(--bs-slider-tick-label-translate-vertical);
|
|
156
|
+
}
|
|
117
157
|
.au-slider .au-slider-progress {
|
|
118
158
|
background-color: var(--bs-slider-progress-color);
|
|
119
159
|
border-radius: var(--bs-slider-border-radius);
|
|
@@ -126,6 +166,7 @@
|
|
|
126
166
|
font-weight: var(--bs-slider-label-font-weight);
|
|
127
167
|
margin-block-start: var(--bs-slider-label-margin-block-start);
|
|
128
168
|
position: absolute;
|
|
169
|
+
text-wrap: nowrap;
|
|
129
170
|
}
|
|
130
171
|
.au-slider .au-slider-label.au-slider-label-min:not(.au-slider-rtl) {
|
|
131
172
|
left: var(--bs-slider-label-min-position);
|
|
@@ -183,11 +224,16 @@
|
|
|
183
224
|
flex-shrink: var(--bs-slider-clickable-area-vertical-flex-shrink);
|
|
184
225
|
cursor: var(--bs-slider-clickable-area-cursor);
|
|
185
226
|
}
|
|
227
|
+
.au-slider .au-slider-clickable-area-with-ticks {
|
|
228
|
+
cursor: default;
|
|
229
|
+
}
|
|
186
230
|
.au-slider.disabled {
|
|
187
231
|
cursor: var(--bs-slider-disabled-cursor);
|
|
188
232
|
}
|
|
189
233
|
.au-slider.disabled .au-slider-label,
|
|
190
|
-
.au-slider.disabled .au-slider-label-vertical
|
|
234
|
+
.au-slider.disabled .au-slider-label-vertical,
|
|
235
|
+
.au-slider.disabled .au-slider-tick-label,
|
|
236
|
+
.au-slider.disabled .au-slider-tick-label-vertical {
|
|
191
237
|
color: var(--bs-slider-disabled-color);
|
|
192
238
|
}
|
|
193
239
|
.au-slider.disabled .au-slider-progress,
|
|
@@ -196,7 +242,8 @@
|
|
|
196
242
|
cursor: var(--bs-slider-disabled-cursor);
|
|
197
243
|
}
|
|
198
244
|
.au-slider.disabled .au-slider-clickable-area,
|
|
199
|
-
.au-slider.disabled .au-slider-clickable-area-vertical
|
|
245
|
+
.au-slider.disabled .au-slider-clickable-area-vertical,
|
|
246
|
+
.au-slider.disabled .au-slider-tick {
|
|
200
247
|
cursor: var(--bs-slider-disabled-cursor);
|
|
201
248
|
}
|
|
202
249
|
|
package/css/slider.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../scss/slider.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../scss/slider.scss"],"names":[],"mappings":"AAyBA;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EA5FA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAuFA;EAvGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAkGA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGA;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;AACA;AAAA;AAAA;AAAA;EAIC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;AAAA;EAGC","file":"slider.css"}
|
package/css/tree.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../scss/_functions.scss","../scss/tree.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../scss/_functions.scss","../scss/tree.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;AAgBA;AAAA;AAAA;AAAA;ACfA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAIA;EACC","file":"tree.css"}
|
package/index.cjs
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const accordion = require("./accordion-
|
|
3
|
+
const accordion = require("./accordion-C1fPM-Yp.cjs");
|
|
4
4
|
const alert = require("./alert-C-GktcuR.cjs");
|
|
5
5
|
const modal = require("./modal-DFEAGpCe.cjs");
|
|
6
6
|
const pageFactory = require("./pageFactory-vEBrUBB-.cjs");
|
|
7
7
|
const progressbar = require("./progressbar-FwnctYWo.cjs");
|
|
8
8
|
const rating = require("./rating-C5NZjIRx.cjs");
|
|
9
9
|
const select = require("./select-AtIM2x7x.cjs");
|
|
10
|
-
const slider = require("./slider-
|
|
10
|
+
const slider = require("./slider-CosrWCnn.cjs");
|
|
11
11
|
const toast = require("./toast-BYDfN1cI.cjs");
|
|
12
|
-
const collapse = require("./collapse-
|
|
12
|
+
const collapse = require("./collapse-CSP8JFq-.cjs");
|
|
13
13
|
const tree = require("./tree-DuY7bsYo.cjs");
|
|
14
14
|
const collapse$1 = require("./collapse-sUYbZqEx.cjs");
|
|
15
15
|
const fade = require("./fade-CJ0jXGio.cjs");
|
package/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { a, c, g } from "./accordion-
|
|
1
|
+
import { a, c, g } from "./accordion-Dy6WokG3.js";
|
|
2
2
|
import { c as c2, g as g2 } from "./alert-DXTwYKjx.js";
|
|
3
3
|
import { c as c3, g as g3 } from "./modal-CHqGXdvt.js";
|
|
4
4
|
import { c as c4, g as g4, n } from "./pageFactory-CZZJDqOh.js";
|
|
5
5
|
import { c as c5, g as g5 } from "./progressbar-D9S5NLpS.js";
|
|
6
6
|
import { c as c6, g as g6 } from "./rating-hovacUx0.js";
|
|
7
7
|
import { c as c7, g as g7 } from "./select-CLjBDJ3a.js";
|
|
8
|
-
import { c as c8, g as g8 } from "./slider-
|
|
8
|
+
import { c as c8, g as g8 } from "./slider-Bj081WdM.js";
|
|
9
9
|
import { c as c9, g as g9 } from "./toast-D-by8Hwt.js";
|
|
10
|
-
import { c as c10, g as g10 } from "./collapse-
|
|
10
|
+
import { c as c10, g as g10 } from "./collapse-DJJ1jB2v.js";
|
|
11
11
|
import { c as c11, g as g11 } from "./tree-Be8WJS8u.js";
|
|
12
12
|
import { a as a2, c as c12 } from "./collapse-CVjUhnIz.js";
|
|
13
13
|
import { f } from "./fade-uOobJKgw.js";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agnos-ui/core-bootstrap",
|
|
3
3
|
"description": "Styles and component interface extensions necessary to use AgnosUI with Bootstrap.",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.8.0-next.0",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"bootstrap",
|
|
7
7
|
"css",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
}
|
|
61
61
|
},
|
|
62
62
|
"dependencies": {
|
|
63
|
-
"@agnos-ui/core": "0.
|
|
63
|
+
"@agnos-ui/core": "0.8.0-next.0"
|
|
64
64
|
},
|
|
65
65
|
"peerDependencies": {
|
|
66
66
|
"@amadeus-it-group/tansu": "^2.0.0"
|
package/scss/_functions.scss
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
+
@use 'sass:string';
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* Utility function to replace a substring as Sass doesn't provide the built-in method to do it
|
|
3
5
|
*/
|
|
4
6
|
@function str-replace($string, $search, $replace: '') {
|
|
5
|
-
$index:
|
|
7
|
+
$index: string.index($string, $search);
|
|
6
8
|
|
|
7
9
|
@if $index {
|
|
8
|
-
@return
|
|
10
|
+
@return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
|
|
9
11
|
}
|
|
10
12
|
|
|
11
13
|
@return $string;
|
|
@@ -19,11 +21,11 @@ $escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), ('
|
|
|
19
21
|
* ref: https://github.com/twbs/bootstrap/blob/cacbdc680ecdfee5f0c7fbb876ad15188eaf697d/scss/_functions.scss#L131
|
|
20
22
|
*/
|
|
21
23
|
@function escape-svg($string) {
|
|
22
|
-
@if
|
|
24
|
+
@if string.index($string, 'data:image/svg+xml') {
|
|
23
25
|
@each $char, $encoded in $escaped-characters {
|
|
24
26
|
// Do not escape the url brackets
|
|
25
|
-
@if
|
|
26
|
-
$string: url('#{str-replace(
|
|
27
|
+
@if string.index($string, 'url(') == 1 {
|
|
28
|
+
$string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
|
|
27
29
|
} @else {
|
|
28
30
|
$string: str-replace($string, $char, $encoded);
|
|
29
31
|
}
|
package/scss/_variables.scss
CHANGED
|
@@ -28,6 +28,12 @@ $au-slider-handle-border-radius: 50% !default;
|
|
|
28
28
|
$au-slider-handle-outline: none !default;
|
|
29
29
|
$au-slider-handle-focus-box-shadow: 0 0 0 $au-focus-ring-width $au-focus-ring-color !default;
|
|
30
30
|
$au-slider-handle-focus-hover-box-shadow: 0 0 0 $au-focus-ring-width $au-focus-ring-color !default;
|
|
31
|
+
$au-slider-tick-primary-size: 1rem !default;
|
|
32
|
+
$au-slider-tick-secondary-size: 1rem !default;
|
|
33
|
+
$au-slider-tick-neutral-color: var(--#{$prefix}light-emphasis, #666666) !default;
|
|
34
|
+
$au-slider-tick-disabled-color: var(--#{$prefix}dark-bg-subtle, #ced4da) !default;
|
|
35
|
+
$au-slider-tick-selected-color: var(--#{$prefix}primary, #0d6efd) !default;
|
|
36
|
+
$au-slider-tick-label-translate-vertical: translateY(75%) !default;
|
|
31
37
|
$au-slider-progress-color: var(--#{$prefix}primary, #0d6efd) !default;
|
|
32
38
|
$au-slider-progress-height: 0.25rem !default;
|
|
33
39
|
$au-slider-progress-vertical-transform: rotate(90deg) !default;
|
|
@@ -59,11 +65,15 @@ $au-slider-disabled-cursor: not-allowed !default;
|
|
|
59
65
|
|
|
60
66
|
$au-slider-bar-size-sm: 0.2rem !default;
|
|
61
67
|
$au-slider-handle-size-sm: 1rem !default;
|
|
68
|
+
$au-slider-tick-primary-size-sm: 0.75rem !default;
|
|
69
|
+
$au-slider-tick-secondary-size-sm: 0.75rem !default;
|
|
62
70
|
$au-slider-font-size-sm: 0.875rem !default;
|
|
63
71
|
$au-slider-offset-sm: 0rem !default;
|
|
64
72
|
|
|
65
73
|
$au-slider-bar-size-lg: 0.3125rem !default;
|
|
66
74
|
$au-slider-handle-size-lg: 1.5rem !default;
|
|
75
|
+
$au-slider-tick-primary-size-lg: 1.25rem !default;
|
|
76
|
+
$au-slider-tick-secondary-size-lg: 1.25rem !default;
|
|
67
77
|
$au-slider-font-size-lg: 1.125rem !default;
|
|
68
78
|
$au-slider-offset-lg: 0rem !default;
|
|
69
79
|
// scss-docs-end slider-vars
|
package/scss/slider.scss
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
/// Mixin used to redefine css variable for different size of slider
|
|
4
4
|
/// In particular the size bar and the size of the handle
|
|
5
5
|
/// The offset is used to add some space between the text and the slider
|
|
6
|
-
@mixin setSliderSize($barSize, $handleSize, $fontSize, $offset) {
|
|
6
|
+
@mixin setSliderSize($barSize, $handleSize, $fontSize, $offset, $tickPrimarySize, $tickSecondarySize) {
|
|
7
7
|
--#{variables.$prefix}slider-font-size: #{$fontSize};
|
|
8
8
|
--#{variables.$prefix}slider-border-radius: calc(#{$barSize} / 2);
|
|
9
9
|
|
|
@@ -15,8 +15,11 @@
|
|
|
15
15
|
--#{variables.$prefix}slider-vertical-margin-inline-end: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset} + 3ch + #{$offset});
|
|
16
16
|
|
|
17
17
|
--#{variables.$prefix}slider-handle-size: #{$handleSize};
|
|
18
|
+
--#{variables.$prefix}slider-tick-primary-size: #{$tickPrimarySize};
|
|
19
|
+
--#{variables.$prefix}slider-tick-secondary-size: #{$tickSecondarySize};
|
|
18
20
|
|
|
19
21
|
--#{variables.$prefix}slider-label-margin-block-start: calc(-1 * (#{$fontSize} * 1.5 + (#{$handleSize} - #{$barSize}) / 2));
|
|
22
|
+
--#{variables.$prefix}slider-tick-label-margin-block-start: calc(-1 * (#{$fontSize} * 1.5 + (#{$tickPrimarySize} - #{$barSize}) / 2));
|
|
20
23
|
--#{variables.$prefix}slider-label-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$barSize} + #{$offset});
|
|
21
24
|
}
|
|
22
25
|
|
|
@@ -46,6 +49,15 @@
|
|
|
46
49
|
--#{variables.$prefix}slider-handle-focus-box-shadow: #{variables.$au-slider-handle-focus-box-shadow};
|
|
47
50
|
--#{variables.$prefix}slider-handle-focus-hover-box-shadow: #{variables.$au-slider-handle-focus-hover-box-shadow};
|
|
48
51
|
|
|
52
|
+
--#{variables.$prefix}slider-tick-primary-size: #{variables.$au-slider-tick-primary-size};
|
|
53
|
+
--#{variables.$prefix}slider-tick-secondary-size: #{variables.$au-slider-tick-secondary-size};
|
|
54
|
+
|
|
55
|
+
--#{variables.$prefix}slider-tick-neutral-color: #{variables.$au-slider-tick-neutral-color};
|
|
56
|
+
--#{variables.$prefix}slider-tick-selected-color: #{variables.$au-slider-tick-selected-color};
|
|
57
|
+
--#{variables.$prefix}slider-tick-disabled-color: #{variables.$au-slider-tick-disabled-color};
|
|
58
|
+
|
|
59
|
+
--#{variables.$prefix}slider-tick-label-translate-vertical: #{variables.$au-slider-tick-label-translate-vertical};
|
|
60
|
+
|
|
49
61
|
--#{variables.$prefix}slider-progress-color: #{variables.$au-slider-progress-color};
|
|
50
62
|
--#{variables.$prefix}slider-progress-height: #{variables.$au-slider-progress-height};
|
|
51
63
|
--#{variables.$prefix}slider-progress-vertical-transform: #{variables.$au-slider-progress-vertical-transform};
|
|
@@ -89,7 +101,9 @@
|
|
|
89
101
|
variables.$au-slider-bar-size-lg,
|
|
90
102
|
variables.$au-slider-handle-size-lg,
|
|
91
103
|
variables.$au-slider-font-size-lg,
|
|
92
|
-
variables.$au-slider-offset-lg
|
|
104
|
+
variables.$au-slider-offset-lg,
|
|
105
|
+
variables.$au-slider-tick-primary-size-lg,
|
|
106
|
+
variables.$au-slider-tick-secondary-size-lg
|
|
93
107
|
);
|
|
94
108
|
}
|
|
95
109
|
|
|
@@ -98,7 +112,9 @@
|
|
|
98
112
|
variables.$au-slider-bar-size-sm,
|
|
99
113
|
variables.$au-slider-handle-size-sm,
|
|
100
114
|
variables.$au-slider-font-size-sm,
|
|
101
|
-
variables.$au-slider-offset-sm
|
|
115
|
+
variables.$au-slider-offset-sm,
|
|
116
|
+
variables.$au-slider-tick-primary-size-sm,
|
|
117
|
+
variables.$au-slider-tick-secondary-size-sm
|
|
102
118
|
);
|
|
103
119
|
}
|
|
104
120
|
|
|
@@ -111,6 +127,10 @@
|
|
|
111
127
|
top: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
|
|
112
128
|
transform: var(--#{variables.$prefix}slider-translate-horizontal);
|
|
113
129
|
}
|
|
130
|
+
.au-slider-tick-horizontal {
|
|
131
|
+
top: calc(50% - var(--#{variables.$prefix}slider-tick-primary-size) / 2);
|
|
132
|
+
transform: var(--#{variables.$prefix}slider-translate-horizontal);
|
|
133
|
+
}
|
|
114
134
|
}
|
|
115
135
|
|
|
116
136
|
&.au-slider-vertical {
|
|
@@ -122,6 +142,10 @@
|
|
|
122
142
|
left: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
|
|
123
143
|
transform: var(--#{variables.$prefix}slider-translate-vertical);
|
|
124
144
|
}
|
|
145
|
+
.au-slider-tick-vertical {
|
|
146
|
+
left: calc(50% - var(--#{variables.$prefix}slider-tick-primary-size) / 2);
|
|
147
|
+
transform: var(--#{variables.$prefix}slider-translate-vertical);
|
|
148
|
+
}
|
|
125
149
|
}
|
|
126
150
|
|
|
127
151
|
.au-slider-handle {
|
|
@@ -145,6 +169,31 @@
|
|
|
145
169
|
}
|
|
146
170
|
}
|
|
147
171
|
|
|
172
|
+
.au-slider-tick {
|
|
173
|
+
position: absolute;
|
|
174
|
+
height: var(--#{variables.$prefix}slider-tick-primary-size);
|
|
175
|
+
width: var(--#{variables.$prefix}slider-tick-secondary-size);
|
|
176
|
+
cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
|
|
177
|
+
|
|
178
|
+
// center align the svg along the slider axis
|
|
179
|
+
svg {
|
|
180
|
+
display: block;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.au-slider-tick-label {
|
|
185
|
+
position: absolute;
|
|
186
|
+
text-wrap: nowrap;
|
|
187
|
+
transform: var(--#{variables.$prefix}slider-translate-horizontal);
|
|
188
|
+
margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.au-slider-tick-label-vertical {
|
|
192
|
+
position: absolute;
|
|
193
|
+
margin-inline-start: var(--#{variables.$prefix}slider-label-vertical-margin-inline-start);
|
|
194
|
+
transform: var(--#{variables.$prefix}slider-tick-label-translate-vertical);
|
|
195
|
+
}
|
|
196
|
+
|
|
148
197
|
.au-slider-progress {
|
|
149
198
|
background-color: var(--#{variables.$prefix}slider-progress-color);
|
|
150
199
|
border-radius: var(--#{variables.$prefix}slider-border-radius);
|
|
@@ -159,6 +208,7 @@
|
|
|
159
208
|
font-weight: var(--#{variables.$prefix}slider-label-font-weight);
|
|
160
209
|
margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
|
|
161
210
|
position: absolute;
|
|
211
|
+
text-wrap: nowrap;
|
|
162
212
|
|
|
163
213
|
&.au-slider-label-min:not(.au-slider-rtl) {
|
|
164
214
|
left: var(--#{variables.$prefix}slider-label-min-position);
|
|
@@ -231,10 +281,16 @@
|
|
|
231
281
|
cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
|
|
232
282
|
}
|
|
233
283
|
|
|
284
|
+
.au-slider-clickable-area-with-ticks {
|
|
285
|
+
cursor: default;
|
|
286
|
+
}
|
|
287
|
+
|
|
234
288
|
&.disabled {
|
|
235
289
|
cursor: var(--#{variables.$prefix}slider-disabled-cursor);
|
|
236
290
|
.au-slider-label,
|
|
237
|
-
.au-slider-label-vertical
|
|
291
|
+
.au-slider-label-vertical,
|
|
292
|
+
.au-slider-tick-label,
|
|
293
|
+
.au-slider-tick-label-vertical {
|
|
238
294
|
color: var(--#{variables.$prefix}slider-disabled-color);
|
|
239
295
|
}
|
|
240
296
|
.au-slider-progress,
|
|
@@ -243,7 +299,8 @@
|
|
|
243
299
|
cursor: var(--#{variables.$prefix}slider-disabled-cursor);
|
|
244
300
|
}
|
|
245
301
|
.au-slider-clickable-area,
|
|
246
|
-
.au-slider-clickable-area-vertical
|
|
302
|
+
.au-slider-clickable-area-vertical,
|
|
303
|
+
.au-slider-tick {
|
|
247
304
|
cursor: var(--#{variables.$prefix}slider-disabled-cursor);
|
|
248
305
|
}
|
|
249
306
|
}
|
|
@@ -3,7 +3,8 @@ import { extendWidgetProps } from "@agnos-ui/core/services/extendWidget";
|
|
|
3
3
|
const defaultConfigExtraProps = {
|
|
4
4
|
structure: void 0,
|
|
5
5
|
label: ({ value }) => "" + value,
|
|
6
|
-
handle: void 0
|
|
6
|
+
handle: void 0,
|
|
7
|
+
tick: void 0
|
|
7
8
|
};
|
|
8
9
|
function getSliderDefaultConfig() {
|
|
9
10
|
return { ...getSliderDefaultConfig$1(), ...defaultConfigExtraProps };
|
|
@@ -4,7 +4,8 @@ const extendWidget = require("@agnos-ui/core/services/extendWidget");
|
|
|
4
4
|
const defaultConfigExtraProps = {
|
|
5
5
|
structure: void 0,
|
|
6
6
|
label: ({ value }) => "" + value,
|
|
7
|
-
handle: void 0
|
|
7
|
+
handle: void 0,
|
|
8
|
+
tick: void 0
|
|
8
9
|
};
|
|
9
10
|
function getSliderDefaultConfig() {
|
|
10
11
|
return { ...slider.getSliderDefaultConfig(), ...defaultConfigExtraProps };
|