smoothly 1.0.0-alpha.146 → 1.0.0-alpha.147
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/smoothly-accordion_73.cjs.entry.js +23 -16
- package/dist/cjs/smoothly-accordion_73.cjs.entry.js.map +1 -1
- package/dist/collection/components/picker/demo/index.js +15 -15
- package/dist/collection/components/picker/demo/index.js.map +1 -1
- package/dist/collection/components/picker/demo/style.css +4 -0
- package/dist/collection/components/picker/menu/index.js +7 -0
- package/dist/collection/components/picker/menu/index.js.map +1 -1
- package/dist/custom-elements/index.js +23 -16
- package/dist/custom-elements/index.js.map +1 -1
- package/dist/esm/smoothly-accordion_73.entry.js +23 -16
- package/dist/esm/smoothly-accordion_73.entry.js.map +1 -1
- package/dist/smoothly/{p-d452509e.entry.js → p-798b6725.entry.js} +2 -2
- package/dist/smoothly/{p-d452509e.entry.js.map → p-798b6725.entry.js.map} +1 -1
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/types/components/picker/demo/index.d.ts +6 -2
- package/dist/types/components/picker/menu/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -9880,7 +9880,7 @@ const SmoothlyPicker = class {
|
|
|
9880
9880
|
};
|
|
9881
9881
|
SmoothlyPicker.style = styleCss$z;
|
|
9882
9882
|
|
|
9883
|
-
const styleCss$y = ".sc-smoothly-picker-demo-h{display:flex;flex-direction:column}.sc-smoothly-picker-demo-h smoothly-form.sc-smoothly-picker-demo{max-width:50rem}.sc-smoothly-picker-demo-h .counter.sc-smoothly-picker-demo{position:relative;width:3rem;height:3rem}.sc-smoothly-picker-demo-h .counter-button.sc-smoothly-picker-demo{position:absolute;top:0;left:0;padding:0;margin:0;height:3rem;width:3rem;background-color:inherit;border:none;display:flex;justify-content:center;align-items:center}";
|
|
9883
|
+
const styleCss$y = ".sc-smoothly-picker-demo-h{display:flex;flex-direction:column}.sc-smoothly-picker-demo-h smoothly-form.sc-smoothly-picker-demo{max-width:50rem}.sc-smoothly-picker-demo-h .counter.sc-smoothly-picker-demo{position:relative;width:3rem;height:3rem}.sc-smoothly-picker-demo-h .counter-button.sc-smoothly-picker-demo{position:absolute;top:0;left:0;padding:0;margin:0;height:3rem;width:3rem;background-color:inherit;border:none;display:flex;justify-content:center;align-items:center}.sc-smoothly-picker-demo-h .controlled.sc-smoothly-picker-demo smoothly-input.sc-smoothly-picker-demo:not([readonly]),.sc-smoothly-picker-demo-h .controlled.sc-smoothly-picker-demo smoothly-picker.sc-smoothly-picker-demo:not([readonly]){outline:1px solid rgb(var(--smoothly-success-color))}";
|
|
9884
9884
|
|
|
9885
9885
|
function validateEmail(email) {
|
|
9886
9886
|
return email.match(/^.+@.+/) ? true : { result: false, notice: redirect.Notice.failed("That is not an email") };
|
|
@@ -9896,18 +9896,18 @@ const SmoothlyPickerDemo = class {
|
|
|
9896
9896
|
this.counter = 3;
|
|
9897
9897
|
this.data = {
|
|
9898
9898
|
message: "hello world",
|
|
9899
|
-
emails: ["jessie@rocket.com", "james@rocket.com"],
|
|
9899
|
+
emails: [{ value: "jessie@rocket.com" }, { value: "james@rocket.com" }],
|
|
9900
9900
|
options: [
|
|
9901
|
-
"giovani@rocket.com",
|
|
9902
|
-
"john@example.com",
|
|
9903
|
-
"jane@example.com",
|
|
9904
|
-
"jack@example.com",
|
|
9905
|
-
"jessica@example.com",
|
|
9906
|
-
"julia@example.com",
|
|
9907
|
-
"jayden@example.com",
|
|
9908
|
-
"jake@example.com",
|
|
9909
|
-
"jamie@example.com",
|
|
9910
|
-
"jasmine@example.com",
|
|
9901
|
+
{ value: "giovani@rocket.com" },
|
|
9902
|
+
{ value: "john@example.com" },
|
|
9903
|
+
{ value: "jane@example.com" },
|
|
9904
|
+
{ value: "jack@example.com" },
|
|
9905
|
+
{ value: "jessica@example.com" },
|
|
9906
|
+
{ value: "julia@example.com" },
|
|
9907
|
+
{ value: "jayden@example.com" },
|
|
9908
|
+
{ value: "jake@example.com" },
|
|
9909
|
+
{ value: "jamie@example.com" },
|
|
9910
|
+
{ value: "jasmine@example.com" },
|
|
9911
9911
|
],
|
|
9912
9912
|
};
|
|
9913
9913
|
this.change = undefined;
|
|
@@ -9934,13 +9934,13 @@ const SmoothlyPickerDemo = class {
|
|
|
9934
9934
|
}
|
|
9935
9935
|
render() {
|
|
9936
9936
|
var _a, _b;
|
|
9937
|
-
return (index.h(index.Host, null, index.h("div", null, index.h("smoothly-button", { onClick: () => (this.counter += 1) }, "Add one"), index.h("smoothly-button", { onClick: () => (this.counter -= 1) }, "Remove one"), index.h("smoothly-picker", { class: "counter", key: Array.from({ length: this.counter }).toString(), name: "counter", multiple: true, mutable: true, onSmoothlyInput: e => console.log("demo counter input", e.detail) }, Array.from({ length: this.counter }).map((_, index$1) => (index.h("smoothly-picker-option", { value: index$1, selected: index$1 < this.counter - 1 }, index$1))), index.h("span", { slot: "search" }, "Search"), index.h("button", { slot: "child", class: "counter-button" }, index.h("smoothly-icon", { name: "add-outline" })))), index.h("smoothly-button", { onClick: () => this.clickHandler() }, !this.change ? "start edit" : "end edit"), index.h("
|
|
9937
|
+
return (index.h(index.Host, null, index.h("div", null, index.h("smoothly-button", { onClick: () => (this.counter += 1) }, "Add one"), index.h("smoothly-button", { onClick: () => (this.counter -= 1) }, "Remove one"), index.h("smoothly-picker", { class: "counter", key: Array.from({ length: this.counter }).toString(), name: "counter", multiple: true, mutable: true, onSmoothlyInput: e => console.log("demo counter input", e.detail) }, Array.from({ length: this.counter }).map((_, index$1) => (index.h("smoothly-picker-option", { value: index$1, selected: index$1 < this.counter - 1 }, index$1))), index.h("span", { slot: "search" }, "Search"), index.h("button", { slot: "child", class: "counter-button" }, index.h("smoothly-icon", { name: "add-outline" })))), index.h("h5", null, "Controlled input"), index.h("smoothly-button", { color: "secondary", onClick: () => this.clickHandler() }, !this.change ? "start edit" : "end edit"), index.h("smoothly-form", { class: "controlled", looks: "line", onSmoothlyFormInput: e => this.inputHandler(e) }, index.h("smoothly-input", { readonly: !this.change, name: "message", value: this.data.message }, "Message"), index.h("smoothly-picker", { name: "emails", mutable: true, multiple: true, readonly: !this.change, validator: validateEmail, onSmoothlyPickerLoaded: e => this.loadedHandler(e) }, index.h("span", { slot: "label" }, "Emails"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-icon", { size: "tiny", slot: "display", name: "person-add-outline" }), ((_b = (_a = this.change) === null || _a === void 0 ? void 0 : _a.emails) !== null && _b !== void 0 ? _b : this.data.emails).map(email => {
|
|
9938
9938
|
var _a;
|
|
9939
|
-
return (index.h("smoothly-picker-option", { key: email, value: email, selected: true, search: [(_a = this.users[email]) !== null && _a !== void 0 ? _a : []].flat() }, index.h("span", null, this.users[email]), index.h("span", { slot: "label" }, email), index.h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
|
|
9939
|
+
return (index.h("smoothly-picker-option", { key: email.value, value: email, selected: true, search: [(_a = this.users[email.value]) !== null && _a !== void 0 ? _a : []].flat() }, index.h("span", null, this.users[email.value]), index.h("span", { slot: "label" }, email.value), index.h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
|
|
9940
9940
|
}), this.data.options.map(email => {
|
|
9941
9941
|
var _a;
|
|
9942
|
-
return (index.h("smoothly-picker-option", { key: email, value: email, search: [(_a = this.users[email]) !== null && _a !== void 0 ? _a : []].flat() }, index.h("span", null, this.users[email]), index.h("span", { slot: "label" }, email), index.h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
|
|
9943
|
-
})), index.h("smoothly-
|
|
9942
|
+
return (index.h("smoothly-picker-option", { key: email.value, value: email, search: [(_a = this.users[email.value]) !== null && _a !== void 0 ? _a : []].flat() }, index.h("span", null, this.users[email.value]), index.h("span", { slot: "label" }, email.value), index.h("smoothly-icon", { size: "tiny", slot: "display", name: "person-outline" })));
|
|
9943
|
+
})), index.h("smoothly-input-clear", { slot: "submit", type: "form", color: "danger", fill: "solid" }, "Clear"), index.h("smoothly-button", { slot: "submit", color: "secondary", onClick: () => { var _a; return (_a = this.controls) === null || _a === void 0 ? void 0 : _a.clear(); } }, "Removed added by mutation"), index.h("smoothly-submit", { size: "icon", slot: "submit" }, index.h("smoothly-icon", { name: "checkmark-circle" }))), index.h("h5", null, "uncontrolled inputs"), index.h("smoothly-form", { onSmoothlyFormSubmit: e => console.log("submitted", e.detail), looks: "line" }, index.h("smoothly-input", { name: "purpose", type: "text" }, "Purpose"), index.h("smoothly-picker", { multiple: true, mutable: true, name: "emails", validator: validateEmail }, index.h("span", { slot: "label" }, "Emails"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "james@rocket.com" }, "james@rocket.com"), index.h("smoothly-picker-option", { selected: true, value: "jessie@rocket.com" }, "jessie@rocket.com"), index.h("smoothly-picker-option", { value: "giovanni@rocket.com" }, "giovanni@rocket.com")), index.h("smoothly-submit", { slot: "submit" }, "Submit"), index.h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), index.h("smoothly-picker", { name: "shape" }, index.h("span", { slot: "label" }, "Shape"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle" }, index.h("span", { slot: "label" }, "Circle"), index.h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "cube" }, index.h("span", { slot: "label" }, "Cube"), index.h("smoothly-icon", { size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { value: "square", selected: true }, index.h("span", { slot: "label" }, "Square"), index.h("smoothly-icon", { size: "tiny", name: "square-outline" }))), index.h("smoothly-picker", { multiple: true, readonly: true, name: "animals" }, index.h("span", { slot: "label" }, "Animals"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), index.h("smoothly-picker-option", { value: "dog" }, "Dog"), index.h("smoothly-picker-option", { value: "fish" }, "Fish"))), index.h("smoothly-picker", { looks: "border", name: "icon", multiple: true }, index.h("span", { slot: "label" }, "Icon"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle", required: true }, index.h("span", { slot: "label" }, "Circle"), index.h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "cube" }, index.h("span", { slot: "label" }, "Cube"), index.h("smoothly-icon", { size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { value: "square", selected: true }, index.h("span", { slot: "label" }, "Square"), index.h("smoothly-icon", { size: "tiny", name: "square-outline" })), index.h("smoothly-picker-option", { value: "airplane" }, index.h("span", { slot: "label" }, "Airplane"), index.h("smoothly-icon", { size: "tiny", name: "airplane-outline" })), index.h("smoothly-picker-option", { value: "alarm" }, index.h("span", { slot: "label" }, "Alarm"), index.h("smoothly-icon", { size: "tiny", name: "alarm-outline" })), index.h("smoothly-picker-option", { value: "archive" }, index.h("span", { slot: "label" }, "Archive"), index.h("smoothly-icon", { size: "tiny", name: "archive-outline" })), index.h("smoothly-picker-option", { value: "bag" }, index.h("span", { slot: "label" }, "Bag"), index.h("smoothly-icon", { size: "tiny", name: "bag-outline" })), index.h("smoothly-picker-option", { value: "cafe" }, index.h("span", { slot: "label" }, "Cafe"), index.h("smoothly-icon", { size: "tiny", name: "cafe-outline" })), index.h("smoothly-picker-option", { value: "disc" }, index.h("span", { slot: "label" }, "Disc"), index.h("smoothly-icon", { size: "tiny", name: "disc-outline" })), index.h("smoothly-picker-option", { value: "earth" }, index.h("span", { slot: "label" }, "Earth"), index.h("smoothly-icon", { size: "tiny", name: "earth-outline" })), index.h("smoothly-picker-option", { value: "fast-food" }, index.h("span", { slot: "label" }, "Fast food"), index.h("smoothly-icon", { size: "tiny", name: "fast-food-outline" })))));
|
|
9944
9944
|
}
|
|
9945
9945
|
};
|
|
9946
9946
|
SmoothlyPickerDemo.style = styleCss$y;
|
|
@@ -10027,6 +10027,13 @@ const SmoothlyPickerMenu = class {
|
|
|
10027
10027
|
}
|
|
10028
10028
|
}
|
|
10029
10029
|
},
|
|
10030
|
+
clear: () => {
|
|
10031
|
+
const backend = Array.from(this.backend.entries());
|
|
10032
|
+
backend.filter(([key]) => this.created.has(key)).forEach(([, option]) => option.set.selected(false));
|
|
10033
|
+
this.backend = new Map(backend.filter(([key]) => !this.created.has(key)));
|
|
10034
|
+
this.options = new Map(Array.from(this.options.entries()).filter(([key]) => !this.created.has(key)));
|
|
10035
|
+
this.created = new Map();
|
|
10036
|
+
},
|
|
10030
10037
|
synced: () => this.synced,
|
|
10031
10038
|
});
|
|
10032
10039
|
}
|