@lingxia/page-runtime 0.5.0 → 0.6.0

package/dist/vue/text_component_shared.js

@@ -1,26 +0,0 @@
-export function getCustomEventDetail(event) {
-    var _a;
-    return ((_a = event.detail) !== null && _a !== void 0 ? _a : {});
-}
-export function bindElementEvents(currentBoundElement, nextElement, listeners) {
-    if (currentBoundElement && currentBoundElement !== nextElement) {
-        for (const [event, listener] of Object.entries(listeners)) {
-            currentBoundElement.removeEventListener(event, listener);
-        }
-        currentBoundElement = null;
-    }
-    if (nextElement && currentBoundElement !== nextElement) {
-        for (const [event, listener] of Object.entries(listeners)) {
-            nextElement.addEventListener(event, listener);
-        }
-        currentBoundElement = nextElement;
-    }
-    return currentBoundElement;
-}
-export function unbindElementEvents(boundElement, listeners) {
-    if (!boundElement)
-        return;
-    for (const [event, listener] of Object.entries(listeners)) {
-        boundElement.removeEventListener(event, listener);
-    }
-}

package/dist/vue/types.d.ts

@@ -1,101 +0,0 @@
-import type { CSSProperties } from 'vue';
-import type { LxVideoAttributes } from '@lingxia/elements';
-import type { LxNavigatorEvent, NavigatorOpenType, NavigatorTarget } from '@lingxia/elements';
-export interface LxVideoProps extends Omit<LxVideoAttributes, 'ref' | 'className' | 'style'> {
-    class?: string;
-    style?: CSSProperties;
-}
-export interface LxPickerProps {
-    columns?: string[][] | [string[], Record<string, string[]>];
-    mode?: 'date' | 'time';
-    start?: string;
-    end?: string;
-    fields?: 'year' | 'month' | 'day' | 'range';
-    modelValue?: string | string[];
-    placeholder?: string;
-    class?: string;
-    style?: CSSProperties;
-    disabled?: boolean;
-    cancelText?: string;
-    cancelTextColor?: string;
-    cancelButtonColor?: string;
-    confirmText?: string;
-    confirmTextColor?: string;
-    confirmButtonColor?: string;
-    onChange?: (event: Event) => void;
-    onNativeScroll?: (event: Event) => void;
-    pageBindings?: Record<string, string>;
-}
-export interface LxNavigatorProps {
-    url?: string;
-    openType?: NavigatorOpenType;
-    target?: NavigatorTarget;
-    delta?: number;
-    appId?: string;
-    path?: string;
-    phoneNumber?: string;
-    hoverClass?: string;
-    hoverStopPropagation?: boolean;
-    hoverStartTime?: number;
-    hoverStayTime?: number;
-    class?: string;
-    style?: CSSProperties;
-}
-export interface LxInputProps {
-    id?: string;
-    modelValue?: string;
-    value?: string;
-    defaultValue?: string;
-    type?: 'text' | 'number' | 'password' | 'digit';
-    password?: boolean;
-    placeholder?: string;
-    placeholderStyle?: string;
-    placeholderClass?: string;
-    maxlength?: number;
-    cursorSpacing?: number;
-    autoFocus?: boolean;
-    disabled?: boolean;
-    focus?: boolean;
-    confirmType?: 'send' | 'search' | 'next' | 'go' | 'done';
-    alwaysEmbed?: boolean;
-    confirmHold?: boolean;
-    cursor?: number;
-    cursorColor?: string;
-    selectionStart?: number;
-    selectionEnd?: number;
-    adjustPosition?: boolean;
-    holdKeyboard?: boolean;
-    class?: string;
-    style?: CSSProperties;
-    pageBindings?: Record<string, string>;
-}
-export interface LxTextareaProps {
-    id?: string;
-    modelValue?: string;
-    value?: string;
-    defaultValue?: string;
-    placeholder?: string;
-    placeholderStyle?: string;
-    placeholderClass?: string;
-    maxlength?: number;
-    disabled?: boolean;
-    autoFocus?: boolean;
-    focus?: boolean;
-    autoHeight?: boolean;
-    cursorSpacing?: number;
-    showConfirmBar?: boolean;
-    adjustPosition?: boolean;
-    holdKeyboard?: boolean;
-    disableDefaultPadding?: boolean;
-    confirmType?: 'send' | 'search' | 'next' | 'go' | 'done' | 'return';
-    confirmHold?: boolean;
-    fixed?: boolean;
-    adjustKeyboardTo?: 'cursor' | 'bottom';
-    cursor?: number;
-    selectionStart?: number;
-    selectionEnd?: number;
-    class?: string;
-    style?: CSSProperties;
-    pageBindings?: Record<string, string>;
-}
-export type { LxNavigatorEvent };

package/dist/vue/types.js

@@ -1 +0,0 @@
-export {};

package/src/index.ts

@@ -1,21 +0,0 @@
-export {
-  ensurePageBridgeSubscription,
-  getPageActions,
-  getPageSnapshot,
-  getPageStateInfo,
-  subscribePageData,
-  subscribePageSnapshot,
-  toBridgeError,
-  resolveParams,
-  stableParamKey,
-  invokeMethod,
-  getMethodKey,
-  type ActionMap,
-  type Snapshot,
-  type ParamsSource,
-  type MethodParams,
-  type StreamData,
-  type StreamResult,
-  type ChannelIn,
-  type ChannelOut,
-} from "./shared/runtime.js";

package/src/react/LxInput.tsx

@@ -1,224 +0,0 @@
-import React, { forwardRef, useCallback, useEffect, useRef } from "react";
-import { registerInputComponent } from "@lingxia/elements";
-import { buildInputNativeAttrs } from "@lingxia/elements";
-import {
-  assignForwardedRef,
-  bindElementEvents,
-  getCustomEventDetail,
-  unbindElementEvents,
-} from "./text_component_shared.js";
-
-export interface LxInputEventDetail {
-  value?: string;
-  cursor?: number;
-  keyCode?: number;
-  height?: number;
-  duration?: number;
-  encryptedValue?: string;
-  encryptError?: string;
-  pass?: boolean;
-  timeout?: boolean;
-}
-
-export interface LxInputProps {
-  id?: string;
-  value?: string;
-  defaultValue?: string;
-  type?: "text" | "number" | "password" | "digit";
-  password?: boolean;
-  placeholder?: string;
-  placeholderStyle?: string;
-  placeholderClass?: string;
-  maxlength?: number;
-  cursorSpacing?: number;
-  autoFocus?: boolean;
-  disabled?: boolean;
-  focus?: boolean;
-  confirmType?: "send" | "search" | "next" | "go" | "done";
-  alwaysEmbed?: boolean;
-  confirmHold?: boolean;
-  cursor?: number;
-  cursorColor?: string;
-  selectionStart?: number;
-  selectionEnd?: number;
-  adjustPosition?: boolean;
-  holdKeyboard?: boolean;
-
-  onInput?: (detail: LxInputEventDetail) => void;
-  onChange?: (detail: LxInputEventDetail) => void;
-  onFocus?: (detail: LxInputEventDetail) => void;
-  onBlur?: (detail: LxInputEventDetail) => void;
-  onConfirm?: (detail: LxInputEventDetail) => void;
-  onKeyboardHeightChange?: (detail: LxInputEventDetail) => void;
-  onNicknameReview?: (detail: LxInputEventDetail) => void;
-
-  // Logic bindings (CLI-generated)
-  pageBindings?: Record<string, string>;
-
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-if (typeof window !== "undefined") {
-  registerInputComponent();
-}
-
-export const LxInput = forwardRef<HTMLElement, LxInputProps>(({
-  value,
-  defaultValue,
-  type,
-  password,
-  placeholder,
-  placeholderStyle,
-  placeholderClass,
-  maxlength,
-  cursorSpacing,
-  autoFocus,
-  disabled,
-  focus,
-  confirmType,
-  alwaysEmbed,
-  confirmHold,
-  cursor,
-  cursorColor,
-  selectionStart,
-  selectionEnd,
-  adjustPosition,
-  holdKeyboard,
-  onInput,
-  onChange,
-  onFocus,
-  onBlur,
-  onConfirm,
-  onKeyboardHeightChange,
-  onNicknameReview,
-  pageBindings,
-  className,
-  style,
-  id,
-  ...rest
-}, ref) => {
-  const elementRef = useRef<HTMLElement | null>(null);
-  const boundElementRef = useRef<HTMLElement | null>(null);
-  const handlerRef = useRef({
-    onInput,
-    onChange,
-    onFocus,
-    onBlur,
-    onConfirm,
-    onKeyboardHeightChange,
-    onNicknameReview,
-  });
-  handlerRef.current = {
-    onInput,
-    onChange,
-    onFocus,
-    onBlur,
-    onConfirm,
-    onKeyboardHeightChange,
-    onNicknameReview,
-  };
-  const listenerMapRef = useRef<Record<string, EventListenerObject>>({
-    input: {
-      handleEvent: (event: Event) => handlerRef.current.onInput?.(getCustomEventDetail<LxInputEventDetail>(event)),
-    },
-    change: {
-      handleEvent: (event: Event) => handlerRef.current.onChange?.(getCustomEventDetail<LxInputEventDetail>(event)),
-    },
-    focus: {
-      handleEvent: (event: Event) => handlerRef.current.onFocus?.(getCustomEventDetail<LxInputEventDetail>(event)),
-    },
-    blur: {
-      handleEvent: (event: Event) => handlerRef.current.onBlur?.(getCustomEventDetail<LxInputEventDetail>(event)),
-    },
-    confirm: {
-      handleEvent: (event: Event) => handlerRef.current.onConfirm?.(getCustomEventDetail<LxInputEventDetail>(event)),
-    },
-    keyboardheightchange: {
-      handleEvent: (event: Event) => handlerRef.current.onKeyboardHeightChange?.(getCustomEventDetail<LxInputEventDetail>(event)),
-    },
-    nicknamereview: {
-      handleEvent: (event: Event) => handlerRef.current.onNicknameReview?.(getCustomEventDetail<LxInputEventDetail>(event)),
-    },
-  });
-  const elementRefCallback = useCallback((element: HTMLElement | null) => {
-    boundElementRef.current = bindElementEvents(boundElementRef.current, element, listenerMapRef.current);
-    elementRef.current = element;
-    assignForwardedRef(ref, element);
-  }, [ref]);
-
-  useEffect(() => () => {
-    unbindElementEvents(boundElementRef.current, listenerMapRef.current);
-    boundElementRef.current = null;
-    elementRef.current = null;
-  }, []);
-
-  useEffect(() => {
-    const el = elementRef.current;
-    if (!el) return;
-    const setAttr = (name: string, next: string | null) => {
-      if (next === null) {
-        el.removeAttribute(name);
-        return;
-      }
-      el.setAttribute(name, next);
-    };
-
-    if (type && String(type).trim().length > 0) {
-      el.setAttribute("type", String(type).trim().toLowerCase());
-    } else {
-      el.removeAttribute("type");
-    }
-    if (password) {
-      el.setAttribute("password", "true");
-    } else {
-      el.removeAttribute("password");
-    }
-    setAttr("value", value !== undefined ? String(value) : null);
-    setAttr("focus", focus !== undefined ? (focus ? "true" : "false") : null);
-    setAttr("maxlength", maxlength !== undefined ? String(maxlength) : null);
-    setAttr("placeholder-style", placeholderStyle ? String(placeholderStyle) : null);
-  }, [type, password, value, focus, maxlength, placeholderStyle]);
-
-  // Set pageBindings property on custom element
-  useEffect(() => {
-    const el = elementRef.current as any;
-    if (el && pageBindings) {
-      el.pageBindings = pageBindings;
-    }
-  }, [pageBindings]);
-
-  const inputProps = buildInputNativeAttrs({
-    id,
-    value,
-    defaultValue,
-    type,
-    password,
-    placeholder,
-    placeholderStyle,
-    placeholderClass,
-    maxlength,
-    cursorSpacing,
-    autoFocus,
-    disabled,
-    focus,
-    confirmType,
-    alwaysEmbed,
-    confirmHold,
-    cursor,
-    cursorColor,
-    selectionStart,
-    selectionEnd,
-    adjustPosition,
-    holdKeyboard,
-  }, rest as Record<string, unknown>, boundElementRef.current !== null);
-
-  return React.createElement("lx-input", {
-    ref: elementRefCallback,
-    className,
-    style,
-    ...inputProps,
-  });
-});
-
-LxInput.displayName = "LxInput";

package/src/react/LxNavigator.tsx

@@ -1,132 +0,0 @@
-import React from 'react';
-import type {
-  LxNavigatorAttributes,
-  LxNavigatorEvent,
-  NavigatorOpenType,
-  NavigatorTarget
-} from '@lingxia/elements';
-import { buildNavigatorNativeAttrs } from '@lingxia/elements';
-
-// Import to ensure custom element is registered
-import '@lingxia/elements';
-
-export interface LxNavigatorProps extends Omit<LxNavigatorAttributes, 'onSuccess' | 'onFail' | 'onComplete'> {
-  // Navigation
-  url?: string;
-  openType?: NavigatorOpenType;
-  target?: NavigatorTarget; // Auto-inferred if not specified
-  delta?: number;
-
-  // Open external lxapp
-  appId?: string;
-  path?: string; // Supports query string
-
-  // Phone call
-  phoneNumber?: string;
-
-  // Hover effect
-  hoverClass?: string;
-  hoverStopPropagation?: boolean;
-  hoverStartTime?: number;
-  hoverStayTime?: number;
-
-  // Styling
-  className?: string;
-  style?: React.CSSProperties;
-
-  // Events
-  onSuccess?: (e: LxNavigatorEvent) => void;
-  onFail?: (e: LxNavigatorEvent) => void;
-  onComplete?: (e: LxNavigatorEvent) => void;
-
-  // Children
-  children?: React.ReactNode;
-}
-
-export const LxNavigator = React.forwardRef<HTMLElement, LxNavigatorProps>(
-  (props, ref) => {
-    const {
-      url,
-      openType = 'navigate',
-      target, // Auto-inferred, no default
-      delta = 1,
-      appId,
-      path,
-      phoneNumber,
-      hoverClass = 'navigator-hover',
-      hoverStopPropagation = false,
-      hoverStartTime = 20,
-      hoverStayTime = 70,
-      className,
-      style,
-      onSuccess,
-      onFail,
-      onComplete,
-      children,
-      ...rest
-    } = props;
-
-    const elementRef = React.useRef<HTMLElement>(null);
-
-    React.useImperativeHandle(ref, () => elementRef.current!);
-
-    React.useEffect(() => {
-      const element = elementRef.current;
-      if (!element) return;
-
-      const handleSuccess = (e: Event) => {
-        if (onSuccess) {
-          onSuccess(e as LxNavigatorEvent);
-        }
-      };
-
-      const handleFail = (e: Event) => {
-        if (onFail) {
-          onFail(e as LxNavigatorEvent);
-        }
-      };
-
-      const handleComplete = (e: Event) => {
-        if (onComplete) {
-          onComplete(e as LxNavigatorEvent);
-        }
-      };
-      const successListener: EventListenerObject = { handleEvent: handleSuccess };
-      const failListener: EventListenerObject = { handleEvent: handleFail };
-      const completeListener: EventListenerObject = { handleEvent: handleComplete };
-
-      element.addEventListener('success', successListener);
-      element.addEventListener('fail', failListener);
-      element.addEventListener('complete', completeListener);
-
-      return () => {
-        element.removeEventListener('success', successListener);
-        element.removeEventListener('fail', failListener);
-        element.removeEventListener('complete', completeListener);
-      };
-    }, [onSuccess, onFail, onComplete]);
-
-    const navigatorProps = buildNavigatorNativeAttrs({
-      url,
-      openType,
-      target,
-      delta,
-      appId,
-      path,
-      phoneNumber,
-      hoverClass,
-      hoverStopPropagation,
-      hoverStartTime,
-      hoverStayTime,
-    }, rest as Record<string, unknown>);
-
-    return React.createElement('lx-navigator', {
-      ref: elementRef,
-      className,
-      style,
-      ...navigatorProps
-    }, children);
-  }
-);
-
-LxNavigator.displayName = 'LxNavigator';

package/src/react/LxPicker.tsx

@@ -1,205 +0,0 @@
-import React, { forwardRef, useCallback, useId, useRef, useState } from 'react';
-import { registerPickerComponent } from '@lingxia/elements';
-import {
-  buildPickerNativeAttrs,
-  getPickerDisplayText,
-  getPickerValueFromIndex,
-} from '@lingxia/elements';
-import {
-  assignForwardedRef,
-  bindElementEvents,
-  getCustomEventDetail,
-  unbindElementEvents,
-} from './text_component_shared.js';
-
-export interface LxPickerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onScroll'> {
-  // For selector/multiSelector/cascading mode
-  columns?: string[][] | [string[], Record<string, string[]>];
-
-  // For date/time mode
-  mode?: 'date' | 'time';
-  start?: string;   // Valid date range start: 'YYYY-MM-DD'
-  end?: string;     // Valid date range end: 'YYYY-MM-DD'
-  fields?: 'year' | 'month' | 'day' | 'range';
-
-  // Value (type depends on mode)
-  value?: string | string[];
-
-  // Callbacks
-  onConfirm?: (value: string | string[]) => void;
-  onCancel?: () => void;
-  onScroll?: (value: string | string[]) => void;
-  onChange?: (event: CustomEvent) => void;
-  onNativeScroll?: (event: CustomEvent) => void;
-
-  // Logic bindings (CLI-generated)
-  pageBindings?: Record<string, string>;
-
-  // UI
-  placeholder?: string;
-  className?: string;
-  style?: React.CSSProperties;
-  disabled?: boolean;
-
-  // Button customization
-  cancelText?: string;
-  cancelTextColor?: string;
-  cancelButtonColor?: string;
-  confirmText?: string;
-  confirmTextColor?: string;
-  confirmButtonColor?: string;
-
-  children?: React.ReactNode;
-}
-
-if (typeof window !== "undefined") {
-  registerPickerComponent();
-}
-
-export const LxPicker = forwardRef<HTMLElement, LxPickerProps>(({
-  id,
-  columns, mode, start, end, fields, value, onConfirm, onCancel, onScroll, placeholder = 'Please select',
-  onChange, onNativeScroll, pageBindings,
-  className, style, disabled, cancelText, cancelTextColor, cancelButtonColor,
-  confirmText, confirmTextColor, confirmButtonColor, children,
-  ...rest
-}, ref) => {
-  const [visible, setVisible] = useState(false);
-  const reactId = useId();
-  const pickerId = id ?? `lx-picker-${reactId.replace(/[:]/g, "")}`;
-  const elementRef = useRef<HTMLElement | null>(null);
-  const boundElementRef = useRef<HTMLElement | null>(null);
-  const handlerRef = useRef({
-    columns,
-    mode,
-    onConfirm,
-    onCancel,
-    onScroll,
-    onChange,
-    onNativeScroll,
-  });
-  handlerRef.current = {
-    columns,
-    mode,
-    onConfirm,
-    onCancel,
-    onScroll,
-    onChange,
-    onNativeScroll,
-  };
-  const listenerMapRef = useRef<Record<string, EventListenerObject>>({
-    change: {
-      handleEvent: (event: Event) => {
-        const detail = getCustomEventDetail<{
-          confirmed?: boolean;
-          cancelled?: boolean;
-          value?: string | string[];
-          index?: number | number[];
-        }>(event);
-        handlerRef.current.onChange?.(event as CustomEvent);
-        if (detail.confirmed) {
-          const nextValue =
-            handlerRef.current.mode === 'date' || handlerRef.current.mode === 'time'
-              ? (detail.value ?? '')
-              : detail.index !== undefined
-                ? getPickerValueFromIndex(handlerRef.current.columns, detail.index)
-                : '';
-          handlerRef.current.onConfirm?.(nextValue);
-          setVisible(false);
-          return;
-        }
-        if (detail.cancelled) {
-          handlerRef.current.onCancel?.();
-          setVisible(false);
-        }
-      },
-    },
-    scroll: {
-      handleEvent: (event: Event) => {
-        const detail = getCustomEventDetail<{
-          value?: string | string[];
-          index?: number | number[];
-        }>(event);
-        handlerRef.current.onNativeScroll?.(event as CustomEvent);
-        if (detail.value !== undefined) {
-          handlerRef.current.onScroll?.(detail.value);
-          return;
-        }
-        if (detail.index !== undefined) {
-          handlerRef.current.onScroll?.(getPickerValueFromIndex(handlerRef.current.columns, detail.index));
-        }
-      },
-    },
-  });
-  const elementRefCallback = useCallback((element: HTMLElement | null) => {
-    boundElementRef.current = bindElementEvents(boundElementRef.current, element, listenerMapRef.current);
-    elementRef.current = element;
-    assignForwardedRef(ref, element);
-
-    // Set pageBindings on custom element
-    if (element && pageBindings) {
-      (element as any).pageBindings = pageBindings;
-    }
-  }, [ref, pageBindings]);
-  React.useEffect(() => () => {
-    unbindElementEvents(boundElementRef.current, listenerMapRef.current);
-    boundElementRef.current = null;
-    elementRef.current = null;
-  }, []);
-
-  const handleClick = () => !disabled && setVisible(true);
-  const pickerProps = buildPickerNativeAttrs({
-    id: pickerId,
-    columns,
-    mode,
-    start,
-    end,
-    fields,
-    value,
-    cancelText,
-    cancelTextColor,
-    cancelButtonColor,
-    confirmText,
-    confirmTextColor,
-    confirmButtonColor,
-  }, rest as Record<string, unknown>);
-  const displayText = getPickerDisplayText(value, fields);
-
-  return (
-    <>
-      {children ? (
-        <div
-          onClick={handleClick}
-          className={className}
-          style={{
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            opacity: disabled ? 0.5 : 1,
-            ...style,
-          }}
-        >
-          {children}
-        </div>
-      ) : (
-        <div
-          onClick={handleClick}
-          className={className}
-          style={{
-            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-            padding: '12px 14px', backgroundColor: '#fff', border: '1px solid #e5e7eb',
-            borderRadius: '8px', cursor: disabled ? 'not-allowed' : 'pointer',
-            opacity: disabled ? 0.5 : 1, width: '100%', boxSizing: 'border-box',
-            ...style,
-          }}
-        >
-          <span style={{ color: value ? '#111' : '#9ca3af' }}>{displayText || placeholder}</span>
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2">
-            <path d="M6 9l6 6 6-6" />
-          </svg>
-        </div>
-      )}
-      {visible && React.createElement('lx-picker', { ref: elementRefCallback, ...pickerProps })}
-    </>
-  );
-});
-
-LxPicker.displayName = 'LxPicker';