@weapp-vite/web 1.3.36 → 1.4.0

package/dist/runtime/nativeComponents/picker/style.mjs

@@ -0,0 +1,71 @@
+//#region src/runtime/nativeComponents/picker/style.ts
+const PICKER_SHADOW_STYLE = `
+  :host { position: relative; cursor: pointer; }
+  :host([disabled]) { cursor: not-allowed; opacity: 0.6; }
+  .backdrop {
+    position: fixed;
+    z-index: 1200;
+    inset: 0;
+    display: flex;
+    align-items: flex-end;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  .backdrop[hidden] { display: none; }
+  .panel {
+    box-sizing: border-box;
+    width: 100%;
+    max-height: min(72vh, 520px);
+    padding-bottom: var(--weapp-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
+    color: #000000;
+    background: #ffffff;
+  }
+  .toolbar {
+    display: grid;
+    grid-template-columns: 72px minmax(0, 1fr) 72px;
+    align-items: center;
+    min-height: 52px;
+    border-bottom: 1px solid #e5e5e5;
+  }
+  .toolbar button {
+    min-width: 0;
+    height: 52px;
+    padding: 0 16px;
+    border: 0;
+    color: #576b95;
+    background: transparent;
+    font: inherit;
+  }
+  .toolbar button:last-child { color: #07c160; }
+  .title {
+    overflow: hidden;
+    font-size: 15px;
+    font-weight: 500;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .editors {
+    display: flex;
+    box-sizing: border-box;
+    gap: 8px;
+    min-height: 216px;
+    padding: 16px;
+  }
+  .editors select,
+  .editors input {
+    box-sizing: border-box;
+    min-width: 0;
+    flex: 1;
+    border: 1px solid #d8d8d8;
+    border-radius: 4px;
+    color: inherit;
+    background: #ffffff;
+    font: inherit;
+  }
+  .editors select { padding: 6px; }
+  .editors input { align-self: center; height: 44px; padding: 0 12px; }
+`;
+
+//#endregion
+export { PICKER_SHADOW_STYLE };
+//# sourceMappingURL=style.mjs.map

package/dist/runtime/nativeComponents/picker/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../../src/runtime/nativeComponents/picker/style.ts"],"sourcesContent":["export const PICKER_SHADOW_STYLE = `\n  :host { position: relative; cursor: pointer; }\n  :host([disabled]) { cursor: not-allowed; opacity: 0.6; }\n  .backdrop {\n    position: fixed;\n    z-index: 1200;\n    inset: 0;\n    display: flex;\n    align-items: flex-end;\n    background: rgba(0, 0, 0, 0.5);\n  }\n  .backdrop[hidden] { display: none; }\n  .panel {\n    box-sizing: border-box;\n    width: 100%;\n    max-height: min(72vh, 520px);\n    padding-bottom: var(--weapp-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));\n    color: #000000;\n    background: #ffffff;\n  }\n  .toolbar {\n    display: grid;\n    grid-template-columns: 72px minmax(0, 1fr) 72px;\n    align-items: center;\n    min-height: 52px;\n    border-bottom: 1px solid #e5e5e5;\n  }\n  .toolbar button {\n    min-width: 0;\n    height: 52px;\n    padding: 0 16px;\n    border: 0;\n    color: #576b95;\n    background: transparent;\n    font: inherit;\n  }\n  .toolbar button:last-child { color: #07c160; }\n  .title {\n    overflow: hidden;\n    font-size: 15px;\n    font-weight: 500;\n    text-align: center;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .editors {\n    display: flex;\n    box-sizing: border-box;\n    gap: 8px;\n    min-height: 216px;\n    padding: 16px;\n  }\n  .editors select,\n  .editors input {\n    box-sizing: border-box;\n    min-width: 0;\n    flex: 1;\n    border: 1px solid #d8d8d8;\n    border-radius: 4px;\n    color: inherit;\n    background: #ffffff;\n    font: inherit;\n  }\n  .editors select { padding: 6px; }\n  .editors input { align-self: center; height: 44px; padding: 0 12px; }\n`\n"],"mappings":";AAAA,MAAa,sBAAsB"}

package/dist/runtime/nativeComponents/pickerView/column.mjs

@@ -0,0 +1,134 @@
+import { getNativeComponentDescriptor } from "../../../shared/nativeComponents.mjs";
+import { resolveContainingShadowRoot } from "../helpers.mjs";
+import { ensureNativeComponentStyle } from "../style.mjs";
+import { PICKER_VIEW_COLUMN_CHANGE_EVENT, PICKER_VIEW_COLUMN_READY_EVENT, PICKER_VIEW_PICK_END_EVENT, PICKER_VIEW_PICK_START_EVENT } from "./helpers.mjs";
+import { PICKER_VIEW_COLUMN_SHADOW_STYLE } from "./style.mjs";
+
+//#region src/runtime/nativeComponents/pickerView/column.ts
+const BaseElement = globalThis.HTMLElement ?? class {};
+var WeappPickerViewColumn = class extends BaseElement {
+	static observedAttributes = [...getNativeComponentDescriptor("picker-view-column").attributes];
+	#scroller;
+	#slot;
+	#itemHeight = 34;
+	#selectedIndex = 0;
+	#scrollTimer;
+	#resizeObserver;
+	#picking = false;
+	#suppressScroll = false;
+	get itemCount() {
+		return this.#items.length;
+	}
+	get itemHeight() {
+		return this.#itemHeight;
+	}
+	get selectedIndex() {
+		if (!this.#scroller) return this.#selectedIndex;
+		return this.#clampIndex(Math.round(this.#scroller.scrollTop / this.#itemHeight));
+	}
+	connectedCallback() {
+		ensureNativeComponentStyle(resolveContainingShadowRoot(this));
+		this.#ensureStructure();
+		this.#syncMetrics();
+		this.#observeSize();
+	}
+	disconnectedCallback() {
+		if (this.#scrollTimer) {
+			clearTimeout(this.#scrollTimer);
+			this.#scrollTimer = void 0;
+		}
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+	}
+	setSelectedIndex(value) {
+		this.#selectedIndex = this.#clampIndex(value);
+		if (!this.#scroller) return;
+		this.#suppressScroll = true;
+		this.#scroller.scrollTop = this.#selectedIndex * this.#itemHeight;
+		requestAnimationFrame(() => {
+			this.#suppressScroll = false;
+		});
+	}
+	get #items() {
+		return this.#slot?.assignedElements({ flatten: true }) ?? [];
+	}
+	#ensureStructure() {
+		if (this.#scroller || typeof document === "undefined") return;
+		const root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = PICKER_VIEW_COLUMN_SHADOW_STYLE;
+		const scroller = document.createElement("div");
+		scroller.className = "scroller";
+		const leading = document.createElement("div");
+		leading.className = "spacer";
+		const slot = document.createElement("slot");
+		const trailing = document.createElement("div");
+		trailing.className = "spacer";
+		scroller.append(leading, slot, trailing);
+		root.append(style, scroller);
+		slot.addEventListener("slotchange", () => this.#syncMetrics());
+		scroller.addEventListener("pointerdown", this.#handlePickStart);
+		scroller.addEventListener("pointerup", this.#schedulePickEnd);
+		scroller.addEventListener("pointercancel", this.#schedulePickEnd);
+		scroller.addEventListener("scroll", this.#handleScroll, { passive: true });
+		this.#scroller = scroller;
+		this.#slot = slot;
+	}
+	#syncMetrics() {
+		const height = this.#items[0]?.getBoundingClientRect().height;
+		this.#itemHeight = height && Number.isFinite(height) && height > 0 ? height : 34;
+		this.style.setProperty("--weapp-picker-view-item-height", `${this.#itemHeight}px`);
+		this.setSelectedIndex(this.#selectedIndex);
+		this.#dispatchInternal(PICKER_VIEW_COLUMN_READY_EVENT);
+	}
+	#observeSize() {
+		if (typeof ResizeObserver === "undefined" || !this.#scroller || this.#resizeObserver) return;
+		this.#resizeObserver = new ResizeObserver(() => this.#syncMetrics());
+		this.#resizeObserver.observe(this.#scroller);
+	}
+	#clampIndex(value) {
+		return Math.min(Math.max(0, Number.isFinite(value) ? Math.trunc(value) : 0), Math.max(0, this.itemCount - 1));
+	}
+	#dispatchInternal(name, detail = {}) {
+		this.dispatchEvent(new CustomEvent(name, {
+			bubbles: true,
+			composed: true,
+			detail
+		}));
+	}
+	#handlePickStart = () => {
+		if (this.#picking || this.#suppressScroll) return;
+		this.#picking = true;
+		this.#dispatchInternal(PICKER_VIEW_PICK_START_EVENT);
+	};
+	#handleScroll = () => {
+		if (this.#suppressScroll) return;
+		this.#handlePickStart();
+		this.#selectedIndex = this.selectedIndex;
+		this.#dispatchInternal(PICKER_VIEW_COLUMN_CHANGE_EVENT, {
+			value: this.#selectedIndex,
+			phase: "changing"
+		});
+		this.#schedulePickEnd();
+	};
+	#schedulePickEnd = () => {
+		if (this.#scrollTimer) clearTimeout(this.#scrollTimer);
+		this.#scrollTimer = globalThis.setTimeout(() => {
+			this.#scrollTimer = void 0;
+			this.#selectedIndex = this.selectedIndex;
+			this.setSelectedIndex(this.#selectedIndex);
+			this.#dispatchInternal(PICKER_VIEW_COLUMN_CHANGE_EVENT, {
+				value: this.#selectedIndex,
+				phase: "end"
+			});
+			if (this.#picking) {
+				this.#picking = false;
+				this.#dispatchInternal(PICKER_VIEW_PICK_END_EVENT);
+			}
+		}, 100);
+	};
+};
+
+//#endregion
+export { WeappPickerViewColumn };
+//# sourceMappingURL=column.mjs.map

package/dist/runtime/nativeComponents/pickerView/column.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"column.mjs","names":["#items","#itemHeight","#scroller","#selectedIndex","#clampIndex","#ensureStructure","#syncMetrics","#observeSize","#scrollTimer","#resizeObserver","#suppressScroll","#slot","#handlePickStart","#schedulePickEnd","#handleScroll","#dispatchInternal","#picking"],"sources":["../../../../src/runtime/nativeComponents/pickerView/column.ts"],"sourcesContent":["import { getNativeComponentDescriptor } from '../../../shared/nativeComponents'\nimport { resolveContainingShadowRoot } from '../helpers'\nimport { ensureNativeComponentStyle } from '../style'\nimport {\n  PICKER_VIEW_COLUMN_CHANGE_EVENT,\n  PICKER_VIEW_COLUMN_READY_EVENT,\n  PICKER_VIEW_PICK_END_EVENT,\n  PICKER_VIEW_PICK_START_EVENT,\n} from './helpers'\nimport { PICKER_VIEW_COLUMN_SHADOW_STYLE } from './style'\n\nconst BaseElement = (globalThis.HTMLElement ?? class {}) as typeof HTMLElement\n\nexport class WeappPickerViewColumn extends BaseElement {\n  static observedAttributes = [...getNativeComponentDescriptor('picker-view-column')!.attributes]\n\n  #scroller?: HTMLDivElement\n  #slot?: HTMLSlotElement\n  #itemHeight = 34\n  #selectedIndex = 0\n  #scrollTimer?: ReturnType<typeof globalThis.setTimeout>\n  #resizeObserver?: ResizeObserver\n  #picking = false\n  #suppressScroll = false\n\n  get itemCount() {\n    return this.#items.length\n  }\n\n  get itemHeight() {\n    return this.#itemHeight\n  }\n\n  get selectedIndex() {\n    if (!this.#scroller) {\n      return this.#selectedIndex\n    }\n    return this.#clampIndex(Math.round(this.#scroller.scrollTop / this.#itemHeight))\n  }\n\n  connectedCallback() {\n    ensureNativeComponentStyle(resolveContainingShadowRoot(this))\n    this.#ensureStructure()\n    this.#syncMetrics()\n    this.#observeSize()\n  }\n\n  disconnectedCallback() {\n    if (this.#scrollTimer) {\n      clearTimeout(this.#scrollTimer)\n      this.#scrollTimer = undefined\n    }\n    this.#resizeObserver?.disconnect()\n    this.#resizeObserver = undefined\n  }\n\n  setSelectedIndex(value: number) {\n    this.#selectedIndex = this.#clampIndex(value)\n    if (!this.#scroller) {\n      return\n    }\n    this.#suppressScroll = true\n    this.#scroller.scrollTop = this.#selectedIndex * this.#itemHeight\n    requestAnimationFrame(() => {\n      this.#suppressScroll = false\n    })\n  }\n\n  get #items() {\n    return this.#slot?.assignedElements({ flatten: true }) ?? []\n  }\n\n  #ensureStructure() {\n    if (this.#scroller || typeof document === 'undefined') {\n      return\n    }\n    const root = this.shadowRoot ?? this.attachShadow({ mode: 'open' })\n    const style = document.createElement('style')\n    style.textContent = PICKER_VIEW_COLUMN_SHADOW_STYLE\n    const scroller = document.createElement('div')\n    scroller.className = 'scroller'\n    const leading = document.createElement('div')\n    leading.className = 'spacer'\n    const slot = document.createElement('slot')\n    const trailing = document.createElement('div')\n    trailing.className = 'spacer'\n    scroller.append(leading, slot, trailing)\n    root.append(style, scroller)\n    slot.addEventListener('slotchange', () => this.#syncMetrics())\n    scroller.addEventListener('pointerdown', this.#handlePickStart)\n    scroller.addEventListener('pointerup', this.#schedulePickEnd)\n    scroller.addEventListener('pointercancel', this.#schedulePickEnd)\n    scroller.addEventListener('scroll', this.#handleScroll, { passive: true })\n    this.#scroller = scroller\n    this.#slot = slot\n  }\n\n  #syncMetrics() {\n    const first = this.#items[0] as HTMLElement | undefined\n    const height = first?.getBoundingClientRect().height\n    this.#itemHeight = height && Number.isFinite(height) && height > 0 ? height : 34\n    this.style.setProperty('--weapp-picker-view-item-height', `${this.#itemHeight}px`)\n    this.setSelectedIndex(this.#selectedIndex)\n    this.#dispatchInternal(PICKER_VIEW_COLUMN_READY_EVENT)\n  }\n\n  #observeSize() {\n    if (typeof ResizeObserver === 'undefined' || !this.#scroller || this.#resizeObserver) {\n      return\n    }\n    this.#resizeObserver = new ResizeObserver(() => this.#syncMetrics())\n    this.#resizeObserver.observe(this.#scroller)\n  }\n\n  #clampIndex(value: number) {\n    const index = Number.isFinite(value) ? Math.trunc(value) : 0\n    return Math.min(Math.max(0, index), Math.max(0, this.itemCount - 1))\n  }\n\n  #dispatchInternal(name: string, detail: unknown = {}) {\n    this.dispatchEvent(new CustomEvent(name, {\n      bubbles: true,\n      composed: true,\n      detail,\n    }))\n  }\n\n  #handlePickStart = () => {\n    if (this.#picking || this.#suppressScroll) {\n      return\n    }\n    this.#picking = true\n    this.#dispatchInternal(PICKER_VIEW_PICK_START_EVENT)\n  }\n\n  #handleScroll = () => {\n    if (this.#suppressScroll) {\n      return\n    }\n    this.#handlePickStart()\n    this.#selectedIndex = this.selectedIndex\n    this.#dispatchInternal(PICKER_VIEW_COLUMN_CHANGE_EVENT, {\n      value: this.#selectedIndex,\n      phase: 'changing',\n    })\n    this.#schedulePickEnd()\n  }\n\n  #schedulePickEnd = () => {\n    if (this.#scrollTimer) {\n      clearTimeout(this.#scrollTimer)\n    }\n    this.#scrollTimer = globalThis.setTimeout(() => {\n      this.#scrollTimer = undefined\n      this.#selectedIndex = this.selectedIndex\n      this.setSelectedIndex(this.#selectedIndex)\n      this.#dispatchInternal(PICKER_VIEW_COLUMN_CHANGE_EVENT, {\n        value: this.#selectedIndex,\n        phase: 'end',\n      })\n      if (this.#picking) {\n        this.#picking = false\n        this.#dispatchInternal(PICKER_VIEW_PICK_END_EVENT)\n      }\n    }, 100)\n  }\n}\n"],"mappings":";;;;;;;AAWA,MAAM,cAAe,WAAW,eAAe,MAAM,CAAC;AAEtD,IAAa,wBAAb,cAA2C,YAAY;CACrD,OAAO,qBAAqB,CAAC,GAAG,6BAA6B,oBAAoB,CAAC,CAAE,UAAU;CAE9F;CACA;CACA,cAAc;CACd,iBAAiB;CACjB;CACA;CACA,WAAW;CACX,kBAAkB;CAElB,IAAI,YAAY;EACd,OAAO,KAAKA,OAAO;CACrB;CAEA,IAAI,aAAa;EACf,OAAO,KAAKC;CACd;CAEA,IAAI,gBAAgB;EAClB,IAAI,CAAC,KAAKC,WACR,OAAO,KAAKC;EAEd,OAAO,KAAKC,YAAY,KAAK,MAAM,KAAKF,UAAU,YAAY,KAAKD,WAAW,CAAC;CACjF;CAEA,oBAAoB;EAClB,2BAA2B,4BAA4B,IAAI,CAAC;EAC5D,KAAKI,iBAAiB;EACtB,KAAKC,aAAa;EAClB,KAAKC,aAAa;CACpB;CAEA,uBAAuB;EACrB,IAAI,KAAKC,cAAc;GACrB,aAAa,KAAKA,YAAY;GAC9B,KAAKA,eAAe;EACtB;EACA,KAAKC,iBAAiB,WAAW;EACjC,KAAKA,kBAAkB;CACzB;CAEA,iBAAiB,OAAe;EAC9B,KAAKN,iBAAiB,KAAKC,YAAY,KAAK;EAC5C,IAAI,CAAC,KAAKF,WACR;EAEF,KAAKQ,kBAAkB;EACvB,KAAKR,UAAU,YAAY,KAAKC,iBAAiB,KAAKF;EACtD,4BAA4B;GAC1B,KAAKS,kBAAkB;EACzB,CAAC;CACH;CAEA,IAAIV,SAAS;EACX,OAAO,KAAKW,OAAO,iBAAiB,EAAE,SAAS,KAAK,CAAC,KAAK,CAAC;CAC7D;CAEA,mBAAmB;EACjB,IAAI,KAAKT,aAAa,OAAO,aAAa,aACxC;EAEF,MAAM,OAAO,KAAK,cAAc,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;EAClE,MAAM,QAAQ,SAAS,cAAc,OAAO;EAC5C,MAAM,cAAc;EACpB,MAAM,WAAW,SAAS,cAAc,KAAK;EAC7C,SAAS,YAAY;EACrB,MAAM,UAAU,SAAS,cAAc,KAAK;EAC5C,QAAQ,YAAY;EACpB,MAAM,OAAO,SAAS,cAAc,MAAM;EAC1C,MAAM,WAAW,SAAS,cAAc,KAAK;EAC7C,SAAS,YAAY;EACrB,SAAS,OAAO,SAAS,MAAM,QAAQ;EACvC,KAAK,OAAO,OAAO,QAAQ;EAC3B,KAAK,iBAAiB,oBAAoB,KAAKI,aAAa,CAAC;EAC7D,SAAS,iBAAiB,eAAe,KAAKM,gBAAgB;EAC9D,SAAS,iBAAiB,aAAa,KAAKC,gBAAgB;EAC5D,SAAS,iBAAiB,iBAAiB,KAAKA,gBAAgB;EAChE,SAAS,iBAAiB,UAAU,KAAKC,eAAe,EAAE,SAAS,KAAK,CAAC;EACzE,KAAKZ,YAAY;EACjB,KAAKS,QAAQ;CACf;CAEA,eAAe;EAEb,MAAM,SADQ,KAAKX,OAAO,EACN,EAAE,sBAAsB,CAAC,CAAC;EAC9C,KAAKC,cAAc,UAAU,OAAO,SAAS,MAAM,KAAK,SAAS,IAAI,SAAS;EAC9E,KAAK,MAAM,YAAY,mCAAmC,GAAG,KAAKA,YAAY,GAAG;EACjF,KAAK,iBAAiB,KAAKE,cAAc;EACzC,KAAKY,kBAAkB,8BAA8B;CACvD;CAEA,eAAe;EACb,IAAI,OAAO,mBAAmB,eAAe,CAAC,KAAKb,aAAa,KAAKO,iBACnE;EAEF,KAAKA,kBAAkB,IAAI,qBAAqB,KAAKH,aAAa,CAAC;EACnE,KAAKG,gBAAgB,QAAQ,KAAKP,SAAS;CAC7C;CAEA,YAAY,OAAe;EAEzB,OAAO,KAAK,IAAI,KAAK,IAAI,GADX,OAAO,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,CAC1B,GAAG,KAAK,IAAI,GAAG,KAAK,YAAY,CAAC,CAAC;CACrE;CAEA,kBAAkB,MAAc,SAAkB,CAAC,GAAG;EACpD,KAAK,cAAc,IAAI,YAAY,MAAM;GACvC,SAAS;GACT,UAAU;GACV;EACF,CAAC,CAAC;CACJ;CAEA,yBAAyB;EACvB,IAAI,KAAKc,YAAY,KAAKN,iBACxB;EAEF,KAAKM,WAAW;EAChB,KAAKD,kBAAkB,4BAA4B;CACrD;CAEA,sBAAsB;EACpB,IAAI,KAAKL,iBACP;EAEF,KAAKE,iBAAiB;EACtB,KAAKT,iBAAiB,KAAK;EAC3B,KAAKY,kBAAkB,iCAAiC;GACtD,OAAO,KAAKZ;GACZ,OAAO;EACT,CAAC;EACD,KAAKU,iBAAiB;CACxB;CAEA,yBAAyB;EACvB,IAAI,KAAKL,cACP,aAAa,KAAKA,YAAY;EAEhC,KAAKA,eAAe,WAAW,iBAAiB;GAC9C,KAAKA,eAAe;GACpB,KAAKL,iBAAiB,KAAK;GAC3B,KAAK,iBAAiB,KAAKA,cAAc;GACzC,KAAKY,kBAAkB,iCAAiC;IACtD,OAAO,KAAKZ;IACZ,OAAO;GACT,CAAC;GACD,IAAI,KAAKa,UAAU;IACjB,KAAKA,WAAW;IAChB,KAAKD,kBAAkB,0BAA0B;GACnD;EACF,GAAG,GAAG;CACR;AACF"}

package/dist/runtime/nativeComponents/pickerView/helpers.mjs

@@ -0,0 +1,17 @@
+//#region src/runtime/nativeComponents/pickerView/helpers.ts
+const PICKER_VIEW_COLUMN_CHANGE_EVENT = "weapp-picker-view-column-change";
+const PICKER_VIEW_COLUMN_READY_EVENT = "weapp-picker-view-column-ready";
+const PICKER_VIEW_PICK_START_EVENT = "weapp-picker-view-pick-start";
+const PICKER_VIEW_PICK_END_EVENT = "weapp-picker-view-pick-end";
+function normalizeColumnIndex(value, itemCount) {
+	const numeric = Number(value);
+	return Math.min(Math.max(0, Number.isFinite(numeric) ? Math.trunc(numeric) : 0), Math.max(0, itemCount - 1));
+}
+function normalizePickerViewValue(value, columnLengths) {
+	const indexes = Array.isArray(value) ? value : [];
+	return columnLengths.map((length, column) => normalizeColumnIndex(indexes[column], length));
+}
+
+//#endregion
+export { PICKER_VIEW_COLUMN_CHANGE_EVENT, PICKER_VIEW_COLUMN_READY_EVENT, PICKER_VIEW_PICK_END_EVENT, PICKER_VIEW_PICK_START_EVENT, normalizePickerViewValue };
+//# sourceMappingURL=helpers.mjs.map

package/dist/runtime/nativeComponents/pickerView/helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.mjs","names":[],"sources":["../../../../src/runtime/nativeComponents/pickerView/helpers.ts"],"sourcesContent":["export const PICKER_VIEW_COLUMN_CHANGE_EVENT = 'weapp-picker-view-column-change'\nexport const PICKER_VIEW_COLUMN_READY_EVENT = 'weapp-picker-view-column-ready'\nexport const PICKER_VIEW_PICK_START_EVENT = 'weapp-picker-view-pick-start'\nexport const PICKER_VIEW_PICK_END_EVENT = 'weapp-picker-view-pick-end'\n\nexport interface PickerViewColumnChangeDetail {\n  value: number\n  phase: 'changing' | 'end'\n}\n\nfunction normalizeColumnIndex(value: unknown, itemCount: number) {\n  const numeric = Number(value)\n  const index = Number.isFinite(numeric) ? Math.trunc(numeric) : 0\n  return Math.min(Math.max(0, index), Math.max(0, itemCount - 1))\n}\n\nexport function normalizePickerViewValue(value: unknown, columnLengths: number[]) {\n  const indexes = Array.isArray(value) ? value : []\n  return columnLengths.map((length, column) => normalizeColumnIndex(indexes[column], length))\n}\n"],"mappings":";AAAA,MAAa,kCAAkC;AAC/C,MAAa,iCAAiC;AAC9C,MAAa,+BAA+B;AAC5C,MAAa,6BAA6B;AAO1C,SAAS,qBAAqB,OAAgB,WAAmB;CAC/D,MAAM,UAAU,OAAO,KAAK;CAE5B,OAAO,KAAK,IAAI,KAAK,IAAI,GADX,OAAO,SAAS,OAAO,IAAI,KAAK,MAAM,OAAO,IAAI,CAC9B,GAAG,KAAK,IAAI,GAAG,YAAY,CAAC,CAAC;AAChE;AAEA,SAAgB,yBAAyB,OAAgB,eAAyB;CAChF,MAAM,UAAU,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC;CAChD,OAAO,cAAc,KAAK,QAAQ,WAAW,qBAAqB,QAAQ,SAAS,MAAM,CAAC;AAC5F"}

package/dist/runtime/nativeComponents/pickerView/index.mjs

@@ -0,0 +1,128 @@
+import { getNativeComponentDescriptor } from "../../../shared/nativeComponents.mjs";
+import { dispatchMiniProgramEvent, readBooleanAttribute, resolveContainingShadowRoot } from "../helpers.mjs";
+import { ensureNativeComponentStyle } from "../style.mjs";
+import { PICKER_VIEW_COLUMN_CHANGE_EVENT, PICKER_VIEW_COLUMN_READY_EVENT, PICKER_VIEW_PICK_END_EVENT, PICKER_VIEW_PICK_START_EVENT, normalizePickerViewValue } from "./helpers.mjs";
+import { PICKER_VIEW_SHADOW_STYLE } from "./style.mjs";
+import { WeappPickerViewColumn } from "./column.mjs";
+
+//#region src/runtime/nativeComponents/pickerView/index.ts
+const BaseElement = globalThis.HTMLElement ?? class {};
+function parsePickerViewValue(value) {
+	if (!value) return [];
+	try {
+		const parsed = JSON.parse(value);
+		return Array.isArray(parsed) ? parsed : [];
+	} catch {
+		return [];
+	}
+}
+var WeappPickerView = class extends BaseElement {
+	static observedAttributes = [...getNativeComponentDescriptor("picker-view").attributes];
+	#value = [];
+	#valuePropertySet = false;
+	#columns = [];
+	#slot;
+	#indicator;
+	#masks = [];
+	#lastEmittedValue = [];
+	get value() {
+		return this.#valuePropertySet ? this.#value : parsePickerViewValue(this.getAttribute("value"));
+	}
+	set value(value) {
+		this.#valuePropertySet = true;
+		this.#value = value;
+		this.#syncColumns();
+	}
+	connectedCallback() {
+		ensureNativeComponentStyle(resolveContainingShadowRoot(this));
+		this.#ensureStructure();
+		this.addEventListener(PICKER_VIEW_COLUMN_CHANGE_EVENT, this.#handleColumnChange);
+		this.addEventListener(PICKER_VIEW_COLUMN_READY_EVENT, this.#handleColumnReady);
+		this.addEventListener(PICKER_VIEW_PICK_START_EVENT, this.#handlePickStart);
+		this.addEventListener(PICKER_VIEW_PICK_END_EVENT, this.#handlePickEnd);
+		this.#syncColumns();
+		this.#syncStyles();
+	}
+	disconnectedCallback() {
+		this.removeEventListener(PICKER_VIEW_COLUMN_CHANGE_EVENT, this.#handleColumnChange);
+		this.removeEventListener(PICKER_VIEW_COLUMN_READY_EVENT, this.#handleColumnReady);
+		this.removeEventListener(PICKER_VIEW_PICK_START_EVENT, this.#handlePickStart);
+		this.removeEventListener(PICKER_VIEW_PICK_END_EVENT, this.#handlePickEnd);
+	}
+	attributeChangedCallback(name) {
+		if (name === "value") this.#syncColumns();
+		else this.#syncStyles();
+	}
+	#ensureStructure() {
+		if (this.#slot || typeof document === "undefined") return;
+		const root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = PICKER_VIEW_SHADOW_STYLE;
+		const viewport = document.createElement("div");
+		viewport.className = "viewport";
+		const slot = document.createElement("slot");
+		const topMask = document.createElement("div");
+		topMask.className = "mask mask--top";
+		const bottomMask = document.createElement("div");
+		bottomMask.className = "mask mask--bottom";
+		const indicator = document.createElement("div");
+		indicator.className = "indicator";
+		viewport.append(slot, topMask, bottomMask, indicator);
+		root.append(style, viewport);
+		slot.addEventListener("slotchange", () => this.#syncColumns());
+		this.#slot = slot;
+		this.#indicator = indicator;
+		this.#masks = [topMask, bottomMask];
+	}
+	#syncColumns() {
+		if (!this.#slot) return;
+		this.#columns = this.#slot.assignedElements({ flatten: true }).filter((element) => element.tagName.toLowerCase() === "weapp-picker-view-column");
+		const next = normalizePickerViewValue(this.value, this.#columns.map((column) => column.itemCount));
+		this.#columns.forEach((column, index) => column.setSelectedIndex(next[index]));
+		const itemHeight = this.#columns[0]?.itemHeight;
+		if (itemHeight) this.style.setProperty("--weapp-picker-view-item-height", `${itemHeight}px`);
+		this.#lastEmittedValue = [...next];
+	}
+	#syncStyles() {
+		if (!this.#indicator) return;
+		this.#indicator.style.cssText = this.getAttribute("indicator-style") ?? "";
+		this.#indicator.className = `indicator ${this.getAttribute("indicator-class") ?? ""}`.trim();
+		const maskStyle = this.getAttribute("mask-style") ?? "";
+		const maskClass = this.getAttribute("mask-class") ?? "";
+		this.#masks.forEach((mask, index) => {
+			mask.style.cssText = maskStyle;
+			mask.className = `mask mask--${index === 0 ? "top" : "bottom"} ${maskClass}`.trim();
+		});
+	}
+	#handleColumnChange = (event) => {
+		event.stopPropagation();
+		const column = event.target;
+		const columnIndex = this.#columns.indexOf(column);
+		if (columnIndex < 0) return;
+		const next = normalizePickerViewValue(this.#columns.map((item) => item.selectedIndex), this.#columns.map((item) => item.itemCount));
+		next[columnIndex] = event.detail.value;
+		const immediate = readBooleanAttribute(this, "immediate-change");
+		if (immediate && event.detail.phase === "changing" || !immediate && event.detail.phase === "end") this.#emitChange(next);
+	};
+	#handleColumnReady = (event) => {
+		event.stopPropagation();
+		this.#syncColumns();
+	};
+	#emitChange(value) {
+		if (value.length === this.#lastEmittedValue.length && value.every((item, index) => item === this.#lastEmittedValue[index])) return;
+		this.#lastEmittedValue = [...value];
+		dispatchMiniProgramEvent(this, "change", { value });
+	}
+	#handlePickStart = (event) => {
+		event.stopPropagation();
+		dispatchMiniProgramEvent(this, "pickstart", {});
+	};
+	#handlePickEnd = (event) => {
+		event.stopPropagation();
+		dispatchMiniProgramEvent(this, "pickend", {});
+	};
+};
+
+//#endregion
+export { PICKER_VIEW_COLUMN_CHANGE_EVENT, PICKER_VIEW_COLUMN_READY_EVENT, PICKER_VIEW_PICK_END_EVENT, PICKER_VIEW_PICK_START_EVENT, WeappPickerView, WeappPickerViewColumn, normalizePickerViewValue };
+//# sourceMappingURL=index.mjs.map

package/dist/runtime/nativeComponents/pickerView/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["#valuePropertySet","#value","#syncColumns","#ensureStructure","#handleColumnChange","#handleColumnReady","#handlePickStart","#handlePickEnd","#syncStyles","#slot","#indicator","#masks","#columns","#lastEmittedValue","#emitChange"],"sources":["../../../../src/runtime/nativeComponents/pickerView/index.ts"],"sourcesContent":["import type { PickerViewColumnChangeDetail } from './helpers'\nimport { getNativeComponentDescriptor } from '../../../shared/nativeComponents'\nimport { dispatchMiniProgramEvent, readBooleanAttribute, resolveContainingShadowRoot } from '../helpers'\nimport { ensureNativeComponentStyle } from '../style'\nimport { WeappPickerViewColumn } from './column'\nimport {\n  normalizePickerViewValue,\n  PICKER_VIEW_COLUMN_CHANGE_EVENT,\n  PICKER_VIEW_COLUMN_READY_EVENT,\n  PICKER_VIEW_PICK_END_EVENT,\n  PICKER_VIEW_PICK_START_EVENT,\n} from './helpers'\nimport { PICKER_VIEW_SHADOW_STYLE } from './style'\n\nconst BaseElement = (globalThis.HTMLElement ?? class {}) as typeof HTMLElement\n\nfunction parsePickerViewValue(value: string | null) {\n  if (!value) {\n    return []\n  }\n  try {\n    const parsed = JSON.parse(value) as unknown\n    return Array.isArray(parsed) ? parsed : []\n  }\n  catch {\n    return []\n  }\n}\n\nexport class WeappPickerView extends BaseElement {\n  static observedAttributes = [...getNativeComponentDescriptor('picker-view')!.attributes]\n\n  #value: unknown = []\n  #valuePropertySet = false\n  #columns: WeappPickerViewColumn[] = []\n  #slot?: HTMLSlotElement\n  #indicator?: HTMLDivElement\n  #masks: HTMLDivElement[] = []\n  #lastEmittedValue: number[] = []\n\n  get value() {\n    return this.#valuePropertySet ? this.#value : parsePickerViewValue(this.getAttribute('value'))\n  }\n\n  set value(value: unknown) {\n    this.#valuePropertySet = true\n    this.#value = value\n    this.#syncColumns()\n  }\n\n  connectedCallback() {\n    ensureNativeComponentStyle(resolveContainingShadowRoot(this))\n    this.#ensureStructure()\n    this.addEventListener(PICKER_VIEW_COLUMN_CHANGE_EVENT, this.#handleColumnChange as EventListener)\n    this.addEventListener(PICKER_VIEW_COLUMN_READY_EVENT, this.#handleColumnReady)\n    this.addEventListener(PICKER_VIEW_PICK_START_EVENT, this.#handlePickStart)\n    this.addEventListener(PICKER_VIEW_PICK_END_EVENT, this.#handlePickEnd)\n    this.#syncColumns()\n    this.#syncStyles()\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener(PICKER_VIEW_COLUMN_CHANGE_EVENT, this.#handleColumnChange as EventListener)\n    this.removeEventListener(PICKER_VIEW_COLUMN_READY_EVENT, this.#handleColumnReady)\n    this.removeEventListener(PICKER_VIEW_PICK_START_EVENT, this.#handlePickStart)\n    this.removeEventListener(PICKER_VIEW_PICK_END_EVENT, this.#handlePickEnd)\n  }\n\n  attributeChangedCallback(name: string) {\n    if (name === 'value') {\n      this.#syncColumns()\n    }\n    else {\n      this.#syncStyles()\n    }\n  }\n\n  #ensureStructure() {\n    if (this.#slot || typeof document === 'undefined') {\n      return\n    }\n    const root = this.shadowRoot ?? this.attachShadow({ mode: 'open' })\n    const style = document.createElement('style')\n    style.textContent = PICKER_VIEW_SHADOW_STYLE\n    const viewport = document.createElement('div')\n    viewport.className = 'viewport'\n    const slot = document.createElement('slot')\n    const topMask = document.createElement('div')\n    topMask.className = 'mask mask--top'\n    const bottomMask = document.createElement('div')\n    bottomMask.className = 'mask mask--bottom'\n    const indicator = document.createElement('div')\n    indicator.className = 'indicator'\n    viewport.append(slot, topMask, bottomMask, indicator)\n    root.append(style, viewport)\n    slot.addEventListener('slotchange', () => this.#syncColumns())\n    this.#slot = slot\n    this.#indicator = indicator\n    this.#masks = [topMask, bottomMask]\n  }\n\n  #syncColumns() {\n    if (!this.#slot) {\n      return\n    }\n    this.#columns = this.#slot.assignedElements({ flatten: true })\n      .filter((element): element is WeappPickerViewColumn => element.tagName.toLowerCase() === 'weapp-picker-view-column')\n    const next = normalizePickerViewValue(this.value, this.#columns.map(column => column.itemCount))\n    this.#columns.forEach((column, index) => column.setSelectedIndex(next[index]!))\n    const itemHeight = this.#columns[0]?.itemHeight\n    if (itemHeight) {\n      this.style.setProperty('--weapp-picker-view-item-height', `${itemHeight}px`)\n    }\n    this.#lastEmittedValue = [...next]\n  }\n\n  #syncStyles() {\n    if (!this.#indicator) {\n      return\n    }\n    this.#indicator.style.cssText = this.getAttribute('indicator-style') ?? ''\n    this.#indicator.className = `indicator ${this.getAttribute('indicator-class') ?? ''}`.trim()\n    const maskStyle = this.getAttribute('mask-style') ?? ''\n    const maskClass = this.getAttribute('mask-class') ?? ''\n    this.#masks.forEach((mask, index) => {\n      mask.style.cssText = maskStyle\n      mask.className = `mask mask--${index === 0 ? 'top' : 'bottom'} ${maskClass}`.trim()\n    })\n  }\n\n  #handleColumnChange = (event: CustomEvent<PickerViewColumnChangeDetail>) => {\n    event.stopPropagation()\n    const column = event.target as WeappPickerViewColumn\n    const columnIndex = this.#columns.indexOf(column)\n    if (columnIndex < 0) {\n      return\n    }\n    const next = normalizePickerViewValue(\n      this.#columns.map(item => item.selectedIndex),\n      this.#columns.map(item => item.itemCount),\n    )\n    next[columnIndex] = event.detail.value\n    const immediate = readBooleanAttribute(this, 'immediate-change')\n    if ((immediate && event.detail.phase === 'changing') || (!immediate && event.detail.phase === 'end')) {\n      this.#emitChange(next)\n    }\n  }\n\n  #handleColumnReady = (event: Event) => {\n    event.stopPropagation()\n    this.#syncColumns()\n  }\n\n  #emitChange(value: number[]) {\n    if (value.length === this.#lastEmittedValue.length && value.every((item, index) => item === this.#lastEmittedValue[index])) {\n      return\n    }\n    this.#lastEmittedValue = [...value]\n    dispatchMiniProgramEvent(this, 'change', { value })\n  }\n\n  #handlePickStart = (event: Event) => {\n    event.stopPropagation()\n    dispatchMiniProgramEvent(this, 'pickstart', {})\n  }\n\n  #handlePickEnd = (event: Event) => {\n    event.stopPropagation()\n    dispatchMiniProgramEvent(this, 'pickend', {})\n  }\n}\n\nexport { WeappPickerViewColumn }\nexport * from './helpers'\n"],"mappings":"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"}

package/dist/runtime/nativeComponents/pickerView/style.mjs

@@ -0,0 +1,58 @@
+//#region src/runtime/nativeComponents/pickerView/style.ts
+const PICKER_VIEW_SHADOW_STYLE = `
+  :host { position: relative; min-width: 0; }
+  .viewport { position: relative; display: flex; width: 100%; height: 100%; overflow: hidden; }
+  slot { display: flex; width: 100%; height: 100%; }
+  ::slotted(weapp-picker-view-column) { min-width: 0; flex: 1; }
+  .mask,
+  .indicator { position: absolute; right: 0; left: 0; pointer-events: none; }
+  .mask--top {
+    top: 0;
+    bottom: 50%;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.35));
+  }
+  .mask--bottom {
+    top: 50%;
+    bottom: 0;
+    background: linear-gradient(to top, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.35));
+  }
+  .indicator {
+    top: 50%;
+    box-sizing: border-box;
+    height: var(--weapp-picker-view-item-height, 34px);
+    border-top: 1px solid #e5e5e5;
+    border-bottom: 1px solid #e5e5e5;
+    transform: translateY(-50%);
+  }
+`;
+const PICKER_VIEW_COLUMN_SHADOW_STYLE = `
+  :host { min-width: 0; overflow: hidden; }
+  .scroller {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: none;
+    scroll-snap-type: y mandatory;
+    touch-action: pan-y;
+  }
+  .scroller::-webkit-scrollbar { display: none; }
+  .spacer { width: 1px; height: calc((100% - var(--weapp-picker-view-item-height, 34px)) / 2); }
+  slot { display: block; }
+  ::slotted(*) {
+    box-sizing: border-box;
+    height: var(--weapp-picker-view-item-height, 34px);
+    overflow: hidden;
+    line-height: var(--weapp-picker-view-item-height, 34px);
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    scroll-snap-align: center;
+  }
+`;
+
+//#endregion
+export { PICKER_VIEW_COLUMN_SHADOW_STYLE, PICKER_VIEW_SHADOW_STYLE };
+//# sourceMappingURL=style.mjs.map

package/dist/runtime/nativeComponents/pickerView/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../../src/runtime/nativeComponents/pickerView/style.ts"],"sourcesContent":["export const PICKER_VIEW_SHADOW_STYLE = `\n  :host { position: relative; min-width: 0; }\n  .viewport { position: relative; display: flex; width: 100%; height: 100%; overflow: hidden; }\n  slot { display: flex; width: 100%; height: 100%; }\n  ::slotted(weapp-picker-view-column) { min-width: 0; flex: 1; }\n  .mask,\n  .indicator { position: absolute; right: 0; left: 0; pointer-events: none; }\n  .mask--top {\n    top: 0;\n    bottom: 50%;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.35));\n  }\n  .mask--bottom {\n    top: 50%;\n    bottom: 0;\n    background: linear-gradient(to top, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.35));\n  }\n  .indicator {\n    top: 50%;\n    box-sizing: border-box;\n    height: var(--weapp-picker-view-item-height, 34px);\n    border-top: 1px solid #e5e5e5;\n    border-bottom: 1px solid #e5e5e5;\n    transform: translateY(-50%);\n  }\n`\n\nexport const PICKER_VIEW_COLUMN_SHADOW_STYLE = `\n  :host { min-width: 0; overflow: hidden; }\n  .scroller {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow-x: hidden;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    scrollbar-width: none;\n    scroll-snap-type: y mandatory;\n    touch-action: pan-y;\n  }\n  .scroller::-webkit-scrollbar { display: none; }\n  .spacer { width: 1px; height: calc((100% - var(--weapp-picker-view-item-height, 34px)) / 2); }\n  slot { display: block; }\n  ::slotted(*) {\n    box-sizing: border-box;\n    height: var(--weapp-picker-view-item-height, 34px);\n    overflow: hidden;\n    line-height: var(--weapp-picker-view-item-height, 34px);\n    text-align: center;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    scroll-snap-align: center;\n  }\n`\n"],"mappings":";AAAA,MAAa,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BxC,MAAa,kCAAkC"}

package/dist/runtime/nativeComponents/primitives.mjs

@@ -0,0 +1,16 @@
+import { resolveContainingShadowRoot } from "./helpers.mjs";
+import { ensureNativeComponentStyle } from "./style.mjs";
+
+//#region src/runtime/nativeComponents/primitives.ts
+const BaseElement = globalThis.HTMLElement ?? class {};
+var StyledNativeElement = class extends BaseElement {
+	connectedCallback() {
+		ensureNativeComponentStyle(resolveContainingShadowRoot(this));
+	}
+};
+var WeappView = class extends StyledNativeElement {};
+var WeappText = class extends StyledNativeElement {};
+
+//#endregion
+export { WeappText, WeappView };
+//# sourceMappingURL=primitives.mjs.map

package/dist/runtime/nativeComponents/primitives.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.mjs","names":[],"sources":["../../../src/runtime/nativeComponents/primitives.ts"],"sourcesContent":["import { resolveContainingShadowRoot } from './helpers'\nimport { ensureNativeComponentStyle } from './style'\n\nconst BaseElement = (globalThis.HTMLElement ?? class {}) as typeof HTMLElement\n\nclass StyledNativeElement extends BaseElement {\n  connectedCallback() {\n    ensureNativeComponentStyle(resolveContainingShadowRoot(this))\n  }\n}\n\nexport class WeappView extends StyledNativeElement {}\nexport class WeappText extends StyledNativeElement {}\n"],"mappings":";;;;AAGA,MAAM,cAAe,WAAW,eAAe,MAAM,CAAC;AAEtD,IAAM,sBAAN,cAAkC,YAAY;CAC5C,oBAAoB;EAClB,2BAA2B,4BAA4B,IAAI,CAAC;CAC9D;AACF;AAEA,IAAa,YAAb,cAA+B,oBAAoB,CAAC;AACpD,IAAa,YAAb,cAA+B,oBAAoB,CAAC"}

package/dist/runtime/nativeComponents/progress/helpers.mjs

@@ -0,0 +1,29 @@
+//#region src/runtime/nativeComponents/progress/helpers.ts
+function finiteNumber(value, fallback) {
+	const numeric = Number(value);
+	return Number.isFinite(numeric) ? numeric : fallback;
+}
+function nonNegativeNumber(value, fallback) {
+	return Math.max(0, finiteNumber(value, fallback));
+}
+function resolveProgressConfig(input = {}) {
+	const activeMode = input.activeMode === "forwards" ? "forwards" : "backwards";
+	return {
+		percent: Math.min(100, Math.max(0, finiteNumber(input.percent, 0))),
+		strokeWidth: nonNegativeNumber(input.strokeWidth, 6),
+		duration: nonNegativeNumber(input.duration, 30),
+		borderRadius: nonNegativeNumber(input.borderRadius, 0),
+		fontSize: nonNegativeNumber(input.fontSize, 16),
+		activeMode
+	};
+}
+function resolveProgressAnimationDuration(start, end, durationPerPercent) {
+	return Math.abs(end - start) * durationPerPercent;
+}
+function createProgressActiveEndDetail() {
+	return {};
+}
+
+//#endregion
+export { createProgressActiveEndDetail, resolveProgressAnimationDuration, resolveProgressConfig };
+//# sourceMappingURL=helpers.mjs.map

package/dist/runtime/nativeComponents/progress/helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.mjs","names":[],"sources":["../../../../src/runtime/nativeComponents/progress/helpers.ts"],"sourcesContent":["export type ProgressActiveMode = 'backwards' | 'forwards'\n\nexport interface ProgressConfigInput {\n  percent?: unknown\n  strokeWidth?: unknown\n  duration?: unknown\n  borderRadius?: unknown\n  fontSize?: unknown\n  activeMode?: unknown\n}\n\nexport interface ProgressConfig {\n  percent: number\n  strokeWidth: number\n  duration: number\n  borderRadius: number\n  fontSize: number\n  activeMode: ProgressActiveMode\n}\n\nfunction finiteNumber(value: unknown, fallback: number) {\n  const numeric = Number(value)\n  return Number.isFinite(numeric) ? numeric : fallback\n}\n\nfunction nonNegativeNumber(value: unknown, fallback: number) {\n  return Math.max(0, finiteNumber(value, fallback))\n}\n\nexport function resolveProgressConfig(input: ProgressConfigInput = {}): ProgressConfig {\n  const activeMode = input.activeMode === 'forwards' ? 'forwards' : 'backwards'\n  return {\n    percent: Math.min(100, Math.max(0, finiteNumber(input.percent, 0))),\n    strokeWidth: nonNegativeNumber(input.strokeWidth, 6),\n    duration: nonNegativeNumber(input.duration, 30),\n    borderRadius: nonNegativeNumber(input.borderRadius, 0),\n    fontSize: nonNegativeNumber(input.fontSize, 16),\n    activeMode,\n  }\n}\n\nexport function resolveProgressAnimationDuration(start: number, end: number, durationPerPercent: number) {\n  return Math.abs(end - start) * durationPerPercent\n}\n\nexport function createProgressActiveEndDetail() {\n  return {}\n}\n"],"mappings":";AAoBA,SAAS,aAAa,OAAgB,UAAkB;CACtD,MAAM,UAAU,OAAO,KAAK;CAC5B,OAAO,OAAO,SAAS,OAAO,IAAI,UAAU;AAC9C;AAEA,SAAS,kBAAkB,OAAgB,UAAkB;CAC3D,OAAO,KAAK,IAAI,GAAG,aAAa,OAAO,QAAQ,CAAC;AAClD;AAEA,SAAgB,sBAAsB,QAA6B,CAAC,GAAmB;CACrF,MAAM,aAAa,MAAM,eAAe,aAAa,aAAa;CAClE,OAAO;EACL,SAAS,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,aAAa,MAAM,SAAS,CAAC,CAAC,CAAC;EAClE,aAAa,kBAAkB,MAAM,aAAa,CAAC;EACnD,UAAU,kBAAkB,MAAM,UAAU,EAAE;EAC9C,cAAc,kBAAkB,MAAM,cAAc,CAAC;EACrD,UAAU,kBAAkB,MAAM,UAAU,EAAE;EAC9C;CACF;AACF;AAEA,SAAgB,iCAAiC,OAAe,KAAa,oBAA4B;CACvG,OAAO,KAAK,IAAI,MAAM,KAAK,IAAI;AACjC;AAEA,SAAgB,gCAAgC;CAC9C,OAAO,CAAC;AACV"}