UPDATE: Actualización de dependencias mayor (#6)
- TailwindCSS 3 => 4 - Diseño cuadrado - Otras dependencias.
This commit is contained in:
Moisés de Jesús Cortés Castellanos
GitHub
parent
8d752979a7
commit
28c5ba153b
2
.gitignore
vendored
2
.gitignore
vendored
@ -12,7 +12,7 @@ dist
|
|||||||
dist-ssr
|
dist-ssr
|
||||||
*.local
|
*.local
|
||||||
.env
|
.env
|
||||||
colors.json
|
colors.css
|
||||||
notes.md
|
notes.md
|
||||||
|
|
||||||
# Editor directories and files
|
# Editor directories and files
|
||||||
|
|||||||
34
colors.css.example
Normal file
34
colors.css.example
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
@theme {
|
||||||
|
--color-page: #fff;
|
||||||
|
--color-page-t: #000;
|
||||||
|
--color-page-d: #292524;
|
||||||
|
--color-page-dt: #fff;
|
||||||
|
--color-primary: #374151;
|
||||||
|
--color-primary-t: #fff;
|
||||||
|
--color-primary-d: #1c1917;
|
||||||
|
--color-primary-dt: #fff;
|
||||||
|
--color-secondary: #3b82f6;
|
||||||
|
--color-secondary-t: #fff;
|
||||||
|
--color-secondary-d: #312e81;
|
||||||
|
--color-secondary-dt: #fff;
|
||||||
|
--color-primary-info: #06b6d4;
|
||||||
|
--color-primary-info-t: #fff;
|
||||||
|
--color-primary-info-d: #06b6d4;
|
||||||
|
--color-primary-info-dt: #fff;
|
||||||
|
--color-secondary-info: #06b6d4;
|
||||||
|
--color-secondary-info-t: #fff;
|
||||||
|
--color-secondary-info-d: #06b6d4;
|
||||||
|
--color-secondary-info-dt: #fff;
|
||||||
|
--color-success: #22c55e;
|
||||||
|
--color-success-t: #fff;
|
||||||
|
--color-success-d: #22c55e;
|
||||||
|
--color-success-dt: #fff;
|
||||||
|
--color-danger: #ef4444;
|
||||||
|
--color-danger-t: #fff;
|
||||||
|
--color-danger-d: #ef4444;
|
||||||
|
--color-danger-dt: #fecaca;
|
||||||
|
--color-warning: #eab308;
|
||||||
|
--color-warning-t: #fff;
|
||||||
|
--color-warning-d: #eab308;
|
||||||
|
--color-warning-dt: #fff;
|
||||||
|
}
|
||||||
@ -1,34 +0,0 @@
|
|||||||
{
|
|
||||||
"page":"#fff",
|
|
||||||
"page-t":"#000",
|
|
||||||
"page-d":"#292524",
|
|
||||||
"page-dt":"#fff",
|
|
||||||
"primary":"#374151",
|
|
||||||
"primary-t":"#fff",
|
|
||||||
"primary-d":"#1c1917",
|
|
||||||
"primary-dt":"#fff",
|
|
||||||
"secondary":"#3b82f6",
|
|
||||||
"secondary-t":"#fff",
|
|
||||||
"secondary-d":"#312e81",
|
|
||||||
"secondary-dt":"#fff",
|
|
||||||
"primary-info":"#06b6d4",
|
|
||||||
"primary-info-t":"#fff",
|
|
||||||
"primary-info-d":"#06b6d4",
|
|
||||||
"primary-info-dt":"#fff",
|
|
||||||
"secondary-info":"#06b6d4",
|
|
||||||
"secondary-info-t":"#fff",
|
|
||||||
"secondary-info-d":"#06b6d4",
|
|
||||||
"secondary-info-dt":"#fff",
|
|
||||||
"success":"#22c55e",
|
|
||||||
"success-t":"#fff",
|
|
||||||
"success-d":"#22c55e",
|
|
||||||
"success-dt":"#fff",
|
|
||||||
"danger":"#ef4444",
|
|
||||||
"danger-t":"#fff",
|
|
||||||
"danger-d":"#ef4444",
|
|
||||||
"danger-dt":"#fecaca",
|
|
||||||
"warning":"#eab308",
|
|
||||||
"warning-t":"#fff",
|
|
||||||
"warning-d":"#eab308",
|
|
||||||
"warning-dt":"#fff"
|
|
||||||
}
|
|
||||||
2323
package-lock.json
generated
2323
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
25
package.json
25
package.json
@ -2,7 +2,7 @@
|
|||||||
"name": "notsoweb.frontend",
|
"name": "notsoweb.frontend",
|
||||||
"copyright": "Notsoweb Software Inc.",
|
"copyright": "Notsoweb Software Inc.",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.9.7",
|
"version": "0.9.8",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
@ -10,22 +10,23 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4.0.9",
|
||||||
|
"@tailwindcss/vite": "^4.0.9",
|
||||||
"@vitejs/plugin-vue": "^5.2.1",
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
"axios": "^1.7.8",
|
"axios": "^1.8.1",
|
||||||
"laravel-echo": "^1.17.1",
|
"laravel-echo": "^2.0.2",
|
||||||
"luxon": "^3.5.0",
|
"luxon": "^3.5.0",
|
||||||
"pinia": "^2.2.8",
|
"pinia": "^3.0.1",
|
||||||
"postcss": "^8.4.49",
|
"pusher-js": "^8.4.0",
|
||||||
"pusher-js": "^8.4.0-rc2",
|
"tailwindcss": "^4.0",
|
||||||
"tailwindcss": "^3.4.15",
|
|
||||||
"toastr": "^2.1.4",
|
"toastr": "^2.1.4",
|
||||||
"uuid": "^11.0.3",
|
"uuid": "^11.1.0",
|
||||||
"vite": "^6.0.1",
|
"vite": "^6.2.0",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
"vue-i18n": "^10.0.5",
|
"vue-i18n": "^11.1.1",
|
||||||
"vue-multiselect": "^3.1.0",
|
"vue-multiselect": "^3.2.0",
|
||||||
"vue-router": "^4.5.0",
|
"vue-router": "^4.5.0",
|
||||||
"ziggy-js": "^2.4.1"
|
"ziggy-js": "^2.5.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^10.4.20",
|
"autoprefixer": "^10.4.20",
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
export default {
|
export default {
|
||||||
plugins: {
|
plugins: {
|
||||||
tailwindcss: {},
|
"@tailwindcss/postcss": {},
|
||||||
autoprefixer: {},
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,7 +14,7 @@ import SectionTitle from './SectionTitle.vue';
|
|||||||
</SectionTitle>
|
</SectionTitle>
|
||||||
|
|
||||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||||
<div class="px-4 py-5 sm:p-6 shadow dark:shadow-sm dark:shadow-white/50 sm:rounded-lg">
|
<div class="px-4 py-5 sm:p-6 shadow-sm dark:shadow-xs dark:shadow-white/50 sm:rounded-sm">
|
||||||
<slot name="content" />
|
<slot name="content" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -19,7 +19,7 @@ const props = defineProps({
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<button
|
<button
|
||||||
class="flex justify-center items-center h-7 w-7 rounded-md btn-icon"
|
class="flex justify-center items-center h-7 w-7 rounded-sm btn-icon"
|
||||||
:title="title"
|
:title="title"
|
||||||
:type="type"
|
:type="type"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -14,7 +14,7 @@ defineProps({
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<RouterLink
|
<RouterLink
|
||||||
class="relative flex-1 flex flex-col gap-2 p-4 rounded -md bg-gray-200 dark:bg-transparent dark:border"
|
class="relative flex-1 flex flex-col gap-2 p-4 rounded-sm -md bg-gray-200 dark:bg-transparent dark:border"
|
||||||
:to="to"
|
:to="to"
|
||||||
>
|
>
|
||||||
<label class="text-base font-semibold tracking-wider">
|
<label class="text-base font-semibold tracking-wider">
|
||||||
|
|||||||
@ -31,6 +31,6 @@ const proxyChecked = computed({
|
|||||||
v-model="proxyChecked"
|
v-model="proxyChecked"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
:value="value"
|
:value="value"
|
||||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
|
class="rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:ring-indigo-500"
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -30,16 +30,15 @@ const close = () => {
|
|||||||
:closeable="closeable"
|
:closeable="closeable"
|
||||||
@close="close"
|
@close="close"
|
||||||
>
|
>
|
||||||
<div class="p-4">
|
<div>
|
||||||
<div class="text-lg font-medium">
|
<div class="text-lg px-4 font-medium">
|
||||||
<slot name="title" />
|
<slot name="title" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="text-sm">
|
||||||
<div class="mt-4 text-sm">
|
|
||||||
<slot name="content" />
|
<slot name="content" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-row justify-center p-4 text-end">
|
<div class="flex flex-row justify-center p-2 text-end">
|
||||||
<slot name="footer" />
|
<slot name="footer" />
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|||||||
@ -95,7 +95,7 @@ const alignmentClasses = computed(() => {
|
|||||||
style="display: none;"
|
style="display: none;"
|
||||||
@click="open = false"
|
@click="open = false"
|
||||||
>
|
>
|
||||||
<div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
|
<div class="rounded-sm ring-1 ring-black/5" :class="contentClasses">
|
||||||
<slot name="content" />
|
<slot name="content" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -6,7 +6,7 @@ defineProps({
|
|||||||
to: String
|
to: String
|
||||||
});
|
});
|
||||||
|
|
||||||
const style = 'block px-4 py-2 text-sm leading-5 hover:bg-secondary/80 dark:hover:bg-secondary-d/80 focus:outline-none focus:bg-gray-100 transition';
|
const style = 'block px-4 py-2 text-sm leading-5 hover:bg-secondary/80 dark:hover:bg-secondary-d/80 focus:outline-hidden focus:bg-gray-100 transition';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@ -28,7 +28,7 @@ const vModel = computed({
|
|||||||
<template>
|
<template>
|
||||||
<div class="relative w-full h-8">
|
<div class="relative w-full h-8">
|
||||||
<input
|
<input
|
||||||
class="appearance-none rounded-lg bg-primary cursor-pointer h-full w-full checked:bg-secondary dark:checked:bg-secondary-d transition-all duration-200 peer"
|
class="appearance-none rounded-sm bg-primary cursor-pointer h-full w-full checked:bg-secondary dark:checked:bg-secondary-d transition-all duration-200 peer"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
:id="uuid"
|
:id="uuid"
|
||||||
v-model="vModel"
|
v-model="vModel"
|
||||||
|
|||||||
@ -65,7 +65,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<div class="flex items-center border-2 py-2 px-3 rounded-2xl">
|
<div class="flex items-center border-2 py-2 px-3 rounded-sm">
|
||||||
<GoogleIcon
|
<GoogleIcon
|
||||||
:name="icon"
|
:name="icon"
|
||||||
/>
|
/>
|
||||||
@ -73,7 +73,7 @@ onMounted(() => {
|
|||||||
ref="input"
|
ref="input"
|
||||||
v-model="value"
|
v-model="value"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
class="pl-2 w-full outline-none border-none bg-transparent"
|
class="pl-2 w-full outline-hidden border-none bg-transparent"
|
||||||
:class="{ 'cursor-not-allowed': disabled }"
|
:class="{ 'cursor-not-allowed': disabled }"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:id="autoId"
|
:id="autoId"
|
||||||
|
|||||||
@ -111,7 +111,7 @@ onMounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="rounded border border-primary dark:border-primary-d p-2">
|
<div class="rounded-sm border border-primary dark:border-primary-d p-2">
|
||||||
<p>{{ title }}</p>
|
<p>{{ title }}</p>
|
||||||
<div class="w-full grid gap-2 grid-cols-2 dark:bg-primary-d/50 rounded-md">
|
<div class="w-full grid gap-2 grid-cols-2 dark:bg-primary-d/50 rounded-md">
|
||||||
<Selectable
|
<Selectable
|
||||||
@ -138,7 +138,7 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-span-2 space-y-2 ">
|
<div class="col-span-2 space-y-2 ">
|
||||||
<template v-for="item, index in values">
|
<template v-for="item, index in values">
|
||||||
<div class="relative rounded border border-primary/50">
|
<div class="relative rounded-sm border border-primary/50">
|
||||||
<div class="grid gap-2 grid-cols-2 w-full items-center p-2 dark:bg-primary-d/50">
|
<div class="grid gap-2 grid-cols-2 w-full items-center p-2 dark:bg-primary-d/50">
|
||||||
<Input
|
<Input
|
||||||
v-model="item.item.name"
|
v-model="item.item.name"
|
||||||
|
|||||||
@ -21,7 +21,7 @@ const hasActions = computed(() => !! useSlots().actions);
|
|||||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||||
<form @submit.prevent="$emit('submitted')">
|
<form @submit.prevent="$emit('submitted')">
|
||||||
<div
|
<div
|
||||||
class="p-4 sm:p-6 shadow dark:shadow-sm dark:shadow-white/50"
|
class="p-4 sm:p-6 shadow-sm dark:shadow-xs dark:shadow-white/50"
|
||||||
:class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'"
|
:class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'"
|
||||||
>
|
>
|
||||||
<div class="grid grid-cols-6 gap-6">
|
<div class="grid grid-cols-6 gap-6">
|
||||||
@ -29,7 +29,7 @@ const hasActions = computed(() => !! useSlots().actions);
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="hasActions" class="flex items-center justify-end px-4 py-3 text-end sm:px-6 shadow dark:shadow-sm dark:shadow-white/50 sm:rounded-bl-md sm:rounded-br-md">
|
<div v-if="hasActions" class="flex items-center justify-end px-4 py-3 text-end sm:px-6 shadow-sm dark:shadow-xs dark:shadow-white/50 sm:rounded-bl-md sm:rounded-br-md">
|
||||||
<slot name="actions" />
|
<slot name="actions" />
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -68,7 +68,7 @@ const search = url => props.searcherCtl.searchWithInboxPagination(url);
|
|||||||
</button>
|
</button>
|
||||||
<div
|
<div
|
||||||
@click.away="filterMessages = false"
|
@click.away="filterMessages = false"
|
||||||
class="bg-gray-200 shadow-2xl absolute left-0 top-6 w-32 py-2 text-gray-900 rounded z-10"
|
class="bg-gray-200 shadow-2xl absolute left-0 top-6 w-32 py-2 text-gray-900 rounded-sm z-10"
|
||||||
:class="{'hidden':!filterMessages}"
|
:class="{'hidden':!filterMessages}"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
|||||||
@ -29,7 +29,7 @@ const selected = computed(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<li
|
<li
|
||||||
class="flex items-center rounded-lg border-y px-2 min-h-[35px] transition duration-300"
|
class="flex items-center rounded-sm border-y px-2 min-h-[35px] transition duration-300"
|
||||||
:class="{'bg-secondary text-secondary-t':selected, 'bg-primary/50 text-primary-t hover:bg-secondary/50 hover:text-secondary-t':!selected}"
|
:class="{'bg-secondary text-secondary-t':selected, 'bg-primary/50 text-primary-t hover:bg-secondary/50 hover:text-secondary-t':!selected}"
|
||||||
>
|
>
|
||||||
<div class="pr-2">
|
<div class="pr-2">
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<li
|
<li
|
||||||
class="flex items-center rounded-lg border-y px-2 min-h-[35px] transition duration-300"
|
class="flex items-center rounded-sm border-y px-2 min-h-[35px] transition duration-300"
|
||||||
>
|
>
|
||||||
<div class="pl-5 w-full flex items-center justify-between cursor-pointer">
|
<div class="pl-5 w-full flex items-center justify-between cursor-pointer">
|
||||||
<div class="flex items-center font-semibold">
|
<div class="flex items-center font-semibold">
|
||||||
|
|||||||
@ -19,10 +19,10 @@ const props = defineProps({
|
|||||||
/** Propiedades computadas */
|
/** Propiedades computadas */
|
||||||
const classes = computed(() => {
|
const classes = computed(() => {
|
||||||
let status = route().current(props.to, props.toParam)
|
let status = route().current(props.to, props.toParam)
|
||||||
? 'bg-secondary bg-opacity-30'
|
? 'bg-secondary/30'
|
||||||
: 'border-transparent hover:bg-secondary hover:bg-opacity-30';
|
: 'border-transparent hover:bg-secondary/30';
|
||||||
|
|
||||||
return ` text-primary flex items-center justify-between py-1.5 px-4 rounded cursor-pointer ${status} transition`
|
return ` text-primary flex items-center justify-between py-1.5 px-4 rounded-sm cursor-pointer ${status} transition`
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -43,7 +43,7 @@ const classes = computed(() => {
|
|||||||
{{ title }}
|
{{ title }}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span v-if="counter > 0" class="bg-primary text-gray-100 font-bold px-2 py-0.5 text-xs rounded-lg">
|
<span v-if="counter > 0" class="bg-primary text-gray-100 font-bold px-2 py-0.5 text-xs rounded-sm">
|
||||||
{{ counter }}
|
{{ counter }}
|
||||||
</span>
|
</span>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
|
|||||||
@ -49,7 +49,7 @@ onMounted(() => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<main class="flex h-full justify-center md:p-2">
|
<main class="flex h-full justify-center md:p-2">
|
||||||
<div class="mt-14 md:mt-0 w-full shadow-lg dark:shadow-sm md:dark:shadow-white h-[calc(100vh-4.5rem)] px-2 md:rounded-lg overflow-y-auto overflow-x-auto transition-colors duration-300">
|
<div class="mt-14 md:mt-0 w-full shadow-lg dark:shadow-xs md:dark:shadow-white h-[calc(100vh-4.5rem)] px-2 pb-4 md:rounded-sm overflow-y-auto overflow-x-auto transition-colors duration-300">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -47,7 +47,7 @@ onMounted(() => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main class="bg-white/10 w-full backdrop-blur-sm text-white px-4 py-4 rounded-md max-w-80">
|
<main class="bg-white/10 w-full backdrop-blur-xs text-white px-4 py-4 rounded-sm max-w-80">
|
||||||
<RouterView />
|
<RouterView />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
@ -47,11 +47,11 @@ onMounted(() => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main class="bg-white/10 w-full mx-auto sm:max-w-2xl backdrop-blur-sm text-white px-4 py-8 rounded-md">
|
<main class="bg-white/10 w-full mx-auto sm:max-w-2xl backdrop-blur-xs text-white px-4 py-8 rounded-md">
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="absolute bottom-0 flex w-full h-8 px-4 items-center justify-between bg-primary dark:bg-primary-d backdrop-blur-sm text-white transition-colors duration-global">
|
<footer class="absolute bottom-0 flex w-full h-8 px-4 items-center justify-between bg-primary dark:bg-primary-d backdrop-blur-xs text-white transition-colors duration-global">
|
||||||
<div>
|
<div>
|
||||||
<span>
|
<span>
|
||||||
©{{ APP_COPYRIGHT }}
|
©{{ APP_COPYRIGHT }}
|
||||||
|
|||||||
@ -90,7 +90,7 @@ onUnmounted(() => {
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-show="show"
|
v-show="show"
|
||||||
class="mb-6 bg-page text-page-t dark:bg-page-d dark:text-page-dt rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto"
|
class="mb-6 bg-page text-page-t dark:bg-page-d dark:text-page-dt rounded-sm overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto"
|
||||||
:class="maxWidthClass"
|
:class="maxWidthClass"
|
||||||
>
|
>
|
||||||
<slot v-if="show" />
|
<slot v-if="show" />
|
||||||
|
|||||||
@ -28,15 +28,17 @@ const props = defineProps({
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="w-full right-0 mt-2">
|
<div class="w-full right-0">
|
||||||
<div class="rounded overflow-hidden shadow-lg">
|
<div class="overflow-hidden space-y-2 shadow-lg">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
<div class="px-4 pb-2">
|
||||||
</div>
|
|
||||||
<p
|
<p
|
||||||
class="mt-2 p-1 rounded-md text-justify bg-danger text-danger-t"
|
class="mt-2 p-1 rounded-md text-justify bg-danger text-danger-t"
|
||||||
v-text="$t('delete.confirm')"
|
v-text="$t('delete.confirm')"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="space-x-2">
|
<div class="space-x-2">
|
||||||
|
|||||||
@ -28,8 +28,8 @@ const props = defineProps({
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="w-full right-0 mt-2">
|
<div class="w-full right-0">
|
||||||
<div class="rounded overflow-hidden">
|
<div class="overflow-hidden shadow-lg">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,13 +7,13 @@ defineProps({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="text-center p-6 bg-primary dark:bg-primary-d border-b">
|
<div class="text-center p-6 bg-primary dark:bg-primary-d">
|
||||||
<slot />
|
<slot />
|
||||||
<p class="pt-2 text-lg font-bold text-gray-50">
|
<p class="pt-2 text-lg font-bold text-primary-t dark:text-primary-t-d">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</p>
|
</p>
|
||||||
<p v-if="subtitle"
|
<p v-if="subtitle"
|
||||||
class="text-sm text-gray-50"
|
class="text-sm text-primary-t dark:text-primary-t-d"
|
||||||
>
|
>
|
||||||
{{ subtitle }}
|
{{ subtitle }}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -26,8 +26,8 @@ const props = defineProps({
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="w-full right-0 mt-2">
|
<div class="w-full right-0">
|
||||||
<div class="rounded overflow-hidden shadow-lg">
|
<div class="overflow-hidden shadow-lg">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -16,7 +16,7 @@ const props = defineProps({
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="pb-2">
|
<section class="pb-2">
|
||||||
<div class="w-full overflow-hidden rounded-md shadow-lg">
|
<div class="w-full overflow-hidden rounded-sm shadow-lg">
|
||||||
<div v-if="!processing" class="w-full overflow-x-auto">
|
<div v-if="!processing" class="w-full overflow-x-auto">
|
||||||
<template v-if="items?.total > 0">
|
<template v-if="items?.total > 0">
|
||||||
<slot
|
<slot
|
||||||
|
|||||||
@ -57,7 +57,7 @@ const clear = () => {
|
|||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
id="search"
|
id="search"
|
||||||
class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-lg outline-0 focus:ring-primary focus:border-primary block sm:w-56 md:w-72 lg:w-80 pr-10 px-2.5 py-1"
|
class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-sm outline-0 focus:ring-primary focus:border-primary block sm:w-56 md:w-72 lg:w-80 pr-10 px-2.5 py-1"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
:placeholder="placeholder"
|
:placeholder="placeholder"
|
||||||
required
|
required
|
||||||
|
|||||||
@ -32,7 +32,7 @@ const loader = useLoader()
|
|||||||
class="fixed px-2 w-[calc(100vw)] bg-transparent transition-all duration-300 z-50"
|
class="fixed px-2 w-[calc(100vw)] bg-transparent transition-all duration-300 z-50"
|
||||||
:class="{'md:w-[calc(100vw-16rem)]':leftSidebar.isOpened,'md:w-[calc(100vw)]':!leftSidebar.isClosed}"
|
:class="{'md:w-[calc(100vw-16rem)]':leftSidebar.isOpened,'md:w-[calc(100vw)]':!leftSidebar.isClosed}"
|
||||||
>
|
>
|
||||||
<div class="my-2 flex px-6 items-center justify-between h-[2.75rem] rounded-lg bg-primary dark:bg-primary-d text-white z-20 ">
|
<div class="my-2 flex px-2 items-center justify-between h-[2.75rem] rounded-sm bg-primary dark:bg-primary-d text-white z-20 ">
|
||||||
<GoogleIcon
|
<GoogleIcon
|
||||||
class="text-2xl mt-1 z-50"
|
class="text-2xl mt-1 z-50"
|
||||||
name="list"
|
name="list"
|
||||||
@ -45,6 +45,7 @@ const loader = useLoader()
|
|||||||
<li v-if="loader.isProcessing" class="flex items-center">
|
<li v-if="loader.isProcessing" class="flex items-center">
|
||||||
<Loader />
|
<Loader />
|
||||||
</li>
|
</li>
|
||||||
|
<template v-if="notifier.isEnabled">
|
||||||
<li v-if="hasPermission('users.online')">
|
<li v-if="hasPermission('users.online')">
|
||||||
<RouterLink :to="{ name: 'admin.users.online' }" class="flex items-center">
|
<RouterLink :to="{ name: 'admin.users.online' }" class="flex items-center">
|
||||||
<GoogleIcon
|
<GoogleIcon
|
||||||
@ -55,6 +56,7 @@ const loader = useLoader()
|
|||||||
<span class="text-xs">{{ users.length - 1 }}</span>
|
<span class="text-xs">{{ users.length - 1 }}</span>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</li>
|
</li>
|
||||||
|
</template>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<GoogleIcon
|
<GoogleIcon
|
||||||
class="text-xl mt-1"
|
class="text-xl mt-1"
|
||||||
@ -86,11 +88,11 @@ const loader = useLoader()
|
|||||||
<template #trigger>
|
<template #trigger>
|
||||||
<div class="flex space-x-4">
|
<div class="flex space-x-4">
|
||||||
<button
|
<button
|
||||||
class="flex items-center space-x-4 text-sm border-2 border-transparent rounded-full focus:outline-none transition"
|
class="flex items-center space-x-4 text-sm border-2 border-transparent rounded-full focus:outline-hidden cursor-pointer transition"
|
||||||
:title="$t('users.menu')"
|
:title="$t('users.menu')"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
class="h-8 w-8 rounded-full object-cover"
|
class="h-8 w-8 rounded-sm object-cover"
|
||||||
:alt="$page.user.name"
|
:alt="$page.user.name"
|
||||||
:src="$page.user.profile_photo_url"
|
:src="$page.user.profile_photo_url"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -29,7 +29,7 @@ const year = (new Date).getFullYear();
|
|||||||
:class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}"
|
:class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col h-full p-2 md:w-64">
|
<div class="flex flex-col h-full p-2 md:w-64">
|
||||||
<div class="flex h-full flex-col w-[15.5rem] justify-between rounded-lg overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
|
<div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
|
||||||
<div>
|
<div>
|
||||||
<div class="flex w-full px-2 mt-2">
|
<div class="flex w-full px-2 mt-2">
|
||||||
<Logo
|
<Logo
|
||||||
|
|||||||
@ -21,7 +21,7 @@ const classes = computed(() => {
|
|||||||
? 'bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d'
|
? 'bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d'
|
||||||
: 'border-transparent';
|
: 'border-transparent';
|
||||||
|
|
||||||
return `flex items-center h-11 focus:outline-none hover:bg-secondary/30 dark:hover:bg-secondary-d/30 border-l-4 hover:border-secondary dark:hover:border-secondary-d pr-6 ${status} transition`
|
return `flex items-center h-11 focus:outline-hidden hover:bg-secondary/30 dark:hover:bg-secondary-d/30 border-l-4 hover:border-secondary dark:hover:border-secondary-d pr-6 ${status} transition`
|
||||||
});
|
});
|
||||||
|
|
||||||
const closeSidebar = () => {
|
const closeSidebar = () => {
|
||||||
|
|||||||
@ -42,7 +42,7 @@ const modelModal = ref(Modal.modelModal);
|
|||||||
:class="{'w-64': notificationSidebar.isClosed}"
|
:class="{'w-64': notificationSidebar.isClosed}"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col h-full p-2 md:w-64">
|
<div class="flex flex-col h-full p-2 md:w-64">
|
||||||
<div class="flex h-full flex-col w-[15.5rem] justify-between rounded-lg overflow-y-auto overflow-x-hidden bg-primary/70 text-primary-t dark:bg-primary-d/70 dark:text-primary-dt">
|
<div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-primary/70 text-primary-t dark:bg-primary-d/70 dark:text-primary-dt">
|
||||||
<div class="flex justify-between px-2 items-center">
|
<div class="flex justify-between px-2 items-center">
|
||||||
<div class="py-1">
|
<div class="py-1">
|
||||||
<h4 class="text-md font-semibold">
|
<h4 class="text-md font-semibold">
|
||||||
|
|||||||
@ -18,7 +18,7 @@ defineProps({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<li class="flex flex-col w-full items-center p-2 bg-primary dark:bg-primary-d text-white rounded-lg shadow-md">
|
<li class="flex flex-col w-full items-center p-2 bg-primary dark:bg-primary-d text-white rounded-sm shadow-md">
|
||||||
<div class="flex w-full justify-between text-gray-400">
|
<div class="flex w-full justify-between text-gray-400">
|
||||||
<div>
|
<div>
|
||||||
<h6 class="text-[10px]">{{ getDateTime(notification.created_at) }}</h6>
|
<h6 class="text-[10px]">{{ getDateTime(notification.created_at) }}</h6>
|
||||||
@ -43,7 +43,7 @@ defineProps({
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="w-10 h-10 bg-secondary dark:bg-secondary-d rounded-xl flex items-center justify-center">
|
<div class="w-10 h-10 bg-secondary dark:bg-secondary-d rounded-sm flex items-center justify-center">
|
||||||
<img v-if="notification.user"
|
<img v-if="notification.user"
|
||||||
class="rounded-full object-cover"
|
class="rounded-full object-cover"
|
||||||
:alt="notification.user.name"
|
:alt="notification.user.name"
|
||||||
|
|||||||
@ -23,7 +23,7 @@ const props = defineProps({
|
|||||||
:class="{'w-64': rightSidebar.isClosed, 'w-screen': rightSidebar.isOpened}"
|
:class="{'w-64': rightSidebar.isClosed, 'w-screen': rightSidebar.isOpened}"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col h-full p-2 md:w-64">
|
<div class="flex flex-col h-full p-2 md:w-64">
|
||||||
<div class="flex h-full flex-col w-[15.5rem] justify-between rounded-lg overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
|
<div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
|
||||||
<div>
|
<div>
|
||||||
<ul class="flex h-full flex-col md:pb-4 space-y-1">
|
<ul class="flex h-full flex-col md:pb-4 space-y-1">
|
||||||
<slot />
|
<slot />
|
||||||
|
|||||||
@ -16,10 +16,10 @@ const props = defineProps({
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="pb-2">
|
<section class="pb-2">
|
||||||
<div class="w-full overflow-hidden rounded-md shadow-lg">
|
<div class="w-full overflow-hidden rounded-sm shadow-lg dark:shadow-xs dark:shadow-white">
|
||||||
<div class="w-full overflow-x-auto">
|
<div class="w-full overflow-x-auto">
|
||||||
<table v-if="!processing" class="w-full">
|
<table v-if="!processing" class="w-full">
|
||||||
<thead>
|
<thead class="bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt">
|
||||||
<tr>
|
<tr>
|
||||||
<slot name="head" />
|
<slot name="head" />
|
||||||
</tr>
|
</tr>
|
||||||
@ -50,7 +50,7 @@ const props = defineProps({
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="100%" class="table-item h-7 text-center">
|
<td colspan="100%" class="table-cell h-7 text-center">
|
||||||
<div class="w-full h-4 bg-secondary/50 rounded-md"></div>
|
<div class="w-full h-4 bg-secondary/50 rounded-md"></div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@ -15,7 +15,7 @@ const props = defineProps({
|
|||||||
<div class="w-full overflow-hidden rounded-md shadow-lg">
|
<div class="w-full overflow-hidden rounded-md shadow-lg">
|
||||||
<div class="w-full overflow-x-auto">
|
<div class="w-full overflow-x-auto">
|
||||||
<table class="w-full">
|
<table class="w-full">
|
||||||
<thead>
|
<thead class="bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt">
|
||||||
<tr>
|
<tr>
|
||||||
<slot name="head" />
|
<slot name="head" />
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@ -2,13 +2,14 @@
|
|||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { getDate, getTime } from '@Controllers/DateController';
|
import { getDate, getTime } from '@Controllers/DateController';
|
||||||
|
|
||||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
|
||||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
|
||||||
/** Eventos */
|
/** Eventos */
|
||||||
const emit = defineEmits([
|
const emit = defineEmits([
|
||||||
'show',
|
'show',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
event: Object,
|
event: Object,
|
||||||
});
|
});
|
||||||
@ -27,6 +28,8 @@ const colors = {
|
|||||||
restored: 'primary',
|
restored: 'primary',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/** Propiedades computadas */
|
||||||
|
|
||||||
const eventType = computed(() => {
|
const eventType = computed(() => {
|
||||||
return props.event.event.split('.')[1];
|
return props.event.event.split('.')[1];
|
||||||
});
|
});
|
||||||
@ -46,7 +49,7 @@ const borderColor = computed(() => {
|
|||||||
<div class="relative flex w-full">
|
<div class="relative flex w-full">
|
||||||
<div class="absolute -left-3.5 top-7 h-0.5 w-8" :class="bgColor"></div>
|
<div class="absolute -left-3.5 top-7 h-0.5 w-8" :class="bgColor"></div>
|
||||||
<div
|
<div
|
||||||
class="absolute -mt-3 -left-3.5 top-7 w-6 h-6 flex items-center justify-center rounded-full"
|
class="absolute -mt-3 -left-3.5 top-7 w-6 h-6 flex items-center justify-center rounded-sm"
|
||||||
:class="bgColor"
|
:class="bgColor"
|
||||||
@click="emit('show', event.data)"
|
@click="emit('show', event.data)"
|
||||||
>
|
>
|
||||||
@ -54,8 +57,8 @@ const borderColor = computed(() => {
|
|||||||
:name="icons[eventType]"
|
:name="icons[eventType]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full rounded-lg shadow-xl dark:shadow-page-dt dark:shadow-sm my-2 mx-4">
|
<div class="w-full rounded-sm shadow-xl dark:shadow-page-dt dark:shadow-xs my-2 mx-4">
|
||||||
<div class="flex justify-between p-2 rounded-t-lg" :class="bgColor">
|
<div class="flex justify-between p-2 rounded-t-sm" :class="bgColor">
|
||||||
<span
|
<span
|
||||||
class="font-medium text-sm cursor-pointer"
|
class="font-medium text-sm cursor-pointer"
|
||||||
@click="emit('show', event.data)"
|
@click="emit('show', event.data)"
|
||||||
@ -70,7 +73,7 @@ const borderColor = computed(() => {
|
|||||||
<div class="flex flex-col justify-center items-center md:flex-row md:justify-start md:space-x-4">
|
<div class="flex flex-col justify-center items-center md:flex-row md:justify-start md:space-x-4">
|
||||||
<div v-if="event.user" class="w-32">
|
<div v-if="event.user" class="w-32">
|
||||||
<div class="flex flex-col w-full justify-center items-center space-y-2">
|
<div class="flex flex-col w-full justify-center items-center space-y-2">
|
||||||
<img :src="event.user?.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-full">
|
<img :src="event.user?.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-sm">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex w-full flex-col justify-start space-y-2">
|
<div class="flex w-full flex-col justify-start space-y-2">
|
||||||
|
|||||||
@ -1,6 +1,15 @@
|
|||||||
@tailwind base;
|
@import "tailwindcss";
|
||||||
@tailwind components;
|
@import "../../colors.css";
|
||||||
@tailwind utilities;
|
@custom-variant dark (&:where(.dark, .dark *));
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--font-google-icon-outlined: "Material Symbols Outlined";
|
||||||
|
--font-google-icon-outlined-fill: "Material Symbols Outlined Fill";
|
||||||
|
--font-google-icon-rounded: "Material Symbols Rounded";
|
||||||
|
--font-google-icon-rounded-fill: "Material Symbols rounded-sm Fill";
|
||||||
|
--font-google-icon-sharp: "Material Symbols Sharp";
|
||||||
|
--font-google-icon-sharp-fill: "Material Symbols Sharp Fill";
|
||||||
|
}
|
||||||
|
|
||||||
.app-bg-light {
|
.app-bg-light {
|
||||||
@apply bg-primary
|
@apply bg-primary
|
||||||
@ -11,7 +20,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
@apply inline-flex justify-center items-center w-fit px-1.5 py-1.5 rounded-md font-medium border border-transparent text-xs text-white uppercase tracking-widest hover:opacity-90 focus:outline-none active:saturate-150 disabled:opacity-25 transition;
|
@apply inline-flex justify-center items-center w-fit px-1.5 py-1.5 rounded-sm font-medium border border-transparent text-xs text-white uppercase tracking-widest hover:opacity-90 focus:outline-hidden active:saturate-150 disabled:opacity-25 cursor-pointer transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
@ -35,53 +44,37 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-icon {
|
.btn-icon {
|
||||||
@apply flex w-fit min-h-6 px-1.5 py-1.5 rounded-md font-medium bg-primary dark:bg-primary-d text-primary-t dark:text-primary-dt hover:bg-secondary dark:hover:bg-secondary-d hover:text-secondary-t dark:hover:text-secondary-dt;
|
@apply flex w-fit min-h-6 px-1.5 py-1.5 rounded-sm font-medium bg-primary dark:bg-primary-d text-primary-t dark:text-primary-dt hover:bg-secondary dark:hover:bg-secondary-d hover:text-secondary-t dark:hover:text-secondary-dt cursor-pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-primary {
|
.input-primary {
|
||||||
@apply w-full p-2 border rounded-md outline-0 bg-transparent
|
@apply w-full p-[6.5px] border-b border-page-t/50 dark:border-page-dt/50 bg-primary/5 rounded-sm outline-0
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item {
|
.nav-item {
|
||||||
@apply p-1
|
@apply p-1
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-item {
|
.table-row {
|
||||||
@apply px-2 border text-sm;
|
@apply hover:bg-secondary/10 dark:hover:bg-secondary-d/10 transition-colors duration-100
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell {
|
||||||
|
@apply px-2 py-0.5 text-sm border border-primary/30 dark:border-primary-dt/30;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-actions {
|
.table-actions {
|
||||||
@apply flex justify-center items-center space-x-2;
|
@apply flex justify-center items-center space-x-1;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a.router-link-active {
|
nav a.router-link-active {
|
||||||
@apply bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d
|
@apply bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
|
||||||
@apply w-full;
|
|
||||||
}
|
|
||||||
|
|
||||||
table>thead {
|
|
||||||
@apply bg-primary text-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
table>thead>tr {
|
|
||||||
@apply text-base font-semibold tracking-wide text-left text-white bg-primary dark:bg-primary-d uppercase border-b divide-indigo-50 divide-x;
|
|
||||||
}
|
|
||||||
|
|
||||||
table>thead>tr>th {
|
|
||||||
@apply px-2 border border-white text-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.with-transition {
|
.with-transition {
|
||||||
@apply transition-all duration-300
|
@apply transition-all duration-300
|
||||||
}
|
}
|
||||||
|
|
||||||
.with-color-transition {
|
|
||||||
@apply transition-colors duration-500
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Switch
|
* Switch
|
||||||
*/
|
*/
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
|
@import './app.css';
|
||||||
@import './icons.css';
|
@import './icons.css';
|
||||||
@import './notifications.css';
|
@import './notifications.css';
|
||||||
@import "vue-multiselect/dist/vue-multiselect.css";
|
@import "vue-multiselect/dist/vue-multiselect.css";
|
||||||
@import './multiselect.css';
|
@import './multiselect.css';
|
||||||
@import './app.css';
|
|
||||||
@ -38,13 +38,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Rounded fill
|
* rounded-sm fill
|
||||||
*
|
*
|
||||||
* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0
|
* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0
|
||||||
* https://fonts.gstatic.com/s/materialsymbolsrounded/v168/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2
|
* https://fonts.gstatic.com/s/materialsymbolsrounded/v168/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2
|
||||||
*/
|
*/
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Material Symbols Rounded Fill';
|
font-family: 'Material Symbols rounded-sm Fill';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: url(./icons/google/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2) format('woff2');
|
src: url(./icons/google/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2) format('woff2');
|
||||||
@ -75,18 +75,3 @@
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: url(./icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2) format('woff2');
|
src: url(./icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2) format('woff2');
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-symbols{
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 20spx;
|
|
||||||
line-height: 1;
|
|
||||||
letter-spacing: normal;
|
|
||||||
text-transform: none;
|
|
||||||
display: inline-block;
|
|
||||||
white-space: nowrap;
|
|
||||||
word-wrap: normal;
|
|
||||||
direction: ltr;
|
|
||||||
-webkit-font-feature-settings: 'liga';
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
.multiselect__input,
|
.multiselect__input,
|
||||||
.multiselect__single {
|
.multiselect__single {
|
||||||
@apply bg-white dark:bg-primary dark:text-white
|
@apply bg-white dark:bg-transparent dark:text-white
|
||||||
}
|
}
|
||||||
|
|
||||||
.multiselect__input::placeholder {
|
.multiselect__input::placeholder {
|
||||||
@ -12,7 +12,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.multiselect__tag {
|
.multiselect__tag {
|
||||||
@apply dark:bg-green-800;
|
@apply bg-success dark:bg-success-d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.multiselect__tag-icon::after {
|
.multiselect__tag-icon::after {
|
||||||
@ -25,7 +25,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.multiselect__tags {
|
.multiselect__tags {
|
||||||
@apply dark:bg-primary min-h-8 border-0 border-b border-b-slate-400 pt-1 with-color-transition;
|
@apply bg-primary/5 dark:bg-primary-d/5 min-h-8 border-0 border-b border-page-t/50 dark:border-page-dt/50 pt-1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.multiselect__option--highlight {
|
.multiselect__option--highlight {
|
||||||
@ -45,7 +45,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.multiselect__content-wrapper {
|
.multiselect__content-wrapper {
|
||||||
@apply bg-gray-100 dark:bg-primary;
|
@apply bg-page dark:bg-page-d;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -13,13 +13,14 @@ const messages = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const i18n = createI18n({
|
const i18n = createI18n({
|
||||||
|
legacy: false,
|
||||||
locale,
|
locale,
|
||||||
fallbackLocale: locale,
|
fallbackLocale: locale,
|
||||||
messages
|
messages
|
||||||
});
|
});
|
||||||
|
|
||||||
function lang(text) {
|
function lang(text, params = {}) {
|
||||||
return i18n.global.t(text);
|
return i18n.global.t(text, params);
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
|||||||
@ -81,7 +81,7 @@ onMounted(() => {
|
|||||||
/>
|
/>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</Header>
|
</Header>
|
||||||
<p class="mt-2">{{ $t('admin.activity.description') }}</p>
|
<p class="mt-2 text-sm">{{ $t('admin.activity.description') }}</p>
|
||||||
|
|
||||||
<div id="filters" class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-4">
|
<div id="filters" class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-4">
|
||||||
<Input
|
<Input
|
||||||
|
|||||||
@ -25,8 +25,7 @@ defineProps({
|
|||||||
:title="model.name"
|
:title="model.name"
|
||||||
:subtitle="model.last_name"
|
:subtitle="model.last_name"
|
||||||
/>
|
/>
|
||||||
<div class="py-2 border-b">
|
<div class="flex w-full p-4">
|
||||||
<div class="flex w-full px-4 py-2">
|
|
||||||
<GoogleIcon
|
<GoogleIcon
|
||||||
class="text-xl text-success"
|
class="text-xl text-success"
|
||||||
name="contact_mail"
|
name="contact_mail"
|
||||||
@ -57,6 +56,5 @@ defineProps({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</ShowModal>
|
</ShowModal>
|
||||||
</template>
|
</template>
|
||||||
@ -1,71 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { getDateTime } from '@Controllers/DateController';
|
|
||||||
|
|
||||||
import Header from '@Holos/Modal/Elements/Header.vue';
|
|
||||||
import ShowModal from '@Holos/Modal/Show.vue';
|
|
||||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
|
||||||
/** Eventos */
|
|
||||||
defineEmits([
|
|
||||||
'close',
|
|
||||||
]);
|
|
||||||
|
|
||||||
/** Propiedades */
|
|
||||||
defineProps({
|
|
||||||
show: Boolean,
|
|
||||||
model: Object
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<ShowModal
|
|
||||||
:show="show"
|
|
||||||
@close="$emit('close')"
|
|
||||||
>
|
|
||||||
<Header
|
|
||||||
:title="model.name"
|
|
||||||
:subtitle="model.last_name"
|
|
||||||
>
|
|
||||||
<div class="flex w-full flex-col">
|
|
||||||
<div class="flex w-full justify-center items-center">
|
|
||||||
<img :src="model.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-full">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Header>
|
|
||||||
<div class="py-2 border-b">
|
|
||||||
<div class="flex w-full px-4 py-2">
|
|
||||||
<GoogleIcon
|
|
||||||
class="text-xl text-success"
|
|
||||||
name="contact_mail"
|
|
||||||
/>
|
|
||||||
<div class="pl-3">
|
|
||||||
<p class="font-bold text-lg leading-none pb-2">
|
|
||||||
{{ $t('details') }}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<b>{{ $t('name') }}: </b>
|
|
||||||
{{ model.full_name }}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<b>{{ $t('phone') }}: </b>
|
|
||||||
<a :href="`tel:${model.phone}`" target="_blank" class="hover:text-danger">
|
|
||||||
{{ model.phone ?? '-' }}
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<b>{{ $t('email.title') }}: </b>
|
|
||||||
<a :href="`mailto:${model.email}`" target="_blank" class="hover:text-danger">
|
|
||||||
{{ model.email }}
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<b>{{ $t('created_at') }}: </b>
|
|
||||||
{{ getDateTime(model.created_at) }}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<b>{{ $t('updated_at') }}: </b>
|
|
||||||
{{ getDateTime(model.updated_at) }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ShowModal>
|
|
||||||
</template>
|
|
||||||
@ -25,7 +25,7 @@ function submit() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full py-4">
|
<div class="w-full pb-2">
|
||||||
<p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
|
<p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
|
|||||||
@ -70,11 +70,11 @@ onMounted(() => {
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #body="{items}">
|
<template #body="{items}">
|
||||||
<tr v-for="model in items">
|
<tr v-for="model in items" class="table-row">
|
||||||
<td class="table-item border">
|
<td class="table-cell border">
|
||||||
{{ model.description }}
|
{{ model.description }}
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item">
|
<td class="table-cell">
|
||||||
<div class="table-actions">
|
<div class="table-actions">
|
||||||
<IconButton
|
<IconButton
|
||||||
v-if="can('edit') && ![1,2].includes(model.id)"
|
v-if="can('edit') && ![1,2].includes(model.id)"
|
||||||
|
|||||||
@ -59,10 +59,9 @@ onUpdated(() => {
|
|||||||
<Header
|
<Header
|
||||||
:title="model.description"
|
:title="model.description"
|
||||||
/>
|
/>
|
||||||
<div class="p-4 border-b">
|
<div class="p-4">
|
||||||
<div class="grid gap-4 grid-cols-2">
|
<div class="grid gap-4 grid-cols-2">
|
||||||
<div v-for="permissionType in permissionTypes">
|
<div v-for="permissionType in permissionTypes">
|
||||||
<div>
|
|
||||||
<p class="font-bold">{{ permissionType.name}}</p>
|
<p class="font-bold">{{ permissionType.name}}</p>
|
||||||
<ul class="space-y-0.5 list-none">
|
<ul class="space-y-0.5 list-none">
|
||||||
<li v-for="permission in permissionType.permissions">
|
<li v-for="permission in permissionType.permissions">
|
||||||
@ -76,6 +75,5 @@ onUpdated(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</EditModal>
|
</EditModal>
|
||||||
</template>
|
</template>
|
||||||
@ -25,7 +25,7 @@ function submit() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full py-4">
|
<div class="w-full pb-2">
|
||||||
<p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
|
<p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
@ -41,28 +41,24 @@ function submit() {
|
|||||||
v-model="form.paternal"
|
v-model="form.paternal"
|
||||||
id="paternal"
|
id="paternal"
|
||||||
:onError="form.errors.paternal"
|
:onError="form.errors.paternal"
|
||||||
autofocus
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
v-model="form.maternal"
|
v-model="form.maternal"
|
||||||
id="maternal"
|
id="maternal"
|
||||||
:onError="form.errors.maternal"
|
:onError="form.errors.maternal"
|
||||||
autofocus
|
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
v-model="form.phone"
|
v-model="form.phone"
|
||||||
id="phone"
|
id="phone"
|
||||||
:onError="form.errors.phone"
|
:onError="form.errors.phone"
|
||||||
type="number"
|
type="number"
|
||||||
autofocus
|
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
v-model="form.email"
|
v-model="form.email"
|
||||||
id="email.title"
|
id="email.title"
|
||||||
type="email"
|
type="email"
|
||||||
:onError="form.errors.email"
|
:onError="form.errors.email"
|
||||||
autofocus
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<slot />
|
<slot />
|
||||||
|
|||||||
@ -22,6 +22,7 @@ const modelModal = ref(Modal.modelModal);
|
|||||||
|
|
||||||
const models = ref([]);
|
const models = ref([]);
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
const searcher = useSearcher({
|
const searcher = useSearcher({
|
||||||
url: apiTo('index'),
|
url: apiTo('index'),
|
||||||
onSuccess: (r) => models.value = r.models,
|
onSuccess: (r) => models.value = r.models,
|
||||||
@ -72,11 +73,14 @@ onMounted(() => {
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #body="{items}">
|
<template #body="{items}">
|
||||||
<tr v-for="model in items">
|
<tr
|
||||||
<td class="table-item border">
|
v-for="model in items"
|
||||||
|
class="table-row"
|
||||||
|
>
|
||||||
|
<td class="table-cell">
|
||||||
{{ `${model.name} ${model.paternal}` }}
|
{{ `${model.name} ${model.paternal}` }}
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item border">
|
<td class="table-cell">
|
||||||
<p>
|
<p>
|
||||||
<a
|
<a
|
||||||
class="hover:underline"
|
class="hover:underline"
|
||||||
@ -88,16 +92,16 @@ onMounted(() => {
|
|||||||
</p>
|
</p>
|
||||||
<p v-if="model.phone" class="font-semibold text-xs">
|
<p v-if="model.phone" class="font-semibold text-xs">
|
||||||
<b>Teléfono: </b>
|
<b>Teléfono: </b>
|
||||||
<a
|
<span
|
||||||
class="hover:underline"
|
class="hover:underline"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
:href="`tel:${model.phone}`"
|
:href="`tel:${model.phone}`"
|
||||||
>
|
>
|
||||||
{{ model.phone }}
|
{{ model.phone }}
|
||||||
</a>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item">
|
<td class="table-cell">
|
||||||
<div class="table-actions">
|
<div class="table-actions">
|
||||||
<IconButton
|
<IconButton
|
||||||
icon="visibility"
|
icon="visibility"
|
||||||
@ -148,15 +152,15 @@ onMounted(() => {
|
|||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
<template #empty>
|
<template #empty>
|
||||||
<td class="table-item border">
|
<td class="table-cell">
|
||||||
<div class="flex items-center text-sm">
|
<div class="flex items-center text-sm">
|
||||||
<p class="font-semibold">
|
<p class="font-semibold">
|
||||||
{{ $t('registers.empty') }}
|
{{ $t('registers.empty') }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item border">-</td>
|
<td class="table-cell">-</td>
|
||||||
<td class="table-item border">-</td>
|
<td class="table-cell">-</td>
|
||||||
</template>
|
</template>
|
||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -30,8 +30,7 @@ defineProps({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Header>
|
</Header>
|
||||||
<div class="py-2 border-b">
|
<div class="flex w-full p-4">
|
||||||
<div class="flex w-full px-4 py-2">
|
|
||||||
<GoogleIcon
|
<GoogleIcon
|
||||||
class="text-xl text-success"
|
class="text-xl text-success"
|
||||||
name="contact_mail"
|
name="contact_mail"
|
||||||
@ -66,6 +65,5 @@ defineProps({
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</ShowModal>
|
</ShowModal>
|
||||||
</template>
|
</template>
|
||||||
@ -55,13 +55,13 @@ const modelModal = ref(Modal.modelModal);
|
|||||||
<template #body="{items}">
|
<template #body="{items}">
|
||||||
<template v-for="model in items">
|
<template v-for="model in items">
|
||||||
<tr v-if="model.id != 1">
|
<tr v-if="model.id != 1">
|
||||||
<td class="table-item border">
|
<td class="table-cell border">
|
||||||
<img :src="model.profile_photo_url" alt="Profile photo" class="w-10 h-10 rounded-full">
|
<img :src="model.profile_photo_url" alt="Profile photo" class="w-10 h-10 rounded-full">
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item border">
|
<td class="table-cell border">
|
||||||
{{ `${model.full_name}` }}
|
{{ `${model.full_name}` }}
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item border">
|
<td class="table-cell border">
|
||||||
<p>
|
<p>
|
||||||
<a
|
<a
|
||||||
class="hover:underline"
|
class="hover:underline"
|
||||||
@ -82,7 +82,7 @@ const modelModal = ref(Modal.modelModal);
|
|||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item">
|
<td class="table-cell">
|
||||||
<div class="table-actions">
|
<div class="table-actions">
|
||||||
<IconButton
|
<IconButton
|
||||||
icon="visibility"
|
icon="visibility"
|
||||||
|
|||||||
@ -35,13 +35,13 @@ onMounted(() => {
|
|||||||
/>
|
/>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
<div class="flex w-full pt-2">
|
<div class="flex w-full">
|
||||||
<div class="w-full text-center p-2 bg-primary dark:bg-primary-d border-b rounded-lg">
|
<div class="w-full text-center p-2 bg-primary dark:bg-primary-d border-b rounded-sm">
|
||||||
<p class="pt-2 text-lg font-bold text-gray-50">
|
<p class="pt-2 text-lg font-bold text-gray-50">
|
||||||
{{ user?.name }}
|
{{ user?.name }}
|
||||||
</p>
|
</p>
|
||||||
<p class="text-sm text-gray-100">
|
<p class="text-sm text-gray-100">
|
||||||
{{ user?.full_last_name }}
|
{{ user?.last_name }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -96,11 +96,11 @@ const submit = () => {
|
|||||||
|
|
||||||
<div class="ms-2 text-primary-t dark:text-primary-dt">
|
<div class="ms-2 text-primary-t dark:text-primary-dt">
|
||||||
I agree to the
|
I agree to the
|
||||||
<a target="_blank" :href="route('terms.show')" class="underline text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
<a target="_blank" :href="route('terms.show')" class="underline text-sm rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
{{ $t('terms.service') }}
|
{{ $t('terms.service') }}
|
||||||
</a>
|
</a>
|
||||||
and
|
and
|
||||||
<a target="_blank" :href="route('policy.show')" class="underline text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
<a target="_blank" :href="route('policy.show')" class="underline text-sm rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
{{ $t('policy.privacy') }}
|
{{ $t('policy.privacy') }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -110,7 +110,7 @@ const submit = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center justify-end mt-4">
|
<div class="flex items-center justify-end mt-4">
|
||||||
<Link :href="route('login')" class="underline text-sm bg-page-text hover:bg-page-background text-page-background hover:text-page-text rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
<Link :href="route('login')" class="underline text-sm bg-page-text hover:bg-page-background text-page-background hover:text-page-text rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
{{ $t('auth.register.already') }}
|
{{ $t('auth.register.already') }}
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
|
|||||||
@ -95,13 +95,13 @@ const changelogs = [
|
|||||||
<template #body="{items}">
|
<template #body="{items}">
|
||||||
<template v-for="item in items">
|
<template v-for="item in items">
|
||||||
<tr>
|
<tr>
|
||||||
<td class="table-item">
|
<td class="table-cell">
|
||||||
<span v-text="item.version" />
|
<span v-text="item.version" />
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item">
|
<td class="table-cell">
|
||||||
<span v-text="item.date" />
|
<span v-text="item.date" />
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item">
|
<td class="table-cell">
|
||||||
<ul class="list-disc list-inside">
|
<ul class="list-disc list-inside">
|
||||||
<li v-for="detail in item.details.reverse()" v-text="detail" />
|
<li v-for="detail in item.details.reverse()" v-text="detail" />
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -35,13 +35,13 @@ onMounted(() => {
|
|||||||
<template #body="{items}">
|
<template #body="{items}">
|
||||||
<template v-for="item in items">
|
<template v-for="item in items">
|
||||||
<tr>
|
<tr>
|
||||||
<td class="table-item">
|
<td class="table-cell">
|
||||||
<span v-text="item.version" />
|
<span v-text="item.version" />
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item">
|
<td class="table-cell">
|
||||||
<span v-text="item.date" />
|
<span v-text="item.date" />
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item">
|
<td class="table-cell">
|
||||||
<ul class="list-disc list-inside">
|
<ul class="list-disc list-inside">
|
||||||
<li v-for="detail in item.changes" v-text="detail" />
|
<li v-for="detail in item.changes" v-text="detail" />
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -68,23 +68,23 @@ onMounted(() => {
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #body="{items}">
|
<template #body="{items}">
|
||||||
<tr v-for="model in items">
|
<tr v-for="model in items" class="table-row">
|
||||||
<td class="table-item border">
|
<td class="table-cell border">
|
||||||
{{ model.data.title }}
|
{{ model.data.title }}
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item border">
|
<td class="table-cell border">
|
||||||
{{ model.data.description }}
|
{{ model.data.description }}
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item border">
|
<td class="table-cell border">
|
||||||
{{ getDateTime(model.created_at) }}
|
{{ getDateTime(model.created_at) }}
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item border">
|
<td class="table-cell border">
|
||||||
<div class="flex items-center justify-center">
|
<div class="flex items-center justify-center">
|
||||||
<div class="w-2 h-2 rounded-full" :class="model.read_at ? 'bg-success' : 'bg-danger'"></div>
|
<div class="w-2 h-2 rounded-full" :class="model.read_at ? 'bg-success' : 'bg-danger'"></div>
|
||||||
<span class="ml-2">{{ model.read_at ? $t('readed') : (model.is_closed ? $t('omitted') : $t('unreaded')) }}</span>
|
<span class="ml-2">{{ model.read_at ? $t('readed') : (model.is_closed ? $t('omitted') : $t('unreaded')) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item">
|
<td class="table-cell">
|
||||||
<div class="table-actions">
|
<div class="table-actions">
|
||||||
<IconButton
|
<IconButton
|
||||||
icon="visibility"
|
icon="visibility"
|
||||||
@ -105,17 +105,17 @@ onMounted(() => {
|
|||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
<template #empty>
|
<template #empty>
|
||||||
<td class="table-item border">
|
<td class="table-cell border">
|
||||||
<div class="flex items-center text-sm">
|
<div class="flex items-center text-sm">
|
||||||
<p class="font-semibold">
|
<p class="font-semibold">
|
||||||
{{ $t('registers.empty') }}
|
{{ $t('registers.empty') }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="table-item border">-</td>
|
<td class="table-cell border">-</td>
|
||||||
<td class="table-item border">-</td>
|
<td class="table-cell border">-</td>
|
||||||
<td class="table-item border">-</td>
|
<td class="table-cell border">-</td>
|
||||||
<td class="table-item border">-</td>
|
<td class="table-cell border">-</td>
|
||||||
</template>
|
</template>
|
||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -69,7 +69,8 @@ const closeModal = () => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #content>
|
<template #content>
|
||||||
{{ $t('account.delete.confirm') }}
|
<div class="px-4 pb-2">
|
||||||
|
<p>{{ $t('account.delete.confirm') }}</p>
|
||||||
|
|
||||||
<div class="mt-4">
|
<div class="mt-4">
|
||||||
<Input
|
<Input
|
||||||
@ -80,6 +81,8 @@ const closeModal = () => {
|
|||||||
:onError="form.errors.password"
|
:onError="form.errors.password"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
|
|||||||
@ -16,15 +16,19 @@ const router = createRouter({
|
|||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
name: 'index',
|
name: 'index',
|
||||||
redirect: '/dashboard'
|
redirect: '/dashboard'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/dashboard',
|
path: 'dashboard',
|
||||||
name: 'dashboard.index',
|
name: 'dashboard.index',
|
||||||
component: () => import('@Pages/Dashboard/Index.vue')
|
component: () => import('@Pages/Dashboard/Index.vue')
|
||||||
}, {
|
},
|
||||||
path: '/profile',
|
{
|
||||||
|
path: 'profile',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
@ -42,7 +46,10 @@ const router = createRouter({
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
}, {
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
path: '/admin',
|
path: '/admin',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|||||||
@ -4,9 +4,6 @@ import { page } from '@Services/Page'
|
|||||||
import { hasPermission, reloadPermissions, getAllRolesIds } from '@Plugins/RolePermission'
|
import { hasPermission, reloadPermissions, getAllRolesIds } from '@Plugins/RolePermission'
|
||||||
import { boot as bootAuthUsers, addUser, removeUser } from '@Plugins/AuthUsers'
|
import { boot as bootAuthUsers, addUser, removeUser } from '@Plugins/AuthUsers'
|
||||||
|
|
||||||
/** Propiedades */
|
|
||||||
const hasNotifications = import.meta.env.VITE_REVERB_ACTIVE === 'true';
|
|
||||||
|
|
||||||
// Almacenar estado de la barra lateral derecha
|
// Almacenar estado de la barra lateral derecha
|
||||||
const useNotifier = defineStore('notifier', {
|
const useNotifier = defineStore('notifier', {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
@ -14,12 +11,13 @@ const useNotifier = defineStore('notifier', {
|
|||||||
unreadClosedCounter: 0,
|
unreadClosedCounter: 0,
|
||||||
notifications: [],
|
notifications: [],
|
||||||
isStarted: false,
|
isStarted: false,
|
||||||
|
isEnabled: import.meta.env.VITE_REVERB_ACTIVE === 'true',
|
||||||
user_id: 0,
|
user_id: 0,
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
// Iniciar instancia
|
// Iniciar instancia
|
||||||
boot() {
|
boot() {
|
||||||
if(!this.isStarted && hasNotifications) {
|
if(!this.isStarted && this.isEnabled) {
|
||||||
this.user_id = page.user.id;
|
this.user_id = page.user.id;
|
||||||
|
|
||||||
this.subscribeGLobalNotifications();
|
this.subscribeGLobalNotifications();
|
||||||
|
|||||||
@ -1,26 +0,0 @@
|
|||||||
import defaultTheme from 'tailwindcss/defaultTheme';
|
|
||||||
import colors from './colors.json'
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
export default {
|
|
||||||
darkMode: 'class',
|
|
||||||
content: [
|
|
||||||
"./index.html",
|
|
||||||
"./src/**/*.{vue,js,ts,jsx,tsx}"
|
|
||||||
],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: colors,
|
|
||||||
fontFamily: {
|
|
||||||
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
|
|
||||||
'google-icon-outlined':['Material Symbols Outlined'],
|
|
||||||
'google-icon-outlined-fill':['Material Symbols Outlined Fill'],
|
|
||||||
'google-icon-rounded':['Material Symbols Rounded'],
|
|
||||||
'google-icon-rounded-fill':['Material Symbols Rounded Fill'],
|
|
||||||
'google-icon-sharp':['Material Symbols Sharp'],
|
|
||||||
'google-icon-sharp-fill':['Material Symbols Sharp Fill'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
@ -1,11 +1,12 @@
|
|||||||
import { fileURLToPath, URL } from 'node:url'
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue()],
|
plugins: [vue(), tailwindcss()],
|
||||||
build: {
|
build: {
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
input: {
|
input: {
|
||||||
@ -14,6 +15,9 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
server: {
|
||||||
|
allowedHosts: true,
|
||||||
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user