diff --git a/packages/varlet-icons/svg/uF067-star-half.svg b/packages/varlet-icons/svg/uF067-star-half.svg new file mode 100644 index 00000000000..bf2884b4487 --- /dev/null +++ b/packages/varlet-icons/svg/uF067-star-half.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/varlet-icons/svg/uF068-star-outline.svg b/packages/varlet-icons/svg/uF068-star-outline.svg new file mode 100644 index 00000000000..715b6588058 --- /dev/null +++ b/packages/varlet-icons/svg/uF068-star-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/varlet-icons/svg/uF069-star-half-full.svg b/packages/varlet-icons/svg/uF069-star-half-full.svg new file mode 100644 index 00000000000..a06857d8598 --- /dev/null +++ b/packages/varlet-icons/svg/uF069-star-half-full.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/varlet-icons/svg/uF070-heart.svg b/packages/varlet-icons/svg/uF070-heart.svg new file mode 100644 index 00000000000..2cad9fc4769 --- /dev/null +++ b/packages/varlet-icons/svg/uF070-heart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/varlet-icons/svg/uF071-heart-half-full.svg b/packages/varlet-icons/svg/uF071-heart-half-full.svg new file mode 100644 index 00000000000..63668d74ceb --- /dev/null +++ b/packages/varlet-icons/svg/uF071-heart-half-full.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/varlet-icons/svg/uF072-heart-outline.svg b/packages/varlet-icons/svg/uF072-heart-outline.svg new file mode 100644 index 00000000000..26b2df3151f --- /dev/null +++ b/packages/varlet-icons/svg/uF072-heart-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/varlet-ui/src/badge/Badge.vue b/packages/varlet-ui/src/badge/Badge.vue index fd4cbdf5785..c896a5b35b2 100644 --- a/packages/varlet-ui/src/badge/Badge.vue +++ b/packages/varlet-ui/src/badge/Badge.vue @@ -7,14 +7,14 @@ 'var-badge__content', `var-badge--${type}`, position ? `var-badge--${position} var-badge--position` : null, - dotPosition, + dotPosition(), { 'var-badge--dot' : dot }, ]" :style="{background : color}" v-bind="$attrs" > - {{ values }} + {{ values() }} @@ -22,7 +22,7 @@ + + diff --git a/packages/varlet-ui/src/chip/chip/__tests__/index.spec.js b/packages/varlet-ui/src/chip/chip/__tests__/index.spec.js new file mode 100644 index 00000000000..77345b882be --- /dev/null +++ b/packages/varlet-ui/src/chip/chip/__tests__/index.spec.js @@ -0,0 +1,7 @@ +const chip = require('../../../cjs/chip').default +const { render } = require('@testing-library/vue') + +test('test chip', async () => { + const wrapper = render(chip) + console.log(wrapper) +}) diff --git a/packages/varlet-ui/src/chip/chip/chip.less b/packages/varlet-ui/src/chip/chip/chip.less new file mode 100644 index 00000000000..859a5cc8dcd --- /dev/null +++ b/packages/varlet-ui/src/chip/chip/chip.less @@ -0,0 +1,148 @@ +@import "../styles/var"; + +@chip-border-radius: 2px; +@chip-normal-height: 32px; +@chip-large-height: 40px; +@chip-small-height: 24px; +@chip-mini-height: 16px; +@chip-normal-padding: 0px 10px; +@chip-large-padding: 0px 17px; +@chip-small-padding: 0px 6px; +@chip-mini-padding: 0px 4px; + +.var { + &-fade-leave-to { + opacity: 0; + } + + &-fade-leave-active { + transition: opacity .3s; + } +} + +.var-chip { + justify-content: center; + align-items: center; + font-family: Roboto, sans-serif; + border-radius: @chip-border-radius; + cursor: default; + border: thin solid transparent; + vertical-align: middle; + line-height: 1; + + &--default { + color: #676767; + background: @color-background-base; + } + + &--primary { + color: #fff; + background-color: @color-primary; + } + + &--info { + color: #fff; + background-color: @color-info; + } + + &--success { + color: #fff; + background-color: @color-success; + } + + &--warning { + color: #fff; + background-color: @color-warning; + } + + &--danger { + color: #fff; + background-color: @color-danger; + } + + &--plain { + background-color: transparent; + + &:active { + box-shadow: none; + } + } + + &--plain-default { + color: inherit; + border-color: currentColor; + } + + &--plain-primary { + color: @color-primary; + border-color: currentColor; + } + + &--plain-info { + color: @color-info; + border-color: currentColor; + } + + &--plain-success { + color: @color-success; + border-color: currentColor; + } + + &--plain-warning { + color: @color-warning; + border-color: currentColor; + } + + &--plain-danger { + color: @color-danger; + border-color: currentColor; + } + + &--round { + border-radius: 100px; + } + + &--normal { + font-size: @font-size-md; + padding: @chip-normal-padding; + height: @chip-normal-height; + } + + &--large { + padding: @chip-large-padding; + font-size: @font-size-lg; + height: @chip-large-height; + + } + + &--small { + padding: @chip-small-padding; + font-size: @font-size-sm; + height: @chip-small-height; + + } + + &--mini { + padding: @chip-mini-padding; + font-size: @font-size-xs; + height: @chip-mini-height; + + } + + &--close { + cursor: pointer; + } + + &--text-normal,&--text-large { + margin: 0 5px; + } + + &--text-small { + margin: 0 3px; + } + + &--text-mini { + margin: 0 2px; + } + +} diff --git a/packages/varlet-ui/src/chip/chip/docs/en_US.md b/packages/varlet-ui/src/chip/chip/docs/en_US.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/varlet-ui/src/chip/chip/docs/zh_CN.md b/packages/varlet-ui/src/chip/chip/docs/zh_CN.md new file mode 100644 index 00000000000..bc523f055ae --- /dev/null +++ b/packages/varlet-ui/src/chip/chip/docs/zh_CN.md @@ -0,0 +1,163 @@ +# 标签 + +## 使用演示 + +### 引入 + +```js +import { Chip } from '@varlet/ui' + +export default defineComponent({ + components: { + [Chip.name]: Chip + } +}) +``` + +### 主题色标签 + +通过设置`type`属性控制标签的颜色 + +```html + +主要标签 +成功标签 +危险标签 +警告标签 +信息标签 +默认标签 +``` + +### 空心样式标签 + +通过设置`plain`属性把标签设置成空心样式 + +```html + +空心标签 +``` + +### 非圆角标签 + +通过设置`round`属性为`false`来取消标签的圆角样式 + +```html + +非圆角标签 +``` + +### 标签尺寸 + +通过设置`size`属性自定义标签的大小 + + ```html + +大标签 +中等标签 +小标签 +迷你标签 +``` + +### 块级flex + +```html + +块级标签 +块级标签 +``` + +### 可关闭标签 + +通过使用`closable`属性显示标签的关闭图标，使用`close-name`属性自定义关闭图标的样式（`close-name`必须在使用了`closeable`的情况下使用） + +```html + +可关闭标签 +自定义关闭图标 +``` + +```js +import { defineComponent, Ref, ref } from 'vue' + +export default defineComponent({ + setup() { + const show: Ref = ref(true); + const show1: Ref = ref(true); + return { show, show1 }; + } +}) +``` + +### 自定义颜色标签 + +通过设置`color`和`text-color`属性自定义标签颜色 + +```html + +标签 +标签 +标签 +标签 +``` + +### 添加左右插槽标签 + +自定义标签两侧插槽 + +```html + + + + 左侧插槽 + + + + 右侧插槽 + + + + + 左右两侧插槽 + +``` + +## API + +### 属性 + +|参数 | 说明 | 类型 | 默认值 | +| ---- | ---- | ---- | ---- | +| type | 类型, 可选值为 `default`, `primary`, `info`, `success`, `warning`, `danger` | _string_ | `default` | +| size | 尺寸, 可选值为 `normal`, `mini`, `small`, `large` | _string_ | `normal` | +| plain | 是否为空心样式 | _boolean_ | `false` | +| round | 是否为圆角样式 | _boolean_ | `true` | +| block | 块级元素 | _boolean_ | `false` | +| closeable | 是否为可关闭标签 | _boolean_ | `false` | +| close-name | 自定义可关闭标签的图标，必须在closeable为true的条件下才能用 | _string_ | _ | +| color | 标签颜色 | _string_ | _ | +| text-color | 文本颜色，优先级高于`color`属性 | _string_ | _ | + +### 插槽 + +| 名称 | 说明 | 参数 | +| ---- | ---- | ----| +| default | 默认插槽 | _ | +| left | 插入至标签的左侧 | _ | +| right | 插入至标签的右侧 | _ | + +### 事件 + +| 事件名 | 说明 | 回调参数 | +| ---- | ---- | ---- | +| close | 点击关闭按钮时触发，只有在显示关闭按钮的时候才能使用| _ | + + + diff --git a/packages/varlet-ui/src/chip/chip/example/index.vue b/packages/varlet-ui/src/chip/chip/example/index.vue new file mode 100644 index 00000000000..cd21419ddc6 --- /dev/null +++ b/packages/varlet-ui/src/chip/chip/example/index.vue @@ -0,0 +1,99 @@ + + + + + diff --git a/packages/varlet-ui/src/chip/chip/index.ts b/packages/varlet-ui/src/chip/chip/index.ts new file mode 100644 index 00000000000..61091193ab4 --- /dev/null +++ b/packages/varlet-ui/src/chip/chip/index.ts @@ -0,0 +1,8 @@ +import { App } from 'vue' +import Chip from './Chip.vue' + +Chip.install = function (app: App) { + app.component(Chip.name, Chip) +} + +export default Chip diff --git a/packages/varlet-ui/src/chip/chip/props.ts b/packages/varlet-ui/src/chip/chip/props.ts new file mode 100644 index 00000000000..dc0e4bc1945 --- /dev/null +++ b/packages/varlet-ui/src/chip/chip/props.ts @@ -0,0 +1,82 @@ +import { pickProps } from '../utils/components' +import { props as iconProps } from '../icon/props' + +function typeValidator(type: string): boolean { + return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type) +} + +function sizeValidator(size: string): boolean { + return ['normal', 'mini', 'small', 'large'].includes(size) +} + +export const props = { +// 标签类型 + type: { + type: String, + default: 'default', + validator: typeValidator + }, +// 标签尺寸 + size: { + type: String, + default: 'normal', + validator: sizeValidator + }, +// 是否使用水波纹 + disabled: { + type: Boolean, + default: true + }, +// 是否空心 + plain: { + type: Boolean, + default: false + }, +// 标签文字颜色 + color: { + type: String + }, +// 是否使用圆形标签 + round: { + type: Boolean, + default: true + }, +// 是否是块级元素 + block: { + type: Boolean, + default: false + }, +// 背景颜色 + background: { + type: String + }, +// 是否使用图标 + icon: { + type: Boolean, + default: false + }, +// 是否可关闭 + closable: { + type: Boolean, + default: false + }, +// 字体颜色 + textColor: { + type: String + }, +// 图标样式 + iconName: pickProps(iconProps, 'name'), +// 图标样式 +// iconType:pickProps(iconProps,'type'), +// 图标大小 +// iconSize:pickProps(iconProps,'size'), +// closeIcon: { +// type: String, +// default: false +// }, +// 取消回调 + onClose: { + type: Function + } +} + diff --git a/packages/varlet-ui/src/chip/docs/zh_CN.md b/packages/varlet-ui/src/chip/docs/zh_CN.md index c19986360d2..bc523f055ae 100644 --- a/packages/varlet-ui/src/chip/docs/zh_CN.md +++ b/packages/varlet-ui/src/chip/docs/zh_CN.md @@ -8,9 +8,9 @@ import { Chip } from '@varlet/ui' export default defineComponent({ - components: { - [Chip.name]: Chip - } + components: { + [Chip.name]: Chip + } }) ``` @@ -19,6 +19,7 @@ export default defineComponent({ 通过设置`type`属性控制标签的颜色 ```html + 主要标签 成功标签 危险标签 @@ -28,81 +29,104 @@ export default defineComponent({ ``` ### 空心样式标签 + 通过设置`plain`属性把标签设置成空心样式 ```html + 空心标签 ``` + ### 非圆角标签 -通过设置`round`属性为`false`把取消标签的圆角样式 + +通过设置`round`属性为`false`来取消标签的圆角样式 ```html + 非圆角标签 ``` ### 标签尺寸 -通过设置`size`属性控制标签的大小 + +通过设置`size`属性自定义标签的大小 + ```html + 大标签 中等标签 小标签 迷你标签 ``` + ### 块级flex + ```html + 块级标签 块级标签 ``` ### 可关闭标签 -通过使用`closable`属性控制显示标签的关闭图标，使用`close-name`属性设置关闭图标的样式（`close-name`必须在使用了`closeable`的情况下使用） + +通过使用`closable`属性显示标签的关闭图标，使用`close-name`属性自定义关闭图标的样式（`close-name`必须在使用了`closeable`的情况下使用） + ```html + 可关闭标签 自定义关闭图标 ``` ```js -import {defineComponent,Ref,ref} from 'vue' +import { defineComponent, Ref, ref } from 'vue' + export default defineComponent({ - setup(){ - const show: Ref = ref(true); - const show1: Ref = ref(true); - return {show,show1}; - } + setup() { + const show: Ref = ref(true); + const show1: Ref = ref(true); + return { show, show1 }; + } }) ``` + ### 自定义颜色标签 -通过设置`color`和`text-color`属性设置标签颜色 + +通过设置`color`和`text-color`属性自定义标签颜色 + ```html + 标签 标签 标签 标签 ``` + ### 添加左右插槽标签 + 自定义标签两侧插槽 + ```html - - - 左侧插槽 - - - - 右侧插槽 - - - - - 左右两侧插槽 - + + + + 左侧插槽 + + + + 右侧插槽 + + + + + 左右两侧插槽 + ``` ## API @@ -122,6 +146,7 @@ export default defineComponent({ | text-color | 文本颜色，优先级高于`color`属性 | _string_ | _ | ### 插槽 + | 名称 | 说明 | 参数 | | ---- | ---- | ----| | default | 默认插槽 | _ | diff --git a/packages/varlet-ui/src/rate/Rate.vue b/packages/varlet-ui/src/rate/Rate.vue new file mode 100644 index 00000000000..f7d39f20f28 --- /dev/null +++ b/packages/varlet-ui/src/rate/Rate.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/packages/varlet-ui/src/rate/__tests__/index.spec.js b/packages/varlet-ui/src/rate/__tests__/index.spec.js new file mode 100644 index 00000000000..0397086b1d9 --- /dev/null +++ b/packages/varlet-ui/src/rate/__tests__/index.spec.js @@ -0,0 +1,7 @@ +const Rate = require('../../../cjs/rate').default +const { render } = require('@testing-library/vue') + +test('test rate', async () => { + const wrapper = render(Rate) + console.log(wrapper) +}) diff --git a/packages/varlet-ui/src/rate/docs/en_US.md b/packages/varlet-ui/src/rate/docs/en_US.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/varlet-ui/src/rate/docs/zh_CN.md b/packages/varlet-ui/src/rate/docs/zh_CN.md new file mode 100644 index 00000000000..11626ecd49e --- /dev/null +++ b/packages/varlet-ui/src/rate/docs/zh_CN.md @@ -0,0 +1,282 @@ +# 评分 + +## 使用演示 + +### 引入 + +```js +import { Rate } from '@varlet/ui' + +export default defineComponent({ + components: { + [Rate.name]: Rate + } +}) +``` + +### 基础评分 + +默认显示样式 + +```html + + +``` + +```js +import { defineComponent, Ref, ref } from 'vue' + +export default defineComponent({ + setup() { + const score: Ref = ref(3) + return { score }; + } +}) +``` + +### 自定义评分总数 + +通过设置`count`属性自定义评分总数 + +```html + + +``` + +```js +import { defineComponent, Ref, ref } from 'vue' + +export default defineComponent({ + setup() { + const score: Ref = ref(3) + return { score }; + } +}) +``` + +### 自定义评分图标颜色 + +通过设置`color`、`empty-color`属性来自定义选中是的颜色和未选中时的颜色 + +```html + + + + + +``` + +```js +import { defineComponent, Ref, ref } from 'vue' + +export default defineComponent({ + setup() { + const score: Ref = ref(3) + return { score }; + } +}) +``` + +### 自定义评分图标样式 + +通过设置`icon`、`empty-icon`属性来自定义选中和未选的图标样式 + +```html + + +``` + +```js +import { defineComponent, Ref, ref } from 'vue' + +export default defineComponent({ + setup() { + const score: Ref = ref(3) + return { score }; + } +}) +``` + +### 自定义评分图标尺寸 + +通过设置`size`属性来自定义评分图标的大小 + +```html + + + + + +``` + +```js +import { defineComponent, Ref, ref } from 'vue' + +export default defineComponent({ + setup() { + const score: Ref = ref(3) + return { score }; + } +}) +``` + +### 自定义图标间隔 + +通过设置`paddingRight`属性来自定义评分之间的间隔 + +```html + + + + + +``` + +```js +import { defineComponent, Ref, ref } from 'vue' + +export default defineComponent({ + setup() { + const score: Ref = ref(3) + return { score }; + } +}) +``` + +### 允许半图标 + +通过设置`half`属性允许评分半选，使用`half-icon`自定义图标半选时的样式 + +```html + + + +``` + +```js +import { defineComponent, Ref, ref } from 'vue' + +export default defineComponent({ + setup() { + const score: Ref = ref(3.5) + return { score }; + } +}) +``` + +### 禁用评分 + +通过设置`disabled`属性让评分处于禁止点击状态，使用`disabled-color`自定义禁用时图标的颜色 + +```html + + +``` + +```js +import { defineComponent, Ref, ref } from 'vue' + +export default defineComponent({ + setup() { + const score: Ref = ref(3) + return { score }; + } +}) +``` + +### 只读评分 + +通过设置`readonly`属性让评分处于只读状态 + +```html + + +``` + +```js +import { defineComponent, Ref, ref } from 'vue' + +export default defineComponent({ + setup() { + const score: Ref = ref(3) + return { score }; + } +}) +``` + +### 使用水波纹 + +通过设置`ripple`属性让评分时出现水波纹样式 + +```html + + +``` + +```js +import { defineComponent, Ref, ref } from 'vue' + +export default defineComponent({ + setup() { + const score: Ref = ref(3) + return { score }; + } +}) +``` + +### 监听change事件 + +通过调用`change`事件完成其他交互逻辑 + +```html + + +``` + +```js +import { defineComponent, Ref, ref } from 'vue' + +export default defineComponent({ + setup() { + const score: Ref = ref(3) + const handleChange = (score: number) => { + Snackbar({ + content: `click ${score}`, + position: 'top' + }) + } + return { score, handleChange }; + } +}) +``` + +## API + +### 属性 + +|参数 | 说明 | 类型 | 默认值 | +| ---- | ---- | ---- | ---- | +| v-model | 当前分数 | _number_ | _ | +| count | 评分总数 | _number_ | `5` | +| color | 选中时图标的颜色 | _string_ | `#ff9800`| +| icon | 选中整个图标时的图标样式 | _string_ | `star`| +| empty-color | 未选中时图标的颜色 | _string_ | `#bdbdbd`| +| empty-icon | 未选中时图标的样式 | _string_ | `star-outline`| +| size | 图标大小，默认单位为`px` | _number_,_string_ | `20`| +| margin-right | 图标间隔，默认单位为`px` | _number_,_string_ | `4`| +| half | 是否允许半选 | _boolean_ | `false`| +| half-icon | 半选时图标的样式，只有在`half`为`true`时才有效| _string_ | `star-half-full`| +| disabled | 是否禁止评分 | _boolean_ | `false`| +| disabled-color | 禁止评分时图标的颜色，只有在`disabled`为`true`时才有效，优先级高于`color`、`empty-color`| _string_ | `#bdbdbd`| +| readonly | 是否使用评分只读 | _boolean_ | `false`| +| ripple | 是否使用水波纹 | _boolean_ | `false`| + +### 事件 + +| 事件名 | 说明 | 回调参数 | +| ---- | ---- | ---- | +| change | 评分改变时触发| 当前所点击所对应的分数 | + + + diff --git a/packages/varlet-ui/src/rate/example/index.vue b/packages/varlet-ui/src/rate/example/index.vue new file mode 100644 index 00000000000..aef2b89745d --- /dev/null +++ b/packages/varlet-ui/src/rate/example/index.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/packages/varlet-ui/src/rate/index.ts b/packages/varlet-ui/src/rate/index.ts new file mode 100644 index 00000000000..c3d9e1f2bf0 --- /dev/null +++ b/packages/varlet-ui/src/rate/index.ts @@ -0,0 +1,8 @@ +import { App } from 'vue' +import Rate from './Rate.vue' + +Rate.install = function(app: App) { + app.component(Rate.name, Rate) +} + +export default Rate diff --git a/packages/varlet-ui/src/rate/props.ts b/packages/varlet-ui/src/rate/props.ts new file mode 100644 index 00000000000..57e03cd25eb --- /dev/null +++ b/packages/varlet-ui/src/rate/props.ts @@ -0,0 +1,80 @@ +export const props = { + // 当前分数 + modelValue: { + type: Number, + default: 3, + }, + 'onUpdate:modelValue': { + type: Function, + }, + // 图标总数 + count: { + type: Number, + default: 5, + }, + // 选中时的颜色 + color: { + type: String, + default: '#ff9800', + }, + // 选中时图标样式 + icon: { + type: String, + default: 'star', + }, + // 未选中的图标的颜色 + emptyColor: { + type: String, + default: '#bdbdbd', + }, + // 未选中时图标样式 + emptyIcon: { + type: String, + default: 'star-outline', + }, + // 图标大小 + size: { + type: [String, Number], + default: '20', + }, + // 图标间隔 + marginRight: { + type: [String, Number], + default: '4', + }, + + // 是否使用半评分 + half: { + type: Boolean, + default: false, + }, + // 选择一半时使用的图标 + halfIcon: { + type: String, + default: 'star-half-full', + }, + // 是否禁用 + disabled: { + type: Boolean, + default: false, + }, + // 禁用后的图标颜色 + disabledColor: { + type: String, + default: '#bdbdbd', + }, + // 是否只读 + readonly: { + type: Boolean, + default: false, + }, + // 点击时是否有水波纹样式 + ripple: { + type: Boolean, + default: false, + }, + // 点击回调 + onChange: { + type: Function, + }, +} diff --git a/packages/varlet-ui/src/rate/rate.less b/packages/varlet-ui/src/rate/rate.less new file mode 100644 index 00000000000..e17880c7170 --- /dev/null +++ b/packages/varlet-ui/src/rate/rate.less @@ -0,0 +1,5 @@ +@import "../styles/var"; + +.var-rate { + display: flex; +} diff --git a/packages/varlet-ui/varlet.config.js b/packages/varlet-ui/varlet.config.js index 084da18192c..7670c5f5df5 100644 --- a/packages/varlet-ui/varlet.config.js +++ b/packages/varlet-ui/varlet.config.js @@ -89,6 +89,13 @@ module.exports = { }, doc: 'badge', }, + { + text: { + zh_CN: 'Rate 评分', + en_US: 'Rate', + }, + doc: 'rate', + }, { text: { zh_CN: 'Expansion panels 拓展面板',