@topvisor/ui 0.9.25 → 0.9.26-dev

package/formsExt/formsExt.amd.js

@@ -1,2 +1,2 @@
-define(["require","exports","vue","../.chunks/forms-DkNAMd-D.amd","../utils/keyboard.amd","../.chunks/listItem.vue_vue_type_script_setup_true_lang-2TAzIZZA.amd","../.chunks/widgetInput-BxO9y9L7.amd","lodash","../require/css.amd!../assets/formsExt.css"],function(le,V,e,h,b,C,_,$){"use strict";if(typeof e>"u")var e=window.Vue;const E={key:0,class:"top-editArea_title"},I={class:"top-editArea_footer"},S=e.defineComponent({__name:"editArea",props:{modelValue:{},title:{},cancelText:{default:"Отмена"},submitText:{default:"Отправить"},attachToKeyboard:{type:Boolean},name:{},placeholder:{},rows:{},minHeight:{},expandable:{type:Boolean,default:!0},disabled:{type:Boolean},readonly:{type:Boolean},isError:{type:Boolean},hint:{}},emits:["update:modelValue","cancel"],setup(c,{emit:r}){const t=c,a=r,y=e.ref(""),v=e.ref(t.modelValue);e.watch(e.toRef(t,"modelValue"),()=>{v.value=t.modelValue});const p=e.computed(()=>v.value!==t.modelValue),m=o=>{a("update:modelValue",o)},f=()=>{a("cancel"),v.value=t.modelValue};return(o,u)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-editArea":!0,"top-editArea-attachedToKeyboard":o.attachToKeyboard})},[o.title?(e.openBlock(),e.createElementBlock("div",E,e.toDisplayString(o.title),1)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass({"top-editArea_form":!0,"top-error":o.isError,"top-focus":y.value=="focus"})},[e.createVNode(h.Textarea,{modelValue:v.value,"onUpdate:modelValue":u[0]||(u[0]=s=>v.value=s),name:o.name,placeholder:o.placeholder,rows:o.rows,minHeight:o.minHeight,expandable:o.expandable,disabled:o.disabled,readonly:o.readonly,isError:o.isError,hint:o.hint,class:"top-editArea_element",onFocus:u[1]||(u[1]=s=>y.value="focus"),onBlur:u[2]||(u[2]=s=>y.value=""),onKeyup:[e.withKeys(f,["esc"]),u[3]||(u[3]=e.withKeys(e.withModifiers(s=>m(v.value),["ctrl"]),["enter"]))]},null,8,["modelValue","name","placeholder","rows","minHeight","expandable","disabled","readonly","isError","hint"]),e.createElementVNode("div",I,[p.value&&(!o.attachToKeyboard||o.modelValue)?(e.openBlock(),e.createBlock(h.Button,{key:0,class:"top-editArea_button",color:"theme",icon:o.attachToKeyboard?"":"",onClick:f},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.attachToKeyboard?"":o.cancelText),1)]),_:1},8,["icon"])):e.createCommentVNode("",!0),e.createVNode(h.Button,{class:"top-editArea_button",icon:o.attachToKeyboard?"":"",onClick:u[4]||(u[4]=s=>m(v.value))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.attachToKeyboard?"":o.submitText),1)]),_:1},8,["icon"])])],2)],2))}}),T={$style:{"top-editArea":"top-editArea","top-editArea_title":"top-editArea_title","top-editArea_form":"top-editArea_form","top-textarea":"top-textarea","top-editArea_element":"top-editArea_element","top-textarea_textarea":"top-textarea_textarea","top-editArea_footer":"top-editArea_footer","top-editArea-attachedToKeyboard":"top-editArea-attachedToKeyboard"}},N=h._export_sfc(S,[["__cssModules",T]]),L={class:"top-editInput"},K=e.defineComponent({__name:"editInput",props:{modelValue:{},input:{},button:{}},emits:["update:modelValue"],setup(c,{emit:r}){const t=c,a=e.ref(t.modelValue);e.watch(e.toRef(t.modelValue),()=>{a.value=t.modelValue});const y=r,v=()=>{y("update:modelValue",a.value)};return(p,m)=>(e.openBlock(),e.createElementBlock("div",L,[e.createVNode(h.Input,e.mergeProps(p.input,{onKeydownCapture:m[0]||(m[0]=e.withKeys(e.withModifiers(f=>a.value=p.modelValue,["stop"]),["esc"])),onKeydown:e.withKeys(e.withModifiers(v,["stop"]),["enter"]),modelValue:a.value,"onUpdate:modelValue":m[1]||(m[1]=f=>a.value=f)}),null,16,["onKeydown","modelValue"]),a.value!==p.modelValue?(e.openBlock(),e.createBlock(h.Button,e.mergeProps({key:0,icon:"",styling:"soft"},p.button,{onClick:v}),{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default")]),_:3},16)):e.createCommentVNode("",!0)]))}}),P={$style:{"top-editInput":"top-editInput","top-input":"top-input"}},D=h._export_sfc(K,[["__cssModules",P]]),G=["data-top-icon","onClick"],z={key:0,class:"top-radioGroup_circle"},O=["value","disabled"],W=e.defineComponent({__name:"radioGroup",props:e.mergeModels({modelValue:{},radiosProps:{},showIndicator:{type:Boolean},size:{default:"s"},isError:{type:Boolean}},{modelValue:{required:!0},modelModifiers:{}}),emits:e.mergeModels(["update:modelValue"],["update:modelValue"]),setup(c,{emit:r}){const t=e.useModel(c,"modelValue"),a=c,y=e.ref(null);e.watch(t,()=>{var p,m,f,o,u;(p=a.radiosProps)!=null&&p.some(s=>s.value===t.value)||(t.value=((f=(m=a.radiosProps)==null?void 0:m[0])==null?void 0:f.value)??""),(u=(o=y.value)==null?void 0:o.querySelector(".radioGroup_item-selected"))==null||u.scrollIntoView()},{immediate:!0});const v="radioGroup-"+Math.random();return(p,m)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"elRef",ref:y,class:e.normalizeClass({"top-radioGroup":!0,"top-scrollBarXHidding":!0,["top-size_"+p.size]:!!p.size,"top-error":p.isError})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.radiosProps,f=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass({"top-radioGroup_item-selected":f.value===t.value,"top-radioGroup_item":!0,"top-forms-focusable":!0,"top-disabled":f.disabled}),"data-top-icon":f.icon,onClick:o=>t.value=f.value},[e.createTextVNode(e.toDisplayString(f.title)+" ",1),p.showIndicator?(e.openBlock(),e.createElementBlock("span",z)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":m[0]||(m[0]=o=>t.value=o),name:v,type:"radio",class:e.normalizeClass({"top-unvisible":!0}),value:f.value,disabled:f.disabled},null,8,O),[[e.vModelRadio,t.value]])],10,G))),256))],2))}}),H={$style:{"top-scrollBarXHidding":"top-scrollBarXHidding","top-radioGroup":"top-radioGroup","top-radioGroup_item":"top-radioGroup_item","top-radioGroup_item-selected":"top-radioGroup_item-selected","top-radioGroup_circle":"top-radioGroup_circle","top-disabled":"top-disabled","top-error":"top-error"}},F=h._export_sfc(W,[["__cssModules",H]]),x=(c,r,t)=>{const a=e.ref([]),y=e.ref(!1);let v="",p;c&&!c.params.limit&&(c.params.limit=100);const m=async()=>{if(!c)return;let d,g;if(t&&(c.cache??=new Map,g=JSON.stringify(c.params),d=c.cache.get(g),d))return d;if(y.value=!0,d=await c.call(),y.value=!1,d.errors)return;if(!Array.isArray(d.result)){console.warn("В result ожидался массив");return}const B=d.result.findIndex(w=>w.id===void 0||w.name===void 0);if(B!==-1){console.warn(`В result[${B}] нет id или name`);return}return t&&c.cache.set(g,d),d},f=async()=>{if(!c)return;c.params.offset=0,c.params.search=v;const d=await m();d&&(p=d.nextOffset,a.value=d.result)},o=async()=>{if(!c||!p||y.value)return;c.params.offset=p,c.params.search=v;const d=await m();d&&(p=d.nextOffset,a.value=a.value.concat(d.result))},u=$.debounce(()=>f(),200);return{items:a,isLoading:y,loadAppend:o,setSearchTextAndLoad:(d,g=!0)=>{c&&(d.length<r||d===v&&a.value.length||(v=d,g?u():f()))}}},U={class:"top-selector2_itemMulti top-ellipsis"},J=e.defineComponent({__name:"itemMulti",props:{id:{},name:{}},emits:["delete"],setup(c){return(r,t)=>(e.openBlock(),e.createElementBlock("div",U,[e.createTextVNode(e.toDisplayString(r.name)+" ",1),e.createElementVNode("span",{class:"top-selector2_itemMultiDelete","data-top-icon":"",onClick:t[0]||(t[0]=a=>r.$emit("delete",r.id)),onMousedown:t[1]||(t[1]=e.withModifiers(()=>{},["stop"]))},null,32)]))}}),X={$style:{"top-selector2_itemMulti":"top-selector2_itemMulti","top-selector2_itemMultiDelete":"top-selector2_itemMultiDelete","top-selector2":"top-selector2","top-active":"top-active"}},Y=h._export_sfc(J,[["__cssModules",X]]),R={key:0,class:"top-selector2_activeItems"},j={key:1,class:"top-selector2_activeName top-ellipsis"},Q=e.defineComponent({__name:"selector2",props:e.mergeModels({modelValue:{},items:{default:()=>[]},multiselect:{type:Boolean},disabled:{type:Boolean},size:{default:"s"},isError:{type:Boolean},apiRequest:{},minLength:{default:0},useCache:{type:Boolean},appendSearchToResult:{type:Boolean},appendAllValue:{type:Boolean},addChanger:{type:Boolean},placeholder:{},showSelectedInInput:{type:Boolean,default:!0}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(c){const r=c,t=e.useModel(c,"modelValue"),a=e.ref(""),y={id:0,name:"Все"},v=e.ref(null),p=()=>{var l;return(l=v.value)==null?void 0:l.popup};window.__STORYBOOK_PREVIEW__&&!r.modelValue&&e.watch(()=>r.multiselect,()=>{t.value=r.multiselect?[]:{id:null,name:""}},{immediate:!0});const m=x(r.apiRequest,r.minLength,r.useCache),f=e.computed(()=>{const l=[];return!r.multiselect&&r.appendAllValue&&l.push(y),r.items.forEach(i=>l.push({...i})),l}),o=(l,i=!0)=>i&&l.id===null?Array.isArray(t.value)?t.value.some(n=>n.id===l.id&&n.name===l.name):l.name===t.value.name:Array.isArray(t.value)?t.value.some(n=>n.id===l.id):l.id===t.value.id,u=e.computed(()=>{const l=a.value.toLowerCase(),i=b.invertKeyboardLayout(l);let n=[];return f.value.forEach(k=>{const A=k.name.toLowerCase();(k.id===Number(l)||A.includes(l)||A.includes(i))&&(A===l||A===i?n.unshift(k):n.push(k))}),n.push(...m.items.value),r.appendSearchToResult&&a.value&&(!n.length||n[0].name.toLowerCase()!==l)&&n.push({id:null,name:a.value}),r.multiselect&&(n=n.filter(k=>!o(k))),n}),s=async l=>{var i,n;if(r.multiselect){if(!Array.isArray(t.value)||o(l))return;const k=[...t.value];k.push({...l}),t.value=k,h.Core.state.isMobile?(i=p())==null||i.close():setTimeout(()=>{var A,M;(A=p())==null||A.recalcPosition(),(M=p())==null||M.elPopupWidget.querySelector("input").focus(),a.value&&(u.value.length||(a.value="",m.items.value=[]))})}else a.value&&(a.value="",m.items.value=[]),JSON.stringify(l)!==JSON.stringify(t.value)&&(t.value={...l}),(n=p())==null||n.close()},d=()=>{if(!Array.isArray(t.value)){const i=(f.value.findIndex(n=>n.id===t.value.id)+1)%f.value.length;t.value={...f.value[i]}}},g=async l=>{Array.isArray(t.value)&&(t.value=t.value.filter(i=>i.id!==l),setTimeout(()=>{var i;(i=p())==null||i.recalcPosition()}))},B=e.ref(!1);r.apiRequest&&(e.watch(B,()=>{B.value&&m.setSearchTextAndLoad(a.value,!1)}),e.watch(a,()=>m.setSearchTextAndLoad(a.value)));const w=l=>{const i=l.target;i.scrollTop/(i.scrollHeight-i.offsetHeight)>.8&&m.loadAppend()};return(l,i)=>(e.openBlock(),e.createBlock(e.unref(C._sfc_main),{ref_key:"popupRef",ref:v,onOpen:i[1]||(i[1]=n=>B.value=!0),onClose:i[2]||(i[2]=n=>B.value=!1),onScrollContentList:i[3]||(i[3]=n=>l.apiRequest?w(n):void 0),notch:!1,transitionDuration:0},{opener:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass({"top-selector2":!0,"top-selector2-multiselect":l.multiselect,["top-size_"+l.size]:!0,"top-disabled":l.disabled,"top-forms-focusable":!l.disabled,"top-error":l.isError})},[l.multiselect?(e.openBlock(),e.createElementBlock("div",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,n=>(e.openBlock(),e.createBlock(Y,{id:n.id,name:n.name,onDelete:g},null,8,["id","name"]))),256))])):e.createCommentVNode("",!0),l.multiselect?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",j,e.toDisplayString(Array.isArray(t.value)?"":t.value.name),1)),l.addChanger&&!l.multiselect&&f.value.length>1&&!l.disabled?(e.openBlock(),e.createElementBlock("span",{key:2,class:"top-changer top-changer-selector",onClick:e.withModifiers(d,["stop"])})):e.createCommentVNode("",!0)],2)]),widget:e.withCtx(()=>[e.createVNode(e.unref(_.PopupWidgetInput),{title:"Поиск",icon:"",modelValue:a.value,"onUpdate:modelValue":i[0]||(i[0]=n=>a.value=n),isLoading:e.unref(m).isLoading.value,placeholder:!Array.isArray(t.value)&&!l.multiselect&&l.showSelectedInInput?t.value.name:l.placeholder},null,8,["modelValue","isLoading","placeholder"])]),contentList:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,n=>(e.openBlock(),e.createBlock(e.unref(C._sfc_main$2),{class:e.normalizeClass({"top-active":!Array.isArray(t.value)&&!l.multiselect&&t.value.name===n.name}),key:n.id??void 0,onClick:e.withModifiers(k=>s(n),["stop"])},{default:e.withCtx(()=>[l.$slots.item?e.renderSlot(l.$slots,"item",{key:0,item:n}):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(n.name),1)],64))]),_:2},1032,["class","onClick"]))),128)),u.value.length?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(C._sfc_main$2),{key:0,type:"regular"},{default:e.withCtx(()=>[e.createTextVNode(" Нет результатов ")]),_:1}))]),_:3},512))}}),Z={$style:{"top-selector2":"top-selector2","top-selector2-multiselect":"top-selector2-multiselect","top-active":"top-active","top-selector2_activeItems":"top-selector2_activeItems","top-selector2_activeName":"top-selector2_activeName","top-changer-selector":"top-changer-selector"}},q=h._export_sfc(Q,[["__cssModules",Z]]),ee=e.defineComponent({__name:"menu",props:e.mergeModels({modelValue:{},items:{},isMultiple:{type:Boolean},canBeEmptyMultiple:{type:Boolean},styling:{default:"default"},selectAllItem:{}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(c){const r=c,t=e.useModel(c,"modelValue"),a=e.ref();!r.isMultiple&&!(typeof t.value=="string"||t.value instanceof String)&&console.warn('Type check failed for prop "modelValue". Expected String: '+typeof t.value),r.isMultiple&&!Array.isArray(t.value)&&console.warn('Type check failed for prop "modelValue". Expected Array: '+typeof t.value),r.isMultiple&&!r.canBeEmptyMultiple&&Array.isArray(t.value)&&!t.value.length&&(t.value=[r.items[0].href??r.items[0].value]);const y=o=>Array.isArray(t.value)?t.value.includes(o.value):o.value===t.value,v=(o,u=!1)=>{if(Array.isArray(t.value)){let s=t.value.slice();if(u){s.length||(s=r.items.map(g=>g.value));const d=s.indexOf(o.value);d===-1?s.push(o.value):s.splice(d,1)}else s.length===1&&s[0]===o.value?s=[]:s=[o.value];!r.canBeEmptyMultiple&&!s.length&&(s=[o.value]),t.value=s;return}t.value=o.value},p=o=>{if(a.value.scrollWidth<=a.value.offsetWidth||o.shiftKey||Math.abs(o.deltaY)<50)return;o.preventDefault();const u=o.deltaY>0?30:-30;a.value.scrollLeft=a.value.scrollLeft+u},m=(o=!0)=>{var i,n;const u=a.value.querySelector(".top-active");if(!u)return;const s=24,d=u.offsetLeft-a.value.offsetLeft-s,g=u.offsetLeft-a.value.offsetLeft+u.clientWidth+s,B=a.value.scrollLeft,w=a.value.clientWidth+a.value.scrollLeft;let l=null;d<B&&(l=d),g>w&&(l=g-a.value.clientWidth),l!==null&&(h.isSafari()?(n=(i=h.Core).$)==null||n.call(i,a.value).animate({scrollLeft:l},o?200:0):a.value.scrollTo({left:l,behavior:o?"smooth":"auto"}))},f=()=>{if(Array.isArray(t.value)){if(t.value.length===r.items.length){t.value=[r.items[0].href??r.items[0].value];return}t.value=r.items.map(o=>o.href??o.value)}};return e.onMounted(()=>m(!1)),e.onUpdated(()=>m(!0)),(o,u)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"el",ref:a,class:e.normalizeClass({"top-menu":!0,["top-style_"+o.styling]:!0,"top-unwrap-x":o.styling==="default"}),onWheel:p},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.items,s=>(e.openBlock(),e.createBlock(e.unref(h.Button),e.mergeProps({ref_for:!0},s,{class:"top-menu_item",color:"theme",styling:"",onClick:d=>v(s,d.ctrlKey),isActive:y(s)}),e.createSlots({_:2},[s.content?{name:"default",fn:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.content),1)]),key:"0"}:void 0]),1040,["onClick","isActive"]))),256)),Array.isArray(t.value)&&o.selectAllItem?(e.openBlock(),e.createBlock(e.unref(h.Button),e.mergeProps({key:0},o.selectAllItem,{class:"top-menu_item",color:"theme",styling:"",onClick:u[0]||(u[0]=s=>f()),isActive:t.value.length===o.items.length}),e.createSlots({_:2},[o.selectAllItem.content?{name:"default",fn:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.selectAllItem.content),1)]),key:"0"}:void 0]),1040,["isActive"])):e.createCommentVNode("",!0)],34))}}),te={$style:{"top-menu":"top-menu","top-menu_item":"top-menu_item","top-style_default":"top-style_default","top-active":"top-active","top-style_bar":"top-style_bar","top-unwrap-x":"top-unwrap-x"}},oe=h._export_sfc(ee,[["__cssModules",te]]);V.EditArea=N,V.EditInput=D,V.Menu=oe,V.RadioGroup=F,V.Selector2=q,Object.defineProperty(V,Symbol.toStringTag,{value:"Module"})});
+define(["require","exports","vue","../.chunks/forms-DujTMzoW.amd","../utils/keyboard.amd","../.chunks/listItem.vue_vue_type_script_setup_true_lang-Ob3185Bq.amd","../.chunks/widgetInput-Ce8a61St.amd","lodash","../require/css.amd!../assets/formsExt.css"],function(oe,V,e,h,_,C,M,$){"use strict";if(typeof e>"u")var e=window.Vue;const S={class:"top-editArea_footer"},E=e.defineComponent({__name:"editArea",props:{defaultValue:{default:""},title:{},cancelText:{default:"Cancel"},submitText:{default:"Send"},closeText:{default:"Close"},isFocused:{type:Boolean},forceShowCloseBtn:{type:Boolean},attachToKeyboard:{type:Boolean},modelValue:{},name:{},placeholder:{},rows:{},minHeight:{},expandable:{type:Boolean,default:!0},disabled:{type:Boolean},readonly:{type:Boolean},isError:{type:Boolean},hint:{}},emits:["submit","close","clickOnTitle"],setup(d,{emit:s}){const t=d,l=s,v=e.ref(t.defaultValue),y=e.ref(t.isFocused),u=e.computed(()=>v.value!==t.defaultValue),m=e.computed(()=>t.attachToKeyboard?"":t.forceShowCloseBtn&&!u.value?t.closeText:t.cancelText),p=a=>{l("submit",a),v.value=t.defaultValue},n=()=>{if(t.forceShowCloseBtn&&!u.value){l("close");return}v.value=t.defaultValue},f=()=>{t.attachToKeyboard&&l("clickOnTitle")};return(a,r)=>{const k=e.resolveDirective("focus");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-editArea":!0,"top-editArea-attachedToKeyboard":a.attachToKeyboard})},[a.title?(e.openBlock(),e.createElementBlock("div",{key:0,class:"top-editArea_title",onClick:r[0]||(r[0]=g=>f())},e.toDisplayString(a.title),1)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass({"top-editArea_form":!0,"top-error":a.isError,"top-editArea_form-focus":y.value})},[e.withDirectives(e.createVNode(h.Textarea,{modelValue:v.value,"onUpdate:modelValue":r[1]||(r[1]=g=>v.value=g),name:a.name,placeholder:a.placeholder,rows:a.rows,minHeight:a.minHeight,expandable:a.expandable,disabled:a.disabled,readonly:a.readonly,isError:a.isError,hint:a.hint,class:"top-editArea_element",onFocus:r[2]||(r[2]=()=>y.value=!0),onBlur:r[3]||(r[3]=()=>y.value=!1),onKeyup:[e.withKeys(n,["esc"]),r[4]||(r[4]=e.withKeys(e.withModifiers(g=>p(v.value),["ctrl"]),["enter"]))]},null,8,["modelValue","name","placeholder","rows","minHeight","expandable","disabled","readonly","isError","hint"]),[[k,y.value]]),e.createElementVNode("div",S,[u.value||a.forceShowCloseBtn?(e.openBlock(),e.createBlock(h.Button,{key:0,class:"top-editArea_button",color:"theme",icon:a.attachToKeyboard?"":"",onClick:n},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(m.value),1)]),_:1},8,["icon"])):e.createCommentVNode("",!0),u.value?(e.openBlock(),e.createBlock(h.Button,{key:1,class:"top-editArea_button",icon:a.attachToKeyboard?"":"",onClick:r[5]||(r[5]=g=>p(v.value))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.attachToKeyboard?"":a.submitText),1)]),_:1},8,["icon"])):e.createCommentVNode("",!0)])],2)],2)}}}),T={$style:{"top-editArea":"top-editArea","top-editArea_title":"top-editArea_title","top-editArea_form":"top-editArea_form","top-editArea_form-focus":"top-editArea_form-focus","top-textarea":"top-textarea","top-editArea_element":"top-editArea_element","top-textarea_textarea":"top-textarea_textarea","top-editArea_footer":"top-editArea_footer","top-editArea-attachedToKeyboard":"top-editArea-attachedToKeyboard","top-button":"top-button","top-editArea_button":"top-editArea_button"}},I=h._export_sfc(E,[["__cssModules",T]]),N={class:"top-editInput"},L=e.defineComponent({__name:"editInput",props:{modelValue:{},input:{},button:{}},emits:["update:modelValue"],setup(d,{emit:s}){const t=d,l=e.ref(t.modelValue);e.watch(e.toRef(t.modelValue),()=>{l.value=t.modelValue});const v=s,y=()=>{v("update:modelValue",l.value)};return(u,m)=>(e.openBlock(),e.createElementBlock("div",N,[e.createVNode(h.Input,e.mergeProps(u.input,{onKeydownCapture:m[0]||(m[0]=e.withKeys(e.withModifiers(p=>l.value=u.modelValue,["stop"]),["esc"])),onKeydown:e.withKeys(e.withModifiers(y,["stop"]),["enter"]),modelValue:l.value,"onUpdate:modelValue":m[1]||(m[1]=p=>l.value=p)}),null,16,["onKeydown","modelValue"]),l.value!==u.modelValue?(e.openBlock(),e.createBlock(h.Button,e.mergeProps({key:0,icon:"",styling:"soft"},u.button,{onClick:y}),{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default")]),_:3},16)):e.createCommentVNode("",!0)]))}}),K={$style:{"top-editInput":"top-editInput","top-input":"top-input"}},P=h._export_sfc(L,[["__cssModules",K]]),D=["data-top-icon","onClick"],G={key:0,class:"top-radioGroup_circle"},O=["value","disabled"],z=e.defineComponent({__name:"radioGroup",props:e.mergeModels({modelValue:{},radiosProps:{},showIndicator:{type:Boolean},size:{default:"s"},isError:{type:Boolean}},{modelValue:{required:!0},modelModifiers:{}}),emits:e.mergeModels(["update:modelValue"],["update:modelValue"]),setup(d,{emit:s}){const t=e.useModel(d,"modelValue"),l=d,v=e.ref(null);e.watch(t,()=>{var u,m,p,n,f;(u=l.radiosProps)!=null&&u.some(a=>a.value===t.value)||(t.value=((p=(m=l.radiosProps)==null?void 0:m[0])==null?void 0:p.value)??""),(f=(n=v.value)==null?void 0:n.querySelector(".radioGroup_item-selected"))==null||f.scrollIntoView()},{immediate:!0});const y="radioGroup-"+Math.random();return(u,m)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"elRef",ref:v,class:e.normalizeClass({"top-radioGroup":!0,"top-scrollBarXHidding":!0,["top-size_"+u.size]:!!u.size,"top-error":u.isError})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.radiosProps,p=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass({"top-radioGroup_item-selected":p.value===t.value,"top-radioGroup_item":!0,"top-forms-focusable":!0,"top-disabled":p.disabled}),"data-top-icon":p.icon,onClick:n=>t.value=p.value},[e.createTextVNode(e.toDisplayString(p.title)+" ",1),u.showIndicator?(e.openBlock(),e.createElementBlock("span",G)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":m[0]||(m[0]=n=>t.value=n),name:y,type:"radio",class:e.normalizeClass({"top-unvisible":!0}),value:p.value,disabled:p.disabled},null,8,O),[[e.vModelRadio,t.value]])],10,D))),256))],2))}}),x={$style:{"top-scrollBarXHidding":"top-scrollBarXHidding","top-radioGroup":"top-radioGroup","top-radioGroup_item":"top-radioGroup_item","top-radioGroup_item-selected":"top-radioGroup_item-selected","top-radioGroup_circle":"top-radioGroup_circle","top-disabled":"top-disabled","top-error":"top-error"}},F=h._export_sfc(z,[["__cssModules",x]]),W=(d,s,t)=>{const l=e.ref([]),v=e.ref(!1);let y="",u;d&&!d.params.limit&&(d.params.limit=100);const m=async()=>{if(!d)return;let r,k;if(t&&(d.cache??=new Map,k=JSON.stringify(d.params),r=d.cache.get(k),r))return r;if(v.value=!0,r=await d.call(),v.value=!1,r.errors)return;if(!Array.isArray(r.result)){console.warn("В result ожидался массив");return}const g=r.result.findIndex(w=>w.id===void 0||w.name===void 0);if(g!==-1){console.warn(`В result[${g}] нет id или name`);return}return t&&d.cache.set(k,r),r},p=async()=>{if(!d)return;d.params.offset=0,d.params.search=y;const r=await m();r&&(u=r.nextOffset,l.value=r.result)},n=async()=>{if(!d||!u||v.value)return;d.params.offset=u,d.params.search=y;const r=await m();r&&(u=r.nextOffset,l.value=l.value.concat(r.result))},f=$.debounce(()=>p(),200);return{items:l,isLoading:v,loadAppend:n,setSearchTextAndLoad:(r,k=!0)=>{d&&(r.length<s||r===y&&l.value.length||(y=r,k?f():p()))}}},H={class:"top-selector2_itemMulti top-ellipsis"},U=e.defineComponent({__name:"itemMulti",props:{id:{},name:{}},emits:["delete"],setup(d){return(s,t)=>(e.openBlock(),e.createElementBlock("div",H,[e.createTextVNode(e.toDisplayString(s.name)+" ",1),e.createElementVNode("span",{class:"top-selector2_itemMultiDelete","data-top-icon":"",onClick:t[0]||(t[0]=l=>s.$emit("delete",s.id)),onMousedown:t[1]||(t[1]=e.withModifiers(()=>{},["stop"]))},null,32)]))}}),J={$style:{"top-selector2_itemMulti":"top-selector2_itemMulti","top-selector2_itemMultiDelete":"top-selector2_itemMultiDelete","top-selector2":"top-selector2","top-active":"top-active"}},X=h._export_sfc(U,[["__cssModules",J]]),Y={key:0,class:"top-selector2_activeItems"},j={key:1,class:"top-selector2_activeName top-ellipsis"},R=e.defineComponent({__name:"selector2",props:e.mergeModels({modelValue:{},items:{default:()=>[]},multiselect:{type:Boolean},disabled:{type:Boolean},size:{default:"s"},isError:{type:Boolean},apiRequest:{},minLength:{default:0},useCache:{type:Boolean},appendSearchToResult:{type:Boolean},appendAllValue:{type:Boolean},addChanger:{type:Boolean},placeholder:{},showSelectedInInput:{type:Boolean,default:!0}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(d){const s=d,t=e.useModel(d,"modelValue"),l=e.ref(""),v={id:0,name:"Все"},y=e.ref(null),u=()=>{var o;return(o=y.value)==null?void 0:o.popup};window.__STORYBOOK_PREVIEW__&&!s.modelValue&&e.watch(()=>s.multiselect,()=>{t.value=s.multiselect?[]:{id:null,name:""}},{immediate:!0});const m=W(s.apiRequest,s.minLength,s.useCache),p=e.computed(()=>{const o=[];return!s.multiselect&&s.appendAllValue&&o.push(v),s.items.forEach(c=>o.push({...c})),o}),n=(o,c=!0)=>c&&o.id===null?Array.isArray(t.value)?t.value.some(i=>i.id===o.id&&i.name===o.name):o.name===t.value.name:Array.isArray(t.value)?t.value.some(i=>i.id===o.id):o.id===t.value.id,f=e.computed(()=>{const o=l.value.toLowerCase(),c=_.invertKeyboardLayout(o);let i=[];return p.value.forEach(B=>{const A=B.name.toLowerCase();(B.id===Number(o)||A.includes(o)||A.includes(c))&&(A===o||A===c?i.unshift(B):i.push(B))}),i.push(...m.items.value),s.appendSearchToResult&&l.value&&(!i.length||i[0].name.toLowerCase()!==o)&&i.push({id:null,name:l.value}),s.multiselect&&(i=i.filter(B=>!n(B))),i}),a=async o=>{var c,i;if(s.multiselect){if(!Array.isArray(t.value)||n(o))return;const B=[...t.value];B.push({...o}),t.value=B,h.Core.state.isMobile?(c=u())==null||c.close():setTimeout(()=>{var A,b;(A=u())==null||A.recalcPosition(),(b=u())==null||b.elPopupWidget.querySelector("input").focus(),l.value&&(f.value.length||(l.value="",m.items.value=[]))})}else l.value&&(l.value="",m.items.value=[]),JSON.stringify(o)!==JSON.stringify(t.value)&&(t.value={...o}),(i=u())==null||i.close()},r=()=>{if(!Array.isArray(t.value)){const c=(p.value.findIndex(i=>i.id===t.value.id)+1)%p.value.length;t.value={...p.value[c]}}},k=async o=>{Array.isArray(t.value)&&(t.value=t.value.filter(c=>c.id!==o),setTimeout(()=>{var c;(c=u())==null||c.recalcPosition()}))},g=e.ref(!1);s.apiRequest&&(e.watch(g,()=>{g.value&&m.setSearchTextAndLoad(l.value,!1)}),e.watch(l,()=>m.setSearchTextAndLoad(l.value)));const w=o=>{const c=o.target;c.scrollTop/(c.scrollHeight-c.offsetHeight)>.8&&m.loadAppend()};return(o,c)=>(e.openBlock(),e.createBlock(e.unref(C._sfc_main),{ref_key:"popupRef",ref:y,onOpen:c[1]||(c[1]=i=>g.value=!0),onClose:c[2]||(c[2]=i=>g.value=!1),onScrollContentList:c[3]||(c[3]=i=>o.apiRequest?w(i):void 0),notch:!1,transitionDuration:0},{opener:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass({"top-selector2":!0,"top-selector2-multiselect":o.multiselect,["top-size_"+o.size]:!0,"top-disabled":o.disabled,"top-forms-focusable":!o.disabled,"top-error":o.isError})},[o.multiselect?(e.openBlock(),e.createElementBlock("div",Y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,i=>(e.openBlock(),e.createBlock(X,{id:i.id,name:i.name,onDelete:k},null,8,["id","name"]))),256))])):e.createCommentVNode("",!0),o.multiselect?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",j,e.toDisplayString(Array.isArray(t.value)?"":t.value.name),1)),o.addChanger&&!o.multiselect&&p.value.length>1&&!o.disabled?(e.openBlock(),e.createElementBlock("span",{key:2,class:"top-changer top-changer-selector",onClick:e.withModifiers(r,["stop"])})):e.createCommentVNode("",!0)],2)]),widget:e.withCtx(()=>[e.createVNode(e.unref(M.PopupWidgetInput),{title:"Поиск",icon:"",modelValue:l.value,"onUpdate:modelValue":c[0]||(c[0]=i=>l.value=i),isLoading:e.unref(m).isLoading.value,placeholder:!Array.isArray(t.value)&&!o.multiselect&&o.showSelectedInInput?t.value.name:o.placeholder},null,8,["modelValue","isLoading","placeholder"])]),contentList:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,i=>(e.openBlock(),e.createBlock(e.unref(C._sfc_main$2),{class:e.normalizeClass({"top-active":!Array.isArray(t.value)&&!o.multiselect&&t.value.name===i.name}),key:i.id??void 0,onClick:e.withModifiers(B=>a(i),["stop"])},{default:e.withCtx(()=>[o.$slots.item?e.renderSlot(o.$slots,"item",{key:0,item:i}):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(i.name),1)],64))]),_:2},1032,["class","onClick"]))),128)),f.value.length?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(C._sfc_main$2),{key:0,type:"regular"},{default:e.withCtx(()=>[e.createTextVNode(" Нет результатов ")]),_:1}))]),_:3},512))}}),Q={$style:{"top-selector2":"top-selector2","top-selector2-multiselect":"top-selector2-multiselect","top-active":"top-active","top-selector2_activeItems":"top-selector2_activeItems","top-selector2_activeName":"top-selector2_activeName","top-changer-selector":"top-changer-selector"}},Z=h._export_sfc(R,[["__cssModules",Q]]),q=e.defineComponent({__name:"menu",props:e.mergeModels({modelValue:{},items:{},isMultiple:{type:Boolean},canBeEmptyMultiple:{type:Boolean},styling:{default:"default"},selectAllItem:{}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(d){const s=d,t=e.useModel(d,"modelValue"),l=e.ref();!s.isMultiple&&!(typeof t.value=="string"||t.value instanceof String)&&console.warn('Type check failed for prop "modelValue". Expected String: '+typeof t.value),s.isMultiple&&!Array.isArray(t.value)&&console.warn('Type check failed for prop "modelValue". Expected Array: '+typeof t.value),s.isMultiple&&!s.canBeEmptyMultiple&&Array.isArray(t.value)&&!t.value.length&&(t.value=[s.items[0].href??s.items[0].value]);const v=n=>Array.isArray(t.value)?t.value.includes(n.value):n.value===t.value,y=(n,f=!1)=>{if(Array.isArray(t.value)){let a=t.value.slice();if(f){a.length||(a=s.items.map(k=>k.value));const r=a.indexOf(n.value);r===-1?a.push(n.value):a.splice(r,1)}else a.length===1&&a[0]===n.value?a=[]:a=[n.value];!s.canBeEmptyMultiple&&!a.length&&(a=[n.value]),t.value=a;return}t.value=n.value},u=n=>{if(l.value.scrollWidth<=l.value.offsetWidth||n.shiftKey||Math.abs(n.deltaY)<50)return;n.preventDefault();const f=n.deltaY>0?30:-30;l.value.scrollLeft=l.value.scrollLeft+f},m=(n=!0)=>{var c,i;const f=l.value.querySelector(".top-active");if(!f)return;const a=24,r=f.offsetLeft-l.value.offsetLeft-a,k=f.offsetLeft-l.value.offsetLeft+f.clientWidth+a,g=l.value.scrollLeft,w=l.value.clientWidth+l.value.scrollLeft;let o=null;r<g&&(o=r),k>w&&(o=k-l.value.clientWidth),o!==null&&(h.isSafari()?(i=(c=h.Core).$)==null||i.call(c,l.value).animate({scrollLeft:o},n?200:0):l.value.scrollTo({left:o,behavior:n?"smooth":"auto"}))},p=()=>{if(Array.isArray(t.value)){if(t.value.length===s.items.length){t.value=[s.items[0].href??s.items[0].value];return}t.value=s.items.map(n=>n.href??n.value)}};return e.onMounted(()=>m(!1)),e.onUpdated(()=>m(!0)),(n,f)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"el",ref:l,class:e.normalizeClass({"top-menu":!0,["top-style_"+n.styling]:!0,"top-unwrap-x":n.styling==="default"}),onWheel:u},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.items,a=>(e.openBlock(),e.createBlock(e.unref(h.Button),e.mergeProps({ref_for:!0},a,{class:"top-menu_item",color:"theme",styling:"",onClick:r=>y(a,r.ctrlKey),isActive:v(a)}),e.createSlots({_:2},[a.content?{name:"default",fn:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.content),1)]),key:"0"}:void 0]),1040,["onClick","isActive"]))),256)),Array.isArray(t.value)&&n.selectAllItem?(e.openBlock(),e.createBlock(e.unref(h.Button),e.mergeProps({key:0},n.selectAllItem,{class:"top-menu_item",color:"theme",styling:"",onClick:f[0]||(f[0]=a=>p()),isActive:t.value.length===n.items.length}),e.createSlots({_:2},[n.selectAllItem.content?{name:"default",fn:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.selectAllItem.content),1)]),key:"0"}:void 0]),1040,["isActive"])):e.createCommentVNode("",!0)],34))}}),ee={$style:{"top-menu":"top-menu","top-menu_item":"top-menu_item","top-style_default":"top-style_default","top-active":"top-active","top-style_bar":"top-style_bar","top-unwrap-x":"top-unwrap-x"}},te=h._export_sfc(q,[["__cssModules",ee]]);V.EditArea=I,V.EditInput=P,V.Menu=te,V.RadioGroup=F,V.Selector2=Z,Object.defineProperty(V,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=formsExt.amd.js.map

package/formsExt/formsExt.amd.js.map

@@ -1 +1 @@
-{"version":3,"file":"formsExt.amd.js","sources":["../../src/components/formsExt/editArea/editArea.vue","../../src/components/formsExt/editInput/editInput.vue","../../src/components/formsExt/radioGroup/radioGroup.vue","../../src/components/formsExt/selector2/api.ts","../../src/components/formsExt/selector2/selector2.vue","../../src/components/formsExt/menu/menu.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, computed } from 'vue';\r\nimport Button from '@/components/forms/button/button.vue';\r\nimport type { Props, Emits } from './editArea';\r\nimport Textarea from '@/components/forms/textarea/textarea.vue';\r\n\r\n// TODO: добавить переменную top-forms-fixed-height и использовать ее при добавлении отступов у страницы\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcancelText: 'Отмена',\r\n\tsubmitText: 'Отправить',\r\n\texpandable: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst state = ref('');\r\n\r\n/**\r\n * Локальное значение modelValue, будет проброшено вверх только в случае отправки формы\r\n */\r\nconst localValue = ref(props.modelValue);\r\n\r\nwatch(toRef(props, 'modelValue'), () => {\r\n\tlocalValue.value = props.modelValue;\r\n});\r\n\r\nconst isChanged = computed(() => localValue.value !== props.modelValue);\r\n\r\nconst submit = (value: string) => {\r\n\temit('update:modelValue', value);\r\n};\r\n\r\nconst cancel = () => {\r\n\temit('cancel');\r\n\r\n\t// сброс введенного значения\r\n\tlocalValue.value = props.modelValue;\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:class=\"{\r\n\t\t\t'top-editArea': true,\r\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\r\n\t\t}\"\r\n\t>\r\n\t\t<div\r\n\t\t\tv-if=\"title\"\r\n\t\t\tclass=\"top-editArea_title\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</div>\r\n\r\n\t\t<div\r\n\t\t\t:class=\"{\r\n\t\t\t\t'top-editArea_form': true,\r\n\t\t\t\t'top-error': isError,\r\n\t\t\t\t'top-focus': state == 'focus',\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<Textarea\r\n\t\t\t\tv-model=\"localValue\"\r\n\t\t\t\t:name=\"name\"\r\n\t\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t\t:rows=\"rows\"\r\n\t\t\t\t:minHeight=\"minHeight\"\r\n\t\t\t\t:expandable=\"expandable\"\r\n\t\t\t\t:disabled=\"disabled\"\r\n\t\t\t\t:readonly=\"readonly\"\r\n\t\t\t\t:isError=\"isError\"\r\n\t\t\t\t:hint=\"hint\"\r\n\t\t\t\tclass=\"top-editArea_element\"\r\n\t\t\t\t@focus=\"state = 'focus'\"\r\n\t\t\t\t@blur=\"state = ''\"\r\n\t\t\t\t@keyup.esc=\"cancel\"\r\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\r\n\t\t\t/>\r\n\r\n\t\t\t<div class=\"top-editArea_footer\">\r\n\t\t\t\t<Button\r\n\t\t\t\t\tv-if=\"isChanged && (!attachToKeyboard || modelValue)\"\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\tcolor=\"theme\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"cancel\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : cancelText }}\r\n\t\t\t\t</Button>\r\n\r\n\t\t\t\t<Button\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"submit(localValue)\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : submitText }}\r\n\t\t\t\t</Button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n.top-editArea {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: 6px;\r\n}\r\n\r\n.top-editArea_title {\r\n\tfont-size: 12px;\r\n}\r\n\r\n.top-editArea_form {\r\n\tbackground: var(--top-forms-background-color);\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n\r\n.top-editArea_form:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n/* textarea в EditArea */\r\n.top-textarea {\r\n\twidth: 100%;\r\n}\r\n\r\n.top-editArea_element.top-textarea_textarea {\r\n\tborder: none;\r\n\toutline: none;\r\n\tanimation: none;\r\n}\r\n\r\n/* footer */\r\n.top-editArea_footer {\r\n\tpadding: var(--top-forms-padding);\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n\tgap: var(--top-forms-padding);\r\n}\r\n\r\n/* attachedToKeyboard */\r\n.top-editArea-attachedToKeyboard {\r\n\tbackground: var(--top-forms-background-color);\r\n\tmargin-bottom: env(keyboard-inset-height, 0);\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tright: 0;\r\n\tleft: 0;\r\n\tz-index: 2;\r\n\tgap: 0;\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_form {\r\n\tborder-radius: 0;\r\n\tborder: none;\r\n\tborder-top: 1px solid var(--top-forms-border-color);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_title {\r\n\tborder-top: 1px solid var(--color-line-2-opacity);\r\n\tpadding: var(--top-forms-padding);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\r\n\tborder-radius: 100%;\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { ref, toRef, watch } from 'vue';\r\nimport type { Props, Emits } from './editInput';\r\nimport Input from '@/components/forms/input/input.vue';\r\nimport Button from '@/components/forms/button/button.vue';\r\n\r\nconst props = defineProps<Props>();\r\n\r\nconst intermediateValue = ref(props.modelValue);\r\n\r\nwatch(toRef(props.modelValue), () => {\r\n\tintermediateValue.value = props.modelValue;\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst submit = () => {\r\n\temit('update:modelValue', intermediateValue.value);\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<div class=\"top-editInput\">\r\n\t\t<Input\r\n\t\t\t:=\"input\"\r\n\t\t\t@keydown.esc.capture.stop=\"intermediateValue = modelValue\"\r\n\t\t\t@keydown.enter.stop=\"submit\"\r\n\t\t\tv-model=\"intermediateValue\"\r\n\t\t/>\r\n\r\n\t\t<Button\r\n\t\t\tv-if=\"intermediateValue !== modelValue\"\r\n\t\t\ticon=\"\"\r\n\t\t\tstyling=\"soft\"\r\n\t\t\t:=\"button\"\r\n\t\t\t@click=\"submit\"\r\n\t\t>\r\n\t\t\t<!-- @slot Слот Button -->\r\n\t\t\t<slot></slot>\r\n\t\t</Button>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n.top-editInput {\r\n\twidth: 220px;\r\n\tflex-grow: 1;\r\n\tdisplay: flex;\r\n\talign-items: flex-end;\r\n\tgap: var(--top-gap-1);\r\n}\r\n\r\n.top-editInput .top-input {\r\n\twidth: unset;\r\n\tflex-grow: 1;\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport type { Ref } from '@vue/reactivity';\r\nimport { ref, watch } from 'vue';\r\nimport type { Props, Emits } from './radioGroup';\r\n\r\nconst model = defineModel<string>({\r\n\trequired: true,\r\n});\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tsize: 's',\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst elRef: Ref<HTMLElement|null> = ref(null);\r\n\r\nwatch(model, () => {\r\n\tif (!props.radiosProps?.some(item => item.value === model.value)) {\r\n\t\tmodel.value = props.radiosProps?.[0]?.value ?? '';\r\n\t}\r\n\r\n\telRef.value?.querySelector('.radioGroup_item-selected')?.scrollIntoView();\r\n}, { immediate: true });\r\n\r\nconst uid = 'radioGroup-' + Math.random();\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\tref=\"elRef\"\r\n\t\t:class=\"{\r\n\t\t\t['top-radioGroup']: true,\r\n\t\t\t['top-scrollBarXHidding']: true,\r\n\t\t\t['top-size_' + size]: !!size,\r\n\t\t\t['top-error']: isError,\r\n\t\t}\"\r\n\t>\r\n\t\t<label\r\n\t\t\tv-for=\"item of radiosProps\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-radioGroup_item-selected']: item.value === model,\r\n\t\t\t\t['top-radioGroup_item']: true,\r\n\t\t\t\t['top-forms-focusable']: true,\r\n\t\t\t\t['top-disabled']: item.disabled,\r\n\t\t\t}\"\r\n\t\t\t:data-top-icon=\"item.icon\"\r\n\t\t\t@click=\"model = item.value\"\r\n\t\t>\r\n\t\t\t{{ item.title }}\r\n\r\n\t\t\t<span\r\n\t\t\t\tv-if=\"showIndicator\"\r\n\t\t\t\tclass=\"top-radioGroup_circle\"\r\n\t\t\t></span>\r\n\r\n\t\t\t<!-- Для нативной навигации -->\r\n\t\t\t<input\r\n\t\t\t\tv-model=\"model\"\r\n\t\t\t\t:name=\"uid\"\r\n\t\t\t\ttype=\"radio\"\r\n\t\t\t\t:class=\"{\r\n\t\t\t\t\t['top-unvisible']: true,\r\n\t\t\t\t}\"\r\n\t\t\t\t:value=\"item.value\"\r\n\t\t\t\t:disabled=\"item.disabled\"\r\n\t\t\t/>\r\n\t\t</label>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n@import \"./styles/top-scrollBar.css\";\r\n\r\n.top-radioGroup {\r\n\tuser-select: none;\r\n\tbox-sizing: border-box;\r\n\tborder-radius: 8px;\r\n\tbackground-color: var(--color-theme-50);\r\n\theight: var(--top-forms-base-height);\r\n\tpadding: 2px;\r\n\tgap: 2px;\r\n\tdisplay: flex;\r\n\talign-items: flex-start;\r\n}\r\n\r\n.top-radioGroup_item {\r\n\tcursor: pointer;\r\n\tbox-sizing: border-box;\r\n\tborder-radius: 6px;\r\n\theight: calc(var(--top-forms-base-height) - 4px);\r\n\tpadding: 0 16px;\r\n\tfont-weight: 600;\r\n\twhite-space: nowrap;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tflex-grow: 1;\r\n\tgap: 4px;\r\n}\r\n\r\n.top-radioGroup_item:hover {\r\n\tbackground-color: var(--color-theme-25);\r\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\r\n}\r\n\r\n/* selected */\r\n.top-radioGroup_item-selected {\r\n\tpointer-events: none;\r\n\tbackground-color: var(--color-bg-3);\r\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\r\n}\r\n\r\n/* circle */\r\n.top-radioGroup_circle {\r\n\tcontent: \"\";\r\n\tbox-sizing: border-box;\r\n\tborder: 1px solid var(--color-line-3-opacity);\r\n\tborder-radius: 50%;\r\n\tpadding: 3px;\r\n\tmargin-left: auto;\r\n\twidth: calc(var(--top-forms-option-height) - 3px * 2);\r\n\theight: calc(var(--top-forms-option-height) - 3px * 2);\r\n}\r\n\r\n.top-radioGroup_item:hover .top-radioGroup_circle:before {\r\n\tborder-color: var(--color-primary);\r\n}\r\n\r\n/* circle selected */\r\n.top-radioGroup_item-selected .top-radioGroup_circle {\r\n\tborder-color: var(--color-primary);\r\n\tborder-width: 5px;\r\n}\r\n\r\n.top-radioGroup_item-selected:hover .top-radioGroup_circle {\r\n\tborder-color: var(--color-primary-2);\r\n}\r\n\r\n/* top-disabled */\r\n.top-radioGroup_item.top-disabled {\r\n\t--top-icon-color: var(--color-text-3);\r\n\r\n\tcolor: var(--color-text-3);\r\n}\r\n\r\n.top-radioGroup_item.top-disabled .top-radioGroup_circle {\r\n\tborder-color: var(--color-theme-400);\r\n\tbackground-color: var(--color-theme-50);\r\n}\r\n\r\n/* top-error  */\r\n.top-radioGroup.top-error .top-radioGroup_item:not(.top-disabled) .top-radioGroup_circle {\r\n\tborder-color: var(--color-negative);\r\n}\r\n</style>","import type { Ref } from 'vue';\r\nimport { ref } from 'vue';\r\nimport { debounce } from 'lodash';\r\nimport type { Item, Props } from './selector2';\r\n\r\nexport const useAPI = (apiRequest: Props['apiRequest'], minLength: number, useCache: Props['useCache']) => {\r\n\t/**\r\n\t * Список, полученный через API\r\n\t */\r\n\tconst items: Ref<Array<Item>> = ref([]);\r\n\r\n\t/**\r\n\t * Флаг - идет загрузка\r\n\t */\r\n\tconst isLoading = ref(false);\r\n\r\n\tlet _searchText = '';\r\n\tlet _nextOffset: number | undefined;\r\n\r\n\tif (apiRequest && !apiRequest.params.limit) {\r\n\t\tapiRequest.params.limit = 100;\r\n\t}\r\n\r\n\t/**\r\n\t * Выполнить обращение к API\r\n\t *\r\n\t * При ошибке вернет undefined\r\n\t */\r\n\tconst callAPIRequest = async (): Promise<{ nextOffset?: number, result: Array<Item> } | undefined> => {\r\n\t\tif (!apiRequest) return;\r\n\r\n\t\tlet res;\r\n\t\tlet cacheKey;\r\n\r\n\t\tif (useCache) {\r\n\t\t\t// кэш для полученных ответов через apiRequest\r\n\t\t\t// общий для всех компонентов, использующих apiRequest\r\n\t\t\tapiRequest.cache ??= new Map();\r\n\r\n\t\t\tcacheKey = JSON.stringify(apiRequest.params);\r\n\t\t\tres = apiRequest.cache.get(cacheKey);\r\n\r\n\t\t\tif (res) {\r\n\t\t\t\treturn res;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tisLoading.value = true;\r\n\t\tres = await apiRequest.call();\r\n\t\tisLoading.value = false;\r\n\r\n\t\tif (res.errors) return;\r\n\r\n\t\tif (!Array.isArray(res.result)) {\r\n\t\t\tconsole.warn(`В result ожидался массив`);\r\n\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst indexWithError = (res.result as Array<Item | any>).findIndex(item => item.id === undefined || item.name === undefined);\r\n\t\tif (indexWithError !== -1) {\r\n\t\t\tconsole.warn(`В result[${indexWithError}] нет id или name`);\r\n\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (useCache) {\r\n\t\t\tapiRequest.cache.set(cacheKey as string, res);\r\n\t\t}\r\n\r\n\t\treturn res;\r\n\t};\r\n\r\n\t/**\r\n\t * Загрузить items\r\n\t */\r\n\tconst load = async () => {\r\n\t\tif (!apiRequest) return;\r\n\r\n\t\tapiRequest.params.offset = 0;\r\n\t\tapiRequest.params.search = _searchText;\r\n\r\n\t\tconst res = await callAPIRequest();\r\n\t\tif (!res) return;\r\n\r\n\t\t_nextOffset = res.nextOffset;\r\n\r\n\t\titems.value = res.result;\r\n\t};\r\n\r\n\t/**\r\n\t * Загрузить следующую страницу items\r\n\t */\r\n\tconst loadAppend = async () => {\r\n\t\tif (!apiRequest) return;\r\n\r\n\t\t// данных о следующих страницах не обнаружено\r\n\t\tif (!_nextOffset) return;\r\n\r\n\t\t// дозагружать нельзя, если не завершена предыдущшая загрузка\r\n\t\tif (isLoading.value) return;\r\n\r\n\t\tapiRequest.params.offset = _nextOffset;\r\n\t\tapiRequest.params.search = _searchText;\r\n\r\n\t\tconst res = await callAPIRequest();\r\n\t\tif (!res) return;\r\n\r\n\t\t_nextOffset = res.nextOffset;\r\n\r\n\t\titems.value = items.value.concat(res.result);\r\n\t};\r\n\r\n\tconst loadDebounce = debounce(() => load(), 200);\r\n\r\n\t/**\r\n\t * Выполнить поиск по указанному тексту\r\n\t *\r\n\t * Если длина текста меньше minLength, поиск не будет проивзеден\r\n\t *\r\n\t * Если текст не изменился, поиск не будет проивзеден\r\n\t * @param searchText - текст поиска\r\n\t * @param useDebounce - отложенное выполнение поиска\r\n\t */\r\n\tconst setSearchTextAndLoad = (searchText: string, useDebounce = true) => {\r\n\t\tif (!apiRequest) return;\r\n\r\n\t\tif (searchText.length < minLength) return;\r\n\r\n\t\t// условия поиска не поменялись, данные загружены\r\n\t\tif (searchText === _searchText && items.value.length) return;\r\n\r\n\t\t_searchText = searchText;\r\n\r\n\t\tif (useDebounce) {\r\n\t\t\tloadDebounce();\r\n\t\t} else {\r\n\t\t\tvoid load();\r\n\t\t}\r\n\t};\r\n\r\n\treturn {\r\n\t\titems,\r\n\t\tisLoading,\r\n\t\tloadAppend,\r\n\t\tsetSearchTextAndLoad,\r\n\t};\r\n};","<script setup lang=\"ts\">\r\nimport type { Ref, ComputedRef, ModelRef, ComponentInstance } from 'vue';\r\nimport { computed, ref, watch } from 'vue';\r\nimport Core from '@/core/core/core';\r\nimport { invertKeyboardLayout } from '@/core/utils/keyboard';\r\nimport { Loadbar } from '@/components/forms/forms';\r\nimport { Popup, PopupListItem, PopupWidgetInput } from '@/components/popup/popup';\r\nimport type PopupClass from '@/components/popup/lib/popup';\r\nimport type { Item, Props, Slots } from './selector2';\r\nimport { useAPI } from './api';\r\nimport Selector2ItemMulti from './itemMulti.vue';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\titems: () => [] as Array<Item>,\r\n\tsize: 's',\r\n\tminLength: 0,\r\n\tshowSelectedInInput: true,\r\n});\r\n\r\nconst model = defineModel<Props['modelValue']>() as ModelRef<Props['modelValue']>;\r\n\r\ndefineSlots<Slots>();\r\n\r\n/**\r\n * Текст поиска по результатам\r\n */\r\nconst searchText = ref('');\r\n\r\nconst itemAll = {\r\n\tid: 0,\r\n\tname: 'Все',\r\n};\r\n\r\n/**\r\n * Экземпляр компонента Popup\r\n */\r\nconst popupRef: Ref<ComponentInstance<typeof Popup> | null> = ref(null);\r\n\r\n/**\r\n * Получить доступ к объекту popup\r\n */\r\nconst getPopup = (): PopupClass | undefined => {\r\n\treturn popupRef.value?.popup;\r\n};\r\n\r\n// для storybook\r\nif ((window as any).__STORYBOOK_PREVIEW__ && !props.modelValue) {\r\n\twatch(\r\n\t\t() => props.multiselect,\r\n\t\t() => {\r\n\t\t\tmodel.value = props.multiselect ? [] : { id: null, name: '' };\r\n\t\t},\r\n\t\t{ immediate: true },\r\n\t);\r\n}\r\n\r\nconst API = useAPI(props.apiRequest, props.minLength, props.useCache);\r\n\r\n/**\r\n * Варианты выбора: props.items + \"Выбрать все\"\r\n */\r\nconst localItems: ComputedRef<Array<Item>> = computed(() => {\r\n\tconst items = [];\r\n\r\n\tif (!props.multiselect && props.appendAllValue) {\r\n\t\titems.push(itemAll);\r\n\t}\r\n\r\n\tprops.items.forEach(item => items.push({ ...item }));\r\n\r\n\treturn items;\r\n});\r\n\r\n/**\r\n * Проверить, что элемент выбран\r\n */\r\nconst isSelected = (item: Item, checkNameForNullId = true) => {\r\n\tif (checkNameForNullId && item.id === null) {\r\n\t\tif (Array.isArray(model.value)) {\r\n\t\t\treturn model.value.some(itemSelected => itemSelected.id === item.id && itemSelected.name === item.name);\r\n\t\t} else {\r\n\t\t\treturn item.name === model.value.name;\r\n\t\t}\r\n\t}\r\n\r\n\tif (Array.isArray(model.value)) {\r\n\t\treturn model.value.some(itemSelected => itemSelected.id === item.id);\r\n\t} else {\r\n\t\treturn item.id === model.value.id;\r\n\t}\r\n};\r\n\r\n/**\r\n * Варианты выбора, которые выводятся\r\n */\r\nconst itemsForShow = computed(() => {\r\n\tconst searchString = searchText.value.toLowerCase();\r\n\tconst searchStringInvertKeyboard = invertKeyboardLayout(searchString);\r\n\r\n\tlet items: typeof localItems.value = [];\r\n\r\n\tlocalItems.value.forEach((item) => {\r\n\t\tconst itemName = item.name.toLowerCase();\r\n\r\n\t\tif (\r\n\t\t\titem.id === Number(searchString) ||\r\n\t\t\titemName.includes(searchString) ||\r\n\t\t\titemName.includes(searchStringInvertKeyboard)\r\n\t\t) {\r\n\t\t\tif (itemName === searchString || itemName === searchStringInvertKeyboard) {\r\n\t\t\t\titems.unshift(item);\r\n\t\t\t} else {\r\n\t\t\t\titems.push(item);\r\n\t\t\t}\r\n\t\t}\r\n\t});\r\n\r\n\titems.push(...API.items.value);\r\n\r\n\tif (\r\n\t\tprops.appendSearchToResult &&\r\n\t\t!!searchText.value &&\r\n\t\t(!items.length || items[0].name.toLowerCase() !== searchString)\r\n\t) {\r\n\t\titems.push({\r\n\t\t\tid: null,\r\n\t\t\tname: searchText.value,\r\n\t\t});\r\n\t}\r\n\r\n\tif (props.multiselect) {\r\n\t\titems = items.filter(item => !isSelected(item));\r\n\t}\r\n\r\n\treturn items;\r\n});\r\n\r\n/**\r\n * Выбрать значение\r\n *\r\n * Управляет закрытием окна\r\n */\r\nconst selectItem = async (item: Item) => {\r\n\tif (props.multiselect) {\r\n\t\tif (!Array.isArray(model.value)) return;\r\n\r\n\t\tif (isSelected(item)) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst newModel = [...model.value];\r\n\t\tnewModel.push({ ...item });\r\n\t\tmodel.value = newModel;\r\n\r\n\t\tif (Core.state.isMobile) {\r\n\t\t\tgetPopup()?.close();\r\n\t\t} else {\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tgetPopup()?.recalcPosition();\r\n\t\t\t\tgetPopup()?.elPopupWidget.querySelector('input').focus();\r\n\r\n\t\t\t\t// сбросить введенный текст, только если больше не найдено результатов\r\n\t\t\t\tif (searchText.value) {\r\n\t\t\t\t\tif (!itemsForShow.value.length) {\r\n\t\t\t\t\t\tsearchText.value = '';\r\n\t\t\t\t\t\tAPI.items.value = [];\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}\r\n\t} else {\r\n\t\t// сбросить введенный текст\r\n\t\tif (searchText.value) {\r\n\t\t\tsearchText.value = '';\r\n\t\t\tAPI.items.value = [];\r\n\t\t}\r\n\r\n\t\tif (JSON.stringify(item) !== JSON.stringify(model.value)) {\r\n\t\t\tmodel.value = { ...item };\r\n\t\t}\r\n\r\n\t\tgetPopup()?.close();\r\n\t}\r\n};\r\n\r\n/**\r\n * Выбрать следующее значение\r\n */\r\nconst selectNextItem = () => {\r\n\tif (!Array.isArray(model.value)) {\r\n\t\tconst currentIndex = localItems.value.findIndex(item => item.id === (model.value as Item).id);\r\n\t\tconst nextIndex = (currentIndex + 1) % localItems.value.length;\r\n\t\tmodel.value = { ...localItems.value[nextIndex] };\r\n\t}\r\n};\r\n\r\n/**\r\n * Удалить выбранное значение по id\r\n * @param id\r\n */\r\nconst deleteItemById = async (id: Item['id']) => {\r\n\tif (Array.isArray(model.value)) {\r\n\t\tmodel.value = model.value.filter(item => item.id !== id);\r\n\r\n\t\tsetTimeout(() => {\r\n\t\t\tgetPopup()?.recalcPosition();\r\n\t\t});\r\n\t}\r\n};\r\n\r\nconst isOpened = ref(false); // флаг попап открыт\r\n\r\nif (props.apiRequest) {\r\n\twatch(isOpened, () => {\r\n\t\tif (isOpened.value) {\r\n\t\t\t// при открытии сразу выполнить поиск\r\n\t\t\tAPI.setSearchTextAndLoad(searchText.value, false);\r\n\t\t}\r\n\t});\r\n\r\n\t// отложенный поиск при вводе текста\r\n\twatch(searchText, () => API.setSearchTextAndLoad(searchText.value));\r\n}\r\n\r\nconst onScrollContentList = (e: Event) => {\r\n\tconst el = e.target as HTMLElement;\r\n\r\n\tif (el.scrollTop / (el.scrollHeight - el.offsetHeight) > 0.8) {\r\n\t\tAPI.loadAppend();\r\n\t}\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<Popup\r\n\t\tref=\"popupRef\"\r\n\t\t@open=\"isOpened = true\"\r\n\t\t@close=\"isOpened = false\"\r\n\t\t@scrollContentList=\"apiRequest ? onScrollContentList($event) : undefined\"\r\n\t\t:notch=\"false\"\r\n\t\t:transitionDuration=\"0\"\r\n\t>\r\n\t\t<template #opener>\r\n\t\t\t<div\r\n\t\t\t\t:class=\"{\r\n\t\t\t\t\t'top-selector2' : true,\r\n\t\t\t\t\t'top-selector2-multiselect': multiselect,\r\n\t\t\t\t\t['top-size_' + size]: true,\r\n\t\t\t\t\t['top-disabled']: disabled,\r\n\t\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t\t['top-error']: isError,\r\n\t\t\t\t}\"\r\n\t\t\t>\r\n\t\t\t\t<template v-if=\"multiselect\">\r\n\t\t\t\t\t<div class=\"top-selector2_activeItems\">\r\n\t\t\t\t\t\t<Selector2ItemMulti\r\n\t\t\t\t\t\t\tv-for=\"item of model as Array<Item>\"\r\n\t\t\t\t\t\t\t:id=\"item.id\"\r\n\t\t\t\t\t\t\t:name=\"item.name\"\r\n\t\t\t\t\t\t\t@delete=\"deleteItemById\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</template>\r\n\r\n\t\t\t\t<span v-if=\"!multiselect\" class=\"top-selector2_activeName top-ellipsis\">\r\n\t\t\t\t\t{{ !Array.isArray(model) ? model.name : '' }}\r\n\t\t\t\t</span>\r\n\r\n\t\t\t\t<span\r\n\t\t\t\t\tv-if=\"addChanger && !multiselect && localItems.length > 1 && !disabled\"\r\n\t\t\t\t\tclass=\"top-changer top-changer-selector\"\r\n\t\t\t\t\t@click.stop=\"selectNextItem\"\r\n\t\t\t\t></span>\r\n\t\t\t</div>\r\n\t\t</template>\r\n\r\n\t\t<template #widget>\r\n\t\t\t<PopupWidgetInput\r\n\t\t\t\ttitle=\"Поиск\"\r\n\t\t\t\ticon=\"\"\r\n\t\t\t\tv-model=\"searchText\"\r\n\t\t\t\t:isLoading=\"API.isLoading.value\"\r\n\t\t\t\t:placeholder=\"!Array.isArray(model) && !multiselect && showSelectedInInput ? model.name : placeholder\"\r\n\t\t\t/>\r\n\t\t</template>\r\n\r\n\t\t<template #contentList>\r\n\t\t\t<PopupListItem\r\n\t\t\t\tv-for=\"item of itemsForShow\"\r\n\t\t\t\t:class=\"{\r\n\t\t\t\t\t'top-active': !Array.isArray(model) && !multiselect && model.name === item.name\r\n\t\t\t\t}\"\r\n\t\t\t\t:key=\"item.id ?? undefined\"\r\n\t\t\t\t@click.stop=\"selectItem(item)\"\r\n\t\t\t>\r\n\t\t\t\t<slot\r\n\t\t\t\t\tv-if=\"$slots.item\"\r\n\t\t\t\t\tname=\"item\"\r\n\t\t\t\t\t:item=\"item\"\r\n\t\t\t\t></slot>\r\n\r\n\t\t\t\t<template\r\n\t\t\t\t\tv-else\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ item.name }}\r\n\t\t\t\t</template>\r\n\t\t\t</PopupListItem>\r\n\r\n\t\t\t<PopupListItem\r\n\t\t\t\tv-if=\"!itemsForShow.length\"\r\n\t\t\t\ttype=\"regular\"\r\n\t\t\t>\r\n\t\t\t\tНет результатов\r\n\t\t\t</PopupListItem>\r\n\t\t</template>\r\n\t</Popup>\r\n</template>\r\n\r\n<style module>\r\n.top-selector2 {\r\n\twidth: 180px;\r\n\tmin-height: var(--top-forms-base-height);\r\n\tbox-sizing: border-box;\r\n\tposition: relative;\r\n\tdisplay: flex;\r\n\toverflow: hidden;\r\n\tpadding: var(--top-padding-1) var(--top-forms-padding);\r\n\tcolor: var(--top-forms-placeholder-color);\r\n\r\n\tborder-radius: var(--top-radius-2);\r\n\tborder: 1px solid var(--top-forms-border-color);\r\n\tbackground: var(--top-forms-background-color);\r\n}\r\n\r\n.top-selector2-multiselect {\r\n\twidth: unset;\r\n\tmin-width: 180px;\r\n\tpadding: var(--top-padding-1);\r\n}\r\n\r\n.top-selector2.top-active {\r\n\t--top-forms-border-color: var(--top-forms-border-color-hover);\r\n\t--top-forms-background-color: var(--top-forms-background-color-hover);\r\n}\r\n\r\n.top-selector2_activeItems {\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\tgap: var(--top-padding-1);\r\n\tmax-width: 100%;\r\n}\r\n\r\n.top-selector2_activeName {\r\n\twhite-space: nowrap;\r\n}\r\n\r\n.top-changer-selector {\r\n\ttransform: translateX(-16px);\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { ref, onMounted, onUpdated } from 'vue';\r\nimport type { Props, Item } from './menu';\r\nimport Core from '@/core/core/core';\r\nimport { isSafari } from '@/core/utils/device';\r\nimport { Button } from '@/components/forms/forms';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tstyling: 'default',\r\n});\r\n\r\nconst model = defineModel({\r\n\trequired: true,\r\n});\r\n\r\nconst el = ref();\r\n\r\n// валидация типа modelValue без возможности выбора нескольких значений (ожидается строка)\r\nif (!props.isMultiple && !(typeof (model.value) === 'string' || model.value instanceof String)) {\r\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected String: ' + typeof (model.value));\r\n}\r\n\r\n// валидация типа modelValue с возможностью выбора нескольких значений (ожидается массив)\r\nif (props.isMultiple && !Array.isArray(model.value)) {\r\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected Array: ' + typeof (model.value));\r\n}\r\n\r\n// для множественного выбора без пустого множества\r\n// если ничего не выбрано, присваиваем 1-ое значение\r\nif (props.isMultiple && !props.canBeEmptyMultiple && Array.isArray(model.value) && !model.value.length) {\r\n\tmodel.value = [props.items[0].href ?? props.items[0].value];\r\n}\r\n\r\nconst itemIsActive = (item: Item) => {\r\n\tif (!Array.isArray(model.value)) {\r\n\t\treturn item.value === model.value;\r\n\t}\r\n\r\n\treturn model.value.includes(item.value);\r\n};\r\n\r\n/**\r\n * Выбрать элемент\r\n * @param item\r\n * @param toggle - добавить или исключить элемент, для isMultiple\r\n */\r\nconst select = (item: Item, toggle = false) => {\r\n\tif (Array.isArray(model.value)) {\r\n\t\tlet modelNew = model.value.slice();\r\n\r\n\t\tif (toggle) {\r\n\t\t\tif (!modelNew.length) modelNew = props.items.map(item => item.value);\r\n\r\n\t\t\tconst index = modelNew.indexOf(item.value);\r\n\t\t\tif (index === -1) {\r\n\t\t\t\tmodelNew.push(item.value);\r\n\t\t\t} else {\r\n\t\t\t\tmodelNew.splice(index, 1);\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tif (modelNew.length === 1 && modelNew[0] === item.value) {\r\n\t\t\t\tmodelNew = [];\r\n\t\t\t} else {\r\n\t\t\t\tmodelNew = [item.value];\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (!props.canBeEmptyMultiple && !modelNew.length) modelNew = [item.value];\r\n\r\n\t\tmodel.value = modelNew;\r\n\r\n\t\treturn;\r\n\t}\r\n\r\n\tmodel.value = item.value;\r\n};\r\n\r\n// вертикальный скролл в горизонтальный скролл\r\nconst onWheel = (event: WheelEvent) => {\r\n\tif (el.value.scrollWidth <= el.value.offsetWidth) return;\r\n\tif (event.shiftKey) return;\r\n\tif (Math.abs(event.deltaY) < 50) return; // устройство с высокой точностью, например тачпад\r\n\r\n\tevent.preventDefault();\r\n\r\n\tconst delta = event.deltaY > 0 ? 30 : -30;\r\n\tel.value.scrollLeft = el.value.scrollLeft + delta;\r\n};\r\n\r\n/**\r\n * Замена стандартному scrollIntoView, который меняет скролл документа\r\n *\r\n * Выравнивание по ближнему краю элемента\r\n *\r\n * Выравнивается таким образом, чтобы был виден соседний элемент\r\n */\r\nconst scrollIntoView = (isSmooth = true) => {\r\n\tconst elBtn = el.value.querySelector('.top-active');\r\n\tif (!elBtn) return;\r\n\r\n\tconst gap = 24;\r\n\r\n\t// левая и правая координаты элемента\r\n\tconst leftMargin = elBtn.offsetLeft - el.value.offsetLeft - gap;\r\n\tconst rightMargin = elBtn.offsetLeft - el.value.offsetLeft + elBtn.clientWidth + gap;\r\n\r\n\t// левая и правая границы видимой части меню\r\n\tconst leftMarginParent = el.value.scrollLeft;\r\n\tconst rightMarginParent = el.value.clientWidth + el.value.scrollLeft;\r\n\r\n\tlet scrollLeft = null;\r\n\r\n\t// левую границу элемента к левой границе меню\r\n\tif (leftMargin < leftMarginParent) scrollLeft = leftMargin;\r\n\r\n\t// правую границу элемента к правой границе меню\r\n\tif (rightMargin > rightMarginParent) scrollLeft = rightMargin - el.value.clientWidth;\r\n\r\n\tif (scrollLeft !== null) {\r\n\t\tif (isSafari()) {\r\n\t\t\tCore.$?.(el.value).animate({ scrollLeft: scrollLeft }, isSmooth ? 200 : 0);\r\n\t\t} else {\r\n\t\t\tel.value.scrollTo({ left: scrollLeft, behavior: isSmooth ? 'smooth' : 'auto' });\r\n\t\t}\r\n\t}\r\n};\r\n\r\n/**\r\n * Выбрать все элементы в меню\r\n */\r\nconst selectAll = () => {\r\n\tif (!Array.isArray(model.value)) return;\r\n\r\n\tif (model.value.length === props.items.length) {\r\n\t\tmodel.value = [props.items[0].href ?? props.items[0].value];\r\n\t\treturn;\r\n\t}\r\n\r\n\tmodel.value = props.items.map(item => item.href ?? item.value);\r\n};\r\n\r\nonMounted(() => scrollIntoView(false));\r\nonUpdated(() => scrollIntoView(true));\r\n\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\tref=\"el\"\r\n\t\t:class=\"{\r\n\t\t\t'top-menu': true,\r\n\t\t\t['top-style_' + styling]: true,\r\n\t\t\t['top-unwrap-x']: styling === 'default',\r\n\t\t}\"\r\n\t\t@wheel=\"onWheel\"\r\n\t>\r\n\t\t<Button\r\n\t\t\tv-for=\"item in items\"\r\n\t\t\t:=\"item\"\r\n\t\t\tclass=\"top-menu_item\"\r\n\t\t\tcolor=\"theme\"\r\n\t\t\tstyling=\"\"\r\n\t\t\t@click=\"select(item, $event.ctrlKey)\"\r\n\t\t\t:isActive=\"itemIsActive(item)\"\r\n\t\t>\r\n\t\t\t<template #default v-if=\"item.content\">\r\n\t\t\t\t{{ item.content }}\r\n\t\t\t</template>\r\n\t\t</Button>\r\n\r\n\t\t<Button\r\n\t\t\tv-if=\"Array.isArray(model) && selectAllItem\"\r\n\t\t\t:=\"selectAllItem\"\r\n\t\t\tclass=\"top-menu_item\"\r\n\t\t\tcolor=\"theme\"\r\n\t\t\tstyling=\"\"\r\n\t\t\t@click=\"selectAll()\"\r\n\t\t\t:isActive=\"model.length === items.length\"\r\n\t\t>\r\n\t\t\t<template #default v-if=\"selectAllItem.content\">\r\n\t\t\t\t{{ selectAllItem.content }}\r\n\t\t\t</template>\r\n\t\t</Button>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n.top-menu {\r\n\t--scroll-thumb-color: var(--color-line-1-opacity);\r\n\t--scroll-thumb-color-hover: var(--color-line-2-opacity);\r\n\t--scroll-thumb-color-active: var(--color-line-2-opacity);\r\n\r\n\tmax-width: 100%;\r\n\tdisplay: flex;\r\n\talign-items: flex-start;\r\n\tgap: var(--top-gap-2);\r\n\toverflow-x: auto;\r\n\tscrollbar-width: none; /* firefox */\r\n\r\n\t/* предотвратить натинвые события браузера (назад / вперед) */\r\n\toverscroll-behavior-x: contain;\r\n}\r\n\r\n.top-menu::-webkit-scrollbar { display: none; }\r\n\r\n.top-menu > .top-menu_item {\r\n\t--top-button-color: var(--color-text-2);\r\n\r\n\toutline-offset: -2px !important;\r\n\tmin-width: 0;\r\n\tmargin: 0;\r\n\tflex-shrink: 0;\r\n}\r\n\r\n.top-menu > .top-menu_item[data-top-icon] {\r\n\t--top-icon-color: var(--color-text-2);\r\n}\r\n\r\n/* style default */\r\n.top-menu.top-style_default > .top-menu_item {\r\n\t--top-forms-radius: 0;\r\n\t--top-forms-border-color: transparent;\r\n\t--top-forms-border-width: 2px;\r\n\r\n\tfilter: none;\r\n\tbox-shadow: none;\r\n\tborder: none;\r\n\tborder-bottom: var(--top-forms-border-width) solid var(--top-forms-border-color);\r\n\tbackground: none;\r\n}\r\n\r\n.top-menu.top-style_default > .top-menu_item:hover {\r\n\t--top-icon-color: var(--color-text-1);\r\n\t--top-button-color: var(--color-text-1);\r\n\t--top-forms-border-color: var(--color-line-2-opacity);\r\n}\r\n\r\n.top-menu.top-style_default > .top-menu_item:active,\r\n.top-menu.top-style_default > .top-menu_item.top-active {\r\n\t--top-icon-color: var(--color-primary);\r\n\t--top-button-color: var(--color-text-1);\r\n\t--top-forms-border-color: var(--color-primary);\r\n}\r\n\r\n/* style bar */\r\n.top-menu.top-style_bar {\r\n\tborder-radius: var(--top-radius-3);\r\n\tborder: 1px solid var(--color-line-2-opacity);\r\n\tpadding: var(--top-padding-1);\r\n\tgap: 3px;\r\n}\r\n.top-menu.top-style_bar > .top-menu_item {\r\n\t--top-button-background-color-hover: var(--color-secondary-2-opacity);\r\n\t--top-button-background-color-active: var(--color-primary-light-opacity);\r\n\t--top-button-background-color-selected: var(--color-primary-light-opacity);\r\n\r\n\tposition: relative;\r\n}\r\n\r\n.top-menu.top-style_bar > .top-menu_item:hover {\r\n\t--top-icon-color: var(--color-text-1);\r\n\t--top-button-color: var(--color-text-1);\r\n}\r\n\r\n.top-menu.top-style_bar > .top-menu_item.top-active {\r\n\t--top-icon-color: var(--color-primary);\r\n\t--top-button-color: var(--color-primary);\r\n}\r\n\r\n/* разделители кнопок в баре */\r\n.top-menu.top-style_bar > .top-menu_item:not(:first-child):not(.top-active):not(:hover):after {\r\n\tcontent: \"\";\r\n\tbackground: var(--color-line-1-opacity);\r\n\twidth: 1px;\r\n\theight: 60%;\r\n\tdisplay: block;\r\n\tposition: absolute;\r\n\tleft: -2px;\r\n}\r\n.top-menu.top-style_bar > .top-menu_item.top-active + .top-menu_item:after,\r\n.top-menu.top-style_bar > .top-menu_item:hover + .top-menu_item:after {\r\n\tcontent: none !important;\r\n}\r\n\r\n/** TODO: .top-unwrap-x надо вынести глобально в UI или добавить в стили для storybook */\r\n.top-menu.top-unwrap-x {\r\n\tpadding-right: var(--top-unwrap-x);\r\n\tpadding-left: var(--top-unwrap-x);\r\n\tmargin-right: calc(0px - var(--top-unwrap-x));\r\n\tmargin-left: calc(0px - var(--top-unwrap-x));\r\n}\r\n</style>"],"names":["props","__props","emit","__emit","state","vue","localValue","isChanged","submit","value","intermediateValue","elRef","model","_a","item","_c","_b","items","isLoading","_searchText","apiRequest","res","indexWithError","callAPIRequest","_nextOffset","loadAppend","searchText","minLength","popupRef","API","useAPI","localItems","itemAll","itemSelected","itemsForShow","searchStringInvertKeyboard","utils_keyboard","searchString","isSelected","selectItem","newModel","forms","getPopup","nextIndex","deleteItemById","id","isOpened","onScrollContentList","e","el","itemIsActive","modelNew","item2","index","onWheel","event","delta","scrollIntoView","isSmooth","gap","leftMargin","elBtn","rightMargin","rightMarginParent","scrollLeft"],"mappings":"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"}
+{"version":3,"file":"formsExt.amd.js","sources":["../../src/components/formsExt/editArea/editArea.vue","../../src/components/formsExt/editInput/editInput.vue","../../src/components/formsExt/radioGroup/radioGroup.vue","../../src/components/formsExt/selector2/api.ts","../../src/components/formsExt/selector2/selector2.vue","../../src/components/formsExt/menu/menu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from 'vue';\nimport Button from '@/components/forms/button/button.vue';\nimport type { Props, Emits } from './editArea';\nimport Textarea from '@/components/forms/textarea/textarea.vue';\n\n// TODO: добавить переменную top-forms-fixed-height и использовать ее при добавлении отступов у страницы\n\nconst props = withDefaults(defineProps<Props>(), {\n\tdefaultValue: '',\n\tcancelText: 'Cancel',\n\tsubmitText: 'Send',\n\tcloseText: 'Close',\n\texpandable: true\n});\n\nconst emit = defineEmits<Emits>();\n\nconst localValue = ref(props.defaultValue);\n\nconst isFocused = ref(props.isFocused);\n\nconst isChanged = computed(() => localValue.value !== props.defaultValue);\n\nconst cancelBtnText = computed(() => {\n\tif (props.attachToKeyboard) return '';\n\n\tif (props.forceShowCloseBtn && !isChanged.value) return props.closeText;\n\n\treturn props.cancelText;\n});\n\nconst submit = (value: string) => {\n\temit('submit', value);\n\n\tlocalValue.value = props.defaultValue;\n};\n\nconst cancel = () => {\n\tif (props.forceShowCloseBtn && !isChanged.value) {\n\t\temit('close');\n\n\t\treturn;\n\t}\n\n\tlocalValue.value = props.defaultValue;\n};\n\nconst clickOnTitle = () => {\n\tif (props.attachToKeyboard) emit('clickOnTitle');\n};\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t'top-editArea': true,\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\n\t\t}\"\n\t>\n\t\t<div\n\t\t\tv-if=\"title\"\n\t\t\tclass=\"top-editArea_title\"\n\t\t\t@click=\"clickOnTitle()\"\n\t\t>\n\t\t\t{{ title }}\n\t\t</div>\n\n\t\t<div\n\t\t\t:class=\"{\n\t\t\t\t'top-editArea_form': true,\n\t\t\t\t'top-error': isError,\n\t\t\t\t'top-editArea_form-focus': isFocused,\n\t\t\t}\"\n\t\t>\n\t\t\t<Textarea\n\t\t\t\tv-focus=\"isFocused\"\n\t\t\t\tv-model=\"localValue\"\n\t\t\t\t:name=\"name\"\n\t\t\t\t:placeholder=\"placeholder\"\n\t\t\t\t:rows=\"rows\"\n\t\t\t\t:minHeight=\"minHeight\"\n\t\t\t\t:expandable=\"expandable\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:readonly=\"readonly\"\n\t\t\t\t:isError=\"isError\"\n\t\t\t\t:hint=\"hint\"\n\t\t\t\tclass=\"top-editArea_element\"\n\t\t\t\t@focus=\"() => isFocused = true\"\n\t\t\t\t@blur=\"() => isFocused = false\"\n\t\t\t\t@keyup.esc=\"cancel\"\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\n\t\t\t/>\n\n\t\t\t<div class=\"top-editArea_footer\">\n\t\t\t\t<Button\n\t\t\t\t\tv-if=\"isChanged || forceShowCloseBtn\"\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\tcolor=\"theme\"\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\n\t\t\t\t\t@click=\"cancel\"\n\t\t\t\t>\n\t\t\t\t\t{{ cancelBtnText }}\n\t\t\t\t</Button>\n\n\t\t\t\t<Button\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\tv-if=\"isChanged\"\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\n\t\t\t\t\t@click=\"submit(localValue)\"\n\t\t\t\t>\n\t\t\t\t\t{{ attachToKeyboard ? '' : submitText }}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<style module>\n.top-editArea {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 6px;\n}\n\n.top-editArea_title {\n\tfont-size: 12px;\n}\n\n.top-editArea_form {\n\tbackground: var(--top-forms-background-color);\n\toutline-color: var(--color-theme-75);\n\toutline-offset: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.top-editArea_form-focus {\n\tborder-color: var(--color-primary);\n}\n\n.top-editArea_form:hover {\n\tbackground: var(--top-forms-background-color-hover);\n}\n\n/* textarea в EditArea */\n.top-textarea {\n\twidth: 100%;\n}\n\n.top-editArea_element.top-textarea_textarea {\n\tborder: none;\n\toutline: none;\n\tanimation: none;\n}\n\n/* footer */\n.top-editArea_footer {\n\tpadding: var(--top-forms-padding);\n\tdisplay: flex;\n\tmin-height: 32px;\n\tjustify-content: flex-end;\n\tgap: var(--top-forms-padding);\n}\n\n/* attachedToKeyboard */\n.top-editArea-attachedToKeyboard {\n\tbackground: var(--top-forms-background-color);\n\tmargin-bottom: env(keyboard-inset-height, 0);\n\tposition: fixed;\n\tbottom: 0;\n\tright: 0;\n\tleft: 0;\n\tz-index: 2;\n\tgap: 0;\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_form {\n\tborder-radius: 0;\n\tborder: none;\n\tborder-top: 1px solid var(--top-forms-border-color);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_title {\n\tcursor: pointer;\n\tborder-top: 1px solid var(--color-line-2-opacity);\n\tpadding: var(--top-forms-padding);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\n\tborder-radius: 100%;\n}\n\n.top-editArea-attachedToKeyboard .top-button.top-editArea_button {\n\tmin-width: auto;\n\tpadding: 0;\n}\n</style>","<script setup lang=\"ts\">\nimport { ref, toRef, watch } from 'vue';\nimport type { Props, Emits } from './editInput';\nimport Input from '@/components/forms/input/input.vue';\nimport Button from '@/components/forms/button/button.vue';\n\nconst props = defineProps<Props>();\n\nconst intermediateValue = ref(props.modelValue);\n\nwatch(toRef(props.modelValue), () => {\n\tintermediateValue.value = props.modelValue;\n});\n\nconst emit = defineEmits<Emits>();\n\nconst submit = () => {\n\temit('update:modelValue', intermediateValue.value);\n};\n</script>\n\n<template>\n\t<div class=\"top-editInput\">\n\t\t<Input\n\t\t\t:=\"input\"\n\t\t\t@keydown.esc.capture.stop=\"intermediateValue = modelValue\"\n\t\t\t@keydown.enter.stop=\"submit\"\n\t\t\tv-model=\"intermediateValue\"\n\t\t/>\n\n\t\t<Button\n\t\t\tv-if=\"intermediateValue !== modelValue\"\n\t\t\ticon=\"\"\n\t\t\tstyling=\"soft\"\n\t\t\t:=\"button\"\n\t\t\t@click=\"submit\"\n\t\t>\n\t\t\t<!-- @slot Слот Button -->\n\t\t\t<slot></slot>\n\t\t</Button>\n\t</div>\n</template>\n\n<style module>\n.top-editInput {\n\twidth: 220px;\n\tflex-grow: 1;\n\tdisplay: flex;\n\talign-items: flex-end;\n\tgap: var(--top-gap-1);\n}\n\n.top-editInput .top-input {\n\twidth: unset;\n\tflex-grow: 1;\n}\n</style>","<script setup lang=\"ts\">\nimport type { Ref } from '@vue/reactivity';\nimport { ref, watch } from 'vue';\nimport type { Props, Emits } from './radioGroup';\n\nconst model = defineModel<string>({\n\trequired: true,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n\tsize: 's',\n});\n\nconst emit = defineEmits<Emits>();\n\nconst elRef: Ref<HTMLElement|null> = ref(null);\n\nwatch(model, () => {\n\tif (!props.radiosProps?.some(item => item.value === model.value)) {\n\t\tmodel.value = props.radiosProps?.[0]?.value ?? '';\n\t}\n\n\telRef.value?.querySelector('.radioGroup_item-selected')?.scrollIntoView();\n}, { immediate: true });\n\nconst uid = 'radioGroup-' + Math.random();\n</script>\n\n<template>\n\t<div\n\t\tref=\"elRef\"\n\t\t:class=\"{\n\t\t\t['top-radioGroup']: true,\n\t\t\t['top-scrollBarXHidding']: true,\n\t\t\t['top-size_' + size]: !!size,\n\t\t\t['top-error']: isError,\n\t\t}\"\n\t>\n\t\t<label\n\t\t\tv-for=\"item of radiosProps\"\n\t\t\t:class=\"{\n\t\t\t\t['top-radioGroup_item-selected']: item.value === model,\n\t\t\t\t['top-radioGroup_item']: true,\n\t\t\t\t['top-forms-focusable']: true,\n\t\t\t\t['top-disabled']: item.disabled,\n\t\t\t}\"\n\t\t\t:data-top-icon=\"item.icon\"\n\t\t\t@click=\"model = item.value\"\n\t\t>\n\t\t\t{{ item.title }}\n\n\t\t\t<span\n\t\t\t\tv-if=\"showIndicator\"\n\t\t\t\tclass=\"top-radioGroup_circle\"\n\t\t\t></span>\n\n\t\t\t<!-- Для нативной навигации -->\n\t\t\t<input\n\t\t\t\tv-model=\"model\"\n\t\t\t\t:name=\"uid\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t['top-unvisible']: true,\n\t\t\t\t}\"\n\t\t\t\t:value=\"item.value\"\n\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t/>\n\t\t</label>\n\t</div>\n</template>\n\n<style module>\n@import \"./styles/top-scrollBar.css\";\n\n.top-radioGroup {\n\tuser-select: none;\n\tbox-sizing: border-box;\n\tborder-radius: 8px;\n\tbackground-color: var(--color-theme-50);\n\theight: var(--top-forms-base-height);\n\tpadding: 2px;\n\tgap: 2px;\n\tdisplay: flex;\n\talign-items: flex-start;\n}\n\n.top-radioGroup_item {\n\tcursor: pointer;\n\tbox-sizing: border-box;\n\tborder-radius: 6px;\n\theight: calc(var(--top-forms-base-height) - 4px);\n\tpadding: 0 16px;\n\tfont-weight: 600;\n\twhite-space: nowrap;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-grow: 1;\n\tgap: 4px;\n}\n\n.top-radioGroup_item:hover {\n\tbackground-color: var(--color-theme-25);\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\n}\n\n/* selected */\n.top-radioGroup_item-selected {\n\tpointer-events: none;\n\tbackground-color: var(--color-bg-3);\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\n}\n\n/* circle */\n.top-radioGroup_circle {\n\tcontent: \"\";\n\tbox-sizing: border-box;\n\tborder: 1px solid var(--color-line-3-opacity);\n\tborder-radius: 50%;\n\tpadding: 3px;\n\tmargin-left: auto;\n\twidth: calc(var(--top-forms-option-height) - 3px * 2);\n\theight: calc(var(--top-forms-option-height) - 3px * 2);\n}\n\n.top-radioGroup_item:hover .top-radioGroup_circle:before {\n\tborder-color: var(--color-primary);\n}\n\n/* circle selected */\n.top-radioGroup_item-selected .top-radioGroup_circle {\n\tborder-color: var(--color-primary);\n\tborder-width: 5px;\n}\n\n.top-radioGroup_item-selected:hover .top-radioGroup_circle {\n\tborder-color: var(--color-primary-2);\n}\n\n/* top-disabled */\n.top-radioGroup_item.top-disabled {\n\t--top-icon-color: var(--color-text-3);\n\n\tcolor: var(--color-text-3);\n}\n\n.top-radioGroup_item.top-disabled .top-radioGroup_circle {\n\tborder-color: var(--color-theme-400);\n\tbackground-color: var(--color-theme-50);\n}\n\n/* top-error  */\n.top-radioGroup.top-error .top-radioGroup_item:not(.top-disabled) .top-radioGroup_circle {\n\tborder-color: var(--color-negative);\n}\n</style>","import type { Ref } from 'vue';\nimport { ref } from 'vue';\nimport { debounce } from 'lodash';\nimport type { Item, Props } from './selector2';\n\nexport const useAPI = (apiRequest: Props['apiRequest'], minLength: number, useCache: Props['useCache']) => {\n\t/**\n\t * Список, полученный через API\n\t */\n\tconst items: Ref<Array<Item>> = ref([]);\n\n\t/**\n\t * Флаг - идет загрузка\n\t */\n\tconst isLoading = ref(false);\n\n\tlet _searchText = '';\n\tlet _nextOffset: number | undefined;\n\n\tif (apiRequest && !apiRequest.params.limit) {\n\t\tapiRequest.params.limit = 100;\n\t}\n\n\t/**\n\t * Выполнить обращение к API\n\t *\n\t * При ошибке вернет undefined\n\t */\n\tconst callAPIRequest = async (): Promise<{ nextOffset?: number, result: Array<Item> } | undefined> => {\n\t\tif (!apiRequest) return;\n\n\t\tlet res;\n\t\tlet cacheKey;\n\n\t\tif (useCache) {\n\t\t\t// кэш для полученных ответов через apiRequest\n\t\t\t// общий для всех компонентов, использующих apiRequest\n\t\t\tapiRequest.cache ??= new Map();\n\n\t\t\tcacheKey = JSON.stringify(apiRequest.params);\n\t\t\tres = apiRequest.cache.get(cacheKey);\n\n\t\t\tif (res) {\n\t\t\t\treturn res;\n\t\t\t}\n\t\t}\n\n\t\tisLoading.value = true;\n\t\tres = await apiRequest.call();\n\t\tisLoading.value = false;\n\n\t\tif (res.errors) return;\n\n\t\tif (!Array.isArray(res.result)) {\n\t\t\tconsole.warn(`В result ожидался массив`);\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst indexWithError = (res.result as Array<Item | any>).findIndex(item => item.id === undefined || item.name === undefined);\n\t\tif (indexWithError !== -1) {\n\t\t\tconsole.warn(`В result[${indexWithError}] нет id или name`);\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (useCache) {\n\t\t\tapiRequest.cache.set(cacheKey as string, res);\n\t\t}\n\n\t\treturn res;\n\t};\n\n\t/**\n\t * Загрузить items\n\t */\n\tconst load = async () => {\n\t\tif (!apiRequest) return;\n\n\t\tapiRequest.params.offset = 0;\n\t\tapiRequest.params.search = _searchText;\n\n\t\tconst res = await callAPIRequest();\n\t\tif (!res) return;\n\n\t\t_nextOffset = res.nextOffset;\n\n\t\titems.value = res.result;\n\t};\n\n\t/**\n\t * Загрузить следующую страницу items\n\t */\n\tconst loadAppend = async () => {\n\t\tif (!apiRequest) return;\n\n\t\t// данных о следующих страницах не обнаружено\n\t\tif (!_nextOffset) return;\n\n\t\t// дозагружать нельзя, если не завершена предыдущшая загрузка\n\t\tif (isLoading.value) return;\n\n\t\tapiRequest.params.offset = _nextOffset;\n\t\tapiRequest.params.search = _searchText;\n\n\t\tconst res = await callAPIRequest();\n\t\tif (!res) return;\n\n\t\t_nextOffset = res.nextOffset;\n\n\t\titems.value = items.value.concat(res.result);\n\t};\n\n\tconst loadDebounce = debounce(() => load(), 200);\n\n\t/**\n\t * Выполнить поиск по указанному тексту\n\t *\n\t * Если длина текста меньше minLength, поиск не будет проивзеден\n\t *\n\t * Если текст не изменился, поиск не будет проивзеден\n\t * @param searchText - текст поиска\n\t * @param useDebounce - отложенное выполнение поиска\n\t */\n\tconst setSearchTextAndLoad = (searchText: string, useDebounce = true) => {\n\t\tif (!apiRequest) return;\n\n\t\tif (searchText.length < minLength) return;\n\n\t\t// условия поиска не поменялись, данные загружены\n\t\tif (searchText === _searchText && items.value.length) return;\n\n\t\t_searchText = searchText;\n\n\t\tif (useDebounce) {\n\t\t\tloadDebounce();\n\t\t} else {\n\t\t\tvoid load();\n\t\t}\n\t};\n\n\treturn {\n\t\titems,\n\t\tisLoading,\n\t\tloadAppend,\n\t\tsetSearchTextAndLoad,\n\t};\n};","<script setup lang=\"ts\">\nimport type { Ref, ComputedRef, ModelRef, ComponentInstance } from 'vue';\nimport { computed, ref, watch } from 'vue';\nimport Core from '@/core/core/core';\nimport { invertKeyboardLayout } from '@/core/utils/keyboard';\nimport { Loadbar } from '@/components/forms/forms';\nimport { Popup, PopupListItem, PopupWidgetInput } from '@/components/popup/popup';\nimport type PopupClass from '@/components/popup/lib/popup';\nimport type { Item, Props, Slots } from './selector2';\nimport { useAPI } from './api';\nimport Selector2ItemMulti from './itemMulti.vue';\n\nconst props = withDefaults(defineProps<Props>(), {\n\titems: () => [] as Array<Item>,\n\tsize: 's',\n\tminLength: 0,\n\tshowSelectedInInput: true,\n});\n\nconst model = defineModel<Props['modelValue']>() as ModelRef<Props['modelValue']>;\n\ndefineSlots<Slots>();\n\n/**\n * Текст поиска по результатам\n */\nconst searchText = ref('');\n\nconst itemAll = {\n\tid: 0,\n\tname: 'Все',\n};\n\n/**\n * Экземпляр компонента Popup\n */\nconst popupRef: Ref<ComponentInstance<typeof Popup> | null> = ref(null);\n\n/**\n * Получить доступ к объекту popup\n */\nconst getPopup = (): PopupClass | undefined => {\n\treturn popupRef.value?.popup;\n};\n\n// для storybook\nif ((window as any).__STORYBOOK_PREVIEW__ && !props.modelValue) {\n\twatch(\n\t\t() => props.multiselect,\n\t\t() => {\n\t\t\tmodel.value = props.multiselect ? [] : { id: null, name: '' };\n\t\t},\n\t\t{ immediate: true },\n\t);\n}\n\nconst API = useAPI(props.apiRequest, props.minLength, props.useCache);\n\n/**\n * Варианты выбора: props.items + \"Выбрать все\"\n */\nconst localItems: ComputedRef<Array<Item>> = computed(() => {\n\tconst items = [];\n\n\tif (!props.multiselect && props.appendAllValue) {\n\t\titems.push(itemAll);\n\t}\n\n\tprops.items.forEach(item => items.push({ ...item }));\n\n\treturn items;\n});\n\n/**\n * Проверить, что элемент выбран\n */\nconst isSelected = (item: Item, checkNameForNullId = true) => {\n\tif (checkNameForNullId && item.id === null) {\n\t\tif (Array.isArray(model.value)) {\n\t\t\treturn model.value.some(itemSelected => itemSelected.id === item.id && itemSelected.name === item.name);\n\t\t} else {\n\t\t\treturn item.name === model.value.name;\n\t\t}\n\t}\n\n\tif (Array.isArray(model.value)) {\n\t\treturn model.value.some(itemSelected => itemSelected.id === item.id);\n\t} else {\n\t\treturn item.id === model.value.id;\n\t}\n};\n\n/**\n * Варианты выбора, которые выводятся\n */\nconst itemsForShow = computed(() => {\n\tconst searchString = searchText.value.toLowerCase();\n\tconst searchStringInvertKeyboard = invertKeyboardLayout(searchString);\n\n\tlet items: typeof localItems.value = [];\n\n\tlocalItems.value.forEach((item) => {\n\t\tconst itemName = item.name.toLowerCase();\n\n\t\tif (\n\t\t\titem.id === Number(searchString) ||\n\t\t\titemName.includes(searchString) ||\n\t\t\titemName.includes(searchStringInvertKeyboard)\n\t\t) {\n\t\t\tif (itemName === searchString || itemName === searchStringInvertKeyboard) {\n\t\t\t\titems.unshift(item);\n\t\t\t} else {\n\t\t\t\titems.push(item);\n\t\t\t}\n\t\t}\n\t});\n\n\titems.push(...API.items.value);\n\n\tif (\n\t\tprops.appendSearchToResult &&\n\t\t!!searchText.value &&\n\t\t(!items.length || items[0].name.toLowerCase() !== searchString)\n\t) {\n\t\titems.push({\n\t\t\tid: null,\n\t\t\tname: searchText.value,\n\t\t});\n\t}\n\n\tif (props.multiselect) {\n\t\titems = items.filter(item => !isSelected(item));\n\t}\n\n\treturn items;\n});\n\n/**\n * Выбрать значение\n *\n * Управляет закрытием окна\n */\nconst selectItem = async (item: Item) => {\n\tif (props.multiselect) {\n\t\tif (!Array.isArray(model.value)) return;\n\n\t\tif (isSelected(item)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newModel = [...model.value];\n\t\tnewModel.push({ ...item });\n\t\tmodel.value = newModel;\n\n\t\tif (Core.state.isMobile) {\n\t\t\tgetPopup()?.close();\n\t\t} else {\n\t\t\tsetTimeout(() => {\n\t\t\t\tgetPopup()?.recalcPosition();\n\t\t\t\tgetPopup()?.elPopupWidget.querySelector('input').focus();\n\n\t\t\t\t// сбросить введенный текст, только если больше не найдено результатов\n\t\t\t\tif (searchText.value) {\n\t\t\t\t\tif (!itemsForShow.value.length) {\n\t\t\t\t\t\tsearchText.value = '';\n\t\t\t\t\t\tAPI.items.value = [];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t} else {\n\t\t// сбросить введенный текст\n\t\tif (searchText.value) {\n\t\t\tsearchText.value = '';\n\t\t\tAPI.items.value = [];\n\t\t}\n\n\t\tif (JSON.stringify(item) !== JSON.stringify(model.value)) {\n\t\t\tmodel.value = { ...item };\n\t\t}\n\n\t\tgetPopup()?.close();\n\t}\n};\n\n/**\n * Выбрать следующее значение\n */\nconst selectNextItem = () => {\n\tif (!Array.isArray(model.value)) {\n\t\tconst currentIndex = localItems.value.findIndex(item => item.id === (model.value as Item).id);\n\t\tconst nextIndex = (currentIndex + 1) % localItems.value.length;\n\t\tmodel.value = { ...localItems.value[nextIndex] };\n\t}\n};\n\n/**\n * Удалить выбранное значение по id\n * @param id\n */\nconst deleteItemById = async (id: Item['id']) => {\n\tif (Array.isArray(model.value)) {\n\t\tmodel.value = model.value.filter(item => item.id !== id);\n\n\t\tsetTimeout(() => {\n\t\t\tgetPopup()?.recalcPosition();\n\t\t});\n\t}\n};\n\nconst isOpened = ref(false); // флаг попап открыт\n\nif (props.apiRequest) {\n\twatch(isOpened, () => {\n\t\tif (isOpened.value) {\n\t\t\t// при открытии сразу выполнить поиск\n\t\t\tAPI.setSearchTextAndLoad(searchText.value, false);\n\t\t}\n\t});\n\n\t// отложенный поиск при вводе текста\n\twatch(searchText, () => API.setSearchTextAndLoad(searchText.value));\n}\n\nconst onScrollContentList = (e: Event) => {\n\tconst el = e.target as HTMLElement;\n\n\tif (el.scrollTop / (el.scrollHeight - el.offsetHeight) > 0.8) {\n\t\tAPI.loadAppend();\n\t}\n};\n</script>\n\n<template>\n\t<Popup\n\t\tref=\"popupRef\"\n\t\t@open=\"isOpened = true\"\n\t\t@close=\"isOpened = false\"\n\t\t@scrollContentList=\"apiRequest ? onScrollContentList($event) : undefined\"\n\t\t:notch=\"false\"\n\t\t:transitionDuration=\"0\"\n\t>\n\t\t<template #opener>\n\t\t\t<div\n\t\t\t\t:class=\"{\n\t\t\t\t\t'top-selector2' : true,\n\t\t\t\t\t'top-selector2-multiselect': multiselect,\n\t\t\t\t\t['top-size_' + size]: true,\n\t\t\t\t\t['top-disabled']: disabled,\n\t\t\t\t\t['top-forms-focusable']: !disabled,\n\t\t\t\t\t['top-error']: isError,\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t<template v-if=\"multiselect\">\n\t\t\t\t\t<div class=\"top-selector2_activeItems\">\n\t\t\t\t\t\t<Selector2ItemMulti\n\t\t\t\t\t\t\tv-for=\"item of model as Array<Item>\"\n\t\t\t\t\t\t\t:id=\"item.id\"\n\t\t\t\t\t\t\t:name=\"item.name\"\n\t\t\t\t\t\t\t@delete=\"deleteItemById\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\n\t\t\t\t<span v-if=\"!multiselect\" class=\"top-selector2_activeName top-ellipsis\">\n\t\t\t\t\t{{ !Array.isArray(model) ? model.name : '' }}\n\t\t\t\t</span>\n\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"addChanger && !multiselect && localItems.length > 1 && !disabled\"\n\t\t\t\t\tclass=\"top-changer top-changer-selector\"\n\t\t\t\t\t@click.stop=\"selectNextItem\"\n\t\t\t\t></span>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<template #widget>\n\t\t\t<PopupWidgetInput\n\t\t\t\ttitle=\"Поиск\"\n\t\t\t\ticon=\"\"\n\t\t\t\tv-model=\"searchText\"\n\t\t\t\t:isLoading=\"API.isLoading.value\"\n\t\t\t\t:placeholder=\"!Array.isArray(model) && !multiselect && showSelectedInInput ? model.name : placeholder\"\n\t\t\t/>\n\t\t</template>\n\n\t\t<template #contentList>\n\t\t\t<PopupListItem\n\t\t\t\tv-for=\"item of itemsForShow\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'top-active': !Array.isArray(model) && !multiselect && model.name === item.name\n\t\t\t\t}\"\n\t\t\t\t:key=\"item.id ?? undefined\"\n\t\t\t\t@click.stop=\"selectItem(item)\"\n\t\t\t>\n\t\t\t\t<slot\n\t\t\t\t\tv-if=\"$slots.item\"\n\t\t\t\t\tname=\"item\"\n\t\t\t\t\t:item=\"item\"\n\t\t\t\t></slot>\n\n\t\t\t\t<template\n\t\t\t\t\tv-else\n\t\t\t\t>\n\t\t\t\t\t{{ item.name }}\n\t\t\t\t</template>\n\t\t\t</PopupListItem>\n\n\t\t\t<PopupListItem\n\t\t\t\tv-if=\"!itemsForShow.length\"\n\t\t\t\ttype=\"regular\"\n\t\t\t>\n\t\t\t\tНет результатов\n\t\t\t</PopupListItem>\n\t\t</template>\n\t</Popup>\n</template>\n\n<style module>\n.top-selector2 {\n\twidth: 180px;\n\tmin-height: var(--top-forms-base-height);\n\tbox-sizing: border-box;\n\tposition: relative;\n\tdisplay: flex;\n\toverflow: hidden;\n\tpadding: var(--top-padding-1) var(--top-forms-padding);\n\tcolor: var(--top-forms-placeholder-color);\n\n\tborder-radius: var(--top-radius-2);\n\tborder: 1px solid var(--top-forms-border-color);\n\tbackground: var(--top-forms-background-color);\n}\n\n.top-selector2-multiselect {\n\twidth: unset;\n\tmin-width: 180px;\n\tpadding: var(--top-padding-1);\n}\n\n.top-selector2.top-active {\n\t--top-forms-border-color: var(--top-forms-border-color-hover);\n\t--top-forms-background-color: var(--top-forms-background-color-hover);\n}\n\n.top-selector2_activeItems {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--top-padding-1);\n\tmax-width: 100%;\n}\n\n.top-selector2_activeName {\n\twhite-space: nowrap;\n}\n\n.top-changer-selector {\n\ttransform: translateX(-16px);\n}\n</style>","<script setup lang=\"ts\">\nimport { ref, onMounted, onUpdated } from 'vue';\nimport type { Props, Item } from './menu';\nimport Core from '@/core/core/core';\nimport { isSafari } from '@/core/utils/device';\nimport { Button } from '@/components/forms/forms';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tstyling: 'default',\n});\n\nconst model = defineModel({\n\trequired: true,\n});\n\nconst el = ref();\n\n// валидация типа modelValue без возможности выбора нескольких значений (ожидается строка)\nif (!props.isMultiple && !(typeof (model.value) === 'string' || model.value instanceof String)) {\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected String: ' + typeof (model.value));\n}\n\n// валидация типа modelValue с возможностью выбора нескольких значений (ожидается массив)\nif (props.isMultiple && !Array.isArray(model.value)) {\n\tconsole.warn('Type check failed for prop \"modelValue\". Expected Array: ' + typeof (model.value));\n}\n\n// для множественного выбора без пустого множества\n// если ничего не выбрано, присваиваем 1-ое значение\nif (props.isMultiple && !props.canBeEmptyMultiple && Array.isArray(model.value) && !model.value.length) {\n\tmodel.value = [props.items[0].href ?? props.items[0].value];\n}\n\nconst itemIsActive = (item: Item) => {\n\tif (!Array.isArray(model.value)) {\n\t\treturn item.value === model.value;\n\t}\n\n\treturn model.value.includes(item.value);\n};\n\n/**\n * Выбрать элемент\n * @param item\n * @param toggle - добавить или исключить элемент, для isMultiple\n */\nconst select = (item: Item, toggle = false) => {\n\tif (Array.isArray(model.value)) {\n\t\tlet modelNew = model.value.slice();\n\n\t\tif (toggle) {\n\t\t\tif (!modelNew.length) modelNew = props.items.map(item => item.value);\n\n\t\t\tconst index = modelNew.indexOf(item.value);\n\t\t\tif (index === -1) {\n\t\t\t\tmodelNew.push(item.value);\n\t\t\t} else {\n\t\t\t\tmodelNew.splice(index, 1);\n\t\t\t}\n\t\t} else {\n\t\t\tif (modelNew.length === 1 && modelNew[0] === item.value) {\n\t\t\t\tmodelNew = [];\n\t\t\t} else {\n\t\t\t\tmodelNew = [item.value];\n\t\t\t}\n\t\t}\n\n\t\tif (!props.canBeEmptyMultiple && !modelNew.length) modelNew = [item.value];\n\n\t\tmodel.value = modelNew;\n\n\t\treturn;\n\t}\n\n\tmodel.value = item.value;\n};\n\n// вертикальный скролл в горизонтальный скролл\nconst onWheel = (event: WheelEvent) => {\n\tif (el.value.scrollWidth <= el.value.offsetWidth) return;\n\tif (event.shiftKey) return;\n\tif (Math.abs(event.deltaY) < 50) return; // устройство с высокой точностью, например тачпад\n\n\tevent.preventDefault();\n\n\tconst delta = event.deltaY > 0 ? 30 : -30;\n\tel.value.scrollLeft = el.value.scrollLeft + delta;\n};\n\n/**\n * Замена стандартному scrollIntoView, который меняет скролл документа\n *\n * Выравнивание по ближнему краю элемента\n *\n * Выравнивается таким образом, чтобы был виден соседний элемент\n */\nconst scrollIntoView = (isSmooth = true) => {\n\tconst elBtn = el.value.querySelector('.top-active');\n\tif (!elBtn) return;\n\n\tconst gap = 24;\n\n\t// левая и правая координаты элемента\n\tconst leftMargin = elBtn.offsetLeft - el.value.offsetLeft - gap;\n\tconst rightMargin = elBtn.offsetLeft - el.value.offsetLeft + elBtn.clientWidth + gap;\n\n\t// левая и правая границы видимой части меню\n\tconst leftMarginParent = el.value.scrollLeft;\n\tconst rightMarginParent = el.value.clientWidth + el.value.scrollLeft;\n\n\tlet scrollLeft = null;\n\n\t// левую границу элемента к левой границе меню\n\tif (leftMargin < leftMarginParent) scrollLeft = leftMargin;\n\n\t// правую границу элемента к правой границе меню\n\tif (rightMargin > rightMarginParent) scrollLeft = rightMargin - el.value.clientWidth;\n\n\tif (scrollLeft !== null) {\n\t\tif (isSafari()) {\n\t\t\tCore.$?.(el.value).animate({ scrollLeft: scrollLeft }, isSmooth ? 200 : 0);\n\t\t} else {\n\t\t\tel.value.scrollTo({ left: scrollLeft, behavior: isSmooth ? 'smooth' : 'auto' });\n\t\t}\n\t}\n};\n\n/**\n * Выбрать все элементы в меню\n */\nconst selectAll = () => {\n\tif (!Array.isArray(model.value)) return;\n\n\tif (model.value.length === props.items.length) {\n\t\tmodel.value = [props.items[0].href ?? props.items[0].value];\n\t\treturn;\n\t}\n\n\tmodel.value = props.items.map(item => item.href ?? item.value);\n};\n\nonMounted(() => scrollIntoView(false));\nonUpdated(() => scrollIntoView(true));\n\n</script>\n\n<template>\n\t<div\n\t\tref=\"el\"\n\t\t:class=\"{\n\t\t\t'top-menu': true,\n\t\t\t['top-style_' + styling]: true,\n\t\t\t['top-unwrap-x']: styling === 'default',\n\t\t}\"\n\t\t@wheel=\"onWheel\"\n\t>\n\t\t<Button\n\t\t\tv-for=\"item in items\"\n\t\t\t:=\"item\"\n\t\t\tclass=\"top-menu_item\"\n\t\t\tcolor=\"theme\"\n\t\t\tstyling=\"\"\n\t\t\t@click=\"select(item, $event.ctrlKey)\"\n\t\t\t:isActive=\"itemIsActive(item)\"\n\t\t>\n\t\t\t<template #default v-if=\"item.content\">\n\t\t\t\t{{ item.content }}\n\t\t\t</template>\n\t\t</Button>\n\n\t\t<Button\n\t\t\tv-if=\"Array.isArray(model) && selectAllItem\"\n\t\t\t:=\"selectAllItem\"\n\t\t\tclass=\"top-menu_item\"\n\t\t\tcolor=\"theme\"\n\t\t\tstyling=\"\"\n\t\t\t@click=\"selectAll()\"\n\t\t\t:isActive=\"model.length === items.length\"\n\t\t>\n\t\t\t<template #default v-if=\"selectAllItem.content\">\n\t\t\t\t{{ selectAllItem.content }}\n\t\t\t</template>\n\t\t</Button>\n\t</div>\n</template>\n\n<style module>\n.top-menu {\n\t--scroll-thumb-color: var(--color-line-1-opacity);\n\t--scroll-thumb-color-hover: var(--color-line-2-opacity);\n\t--scroll-thumb-color-active: var(--color-line-2-opacity);\n\n\tmax-width: 100%;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: var(--top-gap-2);\n\toverflow-x: auto;\n\tscrollbar-width: none; /* firefox */\n\n\t/* предотвратить натинвые события браузера (назад / вперед) */\n\toverscroll-behavior-x: contain;\n}\n\n.top-menu::-webkit-scrollbar { display: none; }\n\n.top-menu > .top-menu_item {\n\t--top-button-color: var(--color-text-2);\n\n\toutline-offset: -2px !important;\n\tmin-width: 0;\n\tmargin: 0;\n\tflex-shrink: 0;\n}\n\n.top-menu > .top-menu_item[data-top-icon] {\n\t--top-icon-color: var(--color-text-2);\n}\n\n/* style default */\n.top-menu.top-style_default > .top-menu_item {\n\t--top-forms-radius: 0;\n\t--top-forms-border-color: transparent;\n\t--top-forms-border-width: 2px;\n\n\tfilter: none;\n\tbox-shadow: none;\n\tborder: none;\n\tborder-bottom: var(--top-forms-border-width) solid var(--top-forms-border-color);\n\tbackground: none;\n}\n\n.top-menu.top-style_default > .top-menu_item:hover {\n\t--top-icon-color: var(--color-text-1);\n\t--top-button-color: var(--color-text-1);\n\t--top-forms-border-color: var(--color-line-2-opacity);\n}\n\n.top-menu.top-style_default > .top-menu_item:active,\n.top-menu.top-style_default > .top-menu_item.top-active {\n\t--top-icon-color: var(--color-primary);\n\t--top-button-color: var(--color-text-1);\n\t--top-forms-border-color: var(--color-primary);\n}\n\n/* style bar */\n.top-menu.top-style_bar {\n\tborder-radius: var(--top-radius-3);\n\tborder: 1px solid var(--color-line-2-opacity);\n\tpadding: var(--top-padding-1);\n\tgap: 3px;\n}\n.top-menu.top-style_bar > .top-menu_item {\n\t--top-button-background-color-hover: var(--color-secondary-2-opacity);\n\t--top-button-background-color-active: var(--color-primary-light-opacity);\n\t--top-button-background-color-selected: var(--color-primary-light-opacity);\n\n\tposition: relative;\n}\n\n.top-menu.top-style_bar > .top-menu_item:hover {\n\t--top-icon-color: var(--color-text-1);\n\t--top-button-color: var(--color-text-1);\n}\n\n.top-menu.top-style_bar > .top-menu_item.top-active {\n\t--top-icon-color: var(--color-primary);\n\t--top-button-color: var(--color-primary);\n}\n\n/* разделители кнопок в баре */\n.top-menu.top-style_bar > .top-menu_item:not(:first-child):not(.top-active):not(:hover):after {\n\tcontent: \"\";\n\tbackground: var(--color-line-1-opacity);\n\twidth: 1px;\n\theight: 60%;\n\tdisplay: block;\n\tposition: absolute;\n\tleft: -2px;\n}\n.top-menu.top-style_bar > .top-menu_item.top-active + .top-menu_item:after,\n.top-menu.top-style_bar > .top-menu_item:hover + .top-menu_item:after {\n\tcontent: none !important;\n}\n\n/** TODO: .top-unwrap-x надо вынести глобально в UI или добавить в стили для storybook */\n.top-menu.top-unwrap-x {\n\tpadding-right: var(--top-unwrap-x);\n\tpadding-left: var(--top-unwrap-x);\n\tmargin-right: calc(0px - var(--top-unwrap-x));\n\tmargin-left: calc(0px - var(--top-unwrap-x));\n}\n</style>"],"names":["props","__props","emit","__emit","isChanged","vue","localValue","cancelBtnText","submit","value","intermediateValue","elRef","model","_a","item","_c","_b","items","isLoading","_searchText","apiRequest","res","indexWithError","callAPIRequest","_nextOffset","loadAppend","searchText","minLength","popupRef","API","useAPI","localItems","itemAll","itemSelected","itemsForShow","searchStringInvertKeyboard","utils_keyboard","searchString","isSelected","selectItem","newModel","forms","getPopup","nextIndex","deleteItemById","id","isOpened","onScrollContentList","e","el","itemIsActive","modelNew","item2","index","onWheel","event","delta","scrollIntoView","isSmooth","gap","leftMargin","elBtn","rightMargin","rightMarginParent","scrollLeft"],"mappings":"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"}