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

package/examples/navi/menu/MenuIndex.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <head-menu/>
+    <br/>
+    <side-menu/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import HeadMenu from "./HeadMenu.vue";
+import SideMenu from "./SideMenu.vue";
+</script>
+
+<style scoped lang="less">
+
+</style>

package/examples/navi/menu/SideMenu.vue

@@ -0,0 +1,13 @@
+<template>
+  <div style="border: solid 10px #a19999;position: relative">
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less">
+
+</style>

package/examples/navi/tabs/TabsIndex.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Tabs 标签页</h1>
+      <p class="page-description">分隔内容上有关联但属于不同类别的数据集合。</p>
+    </div>
+
+    <basic/>
+    <br/>
+    <position/>
+    <br/>
+    <editor/>
+
+    <api-table title="Tabs Props" :data="tabsProps" />
+    <api-table title="Tabs Events" :data="tabsEvents" :headers="eventHeaders" />
+    
+    <api-table title="TabPanel Props" :data="tabPanelProps" style="margin-top: 32px;" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Basic from "./basic.vue";
+import Position from "./position.vue";
+import Editor from "./editor.vue";
+import ApiTable from "../../components/ApiTable.vue";
+
+const tabsProps = [
+  { name: 'modelValue / v-model', description: '当前激活的标签页', type: 'string | number', default: '-' },
+  { name: 'theme', description: '标签页主题', type: "'normal' | 'card'", default: 'normal' },
+  { name: 'placement', description: '标签位置', type: "'top' | 'bottom' | 'left' | 'right'", default: 'top' },
+  { name: 'size', description: '标签页尺寸', type: "'small' | 'normal' | 'large'", default: 'normal' },
+  { name: 'addable', description: '是否可添加', type: 'boolean', default: 'false' },
+  { name: 'disabled', description: '是否禁用', type: 'boolean', default: 'false' },
+  { name: 'dragSort', description: '是否支持拖拽排序', type: 'boolean', default: 'false' },
+]
+
+const eventHeaders = {
+  name: '事件名',
+  description: '说明',
+  type: '回调参数',
+  default: '-'
+}
+
+const tabsEvents = [
+  { name: 'update:modelValue', description: '标签页切换时触发', type: 'value: string | number', default: '-' },
+  { name: 'change', description: '标签页切换时触发', type: 'value: string | number', default: '-' },
+  { name: 'add', description: '点击添加按钮时触发', type: 'event: MouseEvent', default: '-' },
+  { name: 'remove', description: '点击删除按钮时触发', type: '{ value, index, e }', default: '-' },
+  { name: 'dragSort', description: '拖拽排序时触发', type: 'context: TabsDragSortContext', default: '-' },
+]
+
+const tabPanelProps = [
+  { name: 'value', description: '标签页的值', type: 'string | number', default: '-' },
+  { name: 'label', description: '标签页标题', type: 'string', default: '-' },
+  { name: 'disabled', description: '是否禁用', type: 'boolean', default: 'false' },
+  { name: 'removable', description: '是否可删除', type: 'boolean', default: 'false' },
+  { name: 'lazy', description: '是否延迟加载', type: 'boolean', default: 'false' },
+]
+</script>
+
+<style scoped lang="less">
+@import "../../components/page-styles.less";
+</style>

package/examples/navi/tabs/basic.vue

@@ -0,0 +1,81 @@
+<template>
+  <div style="border: solid 10px #a19999; position: relative; overflow: hidden;">
+    <p-row justify-content="flex-start" :gutter="10" wrap>
+      <p-button @click="setTheme('normal')">常规型</p-button>
+      <p-button @click="setTheme('card')">卡片型</p-button>
+    </p-row>
+    <!-- 方式一： p-tab-panel 方式 -->
+    <p-tabs :value="value1" :theme="theme" @change="onTabChange1">
+      <!-- 默认插槽 和 具名插槽（panel）都是用来渲染面板内容 -->
+      <p-tab-panel :value="1">
+        <template #label>
+          <p-icon target="home"/>
+          首页
+        </template>
+        <p style="padding: 25px">选项卡1的内容，使用 p-tab-panel 渲染</p>
+      </p-tab-panel>
+      <p-tab-panel :value="2" label="选项卡2" :destroy-on-hide="false">
+        <p slot="panel" style="padding: 25px">选项卡2的内容，使用 p-tab-panel 渲染</p>
+      </p-tab-panel>
+      <p-tab-panel :value="3" label="选项卡3" :panel="panelRender"/>
+    </p-tabs>
+
+    <!-- 方式二：使用 list 定义 Tab -->
+    <p-tabs v-model="value2" :theme="theme" :list="tabList" @change="onTabChange2"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PTabs from "@bin-ui/components/tabs/src/tabs.vue";
+import PTabPanel from "@bin-ui/components/tabs/src/tab-panel.vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+import {ref} from "vue";
+import PIcon from "@bin-ui/components/icon/src/icon.vue";
+import {message} from "@bin-ui/components";
+
+const theme = ref('normal');
+const tabList = [
+  {
+    label: '选项卡一',
+    value: 1,
+    panel: (h) => h('p', {style: 'padding: 25px'}, '选项卡1的内容，使用 p-tabs 渲染'),
+  },
+  {
+    label: '选项卡二',
+    value: 2,
+    disabled: true,
+    panel: (h) => h('p', {style: 'padding: 25px'}, '选项卡2的内容，使用 p-tabs 渲染'),
+  },
+  {
+    label: '选项卡三',
+    value: 3,
+    panel: (h) => h('p', {style: 'padding: 25px'}, '选项卡3的内容，使用 p-tabs 渲染'),
+  },
+];
+
+const panelRender = (h) => {
+  return h('p', {style: 'padding: 25px'}, '选项卡3的内容，使用 t-tab-panel 渲染');
+};
+
+function setTheme(v: string) {
+  theme.value = v;
+}
+
+const value1 = ref(1);
+const value2 = ref(1);
+
+const onTabChange1 = (newValue: number) => {
+  message({
+    text: '选项卡1选中：' + newValue,
+  })
+  value1.value = newValue
+};
+const onTabChange2 = (newValue: number) => {
+  message({
+    text: '选项卡2选中：' + newValue,
+  })
+  value2.value = newValue
+};
+
+</script>

package/examples/navi/tabs/editor.vue

@@ -0,0 +1,130 @@
+<template>
+  <div style="border: solid 10px #a19999; position: relative; overflow: hidden;">
+    <!-- 可添加删除 -->
+    <p-tabs v-model="value" :theme="theme" :addable="true" @add="addTab" @remove="removeTab">
+      <p-tab-panel
+          v-for="data in panelData"
+          :key="data.value"
+          :value="data.value"
+          :label="data.label"
+          :removable="data.removable"
+      >
+        <p style="padding: 25px">
+          {{ data.content }}
+        </p>
+      </p-tab-panel>
+    </p-tabs>
+
+    <!-- 可分页 -->
+    <p-tabs v-model="value2" :theme="theme" :scroll-position="scrollPosition">
+      <p-tab-panel v-for="index in 30" :key="index" :value="index + ''" :label="`选项卡${index}`">
+        <p style="padding: 25px">选项卡{{ index }}</p>
+      </p-tab-panel>
+    </p-tabs>
+
+    <!-- 可拖拽 -->
+    <p-tabs drag-sort :value="value3" :theme="theme" @drag-sort="onDragend3" @change="onTabChange3">
+      <p-tab-panel
+          v-for="data in panelData3"
+          :key="data.value"
+          :value="data.value"
+          :label="data.label"
+          :draggable="data.draggable"
+      >
+        <p style="padding: 25px">
+          {{ data.content }}
+        </p>
+      </p-tab-panel>
+    </p-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue';
+import PTabs from "@bin-ui/components/tabs/src/tabs.vue";
+import PTabPanel from "@bin-ui/components/tabs/src/tab-panel.vue";
+
+let id = 10;
+const theme = ref('normal');
+const value = ref('1');
+const panelData = ref([
+  {
+    value: '1',
+    label: '原有选项卡1',
+    removable: true,
+    content: '原有选项卡1内容',
+  },
+  {
+    value: '2',
+    label: '原有选项卡2',
+    removable: true,
+    content: '原有选项卡2内容',
+  },
+  {
+    value: '3',
+    label: '原有选项卡3',
+    removable: true,
+    content: '原有选项卡3内容',
+  },
+]);
+const onDragend = ({currentIndex, targetIndex}) => {
+  [panelData.value[currentIndex], panelData.value[targetIndex]] = [
+    panelData.value[targetIndex],
+    panelData.value[currentIndex],
+  ];
+};
+const addTab = () => {
+  panelData.value.push({
+    value: `${id}`,
+    label: `新选项卡${id}`,
+    removable: true,
+    content: '新选项卡内容',
+  });
+  value.value = `${id}`;
+  id += 1;
+};
+const removeTab = ({value: val, index}) => {
+  if (index < 0) return false;
+  panelData.value.splice(index, 1);
+  if (panelData.value.length === 0) return;
+  if (value.value === val) {
+    value.value = panelData.value[Math.max(index - 1, 0)].value;
+  }
+};
+
+
+const scrollPosition = ref('auto');
+const value2 = ref('22');
+
+
+const value3 = ref('1');
+const panelData3 = ref([
+  {
+    value: '1',
+    label: '固定的选项卡1',
+    content: '选项卡1内容',
+    draggable: false,
+  },
+  {
+    value: '2',
+    label: '可拖拽选项卡2',
+    content: '选项卡2内容',
+  },
+  {
+    value: '3',
+    label: '可拖拽的选项卡3',
+    content: '选项卡2内容',
+  },
+]);
+const onDragend3 = ({ currentIndex, targetIndex }) => {
+  [panelData3.value[currentIndex], panelData3.value[targetIndex]] = [
+    panelData3.value[targetIndex],
+    panelData3.value[currentIndex],
+  ];
+};
+const onTabChange3 = (newValue: string) => (value3.value = newValue);
+</script>
+
+<style scoped lang="less">
+
+</style>

package/examples/navi/tabs/position.vue

@@ -0,0 +1,46 @@
+<template>
+  <div style="border: solid 10px #a19999; position: relative; overflow: hidden;">
+    <p-row justify-content="flex-start" :gutter="10" wrap>
+      <p-button @click="setPlacement('top')">top</p-button>
+      <p-button @click="setPlacement('right')">right</p-button>
+      <p-button @click="setPlacement('bottom')">bottom</p-button>
+      <p-button @click="setPlacement('left')">left</p-button>
+    </p-row>
+    <p-tabs :value="value" :placement="placement" @change="handlerChange">
+      <p-tab-panel value="first" label="选项卡1">
+        <p style="padding: 25px">选项卡1</p>
+      </p-tab-panel>
+      <p-tab-panel value="second" label="选项卡2">
+        <p style="padding: 25px">选项卡2</p>
+      </p-tab-panel>
+      <p-tab-panel value="third" label="选项卡3">
+        <p style="padding: 25px">选项卡3</p>
+      </p-tab-panel>
+    </p-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PTabs from "@bin-ui/components/tabs/src/tabs.vue";
+import PTabPanel from "@bin-ui/components/tabs/src/tab-panel.vue";
+
+import {ref} from 'vue';
+import PRow from "@bin-ui/components/grid/src/row.vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+
+const value = ref('first');
+const placement = ref('top');
+
+function setPlacement(value: string) {
+  placement.value = value;
+}
+
+const handlerChange = (newValue: string) => {
+  value.value = newValue;
+};
+
+</script>
+
+<style scoped lang="less">
+
+</style>

package/examples/style.css

@@ -0,0 +1,48 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #303133;
+  background: #f5f7fa;
+}
+
+#app {
+  width: 100%;
+  min-height: 100vh;
+}
+
+ul, dl, ol {
+  margin: 0;
+  padding: 0 0 0 1.2em;
+  line-height: 1.6;
+}
+
+a {
+  color: #409eff;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #66b1ff;
+}
+
+code {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  background: #f5f7fa;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+pre code {
+  background: transparent;
+  padding: 0;
+}

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>bin-ui</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/examples/main.ts"></script>
+  </body>
+</html>

package/index.ts

@@ -0,0 +1,27 @@
+/*
+ * @description: UI 组件注册
+ * @author: MC.Yang
+ */
+
+// css 特别注意全局样式最先引入
+import "./packages/styles/global.less";
+import {App} from "vue";
+import {IndexManager} from "@bin-ui/tools";
+import {SuiOptions} from "@bin-ui/typings";
+import installer from "@bin-ui/components/installer";
+
+export * from "@bin-ui/components"
+export * from "@bin-ui/hooks"
+export * from "@bin-ui/tools"
+export * from "@bin-ui/typings"
+
+const init = function (options?:Partial<SuiOptions>) {
+    if (!options) return;
+    const {zIndex = 2000} = options;
+    new IndexManager(zIndex);
+}
+
+export default function (vue:App, options?:Partial<SuiOptions>){
+    init(options);
+    installer(vue);
+}