[Feature][UI Next] Add modal component. (#7848)

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;
+  }
+}

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