@quicktvui/ai 1.0.0

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

@@ -0,0 +1,72 @@
+<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" />
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="显示对话框" @onButtonClicked="show" />
+    </div>
+  </div>
+  <qt-dialog
+    v-if="showDialog"
+    class="qt-sdk-dialog-css"
+    @show="show"
+    @requestClose="dismiss"
+  >
+    <qt-view class="qt-sdk-dialog-content-css">
+      <qt-text
+        class="qt-sdk-dialog-content-text-css"
+        text="我是对话框"
+        font-size="30"
+      />
+    </qt-view>
+  </qt-dialog>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  setup() {
+    const showDialog = ref<boolean>(false);
+
+    function show() {
+      showDialog.value = true;
+    }
+
+    function dismiss() {
+      showDialog.value = false;
+    }
+
+    return {
+      show,
+      dismiss,
+      showDialog,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-sdk-dialog-css {
+  width: 1920px;
+  height: 1080px;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+}
+
+.qt-sdk-dialog-content-css {
+  width: 1920px;
+  height: 1080px;
+  align-items: center;
+  justify-content: center;
+  background-color: palevioletred;
+}
+
+.qt-sdk-dialog-content-text-css {
+  width: 192px;
+  height: 108px;
+  color: black;
+}
+</style>

package/rules/.docs/examples/component/div/background-img.vue

@@ -0,0 +1,49 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-row class="qt-sdk-content-row-css">
+      <div class="qt-view-background-css">
+        <qt-image
+          class="qt-view-background-img-css"
+          src="https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750"
+        />
+        <qt-text
+          class="qt-view-background-text-css"
+          text="文字文字文字文字文字"
+        />
+      </div>
+    </qt-row>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "背景图片",
+});
+</script>
+
+<style>
+.qt-view-background-css {
+  width: 192px;
+  height: 108px;
+  background-color: transparent;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+
+.qt-view-background-img-css {
+  width: 192px;
+  height: 108px;
+  position: absolute;
+}
+
+.qt-view-background-text-css {
+  width: 192px;
+  height: 108px;
+  color: red;
+}
+</style>

package/rules/.docs/examples/component/div/background.vue

@@ -0,0 +1,28 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-row class="qt-sdk-content-row-css">
+      <div class="qt-view-background-css" />
+    </qt-row>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "背景色",
+});
+</script>
+
+<style>
+.qt-view-background-css {
+  width: 192px;
+  height: 108px;
+  background-color: darkgoldenrod;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+</style>

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

@@ -0,0 +1,28 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <div class="qt-view-start-page" />
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "使用初探",
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style>
+.qt-view-start-page {
+  width: 192px;
+  height: 108px;
+  background-color: darkgoldenrod;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

package/rules/.docs/examples/component/div/border.vue

@@ -0,0 +1,72 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-row class="qt-sdk-content-row-css">
+      <div
+        class="qt-view-focus-one"
+        :focusable="true"
+        :enableFocusBorder="false"
+        :focusScale="1.1"
+        @focus="onFocus"
+      />
+      <div
+        class="qt-view-focus-two"
+        :focusable="true"
+        :enableFocusBorder="false"
+        :focusScale="1.1"
+        @focus="onFocus"
+      />
+    </qt-row>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "边框",
+  setup() {
+    const onFocus = (e) => {
+      //
+    };
+    return {
+      onFocus,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-view-focus-one {
+  width: 192px;
+  height: 108px;
+  background-color: darkgoldenrod;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+  border-color: blueviolet;
+  border-width: 5px;
+  border-radius: 40px;
+  focus-border-width: 5px;
+  focus-border-color: blue;
+  focus-border-style: solid;
+  focus-border-radius: 40px;
+}
+
+.qt-view-focus-two {
+  width: 192px;
+  height: 108px;
+  background-color: red;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+  border-color: purple;
+  border-width: 2px;
+  border-radius: 20px;
+  focus-border-width: 5px;
+  focus-border-radius: 40px;
+  focus-border-color: blue;
+  focus-border-style: solid;
+}
+</style>

package/rules/.docs/examples/component/div/click.vue

@@ -0,0 +1,66 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-row class="qt-sdk-content-row-css">
+      <div
+        class="qt-view-focus-one"
+        :focusable="true"
+        :enableFocusBorder="true"
+        :focusScale="1.1"
+        @focus="onFocus"
+        @click="onClick"
+      />
+      <div
+        class="qt-view-focus-two"
+        :focusable="true"
+        :enableFocusBorder="true"
+        :focusScale="1.1"
+        @focus="onFocus"
+        @click="onClick"
+      />
+    </qt-row>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+import { useESToast } from "@extscreen/es3-core";
+
+export default defineComponent({
+  name: "点击事件",
+  setup() {
+    const toast = useESToast();
+    const onFocus = (e) => {
+      const focused = e.isFocused;
+    };
+    const onClick = (e) => {
+      toast.showToast("点击了~");
+    };
+    return {
+      onFocus,
+      onClick,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-view-focus-one {
+  width: 192px;
+  height: 108px;
+  background-color: darkgoldenrod;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+
+.qt-view-focus-two {
+  width: 192px;
+  height: 108px;
+  background-color: red;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+</style>

package/rules/.docs/examples/component/div/focus-background.vue

@@ -0,0 +1,60 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-row class="qt-sdk-content-row-css">
+      <div
+        class="qt-view-focus-one"
+        :focusable="true"
+        :enableFocusBorder="true"
+        :focusScale="1.1"
+        @focus="onFocus"
+      />
+      <div
+        class="qt-view-focus-two"
+        :focusable="true"
+        :enableFocusBorder="true"
+        :focusScale="1.1"
+        @focus="onFocus"
+      />
+    </qt-row>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "焦点背景色",
+  setup() {
+    const onFocus = (e) => {
+      //
+    };
+    return {
+      onFocus,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-view-focus-one {
+  width: 192px;
+  height: 108px;
+  background-color: darkgoldenrod;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+  focus-background-color: #40b883;
+}
+
+.qt-view-focus-two {
+  width: 192px;
+  height: 108px;
+  background-color: red;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+  focus-background-color: #40b883;
+}
+</style>

package/rules/.docs/examples/component/div/focus.vue

@@ -0,0 +1,58 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-row class="qt-sdk-content-row-css">
+      <div
+        class="qt-view-focus-one"
+        :focusable="true"
+        :enableFocusBorder="true"
+        :focusScale="1.1"
+        @focus="onFocus"
+      />
+      <div
+        class="qt-view-focus-two"
+        :focusable="true"
+        :enableFocusBorder="true"
+        :focusScale="1.1"
+        @focus="onFocus"
+      />
+    </qt-row>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "焦点事件",
+  setup() {
+    const onFocus = (e) => {
+      const focused = e.isFocused;
+    };
+    return {
+      onFocus,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-view-focus-one {
+  width: 192px;
+  height: 108px;
+  background-color: darkgoldenrod;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+
+.qt-view-focus-two {
+  width: 192px;
+  height: 108px;
+  background-color: red;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+</style>

package/rules/.docs/examples/component/div/gradient-background.vue

@@ -0,0 +1,36 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-row class="qt-sdk-content-row-css">
+      <div
+        class="qt-view-gradient-background-css"
+        :gradientBackground="{
+          type: 0,
+          shape: 0,
+          colors: ['#ff0000', '#00ff00'],
+          cornerRadii4: [0, 5, 20, 0],
+        }"
+      />
+    </qt-row>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "渐变背景色",
+});
+</script>
+
+<style>
+.qt-view-gradient-background-css {
+  width: 192px;
+  height: 108px;
+  background-color: transparent;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" text="QTFooter" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-container>
+      <qt-footer>
+        <span class="container-name-css">Footer</span>
+      </qt-footer>
+    </qt-container>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "QTFooter",
+  emits: [],
+  setup(props, context) {
+    return {};
+  },
+});
+</script>
+
+<style>
+.qt-footer {
+  background-color: #c7e2fe;
+}
+
+.container-name-css {
+  color: black;
+  font-size: 30px;
+}
+</style>

package/rules/.docs/examples/component/grid-view/basic.vue

@@ -0,0 +1,59 @@
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import type {
+  QTIListView,
+  QTListViewItem,
+  QTPoster,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  setup() {
+    const gridViewRef = ref<QTIListView>();
+    const arr: Array<QTListViewItem> = [];
+    const listDataRec: Array<QTListViewItem> = [];
+    for (let i = 0; i < 24; i++) {
+      const poster: QTPoster = {
+        type: 10001,
+        decoration: { top: 20, left: 20, right: 20, bottom: 20 },
+        title: {
+          text: `主标题${i}`,
+          enable: true,
+          style: { width: 260 },
+        },
+        style: { width: 260, height: 320 },
+        titleStyle: { width: 260, height: 120, marginTop: 320 - 60 },
+        titleFocusStyle: { width: 260, marginTop: 320 - 100 },
+      };
+      arr.push(poster);
+    }
+
+    // listDataRec = gridViewRef.value!.init(arr);
+    // 	 初始化组件之后返回值常用操作
+    //   获取引用类型值 let getData = JSON.parse(JSON.stringify(listDataRec))
+    //   获取基本类型值 listDataRec[0].assetTitle
+    //   修改值 listDataRec[0].assetTitle = '更新assetTitle'
+    //   push   listDataRec.push({ 单条数据 }) | listDataRec.push(...[多条数据]) //push方法
+    //   pop    listDataRec.pop() //pop方法 末尾删除一条item
+    //   concat listDataRec.concat(data) //concat方法 链接listDataRec数据
+    // 	 splice(1个参数) 删除 listDataRec.splice(1)    //splice方法删除 从第一项开始删除之后所有item
+    // 	 splice(2个参数) 删除 listDataRec.splice(1, 2) //splice方法删除 （从第1个开始 删除2条item）
+    // 	 splice(3个参数 - 替换) listDataRec.splice(4, 2, data)    //splice方法-替换 从索引位置 4 开始，替换两个元素，替换的data （当三个参数第二个参数不为0时 为替换）
+    // 	 splice(3个参数 - 插入) listDataRec.splice(4, 0, data)    //splice方法-插入 从索引位置 4 开始，替换0，插入的data （当三个参数第二个参数为0时 为插入）仅支持runtime版本 2.3+
+    //   forEach循环   listDataRec.forEach(el => { el.assetTitle = '修改assetTitle' }) //循环修改每个item的值 整体更新
+    //   for循环   for (let i = 0; i < listDataRec.length; i++) { if () { } } //循环更新符合条件的每个item 当筛选个别条件的item时可以使用for循环，当循环修改每个item的值时建议使用forEach循环
+    //   重新赋值   listDataRec.splice(0); listDataRec.push(...data)  // 整体更新
+  },
+});
+</script>
+
+<template>
+  <qt-grid-view
+    ref="gridViewRef"
+    class="grid_view"
+    :spanCount="6"
+    :areaWidth="1800"
+  >
+    <!-- 结合poster组件快速生成item 亦可自定义item-->
+    <qt-poster />
+  </qt-grid-view>
+</template>

package/rules/.docs/examples/component/grid-view/page.vue

@@ -0,0 +1,80 @@
+<script lang="ts">
+import { defineComponent, nextTick, ref } from "vue";
+import type {
+  QTIListView,
+  QTListViewItem,
+  QTPoster,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  setup() {
+    const gridViewRef = ref<QTIListView>();
+    let listDataRec: Array<QTListViewItem> = [];
+    const loadMore = (pageNo: number) => {
+      const arr: Array<QTListViewItem> = [];
+      for (let i = pageNo * 6 - 6; i < pageNo * 6; i++) {
+        const poster: QTPoster = {
+          type: 10001,
+          decoration: { top: 20, left: 20, right: 20, bottom: 20 },
+          title: {
+            text: `主标题${i}`,
+            enable: true,
+            style: { width: 260 },
+          },
+          style: { width: 260, height: 320 },
+          titleStyle: { width: 260, height: 120, marginTop: 320 - 60 },
+          titleFocusStyle: { width: 260, marginTop: 320 - 100 },
+        };
+        arr.push(poster);
+      }
+      if (listDataRec.length > 0) {
+        if (pageNo > 4) {
+          //如果分页请求完毕 调用 stopPage 方法
+          gridViewRef.value?.stopPage();
+        } else {
+          listDataRec.push(...arr);
+        }
+      } else {
+        nextTick(() => {
+          listDataRec = gridViewRef.value!.init(arr);
+        });
+      }
+    };
+
+    const onItemBind = () => {
+      //
+    };
+
+    return {
+      gridViewRef,
+      onItemBind,
+      loadMore,
+    };
+  },
+});
+</script>
+<template>
+  <qt-grid-view
+    ref="gridViewRef"
+    class="list_view"
+    :spanCount="6"
+    :areaWidth="1800"
+    :itemHeight="320"
+    :listenBoundEvent="true"
+    :loadMore="loadMore"
+    :openPage="true"
+    @item-bind="onItemBind"
+  >
+    <qt-poster />
+    <!-- loading样式  -->
+    <qt-view
+      ref="loading"
+      class="loading"
+      type="1002"
+      name="loading"
+      :focusable="false"
+    >
+      <qt-loading-view color="#409eff" style="height: 30px; width: 30px" />
+    </qt-view>
+  </qt-grid-view>
+</template>

package/rules/.docs/examples/component/grid-view/ref-base.vue

@@ -0,0 +1,50 @@
+<template>
+  <qt-grid-view class="grid_view" :listData="listData" :spanCount="6">
+    <qt-view type="1" class="qt_list_item" :focusable="true" eventClick>
+      <qt-text text="${text}" class="qt_list_item_text" />
+    </qt-view>
+  </qt-grid-view>
+</template>
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { qtRef } from "@quicktvui/quicktvui3";
+
+const listData = qtRef();
+
+onMounted(() => {
+  listData.value = mockData(); //初始化数据
+});
+// 模拟数据
+const mockData = (num = 30, flag = "") => {
+  return new Array(num).fill(1).map((_, index) => {
+    return {
+      text: index + flag,
+      type: 1,
+      decoration: { left: 30, right: 30, bottom: 6 },
+    };
+  });
+};
+</script>
+<style scoped>
+.grid_view {
+  width: 1920px;
+  height: 1080px;
+  background-color: transparent;
+}
+
+.qt_list_item {
+  width: 260px;
+  height: 300px;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  focus-background-color: #ffffff;
+}
+
+.qt_list_item_text {
+  width: 200px;
+  height: 300px;
+  font-size: 30px;
+  background-color: transparent;
+}
+</style>