Allow 'unset' directive for hx-vals and hx-vars (#1013)

* Allow 'unset' directive for hx-vals and hx-vars

* PR feedback

Co-authored-by: Ben Lenton <benlenton@Bens-MacBook-Air.local>
This commit is contained in:
Ben Lenton 2022-09-30 21:08:46 +01:00 committed by GitHub
parent 7338d567dc
commit c3662ce00d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 140 additions and 3 deletions

View File

@ -2419,6 +2419,9 @@ return (function () {
if (attributeValue) {
var str = attributeValue.trim();
var evaluateValue = evalAsDefault;
if (str === "unset") {
return null;
}
if (str.indexOf("javascript:") === 0) {
str = str.substr(11);
evaluateValue = true;
@ -3294,4 +3297,3 @@ return (function () {
}
)()
}));

View File

@ -184,5 +184,72 @@ describe("hx-vals attribute", function() {
div.innerHTML.should.equal("Clicked!");
});
it('basic hx-vals can be unset', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
var params = getParameters(xhr);
params.should.be.empty;
xhr.respond(200, {}, "Clicked!")
});
make(
"<div hx-vals='\"i1\":\"test\"'>\
<div id='d1' hx-post='/vars' hx-vals='unset'></div>\
</div>"
);
var div = byId("d1");
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
});
it('basic hx-vals with braces can be unset', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
var params = getParameters(xhr);
params.should.be.empty;
xhr.respond(200, {}, "Clicked!")
});
make(
"<div hx-vals='{\"i1\":\"test\"}'>\
<div id='d1' hx-post='/vars' hx-vals='unset'></div>\
</div>"
);
var div = byId("d1");
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('multiple hx-vals can be unset', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
var params = getParameters(xhr);
params.should.be.empty;
xhr.respond(200, {}, "Clicked!")
});
make(
"<div hx-vals='\"v1\":\"test\", \"v2\":42'>\
<div id='d1' hx-post='/vars' hx-vals='unset'></div>\
</div>"
);
var div = byId("d1");
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('unsetting hx-vals maintains input values', function () {
this.server.respondWith("POST", "/include", function (xhr) {
var params = getParameters(xhr);
params['i1'].should.equal("test");
xhr.respond(200, {}, "Clicked!")
});
var div = make(
"<div hx-target='this' hx-vals='\"i1\":\"best\"'>\
<input hx-post='/include' hx-vals='unset' hx-trigger='click' id='i1' name='i1' value='test'/>\
</div>"
)
var input = byId("i1")
input.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
});

View File

@ -84,4 +84,72 @@ describe("hx-vars attribute", function() {
div.innerHTML.should.equal("Clicked!");
});
});
it('basic hx-vars can be unset', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
var params = getParameters(xhr);
params.should.be.empty;
xhr.respond(200, {}, "Clicked!")
});
make(
"<div hx-vars='i1:\"test\"'>\
<div id='d1' hx-post='/vars' hx-vars='unset'></div>\
</div>"
);
var div = byId("d1");
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('basic hx-vars with braces can be unset', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
var params = getParameters(xhr);
params.should.be.empty;
xhr.respond(200, {}, "Clicked!")
});
make(
"<div hx-vars='{i1:\"test\"}'>\
<div id='d1' hx-post='/vars' hx-vars='unset'></div>\
</div>"
);
var div = byId("d1");
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('multiple hx-vars can be unset', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
var params = getParameters(xhr);
params.should.be.empty;
xhr.respond(200, {}, "Clicked!")
});
make(
"<div hx-vars='v1:\"test\", v2:42'>\
<div id='d1' hx-post='/vars' hx-vars='unset'></div>\
</div>"
);
var div = byId("d1");
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('unsetting hx-vars maintains input values', function () {
this.server.respondWith("POST", "/include", function (xhr) {
var params = getParameters(xhr);
params['i1'].should.equal("test");
xhr.respond(200, {}, "Clicked!")
});
var div = make(
"<div hx-target='this' hx-vars='i1:\"best\"'>\
<input hx-post='/include' hx-vars='unset' hx-trigger='click' id='i1' name='i1' value='test'/>\
</div>"
)
var input = byId("i1")
input.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
});