vue-web-component-wrapper/package/dist/vue-web-component-wrapper.umd.js

A Vue 3 plugin that provides a web component wrapper with styles, seamlessly integrating with Vuex, Vue Router, Vue I18n, and supporting Tailwind CSS and Sass styles.

(function(c,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],r):(c=typeof globalThis<"u"?globalThis:c||self,r(c.Vue3WebComponentWrapper={},c.Vue))})(this,function(c,r){"use strict";var te=Object.defineProperty;var se=(c,r,g)=>r in c?te(c,r,{enumerable:!0,configurable:!0,writable:!0,value:g}):c[r]=g;var E=(c,r,g)=>se(c,typeof r!="symbol"?r+"":r,g);/**
* @vue/shared v3.5.13
* (c) 2018-present Yuxi (Evan) You and Vue contributors
* @license MIT
**/process.env.NODE_ENV!=="production"&&Object.freeze({}),process.env.NODE_ENV!=="production"&&Object.freeze([]);const g=Object.assign,x=Array.isArray,q=e=>typeof e=="string",D=e=>{const a=Object.create(null);return t=>a[t]||(a[t]=e(t))},z=/-(\w)/g,L=D(e=>e.replace(z,(a,t)=>t?t.toUpperCase():"")),k=/\B([A-Z])/g,w=D(e=>e.replace(k,"-$1").toLowerCase()),C=e=>{const a=q(e)?Number(e):NaN;return isNaN(a)?e:a};/*!#__NO_SIDE_EFFECTS__*/function R(e,a,t){const s=r.defineComponent(e);class o extends j{constructor(i){super(s,i,a,t)}}return E(o,"def",s),o}const F=typeof HTMLElement<"u"?HTMLElement:class{};class j extends F{constructor(t,s={},o={shadowRoot:!0},n){super();E(this,"_instance",null);E(this,"_connected",!1);E(this,"_resolved",!1);E(this,"_numberProps",null);E(this,"_styles");E(this,"_slots",{});E(this,"_ob",null);this._def=t,this._props=s,this._config=o,this._root&&n?n(this._createVNode(),this._root):(this._config.shadowRoot!==!1&&this.attachShadow({mode:"open"}),this._def.__asyncLoader||this._resolveProps(this._def))}get _root(){return this._config.shadowRoot?this.shadowRoot:this}connectedCallback(){this._connected=!0,this._instance||(this._resolved?this._update():this._resolveDef())}disconnectedCallback(){this._connected=!1,r.nextTick(()=>{this._connected||(this._ob&&(this._ob.disconnect(),this._ob=null),r.render(null,this._root),this._instance=null)})}_resolveDef(){this._resolved=!0;for(let o=0;o<this.attributes.length;o++)this._setAttr(this.attributes[o].name);this._ob=new MutationObserver(o=>{for(const n of o)this._setAttr(n.attributeName)}),this._ob.observe(this,{attributes:!0});const t=(o,n=!1)=>{var v;const{props:i}=o,m=this._collectNestedStyles(o);let N;if(i&&!x(i))for(const f in i){const l=i[f];(l===Number||l&&l.type===Number)&&(f in this._props&&(this._props[f]=C(this._props[f])),(N||(N=Object.create(null)))[L(f)]=!0)}if(this._numberProps=N,n&&this._resolveProps(o),!this._config.shadowRoot){this._slots={};const f=l=>Array.from(l).map(p=>{var h;if(p.nodeType===Node.ELEMENT_NODE){const _=p,y=Object.fromEntries(Array.from(_.attributes).map(A=>[A.name,A.value]));return r.h(_.tagName.toLowerCase(),y,f(_.childNodes))}else if(p.nodeType===Node.TEXT_NODE)return((h=p.textContent)==null?void 0:h.trim())||null;return null}).filter(p=>p!=null);for(const l of Array.from(this.childNodes)){const p=l.nodeType===Node.ELEMENT_NODE&&l.getAttribute("slot")||"default";if(this._slots[p]||(this._slots[p]=[]),l.nodeType===Node.ELEMENT_NODE){const h=l,_=Object.fromEntries(Array.from(h.attributes).map(y=>[y.name,y.value]));this._slots[p].push(r.h(h.tagName.toLowerCase(),_,f(h.childNodes)))}else if(l.nodeType===Node.TEXT_NODE){const h=(v=l.textContent)==null?void 0:v.trim();h&&this._slots[p].push(h)}}this.replaceChildren()}this._applyStyles(m),this._update()},s=this._def.__asyncLoader;s?s().then(o=>t(o,!0)):t(this._def)}_resolveProps(t){const{props:s}=t,o=x(s)?s:Object.keys(s||{});for(const n of Object.keys(this))n[0]!=="_"&&o.includes(n)&&this._setProp(n,this[n],!0,!1);for(const n of o.map(L))Object.defineProperty(this,n,{get(){return this._getProp(n)},set(i){this._setProp(n,i)}})}_setAttr(t){let s=this.hasAttribute(t)?this.getAttribute(t):void 0;const o=L(t);this._numberProps&&this._numberProps[o]&&(s=C(s)),this._setProp(o,s,!1)}_getProp(t){return this._props[t]}_setProp(t,s,o=!0,n=!0){s!==this._props[t]&&(this._props[t]=s,n&&this._instance&&this._update(),o&&(s===!0?this.setAttribute(w(t),""):typeof s=="string"||typeof s=="number"?this.setAttribute(w(t),s+""):s||this.removeAttribute(w(t))))}_update(){r.render(this._createVNode(),this._root)}_createVNode(){const t=r.createVNode(this._def,g({},this._props),this._slots);return this._instance||(t.ce=s=>{this._instance=s,s.isCE=!0;const o=(i,m)=>{this.dispatchEvent(new CustomEvent(i,{detail:m}))};s.emit=(i,...m)=>{o(i,m),w(i)!==i&&o(w(i),m)};let n=this;for(;n=n&&(n.parentNode||n.host);)if(n instanceof j){s.parent=n._instance,s.provides=n._instance.provides;break}}),t}_applyStyles(t){t&&t.forEach(s=>{const o=document.createElement("style");o.textContent=s,this._config.nonce&&o.setAttribute("nonce",this._config.nonce),this._root.prepend(o)})}_collectNestedStyles(t){let s=t.styles??[];return t.components&&Object.values(t.components).forEach(o=>{s=s.concat(this._collectNestedStyles(o))}),s}}const $=e=>{for(;(e==null?void 0:e.nodeType)!==1;){if(!e.parentElement)throw new Error("No parent element found, the rootComponent must be wrapped in a HTML element (e.g. <template><div> app content </div></template>)");e=e.parentElement}return e};function G(e){return"on"+e.charAt(0).toUpperCase()+e.slice(1)}function X(e){return typeof e=="string"?e.replace(/:root/g,":host"):Array.isArray(e)?e.map(a=>a.replace(/:root/g,":host")):e}const M=({rootComponent:e,plugins:a,cssFrameworkStyles:t,VueDefineCustomElement:s,h:o,createApp:n,getCurrentInstance:i,elementName:m,disableRemoveStylesOnUnmount:N,disableShadowDOM:v,replaceRootWithHostInCssFramework:f,asyncInitialization:l,loaderAttribute:p,hideSlotContentUntilMounted:h,nonce:_})=>{const y=v?R:s,A=f?X(t):t,I=y({styles:[A],nonce:_,props:{...e.props,modelValue:{type:[String,Number,Boolean,Array,Object]}},emits:e==null?void 0:e.emits,setup(Z,{slots:J}){var B;const V=[...(e==null?void 0:e.emits)||[],"update:modelValue"],b=n();if(b.component("app-root",e),e.provide){const d=typeof e.provide=="function"?e.provide():e.provide;Object.keys(d).forEach(u=>{b.provide(u,d[u])})}b.mixin({mounted(){var S,P,K,U;if(((P=(S=this.$)==null?void 0:S.type)==null?void 0:P.name)==="vue-custom-element-root-component")return;const d=O=>{O!=null&&O.length&&(this.__style=document.createElement("style"),this.__style.innerText=O.join().replace(/\n/g,""),_&&this.__style.setAttribute("nonce",_),$(this.$el).append(this.__style))};if(d((K=this.$)==null?void 0:K.type.styles),this.$options.components)for(const O of Object.values(this.$options.components))d(O.styles);const u=((U=this.$el.getRootNode())==null?void 0:U.host)||$(this.$el);u&&(h&&u.querySelectorAll("[hidden]").forEach(ee=>{ee.removeAttribute("hidden")}),u.querySelectorAll(`[${p}]`).forEach(W=>{W.remove()}))},unmounted(){var d;N||(d=this.__style)==null||d.remove()}}),b.use(a);const T=i();if(Object.assign(T.appContext,b._context),Object.assign(T.provides,b._context.provides),process.env.NODE_ENV==="development"&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__){const d=document.querySelector(m);b._container=d,b._instance=T;const u={Comment:Symbol("v-cmt"),Fragment:Symbol("v-fgt"),Static:Symbol("v-stc"),Text:Symbol("v-txt")};window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("app:init",b,b.version,u),window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue=b}const Q=V==null?void 0:V.reduce((d,u)=>{const S=G(u);return d[S]=P=>{T.emit(u,P)},d},{}),Y=(B=e==null?void 0:e.namedSlots)==null?void 0:B.reduce((d,u)=>(d[u]=()=>o("slot",{name:u}),d),{});return()=>o(e,{...Z,...Q},{default:()=>o("slot"),...Y,...J})}},{shadowRoot:!v,nonce:_});return l().then(()=>I)},H=({elementName:e,rootComponent:a,plugins:t,cssFrameworkStyles:s,VueDefineCustomElement:o,h:n,createApp:i,getCurrentInstance:m,disableRemoveStylesOnUnmount:N=!1,disableShadowDOM:v=!1,replaceRootWithHostInCssFramework:f=!1,asyncInitialization:l=()=>Promise.resolve(),loaderAttribute:p="data-web-component-loader",hideSlotContentUntilMounted:h=!1,nonce:_})=>{if(!a){console.warn("No root component provided. Please provide a root component to create a web component.");return}if(!e){console.warn("No element name provided. Please provide an element name to create a web component.");return}if(!o){console.warn("No VueDefineCustomElement provided. Please provide a VueDefineCustomElement to create a web component.");return}if(!n){console.warn("No h provided. Please provide an h to create a web component.");return}if(!i){console.warn("No createApp provided. Please provide a createApp to create a web component.");return}if(!m){console.warn("No getCurrentInstance provided. Please provide a getCurrentInstance to create a web component.");return}M({rootComponent:a,plugins:t,cssFrameworkStyles:s,VueDefineCustomElement:o,h:n,createApp:i,getCurrentInstance:m,elementName:e,disableRemoveStylesOnUnmount:N,disableShadowDOM:v,replaceRootWithHostInCssFramework:f,asyncInitialization:l,loaderAttribute:p,hideSlotContentUntilMounted:h,nonce:_}).then(y=>{customElements.define(e,y)})};c.createWebComponent=H,c.default=H,c.defineCustomElement=M,c.defineCustomElementSFC=R,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});