@quicktvui/ai 1.0.0

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

@@ -0,0 +1,74 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="查询板块" @onButtonClicked="onGetButtonClicked" />
+    </div>
+    <qt-waterfall ref="waterfall" class="qt-waterfall-op-css">
+      <template #item>
+        <app-list-item :type="1" />
+      </template>
+    </qt-waterfall>
+  </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 {
+  QTIWaterfall,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+const TAG = "WaterfallTAG";
+
+export default defineComponent({
+  name: "查询Section",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const waterfall = ref<QTIWaterfall>();
+    const log = useESLog();
+
+    function onGetButtonClicked() {
+      const section = waterfall.value?.getSection(0);
+      log.d(TAG, "section:", section);
+    }
+
+    function onESCreate() {
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      waterfall.value?.init(waterfallData);
+      const sectionList: Array<QTWaterfallSection> = [
+        generatorAppWaterfallSection("0", `应用：${Date.now()}`),
+      ];
+      waterfall.value?.addSectionList(sectionList);
+    }
+
+    return {
+      waterfall,
+      onESCreate,
+      onGetButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.es-sdk-root-css {
+  width: 1920px;
+  height: 1080px;
+  background-color: #26292f;
+}
+
+.qt-waterfall-op-css {
+  width: 1920px;
+  height: 800px;
+}
+</style>

package/rules/.docs/examples/component/waterfall/section-list.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="es-sdk-root-css">
+    <qt-waterfall ref="waterfall" class="qt-waterfall-css" />
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { QTWaterfallSectionType } from "@quicktvui/quicktvui3";
+import { buildPosterItemList } from "../__mocks__/poster";
+import type { QTIWaterfall, QTWaterfallSection } from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "ListSection",
+  setup() {
+    const waterfall = ref<QTIWaterfall>();
+
+    function onESCreate() {
+      waterfall.value?.init({
+        width: 1920,
+        height: 1080,
+      });
+
+      const section: QTWaterfallSection = {
+        itemList: buildPosterItemList("1"),
+        style: {
+          width: 1920,
+          height: 500,
+          spacing: 20,
+        },
+        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_LIST,
+      };
+      waterfall.value?.setSectionList([section]);
+    }
+
+    return {
+      waterfall,
+      onESCreate,
+    };
+  },
+});
+</script>
+
+<style>
+.es-sdk-root-css {
+  width: 1920px;
+  height: 1080px;
+  background-color: #26292f;
+}
+
+.qt-waterfall-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

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

@@ -0,0 +1,149 @@
+<template>
+  <div class="es-sdk-root-css">
+    <qt-waterfall
+      ref="waterfall"
+      class="qt-waterfall-css"
+      @onItemFocused="onItemFocused"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+import {
+  QTWaterfallItemType,
+  QTWaterfallSectionType,
+} from "@quicktvui/quicktvui3";
+import {
+  buildPosterItemList,
+  buildPosterTitleItemList,
+} from "../__mocks__/poster";
+import type {
+  QTIWaterfall,
+  QTWaterfall,
+  QTWaterfallItem,
+  QTWaterfallSection,
+  QTWaterfallTabItem,
+} from "@quicktvui/quicktvui3";
+
+const TAG = "TabListSectionPage";
+
+export default defineComponent({
+  name: "TabListSection",
+  setup() {
+    const log = useESLog();
+    const waterfall = ref<QTIWaterfall>();
+
+    function onESCreate() {
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      waterfall.value?.init(waterfallData);
+
+      const tabItemList = [];
+
+      for (let i = 0; i < 15; i++) {
+        const tabItem: QTWaterfallTabItem = {
+          _id: `1_${i}`,
+          style: {
+            width: 100,
+            height: 50,
+          },
+          decoration: {
+            left: 90,
+          },
+          type: QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB,
+          text: `Tab:${i}`,
+        };
+        tabItemList.push(tabItem);
+      }
+
+      const tabSection: QTWaterfallSection = {
+        _id: "1",
+        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_TAB,
+        title: "Tab板块",
+        titleStyle: {
+          width: 1920,
+          height: 60,
+          marginLeft: 90,
+          marginTop: 40,
+          marginBottom: 40,
+          fontSize: 50,
+        },
+        style: {
+          width: 1920,
+          height: -1,
+        },
+        itemList: tabItemList,
+      };
+      const listSection: QTWaterfallSection = {
+        _id: "2",
+        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_LIST,
+        titleStyle: {
+          width: 0,
+          height: 0,
+          fontSize: 50,
+        },
+        style: {
+          width: 1920,
+          height: 400,
+        },
+        itemList: buildPosterItemList("2"),
+      };
+
+      const sectionList: Array<QTWaterfallSection> = [tabSection, listSection];
+      waterfall.value?.setSectionList(sectionList);
+    }
+
+    //-----------------------------------------------------
+    function onItemFocused(
+      sectionIndex: number,
+      position: number,
+      isFocused: boolean,
+      item: QTWaterfallItem,
+    ) {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(
+          TAG,
+          item,
+          `sectionIndex:${sectionIndex}  ` +
+            `position:${position}  ` +
+            `isFocused:${isFocused}  `,
+        );
+      }
+
+      if (item.type === QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB) {
+        if (isFocused) {
+          const section = waterfall.value?.getSection(1);
+          if (section) {
+            section.itemList = buildPosterTitleItemList(`Tab:${position}`);
+            waterfall.value?.updateSection(1, section);
+          }
+        }
+      }
+    }
+
+    return {
+      waterfall,
+      onESCreate,
+      onItemFocused,
+    };
+  },
+});
+</script>
+
+<style>
+.es-sdk-root-css {
+  width: 1920px;
+  height: 1080px;
+  background-color: #26292f;
+}
+
+.qt-waterfall-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

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

@@ -0,0 +1,153 @@
+<template>
+  <div class="es-sdk-root-css">
+    <qt-waterfall
+      ref="waterfall"
+      class="qt-waterfall-css"
+      @onItemClick="onItemClick"
+      @onItemFocused="onItemFocused"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+import {
+  QTWaterfallItemType,
+  QTWaterfallSectionType,
+} from "@quicktvui/quicktvui3";
+import type {
+  QTIWaterfall,
+  QTWaterfall,
+  QTWaterfallItem,
+  QTWaterfallSection,
+  QTWaterfallTabItem,
+} from "@quicktvui/quicktvui3";
+
+const TAG = "TabSectionPage";
+
+export default defineComponent({
+  name: "TabSection",
+  setup() {
+    const log = useESLog();
+    const waterfall = ref<QTIWaterfall>();
+
+    function onESCreate() {
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      waterfall.value?.init(waterfallData);
+
+      const tabItemList = [];
+
+      for (let i = 0; i < 15; i++) {
+        const tabItem: QTWaterfallTabItem = {
+          _id: `${i}`,
+          style: {
+            width: 200,
+            height: 50,
+            paddingLeft: 40,
+            paddingRight: 40,
+          },
+          type: QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB,
+          text: `Tab:${i}`,
+        };
+        tabItemList.push(tabItem);
+      }
+
+      const tabSection: QTWaterfallSection = {
+        _id: "1",
+        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_TAB,
+        title: "Tab板块",
+        titleStyle: {
+          width: 1920,
+          height: 60,
+          marginLeft: 90,
+          marginTop: 40,
+          marginBottom: 40,
+          fontSize: 50,
+        },
+        style: {
+          width: 1920,
+          height: -1,
+        },
+        itemList: tabItemList,
+      };
+
+      const sectionList: Array<QTWaterfallSection> = [tabSection];
+
+      waterfall.value?.setSectionList(sectionList);
+    }
+
+    //-----------------------------------------------------
+    function onItemClick(
+      sectionIndex: number,
+      position: number,
+      item: QTWaterfallItem,
+    ) {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(
+          TAG,
+          item,
+          `sectionIndex:${sectionIndex}  ` + `position:${position}  ` + `item:`,
+          item,
+        );
+      }
+      if (item.type === QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB) {
+        if (log.isLoggable(ESLogLevel.DEBUG)) {
+          log.d(
+            TAG,
+            `  sectionIndex:${sectionIndex}  position:${position}  item:`,
+            item,
+          );
+        }
+      }
+    }
+
+    function onItemFocused(
+      sectionIndex: number,
+      position: number,
+      isFocused: boolean,
+      item: QTWaterfallItem,
+    ) {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(
+          TAG,
+          item,
+          `sectionIndex:${sectionIndex}  ` +
+            `position:${position}  ` +
+            `isFocused:${isFocused}  `,
+        );
+      }
+
+      if (item.type === QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB) {
+        if (isFocused) {
+          //do sth
+        }
+      }
+    }
+
+    return {
+      waterfall,
+      onESCreate,
+      onItemFocused,
+      onItemClick,
+    };
+  },
+});
+</script>
+
+<style>
+.es-sdk-root-css {
+  width: 1920px;
+  height: 1080px;
+  background-color: #26292f;
+}
+
+.qt-waterfall-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

package/rules/.docs/examples/component/waterfall/section-time.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="time-section-css">
+    <span class="time-section-text-css">18</span>
+    <span v-show="show" class="time-section-text-css">:</span>
+    <span class="time-section-text-css">24</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "TimeSection",
+  setup() {
+    const show = ref<boolean>(true);
+
+    setInterval(() => {
+      show.value = !show.value;
+    }, 1000);
+
+    return {
+      show,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.time-section-css {
+  width: 1920px;
+  height: 200px;
+  background-color: red;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.time-section-text-css {
+  color: white;
+  font-size: 40px;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  text-align-vertical: center;
+}
+</style>

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

@@ -0,0 +1,118 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <s-text-button
+        text="更新单个板块"
+        @onButtonClicked="onUpdateButtonClicked"
+      />
+      <s-text-button
+        text="更新高度变化板块"
+        @onButtonClicked="onUpdateHeightButtonClicked"
+      />
+      <s-text-button
+        text="更新多个板块"
+        @onButtonClicked="onUpdateMultiButtonClicked"
+      />
+    </div>
+    <qt-waterfall ref="waterfall" class="qt-waterfall-op-css">
+      <template #item>
+        <app-list-item :type="1" />
+      </template>
+    </qt-waterfall>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import {
+  generatorAppChildrenWaterfallItemList,
+  generatorAppQuestionWaterfallItemList,
+  generatorAppWaterfallSection,
+} from "../__mocks__/app";
+import appListItem from "./item/app-list-item";
+import type {
+  QTIWaterfall,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+const TAG = "WaterfallTAG";
+
+export default defineComponent({
+  name: "更新Section",
+  components: {
+    "app-list-item": appListItem,
+  },
+  setup() {
+    const waterfall = ref<QTIWaterfall>();
+
+    function onUpdateButtonClicked() {
+      const section = waterfall.value?.getSection(0);
+      if (section) {
+        section.title = `新：${section.title}`;
+        section.itemList = generatorAppChildrenWaterfallItemList(`${0}`, 5);
+        waterfall.value?.updateSection(0, section);
+      }
+    }
+
+    function onUpdateHeightButtonClicked() {
+      const section = waterfall.value?.getSection(0);
+      if (section) {
+        section.title = `新：${section.title}`;
+        section.itemList = generatorAppChildrenWaterfallItemList(`${0}`, 9);
+        waterfall.value?.updateSection(0, section);
+      }
+    }
+
+    function onUpdateMultiButtonClicked() {
+      const sectionList: Array<QTWaterfallSection> = [];
+      const sectionZero = waterfall.value?.getSection(0);
+      if (sectionZero) {
+        sectionZero.title = `新：${sectionZero.title}`;
+        sectionZero.itemList = generatorAppChildrenWaterfallItemList(`${0}`, 5);
+        sectionList.push(sectionZero);
+      }
+      const sectionOne = waterfall.value?.getSection(1);
+      if (sectionOne) {
+        sectionOne.title = `新：${sectionOne.title}`;
+        sectionOne.itemList = generatorAppQuestionWaterfallItemList(`${1}`, 6);
+        sectionList.push(sectionOne);
+      }
+      if (sectionList) {
+        waterfall.value?.updateSectionList(0, 2, sectionList);
+      }
+    }
+
+    function onESCreate() {
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      waterfall.value?.init(waterfallData);
+      //
+      const sectionList: Array<QTWaterfallSection> = [
+        generatorAppWaterfallSection("0", `应用：${Date.now()}`),
+        generatorAppWaterfallSection("1", `应用：${Date.now()}`),
+        generatorAppWaterfallSection("2", `应用：${Date.now()}`),
+      ];
+      waterfall.value?.addSectionList(sectionList);
+    }
+
+    return {
+      waterfall,
+      onESCreate,
+      onUpdateButtonClicked,
+      onUpdateMultiButtonClicked,
+      onUpdateHeightButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-waterfall-op-css {
+  width: 1920px;
+  height: 800px;
+}
+</style>

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

@@ -0,0 +1,81 @@
+<template>
+  <div class="es-sdk-root-css">
+    <qt-waterfall ref="waterfall" class="qt-waterfall-css">
+      <template #vue-section>
+        <time-section />
+      </template>
+    </qt-waterfall>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { QTWaterfallSectionType } from "@quicktvui/quicktvui3";
+
+import timeSection from "./section/time-section.vue";
+import type {
+  QTIWaterfall,
+  QTWaterfall,
+  QTWaterfallSection,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "VueSection",
+  components: {
+    "time-section": timeSection,
+  },
+  setup() {
+    const waterfall = ref<QTIWaterfall>();
+
+    function onESCreate() {
+      const waterfallData: QTWaterfall = {
+        width: 1920,
+        height: 1080,
+      };
+      waterfall.value?.init(waterfallData);
+
+      //
+      const sectionList: Array<QTWaterfallSection> = [];
+      const section: QTWaterfallSection = {
+        _id: "1",
+        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_VUE,
+        title: "VueSection",
+        titleStyle: {
+          width: 1920,
+          height: 200,
+          marginLeft: 90,
+          marginTop: 40,
+          marginBottom: 40,
+          fontSize: 50,
+        },
+        itemList: [],
+        style: {
+          width: 1920,
+          height: 400,
+        },
+      };
+      sectionList.push(section);
+      waterfall.value?.setSectionList(sectionList);
+    }
+
+    return {
+      waterfall,
+      onESCreate,
+    };
+  },
+});
+</script>
+
+<style>
+.es-sdk-root-css {
+  width: 1920px;
+  height: 1080px;
+  background-color: #26292f;
+}
+
+.qt-waterfall-css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>