Merge pull request #255 from asigloo/feature/change-to-vite

Feature/change to vite

Author: alvarosabu

.github/workflows/ci.yml

@@ -16,8 +16,6 @@ jobs:
         with:
           node-version: 12
       - name: Install dependencies
-        run: npm ci
-      - name: Run unit tests
-        run: npm run test --verbose
+        run: yarn
       - name: Build Library
-        run: npm run build
+        run: yarn build

.github/workflows/release.yml

@@ -16,16 +16,12 @@ jobs:
         with:
           node-version: 12
       - name: Install dependencies
-        run: npm ci
-      - name: Run unit tests
-        run: npm run test --verbose
+        run: yarn
       - name: Build Library
-        run: npm run build
-      - name: Build Types Declarations
-        run: npm run build:dts
+        run: yarn build
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           CI: true
-        run: npm run semantic-release
+        run: yarn semantic-release

.husky/pre-commit

@@ -1,4 +1,3 @@
 #!/bin/sh
 . "$(dirname $0)/_/husky.sh"
 
-npm run lint

.husky/pre-push

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname $0)/_/husky.sh"
 
-npm test
+

README.md

@@ -148,7 +148,7 @@ export default defineComponent({
 
 We've prepared some demos to show different use cases of the library and how to use each type of input field.
 
-To check them just run the command bellow which run the app at `http://localhost:6044/ `
+To check them just run the command bellow which run the app at `http://localhost:3000/ `
 
 ```
 yarn run serve

cypress.json

@@ -1,5 +1,5 @@
 {
-  "baseUrl": "http://localhost:6044",
+  "baseUrl": "http://localhost:3000",
   "pluginsFile": "tests/e2e/plugins/index.js",
   "testFiles": "**/*.e2e.js*"
 }

demos/vue-3/public/index.html

@@ -1,20 +1,14 @@
-<template>
-  <div id="app">
-    <Toolbar />
-    <router-view />
-  </div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Toolbar from './components/Toolbar.vue';
-
-const components = {
-  Toolbar,
-};
 
 export default defineComponent({
   name: 'app',
-  components,
 });
 </script>
+
+<template>
+  <div id="app">
+    <Toolbar />
+    <router-view />
+  </div>
+</template>

demos/vue-3/src/App.vue

@@ -5,12 +5,9 @@
       <li class="rounded w-2 h-2 bg-yellow-300 inline-block mr-1"></li>
       <li class="rounded w-2 h-2 bg-green-500 inline-block"></li>
     </ul>
-    <pre
-      data-cy="form-values"
-      class="shadow-lg pt-4"
-      :data-formValues="jsonValues"
-      >{{ content }}</pre
-    >
+    <pre data-cy="form-values" class="pt-4" :data-formValues="jsonValues">{{
+      content
+    }}</pre>
   </div>
 </template>
 
@@ -32,5 +29,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style></style>

demos/vue-3/src/components/Console.vue

@@ -9,10 +9,21 @@
       </h1>
     </div>
     <div class="right-nav">
-      <ul class="flex align-center">
-        <li v-for="nav in navs" :key="nav.name" class="ml-4">
-          <a :href="nav.href" class="hover:text-green-400 transition-colors">
-            <Icon :name="nav.icon" :alt="nav.name" />
+      <ul class="flex align-center text-xl">
+        <li class="ml-4">
+          <a
+            href="https://github.com/asigloo/vue-dynamic-forms"
+            class="text-gray-500 hover:text-green-400 transition-colors"
+          >
+            <codicon-github />
+          </a>
+        </li>
+        <li class="ml-4">
+          <a
+            href="https://vue-dynamic-forms.alvarosaburido.dev/"
+            class="text-gray-500 hover:text-green-400 transition-colors"
+          >
+            <ion-document-text-outline />
           </a>
         </li>
       </ul>
@@ -21,35 +32,16 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
-import Icon from './Icon.vue';
+import { computed, defineComponent } from 'vue';
 import { useRoute } from 'vue-router';
 
-const components = {
-  Icon,
-};
-
 export default defineComponent({
   name: 'toolbar',
-  components,
   setup() {
     const route = useRoute();
     const title = computed(() => route.meta.title || 'Vue Dynamic Forms');
 
-    const navs = ref([
-      {
-        icon: 'github',
-        name: 'Repo',
-        href: 'https://github.com/asigloo/vue-dynamic-forms',
-      },
-      {
-        icon: 'docs',
-        name: 'Docs',
-        href: 'https://vue-dynamic-forms.alvarosaburido.dev/',
-      },
-    ]);
-
-    return { title, navs };
+    return { title };
   },
 });
 </script>

demos/vue-3/src/components/Icon.vue

@@ -1,9 +1,11 @@
 import { createApp } from 'vue';
 import App from './App.vue';
-import './styles/main.scss';
+import './styles/main.css';
 import router from './router';
 
-import { createDynamicForms } from '../../../src';
+import { createDynamicForms } from '/@';
+
+/* import { createDynamicForms } from '../../../dist/as-dynamic-forms.es'; */
 
 const VueDynamicForms = createDynamicForms({
   autoValidate: true,
@@ -17,6 +19,8 @@ const VueDynamicForms = createDynamicForms({
 
 export const app = createApp(App);
 
+console.log({ app });
+
 app.use(VueDynamicForms);
 
 app.use(router).mount('#app');

demos/vue-3/src/components/Toolbar.vue

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* @import '/@/styles/themes/default.scss'; */

demos/vue-3/src/main.ts

@@ -0,0 +1,2 @@
+@import './_vendors';
+@import './base';

demos/vue-3/src/styles/_vendors.css

@@ -1,42 +1,9 @@
-<template>
-  <div class="page container">
-    <div class="mx-auto w-full sm:w-1/2 relative mb-24">
-      <div
-        class="absolute inset-0 bg-gradient-to-r from-blue-400 to-green-200 shadow-xl transform -skew-y-3 sm:skew-y-0 sm:-rotate-3 sm:rounded-3xl"
-      ></div>
-      <div class="relative card p-6 bg-white">
-        <DynamicForm
-          :form="form"
-          @submitted="handleSubmit"
-          @change="valueChanged"
-          @error="handleError"
-        />
-        <button
-          data-cy="submit"
-          class="btn bg-green-500 text-white hover:bg-green-700 mt-4"
-          submit="true"
-          :form="form?.id"
-        >
-          Try me
-        </button>
-      </div>
-    </div>
-    <div class="mx-auto w-full sm:w-1/2"><Console :content="formValues" /></div>
-  </div>
-</template>
-
 <script lang="ts">
-import { CheckboxField, TextField, SelectField } from '@/';
+import { CheckboxField, TextField, SelectField } from '/@/';
 import { computed, defineComponent, reactive } from 'vue';
-import Console from '../components/Console.vue';
 
-const components = {
-  Console,
-};
-/* } from '../../dist/as-dynamic-forms.esm'; */
 export default defineComponent({
   name: 'BasicDemo',
-  components,
   setup() {
     const formValues = reactive({});
 
@@ -92,4 +59,43 @@ export default defineComponent({
   },
 });
 </script>
-<style lang="scss"></style>
+<template>
+  <div class="page container">
+    <div class="mx-auto w-full sm:w-1/2 relative mb-24">
+      <div
+        class="
+          absolute
+          inset-0
+          bg-gradient-to-r
+          from-blue-400
+          to-green-200
+          shadow-xl
+          transform
+          -skew-y-3
+          sm:skew-y-0 sm:-rotate-3 sm:rounded-3xl
+        "
+      ></div>
+      <div class="relative card p-6 bg-white">
+        <DynamicForm
+          :form="form"
+          @submitted="handleSubmit"
+          @change="valueChanged"
+          @error="handleError"
+        />
+        <button
+          data-cy="submit"
+          class="btn bg-green-500 text-white hover:bg-green-700 mt-4"
+          submit="true"
+          :form="form?.id"
+        >
+          Try me
+        </button>
+      </div>
+    </div>
+    <div class="mx-auto w-full sm:w-1/2"><Console :content="formValues" /></div>
+  </div>
+</template>
+
+<style lang="scss">
+@import '/@/styles/themes/default.scss';
+</style>