UNPKG

uikit

Version:

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

2 lines (1 loc) 8.37 kB
/*! UIkit 3.25.14 | https://www.getuikit.com | (c) 2014 - 2026 YOOtheme | MIT License */(function(n,y){typeof exports=="object"&&typeof module<"u"?module.exports=y(require("uikit-util")):typeof define=="function"&&define.amd?define("uikitfilter",["uikit-util"],y):(n=typeof globalThis<"u"?globalThis:n||self,n.UIkitFilter=y(n.UIkit.util))})(this,(function(n){"use strict";function y(e,s=[]){try{return e?n.startsWith(e,"{")?JSON.parse(e):s.length&&!n.includes(e,":")?{[s[0]]:e}:e.split(";").reduce((o,t)=>{const[a,r]=t.split(/:(.*)/);return a&&!n.isUndefined(r)&&(o[a.trim()]=r.trim()),o},{}):{}}catch{return{}}}function N(e,s="update"){e._connected&&e._updates.length&&(e._updateCount||(e._updateCount=0,requestAnimationFrame(()=>e._updateCount=0)),e._queued||(e._queued=new Set,n.fastdom.read(()=>{e._connected&&j(e,e._queued),e._queued=null})),e._updateCount++<20&&e._queued.add(s.type||s))}function j(e,s){for(const{read:o,write:t,events:a=[]}of e._updates){if(!s.has("update")&&!a.some(f=>s.has(f)))continue;let r;o&&(r=o.call(e,e._data,s),r&&n.isPlainObject(r)&&n.assign(e._data,r)),t&&r!==!1&&n.fastdom.write(()=>{e._connected&&t.call(e,e._data,s)})}}function B(e){return I(n.observeResize,e,"resize")}function $(e){return I(n.observeMutation,e)}function I(e,s,o){return{observe:e,handler(){N(this,o)},...s}}$({options:{childList:!0}}),$({options:{attributes:!0,attributeFilter:["style"]}}),B({handler(e){for(const{target:s,borderBoxSize:[{inlineSize:o,blockSize:t}]}of e)if(s===this.$el&&!o&&!t)return;this.$emit("resize")},target:({$el:e})=>[e,...n.children(e)]});function D(e){const s=[[]],o=e.some((t,a)=>a&&e[a-1].offsetParent!==t.offsetParent);for(const t of e){if(!n.isVisible(t))continue;const a=P(t,o);for(let r=s.length-1;r>=0;r--){const f=s[r];if(!f[0]){f.push(t);break}const d=P(f[0],o);if(a.top>=d.bottom-1&&a.top!==d.top){s.push([t]);break}if(a.bottom-1>d.top||a.top===d.top){let p=f.length-1;for(;p>=0;p--){const u=P(f[p],o);if(a.left>=u.left)break}f.splice(p+1,0,t);break}if(r===0){s.unshift([t]);break}}}return s}function P(e,s=!1){let{offsetTop:o,offsetLeft:t,offsetHeight:a,offsetWidth:r}=e;return s&&([o,t]=n.offsetPosition(e)),{top:o,left:t,bottom:o+a,right:t+r}}function _(){return new Promise(e=>requestAnimationFrame(e))}function g(e){return new Promise(s=>setTimeout(s,e))}const C="uk-transition-leave",S="uk-transition-enter";function F(e,s,o,t=0){const a=T(s,!0),r={opacity:1},f={opacity:0},d=()=>a===T(s),p=h=>()=>d()?h():Promise.reject(),u=p(async()=>{n.addClass(s,C),await(t?q(s).reduce(async(h,m,l,w)=>{if(await h,!n.isInView(m)||!d()){n.css(m,f);return}await g(t);const c=n.Transition.start(m,f,o/2,"ease");w.length-1===l&&await c},Promise.resolve()):n.Transition.start(s,f,o/2,"ease")),n.removeClass(s,C)}),b=p(async()=>{const h=n.height(s);n.addClass(s,S),e(),n.css(t?n.children(s):s,f),n.height(s,h),await g(),n.height(s,"");const m=n.height(s);n.css(s,"alignContent","flex-start"),n.height(s,h);let l=[],w=o/2;if(t){const c=q(s);n.css(n.children(s),f),l=c.reduce(async(i,v,Z,k)=>{if(await i,!n.isInView(v)||!d()){n.resetProps(v,r);return}await g(t);const U=n.Transition.start(v,r,o/2,"ease").then(()=>d()&&n.resetProps(v,r));k.length-1===Z&&await U},Promise.resolve()),w+=c.length*t}if(!t||h!==m){const c={height:m,...t?{}:r};l.push(n.Transition.start(s,c,w,"ease"))}await Promise.all(l),n.removeClass(s,S),d()&&(n.resetProps(s,{height:"",alignContent:"",...r}),delete s.dataset.transition)});return n.hasClass(s,C)?x(s).then(b):n.hasClass(s,S)?x(s).then(u).then(b):u().then(b)}function T(e,s){return s&&(e.dataset.transition=1+T(e)),n.toNumber(e.dataset.transition)||0}function x(e){return Promise.all(n.children(e).filter(n.Transition.inProgress).map(s=>new Promise(o=>n.once(s,"transitionend transitioncanceled",o))))}function q(e){return D(n.children(e)).flat().filter(n.isVisible)}async function L(e,s,o){await _();let t=n.children(s);const a=t.map(c=>z(c,!0)),r={...n.css(s,["height","padding"]),display:"block"},f=t.filter(c=>n.isInView(c)),d=t.concat(s);await Promise.all(d.map(n.Transition.cancel)),n.css(d,"transitionProperty","none"),await e();const p=n.children(s).filter(c=>!n.includes(t,c));t=t.concat(p),await Promise.resolve(),n.css(d,"transitionProperty","");const u=n.attr(s,"style"),b=n.css(s,["height","padding"]),[h,m]=H(s,t,a),l=t.map(c=>({style:n.attr(c,"style")}));f.push(...t.filter(c=>n.isInView(c))),t.forEach((c,i)=>m[i]&&n.css(c,m[i])),n.css(s,r),n.trigger(s,"scroll"),await _();const w=t.map((c,i)=>{if(n.parent(c)===s&&f.includes(c))return n.Transition.start(c,h[i],o,"ease",!p.includes(c))}).concat(n.Transition.start(s,b,o,"ease",!0));try{await Promise.all(w),t.forEach((c,i)=>{n.attr(c,l[i]),n.parent(c)===s&&n.css(c,"display",h[i].opacity===0?"none":"")}),n.attr(s,"style",u)}catch{n.attr(t,"style",""),n.resetProps(s,r)}}function z(e,s){const o=n.css(e,"zIndex");return n.isVisible(e)?{display:"",opacity:s?n.css(e,"opacity"):"0",pointerEvents:"none",position:"absolute",zIndex:o==="auto"?n.index(e):o,...E(e)}:!1}function H(e,s,o){const t=s.map((r,f)=>n.parent(r)&&f in o?o[f]?n.isVisible(r)?E(r):{opacity:0}:{opacity:n.isVisible(r)?1:0}:!1),a=t.map((r,f)=>{const d=n.parent(s[f])===e&&(o[f]||z(s[f]));if(!d)return!1;if(!r)delete d.opacity;else if(!("opacity"in r)){const{opacity:p}=d;p%1?r.opacity=1:delete d.opacity}return d});return[t,a]}function E(e){const{height:s,width:o}=n.dimensions(e);let{top:t,left:a}=n.position(e);const r=n.offsetViewport(e.ownerDocument);return t=n.clamp(t,r.top-s-r.height,r.bottom+r.height),a=n.clamp(a,r.left-o-r.width,r.right+r.width),{height:s,width:o,top:t,left:a,transform:"",...n.css(e,["marginTop","marginLeft"])}}var M={props:{duration:Number,animation:Boolean},data:{duration:150,animation:"slide"},methods:{animate(e,s=this.$el){const o=this.animation;return(o==="fade"?F:o==="delayed-fade"?(...a)=>F(...a,40):o?L:()=>(e(),Promise.resolve()))(e,s,this.duration).catch(n.noop)}}};function W(e){e.target.closest('a[href="#"],a[href=""]')&&e.preventDefault()}const R={SPACE:32};var V={mixins:[M],args:"target",props:{target:String,selActive:Boolean},data:{target:"",selActive:!1,attrItem:"uk-filter-control",cls:"uk-active",duration:250},computed:{children:({target:e},s)=>n.$$(`${e} > *`,s),toggles:({attrItem:e},s)=>n.$$(`[${e}],[data-${e}]`,s)},watch:{toggles(e){this.updateState();const s=n.$$(this.selActive,this.$el);for(const o of e){this.selActive!==!1&&n.toggleClass(o,this.cls,n.includes(s,o));const t=X(o);n.isTag(t,"a")&&(t.role="button")}},children(e,s){s&&this.updateState()}},events:{name:"click keydown",delegate:({attrItem:e})=>`[${e}],[data-${e}]`,handler(e){e.type==="keydown"&&e.keyCode!==R.SPACE||e.target.closest("a,button")&&(W(e),this.apply(e.current))}},methods:{apply(e){const s=this.getState(),o=O(e,this.attrItem,this.getState());J(s,o)||this.setState(o)},getState(){return this.toggles.filter(e=>n.hasClass(e,this.cls)).reduce((e,s)=>O(s,this.attrItem,e),{filter:{"":""},sort:[]})},async setState(e,s=!0){e={filter:{"":""},sort:[],...e},n.trigger(this.$el,"beforeFilter",[this,e]);for(const o of this.toggles)n.toggleClass(o,this.cls,K(o,this.attrItem,e));await Promise.all(n.$$(this.target,this.$el).map(o=>{const t=()=>G(e,o,n.children(o));return s?this.animate(t,o):t()})),n.trigger(this.$el,"afterFilter",[this])},updateState(){n.fastdom.write(()=>this.setState(this.getState(),!1))}}};function A(e,s){return y(n.data(e,s),["filter"])}function J(e,s){return["filter","sort"].every(o=>n.isEqual(e[o],s[o]))}function G(e,s,o){for(const r of o)n.css(r,"display",Object.values(e.filter).every(f=>!f||n.matches(r,f))?"":"none");const[t,a]=e.sort;if(t){const r=Q(o,t,a);n.isEqual(r,o)||n.append(s,r)}}function O(e,s,o){const{filter:t,group:a,sort:r,order:f="asc"}=A(e,s);return(t||n.isUndefined(r))&&(a?t?(delete o.filter[""],o.filter[a]=t):(delete o.filter[a],(n.isEmpty(o.filter)||""in o.filter)&&(o.filter={"":t||""})):o.filter={"":t||""}),n.isUndefined(r)||(o.sort=[r,f]),o}function K(e,s,{filter:o={"":""},sort:[t,a]}){const{filter:r="",group:f="",sort:d,order:p="asc"}=A(e,s);return n.isUndefined(d)?f in o&&r===o[f]||!r&&f&&!(f in o)&&!o[""]:t===d&&a===p}function Q(e,s,o){return[...e].sort((t,a)=>(n.data(t,s)||"").localeCompare(n.data(a,s),void 0,{numeric:!0})*(o==="asc"||-1))}function X(e){return n.$("a,button",e)||e}var Y="filter";return typeof window<"u"&&window.UIkit&&window.UIkit.component(Y,V),V}));