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

package/examples/feedback/confirm/type.vue

@@ -0,0 +1,68 @@
+<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 PButton from "@bin-ui/components/button/src/button.vue";
+import {confirm} from "@bin-ui/components";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+
+const handleClick = (type: string) => {
+
+  if (type === 'success') {
+    confirm({
+      type: 'success',
+      text: 'success confirm.'
+    })
+  } else if (type === 'info') {
+    confirm({
+      type: 'info',
+      text: 'info confirm.'
+    })
+  } else if (type === 'warning') {
+    confirm({
+      type: 'warning',
+      text: 'warning confirm.'
+    })
+  } else if (type === 'danger') {
+    confirm({
+      type: 'danger',
+      text: 'danger confirm.'
+    })
+  }
+}
+
+</script>
+
+
+

package/examples/feedback/dialog/DialogIndex.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Dialog 对话框</h1>
+      <p class="page-description">在保留当前页面状态的情况下，告知用户并承载相关操作。</p>
+    </div>
+
+    <basic-dialog />
+    <define-dialog />
+    <draggable-dialog />
+    <before-close-dialog />
+    <close-dialog />
+    <mark-dialog />
+    <part-dialog />
+    <top-dialog />
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicDialog from "./basic.vue";
+import BeforeCloseDialog from "./beforeClose.vue";
+import CloseDialog from "./close.vue";
+import DefineDialog from "./define.vue";
+import DraggableDialog from "./draggable.vue";
+import MarkDialog from "./mark.vue";
+import PartDialog from "./part.vue";
+import TopDialog from "./top.vue";
+</script>
+
+<style scoped lang="less">
+@import "../../components/page-styles.less";
+</style>

package/examples/feedback/dialog/basic.vue

@@ -0,0 +1,46 @@
+<template>
+  <demo-block 
+    title="基础用法" 
+    description="Dialog 弹出一个对话框，适合需要定制性更大的场景。"
+  >
+    <p-button @click="dialogVisible = true">打开 Dialog</p-button>
+    
+    <p-dialog
+      v-model="dialogVisible"
+      title="提示"
+      width="500px"
+    >
+      <p>这是一段对话框内容</p>
+      <p>这是一段对话框内容</p>
+      <p>这是一段对话框内容</p>
+    </p-dialog>
+
+    <template #code>
+      <pre><code>&lt;script setup&gt;
+import { ref } from 'vue'
+const dialogVisible = ref(false)
+&lt;/script&gt;
+
+&lt;template&gt;
+  &lt;p-button @click="dialogVisible = true"&gt;打开 Dialog&lt;/p-button&gt;
+  
+  &lt;p-dialog
+    v-model="dialogVisible"
+    title="提示"
+  &gt;
+    &lt;p&gt;这是一段对话框内容&lt;/p&gt;
+  &lt;/p-dialog&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 dialogVisible = ref(false);
+</script>
+
+<style scoped lang="less">
+</style>

package/examples/feedback/dialog/beforeClose.vue

@@ -0,0 +1,45 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="10" wrap>
+    <p-button  @click="handleClick">关闭前的回调对话框</p-button>
+    <p-dialog
+        v-model="f"
+        title="header"
+        :before-close="beforeClose"
+    >
+      wink🥰~
+    </p-dialog>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PDialog from "@bin-ui/components/dialog/src/dialog.vue";
+import {confirm} from "@bin-ui/components";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+
+const f = ref<Boolean>(false);
+
+const handleClick = () => {
+	f.value = !f.value;
+}
+
+const beforeClose = (done:() => void ) => {
+	confirm({
+		type:'info',
+		title:'确认要关闭这个对话框么?'
+	}).then(() => {
+		done();
+	}).catch(e => {
+		// 	ERR
+	})
+}
+
+</script>
+<style scoped lang="less">
+.p-row {
+  margin-bottom: 20px;
+}
+</style>
+
+

package/examples/feedback/dialog/close.vue

@@ -0,0 +1,31 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="10" wrap>
+    <p-button @click="f1 =!f1">ESC/点击遮罩关闭对话框</p-button>
+    <p-dialog
+        v-model="f1"
+        title="header"
+        :show-foot="true"
+        :close-on-click-mark="false"
+        :close-on-press-escape="false"
+    >
+
+    </p-dialog>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PDialog from "@bin-ui/components/dialog/src/dialog.vue";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+
+const f1 = ref<Boolean>(false);
+
+</script>
+<style scoped lang="less">
+.p-row {
+  margin-bottom: 20px;
+}
+</style>
+
+

package/examples/feedback/dialog/define.vue

@@ -0,0 +1,43 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="10" wrap>
+    <p-button  @click="handleClick">自定义对话框</p-button>
+    <p-dialog
+        v-model="f"
+        ref="dialog"
+        title="修改默认标题"
+        :show-close-icon="false"
+    >
+      body 区域
+      <template #footer>
+        <p-button type="cyan" @click="handleClick2">点击确认</p-button>
+      </template>
+    </p-dialog>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {PDialogInstance} from "@bin-ui/components";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+
+const f = ref<Boolean>(false);
+const dialog = ref<PDialogInstance>(null);
+
+const handleClick = () => {
+	f.value = !f.value;
+}
+
+const handleClick2 = () => {
+	dialog.value.confirm();
+}
+
+
+</script>
+<style scoped lang="less">
+.p-row {
+  margin-bottom: 20px;
+}
+</style>
+
+

package/examples/feedback/dialog/draggable.vue

@@ -0,0 +1,31 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="10" wrap>
+    <p-button @click="f1 =!f1">可拖拽对话框</p-button>
+    <p-dialog
+        v-model="f1"
+        title="试着拖动我吧"
+        :show-foot="true"
+        draggable
+    >
+      body 区域
+    </p-dialog>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+
+import {ref} from "vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PDialog from "@bin-ui/components/dialog/src/dialog.vue";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+
+const f1 = ref<Boolean>(false);
+
+</script>
+<style scoped lang="less">
+.p-row {
+  margin-bottom: 20px;
+}
+</style>
+
+

package/examples/feedback/dialog/mark.vue

@@ -0,0 +1,29 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="10" wrap>
+    <p-button ghost type="primary"  @click="f1 =!f1">不带遮罩</p-button>
+    <p-dialog
+        v-model="f1"
+        title="header"
+        :show-foot="true"
+        :show-mark="false"
+    >
+    </p-dialog>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PDialog from "@bin-ui/components/dialog/src/dialog.vue";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+
+const f1 = ref<Boolean>(false);
+
+</script>
+
+<style scoped lang="less">
+.p-row {
+  margin-bottom: 20px;
+}
+</style>
+

package/examples/feedback/dialog/part.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <p-button @click="handleClick" style="margin-bottom: 20px">局部对话框</p-button>
+    <div style="width: 90%;height: 500px;border: solid 1px #a19999;position: relative">
+      <p-dialog
+          v-model="f"
+          part
+      >
+        wink🥰~
+      </p-dialog>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import {ref} from "vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+import PDialog from "@bin-ui/components/dialog/src/dialog.vue";
+
+const f = ref(false);
+
+const handleClick = () => {
+  f.value = !f.value;
+}
+
+</script>
+
+<style scoped lang="less">
+
+</style>
+

package/examples/feedback/dialog/top.vue

@@ -0,0 +1,39 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="10" wrap>
+    <p-button @click="f1 =!f1">偏移量top = 10vh</p-button>
+    <p-button @click="f2 = !f2">偏移量top = unset</p-button>
+
+    <p-dialog
+        v-model="f1"
+        title="header"
+        :show-foot="true"
+        top="10vh"
+    >
+    </p-dialog>
+    <p-dialog
+        v-model="f2"
+        title="header"
+        :show-foot="true"
+        top="unset"
+    >
+    </p-dialog>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+import PDialog from "@bin-ui/components/dialog/src/dialog.vue";
+
+const f1 = ref<Boolean>(false);
+const f2 = ref<Boolean>(false);
+
+</script>
+
+<style scoped lang="less">
+.p-row {
+  margin-bottom: 20px;
+}
+</style>
+

package/examples/feedback/drawer/DrawerIndex.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Drawer 抽屉</h1>
+      <p class="page-description">有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验。</p>
+    </div>
+
+
+    <basic-drawer/>
+    <head-foot-drawer/>
+    <part-drawer/>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import BasicDrawer from "./basic.vue";
+import HeadFootDrawer from "./headFoot.vue";
+import PartDrawer from "./part.vue";
+</script>
+
+<style scoped lang="less">
+@import "../../components/page-styles.less";
+</style>

package/examples/feedback/drawer/basic.vue

@@ -0,0 +1,30 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="20">
+    <p-button @click="handleClick('top')">top drawer</p-button>
+    <p-button @click="handleClick('right')">right drawer</p-button>
+    <p-button @click="handleClick('bottom')">bottom drawer</p-button>
+    <p-button @click="handleClick('left')">left drawer</p-button>
+  </p-row>
+  <p-drawer :position="placement" v-model="f" title="drawer title">
+    body 区域
+  </p-drawer>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue"
+import PButton from "@bin-ui/components/button/src/button.vue";
+
+type Placement = 'top' | 'right' | 'bottom' | 'left';
+
+const f = ref<boolean>(false);
+const placement = ref<Placement>("top");
+
+const handleClick = (p: Placement) => {
+  placement.value = p;
+  f.value = !f.value;
+}
+
+</script>
+
+
+

package/examples/feedback/drawer/headFoot.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <p-button @click="handleClick">触发一个抽屉</p-button>
+    <p-drawer
+        v-model="f"
+        ref="drawer"
+        title="修改默认标题"
+        :show-close-icon="false"
+        position="right"
+    >
+      body 区域
+      <template #footer>
+        <p-button type="cyan" @click="handleClick2">点击确认</p-button>
+      </template>
+    </p-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {PDialogInstance} from "@bin-ui/components";
+
+const f = ref<Boolean>(false);
+const drawer = ref<PDialogInstance>(null);
+
+const handleClick = () => {
+  f.value = !f.value;
+}
+
+const handleClick2 = () => {
+  drawer.value.confirm();
+}
+
+
+</script>
+
+
+

package/examples/feedback/drawer/part.vue

@@ -0,0 +1,42 @@
+<template>
+	<p-row justify-content="flex-start" :gutter="20">
+		<p-button @click="handleClick('top')">top drawer</p-button>
+		<p-button @click="handleClick('right')">right drawer</p-button>
+		<p-button @click="handleClick('bottom')">bottom drawer</p-button>
+		<p-button @click="handleClick('left')">left drawer</p-button>
+	</p-row>
+	<p-row justify-content="center">
+		<div style="width: 90%;height: 500px;border: solid 1px #a19999;position: relative">
+			<p-drawer
+				v-model="f"
+				part
+				:position="placement"
+			>
+				wink🥰~
+			</p-drawer>
+		</div>
+	</p-row>
+
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue"
+import PButton from "@bin-ui/components/button/src/button.vue";
+
+type Placement = 'top' | 'right' | 'bottom' | 'left';
+
+const f = ref<boolean>(false);
+const placement = ref<Placement>("top");
+
+
+const handleClick = (p: Placement) => {
+	placement.value = p;
+	f.value = !f.value;
+
+}
+
+
+</script>
+
+
+

package/examples/feedback/message/MessageIndex.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Message 消息提示</h1>
+      <p class="page-description">常用于主动操作后的反馈提示。</p>
+    </div>
+
+
+    <basic-message/>
+    <close-message/>
+    <icon-message/>
+    <offset-message/>
+    <time-message/>
+    <type-message/>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import BasicMessage from "./basic.vue";
+import CloseMessage from "./close.vue";
+import IconMessage from "./icon.vue";
+import OffsetMessage from "./offset.vue";
+import TimeMessage from "./time.vue";
+import TypeMessage from "./type.vue";
+</script>
+
+<style scoped lang="less">
+@import "../../components/page-styles.less";
+</style>

package/examples/feedback/message/basic.vue

@@ -0,0 +1,87 @@
+<template>
+  <demo-block 
+    title="基础用法" 
+    description="从顶部出现，3 秒后自动消失。"
+  >
+    <p-row justify-content="flex-start" :gutter="12">
+      <p-button @click="showMessage">默认消息</p-button>
+      <p-button type="success" @click="showSuccess">成功消息</p-button>
+      <p-button type="warning" @click="showWarning">警告消息</p-button>
+      <p-button type="danger" @click="showError">错误消息</p-button>
+      <p-button type="info" @click="showInfo">信息消息</p-button>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;script setup&gt;
+import { message } from '@bin-ui/components'
+
+const showMessage = () => {
+  message({
+    text: '这是一条普通消息'
+  })
+}
+
+const showSuccess = () => {
+  message({
+    type: 'success',
+    text: '恭喜你，操作成功！'
+  })
+}
+
+const showWarning = () => {
+  message({
+    type: 'warning',
+    text: '警告，请注意风险！'
+  })
+}
+&lt;/script&gt;
+
+&lt;template&gt;
+  &lt;p-button @click="showMessage"&gt;默认消息&lt;/p-button&gt;
+  &lt;p-button type="success" @click="showSuccess"&gt;成功消息&lt;/p-button&gt;
+&lt;/template&gt;</code></pre>
+    </template>
+  </demo-block>
+</template>
+
+<script setup lang="ts">
+import DemoBlock from "../../components/DemoBlock.vue";
+import { message } from "@bin-ui/components";
+
+const showMessage = () => {
+  message({
+    text: '这是一条普通消息'
+  })
+}
+
+const showSuccess = () => {
+  message({
+    type: 'success',
+    text: '恭喜你，操作成功！'
+  })
+}
+
+const showWarning = () => {
+  message({
+    type: 'warning',
+    text: '警告，请注意风险！'
+  })
+}
+
+const showError = () => {
+  message({
+    type: 'danger',
+    text: '抱歉，操作失败了'
+  })
+}
+
+const showInfo = () => {
+  message({
+    type: 'info',
+    text: '这是一条提示消息'
+  })
+}
+</script>
+
+<style scoped lang="less">
+</style>

package/examples/feedback/message/close.vue

@@ -0,0 +1,27 @@
+<template>
+	<div>
+		<p-button
+			variant="empty"
+			@click="handleClick"
+		>
+			showCloseIcon
+		</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:'具有close图标',
+		showCloseIcon:true
+	})
+
+}
+
+</script>
+
+
+