fit2cloud-ui-plus 0.0.1-beta.3 → 0.0.1-beta.5

package/examples/pages/split-pane/demo/CustomResizer.vue

@@ -1,47 +0,0 @@
-<demo>嵌套用法</demo>
-<template>
-  <div>
-    <div class="demo-split">
-      <fu-split-pane left="200" direction="horizontal" :resizer-style="{width:'10px'}">
-        <template v-slot:left>
-          <div style="padding-right:5px">
-            Left
-          </div>
-        </template>
-        <template v-slot:resizer>
-          <i class="el-icon-d-caret"></i>
-        </template>
-        <template v-slot:right>
-          <div style="padding-left:5px">
-            Right
-          </div>
-        </template>
-      </fu-split-pane>
-    </div>
-    <el-divider></el-divider>
-    <div class="demo-split">
-      <fu-split-pane top="50%" direction="vertical" :resizer-style="{height:'10px'}">
-        <template v-slot:top>
-          Top
-        </template>
-        <template v-slot:resizer>
-          <i class="el-icon-d-caret"></i>
-        </template>
-        <template v-slot:bottom>
-          <div style="padding-top:5px">
-            Bottom
-          </div>
-        </template>
-      </fu-split-pane>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-</script>
-<style lang="scss" scoped>
-.demo-split {
-  height: 200px;
-  border: 1px solid #dcdee2;
-}
-</style>

package/examples/pages/split-pane/demo/NestSplit.vue

@@ -1,34 +0,0 @@
-<demo>线状分割</demo>
-<template>
-  <div class="demo-split">
-    <fu-split-pane left="200" direction="horizontal">
-      <template v-slot:left>
-        <div class="demo-split-child">
-          <fu-split-pane top="50%" direction="vertical">
-            <template v-slot:top>
-              Top
-            </template>
-            <template v-slot:bottom>
-              Bottom
-            </template>
-          </fu-split-pane>
-        </div>
-      </template>
-      <template v-slot:right>
-        Right
-      </template>
-    </fu-split-pane>
-  </div>
-</template>
-
-<script setup lang="ts">
-</script>
-<style lang="scss" scoped>
-.demo-split {
-  height: 200px;
-  border: 1px solid #dcdee2;
-}
-.demo-split-child {
-  height: 200px;
-}
-</style>

package/examples/pages/split-pane/demo/ResizerType.vue

@@ -1,60 +0,0 @@
-<demo>自定义分割节点</demo>
-<template>
-  <div>
-    <el-divider content-position="left">线状分割</el-divider>
-    <div class="demo-split">
-      <fu-split-pane left="200px" resizer-type="line" :resizable="false">
-        <template v-slot:left>
-          Left
-        </template>
-        <template v-slot:right>
-          Right
-        </template>
-      </fu-split-pane>
-    </div>
-    <el-divider content-position="left">定义分割线样式</el-divider>
-    <div class="demo-split">
-      <fu-split-pane left="200px" resizer-type="line" :resizable="false"
-        :resizer-style="{background:'none'}">
-        <template v-slot:left>
-          <div class="demo-split-child">
-            <fu-split-pane top="50%" direction="vertical" resizer-type="line"
-              :resizer-style="{background:'none'}">
-              <template v-slot:top>
-                <div class="pane" style="background: #f9e29a;">
-                  Top
-                </div>
-              </template>
-              <template v-slot:bottom>
-                <div class="pane" style="background: #a8dfd3;">
-                  Bottom
-                </div>
-              </template>
-            </fu-split-pane>
-          </div>
-        </template>
-        <template v-slot:right>
-          <div class="pane" style="background: #fbbbbb;">
-            Right
-          </div>
-        </template>
-      </fu-split-pane>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-<style lang="scss" scoped>
-.demo-split {
-  height: 200px;
-  border: 1px solid #dcdee2;
-  .pane {
-    height: 100%;
-  }
-}
-.demo-split-child {
-  height: 200px;
-}
-</style>

package/examples/pages/split-pane/index.vue

@@ -1,61 +0,0 @@
-<template>
-  <div>
-    <!-- 一级标题 -->
-    <h1 class="component-h1">SplitPane 分割面板</h1>
-    <!-- 一级描述 -->
-    <p>可将一片区域，分割为可以拖拽调整宽度或高度的两部分区域。</p>
-    <!--内容 -->
-    <div class="component-block" v-for="(item, index) in comList" :key="index">
-      <h2>{{ item.title }}</h2>
-      <p>{{ item.titleDesc }}</p>
-      <code-example :component="item.component" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import BaseSplit from "./demo/BaseSplit.vue";
-import NestSplit from "./demo/NestSplit.vue";
-import ResizerType from "./demo/ResizerType.vue";
-import CustomResizer from "./demo/CustomResizer.vue";
-const comList = [
-  {
-    title: "基本用法",
-    titleDesc: "",
-    component: BaseSplit,
-  },
-  {
-    title: "嵌套用法",
-    titleDesc: "",
-    component: NestSplit,
-  },
-  {
-    title: "线状分割",
-    titleDesc: "分割线可定义为线状，也可以禁止拖动",
-    component: ResizerType,
-  },
-  {
-    title: "自定义分割节点",
-    titleDesc: "分割节点可替换图标，如果发现宽度不合适，可自行调整分割线宽度样式",
-    component: CustomResizer,
-  },
-]
-
-</script>
-
-<style lang="scss" scoped>
-.component-block {
-  margin-top: 40px;
-
-  p {
-    font-size: 14px;
-    color: #5e6d82;
-    line-height: 1.5em;
-  }
-
-  h2 {
-    font-weight: 400;
-    color: #1f2f3d;
-  }
-}
-</style>

package/examples/pages/table/demo/BaseTable.vue

@@ -1,35 +0,0 @@
-<demo>基本用法</demo>
-
-<template>
-  <fu-table :data="tableData" style="width: 100%">
-    <el-table-column type="selection"></el-table-column>
-    <el-table-column prop="date" label="日期" width="180"></el-table-column>
-    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
-    <el-table-column prop="address" label="地址"></el-table-column>
-  </fu-table>
-</template>
-
-<script setup lang="ts">
-const tableData = [
-  {
-    date: "2016-05-02",
-    name: "张三",
-    address: "北京朝阳区财富中心 0室",
-  },
-  {
-    date: "2016-05-04",
-    name: "张三",
-    address: "北京朝阳区财富中心 1室",
-  },
-  {
-    date: "2016-05-01",
-    name: "张三",
-    address: "北京朝阳区财富中心 2室",
-  },
-  {
-    date: "2016-05-03",
-    name: "张三",
-    address: "北京朝阳区财富中心 3室",
-  }
-]
-</script>

package/examples/pages/table/demo/DropdownColumn.vue

@@ -1,89 +0,0 @@
-<demo>列组件下拉菜单</demo>
-<template>
-    <el-radio-group v-model="showType" style="margin-bottom: 20px">
-        <el-radio-button label="always">always</el-radio-button>
-        <el-radio-button label="hover">hover</el-radio-button>
-        <el-radio-button label="selected">selected</el-radio-button>
-    </el-radio-group>
-    <fu-table :data="tableData" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" />
-        <fu-table-column-dropdown :menus="menus" :title="`已选中${selectRows.length}项`" :showType="showType" />
-        <el-table-column prop="date" label="日期" min-width="180" />
-        <el-table-column prop="name" label="姓名" min-width="180" />
-        <el-table-column prop="address" label="地址" min-width="300" />
-    </fu-table>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue"
-
-interface User {
-    id: number
-    date: string
-    name: string
-    address: string
-}
-
-// *****此处类型争议
-const selectRows = ref([])
-const showType = ref("always")
-const tableData: User[] = [
-    {
-        id: 1,
-        date: "2016-05-01",
-        name: "张三",
-        address: "北京朝阳区财富中心 0室",
-    },
-    {
-        id: 2,
-        date: "2016-05-02",
-        name: "张三",
-        address: "北京朝阳区财富中心 1室",
-    },
-    {
-        id: 3,
-        date: "2016-05-01",
-        name: "张三",
-        address: "北京朝阳区财富中心 2室",
-    },
-    {
-        id: 4,
-        date: "2016-05-03",
-        name: "张三",
-        address: "北京朝阳区财富中心 3室",
-    },
-]
-const menus = [
-    {
-        label: "批量编辑",
-        icon: "Edit",
-        click: (row: User) => {
-            console.log("编辑:" + row.name);
-        },
-    },
-    {
-        label: "批量移动",
-        icon: "Switch",
-        click: (row: User) => {
-            console.log("移动:" + row.name);
-        },
-        disabled: (row: User) => {
-            if (row.id === 1) {
-                return true;
-            }
-        },
-    },
-    {
-        label: "批量删除",
-        icon: "Delete",
-        click: (row: User) => {
-            console.log("删除:" + row.name);
-        },
-        divided: true,
-    },
-]
-function handleSelectionChange(value: any) {
-    selectRows.value = value;
-}
-
-</script>

package/examples/pages/table/demo/DropdownColumnSlot.vue

@@ -1,92 +0,0 @@
-<demo>通过slot自定义列组件下拉菜单</demo>
-<template>
-  <div>
-    <fu-table :data="tableData">
-      <el-table-column type="selection" />
-      <fu-table-column-dropdown showType="always" width="auto" ref="tableDropRef">
-        <!-- 自定义触发图标 -->
-        <template #icon>
-          <el-icon>
-            <setting />
-          </el-icon>自定义
-        </template>
-        <!-- 自定义触发图标 -->
-        <template #title>
-          <div class="example-title">自定义标题</div>
-        </template>
-        <!-- 内容 -->
-        <template #default="scope">
-          <div class="example">
-            <el-checkbox-group v-model="checkList">
-              <el-checkbox label="复选框 A" />
-              <el-checkbox label="复选框 B" />
-              <el-checkbox label="复选框 C" />
-            </el-checkbox-group>
-            <div class="example-button">
-              <el-button type="primary" size="small">确认</el-button>
-              <el-button type="primary" plain @click="cancel(scope.$index)" size="small">取消</el-button>
-            </div>
-          </div>
-        </template>
-      </fu-table-column-dropdown>
-      <el-table-column prop="date" label="日期" min-width="180" />
-      <el-table-column prop="name" label="姓名" min-width="180" />
-      <el-table-column prop="address" label="地址" min-width="300" />
-    </fu-table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-const checkList = ref([])
-const tableDropRef = ref()
-
-const tableData = [
-  {
-    id: 1,
-    date: "2016-05-01",
-    name: "张三",
-    address: "北京朝阳区财富中心 0室",
-  },
-  {
-    id: 2,
-    date: "2016-05-02",
-    name: "张三",
-    address: "北京朝阳区财富中心 1室",
-  },
-  {
-    id: 3,
-    date: "2016-05-01",
-    name: "张三",
-    address: "北京朝阳区财富中心 2室",
-  },
-  {
-    id: 4,
-    date: "2016-05-03",
-    name: "张三",
-    address: "北京朝阳区财富中心 3室",
-  },
-]
-
-function cancel(index: number) {
-  tableDropRef.value?.hide(index);
-}
-
-</script>
-<style lang="scss" scoped>
-.example-title {
-  color: #004a71;
-  text-align: center;
-  padding: 5px 0;
-  font-size: 15px;
-}
-
-.example {
-  padding: 10px 20px;
-  width: 125px;
-
-  .example-button {
-    margin-top: 10px;
-  }
-}
-</style>

package/examples/pages/table/demo/SaveSelectColumn.vue

@@ -1,41 +0,0 @@
-<demo>选列保存</demo>
-<template>
-  <div style="margin-bottom: 20px">
-    <fu-table-column-select :columns="columns" />
-  </div>
-  <fu-table :data="tableData" :columns="columns" localKey="SaveSelectColumn">
-    <el-table-column type="selection"></el-table-column>
-    <el-table-column prop="date" label="日期" min-width="180"></el-table-column>
-    <el-table-column prop="name" label="姓名" min-width="180" fix></el-table-column>
-    <el-table-column prop="address" label="地址" :show="false"></el-table-column>
-  </fu-table>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const columns = ref([])
-
-const tableData = [
-  {
-    date: "2016-05-02",
-    name: "张三",
-    address: "北京朝阳区财富中心 0室",
-  },
-  {
-    date: "2016-05-04",
-    name: "张三",
-    address: "北京朝阳区财富中心 1室",
-  },
-  {
-    date: "2016-05-01",
-    name: "张三",
-    address: "北京朝阳区财富中心 2室",
-  },
-  {
-    date: "2016-05-03",
-    name: "张三",
-    address: "北京朝阳区财富中心 3室",
-  }
-]
-</script>

package/examples/pages/table/demo/SelectColumn.vue

@@ -1,47 +0,0 @@
-<demo>表格选列</demo>
-<template>
-  <div style="margin-bottom: 20px">
-    <span>Popover选列(hover)：</span>
-    <fu-table-column-select :columns="columns" />
-    <span style="margin-left: 20px">Popover选列(click)：</span>
-    <fu-table-column-select :columns="columns" trigger="click" />
-    <span style="margin-left: 20px">Dialog选列：</span>
-    <fu-table-column-select type="dialog" :columns="columns" />
-  </div>
-  <fu-table :data="tableData" :columns="columns">
-    <el-table-column type="selection"></el-table-column>
-    <el-table-column prop="date" label="日期" min-width="180"></el-table-column>
-    <el-table-column prop="name" label="姓名" min-width="180"></el-table-column>
-    <el-table-column prop="address" label="地址" :show="false"></el-table-column>
-  </fu-table>
-
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const columns = ref([])
-
-const tableData = [
-  {
-    date: "2016-05-02",
-    name: "张三",
-    address: "北京朝阳区财富中心 0室",
-  },
-  {
-    date: "2016-05-04",
-    name: "张三",
-    address: "北京朝阳区财富中心 1室",
-  },
-  {
-    date: "2016-05-01",
-    name: "张三",
-    address: "北京朝阳区财富中心 2室",
-  },
-  {
-    date: "2016-05-03",
-    name: "张三",
-    address: "北京朝阳区财富中心 3室",
-  }
-]
-</script>

package/examples/pages/table/demo/TableOperations.vue

@@ -1,95 +0,0 @@
-<demo>操作列</demo>
-<template>
-  <div style="margin-bottom: 20px">
-    <el-button @click="enableAll">启用全部按钮</el-button>
-    <el-button @click="showAll">显示全部按钮</el-button>
-  </div>
-  <h4>
-    laber 按钮
-  </h4>
-  <fu-table :data="tableData" :columns="columns">
-    <el-table-column type="selection"></el-table-column>
-    <el-table-column prop="date" label="日期" min-width="180"></el-table-column>
-    <el-table-column prop="name" label="姓名" min-width="180" fix></el-table-column>
-    <el-table-column prop="address" label="地址" min-width="300" :show="false"></el-table-column>
-    <fu-table-operations :ellipsis="2" :buttons="buttons" label="操作" fixed="right" />
-  </fu-table>
-  <h4>
-    icon 按钮
-  </h4>
-  <fu-table :data="tableData" :columns="columns" style="margin-top: 20px">
-    <el-table-column type="selection"></el-table-column>
-    <el-table-column prop="date" label="日期" min-width="180"></el-table-column>
-    <el-table-column prop="name" label="姓名" min-width="180" fix></el-table-column>
-    <el-table-column prop="address" label="地址" min-width="300" :show="false"></el-table-column>
-    <fu-table-operations :ellipsis="2" type="icon" :buttons="buttons" label="操作" fixed="right" />
-  </fu-table>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-interface User {
-  date: string
-  name: string
-  address: string
-}
-const tableData = [{
-  date: "2016-05-02",
-  name: "张三",
-  address: "北京朝阳区财富中心 0室",
-}, {
-  date: "2016-05-04",
-  name: "张三",
-  address: "北京朝阳区财富中心 1室",
-}, {
-  date: "2016-05-01",
-  name: "张三",
-  address: "北京朝阳区财富中心 2室",
-}, {
-  date: "2016-05-03",
-  name: "张三",
-  address: "北京朝阳区财富中心 3室",
-}]
-const columns = ref([])
-
-const buttons = [
-  {
-    label: "查看", icon: "View", click: (row: User) => {
-      console.log("查看:" + row.name)
-    }, disabled: (row: User) => {
-      return row.date === "2016-05-01"
-    }
-  },
-  {
-    label: "编辑", icon: "Edit", click: (row: User) => {
-      console.log("编辑:" + row.name)
-    }, show: false
-  }, {
-    label: "执行", icon: "VideoPlay", click: (row: User) => {
-      console.log("执行:" + row.name)
-    }, disabled: true
-  }, {
-    label: "删除", icon: "Delete", type: "danger", click: (row: User) => {
-      console.log("删除:" + row.name)
-    }
-  }, {
-    label: "复制", icon: "DocumentCopy", click: (row: User) => {
-      console.log("复制:" + row.name)
-    }
-  }
-]
-
-function enableAll() {
-  buttons.forEach(b => {
-    b.disabled = false
-  })
-}
-function showAll() {
-  buttons.forEach(b => {
-    b.show = true
-  })
-}
-
-
-</script>