npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.17 → 6.0.0-alpha.19 - Mend

@empathyco/x-components 6.0.0-alpha.17 → 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.

Files changed (35) hide show

package/docs/API-reference/api/x-components.baseslider.md CHANGED Viewed

@@ -29,6 +29,10 @@ _default: import("vue").DefineComponent<{
         }>;
         required: true;
     };
+    contentClass: {
+        type: StringConstructor;
+        default: string;
+    };
 }, {
     slider: import("vue").Ref<HTMLElement | undefined>;
     rangeSelected: import("vue").ComputedRef<number[]>;
@@ -50,6 +54,10 @@ _default: import("vue").DefineComponent<{
         }>;
         required: true;
     };
+    contentClass: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -57,5 +65,6 @@ _default: import("vue").DefineComponent<{
         min: number;
         max: number;
     };
+    contentClass: string;
 }, {}>
 ```

package/docs/API-reference/api/x-components.globalxbus.md CHANGED Viewed

@@ -172,6 +172,8 @@ _default: import("vue").DefineComponent<{
             PushableUrlStateUpdated: (payload: import("..").UrlParams, metadata: import("..").WireMetadata) => unknown;
             ReplaceableUrlStateUpdated: (payload: import("..").UrlParams, metadata: import("..").WireMetadata) => unknown;
             RelatedPromptsRequestUpdated: (payload: import("@empathyco/x-types").RelatedPromptsRequest | null, metadata: import("..").WireMetadata) => unknown;
+            UserSelectedARelatedPrompt: (payload: number, metadata: import("..").WireMetadata) => unknown;
+            UserSelectedARelatedPromptQuery: (payload: number, metadata: import("..").WireMetadata) => unknown;
         }>>;
         required: true;
     };
@@ -338,6 +340,8 @@ _default: import("vue").DefineComponent<{
             PushableUrlStateUpdated: (payload: import("..").UrlParams, metadata: import("..").WireMetadata) => unknown;
             ReplaceableUrlStateUpdated: (payload: import("..").UrlParams, metadata: import("..").WireMetadata) => unknown;
             RelatedPromptsRequestUpdated: (payload: import("@empathyco/x-types").RelatedPromptsRequest | null, metadata: import("..").WireMetadata) => unknown;
+            UserSelectedARelatedPrompt: (payload: number, metadata: import("..").WireMetadata) => unknown;
+            UserSelectedARelatedPromptQuery: (payload: number, metadata: import("..").WireMetadata) => unknown;
         }>>;
         required: true;
     };

package/docs/API-reference/api/x-components.hierarchicalfilter.md CHANGED Viewed

@@ -184,6 +184,8 @@ _default: import("vue").DefineComponent<{
         PushableUrlStateUpdated?: import("../../../../types").UrlParams | undefined;
         ReplaceableUrlStateUpdated?: import("../../../../types").UrlParams | undefined;
         RelatedPromptsRequestUpdated?: import("@empathyco/x-types").RelatedPromptsRequest | null | undefined;
+        UserSelectedARelatedPrompt?: number | undefined;
+        UserSelectedARelatedPromptQuery?: number | undefined;
     }>;
     innerCssClasses: import("vue").ComputedRef<(string | Dictionary<boolean>)[]>;
     renderedChildrenFilters: import("vue").ComputedRef<HierarchicalFilterModel[]>;

package/docs/API-reference/api/x-components.relatedpromptsxevents.md CHANGED Viewed

@@ -17,4 +17,6 @@ export interface RelatedPromptsXEvents
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [RelatedPromptsRequestUpdated](./x-components.relatedpromptsxevents.relatedpromptsrequestupdated.md) |  | RelatedPromptsRequest \| null | Any property of the related-prompts request has changed Payload: The new related-prompts request or <code>null</code> if there is not enough data in the state to conform a valid request. |
+|  [UserSelectedARelatedPrompt](./x-components.relatedpromptsxevents.userselectedarelatedprompt.md) |  | number | The selected prompt has changed. Payload: The index of the prompt in the RelatedPrompts list or -1 to remove selection. |
+|  [UserSelectedARelatedPromptQuery](./x-components.relatedpromptsxevents.userselectedarelatedpromptquery.md) |  | number | The selected next query of the selected prompt has changed. Payload: The index of the next query in the NextQueries list or -1 to remove selection. |

package/docs/API-reference/api/x-components.relatedpromptsxevents.userselectedarelatedprompt.md ADDED Viewed

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [RelatedPromptsXEvents](./x-components.relatedpromptsxevents.md) &gt; [UserSelectedARelatedPrompt](./x-components.relatedpromptsxevents.userselectedarelatedprompt.md)
+## RelatedPromptsXEvents.UserSelectedARelatedPrompt property
+The selected prompt has changed. Payload: The index of the prompt in the RelatedPrompts list or -1 to remove selection.
+**Signature:**
+```typescript
+UserSelectedARelatedPrompt: number;
+```

package/docs/API-reference/api/x-components.relatedpromptsxevents.userselectedarelatedpromptquery.md ADDED Viewed

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [RelatedPromptsXEvents](./x-components.relatedpromptsxevents.md) &gt; [UserSelectedARelatedPromptQuery](./x-components.relatedpromptsxevents.userselectedarelatedpromptquery.md)
+## RelatedPromptsXEvents.UserSelectedARelatedPromptQuery property
+The selected next query of the selected prompt has changed. Payload: The index of the next query in the NextQueries list or -1 to remove selection.
+**Signature:**
+```typescript
+UserSelectedARelatedPromptQuery: number;
+```

package/docs/API-reference/api/x-components.simplefilter.md CHANGED Viewed

@@ -181,6 +181,8 @@ _default: import("vue").DefineComponent<{
         PushableUrlStateUpdated?: import("../../../..").UrlParams | undefined;
         ReplaceableUrlStateUpdated?: import("../../../..").UrlParams | undefined;
         RelatedPromptsRequestUpdated?: import("@empathyco/x-types").RelatedPromptsRequest | null | undefined;
+        UserSelectedARelatedPrompt?: number | undefined;
+        UserSelectedARelatedPromptQuery?: number | undefined;
     }>;
     innerCssClasses: import("vue").ComputedRef<(string | Dictionary<boolean>)[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/docs/API-reference/api/x-components.snippetcallbacks.md CHANGED Viewed

@@ -171,6 +171,8 @@ _default: import("vue").DefineComponent<{}, {
         PushableUrlStateUpdated: (payload: import("..").UrlParams, metadata: WireMetadata) => unknown;
         ReplaceableUrlStateUpdated: (payload: import("..").UrlParams, metadata: WireMetadata) => unknown;
         RelatedPromptsRequestUpdated: (payload: import("@empathyco/x-types").RelatedPromptsRequest | null, metadata: WireMetadata) => unknown;
+        UserSelectedARelatedPrompt: (payload: number, metadata: WireMetadata) => unknown;
+        UserSelectedARelatedPromptQuery: (payload: number, metadata: WireMetadata) => unknown;
     }>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```

package/docs/API-reference/api/x-types.stats.md CHANGED Viewed

@@ -18,5 +18,5 @@ export interface Stats
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [price](./x-types.stats.price.md) |  | { min: number; max: number; } |  |
+|  [price](./x-types.stats.price.md) |  | { min: number \| undefined; max: number \| undefined; } |  |

package/docs/API-reference/api/x-types.stats.price.md CHANGED Viewed

@@ -8,7 +8,7 @@
 ```typescript
 price: {
-        min: number;
-        max: number;
+        min: number | undefined;
+        max: number | undefined;
     };
 ```

package/docs/API-reference/components/common/x-components.base-slider.md CHANGED Viewed

@@ -14,10 +14,11 @@ implementation.
 ## Props
-| Name                    | Description                                                 | Type                                      | Default                                                       |
-| ----------------------- | ----------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------- |
-| <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> |
-| <code>modelValue</code> | The modelValue prop sets the initial values for the slider. | <code>{ min: number; max: number }</code> | <code></code>                                                 |
+| Name                      | Description                                                 | Type                                      | Default                                                       |
+| ------------------------- | ----------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------- |
+| <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> |
+| <code>modelValue</code>   | The modelValue prop sets the initial values for the slider. | <code>{ min: number; max: number }</code> | <code></code>                                                 |
+| <code>contentClass</code> | Class to be able to customize slider styles.                | <code>string</code>                       | <code>''</code>                                               |
 ## Events

package/js/components/base-slider.vue.js CHANGED Viewed

@@ -1,24 +1,20 @@
 import _sfc_main from './base-slider.vue2.js';
-import { openBlock, createElementBlock, createElementVNode, createCommentVNode, renderSlot, toDisplayString } from 'vue';
+import { openBlock, createElementBlock, createElementVNode, normalizeClass, createCommentVNode, renderSlot, toDisplayString } from 'vue';
 import './base-slider.vue3.js';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 const _hoisted_1 = { class: "x-base-slider" };
-const _hoisted_2 = {
-  ref: "slider",
-  class: "x-base-slider__nouislider"
-};
-const _hoisted_3 = { class: "x-base-slider__selected" };
-const _hoisted_4 = { class: "x-base-slider__selected-min" };
-const _hoisted_5 = /* @__PURE__ */ createElementVNode(
+const _hoisted_2 = { class: "x-base-slider__selected" };
+const _hoisted_3 = { class: "x-base-slider__selected-min" };
+const _hoisted_4 = /* @__PURE__ */ createElementVNode(
   "span",
   null,
   "min value",
   -1
   /* HOISTED */
 );
-const _hoisted_6 = { class: "x-base-slider__selected-max" };
-const _hoisted_7 = /* @__PURE__ */ createElementVNode(
+const _hoisted_5 = { class: "x-base-slider__selected-max" };
+const _hoisted_6 = /* @__PURE__ */ createElementVNode(
   "span",
   null,
   "max value",
@@ -29,16 +25,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1, [
     createElementVNode(
       "div",
-      _hoisted_2,
+      {
+        ref: "slider",
+        class: normalizeClass(["x-base-slider__nouislider"].concat(`${_ctx.contentClass}`))
+      },
       null,
-      512
-      /* NEED_PATCH */
+      2
+      /* CLASS */
     ),
-    createElementVNode("div", _hoisted_3, [
+    createElementVNode("div", _hoisted_2, [
       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      "),
       renderSlot(_ctx.$slots, "default", { rangeSelected: _ctx.rangeSelected }, () => [
-        createElementVNode("p", _hoisted_4, [
-          _hoisted_5,
+        createElementVNode("p", _hoisted_3, [
+          _hoisted_4,
           createElementVNode(
             "span",
             null,
@@ -47,8 +46,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             /* TEXT */
           )
         ]),
-        createElementVNode("p", _hoisted_6, [
-          _hoisted_7,
+        createElementVNode("p", _hoisted_5, [
+          _hoisted_6,
           createElementVNode(
             "span",
             null,

package/js/components/base-slider.vue.js.map CHANGED Viewed

	@@ -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;;;;;;;;;;;;;;;;;"}

package/js/components/base-slider.vue2.js CHANGED Viewed

@@ -22,6 +22,11 @@ var _sfc_main = defineComponent({
         modelValue: {
             type: Object,
             required: true
+        },
+        /** Class to be able to customize slider styles. */
+        contentClass: {
+            type: String,
+            default: ''
         }
     },
     /**

package/js/components/base-slider.vue2.js.map CHANGED Viewed

	@@ -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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"}

package/js/components/base-slider.vue3.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import injectCss from '../../tools/inject-css.js';
-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}";
+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}";
 injectCss(css);
 export { css, css as default };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.17",
+  "version": "6.0.0-alpha.19",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -70,12 +70,12 @@
   },
   "dependencies": {
     "@empathyco/x-adapter": "^8.1.0-alpha.0",
-    "@empathyco/x-adapter-platform": "^1.1.0-alpha.8",
+    "@empathyco/x-adapter-platform": "^1.1.0-alpha.9",
     "@empathyco/x-bus": "^1.0.3-alpha.1",
     "@empathyco/x-deep-merge": "^2.0.3-alpha.1",
     "@empathyco/x-logger": "^1.2.0-alpha.11",
     "@empathyco/x-storage-service": "^2.0.3-alpha.0",
-    "@empathyco/x-types": "^10.1.0-alpha.5",
+    "@empathyco/x-types": "^10.1.0-alpha.6",
     "@empathyco/x-utils": "^1.0.3-alpha.1",
     "@vue/devtools-api": "~6.5.0",
     "@vueuse/core": "~10.7.1",
@@ -138,5 +138,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "e977a597bc5442be5341d324c23f290660721d16"
+  "gitHead": "795153eb4d238072a21ac57b668c4cf42d4d60f3"
 }

package/report/x-adapter-platform.api.json CHANGED Viewed

@@ -3703,7 +3703,7 @@
         {
           "kind": "Interface",
           "canonicalReference": "@empathyco/x-adapter-platform!PlatformRelatedPrompt:interface",
-          "docComment": "/**\n * Related prompt model for the `platform` API.\n */\n",
+          "docComment": "/**\n * Related prompt model for the `platform` API.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -3846,7 +3846,7 @@
         {
           "kind": "Interface",
           "canonicalReference": "@empathyco/x-adapter-platform!PlatformRelatedPromptsResponse:interface",
-          "docComment": "/**\n * Response for the `related prompts` endpoint.\n */\n",
+          "docComment": "/**\n * Response for the `related prompts` endpoint.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -5895,7 +5895,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@empathyco/x-adapter-platform!relatedPromptSchema:var",
-          "docComment": "/**\n * Default implementation for the RelatedPromptSchema.\n */\n",
+          "docComment": "/**\n * Default implementation for the RelatedPromptSchema.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -5995,7 +5995,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@empathyco/x-adapter-platform!relatedPromptsRequestMapper:var",
-          "docComment": "/**\n * Default implementation for the RelatedPromptsRequestMapper.\n */\n",
+          "docComment": "/**\n * Default implementation for the RelatedPromptsRequestMapper.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -6045,7 +6045,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@empathyco/x-adapter-platform!relatedPromptsRequestSchema:var",
-          "docComment": "/**\n * Default implementation for the RelatedPromptsRequestSchema.\n */\n",
+          "docComment": "/**\n * Default implementation for the RelatedPromptsRequestSchema.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -6095,7 +6095,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@empathyco/x-adapter-platform!relatedPromptsResponseMapper:var",
-          "docComment": "/**\n * Default implementation for the RelatedPromptsResponseMapper.\n */\n",
+          "docComment": "/**\n * Default implementation for the RelatedPromptsResponseMapper.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -6145,7 +6145,7 @@
         {
           "kind": "Variable",
           "canonicalReference": "@empathyco/x-adapter-platform!relatedPromptsResponseSchema:var",
-          "docComment": "/**\n * Default implementation for the RelatedPromptsResponseSchema.\n */\n",
+          "docComment": "/**\n * Default implementation for the RelatedPromptsResponseSchema.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",