@intellias/menu 1.0.0

package/webpack.config.js

@@ -0,0 +1,126 @@
+const path = require('path');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+const isDev = true;
+
+module.exports = {
+    // devtool: 'source-map',
+    mode: "development",
+    entry: './wrapper.ts',
+    output: {
+        path: path.resolve(__dirname, './dist/'),
+        filename: isDev ? 'js/[name].js' : 'js/[name].[hash].js',
+        chunkFilename: isDev ? 'js/[name].js' : 'js/[name].[hash].js',
+        publicPath: '/'
+    },
+    watchOptions: {
+        ignored: /node_modules/,
+    },
+    plugins: [
+        new CleanWebpackPlugin({
+            cleanOnceBeforeBuildPatterns: ['js/*', 'css/*', 'images/*', 'html/*']
+        }),
+        new VueLoaderPlugin(),
+        new ForkTsCheckerWebpackPlugin(),
+        new MiniCssExtractPlugin({
+            filename: isDev ? 'css/[name].css' : 'css/[name].[hash].css',
+            chunkFilename: isDev ? 'css/[id].css' : 'css/[id].[hash].css'
+        }),
+        new HtmlWebpackPlugin({
+            inject: false,
+            hash: false,
+            template: './app.html',
+            filename: 'html/app.html'
+        }),
+        new HtmlWebpackPlugin({
+            inject: false,
+            hash: false,
+            template: './styles.html',
+            filename: 'html/styles.html'
+        })
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loader: 'ts-loader',
+                exclude: /node_modules/,
+                options: {
+                    appendTsSuffixTo: [/\.vue$/],
+                    transpileOnly: true
+                }
+            },
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader'
+            },
+            {
+                test: /\.scss$/,
+                use: [
+                    'vue-style-loader',
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: { sourceMap: isDev }
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            plugins: [require('autoprefixer')()],
+                            sourceMap: isDev
+                        }
+                    },
+                    {
+                        loader: 'sass-loader',
+                        options: {
+                            sourceMap: isDev,
+                            implementation: require('sass'),
+                            data: `
+                              @import "~@/scss/components/variables";
+                              @import "~@/scss/components/mixins";
+                            `
+                        }
+                    }
+                ]
+            },
+            {
+                test: /\.jsx?$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader'
+            },
+            {
+                test: /\.(png|jpg|gif|svg|ttf|eot|woff|woff2)$/,
+                loader: 'file-loader',
+                options: {
+                    name: 'images/[name].[ext]?[hash]'
+                }
+            },
+            {
+                test: /\.css$/,
+                use: ['vue-style-loader', 'css-loader']
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js', '.vue', '.scss'],
+        alias: {
+            vue$: 'vue/dist/vue.esm.js',
+            '@': path.resolve(__dirname),
+        }
+    },
+    optimization: {
+        splitChunks: {
+            cacheGroups: {
+                vue: {
+                    test: /[\\/]node_modules[\\/](vue)[\\/]/,
+                    name: 'vue',
+                    chunks: 'all'
+                }
+            }
+        }
+    }
+};

package/wrapper.ts

@@ -0,0 +1,51 @@
+import Menu from "./Menu.vue";
+import {
+  MenuOptions,
+  ProjectName,
+  Helpers,
+  Submenus,
+} from "./models/ModuleOptions";
+import VueEcho from "vue-echo-laravel";
+import { io } from "socket.io-client";
+import { VTooltip } from "v-tooltip";
+import VModal from "vue-js-modal";
+
+let myOptions: MenuOptions;
+
+const MenuComponent = {
+  install(Vue, options: MenuOptions): void {
+    Vue.directive("tooltip", VTooltip);
+
+    myOptions = options;
+    const props = {};
+
+    Object.keys(options).forEach((k) => {
+      props[k] = { default: () => options[k] };
+    });
+
+    Vue.use(VueEcho, {
+      broadcaster: "socket.io",
+      host: options.storeAdapter.Config.state.data.liteSiteUrl,
+      client: io,
+      namespace: "App.Events.Broadcast",
+    });
+
+    Vue.use(VModal);
+    Vue.component(Menu.name, { ...Menu, props });
+  },
+};
+
+if (typeof window !== "undefined" && window.Vue) {
+  window.Vue.use(MenuComponent);
+}
+
+export default MenuComponent;
+
+export {
+  myOptions,
+  MenuOptions,
+  ProjectName,
+  Helpers,
+  Submenus,
+  Menu as MainMenu,
+};