deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Переход на Vue 3, в процессе

Browse Source
This commit is contained in:
Book Pauk
2021-10-28 16:55:44 +07:00
parent a1d7a73459
commit 88d75fb0d8
16 changed files with 177 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
client/components/share/Dialog.vue
View File

@@ -25,26 +25,23 @@
<script>
//-----------------------------------------------------------------------------
import Vue from 'vue';
import Component from 'vue-class-component';
import vueComponent from '../vueComponent.js';
const DialogProps = Vue.extend({
props: {
value: Boolean,
}
});
class Dialog {
_props = {
modelValue: Boolean,
};
export default @Component({
})
class Dialog extends DialogProps {
get active() {
return this.value;
return this.modelValue;
}
set active(value) {
this.$emit('input', value);
this.$emit('update:modelValue', value);
}
}
export default vueComponent(Dialog);
//-----------------------------------------------------------------------------
</script>

73
client/components/share/NumInput.vue
View File

@@ -1,17 +1,19 @@
<template>
<q-input outlined dense
<q-input
v-model="filteredValue"
outlined dense
input-style="text-align: center"
class="no-mp"
:class="(error ? 'error' : '')"
:disable="disable"
>
<slot></slot>
<template v-slot:prepend>
<q-icon :class="(validate(value - step) ? '' : 'disable')"
<template #prepend>
<q-icon
v-ripple="validate(value - step)"
:class="(validate(value - step) ? '' : 'disable')"
name="la la-minus-circle"
class="button"
v-ripple="validate(value - step)"
@click="minus"
@mousedown.prevent.stop="onMouseDown($event, 'minus')"
@mouseup.prevent.stop="onMouseUp"
@@ -21,11 +23,12 @@
@touchcancel.prevent.stop="onTouchEnd"
/>
</template>
<template v-slot:append>
<q-icon :class="(validate(value + step) ? '' : 'disable')"
<template #append>
<q-icon
v-ripple="validate(value + step)"
:class="(validate(value + step) ? '' : 'disable')"
name="la la-plus-circle"
class="button"
v-ripple="validate(value + step)"
@click="plus"
@mousedown.prevent.stop="onMouseDown($event, 'plus')"
@mouseup.prevent.stop="onMouseUp"
@@ -40,43 +43,41 @@
<script>
//-----------------------------------------------------------------------------
import Vue from 'vue';
import Component from 'vue-class-component';
import vueComponent from '../vueComponent.js';
import * as utils from '../../share/utils';
const NumInputProps = Vue.extend({
props: {
value: Number,
const componentOptions = {
watch: {
filteredValue: function(newValue) {
if (this.validate(newValue)) {
this.error = false;
this.$emit('update:modelValue', this.string2number(newValue));
} else {
this.error = true;
}
},
modelValue: function(newValue) {
this.filteredValue = newValue;
},
}
};
class NumInput {
_options = componentOptions;
_props = {
modelValue: Number,
min: { type: Number, default: -Number.MAX_VALUE },
max: { type: Number, default: Number.MAX_VALUE },
step: { type: Number, default: 1 },
digits: { type: Number, default: 0 },
disable: Boolean
}
});
};
export default @Component({
watch: {
filteredValue: function(newValue) {
if (this.validate(newValue)) {
this.error = false;
this.$emit('input', this.string2number(newValue));
} else {
this.error = true;
}
},
value: function(newValue) {
this.filteredValue = newValue;
},
}
})
class NumInput extends NumInputProps {
filteredValue = 0;
error = false;
created() {
this.filteredValue = this.value;
this.filteredValue = this.modelValue;
}
string2number(value) {
@@ -95,13 +96,13 @@ class NumInput extends NumInputProps {
}
plus() {
const newValue = this.value + this.step;
const newValue = this.modelValue + this.step;
if (this.validate(newValue))
this.filteredValue = newValue;
}
minus() {
const newValue = this.value - this.step;
const newValue = this.modelValue - this.step;
if (this.validate(newValue))
this.filteredValue = newValue;
}
@@ -136,7 +137,7 @@ class NumInput extends NumInputProps {
}
onTouchStart(event, way) {
if (!this.$isMobileDevice)
if (!this.$root.isMobileDevice)
return;
if (event.touches.length == 1) {
this.inTouch = true;
@@ -145,12 +146,14 @@ class NumInput extends NumInputProps {
}
onTouchEnd() {
if (!this.$isMobileDevice)
if (!this.$root.isMobileDevice)
return;
this.inTouch = false;
this.onMouseUp();
}
}
export default vueComponent(NumInput);
//-----------------------------------------------------------------------------
</script>

34
client/components/share/Window.vue
View File

@@ -2,11 +2,17 @@
<div ref="main" class="main xyfit absolute" @click="close" @mouseup="onMouseUp" @mousemove="onMouseMove">
<div ref="windowBox" class="xyfit absolute flex no-wrap" @click.stop>
<div ref="window" class="window flexfit column no-wrap">
<div ref="header" class="header row justify-end" @mousedown.prevent.stop="onMouseDown"
@touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchmove.stop="onTouchMove">
<div
ref="header"
class="header row justify-end"
@mousedown.prevent.stop="onMouseDown"
@touchstart.stop="onTouchStart"
@touchend.stop="onTouchEnd"
@touchmove.stop="onTouchMove"
>
<span class="header-text col"><slot name="header"></slot></span>
<slot name="buttons"></slot>
<span class="close-button row justify-center items-center" @mousedown.stop @click="close"><q-icon name="la la-times" size="16px"/></span>
<span class="close-button row justify-center items-center" @mousedown.stop @click="close"><q-icon name="la la-times" size="16px" /></span>
</div>
<slot></slot>
@@ -17,19 +23,17 @@
<script>
//-----------------------------------------------------------------------------
import Vue from 'vue';
import Component from 'vue-class-component';
import vueComponent from '../vueComponent.js';
export default @Component({
props: {
class Window {
_props = {
height: { type: String, default: '100%' },
width: { type: String, default: '100%' },
maxWidth: { type: String, default: '' },
topShift: { type: Number, default: 0 },
margin: '',
}
})
class Window extends Vue {
};
init() {
this.$nextTick(() => {
this.$refs.main.style.top = 0;
@@ -51,7 +55,7 @@ class Window extends Vue {
}
onMouseDown(event) {
if (this.$isMobileDevice)
if (this.$root.isMobileDevice)
return;
if (event.button == 0) {
this.$refs.header.style.cursor = 'move';
@@ -81,7 +85,7 @@ class Window extends Vue {
}
onTouchStart(event) {
if (!this.$isMobileDevice)
if (!this.$root.isMobileDevice)
return;
if (event.touches.length == 1) {
const touch = event.touches[0];
@@ -93,7 +97,7 @@ class Window extends Vue {
}
onTouchMove(event) {
if (!this.$isMobileDevice)
if (!this.$root.isMobileDevice)
return;
if (event.touches.length == 1 && this.moving) {
const touch = event.touches[0];
@@ -108,7 +112,7 @@ class Window extends Vue {
}
onTouchEnd() {
if (!this.$isMobileDevice)
if (!this.$root.isMobileDevice)
return;
this.$refs.header.style.cursor = 'default';
this.moving = false;
@@ -120,6 +124,8 @@ class Window extends Vue {
this.$emit('close');
}
}
export default vueComponent(Window);
//-----------------------------------------------------------------------------
</script>