From 0435541ddbd6ae1c834ed0843bd585f2b2048263 Mon Sep 17 00:00:00 2001 From: fangliang Date: Tue, 19 Oct 2021 20:45:36 +0800 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20=E5=AE=8C=E5=96=84=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=AE=8C=E6=88=90=E7=8A=B6=E6=80=81,=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E8=87=AA=E5=AE=9A=E4=B9=89=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/tabs/src/tab.tsx | 1 + devui/tabs/src/tabs.tsx | 15 ++++++++---- docs/components/tabs/index.md | 43 ++++++++++++++++++++++++++++++++--- 3 files changed, 52 insertions(+), 7 deletions(-) diff --git a/devui/tabs/src/tab.tsx b/devui/tabs/src/tab.tsx index b1f62a2f..c7c263f4 100644 --- a/devui/tabs/src/tab.tsx +++ b/devui/tabs/src/tab.tsx @@ -19,6 +19,7 @@ export default defineComponent({ }, setup(props, { slots }) { const tabs = inject('tabs'); + tabs.state.slots.push(slots.dTabTitle); tabs.state.data.push(props); return () => { const { id } = props; diff --git a/devui/tabs/src/tabs.tsx b/devui/tabs/src/tabs.tsx index 43033651..2c84e1fa 100644 --- a/devui/tabs/src/tabs.tsx +++ b/devui/tabs/src/tabs.tsx @@ -6,7 +6,8 @@ import { PropType, provide, reactive, - ref + ref, + Slot } from 'vue'; import './tabs.scss'; @@ -19,6 +20,7 @@ interface TabsState { data?: any[] showContent: boolean active: any + slots: Slot[] } export default defineComponent({ name: 'DTabs', @@ -65,7 +67,8 @@ export default defineComponent({ const state: TabsState = reactive({ data: [], active: props.modelValue, - showContent: props.showContent + showContent: props.showContent, + slots: [] }); provide('tabs', { state @@ -157,7 +160,7 @@ export default defineComponent({ class={`devui-nav devui-nav-${ulClass.join(' ')}`} id='devuiTabs11' > - {state.data.map((item) => { + {state.data.map((item, i) => { return (
  • - {item.title} + {state.slots[i] ? ( + state.slots[i]() + ) : ( + {item.title} + )}
    • ); diff --git a/docs/components/tabs/index.md b/docs/components/tabs/index.md index 65008afc..b7f24861 100644 --- a/docs/components/tabs/index.md +++ b/docs/components/tabs/index.md @@ -262,17 +262,54 @@ export default defineComponent({ ::: +### 自定义模板 + +:::demo + +```vue + + +``` + +::: + ### API -| 参数 | 类型 | 默认 | 说明 | | -| :----------: | :---------------------------------------------: | :----: | :---------------------------------------------------------------------------------------------------: | --------------- | +| 参数 | 类型 | 默认 | 说明 | | +| :----------: | :---------------------------------------------: | :----: | :---------------------------------------------------------------------------------------------------: | --- | | type | `tabs \| pills \| options \| wrapped \| slider` | 'tabs' | 可选，选项卡组的类型 | | showContent | `boolean` | true | 可选，是否显示选项卡对应的内容 | | v-model | `string` | -- | 可选，当前激活的选项卡，值为选项卡的 id | | customWidth | `string` | -- | 可选，自定义选项卡的宽 | | vertical | `boolean` | false | 可选，是否垂直显 | | beforeChange | `function\|Promise` | -- | tab 切换前的回调函数,返回 boolean 类型，返回 false 可以阻止 tab 的切换 | -| reactivable | `boolean` | false | 可选，点击当前处于激活态的 tab 时是否触发`activeTabChange`事件，`true`为允许触发，`false`为不允许触发 | [拦截 tab 切换] | +| reactivable | `boolean` | false | 可选，点击当前处于激活态的 tab 时是否触发`activeTabChange`事件，`true`为允许触发，`false`为不允许触发 | ### d-tabs 事件 -- Gitee From d8b7e08bfcb3835f7d9fe6eab5417151499e5ac2 Mon Sep 17 00:00:00 2001 From: fangliang Date: Wed, 20 Oct 2021 11:13:58 +0800 Subject: [PATCH 2/3] =?UTF-8?q?docs(navSprit):=20=E6=96=B0=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=8D=A0=E4=BD=8D=20(=E5=AF=BC=E8=88=AA=E7=B2=BE?= =?UTF-8?q?=E7=81=B5)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/nav-sprite/index.ts | 17 ++++ devui/nav-sprite/src/nav-sprite-types.ts | 74 +++++++++++++++ devui/nav-sprite/src/nav-sprite.scss | 112 +++++++++++++++++++++++ devui/nav-sprite/src/nav-sprite.tsx | 11 +++ docs/components/nav-sprite/index.md | 9 ++ 5 files changed, 223 insertions(+) create mode 100644 devui/nav-sprite/index.ts create mode 100644 devui/nav-sprite/src/nav-sprite-types.ts create mode 100644 devui/nav-sprite/src/nav-sprite.scss create mode 100644 devui/nav-sprite/src/nav-sprite.tsx create mode 100644 docs/components/nav-sprite/index.md diff --git a/devui/nav-sprite/index.ts b/devui/nav-sprite/index.ts new file mode 100644 index 00000000..b3fbd5ab --- /dev/null +++ b/devui/nav-sprite/index.ts @@ -0,0 +1,17 @@ +import { App } from 'vue'; +import NavSprite from './src/nav-sprite'; + +NavSprite.install = function (app: App) { + app.component(NavSprite.name, NavSprite); +}; + +export { NavSprite }; + +export default { + title: 'NavSprite 导航精灵', + category: '导航', + status: '10%', + install(app: App): void { + app.use(NavSprite as any); + } +}; diff --git a/devui/nav-sprite/src/nav-sprite-types.ts b/devui/nav-sprite/src/nav-sprite-types.ts new file mode 100644 index 00000000..ef4293b0 --- /dev/null +++ b/devui/nav-sprite/src/nav-sprite-types.ts @@ -0,0 +1,74 @@ +import { PropType } from 'vue'; +export type SpriteMode = 'default' | 'sprite'; + +export interface SpriteOption { + top: string + left: string + zIndex: number +} +export interface NavMenu { + originEle: HTMLElement + label: string + level: number + scrollPosition: { + top: number + startLine: number + } +} +export const navSpriteProps = { + // // 爬取目录的容器 + target: { + type: HTMLElement + }, + // // 指定滚动的DOM + scrollTarget: { + type: HTMLElement, + }, + // // 矫正参数 + view: { + type: Object as () => { + top?: number + bottom?: number + }, + default: { top: 0, bottom: 0 } + }, + // // 支持锚点 + hashSupport: { + type: Boolean, + default: false + }, + mode: { + type: String as () => SpriteMode, + default: 'default' + }, + maxLevel: { + type: Number, + default: 3 + }, + title: { + type: String, + default: 'menu' + }, + // 缩进 + indent: { + type: Number, + default: 2 + }, + width: { + type: Number, + default: 300 + }, + height: { + type: Number, + default: 400 + }, + // sprite模式下的初始状态 + isOpen: { + type: Boolean, + default: true + }, + // sprite模式下的初始位置 + spriteOption: { + type: Object as () => SpriteOption, + } +} diff --git a/devui/nav-sprite/src/nav-sprite.scss b/devui/nav-sprite/src/nav-sprite.scss new file mode 100644 index 00000000..eb16092e --- /dev/null +++ b/devui/nav-sprite/src/nav-sprite.scss @@ -0,0 +1,112 @@ +@import '../../style/theme/color'; +@import '../../style/theme/variables'; +@import '../../style/theme/shadow'; +@import '../../styles-var/devui-var.scss'; + +.devui-is-sprite { + background-color: $devui-connected-overlay-bg; + box-shadow: $devui-shadow-length-connected-overlay $devui-shadow; + cursor: move; + padding: 0 16px 16px; + max-width: 300px; + + &.is-min { + display: flex; + align-items: center; + justify-content: center; + width: 40px !important; + height: 40px !important; + border-radius: 100%; + padding: 0; + + &:hover { + color: $devui-light-text; + background-color: $devui-brand; + } + + i { + cursor: pointer; + } + } + + .devui-nav-sprite-menus { + width: 100%; + height: 100%; + max-height: 240px; + } +} + +.devui-nav-sprite-content { + width: 100%; + height: 100%; + padding: 0 12px 16px 12px; + + .devui-nav-sprite-header { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + color: $devui-text; + line-height: 32px; + font-weight: bold; + font-size: $devui-font-size-card-title; + border-bottom: 1px solid $devui-dividing-line; + + .devui-nav-spiri-close { + cursor: pointer; + } + } +} + +.devui-nav-sprite-menus { + margin-top: 10px; + overflow-y: hidden; + height: calc(100% - 80px); + + &:hover { + overflow-y: auto; + } + + & > li { + list-style: none; + cursor: pointer; + height: 30px; + line-height: 30px; + font-size: $devui-font-size; + color: $devui-text; + position: relative; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + + a { + color: $devui-text; + } + + &.active { + a { + color: $devui-link; + } + + color: $devui-link; + } + + &:not(.disabled):hover { + color: $devui-list-item-hover-text; + } + + .nav-item { + a, + span { + &:hover { + color: $devui-list-item-hover-text; + } + } + } + } +} + +.devui-no-data { + line-height: 32px; + color: $devui-text; +} diff --git a/devui/nav-sprite/src/nav-sprite.tsx b/devui/nav-sprite/src/nav-sprite.tsx new file mode 100644 index 00000000..378e15c6 --- /dev/null +++ b/devui/nav-sprite/src/nav-sprite.tsx @@ -0,0 +1,11 @@ +import { defineComponent } from '@vue/runtime-core'; +import { navSpriteProps } from './nav-sprite-types'; + +export default defineComponent({ + name: 'DNavSprite', + props: navSpriteProps, + emits: ['afterNavInit'], + setup(props) { + return {}; + } +}); diff --git a/docs/components/nav-sprite/index.md b/docs/components/nav-sprite/index.md new file mode 100644 index 00000000..10fcbfff --- /dev/null +++ b/docs/components/nav-sprite/index.md @@ -0,0 +1,9 @@ +# NavSprite 导航精灵 + +导航精灵组件 + +### 何时使用 + +针对某块阅读区域生成阅读目录，提高阅读效率。 + +### 基本用法 -- Gitee From c2effc5fe52fa942b2bd250ecc41b1980a35b5e3 Mon Sep 17 00:00:00 2001 From: fangliang Date: Wed, 20 Oct 2021 21:34:14 +0800 Subject: [PATCH 3/3] =?UTF-8?q?docs(accordion):=20=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E5=85=B6angular=E5=BC=95=E7=B1=BB=E5=8F=8A=E5=85=B6=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/accordion/src/accordion.type.ts | 44 +++------------------------ 1 file changed, 5 insertions(+), 39 deletions(-) diff --git a/devui/accordion/src/accordion.type.ts b/devui/accordion/src/accordion.type.ts index 85921736..2a4cb0bf 100755 --- a/devui/accordion/src/accordion.type.ts +++ b/devui/accordion/src/accordion.type.ts @@ -1,5 +1,3 @@ -import { TemplateRef } from '@angular/core'; - /* 基础数据类型 */ type AccordionMenuItemLinkType = 'routerLink' | 'hrefLink' | string; export interface AccordionBase { @@ -23,7 +21,7 @@ interface IAccordionLinkable { } export interface AccordionBaseItem extends AccordionBase, - IAccordionActiveable { + IAccordionActiveable { } export interface AccordionBaseMenu extends AccordionBase, @@ -37,9 +35,9 @@ export interface AccordionLinkableItem } export interface AccordionMenuItem extends AccordionBase, - IAccordionActiveable, - IAccordionFoldable, - IAccordionLinkable { + IAccordionActiveable, + IAccordionFoldable, + IAccordionLinkable { } export type AccordionMenuType = Array; @@ -58,38 +56,6 @@ export interface AccordionItemClickEvent { event: MouseEvent } -/* 通用公共配置数据类型 */ -interface AccordionMenuKeyGroup { - titleKey?: string - activeKey?: string - disabledKey?: string - openKey?: string - loadingKey?: string - childrenKey?: string - linkKey?: string - linkTargetKey?: string - linkTypeKey?: string -} - -type AccordionTemplateRefArray = 'itemTemplate' | 'menuItemTemplate' | 'noContentTemplate' | 'loadingTemplate' | 'innerListTemplate'; -type AccordionTemplateRefGroup = { - [p in AccordionTemplateRefArray]: TemplateRef -}; -interface AccordionConfigOptions { - restrictOneOpen?: boolean - autoOpenActiveMenu?: boolean - showNoContent?: boolean - linkDefaultTarget?: string - i18nCommonText?: any - i18nText?: any - linkType: 'routerLink' | 'hrefLink' | 'dependOnLinkTypeKey' | '' | string -} -export interface AccordionOptions - extends AccordionConfigOptions, - AccordionMenuKeyGroup, - AccordionTemplateRefGroup { -} - /* 废弃接口 */ /** @deprecated merge into `AccordionMenuItem`*/ export interface AccordionSubMenuItem { @@ -117,7 +83,7 @@ export interface AccordionSubMenuItemRouterLink { [prop: string]: any } /** @deprecated use `AccordionLinkableItem` instead*/ -export interface AccordionSubMenuItemDynamicLink { +export interface AccordionSubMenuItemDynamicLink { title: string link: string linkType: 'routerLink' | 'hrefLink' | string -- Gitee