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

package/examples/pages/read-write-switch/demo/ReadSwitchDemo.vue

@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <h3>
-      v-model + 事件 控制状态
-    </h3>
-    <div style="line-height: 40px;">
-      <fu-read-write-switch :data="input" v-model="write">
-        <el-input v-model="input" @blur="blur" @keydown.native="keydown"/>
-      </fu-read-write-switch>
-    </div>
-
-    <h3>
-      slot参数 + 事件 控制状态
-    </h3>
-    <div style="line-height: 40px;">
-      <fu-read-write-switch :data="input" v-slot:default="{read}">
-        <el-input v-model="input" @blur="read" @keydown.native="keydown2($event, read)"/>
-      </fu-read-write-switch>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "ReadWriteSwitchDemo",
-  data() {
-    return {
-      write: false,
-      input: "单击填写"
-    }
-  },
-  methods: {
-    change(obj) {
-      console.log(obj)
-    },
-    read() {
-      this.write = false
-    },
-    blur() {
-      this.read()
-    },
-    keydown(e) {
-      if (e.keyCode === 13) {
-        this.read()
-      }
-    },
-    keydown2(e, read) {
-      if (e.keyCode === 13) {
-        read()
-      }
-    }
-  }
-}
-</script>

package/examples/pages/read-write-switch/demo/SelectRwSwitchDemo.vue

@@ -1,23 +0,0 @@
-<template>
-  <div>
-    <fu-select-rw-switch v-model="select">
-      <template #read>
-        <el-tag disable-transitions v-if="select === 'zh-CN'" type="danger">中文</el-tag>
-        <el-tag disable-transitions v-else>English</el-tag>
-      </template>
-      <el-option key="zh-CN" label="中文" value="zh-CN"/>
-      <el-option key="en-US" label="English" value="en-US"/>
-    </fu-select-rw-switch>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "SelectRwSwitchDemo",
-  data() {
-    return {
-      select: "zh-CN"
-    }
-  }
-}
-</script>

package/examples/pages/read-write-switch/demo/TableInnerEditDemo.vue

@@ -1,73 +0,0 @@
-<template>
-  <div>
-    <fu-table :data="tableData">
-      <el-table-column type="selection"></el-table-column>
-      <el-table-column prop="name" label="姓名" min-width="180" fix></el-table-column>
-
-      <el-table-column prop="enable" label="语言(可行内编辑)">
-        <template #default="{row}">
-          <fu-select-rw-switch v-model="row.language">
-            <template #read>
-              <el-tag disable-transitions v-if="row.language === 'zh-CN'" type="danger">中文</el-tag>
-              <el-tag disable-transitions v-else>English</el-tag>
-            </template>
-            <el-option key="zh-CN" label="中文" value="zh-CN"/>
-            <el-option key="en-US" label="English" value="en-US"/>
-          </fu-select-rw-switch>
-        </template>
-      </el-table-column>
-
-      <el-table-column prop="address" label="地址(可行内编辑)">
-        <template #default="{row}">
-          <fu-input-rw-switch v-model="row.address"></fu-input-rw-switch>
-        </template>
-      </el-table-column>
-      <el-table-column prop="date" label="日期" min-width="180"></el-table-column>
-    </fu-table>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "TableInnerEditDemo",
-  data() {
-    return {
-      tableData: [
-        {
-          date: '2016-05-01',
-          name: '张三',
-          language: "zh-CN",
-          address: '北京朝阳区财富中心 1室'
-        }, {
-          date: '2016-05-02',
-          name: '张三',
-          language: "en-US",
-          address: '北京朝阳区财富中心 2室'
-        }, {
-          date: '2016-05-03',
-          name: '张三',
-          language: "zh-CN",
-          address: '北京朝阳区财富中心 3室'
-        }, {
-          date: '2016-05-04',
-          name: '张三',
-          language: "en-US",
-          address: '北京朝阳区财富中心 4室'
-        }, {
-          date: '2016-05-05',
-          name: '张三',
-          language: "zh-CN",
-          address: '北京朝阳区财富中心 5室'
-        }
-      ]
-    }
-  },
-  methods: {
-    blur(read) {
-      setTimeout(() => {
-        read()
-      }, 100)
-    }
-  }
-}
-</script>

package/examples/pages/read-write-switch/demo/WriteSwitchDemo.vue

@@ -1,39 +0,0 @@
-<template>
-  <div>
-    <div style="line-height: 40px;">
-      <fu-read-write-switch :data="click" v-model="write">
-        <el-input v-model="click" @blur="write = false"/>
-      </fu-read-write-switch>
-    </div>
-
-    <div style="line-height: 40px;">
-      <fu-read-write-switch :data="dblclick" v-model="write2" write-trigger="dblclick">
-        <el-input v-model="dblclick" @blur="write2 = false"/>
-      </fu-read-write-switch>
-    </div>
-
-    <div style="line-height: 40px;">
-      <fu-read-write-switch :data="manual" v-model="write3" write-trigger="manual">
-        <el-input v-model="manual" @blur="write3 = false"/>
-      </fu-read-write-switch>
-      <el-button @click="write3 = true">点击按钮填写</el-button>
-    </div>
-  </div>
-
-</template>
-
-<script>
-export default {
-  name: "WriteSwitchDemo",
-  data() {
-    return {
-      write: false,
-      write2: false,
-      write3: false,
-      click: "单击填写",
-      dblclick: "双击填写",
-      manual: "点击无法填写",
-    }
-  }
-}
-</script>

package/examples/pages/read-write-switch/index.vue

@@ -1,81 +0,0 @@
-<template>
-  <div>
-    <!-- 一级标题 -->
-    <h1 class="component-h1">ReadWriteSwitch 读写切换</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 BaseDemo from "./demo/BaseDemo.vue";
-import CustomContentDemo from "./demo/CustomContentDemo.vue";
-import InputRwSwitchDemo from "./demo/InputRwSwitchDemo.vue";
-import ReadSwitchDemo from "./demo/ReadSwitchDemo.vue";
-import SelectRwSwitchDemo from "./demo/SelectRwSwitchDemo.vue";
-import TableInnerEditDemo from "./demo/TableInnerEditDemo.vue";
-import WriteSwitchDemo from "./demo/WriteSwitchDemo.vue";
-const comList = [
-  {
-    title: "基本用法",
-    titleDesc: "读写状态切换，允许自定义读写内容、自定义读写状态控制，可用于Table 表内编辑等",
-    component: BaseDemo,
-  },
-  // {
-  //   title: "写状态控制",
-  //   titleDesc: "单击，双击，手动触发",
-  //   component: WriteSwitchDemo,
-  // },
-  // {
-  //   title: "读状态控制",
-  //   titleDesc: "使用v-model或者使用slot的参数切换读状态",
-  //   component: ReadSwitchDemo,
-  // },
-  // {
-  //   title: "自定义读写内容",
-  //   titleDesc: "v-slot:read 和 v-slot:default 分别为读内容和写内容",
-  //   component: CustomContentDemo,
-  // },
-  // {
-  //   title: "InputRwSwitch",
-  //   titleDesc: "Input状态切换组件",
-  //   component: InputRwSwitchDemo,
-  //   description: `继承el-input的功能`
-  // },
-  // {
-  //   title: "SelectRwSwitch",
-  //   titleDesc: "Select状态切换组件",
-  //   component: SelectRwSwitchDemo,
-  //   description: `继承el-select的功能`
-  // },
-  // {
-  //   title: "表格行内编辑",
-  //   titleDesc: "使用 InputRwSwitch 和 SelectRwSwitch 实现行内编辑功能",
-  //   component: TableInnerEditDemo,
-  // }
-]
-
-</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/speed-dial/demo/BaseSpeedDial.vue

@@ -1,51 +0,0 @@
-<demo>基本用法</demo>
-<template>
-  <div class="speed-dial-demo">
-    <div>
-      <fu-speed-dial id="left" size="big" direction="left" :items="items" @click="click" />
-    </div>
-
-    <div>
-      <fu-speed-dial id="top" :items="items" @click="click" type="success" icon="el-icon-video-play"
-        active-icon="el-icon-video-pause" />
-    </div>
-
-    <div>
-      <fu-speed-dial icon="iconfont icon-money" id="right" size="medium" direction="right" type="warning" :items="items"
-        @click="click" />
-    </div>
-
-    <div>
-      <fu-speed-dial id="bottom" size="small" direction="bottom" type="danger" :items="items" @click="click" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const items = [
-  { title: "Item 1", click: clickItem },
-  { title: "Item 2", click: clickItem },
-  { title: "Item 3", click: clickItem, icon: "iconfont icon-huiyuan" },
-  { title: "Item 4", click: clickItem },
-  { title: "Item 5", click: clickItem },
-]
-
-function click(obj, e) {
-  console.log(obj, e)
-}
-function clickItem(item, e) {
-  console.log(item, e)
-}
-
-</script>
-
-<style lang="scss" scoped>
-.speed-dial-demo {
-  display: flex;
-  align-items: center;
-
-  >div {
-    width: 25%;
-  }
-}
-</style>

package/examples/pages/speed-dial/demo/SpeedDialCustom.vue

@@ -1,109 +0,0 @@
-<template>
-  <div class="speed-dial-demo">
-    <div>
-      <h4>
-        默认
-      </h4>
-      <fu-speed-dial>
-        <fu-speed-dial-item :index="0" title="No.0" @click="clickItem"/>
-        <fu-speed-dial-item :index="1" title="No.1" @click="clickItem"/>
-      </fu-speed-dial>
-    </div>
-
-    <div>
-      <h4>
-        Items数组
-      </h4>
-      <fu-speed-dial :items="items"/>
-    </div>
-
-    <div>
-      <h4>
-        Slot
-      </h4>
-      <fu-speed-dial>
-        <fu-speed-dial-item :index="0" title="No.0" @click="clickItem" color="#222" bg-color="#DDD"
-                            title-bg-color="#F1F1F1" title-color="#555"/>
-        <fu-speed-dial-item :index="1" title="No.1" @click="clickItem" button-class="custom-button"
-                            title-class="custom-title"/>
-      </fu-speed-dial>
-    </div>
-
-    <div>
-      <h4>
-        Item Slot
-      </h4>
-      <fu-speed-dial ref="speed-dial">
-        <fu-speed-dial-item :index="0">
-          <el-button @click="clickItem({title: 'Item 1',index: 0, custom:true},$event)">Item 1</el-button>
-        </fu-speed-dial-item>
-
-        <fu-speed-dial-item :index="1">
-          <el-button @click="clickItem({title: 'Item 2',index: 1, custom:true})">Item 2</el-button>
-        </fu-speed-dial-item>
-      </fu-speed-dial>
-    </div>
-  </div>
-</template>
-
-<script>
-const itemStyle = {
-  bgColor: "#DDD",
-  color: "#222",
-  titleBgColor: "#F1F1F1",
-  titleColor: "#555",
-}
-
-export default {
-  name: "BaseSpeedDial",
-  data() {
-    return {
-      items: [
-        {
-          title: "Item 1",
-          icon: "el-icon-edit",
-          click: this.clickItem,
-          ...itemStyle
-        },
-        {title: "Item 2", click: this.clickItem, ...itemStyle},
-        {title: "Item 3", click: this.clickItem, ...itemStyle},
-        {title: "Item 4", click: this.clickItem, ...itemStyle},
-        {title: "Item 5", click: this.clickItem, ...itemStyle},
-      ]
-    }
-  },
-  methods: {
-    click(obj, e) {
-      console.log(obj, e)
-    },
-    clickItem(item, e) {
-      if (item.custom) {
-        this.$refs["speed-dial"].close()
-      }
-      console.log(item, e)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.speed-dial-demo {
-  display: flex;
-  align-items: center;
-
-  > div {
-    width: 25%;
-  }
-
-
-::v-deep(.custom-button) {
-    color: #222;
-    background-color: #DDD;
-  }
-
-::v-deep(.custom-title) {
-    color: #555;
-    background-color: #F1F1F1;
-  }
-}
-</style>

package/examples/pages/speed-dial/demo/SpeedDialPosition.vue

@@ -1,66 +0,0 @@
-<template>
-  <div class="speed-dial-demo">
-    <div>
-      拖拽:
-      <el-radio-group v-model="movable">
-        <el-radio :label="true">允许</el-radio>
-        <el-radio :label="false">禁止</el-radio>
-      </el-radio-group>
-    </div>
-    <div>
-      position:
-      <el-radio-group v-model="position">
-        <el-radio label="absolute">absolute</el-radio>
-        <el-radio label="fixed">fixed</el-radio>
-      </el-radio-group>
-    </div>
-
-    <div class="speed-dial-move">
-      <fu-speed-dial :position="position" bottom="calc(50% - 20px)" right="calc(50% - 20px)"
-                     :movable="movable" :items="items" @click="click"/>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "SpeedDialPosition",
-  data() {
-    return {
-      position: "absolute",
-      movable: false,
-      items: [
-        {title: "Item 1", click: this.clickItem},
-        {title: "Item 2", click: this.clickItem},
-        {title: "Item 3", click: this.clickItem},
-        {title: "Item 4", click: this.clickItem},
-        {title: "Item 5", click: this.clickItem},
-      ]
-    }
-  },
-  methods: {
-    click(obj, e) {
-      console.log(obj, e)
-    },
-    clickItem(item, e) {
-      console.log(item, e)
-    }
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.speed-dial-demo {
-  width: 100%;
-
-  .speed-dial-move {
-    margin-top: 10px;
-    border: 1px #7c7c7c dashed;
-    position: relative;
-    width: 100%;
-    height: 100px;
-  }
-}
-
-
-</style>

package/examples/pages/speed-dial/demo/SpeedDialTrigger.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="speed-dial-demo">
-    <div>
-      <h4>默认设置</h4>
-      <fu-speed-dial :items="items"/>
-    </div>
-
-    <div>
-      <h4>item点击后不关闭</h4>
-      <fu-speed-dial direction="left" :items="items" :item-click-close="false"/>
-    </div>
-
-    <div>
-      <h4>点击空白处不关闭</h4>
-      <fu-speed-dial :items="items" :outside-close="false"/>
-    </div>
-
-    <div>
-      <h4>
-        手动开关
-        <el-button size="small" class="fab-demo-manual" @click="toggle">
-          <span v-if="active">关闭</span>
-          <span v-else>打开</span>
-        </el-button>
-      </h4>
-
-      <fu-speed-dial :items="items" :manual="true" v-model="active"/>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "SpeedDialTrigger",
-  data() {
-    return {
-      active: false,
-      items: [
-        {title: "Item 1"},
-        {title: "Item 2"},
-        {title: "Item 3"},
-        {title: "Item 4"},
-        {title: "Item 5"},
-      ]
-    }
-  },
-  methods: {
-    toggle() {
-      this.active = !this.active;
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.speed-dial-demo {
-  display: flex;
-  align-items: center;
-
-  > div {
-    width: 25%;
-  }
-}
-</style>

package/examples/pages/speed-dial/index.vue

@@ -1,61 +0,0 @@
-<template>
-  <div>
-    <!-- 一级标题 -->
-    <h1 class="component-h1">SpeedDial 快速拨号</h1>
-    <!-- 一级描述 -->
-    <p>快速拨号，支持4个方向，支持固定位置，支持移动位置；图标支持iconfont；</p>
-    <!-- BaseTable内容 -->
-    <div class="component-block" v-for="(item, index) in comList" :key="index">
-      <h2>{{ item.title }}</h2>
-      <p>{{ item.titleDesc }}</p>
-      <code-example :description="item.description" :component="item.component" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import BaseSpeedDial from "./demo/BaseSpeedDial.vue";
-import SpeedDialPosition from "./demo/SpeedDialPosition.vue";
-import SpeedDialTrigger from "./demo/SpeedDialTrigger.vue";
-import SpeedDialCustom from "./demo/SpeedDialCustom.vue";
-
-const comList = [
-  {
-    title: "基本用法",
-    titleDesc: "可以设置方向，大小，主题，图标",
-    component: BaseSpeedDial,
-    description: `控制台查看click事件`
-  }, {
-    title: "定位方式",
-    titleDesc: "position 设置 absolute / fixed 可以固定位置，并且可以移动位置",
-    component: SpeedDialPosition,
-    description: `设置localKey，可以保存移动位置到localStorage`
-  }, {
-    title: "开关方式",
-    titleDesc: "",
-    component: SpeedDialTrigger,
-    description: `设置localKey，可以保存移动位置到localStorage`
-  }, {
-    title: "自定义内容",
-    titleDesc: "",
-    component: SpeedDialCustom,
-  }
-]
-</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/split-pane/demo/BaseSplit.vue

@@ -1,36 +0,0 @@
-<demo>基本用法</demo>
-<template>
-  <div>
-    <el-divider content-position="left">水平分割</el-divider>
-    <div class="demo-split">
-      <fu-split-pane left="200px">
-        <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 top="40%" direction="vertical">
-        <template v-slot:top>
-          Top
-        </template>
-        <template v-slot:bottom>
-          Bottom
-        </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>