@ubuilder/simple/dist/esm/index.js

UBuilder Simple Components

import{tabbable as e}from"tabbable";function t(e,t,n,i,o,a,s,u,r,l){"boolean"!=typeof s&&(r=u,u=s,s=!1);const d="function"==typeof n?n.options:n;let c;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),i&&(d._scopeId=i),a?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,r(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},d._ssrRegister=c):t&&(c=s?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,u(e))}),c)if(d.functional){const e=d.render;d.render=function(t,n){return c.call(n),e(t,n)}}else{const e=d.beforeCreate;d.beforeCreate=e?[].concat(e,c):[c]}return n}var n=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("nav",[e._t("prepend"),e._v(" "),n("ul",[e._l(e.data,(function(t,i){return[e.visible(t)?n("nav-item",{key:i,attrs:{item:t}}):e._e()]}))],2),e._v(" "),e._t("append")],2)},staticRenderFns:[]},undefined,{components:{NavItem:t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("li",[e.item.link?n("router-link",{attrs:{to:e.item.link,exact:e.item.exact}},[e._v("\n    "+e._s(e.item.label)+"\n  ")]):[e._v("\n    "+e._s(e.item.label)+"\n  ")],e._v(" "),e.item.children?n("ul",[e._l(e.item.children,(function(t,i){return[e.visible(t)?n("UNavItem",{key:i,attrs:{item:t}}):e._e()]}))],2):e._e()],2)},staticRenderFns:[]},undefined,{name:"UNavItem",props:{item:{type:Object,default:function(){return{label:"undefined"}}}},methods:{visible:function(e){return!e.hide&&(!e.permission||(!0===e.permission?this.$user.isLoggedIn():this.$user.hasPermission(e.permission)))}}},undefined,false,undefined,!1,void 0,void 0,void 0)},props:{data:{type:Array,default:function(){return[]}}},methods:{visible:function(e){return!e.hide&&(!e.permission||(!0===e.permission?this.$user.isLoggedIn():this.$user.hasPermission(e.permission)))}},install:function(e){e.component("UNavbar",this)}},undefined,false,undefined,!1,void 0,void 0,void 0),i=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("select",{ref:"select",staticClass:"u-combo",attrs:{disabled:e.disabled,required:e.required},on:{change:function(t){return e.$emit("input",t.target.value)}}},[e.placeholder?n("option",{attrs:{value:"",disabled:""}},[e._v("\n    "+e._s(e.placeholder)+"\n  ")]):e._e(),e._v(" "),e._l(e.data,(function(t){return n("option",{key:t[e.valueKey],domProps:{value:t[e.valueKey]}},[e._v("\n    "+e._s(t[e.textKey])+"\n  ")])}))],2)},staticRenderFns:[]},undefined,{props:{value:{type:String,default:void 0},data:{type:Array,required:!0},textKey:{type:String,default:"text"},valueKey:{type:String,default:"value"},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},watch:{data:function(){this.selectByValue()},value:function(){this.selectByValue()}},mounted:function(){this.selectByValue()},methods:{selectByValue:function(){for(var e=this.$refs.select.options,t=0;t<e.length;t+=1){if(e.item(t).value===this.value)return void(this.$refs.select.selectedIndex=t);this.$refs.select.selectedIndex=-1}}},install:function(e){e.component("UCombo",this)}},undefined,false,undefined,!1,void 0,void 0,void 0),o=t({render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("button",{class:{"u-progress":e.progress},attrs:{type:e.type},on:{click:function(t){return e.$emit("click")}}},[e._t("default")],2)},staticRenderFns:[]},undefined,{props:{type:{type:String,default:"button",validator:function(e){return-1!==["submit","reset","button"].indexOf(e.toLowerCase())}},progress:{type:Boolean,default:!1}},install:function(e){e.component("UButton",this)}},undefined,false,undefined,!1,void 0,void 0,void 0),a=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n(e.tag,{tag:"component"},[e.visible?e._t("default"):e.$user.isLoggedIn()?e._t("403",[n("p",[e._v("Forbidden")])]):e._t("401",[n("p",[e._v("Unauthorized")])])],2)},staticRenderFns:[]},undefined,{props:{tag:{type:String,default:"div"}},computed:{visible:function(){var e,t,n;return void 0===(null===(e=this.$route)||void 0===e||null===(t=e.meta)||void 0===t?void 0:t.auth)||(!0===this.$route.meta.auth?this.$user.isLoggedIn():null===(n=this.$user)||void 0===n?void 0:n.hasPermission(this.$route.meta.auth))}},install:function(e){e.component("UPage",this)}},undefined,false,undefined,!1,void 0,void 0,void 0),s=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"u-modal"}},[e.active?n("div",{staticClass:"u-modal u-loading"},[n("div",[e._v(e._s(e.message))]),e._v(" "),n("div",{staticClass:"u-progress"},[e._v("\n      P\n    ")]),e._v(" "),e.cancelable?n("button",{ref:"button",attrs:{type:"button"},on:{click:e.cancel}},[e._v("\n      "+e._s(e.buttonText)+"\n    ")]):e._e()]):e._e()])},staticRenderFns:[]},undefined,{model:{prop:"active"},props:{active:{type:Boolean,default:!1},message:{type:String,default:""},buttonText:{type:String,default:"Cancel"},cancelable:{type:Boolean,default:!1}},watch:{active:function(e){e?this.activateTrap():this.close()}},mounted:function(){this.active&&this.activateTrap()},methods:{activateTrap:function(){var e=this;document.activeElement.blur(),this.$nextTick((function(){var t;document.addEventListener("keydown",e.trap),null===(t=e.$refs.button)||void 0===t||t.focus()}))},trap:function(e){var t;"Tab"===e.key&&(e.preventDefault(),null===(t=this.$refs.button)||void 0===t||t.focus())},cancel:function(){this.$emit("cancel"),this.close()},close:function(){document.removeEventListener("keydown",this.trap),this.$emit("input",!1)}},install:function(e){e.component("ULoading",this)}},undefined,false,undefined,!1,void 0,void 0,void 0),u={install:function(e){var t,n;null!==(n=(t=e.prototype).$ub)&&void 0!==n||(t.$ub={}),e.prototype.$ub.loading=function(t){"string"==typeof t&&(t={message:t});var n=new(e.extend(s))({el:document.createElement("div"),propsData:t});return n.$on("input",(function(e){n.$props.active=e})),n.$on("cancel",(function(){"function"==typeof t.onCancel&&t.onCancel(),setTimeout((function(){document.body.removeChild(n.$el),n.$destroy()}),500)})),n.$mount(),document.body.appendChild(n.$el),n.$props.active=!0,n}}},r=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("nav",{staticClass:"u-pagination"},[n("ul",[n("li",[e.onFirst?[n("a",{staticClass:"disabled"},[e._t("prev",[e._v("«")])],2)]:n("a",{attrs:{href:"#"},on:{click:function(t){return t.preventDefault(),e.$emit("input",e.value-1)}}},[e._t("prev",[e._v("«")])],2)],2),e._v(" "),!e.allVisible&&e.value>e.aroundButtonCount+1?n("li",[n("a",{attrs:{href:"#"},on:{click:function(t){return t.preventDefault(),e.$emit("input",1)}}},[e._v("1")]),e._v(" "),e.value>e.aroundButtonCount+2?e._t("ellipsis",[n("span",[e._v("…")])]):e._e()],2):e._e(),e._v(" "),e._l(e.pages,(function(t){return n("li",{key:t},[t===e.value?[n("a",{staticClass:"current"},[e._v(e._s(t))])]:n("a",{attrs:{href:"#"},on:{click:function(n){return n.preventDefault(),e.$emit("input",t)}}},[e._v(e._s(t))])],2)})),e._v(" "),!e.allVisible&&e.value<e.pageCount-e.aroundButtonCount?n("li",[e.value<e.pageCount-e.aroundButtonCount-1?e._t("ellipsis",[n("span",[e._v("…")])]):e._e(),e._v(" "),n("a",{attrs:{href:"#"},on:{click:function(t){return t.preventDefault(),e.$emit("input",e.pageCount)}}},[e._v(e._s(e.pageCount))])],2):e._e(),e._v(" "),n("li",[e.onLast?[n("a",{staticClass:"disabled"},[e._t("next",[e._v("»")])],2)]:n("a",{attrs:{href:"#"},on:{click:function(t){return t.preventDefault(),e.$emit("input",e.value+1)}}},[e._t("next",[e._v("»")])],2)],2)],2)])},staticRenderFns:[]},undefined,{props:{total:{type:Number,required:!0},perPage:{type:Number,default:20},aroundButtonCount:{type:Number,default:2},value:{type:Number,default:1}},computed:{onFirst:function(){return 1===this.value},onLast:function(){return this.value===this.pageCount},pageCount:function(){return Math.max(1,Math.ceil(this.total/this.perPage))},allVisible:function(){return this.pageCount<=2*this.aroundButtonCount+1},pages:function(){var e=this.value-this.aroundButtonCount,t=this.value+this.aroundButtonCount,n=0;return e<1&&(n=1-e),t>this.pageCount&&(n=this.pageCount-t),e=Math.max(1,e+n),t=Math.min(this.pageCount,t+n),Array.from({length:t-e+1},(function(t,n){return n+e}))}},install:function(e){e.component("UPagination",this)}},undefined,false,undefined,!1,void 0,void 0,void 0),l=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",{staticClass:"u-table"},[e._t("caption"),e._v(" "),e.hideHeader?e._e():n("thead",[e._t("header",[n("table-header",{attrs:{columns:e.columns},scopedSlots:e._u([{key:"column",fn:function(t){var n=t.column;return[e._t("column",null,{column:n})]}}],null,!0)})],{columns:e.columns})],2),e._v(" "),n("tbody",[e._t("default",e._l(e.data,(function(t,i){return n("tr",{key:i,on:{click:function(n){return e.$emit("row-click",t)}}},[e._l(e.columns,(function(o){return[n("td",{key:i+(o.id||o.field||o.label)},[o.slot?[e._t(o.slot,[e._v("\n                "+e._s(t[o.field])+"\n              ")],{row:t,index:i})]:[e._v("\n              "+e._s(t[o.field])+"\n            ")]],2)]}))],2)})),{columns:e.columns,data:e.data})],2),e._v(" "),e.showFooter?n("tfoot",[e._t("footer",[n("table-header",{attrs:{columns:e.columns},scopedSlots:e._u([{key:"column",fn:function(t){var n=t.column;return[e._t("column",null,{column:n})]}}],null,!0)})],{columns:e.columns})],2):e._e()],2)},staticRenderFns:[]},undefined,{components:{TableHeader:t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("tr",e._l(e.columns,(function(t){return n("th",{key:e.columnKey(t)},[e._t("column",[e._v("\n      "+e._s(e.columnLabel(t))+"\n    ")],{column:t})],2)})),0)},staticRenderFns:[]},undefined,{props:{columns:{type:Array,required:!0}},methods:{columnKey:function(e){return e instanceof Object?e.id||e.field||e.label:e},columnLabel:function(e){return e instanceof Object?e.label||e.id||e.field:e}}},undefined,false,undefined,!1,void 0,void 0,void 0)},props:{columns:{type:Array,required:!0},data:{type:Array,required:!0},hideHeader:{type:Boolean,default:!1},showFooter:{type:Boolean,default:!1}},install:function(e){e.component("UTable",this)}},undefined,false,undefined,!1,void 0,void 0,void 0),d=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"u-grid"},[n("div",{staticClass:"table-wrapper"},[n("u-table",e._b({attrs:{data:e.rows},on:{"row-click":e.rowClick},scopedSlots:e._u([e._l(e.$scopedSlots,(function(t,n){return{key:n,fn:function(t){return[e._t(n,null,null,t)]}}}))],null,!0)},"u-table",e.$props,!1),[e._v(" "),e.loading||0==e.rows.length?n("tr",[n("td",{attrs:{colspan:e.columns.length}},[e.loading?e._t("loading",[e._v("\n            Loading...\n          ")]):e._t("no-data",[e._v("\n            NO DATA\n          ")])],2)]):e._e()])],1),e._v(" "),n("u-pagination",{attrs:{total:e.count,"per-page":e.perPage},model:{value:e.page,callback:function(t){e.page=t},expression:"page"}})],1)},staticRenderFns:[]},undefined,{components:{UTable:l,UPagination:r},props:{columns:{type:Array,required:!0},data:{type:Array,required:!0},perPage:{type:Number,default:20},totalCount:{type:Number,default:-1},showFooter:{type:Boolean,default:!1},loading:{type:Boolean,default:!1}},data:function(){return{page:1}},computed:{rows:function(){var e=(this.page-1)*this.perPage;return this.data.slice(e,e+this.perPage)},count:function(){return this.totalCount>=0?this.totalCount:this.data.length}},methods:{rowClick:function(e){this.$emit("row-click",e)}},install:function(e){e.component("UGrid",this)}},undefined,false,undefined,!1,void 0,void 0,void 0),c=[],f=function(e){if("Tab"===e.key){if(e.preventDefault(),0===c.length)return;var t=c.indexOf(e.target);-1===t&&c[0].focus(),e.shiftKey?t-=1:t+=1,t===c.length?c[0].focus():-1===t?c[c.length-1].focus():c[t].focus()}};function v(t){var n;c=Array.from(e(t)),t.addEventListener("keydown",f),null===(n=c[0])||void 0===n||n.focus()}var p=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"u-modal"}},[e.value?n("div",{ref:"modal",staticClass:"u-modal"},[n("div",{staticClass:"u-modal-content"},[e._t("default")],2)]):e._e()])},staticRenderFns:[]},undefined,{props:{value:{type:Boolean,default:!1}},watch:{value:function(e){var t=this;e?this.$nextTick((function(){return v(t.$refs.modal)})):(this.$refs.modal.removeEventListener("keydown",f),this.$emit("close"))}},mounted:function(){var e=this;this.value&&this.$nextTick((function(){return v(e.$refs.modal)}))},install:function(e){e.component("UModal",this)}},undefined,false,undefined,!1,void 0,void 0,void 0),m={components:{UModal:p},props:{value:{type:Boolean,default:!1},title:{type:String,default:""},message:{type:String,default:""},dialogClass:{type:[String,Array,Object],default:""},buttonText:{type:String,default:"OK"},buttonClass:{type:[String,Array,Object],default:""}},computed:{computedClass:function(){return Array.isArray(this.dialogClass)?["u-dialog"].concat(this.dialogClass):"object"==typeof this.alertClass?Object.assign({"u-dialog":!0},this.dialogClass):["u-dialog",this.dialogClass]}}},_=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("u-modal",{on:{close:function(t){return e.$emit("close")}},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},[n("section",{class:e.computedClass},[e.title?n("header",[e._t("title",[e._v("\n        "+e._s(e.title)+"\n      ")],{title:e.title})],2):e._e(),e._v(" "),n("p",[e._t("default",[e._v(e._s(e.message))])],2),e._v(" "),n("footer",[n("button",{attrs:{type:"button"},on:{click:function(t){return e.$emit("input",!1)}}},[e._v("\n        "+e._s(e.buttonText)+"\n      ")])])])])},staticRenderFns:[]},undefined,{extends:m,install:function(e){e.component("UAlert",this)}},undefined,false,undefined,!1,void 0,void 0,void 0),h=function(e){return setTimeout((function(){document.body.removeChild(e.$el),e.$destroy()}),500)};function b(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[];return{install:function(i){var o,a;null!==(a=(o=i.prototype).$ub)&&void 0!==a||(o.$ub={}),i.prototype.$ub[t]=function(t){"string"==typeof t&&(t={message:t});var o=new(i.extend(e))({el:document.createElement("div"),propsData:t});return o.$on("input",(function(e){o.$props.value=e})),n.forEach((function(e){o.$on(e,(function(n){var i="on".concat(e.charAt(0).toUpperCase()).concat(e.slice(1));"function"==typeof t[i]&&t[i](n),h(o)}))})),o.$mount(),document.body.appendChild(o.$el),o.$props.value=!0,o}}}}var g=b(_,"alert",["close"]),y={extends:m,props:{cancelText:{type:String,default:"Cancel"},cancelClass:{type:[String,Array,Object],default:"is-cancel"}}},$=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("u-modal",{model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},[n("section",{class:e.computedClass},[e.title?n("header",[e._t("title",[e._v("\n        "+e._s(e.title)+"\n      ")],{title:e.title})],2):e._e(),e._v(" "),n("p",[e._t("default",[e._v(e._s(e.message))])],2),e._v(" "),n("footer",[n("button",{class:e.cancelClass,attrs:{type:"button"},on:{click:function(t){e.$emit("input",!1),e.$emit("cancel")}}},[e._v("\n        "+e._s(e.cancelText)+"\n      ")]),e._v(" "),n("button",{class:e.buttonClass,attrs:{tabindex:e.buttonTabindex},on:{click:function(t){e.$emit("input",!1),e.$emit("confirm")}}},[e._v("\n        "+e._s(e.buttonText)+"\n      ")])])])])},staticRenderFns:[]},undefined,{extends:y,props:{focusConfirm:{type:Boolean,default:!1}},computed:{buttonTabindex:function(){return this.focusConfirm?1:0}},install:function(e){e.component("UConfirm",this)}},undefined,false,undefined,!1,void 0,void 0,void 0),C=b($,"confirm",["confirm","cancel"]),x=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("u-modal",{model:{value:e.value,callback:function(t){e.value=t},expression:"value"}},[n("section",{class:e.computedClass},[e.title?n("header",[e._t("title",[e._v("\n        "+e._s(e.title)+"\n      ")],{title:e.title})],2):e._e(),e._v(" "),n("p",[n("label",[e._t("default",[e._v(e._s(e.message))]),e._v(" "),n("div",[n("input",{directives:[{name:"model",rawName:"v-model",value:e.text,expression:"text"}],attrs:{type:"text",placeholder:e.placeholder},domProps:{value:e.text},on:{input:function(t){t.target.composing||(e.text=t.target.value)}}})])],2)]),e._v(" "),n("footer",[n("button",{class:e.cancelClass,attrs:{type:"button"},on:{click:function(t){e.$emit("input",!1),e.$emit("cancel")}}},[e._v("\n        "+e._s(e.cancelText)+"\n      ")]),e._v(" "),n("button",{class:e.buttonClass,attrs:{disabled:0===e.text.length},on:{click:function(t){e.$emit("input",!1),e.$emit("confirm",e.text)}}},[e._v("\n        "+e._s(e.buttonText)+"\n      ")])])])])},staticRenderFns:[]},undefined,{extends:y,props:{placeholder:{type:String,default:""},defaultText:{type:String,default:""}},data:function(){return{text:this.defaultText}},install:function(e){e.component("UPrompt",this)}},undefined,false,undefined,!1,void 0,void 0,void 0),k=b(x,"prompt",["confirm","cancel"]),U=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"u-tabs"},[n("nav",[n("transition-group",{attrs:{name:"u-tab",tag:"ul"}},e._l(e.tabs,(function(t){return n("li",{key:t.id,staticClass:"u-tab",class:{active:t.id===e.active.id}},[n("a",{on:{click:function(n){return e.open(t)}}},[e._v("\n          "+e._s(t.label)+"\n        ")]),e._v(" "),n("a",{on:{click:function(n){return e.close(t)}}},[e._v("\n          ⮾\n        ")])])})),0)],1),e._v(" "),e.tabs.length>0?n("keep-alive",[n(e.active.component,{ref:"component",tag:"component"})],1):e._t("default")],2)},staticRenderFns:[]},undefined,{name:"UTabs",emits:["closed"],data:function(){return{tabs:[],active:{}}},methods:{open:function(e){var t=this;if(this.tabs.every((function(t){return t.id!==e.id}))){var n=this.tabs.findIndex((function(e){return e.id===t.active.id}));this.tabs.splice(n+1,0,e)}this.activate(e)},close:function(e){var t=this.tabs.findIndex((function(t){return t.id===e.id}));-1!==t&&(this.tabs.splice(t,1),this.$refs.component.$destroy(),this.active.id===e.id&&this.activate(this.tabs.length>0?this.tabs[Math.min(this.tabs.length-1,t)]:void 0),this.$emit("closed",e))},activate:function(e){void 0!==e&&(this.active=e)}}},undefined,false,undefined,!1,void 0,void 0,void 0),T={install:function(e){e.use(n),e.use(i),e.use(o),e.use(a),e.use(s),e.use(u),e.use(r),e.use(l),e.use(d),e.use(p),e.use(_),e.use(g),e.use($),e.use(C),e.use(x),e.use(k),e.use(U)}};export default T;export{_ as UAlert,g as UAlertProgrammatic,o as UButton,i as UCombo,$ as UConfirm,C as UConfirmProgrammatic,d as UGrid,s as ULoading,u as ULoadingProgrammatic,p as UModal,n as UNavbar,a as UPage,r as UPagination,x as UPrompt,k as UPromptProgrammatic,l as UTable,U as UTabs};