From 79e6bdb1c2915235acd70afafe3042c6aa094fc9 Mon Sep 17 00:00:00 2001 From: smchen Date: Fri, 8 Oct 2021 14:16:29 +0800 Subject: [PATCH 01/10] =?UTF-8?q?feat(TagInput):=20=E5=AE=8C=E5=96=84tag-i?= =?UTF-8?q?nput=E5=8F=82=E6=95=B0=E4=BB=A5=E5=8F=8A=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/tag-input/src/tag-input.tsx | 23 +++++++++++++--- docs/components/tag-input/index.md | 43 +++++++++++++++++++++++------- 2 files changed, 53 insertions(+), 13 deletions(-) diff --git a/devui/tag-input/src/tag-input.tsx b/devui/tag-input/src/tag-input.tsx index 8ed491cb..70d35d82 100644 --- a/devui/tag-input/src/tag-input.tsx +++ b/devui/tag-input/src/tag-input.tsx @@ -20,13 +20,21 @@ const tagInputProps = { type: String, default: '' }, + minLength: { + type: Number, + default: 3 + }, + maxLength: { + type: Number, + default: Number.MAX_SAFE_INTEGER + }, maxTags: { type: Number, default: Number.MAX_SAFE_INTEGER }, maxTagsText: { type: String, - default: '' + default: '已达到最大个数：' }, spellcheck: { type: Boolean, @@ -40,6 +48,10 @@ const tagInputProps = { type: Boolean, default: false }, + isAddBySpace: { + type: Boolean, + default: true + }, disabledText: { type: String, default: '' @@ -125,6 +137,8 @@ export default defineComponent({ }; const handleEnter = () => { let res = { [props.displayProperty]: tagInputVal.value }; + // 判断输入框和输入建议是否为空 + if (tagInputVal.value === '' && mergedSuggestions.value.length === 0) return false if (mergedSuggestions.value.length) { const target = mergedSuggestions.value[selectIndex.value]; res = target; @@ -215,7 +229,8 @@ export default defineComponent({ isShowSuggestion, noData, mergedSuggestions, - selectIndex + selectIndex, + maxTags } = this; const inputBoxCls = { @@ -268,10 +283,10 @@ export default defineComponent({ onFocus={onInputFocus} onBlur={onInputBlur} onInput={($event: any) => onInput($event)} - placeholder={placeholder} + placeholder={isTagsLimit ? `${maxTagsText} ${maxTags}` : placeholder} spellcheck={spellcheck} disabled={isTagsLimit} - title={isTagsLimit ? maxTagsText : ''} /> + /> { !isShowSuggestion ? '' : ( diff --git a/docs/components/tag-input/index.md b/docs/components/tag-input/index.md index 80bd047c..2e3b2a5d 100644 --- a/docs/components/tag-input/index.md +++ b/docs/components/tag-input/index.md @@ -9,20 +9,23 @@ ### 基本用法 +v-model:tags="state.tags" +v-model:suggestionList="state.suggestionList" +display-property="name" +no-data="暂无数据" +:maxTags="4" +placeholder="请输入名字" + +> ```html ``` @@ -37,8 +40,30 @@ export default defineComponent({ }) return { - state, + state } } }) - \ No newline at end of file + + +### d-tag-input 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| :-------------: | :-------: | :---------------------: | :----------------------------------: | :--------------------------- | ---------- | +| tags | `Array` | [] | 必选，记录输入的标签和选择的标签列表 | [基本用法](#基本用法) | +| suggestionList | `Array` | [] | 可选，下拉选项，默认可选择的标签列表 | [基本用法](#基本用法) | +| displayProperty | `string` | 'name' | 可选，列表项使用的属性名 | [基本用法](#基本用法) | +| placeholder | `boolean` | '' | 可选，输入框的 placeholder | [基本用法](#基本用法) | +| noData | `boolean` | '' | 可选，无数据提示 | [基本用法](#基本用法) | +| maxTags | `number` | Number.MAX_SAFE_INTEGER | 可选，可输入标签的最大个数 | [基本用法](demo#basic-usage) | +| caseSensitivity | `boolean` | false | 可选，大小写敏感，默认忽略大小写 | [基本用法](demo#basic-usage) | | +| spellcheck | `boolean` | true | 可选，input 输入框是否开启拼写检查的 | [基本用法](demo#basic-usage) | | +| isAddBySpace | `boolean` | true | 可选，是否支持空格键输入标签 | [基本用法](demo#basic-usage) | | +| disabled | `boolean` | false | 可选，disabled 灰化状态 | [基本用法](demo#basic-usage) | +| showAnimation | `boolean` | true | 可选，是否开启动画 | | ✔ | + +### d-tags-input 事件 + +| 事件 | 类型 | 说明 | 跳转 Demo | +| :---------: | :-----------------: | :------------------------------------------------------- | --------------------- | +| valueChange | `EventEmitter` | 当选中某个选项项后，将会调用此函数，参数为当前选择项的值 | [基本用法](#基本用法) | -- Gitee From 44a5ba638cf5ae8b108e1fa1906a6356aeb896f9 Mon Sep 17 00:00:00 2001 From: smchen Date: Fri, 8 Oct 2021 14:35:10 +0800 Subject: [PATCH 02/10] =?UTF-8?q?fix:=20=E5=8E=BB=E6=8E=89=E5=8F=82?= =?UTF-8?q?=E6=95=B0=E8=A1=A8=E6=A0=BC=E9=83=A8=E5=88=86=E8=B7=B3=E8=BD=AC?= =?UTF-8?q?demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/tag-input/index.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/components/tag-input/index.md b/docs/components/tag-input/index.md index 2e3b2a5d..82dc0ab4 100644 --- a/docs/components/tag-input/index.md +++ b/docs/components/tag-input/index.md @@ -48,19 +48,19 @@ export default defineComponent({ ### d-tag-input 参数 -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | -| :-------------: | :-------: | :---------------------: | :----------------------------------: | :--------------------------- | ---------- | -| tags | `Array` | [] | 必选，记录输入的标签和选择的标签列表 | [基本用法](#基本用法) | -| suggestionList | `Array` | [] | 可选，下拉选项，默认可选择的标签列表 | [基本用法](#基本用法) | -| displayProperty | `string` | 'name' | 可选，列表项使用的属性名 | [基本用法](#基本用法) | -| placeholder | `boolean` | '' | 可选，输入框的 placeholder | [基本用法](#基本用法) | -| noData | `boolean` | '' | 可选，无数据提示 | [基本用法](#基本用法) | -| maxTags | `number` | Number.MAX_SAFE_INTEGER | 可选，可输入标签的最大个数 | [基本用法](demo#basic-usage) | -| caseSensitivity | `boolean` | false | 可选，大小写敏感，默认忽略大小写 | [基本用法](demo#basic-usage) | | -| spellcheck | `boolean` | true | 可选，input 输入框是否开启拼写检查的 | [基本用法](demo#basic-usage) | | -| isAddBySpace | `boolean` | true | 可选，是否支持空格键输入标签 | [基本用法](demo#basic-usage) | | -| disabled | `boolean` | false | 可选，disabled 灰化状态 | [基本用法](demo#basic-usage) | -| showAnimation | `boolean` | true | 可选，是否开启动画 | | ✔ | +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| :-------------: | :-------: | :---------------------: | :----------------------------------: | :-------------------- | ---------- | +| tags | `Array` | [] | 必选，记录输入的标签和选择的标签列表 | [基本用法](#基本用法) | +| suggestionList | `Array` | [] | 可选，下拉选项，默认可选择的标签列表 | [基本用法](#基本用法) | +| displayProperty | `string` | 'name' | 可选，列表项使用的属性名 | [基本用法](#基本用法) | +| placeholder | `boolean` | '' | 可选，输入框的 placeholder | [基本用法](#基本用法) | +| noData | `boolean` | '' | 可选，无数据提示 | [基本用法](#基本用法) | +| maxTags | `number` | Number.MAX_SAFE_INTEGER | 可选，可输入标签的最大个数 | [基本用法](#基本用法) | +| caseSensitivity | `boolean` | false | 可选，大小写敏感，默认忽略大小写 | | | +| spellcheck | `boolean` | true | 可选，input 输入框是否开启拼写检查的 | | | +| isAddBySpace | `boolean` | true | 可选，是否支持空格键输入标签 | | | +| disabled | `boolean` | false | 可选，disabled 灰化状态 | | +| showAnimation | `boolean` | true | 可选，是否开启动画 | | ✔ | ### d-tags-input 事件 -- Gitee From 6124d2616eb99b57ea99c962be812a7d666b21fb Mon Sep 17 00:00:00 2001 From: smchen Date: Fri, 8 Oct 2021 16:53:26 +0800 Subject: [PATCH 03/10] =?UTF-8?q?feat(rate):=20=E6=96=B0=E5=A2=9E=E5=8D=8A?= =?UTF-8?q?=E9=80=89=E6=A8=A1=E5=BC=8F=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/rate/src/rate.tsx | 35 ++++++++++++++++++++++++++--------- devui/rate/src/use-rate.ts | 4 ++++ docs/components/rate/index.md | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 64 insertions(+), 9 deletions(-) diff --git a/devui/rate/src/rate.tsx b/devui/rate/src/rate.tsx index 7b8eeeb0..74d92f90 100644 --- a/devui/rate/src/rate.tsx +++ b/devui/rate/src/rate.tsx @@ -41,11 +41,12 @@ export default defineComponent({ initRating() }) - const hoverToggle = (_, index: number, reset = false) => { + const hoverToggle = (e, index: number, reset = false) => { if (props.read) { return } if (reset) { + console.log(chooseValue.value) if (chooseValue.value >= 0) { setChange(0, chooseValue.value + 1, '100%') setChange(chooseValue.value + 1, props.count, '0') @@ -54,17 +55,34 @@ export default defineComponent({ } } else { setChange(0, index + 1, '100%') + // 判断是否是半选模式并且判断鼠标所在图标区域 + if (props.allowHalf && (e.offsetX * 2 <= e.target.clientWidth)) { + setChange(index, index + 1, '50%') + } else { + setChange(index, index + 1, '100%') + } setChange(index + 1, props.count, '0') } } - const selectValue = (index: number) => { + const selectValue = (e, index: number) => { if (props.read) { return } - setChange(0, index + 1, '100%') + setChange(0, index, '100%') + // 判断是否是半选模式 + if (props.allowHalf && (e.offsetX * 2 <= e.target.clientWidth)) { + console.log('半') + setChange(index, index + 1, '50%') + chooseValue.value = index - 0.5 + } else { + console.log('全') + setChange(index, index + 1, '100%') + chooseValue.value = index + } setChange(index + 1, props.count, '0') - chooseValue.value = index + console.log(index + 1) + index = chooseValue.value props.onChange && props.onChange(index + 1) props.onTouched && props.onTouched() ctx.emit('update:modelValue', index + 1) @@ -86,7 +104,7 @@ export default defineComponent({ type, color, hoverToggle, - selectValue, + selectValue } = this return (
{totalLevelArray.map((item, index) => (
hoverToggle(e, index)} - onClick={() => selectValue(index)} + onClick={(e) => selectValue(e, index)} > {icon && !character && ( diff --git a/devui/rate/src/use-rate.ts b/devui/rate/src/use-rate.ts index c62c7a1c..d5ced884 100644 --- a/devui/rate/src/use-rate.ts +++ b/devui/rate/src/use-rate.ts @@ -29,6 +29,10 @@ export const rateProps = { type: String, default: '', }, + allowHalf: { + type: Boolean, + default: false, + }, onChange: { type: Function as PropType<(value: number) => void>, default: undefined, diff --git a/docs/components/rate/index.md b/docs/components/rate/index.md index ab3f6ff3..16540d0b 100644 --- a/docs/components/rate/index.md +++ b/docs/components/rate/index.md @@ -74,6 +74,33 @@ export default { } ``` +::: + +### 半选模式 + +:::demo + +```vue + + +``` ::: @@ -137,3 +164,10 @@ d-rate 参数 | color | `string` | -- | 可选，星星颜色 | [动态模式-自定义](#动态模式-自定义) | | icon | `string` | -- | 可选，评分图标的样式，只支持 devUI 图标库中所有图标 | [动态模式](#动态模式) | | character | `string` | -- | 可选，评分图标的样式，icon 与 character 只能设置其中一个 | [动态模式-自定义](#动态模式-自定义) | +| allowHalf | `boolean` | false | 可选，动态模式下是否允许半选 | [半选模式](#半选模式) | + +d-rate 事件 + +| 参数 | 类型 | 说明 | 回调参数 | 跳转 Demo | +| --------------- | -------------------- | ----------------------------- | ----------------------------- | --------------------- | +| change | `EventEmitter` | 分值改变时触发 | 改变后的分值 | [半选模式](#半选模式) | -- Gitee From 8dd9fe27cf4b1c0ae5ac23592dd7e0663ace5ca5 Mon Sep 17 00:00:00 2001 From: smchen Date: Fri, 8 Oct 2021 16:59:08 +0800 Subject: [PATCH 04/10] =?UTF-8?q?fix:=20=E5=8E=BB=E9=99=A4=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E6=8E=A7=E5=88=B6=E5=8F=B0=E8=BE=93=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/rate/index.ts | 1 + devui/rate/src/rate.tsx | 4 ---- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/devui/rate/index.ts b/devui/rate/index.ts index 7955ec32..ec34c358 100644 --- a/devui/rate/index.ts +++ b/devui/rate/index.ts @@ -10,6 +10,7 @@ export { Rate } export default { title: 'Rate 评分', category: '数据录入', + status: '已完成', install(app: App): void { app.use(Rate as any); }, diff --git a/devui/rate/src/rate.tsx b/devui/rate/src/rate.tsx index 74d92f90..d9ccd759 100644 --- a/devui/rate/src/rate.tsx +++ b/devui/rate/src/rate.tsx @@ -46,7 +46,6 @@ export default defineComponent({ return } if (reset) { - console.log(chooseValue.value) if (chooseValue.value >= 0) { setChange(0, chooseValue.value + 1, '100%') setChange(chooseValue.value + 1, props.count, '0') @@ -72,16 +71,13 @@ export default defineComponent({ setChange(0, index, '100%') // 判断是否是半选模式 if (props.allowHalf && (e.offsetX * 2 <= e.target.clientWidth)) { - console.log('半') setChange(index, index + 1, '50%') chooseValue.value = index - 0.5 } else { - console.log('全') setChange(index, index + 1, '100%') chooseValue.value = index } setChange(index + 1, props.count, '0') - console.log(index + 1) index = chooseValue.value props.onChange && props.onChange(index + 1) props.onTouched && props.onTouched() -- Gitee From 5eec0a88ef454c40778fb94d4ff4afffdc978166 Mon Sep 17 00:00:00 2001 From: smchen Date: Fri, 8 Oct 2021 18:07:24 +0800 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=E5=BF=AB=E9=80=9F=E5=BC=80?= =?UTF-8?q?=E5=A7=8B=E5=A2=9E=E5=8A=A0=E6=8C=89=E9=9C=80=E5=BC=95=E5=85=A5?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/index.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/docs/index.md b/docs/index.md index bc713836..f6f46f1c 100644 --- a/docs/index.md +++ b/docs/index.md @@ -32,12 +32,47 @@ yarn add vue-devui main.ts ```js +// 全局引入 import DevUI from 'vue-devui' import 'vue-devui/style.css' createApp(App).use(DevUI).mount('#app') ``` +```js +// 按需引入 +// main.ts文件 +import { createApp } from 'vue' +import App from './App.vue' + +// Step 1: 引入单个组件 +import { Button } from 'vue-devui' +// or import Button from 'vue-devui/button' +// Step 2: 引入组件样式 +// 方式一：手动引入组件样式 +import 'vue-devui/button/style.css' + +// 方式二：自动按需引入组件 +// vite.config.ts文件 +// import styleImport from 'vite-plugin-style-import' +// plugins: [ +// vue(), +// styleImport({ +// libs: [ +// { +// libraryName: 'vue-devui', +// esModule: true, +// resolveStyle: (name) => `vue-devui/${name}/style`, +// }, +// ], +// }) +// ] + +createApp(App) +.use(Button) // Step 3: 使用组件 +.mount('#app') +``` + ### 4. 启动开发调试 ```shell -- Gitee From cc2e34cae06f69b063af144a3d90461f7c0b99cf Mon Sep 17 00:00:00 2001 From: smchen Date: Sat, 9 Oct 2021 17:49:45 +0800 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=9B=AE=E5=BD=95=E5=BF=AB=E9=80=9F=E5=89=8D=E5=BE=80?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-theme/components/Page.vue | 6 +- .../devui-theme/components/PageToc.vue | 108 ++++++++++++++++++ .../devui-theme/composables/useToc.ts | 57 +++++++++ 3 files changed, 169 insertions(+), 2 deletions(-) create mode 100644 docs/.vitepress/devui-theme/components/PageToc.vue create mode 100644 docs/.vitepress/devui-theme/composables/useToc.ts diff --git a/docs/.vitepress/devui-theme/components/Page.vue b/docs/.vitepress/devui-theme/components/Page.vue index 7a1d422b..2aee748b 100644 --- a/docs/.vitepress/devui-theme/components/Page.vue +++ b/docs/.vitepress/devui-theme/components/Page.vue @@ -1,6 +1,7 @@ diff --git a/docs/.vitepress/devui-theme/components/PageToc.vue b/docs/.vitepress/devui-theme/components/PageToc.vue new file mode 100644 index 00000000..5efcd8af --- /dev/null +++ b/docs/.vitepress/devui-theme/components/PageToc.vue @@ -0,0 +1,108 @@ + + + + + diff --git a/docs/.vitepress/devui-theme/composables/useToc.ts b/docs/.vitepress/devui-theme/composables/useToc.ts new file mode 100644 index 00000000..ffb2689d --- /dev/null +++ b/docs/.vitepress/devui-theme/composables/useToc.ts @@ -0,0 +1,57 @@ +import { computed } from 'vue' +import { useData } from 'vitepress' +import { joinUrl } from '../utils' + +import type { PageData } from 'vitepress' + +type EnhanceArrayElement = T extends Array ? (U & P)[] : never + +type Headers = EnhanceArrayElement< + PageData['headers'], + { + children?: Headers + } +> + +export const useToc = () => { + const { page } = useData() + + return computed(() => resolveHeaders(page.value.headers)) +} + +export const resolveLink = (base: string, path: string) => { + if (path === undefined) { + return path + } + // keep relative hash to the same page + if (path.startsWith('#')) { + return path + } + return joinUrl(base, path) +} + +export const resolveHeaders = (headers: PageData['headers']) => { + return mapHeaders(groupHeaders(headers)) +} + +export function groupHeaders(headers: PageData['headers']) { + headers = headers.map((h) => Object.assign({}, h)) + let lastH2 + + headers.forEach((h) => { + if (h.level === 3) { + lastH2 = h + } else if (lastH2) { + ;(lastH2.children || (lastH2.children = [])).push(h) + } + }) + return headers.filter((h) => h.level === 3) +} + +export function mapHeaders(headers: Headers) { + return headers.map((header) => ({ + text: header.title, + link: `#${header.slug}`, + children: header.children ? mapHeaders(header.children) : undefined, + })) +} -- Gitee From 7406789a03383ef3e53f95b3585b8f358031f855 Mon Sep 17 00:00:00 2001 From: smchen Date: Sat, 9 Oct 2021 18:54:03 +0800 Subject: [PATCH 07/10] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/devui-theme/components/Page.vue | 1 + docs/.vitepress/devui-theme/components/PageToc.vue | 11 +++++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/.vitepress/devui-theme/components/Page.vue b/docs/.vitepress/devui-theme/components/Page.vue index 2aee748b..cb29a342 100644 --- a/docs/.vitepress/devui-theme/components/Page.vue +++ b/docs/.vitepress/devui-theme/components/Page.vue @@ -27,6 +27,7 @@ import PageToc from "./PageToc.vue" @media (min-width: 720px) { .page { margin-left: 16.4rem; + margin-right: 40px; } } diff --git a/docs/.vitepress/devui-theme/components/PageToc.vue b/docs/.vitepress/devui-theme/components/PageToc.vue index 5efcd8af..fba26175 100644 --- a/docs/.vitepress/devui-theme/components/PageToc.vue +++ b/docs/.vitepress/devui-theme/components/PageToc.vue @@ -1,8 +1,14 @@