1 line
8.8 KiB
JavaScript
1 line
8.8 KiB
JavaScript
import{A as e,B as t,C as n,G as r,M as i,T as a,b as o,c as s,i as c,j as l,l as u,lt as d,m as f,o as p,p as m,r as h,s as g,st as _,u as v,x as y}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{i as b,r as x,t as S}from"./runtime-dom.esm-bundler-CcSFQHoC.js";import{t as C}from"./_plugin-vue_export-helper-BOai-rQB.js";import{t as w}from"./Icon-BCRRMV3J.js";import{t as T}from"./IconButton-Cxmf-7_q.js";import{t as E}from"./i18n-DrTQks20.js";import{t as D}from"./Badge-DcvgVKep.js";var O=[`aria-label`],k=[`placeholder`,`aria-label`],A=[`aria-label`],j=[`aria-label`],M=[`href`,`aria-selected`,`data-active`,`onMousemove`,`onClick`],ee=[`src`,`alt`],te={class:`flex-1 min-w-0`},N={key:0},P={class:`inline-flex items-center gap-1.5`},F={class:`inline-flex items-center gap-1.5`},I={class:`inline-flex items-center gap-1.5`},L=C({__name:`Search`,props:{modelValue:{type:Boolean,default:!1},products:{type:Array,default:()=>[]},tone:{type:String,default:`brand`,validator:e=>[`brand`,`paper`,`cream`].includes(e)},limit:{type:Number,default:12},emptyPreview:{type:Number,default:6},placeholder:{type:String,default:``}},emits:[`update:modelValue`,`select`],setup(C,{emit:L}){let R=C,z=L,{t:B}=E(),V={brand:{surface:`bg-brand text-cream`,border:`border-cream-line`,inputIcon:`text-cream/70`,input:`text-cream placeholder:text-cream/50`,closeBtn:`text-cream/70 hover:text-cream hover:bg-cream-wash`,hint:`text-cream/60`,kbd:`bg-cream-wash text-cream border-cream-line`,mediaBg:`bg-cream`,title:`text-cream`,meta:`text-cream/70`,price:`text-accent`,noResults:`text-cream/70`,rowActive:`bg-cream-wash`,rowHover:`hover:bg-cream-wash/60`,eyebrowCream:!0},paper:{surface:`bg-paper text-ink`,border:`border-line`,inputIcon:`text-muted`,input:`text-ink placeholder:text-muted`,closeBtn:`text-muted hover:text-brand hover:bg-brand-wash`,hint:`text-muted`,kbd:`bg-cream text-ink border-line`,mediaBg:`bg-cream`,title:`text-ink`,meta:`text-muted`,price:`text-brand`,noResults:`text-muted`,rowActive:`bg-brand-soft-wash`,rowHover:`hover:bg-brand-wash`,eyebrowCream:!1},cream:{surface:`bg-cream text-brand`,border:`border-line`,inputIcon:`text-brand/70`,input:`text-ink placeholder:text-muted`,closeBtn:`text-muted hover:text-brand hover:bg-brand-wash`,hint:`text-muted`,kbd:`bg-paper text-ink border-line`,mediaBg:`bg-paper`,title:`text-ink`,meta:`text-muted`,price:`text-brand`,noResults:`text-muted`,rowActive:`bg-brand-soft-wash`,rowHover:`hover:bg-brand-wash`,eyebrowCream:!1}},H=p(()=>V[R.tone]),U=t(``),W=t(0),G=t(null),K=t(null);function q(e){return(e||``).toString().toLowerCase().normalize(`NFKD`).replace(/[̀-ͯ]/g,``).replace(/ß/g,`ss`)}function J(e,t){if(!t.length)return 0;let n=[{val:q(e.title),weight:5},{val:q(e.brand),weight:3},{val:q(e.size),weight:2},{val:q(e.category),weight:2},{val:(e.keywords||[]).map(q).join(` `),weight:3},{val:q(e.id),weight:1}],r=0;for(let e of t){let t=!1;for(let i of n)i.val&&i.val.includes(e)&&(t=!0,r+=i.weight,i.val.startsWith(e)&&(r+=Math.ceil(i.weight/2)));if(!t)return 0}return r}let Y=p(()=>{let e=q(U.value).trim();if(!e)return R.products.slice(0,R.emptyPreview);let t=e.split(/\s+/).filter(Boolean);return R.products.map(e=>({p:e,score:J(e,t)})).filter(({score:e})=>e>0).sort((e,t)=>t.score-e.score).slice(0,R.limit).map(({p:e})=>e)});e(()=>R.modelValue,async e=>{e&&(U.value=``,W.value=0,await o(),G.value?.focus())}),e(Y,()=>{W.value=0}),e(()=>R.modelValue,e=>{typeof document>`u`||(document.documentElement.style.overflow=e?`hidden`:``)}),y(()=>{typeof document<`u`&&(document.documentElement.style.overflow=``)});function X(){z(`update:modelValue`,!1)}function Z(){U.value=``,o(()=>G.value?.focus())}function Q(e){let t=Y.value[e];t&&z(`select`,t),X()}function ne(e){if(e.key===`Escape`){e.preventDefault(),X();return}Y.value.length&&(e.key===`ArrowDown`?(e.preventDefault(),W.value=(W.value+1)%Y.value.length,$()):e.key===`ArrowUp`?(e.preventDefault(),W.value=(W.value-1+Y.value.length)%Y.value.length,$()):e.key===`Enter`&&(e.preventDefault(),Q(W.value)))}function $(){o(()=>{(K.value?.querySelector(`[data-active="true"]`))?.scrollIntoView({block:`nearest`})})}function re(e){return typeof e.price==`number`?`€ ${e.price.toFixed(2).replace(`.`,`,`)}`:e.price?`€ ${e.price}`:``}function ie(e,t,n){t.href||n.preventDefault(),Q(e)}return(e,t)=>(n(),s(c,{to:`body`},[f(S,{"enter-active-class":`transition duration-base ease-out`,"enter-from-class":`opacity-0`,"enter-to-class":`opacity-100`,"leave-active-class":`transition duration-base ease-out`,"leave-from-class":`opacity-100`,"leave-to-class":`opacity-0`},{default:l(()=>[C.modelValue?(n(),v(`div`,{key:0,class:`fixed inset-0 z-[60] font-sans`,role:`dialog`,"aria-modal":`true`,"aria-label":r(B)(`search.label`),onKeydown:ne},[g(`div`,{class:`hidden md:block absolute inset-0 bg-ink/50`,onClick:X}),f(S,{"enter-active-class":`transition duration-slow ease-out`,"enter-from-class":`md:opacity-0 md:-translate-y-2 translate-y-4`,"enter-to-class":`md:opacity-100 md:translate-y-0 translate-y-0`,"leave-active-class":`transition duration-base ease-out`,"leave-from-class":`md:opacity-100 translate-y-0`,"leave-to-class":`md:opacity-0 translate-y-4`,appear:``},{default:l(()=>[i(g(`div`,{class:_([`relative flex flex-col h-full w-full`,`md:absolute md:left-1/2 md:top-[12vh] md:h-auto`,`md:-translate-x-1/2 md:max-h-[76vh] md:w-[min(640px,92vw)]`,`md:rounded-lg md:shadow-lg md:border`,H.value.surface,H.value.border])},[g(`div`,{class:_([`shrink-0 flex items-center gap-3 px-5 md:px-4 pt-5 md:pt-3 pb-3 border-b`,H.value.border]),style:{"padding-top":`calc(env(safe-area-inset-top) + 1.25rem)`}},[f(w,{name:`search`,size:20,class:_([`shrink-0`,H.value.inputIcon])},null,8,[`class`]),i(g(`input`,{ref_key:`inputRef`,ref:G,"onUpdate:modelValue":t[0]||=e=>U.value=e,type:`search`,autocomplete:`off`,autocorrect:`off`,autocapitalize:`none`,spellcheck:`false`,enterkeyhint:`search`,placeholder:C.placeholder||r(B)(`search.placeholder`),"aria-label":r(B)(`search.label`),class:_([`search-input flex-1 min-w-0 bg-transparent border-0 outline-none text-[17px] md:text-[15px]`,H.value.input])},null,10,k),[[x,U.value]]),U.value?(n(),s(D,{key:0,as:`button`,variant:`accent`,class:`shrink-0`,"aria-label":r(B)(`search.clear`),onClick:Z},{default:l(()=>[m(d(r(B)(`search.clear`)),1)]),_:1},8,[`aria-label`])):u(``,!0),g(`button`,{type:`button`,class:_([`shrink-0 inline-flex items-center justify-center w-10 h-10 rounded-pill transition-colors`,H.value.closeBtn]),"aria-label":r(B)(`menu.close`),onClick:X},[f(w,{name:`close`,size:20})],10,A)],2),g(`div`,{ref_key:`listRef`,ref:K,class:`flex-1 overflow-y-auto py-2`,style:{"padding-bottom":`calc(env(safe-area-inset-bottom) + 0.5rem)`},role:`listbox`,"aria-label":r(B)(`search.results`)},[!U.value.trim()&&Y.value.length?(n(),v(`p`,{key:0,class:_([`eyebrow px-5 md:px-4 pt-2 pb-1`,H.value.eyebrowCream?`text-cream/70`:``])},d(r(B)(`search.suggested`)),3)):u(``,!0),Y.value.length?u(``,!0):(n(),v(`p`,{key:1,class:_([`px-5 md:px-4 py-10 text-center text-sm`,H.value.noResults])},d(r(B)(`search.noResults`)),3)),(n(!0),v(h,null,a(Y.value,(e,t)=>(n(),v(`a`,{key:e.id,href:e.href||`#`,role:`option`,"aria-selected":t===W.value,"data-active":t===W.value,class:_([`flex items-center gap-4 px-5 md:px-4 py-3 transition-colors`,t===W.value?H.value.rowActive:H.value.rowHover]),onMousemove:e=>W.value=t,onClick:n=>ie(t,e,n)},[g(`div`,{class:_([`shrink-0 w-14 h-14 rounded-sm overflow-hidden flex items-center justify-center`,H.value.mediaBg])},[e.image?(n(),v(`img`,{key:0,src:e.image,alt:e.title,loading:`lazy`,decoding:`async`,class:`w-full h-full object-contain p-2`},null,8,ee)):u(``,!0)],2),g(`div`,te,[g(`p`,{class:_([`text-[15px] font-semibold leading-tight truncate`,H.value.title])},d(e.title),3),e.size?(n(),v(`p`,{key:0,class:_([`text-[13px] truncate`,H.value.meta])},[m(d(e.size),1),e.brand?(n(),v(`span`,N,` · `+d(e.brand),1)):u(``,!0)],2)):u(``,!0)]),g(`span`,{class:_([`shrink-0 text-[14px] font-semibold`,H.value.price])},d(re(e)),3)],42,M))),128))],8,j),f(T,{icon:`close`,variant:`float`,size:`lg`,"icon-stroke-width":2,"aria-label":r(B)(`menu.close`),class:`md:hidden fixed bottom-5 left-5 z-[70]`,style:{"margin-bottom":`env(safe-area-inset-bottom)`},onClick:X},null,8,[`aria-label`]),g(`div`,{class:_([`hidden md:flex shrink-0 items-center gap-4 px-4 py-2 border-t text-[11px]`,H.value.border,H.value.hint])},[g(`span`,P,[g(`kbd`,{class:_([`px-1.5 py-0.5 rounded-sm border font-mono text-[11px]`,H.value.kbd])},`↑`,2),g(`kbd`,{class:_([`px-1.5 py-0.5 rounded-sm border font-mono text-[11px]`,H.value.kbd])},`↓`,2),m(` `+d(r(B)(`search.hint.navigate`)),1)]),g(`span`,F,[g(`kbd`,{class:_([`px-1.5 py-0.5 rounded-sm border font-mono text-[11px]`,H.value.kbd])},`↵`,2),m(` `+d(r(B)(`search.hint.select`)),1)]),g(`span`,I,[g(`kbd`,{class:_([`px-1.5 py-0.5 rounded-sm border font-mono text-[11px]`,H.value.kbd])},`esc`,2),m(` `+d(r(B)(`search.hint.close`)),1)])],2)],2),[[b,C.modelValue]])]),_:1})],40,O)):u(``,!0)]),_:1})]))}},[[`__scopeId`,`data-v-3782d7e2`]]);export{L as t}; |