proto-table-wc 0.0.391 → 0.0.392
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/demo-table_2.cjs.entry.js +0 -2
- package/dist/cjs/index-52ab0f4a.js +0 -2
- package/dist/cjs/index.cjs.js +0 -2
- package/dist/cjs/loader.cjs.js +0 -2
- package/dist/cjs/proto-table-wc.cjs.js +0 -2
- package/dist/collection/components/demo-table/demo-table.js +0 -1
- package/dist/collection/components/proto-table/iconPaths.js +0 -1
- package/dist/collection/components/proto-table/proto-table.js +0 -1
- package/dist/collection/index.js +0 -1
- package/dist/esm/demo-table_2.entry.js +0 -2
- package/dist/esm/index-f60c9fab.js +0 -2
- package/dist/esm/index.js +0 -2
- package/dist/esm/loader.js +0 -2
- package/dist/esm/proto-table-wc.js +0 -2
- package/dist/proto-table-wc/index.esm.js +0 -2
- package/dist/proto-table-wc/p-6cf8a72f.js +2 -3
- package/dist/proto-table-wc/p-8b0ca37d.entry.js +1 -0
- package/dist/proto-table-wc/proto-table-wc.esm.js +1 -2
- package/package.json +1 -1
- package/dist/cjs/demo-table_2.cjs.entry.js.map +0 -1
- package/dist/cjs/index-52ab0f4a.js.map +0 -1
- package/dist/cjs/index.cjs.js.map +0 -1
- package/dist/cjs/loader.cjs.js.map +0 -1
- package/dist/cjs/proto-table-wc.cjs.js.map +0 -1
- package/dist/collection/components/demo-table/demo-table.js.map +0 -1
- package/dist/collection/components/proto-table/iconPaths.js.map +0 -1
- package/dist/collection/components/proto-table/proto-table.js.map +0 -1
- package/dist/collection/index.js.map +0 -1
- package/dist/esm/demo-table_2.entry.js.map +0 -1
- package/dist/esm/index-f60c9fab.js.map +0 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/loader.js.map +0 -1
- package/dist/esm/proto-table-wc.js.map +0 -1
- package/dist/proto-table-wc/index.esm.js.map +0 -1
- package/dist/proto-table-wc/p-6cf8a72f.js.map +0 -1
- package/dist/proto-table-wc/p-ed869df7.entry.js +0 -2
- package/dist/proto-table-wc/p-ed869df7.entry.js.map +0 -1
- package/dist/proto-table-wc/proto-table-wc.esm.js.map +0 -1
package/dist/cjs/index.cjs.js
CHANGED
package/dist/cjs/loader.cjs.js
CHANGED
package/dist/collection/index.js
CHANGED
@@ -1403,5 +1403,3 @@ const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
|
|
1403
1403
|
const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
|
1404
1404
|
|
1405
1405
|
export { bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };
|
1406
|
-
|
1407
|
-
//# sourceMappingURL=index-f60c9fab.js.map
|
package/dist/esm/index.js
CHANGED
package/dist/esm/loader.js
CHANGED
@@ -19,5 +19,3 @@ const patchBrowser = () => {
|
|
19
19
|
patchBrowser().then(options => {
|
20
20
|
return bootstrapLazy([["demo-table_2",[[1,"demo-table"],[0,"proto-table",{"data":[16],"details":[8],"fields":[16],"expanded":[32],"sort":[32],"clicks":[32]}]]]], options);
|
21
21
|
});
|
22
|
-
|
23
|
-
//# sourceMappingURL=proto-table-wc.js.map
|
@@ -1,3 +1,2 @@
|
|
1
|
-
|
2
|
-
/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
|
3
|
-
//# sourceMappingURL=p-6cf8a72f.js.map
|
1
|
+
let e,t,n=!1,l=!1;const o={},s=e=>"object"==(e=typeof e)||"function"===e;function r(e){var t,n,l;return null!==(l=null===(n=null===(t=e.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===n?void 0:n.getAttribute("content"))&&void 0!==l?l:void 0}const i=(e,t,...n)=>{let l=null,o=!1,r=!1;const i=[],u=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?u(l):null!=l&&"boolean"!=typeof l&&((o="function"!=typeof e&&!s(l))&&(l+=""),o&&r?i[i.length-1].t+=l:i.push(o?c(null,l):l),r=o)};if(u(n),t){const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}const a=c(e,null);return a.l=t,i.length>0&&(a.o=i),a},c=(e,t)=>({i:0,u:e,t,h:null,o:null,l:null}),u={},a=new WeakMap,f=e=>"sc-"+e.p,d=(e,t,n,l,o,r)=>{if(n!==l){let i=D(e,t),c=t.toLowerCase();if("class"===t){const t=e.classList,o=p(n),s=p(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("ref"===t)l&&l(e);else if(i||"o"!==t[0]||"n"!==t[1]){const c=s(l);if((i||c&&null!==l)&&!o)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&r||o)&&!c&&e.setAttribute(t,l=!0===l?"":l)}else t="-"===t[2]?t.slice(3):D(z,c)?c.slice(2):c[2]+t.slice(3),n&&G.rel(e,t,n,!1),l&&G.ael(e,t,l,!1)}},h=/\s/,p=e=>e?e.split(h):[],$=(e,t,n,l)=>{const s=11===t.h.nodeType&&t.h.host?t.h.host:t.h,r=e&&e.l||o,i=t.l||o;for(l in r)l in i||d(s,l,r[l],void 0,n,t.i);for(l in i)d(s,l,r[l],i[l],n,t.i)},m=(t,l,o)=>{const s=l.o[o];let r,i,c=0;if(null!==s.t)r=s.h=B.createTextNode(s.t);else{if(n||(n="svg"===s.u),r=s.h=B.createElementNS(n?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",s.u),n&&"foreignObject"===s.u&&(n=!1),$(null,s,n),null!=e&&r["s-si"]!==e&&r.classList.add(r["s-si"]=e),s.o)for(c=0;c<s.o.length;++c)i=m(t,s,c),i&&r.appendChild(i);"svg"===s.u?n=!1:"foreignObject"===r.tagName&&(n=!0)}return r},y=(e,n,l,o,s,r)=>{let i,c=e;for(c.shadowRoot&&c.tagName===t&&(c=c.shadowRoot);s<=r;++s)o[s]&&(i=m(null,l,s),i&&(o[s].h=i,c.insertBefore(i,n)))},w=(e,t,n,l,o)=>{for(;t<=n;++t)(l=e[t])&&(o=l.h,g(l),o.remove())},b=(e,t)=>e.u===t.u,v=(e,t)=>{const l=t.h=e.h,o=e.o,s=t.o,r=t.u,i=t.t;null===i?(n="svg"===r||"foreignObject"!==r&&n,$(e,t,n),null!==o&&null!==s?((e,t,n,l)=>{let o,s=0,r=0,i=t.length-1,c=t[0],u=t[i],a=l.length-1,f=l[0],d=l[a];for(;s<=i&&r<=a;)null==c?c=t[++s]:null==u?u=t[--i]:null==f?f=l[++r]:null==d?d=l[--a]:b(c,f)?(v(c,f),c=t[++s],f=l[++r]):b(u,d)?(v(u,d),u=t[--i],d=l[--a]):b(c,d)?(v(c,d),e.insertBefore(c.h,u.h.nextSibling),c=t[++s],d=l[--a]):b(u,f)?(v(u,f),e.insertBefore(u.h,c.h),u=t[--i],f=l[++r]):(o=m(t&&t[r],n,r),f=l[++r],o&&c.h.parentNode.insertBefore(o,c.h));s>i?y(e,null==l[a+1]?null:l[a+1].h,n,l,r,a):r>a&&w(t,s,i)})(l,o,t,s):null!==s?(null!==e.t&&(l.textContent=""),y(l,null,t,s,0,s.length-1)):null!==o&&w(o,0,o.length-1),n&&"svg"===r&&(n=!1)):e.t!==i&&(l.data=i)},g=e=>{e.l&&e.l.ref&&e.l.ref(null),e.o&&e.o.map(g)},S=(e,t)=>{t&&!e.$&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.$=t)))},j=(e,t)=>{if(e.i|=16,!(4&e.i))return S(e,e.m),te((()=>O(e,t)));e.i|=512},O=(e,t)=>{const n=e.v;let l;return t&&(l=L(n,"componentWillLoad")),P(l,(()=>M(e,n,t)))},M=async(e,t,n)=>{const l=e.g,o=l["s-rc"];n&&(e=>{const t=e.S,n=e.g,l=t.i,o=((e,t)=>{var n;let l=f(t);const o=_.get(l);if(e=11===e.nodeType?e:B,o)if("string"==typeof o){let t,s=a.get(e=e.head||e);if(s||a.set(e,s=new Set),!s.has(l)){{t=B.createElement("style"),t.innerHTML=o;const l=null!==(n=G.j)&&void 0!==n?n:r(B);null!=l&&t.setAttribute("nonce",l),e.insertBefore(t,e.querySelector("link"))}s&&s.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]);return l})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);k(e,t),o&&(o.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>C(e);0===t.length?n():(Promise.all(t).then(n),e.i|=4,t.length=0)}},k=(n,l)=>{try{l=l.render(),n.i&=-17,n.i|=2,((n,l)=>{const o=n.g,s=n.O||c(null,null),r=(e=>e&&e.u===u)(l)?l:i(null,null,l);t=o.tagName,r.u=null,r.i|=4,n.O=r,r.h=s.h=o.shadowRoot||o,e=o["s-sc"],v(s,r)})(n,l)}catch(e){F(e,n.g)}return null},C=e=>{const t=e.g,n=e.v,l=e.m;64&e.i||(e.i|=64,E(t),L(n,"componentDidLoad"),e.M(t),l||x()),e.$&&(e.$(),e.$=void 0),512&e.i&&ee((()=>j(e,!1))),e.i&=-517},x=()=>{E(B.documentElement),ee((()=>(e=>{const t=G.ce("appload",{detail:{namespace:"proto-table-wc"}});return e.dispatchEvent(t),t})(z)))},L=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){F(e)}},P=(e,t)=>e&&e.then?e.then(t):t(),E=e=>e.classList.add("hydrated"),N=(e,t,n)=>{if(t.k){const l=Object.entries(t.k),o=e.prototype;if(l.map((([e,[t]])=>{(31&t||2&n&&32&t)&&Object.defineProperty(o,e,{get(){return((e,t)=>R(this).C.get(t))(0,e)},set(t){((e,t,n)=>{const l=R(e),o=l.C.get(t),r=l.i,i=l.v;n=(e=>(null==e||s(e),e))(n),8&r&&void 0!==o||n===o||Number.isNaN(o)&&Number.isNaN(n)||(l.C.set(t,n),i&&2==(18&r)&&j(l,!1))})(this,e,t)},configurable:!0,enumerable:!0})})),1&n){const t=new Map;o.attributeChangedCallback=function(e,n,l){G.jmp((()=>{const n=t.get(e);if(this.hasOwnProperty(n))l=this[n],delete this[n];else if(o.hasOwnProperty(n)&&"number"==typeof this[n]&&this[n]==l)return;this[n]=(null!==l||"boolean"!=typeof this[n])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,n])=>{const l=n[1]||e;return t.set(l,e),l}))}}return e},T=(e,t={})=>{var n;const l=[],o=t.exclude||[],s=z.customElements,i=B.head,c=i.querySelector("meta[charset]"),u=B.createElement("style"),a=[];let d,h=!0;Object.assign(G,t),G.L=new URL(t.resourcesUrl||"./",B.baseURI).href,e.map((e=>{e[1].map((t=>{const n={i:t[0],p:t[1],k:t[2],P:t[3]};n.k=t[2];const r=n.p,i=class extends HTMLElement{constructor(e){super(e),q(e=this,n),1&n.i&&e.attachShadow({mode:"open"})}connectedCallback(){d&&(clearTimeout(d),d=null),h?a.push(this):G.jmp((()=>(e=>{if(0==(1&G.i)){const t=R(e),n=t.S,l=()=>{};if(!(1&t.i)){t.i|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){S(t,t.m=n);break}}n.k&&Object.entries(n.k).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,o)=>{if(0==(32&t.i)){{if(t.i|=32,(o=V(n)).then){const e=()=>{};o=await o,e()}o.isProxied||(N(o,n,2),o.isProxied=!0);const e=()=>{};t.i|=8;try{new o(t)}catch(e){F(e)}t.i&=-9,e()}if(o.style){let e=o.style;const t=f(n);if(!_.has(t)){const l=()=>{};((e,t,n)=>{let l=_.get(e);J&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,_.set(e,l)})(t,e,!!(1&n.i)),l()}}}const s=t.m,r=()=>j(t,!0);s&&s["s-rc"]?s["s-rc"].push(r):r()})(0,t,n)}l()}})(this)))}disconnectedCallback(){G.jmp((()=>{}))}componentOnReady(){return R(this).N}};n.T=e[0],o.includes(r)||s.get(r)||(l.push(r),s.define(r,N(i,n,1)))}))}));{u.innerHTML=l+"{visibility:hidden}.hydrated{visibility:inherit}",u.setAttribute("data-styles","");const e=null!==(n=G.j)&&void 0!==n?n:r(B);null!=e&&u.setAttribute("nonce",e),i.insertBefore(u,c?c.nextSibling:i.firstChild)}h=!1,a.length?a.map((e=>e.connectedCallback())):G.jmp((()=>d=setTimeout(x,30)))},W=e=>G.j=e,A=new WeakMap,R=e=>A.get(e),U=(e,t)=>A.set(t.v=e,t),q=(e,t)=>{const n={i:0,g:e,S:t,C:new Map};return n.N=new Promise((e=>n.M=e)),e["s-p"]=[],e["s-rc"]=[],A.set(e,n)},D=(e,t)=>t in e,F=(e,t)=>(0,console.error)(e,t),H=new Map,V=e=>{const t=e.p.replace(/-/g,"_"),n=e.T,l=H.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(H.set(n,e),e[t])),F)
|
2
|
+
/*!__STENCIL_STATIC_IMPORT_SWITCH__*/},_=new Map,z="undefined"!=typeof window?window:{},B=z.document||{head:{}},G={i:0,L:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},I=e=>Promise.resolve(e),J=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),K=[],Q=[],X=(e,t)=>n=>{e.push(n),l||(l=!0,t&&4&G.i?ee(Z):G.raf(Z))},Y=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){F(e)}e.length=0},Z=()=>{Y(K),Y(Q),(l=K.length>0)&&G.raf(Z)},ee=e=>I().then(e),te=X(Q,!0);export{T as b,i as h,I as p,U as r,W as s}
|
@@ -0,0 +1 @@
|
|
1
|
+
import{r as t,h as e}from"./p-6cf8a72f.js";const r=class{constructor(r){t(this,r),this.fields=[{label:"Date",prop:"date"},{label:"List Price",prop:"price"},{label:"% of Market",prop:"market"},{label:"ProfitTime Score",prop:"score"}],this.items=[],this.table=void 0,this.renderDetails=t=>{const{tags:r=[]}=t;return e("div",{class:"detailWrapper"},e("span",null,r.length," details..."),e("ul",null,r.map((t=>e("li",null,t)))))}}componentWillLoad(){this.items=[{date:"08/30/2020",price:"$24,000",market:"98%",score:"No Score",tags:["one","two","three"]},{date:"08/31/2020",price:"$24,000",market:"99%",score:"No Score",tags:["uno","duo"]},{date:"09/01/2020",price:"$27,000",market:"102%",score:"Platinum"},{date:"09/02/2020",price:"$27,423",market:"104%",score:"Platinum",tags:["dog","cat","fish","hamster"]},{date:"09/03/2020",price:"$27,521",market:"106%",score:"Platinum",tags:["4wd","sports"]},{date:"09/04/2020",price:"$27,687",market:"107%",score:"Platinum",tags:["leather","chrome"]}]}componentDidLoad(){const{table:t,items:e,fields:r}=this;t.data=e,t.fields=r,t.details=this.renderDetails}render(){return e("proto-table",{ref:t=>this.table=t})}};r.style=".detailWrapper{font-weight:100;font-size:13px;display:flex;flex-direction:column;justify-items:start;padding:5px;padding-left:30px}";const s={down:"M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z",up:"M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z",left:"M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z",right:"M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z",more:"M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z","arrow-up":"M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z","arrow-down":"M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z"},i={right:"show",down:"hide","arrow-up":"sort","arrow-down":"sort"},l=class{constructor(r){t(this,r),this.protoIcon=(t,r,l=24)=>{const o=s[t];return e("svg",{width:l,height:l,viewBox:"0 0 24 24",role:"img","aria-labelledby":"title"},e("title",null,(t=>i[t])(t)),e("g",{fill:r},e("path",{d:o})),e("path",{d:"M0 0h24v24H0z",fill:"none"}))},this.handleCellClick=(t,e)=>()=>{0===t&&(this.expanded=this.expanded===e?void 0:e)},this.handleSortClick=t=>()=>{this.sort===t?2===this.clicks?(this.clicks=0,this.sort=void 0):this.clicks=this.clicks+1:(this.sort=t,this.clicks=1)},this.iconFor=t=>this.sort===t&&2===this.clicks?"arrow-up":"arrow-down",this.header=()=>{const{fields:t,iconFor:r,protoIcon:s}=this;return e("div",{class:"header"},t.map((({label:t},i)=>{const l=i===this.sort?"headerCell sort":"headerCell",o=r(i);return e("div",{class:l,onClick:this.handleSortClick(i)},s(o),e("span",null,t))})))},this.row=(t,r)=>{const{fields:s,protoIcon:i}=this;return e("div",{class:"rowContainer"},e("div",{class:this.expanded===r?"row expanded":"row"},s.map((({prop:s},l)=>e("div",{class:l===this.sort?"cell sort":"cell",onClick:this.handleCellClick(l,r)},i(0===l&&this.details?this.expanded===r?"down":"right":"pad"),t[s])))),this.details&&this.expanded===r&&this.details(t))},this.data=[],this.details=void 0,this.fields=[],this.expanded=void 0,this.sort=void 0,this.clicks=0}render(){const t=this.data||[];return e("div",{class:"table"},this.header(),t.map(((t,e)=>this.row(t,e))))}};l.style=".table{font-weight:400;font-size:13px;display:flex;flex-direction:column;width:100%;border:1px solid var(--clrs-navy);border-radius:2px}.table svg{fill:var(--clrs-navy)}.header{display:flex}.headerCell{flex-basis:100%;display:flex;align-items:center;justify-items:start;border-right:1px solid var(--clrs-navy);border-bottom:1px solid var(--clrs-navy);padding:5px;cursor:pointer}.headerCell svg g{display:none}.headerCell.sort svg g{display:inline}.headerCell:hover svg g{display:inline}.headerCell:hover{background-color:var(--clrs-silver)}.headerCell:last-child{border-right:none}.cell{flex-basis:100%;display:flex;align-items:center;justify-items:start;padding:5px}.cell:first-child svg{cursor:pointer}.sort{background-color:var(--cx-column-sort)}.row{display:flex;justify-items:stretch;width:100%}.row.expanded{background-color:var(--cx-row-expanded)}.row.expanded svg{fill:var(--clrs-red)}.row:hover{background-color:var(--cx-row-hover)}";export{r as demo_table,l as proto_table}
|
@@ -1,2 +1 @@
|
|
1
|
-
import{p as
|
2
|
-
//# sourceMappingURL=proto-table-wc.esm.js.map
|
1
|
+
import{p as a,b as e}from"./p-6cf8a72f.js";export{s as setNonce}from"./p-6cf8a72f.js";(()=>{const e=import.meta.url,s={};return""!==e&&(s.resourcesUrl=new URL(".",e).href),a(s)})().then((a=>e([["p-8b0ca37d",[[1,"demo-table"],[0,"proto-table",{data:[16],details:[8],fields:[16],expanded:[32],sort:[32],clicks:[32]}]]]],a)));
|
package/package.json
CHANGED
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"demo-table.proto-table.entry.cjs.js","mappings":"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","names":["h","index"],"sources":["./src/components/demo-table/demo-table.css?tag=demo-table&encapsulation=shadow","./src/components/demo-table/demo-table.tsx","./src/components/proto-table/iconPaths.ts","./src/components/proto-table/proto-table.css?tag=proto-table","./src/components/proto-table/proto-table.tsx"],"sourcesContent":[".detailWrapper {\n font-weight: 100;\n font-size: 13px;\n display: flex;\n flex-direction: column;\n justify-items: start;\n padding: 5px;\n padding-left: 30px;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'demo-table',\n styleUrl: 'demo-table.css',\n shadow: true,\n})\nexport class DemoTable {\n componentWillLoad() {\n this.items = [\n {\n date: '08/30/2020',\n price: '$24,000',\n market: '98%',\n score: 'No Score',\n tags: ['one', 'two', 'three'],\n },\n {\n date: '08/31/2020',\n price: '$24,000',\n market: '99%',\n score: 'No Score',\n tags: ['uno', 'duo'],\n },\n {\n date: '09/01/2020',\n price: '$27,000',\n market: '102%',\n score: 'Platinum',\n },\n {\n date: '09/02/2020',\n price: '$27,423',\n market: '104%',\n score: 'Platinum',\n tags: ['dog', 'cat', 'fish', 'hamster'],\n },\n {\n date: '09/03/2020',\n price: '$27,521',\n market: '106%',\n score: 'Platinum',\n tags: ['4wd', 'sports'],\n },\n {\n date: '09/04/2020',\n price: '$27,687',\n market: '107%',\n score: 'Platinum',\n tags: ['leather', 'chrome'],\n },\n ];\n }\n\n componentDidLoad() {\n const { table, items, fields } = this;\n\n table.data = items;\n table.fields = fields;\n table.details = this.renderDetails;\n }\n\n fields = [\n { label: 'Date', prop: 'date' },\n { label: 'List Price', prop: 'price' },\n { label: '% of Market', prop: 'market' },\n { label: 'ProfitTime Score', prop: 'score' },\n ];\n\n items = [];\n table = undefined;\n\n renderDetails = item => {\n const { tags = [] } = item;\n\n return (\n <div class=\"detailWrapper\">\n <span>{tags.length} details...</span>\n <ul>\n {tags.map(tag => (\n <li>{tag}</li>\n ))}\n </ul>\n </div>\n );\n };\n\n render() {\n return <proto-table ref={el => (this.table = el)} />;\n }\n}\n","const iconPaths = {\n 'down': 'M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z',\n 'up': 'M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z',\n 'left': 'M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z',\n 'right': 'M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z',\n 'more': 'M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z',\n 'arrow-up': 'M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z',\n 'arrow-down': 'M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z',\n};\n\nexport { iconPaths };\nexport default iconPaths;\n",".table {\n font-weight: 400;\n font-size: 13px;\n display: flex;\n flex-direction: column;\n width: 100%;\n border: 1px solid var(--clrs-navy);\n border-radius: 2px;\n}\n\n.table svg {\n fill: var(--clrs-navy);\n}\n\n.header {\n display: flex;\n}\n\n.headerCell {\n flex-basis: 100%;\n display: flex;\n align-items: center;\n justify-items: start;\n border-right: 1px solid var(--clrs-navy);\n border-bottom: 1px solid var(--clrs-navy);\n padding: 5px;\n cursor: pointer;\n}\n\n.headerCell svg g {\n display: none;\n}\n\n.headerCell.sort svg g {\n display: inline;\n}\n\n.headerCell:hover svg g {\n display: inline;\n}\n\n.headerCell:hover {\n background-color: var(--clrs-silver);\n}\n\n.headerCell:last-child {\n border-right: none;\n}\n\n.cell {\n flex-basis: 100%;\n display: flex;\n align-items: center;\n justify-items: start;\n padding: 5px;\n}\n\n.cell:first-child svg {\n cursor: pointer;\n}\n\n.sort {\n background-color: var(--cx-column-sort);\n}\n\n.row {\n display: flex;\n justify-items: stretch;\n width: 100%;\n}\n\n.row.expanded {\n background-color: var(--cx-row-expanded);\n}\n\n.row.expanded svg {\n fill: var(--clrs-red);\n}\n\n.row:hover {\n background-color: var(--cx-row-hover);\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { iconPaths } from './iconPaths';\n\nconst iconAliases = {\n 'right': 'show',\n 'down': 'hide',\n 'arrow-up': 'sort',\n 'arrow-down': 'sort',\n};\n\nconst aliasFor = name => {\n return iconAliases[name];\n};\n\n@Component({\n tag: 'proto-table',\n styleUrl: 'proto-table.css',\n})\nexport class ProtoTable {\n @Prop() data = [];\n @Prop() details = undefined;\n @Prop() fields = [];\n @State() expanded = undefined;\n @State() sort = undefined;\n @State() clicks = 0;\n\n protoIcon = (name, hex = undefined, size = 24) => {\n const path = iconPaths[name];\n return (\n <svg width={size} height={size} viewBox=\"0 0 24 24\" role=\"img\" aria-labelledby=\"title\">\n <title>{aliasFor(name)}</title>\n <g fill={hex}>\n <path d={path} />\n </g>\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n </svg>\n );\n };\n\n handleCellClick = (index, row) => {\n return () => {\n if (index === 0) {\n this.expanded = this.expanded === row ? undefined : row;\n }\n };\n };\n\n handleSortClick = index => {\n // NOTE: small state machine for dealing with sorting...\n return () => {\n if (this.sort === index) {\n if (this.clicks === 2) {\n this.clicks = 0;\n this.sort = undefined;\n } else {\n this.clicks = this.clicks + 1;\n }\n } else {\n this.sort = index;\n this.clicks = 1;\n }\n };\n };\n\n iconFor = column => {\n return this.sort === column && this.clicks === 2 ? 'arrow-up' : 'arrow-down';\n };\n\n header = () => {\n const { fields, iconFor, protoIcon } = this;\n return (\n <div class=\"header\">\n {fields.map(({ label }, index) => {\n const cellClass = index === this.sort ? 'headerCell sort' : 'headerCell';\n const ikon = iconFor(index);\n return (\n <div class={cellClass} onClick={this.handleSortClick(index)}>\n {protoIcon(ikon)}\n <span>{label}</span>\n </div>\n );\n })}\n </div>\n );\n };\n\n row = (data, row) => {\n const { fields, protoIcon } = this;\n const rowClass = this.expanded === row ? 'row expanded' : 'row';\n return (\n <div class=\"rowContainer\">\n <div class={rowClass}>\n {fields.map(({ prop }, index) => {\n const cellClass = index === this.sort ? 'cell sort' : 'cell';\n return (\n <div class={cellClass} onClick={this.handleCellClick(index, row)}>\n {index === 0 && this.details ? protoIcon(this.expanded === row ? 'down' : 'right') : protoIcon('pad')}\n {data[prop]}\n </div>\n );\n })}\n </div>\n\n {this.details && this.expanded === row && this.details(data)}\n </div>\n );\n };\n\n render() {\n const items = this.data || [];\n return (\n <div class=\"table\">\n {this.header()}\n {items.map((item, index) => this.row(item, index))}\n </div>\n );\n }\n}\n"],"version":3}
|