fix(ui): 重构dialog 完善文档

affects: @varlet/cli, @varlet/ui
varletjs · Mar 11, 2021 · 0ba2eb1 · 0ba2eb1
1 parent ba18e83
commit 0ba2eb1
Show file tree

Hide file tree

Showing 19 changed files with 568 additions and 169 deletions.
diff --git a/packages/varlet-cli/site/site.config.json b/packages/varlet-cli/site/site.config.json
@@ -78,6 +78,13 @@
         },
         "doc": "menu"
       },
+      {
+        "text": {
+          "zh-CN": "Dialog 对话框",
+          "en-US": "Dialog"
+        },
+        "doc": "dialog"
+      },
       {
         "text": {
           "zh-CN": "Loading 加载",
@@ -155,13 +162,6 @@
         },
         "doc": "lazy"
       },
-      {
-        "text": {
-          "zh-CN": "Dialog 对话框",
-          "en-US": "Dialog"
-        },
-        "doc": "dialog"
-      },
       {
         "text": {
           "zh-CN": "Image 图片",

diff --git a/packages/varlet-cli/src/compiler/compileScript.ts b/packages/varlet-cli/src/compiler/compileScript.ts
@@ -74,6 +74,7 @@ function install(app) {
 `
   const esExports = `\
 export {
+  install,
   ${exportDirNames.map((exportDirName: string) => `${bigCamelize(exportDirName)}`).join(',\n  ')}
 }
 

diff --git a/packages/varlet-cli/src/compiler/compileTemplateHighlight.ts b/packages/varlet-cli/src/compiler/compileTemplateHighlight.ts
@@ -20,6 +20,14 @@ import { varletConfig } from '../config/varlet.config'
 const TABLE_HEAD_RE = /\s*\|.*\|\s*\n\s*\|.*---+\s*\|\s*\n+/
 const TABLE_FOOT_RE = /(\|\s*$)|(\|\s*\n(?!\s*\|))/
 
+export function replaceDot(str: string) {
+  return str.replace(/`/g, '')
+}
+
+export function replaceUnderline(str: string) {
+  return str.replace(/_/g, '')
+}
+
 export function parseTable(table: string) {
   const rows = table.split('\n').filter(Boolean)
   return rows.map((row) => {
@@ -59,17 +67,17 @@ export function compileTable(md: string, titleRe: RegExp): string {
 }
 
 export function compileTags(table: Record<string, any>, tags: Record<string, any>, componentName: string) {
-  tags[componentName] = {
-    attributes: table.attributesTable.map((row: any) => row[0].replace(/`/g, '')),
+  tags[`${get(varletConfig, 'namespace')}-${componentName}`] = {
+    attributes: table.attributesTable.map((row: any) => replaceDot(row[0])),
   }
 }
 
 export function compileAttributes(table: Record<string, any>, attributes: Record<string, any>, componentName: string) {
   table.attributesTable.forEach((row: any) => {
-    const attrNamespace = `${get(varletConfig, 'namespace')}-${componentName}/${row[0]}`
+    const attrNamespace = `${get(varletConfig, 'namespace')}-${componentName}/${replaceDot(row[0])}`
     attributes[attrNamespace] = {
-      type: row[2].replace(/_/g, ''),
-      description: `${row[1]} 默认值：${row[3].replace(/`/g, '')}`,
+      type: replaceUnderline(row[2]),
+      description: `${row[1]} 默认值：${replaceDot(row[3])}`,
     }
   })
 }
@@ -78,22 +86,22 @@ export function compileWebTypes(table: Record<string, any>, webTypes: Record<str
   const { attributesTable, eventsTable, slotsTable } = table
 
   const attributes = attributesTable.map((row: any) => ({
-    name: row[0].replace(/`/g, ''),
+    name: replaceDot(row[0]),
     description: row[1],
-    default: row[3].replace(/`/g, ''),
+    default: replaceDot(row[3]),
     value: {
-      type: row[2].replace(/_/g, ''),
+      type: replaceUnderline(row[2]),
       kind: 'expression',
     },
   }))
 
   const events = eventsTable.map((row: any) => ({
-    name: row[0].replace(/`/g, ''),
+    name: replaceDot(row[0]),
     description: row[1],
   }))
 
   const slots = slotsTable.map((row: any) => ({
-    name: row[0].replace(/`/g, ''),
+    name: replaceDot(row[0]),
     description: row[1],
   }))
 

diff --git a/packages/varlet-cli/src/shared/constant.ts b/packages/varlet-cli/src/shared/constant.ts
@@ -33,7 +33,7 @@ export const HL_TITLE_EVENTS_RE = /###\s*事件\s*\n+/
 export const HL_TITLE_SLOTS_RE = /###\s*插槽\s*\n+/
 export const HL_MD = 'zh-CN.md'
 export const HL_DIR = resolve(CWD, 'highlight')
-export const HL_TAGS_JSON = resolve(HL_DIR, 'tag.json')
+export const HL_TAGS_JSON = resolve(HL_DIR, 'tags.json')
 export const HL_ATTRIBUTES_JSON = resolve(HL_DIR, 'attributes.json')
 export const HL_WEB_TYPES_JSON = resolve(HL_DIR, 'web-types.json')
 

diff --git a/packages/varlet-ui/src/cell/Cell.vue b/packages/varlet-ui/src/cell/Cell.vue
@@ -2,7 +2,7 @@
   <div class="var-cell" :class="[border ? 'var-cell--border' : null]">
     <div class="var-cell__icon" :class="[iconClass ? iconClass : null]" v-if="$slots.icon || icon">
       <slot name="icon">
-        <var-icon :name="icon" />
+        <var-icon class="var--flex" :name="icon" />
       </slot>
     </div>
     <div class="var-cell__content">

diff --git a/packages/varlet-ui/src/dialog/Dialog.vue b/packages/varlet-ui/src/dialog/Dialog.vue
@@ -4,6 +4,7 @@
     v-model:show="popupShow"
     :overlay="overlay"
     :overlay-class="overlayClass"
+    :overlay-style="overlayStyle"
     :lock-scroll="lockScroll"
     :close-on-click-overlay="popupCloseOnClickOverlay"
     :teleport="teleport"
@@ -20,9 +21,7 @@
       </div>
       <div
         class="var-dialog__message"
-        :style="{
-          'text-align': messageAlign,
-        }"
+        :style="{ textAlign: messageAlign }"
       >
         <slot>
           {{ message }}
@@ -31,19 +30,19 @@
       <div class="var-dialog__actions">
         <var-button
           class="var-dialog__button var-dialog__cancel-button"
-          plain
+          text
+          :text-color="cancelButtonTextColor"
           :color="cancelButtonColor"
-          :background="cancelButtonBackground"
           v-if="cancelButton"
           @click="cancel"
         >
           {{ dt(cancelButtonText, pack.dialogCancelButton) }}
         </var-button>
         <var-button
           class="var-dialog__button var-dialog__confirm-button"
-          plain
+          text
+          :text-color="confirmButtonTextColor"
           :color="confirmButtonColor"
-          :background="confirmButtonBackground"
           v-if="confirmButton"
           @click="confirm"
         >
@@ -71,68 +70,78 @@ export default defineComponent({
   inheritAttrs: false,
   props,
   setup(props) {
-    // 需要透传到popup组件里并需要特殊处理的参数
     const popupShow: Ref<boolean> = ref(false)
     const popupCloseOnClickOverlay: Ref<boolean> = ref(false)
 
-    watch(
-      () => props.show,
-      (newValue) => {
-        popupShow.value = newValue
-      },
-      { immediate: true }
-    )
-    watch(
-      () => props.closeOnClickOverlay,
-      (newValue) => {
-        if (props.onBeforeClose) {
-          // 异步关闭情况下 禁止点击弹出层关闭
-          popupCloseOnClickOverlay.value = false
-          return
-        }
-        popupCloseOnClickOverlay.value = newValue
-      },
-      { immediate: true }
-    )
-
-    // 异步关闭回调
     const done = () => props['onUpdate:show']?.(false)
 
     const handleClickOverlay = () => {
-      props.onClickOverlay?.()
-      if (props.closeOnClickOverlay === false) {
+      const { closeOnClickOverlay, onClickOverlay, onBeforeClose } = props
+
+      onClickOverlay?.()
+
+      if (!closeOnClickOverlay) {
         return
       }
-      if (props.onBeforeClose) {
-        props.onBeforeClose(done)
+
+      if (onBeforeClose != null) {
+        onBeforeClose('close', done)
         return
       }
+
       props['onUpdate:show']?.(false)
     }
 
     const confirm = () => {
-      props.onConfirm?.()
-      if (props.beforeClose) {
-        props.onBeforeClose(done)
+      const { onBeforeClose, onConfirm } = props
+
+      onConfirm?.()
+
+      if (onBeforeClose != null) {
+        onBeforeClose('confirm', done)
         return
       }
+
       props['onUpdate:show']?.(false)
     }
 
     const cancel = () => {
-      props.onCancel?.()
-      if (props.onBeforeClose) {
-        props.onBeforeClose(done)
+      const { onBeforeClose, onCancel } = props
+
+      onCancel?.()
+
+      if (onBeforeClose != null) {
+        onBeforeClose('cancel', done)
         return
       }
+
       props['onUpdate:show']?.(false)
     }
 
+    watch(
+      () => props.show,
+      (newValue) => { popupShow.value = newValue} ,
+      { immediate: true }
+    )
+
+    watch(
+      () => props.closeOnClickOverlay,
+      (newValue) => {
+        if (props.onBeforeClose != null) {
+          popupCloseOnClickOverlay.value = false
+          return
+        }
+
+        popupCloseOnClickOverlay.value = newValue
+      },
+      { immediate: true }
+    )
+
     return {
-      popupShow,
-      popupCloseOnClickOverlay,
       pack,
       dt,
+      popupShow,
+      popupCloseOnClickOverlay,
       handleClickOverlay,
       confirm,
       cancel,

diff --git a/packages/varlet-ui/src/dialog/dialog.less b/packages/varlet-ui/src/dialog/dialog.less
@@ -4,10 +4,8 @@
 @dialog-padding: 20px;
 @dialog-border-radius: 2px;
 @dialog-message-color: #888;
-
 @dialog-message-padding: 12px 0;
 @dialog-message-line-height: 24px;
-
 @dialog-button-margin-left: 6px;
 @dialog-confirm-button-color: @color-primary;
 @dialog-cancel-button-color: @color-primary;