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

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

@@ -0,0 +1,54 @@
+<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

@@ -0,0 +1,23 @@
+<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

@@ -0,0 +1,73 @@
+<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

@@ -0,0 +1,39 @@
+<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

@@ -0,0 +1,81 @@
+<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

@@ -0,0 +1,51 @@
+<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

@@ -0,0 +1,109 @@
+<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

@@ -0,0 +1,66 @@
+<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

@@ -0,0 +1,64 @@
+<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

@@ -0,0 +1,61 @@
+<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

@@ -0,0 +1,36 @@
+<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>