@cloudron/pankow 3.2.5 → 3.2.7

package/components/Dialog.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, useTemplateRef, nextTick } from 'vue';
+import { ref, useTemplateRef, nextTick, computed } from 'vue';
 import Button from './Button.vue';
 import Icon from './Icon.vue';
 
@@ -35,6 +35,14 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
+  rejectBusy: {
+    type: Boolean,
+    default: false
+  },
+  rejectActive: {
+    type: Boolean,
+    default: true
+  },
   center: {
     type: Boolean,
     default: false
@@ -42,8 +50,15 @@ const props = defineProps({
   confirmLabel: String,
   rejectLabel: String,
   alternateLabel: String,
+  style: '',
 });
 
+const mergedStyle = computed(() => {
+  if (typeof props.style === 'object') return { 'z-index': props.zIndex+1, ...props.style };
+  if (typeof props.style === 'string') return props.style = `${props.style}; zIndex: ${props.zIndex+1}`;
+  return `zIndex: ${props.zIndex+1}`
+})
+
 const visible = ref(false);
 const dialog = useTemplateRef('dialog');
 const dialogBody = useTemplateRef('dialogBody');
@@ -94,7 +109,7 @@ defineExpose({ open, close });
         <div class="pankow-dialog-backdrop" @click="onDismiss" v-show="visible" :style="{ 'z-index': zIndex }"></div>
       </Transition>
       <Transition name="pankow-bounce-center-top">
-        <div ref="dialog" class="pankow-dialog"  v-bind="$attrs" :class="{ 'pankow-dialog-center': center }" @click.stop v-show="visible" @keydown.esc="onDismiss" tabindex="0" :style="{ 'z-index': zIndex+1 }">
+        <div ref="dialog" class="pankow-dialog"  v-bind="$attrs" :class="{ 'pankow-dialog-center': center }" @click.stop v-show="visible" @keydown.esc="onDismiss" tabindex="0" :style="mergedStyle">
           <div class="pankow-dialog-header" v-show="title">
             {{ title }}
             <Icon v-show="showX" icon="fa-solid fa-xmark" style="cursor: pointer;" @click="onReject"/>

package/components/Menu.vue

@@ -92,21 +92,41 @@ const visibleItems = computed(() => {
   return props.model.filter((item) => item.label.toLowerCase().indexOf(s) !== -1);
 });
 
+// select menu item by .label
+function select(elem) {
+  let next = container.value.children[0];
+  while (true) {
+    if (!next) return;
+
+    if (next.innerText !== elem.label) {
+      next = next.nextElementSibling;
+      continue;
+    }
+
+    next.focus();
+    break;
+  }
+}
+
+let search = '';
+let debounceTimer = null;
 function onKeyDown(event) {
+  // only handle alphanumerics
+  if (!/^[a-zA-Z0-9]$/.test(event.key)) return;
+
   const key = event.key.toLowerCase();
-  const target = itemElements.value.find(elem => {
-    if (elem.separator) return false;
-    if (elem.isDisabled) return false;
-    if (!elem.isVisible) return false;
-
-    // if we have a html item, use the innerText instead of label
-    if (elem.item.label) return elem.item.label.toLowerCase().indexOf(key) === 0;
-    else return elem.$el.innerText.toLowerCase().indexOf(key) === 0;
-  });
 
-  if (!target) return;
+  if (debounceTimer) clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => search = '', 500);
+
+  search += key;
+
+  const found = visibleItems.value.find(elem => {
+    if (!elem.label) return false;
+    return elem.label.toLowerCase().indexOf(search) === 0;
+  });
 
-  target.$el.focus();
+  if (found) select(found)
 }
 
 function onItemActivated(item) {

package/components/ProgressBar.vue

@@ -45,7 +45,6 @@ const normalizedValue = computed(() => {
 .pankow-progress-bar {
   position: relative;
   font-weight: 700;
-  min-height: 12px;
   user-select: none;
   border-radius: var(--pankow-border-radius);
   display: block;
@@ -56,11 +55,13 @@ const normalizedValue = computed(() => {
 }
 
 .pankow-progress-bar-filled {
+  position: relative;
   background-color: var(--pankow-color-primary);
   transition: width 250ms;
   white-space: nowrap;
   border-radius: calc(var(--pankow-border-radius) / 1.5);
   height: 6px;
+  overflow: hidden;
 }
 
 .pankow-progress-bar-glow {
@@ -69,20 +70,18 @@ const normalizedValue = computed(() => {
   display: inline-block;
   position: absolute;
   overflow: hidden;
-  border-radius: var(--pankow-border-radius);
 }
 
 .pankow-progress-bar-glow::after {
   content: '';
-  width: 30%;
+  width: max(100px, 30%);
   height: 100%;
-  background: linear-gradient(to right, transparent, rgba(255,255,255,0.7));
+  background: linear-gradient(to right, transparent, rgba(255,255,255,0.7), transparent 90%);
   position: absolute;
   top: 0;
   left: 0;
   box-sizing: border-box;
   animation: pankow-progress-bar-indeterminate-animation 1.5s ease-in-out infinite;
-  border-radius: var(--pankow-border-radius);
 }
 
 .pankow-progress-bar-indeterminate {

package/components/SingleSelect.vue

@@ -123,6 +123,29 @@ function onSelectPrev() {
   selectIndex(index <= 0 ? props.options.length-1 : index-1);
 }
 
+let search = '';
+let debounceTimer = null;
+function onKeyDown(event) {
+  if (props.disabled) return;
+
+  // only handle alphanumerics
+  if (!/^[a-zA-Z0-9]$/.test(event.key)) return;
+
+  const key = event.key.toLowerCase();
+
+  if (debounceTimer) clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => search = '', 500);
+
+  search += key;
+
+  const found = menuModel.value.findIndex(i => {
+    if (i.label && i.label.toLowerCase().indexOf(search) === 0) return true;
+    return false;
+  });
+
+  if (found !== -1) selectIndex(found);
+}
+
 onMounted(() => {
   if (props.optionKey) {
     selectedKey.value = model.value;
@@ -135,7 +158,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="pankow-singleselect" :class="{ 'pankow-singleselect-disabled': disabled }" ref="elem" tabindex="0" @click="onClick" @keydown.enter="onOpen" @keydown.down.stop.prevent="onSelectNext" @keydown.up.stop.prevent="onSelectPrev" @keydown.esc.stop="onClose">
+  <div class="pankow-singleselect" :class="{ 'pankow-singleselect-disabled': disabled }" ref="elem" tabindex="0" @click="onClick" @keydown.enter="onOpen" @keydown.down.stop.prevent="onSelectNext" @keydown.up.stop.prevent="onSelectPrev" @keydown.esc.stop="onClose" @keydown.stop="onKeyDown($event)">
     <Menu ref="menu" :model="menuModel" :search-threshold="searchThreshold" :close-on-activation="true" @close="onMenuClosed"></Menu>
     {{ selected ? selected[optionLabel] : placeholder }}
     <Icon icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.2.5",
+  "version": "3.2.7",
   "description": "",
   "main": "index.js",
+  "types": "types/index.d.ts",
+  "files": ["*.js", "components", "viewers", "types"],
   "scripts": {
     "gallery": "cd gallery && vite",
-    "build": "cd gallery && vite build"
+    "build": "cd gallery && vite build",
+    "types": "tsc --allowJs --emitDeclarationOnly --declaration index.js --outDir types --skipLibCheck",
+    "prepack": "npm run types"
   },
   "type": "module",
   "author": "",
@@ -19,7 +23,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
-    "vite": "^7.0.6",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.1",
     "vue": "^3.5.18"
   }
 }

package/types/fallbackImage.d.ts

@@ -0,0 +1,5 @@
+export default fallbackImage;
+declare namespace fallbackImage {
+    export { mounted };
+}
+declare function mounted(el: any, binding: any, vnode: any): void;

package/types/fetcher.d.ts

@@ -0,0 +1,35 @@
+declare namespace _default {
+    export { globalOptions };
+    export { head };
+    export { get };
+    export { post };
+    export { put };
+    export { del };
+    export { del as delete };
+}
+export default _default;
+declare namespace globalOptions {
+    let credentials: string;
+    let redirect: string;
+    let errorHook: any;
+}
+declare function head(uri: any, query?: {}, options?: {}): Promise<{
+    status: number;
+    body: any;
+}>;
+declare function get(uri: any, query?: {}, options?: {}): Promise<{
+    status: number;
+    body: any;
+}>;
+declare function post(uri: any, body: any, query?: {}, options?: {}): Promise<{
+    status: number;
+    body: any;
+}>;
+declare function put(uri: any, body: any, query?: {}, options?: {}): Promise<{
+    status: number;
+    body: any;
+}>;
+declare function del(uri: any, body: any, query?: {}, options?: {}): Promise<{
+    status: number;
+    body: any;
+}>;

package/types/gestures.d.ts

@@ -0,0 +1,5 @@
+declare namespace _default {
+    export { onSwipe };
+}
+export default _default;
+export function onSwipe(elem: any, callback: any, threshold?: number): void;

package/types/index.d.ts

@@ -0,0 +1,6 @@
+import fetcher from './fetcher.js';
+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, Checkbox, Dialog, DirectoryView, EmailInput, FileUploader, FormGroup, InputGroup, Icon, InputDialog, MainLayout, Menu, MenuItem, SingleSelect, MultiSelect, Notification, NumberInput, OfflineBanner, PasswordInput, Popover, ProgressBar, Radiobutton, SideBar, Spinner, Switch, TableView, TabView, TagInput, TextInput, TextInputRaw, TopBar, fetcher, gestures, tooltip, fallbackImage, utils };

package/types/tooltip.d.ts

@@ -0,0 +1,9 @@
+export default tooltip;
+declare namespace tooltip {
+    export { mounted };
+    export { updated };
+    export { beforeUnmount };
+}
+declare function mounted(el: any, binding: any, vnode: any): void;
+declare function updated(el: any, binding: any, vnode: any): void;
+declare function beforeUnmount(el: any, binding: any, vnode: any): void;

package/types/utils.d.ts

@@ -0,0 +1,57 @@
+declare namespace _default {
+    export { getFileTypeGroup };
+    export { translation };
+    export { useDebouncedRef };
+    export { isValidDomain };
+    export { isValidDomainOrURL };
+    export { isValidEmail };
+    export { prettyBinarySize };
+    export { prettyDecimalSize };
+    export { prettyDate };
+    export { prettyShortDate };
+    export { prettyLongDate };
+    export { prettyFileSize };
+    export { prettyEmailAddresses };
+    export { sanitize };
+    export { pathJoin };
+    export { download };
+    export { getExtension };
+    export { copyToClipboard };
+    export { urlSearchQuery };
+    export { parseResourcePath };
+    export { getEntryIdentifier };
+    export { entryListSort };
+    export { sleep };
+    export { uuidv4 };
+}
+export default _default;
+export function getFileTypeGroup(item: any): any;
+export function translation(id: any): any;
+export function useDebouncedRef(value: any, delay?: number): import("vue").Ref<any, any>;
+export function isValidDomain(domain: any): boolean;
+export function isValidDomainOrURL(domain: any): boolean;
+export function isValidEmail(email: any): boolean;
+export function prettyBinarySize(size: any, fallback: any): any;
+export function prettyDecimalSize(size: any, fallback: any): any;
+export function prettyDate(value: any): any;
+export function prettyShortDate(value: any): string;
+export function prettyLongDate(value: any): string;
+export function prettyFileSize(value: any): string;
+export function prettyEmailAddresses(addresses: any): any;
+export function sanitize(path: any): any;
+export function pathJoin(...args: any[]): any;
+export function download(entries: any, name: any): void;
+export function getExtension(entry: any): any;
+export function copyToClipboard(value: any): void;
+export function urlSearchQuery(): {};
+export function parseResourcePath(resourcePath: any): {
+    type: string;
+    path: string;
+    shareId: string;
+    apiPath: string;
+    resourcePath: string;
+};
+export function getEntryIdentifier(entry: any): string;
+export function entryListSort(list: any, prop: any, desc: any): any;
+export function sleep(ms: any): any;
+export function uuidv4(): string;

package/.gitlab-ci.yml

@@ -1,30 +0,0 @@
-# jobs (defined using a top level key) belong to a stage. the jobs of a stage are run in parallel.
-# stages are run in sequence.
-# artifacts are attached to the jobs on success (downloadable from UI)
-# cache is preserved between pipelines (and not meant for jobs)
-
-default:
-  image: cloudron/base:5.0.0@sha256:04fd70dbd8ad6149c19de39e35718e024417c3e01dc9c6637eaf4a41ec4e596c
-
-variables:
-  DEMO_SERVER: pankow.nebulon.de
-
-build-gallery:
-  stage: build
-  script:
-    - npm install && npm run build
-  artifacts:
-    paths:
-      - gallery/dist/
-    expire_in: 2 hours
-
-deploy-gallery:
-  stage: deploy
-  script:
-    - npm install -g cloudron-surfer && surfer put --server ${DEMO_SERVER} --token ${PANKOW_DEMO_SURFER_TOKEN} --delete gallery/dist/* /
-  only:
-    - main
-
-stages:
-  - build
-  - deploy

package/.jshintrc

@@ -1,8 +0,0 @@
-{
-	"node": true,
-	"browser": true,
-	"unused": true,
-	"esversion": 11,
-	"globalstrict": false,
-	"predef": [ "angular", "$", "describe", "it", "before", "after" ]
-}

package/gallery/CustomMenuItem.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="pankow-menu-item" @click.stop="onActivated">
-    <h1>Large Item</h1>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'CustomMenuItem',
-  emits: ['activated'],
-  components: {
-  },
-  props: {
-    item: {
-      type: Object,
-      default: {
-        action: null
-      }
-    }
-  },
-  computed: {
-    isVisible() {
-      if (typeof this.item.visible === 'function') return this.item.visible();
-      return typeof this.item.visible !== 'undefined' ? this.item.visible : true;
-    },
-    isDisabled() {
-      if (typeof this.item.disabled === 'function') return this.item.disabled();
-      return typeof this.item.disabled !== 'undefined' ? this.item.disabled : false;
-    }
-  },
-  methods: {
-    onActivated() {
-      if (this.isDisabled) return;
-      this.$emit('activated');
-    }
-  }
-};
-
-</script>

package/gallery/DirectoryViewDemo.vue

@@ -1,73 +0,0 @@
-<template>
-  <div>
-    <h2>Directory View</h2>
-    <div class="demo-container">
-      <DirectoryView
-        :items="items"
-        :show-size="true"
-        :show-owner="true"
-        :show-modified="true"
-        :show-extract="false"
-        show-share="isShared"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-
-import DirectoryView from '../components/DirectoryView.vue';
-
-import fileIconUrl from './logo.png';
-import folderIconUrl from './folder.svg';
-
-export default {
-  name: 'DirectoryViewDemo',
-  components: {
-    DirectoryView
-  },
-  data() {
-    return {
-      items: []
-    };
-  },
-  mounted() {
-    for (let i = 0; i < 100; ++i) {
-      const isDirectory = i % 2;
-
-      this.items.push({
-        id: `id-${i}`,
-        name: `Test File ${i}`,
-        icon: isDirectory ? folderIconUrl : fileIconUrl,
-        previewUrl: '',
-
-        // optional
-        isDirectory: isDirectory,
-        modified: new Date(),
-        owner: 'admin',
-        size: 10241024,
-        isShared: !(i % 4),
-        href: '',
-        target: !(i % 5) ? '../symlink/target' : '',
-
-        // TODO maybe better handle type/isDirectory/isFile/isBinary/symlink...
-        // type: i % 2 ? 'directory' : 'file',
-        // isBinary: false,
-      });
-    }
-  }
-};
-
-</script>
-
-<style scoped>
-
-.demo-container {
-  border-color: var(--pankow-color-background);
-  border-style: solid;
-  border-width: 2px;
-  border-radius: var(--pankow-border-radius);
-  height: 300px;
-}
-
-</style>