From eff9cdd8a7d51a4562264d83f5b0340f22be0d23 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 6 Sep 2022 17:37:58 +0900
Subject: [PATCH] refactor(client): use setup syntax
---
packages/client/src/components/ui/button.vue | 171 ++++++++-----------
packages/client/src/pages/welcome.setup.vue | 57 +++----
packages/client/src/ui/deck/column-core.vue | 10 --
packages/client/src/ui/deck/list-column.vue | 14 --
4 files changed, 89 insertions(+), 163 deletions(-)
diff --git a/packages/client/src/components/ui/button.vue b/packages/client/src/components/ui/button.vue
index 350629bf08..a052f8f7a9 100644
--- a/packages/client/src/components/ui/button.vue
+++ b/packages/client/src/components/ui/button.vue
@@ -3,7 +3,7 @@
v-if="!link" class="bghgjjyj _button"
:class="{ inline, primary, gradate, danger, rounded, full }"
:type="type"
- @click="$emit('click', $event)"
+ @click="emit('click', $event)"
@mousedown="onMousedown"
>
<div ref="ripples" class="ripples"></div>
@@ -24,114 +24,77 @@
</MkA>
</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { nextTick, onMounted } from 'vue';
-export default defineComponent({
- props: {
- type: {
- type: String,
- required: false,
- },
- primary: {
- type: Boolean,
- required: false,
- default: false,
- },
- gradate: {
- type: Boolean,
- required: false,
- default: false,
- },
- rounded: {
- type: Boolean,
- required: false,
- default: true,
- },
- inline: {
- type: Boolean,
- required: false,
- default: false,
- },
- link: {
- type: Boolean,
- required: false,
- default: false,
- },
- to: {
- type: String,
- required: false,
- },
- autofocus: {
- type: Boolean,
- required: false,
- default: false,
- },
- wait: {
- type: Boolean,
- required: false,
- default: false,
- },
- danger: {
- type: Boolean,
- required: false,
- default: false,
- },
- full: {
- type: Boolean,
- required: false,
- default: false,
- },
- },
- emits: ['click'],
- mounted() {
- if (this.autofocus) {
- this.$nextTick(() => {
- this.$el.focus();
- });
- }
- },
- methods: {
- onMousedown(evt: MouseEvent) {
- function distance(p, q) {
- return Math.hypot(p.x - q.x, p.y - q.y);
- }
+const props = defineProps<{
+ type?: 'button' | 'submit' | 'reset';
+ primary?: boolean;
+ gradate?: boolean;
+ rounded?: boolean;
+ inline?: boolean;
+ link?: boolean;
+ to?: string;
+ autofocus?: boolean;
+ wait?: boolean;
+ danger?: boolean;
+ full?: boolean;
+}>();
- function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY) {
- const origin = { x: circleCenterX, y: circleCenterY };
- const dist1 = distance({ x: 0, y: 0 }, origin);
- const dist2 = distance({ x: boxW, y: 0 }, origin);
- const dist3 = distance({ x: 0, y: boxH }, origin);
- const dist4 = distance({ x: boxW, y: boxH }, origin);
- return Math.max(dist1, dist2, dist3, dist4) * 2;
- }
+const emit = defineEmits<{
+ (ev: 'click', payload: MouseEvent): void;
+}>();
- const rect = evt.target.getBoundingClientRect();
+let el = $ref<HTMLElement | null>(null);
+let ripples = $ref<HTMLElement | null>(null);
- const ripple = document.createElement('div');
- ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
- ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
-
- this.$refs.ripples.appendChild(ripple);
-
- const circleCenterX = evt.clientX - rect.left;
- const circleCenterY = evt.clientY - rect.top;
-
- const scale = calcCircleScale(evt.target.clientWidth, evt.target.clientHeight, circleCenterX, circleCenterY);
-
- window.setTimeout(() => {
- ripple.style.transform = 'scale(' + (scale / 2) + ')';
- }, 1);
- window.setTimeout(() => {
- ripple.style.transition = 'all 1s ease';
- ripple.style.opacity = '0';
- }, 1000);
- window.setTimeout(() => {
- if (this.$refs.ripples) this.$refs.ripples.removeChild(ripple);
- }, 2000);
- },
- },
+onMounted(() => {
+ if (props.autofocus) {
+ nextTick(() => {
+ el!.focus();
+ });
+ }
});
+
+function distance(p, q): number {
+ return Math.hypot(p.x - q.x, p.y - q.y);
+}
+
+function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY): number {
+ const origin = { x: circleCenterX, y: circleCenterY };
+ const dist1 = distance({ x: 0, y: 0 }, origin);
+ const dist2 = distance({ x: boxW, y: 0 }, origin);
+ const dist3 = distance({ x: 0, y: boxH }, origin);
+ const dist4 = distance({ x: boxW, y: boxH }, origin);
+ return Math.max(dist1, dist2, dist3, dist4) * 2;
+}
+
+function onMousedown(evt: MouseEvent): void {
+ const target = evt.target! as HTMLElement;
+ const rect = target.getBoundingClientRect();
+
+ const ripple = document.createElement('div');
+ ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
+ ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
+
+ ripples!.appendChild(ripple);
+
+ const circleCenterX = evt.clientX - rect.left;
+ const circleCenterY = evt.clientY - rect.top;
+
+ const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
+
+ window.setTimeout(() => {
+ ripple.style.transform = 'scale(' + (scale / 2) + ')';
+ }, 1);
+ window.setTimeout(() => {
+ ripple.style.transition = 'all 1s ease';
+ ripple.style.opacity = '0';
+ }, 1000);
+ window.setTimeout(() => {
+ if (ripples) ripples.removeChild(ripple);
+ }, 2000);
+}
</script>
<style lang="scss" scoped>
diff --git a/packages/client/src/pages/welcome.setup.vue b/packages/client/src/pages/welcome.setup.vue
index 4892ab6ea2..eb6e29eb7f 100644
--- a/packages/client/src/pages/welcome.setup.vue
+++ b/packages/client/src/pages/welcome.setup.vue
@@ -21,50 +21,37 @@
</form>
</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue';
import { host } from '@/config';
import * as os from '@/os';
import { login } from '@/account';
+import { i18n } from '@/i18n';
-export default defineComponent({
- components: {
- MkButton,
- MkInput,
- },
+let username = $ref('');
+let password = $ref('');
+let submitting = $ref(false);
- data() {
- return {
- username: '',
- password: '',
- submitting: false,
- host,
- };
- },
+function submit() {
+ if (submitting) return;
+ submitting = true;
- methods: {
- submit() {
- if (this.submitting) return;
- this.submitting = true;
+ os.api('admin/accounts/create', {
+ username: username,
+ password: password,
+ }).then(res => {
+ return login(res.token);
+ }).catch(() => {
+ submitting = false;
- os.api('admin/accounts/create', {
- username: this.username,
- password: this.password,
- }).then(res => {
- return login(res.token);
- }).catch(() => {
- this.submitting = false;
-
- os.alert({
- type: 'error',
- text: this.$ts.somethingHappened
- });
- });
- }
- }
-});
+ os.alert({
+ type: 'error',
+ text: i18n.ts.somethingHappened,
+ });
+ });
+}
</script>
<style lang="scss" scoped>
diff --git a/packages/client/src/ui/deck/column-core.vue b/packages/client/src/ui/deck/column-core.vue
index 2667b6d745..30c0dc5e1c 100644
--- a/packages/client/src/ui/deck/column-core.vue
+++ b/packages/client/src/ui/deck/column-core.vue
@@ -31,14 +31,4 @@ defineProps<{
const emit = defineEmits<{
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
}>();
-
-/*
-export default defineComponent({
- methods: {
- focus() {
- this.$children[0].focus();
- }
- }
-});
-*/
</script>
diff --git a/packages/client/src/ui/deck/list-column.vue b/packages/client/src/ui/deck/list-column.vue
index 9a1fb5b445..8fdf19cabb 100644
--- a/packages/client/src/ui/deck/list-column.vue
+++ b/packages/client/src/ui/deck/list-column.vue
@@ -52,20 +52,6 @@ const menu = [{
text: i18n.ts.selectList,
action: setList,
}];
-
-/*
-function focus() {
- timeline.focus();
-}
-
-export default defineComponent({
- watch: {
- mediaOnly() {
- (this.$refs.timeline as any).reload();
- }
- }
-});
-*/
</script>
<style lang="scss" scoped>