flameresttable 1.0.0

package/src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}

package/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/main.ts

@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './index.css'
+import { createPinia } from 'pinia'
+import router from "./router";
+
+import 'vue-universal-modal/dist/index.css'
+import VueUniversalModal from 'vue-universal-modal'
+
+
+
+
+createApp(App)
+.use(createPinia())
+.use(router)
+.use(VueUniversalModal, {teleportTarget: '#my-modals',modalComponent: 'CustomModal'})
+.mount('#app')

package/src/pages/Home.vue

@@ -0,0 +1,33 @@
+<template lang="pug">
+.flex.justify-center.h-screen.items-center.flex-col
+  .px-8.py-6.mt-4.text-left.bg-white.shadow-lg.desktop:w-feed-lg
+    | Welcome!
+
+</template>
+
+<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 { XCircleIcon } from '@icons/solid'
+
+const store = storeFile(), router = useRouter(), route = useRoute();
+
+// Состояние компонента
+const state = reactive({
+  test: 5
+})
+
+
+onMounted(() => {
+
+});
+
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/src/pages/user/Auth.vue

@@ -0,0 +1,90 @@
+<template lang="pug">
+.flex.justify-center.h-screen.items-center.flex-col
+  //h3.text-xl.font-bold.text-center Вход
+  .px-8.py-6.mt-4.text-left.bg-white.shadow-lg.desktop:w-[700px]
+    .mt-0
+      .h-4.mb-3.text-gray-400 Войти через
+      .flex.text-sm.flex-col.desktop:flex-row
+        a.flex.flex-1.items-center(href="/auth/social?authclient=google")
+          img.max-h-8(src="/src/assets/icons/google.svg")
+          span.pl-6 Google
+        a.flex.flex-1.items-center(
+          href="/auth/social?authclient=facebook",
+          v-if="store.User.country !== 'RU'"
+        )
+          img.max-h-8(src="/src/assets/icons/facebook.svg")
+          span.pl-6 Facebook
+    .h-4.mb-3.text-gray-400.text-xs.mt-4.desktop:mt-6.desktop:text-sm Или с помощью почты и пароля
+
+    .mt-4
+      label.block
+        input.w-full.px-4.py-2.mt-0.border.rounded-md.focus:outline-none.focus:ring-1.focus:ring-blue-600.placeholder:text-gray-500(
+          v-model="state.login",
+          name="email",
+          type="text",
+          placeholder="Почта",
+        )
+        span.text-xs.tracking-wide.text-red-600 {{ state.loginErr }}
+      .mt-2
+      label.block
+        input.w-full.px-4.py-2.mt-0.border.rounded-md.focus:outline-none.focus:ring-1.focus:ring-blue-600.placeholder:text-gray-500(
+          v-model="state.passw",
+          name="password",
+          type="password",
+          placeholder="Пароль",
+        )
+        .my-2.text-xs.tracking-wide.text-red-600 {{ state.passwErr }}
+        a.my-4.text-xs.text-gray-500.cursor-pointer.hover:underline(
+          @click="router.push({ name: 'ResetPasswordRequest' })"
+        ) Я забыл свой пароль
+
+      .flex.items-center.justify-between.flex-col
+        button.px-6.py-2.mt-4.text-white.bg-blue-600.rounded-lg.w-full.cursor-pointer.hover:bg-blue-900(
+          @click="Login()"
+        ) Войти
+
+      .pt-2.text-center
+        a.text-xs.text-gray-500.cursor-pointer.hover:underline(
+          @click="router.push({ name: 'Signup' })"
+        ) Зарегистрироваться
+</template>
+
+<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"
+
+const store = storeFile();
+const router = useRouter(),
+  route = useRoute();
+
+const state = reactive({
+  login: "",
+  passw: "",
+  loginErr: "",
+  passwErr: "",
+});
+
+onMounted(() => { });
+
+let Login = () => {
+  REST.auth(state.login, state.passw).then((res) => {
+    if (res.isAuthorized) {
+      store.authUser(res);
+      store.User.isLoaded = true;
+      router.push({ name: "Home" });
+    } else {
+      if (res.errors) {
+        state.loginErr = (
+          res.errors["email"] ??
+          res.errors["login"] ??
+          []
+        ).join(". ");
+        state.passwErr = (res.errors["password"] ?? []).join(". ");
+      }
+    }
+  });
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/src/pages/user/ResetPassword.vue

@@ -0,0 +1,25 @@
+<template lang="pug">
+.flex.justify-center.h-screen.items-center.flex-col
+  .px-8.py-6.mt-4.text-left.bg-white.shadow-lg.desktop:w-[725px]
+    | Not implemented
+</template>
+
+<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"
+const store = storeFile(); const router = useRouter(), route = useRoute();
+
+// Состояние компонента
+const state = reactive({
+  test: 5
+})
+
+onMounted(() => {
+
+})
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/src/pages/user/ResetPasswordRequest.vue

@@ -0,0 +1,26 @@
+<template lang="pug">
+.flex.justify-center.h-screen.items-center.flex-col
+  .px-8.py-6.mt-4.text-left.bg-white.shadow-lg.desktop:w-[725px]
+    | Not implemented
+
+</template>
+
+<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"
+const store = storeFile(); const router = useRouter(), route = useRoute();
+
+// Состояние компонента
+const state = reactive({
+  test: 5
+})
+
+onMounted(() => {
+
+})
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/src/pages/user/Signup.vue

@@ -0,0 +1,96 @@
+<template lang="pug">
+.flex.justify-center.h-screen.items-center.flex-col
+
+  .px-8.py-6.mt-4.text-left.bg-white.shadow-lg.desktop:w-feed
+
+    // Регистрация через соц-сети
+    .mt-0
+      .h-4.mb-3.text-gray-400 Быстрая регистрация через
+      .flex.text-sm.flex-col.desktop:flex-row
+        a.flex.flex-1.items-center(href="/auth/social?authclient=google")
+          img.max-h-8(src="/src/assets/icons/google.svg")
+          span.pl-6 Google
+        a.flex.flex-1.items-center(
+          href="/auth/social?authclient=facebook",
+          v-if="store.User.country !== 'RU'"
+        )
+          img.max-h-8(src="/src/assets/icons/facebook.svg")
+          span.pl-6 Facebook
+
+    .h-4.mb-3.text-gray-400.text-xs.mt-4.desktop:mt-6.desktop:text-sm Или введите почту и пароль
+
+    // Регистрация через логин и пароль
+    .mt-4
+
+      // Имя пользователя
+      label.block
+        input.w-full.px-4.py-2.mt-0.border.rounded-md.focus:outline-none.focus:ring-1.focus:ring-blue-600.placeholder:text-gray-500(
+          v-model="state.name",
+          name="name",
+          type="text",
+          placeholder="Ваше имя или никнейм, который увидят другие",
+        )
+        span.text-xs.tracking-wide.text-red-600 {{ state.errors['name']?.join(". ") }}
+
+      // Почта
+      label.block.mt-2
+        input.w-full.px-4.py-2.mt-0.border.rounded-md.focus:outline-none.focus:ring-1.focus:ring-blue-600.placeholder:text-gray-500(
+          v-model="state.email",
+          name="email",
+          type="text",
+          placeholder="Почта",
+        )
+        span.text-xs.tracking-wide.text-red-600 {{ state.errors['email']?.join(". ") }}
+
+      // Пароль
+      label.block.mt-2
+        input.w-full.px-4.py-2.mt-0.border.rounded-md.focus:outline-none.focus:ring-1.focus:ring-blue-600.placeholder:text-gray-500(
+          v-model="state.passw",
+          name="password",
+          type="password",
+          placeholder="Пароль",
+        )
+        span.my-4.text-xs.tracking-wide.text-red-600 {{ state.errors['password']?.join(". ") }}
+
+      // Кнопка реги
+      .flex.items-center.justify-between.flex-col
+        button.px-6.py-2.mt-4.text-white.bg-blue-600.rounded-lg.w-full.hover:bg-blue-900(
+          @click="Signup()"
+        ) Регистрация
+
+</template>
+
+<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"
+
+const store = storeFile();
+const router = useRouter(),
+  route = useRoute();
+
+const state = reactive({
+  email: "",
+  passw: "",
+  name: "",
+  errors: [] as { [key: string]: any }
+});
+
+onMounted(() => { });
+
+let Signup = () => {
+  REST.signup(state.email, null, state.passw, state.name).then((res) => {
+    if (res.isAuthorized === true) {
+      store.authUser(res);
+      store.User.isLoaded = true;
+      router.push({ name: "Home" });
+      return;
+    }
+    if (res.errors) {
+      state.errors = res.errors;
+    }
+  });
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/src/pages/user/UserSettings.vue

@@ -0,0 +1,25 @@
+<template lang="pug">
+</template>
+
+<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 { XCircleIcon } from '@icons/solid'
+
+const store = storeFile(), router = useRouter(), route = useRoute();
+
+// Иконки
+
+// Состояние компонента
+const state = reactive({
+  test: 5
+})
+
+onMounted(() => {
+
+})
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/src/plugin.ts

@@ -0,0 +1,9 @@
+import Table from "./Table/Table.vue";
+
+const plugin = {
+  install(Vue: any) {
+    Vue.component('RestTable', Table);
+  }
+}
+
+export default plugin

package/src/router.ts

@@ -0,0 +1,40 @@
+import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: ()=> import('./pages/Home.vue'),
+  },
+  {
+    path: '/in',
+    name: 'Auth',
+    component: ()=> import('./pages/user/Auth.vue'),
+  },
+  {
+    path: '/signup',
+    name: 'Signup',
+    component: ()=> import('./pages/user/Signup.vue'),
+  },
+  {
+    path: '/resetpasswordrequest',
+    name: 'ResetPasswordRequest',
+    component: ()=> import('./pages/user/ResetPasswordRequest.vue'),
+  },
+  {
+    path: '/resetpassword',
+    name: 'ResetPassword',
+    component: ()=> import('./pages/user/ResetPassword.vue'),
+  },
+  {
+    path: '/mysettings',
+    name: 'MySettings',
+    component: ()=> import('./pages/user/UserSettings.vue'),
+  },
+
+
+]
+const router = createRouter({
+  history: createWebHistory(),
+  routes: routes,
+})
+export default router

package/src/store.ts

@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia'
+import { Authorized } from 'flamerest'
+
+export const storeFile = defineStore('store', {
+  state: () => {
+    return {
+      User: {
+        id: 0,
+        role: 'Guest',
+        name: 'name',
+        lang: '',
+        country: '',
+        avatar: '',
+        isLoaded: false
+      },
+
+      Table: {
+        rows: {}
+      }
+
+    }
+  },
+  // could also be defined as
+  // state: () => ({ count: 0 })
+  actions: {
+    authUser(tUser: Authorized) {
+      this.User = Object.assign(this.User, tUser.User);
+    },
+  },
+})

package/tailwind.config.js

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+
+const plugin = require('tailwindcss/plugin')
+
+module.exports = {
+  mode: 'jit',
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      spacing: {
+        'feed-lg': '777px',
+        'desktop': '1110px'
+      },
+      fontSize: {
+        '7': '.438rem',
+        '8': '.5rem',
+        '9': '.563rem',
+        '10': '.625rem',
+        '11': '.688rem',
+      }
+    },
+    screens: {
+
+      'mobile': { min: '320px', max: '1080px' },
+      // => @media (min-width: 640px) { ... }
+
+      'tablet': { min: '640px', max: '1080px' },
+      // => @media (min-width: 640px) { ... }
+
+      'desktop': '1080px',
+      // => @media (min-width: 1280px) { ... }
+
+    },
+  },
+  plugins: [
+    plugin(function ({ addComponents, theme }) {
+      addComponents(
+        {
+          '.fc': {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          },
+          '.fb': {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          },
+          '.button': {
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            cursor: 'pointer',
+            backgroundColor: 'white',
+            padding: '2px 14px',
+            '& svg,img': {
+              width: '16px',
+              marginRight: '4px'
+            },
+            '&:hover': {
+              opacity: 0.8
+            }
+          },
+
+        }
+      )
+    }),
+  ],
+}

package/tsconfig.json

@@ -0,0 +1,51 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "@icons/*": [
+        "node_modules/@heroicons/vue/*"
+      ],
+      "@models/*": [
+        "models/*"
+      ]
+    },
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": [
+      "esnext",
+      "dom",
+      "ES2016"
+    ],
+    "skipLibCheck": true,
+    "allowJs": true,
+    "experimentalDecorators": true,
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "models/**/*.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "vueCompilerOptions": {
+    "plugins": [
+      "@volar/vue-language-plugin-pug"
+    ]
+  }
+}

package/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.js"]
+}

package/vite.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from "url";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/',
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+      "@icons": fileURLToPath(new URL("./node_modules/@heroicons/vue/", import.meta.url)),
+      "@models": fileURLToPath(new URL("./models/", import.meta.url)),
+    }
+  },
+  "server": {
+    "port": 3000
+  },
+  "preview": {
+    "port": 3000
+  },
+})

package/volar-fix.ps1

@@ -0,0 +1 @@
+((Get-Content -path ("" + (gci $env:USERPROFILE/.vscode/extensions/*volar* | sort Name | select -last 1) + "/dist/node/server.js") -Raw).replace('/^\.([_a-z0-9\-]*[_a-z][_a-z0-9\-]*)/i', '/^\.([_a-z0-9\-]*[_a-z]([_a-z0-9\-\[\]]|:(?! ))*)/i')) | Set-Content -Path ("" + (gci $env:USERPROFILE/.vscode/extensions/*volar* | sort Name | select -last 1) + "/dist/node/server.js")