Merge pull request #59 from Zheng-Changfu/dev

Dev

components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCode: typeof import('naive-ui')['NCode']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
@@ -46,6 +47,7 @@ declare module 'vue' {
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTab: typeof import('naive-ui')['NTab']
     NTabs: typeof import('naive-ui')['NTabs']
+    NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NUl: typeof import('naive-ui')['NUl']

packages/components/src/card/card.tsx

@@ -2,14 +2,13 @@ import type { SlotsType } from 'vue'
 import type { ProCardSlots } from './slots'
 import { DownOutlined, InfoCircleOutlined, UpOutlined } from '@vicons/antd'
 import { isFunction } from 'lodash-es'
-import { collapseTransitionProps, NCard, NFlex, NIcon, useThemeVars } from 'naive-ui'
+import { collapseTransitionProps, NCard, NFlex, NIcon } from 'naive-ui'
 import { computed, defineComponent } from 'vue'
 import ProCollapseTransition from '../_internal/components/collapse-transition/index.vue'
 import ProTooltip from '../_internal/components/pro-tooltip'
 import { useNaiveClsPrefix } from '../_internal/useClsPrefix'
-import { useThemeClass } from '../_internal/useCssVarsClass'
-import { useInlineThemeDisabled } from '../_internal/useInlineThemeDisabled'
 import { useMountStyle } from '../_internal/useMountStyle'
+import { mergeClass } from '../_utils/mergeClass'
 import { resolveSlot, resolveWrappedSlotWithProps } from '../_utils/resolve-slot'
 import { useOmitProps, useOverrideProps } from '../composables'
 import { useLocale } from '../locales'
@@ -23,16 +22,6 @@ export default defineComponent({
   props: proCardProps,
   slots: Object as SlotsType<ProCardSlots>,
   setup(props, { slots }) {
-    const themeVars = useThemeVars()
-    const mergedClsPrefix = useNaiveClsPrefix()
-    const inlineThemeDisabled = useInlineThemeDisabled()
-
-    const theme = useMountStyle(
-      name,
-      'pro-card',
-      style,
-    )
-
     const {
       getMessage,
     } = useLocale('ProCard')
@@ -42,6 +31,8 @@ export default defineComponent({
       props,
     )
 
+    const mergedClsPrefix = useNaiveClsPrefix()
+
     const nCardProps = useOmitProps(overridedProps, {
       ...proCardExtendProps,
       ...collapseTransitionProps,
@@ -58,94 +49,57 @@ export default defineComponent({
       return !!title || !!slots.header || !!tooltip
     })
 
-    const cssVars = computed(() => {
-      const { size } = overridedProps.value
-      const {
-        prefixHeightSmall = '16px',
-        prefixHeightDefault = '18px',
-        prefixBgColor = themeVars.value.errorColor,
-      } = theme.value
-
-      return {
-        '--n-prefix-bg-color': prefixBgColor,
-        '--n-prefix-height': size === 'small' ? prefixHeightSmall : prefixHeightDefault,
-      }
-    })
-
-    const showCollapseArea = computed(() => {
-      const { showCollapse, closable } = overridedProps.value
-      if (showCollapse !== undefined) {
-        return !!showCollapse
-      }
-      return !closable
-    })
-
     const collapseText = computed(() => {
       return getMessage('collapse')(!show.value)
     })
 
-    function triggerExpand(area: 'main' | 'arrow') {
-      const { triggerAreas = [] } = overridedProps.value
-      if (!triggerAreas.includes(area)) {
-        return
-      }
-      show.value = !show.value
-    }
-
     const resolvedTitle = computed(() => {
       const { title } = overridedProps.value
       return isFunction(title) ? title() : title
     })
 
     const mergedContentClass = computed(() => {
-      return [
-        overridedProps.value.contentClass ?? '',
+      return mergeClass(
+        overridedProps.value.contentClass,
         !show.value && `${mergedClsPrefix.value}-card__content--hidden`,
-      ].filter(Boolean).join(' ')
+      )
     })
 
-    const tooltip = computed(() => {
-      return overridedProps.value.tooltip
-    })
+    function triggerExpand(area: 'main' | 'arrow') {
+      const { triggerAreas = [] } = overridedProps.value
+      if (triggerAreas.includes(area)) {
+        show.value = !show.value
+      }
+    }
 
-    const themeClassHandle = inlineThemeDisabled
-      ? useThemeClass(
-        'pro-card',
-        computed(() => {
-          return props.size[0]
-        }),
-        cssVars,
-        props,
-      )
-      : undefined
+    useMountStyle(
+      name,
+      'pro-card',
+      style,
+    )
 
     return {
       show,
-      tooltip,
       nCardProps,
       showHeader,
       collapseText,
       resolvedTitle,
       triggerExpand,
-      overridedProps,
       mergedClsPrefix,
-      showCollapseArea,
       mergedContentClass,
       nCollapseTransitionProps,
-      onRender: themeClassHandle?.onRender,
-      themeClass: themeClassHandle?.themeClass,
-      cssVars: inlineThemeDisabled ? undefined : cssVars,
+      tooltip: computed(() => overridedProps.value.tooltip),
+      showCollapse: computed(() => overridedProps.value.showCollapse),
+      triggerAreas: computed(() => overridedProps.value.triggerAreas ?? []),
     }
   },
   render() {
     const { mergedClsPrefix } = this
-    this.onRender?.()
 
     return (
       <NCard
         {...this.nCardProps}
         class={[
-          this.themeClass,
           `${mergedClsPrefix}-pro-card`,
         ]}
         contentClass={this.mergedContentClass}
@@ -165,16 +119,14 @@ export default defineComponent({
             }
             return (
               <div
-                class={[
-                  {
-                    [`${mergedClsPrefix}-card-header__main--prefix`]: this.overridedProps.prefix,
-                    [`${mergedClsPrefix}-card-header__main--trigger`]: (this.overridedProps.triggerAreas ?? []).includes('main'),
-                  },
-                ]}
-                style={this.cssVars}
+                class={[{
+                  [`${mergedClsPrefix}-card-header__main--trigger`]: this.triggerAreas.includes('main'),
+                }]}
                 onClick={() => this.triggerExpand('main')}
               >
-                {resolveSlot(this.$slots.header, () => [this.resolvedTitle])}
+                {
+                  resolveSlot(this.$slots.header, () => [this.resolvedTitle])
+                }
                 <ProTooltip
                   trigger="hover"
                   tooltip={this.tooltip}
@@ -196,7 +148,9 @@ export default defineComponent({
           'header-extra': () => {
             return [
               this.$slots['header-extra']?.(),
-              this.showCollapseArea && resolveWrappedSlotWithProps(this.$slots.collapse, { expanded: this.show }, (children) => {
+              this.showCollapse && resolveWrappedSlotWithProps(this.$slots.collapse, {
+                expanded: this.show,
+              }, (children) => {
                 children = children ?? [
                   <div>{this.collapseText}</div>,
                   <NIcon>{this.show ? <UpOutlined /> : <DownOutlined />}</NIcon>,
@@ -206,11 +160,9 @@ export default defineComponent({
                   <NFlex
                     size={[4, 0]}
                     align="center"
-                    class={[
-                      {
-                        [`${mergedClsPrefix}-card-header__extra--trigger`]: (this.overridedProps.triggerAreas ?? []).includes('arrow'),
-                      },
-                    ]}
+                    class={[{
+                      [`${mergedClsPrefix}-card-header__extra--trigger`]: this.triggerAreas.includes('arrow'),
+                    }]}
                     // @ts-expect-error
                     onClick={() => this.triggerExpand('arrow')}
                   >

packages/components/src/card/props.ts

@@ -1,4 +1,3 @@
-import type { CardSegmented } from 'naive-ui'
 import type { ExtractPublicPropTypes, PropType } from 'vue'
 import { cardProps, collapseTransitionProps } from 'naive-ui'
 
@@ -9,13 +8,6 @@ export const proCardExtendProps = {
   tooltip: {
     type: [String, Array] as PropType<string | string[]>,
   },
-  /**
-   * 在字首显示带颜色的竖条
-   */
-  prefix: {
-    type: Boolean,
-    default: true,
-  },
   /**
    * 触发展开的区域，如果不想让某些区域触发展开，可以使用此属性
    */
@@ -24,34 +16,18 @@ export const proCardExtendProps = {
     default: () => ['main', 'arrow'],
   },
   /**
-   * 是否显示展开收起，如果外界没有传递此参数，除了在 closable 为 true 的情况下不显示，其他情况都显示
+   * 是否显示展开收起
    */
   showCollapse: {
     type: Boolean,
-    default: undefined,
+    default: true,
   },
 } as const
 
 export const proCardProps = {
   ...cardProps,
   ...proCardExtendProps,
   ...collapseTransitionProps,
-  /**
-   * ---重写默认值---
-   */
-  size: {
-    type: String as PropType<'small' | 'medium' | 'large' | 'huge'>,
-    default: 'small',
-  },
-  /**
-   * ---重写默认值---
-   */
-  segmented: {
-    type: [Object, Boolean] as PropType<boolean | CardSegmented>,
-    default: () => ({
-      content: true,
-    }),
-  },
 } as const
 
 export type ProCardProps = ExtractPublicPropTypes<typeof proCardProps>

packages/components/src/card/styles/index.cssr.ts

@@ -1,7 +1,5 @@
 import { c, cB, cE, cM } from 'naive-ui'
 
-// --n-prefix-height
-// --n-prefix-bg-color
 export default cB('pro-card', [
   cB('card__content', `
     transition: 
@@ -19,23 +17,6 @@ export default cB('pro-card', [
         cM('trigger', `
           cursor: pointer;
         `),
-        cM('prefix', `
-          position: relative;
-          padding-left: 12px;
-        `, [
-          c('&::before', `
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            margin: auto 0;
-            content: ''; 
-            width: 4px;
-            border-radius: 2px;
-            height: var(--n-prefix-height);
-            background: var(--n-prefix-bg-color);
-          `),
-        ]),
       ]),
       cB('icon', [
         cM('tooltip', `

packages/components/src/drawer-form/components/drawer-content/drawer-content.tsx

@@ -0,0 +1,71 @@
+import type { SlotsType } from 'vue'
+import type { ProDrawerContentSlots } from './slots'
+import { NDrawerContent, NFlex } from 'naive-ui'
+import { resolveSlotWithProps } from '../../../_utils/resolve-slot'
+import { useOmitProps, useOverrideProps } from '../../../composables'
+import Footer from './footer'
+import { proDrawerContentExtendProps, proDrawerContentProps } from './props'
+
+const name = 'ProDrawerContent'
+export default defineComponent({
+  name,
+  props: proDrawerContentProps,
+  slots: Object as SlotsType<ProDrawerContentSlots>,
+  setup(props) {
+    const overridedProps = useOverrideProps(
+      name,
+      props,
+    )
+
+    const nDrawerContentProps = useOmitProps(
+      overridedProps,
+      proDrawerContentExtendProps,
+    )
+
+    const showFooter = computed(() => {
+      const {
+        footer,
+        resetButtonProps,
+        submitButtonProps,
+      } = overridedProps.value
+
+      return footer !== false
+        && (resetButtonProps !== false || submitButtonProps !== false)
+    })
+
+    return {
+      showFooter,
+      nDrawerContentProps,
+      footer: computed(() => overridedProps.value.footer),
+      resetButtonProps: computed(() => overridedProps.value.resetButtonProps),
+      submitButtonProps: computed(() => overridedProps.value.submitButtonProps),
+    }
+  },
+  render() {
+    return (
+      <NDrawerContent {...this.nDrawerContentProps}>
+        {{
+          ...this.$slots,
+          footer: this.showFooter
+            ? () => {
+                const footerDom = (
+                  <Footer
+                    resetButtonProps={this.resetButtonProps}
+                    submitButtonProps={this.submitButtonProps}
+                  />
+                )
+
+                return resolveSlotWithProps(this.$slots.footer, {
+                  footerDom,
+                }, () => {
+                  return this.footer
+                    ? this.footer({ footerDom })
+                    : <NFlex justify="flex-end" size={[8, 8]}>{footerDom}</NFlex>
+                })
+              }
+            : null,
+        }}
+      </NDrawerContent>
+    )
+  },
+})