Layout fixes (#4)

* Layout fixes

* Package version

Co-authored-by: Alex Freitas <afreitas@jbssa.com>

dist/demo.html

@@ -3,8 +3,6 @@
 <script src="https://unpkg.com/vue"></script>
 <script src="./vueCronEditorBootstrap.umd.js"></script>
 
-<link rel="stylesheet" href="./vueCronEditorBootstrap.css">
-
 
 <div id="app">
   <demo></demo>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cron-editor-bootstrap",
-  "version": "0.1.0",
+  "version": "0.1.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1256,6 +1256,7 @@
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.0.tgz",
       "integrity": "sha512-Vf09BxCdj1iT2IRqVwX5snaY2WCTkvM0O4cWWSO1ThCFuc4if0Q/nNwAgCxRU0FeYHJ7DdyMUNSdswCLKlVqeg==",
+      "dev": true,
       "requires": {
         "chalk": "^2.4.2",
         "consola": "^2.10.1",
@@ -2773,6 +2774,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -3629,12 +3631,14 @@
     "bootstrap": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
-      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
+      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA==",
+      "dev": true
     },
     "bootstrap-vue": {
       "version": "2.14.0",
       "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.14.0.tgz",
       "integrity": "sha512-sqbS7iHYCZEj/dDx4Yaze99HcX6bZjO4bSWZ0xSgJwtWQlbfB2VDJ9Qjzjp9XI8TT32wYNGAMpnXpYjQvv5qyQ==",
+      "dev": true,
       "requires": {
         "@nuxt/opencollective": "^0.3.0",
         "bootstrap": ">=4.4.1 <5.0.0",
@@ -4120,6 +4124,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -4643,6 +4648,7 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -4650,7 +4656,8 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
     },
     "color-string": {
       "version": "1.5.3",
@@ -4831,7 +4838,8 @@
     "consola": {
       "version": "2.12.1",
       "resolved": "https://registry.npmjs.org/consola/-/consola-2.12.1.tgz",
-      "integrity": "sha512-aEkkju9ZcEa9y2MhzNhfmTUws/CEZZ0LKu0FxftSU3HygPfVMMIMSYyYct+xBN6XNRhsaDZjw2HAv3m2ammXSA=="
+      "integrity": "sha512-aEkkju9ZcEa9y2MhzNhfmTUws/CEZZ0LKu0FxftSU3HygPfVMMIMSYyYct+xBN6XNRhsaDZjw2HAv3m2ammXSA==",
+      "dev": true
     },
     "console-browserify": {
       "version": "1.2.0",
@@ -7244,7 +7252,8 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
     },
     "escodegen": {
       "version": "1.14.1",
@@ -9466,7 +9475,8 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
     },
     "has-symbols": {
       "version": "1.0.1",
@@ -12877,7 +12887,8 @@
     "node-fetch": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
-      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
+      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==",
+      "dev": true
     },
     "node-forge": {
       "version": "0.9.0",
@@ -13842,12 +13853,14 @@
     "popper.js": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "dev": true
     },
     "portal-vue": {
       "version": "2.1.7",
       "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
-      "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g=="
+      "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
+      "dev": true
     },
     "portfinder": {
       "version": "1.0.26",
@@ -16608,6 +16621,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -17531,7 +17545,8 @@
     "vue-functional-data-merge": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
-      "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
+      "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA==",
+      "dev": true
     },
     "vue-hot-reload-api": {
       "version": "2.3.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cron-editor-bootstrap",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "private": false,
   "main": "dist/vueCronEditorBootstrap.umd.js",
   "module": "dist/vueCronEditorBootstrap.esm.js",
@@ -13,7 +13,6 @@
     "build:npm": "vue-cli-service build --target lib --name vueCronEditorBootstrap src/VueCronEditorBootstrap.vue"
   },
   "dependencies": {
-    "bootstrap-vue": "^2.14.0",
     "core-js": "^3.6.5",
     "cron-validator": "^1.1.1",
     "cronstrue": "^1.94.0",
@@ -41,7 +40,8 @@
     "sass-loader": "^8.0.0",
     "standard-version": "^8.0.0",
     "typescript": "~3.5.3",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "bootstrap-vue": "^2.14.0"
   },
   "author": "alexmfreitas",
   "license": "MIT",

src/App.vue

@@ -6,7 +6,7 @@
                     :preserveStateOnSwitchToAdvanced="true"
                     v-model="sample1CronExpression"
                 ></VueCronEditorBootstrap>
-                {{ sample1CronExpression }}
+                <b-form-input v-model="sample1CronExpression" />
             </main>
         </div>
     </div>
@@ -14,11 +14,14 @@
 
 <script>
 import VueCronEditorBootstrap from "./VueCronEditorBootstrap.vue";
-
+import {
+    BFormInput
+} from "bootstrap-vue";
 export default {
     name: "App",
     components: {
-        VueCronEditorBootstrap
+        VueCronEditorBootstrap,
+        BFormInput
     },
     data: () => ({
         sample1CronExpression: "4 4 * * 0,2,3,5"

vue.config.js

@@ -1,3 +1,4 @@
 module.exports = {
-    publicPath: "/vue-cron-editor-bootstrap"
+    publicPath: "/vue-cron-editor-bootstrap",
+    css: { extract: false }
 };