Skip to content

Commit

Permalink
update alert docs (#100)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lyuly
lyuly authored Mar 3, 2023
1 parent 4e74582 commit 7027580
Show file tree
Hide file tree
Showing 7 changed files with 181 additions and 45 deletions.
13 changes: 12 additions & 1 deletion packages/document/docs/src/components/Form/checkbox.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ outline: deep

<script lang="ts" setup>
import exampleCheckbox from '@/example/Form/checkbox/exampleCheckbox.vue'
import allCheckbox from '@/example/Form/checkbox/allCheckbox.vue'
</script>

<ClientOnly>
Expand All @@ -16,4 +17,14 @@ import exampleCheckbox from '@/example/Form/checkbox/exampleCheckbox.vue'

:::details 展开代码
<<< @/example/Form/checkbox/exampleCheckbox.vue
:::
:::

##

<!-- <ClientOnly>
<allCheckbox />
</ClientOnly>
:::details 展开代码
<<< @/example/Form/checkbox/allCheckbox.vue
::: -->
56 changes: 52 additions & 4 deletions packages/document/docs/src/components/other/alert.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,64 @@ outline: deep

## 基础用法

使用 `type`、`size` 来定义提示的样式。
使用 `type` 来定义提示的样式。

<script lang="ts" setup>
import exampleAlert from '@/example/other/exampleAlert.vue'
import exampleAlert from '@/example/other/alert/exampleAlert.vue'
import sizeAlert from '@/example/other/alert/sizeAlert.vue'
</script>

<ClientOnly>
<exampleAlert />
</ClientOnly>

:::details 展开代码
<<< @/example/other/exampleAlert.vue
:::
<<< @/example/other/alert/exampleAlert.vue
:::

## 调整尺寸

使用 `size` 属性配置尺寸，可使用 `large` 、 `small` 和 `mini` 三种值

<ClientOnly>
<sizeAlert />
</ClientOnly>

:::details 展开代码
<<< @/example/other/alert/sizeAlert.vue
:::

## Attributes

<html>
<head></head>
<body>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选值</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>类型</td>
<td>string</td>
<td>success / info / warning / danger</td>
<td>—</td>
</tr>
<tr>
<td>size</td>
<td>尺寸</td>
<td>string</td>
<td>large / small / mini</td>
<td>—</td>
</tr>
</tbody>
</table>
</body>
</html>
18 changes: 18 additions & 0 deletions packages/document/docs/src/example/Form/checkbox/allCheckbox.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<script setup lang="ts">
import { ref } from 'vue'
import { Checkbox } from 'wviewui'
const fruit = ref([
{ label: '🍎', checked: false },
{ label: '🍋', checked: false },
{ label: '🍇', checked: false }
])
</script>

<template>
<div>
<Checkbox v-for="(item, index) in fruit" :key="index" :label="item.label" />
</div>
</template>

<style scoped></style>
6 changes: 3 additions & 3 deletions ...t/docs/src/example/other/exampleAlert.vue → .../src/example/other/alert/exampleAlert.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import { Alert } from 'wviewui'
<template>
<Alert>默认警告</Alert>
<Alert type="success">成功警告</Alert>
<Alert type="warning" size="mini">严重警告</Alert>
<Alert type="info" size="small">通知警告</Alert>
<Alert type="danger" size="large">危险警告</Alert>
<Alert type="warning">严重警告</Alert>
<Alert type="info">通知警告</Alert>
<Alert type="danger">危险警告</Alert>
</template>

<style scoped></style>
12 changes: 12 additions & 0 deletions packages/document/docs/src/example/other/alert/sizeAlert.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<script setup lang="ts">
import { Alert } from 'wviewui'
</script>

<template>
<Alert type="success" size="mini">成功警告</Alert>
<Alert type="warning" size="small">严重警告</Alert>
<Alert type="info">通知警告</Alert>
<Alert type="danger" size="large">危险警告</Alert>
</template>

<style scoped></style>
2 changes: 1 addition & 1 deletion packages/wview-components/src/components/button/wButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default defineComponent({
isPlain: props.plain,
isRound: props.round,
isCircle: props.circle,
isDisabled: props.disabled,
disabled: props.disabled,
[`w-button--${props.size}`]: props.size
}
})
Expand Down
119 changes: 83 additions & 36 deletions packages/wview-components/src/styles/components/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,21 @@
@use '../mixins/mixins.scss' as *;
@use '../color/color.scss' as *;

@mixin button_style($text-color: $primary, $bg-color: $border-color-lighter, $bd-color: $border-color-lighter) {
@mixin button_style($text-color, $bg-color, $bd-color) {
color: $text-color;
background-color: $bg-color;
border-color: $border-color-lighter;
}

@mixin button_disable($color, $bg, $border) {
&:disabled,
&.disabled {
color: $color;
background: $bg;
border-color: $border;
}
}

@include b(button) {
display: inline-block;
line-height: 1;
Expand All @@ -39,124 +48,162 @@
margin: 0 4px;

&.hover {
@include button_style($text-color: $primary, $bg-color: $border-color-lighter, $bd-color: $border-color-lighter);
@include button_style($primary, $border-color-lighter, $border-color-lighter);
}
}

@include m(default) {
@include button_style($text-color: $text-color-regular, $bg-color: $white, $bd-color: $border-color-lighter);
@include button_style($text-color-regular, $white, $border-color-lighter);

&:hover {
@include button_style($text-color: $primary-light-3, $bg-color: $white, $bd-color: $primary-light-9);
@include button_style($primary-light-3, $white, $primary-light-9);
}

@include button_disable($text-color-regular, $white, $border-color-lighter);

&.isPlain {
opacity: 1;
@include button_style($text-color: $text-color-regular, $bg-color: $white, $bd-color: $border-color-lighter);
@include button_style($text-color-regular, $white, $border-color-lighter);

&:hover {
@include button_style($text-color: $primary-light-3, $bg-color: $white, $bd-color: $primary-light-3);
@include button_style($primary-light-3, $white, $primary-light-3);
}

&:disabled,
&.disabled {
@include button_style($text-color-regular, $white, $border-color-lighter)
}
}
}

@include m(primary) {
@include button_style($text-color: $white, $bg-color: $primary, $bd-color: $border-color-lighter);
@include button_style($white, $primary, $border-color-lighter);

&:hover {
@include button_style($text-color: $white, $bg-color: $primary-light-3, $bd-color: $primary-light-3);
@include button_style($white, $primary-light-3, $primary-light-3);
}

@include button_disable($white, $primary, $border-color-lighter);

&.isPlain {
opacity: 1;
@include button_style($text-color: $primary, $bg-color: $white, $bd-color: $primary);
@include button_style($primary, $white, $primary);

&:hover {
@include button_style($text-color: $white, $bg-color: $primary, $bd-color: $primary);
@include button_style($white, $primary, $primary);
}

&:disabled,
&.disabled {
@include button_style($primary, $white, $primary)
}
}
}

@include m(success) {
@include button_style($text-color: $white, $bg-color: $success, $bd-color: $success);
@include button_style($white, $success, $success);

&:hover {
@include button_style($text-color: $white, $bg-color: $success-light-3, $bd-color: $success-light-3);
@include button_style($white, $success-light-3, $success-light-3);
}

@include button_disable($white, $success, $success);

&.isPlain {
opacity: 1;
@include button_style($text-color: $success, $bg-color: $white, $bd-color: $success);
@include button_style($success, $white, $success);

&:hover {
@include button_style($text-color: $white, $bg-color: $success, $bd-color: $success);
@include button_style($white, $success, $success);
}

&:disabled,
&.disabled {
@include button_style($success, $white, $success)
}
}
}

@include m(info) {
@include button_style($text-color: $white, $bg-color: $info, $bd-color: $info);
@include button_style($white, $info, $info);

&:hover {
@include button_style($text-color: $white, $bg-color: $info-light-3, $bd-color: $info-light-3);
@include button_style($white, $info-light-3, $info-light-3);
}

@include button_disable($white, $info, $info);

&.isPlain {
opacity: 1;
@include button_style($text-color: $info, $bg-color: $white, $bd-color: $info);
@include button_style($info, $white, $info);

&:hover {
@include button_style($text-color: $white, $bg-color: $info, $bd-color: $info);
@include button_style($white, $info, $info);
}

&:disabled,
&.disabled {
@include button_style($info, $white, $info)
}
}
}

@include m(danger) {
@include button_style($text-color: $white, $bg-color: $danger, $bd-color: $danger);
@include button_style($white, $danger, $danger);

&:hover {
@include button_style($text-color: $white, $bg-color: $danger-light-3, $bd-color: $danger-light-3);
@include button_style($white, $danger-light-3, $danger-light-3);
}

@include button_disable($white, $danger, $danger);

&.isPlain {
opacity: 1;
@include button_style($text-color: $danger, $bg-color: $white, $bd-color: $danger);
@include button_style($danger, $white, $danger);

&:hover {
@include button_style($text-color: $white, $bg-color: $danger, $bd-color: $danger);
@include button_style($white, $danger, $danger);
}

&:disabled,
&.disabled {
@include button_style($danger, $white, $danger)
}
}
}

@include m(warning) {
@include button_style($text-color: $white, $bg-color: $warning, $bd-color: $warning);
@include button_style($white, $warning, $warning);

&:hover {
@include button_style($text-color: $white, $bg-color: $warning-light-3, $bd-color: $warning-light-3);
@include button_style($white, $warning-light-3, $warning-light-3);
}

@include button_disable($white, $warning, $warning);

&.isPlain {
opacity: 1;
@include button_style($text-color: $warning, $bg-color: $white, $bd-color: $warning);
@include button_style($warning, $white, $warning);

&:hover {
@include button_style($text-color: $white, $bg-color: $warning, $bd-color: $warning);
@include button_style($white, $warning, $warning);
}
}
}

&:hover,
&:focus {
opacity: .8;
&:disabled,
&.disabled {
@include button_style($warning, $white, $warning)
}
}
}

&.isDisabled {
&.disabled,
&[disabled] {
box-shadow: none;
opacity: .6;
cursor: no-drop;
cursor: not-allowed;

&:hover,
&:focus {
opacity: .6;
> * {
pointer-events: none;
}
}

Expand Down

1 comment on commit 7027580

@vercel
Copy link

@vercel vercel bot commented on 7027580 Mar 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

wview-wiki – ./

wview-wiki-windy00.vercel.app
wview-wiki.vercel.app
wview-wiki-git-main-windy00.vercel.app

Please sign in to comment.