@empathyco/x-components 6.0.0-alpha.18 → 6.0.0-alpha.181

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

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

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

@@ -1,55 +1,51 @@
-import { defineComponent, ref } from 'vue';
+import { defineComponent, computed } from 'vue';
 
-/**
- * Basic switch component to handle boolean values. This component receives
- * its selected state using a prop, and emits a Vue event whenever the user
- * clicks it.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'BaseSwitch',
-    /**
-     * The selected value of the switch.
-     *
-     * @public
-     */
-    props: {
-        modelValue: {
-            type: Boolean,
-            default: false
-        }
-    },
-    emits: ['update:modelValue'],
-    setup(props, { emit }) {
-        /**
-         * Dynamic CSS classes to add to the switch component
-         * depending on its internal state.
-         *
-         * @returns A boolean dictionary with dynamic CSS classes.
-         * @internal
-         */
-        const cssClasses = ref({
-            'x-switch--is-selected x-selected': props.modelValue
-        });
-        /**
-         * Emits an event with the new value of the switch.
-         *
-         * @internal
-         */
-        const toggle = () => {
-            const newValue = !props.modelValue;
-            cssClasses.value = {
-                'x-switch--is-selected': newValue,
-                'x-selected': newValue
-            };
-            emit('update:modelValue', newValue);
-        };
-        return {
-            cssClasses,
-            toggle
-        };
-    }
+/**
+ * Basic switch component to handle boolean values. This component receives
+ * its selected state using a prop, and emits a Vue event whenever the user
+ * clicks it.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'BaseSwitch',
+    /**
+     * The selected value of the switch.
+     *
+     * @public
+     */
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    emits: ['update:modelValue'],
+    setup(props, { emit }) {
+        /**
+         * Dynamic CSS classes to add to the switch component
+         * depending on its internal state.
+         *
+         * @returns A boolean dictionary with dynamic CSS classes.
+         * @internal
+         */
+        const cssClasses = computed(() => ({
+            'x-switch--is-selected x-selected': props.modelValue,
+        }));
+        /**
+         * Emits an event with the new value of the switch.
+         *
+         * @internal
+         */
+        const toggle = () => {
+            const newValue = !props.modelValue;
+            emit('update:modelValue', newValue);
+        };
+        return {
+            cssClasses,
+            toggle,
+        };
+    },
 });
 
 export { _sfc_main as default };

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

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

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

@@ -0,0 +1,17 @@
+import _sfc_main from './base-teleport.vue2.js';
+import { openBlock, createBlock, Teleport, renderSlot, createCommentVNode } from 'vue';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.teleportHost ? (openBlock(), createBlock(Teleport, {
+    key: 0,
+    to: _ctx.teleportHost.shadowRoot ?? _ctx.teleportHost,
+    disabled: _ctx.disabled
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 8, ["to", "disabled"])) : createCommentVNode("v-if", true);
+}
+var baseTeleport = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { baseTeleport as default };
+//# sourceMappingURL=base-teleport.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  onUnmounted,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    /** The element or css selector to which the component will be teleported. */\n    target: {\n      type: [String, Object] as PropType<string | Element>,\n      required: true,\n    },\n    /**\n     * The position relative to the target\n     * - `beforebegin`: Before the target element.\n     * - `afterbegin`: Inside the target element, before its first child.\n     * - `beforeend`: Inside the target element, after its last child.\n     * - `afterend`: After the target element.\n     * - `onlychild`: Adds it as child and hides all other children of the target element.\n     */\n    position: {\n      type: String as PropType<\n        'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n      >,\n      default: 'onlychild',\n    },\n    /** If disabled, the slot content will not be teleported */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /** Styles for the teleport (content container) */\n    hostStyle: Object as PropType<string | CSSStyleDeclaration>,\n  },\n  setup(props) {\n    if (typeof document === 'undefined') {\n      return { teleportHost: ref<HTMLElement>() }\n    }\n\n    const instance = getCurrentInstance()\n    /** Hook where the slot content will be teleported to. */\n    const teleportHost = ref<HTMLElement>()\n    /** The page element where the teleport host will be inserted. */\n    const targetElement = ref<HTMLElement>()\n    let isIsolated = false\n\n    // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n    if (instance?.appContext.app._container) {\n      createHost()\n    } else {\n      afterAppMount(createHost)\n    }\n\n    const targetAddedObserver = new MutationObserver(targetAdded)\n    const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n    onUnmounted(() => {\n      if (isIsolated && teleportHost.value) {\n        ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      targetAddedObserver.disconnect()\n      targetRemovedObserver.disconnect()\n      teleportHost.value?.remove()\n    })\n\n    // Handles target prop changes and init the observers accordingly.\n    watch(\n      () => props.target,\n      newTarget => {\n        targetAddedObserver.disconnect()\n        targetRemovedObserver.disconnect()\n        const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n        if (target?.isConnected) {\n          targetAdded()\n        } else {\n          targetRemoved()\n        }\n      },\n      { immediate: true },\n    )\n\n    // Updates the teleport host when props change.\n    watchEffect(() => {\n      if (!teleportHost.value) {\n        return\n      }\n      if (props.disabled) {\n        teleportHost.value.remove()\n        return\n      }\n      teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n      if (!targetElement.value) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.value.insertAdjacentElement(position, teleportHost.value)\n    })\n\n    /* Update the host inline styles when it changes */\n    watchEffect(() => {\n      if (teleportHost.value && props.hostStyle) {\n        if (typeof props.hostStyle === 'string') {\n          teleportHost.value.style.cssText = props.hostStyle\n        } else {\n          Object.assign(teleportHost.value.style, props.hostStyle)\n        }\n      }\n    })\n\n    /** Checks if the target element exists in the DOM and updates the observers */\n    function targetAdded() {\n      let element: string | Element | null = props.target\n      if (typeof element === 'string') {\n        element = document.querySelector(element)\n      }\n      if (element instanceof HTMLElement && element.isConnected) {\n        targetAddedObserver.disconnect()\n        targetElement.value = element\n        while (element.parentElement) {\n          element = element.parentElement\n          targetRemovedObserver.observe(element, { childList: true })\n        }\n      }\n    }\n\n    /** Checks if the target was disconnected from the DOM and updates the observers */\n    function targetRemoved() {\n      if (targetElement.value && !targetElement.value.isConnected) {\n        targetRemovedObserver.disconnect()\n        targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n        targetElement.value = undefined\n      }\n    }\n\n    /** Creates and sets the teleport host element */\n    function createHost() {\n      teleportHost.value = document.createElement('div')\n      isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n      if (isIsolated) {\n        teleportHost.value.attachShadow({ mode: 'open' })\n        ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n      }\n    }\n\n    function afterAppMount(fn: () => void) {\n      onMounted(() => setTimeout(fn, 0))\n    }\n\n    return { teleportHost }\n  },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nif (typeof document !== 'undefined') {\n  const css = document.createElement('style')\n  css.textContent =\n    ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n  document.head?.appendChild(css) ||\n    document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe BaseTeleport component allows you to teleport its slot content to a specified target element in\nthe DOM. It provides flexibility in positioning the content relative to the target element and\nsupports shadow DOM integration.\n\n### Basic example\n\nTeleport content to a specific element in the DOM:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\">\n    <div>This content will be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Positioning options\n\nTeleport content inside the target element, before its first child:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" position=\"afterbegin\">\n    <div>Teleported content at the beginning.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Disabled Teleport\n\nPrevent teleporting the content:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" :disabled=\"true\">\n    <div>This content will not be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Notes\n\n- When using the `onlychild` position, all other children of the target element will be hidden.\n- The component supports shadow DOM integration, automatically handling style injection. Anyway, Empathy's custom CSS\n  injector is required. Teleport depends on it to add the styles.\n</docs>\n"],"names":["_openBlock","_createBlock","_Teleport","_renderSlot","_createCommentVNode"],"mappings":";;;;;AACkB,EAAA,OAAA,IAAA,CAAA,YAAA,IAAAA,SAAA,EAAA,EAAhBC,WAEW,CAAAC,QAAA,EAAA;AAAA,IAHb,GAAA,EAAA,CAAA;AAAA,IACiC,EAAA,EAAI,kBAAa,UAAc,IAAA,IAAA,CAAA,YAAA;AAAA,IAAe,QAAA,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;IAC3EC,UAAa,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,GAFjB,EAAA,CAAA,EAAA,CAAA,IAAA,EAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport v-if=\"teleportHost\" :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport {\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  onMounted,\n  onUnmounted,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    /** The element or css selector to which the component will be teleported. */\n    target: {\n      type: [String, Object] as PropType<string | Element>,\n      required: true,\n    },\n    /**\n     * The position relative to the target\n     * - `beforebegin`: Before the target element.\n     * - `afterbegin`: Inside the target element, before its first child.\n     * - `beforeend`: Inside the target element, after its last child.\n     * - `afterend`: After the target element.\n     * - `onlychild`: Adds it as child and hides all other children of the target element.\n     */\n    position: {\n      type: String as PropType<\n        'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n      >,\n      default: 'onlychild',\n    },\n    /** If disabled, the slot content will not be teleported */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /** Styles for the teleport (content container) */\n    hostStyle: Object as PropType<string | CSSStyleDeclaration>,\n  },\n  setup(props) {\n    if (typeof document === 'undefined') {\n      return { teleportHost: ref<HTMLElement>() }\n    }\n\n    const instance = getCurrentInstance()\n    /** Hook where the slot content will be teleported to. */\n    const teleportHost = ref<HTMLElement>()\n    /** The page element where the teleport host will be inserted. */\n    const targetElement = ref<HTMLElement>()\n    let isIsolated = false\n\n    // Before doing app.mount it is unknown if it will be mounted in a shadow so we need to wait.\n    if (instance?.appContext.app._container) {\n      createHost()\n    } else {\n      afterAppMount(createHost)\n    }\n\n    const targetAddedObserver = new MutationObserver(targetAdded)\n    const targetRemovedObserver = new MutationObserver(targetRemoved)\n\n    onUnmounted(() => {\n      if (isIsolated && teleportHost.value) {\n        ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      targetAddedObserver.disconnect()\n      targetRemovedObserver.disconnect()\n      teleportHost.value?.remove()\n    })\n\n    // Handles target prop changes and init the observers accordingly.\n    watch(\n      () => props.target,\n      newTarget => {\n        targetAddedObserver.disconnect()\n        targetRemovedObserver.disconnect()\n        const target = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget\n        if (target?.isConnected) {\n          targetAdded()\n        } else {\n          targetRemoved()\n        }\n      },\n      { immediate: true },\n    )\n\n    // Updates the teleport host when props change.\n    watchEffect(() => {\n      if (!teleportHost.value) {\n        return\n      }\n      if (props.disabled) {\n        teleportHost.value.remove()\n        return\n      }\n      teleportHost.value.className = `x-base-teleport x-base-teleport--${props.position}`\n\n      if (!targetElement.value) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.value.insertAdjacentElement(position, teleportHost.value)\n    })\n\n    /* Update the host inline styles when it changes */\n    watchEffect(() => {\n      if (teleportHost.value && props.hostStyle) {\n        if (typeof props.hostStyle === 'string') {\n          teleportHost.value.style.cssText = props.hostStyle\n        } else {\n          Object.assign(teleportHost.value.style, props.hostStyle)\n        }\n      }\n    })\n\n    /** Checks if the target element exists in the DOM and updates the observers */\n    function targetAdded() {\n      let element: string | Element | null = props.target\n      if (typeof element === 'string') {\n        element = document.querySelector(element)\n      }\n      if (element instanceof HTMLElement && element.isConnected) {\n        targetAddedObserver.disconnect()\n        targetElement.value = element\n        while (element.parentElement) {\n          element = element.parentElement\n          targetRemovedObserver.observe(element, { childList: true })\n        }\n      }\n    }\n\n    /** Checks if the target was disconnected from the DOM and updates the observers */\n    function targetRemoved() {\n      if (targetElement.value && !targetElement.value.isConnected) {\n        targetRemovedObserver.disconnect()\n        targetAddedObserver.observe(document.body, { childList: true, subtree: true })\n        targetElement.value = undefined\n      }\n    }\n\n    /** Creates and sets the teleport host element */\n    function createHost() {\n      teleportHost.value = document.createElement('div')\n      isIsolated = instance?.appContext.app._container instanceof ShadowRoot\n      if (isIsolated) {\n        teleportHost.value.attachShadow({ mode: 'open' })\n        ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)\n      }\n    }\n\n    function afterAppMount(fn: () => void) {\n      onMounted(() => setTimeout(fn, 0))\n    }\n\n    return { teleportHost }\n  },\n})\n\n/** Teleport host styles should be injected outside our shadowRoots */\nif (typeof document !== 'undefined') {\n  const css = document.createElement('style')\n  css.textContent =\n    ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'\n  document.head?.appendChild(css) ||\n    document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))\n}\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nThe BaseTeleport component allows you to teleport its slot content to a specified target element in\nthe DOM. It provides flexibility in positioning the content relative to the target element and\nsupports shadow DOM integration.\n\n### Basic example\n\nTeleport content to a specific element in the DOM:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\">\n    <div>This content will be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Positioning options\n\nTeleport content inside the target element, before its first child:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" position=\"afterbegin\">\n    <div>Teleported content at the beginning.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Disabled Teleport\n\nPrevent teleporting the content:\n\n```vue\n<template>\n  <BaseTeleport target=\"#my-target\" :disabled=\"true\">\n    <div>This content will not be teleported.</div>\n  </BaseTeleport>\n</template>\n```\n\n### Notes\n\n- When using the `onlychild` position, all other children of the target element will be hidden.\n- The component supports shadow DOM integration, automatically handling style injection. Anyway, Empathy's custom CSS\n  injector is required. Teleport depends on it to add the styles.\n</docs>\n"],"names":[],"mappings":";;AAmBA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAA+B;AACpD,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;;;;AAOE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAEL;AACD,YAAA,OAAO,EAAE,WAAW;AACrB,SAAA;;AAED,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;;AAED,QAAA,SAAS,EAAE,MAAgD;AAC5D,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,IAAI,OAAO,QAAS,KAAI,WAAW,EAAE;AACnC,YAAA,OAAO,EAAE,YAAY,EAAE,GAAG,EAAgB,EAAA,CAAA;SAC5C;AAEA,QAAA,MAAM,QAAO,GAAI,kBAAkB,EAAC,CAAA;;AAEpC,QAAA,MAAM,YAAW,GAAI,GAAG,EAAc,CAAA;;AAEtC,QAAA,MAAM,aAAY,GAAI,GAAG,EAAc,CAAA;QACvC,IAAI,UAAW,GAAE,KAAI,CAAA;;QAGrB,IAAI,QAAQ,EAAE,UAAU,CAAC,GAAG,CAAC,UAAU,EAAE;AACvC,YAAA,UAAU,EAAC,CAAA;SACX;aAAK;YACL,aAAa,CAAC,UAAU,CAAA,CAAA;SAC1B;AAEA,QAAA,MAAM,mBAAkB,GAAI,IAAI,gBAAgB,CAAC,WAAW,CAAA,CAAA;AAC5D,QAAA,MAAM,qBAAoB,GAAI,IAAI,gBAAgB,CAAC,aAAa,CAAA,CAAA;QAEhE,WAAW,CAAC,MAAM;AAChB,YAAA,IAAI,UAAW,IAAG,YAAY,CAAC,KAAK,EAAE;gBAClC,MAAc,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAA,CAAA;aACxE;AACF,SAAC,CAAA,CAAA;QAED,eAAe,CAAC,MAAM;YACpB,mBAAmB,CAAC,UAAU,EAAC,CAAA;YAC/B,qBAAqB,CAAC,UAAU,EAAC,CAAA;AACjC,YAAA,YAAY,CAAC,KAAK,EAAE,MAAM,EAAC,CAAA;AAC7B,SAAC,CAAA,CAAA;;QAGD,KAAK,CACH,MAAM,KAAK,CAAC,MAAM,EAClB,SAAU,IAAG;YACX,mBAAmB,CAAC,UAAU,EAAC,CAAA;YAC/B,qBAAqB,CAAC,UAAU,EAAC,CAAA;AACjC,YAAA,MAAM,MAAK,GAAI,OAAO,cAAc,WAAW,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAE,GAAE,SAAQ,CAAA;AAC3F,YAAA,IAAI,MAAM,EAAE,WAAW,EAAE;AACvB,gBAAA,WAAW,EAAC,CAAA;aACZ;iBAAK;AACL,gBAAA,aAAa,EAAC,CAAA;aAChB;AACF,SAAC,EACD,EAAE,SAAS,EAAE,MAAM,CACrB,CAAA;;QAGA,WAAW,CAAC,MAAM;AAChB,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;gBACvB,OAAK;aACP;AACA,YAAA,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,gBAAA,YAAY,CAAC,KAAK,CAAC,MAAM,EAAC,CAAA;gBAC1B,OAAK;aACP;YACA,YAAY,CAAC,KAAK,CAAC,SAAU,GAAE,oCAAoC,KAAK,CAAC,QAAQ,CAAA,CAAC,CAAA;AAElF,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE;gBACxB,OAAO,CAAC,IAAI,CAAC,CAAA,8BAAA,EAAiC,KAAK,CAAC,MAAM,CAAc,YAAA,CAAA,CAAA,CAAA;gBACxE,OAAK;aACP;AACA,YAAA,MAAM,QAAO,GAAI,KAAK,CAAC,QAAS,KAAI,WAAU,GAAI,WAAY,GAAE,KAAK,CAAC,QAAO,CAAA;YAC7E,aAAa,CAAC,KAAK,CAAC,qBAAqB,CAAC,QAAQ,EAAE,YAAY,CAAC,KAAK,CAAA,CAAA;AACxE,SAAC,CAAA,CAAA;;QAGD,WAAW,CAAC,MAAM;YAChB,IAAI,YAAY,CAAC,KAAI,IAAK,KAAK,CAAC,SAAS,EAAE;AACzC,gBAAA,IAAI,OAAO,KAAK,CAAC,SAAQ,KAAM,QAAQ,EAAE;oBACvC,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,OAAM,GAAI,KAAK,CAAC,SAAQ,CAAA;iBACjD;qBAAK;AACL,oBAAA,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA,CAAA;iBACzD;aACF;AACF,SAAC,CAAA,CAAA;;AAGD,QAAA,SAAS,WAAW,GAAA;AAClB,YAAA,IAAI,OAAO,GAA4B,KAAK,CAAC,MAAK,CAAA;AAClD,YAAA,IAAI,OAAO,OAAQ,KAAI,QAAQ,EAAE;AAC/B,gBAAA,UAAU,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAA,CAAA;aAC1C;YACA,IAAI,OAAM,YAAa,WAAU,IAAK,OAAO,CAAC,WAAW,EAAE;gBACzD,mBAAmB,CAAC,UAAU,EAAC,CAAA;AAC/B,gBAAA,aAAa,CAAC,KAAM,GAAE,OAAM,CAAA;AAC5B,gBAAA,OAAO,OAAO,CAAC,aAAa,EAAE;AAC5B,oBAAA,OAAQ,GAAE,OAAO,CAAC,aAAY,CAAA;oBAC9B,qBAAqB,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAG,EAAG,CAAA,CAAA;iBAC5D;aACF;SACF;;AAGA,QAAA,SAAS,aAAa,GAAA;YACpB,IAAI,aAAa,CAAC,KAAI,IAAK,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,EAAE;gBAC3D,qBAAqB,CAAC,UAAU,EAAC,CAAA;AACjC,gBAAA,mBAAmB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,CAAA,CAAA;AAC7E,gBAAA,aAAa,CAAC,KAAI,GAAI,SAAQ,CAAA;aAChC;SACF;;AAGA,QAAA,SAAS,UAAU,GAAA;YACjB,YAAY,CAAC,QAAQ,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAA,CAAA;YACjD,UAAW,GAAE,QAAQ,EAAE,UAAU,CAAC,GAAG,CAAC,UAAS,YAAa,UAAS,CAAA;YACrE,IAAI,UAAU,EAAE;gBACd,YAAY,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAA,CAC/C;gBAAC,MAAc,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAA,CAAA;aACrE;SACF;QAEA,SAAS,aAAa,CAAC,EAAc,EAAA;YACnC,SAAS,CAAC,MAAM,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,CAAA,CAAA;SACnC;QAEA,OAAO,EAAE,YAAa,EAAA,CAAA;KACvB;AACF,CAAA,CAAA,CAAA;AAED;AACA,IAAI,OAAO,QAAS,KAAI,WAAW,EAAE;IACnC,MAAM,GAAI,GAAE,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAA,CAAA;AAC1C,IAAA,GAAG,CAAC,WAAY;AACd,QAAA,kFAAiF,CAAA;AACnF,IAAA,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC,GAAG;AAC5B,QAAA,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA,CAAA;AACtF;;;;"}

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

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

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

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

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

@@ -1,81 +1,81 @@
 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';
 
-/**
- * The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to
- * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the
- * selected number of columns to the grid. It also allows to customize the grid items using the
- * available `scopedSlots`.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'BaseVariableColumnGrid',
-    components: {
-        BaseGrid
-    },
-    props: {
-        /**
-         * Animation component that will be used to animate the grid.
-         *
-         * @public
-         */
-        animation: {
-            type: AnimationProp,
-            default: 'ul'
-        },
-        /**
-         * The list of items to be rendered.
-         *
-         * @remarks The items must have an id property.
-         *
-         * @public
-         */
-        items: Array,
-        /**
-         * The columns to render by default in the grid. This property is used when the user has not
-         * selected any value in the column picker.
-         *
-         * @internal
-         */
-        columns: {
-            type: Number,
-            default: 0
-        }
-    },
-    setup(props, { slots }) {
-        const bus = useXBus();
-        /**
-         * The number of columns provided by a user interaction.
-         *
-         * @internal
-         */
-        const providedColumns = ref(null);
-        /**
-         * The number of columns to render in the grid.
-         *
-         * @returns The number of columns.
-         *
-         * @internal
-         */
-        const columnsToRender = computed(() => providedColumns.value === null ? props.columns : providedColumns.value);
-        /**
-         * Handler to update the number of columns when the user selects a new value.
-         *
-         * @param newColumns - The new columns value.
-         *
-         * @internal
-         */
-        bus
-            .on('ColumnsNumberProvided', false)
-            .subscribe(newColumns => (providedColumns.value = newColumns));
-        return {
-            columnsToRender,
-            slots
-        };
-    }
+/**
+ * The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to
+ * the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the
+ * selected number of columns to the grid. It also allows to customize the grid items using the
+ * available `scopedSlots`.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'BaseVariableColumnGrid',
+    components: {
+        BaseGrid,
+    },
+    props: {
+        /**
+         * Animation component that will be used to animate the grid.
+         *
+         * @public
+         */
+        animation: {
+            type: AnimationProp,
+            default: 'ul',
+        },
+        /**
+         * The list of items to be rendered.
+         *
+         * @remarks The items must have an id property.
+         *
+         * @public
+         */
+        items: Array,
+        /**
+         * The columns to render by default in the grid. This property is used when the user has not
+         * selected any value in the column picker.
+         *
+         * @internal
+         */
+        columns: {
+            type: Number,
+            default: 0,
+        },
+    },
+    setup(props, { slots }) {
+        const bus = useXBus();
+        /**
+         * The number of columns provided by a user interaction.
+         *
+         * @internal
+         */
+        const providedColumns = ref(null);
+        /**
+         * The number of columns to render in the grid.
+         *
+         * @returns The number of columns.
+         *
+         * @internal
+         */
+        const columnsToRender = computed(() => providedColumns.value === null ? props.columns : providedColumns.value);
+        /**
+         * Handler to update the number of columns when the user selects a new value.
+         *
+         * @param newColumns - The new columns value.
+         *
+         * @internal
+         */
+        bus
+            .on('ColumnsNumberProvided', false)
+            .subscribe(newColumns => (providedColumns.value = newColumns));
+        return {
+            columnsToRender,
+            slots,
+        };
+    },
 });
 
 export { _sfc_main as default };