btxui 1.0.2 → 1.0.3

package/pages/example/base_wid/b_text_demo.vue

@@ -1,36 +0,0 @@
-<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

@@ -1,64 +0,0 @@
-<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

@@ -1,42 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-<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

@@ -1,76 +0,0 @@
-//基础组件
-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

@@ -1,49 +0,0 @@
-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

@@ -1,197 +0,0 @@
-<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

@@ -1,134 +0,0 @@
-<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>