@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/tabs/section-get.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="查询Section" @onButtonClicked="onGetButtonClicked" />
+    </div>
+    <qt-tabs
+      ref="tabRef"
+      class="qt-tabs-css"
+      @onTabPageLoadData="onTabPageLoadData"
+    >
+      <template #waterfall-item>
+        <app-list-item :type="1" />
+      </template>
+    </qt-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { useESLog } from "@extscreen/es3-core";
+import { generatorAppWaterfallSection } from "../__mocks__/app";
+import appListItem from "./item/app-list-item";
+import type {
+  QTITab,
+  QTTab,
+  QTTabItem,
+  QTTabPageData,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+const TAG = "TabWaterfallTAG";
+
+export default defineComponent({
+  name: "查询Section",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const tabRef = ref<QTITab>();
+    const log = useESLog();
+
+    function onGetButtonClicked() {
+      const sectionList = tabRef.value?.getPageSectionList(0);
+      log.d(TAG, "-------获取sectionList-------->>>>", sectionList);
+    }
+
+    function onESCreate() {
+      //tab item list
+      const tabItemList: Array<QTTabItem> = [];
+
+      for (let i = 0; i < 15; i++) {
+        const tabItem: QTTabItem = {
+          _id: `${i}`,
+          type: 20000,
+          text: `Tab:${i}`,
+          titleSize: 20,
+          decoration: {
+            left: 40,
+            right: 20,
+          },
+        };
+        tabItemList.push(tabItem);
+      }
+
+      //tab
+      const tab: QTTab = {
+        defaultFocusIndex: 0,
+        defaultIndex: 0,
+        itemList: tabItemList,
+      };
+      tabRef.value?.initTab(tab);
+
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      tabRef.value?.initPage(waterfallData);
+    }
+
+    let pageIndexLast = -1;
+
+    //-----------------------------------------------------
+    function onTabPageLoadData(
+      pageIndex: number,
+      pageNo: number,
+      useDiff: boolean,
+    ): void {
+      console.log(
+        `---------loadPageData---------->>>` +
+          `  pageIndex:${pageIndex}  useDiff:${useDiff}`,
+      );
+      if (pageIndexLast === pageIndex) {
+        return;
+      }
+      pageIndexLast = pageIndex;
+
+      const section: QTWaterfallSection = generatorAppWaterfallSection(
+        "0",
+        "应用",
+      );
+
+      const sectionList: Array<QTWaterfallSection> = [section];
+
+      const tabPage: QTTabPageData = {
+        useDiff,
+        data: sectionList,
+      };
+      tabRef.value?.setPageData(pageIndex, tabPage);
+    }
+
+    return {
+      tabRef,
+      onESCreate,
+      onTabPageLoadData,
+      onGetButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-tabs-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

package/rules/.docs/examples/component/tabs/section-update.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="更新Section" @onButtonClicked="onButtonClicked" />
+    </div>
+    <qt-tabs
+      ref="tabRef"
+      class="qt-tabs-css"
+      @onTabPageLoadData="onTabPageLoadData"
+    >
+      <template #waterfall-item>
+        <app-list-item :type="1" />
+      </template>
+    </qt-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import {
+  generatorAppQuestionWaterfallItemList,
+  generatorAppWaterfallSection,
+  generatorWaterfallSection,
+} from "../__mocks__/app";
+import appListItem from "./item/app-list-item";
+import type {
+  QTITab,
+  QTTab,
+  QTTabItem,
+  QTTabPageData,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "更新Section",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const tabRef = ref<QTITab>();
+
+    function onButtonClicked() {
+      const itemList = generatorAppQuestionWaterfallItemList("0", 5);
+      const section: QTWaterfallSection = generatorWaterfallSection(
+        "0",
+        "应用更新",
+        itemList,
+      );
+      tabRef.value?.updatePageSection(0, 0, section);
+    }
+
+    function onESCreate() {
+      //tab item list
+      const tabItemList: Array<QTTabItem> = [];
+
+      for (let i = 0; i < 15; i++) {
+        const tabItem: QTTabItem = {
+          _id: `${i}`,
+          type: 20000,
+          text: `Tab:${i}`,
+          titleSize: 20,
+          decoration: {
+            left: 40,
+            right: 20,
+          },
+        };
+        tabItemList.push(tabItem);
+      }
+
+      //tab
+      const tab: QTTab = {
+        defaultFocusIndex: 0,
+        defaultIndex: 0,
+        itemList: tabItemList,
+      };
+      tabRef.value?.initTab(tab);
+
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      tabRef.value?.initPage(waterfallData);
+    }
+
+    let pageIndexLast = -1;
+
+    //-----------------------------------------------------
+    function onTabPageLoadData(
+      pageIndex: number,
+      pageNo: number,
+      useDiff: boolean,
+    ): void {
+      console.log(
+        `---------loadPageData---------->>>` +
+          `  pageIndex:${pageIndex}  useDiff:${useDiff}`,
+      );
+      if (pageIndexLast === pageIndex) {
+        return;
+      }
+      pageIndexLast = pageIndex;
+
+      const sectionOne: QTWaterfallSection = generatorAppWaterfallSection(
+        "0",
+        "应用：1",
+      );
+      const sectionTwo: QTWaterfallSection = generatorAppWaterfallSection(
+        "1",
+        "应用：2",
+      );
+
+      const sectionList: Array<QTWaterfallSection> = [sectionOne, sectionTwo];
+
+      const tabPage: QTTabPageData = {
+        useDiff,
+        data: sectionList,
+      };
+      tabRef.value?.setPageData(pageIndex, tabPage);
+    }
+
+    return {
+      tabRef,
+      onESCreate,
+      onTabPageLoadData,
+      onButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-tabs-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

package/rules/.docs/examples/component/tabs/section-vue.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="es-sdk-root-css">
+    <qt-tabs
+      ref="tabRef"
+      class="qt-tabs-css"
+      @onTabPageLoadData="onTabPageLoadData"
+    >
+      <template #waterfall-vue-section>
+        <vue-one-section />
+      </template>
+    </qt-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { QTWaterfallSectionType } from "@quicktvui/quicktvui3";
+import vueOneSection from "./section/vue-one-section";
+import type {
+  QTITab,
+  QTTab,
+  QTTabItem,
+  QTTabPageData,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "VueSection",
+  components: {
+    "vue-one-section": vueOneSection,
+  },
+  setup() {
+    const tabRef = ref<QTITab>();
+
+    function onESCreate() {
+      //tab item list
+      const tabItemList: Array<QTTabItem> = [];
+
+      for (let i = 0; i < 15; i++) {
+        const tabItem: QTTabItem = {
+          _id: `${i}`,
+          type: 20000,
+          text: `Tab:${i}`,
+          titleSize: 20,
+          decoration: {
+            left: 40,
+            right: 20,
+          },
+        };
+        tabItemList.push(tabItem);
+      }
+
+      //tab
+      const tab: QTTab = {
+        defaultFocusIndex: 0,
+        defaultIndex: 0,
+        itemList: tabItemList,
+      };
+      tabRef.value?.initTab(tab);
+
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      tabRef.value?.initPage(waterfallData);
+    }
+
+    function onTabPageLoadData(
+      pageIndex: number,
+      pageNo: number,
+      useDiff: boolean,
+    ): void {
+      const sectionOne: QTWaterfallSection = {
+        _id: "1",
+        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_VUE,
+        itemList: [],
+        style: {
+          width: 1920,
+          height: 320,
+        },
+        decoration: {
+          top: 20,
+          bottom: 20,
+        },
+      };
+      const sectionList: Array<QTWaterfallSection> = [sectionOne];
+
+      const tabPage: QTTabPageData = {
+        useDiff,
+        data: sectionList,
+      };
+      tabRef.value?.setPageData(pageIndex, tabPage);
+    }
+
+    return {
+      tabRef,
+      onESCreate,
+      onTabPageLoadData,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-tabs-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

package/rules/.docs/examples/component/tabs/single-tab.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="es-sdk-root-css">
+    <qt-tabs
+      ref="tabRef"
+      tabNavBarClass="qt-tabs-nav-bar-css"
+      tabContentClass="qt-tabs-content-css"
+      class="qt-single-tab-css"
+      @onTabPageLoadData="onTabPageLoadData"
+    >
+      <template #waterfall-item>
+        <app-list-item :type="1" />
+      </template>
+    </qt-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { generatorAppWaterfallSection } from "../__mocks__/app";
+import appListItem from "./item/app-list-item.vue";
+import type {
+  QTITab,
+  QTTab,
+  QTTabItem,
+  QTTabPageData,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "单Tab",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const tabRef = ref<QTITab>();
+
+    function onESCreate() {
+      //tab item list
+      const tabItemList: Array<QTTabItem> = [];
+      const tabItem: QTTabItem = {
+        _id: "1",
+        type: 20000,
+        text: "Tab",
+        titleSize: 20,
+        decoration: {
+          left: 40,
+          right: 20,
+        },
+      };
+      tabItemList.push(tabItem);
+      //tab
+      const tab: QTTab = {
+        defaultFocusIndex: 0,
+        defaultIndex: 0,
+        itemList: tabItemList,
+      };
+      tabRef.value?.initTab(tab);
+
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      tabRef.value?.initPage(waterfallData);
+    }
+
+    function onTabPageLoadData(
+      pageIndex: number,
+      pageNo: number,
+      useDiff: boolean,
+    ): void {
+      const section: QTWaterfallSection = generatorAppWaterfallSection(
+        "0",
+        "应用",
+      );
+      const sectionList: Array<QTWaterfallSection> = [section];
+
+      const tabPage: QTTabPageData = {
+        useDiff,
+        data: sectionList,
+      };
+      tabRef.value?.setPageData(pageIndex, tabPage);
+    }
+
+    return {
+      tabRef,
+      onESCreate,
+      onTabPageLoadData,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-single-tab-css {
+  width: 1920px;
+  height: 1080px;
+}
+
+.es-sdk-root-css .qt-tabs-nav-bar-css {
+  width: 1920px;
+  height: 0;
+  background-color: red;
+}
+
+.qt-tabs-content-css {
+  width: 1920px;
+  height: 1080px;
+  background-color: #7415b1;
+}
+</style>

package/rules/.docs/examples/component/text/basic.vue

@@ -0,0 +1,20 @@
+<template>
+  <qt-text class="qt-text" text="文本标签" />
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+//注意：文本标签必须设置宽高
+export default defineComponent({
+  setup() {
+    // ...
+  },
+});
+</script>
+<style lang="css" scoped>
+.qt-text {
+  width: 100px;
+  height: 50px;
+  font-size: 88px;
+  color: aqua;
+}
+</style>

package/rules/.docs/examples/component/text/ellipsize-mode.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <qt-column class="qt-text-ellipsize-mode-page">
+      <qt-row>
+        <qt-text
+          text="ellipsizeMode=0(start)"
+          class="qt-title-text"
+          :maxLines="1"
+          :fontSize="44"
+        />
+        <qt-text
+          text="这是超长文字超长文字超长文字超长文字超长文字"
+          class="qt-text"
+          :maxLines="1"
+          :fontSize="44"
+          :ellipsizeMode="0"
+        />
+      </qt-row>
+      <qt-row>
+        <qt-text
+          text="ellipsizeMode=1(middle)"
+          class="qt-title-text"
+          :maxLines="1"
+          :fontSize="44"
+        />
+        <qt-text
+          text="这是超长文字超长文字超长文字超长文字超长文字"
+          class="qt-text"
+          :maxLines="1"
+          :fontSize="44"
+          :ellipsizeMode="1"
+        />
+      </qt-row>
+      <qt-row>
+        <qt-text
+          text="ellipsizeMode=2(end)"
+          class="qt-title-text"
+          :maxLines="1"
+          :fontSize="44"
+        />
+        <qt-text
+          text="这是超长文字超长文字超长文字超长文字超长文字"
+          class="qt-text"
+          :maxLines="1"
+          :fontSize="44"
+          :ellipsizeMode="2"
+        />
+      </qt-row>
+      <qt-row>
+        <qt-text
+          text="ellipsizeMode=3(marqeue)"
+          class="qt-title-text"
+          :maxLines="1"
+          :fontSize="44"
+        />
+        <qt-text
+          text="这是超长文字超长文字超长文字超长文字超长文字"
+          class="qt-text"
+          :maxLines="1"
+          :fontSize="44"
+          :select="true"
+          :ellipsizeMode="3"
+        />
+      </qt-row>
+      <qt-row>
+        <qt-text
+          text="ellipsizeMode=4(marquee on focus)"
+          class="qt-title-text"
+          :maxLines="1"
+          :fontSize="44"
+        />
+        <qt-text
+          text="这是超长文字超长文字超长文字超长文字超长文字"
+          class="qt-text"
+          :maxLines="1"
+          :fontSize="44"
+          :ellipsizeMode="4"
+        />
+      </qt-row>
+    </qt-column>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "EllipsizeMode",
+  setup(props, context) {
+    return {};
+  },
+});
+</script>
+
+<style>
+.qt-text-ellipsize-mode-page {
+  width: 1920px;
+  height: 1000px;
+  background-color: transparent;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.qt-text-ellipsize-mode-page .qt-title-text {
+  width: 800px;
+  height: 60px;
+  margin: 15px;
+  color: black;
+  background-color: darkgray;
+}
+
+.qt-text-ellipsize-mode-page .qt-text {
+  width: 600px;
+  height: 60px;
+  margin: 15px;
+  color: black;
+  background-color: darkgray;
+}
+</style>