bge-ui 1.0.2 → 1.0.4

package/packages/site/docs/components/Icons.md

@@ -0,0 +1,184 @@
+
+# ICON图标
+组件名称也就是设计稿中ICON的命名例如color/c2-bill-1，对应组件就是 color-c2-bill-1
+<color-c2-bill-1 />
+
+```vue
+<template>
+  <color-c2-bill-1 />
+</template>
+<script lang="ts" setup>
+  
+</script>
+```
+
+## 单色ICON
+单色ICON 
+可以传入size 改变ICON大小，可传入color 改变ICON颜色
+<div class="svg-items">
+  <MonoInternational />
+  <MonoAddSubtract />
+  <MonoApi />
+  <MonoAndroid />
+  <MonoAdd />
+  <MonoApple />
+  <MonoAssets />
+  <MonoAudit />
+  <MonoArrowUp />
+  <MonoBuilding />
+  <MonoBankCard />
+  <MonoArrowDown />
+  <MonoCalendar />
+  <MonoCheckFill />
+  <MonoChevronRight />
+  <MonoChevronLeft />
+  <MonoChevronRightDouble />
+  <MonoCloseOne />
+  <MonoClassify01 />
+  <MonoClassify02 />
+  <MonoClose />
+  <MonoDocunment />
+  <MonoCopy />
+  <MonoEdit />
+  <MonoEmail02 />
+  <MonoEye />
+  <MonoComplete />
+  <MonoEyeClose />
+  <MonoExclamationmarkFill />
+  <MonoGoogleplay />
+  <MonoEmail01 />
+  <MonoLogout />
+  <MonoMoon />
+  <MonoMore />
+  <MonoLess />
+  <MonoMenu />
+  <MonoPicError />
+  <MonoPic />
+  <MonoNotification />
+  <MonoHelp />
+  <MonoRoute />
+  <MonoRemove />
+  <MonoOtherDevice />
+  <MonoSafety />
+  <MonoSun />
+  <MonoTime />
+  <MonoTowardFill />
+  <MonoSearch />
+  <MonoTransfer />
+  <MonoTrash />
+  <MonoWin />
+  <MonoWallet />
+</div>
+
+## 多色固定色ICON
+多色固定色ICON
+可以传入size 改变ICON大小
+
+<div class="svg-items">
+  <ColorCompletedFill />
+  <ColorCloseFill />
+  <ColorCookie />
+  <ColorSuccessFill />
+  <ColorStar />
+  <ColorTimeFill />
+  <ColorTowardFill />
+</div>
+
+## 多色可跟随主题色改编颜色的ICON
+多色固定色ICON
+可以传入size 改变ICON大小
+
+<div class="svg-items">
+  <ColorC2All />
+  <ColorC2Bill1 />
+  <ColorC2Card />
+  <ColorC2Assets />
+  <ColorC2Email />
+  <ColorC2Complete />
+  <ColorC2Language />
+  <ColorC2Home />
+  <ColorC2Google />
+  <ColorC2User/>
+  <ColorC2Phone />
+  <ColorC2Level />
+  <ColorC2RightDown />
+  <ColorC2Pdf />
+  <ColorC2Safe />
+  <ColorC2Notification />
+  <ColorC2SafeShield />
+  <ColorC2RightUp />
+  <ColorC2Api />
+  <ColorC2Bill2 />
+  <ColorC2Deal />
+  <ColorC2Kyc />
+  <ColorC2Register />
+  <ColorC3Card />
+  <ColorC3Licensing />
+  <ColorC3Establish />
+  <ColorC3Framework />
+  <ColorC3Trading />
+  <ColorC2Fee />
+  <ColorC3Company />
+  <ColorC3Deposit />
+  <ColorC3UserFollow />
+  <ColorC3User />
+  <ColorC2TrafficCone />
+  <ColorC3Audits />
+  <ColorC3Kyc />
+  <ColorC3NotPassed />
+  <ColorC3Pass />
+  <ColorC3Safes />
+  <ColorC2UserEvery />
+  <ColorC3UserEvery />
+</div>
+
+## 媒体ICON
+多色固定色ICON
+可以传入size 改变ICON大小，可传入color 改变ICON颜色
+<div class="svg-items">
+  <MediaInstagram />
+  <MediaFacebook />
+  <MediaLinked />
+  <MediaTwitter />
+</div>
+
+## 多语言ICON
+多色固定色ICON
+可以传入size 改变ICON大小
+<div class="svg-items">
+  <IntlEn />
+  <IntlCh />
+  <CoinUsd />
+  <CoinHkd />
+  <IntlJpn />
+  <IntlUsa />
+  <IntlEur />
+  <IntlHkg />
+  <IntlKor />
+  <IntlVnm />
+</div>
+
+## 币种ICON
+多色固定色ICON
+可以传入size 改变ICON大小
+<div class="svg-items">
+  <CoinUsd />
+  <CoinHkd />
+</div>
+
+## Icon Attributes
+
+| 属性名          | 说明                           |类型                                         |默认值  |
+| -------------- | ----------------------------- |---------------------------------------------| -------- |
+| size           | 尺寸                           |  string \| number                           |  24      |
+| color          | 颜色                           |  string                                     |  #808080  |
+
+
+<style>
+  .svg-items svg {
+    margin-right: 20px;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object{
+    display: inline-block;
+  }
+</style>

package/packages/site/docs/components/Input.md

@@ -0,0 +1,54 @@
+# Input输入框
+通过鼠标或键盘输入字符
+
+
+
+## 基础用法
+
+<demo src="../demo/input/input1.vue"></demo>
+
+
+## 禁用状态
+通过 disabled 属性指定是否禁用 input 组件
+
+<demo src="../demo/input/input2.vue"></demo>
+
+## 文本域
+用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。
+
+文本域高度可通过 rows 属性控制
+<demo src="../demo/input/input3.vue"></demo>
+
+## 复合型输入框
+可以在输入框中前置或后置一个元素，通常是标签或按钮。
+
+可通过 slot 来指定在 Input 中分发的前置或者后置的内容。
+<demo src="../demo/input/input4.vue"></demo>
+
+## API Attributes
+
+
+| 属性名          | 说明                           |类型                                         |默认值  |
+| -------------- | ----------------------------- |---------------------------------------------| -------- |
+| placeholder    | 输入框占位文本	                  |  string                                     |  -     |
+| type           | 类型                           |  enum (`text`, `number`, `textarea`)        |  text  |
+| disabled       | 是否禁用                        |  boolean                                    |  false  |
+| readonly       | 原生  readonly 属性，是否只读	   |  boolean                                    |  false  |
+| rows           | 输入框行数，仅 type 为 'textarea' 时有效 |  number \| string                     |  2      |
+| maxlength      | 输入框最大输入长度	               |  number \| string                           |  -      |
+
+## Events
+
+| 事件名	          |说明	                                                  |类型
+| --------------   | --------------------------------------------------   |-------------|
+| blur	           |当选择器的输入框失去焦点时触发	                            | Function   |
+| focus	           |当选择器的输入框获得焦点时触发	                            | Function   |
+| change	         |仅当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发   | Function   |  
+| input	           |在 Input 值改变时触发	                                    | Function   |
+| clear	           |在点击由 clearable 属性生成的清空按钮时触发	                 | Function   |
+
+## Slots
+| 插槽名	 |说明                                    |
+| -----   | -------------------------------------- |
+| prefix	|输入框前置内容，只对非 type="textarea" 有效 |
+| suffix	|输入框后置内容，只对非 type="textarea" 有效 |

package/packages/site/docs/components/Link.md

@@ -0,0 +1,17 @@
+# LINK链接
+
+## 主题
+除了默认的主题，按钮组件还提供了2种额外的主题可供选择，以便适配不同的场景。
+使用 type 属性额外配置主题，可使用 default violet
+<demo src="../demo/link/index.vue"></demo>
+
+## Link Attributes
+
+| 属性名          | 说明                           |类型                                         |默认值  |
+| -------------- | ----------------------------- |---------------------------------------------| -------- |
+| href           | 链接                           |  string                                     |  空  |
+| target         | 原生跳转属性                     |  enum (`_self`, `_blank`, `_parent`, `_top`) |  空  |
+| underline      | 是否有下划线                     |  boolean                                    |  false  |
+| type           | 主题类型                        |  enum (`default`, `violet`)                 |  default  |
+| disabled       | 是否禁用                        |  boolean                                    |  false  |
+

package/packages/site/docs/components/Message.md

@@ -0,0 +1,32 @@
+# Message 消息提示
+常用于主动操作后的反馈提示。 与 Notification 的区别是后者更多用于系统级通知的被动提醒。
+
+## 基础用法
+从顶部出现，3 秒后自动消失。
+
+Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。
+
+
+<demo src="../demo/message/index.vue"></demo>
+
+
+## 不同状态
+用来显示「成功、消息、错误」类的操作反馈。
+
+当需要自定义更多属性时，Message 也可以接收一个对象为参数。 比如，设置 type 字段可以定义不同的状态，默认为info。 此时正文内容以 message 的值传入。 同时，我们也为 Message 的各种 type 注册了方法，可以在不传入 type 字段的情况下像 open4 那样直接调用。
+
+<demo src="../demo/message/index1.vue"></demo>
+
+
+## 使用 HTML 片段作为正文内容
+message 还支持使用 HTML 字符串作为正文内容。
+
+<demo src="../demo/message/index2.vue"></demo>
+
+
+## API Attributes
+|属性名	                | 说明                    | 类型	                |默认值   |               
+|----------------------|-------------------------|----------------------|--------|
+|message		           | 消息内容                	| string / VNode        |-     |
+|type	                 | 消息类型	                | enum(`success`, `info`, `error`)   |info     |
+|duration              | 显示时间，单位为毫秒。 设为 0 则不会自动关闭	| number	    |3000     |

package/packages/site/docs/components/Tabs.md

@@ -0,0 +1,37 @@
+# Tabs 标签
+
+## 基础用法
+基础的、简洁的标签。
+
+Tabs 组件提供了选项卡功能， 你可以通过 value 属性来指定当前选中的标签
+
+<demo src="../demo/tabs/tabs1.vue"></demo>
+
+
+## 主题风格
+
+除了默认的主题，使用 type 属性配置主题，可使用 bordered pills
+
+
+<demo src="../demo/tabs/tabs2.vue"></demo>
+
+## Tabs Attributes
+|属性名	                | 说明                    | 类型	                |可选值	             |默认值   |               
+|----------------------|-------------------------|----------------------|-------------------|--------|
+|model-value / v-model | 绑定值，选中选项卡的 value	| string / number      |	-                 |-       |
+|type	                 |风格类型	                | string	             | bordered/pills	    |-       |
+
+## Tabs 插槽
+| 插槽名 |	说明	  |子标签 |
+|-------|--------- |------|
+| -	    |  默认插槽	|Tab-pane|
+
+## TabPane Attributes
+|属性名	                | 说明                           | 类型	                |可选值	             |默认值   |               
+|----------------------|-------------------------------|----------------------|-------------------|--------|
+|value                 | 与选项绑定值 value 对应的标识符	 | string               |	-                 |-       |
+
+## Tabs 插槽
+| 插槽名 |	说明	  |
+|-------|--------- |
+| -	    |  默认插槽Tab-pane 的标题内容|

package/packages/site/docs/components/Tooltip.md

@@ -0,0 +1,51 @@
+# Tooltip 文字提示
+
+::: tip
+在 SSR 场景下，您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress).
+:::
+
+## 基础用法
+
+在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。
+
+
+<demo src="../demo/tooltip/index.vue"></demo>
+
+## API
+
+### Attributes
+|属性名	                | 说明                    | 类型	                |默认值   |               
+|----------------------|-------------------------|----------------------|--------|
+|teleported            | 是否将弹出层追加到body元素下	| boolean             |true     |
+|hover	               | 是否鼠标移上去触发，false时是点击是触发| boolean	    |true     |
+|disable-click-outside   | 是否禁用点击弹出层之外的地方关闭弹出层| boolean	    |false     |
+|open-delay             | 打开弹出层前等待的毫秒数     | number	            |0     |
+|close-delay            | 关闭弹出层前等待的毫秒数     | number	            |0     |
+|show-arrow             | tooltip 的内容是否有箭头	   | boolean	           |true     |
+|interactive             | 鼠标一道tooltip内容时是否显示tooltip	   | boolean	           |true     |
+|strategy             | 设置用于定位popper的策略	   | enum(`absolute`, `fixed`) |absolute     |
+|placement             | Tooltip 组件出现的位置		   | enum(`top` ,`top-start` ,`top-end` ,`bottom` ,`bottom-start` ,`bottom-end` ,`left` ,`left-start` ,`left-end` ,`right` ,`right-start` ,`right-end`) |top     |
+|modifiers             | Tooltip 可以作为单例，也就是是说你可以同时有多个触发同一个 tooltip 的触发元素   | Array，参考<ui-link type="violet" href="https://popper.js.org/docs/v2/">popper.js</ui-link> |-     |
+|animation             | 设置动画的类型	   |  enum(`none`, `fade`, `shift-in`, `shift-out`, `scale`, `CUSTOM`)	           |shift-in     |
+|animation-duration     | 设置动画的执行时间单位毫秒	   | number | 300|
+
+## Slots
+| 插槽名 |	说明	  |
+|-------|--------- |
+| -	    |  Tooltip 触发 & 引用的元素	| 
+|content| 显示的内容 | 
+
+## Events 
+| 事件名	 |	说明	  | Type |
+|---------|---------|------|
+|opened   |打开tooltip时触发 | Function|
+|closed   |关闭tooltip时触发 | Function|
+|transition|在tooltip转换的各个阶段触发。 <ui-link href="https://vue-popper.kalimah-apps.com/docs/guide/events.html">参考</ui-link>| Function|
+
+
+## Exposes
+| 插槽名 |	说明	  |
+|-------|--------- |
+| popper    |  Popper.js原始对象	| 
+|isOpened| boolean 是否已经打开tooltip | 
+|toggleTooltip| Function 切换tooltip状态，参数可传入 (`open`,`close`)，不传时切换为非当前状态 | 

package/packages/site/docs/components/index.md

@@ -0,0 +1 @@
+asd

package/packages/site/docs/demo/button/button-disabled.vue

@@ -0,0 +1,7 @@
+<template>
+  <ui-button disabled>禁用</ui-button>
+  <ui-button>正常</ui-button>
+</template>
+<script lang="ts" setup>
+import { UiButton } from "bge-ui"
+</script>

package/packages/site/docs/demo/button/button-size.vue

@@ -0,0 +1,10 @@
+
+
+<template>
+  <ui-button size="large">Large</ui-button>
+  <ui-button>Default</ui-button>
+  <ui-button size="mini">Mini</ui-button>
+</template>
+<script lang="ts" setup>
+import { UiButton } from "bge-ui"
+</script>

package/packages/site/docs/demo/button/button-type.vue

@@ -0,0 +1,9 @@
+<template>
+  <ui-button type="primary">Primary</ui-button>
+  <ui-button type="secondary">Secondary</ui-button>
+  <ui-button type="white">White</ui-button>
+  <ui-button type="violet">Violet</ui-button>
+</template>
+<script lang="ts" setup>
+import { UiButton } from "bge-ui"
+</script>

package/packages/site/docs/demo/form/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <ui-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
+    <ui-form-item prop='username'>
+      <template #label>
+        <div style="display: flex; align-items: center;">用户名 <mono-help size="20" style="margin-left: 4px;" /></div>
+      </template>
+      <ui-input maxlength="20" v-model="ruleForm.username" placeholder="请输入用户名"></ui-input>
+    </ui-form-item>
+    <ui-form-item label="密码" prop='password'>
+      <ui-input type="text" v-model="ruleForm.password" placeholder="请输入密码">
+        <template #prefix>
+          <mono-search size="20"></mono-search>
+        </template>
+        <template #suffix>USDT
+          <mono-international style="margin-left: 8px" size="20"></mono-international>
+        </template>
+      </ui-input>
+    </ui-form-item>
+    <ui-form-item>
+      <ui-button @click="submit">提交</ui-button>
+    </ui-form-item>
+  </ui-form>
+</template>
+<script setup lang="ts">
+import { reactive, ref } from "vue"
+const ruleForm = reactive({
+  username: '',
+  password: ''
+})
+
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: ['blur', 'change'], },
+    {
+      type: 'email',
+      message: '请输入正确的用户名',
+      trigger: ['blur', 'change'],
+    },
+  ]
+}
+
+const ruleFormRef: any = ref()
+
+
+function submit() {
+  ruleFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+</script>

package/packages/site/docs/demo/input/input1.vue

@@ -0,0 +1,9 @@
+<template>
+  <ui-input v-model="input" placeholder="Please input" />
+</template>
+
+<script lang="ts" setup>
+import { UiInput } from 'bge-ui'
+import { ref } from 'vue'
+const input = ref('')
+</script>

package/packages/site/docs/demo/input/input2.vue

@@ -0,0 +1,9 @@
+<template>
+  <ui-input v-model="input" disabled placeholder="Please input" />
+</template>
+
+<script lang="ts" setup>
+import { UiInput } from 'bge-ui'
+import { ref } from 'vue'
+const input = ref('')
+</script>

package/packages/site/docs/demo/input/input3.vue

@@ -0,0 +1,9 @@
+<template>
+  <ui-input type="textarea" v-model="input" placeholder="Please input" />
+</template>
+
+<script lang="ts" setup>
+import { UiInput } from 'bge-ui'
+import { ref } from 'vue'
+const input = ref('')
+</script>

package/packages/site/docs/demo/input/input4.vue

@@ -0,0 +1,16 @@
+<template>
+  <ui-input type="text" v-model="input" placeholder="Search">
+    <template #prefix>
+      <mono-search size="20"></mono-search>
+    </template>
+    <template #suffix>USDT
+      <mono-international style="margin-left: 8px" size="20"></mono-international>
+    </template>
+  </ui-input>
+</template>
+
+<script lang="ts" setup>
+import { UiInput } from 'bge-ui'
+import { ref } from 'vue'
+const input = ref('')
+</script>

package/packages/site/docs/demo/link/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <ui-link href="https://bg.exchange">链接</ui-link>
+  <ui-link type="violet" href="https://bg.exchange">链接</ui-link>
+</template>
+<script lang="ts" setup>
+import { UiLink } from "bge-ui"
+</script>

package/packages/site/docs/demo/message/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <ui-button @click="open">Show message</ui-button>
+  <ui-button @click="openVn">VNode</ui-button>
+</template>
+
+<script lang="ts" setup>
+import { h } from 'vue'
+import { UiMessage } from "bge-ui"
+const open = () => {
+  UiMessage('this is a message.')
+}
+
+const openVn = () => {
+  UiMessage({
+    message: h('p', null, [
+      h('span', null, 'Message can be '),
+      h('i', { style: 'color: teal' }, 'VNode'),
+    ]),
+  })
+}
+</script>

package/packages/site/docs/demo/message/index1.vue

@@ -0,0 +1,22 @@
+<template>
+  <ui-button @click="open2">success</ui-button>
+  <ui-button @click="open1">message</ui-button>
+  <ui-button @click="open3">error</ui-button>
+</template>
+
+<script lang="ts" setup>
+import { UiMessage } from "bge-ui"
+
+const open1 = () => {
+  UiMessage('this is a message.')
+}
+const open2 = () => {
+  UiMessage({
+    message: 'Congrats, this is a success message.',
+    type: 'success',
+  })
+}
+const open3 = () => {
+  UiMessage.error('Oops, this is a error message.')
+}
+</script>

package/packages/site/docs/demo/message/index2.vue

@@ -0,0 +1,13 @@
+<template>
+  <ui-button @click="openHTML">Use HTML String</ui-button>
+</template>
+
+<script lang="ts" setup>
+import { UiMessage } from 'bge-ui'
+
+const openHTML = () => {
+  UiMessage({
+    message: '<strong>This is <i>HTML</i> string</strong>',
+  })
+}
+</script>

package/packages/site/docs/demo/tabs/tabs1.vue

@@ -0,0 +1,11 @@
+<template>
+  <ui-tabs v-model="tab">
+    <ui-tab-pane value="tab1">Tab1</ui-tab-pane>
+    <ui-tab-pane value="tab2">Tab2</ui-tab-pane>
+  </ui-tabs>
+</template>
+<script lang="ts" setup>
+import { UiTabs } from "bge-ui"
+import { ref } from "vue";
+const tab = ref('tab2')
+</script>

package/packages/site/docs/demo/tabs/tabs2.vue

@@ -0,0 +1,17 @@
+<template>
+  <ui-tabs v-model="tab1" type="bordered">
+    <ui-tab-pane value="tab1">Bordered Tab1</ui-tab-pane>
+    <ui-tab-pane value="tab2">Bordered Tab2</ui-tab-pane>
+  </ui-tabs>
+
+  <ui-tabs style="margin-top: 24px;" v-model="tab" type="pills">
+    <ui-tab-pane value="tab3">Pills Tab1</ui-tab-pane>
+    <ui-tab-pane value="tab4">Pills Tab2</ui-tab-pane>
+  </ui-tabs>
+</template>
+<script lang="ts" setup>
+import { UiTabs } from "bge-ui"
+import { ref } from "vue";
+const tab1 = ref('tab1')
+const tab = ref('tab3')
+</script>