@vixcom/ui 1.7.1 → 1.7.2
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/css/helper/primefaces.css +8 -2
- package/dist/css/helper/primefaces.css.map +1 -1
- package/dist/css/main.css +3 -3
- package/dist/css/main.css.map +1 -1
- package/dist/css/menu.css +187 -254
- package/dist/css/menu.css.map +1 -1
- package/dist/js/alpinejs.min.js +5 -0
- package/package.json +1 -1
- package/src/css/helper/primefaces.css +8 -2
- package/src/css/helper/primefaces.css.map +1 -1
- package/src/css/main.css +3 -3
- package/src/css/main.css.map +1 -1
- package/src/css/menu.css +187 -254
- package/src/css/menu.css.map +1 -1
- package/src/pages/menu/index.html +123 -74
- package/src/styles/helper/primefaces.scss +10 -2
- package/src/styles/main.scss +3 -3
- package/src/styles/menu.scss +220 -237
package/src/css/menu.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../styles/menu.scss","../styles/_mixins.scss"],"names":[],"mappings":"AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../styles/menu.scss","../styles/_mixins.scss"],"names":[],"mappings":"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","file":"menu.css"}
|
|
@@ -19,95 +19,59 @@
|
|
|
19
19
|
<!-- <script src="js/alpine" defer></script> -->
|
|
20
20
|
</head>
|
|
21
21
|
|
|
22
|
-
<body class="main-menu-container" :class="container" x-data="{type:'side-menu', container:'grid', mini: true, active: false, flat: false}">
|
|
22
|
+
<body class="main-menu-container" :class="container" x-data="{type:'side-menu', container:'grid', mini: true, removed:false, active: false, flat: false}">
|
|
23
23
|
<input type="checkbox" id="main-menu-trigger" class="main-menu-trigger" x-model="active">
|
|
24
|
-
<
|
|
25
|
-
<
|
|
26
|
-
<
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
</nav>
|
|
30
|
-
<div class="menu-container p-1 rounded-2 bg-inherit">
|
|
31
|
-
<header class="menu-header">
|
|
32
|
-
<img src="assets/img/logo.png" class="main-logo menu-logo silhouette" alt="icon">
|
|
33
|
-
<img src="assets/img/icon.png" class="main-logo menu-logo-alt" alt="icon-alt">
|
|
34
|
-
</header>
|
|
35
|
-
<nav>
|
|
36
|
-
<template x-for="(v,k) of {flex:'bounding-box', grid: 'grid'}">
|
|
37
|
-
<label class="item" :class="{active: k === container}" :title="k">
|
|
38
|
-
<i :class="`icon bi bi-${v}`"></i>
|
|
39
|
-
<input type="radio" name="container" :value="k" x-model="container" hidden>
|
|
40
|
-
<span class="label" x-text="k"></span>
|
|
41
|
-
</label>
|
|
42
|
-
</template>
|
|
43
|
-
<divider></divider>
|
|
44
|
-
<template x-for="(v,k) of {
|
|
45
|
-
'full-menu':'window-fullscreen',
|
|
46
|
-
'float-menu':'menu-up',
|
|
47
|
-
'side-menu':'layout-sidebar',
|
|
48
|
-
}">
|
|
49
|
-
<label class="item" :class="{active: k === type}" :title="k">
|
|
50
|
-
<i :class="`icon bi bi-${v}`"></i>
|
|
51
|
-
<input type="radio" name="type" :value="k" x-model="type" hidden>
|
|
52
|
-
<span class="label" x-text="k"></span>
|
|
53
|
-
</label>
|
|
24
|
+
<template x-if="!removed">
|
|
25
|
+
<menu :class="`main-menu bg-primary ${type} ${mini ? 'mini':'max'}`">
|
|
26
|
+
<nav class="menu-snap bg-text text-black">
|
|
27
|
+
<template x-for="() in 5">
|
|
28
|
+
<img src="assets/img/icon.png" class="item icon" alt="icon">
|
|
54
29
|
</template>
|
|
55
|
-
<button class="bg-green item"><i class="icon bi bi-check"></i><span class="label">Activate</span></button>
|
|
56
|
-
<button class="bg-blue item"><i class="icon bi bi-share"></i><span class="label">Share</span></button>
|
|
57
|
-
<button class="bg-white item"><i class="icon bi bi-person"></i><span class="label">Account</span></button>
|
|
58
30
|
</nav>
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<main>
|
|
66
|
-
<template x-if="!flat">
|
|
67
|
-
<header class="p-3 bg-white"><img class="sq-2 ml-auto" src="assets/img/avatar.svg" alt="P"></header>
|
|
68
|
-
</template>
|
|
69
|
-
<section>
|
|
70
|
-
<h1 x-text="`VX Dashboard ${type}`"></h1>
|
|
71
|
-
<menu>
|
|
72
|
-
<div class="tabs tabs-primary md">
|
|
73
|
-
<label>
|
|
74
|
-
<input class="default" type="checkbox" name="flat" x-model="flat">
|
|
75
|
-
<span class="label" x-text="`Flat: ${flat}`"></span>
|
|
76
|
-
</label>
|
|
77
|
-
</div>
|
|
78
|
-
<div class="tabs tabs-secondary prefill">
|
|
31
|
+
<div class="menu-container p-1 rounded-2 bg-inherit">
|
|
32
|
+
<header class="menu-header">
|
|
33
|
+
<img src="assets/img/logo.png" class="main-logo menu-logo silhouette" alt="icon">
|
|
34
|
+
<img src="assets/img/icon.png" class="main-logo menu-logo-alt" alt="icon-alt">
|
|
35
|
+
</header>
|
|
36
|
+
<nav>
|
|
79
37
|
<template x-for="(v,k) of {flex:'bounding-box', grid: 'grid'}">
|
|
80
|
-
<label class="
|
|
38
|
+
<label class="item" :class="{active: k === container}" :title="k">
|
|
81
39
|
<i :class="`icon bi bi-${v}`"></i>
|
|
82
40
|
<input type="radio" name="container" :value="k" x-model="container" hidden>
|
|
83
41
|
<span class="label" x-text="k"></span>
|
|
84
42
|
</label>
|
|
85
43
|
</template>
|
|
44
|
+
<divider></divider>
|
|
86
45
|
<template x-for="(v,k) of {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
<label class="
|
|
46
|
+
'full-menu':'window-fullscreen',
|
|
47
|
+
'float-menu':'menu-up',
|
|
48
|
+
'side-menu':'layout-sidebar',
|
|
49
|
+
}">
|
|
50
|
+
<label class="item" :class="{active: k === type}" :title="k">
|
|
92
51
|
<i :class="`icon bi bi-${v}`"></i>
|
|
93
52
|
<input type="radio" name="type" :value="k" x-model="type" hidden>
|
|
94
53
|
<span class="label" x-text="k"></span>
|
|
95
54
|
</label>
|
|
96
55
|
</template>
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
<
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
56
|
+
<button class="bg-green item"><i class="icon bi bi-check"></i><span class="label">Activate</span></button>
|
|
57
|
+
<button class="bg-blue item"><i class="icon bi bi-share"></i><span class="label">Share</span></button>
|
|
58
|
+
<button class="bg-white item"><i class="icon bi bi-person"></i><span class="label">Account</span></button>
|
|
59
|
+
</nav>
|
|
60
|
+
<label for="main-menu-trigger" class="bi bi-list main-menu-toggle icon border bg-text p-2 rounded-circle" />
|
|
61
|
+
</div>
|
|
62
|
+
</menu>
|
|
63
|
+
</template>
|
|
64
|
+
<template x-if="flat">
|
|
65
|
+
<header class="p-3 bg-white"><img class="sq-2 ml-auto" src="assets/img/avatar.svg" alt="P"></header>
|
|
66
|
+
</template>
|
|
67
|
+
<template x-else>Else</template>
|
|
68
|
+
<main>
|
|
69
|
+
<template x-if="!flat">
|
|
70
|
+
<header class="p-3 bg-white"><img class="sq-2 ml-auto" src="assets/img/avatar.svg" alt="P"></header>
|
|
71
|
+
</template>
|
|
72
|
+
<template x-for="(v,k) in Array(10)">
|
|
73
|
+
<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
|
|
74
|
+
</template>
|
|
111
75
|
<template x-if="!flat">
|
|
112
76
|
<footer>All rights reserved</footer>
|
|
113
77
|
</template>
|
|
@@ -115,6 +79,91 @@
|
|
|
115
79
|
<template x-if="flat">
|
|
116
80
|
<footer>All rights reserved</footer>
|
|
117
81
|
</template>
|
|
82
|
+
<menu id="menu" class="float-menu bg-primary">
|
|
83
|
+
<nav>
|
|
84
|
+
<template x-for="(v,k) of {flex: 'bounding-box', grid: 'grid'}">
|
|
85
|
+
<label class="item" :class="{active: k === container}" :title="k">
|
|
86
|
+
<i :class="`icon bi bi-${v}`"></i>
|
|
87
|
+
<input type="radio" name="container" :value="k" x-model="container" hidden>
|
|
88
|
+
<span class="label" x-text="k"></span>
|
|
89
|
+
</label>
|
|
90
|
+
</template>
|
|
91
|
+
<template x-for="(v,k) of {
|
|
92
|
+
'full-menu':'window-fullscreen',
|
|
93
|
+
'float-menu':'menu-up',
|
|
94
|
+
'side-menu':'layout-sidebar',
|
|
95
|
+
}">
|
|
96
|
+
<label class="item" :class="{active: k === type}" :title="k">
|
|
97
|
+
<i :class="`icon bi bi-${v}`"></i>
|
|
98
|
+
<input type="radio" name="type" :value="k" x-model="type" hidden>
|
|
99
|
+
<span class="label" x-text="k"></span>
|
|
100
|
+
</label>
|
|
101
|
+
</template>
|
|
102
|
+
<label for="main-menu-trigger" class="bi bi-list icon" />
|
|
103
|
+
</nav>
|
|
104
|
+
<div class="flex">
|
|
105
|
+
<label class="item gap-1 checkbox">
|
|
106
|
+
<input class="default" type="checkbox" name="flat" x-model="flat">
|
|
107
|
+
<span class="label">Flat</span>
|
|
108
|
+
</label>
|
|
109
|
+
<label class="item gap-1 checkbox">
|
|
110
|
+
<input class="default" type="checkbox" name="mini" x-model="mini">
|
|
111
|
+
<span class="label">Mini</span>
|
|
112
|
+
</label>
|
|
113
|
+
<label class="item gap-1 checkbox">
|
|
114
|
+
<input class="default" type="checkbox" name="menu" x-model="active">
|
|
115
|
+
<span class="label">Toggle Menu</span>
|
|
116
|
+
</label>
|
|
117
|
+
<label class="item gap-1 checkbox">
|
|
118
|
+
<input class="default" type="checkbox" name="remove_menu" x-model="removed">
|
|
119
|
+
<span class="label">Remove Menu</span>
|
|
120
|
+
</label>
|
|
121
|
+
</div>
|
|
122
|
+
</menu>
|
|
123
|
+
<style>
|
|
124
|
+
menu#menu {
|
|
125
|
+
position: fixed;
|
|
126
|
+
margin: 1rem;
|
|
127
|
+
right: 0;
|
|
128
|
+
border-radius: 0.25rem;
|
|
129
|
+
box-shadow: 0 0 10px -5px black;
|
|
130
|
+
transition: opacity 0.25s;
|
|
131
|
+
z-index: 1;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
menu#menu:not(:hover) {
|
|
135
|
+
opacity: 0.125;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
menu#menu nav,
|
|
139
|
+
menu#menu .flex {
|
|
140
|
+
display: flex;
|
|
141
|
+
flex-wrap: wrap;
|
|
142
|
+
gap: 0.25rem;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
menu#menu .flex {
|
|
146
|
+
padding: 0.5rem;
|
|
147
|
+
justify-content: space-between;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
menu#menu nav .item {
|
|
151
|
+
display: inline-flex;
|
|
152
|
+
align-items: center;
|
|
153
|
+
gap: 0.5rem;
|
|
154
|
+
border-radius: 0.25rem;
|
|
155
|
+
padding: 0.5rem;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
menu#menu .item.active {
|
|
159
|
+
background-color: var(--secondary);
|
|
160
|
+
color: var(--secondary-c);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
section {
|
|
164
|
+
min-height: 50dvh;
|
|
165
|
+
}
|
|
166
|
+
</style>
|
|
118
167
|
</body>
|
|
119
168
|
|
|
120
169
|
</html>
|
|
@@ -136,6 +136,13 @@
|
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
138
|
|
|
139
|
+
.p-dialog,
|
|
140
|
+
.p-overlaypanel {
|
|
141
|
+
ul {
|
|
142
|
+
list-style: inside;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
139
146
|
.p-toast {
|
|
140
147
|
z-index: 5;
|
|
141
148
|
}
|
|
@@ -453,7 +460,7 @@ p-chart {
|
|
|
453
460
|
display: flex;
|
|
454
461
|
|
|
455
462
|
> .p-button {
|
|
456
|
-
flex: 1 1 100%;
|
|
463
|
+
/* flex: 1 1 100%; */
|
|
457
464
|
// padding: 1rem;
|
|
458
465
|
}
|
|
459
466
|
}
|
|
@@ -464,7 +471,8 @@ p-chart {
|
|
|
464
471
|
/* text-transform: capitalize; */
|
|
465
472
|
|
|
466
473
|
&:hover {
|
|
467
|
-
background-color: hsl(var(--primary-hs), calc(var(--primary-l) - 20%));
|
|
474
|
+
/* background-color: hsl(var(--primary-hs), calc(var(--primary-l) - 20%)); */
|
|
475
|
+
/* color: var(--primary-c); */
|
|
468
476
|
}
|
|
469
477
|
}
|
|
470
478
|
|
package/src/styles/main.scss
CHANGED
|
@@ -7,6 +7,7 @@ script {
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
* {
|
|
10
|
+
box-sizing: border-box;
|
|
10
11
|
scrollbar-color: hsl(var(--muted-hs), calc(var(--muted-l) + 40%)) transparent;
|
|
11
12
|
scrollbar-width: thin;
|
|
12
13
|
word-break: break-word;
|
|
@@ -141,8 +142,6 @@ a:not(.link) {
|
|
|
141
142
|
|
|
142
143
|
.main-logo {
|
|
143
144
|
display: inline-flex;
|
|
144
|
-
max-width: 100%;
|
|
145
|
-
object-fit: contain;
|
|
146
145
|
}
|
|
147
146
|
|
|
148
147
|
.page-header {
|
|
@@ -241,6 +240,7 @@ a:not(.link) {
|
|
|
241
240
|
|
|
242
241
|
.icon {
|
|
243
242
|
@include flex-center;
|
|
243
|
+
aspect-ratio: 1;
|
|
244
244
|
font-size: 150%;
|
|
245
245
|
}
|
|
246
246
|
|
|
@@ -518,7 +518,7 @@ input {
|
|
|
518
518
|
background-color: transparent;
|
|
519
519
|
border: 0.125rem solid currentColor;
|
|
520
520
|
border-radius: 50%;
|
|
521
|
-
display: inline-block;
|
|
521
|
+
/* display: inline-block; */
|
|
522
522
|
justify-content: center;
|
|
523
523
|
align-items: center;
|
|
524
524
|
width: 1rem;
|