From f6396f58b2995faff5ffd0b09b61ed62fbc2a8d1 Mon Sep 17 00:00:00 2001 From: devin Date: Thu, 27 Apr 2023 18:10:54 +0800 Subject: [PATCH 01/11] init --- .../src/components/scrollbar/OScrollbar.vue | 4 +- .../scrollbar/__demo__/ScrollbarBasic.vue | 35 +++++++++++++++++- .../{IndexScrollbar.vue => TheIndex.vue} | 0 .../src/components/scrollbar/style/index.scss | 12 +++++- packages/portal/src/router.ts | 6 +++ pnpm-lock.yaml | 37 +------------------ 6 files changed, 53 insertions(+), 41 deletions(-) rename packages/opendesign/src/components/scrollbar/__demo__/{IndexScrollbar.vue => TheIndex.vue} (100%) diff --git a/packages/opendesign/src/components/scrollbar/OScrollbar.vue b/packages/opendesign/src/components/scrollbar/OScrollbar.vue index a3891b87..39e4a97b 100644 --- a/packages/opendesign/src/components/scrollbar/OScrollbar.vue +++ b/packages/opendesign/src/components/scrollbar/OScrollbar.vue @@ -1,5 +1,7 @@ diff --git a/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue b/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue index 39b8f290..d535eaf4 100644 --- a/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue +++ b/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue @@ -4,6 +4,37 @@ import { OScrollbar } from '../index'; - + diff --git a/packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue b/packages/opendesign/src/components/scrollbar/__demo__/TheIndex.vue similarity index 100% rename from packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue rename to packages/opendesign/src/components/scrollbar/__demo__/TheIndex.vue diff --git a/packages/opendesign/src/components/scrollbar/style/index.scss b/packages/opendesign/src/components/scrollbar/style/index.scss index bce181a7..4aa678cc 100644 --- a/packages/opendesign/src/components/scrollbar/style/index.scss +++ b/packages/opendesign/src/components/scrollbar/style/index.scss @@ -1,4 +1,12 @@ @use './var.scss'; - -.o-scrollbar { +/* + * ::-webkit-scrollbar 兼容chrome 4+, edge 79+, safari 4+, opera 15+, + * scrollbar-width 兼容firefox 64+ + */ +.o-scrollbar-container { + overflow: auto; + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } } diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts index 2d200bb2..eeddea50 100644 --- a/packages/portal/src/router.ts +++ b/packages/portal/src/router.ts @@ -218,6 +218,12 @@ export const routes = [ label: '结果 Result', component: () => import('@components/result/__demo__/TheIndex.vue'), }, + { + path: '/scrollbar', + name: 'Scrollbar', + label: '结果 Scrollbar', + component: () => import('@components/scrollbar/__demo__/TheIndex.vue'), + }, { path: '/resize-observer', name: 'ResizeObserver', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 989f22f3..4fd95c0c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,23 +24,10 @@ importers: version: 4.9.3 packages/opendesign: - dependencies: - intersection-observer-polyfill: - specifier: ^0.1.0 - version: 0.1.0 - lodash-es: - specifier: ^4.17.21 - version: 4.17.21 - resize-observer-polyfill: - specifier: ^1.5.1 - version: 1.5.1 devDependencies: '@opensig/opensig-scripts': specifier: workspace:^0.0.8 version: link:../scripts - '@types/lodash-es': - specifier: ^4.17.6 - version: 4.17.6 typescript: specifier: ^4.6.4 version: 4.9.3 @@ -54,7 +41,7 @@ importers: packages/portal: dependencies: '@opensig/opendesign': - specifier: workspace:^0.0.29 + specifier: workspace:^0.0.37 version: link:../opendesign '@opensig/opensig-scripts': specifier: workspace:^0.0.8 @@ -393,16 +380,6 @@ packages: resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==} dev: true - /@types/lodash-es@4.17.6: - resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==} - dependencies: - '@types/lodash': 4.14.191 - dev: true - - /@types/lodash@4.14.191: - resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==} - dev: true - /@types/minimatch@5.1.2: resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==} dev: true @@ -1335,10 +1312,6 @@ packages: /inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} - /intersection-observer-polyfill@0.1.0: - resolution: {integrity: sha512-kYxriUk7Dl8GPu2TuOFAbtG5+UK0LLrLzlUErF8R9w5iPWmrtfVZsjCYbGF0/SyRDo1VfHMOZYBB2svb2locbw==} - dev: false - /is-binary-path@2.1.0: resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} engines: {node: '>=8'} @@ -1428,10 +1401,6 @@ packages: p-locate: 5.0.0 dev: true - /lodash-es@4.17.21: - resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} - dev: false - /lodash.get@4.4.2: resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==} dev: false @@ -1645,10 +1614,6 @@ packages: engines: {node: '>=8'} dev: true - /resize-observer-polyfill@1.5.1: - resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} - dev: false - /resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} -- Gitee From b520bb341316d9916f2f083a5c2172b3373d8377 Mon Sep 17 00:00:00 2001 From: devin Date: Thu, 27 Apr 2023 18:12:23 +0800 Subject: [PATCH 02/11] v38 --- packages/opendesign/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json index 9150d00c..e332b52f 100644 --- a/packages/opendesign/package.json +++ b/packages/opendesign/package.json @@ -1,6 +1,6 @@ { "name": "@opensig/opendesign", - "version": "0.0.37", + "version": "0.0.38", "main": "lib/index.js", "module": "es/index.mjs", "types": "es/index.d.ts", -- Gitee From 73ab344ff22085fcf6271789898e1c55c2c419a5 Mon Sep 17 00:00:00 2001 From: devin Date: Thu, 27 Apr 2023 21:47:32 +0800 Subject: [PATCH 03/11] add scroller scrollbar --- .../scrollbar/__demo__/ScrollbarBasic.vue | 40 --------------- .../src/components/scrollbar/index.ts | 11 ---- .../src/components/scrollbar/style/index.scss | 12 ----- .../src/components/scrollbar/style/var.scss | 2 - .../{scrollbar => scroller}/OScrollbar.vue | 5 +- .../src/components/scroller/OScroller.vue | 10 ++++ .../scroller/__demo__/ScrollbarBasic.vue | 51 +++++++++++++++++++ .../__demo__/TheIndex.vue | 1 + .../src/components/scroller/index.ts | 13 +++++ .../{scrollbar => scroller}/scrollbar.ts | 0 .../src/components/scroller/style/index.scss | 49 ++++++++++++++++++ .../{scrollbar => scroller}/style/index.ts | 0 .../src/components/scroller/style/var.scss | 9 ++++ packages/portal/src/router.ts | 8 +-- 14 files changed, 140 insertions(+), 71 deletions(-) delete mode 100644 packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue delete mode 100644 packages/opendesign/src/components/scrollbar/index.ts delete mode 100644 packages/opendesign/src/components/scrollbar/style/index.scss delete mode 100644 packages/opendesign/src/components/scrollbar/style/var.scss rename packages/opendesign/src/components/{scrollbar => scroller}/OScrollbar.vue (36%) create mode 100644 packages/opendesign/src/components/scroller/OScroller.vue create mode 100644 packages/opendesign/src/components/scroller/__demo__/ScrollbarBasic.vue rename packages/opendesign/src/components/{scrollbar => scroller}/__demo__/TheIndex.vue (91%) create mode 100644 packages/opendesign/src/components/scroller/index.ts rename packages/opendesign/src/components/{scrollbar => scroller}/scrollbar.ts (100%) create mode 100644 packages/opendesign/src/components/scroller/style/index.scss rename packages/opendesign/src/components/{scrollbar => scroller}/style/index.ts (100%) create mode 100644 packages/opendesign/src/components/scroller/style/var.scss diff --git a/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue b/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue deleted file mode 100644 index d535eaf4..00000000 --- a/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - diff --git a/packages/opendesign/src/components/scrollbar/index.ts b/packages/opendesign/src/components/scrollbar/index.ts deleted file mode 100644 index d55162bd..00000000 --- a/packages/opendesign/src/components/scrollbar/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { App } from 'vue'; - -import _OScrollbar from './OScrollbar.vue'; - -const OScrollbar = Object.assign(_OScrollbar, { - install(app: App) { - app.component(_OScrollbar.name, _OScrollbar); - }, -}); - -export { OScrollbar }; diff --git a/packages/opendesign/src/components/scrollbar/style/index.scss b/packages/opendesign/src/components/scrollbar/style/index.scss deleted file mode 100644 index 4aa678cc..00000000 --- a/packages/opendesign/src/components/scrollbar/style/index.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use './var.scss'; -/* - * ::-webkit-scrollbar 兼容chrome 4+, edge 79+, safari 4+, opera 15+, - * scrollbar-width 兼容firefox 64+ - */ -.o-scrollbar-container { - overflow: auto; - scrollbar-width: none; - &::-webkit-scrollbar { - display: none; - } -} diff --git a/packages/opendesign/src/components/scrollbar/style/var.scss b/packages/opendesign/src/components/scrollbar/style/var.scss deleted file mode 100644 index 8b9ec5be..00000000 --- a/packages/opendesign/src/components/scrollbar/style/var.scss +++ /dev/null @@ -1,2 +0,0 @@ -.o-scrollbar { -} diff --git a/packages/opendesign/src/components/scrollbar/OScrollbar.vue b/packages/opendesign/src/components/scroller/OScrollbar.vue similarity index 36% rename from packages/opendesign/src/components/scrollbar/OScrollbar.vue rename to packages/opendesign/src/components/scroller/OScrollbar.vue index 39e4a97b..61e96552 100644 --- a/packages/opendesign/src/components/scrollbar/OScrollbar.vue +++ b/packages/opendesign/src/components/scroller/OScrollbar.vue @@ -1,7 +1,8 @@ diff --git a/packages/opendesign/src/components/scroller/OScroller.vue b/packages/opendesign/src/components/scroller/OScroller.vue new file mode 100644 index 00000000..232dddfb --- /dev/null +++ b/packages/opendesign/src/components/scroller/OScroller.vue @@ -0,0 +1,10 @@ + + + diff --git a/packages/opendesign/src/components/scroller/__demo__/ScrollbarBasic.vue b/packages/opendesign/src/components/scroller/__demo__/ScrollbarBasic.vue new file mode 100644 index 00000000..c92be991 --- /dev/null +++ b/packages/opendesign/src/components/scroller/__demo__/ScrollbarBasic.vue @@ -0,0 +1,51 @@ + + + diff --git a/packages/opendesign/src/components/scrollbar/__demo__/TheIndex.vue b/packages/opendesign/src/components/scroller/__demo__/TheIndex.vue similarity index 91% rename from packages/opendesign/src/components/scrollbar/__demo__/TheIndex.vue rename to packages/opendesign/src/components/scroller/__demo__/TheIndex.vue index 2ec5dc7c..e43aec63 100644 --- a/packages/opendesign/src/components/scrollbar/__demo__/TheIndex.vue +++ b/packages/opendesign/src/components/scroller/__demo__/TheIndex.vue @@ -1,5 +1,6 @@ diff --git a/packages/opendesign/src/components/scroller/__demo__/ScrollbarBody.vue b/packages/opendesign/src/components/scroller/__demo__/ScrollbarBody.vue new file mode 100644 index 00000000..a220a387 --- /dev/null +++ b/packages/opendesign/src/components/scroller/__demo__/ScrollbarBody.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/opendesign/src/components/scroller/style/index.scss b/packages/opendesign/src/components/scroller/style/index.scss index 31d6d10e..8ac421a9 100644 --- a/packages/opendesign/src/components/scroller/style/index.scss +++ b/packages/opendesign/src/components/scroller/style/index.scss @@ -78,7 +78,7 @@ .o-scrollbar-y { top: 50%; height: var(--scrollbar-height); - margin-top: calc(var(--scrollbar-height) / -2); + transform: translateY(-50%); width: var(--scrollbar-width); left: var(--scrollbar-y-left); @@ -88,7 +88,7 @@ .o-scrollbar-x { left: 50%; width: var(--scrollbar-height); - margin-left: calc(var(--scrollbar-height) / -2); + transform: translateX(-50%); top: var(--scrollbar-x-top); bottom: var(--scrollbar-x-bottom); diff --git a/packages/portal/src/components/TheAside.vue b/packages/portal/src/components/TheAside.vue index 4f510869..79dcb1bf 100644 --- a/packages/portal/src/components/TheAside.vue +++ b/packages/portal/src/components/TheAside.vue @@ -15,16 +15,17 @@ watch( } ); -const navList = routes.map((item) => { - const { path, name, label } = item; - return { - path, - name, - label, - }; -}); - -const navClick = (item: typeof navList[0]) => { +const navList = routes + .filter((item) => !item.exclude) + .map((item) => { + const { path, name, label } = item; + return { + path, + name, + label, + }; + }); +const navClick = (item: (typeof navList)[0]) => { console.log(item.path); router.push(item.path); }; diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts index f6d22a36..3f042ea4 100644 --- a/packages/portal/src/router.ts +++ b/packages/portal/src/router.ts @@ -224,6 +224,13 @@ export const routes = [ label: '滚动条 Scroller', component: () => import('@components/scroller/__demo__/TheIndex.vue'), }, + { + exclude: true, + path: '/scroller/body', + name: 'Scroller-body', + label: '滚动条 Scroller-body', + component: () => import('@components/scroller/__demo__/ScrollbarBody.vue'), + }, { path: '/resize-observer', name: 'ResizeObserver', -- Gitee From 3b5b0f8b59cba9883928137ad6e14ad390341426 Mon Sep 17 00:00:00 2001 From: devin Date: Fri, 28 Apr 2023 21:19:17 +0800 Subject: [PATCH 08/11] =?UTF-8?q?=E6=94=AF=E6=8C=81body=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../opendesign/src/components/_shared/dom.ts | 2 +- .../src/components/_shared/vue-utils.ts | 21 ++++++- .../src/components/scroller/OScroller.vue | 63 ++++++++++++------- .../scroller/__demo__/ScrollbarBasic.vue | 13 +++- .../scroller/__demo__/ScrollbarBody.vue | 3 +- .../components/scroller/__demo__/TheComp.vue | 16 +++++ .../src/components/scroller/style/index.scss | 23 ++++++- .../src/components/scroller/types.ts | 2 +- .../src/components/style/index.scss | 1 + 9 files changed, 114 insertions(+), 30 deletions(-) create mode 100644 packages/opendesign/src/components/scroller/__demo__/TheComp.vue diff --git a/packages/opendesign/src/components/_shared/dom.ts b/packages/opendesign/src/components/_shared/dom.ts index a4fe8567..0694d5f3 100644 --- a/packages/opendesign/src/components/_shared/dom.ts +++ b/packages/opendesign/src/components/_shared/dom.ts @@ -2,7 +2,7 @@ import { isArray } from './is'; export type DirectionT = 'left' | 'right' | 'top' | 'bottom'; -export function isElement(el: any) { +export function isHtmlElement(el: any) { return typeof HTMLElement === 'object' ? el instanceof HTMLElement : !!(el && typeof el === 'object' && (el.nodeType === 1 || el.nodeType === 9) && typeof el.nodeName === 'string'); diff --git a/packages/opendesign/src/components/_shared/vue-utils.ts b/packages/opendesign/src/components/_shared/vue-utils.ts index 107577a3..97b11215 100644 --- a/packages/opendesign/src/components/_shared/vue-utils.ts +++ b/packages/opendesign/src/components/_shared/vue-utils.ts @@ -1,5 +1,6 @@ -import { Component, onMounted, ref, Slots, VNode, VNodeTypes, Comment } from 'vue'; +import { Component, onMounted, ref, Slots, VNode, VNodeTypes, Comment, ComponentPublicInstance, watch, isProxy, isC, watchEffect, Ref } from 'vue'; import { isArray } from './is'; +import { isHtmlElement } from './dom'; // 来着vuejs/core // https://github.com/vuejs/core/blob/main/packages/shared/src/shapeFlags.ts @@ -154,3 +155,21 @@ export function useSlotFirstElement() { fistElement, }; } + +export const getHtmlElement = (elRef: Ref): Promise => { + return new Promise((resolve) => { + if (isHtmlElement(elRef.value)) { + resolve(elRef.value as HTMLElement); + } else if (typeof elRef.value === 'string') { + resolve(document.querySelector(elRef.value) as HTMLElement); + } else { + watchEffect(() => { + if (isHtmlElement(elRef.value)) { + resolve(elRef.value as HTMLElement); + } else if (elRef.value) { + resolve((elRef.value as ComponentPublicInstance).$el); + } + }); + } + }); +}; diff --git a/packages/opendesign/src/components/scroller/OScroller.vue b/packages/opendesign/src/components/scroller/OScroller.vue index 6ade34fd..31034f94 100644 --- a/packages/opendesign/src/components/scroller/OScroller.vue +++ b/packages/opendesign/src/components/scroller/OScroller.vue @@ -1,10 +1,13 @@ diff --git a/packages/opendesign/src/components/scroller/__demo__/ScrollbarBasic.vue b/packages/opendesign/src/components/scroller/__demo__/ScrollbarBasic.vue index 4182a983..e76ea8ba 100644 --- a/packages/opendesign/src/components/scroller/__demo__/ScrollbarBasic.vue +++ b/packages/opendesign/src/components/scroller/__demo__/ScrollbarBasic.vue @@ -1,8 +1,10 @@ diff --git a/packages/opendesign/src/components/scroller/style/index.scss b/packages/opendesign/src/components/scroller/style/index.scss index 8ac421a9..278ea4f7 100644 --- a/packages/opendesign/src/components/scroller/style/index.scss +++ b/packages/opendesign/src/components/scroller/style/index.scss @@ -57,6 +57,8 @@ } } .o-scrollbar { + pointer-events: auto; + position: absolute; background-color: var(--scrollbar-bg-color); transition: opacity var(--o-easing-standard-in) var(--o-duration-m1); @@ -103,9 +105,10 @@ .o-scrollbar-track { position: relative; z-index: 0; + border-radius: var(--scrollbar-thumb-radius); background-color: var(--scrollbar-track-bg-color); opacity: 0; - border-radius: var(--scrollbar-thumb-radius); + transition: opacity var(--o-easing-standard-in) var(--o-duration-m1); } .o-scrollbar-y-track { width: var(--scrollbar-track-width); @@ -164,3 +167,21 @@ background-color: var(--scrollbar-thumb-bg-color-hover); } } + +.o-scroller-to-body { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: var(--o-z-index-max); + pointer-events: none; +} + +.o-scroller-root { + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } +} diff --git a/packages/opendesign/src/components/scroller/types.ts b/packages/opendesign/src/components/scroller/types.ts index 2978d3e9..b5bc847c 100644 --- a/packages/opendesign/src/components/scroller/types.ts +++ b/packages/opendesign/src/components/scroller/types.ts @@ -15,7 +15,7 @@ export const scrollerProps = { type: Boolean, }, /** - * 滚动容器 + * 滚动容器,支持body、元素ref、HTMLElement */ target: { type: [String, Object] as PropType, diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss index c64c03a2..4b854f66 100644 --- a/packages/opendesign/src/components/style/index.scss +++ b/packages/opendesign/src/components/style/index.scss @@ -9,4 +9,5 @@ :root { --o-z-index-base: 100; + --o-z-index-max: 9999; } -- Gitee From 4934eaaa960bad1646a2c9fed188fcf6e43b2b21 Mon Sep 17 00:00:00 2001 From: devin Date: Fri, 28 Apr 2023 21:19:24 +0800 Subject: [PATCH 09/11] =?UTF-8?q?=E4=BC=98=E5=8C=96target=E7=9B=91?= =?UTF-8?q?=E5=90=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/popup/OPopup.vue | 74 +++++++++++-------- 1 file changed, 45 insertions(+), 29 deletions(-) diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue index 01b23606..3b02f5e4 100644 --- a/packages/opendesign/src/components/popup/OPopup.vue +++ b/packages/opendesign/src/components/popup/OPopup.vue @@ -4,9 +4,9 @@ export default { };