@josercl/form-maker 1.0.0-alpha18 → 1.1.0-beta02

package/lib/components/inputs/FormMakerInputError.vue

@@ -1,15 +1,12 @@
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
 <template>
   <div>{{ text }}</div>
 </template>
-
-<script>
-export default {
-  name: 'FormMakerInputError',
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-  },
-};
-</script>

package/lib/components/inputs/FormMakerInputHelp.vue

@@ -1,15 +1,12 @@
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
 <template>
   <div>{{ text }}</div>
 </template>
-
-<script>
-export default {
-  name: 'FormMakerInputHelp',
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-  },
-};
-</script>

package/lib/components/inputs/FormMakerInputLabel.vue

@@ -1,19 +1,16 @@
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    default: null,
+  },
+  id: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
 <template>
   <label :for="id">{{ text }}</label>
 </template>
-
-<script>
-export default {
-  name: 'FormMakerInputLabel',
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-    id: {
-      type: String,
-      default: null,
-    },
-  },
-};
-</script>

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/package.json

@@ -1,47 +1,44 @@
 {
   "name": "@josercl/form-maker",
-  "version": "1.0.0-alpha18",
+  "version": "1.1.0-beta02",
   "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"
   },
   "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",