picocrank 1.15.0 → 1.16.0

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.
Files changed (6) hide show
  1. package/logo.png +0 -0
  2. package/logo.svg +10 -10
  3. package/package.json +1 -1
  4. package/vue/components/Header.vue +10 -2
  5. package/vue/views/App.vue +9 -2
  6. package/vue/views/Welcome.vue +6 -1
package/logo.png CHANGED
Binary file
package/logo.svg CHANGED
@@ -1,8 +1,8 @@
1
1
  <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
2
  <svg
3
- width="24"
4
- height="24"
5
- viewBox="0 0 24 24"
3
+ width="512"
4
+ height="512"
5
+ viewBox="0 0 512 512"
6
6
  version="1.1"
7
7
  id="svg2"
8
8
  sodipodi:docname="logo.svg"
@@ -25,9 +25,9 @@
25
25
  inkscape:pageopacity="0"
26
26
  inkscape:pagecheckerboard="1"
27
27
  inkscape:deskcolor="#d1d1d1"
28
- inkscape:zoom="22.627417"
29
- inkscape:cx="35.465825"
30
- inkscape:cy="-0.41984466"
28
+ inkscape:zoom="2"
29
+ inkscape:cx="114"
30
+ inkscape:cy="158.25"
31
31
  inkscape:window-width="3840"
32
32
  inkscape:window-height="2126"
33
33
  inkscape:window-x="2160"
@@ -42,12 +42,12 @@
42
42
  stroke-width="1.5"
43
43
  id="g2">
44
44
  <path
45
- d="M21.011 14.097c.522-.141.783-.212.886-.346c.103-.135.103-.351.103-.784v-1.934c0-.433 0-.65-.103-.784s-.364-.205-.886-.345c-1.95-.526-3.171-2.565-2.668-4.503c.139-.533.208-.8.142-.956s-.256-.264-.635-.479l-1.725-.98c-.372-.21-.558-.316-.725-.294s-.356.21-.733.587c-1.459 1.455-3.873 1.455-5.333 0c-.377-.376-.565-.564-.732-.587c-.167-.022-.353.083-.725.295l-1.725.979c-.38.215-.57.323-.635.48c-.066.155.003.422.141.955c.503 1.938-.718 3.977-2.669 4.503c-.522.14-.783.21-.886.345S2 10.6 2 11.033v1.934c0 .433 0 .65.103.784s.364.205.886.346c1.95.526 3.171 2.565 2.668 4.502c-.139.533-.208.8-.142.956s.256.264.635.48l1.725.978c.372.212.558.317.725.295s.356-.21.733-.587c1.46-1.457 3.876-1.457 5.336 0c.377.376.565.564.732.587c.167.022.353-.083.726-.295l1.724-.979c.38-.215.57-.323.635-.48s-.003-.422-.141-.955c-.504-1.937.716-3.976 2.666-4.502"
45
+ d="m 447.76523,291.03986 c 10.92171,-2.97926 16.38257,-4.47944 18.53762,-7.31078 2.15507,-2.85247 2.15507,-7.41641 2.15507,-16.56544 v -40.86426 c 0,-9.14903 0,-13.73411 -2.15507,-16.56545 -2.15505,-2.83134 -7.61591,-4.33152 -18.53762,-7.28964 -40.79956,-11.11407 -66.34635,-54.1969 -55.82216,-95.14567 2.90828,-11.26197 4.35196,-16.903525 2.97105,-20.199705 -1.38091,-3.296193 -5.35624,-5.578171 -13.286,-10.120992 L 345.53621,56.271118 c -7.78328,-4.437171 -11.67494,-6.676887 -15.16906,-6.212043 -3.49411,0.464844 -7.44851,4.437171 -15.33643,12.402959 -30.52643,30.743272 -81.03417,30.743272 -111.58152,0 -7.8879,-7.944653 -11.8214,-11.916978 -15.31552,-12.402959 -3.49411,-0.464844 -7.38576,1.753736 -15.16906,6.233169 l -36.0919,20.685679 c -7.95067,4.542821 -11.92602,6.824799 -13.286,10.142117 -1.38091,3.275055 0.0628,8.91661 2.95012,20.17858 10.52418,40.94877 -15.0226,84.0316 -55.84307,95.14567 -10.92172,2.95812 -16.382581,4.43717 -18.537633,7.28964 -2.155053,2.85246 -2.155053,7.41642 -2.155053,16.56545 v 40.86426 c 0,9.14903 0,13.7341 2.155053,16.56544 2.155052,2.83134 7.615913,4.33152 18.537633,7.31078 40.79955,11.11405 66.34634,54.1969 55.82215,95.12453 -2.90828,11.26197 -4.35195,16.90352 -2.97105,20.19971 1.38091,3.29619 5.35625,5.57816 13.28601,10.1421 l 36.0919,20.66456 c 7.78331,4.47943 11.67494,6.69802 15.16906,6.23317 3.49411,-0.46485 7.44854,-4.43717 15.33644,-12.40295 30.54735,-30.78553 81.09693,-30.78553 111.64428,0 7.88791,7.94466 11.8214,11.91698 15.31552,12.40295 3.49411,0.46485 7.38577,-1.75374 15.18998,-6.23317 l 36.07098,-20.68568 c 7.95069,-4.54282 11.92602,-6.82479 13.28599,-10.14212 1.36,-3.31731 -0.0627,-8.9166 -2.95011,-20.17857 -10.54511,-40.92763 14.98075,-84.01048 55.78031,-95.12453"
46
46
  id="path2"
47
- style="fill:#42b883;fill-opacity:1" />
47
+ style="fill:#42b883;fill-opacity:1;stroke-width:20;stroke-dasharray:none" />
48
48
  <path
49
- d="m 15.63442,11.75922 a 3.5,3.5 0 1 1 -6.9999999,0 3.5,3.5 0 0 1 6.9999999,0"
49
+ d="m 338.03417,247.36355 a 74.66655,74.66655 0 1 1 -149.3331,0 74.66655,74.66655 0 0 1 149.3331,0"
50
50
  id="path1"
51
- style="fill:#35495e;fill-opacity:1" />
51
+ style="fill:#35495e;fill-opacity:1;stroke-width:20;stroke-dasharray:none" />
52
52
  </g>
53
53
  </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "picocrank",
3
- "version": "1.15.0",
3
+ "version": "1.16.0",
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": {
package/vue/components/Header.vue CHANGED
@@ -3,7 +3,7 @@
3
3
  <div
4
4
  :id = "sidebarEnabled ? 'sidebar-button' : null"
5
5
  :class="['image-and-title', 'flex-row', { 'disabled-branding': !showBranding }]"
6
- @click = "sidebarEnabled && emit('toggleSidebar')"
6
+ @click = "onImageAndTitleClick"
7
7
  >
8
8
  <img v-if="showBranding" :src = "logoUrl" alt = "Logo" class = "logo" />
9
9
  <h1 v-if="showBranding">{{ title }}</h1>
@@ -38,7 +38,15 @@
38
38
  import Breadcrumbs from "./Breadcrumbs.vue";
39
39
  import TopBar from "./TopBar.vue";
40
40
 
41
- const emit = defineEmits(["toggleSidebar"]);
41
+ const emit = defineEmits(["toggleSidebar", "logoClick"]);
42
+
43
+ function onImageAndTitleClick() {
44
+ if (props.sidebarEnabled) {
45
+ emit("toggleSidebar");
46
+ } else {
47
+ emit("logoClick");
48
+ }
49
+ }
42
50
 
43
51
  const props = defineProps({
44
52
  breadcrumbs: {
package/vue/views/App.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <Header username = "Guest" @toggleSidebar="toggleSidebar" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled" :navigation="navigation" :topBarEnabled="topBarEnabled" :showBranding="brandingEnabled">
2
+ <Header username = "Guest" @toggleSidebar="toggleSidebar" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled" :navigation="navigation" :topBarEnabled="topBarEnabled" :showBranding="brandingEnabled" :breadcrumbs="breadcrumbsEnabled">
3
3
  <template #toolbar>
4
4
  <QuickSearch
5
5
  v-if="quickSearchEnabled"
@@ -46,6 +46,7 @@
46
46
  const brandingEnabled = ref(true);
47
47
  const quickSearchEnabled = ref(true);
48
48
  const topBarEnabled = ref(false);
49
+ const breadcrumbsEnabled = ref(false);
49
50
 
50
51
  function toggleSidebar() {
51
52
  if (sidebar.value) {
@@ -69,7 +70,11 @@
69
70
  topBarEnabled.value = !topBarEnabled.value;
70
71
  }
71
72
 
72
- // Provide sidebar, QuickSearch, and TopBar state and toggle functions for child components
73
+ function toggleBreadcrumbsEnabled() {
74
+ breadcrumbsEnabled.value = !breadcrumbsEnabled.value;
75
+ }
76
+
77
+ // Provide sidebar, QuickSearch, TopBar, and breadcrumbs state and toggle functions for child components
73
78
  provide('sidebarEnabled', sidebarEnabled);
74
79
  provide('toggleSidebarEnabled', toggleSidebarEnabled);
75
80
  provide('brandingEnabled', brandingEnabled);
@@ -79,6 +84,8 @@
79
84
  provide('toggleQuickSearchEnabled', toggleQuickSearchEnabled);
80
85
  provide('topBarEnabled', topBarEnabled);
81
86
  provide('toggleTopBarEnabled', toggleTopBarEnabled);
87
+ provide('breadcrumbsEnabled', breadcrumbsEnabled);
88
+ provide('toggleBreadcrumbsEnabled', toggleBreadcrumbsEnabled);
82
89
 
83
90
  onMounted(() => {
84
91
  if (navigation.value) {
package/vue/views/Welcome.vue CHANGED
@@ -19,9 +19,12 @@
19
19
  <span>Enable TopBar</span>
20
20
  </label>
21
21
  </div>
22
+ <button type="button" @click="toggleBreadcrumbsEnabled" :class="breadcrumbsEnabled ? 'neutral' : 'good'">
23
+ {{ breadcrumbsEnabled ? 'Hide Breadcrumbs' : 'Show Breadcrumbs' }}
24
+ </button>
22
25
  </template>
23
26
  <p>
24
- Welcome to <strong>PicoCrank</strong>! This is a flexible example application to showcase a modular Vue 3 UI with a focus on ease of navigation, live UI controls, and modern design elements. Use the toolbar above to interactively enable or disable interface features like the sidebar, branding, QuickSearch, and the top navigation bar.
27
+ Welcome to <strong>PicoCrank</strong>! This is a flexible example application to showcase a modular Vue 3 UI with a focus on ease of navigation, live UI controls, and modern design elements. Use the toolbar above to interactively enable or disable interface features like the sidebar, branding, QuickSearch, the top navigation bar, and route breadcrumbs in the header.
25
28
  </p>
26
29
  <p>
27
30
  Explore the sections below to see reusable components in action, including toolbars, buttons, and layout options. PicoCrank is designed to be a starting point for your own rapid Vue projects&mdash;inspect the code and try customizing the UI!
@@ -106,4 +109,6 @@
106
109
  const toggleQuickSearchEnabled = inject('toggleQuickSearchEnabled');
107
110
  const topBarEnabled = inject('topBarEnabled');
108
111
  const toggleTopBarEnabled = inject('toggleTopBarEnabled');
112
+ const breadcrumbsEnabled = inject('breadcrumbsEnabled');
113
+ const toggleBreadcrumbsEnabled = inject('toggleBreadcrumbsEnabled');
109
114
  </script>