Skip to content

Commit

Permalink
fix(rate): fix rate style
Browse files Browse the repository at this point in the history
  • Loading branch information
@BeADre
BeADre committed Apr 15, 2022
1 parent a471399 commit 79edabf
Show file tree
Hide file tree
Showing 6 changed files with 24 additions and 22 deletions.
2 changes: 1 addition & 1 deletion packages/varlet-ui/src/rate/Rate.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default defineComponent({
return {
[n('content')]: true,
[n('--disabled')]: form?.disabled.value,
[n('--disabled')]: form?.disabled.value || props.disabled,
[n('--error')]: errorMessage.value,
[n('--primary')]: type !== 'empty' && !color,
}
Expand Down
20 changes: 10 additions & 10 deletions packages/varlet-ui/src/rate/__tests__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ exports[`test rate count 1`] = `
exports[`test rate disabled & readonly 1`] = `
"<div class=\\"var-rate__warp\\">
<div class=\\"var-rate\\">
<div style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"margin-right: 0px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content var-rate--disabled\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content var-rate--disabled\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content var-rate--disabled\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content var-rate--disabled\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"margin-right: 0px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content var-rate--disabled\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
</div>
<transition-stub>
<!--v-if-->
Expand Down Expand Up @@ -274,11 +274,11 @@ exports[`test rate example 1`] = `
<div class=\\"app-type\\">禁用评分</div>
<div class=\\"var-rate__warp\\">
<div class=\\"var-rate\\">
<div style=\\"color: rgb(187, 187, 187); margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content\\"><i class=\\"var-icon var-icon--set var-icon-star\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"color: rgb(187, 187, 187); margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content\\"><i class=\\"var-icon var-icon--set var-icon-star\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"color: rgb(187, 187, 187); margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content\\"><i class=\\"var-icon var-icon--set var-icon-star\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"color: rgb(187, 187, 187); margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"color: rgb(187, 187, 187); margin-right: 0px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content var-rate--disabled var-rate--primary\\"><i class=\\"var-icon var-icon--set var-icon-star\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content var-rate--disabled var-rate--primary\\"><i class=\\"var-icon var-icon--set var-icon-star\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content var-rate--disabled var-rate--primary\\"><i class=\\"var-icon var-icon--set var-icon-star\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content var-rate--disabled\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div style=\\"margin-right: 0px; width: 24px; height: 24px; border-radius: 50%;\\" class=\\"var-rate__content var-rate--disabled\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
</div>
<transition-stub>
<!--v-if-->
Expand Down
4 changes: 2 additions & 2 deletions packages/varlet-ui/src/rate/docs/en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export default {
The `disabled` attribute is used to set the rating to the status of no clicking, and the `disabled-color` is used to set the color of the icon when it is disabled.

```html
<var-rate v-model="score" disabled disabled-color="#bbbbbb"/>
<var-rate v-model="score" disabled/>
```

### Read only rating
Expand Down Expand Up @@ -180,7 +180,7 @@ Other values are converted to text as a user prompt.
| `half-icon` | The half-selected icon style only works if `half` is `true` | _string_ | `star-half-full` |
| `namespace` | Icon namespace, extensible custom icon library | _string_ | `var-icon` |
| `disabled` | Whether or not rating is prohibited | _boolean_ | `false` |
| `disabled-color` | The color of the icon when disabling grading is only effective when `disabled` is `true` and has higher priority than `color` and `empty-color` | _string_ | `#bdbdbd` |
| `disabled-color` | The color of the icon when disabling grading is only effective when `disabled` is `true` and has higher priority than `color` and `empty-color` | _string_ | `#aaa` |
| `readonly` | Whether to use rating read-only | _boolean_ | `false` |
| `ripple` | Whether to use water ripple | _boolean_ | `true` |
| `rules` | The validation rules，Returns `true` to indicate that the validation passed,The remaining values are converted to text as user prompts | _Array<(v: string \| number) => any>_ | `-` |
Expand Down
4 changes: 2 additions & 2 deletions packages/varlet-ui/src/rate/docs/zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export default {
通过 `disabled` 属性将评分设置为禁止点击状态，`disabled-color` 设置禁用时图标的颜色。

```html
<var-rate v-model="score" disabled disabled-color="#bbbbbb"/>
<var-rate v-model="score" disabled/>
```

### 只读评分
Expand Down Expand Up @@ -180,7 +180,7 @@ export default {
| `half-icon` | 半选时图标的样式，只有在 `half` 为 `true` 时才有效| _string_ | `star-half-full` |
| `namespace` | 图标的命名空间, 可扩展自定义图标库 | _string_ | `var-icon` |
| `disabled` | 是否禁止评分 | _boolean_ | `false`|
| `disabled-color` | 禁止评分时图标的颜色，只有在 `disabled` 为 `true` 时才有效，优先级高于 `color`、`empty-color`| _string_ | `-` |
| `disabled-color` | 禁止评分时图标的颜色，只有在 `disabled` 为 `true` 时才有效，优先级高于 `color`、`empty-color`| _string_ | `#aaa` |
| `readonly` | 是否使用评分只读 | _boolean_ | `false` |
| `ripple` | 是否使用水波纹 | _boolean_ | `true` |
| `rules` | 验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示 | _Array<(v: string \| number) => any>_ | `-` |
Expand Down
2 changes: 1 addition & 1 deletion packages/varlet-ui/src/rate/example/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
></var-rate>

<app-type>{{ pack.disableTheRating }}</app-type>
<var-rate v-model="score7" disabled disabled-color="#bbbbbb" />
<var-rate v-model="score7" disabled />

<app-type>{{ pack.readonlyRating }}</app-type>
<var-rate v-model="score8" readonly />
Expand Down
14 changes: 8 additions & 6 deletions packages/varlet-ui/src/rate/rate.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,20 @@
padding: var(--rate-action-padding);
box-sizing: unset;
cursor: pointer;
display: flex;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

&--disabled {
color: var(--rate-disabled-color) !important;
&--primary {
color: var(--rate-primary-color);
}

&--error {
color: var(--rate-error-color) !important;
&--disabled {
color: var(--rate-disabled-color);
cursor: not-allowed;
}

&--primary {
color: var(--rate-primary-color);
&--error {
color: var(--rate-error-color);
}
}

1 comment on commit 79edabf

@vercel
Copy link

@vercel vercel bot commented on 79edabf Apr 16, 2022

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:

varlet – ./

varlet-varletjs.vercel.app
varlet-git-dev-varletjs.vercel.app
varlet-two.vercel.app

Please sign in to comment.