@cloudron/pankow 3.1.8

package/gallery/CustomMenuItem.vue

@@ -0,0 +1,40 @@
+<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

@@ -0,0 +1,73 @@
+<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>