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

Codex Design System for Wikimedia

"use strict";var k=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var E=(e,n)=>{var r={};for(var l in e)W.call(e,l)&&n.indexOf(l)<0&&(r[l]=e[l]);if(e!=null&&k)for(var l of k(e))n.indexOf(l)<0&&_.call(e,l)&&(r[l]=e[l]);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,n)=>e.length>0&&!n.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:n,emit:r,slots:l}){const V=t.ref(),i=t.ref(),w=t.useId(),C=X("cdx-typeahead-search-search-results-label","Search results"),u=t.ref(!1),o=t.ref(!1),v=t.ref(!1),y=t.ref(!1),p=t.ref(e.initialInputValue),h=t.ref(""),B=t.computed(()=>{var a,s;return(s=(a=i.value)==null?void 0:a.getHighlightedMenuItem())==null?void 0:s.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)),U=t.computed(()=>e.searchFooterUrl&&h.value.length>0?{value:m.MenuFooterValue,url:e.searchFooterUrl}:void 0),Q=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:T,rootStyle:q,otherAttrs:$}=J(n,Q);function K(a){return a}const x=t.computed(()=>({visibleItemLimit:e.visibleItemLimit,showThumbnail:e.showThumbnail,boldLabel:!0,hideDescriptionOverflow:!0}));let b,f;function I(a,s=!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:(o.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)};s?c():b=setTimeout(()=>{c()},e.debounceInterval)}function A(a){var s;if(a===m.MenuFooterValue){g.value=null,p.value=h.value;return}g.value=a,a!==null&&(p.value=d.value?(s=d.value.label)!=null?s:String(d.value.value):"")}function L(){y.value=!0,(h.value||v.value||e.showEmptyQueryResults&&e.searchResults.length>0)&&(u.value=!0)}function P(){y.value=!1,u.value=!1}function S(a){const M=a,{id:s}=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 s={searchResult:a,index:e.searchResults.findIndex(c=>c.value===a.value),numberOfResults:e.searchResults.length};r("search-result-click",s)}function D(a){var s;if(a.value===m.MenuFooterValue){p.value=h.value;return}p.value=a.value?(s=a.label)!=null?s:String(a.value):""}function z(a){var s;u.value=!1,(s=i.value)==null||s.clearActive(),S(a)}function H(a){if(d.value)R(d.value),a.stopPropagation(),window.location.assign(d.value.url),a.preventDefault();else{const s={searchResult:null,index:-1,numberOfResults:e.searchResults.length};r("submit",s)}}function O(a){if(!i.value||!h.value&&!e.showEmptyQueryResults||a.key===" ")return;const s=i.value.getHighlightedMenuItem(),c=i.value.getHighlightedViaKeyboard();switch(a.key){case"Enter":s&&(s.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&&o.value&&h.value.length>0||e.showEmptyQueryResults&&e.searchResults.length>0)&&(u.value=!0),f!==void 0&&(clearTimeout(f),f=void 0),o.value=!1,v.value=!1}),{form:V,menu:i,menuId:w,highlightedId:B,selection:g,menuMessageClass:F,footer:U,asSearchResult:K,inputValue:p,searchQuery:h,expanded:u,showPending:v,rootClasses:T,rootStyle:q,otherAttrs:$,menuConfig:x,onUpdateInputValue:I,onUpdateMenuSelection:A,onFocus:L,onBlur:P,onSearchResultClick:S,onSearchResultKeyboardNavigation:D,onSearchFooterClick:z,onSubmit:H,onKeydown:O,MenuFooterValue:m.MenuFooterValue,articleIcon:N.P3,translatedSearchResultsLabel:C}},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"],oe={class:"cdx-menu-item__text cdx-typeahead-search__search-footer__text"},se={class:"cdx-typeahead-search__search-footer__query"};function le(e,n,r,l,V,i){const w=t.resolveComponent("cdx-icon"),C=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:n[7]||(n[7]=(...o)=>e.onSubmit&&e.onSubmit(...o))},[t.createVNode(u,t.mergeProps({ref:"searchInput",modelValue:e.inputValue,"onUpdate:modelValue":n[3]||(n[3]=o=>e.inputValue=o),"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:n[4]||(n[4]=o=>e.onUpdateInputValue(o.data)),onCompositionupdate:n[5]||(n[5]=o=>e.onUpdateInputValue(o.data)),onCompositionend:n[6]||(n[6]=o=>e.onUpdateInputValue(o.data)),onFocus:e.onFocus,onBlur:e.onBlur,onKeydown:e.onKeydown}),{default:t.withCtx(()=>[t.createVNode(C,t.mergeProps({id:e.menuId,ref:"menu",expanded:e.expanded,"onUpdate:expanded":n[0]||(n[0]=o=>e.expanded=o),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:n[1]||(n[1]=o=>e.onSearchResultClick(e.asSearchResult(o))),onMenuItemKeyboardNavigation:e.onSearchResultKeyboardNavigation,onLoadMore:n[2]||(n[2]=o=>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:o,active:v})=>[o.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(o).url,onClickCapture:t.withModifiers(y=>e.onSearchFooterClick(e.asSearchResult(o)),["stop"])},[t.createVNode(w,{class:"cdx-menu-item__thumbnail cdx-typeahead-search__search-footer__icon",icon:e.articleIcon},null,8,["icon"]),t.createElementVNode("span",oe,[t.renderSlot(e.$slots,"search-footer-text",{searchQuery:e.searchQuery},()=>[t.createElementVNode("strong",se,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",le]]);module.exports=ue;