@cloudron/pankow 3.1.8 → 3.2.0

package/components/Dialog.vue

@@ -39,6 +39,10 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
+  center: {
+    type: Boolean,
+    default: false
+  },
   confirmLabel: String,
   rejectLabel: String,
   alternateLabel: String,
@@ -95,8 +99,8 @@ defineExpose({ open, close });
       <Transition name="pankow-fade">
         <div class="pankow-dialog-backdrop" @click="onDismiss" v-show="visible" :style="{ 'z-index': zIndex }"></div>
       </Transition>
-      <Transition name="pankow-bounce-center">
-        <div ref="dialog" class="pankow-dialog" @click.stop v-show="visible" @keydown.esc="onDismiss" tabindex="0" :style="{ 'z-index': zIndex+1 }">
+      <Transition name="pankow-bounce-center-top">
+        <div ref="dialog" class="pankow-dialog" :class="{ 'pankow-dialog-center': center }" @click.stop v-show="visible" @keydown.esc="onDismiss" tabindex="0" :style="{ 'z-index': zIndex+1 }">
           <div class="pankow-dialog-header" v-show="title">
             {{ title }}
             <Icon v-show="showX" icon="fa-solid fa-xmark" style="cursor: pointer;" @click="onReject"/>
@@ -133,20 +137,25 @@ defineExpose({ open, close });
   position: absolute;
   background-color: var(--pankow-dialog-background-color);
   min-width: min(95%, 450px);
-  max-height: calc(100% - 20px);
   max-width: calc(100% - 20px);
+  max-height: calc(100% - 40px);
   box-shadow: 0 2px 5px rgba(0,0,0,.1);
   z-index: 2002;
   border-radius: var(--pankow-border-radius);
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  top: 50%;
+  top: 20px;
   left: 50%;
-  transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%);
   outline: none;
 }
 
+.pankow-dialog-center {
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
 .pankow-dialog-header {
   font-size: 20px;
   padding: 15px;
@@ -157,6 +166,7 @@ defineExpose({ open, close });
 .pankow-dialog-body {
   padding: 0 15px;
   overflow: auto;
+  transition: all 250ms;
 }
 
 .pankow-dialog-body-no-header {

package/components/ProgressBar.vue

@@ -11,6 +11,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  slim: {
+    type: Boolean,
+    default: false,
+  },
   mode: String // only really "indeterminate" is supported
 });
 
@@ -25,9 +29,8 @@ const normalizedValue = computed(() => {
 <template>
   <div class="pankow-progress-bar">
     <div class="pankow-progress-bar-label" v-show="showLabel"><slot>{{ value + ' %' }}</slot></div>
-    <div v-show="mode !== 'indeterminate'" class="pankow-progress-bar-filled" :style="{ width: normalizedValue+'%' }">
-    </div>
-    <div v-show="mode === 'indeterminate'" class="pankow-progress-bar-indeterminate" :style="{ 'min-width': '30%' }"></div>
+    <div v-if="mode !== 'indeterminate'" class="pankow-progress-bar-filled" :style="{ width: normalizedValue+'%', height: slim ? '2px' : '6px' }"></div>
+    <div v-else class="pankow-progress-bar-indeterminate" :style="{ height: slim ? '2px' : '6px' }"></div>
   </div>
 </template>
 
@@ -54,22 +57,38 @@ const normalizedValue = computed(() => {
 }
 
 .pankow-progress-bar-indeterminate {
-  background-color: var(--pankow-color-primary);
-  height: 6px;
   width: 100%;
-  background-image: linear-gradient(45deg,rgba(255,255,255,.35) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,transparent 75%,transparent);
-  background-size: 30px 30px;
-  animation: progress-bar-stripes 1s linear infinite;
+  height: 6px;
+  display: inline-block;
+  position: relative;
+  background: rgba(255, 255, 255, 0.15);
+  overflow: hidden;
   border-radius: calc(var(--pankow-border-radius) / 1.5);
 }
 
-@keyframes progress-bar-stripes {
-  from {
-    background-position: 30px 0;
+.pankow-progress-bar-indeterminate::after {
+  content: '';
+  width: 90%;
+  height: 100%;
+  background: var(--pankow-color-primary);
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  animation: pankow-progress-bar-indeterminate-animation 1.5s ease-in-out infinite;
+  border-radius: calc(var(--pankow-border-radius) / 1.5);
+}
+
+@keyframes pankow-progress-bar-indeterminate-animation {
+  0% {
+    left: 0;
+    transform: translateX(-100%);
   }
-  to {
-    background-position: 0 0;
+  100% {
+    left: 100%;
+    transform: translateX(0%);
   }
 }
 
+
 </style>

package/components/TableView.vue

@@ -12,9 +12,9 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-show="busy"><td :colspan="Object.keys(columns).length" style="text-align: center; padding: 20px;"><Spinner class="pankow-spinner-large"/></td></tr>
-          <tr v-show="!busy && sortedItems.length === 0"><td :colspan="Object.keys(columns).length" class="pankow-table-placeholder">{{ placeholder }}</td></tr>
-          <tr v-show="!busy" class="pankow-table-row" :class="{ 'pankow-table-row-with-hover': hover }" v-for="item in sortedItems" @click="onRowClick(item)">
+          <tr v-if="busy"><td :colspan="Object.keys(columns).length" style="text-align: center; padding: 20px;"><ProgressBar mode="indeterminate" :show-label="false" :slim="true"/></td></tr>
+          <tr v-else-if="!busy && sortedItems.length === 0"><td :colspan="Object.keys(columns).length" class="pankow-table-placeholder">{{ placeholder }}</td></tr>
+          <tr v-else class="pankow-table-row" :class="{ 'pankow-table-row-with-hover': hover }" v-for="item in sortedItems" @click="onRowClick(item)">
             <td class="pankow-table-cell" v-for="column in Object.keys(columns)" :style="{ width: typeof columns[column].width === 'string' ? columns[column].width : 'auto' }" :class="{ 'pankow-table-cell-hide-mobile': columns[column].hideMobile }">
               <slot :name="column" v-if="$slots[column]" v-bind="item"/>
               <span v-if="!$slots[column]">{{ (column in item) ? (item[column].label || item[column]) : `TableView Error: item has no property '${column}' nor a template with that name` }}</span>
@@ -28,7 +28,7 @@
 
 <script>
 
-import Spinner from './Spinner.vue';
+import ProgressBar from './ProgressBar.vue';
 import Icon from './Icon.vue';
 
 const SORT_ORDER = {
@@ -41,7 +41,7 @@ export default {
   emits: ['row-click'],
   components: {
     Icon,
-    Spinner,
+    ProgressBar,
   },
   data() {
     return {

package/gallery/Index.vue

@@ -327,7 +327,7 @@
           <MultiSelect v-model="multiselectValueWithSelectAll" :options="multiselectModel" select-all-label="Select All" :search-threshold="2" option-key="id" optionLabel="display"/> {{ multiselectValueWithSelectAll }}
 
           <h2 id="progressbar">Progress</h2>
-          <div style="width: 720px;">
+          <div style="width: 100%; max-width: 720px;">
             <NumberInput v-model="progressValue"/>
             <br/><br/>
             <ProgressBar :value="progressValue" />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.1.8",
+  "version": "3.2.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/style.css

@@ -349,3 +349,22 @@ textarea:focus {
   }
 }
 
+.pankow-bounce-center-top-enter-active {
+  animation: pankow-bounce-center-top-in 0.2s;
+}
+
+.pankow-bounce-center-top-leave-active {
+  animation: pankow-bounce-center-top-in 0.2s reverse;
+}
+
+@keyframes pankow-bounce-center-top-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.9);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+}