Skip to content

Commit

Permalink
feat(comp:collapse): update style and add size prop (#1252)
Browse files Browse the repository at this point in the history
  • Loading branch information
danranVm committed Nov 3, 2022
1 parent be94528 commit f3aa234
Show file tree
Hide file tree
Showing 44 changed files with 319 additions and 298 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@

exports[`Header > render work 1`] = `
"<div class=\\"ix-header ix-header-md\\">
<!---->
<!---->
<div class=\\"ix-header-content\\">
<div class=\\"ix-header-title-wrapper\\"><span class=\\"ix-header-title\\">Header title</span>
<!---->
</div>
<!---->
<!----><span class=\\"ix-header-title\\">Header title</span>
<!----><span class=\\"ix-header-suffix\\"><i class=\\"ix-icon ix-icon-close\\" role=\\"img\\" aria-label=\\"close\\"></i></span>
</div>
<!---->
</div><span class=\\"ix-header-suffix\\"><i class=\\"ix-icon ix-icon-close\\" role=\\"img\\" aria-label=\\"close\\"></i></span>
</div>"
`;
2 changes: 1 addition & 1 deletion packages/components/button/docs/Theme.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
| `@button-background-color` | `var(--ix-background-color)` | - | - |
| `@button-background-color-disabled` | `var(--ix-background-color-deep)` | - | - |
| `@button-border-color` | `var(--ix-border-color)` | - | - |
| `@button-border-radius` | `var(--ix-border-radius-sm)` | - | - |
| `@button-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - |
| `@button-primary-color` | `var(--ix-text-color-inverse)` | - | - |
| `@button-primary-background-color` | `var(--ix-color-primary)` | - | - |
| `@button-primary-background-color-hover` | `var(--ix-color-primary-l10)` | - | - |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
@button-background-color: var(--ix-background-color);
@button-background-color-disabled: var(--ix-background-color-deep);
@button-border-color: var(--ix-border-color);
@button-border-radius: var(--ix-border-radius-sm);
@button-border-radius: var(--ix-border-radius-md);

@button-primary-color: var(--ix-text-color-inverse);
@button-primary-background-color: var(--ix-color-primary);
Expand Down
2 changes: 2 additions & 0 deletions packages/components/button/style/themes/seer.variable.less
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,7 @@
@button-min-width-lg: 120px;
@button-min-width-xl: 160px;

@button-border-radius: var(--ix-border-radius-sm);

@button-icon-color: var(--ix-text-color-title-secondary);
@button-icon-font-size: var(--ix-font-size-lg);
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
// Vitest Snapshot v1

exports[`Collapse > panel work > header work 1`] = `
"<div class=\\"ix-collapse\\">
"<div class=\\"ix-collapse ix-collapse-md\\">
<div class=\\"ix-collapse-panel\\">
<div class=\\"ix-header ix-header-md\\">
<div class=\\"ix-header-content\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
<!----><span class=\\"ix-header-title\\">header 0</span>
<!---->
<div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
<!---->
<div class=\\"ix-header-content\\">
<div class=\\"ix-header-title-wrapper\\"><span class=\\"ix-header-title\\">header 0</span>
<!---->
</div>
<!---->
</div>
<!---->
Expand All @@ -23,14 +25,16 @@ exports[`Collapse > panel work > header work 1`] = `
`;
exports[`Collapse > panel work > header work 2`] = `
"<div class=\\"ix-collapse\\">
"<div class=\\"ix-collapse ix-collapse-md\\">
<div class=\\"ix-collapse-panel\\">
<div class=\\"ix-header ix-header-md\\">
<div class=\\"ix-header-content\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"right\\"><path d=\\"m411.776 294.784 208.192 208.192a12.8 12.8 0 0 1 0 18.048L411.776 729.216a12.8 12.8 0 0 0 0 18.112l27.2 27.136a12.8 12.8 0 0 0 18.048 0l253.44-253.44a12.8 12.8 0 0 0 0-18.048l-253.44-253.44a12.8 12.8 0 0 0-18.048 0l-27.2 27.136a12.8 12.8 0 0 0 0 18.112z\\"></path></svg></i></span>
<!----><span class=\\"ix-header-title\\">hello header</span>
<!----><span class=\\"ix-header-suffix\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"left\\"><path d=\\"M612.224 294.784 404.032 502.976a12.8 12.8 0 0 0 0 18.048l208.192 208.192a12.8 12.8 0 0 1 0 18.112l-27.2 27.136a12.8 12.8 0 0 1-18.048 0l-253.44-253.44a12.8 12.8 0 0 1 0-18.048l253.44-253.44a12.8 12.8 0 0 1 18.048 0l27.2 27.136a12.8 12.8 0 0 1 0 18.112z\\"></path></svg></i></span>
</div>
<div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"right\\"><path d=\\"m411.776 294.784 208.192 208.192a12.8 12.8 0 0 1 0 18.048L411.776 729.216a12.8 12.8 0 0 0 0 18.112l27.2 27.136a12.8 12.8 0 0 0 18.048 0l253.44-253.44a12.8 12.8 0 0 0 0-18.048l-253.44-253.44a12.8 12.8 0 0 0-18.048 0l-27.2 27.136a12.8 12.8 0 0 0 0 18.112z\\"></path></svg></i></span>
<!---->
<div class=\\"ix-header-content\\">
<div class=\\"ix-header-title-wrapper\\"><span class=\\"ix-header-title\\">hello header</span>
<!---->
</div>
<!---->
</div><span class=\\"ix-header-suffix\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"left\\"><path d=\\"M612.224 294.784 404.032 502.976a12.8 12.8 0 0 0 0 18.048l208.192 208.192a12.8 12.8 0 0 1 0 18.112l-27.2 27.136a12.8 12.8 0 0 1-18.048 0l-253.44-253.44a12.8 12.8 0 0 1 0-18.048l253.44-253.44a12.8 12.8 0 0 1 18.048 0l27.2 27.136a12.8 12.8 0 0 1 0 18.112z\\"></path></svg></i></span>
</div>
<transition-stub name=\\"ix-collapse-transition\\" appear=\\"true\\" persisted=\\"false\\" css=\\"true\\">
<div class=\\"ix-collapse-panel-content\\" style=\\"display: none;\\">
Expand All @@ -44,12 +48,14 @@ exports[`Collapse > panel work > header work 2`] = `
`;
exports[`Collapse > render work 1`] = `
"<div class=\\"ix-collapse\\">
"<div class=\\"ix-collapse ix-collapse-md\\">
<div class=\\"ix-collapse-panel\\">
<div class=\\"ix-header ix-header-md\\">
<div class=\\"ix-header-content\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
<!----><span class=\\"ix-header-title\\">header 0</span>
<!---->
<div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
<!---->
<div class=\\"ix-header-content\\">
<div class=\\"ix-header-title-wrapper\\"><span class=\\"ix-header-title\\">header 0</span>
<!---->
</div>
<!---->
</div>
<!---->
Expand All @@ -63,10 +69,12 @@ exports[`Collapse > render work 1`] = `
</transition-stub>
</div>
<div class=\\"ix-collapse-panel ix-collapse-panel-expanded\\">
<div class=\\"ix-header ix-header-md\\">
<div class=\\"ix-header-content\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
<!----><span class=\\"ix-header-title\\">header 1</span>
<!---->
<div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
<!---->
<div class=\\"ix-header-content\\">
<div class=\\"ix-header-title-wrapper\\"><span class=\\"ix-header-title\\">header 1</span>
<!---->
</div>
<!---->
</div>
<!---->
Expand All @@ -80,10 +88,12 @@ exports[`Collapse > render work 1`] = `
</transition-stub>
</div>
<div class=\\"ix-collapse-panel\\">
<div class=\\"ix-header ix-header-md\\">
<div class=\\"ix-header-content\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
<!----><span class=\\"ix-header-title\\">header 2</span>
<!---->
<div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
<!---->
<div class=\\"ix-header-content\\">
<div class=\\"ix-header-title-wrapper\\"><span class=\\"ix-header-title\\">header 2</span>
<!---->
</div>
<!---->
</div>
<!---->
Expand Down
14 changes: 0 additions & 14 deletions packages/components/collapse/demo/Custom.md

This file was deleted.

37 changes: 0 additions & 37 deletions packages/components/collapse/demo/Custom.vue

This file was deleted.

29 changes: 23 additions & 6 deletions packages/components/collapse/demo/CustomHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,35 @@
<span>Some books should be tasted, some devoured, but only a few should be chewed and digested thoroughly.</span>
</IxCollapsePanel>
<IxCollapsePanel key="2" :header="header">
<template #header="{ expanded, changeExpand }">
<IxHeader
:avatar="{ src: '/images/avatar/1.png' }"
description="This is a description"
@suffixClick="changeExpand"
>
Title
<template #suffix>
<IxIcon name="right" :rotate="expanded ? 90 : 0"></IxIcon>
</template>
</IxHeader>
</template>
<span>
If a man will begin with certainties, he shall end in doubts; but if he will be content to begin with doubts, he
shall end in certainties.
</span>
</IxCollapsePanel>
<IxCollapsePanel key="3">
<template #header="{ expanded, onClick }">
<IxHeader title="Francis Bacon's saying" @click="onClick">
<template #header="{ expanded, changeExpand }">
<IxHeader title="Francis Bacon's saying" @click="changeExpand">
<template #prefix>
<IxIcon name="caret-right-filled" :rotate="expanded ? 90 : 0"></IxIcon>
</template>
<template #suffix>
<IxIcon name="setting"></IxIcon>
<IxIcon name="setting"></IxIcon>
<IxIcon name="setting"></IxIcon>
<IxSpace>
<IxIcon name="setting" @click="onSuffixClick"></IxIcon>
<IxIcon name="setting" @click="onSuffixClick"></IxIcon>
<IxIcon name="setting" @click="onSuffixClick"></IxIcon>
</IxSpace>
</template>
</IxHeader>
</template>
Expand All @@ -28,10 +42,13 @@
</template>

<script lang="ts" setup>
// If you don't want click extra trigger collapse, you can prevent this:
const onSuffixClick = (evt: Event) => evt.stopPropagation()
const header = {
title: "Francis Bacon's saying",
suffix: 'setting',
// If you don't want click extra trigger collapse, you can prevent this:
onSuffixClick: (evt: Event) => evt.stopPropagation(),
onSuffixClick,
}
</script>
14 changes: 14 additions & 0 deletions packages/components/collapse/demo/Size.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
title:
zh: 紧凑型
en: Compact panel
order: 5
---

## zh

可以通过设置 `size:'sm'` 来使用紧凑型面板。

## en

You can use the compact panel by setting `size:'sm'`.
16 changes: 16 additions & 0 deletions packages/components/collapse/demo/Size.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<IxCollapse size="sm">
<IxCollapsePanel key="1" header="Francis Bacon's saying">
<span>Some books should be tasted, some devoured, but only a few should be chewed and digested thoroughly.</span>
</IxCollapsePanel>
<IxCollapsePanel key="2" header="Francis Bacon's saying">
<span>
If a man will begin with certainties, he shall end in doubts; but if he will be content to begin with doubts, he
shall end in certainties.
</span>
</IxCollapsePanel>
<IxCollapsePanel key="3" header="Francis Bacon's saying" disabled>
<span>A wise man will make more opportunities than he finds.</span>
</IxCollapsePanel>
</IxCollapse>
</template>
25 changes: 18 additions & 7 deletions packages/components/collapse/docs/Api.zh.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
## API

### IxCollapse

#### CollapseProps

| 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
| --- | --- | --- | --- | --- | --- |
| `v-model:expandedKeys` | 当前展开面板的 key | `(string \| number)[]` | - | - |- |
| `v-model:expandedKeys` | 当前展开面板的 key | `VKey[]` | - | - |- |
| `accordion` | 是否开启手风琴模式 | `boolean` | `false` || - |
| `borderless` | 是否显示边框 | `boolean` | `false` ||- |
| `expandIcon` | 自定义展开图标 | `string \| #expandIcon="{key, expanded}"` | `'right'` ||- |
| `ghost` | 幽灵模式 | `boolean` | `false` || 使折叠面板透明且无边框 |
| `borderless` | 无边框 | `boolean` | `false` ||- |
| `expandIcon` | 设置展开图标 | `string` | `'right'` ||- |
| `ghost` | 幽灵模式 | `boolean` | `false` || 使折叠面板透明 |
| `size` | 折叠面板大小 | `'sm' \| 'md'` | `'md'` || - |

#### CollapseSlots

| 名称 | 说明 | 参数类型 | 备注 |
| --- | --- | --- | --- |
| `expandIcon` | 自定义展开图标 | `{ key: VKey, expanded: boolean }` | - |

### IxCollapsePanel

Expand All @@ -20,4 +25,10 @@
| --- | --- | --- | --- | --- | --- |
| `key` | 唯一标识符 | `string \| number` | `uid` | - | - |
| `disabled` | 是否禁用该面板 | `boolean` | `false` | - | - |
| `header` | 面板头内容 | `string \| HeaderProps \| #header="{expanded, onClick}"` | - | - |- |
| `header` | 面板头内容 | `string \| HeaderProps` | - | - |- |

#### CollapsePanelSlots

| 名称 | 说明 | 参数类型 | 备注 |
| --- | --- | --- | --- |
| `header` | 自定义面板头内容 | `{ expanded: boolean, changeExpand: () => void }` | - |
1 change: 1 addition & 0 deletions packages/components/collapse/docs/Index.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@ type: 数据展示
title: Collapse
subtitle: 折叠面板
order: 0
theme: true
---

15 changes: 0 additions & 15 deletions packages/components/collapse/docs/Theme.en.md
Original file line number Diff line number Diff line change
@@ -1,15 +0,0 @@
## API

### IxCollapse

#### CollapseProps

| Name | Description | Type | Default | Global Config | Remark |
| --- | --- | --- | --- | --- | --- |
| - | - | - | - || - |

#### CollapseSlots

| Name | Description | Parameter Type | Remark |
| --- | --- | --- | --- |
| - | - | - | - |
18 changes: 5 additions & 13 deletions packages/components/collapse/docs/Theme.zh.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
| 名称 | default | seer | 备注 |
| --- | --- | --- | --- |
| `@collapse-line-height` | `@line-height-base` | - | - |
| `@collapse-font-size` | `@font-size-md` | - | - |
| `@collapse-color` | `@text-color` | - | - |
| `@collapse-background-color` | `@color-grey-l50` | - | - |
| `@collapse-border` | `@border-width-sm @border-style @border-color` | - | - |
| `@collapse-border-radius` | `@border-radius-sm` | - | - |
| `@collapse-panel-header-padding` | `2px @spacing-lg` | - | - |
| `@collapse-panel-header-prefix-font-size` | `@font-size-sm` | - | - |
| `@collapse-panel-header-font-size` | `@font-size-md` | - | - |
| `@collapse-panel-header-font-weight` | `@font-weight-md` | - | - |
| `@collapse-panel-content-background-color` | `@background-color-component` | - | - |
| `@collapse-panel-content-padding` | `@spacing-lg` | - | - |
| `@collapse-panel-content-padding-top-compact` | `@spacing-xs` | - | - |
| `@collapse-font-size-sm` | `var(--ix-font-size-sm)` | - | - |
| `@collapse-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
| `@collapse-border` | `1px solid var(--ix-border-color)` | - | - |
| `@collapse-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - |
| `@collapse-content-background-color` | `var(--ix-background-color-light)` | - | - |
1 change: 1 addition & 0 deletions packages/components/collapse/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@ export type {
CollapsePanelProps,
CollapsePanelComponent,
CollapsePanelPublicProps as CollapsePanelInstance,
CollapseSize,
} from './src/types'

0 comments on commit f3aa234

Please sign in to comment.