@quicktvui/web-renderer 1.0.0

package/src/components/TabsView.js

@@ -0,0 +1,420 @@
+// TabsView component - Native tabs container for qt-tabs
+import { QtBaseComponent } from './QtBaseComponent'
+import { registerComponent } from '../core/componentRegistry'
+
+export class TabsView extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'TabsView'
+    this.dom = document.createElement('div')
+    this.dom.setAttribute('data-component-name', 'TabsView')
+    registerComponent(id, this)
+
+    // Tabs state
+    this._tabData = null
+    this._currentPageIndex = 0
+    this._pages = new Map()
+    this._tabItems = []
+
+    // 子组件引用，通过 name 属性存储
+    // 'tabList' -> qt-nav-bar
+    // 'content' -> recycler-view-pager
+    this._childrenByName = new Map()
+
+    // Container for children (nav-bar and view-pager)
+    this._childrenContainer = this.dom
+  }
+
+  defaultStyle() {
+    return {
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+    }
+  }
+
+  // Handle child components - 通过 name 属性存储引用
+  insertChild(view, index) {
+    if (view && view.dom) {
+      // 获取子组件的 name 属性
+      const childName = view.props?.name || view.dom.getAttribute('name')
+
+      if (childName) {
+        console.log('[TabsView] insertChild with name:', childName, view.tagName)
+        this._childrenByName.set(childName, view)
+
+        // 监听 tabList (qt-nav-bar) 的事件
+        if (childName === 'tabList') {
+          this._setupTabListListeners(view)
+        }
+      }
+
+      this._childrenContainer.appendChild(view.dom)
+    }
+  }
+
+  // 设置 tabList 事件监听
+  _setupTabListListeners(tabList) {
+    if (!tabList) return
+
+    // 保存原生 dispatchEvent，注入事件转发
+    const originalDispatchEvent = tabList.dispatchEvent.bind(tabList)
+    tabList.dispatchEvent = (eventName, params) => {
+      // 调用原始 dispatchEvent
+      originalDispatchEvent(eventName, params)
+
+      // 转发事件到 TabsView 处理
+      console.log('[TabsView] intercepted event from tabList:', eventName, params)
+
+      // 处理 onItemFocused 事件 (hasFocus === true 时切换页面)
+      if (eventName === 'onItemFocused' && params && params.hasFocus === true) {
+        const pageIndex = params.position
+        if (pageIndex !== undefined && pageIndex !== this._currentPageIndex) {
+          console.log('[TabsView] tab focus changed to:', pageIndex)
+          this._currentPageIndex = pageIndex
+          this._dispatchPageChanged(pageIndex)
+          this._dispatchLoadPageData(pageIndex, false)
+        }
+      }
+
+      // 处理 onItemClick 事件
+      if (eventName === 'onItemClick') {
+        const pageIndex = params?.position
+        if (pageIndex !== undefined && pageIndex !== this._currentPageIndex) {
+          console.log('[TabsView] tab clicked, switching to:', pageIndex)
+          this._currentPageIndex = pageIndex
+          this._dispatchPageChanged(pageIndex)
+          this._dispatchLoadPageData(pageIndex, false)
+        }
+      }
+    }
+
+    console.log('[TabsView] tabList listeners setup complete')
+  }
+
+  // Remove child
+  removeChild(view) {
+    if (view && view.dom) {
+      const childName = view.props?.name || view.dom.getAttribute('name')
+      if (childName) {
+        this._childrenByName.delete(childName)
+      }
+      if (view.dom.parentNode === this._childrenContainer) {
+        this._childrenContainer.removeChild(view.dom)
+      }
+    }
+  }
+
+  // 通过 name 获取子组件
+  getChildByName(name) {
+    return this._childrenByName.get(name)
+  }
+
+  updateProperty(key, value) {
+    switch (key) {
+      case 'offscreenPageLimit':
+        this._offscreenPageLimit = value
+        break
+      case 'dataStrategy':
+        this._dataStrategy = value
+        break
+      case 'hideOnSingleTab':
+        this._hideOnSingleTab = value
+        this._applyHideOnSingleTab()
+        break
+      case 'pageSwitchDelay':
+        this._pageSwitchDelay = value
+        break
+      case 'suspension':
+        this._suspension = value
+        break
+      case 'useSuspensionBg':
+        this._useSuspensionBg = value
+        break
+      default:
+        super.updateProperty(key, value)
+    }
+  }
+
+  // 应用 hideOnSingleTab 逻辑
+  _applyHideOnSingleTab() {
+    const tabList = this.getChildByName('tabList')
+    if (!tabList || !tabList.dom) return
+
+    const shouldHide = this._hideOnSingleTab === true && this._tabItems.length === 1
+    tabList.dom.style.display = shouldHide ? 'none' : ''
+    console.log('[TabsView] _applyHideOnSingleTab:', shouldHide, 'tabCount:', this._tabItems.length)
+  }
+
+  // Set tabs data - 设置 tab 导航栏数据
+  setTabsData(...args) {
+    args = Array.isArray(args[0]) && args.length === 1 ? args[0] : args
+    const config = args[0] || {}
+    const data = args[1] || []
+    this._tabData = { ...config, data }
+    this._tabItems = Array.isArray(data) ? data : []
+    this._currentPageIndex = config.defaultIndex ?? 0
+    this._focusIndex = config.focusIndex ?? this._currentPageIndex
+
+    console.log(
+      '[TabsView] setTabsData:',
+      config,
+      data,
+      'tabList:',
+      this._childrenByName.get('tabList')
+    )
+
+    // 通过 name 获取 tabList (qt-nav-bar) 并设置数据
+    const tabList = this.getChildByName('tabList')
+    if (tabList && tabList.setListData) {
+      console.log('[TabsView] calling tabList.setListData with:', data)
+      tabList.setListData(data)
+    }
+
+    // 应用 hideOnSingleTab 逻辑
+    this._applyHideOnSingleTab()
+
+    // 延迟分发事件，确保事件监听器已经注册
+    // 使用 requestAnimationFrame 或 setTimeout 来等待事件监听器注册完成
+    requestAnimationFrame(() => {
+      console.log('[TabsView] Dispatching events after setTabsData, events:', this.events)
+      const content = this.getChildByName('content')
+      if (content && typeof content.setCurrentPage === 'function') {
+        content.setCurrentPage(this._currentPageIndex)
+      }
+      // Dispatch page changed event
+      this._dispatchPageChanged(this._currentPageIndex)
+      this._dispatchLoadPageData(this._currentPageIndex, false)
+    })
+  }
+
+  // Set page data - 设置页面内容数据
+  setPageData(...args) {
+    args = Array.isArray(args[0]) && args.length === 1 ? args[0] : args
+    const pageIndex = args[0]
+    const meta = args[1] || {}
+    const data = args[2] || []
+    const pageData = { ...meta, data }
+    this._pages.set(pageIndex, pageData)
+
+    console.log(
+      '[TabsView] setPageData:',
+      pageIndex,
+      meta,
+      data,
+      'content:',
+      this._childrenByName.get('content')
+    )
+
+    // 通过 name 获取 content (recycler-view-pager) 并设置数据
+    const content = this.getChildByName('content')
+    if (content && content.setListData) {
+      console.log('[TabsView] calling content.setListData with:', pageIndex, meta, data)
+      content.setListData(pageIndex, meta, data)
+    }
+  }
+
+  // Add page data
+  addPageData(...args) {
+    args = Array.isArray(args[0]) && args.length === 1 ? args[0] : args
+    const pageIndex = args[0]
+    const meta = args[1] || {}
+    const data = args[2] || []
+    const deleteCount = meta.deleteCount ?? 0
+
+    const existing = this._pages.get(pageIndex) || { data: [] }
+    const existingList = Array.isArray(existing.data) ? existing.data : []
+    if (deleteCount > 0) {
+      existingList.splice(0, deleteCount)
+    }
+    if (Array.isArray(data)) {
+      existing.data = existingList.concat(data)
+    } else {
+      existing.data = existingList
+    }
+    this._pages.set(pageIndex, existing)
+
+    // 通过 name 获取 content 并添加数据
+    const content = this.getChildByName('content')
+    if (content && content.addListData) {
+      content.addListData(pageIndex, meta, data)
+    }
+  }
+
+  // Update page data
+  updatePageData(...args) {
+    args = Array.isArray(args[0]) && args.length === 1 ? args[0] : args
+    const pageIndex = args[0]
+    const data = args[1] || []
+    const meta = args[2] || {}
+    this.setPageData(pageIndex, meta, data)
+  }
+
+  // Update page content (placeholder - actual rendering handled by child components)
+  _updatePageContent(pageIndex, data) {
+    console.log('[TabsView] updatePageContent:', pageIndex, data)
+  }
+
+  // Set current page
+  setCurrentPage(pageIndex) {
+    if (Array.isArray(pageIndex)) {
+      pageIndex = pageIndex[0]
+    }
+    if (pageIndex < 0 || pageIndex >= this._tabItems.length) return
+
+    const previousIndex = this._currentPageIndex
+    this._currentPageIndex = pageIndex
+
+    const content = this.getChildByName('content')
+    if (content && typeof content.setCurrentPage === 'function') {
+      content.setCurrentPage(pageIndex)
+    }
+
+    // Dispatch page changed event
+    this._dispatchPageChanged(pageIndex)
+    this._dispatchLoadPageData(pageIndex, false)
+  }
+
+  // Get current page
+  getCurrentPage() {
+    return Promise.resolve(this._currentPageIndex)
+  }
+
+  // Request tab focus
+  requestTabFocus(tabIndex) {
+    this._focusIndex = tabIndex
+    this.setCurrentPage(tabIndex)
+  }
+
+  // Focus back to top
+  focusBackToTop() {
+    console.log('[TabsView] focusBackToTop')
+  }
+
+  // Request node focus
+  requestNodeFocus(id) {
+    console.log('[TabsView] requestNodeFocus:', id)
+  }
+
+  // Reload all pages
+  reloadAll(updateCurrent = true) {
+    this._dispatchLoadPageData(this._currentPageIndex, false)
+  }
+
+  // Reload specific page
+  reloadPage(pageIndex) {
+    this._dispatchLoadPageData(pageIndex, false)
+  }
+
+  // Invoke content function
+  invokeContentFunction(pageIndex, functionName, params) {
+    console.log('[TabsView] invokeContentFunction:', pageIndex, functionName, params)
+  }
+
+  // Invoke content function direct
+  invokeContentFunctionDirect(functionName, params) {
+    console.log('[TabsView] invokeContentFunctionDirect:', functionName, params)
+  }
+
+  // Content scroll to focus
+  contentScrollToFocus(position) {
+    console.log('[TabsView] contentScrollToFocus:', position)
+  }
+
+  // Update child node
+  updateChildNode(page, position, childIndex, data) {
+    console.log('[TabsView] updateChildNode:', page, position, childIndex)
+  }
+
+  // Update root node
+  updateRootNode(page, position, data) {
+    console.log('[TabsView] updateRootNode:', page, position)
+  }
+
+  // Update item matched
+  updateItemMatched(key, id, newData) {
+    console.log('[TabsView] updateItemMatched:', key, id)
+  }
+
+  // Block root focus
+  blockRootFocus() {
+    console.log('[TabsView] blockRootFocus')
+  }
+
+  // Unblock root focus
+  unBlockRootFocus() {
+    console.log('[TabsView] unBlockRootFocus')
+  }
+
+  // Translation left
+  translationLeft() {
+    if (this._currentPageIndex > 0) {
+      this.setCurrentPage(this._currentPageIndex - 1)
+    }
+  }
+
+  // Translation right
+  translationRight() {
+    if (this._currentPageIndex < this._tabItems.length - 1) {
+      this.setCurrentPage(this._currentPageIndex + 1)
+    }
+  }
+
+  // Destroy
+  destroy() {
+    this._pages.clear()
+    this._tabItems = []
+    this._childrenByName.clear()
+  }
+
+  // Cancel all
+  cancelAll() {
+    // Cancel pending operations
+  }
+
+  // Get root node view state
+  getRootNodeViewState(page, position, callback) {
+    if (callback) {
+      callback({ viewState: {} })
+    }
+  }
+
+  // Get child node view state
+  getChildNodeViewState(page, position, childIndex, name, callback) {
+    if (callback) {
+      callback({ viewState: {} })
+    }
+  }
+
+  // Dispatch UI function on child node
+  dispatchUIFunctionOnChildNode(page, position, childIndex, listViewName, functionParams) {
+    console.log('[TabsView] dispatchUIFunctionOnChildNode')
+  }
+
+  // Dispatch page changed event
+  _dispatchPageChanged(pageIndex) {
+    const params = {
+      pageIndex,
+      data: this._tabItems[pageIndex] || null,
+    }
+    console.log('[TabsView] _dispatchPageChanged, pageIndex:', pageIndex, 'events:', this.events)
+    // es3-vue 将 @page-changed 转换为 pagechanged 存储在 events 中
+    this.dispatchEvent('onPagechanged', params)
+  }
+
+  // Dispatch load page event
+  _dispatchLoadPageData(pageIndex, useDiff) {
+    const params = {
+      pageIndex,
+      itemCount: 0,
+      data: this._tabItems[pageIndex] || null,
+      useDiff: !!useDiff,
+    }
+    console.log('[TabsView] _dispatchLoadPageData, pageIndex:', pageIndex, 'events:', this.events)
+    // es3-vue 将 @load-page 转换为 loadpagedata 存储在 events 中
+    this.dispatchEvent('onLoadpagedata', params)
+  }
+}

package/src/components/ViewPager.js

@@ -0,0 +1,206 @@
+// ViewPager component - Native page container for qt-tabs content
+import { QtBaseComponent } from './QtBaseComponent'
+import { registerComponent } from '../core/componentRegistry'
+
+export class ViewPager extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'RecyclerViewPager'
+    this.dom = document.createElement('div')
+    this.dom.setAttribute('data-component-name', 'RecyclerViewPager')
+    registerComponent(id, this)
+
+    this._pages = new Map()
+    this._currentIndex = 0
+    this._direction = 'horizontal'
+    this._contentView = null
+
+    // Container for children
+    this._childrenContainer = this.dom
+  }
+
+  defaultStyle() {
+    return {
+      boxSizing: 'border-box',
+      display: 'block',
+      width: '100%',
+      flex: '1',
+      overflow: 'hidden',
+      position: 'relative',
+    }
+  }
+
+  // Handle child components - just append them to the container
+  insertChild(view, index) {
+    if (view && view.dom) {
+      if (!this._contentView) {
+        this._contentView = view
+        this._applyCurrentPageData()
+      }
+      this._childrenContainer.appendChild(view.dom)
+    }
+  }
+
+  // Remove child
+  removeChild(view) {
+    if (view && view.dom && view.dom.parentNode === this._childrenContainer) {
+      this._childrenContainer.removeChild(view.dom)
+    }
+  }
+
+  updateProperty(key, value) {
+    switch (key) {
+      case 'direction':
+        this._direction = value || 'horizontal'
+        break
+      case 'loadingItemType':
+        this._loadingItemType = value
+        break
+      case 'enableTransform':
+        this._enableTransform = value
+        break
+      case 'slidingEnable':
+        this._slidingEnable = value
+        break
+      case 'slidingMode':
+        this._slidingMode = value
+        break
+      case 'initTranslation':
+        this._initTranslation = value
+        break
+      case 'duration':
+        this._duration = value
+        break
+      default:
+        super.updateProperty(key, value)
+    }
+  }
+
+  // Set current page
+  setCurrentPage(index) {
+    if (Array.isArray(index) && index.length === 1) {
+      index = index[0]
+    }
+    if (index < 0) return
+
+    const previousIndex = this._currentIndex
+    this._currentIndex = index
+    this._applyCurrentPageData()
+  }
+
+  _applyCurrentPageData() {
+    if (!this._contentView) return
+    const pageData = this._pages.get(this._currentIndex)
+    const listData = pageData && Array.isArray(pageData.data) ? pageData.data : []
+
+    // Check if content has a template-based list attribute (e.g., list="${tvSection0List}")
+    // If so, we need to bind the data through template mechanism
+    const listAttr = this._contentView.dom?.getAttribute?.('list')
+    if (listAttr && listAttr.includes('${')) {
+      // Use bindTemplateDataToNode to resolve template and set list data
+      // The listData should be wrapped in an object with the variable name as key
+      // Extract variable name from template string like "${tvSection0List}"
+      const varMatch = listAttr.match(/^\$\{([^}]+)\}$/)
+      if (varMatch) {
+        const varName = varMatch[1]
+        const scopeData = { [varName]: listData }
+        // Import and use bindTemplateDataToNode
+        import('../core/templateBinding.js').then(({ bindTemplateDataToNode }) => {
+          bindTemplateDataToNode(this._contentView.dom, scopeData, {
+            onListData: (element, value) => {
+              element._qtListData = value
+              if (this._contentView && typeof this._contentView.setListData === 'function') {
+                this._contentView.setListData(value)
+              }
+            },
+          })
+        })
+        return
+      }
+    }
+
+    // Direct setListData call for non-template case
+    if (typeof this._contentView.setListData === 'function') {
+      this._contentView.setListData(listData)
+      return
+    }
+    if (typeof this._contentView.updateProperty === 'function') {
+      this._contentView.updateProperty('listData', listData)
+    }
+  }
+
+  setListData(...args) {
+    args = Array.isArray(args[0]) && args.length === 1 ? args[0] : args
+    const pageIndex = args[0]
+    const meta = args[1] || {}
+    const data = args[2] || []
+    this._pages.set(pageIndex, { ...meta, data })
+    if (pageIndex === this._currentIndex) {
+      this._applyCurrentPageData()
+    }
+  }
+
+  addListData(...args) {
+    args = Array.isArray(args[0]) && args.length === 1 ? args[0] : args
+    const pageIndex = args[0]
+    const meta = args[1] || {}
+    const data = args[2] || []
+    const deleteCount = meta.deleteCount ?? 0
+
+    const existing = this._pages.get(pageIndex) || { data: [] }
+    const existingList = Array.isArray(existing.data) ? existing.data : []
+    if (deleteCount > 0) {
+      existingList.splice(0, deleteCount)
+    }
+    if (Array.isArray(data)) {
+      existing.data = existingList.concat(data)
+    } else {
+      existing.data = existingList
+    }
+    this._pages.set(pageIndex, existing)
+    if (pageIndex === this._currentIndex) {
+      this._applyCurrentPageData()
+    }
+  }
+
+  // Set page data
+  setPageData(pageIndex, data) {
+    this.setListData(pageIndex, {}, data?.data ?? data)
+  }
+
+  // Add page data
+  addPageData(pageIndex, data, deleteCount = 0) {
+    this.addListData(pageIndex, { deleteCount }, data?.data ?? data)
+  }
+
+  // Update page data
+  updatePageData(pageIndex, data) {
+    this.setPageData(pageIndex, data)
+  }
+
+  // Insert page data
+  insertPageData(pageIndex, sectionIndex, data) {
+    console.log('[ViewPager] insertPageData:', pageIndex, sectionIndex)
+  }
+
+  // Update child node
+  updateChildNode(page, position, childIndex, data) {
+    console.log('[ViewPager] updateChildNode:', page, position, childIndex)
+  }
+
+  // Update root node
+  updateRootNode(page, position, data) {
+    console.log('[ViewPager] updateRootNode:', page, position)
+  }
+
+  // Delete item range
+  deleteItemRange(sectionIndex, count) {
+    console.log('[ViewPager] deleteItemRange:', sectionIndex, count)
+  }
+
+  // Destroy
+  destroy() {
+    this._pages.clear()
+    this._contentView = null
+  }
+}

package/src/components/index.js

@@ -0,0 +1,24 @@
+// Component exports
+export { QtView, createNamedComponent } from './QtView'
+export { QtBaseComponent } from './QtBaseComponent'
+export { QtPageRootView } from './QtPageRootView'
+export { QtText } from './QtText'
+export { QtImage } from './QtImage'
+export { QtFastListView } from './QtFastListView'
+export { QtLoadingView } from './QtLoadingView'
+export { QtAnimationView } from './QtAnimationView'
+export { QtWebView } from './QtWebView'
+export { QtQRCode } from './QtQRCode'
+export { QtProgressBar } from './QtProgressBar'
+export { QtSeekBar } from './QtSeekBar'
+export { QtItemFrame } from './QtItemFrame'
+export { QtItemStoreView } from './QtItemStoreView'
+export { QtRippleView } from './QtRippleView'
+export { QtFlexView } from './QtFlexView'
+export { QtItemView } from './QtItemView'
+export { TabsView } from './TabsView'
+export { ViewPager } from './ViewPager'
+export { Modal } from './Modal'
+export { QtListView, QtListViewItem } from './QtListView'
+export { QtPlayMark } from './QtPlayMark'
+export { QtReplaceChild } from './QtReplaceChild'