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/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@primeuix/themes": "^2.0.3",
|
||||
"@tailwindcss/vite": "^4.2.1",
|
||||
"@vueuse/core": "^14.2.1",
|
||||
"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"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
11
src/App.vue
11
src/App.vue
@@ -1,17 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import ChatView from '@/views/ChatView.vue'
|
||||
import { useAuthStore } from '@/stores/auth.ts'
|
||||
import SignInView from '@/views/SignInView.vue'
|
||||
import MainView from '@/views/MainView.vue'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chat-fullscreen">
|
||||
<div class="h-100 w-50r margin-auto py-4">
|
||||
<chat-view />
|
||||
<!-- <chat-view v-if="authStore.isAuth" />-->
|
||||
<!-- <sign-in-view v-else />-->
|
||||
<div class="h-screen bg-gray-200">
|
||||
<div class="h-full m-auto p-4">
|
||||
<MainView v-if="authStore.isAuth" />
|
||||
<SignInView v-else />
|
||||
</div>
|
||||
</div>
|
||||
</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 {
|
||||
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;
|
||||
}
|
||||
@import "tailwindcss";
|
||||
@import "tailwindcss-primeui";
|
||||
@import "primeicons/primeicons.css";
|
||||
|
||||
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>
|
||||
<div class="red w-5r d-flex flex-column align-center pa-1">
|
||||
<div>
|
||||
<span class="mdi mdi-account"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="mdi mdi-message"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="mdi mdi-cog"></span>
|
||||
</div>
|
||||
</div>
|
||||
<JustNav>
|
||||
<JustList>
|
||||
<JustListItem value="users" icon="mdi-account" @click="onSelect" />
|
||||
<JustListItem value="messages" icon="mdi-message" @click="onSelect" />
|
||||
<JustListItem value="settings" icon="mdi-cog" @click="onSelect" />
|
||||
</JustList>
|
||||
</JustNav>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<template>
|
||||
<div class="d-flex align-center ga-4">
|
||||
<div class="flex gap-2 p-4 border bg-amber-200">
|
||||
<button>menu</button>
|
||||
<input v-model="search" placeholder="Search..." />
|
||||
</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 { type Chat, useChatsStore } from '@/stores/chats.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 chatsStore = useChatsStore()
|
||||
const socketsStore = useSocketsStore()
|
||||
|
||||
interface Props {
|
||||
selected: string
|
||||
}
|
||||
|
||||
const props = defineProps()
|
||||
|
||||
function onSelect(value: { id: unknown }) {
|
||||
const chatId = value.id as string
|
||||
chatsStore.selected = chatId
|
||||
@@ -33,10 +39,8 @@ function getChatName(chat: Chat) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-100 d-flex h-100 flex-column ga-2 yellow">
|
||||
<chat-toolbar />
|
||||
|
||||
<chat-list />
|
||||
<div class="w-full flex flex-col h-full gap-2">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -35,15 +35,15 @@ const avatarLetter = computed(() => {
|
||||
<!-- </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">-->
|
||||
<!-- <span class="text-deep-purple-darken-2">{{ avatarLetter }}</span>-->
|
||||
<!-- </v-avatar>-->
|
||||
|
||||
<!-- :class="props.my ? 'message-shaped-right' : 'message-shaped'"-->
|
||||
<div class="pa-4" :class="props.my ? 'red' : 'blue'">
|
||||
<span class="text-body-1">{{ props.text }}</span>
|
||||
<span class="text-caption ml-2">{{ createdAt }}</span>
|
||||
<div class="pa-4" :class="props.my ? 'bg-blue-400' : 'bg-white'">
|
||||
<span class="">{{ props.text }}</span>
|
||||
<span class="">{{ createdAt }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -30,27 +30,24 @@ watch(messages, async () => {
|
||||
</script>
|
||||
|
||||
<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>-->
|
||||
<div class="d-flex flex-column h-100">
|
||||
<div class="d-flex h-100 flex-column overflow-hidden">
|
||||
<message-toolbar class="flex-grow-0" />
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="flex h-full flex-col overflow-hidden">
|
||||
<message-toolbar class="grow-0" />
|
||||
|
||||
<div
|
||||
class="px-8 ga-2 flex-grow-1 d-flex flex-column flex-column-reverse overflow-y-auto"
|
||||
ref="messageArea"
|
||||
>
|
||||
<!-- <message-data-->
|
||||
<!-- v-for="message in messages"-->
|
||||
<!-- :key="message.id"-->
|
||||
<!-- :text="message.text"-->
|
||||
<!-- :my="authStore.me?.id === message.user_id"-->
|
||||
<!-- :created-at="message.created_at"-->
|
||||
<!-- ></message-data>-->
|
||||
<div class="pa-4 border" v-for="v in 101" :key="v">text {{ v }}</div>
|
||||
<div class="px-8 gap-2 grow flex flex-col-reverse overflow-y-auto" ref="messageArea">
|
||||
<message-data
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
:text="message.text"
|
||||
:my="authStore.me?.id === message.user_id"
|
||||
:created-at="message.created_at"
|
||||
></message-data>
|
||||
<!-- <div class="p-4 border" v-for="v in 101" :key="v">text {{ v }}</div>-->
|
||||
</div>
|
||||
|
||||
<message-form class="flex-grow-0 blue" />
|
||||
<message-form class="grow-0 bg-green-200" />
|
||||
</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 './assets/clean.css'
|
||||
import './assets/main.css'
|
||||
import './assets/default.css'
|
||||
import './assets/custom.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import PrimeVue from 'primevue/config'
|
||||
import Aura from '@primeuix/themes/aura'
|
||||
|
||||
import App from './App.vue'
|
||||
import { version } from 'vue'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
console.log('version', version)
|
||||
|
||||
app.use(PrimeVue, {
|
||||
theme: {
|
||||
preset: Aura,
|
||||
options: {
|
||||
darkModeSelector: '.p-dark',
|
||||
},
|
||||
},
|
||||
})
|
||||
app.use(createPinia())
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
@@ -3,6 +3,7 @@ import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { type Chat, useChatsStore } from '@/stores/chats.ts'
|
||||
import { useAuthStore } from '@/stores/auth.ts'
|
||||
import { type Message, useMessagesStore } from '@/stores/messages.ts'
|
||||
import { useUsersStore } from '@/stores/users.ts'
|
||||
|
||||
export enum SocketDataReq {
|
||||
GET_CHATS = 'GET_CHATS',
|
||||
@@ -35,6 +36,7 @@ export const useSocketsStore = defineStore('sockets', () => {
|
||||
const authStore = useAuthStore()
|
||||
const chatsStore = useChatsStore()
|
||||
const messagesStore = useMessagesStore()
|
||||
const usersStore = useUsersStore()
|
||||
|
||||
const isConnected = ref(false)
|
||||
const error = ref<string>()
|
||||
@@ -57,26 +59,29 @@ export const useSocketsStore = defineStore('sockets', () => {
|
||||
|
||||
switch (type) {
|
||||
case SocketDataRes.USERS:
|
||||
console.log('USERS_LIST', data)
|
||||
usersStore.users = data
|
||||
break
|
||||
case SocketDataRes.USER:
|
||||
console.log('USER', data)
|
||||
authStore.me = data
|
||||
break
|
||||
case SocketDataRes.CHATS:
|
||||
console.log('CHATS', data)
|
||||
if (Array.isArray(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
|
||||
case SocketDataRes.MESSAGES:
|
||||
console.log('MESSAGES', data)
|
||||
|
||||
messagesStore.messages = data
|
||||
// if (options.onMessage) {
|
||||
// options.onMessage(data)
|
||||
// }
|
||||
break
|
||||
case SocketDataRes.MESSAGE:
|
||||
console.log('MESSAGE', data)
|
||||
messagesStore.messages.unshift(data)
|
||||
break
|
||||
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">
|
||||
import { ref } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth.ts'
|
||||
import { JustButton, JustInput } from '@/components/simple'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
|
||||
@@ -12,16 +13,16 @@ async function onSubmit() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-100 d-flex flex-column align-center justify-center red">
|
||||
<div class="w-20r border pa-4 blue">
|
||||
<div class="h-full flex flex-col justify-center items-center">
|
||||
<div class="bg-white border border-gray-500 p-4 rounded-md w-64">
|
||||
<form @submit.prevent="onSubmit">
|
||||
<div class="d-flex flex-column ga-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<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" />
|
||||
<div class="d-flex ga-4 align-center">
|
||||
<div class="flex justify-end">
|
||||
<input type="checkbox" v-if="false" />
|
||||
<button type="submit">login</button>
|
||||
<JustButton type="submit">sign in</JustButton>
|
||||
</div>
|
||||
</div>
|
||||
</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 tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
@@ -6,10 +7,7 @@ import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
// vueDevTools(),
|
||||
],
|
||||
plugins: [vue(), tailwindcss(), vueDevTools()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
|
||||
Reference in New Issue
Block a user