@cloudron/pankow 3.5.4 → 3.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
|
|
3
|
+
import { computed } from 'vue';
|
|
4
|
+
|
|
5
|
+
const props = defineProps({
|
|
6
|
+
values: Array,
|
|
7
|
+
});
|
|
8
|
+
|
|
9
|
+
// const normalizedValue = computed(() => {
|
|
10
|
+
// if (props.value < 0) return 0;
|
|
11
|
+
// if (props.value > 100) return 100;
|
|
12
|
+
// return props.value;
|
|
13
|
+
// });
|
|
14
|
+
|
|
15
|
+
// we want 100 to be the circumverence so we can neatly use percentage: radius = 100 / ( 3,14159 * 2 ) = 15,9155
|
|
16
|
+
const radius = 15.9155;
|
|
17
|
+
const stroke = 10;
|
|
18
|
+
|
|
19
|
+
function calculateViewbox() {
|
|
20
|
+
return `0 0 ${radius*2+stroke} ${radius*2+stroke}`;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function calculateArcPath() {
|
|
24
|
+
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}`;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<template>
|
|
30
|
+
<div class="pankow-circle-chart">
|
|
31
|
+
<svg :viewBox="calculateViewbox()" xmlns="http://www.w3.org/2000/svg">
|
|
32
|
+
<path :d="calculateArcPath()" fill="none" stroke="red" :stroke-width="stroke" stroke-dasharray="75, 100" @click.stop="onClick('red')" />
|
|
33
|
+
<path :d="calculateArcPath()" fill="none" stroke="green" :stroke-width="stroke" stroke-dasharray="30, 100" @click.stop="onClick('green') "/>
|
|
34
|
+
</svg>
|
|
35
|
+
</div>
|
|
36
|
+
</template>
|
|
37
|
+
|
|
38
|
+
<style>
|
|
39
|
+
|
|
40
|
+
</style>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<span class="pankow-radio">
|
|
3
|
-
<input :name="name" :id="id || internalId" class="pankow-radio-input" type="radio" v-model="internalValue" :value="value" :disabled="disabled"/>
|
|
3
|
+
<input :name="name" :id="id || internalId" class="pankow-radio-input" type="radio" v-model="internalValue" :value="value" :disabled="disabled" :required="$attrs['required']"/>
|
|
4
4
|
<slot>
|
|
5
5
|
<label :for="id || internalId" class="pankow-radio-input-label">{{ label }}</label>
|
|
6
6
|
</slot>
|
|
@@ -74,6 +74,7 @@ const menuModel = computed(() => {
|
|
|
74
74
|
});
|
|
75
75
|
});
|
|
76
76
|
|
|
77
|
+
const nativeSelect = useTemplateRef('nativeSelect');
|
|
77
78
|
function selectIndex(index) {
|
|
78
79
|
const item = props.options[index];
|
|
79
80
|
|
|
@@ -84,6 +85,11 @@ function selectIndex(index) {
|
|
|
84
85
|
|
|
85
86
|
model.value = newValue;
|
|
86
87
|
emits('select', newValue);
|
|
88
|
+
|
|
89
|
+
// let the browser know about the changes
|
|
90
|
+
nativeSelect.value.value = newValue;
|
|
91
|
+
nativeSelect.value.dispatchEvent(new Event('input', { bubbles: true }));
|
|
92
|
+
nativeSelect.value.dispatchEvent(new Event('change', { bubbles: true }));
|
|
87
93
|
}
|
|
88
94
|
|
|
89
95
|
function onMenuClosed() {
|
|
@@ -163,7 +169,7 @@ onMounted(() => {
|
|
|
163
169
|
<template>
|
|
164
170
|
<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)">
|
|
165
171
|
<!-- native select for required and accessibility handling -->
|
|
166
|
-
<select v-model="selectedKey" :required="$attrs['required']" style="display: none">
|
|
172
|
+
<select v-model="selectedKey" ref="nativeSelect" :required="$attrs['required']" style="display: none">
|
|
167
173
|
<option value=""></option>
|
|
168
174
|
<option v-for="item in options" :value="optionKey ? item[optionKey] : item">{{ item[optionLabel] }}</option>
|
|
169
175
|
</select>
|