@cloudron/pankow 4.4.3 → 4.4.5

package/components/SettingsItem.vue

@@ -0,0 +1,49 @@
+<script setup>
+</script>
+
+<template>
+  <div class="pankow-settings-item">
+    <div class="pankow-settings-item-body">
+      <slot></slot>
+    </div>
+    <div class="pankow-settings-item-bottom" v-if="$slots.bottom">
+      <slot name="bottom"></slot>
+    </div>
+  </div>
+</template>
+
+<style>
+
+.pankow-settings-item {
+  border-radius: var(--pankow-border-radius);
+  padding: 0;
+  margin-bottom: 20px;
+}
+
+.pankow-settings-item-body {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+}
+
+.pankow-settings-item-body > :first-child {
+  max-width: 720px;
+}
+
+@media (max-width: 576px) {
+  .pankow-settings-item[wrap] .pankow-settings-item-body {
+    flex-wrap: wrap;
+  }
+}
+
+.pankow-settings-item label {
+  margin-top: 0;
+}
+
+.pankow-settings-item-bottom {
+  width: 100%;
+  margin-top: 10px;
+}
+
+</style>

package/components/Switch.vue

@@ -69,6 +69,10 @@ function onChange(event) {
   transition: all 250ms;
 }
 
+.pankow-switch.pankow-switch-disabled span::before {
+  background-color: color-mix(in srgb, var(--pankow-text-color), transparent 60%);
+}
+
 .pankow-switch-input-label {
   margin-left: 8px;
   cursor: pointer;
@@ -87,6 +91,10 @@ input:checked + span::before {
   background-color: white;
 }
 
+.pankow-switch.pankow-switch-disabled > input:checked + span::before {
+  background-color: color-mix(in srgb, white, transparent 60%);
+}
+
 .pankow-switch input {
   display: none;
 }

package/components/VersionCheckBanner.vue

@@ -1,99 +1,80 @@
 <template>
-    <Transition name="pankow-version-banner">
-        <div v-if="mismatch" class="pankow-version-banner">
-            <span>A new version is available.</span>
-            <button class="pankow-version-banner-reload" @click="reload">Reload</button>
-            <button class="pankow-version-banner-close" @click="dismiss" aria-label="Dismiss">&#x2715;</button>
-        </div>
-    </Transition>
+  <Transition name="pankow-version-banner">
+    <div v-if="mismatch" class="pankow-version-banner">
+      <span>A new version is available.</span>
+      <Button plain @click="reload">Reload</Button>
+      <Button plain tool @click="dismiss" aria-label="Dismiss">&#x2715;</Button>
+    </div>
+  </Transition>
 </template>
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
+import Button from './Button.vue';
 
 const mismatch = ref(false);
 
 function setMismatch() {
-    mismatch.value = true;
+  mismatch.value = true;
 }
 
 function reload() {
-    window.location.reload(true);
+  window.location.reload(true);
 }
 
 function dismiss() {
-    mismatch.value = false;
+  mismatch.value = false;
 }
 
 function checkFlag() {
-    if (window.__pankow_version_mismatch) setMismatch();
+  if (window.__pankow_version_mismatch) setMismatch();
 }
 
 onMounted(() => {
-    if (window.__pankow_version_mismatch) setMismatch();
-    window.addEventListener('pankow:version-mismatch', checkFlag);
+  if (window.__pankow_version_mismatch) setMismatch();
+  window.addEventListener('pankow:version-mismatch', checkFlag);
 });
 
 onUnmounted(() => {
-    window.removeEventListener('pankow:version-mismatch', checkFlag);
+  window.removeEventListener('pankow:version-mismatch', checkFlag);
 });
 </script>
 
 <style>
 .pankow-version-banner {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 30002;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 16px;
-    padding: 10px 24px;
-    background: var(--pankow-color-primary);
-    color: white;
-    font-family: var(--pankow-font-family, Inter, sans-serif);
-    font-size: 13px;
-    font-weight: 500;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 30002;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 24px;
+  background: var(--pankow-color-primary);
+  color: white;
+  font-family: var(--pankow-font-family, Inter, sans-serif);
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
-.pankow-version-banner-reload {
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    color: white;
-    padding: 4px 12px;
-    border-radius: var(--pankow-border-radius, 4px);
-    cursor: pointer;
-    font: inherit;
+.pankow-version-banner .pankow-button[plain] {
+  color: white;
 }
 
-.pankow-version-banner-reload:hover {
-    background: rgba(255, 255, 255, 0.3);
-}
-
-.pankow-version-banner-close {
-    background: none;
-    border: none;
-    color: rgba(255, 255, 255, 0.7);
-    cursor: pointer;
-    font-size: 14px;
-    padding: 0 4px;
-    line-height: 1;
-}
-
-.pankow-version-banner-close:hover {
-    color: white;
+.pankow-version-banner .pankow-button[plain]:hover {
+  color: white;
 }
 
 .pankow-version-banner-enter-active,
 .pankow-version-banner-leave-active {
-    transition: transform 0.3s ease;
+  transition: transform 0.3s ease;
 }
 
 .pankow-version-banner-enter-from,
 .pankow-version-banner-leave-to {
-    transform: translateY(-100%);
+  transform: translateY(-100%);
 }
 </style>

package/index.js

@@ -40,6 +40,7 @@ import ProgressBar from './components/ProgressBar.vue';
 import RadioButton from './components/RadioButton.vue';
 import SaveIndicator from './components/SaveIndicator.vue';
 import SectionItem from './components/SectionItem.vue';
+import SettingsItem from './components/SettingsItem.vue';
 import SideBar from './components/SideBar.vue';
 import SplitLayout from './components/SplitLayout.vue';
 import Spinner from './components/Spinner.vue';
@@ -95,6 +96,7 @@ export {
     RadioButton,
     SaveIndicator,
     SectionItem,
+    SettingsItem,
     SideBar,
     SplitLayout,
     Spinner,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.4.3",
+  "version": "4.4.5",
   "description": "Vue 3 UI component library for Cloudron apps",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -48,11 +48,11 @@
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@unhead/vue": "^3.2.3",
+    "@unhead/vue": "^3.3.0",
     "@vitejs/plugin-vue": "^6.0.8",
     "highlight.js": "^11.11.1",
     "typescript": "^7.0.2",
-    "vite": "^8.1.5",
+    "vite": "^8.2.0",
     "vite-ssg": "^28.3.0",
     "vue": "^3.5.40",
     "vue-router": "^5.2.0"

package/types/index.d.ts

@@ -35,6 +35,7 @@ import ProgressBar from './components/ProgressBar.vue';
 import RadioButton from './components/RadioButton.vue';
 import SaveIndicator from './components/SaveIndicator.vue';
 import SectionItem from './components/SectionItem.vue';
+import SettingsItem from './components/SettingsItem.vue';
 import SideBar from './components/SideBar.vue';
 import SplitLayout from './components/SplitLayout.vue';
 import Spinner from './components/Spinner.vue';
@@ -54,7 +55,7 @@ import utils from './utils.js';
 import tooltip from './tooltip.js';
 import fallbackImage from './fallbackImage.js';
 import textOverflow from './text-overflow.js';
-export { BottomBar, BreadCrumb, Button, ButtonGroup, ClipboardAction, ClipboardButton, CheckBox, DateTimeInput, Dialog, DirectoryView, EmailInput, FileUploader, FormGroup, InputGroup, Icon, ListItem, InputDialog, LoginView, MainLayout, MaskedInput, Menu, MenuItem, SingleSelect, MultiSelect, Notification, NumberInput, OfflineBanner, PasswordInput, Popover, ProgressBar, RadioButton, SaveIndicator, SectionItem, SideBar, SplitLayout, Spinner, Switch, TableView, TableViewActionBar, TabView, TagInput, TextInput, TextInputRaw, TopBar, TreeView, fetcher, gestures, tooltip, fallbackImage, textOverflow, utils, };
+export { BottomBar, BreadCrumb, Button, ButtonGroup, ClipboardAction, ClipboardButton, CheckBox, DateTimeInput, Dialog, DirectoryView, EmailInput, FileUploader, FormGroup, InputGroup, Icon, ListItem, InputDialog, LoginView, MainLayout, MaskedInput, Menu, MenuItem, SingleSelect, MultiSelect, Notification, NumberInput, OfflineBanner, PasswordInput, Popover, ProgressBar, RadioButton, SaveIndicator, SectionItem, SettingsItem, SideBar, SplitLayout, Spinner, Switch, TableView, TableViewActionBar, TabView, TagInput, TextInput, TextInputRaw, TopBar, TreeView, fetcher, gestures, tooltip, fallbackImage, textOverflow, utils, };
 export { CheckBox as Checkbox };
 export { RadioButton as Radiobutton };
 export { BreadCrumb as Breadcrumb };

package/vite-plugin.js

@@ -73,7 +73,7 @@ export default function pankowPlugin({ versionCheck = false } = {}) {
         },
         transformIndexHtml(html) {
             if (!versionCheck) return html;
-            buildId = Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
+            if (!buildId) buildId = Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
             return html.replace('</head>', `<meta name="build-id" content="${buildId}">\n${versionCheckScript}\n</head>`);
         },
         closeBundle() {