diff --git a/README.md b/README.md index 193b8df..5e97b33 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,34 @@ -# notification +# Tiny Components - Notification + +Created with [Riot.js](https://riot.js.org) + +Handle notification by using [Plain-UI](https://plain-ui.com) and [Observable](https://github.com/riot/observable) + +## Install + +``` +npm install @tiny-components\notification --save +``` + +## You can use it like this + +Add to your App once, don't forget to register and mount, + +``` + +``` + +Call function anywhere, to run through the store and display a notification. + +``` +import notificationStore from './@tiny-components/notification/src/notificationStore.js' +notificationStore.danger('Error! Something is wrong') +``` + +## Options + +| attribute | values | +|---|---| +| wrapper-class | | +| timeout | | diff --git a/example/IBMPlexMono-Bold.eot b/example/IBMPlexMono-Bold.eot new file mode 100644 index 0000000..964922d Binary files /dev/null and b/example/IBMPlexMono-Bold.eot differ diff --git a/example/IBMPlexMono-Bold.ttf b/example/IBMPlexMono-Bold.ttf new file mode 100644 index 0000000..b509e00 Binary files /dev/null and b/example/IBMPlexMono-Bold.ttf differ diff --git a/example/IBMPlexMono-Bold.woff b/example/IBMPlexMono-Bold.woff new file mode 100644 index 0000000..d310614 Binary files /dev/null and b/example/IBMPlexMono-Bold.woff differ diff --git a/example/IBMPlexMono-Bold.woff2 b/example/IBMPlexMono-Bold.woff2 new file mode 100644 index 0000000..c093628 Binary files /dev/null and b/example/IBMPlexMono-Bold.woff2 differ diff --git a/example/IBMPlexMono.eot b/example/IBMPlexMono.eot new file mode 100644 index 0000000..edcc7fe Binary files /dev/null and b/example/IBMPlexMono.eot differ diff --git a/example/IBMPlexMono.ttf b/example/IBMPlexMono.ttf new file mode 100644 index 0000000..47a085c Binary files /dev/null and b/example/IBMPlexMono.ttf differ diff --git a/example/IBMPlexMono.woff b/example/IBMPlexMono.woff new file mode 100644 index 0000000..6127906 Binary files /dev/null and b/example/IBMPlexMono.woff differ diff --git a/example/IBMPlexMono.woff2 b/example/IBMPlexMono.woff2 new file mode 100644 index 0000000..6c6feb4 Binary files /dev/null and b/example/IBMPlexMono.woff2 differ diff --git a/example/example.css b/example/example.css new file mode 100644 index 0000000..7033597 --- /dev/null +++ b/example/example.css @@ -0,0 +1 @@ +@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:400;src:url(IBMPlexMono.eot);src:url(IBMPlexMono.eot?#iefix) format("embedded-opentype"),url(IBMPlexMono.woff2) format("woff2"),url(IBMPlexMono.woff) format("woff"),url(IBMPlexMono.ttf) format("truetype")}@font-face{font-display:swap;font-family:IBM Plex Mono;font-style:normal;font-weight:700;src:url(IBMPlexMono-Bold.eot);src:url(IBMPlexMono-Bold.eot?#iefix) format("embedded-opentype"),url(IBMPlexMono-Bold.woff2) format("woff2"),url(IBMPlexMono-Bold.woff) format("woff"),url(IBMPlexMono-Bold.ttf) format("truetype")}:root{--grid-columns:12;--grid-grid-spacing:15px;--grid-xs:576px;--grid-sm:768px;--grid-md:992px;--grid-lg:1200px;--grid-xlg:1600px;--grid-xxs-max:575px;--grid-xs-max:767px;--grid-sm-max:991px;--grid-md-max:1199px;--grid-lg-max:1599px;--body:#f9f9f9;--text:#363636;--text-contrast:#fff;--primary:#3e3e3e;--primary-contrast:#3e3e3e;--active:#717171;--active-contrast:#fff;--link:#363636;--link-hover:#d95959;--danger:#d95959;--danger-contrast:#ecacac;--info:#0090d4;--info-constrast:#3bc0ff;--success:#64ac64;--success-contrast:#a6d0a6;--warning:#f0ad4e;--warning-contrast:#f8d9ac;--background:#3e3e3e;--background-contrast:#fff;--background-alpha:rgba(0,0,0,.7);--border:#3e3e3e;--border-contrast:#fff;--font-family:IBM Plex Mono,sans-serif}html{-webkit-text-size-adjust:100%;font-size:100%;line-height:1.15}body,html{height:100%;margin:0}html{box-sizing:border-box}body{background-color:var(--body);color:var(--text);direction:ltr;font-family:var(--font-family);font-size:.9rem;line-height:1.618}@media only screen and (min-width:992px){body{font-size:1rem}}a{color:var(--link);text-decoration:none;transition:color .5s}a:hover{color:var(--link-hover)}a:focus{outline:none}*,:after,:before{box-sizing:inherit}button{margin:0;text-transform:none}[type=button],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}.content a{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges;text-decoration:underline}.h1,.h4,h1,h4{font-family:IBM Plex Mono,sans-serif;font-weight:700;line-height:1.2;margin:0 0 1rem}.h1,h1{font-size:2.5rem}.h4,h4{font-size:1.5rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.75rem}.h4,h4{font-size:1.75rem}}.button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-contrast);border:1px solid var(--border);border-radius:2px;color:var(--text);display:inline-flex;font-family:var(--font-family);font-size:1rem;margin:0 0 1rem;padding:.5rem 1.3rem;position:relative;text-decoration:none;transition:background-color .1s;width:100%}@media only screen and (min-width:768px){.button{width:auto}}.button--small{font-size:.8rem;padding:.3rem 1.1rem}.button:hover{background-color:var(--active);color:#fff;cursor:pointer;text-decoration:none}.button:active,.button:focus{outline:1px solid var(--active)}.button:disabled{opacity:.5}.button:disabled:hover{background-color:var(--background-contrast);border:1px solid var(--border);color:var(--border);cursor:not-allowed}.button--danger{border-color:var(--danger)}.button--danger:hover{background-color:var(--danger)}.button--danger:active,.button--danger:focus{outline:2px solid var(--danger)}.button--success{border-color:var(--success)}.button--success:hover{background-color:var(--success)}.button--success:active,.button--success:focus{outline:2px solid var(--success)}.icon{fill:var(--text);font-size:1.4rem;height:1em;max-height:100%;max-width:100%;overflow:hidden;vertical-align:middle;width:1em}.bar{background-color:var(--background);border:1px solid var(--border);border-radius:2px;color:var(--text-contrast);display:flex;min-height:2.8em}.bar__start{justify-content:start}.bar__main{flex-grow:1}.bar__main,.bar__start{align-items:center;align-self:center;display:flex;margin-left:.75em}.bar__main:last-child,.bar__start:last-child{margin-right:.75em}@-webkit-keyframes loading-animation{0%{height:60px}50%{height:40px}to{height:60px}}@keyframes loading-animation{0%{height:60px}50%{height:40px}to{height:60px}}.toast{background:var(--background);border:1px solid var(--border);display:flex;left:calc(-100% - 2rem);margin-top:1.25rem;max-width:800px;pointer-events:auto;position:relative;transition:left .1s;width:-webkit-max-content;width:-moz-max-content;width:max-content}.toast--animation{left:0}.toast__body{color:var(--text-contrast);padding:1em 1.25em;width:100%}.toast-wrapper{bottom:0;left:0;margin:2rem;pointer-events:none;position:fixed;z-index:30}.toast-wrapper--right{left:inherit;right:0}.toast-wrapper--right .toast{left:inherit;right:calc(-100% - 2rem);transition:right .1s}.toast-wrapper--right .toast--animation{left:inherit;right:0}.justify-end{justify-content:flex-end}.container{box-sizing:border-box;margin-left:auto;margin-right:auto;padding-left:30px;padding-right:30px;width:100%}.container .grid{margin-left:-15px;margin-right:-15px}@media (min-width:576px){.container{max-width:576px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:992px){.container{max-width:992px}}@media (min-width:1200px){.container{max-width:1200px}}@media (min-width:1600px){.container{max-width:1600px}}.grid{display:block;display:flex;flex-wrap:wrap;list-style-type:none;margin:0 auto;padding:0;position:relative}.col-12,.grid,.grid:after,.grid:before{box-sizing:border-box}.col-12{padding:15px;position:relative;vertical-align:top}.col-12:after,.col-12:before{box-sizing:border-box}.col-12 .grid{flex:1 1 auto;margin:-15px}.col-12{width:100%}.m-top-4{margin-top:1.125rem}.m-top-5{margin-top:2rem}.m-bottom-0{margin-bottom:0}.m-bottom-4{margin-bottom:1.125rem}.m-left-3{margin-left:.5rem}@media only screen and (min-width:768px){.m-left-sm-3{margin-left:.5rem}}@media only screen and (min-width:992px){.m-left-md-3{margin-left:.5rem}.m-right-md-3{margin-right:.5rem}}.color-active{color:var(--active)}.fill-text,.fill-text svg{fill:var(--text)}.fill-active,.fill-active svg{fill:var(--active)}.border-color-active{border-color:var(--active)}.background-color-active{background-color:var(--active)} diff --git a/example/example.js b/example/example.js new file mode 100644 index 0000000..d15e836 --- /dev/null +++ b/example/example.js @@ -0,0 +1,11 @@ +(()=>{var t,e={432:t=>{!function(e,n){const s="*",r=Object.defineProperties,o=Object.entries,i=(t,e)=>(n,s)=>(t.has(n)?t.get(n).add(s):t.set(n,(new Set).add(s)),e),a=(t,e)=>(n,r)=>(n!==s||r?((t,e,n,s)=>{if(s){const e=t.get(n);e&&(e.delete(s),0===e.size&&t.delete(n))}else t.delete(n)})(t,0,n,r):t.clear(),e),u=(t,e)=>(t,n)=>e.on(t,(function s(...r){e.off(t,s),n.apply(e,r)})),c=(t,e)=>(n,...r)=>{const o=t.get(n);return o&&o.forEach((t=>t.apply(e,r))),t.get(s)&&n!==s&&e.trigger(s,n,...r),e};t.exports=function(t){const e=new Map;return r(t=t||{},o({on:i,off:a,one:u,trigger:c}).reduce(((n,[s,r])=>(n[s]={value:r(e,t),enumerable:!1,writable:!1,configurable:!1},n)),{})),t}}("undefined"!=typeof window&&window)},641:(t,e,n)=>{"use strict";function s(t){return t.replace(/-(\w)/g,((t,e)=>e.toUpperCase()))}function r(t,e){t.firstChild&&(e.appendChild(t.firstChild),r(t,e))}function o(t){i(t.childNodes)}function i(t){Array.from(t).forEach(a)}const a=t=>t&&t.parentNode&&t.parentNode.removeChild(t),u=(t,e)=>e&&e.parentNode&&e.parentNode.insertBefore(t,e),c=new Map,l=Symbol("riot-component"),p=new Set,d="is",h="mount",m="update",f="unmount",b="shouldUpdate",g="onBeforeMount",v="onMounted",O="onBeforeUpdate",E="onUpdated",y="onBeforeUnmount",N="onUnmounted",T="props",x="state",_="slots",j="root",M=Symbol("pure"),A=Symbol("is_updating"),S=Symbol("parent"),w=Symbol("attributes"),C=Symbol("template");var U=Object.freeze({__proto__:null,COMPONENTS_IMPLEMENTATION_MAP:c,DOM_COMPONENT_INSTANCE_PROPERTY:l,PLUGINS_SET:p,IS_DIRECTIVE:d,VALUE_ATTRIBUTE:"value",MOUNT_METHOD_KEY:h,UPDATE_METHOD_KEY:m,UNMOUNT_METHOD_KEY:f,SHOULD_UPDATE_KEY:b,ON_BEFORE_MOUNT_KEY:g,ON_MOUNTED_KEY:v,ON_BEFORE_UPDATE_KEY:O,ON_UPDATED_KEY:E,ON_BEFORE_UNMOUNT_KEY:y,ON_UNMOUNTED_KEY:N,PROPS_KEY:T,STATE_KEY:x,SLOTS_KEY:_,ROOT_KEY:j,IS_PURE_SYMBOL:M,IS_COMPONENT_UPDATING:A,PARENT_KEY_SYMBOL:S,ATTRIBUTES_KEY_SYMBOL:w,TEMPLATE_KEY_SYMBOL:C});var I={EACH:0,IF:1,SIMPLE:2,TAG:3,SLOT:4};var P={ATTRIBUTE:0,EVENT:1,TEXT:2,VALUE:3};const D=Symbol("head"),k=Symbol("tail");function L(t){const e=t.dom.cloneNode(!0),{head:n,tail:s}=function(){const t=document.createTextNode(""),e=document.createTextNode("");return t[D]=!0,e[k]=!0,{head:t,tail:e}}();return{avoidDOMInjection:!0,fragment:e,head:n,tail:s,children:[n,...Array.from(e.childNodes),s]}}function R(t,e,n,s){return void 0===s&&(s={}),Object.defineProperty(t,e,Object.assign({value:n,enumerable:!1,writable:!1,configurable:!0},s)),t}function Y(t,e,n){return Object.entries(e).forEach((e=>{let[s,r]=e;R(t,s,r,n)})),t}function B(t,e){return Object.entries(e).forEach((e=>{let[n,s]=e;t[n]||(t[n]=s)})),t}function K(t,e){return typeof t===e}function V(t){const e=t.ownerSVGElement;return!!e||null===e}function $(t){return"template"===t.tagName.toLowerCase()}function F(t){return K(t,"function")}function z(t){return!H(t)&&t.constructor===Object}function H(t){return null==t}const G=Symbol("unmount"),q={nodes:[],mount(t,e){return this.update(t,e)},update(t,e){const{placeholder:n,nodes:s,childrenMap:r}=this,o=t===G?null:this.evaluate(t),i=o?Array.from(o):[],{newChildrenMap:c,batches:l,futureNodes:p}=function(t,e,n,s){const{condition:r,template:o,childrenMap:i,itemName:a,getKey:u,indexName:c,root:l,isTemplateTag:p}=s,d=new Map,h=[],m=[];return t.forEach(((t,s)=>{const f=function(t,e){let{itemName:n,indexName:s,index:r,item:o}=e;R(t,n,o),s&&R(t,s,r);return t}(Object.create(e),{itemName:a,indexName:c,index:s,item:t}),b=u?u(f):s,g=i.get(b),v=[];if(function(t,e){return!!t&&!t(e)}(r,f))return;const O=!g,E=g?g.template:o.clone(),y=E.el||l.cloneNode(),N=p&&O?L(E):E.meta;O?h.push((()=>E.mount(y,f,n,N))):h.push((()=>E.update(f,n))),p?v.push(...N.children):v.push(y),i.delete(b),m.push(...v),d.set(b,{nodes:v,template:E,context:f,index:s})})),{newChildrenMap:d,batches:h,futureNodes:m}}(i,t,e,this);return((t,e,n,s)=>{const r=e.length;let o=t.length,i=r,c=0,l=0,p=null;for(;cs-l){const r=n(t[c],0);for(;l{if(s<0){const n=t[t.length-1];if(n){const{template:s,nodes:r,context:o}=n;r.pop(),r.length||(t.pop(),s.unmount(o,e,null))}}return n}}(Array.from(r.values()),e),n),l.forEach((t=>t())),this.childrenMap=c,this.nodes=p,this},unmount(t,e){return this.update(G,e),this}};const X={mount(t,e){return this.update(t,e)},update(t,e){const n=!!this.evaluate(t),s=!this.value&&n,r=this.value&&!n,o=()=>{const n=this.node.cloneNode();u(n,this.placeholder),this.template=this.template.clone(),this.template.mount(n,t,e)};switch(!0){case s:o();break;case r:this.unmount(t);break;default:n&&this.template.update(t,e)}return this.value=n,this},unmount(t,e){return this.template.unmount(t,e,!0),this}};function W(t){throw new Error(t)}function Z(t){const e=new Map,n=n=>(e.has(n)||e.set(n,t.call(this,n)))&&e.get(n);return n.cache=e,n}function J(t){return t.reduce(((t,e)=>{const{value:n,type:r}=e;switch(!0){case!e.name&&0===r:return Object.assign({},t,n);case 3===r:t.value=e.value;break;default:t[s(e.name)]=e.value}return t}),{})}const Q="undefined"==typeof Element?{}:Element.prototype,tt=Z((t=>Q.hasOwnProperty(t)));function et(t,e,n,s){let{name:r}=e;if(!r)return s&&function(t,e,n){const s=e?Object.keys(e):[];Object.keys(n).filter((t=>!s.includes(t))).forEach((e=>t.removeAttribute(e)))}(t,n,s),void(n&&function(t,e){Object.entries(e).forEach((e=>{let[n,s]=e;return et(t,{name:n},s)}))}(t,n));!tt(r)&&(function(t){return K(t,"boolean")}(n)||z(n)||F(n))&&(t[r]=n),!function(t){return!t&&0!==t}(n)?function(t){return!0===t||["string","number"].includes(typeof t)}(n)&&t.setAttribute(r,function(t,e){return!0===e?t:e}(r,n)):t.removeAttribute(r)}const nt=/^on/,st={handleEvent(t){this[t.type](t)}},rt=new WeakMap;function ot(t){return H(t)?"":t}const it=(t,e)=>{const n=t.childNodes[e];if(n.nodeType===Node.COMMENT_NODE){const e=document.createTextNode("");return t.replaceChild(e,n),e}return n};var at={0:et,1:function(t,e,n){let{name:s}=e;const r=s.replace(nt,""),o=rt.get(t)||(t=>{const e=Object.create(st);return rt.set(t,e),e})(t),[i,a]=(t=>Array.isArray(t)?t:[t,!1])(n),u=o[r],c=i&&!u;u&&!i&&t.removeEventListener(r,o),c&&t.addEventListener(r,o,a),o[r]=i},2:function(t,e,n){t.data=ot(n)},3:function(t,e,n){t.value=ot(n)}};const ut={mount(t){return this.value=this.evaluate(t),ct(this,this.value),this},update(t){const e=this.evaluate(t);return this.value!==e&&(ct(this,e),this.value=e),this},unmount(){return 1===this.type&&ct(this,null),this}};function ct(t,e){return at[t.type](t.node,t,e,t.value)}function lt(t,e){return Object.assign({},ut,e,{node:2===e.type?it(t,e.childNodeIndex):t})}const pt=(t,e)=>t[S]||e,dt={attributes:[],getTemplateScope(t,e){return function(t,e,n){if(!t||!t.length)return n;const s=t.map((t=>Object.assign({},t,{value:t.evaluate(e)})));return Object.assign(Object.create(n||null),J(s))}(this.attributes,t,e)},mount(t,e){const n=!!t.slots&&t.slots.find((t=>{let{id:e}=t;return e===this.name})),{parentNode:s}=this.node,r=pt(t,e);return this.template=n&&Nt(n.html,n.bindings).createDOM(s),this.template&&(o(this.node),this.template.mount(this.node,this.getTemplateScope(t,r),r),this.template.children=Array.from(this.node.childNodes)),ht(this.node),a(this.node),this},update(t,e){if(this.template){const n=pt(t,e);this.template.update(this.getTemplateScope(t,n),n)}return this},unmount(t,e,n){return this.template&&this.template.unmount(this.getTemplateScope(t,e),null,n),this}};function ht(t){const e=t&&t.firstChild;e&&(u(e,t),ht(t))}function mt(t){return t.reduce(((t,e)=>{let{bindings:n}=e;return t.concat(n)}),[])}const ft={mount(t){return this.update(t)},update(t,e){const n=this.evaluate(t);return n&&n===this.name?this.tag.update(t):(this.unmount(t,e,!0),this.name=n,this.tag=function(t,e,n){return void 0===e&&(e=[]),void 0===n&&(n=[]),t?t({slots:e,attributes:n}):Nt(function(t){return t.reduce(((t,e)=>t+e.html),"")}(e),[...mt(e),{expressions:n.map((t=>Object.assign({type:0},t)))}])}(this.getComponent(n),this.slots,this.attributes),this.tag.mount(this.node,t)),this},unmount(t,e,n){return this.tag&&this.tag.unmount(n),this}};var bt={1:function(t,e){let{evaluate:n,template:s}=e;const r=document.createTextNode("");return u(r,t),a(t),Object.assign({},X,{node:t,evaluate:n,placeholder:r,template:s.createDOM(t)})},2:function(t,e){let{expressions:n}=e;return Object.assign({},(s=n.map((e=>lt(t,e))),["mount","update","unmount"].reduce(((t,e)=>Object.assign({},t,{[e]:t=>s.map((n=>n[e](t)))&&r})),{})));var s,r},0:function(t,e){let{evaluate:n,condition:s,itemName:r,indexName:o,getKey:i,template:c}=e;const l=document.createTextNode(""),p=t.cloneNode();return u(l,t),a(t),Object.assign({},q,{childrenMap:new Map,node:t,root:p,condition:s,evaluate:n,isTemplateTag:$(p),template:c.createDOM(t),getKey:i,indexName:o,itemName:r,placeholder:l})},3:function(t,e){let{evaluate:n,getComponent:s,slots:r,attributes:o}=e;return Object.assign({},ft,{node:t,evaluate:n,slots:r,attributes:o,getComponent:s})},4:function(t,e){let{name:n,attributes:s}=e;return Object.assign({},dt,{attributes:s,node:t,name:n})}};function gt(t,e){return t.map((t=>2===t.type?Object.assign({},t,{childNodeIndex:t.childNodeIndex+e}):t))}function vt(t,e,n){const{selector:s,type:r,redundantAttribute:o,expressions:i}=e,a=s?t.querySelector(s):t;o&&a.removeAttribute(o);const u=i||[];return(bt[r]||bt[2])(a,Object.assign({},e,{expressions:n&&!s?gt(u,n):u}))}function Ot(t,e){return V(t)?function(t,e){return e.ownerDocument.importNode((new window.DOMParser).parseFromString(`${t}`,"application/xml").documentElement,!0)}(e,t):function(t,e){const n=$(e)?e:document.createElement("template");return n.innerHTML=t,n.content}(e,t)}function Et(t,e){switch(!0){case V(t):r(e,t);break;case $(t):t.parentNode.replaceChild(e,t);break;default:t.appendChild(e)}}const yt=Object.freeze({createDOM(t){return this.dom=this.dom||function(t,e){return e&&("string"==typeof e?Ot(t,e):e)}(t,this.html)||document.createDocumentFragment(),this},mount(t,e,n,s){if(void 0===s&&(s={}),!t)throw new Error("Please provide DOM node to mount properly your template");this.el&&this.unmount(e);const{fragment:r,children:o,avoidDOMInjection:i}=s,{parentNode:a}=o?o[0]:t,u=$(t),c=u?function(t,e,n){const s=Array.from(t.childNodes);return Math.max(s.indexOf(e),s.indexOf(n.head)+1,0)}(a,t,s):null;this.createDOM(t);const l=r||this.dom.cloneNode(!0);return this.el=u?a:t,this.children=u?o||Array.from(l.childNodes):null,!i&&l&&Et(t,l),this.bindings=this.bindingsData.map((t=>vt(this.el,t,c))),this.bindings.forEach((t=>t.mount(e,n))),this.meta=s,this},update(t,e){return this.bindings.forEach((n=>n.update(t,e))),this},unmount(t,e,n){void 0===n&&(n=!1);const s=this.el;if(!s)return this;switch(this.bindings.forEach((s=>s.unmount(t,e,n))),!0){case s[M]||null===n:break;case Array.isArray(this.children):i(this.children);break;case!n:o(s);break;case!!n:a(s)}return this.el=null,this},clone(){return Object.assign({},this,{meta:{},el:null})}});function Nt(t,e){return void 0===e&&(e=[]),Object.assign({},yt,{html:t,bindingsData:e})}function Tt(){return this}function xt(t){return F(t)?t.prototype&&t.prototype.constructor?new t:t():t}function _t(t){return Array.isArray(t)?t:/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(t))&&"number"==typeof t.length?Array.from(t):[t]}function jt(t,e){return _t("string"==typeof t?(e||document).querySelectorAll(t):t)}const Mt=t=>1===t.length?t[0]:t;function At(t,e,n){const s="object"==typeof e?e:{[e]:n},r=Object.keys(s);return _t(t).forEach((t=>{r.forEach((e=>t.setAttribute(e,s[e])))})),t}function St(t,e){return function(t,e,n){const s="string"==typeof e?[e]:e;return Mt(_t(t).map((t=>Mt(s.map((e=>t[n](e)))))))}(t,e,"getAttribute")}const wt=new Map,Ct=()=>Ut||(At(Ut=jt("style[riot]")[0]||document.createElement("style"),"type","text/css"),Ut.parentNode||document.head.appendChild(Ut),Ut);var Ut,It={CSS_BY_NAME:wt,add(t,e){return wt.has(t)||(wt.set(t,e),this.inject()),this},inject(){return Ct().innerHTML=[...wt.values()].join("\n"),this},remove(t){return wt.has(t)&&(wt.delete(t),this.inject()),this}};function Pt(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),s=1;s(t[s(e.name)]=e.value,t)),{})}(t),xt(e))}const Vt=(t,e)=>t[l]=e;function $t(t){return[h,m,f].reduce(((e,n)=>(e[n]=t(n),e)),{})}function Ft(t,e){const n=function(t){void 0===t&&(t={});return Object.entries(xt(t)).reduce(((t,e)=>{let[n,s]=e; +/* Riot v6.1.2, @license MIT */ +var r;return t[(r=n,r.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase())]=zt(s),t}),{})}(e.exports?e.exports.components:{});return t(Nt,P,I,(t=>t===e.name?Bt(e):n[t]||c.get(t)))}function zt(t){const{css:e,template:n,exports:s,name:r}=t,o=n?Ft(n,t):Yt;return t=>{let{slots:i,attributes:a,props:u}=t;if(s&&s[M])return function(t,e){let{slots:n,attributes:s,props:r,css:o,template:i}=e;i&&W("Pure components can not have html"),o&&W("Pure components do not have css");const a=B(t({slots:n,attributes:s,props:r}),Lt);return $t((t=>function(){for(var e=arguments.length,n=new Array(e),s=0;sl.mount(t,n,e),update:(t,e)=>l.update(e,t),unmount:t=>l.unmount(t)}}}function Ht(t){let{css:e,template:n,componentAPI:s,name:r}=t;return e&&r&&It.add(r,e),Pt(qt)(Y(B(s,Object.assign({},Rt,{[T]:{},[x]:{}})),Object.assign({[_]:null,[j]:null},kt,{name:r,css:e,template:n})))}function Gt(t,e){return Object.assign({},t,xt(e))}function qt(t,e){let{slots:n,attributes:s,props:r}=e;return o=function(t){return[...p].reduce(((t,e)=>e(t)||t),t)}(Y(z(t)?Object.create(t):t,{mount(e,o,i){return void 0===o&&(o={}),R(e,M,!1),this[S]=i,this[w]=function(t,e){void 0===e&&(e=[]);const n=e.map((e=>lt(t,e))),s={};return Object.assign(s,Object.assign({expressions:n},$t((t=>e=>(n.forEach((n=>n[t](e))),s)))))}(e,s).mount(i),R(this,T,Object.freeze(Object.assign({},Kt(e,r),J(this[w].expressions)))),this.state=Gt(this.state,o),this[C]=this.template.createDOM(e).clone(),Vt(e,this),t.name&&function(t,e){Dt(t)!==e&&At(t,d,e)}(e,t.name),R(this,j,e),R(this,_,n),this.onBeforeMount(this.props,this.state),this[C].mount(e,this,i),this.onMounted(this.props,this.state),this},update(t,e){void 0===t&&(t={}),e&&(this[S]=e,this[w].update(e));const n=J(this[w].expressions);if(!1!==this.shouldUpdate(n,this.props))return R(this,T,Object.freeze(Object.assign({},this.props,n))),this.state=Gt(this.state,t),this.onBeforeUpdate(this.props,this.state),this[A]||(this[A]=!0,this[C].update(this,this[S])),this.onUpdated(this.props,this.state),this[A]=!1,this},unmount(t){return this.onBeforeUnmount(this.props,this.state),this[w].unmount(),this[C].unmount(this,this[S],null===t?null:!t),this.onUnmounted(this.props,this.state),this}})),Object.keys(t).filter((e=>F(t[e]))).forEach((t=>{o[t]=o[t].bind(o)})),o;var o}const{DOM_COMPONENT_INSTANCE_PROPERTY:Xt,COMPONENTS_IMPLEMENTATION_MAP:Wt,PLUGINS_SET:Zt}=U;function Jt(t,e){let{css:n,template:s,exports:r}=e;return Wt.has(t)&&W(`The component "${t}" was already registered`),Wt.set(t,zt({name:t,css:n,template:s,exports:r})),Wt}function Qt(t,e,n){return jt(t).map((t=>function(t,e,n){const s=n||Dt(t);return c.has(s)||W(`The component named "${s}" was never registered`),c.get(s)({props:e}).mount(t)}(t,e,n)))}var te,ee=new Uint8Array(16);function ne(){if(!te&&!(te="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return te(ee)}const se=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;const re=function(t){return"string"==typeof t&&se.test(t)};for(var oe=[],ie=0;ie<256;++ie)oe.push((ie+256).toString(16).substr(1));const ae=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=(oe[t[e+0]]+oe[t[e+1]]+oe[t[e+2]]+oe[t[e+3]]+"-"+oe[t[e+4]]+oe[t[e+5]]+"-"+oe[t[e+6]]+oe[t[e+7]]+"-"+oe[t[e+8]]+oe[t[e+9]]+"-"+oe[t[e+10]]+oe[t[e+11]]+oe[t[e+12]]+oe[t[e+13]]+oe[t[e+14]]+oe[t[e+15]]).toLowerCase();if(!re(n))throw TypeError("Stringified UUID is invalid");return n};const ue=function(t,e,n){var s=(t=t||{}).random||(t.rng||ne)();if(s[6]=15&s[6]|64,s[8]=63&s[8]|128,e){n=n||0;for(var r=0;r<16;++r)e[n+r]=s[r];return e}return ae(s)};var ce=n(432); +/** + * NotificationService + * + * @author Björn Hase + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/notification + * + */const le=n.n(ce)()({SUCCESS:"success",DANGER:"danger",INFO:"info",success:function(t){this._add(t,this.SUCCESS)},danger:function(t){this._add(t,this.DANGER)},info:function(t){this._add(t,this.INFO)},_add:function(t,e){this.trigger("append",{message:t,type:e})}}),pe={css:null,exports:{state:{items:[],timeout:5e3,prefixId:"tiny-notification-",wrapperClass:""},onMounted(t,e){t.timeout&&(e.timeout=t.timeout),t.wrapperClass&&(e.wrapperClass=t.wrapperClass),le.on("append",(t=>{t.id=this.state.prefixId+"toast-"+ue(),t.timeout=setTimeout((()=>{this.removeItem(t)}),this.state.timeout),t.classes=["toast","toast--"+t.type],this.state.items.push(t),this.update(),setTimeout((()=>{for(let e=0;e{const e=[];for(let n=0;n{for(let e=0;et('
',[{type:n.IF,evaluate:t=>t.state.items.length>0,redundantAttribute:"expr0",selector:"[expr0]",template:t('
',[{expressions:[{type:e.ATTRIBUTE,name:"class",evaluate:t=>["toast-wrapper ",t.state.wrapperClass].join("")}]},{type:n.EACH,getKey:null,condition:null,template:t('
',[{expressions:[{type:e.ATTRIBUTE,name:"id",evaluate:t=>t.item.id},{type:e.ATTRIBUTE,name:"class",evaluate:t=>t.item.classes.join(" ")},{type:e.EVENT,name:"onclick",evaluate:t=>e=>{t.handleClick(e,t.item)}}]},{redundantAttribute:"expr2",selector:"[expr2]",expressions:[{type:e.TEXT,childNodeIndex:0,evaluate:t=>[t.item.message].join("")}]}]),redundantAttribute:"expr1",selector:"[expr1]",itemName:"item",indexName:null,evaluate:t=>t.state.items}])}]),name:"tiny-notification"},de={css:null,exports:{handleClickDanger(t){le.danger("Error!")},handleClickSuccess(t){le.success("Success!")}},template:(t,e,n,s)=>t('
',[{redundantAttribute:"expr3",selector:"[expr3]",expressions:[{type:e.EVENT,name:"onclick",evaluate:t=>e=>{t.handleClickDanger(e)}}]},{redundantAttribute:"expr4",selector:"[expr4]",expressions:[{type:e.EVENT,name:"onclick",evaluate:t=>e=>{t.handleClickSuccess(e)}}]}]),name:"example-action-button"};Jt("tiny-notification",pe),Jt("example-action-button",de),Qt("tiny-notification"),Qt("example-action-button")},37:()=>{}},n={};function s(t){var r=n[t];if(void 0!==r)return r.exports;var o=n[t]={exports:{}};return e[t](o,o.exports,s),o.exports}s.m=e,t=[],s.O=(e,n,r,o)=>{if(!n){var i=1/0;for(l=0;l=o)&&Object.keys(s.O).every((t=>s.O[t](n[u])))?n.splice(u--,1):(a=!1,o0&&t[l-1][2]>o;l--)t[l]=t[l-1];t[l]=[n,r,o]},s.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return s.d(e,{a:e}),e},s.d=(t,e)=>{for(var n in e)s.o(e,n)&&!s.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},s.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{var t={268:0,908:0};s.O.j=e=>0===t[e];var e=(e,n)=>{var r,o,[i,a,u]=n,c=0;if(i.some((e=>0!==t[e]))){for(r in a)s.o(a,r)&&(s.m[r]=a[r]);if(u)var l=u(s)}for(e&&e(n);cs(641)));var r=s.O(void 0,[908],(()=>s(37)));r=s.O(r)})(); \ No newline at end of file diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..89350ab --- /dev/null +++ b/example/index.html @@ -0,0 +1,52 @@ + + + + + + Tiny Components | Notification + + + + + + +
+
+
+

+ @tiny-components/notification +

+
+
+ + Gitea + + + + Github + + +
+
+
+ +
+
+
+
+ +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/example/mix-manifest.json b/example/mix-manifest.json new file mode 100644 index 0000000..bc315f5 --- /dev/null +++ b/example/mix-manifest.json @@ -0,0 +1,13 @@ +{ + "/spritemap.js": "/spritemap.js", + "/example.js": "/example.js", + "/.css": "/.css", + "/IBMPlexMono-Bold.eot": "/IBMPlexMono-Bold.eot", + "/IBMPlexMono-Bold.ttf": "/IBMPlexMono-Bold.ttf", + "/IBMPlexMono-Bold.woff": "/IBMPlexMono-Bold.woff", + "/IBMPlexMono-Bold.woff2": "/IBMPlexMono-Bold.woff2", + "/IBMPlexMono.eot": "/IBMPlexMono.eot", + "/IBMPlexMono.ttf": "/IBMPlexMono.ttf", + "/IBMPlexMono.woff": "/IBMPlexMono.woff", + "/IBMPlexMono.woff2": "/IBMPlexMono.woff2" +} diff --git a/example/public/symbol-defs.svg b/example/public/symbol-defs.svg new file mode 100644 index 0000000..250cd5e --- /dev/null +++ b/example/public/symbol-defs.svg @@ -0,0 +1 @@ +addarchivearrow-downarrow-left-downarrow-left-uparrow-leftarrow-right-downarrow-right-uparrow-rightarrow-upattachmentbackspacebanbar-chart-altbar-chartboardboldbookbookmarkcalendarcallcameracaret-downcaret-leftcaret-rightcaret-upcheckcheckbox-checkedcheckboxchevron-double-downchevron-double-leftchevron-double-rightchevron-double-upchevron-downchevron-leftchevron-rightchevron-upcircle-addcircle-arrow-downcircle-arrow-leftcircle-arrow-rightcircle-arrow-upcircle-checkcircle-errorcircle-helpcircle-informationcircle-removecircle-warningcircleclipboard-checkclipboard-listclipboardclockclosecloud-downloadcloud-uploadcloudcloudycommentcompasscomputercopycredit-carddatabasedelete-altdeletedocument-adddocument-checkdocument-downloaddocument-emptydocument-removedocumentdownloaddragdropedit-alteditemailenterexpandexportexternal-linkeye-offeyefavoritefilter-1filter-altfilterflagfogfolder-addfolder-checkfolder-downloadfolder-removefoldergridhearthomeimageinboxitaliclaptoplayerslayoutlink-altlinklistlocationlocklog-inlog-outmapmegaphonemenumessage-altmessageminimizemobilemoonnextnotification-offnotificationoptions-horizontaloptions-verticalpausepenpercentagepinplaypreviousprintrainrefreshremovereorder-altreorderrepeatsavesearchselectsendsettingsshareshopping-cart-addshopping-cartshufflesnowsnowflakesortspeakersstopstormstrikethroughsunsunrise-altsunrisesunsetswitchtabletablettagtemperaturetextthree-rowstwo-columnstwo-rowsunderlineundounlockuser-adduser-checkuser-removeuserusersvolume-offvolume-upwarningwebcamwindwindowzoom-inzoom-out \ No newline at end of file diff --git a/example/spritemap.js b/example/spritemap.js new file mode 100644 index 0000000..8945100 --- /dev/null +++ b/example/spritemap.js @@ -0,0 +1 @@ +(self.webpackChunk_tiny_components_notification=self.webpackChunk_tiny_components_notification||[]).push([[355],{256:()=>{}}]); \ No newline at end of file diff --git a/mix-manifest.json b/mix-manifest.json new file mode 100644 index 0000000..8e34bd6 --- /dev/null +++ b/mix-manifest.json @@ -0,0 +1,5 @@ +{ + "/example/spritemap.js": "/example/spritemap.js", + "/example/example.js": "/example/example.js", + "/example/example.css": "/example/example.css" +} diff --git a/package-lock.json b/package-lock.json index e7a00a5..a2a6bab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4091,6 +4091,12 @@ } } }, + "immutable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", + "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", + "dev": true + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -5880,6 +5886,27 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "sass": { + "version": "1.51.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.51.0.tgz", + "integrity": "sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==", + "dev": true, + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, + "sass-loader": { + "version": "12.6.0", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", + "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==", + "dev": true, + "requires": { + "klona": "^2.0.4", + "neo-async": "^2.6.2" + } + }, "schema-utils": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz", diff --git a/package.json b/package.json index a696e3d..d772386 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "@riotjs/webpack-loader": "^6.0.0", "laravel-mix": "^6.0.43", "laravel-mix-purgecss": "^6.0.0", + "sass": "^1.51.0", + "sass-loader": "^12.6.0", "svg-spritemap-webpack-plugin": "^4.4.0" } } diff --git a/src/example-action-button.riot b/src/example-action-button.riot new file mode 100644 index 0000000..12e484b --- /dev/null +++ b/src/example-action-button.riot @@ -0,0 +1,42 @@ + +
+ + +
+ + + \ No newline at end of file diff --git a/src/example.js b/src/example.js new file mode 100644 index 0000000..803894c --- /dev/null +++ b/src/example.js @@ -0,0 +1,10 @@ +import * as riot from 'riot' + +import TinyNotification from './notification.riot' +import ExampleActionButton from './example-action-button.riot' + +riot.register('tiny-notification', TinyNotification) +riot.register('example-action-button', ExampleActionButton) + +riot.mount('tiny-notification') +riot.mount('example-action-button') \ No newline at end of file diff --git a/src/example.scss b/src/example.scss new file mode 100644 index 0000000..f616364 --- /dev/null +++ b/src/example.scss @@ -0,0 +1,2 @@ +@import + '../node_modules/@tiny-components/plain-ui/src/scss/plain-ui'; \ No newline at end of file diff --git a/src/notification.riot b/src/notification.riot index b22b8f5..d8ed179 100644 --- a/src/notification.riot +++ b/src/notification.riot @@ -1,9 +1,9 @@ -
0 }> +
0 }>
{ this.handleClick(event, item) } }> + onclick={ (event) => { handleClick(event, item) } }>
{ item.message } @@ -14,7 +14,7 @@