@josercl/form-maker 1.2.0 → 1.3.0

package/lib/composables/useVModel.ts

@@ -0,0 +1,14 @@
+import { computed } from 'vue';
+import type {WritableComputedRef} from "vue";
+
+type PropGetter<T> = () => T
+
+type Emitter = (event: string, ...args: any[]) => void
+
+export default function useVModel<T>(getter: PropGetter<T>, emit: Emitter, propName?: string): WritableComputedRef<T> {
+  const fixedPropName = propName ?? 'modelValue'
+  return computed({
+    get: () => getter(),
+    set: (value: T) => emit(`update:${fixedPropName}`, value),
+  });
+}

package/{index.js → lib/index.js}

@@ -1,14 +1,14 @@
-import FormMakerComponent from './lib/components/FormMaker.vue';
-import FormMakerInput from './lib/components/FormMakerInput.vue';
-import CheckboxInput from './lib/components/inputs/CheckboxInput.vue';
-import FileInput from './lib/components/inputs/FileInput.vue';
-import FormMakerInputError from './lib/components/texts/FormMakerInputError.vue';
-import FormMakerInputHelp from './lib/components/texts/FormMakerInputHelp.vue';
-import FormMakerInputLabel from './lib/components/texts/FormMakerInputLabel.vue';
-import RadioInput from './lib/components/inputs/RadioInput.vue';
-import SelectInput from './lib/components/inputs/SelectInput.vue';
-import TextAreaInput from './lib/components/inputs/TextAreaInput.vue';
-import BasicInput from './lib/components/inputs/BasicInput.vue';
+import FormMakerComponent from './components/FormMaker.vue';
+import FormMakerInput from './components/FormMakerInput.vue';
+import CheckboxInput from './components/inputs/CheckboxInput.vue';
+import FileInput from './components/inputs/FileInput.vue';
+import FormMakerInputError from './components/SimpleComponent';
+import FormMakerInputHelp from './components/SimpleComponent';
+import FormMakerInputLabel from './components/texts/FormMakerInputLabel.vue';
+import RadioInput from './components/inputs/RadioInput.vue';
+import SelectInput from './components/inputs/SelectInput.vue';
+import TextAreaInput from './components/inputs/TextAreaInput.vue';
+import BasicInput from './components/inputs/BasicInput.vue';
 
 const defaultOptions = {
   classes: {

package/lib/model.d.ts

@@ -0,0 +1,48 @@
+import type {InputHTMLAttributes} from "vue";
+
+export interface InputType {
+  id?: string | null
+  name: string
+  type?: string | null
+  label?: string | null
+  columnClass?: string | null
+}
+
+export interface FormMakerProps {
+  loading?: boolean
+  hasActions?: boolean
+  modelValue: Record<string, any>
+  fields: InputType[][],
+  hideDivider?: boolean
+  rowClass?: string | null
+  columnClass?: string | null
+  labelClass?: string | null
+  inputGroupClass?: string | null
+  inputWrapperClass?: string | null
+  inputErrorClass?: string | null
+  inputClass?: string | null
+  errorClass?: string | null
+  helpTextClass?: string | null
+  submitButtonClass?: string | null
+  submitButtonText?: string | null
+}
+
+export interface FormMakerInputProps extends /* @vue-ignore */ InputHTMLAttributes{
+  loading?: boolean | undefined
+  modelValue: any,
+  error?: string | undefined
+  helpText?: string | undefined
+  label?: string | undefined
+  type?: string,
+  rules?: RuleValidator[]
+}
+
+export interface SelectOption {
+  label: string
+  value: any
+}
+
+export interface RuleValidator {
+  message: string
+  validator: (val: any) => boolean
+}

package/package.json

@@ -1,46 +1,60 @@
 {
   "name": "@josercl/form-maker",
-  "version": "1.2.0",
+  "version": "1.3.0",
+  "type": "module",
   "description": "Form generator using vue 3",
   "author": "Jose Carrero <josercl@gmail.com>",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "files": [
+    "dist",
+    "lib"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "homepage": "https://josercl.gitlab.io/form-maker",
   "scripts": {
-    "docs": "vite -c docs.config.js dev --port 9090",
     "dev": "vite -c dev.config.js dev",
-    "build": "vite build",
+    "docs": "vite -c docs.config.js dev --port 9090",
+    "build": "run-p type-check build-only",
     "build-docs": "vite -c docs.config.js build",
     "preview": "vite -c docs.config.js preview --port 5050",
-    "lint": "eslint --ext .vue,.js lib/ docs/ dev/ index.js --fix"
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
+    "lint": "eslint --ext .vue,.js,.ts lib/ docs/ dev/ --fix"
   },
-  "main": "./index.js",
-  "files": [
-    "index.js",
-    "lib/**",
-    "umd/*.js"
-  ],
-  "homepage": "https://josercl.gitlab.io/form-maker",
   "dependencies": {
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@babel/eslint-parser": "^7.17.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-brands-svg-icons": "^5.15.1",
     "@fortawesome/free-regular-svg-icons": "^5.15.1",
     "@fortawesome/vue-fontawesome": "^3.0.0-2",
-    "@tailwindcss/forms": "^0.4.0",
-    "@tailwindcss/typography": "^0.5.2",
-    "@vitejs/plugin-vue": "^2.2.2",
-    "@vue/eslint-config-airbnb": "^6.0.0",
-    "autoprefixer": "^10.4.2",
-    "cssnano": "^5.1.14",
-    "eslint": "^8.10.0",
-    "eslint-plugin-vue": "^8.5.0",
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@tailwindcss/forms": "^0.5.4",
+    "@tailwindcss/typography": "^0.5.9",
+    "@tsconfig/node18": "^2.0.1",
+    "@types/node": "^18.16.17",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/tsconfig": "^0.4.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.39.0",
+    "eslint-plugin-vue": "^9.11.0",
     "highlight.js": "^10.2.1",
-    "postcss": "^8.4.7",
-    "tailwindcss": "^3.0.23",
-    "vite": "^2.8.4",
-    "vue-router": "^4.2.4"
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.26",
+    "rollup-plugin-typescript2": "^0.35.0",
+    "tailwindcss": "^3.3.3",
+    "typescript": "~5.0.4",
+    "vite": "^4.3.9",
+    "vue-router": "^4.2.2",
+    "vue-tsc": "^1.6.5"
   },
   "keywords": [
     "vue 3",

package/lib/components/inputs/FormInputMixin.js

@@ -1,37 +0,0 @@
-import { inject } from 'vue';
-
-export const injectFormClasses = () => {
-  const labelClass = inject('labelClass', null);
-  const inputClass = inject('inputClass', null);
-  const inputWrapperClass = inject('inputWrapperClass', null);
-  const inputGroupClass = inject('inputGroupClass', null);
-  const inputErrorClass = inject('inputErrorClass', null);
-  const errorClass = inject('errorClass', null);
-  const helpTextClass = inject('helpTextClass', null);
-
-  return {
-    labelClass,
-    inputClass,
-    inputWrapperClass,
-    inputGroupClass,
-    inputErrorClass,
-    errorClass,
-    helpTextClass,
-  };
-};
-
-export const FormInputMixin = {
-  emits: [ 'update:modelValue' ],
-  props: {
-    loading: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    modelValue: { default: null },
-    error: { type: String, default: null },
-    helpText: { type: String, default: null },
-    id: { type: String, default: null },
-    label: { type: String, default: null },
-    name: { type: String, default: null },
-    placeholder: { type: String, default: null },
-    type: { type: String, default: 'text' },
-  },
-};

package/lib/components/texts/FormMakerInputError.vue

@@ -1,5 +0,0 @@
-<script>
-import simpleComponent from '../../utils.js';
-
-export default simpleComponent();
-</script>

package/lib/components/texts/FormMakerInputHelp.vue

@@ -1,5 +0,0 @@
-<script>
-import simpleComponent from '../../utils.js';
-
-export default simpleComponent();
-</script>

package/lib/composables/useVModel.js

@@ -1,8 +0,0 @@
-import { computed } from 'vue';
-
-export default function useVModel(props, emit, propName = 'modelValue') {
-  return computed({
-    get: () => props[propName],
-    set: value => emit(`update:${propName}`, value),
-  });
-}

package/lib/utils.js

@@ -1,9 +0,0 @@
-import { h } from 'vue';
-
-const simpleComponent = () => ({
-  setup(props, { slots, attrs }) {
-    return () => h('div', attrs, slots.default());
-  },
-});
-
-export default simpleComponent;

package/umd/index.umd.js

@@ -1 +0,0 @@
-(function(e,S){typeof exports=="object"&&typeof module!="undefined"?module.exports=S(require("vue")):typeof define=="function"&&define.amd?define(["vue"],S):(e=typeof globalThis!="undefined"?globalThis:e||self,e.FormMaker=S(e.Vue))})(this,function(e){"use strict";const S=["onSubmit"],A={key:0},O=["disabled"],x={__name:"FormMaker",props:{loading:{type:Boolean,default:!1},hasActions:{type:Boolean,default:!0},modelValue:{type:Object,default:()=>({})},fields:{type:Array,default:()=>[]},hideDivider:{type:Boolean,default:!1},rowClass:{type:String,default:null},columnClass:{type:String,default:null},labelClass:{type:String,default:null},inputGroupClass:{type:String,default:null},inputWrapperClass:{type:String,default:null},inputErrorClass:{type:String,default:null},inputClass:{type:String,default:null},errorClass:{type:String,default:null},helpTextClass:{type:String,default:null},submitButtonClass:{type:String,default:null},submitButtonText:{type:String,default:"Submit"}},emits:["submit","update:modelValue"],setup(r,{emit:o}){const l=r,t=()=>o("submit"),a=e.computed(()=>l.fields.length>0?l.fields.map(i=>{let f=i;return Array.isArray(i)||(f=[i]),f.map(b=>b.id?b:{...b,id:`formMaker_${new Date().getTime()}_${b.name}`})}):Object.keys(l.modelValue).map(i=>[{name:i,label:i,id:`formMaker_${i}`}])),{rowClass:s,columnClass:n,labelClass:k,inputGroupClass:c,inputWrapperClass:h,inputErrorClass:C,inputClass:m,errorClass:y,helpTextClass:g,submitButtonClass:$,modelValue:N}=e.toRefs(l);e.provide("labelClass",k.value||e.inject("form-label")),e.provide("inputGroupClass",c.value||e.inject("input-group")),e.provide("inputWrapperClass",h.value||e.inject("input-wrapper")),e.provide("inputErrorClass",C.value||e.inject("input-error")),e.provide("inputClass",m.value||e.inject("input")),e.provide("errorClass",y.value||e.inject("error")),e.provide("helpTextClass",g.value||e.inject("help-text"));const p=s.value||e.inject("form-row"),V=n.value||e.inject("form-column"),F=$.value||e.inject("submit-button"),T=i=>{const f=i.split(".");let b=N.value;for(let _=0;_<f.length-1;_+=1){const E=b[f[_]];if(!E)break;b=E}return b},w=i=>{const f=i.split(".");return f[f.length-1]};return(i,f)=>{const b=e.resolveComponent("form-maker-input");return e.openBlock(),e.createElementBlock("form",{class:"form-maker",onSubmit:e.withModifiers(t,["prevent"])},[r.loading?e.renderSlot(i.$slots,"loading",{key:0},()=>[e.createTextVNode(" Loading... ")]):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(_,E)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(p)),key:`fieldRow_${E}`},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(_,(B,le)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(V),B.columnClass]),key:`field_${E}_${le}`},[e.renderSlot(i.$slots,`${B.name}`,{field:B},()=>[e.createVNode(b,e.mergeProps({modelValue:T(B.name)[w(B.name)],"onUpdate:modelValue":re=>T(B.name)[w(B.name)]=re},B),null,16,["modelValue","onUpdate:modelValue"])])],2))),128))],2))),128))]),e.renderSlot(i.$slots,"extra"),e.renderSlot(i.$slots,"divider",{},()=>[r.hasActions&&!r.hideDivider?(e.openBlock(),e.createElementBlock("hr",A)):e.createCommentVNode("",!0)]),r.hasActions?e.renderSlot(i.$slots,"actions",{key:1},()=>[e.renderSlot(i.$slots,"submit-button",{},()=>[e.createElementVNode("button",{class:e.normalizeClass(e.unref(F)),disabled:r.loading,type:"submit"},e.toDisplayString(r.submitButtonText),11,O)]),e.renderSlot(i.$slots,"extra-buttons")]):e.createCommentVNode("",!0)],40,S)}}},R=(r,o)=>{const l=e.toRaw(o),t=e.ref(null);return e.watch(r,(a,s)=>{if(t.value=null,a!==s)for(let n=0;n<l.length;n+=1){const k=l[n];if(!k.validator(a)){t.value=k.message;break}}},{immediate:!0}),t};function j(r,o,l="modelValue"){return e.computed({get:()=>r[l],set:t=>o(`update:${l}`,t)})}const G=()=>{const r=e.inject("labelClass",null),o=e.inject("inputClass",null),l=e.inject("inputWrapperClass",null),t=e.inject("inputGroupClass",null),a=e.inject("inputErrorClass",null),s=e.inject("errorClass",null),n=e.inject("helpTextClass",null);return{labelClass:r,inputClass:o,inputWrapperClass:l,inputGroupClass:t,inputErrorClass:a,errorClass:s,helpTextClass:n}},d={emits:["update:modelValue"],props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},modelValue:{default:null},error:{type:String,default:null},helpText:{type:String,default:null},id:{type:String,default:null},label:{type:String,default:null},name:{type:String,default:null},placeholder:{type:String,default:null},type:{type:String,default:"text"}}},I=Object.assign({inheritAttrs:!1},{__name:"FormMakerInput",props:{...d.props,rules:{type:Array,default:()=>[]}},emits:d.emits,setup(r,{emit:o}){const l=r,t=j(l,o),{labelClass:a,inputClass:s,inputWrapperClass:n,inputGroupClass:k,inputErrorClass:c,errorClass:h,helpTextClass:C}=G(),m=e.computed(()=>Boolean(l.label)),y=e.computed(()=>Boolean(l.helpText)),g=R(t,l.rules),$=e.computed(()=>Boolean(l.error)||Boolean(g.value)),N=e.computed(()=>l.error?l.error:g.value);return(p,V)=>{const F=e.resolveComponent("form-maker-label"),T=e.resolveComponent("form-maker-help"),w=e.resolveComponent("form-maker-error"),i=e.resolveComponent("rule-evaluator");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([$.value&&e.unref(c),e.unref(n)])},[p.type!=="checkbox"?e.renderSlot(p.$slots,"label",{key:0},()=>[m.value?(e.openBlock(),e.createBlock(F,{key:0,id:p.id,class:e.normalizeClass(e.unref(a))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(p.label),1)]),_:1},8,["id","class"])):e.createCommentVNode("",!0)]):e.createCommentVNode("",!0),e.renderSlot(p.$slots,"default",{},()=>[e.createElementVNode("div",{class:e.normalizeClass([e.unref(k),$.value&&e.unref(c)])},[e.renderSlot(p.$slots,"before"),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(`form-maker-input-${p.type}`),e.mergeProps({modelValue:e.unref(t),"onUpdate:modelValue":V[0]||(V[0]=f=>e.isRef(t)?t.value=f:null)},{...p.$props,...p.$attrs},{class:[p.type!=="checkbox"&&e.unref(s),$.value&&e.unref(c)],label:p.label}),null,16,["modelValue","class","label"])),e.renderSlot(p.$slots,"after")],2)]),e.renderSlot(p.$slots,"help",{},()=>[y.value?(e.openBlock(),e.createBlock(T,{key:0,class:e.normalizeClass(e.unref(C))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(p.helpText),1)]),_:1},8,["class"])):e.createCommentVNode("",!0)]),e.renderSlot(p.$slots,"errors",{},()=>[$.value?(e.openBlock(),e.createBlock(w,{key:0,class:e.normalizeClass(e.unref(h))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(N.value),1)]),_:1},8,["class"])):e.createCommentVNode("",!0),r.rules.length?(e.openBlock(),e.createBlock(i,{key:1,rules:r.rules,value:p.modelValue,modelValue:e.unref(g),"onUpdate:modelValue":V[1]||(V[1]=f=>e.isRef(g)?g.value=f:null)},null,8,["rules","value","modelValue"])):e.createCommentVNode("",!0)])],2)}}}),L=["checked","value","onClick"],z={__name:"CheckboxInput",props:{...d.props,options:{type:Array,default:()=>[]}},emits:d.emits,setup(r,{emit:o}){const l=r,{options:t,label:a}=e.toRefs(l),s=e.computed(()=>t.value.length===0),n=e.computed(()=>l.modelValue),k=e.computed(()=>(Array.isArray(n.value)?n.value:[n.value]).filter(m=>!!m)),c=e.computed(()=>s.value?[{label:a.value,value:!0}]:t.value),h=C=>{let m=[...k.value];m.indexOf(C)===-1?m.push(C):m=m.filter(y=>y!==C),s.value?o("update:modelValue",m.length>0):o("update:modelValue",m)};return(C,m)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(y,g)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${g}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(C.$props,{checked:k.value.indexOf(y.value)!==-1,value:y.value,type:"checkbox",onClick:()=>h(y.value)}),null,16,L),e.createTextVNode(" "+e.toDisplayString(y.label),1)])]))),128))}},P={__name:"FileInput",props:d.props,emits:d.emits,setup(r,{emit:o}){const l=t=>{if(t.target.files.length){const a=t.target.files[0];o("update:modelValue",a)}};return(t,a)=>(e.openBlock(),e.createElementBlock("input",e.mergeProps(t.$props,{type:"file",onChange:l}),null,16))}},D=()=>({setup(r,{slots:o,attrs:l}){return()=>e.h("div",l,o.default())}}),U=D(),W=D(),q={props:{id:{type:String,default:null}},setup(r,{slots:o,attrs:l}){return()=>e.h("label",{...l,for:r.id},o.default())}},H=["checked","value"],J={__name:"RadioInput",props:{...d.props,options:{type:Array,default:()=>[]}},emits:d.emits,setup(r,{emit:o}){const l=t=>o("update:modelValue",t.target.value);return(t,a)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,(s,n)=>(e.openBlock(),e.createElementBlock("div",{key:`option_${n}`},[e.createElementVNode("label",null,[e.createElementVNode("input",e.mergeProps(t.$props,{checked:s.value===t.modelValue,value:s.value,type:"radio",onChange:l}),null,16,H),e.createTextVNode(" "+e.toDisplayString(s.label),1)])]))),128))}},K=["id","disabled","name","placeholder"],Q=["label"],X=["value"],Y=["value"],Z={__name:"SelectInput",props:{...d.props,options:{type:Array,default:()=>[]},optionGroups:{type:Object,default:()=>({})}},emits:d.emits,setup(r,{emit:o}){const l=r,t=j(l,o),a=Object.keys(l.optionGroups).length>0,s=e.computed(()=>l.options.map(n=>typeof n=="object"?n:{label:n,value:n}));return(n,k)=>e.withDirectives((e.openBlock(),e.createElementBlock("select",{id:n.id,"onUpdate:modelValue":k[0]||(k[0]=c=>e.isRef(t)?t.value=c:null),disabled:n.disabled,name:n.name,placeholder:n.placeholder},[a?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(r.optionGroups,(c,h)=>(e.openBlock(),e.createElementBlock("optgroup",{key:`optGroup_${h}`,label:h},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c,(C,m)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${m}`,value:m},e.toDisplayString(C),9,X))),128))],8,Q))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(s.value,(c,h)=>(e.openBlock(),e.createElementBlock("option",{key:`option_${h}`,value:c.value},e.toDisplayString(c.label),9,Y))),128))],8,K)),[[e.vModelSelect,e.unref(t)]])}},v=["id","disabled","name","placeholder"],ee={__name:"TextAreaInput",props:d.props,emits:d.emits,setup(r,{emit:o}){const t=j(r,o);return(a,s)=>e.withDirectives((e.openBlock(),e.createElementBlock("textarea",{id:a.id,"onUpdate:modelValue":s[0]||(s[0]=n=>e.isRef(t)?t.value=n:null),disabled:a.disabled,name:a.name,placeholder:a.placeholder},null,8,v)),[[e.vModelText,e.unref(t)]])}},te=["type"],u={__name:"BasicInput",props:d.props,emits:d.emits,setup(r,{emit:o}){const t=j(r,o);return(a,s)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps({"onUpdate:modelValue":s[0]||(s[0]=n=>e.isRef(t)?t.value=n:null),type:a.type},a.$props),null,16,te)),[[e.vModelDynamic,e.unref(t)]])}},M={classes:{"form-row":"form-maker-row","form-column":"form-maker-column","form-label":"form-maker-label","input-group":"form-maker-input-group","input-wrapper":"form-maker-input-wrapper","input-error":"form-maker-input-error",input:"form-maker-input",error:"form-maker-error","help-text":"form-maker-help-text","submit-button":"form-maker-submit"},components:{"form-maker-input-color":u,"form-maker-input-date":u,"form-maker-input-email":u,"form-maker-input-month":u,"form-maker-input-number":u,"form-maker-input-password":u,"form-maker-input-search":u,"form-maker-input-tel":u,"form-maker-input-time":u,"form-maker-input-text":u,"form-maker-input-url":u,"form-maker-input-week":u,"form-maker-input-range":u,"form-maker-input-file":P,"form-maker-input-textarea":ee,"form-maker-input-select":Z,"form-maker-input-checkbox":z,"form-maker-input-radio":J,"form-maker-label":q,"form-maker-help":W,"form-maker-error":U}};return{install:(r,o={})=>{const l={classes:{...M.classes,...o.classes},components:{...M.components,...o.components}};r.component("FormMaker",x),r.component("FormMakerInput",I),Object.keys(l.classes).forEach(t=>{r.provide(t,l.classes[t])}),Object.keys(l.components).forEach(t=>{r.component(t,l.components[t])})}}});