@hcd-bsas/list-documents-adapter 0.0.1

package/exampleJavascript.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TEST</title>
+    <link rel="stylesheet" href="node_modules/hcd-bootstrap/dist/hcd-bootstrap.min.css">
+</head>
+<body>
+    
+    <button onclick="prueba()">Prueba</button>
+
+    
+</body>
+<footer>
+    <script src="node_modules/hcd-bootstrap/dist/hcd-bootstrap.min.js"></script>
+    <script src="dist/ListDocuments.min.js"></script>
+    <script>
+        var list = new ImagesList({
+            base_url: "http://localhost/admin",
+        });
+
+        function prueba(){
+            list.open({
+                title: "Listado de imagenes escaneadas en Rhys"
+            },{
+                id_tabla: 1,
+                id_tabla_reg: 22264,
+                id_dependen_responsable: 54,
+                id_pers_reso: 23956,
+                campo_escan: "INASISTE"
+            })
+            .then((response) => {
+                console.log(response)
+            });
+        }
+    </script>
+</footer>
+</html>

package/exampleVue2.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="node_modules/hcd-list/dist/list-files.css">
+    <title>TEST</title>
+</head>
+<body>
+    
+    <div id="test-list-plugin-vue2"></div>
+
+    <script src="./dist/vue.js"></script>
+    <script src="./node_modules/hcd-list/dist/list-files.umd.js"></script>
+    <script>
+        Vue.use(list-files);
+        var vue = new Vue({
+            el: '#test-list-plugin-vue2', // <-- Id del componente padre que incluye la aplicacion vue para que se instancie
+            data: {
+                nombre_atributo: { 
+                    // valores
+                }
+            },
+            computed: {},
+            created() {
+                // Se ejecuta al crear la instancia vue
+            },
+            methods: {
+                metodo_de_ejemplo() {}
+            },
+            watch: {
+
+            }
+        });
+
+        
+    </script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@hcd-bsas/list-documents-adapter",
+  "version": "0.0.1",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/ListDocuments.min.js",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-loader": "^8.2.5",
+    "browserify": "^17.0.0",
+    "css-loader": "^6.7.1",
+    "file-loader": "^6.2.0",
+    "hcd-list": "^0.3.1",
+    "html-loader": "^3.1.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "postcss": "^8.4.14",
+    "postcss-loader": "^7.0.0",
+    "sass-loader": "^13.0.2",
+    "style-loader": "^3.3.1",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "url-loader": "^4.1.1",
+    "vue": "^3.2.37",
+    "vue-loader": "^17.0.0",
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2"
+  },
+  "dependencies": {
+    "hcd-bootstrap": "^0.0.13"
+  },
+  "scripts": {
+    "build": "webpack"
+  }
+}

package/readme.md

@@ -0,0 +1,3 @@
+Para crear una nueva distribución se debe correr el comando:
+
+yarn webpack build

package/src/App.vue

@@ -0,0 +1,21 @@
+<template>
+  <list-files ref="list"></list-files>
+</template>
+
+<script>
+  export default {
+    name: "App",
+    props: {},
+    data() {
+      return {
+      };
+    },
+    created() {
+    },
+    methods: {
+      showModal(app_config, params) {
+        return this.$refs['list'].show(app_config, params);
+      }
+    }
+  };
+</script>

package/src/index.js

@@ -0,0 +1,34 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import hcdListPlugin from 'hcd-list'
+
+export default class ImagesList {
+    
+    #imagesListId = "hcd-list-plugin-id";
+    #app = null
+    #root = null;
+
+    constructor(config) {
+        try {
+            this.#render();
+            this.#app = createApp(App);
+            this.#app.use(hcdListPlugin, config)
+            this.#root = this.#app.mount("#"+this.#imagesListId);
+        } catch (error) {
+            // console.log(error);
+            throw error;
+        }
+    }
+
+    #render(){
+        var body = document.body;
+        var layout = document.createElement('div');
+        layout.id = this.#imagesListId
+        body.prepend(layout);
+    }
+
+    open(app_config, params){
+        return this.#root.showModal(app_config, params);
+    }
+
+}

package/webpack.config.js

@@ -0,0 +1,54 @@
+const path = require('path');
+const Webpack = require('webpack');
+const { VueLoaderPlugin } = require('vue-loader');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+module.exports = {
+    mode: 'production',
+    // mode: 'development',
+    entry: './src/index.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'ListDocuments.min.js',
+        library: {
+            name: 'ImagesList',
+            type: 'umd',
+            export: 'default'
+        },
+    },
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    'postcss-loader',
+                    'sass-loader'
+                ]
+            }
+        ],
+    },
+    optimization: {
+        minimizer: [
+            new UglifyJsPlugin({
+                cache: true,
+                parallel: true,
+                sourceMap: true
+            })
+        ]
+    },
+    plugins: [
+        // make sure to include the plugin!
+        new VueLoaderPlugin(),
+        new MiniCssExtractPlugin({
+            filename: 'hcd-bootstrap.min.css'
+        }),
+        new Webpack.DefinePlugin({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false }), // to remove warn in browser console: runtime-core.esm-bundler.js:3607 Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined...
+    ]
+};