aloha-vue 1.0.0 → 1.0.2

package/docs/.eslintignore

@@ -0,0 +1,5 @@
+**/node_modules/**
+**/dist/**
+**/webpack.config.js
+**frontend/admin/assets/styles/**
+**/static/**

package/{.eslintrc.js → docs/.eslintrc.js}

@@ -1,18 +1,23 @@
-var OFF = 0, WARN = 1, ERROR = 2;
+const OFF = 0;
+const WARN = 1;
+const ERROR = 2;
 
 module.exports = exports = {
+  root: true,
   parser: "vue-eslint-parser",
   parserOptions: {
     parser: {
       js: "@babel/eslint-parser",
     },
-    requireConfigFile: false,
     allowImportExportEverywhere: true,
-    ecmaVersion: 8,
+    ecmaVersion: 2021,
     sourceType: "module",
     impliedStrict: true,
     ecmaFeatures: {
       spread: true,
+      globalReturn: false,
+      impliedStrict: false,
+      jsx: false,
     },
   },
 
@@ -22,6 +27,7 @@ module.exports = exports = {
   ],
 
   globals: {
+    __dirname: false,
     _: false,
     $: false,
     L: false,
@@ -30,8 +36,6 @@ module.exports = exports = {
     event: false,
     beforeEach: false,
     afterEach: false,
-    exports: false,
-    define: false,
     module: false,
     it: false,
     describe: false,
@@ -51,9 +55,10 @@ module.exports = exports = {
     document: false,
     require: false,
     process: false,
+    MediaElementPlayer: false,
   },
 
-  "rules": {
+  rules: {
     // Possible Errors
     "for-direction": WARN,
     "getter-return": [WARN, { allowImplicit: true }],
@@ -62,18 +67,18 @@ module.exports = exports = {
     "no-compare-neg-zero": WARN,
     "no-cond-assign": [ERROR, "always"],
     "no-console": OFF,
-    "no-constant-condition": [WARN, { "checkLoops": false }],
+    "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": [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-invalid-regexp": [WARN, { allowConstructorFlags: ["u", "y"] }],
     "no-irregular-whitespace": OFF,
     "no-obj-calls": WARN,
     "no-prototype-builtins": WARN,
@@ -88,8 +93,8 @@ module.exports = exports = {
     // Best Practices
     "accessor-pairs": WARN,
     "block-scoped-var": WARN,
-    "curly": WARN,
-    "dot-notation": [WARN, { "allowKeywords": true }],
+    curly: WARN,
+    "dot-notation": [WARN, { allowKeywords: true }],
     "no-alert": WARN,
     "no-else-return": WARN,
     "no-eq-null": WARN,
@@ -109,7 +114,7 @@ module.exports = exports = {
     "no-useless-concat": WARN,
     "no-useless-escape": WARN,
     "require-await": WARN,
-    yoda: [WARN, "never", { "exceptRange": true }],
+    yoda: [WARN, "never", { exceptRange: true }],
 
     // Strict Mode
     strict: OFF,
@@ -117,7 +122,7 @@ module.exports = exports = {
     // Variables
     "no-shadow-restricted-names": WARN,
     "no-undef": WARN,
-    "no-use-before-define": [WARN, { "functions": false }],
+    "no-use-before-define": [WARN, { functions: false }],
     "no-unused-vars": WARN,
 
     // Stylistic Issues
@@ -125,7 +130,7 @@ module.exports = exports = {
     "array-bracket-spacing": [WARN, "never"],
     "block-spacing": [WARN, "always"],
     "brace-style": WARN,
-    "comma-spacing": [WARN, { "before": false, "after": true }],
+    "comma-spacing": [WARN, { before: false, after: true }],
     "comma-style": [WARN, "last"],
     "computed-property-spacing": [WARN, "never"],
     "eol-last": [WARN, "always"],
@@ -133,16 +138,16 @@ module.exports = exports = {
     "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,
+      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,
@@ -154,13 +159,13 @@ module.exports = exports = {
     "object-curly-spacing": [WARN, "always"],
     "padded-blocks": [WARN, "never"],
     "quote-props": [WARN, "as-needed"],
-    "quotes": [WARN, "double", { "allowTemplateLiterals": true }],
+    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", "/"] }],
+    "spaced-comment": [WARN, "always", { exceptions: ["-", "*", "+", "@ngInject", "/"] }],
 
     // ECMAScript 6
     "arrow-parens": [WARN, "as-needed"],
@@ -174,6 +179,10 @@ module.exports = exports = {
     "prefer-const": WARN,
     // "prefer-template": WARN,
     "template-curly-spacing": [WARN, "always"],
+
+    // Vue.js
+    "vue/multi-word-component-names": OFF,
+    "vue/component-definition-name-casing": OFF, // TODO: wenn angular.js weg ist, soll WARN sein
   },
   env: {
     jquery: true,

package/docs/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = function(api) {
+  api.cache(true);
+  const presets = [];
+  const plugins = [
+    "@babel/plugin-syntax-dynamic-import",
+  ];
+
+  return {
+    presets,
+    plugins
+  };
+};

package/docs/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Aloha</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/public/styles.css" />
+</head>
+<body>
+<div id="app"></div>
+</body>
+</html>

package/docs/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "Aloha-vue docs",
+  "description": "Aloha-vue docs",
+  "version": "1.0.0",
+  "author": "Ilia Brykin",
+  "scripts": {
+    "serve": "webpack serve --mode=development --devtool=eval",
+    "watch": "webpack --watch --mode=development --devtool=eval",
+    "watch-details": "webpack --watch --mode=development --devtool=eval-source-map",
+    "build-production": "webpack --mode=production --devtool=source-map",
+    "build-css": "node-sass --include-path scss styles/styles.scss public/styles.css"
+  },
+  "dependencies": {
+    "aloha-css": "1.0.7",
+    "lodash-es": "^4.17.21",
+    "vue": "3.2.31",
+    "vue-router": "4.0.14",
+    "vuex": "4.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "7.17.10",
+    "@babel/eslint-parser": "7.17.0",
+    "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@webpack-cli/generators": "2.4.2",
+    "acorn": "8.7.0",
+    "acorn-jsx": "5.3.2",
+    "babel-loader": "8.2.4",
+    "clean-webpack-plugin": "4.0.0",
+    "copy-webpack-plugin": "10.2.4",
+    "css-loader": "6.7.1",
+    "eslint": "8.13.0",
+    "eslint-plugin-vue": "8.6.0",
+    "eslint-webpack-plugin": "3.1.1",
+    "file-loader": "6.2.0",
+    "html-webpack-plugin": "5.5.0",
+    "loader-utils": "3.2.0",
+    "node-sass": "7.0.1",
+    "null-loader": "4.0.1",
+    "pug": "3.0.2",
+    "regenerator-runtime": "0.13.9",
+    "sass-loader": "12.6.0",
+    "source-map-loader": "3.0.1",
+    "style-loader": "3.3.1",
+    "vue-loader": "17.0.0",
+    "vue-eslint-parser": "8.3.0",
+    "vue-pug-loader": "1.1.26",
+    "webpack": "5.73.0",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "4.9.3"
+  }
+}

package/docs/src/App/App.js

@@ -0,0 +1,40 @@
+import TheMenu from "../components/TheMenu/TheMenu.vue";
+import TheNavbar from "../components/TheNavbar/TheNavbar.vue";
+
+import {
+  computed,
+  defineComponent,
+} from "vue";
+
+export default defineComponent({
+  components: {
+    TheMenu,
+    TheNavbar,
+  },
+  provide() {
+    return {
+      framework: computed(() => this.framework),
+    };
+  },
+  data() {
+    return {
+      framework: "bootstrap",
+    };
+  },
+  methods: {
+    changeFramework() {
+      // this.addFrameworkStyles(framework);
+      // this.framework = framework;
+    },
+
+    addFrameworkStyles() {
+      // frameworks.forEach(_framework => {
+      //   if (_framework === framework) {
+      //     STYLES[_framework].use();
+      //   } else {
+      //     STYLES[_framework].unuse();
+      //   }
+      // });
+    },
+  },
+});

package/docs/{App.vue → src/App/App.vue}

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

package/docs/{components → src/components}/TheMenuItem/TheMenuItem.js

@@ -1,4 +1,6 @@
-import AIcon from "../../../src/AIcon/AIcon";
+import {
+  AIcon,
+} from "../../../../dist";
 
 export default {
   name: "TheMenuItem",

package/docs/{components → src/components}/TheNavbar/TheNavbar.js

@@ -1,6 +1,8 @@
-import AIcon from "../../../src/AIcon/AIcon";
+import {
+  AIcon,
+} from "../../../../dist";
 
-import frameworks from "../../../src/const/frameworks";
+import frameworks from "../../../../src/const/frameworks";
 
 export default {
   name: "TheNavbar",

package/docs/{main.js → src/main.js}

@@ -1,8 +1,8 @@
-import App from "./App.vue";
+import App from "./App/App.vue";
 import { createApp } from "vue";
 import store from "./store/index";
 import router from "./router/index";
-import i18nPlugin from "../src/plugins/i18nPlugin";
+import i18nPlugin from "../../src/plugins/i18nPlugin";
 // import alohaPlugin from "../src/plugins/alohaPlugin";
 
 import de from "./i18n/de.json";

package/docs/{views → src/views}/PageAJson/PageAJson.js

@@ -1,4 +1,4 @@
-import AJson from "../../../src/AJson/AJson";
+import AJson from "../../../../src/AJson/AJson";
 
 
 export default {

package/docs/{views → src/views}/PageAccordion/PageAccordion.js

@@ -1,4 +1,4 @@
-import AAccordion from "../../../src/AAccordion/AAccordion.vue";
+import AAccordion from "../../../../src/AAccordion/AAccordion";
 
 export default {
   name: "PageAccordion",

package/docs/{views → src/views}/PageCloak/PageCloak.js

@@ -1,4 +1,4 @@
-import ACloak from "../../../src/ACloak/ACloak";
+import ACloak from "../../../../src/ACloak/ACloak";
 
 export default {
   name: "PageCloak",

package/docs/{views → src/views}/PageCollapse/PageCollapse.js

@@ -1,4 +1,4 @@
-import ACollapse from "../../../src/ACollapse/ACollapse.vue";
+import ACollapse from "../../../../src/ACollapse/ACollapse.vue";
 
 export default {
   name: "PageCollapse",

package/docs/{views → src/views}/PageInput/PageInput.js

@@ -1,5 +1,5 @@
-import AInput from "../../../src/AInput/AInput";
-import ATextarea from "../../../src/ATextarea/ATextarea";
+import AInput from "../../../../src/ui/AInput/AInput";
+import ATextarea from "../../../../src/ATextarea/ATextarea";
 
 
 export default {

package/docs/{views → src/views}/PageSpinner/PageSpinner.js

@@ -1,4 +1,6 @@
-import ASpinner from "../../../src/ASpinner/ASpinner.js";
+import {
+  ASpinner,
+} from "../../../../dist";
 
 export default {
   name: "PageSpinner",

package/docs/{views → src/views}/PageStart/PageStart.js

@@ -1,4 +1,4 @@
-import ATranslation from "../../../src/ATranslation/ATranslation";
+import ATranslation from "../../../../src/ATranslation/ATranslation";
 
 export default {
   name: "PageStart",

package/docs/src/views/PageTable/PageTable.js

@@ -0,0 +1,139 @@
+import {
+  ATable,
+} from "../../../../dist";
+
+import {
+  times,
+} from "lodash-es";
+
+export default {
+  name: "PageTable",
+  components: {
+    ATable,
+  },
+  data() {
+    return {
+      columns: [
+        {
+          label: "Aloha",
+          id: "aloha",
+          path: "aloha",
+          sortId: "aloha",
+          locked: true,
+          grow: 2,
+        },
+        {
+          label: "Aloha frei",
+          id: "aloha1",
+          path: "aloha",
+          sortId: "aloha",
+          grow: 0,
+        },
+        {
+          label: "Hola",
+          id: "hola",
+          path: "hola",
+          sortId: "hola",
+        },
+        {
+          label: "Hola2",
+          id: "hola2",
+          path: "hola",
+          sortId: "hola",
+          hide: true,
+        },
+        {
+          label: "Obj",
+          id: "obj",
+          path: "obj.aloha",
+          sortId: "obj.aloha",
+        },
+        {
+          label: "Obj2",
+          id: "obj2",
+          path: "obj.aloha",
+          sortId: "obj.aloha",
+        },
+        {
+          label: "Obj3",
+          id: "obj3",
+          path: "obj.aloha",
+        },
+        {
+          label: "Obj4",
+          id: "obj4",
+          path: "obj.aloha",
+        },
+        {
+          label: "Geld",
+          id: "geld",
+          path: "geld",
+        },
+        {
+          label: "Slot",
+          id: "slot",
+          slot: "slot1",
+          // hide: true,
+        },
+        {
+          label: "Slot2",
+          id: "slot2",
+          slot: "slot1",
+          hide: true,
+        },
+      ],
+      data: [],
+      isLoadingOptions: false,
+      rowActions: [
+        {
+          label: "Click me",
+          title: "Click me title",
+          isHidden: false,
+          callback: this.clickMe,
+          class: "aloha",
+          disabled: false,
+        },
+        {
+          isDivider: true,
+        },
+        {
+          labelCallback: ({ row, rowIndex }) => `${ rowIndex } Click ${ row.aloha }`,
+          titleCallback: ({ row, rowIndex }) => `${ rowIndex } Click ${ row.aloha } title`,
+          isHiddenCallback: ({ row, rowIndex }) => !!(rowIndex > 2 && row.aloha),
+          disabledCallback: ({ row, rowIndex }) => !(rowIndex > 2 && row.aloha),
+          callback: this.clickMe,
+        },
+      ],
+    };
+  },
+  created() {
+    this.setData();
+  },
+  methods: {
+    changeColumnsOrdering() {
+      this.isLoadingOptions = true;
+      setTimeout(() => {
+        this.isLoadingOptions = false;
+      }, 1000);
+    },
+
+    setData() {
+      const DATA = [];
+      times(1001, item => {
+        DATA.push({
+          aloha: `aloha${ item }`,
+          hola: `hola ${ item }`,
+          geld: `${ item } €`,
+          obj: {
+            aloha: `ertet ${ 100 - item }`,
+          },
+        });
+      });
+      this.data = DATA;
+    },
+
+    clickMe({ row, rowIndex }) {
+      console.log("row, rowIndex", row, rowIndex);
+    },
+  },
+};

package/docs/src/views/PageTable/PageTable.pug

@@ -0,0 +1,14 @@
+div
+  h1 PageTable
+  a-table(
+    :columns="columns"
+    :data="data"
+    :is-loading-options="isLoadingOptions"
+    label="Example table"
+    :row-actions="rowActions"
+    @change-columns-ordering="changeColumnsOrdering"
+  )
+    template(
+      v-slot:slot1="vm"
+    )
+      pre {{ vm.column }}

package/docs/styles/styles.scss

@@ -0,0 +1,24 @@
+html {
+  box-sizing: border-box;
+}
+
+*, ::after, ::before {
+  box-sizing: inherit;
+}
+
+a, button {
+  &:focus {
+    box-shadow: inset green 0 0 1px 4px;
+  }
+}
+
+body {
+  margin: 0;
+}
+
+.a_search_highlight {
+  color: red;
+}
+@import "./node_modules/aloha-css/sass/aloha";
+
+@import "../src/styles/styles";