diff --git a/dist/alpine-autosize.js b/dist/alpine-autosize.js index 4d1417b..4d6cd8f 100644 --- a/dist/alpine-autosize.js +++ b/dist/alpine-autosize.js @@ -7,6 +7,10 @@ Alpine.directive('autosize', (el, {}, { cleanup }) => { + if (el.hasAttribute('wire:model')) { + el.setAttribute('wire:ignore', ''); + } + const previousResizeValue = el.style.resize; el.style.resize = 'none'; const previousMinHeight = el.style.minHeight; diff --git a/dist/alpine-autosize.js.map b/dist/alpine-autosize.js.map index 573ed5b..576dde4 100644 --- a/dist/alpine-autosize.js.map +++ b/dist/alpine-autosize.js.map @@ -1 +1 @@ -{"version":3,"file":"alpine-autosize.js","sources":["../src/index.js","../builds/cdn.js"],"sourcesContent":["function Autosize(Alpine) {\n Alpine.directive('autosize', (el, {}, { cleanup }) => {\n const previousResizeValue = el.style.resize;\n el.style.resize = 'none';\n\n const previousMinHeight = el.style.minHeight;\n el.style.minHeight = el.getBoundingClientRect().height + 'px';\n\n const handler = (event) => {\n const element = event.target;\n element.style.height = '4px';\n element.style.height = `${element.scrollHeight}px`;\n };\n\n handler({ target: el });\n\n el.addEventListener('input', handler);\n\n cleanup(() => {\n el.style.resize = previousResizeValue;\n el.style.minHeight = previousMinHeight;\n el.removeEventListener('input', handler);\n });\n });\n}\n\nexport default Autosize;\n","import autosize from '../src/index.js';\n\ndocument.addEventListener('alpine:init', () => {\n autosize(window.Alpine);\n});\n"],"names":["Autosize","Alpine","directive","el","cleanup","previousResizeValue","style","resize","previousMinHeight","minHeight","getBoundingClientRect","height","handler","event","element","target","scrollHeight","addEventListener","removeEventListener","document","autosize","window"],"mappings":";;;;;IAAA,SAASA,QAAT,CAAkBC,MAAlB,EAA0B;IACtBA,EAAAA,MAAM,CAACC,SAAP,CAAiB,UAAjB,EAA6B,CAACC,EAAD,EAAK,EAAL,EAAS;IAAEC,IAAAA;IAAF,GAAT,KAAyB;IAClD,UAAMC,mBAAmB,GAAGF,EAAE,CAACG,KAAH,CAASC,MAArC;IACAJ,IAAAA,EAAE,CAACG,KAAH,CAASC,MAAT,GAAkB,MAAlB;IAEA,UAAMC,iBAAiB,GAAGL,EAAE,CAACG,KAAH,CAASG,SAAnC;IACAN,IAAAA,EAAE,CAACG,KAAH,CAASG,SAAT,GAAqBN,EAAE,CAACO,qBAAH,GAA2BC,MAA3B,GAAoC,IAAzD;;IAEA,UAAMC,OAAO,GAAIC,KAAD,IAAW;IACvB,YAAMC,OAAO,GAAGD,KAAK,CAACE,MAAtB;IACAD,MAAAA,OAAO,CAACR,KAAR,CAAcK,MAAd,GAAuB,KAAvB;IACAG,MAAAA,OAAO,CAACR,KAAR,CAAcK,MAAd,GAAwB,GAAEG,OAAO,CAACE,YAAa,IAA/C;IACH,KAJD;;IAMAJ,IAAAA,OAAO,CAAC;IAAEG,MAAAA,MAAM,EAAEZ;IAAV,KAAD,CAAP;IAEAA,IAAAA,EAAE,CAACc,gBAAH,CAAoB,OAApB,EAA6BL,OAA7B;IAEAR,IAAAA,OAAO,CAAC,MAAM;IACVD,MAAAA,EAAE,CAACG,KAAH,CAASC,MAAT,GAAkBF,mBAAlB;IACAF,MAAAA,EAAE,CAACG,KAAH,CAASG,SAAT,GAAqBD,iBAArB;IACAL,MAAAA,EAAE,CAACe,mBAAH,CAAuB,OAAvB,EAAgCN,OAAhC;IACH,KAJM,CAAP;IAKH,GAtBD;IAuBH;;ICtBDO,QAAQ,CAACF,gBAAT,CAA0B,aAA1B,EAAyC,MAAM;IAC3CG,EAAAA,QAAQ,CAACC,MAAM,CAACpB,MAAR,CAAR;IACH,CAFD;;;;;;"} \ No newline at end of file +{"version":3,"file":"alpine-autosize.js","sources":["../src/index.js","../builds/cdn.js"],"sourcesContent":["function Autosize(Alpine) {\n Alpine.directive('autosize', (el, {}, { cleanup }) => {\n \n if (el.hasAttribute('wire:model')) {\n el.setAttribute('wire:ignore', '');\n }\n\n const previousResizeValue = el.style.resize;\n el.style.resize = 'none';\n\n const previousMinHeight = el.style.minHeight;\n el.style.minHeight = el.getBoundingClientRect().height + 'px';\n const handler = (event) => {\n const element = event.target;\n element.style.height = '4px';\n element.style.height = `${element.scrollHeight}px`;\n };\n\n handler({ target: el });\n\n el.addEventListener('input', handler);\n\n cleanup(() => {\n el.style.resize = previousResizeValue;\n el.style.minHeight = previousMinHeight;\n el.removeEventListener('input', handler);\n });\n });\n}\n\nexport default Autosize;\n","import autosize from '../src/index.js';\n\ndocument.addEventListener('alpine:init', () => {\n autosize(window.Alpine);\n});\n"],"names":["Autosize","Alpine","directive","el","cleanup","hasAttribute","setAttribute","previousResizeValue","style","resize","previousMinHeight","minHeight","getBoundingClientRect","height","handler","event","element","target","scrollHeight","addEventListener","removeEventListener","document","autosize","window"],"mappings":";;;;;IAAA,SAASA,QAAT,CAAkBC,MAAlB,EAA0B;IACtBA,EAAAA,MAAM,CAACC,SAAP,CAAiB,UAAjB,EAA6B,CAACC,EAAD,EAAK,EAAL,EAAS;IAAEC,IAAAA,OAAAA;IAAF,GAAT,KAAyB;IAElD,IAAA,IAAID,EAAE,CAACE,YAAH,CAAgB,YAAhB,CAAJ,EAAmC;IAC/BF,MAAAA,EAAE,CAACG,YAAH,CAAgB,aAAhB,EAA+B,EAA/B,CAAA,CAAA;IACH,KAAA;;IAED,IAAA,MAAMC,mBAAmB,GAAGJ,EAAE,CAACK,KAAH,CAASC,MAArC,CAAA;IACAN,IAAAA,EAAE,CAACK,KAAH,CAASC,MAAT,GAAkB,MAAlB,CAAA;IAEA,IAAA,MAAMC,iBAAiB,GAAGP,EAAE,CAACK,KAAH,CAASG,SAAnC,CAAA;IACAR,IAAAA,EAAE,CAACK,KAAH,CAASG,SAAT,GAAqBR,EAAE,CAACS,qBAAH,EAAA,CAA2BC,MAA3B,GAAoC,IAAzD,CAAA;;IACA,IAAMC,MAAAA,OAAO,GAAIC,KAAD,IAAW;IACvB,MAAA,MAAMC,OAAO,GAAGD,KAAK,CAACE,MAAtB,CAAA;IACAD,MAAAA,OAAO,CAACR,KAAR,CAAcK,MAAd,GAAuB,KAAvB,CAAA;IACAG,MAAAA,OAAO,CAACR,KAAR,CAAcK,MAAd,GAAwB,CAAEG,EAAAA,OAAO,CAACE,YAAa,CAA/C,EAAA,CAAA,CAAA;IACH,KAJD,CAAA;;IAMAJ,IAAAA,OAAO,CAAC;IAAEG,MAAAA,MAAM,EAAEd,EAAAA;IAAV,KAAD,CAAP,CAAA;IAEAA,IAAAA,EAAE,CAACgB,gBAAH,CAAoB,OAApB,EAA6BL,OAA7B,CAAA,CAAA;IAEAV,IAAAA,OAAO,CAAC,MAAM;IACVD,MAAAA,EAAE,CAACK,KAAH,CAASC,MAAT,GAAkBF,mBAAlB,CAAA;IACAJ,MAAAA,EAAE,CAACK,KAAH,CAASG,SAAT,GAAqBD,iBAArB,CAAA;IACAP,MAAAA,EAAE,CAACiB,mBAAH,CAAuB,OAAvB,EAAgCN,OAAhC,CAAA,CAAA;IACH,KAJM,CAAP,CAAA;IAKH,GA1BD,CAAA,CAAA;IA2BH;;IC1BDO,QAAQ,CAACF,gBAAT,CAA0B,aAA1B,EAAyC,MAAM;IAC3CG,EAAAA,QAAQ,CAACC,MAAM,CAACtB,MAAR,CAAR,CAAA;IACH,CAFD,CAAA;;;;;;"} \ No newline at end of file diff --git a/dist/alpine-autosize.min.js b/dist/alpine-autosize.min.js index 2e440b6..0813529 100644 --- a/dist/alpine-autosize.min.js +++ b/dist/alpine-autosize.min.js @@ -1,2 +1,2 @@ -!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";document.addEventListener("alpine:init",(()=>{window.Alpine.directive("autosize",((e,{},{cleanup:t})=>{const i=e.style.resize;e.style.resize="none";const n=e.style.minHeight;e.style.minHeight=e.getBoundingClientRect().height+"px";const s=e=>{const t=e.target;t.style.height="4px",t.style.height=`${t.scrollHeight}px`};s({target:e}),e.addEventListener("input",s),t((()=>{e.style.resize=i,e.style.minHeight=n,e.removeEventListener("input",s)}))}))}))})); +!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";document.addEventListener("alpine:init",(()=>{window.Alpine.directive("autosize",((e,{},{cleanup:t})=>{e.hasAttribute("wire:model")&&e.setAttribute("wire:ignore","");const i=e.style.resize;e.style.resize="none";const n=e.style.minHeight;e.style.minHeight=e.getBoundingClientRect().height+"px";const s=e=>{const t=e.target;t.style.height="4px",t.style.height=`${t.scrollHeight}px`};s({target:e}),e.addEventListener("input",s),t((()=>{e.style.resize=i,e.style.minHeight=n,e.removeEventListener("input",s)}))}))}))})); //# sourceMappingURL=alpine-autosize.min.js.map diff --git a/dist/alpine-autosize.min.js.map b/dist/alpine-autosize.min.js.map index 82bcddb..5db30f8 100644 --- a/dist/alpine-autosize.min.js.map +++ b/dist/alpine-autosize.min.js.map @@ -1 +1 @@ -{"version":3,"file":"alpine-autosize.min.js","sources":["../builds/cdn.js","../src/index.js"],"sourcesContent":["import autosize from '../src/index.js';\n\ndocument.addEventListener('alpine:init', () => {\n autosize(window.Alpine);\n});\n","function Autosize(Alpine) {\n Alpine.directive('autosize', (el, {}, { cleanup }) => {\n const previousResizeValue = el.style.resize;\n el.style.resize = 'none';\n\n const previousMinHeight = el.style.minHeight;\n el.style.minHeight = el.getBoundingClientRect().height + 'px';\n\n const handler = (event) => {\n const element = event.target;\n element.style.height = '4px';\n element.style.height = `${element.scrollHeight}px`;\n };\n\n handler({ target: el });\n\n el.addEventListener('input', handler);\n\n cleanup(() => {\n el.style.resize = previousResizeValue;\n el.style.minHeight = previousMinHeight;\n el.removeEventListener('input', handler);\n });\n });\n}\n\nexport default Autosize;\n"],"names":["document","addEventListener","window","Alpine","directive","el","cleanup","previousResizeValue","style","resize","previousMinHeight","minHeight","getBoundingClientRect","height","handler","event","element","target","scrollHeight","removeEventListener"],"mappings":"2FAEAA,SAASC,iBAAiB,eAAe,KAC5BC,OAAOC,OCFTC,UAAU,YAAY,CAACC,MAAUC,QAAAA,YAC9BC,EAAsBF,EAAGG,MAAMC,OACrCJ,EAAGG,MAAMC,OAAS,aAEZC,EAAoBL,EAAGG,MAAMG,UACnCN,EAAGG,MAAMG,UAAYN,EAAGO,wBAAwBC,OAAS,WAEnDC,EAAWC,UACPC,EAAUD,EAAME,OACtBD,EAAQR,MAAMK,OAAS,MACvBG,EAAQR,MAAMK,OAAU,GAAEG,EAAQE,kBAGtCJ,EAAQ,CAAEG,OAAQZ,IAElBA,EAAGJ,iBAAiB,QAASa,GAE7BR,GAAQ,KACJD,EAAGG,MAAMC,OAASF,EAClBF,EAAGG,MAAMG,UAAYD,EACrBL,EAAGc,oBAAoB,QAASL"} \ No newline at end of file +{"version":3,"file":"alpine-autosize.min.js","sources":["../builds/cdn.js","../src/index.js"],"sourcesContent":["import autosize from '../src/index.js';\n\ndocument.addEventListener('alpine:init', () => {\n autosize(window.Alpine);\n});\n","function Autosize(Alpine) {\n Alpine.directive('autosize', (el, {}, { cleanup }) => {\n \n if (el.hasAttribute('wire:model')) {\n el.setAttribute('wire:ignore', '');\n }\n\n const previousResizeValue = el.style.resize;\n el.style.resize = 'none';\n\n const previousMinHeight = el.style.minHeight;\n el.style.minHeight = el.getBoundingClientRect().height + 'px';\n const handler = (event) => {\n const element = event.target;\n element.style.height = '4px';\n element.style.height = `${element.scrollHeight}px`;\n };\n\n handler({ target: el });\n\n el.addEventListener('input', handler);\n\n cleanup(() => {\n el.style.resize = previousResizeValue;\n el.style.minHeight = previousMinHeight;\n el.removeEventListener('input', handler);\n });\n });\n}\n\nexport default Autosize;\n"],"names":["document","addEventListener","window","Alpine","directive","el","cleanup","hasAttribute","setAttribute","previousResizeValue","style","resize","previousMinHeight","minHeight","getBoundingClientRect","height","handler","event","element","target","scrollHeight","removeEventListener"],"mappings":"2FAEAA,SAASC,iBAAiB,eAAe,KAC5BC,OAAOC,OCFTC,UAAU,YAAY,CAACC,MAAUC,QAAAA,MAEhCD,EAAGE,aAAa,eAChBF,EAAGG,aAAa,cAAe,IAGnC,MAAMC,EAAsBJ,EAAGK,MAAMC,OACrCN,EAAGK,MAAMC,OAAS,OAElB,MAAMC,EAAoBP,EAAGK,MAAMG,UACnCR,EAAGK,MAAMG,UAAYR,EAAGS,wBAAwBC,OAAS,KACnDC,MAAAA,EAAWC,IACb,MAAMC,EAAUD,EAAME,OACtBD,EAAQR,MAAMK,OAAS,MACvBG,EAAQR,MAAMK,OAAU,GAAEG,EAAQE,kBAGtCJ,EAAQ,CAAEG,OAAQd,IAElBA,EAAGJ,iBAAiB,QAASe,GAE7BV,GAAQ,KACJD,EAAGK,MAAMC,OAASF,EAClBJ,EAAGK,MAAMG,UAAYD,EACrBP,EAAGgB,oBAAoB,QAASL"} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 263abeb..2c981aa 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,15 @@ function Autosize(Alpine) { Alpine.directive('autosize', (el, {}, { cleanup }) => { + + if (!el.hasAttribute('wire:ignore') && el.hasAttribute('wire:model')) { + el.setAttribute('wire:ignore', ''); + } + const previousResizeValue = el.style.resize; el.style.resize = 'none'; const previousMinHeight = el.style.minHeight; el.style.minHeight = el.getBoundingClientRect().height + 'px'; - const handler = (event) => { const element = event.target; element.style.height = '4px';