@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.90

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 :range-selected=\"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\">\nimport type { API } from 'nouislider'\nimport type { PropType } from 'vue'\nimport { create } from 'nouislider'\nimport { computed, defineComponent, onMounted, onUnmounted, 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 */\nexport 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>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport 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 :range-selected=\"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\">\nimport type { API } from 'nouislider'\nimport type { PropType } from 'vue'\nimport { create } from 'nouislider'\nimport { computed, defineComponent, onMounted, onUnmounted, 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 */\nexport 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>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseSlider } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSliderDemo',\n  components: {\n    BaseSliderDemo,\n  },\n  setup() {\n    const threshold = ref({ min: 0, max: 1000 })\n    const selectedRange = ref(threshold.value)\n\n    return {\n      selectedRange,\n      threshold,\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

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

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

@@ -17,10 +17,10 @@ const _hoisted_3 = [
 ];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("button", {
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args)),
     "aria-checked": _ctx.modelValue || void 0,
     class: normalizeClass([_ctx.cssClasses, "x-switch"]),
-    role: "switch"
+    role: "switch",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args))
   }, [..._hoisted_3], 10, _hoisted_1);
 }
 var BaseSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3ae6056b"]]);

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    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n    @click=\"toggle\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../utils/types'\nimport { computed, defineComponent } from 'vue'\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\nexport 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>\nimport { BaseSwitch } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseSwitch } from '@empathyco/x-components'\n\nexport 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","modelValue","_openBlock","_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;;;;SAN/B,WAAcC,CAAAA,IAAAA,EAAAA,MAAAA,EAAU,QAAI,MAAS,EAAA,KAAA,EAAA,QAAA,EAAA;AAChC,EAAA,OAAAC,SAAA,uBAAY,QACZ,EAAA;AAAA,IACN,cAAa,EAAA,IAAA,CAAA,UAAA,IAAA,KAAA,CAAA;AAAA,IACZ,OAAKC,cAAE,CAAA,CAAA,IAAA,CAAA,UAAA,EAAA,UAAA,CAAA,CAAA;AAAA,IANZ,IAAA,EAAA,QAAA;AAAA,IAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA;;;;;;;"}

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
@@ -17,8 +17,8 @@ var _sfc_main = defineComponent({
     props: {
         modelValue: {
             type: Boolean,
-            default: false
-        }
+            default: false,
+        },
     },
     emits: ['update:modelValue'],
     setup(props, { emit }) {
@@ -29,9 +29,9 @@ var _sfc_main = defineComponent({
          * @returns A boolean dictionary with dynamic CSS classes.
          * @internal
          */
-        const cssClasses = ref({
-            'x-switch--is-selected x-selected': props.modelValue
-        });
+        const cssClasses = computed(() => ({
+            'x-switch--is-selected x-selected': props.modelValue,
+        }));
         /**
          * Emits an event with the new value of the switch.
          *
@@ -39,17 +39,13 @@ 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 {
             cssClasses,
-            toggle
+            toggle,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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    :aria-checked=\"modelValue || undefined\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n    @click=\"toggle\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../utils/types'\nimport { computed, defineComponent } from 'vue'\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\nexport 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>\nimport { BaseSwitch } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseSwitch } from '@empathyco/x-components'\n\nexport 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":";;AAgBA;;;;;;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,KAAK;AACf,SAAA;AACF,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,UAAU;AACrD,SAAA,CAAC,CAAA,CAAA;AAEF;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAS,CAAA;AACjC,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAA,CAAA;AACpC,SAAA,CAAA;QAEA,OAAO;YACL,UAAU;YACV,MAAM;SACR,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -0,0 +1,17 @@
+import _sfc_main from './base-teleport.vue2.js';
+import { openBlock, createBlock, Teleport, renderSlot, createCommentVNode } from 'vue';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.teleportHost ? (openBlock(), createBlock(Teleport, {
+    key: 0,
+    to: _ctx.teleportHost.shadowRoot ?? _ctx.teleportHost,
+    disabled: _ctx.disabled
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 8, ["to", "disabled"])) : createCommentVNode("v-if", true);
+}
+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 v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  onUnmounted,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    /** The element or css selector to which the component will be teleported. */\n    target: {\n      type: [String, Object] as PropType<string | Element>,\n      required: true,\n    },\n    /**\n     * The position relative to the target\n     * - `beforebegin`: Before the target element.\n     * - `afterbegin`: Inside the target element, before its first child.\n     * - `beforeend`: Inside the target element, after its last child.\n     * - `afterend`: After the target element.\n     * - `onlychild`: Adds it as child and hides all other children of the target element.\n     */\n    position: {\n      type: String as PropType<\n        'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n      >,\n      default: 'onlychild',\n    },\n    /** If disabled, the slot content will not be teleported */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    if (typeof document === 'undefined') {\n      return { teleportHost: ref<Element>() }\n    }\n\n    const instance = getCurrentInstance()\n    /** Hook where the slot content will be teleported to. */\n    const teleportHost = ref<Element>()\n    /** The page element where the teleport host will be inserted. */\n    const targetElement = ref<Element>()\n    let isIsolated = false\n\n    // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n    if (instance?.appContext.app._container) {\n      createHost()\n    } else {\n      afterAppMount(createHost)\n    }\n\n    const targetAddedObserver = new MutationObserver(targetAdded)\n    const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n    onUnmounted(() => {\n      if (isIsolated && teleportHost.value) {\n        ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      targetAddedObserver.disconnect()\n      targetRemovedObserver.disconnect()\n      teleportHost.value?.remove()\n    })\n\n    // Handles target prop changes and init the observers accordingly.\n    watch(\n      () => props.target,\n      newTarget => {\n        targetAddedObserver.disconnect()\n        targetRemovedObserver.disconnect()\n        const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n        if (target?.isConnected) {\n          targetAdded()\n        } else {\n          targetRemoved()\n        }\n      },\n      { immediate: true },\n    )\n\n    // Updates the teleport host when props change.\n    watchEffect(() => {\n      if (!teleportHost.value) {\n        return\n      }\n      if (props.disabled) {\n        teleportHost.value.remove()\n        return\n      }\n      teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n      if (!targetElement.value) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.value.insertAdjacentElement(position, teleportHost.value)\n    })\n\n    /** Checks if the target element exists in the DOM and updates the observers */\n    function targetAdded() {\n      let element =\n        typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n      if (element?.isConnected) {\n        targetAddedObserver.disconnect()\n        targetElement.value = element\n        while (element.parentElement) {\n          element = element.parentElement\n          targetRemovedObserver.observe(element, { childList: true })\n        }\n      }\n    }\n\n    /** Checks if the target was disconnected from the DOM and updates the observers */\n    function targetRemoved() {\n      if (targetElement.value && !targetElement.value.isConnected) {\n        targetRemovedObserver.disconnect()\n        targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n        targetElement.value = undefined\n      }\n    }\n\n    /** Creates and sets the teleport host element */\n    function createHost() {\n      teleportHost.value = document.createElement('div')\n      isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n      if (isIsolated) {\n        teleportHost.value.attachShadow({ mode: 'open' })\n        ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n      }\n    }\n\n    function afterAppMount(fn: () => void) {\n      onMounted(() => setTimeout(fn, 0))\n    }\n\n    return { teleportHost }\n  },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nif (typeof document !== 'undefined') {\n  const css = document.createElement('style')\n  css.textContent =\n    ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n  document.head?.appendChild(css) ||\n    document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\n</script>\n"],"names":["_openBlock","_Teleport","teleportHost","_renderSlot","_createCommentVNode"],"mappings":";;;;qBACE,IAEW,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAHb,EAAA,OAAA,IAAA,CAAA,YAAA,IAAAA,SAAA,gBACkDC,QAAcC,EAAAA;AAAAA,IAAe,GAAA,EAAA,CAAA;AAAA,IAAA,EAAA,EAAA,IAAA,CAAA,YAAA,CAAA,UAAA,IAAA,IAAA,CAAA,YAAA;IAC3E,QAAa,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;AAFjB,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,IAAA,EAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -0,0 +1,132 @@
+import { defineComponent, ref, getCurrentInstance, onUnmounted, onBeforeUnmount, watch, watchEffect, onMounted } from 'vue';
+
+var _sfc_main = defineComponent({
+    name: 'BaseTeleport',
+    props: {
+        /** The element or css selector to which the component will be teleported. */
+        target: {
+            type: [String, Object],
+            required: true,
+        },
+        /**
+         * The position relative to the target
+         * - `beforebegin`: Before the target element.
+         * - `afterbegin`: Inside the target element, before its first child.
+         * - `beforeend`: Inside the target element, after its last child.
+         * - `afterend`: After the target element.
+         * - `onlychild`: Adds it as child and hides all other children of the target element.
+         */
+        position: {
+            type: String,
+            default: 'onlychild',
+        },
+        /** If disabled, the slot content will not be teleported */
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    setup(props) {
+        if (typeof document === 'undefined') {
+            return { teleportHost: ref() };
+        }
+        const instance = getCurrentInstance();
+        /** Hook where the slot content will be teleported to. */
+        const teleportHost = ref();
+        /** The page element where the teleport host will be inserted. */
+        const targetElement = ref();
+        let isIsolated = false;
+        // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.
+        if (instance?.appContext.app._container) {
+            createHost();
+        }
+        else {
+            afterAppMount(createHost);
+        }
+        const targetAddedObserver = new MutationObserver(targetAdded);
+        const targetRemovedObserver = new MutationObserver(targetRemoved);
+        onUnmounted(() => {
+            if (isIsolated && teleportHost.value) {
+                window.xCSSInjector.removeHost(teleportHost.value.shadowRoot);
+            }
+        });
+        onBeforeUnmount(() => {
+            targetAddedObserver.disconnect();
+            targetRemovedObserver.disconnect();
+            teleportHost.value?.remove();
+        });
+        // Handles target prop changes and init the observers accordingly.
+        watch(() => props.target, newTarget => {
+            targetAddedObserver.disconnect();
+            targetRemovedObserver.disconnect();
+            const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget;
+            if (target?.isConnected) {
+                targetAdded();
+            }
+            else {
+                targetRemoved();
+            }
+        }, { immediate: true });
+        // Updates the teleport host when props change.
+        watchEffect(() => {
+            if (!teleportHost.value) {
+                return;
+            }
+            if (props.disabled) {
+                teleportHost.value.remove();
+                return;
+            }
+            teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`;
+            if (!targetElement.value) {
+                console.warn(`BaseTeleport: Target element "${props.target}" not found.`);
+                return;
+            }
+            const position = props.position === 'onlychild' ? 'beforeend' : props.position;
+            targetElement.value.insertAdjacentElement(position, teleportHost.value);
+        });
+        /** Checks if the target element exists in the DOM and updates the observers */
+        function targetAdded() {
+            let element = typeof props.target === 'string' ? document.querySelector(props.target) : props.target;
+            if (element?.isConnected) {
+                targetAddedObserver.disconnect();
+                targetElement.value = element;
+                while (element.parentElement) {
+                    element = element.parentElement;
+                    targetRemovedObserver.observe(element, { childList: true });
+                }
+            }
+        }
+        /** Checks if the target was disconnected from the DOM and updates the observers */
+        function targetRemoved() {
+            if (targetElement.value && !targetElement.value.isConnected) {
+                targetRemovedObserver.disconnect();
+                targetAddedObserver.observe(document.body, { childList: true, subtree: true });
+                targetElement.value = undefined;
+            }
+        }
+        /** Creates and sets the teleport host element */
+        function createHost() {
+            teleportHost.value = document.createElement('div');
+            isIsolated = instance?.appContext.app._container instanceof ShadowRoot;
+            if (isIsolated) {
+                teleportHost.value.attachShadow({ mode: 'open' });
+                window.xCSSInjector.addHost(teleportHost.value.shadowRoot);
+            }
+        }
+        function afterAppMount(fn) {
+            onMounted(() => setTimeout(fn, 0));
+        }
+        return { teleportHost };
+    },
+});
+/** Teleport host styles should be injected outside our shadowRoots */
+if (typeof document !== 'undefined') {
+    const css = document.createElement('style');
+    css.textContent =
+        ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }';
+    document.head?.appendChild(css) ||
+        document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css));
+}
+
+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 v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  onUnmounted,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    /** The element or css selector to which the component will be teleported. */\n    target: {\n      type: [String, Object] as PropType<string | Element>,\n      required: true,\n    },\n    /**\n     * The position relative to the target\n     * - `beforebegin`: Before the target element.\n     * - `afterbegin`: Inside the target element, before its first child.\n     * - `beforeend`: Inside the target element, after its last child.\n     * - `afterend`: After the target element.\n     * - `onlychild`: Adds it as child and hides all other children of the target element.\n     */\n    position: {\n      type: String as PropType<\n        'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n      >,\n      default: 'onlychild',\n    },\n    /** If disabled, the slot content will not be teleported */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    if (typeof document === 'undefined') {\n      return { teleportHost: ref<Element>() }\n    }\n\n    const instance = getCurrentInstance()\n    /** Hook where the slot content will be teleported to. */\n    const teleportHost = ref<Element>()\n    /** The page element where the teleport host will be inserted. */\n    const targetElement = ref<Element>()\n    let isIsolated = false\n\n    // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n    if (instance?.appContext.app._container) {\n      createHost()\n    } else {\n      afterAppMount(createHost)\n    }\n\n    const targetAddedObserver = new MutationObserver(targetAdded)\n    const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n    onUnmounted(() => {\n      if (isIsolated && teleportHost.value) {\n        ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      targetAddedObserver.disconnect()\n      targetRemovedObserver.disconnect()\n      teleportHost.value?.remove()\n    })\n\n    // Handles target prop changes and init the observers accordingly.\n    watch(\n      () => props.target,\n      newTarget => {\n        targetAddedObserver.disconnect()\n        targetRemovedObserver.disconnect()\n        const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n        if (target?.isConnected) {\n          targetAdded()\n        } else {\n          targetRemoved()\n        }\n      },\n      { immediate: true },\n    )\n\n    // Updates the teleport host when props change.\n    watchEffect(() => {\n      if (!teleportHost.value) {\n        return\n      }\n      if (props.disabled) {\n        teleportHost.value.remove()\n        return\n      }\n      teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n      if (!targetElement.value) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.value.insertAdjacentElement(position, teleportHost.value)\n    })\n\n    /** Checks if the target element exists in the DOM and updates the observers */\n    function targetAdded() {\n      let element =\n        typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n      if (element?.isConnected) {\n        targetAddedObserver.disconnect()\n        targetElement.value = element\n        while (element.parentElement) {\n          element = element.parentElement\n          targetRemovedObserver.observe(element, { childList: true })\n        }\n      }\n    }\n\n    /** Checks if the target was disconnected from the DOM and updates the observers */\n    function targetRemoved() {\n      if (targetElement.value && !targetElement.value.isConnected) {\n        targetRemovedObserver.disconnect()\n        targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n        targetElement.value = undefined\n      }\n    }\n\n    /** Creates and sets the teleport host element */\n    function createHost() {\n      teleportHost.value = document.createElement('div')\n      isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n      if (isIsolated) {\n        teleportHost.value.attachShadow({ mode: 'open' })\n        ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n      }\n    }\n\n    function afterAppMount(fn: () => void) {\n      onMounted(() => setTimeout(fn, 0))\n    }\n\n    return { teleportHost }\n  },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nif (typeof document !== 'undefined') {\n  const css = document.createElement('style')\n  css.textContent =\n    ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n  document.head?.appendChild(css) ||\n    document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\n</script>\n"],"names":[],"mappings":"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"}

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\" #[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\">\nimport type { PropType } from 'vue'\nimport type { ListItem } from '../utils/types'\nimport { computed, defineComponent, ref } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\nimport { AnimationProp } from '../types/animation-prop'\nimport 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 */\nexport 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>\nimport { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'\n\nexport 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;;;;eAAQ,IAAM,CAAA,KAAA,EAAA,CAAA,CAAA,EAAA,IAAA,KAAA;AAFhD,MAAA,OAAA;AAAA,QAAA,IAAA;;;;;;;;;;;;"}