@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/poster/sub-title.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <tv-list
+        ref="listViewRef"
+        class="qt_tv_list_view_root_css"
+        horizontal="true"
+        :clipChildren="false"
+        :clipPadding="false"
+        @item-click="onItemClick"
+        @item-bind="onItemBind"
+      >
+        <qt-poster />
+      </tv-list>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import type {
+  QTIListView,
+  QTListViewItem,
+  QTPoster,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "次标题",
+  setup() {
+    const listViewRef = ref<QTIListView>();
+
+    const onESCreate = () => {
+      const data: Array<QTListViewItem> = [];
+      for (let i = 0; i < 2; i++) {
+        const poster: QTPoster = {
+          type: 10001,
+          focus: {
+            enable: true,
+            scale: 1.1,
+            border: false,
+          },
+          decoration: {
+            top: 20,
+            left: 20,
+            right: 20,
+            bottom: 20,
+          },
+          title: {
+            text: "主标题",
+            enable: true,
+            style: {
+              width: 260,
+            },
+          },
+          subTitle: {
+            text: "副标题",
+            enable: true,
+            style: {
+              width: 260,
+            },
+          },
+          floatTitle: {
+            text: "浮动标题",
+            enable: true,
+            style: {
+              width: 260,
+            },
+            background: { colors: ["#e5000000", "#00000000"], orientation: 4 },
+          },
+          style: {
+            width: 260,
+            height: 320,
+          },
+          titleStyle: {
+            width: 260,
+            height: 120,
+            marginTop: 320 - 60,
+          },
+          titleFocusStyle: { width: 260, marginTop: 320 - 100 },
+        };
+        data.push(poster);
+      }
+      listViewRef.value?.setListData(data);
+    };
+
+    function onItemClick() {
+      //
+    }
+
+    function onItemBind() {
+      //
+    }
+
+    return {
+      listViewRef,
+      onESCreate,
+      onItemClick,
+      onItemBind,
+    };
+  },
+});
+</script>
+
+<style>
+.qt_tv_list_view_root_css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

package/rules/.docs/examples/component/poster/title.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <tv-list
+        ref="listViewRef"
+        class="qt_tv_list_view_root_css"
+        horizontal="true"
+        :clipChildren="false"
+        :clipPadding="false"
+        @item-click="onItemClick"
+        @item-bind="onItemBind"
+      >
+        <qt-poster />
+      </tv-list>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import type {
+  QTIListView,
+  QTListViewItem,
+  QTPoster,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "主标题",
+  setup() {
+    const listViewRef = ref<QTIListView>();
+
+    const onESCreate = () => {
+      const data: Array<QTListViewItem> = [];
+      for (let i = 0; i < 2; i++) {
+        const poster: QTPoster = {
+          type: 10001,
+          focus: {
+            enable: true,
+            scale: 1.1,
+            border: false,
+          },
+          decoration: {
+            top: 20,
+            left: 20,
+            right: 20,
+            bottom: 20,
+          },
+          title: {
+            text: "主标题",
+            enable: true,
+            style: {
+              width: 260,
+            },
+          },
+          score: {
+            text: "1.1",
+            enable: true,
+            style: {
+              height: 100,
+              width: 260,
+              background: {
+                colors: ["#e5000000", "#00000000"],
+                orientation: 4,
+              },
+            },
+          },
+          style: {
+            width: 260,
+            height: 320,
+          },
+          titleStyle: {
+            width: 260,
+            marginTop: 0,
+          },
+          titleFocusStyle: { width: 260, marginTop: -10 },
+        };
+        data.push(poster);
+      }
+      listViewRef.value?.setListData(data);
+    };
+
+    function onItemClick() {
+      //
+    }
+
+    function onItemBind() {
+      //
+    }
+
+    return {
+      listViewRef,
+      onESCreate,
+      onItemClick,
+      onItemBind,
+    };
+  },
+});
+</script>
+
+<style>
+.qt_tv_list_view_root_css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

package/rules/.docs/examples/component/progress-bar/basic.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="es-sdk-root-css">
+    <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">
+      <qt-progress-bar
+        ref="progressBarRef"
+        :maxProgress="100"
+        :progress="50"
+        :cornerRadius="100"
+        :secondaryProgress="80"
+        :backgroundColor="backgroundColor"
+        :color="color"
+        class="es-progress-bar-css"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import type { QTIProgressBar } from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "基础用法",
+  setup() {
+    const progressBarRef = ref<QTIProgressBar>();
+    const backgroundColor = ref("#54D00C");
+    const color = ref({
+      startColor: "#FFD900",
+      endColor: "#54D00C",
+      type: 0,
+      shape: 0,
+      cornerRadii4: [20, 20, 20, 20],
+    });
+
+    function onESCreate() {
+      progressBarRef.value?.setProgress(10);
+      progressBarRef.value?.setMaxProgress(100);
+      progressBarRef.value?.setProgressColor("0xffff0000");
+      progressBarRef.value?.setProgressDefaultColor("0xff7415b1");
+    }
+
+    return {
+      progressBarRef,
+      backgroundColor,
+      color,
+      onESCreate,
+    };
+  },
+});
+</script>
+
+<style>
+.es-progress-bar-css {
+  width: 800px;
+  height: 20px;
+  border-radius: 0;
+}
+</style>

package/rules/.docs/examples/component/qr-code/basic.vue

@@ -0,0 +1,16 @@
+<template>
+  <qt-qr-code
+    style="width: 200px; height: 200px; background-color: aqua"
+    content="http://www.xxxx.com/"
+    :optimize="true"
+  />
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    // ...
+  },
+});
+</script>

package/rules/.docs/examples/component/radio-group/basic.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="es-sdk-root-css">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <qt-radio-group
+      ref="radioGroup"
+      :orientation="0"
+      :clipChildren="false"
+      class="item-radio-group-view-css"
+      @onCheckedChanged="onCheckedChanged"
+    >
+      <qt-radio-button
+        class="item-radio-button-view-css"
+        size="default"
+        :enableFocusBorder="true"
+        :enableFocusBackground="true"
+        :focusable="true"
+        :checked="true"
+        :viewId="1"
+        :clipChildren="false"
+        :value="1"
+        fill="#409eff"
+        textColor="#f6e707"
+        :padding="8"
+        :borderRadius="16"
+        :drawablePadding="8"
+        :defaultDrawable="defaultDrawable"
+        :selectDrawable="selectDrawable"
+        :focusDrawable="focusDrawable"
+        :focusBackground="'#ffffff'"
+      />
+      <qt-radio-button
+        class="item-radio-button-view-css"
+        :enableFocusBorder="true"
+        :enableFocusBackground="true"
+        :focusable="false"
+        :clipChildren="false"
+        :viewId="6"
+        :value="6"
+        fill="#333eee"
+        textColor="#f6e707"
+        :padding="8"
+        :borderRadius="16"
+        :drawablePadding="8"
+        :drawableSize="24"
+        :disabled="true"
+        :disabledDrawable="selectDrawable"
+      />
+    </qt-radio-group>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { useESToast } from "@extscreen/es3-core";
+import defaultDrawable from "../../assets/ic_radio_normal.png";
+import selectDrawable from "../../assets/ic_radio_select.png";
+import focusDrawable from "../../assets/ic_radio_focus.png";
+import type { QtRadioAPI } from "quicktvui";
+
+const TAG = "RadioGroup";
+
+export default defineComponent({
+  name: "单选框-横向",
+  setup() {
+    const toast = useESToast();
+    const radioGroup = ref<QtRadioAPI>();
+    const radioGroupTwo = ref<QtRadioAPI>();
+
+    function onCheckedChanged(id: number, text: string): void {
+      toast.showToast(`当前选中value---------->${text}viewId--->${id}`);
+    }
+
+    return {
+      defaultDrawable,
+      selectDrawable,
+      focusDrawable,
+      radioGroup,
+      radioGroupTwo,
+      onCheckedChanged,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.item-radio-group-view-css {
+  position: absolute;
+  width: 1920px;
+  height: 200px;
+  background-color: transparent;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.item-radio-button-view-css {
+  width: 200px;
+  height: 100px;
+  background-color: gold;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border-radius: 20px 20px 20px 20px;
+}
+</style>

package/rules/.docs/examples/component/rating-bar/basic.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="es-sdk-root-css">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div
+      class="es-sdk-content-column-css"
+      style="width: 1920px; height: 800px"
+      :clipChildren="false"
+    >
+      <qt-column class="column_root">
+        <qt-rating-bar
+          ref="ratingBarThreeRef"
+          :focusable="true"
+          :enableFocusBorder="true"
+          :icon="startFull"
+          :voidIcon="startEmpty"
+          :starCount="5"
+          :scoreNum="4"
+          :starSize="50"
+          :starDistance="20"
+          :verticalMargin="10"
+          :horizontalMargin="10"
+          :clipChildren="true"
+          class="item-rating-view-css"
+        />
+        <text-view text="展示评分-半角" :fontSize="30" class="t-view" />
+        <qt-view
+          class="item-rating-view-css-root"
+          eventClick
+          eventFocus
+          :focusable="false"
+          :clipChildren="false"
+        >
+          <qt-rating-bar
+            ref="ratingBarFourRef"
+            eventClick
+            eventFocus
+            :enableFocusBorder="true"
+            :autofocus="true"
+            :focusable="true"
+            :clipChildren="false"
+            :icon="startFull"
+            :voidIcon="startEmpty"
+            allowHalf
+            :scoreNum="2.5"
+            :starCount="5"
+            :starSize="30"
+            :starDistance="10"
+            :verticalMargin="10"
+            :horizontalMargin="10"
+            class="item-rating-view-css-four"
+            @onScoreChanged="onScoreChanged"
+          />
+        </qt-view>
+        <text-view text="展示评分-不可上焦" :fontSize="30" class="t-view" />
+        <qt-rating-bar
+          ref="ratingBarThreeRef"
+          :icon="startFull"
+          :voidIcon="startEmpty"
+          :starCount="5"
+          :scoreNum="4"
+          :starSize="50"
+          :starDistance="20"
+          :clipChildren="true"
+          class="item-rating-view-css"
+        />
+      </qt-column>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { ESLogLevel, useESLog, useESToast } from "@extscreen/es3-core";
+
+import startEmpty from "../../assets/ic_star_empty.png";
+import startFull from "../../assets/ic_star_full.png";
+
+import type { QtRatingBarAPI } from "quicktvui";
+
+const TAG = "RadioGroup";
+
+export default defineComponent({
+  name: "评价组件",
+  setup() {
+    const log = useESLog();
+    const toast = useESToast();
+    const ratingRef = ref<QtRatingBarAPI>();
+
+    const onESCreate = (params) => {
+      setTimeout(() => {
+        ratingRef?.value?.setStarMark("3");
+      }, 1500);
+    };
+    function onScoreChanged(scoreNum: string): void {
+      console.log("评价分值----------------", scoreNum);
+    }
+
+    return {
+      onESCreate,
+      startEmpty,
+      startFull,
+      ratingRef,
+      onScoreChanged,
+    };
+  },
+});
+</script>
+
+<style>
+.column_root {
+  position: absolute;
+  left: 200px;
+}
+
+.item-rating-view-css {
+  width: 350px;
+  height: 70px;
+  background-color: transparent;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.item-rating-view-css-root {
+  width: 300px;
+  height: 70px;
+  background-color: lightsteelblue;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.item-rating-view-css-four {
+  width: 300px;
+  height: 70px;
+  background-color: transparent;
+  position: absolute;
+}
+
+.item-rating-big-view-css {
+  width: 500px;
+  height: 100px;
+  background-color: transparent;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.t-view {
+  width: 1900px;
+  height: 40px;
+}
+</style>

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

@@ -0,0 +1,15 @@
+<template>
+  <qt-row>
+    <qt-button text="按钮" />
+    <qt-button text="按钮" />
+    <qt-button text="按钮" />
+    <qt-button text="按钮" />
+  </qt-row>
+</template>
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "基础用法",
+});
+</script>

package/rules/.docs/examples/component/seek-bar/bar.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="es-sdk-root-css">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div class="es-sdk-content-column-css">
+      <qt-seek-bar
+        ref="seekBarRef"
+        class="es-range-seek-bar-css"
+        :enableFocusBorder="true"
+        :focusable="true"
+        :requestFocus="true"
+        focusScale="1.1"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import type { QTISeekBar } from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "进度条",
+  setup() {
+    const seekBarRef = ref<QTISeekBar>();
+
+    function onESCreate() {
+      initESSeekBar();
+    }
+
+    function initESSeekBar() {
+      seekBarRef.value?.setSeekBarMode(1);
+      seekBarRef.value?.setProgressHeight(40);
+      seekBarRef.value?.setGravity(2);
+      seekBarRef.value?.setProgressRadius(10);
+      seekBarRef.value?.setProgress(40);
+    }
+
+    return {
+      seekBarRef,
+      onESCreate,
+      initESSeekBar,
+    };
+  },
+});
+</script>
+
+<style></style>