UNPKG

uikit

Version:

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

2 lines (1 loc) • 6.8 kB
/*! UIkit 3.14.1 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */(function(n,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("uikit-util")):typeof define=="function"&&define.amd?define("uikitfilter",["uikit-util"],l):(n=typeof globalThis<"u"?globalThis:n||self,n.UIkitFilter=l(n.UIkit.util))})(this,function(n){"use strict";function l(s){return A(s,"top","bottom")}function A(s,e,o){const r=[[]];for(const t of s){if(!n.isVisible(t))continue;let c=u(t);for(let a=r.length-1;a>=0;a--){const f=r[a];if(!f[0]){f.push(t);break}let d;if(f[0].offsetParent===t.offsetParent?d=u(f[0]):(c=u(t,!0),d=u(f[0],!0)),c[e]>=d[o]-1&&c[e]!==d[e]){r.push([t]);break}if(c[o]-1>d[e]||c[e]===d[e]){f.push(t);break}if(a===0){r.unshift([t]);break}}}return r}function u(s,e){e===void 0&&(e=!1);let{offsetTop:o,offsetLeft:r,offsetHeight:t,offsetWidth:c}=s;return e&&([o,r]=n.offsetPosition(s)),{top:o,left:r,bottom:o+t,right:r+c}}const g="uk-transition-leave",v="uk-transition-enter";function w(s,e,o,r){r===void 0&&(r=0);const t=y(e,!0),c={opacity:1},a={opacity:0},f=i=>()=>t===y(e)?i():Promise.reject(),d=f(()=>(n.addClass(e,g),Promise.all(I(e).map((i,h)=>new Promise(m=>setTimeout(()=>n.Transition.start(i,a,o/2,"ease").then(m),h*r)))).then(()=>n.removeClass(e,g)))),p=f(()=>{const i=n.height(e);return n.addClass(e,v),s(),n.css(n.children(e),{opacity:0}),new Promise(h=>requestAnimationFrame(()=>{const m=n.children(e),C=n.height(e);n.css(e,"alignContent","flex-start"),n.height(e,i);const x=I(e);n.css(m,a);const q=x.map((W,M)=>new Promise(R=>setTimeout(()=>n.Transition.start(W,c,o/2,"ease").then(R),M*r)));i!==C&&q.push(n.Transition.start(e,{height:C},o/2+x.length*r,"ease")),Promise.all(q).then(()=>{n.removeClass(e,v),t===y(e)&&(n.css(e,{height:"",alignContent:""}),n.css(m,{opacity:""}),delete e.dataset.transition),h()})}))});return n.hasClass(e,g)?T(e).then(p):n.hasClass(e,v)?T(e).then(d).then(p):d().then(p)}function y(s,e){return e&&(s.dataset.transition=1+y(s)),n.toNumber(s.dataset.transition)||0}function T(s){return Promise.all(n.children(s).filter(n.Transition.inProgress).map(e=>new Promise(o=>n.once(e,"transitionend transitioncanceled",o))))}function I(s){return l(n.children(s)).reduce((e,o)=>e.concat(n.sortBy(o.filter(r=>n.isInView(r)),"offsetLeft")),[])}function L(s,e,o){return new Promise(r=>requestAnimationFrame(()=>{let t=n.children(e);const c=t.map(f=>F(f,!0)),a=n.css(e,["height","padding"]);n.Transition.cancel(e),t.forEach(n.Transition.cancel),S(e),s(),t=t.concat(n.children(e).filter(f=>!n.includes(t,f))),Promise.resolve().then(()=>{n.fastdom.flush();const f=n.css(e,["height","padding"]),[d,p]=z(e,t,c);t.forEach((i,h)=>p[h]&&n.css(i,p[h])),n.css(e,{display:"block",...a}),requestAnimationFrame(()=>{const i=t.map((h,m)=>n.parent(h)===e&&n.Transition.start(h,d[m],o,"ease")).concat(n.Transition.start(e,f,o,"ease"));Promise.all(i).then(()=>{t.forEach((h,m)=>n.parent(h)===e&&n.css(h,"display",d[m].opacity===0?"none":"")),S(e)},n.noop).then(r)})})}))}function F(s,e){const o=n.css(s,"zIndex");return n.isVisible(s)?{display:"",opacity:e?n.css(s,"opacity"):"0",pointerEvents:"none",position:"absolute",zIndex:o==="auto"?n.index(s):o,...$(s)}:!1}function z(s,e,o){const r=e.map((c,a)=>n.parent(c)&&a in o?o[a]?n.isVisible(c)?$(c):{opacity:0}:{opacity:n.isVisible(c)?1:0}:!1),t=r.map((c,a)=>{const f=n.parent(e[a])===s&&(o[a]||F(e[a]));if(!f)return!1;if(!c)delete f.opacity;else if(!("opacity"in c)){const{opacity:d}=f;d%1?c.opacity=1:delete f.opacity}return f});return[r,t]}function S(s){n.css(s.children,{height:"",left:"",opacity:"",pointerEvents:"",position:"",top:"",marginTop:"",marginLeft:"",transform:"",width:"",zIndex:""}),n.css(s,{height:"",display:"",padding:""})}function $(s){const{height:e,width:o}=n.offset(s),{top:r,left:t}=n.position(s),{marginLeft:c,marginTop:a}=n.css(s,["marginTop","marginLeft"]);return{top:r,left:t,height:e,width:o,marginLeft:c,marginTop:a,transform:""}}var B={props:{duration:Number,animation:Boolean},data:{duration:150,animation:"slide"},methods:{animate(s,e){e===void 0&&(e=this.$el);const o=this.animation;return(o==="fade"?w:o==="delayed-fade"?function(){for(var t=arguments.length,c=new Array(t),a=0;a<t;a++)c[a]=arguments[a];return w(...c,40)}:o?L:()=>(s(),Promise.resolve()))(s,e,this.duration).then(()=>this.$update(e,"resize"),n.noop)}}},b={mixins:[B],args:"target",props:{target:Boolean,selActive:Boolean},data:{target:null,selActive:!1,attrItem:"uk-filter-control",cls:"uk-active",duration:250},computed:{toggles:{get(s,e){let{attrItem:o}=s;return n.$$("["+o+"],[data-"+o+"]",e)},watch(){if(this.updateState(),this.selActive!==!1){const s=n.$$(this.selActive,this.$el);this.toggles.forEach(e=>n.toggleClass(e,this.cls,n.includes(s,e)))}},immediate:!0},children:{get(s,e){let{target:o}=s;return n.$$(o+" > *",e)},watch(s,e){e&&!H(s,e)&&this.updateState()},immediate:!0}},events:[{name:"click",delegate(){return"["+this.attrItem+"],[data-"+this.attrItem+"]"},handler(s){s.preventDefault(),this.apply(s.current)}}],methods:{apply(s){const e=this.getState(),o=E(s,this.attrItem,this.getState());V(e,o)||this.setState(o)},getState(){return this.toggles.filter(s=>n.hasClass(s,this.cls)).reduce((s,e)=>E(e,this.attrItem,s),{filter:{"":""},sort:[]})},setState(s,e){e===void 0&&(e=!0),s={filter:{"":""},sort:[],...s},n.trigger(this.$el,"beforeFilter",[this,s]),this.toggles.forEach(o=>n.toggleClass(o,this.cls,!!O(o,this.attrItem,s))),Promise.all(n.$$(this.target,this.$el).map(o=>{const r=()=>{N(s,o,n.children(o)),this.$update(this.$el)};return e?this.animate(r,o):r()})).then(()=>n.trigger(this.$el,"afterFilter",[this]))},updateState(){n.fastdom.write(()=>this.setState(this.getState(),!1))}}};function P(s,e){return n.parseOptions(n.data(s,e),["filter"])}function V(s,e){return["filter","sort"].every(o=>n.isEqual(s[o],e[o]))}function N(s,e,o){const r=j(s);o.forEach(a=>n.css(a,"display",r&&!n.matches(a,r)?"none":""));const[t,c]=s.sort;if(t){const a=D(o,t,c);n.isEqual(a,o)||n.append(e,a)}}function E(s,e,o){const r=P(s,e),{filter:t,group:c,sort:a,order:f="asc"}=r;return(t||n.isUndefined(a))&&(c?t?(delete o.filter[""],o.filter[c]=t):(delete o.filter[c],(n.isEmpty(o.filter)||""in o.filter)&&(o.filter={"":t||""})):o.filter={"":t||""}),n.isUndefined(a)||(o.sort=[a,f]),o}function O(s,e,o){let{filter:r={"":""},sort:[t,c]}=o;const{filter:a="",group:f="",sort:d,order:p="asc"}=P(s,e);return n.isUndefined(d)?f in r&&a===r[f]||!a&&f&&!(f in r)&&!r[""]:t===d&&c===p}function H(s,e){return s.length===e.length&&s.every(o=>e.includes(o))}function j(s){let{filter:e}=s,o="";return n.each(e,r=>o+=r||""),o}function D(s,e,o){return[...s].sort((r,t)=>n.data(r,e).localeCompare(n.data(t,e),void 0,{numeric:!0})*(o==="asc"||-1))}return typeof window<"u"&&window.UIkit&&window.UIkit.component("filter",b),b});