From 7a89f70a6e5655280a711c201040d42691304ce0 Mon Sep 17 00:00:00 2001
From: GuoJikun <guojikun486546@163.com>
Date: Wed, 17 Jan 2024 16:25:57 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E5=88=9D=E6=AD=A5=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=20MessageBox=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/message-box/index.ce.vue   | 284 ++++++++++++++++++
 .../src/components/message-box/index.ts       | 115 +++++++
 packages/ivy-design-wc/src/index.ts           |  27 +-
 packages/ivy-design-wc/src/utils/icons.tsx    |  15 +
 packages/ivy-design-wc/src/utils/utils.ts     |  18 +-
 packages/ivy-design-wc/vite.config.ts         |   9 +-
 6 files changed, 461 insertions(+), 7 deletions(-)
 create mode 100644 packages/ivy-design-wc/src/components/message-box/index.ce.vue
 create mode 100644 packages/ivy-design-wc/src/components/message-box/index.ts

diff --git a/packages/ivy-design-wc/src/components/message-box/index.ce.vue b/packages/ivy-design-wc/src/components/message-box/index.ce.vue
new file mode 100644
index 0000000..6e2eb98
--- /dev/null
+++ b/packages/ivy-design-wc/src/components/message-box/index.ce.vue
@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { CloseIcon } from '../../utils/icons'
+import useExpose from '@/hooks/useExpose'
+import { useHost } from '@/hooks/useHostElement'
+import { getType, isFunction } from '@/utils/utils'
+
+defineOptions({
+    name: 'MessageBox',
+    inheritAttrs: false
+})
+
+interface Props {
+    mode: 'alert' | 'confirm' | 'prompt' | null
+    title: string
+    message: string
+    type: string
+    showClose: boolean
+    showConfirmButton: boolean
+    showCancelButton: boolean
+    confirmButtonText: string
+    cancelButtonText: string
+    confirmButtonType: string
+    cancelButtonType: string
+    callback: Function
+    callbackParams: any
+    showInput: boolean
+    inputPattern: RegExp
+    inputPlaceholder: string
+    inputType: string
+    inputValue: string
+    inputValidator?: (value: string) => boolean
+    inputErrorMessage?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    mode: null,
+    type: 'info',
+    showClose: true,
+    showConfirmButton: true,
+    showCancelButton: false,
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    confirmButtonType: 'primary',
+    cancelButtonType: 'default',
+    callback: () => {}
+})
+
+export interface Emits {
+    (e: 'confirm'): void
+    (e: 'cancel'): void
+    (e: 'remove'): void
+}
+
+const emit = defineEmits<Emits>()
+
+const visible = ref(false)
+const open = () => {
+    visible.value = true
+}
+
+function close() {
+    props.callback && props.callback('cancel', props.callbackParams)
+    emit('cancel')
+    visible.value = false
+}
+
+function confirm() {
+    if (props.showInput && isError.value) return
+    props.callback && props.callback('confirm', props.callbackParams)
+    emit('confirm')
+    visible.value = false
+}
+
+const { host } = useHost()
+const handleTransitionend = () => {
+    if (visible.value === false) {
+        host.value?.remove()
+    }
+}
+
+const isError = ref(false)
+const errorMessage = ref(props.inputErrorMessage as string)
+const handlePromptInput = (ev: CustomEvent) => {
+    const val = ev.detail[0]
+    console.log(val)
+    if (props.inputValidator && isFunction(props.inputValidator)) {
+        const flag = props.inputValidator(val)
+        const type = getType(flag)
+        if (type === 'boolean') {
+            isError.value = flag
+        } else if (type === 'string') {
+            isError.value = !!flag
+            errorMessage.value = flag as unknown as string
+        }
+    } else if (props.inputPattern && getType(props.inputPattern) === 'regexp') {
+        isError.value = !props.inputPattern.test(val)
+    } else {
+        isError.value = false
+    }
+}
+
+const { setExposes } = useExpose()
+
+onMounted(() => {
+    errorMessage.value = props.inputErrorMessage as string
+    setExposes({
+        open
+    })
+})
+</script>
+
+<template>
+    <transition name="fade">
+        <div class="overlay" v-if="visible"></div>
+    </transition>
+    <transition name="animated">
+        <div class="message-box" v-if="visible" @transitionend="handleTransitionend">
+            <div class="message-box-header">
+                <p class="message-box-title">{{ props.title }}</p>
+                <i v-if="props.showClose" class="message-box-close" @click="close">
+                    <CloseIcon />
+                </i>
+            </div>
+            <div class="message-box-body">
+                <div>
+                    <div></div>
+                    <div>
+                        <p>{{ props.message }}</p>
+                    </div>
+                </div>
+                <div v-if="props.showInput" class="input-wrapper">
+                    <ivy-input
+                        :placeholder="props.inputPlaceholder"
+                        @change="handlePromptInput"
+                    ></ivy-input>
+                    <p class="input-error" v-show="isError">{{ props.inputErrorMessage }}</p>
+                </div>
+            </div>
+            <div class="message-box-footer">
+                <ivy-button
+                    v-if="props.showCancelButton"
+                    :type="props.cancelButtonType"
+                    class="btn"
+                    :class="props.cancelButtonType"
+                    @click="close"
+                >
+                    {{ props.cancelButtonText }}
+                </ivy-button>
+                <ivy-button
+                    v-if="props.showConfirmButton"
+                    :type="props.confirmButtonType"
+                    class="btn"
+                    :class="confirmButtonType"
+                    @click="confirm"
+                >
+                    {{ props.confirmButtonText }}
+                </ivy-button>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<style lang="scss">
+:host {
+    --ivy-message-box-box-shadow: var(--ivy-box-shadow);
+    --ivy-message-box-bg-color: var(--ivy-color-white);
+    --ivy-message-box-text-color: var(--ivy-text-color-regular);
+    --ivy-message-box-header-color: var(--ivy-text-color-primary);
+    --ivy-message-box-icon-close-color: var(--ivy-text-color-regular);
+    --ivy-message-box-icon-close-color-hover: var(--ivy-color-primary);
+    --ivy-message-box-border-radius: var(--ivy-border-radius-medium);
+    --ivy-message-box-width: 420px;
+    position: fixed;
+    z-index: 1000;
+    p {
+        margin: 0;
+    }
+}
+.message-box {
+    border-radius: var(--ivy-message-box-border-radius);
+    background-color: var(--ivy-message-box-bg-color);
+    color: var(--ivy-message-box-text-color);
+    font-size: 14px;
+    line-height: 1.5;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    z-index: 10;
+    width: 100%;
+    max-width: var(--ivy-message-box-width);
+    box-shadow: var(--ivy-message-box-box-shadow);
+    &-header {
+        position: relative;
+        padding: 12px 16px;
+        font-size: 18px;
+        line-height: 1em;
+        color: var(--ivy-message-box-header-color);
+    }
+    &-title {
+        margin: 0;
+        font-weight: 500;
+    }
+
+    &-close {
+        position: absolute;
+        cursor: pointer;
+        right: 16px;
+        top: 12px;
+        z-index: 10;
+        color: var(--ivy-message-box-icon-close-color);
+        &:hover {
+            color: var(--ivy-message-box-icon-close-color-hover);
+        }
+    }
+
+    &-body {
+        padding: 16px;
+
+        .input {
+            &-wrapper {
+                padding: 8px 0 16px;
+                position: relative;
+            }
+            &-error {
+                position: absolute;
+                bottom: -4px;
+                left: 0;
+                color: var(--ivy-color-danger);
+                font-size: 12px;
+            }
+        }
+    }
+    &-footer {
+        padding: 12px 16px;
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+}
+.animated-enter-active,
+.animated-leave-active {
+    transition:
+        opacity 0.3s ease,
+        transform 0.3s ease;
+}
+.animated-enter-from,
+.animated-leave-to {
+    transform: translate3d(-50%, -70%, 0) scale(0);
+}
+.animated-enter-to,
+.animated-leave-from {
+    opacity: 1;
+    transform: translate3d(-50%, -50%, 0) scale(1);
+}
+
+.fade {
+    &-enter-active,
+    &-leave-active {
+        transition: opacity 0.3s ease;
+    }
+    &-enter-from,
+    &-leave-to {
+        opacity: 0;
+    }
+    &-enter-to,
+    &-leave-from {
+        opacity: 1;
+    }
+}
+
+ivy-button:not(:defined) {
+    display: none;
+}
+</style>
diff --git a/packages/ivy-design-wc/src/components/message-box/index.ts b/packages/ivy-design-wc/src/components/message-box/index.ts
new file mode 100644
index 0000000..cad6913
--- /dev/null
+++ b/packages/ivy-design-wc/src/components/message-box/index.ts
@@ -0,0 +1,115 @@
+import { defineCustomElement } from 'vue'
+import { install } from '@/utils/index'
+import comp from './index.ce.vue'
+
+const MessageBox = defineCustomElement(comp)
+
+const registerComponent = (prefix = 'Ivy') => {
+    const key = `${prefix}${comp.name}`
+    install(key, comp)
+}
+
+export type MessageBoxOptionsType = 'info' | 'success' | 'warning' | 'error'
+
+export interface MessageBoxOptions {
+    title?: string
+    type?: MessageBoxOptionsType
+    message?: string
+    showClose?: boolean
+    showCancelButton?: boolean
+    cancelButtonText?: string
+    confirmButtonText?: string
+    callback?: (action: 'confirm' | 'cancel') => void
+    showInput?: boolean
+    inputPattern?: RegExp
+    inputPlaceholder?: string
+    inputValue?: string
+    inputType?: 'text' | 'number' | 'password'
+    inputValidator?: (value: string) => boolean | string
+    inputErrorMessage?: string
+    mode?: 'alert' | 'confirm' | 'prompt'
+}
+
+const defaultConfig: MessageBoxOptions = {
+    type: 'info',
+    title: '',
+    message: '',
+    showClose: true,
+    showCancelButton: false,
+    cancelButtonText: '取消',
+    confirmButtonText: '确认',
+    callback: () => {},
+    showInput: false,
+
+    inputPlaceholder: '',
+    inputValue: '',
+    inputType: 'text',
+    inputErrorMessage: '输入的数据不合法!'
+}
+
+const msgBox = (opts: MessageBoxOptions) => {
+    return new Promise(() => {
+        const conf = { ...defaultConfig, ...opts }
+        console.log(conf)
+
+        const el: any = new MessageBox()
+        el.title = conf.title
+        el.type = conf.type
+        el.message = conf.message
+        el.showClose = conf.showClose
+        el.showCancelButton = conf.showCancelButton
+        el.cancelButtonText = conf.cancelButtonText
+        el.confirmButtonText = conf.confirmButtonText
+        el.callback = conf.callback
+        el.showInput = conf.showInput
+        el.inputPlaceholder = conf.inputPlaceholder
+        el.inputValue = conf.inputValue
+        el.inputType = conf.inputType
+        el.inputValidator = conf.inputValidator
+        el.inputErrorMessage = conf.inputErrorMessage
+
+        console.log(el)
+        document.body.appendChild(el)
+
+        el.open()
+    })
+}
+
+const $alert = (message: string, title: string = '提示', opts: MessageBoxOptions = {}) => {
+    const conf = {
+        ...opts,
+        title,
+        message,
+        showCancelButton: false
+    }
+    msgBox(conf)
+}
+
+const $confirm = (message: string, title: string = '确认', opts: MessageBoxOptions = {}) => {
+    const conf = {
+        ...opts,
+        title,
+        message,
+        showCancelButton: true
+    }
+    return msgBox(conf)
+}
+
+const $prompt = (message: string, title: string = '输入', opts: MessageBoxOptions = {}) => {
+    const conf = {
+        ...opts,
+        title,
+        message,
+        showCancelButton: true,
+        showInput: true
+    }
+    return msgBox(conf)
+}
+
+msgBox.alert = $alert
+msgBox.confirm = $confirm
+msgBox.prompt = $prompt
+
+export { MessageBox, registerComponent as registerMessageBoxComponent, msgBox }
+
+export default registerComponent
diff --git a/packages/ivy-design-wc/src/index.ts b/packages/ivy-design-wc/src/index.ts
index c078823..8a67af0 100644
--- a/packages/ivy-design-wc/src/index.ts
+++ b/packages/ivy-design-wc/src/index.ts
@@ -61,6 +61,8 @@ import { Link } from './components/link/index'
 import { Text } from './components/text/index'
 import { Affix } from './components/affix/index'
 
+import { MessageBox, msgBox } from './components/message-box/index'
+
 import { createMessage } from './utils/utils'
 
 const comp: Record<string, any> = {
@@ -124,10 +126,11 @@ const comp: Record<string, any> = {
     Tree,
     Link,
     Text,
-    Affix
+    Affix,
+    MessageBox
 }
 
-export const registerComponents = async (prefix = 'Ivy') => {
+const registerComponents = async (prefix = 'Ivy') => {
     for (const key in comp) {
         const name: string = `${prefix}${key}`.replace(/([A-Z])([a-z]+)/g, (val, _, p, offset) => {
             return offset > 0 ? `-${val.toLowerCase()}` : `${val.toLowerCase()}`
@@ -137,12 +140,27 @@ export const registerComponents = async (prefix = 'Ivy') => {
     }
 }
 
-export const message = createMessage(Message)
+const message = createMessage(Message)
 
-export const registerComponent = (name: string, component: any) => {
+const registerComponent = (name: string, component: any) => {
     customElements.define(name, component)
 }
 
+const $alert = msgBox.alert
+const $confirm = msgBox.confirm
+const $ivy = {
+    message,
+    msgBox,
+    alert: $alert,
+    confirm: $confirm
+}
+
+// const $prompt = msgBox.prompt
+// const $notify = msgBox.notify
+// const $message = msgBox.message
+
+export { message, msgBox, registerComponents, registerComponent, $ivy, $alert, $confirm }
+
 export default {
     registerComponents,
     registerComponent,
@@ -212,5 +230,6 @@ declare module 'vue' {
         Link: typeof comp.Link
         Text: typeof comp.Text
         Affix: typeof comp.Affix
+        MessageBox: typeof comp.MessageBox
     }
 }
diff --git a/packages/ivy-design-wc/src/utils/icons.tsx b/packages/ivy-design-wc/src/utils/icons.tsx
index 8e1a3c1..2c214fe 100644
--- a/packages/ivy-design-wc/src/utils/icons.tsx
+++ b/packages/ivy-design-wc/src/utils/icons.tsx
@@ -103,3 +103,18 @@ export const CaretRight = (props: Record<string, any> = {}) => {
         </svg>
     )
 }
+
+export const CloseIcon = (props: Record<string, any> = {}) => {
+    return (
+        <svg
+            {...svgBaseProp}
+            viewBox="0 0 32 32"
+            class={props?.class ? `ivy-icon ${props.class}` : 'ivy-icon'}
+        >
+            <path
+                d="M23.884 6.706l-7.884 7.884-7.884-7.884c-0.177-0.162-0.414-0.262-0.674-0.262-0.551 0-0.998 0.447-0.998 0.998 0 0.26 0.099 0.497 0.262 0.674l-0.001-0.001 7.88 7.884-7.882 7.882c-0.191 0.182-0.309 0.438-0.309 0.722 0 0.551 0.447 0.998 0.998 0.998 0.284 0 0.539-0.118 0.721-0.308l0-0 7.886-7.882 7.884 7.884c0.177 0.162 0.414 0.262 0.674 0.262 0.551 0 0.998-0.447 0.998-0.998 0-0.26-0.099-0.497-0.262-0.674l0.001 0.001-7.884-7.884 7.884-7.886c0.191-0.182 0.309-0.438 0.309-0.722 0-0.551-0.447-0.998-0.998-0.998-0.284 0-0.539 0.118-0.721 0.308l-0 0z"
+                fill="currentColor"
+            ></path>
+        </svg>
+    )
+}
diff --git a/packages/ivy-design-wc/src/utils/utils.ts b/packages/ivy-design-wc/src/utils/utils.ts
index 78675e4..060a581 100644
--- a/packages/ivy-design-wc/src/utils/utils.ts
+++ b/packages/ivy-design-wc/src/utils/utils.ts
@@ -68,7 +68,23 @@ const createMessage = (Message: CustomElementConstructor) => {
 
 const curNotificationIndex = ref(0)
 
-export { createMessage, curMessageIndex, curNotificationIndex }
+const getType = <T>(val: T): string => {
+    return Object.prototype.toString.call(val).slice(8, -1).toLowerCase()
+}
+
+const isArray = <T>(val: T): boolean => {
+    if ('isArray' in Array) {
+        return Array.isArray(val)
+    } else {
+        return getType(val) === 'array'
+    }
+}
+
+const isFunction = <T>(val: T): boolean => {
+    return getType(val) === 'function'
+}
+
+export { createMessage, curMessageIndex, curNotificationIndex, getType, isArray, isFunction }
 export default {
     createMessage,
     curMessageIndex,
diff --git a/packages/ivy-design-wc/vite.config.ts b/packages/ivy-design-wc/vite.config.ts
index 9664f6a..aee50ef 100644
--- a/packages/ivy-design-wc/vite.config.ts
+++ b/packages/ivy-design-wc/vite.config.ts
@@ -5,7 +5,6 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import dts from 'vite-plugin-dts'
-import { c } from 'vitest/dist/reporters-5f784f42.js'
 
 const genInput = () => {
     const target: any = {}
@@ -23,7 +22,13 @@ export default defineConfig({
     appType: 'custom',
     publicDir: false,
     plugins: [
-        vue(),
+        vue({
+            template: {
+                compilerOptions: {
+                    isCustomElement: (tag) => tag.startsWith('ivy-')
+                }
+            }
+        }),
         vueJsx(),
         dts({
             outDir: 'types'