From 9718a23346cd8bda5063edcd71f1155914be6848 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Erik=20Pedersen?= Date: Thu, 30 Nov 2023 14:59:31 +0100 Subject: [PATCH] alpinejs: Update to v3.13.3 --- alpinejs/packages/alpinejs/dist/cdn.js | 89 +- alpinejs/packages/alpinejs/dist/cdn.min.js | 4 +- alpinejs/packages/alpinejs/dist/module.cjs.js | 89 +- alpinejs/packages/alpinejs/dist/module.esm.js | 89 +- alpinejs/packages/alpinejs/package.json | 2 +- alpinejs/packages/alpinejs/src/alpine.js | 3 +- alpinejs/packages/alpinejs/src/clone.js | 31 +- alpinejs/packages/alpinejs/src/directives.js | 1 + .../alpinejs/src/directives/x-data.js | 26 +- .../alpinejs/src/directives/x-effect.js | 7 +- .../alpinejs/src/directives/x-model.js | 42 +- .../alpinejs/src/directives/x-transition.js | 2 +- alpinejs/packages/alpinejs/src/lifecycle.js | 2 +- alpinejs/packages/alpinejs/src/utils/bind.js | 18 +- alpinejs/packages/anchor/builds/cdn.js | 5 + alpinejs/packages/anchor/builds/module.js | 3 + alpinejs/packages/anchor/dist/cdn.js | 1258 ++++++++++++++++ alpinejs/packages/anchor/dist/cdn.min.js | 1 + alpinejs/packages/anchor/dist/module.cjs.js | 1281 +++++++++++++++++ alpinejs/packages/anchor/dist/module.esm.js | 1257 ++++++++++++++++ alpinejs/packages/anchor/package.json | 17 + alpinejs/packages/anchor/src/index.js | 77 + alpinejs/packages/collapse/package.json | 2 +- alpinejs/packages/csp/dist/cdn.js | 89 +- alpinejs/packages/csp/dist/cdn.min.js | 4 +- alpinejs/packages/csp/dist/module.cjs.js | 89 +- alpinejs/packages/csp/dist/module.esm.js | 89 +- alpinejs/packages/docs/package.json | 2 +- .../packages/docs/src/en/directives/model.md | 13 + .../docs/src/en/essentials/installation.md | 2 +- .../packages/docs/src/en/plugins/anchor.md | 213 +++ .../packages/docs/src/en/plugins/morph.md | 2 +- alpinejs/packages/focus/dist/cdn.js | 10 +- alpinejs/packages/focus/dist/cdn.min.js | 2 +- alpinejs/packages/focus/dist/module.cjs.js | 10 +- alpinejs/packages/focus/dist/module.esm.js | 10 +- alpinejs/packages/focus/package.json | 2 +- alpinejs/packages/focus/src/index.js | 9 +- alpinejs/packages/intersect/package.json | 2 +- alpinejs/packages/mask/package.json | 2 +- alpinejs/packages/morph/dist/cdn.js | 15 +- alpinejs/packages/morph/dist/cdn.min.js | 2 +- alpinejs/packages/morph/dist/module.cjs.js | 15 +- alpinejs/packages/morph/dist/module.esm.js | 15 +- alpinejs/packages/morph/package.json | 2 +- alpinejs/packages/morph/src/morph.js | 22 +- alpinejs/packages/persist/package.json | 2 +- alpinejs/packages/ui/dist/cdn.js | 40 +- alpinejs/packages/ui/dist/cdn.min.js | 2 +- alpinejs/packages/ui/dist/module.cjs.js | 40 +- alpinejs/packages/ui/dist/module.esm.js | 40 +- alpinejs/packages/ui/package.json | 2 +- alpinejs/packages/ui/src/combobox.js | 14 +- alpinejs/packages/ui/src/list-context.js | 4 + alpinejs/packages/ui/src/menu.js | 25 +- 55 files changed, 4814 insertions(+), 282 deletions(-) create mode 100644 alpinejs/packages/anchor/builds/cdn.js create mode 100644 alpinejs/packages/anchor/builds/module.js create mode 100644 alpinejs/packages/anchor/dist/cdn.js create mode 100644 alpinejs/packages/anchor/dist/cdn.min.js create mode 100644 alpinejs/packages/anchor/dist/module.cjs.js create mode 100644 alpinejs/packages/anchor/dist/module.esm.js create mode 100644 alpinejs/packages/anchor/package.json create mode 100644 alpinejs/packages/anchor/src/index.js create mode 100644 alpinejs/packages/docs/src/en/plugins/anchor.md diff --git a/alpinejs/packages/alpinejs/dist/cdn.js b/alpinejs/packages/alpinejs/dist/cdn.js index 895c485..999c101 100644 --- a/alpinejs/packages/alpinejs/dist/cdn.js +++ b/alpinejs/packages/alpinejs/dist/cdn.js @@ -138,7 +138,7 @@ directives(el, attrs).forEach((handle) => handle()); }); let outNestedComponents = (el) => !closestRoot(el.parentElement, true); - Array.from(document.querySelectorAll(allSelectors())).filter(outNestedComponents).forEach((el) => { + Array.from(document.querySelectorAll(allSelectors().join(","))).filter(outNestedComponents).forEach((el) => { initTree(el); }); dispatch(document, "alpine:initialized"); @@ -789,6 +789,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); "ref", "data", "id", + "anchor", "bind", "init", "for", @@ -1061,7 +1062,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); el._x_hidePromise = el._x_transition ? new Promise((resolve, reject) => { el._x_transition.out(() => { }, () => resolve(hide)); - el._x_transitioning.beforeCancel(() => reject({ isFromCancelledTransition: true })); + el._x_transitioning && el._x_transitioning.beforeCancel(() => reject({ isFromCancelledTransition: true })); }) : Promise.resolve(hide); queueMicrotask(() => { let closest = closestHide(el); @@ -1215,11 +1216,12 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); function onlyDuringClone(callback) { return (...args) => isCloning && callback(...args); } + var interceptors = []; + function interceptClone(callback) { + interceptors.push(callback); + } function cloneNode(from, to) { - if (from._x_dataStack) { - to._x_dataStack = from._x_dataStack; - to.setAttribute("data-has-alpine-state", true); - } + interceptors.forEach((i) => i(from, to)); isCloning = true; dontRegisterReactiveSideEffects(() => { initTree(to, (el, callback) => { @@ -1264,13 +1266,6 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); callback(); overrideEffect(cache); } - function shouldSkipRegisteringDataDuringClone(el) { - if (!isCloning) - return false; - if (isCloningLegacy) - return true; - return el.hasAttribute("data-has-alpine-state"); - } // packages/alpinejs/src/utils/bind.js function bind(el, name, value, modifiers = []) { @@ -1303,7 +1298,11 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); el.value = value; } if (window.fromModel) { - el.checked = checkedAttrLooseCompare(el.value, value); + if (typeof value === "boolean") { + el.checked = safeParseBoolean(el.value) === value; + } else { + el.checked = checkedAttrLooseCompare(el.value, value); + } } } else if (el.type === "checkbox") { if (Number.isInteger(value)) { @@ -1372,6 +1371,15 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); function checkedAttrLooseCompare(valueA, valueB) { return valueA == valueB; } + function safeParseBoolean(rawValue) { + if ([1, "1", "true", "on", "yes", true].includes(rawValue)) { + return true; + } + if ([0, "0", "false", "off", "no", false].includes(rawValue)) { + return false; + } + return rawValue ? Boolean(rawValue) : null; + } function isBooleanAttr(attrName) { const booleanAttributes = [ "disabled", @@ -1602,7 +1610,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); get raw() { return raw; }, - version: "3.13.1", + version: "3.13.3", flushAndStopDeferringMutations, dontAutoEvaluateFunctions, disableEffectScheduling, @@ -1616,6 +1624,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); onlyDuringClone, addRootSelector, addInitSelector, + interceptClone, addScopeToNode, deferMutations, mapAttributes, @@ -2564,7 +2573,9 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); directive("ignore", handler); // packages/alpinejs/src/directives/x-effect.js - directive("effect", (el, { expression }, { effect: effect3 }) => effect3(evaluateLater(el, expression))); + directive("effect", skipDuringClone((el, { expression }, { effect: effect3 }) => { + effect3(evaluateLater(el, expression)); + })); // packages/alpinejs/src/utils/on.js function on(el, event, modifiers, callback) { @@ -2806,21 +2817,40 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); return event.detail !== null && event.detail !== void 0 ? event.detail : event.target.value; else if (el.type === "checkbox") { if (Array.isArray(currentValue)) { - let newValue = modifiers.includes("number") ? safeParseNumber(event.target.value) : event.target.value; + let newValue = null; + if (modifiers.includes("number")) { + newValue = safeParseNumber(event.target.value); + } else if (modifiers.includes("boolean")) { + newValue = safeParseBoolean(event.target.value); + } else { + newValue = event.target.value; + } return event.target.checked ? currentValue.concat([newValue]) : currentValue.filter((el2) => !checkedAttrLooseCompare2(el2, newValue)); } else { return event.target.checked; } } else if (el.tagName.toLowerCase() === "select" && el.multiple) { - return modifiers.includes("number") ? Array.from(event.target.selectedOptions).map((option) => { - let rawValue = option.value || option.text; - return safeParseNumber(rawValue); - }) : Array.from(event.target.selectedOptions).map((option) => { + if (modifiers.includes("number")) { + return Array.from(event.target.selectedOptions).map((option) => { + let rawValue = option.value || option.text; + return safeParseNumber(rawValue); + }); + } else if (modifiers.includes("boolean")) { + return Array.from(event.target.selectedOptions).map((option) => { + let rawValue = option.value || option.text; + return safeParseBoolean(rawValue); + }); + } + return Array.from(event.target.selectedOptions).map((option) => { return option.value || option.text; }); } else { - let rawValue = event.target.value; - return modifiers.includes("number") ? safeParseNumber(rawValue) : modifiers.includes("trim") ? rawValue.trim() : rawValue; + if (modifiers.includes("number")) { + return safeParseNumber(event.target.value); + } else if (modifiers.includes("boolean")) { + return safeParseBoolean(event.target.value); + } + return modifiers.includes("trim") ? event.target.value.trim() : event.target.value; } }); } @@ -2939,6 +2969,19 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); cleanup22(); }); }); + interceptClone((from, to) => { + if (from._x_dataStack) { + to._x_dataStack = from._x_dataStack; + to.setAttribute("data-has-alpine-state", true); + } + }); + function shouldSkipRegisteringDataDuringClone(el) { + if (!isCloning) + return false; + if (isCloningLegacy) + return true; + return el.hasAttribute("data-has-alpine-state"); + } // packages/alpinejs/src/directives/x-show.js directive("show", (el, { modifiers, expression }, { effect: effect3 }) => { diff --git a/alpinejs/packages/alpinejs/dist/cdn.min.js b/alpinejs/packages/alpinejs/dist/cdn.min.js index 55806d6..b04dc2f 100644 --- a/alpinejs/packages/alpinejs/dist/cdn.min.js +++ b/alpinejs/packages/alpinejs/dist/cdn.min.js @@ -1,5 +1,5 @@ -(()=>{var Ze=!1,Qe=!1,H=[],et=-1;function zt(e){En(e)}function En(e){H.includes(e)||H.push(e),vn()}function Ee(e){let t=H.indexOf(e);t!==-1&&t>et&&H.splice(t,1)}function vn(){!Qe&&!Ze&&(Ze=!0,queueMicrotask(Sn))}function Sn(){Ze=!1,Qe=!0;for(let e=0;ee.effect(t,{scheduler:r=>{tt?zt(r):r()}}),rt=e.raw}function nt(e){I=e}function qt(e){let t=()=>{};return[n=>{let i=I(n);return e._x_effects||(e._x_effects=new Set,e._x_runEffects=()=>{e._x_effects.forEach(o=>o())}),e._x_effects.add(i),t=()=>{i!==void 0&&(e._x_effects.delete(i),L(i))},i},()=>{t()}]}function q(e,t,r={}){e.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!0,composed:!0,cancelable:!0}))}function O(e,t){if(typeof ShadowRoot=="function"&&e instanceof ShadowRoot){Array.from(e.children).forEach(i=>O(i,t));return}let r=!1;if(t(e,()=>r=!0),r)return;let n=e.firstElementChild;for(;n;)O(n,t,!1),n=n.nextElementSibling}function v(e,...t){console.warn(`Alpine Warning: ${e}`,...t)}var Ut=!1;function Wt(){Ut&&v("Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems."),Ut=!0,document.body||v("Unable to initialize. Trying to load Alpine before `` is available. Did you forget to add `defer` in Alpine's ` + ``` That's it! Alpine is now available for use inside your page. diff --git a/alpinejs/packages/docs/src/en/plugins/anchor.md b/alpinejs/packages/docs/src/en/plugins/anchor.md new file mode 100644 index 0000000..3543d68 --- /dev/null +++ b/alpinejs/packages/docs/src/en/plugins/anchor.md @@ -0,0 +1,213 @@ +--- +order: 5 +title: Anchor +description: Anchor an element's positioning to another element on the pageg +graph_image: https://alpinejs.dev/social_anchor.jpg +--- + +# Anchor Plugin + +Alpine's Anchor plugin allows you easily anchor an element's positioning to another element on the page. + +This functionality is useful when creating dropdown menus, popovers, dialogs, and tooltips with Alpine. + +The "anchoring" functionality used in this plugin is provided by the [Floating UI](https://floating-ui.com/) project. + + +## Installation + +You can use this plugin by either including it from a ` + + + +``` + +### Via NPM + +You can install Anchor from NPM for use inside your bundle like so: + +```shell +npm install @alpinejs/anchor +``` + +Then initialize it from your bundle: + +```js +import Alpine from 'alpinejs' +import anchor from '@alpinejs/anchor' + +Alpine.plugin(anchor) + +... +``` + + +## x-anchor + +The primary API for using this plugin is the `x-anchor` directive. + +To use this plugin, add the `x-anchor` directive to any element and pass it a reference to the element you want to anchor it's position to (often a button on the page). + +By default, `x-anchor` will set the the element's CSS to `position: absolute` and the appropriate `top` and `left` values. If the anchored element is normally displayed below the reference element but doesn't have room on the page, it's styling will be adjusted to render above the element. + +For example, here's a simple dropdown anchored to the button that toggles it: + +```alpine +
+ + +
+ Dropdown content +
+
+``` + + +
+
+ +
+ +
+ Dropdown content +
+
+ + + +## Positioning + +`x-anchor` allows you to customize the positioning of the anchored element using the following modifiers: + +* Bottom: `.bottom`, `.bottom-start`, `.bottom-end` +* Top: `.top`, `.top-start`, `.top-end` +* Left: `.left`, `.left-start`, `.left-end` +* Right: `.right`, `.right-start`, `.right-end` + +Here is an example of using `.bottom-start` to position a dropdown below and to the right of the reference element: + +```alpine +
+ + +
+ Dropdown content +
+
+``` + + +
+
+ +
+ +
+ Dropdown content +
+
+ + + +## Offset + +You can add an offset to your anchored element using the `.offset.[px value]` modifier like so: + +```alpine +
+ + +
+ Dropdown content +
+
+``` + + +
+
+ +
+ +
+ Dropdown content +
+
+ + + +## Manual styling + +By default, `x-anchor` applies the positioning styles to your element under the hood. If you'd prefer full control over styling, you can pass the `.no-style` modifer and use the `$anchor` magic to access the values inside another Alpine expression. + +Below is an example of bypassing `x-anchor`'s internal styling and instead applying the styles yourself using `x-bind:style`: + +```alpine +
+ + +
+ Dropdown content +
+
+``` + + +
+
+ +
+ +
+ Dropdown content +
+
+ + + +## Anchor to an ID + +The examples thus far have all been anchoring to other elements using Alpine refs. + +Because `x-anchor` accepts a reference to any DOM element, you can use utilities like `document.getElementById()` to anchor to an element by its `id` attribute: + +```alpine +
+ + +
+ Dropdown content +
+
+``` + + +
+
+ +
+ + +
+ Dropdown content +
+
+ + diff --git a/alpinejs/packages/docs/src/en/plugins/morph.md b/alpinejs/packages/docs/src/en/plugins/morph.md index 135a459..b8a8769 100644 --- a/alpinejs/packages/docs/src/en/plugins/morph.md +++ b/alpinejs/packages/docs/src/en/plugins/morph.md @@ -1,5 +1,5 @@ --- -order: 5 +order: 6 title: Morph description: Morph an element into the provided HTML graph_image: https://alpinejs.dev/social_morph.jpg diff --git a/alpinejs/packages/focus/dist/cdn.js b/alpinejs/packages/focus/dist/cdn.js index bc7c110..ac77f9b 100644 --- a/alpinejs/packages/focus/dist/cdn.js +++ b/alpinejs/packages/focus/dist/cdn.js @@ -941,13 +941,13 @@ if (oldValue === value) return; if (value && !oldValue) { + if (modifiers.includes("noscroll")) + undoDisableScrolling = disableScrolling(); + if (modifiers.includes("inert")) + undoInert = setInert(el); setTimeout(() => { - if (modifiers.includes("inert")) - undoInert = setInert(el); - if (modifiers.includes("noscroll")) - undoDisableScrolling = disableScrolling(); trap.activate(); - }); + }, 15); } if (!value && oldValue) { releaseFocus(); diff --git a/alpinejs/packages/focus/dist/cdn.min.js b/alpinejs/packages/focus/dist/cdn.min.js index e66df21..b2efb3a 100644 --- a/alpinejs/packages/focus/dist/cdn.min.js +++ b/alpinejs/packages/focus/dist/cdn.min.js @@ -1,4 +1,4 @@ -(()=>{var K=["input","select","textarea","a[href]","button","[tabindex]:not(slot)","audio[controls]","video[controls]",'[contenteditable]:not([contenteditable="false"])',"details>summary:first-of-type","details"],I=K.join(","),V=typeof Element>"u",N=V?function(){}:Element.prototype.matches||Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector,G=!V&&Element.prototype.getRootNode?function(i){return i.getRootNode()}:function(i){return i.ownerDocument},_=function(e,t,a){var n=Array.prototype.slice.apply(e.querySelectorAll(I));return t&&N.call(e,I)&&n.unshift(e),n=n.filter(a),n},$=function i(e,t,a){for(var n=[],r=Array.from(e);r.length;){var s=r.shift();if(s.tagName==="SLOT"){var l=s.assignedElements(),m=l.length?l:s.children,h=i(m,!0,a);a.flatten?n.push.apply(n,h):n.push({scope:s,candidates:h})}else{var v=N.call(s,I);v&&a.filter(s)&&(t||!e.includes(s))&&n.push(s);var p=s.shadowRoot||typeof a.getShadowRoot=="function"&&a.getShadowRoot(s),y=!a.shadowRootFilter||a.shadowRootFilter(s);if(p&&y){var T=i(p===!0?s.children:p.children,!0,a);a.flatten?n.push.apply(n,T):n.push({scope:s,candidates:T})}else r.unshift.apply(r,s.children)}}return n},Y=function(e,t){return e.tabIndex<0&&(t||/^(AUDIO|VIDEO|DETAILS)$/.test(e.tagName)||e.isContentEditable)&&isNaN(parseInt(e.getAttribute("tabindex"),10))?0:e.tabIndex},se=function(e,t){return e.tabIndex===t.tabIndex?e.documentOrder-t.documentOrder:e.tabIndex-t.tabIndex},Z=function(e){return e.tagName==="INPUT"},ce=function(e){return Z(e)&&e.type==="hidden"},le=function(e){var t=e.tagName==="DETAILS"&&Array.prototype.slice.apply(e.children).some(function(a){return a.tagName==="SUMMARY"});return t},fe=function(e,t){for(var a=0;asummary:first-of-type"),s=r?e.parentElement:e;if(N.call(s,"details:not([open]) *"))return!0;var l=G(e).host,m=l?.ownerDocument.contains(l)||e.ownerDocument.contains(e);if(!a||a==="full"){if(typeof n=="function"){for(var h=e;e;){var v=e.parentElement,p=G(e);if(v&&!v.shadowRoot&&n(v)===!0)return W(e);e.assignedSlot?e=e.assignedSlot:!v&&p!==e.ownerDocument?e=p.host:e=v}e=h}if(m)return!e.getClientRects().length}else if(a==="non-zero-area")return W(e);return!1},pe=function(e){if(/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(e.tagName))for(var t=e.parentElement;t;){if(t.tagName==="FIELDSET"&&t.disabled){for(var a=0;a=0)},me=function i(e){var t=[],a=[];return e.forEach(function(n,r){var s=!!n.scope,l=s?n.scope:n,m=Y(l,s),h=s?i(n.candidates):l;m===0?s?t.push.apply(t,h):t.push(l):a.push({documentOrder:r,tabIndex:m,item:n,isScope:s,content:h})}),a.sort(se).reduce(function(n,r){return r.isScope?n.push.apply(n,r.content):n.push(r.content),n},[]).concat(t)},z=function(e,t){t=t||{};var a;return t.getShadowRoot?a=$([e],t.includeContainer,{filter:M.bind(null,t),flatten:!1,getShadowRoot:t.getShadowRoot,shadowRootFilter:ge}):a=_(e,t.includeContainer,M.bind(null,t)),me(a)},L=function(e,t){t=t||{};var a;return t.getShadowRoot?a=$([e],t.includeContainer,{filter:x.bind(null,t),flatten:!0,getShadowRoot:t.getShadowRoot}):a=_(e,t.includeContainer,x.bind(null,t)),a},A=function(e,t){if(t=t||{},!e)throw new Error("No node provided");return N.call(e,I)===!1?!1:M(t,e)},ye=K.concat("iframe").join(","),D=function(e,t){if(t=t||{},!e)throw new Error("No node provided");return N.call(e,ye)===!1?!1:x(t,e)};function Q(i,e){var t=Object.keys(i);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(i);e&&(a=a.filter(function(n){return Object.getOwnPropertyDescriptor(i,n).enumerable})),t.push.apply(t,a)}return t}function X(i){for(var e=1;e0){var a=i[i.length-1];a!==t&&a.pause()}var n=i.indexOf(t);n===-1||i.splice(n,1),i.push(t)},deactivateTrap:function(t){var a=i.indexOf(t);a!==-1&&i.splice(a,1),i.length>0&&i[i.length-1].unpause()}}}(),Te=function(e){return e.tagName&&e.tagName.toLowerCase()==="input"&&typeof e.select=="function"},Fe=function(e){return e.key==="Escape"||e.key==="Esc"||e.keyCode===27},Se=function(e){return e.key==="Tab"||e.keyCode===9},ee=function(e){return setTimeout(e,0)},te=function(e,t){var a=-1;return e.every(function(n,r){return t(n)?(a=r,!1):!0}),a},O=function(e){for(var t=arguments.length,a=new Array(t>1?t-1:0),n=1;n1?c-1:0),f=1;f=0)o=a.activeElement;else{var u=r.tabbableGroups[0],c=u&&u.firstTabbableNode;o=c||h("fallbackFocus")}if(!o)throw new Error("Your focus-trap needs to have at least one focusable element");return o},p=function(){if(r.containerGroups=r.containers.map(function(o){var u=z(o,n.tabbableOptions),c=L(o,n.tabbableOptions);return{container:o,tabbableNodes:u,focusableNodes:c,firstTabbableNode:u.length>0?u[0]:null,lastTabbableNode:u.length>0?u[u.length-1]:null,nextTabbableNode:function(f){var g=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!0,w=c.findIndex(function(S){return S===f});if(!(w<0))return g?c.slice(w+1).find(function(S){return A(S,n.tabbableOptions)}):c.slice(0,w).reverse().find(function(S){return A(S,n.tabbableOptions)})}}}),r.tabbableGroups=r.containerGroups.filter(function(o){return o.tabbableNodes.length>0}),r.tabbableGroups.length<=0&&!h("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},y=function d(o){if(o!==!1&&o!==a.activeElement){if(!o||!o.focus){d(v());return}o.focus({preventScroll:!!n.preventScroll}),r.mostRecentlyFocusedNode=o,Te(o)&&o.select()}},T=function(o){var u=h("setReturnFocus",o);return u||(u===!1?!1:o)},F=function(o){var u=P(o);if(!(m(u)>=0)){if(O(n.clickOutsideDeactivates,o)){s.deactivate({returnFocus:n.returnFocusOnDeactivate&&!D(u,n.tabbableOptions)});return}O(n.allowOutsideClick,o)||o.preventDefault()}},R=function(o){var u=P(o),c=m(u)>=0;c||u instanceof Document?c&&(r.mostRecentlyFocusedNode=u):(o.stopImmediatePropagation(),y(r.mostRecentlyFocusedNode||v()))},k=function(o){var u=P(o);p();var c=null;if(r.tabbableGroups.length>0){var b=m(u),f=b>=0?r.containerGroups[b]:void 0;if(b<0)o.shiftKey?c=r.tabbableGroups[r.tabbableGroups.length-1].lastTabbableNode:c=r.tabbableGroups[0].firstTabbableNode;else if(o.shiftKey){var g=te(r.tabbableGroups,function(j){var B=j.firstTabbableNode;return u===B});if(g<0&&(f.container===u||D(u,n.tabbableOptions)&&!A(u,n.tabbableOptions)&&!f.nextTabbableNode(u,!1))&&(g=b),g>=0){var w=g===0?r.tabbableGroups.length-1:g-1,S=r.tabbableGroups[w];c=S.lastTabbableNode}}else{var C=te(r.tabbableGroups,function(j){var B=j.lastTabbableNode;return u===B});if(C<0&&(f.container===u||D(u,n.tabbableOptions)&&!A(u,n.tabbableOptions)&&!f.nextTabbableNode(u))&&(C=b),C>=0){var oe=C===r.tabbableGroups.length-1?0:C+1,ue=r.tabbableGroups[oe];c=ue.firstTabbableNode}}}else c=h("fallbackFocus");c&&(o.preventDefault(),y(c))},E=function(o){if(Fe(o)&&O(n.escapeDeactivates,o)!==!1){o.preventDefault(),s.deactivate();return}if(Se(o)){k(o);return}},q=function(o){var u=P(o);m(u)>=0||O(n.clickOutsideDeactivates,o)||O(n.allowOutsideClick,o)||(o.preventDefault(),o.stopImmediatePropagation())},H=function(){if(r.active)return J.activateTrap(s),r.delayInitialFocusTimer=n.delayInitialFocus?ee(function(){y(v())}):y(v()),a.addEventListener("focusin",R,!0),a.addEventListener("mousedown",F,{capture:!0,passive:!1}),a.addEventListener("touchstart",F,{capture:!0,passive:!1}),a.addEventListener("click",q,{capture:!0,passive:!1}),a.addEventListener("keydown",E,{capture:!0,passive:!1}),s},U=function(){if(r.active)return a.removeEventListener("focusin",R,!0),a.removeEventListener("mousedown",F,!0),a.removeEventListener("touchstart",F,!0),a.removeEventListener("click",q,!0),a.removeEventListener("keydown",E,!0),s};return s={get active(){return r.active},get paused(){return r.paused},activate:function(o){if(r.active)return this;var u=l(o,"onActivate"),c=l(o,"onPostActivate"),b=l(o,"checkCanFocusTrap");b||p(),r.active=!0,r.paused=!1,r.nodeFocusedBeforeActivation=a.activeElement,u&&u();var f=function(){b&&p(),H(),c&&c()};return b?(b(r.containers.concat()).then(f,f),this):(f(),this)},deactivate:function(o){if(!r.active)return this;var u=X({onDeactivate:n.onDeactivate,onPostDeactivate:n.onPostDeactivate,checkCanReturnFocus:n.checkCanReturnFocus},o);clearTimeout(r.delayInitialFocusTimer),r.delayInitialFocusTimer=void 0,U(),r.active=!1,r.paused=!1,J.deactivateTrap(s);var c=l(u,"onDeactivate"),b=l(u,"onPostDeactivate"),f=l(u,"checkCanReturnFocus"),g=l(u,"returnFocus","returnFocusOnDeactivate");c&&c();var w=function(){ee(function(){g&&y(T(r.nodeFocusedBeforeActivation)),b&&b()})};return g&&f?(f(T(r.nodeFocusedBeforeActivation)).then(w,w),this):(w(),this)},pause:function(){return r.paused||!r.active?this:(r.paused=!0,U(),this)},unpause:function(){return!r.paused||!r.active?this:(r.paused=!1,p(),H(),this)},updateContainerElements:function(o){var u=[].concat(o).filter(Boolean);return r.containers=u.map(function(c){return typeof c=="string"?a.querySelector(c):c}),r.active&&p(),this}},s.updateContainerElements(e),s};function ne(i){let e,t;window.addEventListener("focusin",()=>{e=t,t=document.activeElement}),i.magic("focus",a=>{let n=a;return{__noscroll:!1,__wrapAround:!1,within(r){return n=r,this},withoutScrolling(){return this.__noscroll=!0,this},noscroll(){return this.__noscroll=!0,this},withWrapAround(){return this.__wrapAround=!0,this},wrap(){return this.withWrapAround()},focusable(r){return D(r)},previouslyFocused(){return e},lastFocused(){return e},focused(){return t},focusables(){return Array.isArray(n)?n:L(n,{displayCheck:"none"})},all(){return this.focusables()},isFirst(r){let s=this.all();return s[0]&&s[0].isSameNode(r)},isLast(r){let s=this.all();return s.length&&s.slice(-1)[0].isSameNode(r)},getFirst(){return this.all()[0]},getLast(){return this.all().slice(-1)[0]},getNext(){let r=this.all(),s=document.activeElement;if(r.indexOf(s)!==-1)return this.__wrapAround&&r.indexOf(s)===r.length-1?r[0]:r[r.indexOf(s)+1]},getPrevious(){let r=this.all(),s=document.activeElement;if(r.indexOf(s)!==-1)return this.__wrapAround&&r.indexOf(s)===0?r.slice(-1)[0]:r[r.indexOf(s)-1]},first(){this.focus(this.getFirst())},last(){this.focus(this.getLast())},next(){this.focus(this.getNext())},previous(){this.focus(this.getPrevious())},prev(){return this.previous()},focus(r){r&&setTimeout(()=>{r.hasAttribute("tabindex")||r.setAttribute("tabindex","0"),r.focus({preventScroll:this._noscroll})})}}}),i.directive("trap",i.skipDuringClone((a,{expression:n,modifiers:r},{effect:s,evaluateLater:l,cleanup:m})=>{let h=l(n),v=!1,p={escapeDeactivates:!1,allowOutsideClick:!0,fallbackFocus:()=>a},y=a.querySelector("[autofocus]");y&&(p.initialFocus=y);let T=re(a,p),F=()=>{},R=()=>{},k=()=>{F(),F=()=>{},R(),R=()=>{},T.deactivate({returnFocus:!r.includes("noreturn")})};s(()=>h(E=>{v!==E&&(E&&!v&&setTimeout(()=>{r.includes("inert")&&(F=ae(a)),r.includes("noscroll")&&(R=Ee()),T.activate()}),!E&&v&&k(),v=!!E)})),m(k)},(a,{expression:n,modifiers:r},{evaluate:s})=>{r.includes("inert")&&s(n)&&ae(a)}))}function ae(i){let e=[];return ie(i,t=>{let a=t.hasAttribute("aria-hidden");t.setAttribute("aria-hidden","true"),e.push(()=>a||t.removeAttribute("aria-hidden"))}),()=>{for(;e.length;)e.pop()()}}function ie(i,e){i.isSameNode(document.body)||!i.parentNode||Array.from(i.parentNode.children).forEach(t=>{t.isSameNode(i)?ie(i.parentNode,e):e(t)})}function Ee(){let i=document.documentElement.style.overflow,e=document.documentElement.style.paddingRight,t=window.innerWidth-document.documentElement.clientWidth;return document.documentElement.style.overflow="hidden",document.documentElement.style.paddingRight=`${t}px`,()=>{document.documentElement.style.overflow=i,document.documentElement.style.paddingRight=e}}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(ne)});})(); +(()=>{var K=["input","select","textarea","a[href]","button","[tabindex]:not(slot)","audio[controls]","video[controls]",'[contenteditable]:not([contenteditable="false"])',"details>summary:first-of-type","details"],I=K.join(","),V=typeof Element>"u",N=V?function(){}:Element.prototype.matches||Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector,G=!V&&Element.prototype.getRootNode?function(i){return i.getRootNode()}:function(i){return i.ownerDocument},_=function(e,t,a){var n=Array.prototype.slice.apply(e.querySelectorAll(I));return t&&N.call(e,I)&&n.unshift(e),n=n.filter(a),n},$=function i(e,t,a){for(var n=[],r=Array.from(e);r.length;){var s=r.shift();if(s.tagName==="SLOT"){var l=s.assignedElements(),m=l.length?l:s.children,h=i(m,!0,a);a.flatten?n.push.apply(n,h):n.push({scope:s,candidates:h})}else{var v=N.call(s,I);v&&a.filter(s)&&(t||!e.includes(s))&&n.push(s);var p=s.shadowRoot||typeof a.getShadowRoot=="function"&&a.getShadowRoot(s),y=!a.shadowRootFilter||a.shadowRootFilter(s);if(p&&y){var T=i(p===!0?s.children:p.children,!0,a);a.flatten?n.push.apply(n,T):n.push({scope:s,candidates:T})}else r.unshift.apply(r,s.children)}}return n},Y=function(e,t){return e.tabIndex<0&&(t||/^(AUDIO|VIDEO|DETAILS)$/.test(e.tagName)||e.isContentEditable)&&isNaN(parseInt(e.getAttribute("tabindex"),10))?0:e.tabIndex},se=function(e,t){return e.tabIndex===t.tabIndex?e.documentOrder-t.documentOrder:e.tabIndex-t.tabIndex},Z=function(e){return e.tagName==="INPUT"},ce=function(e){return Z(e)&&e.type==="hidden"},le=function(e){var t=e.tagName==="DETAILS"&&Array.prototype.slice.apply(e.children).some(function(a){return a.tagName==="SUMMARY"});return t},fe=function(e,t){for(var a=0;asummary:first-of-type"),s=r?e.parentElement:e;if(N.call(s,"details:not([open]) *"))return!0;var l=G(e).host,m=l?.ownerDocument.contains(l)||e.ownerDocument.contains(e);if(!a||a==="full"){if(typeof n=="function"){for(var h=e;e;){var v=e.parentElement,p=G(e);if(v&&!v.shadowRoot&&n(v)===!0)return W(e);e.assignedSlot?e=e.assignedSlot:!v&&p!==e.ownerDocument?e=p.host:e=v}e=h}if(m)return!e.getClientRects().length}else if(a==="non-zero-area")return W(e);return!1},pe=function(e){if(/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(e.tagName))for(var t=e.parentElement;t;){if(t.tagName==="FIELDSET"&&t.disabled){for(var a=0;a=0)},me=function i(e){var t=[],a=[];return e.forEach(function(n,r){var s=!!n.scope,l=s?n.scope:n,m=Y(l,s),h=s?i(n.candidates):l;m===0?s?t.push.apply(t,h):t.push(l):a.push({documentOrder:r,tabIndex:m,item:n,isScope:s,content:h})}),a.sort(se).reduce(function(n,r){return r.isScope?n.push.apply(n,r.content):n.push(r.content),n},[]).concat(t)},z=function(e,t){t=t||{};var a;return t.getShadowRoot?a=$([e],t.includeContainer,{filter:M.bind(null,t),flatten:!1,getShadowRoot:t.getShadowRoot,shadowRootFilter:ge}):a=_(e,t.includeContainer,M.bind(null,t)),me(a)},L=function(e,t){t=t||{};var a;return t.getShadowRoot?a=$([e],t.includeContainer,{filter:x.bind(null,t),flatten:!0,getShadowRoot:t.getShadowRoot}):a=_(e,t.includeContainer,x.bind(null,t)),a},A=function(e,t){if(t=t||{},!e)throw new Error("No node provided");return N.call(e,I)===!1?!1:M(t,e)},ye=K.concat("iframe").join(","),D=function(e,t){if(t=t||{},!e)throw new Error("No node provided");return N.call(e,ye)===!1?!1:x(t,e)};function Q(i,e){var t=Object.keys(i);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(i);e&&(a=a.filter(function(n){return Object.getOwnPropertyDescriptor(i,n).enumerable})),t.push.apply(t,a)}return t}function X(i){for(var e=1;e0){var a=i[i.length-1];a!==t&&a.pause()}var n=i.indexOf(t);n===-1||i.splice(n,1),i.push(t)},deactivateTrap:function(t){var a=i.indexOf(t);a!==-1&&i.splice(a,1),i.length>0&&i[i.length-1].unpause()}}}(),Te=function(e){return e.tagName&&e.tagName.toLowerCase()==="input"&&typeof e.select=="function"},Fe=function(e){return e.key==="Escape"||e.key==="Esc"||e.keyCode===27},Se=function(e){return e.key==="Tab"||e.keyCode===9},ee=function(e){return setTimeout(e,0)},te=function(e,t){var a=-1;return e.every(function(n,r){return t(n)?(a=r,!1):!0}),a},O=function(e){for(var t=arguments.length,a=new Array(t>1?t-1:0),n=1;n1?c-1:0),f=1;f=0)o=a.activeElement;else{var u=r.tabbableGroups[0],c=u&&u.firstTabbableNode;o=c||h("fallbackFocus")}if(!o)throw new Error("Your focus-trap needs to have at least one focusable element");return o},p=function(){if(r.containerGroups=r.containers.map(function(o){var u=z(o,n.tabbableOptions),c=L(o,n.tabbableOptions);return{container:o,tabbableNodes:u,focusableNodes:c,firstTabbableNode:u.length>0?u[0]:null,lastTabbableNode:u.length>0?u[u.length-1]:null,nextTabbableNode:function(f){var g=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!0,w=c.findIndex(function(S){return S===f});if(!(w<0))return g?c.slice(w+1).find(function(S){return A(S,n.tabbableOptions)}):c.slice(0,w).reverse().find(function(S){return A(S,n.tabbableOptions)})}}}),r.tabbableGroups=r.containerGroups.filter(function(o){return o.tabbableNodes.length>0}),r.tabbableGroups.length<=0&&!h("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},y=function d(o){if(o!==!1&&o!==a.activeElement){if(!o||!o.focus){d(v());return}o.focus({preventScroll:!!n.preventScroll}),r.mostRecentlyFocusedNode=o,Te(o)&&o.select()}},T=function(o){var u=h("setReturnFocus",o);return u||(u===!1?!1:o)},F=function(o){var u=P(o);if(!(m(u)>=0)){if(O(n.clickOutsideDeactivates,o)){s.deactivate({returnFocus:n.returnFocusOnDeactivate&&!D(u,n.tabbableOptions)});return}O(n.allowOutsideClick,o)||o.preventDefault()}},R=function(o){var u=P(o),c=m(u)>=0;c||u instanceof Document?c&&(r.mostRecentlyFocusedNode=u):(o.stopImmediatePropagation(),y(r.mostRecentlyFocusedNode||v()))},k=function(o){var u=P(o);p();var c=null;if(r.tabbableGroups.length>0){var b=m(u),f=b>=0?r.containerGroups[b]:void 0;if(b<0)o.shiftKey?c=r.tabbableGroups[r.tabbableGroups.length-1].lastTabbableNode:c=r.tabbableGroups[0].firstTabbableNode;else if(o.shiftKey){var g=te(r.tabbableGroups,function(j){var B=j.firstTabbableNode;return u===B});if(g<0&&(f.container===u||D(u,n.tabbableOptions)&&!A(u,n.tabbableOptions)&&!f.nextTabbableNode(u,!1))&&(g=b),g>=0){var w=g===0?r.tabbableGroups.length-1:g-1,S=r.tabbableGroups[w];c=S.lastTabbableNode}}else{var C=te(r.tabbableGroups,function(j){var B=j.lastTabbableNode;return u===B});if(C<0&&(f.container===u||D(u,n.tabbableOptions)&&!A(u,n.tabbableOptions)&&!f.nextTabbableNode(u))&&(C=b),C>=0){var oe=C===r.tabbableGroups.length-1?0:C+1,ue=r.tabbableGroups[oe];c=ue.firstTabbableNode}}}else c=h("fallbackFocus");c&&(o.preventDefault(),y(c))},E=function(o){if(Fe(o)&&O(n.escapeDeactivates,o)!==!1){o.preventDefault(),s.deactivate();return}if(Se(o)){k(o);return}},q=function(o){var u=P(o);m(u)>=0||O(n.clickOutsideDeactivates,o)||O(n.allowOutsideClick,o)||(o.preventDefault(),o.stopImmediatePropagation())},H=function(){if(r.active)return J.activateTrap(s),r.delayInitialFocusTimer=n.delayInitialFocus?ee(function(){y(v())}):y(v()),a.addEventListener("focusin",R,!0),a.addEventListener("mousedown",F,{capture:!0,passive:!1}),a.addEventListener("touchstart",F,{capture:!0,passive:!1}),a.addEventListener("click",q,{capture:!0,passive:!1}),a.addEventListener("keydown",E,{capture:!0,passive:!1}),s},U=function(){if(r.active)return a.removeEventListener("focusin",R,!0),a.removeEventListener("mousedown",F,!0),a.removeEventListener("touchstart",F,!0),a.removeEventListener("click",q,!0),a.removeEventListener("keydown",E,!0),s};return s={get active(){return r.active},get paused(){return r.paused},activate:function(o){if(r.active)return this;var u=l(o,"onActivate"),c=l(o,"onPostActivate"),b=l(o,"checkCanFocusTrap");b||p(),r.active=!0,r.paused=!1,r.nodeFocusedBeforeActivation=a.activeElement,u&&u();var f=function(){b&&p(),H(),c&&c()};return b?(b(r.containers.concat()).then(f,f),this):(f(),this)},deactivate:function(o){if(!r.active)return this;var u=X({onDeactivate:n.onDeactivate,onPostDeactivate:n.onPostDeactivate,checkCanReturnFocus:n.checkCanReturnFocus},o);clearTimeout(r.delayInitialFocusTimer),r.delayInitialFocusTimer=void 0,U(),r.active=!1,r.paused=!1,J.deactivateTrap(s);var c=l(u,"onDeactivate"),b=l(u,"onPostDeactivate"),f=l(u,"checkCanReturnFocus"),g=l(u,"returnFocus","returnFocusOnDeactivate");c&&c();var w=function(){ee(function(){g&&y(T(r.nodeFocusedBeforeActivation)),b&&b()})};return g&&f?(f(T(r.nodeFocusedBeforeActivation)).then(w,w),this):(w(),this)},pause:function(){return r.paused||!r.active?this:(r.paused=!0,U(),this)},unpause:function(){return!r.paused||!r.active?this:(r.paused=!1,p(),H(),this)},updateContainerElements:function(o){var u=[].concat(o).filter(Boolean);return r.containers=u.map(function(c){return typeof c=="string"?a.querySelector(c):c}),r.active&&p(),this}},s.updateContainerElements(e),s};function ne(i){let e,t;window.addEventListener("focusin",()=>{e=t,t=document.activeElement}),i.magic("focus",a=>{let n=a;return{__noscroll:!1,__wrapAround:!1,within(r){return n=r,this},withoutScrolling(){return this.__noscroll=!0,this},noscroll(){return this.__noscroll=!0,this},withWrapAround(){return this.__wrapAround=!0,this},wrap(){return this.withWrapAround()},focusable(r){return D(r)},previouslyFocused(){return e},lastFocused(){return e},focused(){return t},focusables(){return Array.isArray(n)?n:L(n,{displayCheck:"none"})},all(){return this.focusables()},isFirst(r){let s=this.all();return s[0]&&s[0].isSameNode(r)},isLast(r){let s=this.all();return s.length&&s.slice(-1)[0].isSameNode(r)},getFirst(){return this.all()[0]},getLast(){return this.all().slice(-1)[0]},getNext(){let r=this.all(),s=document.activeElement;if(r.indexOf(s)!==-1)return this.__wrapAround&&r.indexOf(s)===r.length-1?r[0]:r[r.indexOf(s)+1]},getPrevious(){let r=this.all(),s=document.activeElement;if(r.indexOf(s)!==-1)return this.__wrapAround&&r.indexOf(s)===0?r.slice(-1)[0]:r[r.indexOf(s)-1]},first(){this.focus(this.getFirst())},last(){this.focus(this.getLast())},next(){this.focus(this.getNext())},previous(){this.focus(this.getPrevious())},prev(){return this.previous()},focus(r){r&&setTimeout(()=>{r.hasAttribute("tabindex")||r.setAttribute("tabindex","0"),r.focus({preventScroll:this._noscroll})})}}}),i.directive("trap",i.skipDuringClone((a,{expression:n,modifiers:r},{effect:s,evaluateLater:l,cleanup:m})=>{let h=l(n),v=!1,p={escapeDeactivates:!1,allowOutsideClick:!0,fallbackFocus:()=>a},y=a.querySelector("[autofocus]");y&&(p.initialFocus=y);let T=re(a,p),F=()=>{},R=()=>{},k=()=>{F(),F=()=>{},R(),R=()=>{},T.deactivate({returnFocus:!r.includes("noreturn")})};s(()=>h(E=>{v!==E&&(E&&!v&&(r.includes("noscroll")&&(R=Ee()),r.includes("inert")&&(F=ae(a)),setTimeout(()=>{T.activate()},15)),!E&&v&&k(),v=!!E)})),m(k)},(a,{expression:n,modifiers:r},{evaluate:s})=>{r.includes("inert")&&s(n)&&ae(a)}))}function ae(i){let e=[];return ie(i,t=>{let a=t.hasAttribute("aria-hidden");t.setAttribute("aria-hidden","true"),e.push(()=>a||t.removeAttribute("aria-hidden"))}),()=>{for(;e.length;)e.pop()()}}function ie(i,e){i.isSameNode(document.body)||!i.parentNode||Array.from(i.parentNode.children).forEach(t=>{t.isSameNode(i)?ie(i.parentNode,e):e(t)})}function Ee(){let i=document.documentElement.style.overflow,e=document.documentElement.style.paddingRight,t=window.innerWidth-document.documentElement.clientWidth;return document.documentElement.style.overflow="hidden",document.documentElement.style.paddingRight=`${t}px`,()=>{document.documentElement.style.overflow=i,document.documentElement.style.paddingRight=e}}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(ne)});})(); /*! Bundled license information: tabbable/dist/index.esm.js: diff --git a/alpinejs/packages/focus/dist/module.cjs.js b/alpinejs/packages/focus/dist/module.cjs.js index 5a8d600..4516902 100644 --- a/alpinejs/packages/focus/dist/module.cjs.js +++ b/alpinejs/packages/focus/dist/module.cjs.js @@ -998,13 +998,13 @@ function src_default(Alpine) { if (oldValue === value) return; if (value && !oldValue) { + if (modifiers.includes("noscroll")) + undoDisableScrolling = disableScrolling(); + if (modifiers.includes("inert")) + undoInert = setInert(el); setTimeout(() => { - if (modifiers.includes("inert")) - undoInert = setInert(el); - if (modifiers.includes("noscroll")) - undoDisableScrolling = disableScrolling(); trap.activate(); - }); + }, 15); } if (!value && oldValue) { releaseFocus(); diff --git a/alpinejs/packages/focus/dist/module.esm.js b/alpinejs/packages/focus/dist/module.esm.js index 64fb01f..596724b 100644 --- a/alpinejs/packages/focus/dist/module.esm.js +++ b/alpinejs/packages/focus/dist/module.esm.js @@ -940,13 +940,13 @@ function src_default(Alpine) { if (oldValue === value) return; if (value && !oldValue) { + if (modifiers.includes("noscroll")) + undoDisableScrolling = disableScrolling(); + if (modifiers.includes("inert")) + undoInert = setInert(el); setTimeout(() => { - if (modifiers.includes("inert")) - undoInert = setInert(el); - if (modifiers.includes("noscroll")) - undoDisableScrolling = disableScrolling(); trap.activate(); - }); + }, 15); } if (!value && oldValue) { releaseFocus(); diff --git a/alpinejs/packages/focus/package.json b/alpinejs/packages/focus/package.json index 7979fe9..73ee634 100644 --- a/alpinejs/packages/focus/package.json +++ b/alpinejs/packages/focus/package.json @@ -1,6 +1,6 @@ { "name": "@alpinejs/focus", - "version": "3.13.1", + "version": "3.13.3", "description": "Manage focus within a page", "homepage": "https://alpinejs.dev/plugins/focus", "repository": { diff --git a/alpinejs/packages/focus/src/index.js b/alpinejs/packages/focus/src/index.js index 74cf9e1..3e79699 100644 --- a/alpinejs/packages/focus/src/index.js +++ b/alpinejs/packages/focus/src/index.js @@ -134,12 +134,13 @@ export default function (Alpine) { // Start trapping. if (value && ! oldValue) { - setTimeout(() => { - if (modifiers.includes('inert')) undoInert = setInert(el) - if (modifiers.includes('noscroll')) undoDisableScrolling = disableScrolling() + if (modifiers.includes('noscroll')) undoDisableScrolling = disableScrolling() + if (modifiers.includes('inert')) undoInert = setInert(el) + // Activate the trap after a generous tick. (Needed to play nice with transitions...) + setTimeout(() => { trap.activate() - }); + }, 15) } // Stop trapping. diff --git a/alpinejs/packages/intersect/package.json b/alpinejs/packages/intersect/package.json index c733970..c6766b7 100644 --- a/alpinejs/packages/intersect/package.json +++ b/alpinejs/packages/intersect/package.json @@ -1,6 +1,6 @@ { "name": "@alpinejs/intersect", - "version": "3.13.1", + "version": "3.13.3", "description": "Trigger JavaScript when an element enters the viewport", "homepage": "https://alpinejs.dev/plugins/intersect", "repository": { diff --git a/alpinejs/packages/mask/package.json b/alpinejs/packages/mask/package.json index dbfd497..c4b00ef 100644 --- a/alpinejs/packages/mask/package.json +++ b/alpinejs/packages/mask/package.json @@ -1,6 +1,6 @@ { "name": "@alpinejs/mask", - "version": "3.13.1", + "version": "3.13.3", "description": "An Alpine plugin for input masking", "homepage": "https://alpinejs.dev/plugins/mask", "repository": { diff --git a/alpinejs/packages/morph/dist/cdn.js b/alpinejs/packages/morph/dist/cdn.js index f8b135b..02f9628 100644 --- a/alpinejs/packages/morph/dist/cdn.js +++ b/alpinejs/packages/morph/dist/cdn.js @@ -84,11 +84,16 @@ } } function patchChildren(from2, to) { + if (from2._x_teleport) + from2 = from2._x_teleport; + if (to._x_teleport) + to = to._x_teleport; let fromKeys = keyToMap(from2.children); let fromKeyHoldovers = {}; let currentTo = getFirstNode(to); let currentFrom = getFirstNode(from2); while (currentTo) { + seedingMatchingId(currentTo, currentFrom); let toKey = getKey(currentTo); let fromKey = getKey(currentFrom); if (!currentFrom) { @@ -294,9 +299,6 @@ return parent.firstChild; } function getNextSibling(parent, reference) { - if (reference._x_teleport) { - return reference._x_teleport; - } let next; if (parent instanceof Block) { next = parent.nextNode(reference); @@ -321,6 +323,13 @@ this.setAttributeNode(attr); }; } + function seedingMatchingId(to, from) { + let fromId = from && from._x_bindings && from._x_bindings.id; + if (!fromId) + return; + to.setAttribute("id", fromId); + to.id = fromId; + } // packages/morph/src/index.js function src_default(Alpine) { diff --git a/alpinejs/packages/morph/dist/cdn.min.js b/alpinejs/packages/morph/dist/cdn.min.js index ddd9ffb..d8502c1 100644 --- a/alpinejs/packages/morph/dist/cdn.min.js +++ b/alpinejs/packages/morph/dist/cdn.min.js @@ -1 +1 @@ -(()=>{function E(d,r,u){Y();let m,h,b,B,O,_,v,T,A,C;function W(e={}){let n=a=>a.getAttribute("key"),o=()=>{};O=e.updating||o,_=e.updated||o,v=e.removing||o,T=e.removed||o,A=e.adding||o,C=e.added||o,b=e.key||n,B=e.lookahead||!1}function D(e,n){if(q(e,n))return I(e,n);let o=!1;if(!y(O,e,n,()=>o=!0)){if(e.nodeType===1&&window.Alpine&&window.Alpine.cloneNode(e,n),X(n)){$(e,n),_(e,n);return}o||G(e,n),_(e,n),L(e,n)}}function q(e,n){return e.nodeType!=n.nodeType||e.nodeName!=n.nodeName||g(e)!=g(n)}function I(e,n){if(y(v,e))return;let o=n.cloneNode(!0);y(A,o)||(e.replaceWith(o),T(e),C(o))}function $(e,n){let o=n.nodeValue;e.nodeValue!==o&&(e.nodeValue=o)}function G(e,n){if(e._x_transitioning||e._x_isShown&&!n._x_isShown||!e._x_isShown&&n._x_isShown)return;let o=Array.from(e.attributes),a=Array.from(n.attributes);for(let i=o.length-1;i>=0;i--){let t=o[i].name;n.hasAttribute(t)||e.removeAttribute(t)}for(let i=a.length-1;i>=0;i--){let t=a[i].name,x=a[i].value;e.getAttribute(t)!==x&&e.setAttribute(t,x)}}function L(e,n){let o=H(e.children),a={},i=V(n),t=V(e);for(;i;){let s=g(i),p=g(t);if(!t)if(s&&a[s]){let l=a[s];e.appendChild(l),t=l}else{if(!y(A,i)){let l=i.cloneNode(!0);e.appendChild(l),C(l)}i=c(n,i);continue}let S=l=>l&&l.nodeType===8&&l.textContent==="[if BLOCK]>l&&l.nodeType===8&&l.textContent==="[if ENDBLOCK]>0)l--;else if(N(f)&&l===0){t=f;break}t=f}let R=t;l=0;let j=i;for(;i;){let f=c(n,i);if(S(f))l++;else if(N(f)&&l>0)l--;else if(N(f)&&l===0){i=f;break}i=f}let z=i,J=new w(k,R),Q=new w(j,z);L(J,Q);continue}if(t.nodeType===1&&B&&!t.isEqualNode(i)){let l=c(n,i),k=!1;for(;!k&&l;)l.nodeType===1&&t.isEqualNode(l)&&(k=!0,t=K(e,i,t),p=g(t)),l=c(n,l)}if(s!==p){if(!s&&p){a[p]=t,t=K(e,i,t),a[p].remove(),t=c(e,t),i=c(n,i);continue}if(s&&!p&&o[s]&&(t.replaceWith(o[s]),t=o[s]),s&&p){let l=o[s];if(l)a[p]=t,t.replaceWith(l),t=l;else{a[p]=t,t=K(e,i,t),a[p].remove(),t=c(e,t),i=c(n,i);continue}}}let P=t&&c(e,t);D(t,i),i=i&&c(n,i),t=P}let x=[];for(;t;)y(v,t)||x.push(t),t=c(e,t);for(;x.length;){let s=x.shift();s.remove(),T(s)}}function g(e){return e&&e.nodeType===1&&b(e)}function H(e){let n={};for(let o of e){let a=g(o);a&&(n[a]=o)}return n}function K(e,n,o){if(!y(A,n)){let a=n.cloneNode(!0);return e.insertBefore(a,o),C(a),a}return n}return W(u),m=d,h=typeof r=="string"?U(r):r,window.Alpine&&window.Alpine.closestDataStack&&!d._x_dataStack&&(h._x_dataStack=window.Alpine.closestDataStack(d),h._x_dataStack&&window.Alpine.cloneNode(d,h)),D(d,h),m=void 0,h=void 0,d}E.step=()=>{};E.log=()=>{};function y(d,...r){let u=!1;return d(...r,()=>u=!0),u}var F=!1;function U(d){let r=document.createElement("template");return r.innerHTML=d,r.content.firstElementChild}function X(d){return d.nodeType===3||d.nodeType===8}var w=class{constructor(r,u){this.startComment=r,this.endComment=u}get children(){let r=[],u=this.startComment.nextSibling;for(;u&&u!==this.endComment;)r.push(u),u=u.nextSibling;return r}appendChild(r){this.endComment.before(r)}get firstChild(){let r=this.startComment.nextSibling;if(r!==this.endComment)return r}nextNode(r){let u=r.nextSibling;if(u!==this.endComment)return u}insertBefore(r,u){return u.before(r),r}};function V(d){return d.firstChild}function c(d,r){if(r._x_teleport)return r._x_teleport;let u;return d instanceof w?u=d.nextNode(r):u=r.nextSibling,u}function Y(){if(F)return;F=!0;let d=Element.prototype.setAttribute,r=document.createElement("div");Element.prototype.setAttribute=function(m,h){if(!m.includes("@"))return d.call(this,m,h);r.innerHTML=``;let b=r.firstElementChild.getAttributeNode(m);r.firstElementChild.removeAttributeNode(b),this.setAttributeNode(b)}}function M(d){d.morph=E}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(M)});})(); +(()=>{function k(u,l,o){Y();let g,h,y,B,O,E,v,T,_,A;function V(e={}){let n=a=>a.getAttribute("key"),d=()=>{};O=e.updating||d,E=e.updated||d,v=e.removing||d,T=e.removed||d,_=e.adding||d,A=e.added||d,y=e.key||n,B=e.lookahead||!1}function D(e,n){if(W(e,n))return q(e,n);let d=!1;if(!b(O,e,n,()=>d=!0)){if(e.nodeType===1&&window.Alpine&&window.Alpine.cloneNode(e,n),X(n)){$(e,n),E(e,n);return}d||G(e,n),E(e,n),L(e,n)}}function W(e,n){return e.nodeType!=n.nodeType||e.nodeName!=n.nodeName||x(e)!=x(n)}function q(e,n){if(b(v,e))return;let d=n.cloneNode(!0);b(_,d)||(e.replaceWith(d),T(e),A(d))}function $(e,n){let d=n.nodeValue;e.nodeValue!==d&&(e.nodeValue=d)}function G(e,n){if(e._x_transitioning||e._x_isShown&&!n._x_isShown||!e._x_isShown&&n._x_isShown)return;let d=Array.from(e.attributes),a=Array.from(n.attributes);for(let i=d.length-1;i>=0;i--){let t=d[i].name;n.hasAttribute(t)||e.removeAttribute(t)}for(let i=a.length-1;i>=0;i--){let t=a[i].name,m=a[i].value;e.getAttribute(t)!==m&&e.setAttribute(t,m)}}function L(e,n){e._x_teleport&&(e=e._x_teleport),n._x_teleport&&(n=n._x_teleport);let d=H(e.children),a={},i=I(n),t=I(e);for(;i;){Z(i,t);let s=x(i),p=x(t);if(!t)if(s&&a[s]){let r=a[s];e.appendChild(r),t=r}else{if(!b(_,i)){let r=i.cloneNode(!0);e.appendChild(r),A(r)}i=c(n,i);continue}let C=r=>r&&r.nodeType===8&&r.textContent==="[if BLOCK]>r&&r.nodeType===8&&r.textContent==="[if ENDBLOCK]>0)r--;else if(S(f)&&r===0){t=f;break}t=f}let R=t;r=0;let j=i;for(;i;){let f=c(n,i);if(C(f))r++;else if(S(f)&&r>0)r--;else if(S(f)&&r===0){i=f;break}i=f}let z=i,J=new w(N,R),Q=new w(j,z);L(J,Q);continue}if(t.nodeType===1&&B&&!t.isEqualNode(i)){let r=c(n,i),N=!1;for(;!N&&r;)r.nodeType===1&&t.isEqualNode(r)&&(N=!0,t=K(e,i,t),p=x(t)),r=c(n,r)}if(s!==p){if(!s&&p){a[p]=t,t=K(e,i,t),a[p].remove(),t=c(e,t),i=c(n,i);continue}if(s&&!p&&d[s]&&(t.replaceWith(d[s]),t=d[s]),s&&p){let r=d[s];if(r)a[p]=t,t.replaceWith(r),t=r;else{a[p]=t,t=K(e,i,t),a[p].remove(),t=c(e,t),i=c(n,i);continue}}}let P=t&&c(e,t);D(t,i),i=i&&c(n,i),t=P}let m=[];for(;t;)b(v,t)||m.push(t),t=c(e,t);for(;m.length;){let s=m.shift();s.remove(),T(s)}}function x(e){return e&&e.nodeType===1&&y(e)}function H(e){let n={};for(let d of e){let a=x(d);a&&(n[a]=d)}return n}function K(e,n,d){if(!b(_,n)){let a=n.cloneNode(!0);return e.insertBefore(a,d),A(a),a}return n}return V(o),g=u,h=typeof l=="string"?U(l):l,window.Alpine&&window.Alpine.closestDataStack&&!u._x_dataStack&&(h._x_dataStack=window.Alpine.closestDataStack(u),h._x_dataStack&&window.Alpine.cloneNode(u,h)),D(u,h),g=void 0,h=void 0,u}k.step=()=>{};k.log=()=>{};function b(u,...l){let o=!1;return u(...l,()=>o=!0),o}var F=!1;function U(u){let l=document.createElement("template");return l.innerHTML=u,l.content.firstElementChild}function X(u){return u.nodeType===3||u.nodeType===8}var w=class{constructor(l,o){this.startComment=l,this.endComment=o}get children(){let l=[],o=this.startComment.nextSibling;for(;o&&o!==this.endComment;)l.push(o),o=o.nextSibling;return l}appendChild(l){this.endComment.before(l)}get firstChild(){let l=this.startComment.nextSibling;if(l!==this.endComment)return l}nextNode(l){let o=l.nextSibling;if(o!==this.endComment)return o}insertBefore(l,o){return o.before(l),l}};function I(u){return u.firstChild}function c(u,l){let o;return u instanceof w?o=u.nextNode(l):o=l.nextSibling,o}function Y(){if(F)return;F=!0;let u=Element.prototype.setAttribute,l=document.createElement("div");Element.prototype.setAttribute=function(g,h){if(!g.includes("@"))return u.call(this,g,h);l.innerHTML=``;let y=l.firstElementChild.getAttributeNode(g);l.firstElementChild.removeAttributeNode(y),this.setAttributeNode(y)}}function Z(u,l){let o=l&&l._x_bindings&&l._x_bindings.id;o&&(u.setAttribute("id",o),u.id=o)}function M(u){u.morph=k}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(M)});})(); diff --git a/alpinejs/packages/morph/dist/module.cjs.js b/alpinejs/packages/morph/dist/module.cjs.js index 667fd75..ab2c84a 100644 --- a/alpinejs/packages/morph/dist/module.cjs.js +++ b/alpinejs/packages/morph/dist/module.cjs.js @@ -109,11 +109,16 @@ function morph(from, toHtml, options) { } } function patchChildren(from2, to) { + if (from2._x_teleport) + from2 = from2._x_teleport; + if (to._x_teleport) + to = to._x_teleport; let fromKeys = keyToMap(from2.children); let fromKeyHoldovers = {}; let currentTo = getFirstNode(to); let currentFrom = getFirstNode(from2); while (currentTo) { + seedingMatchingId(currentTo, currentFrom); let toKey = getKey(currentTo); let fromKey = getKey(currentFrom); if (!currentFrom) { @@ -319,9 +324,6 @@ function getFirstNode(parent) { return parent.firstChild; } function getNextSibling(parent, reference) { - if (reference._x_teleport) { - return reference._x_teleport; - } let next; if (parent instanceof Block) { next = parent.nextNode(reference); @@ -346,6 +348,13 @@ function monkeyPatchDomSetAttributeToAllowAtSymbols() { this.setAttributeNode(attr); }; } +function seedingMatchingId(to, from) { + let fromId = from && from._x_bindings && from._x_bindings.id; + if (!fromId) + return; + to.setAttribute("id", fromId); + to.id = fromId; +} // packages/morph/src/index.js function src_default(Alpine) { diff --git a/alpinejs/packages/morph/dist/module.esm.js b/alpinejs/packages/morph/dist/module.esm.js index f94615c..5811847 100644 --- a/alpinejs/packages/morph/dist/module.esm.js +++ b/alpinejs/packages/morph/dist/module.esm.js @@ -83,11 +83,16 @@ function morph(from, toHtml, options) { } } function patchChildren(from2, to) { + if (from2._x_teleport) + from2 = from2._x_teleport; + if (to._x_teleport) + to = to._x_teleport; let fromKeys = keyToMap(from2.children); let fromKeyHoldovers = {}; let currentTo = getFirstNode(to); let currentFrom = getFirstNode(from2); while (currentTo) { + seedingMatchingId(currentTo, currentFrom); let toKey = getKey(currentTo); let fromKey = getKey(currentFrom); if (!currentFrom) { @@ -293,9 +298,6 @@ function getFirstNode(parent) { return parent.firstChild; } function getNextSibling(parent, reference) { - if (reference._x_teleport) { - return reference._x_teleport; - } let next; if (parent instanceof Block) { next = parent.nextNode(reference); @@ -320,6 +322,13 @@ function monkeyPatchDomSetAttributeToAllowAtSymbols() { this.setAttributeNode(attr); }; } +function seedingMatchingId(to, from) { + let fromId = from && from._x_bindings && from._x_bindings.id; + if (!fromId) + return; + to.setAttribute("id", fromId); + to.id = fromId; +} // packages/morph/src/index.js function src_default(Alpine) { diff --git a/alpinejs/packages/morph/package.json b/alpinejs/packages/morph/package.json index c47be90..abd5d9a 100644 --- a/alpinejs/packages/morph/package.json +++ b/alpinejs/packages/morph/package.json @@ -1,6 +1,6 @@ { "name": "@alpinejs/morph", - "version": "3.13.1", + "version": "3.13.3", "description": "Diff and patch a block of HTML on a page with an HTML template", "homepage": "https://alpinejs.dev/plugins/morph", "repository": { diff --git a/alpinejs/packages/morph/src/morph.js b/alpinejs/packages/morph/src/morph.js index 928d1ab..7cb3ceb 100644 --- a/alpinejs/packages/morph/src/morph.js +++ b/alpinejs/packages/morph/src/morph.js @@ -120,6 +120,11 @@ export function morph(from, toHtml, options) { } function patchChildren(from, to) { + // If we hit a