@greypan/web-ui 1.2.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/back-top/index.ts"],"sourcesContent":["import 'iconify-icon'\nimport '@/components/button'\nimport { getRootScrollTop } from '@greypan/browser-kit'\nimport { html, LitElement, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-back-top')\nexport class WebUiBackTop extends LitElement {\n static styles = unsafeCSS(style)\n\n @property({ type: Boolean, reflect: true }) smooth = true\n @property({ type: Number, reflect: true }) threshold: number = 200\n @property({ type: Boolean, reflect: true }) visible = false\n @property({ type: Object, attribute: false }) scrollTarget: HTMLElement | Window = window\n\n @state() private eventController?: AbortController\n\n override connectedCallback() {\n super.connectedCallback()\n this.computeVisible()\n this.onScrollTarget()\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this.eventController?.abort()\n }\n\n protected override willUpdate(props: PropertyValues) {\n super.willUpdate(props)\n\n if (props.has('threshold') || props.has('scrollTarget')) {\n this.computeVisible()\n }\n
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/back-top/index.ts"],"sourcesContent":["import 'iconify-icon'\nimport '@/components/button'\nimport { getRootScrollTop } from '@greypan/browser-kit'\nimport { html, LitElement, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-back-top')\nexport class WebUiBackTop extends LitElement {\n static styles = unsafeCSS(style)\n\n @property({ type: Boolean, reflect: true }) smooth = true\n @property({ type: Number, reflect: true }) threshold: number = 200\n @property({ type: Boolean, reflect: true }) visible = false\n @property({ type: Object, attribute: false }) scrollTarget: HTMLElement | Window = window\n\n @state() private eventController?: AbortController\n\n override connectedCallback() {\n super.connectedCallback()\n this.computeVisible()\n this.onScrollTarget()\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this.eventController?.abort()\n }\n\n protected override willUpdate(props: PropertyValues) {\n super.willUpdate(props)\n\n if (props.has('threshold') || props.has('scrollTarget')) {\n this.computeVisible()\n }\n if (props.has('scrollTarget') && this.hasUpdated) {\n this.onScrollTarget()\n }\n }\n\n private get target() {\n if (!this.scrollTarget) {\n return window\n }\n const isRoot =\n this.scrollTarget === window ||\n this.scrollTarget === document.documentElement ||\n this.scrollTarget === document.body\n return isRoot ? window : this.scrollTarget\n }\n\n private onScrollTarget() {\n this.eventController?.abort()\n this.eventController = new AbortController()\n\n this.target.addEventListener(\n 'scroll',\n () => {\n this.computeVisible()\n },\n {\n signal: this.eventController.signal,\n passive: true\n }\n )\n }\n\n private computeVisible() {\n const { target } = this\n let nextVisible: boolean\n if (target === window) {\n nextVisible = getRootScrollTop() >= this.threshold\n } else if (target instanceof HTMLElement) {\n nextVisible = target.scrollTop >= this.threshold\n } else {\n throw new Error('Prop scrollTarget must be HTMLElement or Window.')\n }\n if (nextVisible !== this.visible) {\n this.visible = nextVisible\n this.dispatchEvent(\n new CustomEvent('visible-change', {\n detail: { visible: nextVisible },\n bubbles: true,\n composed: true\n })\n )\n }\n }\n\n toTop() {\n this.target.scrollTo({\n top: 0,\n behavior: this.smooth ? 'smooth' : 'auto'\n })\n }\n\n private onEnter(e: KeyboardEvent) {\n if ((e as KeyboardEvent).key == 'Enter') {\n e.preventDefault()\n this.toTop()\n }\n }\n\n render() {\n return html`\n <div role=\"button\" tabindex=\"0\" @click=${this.toTop} @keydown=${this.onEnter}>\n <slot>\n <!-- 默认 slot 加上 tabindex=\"-1\"，防止双重 focus -->\n <web-ui-button tabindex=\"-1\" icon>\n <iconify-icon icon=\"octicon:move-to-top-16\" width=\"16\" height=\"16\"></iconify-icon>\n </web-ui-button>\n </slot>\n </div>\n `\n }\n}\n\nexport interface WebUiBackTop {\n readonly $events: {\n 'visible-change': CustomEvent<{ visible: boolean }>\n }\n}\n"],"mappings":";;;;;;;;;;AASO,IAAA,IAAA,cAA2B,EAAW;;6BAGU,qBACU,oBACT,wBAC6B;;;gBALnE,EAAU,CAAK;;CAS/B,oBAA6B;EAG3B,AAFA,MAAM,kBAAkB,GACxB,KAAK,eAAe,GACpB,KAAK,eAAe;CACtB;CAEA,uBAAgC;EAE9B,AADA,MAAM,qBAAqB,GAC3B,KAAK,iBAAiB,MAAM;CAC9B;CAEA,WAA8B,GAAuB;EAMnD,AALA,MAAM,WAAW,CAAK,IAElB,EAAM,IAAI,WAAW,KAAK,EAAM,IAAI,cAAc,MACpD,KAAK,eAAe,GAElB,EAAM,IAAI,cAAc,KAAK,KAAK,cACpC,KAAK,eAAe;CAExB;CAEA,IAAY,SAAS;EAQnB,OAPK,KAAK,eAIR,KAAK,iBAAiB,UACtB,KAAK,iBAAiB,SAAS,mBAC/B,KAAK,iBAAiB,SAAS,OACjB,SAAS,KAAK,eANrB;CAOX;CAEA,iBAAyB;EAIvB,AAHA,KAAK,iBAAiB,MAAM,GAC5B,KAAK,kBAAkB,IAAI,gBAAgB,GAE3C,KAAK,OAAO,iBACV,gBACM;GACJ,KAAK,eAAe;EACtB,GACA;GACE,QAAQ,KAAK,gBAAgB;GAC7B,SAAS;EACX,CACF;CACF;CAEA,iBAAyB;EACvB,IAAM,EAAE,cAAW,MACf;EACJ,IAAI,MAAW,QACb,IAAc,EAAiB,KAAK,KAAK;OACpC,IAAI,aAAkB,aAC3B,IAAc,EAAO,aAAa,KAAK;OAEvC,MAAU,MAAM,kDAAkD;EAEpE,AAAI,MAAgB,KAAK,YACvB,KAAK,UAAU,GACf,KAAK,cACH,IAAI,YAAY,kBAAkB;GAChC,QAAQ,EAAE,SAAS,EAAY;GAC/B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CAEJ;CAEA,QAAQ;EACN,KAAK,OAAO,SAAS;GACnB,KAAK;GACL,UAAU,KAAK,SAAS,WAAW;EACrC,CAAC;CACH;CAEA,QAAgB,GAAkB;EAChC,AAAK,EAAoB,OAAO,YAC9B,EAAE,eAAe,GACjB,KAAK,MAAM;CAEf;CAEA,SAAS;EACP,OAAO,CAAI;+CACgC,KAAK,MAAM,YAAY,KAAK,QAAQ;;;;;;;;;CASjF;AACF;GAxGG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MACzC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MACxC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MACzC,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAM,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,MAE3C,EAAM,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,UATR,EAAc,iBAAiB,CAAA,GAAA,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@greypan/web-ui",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"iconify-icon": "^3.0.2",
|
|
41
41
|
"lit": "^3.3.3",
|
|
42
|
-
"@greypan/browser-kit": "1.
|
|
43
|
-
"@greypan/js-kit": "1.
|
|
42
|
+
"@greypan/browser-kit": "1.4.0",
|
|
43
|
+
"@greypan/js-kit": "1.3.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"react": "^19.2.7",
|