Merge pull request #991 from ksc-fe/revision-menu

fix some issues
ksc-fe · Apr 19, 2024 · 78f1727 · 78f1727
2 parents 910ff86 + cf9af25
commit 78f1727
Show file tree

Hide file tree

Showing 21 changed files with 480 additions and 391 deletions.
diff --git a/components/breadcrumb/index.ts b/components/breadcrumb/index.ts
@@ -19,7 +19,7 @@ const typeDefs: Required<TypeDefs<BreadcrumbProps>> = {
 };
 
 const defaults = (): Partial<BreadcrumbProps> => ({
-    separator: '>'
+    separator: ''
 });
 
 export class Breadcrumb extends Component<BreadcrumbProps, BreadcrumbEvents, BreadcrumbBlocks> {

diff --git a/components/breadcrumb/index.vdt b/components/breadcrumb/index.vdt
@@ -1,6 +1,7 @@
 import {getRestProps, mapChildren} from '../utils';
 import {BreadcrumbItem} from './item';
 import { makeStyles } from './styles';
+import { Icon } from '../icon';
 
 const {children, separator, className} = this.get();
 const { k } = this.config;
@@ -13,7 +14,10 @@ const classNameObj = {
 
 const separatorVNode = (
     <span class={`${k}-breadcrumb-separator`}>
-        <b:separator>{separator}</b:separator>
+        <template v-if={!$blocks.separator && !separator}>
+            <Icon class="k-icon-right" />
+        </template>
+        <b:separator v-else>{separator}</b:separator>
     </span>
 );
 const vNodes = [];

diff --git a/components/config/demos/disableWave.md b/components/config/demos/disableWave.md
@@ -0,0 +1,47 @@
+---
+title: 控制全局水波纹动效
+order: 1
+---
+
+通过配置`disableWave`，可以控制是否开启水波纹动效，默认`false`
+
+```vdt
+import {ConfigProvider, Button, Input, Checkbox, Radio, Select, Option} from 'kpc';
+
+<ConfigProvider value={{disableWave: true}}>
+    <Button>Button</Button>
+    <Input />
+    <Checkbox v-model="value">checkbox</Checkbox>
+    <Radio v-model="value">radio</Radio>
+    <Select v-model="day">
+        <Option value="Monday">星期一</Option>
+        <Option value="Tuesday">星期二</Option>
+        <Option value="Wednesday">星期三</Option>
+        <Option value="Thursday">星期四</Option>
+        <Option value="Friday">星期五</Option>
+        <Option value="Saturday">星期六</Option>
+        <Option value="Sunday">星期天</Option>
+    </Select>
+</ConfigProvider>
+```
+
+```styl
+.k-input, .k-input, .k-checkbox, .k-radio
+    margin 0 10px
+```
+
+```ts
+interface Props {
+    value?: boolean,
+    day?: string | null
+}
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            value: false,
+            day: ''
+        }
+    }
+}
+```
diff --git a/components/config/index.md b/components/config/index.md
@@ -15,6 +15,7 @@ sidebar: doc
 
 ```ts
 export interface ConfigProps {
-    classNamePrefix?: string 
+    classNamePrefix?: string
+    disableWave?: boolean
 }
 ```
diff --git a/components/config/index.ts b/components/config/index.ts
@@ -2,7 +2,8 @@ import { createContext, ProviderProps } from '../context';
 import { EMPTY_OBJ, Component } from 'intact';
 
 export interface ConfigProps {
-    classNamePrefix?: string 
+    classNamePrefix?: string,
+    disableWave?: boolean,
 }
 
 const {
@@ -17,6 +18,7 @@ function useConfigContext() {
     return {
         cls: (name: string) => `${config.value!.classNamePrefix || 'k'}-${name}`,
         get k() { return config.value!.classNamePrefix || 'k' },
+        get disableWave() { return config.value!.disableWave || false }
     }
 }
 

diff --git a/components/menu/styles.ts b/components/menu/styles.ts
@@ -17,7 +17,7 @@ const defaults = {
 
     item: {
         height: '40px',
-        padding: '0 17px',
+        padding: '0 12px',
         bodyPadding: '0 4px',
         color: '#aeaeb9',
         hoverColor: '#fff',
@@ -30,7 +30,7 @@ const defaults = {
 
     title: {
         height: '40px',
-        padding: '0 17px',
+        padding: '0 12px',
         color: '#fff',
     },
 
@@ -114,7 +114,7 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
         // header
         .${k}-menu-header {
             height: ${menu.header.height};
-            padding: 0 21px;
+            padding: 0 16px;
             color: ${menu.header.color};
             font-size: ${menu.header.fontSize};
             font-weight: bold;
@@ -125,6 +125,7 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
             max-height: calc(100% - ${menu.header.height});
             overflow-y: auto;
             overflow-x: hidden;
+            scrollbar-width: none;
         }
 
         // menu title
@@ -169,8 +170,7 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
 
         // theme light
         &.${k}-light {
-            border: 1px solid ${theme.color.disabledBg};
-            border-top: 0;
+            border-right: 1px solid ${theme.color.disabledBg};
             background: ${menu.light.bgColor};
             .${k}-menu-header {
                 color: ${menu.light.title.color};

diff --git a/components/table/styles.ts b/components/table/styles.ts
@@ -19,7 +19,7 @@ const defaults = {
     thead: {
         get bgColor() { return theme.color.bg },
         get color() { return theme.color.lightBlack },
-        padding: `0 5px 0 12px`,
+        padding: `0 8px 0 12px`,
         fontSize: `12px`,
         fontWeight: `bold`,
         textAlign: 'left',
@@ -31,7 +31,7 @@ const defaults = {
     // tbody 
     tbody: {
         get hoverBgcolor() { return theme.color.bg },
-        padding: `11px 5px 11px 12px`,
+        padding: `11px 8px 11px 12px`,
     },
 
     // stripe
@@ -129,6 +129,9 @@ export const makeStyles = cache(function makeStyles(k: string) {
                 top: 50%;
                 transform: translateY(-50%);
             }
+            &.${k}-fixed-right:before {
+                left: -2px;
+            }
             &:first-of-type:before {
                 display: none;
             }

diff --git a/components/tooltip/styles.ts b/components/tooltip/styles.ts
@@ -150,7 +150,6 @@ export const makeStyles = cache(function makeStyles(k: string) {
                                 const borderDirection = directionMap[direction as keyof typeof directionMap];
                                 return css`
                                     &.${k}-${direction} {
-                                        border-${borderDirection}-color: ${borderColor};
                                         &:before {
                                             border-${borderDirection}-color: ${bgColor};
                                         }

diff --git a/components/upload/index.vdt b/components/upload/index.vdt
@@ -10,7 +10,7 @@ import {UploadFileStatus} from './useUpload';
 
 const {
     className, accept, multiple, limit,
-    files, children, type, directory
+    files, children, type, directory, disabled
 } = this.get();
 
 const drag = this.drag;
@@ -22,6 +22,7 @@ const classNameObj = {
     [`${k}-drag`]: type === 'drag', 
     [`${k}-dragover`]: drag.dragOver.value, 
     [`${k}-gallery`]: type === 'gallery',
+    [`${k}-disabled`]: disabled,
     [makeStyles(k)]: true,
 };
 
@@ -40,7 +41,7 @@ const handle = (
         <b:content>
             <b:children v-if={children}>{children}</b:children>
             <template v-else-if={type !== 'gallery'}>
-                <Button v-if={type === 'select'}>
+                <Button disabled={disabled} v-if={type === 'select'}>
                     <Icon class={`${k}-icon-upload`} />
                     {_$('点击上传')}
                 </Button>

diff --git a/components/upload/styles.ts b/components/upload/styles.ts
@@ -256,6 +256,17 @@ export const makeStyles = cache(function makeStyles(k: string) {
                 transform: translateY(-50%);
             }
         }
+        &.${k}-disabled {
+            .${k}-upload-add, .${k}-upload-handle {
+                cursor: auto;
+                a {
+                    color: ${upload.color};
+                }
+                &:hover {
+                    border-color: ${theme.color.border}
+                }
+            }
+        }
     `;
 });
 

diff --git a/components/wave/index.ts b/components/wave/index.ts
@@ -72,6 +72,9 @@ export class Wave extends Component<WaveProps> {
         const {disabled} = this.get();
         const node = e.target as HTMLElement;
 
+        // configProvider全局禁用动效
+        if (this.config.disableWave) return;
+
         // 点击输入框中的icon时，此时输入框不需要动效
         const isInput = instance!.classList.contains('k-input-wrapper');
         if (disabled || isInput && node!.classList.contains(this.config.cls('icon'))) return;