@empathyco/x-components 6.0.0-alpha.6 → 6.0.0-alpha.61

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

@@ -0,0 +1,65 @@
+import _sfc_main from './base-slider.vue2.js';
+import { openBlock, createElementBlock, createElementVNode, normalizeClass, 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 = { 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_5 = { class: "x-base-slider__selected-max" };
+const _hoisted_6 = /* @__PURE__ */ createElementVNode(
+  "span",
+  null,
+  "max value",
+  -1
+  /* HOISTED */
+);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode(
+      "div",
+      {
+        ref: "slider",
+        class: normalizeClass(["x-base-slider__nouislider"].concat(`${_ctx.contentClass}`))
+      },
+      null,
+      2
+      /* CLASS */
+    ),
+    createElementVNode("div", _hoisted_2, [
+      renderSlot(_ctx.$slots, "default", { rangeSelected: _ctx.rangeSelected }, () => [
+        createElementVNode("p", _hoisted_3, [
+          _hoisted_4,
+          createElementVNode(
+            "span",
+            null,
+            toDisplayString(_ctx.rangeSelected[0]),
+            1
+            /* TEXT */
+          )
+        ]),
+        createElementVNode("p", _hoisted_5, [
+          _hoisted_6,
+          createElementVNode(
+            "span",
+            null,
+            toDisplayString(_ctx.rangeSelected[1]),
+            1
+            /* TEXT */
+          )
+        ])
+      ])
+    ])
+  ]);
+}
+var baseSlider = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { baseSlider as default };
+//# sourceMappingURL=base-slider.vue.js.map

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

@@ -0,0 +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","_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;AAdJ,MAAA,IAAA;AAAA,MAAA,CAAA;AAAA;AAAA,KAaO;AAAA,IAAAH,kBAAA,CAZL,KAKI,EAAA,UAAA,EAAA;AAAA,MAAAI,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;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,109 @@
+import { create } from 'nouislider';
+import { defineComponent, ref, computed, onMounted, onUnmounted, watch } from 'vue';
+
+/**
+ * This component implements a range slider and prints the selected values.
+ * It receives a threshold prop to set the limits and uses v-model to get and set
+ * the selected values.
+ *
+ * It makes use of the nouslider library @see https://refreshless.com/nouislider/
+ * for the slider implementation.
+ *
+ */
+var _sfc_main = defineComponent({
+    name: 'BaseSlider',
+    props: {
+        /** The threshold prop sets the limits for the slider. */
+        threshold: {
+            type: Object,
+            default: () => ({ min: 0, max: Number.MAX_SAFE_INTEGER })
+        },
+        /** The modelValue prop sets the initial values for the slider. */
+        modelValue: {
+            type: Object,
+            required: true
+        },
+        /** Class to be able to customize slider styles. */
+        contentClass: {
+            type: String,
+            default: ''
+        }
+    },
+    /**
+     * The component emits an event with the selected values whenever
+     * the user changes the slider.
+     */
+    emits: ['update:modelValue'],
+    setup(props, { emit }) {
+        /** The nouislider instance. */
+        let sliderInstance;
+        /** The nouislider element reference. */
+        const slider = ref();
+        /** The selected min value. */
+        const minSelected = ref(props.modelValue?.min ?? props.threshold.min);
+        /** The selected max value. */
+        const maxSelected = ref(props.modelValue?.max ?? props.threshold.max);
+        /** The selected range as an array. */
+        const rangeSelected = computed(() => [minSelected.value, maxSelected.value]);
+        /** The range for the nouislider. */
+        const slideRange = computed(() => ({ min: props.threshold.min, max: props.threshold.max }));
+        onMounted(() => {
+            // Create the slider instance
+            sliderInstance = create(slider.value, {
+                start: rangeSelected.value,
+                range: slideRange.value,
+                step: 1,
+                connect: true,
+                margin: 1
+            });
+            // Update the selected values when the slider update its values
+            sliderInstance.on('update', ([min, max]) => {
+                minSelected.value = Number(min);
+                maxSelected.value = Number(max);
+            });
+            // Emits the selected values when the slider values change
+            sliderInstance.on('change', () => emit('update:modelValue', { min: minSelected.value, max: maxSelected.value }));
+        });
+        onUnmounted(() => {
+            // Waiting to finish the collapse animation before destroying it
+            setTimeout(sliderInstance.destroy.bind(sliderInstance), 600);
+        });
+        /**
+         * Watch the threshold prop to update the slider state and emit the selected values.
+         */
+        watch(() => props.threshold, ({ min, max }) => {
+            sliderInstance.updateOptions({ range: slideRange.value, start: [min, max] }, false);
+            emit('update:modelValue', { min, max });
+        });
+        /**
+         * Watch the modelValue prop to update the slider state.
+         *
+         * @remarks It only update the values if the values are corrects. It means,
+         * values within the threshold limits and not equal to the current values.
+         *
+         * @returns Undefined.
+         */
+        watch([() => props.modelValue.min, () => props.modelValue.max], ([min, max]) => {
+            // Check if the values are the same
+            if (min === minSelected.value && max === maxSelected.value) {
+                return;
+            }
+            // Validate the values
+            const minValidated = min < props.threshold.min ? props.threshold.min : min;
+            const maxValidated = max > props.threshold.max ? props.threshold.max : max;
+            // Update the nouislider values
+            sliderInstance.set([minValidated, maxValidated]);
+            // Emit the selected values
+            if (minValidated !== min || maxValidated !== max) {
+                emit('update:modelValue', { min: minValidated, max: maxValidated });
+            }
+        });
+        return {
+            slider,
+            rangeSelected
+        };
+    }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=base-slider.vue2.js.map

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

@@ -0,0 +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":";;;AA8BE;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAgD;AACtD,YAAA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,gBAAe,EAAG,CAAA;AACzD,SAAA;;AAED,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAgD;AACtD,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAC;AACZ,SAAA;AACD,KAAA;AACD;;;AAGE;IACF,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;;AAEnB,QAAA,IAAI,cAAmB,CAAA;;AAEvB,QAAA,MAAM,MAAK,GAAI,GAAG,EAAe,CAAA;;AAGjC,QAAA,MAAM,WAAY,GAAE,GAAG,CAAC,KAAK,CAAC,UAAU,EAAE,GAAE,IAAK,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;;AAErE,QAAA,MAAM,WAAY,GAAE,GAAG,CAAC,KAAK,CAAC,UAAU,EAAE,GAAE,IAAK,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;;AAGrE,QAAA,MAAM,aAAc,GAAE,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC,CAAA;;QAE5E,MAAM,UAAW,GAAE,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,GAAI,EAAC,CAAC,CAAC,CAAA;QAE3F,SAAS,CAAC,MAAM;;AAEd,YAAA,cAAe,GAAE,MAAM,CAAC,MAAM,CAAC,KAAM,EAAE;gBACrC,KAAK,EAAE,aAAa,CAAC,KAAK;gBAC1B,KAAK,EAAE,UAAU,CAAC,KAAK;AACvB,gBAAA,IAAI,EAAE,CAAC;AACP,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,MAAM,EAAE,CAAA;AACT,aAAA,CAAC,CAAA;;AAGF,YAAA,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,KAAK;AAC1C,gBAAA,WAAW,CAAC,KAAM,GAAE,MAAM,CAAC,GAAG,CAAC,CAAA;AAC/B,gBAAA,WAAW,CAAC,KAAM,GAAE,MAAM,CAAC,GAAG,CAAC,CAAA;AACjC,aAAC,CAAC,CAAA;;YAGF,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAC1B,IAAI,CAAC,mBAAmB,EAAE,EAAE,GAAG,EAAE,WAAW,CAAC,KAAK,EAAE,GAAG,EAAE,WAAW,CAAC,OAAO,CAAA,CAC7E,CAAA;AACH,SAAC,CAAC,CAAA;QAEF,WAAW,CAAC,MAAM;;AAEhB,YAAA,UAAU,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,GAAG,CAAC,CAAA;AAC9D,SAAC,CAAC,CAAA;AAEF;;AAEE;AACF,QAAA,KAAK,CACH,MAAM,KAAK,CAAC,SAAS,EACrB,CAAC,EAAE,GAAG,EAAE,GAAI,EAAC,KAAK;YAChB,cAAc,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,CAAE,EAAC,EAAE,KAAK,CAAC,CAAA;YACnF,IAAI,CAAC,mBAAmB,EAAE,EAAE,GAAG,EAAE,GAAE,EAAG,CAAC,CAAA;AACzC,SAAA,CACD,CAAA;AAED;;;;;;;AAOE;AACF,QAAA,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,KAAK;;YAE9E,IAAI,QAAQ,WAAW,CAAC,KAAI,IAAK,GAAI,KAAI,WAAW,CAAC,KAAK,EAAE;gBAC1D,OAAM;AACR,aAAA;;YAGA,MAAM,YAAW,GAAI,GAAE,GAAI,KAAK,CAAC,SAAS,CAAC,GAAI,GAAE,KAAK,CAAC,SAAS,CAAC,GAAE,GAAI,GAAG,CAAA;YAC1E,MAAM,YAAW,GAAI,GAAE,GAAI,KAAK,CAAC,SAAS,CAAC,GAAI,GAAE,KAAK,CAAC,SAAS,CAAC,GAAE,GAAI,GAAG,CAAA;;YAG1E,cAAc,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAA;;AAGhD,YAAA,IAAI,YAAW,KAAM,GAAE,IAAK,iBAAiB,GAAG,EAAE;AAChD,gBAAA,IAAI,CAAC,mBAAmB,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,YAAa,EAAC,CAAC,CAAA;AACrE,aAAA;AACF,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,MAAM;YACN,aAAY;SACb,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

@@ -0,0 +1,7 @@
+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{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 };
+//# sourceMappingURL=base-slider.vue3.js.map

package/js/components/base-slider.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-slider.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/base-switch.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-switch.vue.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"toggle\"\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import { VueCSSClasses } from '../utils/types';\n\n  /**\n   * Basic switch component to handle boolean values. This component receives\n   * its selected state using a prop, and emits a Vue event whenever the user\n   * clicks it.\n   *\n   * @public\n   */\n\n  export default defineComponent({\n    name: 'BaseSwitch',\n    /**\n     * The selected value of the switch.\n     *\n     * @public\n     */\n    props: {\n      modelValue: {\n        type: Boolean,\n        default: false\n      }\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit }) {\n      /**\n       * Dynamic CSS classes to add to the switch component\n       * depending on its internal state.\n       *\n       * @returns A boolean dictionary with dynamic CSS classes.\n       * @internal\n       */\n      const cssClasses = ref<VueCSSClasses>({\n        'x-switch--is-selected x-selected': props.modelValue\n      });\n\n      /**\n       * Emits an event with the new value of the switch.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        const newValue = !props.modelValue;\n        cssClasses.value = {\n          'x-switch--is-selected': newValue,\n          'x-selected': newValue\n        };\n\n        emit('update:modelValue', newValue);\n      };\n\n      return {\n        cssClasses,\n        toggle\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-switch {\n    --x-switch-height: 16px;\n    --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n    --x-switch-background: #b3b3b3;\n    --x-switch-padding: 2px;\n    --x-switch-handle-size: var(--x-switch-height);\n    box-sizing: content-box;\n    height: var(--x-switch-height);\n    padding: var(--x-switch-padding);\n    border-radius: 99999px;\n    background: var(--x-switch-background);\n    width: var(--x-switch-width);\n    border: none;\n    transition: 0.25s ease-out background-color;\n    cursor: pointer;\n  }\n\n  .x-switch__handle {\n    background: #ffffff;\n    border-radius: 50%;\n    height: var(--x-switch-handle-size);\n    width: var(--x-switch-handle-size);\n    transition: 0.25s ease-out transform;\n    transform: translateX(var(--x-switch-translate-x, 0%));\n  }\n\n  .x-switch--is-selected {\n    --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n    --x-switch-background: #1a1a1a;\n  }\n\n  .x-switch--sm {\n    --x-switch-height: 12px;\n  }\n\n  .x-switch--lg {\n    --x-switch-height: 24px;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_pushScopeId","_popScopeId","_createElementVNode","_openBlock","cssClasses","_normalizeClass"],"mappings":";;;;;AAQI,MAAA,YAAA,GAAA,CAAA,CAAA,MAAAA,WAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,GAAA,CAAA,EAAA,EAAAC,UAAA,EAAA,EAAA,CAAA,CAAA,CAAA;;MAAA,UAAgC,mBAAA,YAAA,CAAA,sBAAAC,kBAAA;AAAA,EAAA,KAAA;AAAA,EAAA,EAAA,KAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAAA;AAAA,CAAA,CAAA,CAAA;;;;AAN/B,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACP,EAAA,OAAAC,SAAA,uBAA4B,QAAS,EAAA;AAAA,IACrC,OAJL,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAIYC,CAAU,CAAA,GAAA,CAAA,GAAA,IAAA,KACZ,IAAU,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAChB,cAAa,EAAA,IAAA,CAAA,UAAA,IAAA,KAAA,CAAA;AAAA,IANjB,KAAA,EAAAC,cAAA,CAAA,CAAA,IAAA,CAAA,UAAA,EAAA,UAAA,CAAA,CAAA;AAAA,IAAA,IAAA,EAAA,QAAA;;;;;;;"}
+{"version":3,"file":"base-switch.vue.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"toggle\"\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { VueCSSClasses } from '../utils/types';\n\n  /**\n   * Basic switch component to handle boolean values. This component receives\n   * its selected state using a prop, and emits a Vue event whenever the user\n   * clicks it.\n   *\n   * @public\n   */\n\n  export default defineComponent({\n    name: 'BaseSwitch',\n    /**\n     * The selected value of the switch.\n     *\n     * @public\n     */\n    props: {\n      modelValue: {\n        type: Boolean,\n        default: false\n      }\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit }) {\n      /**\n       * Dynamic CSS classes to add to the switch component\n       * depending on its internal state.\n       *\n       * @returns A boolean dictionary with dynamic CSS classes.\n       * @internal\n       */\n      const cssClasses = computed<VueCSSClasses>(() => ({\n        'x-switch--is-selected x-selected': props.modelValue\n      }));\n\n      /**\n       * Emits an event with the new value of the switch.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        const newValue = !props.modelValue;\n        emit('update:modelValue', newValue);\n      };\n\n      return {\n        cssClasses,\n        toggle\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-switch {\n    --x-switch-height: 16px;\n    --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n    --x-switch-background: #b3b3b3;\n    --x-switch-padding: 2px;\n    --x-switch-handle-size: var(--x-switch-height);\n    box-sizing: content-box;\n    height: var(--x-switch-height);\n    padding: var(--x-switch-padding);\n    border-radius: 99999px;\n    background: var(--x-switch-background);\n    width: var(--x-switch-width);\n    border: none;\n    transition: 0.25s ease-out background-color;\n    cursor: pointer;\n  }\n\n  .x-switch__handle {\n    background: #ffffff;\n    border-radius: 50%;\n    height: var(--x-switch-handle-size);\n    width: var(--x-switch-handle-size);\n    transition: 0.25s ease-out transform;\n    transform: translateX(var(--x-switch-translate-x, 0%));\n  }\n\n  .x-switch--is-selected {\n    --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n    --x-switch-background: #1a1a1a;\n  }\n\n  .x-switch--sm {\n    --x-switch-height: 12px;\n  }\n\n  .x-switch--lg {\n    --x-switch-height: 24px;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_pushScopeId","_popScopeId","_createElementVNode","_openBlock","cssClasses","_normalizeClass"],"mappings":";;;;;AAQI,MAAA,YAAA,GAAA,CAAA,CAAA,MAAAA,WAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,GAAA,CAAA,EAAA,EAAAC,UAAA,EAAA,EAAA,CAAA,CAAA,CAAA;;MAAA,UAAgC,mBAAA,YAAA,CAAA,sBAAAC,kBAAA;AAAA,EAAA,KAAA;AAAA,EAAA,EAAA,KAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAAA;AAAA,CAAA,CAAA,CAAA;;;;AAN/B,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACP,EAAA,OAAAC,SAAA,uBAA4B,QAAS,EAAA;AAAA,IACrC,OAJL,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAIYC,CAAU,CAAA,GAAA,CAAA,GAAA,IAAA,KACZ,IAAU,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAChB,cAAa,EAAA,IAAA,CAAA,UAAA,IAAA,KAAA,CAAA;AAAA,IANjB,KAAA,EAAAC,cAAA,CAAA,CAAA,IAAA,CAAA,UAAA,EAAA,UAAA,CAAA,CAAA;AAAA,IAAA,IAAA,EAAA,QAAA;;;;;;;"}

package/js/components/base-switch.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref } from 'vue';
+import { defineComponent, computed } from 'vue';
 
 /**
  * Basic switch component to handle boolean values. This component receives
@@ -29,9 +29,9 @@ var _sfc_main = defineComponent({
          * @returns A boolean dictionary with dynamic CSS classes.
          * @internal
          */
-        const cssClasses = ref({
+        const cssClasses = computed(() => ({
             'x-switch--is-selected x-selected': props.modelValue
-        });
+        }));
         /**
          * Emits an event with the new value of the switch.
          *
@@ -39,10 +39,6 @@ var _sfc_main = defineComponent({
          */
         const toggle = () => {
             const newValue = !props.modelValue;
-            cssClasses.value = {
-                'x-switch--is-selected': newValue,
-                'x-selected': newValue
-            };
             emit('update:modelValue', newValue);
         };
         return {

package/js/components/base-switch.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-switch.vue2.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"toggle\"\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import { VueCSSClasses } from '../utils/types';\n\n  /**\n   * Basic switch component to handle boolean values. This component receives\n   * its selected state using a prop, and emits a Vue event whenever the user\n   * clicks it.\n   *\n   * @public\n   */\n\n  export default defineComponent({\n    name: 'BaseSwitch',\n    /**\n     * The selected value of the switch.\n     *\n     * @public\n     */\n    props: {\n      modelValue: {\n        type: Boolean,\n        default: false\n      }\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit }) {\n      /**\n       * Dynamic CSS classes to add to the switch component\n       * depending on its internal state.\n       *\n       * @returns A boolean dictionary with dynamic CSS classes.\n       * @internal\n       */\n      const cssClasses = ref<VueCSSClasses>({\n        'x-switch--is-selected x-selected': props.modelValue\n      });\n\n      /**\n       * Emits an event with the new value of the switch.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        const newValue = !props.modelValue;\n        cssClasses.value = {\n          'x-switch--is-selected': newValue,\n          'x-selected': newValue\n        };\n\n        emit('update:modelValue', newValue);\n      };\n\n      return {\n        cssClasses,\n        toggle\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-switch {\n    --x-switch-height: 16px;\n    --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n    --x-switch-background: #b3b3b3;\n    --x-switch-padding: 2px;\n    --x-switch-handle-size: var(--x-switch-height);\n    box-sizing: content-box;\n    height: var(--x-switch-height);\n    padding: var(--x-switch-padding);\n    border-radius: 99999px;\n    background: var(--x-switch-background);\n    width: var(--x-switch-width);\n    border: none;\n    transition: 0.25s ease-out background-color;\n    cursor: pointer;\n  }\n\n  .x-switch__handle {\n    background: #ffffff;\n    border-radius: 50%;\n    height: var(--x-switch-handle-size);\n    width: var(--x-switch-handle-size);\n    transition: 0.25s ease-out transform;\n    transform: translateX(var(--x-switch-translate-x, 0%));\n  }\n\n  .x-switch--is-selected {\n    --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n    --x-switch-background: #1a1a1a;\n  }\n\n  .x-switch--sm {\n    --x-switch-height: 12px;\n  }\n\n  .x-switch--lg {\n    --x-switch-height: 24px;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAgBE;;;;;;AAME;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB;;;;AAIE;AACF,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACf,SAAA;AACD,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB;;;;;;AAME;QACF,MAAM,aAAa,GAAG,CAAgB;YACpC,kCAAkC,EAAE,KAAK,CAAC,UAAS;AACpD,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAU,CAAA;YAClC,UAAU,CAAC,QAAQ;AACjB,gBAAA,uBAAuB,EAAE,QAAQ;AACjC,gBAAA,YAAY,EAAE,QAAO;aACtB,CAAA;AAED,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAA;AACrC,SAAC,CAAA;QAED,OAAO;YACL,UAAU;YACV,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-switch.vue2.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"toggle\"\n    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { VueCSSClasses } from '../utils/types';\n\n  /**\n   * Basic switch component to handle boolean values. This component receives\n   * its selected state using a prop, and emits a Vue event whenever the user\n   * clicks it.\n   *\n   * @public\n   */\n\n  export default defineComponent({\n    name: 'BaseSwitch',\n    /**\n     * The selected value of the switch.\n     *\n     * @public\n     */\n    props: {\n      modelValue: {\n        type: Boolean,\n        default: false\n      }\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit }) {\n      /**\n       * Dynamic CSS classes to add to the switch component\n       * depending on its internal state.\n       *\n       * @returns A boolean dictionary with dynamic CSS classes.\n       * @internal\n       */\n      const cssClasses = computed<VueCSSClasses>(() => ({\n        'x-switch--is-selected x-selected': props.modelValue\n      }));\n\n      /**\n       * Emits an event with the new value of the switch.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        const newValue = !props.modelValue;\n        emit('update:modelValue', newValue);\n      };\n\n      return {\n        cssClasses,\n        toggle\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-switch {\n    --x-switch-height: 16px;\n    --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n    --x-switch-background: #b3b3b3;\n    --x-switch-padding: 2px;\n    --x-switch-handle-size: var(--x-switch-height);\n    box-sizing: content-box;\n    height: var(--x-switch-height);\n    padding: var(--x-switch-padding);\n    border-radius: 99999px;\n    background: var(--x-switch-background);\n    width: var(--x-switch-width);\n    border: none;\n    transition: 0.25s ease-out background-color;\n    cursor: pointer;\n  }\n\n  .x-switch__handle {\n    background: #ffffff;\n    border-radius: 50%;\n    height: var(--x-switch-handle-size);\n    width: var(--x-switch-handle-size);\n    transition: 0.25s ease-out transform;\n    transform: translateX(var(--x-switch-translate-x, 0%));\n  }\n\n  .x-switch--is-selected {\n    --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n    --x-switch-background: #1a1a1a;\n  }\n\n  .x-switch--sm {\n    --x-switch-height: 12px;\n  }\n\n  .x-switch--lg {\n    --x-switch-height: 24px;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAgBE;;;;;;AAME;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB;;;;AAIE;AACF,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACf,SAAA;AACD,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB;;;;;;AAME;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAgB,OAAO;YAChD,kCAAkC,EAAE,KAAK,CAAC,UAAS;AACpD,SAAA,CAAC,CAAC,CAAA;AAEH;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAU,CAAA;AAClC,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAA;AACrC,SAAC,CAAA;QAED,OAAO;YACL,UAAU;YACV,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/components/base-teleport.vue.js

@@ -0,0 +1,17 @@
+import _sfc_main from './base-teleport.vue2.js';
+import { openBlock, createBlock, Teleport, createElementVNode, renderSlot } from 'vue';
+import './base-teleport.vue3.js';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
+
+const _hoisted_1 = { class: "x-base-teleport" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(Teleport, { to: _ctx.target }, [
+    createElementVNode("div", _hoisted_1, [
+      renderSlot(_ctx.$slots, "default")
+    ])
+  ], 8, ["to"]);
+}
+var baseTeleport = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { baseTeleport as default };
+//# sourceMappingURL=base-teleport.vue.js.map

package/js/components/base-teleport.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"target\">\n    <div class=\"x-base-teleport\">\n      <slot></slot>\n    </div>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    name: 'BaseTeleport',\n    props: {\n      target: {\n        type: String,\n        required: true\n      }\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  :has(> .x-base-teleport) > *:not(.x-base-teleport) {\n    display: none;\n  }\n</style>\n"],"names":["_openBlock","_createBlock","_Teleport","_createElementVNode"],"mappings":";;;;;;AAEI,SAAA,WAAA,CAAA,IAAA,EAEM,QAFN,MAEM,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SADJA,SAAa,EAAA,EAAAC,WAAA,CAAAC,QAAA,EAAA,EAAA,EAAA,EAAA,IAAA,CAAA,MAAA,EAAA,EAAA;AAAA,IAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;;;;;;;;;"}

package/js/components/base-teleport.vue2.js

@@ -0,0 +1,14 @@
+import { defineComponent } from 'vue';
+
+var _sfc_main = defineComponent({
+    name: 'BaseTeleport',
+    props: {
+        target: {
+            type: String,
+            required: true
+        }
+    }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=base-teleport.vue2.js.map

package/js/components/base-teleport.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"target\">\n    <div class=\"x-base-teleport\">\n      <slot></slot>\n    </div>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n\n  export default defineComponent({\n    name: 'BaseTeleport',\n    props: {\n      target: {\n        type: String,\n        required: true\n      }\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  :has(> .x-base-teleport) > *:not(.x-base-teleport) {\n    display: none;\n  }\n</style>\n"],"names":[],"mappings":";;AAWE,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACF,KAAA;AACD,CAAA,CAAC;;;;"}

package/js/components/base-teleport.vue3.js

@@ -0,0 +1,7 @@
+import injectCss from '../../tools/inject-css.js';
+
+var css = ":has(>.x-base-teleport)>:not(.x-base-teleport){display:none}";
+injectCss(css);
+
+export { css, css as default };
+//# sourceMappingURL=base-teleport.vue3.js.map

package/js/components/base-teleport.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-teleport.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/base-variable-column-grid.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './base-variable-column-grid.vue2.js';
-import { resolveComponent, openBlock, createBlock, createSlots, renderList, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
+import { resolveComponent, openBlock, createBlock, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -16,7 +16,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       return {
         name,
         fn: withCtx(({ item }) => [
-          createCommentVNode("\n        @slot Customized item rendering. The slot name can either be default or the item's model\n         name.\n            @binding {GridItem} item - Item to render.\n      "),
           renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps({ item })))
         ])
       };

package/js/components/base-variable-column-grid.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-variable-column-grid.vue.js","sources":["../../../src/components/base-variable-column-grid.vue"],"sourcesContent":["<template>\n  <BaseGrid :animation=\"animation\" :columns=\"columnsToRender\" :items=\"items\">\n    <template v-for=\"(_, name) in slots\" v-slot:[name]=\"{ item }\">\n      <!--\n        @slot Customized item rendering. The slot name can either be default or the item's model\n         name.\n            @binding {GridItem} item - Item to render.\n      -->\n      <slot :name=\"name\" v-bind=\"{ item }\" />\n    </template>\n  </BaseGrid>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, PropType, ref } from 'vue';\n  import { ListItem } from '../utils/types';\n  import { AnimationProp } from '../types/animation-prop';\n  import { useXBus } from '../composables/use-x-bus';\n  import BaseGrid from './base-grid.vue';\n\n  /**\n   * The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to\n   * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the\n   * selected number of columns to the grid. It also allows to customize the grid items using the\n   * available `scopedSlots`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseVariableColumnGrid',\n    components: {\n      BaseGrid\n    },\n    props: {\n      /**\n       * Animation component that will be used to animate the grid.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /**\n       * The list of items to be rendered.\n       *\n       * @remarks The items must have an id property.\n       *\n       * @public\n       */\n      items: Array as PropType<ListItem[]>,\n      /**\n       * The columns to render by default in the grid. This property is used when the user has not\n       * selected any value in the column picker.\n       *\n       * @internal\n       */\n      columns: {\n        type: Number,\n        default: 0\n      }\n    },\n    setup(props, { slots }) {\n      const bus = useXBus();\n      /**\n       * The number of columns provided by a user interaction.\n       *\n       * @internal\n       */\n      const providedColumns = ref<number | null>(null);\n\n      /**\n       * The number of columns to render in the grid.\n       *\n       * @returns The number of columns.\n       *\n       * @internal\n       */\n      const columnsToRender = computed(() =>\n        providedColumns.value === null ? props.columns : providedColumns.value\n      );\n\n      /**\n       * Handler to update the number of columns when the user selects a new value.\n       *\n       * @param newColumns - The new columns value.\n       *\n       * @internal\n       */\n      bus\n        .on('ColumnsNumberProvided', false)\n        .subscribe(newColumns => (providedColumns.value = newColumns));\n\n      return {\n        columnsToRender,\n        slots\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the\n`ColumnsNumberProvided` events and passes the selected amount of columns to the grid. It also allows\nyou to customize the grid items using the available `scopedSlots`.\n\n```vue\n<template>\n  <section class=\"results\">\n    <button @click=\"setColumns(4)\" class=\"column-picker-selector\">\n      <span class=\"column-picker-selector__text\">4 columns</span>\n    </button>\n    <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\">\n      <template #default=\"{ item }\">\n        <span data-test=\"default-slot\">{{ item.id }}</span>\n      </template>\n      <template #result=\"{ item }\">\n        <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n      </template>\n    </BaseVariableColumnGrid>\n  </section>\n</template>\n\n<script>\n  import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsSection',\n    components: {\n      BaseVariableColumnGrid\n    },\n    data() {\n      return {\n        animation: StaggeredFadeAndSlide,\n        items: [\n          {\n            id: 'res-1',\n            modelName: 'Result',\n            name: 'Product 1'\n          },\n          {\n            id: 'res-2',\n            modelName: 'Result',\n            name: 'Product 2'\n          }\n        ]\n      };\n    },\n    methods: {\n      setColumns(columns) {\n        this.$x.emit('UserClickedColumnPicker', columns);\n      }\n    }\n  };\n</script>\n```\n\n### Playing with props\n\nConfiguring the default columns to be rendered. These columns will be the default value until the\n`ColumnsNumberProvided` is emitted and changes the value.\n\n```vue\n<template>\n  <section class=\"results\">\n    <button @click=\"setColumns(5)\" class=\"column-picker-selector\">\n      <span class=\"column-picker-selector__text\">5 columns</span>\n    </button>\n    <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\" :columns=\"3\">\n      <template #default=\"{ item }\">\n        <span data-test=\"default-slot\">{{ item.id }}</span>\n      </template>\n      <template #result=\"{ item }\">\n        <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n      </template>\n    </BaseVariableColumnGrid>\n  </section>\n</template>\n\n<script>\n  import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsSection',\n    components: {\n      BaseVariableColumnGrid\n    },\n    data() {\n      return {\n        animation: StaggeredFadeAndSlide,\n        items: [\n          {\n            id: 'res-1',\n            modelName: 'Result',\n            name: 'Product 1'\n          },\n          {\n            id: 'res-2',\n            modelName: 'Result',\n            name: 'Product 2'\n          }\n        ]\n      };\n    },\n    methods: {\n      setColumns(columns) {\n        this.$x.emit('UserClickedColumnPicker', columns);\n      }\n    }\n  };\n</script>\n```\n\n### Customizing the items width\n\nThe `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid\nitems.\n\n```vue\n<template>\n  <BaseVariableColumnGrid\n    :animation=\"animation\"\n    :items=\"items\"\n    style=\"--x-size-min-width-grid-item: 150px\"\n  >\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseVariableColumnGrid>\n</template>\n\n<script>\n  import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsSection',\n    components: {\n      BaseVariableColumnGrid\n    },\n    data() {\n      return {\n        animation: StaggeredFadeAndSlide,\n        items: [\n          {\n            id: 'res-1',\n            modelName: 'Result',\n            name: 'Product 1'\n          },\n          {\n            id: 'res-2',\n            modelName: 'Result',\n            name: 'Product 2'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","items","slots","_withCtx","_createCommentVNode"],"mappings":";;;;;8BACEA,gBASW,CAAA,UAAA,CAAA,CAAA;AATuB,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,mBAAA,EAAA;AAAA,IAAG,SAAOC,EAAAA,IAAAA,CAAAA,SAAAA;AAAAA,IADtE,OAAA,EAAA,IAAA,CAAA,eAAA;AAAA,IAEkCC,KAAAA,EAAAA,IAAAA,CAAAA,KAAAA;AAAAA,GAAAA,EAAAA,WAAAA,CAAAA;;;;eAAc,IAAM,CAAA,KAAA,EAAA,CAAA,CAAA,EAAA,IAAA,KAAA;AAFtD,MAAA,OAAA;AAAA,QAAA,IAAA;AAQM,QAAA,EAAA,EAAAC,OAAA,CAAA,CAAuC,EAA1B,IAAA,EAAA,KAAA;AAAA,UAAAC,kBAAA,CAAA,oLAAA,CAAA;;;;;;;;;;;"}
+{"version":3,"file":"base-variable-column-grid.vue.js","sources":["../../../src/components/base-variable-column-grid.vue"],"sourcesContent":["<template>\n  <BaseGrid :animation=\"animation\" :columns=\"columnsToRender\" :items=\"items\">\n    <template v-for=\"(_, name) in slots\" v-slot:[name]=\"{ item }\">\n      <!--\n        @slot Customized item rendering. The slot name can either be default or the item's model\n         name.\n            @binding {GridItem} item - Item to render.\n      -->\n      <slot :name=\"name\" v-bind=\"{ item }\" />\n    </template>\n  </BaseGrid>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, PropType, ref } from 'vue';\n  import { ListItem } from '../utils/types';\n  import { AnimationProp } from '../types/animation-prop';\n  import { useXBus } from '../composables/use-x-bus';\n  import BaseGrid from './base-grid.vue';\n\n  /**\n   * The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to\n   * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the\n   * selected number of columns to the grid. It also allows to customize the grid items using the\n   * available `scopedSlots`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseVariableColumnGrid',\n    components: {\n      BaseGrid\n    },\n    props: {\n      /**\n       * Animation component that will be used to animate the grid.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /**\n       * The list of items to be rendered.\n       *\n       * @remarks The items must have an id property.\n       *\n       * @public\n       */\n      items: Array as PropType<ListItem[]>,\n      /**\n       * The columns to render by default in the grid. This property is used when the user has not\n       * selected any value in the column picker.\n       *\n       * @internal\n       */\n      columns: {\n        type: Number,\n        default: 0\n      }\n    },\n    setup(props, { slots }) {\n      const bus = useXBus();\n      /**\n       * The number of columns provided by a user interaction.\n       *\n       * @internal\n       */\n      const providedColumns = ref<number | null>(null);\n\n      /**\n       * The number of columns to render in the grid.\n       *\n       * @returns The number of columns.\n       *\n       * @internal\n       */\n      const columnsToRender = computed(() =>\n        providedColumns.value === null ? props.columns : providedColumns.value\n      );\n\n      /**\n       * Handler to update the number of columns when the user selects a new value.\n       *\n       * @param newColumns - The new columns value.\n       *\n       * @internal\n       */\n      bus\n        .on('ColumnsNumberProvided', false)\n        .subscribe(newColumns => (providedColumns.value = newColumns));\n\n      return {\n        columnsToRender,\n        slots\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the\n`ColumnsNumberProvided` events and passes the selected amount of columns to the grid. It also allows\nyou to customize the grid items using the available `scopedSlots`.\n\n```vue\n<template>\n  <section class=\"results\">\n    <button @click=\"setColumns(4)\" class=\"column-picker-selector\">\n      <span class=\"column-picker-selector__text\">4 columns</span>\n    </button>\n    <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\">\n      <template #default=\"{ item }\">\n        <span data-test=\"default-slot\">{{ item.id }}</span>\n      </template>\n      <template #result=\"{ item }\">\n        <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n      </template>\n    </BaseVariableColumnGrid>\n  </section>\n</template>\n\n<script>\n  import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsSection',\n    components: {\n      BaseVariableColumnGrid\n    },\n    data() {\n      return {\n        animation: StaggeredFadeAndSlide,\n        items: [\n          {\n            id: 'res-1',\n            modelName: 'Result',\n            name: 'Product 1'\n          },\n          {\n            id: 'res-2',\n            modelName: 'Result',\n            name: 'Product 2'\n          }\n        ]\n      };\n    },\n    methods: {\n      setColumns(columns) {\n        this.$x.emit('UserClickedColumnPicker', columns);\n      }\n    }\n  };\n</script>\n```\n\n### Playing with props\n\nConfiguring the default columns to be rendered. These columns will be the default value until the\n`ColumnsNumberProvided` is emitted and changes the value.\n\n```vue\n<template>\n  <section class=\"results\">\n    <button @click=\"setColumns(5)\" class=\"column-picker-selector\">\n      <span class=\"column-picker-selector__text\">5 columns</span>\n    </button>\n    <BaseVariableColumnGrid :animation=\"animation\" :items=\"items\" :columns=\"3\">\n      <template #default=\"{ item }\">\n        <span data-test=\"default-slot\">{{ item.id }}</span>\n      </template>\n      <template #result=\"{ item }\">\n        <span data-test=\"result-slot\">{{ 'Result ' + item.id }}</span>\n      </template>\n    </BaseVariableColumnGrid>\n  </section>\n</template>\n\n<script>\n  import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsSection',\n    components: {\n      BaseVariableColumnGrid\n    },\n    data() {\n      return {\n        animation: StaggeredFadeAndSlide,\n        items: [\n          {\n            id: 'res-1',\n            modelName: 'Result',\n            name: 'Product 1'\n          },\n          {\n            id: 'res-2',\n            modelName: 'Result',\n            name: 'Product 2'\n          }\n        ]\n      };\n    },\n    methods: {\n      setColumns(columns) {\n        this.$x.emit('UserClickedColumnPicker', columns);\n      }\n    }\n  };\n</script>\n```\n\n### Customizing the items width\n\nThe `--x-size-min-width-grid-item` variable can be used to customize the min width of the grid\nitems.\n\n```vue\n<template>\n  <BaseVariableColumnGrid\n    :animation=\"animation\"\n    :items=\"items\"\n    style=\"--x-size-min-width-grid-item: 150px\"\n  >\n    <template #default=\"{ item }\">\n      {{ `Default slot content: ${item.id}` }}\n    </template>\n  </BaseVariableColumnGrid>\n</template>\n\n<script>\n  import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsSection',\n    components: {\n      BaseVariableColumnGrid\n    },\n    data() {\n      return {\n        animation: StaggeredFadeAndSlide,\n        items: [\n          {\n            id: 'res-1',\n            modelName: 'Result',\n            name: 'Product 1'\n          },\n          {\n            id: 'res-2',\n            modelName: 'Result',\n            name: 'Product 2'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","items","slots"],"mappings":";;;;;8BACEA,gBASW,CAAA,UAAA,CAAA,CAAA;AATuB,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,mBAAA,EAAA;AAAA,IAAG,SAAOC,EAAAA,IAAAA,CAAAA,SAAAA;AAAAA,IADtE,OAAA,EAAA,IAAA,CAAA,eAAA;AAAA,IAEkCC,KAAAA,EAAAA,IAAAA,CAAAA,KAAAA;AAAAA,GAAAA,EAAAA,WAAAA,CAAAA;;;;eAAc,IAAM,CAAA,KAAA,EAAA,CAAA,CAAA,EAAA,IAAA,KAAA;AAFtD,MAAA,OAAA;AAAA,QAAA,IAAA;;;;;;;;;;;;"}

package/js/components/column-picker/base-column-picker-dropdown.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './base-column-picker-dropdown.vue2.js';
-import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
+import { resolveComponent, openBlock, createBlock, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -12,7 +12,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": "Select number of columns"
   }, createSlots({
     item: withCtx(({ item, isSelected, isHighlighted }) => [
-      createCommentVNode("\n       @slot (required) From `BaseDropdown` component: Used to render each one of the items\n       content, and as fallback for the toggle button content slot if it is not provided.\n       @binding {string|number|Identifiable} item - Item to render\n       @binding {boolean} isHighlighted - True when the item has the focus.\n       @binding {boolean} isSelected - True when the item is selected.\n      "),
       renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps({ item, isSelected, isHighlighted })))
     ]),
     _: 2
@@ -21,7 +20,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _ctx.hasToggleSlot ? {
       name: "toggle",
       fn: withCtx(({ item, isOpen }) => [
-        createCommentVNode("\n       @slot From `BaseDropdown` component: Used to render the contents of the dropdown toggle\n       button. If not provided, it uses the `item` slot as fallback.\n       @binding {string|number|Identifiable} item - The item data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is\n       closed.\n      "),
         renderSlot(_ctx.$slots, "toggle", normalizeProps(guardReactiveProps({ item, isOpen })))
       ]),
       key: "0"

package/js/components/column-picker/base-column-picker-dropdown.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-dropdown.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    @update:modelValue=\"emitEvents\"\n    :modelValue=\"selectedColumns\"\n    :items=\"columns\"\n    :animation=\"animation\"\n    aria-label=\"Select number of columns\"\n  >\n    <template v-if=\"hasToggleSlot\" #toggle=\"{ item, isOpen }\">\n      <!--\n       @slot From `BaseDropdown` component: Used to render the contents of the dropdown toggle\n       button. If not provided, it uses the `item` slot as fallback.\n       @binding {string|number|Identifiable} item - The item data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is\n       closed.\n      -->\n      <slot name=\"toggle\" v-bind=\"{ item, isOpen }\" />\n    </template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <!--\n       @slot (required) From `BaseDropdown` component: Used to render each one of the items\n       content, and as fallback for the toggle button content slot if it is not provided.\n       @binding {string|number|Identifiable} item - Item to render\n       @binding {boolean} isHighlighted - True when the item has the focus.\n       @binding {boolean} isSelected - True when the item is selected.\n      -->\n      <slot name=\"item\" v-bind=\"{ item, isSelected, isHighlighted }\" />\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\n  import Vue, { computed, defineComponent, onBeforeMount, PropType, ref, watch } from 'vue';\n  import { use$x } from '../../composables/use-$x';\n  import BaseDropdown from '../base-dropdown.vue';\n\n  /**\n   * Column picker dropdown component renders {@link BaseDropdown} component which\n   * options are the different columns you can set for a grid.\n   *\n   * It emits {@link XEventsTypes.UserClickedColumnPicker} on dropdown\n   * input.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseColumnPickerDropdown',\n    components: { BaseDropdown },\n    props: {\n      /** An array of numbers that represents the number of columns to render. */\n      columns: {\n        type: Array as PropType<number[]>,\n        required: true\n      },\n      /** The value of the selected columns number. */\n      modelValue: Number,\n      /** The transition to use for opening and closing the dropdown. */\n      animation: [String, Object] as PropType<string | typeof Vue>\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit, slots }) {\n      const $x = use$x();\n\n      const providedSelectedColumns = computed(() => props.modelValue ?? props.columns[0]);\n      const selectedColumns = ref(providedSelectedColumns.value);\n\n      /**\n       * Assigns `selectedColumns` value and emits `ColumnsNumberProvided`.\n       *\n       * @param column - Column number provided.\n       */\n      function emitColumnsNumberProvided(column: number) {\n        selectedColumns.value = column;\n        $x.emit('ColumnsNumberProvided', column);\n      }\n\n      /**\n       * Emits `update:modelValue` with the column selected.\n       *\n       * @param column - Column number selected.\n       */\n      function emitUpdateModelValue(column: number) {\n        if (props.modelValue !== column) {\n          emit('update:modelValue', column);\n        }\n      }\n\n      watch(providedSelectedColumns, emitColumnsNumberProvided);\n      watch(selectedColumns, emitUpdateModelValue);\n\n      $x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column));\n\n      /**\n       * Synchronizes the columns number before mounting the component. If the real number of selected\n       * columns equals the provided columns, it emits the event to sync it with every other component.\n       * If it is not equal it means that the user has already selected a number of columns, so we emit\n       * a `update:modelValue` event so developers can sync the provided value.\n       */\n      onBeforeMount(() => {\n        if (selectedColumns.value === providedSelectedColumns.value) {\n          emitColumnsNumberProvided(selectedColumns.value);\n        } else {\n          emitUpdateModelValue(selectedColumns.value);\n        }\n      });\n\n      /**\n       * Emits a {@link XEventsTypes.UserClickedColumnPicker} and\n       * {@link XEventsTypes.ColumnsNumberProvided} events.\n       *\n       * @param column - Column number payload.\n       */\n      function emitEvents(column: number) {\n        $x.emit('UserClickedColumnPicker', column);\n        $x.emit('ColumnsNumberProvided', column);\n      }\n\n      return {\n        emitEvents,\n        hasToggleSlot: !!slots.toggle,\n        selectedColumns\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nAn event that the component will emit:\n\n- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks an item in the dropdown. The event payload is the\n  number of columns that the clicked item represents.\n- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted on component mount, and whenever the value changes. The event payload is the\n  current `selectedColumns` value.\n\n## Example\n\nColumn picker dropdown component renders a dropdown component which options are the different\ncolumns you can set for a grid.\n\n### Usage\n\nNotice that the slots provided match with the `BaseDropdown` component. The `item` slot is required\nunlike the `toggle`, which renders the same `item` slot defined by default.\n\n#### Default usage\n\n```vue live\n<template>\n  <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script>\n  import { BaseColumnPickerDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseColumnPickerDropdownTest',\n    components: {\n      BaseColumnPickerDropdown\n    },\n    data() {\n      return {\n        selectedColumns: 2\n      };\n    }\n  };\n</script>\n```\n\n#### Customizing toggle button\n\n```vue live\n<template>\n  <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n    <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script>\n  import { BaseColumnPickerDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseColumnPickerDropdownTest',\n    components: {\n      BaseColumnPickerDropdown\n    },\n    data() {\n      return {\n        selectedColumns: 2\n      };\n    }\n  };\n</script>\n```\n\n#### Using it without v-model / value\n\nThe component emits an X Event, `UserClickedColumnPicker`, on column change and it also listens to\nthat event from outside, so you don't need to store the current column value to keep it synchronized\nwith other column pickers.\n\n```vue live\n<template>\n  <BaseColumnPickerDropdown :columns=\"[2, 4, 6]\">\n    <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script>\n  import { BaseColumnPickerDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseColumnPickerDropdownTest',\n    components: {\n      BaseColumnPickerDropdown\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","animation","_createSlots","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","hasToggleSlot"],"mappings":";;;;;kCACEA,gBA2Be,CAAA,cAAA,CAAA,CAAA;AAzBZ,EAAA,OAAAC,SAAA,EAA2B,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IAC3B,qBAAc,EAAA,IAAA,CAAA,UAAA;AAAA,IACd,UAAWC,EAAAA,IAAAA,CAAAA,eAAAA;AAAAA,IACZ,KAAU,EAAA,IAAA,CAAA,OAAA;AAAA,IANd,SAAA,EAAA,IAAA,CAAA,SAAA;AAAA,IAkBe,YAAI,EAAA,0BAAA;AAAA,GACb,EAAAC,WAAA,CAAA;AAAA,IAAA,IAAA,EAOAC,QAAiE,CA1BvE,EAAA,IAAA,EAAA,UAAA,EAAA,aAAA,EAAA,KAAA;AAAA,MAAAC,kBAAA,CAAA,2ZAAA,CAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,MAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA;AAAA,KAAA,CAAA;AAQoBC,IAAAA,CAAAA,EAAAA,CAAAA;AAAAA;AAAAA,GAAAA,EAAAA;AARpB,IAAA,IAAA,CAAA,aAAA,GAAA;AASM,MAAA,IAAA,EAAA,QAAA;AAAA,MAAA,EAAA,EAOAL,OAAgD,CAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA;AAAA,QAAAC,kBAAA,CAAA,qWAAA,CAAA;AAhBtD,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAAA,MAAA,GAAA,EAAA,GAAA;AAAA,KAAA,GAAA,KAAA,CAAA;;;;;;;"}
+{"version":3,"file":"base-column-picker-dropdown.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    @update:modelValue=\"emitEvents\"\n    :modelValue=\"selectedColumns\"\n    :items=\"columns\"\n    :animation=\"animation\"\n    aria-label=\"Select number of columns\"\n  >\n    <template v-if=\"hasToggleSlot\" #toggle=\"{ item, isOpen }\">\n      <!--\n       @slot From `BaseDropdown` component: Used to render the contents of the dropdown toggle\n       button. If not provided, it uses the `item` slot as fallback.\n       @binding {string|number|Identifiable} item - The item data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is\n       closed.\n      -->\n      <slot name=\"toggle\" v-bind=\"{ item, isOpen }\" />\n    </template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <!--\n       @slot (required) From `BaseDropdown` component: Used to render each one of the items\n       content, and as fallback for the toggle button content slot if it is not provided.\n       @binding {string|number|Identifiable} item - Item to render\n       @binding {boolean} isHighlighted - True when the item has the focus.\n       @binding {boolean} isSelected - True when the item is selected.\n      -->\n      <slot name=\"item\" v-bind=\"{ item, isSelected, isHighlighted }\" />\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\n  import Vue, { computed, defineComponent, onBeforeMount, PropType, ref, watch } from 'vue';\n  import { use$x } from '../../composables/use-$x';\n  import BaseDropdown from '../base-dropdown.vue';\n\n  /**\n   * Column picker dropdown component renders {@link BaseDropdown} component which\n   * options are the different columns you can set for a grid.\n   *\n   * It emits {@link XEventsTypes.UserClickedColumnPicker} on dropdown\n   * input.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseColumnPickerDropdown',\n    components: { BaseDropdown },\n    props: {\n      /** An array of numbers that represents the number of columns to render. */\n      columns: {\n        type: Array as PropType<number[]>,\n        required: true\n      },\n      /** The value of the selected columns number. */\n      modelValue: Number,\n      /** The transition to use for opening and closing the dropdown. */\n      animation: [String, Object] as PropType<string | typeof Vue>\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit, slots }) {\n      const $x = use$x();\n\n      const providedSelectedColumns = computed(() => props.modelValue ?? props.columns[0]);\n      const selectedColumns = ref(providedSelectedColumns.value);\n\n      /**\n       * Assigns `selectedColumns` value and emits `ColumnsNumberProvided`.\n       *\n       * @param column - Column number provided.\n       */\n      function emitColumnsNumberProvided(column: number) {\n        selectedColumns.value = column;\n        $x.emit('ColumnsNumberProvided', column);\n      }\n\n      /**\n       * Emits `update:modelValue` with the column selected.\n       *\n       * @param column - Column number selected.\n       */\n      function emitUpdateModelValue(column: number) {\n        if (props.modelValue !== column) {\n          emit('update:modelValue', column);\n        }\n      }\n\n      watch(providedSelectedColumns, emitColumnsNumberProvided);\n      watch(selectedColumns, emitUpdateModelValue);\n\n      $x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column));\n\n      /**\n       * Synchronizes the columns number before mounting the component. If the real number of selected\n       * columns equals the provided columns, it emits the event to sync it with every other component.\n       * If it is not equal it means that the user has already selected a number of columns, so we emit\n       * a `update:modelValue` event so developers can sync the provided value.\n       */\n      onBeforeMount(() => {\n        if (selectedColumns.value === providedSelectedColumns.value) {\n          emitColumnsNumberProvided(selectedColumns.value);\n        } else {\n          emitUpdateModelValue(selectedColumns.value);\n        }\n      });\n\n      /**\n       * Emits a {@link XEventsTypes.UserClickedColumnPicker} and\n       * {@link XEventsTypes.ColumnsNumberProvided} events.\n       *\n       * @param column - Column number payload.\n       */\n      function emitEvents(column: number) {\n        $x.emit('UserClickedColumnPicker', column);\n        $x.emit('ColumnsNumberProvided', column);\n      }\n\n      return {\n        emitEvents,\n        hasToggleSlot: !!slots.toggle,\n        selectedColumns\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nAn event that the component will emit:\n\n- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks an item in the dropdown. The event payload is the\n  number of columns that the clicked item represents.\n- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted on component mount, and whenever the value changes. The event payload is the\n  current `selectedColumns` value.\n\n## Example\n\nColumn picker dropdown component renders a dropdown component which options are the different\ncolumns you can set for a grid.\n\n### Usage\n\nNotice that the slots provided match with the `BaseDropdown` component. The `item` slot is required\nunlike the `toggle`, which renders the same `item` slot defined by default.\n\n#### Default usage\n\n```vue live\n<template>\n  <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script>\n  import { BaseColumnPickerDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseColumnPickerDropdownTest',\n    components: {\n      BaseColumnPickerDropdown\n    },\n    data() {\n      return {\n        selectedColumns: 2\n      };\n    }\n  };\n</script>\n```\n\n#### Customizing toggle button\n\n```vue live\n<template>\n  <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n    <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script>\n  import { BaseColumnPickerDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseColumnPickerDropdownTest',\n    components: {\n      BaseColumnPickerDropdown\n    },\n    data() {\n      return {\n        selectedColumns: 2\n      };\n    }\n  };\n</script>\n```\n\n#### Using it without v-model / value\n\nThe component emits an X Event, `UserClickedColumnPicker`, on column change and it also listens to\nthat event from outside, so you don't need to store the current column value to keep it synchronized\nwith other column pickers.\n\n```vue live\n<template>\n  <BaseColumnPickerDropdown :columns=\"[2, 4, 6]\">\n    <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseColumnPickerDropdown>\n</template>\n\n<script>\n  import { BaseColumnPickerDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseColumnPickerDropdownTest',\n    components: {\n      BaseColumnPickerDropdown\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","animation","_createSlots","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","hasToggleSlot"],"mappings":";;;;;kCACEA,gBA2Be,CAAA,cAAA,CAAA,CAAA;AAzBZ,EAAA,OAAAC,SAAA,EAA2B,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IAC3B,qBAAc,EAAA,IAAA,CAAA,UAAA;AAAA,IACd,UAAWC,EAAAA,IAAAA,CAAAA,eAAAA;AAAAA,IACZ,KAAU,EAAA,IAAA,CAAA,OAAA;AAAA,IANd,SAAA,EAAA,IAAA,CAAA,SAAA;AAAA,IAkBe,YAAI,EAAA,0BAAA;AAAA,GAQoD,EAAAC,WAAA,CAAA;AAAA,IAAA,IAAA,EAAAC,OAAA,CAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,aAAA,EAAA,KAAA;AA1BvE,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,MAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA;AAAA,KAAA,CAAA;AAQoBC,IAAAA,CAAAA,EAAAA,CAAAA;AAAAA;AAAAA,GAAAA,EAAAA;AARpB,IAAA,IAAA,CAAA,aAAA,GAAA;AAgBM,MAAA,IAAA,EAAA,QAAA;AAAA,MAAA,EAAA,EAAAJ,OAAA,CAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA;AAhBN,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAAA,MAAA,GAAA,EAAA,GAAA;AAAA,KAAA,GAAA,KAAA,CAAA;;;;;;;"}

package/js/components/column-picker/base-column-picker-list.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './base-column-picker-list.vue2.js';
-import { resolveComponent, openBlock, createElementBlock, Fragment, renderList, createVNode, normalizeClass, withCtx, createCommentVNode, renderSlot, mergeProps, createTextVNode, toDisplayString } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, Fragment, renderList, createVNode, normalizeClass, withCtx, renderSlot, mergeProps, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = {
@@ -27,7 +27,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               role: "listitem"
             }, {
               default: withCtx(() => [
-                createCommentVNode("\n          @slot Customized Column Picker Button content. Specifying a slot with the column value\n          will result in the column using that slot composition to render.\n            @binding {number} column - Columns Number to pick.\n            @binding {boolean} isSelected - True if the columns number are the chosen value.\n        "),
                 renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, { column, isSelected }), () => [
                   createTextVNode(
                     toDisplayString(column),
@@ -39,7 +38,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               _: 2
               /* DYNAMIC */
             }, 1032, ["class", "aria-pressed", "events", "aria-label"]),
-            createCommentVNode("\n          @slot Customized Column Picker divider. Specify an element to act as divider for\n          the items in the column picker. Empty by default.\n        "),
             index !== _ctx.columnsWithCssClasses.length - 1 ? renderSlot(_ctx.$slots, "divider", { key: 0 }) : createCommentVNode("v-if", true)
           ],
           64