use tsx for compoents stage 1

web/src/components/domains/DomainInfo.css

@@ -0,0 +1,11 @@
+div {
+    display: block;
+}
+
+span {
+    padding-left: 0.5em;
+}
+
+.icon {
+    transform: translateY(2px);
+}

web/src/components/domains/DomainInfo.tsx

@@ -0,0 +1,27 @@
+import './DomainInfo.css'
+
+import { type Domain } from "../../stores/domains";
+import { NIcon } from "naive-ui";
+import { AddressCard, Server } from "@vicons/fa";
+import { defineComponent, defineProps } from "vue";
+
+type Props = {
+    domain: Domain
+}
+
+function DomainInfo({domain}: Props) {
+    return (
+        <div>
+            <p>
+                <NIcon class="icon" component={AddressCard} />
+                <span> {domain.admin_email}</span>
+            </p>
+            <p>
+                <NIcon class="icon" component={Server} />
+                <span> {domain.main_dns}</span>
+            </p>
+        </div>
+    )
+}
+
+export default DomainInfo

web/src/components/domains/DomainInfo.vue

@@ -1,35 +0,0 @@
-<template>
-  <div>
-    <p>
-      <NIcon class="icon" :component="AddressCard" />
-      <span> {{ domain.admin_email }}</span>
-    </p>
-    <p>
-      <NIcon class="icon" :component="Server" />
-      <span> {{ domain.main_dns }}</span>
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { type Domain } from "../../stores/domains";
-import { NIcon } from "naive-ui";
-import { AddressCard, Server } from "@vicons/fa";
-defineProps<{
-  domain: Domain;
-}>();
-</script>
-
-<style scoped>
-div {
-  display: block;
-}
-
-span {
-  padding-left: 0.5em;
-}
-
-.icon {
-  transform: translateY(2px);
-}
-</style>

web/src/components/domains/DomainOps.tsx

@@ -0,0 +1,79 @@
+import { NSpace, NButton, NIcon, NTooltip, NFlex } from 'naive-ui'
+import { TrashAlt, EditRegular, Book } from '@vicons/fa'
+import { type Domain } from "../../stores/domains"
+import router from '@/router';
+import i18n from '@/locale/i18n'
+import type { SetupContext } from 'vue';
+const t = i18n.global.t
+
+type Props = {
+    domain: Domain
+}
+
+type Events = {
+    removeDomain(domain: Domain): void
+    editDomain(domain: Domain): void
+}
+
+function loadRecord({ domain }: Props) {
+    return (
+        <NTooltip trigger="hover">
+            {{
+                trigger: () =>
+                    <NButton size="tiny" type="primary" onClick={() => { router.push(`/records/${domain.domain_name}`) }}>
+                        {{ icon: () => <NIcon component={Book} /> }}
+                    </NButton>,
+                default: () => t('domains.dnsRecord')
+            }}
+        </NTooltip>
+    )
+}
+
+function editDomain({ domain }: Props, { emit }: SetupContext<Events>) {
+    return (
+        <NTooltip trigger="hover">
+            {{
+                default: () => t('common.edit'),
+                trigger: () =>
+                    <NButton size="tiny" onClick={() => emit("editDomain", domain)}>
+                        {{
+                            icon: () =>
+                                <NIcon component={EditRegular} />
+                        }}
+                    </NButton>
+            }}
+
+        </NTooltip>
+    )
+}
+
+function deleteDomain({ domain }: Props, { emit }: SetupContext<Events>) {
+    return (
+        <NTooltip trigger="hover">
+            {{
+                default: () => t('common.delete'),
+                trigger: () =>
+                    <NButton type="error" size="tiny" onClick={() => emit("removeDomain", domain)}>
+                        {{
+                            icon: () =>
+                                <NIcon component={TrashAlt} />
+                        }}
+                    </NButton>
+            }}
+        </NTooltip>
+    )
+}
+
+function DomainOps({ domain }: Props, { emit }: SetupContext<Events>) {
+    return (
+        <div>
+            <NFlex justify='end'>
+                <loadRecord domain={domain} />
+                <editDomain domain={domain} onEditDomain={(d: Domain) => emit("editDomain", d)} />
+                <deleteDomain domain={domain} onRemoveDomain={(d: Domain) => emit("removeDomain", d)} />
+            </NFlex>
+        </div>
+    )
+}
+
+export default DomainOps

web/src/components/domains/DomainOps.vue

@@ -1,63 +0,0 @@
-<template>
-    <div>
-        <NFlex justify="end">
-            <NTooltip trigger="hover">
-                <template #trigger>
-                    <NButton size="tiny" type="primary">
-                        <template #icon>
-                            <NIcon :component="Book" @click="loadRecord" />
-                        </template>
-                    </NButton>
-                </template>
-                {{ t('domains.dnsRecord') }}
-            </NTooltip>
-            <NTooltip trigger="hover">
-                <template #trigger>
-                    <NButton size="tiny">
-                        <template #icon>
-                            <NIcon :component="EditRegular" @click="editDomain" />
-                        </template>
-                    </NButton>
-                </template>
-                {{ t('common.edit') }}
-            </NTooltip>
-            <NTooltip trigger="hover">
-                <template #trigger>
-                    <NButton type="error" size="tiny">
-                        <template #icon>
-                            <NIcon :component="TrashAlt" @click="removeDomain"/>
-                        </template>
-                    </NButton>
-                </template>
-                {{ t('common.delete') }}
-            </NTooltip>
-        </NFlex>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { NSpace, NButton, NIcon, NTooltip, NFlex } from 'naive-ui'
-import { TrashAlt, EditRegular, Book } from '@vicons/fa'
-import { type Domain } from "../../stores/domains"
-import router from '@/router';
-import { useI18n } from 'vue-i18n';
-const { t } = useI18n()
-
-const props = defineProps<{
-    domain: Domain
-}>()
-
-const emit = defineEmits(['remove-domain', 'edit-domain'])
-
-function loadRecord() {
-    router.push(`/records/${props.domain.domain_name}`)
-}
-
-function removeDomain() {
-    emit('remove-domain', props.domain)
-}
-
-function editDomain() {
-    emit('edit-domain', props.domain)
-}
-</script>

web/src/components/domains/DomainRemoveModal.css

@@ -0,0 +1,7 @@
+.icon-down {
+    transform: translateY(2px);
+}
+
+b#boldit {
+    font-weight: bold;
+}

web/src/components/domains/DomainRemoveModal.tsx

@@ -0,0 +1,90 @@
+import './DomainRemoveModal.css'
+
+import { useDomainStore, type Domain } from '@/stores/domains';
+import { NModal, NCard, NFlex, NButton, NIcon, NInput, useNotification } from 'naive-ui'
+import { Times, TrashAlt, QuestionCircle } from '@vicons/fa';
+import { getErrorInfo } from '@/apis/api';
+import i18n from '@/locale/i18n';
+import type { EmitsOptions, ObjectEmitsOptions, SetupContext } from 'vue';
+
+const t = i18n.global.t
+const domainStore = useDomainStore()
+const notification = useNotification()
+
+type Props = {
+    domain: Domain
+    show: boolean
+}
+
+type Events = {
+    'update:show': (value: boolean) => void
+}
+
+let domain_name = ''
+let loading = false
+
+async function confirm(domain: Domain) {
+    domain_name = ''
+    loading = true
+
+    try {
+        if (domain)
+            await domainStore.removeDomain(domain)
+    } catch (e) {
+        const msg = getErrorInfo(e)
+        notification.error(msg)
+        console.error(e)
+    } finally {
+        loading = false
+    }
+}
+
+function modalBody({ domain }: Props) {
+    return (
+        <>
+            <p>{t('common.deleteConfirm')}</p>
+            <p>{t('domains.deleteHint')}</p>
+            <p>{t('domains.confirm1')} <b id="boldit">{domain.domain_name}</b> {t('domains.confirm2')}</p>
+            <br />
+            <p>
+                <NInput onUpdate:value={(v) => domain_name = v} placeholder={domain.domain_name} />
+            </p>
+        </>
+    )
+}
+
+function modalActions({ domain }: Props, { emit }: SetupContext<Events>) {
+    return <>
+        <NFlex justify='end'>
+            <NButton size='small' onClick={() => { emit('update:show', false) }}>
+                {{
+                    icon: () => <NIcon><Times /></NIcon>,
+                    default: () => t('common.cancel')
+                }}
+            </NButton>
+
+            <NButton size='small' type='error' disabled={domain_name !== domain.domain_name} attrType='submit' loading={loading} onClick={() => confirm(domain)}>
+                {{
+                    icon: () => <NIcon><TrashAlt /></NIcon>,
+                    default: () => t('common.confirm')
+                }}
+            </NButton>
+        </NFlex>
+    </>
+}
+
+function DomainRemoveModal({ domain, show }: Props, { emit }: SetupContext<Events>) {
+    return (
+        <NModal maskClosable={false} show={show}>
+            <NCard role='dialog' style={{ width: '600px' }}>
+                {{
+                    header: () => <><NIcon class="icon-down" color='red' />{t('domains.delete')} - {domain.domain_name}</>,
+                    default: () => <modalBody domain={domain} />,
+                    action: () => <modalActions domain={domain} onUpdate:show={(v: boolean) => emit('update:show', v)} />
+                }}
+            </NCard>
+        </NModal>
+    )
+}
+
+export default DomainRemoveModal

web/src/components/domains/DomainRemoveModal.vue

@@ -1,89 +0,0 @@
-<template>
-    <NModal :mask-closable="false" :show="show">
-        <NCard role="dialog" aria-modal="true" style="width: 600px">
-            <template #header>
-                <NIcon class="icon-down" color="red">
-                    <QuestionCircle />
-                </NIcon>
-                {{ t('domains.delete') }} - {{ domain?.domain_name }}
-            </template>
-            <p>{{ t('common.deleteConfirm') }}</p>
-            <p>{{ t('domains.deleteHint') }}</p>
-            <p>{{ t('domains.confirm1') }} <b id="boldit">{{ domain?.domain_name }}</b> {{ t('domains.confirm2') }}</p>
-            <br />
-            <p>
-                <NInput v-model:value="domain_name" :placeholder="domain?.domain_name" />
-            </p>
-            <template #action>
-                <NFlex justify="end">
-                    <NButton size="small" @click="show = false">
-                        <template #icon>
-                            <NIcon>
-                                <Times />
-                            </NIcon>
-                        </template>
-                        {{ t('common.cancel') }}
-                    </NButton>
-
-                    <NButton size="small" type="error" :disabled="domain_name !== domain?.domain_name" attr-type="submit"
-                        :loading="loading" @click="confirm">
-                        <template #icon>
-                            <NIcon>
-                                <TrashAlt />
-                            </NIcon>
-                        </template>
-                        {{ t('common.confirm') }}
-                    </NButton>
-                </NFlex>
-            </template>
-        </NCard>
-    </NModal>
-</template>
-
-<script setup lang="ts">
-import { useDomainStore, type Domain } from '@/stores/domains';
-import { NModal, NCard, NFlex, NButton, NIcon, NInput, useNotification } from 'naive-ui'
-import { Times, TrashAlt, QuestionCircle } from '@vicons/fa';
-
-import { useI18n } from 'vue-i18n';
-import { getErrorInfo } from '@/apis/api';
-import { ref } from 'vue';
-const { t } = useI18n()
-
-const show = defineModel<boolean>('show', { default: false })
-const domain_name = ref<string>('')
-const loading = ref<boolean>(false)
-const domainStore = useDomainStore()
-const notification = useNotification()
-
-const props = defineProps<{
-    domain: Domain
-}>()
-
-async function confirm() {
-    domain_name.value = '';
-    loading.value = true;
-
-    if (props.domain) {
-        try {
-            await domainStore.removeDomain(props.domain)
-            show.value = false;
-        } catch (e) {
-            const msg = getErrorInfo(e)
-            notification.error(msg)
-            console.error(e)
-        }
-    }
-    loading.value = false;
-}
-</script>
-
-<style scoped>
-.icon-down {
-    transform: translateY(2px);
-}
-
-b#boldit {
-    font-weight: bold;
-}
-</style>

web/src/views/DomainsView.vue

@@ -4,9 +4,9 @@ import { PlusSquare } from "@vicons/fa"
 import { onMounted, ref } from 'vue'
 import { type Domain, useDomainStore } from '@/stores/domains'
 import { getErrorInfo } from '@/apis/api'
-import DomainInfo from '@/components/domains/DomainInfo.vue'
-import DomainOps from '@/components/domains/DomainOps.vue'
-import DomainRemoveModal from '@/components/domains/DomainRemoveModal.vue'
+import DomainInfo from '@/components/domains/DomainInfo'
+import DomainOps from '@/components/domains/DomainOps'
+import DomainRemoveModal from '@/components/domains/DomainRemoveModal'
 import DomainEditModal from '@/components/domains/DomainEditModal.vue'
 
 const domainStore = useDomainStore()