@gurpinderjitsingh/recipe-ui 0.1.4 → 0.2.0
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/app-modal_7.cjs.entry.js +12 -14
- package/dist/cjs/app-toast.cjs.entry.js +2 -2
- package/dist/cjs/{index-0Jp0srDV.js → index-CRcwY0Fb.js} +6 -416
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/recipe-ui.cjs.js +2 -2
- package/dist/collection/components/app-modal/app-modal.css +8 -41
- package/dist/collection/components/app-modal/app-modal.js +2 -5
- package/dist/collection/components/app-toast/app-toast.js +1 -1
- package/dist/collection/components/meal-plan-day/meal-plan-day.css +149 -13
- package/dist/collection/components/meal-plan-day/meal-plan-day.js +23 -8
- package/dist/collection/components/recipe-card/recipe-card.js +1 -1
- package/dist/collection/components/recipe-filter-bar/recipe-filter-bar.js +1 -1
- package/dist/collection/components/recipe-form/recipe-form.js +1 -1
- package/dist/collection/components/recipe-rating/recipe-rating.js +1 -1
- package/dist/collection/components/recipe-search-bar/recipe-search-bar.js +1 -1
- package/dist/components/app-modal.js +1 -1
- package/dist/components/app-toast.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/meal-plan-day.js +1 -1
- package/dist/components/p-BJU3HdRm.js +1 -0
- package/dist/components/{p-iruuKwXb.js → p-BUu-OE2n.js} +1 -1
- package/dist/components/{p-DzNqfLiF.js → p-Bi4G3e9f.js} +1 -1
- package/dist/components/{p-CwBR8qrC.js → p-Bj2iIXUo.js} +1 -1
- package/dist/components/p-BqnbT3UL.js +1 -0
- package/dist/components/{p-Cn-9hkL0.js → p-DXdnWxeM.js} +1 -1
- package/dist/components/p-Dp1sKtrN.js +1 -0
- package/dist/components/p-S4266va_.js +1 -0
- package/dist/components/{p-C300pX48.js → p-Xf30T5IO.js} +1 -1
- package/dist/components/recipe-card.js +1 -1
- package/dist/components/recipe-filter-bar.js +1 -1
- package/dist/components/recipe-form.js +1 -1
- package/dist/components/recipe-rating.js +1 -1
- package/dist/components/recipe-search-bar.js +1 -1
- package/dist/esm/app-modal_7.entry.js +12 -14
- package/dist/esm/app-toast.entry.js +2 -2
- package/dist/esm/{index-Cq6PCsWh.js → index-CrZUP9M-.js} +6 -416
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/recipe-ui.js +3 -3
- package/dist/recipe-ui/index.esm.js +1 -1
- package/dist/recipe-ui/{p-47428346.entry.js → p-531fb6c4.entry.js} +1 -1
- package/dist/recipe-ui/p-CrZUP9M-.js +3 -0
- package/dist/recipe-ui/p-a8cd146e.entry.js +1 -0
- package/dist/recipe-ui/recipe-ui.esm.js +1 -1
- package/dist/types/components/meal-plan-day/meal-plan-day.d.ts +2 -7
- package/dist/types/components.d.ts +11 -28
- package/package.json +1 -1
- package/dist/components/p-BioNY75Q.js +0 -1
- package/dist/components/p-BjeRE-Yp.js +0 -1
- package/dist/components/p-D4_zWccP.js +0 -1
- package/dist/components/p-q8BcbM65.js +0 -1
- package/dist/recipe-ui/p-6add6efb.entry.js +0 -1
- package/dist/recipe-ui/p-Cq6PCsWh.js +0 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-CRcwY0Fb.js');
|
|
4
4
|
|
|
5
5
|
const recipeCardCss = () => `:host{display:block;font-family:system-ui, sans-serif}.card{border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:box-shadow 0.15s ease, transform 0.15s ease}.card:hover{box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);transform:translateY(-2px)}.image-wrap{position:relative;aspect-ratio:4 / 3;background:#f2f2f2}.image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{width:100%;height:100%;background:linear-gradient(135deg, #eee, #ddd)}.fav-btn{position:absolute;top:8px;right:8px;border:none;background:rgba(255, 255, 255, 0.9);border-radius:50%;width:32px;height:32px;font-size:16px;cursor:pointer;color:#f5a623}.fav-btn.active{color:#ff6b35}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:0.03em}.actions{margin-top:8px}`;
|
|
6
6
|
|
|
@@ -19,7 +19,7 @@ const RecipeCard = class {
|
|
|
19
19
|
};
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
22
|
-
return (index.h("div", { key: '
|
|
22
|
+
return (index.h("div", { key: 'ab4f6e822f8b961d15c49d488af4e9b617ae71d2', class: "card", onClick: () => this.cardClick.emit() }, index.h("div", { key: 'f57fc00e484283bd223f7e8557af7e76de33217e', class: "image-wrap" }, this.image ? index.h("img", { src: this.image, alt: this.recipeTitle }) : index.h("div", { class: "placeholder" }), index.h("button", { key: '2f05b10aa6de8f6d51e0a216567a65900011a198', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), index.h("div", { key: 'bb120c622bef2e7ae8abfedf31ba988a66d393c3', class: "body" }, index.h("h3", { key: '2b0115c0ae28b302e35a00e0ed1a70d0b20712ab' }, this.recipeTitle), this.category && index.h("span", { key: '388a88c469547f04e7af2b1da0d303a28f499481', class: "category" }, this.category), index.h("div", { key: 'ff8e56f5a2ce08736ec9cef2a17bbcc2aad4b946', class: "actions" }, index.h("slot", { key: '8952391cb6163493dc5ab27b690c4375ef535ac4', name: "actions" })))));
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
25
|
RecipeCard.style = recipeCardCss();
|
|
@@ -55,7 +55,7 @@ const RecipeSearchBar = class {
|
|
|
55
55
|
this.internalValue = newVal;
|
|
56
56
|
}
|
|
57
57
|
render() {
|
|
58
|
-
return (index.h("div", { key: '
|
|
58
|
+
return (index.h("div", { key: 'eb622258d322ed13168a4e4da4f6fecc67c5e3ea', class: "wrap" }, index.h("input", { key: '5594cf8585234e21e4529a069ad9621631c9e103', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), index.h("button", { key: '7540e7232d5071a65360c8196deda3461bfa8308', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
|
|
59
59
|
}
|
|
60
60
|
static get watchers() { return {
|
|
61
61
|
"value": [{
|
|
@@ -79,7 +79,7 @@ const RecipeFilterBar = class {
|
|
|
79
79
|
}
|
|
80
80
|
render() {
|
|
81
81
|
const cats = Array.isArray(this.categories) ? this.categories : [];
|
|
82
|
-
return (index.h("div", { key: '
|
|
82
|
+
return (index.h("div", { key: '084a1e0d79a1916d07277e1c080ff779aba1aa79', class: "wrap" }, index.h("button", { key: 'f0b9b529d1dca7f98621404b174837b5b21163e7', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (index.h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
|
|
83
83
|
}
|
|
84
84
|
};
|
|
85
85
|
RecipeFilterBar.style = recipeFilterBarCss();
|
|
@@ -96,7 +96,7 @@ const RecipeRating = class {
|
|
|
96
96
|
}
|
|
97
97
|
render() {
|
|
98
98
|
const stars = Array.from({ length: this.max }, (_, i) => i + 1);
|
|
99
|
-
return (index.h("div", { key: '
|
|
99
|
+
return (index.h("div", { key: '19cb1bd17a6dc207c7e556ae026a4f343a784f50', class: "wrap", role: this.readonly ? undefined : 'radiogroup' }, stars.map((s) => (index.h("span", { class: { star: true, filled: s <= this.value, clickable: !this.readonly }, onClick: () => !this.readonly && this.ratingChange.emit({ value: s }) }, "\u2605")))));
|
|
100
100
|
}
|
|
101
101
|
};
|
|
102
102
|
RecipeRating.style = recipeRatingCss();
|
|
@@ -180,7 +180,7 @@ const RecipeForm = class {
|
|
|
180
180
|
this.ingredients = next;
|
|
181
181
|
}
|
|
182
182
|
render() {
|
|
183
|
-
return (index.h("form", { key: '
|
|
183
|
+
return (index.h("form", { key: '6699f62ff8027114e5a0e3d154f8743048cf4d96', onSubmit: this.onSubmit }, index.h("slot", { key: '8de0f7e758feb4fc6f1ea877c4acd7c41cbe13ed', name: "header" }), index.h("label", { key: '881275928734c4eabfee6d22b35cddad1af03853' }, "Title", index.h("input", { key: 'a55ae352c35cec0b2391061d48153151a7dc5e6b', type: "text", value: this.title, onInput: (e) => (this.title = e.target.value) }), this.errors.title && index.h("span", { key: 'dbace66ddaab5ab5096acb39822c7cd3a18923be', class: "error" }, this.errors.title)), index.h("label", { key: 'ae1bcdb323ccaa03307b6a283fcc395ef49954c5' }, "Image URL", index.h("input", { key: '6ee9483689e0304c0ae28ab755dc93e117d4952e', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), index.h("label", { key: '751b54959a8e2c85e98f2b192a4d8aa83d8ebafe' }, "Category", index.h("input", { key: '83f852c74727b86a1a8a6c9a0d93e9ffdb3f33f3', type: "text", value: this.category, onInput: (e) => (this.category = e.target.value) })), index.h("div", { key: '6a7c99a86d601ed51ece26c85b4b45766a2dafdf', class: "field" }, index.h("span", { key: 'ee082917bb3b90ec45ce1feea234c374f7fc35a0' }, "Ingredients"), this.ingredients.map((ing, i) => (index.h("div", { class: "ingredient-row" }, index.h("input", { type: "text", value: ing, onInput: (e) => this.updateIngredient(i, e.target.value) }), index.h("button", { type: "button", onClick: () => this.removeIngredient(i), "aria-label": "Remove" }, "\u2715")))), index.h("button", { key: '4f81107c94bf8810dfc14aa58d5afcf55d8e126d', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && index.h("span", { key: 'd87cc375b194c187b64def1ef9840797dab1d456', class: "error" }, this.errors.ingredients)), index.h("label", { key: 'dc6c04a5a2b5cc7d1912f535b8904125ce74af56' }, "Instructions", index.h("textarea", { key: '0c9c4b09da5b3f24addb66c18fccad7c900bebcb', rows: 5, onInput: (e) => (this.instructions = e.target.value) }, this.instructions), this.errors.instructions && index.h("span", { key: 'f430772f46e5298b2a2522aaef2822a59df61a08', class: "error" }, this.errors.instructions)), index.h("div", { key: '337abce7c4f93a9fbb90917e6b407dfb5b95039d', class: "footer" }, index.h("slot", { key: 'b8b610485f592592afb6cef682faeb13d52da6ea', name: "footer" }), index.h("button", { key: 'faf249c9be390b5d574300d0ff24bcd0c5603a3c', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), index.h("button", { key: '527146d147778940c28e5357c100d1809cbcd6df', type: "submit", class: "save-btn" }, "Save Recipe"))));
|
|
184
184
|
}
|
|
185
185
|
static get watchers() { return {
|
|
186
186
|
"initialData": [{
|
|
@@ -190,7 +190,7 @@ const RecipeForm = class {
|
|
|
190
190
|
};
|
|
191
191
|
RecipeForm.style = recipeFormCss();
|
|
192
192
|
|
|
193
|
-
const mealPlanDayCss = () => `:host{display:block;font-family
|
|
193
|
+
const mealPlanDayCss = () => `:host{display:block;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif}.day-col{background:#ffffff;border:1px solid #e8eaed;border-radius:12px;padding:14px;min-width:160px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(16, 24, 40, 0.04);transition:box-shadow 0.15s ease, border-color 0.15s ease}.day-col:hover{box-shadow:0 4px 12px rgba(16, 24, 40, 0.08);border-color:#d8dce1}.col-header{display:flex;align-items:center;gap:6px;padding-bottom:8px;border-bottom:1px solid #f0f1f3}.col-header .icon{font-size:15px;line-height:1}.col-header h3{margin:0;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#4b5563;flex:1}.count-badge{background:#eef2ff;color:#4338ca;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;line-height:1.5}.meals{display:flex;flex-direction:column;gap:6px;min-height:44px}.meal-chip{display:flex;align-items:center;gap:8px;background:#f9fafb;border:1px solid #eef0f2;border-radius:9px;padding:6px 8px;font-size:12.5px;transition:background 0.12s ease}.meal-chip:hover{background:#f3f4f6}.thumb{width:28px;height:28px;border-radius:6px;overflow:hidden;flex-shrink:0;background:#e5e7eb}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.meal-chip .title{flex:1;color:#1f2937;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remove-btn{border:none;background:none;cursor:pointer;color:#9ca3af;font-size:11px;line-height:1;padding:3px;border-radius:5px;transition:color 0.12s ease, background 0.12s ease}.remove-btn:hover{color:#dc2626;background:#fef2f2}.empty{font-size:12px;color:#9ca3af;margin:6px 0;text-align:center;font-style:italic}.add-btn{display:flex;align-items:center;justify-content:center;gap:4px;border:1.5px dashed #d1d5db;background:none;border-radius:9px;padding:7px;font-size:12px;font-weight:600;cursor:pointer;color:#6b7280;transition:border-color 0.12s ease, color 0.12s ease, background 0.12s ease}.add-btn:hover{border-color:#6366f1;color:#4f46e5;background:#f5f5ff}.plus{font-size:14px;line-height:1}`;
|
|
194
194
|
|
|
195
195
|
const MealPlanDay = class {
|
|
196
196
|
constructor(hostRef) {
|
|
@@ -199,15 +199,17 @@ const MealPlanDay = class {
|
|
|
199
199
|
this.removeMeal = index.createEvent(this, "removeMeal");
|
|
200
200
|
this.day = '';
|
|
201
201
|
this.meals = [];
|
|
202
|
+
/** Optional emoji/icon shown next to the label, e.g. "🌅" */
|
|
203
|
+
this.icon = '';
|
|
202
204
|
}
|
|
203
205
|
render() {
|
|
204
206
|
const meals = Array.isArray(this.meals) ? this.meals : [];
|
|
205
|
-
return (index.h("div", { key: '
|
|
207
|
+
return (index.h("div", { key: 'cd4f194f1eeb5f53a029f380c40aa0b4ec2f32f4', class: "day-col" }, index.h("div", { key: 'd88966142d5101fc522d5de89b6d4cab72cbbbf3', class: "col-header" }, this.icon && index.h("span", { key: '5a9a27a3a1909bcf7295ec7eeccf309e5e2d1ae0', class: "icon" }, this.icon), index.h("h3", { key: 'fd1fa2f1274cc1f6bd8917959015722cb69002ba' }, this.day), meals.length > 0 && index.h("span", { key: 'feff3bc91b52203dba19f7a87c56d3813fc95cdd', class: "count-badge" }, meals.length)), index.h("div", { key: '4afee9ce77bf1447bf9e32efc7e2f9b9571873e7', class: "meals" }, meals.map((m) => (index.h("div", { class: "meal-chip" }, index.h("div", { class: "thumb" }, m.image && index.h("img", { src: m.image, alt: m.title })), index.h("span", { class: "title" }, m.title), index.h("button", { class: "remove-btn", onClick: () => this.removeMeal.emit({ day: this.day, mealId: m.id }), "aria-label": `Remove ${m.title}` }, "\u2715")))), meals.length === 0 && index.h("p", { key: '9a4002b1b4516fc5ff6ef8f9a2e0a7f5e8465cbd', class: "empty" }, "No meal planned")), index.h("button", { key: '2cef3c5f7d0e89303cb8989f78eefb95c426683f', class: "add-btn", onClick: () => this.assignMeal.emit({ day: this.day }) }, index.h("span", { key: 'ae54b56f8f0b01f45029e36919764ae31f3a38b9', class: "plus" }, "+"), " Add meal")));
|
|
206
208
|
}
|
|
207
209
|
};
|
|
208
210
|
MealPlanDay.style = mealPlanDayCss();
|
|
209
211
|
|
|
210
|
-
const appModalCss = () => `:host{font-family:system-ui, sans-serif}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.45);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{
|
|
212
|
+
const appModalCss = () => `:host{font-family:system-ui, sans-serif}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.45);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:12px;min-width:320px;max-width:90vw;max-height:85vh;overflow-y:auto;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.2)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.header h2{margin:0;font-size:18px}.close-btn{border:none;background:none;font-size:16px;cursor:pointer;color:#666}`;
|
|
211
213
|
|
|
212
214
|
const AppModal = class {
|
|
213
215
|
constructor(hostRef) {
|
|
@@ -219,11 +221,7 @@ const AppModal = class {
|
|
|
219
221
|
render() {
|
|
220
222
|
if (!this.open)
|
|
221
223
|
return null;
|
|
222
|
-
return (index.h("div", { class: "overlay", onClick: (e) => {
|
|
223
|
-
if (e.target === e.currentTarget) {
|
|
224
|
-
this.close.emit();
|
|
225
|
-
}
|
|
226
|
-
} }, index.h("div", { class: "dialog", onClick: (e) => e.stopPropagation() }, index.h("div", { class: "header" }, index.h("h2", null, this.modalTitle), index.h("button", { class: "close-btn", onClick: () => this.close.emit(), "aria-label": "Close" }, "\u2715")), index.h("div", { class: "body" }, index.h("slot", null)))));
|
|
224
|
+
return (index.h("div", { class: "overlay", onClick: () => this.close.emit() }, index.h("div", { class: "dialog", onClick: (e) => e.stopPropagation() }, index.h("div", { class: "header" }, index.h("h2", null, this.modalTitle), index.h("button", { class: "close-btn", onClick: () => this.close.emit(), "aria-label": "Close" }, "\u2715")), index.h("div", { class: "body" }, index.h("slot", null)))));
|
|
227
225
|
}
|
|
228
226
|
};
|
|
229
227
|
AppModal.style = appModalCss();
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-CRcwY0Fb.js');
|
|
4
4
|
|
|
5
5
|
const appToastCss = () => `:host{font-family:system-ui, sans-serif;display:block}.toast{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;color:#fff;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.15)}.toast.success{background:#2ecc71}.toast.error{background:#e74c3c}.toast.info{background:#3498db}button{border:none;background:none;color:inherit;cursor:pointer;margin-left:auto}`;
|
|
6
6
|
|
|
@@ -18,7 +18,7 @@ const AppToast = class {
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
|
-
return (index.h("div", { key: '
|
|
21
|
+
return (index.h("div", { key: '73ab8ea44ad155052616ffbc424e1d8f13b8116f', class: `toast ${this.type}` }, index.h("span", { key: '301487550c2f4f50cdcc6d0a138b9e968cde385f' }, this.message), index.h("button", { key: '4e9de348002a397a25450142d9fa1fa07ca84d54', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
24
|
AppToast.style = appToastCss();
|