1 line
8.8 KiB
JavaScript
1 line
8.8 KiB
JavaScript
import{A as e,S as t,W as n,b as r,c as i,ct as a,i as o,j as s,k as c,l,m as u,o as d,ot as f,p,r as m,s as h,u as g,w as _,y as v,z as y}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{i as b,r as x,t as S}from"./runtime-dom.esm-bundler-ouKdkQwB.js";import{t as C}from"./_plugin-vue_export-helper-BOai-rQB.js";import{t as w}from"./Icon-D1Ud4H_f.js";import{t as T}from"./IconButton-Cpk65EOZ.js";import{t as E}from"./i18n-BxXwPz8H.js";import{t as D}from"./Badge-D2T2EdKQ.js";var O=[`aria-label`],k=[`placeholder`,`aria-label`],A=[`aria-label`],j=[`aria-label`],M=[`href`,`aria-selected`,`data-active`,`onMousemove`,`onClick`],N=[`src`,`alt`],ee={class:`flex-1 min-w-0`},te={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=d(()=>V[R.tone]),U=y(``),W=y(0),G=y(null),K=y(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=d(()=>{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)});c(()=>R.modelValue,async e=>{e&&(U.value=``,W.value=0,await v(),G.value?.focus())}),c(Y,()=>{W.value=0}),c(()=>R.modelValue,e=>{typeof document>`u`||(document.documentElement.style.overflow=e?`hidden`:``)}),r(()=>{typeof document<`u`&&(document.documentElement.style.overflow=``)});function X(){z(`update:modelValue`,!1)}function Z(){U.value=``,v(()=>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 $(){v(()=>{(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(r,c)=>(t(),i(o,{to:`body`},[u(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:e(()=>[C.modelValue?(t(),g(`div`,{key:0,class:`fixed inset-0 z-[60] font-sans`,role:`dialog`,"aria-modal":`true`,"aria-label":n(B)(`search.label`),onKeydown:ne},[h(`div`,{class:`hidden md:block absolute inset-0 bg-ink/50`,onClick:X}),u(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:e(()=>[s(h(`div`,{class:f([`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])},[h(`div`,{class:f([`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)`}},[u(w,{name:`search`,size:20,class:f([`shrink-0`,H.value.inputIcon])},null,8,[`class`]),s(h(`input`,{ref_key:`inputRef`,ref:G,"onUpdate:modelValue":c[0]||=e=>U.value=e,type:`search`,autocomplete:`off`,autocorrect:`off`,autocapitalize:`none`,spellcheck:`false`,enterkeyhint:`search`,placeholder:C.placeholder||n(B)(`search.placeholder`),"aria-label":n(B)(`search.label`),class:f([`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?(t(),i(D,{key:0,as:`button`,variant:`accent`,class:`shrink-0`,"aria-label":n(B)(`search.clear`),onClick:Z},{default:e(()=>[p(a(n(B)(`search.clear`)),1)]),_:1},8,[`aria-label`])):l(``,!0),h(`button`,{type:`button`,class:f([`shrink-0 inline-flex items-center justify-center w-10 h-10 rounded-pill transition-colors`,H.value.closeBtn]),"aria-label":n(B)(`menu.close`),onClick:X},[u(w,{name:`close`,size:20})],10,A)],2),h(`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":n(B)(`search.results`)},[!U.value.trim()&&Y.value.length?(t(),g(`p`,{key:0,class:f([`eyebrow px-5 md:px-4 pt-2 pb-1`,H.value.eyebrowCream?`text-cream/70`:``])},a(n(B)(`search.suggested`)),3)):l(``,!0),Y.value.length?l(``,!0):(t(),g(`p`,{key:1,class:f([`px-5 md:px-4 py-10 text-center text-sm`,H.value.noResults])},a(n(B)(`search.noResults`)),3)),(t(!0),g(m,null,_(Y.value,(e,n)=>(t(),g(`a`,{key:e.id,href:e.href||`#`,role:`option`,"aria-selected":n===W.value,"data-active":n===W.value,class:f([`flex items-center gap-4 px-5 md:px-4 py-3 transition-colors`,n===W.value?H.value.rowActive:H.value.rowHover]),onMousemove:e=>W.value=n,onClick:t=>ie(n,e,t)},[h(`div`,{class:f([`shrink-0 w-14 h-14 rounded-sm overflow-hidden flex items-center justify-center`,H.value.mediaBg])},[e.image?(t(),g(`img`,{key:0,src:e.image,alt:e.title,loading:`lazy`,decoding:`async`,class:`w-full h-full object-contain p-2`},null,8,N)):l(``,!0)],2),h(`div`,ee,[h(`p`,{class:f([`text-[15px] font-semibold leading-tight truncate`,H.value.title])},a(e.title),3),e.size?(t(),g(`p`,{key:0,class:f([`text-[13px] truncate`,H.value.meta])},[p(a(e.size),1),e.brand?(t(),g(`span`,te,` · `+a(e.brand),1)):l(``,!0)],2)):l(``,!0)]),h(`span`,{class:f([`shrink-0 text-[14px] font-semibold`,H.value.price])},a(re(e)),3)],42,M))),128))],8,j),u(T,{icon:`close`,variant:`float`,size:`lg`,"icon-stroke-width":2,"aria-label":n(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`]),h(`div`,{class:f([`hidden md:flex shrink-0 items-center gap-4 px-4 py-2 border-t text-[11px]`,H.value.border,H.value.hint])},[h(`span`,P,[h(`kbd`,{class:f([`px-1.5 py-0.5 rounded-sm border font-mono text-[11px]`,H.value.kbd])},`↑`,2),h(`kbd`,{class:f([`px-1.5 py-0.5 rounded-sm border font-mono text-[11px]`,H.value.kbd])},`↓`,2),p(` `+a(n(B)(`search.hint.navigate`)),1)]),h(`span`,F,[h(`kbd`,{class:f([`px-1.5 py-0.5 rounded-sm border font-mono text-[11px]`,H.value.kbd])},`↵`,2),p(` `+a(n(B)(`search.hint.select`)),1)]),h(`span`,I,[h(`kbd`,{class:f([`px-1.5 py-0.5 rounded-sm border font-mono text-[11px]`,H.value.kbd])},`esc`,2),p(` `+a(n(B)(`search.hint.close`)),1)])],2)],2),[[b,C.modelValue]])]),_:1})],40,O)):l(``,!0)]),_:1})]))}},[[`__scopeId`,`data-v-3782d7e2`]]);export{L as t}; |