refactor(client): use setup syntax

This commit is contained in:
syuilo 2022-09-06 17:37:58 +09:00
parent 9db2380c20
commit eff9cdd8a7
4 changed files with 89 additions and 163 deletions

View file

@ -3,7 +3,7 @@
v-if="!link" class="bghgjjyj _button" v-if="!link" class="bghgjjyj _button"
:class="{ inline, primary, gradate, danger, rounded, full }" :class="{ inline, primary, gradate, danger, rounded, full }"
:type="type" :type="type"
@click="$emit('click', $event)" @click="emit('click', $event)"
@mousedown="onMousedown" @mousedown="onMousedown"
> >
<div ref="ripples" class="ripples"></div> <div ref="ripples" class="ripples"></div>
@ -24,80 +24,43 @@
</MkA> </MkA>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { nextTick, onMounted } from 'vue';
export default defineComponent({ const props = defineProps<{
props: { type?: 'button' | 'submit' | 'reset';
type: { primary?: boolean;
type: String, gradate?: boolean;
required: false, rounded?: boolean;
}, inline?: boolean;
primary: { link?: boolean;
type: Boolean, to?: string;
required: false, autofocus?: boolean;
default: false, wait?: boolean;
}, danger?: boolean;
gradate: { full?: boolean;
type: Boolean, }>();
required: false,
default: false, const emit = defineEmits<{
}, (ev: 'click', payload: MouseEvent): void;
rounded: { }>();
type: Boolean,
required: false, let el = $ref<HTMLElement | null>(null);
default: true, let ripples = $ref<HTMLElement | null>(null);
},
inline: { onMounted(() => {
type: Boolean, if (props.autofocus) {
required: false, nextTick(() => {
default: false, el!.focus();
},
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): number {
function distance(p, q) {
return Math.hypot(p.x - q.x, p.y - q.y); return Math.hypot(p.x - q.x, p.y - q.y);
} }
function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY) { function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY): number {
const origin = { x: circleCenterX, y: circleCenterY }; const origin = { x: circleCenterX, y: circleCenterY };
const dist1 = distance({ x: 0, y: 0 }, origin); const dist1 = distance({ x: 0, y: 0 }, origin);
const dist2 = distance({ x: boxW, y: 0 }, origin); const dist2 = distance({ x: boxW, y: 0 }, origin);
@ -106,18 +69,20 @@ export default defineComponent({
return Math.max(dist1, dist2, dist3, dist4) * 2; return Math.max(dist1, dist2, dist3, dist4) * 2;
} }
const rect = evt.target.getBoundingClientRect(); function onMousedown(evt: MouseEvent): void {
const target = evt.target! as HTMLElement;
const rect = target.getBoundingClientRect();
const ripple = document.createElement('div'); const ripple = document.createElement('div');
ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px'; ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px'; ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
this.$refs.ripples.appendChild(ripple); ripples!.appendChild(ripple);
const circleCenterX = evt.clientX - rect.left; const circleCenterX = evt.clientX - rect.left;
const circleCenterY = evt.clientY - rect.top; const circleCenterY = evt.clientY - rect.top;
const scale = calcCircleScale(evt.target.clientWidth, evt.target.clientHeight, circleCenterX, circleCenterY); const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
window.setTimeout(() => { window.setTimeout(() => {
ripple.style.transform = 'scale(' + (scale / 2) + ')'; ripple.style.transform = 'scale(' + (scale / 2) + ')';
@ -127,11 +92,9 @@ export default defineComponent({
ripple.style.opacity = '0'; ripple.style.opacity = '0';
}, 1000); }, 1000);
window.setTimeout(() => { window.setTimeout(() => {
if (this.$refs.ripples) this.$refs.ripples.removeChild(ripple); if (ripples) ripples.removeChild(ripple);
}, 2000); }, 2000);
}, }
},
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View file

@ -21,50 +21,37 @@
</form> </form>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import { host } from '@/config'; import { host } from '@/config';
import * as os from '@/os'; import * as os from '@/os';
import { login } from '@/account'; import { login } from '@/account';
import { i18n } from '@/i18n';
export default defineComponent({ let username = $ref('');
components: { let password = $ref('');
MkButton, let submitting = $ref(false);
MkInput,
},
data() { function submit() {
return { if (submitting) return;
username: '', submitting = true;
password: '',
submitting: false,
host,
};
},
methods: {
submit() {
if (this.submitting) return;
this.submitting = true;
os.api('admin/accounts/create', { os.api('admin/accounts/create', {
username: this.username, username: username,
password: this.password, password: password,
}).then(res => { }).then(res => {
return login(res.token); return login(res.token);
}).catch(() => { }).catch(() => {
this.submitting = false; submitting = false;
os.alert({ os.alert({
type: 'error', type: 'error',
text: this.$ts.somethingHappened text: i18n.ts.somethingHappened,
}); });
}); });
} }
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View file

@ -31,14 +31,4 @@ defineProps<{
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; (ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
}>(); }>();
/*
export default defineComponent({
methods: {
focus() {
this.$children[0].focus();
}
}
});
*/
</script> </script>

View file

@ -52,20 +52,6 @@ const menu = [{
text: i18n.ts.selectList, text: i18n.ts.selectList,
action: setList, action: setList,
}]; }];
/*
function focus() {
timeline.focus();
}
export default defineComponent({
watch: {
mediaOnly() {
(this.$refs.timeline as any).reload();
}
}
});
*/
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>