@farris/ui-vue/components/nav/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../designer-canvas/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../designer-canvas/index.umd.js"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.nav={},l.Vue,l.dynamicResolver,l.designerCanvas))})(this,function(l,e,h,x){"use strict";const F=new Map([["appearance",h.resolveAppearance]]);function V(a,s,n){return s}const k={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/nav.schema.json",title:"nav",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for a nav",type:"string"},type:{description:"The type string of nav component",type:"string",default:"nav"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},binding:{description:"",type:"object",default:{}},editable:{description:"",type:"boolean",default:!0},enableLinkLabel:{description:"",type:"boolean",default:!1},label:{description:"",type:"string",default:""},lableWidth:{description:"",type:"number"},placeholder:{description:"",type:"string",default:""},readonly:{description:"",type:"boolean",default:!1},required:{description:"",type:"boolean",default:!1},tabindex:{description:"",type:"number",default:-1},textAlign:{description:"",type:"string",enum:["left","middle","right"],default:"left"},visible:{description:"",type:"boolean",default:!0},onBlur:{description:"",type:"string",default:""},onClickLinkLabel:{description:"",type:"string",default:""}},required:["id","type"]},T={title:"nav",description:"A Farris Component",type:"object",categories:{basic:{description:"Basic Infomation",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"select",editor:{type:"waiting for modification",enum:[]}}}},behavior:{description:"Basic Infomation",title:"行为",properties:{editable:{description:"",title:"允许编辑",type:"boolean"},readonly:{description:"",title:"只读",type:"string"},required:{description:"",title:"必填",type:"boolean"},visible:{description:"",title:"可见",type:"boolean"},placeholder:{description:"",title:"提示文本",type:"string"},tabindex:{description:"",title:"tab索引",type:"number"},textAlign:{description:"",title:"对齐方式",type:"enum",editor:{type:"combo-list",textField:"name",valueField:"value",data:[{value:"left",name:"左对齐"},{value:"center",name:"居中"},{value:"right",name:"右对齐"}]}}}}}},p={activeNavId:{Type:String,default:"1"},displayField:{Type:String,default:"text"},disableField:{Type:String,default:"disable"},horizontal:{Type:Boolean,default:!0},idField:{Type:String,default:"id"},maxNum:{Type:Number,default:99},navData:{Type:Array,default:[{id:"1",text:"全部"},{id:"2",text:"已回复",disable:!0},{id:"3",text:"待回复",num:200},{id:"4",text:"@我",num:33}]},navPicking:{type:Function,default:()=>a=>!0},valueField:{Type:String,default:"num"}},m=h.createPropsResolver(p,k,F,V,T),f=e.defineComponent({name:"FNav",props:p,emits:["nav","update:activeNavId"],setup(a,s){const n=e.ref(a.activeNavId),c=e.ref(a.navData),u=e.ref(a.horizontal),v=e.ref(a.navPicking),y=e.computed(()=>({paddingTop:"1rem"}));e.watch(()=>a.activeNavId,(i,t)=>{i!==t&&(n.value=i)});const d=e.computed({get(){return c.value},set(i){c.value=i,b()}}),o=e.computed({get(){return n.value},set(i){if(n.value=i,n.value&&d&&d.value.length){const t=d.value.find(r=>r.id===n.value);t&&s.emit("nav",t)}}}),g=e.computed({set(i){u.value=i},get(){return u.value}});function b(){if(d.value&&d.value.length&&!n.value){const i=d.value.find(t=>!t.disable);i&&(n.value=i.id)}}function N(i){i.disable||i.id===n.value||Promise.resolve().then(()=>v.value(i)).then(t=>{t&&(n.value=i.id,s.emit("update:activeNavId",i.id),s.emit("nav",i))})}return()=>{var i;return e.createVNode("div",{class:["farris-nav",{"farris-nav-vertical":!g.value}]},[(i=d.value)==null?void 0:i.map(t=>e.createVNode("div",{class:["farris-nav-item",{active:t[a.idField]===o.value},{disabled:t[a.disableField]}],onClick:()=>N(t)},[e.createVNode("div",{class:"farris-nav-item-link",style:y.value},[e.createVNode("span",{class:"farris-nav-item-link-text"},[typeof t[a.displayField]=="function"?t[a.displayField]():t[a.displayField],t[a.valueField]&&e.createVNode("div",{class:"farris-nav-item-tag"},[t[a.valueField]<=a.maxNum&&e.createVNode("span",{class:"tag-text"},[t[a.valueField]]),t[a.valueField]>a.maxNum&&e.createVNode("span",{class:"tag-text"},[a.maxNum,e.createTextVNode("+")])])]),e.createVNode("div",{class:"farris-nav-item-bottom-line"},null)])]))])}}}),I=e.defineComponent({name:"FNavDesign",props:p,emits:["nav"],setup(a,s){const n=e.ref(a.activeNavId),c=e.ref(a.navData),u=e.ref(a.horizontal);e.ref(a.navPicking);const v=e.ref(),y=e.inject("design-item-context"),d=x.useDesignerComponent(v,y);e.onMounted(()=>{v.value.componentInstance=d}),s.expose(d.value);const o=e.computed({get(){return c.value},set(t){c.value=t,N()}}),g=e.computed({get(){return n.value},set(t){if(n.value=t,n.value&&o&&o.value.length){const r=o.value.find(C=>C.id===n.value);r&&s.emit("nav",r)}}}),b=e.computed({set(t){u.value=t},get(){return u.value}});function N(){if(o.value&&o.value.length&&!n.value){const t=o.value.find(r=>!r.disable);t&&(n.value=t.id)}}function i(t){t.disable||t.id===n.value||(n.value=t.id,s.emit("nav",t))}return()=>{var t;return e.createVNode("div",{ref:v,class:["farris-nav",{"farris-nav-vertical":!b.value}]},[(t=o.value)==null?void 0:t.map(r=>e.createVNode("div",{class:["farris-nav-item",{active:r.id===g.value},{disabled:r.disable}],onClick:()=>i(r)},[e.createVNode("div",{class:"farris-nav-item-link"},[e.createVNode("span",{class:"farris-nav-item-link-text"},[r.text,r.num&&e.createVNode("div",{class:"farris-nav-item-tag"},[r.num<=a.maxNum&&e.createVNode("span",{class:"tag-text"},[r.num]),r.num>a.maxNum&&e.createVNode("span",{class:"tag-text"},[a.maxNum,e.createTextVNode("+")])])])])]))])}}}),j={install(a){a.component(f.name,f)},register(a,s,n,c){a.nav=f,s.nav=m},registerDesigner(a,s,n){a.nav=I,s.nav=m}};l.FNav=f,l.default=j,l.navProps=p,l.propsResolver=m,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});