@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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

@@ -1,88 +1,34 @@
-import script from './base-column-picker-dropdown.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './base-column-picker-dropdown.vue2.js';
+import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
+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,
+    items: _ctx.columns,
+    animation: _ctx.animation,
+    "aria-label": "Select number of columns"
+  }, createSlots({
+    item: withCtx(({ item, isSelected, isHighlighted }) => [
+      createCommentVNode("\n       @slot (required) From `BaseDropdown` component: Used to render each one of the items\n       content, and as fallback for the toggle button content slot if it is not provided.\n       @binding {string|number|Identifiable} item - Item to render\n       @binding {boolean} isHighlighted - True when the item has the focus.\n       @binding {boolean} isSelected - True when the item is selected.\n      "),
+      renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps({ item, isSelected, isHighlighted })))
+    ]),
+    _: 2
+    /* DYNAMIC */
+  }, [
+    _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"]);
+}
+var baseColumnPickerDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("BaseDropdown", {
-    attrs: {
-      modelValue: _vm.selectedColumns,
-      items: _vm.columns,
-      animation: _vm.animation,
-      "aria-label": "Select number of columns",
-    },
-    on: { "update:modelValue": _vm.emitEvents },
-    scopedSlots: _vm._u(
-      [
-        _vm.hasToggleSlot
-          ? {
-              key: "toggle",
-              fn: function (ref) {
-                var item = ref.item;
-                var isOpen = ref.isOpen;
-                return [
-                  _vm._t("toggle", null, null, { item: item, isOpen: isOpen }),
-                ]
-              },
-            }
-          : null,
-        {
-          key: "item",
-          fn: function (ref) {
-            var item = ref.item;
-            var isSelected = ref.isSelected;
-            var isHighlighted = ref.isHighlighted;
-            return [
-              _vm._t("item", null, null, {
-                item: item,
-                isSelected: isSelected,
-                isHighlighted: isHighlighted,
-              }),
-            ]
-          },
-        },
-      ],
-      null,
-      true
-    ),
-  })
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { baseColumnPickerDropdown as default };
 //# sourceMappingURL=base-column-picker-dropdown.vue.js.map

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').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":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;"}

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

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, watch, onBeforeMount } from 'vue';
 import { use$x } from '../../composables/use-_x.js';
-import __vue_component__ from '../base-dropdown.vue.js';
+import BaseDropdown from '../base-dropdown.vue.js';
 
 /**
  * Column picker dropdown component renders {@link BaseDropdown} component which
@@ -11,9 +11,9 @@ import __vue_component__ from '../base-dropdown.vue.js';
  *
  * @public
  */
-var script = defineComponent({
+var _sfc_main = defineComponent({
     name: 'BaseColumnPickerDropdown',
-    components: { BaseDropdown: __vue_component__ },
+    components: { BaseDropdown },
     props: {
         /** An array of numbers that represents the number of columns to render. */
         columns: {
@@ -51,7 +51,7 @@ var script = defineComponent({
         }
         watch(providedSelectedColumns, emitColumnsNumberProvided);
         watch(selectedColumns, emitUpdateModelValue);
-        $x.on('ColumnsNumberProvided').subscribe(column => (selectedColumns.value = column));
+        $x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column));
         /**
          * Synchronizes the columns number before mounting the component. If the real number of selected
          * columns equals the provided columns, it emits the event to sync it with every other component.
@@ -84,5 +84,5 @@ var script = defineComponent({
     }
 });
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=base-column-picker-dropdown.vue2.js.map

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?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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').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"],"names":["BaseDropdown"],"mappings":";;;;AAoCE;;;;;;;;AAQG;AACH,aAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,0BAA0B;IAChC,UAAU,EAAE,gBAAEA,iBAAY,EAAE;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,KAAK,EAAE,EAAA;AAC1B,QAAA,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AAEnB,QAAA,MAAM,uBAAuB,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;QACrF,MAAM,eAAe,GAAG,GAAG,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC;AAE3D;;;;AAIG;QACH,SAAS,yBAAyB,CAAC,MAAc,EAAA;AAC/C,YAAA,eAAe,CAAC,KAAK,GAAG,MAAM,CAAC;AAC/B,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;SAC1C;AAED;;;;AAIG;QACH,SAAS,oBAAoB,CAAC,MAAc,EAAA;AAC1C,YAAA,IAAI,KAAK,CAAC,UAAU,KAAK,MAAM,EAAE;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;AACnC,aAAA;SACF;AAED,QAAA,KAAK,CAAC,uBAAuB,EAAE,yBAAyB,CAAC,CAAC;AAC1D,QAAA,KAAK,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAAC;QAE7C,EAAE,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,SAAS,CAAC,MAAM,KAAK,eAAe,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC;AAErF;;;;;AAKG;QACH,aAAa,CAAC,MAAK;AACjB,YAAA,IAAI,eAAe,CAAC,KAAK,KAAK,uBAAuB,CAAC,KAAK,EAAE;AAC3D,gBAAA,yBAAyB,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;AAClD,aAAA;AAAM,iBAAA;AACL,gBAAA,oBAAoB,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;AAC7C,aAAA;AACH,SAAC,CAAC,CAAC;AAEH;;;;;AAKG;QACH,SAAS,UAAU,CAAC,MAAc,EAAA;AAChC,YAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC;AAC3C,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;SAC1C;QAED,OAAO;YACL,UAAU;AACV,YAAA,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;YAC7B,eAAe;SAChB,CAAC;KACH;AACF,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    @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;;;;"}

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

@@ -1,93 +1,57 @@
-import script from './base-column-picker-list.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+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 _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    "div",
-    {
-      staticClass: "x-column-picker-list x-button-group",
-      attrs: { "data-test": "column-picker-list", role: "list" },
-    },
-    [
-      _vm._l(_vm.columnsWithCssClasses, function (ref, index) {
-        var column = ref.column;
-        var cssClasses = ref.cssClasses;
-        var events = ref.events;
-        var isSelected = ref.isSelected;
-        return [
-          _c(
-            "BaseEventButton",
-            {
-              key: column,
-              staticClass: "x-column-picker-list__button x-button",
-              class: [_vm.buttonClass, cssClasses],
-              attrs: {
-                "data-test": "column-picker-button",
-                "aria-pressed": isSelected.toString(),
-                events: events,
-                "aria-label": column + " columns",
-                role: "listitem",
-              },
-            },
-            [
-              _vm._t(
-                "default",
-                function () {
-                  return [_vm._v(" " + _vm._s(column) + " ")]
-                },
-                null,
-                { column: column, isSelected: isSelected }
-              ),
-            ],
-            2
-          ),
-          index !== _vm.columnsWithCssClasses.length - 1
-            ? _vm._t("divider")
-            : _vm._e(),
-        ]
-      }),
-    ],
-    2
-  )
+const _hoisted_1 = {
+  class: "x-column-picker-list x-button-group",
+  "data-test": "column-picker-list",
+  role: "list"
 };
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_BaseEventButton = resolveComponent("BaseEventButton");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    (openBlock(true), createElementBlock(
+      Fragment,
+      null,
+      renderList(_ctx.columnsWithCssClasses, ({ column, cssClasses, events, isSelected }, index) => {
+        return openBlock(), createElementBlock(
+          Fragment,
+          { key: column },
+          [
+            createVNode(_component_BaseEventButton, {
+              class: normalizeClass(["x-column-picker-list__button x-button", [_ctx.buttonClass, cssClasses]]),
+              "data-test": "column-picker-button",
+              "aria-pressed": isSelected.toString(),
+              events,
+              "aria-label": `${column} columns`,
+              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),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ]),
+              _: 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
+          /* STABLE_FRAGMENT */
+        );
+      }),
+      128
+      /* KEYED_FRAGMENT */
+    ))
+  ]);
+}
+var baseColumnPickerList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { __vue_component__ as default };
+export { baseColumnPickerList as default };
 //# sourceMappingURL=base-column-picker-list.vue.js.map

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 v-for=\"({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses\">\n      <BaseEventButton\n        :key=\"column\"\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').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":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, watch, onBeforeMount } from 'vue';
 import { use$x } from '../../composables/use-_x.js';
-import __vue_component__ from '../base-event-button.vue.js';
+import BaseEventButton from '../base-event-button.vue.js';
 
 /**
  * Column picker list component renders a list of buttons to choose the columns number.
@@ -10,9 +10,9 @@ import __vue_component__ from '../base-event-button.vue.js';
  *
  * @public
  */
-var script = defineComponent({
+var _sfc_main = defineComponent({
     name: 'BaseColumnPickerList',
-    components: { BaseEventButton: __vue_component__ },
+    components: { BaseEventButton },
     props: {
         /** An array of numbers that represents the number of columns to render. */
         columns: {
@@ -50,7 +50,7 @@ var script = defineComponent({
         }
         watch(providedSelectedColumns, emitColumnsNumberProvided);
         watch(selectedColumns, emitUpdateModelValue);
-        $x.on('ColumnsNumberProvided').subscribe(column => (selectedColumns.value = column));
+        $x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column));
         /**
          * Synchronizes the columns number before mounting the component. If the real number of selected
          * columns equals the provided columns, it emits the event to sync it with every other component.
@@ -86,5 +86,5 @@ var script = defineComponent({
     }
 });
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=base-column-picker-list.vue2.js.map

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?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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').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"],"names":["BaseEventButton"],"mappings":";;;;AA+CE;;;;;;;AAOG;AACH,aAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,UAAU,EAAE,mBAAEA,iBAAe,EAAE;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,IAAI,EAAE,EAAA;AACnB,QAAA,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AAEnB,QAAA,MAAM,uBAAuB,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;QACrF,MAAM,eAAe,GAAG,GAAG,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC;AAE3D;;;;AAIG;QACH,SAAS,yBAAyB,CAAC,MAAc,EAAA;AAC/C,YAAA,eAAe,CAAC,KAAK,GAAG,MAAM,CAAC;AAC/B,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;SAC1C;AAED;;;;AAIG;QACH,SAAS,oBAAoB,CAAC,MAAc,EAAA;AAC1C,YAAA,IAAI,KAAK,CAAC,UAAU,KAAK,MAAM,EAAE;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;AACnC,aAAA;SACF;AAED,QAAA,KAAK,CAAC,uBAAuB,EAAE,yBAAyB,CAAC,CAAC;AAC1D,QAAA,KAAK,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAAC;QAE7C,EAAE,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,SAAS,CAAC,MAAM,KAAK,eAAe,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC;AAErF;;;;;AAKG;QACH,aAAa,CAAC,MAAK;AACjB,YAAA,IAAI,eAAe,CAAC,KAAK,KAAK,uBAAuB,CAAC,KAAK,EAAE;AAC3D,gBAAA,yBAAyB,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;AAClD,aAAA;AAAM,iBAAA;AACL,gBAAA,oBAAoB,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;AAC7C,aAAA;AACH,SAAC,CAAC,CAAC;AAEH;;;;AAIG;AACH,QAAA,MAAM,qBAAqB,GAAG,QAAQ,CAAqB,MACzD,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KAAK;YAC3B,MAAM;AACN,YAAA,UAAU,EAAE;AACV,gBAAA,CAAA,8BAAA,EAAiC,MAAM,CAAO,KAAA,CAAA;AAC9C,gBAAA,EAAE,YAAY,EAAE,eAAe,CAAC,KAAK,KAAK,MAAM,EAAE;AACnD,aAAA;AACD,YAAA,UAAU,EAAE,eAAe,CAAC,KAAK,KAAK,MAAM;AAC5C,YAAA,MAAM,EAAE;AACN,gBAAA,uBAAuB,EAAE,MAAM;AAC/B,gBAAA,qBAAqB,EAAE,MAAM;AAC9B,aAAA;SACF,CAAC,CAAC,CACJ,CAAC;QAEF,OAAO,EAAE,qBAAqB,EAAE,CAAC;KAClC;AACF,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\">\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;;;;"}

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

@@ -1,49 +1,21 @@
-import script from './base-currency.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './base-currency.vue2.js';
+import { openBlock, createElementBlock, toDisplayString, createCommentVNode } from 'vue';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.value !== undefined
-    ? _c("span", { staticClass: "x-currency" }, [_vm._v(_vm._s(_vm.currency))])
-    : _vm._e()
+const _hoisted_1 = {
+  key: 0,
+  class: "x-currency"
 };
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.value !== void 0 ? (openBlock(), createElementBlock(
+    "span",
+    _hoisted_1,
+    toDisplayString(_ctx.currency),
+    1
+    /* TEXT */
+  )) : createCommentVNode("v-if", true);
+}
+var BaseCurrency = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { __vue_component__ as default };
+export { BaseCurrency as default };
 //# sourceMappingURL=base-currency.vue.js.map