wip
This commit is contained in:
728
package-lock.json
generated
728
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -15,8 +15,14 @@
|
|||||||
"format": "prettier --write --experimental-cli src/"
|
"format": "prettier --write --experimental-cli src/"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@primeuix/themes": "^2.0.3",
|
||||||
|
"@tailwindcss/vite": "^4.2.1",
|
||||||
"@vueuse/core": "^14.2.1",
|
"@vueuse/core": "^14.2.1",
|
||||||
"pinia": "^3.0.4",
|
"pinia": "^3.0.4",
|
||||||
|
"primeicons": "^7.0.0",
|
||||||
|
"primevue": "^4.5.4",
|
||||||
|
"tailwindcss": "^4.2.1",
|
||||||
|
"tailwindcss-primeui": "^0.6.1",
|
||||||
"vue": "^3.5.28"
|
"vue": "^3.5.28"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
11
src/App.vue
11
src/App.vue
@@ -1,17 +1,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import ChatView from '@/views/ChatView.vue'
|
|
||||||
import { useAuthStore } from '@/stores/auth.ts'
|
import { useAuthStore } from '@/stores/auth.ts'
|
||||||
import SignInView from '@/views/SignInView.vue'
|
import SignInView from '@/views/SignInView.vue'
|
||||||
|
import MainView from '@/views/MainView.vue'
|
||||||
|
|
||||||
const authStore = useAuthStore()
|
const authStore = useAuthStore()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="chat-fullscreen">
|
<div class="h-screen bg-gray-200">
|
||||||
<div class="h-100 w-50r margin-auto py-4">
|
<div class="h-full m-auto p-4">
|
||||||
<chat-view />
|
<MainView v-if="authStore.isAuth" />
|
||||||
<!-- <chat-view v-if="authStore.isAuth" />-->
|
<SignInView v-else />
|
||||||
<!-- <sign-in-view v-else />-->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,415 +0,0 @@
|
|||||||
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
|
|
||||||
|
|
||||||
/* Reset box-model and set borders */
|
|
||||||
/* ============================================ */
|
|
||||||
|
|
||||||
*,
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Document */
|
|
||||||
/* ============================================ */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the line height in all browsers.
|
|
||||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
|
||||||
* 3. Remove gray overlay on links for iOS.
|
|
||||||
*/
|
|
||||||
|
|
||||||
html {
|
|
||||||
line-height: 1.15; /* 1 */
|
|
||||||
-webkit-text-size-adjust: 100%; /* 2 */
|
|
||||||
-webkit-tap-highlight-color: transparent; /* 3*/
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sections */
|
|
||||||
/* ============================================ */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the margin in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render the `main` element consistently in IE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
main {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Vertical rhythm */
|
|
||||||
/* ============================================ */
|
|
||||||
|
|
||||||
p,
|
|
||||||
table,
|
|
||||||
blockquote,
|
|
||||||
address,
|
|
||||||
pre,
|
|
||||||
iframe,
|
|
||||||
form,
|
|
||||||
figure,
|
|
||||||
dl {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Headings */
|
|
||||||
/* ============================================ */
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-size: inherit;
|
|
||||||
font-weight: inherit;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lists (enumeration) */
|
|
||||||
/* ============================================ */
|
|
||||||
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lists (definition) */
|
|
||||||
/* ============================================ */
|
|
||||||
|
|
||||||
dt {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grouping content */
|
|
||||||
/* ============================================ */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Add the correct box sizing in Firefox.
|
|
||||||
* 2. Show the overflow in Edge and IE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
hr {
|
|
||||||
box-sizing: content-box; /* 1 */
|
|
||||||
height: 0; /* 1 */
|
|
||||||
overflow: visible; /* 2 */
|
|
||||||
border-top-width: 1px;
|
|
||||||
margin: 0;
|
|
||||||
clear: both;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
* 2. Correct the odd `em` font sizing in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
pre {
|
|
||||||
font-family: monospace, monospace; /* 1 */
|
|
||||||
font-size: inherit; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
address {
|
|
||||||
font-style: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text-level semantics */
|
|
||||||
/* ============================================ */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the gray background on active links in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
a {
|
|
||||||
background-color: transparent;
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Remove the bottom border in Chrome 57-
|
|
||||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
text-decoration: underline dotted; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
* 2. Correct the odd `em` font sizing in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
samp {
|
|
||||||
font-family: monospace, monospace; /* 1 */
|
|
||||||
font-size: inherit; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct font size in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
|
||||||
* all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Replaced content */
|
|
||||||
/* ============================================ */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prevent vertical alignment issues.
|
|
||||||
*/
|
|
||||||
|
|
||||||
svg,
|
|
||||||
img,
|
|
||||||
embed,
|
|
||||||
object,
|
|
||||||
iframe {
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Forms */
|
|
||||||
/* ============================================ */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Reset form fields to make them styleable.
|
|
||||||
* 1. Make form elements stylable across systems iOS especially.
|
|
||||||
* 2. Inherit text-transform from parent.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
optgroup,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
-webkit-appearance: none; /* 1 */
|
|
||||||
appearance: none;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: inherit;
|
|
||||||
font: inherit;
|
|
||||||
background: transparent;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
text-align: inherit;
|
|
||||||
text-transform: inherit; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct cursors for clickable elements.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
[type="button"],
|
|
||||||
[type="reset"],
|
|
||||||
[type="submit"] {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:disabled,
|
|
||||||
[type="button"]:disabled,
|
|
||||||
[type="reset"]:disabled,
|
|
||||||
[type="submit"]:disabled {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Improve outlines for Firefox and unify style with input elements & buttons.
|
|
||||||
*/
|
|
||||||
|
|
||||||
:-moz-focusring {
|
|
||||||
outline: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
select:disabled {
|
|
||||||
opacity: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove padding
|
|
||||||
*/
|
|
||||||
|
|
||||||
option {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Reset to invisible
|
|
||||||
*/
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
||||||
*/
|
|
||||||
|
|
||||||
progress {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the default vertical scrollbar in IE 10+.
|
|
||||||
*/
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the outline style in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="search"] {
|
|
||||||
outline-offset: -2px; /* 1 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the inner padding in Chrome and Safari on macOS.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="search"]::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
* 2. Fix font inheritance.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
|
||||||
-webkit-appearance: button; /* 1 */
|
|
||||||
font: inherit; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fix appearance for Firefox
|
|
||||||
*/
|
|
||||||
[type="number"] {
|
|
||||||
-moz-appearance: textfield;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clickable labels
|
|
||||||
*/
|
|
||||||
|
|
||||||
label[for] {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Interactive */
|
|
||||||
/* ============================================ */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
details {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add the correct display in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
summary {
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Remove outline for editable content.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[contenteditable]:focus {
|
|
||||||
outline: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tables */
|
|
||||||
/* ============================================ */
|
|
||||||
|
|
||||||
/**
|
|
||||||
1. Correct table border color inheritance in all Chrome and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-color: inherit; /* 1 */
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
caption {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
vertical-align: top;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
text-align: left;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
53
src/assets/custom.css
Normal file
53
src/assets/custom.css
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
font-family: "Inter", sans-serif;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-variation-settings: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light */
|
||||||
|
:root {
|
||||||
|
--p-primary-color: var(--p-primary-500);
|
||||||
|
--p-primary-contrast-color: var(--p-surface-0);
|
||||||
|
--p-primary-hover-color: var(--p-primary-600);
|
||||||
|
--p-primary-active-color: var(--p-primary-700);
|
||||||
|
--p-content-border-color: var(--p-surface-200);
|
||||||
|
--p-content-hover-background: var(--p-surface-100);
|
||||||
|
--p-content-hover-color: var(--p-surface-800);
|
||||||
|
--p-highlight-background: var(--p-primary-50);
|
||||||
|
--p-highlight-color: var(--p-primary-700);
|
||||||
|
--p-highlight-focus-background: var(--p-primary-100);
|
||||||
|
--p-highlight-focus-color: var(--p-primary-800);
|
||||||
|
--p-text-color: var(--p-surface-700);
|
||||||
|
--p-text-hover-color: var(--p-surface-800);
|
||||||
|
--p-text-muted-color: var(--p-surface-500);
|
||||||
|
--p-text-hover-muted-color: var(--p-surface-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--p-primary-color: var(--p-primary-400);
|
||||||
|
--p-primary-contrast-color: var(--p-surface-900);
|
||||||
|
--p-primary-hover-color: var(--p-primary-300);
|
||||||
|
--p-primary-active-color: var(--p-primary-200);
|
||||||
|
--p-content-border-color: var(--p-surface-700);
|
||||||
|
--p-content-hover-background: var(--p-surface-800);
|
||||||
|
--p-content-hover-color: var(--p-surface-0);
|
||||||
|
--p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
|
||||||
|
--p-highlight-color: rgba(255, 255, 255, 0.87);
|
||||||
|
--p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
|
||||||
|
--p-highlight-focus-color: rgba(255, 255, 255, 0.87);
|
||||||
|
--p-text-color: var(--p-surface-0);
|
||||||
|
--p-text-hover-color: var(--p-surface-0);
|
||||||
|
--p-text-muted-color: var(--p-surface-400);
|
||||||
|
--p-text-hover-muted-color: var(--p-surface-300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dark {
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
26
src/assets/default.css
Normal file
26
src/assets/default.css
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
:root {
|
||||||
|
--p-primary-50: #ecfdf5;
|
||||||
|
--p-primary-100: #d1fae5;
|
||||||
|
--p-primary-200: #a7f3d0;
|
||||||
|
--p-primary-300: #6ee7b7;
|
||||||
|
--p-primary-400: #34d399;
|
||||||
|
--p-primary-500: #10b981;
|
||||||
|
--p-primary-600: #059669;
|
||||||
|
--p-primary-700: #047857;
|
||||||
|
--p-primary-800: #065f46;
|
||||||
|
--p-primary-900: #064e3b;
|
||||||
|
--p-primary-950: #022c22;
|
||||||
|
--p-surface-0: #ffffff;
|
||||||
|
--p-surface-50: #fafafa;
|
||||||
|
--p-surface-100: #f4f4f5;
|
||||||
|
--p-surface-200: #e4e4e7;
|
||||||
|
--p-surface-300: #d4d4d8;
|
||||||
|
--p-surface-400: #a1a1aa;
|
||||||
|
--p-surface-500: #71717a;
|
||||||
|
--p-surface-600: #52525b;
|
||||||
|
--p-surface-700: #3f3f46;
|
||||||
|
--p-surface-800: #27272a;
|
||||||
|
--p-surface-900: #18181b;
|
||||||
|
--p-surface-950: #09090b;
|
||||||
|
--p-content-border-radius: 6px;
|
||||||
|
}
|
||||||
@@ -1,137 +1,3 @@
|
|||||||
.chat-fullscreen {
|
@import "tailwindcss";
|
||||||
height: 100vh;
|
@import "tailwindcss-primeui";
|
||||||
}
|
@import "primeicons/primeicons.css";
|
||||||
|
|
||||||
input,
|
|
||||||
button {
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-100 {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-20r {
|
|
||||||
height: 20rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-40r {
|
|
||||||
height: 40rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-100 {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-5r {
|
|
||||||
width: 5rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-20r {
|
|
||||||
width: 20rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-40r {
|
|
||||||
width: 40rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-50r {
|
|
||||||
width: 50rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-60r {
|
|
||||||
width: 60rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.margin-auto {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border {
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
.d-flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.flex-column {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.flex-row-reverse {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-column-reverse {
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-grow-0 {
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-grow-1 {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.align-center {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-center {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overflow-y-auto{
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overflow-hidden {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.ga-2 {
|
|
||||||
gap: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ga-4 {
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pa-1 {
|
|
||||||
padding: .25rem;
|
|
||||||
}
|
|
||||||
.pa-2 {
|
|
||||||
padding: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pa-4 {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.py-4 {
|
|
||||||
padding: 1rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.px-4 {
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.px-8 {
|
|
||||||
padding: 0 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.red {
|
|
||||||
background: #e68181;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue {
|
|
||||||
background: #5d5ded;
|
|
||||||
}
|
|
||||||
|
|
||||||
.green {
|
|
||||||
background: #82e882;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yellow {
|
|
||||||
background: #eaea83;
|
|
||||||
}
|
|
||||||
|
|||||||
137
src/assets/main1.css
Normal file
137
src/assets/main1.css
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
.chat-fullscreen {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button {
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-100 {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-20r {
|
||||||
|
height: 20rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-40r {
|
||||||
|
height: 40rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-100 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-5r {
|
||||||
|
width: 5rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-20r {
|
||||||
|
width: 20rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-40r {
|
||||||
|
width: 40rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-50r {
|
||||||
|
width: 50rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-60r {
|
||||||
|
width: 60rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin-auto {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
.d-flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.flex-column {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.flex-row-reverse {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-column-reverse {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-grow-0 {
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-grow-1 {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-y-auto{
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-hidden {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.ga-2 {
|
||||||
|
gap: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ga-4 {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pa-1 {
|
||||||
|
padding: .25rem;
|
||||||
|
}
|
||||||
|
.pa-2 {
|
||||||
|
padding: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pa-4 {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py-4 {
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.px-4 {
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.px-8 {
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
background: #e68181;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
background: #5d5ded;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
background: #82e882;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow {
|
||||||
|
background: #eaea83;
|
||||||
|
}
|
||||||
@@ -1,17 +1,22 @@
|
|||||||
<script setup lang="ts"></script>
|
<script setup lang="ts">
|
||||||
|
import { JustList, JustListItem, JustNav } from '@/components/simple'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const model = defineModel<string>()
|
||||||
|
|
||||||
|
function onSelect(value: string) {
|
||||||
|
model.value = value
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="red w-5r d-flex flex-column align-center pa-1">
|
<JustNav>
|
||||||
<div>
|
<JustList>
|
||||||
<span class="mdi mdi-account"></span>
|
<JustListItem value="users" icon="mdi-account" @click="onSelect" />
|
||||||
</div>
|
<JustListItem value="messages" icon="mdi-message" @click="onSelect" />
|
||||||
<div>
|
<JustListItem value="settings" icon="mdi-cog" @click="onSelect" />
|
||||||
<span class="mdi mdi-message"></span>
|
</JustList>
|
||||||
</div>
|
</JustNav>
|
||||||
<div>
|
|
||||||
<span class="mdi mdi-cog"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|||||||
@@ -1,50 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { type Chat, useChatsStore } from '@/stores/chats.ts'
|
|
||||||
import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts'
|
|
||||||
import { useAuthStore } from '@/stores/auth.ts'
|
|
||||||
|
|
||||||
const authStore = useAuthStore()
|
|
||||||
const chatsStore = useChatsStore()
|
|
||||||
const socketsStore = useSocketsStore()
|
|
||||||
|
|
||||||
function onSelect(id: string) {
|
|
||||||
const chatId = id
|
|
||||||
chatsStore.selected = chatId
|
|
||||||
|
|
||||||
socketsStore.send({
|
|
||||||
type: SocketDataReq.GET_MESSAGES,
|
|
||||||
data: { chat_id: chatId },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function getChatName(chat: Chat) {
|
|
||||||
if (chat.type_id === 2) {
|
|
||||||
return chat.name
|
|
||||||
} else if (chat.type_id === 1) {
|
|
||||||
const otherUsers = chat.users.filter((user) => user.id !== authStore.me?.id)
|
|
||||||
return otherUsers[0]?.name ?? otherUsers[0]?.email ?? 'unknown'
|
|
||||||
}
|
|
||||||
|
|
||||||
return 'unknown ID'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="d-flex flex-column ga-2 h-100 overflow-hidden">
|
|
||||||
<div>chats</div>
|
|
||||||
|
|
||||||
<!-- <div class="overflow-y-auto">-->
|
|
||||||
<!-- <div v-for="i in 30" :key="i" class="pa-4 border">bla</div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<div v-for="chat in chatsStore.chats" :key="chat.id" @click="onSelect(chat.id)" class="border">
|
|
||||||
<div>{{ getChatName(chat) }}</div>
|
|
||||||
<div>avatar</div>
|
|
||||||
<div>
|
|
||||||
<div>0</div>
|
|
||||||
<div>00:00</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
35
src/components/ChatListElement.vue
Normal file
35
src/components/ChatListElement.vue
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { Chat } from '@/stores/chats.ts'
|
||||||
|
import { useAuthStore } from '@/stores/auth.ts'
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
chat: Chat
|
||||||
|
}
|
||||||
|
|
||||||
|
const { chat } = defineProps<Props>()
|
||||||
|
const authStore = useAuthStore()
|
||||||
|
|
||||||
|
const getChatName = computed(() => {
|
||||||
|
if (chat.type_id === 2) {
|
||||||
|
return chat.name
|
||||||
|
} else if (chat.type_id === 1) {
|
||||||
|
const otherUsers = chat.users.filter((user) => user.id !== authStore.me?.id)
|
||||||
|
return otherUsers[0]?.name ?? otherUsers[0]?.email ?? 'unknown'
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'unknown ID'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="border p-2">
|
||||||
|
<!-- {{ chat }}-->
|
||||||
|
<div>id:{{ chat.id }}</div>
|
||||||
|
<div>name:{{ chat.name }}</div>
|
||||||
|
<div>type:{{ chat.type_id }}</div>
|
||||||
|
<div>chatName:{{ getChatName }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@@ -5,7 +5,7 @@ const search = ref('')
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="d-flex align-center ga-4">
|
<div class="flex gap-2 p-4 border bg-amber-200">
|
||||||
<button>menu</button>
|
<button>menu</button>
|
||||||
<input v-model="search" placeholder="Search..." />
|
<input v-model="search" placeholder="Search..." />
|
||||||
</div>
|
</div>
|
||||||
38
src/components/Chats/ChatsList.vue
Normal file
38
src/components/Chats/ChatsList.vue
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { useChatsStore } from '@/stores/chats.ts'
|
||||||
|
import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts'
|
||||||
|
import ChatListElement from '@/components/ChatListElement.vue'
|
||||||
|
|
||||||
|
const chatsStore = useChatsStore()
|
||||||
|
const socketsStore = useSocketsStore()
|
||||||
|
|
||||||
|
function onSelect(id: string) {
|
||||||
|
const chatId = id
|
||||||
|
chatsStore.selected = chatId
|
||||||
|
|
||||||
|
socketsStore.send({
|
||||||
|
type: SocketDataReq.GET_MESSAGES,
|
||||||
|
data: { chat_id: chatId },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-col gap-2 h-full overflow-hidden px-2">
|
||||||
|
<div>chats</div>
|
||||||
|
|
||||||
|
<!-- <div class="overflow-y-auto">-->
|
||||||
|
<!-- <div v-for="i in 30" :key="i" class="pa-4 border">bla</div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div class="flex flex-col gap-2 h-full overflow-y-auto">
|
||||||
|
<chat-list-element
|
||||||
|
v-for="chat in chatsStore.chats"
|
||||||
|
:key="chat.id"
|
||||||
|
v-bind="{ chat }"
|
||||||
|
@click="onSelect(chat.id)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@@ -4,12 +4,18 @@ import ChatList from '@/components/ChatList.vue'
|
|||||||
import { useAuthStore } from '@/stores/auth.ts'
|
import { useAuthStore } from '@/stores/auth.ts'
|
||||||
import { type Chat, useChatsStore } from '@/stores/chats.ts'
|
import { type Chat, useChatsStore } from '@/stores/chats.ts'
|
||||||
import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts'
|
import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts'
|
||||||
import AppMenu from '@/components/AppMenu.vue'
|
import UserList from '@/components/Users/UserList.vue'
|
||||||
|
|
||||||
const authStore = useAuthStore()
|
const authStore = useAuthStore()
|
||||||
const chatsStore = useChatsStore()
|
const chatsStore = useChatsStore()
|
||||||
const socketsStore = useSocketsStore()
|
const socketsStore = useSocketsStore()
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
selected: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps()
|
||||||
|
|
||||||
function onSelect(value: { id: unknown }) {
|
function onSelect(value: { id: unknown }) {
|
||||||
const chatId = value.id as string
|
const chatId = value.id as string
|
||||||
chatsStore.selected = chatId
|
chatsStore.selected = chatId
|
||||||
@@ -33,10 +39,8 @@ function getChatName(chat: Chat) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-100 d-flex h-100 flex-column ga-2 yellow">
|
<div class="w-full flex flex-col h-full gap-2">
|
||||||
<chat-toolbar />
|
<slot />
|
||||||
|
|
||||||
<chat-list />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -35,15 +35,15 @@ const avatarLetter = computed(() => {
|
|||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
|
|
||||||
<div class="d-flex ga-2 border" :class="{ 'flex-row-reverse': props.my }">
|
<div class="flex gap-2 border" :class="{ 'flex-row-reverse': props.my }">
|
||||||
<!-- <v-avatar size="36" color="deep-purple-lighten-4">-->
|
<!-- <v-avatar size="36" color="deep-purple-lighten-4">-->
|
||||||
<!-- <span class="text-deep-purple-darken-2">{{ avatarLetter }}</span>-->
|
<!-- <span class="text-deep-purple-darken-2">{{ avatarLetter }}</span>-->
|
||||||
<!-- </v-avatar>-->
|
<!-- </v-avatar>-->
|
||||||
|
|
||||||
<!-- :class="props.my ? 'message-shaped-right' : 'message-shaped'"-->
|
<!-- :class="props.my ? 'message-shaped-right' : 'message-shaped'"-->
|
||||||
<div class="pa-4" :class="props.my ? 'red' : 'blue'">
|
<div class="pa-4" :class="props.my ? 'bg-blue-400' : 'bg-white'">
|
||||||
<span class="text-body-1">{{ props.text }}</span>
|
<span class="">{{ props.text }}</span>
|
||||||
<span class="text-caption ml-2">{{ createdAt }}</span>
|
<span class="">{{ createdAt }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -30,27 +30,24 @@ watch(messages, async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-100 green h-100">
|
<div class="w-full h-full bg-blue-200 border">
|
||||||
<!-- <button class="position-absolute scroll-down" @click="scrollToBottom">UP</button>-->
|
<!-- <button class="position-absolute scroll-down" @click="scrollToBottom">UP</button>-->
|
||||||
<div class="d-flex flex-column h-100">
|
<div class="flex flex-col h-full">
|
||||||
<div class="d-flex h-100 flex-column overflow-hidden">
|
<div class="flex h-full flex-col overflow-hidden">
|
||||||
<message-toolbar class="flex-grow-0" />
|
<message-toolbar class="grow-0" />
|
||||||
|
|
||||||
<div
|
<div class="px-8 gap-2 grow flex flex-col-reverse overflow-y-auto" ref="messageArea">
|
||||||
class="px-8 ga-2 flex-grow-1 d-flex flex-column flex-column-reverse overflow-y-auto"
|
<message-data
|
||||||
ref="messageArea"
|
v-for="message in messages"
|
||||||
>
|
:key="message.id"
|
||||||
<!-- <message-data-->
|
:text="message.text"
|
||||||
<!-- v-for="message in messages"-->
|
:my="authStore.me?.id === message.user_id"
|
||||||
<!-- :key="message.id"-->
|
:created-at="message.created_at"
|
||||||
<!-- :text="message.text"-->
|
></message-data>
|
||||||
<!-- :my="authStore.me?.id === message.user_id"-->
|
<!-- <div class="p-4 border" v-for="v in 101" :key="v">text {{ v }}</div>-->
|
||||||
<!-- :created-at="message.created_at"-->
|
|
||||||
<!-- ></message-data>-->
|
|
||||||
<div class="pa-4 border" v-for="v in 101" :key="v">text {{ v }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<message-form class="flex-grow-0 blue" />
|
<message-form class="grow-0 bg-green-200" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
5
src/components/Settings/SettingsList.vue
Normal file
5
src/components/Settings/SettingsList.vue
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<template>2</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
51
src/components/Users/UsersList.vue
Normal file
51
src/components/Users/UsersList.vue
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { SocketDataReq, useSocketsStore } from '@/stores/sockets.ts'
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
import { useUsersStore } from '@/stores/users.ts'
|
||||||
|
import UsersListElement from '@/components/Users/UsersListElement.vue'
|
||||||
|
import { useAuthStore } from '@/stores/auth.ts'
|
||||||
|
|
||||||
|
const socketsStore = useSocketsStore()
|
||||||
|
const usersStore = useUsersStore()
|
||||||
|
const authStore = useAuthStore()
|
||||||
|
|
||||||
|
function onInit() {
|
||||||
|
socketsStore.send({
|
||||||
|
type: SocketDataReq.GET_USERS,
|
||||||
|
data: {},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onInit()
|
||||||
|
})
|
||||||
|
|
||||||
|
function onStartChat(userId: number) {
|
||||||
|
console.log('user', userId)
|
||||||
|
console.log('me', authStore.me?.id)
|
||||||
|
|
||||||
|
socketsStore.send({
|
||||||
|
type: SocketDataReq.CREATE_CHAT,
|
||||||
|
data: {
|
||||||
|
userId: userId,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-col gap-2 h-full overflow-hidden px-2">
|
||||||
|
<div>contacts</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-2 h-full overflow-y-auto">
|
||||||
|
<UsersListElement
|
||||||
|
v-for="user in usersStore.users"
|
||||||
|
:key="user.id"
|
||||||
|
v-bind:user="user"
|
||||||
|
@click="onStartChat"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
25
src/components/Users/UsersListElement.vue
Normal file
25
src/components/Users/UsersListElement.vue
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { User } from '@/stores/users.ts'
|
||||||
|
import { JustButton } from '@/components/simple'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
user: User
|
||||||
|
}
|
||||||
|
|
||||||
|
const { user } = defineProps<Props>()
|
||||||
|
const emit = defineEmits<{
|
||||||
|
click: [id: number]
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="border p-2">
|
||||||
|
<!-- <div>log: {{ user }}</div>-->
|
||||||
|
<div>id:{{ user.id }}</div>
|
||||||
|
<div>name:{{ user.name }}</div>
|
||||||
|
<div>email:{{ user.email }}</div>
|
||||||
|
<JustButton @click="emit('click', user.id)">start chat</JustButton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
9
src/components/simple/JustButton.vue
Normal file
9
src/components/simple/JustButton.vue
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<button class="border border-gray-700 rounded-md text-gray-700 px-1.5 py-1.5 flex justify-center">
|
||||||
|
<slot></slot>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
12
src/components/simple/JustInput.vue
Normal file
12
src/components/simple/JustInput.vue
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const model = defineModel()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<input
|
||||||
|
v-model="model"
|
||||||
|
class="border px-2 py-1.5 rounded-md bg-white outline-none focus:outline-none"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
23
src/components/simple/JustList.vue
Normal file
23
src/components/simple/JustList.vue
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, useSlots } from 'vue'
|
||||||
|
|
||||||
|
const model = defineModel('selected')
|
||||||
|
function checkSlots() {
|
||||||
|
const slots = useSlots()
|
||||||
|
console.log('slots')
|
||||||
|
if (slots.default) {
|
||||||
|
// console.log('default slot', slots.default())
|
||||||
|
|
||||||
|
const a = slots.default().map((el) => el)
|
||||||
|
console.log('a', a)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
21
src/components/simple/JustListItem.vue
Normal file
21
src/components/simple/JustListItem.vue
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import JustButton from '@/components/simple/JustButton.vue'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
icon: string
|
||||||
|
value: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const { icon, value } = defineProps<Props>()
|
||||||
|
const emit = defineEmits<{
|
||||||
|
click: [value: string]
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<JustButton @click="emit('click', value)">
|
||||||
|
<span class="mdi text-2xl" :class="icon"></span>
|
||||||
|
</JustButton>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
9
src/components/simple/JustNav.vue
Normal file
9
src/components/simple/JustNav.vue
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="w-16 flex flex-col gap-2 items-stretch p-1 border">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
22
src/components/simple/JustTest.vue
Normal file
22
src/components/simple/JustTest.vue
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
interface Props {
|
||||||
|
text: string
|
||||||
|
value: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const { text, value } = defineProps<Props>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
click: [value: string]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
function onClick() {
|
||||||
|
emit('click', value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-col gap-2 border" @click="onClick">{{ text }} - {{ value }}</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
8
src/components/simple/index.ts
Normal file
8
src/components/simple/index.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import JustInput from '@/components/simple/JustInput.vue'
|
||||||
|
import JustButton from '@/components/simple/JustButton.vue'
|
||||||
|
import JustList from '@/components/simple/JustList.vue'
|
||||||
|
import JustListItem from '@/components/simple/JustListItem.vue'
|
||||||
|
import JustNav from '@/components/simple/JustNav.vue'
|
||||||
|
import JustTest from '@/components/simple/JustTest.vue'
|
||||||
|
|
||||||
|
export { JustInput, JustButton, JustList, JustListItem, JustNav, JustTest }
|
||||||
459
src/composables/useLayout.ts
Normal file
459
src/composables/useLayout.ts
Normal file
@@ -0,0 +1,459 @@
|
|||||||
|
import { updatePrimaryPalette, updateSurfacePalette } from '@primeuix/themes'
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
|
||||||
|
const appState = ref({
|
||||||
|
primary: 'black',
|
||||||
|
surface: '',
|
||||||
|
darkMode: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
const primaryColors = ref([
|
||||||
|
{
|
||||||
|
name: 'emerald',
|
||||||
|
palette: {
|
||||||
|
50: '#ecfdf5',
|
||||||
|
100: '#d1fae5',
|
||||||
|
200: '#a7f3d0',
|
||||||
|
300: '#6ee7b7',
|
||||||
|
400: '#34d399',
|
||||||
|
500: '#10b981',
|
||||||
|
600: '#059669',
|
||||||
|
700: '#047857',
|
||||||
|
800: '#065f46',
|
||||||
|
900: '#064e3b',
|
||||||
|
950: '#022c22',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'green',
|
||||||
|
palette: {
|
||||||
|
50: '#f0fdf4',
|
||||||
|
100: '#dcfce7',
|
||||||
|
200: '#bbf7d0',
|
||||||
|
300: '#86efac',
|
||||||
|
400: '#4ade80',
|
||||||
|
500: '#22c55e',
|
||||||
|
600: '#16a34a',
|
||||||
|
700: '#15803d',
|
||||||
|
800: '#166534',
|
||||||
|
900: '#14532d',
|
||||||
|
950: '#052e16',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'lime',
|
||||||
|
palette: {
|
||||||
|
50: '#f7fee7',
|
||||||
|
100: '#ecfccb',
|
||||||
|
200: '#d9f99d',
|
||||||
|
300: '#bef264',
|
||||||
|
400: '#a3e635',
|
||||||
|
500: '#84cc16',
|
||||||
|
600: '#65a30d',
|
||||||
|
700: '#4d7c0f',
|
||||||
|
800: '#3f6212',
|
||||||
|
900: '#365314',
|
||||||
|
950: '#1a2e05',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'orange',
|
||||||
|
palette: {
|
||||||
|
50: '#fff7ed',
|
||||||
|
100: '#ffedd5',
|
||||||
|
200: '#fed7aa',
|
||||||
|
300: '#fdba74',
|
||||||
|
400: '#fb923c',
|
||||||
|
500: '#f97316',
|
||||||
|
600: '#ea580c',
|
||||||
|
700: '#c2410c',
|
||||||
|
800: '#9a3412',
|
||||||
|
900: '#7c2d12',
|
||||||
|
950: '#431407',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'amber',
|
||||||
|
palette: {
|
||||||
|
50: '#fffbeb',
|
||||||
|
100: '#fef3c7',
|
||||||
|
200: '#fde68a',
|
||||||
|
300: '#fcd34d',
|
||||||
|
400: '#fbbf24',
|
||||||
|
500: '#f59e0b',
|
||||||
|
600: '#d97706',
|
||||||
|
700: '#b45309',
|
||||||
|
800: '#92400e',
|
||||||
|
900: '#78350f',
|
||||||
|
950: '#451a03',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'yellow',
|
||||||
|
palette: {
|
||||||
|
50: '#fefce8',
|
||||||
|
100: '#fef9c3',
|
||||||
|
200: '#fef08a',
|
||||||
|
300: '#fde047',
|
||||||
|
400: '#facc15',
|
||||||
|
500: '#eab308',
|
||||||
|
600: '#ca8a04',
|
||||||
|
700: '#a16207',
|
||||||
|
800: '#854d0e',
|
||||||
|
900: '#713f12',
|
||||||
|
950: '#422006',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'teal',
|
||||||
|
palette: {
|
||||||
|
50: '#f0fdfa',
|
||||||
|
100: '#ccfbf1',
|
||||||
|
200: '#99f6e4',
|
||||||
|
300: '#5eead4',
|
||||||
|
400: '#2dd4bf',
|
||||||
|
500: '#14b8a6',
|
||||||
|
600: '#0d9488',
|
||||||
|
700: '#0f766e',
|
||||||
|
800: '#115e59',
|
||||||
|
900: '#134e4a',
|
||||||
|
950: '#042f2e',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'cyan',
|
||||||
|
palette: {
|
||||||
|
50: '#ecfeff',
|
||||||
|
100: '#cffafe',
|
||||||
|
200: '#a5f3fc',
|
||||||
|
300: '#67e8f9',
|
||||||
|
400: '#22d3ee',
|
||||||
|
500: '#06b6d4',
|
||||||
|
600: '#0891b2',
|
||||||
|
700: '#0e7490',
|
||||||
|
800: '#155e75',
|
||||||
|
900: '#164e63',
|
||||||
|
950: '#083344',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'sky',
|
||||||
|
palette: {
|
||||||
|
50: '#f0f9ff',
|
||||||
|
100: '#e0f2fe',
|
||||||
|
200: '#bae6fd',
|
||||||
|
300: '#7dd3fc',
|
||||||
|
400: '#38bdf8',
|
||||||
|
500: '#0ea5e9',
|
||||||
|
600: '#0284c7',
|
||||||
|
700: '#0369a1',
|
||||||
|
800: '#075985',
|
||||||
|
900: '#0c4a6e',
|
||||||
|
950: '#082f49',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'blue',
|
||||||
|
palette: {
|
||||||
|
50: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
200: '#bfdbfe',
|
||||||
|
300: '#93c5fd',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#3b82f6',
|
||||||
|
600: '#2563eb',
|
||||||
|
700: '#1d4ed8',
|
||||||
|
800: '#1e40af',
|
||||||
|
900: '#1e3a8a',
|
||||||
|
950: '#172554',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'indigo',
|
||||||
|
palette: {
|
||||||
|
50: '#eef2ff',
|
||||||
|
100: '#e0e7ff',
|
||||||
|
200: '#c7d2fe',
|
||||||
|
300: '#a5b4fc',
|
||||||
|
400: '#818cf8',
|
||||||
|
500: '#6366f1',
|
||||||
|
600: '#4f46e5',
|
||||||
|
700: '#4338ca',
|
||||||
|
800: '#3730a3',
|
||||||
|
900: '#312e81',
|
||||||
|
950: '#1e1b4b',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'violet',
|
||||||
|
palette: {
|
||||||
|
50: '#f5f3ff',
|
||||||
|
100: '#ede9fe',
|
||||||
|
200: '#ddd6fe',
|
||||||
|
300: '#c4b5fd',
|
||||||
|
400: '#a78bfa',
|
||||||
|
500: '#8b5cf6',
|
||||||
|
600: '#7c3aed',
|
||||||
|
700: '#6d28d9',
|
||||||
|
800: '#5b21b6',
|
||||||
|
900: '#4c1d95',
|
||||||
|
950: '#2e1065',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'purple',
|
||||||
|
palette: {
|
||||||
|
50: '#faf5ff',
|
||||||
|
100: '#f3e8ff',
|
||||||
|
200: '#e9d5ff',
|
||||||
|
300: '#d8b4fe',
|
||||||
|
400: '#c084fc',
|
||||||
|
500: '#a855f7',
|
||||||
|
600: '#9333ea',
|
||||||
|
700: '#7e22ce',
|
||||||
|
800: '#6b21a8',
|
||||||
|
900: '#581c87',
|
||||||
|
950: '#3b0764',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'fuchsia',
|
||||||
|
palette: {
|
||||||
|
50: '#fdf4ff',
|
||||||
|
100: '#fae8ff',
|
||||||
|
200: '#f5d0fe',
|
||||||
|
300: '#f0abfc',
|
||||||
|
400: '#e879f9',
|
||||||
|
500: '#d946ef',
|
||||||
|
600: '#c026d3',
|
||||||
|
700: '#a21caf',
|
||||||
|
800: '#86198f',
|
||||||
|
900: '#701a75',
|
||||||
|
950: '#4a044e',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'pink',
|
||||||
|
palette: {
|
||||||
|
50: '#fdf2f8',
|
||||||
|
100: '#fce7f3',
|
||||||
|
200: '#fbcfe8',
|
||||||
|
300: '#f9a8d4',
|
||||||
|
400: '#f472b6',
|
||||||
|
500: '#ec4899',
|
||||||
|
600: '#db2777',
|
||||||
|
700: '#be185d',
|
||||||
|
800: '#9d174d',
|
||||||
|
900: '#831843',
|
||||||
|
950: '#500724',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'rose',
|
||||||
|
palette: {
|
||||||
|
50: '#fff1f2',
|
||||||
|
100: '#ffe4e6',
|
||||||
|
200: '#fecdd3',
|
||||||
|
300: '#fda4af',
|
||||||
|
400: '#fb7185',
|
||||||
|
500: '#f43f5e',
|
||||||
|
600: '#e11d48',
|
||||||
|
700: '#be123c',
|
||||||
|
800: '#9f1239',
|
||||||
|
900: '#881337',
|
||||||
|
950: '#4c0519',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const surfaces = ref([
|
||||||
|
{
|
||||||
|
name: 'slate',
|
||||||
|
palette: {
|
||||||
|
0: '#ffffff',
|
||||||
|
50: '#f8fafc',
|
||||||
|
100: '#f1f5f9',
|
||||||
|
200: '#e2e8f0',
|
||||||
|
300: '#cbd5e1',
|
||||||
|
400: '#94a3b8',
|
||||||
|
500: '#64748b',
|
||||||
|
600: '#475569',
|
||||||
|
700: '#334155',
|
||||||
|
800: '#1e293b',
|
||||||
|
900: '#0f172a',
|
||||||
|
950: '#020617',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'gray',
|
||||||
|
palette: {
|
||||||
|
0: '#ffffff',
|
||||||
|
50: '#f9fafb',
|
||||||
|
100: '#f3f4f6',
|
||||||
|
200: '#e5e7eb',
|
||||||
|
300: '#d1d5db',
|
||||||
|
400: '#9ca3af',
|
||||||
|
500: '#6b7280',
|
||||||
|
600: '#4b5563',
|
||||||
|
700: '#374151',
|
||||||
|
800: '#1f2937',
|
||||||
|
900: '#111827',
|
||||||
|
950: '#030712',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'zinc',
|
||||||
|
palette: {
|
||||||
|
0: '#ffffff',
|
||||||
|
50: '#fafafa',
|
||||||
|
100: '#f4f4f5',
|
||||||
|
200: '#e4e4e7',
|
||||||
|
300: '#d4d4d8',
|
||||||
|
400: '#a1a1aa',
|
||||||
|
500: '#71717a',
|
||||||
|
600: '#52525b',
|
||||||
|
700: '#3f3f46',
|
||||||
|
800: '#27272a',
|
||||||
|
900: '#18181b',
|
||||||
|
950: '#09090b',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'neutral',
|
||||||
|
palette: {
|
||||||
|
0: '#ffffff',
|
||||||
|
50: '#fafafa',
|
||||||
|
100: '#f5f5f5',
|
||||||
|
200: '#e5e5e5',
|
||||||
|
300: '#d4d4d4',
|
||||||
|
400: '#a3a3a3',
|
||||||
|
500: '#737373',
|
||||||
|
600: '#525252',
|
||||||
|
700: '#404040',
|
||||||
|
800: '#262626',
|
||||||
|
900: '#171717',
|
||||||
|
950: '#0a0a0a',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'stone',
|
||||||
|
palette: {
|
||||||
|
0: '#ffffff',
|
||||||
|
50: '#fafaf9',
|
||||||
|
100: '#f5f5f4',
|
||||||
|
200: '#e7e5e4',
|
||||||
|
300: '#d6d3d1',
|
||||||
|
400: '#a8a29e',
|
||||||
|
500: '#78716c',
|
||||||
|
600: '#57534e',
|
||||||
|
700: '#44403c',
|
||||||
|
800: '#292524',
|
||||||
|
900: '#1c1917',
|
||||||
|
950: '#0c0a09',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'soho',
|
||||||
|
palette: {
|
||||||
|
0: '#ffffff',
|
||||||
|
50: '#f4f4f4',
|
||||||
|
100: '#e8e9e9',
|
||||||
|
200: '#d2d2d4',
|
||||||
|
300: '#bbbcbe',
|
||||||
|
400: '#a5a5a9',
|
||||||
|
500: '#8e8f93',
|
||||||
|
600: '#77787d',
|
||||||
|
700: '#616268',
|
||||||
|
800: '#4a4b52',
|
||||||
|
900: '#34343d',
|
||||||
|
950: '#1d1e27',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'viva',
|
||||||
|
palette: {
|
||||||
|
0: '#ffffff',
|
||||||
|
50: '#f3f3f3',
|
||||||
|
100: '#e7e7e8',
|
||||||
|
200: '#cfd0d0',
|
||||||
|
300: '#b7b8b9',
|
||||||
|
400: '#9fa1a1',
|
||||||
|
500: '#87898a',
|
||||||
|
600: '#6e7173',
|
||||||
|
700: '#565a5b',
|
||||||
|
800: '#3e4244',
|
||||||
|
900: '#262b2c',
|
||||||
|
950: '#0e1315',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'ocean',
|
||||||
|
palette: {
|
||||||
|
0: '#ffffff',
|
||||||
|
50: '#fbfcfc',
|
||||||
|
100: '#F7F9F8',
|
||||||
|
200: '#EFF3F2',
|
||||||
|
300: '#DADEDD',
|
||||||
|
400: '#B1B7B6',
|
||||||
|
500: '#828787',
|
||||||
|
600: '#5F7274',
|
||||||
|
700: '#415B61',
|
||||||
|
800: '#29444E',
|
||||||
|
900: '#183240',
|
||||||
|
950: '#0c1920',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
export function useLayout() {
|
||||||
|
function setPrimary(value: string) {
|
||||||
|
appState.value.primary = value
|
||||||
|
}
|
||||||
|
|
||||||
|
function setSurface(value: string) {
|
||||||
|
appState.value.surface = value
|
||||||
|
}
|
||||||
|
|
||||||
|
function setDarkMode(value: boolean) {
|
||||||
|
appState.value.darkMode = value
|
||||||
|
if (value) {
|
||||||
|
document.documentElement.classList.add('p-dark')
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('p-dark')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleDarkMode() {
|
||||||
|
appState.value.darkMode = !appState.value.darkMode
|
||||||
|
document.documentElement.classList.toggle('p-dark')
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateColors(type: string, colorName: string) {
|
||||||
|
if (type === 'primary') {
|
||||||
|
setPrimary(colorName)
|
||||||
|
const color = primaryColors.value.find((c) => c.name === colorName)
|
||||||
|
updatePrimaryPalette(color?.palette)
|
||||||
|
} else if (type === 'surface') {
|
||||||
|
setSurface(colorName)
|
||||||
|
const surfaceColor = surfaces.value.find((s) => s.name === colorName)
|
||||||
|
updateSurfacePalette(surfaceColor?.palette)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const isDarkMode = computed(() => appState.value.darkMode)
|
||||||
|
const primary = computed(() => appState.value.primary)
|
||||||
|
const surface = computed(() => appState.value.surface)
|
||||||
|
|
||||||
|
return {
|
||||||
|
primaryColors,
|
||||||
|
surfaces,
|
||||||
|
isDarkMode,
|
||||||
|
primary,
|
||||||
|
surface,
|
||||||
|
toggleDarkMode,
|
||||||
|
setDarkMode,
|
||||||
|
setPrimary,
|
||||||
|
setSurface,
|
||||||
|
updateColors,
|
||||||
|
}
|
||||||
|
}
|
||||||
18
src/main.ts
18
src/main.ts
@@ -1,12 +1,28 @@
|
|||||||
import '@mdi/font/css/materialdesignicons.css'
|
import '@mdi/font/css/materialdesignicons.css'
|
||||||
import './assets/clean.css'
|
|
||||||
import './assets/main.css'
|
import './assets/main.css'
|
||||||
|
import './assets/default.css'
|
||||||
|
import './assets/custom.css'
|
||||||
|
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import { createPinia } from 'pinia'
|
import { createPinia } from 'pinia'
|
||||||
|
import PrimeVue from 'primevue/config'
|
||||||
|
import Aura from '@primeuix/themes/aura'
|
||||||
|
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
import { version } from 'vue'
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
|
console.log('version', version)
|
||||||
|
|
||||||
|
app.use(PrimeVue, {
|
||||||
|
theme: {
|
||||||
|
preset: Aura,
|
||||||
|
options: {
|
||||||
|
darkModeSelector: '.p-dark',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
app.use(createPinia())
|
app.use(createPinia())
|
||||||
|
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { onMounted, onUnmounted, ref } from 'vue'
|
|||||||
import { type Chat, useChatsStore } from '@/stores/chats.ts'
|
import { type Chat, useChatsStore } from '@/stores/chats.ts'
|
||||||
import { useAuthStore } from '@/stores/auth.ts'
|
import { useAuthStore } from '@/stores/auth.ts'
|
||||||
import { type Message, useMessagesStore } from '@/stores/messages.ts'
|
import { type Message, useMessagesStore } from '@/stores/messages.ts'
|
||||||
|
import { useUsersStore } from '@/stores/users.ts'
|
||||||
|
|
||||||
export enum SocketDataReq {
|
export enum SocketDataReq {
|
||||||
GET_CHATS = 'GET_CHATS',
|
GET_CHATS = 'GET_CHATS',
|
||||||
@@ -35,6 +36,7 @@ export const useSocketsStore = defineStore('sockets', () => {
|
|||||||
const authStore = useAuthStore()
|
const authStore = useAuthStore()
|
||||||
const chatsStore = useChatsStore()
|
const chatsStore = useChatsStore()
|
||||||
const messagesStore = useMessagesStore()
|
const messagesStore = useMessagesStore()
|
||||||
|
const usersStore = useUsersStore()
|
||||||
|
|
||||||
const isConnected = ref(false)
|
const isConnected = ref(false)
|
||||||
const error = ref<string>()
|
const error = ref<string>()
|
||||||
@@ -57,26 +59,29 @@ export const useSocketsStore = defineStore('sockets', () => {
|
|||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case SocketDataRes.USERS:
|
case SocketDataRes.USERS:
|
||||||
console.log('USERS_LIST', data)
|
usersStore.users = data
|
||||||
break
|
break
|
||||||
case SocketDataRes.USER:
|
case SocketDataRes.USER:
|
||||||
console.log('USER', data)
|
|
||||||
authStore.me = data
|
authStore.me = data
|
||||||
break
|
break
|
||||||
case SocketDataRes.CHATS:
|
case SocketDataRes.CHATS:
|
||||||
console.log('CHATS', data)
|
if (Array.isArray(data)) {
|
||||||
chatsStore.chats = data
|
chatsStore.chats = data
|
||||||
|
} else {
|
||||||
|
console.log(data)
|
||||||
|
const idx = chatsStore.chats.findIndex((chat) => chat.id === data.id)
|
||||||
|
console.log(idx)
|
||||||
|
if (idx < 0) chatsStore.chats.push(data)
|
||||||
|
}
|
||||||
|
|
||||||
break
|
break
|
||||||
case SocketDataRes.MESSAGES:
|
case SocketDataRes.MESSAGES:
|
||||||
console.log('MESSAGES', data)
|
|
||||||
|
|
||||||
messagesStore.messages = data
|
messagesStore.messages = data
|
||||||
// if (options.onMessage) {
|
// if (options.onMessage) {
|
||||||
// options.onMessage(data)
|
// options.onMessage(data)
|
||||||
// }
|
// }
|
||||||
break
|
break
|
||||||
case SocketDataRes.MESSAGE:
|
case SocketDataRes.MESSAGE:
|
||||||
console.log('MESSAGE', data)
|
|
||||||
messagesStore.messages.unshift(data)
|
messagesStore.messages.unshift(data)
|
||||||
break
|
break
|
||||||
case SocketDataRes.STATUS:
|
case SocketDataRes.STATUS:
|
||||||
|
|||||||
@@ -1,55 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, ref } from 'vue'
|
|
||||||
import ChatsPane from '@/components/ChatsPane.vue'
|
|
||||||
import MessagesPane from '@/components/MessagesPane.vue'
|
|
||||||
import { useSocketsStore } from '@/stores/sockets.ts'
|
|
||||||
import { useChatsStore } from '@/stores/chats.ts'
|
|
||||||
import AppMenu from '@/components/AppMenu.vue'
|
|
||||||
|
|
||||||
const socketsStore = useSocketsStore()
|
|
||||||
// const { messages, chats, isConnected, error, send } = useSharedWebSocket({ autoConnect: true })
|
|
||||||
|
|
||||||
// const socketsStore = useSocketsStore()
|
|
||||||
|
|
||||||
const chatsStore = useChatsStore()
|
|
||||||
|
|
||||||
const message = ref('')
|
|
||||||
const selectedChat = ref('')
|
|
||||||
|
|
||||||
// const onChatClick = (id: string) => {
|
|
||||||
// console.log(id)
|
|
||||||
// selectedChat.value = id
|
|
||||||
// send({
|
|
||||||
// type: WsDataType.GET_MESSAGES,
|
|
||||||
// data: { chat_id: id },
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const sendMessage = () => {
|
|
||||||
// if (message.value.trim()) {
|
|
||||||
// send({
|
|
||||||
// type: WsDataType.CREATE_MESSAGE,
|
|
||||||
// data: {
|
|
||||||
// chat_id: selectedChat.value,
|
|
||||||
// text: message.value,
|
|
||||||
// },
|
|
||||||
// })
|
|
||||||
// message.value = ''
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
onMounted(() => {
|
|
||||||
socketsStore.init()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="d-flex h-100">
|
|
||||||
<div class="d-flex w-100">
|
|
||||||
<app-menu />
|
|
||||||
<chats-pane />
|
|
||||||
</div>
|
|
||||||
<messages-pane />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
47
src/views/MainView.vue
Normal file
47
src/views/MainView.vue
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted, ref } from 'vue'
|
||||||
|
import { useSocketsStore } from '@/stores/sockets.ts'
|
||||||
|
import AppMenu from '@/components/AppMenu.vue'
|
||||||
|
import LeftPane from '@/components/LeftPane.vue'
|
||||||
|
import RightPane from '@/components/RightPane.vue'
|
||||||
|
import UsersList from '@/components/Users/UsersList.vue'
|
||||||
|
import SettingsList from '@/components/Settings/SettingsList.vue'
|
||||||
|
import ChatsList from '@/components/Chats/ChatsList.vue'
|
||||||
|
|
||||||
|
const socketsStore = useSocketsStore()
|
||||||
|
|
||||||
|
type MenuSelected = 'chats' | 'users' | 'settings'
|
||||||
|
|
||||||
|
const selected = ref<MenuSelected>()
|
||||||
|
|
||||||
|
const component = computed(() => {
|
||||||
|
switch (selected.value) {
|
||||||
|
case 'chats':
|
||||||
|
return ChatsList
|
||||||
|
case 'users':
|
||||||
|
return UsersList
|
||||||
|
case 'settings':
|
||||||
|
return SettingsList
|
||||||
|
default:
|
||||||
|
return ChatsList
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
socketsStore.init()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex h-full">
|
||||||
|
<div class="flex w-full">
|
||||||
|
<AppMenu v-model="selected" />
|
||||||
|
<LeftPane>
|
||||||
|
<component :is="component" />
|
||||||
|
</LeftPane>
|
||||||
|
</div>
|
||||||
|
<RightPane />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { useAuthStore } from '@/stores/auth.ts'
|
import { useAuthStore } from '@/stores/auth.ts'
|
||||||
|
import { JustButton, JustInput } from '@/components/simple'
|
||||||
|
|
||||||
const authStore = useAuthStore()
|
const authStore = useAuthStore()
|
||||||
|
|
||||||
@@ -12,16 +13,16 @@ async function onSubmit() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="h-100 d-flex flex-column align-center justify-center red">
|
<div class="h-full flex flex-col justify-center items-center">
|
||||||
<div class="w-20r border pa-4 blue">
|
<div class="bg-white border border-gray-500 p-4 rounded-md w-64">
|
||||||
<form @submit.prevent="onSubmit">
|
<form @submit.prevent="onSubmit">
|
||||||
<div class="d-flex flex-column ga-4">
|
<div class="flex flex-col gap-2">
|
||||||
<div class="">Sign in</div>
|
<div class="">Sign in</div>
|
||||||
<input v-model="email" placeholder="email" type="email" class="border" />
|
<JustInput v-model="email" placeholder="email" type="email" class="" />
|
||||||
<input v-if="false" v-model="name" placeholder="name" />
|
<input v-if="false" v-model="name" placeholder="name" />
|
||||||
<div class="d-flex ga-4 align-center">
|
<div class="flex justify-end">
|
||||||
<input type="checkbox" v-if="false" />
|
<input type="checkbox" v-if="false" />
|
||||||
<button type="submit">login</button>
|
<JustButton type="submit">sign in</JustButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
32
src/views/SignInView2.vue
Normal file
32
src/views/SignInView2.vue
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useAuthStore } from '@/stores/auth.ts'
|
||||||
|
|
||||||
|
const authStore = useAuthStore()
|
||||||
|
|
||||||
|
const email = ref('vadim.olonin@gmail.com')
|
||||||
|
const name = ref('')
|
||||||
|
async function onSubmit() {
|
||||||
|
await authStore.login(email.value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="h-100 d-flex flex-column align-center justify-center red">
|
||||||
|
<div class="w-20r border pa-4 blue">
|
||||||
|
<form @submit.prevent="onSubmit">
|
||||||
|
<div class="d-flex flex-column ga-4">
|
||||||
|
<div class="">Sign in</div>
|
||||||
|
<input v-model="email" placeholder="email" type="email" class="border" />
|
||||||
|
<input v-if="false" v-model="name" placeholder="name" />
|
||||||
|
<div class="d-flex ga-4 align-center">
|
||||||
|
<input type="checkbox" v-if="false" />
|
||||||
|
<button type="submit">login</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
17
src/views/TestView.vue
Normal file
17
src/views/TestView.vue
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { JustButton, JustInput } from '@/components/simple'
|
||||||
|
|
||||||
|
const email = ref('test')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex gap-1 h-full w-full bg-green-200 items-start">
|
||||||
|
<JustInput v-model="email" placeholder="email" type="email" />
|
||||||
|
<JustInput placeholder="email" type="email" />
|
||||||
|
|
||||||
|
<JustButton>sign in</JustButton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
import { fileURLToPath, URL } from 'node:url'
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
|
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
@@ -6,10 +7,7 @@ import vueDevTools from 'vite-plugin-vue-devtools'
|
|||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [vue(), tailwindcss(), vueDevTools()],
|
||||||
vue(),
|
|
||||||
// vueDevTools(),
|
|
||||||
],
|
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||||
|
|||||||
Reference in New Issue
Block a user