7b44260fbc
Adds a client-side fuzzy product search to the design system: - `src/api/products.js`: fixture catalogue (22 products across the Kaiser Natron, Holste, Gazelle, Grüne Tante and Linda ranges) plus a scored, diacritic-folded search (ß→ss, ä→ae, NFKD) with weighted fields (title 5, brand/keywords 3, size/category 2, id 1) and prefix bonus. - `Search.vue`: tone-driven (brand/paper/cream) full-screen overlay on mobile, centered modal on md+. Auto-focus, arrow-key nav, Enter/Esc, suggested-products empty state, keyboard-hint footer on desktop, safe- area aware, scroll-locks the document while open. - Navbar now hosts two triggers: a pill-shaped "Search products" lookalike (desktop, in the same LanguageSwitcher-style container) and a green/accent shadow-sm floating button bottom-left on mobile. Both open the same overlay. - HomePage feeds the products list into Navbar. - Design-system showcase (`/design/search`) with live demo + canned result preview + usage snippet. Sidebar + mobile bottom-nav entries and DE/EN i18n added. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 line
3.2 KiB
JavaScript
1 line
3.2 KiB
JavaScript
import{$ as e,D as t,L as n,P as r,c as i,k as a,l as o,m as s,o as c,p as l,s as u,tt as d,u as f,x as p}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{t as m}from"./i18n-DuB4OiH1.js";import{t as h}from"./SectionShell-aXzaQlw9.js";import{t as g}from"./Card-SodW1h0q.js";var _={class:`flex flex-col gap-2`},v=[`for`],y={key:0,class:`text-danger`},b=[`id`,`type`,`value`,`placeholder`,`disabled`,`required`,`aria-invalid`,`aria-describedby`],x=[`id`],S=[`id`],C={__name:`Input`,props:{modelValue:{type:[String,Number],default:``},label:{type:String,default:``},hint:{type:String,default:``},error:{type:String,default:``},type:{type:String,default:`text`},placeholder:{type:String,default:``},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:[`update:modelValue`],setup(n){let r=n,i=t(),a=c(()=>`in-${i}`),s=c(()=>r.hint?`hint-${i}`:void 0),m=c(()=>r.error?`err-${i}`:void 0),h=c(()=>[s.value,m.value].filter(Boolean).join(` `)||void 0);return(t,r)=>(p(),f(`div`,_,[n.label?(p(),f(`label`,{key:0,for:a.value,class:`text-[11px] font-bold uppercase tracking-eyebrow text-muted`},[l(d(n.label),1),n.required?(p(),f(`span`,y,` *`)):o(``,!0)],8,v)):o(``,!0),u(`input`,{id:a.value,type:n.type,value:n.modelValue,placeholder:n.placeholder,disabled:n.disabled,required:n.required,"aria-invalid":!!n.error,"aria-describedby":h.value,class:e([`w-full rounded-sm border bg-paper px-4 py-3 text-[15px] text-ink placeholder:text-ink-placeholder transition-colors duration-base focus:outline-none focus:border-brand disabled:opacity-50 disabled:cursor-not-allowed`,n.error?`border-danger`:`border-line`]),onInput:r[0]||=e=>t.$emit(`update:modelValue`,e.target.value)},null,42,b),n.hint&&!n.error?(p(),f(`p`,{key:1,id:s.value,class:`text-[13px] text-muted`},d(n.hint),9,x)):o(``,!0),n.error?(p(),f(`p`,{key:2,id:m.value,class:`text-[13px] text-danger`},d(n.error),9,S)):o(``,!0)]))}},w={class:`eyebrow mb-5`},T={class:`grid md:grid-cols-2 gap-6 max-w-3xl`},E={class:`eyebrow mb-5`},D={class:`grid md:grid-cols-2 gap-6 max-w-3xl`},O={__name:`InputsSection`,setup(e){let{t}=m(),o=r(``),c=r(``),l=r(``);return(e,r)=>(p(),i(h,{eyebrow:n(t)(`ds.eyebrow.components`),title:n(t)(`ds.inputs.title`),description:n(t)(`ds.inputs.description`)},{default:a(()=>[u(`section`,null,[u(`h2`,w,d(n(t)(`ds.heading.default`)),1),s(g,{tone:`paper`},{default:a(()=>[u(`div`,T,[s(C,{modelValue:o.value,"onUpdate:modelValue":r[0]||=e=>o.value=e,label:n(t)(`ds.inputs.email`),type:`email`,placeholder:`you@example.com`,hint:n(t)(`ds.inputs.emailHint`)},null,8,[`modelValue`,`label`,`hint`]),s(C,{modelValue:c.value,"onUpdate:modelValue":r[1]||=e=>c.value=e,label:n(t)(`ds.inputs.password`),type:`password`,placeholder:`••••••••`},null,8,[`modelValue`,`label`])])]),_:1})]),u(`section`,null,[u(`h2`,E,d(n(t)(`ds.heading.states`)),1),s(g,{tone:`paper`},{default:a(()=>[u(`div`,D,[s(C,{modelValue:l.value,"onUpdate:modelValue":r[2]||=e=>l.value=e,label:n(t)(`ds.inputs.required`),required:``,error:n(t)(`ds.inputs.requiredError`)},null,8,[`modelValue`,`label`,`error`]),s(C,{label:n(t)(`ds.inputs.disabled`),placeholder:n(t)(`ds.inputs.disabledPlaceholder`),disabled:``},null,8,[`label`,`placeholder`])])]),_:1})])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{O as default}; |