aloha-vue 1.0.0

package/.babelrc

@@ -0,0 +1,10 @@
+{
+    "presets": [
+        ["@babel/preset-env"]
+    ],
+    "plugins": [
+        ["@babel/plugin-transform-runtime", {
+            "corejs": 3
+        }]
+    ]
+}

package/.eslintignore

@@ -0,0 +1,3 @@
+/node_modules/**
+**/webpack.config.js
+**/dist/**

package/.eslintrc.js

@@ -0,0 +1,183 @@
+var OFF = 0, WARN = 1, ERROR = 2;
+
+module.exports = exports = {
+  parser: "vue-eslint-parser",
+  parserOptions: {
+    parser: {
+      js: "@babel/eslint-parser",
+    },
+    requireConfigFile: false,
+    allowImportExportEverywhere: true,
+    ecmaVersion: 8,
+    sourceType: "module",
+    impliedStrict: true,
+    ecmaFeatures: {
+      spread: true,
+    },
+  },
+
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/vue3-recommended",
+  ],
+
+  globals: {
+    _: false,
+    $: false,
+    L: false,
+    angular: false,
+    window: false,
+    event: false,
+    beforeEach: false,
+    afterEach: false,
+    exports: false,
+    define: false,
+    module: false,
+    it: false,
+    describe: false,
+    inject: false,
+    expect: false,
+    spyOn: false,
+    jasmine: false,
+    sinon: false,
+    xdescribe: false,
+    Raven: false,
+    console: false,
+    setTimeout: false,
+    clearTimeout: false,
+    history: false,
+    localStorage: false,
+    CKEDITOR: false,
+    document: false,
+    require: false,
+    process: false,
+  },
+
+  "rules": {
+    // Possible Errors
+    "for-direction": WARN,
+    "getter-return": [WARN, { allowImplicit: true }],
+    "no-async-promise-executor": ERROR,
+    "no-await-in-loop": ERROR,
+    "no-compare-neg-zero": WARN,
+    "no-cond-assign": [ERROR, "always"],
+    "no-console": OFF,
+    "no-constant-condition": [WARN, { "checkLoops": false }],
+    "no-debugger": WARN,
+    "no-dupe-args": WARN,
+    "no-dupe-keys": WARN,
+    "no-duplicate-case": WARN,
+    "no-empty": [WARN, { "allowEmptyCatch": true }],
+    "no-empty-character-class": WARN,
+    "no-extra-boolean-cast": WARN,
+    "no-extra-semi": WARN,
+    "no-func-assign": WARN,
+    "no-inner-declarations": WARN,
+    "no-invalid-regexp": [WARN, { "allowConstructorFlags": ["u", "y"] }],
+    "no-irregular-whitespace": OFF,
+    "no-obj-calls": WARN,
+    "no-prototype-builtins": WARN,
+    "no-regex-spaces": WARN,
+    "no-sparse-arrays": WARN,
+    "no-unexpected-multiline": WARN,
+    "no-unreachable": WARN,
+    "no-unsafe-negation": WARN,
+    "use-isnan": WARN,
+    "valid-typeof": WARN,
+
+    // Best Practices
+    "accessor-pairs": WARN,
+    "block-scoped-var": WARN,
+    "curly": WARN,
+    "dot-notation": [WARN, { "allowKeywords": true }],
+    "no-alert": WARN,
+    "no-else-return": WARN,
+    "no-eq-null": WARN,
+    "no-eval": WARN,
+    "no-extra-bind": WARN,
+    "no-extra-label": WARN,
+    "no-floating-decimal": WARN,
+    "no-global-assign": WARN,
+    "no-implied-eval": WARN,
+    "no-loop-func": WARN,
+    "no-multi-spaces": WARN,
+    "no-new-func": WARN,
+    "no-redeclare": WARN,
+    "no-return-assign": OFF,
+    "no-self-assign": WARN,
+    "no-self-compare": WARN,
+    "no-useless-concat": WARN,
+    "no-useless-escape": WARN,
+    "require-await": WARN,
+    yoda: [WARN, "never", { "exceptRange": true }],
+
+    // Strict Mode
+    strict: OFF,
+
+    // Variables
+    "no-shadow-restricted-names": WARN,
+    "no-undef": WARN,
+    "no-use-before-define": [WARN, { "functions": false }],
+    "no-unused-vars": WARN,
+
+    // Stylistic Issues
+    "array-bracket-newline": [WARN, "consistent"],
+    "array-bracket-spacing": [WARN, "never"],
+    "block-spacing": [WARN, "always"],
+    "brace-style": WARN,
+    "comma-spacing": [WARN, { "before": false, "after": true }],
+    "comma-style": [WARN, "last"],
+    "computed-property-spacing": [WARN, "never"],
+    "eol-last": [WARN, "always"],
+    "func-call-spacing": [WARN, "never"],
+    "function-paren-newline": [WARN, "multiline-arguments"],
+    "implicit-arrow-linebreak": [WARN, "beside"],
+    indent: [WARN, 2, {
+      "VariableDeclarator": "first",
+      "FunctionDeclaration": {"parameters": "first"},
+      "FunctionExpression": {"parameters": "first" },
+      "CallExpression": {"arguments": "first"},
+      "ImportDeclaration": 1,
+      "ObjectExpression": "first",
+      "ArrayExpression": "first",
+      "ignoreComments": true,
+      "ignoredNodes": ["ConditionalExpression"],
+      "outerIIFEBody": 0,
+    }],
+    "key-spacing": WARN,
+    "keyword-spacing": WARN,
+    "no-mixed-spaces-and-tabs": OFF,
+    "no-multi-assign": WARN,
+    "no-multiple-empty-lines": WARN,
+    "no-unneeded-ternary": WARN,
+    "no-whitespace-before-property": WARN,
+    "object-curly-spacing": [WARN, "always"],
+    "padded-blocks": [WARN, "never"],
+    "quote-props": [WARN, "as-needed"],
+    "quotes": [WARN, "double", { "allowTemplateLiterals": true }],
+    semi: [WARN, "always"],
+    "space-before-blocks": WARN,
+    "space-before-function-paren": [WARN, "never"],
+    "space-in-parens": [WARN, "never"],
+    "space-infix-ops": WARN,
+    "spaced-comment": [WARN, "always", { "exceptions": ["-", "*", "+", "@ngInject", "/"] }],
+
+    // ECMAScript 6
+    "arrow-parens": [WARN, "as-needed"],
+    "arrow-spacing": WARN,
+    "constructor-super": WARN,
+    "no-const-assign": WARN,
+    "no-dupe-class-members": WARN,
+    "no-duplicate-imports": WARN,
+    "no-this-before-super": WARN,
+    "no-var": WARN,
+    "prefer-const": WARN,
+    // "prefer-template": WARN,
+    "template-curly-spacing": [WARN, "always"],
+  },
+  env: {
+    jquery: true,
+    es6: true,
+    browser: true,
+  }
+};

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Ilia Brykin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# aloha-vue
+aloha

package/build/webpack.common.js

@@ -0,0 +1,104 @@
+const path = require("path");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { VueLoaderPlugin } = require("vue-loader/dist/index");
+const ESLintPlugin = require("eslint-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+
+// const TARGET = process.env.npm_lifecycle_event;
+
+module.exports = {
+  entry: "./docs/main.js",
+  output: {
+    filename: "[name].[contenthash].js",
+    path: path.resolve(__dirname, "../docs/dist"),
+    publicPath: "/",
+  },
+  // resolve: {
+  //   extensions: ['.vue', '.ts', '.js', '.jsx', '.json'], //It means that the file suffix can not be written in the import file
+  //   alias: {
+  //     '@': path.join(__dirname, '../src')
+  //     //When the import file is in src, it can be written as @ / component /
+  //   }
+  // },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      title: "I am webpack.config Configured title",
+      template: "./public/index.html",
+      // Compress HTML
+      minify: {
+        removeComments: true, // Remove comments from HTML
+        collapseWhitespace: true // Remove whitespace and newline
+      }
+    }),
+    new VueLoaderPlugin(), // Plug in for parsing and converting. vue files
+    new ESLintPlugin({}),
+    new CopyWebpackPlugin({
+      patterns: [
+        // { from: "../public", to: "./" },
+        { from: "docs/static/" },
+      ],
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: ["babel-loader"],
+      },
+      {
+        test: /\.s[ac]ss$/i,
+        exclude: /\.lazy\.s[ac]ss$/i,
+        use: [
+          // Creates `style` nodes from JS strings
+          "style-loader",
+          // Translates CSS into CommonJS
+          "css-loader",
+          // Compiles Sass to CSS
+          "sass-loader",
+        ],
+      },
+      {
+        test: /\.lazy\.s[ac]ss$/i,
+        use: [
+          { loader: "style-loader", options: { injectType: "lazyStyleTag" } },
+          "css-loader",
+          "sass-loader",
+        ],
+      },
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        type: "asset", // Automatically choose between exporting a data URI and sending a separate file
+      },
+      {
+        test: /\.vue$/,
+        use: ["vue-loader"],
+      },
+      {
+        test: /\.pug$/,
+        use: ["vue-pug-loader"],
+      },
+    ],
+  },
+  // https://webpack.docschina.org/guides/caching/
+  optimization: {
+    // The deterministic option benefits long-term caching
+    moduleIds: "deterministic",
+    // use optimization.runtimeChunk  Option to split the runtime code into a separate chunk
+    runtimeChunk: "single",
+    splitChunks: {
+      // Using the client's long-term caching mechanism, hit the cache to eliminate requests and reduce getting resources from the server,
+      // At the same time, it can ensure that the client code and server code version are consistent. This can be done by
+      // Use the cacheGroups option of the SplitChunksPlugin plug-in.
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendors",
+          chunks: "all",
+        },
+      },
+    },
+  },
+};

package/build/webpack.dev.js

@@ -0,0 +1,16 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+  mode: "development",
+  // devtool: "inline-source-map",
+  devtool: "source-map",
+  devServer: {
+    static: "../docs/dist",
+    historyApiFallback: true,
+    // hot: true,
+  },
+  // optimization: {
+  //   minimize: true,
+  // },
+});

package/build/webpack.prod.js

@@ -0,0 +1,20 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+const TerserPlugin = require("terser-webpack-plugin");
+
+module.exports = merge(common, {
+  mode: "production",
+  devtool: "source-map",
+  optimization: {
+    // https://webpack.docschina.org/plugins/terser-webpack-plugin/
+    // Compression js
+    minimize: true,
+    minimizer: [
+      // https://webpack.docschina.org/plugins/terser-webpack-plugin/
+      // Compression js
+      new TerserPlugin({
+        parallel: true, // Using multi process concurrent execution to improve the construction speed
+      }),
+    ],
+  },
+});

package/dist/index.js

@@ -0,0 +1,9 @@
+import AIcon from "../src/AIcon/AIcon";
+import ASpinner from "../src/ASpinner/ASpinner";
+import ATable from "../src/ATable/ATable";
+
+export {
+  AIcon,
+  ASpinner,
+  ATable,
+};

package/docs/App.js

@@ -0,0 +1,52 @@
+import TheMenu from "./components/TheMenu/TheMenu.vue";
+import TheNavbar from "./components/TheNavbar/TheNavbar.vue";
+
+import bootstrapStyles from "./styles/bootstrap.lazy.scss";
+import bulmaStyles from "./styles/bulma.lazy.scss";
+import foundationStyles from "./styles/foundation.lazy.scss";
+import uikitStyles from "./styles/uikit.lazy.scss";
+import frameworks from "../src/const/frameworks";
+import {
+  computed,
+  defineComponent,
+} from "vue";
+
+const STYLES = {
+  bootstrap: bootstrapStyles,
+  bulma: bulmaStyles,
+  foundation: foundationStyles,
+  uikit: uikitStyles,
+};
+
+export default defineComponent({
+  components: {
+    TheMenu,
+    TheNavbar,
+  },
+  provide() {
+    return {
+      framework: computed(() => this.framework),
+    };
+  },
+  data() {
+    return {
+      framework: "bootstrap",
+    };
+  },
+  methods: {
+    changeFramework({ framework }) {
+      this.addFrameworkStyles(framework);
+      this.framework = framework;
+    },
+
+    addFrameworkStyles(framework) {
+      frameworks.forEach(_framework => {
+        if (_framework === framework) {
+          STYLES[_framework].use();
+        } else {
+          STYLES[_framework].unuse();
+        }
+      });
+    },
+  },
+});

package/docs/App.pug

@@ -0,0 +1,10 @@
+div
+  the-navbar(
+    @change-framework="changeFramework"
+  )
+  .a_d_flex
+    the-menu
+    .a_d_inline_block.a_pl_4(
+      style="width: calc(100vw - 280px);"
+    )
+      router-view

package/docs/App.scss

@@ -0,0 +1 @@
+@import "./styles/base";

package/docs/App.vue

@@ -0,0 +1,3 @@
+<template lang="pug" src="./App.pug"></template>
+<script src="./App.js"></script>
+<style lang="scss" src="./App.scss"></style>

package/docs/components/TheMenu/TheMenu.js

@@ -0,0 +1,49 @@
+import TheMenuItem from "../TheMenuItem/TheMenuItem.vue";
+
+export default {
+  name: "TheMenu",
+  components: {
+    TheMenuItem,
+  },
+  data() {
+    return {
+      menuItems: [
+        {
+          id: "spinner",
+          name: "PageSpinner",
+          label: "Spinner",
+        },
+        {
+          id: "table",
+          name: "PageTable",
+          label: "Table",
+        },
+        {
+          id: "collapse",
+          name: "PageCollapse",
+          label: "Collapse",
+        },
+        {
+          id: "cloak",
+          name: "PageCloak",
+          label: "Cloak",
+        },
+        {
+          id: "input",
+          name: "PageInput",
+          label: "Input",
+        },
+        {
+          id: "json",
+          name: "PageAJson",
+          label: "JSON",
+        },
+        {
+          id: "accordion",
+          name: "PageAccordion",
+          label: "Accordion",
+        },
+      ],
+    };
+  },
+};

package/docs/components/TheMenu/TheMenu.pug

@@ -0,0 +1,7 @@
+.the_menu
+  ul.the_menu__ul
+    the-menu-item(
+      v-for="item in menuItems"
+      :key="item.id"
+      :data="item"
+    )

package/docs/components/TheMenu/TheMenu.scss

@@ -0,0 +1,39 @@
+.the_menu {
+  display: inline-block;
+  background-color: #000;
+  width: 280px;
+  min-height: calc(100vh - 80px);
+}
+.the_menu__ul {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+  flex-direction: column;
+}
+.the_menu__link {
+  display: block;
+  padding: .5rem 1rem;
+  color: #fff;
+  text-decoration: underline;
+  &:hover {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+.the_menu__btn_collapse {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: .5rem 1rem;
+  color: #fff;
+  background-color: inherit;
+  border: none;
+}
+.the_menu__box_collapse {
+  background-color: lighten(#000, 20);
+}
+.the_menu__box_collapse__li > .the_menu__link {
+  padding-left: 1.5rem;
+}

package/docs/components/TheMenu/TheMenu.vue

@@ -0,0 +1,3 @@
+<template lang="pug" src="./TheMenu.pug"></template>
+<script src="./TheMenu.js"></script>
+<style lang="scss" src="./TheMenu.scss"></style>

package/docs/components/TheMenuItem/TheMenuItem.js

@@ -0,0 +1,29 @@
+import AIcon from "../../../src/AIcon/AIcon";
+
+export default {
+  name: "TheMenuItem",
+  components: {
+    AIcon,
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isOpen: false,
+    };
+  },
+  computed: {
+    collapseIcon() {
+      return this.isOpen ? "ChevronUp" : "ChevronDown";
+    },
+  },
+  methods: {
+    toggle() {
+      this.isOpen = !this.isOpen;
+    },
+  },
+};

package/docs/components/TheMenuItem/TheMenuItem.pug

@@ -0,0 +1,26 @@
+li
+  template(
+    v-if="data.children && data.children.length"
+    key="children"
+  )
+    button.the_menu__btn_collapse(
+      type="button"
+      @click="toggle"
+    )
+      span {{ data.label }}
+      a-icon(
+        :icon="collapseIcon"
+      )
+    .the_menu__box_collapse(
+      v-show="isOpen"
+    )
+      the-menu-item.the_menu__box_collapse__li(
+        v-for="item in data.children"
+        :key="item.id"
+        :data="item"
+      )
+  router-link.the_menu__link(
+    v-else
+    key="link"
+    :to="{ name: data.name, params: data.params }"
+  ) {{ data.label }}

package/docs/components/TheMenuItem/TheMenuItem.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./TheMenuItem.pug"></template>
+<script src="./TheMenuItem.js"></script>

package/docs/components/TheNavbar/TheNavbar.js

@@ -0,0 +1,57 @@
+import AIcon from "../../../src/AIcon/AIcon";
+
+import frameworks from "../../../src/const/frameworks";
+
+export default {
+  name: "TheNavbar",
+  components: {
+    AIcon,
+  },
+  emits: [
+    "change-framework",
+  ],
+  data() {
+    return {
+      frameworks: frameworks,
+      modelFramework: "bootstrap",
+      modelLanguage: "de",
+      languages: [
+        {
+          label: "Deutsch",
+          value: "de",
+        },
+        {
+          label: "English",
+          value: "en",
+        },
+        {
+          label: "Русский",
+          value: "ru",
+        },
+        {
+          label: "Hrvatski",
+          value: "hr",
+        },
+      ],
+    };
+  },
+  created() {
+    this.changeLanguage();
+    this.changeFramework();
+  },
+  methods: {
+    changeLanguage() {
+      setTimeout(() => {
+        this.$root.$i18n.language = this.modelLanguage;
+      });
+    },
+
+    changeFramework() {
+      setTimeout(() => {
+        this.$emit("change-framework", {
+          framework: this.modelFramework,
+        });
+      });
+    },
+  },
+};