Skip to content

Commit

Permalink
feat: 添加badge，更新依赖与配置
Browse files Browse the repository at this point in the history
  • Loading branch information
@Yin-Jinlong
Yin-Jinlong committed Sep 22, 2024
1 parent 928b48e commit 9f1a2e9
Show file tree
Hide file tree
Showing 22 changed files with 2,270 additions and 1,502 deletions.
2 changes: 1 addition & 1 deletion .editorconfig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ charset = utf-8
end_of_line = crlf
indent_size = 4
indent_style = space
insert_final_newline = true
insert_final_newline = false
max_line_length = 120
tab_width = 4
ij_continuation_indent_size = 8
Expand Down
1 change: 1 addition & 0 deletions .gitattributes
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
* text=auto
pnpm-lock.yaml eol=lf
package.json eol=lf
*.csv eol=lf
56 changes: 56 additions & 0 deletions docs/components/badge/colors.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<template>
<div class="box">
<h-badge color="primary">
<h-button type="plain">
primary
</h-button>
</h-badge>
<h-badge color="success">
<h-button type="plain">
success
</h-button>
</h-badge>
<h-badge color="warning">
<h-button type="plain">
warning
</h-button>
</h-badge>
<h-badge color="danger">
<h-button type="plain">
danger
</h-button>
</h-badge>
<h-badge color="info">
<h-button type="plain">
info
</h-button>
</h-badge>
<h-badge color="emphasize">
<h-button type="plain">
emphasize
</h-button>
</h-badge>
<h-badge color="#39e">
<h-button type="plain">
自定义
</h-button>
</h-badge>
</div>

</template>

<style scoped lang="scss">
.box {
display: flex;
flex-wrap: wrap;
& > * {
margin: 0.5rem;
}
}
</style>

<script setup lang="ts">
import {HBadge, HButton} from '@yin-jinlong/h-ui'
</script>
32 changes: 32 additions & 0 deletions docs/components/badge/content.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<template>
<div class="box">
<h-badge :value="100">
<h-button type="plain">
默认数字
</h-button>
</h-badge>
<h-badge value="new">
<h-button type="plain">
自定义字符串
</h-button>
</h-badge>
</div>

</template>

<style scoped lang="scss">
.box {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
& > * {
margin: 0.5rem;
}
}
</style>

<script setup lang="ts">
import {HBadge, HButton} from '@yin-jinlong/h-ui'
</script>
51 changes: 51 additions & 0 deletions docs/components/badge/count.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<template>
<div class="box">
<h-badge>
<h-button type="plain">
默认
</h-button>
</h-badge>
<h-badge :value="10">
<h-button type="plain">
10
</h-button>
</h-badge>
<h-badge :value="100">
<h-button type="plain">
100
</h-button>
</h-badge>
<h-badge :value="100" :max="9">
<h-button type="plain">
自定义上限
</h-button>
</h-badge>
<h-badge :value="0" :min="0">
<h-button type="plain">
自定义下限
</h-button>
</h-badge>
<h-badge :value="0">
<h-button type="plain">
0
</h-button>
</h-badge>
</div>

</template>

<style scoped lang="scss">
.box {
display: flex;
flex-wrap: wrap;
& > * {
margin: 0.5rem;
}
}
</style>

<script setup lang="ts">
import {HBadge, HButton} from '@yin-jinlong/h-ui'
</script>
36 changes: 36 additions & 0 deletions docs/components/badge/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: H-UI-Badge
---

# Badge 标记

## 颜色

按钮的颜色。可以是已经定义的颜色（如`primary`），
也可以是有效的`css`颜色值（如`red` `#39e` `var(--my-color-var)`）。

[.colors]

## 数量

[.count]

## 溢出显示

[.overflow]

## 内容

当内容为`string`时，`min` `max`将会忽略。为空（`''`）时不显示。

[.content]

## 大小

可以通过修改`font-size`来调整大小。

`badge`的`font-size`为`0.5em`

[.size]

[:api=badge]
36 changes: 36 additions & 0 deletions docs/components/badge/overflow.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<template>
<div class="box">
<h-badge :value="100">
<h-button type="plain">
默认
</h-button>
</h-badge>
<h-badge :value="100" overflow="dot">
<h-button type="plain">
圆点2位
</h-button>
</h-badge>
<h-badge :value="1000" overflow="dot" :max="999">
<h-button type="plain">
圆点3位
</h-button>
</h-badge>
</div>

</template>

<style scoped lang="scss">
.box {
display: flex;
flex-wrap: wrap;
& > * {
margin: 0.5rem;
}
}
</style>

<script setup lang="ts">
import {HBadge, HButton} from '@yin-jinlong/h-ui'
</script>
37 changes: 37 additions & 0 deletions docs/components/badge/size.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<template>
<div class="box">
<h-badge :value="100">
<h-button type="plain">
默认
</h-button>
</h-badge>
<h-badge :value="100" style="font-size: 12px">
<h-button type="plain">
小
</h-button>
</h-badge>
<h-badge :value="1000" style="font-size: 30px">
<h-button type="plain">
大
</h-button>
</h-badge>
</div>

</template>

<style scoped lang="scss">
.box {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
& > * {
margin: 0.5rem;
}
}
</style>

<script setup lang="ts">
import {HBadge, HButton} from '@yin-jinlong/h-ui'
</script>
36 changes: 18 additions & 18 deletions docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,36 @@
"license": "GPL-3.0",
"devDependencies": {
"@types/js-yaml": "^4.0.9",
"@types/markdown-it": "^14.0.1",
"@types/node": "^20.11.28",
"@types/prismjs": "^1.26.3",
"@vitejs/plugin-vue": "^5.0.4",
"@vitest/coverage-v8": "^1.4.0",
"@vitest/ui": "^1.4.0",
"@types/markdown-it": "^14.1.2",
"@types/node": "^20.16.5",
"@types/prismjs": "^1.26.4",
"@vitejs/plugin-vue": "^5.1.4",
"@vitest/coverage-v8": "^1.6.0",
"@vitest/ui": "^1.6.0",
"chalk": "^5.3.0",
"esno": "^4.7.0",
"happy-dom": "^14.3.9",
"happy-dom": "^14.12.3",
"js-base64": "^3.7.7",
"js-yaml": "^4.1.0",
"lightningcss": "^1.24.1",
"lightningcss": "^1.27.0",
"markdown-it": "^14.1.0",
"markdown-it-front-matter": "^0.2.4",
"prismjs": "^1.29.0",
"rollup": "^4.13.0",
"rollup": "^4.22.4",
"rollup-plugin-copy": "^3.5.0",
"rollup-plugin-visualizer": "^5.12.0",
"sass": "^1.72.0",
"terser": "^5.29.2",
"typescript": "^5.4.2",
"vite": "^5.1.5",
"sass": "^1.79.3",
"terser": "^5.33.0",
"typescript": "^5.6.2",
"vite": "^5.4.7",
"vite-plugin-compression": "^0.5.1",
"vitest": "^1.4.0",
"vue-tsc": "^2.0.6"
"vitest": "^1.6.0",
"vue-tsc": "^2.1.6"
},
"dependencies": {
"echarts": "^5.5.0",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
"echarts": "^5.5.1",
"vue": "^3.5.8",
"vue-router": "^4.4.5"
},
"web-types": "../dist/web-types.json"
}
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"devDependencies": {
"@yin-jinlong/build": "^0.0.2",
"@yin-jinlong/run": "^0.1.3",
"tsx": "^4.7.2"
"tsx": "^4.19.1"
},
"license": "GPL-3.0"
}
8 changes: 8 additions & 0 deletions packages/components/badge/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import Badge from './src/badge.vue'

export const HBadge = Badge

export * from './src/props'
export * from './src/type'

export default HBadge
35 changes: 35 additions & 0 deletions packages/components/badge/src/badge.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<template>
<div :style="{
[cssVarName('badge-color')]: convertColor(color?.toString())
}" class="h-badge" data-relative>
<slot name="default"/>
<sup v-if="typeof value==='number'?value>=min:value?.length" class="h-badge-dot">
{{ getValue() }}
</sup>
</div>
</template>

<script lang="ts" setup>
import {convertColor, cssVarName} from '@yin-jinlong/h-ui/utils'
import DefaultProps, {HBadgeProps} from './props'
const props = withDefaults(defineProps<HBadgeProps>(), DefaultProps)
function getValue() {
if (typeof props.value === 'string')
return props.value
if (props.value > props.max) {
switch (props.overflow) {
case 'max-plus':
return props.max + '+'
case 'dot':
let len = Math.floor(Math.log10(props.value))
return '•'.repeat(len)
default:
return props.max
}
}
return props.value
}
</script>
Loading

0 comments on commit 9f1a2e9

Please sign in to comment.