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

package/examples/feedback/message/icon.vue

@@ -0,0 +1,27 @@
+<template>
+	<div>
+		<p-button
+			variant="empty"
+			@click="handleClick"
+		>
+			click me
+		</p-button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {message} from "@bin-ui/components";
+
+const handleClick = () => {
+	message({
+		text:'自定义图标',
+		icon:'edit',
+		color:'red'
+	})
+}
+
+</script>
+
+
+

package/examples/feedback/message/offset.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <p-button
+        variant="empty"
+        @click="handleClick"
+    >
+      offset: 30px
+    </p-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {message} from "@bin-ui/components";
+
+const handleClick = () => {
+  message({
+    text: '设置了偏移量',
+    offset: 30
+  })
+}
+
+</script>
+
+
+

package/examples/feedback/message/time.vue

@@ -0,0 +1,43 @@
+<template>
+	<p-row justify-content="flex-start" :gutter="10" wrap>
+		<p-button
+			variant="empty"
+			@click="handleClick(5000)"
+		>
+			5秒后自动关闭
+		</p-button>
+		<p-button
+			variant="empty"
+			@click="handleClick()"
+		>
+			不会自动关闭
+		</p-button>
+	</p-row>
+
+</template>
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {message} from "@bin-ui/components";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+
+const handleClick = (timeout?:number) => {
+	if (timeout === undefined){
+		message({
+			text:'这是一条不会自动关闭的消息.',
+			timeout:0,
+			showCloseIcon:true
+		})
+	}
+	else  {
+		message({
+			text:`这条消息会存活${timeout}毫秒`,
+			timeout:timeout,
+		})
+	}
+}
+
+</script>
+
+
+

package/examples/feedback/message/type.vue

@@ -0,0 +1,67 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="10" wrap>
+    <p-button
+        variant="empty"
+        type="success"
+        @click="handleClick('success')"
+    >
+      success
+    </p-button>
+    <p-button
+        variant="empty"
+        type="info"
+        @click="handleClick('info')"
+    >
+      info
+    </p-button>
+    <p-button
+        variant="empty"
+        type="warning"
+        @click="handleClick('warning')"
+    >
+      warning
+    </p-button>
+    <p-button
+        variant="empty"
+        type="danger"
+        @click="handleClick('danger')"
+    >
+      danger
+    </p-button>
+  </p-row>
+
+</template>
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {message} from "@bin-ui/components";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+
+const handleClick = (type: string) => {
+  if (type === 'success') {
+    message({
+      type: 'success',
+      text: 'success message.'
+    })
+  } else if (type === 'info') {
+    message({
+      type: 'info',
+      text: 'info message.'
+    })
+  } else if (type === 'warning') {
+    message({
+      type: 'warning',
+      text: 'warning message.'
+    })
+  } else if (type === 'danger') {
+    message({
+      type: 'danger',
+      text: 'danger message.'
+    })
+  }
+}
+
+</script>
+
+
+

package/examples/feedback/notify/NotifyIndex.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Notify 通知</h1>
+      <p class="page-description">悬浮出现在页面角落，显示全局的通知提醒消息。</p>
+    </div>
+
+    <basic-notify/>
+    <position-notify/>
+    <type-notify/>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import BasicNotify from "./basic.vue";
+import PositionNotify from "./position.vue";
+import TypeNotify from "./type.vue";
+</script>
+
+<style scoped lang="less">
+@import "../../components/page-styles.less";
+</style>

package/examples/feedback/notify/basic.vue

@@ -0,0 +1,46 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="10" wrap>
+    <p-badge>
+      <p-button empty @click="handleClick">
+        新消息待接收
+      </p-button>
+    </p-badge>
+    <p-button empty @click="handleClick2">
+      长标题测试
+    </p-button>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {notify} from "@bin-ui/components";
+import PBadge from "@bin-ui/components/badge/src/badge.vue";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+
+const handleClick = () => {
+  const day: number = new Date().getDay();
+
+
+  if (day === 4) {
+    notify({
+      title: '肯德基疯狂星期四😋',
+      text: '巴山楚水凄凉地，Can you v me fifty?',
+    })
+  } else {
+    notify({
+      title: '什么时候星期四?',
+      text: 'oh no 今天不是, 看来不适合发电😫😫',
+    })
+  }
+}
+const handleClick2 = () => {
+  notify({
+    title: '这是特别特别长长长长长长长长长长的标题',
+    text: '标题尽量简短, 如果太长会被省略.'
+  })
+}
+
+</script>
+
+
+

package/examples/feedback/notify/position.vue

@@ -0,0 +1,46 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="20">
+    <p-button
+        variant="empty"
+        @click="handleClick('top-right')"
+    >
+      右上角
+    </p-button>
+    <p-button
+        variant="empty"
+        @click="handleClick('bottom-right')"
+    >
+      右下角
+    </p-button>
+    <p-button
+        variant="empty"
+        @click="handleClick('bottom-left')"
+    >
+      左下角
+    </p-button>
+    <p-button
+        variant="empty"
+        @click="handleClick('top-left')"
+    >
+      左上角
+    </p-button>
+  </p-row>
+
+</template>
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {notify} from "@bin-ui/components";
+
+const handleClick = (placement: string) => {
+  notify({
+    title: `${placement} notify`,
+    text: '☘☘☘',
+    placement,
+  })
+}
+
+</script>
+
+
+

package/examples/feedback/notify/type.vue

@@ -0,0 +1,36 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="20">
+    <p-button variant="empty" type="success" @click="handleClick('success')">
+      success
+    </p-button>
+    <p-button variant="empty" type="info" @click="handleClick('info')">
+      info
+    </p-button>
+    <p-button variant="empty" type="warning" @click="handleClick('warning')">
+      warning
+    </p-button>
+    <p-button variant="empty" type="danger" @click="handleClick('danger')">
+      danger
+    </p-button>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import {ElementTypes} from "@bin-ui/typings";
+import {notify} from "@bin-ui/components";
+import PButton from "@bin-ui/components/button/src/button.vue";
+
+const handleClick = (type: ElementTypes) => {
+  notify({
+    type: type,
+    title: `${type} notify`,
+    text: `${type} content.`
+  })
+
+
+}
+
+</script>
+
+
+

package/examples/feedback/popconfirm/PopconfirmIndex.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Popconfirm 气泡确认框</h1>
+      <p class="page-description">点击元素，弹出气泡确认框。</p>
+    </div>
+
+    <basic/>
+    <custom/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Basic from "./basic.vue";
+import Custom from "./custom.vue";
+</script>
+
+<style scoped lang="less">
+@import "../../components/page-styles.less";
+</style>

package/examples/feedback/popconfirm/basic.vue

@@ -0,0 +1,36 @@
+<template>
+  <p-popconfirm
+      text="are you sure?"
+      type="info"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+  >
+    <p-button>click me</p-button>
+  </p-popconfirm>
+</template>
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {message} from "@bin-ui/components";
+import PPopconfirm from "@bin-ui/components/popconfirm/src/popconfirm.vue";
+
+const handleCancel = () => {
+  message({
+    text: '用户取消确认!',
+    type: 'warning',
+  })
+}
+
+const handleConfirm = () => {
+  message({
+    text: '💟💟💟',
+    type: 'success'
+  })
+
+}
+
+
+</script>
+
+
+

package/examples/feedback/popconfirm/custom.vue

@@ -0,0 +1,37 @@
+<template>
+  <p-popconfirm
+      content="are you sure?"
+      type="info"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      cancel-btn-text="cancel"
+      confirm-btn-type="confirm"
+      icon="edit"
+      icon-color="blue"
+  >
+    <p-button>click me</p-button>
+  </p-popconfirm>
+</template>
+
+<script setup lang="ts">
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {message} from "@bin-ui/components";
+
+const handleCancel = () => {
+  message({
+    text: 'cancel',
+    type: 'warning',
+  })
+}
+
+const handleConfirm = () => {
+  message({
+    text: 'confirm',
+    type: 'success'
+  })
+}
+
+</script>
+
+
+

package/examples/layout/divider/DividerIndex.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Divider 分割线</h1>
+      <p class="page-description">区隔内容的分割线。</p>
+    </div>
+
+
+    <basic/>
+    <content/>
+    <type/>
+    <vertical/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Basic from "./basic.vue";
+import Content from "./content.vue";
+import Type from "./type.vue";
+import Vertical from "./vertical.vue";
+</script>
+
+<style scoped lang="less">
+@import "../../components/page-styles.less";
+</style>

package/examples/layout/divider/basic.vue

@@ -0,0 +1,15 @@
+<template>
+	<div>
+		为天地立心
+		<p-divider></p-divider>
+		为生民立命
+		<p-divider></p-divider>
+		为往圣继绝学
+		<p-divider></p-divider>
+		为万世开太平
+		<p-divider></p-divider>
+	</div>
+</template>
+<script setup lang="ts">
+import PDivider from "@bin-ui/components/divider/src/divider.vue";
+</script>

package/examples/layout/divider/content.vue

@@ -0,0 +1,15 @@
+<template>
+	<div>
+		为天地立心
+		<p-divider prefix-icon="user2" placement="start"></p-divider>
+		为生民立命
+		<p-divider text="🌸" placement="60%"></p-divider>
+		为往圣继绝学
+		<p-divider text="✨" placement="end" ></p-divider>
+		为万世开太平
+		<p-divider >张横渠</p-divider>
+	</div>
+</template>
+<script setup lang="ts">
+import PDivider from "@bin-ui/components/divider/src/divider.vue";
+</script>

package/examples/layout/divider/type.vue

@@ -0,0 +1,13 @@
+<template>
+	<div>
+		<p-divider status="dashed"></p-divider>
+		醉后不知天在水
+		<p-divider status="solid"></p-divider>
+		满船清梦压星河
+		<p-divider status="dashed"></p-divider>
+
+	</div>
+</template>
+<script setup lang="ts">
+import PDivider from "@bin-ui/components/divider/src/divider.vue";
+</script>

package/examples/layout/divider/vertical.vue

@@ -0,0 +1,12 @@
+<template>
+	<div>
+		欲买桂花同载酒
+		<p-divider direction="vertical"></p-divider>
+		终不似
+		<p-divider direction="vertical"></p-divider>
+		少年游
+	</div>
+</template>
+<script setup lang="ts">
+import PDivider from "@bin-ui/components/divider/src/divider.vue";
+</script>

package/examples/layout/grid/GridIndex.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Grid 栅格</h1>
+      <p class="page-description">通过基础的 24 分栏，迅速简便地创建布局。</p>
+    </div>
+
+
+    <basic/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Basic from "./basic.vue";
+</script>
+
+<style scoped lang="less">
+@import "../../components/page-styles.less";
+</style>

package/examples/layout/grid/basic.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="pixel-demo-item--grid">
+    <p-row v-for="(i, idx) in demoCols" :key="idx">
+      <p-col v-for="(j, jdx) in i" :key="jdx" :span="j">
+        <div>{{ j }}</div>
+      </p-col>
+    </p-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PRow from "@bin-ui/components/grid/src/row.vue";
+import PCol from "@bin-ui/components/grid/src/col.vue";
+
+const demoCols = [
+  Array(12).fill(1),
+  Array(6).fill(2),
+  Array(4).fill(3),
+  Array(3).fill(4),
+  Array(2).fill(6),
+  Array(1).fill(12),
+];
+</script>
+
+<style scoped lang="less">
+.pixel-demo-item--grid {
+  margin: 24px 0 48px;
+  background-color: #fff;
+  color: rgba(0, 0, 0, .9);
+  border: 1px solid #e7e7e7;
+  border-radius: 6px;
+
+  .p-col>div {
+    min-height: 40px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    background: #366ef4;
+    color: #fff;
+    text-align: center;
+    line-height: 40px;
+  }
+
+  .p-col:nth-of-type(2n)>div {
+    background: #8eabff;
+  }
+}
+</style>

package/examples/layout/layoutContainer/LayoutIndex.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Layout 布局容器</h1>
+      <p class="page-description">用于布局的容器组件，方便快速搭建页面的基本结构。</p>
+    </div>
+
+    <basic/>
+    <br/>
+    <side/>
+    <br/>
+    <assembly/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Basic from "./basic.vue";
+import Side from "./side.vue";
+import Assembly from "./assembly.vue";
+</script>
+
+<style scoped lang="less">
+@import "../../components/page-styles.less";
+</style>