plantfyi-embed 1.0.0 → 1.1.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/README.md +3 -3
- package/dist/embed.esm.js +3 -3
- package/dist/embed.min.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -44,7 +44,7 @@ That's it. The widget fetches data from the PlantFYI API and renders with full s
|
|
|
44
44
|
| `data-plantfyi` | entity, compare, glossary, guide, search, [tools] | required | Widget type |
|
|
45
45
|
| `data-slug` | e.g. "plants" | — | Entity slug from the PlantFYI database |
|
|
46
46
|
| `data-theme` | light, dark, sepia, auto | light | Visual theme (`auto` follows OS preference) |
|
|
47
|
-
| `data-
|
|
47
|
+
| `data-styleVariant` | modern, organic | modern | Widget design style |
|
|
48
48
|
| `data-size` | default, compact, large | default | Widget size |
|
|
49
49
|
| `data-placeholder` | any string | "Search Plants..." | Search box placeholder |
|
|
50
50
|
|
|
@@ -68,10 +68,10 @@ That's it. The widget fetches data from the PlantFYI API and renders with full s
|
|
|
68
68
|
|
|
69
69
|
```html
|
|
70
70
|
<!-- Modern (default) — clean lines, rounded corners, accent gradients -->
|
|
71
|
-
<div data-plantfyi="entity" data-slug="plants" data-
|
|
71
|
+
<div data-plantfyi="entity" data-slug="plants" data-styleVariant="modern"></div>
|
|
72
72
|
|
|
73
73
|
<!-- Organic — natural curves, earth-tone aesthetics, field-guide look -->
|
|
74
|
-
<div data-plantfyi="entity" data-slug="plants" data-
|
|
74
|
+
<div data-plantfyi="entity" data-slug="plants" data-styleVariant="organic"></div>
|
|
75
75
|
```
|
|
76
76
|
|
|
77
77
|
## Web Components (Custom Elements)
|
package/dist/embed.esm.js
CHANGED
|
@@ -784,7 +784,7 @@ ${getStyleCSS(style)}
|
|
|
784
784
|
|
|
785
785
|
// src/shadow.ts
|
|
786
786
|
function createShadow(el, config) {
|
|
787
|
-
const widgetStyle = el.dataset.
|
|
787
|
+
const widgetStyle = el.dataset.styleVariant || "modern";
|
|
788
788
|
const shadow = el.attachShadow({ mode: "open" });
|
|
789
789
|
const style = document.createElement("style");
|
|
790
790
|
style.textContent = getThemeCSS(config.accent, widgetStyle);
|
|
@@ -2192,7 +2192,7 @@ function initTaxonomyInline(el, config) {
|
|
|
2192
2192
|
|
|
2193
2193
|
// src/_entry_plantfyi.ts
|
|
2194
2194
|
function initWidget(el, type, config) {
|
|
2195
|
-
const widgetStyle = el.dataset.
|
|
2195
|
+
const widgetStyle = el.dataset.styleVariant || "modern";
|
|
2196
2196
|
void widgetStyle;
|
|
2197
2197
|
switch (type) {
|
|
2198
2198
|
case "entity":
|
|
@@ -2305,7 +2305,7 @@ function makeWidgetElement(widgetType, initFn, domainAttrs) {
|
|
|
2305
2305
|
const theme = this.getAttribute("theme");
|
|
2306
2306
|
if (theme !== null) this.dataset.theme = theme;
|
|
2307
2307
|
const styleVariant = this.getAttribute("style-variant");
|
|
2308
|
-
if (styleVariant !== null) this.dataset.
|
|
2308
|
+
if (styleVariant !== null) this.dataset.styleVariant = styleVariant;
|
|
2309
2309
|
const size = this.getAttribute("size");
|
|
2310
2310
|
if (size !== null) this.dataset.size = size;
|
|
2311
2311
|
}
|
package/dist/embed.min.js
CHANGED
|
@@ -757,7 +757,7 @@
|
|
|
757
757
|
}
|
|
758
758
|
|
|
759
759
|
${Qe(t)}
|
|
760
|
-
`}function z(e,t){let n=e.dataset.
|
|
760
|
+
`}function z(e,t){let n=e.dataset.styleVariant||"modern",i=e.attachShadow({mode:"open"}),a=document.createElement("style");return a.textContent=he(t.accent,n),i.appendChild(a),i}function et(e){let t=e.dataset.theme||"light";return t==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t}function M(e,t,n){let i=et(t),a=t.dataset.size||"default",s=document.createElement("div");return s.className=["naturefyi-widget",n].filter(Boolean).join(" "),s.setAttribute("data-theme",i),s.setAttribute("data-size",a),e.appendChild(s),t.dataset.theme==="auto"&&window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",o=>{s.setAttribute("data-theme",o.matches?"dark":"light")}),s}function W(e){e.innerHTML=`
|
|
761
761
|
<div class="naturefyi-loading">
|
|
762
762
|
<span class="naturefyi-spinner"></span>
|
|
763
763
|
Loading\u2026
|
|
@@ -1164,4 +1164,4 @@ ${Qe(t)}
|
|
|
1164
1164
|
</div>
|
|
1165
1165
|
</div>
|
|
1166
1166
|
${S(t)}
|
|
1167
|
-
`}function Ze(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function Je(e,t){var c;let i=((c=e.dataset.status)!=null?c:"").toUpperCase(),a=z(e,t),s=document.createElement("style");s.textContent=":host { display: inline-flex; vertical-align: baseline; }",a.appendChild(s);let o=document.createElement("span");if(!i){o.textContent="[?]",a.appendChild(o);return}let r=O(i),l=P(i);o.innerHTML=`<span style="display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:10px;background:${r.bg};color:${r.text};font-size:0.75rem;font-weight:600;line-height:1.4;white-space:nowrap;">[${Ze(i)}] ${Ze(l)}</span>`,a.appendChild(o)}function Ke(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function Xe(e,t){var u,g;let n=e.dataset,i=(u=n.name)!=null?u:"",a=(g=n.author)!=null?g:"",s=n.extinct==="true",o=z(e,t),r=document.createElement("style");r.textContent=":host { display: inline-flex; vertical-align: baseline; }",o.appendChild(r);let l=document.createElement("span");if(!i){l.textContent="[?]",o.appendChild(l);return}let c=s?"\u2020":"",d=a?` <span style="font-style:normal;font-weight:400;color:#64748b;">${Ke(a)}</span>`:"";l.innerHTML=`<span style="font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:inherit;color:inherit;">${c?`<span style="font-style:normal;">${c}</span>\u200A`:""}${Ke(i)}</span>${d}`,o.appendChild(l)}function bt(e,t,n){let i=e.dataset.
|
|
1167
|
+
`}function Ze(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function Je(e,t){var c;let i=((c=e.dataset.status)!=null?c:"").toUpperCase(),a=z(e,t),s=document.createElement("style");s.textContent=":host { display: inline-flex; vertical-align: baseline; }",a.appendChild(s);let o=document.createElement("span");if(!i){o.textContent="[?]",a.appendChild(o);return}let r=O(i),l=P(i);o.innerHTML=`<span style="display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:10px;background:${r.bg};color:${r.text};font-size:0.75rem;font-weight:600;line-height:1.4;white-space:nowrap;">[${Ze(i)}] ${Ze(l)}</span>`,a.appendChild(o)}function Ke(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function Xe(e,t){var u,g;let n=e.dataset,i=(u=n.name)!=null?u:"",a=(g=n.author)!=null?g:"",s=n.extinct==="true",o=z(e,t),r=document.createElement("style");r.textContent=":host { display: inline-flex; vertical-align: baseline; }",o.appendChild(r);let l=document.createElement("span");if(!i){l.textContent="[?]",o.appendChild(l);return}let c=s?"\u2020":"",d=a?` <span style="font-style:normal;font-weight:400;color:#64748b;">${Ke(a)}</span>`:"";l.innerHTML=`<span style="font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:inherit;color:inherit;">${c?`<span style="font-style:normal;">${c}</span>\u200A`:""}${Ke(i)}</span>${d}`,o.appendChild(l)}function bt(e,t,n){let i=e.dataset.styleVariant||"modern";switch(t){case"entity":oe(e,n);break;case"compare":ae(e,n);break;case"glossary":se(e,n);break;case"guide":le(e,n);break;case"search":ce(e,n);break;case"iucn-badge":de(e,n);break;case"hardiness-zone":ge(e,n);break;case"bloom-calendar":fe(e,n);break;case"iucn-inline":Je(e,n);break;case"taxonomy-inline":Xe(e,n);break;default:break}}function ht(e,t){if("IntersectionObserver"in window){let n=new IntersectionObserver(i=>{i.forEach(a=>{a.isIntersecting&&(n.unobserve(e),t())})},{rootMargin:"200px"});n.observe(e)}else t()}function me(e,t){if(e.shadowRoot)return;let i=t.attribute.replace("data-","").replace(/-([a-z])/g,(s,o)=>o.toUpperCase()),a=e.dataset[i];a&&ht(e,()=>{e.shadowRoot||bt(e,a,t)})}function Ye(e){document.querySelectorAll(`[${e.attribute}]`).forEach(t=>me(t,e))}(function(){let t='{"site":"plantfyi","name":"PlantFYI","domain":"plantfyi.com","accent":"#16A34A","attribute":"data-plantfyi","apiBase":"https://plantfyi.com/api/v1/","searchPath":"/search/","entityName":"Plants","entitySlug":"plants"}';document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>Ye(t)):Ye(t),new MutationObserver(i=>{i.forEach(a=>{a.addedNodes.forEach(s=>{var r;if(s.nodeType!==Node.ELEMENT_NODE)return;let o=s;o.hasAttribute(t.attribute)&&me(o,t),(r=o.querySelectorAll)==null||r.call(o,`[${t.attribute}]`).forEach(l=>me(l,t))})})}).observe(document.body||document.documentElement,{childList:!0,subtree:!0})})();function vt(e,t,n){let i=[...n,"theme","style-variant","size"];return class extends HTMLElement{static get observedAttributes(){return i}connectedCallback(){this.shadowRoot||(this._syncDataAttrs(),t(this,'{"site":"plantfyi","name":"PlantFYI","domain":"plantfyi.com","accent":"#16A34A","attribute":"data-plantfyi","apiBase":"https://plantfyi.com/api/v1/","searchPath":"/search/","entityName":"Plants","entitySlug":"plants"}'))}attributeChangedCallback(a,s,o){if(s===o||!this.shadowRoot)return;let r=this.shadowRoot;for(;r.firstChild;)r.firstChild.remove();this._syncDataAttrs(),t(this,'{"site":"plantfyi","name":"PlantFYI","domain":"plantfyi.com","accent":"#16A34A","attribute":"data-plantfyi","apiBase":"https://plantfyi.com/api/v1/","searchPath":"/search/","entityName":"Plants","entitySlug":"plants"}')}_syncDataAttrs(){let a='{"site":"plantfyi","name":"PlantFYI","domain":"plantfyi.com","accent":"#16A34A","attribute":"data-plantfyi","apiBase":"https://plantfyi.com/api/v1/","searchPath":"/search/","entityName":"Plants","entitySlug":"plants"}'.attribute.replace("data-","");this.dataset[a]=e;for(let l of n){let c=this.getAttribute(l);c!==null&&(this.dataset[l]=c)}let s=this.getAttribute("theme");s!==null&&(this.dataset.theme=s);let o=this.getAttribute("style-variant");o!==null&&(this.dataset.styleVariant=o);let r=this.getAttribute("size");r!==null&&(this.dataset.size=r)}}}(function(){if(typeof customElements=="undefined")return;let t='{"site":"plantfyi","name":"PlantFYI","domain":"plantfyi.com","accent":"#16A34A","attribute":"data-plantfyi","apiBase":"https://plantfyi.com/api/v1/","searchPath":"/search/","entityName":"Plants","entitySlug":"plants"}'.site,n=[[`${t}-entity`,oe,["slug"]],[`${t}-compare`,ae,["slugs"]],[`${t}-glossary`,se,["slug","letter"]],[`${t}-guide`,le,["slug"]],[`${t}-search`,ce,["placeholder","query"]],[`${t}-iucn-badge`,de,["slug","value"]],[`${t}-hardiness-zone`,ge,["slug","value"]],[`${t}-bloom-calendar`,fe,["slug"]]];for(let[i,a,s]of n)if(!customElements.get(i)){let o=i.slice(t.length+1);customElements.define(i,vt(o,a,s))}})();})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "plantfyi-embed",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Embed PlantFYI botany widgets — plant cards, hardiness zones, bloom calendars, gardening data. Zero dependencies, Shadow DOM, 4 themes.",
|
|
5
5
|
"main": "dist/embed.min.js",
|
|
6
6
|
"module": "dist/embed.esm.js",
|