@empathyco/x-components 6.0.0-alpha.65 → 6.0.0-alpha.67

package/docs/API-reference/api/x-components.baseteleport.md

@@ -12,10 +12,30 @@ _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    hideSiblings: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: NumberConstructor;
+        required: false;
+    };
+}, {
+    teleportTarget: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     target: {
         type: StringConstructor;
         required: true;
     };
-}>>, {}, {}>
+    hideSiblings: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: NumberConstructor;
+        required: false;
+    };
+}>>, {
+    hideSiblings: boolean;
+}, {}>
 ```

package/docs/API-reference/components/common/x-components.base-teleport.md

@@ -8,9 +8,11 @@ title: BaseTeleport
 
 ## Props
 
-| Name                | Description | Type                | Default       |
-| ------------------- | ----------- | ------------------- | ------------- |
-| <code>target</code> |             | <code>string</code> | <code></code> |
+| Name                      | Description | Type                 | Default           |
+| ------------------------- | ----------- | -------------------- | ----------------- |
+| <code>target</code>       |             | <code>string</code>  | <code></code>     |
+| <code>hideSiblings</code> |             | <code>boolean</code> | <code>true</code> |
+| <code>position</code>     |             | <code>number</code>  | <code></code>     |
 
 ## Slots
 

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"target\">\n    <div class=\"x-base-teleport\">\n      <slot></slot>\n    </div>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    target: {\n      type: String,\n      required: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport) > *:not(.x-base-teleport) {\n  display: none;\n}\n</style>\n"],"names":["_openBlock","_createBlock","_Teleport","_createElementVNode"],"mappings":";;;;;;AAEI,SAAA,WAAA,CAAA,IAAA,EAEM,QAFN,MAEM,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SADJA,SAAa,EAAA,EAAAC,WAAA,CAAAC,QAAA,EAAA,EAAA,EAAA,EAAA,IAAA,CAAA,MAAA,EAAA,EAAA;AAAA,IAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;;;;;;;;;"}
+{"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"`.${teleportTarget}`\">\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    target: {\n      type: String,\n      required: true,\n    },\n    hideSiblings: {\n      type: Boolean,\n      default: true,\n    },\n    position: {\n      type: Number,\n      required: false,\n    },\n  },\n  setup(props) {\n    const parentElement = document.querySelector(props.target)\n\n    const teleportTarget = computed(() => `x-base-teleport--${props.target.replace(/[.#]/g, '')}`)\n\n    if (parentElement) {\n      const newTeleportElement = document.createElement('div')\n      newTeleportElement.classList.add(teleportTarget.value)\n      newTeleportElement.classList.add('x-base-teleport')\n      if (props.hideSiblings) {\n        newTeleportElement.classList.add('x-base-teleport--hide-siblings')\n      }\n\n      const children = parentElement.children\n      const position = props.position ?? -1\n\n      if (position >= children.length || position === -1) {\n        parentElement.appendChild(newTeleportElement)\n      } else {\n        parentElement.insertBefore(newTeleportElement, children[position])\n      }\n    }\n\n    return {\n      teleportTarget,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport--hide-siblings) > *:not(.x-base-teleport) {\n  display: none;\n}\n</style>\n"],"names":["teleportTarget"],"mappings":";;;;;AACe,SAAA,WAAA,CAAMA,IAAc,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;;IAC/B,EAAa,EAAA,CAAA,CAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,GAAA,EAAA;;;;;;;;"}

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

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 
 var _sfc_main = defineComponent({
     name: 'BaseTeleport',
@@ -7,6 +7,37 @@ var _sfc_main = defineComponent({
             type: String,
             required: true,
         },
+        hideSiblings: {
+            type: Boolean,
+            default: true,
+        },
+        position: {
+            type: Number,
+            required: false,
+        },
+    },
+    setup(props) {
+        const parentElement = document.querySelector(props.target);
+        const teleportTarget = computed(() => `x-base-teleport--${props.target.replace(/[.#]/g, '')}`);
+        if (parentElement) {
+            const newTeleportElement = document.createElement('div');
+            newTeleportElement.classList.add(teleportTarget.value);
+            newTeleportElement.classList.add('x-base-teleport');
+            if (props.hideSiblings) {
+                newTeleportElement.classList.add('x-base-teleport--hide-siblings');
+            }
+            const children = parentElement.children;
+            const position = props.position ?? -1;
+            if (position >= children.length || position === -1) {
+                parentElement.appendChild(newTeleportElement);
+            }
+            else {
+                parentElement.insertBefore(newTeleportElement, children[position]);
+            }
+        }
+        return {
+            teleportTarget,
+        };
     },
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"target\">\n    <div class=\"x-base-teleport\">\n      <slot></slot>\n    </div>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    target: {\n      type: String,\n      required: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport) > *:not(.x-base-teleport) {\n  display: none;\n}\n</style>\n"],"names":[],"mappings":";;AAWA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"`.${teleportTarget}`\">\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    target: {\n      type: String,\n      required: true,\n    },\n    hideSiblings: {\n      type: Boolean,\n      default: true,\n    },\n    position: {\n      type: Number,\n      required: false,\n    },\n  },\n  setup(props) {\n    const parentElement = document.querySelector(props.target)\n\n    const teleportTarget = computed(() => `x-base-teleport--${props.target.replace(/[.#]/g, '')}`)\n\n    if (parentElement) {\n      const newTeleportElement = document.createElement('div')\n      newTeleportElement.classList.add(teleportTarget.value)\n      newTeleportElement.classList.add('x-base-teleport')\n      if (props.hideSiblings) {\n        newTeleportElement.classList.add('x-base-teleport--hide-siblings')\n      }\n\n      const children = parentElement.children\n      const position = props.position ?? -1\n\n      if (position >= children.length || position === -1) {\n        parentElement.appendChild(newTeleportElement)\n      } else {\n        parentElement.insertBefore(newTeleportElement, children[position])\n      }\n    }\n\n    return {\n      teleportTarget,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport--hide-siblings) > *:not(.x-base-teleport) {\n  display: none;\n}\n</style>\n"],"names":[],"mappings":";;AASA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,KAAK;AAChB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;QACT,MAAM,aAAY,GAAI,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAA,CAAA;QAEzD,MAAM,iBAAiB,QAAQ,CAAC,MAAM,oBAAoB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA,CAAE,CAAA,CAAA;AAE7F,QAAA,IAAI,aAAa,EAAE;YACjB,MAAM,kBAAmB,GAAE,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAA,CAAA;YACvD,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,CAAA,CAAA;AACrD,YAAA,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAA,CAAA;YAClD,IAAI,KAAK,CAAC,YAAY,EAAE;AACtB,gBAAA,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,gCAAgC,CAAA,CAAA;AACnE,aAAA;AAEA,YAAA,MAAM,QAAS,GAAE,aAAa,CAAC,QAAO,CAAA;YACtC,MAAM,QAAO,GAAI,KAAK,CAAC,QAAS,IAAG,CAAC,CAAA,CAAA;YAEpC,IAAI,YAAY,QAAQ,CAAC,UAAU,QAAS,KAAI,CAAC,CAAC,EAAE;AAClD,gBAAA,aAAa,CAAC,WAAW,CAAC,kBAAkB,CAAA,CAAA;AAC5C,aAAA;AAAK,iBAAA;gBACL,aAAa,CAAC,YAAY,CAAC,kBAAkB,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA,CAAA;AACnE,aAAA;AACF,SAAA;QAEA,OAAO;YACL,cAAc;SAChB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1,6 +1,6 @@
 import injectCss from '../../tools/inject-css.js';
 
-var css = ":has(>.x-base-teleport)>:not(.x-base-teleport){display:none}";
+var css = ":has(>.x-base-teleport--hide-siblings)>:not(.x-base-teleport){display:none}";
 injectCss(css);
 
 export { css, css as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.65",
+  "version": "6.0.0-alpha.67",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -96,7 +96,7 @@
   "devDependencies": {
     "@badeball/cypress-cucumber-preprocessor": "20.0.0",
     "@bahmutov/cypress-esbuild-preprocessor": "2.2.0",
-    "@empathyco/x-tailwindcss": "^2.0.0-alpha.6",
+    "@empathyco/x-tailwindcss": "^2.0.0-alpha.7",
     "@microsoft/api-documenter": "7.23.0",
     "@microsoft/api-extractor": "7.39.0",
     "@testing-library/jest-dom": "5.17.0",
@@ -143,5 +143,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "c031e4d607c1bcb0b450b12db03b257546b1ff99"
+  "gitHead": "3967b6aad2dd300224dad3e72d77fca12cd68e38"
 }

package/report/x-components.api.json

@@ -9999,7 +9999,34 @@
             },
             {
               "kind": "Content",
-              "text": ";\n        required: true;\n    };\n}, unknown, unknown, {}, {}, import(\"vue\")."
+              "text": ";\n        required: true;\n    };\n    hideSiblings: {\n        type: "
+            },
+            {
+              "kind": "Reference",
+              "text": "BooleanConstructor",
+              "canonicalReference": "!BooleanConstructor:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n        default: boolean;\n    };\n    position: {\n        type: "
+            },
+            {
+              "kind": "Reference",
+              "text": "NumberConstructor",
+              "canonicalReference": "!NumberConstructor:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n        required: false;\n    };\n}, {\n    teleportTarget: import(\"vue\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "ComputedRef",
+              "canonicalReference": "@vue/reactivity!ComputedRef:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<string>;\n}, unknown, {}, {}, import(\"vue\")."
             },
             {
               "kind": "Reference",
@@ -10053,7 +10080,25 @@
             },
             {
               "kind": "Content",
-              "text": ";\n        required: true;\n    };\n}>>, {}, {}>"
+              "text": ";\n        required: true;\n    };\n    hideSiblings: {\n        type: "
+            },
+            {
+              "kind": "Reference",
+              "text": "BooleanConstructor",
+              "canonicalReference": "!BooleanConstructor:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n        default: boolean;\n    };\n    position: {\n        type: "
+            },
+            {
+              "kind": "Reference",
+              "text": "NumberConstructor",
+              "canonicalReference": "!NumberConstructor:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n        required: false;\n    };\n}>>, {\n    hideSiblings: boolean;\n}, {}>"
             }
           ],
           "fileUrlPath": "dist/types/components/base-teleport.vue.d.ts",
@@ -10062,7 +10107,7 @@
           "name": "BaseTeleport",
           "variableTypeTokenRange": {
             "startIndex": 1,
-            "endIndex": 18
+            "endIndex": 28
           }
         },
         {

package/report/x-components.api.md

@@ -1480,12 +1480,32 @@ target: {
 type: StringConstructor;
 required: true;
 };
-}, unknown, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+hideSiblings: {
+type: BooleanConstructor;
+default: boolean;
+};
+position: {
+type: NumberConstructor;
+required: false;
+};
+}, {
+teleportTarget: ComputedRef<string>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
 target: {
 type: StringConstructor;
 required: true;
 };
-}>>, {}, {}>;
+hideSiblings: {
+type: BooleanConstructor;
+default: boolean;
+};
+position: {
+type: NumberConstructor;
+required: false;
+};
+}>>, {
+hideSiblings: boolean;
+}, {}>;
 
 // @public
 export const BaseTogglePanel: DefineComponent<    {

package/types/components/base-teleport.vue.d.ts

@@ -3,11 +3,31 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    hideSiblings: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: NumberConstructor;
+        required: false;
+    };
+}, {
+    teleportTarget: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     target: {
         type: StringConstructor;
         required: true;
     };
-}>>, {}, {}>;
+    hideSiblings: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: NumberConstructor;
+        required: false;
+    };
+}>>, {
+    hideSiblings: boolean;
+}, {}>;
 export default _default;
 //# sourceMappingURL=base-teleport.vue?vue&type=script&lang.d.ts.map

package/types/components/base-teleport.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-teleport.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-teleport.vue?vue&type=script&lang.ts"],"names":[],"mappings":";;;;;;;;;;;AAGA,wBAQE"}
+{"version":3,"file":"base-teleport.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-teleport.vue?vue&type=script&lang.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBA2CE"}