diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml deleted file mode 100644 index e69b38b..0000000 --- a/.github/workflows/build.yml +++ /dev/null @@ -1,15 +0,0 @@ -name: Build - -on: - - pull_request - -jobs: - build: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v1 - with: - node-version: ^16.0.0 - - run: npm install - - run: npm run build diff --git a/builds/cdn.js b/builds/cdn.js new file mode 100644 index 0000000..8bf6a0d --- /dev/null +++ b/builds/cdn.js @@ -0,0 +1,5 @@ +import autosize from '../src/index.js'; + +document.addEventListener('alpine:init', () => { + autosize(window.Alpine); +}); diff --git a/builds/cdn.ts b/builds/cdn.ts deleted file mode 100644 index e032a76..0000000 --- a/builds/cdn.ts +++ /dev/null @@ -1,5 +0,0 @@ -import autosize from '../src/index'; - -document.addEventListener('alpine:init', (): void => { - autosize((window).Alpine); -}); diff --git a/dist/alpine-autosize.js b/dist/alpine-autosize.js index 27435d2..d72af41 100644 --- a/dist/alpine-autosize.js +++ b/dist/alpine-autosize.js @@ -4,52 +4,63 @@ })((function () { 'use strict'; function Autosize(Alpine) { - Alpine.directive('autosize', function (el, _a, _b) { - var modifiers = _a.modifiers; - var cleanup = _b.cleanup; - var attributes = Array.from(el.attributes); - var hasWireModel = false; - for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) { - var nodeName = attributes_1[_i].nodeName; - if (nodeName === 'wire:model' || - nodeName.startsWith('wire:model.')) { - hasWireModel = true; - break; - } - } - if (!el.hasAttribute('wire:ignore') && hasWireModel) { - el.setAttribute('wire:ignore', ''); - } - var previousResizeValue = el.style.resize; - el.style.resize = 'none'; - var previousMinHeight = el.style.minHeight; - el.style.minHeight = "".concat(el.getBoundingClientRect().height, "px"); - var paddingModifier = modifiers.filter(function (modifier) { return modifier.match(/px$/i); })[0] || - false; - var padding = 0; - if (paddingModifier !== false) { - padding = parseInt(paddingModifier); - } - var handler = function (event) { - var element = event.target; - if (!element.scrollHeight) { - return; - } - element.style.height = '4px'; - element.style.height = "".concat(element.scrollHeight + padding, "px"); - }; - handler({ target: el }); - el.addEventListener('input', handler); - cleanup(function () { - el.style.resize = previousResizeValue; - el.style.minHeight = previousMinHeight; - el.removeEventListener('input', handler); - }); + Alpine.directive('autosize', (el, { + modifiers + }, { + cleanup + }) => { + const attributes = Array.from(el.attributes); + let hasWireModel = false; + + for (let { + nodeName + } of attributes) { + if (nodeName === 'wire:model' || nodeName.startsWith('wire:model.')) { + hasWireModel = true; + break; + } + } + + if (!el.hasAttribute('wire:ignore') && hasWireModel) { + 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 paddingModifier = modifiers.filter(modifier => modifier.match(/px$/i))[0] || false; + let padding = 0; + + if (paddingModifier !== false) { + padding = parseInt(paddingModifier); + } + + const handler = event => { + const element = event.target; + + if (!element.scrollHeight) { + return; + } + + element.style.height = '4px'; + element.style.height = `${element.scrollHeight + padding}px`; + }; + + handler({ + target: el + }); + el.addEventListener('input', handler); + cleanup(() => { + el.style.resize = previousResizeValue; + el.style.minHeight = previousMinHeight; + el.removeEventListener('input', handler); }); + }); } - document.addEventListener('alpine:init', function () { - Autosize(window.Alpine); + document.addEventListener('alpine:init', () => { + Autosize(window.Alpine); }); })); diff --git a/dist/alpine-autosize.js.map b/dist/alpine-autosize.js.map index 1384280..e99a568 100644 --- a/dist/alpine-autosize.js.map +++ b/dist/alpine-autosize.js.map @@ -1 +1 @@ -{"version":3,"file":"alpine-autosize.js","sources":["../src/index.ts","../builds/cdn.ts"],"sourcesContent":["function Autosize(Alpine: any): void {\n Alpine.directive(\n 'autosize',\n (\n el: HTMLElement,\n { modifiers }: { modifiers: string[] },\n { cleanup }: { cleanup: (callback: () => void) => void },\n ): void => {\n const attributes: Attr[] = Array.from(el.attributes);\n\n let hasWireModel: boolean = false;\n\n for (let { nodeName } of attributes) {\n if (\n nodeName === 'wire:model' ||\n nodeName.startsWith('wire:model.')\n ) {\n hasWireModel = true;\n break;\n }\n }\n\n if (!el.hasAttribute('wire:ignore') && hasWireModel) {\n el.setAttribute('wire:ignore', '');\n }\n\n const previousResizeValue: string = el.style.resize;\n el.style.resize = 'none';\n\n const previousMinHeight: string = el.style.minHeight;\n el.style.minHeight = `${el.getBoundingClientRect().height}px`;\n\n const paddingModifier =\n modifiers.filter((modifier) => modifier.match(/px$/i))[0] ||\n false;\n let padding: number = 0;\n if (paddingModifier !== false) {\n padding = parseInt(paddingModifier);\n }\n\n const handler: (event: Partial) => void = (\n event: Partial,\n ) => {\n const element: HTMLElement = event.target;\n if (!element.scrollHeight) {\n return;\n }\n element.style.height = '4px';\n element.style.height = `${element.scrollHeight + padding}px`;\n };\n\n handler({ target: el });\n\n el.addEventListener('input', handler);\n\n cleanup((): void => {\n el.style.resize = previousResizeValue;\n el.style.minHeight = previousMinHeight;\n el.removeEventListener('input', handler);\n });\n },\n );\n}\n\nexport default Autosize;\n","import autosize from '../src/index';\n\ndocument.addEventListener('alpine:init', (): void => {\n autosize((window).Alpine);\n});\n"],"names":["autosize"],"mappings":";;;;;IAAA,SAAS,QAAQ,CAAC,MAAW;QACzB,MAAM,CAAC,SAAS,CACZ,UAAU,EACV,UACI,EAAe,EACf,EAAsC,EACtC,EAAwD;gBADtD,SAAS,eAAA;gBACT,OAAO,aAAA;YAET,IAAM,UAAU,GAAW,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;YAErD,IAAI,YAAY,GAAY,KAAK,CAAC;YAElC,KAAyB,UAAU,EAAV,yBAAU,EAAV,wBAAU,EAAV,IAAU,EAAE;gBAA1B,IAAA,QAAQ,4BAAA;gBACf,IACI,QAAQ,KAAK,YAAY;oBACzB,QAAQ,CAAC,UAAU,CAAC,aAAa,CAAC,EACpC;oBACE,YAAY,GAAG,IAAI,CAAC;oBACpB,MAAM;iBACT;aACJ;YAED,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,YAAY,EAAE;gBACjD,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;aACtC;YAED,IAAM,mBAAmB,GAAW,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC;YACpD,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAEzB,IAAM,iBAAiB,GAAW,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC;YACrD,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,UAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,MAAM,OAAI,CAAC;YAE9D,IAAM,eAAe,GACjB,SAAS,CAAC,MAAM,CAAC,UAAC,QAAQ,IAAK,OAAA,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,GAAA,CAAC,CAAC,CAAC,CAAC;gBACzD,KAAK,CAAC;YACV,IAAI,OAAO,GAAW,CAAC,CAAC;YACxB,IAAI,eAAe,KAAK,KAAK,EAAE;gBAC3B,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;aACvC;YAED,IAAM,OAAO,GAAoC,UAC7C,KAAqB;gBAErB,IAAM,OAAO,GAA6B,KAAK,CAAC,MAAM,CAAC;gBACvD,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE;oBACvB,OAAO;iBACV;gBACD,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;gBAC7B,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,UAAG,OAAO,CAAC,YAAY,GAAG,OAAO,OAAI,CAAC;aAChE,CAAC;YAEF,OAAO,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;YAExB,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAEtC,OAAO,CAAC;gBACJ,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,mBAAmB,CAAC;gBACtC,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,iBAAiB,CAAC;gBACvC,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;aAC5C,CAAC,CAAC;SACN,CACJ,CAAC;IACN;;IC5DA,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE;QACrCA,QAAQ,CAAO,MAAO,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;;;;;"} \ 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, { modifiers }, { cleanup }) => {\n const attributes = Array.from(el.attributes);\n\n let hasWireModel = false;\n\n for (let { nodeName } of attributes) {\n if (nodeName === 'wire:model' || nodeName.startsWith('wire:model.')) {\n hasWireModel = true;\n break;\n }\n }\n\n if (!el.hasAttribute('wire:ignore') && hasWireModel) {\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\n const paddingModifier = modifiers.filter(modifier => modifier.match(/px$/i))[0] || false;\n let padding = 0;\n if (paddingModifier !== false) {\n padding = parseInt(paddingModifier);\n }\n\n const handler = (event) => {\n const element = event.target;\n if (!element.scrollHeight) {\n return;\n }\n element.style.height = '4px';\n element.style.height = `${element.scrollHeight + padding}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","modifiers","cleanup","attributes","Array","from","hasWireModel","nodeName","startsWith","hasAttribute","setAttribute","previousResizeValue","style","resize","previousMinHeight","minHeight","getBoundingClientRect","height","paddingModifier","filter","modifier","match","padding","parseInt","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;IAAEC,IAAAA;IAAF,GAAL,EAAoB;IAAEC,IAAAA;IAAF,GAApB,KAAoC;IAC7D,UAAMC,UAAU,GAAGC,KAAK,CAACC,IAAN,CAAWL,EAAE,CAACG,UAAd,CAAnB;IAEA,QAAIG,YAAY,GAAG,KAAnB;;IAEA,SAAK,IAAI;IAAEC,MAAAA;IAAF,KAAT,IAAyBJ,UAAzB,EAAqC;IACjC,UAAII,QAAQ,KAAK,YAAb,IAA6BA,QAAQ,CAACC,UAAT,CAAoB,aAApB,CAAjC,EAAqE;IACjEF,QAAAA,YAAY,GAAG,IAAf;IACA;IACH;IACJ;;IAED,QAAI,CAACN,EAAE,CAACS,YAAH,CAAgB,aAAhB,CAAD,IAAmCH,YAAvC,EAAqD;IACjDN,MAAAA,EAAE,CAACU,YAAH,CAAgB,aAAhB,EAA+B,EAA/B;IACH;;IAED,UAAMC,mBAAmB,GAAGX,EAAE,CAACY,KAAH,CAASC,MAArC;IACAb,IAAAA,EAAE,CAACY,KAAH,CAASC,MAAT,GAAkB,MAAlB;IAEA,UAAMC,iBAAiB,GAAGd,EAAE,CAACY,KAAH,CAASG,SAAnC;IACAf,IAAAA,EAAE,CAACY,KAAH,CAASG,SAAT,GAAsB,GAAEf,EAAE,CAACgB,qBAAH,GAA2BC,MAAO,IAA1D;IAEA,UAAMC,eAAe,GAAGjB,SAAS,CAACkB,MAAV,CAAiBC,QAAQ,IAAIA,QAAQ,CAACC,KAAT,CAAe,MAAf,CAA7B,EAAqD,CAArD,KAA2D,KAAnF;IACA,QAAIC,OAAO,GAAG,CAAd;;IACA,QAAIJ,eAAe,KAAK,KAAxB,EAA+B;IAC3BI,MAAAA,OAAO,GAAGC,QAAQ,CAACL,eAAD,CAAlB;IACH;;IAED,UAAMM,OAAO,GAAIC,KAAD,IAAW;IACvB,YAAMC,OAAO,GAAGD,KAAK,CAACE,MAAtB;;IACA,UAAI,CAACD,OAAO,CAACE,YAAb,EAA2B;IACvB;IACH;;IACDF,MAAAA,OAAO,CAACd,KAAR,CAAcK,MAAd,GAAuB,KAAvB;IACAS,MAAAA,OAAO,CAACd,KAAR,CAAcK,MAAd,GAAwB,GAAES,OAAO,CAACE,YAAR,GAAuBN,OAAQ,IAAzD;IACH,KAPD;;IASAE,IAAAA,OAAO,CAAC;IAAEG,MAAAA,MAAM,EAAE3B;IAAV,KAAD,CAAP;IAEAA,IAAAA,EAAE,CAAC6B,gBAAH,CAAoB,OAApB,EAA6BL,OAA7B;IAEAtB,IAAAA,OAAO,CAAC,MAAM;IACVF,MAAAA,EAAE,CAACY,KAAH,CAASC,MAAT,GAAkBF,mBAAlB;IACAX,MAAAA,EAAE,CAACY,KAAH,CAASG,SAAT,GAAqBD,iBAArB;IACAd,MAAAA,EAAE,CAAC8B,mBAAH,CAAuB,OAAvB,EAAgCN,OAAhC;IACH,KAJM,CAAP;IAKH,GA9CD;IA+CH;;IC9CDO,QAAQ,CAACF,gBAAT,CAA0B,aAA1B,EAAyC,MAAM;IAC3CG,EAAAA,QAAQ,CAACC,MAAM,CAACnC,MAAR,CAAR;IACH,CAFD;;;;;;"} \ No newline at end of file diff --git a/dist/alpine-autosize.min.js b/dist/alpine-autosize.min.js index aa6c130..8ad2872 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",(function(){window.Alpine.directive("autosize",(function(e,t,i){for(var n=t.modifiers,r=i.cleanup,o=!1,s=0,a=Array.from(e.attributes);s{window.Alpine.directive("autosize",((e,{modifiers:t},{cleanup:i})=>{const n=Array.from(e.attributes);let s=!1;for(let{nodeName:e}of n)if("wire:model"===e||e.startsWith("wire:model.")){s=!0;break}!e.hasAttribute("wire:ignore")&&s&&e.setAttribute("wire:ignore","");const r=e.style.resize;e.style.resize="none";const o=e.style.minHeight;e.style.minHeight=`${e.getBoundingClientRect().height}px`;const l=t.filter((e=>e.match(/px$/i)))[0]||!1;let c=0;!1!==l&&(c=parseInt(l));const a=e=>{const t=e.target;t.scrollHeight&&(t.style.height="4px",t.style.height=`${t.scrollHeight+c}px`)};a({target:e}),e.addEventListener("input",a),i((()=>{e.style.resize=r,e.style.minHeight=o,e.removeEventListener("input",a)}))}))}))})); //# sourceMappingURL=alpine-autosize.min.js.map diff --git a/dist/alpine-autosize.min.js.map b/dist/alpine-autosize.min.js.map index 1e2ae9b..98ef49a 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.ts","../src/index.ts"],"sourcesContent":["import autosize from '../src/index';\n\ndocument.addEventListener('alpine:init', (): void => {\n autosize((window).Alpine);\n});\n","function Autosize(Alpine: any): void {\n Alpine.directive(\n 'autosize',\n (\n el: HTMLElement,\n { modifiers }: { modifiers: string[] },\n { cleanup }: { cleanup: (callback: () => void) => void },\n ): void => {\n const attributes: Attr[] = Array.from(el.attributes);\n\n let hasWireModel: boolean = false;\n\n for (let { nodeName } of attributes) {\n if (\n nodeName === 'wire:model' ||\n nodeName.startsWith('wire:model.')\n ) {\n hasWireModel = true;\n break;\n }\n }\n\n if (!el.hasAttribute('wire:ignore') && hasWireModel) {\n el.setAttribute('wire:ignore', '');\n }\n\n const previousResizeValue: string = el.style.resize;\n el.style.resize = 'none';\n\n const previousMinHeight: string = el.style.minHeight;\n el.style.minHeight = `${el.getBoundingClientRect().height}px`;\n\n const paddingModifier =\n modifiers.filter((modifier) => modifier.match(/px$/i))[0] ||\n false;\n let padding: number = 0;\n if (paddingModifier !== false) {\n padding = parseInt(paddingModifier);\n }\n\n const handler: (event: Partial) => void = (\n event: Partial,\n ) => {\n const element: HTMLElement = event.target;\n if (!element.scrollHeight) {\n return;\n }\n element.style.height = '4px';\n element.style.height = `${element.scrollHeight + padding}px`;\n };\n\n handler({ target: el });\n\n el.addEventListener('input', handler);\n\n cleanup((): void => {\n el.style.resize = previousResizeValue;\n el.style.minHeight = previousMinHeight;\n el.removeEventListener('input', handler);\n });\n },\n );\n}\n\nexport default Autosize;\n"],"names":["document","addEventListener","window","Alpine","directive","el","_a","_b","modifiers","cleanup","hasWireModel","attributes_1","Array","from","attributes","_i","nodeName","startsWith","hasAttribute","setAttribute","previousResizeValue","style","resize","previousMinHeight","minHeight","getBoundingClientRect","height","paddingModifier","filter","modifier","match","padding","parseInt","handler","event","element","target","scrollHeight","removeEventListener"],"mappings":"2FAEAA,SAASC,iBAAiB,eAAe,WACtBC,OAAQC,OCFhBC,UACH,YACA,SACIC,EACAC,EACAC,GAMA,QAPEC,cACAC,YAIEC,GAAwB,MAEHC,EAJEC,MAAMC,KAAKR,EAAGS,YAIhBC,WAAAA,IAAY,CAA1B,IAAAC,gBACP,GACiB,eAAbA,GACAA,EAASC,WAAW,eACtB,CACEP,GAAe,EACf,QAIHL,EAAGa,aAAa,gBAAkBR,GACnCL,EAAGc,aAAa,cAAe,IAGnC,IAAMC,EAA8Bf,EAAGgB,MAAMC,OAC7CjB,EAAGgB,MAAMC,OAAS,OAElB,IAAMC,EAA4BlB,EAAGgB,MAAMG,UAC3CnB,EAAGgB,MAAMG,UAAY,UAAGnB,EAAGoB,wBAAwBC,aAEnD,IAAMC,EACFnB,EAAUoB,QAAO,SAACC,GAAa,OAAAA,EAASC,MAAM,WAAS,KACvD,EACAC,EAAkB,GACE,IAApBJ,IACAI,EAAUC,SAASL,IAGvB,IAAMM,EAA2C,SAC7CC,GAEA,IAAMC,EAAoCD,EAAME,OAC3CD,EAAQE,eAGbF,EAAQd,MAAMK,OAAS,MACvBS,EAAQd,MAAMK,OAAS,UAAGS,EAAQE,aAAeN,UAGrDE,EAAQ,CAAEG,OAAQ/B,IAElBA,EAAGJ,iBAAiB,QAASgC,GAE7BxB,GAAQ,WACJJ,EAAGgB,MAAMC,OAASF,EAClBf,EAAGgB,MAAMG,UAAYD,EACrBlB,EAAGiC,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, { modifiers }, { cleanup }) => {\n const attributes = Array.from(el.attributes);\n\n let hasWireModel = false;\n\n for (let { nodeName } of attributes) {\n if (nodeName === 'wire:model' || nodeName.startsWith('wire:model.')) {\n hasWireModel = true;\n break;\n }\n }\n\n if (!el.hasAttribute('wire:ignore') && hasWireModel) {\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\n const paddingModifier = modifiers.filter(modifier => modifier.match(/px$/i))[0] || false;\n let padding = 0;\n if (paddingModifier !== false) {\n padding = parseInt(paddingModifier);\n }\n\n const handler = (event) => {\n const element = event.target;\n if (!element.scrollHeight) {\n return;\n }\n element.style.height = '4px';\n element.style.height = `${element.scrollHeight + padding}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","modifiers","cleanup","attributes","Array","from","hasWireModel","nodeName","startsWith","hasAttribute","setAttribute","previousResizeValue","style","resize","previousMinHeight","minHeight","getBoundingClientRect","height","paddingModifier","filter","modifier","match","padding","parseInt","handler","event","element","target","scrollHeight","removeEventListener"],"mappings":"2FAEAA,SAASC,iBAAiB,eAAe,KAC5BC,OAAOC,OCFTC,UAAU,YAAY,CAACC,GAAMC,UAAAA,IAAeC,QAAAA,YACzCC,EAAaC,MAAMC,KAAKL,EAAGG,gBAE7BG,GAAe,MAEd,IAAIC,SAAEA,KAAcJ,KACJ,eAAbI,GAA6BA,EAASC,WAAW,eAAgB,CACjEF,GAAe,SAKlBN,EAAGS,aAAa,gBAAkBH,GACnCN,EAAGU,aAAa,cAAe,UAG7BC,EAAsBX,EAAGY,MAAMC,OACrCb,EAAGY,MAAMC,OAAS,aAEZC,EAAoBd,EAAGY,MAAMG,UACnCf,EAAGY,MAAMG,UAAa,GAAEf,EAAGgB,wBAAwBC,iBAE7CC,EAAkBjB,EAAUkB,QAAOC,GAAYA,EAASC,MAAM,UAAS,KAAM,MAC/EC,EAAU,GACU,IAApBJ,IACAI,EAAUC,SAASL,UAGjBM,EAAWC,UACPC,EAAUD,EAAME,OACjBD,EAAQE,eAGbF,EAAQd,MAAMK,OAAS,MACvBS,EAAQd,MAAMK,OAAU,GAAES,EAAQE,aAAeN,QAGrDE,EAAQ,CAAEG,OAAQ3B,IAElBA,EAAGJ,iBAAiB,QAAS4B,GAE7BtB,GAAQ,KACJF,EAAGY,MAAMC,OAASF,EAClBX,EAAGY,MAAMG,UAAYD,EACrBd,EAAG6B,oBAAoB,QAASL"} \ No newline at end of file diff --git a/package.json b/package.json index 0a9aa0b..ad9dbfc 100644 --- a/package.json +++ b/package.json @@ -23,14 +23,11 @@ "devDependencies": { "@babel/core": "^7.17.2", "@babel/preset-env": "^7.16.11", - "@rollup/plugin-typescript": "^9.0.2", - "@types/alpinejs": "^3.7.1", "rollup": "^2.67.2", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-filesize": "^9.1.2", "rollup-plugin-node-resolve": "^5.2.0", - "rollup-plugin-terser": "^7.0.2", - "tslib": "^2.4.1" + "rollup-plugin-terser": "^7.0.2" }, "files": [ "LICENSE", diff --git a/rollup.config.js b/rollup.config.js index 86239cc..635d85c 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,11 +1,10 @@ -import typescript from '@rollup/plugin-typescript'; import babel from 'rollup-plugin-babel'; import filesize from 'rollup-plugin-filesize'; import resolve from 'rollup-plugin-node-resolve'; import { terser } from 'rollup-plugin-terser'; export default { - input: 'builds/cdn.ts', + input: 'builds/cdn.js', output: [ { file: 'dist/alpine-autosize.js', @@ -17,12 +16,11 @@ export default { format: 'umd', plugins: [terser()], sourcemap: true, - }, + } ], plugins: [ resolve(), filesize(), - typescript(), babel({ babelrc: false, exclude: 'node_modules/**', diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..c93ee49 --- /dev/null +++ b/src/index.js @@ -0,0 +1,51 @@ +function Autosize(Alpine) { + Alpine.directive('autosize', (el, { modifiers }, { cleanup }) => { + const attributes = Array.from(el.attributes); + + let hasWireModel = false; + + for (let { nodeName } of attributes) { + if (nodeName === 'wire:model' || nodeName.startsWith('wire:model.')) { + hasWireModel = true; + break; + } + } + + if (!el.hasAttribute('wire:ignore') && hasWireModel) { + 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 paddingModifier = modifiers.filter(modifier => modifier.match(/px$/i))[0] || false; + let padding = 0; + if (paddingModifier !== false) { + padding = parseInt(paddingModifier); + } + + const handler = (event) => { + const element = event.target; + if (!element.scrollHeight) { + return; + } + element.style.height = '4px'; + element.style.height = `${element.scrollHeight + padding}px`; + }; + + handler({ target: el }); + + el.addEventListener('input', handler); + + cleanup(() => { + el.style.resize = previousResizeValue; + el.style.minHeight = previousMinHeight; + el.removeEventListener('input', handler); + }); + }); +} + +export default Autosize; diff --git a/src/index.ts b/src/index.ts deleted file mode 100644 index e849d8b..0000000 --- a/src/index.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { Alpine } from 'alpinejs'; - -function Autosize(Alpine: Alpine): void { - Alpine.directive( - 'autosize', - ( - el: HTMLElement, - { modifiers }: { modifiers: string[] }, - { cleanup }: { cleanup: (callback: () => void) => void }, - ): void => { - const attributes: Attr[] = Array.from(el.attributes); - - let hasWireModel: boolean = false; - - for (let { nodeName } of attributes) { - if ( - nodeName === 'wire:model' || - nodeName.startsWith('wire:model.') - ) { - hasWireModel = true; - break; - } - } - - if (!el.hasAttribute('wire:ignore') && hasWireModel) { - el.setAttribute('wire:ignore', ''); - } - - const previousResizeValue: string = el.style.resize; - el.style.resize = 'none'; - - const previousMinHeight: string = el.style.minHeight; - el.style.minHeight = `${el.getBoundingClientRect().height}px`; - - const paddingModifier = - modifiers.filter((modifier) => modifier.match(/px$/i))[0] || - false; - let padding: number = 0; - if (paddingModifier !== false) { - padding = parseInt(paddingModifier); - } - - const handler: (event: Partial) => void = ( - event: Partial, - ) => { - const element: HTMLElement = event.target; - if (!element.scrollHeight) { - return; - } - element.style.height = '4px'; - element.style.height = `${element.scrollHeight + padding}px`; - }; - - handler({ target: el }); - - el.addEventListener('input', handler); - - cleanup((): void => { - el.style.resize = previousResizeValue; - el.style.minHeight = previousMinHeight; - el.removeEventListener('input', handler); - }); - }, - ); -} - -export default Autosize;