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

package/examples/data/tag/TagIndex.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Tag 标签</h1>
+      <p class="page-description">用于标记和选择。</p>
+    </div>
+
+    <basic />
+    <closable />
+    <size />
+
+    <api-table title="Tag Props" :data="tagProps" />
+    <api-table title="Tag Events" :data="tagEvents" :headers="eventHeaders" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Basic from "./basic.vue";
+import Closable from "./closable.vue";
+import Size from "./size.vue";
+import ApiTable from "../../components/ApiTable.vue";
+
+const tagProps = [
+  { name: 'type', description: '标签类型', type: "'primary' | 'success' | 'info' | 'warning' | 'danger' | 'cyan'", default: '-' },
+  { name: 'size', description: '标签尺寸', type: "'large' | 'medium' | 'small'", default: 'medium' },
+  { name: 'closable', description: '是否可关闭', type: 'boolean', default: 'false' },
+  { name: 'effect', description: '主题样式', type: "'light' | 'dark' | 'plain'", default: 'light' },
+]
+
+const eventHeaders = {
+  name: '事件名',
+  description: '说明',
+  type: '回调参数',
+  default: '-'
+}
+
+const tagEvents = [
+  { name: 'close', description: '关闭标签时触发', type: '-', 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/data/tag/basic.vue

@@ -0,0 +1,78 @@
+<template>
+  <demo-block 
+    title="基础用法" 
+    description="使用 type 属性来定义标签的类型。"
+  >
+    <p-row justify-content="flex-start" :gutter="12" style="margin-bottom: 16px;">
+      <p-tag>Default</p-tag>
+      <p-tag type="primary">Primary</p-tag>
+      <p-tag type="success">Success</p-tag>
+      <p-tag type="info">Info</p-tag>
+      <p-tag type="warning">Warning</p-tag>
+      <p-tag type="danger">Danger</p-tag>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;p-tag&gt;Default&lt;/p-tag&gt;
+&lt;p-tag type="primary"&gt;Primary&lt;/p-tag&gt;
+&lt;p-tag type="success"&gt;Success&lt;/p-tag&gt;
+&lt;p-tag type="info"&gt;Info&lt;/p-tag&gt;
+&lt;p-tag type="warning"&gt;Warning&lt;/p-tag&gt;
+&lt;p-tag type="danger"&gt;Danger&lt;/p-tag&gt;</code></pre>
+    </template>
+  </demo-block>
+
+  <demo-block 
+    title="不同主题" 
+    description="Tag 组件提供了三个不同的主题：light、dark 和 默认。"
+  >
+    <p-row justify-content="flex-start" :gutter="12" style="margin-bottom: 16px;">
+      <p-tag variant="light">Light</p-tag>
+      <p-tag type="primary" variant="light">Primary</p-tag>
+      <p-tag type="success" variant="light">Success</p-tag>
+      <p-tag type="info" variant="light">Info</p-tag>
+      <p-tag type="warning" variant="light">Warning</p-tag>
+      <p-tag type="danger" variant="light">Danger</p-tag>
+    </p-row>
+
+    <p-row justify-content="flex-start" :gutter="12">
+      <p-tag variant="dark">Dark</p-tag>
+      <p-tag type="primary" variant="dark">Primary</p-tag>
+      <p-tag type="success" variant="dark">Success</p-tag>
+      <p-tag type="info" variant="dark">Info</p-tag>
+      <p-tag type="warning" variant="dark">Warning</p-tag>
+      <p-tag type="danger" variant="dark">Danger</p-tag>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;p-tag variant="light"&gt;Light&lt;/p-tag&gt;
+&lt;p-tag variant="dark"&gt;Dark&lt;/p-tag&gt;</code></pre>
+    </template>
+  </demo-block>
+
+  <demo-block 
+    title="圆形标签" 
+    description="使用 status='round' 来定义圆形标签。"
+  >
+    <p-row justify-content="flex-start" :gutter="12">
+      <p-tag variant="dark" status="round">Round</p-tag>
+      <p-tag type="primary" variant="dark" status="round">Primary</p-tag>
+      <p-tag type="success" variant="dark" status="round">Success</p-tag>
+      <p-tag type="info" variant="dark" status="round">Info</p-tag>
+      <p-tag type="warning" variant="dark" status="round">Warning</p-tag>
+      <p-tag type="danger" variant="dark" status="round">Danger</p-tag>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;p-tag variant="dark" status="round"&gt;Round&lt;/p-tag&gt;
+&lt;p-tag type="primary" variant="dark" status="round"&gt;Primary&lt;/p-tag&gt;</code></pre>
+    </template>
+  </demo-block>
+</template>
+
+<script setup lang="ts">
+import DemoBlock from "../../components/DemoBlock.vue";
+</script>
+
+<style scoped lang="less">
+</style>

package/examples/data/tag/closable.vue

@@ -0,0 +1,70 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="20" wrap>
+    <p-tag
+        v-for="(item, index) in data"
+        closable
+        @close="del(index)"
+    >{{ item }}
+    </p-tag>
+    <p-button
+        v-if="flag"
+        @click="handleClick"
+    >
+      add new tag
+    </p-button>
+    <p-input
+        v-else
+        v-model="val"
+        ref="ipt"
+        class="demo"
+        @blur="handleBlur"
+        @keydown.enter="handleBlur"
+    ></p-input>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+
+import {nextTick, ref} from "vue";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+import PTag from "@bin-ui/components/tag/src/tag.vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PInput from "@bin-ui/components/input/src/input.vue";
+import {PInputInstance} from "@bin-ui/components";
+
+const data = ref(['tag 1', 'tag 2', 'tag 3', 'tag 4']);
+const flag = ref(true);
+const val = ref('');
+const ipt = ref<PInputInstance>();
+
+
+const handleClick = async () => {
+  flag.value = false;
+  await nextTick();
+  ipt.value?.focus();
+}
+const handleBlur = () => {
+  flag.value = true;
+  add(val.value);
+  val.value = '';
+}
+
+const del = (index: number) => {
+  console.log(index)
+  data.value.splice(index, 1);
+}
+
+const add = (val: string | undefined) => {
+  if (!val) return;
+  data.value.push(val);
+}
+
+</script>
+<style scoped>
+.demo {
+  max-width: 100px;
+}
+.p-row {
+  margin-bottom: 20px;
+}
+</style>

package/examples/data/tag/size.vue

@@ -0,0 +1,39 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="20">
+    <p-tag size="small">small</p-tag>
+    <p-tag type="primary" size="small">hello</p-tag>
+    <p-tag type="success" size="small">hello</p-tag>
+    <p-tag type="info" size="small">hello</p-tag>
+    <p-tag type="warning" size="small">hello</p-tag>
+    <p-tag type="danger" size="small">hello</p-tag>
+  </p-row>
+
+  <p-row justify-content="flex-start" :gutter="20">
+    <p-tag>default</p-tag>
+    <p-tag type="primary">normal</p-tag>
+    <p-tag type="success">hello</p-tag>
+    <p-tag type="info">hello</p-tag>
+    <p-tag type="warning">hello</p-tag>
+    <p-tag type="danger">hello</p-tag>
+  </p-row>
+
+  <p-row justify-content="flex-start" :gutter="20">
+    <p-tag size="large">default</p-tag>
+    <p-tag type="primary" size="large">hello</p-tag>
+    <p-tag type="success" size="large">hello</p-tag>
+    <p-tag type="info" size="large">hello</p-tag>
+    <p-tag type="warning" size="large">hello</p-tag>
+    <p-tag type="danger" size="large">hello</p-tag>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import PRow from "@bin-ui/components/grid/src/row.vue";
+import PTag from "@bin-ui/components/tag/src/tag.vue";
+</script>
+
+<style scoped lang="less">
+.p-row {
+  margin-bottom: 20px;
+}
+</style>

package/examples/data/tooltip/TooltipIndex.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+
+    <basic-tooltip/>
+    <slot-tooltip/>
+    <theme-tooltip/>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import BasicTooltip from "./basic.vue";
+import SlotTooltip from "./slot.vue";
+import ThemeTooltip from "./theme.vue";
+</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/data/tooltip/basic.vue

@@ -0,0 +1,125 @@
+<template>
+  <demo-block 
+    title="基础用法" 
+    description="使用 content 属性来决定 hover 时的提示信息。使用 placement 属性来决定弹出位置。"
+  >
+    <div class="tooltip-demo-box">
+      <div class="tooltip-top">
+        <p-tooltip placement="top-start" content="Top Start" :open-delay="0">
+          <p-button>上左</p-button>
+        </p-tooltip>
+        <p-tooltip placement="top" content="Top Center" :open-delay="0">
+          <p-button>上边</p-button>
+        </p-tooltip>
+        <p-tooltip placement="top-end" content="Top End" :open-delay="0">
+          <p-button>上右</p-button>
+        </p-tooltip>
+      </div>
+
+      <div class="tooltip-left">
+        <p-tooltip placement="left-start" content="Left Start" :open-delay="0">
+          <p-button>左上</p-button>
+        </p-tooltip>
+        <p-tooltip placement="left" content="Left Center" :open-delay="0">
+          <p-button>左边</p-button>
+        </p-tooltip>
+        <p-tooltip placement="left-end" content="Left End" :open-delay="0">
+          <p-button>左下</p-button>
+        </p-tooltip>
+      </div>
+
+      <div class="tooltip-right">
+        <p-tooltip placement="right-start" content="Right Start" :open-delay="0">
+          <p-button>右上</p-button>
+        </p-tooltip>
+        <p-tooltip placement="right" content="Right Center" :open-delay="0">
+          <p-button>右边</p-button>
+        </p-tooltip>
+        <p-tooltip placement="right-end" content="Right End" :open-delay="0">
+          <p-button>右下</p-button>
+        </p-tooltip>
+      </div>
+
+      <div class="tooltip-bottom">
+        <p-tooltip placement="bottom-start" content="Bottom Start" :open-delay="0">
+          <p-button>下左</p-button>
+        </p-tooltip>
+        <p-tooltip placement="bottom" content="Bottom Center" :open-delay="0">
+          <p-button>下边</p-button>
+        </p-tooltip>
+        <p-tooltip placement="bottom-end" content="Bottom End" :open-delay="0">
+          <p-button>下右</p-button>
+        </p-tooltip>
+      </div>
+    </div>
+
+    <template #code>
+      <pre><code>&lt;p-tooltip placement="top" content="Top Center"&gt;
+  &lt;p-button&gt;上边&lt;/p-button&gt;
+&lt;/p-tooltip&gt;
+
+&lt;p-tooltip placement="left" content="Left Center"&gt;
+  &lt;p-button&gt;左边&lt;/p-button&gt;
+&lt;/p-tooltip&gt;
+
+&lt;p-tooltip placement="right" content="Right Center"&gt;
+  &lt;p-button&gt;右边&lt;/p-button&gt;
+&lt;/p-tooltip&gt;
+
+&lt;p-tooltip placement="bottom" content="Bottom Center"&gt;
+  &lt;p-button&gt;下边&lt;/p-button&gt;
+&lt;/p-tooltip&gt;</code></pre>
+    </template>
+  </demo-block>
+</template>
+
+<script setup lang="ts">
+import DemoBlock from "../../components/DemoBlock.vue";
+</script>
+
+<style scoped lang="less">
+.tooltip-demo-box {
+  width: 450px;
+  height: 280px;
+  position: relative;
+  margin: 0 auto;
+}
+
+.tooltip-top {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  gap: 16px;
+}
+
+.tooltip-bottom {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  bottom: 0;
+  gap: 16px;
+}
+
+.tooltip-left {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  gap: 16px;
+}
+
+.tooltip-right {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: absolute;
+  right: 0;
+  gap: 16px;
+}
+</style>

package/examples/data/tooltip/slot.vue

@@ -0,0 +1,17 @@
+<template>
+	<p-row justify-content="flex-start" :gap="20">
+		<p-tooltip content="light theme">
+			<template #content>
+				tool tip
+				<br>
+				hello world!
+			</template>
+			<p-button>hover me</p-button>
+		</p-tooltip>
+	</p-row>
+</template>
+
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+</script>

package/examples/data/tooltip/theme.vue

@@ -0,0 +1,14 @@
+<template>
+  <p-row justify-content="flex-start" :gap="20">
+    <p-tooltip content="light theme" variant="light">
+      <p-button>hover me</p-button>
+    </p-tooltip>
+    <p-tooltip content="dark theme" theme="light">
+      <p-button>hover me</p-button>
+    </p-tooltip>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+</script>

package/examples/dataInput/input/InputIndex.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Input 输入框</h1>
+      <p class="page-description">通过鼠标或键盘输入字符。</p>
+    </div>
+
+    <basic />
+    <clearable />
+    <disabled />
+    <size />
+    <icon />
+    <type />
+    <limit />
+    <check />
+    <sockets />
+
+    <api-table title="Input Props" :data="inputProps" />
+    <api-table title="Input Events" :data="inputEvents" :headers="eventHeaders" />
+    <api-table title="Input Methods" :data="inputMethods" :headers="methodHeaders" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Basic from "./basic.vue";
+import Check from "./check.vue";
+import Clearable from "./clearable.vue";
+import Disabled from "./disabled.vue";
+import Icon from "./icon.vue";
+import Limit from "./limit.vue";
+import Size from "./size.vue";
+import Sockets from "./sockets.vue";
+import Type from "./type.vue";
+import ApiTable from "../../components/ApiTable.vue";
+
+const inputProps = [
+  { name: 'modelValue', description: '输入框绑定值', type: 'string | number', default: '-' },
+  { name: 'type', description: '输入框类型', type: "'text' | 'password' | 'number' | 'email' | 'tel' | 'url'", default: 'text' },
+  { name: 'size', description: '输入框尺寸', type: "'large' | 'small'", default: '-' },
+  { name: 'placeholder', description: '占位文本', type: 'string', default: '-' },
+  { name: 'disabled', description: '是否禁用', type: 'boolean', default: 'false' },
+  { name: 'readonly', description: '是否只读', type: 'boolean', default: 'false' },
+  { name: 'clearable', description: '是否显示清空按钮', type: 'boolean', default: 'false' },
+  { name: 'prefix-icon', description: '前置图标', type: 'string', default: '-' },
+  { name: 'suffix-icon', description: '后置图标', type: 'string', default: '-' },
+  { name: 'minLength', description: '最小输入长度', type: 'string | number', default: '-' },
+  { name: 'maxLength', description: '最大输入长度', type: 'string | number', default: '-' },
+  { name: 'show-password', description: '是否显示密码切换按钮', type: 'boolean', default: 'false' },
+  { name: 'checkFunc', description: '自定义校验函数', type: '(value: string, alert: Function) => boolean', default: '-' },
+]
+
+const eventHeaders = {
+  name: '事件名',
+  description: '说明',
+  type: '回调参数',
+  default: '-'
+}
+
+const inputEvents = [
+  { name: 'update:modelValue', description: '输入框内容变化时触发', type: 'value: string', default: '-' },
+  { name: 'input', description: '输入时触发', type: 'value: string', default: '-' },
+  { name: 'change', description: '内容改变时触发', type: 'value: string', default: '-' },
+  { name: 'focus', description: '获得焦点时触发', type: 'event: FocusEvent', default: '-' },
+  { name: 'blur', description: '失去焦点时触发', type: 'event: FocusEvent', default: '-' },
+  { name: 'clear', description: '点击清空按钮时触发', type: '-', default: '-' },
+]
+
+const methodHeaders = {
+  name: '方法名',
+  description: '说明',
+  type: '参数',
+  default: '返回值'
+}
+
+const inputMethods = [
+  { name: 'focus', description: '聚焦输入框', type: '-', default: '-' },
+  { name: 'blur', description: '失去焦点', type: '-', default: '-' },
+  { name: 'select', description: '选中所有文本', type: '-', default: '-' },
+  { name: 'clear', description: '清空输入框', type: '-', 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/input/basic.vue

@@ -0,0 +1,44 @@
+<template>
+  <demo-block 
+    title="基础用法" 
+    description="基本的输入框用法。"
+  >
+    <p-input v-model="val" @change="handleChange" placeholder="请输入内容"></p-input>
+    <div v-if="val" style="margin-top: 12px; color: #909399; font-size: 14px;">
+      输入的内容: {{ val }}
+    </div>
+
+    <template #code>
+      <pre><code>&lt;script setup&gt;
+import { ref } from 'vue'
+const val = ref('')
+
+const handleChange = (value) => {
+  console.log('输入值:', value)
+}
+&lt;/script&gt;
+
+&lt;template&gt;
+  &lt;p-input 
+    v-model="val" 
+    @change="handleChange" 
+    placeholder="请输入内容"
+  &gt;&lt;/p-input&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 val = ref('');
+
+const handleChange = (v: any) => {
+  console.log('输入值:', v);
+}
+</script>
+
+<style scoped lang="less">
+</style>

package/examples/dataInput/input/check.vue

@@ -0,0 +1,48 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="20">
+    <p-input
+        v-model="val"
+        placeholder="write something"
+        :check-func="foo"
+    ></p-input>
+    <p-input
+        ref="ipt"
+        v-model="val"
+        placeholder="write something"
+        :check-func="bar"
+        @blur="blur"
+    ></p-input>
+  </p-row>
+</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 = (val: string, alert: Function) => {
+  if (val.length < 5) {
+    alert('请至少键入5个字符', 'info');
+    return false;
+  }
+  if (val.length > 10) {
+    alert('最多键入15个字符');
+    return false
+  }
+  return true
+}
+
+const bar = (val: string) => {
+  return !(val.length < 5 || val.length > 15);
+}
+
+const blur = () => {
+  if (!ipt.value.isLegal) {
+    ipt.value.alert();
+  }
+}
+
+</script>
+
+
+

package/examples/dataInput/input/clearable.vue

@@ -0,0 +1,29 @@
+<template>
+  <demo-block 
+    title="可清空" 
+    description="使用 clearable 属性即可得到一个可清空的输入框。"
+  >
+    <p-input v-model="val" clearable placeholder="可清空的输入框"></p-input>
+
+    <template #code>
+      <pre><code>&lt;script setup&gt;
+import { ref } from 'vue'
+const val = ref('')
+&lt;/script&gt;
+
+&lt;template&gt;
+  &lt;p-input v-model="val" clearable placeholder="可清空的输入框"&gt;&lt;/p-input&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 val = ref('');
+</script>
+
+<style scoped lang="less">
+</style>