@greypan/web-ui 1.3.0 → 1.3.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 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;;;
|
|
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 override 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 override 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;;;gBAL1D,EAAU,CAAK;;CASxC,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,SAAkB;EAChB,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-button')\nexport class WebUiButton extends LitElement {\n static styles = unsafeCSS(style)\n\n @property({ type: Boolean, reflect: true }) full = false\n @property({ type: Boolean, reflect: true }) primary = false\n @property({ type: Boolean, reflect: true }) text = false\n @property({ type: Boolean, reflect: true }) icon = false\n\n render() {\n return html`\n <button>\n ${this.icon\n ? html`<slot></slot>`\n : html`\n <slot name=\"prefix\"></slot>\n <slot></slot>\n <slot name=\"suffix\"></slot>\n `}\n </button>\n `\n }\n}\n"],"mappings":";;;;;;;AAMO,IAAA,IAAA,cAA0B,EAAW;;2BAGS,mBACG,gBACH,gBACA;;;
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-button')\nexport class WebUiButton extends LitElement {\n static override styles = unsafeCSS(style)\n\n @property({ type: Boolean, reflect: true }) full = false\n @property({ type: Boolean, reflect: true }) primary = false\n @property({ type: Boolean, reflect: true }) text = false\n @property({ type: Boolean, reflect: true }) icon = false\n\n override render() {\n return html`\n <button>\n ${this.icon\n ? html`<slot></slot>`\n : html`\n <slot name=\"prefix\"></slot>\n <slot></slot>\n <slot name=\"suffix\"></slot>\n `}\n </button>\n `\n }\n}\n"],"mappings":";;;;;;;AAMO,IAAA,IAAA,cAA0B,EAAW;;2BAGS,mBACG,gBACH,gBACA;;;gBAL1B,EAAU,CAAK;;CAOxC,SAAkB;EAChB,OAAO,CAAI;;UAEL,KAAK,OACH,CAAI,kBACJ,CAAI;;;;cAIF;;;CAGZ;AACF;GAlBG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MACzC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MACzC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MACzC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAP3C,EAAc,eAAe,CAAA,GAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/layout/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-layout')\nexport class WebUiLayout extends LitElement {\n static styles = unsafeCSS(style)\n\n render() {\n return html`\n <header>\n <slot name=\"header\"></slot>\n </header>\n <main>\n <slot></slot>\n </main>\n <aside>\n <div class=\"menu\"><slot name=\"sidebar\"></slot></div>\n </aside>\n <footer>\n <slot name=\"tabbar\"></slot>\n </footer>\n `\n }\n}\n"],"mappings":";;;;;;AAMO,IAAA,IAAA,cAA0B,EAAW;;
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/layout/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-layout')\nexport class WebUiLayout extends LitElement {\n static override styles = unsafeCSS(style)\n\n override render() {\n return html`\n <header>\n <slot name=\"header\"></slot>\n </header>\n <main>\n <slot></slot>\n </main>\n <aside>\n <div class=\"menu\"><slot name=\"sidebar\"></slot></div>\n </aside>\n <footer>\n <slot name=\"tabbar\"></slot>\n </footer>\n `\n }\n}\n"],"mappings":";;;;;;AAMO,IAAA,IAAA,cAA0B,EAAW;;gBACjB,EAAU,CAAK;;CAExC,SAAkB;EAChB,OAAO,CAAI;;;;;;;;;;;;;;CAcb;AACF;OApBC,EAAc,eAAe,CAAA,GAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/svg-draw-lines/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-svg-draw-lines')\nexport class WebUiSvgDrawLines extends LitElement {\n static styles = unsafeCSS(style)\n\n @property({ type: Number, reflect: true }) duration = 1000\n @property({ type: String, reflect: true }) easing = 'linear'\n\n @state() private isAnimating = false\n @state() private svgClone: SVGSVGElement | null = null\n @query('slot') private slotEl!: HTMLSlotElement\n\n private handleSlotChange() {\n if (this.isAnimating) return\n\n this.cloneOriginalSvg()\n\n this.isAnimating = true\n void this.startAnimation()\n }\n\n private cloneOriginalSvg() {\n const original = this.slotEl.assignedElements({ flatten: true })[0]\n if (!(original instanceof SVGSVGElement)) return\n\n const svgClone = original.cloneNode(true) as SVGSVGElement\n svgClone.classList.add('svg-clone')\n this.svgClone = svgClone\n }\n\n private async startAnimation() {\n if (!this.svgClone) return\n await this.updateComplete\n\n const selectors = 'path, rect, circle, line, polyline, polygon, ellipse'\n const elements = Array.from(this.svgClone.querySelectorAll(selectors)) as SVGGeometryElement[]\n\n const animTasks: SVGGeometryElement[] = []\n let cursor = { x: 0, y: 0 }\n\n // 除 path 外其余几何图形无需额外处理\n // 将绘制多段路径的单 path 先拆分为多 path 并重新插入 dom\n // 再分别计算每个 path 的 total length\n elements.forEach(el => {\n if (el instanceof SVGPathElement) {\n const d = el.getAttribute('d') || ''\n const segments = d.split(/(?=[Mm])/).filter(s => s.trim())\n\n // 无论是一段还是多段，统一处理\n segments.forEach(seg => {\n const pathPart = segments.length > 1 ? (el.cloneNode() as SVGPathElement) : el\n let finalD = seg.startsWith('m') ? `M${cursor.x} ${cursor.y}${seg}` : seg\n\n finalD = this.fixPathGap(pathPart, finalD)\n pathPart.setAttribute('d', finalD)\n\n if (segments.length > 1) el.parentNode?.insertBefore(pathPart, el)\n\n animTasks.push(pathPart)\n\n const end = pathPart.getPointAtLength(pathPart.getTotalLength())\n cursor = { x: end.x, y: end.y }\n })\n\n if (segments.length > 1) el.remove()\n } else {\n animTasks.push(el)\n }\n })\n\n if (animTasks.length === 0) return this.stopAnimation()\n\n const promises = animTasks.map((el, i) => {\n return new Promise<void>(resolve => {\n this.drawLine(el, i, resolve)\n })\n })\n\n await Promise.all(promises)\n this.stopAnimation()\n }\n\n // 缺口修复逻辑\n // 多走 0.1px 触发渲染闭合和确定起始矢量方向\n private fixPathGap(pathEl: SVGPathElement, d: string): string {\n if (/[Zz]\\s*$/.test(d)) {\n pathEl.setAttribute('d', d)\n const p0 = pathEl.getPointAtLength(0)\n const p1 = pathEl.getPointAtLength(0.1)\n\n // 将 Z 替换为回到起点并多走 0.1px 的路径\n return d.replace(/[Zz]\\s*$/, `L${p0.x.toFixed(3)} ${p0.y.toFixed(3)} L${p1.x.toFixed(3)} ${p1.y.toFixed(3)}`)\n }\n return d\n }\n\n private drawLine(el: SVGGeometryElement, index: number, onFinish: () => void) {\n const strokeWidth = parseFloat(getComputedStyle(el).strokeWidth) || 0\n const len = el.getTotalLength() + strokeWidth\n\n el.style.strokeDasharray = `${len}`\n el.style.strokeDashoffset = `${len}`\n\n const anim = el.animate([{ strokeDashoffset: `${len}` }, { strokeDashoffset: '0' }], {\n duration: this.duration,\n easing: this.easing,\n fill: 'forwards'\n })\n anim.onfinish = onFinish\n }\n\n private stopAnimation() {\n this.isAnimating = false\n this.svgClone = null\n }\n\n render() {\n return html`\n <slot ?hidden=\"${this.isAnimating}\" @slotchange=\"${this.handleSlotChange}\"></slot>\n ${this.isAnimating ? this.svgClone : ''}\n `\n }\n}\n"],"mappings":";;;;;;;;;AAMO,IAAA,IAAA,cAAgC,EAAW;;+BAGM,mBACF,6BAErB,oBACmB;;;
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/svg-draw-lines/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-svg-draw-lines')\nexport class WebUiSvgDrawLines extends LitElement {\n static override styles = unsafeCSS(style)\n\n @property({ type: Number, reflect: true }) duration = 1000\n @property({ type: String, reflect: true }) easing = 'linear'\n\n @state() private isAnimating = false\n @state() private svgClone: SVGSVGElement | null = null\n @query('slot') private slotEl!: HTMLSlotElement\n\n private handleSlotChange() {\n if (this.isAnimating) return\n\n this.cloneOriginalSvg()\n\n this.isAnimating = true\n void this.startAnimation()\n }\n\n private cloneOriginalSvg() {\n const original = this.slotEl.assignedElements({ flatten: true })[0]\n if (!(original instanceof SVGSVGElement)) return\n\n const svgClone = original.cloneNode(true) as SVGSVGElement\n svgClone.classList.add('svg-clone')\n this.svgClone = svgClone\n }\n\n private async startAnimation() {\n if (!this.svgClone) return\n await this.updateComplete\n\n const selectors = 'path, rect, circle, line, polyline, polygon, ellipse'\n const elements = Array.from(this.svgClone.querySelectorAll(selectors)) as SVGGeometryElement[]\n\n const animTasks: SVGGeometryElement[] = []\n let cursor = { x: 0, y: 0 }\n\n // 除 path 外其余几何图形无需额外处理\n // 将绘制多段路径的单 path 先拆分为多 path 并重新插入 dom\n // 再分别计算每个 path 的 total length\n elements.forEach(el => {\n if (el instanceof SVGPathElement) {\n const d = el.getAttribute('d') || ''\n const segments = d.split(/(?=[Mm])/).filter(s => s.trim())\n\n // 无论是一段还是多段，统一处理\n segments.forEach(seg => {\n const pathPart = segments.length > 1 ? (el.cloneNode() as SVGPathElement) : el\n let finalD = seg.startsWith('m') ? `M${cursor.x} ${cursor.y}${seg}` : seg\n\n finalD = this.fixPathGap(pathPart, finalD)\n pathPart.setAttribute('d', finalD)\n\n if (segments.length > 1) el.parentNode?.insertBefore(pathPart, el)\n\n animTasks.push(pathPart)\n\n const end = pathPart.getPointAtLength(pathPart.getTotalLength())\n cursor = { x: end.x, y: end.y }\n })\n\n if (segments.length > 1) el.remove()\n } else {\n animTasks.push(el)\n }\n })\n\n if (animTasks.length === 0) return this.stopAnimation()\n\n const promises = animTasks.map((el, i) => {\n return new Promise<void>(resolve => {\n this.drawLine(el, i, resolve)\n })\n })\n\n await Promise.all(promises)\n this.stopAnimation()\n }\n\n // 缺口修复逻辑\n // 多走 0.1px 触发渲染闭合和确定起始矢量方向\n private fixPathGap(pathEl: SVGPathElement, d: string): string {\n if (/[Zz]\\s*$/.test(d)) {\n pathEl.setAttribute('d', d)\n const p0 = pathEl.getPointAtLength(0)\n const p1 = pathEl.getPointAtLength(0.1)\n\n // 将 Z 替换为回到起点并多走 0.1px 的路径\n return d.replace(/[Zz]\\s*$/, `L${p0.x.toFixed(3)} ${p0.y.toFixed(3)} L${p1.x.toFixed(3)} ${p1.y.toFixed(3)}`)\n }\n return d\n }\n\n private drawLine(el: SVGGeometryElement, index: number, onFinish: () => void) {\n const strokeWidth = parseFloat(getComputedStyle(el).strokeWidth) || 0\n const len = el.getTotalLength() + strokeWidth\n\n el.style.strokeDasharray = `${len}`\n el.style.strokeDashoffset = `${len}`\n\n const anim = el.animate([{ strokeDashoffset: `${len}` }, { strokeDashoffset: '0' }], {\n duration: this.duration,\n easing: this.easing,\n fill: 'forwards'\n })\n anim.onfinish = onFinish\n }\n\n private stopAnimation() {\n this.isAnimating = false\n this.svgClone = null\n }\n\n override render() {\n return html`\n <slot ?hidden=\"${this.isAnimating}\" @slotchange=\"${this.handleSlotChange}\"></slot>\n ${this.isAnimating ? this.svgClone : ''}\n `\n }\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@greypan/web-ui",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.1",
|
|
4
4
|
"description": "Lit-based web components for React, Vue, and vanilla JS",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -34,14 +34,15 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"iconify-icon": "^3.0.2",
|
|
37
|
-
"@greypan/browser-kit": "1.7.
|
|
38
|
-
"@greypan/js-kit": "1.6.
|
|
37
|
+
"@greypan/browser-kit": "1.7.1",
|
|
38
|
+
"@greypan/js-kit": "1.6.1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"lit": "^3.3.3",
|
|
42
42
|
"@types/react": "^19.2.17",
|
|
43
43
|
"react": "^19.2.7",
|
|
44
|
-
"vue": "^3.5.39"
|
|
44
|
+
"vue": "^3.5.39",
|
|
45
|
+
"@greypan/tsconfig": "1.0.1"
|
|
45
46
|
},
|
|
46
47
|
"peerDependencies": {
|
|
47
48
|
"lit": "^3.3.3",
|