@cloudron/pankow 4.2.2 → 4.2.3

package/components/MenuItem.vue

@@ -1,7 +1,7 @@
 <script setup>
 
 import { computed } from 'vue';
-import Checkbox from './Checkbox.vue';
+import CheckBox from './CheckBox.vue';
 import Icon from './Icon.vue';
 
 const emit = defineEmits(['activated']);
@@ -43,7 +43,7 @@ function onActivated() {
 
 <template>
   <div class="pankow-menu-item" :class="{'pankow-menu-item-disabled': isDisabled }" @click.stop="onActivated" :separator="item.separator" v-if="isVisible" tabindex="0" @keydown.enter.stop="onActivated" @keydown.space.stop="onActivated">
-    <Checkbox v-model="item.checked" v-if="item.checkbox" style="margin-right: 4px; display: inline-flex;"/>
+    <CheckBox v-model="item.checked" v-if="item.checkbox" style="margin-right: 4px; display: inline-flex;"/>
     <span v-if="!item.separator" :style="{ width: (hasIcons && !item.checkbox) ? '29px' : 0 }"><Icon v-show="hasIcons" :icon="item.icon"/></span>{{ item.label }}
     <div class="pankow-menu-item-separator-line" v-if="item.separator"></div>
   </div>

package/components/MenuItemLink.vue

@@ -1,7 +1,7 @@
 <script setup>
 
 import { computed } from 'vue';
-import Checkbox from './Checkbox.vue';
+import CheckBox from './CheckBox.vue';
 import Icon from './Icon.vue';
 
 const emit = defineEmits(['activated']);

package/components/{Radiobutton.vue → RadioButton.vue}

@@ -7,37 +7,21 @@
   </span>
 </template>
 
-<script>
+<script setup>
 
 import { uuidv4 } from '../utils.js';
 
-export default {
-  name: 'Radiobutton',
-  props: {
-    modelValue: String,
-    value: String,
-    label: String,
-    id: String,
-    name: String,
-    disabled: null
-  },
-  emits: ['update:modelValue'],
-  computed: {
-    internalValue: {
-      get() {
-        return this.modelValue
-      },
-      set(internalValue) {
-        this.$emit('update:modelValue', internalValue)
-      }
-    }
-  },
-  data () {
-    return {
-      internalId: uuidv4()
-    }
-  }
-};
+defineProps({
+  value: String,
+  label: String,
+  id: String,
+  name: String,
+  disabled: null
+});
+
+const internalValue = defineModel({ type: String });
+
+const internalId = uuidv4();
 
 </script>
 

package/components/SectionItem.vue

@@ -0,0 +1,113 @@
+<script setup>
+
+import { useTemplateRef, ref, onMounted, onUnmounted } from 'vue';
+
+const mobileFilterBar = useTemplateRef('mobileFilterBar');
+
+const isMobile = ref(false);
+
+defineProps({
+  title: String,
+});
+
+function checkForMobile() {
+  isMobile.value = window.innerWidth <= 576;
+}
+
+onMounted(() => {
+  checkForMobile();
+  window.addEventListener('resize', checkForMobile);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkForMobile);
+});
+
+</script>
+
+<template>
+  <div class="pankow-section-item">
+    <h2 class="pankow-section-item-header">
+      <div>
+        <div class="pankow-section-item-header-title-text">
+          <slot name="header-title">{{ title }}</slot>
+          <slot name="header-title-extra"></slot>
+        </div>
+      </div>
+      <div>
+        <Teleport :disabled="!isMobile" :to="mobileFilterBar">
+          <slot name="filter-bar"></slot>
+        </Teleport>
+        <slot name="header-buttons"></slot>
+      </div>
+    </h2>
+    <div class="pankow-section-item-mobile-filter-bar" v-show="isMobile && $slots['filter-bar']" ref="mobileFilterBar"></div>
+    <hr class="pankow-section-item-divider"/>
+    <div class="pankow-section-item-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style>
+
+.pankow-section-item {
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.pankow-section-item-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 5px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 5px;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 24px;
+  font-weight: var(--pankow-font-weight-bold);
+}
+
+.pankow-section-item-header > div {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.pankow-section-item-header-title-text {
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+}
+
+.pankow-section-item-divider {
+  border: 0;
+  border-top: 1px solid #d8dee4;
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .pankow-section-item-divider {
+    border-top-color: #495057;
+  }
+}
+
+.pankow-section-item-body {
+  position: relative;
+  margin-bottom: 15px;
+  padding: 10px 15px 25px;
+}
+
+.pankow-section-item-mobile-filter-bar {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin: 10px 15px;
+}
+
+</style>

package/index.js

@@ -7,12 +7,12 @@ import './style.css';
 
 // Order of import matters due to css rule matching!
 import BottomBar from './components/BottomBar.vue';
-import Breadcrumb from './components/Breadcrumb.vue';
+import BreadCrumb from './components/BreadCrumb.vue';
 import Button from './components/Button.vue';
 import ButtonGroup from './components/ButtonGroup.vue';
 import ClipboardAction from './components/ClipboardAction.vue';
 import ClipboardButton from './components/ClipboardButton.vue';
-import Checkbox from './components/Checkbox.vue';
+import CheckBox from './components/CheckBox.vue';
 import DateTimeInput from './components/DateTimeInput.vue';
 import Dialog from './components/Dialog.vue';
 import DirectoryView from './components/DirectoryView.vue';
@@ -34,7 +34,8 @@ import OfflineBanner from './components/OfflineBanner.vue';
 import PasswordInput from './components/PasswordInput.vue';
 import Popover from './components/Popover.vue';
 import ProgressBar from './components/ProgressBar.vue';
-import Radiobutton from './components/Radiobutton.vue';
+import RadioButton from './components/RadioButton.vue';
+import SectionItem from './components/SectionItem.vue';
 import SideBar from './components/SideBar.vue';
 import SplitLayout from './components/SplitLayout.vue';
 import Spinner from './components/Spinner.vue';
@@ -57,12 +58,12 @@ import fallbackImage from './fallbackImage.js';
 
 export {
     BottomBar,
-    Breadcrumb,
+    BreadCrumb,
     Button,
     ButtonGroup,
     ClipboardAction,
     ClipboardButton,
-    Checkbox,
+    CheckBox,
     DateTimeInput,
     Dialog,
     DirectoryView,
@@ -85,7 +86,8 @@ export {
     PasswordInput,
     Popover,
     ProgressBar,
-    Radiobutton,
+    RadioButton,
+    SectionItem,
     SideBar,
     SplitLayout,
     Spinner,
@@ -105,3 +107,7 @@ export {
     fallbackImage,
     utils,
 };
+
+export { CheckBox as Checkbox }; /* deprecated */
+export { RadioButton as Radiobutton }; /* deprecated */
+export { BreadCrumb as Breadcrumb }; /* deprecated */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -33,7 +33,7 @@
     "@vitejs/plugin-vue": "^6.0.7",
     "highlight.js": "^11.11.1",
     "typescript": "^6.0.3",
-    "vite": "^8.1.0",
+    "vite": "^8.1.3",
     "vue": "^3.5.39",
     "vue-router": "^5.1.0"
   }

package/types/index.d.ts

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