flameresttable 1.0.0

package/.eslintrc

@@ -0,0 +1,27 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:vue/recommended"
+  ],
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "no-empty-function": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "no-multiple-empty-lines": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "vue/multi-word-component-names": "off",
+    "vue/no-multiple-template-root": "off",
+    "vue/no-duplicate-attributes": "off",
+    "linebreak-style": "off"
+  },
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser"
+  }
+}

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Wscats.vue", "bradlc.vscode-tailwindcss", "afzalsayed96.heroicons", "ionutvmi.path-autocomplete", "bam.vscode-file-templates", "pmneo.tsimporter", "dbaeumer.vscode-eslint"],
+}

package/.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Chrome",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}/src",
+      "preLaunchTask": "start-dev-server",
+      "postDebugTask": "stop-dev-server",
+      "userDataDir": "${execPath}/../chrome-debug-default-profile/"
+    },
+    {
+      "type": "msedge",
+      "request": "launch",
+      "name": "VSCode Edge",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}/src",
+      "preLaunchTask": "start-dev-server",
+      "runtimeExecutable": "stable",
+      "runtimeArgs": [
+        "--headless"
+      ],
+      "port": 9229
+    }
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "volar.codeLens.pugTools": false,
+  "vetur.validation.script": false,
+  "vetur.validation.template": false,
+  "vetur.validation.style": false,
+  "tailwindCSS.includeLanguages": {
+    "plaintext": "html"
+  },
+  "tailwindCSS.emmetCompletions": true,
+  "css.lint.unknownAtRules": "ignore"
+}

package/.vscode/tasks.json

@@ -0,0 +1,36 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "start-dev-server",
+            "type": "npm",
+            "script": "dev",
+            "isBackground": true,
+            "problemMatcher": {
+                "owner": "npm",
+                "background": {
+                    "activeOnStart": true,
+                    "beginsPattern": ".*",
+                    "endsPattern": "ready in"
+                },
+                "pattern": {
+                    "regexp": "",
+                }
+            }
+        },
+        {
+            "label": "stop-dev-server",
+            "command": "echo ${input:terminate}",
+            "type": "shell"
+        },
+        // OTHER
+    ],
+    "inputs": [
+        {
+            "id": "terminate",
+            "type": "command",
+            "command": "workbench.action.tasks.terminate",
+            "args": "terminateAll"
+        }
+    ]
+}

package/README.md

@@ -0,0 +1,39 @@
+# Vue 3 + Vite + Pinia + Router + Tailwind + Pug + Typescript template
+
+Hello, world!
+
+That starter for rapid prototyping a services. Start with
+
+    git clone https://github.com/FlameArt/vuestarter.git ./projectName
+
+## Under the hood
+
+* Vite
+* Vue 3 [via composition api]
+* Typescript
+* Pinia as state manager
+* Vue Router 4
+* Tailwind as css framework
+* Pug as html framework
+* ESLint
+* Capacitor as converter to Android and iOS apps
+* VSCode ready with Volar
+* [FlameREST](https://github.com/FlameArt/auto-rest-template-yii2) attached
+* Precreated Signup, Auth and Password Reset pages
+
+# VSCode improvements
+
+Pug-lexer in Volar doesn`t support all tailwind functions currently. So you need to apply fix https://github.com/pugjs/pug/pull/3373
+
+OR just fix the `Volar` extension directly in `%USERNAME%/.vscode/extensions/vue.volar-VERSION/dist/node/server.js` that
+
+    (/^\.([_a-z0-9\-]*[_a-z][_a-z0-9\-]*)/i, 'class');
+
+to that
+
+    (/^\.([_a-z0-9\-]*[_a-z]([_a-z0-9\-\[\]]|:(?! ))*)/i, 'class');
+
+Compilation works fine without any fixes
+
+# Licenses
+MIT

package/capacitor.config.json

@@ -0,0 +1,6 @@
+{
+  "appId": "com.app.name",
+  "appName": "appname",
+  "webDir": "dist",
+  "bundledWebRuntime": false
+}

package/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="description" content="Vite App">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite App</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <div id="my-modals"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

package/jsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "@icons/*": [
+        "node_modules/@heroicons/vue/*"
+      ],
+      "@models/*": [
+        "./models/*"
+      ]
+    },
+    "jsx": "preserve",
+    "include": [
+      "src/**/*.js",
+      "node_modules/@heroicons/vue/*",
+      "./models/*"
+    ]
+  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "@volar/vue-language-plugin-pug"
+    ]
+  }
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "flameresttable",
+  "version": "1.0.0",
+  "main": "./src/plugin.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "npm run build && vite preview",
+    "install/update": "npm i && npm update --save",
+    "push and publish": "git push && npm --no-git-tag-version version patch && npm publish",
+    "android": "npm run build && npx cap add android && npx cap sync && npx cap open android"
+  },
+  "dependencies": {
+    "@vuepic/vue-datepicker": "^3.6.8",
+    "flamerest": "^1.0.63",
+    "pinia": "^2.0.32",
+    "pug": "github:FlameArt/pug-tailwind-only",
+    "pug-lexer": "github:FlameArt/pug-lexer-only",
+    "sass": "^1.58.3",
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@capacitor/android": "^3.9.0",
+    "@capacitor/cli": "^3.9.0",
+    "@capacitor/core": "^3.9.0",
+    "@heroicons/vue": "^2.0.16",
+    "@types/lodash.merge": "^4.6.7",
+    "@types/node": "18.8.0",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@volar/vue-language-plugin-pug": "^1.1.7",
+    "@vue/compiler-sfc": "^3.2.45",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.34.0",
+    "eslint-plugin-vue": "^8.7.1",
+    "lodash.merge": "^4.6.2",
+    "postcss": "^8.4.21",
+    "postcss-import": "^14.1.0",
+    "tailwindcss": "^3.2.7",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.4",
+    "vue-tsc": "^1.1.7",
+    "vue-universal-modal": "^1.1.4"
+  },
+  "rules": {}
+}

package/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package/src/App.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { onMounted, reactive, defineProps } from '@vue/runtime-core'; import { storeFile } from "@/store"; import { useRoute, useRouter } from 'vue-router'; import REST from "flamerest"
+import Table from './Table/Table.vue';
+const store = storeFile(), router = useRouter(), route = useRoute();
+
+let notRedirectOnAuthList = [
+  "Auth",
+  "Signup",
+  "ResetPasswordRequest",
+  "ResetPassword",
+];
+
+onMounted(() => {
+  REST.auth().then((res) => {
+    store.authUser(res);
+    store.User.isLoaded = true;
+    if (res.isAuthorized === false) {
+      if (!notRedirectOnAuthList.includes(route.name?.toString() ?? "")) {
+        router.push({ name: "Auth" });
+      }
+    } else {
+      // Load state
+      // store.projects = REST.get("projects");
+    }
+  });
+});
+</script>
+
+<template lang="pug">
+Table
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Цвет стандартного фона модального окна */
+.vue-universal-modal {
+  background-color: rgba(0, 0, 0, 0.15) !important;
+}
+</style>

package/src/Table/Columns.ts

@@ -0,0 +1,328 @@
+export class Column implements IColumn {
+
+  /**
+   * Текстовое название поля [колонки], как оно есть в базе
+   */
+  public name: string = "";
+
+  /**
+   * Общее отображаемое имя
+   * Если не установлены более детализированные имена для заголовков таблицы или в попапе - используется оно
+   */
+  public title: string = "";
+
+  /**
+   * Параметры таблицы
+   */
+  public Table = {
+    /**
+     * Показывать ли поле в таблице
+     */
+    isShow: true,
+
+    /**
+     * Заголовок столбца в таблице
+     */
+    title: "",
+
+    /**
+     * Возможность преобразовать вывод из любой колонки
+     * @param row строка
+     * @param column колонка
+     * @returns преобразованное значение
+     */
+    value: (row: any, column: Column) => {
+      return row[column.name]
+    },
+
+    /**
+     * Выводить ли значение из функции value() в чистом html-виде
+     * При значении false любые спецсимволы интерпретируются как строковые символы
+     * При значении true - результат из value() будет напрямую подставлен в HTML
+     * ОСТОРОЖНО С XSS: если подставлять при true чистый пользовательский ввод, он сможет выполнить любой код
+     */
+    isRawValue: false,
+
+    /**
+     * Клик
+     * @param row 
+     * @param column 
+     * @returns 
+     */
+    click: (row: any, column: Column) => { }
+
+  }
+
+  /**
+   * Настройки фильтра
+   */
+  public Filter = {
+
+    // Показываем ли фильтр
+    isShow: true,
+
+    // Значение
+    valueString: "",
+    valueRange: { from: '', to: '' },
+
+    // Минимальное число символов в строке фильтра, после которого будет произведён запрос
+    filterMinSymbolsRequest: 0,
+
+    // Позиция фильтра по порядку
+    filterRow: 0,
+    filterColumn: 0
+
+  }
+
+  public Popup = {
+
+    // Тут привязка к реальным данным
+    model: "",
+
+    // Заголовок поля в попапе
+    title: "",
+
+    // Подсказка
+    desc: "",
+
+    // Текст плейсхолдера
+    placeholder: "",
+
+    isShow: true,
+    isEnabled: true,
+
+    // Отправлять ли поле на бекенд при сохранении записи: добавлении и удалении
+    isSendFromAdd: true,
+    isSendFromEdit: true,
+
+    // Количество строк текстового поля
+    popupTextRows: 6,
+
+    // Настройка загрузчика картинок
+    popupImage: {
+      buttons: false,
+      convertTo: 'image/jpeg'
+    },
+
+    // Тип элемента в попапе
+    // string - обычная строка или селектор строк
+    // text - text area
+    // button - кнопка
+    popupType: 'string' as "string" | "text" | "button" | "date" | "selector",
+
+    // Текст ошибки добавления/обновления
+    errorMessage: '',
+
+    // Настройки селектора, если он включён в popupType
+    Selector: {
+
+      // Значения селектора - готовые
+      values: [],
+
+      // Загрузчик значений - используется всегда и перекрывает values
+      loader: (column: Column) => null
+
+    },
+
+  }
+
+  // Ленивая загрузка полей базы или вообще их не загрузка для экономии траффика
+  public isLoadToTable = true;
+  public isLoadToPopup = true;
+
+  // Порядок колонки в сортировке вывода
+  SortOrder: number | null = null;
+
+
+  // Функция кнопки
+  public buttonFunction = (row: any) => { return true; };
+
+
+
+  /**
+   * Релативная таблица
+   */
+  public linkedto: any = {};
+  public selectResults: Array<any> = [];
+
+  /**
+   * Загружать ли данные от foreign keys, т.к. данных может быть много, по-умолчанию выключено
+   */
+  public isLoadKeys = false;
+
+  // Какие параметры при загрузке ключа
+  public loadKeysParams = {
+    where: null,
+    expand: null,
+    fields: null,
+    sortfields: null,
+    page: 1,
+    perPage: 9999
+  }
+
+  public selectRepresentAs = function (item: any) { return item };
+
+  public Edit = {
+    name: "",
+    desc: "",
+    can: true,
+  }
+  public Add = {
+    name: "",
+    desc: "",
+    can: true,
+    default: undefined
+  }
+
+
+
+
+}
+
+
+export interface IColumn {
+  /**
+   * Текстовое название поля, как оно есть в базе
+   */
+  name?: string,
+
+  /**
+   * Отображаемое имя
+   */
+  title?: string,
+
+
+  /**
+   * Параметры таблицы
+   */
+  Table?: {
+    isShow?: boolean,
+    title?: string,
+    value?: (row: any, column: Column) => string,
+    isRawValue?: boolean,
+    click?: (row: any, column: Column) => void
+  },
+
+  /**
+   * Настройки фильтра
+   */
+  Filter?: {
+
+    // Показываем ли фильтр
+    isShow?: boolean,
+
+    // Значение
+    valueString?: string,
+    valueRange?: { from: string, to: string },
+
+    // Минимальное число символов в строке фильтра, после которого будет произведён запрос
+    filterMinSymbolsRequest?: number,
+
+    // Позиция фильтра по порядку
+    filterRow?: number,
+    filterColumn?: number
+
+  },
+
+  Popup?: {
+
+    // Тут привязка к реальным данным
+    model?: string,
+
+    // Заголовок поля в попапе
+    title?: string,
+
+    // Подсказка
+    desc?: string,
+
+    // Текст плейсхолдера
+    placeholder?: string,
+
+
+    isShow?: boolean,
+    isEnabled?: boolean,
+
+    // Отправлять ли поле на бекенд при сохранении записи: добавлении и удалении
+    isSendFromAdd?: boolean,
+    isSendFromEdit?: boolean,
+
+    // Количество строк текстового поля
+    popupTextRows?: number,
+
+    // Настройка загрузчика картинок
+    popupImage?: {
+      buttons?: boolean,
+      convertTo?: string
+    },
+
+    // Тип элемента в попапе
+    // string - обычная строка или селектор строк
+    // text - text area
+    // button - кнопка
+    popupType?: "string" | "text" | "button" | "date" | "selector",
+
+    // Текст ошибки добавления/обновления
+    errorMessage?: string,
+
+
+    // Настройки селектора, если он включён в popupType
+    Selector?: {
+
+      // Значения селектора - готовые
+      values?: Array<any>,
+
+      // Загрузчик значений - используется всегда и перекрывает values
+      loader?: (column: Column) => Array<any> | null
+
+    },
+
+  },
+
+  // Ленивая загрузка полей базы или вообще их не загрузка для экономии траффика
+  isLoadToTable?: boolean,
+  isLoadToPopup?: boolean,
+
+
+  // Функция кнопки
+  buttonFunction?: any,
+
+
+  // Порядок колонки
+  SortOrder?: number | null,
+
+  /**
+   * Релативная таблица
+   */
+  linkedto?: any,
+  selectResults?: Array<any>,
+
+  /**
+   * Загружать ли данные от foreign keys, т.к. данных может быть много, по-умолчанию выключено
+   */
+  isLoadKeys?: boolean,
+
+  // Какие параметры при загрузке ключа
+  loadKeysParams?: {
+    where?: any,
+    expand?: any,
+    fields?: any,
+    sortfields?: any,
+    page?: number,
+    perPage?: number
+  },
+
+  selectRepresentAs?: any,
+
+  Edit?: {
+    name?: string,
+    desc?: string,
+    can?: boolean,
+  },
+  Add?: {
+    name?: string,
+    desc?: string,
+    can?: boolean,
+    default?: any
+  }
+
+}