@qi-tian-da-sheng/bin-project-ui 1.0.0

package/examples/dataInput/input/disabled.vue

@@ -0,0 +1,11 @@
+<template>
+  <p-input v-model="val" disabled placeholder="disabled"></p-input>
+</template>
+<script setup lang="ts">
+import {ref} from "vue";
+
+const val = ref(1234);
+</script>
+
+
+

package/examples/dataInput/input/icon.vue

@@ -0,0 +1,25 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="20">
+    <p-input
+        v-model="val"
+        placeholder="write something"
+        suffix-icon="edit"
+        id="ipt1"
+    ></p-input>
+    <p-input
+        v-model="val"
+        placeholder="write something"
+        prefix-icon="email"
+        id="ipt2"
+    ></p-input>
+  </p-row>
+</template>
+<script setup lang="ts">
+import {ref} from "vue";
+
+const val = ref(undefined);
+
+</script>
+
+
+

package/examples/dataInput/input/limit.vue

@@ -0,0 +1,28 @@
+<template>
+	<p-input
+		ref="ipt"
+		v-model="val"
+		placeholder="words limit"
+		min-length="5"
+		max-length="20"
+		show-word-limit
+		@blur="foo"
+	></p-input>
+</template>
+<script setup lang="ts">
+import {ref} from "vue";
+import {PInputInstance} from "@bin-ui/components";
+
+const val = ref(undefined);
+const ipt = ref<PInputInstance | null>(null);
+
+const foo = () => {
+	if (!ipt.value.isLegal){
+		ipt.value.alert('请至少输入5个字符')
+	}
+}
+
+</script>
+
+
+

package/examples/dataInput/input/size.vue

@@ -0,0 +1,32 @@
+<template>
+  <demo-block 
+    title="尺寸" 
+    description="使用 size 属性改变输入框大小。除了默认大小外，还有另外两个选项：small、large。"
+  >
+    <p-row justify-content="flex-start" align-item="flex-start" :gutter="20">
+      <p-input v-model="val" placeholder="Small" size="small"></p-input>
+      <p-input v-model="val" placeholder="Default"></p-input>
+      <p-input v-model="val" placeholder="Large" size="large"></p-input>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;p-input v-model="val" placeholder="Small" size="small"&gt;&lt;/p-input&gt;
+&lt;p-input v-model="val" placeholder="Default"&gt;&lt;/p-input&gt;
+&lt;p-input v-model="val" placeholder="Large" size="large"&gt;&lt;/p-input&gt;</code></pre>
+    </template>
+  </demo-block>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import DemoBlock from "../../components/DemoBlock.vue";
+
+const val = ref('');
+</script>
+
+<style scoped lang="less">
+.p-row {
+  flex-wrap: wrap;
+  gap: 12px 0;
+}
+</style>

package/examples/dataInput/input/sockets.vue

@@ -0,0 +1,62 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="20">
+    <p-input v-model="val">
+      <template #prefixSlot>https://</template>
+    </p-input>
+    <p-input v-model="val">
+      <template #suffixSlot>.com</template>
+    </p-input>
+  </p-row>
+  <p-row justify-content="flex-start" :gap="20">
+    <p-input v-model="val">
+      <template #prefixSlot>
+        <p-icon target="edit"></p-icon>
+      </template>
+    </p-input>
+    <p-input v-model="val" class="with-button">
+      <template #suffixSlot>
+        <p-dropdown>
+          <template #reference>
+            <p-button type="cyan">click me</p-button>
+          </template>
+          <p-dropdown-item
+              v-for="item in data"
+              :value="item"
+              @select="foo"
+          >{{ item }}
+          </p-dropdown-item>
+        </p-dropdown>
+      </template>
+    </p-input>
+  </p-row>
+</template>
+<script setup lang="ts">
+import {ref} from "vue";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+import PIcon from "@bin-ui/components/icon/src/icon.vue";
+import PInput from "@bin-ui/components/input/src/input.vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PDropdown from "@bin-ui/components/dropdown/src/dropdown.vue";
+import PDropdownItem from "@bin-ui/components/dropdown/src/dropdown-item.vue";
+
+const val = ref(undefined);
+const data = ref(['item 1', 'item 2', 'item 3', 'item 4', 'item 5']);
+
+const foo = (v: string) => {
+  val.value = v;
+}
+
+</script>
+<style lang="less">
+.with-button .p-input__slot--suffix {
+  padding: 0;
+
+  & > * {
+    border: none;
+    border-radius: unset;
+  }
+}
+</style>
+
+
+

package/examples/dataInput/input/type.vue

@@ -0,0 +1,14 @@
+<template>
+  <p-input v-model="val" type="password" placeholder="password"></p-input>
+  <div style="height: 20px"></div>
+  <p-input v-model="val" type="password" placeholder="password" show-password></p-input>
+</template>
+<script setup lang="ts">
+import {ref} from "vue";
+import PInput from "@bin-ui/components/input/src/input.vue";
+
+const val = ref(undefined);
+</script>
+
+
+

package/examples/dataInput/switch/SwitchIndex.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Switch 开关</h1>
+      <p class="page-description">表示两种相互对立的状态间的切换，多用于触发「开/关」。</p>
+    </div>
+
+    <basic />
+    <disabled />
+    <size />
+    <type />
+    <slot />
+    <icon />
+    <change />
+
+    <api-table title="Switch Props" :data="switchProps" />
+    <api-table title="Switch Events" :data="switchEvents" :headers="eventHeaders" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Basic from "./basic.vue";
+import Change from "./change.vue";
+import Disabled from "./disabled.vue";
+import Icon from "./icon.vue";
+import Size from "./size.vue";
+import Type from "./type.vue";
+import ApiTable from "../../components/ApiTable.vue";
+
+const switchProps = [
+  { name: 'modelValue', description: '开关绑定值', type: 'boolean', default: 'false' },
+  { name: 'type', description: '开关类型', type: "'primary' | 'success' | 'info' | 'warning' | 'danger' | 'cyan'", default: '-' },
+  { name: 'color', description: '自定义颜色', type: 'string', default: '-' },
+  { name: 'size', description: '开关尺寸', type: "'large' | 'small'", default: '-' },
+  { name: 'disabled', description: '是否禁用', type: 'boolean', default: 'false' },
+  { name: 'loading', description: '是否加载中', type: 'boolean', default: 'false' },
+  { name: 'activeText', description: '开启状态文本', type: 'string', default: '-' },
+  { name: 'inactiveText', description: '关闭状态文本', type: 'string', default: '-' },
+  { name: 'activeIcon', description: '开启状态图标', type: 'string', default: '-' },
+  { name: 'inactiveIcon', description: '关闭状态图标', type: 'string', default: '-' },
+  { name: 'textStatus', description: '文本显示位置', type: "'inside' | 'outside'", default: 'outside' },
+  { name: 'beforeChange', description: '切换前的钩子函数', type: '(done: Function) => void', default: '-' },
+]
+
+const eventHeaders = {
+  name: '事件名',
+  description: '说明',
+  type: '回调参数',
+  default: '-'
+}
+
+const switchEvents = [
+  { name: 'update:modelValue', description: '开关状态变化时触发', type: 'value: boolean', default: '-' },
+  { name: 'change', description: '开关状态变化时触发', type: "status: 'on' | 'off'", default: '-' },
+]
+</script>
+
+<style scoped lang="less">
+.component-page {
+  .page-header {
+    margin-bottom: 32px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid #e4e7ed;
+  }
+
+  .page-title {
+    margin: 0 0 12px;
+    font-size: 28px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .page-description {
+    margin: 0;
+    font-size: 14px;
+    color: #606266;
+    line-height: 1.6;
+  }
+}
+</style>

package/examples/dataInput/switch/basic.vue

@@ -0,0 +1,38 @@
+<template>
+  <demo-block 
+    title="基础用法" 
+    description="绑定 v-model 到一个 Boolean 类型的变量。"
+  >
+    <p-row justify-content="flex-start" :gutter="20">
+      <p-switch v-model="value1"></p-switch>
+      <p-switch v-model="value2"></p-switch>
+    </p-row>
+    <div style="margin-top: 12px; color: #909399; font-size: 14px;">
+      开关1: {{ value1 ? '开启' : '关闭' }} | 开关2: {{ value2 ? '开启' : '关闭' }}
+    </div>
+
+    <template #code>
+      <pre><code>&lt;script setup&gt;
+import { ref } from 'vue'
+const value1 = ref(true)
+const value2 = ref(false)
+&lt;/script&gt;
+
+&lt;template&gt;
+  &lt;p-switch v-model="value1"&gt;&lt;/p-switch&gt;
+  &lt;p-switch v-model="value2"&gt;&lt;/p-switch&gt;
+&lt;/template&gt;</code></pre>
+    </template>
+  </demo-block>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import DemoBlock from "../../components/DemoBlock.vue";
+
+const value1 = ref(true);
+const value2 = ref(false);
+</script>
+
+<style scoped lang="less">
+</style>

package/examples/dataInput/switch/change.vue

@@ -0,0 +1,37 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="20">
+    <p-switch
+        v-model="f"
+        :loading="l"
+        :before-change="foo"
+    ></p-switch>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import {nextTick, ref} from "vue";
+import {delay} from "@bin-ui/tools";
+import {message} from "@bin-ui/components";
+
+const f = ref<boolean>(false);
+const l = ref(false);
+
+const foo = async (done: () => void) => {
+  l.value = true;
+
+  await delay(1500);
+  l.value = false;
+  await message({
+    text: 'success',
+    type: 'success',
+    timeout: 1000,
+  })
+
+  await nextTick();
+  done();
+}
+
+</script>
+
+
+

package/examples/dataInput/switch/disabled.vue

@@ -0,0 +1,33 @@
+<template>
+  <demo-block 
+    title="禁用和加载状态" 
+    description="设置 disabled 或 loading 属性，使开关处于禁用或加载状态。"
+  >
+    <p-row justify-content="flex-start" align-item="flex-start" :gutter="20">
+      <p-switch v-model="value" disabled></p-switch>
+      <p-switch v-model="value" loading></p-switch>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;script setup&gt;
+import { ref } from 'vue'
+const value = ref(true)
+&lt;/script&gt;
+
+&lt;template&gt;
+  &lt;p-switch v-model="value" disabled&gt;&lt;/p-switch&gt;
+  &lt;p-switch v-model="value" loading&gt;&lt;/p-switch&gt;
+&lt;/template&gt;</code></pre>
+    </template>
+  </demo-block>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import DemoBlock from "../../components/DemoBlock.vue";
+
+const value = ref(true);
+</script>
+
+<style scoped lang="less">
+</style>

package/examples/dataInput/switch/icon.vue

@@ -0,0 +1,22 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="20">
+    <p-switch
+        v-model="f"
+        active-icon="edit"
+        active-text="编辑"
+        inactive-icon="option"
+        inactive-text="设置"
+        trigger-icon="eye"
+    ></p-switch>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+
+const f = ref<boolean>(false);
+
+</script>
+
+
+

package/examples/dataInput/switch/size.vue

@@ -0,0 +1,28 @@
+<template>
+  <demo-block 
+    title="尺寸" 
+    description="使用 size 属性改变开关的大小。除了默认大小外，还有另外两个选项：small、large。"
+  >
+    <p-row justify-content="flex-start" align-item="center" :gutter="20">
+      <p-switch v-model="value" size="small"></p-switch>
+      <p-switch v-model="value"></p-switch>
+      <p-switch v-model="value" size="large"></p-switch>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;p-switch v-model="value" size="small"&gt;&lt;/p-switch&gt;
+&lt;p-switch v-model="value"&gt;&lt;/p-switch&gt;
+&lt;p-switch v-model="value" size="large"&gt;&lt;/p-switch&gt;</code></pre>
+    </template>
+  </demo-block>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import DemoBlock from "../../components/DemoBlock.vue";
+
+const value = ref(true);
+</script>
+
+<style scoped lang="less">
+</style>

package/examples/dataInput/switch/text.vue

@@ -0,0 +1,23 @@
+<template>
+  <p-row justify-content="flex-start" align-item="flex-start" :gutter="20">
+    <p-switch v-model="f" active-text="yes" inactive-text="no"></p-switch>
+    <p-switch v-model="f" active-text="yes" inactive-text="no" text-status="inside"></p-switch>
+    <p-switch
+        v-model="f"
+        active-text="yes yes yes"
+        inactive-text="no"
+        text-status="inside"
+        style="max-width: 100px"
+    ></p-switch>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+
+const f = ref<boolean>(false);
+
+</script>
+
+
+

package/examples/dataInput/switch/type.vue

@@ -0,0 +1,20 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="20">
+    <p-switch v-model="f"></p-switch>
+    <p-switch v-model="f" type="success"></p-switch>
+    <p-switch v-model="f" type="info"></p-switch>
+    <p-switch v-model="f" type="warning"></p-switch>
+    <p-switch v-model="f" type="danger"></p-switch>
+    <p-switch v-model="f" type="cyan"></p-switch>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+
+const f = ref<boolean>(false);
+
+</script>
+
+
+

package/examples/feedback/confirm/ConfirmIndex.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Confirm 确认框</h1>
+      <p class="page-description">模拟系统的消息确认框而实现的弹框效果，以用于消息提示、确认消息和提交内容。</p>
+    </div>
+
+    <basic-confirm/>
+    <btn-text-confirm/>
+    <close-type-confirm/>
+    <draggable-confirm/>
+    <offset-confirm/>
+    <type-confirm/>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import BasicConfirm from "./basic.vue";
+import BtnTextConfirm from "./btnText.vue";
+import CloseTypeConfirm from "./closeType.vue";
+import DraggableConfirm from "./draggable.vue";
+import OffsetConfirm from "./offset.vue";
+import TypeConfirm from "./type.vue";
+</script>
+
+<style scoped lang="less">
+@import "../../components/page-styles.less";
+</style>

package/examples/feedback/confirm/basic.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <p-button variant="empty" @click="handleClick">
+      点击送地狱火
+    </p-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {confirm, message} from "@bin-ui/components";
+
+const realHandleClick = () => {
+  window.location.href = 'https://www.bilibili.com/video/BV1GJ411x7h7';
+}
+
+const handleClick = () => {
+  confirm({
+    title: '待确认...',
+    text: "只差最后一步!点击确认"
+  }).then(() => {
+    realHandleClick();
+  }).catch(() => {
+    message({
+      type: 'danger',
+      text: '用户取消了操作!'
+    })
+  })
+}
+
+</script>
+
+
+

package/examples/feedback/confirm/btnText.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <p-button
+        empty
+        @click="handleClick"
+    >
+      某个神秘按钮
+    </p-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {confirm} from "@bin-ui/components";
+
+const handleClick = () => {
+  confirm({
+    title: '待确认',
+    text: "听我说..v me 50!",
+    cancelBtnText: 'no way',
+    confirmBtnText: 'v 50!!'
+  })
+}
+
+</script>
+
+
+

package/examples/feedback/confirm/closeType.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <p-button
+        empty
+        @click="handleClick"
+    >
+      写点什么好呢?
+    </p-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {confirm, message} from "@bin-ui/components";
+
+
+const handleClick = () => {
+  confirm({
+    text: "试试不同的关闭类型吧!"
+  }).then(() => {
+    message({
+      type: 'success',
+      text: '通过确认按钮关闭'
+    })
+  }).catch((err) => {
+    console.log(err)
+    if (err === 'cancel') {
+      message({
+        type: 'danger',
+        text: '通过取消按钮关闭'
+      })
+    } else if (err === 'esc') {
+      message({
+        type: 'warning',
+        text: '通过按下esc关闭'
+      })
+    } else if (err === 'mark') {
+      message({
+        type: 'warning',
+        text: '通过点击遮罩关闭'
+      })
+    } else if (err === 'icon') {
+      message({
+        type: 'warning',
+        text: '通过close图标关闭'
+      })
+    }
+  })
+}
+
+</script>
+
+
+

package/examples/feedback/confirm/draggable.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <p-button
+        empty
+        @click="handleClick"
+    >
+      召唤一个可以被拖拽的确认框!
+    </p-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {confirm} from "@bin-ui/components";
+
+const handleClick = () => {
+  confirm({
+    title: '可以被拖拽',
+    text: "将鼠标移动到标题上试试~",
+    top: '20vh',
+    draggable: true,
+  })
+}
+
+</script>
+
+
+

package/examples/feedback/confirm/offset.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <p-button
+        empty
+        @click="handleClick"
+    >
+      设置偏移量
+    </p-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {confirm} from "@bin-ui/components";
+
+
+const handleClick = () => {
+  confirm({
+    text: "top是一个字符串，因此你可以任何有效单位, 比如vh",
+    top: '20vh',
+  })
+}
+
+</script>
+
+
+