@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/animation/scale-props.vue

@@ -0,0 +1,129 @@
+<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"
+      :clipChildren="true"
+      style="height: 1080px"
+    >
+      <div class="es-sdk-content-row-css">
+        <s-text-button text="创建并开始2参动画" @onButtonClicked="initTwo" />
+        <s-text-button text="创建并开始3参动画" @onButtonClicked="initThree" />
+        <s-text-button text="创建并开始4参动画" @onButtonClicked="initFour" />
+      </div>
+      <div class="es-sdk-content-row-css">
+        <s-text-button text="创建并开始10参动画" @onButtonClicked="initN" />
+        <s-text-button text="反转10参动画" @onButtonClicked="reverseAnimator" />
+        <s-text-button text="暂停10参动画" @onButtonClicked="pauseAnimator" />
+        <s-text-button text="恢复10参动画" @onButtonClicked="resumeAnimator" />
+        <s-text-button text="取消10参动画" @onButtonClicked="cancelAnimator" />
+      </div>
+      <qt-animation
+        ref="animationView"
+        class="animation-view-css"
+        autoPlay
+        :animator="animator"
+      >
+        <div class="animation-inner-view-css" />
+      </qt-animation>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { useESRouter } from "@extscreen/es3-router";
+import {
+  QTAnimationPropertyName,
+  QTAnimationType,
+  QTAnimationValueType,
+} from "@quicktvui/quicktvui3";
+import type { QTAnimator, QTIAnimation } from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "Scale（props）",
+  emits: [],
+  setup() {
+    const animationView = ref<QTIAnimation>();
+    const router = useESRouter();
+
+    const animator = ref<QTAnimator>();
+
+    function initTwo() {
+      animator.value = {
+        type: QTAnimationType.SCALE_X,
+        values: [0, 1.5],
+        duration: 1000,
+      };
+    }
+
+    function initThree() {
+      animator.value = {
+        type: QTAnimationType.SCALE_X,
+        values: [0, 1.5, 2],
+        duration: 1000,
+      };
+    }
+
+    function initFour() {
+      animator.value = {
+        type: QTAnimationType.SCALE_X,
+        values: [0, 1.5, 2, 0.3],
+        duration: 1000,
+      };
+    }
+
+    function initN() {
+      animator.value = {
+        type: QTAnimationType.SCALE_X,
+        values: [0, 1.5, 2, 0.3, 0, 1, 0, 1.5, 2, 0.3],
+        duration: 10000,
+      };
+    }
+
+    function reverseAnimator() {
+      animationView.value?.reverse();
+    }
+
+    function pauseAnimator() {
+      animationView.value?.pause();
+    }
+
+    function resumeAnimator() {
+      animationView.value?.resume();
+    }
+
+    function cancelAnimator() {
+      animationView.value?.cancel();
+    }
+
+    function resetAnimators() {
+      animationView.value?.reset();
+    }
+
+    function onBackPressed() {
+      resetAnimators();
+      router.back();
+    }
+
+    return {
+      animationView,
+      animator,
+      initTwo,
+      initThree,
+      initFour,
+      initN,
+      reverseAnimator,
+      pauseAnimator,
+      resumeAnimator,
+      cancelAnimator,
+      resetAnimators,
+      onBackPressed,
+    };
+  },
+});
+</script>
+
+<style src="./css/qt-animation-css.css"></style>

package/rules/.docs/examples/component/animation/scale.vue

@@ -0,0 +1,169 @@
+<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"
+      :clipChildren="true"
+      style="height: 1080px"
+    >
+      <div class="es-sdk-content-row-css">
+        <s-text-button text="创建并开始2参动画" @onButtonClicked="initTwo" />
+        <s-text-button text="创建并开始3参动画" @onButtonClicked="initThree" />
+        <s-text-button text="创建并开始4参动画" @onButtonClicked="initFour" />
+        <s-text-button
+          text="延迟2s开始5参动画"
+          @onButtonClicked="startAnimatorDelay"
+        />
+        <s-text-button text="重置所有动画" @onButtonClicked="resetAnimators" />
+      </div>
+      <div class="es-sdk-content-row-css">
+        <s-text-button text="创建并开始10参动画" @onButtonClicked="initN" />
+        <s-text-button text="反转10参动画" @onButtonClicked="reverseAnimator" />
+        <s-text-button text="暂停10参动画" @onButtonClicked="pauseAnimator" />
+        <s-text-button text="恢复10参动画" @onButtonClicked="resumeAnimator" />
+        <s-text-button text="取消10参动画" @onButtonClicked="cancelAnimator" />
+      </div>
+      <qt-animation ref="animationViewRef" class="animation-view-css">
+        <div class="animation-inner-view-css" />
+      </qt-animation>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { useESRouter } from "@extscreen/es3-router";
+import {
+  QTAnimationPropertyName,
+  QTAnimationValueType,
+} from "@quicktvui/quicktvui3";
+import type { QTIAnimation } from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "ScaleAnimation",
+  emits: [],
+  setup() {
+    const animationViewRef = ref<QTIAnimation>();
+    const router = useESRouter();
+
+    function initTwo() {
+      animationViewRef.value?.animator(
+        "2", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_X,
+        [0, 1.5],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationViewRef.value?.start("2");
+    }
+
+    function initThree() {
+      animationViewRef.value?.animator(
+        "3", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_X,
+        [0, 1.5, 2],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationViewRef.value?.start("3");
+    }
+
+    function initFour() {
+      animationViewRef.value?.animator(
+        "4", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_X,
+        [0, 1.5, 2, 0.3],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationViewRef.value?.start("4");
+    }
+
+    function initN() {
+      animationViewRef.value?.animator(
+        "n", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_X,
+        [0, 1.5, 2, 0.3, 0, 1, 0, 1.5, 2, 0.3],
+        10000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationViewRef.value?.start("n");
+    }
+
+    function startAnimatorDelay() {
+      animationViewRef.value?.animator(
+        "5", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_SCALE_X,
+        [0, 1.5, 2, 0.3, 0],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationViewRef.value?.startDelay("5", 2000);
+    }
+
+    function reverseAnimator() {
+      animationViewRef.value?.reverse("n");
+    }
+
+    function pauseAnimator() {
+      animationViewRef.value?.pause("n");
+    }
+
+    function resumeAnimator() {
+      animationViewRef.value?.resume("n");
+    }
+
+    function cancelAnimator() {
+      animationViewRef.value?.cancel("n");
+    }
+
+    function resetAnimators() {
+      animationViewRef.value?.reset();
+    }
+
+    function onBackPressed() {
+      resetAnimators();
+      router.back();
+    }
+
+    return {
+      animationViewRef,
+      initTwo,
+      initThree,
+      initFour,
+      initN,
+      startAnimatorDelay,
+      reverseAnimator,
+      pauseAnimator,
+      resumeAnimator,
+      cancelAnimator,
+      resetAnimators,
+      onBackPressed,
+    };
+  },
+});
+</script>
+
+<style src="./css/qt-animation-css.css"></style>

package/rules/.docs/examples/component/animation/translation-props.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="true">
+    <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"
+      :clipChildren="true"
+      style="height: 1080px"
+    >
+      <div class="es-sdk-content-row-css">
+        <s-text-button text="创建并开始2参动画" @onButtonClicked="initTwo" />
+        <s-text-button text="创建并开始3参动画" @onButtonClicked="initThree" />
+        <s-text-button text="创建并开始4参动画" @onButtonClicked="initFour" />
+      </div>
+      <div class="es-sdk-content-row-css">
+        <s-text-button text="创建并开始10参动画" @onButtonClicked="initN" />
+        <s-text-button text="反转10参动画" @onButtonClicked="reverseAnimator" />
+        <s-text-button text="暂停10参动画" @onButtonClicked="pauseAnimator" />
+        <s-text-button text="恢复10参动画" @onButtonClicked="resumeAnimator" />
+        <s-text-button text="取消10参动画" @onButtonClicked="cancelAnimator" />
+      </div>
+      <qt-animation
+        ref="animationView"
+        class="animation-view-css"
+        autoPlay
+        :animator="animator"
+      >
+        <div class="animation-inner-view-css" />
+      </qt-animation>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { useESRouter } from "@extscreen/es3-router";
+import {
+  QTAnimationPropertyName,
+  QTAnimationType,
+  QTAnimationValueType,
+} from "@quicktvui/quicktvui3";
+import type { QTAnimator, QTIAnimation } from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "Translation（props）",
+  emits: [],
+  setup() {
+    const animationView = ref<QTIAnimation>();
+    const router = useESRouter();
+    const animator = ref<QTAnimator>();
+
+    function initTwo() {
+      animator.value = {
+        type: QTAnimationType.TRANSLATION_X,
+        values: [0, 300],
+        duration: 1000,
+      };
+    }
+
+    function initThree() {
+      animator.value = {
+        type: QTAnimationType.TRANSLATION_X,
+        values: [0, 300, 60],
+        duration: 1000,
+      };
+    }
+
+    function initFour() {
+      animator.value = {
+        type: QTAnimationType.TRANSLATION_X,
+        values: [0, 300, 60, -60],
+        duration: 1000,
+      };
+    }
+
+    function initN() {
+      animator.value = {
+        type: QTAnimationType.TRANSLATION_X,
+        values: [0, 300, 60, -60, 60, 0, 800, 60, -600, 60],
+        duration: 10000,
+      };
+    }
+
+    function reverseAnimator() {
+      animationView.value?.reverse();
+    }
+
+    function pauseAnimator() {
+      animationView.value?.pause();
+    }
+
+    function resumeAnimator() {
+      animationView.value?.resume();
+    }
+
+    function cancelAnimator() {
+      animationView.value?.cancel();
+    }
+
+    function resetAnimators() {
+      animationView.value?.reset();
+    }
+
+    function onBackPressed() {
+      resetAnimators();
+      router.back();
+    }
+
+    return {
+      animationView,
+      animator,
+      initTwo,
+      initThree,
+      initFour,
+      initN,
+      reverseAnimator,
+      pauseAnimator,
+      resumeAnimator,
+      cancelAnimator,
+      resetAnimators,
+      onBackPressed,
+    };
+  },
+});
+</script>
+
+<style src="./css/qt-animation-css.css"></style>

package/rules/.docs/examples/component/animation/translation.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="true">
+    <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"
+      :clipChildren="true"
+      style="height: 1080px"
+    >
+      <div class="es-sdk-content-row-css">
+        <s-text-button text="创建并开始2参动画" @onButtonClicked="initTwo" />
+        <s-text-button text="创建并开始3参动画" @onButtonClicked="initThree" />
+        <s-text-button text="创建并开始4参动画" @onButtonClicked="initFour" />
+        <s-text-button
+          text="延迟2s开始5参动画"
+          @onButtonClicked="startAnimatorDelay"
+        />
+        <s-text-button text="重置所有动画" @onButtonClicked="resetAnimators" />
+      </div>
+      <div class="es-sdk-content-row-css">
+        <s-text-button text="创建并开始10参动画" @onButtonClicked="initN" />
+        <s-text-button text="反转10参动画" @onButtonClicked="reverseAnimator" />
+        <s-text-button text="暂停10参动画" @onButtonClicked="pauseAnimator" />
+        <s-text-button text="恢复10参动画" @onButtonClicked="resumeAnimator" />
+        <s-text-button text="取消10参动画" @onButtonClicked="cancelAnimator" />
+      </div>
+      <qt-animation ref="animationViewRef" class="animation-view-css">
+        <div class="animation-inner-view-css" />
+      </qt-animation>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { useESRouter } from "@extscreen/es3-router";
+import {
+  QTAnimationPropertyName,
+  QTAnimationValueType,
+} from "@quicktvui/quicktvui3";
+import type { QTIAnimation } from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "TranslationAnimation",
+  emits: [],
+  setup() {
+    const animationViewRef = ref<QTIAnimation>();
+    const router = useESRouter();
+
+    function initTwo() {
+      animationViewRef.value?.animator(
+        "2", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
+        [0, 300],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationViewRef.value?.start("2");
+    }
+
+    function initThree() {
+      animationViewRef.value?.animator(
+        "3", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
+        [0, 300, 60],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationViewRef.value?.start("3");
+    }
+
+    function initFour() {
+      animationViewRef.value?.animator(
+        "4", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
+        [0, 300, 60, -60],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationViewRef.value?.start("4");
+    }
+
+    function initN() {
+      animationViewRef.value?.animator(
+        "n", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
+        [0, 300, 60, -60, 60, 0, 800, 60, -600, 60],
+        10000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationViewRef.value?.start("n");
+    }
+
+    function startAnimatorDelay() {
+      animationViewRef.value?.animator(
+        "5", //自定义id
+        QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+        QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
+        [0, 300, 60, -60, 60],
+        1000,
+        -1,
+        0,
+        false,
+        false,
+      );
+      animationViewRef.value?.startDelay("5", 2000);
+    }
+
+    function reverseAnimator() {
+      animationViewRef.value?.reverse("n");
+    }
+
+    function pauseAnimator() {
+      animationViewRef.value?.pause("n");
+    }
+
+    function resumeAnimator() {
+      animationViewRef.value?.resume("n");
+    }
+
+    function cancelAnimator() {
+      animationViewRef.value?.cancel("n");
+    }
+
+    function resetAnimators() {
+      animationViewRef.value?.reset();
+    }
+
+    function onBackPressed() {
+      resetAnimators();
+      router.back();
+    }
+
+    return {
+      animationViewRef,
+      initTwo,
+      initThree,
+      initFour,
+      initN,
+      startAnimatorDelay,
+      reverseAnimator,
+      pauseAnimator,
+      resumeAnimator,
+      cancelAnimator,
+      resetAnimators,
+      onBackPressed,
+    };
+  },
+});
+</script>
+
+<style src="./css/qt-animation-css.css"></style>

package/rules/.docs/examples/component/aside/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="QTAside" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-container>
+      <qt-aside>
+        <span class="container-name-css">Aside</span>
+      </qt-aside>
+    </qt-container>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "QTAside",
+  emits: [],
+  setup(props, context) {
+    return {};
+  },
+});
+</script>
+
+<style>
+.qt-aside {
+  background-color: #daecfe;
+}
+
+.container-name-css {
+  color: black;
+  font-size: 30px;
+}
+</style>