flameresttable 1.0.0

package/src/Table/FlameTable.ts

@@ -0,0 +1,210 @@
+import { Column } from './Columns';
+import { Rows, SavedObject } from 'flamerest';
+import TableOpts from "./TableOpts";
+import { reactive, UnwrapRef } from 'vue';
+import merge from 'lodash.merge';
+
+// Подгрузчик типа класса
+type Class<T> = new (...args: any[]) => T
+
+/**
+ * Объект с состоянием REST таблицы
+ */
+export default class FlameTable<T> {
+
+  /**
+   * Режим таблицы
+   */
+  public mode: "table" | "add" | "edit" = "table"
+
+  /**
+   * Готовый набор колонок [уже обработанный]
+   * key - имя колонки, Column - её опции
+   */
+  public columns: { [key: string]: Column } = reactive({});
+
+  /**
+   * Параметры таблицы
+   */
+  public opts: TableOpts = new TableOpts;
+
+  /**
+   * Инициализированная модель REST-таблицы
+   */
+  public model: T;
+
+  /**
+   * Строки
+   */
+  public Rows = reactive({ rows: [] as Array<T> });
+
+  /**
+   * Параметры паджинации
+   */
+  public Pager = reactive({
+    page: 1,
+    perPage: 20,
+    count: 0,
+    total: 0,
+  })
+
+  /**
+   * Параметры прогрузки
+   */
+  public LoadParams = {} as any;
+
+  /**
+   * Открытая в попапе строка
+   */
+  public OpenedRow: any = null;
+
+  /**
+   * Проинициализировать модели
+   */
+  public constructor(TableModel: Class<T>, opts: TableOpts) {
+
+    // Инициализируем переданный класс
+    this.model = new TableModel;
+
+    // забираем все колонки из модели и из опций
+    // так мы можем вставлять люое число колонок не привязываясь
+    // удалим так же дубликаты
+    // TODO: as any
+    const allColumns = [...Object.keys(this.model as any), ...Object.keys(opts.columnsOpts)].filter((value, index, self) => self.indexOf(value) === index)
+
+    // генерим полноценные колонки из описания модели
+    for (const key of allColumns) {
+      const newCol = new Column;
+      this.columns[key] = newCol;
+
+      // Выключаем из редактирования все праймари ключи
+      if ((this.model as any).constructor['primaryKeys'].includes(key))
+        newCol.Popup.isEnabled = false
+
+      // Мержим стандартные параметры с опциями юзера
+      merge(newCol, opts.columnsOpts[key]);
+
+      // Жёстко устанавливаем название поля из базы для этой колонки
+      newCol.name = key;
+
+      // Загружаем селекторы один раз за страницу
+      if (newCol.Popup.popupType === 'selector' && newCol.Popup.Selector.loader !== null)
+        newCol.Popup.Selector.values = reactive(newCol.Popup.Selector.loader(newCol) ?? newCol.Popup.Selector.values)
+
+    }
+
+    // Мержим параметры с базовой версией
+    merge(this.opts, opts);
+
+    // TODO: Сортируем колонки, если указан порядок
+    //this.columns
+
+
+
+    // Далее юзер просто будет делать set("колонка", опции)
+
+  }
+
+  /**
+   * Загрузить результаты от RESTа в таблицу
+   * @param rows Отданный объект
+   */
+  public load(rows: Rows<T>) {
+
+    if (rows.data) {
+      this.Rows.rows = (rows.data ?? []) as any;
+      Object.keys(this.Pager).forEach((key) => (this.Pager as any)[key] = (rows.pages as any)[key])
+    }
+
+  }
+
+  /**
+   * Обновить результаты от RESTа
+   * @param SaveLoadParams Сохранить стандартные параметры загрузки
+   */
+  public async update(SaveLoadParams: any = null) {
+
+    if (SaveLoadParams !== null) this.LoadParams = SaveLoadParams;
+
+    const rows: Rows<T> = await (this.model as any).constructor.all(Object.assign(this.LoadParams, { page: this.Pager.page, perPage: this.Pager.perPage }));
+
+    this.load(rows);
+
+  }
+
+
+
+  public async add(): Promise<SavedObject<T> | null> {
+
+    // Сперва предобработка
+    // TODO: убрать пустой массив т.к. при добавлении он не нужен или прикрепить реактивную модель?
+    if (await this.opts.Popup.beforeAdd({}, this) === false) { return null; }
+
+    const res: SavedObject<T> = await Object.getPrototypeOf(this.model).constructor.create(this.getColumnsForUpdate('add'));
+
+    if (!res.ok || !res.data) {
+      throw res;
+    }
+
+    this.Rows.rows.push(reactive(res.data as any))
+
+    return res;
+
+  }
+
+  public async save(): Promise<SavedObject<T> | null> {
+
+    const tClass = Object.getPrototypeOf(this.model).constructor;
+    const columns = this.getColumnsForUpdate('edit');
+    const indexKey = tClass.primaryKeys[0];
+
+    // Сперва предобработка
+    if (await this.opts.Popup.beforeEdit(columns, this) === false) { return null; }
+
+    // Сохраняем
+    const res: SavedObject<T> = await tClass.edit(columns[indexKey], columns);
+
+    if (!res.ok) {
+      throw res;
+    }
+
+    if (res.data) {
+      const findedIdx = this.Rows.rows.findIndex((row: any) => row[indexKey] === (res.data as any)[indexKey])
+      if (findedIdx !== -1)
+        this.Rows.rows[findedIdx] = reactive(res.data as any);
+    }
+
+    return res;
+
+  }
+
+
+  public async remove(row: T): Promise<SavedObject<T>> {
+
+    const tClass = Object.getPrototypeOf(this.model).constructor;
+    const columns = this.getColumnsForUpdate('edit');
+    const indexKey = tClass.primaryKeys[0];
+    const res = await tClass.delete((row as any)[indexKey]);
+
+    const findedIdx = this.Rows.rows.findIndex((rowx: any) => rowx[indexKey] === (row as any)[indexKey])
+    if (findedIdx !== -1)
+      this.Rows.rows.splice(findedIdx, 1);
+
+    return res;
+
+  }
+
+  private getColumnsForUpdate(mode: "add" | "edit") {
+    const res: { [key: string]: string } = {};
+    for (const key in this.columns) {
+      if (mode === 'add' && !this.columns[key].Popup.isSendFromAdd) continue;
+      if (mode === 'edit' && !this.columns[key].Popup.isSendFromEdit) continue;
+      // TODO: здесь может быть полезно сохранять пустую строку
+      if (this.columns[key].Popup.model !== '') { res[key] = this.columns[key].Popup.model }
+    }
+    return res;
+  }
+
+
+
+}

package/src/Table/Paginator.vue

@@ -0,0 +1,55 @@
+<template lang="pug">
+nav.relative.z-0.w-full.fc.rounded-md.-space-x-px(aria-label='Pagination' @click="")
+  a.relative.inline-flex.items-center.px-2.py-2.rounded-l-md.border.border-gray-300.bg-white.text-sm.font-medium.text-gray-500(href='#' class='hover:bg-gray-50')
+    span.sr-only Previous
+    // Heroicon name: solid/chevron-left
+    svg.h-5.w-5(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 20 20' fill='currentColor' aria-hidden='true')
+      path(fill-rule='evenodd' d='M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z' clip-rule='evenodd')
+  // Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50"
+  a.bg-white.border-gray-300.text-gray-500.relative.inline-flex.items-center.px-4.py-2.border.text-sm.font-medium(v-for="page in props.table.Pager.count" class="hover:bg-gray-50" :class="props.table.Pager.page === page ? 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600' : ''" @click="goPage(page)")
+    | {{ page }}
+  //span.relative.inline-flex.items-center.px-4.py-2.border.border-gray-300.bg-white.text-sm.font-medium.text-gray-700  ... 
+  a.relative.inline-flex.items-center.px-2.py-2.rounded-r-md.border.border-gray-300.bg-white.text-sm.font-medium.text-gray-500(href='#' class='hover:bg-gray-50')
+    span.sr-only Next
+    // Heroicon name: solid/chevron-right
+    svg.h-5.w-5(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 20 20' fill='currentColor' aria-hidden='true')
+      path(fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd')
+
+
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, defineProps } from '@vue/runtime-core'; import type { Ref } from 'vue'; import { storeFile } from "@/store"; import { useRoute, useRouter } from 'vue-router'; import REST from "flamerest"
+
+// Иконки
+import { XCircleIcon } from '@icons/24/solid'
+import FlameTable from './FlameTable';
+
+// Глобальное хранилище и роуты
+const store = storeFile(), router = useRouter(), route = useRoute();
+
+// Локальное состояние компонента
+const state = reactive({
+  data: {}
+})
+
+// Входящие данные компонента
+const props = defineProps<{
+  table: typeof FlameTable.prototype
+}>()
+
+
+// Примонтировано
+onMounted(async () => {
+
+})
+
+const goPage = (page: number) => {
+  // eslint-disable-next-line vue/no-mutating-props
+  props.table.Pager.page = page;
+  props.table.update();
+}
+
+</script>
+
+<style scoped lang="scss"></style>

package/src/Table/Table.vue

@@ -0,0 +1,189 @@
+<template lang="pug">
+.mt-0
+
+  // "ДОБАВИТЬ" И ЧИСЛО ЗАПИСЕЙ
+  .flex.items-center.justify-between
+    slot(name="defaultButtons")
+      .flex.cursor-pointer.justify-center.items-center.text-white.block.bg-blue-600.font-medium.rounded.text-sm.px-4.text-center(v-show="$props.opts?.Add.can" @click="add()" class="hover:bg-blue-700 .focus:ring-4.focus:ring-blue-200.dark:focus:ring-blue-900")
+        div.text-xl +
+        div.ml-2 {{ $props.opts?.Add.buttonTitle }}
+    slot(name="otherButtons")
+    .text-xs.text-gray-400 Показано: {{ Table.Pager.total > Table.Pager.perPage * Table.Pager.page ? Table.Pager.perPage * Table.Pager.page : Table.Pager.total }} / {{ Table.Pager.total }} записей
+
+  // ТАБЛИЦА
+  .mt-2.table.w-full
+
+    // ЗАГОЛОВКИ СТОЛБЦОВ
+    .table-header-group
+      .table-cell.border-r.border-r-slate-100.px-2(v-for="column in Table.columns"  v-show="column.Table.isShow")
+        span {{ column.title !== '' ? column.title : column.name }}
+      .table-cell.border-r.border-r-slate-100.px-2(v-if="opts.Edit.can")
+        button.bg-green-600.invisible Изменить
+      .table-cell.border-r.border-r-slate-100.px-2(v-if="opts.Remove.can")
+        button.bg-green-600.invisible Удалить
+
+    // СТРОКИ
+    .table-row-group
+      .table-row.cursor-pointer(v-for="row in (Table.Rows.rows)" class="hover:bg-slate-100")
+        .table-cell.border-r.border-r-slate-100.px-2(v-for="column in Table.columns" v-show="column.Table.isShow" @click="column.Table.click(row, column)" class="last:border-r-0 last:pr-0")
+          span {{ column.Table.value(row, column) }}
+        .table-cell.border-r.border-r-slate-100.px-2.text-center(v-if="opts.Edit.can")
+          button.px-2.py-1.bg-green-600.text-white.my-1(@click="edit(row)") Изменить
+        .table-cell.border-r.border-r-slate-100.px-2.text-center(v-if="opts.Remove.can")
+          button.px-2.py-1.bg-gray-600.opacity-30.text-white.my-1(@click="deleteRow(row)") Удалить
+
+Paginator.mt-3(:table="Table")
+
+// МОДАЛКА ДОБАВЛЕНИЯ
+ModalVue(ref="FlameTableModal")
+  template(v-slot)
+    .bg-white.rounded-xl(:class="'w-full desktop:w-[777px]'")
+
+      slot(name="header")
+
+      // КОЛОНКИ ТАБЛИЦЫ
+      label.flex.items-stretch.justify-center.w-full.my-1.ml-2(v-for="column in ColumnNames", v-show="Table.columns[column].Popup.isShow")
+        .w-44.text-left.px-2.py-1.bg-slate-100
+          div {{ Table.columns[column].Popup.title !== '' ? Table.columns[column].Popup.title === '' : Table.columns[column].title !== '' ? Table.columns[column].title : Table.columns[column].name }}
+          .text-xs.text-slate-400 {{ Table.columns[column].Popup.desc }}
+        .flex-1.mr-5.w-full.flex.flex-col.self-stretch(v-if="Table.columns[column].Popup.popupType === 'string' || Table.columns[column].Popup.popupType === 'text'")
+          input.h-full.self-stretch.py-1.px-2.w-full.outline-none.border.border-slate-100(v-model="Table.columns[column].Popup.model", type="text", :disabled="!Table.columns[column].Popup.isEnabled", :placeholder="Table.columns[column].Popup.placeholder !== '' ? Table.columns[column].Popup.placeholder : Table.columns[column].title !== '' ? Table.columns[column].title : Table.columns[column].name")
+        .flex-1.mr-5.w-full.flex.flex-col.self-stretch(v-if="Table.columns[column].Popup.popupType === 'date'")
+          Datepicker(v-model="Table.columns[column].Popup.model" autoApply )
+        .flex-1.mr-5.w-full.flex.flex-col.self-stretch(v-if="Table.columns[column].Popup.popupType === 'selector'")
+          select.h-full.self-stretch.py-1.px-2.w-full.outline-none.border.border-slate-100(v-model="Table.columns[column].Popup.model")
+            option(v-for="(selectorVal, selectorKey) in Table.columns[column].Popup.Selector.values" :value="getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[1]") {{ getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[0] }}
+
+      // КНОПКИ СОХРАНЕНИЯ
+      .flex.w-full.mt-3.mb-2.justify-between.items-center
+        .cursor-pointer.ml-2.text-lg.py-2.text-white.block.bg-gray-400.font-medium.rounded.text-sm.px-4.text-center(v-show="$props.opts?.Add.can" @click="Table.OpenedRow = null; FlameTableModal?.close()" class="hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900") Отмена
+        .cursor-pointer.ml-2.text-lg.py-2.mr-3.text-white.block.bg-blue-600.font-medium.rounded.text-sm.px-4.text-center(@click="SaveTable()" class="hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900") {{ Table.mode === 'add' ? 'Добавить' : 'Сохранить' }}
+
+
+  
+</template>
+
+<script lang="ts">
+import { onMounted, reactive, ref, defineProps } from '@vue/runtime-core'; import type { Ref } from 'vue'; import { storeFile } from "@/store"; import { useRoute, useRouter } from 'vue-router'; import REST, { Rows } from "flamerest"
+
+// Иконки
+import { XCircleIcon } from '@icons/24/solid'
+import { computed } from '@vue/reactivity';
+import { Column } from './Columns';
+import { defineComponent } from 'vue';
+import TableOpts from './TableOpts';
+import FlameTable from './FlameTable';
+import ModalVue from './../components/default/Modal.vue';
+import Paginator from './Paginator.vue';
+type Class<T> = new (...args: any[]) => T;
+
+import Datepicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+import { isNumber } from 'lodash';
+
+
+export default defineComponent({
+  components: { ModalVue, Paginator, Datepicker },
+  props: {
+    rows: {
+      default: [] as Array<any>,
+      type: Array<any>
+    },
+    opts: {
+      default: new TableOpts,
+      type: TableOpts
+    },
+    model: {
+      default: null,
+      type: Function
+    },
+  },
+  setup(props) {
+
+    const Table = new FlameTable(props.model as any, props.opts);
+
+    const FlameTableModal = ref<InstanceType<typeof ModalVue>>();
+
+    const ColumnNames = Object.keys(Table.model as any);
+
+    /**
+     * Добавление новой записи
+     */
+    const add = () => {
+      Table.mode = 'add';
+
+      // Установим все поля в пустые значения
+      ColumnNames.forEach(key => {
+        Table.columns[key].Popup.model = "";
+      })
+
+      FlameTableModal.value?.show();
+    }
+
+    /**
+     * Редактирование записи
+     */
+    const edit = async (row: any) => {
+      Table.mode = 'edit';
+
+      await Table.opts.Popup.load(row, Table);
+
+      // Установим все поля в фактические значения из таблицы
+      ColumnNames.forEach(key => {
+        Table.columns[key].Popup.model = row[key];
+      })
+
+      Table.OpenedRow = row;
+
+      FlameTableModal.value?.show();
+    }
+
+    const SaveTable = async () => {
+
+      try {
+        if (Table.mode === 'add') {
+          await Table.add()
+        }
+        else {
+          await Table.save()
+        }
+      }
+      catch (Ex) { return; }
+
+      FlameTableModal.value?.close();
+
+      Table.OpenedRow = null;
+
+    }
+
+    const deleteRow = async (row: any) => {
+      if (window.confirm("Удалить запись " + row + "?")) {
+        Table.remove(row);
+      }
+    }
+
+    const getSelector = (arr: any, selectorKey: any, selectorVal: any) => {
+      if (Array.isArray(arr)) return [selectorVal, selectorVal];
+      // TODO: тут загрузка объекта должна быть
+      if (typeof arr === 'object' && arr !== null) return [selectorKey, selectorVal]
+      return [selectorKey, selectorVal]
+    }
+
+    return {
+      Table,
+      FlameTableModal,
+      ColumnNames,
+      add,
+      edit,
+      SaveTable,
+      deleteRow,
+      getSelector
+    }
+
+  },
+
+})
+
+</script>
+
+<style scoped lang="scss"></style>

package/src/Table/TableFilters.vue

@@ -0,0 +1,32 @@
+<template lang="pug">
+.flex
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, defineProps } from '@vue/runtime-core'; import type { Ref } from 'vue'; import { storeFile } from "@/store"; import { useRoute, useRouter } from 'vue-router'; import REST from "flamerest"
+
+// Иконки
+import { XCircleIcon } from '@icons/24/solid'
+import { TableFilter } from './TableOpts.js';
+
+// Глобальное хранилище и роуты
+const store = storeFile(), router = useRouter(), route = useRoute();
+
+// Локальное состояние компонента
+const state = reactive({
+  data: {}
+})
+
+// Входящие данные компонента
+const props = defineProps<{
+  filters: Array<TableFilter>
+}>()
+
+// Примонтировано
+onMounted(async () => {
+
+})
+
+</script>
+
+<style scoped lang="scss"></style>

package/src/Table/TableOpts.ts

@@ -0,0 +1,91 @@
+import { Column, IColumn } from './Columns';
+
+import merge from 'lodash.merge'
+import FlameTable from './FlameTable';
+
+export default class TableOpts {
+
+  /**
+   * Колонки
+   */
+  public columnsOpts: { [key: string]: IColumn } = {};
+
+  public set(ColumnName: string, mergingOpts: IColumn) {
+    // TODO: ЕСТЬ ОШИБКА???
+    if (this.columnsOpts[ColumnName] === undefined) this.columnsOpts[ColumnName] = new Column as any
+    merge(this.columnsOpts[ColumnName], mergingOpts)
+  }
+
+  /**
+   * Удалить одну колонку или сразу несколько
+   * @param ColumnName Полностью удалить строку
+   */
+  public delete(ColumnName: string | Array<string>) {
+
+    let arr: Array<string> = [];
+    if (typeof ColumnName === 'string') arr = [ColumnName as string];
+    else arr = ColumnName as Array<string>;
+
+    for (const key in arr) {
+      // TODO: ????? as any
+      if (this.columnsOpts[arr[key]] === undefined) this.columnsOpts[arr[key]] = new Column as any
+      merge(this.columnsOpts[arr[key]], { Table: { isShow: false }, Popup: { isShow: false } })
+    }
+
+  }
+
+  public Add = {
+    can: true,
+    buttonTitle: "Добавить",
+    func: () => {
+    }
+  };
+  public Remove = {
+    can: true,
+    func: () => {
+    }
+  };
+  public Edit = {
+    can: true,
+    func: () => {
+    }
+  };
+
+  public Popup = {
+    /**
+     * Функция при загрузке попапа
+     */
+    load: async (row: any, table: typeof FlameTable.prototype) => {
+    },
+
+    /**
+     * Выполняет код перед сохранением записи, и ждёт true для продолжения
+     * @param row 
+     * @param table 
+     * @returns 
+     */
+    beforeEdit: async (row: any, table: typeof FlameTable.prototype): Promise<boolean> => {
+      return true;
+    },
+    beforeAdd: async (row: any, table: typeof FlameTable.prototype): Promise<boolean> => {
+      return true;
+    },
+
+
+
+  }
+
+
+  /**
+   * Запрос на поиск записей
+   */
+  public find = () => {
+
+  }
+
+
+}
+
+export interface TableFilter {
+  type: "float" | "integer" | "string" | "text" | "date" | "selector"
+}

package/src/assets/icons/facebook.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="67px" id="Layer_1" style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="67px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M29.765,50.32h6.744V33.998h4.499l0.596-5.624h-5.095  l0.007-2.816c0-1.466,0.14-2.253,2.244-2.253h2.812V17.68h-4.5c-5.405,0-7.307,2.729-7.307,7.317v3.377h-3.369v5.625h3.369V50.32z   M34,64C17.432,64,4,50.568,4,34C4,17.431,17.432,4,34,4s30,13.431,30,30C64,50.568,50.568,64,34,64z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#3A589B;"/></svg>

package/src/assets/icons/google.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 508.33 508.36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;fill-rule:evenodd;}.cls-3{clip-path:url(#clip-path);}.cls-4{fill:#fbbc05;}.cls-5{fill:#ea4335;}.cls-6{fill:#34a853;}.cls-7{fill:#4285f4;}</style><clipPath id="clip-path" transform="translate(-1.83 -1.82)"><path class="cls-1" d="M392.69,221.58H253.09v57.88h80.36c-7.49,36.77-38.82,57.88-80.36,57.88a88.53,88.53,0,1,1,0-177.05A86.61,86.61,0,0,1,308.25,180l43.58-43.58C325.28,113.3,291.23,99,253.09,99a149.82,149.82,0,0,0,0,299.63c74.91,0,143-54.48,143-149.82A124.29,124.29,0,0,0,392.69,221.58Z"/></clipPath></defs><title/><path class="cls-2" d="M485,29.72c11.45,15.13,16.61,40.21,19.15,70.7,3.36,45.5,4.71,100.1,6,156.52-1.67,57.47-2.35,115.43-6,156.52-2.88,31.54-9,52.66-19.22,65.47-13,12.79-37.94,23.59-73.5,26.15-43.25,3.69-96.61,3.65-155.48,5.1-65.44-1.12-109.82-.64-156.38-5.08-36.32-2.52-60.08-13.19-74.7-26.07-10.83-14.54-14-30-17-66.24-3.75-41.85-4.58-98.56-6-155.54C4,200.57,4.13,143.44,7.9,100.74,10.43,67.05,14.42,44.4,24.65,30,39,17.77,63.48,11.69,100,8.69c50-5.85,102.06-7,155.88-6.87,55.39.09,108.56,1.67,156,6.34,32,2.56,58.48,8.07,73.07,21.56Z" transform="translate(-1.83 -1.82)"/><g class="cls-3"><path class="cls-4" d="M89.66,337.34V160.29l115.77,88.53Z" transform="translate(-1.83 -1.82)"/></g><g class="cls-3"><path class="cls-5" d="M89.66,160.29l115.77,88.53,47.67-41.54,163.43-26.56V85.38H89.66Z" transform="translate(-1.83 -1.82)"/></g><g class="cls-3"><path class="cls-6" d="M89.66,337.34,294,180.72l53.8,6.81L416.53,85.38V412.25H89.66Z" transform="translate(-1.83 -1.82)"/></g><g class="cls-3"><path class="cls-7" d="M416.53,412.25,205.43,248.82l-27.24-20.43,238.34-68.1Z" transform="translate(-1.83 -1.82)"/></g></svg>

package/src/components/default/Modal.vue

@@ -0,0 +1,87 @@
+<template lang="pug">
+
+// УНИВЕРСАЛЬНОЕ МОДАЛЬНОЕ ОКНО
+  Позволяет вызывать себя через show() и close()
+
+CustomModal.overall(v-model="isShow" :close="close" style="z-index: 999999;")
+
+  // Этот слот для замены самого окна
+  slot
+
+    .bg-white.rounded-xl
+
+      // Этот слот позволяет заменить всё сразу внутри окна
+      slot(name="inner")
+
+        // Заголовок
+        .flex.items-center.px-5.border-b.border-b-gray-300(v-if="title !== ''")
+          h1.text-3xl.py-5 {{ title }}
+          XCircleIcon.ml-24.w-6.opacity-25.cursor-pointer(@click="close")
+
+        // Тело
+        .my-3.px-5
+          slot(name="body")
+            .text-left {{ body === '' ? 'Укажите сообщение или используйте слот body' : '' }}
+
+        // Кнопки
+        slot(name="buttons")
+          .border-t.border-t-gray-300.mb-4.pt-3.pr-5.flex.items-end.flex-col
+            button.cursor-pointer.ml-5.rounded-full.bg-blue-700.px-4.py-1.text-white(@click="close") {{ closeButton === '' ? 'Закрыть' : closeButton }}
+      
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from '@vue/runtime-core'; import { storeFile } from "@/store"; import { useRoute, useRouter } from 'vue-router'; import REST from "flamerest";
+
+// Иконки
+import { XCircleIcon } from '@icons/24/solid'
+
+export default defineComponent({
+
+  components: { XCircleIcon },
+
+  props: {
+    title: {
+      type: String,
+      default: "",
+      required: false
+    },
+    body: {
+      type: String,
+      default: "",
+      required: false
+    },
+    closeButton: {
+      type: String,
+      default: "",
+      required: false
+    },
+  },
+
+  setup(props) {
+
+    const isShow = ref(false)
+
+    function show() {
+      isShow.value = true
+    }
+
+    function close() {
+      isShow.value = false
+    }
+
+    return {
+      isShow,
+      show,
+      close,
+    }
+  },
+
+})
+
+
+</script>
+
+<style scoped lang="scss">
+.overall {}
+</style>

package/src/components.ts

@@ -0,0 +1,4 @@
+import Table from "./Table/Table.vue";
+
+
+export default { Table };