btxui 1.0.1

package/pages/example/base_wid/b_text_demo.vue

@@ -0,0 +1,36 @@
+<template>
+    <article>
+        <header-info v-bind="introduce" />
+
+        <!--标记文本样式-->
+        <section>
+            <h5>标记文本样式</h5>
+            <p>【exp】：</p>
+            <b-view>
+                <b-view>If you were a teardrop;<b-text class="bg-color-blue color-light">In my eye,For fear of losing you,I would never cry.</b-text>And if the golden sun,Should cease to shine its light,<b-text class="bold">Just one smile from you,Would make my whole world bright.</b-text></b-view>
+                <b-view class="mrg-t-1">如果你是我眼里的一滴泪，<b-text class="color-blue">为了不失去你，我将永不哭泣；</b-text>如果金色的阳光停止了它耀眼的光芒，<b-text class="color-sub">你的一个微笑，将照亮我的整个世界。</b-text></b-view>
+            </b-view>
+            <pre ref="$code" class="lang-html round-md pad-v-1 mrg-t-2 auto-scroll" v-html="exp1"></pre>
+        </section>
+    </article>
+</template>
+
+<script setup lang="ts">
+    import BView from "@/components/BTXUI/core/b-view/index.vue"
+    import BText from "@/components/BTXUI/core/b-text/index.vue"
+    import introduce from "@/components/BTXUI/core/b-text/doc"
+    import hljs from "highlight.js"
+
+    const $code = ref();
+
+    const exp1 = `
+    <b-view>
+        <b-view>If you were a teardrop;<b-text class="bg-color-blue color-light">In my eye,For fear of losing you,I would never cry.</b-text>And if the golden sun,Should cease to shine its light,<b-text class="bold">Just one smile from you,Would make my whole world bright.</b-text></b-view>
+        <b-view class="mrg-t-1">如果你是我眼里的一滴泪，<b-text class="color-blue">为了不失去你，我将永不哭泣；</b-text>如果金色的阳光停止了它耀眼的光芒，<b-text class="color-sub">你的一个微笑，将照亮我的整个世界。</b-text></b-view>
+    </b-view>`.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    
+
+    onMounted(() => {
+        hljs.highlightElement($code.value);
+    })
+</script>

package/pages/example/base_wid/b_textarea_demo.vue

@@ -0,0 +1,64 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <section>
+            <h5>基础使用</h5>
+            <p>通过 <code>rows</code> 属性可设置文本输入框最大行数。<code>to_html</code> 方法则可以将换行符转换为 html &lt;br&gt; 标签。</p>
+            <div class="resize">
+                <b-textarea ref="textarea" styles="pad-1 bg-color-lgray line line-#ddd thick-1 round-sm" v-bind="data_1.props" v-model="data_1.val" />
+                <p class="flex">
+                    <btn-wid @on_click="$_trans_html1" btnText="获取当前输入内容" />
+                </p>
+            </div>
+            <p>
+                <code v-if="data_1.html_str" v-html="data_1.html_str"></code>
+                <span v-else class="alpha-d5">暂无内容</span>
+            </p>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import BTextarea from "@/components/BTXUI/core/b-textarea"
+    import BtnWid from "@/components/BTXUI/btn/btn-wid"
+
+    export default {
+        name: "b_textarea_demo",
+        components: {
+            HeaderInfo,
+            BTextarea,
+            BtnWid
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: BTextarea.name,
+                    ...BTextarea.introduce,
+                },
+
+                data_1: {
+                    props: {
+                        name: "uname",
+                        placeholder: "开始编辑您的个人博客...",
+                        rows: 6
+                    },
+                    val: "",
+                    html_str: ""
+                }
+
+            }
+        },
+        methods: {
+
+            $_trans_html1(){
+                this.data_1.html_str = this.$refs.textarea.to_html();
+            }
+
+        }
+    }
+</script>

package/pages/example/base_wid/b_video_demo.vue

@@ -0,0 +1,42 @@
+<template>
+    <article>
+        <header-info v-bind="header_info" />
+
+        <!--基础使用-->
+        <section>
+            <h5>基础使用</h5>
+            <p>通过 <code>video</code> 属性绑定视频资源即可显示。</p>
+            <p>
+                <b-video v-bind="data_1" />
+            </p>
+        </section>
+    </article>
+</template>
+
+<script>
+    import HeaderInfo from "@/components/header-info"
+    import BVideo from "@/components/BTXUI/core/b-video"
+
+    export default {
+        name: "b_video_demo",
+        components: {
+            HeaderInfo,
+            BVideo
+        },
+        data(){
+            return {
+
+                //初始化入参
+                header_info: {
+                    name: BVideo.name,
+                    ...BVideo.introduce,
+                },
+
+                data_1: {
+                    video: "https://cdn.modao.cc/video/cf/0715/new_design.mp4"
+                }
+
+            }
+        }
+    }
+</script>

package/pages/example/base_wid/b_view_demo.vue

@@ -0,0 +1,36 @@
+<template>
+    <article>
+        <header-info v-bind="introduce" />
+
+        <!--设置背景图-->
+        <section>
+            <h5>设置背景图</h5>
+            <p>通过 <code>bgImg</code> 属性可设置背景图，之后可通过背景图相关 class 属性进行其它样式化处理。</p>
+            <p>【exp】：</p>
+            <b-view class="flex">
+                <b-view class="w-10 h-10 round-md mrg-r-9 bg-size-cover" bg-img="/img/head.jpg"></b-view>
+                <b-view class="w-10 h-10 round-md bg-size-cover" bg-img="/img/head2.jpg"></b-view>
+            </b-view>
+            <pre ref="$code" class="lang-html round-md pad-v-1 mrg-t-2 auto-scroll" v-html="exp1"></pre>
+        </section>
+
+    </article>
+</template>
+
+<script setup lang="ts">
+    import BView from "@/components/BTXUI/core/b-view/index.vue"
+    import introduce from "@/components/BTXUI/core/b-view/doc"
+    import hljs from "highlight.js"
+
+    const $code = ref();
+
+    const exp1 = `
+    &lt;b-view class="flex"&gt;
+        &lt;b-view class="w-10 h-10 round-md mrg-r-9 bg-size-cover" bg-img="/img/head.jpg"&gt;&lt;b-view&gt;
+        &lt;b-view class="w-10 h-10 round-md bg-size-cover" bg-img="/img/head2.jpg"&gt;&lt;b-view&gt;
+    &lt;/b-view&gt;`;
+
+    onMounted(() => {
+        hljs.highlightElement($code.value);
+    })
+</script>

package/pages/example/base_wid/index.js

@@ -0,0 +1,76 @@
+//基础组件
+import b_style_demo from './b_style_demo'
+import b_view_demo from './b_view_demo'
+import b_video_demo from './b_video_demo'
+import b_text_demo from './b_text_demo'
+import b_hot_demo from './b_hot_demo'
+import b_img_demo from './b_img_demo'
+import b_icon_demo from './b_icon_demo'
+import b_input_demo from './b_input_demo'
+import b_textarea_demo from './b_textarea_demo'
+import b_list_demo from './b_list_demo'
+import b_grid_demo from './b_grid_demo'
+import b_drag_demo from './b_drag_demo'
+
+export default [
+    {
+        path: '/b_style_demo',
+        component: b_style_demo,
+        text: "<b>b-style</b> 样式机制"
+    },
+    {
+        path: '/b_view_demo',
+        component: b_view_demo,
+        text: "<b>b-view</b> 基础布局"
+    },
+    {
+        path: '/b_grid_demo',
+        component: b_grid_demo,
+        text: "<b>b-grid</b> 栅格布局"
+    },
+    {
+        path: '/b_video_demo',
+        component: b_video_demo,
+        text: "<b>b-video</b> 视频媒体"
+    },
+    {
+        path: '/b_text_demo',
+        component: b_text_demo,
+        text: "<b>b-text</b> 文字区域"
+    },
+    {
+        path: '/b_hot_demo',
+        component: b_hot_demo,
+        text: "<b>b-hot</b> 热点区域"
+    },
+    {
+        path: '/b_img_demo',
+        component: b_img_demo,
+        text: "<b>b-img</b> 图像"
+    },
+    {
+        path: '/b_icon_demo',
+        component: b_icon_demo,
+        text: "<b>b-icon</b> 图标"
+    },
+    {
+        path: '/b_input_demo',
+        component: b_input_demo,
+        text: "<b>b-input</b> 表单输入"
+    },
+    {
+        path: '/b_textarea_demo',
+        component: b_textarea_demo,
+        text: "<b>b-textarea</b> 文字域输入"
+    },
+    {
+        path: '/b_list_demo',
+        component: b_list_demo,
+        text: "<b>b-list</b> 滚动列表"
+    },
+    {
+        path: '/b_drag_demo',
+        component: b_drag_demo,
+        text: "<b>b-drag</b> 拖拽元素"
+    }
+]

package/pages/example/content.js

@@ -0,0 +1,49 @@
+import global_style from './global_style'                //全局样式
+import base_widget from './base_wid'                     //基础组件
+import app_widget from './app_wid'                       //应用组件
+
+const set_content = (data)=>{
+    return data.map((item)=>{
+        return {
+            id: item.path,
+            text: item.text
+        }
+    })
+}
+
+export default [
+    {
+        id: "/download",
+        text: "<b>下载及安装</b>"
+    },
+    {
+        id: "/start",
+        text: "<b>起步</b>"
+    },
+    {
+        id: "a",
+        text: "<b>全局样式</b>",
+        children: set_content(global_style)
+    },
+    {
+        id: "b",
+        text: "<b>主题组件</b>",
+        children: [
+            {
+                id: "/level_widget",
+                text: "Level 主题 UI 库"
+            }
+        ]
+    },
+    {
+        id: "c",
+        text: "<b>基础组件</b>",
+        children: set_content(base_widget)
+    },
+    {
+        id: "e",
+        text: "<b>应用组件</b>",
+        children: set_content(app_widget),
+        spread: true
+    }
+]

package/pages/example/global_style/animation.vue

@@ -0,0 +1,197 @@
+<template>
+    <article>
+        <p>BTX·UI 提供了多种常用 animation 及 transition 动画效果。</p>
+        <p></p>
+
+        <!-- 过渡动画（transition） -->
+        <h5>过渡动画（transition）</h5>
+        <table class="table">
+            <thead>
+            <tr>
+                <th>样式类</th>
+                <th>效果</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td>
+                    <code>.trans</code>
+                </td>
+                <td>中速过度动画（.7s）</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.trans-fast</code>
+                </td>
+                <td>快速过度动画（.4s）</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.trans-slow</code>
+                </td>
+                <td>慢速过度动画（1.4s）</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.trans-no</code>
+                </td>
+                <td>无过度动画</td>
+            </tr>
+            </tbody>
+        </table>
+        <p></p>
+        <p>
+            通过
+            <code>.trans-delay-*</code> 可以设置过渡动画延迟执行时间，预置的延时值：0.1 — 1、1.5、2、2.5、3、3.5、4、4.5、5、5.5，单位 s。数值 "." 使用 "d" 代替，"0" 使用 "" 空字符串代替。比如 0.5 s 延时，类名为
+            <code>.trans-delay-d5</code>。
+        </p>
+        <p></p>
+
+        <!-- 动画（animation） -->
+        <h5>动画（animation）</h5>
+        <p>
+            框架预置了多种常用 animation 动画效果。通过
+            <code>.ani-delay-*</code> 可以设置动画延迟执行时间，预置的延时值：0.1 — 0.9、1 — 10，单位 s。
+        </p>
+        <p>
+            通过
+            <code>.ani-mode-*</code> 可以设置动画 animation-fill-mode 样式，包括："forwards"、"backwards"、"both" 3 项值。
+        </p>
+        <p>
+            此外
+            <code>.ani-loop-*</code> 样式类可以设置动画迭代次数，预置的次数为：1 — 6。
+            <code>.ani-loop</code> 为无限循环。
+        </p>
+        <table class="table">
+            <thead>
+            <tr>
+                <th>预置样式类</th>
+                <th>效果</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td>
+                    <code>.ani-fade-in</code>
+                </td>
+                <td>淡入动画</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-fade-out</code>
+                </td>
+                <td>淡出动画</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-scale-fade-in</code>
+                </td>
+                <td>缩放式淡入动画</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-scale-fade-out</code>
+                </td>
+                <td>放缩式淡出动画</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-v-stretch-h-in</code>
+                </td>
+                <td>先垂直后水平伸展式动画</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-h-stretch-v-in</code>
+                </td>
+                <td>先水平后垂直伸展式动画</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-left-to-right</code>
+                </td>
+                <td>由左向右滑动动画</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-right-to-left</code>
+                </td>
+                <td>由右向左滑动动画</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-top-to-bottom</code>
+                </td>
+                <td>由上向下滑动动画</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-bottom-to-top</code>
+                </td>
+                <td>由下向上滑动动画</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-rotate</code>
+                </td>
+                <td>旋转 360 度动画</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-rotate-half</code>
+                </td>
+                <td>旋转 180 度动画</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-rotate-90</code>
+                </td>
+                <td>旋转 90 度动画</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-rotate-45</code>
+                </td>
+                <td>旋转 45 度动画</td>
+            </tr>
+            </tbody>
+        </table>
+        <p></p>
+        <p>animation 同过渡动画一样，具备相同的 3 项动画持续时间设置。框架预置的动画效果默认采用中速动画。</p>
+        <table class="table">
+            <thead>
+            <tr>
+                <th>样式类</th>
+                <th>效果</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td>
+                    <code>.ani</code>
+                </td>
+                <td>中速动画（.7s）</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-fast</code>
+                </td>
+                <td>快速动画（.4s）</td>
+            </tr>
+            <tr>
+                <td>
+                    <code>.ani-slow</code>
+                </td>
+                <td>慢速动画（1.4s）</td>
+            </tr>
+            </tbody>
+        </table>
+
+    </article>
+</template>
+
+<script>
+export default {
+    name: "animation"
+};
+</script>

package/pages/example/global_style/color.vue

@@ -0,0 +1,134 @@
+<template>
+  <article>
+      <p>BTX·UI 预置了基于 Level 的色彩主题。</p>
+      <p></p>
+
+      <!-- 主题色 -->
+      <section>
+          <h5>主题色（theme color）</h5>
+          <p>主题色包括标准色、辅助色、灰阶、常用彩色、中性色 5 部分。此外还有特殊值 none 可用于设置全透明颜色。</p>
+          <table class="table">
+              <thead>
+              <tr>
+                  <th>样式类</th>
+                  <th>效果</th>
+              </tr>
+              </thead>
+              <tbody>
+              <tr>
+                  <td><code>.bg-color-*</code></td>
+                  <td>背景色</td>
+              </tr>
+              <tr>
+                  <td><code>.color-*</code></td>
+                  <td>文字色</td>
+              </tr>
+              <tr>
+                  <td><code>.line-*</code></td>
+                  <td>描边色</td>
+              </tr>
+              </tbody>
+          </table>
+          <p></p>
+          <p>标准色及辅助色：</p>
+          <div class="flex pcenter">
+              <div class="flex-5 flex-column mrg-r-5 mrg-r-3-s">
+                  <div class="w-4 h-4 round bg-color-main w-3-s h-3-s"></div>
+                  <p>邃蓝<br><span class="color-mgray fsize-d9">main</span><br><b class="fsize-d9">#051c24</b></p>
+              </div>
+              <div class="flex-5 flex-column">
+                  <div class="w-4 h-4 round bg-color-sub w-3-s h-3-s"></div>
+                  <p>锡金<br><span class="color-mgray fsize-d9">sub</span><br><b class="fsize-d9">#b4967a</b></p>
+              </div>
+          </div>
+          <p>灰阶色：</p>
+          <div class="flex pcenter">
+              <div class="mrg-r-7 flex-5 flex-column mrg-r-2d5-s mrg-l-1-s">
+                  <div class="w-4 h-4 round bg-color-light line-lgray thick-2 line w-2-s h-2-s"></div>
+                  <p>纯白<br><span class="color-mgray fsize-d9">light</span><br><b class="fsize-d9">#fff</b></p>
+              </div>
+              <div class="mrg-r-6 flex-5 flex-column mrg-r-1d5-s">
+                  <div class="w-4 h-4 round bg-color-lgray w-2-s h-2-s"></div>
+                  <p>浅灰<br><span class="color-mgray fsize-d9">lgray</span><br><b class="fsize-d9">#eee</b></p>
+              </div>
+              <div class="mrg-r-6 flex-5 flex-column mrg-r-1-s">
+                  <div class="w-4 h-4 round bg-color-mgray w-2-s h-2-s"></div>
+                  <p>中灰<br><span class="color-mgray fsize-d9">mgray</span><br><b class="fsize-d9">#a7a7a7</b></p>
+              </div>
+              <div class="mrg-r-6 flex-5 flex-column mrg-r-2-s">
+                  <div class="w-4 h-4 round bg-color-dgray w-2-s h-2-s"></div>
+                  <p>深灰<br><span class="color-mgray fsize-d9">dgray</span><br><b class="fsize-d9">#373737</b></p>
+              </div>
+              <div class="flex-5 flex-column">
+                  <div class="w-4 h-4 round bg-color-dark w-2-s h-2-s"></div>
+                  <p>纯黑<br><span class="color-mgray fsize-d9">dark</span><br><b class="fsize-d9">#111</b></p>
+              </div>
+          </div>
+          <p>常用彩色：</p>
+          <div class="flex pcenter">
+              <div class="mrg-r-5 flex-5 flex-column mrg-r-2-s">
+                  <div class="w-4 h-4 round bg-color-blue w-3-s h-3-s"></div>
+                  <p>湛蓝<br><span class="color-mgray fsize-d9">blue</span><br><b class="fsize-d9">#4085f3</b></p>
+              </div>
+              <div class="mrg-r-5 flex-5 flex-column mrg-r-2-s">
+                  <div class="w-4 h-4 round bg-color-green w-3-s h-3-s"></div>
+                  <p>青绿<br><span class="color-mgray fsize-d9">green</span><br><b class="fsize-d9">#02b9a1</b></p>
+              </div>
+              <div class="mrg-r-6 flex-5 flex-column rel l-4px mrg-r-2-s">
+                  <div class="w-4 h-4 round bg-color-yellow w-3-s h-3-s"></div>
+                  <p>橙黄<br><span class="color-mgray fsize-d9">yellow</span><br><b class="fsize-d9">#fdba00</b></p>
+              </div>
+              <div class="flex-5 flex-column rel l-5px">
+                  <div class="w-4 h-4 round bg-color-red w-3-s h-3-s"></div>
+                  <p>玫红<br><span class="color-mgray fsize-d9">red</span><br><b class="fsize-d9">#ec4334</b></p>
+              </div>
+          </div>
+          <p>中性色：</p>
+          <p>中性色 neutral 是基于 <code>rgba(134,134,134,.17)</code> 色彩模式的半透明灰色，可同时适用于深色及浅色背景，在框架中用于设置了分割线 <code>&lt;hr&gt;</code> 的颜色。</p>
+          <p></p>
+      </section>
+
+      <!-- 不透明度 -->
+      <section>
+          <h5>不透明度</h5>
+          <p>使用 <code>.alpha-*</code> 可以设置元素的不透明度，范围是 0 - 1 逐级不透明，1 为完全不透明，0 为全透明。全透明时其 visibility 属性为 hidden。数值 "." 使用 "d" 代替。比如 0.5，类名为<code>.alpha-d5</code>。</p>
+          <p>【示例】：</p>
+          <div class="grid pcenter">
+              <div class="col-4 pad-r-d5 pad-b-d5">
+                  <div class="bg-color-mgray alpha-d9 round-sm">alpha-d9</div>
+              </div>
+              <div class="col-4 pad-r-d5 pad-b-d5">
+                  <div class="bg-color-mgray alpha-d8 round-sm">alpha-d8</div>
+              </div>
+              <div class="col-4 pad-r-d5 pad-b-d5">
+                  <div class="bg-color-mgray alpha-d7 round-sm">alpha-d7</div>
+              </div>
+              <div class="col-4 pad-r-d5 pad-b-d5">
+                  <div class="bg-color-mgray alpha-d6 round-sm">alpha-d6</div>
+              </div>
+              <div class="col-4 pad-r-d5 pad-b-d5">
+                  <div class="bg-color-mgray alpha-d5 round-sm">alpha-d5</div>
+              </div>
+              <div class="col-4 pad-r-d5 pad-b-d5">
+                  <div class="bg-color-mgray alpha-d4 round-sm">alpha-d4</div>
+              </div>
+              <div class="col-4 pad-r-d5 pad-b-d5">
+                  <div class="bg-color-mgray alpha-d3 round-sm">alpha-d3</div>
+              </div>
+              <div class="col-4 pad-r-d5 pad-b-d5">
+                  <div class="bg-color-mgray alpha-d2 round-sm">alpha-d2</div>
+              </div>
+              <div class="col-4 pad-r-d5 pad-b-d5">
+                  <div class="bg-color-mgray alpha-d1 round-sm">alpha-d1</div>
+              </div>
+          </div>
+      </section>
+
+    </article>
+</template>
+
+<script>
+export default {
+  name: "color"
+};
+</script>