Merge pull request #66 from Zheng-Changfu/dev

Dev

packages/components/src/_utils/nilOrEmptyStringToNull.ts

@@ -0,0 +1,4 @@
+export function nilOrEmptyStringToNull(value: any) {
+  value = value ?? null
+  return value === '' ? null : value
+}

packages/components/src/composables/createInjectionKey.ts

@@ -0,0 +1,8 @@
+import type { InjectionKey } from 'vue'
+
+/**
+ * copy from naive
+ */
+export function createInjectionKey<T>(key: string): InjectionKey<T> {
+  return key as any
+}

packages/components/src/composables/useOverrideProps.ts

@@ -5,7 +5,7 @@ import { useInjectGlobalConfig } from '../config-provider'
 
 export function useOverrideProps<T extends object>(name: string, props: T): ComputedRef<T> {
   const inst = getCurrentInstance()
-  const { propOverrides } = useInjectGlobalConfig()
+  const { mergedPropOverrides } = useInjectGlobalConfig()
 
   return computed(() => {
     if (!inst)
@@ -14,7 +14,7 @@ export function useOverrideProps<T extends object>(name: string, props: T): Comp
      * 用户传递的所有属性
      */
     const inhertprops = inst.vnode.props
-    const overridedProps = unref(propOverrides)[name] as Partial<T>
+    const overridedProps = unref(mergedPropOverrides)[name] as Partial<T>
 
     if (!overridedProps) {
       return props

packages/components/src/config-provider/config-provider.tsx

@@ -1,4 +1,6 @@
 import type { ConfigProviderProps } from 'naive-ui'
+import type { WrappedIn } from './context'
+import { isFunction, isString } from 'lodash-es'
 import { NConfigProvider } from 'naive-ui'
 import { computed, defineComponent, unref } from 'vue'
 import { useOmitProps } from '../composables'
@@ -11,23 +13,41 @@ export default defineComponent({
   props: proConfigProviderProps,
   setup(props) {
     const {
-      propOverrides: injectedPropOverrides,
+      mergedEmpty: inheritedEmpty,
+      mergedPropOverrides: inheritedPropOverrides,
+      mergedPlainComponentValueTransform: inheritedPlainComponentValueTransform,
     } = useInjectGlobalConfig()
 
     const nConfigProviderProps = useOmitProps(
       props,
       proConfigProviderExtendProps,
     )
 
-    const propOverrides = computed(() => {
+    const mergedPropOverrides = computed(() => {
       return shallowMergePropOverrides(
-        unref(injectedPropOverrides),
+        unref(inheritedPropOverrides),
         (unref(props.propOverrides) ?? {}),
       )
     })
 
+    function mergedEmpty(wrappedIn: WrappedIn) {
+      const { empty } = props
+      if (isString(empty)) {
+        return empty
+      }
+      if (isFunction(empty)) {
+        return empty(wrappedIn)
+      }
+      return inheritedEmpty(wrappedIn)
+    }
+
     provideGlobalConfig({
-      propOverrides,
+      mergedEmpty,
+      mergedPropOverrides,
+      mergedPlainComponentValueTransform: {
+        ...inheritedPlainComponentValueTransform,
+        ...props.plainComponentValueTransform,
+      },
     })
     return {
       nConfigProviderProps,

packages/components/src/config-provider/context.ts

@@ -1,17 +1,35 @@
-import type { InjectionKey } from 'vue'
-import type { ProConfigProviderExtendProps } from './props'
-import { inject, provide, ref } from 'vue'
+import type { MaybeRef, VNodeChild } from 'vue'
+import type { PlainComponentValueTransform } from '../plains'
+import { inject, provide } from 'vue'
+import { createInjectionKey } from '../composables/createInjectionKey'
 
-const globalConfigContextKey = Symbol('globalConfig') as InjectionKey<ProConfigProviderExtendProps>
+export type WrappedIn = 'form' | 'data-table' | 'edit-data-table' | ''
 
-export function provideGlobalConfig(config: ProConfigProviderExtendProps) {
-  provide(globalConfigContextKey, config)
+interface GlobalConfig {
+  mergedEmpty: (wrappedIn: WrappedIn) => VNodeChild
+  mergedPropOverrides: MaybeRef<Record<string, object>>
+  mergedPlainComponentValueTransform: PlainComponentValueTransform
+}
+
+const wrappedInInjectionKey = createInjectionKey<WrappedIn>('wrapped-in')
+const globalConfigInjectionKey = createInjectionKey<GlobalConfig>('global-config')
+
+export function provideGlobalConfig(config: GlobalConfig) {
+  provide(globalConfigInjectionKey, config)
+}
+
+export function provideWrappedIn(wrappedIn: WrappedIn) {
+  return provide(wrappedInInjectionKey, wrappedIn)
+}
+
+export function useInjectWrappedIn() {
+  return inject(wrappedInInjectionKey, '')
 }
 
 export function useInjectGlobalConfig() {
-  return inject(globalConfigContextKey, () => {
-    return {
-      propOverrides: ref({}),
-    }
-  }) as any as Required<ProConfigProviderExtendProps>
+  return inject(globalConfigInjectionKey, {
+    mergedEmpty: () => '-',
+    mergedPropOverrides: {},
+    mergedPlainComponentValueTransform: {},
+  })
 }

packages/components/src/config-provider/props.ts

@@ -1,11 +1,23 @@
-import type { ExtractPublicPropTypes, MaybeRef, PropType } from 'vue'
+import type { ExtractPublicPropTypes, MaybeRef, PropType, VNodeChild } from 'vue'
+import type { PlainComponentValueTransform } from '../plains'
+import type { WrappedIn } from './context'
 import { configProviderProps } from 'naive-ui'
 
 export const proConfigProviderExtendProps = {
   /**
    * 覆盖组件 props
    */
   propOverrides: Object as PropType<MaybeRef<Record<string, object>>>,
+  /**
+   * 当内容为空时显示的内容（支持所有的表单项以及 plain-components）
+   * 当为函数时接收一个参数 wrappedIn，代表了当前组件被包裹在哪个组件中
+   * @default '-'
+   */
+  empty: [String, Function] as PropType<string | ((wrappedIn: WrappedIn) => VNodeChild)>,
+  /**
+   * 简约组件的值转换
+   */
+  plainComponentValueTransform: Object as PropType<PlainComponentValueTransform>,
 } as const
 
 export const proConfigProviderProps = {

packages/components/src/data-table/composables/useColumnRenderer.tsx

@@ -8,6 +8,8 @@ import { get, isFunction } from 'lodash-es'
 import { NButton, NIcon } from 'naive-ui'
 import { computed } from 'vue'
 import ProTooltip from '../../_internal/components/pro-tooltip'
+import { isEmptyValue } from '../../_utils/isEmptyValue'
+import { useInjectGlobalConfig, useInjectWrappedIn } from '../../config-provider'
 import { useLocale } from '../../locales'
 
 export const sortColumnKey = '__SORT_COLUMN__'
@@ -27,6 +29,16 @@ export function useColumnRenderer(options: CreateColumnRendererOptions) {
     getMessage,
   } = useLocale('ProDataTable')
 
+  const {
+    mergedEmpty,
+  } = useInjectGlobalConfig()
+
+  const wrappedIn = useInjectWrappedIn()
+
+  const emptyText = computed(() => {
+    return mergedEmpty(wrappedIn)
+  })
+
   const hasFixedLeftColumn = computed(() => {
     const columns = props.value.columns ?? []
     return columns.some(column => column.fixed === 'left')
@@ -166,10 +178,13 @@ export function useColumnRenderer(options: CreateColumnRendererOptions) {
       title: renderTooltipTitle(title, tooltip),
       render(row, rowIndex) {
         if (render) {
+          /**
+           * 用户自己的 render 不处理
+           */
           return render(row, rowIndex)
         }
         const value = get(row, columnKey)
-        return value as any
+        return isEmptyValue(value) ? emptyText.value : value
       },
       ...rest,
     }

packages/components/src/data-table/demos/zhCN/basic.demo.vue

@@ -4,7 +4,7 @@
 
 <script lang="tsx">
 import type { ProDataTableColumns } from 'pro-naive-ui'
-import { renderCopyableText } from 'pro-naive-ui'
+import { renderCopyableText, renderDateText, renderImages, renderTags } from 'pro-naive-ui'
 import { defineComponent, ref } from 'vue'
 
 function move<T = any>(list: T[], fromIndex: number, toIndex: number) {
@@ -33,7 +33,7 @@ function move<T = any>(list: T[], fromIndex: number, toIndex: number) {
 
 export default defineComponent({
   setup() {
-    const columns = ref<ProDataTableColumns<{ title: string }>>([
+    const columns = ref<ProDataTableColumns<{ src: any, title: string, now: number }>>([
       {
         type: 'selection',
         multiple: false,
@@ -49,26 +49,40 @@ export default defineComponent({
       },
       {
         title: '可复制文本',
-        render: row => renderCopyableText(row, 'title'),
+        render: row => renderCopyableText(row.title),
+      },
+      {
+        title: 'tags',
+        render: row => renderTags(row.title),
+      },
+      {
+        title: '日期格式化',
+        render: row => renderDateText(row.now),
+      },
+      {
+        title: '图片',
+        width: 200,
+        render: row => renderImages(row.src),
       },
       {
         title: 'No',
         path: 'no',
+        width: 80,
         tooltip: ['123', '123'],
       },
     ])
 
     const data = ref([
-      { now: Date.now(), no: '3', title: 'Wonderwall', length: '4:18' },
-      { now: Date.now(), no: '4', title: 'Don\'t Look Back in Anger', length: '4:48' },
-      { now: Date.now(), no: '12', title: 'Champagne Supernova', length: '7:27' },
-      { now: Date.now(), no: '33', title: 'Wonderwall', length: '4:18' },
-      { now: Date.now(), no: '44', title: 'Don\'t Look Back in Anger', length: '4:48' },
-      { now: Date.now(), no: '122', title: 'Champagne Supernova', length: '7:27' },
-      { now: Date.now(), no: '333', title: 'Wonderwall', length: '4:18' },
-      { now: Date.now(), no: '4444', title: 'Don\'t Look Back in Anger', length: '4:48' },
-      { now: Date.now(), no: '1222', title: 'Champagne Supernova', length: '7:27' },
-      { now: Date.now(), no: '33333', title: 'Wonderwall', length: '4:18' },
+      { now: Date.now(), src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg', no: '3', title: 'Wonderwall', length: '4:18' },
+      { now: Date.now(), src: '', no: '', title: 'Don\'t Look Back in Anger', length: '4:48' },
+      { now: Date.now(), src: undefined, no: '12', title: 'Champagne Supernova', length: '7:27' },
+      { now: Date.now(), src: null, no: '33', title: 'Wonderwall', length: '4:18' },
+      { now: Date.now(), src: [], no: '44', title: 'Don\'t Look Back in Anger', length: '4:48' },
+      { now: Date.now(), src: ['https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg', 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'], no: '122', title: 'Champagne Supernova', length: '7:27' },
+      { now: Date.now(), src: '', no: '333', title: 'Wonderwall', length: '4:18' },
+      { now: Date.now(), src: '', no: '4444', title: 'Don\'t Look Back in Anger', length: '4:48' },
+      { now: Date.now(), src: '', no: '1222', title: 'Champagne Supernova', length: '7:27' },
+      { now: Date.now(), src: '', no: '33333', title: 'Wonderwall', length: '4:18' },
     ])
 
     function change() {

packages/components/src/form-list/components/form-list-item.tsx

@@ -14,7 +14,7 @@ import { ProButton } from '../../button'
 import { useReadonlyHelpers } from '../../form/components'
 import { useInjectProFormConfig } from '../../form/context'
 import { useLocale } from '../../locales'
-import { proFormListContextKey, useInjectProFormListInst } from '../context'
+import { proFormListConfigInjectionKey, useInjectProFormListInst } from '../context'
 import { useProvidePath } from './composables/useProvidePath'
 
 const Action = defineComponent({
@@ -258,7 +258,7 @@ export default defineComponent({
       return sizeToHeightMap[size]
     })
 
-    provide(proFormListContextKey, {
+    provide(proFormListConfigInjectionKey, {
       showLabel: showItemLabel,
     })
 

packages/components/src/form-list/context.ts

@@ -1,16 +1,18 @@
-import type { InjectionKey, MaybeRef } from 'vue'
+import type { MaybeRef } from 'vue'
 import type { ProFormListInst } from './inst'
 import { inject, provide } from 'vue'
+import { createInjectionKey } from '../composables/createInjectionKey'
 
-export const proFormListInstContextKey = Symbol('proFormListInst') as InjectionKey<ProFormListInst>
-export const proFormListContextKey = Symbol('proFormListContext') as InjectionKey<{
+export const proFormListConfigInjectionKey = createInjectionKey<{
   showLabel: MaybeRef<boolean | undefined>
-}>
+}>('pro-form-list-config')
+
+export const proFormListInstInjectionKey = createInjectionKey<ProFormListInst>('pro-form-list')
 
 export function provideProFormListInst(inst: ProFormListInst) {
-  provide(proFormListInstContextKey, inst)
+  provide(proFormListInstInjectionKey, inst)
 }
 
 export function useInjectProFormListInst() {
-  return inject(proFormListInstContextKey)!
+  return inject(proFormListInstInjectionKey)!
 }

packages/components/src/form/components/date-picker/date-month-range.tsx

@@ -1,6 +1,7 @@
 import type { SlotsType } from 'vue'
 import type { ProDatePickerSlots } from './slots'
 import { defineComponent } from 'vue'
+import { nilOrEmptyStringToNull } from '../../../_utils/nilOrEmptyStringToNull'
 import { useOverrideProps, usePostValue } from '../../../composables'
 import { InternalValueTypeEnum, ProField } from '../field'
 import DatePicker from './components/date-picker'
@@ -23,7 +24,7 @@ export default defineComponent({
     )
 
     const postValue = usePostValue(overridedProps, {
-      nilToNull: true,
+      transform: nilOrEmptyStringToNull,
     })
 
     expose(exposed)

packages/components/src/form/components/date-picker/date-month.tsx

@@ -1,6 +1,7 @@
 import type { SlotsType } from 'vue'
 import type { ProDatePickerSlots } from './slots'
 import { defineComponent } from 'vue'
+import { nilOrEmptyStringToNull } from '../../../_utils/nilOrEmptyStringToNull'
 import { useOverrideProps, usePostValue } from '../../../composables'
 import { InternalValueTypeEnum, ProField } from '../field'
 import DatePicker from './components/date-picker'
@@ -23,7 +24,7 @@ export default defineComponent({
     )
 
     const postValue = usePostValue(overridedProps, {
-      nilToNull: true,
+      transform: nilOrEmptyStringToNull,
     })
 
     expose(exposed)

packages/components/src/form/components/date-picker/date-quarter-range.tsx

@@ -1,6 +1,7 @@
 import type { SlotsType } from 'vue'
 import type { ProDatePickerSlots } from './slots'
 import { defineComponent } from 'vue'
+import { nilOrEmptyStringToNull } from '../../../_utils/nilOrEmptyStringToNull'
 import { useOverrideProps, usePostValue } from '../../../composables'
 import { InternalValueTypeEnum, ProField } from '../field'
 import DatePicker from './components/date-picker'
@@ -23,7 +24,7 @@ export default defineComponent({
     )
 
     const postValue = usePostValue(overridedProps, {
-      nilToNull: true,
+      transform: nilOrEmptyStringToNull,
     })
 
     expose(exposed)

packages/components/src/form/components/date-picker/date-quarter.tsx

@@ -1,6 +1,7 @@
 import type { SlotsType } from 'vue'
 import type { ProDatePickerSlots } from './slots'
 import { defineComponent } from 'vue'
+import { nilOrEmptyStringToNull } from '../../../_utils/nilOrEmptyStringToNull'
 import { useOverrideProps, usePostValue } from '../../../composables'
 import { InternalValueTypeEnum, ProField } from '../field'
 import DatePicker from './components/date-picker'
@@ -23,7 +24,7 @@ export default defineComponent({
     )
 
     const postValue = usePostValue(overridedProps, {
-      nilToNull: true,
+      transform: nilOrEmptyStringToNull,
     })
 
     expose(exposed)

packages/components/src/form/components/date-picker/date-range.tsx

@@ -1,6 +1,7 @@
 import type { SlotsType } from 'vue'
 import type { ProDatePickerSlots } from './slots'
 import { defineComponent } from 'vue'
+import { nilOrEmptyStringToNull } from '../../../_utils/nilOrEmptyStringToNull'
 import { useOverrideProps, usePostValue } from '../../../composables'
 import { InternalValueTypeEnum, ProField } from '../field'
 import DatePicker from './components/date-picker'
@@ -23,7 +24,7 @@ export default defineComponent({
     )
 
     const postValue = usePostValue(overridedProps, {
-      nilToNull: true,
+      transform: nilOrEmptyStringToNull,
     })
 
     expose(exposed)