This is an automated email from the ASF dual-hosted git repository.
zhongjiajie pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new ae09702 [Feature][UI Next] Add modal component. (#7848)
ae09702 is described below
commit ae09702b351c71babf2c93996e56a1358eb71d39
Author: songjianet <[email protected]>
AuthorDate: Thu Jan 6 14:44:04 2022 +0800
[Feature][UI Next] Add modal component. (#7848)
---
.../src/components/modal/index.module.scss | 29 ++++++++
.../src/components/modal/index.tsx | 86 ++++++++++++++++++++++
2 files changed, 115 insertions(+)
diff --git a/dolphinscheduler-ui-next/src/components/modal/index.module.scss
b/dolphinscheduler-ui-next/src/components/modal/index.module.scss
new file mode 100644
index 0000000..b880442
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/components/modal/index.module.scss
@@ -0,0 +1,29 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ width: 600px;
+}
+
+.btn-box {
+ display: flex;
+ justify-content: flex-end;
+
+ button:first-child {
+ margin-right: 20px;
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/components/modal/index.tsx
b/dolphinscheduler-ui-next/src/components/modal/index.tsx
new file mode 100644
index 0000000..b1fe0ee
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/components/modal/index.tsx
@@ -0,0 +1,86 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent, PropType, renderSlot } from 'vue'
+import { NModal, NCard, NButton } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import styles from './index.module.scss'
+
+const props = {
+ show: {
+ type: Boolean as PropType<boolean>,
+ default: false,
+ },
+ title: {
+ type: String as PropType<string>,
+ required: true,
+ },
+ cancelText: {
+ type: String as PropType<string>,
+ },
+ confirmText: {
+ type: String as PropType<string>,
+ },
+}
+
+const Modal = defineComponent({
+ name: 'Modal',
+ props,
+ emits: ['cancel', 'confirm'],
+ setup(props, ctx) {
+ const { t } = useI18n()
+
+ const onCancel = () => {
+ ctx.emit('cancel')
+ }
+
+ const onConfirm = () => {
+ ctx.emit('confirm')
+ }
+
+ return { t, onCancel, onConfirm }
+ },
+ render() {
+ const { $slots, t, onCancel, onConfirm } = this
+
+ return (
+ <NModal
+ v-model={[this.show, 'show']}
+ class={styles.container}
+ mask-closable={false}
+ >
+ <NCard title={this.title}>
+ {{
+ default: () =>
renderSlot($slots, 'default'),
+ footer: () => (
+ <div class={styles['btn-box']}>
+ <NButton quaternary size='small'
onClick={onCancel}>
+ {this.cancelText ||
t('modal.cancel')}
+ </NButton>
+ <NButton type='info' size='small'
onClick={onConfirm}>
+ {this.confirmText ||
t('modal.confirm')}
+ </NButton>
+ </div>
+ ),
+ }}
+ </NCard>
+ </NModal>
+ )
+ },
+})
+
+export default Modal
