@cloudron/pankow 3.2.12 → 3.2.13

package/components/Button.vue

@@ -65,7 +65,9 @@ function onClick(event) {
   padding: var(--pankow-input-vertial-padding) max(12px, var(--pankow-input-horizontal-padding));
   border-radius: var(--pankow-border-radius);
   text-decoration: none;
-  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  display: inline-flex;
   cursor: pointer;
   border: 1px solid transparent;
   transition: background 250ms, border-color 250ms;

package/components/ButtonGroup.vue

@@ -10,7 +10,7 @@
 <style>
 
 .pankow-button-group {
-  display: inline-block;
+  display: inline-flex;
   white-space: nowrap;
 }
 

package/components/Spinner.vue

@@ -2,65 +2,37 @@
 </script>
 
 <template>
-  <div class="pankow-spinner">
-    <div class="pankow-spinner-inner"></div>
-  </div>
+  <div class="pankow-spinner"></div>
 </template>
 
 <style>
 
 .pankow-spinner {
-  display: inline-block;
-  position: relative;
   width: 1em;
   height: 1em;
-}
-
-.pankow-spinner.pankow-button-icon-with-text {
-  margin-right: 6px;
-}
-
-.pankow-spinner-inner {
-  position: absolute;
-  top: 1px;
-  left: 0px;
-  display: inline-block;
-  vertical-align: middle;
-  width: 14px;
-  height: 14px;
   border: 1.5px solid rgba(255,255,255,.2);
   border-radius: 50%;
   border-top-color: var(--pankow-text-color);
   border-right-color: var(--pankow-text-color);
-  animation: pankow-spinner-animation 0.8s linear infinite;
+  animation: spin 0.8s linear infinite;
+  display: inline-flex;
+  margin: 0;
 }
 
-.pankow-button:not([plain]) .pankow-spinner-inner,
-.pankow-button[plain]:hover .pankow-spinner-inner {
+.pankow-button:not([plain]):not([outline]) .pankow-spinner,
+.pankow-button[plain]:hover .pankow-spinner,
+.pankow-button[outline]:hover .pankow-spinner {
   border-top-color: white;
   border-right-color: white;
 }
 
 .pankow-spinner-large {
-  width: 48px;
-  height: 48px;
+  font-size: 40px;
 }
 
-.pankow-spinner-large .pankow-spinner-inner {
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  width: 40px;
-  height: 40px;
-  border-width: 2px;
-}
-
-@keyframes pankow-spinner-animation {
-  0% {
-    transform: rotateZ(0deg);
-  }
-  100% {
-    transform: rotateZ(360deg)
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
   }
 }
 

package/components/TextInput.vue

@@ -28,6 +28,7 @@ const props = defineProps({
   border-width: 1px;
   border-color: var(--pankow-input-border-color);
   transition: border-color 250ms;
+  width: 100%;
 }
 
 .pankow-form-group.has-error .pankow-text-input,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.2.12",
+  "version": "3.2.13",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",

package/components/CircleChart.vue

@@ -1,40 +0,0 @@
-<script setup>
-
-import { computed } from 'vue';
-
-const props = defineProps({
-  values: Array,
-});
-
-// const normalizedValue = computed(() => {
-//   if (props.value < 0) return 0;
-//   if (props.value > 100) return 100;
-//   return props.value;
-// });
-
-// we want 100 to be the circumverence so we can neatly use percentage: radius = 100 / ( 3,14159 * 2 ) = 15,9155
-const radius = 15.9155;
-const stroke = 10;
-
-function calculateViewbox() {
-  return `0 0 ${radius*2+stroke} ${radius*2+stroke}`;
-}
-
-function calculateArcPath() {
-  return `M${radius+stroke/2} ${stroke/2} a ${radius} ${radius} 0 0 1 0 ${radius*2} a ${radius} ${radius} 0 0 1 0 -${radius*2}`;
-}
-
-</script>
-
-<template>
-  <div class="pankow-circle-chart">
-    <svg :viewBox="calculateViewbox()" xmlns="http://www.w3.org/2000/svg">
-      <path :d="calculateArcPath()" fill="none" stroke="red" :stroke-width="stroke" stroke-dasharray="75, 100" @click.stop="onClick('red')" />
-      <path :d="calculateArcPath()" fill="none" stroke="green" :stroke-width="stroke" stroke-dasharray="30, 100" @click.stop="onClick('green') "/>
-    </svg>
-  </div>
-</template>
-
-<style>
-
-</style>