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

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

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed } from 'vue';
-import { AnimationProp } from '../types/animation-prop.js';
 import { useXBus } from '../composables/use-x-bus.js';
+import { AnimationProp } from '../types/animation-prop.js';
 import BaseGrid from './base-grid.vue.js';
 
 /**
@@ -14,7 +14,7 @@ import BaseGrid from './base-grid.vue.js';
 var _sfc_main = defineComponent({
     name: 'BaseVariableColumnGrid',
     components: {
-        BaseGrid
+        BaseGrid,
     },
     props: {
         /**
@@ -24,7 +24,7 @@ var _sfc_main = defineComponent({
          */
         animation: {
             type: AnimationProp,
-            default: 'ul'
+            default: 'ul',
         },
         /**
          * The list of items to be rendered.
@@ -42,8 +42,8 @@ var _sfc_main = defineComponent({
          */
         columns: {
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
     setup(props, { slots }) {
         const bus = useXBus();
@@ -73,9 +73,9 @@ var _sfc_main = defineComponent({
             .subscribe(newColumns => (providedColumns.value = newColumns));
         return {
             columnsToRender,
-            slots
+            slots,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"base-variable-column-grid.vue2.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":[],"mappings":";;;;;AAoBE;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,wBAAwB;AAC9B,IAAA,UAAU,EAAE;QACV,QAAO;AACR,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AACD;;;;;;AAME;AACF,QAAA,KAAK,EAAE,KAA6B;AACpC;;;;;AAKE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAA;AACX,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,GAAI,GAAE,OAAO,EAAE,CAAA;AACrB;;;;AAIE;AACF,QAAA,MAAM,eAAgB,GAAE,GAAG,CAAgB,IAAI,CAAC,CAAA;AAEhD;;;;;;AAME;QACF,MAAM,eAAc,GAAI,QAAQ,CAAC,MAC/B,eAAe,CAAC,KAAI,KAAM,IAAK,GAAE,KAAK,CAAC,OAAQ,GAAE,eAAe,CAAC,KAAI,CACtE,CAAA;AAED;;;;;;AAME;QACF,GAAE;AACC,aAAA,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAA;AACjC,aAAA,SAAS,CAAC,UAAS,KAAM,eAAe,CAAC,QAAQ,UAAU,CAAC,CAAC,CAAA;QAEhE,OAAO;YACL,eAAe;YACf,KAAI;SACL,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-variable-column-grid.vue2.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":[],"mappings":";;;;;AAqBA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,wBAAwB;AAC9B,IAAA,UAAU,EAAE;QACV,QAAQ;AACT,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;;;AAME;AACF,QAAA,KAAK,EAAE,KAA6B;AACpC;;;;;AAKE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,GAAE,GAAI,OAAO,EAAC,CAAA;AACpB;;;;AAIE;AACF,QAAA,MAAM,eAAgB,GAAE,GAAG,CAAgB,IAAI,CAAA,CAAA;AAE/C;;;;;;AAME;QACF,MAAM,eAAc,GAAI,QAAQ,CAAC,MAC/B,eAAe,CAAC,KAAI,KAAM,IAAK,GAAE,KAAK,CAAC,OAAM,GAAI,eAAe,CAAC,KAAK,CACxE,CAAA;AAEA;;;;;;AAME;QACF,GAAE;AACC,aAAA,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAA;AACjC,aAAA,SAAS,CAAC,UAAW,KAAI,eAAe,CAAC,KAAM,GAAE,UAAU,CAAC,CAAA,CAAA;QAE/D,OAAO;YACL,eAAe;YACf,KAAK;SACP,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1,18 +1,17 @@
 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) {
   const _component_BaseDropdown = resolveComponent("BaseDropdown");
   return openBlock(), createBlock(_component_BaseDropdown, {
-    "onUpdate:modelValue": _ctx.emitEvents,
-    modelValue: _ctx.selectedColumns,
+    "model-value": _ctx.selectedColumns,
     items: _ctx.columns,
     animation: _ctx.animation,
-    "aria-label": "Select number of columns"
+    "aria-label": "Select number of columns",
+    "onUpdate:modelValue": _ctx.emitEvents
   }, 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,12 +20,11 @@ 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"
     } : void 0
-  ]), 1032, ["onUpdate:modelValue", "modelValue", "items", "animation"]);
+  ]), 1032, ["model-value", "items", "animation", "onUpdate:modelValue"]);
 }
 var baseColumnPickerDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

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    :model-value=\"selectedColumns\"\n    :items=\"columns\"\n    :animation=\"animation\"\n    aria-label=\"Select number of columns\"\n    @update:model-value=\"emitEvents\"\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\">\nimport type { PropType } from 'vue'\nimport type Vue from 'vue'\nimport { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport 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 */\nexport 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>\nimport { BaseColumnPickerDropdown } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseColumnPickerDropdown } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseColumnPickerDropdown } from '@empathyco/x-components'\n\nexport 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;AAzBP,EAAA,OAAAC,SAAA,EAAS,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IACd,aAAWC,EAAAA,IAAAA,CAAAA,eAAAA;AAAAA,IACZ,KAAU,EAAA,IAAA,CAAA,OAAA;AAAA,IACT,SAAA,EAAA,IAAA,CAAA,SAAA;AAAA,IANL,YAAA,EAAA,0BAAA;AAAA,IAkBe,uBAAY,IAAE,CAAA,UAAA;AAAA,GAQ0C,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-dropdown.vue2.js

@@ -18,12 +18,12 @@ var _sfc_main = defineComponent({
         /** An array of numbers that represents the number of columns to render. */
         columns: {
             type: Array,
-            required: true
+            required: true,
         },
         /** The value of the selected columns number. */
         modelValue: Number,
         /** The transition to use for opening and closing the dropdown. */
-        animation: [String, Object]
+        animation: [String, Object],
     },
     emits: ['update:modelValue'],
     setup(props, { emit, slots }) {
@@ -79,9 +79,9 @@ var _sfc_main = defineComponent({
         return {
             emitEvents,
             hasToggleSlot: !!slots.toggle,
-            selectedColumns
+            selectedColumns,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

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

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-dropdown.vue2.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":[],"mappings":";;;;AAoCE;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,0BAA0B;IAChC,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,UAAU,EAAE,MAAM;;AAElB,QAAA,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AAC5D,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAM,EAAC,EAAA;AAC1B,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,uBAAsB,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,UAAS,IAAK,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QACpF,MAAM,eAAc,GAAI,GAAG,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAA;AAE1D;;;;AAIE;QACF,SAAS,yBAAyB,CAAC,MAAc,EAAA;AAC/C,YAAA,eAAe,CAAC,KAAI,GAAI,MAAM,CAAA;AAC9B,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAA;SAC1C;AAEA;;;;AAIE;QACF,SAAS,oBAAoB,CAAC,MAAc,EAAA;AAC1C,YAAA,IAAI,KAAK,CAAC,UAAW,KAAI,MAAM,EAAE;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAA;AACnC,aAAA;SACF;AAEA,QAAA,KAAK,CAAC,uBAAuB,EAAE,yBAAyB,CAAC,CAAA;AACzD,QAAA,KAAK,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAAA;QAE5C,EAAE,CAAC,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,MAAO,KAAI,eAAe,CAAC,KAAM,GAAE,MAAM,CAAC,CAAC,CAAA;AAE3F;;;;;AAKE;QACF,aAAa,CAAC,MAAM;AAClB,YAAA,IAAI,eAAe,CAAC,KAAI,KAAM,uBAAuB,CAAC,KAAK,EAAE;AAC3D,gBAAA,yBAAyB,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;AAChD,aAAA;AAAK,iBAAA;AACL,gBAAA,oBAAoB,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;AAC7C,aAAA;AACF,SAAC,CAAC,CAAA;AAEF;;;;;AAKE;QACF,SAAS,UAAU,CAAC,MAAc,EAAA;AAChC,YAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAA;AAC1C,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAA;SAC1C;QAEA,OAAO;YACL,UAAU;AACV,YAAA,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;YAC7B,eAAc;SACf,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-column-picker-dropdown.vue2.js","sources":["../../../../src/components/column-picker/base-column-picker-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    :model-value=\"selectedColumns\"\n    :items=\"columns\"\n    :animation=\"animation\"\n    aria-label=\"Select number of columns\"\n    @update:model-value=\"emitEvents\"\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\">\nimport type { PropType } from 'vue'\nimport type Vue from 'vue'\nimport { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport 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 */\nexport 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>\nimport { BaseColumnPickerDropdown } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseColumnPickerDropdown } from '@empathyco/x-components'\n\nexport 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>\nimport { BaseColumnPickerDropdown } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseColumnPickerDropdownTest',\n  components: {\n    BaseColumnPickerDropdown,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAsCA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,0BAA0B;IAChC,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,UAAU,EAAE,MAAM;;AAElB,QAAA,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAkC;AAC7D,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAM,EAAC,EAAA;AAC1B,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB,QAAA,MAAM,uBAAsB,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,UAAW,IAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,CAAA;QACnF,MAAM,eAAc,GAAI,GAAG,CAAC,uBAAuB,CAAC,KAAK,CAAA,CAAA;AAEzD;;;;AAIE;QACF,SAAS,yBAAyB,CAAC,MAAc,EAAA;AAC/C,YAAA,eAAe,CAAC,KAAM,GAAE,MAAK,CAAA;AAC7B,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAA,CAAA;SACzC;AAEA;;;;AAIE;QACF,SAAS,oBAAoB,CAAC,MAAc,EAAA;AAC1C,YAAA,IAAI,KAAK,CAAC,UAAW,KAAI,MAAM,EAAE;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAA,CAAA;AAClC,aAAA;SACF;AAEA,QAAA,KAAK,CAAC,uBAAuB,EAAE,yBAAyB,CAAA,CAAA;AACxD,QAAA,KAAK,CAAC,eAAe,EAAE,oBAAoB,CAAA,CAAA;QAE3C,EAAE,CAAC,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,MAAK,KAAM,eAAe,CAAC,KAAI,GAAI,MAAM,CAAC,CAAA,CAAA;AAE1F;;;;;AAKE;QACF,aAAa,CAAC,MAAM;AAClB,YAAA,IAAI,eAAe,CAAC,KAAI,KAAM,uBAAuB,CAAC,KAAK,EAAE;AAC3D,gBAAA,yBAAyB,CAAC,eAAe,CAAC,KAAK,CAAA,CAAA;AAC/C,aAAA;AAAK,iBAAA;AACL,gBAAA,oBAAoB,CAAC,eAAe,CAAC,KAAK,CAAA,CAAA;AAC5C,aAAA;AACF,SAAC,CAAA,CAAA;AAED;;;;;AAKE;QACF,SAAS,UAAU,CAAC,MAAc,EAAA;AAChC,YAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAA,CAAA;AACzC,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAA,CAAA;SACzC;QAEA,OAAO;YACL,UAAU;AACV,YAAA,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;YAC7B,eAAe;SACjB,CAAA;KACD;AACF,CAAA,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

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

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <div class=\"x-column-picker-list x-button-group\" data-test=\"column-picker-list\" role=\"list\">\n    <template\n      v-for=\"({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses\"\n      :key=\"column\"\n    >\n      <BaseEventButton\n        class=\"x-column-picker-list__button x-button\"\n        :class=\"[buttonClass, cssClasses]\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected.toString()\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\n        role=\"listitem\"\n      >\n        <!--\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        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n\n      <!--\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        -->\n      <slot v-if=\"index !== columnsWithCssClasses.length - 1\" name=\"divider\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onBeforeMount, PropType, ref, watch } from 'vue';\n  import { use$x } from '../../composables/use-$x';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring';\n  import BaseEventButton from '../base-event-button.vue';\n\n  interface ColumnPickerItem {\n    column: number;\n    cssClasses: VueCSSClasses;\n    events: Partial<XEventsTypes>;\n    isSelected: boolean;\n  }\n\n  /**\n   * Column picker list component renders a list of buttons to choose the columns number.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseColumnPickerList',\n    components: { BaseEventButton },\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      /** Class inherited by each button. */\n      buttonClass: String\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit }) {\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       * Maps the column to an object containing: the `column` and `CSS classes`.\n       *\n       * @returns An array of objects containing the column number and CSS classes.\n       */\n      const columnsWithCssClasses = computed<ColumnPickerItem[]>(() =>\n        props.columns.map(column => ({\n          column,\n          cssClasses: [\n            `x-column-picker-list__button--${column}-cols`,\n            { 'x-selected': selectedColumns.value === column }\n          ],\n          isSelected: selectedColumns.value === column,\n          events: {\n            UserClickedColumnPicker: column,\n            ColumnsNumberProvided: column\n          }\n        }))\n      );\n\n      return { columnsWithCssClasses };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nelement will emit the needed events to sync other instances of columns pickers, or grids with the\nnumber of columns that it is being selected when it is clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Using v-model\n\nIt is possible to do two way binding in order to synchronize the value with the parents. It will be\nupdated if it changed the value or if the parent changes it.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6], selectedColumns: 4 };\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" #default=\"{ column, isSelected }\">\n    <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\nIt is also possible to add a divider element between the column picker buttons by overriding the\n`divider` slot.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #divider>\n      <ChevronRightIcon aria-hidden=\"true\" />\n    </template>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList, ChevronRightIcon } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList,\n      ChevronRightIcon\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"x-button--round\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events 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. The event payload is the number of columns\n  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. The event payload is the current `selectedColumns` value.\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_Fragment","_renderList","buttonClass","_withCtx","_createCommentVNode","_renderSlot","_mergeProps","columnsWithCssClasses"],"mappings":";;;;MACmD,UAAU,GAAA;AAAA,EAAqB,KAAK,EAAA,qCAAA;AAAA,EAAA,WAAA,EAAA,oBAAA;;;;qCAArFA,gBA+BM,CAAA,iBAAA,CAAA,CAAA;AAhCR,EAAA,OAAAC,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,KAAAD,SAAA,CAMM,IAkBkB,CAAA,EAAAC,kBAAA;AAAA,MAAAC,QAAA;AAAA,MAAA,IAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,qBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,EAAA,KAAA,KAAA;eAjBhBH,SAPR,EAAA,EAAAC,kBAAA;AAAA,UAOcC,QAAA;AAAA,UAAuC,EAAA,GAAA,EAAA,MAAA,EAAA;AAAA,UACpCE;AAAAA,YAAAA,WAAAA,CACA,0BAAuB,EAAA;AAAA,cAC/B,sBAAc,CAAmB,uCAAA,EAAA,CAAA,IAAA,CAAA,WAAA,EAAA,UAAA,CAAA,CAAA,CAAA;AAAA,cACjC,WAAQ,EAAA,sBAAA;AAAA,cACR,gBAAU,UAAW,CAAA,QAAA,EAAA;AAAA,cACtB,MAAA;AAAA,cAAA,YAAA,EAAA,CAAA,EAAA,MAAA,CAAA,QAAA,CAAA;AAbR,cAAA,IAAA,EAAA,UAAA;AAAA,aAAA,EAAA;uBAqBQC,OAEO,CAAA,MAAA;AAAA,gBAAAC,kBAAA,CAvBf,wVAsBmB,CAAA;AAAA,gBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,UAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AAtBnB,iBAAA,CAAA;AAAA,eAAA,CAAA;AA0BM,cAAA,CAAA,EAAA,CAAA;AAAA;AAAA,aAIY,EAAA,IAAA,EAAUC,CAAqB,OAAO,EAAA,cAAA,EAAA,QAAA,EAAA,YAAA,CAAA,CAAA;AAAA,YAAAH,kBAAA,CAA4B,qKA9BpF,CAAA;AAAA,YAAA,KAAA,KAAA,IAAA,CAAA,qBAAA,CAAA,MAAA,GAAA,CAAA,GAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA,GAAAD,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <div class=\"x-column-picker-list x-button-group\" data-test=\"column-picker-list\" role=\"list\">\n    <template\n      v-for=\"({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses\"\n      :key=\"column\"\n    >\n      <BaseEventButton\n        class=\"x-column-picker-list__button x-button\"\n        :class=\"[buttonClass, cssClasses]\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected.toString()\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\n        role=\"listitem\"\n      >\n        <!--\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        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n\n      <!--\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        -->\n      <slot v-if=\"index !== columnsWithCssClasses.length - 1\" name=\"divider\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring'\nimport { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseEventButton from '../base-event-button.vue'\n\ninterface ColumnPickerItem {\n  column: number\n  cssClasses: VueCSSClasses\n  events: Partial<XEventsTypes>\n  isSelected: boolean\n}\n\n/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseColumnPickerList',\n  components: { BaseEventButton },\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    /** Class inherited by each button. */\n    buttonClass: String,\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\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     * Maps the column to an object containing: the `column` and `CSS classes`.\n     *\n     * @returns An array of objects containing the column number and CSS classes.\n     */\n    const columnsWithCssClasses = computed<ColumnPickerItem[]>(() =>\n      props.columns.map(column => ({\n        column,\n        cssClasses: [\n          `x-column-picker-list__button--${column}-cols`,\n          { 'x-selected': selectedColumns.value === column },\n        ],\n        isSelected: selectedColumns.value === column,\n        events: {\n          UserClickedColumnPicker: column,\n          ColumnsNumberProvided: column,\n        },\n      })),\n    )\n\n    return { columnsWithCssClasses }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nelement will emit the needed events to sync other instances of columns pickers, or grids with the\nnumber of columns that it is being selected when it is clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n<script>\nimport { BaseColumnPickerList } from '@empathyco/x-components'\n\nexport default {\n  components: {\n    BaseColumnPickerList,\n  },\n  data() {\n    return { columns: [2, 4, 6] }\n  },\n}\n</script>\n```\n\n#### Using v-model\n\nIt is possible to do two way binding in order to synchronize the value with the parents. It will be\nupdated if it changed the value or if the parent changes it.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n<script>\nimport { BaseColumnPickerList } from '@empathyco/x-components'\n\nexport default {\n  components: {\n    BaseColumnPickerList,\n  },\n  data() {\n    return { columns: [2, 4, 6], selectedColumns: 4 }\n  },\n}\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" #default=\"{ column, isSelected }\">\n    <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n  </BaseColumnPickerList>\n</template>\n<script>\nimport { BaseColumnPickerList } from '@empathyco/x-components'\n\nexport default {\n  components: {\n    BaseColumnPickerList,\n  },\n  data() {\n    return { columns: [2, 4, 6] }\n  },\n}\n</script>\n```\n\nIt is also possible to add a divider element between the column picker buttons by overriding the\n`divider` slot.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #divider>\n      <ChevronRightIcon aria-hidden=\"true\" />\n    </template>\n  </BaseColumnPickerList>\n</template>\n<script>\nimport { BaseColumnPickerList, ChevronRightIcon } from '@empathyco/x-components'\n\nexport default {\n  components: {\n    BaseColumnPickerList,\n    ChevronRightIcon,\n  },\n  data() {\n    return { columns: [2, 4, 6] }\n  },\n}\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"x-button--round\" />\n</template>\n<script>\nimport { BaseColumnPickerList } from '@empathyco/x-components'\n\nexport default {\n  components: {\n    BaseColumnPickerList,\n  },\n  data() {\n    return { columns: [2, 4, 6] }\n  },\n}\n</script>\n```\n\n## Events\n\nA list of events 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. The event payload is the number of columns\n  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. The event payload is the current `selectedColumns` value.\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_Fragment","_renderList","buttonClass","_withCtx","_renderSlot","_mergeProps","_createCommentVNode"],"mappings":";;;;MACmD,UAAU,GAAA;AAAA,EAAqB,KAAK,EAAA,qCAAA;AAAA,EAAA,WAAA,EAAA,oBAAA;;;;qCAArFA,gBA+BM,CAAA,iBAAA,CAAA,CAAA;AAhCR,EAAA,OAAAC,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,KAAAD,SAAA,CAMM,IAkBkB,CAAA,EAAAC,kBAAA;AAAA,MAAAC,QAAA;AAAA,MAAA,IAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,qBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,EAAA,KAAA,KAAA;eAjBhBH,SAPR,EAAA,EAAAC,kBAAA;AAAA,UAOcC,QAAA;AAAA,UAAuC,EAAA,GAAA,EAAA,MAAA,EAAA;AAAA,UACpCE;AAAAA,YAAAA,WAAAA,CACA,0BAAuB,EAAA;AAAA,cAC/B,sBAAc,CAAmB,uCAAA,EAAA,CAAA,IAAA,CAAA,WAAA,EAAA,UAAA,CAAA,CAAA,CAAA;AAAA,cACjC,WAAQ,EAAA,sBAAA;AAAA,cACR,gBAAU,UAAW,CAAA,QAAA,EAAA;AAAA,cACtB,MAAA;AAAA,cAAA,YAAA,EAAA,CAAA,EAAA,MAAA,CAAA,QAAA,CAAA;AAbR,cAAA,IAAA,EAAA,UAAA;AAAA,aAAA,EAAA;AAAA,cAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,gBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,UAAA,EAAA,CAAA,EAAA,MAAA;;;;;;AAAA,iBAAA,CAAA;AAAA,eAAA,CAAA;AA8BkB,cAAA,CAAA,EAAA,CAAA;AAAA;AAAA,aAAA,EAAA,IAAA,EAAkE,CA9BpF,OAAA,EAAA,cAAA,EAAA,QAAA,EAAA,YAAA,CAAA,CAAA;AAAA,YAAA,KAAA,KAAA,IAAA,CAAA,qBAAA,CAAA,MAAA,GAAA,CAAA,GAAAD,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA,GAAAE,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;;;;;;;;;;;;;;;"}

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

@@ -17,12 +17,12 @@ var _sfc_main = defineComponent({
         /** An array of numbers that represents the number of columns to render. */
         columns: {
             type: Array,
-            required: true
+            required: true,
         },
         /** The value of the selected columns number. */
         modelValue: Number,
         /** Class inherited by each button. */
-        buttonClass: String
+        buttonClass: String,
     },
     emits: ['update:modelValue'],
     setup(props, { emit }) {
@@ -74,16 +74,16 @@ var _sfc_main = defineComponent({
             column,
             cssClasses: [
                 `x-column-picker-list__button--${column}-cols`,
-                { 'x-selected': selectedColumns.value === column }
+                { 'x-selected': selectedColumns.value === column },
             ],
             isSelected: selectedColumns.value === column,
             events: {
                 UserClickedColumnPicker: column,
-                ColumnsNumberProvided: column
-            }
+                ColumnsNumberProvided: column,
+            },
         })));
         return { columnsWithCssClasses };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/column-picker/base-column-picker-list.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-column-picker-list.vue2.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <div class=\"x-column-picker-list x-button-group\" data-test=\"column-picker-list\" role=\"list\">\n    <template\n      v-for=\"({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses\"\n      :key=\"column\"\n    >\n      <BaseEventButton\n        class=\"x-column-picker-list__button x-button\"\n        :class=\"[buttonClass, cssClasses]\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected.toString()\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\n        role=\"listitem\"\n      >\n        <!--\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        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n\n      <!--\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        -->\n      <slot v-if=\"index !== columnsWithCssClasses.length - 1\" name=\"divider\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onBeforeMount, PropType, ref, watch } from 'vue';\n  import { use$x } from '../../composables/use-$x';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring';\n  import BaseEventButton from '../base-event-button.vue';\n\n  interface ColumnPickerItem {\n    column: number;\n    cssClasses: VueCSSClasses;\n    events: Partial<XEventsTypes>;\n    isSelected: boolean;\n  }\n\n  /**\n   * Column picker list component renders a list of buttons to choose the columns number.\n   *\n   * Additionally, this component exposes the following props to modify the classes of the\n   * elements: `buttonClass`.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseColumnPickerList',\n    components: { BaseEventButton },\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      /** Class inherited by each button. */\n      buttonClass: String\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit }) {\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       * Maps the column to an object containing: the `column` and `CSS classes`.\n       *\n       * @returns An array of objects containing the column number and CSS classes.\n       */\n      const columnsWithCssClasses = computed<ColumnPickerItem[]>(() =>\n        props.columns.map(column => ({\n          column,\n          cssClasses: [\n            `x-column-picker-list__button--${column}-cols`,\n            { 'x-selected': selectedColumns.value === column }\n          ],\n          isSelected: selectedColumns.value === column,\n          events: {\n            UserClickedColumnPicker: column,\n            ColumnsNumberProvided: column\n          }\n        }))\n      );\n\n      return { columnsWithCssClasses };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nelement will emit the needed events to sync other instances of columns pickers, or grids with the\nnumber of columns that it is being selected when it is clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Using v-model\n\nIt is possible to do two way binding in order to synchronize the value with the parents. It will be\nupdated if it changed the value or if the parent changes it.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6], selectedColumns: 4 };\n    }\n  };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" #default=\"{ column, isSelected }\">\n    <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\nIt is also possible to add a divider element between the column picker buttons by overriding the\n`divider` slot.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #divider>\n      <ChevronRightIcon aria-hidden=\"true\" />\n    </template>\n  </BaseColumnPickerList>\n</template>\n<script>\n  import { BaseColumnPickerList, ChevronRightIcon } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList,\n      ChevronRightIcon\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"x-button--round\" />\n</template>\n<script>\n  import { BaseColumnPickerList } from '@empathyco/x-components';\n\n  export default {\n    components: {\n      BaseColumnPickerList\n    },\n    data() {\n      return { columns: [2, 4, 6] };\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events 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. The event payload is the number of columns\n  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. The event payload is the current `selectedColumns` value.\n</docs>\n"],"names":[],"mappings":";;;;AAiDE;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,UAAU,EAAE,MAAM;;AAElB,QAAA,WAAW,EAAE,MAAK;AACnB,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,uBAAsB,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,UAAS,IAAK,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QACpF,MAAM,eAAc,GAAI,GAAG,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAA;AAE1D;;;;AAIE;QACF,SAAS,yBAAyB,CAAC,MAAc,EAAA;AAC/C,YAAA,eAAe,CAAC,KAAI,GAAI,MAAM,CAAA;AAC9B,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAA;SAC1C;AAEA;;;;AAIE;QACF,SAAS,oBAAoB,CAAC,MAAc,EAAA;AAC1C,YAAA,IAAI,KAAK,CAAC,UAAW,KAAI,MAAM,EAAE;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAA;AACnC,aAAA;SACF;AAEA,QAAA,KAAK,CAAC,uBAAuB,EAAE,yBAAyB,CAAC,CAAA;AACzD,QAAA,KAAK,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAAA;QAE5C,EAAE,CAAC,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,MAAO,KAAI,eAAe,CAAC,KAAM,GAAE,MAAM,CAAC,CAAC,CAAA;AAE3F;;;;;AAKE;QACF,aAAa,CAAC,MAAM;AAClB,YAAA,IAAI,eAAe,CAAC,KAAI,KAAM,uBAAuB,CAAC,KAAK,EAAE;AAC3D,gBAAA,yBAAyB,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;AAChD,aAAA;AAAK,iBAAA;AACL,gBAAA,oBAAoB,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;AAC7C,aAAA;AACF,SAAC,CAAC,CAAA;AAEF;;;;AAIE;AACF,QAAA,MAAM,qBAAsB,GAAE,QAAQ,CAAqB,MACzD,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAK,KAAM;YAC3B,MAAM;AACN,YAAA,UAAU,EAAE;AACV,gBAAA,CAAA,8BAAA,EAAiC,MAAM,CAAO,KAAA,CAAA;AAC9C,gBAAA,EAAE,YAAY,EAAE,eAAe,CAAC,KAAM,KAAI,MAAO,EAAA;AAClD,aAAA;AACD,YAAA,UAAU,EAAE,eAAe,CAAC,KAAM,KAAI,MAAM;AAC5C,YAAA,MAAM,EAAE;AACN,gBAAA,uBAAuB,EAAE,MAAM;AAC/B,gBAAA,qBAAqB,EAAE,MAAK;AAC9B,aAAA;SACD,CAAC,CAAA,CACH,CAAA;QAED,OAAO,EAAE,qBAAoB,EAAG,CAAA;KAClC;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-column-picker-list.vue2.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n  <div class=\"x-column-picker-list x-button-group\" data-test=\"column-picker-list\" role=\"list\">\n    <template\n      v-for=\"({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses\"\n      :key=\"column\"\n    >\n      <BaseEventButton\n        class=\"x-column-picker-list__button x-button\"\n        :class=\"[buttonClass, cssClasses]\"\n        data-test=\"column-picker-button\"\n        :aria-pressed=\"isSelected.toString()\"\n        :events=\"events\"\n        :aria-label=\"`${column} columns`\"\n        role=\"listitem\"\n      >\n        <!--\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        -->\n        <slot v-bind=\"{ column, isSelected }\">\n          {{ column }}\n        </slot>\n      </BaseEventButton>\n\n      <!--\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        -->\n      <slot v-if=\"index !== columnsWithCssClasses.length - 1\" name=\"divider\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring'\nimport { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseEventButton from '../base-event-button.vue'\n\ninterface ColumnPickerItem {\n  column: number\n  cssClasses: VueCSSClasses\n  events: Partial<XEventsTypes>\n  isSelected: boolean\n}\n\n/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseColumnPickerList',\n  components: { BaseEventButton },\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    /** Class inherited by each button. */\n    buttonClass: String,\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit }) {\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     * Maps the column to an object containing: the `column` and `CSS classes`.\n     *\n     * @returns An array of objects containing the column number and CSS classes.\n     */\n    const columnsWithCssClasses = computed<ColumnPickerItem[]>(() =>\n      props.columns.map(column => ({\n        column,\n        cssClasses: [\n          `x-column-picker-list__button--${column}-cols`,\n          { 'x-selected': selectedColumns.value === column },\n        ],\n        isSelected: selectedColumns.value === column,\n        events: {\n          UserClickedColumnPicker: column,\n          ColumnsNumberProvided: column,\n        },\n      })),\n    )\n\n    return { columnsWithCssClasses }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nelement will emit the needed events to sync other instances of columns pickers, or grids with the\nnumber of columns that it is being selected when it is clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" />\n</template>\n<script>\nimport { BaseColumnPickerList } from '@empathyco/x-components'\n\nexport default {\n  components: {\n    BaseColumnPickerList,\n  },\n  data() {\n    return { columns: [2, 4, 6] }\n  },\n}\n</script>\n```\n\n#### Using v-model\n\nIt is possible to do two way binding in order to synchronize the value with the parents. It will be\nupdated if it changed the value or if the parent changes it.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n<script>\nimport { BaseColumnPickerList } from '@empathyco/x-components'\n\nexport default {\n  components: {\n    BaseColumnPickerList,\n  },\n  data() {\n    return { columns: [2, 4, 6], selectedColumns: 4 }\n  },\n}\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" #default=\"{ column, isSelected }\">\n    <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n  </BaseColumnPickerList>\n</template>\n<script>\nimport { BaseColumnPickerList } from '@empathyco/x-components'\n\nexport default {\n  components: {\n    BaseColumnPickerList,\n  },\n  data() {\n    return { columns: [2, 4, 6] }\n  },\n}\n</script>\n```\n\nIt is also possible to add a divider element between the column picker buttons by overriding the\n`divider` slot.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\">\n    <template #divider>\n      <ChevronRightIcon aria-hidden=\"true\" />\n    </template>\n  </BaseColumnPickerList>\n</template>\n<script>\nimport { BaseColumnPickerList, ChevronRightIcon } from '@empathyco/x-components'\n\nexport default {\n  components: {\n    BaseColumnPickerList,\n    ChevronRightIcon,\n  },\n  data() {\n    return { columns: [2, 4, 6] }\n  },\n}\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue live\n<template>\n  <BaseColumnPickerList :columns=\"columns\" buttonClass=\"x-button--round\" />\n</template>\n<script>\nimport { BaseColumnPickerList } from '@empathyco/x-components'\n\nexport default {\n  components: {\n    BaseColumnPickerList,\n  },\n  data() {\n    return { columns: [2, 4, 6] }\n  },\n}\n</script>\n```\n\n## Events\n\nA list of events 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. The event payload is the number of columns\n  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. The event payload is the current `selectedColumns` value.\n</docs>\n"],"names":[],"mappings":";;;;AAkDA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,UAAU,EAAE,MAAM;;AAElB,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB,QAAA,MAAM,uBAAsB,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,UAAW,IAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,CAAA;QACnF,MAAM,eAAc,GAAI,GAAG,CAAC,uBAAuB,CAAC,KAAK,CAAA,CAAA;AAEzD;;;;AAIE;QACF,SAAS,yBAAyB,CAAC,MAAc,EAAA;AAC/C,YAAA,eAAe,CAAC,KAAM,GAAE,MAAK,CAAA;AAC7B,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAA,CAAA;SACzC;AAEA;;;;AAIE;QACF,SAAS,oBAAoB,CAAC,MAAc,EAAA;AAC1C,YAAA,IAAI,KAAK,CAAC,UAAW,KAAI,MAAM,EAAE;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAA,CAAA;AAClC,aAAA;SACF;AAEA,QAAA,KAAK,CAAC,uBAAuB,EAAE,yBAAyB,CAAA,CAAA;AACxD,QAAA,KAAK,CAAC,eAAe,EAAE,oBAAoB,CAAA,CAAA;QAE3C,EAAE,CAAC,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,MAAK,KAAM,eAAe,CAAC,KAAI,GAAI,MAAM,CAAC,CAAA,CAAA;AAE1F;;;;;AAKE;QACF,aAAa,CAAC,MAAM;AAClB,YAAA,IAAI,eAAe,CAAC,KAAI,KAAM,uBAAuB,CAAC,KAAK,EAAE;AAC3D,gBAAA,yBAAyB,CAAC,eAAe,CAAC,KAAK,CAAA,CAAA;AAC/C,aAAA;AAAK,iBAAA;AACL,gBAAA,oBAAoB,CAAC,eAAe,CAAC,KAAK,CAAA,CAAA;AAC5C,aAAA;AACF,SAAC,CAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,qBAAsB,GAAE,QAAQ,CAAqB,MACzD,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAK,KAAM;YAC3B,MAAM;AACN,YAAA,UAAU,EAAE;AACV,gBAAA,CAAA,8BAAA,EAAiC,MAAM,CAAO,KAAA,CAAA;AAC9C,gBAAA,EAAE,YAAY,EAAE,eAAe,CAAC,UAAU,QAAQ;AACnD,aAAA;AACD,YAAA,UAAU,EAAE,eAAe,CAAC,KAAM,KAAI,MAAM;AAC5C,YAAA,MAAM,EAAE;AACN,gBAAA,uBAAuB,EAAE,MAAM;AAC/B,gBAAA,qBAAqB,EAAE,MAAM;AAC9B,aAAA;SACF,CAAC,CAAC,CACL,CAAA;QAEA,OAAO,EAAE,qBAAsB,EAAA,CAAA;KAChC;AACF,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"base-currency.vue.js","sources":["../../../../src/components/currency/base-currency.vue"],"sourcesContent":["<template>\n  <span v-if=\"value !== undefined\" class=\"x-currency\">{{ currency }}</span>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, inject } from 'vue';\n  import { currencyFormatter } from '../../utils/currency-formatter';\n\n  /**\n   * Renders the value received as a property which always must be a JavaScript number, with the\n   * proper format provided as a string property or by injection. The rendered tag is a span in\n   * order to render a default inline HTML element.\n   *\n   * Regarding the format or mask to be defined as string:\n   * - Use 'i' to define integer numbers.\n   * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n   * format doesn't include decimals, it is filled with zeros until reach the length defined with\n   * 'd's.\n   * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n   * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n   * than one character.\n   * - If you want to hide the decimal part if it's zero, you can add the `?` symbol after the\n   * decimal characters (e.g. 'i.iii,dd?', for `1234` you would get `1.234` instead of `1.234,00`).\n   * - Set whatever you need around the integers and decimals marks.\n   * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n   *\n   * @remarks The number of 'd', which is the maximum decimal length, MUST matches with the length\n   * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n   * part, it deletes significant digits.\n   *\n   * Basic example:\n   *\n   * ```vue\n   * <BaseCurrency\n   *   :value=\"123456.789\"\n   *   format=\"i.iiii,dddd €\"\n   * />\n   * ```\n   *\n   * It will render: `123.456,7890 €`.\n   *\n   * See docs below for more examples.\n   *\n   * @public\n   */\n  export default defineComponent({\n    props: {\n      /**\n       * Numeric value to be formatted.\n       *\n       * @remarks Pass the value with 'v-bind:value' (or ':value' shortcut) instead of plain string.\n       * @remarks Be careful using numbers under Number.MAX_SAFE_INTEGER to avoid unexpected errors.\n       *\n       * @public\n       */\n      value: {\n        type: Number,\n        required: true\n      },\n\n      /**\n       * The format as string.\n       *\n       * @public\n       */\n      format: {\n        type: String\n      }\n    },\n\n    setup(props) {\n      /**\n       * The injected format as string.\n       *\n       * @public\n       */\n      const injectedFormat = inject<string>('currencyFormat', 'i.iii,dd');\n\n      /**\n       * A format which can be passed through prop or injected.\n       *\n       * @returns A format as string.\n       *\n       * @internal\n       */\n      const renderedFormat = computed<string>(() => props.format ?? injectedFormat);\n\n      /**\n       * Returns the formatted result as string.\n       *\n       * @returns Formatted number.\n       *\n       * @internal\n       */\n      const currency = computed<string>(() => currencyFormatter(props.value, renderedFormat.value));\n\n      return {\n        currency\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders the value received as a property, which always must be a JavaScript number, with the proper\nformat provided as string property. The rendered tag is a span in order to render a default inline\nHTML element.\n\n### Basic usage\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" />\n  <!-- output: '12.345.678,87' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,ddd? €\" />\n  <!-- output: '12.345.678,876 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678\" format=\"i.iii,ddd? €\" />\n  <!-- output: '12.345.678 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"$ i.iii,dd\" />\n  <!-- output: '$ 12.345.678,87' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"$i.iii,dd\" />\n  <!-- output: '$12.345.678,87' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd €\" />\n  <!-- output: '12.345.678,87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd€\" />\n  <!-- output: '12.345.678,87€' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i,iii.dd €\" />\n  <!-- output: '12,345,678.87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i iii.dd €\" />\n  <!-- output: '12 345 678.87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i iii - dd €\" />\n  <!-- output: '12 345 678 - 87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,876543 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,870000 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,000000 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd €\" />\n  <!-- output: '12.345.678,87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii €\" />\n  <!-- output: '12.345.678 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;MACmC,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;AAAvC,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAyE,QAAzE,KAAyE,EAAA,QAAA,EAAA;AAD3E,EAAA,OAAA,IAAA,CAAA,KAAA,KAAA,KAAA,CAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA;;;;;;;;;;;;"}
+{"version":3,"file":"base-currency.vue.js","sources":["../../../../src/components/currency/base-currency.vue"],"sourcesContent":["<template>\n  <span v-if=\"value !== undefined\" class=\"x-currency\">{{ currency }}</span>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport { currencyFormatter } from '../../utils/currency-formatter'\n\n/**\n * Renders the value received as a property which always must be a JavaScript number, with the\n * proper format provided as a string property or by injection. The rendered tag is a span in\n * order to render a default inline HTML element.\n *\n * Regarding the format or mask to be defined as string:\n * - Use 'i' to define integer numbers.\n * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n * format doesn't include decimals, it is filled with zeros until reach the length defined with\n * 'd's.\n * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n * than one character.\n * - If you want to hide the decimal part if it's zero, you can add the `?` symbol after the\n * decimal characters (e.g. 'i.iii,dd?', for `1234` you would get `1.234` instead of `1.234,00`).\n * - Set whatever you need around the integers and decimals marks.\n * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n *\n * @remarks The number of 'd', which is the maximum decimal length, MUST matches with the length\n * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n * part, it deletes significant digits.\n *\n * Basic example:\n *\n * ```vue\n * <BaseCurrency\n *   :value=\"123456.789\"\n *   format=\"i.iiii,dddd €\"\n * />\n * ```\n *\n * It will render: `123.456,7890 €`.\n *\n * See docs below for more examples.\n *\n * @public\n */\nexport default defineComponent({\n  props: {\n    /**\n     * Numeric value to be formatted.\n     *\n     * @remarks Pass the value with 'v-bind:value' (or ':value' shortcut) instead of plain string.\n     * @remarks Be careful using numbers under Number.MAX_SAFE_INTEGER to avoid unexpected errors.\n     *\n     * @public\n     */\n    value: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * The format as string.\n     *\n     * @public\n     */\n    format: {\n      type: String,\n    },\n  },\n\n  setup(props) {\n    /**\n     * The injected format as string.\n     *\n     * @public\n     */\n    const injectedFormat = inject<string>('currencyFormat', 'i.iii,dd')\n\n    /**\n     * A format which can be passed through prop or injected.\n     *\n     * @returns A format as string.\n     *\n     * @internal\n     */\n    const renderedFormat = computed<string>(() => props.format ?? injectedFormat)\n\n    /**\n     * Returns the formatted result as string.\n     *\n     * @returns Formatted number.\n     *\n     * @internal\n     */\n    const currency = computed<string>(() => currencyFormatter(props.value, renderedFormat.value))\n\n    return {\n      currency,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders the value received as a property, which always must be a JavaScript number, with the proper\nformat provided as string property. The rendered tag is a span in order to render a default inline\nHTML element.\n\n### Basic usage\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" />\n  <!-- output: '12.345.678,87' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,ddd? €\" />\n  <!-- output: '12.345.678,876 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678\" format=\"i.iii,ddd? €\" />\n  <!-- output: '12.345.678 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"$ i.iii,dd\" />\n  <!-- output: '$ 12.345.678,87' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"$i.iii,dd\" />\n  <!-- output: '$12.345.678,87' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd €\" />\n  <!-- output: '12.345.678,87 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd€\" />\n  <!-- output: '12.345.678,87€' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i,iii.dd €\" />\n  <!-- output: '12,345,678.87 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i iii.dd €\" />\n  <!-- output: '12 345 678.87 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i iii - dd €\" />\n  <!-- output: '12 345 678 - 87 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,876543 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,870000 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,000000 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd €\" />\n  <!-- output: '12.345.678,87 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii €\" />\n  <!-- output: '12.345.678 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;MACmC,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;AAAvC,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAyE,QAAzE,KAAyE,EAAA,QAAA,EAAA;AAD3E,EAAA,OAAA,IAAA,CAAA,KAAA,KAAA,KAAA,CAAA,IAAAA,SAAA,EAAA,EAAAC,kBAAA;;;;;;;;;;;;"}

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

@@ -50,7 +50,7 @@ var _sfc_main = defineComponent({
          */
         value: {
             type: Number,
-            required: true
+            required: true,
         },
         /**
          * The format as string.
@@ -58,8 +58,8 @@ var _sfc_main = defineComponent({
          * @public
          */
         format: {
-            type: String
-        }
+            type: String,
+        },
     },
     setup(props) {
         /**
@@ -85,9 +85,9 @@ var _sfc_main = defineComponent({
          */
         const currency = computed(() => currencyFormatter(props.value, renderedFormat.value));
         return {
-            currency
+            currency,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };