@wikimedia/codex/dist/modules/CdxTypeaheadSearch.cjs

Codex Design System for Wikimedia

"use strict";var k=Object.getOwnPropertySymbols;var O=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var E=(e,s)=>{var r={};for(var o in e)O.call(e,o)&&s.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&k)for(var o of k(e))s.indexOf(o)<0&&W.call(e,o)&&(r[o]=e[o]);return r};const t=require("vue"),N=require("./Icon.js"),j=require("./CdxMenu.cjs"),G=require("./CdxSearchInput.cjs"),J=require("./useSplitAttributes.cjs"),X=require("./useI18n.cjs"),m=require("./constants.js"),Y=require("./_plugin-vue_export-helper.js"),Z=t.defineComponent({name:"CdxTypeaheadSearch",components:{CdxIcon:N.CdxIcon,CdxMenu:j,CdxSearchInput:G},inheritAttrs:!1,props:{id:{type:String,required:!0},formAction:{type:String,required:!0},searchResults:{type:Array,required:!0},useButton:{type:Boolean,default:!1},buttonLabel:{type:String,default:"",validator:(e,s)=>e.length>0&&!s.useButton?(console.warn("[CdxTypeaheadSearch]: The boolean `useButton` prop is required to show the search button.\n\nRefer to https://doc.wikimedia.org/codex/latest/components/demos/typeahead-search.html#props."),!1):!0},initialInputValue:{type:String,default:""},searchFooterUrl:{type:String,default:""},debounceInterval:{type:Number,default:m.DebounceInterval},highlightQuery:{type:Boolean,default:!1},showThumbnail:{type:Boolean,default:!1},autoExpandWidth:{type:Boolean,default:!1},visibleItemLimit:{type:Number,default:null},showEmptyQueryResults:{type:Boolean,default:!1},isMobileView:{type:Boolean,default:!1}},emits:["input","search-result-click","submit","load-more"],setup(e,{attrs:s,emit:r,slots:o}){const C=t.ref(),i=t.ref(),w=t.useId(),S=X("cdx-typeahead-search-search-results-label","Search results"),u=t.ref(!1),l=t.ref(!1),v=t.ref(!1),y=t.ref(!1),p=t.ref(e.initialInputValue),h=t.ref(""),B=t.computed(()=>{var a,n;return(n=(a=i.value)==null?void 0:a.getHighlightedMenuItem())==null?void 0:n.id}),g=t.ref(null),F=t.computed(()=>({"cdx-typeahead-search__menu-message--has-thumbnail":e.showThumbnail})),d=t.computed(()=>e.searchResults.find(a=>a.value===g.value)),Q=t.computed(()=>e.searchFooterUrl&&h.value.length>0?{value:m.MenuFooterValue,url:e.searchFooterUrl}:void 0),T=t.computed(()=>({"cdx-typeahead-search--expanded":u.value,"cdx-typeahead-search--is-mobile-view":e.isMobileView,"cdx-typeahead-search--show-thumbnail":e.showThumbnail,"cdx-typeahead-search--auto-expand-width":e.showThumbnail&&e.autoExpandWidth&&!e.isMobileView})),{rootClasses:q,rootStyle:U,otherAttrs:$}=J(s,T);function x(a){return a}const _=t.computed(()=>({visibleItemLimit:e.visibleItemLimit,showThumbnail:e.showThumbnail,boldLabel:!0,hideDescriptionOverflow:!0}));let b,f;function I(a,n=!1){d.value&&d.value.label!==a&&d.value.value!==a&&(g.value=null),f!==void 0&&(clearTimeout(f),f=void 0),a===""?u.value=!1:(l.value=!0,o["search-results-pending"]&&(f=setTimeout(()=>{y.value&&(u.value=!0),v.value=!0},m.PendingDelay))),b!==void 0&&(clearTimeout(b),b=void 0);const c=()=>{r("input",a)};n?c():b=setTimeout(()=>{c()},e.debounceInterval)}function K(a){var n;if(a===m.MenuFooterValue){g.value=null,p.value=h.value;return}g.value=a,a!==null&&(p.value=d.value?(n=d.value.label)!=null?n:String(d.value.value):"")}function A(){y.value=!0,(h.value||v.value||e.showEmptyQueryResults&&e.searchResults.length>0)&&(u.value=!0)}function L(){y.value=!1,u.value=!1}function V(a){const M=a,{id:n}=M,c=E(M,["id"]);if(c.value===m.MenuFooterValue){r("search-result-click",{searchResult:null,index:e.searchResults.length,numberOfResults:e.searchResults.length});return}R(c)}function R(a){const n={searchResult:a,index:e.searchResults.findIndex(c=>c.value===a.value),numberOfResults:e.searchResults.length};r("search-result-click",n)}function D(a){var n;if(a.value===m.MenuFooterValue){p.value=h.value;return}p.value=a.value?(n=a.label)!=null?n:String(a.value):""}function P(a){var n;u.value=!1,(n=i.value)==null||n.clearActive(),V(a)}function z(a){if(d.value)R(d.value),a.stopPropagation(),window.location.assign(d.value.url),a.preventDefault();else{const n={searchResult:null,index:-1,numberOfResults:e.searchResults.length};r("submit",n)}}function H(a){if(!i.value||!h.value&&!e.showEmptyQueryResults||a.key===" ")return;const n=i.value.getHighlightedMenuItem(),c=i.value.getHighlightedViaKeyboard();switch(a.key){case"Enter":n&&(n.value===m.MenuFooterValue&&c?window.location.assign(e.searchFooterUrl):i.value.delegateKeyNavigation(a,{prevent:!1})),u.value=!1;break;case"Tab":u.value=!1;break;default:i.value.delegateKeyNavigation(a);break}}return t.onMounted(()=>{e.initialInputValue&&I(e.initialInputValue,!0)}),t.watch(t.toRef(e,"searchResults"),()=>{h.value=p.value.trim(),(y.value&&l.value&&h.value.length>0||e.showEmptyQueryResults&&e.searchResults.length>0)&&(u.value=!0),f!==void 0&&(clearTimeout(f),f=void 0),l.value=!1,v.value=!1}),{form:C,menu:i,menuId:w,highlightedId:B,selection:g,menuMessageClass:F,footer:Q,asSearchResult:x,inputValue:p,searchQuery:h,expanded:u,showPending:v,rootClasses:q,rootStyle:U,otherAttrs:$,menuConfig:_,onUpdateInputValue:I,onUpdateMenuSelection:K,onFocus:A,onBlur:L,onSearchResultClick:V,onSearchResultKeyboardNavigation:D,onSearchFooterClick:P,onSubmit:z,onKeydown:H,MenuFooterValue:m.MenuFooterValue,articleIcon:N.R3,translatedSearchResultsLabel:S}},methods:{focus(){this.$refs.searchInput.focus()}}}),ee=["id","action"],te={class:"cdx-typeahead-search__menu-message__text"},ae={class:"cdx-typeahead-search__menu-message__text"},ne=["href","onClickCapture"],se={class:"cdx-menu-item__text cdx-typeahead-search__search-footer__text"},le={class:"cdx-typeahead-search__search-footer__query"};function oe(e,s,r,o,C,i){const w=t.resolveComponent("cdx-icon"),S=t.resolveComponent("cdx-menu"),u=t.resolveComponent("cdx-search-input");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["cdx-typeahead-search",e.rootClasses]),style:t.normalizeStyle(e.rootStyle)},[t.createElementVNode("form",{id:e.id,ref:"form",class:"cdx-typeahead-search__form",action:e.formAction,onSubmit:s[4]||(s[4]=(...l)=>e.onSubmit&&e.onSubmit(...l))},[t.createVNode(u,t.mergeProps({ref:"searchInput",modelValue:e.inputValue,"onUpdate:modelValue":s[3]||(s[3]=l=>e.inputValue=l),"button-label":e.buttonLabel,"use-button":e.useButton&&!e.isMobileView,"hide-icon":e.isMobileView,clearable:e.isMobileView},e.otherAttrs,{class:"cdx-typeahead-search__input",name:"search",role:"combobox",autocomplete:"off","aria-autocomplete":"list","aria-owns":e.showEmptyQueryResults&&e.searchQuery.length===0?e.menuId:void 0,"aria-controls":!e.showEmptyQueryResults||e.searchQuery.length>0?e.menuId:void 0,"aria-expanded":e.expanded,"aria-activedescendant":e.highlightedId,"onUpdate:modelValue":e.onUpdateInputValue,onFocus:e.onFocus,onBlur:e.onBlur,onKeydown:e.onKeydown}),{default:t.withCtx(()=>[t.createVNode(S,t.mergeProps({id:e.menuId,ref:"menu",expanded:e.expanded,"onUpdate:expanded":s[0]||(s[0]=l=>e.expanded=l),class:"cdx-typeahead-search__menu","show-pending":e.showPending,selected:e.selection,"menu-items":e.searchResults,footer:e.footer,"search-query":e.highlightQuery?e.searchQuery:"","show-no-results-slot":e.searchQuery.length>0&&e.searchResults.length===0&&e.$slots["search-no-results-text"]&&e.$slots["search-no-results-text"]().length>0},e.menuConfig,{"aria-label":e.translatedSearchResultsLabel,"onUpdate:selected":e.onUpdateMenuSelection,onMenuItemClick:s[1]||(s[1]=l=>e.onSearchResultClick(e.asSearchResult(l))),onMenuItemKeyboardNavigation:e.onSearchResultKeyboardNavigation,onLoadMore:s[2]||(s[2]=l=>e.$emit("load-more"))}),{pending:t.withCtx(()=>[t.createElementVNode("div",{class:t.normalizeClass(["cdx-menu-item__content cdx-typeahead-search__menu-message",e.menuMessageClass])},[t.createElementVNode("span",te,[t.renderSlot(e.$slots,"search-results-pending")])],2)]),"no-results":t.withCtx(()=>[t.createElementVNode("div",{class:t.normalizeClass(["cdx-menu-item__content cdx-typeahead-search__menu-message",e.menuMessageClass])},[t.createElementVNode("span",ae,[t.renderSlot(e.$slots,"search-no-results-text")])],2)]),default:t.withCtx(({menuItem:l,active:v})=>[l.value===e.MenuFooterValue?(t.openBlock(),t.createElementBlock("a",{key:0,class:t.normalizeClass(["cdx-menu-item__content cdx-typeahead-search__search-footer",{"cdx-typeahead-search__search-footer__active":v}]),href:e.asSearchResult(l).url,onClickCapture:t.withModifiers(y=>e.onSearchFooterClick(e.asSearchResult(l)),["stop"])},[t.createVNode(w,{class:"cdx-menu-item__thumbnail cdx-typeahead-search__search-footer__icon",icon:e.articleIcon},null,8,["icon"]),t.createElementVNode("span",se,[t.renderSlot(e.$slots,"search-footer-text",{searchQuery:e.searchQuery},()=>[t.createElementVNode("strong",le,t.toDisplayString(e.searchQuery),1)])])],42,ne)):t.createCommentVNode("v-if",!0)]),_:3},16,["id","expanded","show-pending","selected","menu-items","footer","search-query","show-no-results-slot","aria-label","onUpdate:selected","onMenuItemKeyboardNavigation"])]),_:3},16,["modelValue","button-label","use-button","hide-icon","clearable","aria-owns","aria-controls","aria-expanded","aria-activedescendant","onUpdate:modelValue","onFocus","onBlur","onKeydown"]),t.renderSlot(e.$slots,"default")],40,ee)],6)}const ue=Y._export_sfc(Z,[["render",oe]]);module.exports=ue;