@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/button/custom-text.vue

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    // ...
+  },
+});
+</script>
+
+<template>
+  <qt-button
+    size="medium"
+    disabled
+    text="自定义文字样式"
+    :textStyle="{
+      width: '100px',
+      backgroundColor: '#FF8022',
+      fontSize: '20px',
+    }"
+    class="text-button-class"
+  />
+</template>

package/rules/.docs/examples/component/button/disabled.vue

@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    // ...
+  },
+});
+</script>
+
+<template>
+  <qt-button disabled text="不可用" />
+</template>

package/rules/.docs/examples/component/button/round.vue

@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    // ...
+  },
+});
+</script>
+
+<template>
+  <qt-button round text="圆角" class="text-button-class" />
+</template>

package/rules/.docs/examples/component/button/size.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    // ...
+  },
+});
+</script>
+
+<template>
+  <qt-button size="mini" class="text-button-class" text="超小" />
+  <qt-button size="small" class="text-button-class" text="小" />
+  <qt-button size="medium" class="text-button-class" text="中" />
+  <qt-button size="large" class="text-button-class" text="大" />
+</template>

package/rules/.docs/examples/component/button/square.vue

@@ -0,0 +1,13 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    // ...
+  },
+});
+</script>
+
+<template>
+  <qt-button square text="正方形" class="text-button-class" />
+</template>

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

@@ -0,0 +1,97 @@
+<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-checkbox-group
+        ref="checkbox"
+        :orientation="0"
+        :clipChildren="false"
+        class="item-checkbox-group-view-css"
+        @onCheckedChanged="onCheckedChanged"
+      >
+        <qt-checkbox
+          class="item-checkbox-button-view-css"
+          :enableFocusBorder="true"
+          :enableFocusBackground="true"
+          :focusable="true"
+          :checked="true"
+          :viewId="1"
+          :clipChildren="false"
+          :value="1"
+          :fill="'#409eff'"
+          :textColor="'#f6e707'"
+          :padding="8"
+          :drawablePadding="8"
+          :defaultDrawable="defaultDrawable"
+          :selectDrawable="selectDrawable"
+          :focusDrawable="focusDrawable"
+          :focusBackground="'#ffffff'"
+        />
+        <qt-checkbox
+          class="item-checkbox-button-view-css"
+          :enableFocusBorder="true"
+          :enableFocusBackground="true"
+          :focusable="false"
+          :clipChildren="false"
+          :viewId="6"
+          :value="6"
+          :fill="'#333eee'"
+          :textColor="'#f6e707'"
+          :padding="8"
+          :drawablePadding="8"
+          :drawableSize="48"
+          :disabled="true"
+          :disabledDrawable="selectDrawable"
+        />
+      </qt-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+import defaultDrawable from "../../assets/ic_checkbox_default.png";
+import selectDrawable from "../../assets/ic_checkbox_checked.png";
+import focusDrawable from "../../assets/ic_checkbox_focus.png";
+const TAG = "Checkbox";
+
+export default defineComponent({
+  name: "多选-横向",
+  setup() {
+    function onCheckedChanged(evt: Array<any>): void {
+      console.log("当前选中value---------->", evt);
+    }
+
+    return {
+      defaultDrawable,
+      selectDrawable,
+      focusDrawable,
+      onCheckedChanged,
+    };
+  },
+});
+</script>
+
+<style>
+.item-checkbox-group-view-css {
+  position: absolute;
+  width: 1200px;
+  height: 200px;
+  background-color: transparent;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.item-checkbox-button-view-css {
+  width: 200px;
+  height: 100px;
+  background-color: transparent;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+</style>

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

@@ -0,0 +1,156 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="收缩" @onButtonClicked="onCollapseButtonClicked" />
+      <s-text-button text="展开" @onButtonClicked="onExpandButtonClicked" />
+      <s-text-button text="展开第一个" @onButtonClicked="onOneButtonClicked" />
+      <s-text-button text="展开第二个" @onButtonClicked="onTwoButtonClicked" />
+      <s-text-button
+        text="展开第三个"
+        @onButtonClicked="onThreeButtonClicked"
+      />
+      <s-text-button text="展开第四个" @onButtonClicked="onFourButtonClicked" />
+      <s-text-button
+        text="调用第一个Item的方法"
+        @onButtonClicked="onCallButtonClicked"
+      />
+    </div>
+    <qt-collapse
+      ref="collapseRef"
+      class="qt-collapse-css"
+      @onCollapseItemExpand="onCollapseItemExpand"
+    >
+      <qt-collapse-item-green
+        @onCollapseItemGreenExpand="onCollapseItemGreenExpand"
+      />
+      <qt-collapse-item-purple />
+      <qt-collapse-item-red />
+      <qt-collapse-item-yellow />
+    </qt-collapse>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+import QTCollapseItemGreen from "./item/qt-collapse-item-green.vue";
+import QTCollapseItemPurple from "./item/qt-collapse-item-purple.vue";
+import QTCollapseItemRed from "./item/qt-collapse-item-red.vue";
+import QTCollapseItemYellow from "./item/qt-collapse-item-yellow.vue";
+import type { QTGreenCollapseItem } from "./item/QTGreenCollapseItem";
+import type {
+  QTCollapse,
+  QTCollapseItem,
+  QTICollapse,
+} from "@quicktvui/quicktvui3";
+
+const TAG = "QTCollapsePage";
+
+export default defineComponent({
+  name: "使用初探",
+  components: {
+    "qt-collapse-item-green": QTCollapseItemGreen,
+    "qt-collapse-item-purple": QTCollapseItemPurple,
+    "qt-collapse-item-red": QTCollapseItemRed,
+    "qt-collapse-item-yellow": QTCollapseItemYellow,
+  },
+  setup() {
+    const collapseRef = ref<QTICollapse>();
+    const log = useESLog();
+
+    function onESCreate() {
+      const collapse: QTCollapse = {
+        width: 1920,
+        height: 1000,
+        defaultIndex: 2, //默认0
+        expandDuration: 200, //默认200
+        itemList: [
+          {
+            height: 200,
+            collapseHeight: 150,
+          },
+          {
+            height: 300,
+            collapseHeight: 250,
+          },
+          {
+            height: 200,
+            collapseHeight: 150,
+          },
+          {
+            height: 100,
+            collapseHeight: 50,
+          },
+        ],
+      };
+      collapseRef.value?.init(collapse);
+    }
+
+    function onCollapseItemExpand(index: number, item: QTCollapseItem) {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, "-------onCollapseItemExpand------->>>>", item, index);
+      }
+    }
+
+    function onCollapseItemGreenExpand(value) {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, "-------onCollapseItemGreenExpand------>>>>", value);
+      }
+    }
+
+    function onCollapseButtonClicked() {
+      collapseRef.value?.collapse();
+    }
+
+    function onExpandButtonClicked() {
+      collapseRef.value?.expand();
+    }
+
+    function onOneButtonClicked() {
+      collapseRef.value?.expandItem(0);
+    }
+
+    function onTwoButtonClicked() {
+      collapseRef.value?.expandItem(1);
+    }
+
+    function onThreeButtonClicked() {
+      collapseRef.value?.expandItem(2);
+    }
+
+    function onFourButtonClicked() {
+      collapseRef.value?.expandItem(3);
+    }
+
+    function onCallButtonClicked() {
+      const item = collapseRef.value?.getItem(0) as QTGreenCollapseItem;
+      item.showText("Hello world!");
+    }
+
+    return {
+      collapseRef,
+      onESCreate,
+      onOneButtonClicked,
+      onTwoButtonClicked,
+      onThreeButtonClicked,
+      onFourButtonClicked,
+      onCollapseItemExpand,
+      onCollapseItemGreenExpand,
+      onCallButtonClicked,
+      onCollapseButtonClicked,
+      onExpandButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-collapse-css {
+  width: 1920px;
+  height: 800px;
+  position: absolute;
+  bottom: 0;
+  background-color: palevioletred;
+}
+</style>

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

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

package/rules/.docs/examples/component/container/layout-ahm.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <qt-container>
+      <qt-aside>
+        <span class="container-name-css">Aside</span>
+      </qt-aside>
+      <qt-container>
+        <qt-header>
+          <span class="container-name-css">Header</span>
+        </qt-header>
+        <qt-main>
+          <span class="container-name-css">Main</span>
+        </qt-main>
+      </qt-container>
+    </qt-container>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "QTContainerAHM",
+});
+</script>
+
+<style>
+.qt-header {
+  background-color: #c7e2fe;
+}
+
+.qt-main {
+  background-color: #ecf5ff;
+}
+
+.qt-aside {
+  background-color: #daecfe;
+}
+
+.qt-footer {
+  background-color: #c7e2fe;
+}
+
+.container-name-css {
+  color: black;
+  font-size: 30px;
+}
+</style>

package/rules/.docs/examples/component/container/layout-ahmf.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <qt-container>
+      <qt-aside>
+        <span class="container-name-css">Aside</span>
+      </qt-aside>
+      <qt-container>
+        <qt-header>
+          <span class="container-name-css">Header</span>
+        </qt-header>
+        <qt-main>
+          <span class="container-name-css">Main</span>
+        </qt-main>
+        <qt-footer>
+          <span class="container-name-css">Footer</span>
+        </qt-footer>
+      </qt-container>
+    </qt-container>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "QTContainerAHMF",
+});
+</script>
+
+<style>
+.qt-header {
+  background-color: #c7e2fe;
+}
+
+.qt-main {
+  background-color: #ecf5ff;
+}
+
+.qt-aside {
+  background-color: #daecfe;
+}
+
+.qt-footer {
+  background-color: #c7e2fe;
+}
+
+.container-name-css {
+  color: black;
+  font-size: 30px;
+}
+</style>

package/rules/.docs/examples/component/container/layout-am.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <qt-container>
+      <qt-aside>
+        <span class="container-name-css">Aside</span>
+      </qt-aside>
+      <qt-main>
+        <span class="container-name-css">Main</span>
+      </qt-main>
+    </qt-container>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "QTContainerAM",
+});
+</script>
+
+<style>
+.qt-header {
+  background-color: #c7e2fe;
+}
+
+.qt-main {
+  background-color: #ecf5ff;
+}
+
+.qt-aside {
+  background-color: #daecfe;
+}
+
+.qt-footer {
+  background-color: #c7e2fe;
+}
+
+.container-name-css {
+  color: black;
+  font-size: 30px;
+}
+</style>

package/rules/.docs/examples/component/container/layout-ham.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <qt-container>
+      <qt-header>
+        <span class="container-name-css">Header</span>
+      </qt-header>
+      <qt-container>
+        <qt-aside>
+          <span class="container-name-css">Aside</span>
+        </qt-aside>
+        <qt-main>
+          <span class="container-name-css">Main</span>
+        </qt-main>
+      </qt-container>
+    </qt-container>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "QTContainerHAM",
+});
+</script>
+
+<style>
+.qt-header {
+  background-color: #c7e2fe;
+}
+
+.qt-main {
+  background-color: #ecf5ff;
+}
+
+.qt-aside {
+  background-color: #daecfe;
+}
+
+.qt-footer {
+  background-color: #c7e2fe;
+}
+
+.container-name-css {
+  color: black;
+  font-size: 30px;
+}
+</style>

package/rules/.docs/examples/component/container/layout-hamf.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <qt-container>
+      <qt-header>
+        <span class="container-name-css">Header</span>
+      </qt-header>
+      <qt-container>
+        <qt-aside>
+          <span class="container-name-css">Aside</span>
+        </qt-aside>
+        <qt-container>
+          <qt-main>
+            <span class="container-name-css">Main</span>
+          </qt-main>
+          <qt-footer>
+            <span class="container-name-css">Footer</span>
+          </qt-footer>
+        </qt-container>
+      </qt-container>
+    </qt-container>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "QTContainerHAMF",
+});
+</script>
+
+<style>
+.qt-header {
+  background-color: #c7e2fe;
+}
+
+.qt-main {
+  background-color: #ecf5ff;
+}
+
+.qt-aside {
+  background-color: #daecfe;
+}
+
+.qt-footer {
+  background-color: #c7e2fe;
+}
+
+.container-name-css {
+  color: black;
+  font-size: 30px;
+}
+</style>

package/rules/.docs/examples/component/container/layout-hm.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <qt-container>
+      <qt-header>
+        <span class="container-name-css">Header</span>
+      </qt-header>
+      <qt-main>
+        <span class="container-name-css">Main</span>
+      </qt-main>
+    </qt-container>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "QTContainerHM",
+});
+</script>
+
+<style>
+.qt-header {
+  background-color: #c7e2fe;
+}
+
+.qt-main {
+  background-color: #ecf5ff;
+}
+
+.qt-aside {
+  background-color: #daecfe;
+}
+
+.qt-footer {
+  background-color: #c7e2fe;
+}
+
+.container-name-css {
+  color: black;
+  font-size: 30px;
+}
+</style>

package/rules/.docs/examples/component/container/layout-hmf.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="es-sdk-root-css" :clipChildren="false">
+    <qt-container>
+      <qt-header>
+        <span class="container-name-css">Header</span>
+      </qt-header>
+      <qt-main>
+        <span class="container-name-css">Main</span>
+      </qt-main>
+      <qt-footer>
+        <span class="container-name-css">Footer</span>
+      </qt-footer>
+    </qt-container>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "QTContainerHMF",
+});
+</script>
+
+<style>
+.qt-header {
+  background-color: #c7e2fe;
+}
+
+.qt-main {
+  background-color: #ecf5ff;
+}
+
+.qt-aside {
+  background-color: #daecfe;
+}
+
+.qt-footer {
+  background-color: #c7e2fe;
+}
+
+.container-name-css {
+  color: black;
+  font-size: 30px;
+}
+</style>