@agnos-ui/core-bootstrap 0.7.1 → 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 +48 -2
- package/css/agnosui.css.map +1 -1
- package/css/slider.css +48 -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 +61 -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);
|
|
@@ -261,11 +301,16 @@
|
|
|
261
301
|
flex-shrink: var(--bs-slider-clickable-area-vertical-flex-shrink);
|
|
262
302
|
cursor: var(--bs-slider-clickable-area-cursor);
|
|
263
303
|
}
|
|
304
|
+
.au-slider .au-slider-clickable-area-with-ticks {
|
|
305
|
+
cursor: default;
|
|
306
|
+
}
|
|
264
307
|
.au-slider.disabled {
|
|
265
308
|
cursor: var(--bs-slider-disabled-cursor);
|
|
266
309
|
}
|
|
267
310
|
.au-slider.disabled .au-slider-label,
|
|
268
|
-
.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 {
|
|
269
314
|
color: var(--bs-slider-disabled-color);
|
|
270
315
|
}
|
|
271
316
|
.au-slider.disabled .au-slider-progress,
|
|
@@ -274,7 +319,8 @@
|
|
|
274
319
|
cursor: var(--bs-slider-disabled-cursor);
|
|
275
320
|
}
|
|
276
321
|
.au-slider.disabled .au-slider-clickable-area,
|
|
277
|
-
.au-slider.disabled .au-slider-clickable-area-vertical
|
|
322
|
+
.au-slider.disabled .au-slider-clickable-area-vertical,
|
|
323
|
+
.au-slider.disabled .au-slider-tick {
|
|
278
324
|
cursor: var(--bs-slider-disabled-cursor);
|
|
279
325
|
}
|
|
280
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);
|
|
@@ -184,11 +224,16 @@
|
|
|
184
224
|
flex-shrink: var(--bs-slider-clickable-area-vertical-flex-shrink);
|
|
185
225
|
cursor: var(--bs-slider-clickable-area-cursor);
|
|
186
226
|
}
|
|
227
|
+
.au-slider .au-slider-clickable-area-with-ticks {
|
|
228
|
+
cursor: default;
|
|
229
|
+
}
|
|
187
230
|
.au-slider.disabled {
|
|
188
231
|
cursor: var(--bs-slider-disabled-cursor);
|
|
189
232
|
}
|
|
190
233
|
.au-slider.disabled .au-slider-label,
|
|
191
|
-
.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 {
|
|
192
237
|
color: var(--bs-slider-disabled-color);
|
|
193
238
|
}
|
|
194
239
|
.au-slider.disabled .au-slider-progress,
|
|
@@ -197,7 +242,8 @@
|
|
|
197
242
|
cursor: var(--bs-slider-disabled-cursor);
|
|
198
243
|
}
|
|
199
244
|
.au-slider.disabled .au-slider-clickable-area,
|
|
200
|
-
.au-slider.disabled .au-slider-clickable-area-vertical
|
|
245
|
+
.au-slider.disabled .au-slider-clickable-area-vertical,
|
|
246
|
+
.au-slider.disabled .au-slider-tick {
|
|
201
247
|
cursor: var(--bs-slider-disabled-cursor);
|
|
202
248
|
}
|
|
203
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);
|
|
@@ -232,10 +281,16 @@
|
|
|
232
281
|
cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
|
|
233
282
|
}
|
|
234
283
|
|
|
284
|
+
.au-slider-clickable-area-with-ticks {
|
|
285
|
+
cursor: default;
|
|
286
|
+
}
|
|
287
|
+
|
|
235
288
|
&.disabled {
|
|
236
289
|
cursor: var(--#{variables.$prefix}slider-disabled-cursor);
|
|
237
290
|
.au-slider-label,
|
|
238
|
-
.au-slider-label-vertical
|
|
291
|
+
.au-slider-label-vertical,
|
|
292
|
+
.au-slider-tick-label,
|
|
293
|
+
.au-slider-tick-label-vertical {
|
|
239
294
|
color: var(--#{variables.$prefix}slider-disabled-color);
|
|
240
295
|
}
|
|
241
296
|
.au-slider-progress,
|
|
@@ -244,7 +299,8 @@
|
|
|
244
299
|
cursor: var(--#{variables.$prefix}slider-disabled-cursor);
|
|
245
300
|
}
|
|
246
301
|
.au-slider-clickable-area,
|
|
247
|
-
.au-slider-clickable-area-vertical
|
|
302
|
+
.au-slider-clickable-area-vertical,
|
|
303
|
+
.au-slider-tick {
|
|
248
304
|
cursor: var(--#{variables.$prefix}slider-disabled-cursor);
|
|
249
305
|
}
|
|
250
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 };
|