btxui 1.0.2 → 1.0.3

package/pages/example/global_style/special.vue

@@ -1,37 +0,0 @@
-<template>
-  <article>
-      <p>BTX·UI 还预置了一些特殊样式。</p>
-      <table class="table">
-          <thead>
-          <tr>
-              <th>样式类</th>
-              <th>效果</th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr>
-              <td><code>.bg-none</code></td>
-              <td>背景点透效果</td>
-          </tr>
-          <tr>
-              <td><code>.bg-use</code></td>
-              <td>背景常规效果（非点透）</td>
-          </tr>
-          <tr>
-              <td><code>.touch-none</code></td>
-              <td>元素触控禁止</td>
-          </tr>
-          <tr>
-              <td><code>.select-none</code></td>
-              <td>元素长按选中禁止</td>
-          </tr>
-          </tbody>
-      </table>
-    </article>
-</template>
-
-<script>
-export default {
-  name: "special"
-};
-</script>

package/pages/example/global_style/table.vue

@@ -1,298 +0,0 @@
-<template>
-    <article>
-        <section>
-            <h5>表格</h5>
-            <p>框架预置了常用的表格样式，通过为 <code>&lt;table&gt;</code> 添加 <code>.table</code> 样式类来实现。</p>
-            <p>【示例】：</p>
-            <table class="table">
-                <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Skill</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr>
-                    <td>Neo</td>
-                    <td>javascript</td>
-                </tr>
-                <tr>
-                    <td>Lucy</td>
-                    <td>java</td>
-                </tr>
-                <tr>
-                    <td>Nick</td>
-                    <td>python</td>
-                </tr>
-                <tr>
-                    <td>Tommy</td>
-                    <td>dart + flutter</td>
-                </tr>
-                </tbody>
-            </table>
-            <p></p>
-        </section>
-
-        <!--宽松尺寸表格-->
-        <section>
-            <p>宽松尺寸表格：</p>
-            <p>通过添加 <code>easy</code> 属性来实现。</p>
-            <p>【示例】：</p>
-            <table class="table" easy>
-                <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Skill</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr>
-                    <td>Neo</td>
-                    <td>javascript</td>
-                </tr>
-                <tr>
-                    <td>Lucy</td>
-                    <td>java</td>
-                </tr>
-                <tr>
-                    <td>Nick</td>
-                    <td>python</td>
-                </tr>
-                <tr>
-                    <td>Tommy</td>
-                    <td>dart + flutter</td>
-                </tr>
-                </tbody>
-            </table>
-            <p></p>
-        </section>
-
-        <!--紧凑尺寸表格-->
-        <section>
-            <p>紧凑尺寸表格：</p>
-            <p>通过添加 <code>compact</code> 属性来实现。</p>
-            <p>【示例】：</p>
-            <table class="table" compact>
-                <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Skill</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr>
-                    <td>Neo</td>
-                    <td>javascript</td>
-                </tr>
-                <tr>
-                    <td>Lucy</td>
-                    <td>java</td>
-                </tr>
-                <tr>
-                    <td>Nick</td>
-                    <td>python</td>
-                </tr>
-                <tr>
-                    <td>Tommy</td>
-                    <td>dart + flutter</td>
-                </tr>
-                </tbody>
-            </table>
-            <p></p>
-        </section>
-
-        <!--线框表格-->
-        <section>
-            <p>线框表格：</p>
-            <p>通过添加 <code>border</code> 属性来实现，线框颜色可以通过框架预置色彩进行设置。</p>
-            <p>【示例】：</p>
-            <table class="table" border>
-                <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Skill</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr>
-                    <td>Neo</td>
-                    <td>javascript</td>
-                </tr>
-                <tr>
-                    <td>Lucy</td>
-                    <td>java</td>
-                </tr>
-                <tr>
-                    <td>Nick</td>
-                    <td>python</td>
-                </tr>
-                <tr>
-                    <td>Tommy</td>
-                    <td>dart + flutter</td>
-                </tr>
-                </tbody>
-            </table>
-            <p></p>
-        </section>
-
-        <!--响应式表格-->
-        <section>
-            <p>响应式表格：</p>
-            <p>通过添加 <code>response</code> 属性来实现，该属性实际只控制单元格文本内容不自动换行，要真正实现响应式效果需要对表格包裹一层结构，并通过设置 <code>.auto-h-scroll</code>
-                样式类实现。</p>
-            <p>【示例】：</p>
-            <div class="grid">
-                <div class="col-6 pad-r-1">
-                    <div class="auto-h-scroll">
-                        <table class="table" response>
-                            <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Skill</th>
-                            </tr>
-                            </thead>
-                            <tbody>
-                            <tr>
-                                <td>Neo</td>
-                                <td>javascript</td>
-                            </tr>
-                            <tr>
-                                <td>Lucy</td>
-                                <td>java</td>
-                            </tr>
-                            <tr>
-                                <td>Nick</td>
-                                <td>python</td>
-                            </tr>
-                            <tr>
-                                <td>Tommy</td>
-                                <td>dart + flutter</td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="pcenter mrg-t-2 fsize-d9">表格宽度未溢出</div>
-                </div>
-                <div class="col-6 pad-l-1">
-                    <div class="auto-h-scroll">
-                        <table class="table" response>
-                            <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Skill</th>
-                                <th>Age</th>
-                                <th>Home</th>
-                                <th>Website</th>
-                            </tr>
-                            </thead>
-                            <tbody>
-                            <tr>
-                                <td>Neo</td>
-                                <td>javascript</td>
-                                <td>24</td>
-                                <td>Australia</td>
-                                <td>http://www.javascript.75sea.com</td>
-                            </tr>
-                            <tr>
-                                <td>Lucy</td>
-                                <td>java</td>
-                                <td>27</td>
-                                <td>Britain</td>
-                                <td>http://www.java.75sea.com</td>
-                            </tr>
-                            <tr>
-                                <td>Nick</td>
-                                <td>python</td>
-                                <td>31</td>
-                                <td>Britain</td>
-                                <td>http://www.python.75sea.com</td>
-                            </tr>
-                            <tr>
-                                <td>Tommy</td>
-                                <td>dart + flutter</td>
-                                <td>27</td>
-                                <td>Norway</td>
-                                <td>http://www.dart.75sea.com</td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="pcenter mrg-t-1 fsize-d9">表格宽度溢出，出现横向滚动条</div>
-                </div>
-            </div>
-            <p></p>
-        </section>
-
-        <!--暗色表格-->
-        <section>
-            <p>暗色表格：</p>
-            <p>通过添加 <code>dark</code> 属性来实现。暗色表格也可同时启用线框样式。</p>
-            <p>【示例】：</p>
-            <div class="grid">
-                <div class="col-6 pad-r-1">
-                    <table class="table" dark>
-                        <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Skill</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>Neo</td>
-                            <td>javascript</td>
-                        </tr>
-                        <tr>
-                            <td>Lucy</td>
-                            <td>java</td>
-                        </tr>
-                        <tr>
-                            <td>Nick</td>
-                            <td>python</td>
-                        </tr>
-                        <tr>
-                            <td>Tommy</td>
-                            <td>dart + flutter</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div class="col-6 pad-l-1">
-                    <table class="table" dark border>
-                        <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Skill</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr>
-                            <td>Neo</td>
-                            <td>javascript</td>
-                        </tr>
-                        <tr>
-                            <td>Lucy</td>
-                            <td>java</td>
-                        </tr>
-                        <tr>
-                            <td>Nick</td>
-                            <td>python</td>
-                        </tr>
-                        <tr>
-                            <td>Tommy</td>
-                            <td>dart + flutter</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </section>
-
-    </article>
-</template>
-
-<script>
-    export default {
-        name: "Table"
-    };
-</script>

package/pages/example/global_style/text.vue

@@ -1,159 +0,0 @@
-<template>
-    <article>
-        <!--标题-->
-        <section>
-            <h5>标题</h5>
-            <p>BTX·UI 重置了 <code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code> 的标题样式。使用相对单位 em，由 <code>&lt;h6&gt;</code>
-                到 <code>&lt;h1&gt;</code> 字号逐渐放大至 2 倍。</p>
-            <p>【示例】：</p>
-            <div class="flex-4 container-sm">
-                <h1 class="grow-1">h1</h1>
-                <h2 class="grow-1">h2</h2>
-                <h3 class="grow-1">h3</h3>
-                <h4 class="grow-1">h4</h4>
-                <h5 class="grow-1">h5</h5>
-                <h6>h6</h6>
-            </div>
-            <p></p>
-        </section>
-
-        <!--文本对齐-->
-        <section>
-            <h5>文本对齐</h5>
-            <table class="table">
-                <thead>
-                <tr>
-                    <th>样式类</th>
-                    <th>效果</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr>
-                    <td><code>.pleft</code></td>
-                    <td>文本左对齐</td>
-                </tr>
-                <tr>
-                    <td><code>.pright</code></td>
-                    <td>文本右对齐</td>
-                </tr>
-                <tr>
-                    <td><code>.pcenter</code></td>
-                    <td>文本居中对齐</td>
-                </tr>
-                <tr>
-                    <td><code>.pjustify</code></td>
-                    <td>文本两端对齐</td>
-                </tr>
-                </tbody>
-            </table>
-            <p>【示例】：</p>
-            <div class="grid fsize-d9">
-                <div class="col-3 pad-d5 col-6-s">
-                    <div class="bg-color-lgray round-sm pad-2 pleft">
-                        在重视劳动和尊重劳动者的基础上，我们有可能来创造自己的新的道德。劳动和科学是世界上最伟大的两种力量。
-                    </div>
-                    <div class="pcenter pad-t-d5">pleft</div>
-                </div>
-                <div class="col-3 pad-d5 col-6-s">
-                    <div class="bg-color-lgray round-sm pad-2 pright">
-                        在重视劳动和尊重劳动者的基础上，我们有可能来创造自己的新的道德。劳动和科学是世界上最伟大的两种力量。
-                    </div>
-                    <div class="pcenter pad-t-d5">pright</div>
-                </div>
-                <div class="col-3 pad-d5 col-6-s">
-                    <div class="bg-color-lgray round-sm pad-2 pcenter">
-                        在重视劳动和尊重劳动者的基础上，我们有可能来创造自己的新的道德。劳动和科学是世界上最伟大的两种力量。
-                    </div>
-                    <div class="pcenter pad-t-d5">pcenter</div>
-                </div>
-                <div class="col-3 pad-d5 col-6-s">
-                    <div class="bg-color-lgray round-sm pad-2 pjustify">
-                        在重视劳动和尊重劳动者的基础上，我们有可能来创造自己的新的道德。劳动和科学是世界上最伟大的两种力量。
-                    </div>
-                    <div class="pcenter pad-t-d5">pjustify</div>
-                </div>
-            </div>
-            <p></p>
-        </section>
-
-        <!--字号-->
-        <section>
-            <h5>字号</h5>
-            <p>通过 <code>.fsize-*</code> 可以设置元素内文本以及后代元素的文本字号，这里的字号为相对父元素的字号放缩比率。</p>
-            <p>预置的字号比率值：0 — 0.9、1 — 1.9、2、2.5、3、3.5、4、4.5、5、5.5，单位 em。数值 "." 使用 "d" 代替，"0" 使用 ""
-                空字符串代替。比如缩小为 0.9 倍，类名为 <code>.fsize-d9</code>。<code>.fsize-0</code> 可设置 0 号字。</p>
-            <p>【示例】：</p>
-            <div class="grid pcenter">
-                <div class="col-3 pad-d5 col-6-s">
-                    <div class="bg-color-lgray round-sm pad-1 flex-4 flex-2 h-6">javascript</div>
-                    <div class="pad-t-d5 fsize-d9">初始文本大小</div>
-                </div>
-                <div class="col-3 pad-d5 col-6-s">
-                    <div class="bg-color-lgray round-sm pad-1 flex-4 flex-2 fsize-d6 h-6">javascript
-                    </div>
-                    <div class="pad-t-d5 fsize-d9"><code>.fsize-d6</code> 缩小为 0.6 倍字号</div>
-                </div>
-                <div class="col-3 pad-d5 col-6-s">
-                    <div class="bg-color-lgray round-sm pad-1 flex-4 flex-2 fsize-1d2 h-6">javascript
-                    </div>
-                    <div class="pad-t-d5 fsize-d9"><code>.fsize-1d2</code> 放大 1.2 倍字号</div>
-                </div>
-                <div class="col-3 pad-d5 col-6-s">
-                    <div class="bg-color-lgray round-sm pad-1 flex-4 flex-2 fsize-2 h-6">javascript
-                    </div>
-                    <div class="pad-t-d5 fsize-d9"><code>.fsize-2</code> 放大 2 倍字号</div>
-                </div>
-            </div>
-            <p></p>
-        </section>
-
-        <!--字符间距-->
-        <section>
-            <h5>字符间距</h5>
-            <p>通过 <code>.lspace-*</code> 可以设置文本内容的字符间距。默认的字符间距，框架已经进行了 1px 的初始化，预置的间距值：0 — 5，单位 px。
-            </p>
-            <p></p>
-        </section>
-
-        <!--省略文本-->
-        <section>
-            <h5>省略文本</h5>
-            <p>通过 <code>.no-wrap</code> 可以设置文本禁止换行。而 <code>.ellipsis</code> 可以设置单行文本溢出省略。</p>
-            <p>【示例】：</p>
-            <p class="ellipsis w-15">
-                <abbr title="javascript 和 php 谁是世界上最好的语言呢？">javascript 和 php 谁是世界上最好的语言呢？</abbr>
-            </p>
-            <p></p>
-        </section>
-
-        <!--代码-->
-        <section>
-            <h5>代码</h5>
-            <p>BTX·UI 重置了 <code>&lt;code&gt;</code> 样式，以实现行级代码样式。</p>
-            <p>【示例】：</p>
-            <p>在编写 javascript 代码时，可以使用 <code>console.log("调试内容")</code> 函数进行调试。</p>
-            <p></p>
-        </section>
-
-        <!--文章格式-->
-        <section>
-            <h5>文章格式</h5>
-            <p>BTX·UI 重置了 <code>&lt;article&gt;</code> 样式，以优化文章阅读格式。在 <code>&lt;article&gt;</code>包裹的内容中：</p>
-            <ol>
-                <li>基于 1.2rem 的文本大小</li>
-                <li>1.7 倍行高</li>
-                <li>标题、列表，具有下边距</li>
-                <li>拥有 "编辑模式" 样式优化</li>
-                <li>图片宽度为 100%</li>
-            </ol>
-            <p>此外还提供了 <code>.resize</code> 样式类用于恢复初始字号及行高。</p>
-        </section>
-
-    </article>
-</template>
-
-<script>
-    export default {
-        name: "Text"
-    };
-</script>

package/pages/index.vue

@@ -1,43 +0,0 @@
-
-<template>
-    <article>
-        <p class="pcenter-s">
-            <img class="h-5 h-4-s" src="@/assets/img/btx_ui.jpg">
-        </p>
-        <p>BTX·UI 是一套基于 Vue 2.0 为开发者准备的多端组件库，可以帮助工程师快速开发。使用组件 Demo 可以快速体验交互细节。</p>
-        <div class="bg-color line line-neutral thick-1 round-sm pad-d5 grid">
-            <div class="col-4 flex-1 flex-2-s col-12-s">
-                <img src="@/assets/img/btx.jpg" class="round-sm">
-            </div>
-            <div class="col-8 flex-4 flex-2-s pcenter-s col-12-s">
-                <div class="pad-l-4 pad-l-0-s">
-                    <p><span class="alpha-d7">框架作者 - </span><br><b class="fsize-1d2">btx·STU 邢天博</b></p>
-                    <p>UI 架构师<span class="alpha-d2 mrg-h-1 mrg-h-d5-s">|</span>全栈工程师<span class="alpha-d2 mrg-h-1 mrg-h-d5-s">|</span>视觉设计师</p>
-                </div>
-            </div>
-        </div>
-        <p></p>
-
-        <!--设计原则-->
-        <section>
-            <h5>设计原则</h5>
-            <p><b class="mrg-r-1 color-sub">· 全局样式</b>BTX·UI 采用渐进式设计方案，用户可以只使用全局样式库来进行快速网页设计，并可根据需要进行响应式布局分段样式库引用；</p>
-            <p><b class="mrg-r-1 color-sub">· 主题组件</b>对于开发 webapp 类大型应用，推荐使用组件来进行开发，框架预置了一套完善的 "Level 风格主题 UI 库<span class="alpha-d6">（高阶组件库）</span>"，配合 "基础组件"<span class="alpha-d6">（主要实现基础布局）</span>，可快速构建 web 应用；</p>
-            <p><b class="mrg-r-1 color-sub">· 应用组件</b>对于定制化程度更高的应用开发，可以使用 "基础组件" + "应用组件" 配合 styles 样式实现机制，来进行底层打造。甚至可以进行二次封装，构建一套定制化主题组件；</p>
-            <p>全局样式秉持 web 开发传统的 "样式复用" 理念，而组件应用则推崇新兴的 "组件复用" 理念，根据实际应用场景可以选择不同的开发模式。此外，全局样式也可以与组件进行混合使用。</p>
-        </section>
-    </article>
-</template>
-
-<script setup lang="ts">
-    // const btxuiComponents = {} as any;
-    // const styles: GlobalType.IRecord = import.meta.glob("@/components/BTXUI/core/styles/index.vue");
-    // const bView: GlobalType.IRecord = import.meta.glob("@/components/BTXUI/core/b-view/index.vue");
-    // const initGlobalComponents = { ...styles, ...bView } as any;
-    // // const initGlobalComponents: GlobalType.IRecord = import.meta.glob("@/components/BTXUI/core/*/*.vue");
-    // Object.keys(initGlobalComponents).forEach(path => {
-    //     const pathBlocks = path.split("/");
-    //     pathBlocks.pop();
-    //     btxuiComponents[pathBlocks.pop() as string] = initGlobalComponents[path];
-    // })
-</script>

package/pages/level_widget.vue

@@ -1,11 +0,0 @@
-<template>
-    <div class="bg-color-main round-md pad-1d5 color-mgray">
-        主题组件库尚在开发中...
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "level_widget"
-    }
-</script>