grav-svelte 0.0.13 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Modals/index.d.ts +2 -2
- package/dist/Modals/index.js +2 -2
- package/dist/Sidebar/SidebarItem.svelte +27 -0
- package/dist/Sidebar/SidebarItem.svelte.d.ts +20 -0
- package/dist/Sidebar/SidebarWrapper.svelte +136 -0
- package/dist/Sidebar/SidebarWrapper.svelte.d.ts +23 -0
- package/dist/Sidebar/sidebarConfig.d.ts +12 -0
- package/dist/Sidebar/sidebarConfig.js +1 -0
- package/package.json +1 -1
package/dist/Modals/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { default as Grav_Modal } from './Grav_Modal.svelte';
|
|
2
|
-
export { default as
|
|
3
|
-
export { openModal, closeModal, closeAllModals } from './modalConfig.js';
|
|
2
|
+
export { default as ModalContainer } from './ModalContainer.svelte';
|
|
3
|
+
export { openModal, closeModal, closeAllModals, modals, type ModalConfig } from './modalConfig.js';
|
package/dist/Modals/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { default as Grav_Modal } from './Grav_Modal.svelte';
|
|
2
|
-
export { default as
|
|
3
|
-
export { openModal, closeModal, closeAllModals } from './modalConfig.js';
|
|
2
|
+
export { default as ModalContainer } from './ModalContainer.svelte';
|
|
3
|
+
export { openModal, closeModal, closeAllModals, modals } from './modalConfig.js';
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { base } from "$app/paths";
|
|
3
|
+
|
|
4
|
+
export let nombreModulo;
|
|
5
|
+
export let nombreRuta;
|
|
6
|
+
export let nombreIcono;
|
|
7
|
+
export let notifiacion: number | null;
|
|
8
|
+
export let permiso: boolean;
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
{#if permiso == true}
|
|
12
|
+
<li class="items-center flex">
|
|
13
|
+
<a
|
|
14
|
+
href="{base}/administracion/{nombreRuta}"
|
|
15
|
+
class="text-xs uppercase py-3 font-bold block"
|
|
16
|
+
>
|
|
17
|
+
<i class="{nombreIcono} mr-2 text-sm"> </i>
|
|
18
|
+
{nombreModulo}
|
|
19
|
+
</a>
|
|
20
|
+
{#if notifiacion != null}
|
|
21
|
+
<span
|
|
22
|
+
class="bg-white flex justify-center items-center rounded-full text-sm text-black w-5 h-5 ml-1 p-1"
|
|
23
|
+
>{notifiacion}</span
|
|
24
|
+
>
|
|
25
|
+
{/if}
|
|
26
|
+
</li>
|
|
27
|
+
{/if}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
nombreModulo: any;
|
|
5
|
+
nombreRuta: any;
|
|
6
|
+
nombreIcono: any;
|
|
7
|
+
notifiacion: number | null;
|
|
8
|
+
permiso: boolean;
|
|
9
|
+
};
|
|
10
|
+
events: {
|
|
11
|
+
[evt: string]: CustomEvent<any>;
|
|
12
|
+
};
|
|
13
|
+
slots: {};
|
|
14
|
+
};
|
|
15
|
+
export type SidebarItemProps = typeof __propDef.props;
|
|
16
|
+
export type SidebarItemEvents = typeof __propDef.events;
|
|
17
|
+
export type SidebarItemSlots = typeof __propDef.slots;
|
|
18
|
+
export default class SidebarItem extends SvelteComponentTyped<SidebarItemProps, SidebarItemEvents, SidebarItemSlots> {
|
|
19
|
+
}
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { SidebarSection } from "./sidebarConfig.js";
|
|
3
|
+
import SidebarItem from "./SidebarItem.svelte";
|
|
4
|
+
// Props
|
|
5
|
+
export let sections: SidebarSection[];
|
|
6
|
+
export let brandName: string;
|
|
7
|
+
export let brandLink: string;
|
|
8
|
+
export let showLogout: boolean = true;
|
|
9
|
+
export let logoutLink: string = "/";
|
|
10
|
+
export let customClass: string = "";
|
|
11
|
+
export let storefullScreen: boolean;
|
|
12
|
+
|
|
13
|
+
// State Management
|
|
14
|
+
let collapseShow = true;
|
|
15
|
+
|
|
16
|
+
// Functions
|
|
17
|
+
function toggleCollapseShow() {
|
|
18
|
+
collapseShow = !collapseShow;
|
|
19
|
+
}
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<nav
|
|
23
|
+
class="md:left-0 md:block bg-primary-500 z-[40] md:fixed md:top-0 md:bottom-0 md:overflow-y-auto md:flex-row md:flex-nowrap shadow-xl flex flex-wrap items-center justify-between relative md:w-64 py-4 px-4 {customClass}"
|
|
24
|
+
>
|
|
25
|
+
<div class="sm:absolute sm:block hidden right-5 z-[70]">
|
|
26
|
+
<button
|
|
27
|
+
aria-label="Toggle full screen"
|
|
28
|
+
on:click={() => (storefullScreen = true)}
|
|
29
|
+
class="text-xl cursor-pointer border-2 h-8 w-8 rounded-full flex justify-center items-center border-white"
|
|
30
|
+
>
|
|
31
|
+
<i class="fas fa-caret-left"></i>
|
|
32
|
+
</button>
|
|
33
|
+
</div>
|
|
34
|
+
<div
|
|
35
|
+
class="md:flex-col md:items-stretch md:min-h-full md:flex-nowrap px-0 flex flex-wrap items-center justify-between w-full mx-auto"
|
|
36
|
+
>
|
|
37
|
+
<!-- Toggler -->
|
|
38
|
+
<button
|
|
39
|
+
aria-label="Toggle sidebar"
|
|
40
|
+
on:click={toggleCollapseShow}
|
|
41
|
+
class="cursor-pointer text-black md:hidden px-3 py-1 text-xl leading-none bg-transparent rounded border border-solid border-transparent"
|
|
42
|
+
type="button"
|
|
43
|
+
>
|
|
44
|
+
<i class="fa-solid fa-bars"></i>
|
|
45
|
+
</button>
|
|
46
|
+
|
|
47
|
+
<!-- Brand -->
|
|
48
|
+
<a
|
|
49
|
+
class="md:block text-left md:pb-2 text-blueGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
|
|
50
|
+
href={brandLink}
|
|
51
|
+
>
|
|
52
|
+
{brandName}
|
|
53
|
+
</a>
|
|
54
|
+
|
|
55
|
+
<!-- Collapse -->
|
|
56
|
+
<div
|
|
57
|
+
class="{collapseShow
|
|
58
|
+
? 'hidden'
|
|
59
|
+
: 'bg-primary-500 m-2 py-3 px-6 sm:py-0 sm:px-0 sm:m-0'} md:flex md:flex-col md:items-stretch md:opacity-100 md:relative md:mt-5 md:shadow-none shadow absolute top-0 left-0 right-0 z-50 h-auto items-center flex-1 rounded"
|
|
60
|
+
>
|
|
61
|
+
<!-- Collapse header -->
|
|
62
|
+
<div
|
|
63
|
+
class="md:min-w-full md:hidden block pb-4 mb-4 border-b border-solid border-blueGray-200"
|
|
64
|
+
>
|
|
65
|
+
<div class="flex flex-wrap">
|
|
66
|
+
<div class="w-6/12">
|
|
67
|
+
<a
|
|
68
|
+
class="md:block text-left md:pb-2 text-blueGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
|
|
69
|
+
href={brandLink}
|
|
70
|
+
>
|
|
71
|
+
{brandName}
|
|
72
|
+
</a>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="w-6/12 flex justify-end">
|
|
75
|
+
<button
|
|
76
|
+
aria-label="Toggle sidebar"
|
|
77
|
+
type="button"
|
|
78
|
+
on:click={toggleCollapseShow}
|
|
79
|
+
class="cursor-pointer text-black md:hidden px-3 py-1 text-xl leading-none bg-transparent rounded border border-solid border-transparent"
|
|
80
|
+
>
|
|
81
|
+
<i class="fas fa-times"></i>
|
|
82
|
+
</button>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<ul class="md:flex-col md:min-w-full flex flex-col list-none">
|
|
88
|
+
{#each sections as section, index}
|
|
89
|
+
<li class="items-center border-b {index == 0 ? 'border-t' : ''} py-1">
|
|
90
|
+
{#if section.biActivado}
|
|
91
|
+
<button
|
|
92
|
+
on:click={() =>
|
|
93
|
+
(section.biActivado = !section.biActivado)}
|
|
94
|
+
class="text-xs cursor-pointer uppercase py-3 font-bold block w-full text-left"
|
|
95
|
+
>
|
|
96
|
+
<i class="fas fa-caret-down mr-2 text-sm"></i>
|
|
97
|
+
{section.nombre}
|
|
98
|
+
</button>
|
|
99
|
+
{:else}
|
|
100
|
+
<button
|
|
101
|
+
on:click={() =>
|
|
102
|
+
(section.biActivado = !section.biActivado)}
|
|
103
|
+
class="text-xs cursor-pointer uppercase py-3 font-bold block w-full text-left"
|
|
104
|
+
>
|
|
105
|
+
<i class="fas fa-caret-right mr-2 text-sm"></i>
|
|
106
|
+
{section.nombre}
|
|
107
|
+
</button>
|
|
108
|
+
{/if}
|
|
109
|
+
{#if section.biActivado}
|
|
110
|
+
{#each section.modules as module}
|
|
111
|
+
<SidebarItem
|
|
112
|
+
nombreModulo={module.nombre}
|
|
113
|
+
nombreRuta={module.ruta}
|
|
114
|
+
nombreIcono={module.icono}
|
|
115
|
+
notifiacion={module.notifiacion ?? null}
|
|
116
|
+
permiso={module.permiso ?? true}
|
|
117
|
+
/>
|
|
118
|
+
{/each}
|
|
119
|
+
{/if}
|
|
120
|
+
</li>
|
|
121
|
+
{/each}
|
|
122
|
+
|
|
123
|
+
{#if showLogout}
|
|
124
|
+
<li class="items-center mt-5">
|
|
125
|
+
<a
|
|
126
|
+
class="text-left md:pb-2 text-blueGray-600 mr-0 whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
|
|
127
|
+
href={logoutLink}
|
|
128
|
+
>
|
|
129
|
+
Log Out <i class="fas fa-sign-out-alt ml-2"></i>
|
|
130
|
+
</a>
|
|
131
|
+
</li>
|
|
132
|
+
{/if}
|
|
133
|
+
</ul>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
</nav>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
import type { SidebarSection } from "./sidebarConfig.js";
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
sections: SidebarSection[];
|
|
6
|
+
brandName: string;
|
|
7
|
+
brandLink: string;
|
|
8
|
+
showLogout?: boolean;
|
|
9
|
+
logoutLink?: string;
|
|
10
|
+
customClass?: string;
|
|
11
|
+
storefullScreen: boolean;
|
|
12
|
+
};
|
|
13
|
+
events: {
|
|
14
|
+
[evt: string]: CustomEvent<any>;
|
|
15
|
+
};
|
|
16
|
+
slots: {};
|
|
17
|
+
};
|
|
18
|
+
export type SidebarWrapperProps = typeof __propDef.props;
|
|
19
|
+
export type SidebarWrapperEvents = typeof __propDef.events;
|
|
20
|
+
export type SidebarWrapperSlots = typeof __propDef.slots;
|
|
21
|
+
export default class SidebarWrapper extends SvelteComponentTyped<SidebarWrapperProps, SidebarWrapperEvents, SidebarWrapperSlots> {
|
|
22
|
+
}
|
|
23
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|