picocrank 1.2.1 → 1.2.3
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/index.html +5 -1
- package/package.json +2 -2
- package/vue/components/Header.vue +18 -1
- package/vue/components/Sidebar.vue +1 -13
- package/vue/views/App.vue +7 -1
package/index.html
CHANGED
|
@@ -3,6 +3,11 @@
|
|
|
3
3
|
<title>PicoCrank</title>
|
|
4
4
|
|
|
5
5
|
<link rel = "shortcut icon" href = "logo.png" type = "image/png" />
|
|
6
|
+
|
|
7
|
+
<meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no" />
|
|
8
|
+
|
|
9
|
+
<link rel = "stylesheet" href = "node_modules/femtocrank/style.css" />
|
|
10
|
+
<link rel = "stylesheet" href = "node_modules/femtocrank/dark.css" media = "(prefers-color-scheme: dark)" />
|
|
6
11
|
</head>
|
|
7
12
|
|
|
8
13
|
<body>
|
|
@@ -10,7 +15,6 @@
|
|
|
10
15
|
</body>
|
|
11
16
|
|
|
12
17
|
<script type = "module">
|
|
13
|
-
import 'femtocrank/style.css';
|
|
14
18
|
import { createApp } from 'vue';
|
|
15
19
|
import App from './vue/views/App.vue';
|
|
16
20
|
import router from './router.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "picocrank",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.3",
|
|
4
4
|
"description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
|
|
5
5
|
"main": "vite.config.js",
|
|
6
6
|
"scripts": {
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"@hugeicons/core-free-icons": "^1.0.16",
|
|
20
20
|
"@hugeicons/vue": "^1.0.3",
|
|
21
21
|
"@vitejs/plugin-vue": "^6.0.1",
|
|
22
|
-
"femtocrank": "^2.
|
|
22
|
+
"femtocrank": "^2.4.0",
|
|
23
23
|
"unplugin-vue-components": "^29.0.0",
|
|
24
24
|
"vite": "^7.1.3",
|
|
25
25
|
"vue": "^3.5.19",
|
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<header>
|
|
3
|
-
<div class = "image-and-title flex-row" id = "sidebar-button">
|
|
3
|
+
<div class = "image-and-title flex-row" id = "sidebar-button" @click = "emit('toggleSidebar')">
|
|
4
4
|
<img src = "/logo.png" alt = "Logo" class = "logo" />
|
|
5
5
|
<h1>PicoCrank</h1>
|
|
6
|
+
|
|
7
|
+
<div class = "fg1" />
|
|
8
|
+
|
|
9
|
+
<button id = "sidebar-toggler-button" aria-label = "Open sidebar navigation" aria-pressed = "false" aria-haspopup = "menu" class = "neutral">
|
|
10
|
+
<HugeiconsIcon :icon = "Menu01Icon" width = "1em" height = "1em" />
|
|
11
|
+
</button>
|
|
6
12
|
</div>
|
|
7
13
|
|
|
8
14
|
<Breadcrumbs v-if="breadcrumbs" />
|
|
@@ -16,6 +22,11 @@
|
|
|
16
22
|
</template>
|
|
17
23
|
|
|
18
24
|
<script setup>
|
|
25
|
+
import { HugeiconsIcon } from "@hugeicons/vue";
|
|
26
|
+
import { Menu01Icon } from "@hugeicons/core-free-icons";
|
|
27
|
+
|
|
28
|
+
const emit = defineEmits(["toggleSidebar"]);
|
|
29
|
+
|
|
19
30
|
const props = defineProps({
|
|
20
31
|
breadcrumbs: {
|
|
21
32
|
type: Boolean,
|
|
@@ -27,3 +38,9 @@
|
|
|
27
38
|
},
|
|
28
39
|
});
|
|
29
40
|
</script>
|
|
41
|
+
|
|
42
|
+
<style scoped>
|
|
43
|
+
button {
|
|
44
|
+
color: #bbb;
|
|
45
|
+
}
|
|
46
|
+
</style>
|
|
@@ -170,13 +170,7 @@ li {
|
|
|
170
170
|
align-items: center;
|
|
171
171
|
gap: 0.75rem;
|
|
172
172
|
padding: .75em;
|
|
173
|
-
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.navigation-links a:hover,
|
|
177
|
-
.supplemental-links a:hover {
|
|
178
|
-
background: #f8f9fa;
|
|
179
|
-
color: #007bff;
|
|
173
|
+
border-radius: 0;
|
|
180
174
|
}
|
|
181
175
|
|
|
182
176
|
.icon {
|
|
@@ -196,11 +190,6 @@ li {
|
|
|
196
190
|
color: #f8f9fa;
|
|
197
191
|
}
|
|
198
192
|
|
|
199
|
-
.navigation-links a:hover,
|
|
200
|
-
.supplemental-links a:hover {
|
|
201
|
-
background: #343a40;
|
|
202
|
-
color: #007bff;
|
|
203
|
-
}
|
|
204
193
|
|
|
205
194
|
.supplemental-links {
|
|
206
195
|
border-top: 1px solid #444;
|
|
@@ -209,7 +198,6 @@ li {
|
|
|
209
198
|
|
|
210
199
|
@media (max-width: 768px) {
|
|
211
200
|
.sidebar {
|
|
212
|
-
width: 100%;
|
|
213
201
|
left: -100%;
|
|
214
202
|
}
|
|
215
203
|
|
package/vue/views/App.vue
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<Header username = "Guest" breadcrumbs />
|
|
2
|
+
<Header username = "Guest" breadcrumbs @toggleSidebar="toggleSidebar" />
|
|
3
3
|
<div id = "layout">
|
|
4
4
|
<Sidebar ref = "sidebar" />
|
|
5
5
|
|
|
@@ -21,6 +21,12 @@
|
|
|
21
21
|
|
|
22
22
|
const sidebar = ref(null);
|
|
23
23
|
|
|
24
|
+
function toggleSidebar() {
|
|
25
|
+
if (sidebar.value) {
|
|
26
|
+
sidebar.value.toggle();
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
24
30
|
onMounted(() => {
|
|
25
31
|
sidebar.value.addNavigationLink({
|
|
26
32
|
id: 'welcome',
|