@josercl/form-maker 1.0.0-alpha19 → 1.1.0-beta03

package/lib/components/inputs/FileInput.vue

@@ -1,3 +1,17 @@
+<script setup>
+import { FormInputMixin } from './FormInputMixin';
+
+defineProps(FormInputMixin.props);
+const emit = defineEmits(FormInputMixin.emits);
+
+const handleFileSelect = event => {
+  if (event.target.files.length) {
+    const file = event.target.files[0];
+    emit('update:modelValue', file);
+  }
+};
+</script>
+
 <template>
   <input
     v-bind="$props"
@@ -5,25 +19,3 @@
     @change="handleFileSelect"
   >
 </template>
-
-<script>
-import { FormInputMixin } from './FormInputMixin';
-
-export default {
-  name: 'FileInput',
-  mixins: [ FormInputMixin ],
-  emits: [ 'update:modelValue' ],
-  setup(props, { emit }) {
-    const handleFileSelect = event => {
-      if (event.target.files.length) {
-        const file = event.target.files[0];
-        emit('update:modelValue', file);
-      }
-    };
-
-    return {
-      handleFileSelect,
-    };
-  },
-};
-</script>

package/lib/components/inputs/FormInputMixin.js

@@ -23,9 +23,9 @@ export const injectFormClasses = () => {
 export const getFormInputComputeds = props => {
   const { label, error, helpText } = toRefs(props);
 
-  const hasErrors = computed(() => !!error.value);
-  const hasLabel = computed(() => !!label.value);
-  const hasHelpText = computed(() => !!helpText.value);
+  const hasErrors = computed(() => Boolean(error.value));
+  const hasLabel = computed(() => Boolean(label.value));
+  const hasHelpText = computed(() => Boolean(helpText.value));
 
   return {
     hasErrors,
@@ -47,7 +47,5 @@ export const FormInputMixin = {
     name: { type: String, default: null },
     placeholder: { type: String, default: null },
     type: { type: String, default: 'text' },
-    options: { type: Array, default: () => [] },
-    optionGroups: { type: Object, default: () => ({}) },
   },
 };

package/lib/components/inputs/RadioInput.vue

@@ -1,3 +1,19 @@
+<script setup>
+import { FormInputMixin } from './FormInputMixin';
+
+defineProps({
+  ...FormInputMixin.props,
+  options: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(FormInputMixin.emits);
+
+const handleClick = e => emit('update:modelValue', e.target.value);
+</script>
+
 <template>
   <div
     v-for="(option, i) in options"
@@ -15,26 +31,3 @@
     </label>
   </div>
 </template>
-
-<script>
-import { FormInputMixin } from './FormInputMixin';
-
-export default {
-  name: 'RadioInput',
-  emits: [ 'update:modelValue' ],
-  mixins: [ FormInputMixin ],
-  props: {
-    label: {
-      type: String,
-      default: null,
-    },
-  },
-  setup(props, { emit }) {
-    const handleClick = e => emit('update:modelValue', e.target.value);
-
-    return {
-      handleClick,
-    };
-  },
-};
-</script>

package/lib/components/inputs/SelectInput.vue

@@ -1,3 +1,39 @@
+<script setup>
+import { computed } from 'vue';
+import { FormInputMixin } from './FormInputMixin';
+import setupVModel from '../../utils';
+
+const props = defineProps({
+  ...FormInputMixin.props,
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  optionGroups: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(FormInputMixin.emits);
+
+const value = setupVModel(props, emit);
+
+const hasGroups = Object.keys(props.optionGroups).length > 0;
+
+const fixedOptions = computed(() => props.options.map(o => {
+  if (typeof o === 'object') {
+    return o;
+  }
+  return {
+    label: o,
+    value: o,
+  };
+}));
+
+console.log(fixedOptions.value);
+</script>
+
 <template>
   <select
     :id="id"
@@ -13,16 +49,16 @@
         :label="key"
       >
         <option
-          v-for="(optLabel, value) in opts"
-          :key="`option_${value}`"
-          :value="value"
+          v-for="(optLabel, optValue) in opts"
+          :key="`option_${optValue}`"
+          :value="optValue"
         >
           {{ optLabel }}
         </option>
       </optgroup>
     </template>
     <option
-      v-for="(option,i) in options"
+      v-for="(option,i) in fixedOptions"
       v-else
       :key="`option_${i}`"
       :value="option.value"
@@ -31,23 +67,3 @@
     </option>
   </select>
 </template>
-
-<script>
-import setupVModel from '../../utils';
-import { FormInputMixin } from './FormInputMixin';
-
-export default {
-  name: 'SelectInput',
-  mixins: [ FormInputMixin ],
-  setup(props, { emit }) {
-    const value = setupVModel(props, emit);
-
-    const hasGroups = Object.keys(props.optionGroups).length > 0;
-
-    return {
-      value,
-      hasGroups,
-    };
-  },
-};
-</script>

package/lib/components/inputs/TextAreaInput.vue

@@ -1,3 +1,13 @@
+<script setup>
+import setupVModel from '../../utils';
+import { FormInputMixin } from './FormInputMixin';
+
+const props = defineProps(FormInputMixin.props);
+const emit = defineEmits(FormInputMixin.emits);
+
+const value = setupVModel(props, emit);
+</script>
+
 <template>
   <textarea
     :id="id"
@@ -7,20 +17,3 @@
     :placeholder="placeholder"
   />
 </template>
-
-<script>
-import setupVModel from '../../utils';
-import { FormInputMixin } from './FormInputMixin';
-
-export default {
-  name: 'TextAreaInput',
-  mixins: [ FormInputMixin ],
-  setup(props, { emit }) {
-    const value = setupVModel(props, emit);
-
-    return {
-      value,
-    };
-  },
-};
-</script>

package/lib/components/texts/FormMakerInputError.vue

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

package/lib/components/texts/FormMakerInputHelp.vue

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

package/lib/components/texts/FormMakerInputLabel.vue

@@ -0,0 +1,15 @@
+<script>
+import { h } from 'vue';
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: null,
+    },
+  },
+  setup(props, { slots, attrs }) {
+    return () => h('label', { ...attrs, for: props.id }, slots.default());
+  },
+};
+</script>

package/lib/utils.js

@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed, h } from 'vue';
 
 const setupVModel = (props, emit, propName = 'modelValue') => computed({
   get: () => props[propName],
@@ -6,3 +6,9 @@ const setupVModel = (props, emit, propName = 'modelValue') => computed({
 });
 
 export default setupVModel;
+
+export const simpleComponent = () => ({
+  setup(props, { slots, attrs }) {
+    return () => h('div', attrs, slots.default());
+  },
+});

package/package.json

@@ -1,47 +1,44 @@
 {
   "name": "@josercl/form-maker",
-  "version": "1.0.0-alpha19",
+  "version": "1.1.0-beta03",
   "description": "Form generator using vue 3",
   "author": "Jose Carrero <josercl@gmail.com>",
   "scripts": {
-    "build:umd": "vue-cli-service build --target lib --formats umd,umd-min --dest umd --filename index --name FormMaker index.js",
-    "build:common": "vue-cli-service build --target lib --formats commonjs --dest commonjs --filename index --name FormMaker index.js",
-    "build": "npm run build:umd && npm run build:common",
-    "build-docs": "vue-cli-service build",
-    "serve": "vue-cli-service serve",
-    "lint": "vue-cli-service lint --ext .js,.vue lib/ docs/ index.js"
+    "docs": "vite -c docs.config.js dev --port 9090",
+    "dev": "vite -c dev.config.js dev",
+    "build": "vite build",
+    "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"
   },
   "files": [
     "index.js",
     "lib/**",
-    "umd/*.js",
-    "umd/*.map",
-    "commonjs/*.js",
-    "commonjs/*.map"
+    "umd/*.js"
   ],
   "homepage": "https://josercl.gitlab.io/form-maker",
   "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "vue": "^3.2.31"
   },
   "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/typography": "^0.2.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "^4.5.8",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "@vue/eslint-config-airbnb": "^5.0.2",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-vue": "^7.0.0-0",
+    "@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",
+    "eslint": "^8.10.0",
+    "eslint-plugin-vue": "^8.5.0",
     "highlight.js": "^10.2.1",
-    "tailwindcss": "^1.9.6",
-    "vue-router": "^4.0.0-rc.1"
+    "postcss": "^8.4.7",
+    "tailwindcss": "^3.0.23",
+    "vite": "^2.8.4",
+    "vue-router": "^4.0.12"
   },
   "keywords": [
     "vue 3",