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

Codex Design System for Wikimedia

"use strict";var k=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var E=(e,o)=>{var r={};for(var l in e)W.call(e,l)&&o.indexOf(l)<0&&(r[l]=e[l]);if(e!=null&&k)for(var l of k(e))o.indexOf(l)<0&&j.call(e,l)&&(r[l]=e[l]);return r};const t=require("vue"),N=require("./Icon.js"),G=require("./CdxMenu.cjs"),J=require("./CdxSearchInput.cjs"),X=require("./useSplitAttributes.cjs"),Y=require("./useI18n.cjs"),m=require("./constants.js"),Z=require("./_plugin-vue_export-helper.js"),ee=t.defineComponent({name:"CdxTypeaheadSearch",components:{CdxIcon:N.CdxIcon,CdxMenu:G,CdxSearchInput:J},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,o)=>e.length>0&&!o.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:o,emit:r,slots:l}){const V=t.ref(),i=t.ref(),C=t.useId(),w=Y("cdx-typeahead-search-search-results-label","Search results"),u=t.ref(!1),s=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:$}=X(o,T);function K(a){return a}const x=t.computed(()=>({visibleItemLimit:e.visibleItemLimit,showThumbnail:e.showThumbnail,boldLabel:!0,hideDescriptionOverflow:!0}));let b,f;function A(a){const n=a.target;S(n.value)}function S(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:(s.value=!0,l["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 L(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 _(){y.value=!0,(h.value||v.value||e.showEmptyQueryResults&&e.searchResults.length>0)&&(u.value=!0)}function D(){y.value=!1,u.value=!1}function I(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 P(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 z(a){var n;u.value=!1,(n=i.value)==null||n.clearActive(),I(a)}function H(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 O(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&&S(e.initialInputValue,!0)}),t.watch(t.toRef(e,"searchResults"),()=>{h.value=p.value.trim(),(y.value&&s.value&&h.value.length>0||e.showEmptyQueryResults&&e.searchResults.length>0)&&(u.value=!0),f!==void 0&&(clearTimeout(f),f=void 0),s.value=!1,v.value=!1}),{form:V,menu:i,menuId:C,highlightedId:B,selection:g,menuMessageClass:F,footer:Q,asSearchResult:K,inputValue:p,searchQuery:h,expanded:u,showPending:v,rootClasses:q,rootStyle:U,otherAttrs:$,menuConfig:x,onComposition:A,onUpdateInputValue:S,onUpdateMenuSelection:L,onFocus:_,onBlur:D,onSearchResultClick:I,onSearchResultKeyboardNavigation:P,onSearchFooterClick:z,onSubmit:H,onKeydown:O,MenuFooterValue:m.MenuFooterValue,articleIcon:N.N3,translatedSearchResultsLabel:w}},methods:{focus(){this.$refs.searchInput.focus()}}}),te=["id","action"],ae={class:"cdx-typeahead-search__menu-message__text"},ne={class:"cdx-typeahead-search__menu-message__text"},oe=["href","onClickCapture"],se={class:"cdx-menu-item__text cdx-typeahead-search__search-footer__text"},le={class:"cdx-typeahead-search__search-footer__query"};function ue(e,o,r,l,V,i){const C=t.resolveComponent("cdx-icon"),w=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:o[4]||(o[4]=(...s)=>e.onSubmit&&e.onSubmit(...s))},[t.createVNode(u,t.mergeProps({ref:"searchInput",modelValue:e.inputValue,"onUpdate:modelValue":o[3]||(o[3]=s=>e.inputValue=s),"button-label":e.isMobileView?void 0: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,onCompositionstart:e.onComposition,onCompositionupdate:e.onComposition,onCompositionend:e.onComposition,onFocus:e.onFocus,onBlur:e.onBlur,onKeydown:e.onKeydown}),{default:t.withCtx(()=>[t.createVNode(w,t.mergeProps({id:e.menuId,ref:"menu",expanded:e.expanded,"onUpdate:expanded":o[0]||(o[0]=s=>e.expanded=s),class:"cdx-typeahead-search__menu","render-in-place":"","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:o[1]||(o[1]=s=>e.onSearchResultClick(e.asSearchResult(s))),onMenuItemKeyboardNavigation:e.onSearchResultKeyboardNavigation,onLoadMore:o[2]||(o[2]=s=>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",ae,[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",ne,[t.renderSlot(e.$slots,"search-no-results-text")])],2)]),default:t.withCtx(({menuItem:s,active:v})=>[s.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(s).url,onClickCapture:t.withModifiers(y=>e.onSearchFooterClick(e.asSearchResult(s)),["stop"])},[t.createVNode(C,{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,oe)):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","onCompositionstart","onCompositionupdate","onCompositionend","onFocus","onBlur","onKeydown"]),t.renderSlot(e.$slots,"default")],40,te)],6)}const re=Z._export_sfc(ee,[["render",ue]]);module.exports=re;