@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,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h } from './index-CrZUP9M-.js';
|
|
2
2
|
|
|
3
3
|
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}`;
|
|
4
4
|
|
|
@@ -17,7 +17,7 @@ const RecipeCard = class {
|
|
|
17
17
|
};
|
|
18
18
|
}
|
|
19
19
|
render() {
|
|
20
|
-
return (h("div", { key: '
|
|
20
|
+
return (h("div", { key: 'ab4f6e822f8b961d15c49d488af4e9b617ae71d2', class: "card", onClick: () => this.cardClick.emit() }, h("div", { key: 'f57fc00e484283bd223f7e8557af7e76de33217e', class: "image-wrap" }, this.image ? h("img", { src: this.image, alt: this.recipeTitle }) : h("div", { class: "placeholder" }), h("button", { key: '2f05b10aa6de8f6d51e0a216567a65900011a198', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), h("div", { key: 'bb120c622bef2e7ae8abfedf31ba988a66d393c3', class: "body" }, h("h3", { key: '2b0115c0ae28b302e35a00e0ed1a70d0b20712ab' }, this.recipeTitle), this.category && h("span", { key: '388a88c469547f04e7af2b1da0d303a28f499481', class: "category" }, this.category), h("div", { key: 'ff8e56f5a2ce08736ec9cef2a17bbcc2aad4b946', class: "actions" }, h("slot", { key: '8952391cb6163493dc5ab27b690c4375ef535ac4', name: "actions" })))));
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
RecipeCard.style = recipeCardCss();
|
|
@@ -53,7 +53,7 @@ const RecipeSearchBar = class {
|
|
|
53
53
|
this.internalValue = newVal;
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
|
-
return (h("div", { key: '
|
|
56
|
+
return (h("div", { key: 'eb622258d322ed13168a4e4da4f6fecc67c5e3ea', class: "wrap" }, h("input", { key: '5594cf8585234e21e4529a069ad9621631c9e103', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), h("button", { key: '7540e7232d5071a65360c8196deda3461bfa8308', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
|
|
57
57
|
}
|
|
58
58
|
static get watchers() { return {
|
|
59
59
|
"value": [{
|
|
@@ -77,7 +77,7 @@ const RecipeFilterBar = class {
|
|
|
77
77
|
}
|
|
78
78
|
render() {
|
|
79
79
|
const cats = Array.isArray(this.categories) ? this.categories : [];
|
|
80
|
-
return (h("div", { key: '
|
|
80
|
+
return (h("div", { key: '084a1e0d79a1916d07277e1c080ff779aba1aa79', class: "wrap" }, h("button", { key: 'f0b9b529d1dca7f98621404b174837b5b21163e7', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
83
|
RecipeFilterBar.style = recipeFilterBarCss();
|
|
@@ -94,7 +94,7 @@ const RecipeRating = class {
|
|
|
94
94
|
}
|
|
95
95
|
render() {
|
|
96
96
|
const stars = Array.from({ length: this.max }, (_, i) => i + 1);
|
|
97
|
-
return (h("div", { key: '
|
|
97
|
+
return (h("div", { key: '19cb1bd17a6dc207c7e556ae026a4f343a784f50', class: "wrap", role: this.readonly ? undefined : 'radiogroup' }, stars.map((s) => (h("span", { class: { star: true, filled: s <= this.value, clickable: !this.readonly }, onClick: () => !this.readonly && this.ratingChange.emit({ value: s }) }, "\u2605")))));
|
|
98
98
|
}
|
|
99
99
|
};
|
|
100
100
|
RecipeRating.style = recipeRatingCss();
|
|
@@ -178,7 +178,7 @@ const RecipeForm = class {
|
|
|
178
178
|
this.ingredients = next;
|
|
179
179
|
}
|
|
180
180
|
render() {
|
|
181
|
-
return (h("form", { key: '
|
|
181
|
+
return (h("form", { key: '6699f62ff8027114e5a0e3d154f8743048cf4d96', onSubmit: this.onSubmit }, h("slot", { key: '8de0f7e758feb4fc6f1ea877c4acd7c41cbe13ed', name: "header" }), h("label", { key: '881275928734c4eabfee6d22b35cddad1af03853' }, "Title", h("input", { key: 'a55ae352c35cec0b2391061d48153151a7dc5e6b', type: "text", value: this.title, onInput: (e) => (this.title = e.target.value) }), this.errors.title && h("span", { key: 'dbace66ddaab5ab5096acb39822c7cd3a18923be', class: "error" }, this.errors.title)), h("label", { key: 'ae1bcdb323ccaa03307b6a283fcc395ef49954c5' }, "Image URL", h("input", { key: '6ee9483689e0304c0ae28ab755dc93e117d4952e', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), h("label", { key: '751b54959a8e2c85e98f2b192a4d8aa83d8ebafe' }, "Category", h("input", { key: '83f852c74727b86a1a8a6c9a0d93e9ffdb3f33f3', type: "text", value: this.category, onInput: (e) => (this.category = e.target.value) })), h("div", { key: '6a7c99a86d601ed51ece26c85b4b45766a2dafdf', class: "field" }, h("span", { key: 'ee082917bb3b90ec45ce1feea234c374f7fc35a0' }, "Ingredients"), this.ingredients.map((ing, i) => (h("div", { class: "ingredient-row" }, h("input", { type: "text", value: ing, onInput: (e) => this.updateIngredient(i, e.target.value) }), h("button", { type: "button", onClick: () => this.removeIngredient(i), "aria-label": "Remove" }, "\u2715")))), h("button", { key: '4f81107c94bf8810dfc14aa58d5afcf55d8e126d', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && h("span", { key: 'd87cc375b194c187b64def1ef9840797dab1d456', class: "error" }, this.errors.ingredients)), h("label", { key: 'dc6c04a5a2b5cc7d1912f535b8904125ce74af56' }, "Instructions", h("textarea", { key: '0c9c4b09da5b3f24addb66c18fccad7c900bebcb', rows: 5, onInput: (e) => (this.instructions = e.target.value) }, this.instructions), this.errors.instructions && h("span", { key: 'f430772f46e5298b2a2522aaef2822a59df61a08', class: "error" }, this.errors.instructions)), h("div", { key: '337abce7c4f93a9fbb90917e6b407dfb5b95039d', class: "footer" }, h("slot", { key: 'b8b610485f592592afb6cef682faeb13d52da6ea', name: "footer" }), h("button", { key: 'faf249c9be390b5d574300d0ff24bcd0c5603a3c', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), h("button", { key: '527146d147778940c28e5357c100d1809cbcd6df', type: "submit", class: "save-btn" }, "Save Recipe"))));
|
|
182
182
|
}
|
|
183
183
|
static get watchers() { return {
|
|
184
184
|
"initialData": [{
|
|
@@ -188,7 +188,7 @@ const RecipeForm = class {
|
|
|
188
188
|
};
|
|
189
189
|
RecipeForm.style = recipeFormCss();
|
|
190
190
|
|
|
191
|
-
const mealPlanDayCss = () => `:host{display:block;font-family
|
|
191
|
+
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}`;
|
|
192
192
|
|
|
193
193
|
const MealPlanDay = class {
|
|
194
194
|
constructor(hostRef) {
|
|
@@ -197,15 +197,17 @@ const MealPlanDay = class {
|
|
|
197
197
|
this.removeMeal = createEvent(this, "removeMeal");
|
|
198
198
|
this.day = '';
|
|
199
199
|
this.meals = [];
|
|
200
|
+
/** Optional emoji/icon shown next to the label, e.g. "🌅" */
|
|
201
|
+
this.icon = '';
|
|
200
202
|
}
|
|
201
203
|
render() {
|
|
202
204
|
const meals = Array.isArray(this.meals) ? this.meals : [];
|
|
203
|
-
return (h("div", { key: '
|
|
205
|
+
return (h("div", { key: 'cd4f194f1eeb5f53a029f380c40aa0b4ec2f32f4', class: "day-col" }, h("div", { key: 'd88966142d5101fc522d5de89b6d4cab72cbbbf3', class: "col-header" }, this.icon && h("span", { key: '5a9a27a3a1909bcf7295ec7eeccf309e5e2d1ae0', class: "icon" }, this.icon), h("h3", { key: 'fd1fa2f1274cc1f6bd8917959015722cb69002ba' }, this.day), meals.length > 0 && h("span", { key: 'feff3bc91b52203dba19f7a87c56d3813fc95cdd', class: "count-badge" }, meals.length)), h("div", { key: '4afee9ce77bf1447bf9e32efc7e2f9b9571873e7', class: "meals" }, meals.map((m) => (h("div", { class: "meal-chip" }, h("div", { class: "thumb" }, m.image && h("img", { src: m.image, alt: m.title })), h("span", { class: "title" }, m.title), h("button", { class: "remove-btn", onClick: () => this.removeMeal.emit({ day: this.day, mealId: m.id }), "aria-label": `Remove ${m.title}` }, "\u2715")))), meals.length === 0 && h("p", { key: '9a4002b1b4516fc5ff6ef8f9a2e0a7f5e8465cbd', class: "empty" }, "No meal planned")), h("button", { key: '2cef3c5f7d0e89303cb8989f78eefb95c426683f', class: "add-btn", onClick: () => this.assignMeal.emit({ day: this.day }) }, h("span", { key: 'ae54b56f8f0b01f45029e36919764ae31f3a38b9', class: "plus" }, "+"), " Add meal")));
|
|
204
206
|
}
|
|
205
207
|
};
|
|
206
208
|
MealPlanDay.style = mealPlanDayCss();
|
|
207
209
|
|
|
208
|
-
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{
|
|
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{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}`;
|
|
209
211
|
|
|
210
212
|
const AppModal = class {
|
|
211
213
|
constructor(hostRef) {
|
|
@@ -217,11 +219,7 @@ const AppModal = class {
|
|
|
217
219
|
render() {
|
|
218
220
|
if (!this.open)
|
|
219
221
|
return null;
|
|
220
|
-
return (h("div", { class: "overlay", onClick: (e) => {
|
|
221
|
-
if (e.target === e.currentTarget) {
|
|
222
|
-
this.close.emit();
|
|
223
|
-
}
|
|
224
|
-
} }, h("div", { class: "dialog", onClick: (e) => e.stopPropagation() }, h("div", { class: "header" }, h("h2", null, this.modalTitle), h("button", { class: "close-btn", onClick: () => this.close.emit(), "aria-label": "Close" }, "\u2715")), h("div", { class: "body" }, h("slot", null)))));
|
|
222
|
+
return (h("div", { class: "overlay", onClick: () => this.close.emit() }, h("div", { class: "dialog", onClick: (e) => e.stopPropagation() }, h("div", { class: "header" }, h("h2", null, this.modalTitle), h("button", { class: "close-btn", onClick: () => this.close.emit(), "aria-label": "Close" }, "\u2715")), h("div", { class: "body" }, h("slot", null)))));
|
|
225
223
|
}
|
|
226
224
|
};
|
|
227
225
|
AppModal.style = appModalCss();
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h } from './index-CrZUP9M-.js';
|
|
2
2
|
|
|
3
3
|
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}`;
|
|
4
4
|
|
|
@@ -16,7 +16,7 @@ const AppToast = class {
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
return (h("div", { key: '
|
|
19
|
+
return (h("div", { key: '73ab8ea44ad155052616ffbc424e1d8f13b8116f', class: `toast ${this.type}` }, h("span", { key: '301487550c2f4f50cdcc6d0a138b9e968cde385f' }, this.message), h("button", { key: '4e9de348002a397a25450142d9fa1fa07ca84d54', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
AppToast.style = appToastCss();
|