ocn-vue-components/dist/ocn-vue-components.umd.js

A collection of Vue 3 components with @vorms/core

(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vorms/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vorms/core"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.OcnVueComponents={},s.Vue,s.Vorms))})(this,function(s,e,f){"use strict";const p={__name:"LabelField",props:{field:{type:String,required:!0},labelName:{type:String,default:""}},setup(r){const{field:o}=r,{error:t}=f.useField(o),n=e.computed(()=>t.value?"block mb-2 text-sm font-medium text-red-700 dark:text-red-500":"block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300");return(d,i)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(n.value)},e.toDisplayString(r.labelName),3))}},x={key:0,class:"mt-2 text-sm text-red-600 dark:text-red-500"},N=e.createElementVNode("span",{class:"font-medium"},"Hata!",-1),k={__name:"ErrorField",props:{field:{type:String,required:!0}},setup(r){const{field:o}=r,{error:t}=f.useField(o);return(n,d)=>e.unref(t)?(e.openBlock(),e.createElementBlock("p",x,[N,e.createTextVNode(" "+e.toDisplayString(e.unref(t)),1)])):e.createCommentVNode("",!0)}},w=["placeholder"],E={__name:"TextField",props:{field:{type:String,required:!0},labelName:{type:String,required:!0},placeholder:{type:String,default:null},isShow:{type:Boolean,default:!0}},setup(r){const{field:o}=r,{value:t,error:n,attrs:d}=f.useField(o),i=e.computed(()=>n.value?"bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500":"bg-gray-50 border border-gray-30 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500");return(c,l)=>(e.openBlock(),e.createElementBlock("div",null,[e.createVNode(p,{labelName:r.labelName,field:r.field},null,8,["labelName","field"]),e.withDirectives(e.createElementVNode("input",e.mergeProps({class:i.value,type:"text",placeholder:r.placeholder,"onUpdate:modelValue":l[0]||(l[0]=a=>e.isRef(t)?t.value=a:null)},e.unref(d)),null,16,w),[[e.vModelText,e.unref(t)]]),e.createVNode(k,{field:r.field},null,8,["field"])]))}},B=["placeholder"],V=["value"],S={__name:"SelectField",props:{field:{type:String,required:!0},labelName:{type:String,required:!0},placeholder:{type:String,default:null},options:{type:Array,required:!0}},setup(r){const{field:o}=r,{value:t,error:n,attrs:d}=f.useField(o),i=e.computed(()=>n.value?"bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500":"bg-gray-50 border border-gray-30 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500");return(c,l)=>(e.openBlock(),e.createElementBlock("div",null,[e.createVNode(p,{labelName:r.labelName,field:r.field},null,8,["labelName","field"]),e.withDirectives(e.createElementVNode("select",e.mergeProps({class:i.value,placeholder:r.placeholder,"onUpdate:modelValue":l[0]||(l[0]=a=>e.isRef(t)?t.value=a:null)},e.unref(d)),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,a=>(e.openBlock(),e.createElementBlock("option",{key:a.value,value:a.value},e.toDisplayString(a.label),9,V))),128))],16,B),[[e.vModelSelect,e.unref(t)]]),e.createVNode(k,{field:r.field},null,8,["field"])]))}},_=["placeholder","disabled"],$={__name:"CheckboxField",props:{field:{type:String,required:!0},labelName:{type:String,required:!0},placeholder:{type:String,default:null},isShow:{type:Object,default:()=>({label:!0,error:!0,isDisabled:!1})}},setup(r){const{field:o}=r,{value:t,error:n,attrs:d}=f.useField(o),i=e.computed(()=>n.value?"bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500":"bg-gray-50 border border-gray-30 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500");return(c,l)=>(e.openBlock(),e.createElementBlock("div",null,[r.isShow.label?(e.openBlock(),e.createBlock(p,{key:0,labelName:r.labelName,field:r.field},null,8,["labelName","field"])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({class:i.value,type:"checkbox",placeholder:r.placeholder,"onUpdate:modelValue":l[0]||(l[0]=a=>e.isRef(t)?t.value=a:null)},e.unref(d),{onChange:l[1]||(l[1]=a=>c.$emit("onChange",e.unref(t))),disabled:r.isShow.isDisabled}),null,16,_),[[e.vModelCheckbox,e.unref(t)]]),r.isShow.error?(e.openBlock(),e.createBlock(k,{key:1,field:r.field},null,8,["field"])):e.createCommentVNode("",!0)]))}},C=["step","placeholder","disabled"],D={__name:"NumberField",props:{field:{type:String,required:!0},labelName:{type:String,required:!0},placeholder:{type:String,default:null},isShow:{type:Object,default:()=>({label:!0,error:!0,isDisabled:!1})},step:{type:String,default:null}},setup(r){const{field:o}=r,{value:t,error:n,attrs:d}=f.useField(o),i=e.computed(()=>n.value?"bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500":"bg-gray-50 border border-gray-30 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500");return(c,l)=>(e.openBlock(),e.createElementBlock("div",null,[r.isShow.label?(e.openBlock(),e.createBlock(p,{key:0,labelName:r.labelName,field:r.field},null,8,["labelName","field"])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({class:i.value,type:"number",step:r.step?r.step:null,placeholder:r.placeholder,"onUpdate:modelValue":l[0]||(l[0]=a=>e.isRef(t)?t.value=a:null)},e.unref(d),{onInput:l[1]||(l[1]=a=>c.$emit("onInput",e.unref(t))),disabled:r.isShow.isDisabled}),null,16,C),[[e.vModelText,e.unref(t)]]),r.isShow.error?(e.openBlock(),e.createBlock(k,{key:1,field:r.field},null,8,["field"])):e.createCommentVNode("",!0)]))}},F={class:"pb-4 bg-white dark:bg-gray-900"},T=e.createElementVNode("label",{for:"table-search",class:"sr-only"},"Search",-1),q={class:"relative mt-1"},j=e.createElementVNode("div",{class:"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"},[e.createElementVNode("svg",{class:"w-5 h-5 text-gray-500 dark:text-gray-400","aria-hidden":"true",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z","clip-rule":"evenodd"})])],-1),O={class:"relative overflow-x-auto shadow-md sm:rounded-lg"},M={class:"w-full text-sm text-left text-gray-500 dark:text-gray-400"},L={class:"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"},P=e.createElementVNode("th",{scope:"col",class:"px-6 py-3"},null,-1),z={class:"flex items-center px-6 py-4 space-x-3"},A={__name:"Table",props:{headers:{type:Object,required:!0},data:{type:Array,required:!0}},setup(r){const o=r,{data:t,headers:n}=e.toRefs(o),d=e.defineAsyncComponent(()=>Promise.resolve().then(()=>G)),i=e.defineAsyncComponent(()=>Promise.resolve().then(()=>K)),c=e.ref(null),l=e.ref("asc"),a=e.ref(""),Q=e.computed(()=>{let u=t.value;if(a.value){const m=a.value.toLowerCase();u=u.filter(b=>Object.values(b).some(g=>String(g).toLowerCase().includes(m)))}if(c.value!==null){const m=Object.keys(n.value)[c.value];u.sort((b,g)=>{const y=b[m],h=g[m];return y<h?l.value==="asc"?-1:1:y>h?l.value==="asc"?1:-1:0})}return u}),W=u=>{u===c.value?l.value=l.value==="asc"?"desc":"asc":(c.value=u,l.value="asc")};return(u,m)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",F,[T,e.createElementVNode("div",q,[j,e.withDirectives(e.createElementVNode("input",{type:"text","onUpdate:modelValue":m[0]||(m[0]=b=>a.value=b),id:"table-search",class:"block p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",placeholder:"Ara..."},null,512),[[e.vModelText,a.value]])])]),e.createElementVNode("div",O,[e.createElementVNode("table",M,[e.createElementVNode("thead",L,[e.createElementVNode("tr",null,[e.createVNode(e.unref(d),{onSortList:W}),P])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Q.value,(b,g)=>(e.openBlock(),e.createElementBlock("tr",{class:"bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 odd:bg-white even:bg-gray-50",key:b.id},[e.createVNode(e.unref(i),{item:b,index:g,headers:e.unref(n)},null,8,["item","index","headers"]),e.createElementVNode("td",z,[e.renderSlot(u.$slots,"actions",{item:b})])]))),128))])])])],64))}},R=e.createElementVNode("th",{scope:"col",class:"px-6 py-3 font-medium tracking-wider"},"#",-1),H=["onClick"],U={class:"flex items-center"},I=e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"w-3 h-3 ml-1","aria-hidden":"true",fill:"currentColor",viewBox:"0 0 320 512"},[e.createElementVNode("path",{d:"M27.66 224h264.7c24.6 0 36.89-29.78 19.54-47.12l-132.3-136.8c-5.406-5.406-12.47-8.107-19.53-8.107c-7.055 0-14.09 2.701-19.45 8.107L8.119 176.9C-9.229 194.2 3.055 224 27.66 224zM292.3 288H27.66c-24.6 0-36.89 29.77-19.54 47.12l132.5 136.8C145.9 477.3 152.1 480 160 480c7.053 0 14.12-2.703 19.53-8.109l132.3-136.8C329.2 317.8 316.9 288 292.3 288z"})],-1),G=Object.freeze(Object.defineProperty({__proto__:null,default:{__name:"TableHeader",props:{headers:{type:Object,required:!0}},emits:["sortList"],setup(r,{emit:o}){return(t,n)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[R,(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.headers,(d,i,c)=>(e.openBlock(),e.createElementBlock("th",{scope:"col",class:"px-6 py-3",key:c,onClick:l=>o("sortList",c)},[e.createElementVNode("div",U,[e.createTextVNode(e.toDisplayString(d)+" ",1),I])],8,H))),128))],64))}}},Symbol.toStringTag,{value:"Module"})),J={scope:"row",class:"px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"},K=Object.freeze(Object.defineProperty({__proto__:null,default:{__name:"TableData",props:{headers:{type:Object,required:!0},item:{type:Object,required:!0},index:{type:Number,required:!0}},setup(r){return(o,t)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("th",J,e.toDisplayString(r.index+1),1),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.headers,(n,d)=>(e.openBlock(),e.createElementBlock("td",{class:"px-6 py-4",key:d},e.toDisplayString(r.item[d]),1))),128))],64))}}},Symbol.toStringTag,{value:"Module"}));s.CheckboxField=$,s.NumberField=D,s.SelectField=S,s.Table=A,s.TextField=E,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});