@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/tabs/horizontal.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="es-sdk-root-css">
+    <qt-tabs
+      ref="tabRef"
+      :horizontal="false"
+      tabClass="qt-tabs-horizontal-css"
+      tabNavBarClass="qt-tabs-tab-css"
+      tabPageClass="qt-tabs-page-css"
+      class="qt-tabs-horizontal-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";
+import type {
+  QTITab,
+  QTTab,
+  QTTabItem,
+  QTTabPageData,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "横向",
+  components: {
+    "app-list-item": appListItem,
+  },
+  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: 1670,
+        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-tabs-horizontal-css {
+  width: 1920px;
+  height: 1080px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.qt-tabs-tab-css {
+  width: 250px;
+  height: 800px;
+}
+
+.qt-tabs-page-css {
+  width: 1670px;
+  height: 1080px;
+}
+</style>

package/rules/.docs/examples/component/tabs/item-add.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="添加Item" @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,
+} 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: "添加Item",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const tabRef = ref<QTITab>();
+
+    function onButtonClicked() {
+      const itemList = generatorAppQuestionWaterfallItemList("0", 2);
+      tabRef.value?.addPageItemList(0, 0, itemList);
+    }
+
+    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,
+      onButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-tabs-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

package/rules/.docs/examples/component/tabs/item-custom.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="es-sdk-root-css">
+    <qt-tabs
+      ref="tabRef"
+      class="qt-tabs-css"
+      @onTabPageLoadData="onTabPageLoadData"
+    >
+      <template #waterfall-item>
+        <waterfall-item :type="1" />
+      </template>
+    </qt-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { QTWaterfallSectionType } from "@quicktvui/quicktvui3";
+import waterfallItem from "./item/waterfall-item";
+import { buildCustomWaterfallItemList } from "./data/mock";
+import type {
+  QTITab,
+  QTTab,
+  QTTabItem,
+  QTTabPageData,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "自定义Item",
+  components: {
+    "waterfall-item": waterfallItem,
+  },
+  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);
+    }
+
+    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 sectionList: Array<QTWaterfallSection> = [];
+      for (let i = 0; i < 4; i++) {
+        const section: QTWaterfallSection = {
+          _id: `${i}`,
+          type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
+          title: "板块",
+          titleStyle: {
+            width: 1920,
+            height: 60,
+            marginLeft: 90,
+            marginTop: 40,
+            marginBottom: 40,
+            fontSize: 50,
+          },
+          style: {
+            width: 1920,
+            height: -1,
+          },
+          itemList: buildCustomWaterfallItemList(`${i}`),
+        };
+        sectionList.push(section);
+      }
+
+      const tabPage: QTTabPageData = {
+        useDiff,
+        data: sectionList,
+      };
+      tabRef.value?.setPageData(pageIndex, tabPage);
+    }
+
+    return {
+      tabRef,
+      onESCreate,
+      onTabPageLoadData,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-tabs-css {
+  width: 1920px;
+  height: 900px;
+}
+</style>

package/rules/.docs/examples/component/tabs/item-delete.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="删除Item" @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 { generatorAppWaterfallSection } 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: "删除Item",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const tabRef = ref<QTITab>();
+
+    function onButtonClicked() {
+      tabRef.value?.deletePageItem(0, 0, 0, 1);
+    }
+
+    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,
+      onButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-tabs-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

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

@@ -0,0 +1,124 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="查询Item" @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 { generatorAppWaterfallSection } 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: "查询Item",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const tabRef = ref<QTITab>();
+
+    function onButtonClicked() {
+      const item = tabRef.value?.getPageItem(0, 0, 1);
+      console.log("---------查询Item---------->>>" + "  item:", item);
+    }
+
+    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,
+      onButtonClicked,
+      onESCreate,
+      onTabPageLoadData,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-tabs-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>