@empathyco/x-components 6.0.0-alpha.18 → 6.0.0-alpha.19
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/CHANGELOG.md +9 -0
- package/design-system/deprecated-full-theme.css +388 -388
- package/docs/API-reference/api/x-components.baseslider.md +9 -0
- package/docs/API-reference/api/x-types.stats.md +1 -1
- package/docs/API-reference/api/x-types.stats.price.md +2 -2
- package/docs/API-reference/components/common/x-components.base-slider.md +5 -4
- package/js/components/base-slider.vue.js +17 -18
- package/js/components/base-slider.vue.js.map +1 -1
- package/js/components/base-slider.vue2.js +5 -0
- package/js/components/base-slider.vue2.js.map +1 -1
- package/js/components/base-slider.vue3.js +1 -1
- package/package.json +4 -4
- package/report/x-adapter-platform.api.json +7 -7
- package/report/x-components.api.json +21 -3
- package/report/x-components.api.md +9 -0
- package/report/x-types.api.json +4 -4
- package/types/components/base-slider.vue.d.ts +11 -0
- package/types/components/base-slider.vue.d.ts.map +1 -1
|
@@ -29,6 +29,10 @@ _default: import("vue").DefineComponent<{
|
|
|
29
29
|
}>;
|
|
30
30
|
required: true;
|
|
31
31
|
};
|
|
32
|
+
contentClass: {
|
|
33
|
+
type: StringConstructor;
|
|
34
|
+
default: string;
|
|
35
|
+
};
|
|
32
36
|
}, {
|
|
33
37
|
slider: import("vue").Ref<HTMLElement | undefined>;
|
|
34
38
|
rangeSelected: import("vue").ComputedRef<number[]>;
|
|
@@ -50,6 +54,10 @@ _default: import("vue").DefineComponent<{
|
|
|
50
54
|
}>;
|
|
51
55
|
required: true;
|
|
52
56
|
};
|
|
57
|
+
contentClass: {
|
|
58
|
+
type: StringConstructor;
|
|
59
|
+
default: string;
|
|
60
|
+
};
|
|
53
61
|
}>> & {
|
|
54
62
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
55
63
|
}, {
|
|
@@ -57,5 +65,6 @@ _default: import("vue").DefineComponent<{
|
|
|
57
65
|
min: number;
|
|
58
66
|
max: number;
|
|
59
67
|
};
|
|
68
|
+
contentClass: string;
|
|
60
69
|
}, {}>
|
|
61
70
|
```
|
|
@@ -18,5 +18,5 @@ export interface Stats
|
|
|
18
18
|
|
|
19
19
|
| Property | Modifiers | Type | Description |
|
|
20
20
|
| --- | --- | --- | --- |
|
|
21
|
-
| [price](./x-types.stats.price.md) | | { min: number; max: number; } | |
|
|
21
|
+
| [price](./x-types.stats.price.md) | | { min: number \| undefined; max: number \| undefined; } | |
|
|
22
22
|
|
|
@@ -14,10 +14,11 @@ implementation.
|
|
|
14
14
|
|
|
15
15
|
## Props
|
|
16
16
|
|
|
17
|
-
| Name
|
|
18
|
-
|
|
|
19
|
-
| <code>threshold</code>
|
|
20
|
-
| <code>modelValue</code>
|
|
17
|
+
| Name | Description | Type | Default |
|
|
18
|
+
| ------------------------- | ----------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------- |
|
|
19
|
+
| <code>threshold</code> | The threshold prop sets the limits for the slider. | <code>{ min: number; max: number }</code> | <code>() => ({ min: 0, max: Number.MAX_SAFE_INTEGER })</code> |
|
|
20
|
+
| <code>modelValue</code> | The modelValue prop sets the initial values for the slider. | <code>{ min: number; max: number }</code> | <code></code> |
|
|
21
|
+
| <code>contentClass</code> | Class to be able to customize slider styles. | <code>string</code> | <code>''</code> |
|
|
21
22
|
|
|
22
23
|
## Events
|
|
23
24
|
|
|
@@ -1,24 +1,20 @@
|
|
|
1
1
|
import _sfc_main from './base-slider.vue2.js';
|
|
2
|
-
import { openBlock, createElementBlock, createElementVNode, createCommentVNode, renderSlot, toDisplayString } from 'vue';
|
|
2
|
+
import { openBlock, createElementBlock, createElementVNode, normalizeClass, createCommentVNode, renderSlot, toDisplayString } from 'vue';
|
|
3
3
|
import './base-slider.vue3.js';
|
|
4
4
|
import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
|
|
5
5
|
|
|
6
6
|
const _hoisted_1 = { class: "x-base-slider" };
|
|
7
|
-
const _hoisted_2 = {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
};
|
|
11
|
-
const _hoisted_3 = { class: "x-base-slider__selected" };
|
|
12
|
-
const _hoisted_4 = { class: "x-base-slider__selected-min" };
|
|
13
|
-
const _hoisted_5 = /* @__PURE__ */ createElementVNode(
|
|
7
|
+
const _hoisted_2 = { class: "x-base-slider__selected" };
|
|
8
|
+
const _hoisted_3 = { class: "x-base-slider__selected-min" };
|
|
9
|
+
const _hoisted_4 = /* @__PURE__ */ createElementVNode(
|
|
14
10
|
"span",
|
|
15
11
|
null,
|
|
16
12
|
"min value",
|
|
17
13
|
-1
|
|
18
14
|
/* HOISTED */
|
|
19
15
|
);
|
|
20
|
-
const
|
|
21
|
-
const
|
|
16
|
+
const _hoisted_5 = { class: "x-base-slider__selected-max" };
|
|
17
|
+
const _hoisted_6 = /* @__PURE__ */ createElementVNode(
|
|
22
18
|
"span",
|
|
23
19
|
null,
|
|
24
20
|
"max value",
|
|
@@ -29,16 +25,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
29
25
|
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
30
26
|
createElementVNode(
|
|
31
27
|
"div",
|
|
32
|
-
|
|
28
|
+
{
|
|
29
|
+
ref: "slider",
|
|
30
|
+
class: normalizeClass(["x-base-slider__nouislider"].concat(`${_ctx.contentClass}`))
|
|
31
|
+
},
|
|
33
32
|
null,
|
|
34
|
-
|
|
35
|
-
/*
|
|
33
|
+
2
|
|
34
|
+
/* CLASS */
|
|
36
35
|
),
|
|
37
|
-
createElementVNode("div",
|
|
36
|
+
createElementVNode("div", _hoisted_2, [
|
|
38
37
|
createCommentVNode("\n @slot Default selected range rendering. This slot will be used by default for rendering\n the selected range without an specific slot implementation.\n @binding {number[]} rangeSelected - The selected range values. Min position 0, Max position 1.\n "),
|
|
39
38
|
renderSlot(_ctx.$slots, "default", { rangeSelected: _ctx.rangeSelected }, () => [
|
|
40
|
-
createElementVNode("p",
|
|
41
|
-
|
|
39
|
+
createElementVNode("p", _hoisted_3, [
|
|
40
|
+
_hoisted_4,
|
|
42
41
|
createElementVNode(
|
|
43
42
|
"span",
|
|
44
43
|
null,
|
|
@@ -47,8 +46,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
47
46
|
/* TEXT */
|
|
48
47
|
)
|
|
49
48
|
]),
|
|
50
|
-
createElementVNode("p",
|
|
51
|
-
|
|
49
|
+
createElementVNode("p", _hoisted_5, [
|
|
50
|
+
_hoisted_6,
|
|
52
51
|
createElementVNode(
|
|
53
52
|
"span",
|
|
54
53
|
null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-slider.vue.js","sources":["../../../src/components/base-slider.vue"],"sourcesContent":["<template>\n <div class=\"x-base-slider\">\n <div ref=\"slider\" class=\"x-base-slider__nouislider\" />\n <div class=\"x-base-slider__selected\">\n <!--\n @slot Default selected range rendering. This slot will be used by default for rendering\n the selected range without an specific slot implementation.\n @binding {number[]} rangeSelected - The selected range values. Min position 0, Max position 1.\n -->\n <slot :rangeSelected=\"rangeSelected\">\n <p class=\"x-base-slider__selected-min\">\n <span>min value</span>\n <span>\n {{ rangeSelected[0] }}\n </span>\n </p>\n <p class=\"x-base-slider__selected-max\">\n <span>max value</span>\n <span>\n {{ rangeSelected[1] }}\n </span>\n </p>\n </slot>\n </div>\n </div>\n</template>\n<script lang=\"ts\">\n import { API, create } from 'nouislider';\n import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue';\n\n /**\n * This component implements a range slider and prints the selected values.\n * It receives a threshold prop to set the limits and uses v-model to get and set\n * the selected values.\n *\n * It makes use of the nouslider library @see https://refreshless.com/nouislider/\n * for the slider implementation.\n *\n */\n export default defineComponent({\n name: 'BaseSlider',\n props: {\n /** The threshold prop sets the limits for the slider. */\n threshold: {\n type: Object as PropType<{ min: number; max: number }>,\n default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER })\n },\n /** The modelValue prop sets the initial values for the slider. */\n modelValue: {\n type: Object as PropType<{ min: number; max: number }>,\n required: true\n }\n },\n /**\n * The component emits an event with the selected values whenever\n * the user changes the slider.\n */\n emits: ['update:modelValue'],\n setup(props, { emit }) {\n /** The nouislider instance. */\n let sliderInstance: API;\n /** The nouislider element reference. */\n const slider = ref<HTMLElement>();\n\n /** The selected min value. */\n const minSelected = ref(props.modelValue?.min ?? props.threshold.min);\n /** The selected max value. */\n const maxSelected = ref(props.modelValue?.max ?? props.threshold.max);\n\n /** The selected range as an array. */\n const rangeSelected = computed(() => [minSelected.value, maxSelected.value]);\n /** The range for the nouislider. */\n const slideRange = computed(() => ({ min: props.threshold.min, max: props.threshold.max }));\n\n onMounted(() => {\n // Create the slider instance\n sliderInstance = create(slider.value!, {\n start: rangeSelected.value,\n range: slideRange.value,\n step: 1,\n connect: true,\n margin: 1\n });\n\n // Update the selected values when the slider update its values\n sliderInstance.on('update', ([min, max]) => {\n minSelected.value = Number(min);\n maxSelected.value = Number(max);\n });\n\n // Emits the selected values when the slider values change\n sliderInstance.on('change', () =>\n emit('update:modelValue', { min: minSelected.value, max: maxSelected.value })\n );\n });\n\n onUnmounted(() => {\n // Waiting to finish the collapse animation before destroying it\n setTimeout(sliderInstance.destroy.bind(sliderInstance), 600);\n });\n\n /**\n * Watch the threshold prop to update the slider state and emit the selected values.\n */\n watch(\n () => props.threshold,\n ({ min, max }) => {\n sliderInstance.updateOptions({ range: slideRange.value, start: [min, max] }, false);\n emit('update:modelValue', { min, max });\n }\n );\n\n /**\n * Watch the modelValue prop to update the slider state.\n *\n * @remarks It only update the values if the values are corrects. It means,\n * values within the threshold limits and not equal to the current values.\n *\n * @returns Undefined.\n */\n watch([() => props.modelValue.min, () => props.modelValue.max], ([min, max]) => {\n // Check if the values are the same\n if (min === minSelected.value && max === maxSelected.value) {\n return;\n }\n\n // Validate the values\n const minValidated = min < props.threshold.min ? props.threshold.min : min;\n const maxValidated = max > props.threshold.max ? props.threshold.max : max;\n\n // Update the nouislider values\n sliderInstance.set([minValidated, maxValidated]);\n\n // Emit the selected values\n if (minValidated !== min || maxValidated !== max) {\n emit('update:modelValue', { min: minValidated, max: maxValidated });\n }\n });\n\n return {\n slider,\n rangeSelected\n };\n }\n });\n</script>\n<style lang=\"css\">\n @import 'nouislider/dist/nouislider.css';\n /** Customize nouislider styles: https://refreshless.com/nouislider/examples/#section-styling */\n\n .x-base-slider {\n gap: 16px;\n }\n\n .x-base-slider,\n .x-base-slider__selected-min,\n .x-base-slider__selected-max {\n display: flex;\n flex-flow: column nowrap;\n }\n\n .x-base-slider__selected {\n display: inline-flex;\n }\n\n .x-base-slider__selected-min,\n .x-base-slider__selected-max {\n flex: 50%;\n }\n\n .x-base-slider__nouislider {\n margin: 16px 0;\n padding: 0 16px;\n }\n\n .x-base-slider__nouislider .noUi-handle:before,\n .x-base-slider__nouislider .noUi-handle:after {\n content: none;\n }\n</style>\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a slider and the selected values. The component needs the threshold for the\nslider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),\nwhich are passed using the `threshold` prop and the selected range, which is passed in using the\nv-model.\n\n### Default usage\n\nIt is required to send the value prop which holds the selected values.\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" />\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSlider\n },\n setup() {\n const selectedRange = ref({ min: 0, max: 1000 });\n\n return {\n selectedRange\n };\n }\n };\n</script>\n```\n\n#### With threshold\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" />\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSliderDemo\n },\n setup() {\n const threshold = ref({ min: 0, max: 1000 });\n const selectedRange = ref(threshold.value);\n\n return {\n selectedRange,\n threshold\n };\n }\n };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the default slot to customize the layout for the selected values.\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" v-slot=\"{ rangeSelected }\">\n <p class=\"x-base-slider__selected-min\">\n <span>min value</span>\n <span>\n {{ rangeSelected[0] }}\n </span>\n </p>\n <p class=\"x-base-slider__selected-max\">\n <span>max value</span>\n <span>\n {{ rangeSelected[1] }}\n </span>\n </p>\n </BaseSlider>\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSliderDemo\n },\n setup() {\n const threshold = ref({ min: 0, max: 1000 });\n const selectedRange = ref(threshold.value);\n\n return {\n selectedRange,\n threshold\n };\n }\n };\n</script>\n```\n\nIt is also possible to add inputs to complement the slider and allow to change the selected values\nmanually.\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\">\n <input\n @change=\"selectedRange.min = $event.target?.valueAsNumber || 0\"\n class=\"x-input\"\n name=\"min\"\n type=\"number\"\n :value=\"selectedRange.min\"\n :aria-label=\"'min'\"\n />\n\n <input\n @change=\"selectedRange.max = $event.target?.valueAsNumber || 1000000\"\n style=\"display: block\"\n class=\"x-input\"\n name=\"max\"\n type=\"number\"\n :value=\"selectedRange.max\"\n :aria-label=\"'max'\"\n />\n </BaseSlider>\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSliderDemo\n },\n setup() {\n const threshold = ref({ min: 0, max: 1000 });\n const selectedRange = ref(threshold.value);\n\n return {\n selectedRange,\n threshold\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_createElementVNode","_openBlock","_createElementBlock","_createCommentVNode","_renderSlot","_toDisplayString"],"mappings":";;;;;MAEY,UAAS,GAAA,EAAA,KAAA,EAAA,eAAA,EAAA,CAAA;MAAC,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,QAAA;;;AASI,MAAA,UAAA,GAAA,EAAA,KAAA,EAAA,yBAAA,EAAA,CAAA;AAKrB,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,6BAA6B,EAAA,CAAA;AACpC,MAAA,UAAA,mBAAAA,kBAAA;AAAA,EAAsB,MAAA;AAAA,EAAA,IAAA;AAAA,EAAhB,WAAA;AAAA,EAAS,CAAA,CAAA;AAAA;AAAA,CAAA,CAAA;;;;;;;;;AAfrB,SAAA,WAAA,CAAA,IAAA,EAAsD,QAAtD,MAAsD,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACtDC,SAoBM,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAF,kBAAA;AAnBJ,MAAA,KAAA;AAAA,MAAA,UAAA;AAAA,MAAA,IAAA;AAAA,MAAA,GAAA;AAAA;AAAA,KAAA;AAAA,IAkBOA,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,MAAAG,kBAAA,CAZL,4RAKI,CAAA;AAAA,MAAAC,UAAA,CAJF,IAAsB,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,EAAA,MAAA;AAAA,QAAAJ,kBAAA,CACtB,GAEO,EAAA,UAAA,EAAA;AAAA,UAAA,UAAA;AAET,UAAAA,kBAAA;AAAA,YAKI,MAAA;AAAA,YALJ,IAAA;AAAA,YAKIK,eAAA,CAAA,IAAA,CAAA,aAAA,CAAA,CAAA,CAAA,CAAA;AAAA,YAAA,CAAA;AAAA;AAAA,WAAA;AAAA,SAAA,CAAA;2BAHF,GAEO,EAAA,UAAA,EAAA;AAAA,UAAA,UAAA;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"base-slider.vue.js","sources":["../../../src/components/base-slider.vue"],"sourcesContent":["<template>\n <div class=\"x-base-slider\">\n <div ref=\"slider\" :class=\"['x-base-slider__nouislider'].concat(`${contentClass}`)\" />\n <div class=\"x-base-slider__selected\">\n <!--\n @slot Default selected range rendering. This slot will be used by default for rendering\n the selected range without an specific slot implementation.\n @binding {number[]} rangeSelected - The selected range values. Min position 0, Max position 1.\n -->\n <slot :rangeSelected=\"rangeSelected\">\n <p class=\"x-base-slider__selected-min\">\n <span>min value</span>\n <span>\n {{ rangeSelected[0] }}\n </span>\n </p>\n <p class=\"x-base-slider__selected-max\">\n <span>max value</span>\n <span>\n {{ rangeSelected[1] }}\n </span>\n </p>\n </slot>\n </div>\n </div>\n</template>\n<script lang=\"ts\">\n import { API, create } from 'nouislider';\n import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue';\n\n /**\n * This component implements a range slider and prints the selected values.\n * It receives a threshold prop to set the limits and uses v-model to get and set\n * the selected values.\n *\n * It makes use of the nouslider library @see https://refreshless.com/nouislider/\n * for the slider implementation.\n *\n */\n export default defineComponent({\n name: 'BaseSlider',\n props: {\n /** The threshold prop sets the limits for the slider. */\n threshold: {\n type: Object as PropType<{ min: number; max: number }>,\n default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER })\n },\n /** The modelValue prop sets the initial values for the slider. */\n modelValue: {\n type: Object as PropType<{ min: number; max: number }>,\n required: true\n },\n /** Class to be able to customize slider styles. */\n contentClass: {\n type: String,\n default: ''\n }\n },\n /**\n * The component emits an event with the selected values whenever\n * the user changes the slider.\n */\n emits: ['update:modelValue'],\n setup(props, { emit }) {\n /** The nouislider instance. */\n let sliderInstance: API;\n /** The nouislider element reference. */\n const slider = ref<HTMLElement>();\n\n /** The selected min value. */\n const minSelected = ref(props.modelValue?.min ?? props.threshold.min);\n /** The selected max value. */\n const maxSelected = ref(props.modelValue?.max ?? props.threshold.max);\n\n /** The selected range as an array. */\n const rangeSelected = computed(() => [minSelected.value, maxSelected.value]);\n /** The range for the nouislider. */\n const slideRange = computed(() => ({ min: props.threshold.min, max: props.threshold.max }));\n\n onMounted(() => {\n // Create the slider instance\n sliderInstance = create(slider.value!, {\n start: rangeSelected.value,\n range: slideRange.value,\n step: 1,\n connect: true,\n margin: 1\n });\n\n // Update the selected values when the slider update its values\n sliderInstance.on('update', ([min, max]) => {\n minSelected.value = Number(min);\n maxSelected.value = Number(max);\n });\n\n // Emits the selected values when the slider values change\n sliderInstance.on('change', () =>\n emit('update:modelValue', { min: minSelected.value, max: maxSelected.value })\n );\n });\n\n onUnmounted(() => {\n // Waiting to finish the collapse animation before destroying it\n setTimeout(sliderInstance.destroy.bind(sliderInstance), 600);\n });\n\n /**\n * Watch the threshold prop to update the slider state and emit the selected values.\n */\n watch(\n () => props.threshold,\n ({ min, max }) => {\n sliderInstance.updateOptions({ range: slideRange.value, start: [min, max] }, false);\n emit('update:modelValue', { min, max });\n }\n );\n\n /**\n * Watch the modelValue prop to update the slider state.\n *\n * @remarks It only update the values if the values are corrects. It means,\n * values within the threshold limits and not equal to the current values.\n *\n * @returns Undefined.\n */\n watch([() => props.modelValue.min, () => props.modelValue.max], ([min, max]) => {\n // Check if the values are the same\n if (min === minSelected.value && max === maxSelected.value) {\n return;\n }\n\n // Validate the values\n const minValidated = min < props.threshold.min ? props.threshold.min : min;\n const maxValidated = max > props.threshold.max ? props.threshold.max : max;\n\n // Update the nouislider values\n sliderInstance.set([minValidated, maxValidated]);\n\n // Emit the selected values\n if (minValidated !== min || maxValidated !== max) {\n emit('update:modelValue', { min: minValidated, max: maxValidated });\n }\n });\n\n return {\n slider,\n rangeSelected\n };\n }\n });\n</script>\n<style lang=\"css\">\n @import 'nouislider/dist/nouislider.css';\n /** Customize nouislider styles: https://refreshless.com/nouislider/examples/#section-styling */\n\n .x-base-slider {\n gap: 16px;\n }\n\n .x-base-slider,\n .x-base-slider__selected-min,\n .x-base-slider__selected-max {\n display: flex;\n flex-flow: column nowrap;\n }\n\n .x-base-slider__selected {\n display: inline-flex;\n }\n\n .x-base-slider__selected-min,\n .x-base-slider__selected-max {\n flex: 50%;\n }\n\n .x-base-slider__nouislider {\n margin: 16px 0;\n padding: 0 16px;\n }\n\n .x-base-slider__nouislider .noUi-handle {\n box-shadow: none;\n }\n\n .x-base-slider__nouislider .noUi-handle:before,\n .x-base-slider__nouislider .noUi-handle:after {\n content: none;\n }\n</style>\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a slider and the selected values. The component needs the threshold for the\nslider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),\nwhich are passed using the `threshold` prop and the selected range, which is passed in using the\nv-model.\n\n### Default usage\n\nIt is required to send the value prop which holds the selected values.\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" />\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSlider\n },\n setup() {\n const selectedRange = ref({ min: 0, max: 1000 });\n\n return {\n selectedRange\n };\n }\n };\n</script>\n```\n\n#### With threshold\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" />\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSliderDemo\n },\n setup() {\n const threshold = ref({ min: 0, max: 1000 });\n const selectedRange = ref(threshold.value);\n\n return {\n selectedRange,\n threshold\n };\n }\n };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the default slot to customize the layout for the selected values.\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" v-slot=\"{ rangeSelected }\">\n <p class=\"x-base-slider__selected-min\">\n <span>min value</span>\n <span>\n {{ rangeSelected[0] }}\n </span>\n </p>\n <p class=\"x-base-slider__selected-max\">\n <span>max value</span>\n <span>\n {{ rangeSelected[1] }}\n </span>\n </p>\n </BaseSlider>\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSliderDemo\n },\n setup() {\n const threshold = ref({ min: 0, max: 1000 });\n const selectedRange = ref(threshold.value);\n\n return {\n selectedRange,\n threshold\n };\n }\n };\n</script>\n```\n\nIt is also possible to add inputs to complement the slider and allow to change the selected values\nmanually.\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\">\n <input\n @change=\"selectedRange.min = $event.target?.valueAsNumber || 0\"\n class=\"x-input\"\n name=\"min\"\n type=\"number\"\n :value=\"selectedRange.min\"\n :aria-label=\"'min'\"\n />\n\n <input\n @change=\"selectedRange.max = $event.target?.valueAsNumber || 1000000\"\n style=\"display: block\"\n class=\"x-input\"\n name=\"max\"\n type=\"number\"\n :value=\"selectedRange.max\"\n :aria-label=\"'max'\"\n />\n </BaseSlider>\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSliderDemo\n },\n setup() {\n const threshold = ref({ min: 0, max: 1000 });\n const selectedRange = ref(threshold.value);\n\n return {\n selectedRange,\n threshold\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_createElementVNode","_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_renderSlot","_toDisplayString"],"mappings":";;;;;qBAUW,KAAM,EAAA,eAAA,EAAA,CAAA;AACe,MAAA,UAAA,GAAA,EAAA,KAAA,EAAA,yBAAA,EAAA,CAAA;AAKrB,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,6BAA6B,EAAA,CAAA;AACpC,MAAA,UAAA,mBAAAA,kBAAA;AAAA,EAAsB,MAAA;AAAA,EAAA,IAAA;AAAA,EAAhB,WAAA;AAAA,EAAS,CAAA,CAAA;AAAA;AAAA,CAAA,CAAA;;;;;;;;;SAfrB,WAAqF,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAA7EC,SAAS,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAF,kBAAA;AAFrB,MAAA,KAAA;AAAA,MAAA;AAAA,QAAA,GAAA,EAAA,QAAA;QAGI,KAoBM,EAAAG,cAAA,CAAA,CAAA,2BAAA,CAAA,CAAA,MAAA,CAAA,CAAA,EAAA,IAAA,CAAA,YAAA,CAAA,CAAA,CAAA,CAAA;AAAA,OAAA;AAnBJ,MAAA,IAAA;AAAA,MAAA,CAAA;AAAA;AAAA,KAAA;AAAA,IAkBOH,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,MAAAI,kBAAA,CAZL,4RAKI,CAAA;AAAA,MAAAC,UAAA,CAJF,IAAsB,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,EAAA,MAAA;AAAA,QAAAL,kBAAA,CACtB,GAEO,EAAA,UAAA,EAAA;AAAA,UAAA,UAAA;AAET,UAAAA,kBAAA;AAAA,YAKI,MAAA;AAAA,YALJ,IAAA;AAAA,YAKIM,eAAA,CAAA,IAAA,CAAA,aAAA,CAAA,CAAA,CAAA,CAAA;AAAA,YAAA,CAAA;AAAA;AAAA,WAAA;AAAA,SAAA,CAAA;2BAHF,GAEO,EAAA,UAAA,EAAA;AAAA,UAAA,UAAA;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-slider.vue2.js","sources":["../../../src/components/base-slider.vue"],"sourcesContent":["<template>\n <div class=\"x-base-slider\">\n <div ref=\"slider\" class=\"x-base-slider__nouislider\" />\n <div class=\"x-base-slider__selected\">\n <!--\n @slot Default selected range rendering. This slot will be used by default for rendering\n the selected range without an specific slot implementation.\n @binding {number[]} rangeSelected - The selected range values. Min position 0, Max position 1.\n -->\n <slot :rangeSelected=\"rangeSelected\">\n <p class=\"x-base-slider__selected-min\">\n <span>min value</span>\n <span>\n {{ rangeSelected[0] }}\n </span>\n </p>\n <p class=\"x-base-slider__selected-max\">\n <span>max value</span>\n <span>\n {{ rangeSelected[1] }}\n </span>\n </p>\n </slot>\n </div>\n </div>\n</template>\n<script lang=\"ts\">\n import { API, create } from 'nouislider';\n import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue';\n\n /**\n * This component implements a range slider and prints the selected values.\n * It receives a threshold prop to set the limits and uses v-model to get and set\n * the selected values.\n *\n * It makes use of the nouslider library @see https://refreshless.com/nouislider/\n * for the slider implementation.\n *\n */\n export default defineComponent({\n name: 'BaseSlider',\n props: {\n /** The threshold prop sets the limits for the slider. */\n threshold: {\n type: Object as PropType<{ min: number; max: number }>,\n default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER })\n },\n /** The modelValue prop sets the initial values for the slider. */\n modelValue: {\n type: Object as PropType<{ min: number; max: number }>,\n required: true\n }\n },\n /**\n * The component emits an event with the selected values whenever\n * the user changes the slider.\n */\n emits: ['update:modelValue'],\n setup(props, { emit }) {\n /** The nouislider instance. */\n let sliderInstance: API;\n /** The nouislider element reference. */\n const slider = ref<HTMLElement>();\n\n /** The selected min value. */\n const minSelected = ref(props.modelValue?.min ?? props.threshold.min);\n /** The selected max value. */\n const maxSelected = ref(props.modelValue?.max ?? props.threshold.max);\n\n /** The selected range as an array. */\n const rangeSelected = computed(() => [minSelected.value, maxSelected.value]);\n /** The range for the nouislider. */\n const slideRange = computed(() => ({ min: props.threshold.min, max: props.threshold.max }));\n\n onMounted(() => {\n // Create the slider instance\n sliderInstance = create(slider.value!, {\n start: rangeSelected.value,\n range: slideRange.value,\n step: 1,\n connect: true,\n margin: 1\n });\n\n // Update the selected values when the slider update its values\n sliderInstance.on('update', ([min, max]) => {\n minSelected.value = Number(min);\n maxSelected.value = Number(max);\n });\n\n // Emits the selected values when the slider values change\n sliderInstance.on('change', () =>\n emit('update:modelValue', { min: minSelected.value, max: maxSelected.value })\n );\n });\n\n onUnmounted(() => {\n // Waiting to finish the collapse animation before destroying it\n setTimeout(sliderInstance.destroy.bind(sliderInstance), 600);\n });\n\n /**\n * Watch the threshold prop to update the slider state and emit the selected values.\n */\n watch(\n () => props.threshold,\n ({ min, max }) => {\n sliderInstance.updateOptions({ range: slideRange.value, start: [min, max] }, false);\n emit('update:modelValue', { min, max });\n }\n );\n\n /**\n * Watch the modelValue prop to update the slider state.\n *\n * @remarks It only update the values if the values are corrects. It means,\n * values within the threshold limits and not equal to the current values.\n *\n * @returns Undefined.\n */\n watch([() => props.modelValue.min, () => props.modelValue.max], ([min, max]) => {\n // Check if the values are the same\n if (min === minSelected.value && max === maxSelected.value) {\n return;\n }\n\n // Validate the values\n const minValidated = min < props.threshold.min ? props.threshold.min : min;\n const maxValidated = max > props.threshold.max ? props.threshold.max : max;\n\n // Update the nouislider values\n sliderInstance.set([minValidated, maxValidated]);\n\n // Emit the selected values\n if (minValidated !== min || maxValidated !== max) {\n emit('update:modelValue', { min: minValidated, max: maxValidated });\n }\n });\n\n return {\n slider,\n rangeSelected\n };\n }\n });\n</script>\n<style lang=\"css\">\n @import 'nouislider/dist/nouislider.css';\n /** Customize nouislider styles: https://refreshless.com/nouislider/examples/#section-styling */\n\n .x-base-slider {\n gap: 16px;\n }\n\n .x-base-slider,\n .x-base-slider__selected-min,\n .x-base-slider__selected-max {\n display: flex;\n flex-flow: column nowrap;\n }\n\n .x-base-slider__selected {\n display: inline-flex;\n }\n\n .x-base-slider__selected-min,\n .x-base-slider__selected-max {\n flex: 50%;\n }\n\n .x-base-slider__nouislider {\n margin: 16px 0;\n padding: 0 16px;\n }\n\n .x-base-slider__nouislider .noUi-handle:before,\n .x-base-slider__nouislider .noUi-handle:after {\n content: none;\n }\n</style>\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a slider and the selected values. The component needs the threshold for the\nslider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),\nwhich are passed using the `threshold` prop and the selected range, which is passed in using the\nv-model.\n\n### Default usage\n\nIt is required to send the value prop which holds the selected values.\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" />\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSlider\n },\n setup() {\n const selectedRange = ref({ min: 0, max: 1000 });\n\n return {\n selectedRange\n };\n }\n };\n</script>\n```\n\n#### With threshold\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" />\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSliderDemo\n },\n setup() {\n const threshold = ref({ min: 0, max: 1000 });\n const selectedRange = ref(threshold.value);\n\n return {\n selectedRange,\n threshold\n };\n }\n };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the default slot to customize the layout for the selected values.\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" v-slot=\"{ rangeSelected }\">\n <p class=\"x-base-slider__selected-min\">\n <span>min value</span>\n <span>\n {{ rangeSelected[0] }}\n </span>\n </p>\n <p class=\"x-base-slider__selected-max\">\n <span>max value</span>\n <span>\n {{ rangeSelected[1] }}\n </span>\n </p>\n </BaseSlider>\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSliderDemo\n },\n setup() {\n const threshold = ref({ min: 0, max: 1000 });\n const selectedRange = ref(threshold.value);\n\n return {\n selectedRange,\n threshold\n };\n }\n };\n</script>\n```\n\nIt is also possible to add inputs to complement the slider and allow to change the selected values\nmanually.\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\">\n <input\n @change=\"selectedRange.min = $event.target?.valueAsNumber || 0\"\n class=\"x-input\"\n name=\"min\"\n type=\"number\"\n :value=\"selectedRange.min\"\n :aria-label=\"'min'\"\n />\n\n <input\n @change=\"selectedRange.max = $event.target?.valueAsNumber || 1000000\"\n style=\"display: block\"\n class=\"x-input\"\n name=\"max\"\n type=\"number\"\n :value=\"selectedRange.max\"\n :aria-label=\"'max'\"\n />\n </BaseSlider>\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSliderDemo\n },\n setup() {\n const threshold = ref({ min: 0, max: 1000 });\n const selectedRange = ref(threshold.value);\n\n return {\n selectedRange,\n threshold\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"base-slider.vue2.js","sources":["../../../src/components/base-slider.vue"],"sourcesContent":["<template>\n <div class=\"x-base-slider\">\n <div ref=\"slider\" :class=\"['x-base-slider__nouislider'].concat(`${contentClass}`)\" />\n <div class=\"x-base-slider__selected\">\n <!--\n @slot Default selected range rendering. This slot will be used by default for rendering\n the selected range without an specific slot implementation.\n @binding {number[]} rangeSelected - The selected range values. Min position 0, Max position 1.\n -->\n <slot :rangeSelected=\"rangeSelected\">\n <p class=\"x-base-slider__selected-min\">\n <span>min value</span>\n <span>\n {{ rangeSelected[0] }}\n </span>\n </p>\n <p class=\"x-base-slider__selected-max\">\n <span>max value</span>\n <span>\n {{ rangeSelected[1] }}\n </span>\n </p>\n </slot>\n </div>\n </div>\n</template>\n<script lang=\"ts\">\n import { API, create } from 'nouislider';\n import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue';\n\n /**\n * This component implements a range slider and prints the selected values.\n * It receives a threshold prop to set the limits and uses v-model to get and set\n * the selected values.\n *\n * It makes use of the nouslider library @see https://refreshless.com/nouislider/\n * for the slider implementation.\n *\n */\n export default defineComponent({\n name: 'BaseSlider',\n props: {\n /** The threshold prop sets the limits for the slider. */\n threshold: {\n type: Object as PropType<{ min: number; max: number }>,\n default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER })\n },\n /** The modelValue prop sets the initial values for the slider. */\n modelValue: {\n type: Object as PropType<{ min: number; max: number }>,\n required: true\n },\n /** Class to be able to customize slider styles. */\n contentClass: {\n type: String,\n default: ''\n }\n },\n /**\n * The component emits an event with the selected values whenever\n * the user changes the slider.\n */\n emits: ['update:modelValue'],\n setup(props, { emit }) {\n /** The nouislider instance. */\n let sliderInstance: API;\n /** The nouislider element reference. */\n const slider = ref<HTMLElement>();\n\n /** The selected min value. */\n const minSelected = ref(props.modelValue?.min ?? props.threshold.min);\n /** The selected max value. */\n const maxSelected = ref(props.modelValue?.max ?? props.threshold.max);\n\n /** The selected range as an array. */\n const rangeSelected = computed(() => [minSelected.value, maxSelected.value]);\n /** The range for the nouislider. */\n const slideRange = computed(() => ({ min: props.threshold.min, max: props.threshold.max }));\n\n onMounted(() => {\n // Create the slider instance\n sliderInstance = create(slider.value!, {\n start: rangeSelected.value,\n range: slideRange.value,\n step: 1,\n connect: true,\n margin: 1\n });\n\n // Update the selected values when the slider update its values\n sliderInstance.on('update', ([min, max]) => {\n minSelected.value = Number(min);\n maxSelected.value = Number(max);\n });\n\n // Emits the selected values when the slider values change\n sliderInstance.on('change', () =>\n emit('update:modelValue', { min: minSelected.value, max: maxSelected.value })\n );\n });\n\n onUnmounted(() => {\n // Waiting to finish the collapse animation before destroying it\n setTimeout(sliderInstance.destroy.bind(sliderInstance), 600);\n });\n\n /**\n * Watch the threshold prop to update the slider state and emit the selected values.\n */\n watch(\n () => props.threshold,\n ({ min, max }) => {\n sliderInstance.updateOptions({ range: slideRange.value, start: [min, max] }, false);\n emit('update:modelValue', { min, max });\n }\n );\n\n /**\n * Watch the modelValue prop to update the slider state.\n *\n * @remarks It only update the values if the values are corrects. It means,\n * values within the threshold limits and not equal to the current values.\n *\n * @returns Undefined.\n */\n watch([() => props.modelValue.min, () => props.modelValue.max], ([min, max]) => {\n // Check if the values are the same\n if (min === minSelected.value && max === maxSelected.value) {\n return;\n }\n\n // Validate the values\n const minValidated = min < props.threshold.min ? props.threshold.min : min;\n const maxValidated = max > props.threshold.max ? props.threshold.max : max;\n\n // Update the nouislider values\n sliderInstance.set([minValidated, maxValidated]);\n\n // Emit the selected values\n if (minValidated !== min || maxValidated !== max) {\n emit('update:modelValue', { min: minValidated, max: maxValidated });\n }\n });\n\n return {\n slider,\n rangeSelected\n };\n }\n });\n</script>\n<style lang=\"css\">\n @import 'nouislider/dist/nouislider.css';\n /** Customize nouislider styles: https://refreshless.com/nouislider/examples/#section-styling */\n\n .x-base-slider {\n gap: 16px;\n }\n\n .x-base-slider,\n .x-base-slider__selected-min,\n .x-base-slider__selected-max {\n display: flex;\n flex-flow: column nowrap;\n }\n\n .x-base-slider__selected {\n display: inline-flex;\n }\n\n .x-base-slider__selected-min,\n .x-base-slider__selected-max {\n flex: 50%;\n }\n\n .x-base-slider__nouislider {\n margin: 16px 0;\n padding: 0 16px;\n }\n\n .x-base-slider__nouislider .noUi-handle {\n box-shadow: none;\n }\n\n .x-base-slider__nouislider .noUi-handle:before,\n .x-base-slider__nouislider .noUi-handle:after {\n content: none;\n }\n</style>\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a slider and the selected values. The component needs the threshold for the\nslider, although is not required (If not passed, fallback is min: 0, max: Number.MAX_SAFE_INTEGER ),\nwhich are passed using the `threshold` prop and the selected range, which is passed in using the\nv-model.\n\n### Default usage\n\nIt is required to send the value prop which holds the selected values.\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" />\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSlider\n },\n setup() {\n const selectedRange = ref({ min: 0, max: 1000 });\n\n return {\n selectedRange\n };\n }\n };\n</script>\n```\n\n#### With threshold\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" />\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSliderDemo\n },\n setup() {\n const threshold = ref({ min: 0, max: 1000 });\n const selectedRange = ref(threshold.value);\n\n return {\n selectedRange,\n threshold\n };\n }\n };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the default slot to customize the layout for the selected values.\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\" v-slot=\"{ rangeSelected }\">\n <p class=\"x-base-slider__selected-min\">\n <span>min value</span>\n <span>\n {{ rangeSelected[0] }}\n </span>\n </p>\n <p class=\"x-base-slider__selected-max\">\n <span>max value</span>\n <span>\n {{ rangeSelected[1] }}\n </span>\n </p>\n </BaseSlider>\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSliderDemo\n },\n setup() {\n const threshold = ref({ min: 0, max: 1000 });\n const selectedRange = ref(threshold.value);\n\n return {\n selectedRange,\n threshold\n };\n }\n };\n</script>\n```\n\nIt is also possible to add inputs to complement the slider and allow to change the selected values\nmanually.\n\n```vue live\n<template>\n <BaseSlider v-model=\"selectedRange\" :threshold=\"threshold\">\n <input\n @change=\"selectedRange.min = $event.target?.valueAsNumber || 0\"\n class=\"x-input\"\n name=\"min\"\n type=\"number\"\n :value=\"selectedRange.min\"\n :aria-label=\"'min'\"\n />\n\n <input\n @change=\"selectedRange.max = $event.target?.valueAsNumber || 1000000\"\n style=\"display: block\"\n class=\"x-input\"\n name=\"max\"\n type=\"number\"\n :value=\"selectedRange.max\"\n :aria-label=\"'max'\"\n />\n </BaseSlider>\n</template>\n\n<script>\n import { BaseSlider } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSliderDemo',\n components: {\n BaseSliderDemo\n },\n setup() {\n const threshold = ref({ min: 0, max: 1000 });\n const selectedRange = ref(threshold.value);\n\n return {\n selectedRange,\n threshold\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import injectCss from '../../tools/inject-css.js';
|
|
2
2
|
|
|
3
|
-
var css = ".noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box;touch-action:none;-webkit-user-select:none;user-select:none}.noUi-target{position:relative}.noUi-base,.noUi-connects{height:100%;position:relative;width:100%;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{height:100%;position:absolute;right:0;top:0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-style:flat;width:100%;will-change:transform;z-index:1}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{top:-100%;width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{height:28px;right:-17px;top:-6px;width:34px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{bottom:-17px;height:34px;right:-6px;width:28px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#fafafa;border:1px solid #d3d3d3;border-radius:4px;box-shadow:inset 0 1px 1px #f0f0f0,0 3px 6px -5px #bbb}.noUi-connects{border-radius:3px}.noUi-connect{background:#3fb8af}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{background:#fff;border:1px solid #d9d9d9;border-radius:3px;box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ebebeb,0 3px 6px -3px #bbb;cursor:default}.noUi-active{box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ddd,0 3px 6px -3px #bbb}.noUi-handle:after,.noUi-handle:before{background:#e8e7e6;content:\"\";display:block;height:14px;left:14px;position:absolute;top:6px;width:1px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{height:1px;left:6px;top:14px;width:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#b8b8b8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{box-sizing:border-box}.noUi-pips{color:#999;position:absolute}.noUi-value{position:absolute;text-align:center;white-space:nowrap}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{background:#ccc;position:absolute}.noUi-marker-large,.noUi-marker-sub{background:#aaa}.noUi-pips-horizontal{height:80px;left:0;padding:10px 0;top:100%;width:100%}.noUi-value-horizontal{transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{height:5px;margin-left:-1px;width:2px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{height:100%;left:100%;padding:0 10px;top:0}.noUi-value-vertical{padding-left:25px;transform:translateY(-50%)}.noUi-rtl .noUi-value-vertical{transform:translateY(50%)}.noUi-marker-vertical.noUi-marker{height:2px;margin-top:-1px;width:5px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{background:#fff;border:1px solid #d9d9d9;border-radius:3px;color:#000;display:block;padding:5px;position:absolute;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{bottom:120%;left:50%;transform:translate(-50%)}.noUi-vertical .noUi-tooltip{right:120%;top:50%;transform:translateY(-50%)}.noUi-horizontal .noUi-origin>.noUi-tooltip{bottom:10px;left:auto;transform:translate(50%)}.noUi-vertical .noUi-origin>.noUi-tooltip{right:28px;top:auto;transform:translateY(-18px)}.x-base-slider{gap:16px}.x-base-slider,.x-base-slider__selected-max,.x-base-slider__selected-min{display:flex;flex-flow:column nowrap}.x-base-slider__selected{display:inline-flex}.x-base-slider__selected-max,.x-base-slider__selected-min{flex:50%}.x-base-slider__nouislider{margin:16px 0;padding:0 16px}.x-base-slider__nouislider .noUi-handle:after,.x-base-slider__nouislider .noUi-handle:before{content:none}";
|
|
3
|
+
var css = ".noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box;touch-action:none;-webkit-user-select:none;user-select:none}.noUi-target{position:relative}.noUi-base,.noUi-connects{height:100%;position:relative;width:100%;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{height:100%;position:absolute;right:0;top:0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-style:flat;width:100%;will-change:transform;z-index:1}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{top:-100%;width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{height:28px;right:-17px;top:-6px;width:34px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{bottom:-17px;height:34px;right:-6px;width:28px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#fafafa;border:1px solid #d3d3d3;border-radius:4px;box-shadow:inset 0 1px 1px #f0f0f0,0 3px 6px -5px #bbb}.noUi-connects{border-radius:3px}.noUi-connect{background:#3fb8af}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{background:#fff;border:1px solid #d9d9d9;border-radius:3px;box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ebebeb,0 3px 6px -3px #bbb;cursor:default}.noUi-active{box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ddd,0 3px 6px -3px #bbb}.noUi-handle:after,.noUi-handle:before{background:#e8e7e6;content:\"\";display:block;height:14px;left:14px;position:absolute;top:6px;width:1px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{height:1px;left:6px;top:14px;width:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#b8b8b8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{box-sizing:border-box}.noUi-pips{color:#999;position:absolute}.noUi-value{position:absolute;text-align:center;white-space:nowrap}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{background:#ccc;position:absolute}.noUi-marker-large,.noUi-marker-sub{background:#aaa}.noUi-pips-horizontal{height:80px;left:0;padding:10px 0;top:100%;width:100%}.noUi-value-horizontal{transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{height:5px;margin-left:-1px;width:2px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{height:100%;left:100%;padding:0 10px;top:0}.noUi-value-vertical{padding-left:25px;transform:translateY(-50%)}.noUi-rtl .noUi-value-vertical{transform:translateY(50%)}.noUi-marker-vertical.noUi-marker{height:2px;margin-top:-1px;width:5px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{background:#fff;border:1px solid #d9d9d9;border-radius:3px;color:#000;display:block;padding:5px;position:absolute;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{bottom:120%;left:50%;transform:translate(-50%)}.noUi-vertical .noUi-tooltip{right:120%;top:50%;transform:translateY(-50%)}.noUi-horizontal .noUi-origin>.noUi-tooltip{bottom:10px;left:auto;transform:translate(50%)}.noUi-vertical .noUi-origin>.noUi-tooltip{right:28px;top:auto;transform:translateY(-18px)}.x-base-slider{gap:16px}.x-base-slider,.x-base-slider__selected-max,.x-base-slider__selected-min{display:flex;flex-flow:column nowrap}.x-base-slider__selected{display:inline-flex}.x-base-slider__selected-max,.x-base-slider__selected-min{flex:50%}.x-base-slider__nouislider{margin:16px 0;padding:0 16px}.x-base-slider__nouislider .noUi-handle{box-shadow:none}.x-base-slider__nouislider .noUi-handle:after,.x-base-slider__nouislider .noUi-handle:before{content:none}";
|
|
4
4
|
injectCss(css);
|
|
5
5
|
|
|
6
6
|
export { css, css as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "6.0.0-alpha.
|
|
3
|
+
"version": "6.0.0-alpha.19",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -70,12 +70,12 @@
|
|
|
70
70
|
},
|
|
71
71
|
"dependencies": {
|
|
72
72
|
"@empathyco/x-adapter": "^8.1.0-alpha.0",
|
|
73
|
-
"@empathyco/x-adapter-platform": "^1.1.0-alpha.
|
|
73
|
+
"@empathyco/x-adapter-platform": "^1.1.0-alpha.9",
|
|
74
74
|
"@empathyco/x-bus": "^1.0.3-alpha.1",
|
|
75
75
|
"@empathyco/x-deep-merge": "^2.0.3-alpha.1",
|
|
76
76
|
"@empathyco/x-logger": "^1.2.0-alpha.11",
|
|
77
77
|
"@empathyco/x-storage-service": "^2.0.3-alpha.0",
|
|
78
|
-
"@empathyco/x-types": "^10.1.0-alpha.
|
|
78
|
+
"@empathyco/x-types": "^10.1.0-alpha.6",
|
|
79
79
|
"@empathyco/x-utils": "^1.0.3-alpha.1",
|
|
80
80
|
"@vue/devtools-api": "~6.5.0",
|
|
81
81
|
"@vueuse/core": "~10.7.1",
|
|
@@ -138,5 +138,5 @@
|
|
|
138
138
|
"access": "public",
|
|
139
139
|
"directory": "dist"
|
|
140
140
|
},
|
|
141
|
-
"gitHead": "
|
|
141
|
+
"gitHead": "795153eb4d238072a21ac57b668c4cf42d4d60f3"
|
|
142
142
|
}
|
|
@@ -3703,7 +3703,7 @@
|
|
|
3703
3703
|
{
|
|
3704
3704
|
"kind": "Interface",
|
|
3705
3705
|
"canonicalReference": "@empathyco/x-adapter-platform!PlatformRelatedPrompt:interface",
|
|
3706
|
-
"docComment": "/**\n * Related prompt model for the `platform` API.\n */\n",
|
|
3706
|
+
"docComment": "/**\n * Related prompt model for the `platform` API.\n *\n * @public\n */\n",
|
|
3707
3707
|
"excerptTokens": [
|
|
3708
3708
|
{
|
|
3709
3709
|
"kind": "Content",
|
|
@@ -3846,7 +3846,7 @@
|
|
|
3846
3846
|
{
|
|
3847
3847
|
"kind": "Interface",
|
|
3848
3848
|
"canonicalReference": "@empathyco/x-adapter-platform!PlatformRelatedPromptsResponse:interface",
|
|
3849
|
-
"docComment": "/**\n * Response for the `related prompts` endpoint.\n */\n",
|
|
3849
|
+
"docComment": "/**\n * Response for the `related prompts` endpoint.\n *\n * @public\n */\n",
|
|
3850
3850
|
"excerptTokens": [
|
|
3851
3851
|
{
|
|
3852
3852
|
"kind": "Content",
|
|
@@ -5895,7 +5895,7 @@
|
|
|
5895
5895
|
{
|
|
5896
5896
|
"kind": "Variable",
|
|
5897
5897
|
"canonicalReference": "@empathyco/x-adapter-platform!relatedPromptSchema:var",
|
|
5898
|
-
"docComment": "/**\n * Default implementation for the RelatedPromptSchema.\n */\n",
|
|
5898
|
+
"docComment": "/**\n * Default implementation for the RelatedPromptSchema.\n *\n * @public\n */\n",
|
|
5899
5899
|
"excerptTokens": [
|
|
5900
5900
|
{
|
|
5901
5901
|
"kind": "Content",
|
|
@@ -5995,7 +5995,7 @@
|
|
|
5995
5995
|
{
|
|
5996
5996
|
"kind": "Variable",
|
|
5997
5997
|
"canonicalReference": "@empathyco/x-adapter-platform!relatedPromptsRequestMapper:var",
|
|
5998
|
-
"docComment": "/**\n * Default implementation for the RelatedPromptsRequestMapper.\n */\n",
|
|
5998
|
+
"docComment": "/**\n * Default implementation for the RelatedPromptsRequestMapper.\n *\n * @public\n */\n",
|
|
5999
5999
|
"excerptTokens": [
|
|
6000
6000
|
{
|
|
6001
6001
|
"kind": "Content",
|
|
@@ -6045,7 +6045,7 @@
|
|
|
6045
6045
|
{
|
|
6046
6046
|
"kind": "Variable",
|
|
6047
6047
|
"canonicalReference": "@empathyco/x-adapter-platform!relatedPromptsRequestSchema:var",
|
|
6048
|
-
"docComment": "/**\n * Default implementation for the RelatedPromptsRequestSchema.\n */\n",
|
|
6048
|
+
"docComment": "/**\n * Default implementation for the RelatedPromptsRequestSchema.\n *\n * @public\n */\n",
|
|
6049
6049
|
"excerptTokens": [
|
|
6050
6050
|
{
|
|
6051
6051
|
"kind": "Content",
|
|
@@ -6095,7 +6095,7 @@
|
|
|
6095
6095
|
{
|
|
6096
6096
|
"kind": "Variable",
|
|
6097
6097
|
"canonicalReference": "@empathyco/x-adapter-platform!relatedPromptsResponseMapper:var",
|
|
6098
|
-
"docComment": "/**\n * Default implementation for the RelatedPromptsResponseMapper.\n */\n",
|
|
6098
|
+
"docComment": "/**\n * Default implementation for the RelatedPromptsResponseMapper.\n *\n * @public\n */\n",
|
|
6099
6099
|
"excerptTokens": [
|
|
6100
6100
|
{
|
|
6101
6101
|
"kind": "Content",
|
|
@@ -6145,7 +6145,7 @@
|
|
|
6145
6145
|
{
|
|
6146
6146
|
"kind": "Variable",
|
|
6147
6147
|
"canonicalReference": "@empathyco/x-adapter-platform!relatedPromptsResponseSchema:var",
|
|
6148
|
-
"docComment": "/**\n * Default implementation for the RelatedPromptsResponseSchema.\n */\n",
|
|
6148
|
+
"docComment": "/**\n * Default implementation for the RelatedPromptsResponseSchema.\n *\n * @public\n */\n",
|
|
6149
6149
|
"excerptTokens": [
|
|
6150
6150
|
{
|
|
6151
6151
|
"kind": "Content",
|
|
@@ -8588,7 +8588,16 @@
|
|
|
8588
8588
|
},
|
|
8589
8589
|
{
|
|
8590
8590
|
"kind": "Content",
|
|
8591
|
-
"text": "<{\n min: number;\n max: number;\n }>;\n required: true;\n };\n
|
|
8591
|
+
"text": "<{\n min: number;\n max: number;\n }>;\n required: true;\n };\n contentClass: {\n type: "
|
|
8592
|
+
},
|
|
8593
|
+
{
|
|
8594
|
+
"kind": "Reference",
|
|
8595
|
+
"text": "StringConstructor",
|
|
8596
|
+
"canonicalReference": "!StringConstructor:interface"
|
|
8597
|
+
},
|
|
8598
|
+
{
|
|
8599
|
+
"kind": "Content",
|
|
8600
|
+
"text": ";\n default: string;\n };\n}, {\n slider: import(\"vue\")."
|
|
8592
8601
|
},
|
|
8593
8602
|
{
|
|
8594
8603
|
"kind": "Reference",
|
|
@@ -8678,7 +8687,16 @@
|
|
|
8678
8687
|
},
|
|
8679
8688
|
{
|
|
8680
8689
|
"kind": "Content",
|
|
8681
|
-
"text": "<{\n min: number;\n max: number;\n }>;\n required: true;\n };\n
|
|
8690
|
+
"text": "<{\n min: number;\n max: number;\n }>;\n required: true;\n };\n contentClass: {\n type: "
|
|
8691
|
+
},
|
|
8692
|
+
{
|
|
8693
|
+
"kind": "Reference",
|
|
8694
|
+
"text": "StringConstructor",
|
|
8695
|
+
"canonicalReference": "!StringConstructor:interface"
|
|
8696
|
+
},
|
|
8697
|
+
{
|
|
8698
|
+
"kind": "Content",
|
|
8699
|
+
"text": ";\n default: string;\n };\n}>> & {\n \"onUpdate:modelValue\"?: ((...args: any[]) => any) | undefined;\n}, {\n threshold: {\n min: number;\n max: number;\n };\n contentClass: string;\n}, {}>"
|
|
8682
8700
|
}
|
|
8683
8701
|
],
|
|
8684
8702
|
"fileUrlPath": "dist/types/components/base-slider.vue.d.ts",
|
|
@@ -8687,7 +8705,7 @@
|
|
|
8687
8705
|
"name": "BaseSlider",
|
|
8688
8706
|
"variableTypeTokenRange": {
|
|
8689
8707
|
"startIndex": 1,
|
|
8690
|
-
"endIndex":
|
|
8708
|
+
"endIndex": 32
|
|
8691
8709
|
}
|
|
8692
8710
|
},
|
|
8693
8711
|
{
|
|
@@ -1255,6 +1255,10 @@ max: number;
|
|
|
1255
1255
|
}>;
|
|
1256
1256
|
required: true;
|
|
1257
1257
|
};
|
|
1258
|
+
contentClass: {
|
|
1259
|
+
type: StringConstructor;
|
|
1260
|
+
default: string;
|
|
1261
|
+
};
|
|
1258
1262
|
}, {
|
|
1259
1263
|
slider: Ref<HTMLElement | undefined>;
|
|
1260
1264
|
rangeSelected: ComputedRef<number[]>;
|
|
@@ -1276,6 +1280,10 @@ max: number;
|
|
|
1276
1280
|
}>;
|
|
1277
1281
|
required: true;
|
|
1278
1282
|
};
|
|
1283
|
+
contentClass: {
|
|
1284
|
+
type: StringConstructor;
|
|
1285
|
+
default: string;
|
|
1286
|
+
};
|
|
1279
1287
|
}>> & {
|
|
1280
1288
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
1281
1289
|
}, {
|
|
@@ -1283,6 +1291,7 @@ threshold: {
|
|
|
1283
1291
|
min: number;
|
|
1284
1292
|
max: number;
|
|
1285
1293
|
};
|
|
1294
|
+
contentClass: string;
|
|
1286
1295
|
}, {}>;
|
|
1287
1296
|
|
|
1288
1297
|
// @public
|
package/report/x-types.api.json
CHANGED
|
@@ -4583,7 +4583,7 @@
|
|
|
4583
4583
|
{
|
|
4584
4584
|
"kind": "Interface",
|
|
4585
4585
|
"canonicalReference": "@empathyco/x-types!RelatedPrompt:interface",
|
|
4586
|
-
"docComment": "/**\n * Represents a related prompt.\n */\n",
|
|
4586
|
+
"docComment": "/**\n * Represents a related prompt.\n *\n * @public\n */\n",
|
|
4587
4587
|
"excerptTokens": [
|
|
4588
4588
|
{
|
|
4589
4589
|
"kind": "Content",
|
|
@@ -4700,7 +4700,7 @@
|
|
|
4700
4700
|
{
|
|
4701
4701
|
"kind": "Interface",
|
|
4702
4702
|
"canonicalReference": "@empathyco/x-types!RelatedPromptsRequest:interface",
|
|
4703
|
-
"docComment": "/**\n * Request for Related Prompts endpoint.\n */\n",
|
|
4703
|
+
"docComment": "/**\n * Request for Related Prompts endpoint.\n *\n * @public\n */\n",
|
|
4704
4704
|
"excerptTokens": [
|
|
4705
4705
|
{
|
|
4706
4706
|
"kind": "Content",
|
|
@@ -4744,7 +4744,7 @@
|
|
|
4744
4744
|
{
|
|
4745
4745
|
"kind": "Interface",
|
|
4746
4746
|
"canonicalReference": "@empathyco/x-types!RelatedPromptsResponse:interface",
|
|
4747
|
-
"docComment": "/**\n * Response for the related prompts endpoint.\n */\n",
|
|
4747
|
+
"docComment": "/**\n * Response for the related prompts endpoint.\n *\n * @public\n */\n",
|
|
4748
4748
|
"excerptTokens": [
|
|
4749
4749
|
{
|
|
4750
4750
|
"kind": "Content",
|
|
@@ -6570,7 +6570,7 @@
|
|
|
6570
6570
|
},
|
|
6571
6571
|
{
|
|
6572
6572
|
"kind": "Content",
|
|
6573
|
-
"text": "{\n min: number;\n max: number;\n }"
|
|
6573
|
+
"text": "{\n min: number | undefined;\n max: number | undefined;\n }"
|
|
6574
6574
|
},
|
|
6575
6575
|
{
|
|
6576
6576
|
"kind": "Content",
|
|
@@ -28,6 +28,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
28
28
|
}>;
|
|
29
29
|
required: true;
|
|
30
30
|
};
|
|
31
|
+
/** Class to be able to customize slider styles. */
|
|
32
|
+
contentClass: {
|
|
33
|
+
type: StringConstructor;
|
|
34
|
+
default: string;
|
|
35
|
+
};
|
|
31
36
|
}, {
|
|
32
37
|
slider: import("vue").Ref<HTMLElement | undefined>;
|
|
33
38
|
rangeSelected: import("vue").ComputedRef<number[]>;
|
|
@@ -51,6 +56,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
51
56
|
}>;
|
|
52
57
|
required: true;
|
|
53
58
|
};
|
|
59
|
+
/** Class to be able to customize slider styles. */
|
|
60
|
+
contentClass: {
|
|
61
|
+
type: StringConstructor;
|
|
62
|
+
default: string;
|
|
63
|
+
};
|
|
54
64
|
}>> & {
|
|
55
65
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
56
66
|
}, {
|
|
@@ -58,6 +68,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
58
68
|
min: number;
|
|
59
69
|
max: number;
|
|
60
70
|
};
|
|
71
|
+
contentClass: string;
|
|
61
72
|
}, {}>;
|
|
62
73
|
export default _default;
|
|
63
74
|
//# sourceMappingURL=base-slider.vue?vue&type=script&lang.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-slider.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-slider.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AAEE,OAAO,EAAqD,QAAQ,EAAc,MAAM,KAAK,CAAC;AAE9F;;;;;;;;GAQG;;IAIC,yDAAyD;;;iBAEvB,MAAM;iBAAO,MAAM;;;;;;;IAGrD,kEAAkE;;;iBAEhC,MAAM;iBAAO,MAAM
|
|
1
|
+
{"version":3,"file":"base-slider.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-slider.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AAEE,OAAO,EAAqD,QAAQ,EAAc,MAAM,KAAK,CAAC;AAE9F;;;;;;;;GAQG;;IAIC,yDAAyD;;;iBAEvB,MAAM;iBAAO,MAAM;;;;;;;IAGrD,kEAAkE;;;iBAEhC,MAAM;iBAAO,MAAM;;;;IAGrD,mDAAmD;;;;;;;;;IAVnD,yDAAyD;;;iBAEvB,MAAM;iBAAO,MAAM;;;;;;;IAGrD,kEAAkE;;;iBAEhC,MAAM;iBAAO,MAAM;;;;IAGrD,mDAAmD;;;;;;;;;aARjB,MAAM;aAAO,MAAM;;;;AALzD,wBA8GG"}
|