ibsp-fg-page 4.0.2

package/src/components/ibsp/IbspAddTag.vue

@@ -0,0 +1,143 @@
+<script  setup>
+import { Close } from '@element-plus/icons-vue';
+import { nextTick, ref } from 'vue'
+import { ElInput } from 'element-plus'
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  },
+  addLabel: {
+    type: String,
+    default: '+ New Tag'
+  },
+  size: {
+    type: String,
+    default: 'large'
+  },
+  delCallback: {
+    type: Function,
+    default: () => (true)
+  },
+  disabledAddBtn: {
+    type: Boolean,
+    default: false
+  },
+  openAddBeforeCallBack: {
+    type: Function,
+    default: () => (true)
+  }
+})
+
+const emit = defineEmits(['clickTag', 'addTag'])
+const inputValue = ref('')
+const dynamicTags = ref(props.data)
+const inputVisible = ref(false)
+const InputRef = ref()
+
+const handleClose = (tag) => {
+  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
+  emit('addTag', tag)
+}
+
+const showInput = () => {
+  if (!props.openAddBeforeCallBack()) {
+    return
+  }
+  inputVisible.value = true
+  nextTick(() => {
+    InputRef.value.input.focus()
+  })
+}
+
+const handleInputConfirm = () => {
+  if (inputValue.value) {
+    dynamicTags.value.push(inputValue.value)
+  }
+  inputVisible.value = false
+  inputValue.value = ''
+}
+const onClickDelTag = async (index) => {
+  const fun = props.delCallback
+  let state = false
+  // 判断fun是否是异步函数
+  if (fun.constructor.name === 'AsyncFunction') {
+    state = await fun(dynamicTags.value[index])
+  } else {
+    state = fun(dynamicTags.value[index])
+  }
+
+  if (state) {
+    dynamicTags.value.splice(index, 1)
+  }
+
+}
+</script>
+
+<template>
+  <div class="ibsp-add-tag">
+    <el-tag
+      v-for="(tag,i) in dynamicTags"
+      :key="tag"
+      :size="size"
+      @close="handleClose(tag)"
+    >
+      <span class="tag-label">
+        {{tag}}
+        <el-icon @click="onClickDelTag(i)"><Close/></el-icon>
+      </span>
+    </el-tag>
+    <ElInput
+      v-if="inputVisible"
+      ref="InputRef"
+      v-model="inputValue"
+      @keyup.enter="handleInputConfirm"
+      @blur="handleInputConfirm"
+    />
+    <el-button v-else
+               v-show="!disabledAddBtn"
+               class="button-new-tag"
+               @click="showInput">
+      {{addLabel}}
+    </el-button>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.ibsp-add-tag{
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    .el-input{
+        max-width: 200px;
+        margin-bottom: none;
+    }
+    .el-button:hover{
+        color: var(--theme-gl-bg);
+    }
+
+    .el-tag{
+        margin-right: 10px;
+        margin-bottom: 10px;
+        background-color: var(--theme-bg);
+        border: 1px solid var(--theme-border-color);
+        cursor: pointer;
+        color: var(--theme-font-color);
+        &:hover{
+            color: var(--theme-gl-bg);
+        }
+    }
+    .tag-label{
+        display: flex;
+        align-items: center;
+        .el-icon{
+            margin-left: 5px;
+            font-size: 14px;
+            cursor: pointer;
+            &:hover{
+                color: red;
+            }
+        }
+    }
+}
+</style>

package/src/components/ibsp/IbspButton.vue

@@ -0,0 +1,27 @@
+<script setup>
+
+</script>
+
+<template>
+  <el-button
+    class="ibsp-button"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </el-button>
+</template>
+
+<style lang="less" scoped>
+.ibsp-button {
+    background-color: var(--theme-btn-bg) !important;
+    color: var(--theme-btn-color) !important;
+    border: 1px solid var(--theme-btn-border-color);
+    outline: none !important;
+    --el-fill-color-light: var(--theme-btn-bg);
+    &:hover {
+        background-color: var(--theme-gl-bg) !important;
+    color: var(--theme-gl-color) !important;
+    }
+}
+
+</style>

package/src/components/ibsp/IbspColorPicker.vue

@@ -0,0 +1,252 @@
+<script setup>
+import { reactive, useSlots, ref, watch } from 'vue';
+import { debounce } from 'lodash-es';
+import { ClickOutside as vClickOutside } from 'element-plus'
+import SvPanel from 'element-plus/es/components/color-picker/src/components/sv-panel'
+import Color from 'element-plus/es/components/color-picker/src/utils/color'
+import HueSlider from 'element-plus/es/components/color-picker/src/components/hue-slider'
+import AlphaSlider from 'element-plus/es/components/color-picker/src/components/alpha-slider'
+
+import SlotEvents from './IbspSlotEvent';
+import IbspSelect from './IbspSelect.vue';
+import IbspButton from './IbspButton.vue';
+
+const modelValue = defineModel();
+const slots = useSlots();
+
+const oldValue = modelValue.value;
+
+const color = reactive(new Color({
+  enableAlpha: false,
+  format: '',
+  value: modelValue.value || 'rgba(19, 206, 102, 0.8)'
+}))
+
+
+const visible = ref(false);
+
+const setVisible = (value) => {
+  visible.value = value;
+}
+
+const debounceSetVisible = debounce(setVisible, 100)
+
+const options = reactive([
+  {
+    label: '主色',
+    value: 'rgba(19, 206, 102, 0.8)'
+  },
+  {
+    label: '成功色',
+    value: '#67C23A'
+  },
+  {
+    label: '警告色',
+    value: '#E6A23C'
+  },
+  {
+    label: '危险色',
+    value: '#F56C6C'
+  },
+  {
+    label: '信息色',
+    value: '#909399'
+  },
+  {
+    label: '错误色',
+    value: '#F56C6C'
+  }
+])
+
+const onClickOutside = () => {
+  if (!visible.value) return
+  debounceSetVisible(false)
+  modelValue.value = oldValue;
+}
+
+const onChangeColorSelect = (val) => {
+  color.fromString(val)
+  modelValue.value = val
+}
+
+watch(() => color.value, (val) => {
+  modelValue.value = val;
+})
+
+const onConfirm = () => {
+  setVisible(false);
+}
+
+const onCancel = () => {
+  modelValue.value = oldValue;
+  setVisible(false);
+}
+
+const handleTrigger = () => {
+  debounceSetVisible(!visible.value);
+}
+
+
+</script>
+<template>
+  <el-tooltip
+    :visible="visible"
+    @hide="setVisible(false)"
+  >
+    <template #content>
+      <div class="ibsp-color-picker" v-click-outside="onClickOutside">
+        <div class="color-panel">
+          <SvPanel class="sv-panel" :color="color" />
+          <HueSlider ref="hue"
+                     class="hue-slider"
+                     :color="color"
+                     vertical />
+        </div>
+        <AlphaSlider class="alpha-slider"
+                     ref="alpha"
+                     :color="color" />
+        <div class="color-picker-box">
+          <div class="input">
+            <el-input v-model="modelValue" placeholder="颜色值" />
+          </div>
+          <div class="select">
+            <IbspSelect
+              @change="onChangeColorSelect"
+              placeholder="预定义色"
+              :options="options"
+              filterable
+              clearable
+            >
+              <template #option="{ item }">
+                <div class="color-option">
+                  <span :style="{backgroundColor: item.value}" class="color-value"></span>
+                  <span class="color-label">{{ item.label }}</span>
+                </div>
+              </template>
+            </IbspSelect>
+          </div>
+        </div>
+        <div class="operation">
+          <IbspButton ref="btn"
+                      type="primary"
+                      @click="onConfirm">确定</IbspButton>
+          <IbspButton ref="btn"
+                      type="default"
+                      @click="onCancel">取消</IbspButton>
+        </div>
+      </div>
+    </template>
+    <template #default>
+      <SlotEvents v-if="slots.default" @click.stop="handleTrigger">
+        <slot></slot>
+      </SlotEvents>
+      <span v-else class="ibsp-color-picker-ref">
+
+      </span>
+    </template>
+  </el-tooltip>
+</template>
+<style lang="less" scoped>
+.ibsp-color-picker-ref{
+  display: inline-block;
+}
+.ibsp-color-picker {
+    width: fit-content;
+    height: fit-content;
+    border-radius: 12px;
+    padding: 12px;
+    border: 1px solid var(--theme-border-color);
+
+    .color-picker-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        >div {
+            display: flex;
+            align-items: center;
+        }
+
+        .input {
+            margin-right: 10px;
+
+            .el-input {
+                font-size: 12px;
+            }
+        }
+
+        .ibsp-select {
+            width: 120px !important;
+        }
+
+        .el-checkbox {
+            margin-right: 5px;
+            --el-checkbox-input-height: 18px;
+            --el-checkbox-input-width: 18px;
+            --el-checkbox-font-size: 16px;
+
+            :deep(.el-checkbox__inner) {
+                border-radius: 6px;
+
+                &::after {
+                    height: 9px;
+                    left: 6px;
+                    top: 2px;
+                }
+            }
+        }
+    }
+
+    .color-panel {
+        .sv-panel {
+            float: left;
+        }
+
+        .hue-slider {
+            float: right;
+            margin-left: 10px;
+        }
+
+        &::after {
+            content: '';
+            display: block;
+            clear: both;
+        }
+    }
+
+    .alpha-slider {
+        margin: 10px 0;
+
+    }
+
+    .operation {
+        display: flex;
+        justify-content: flex-end;
+        margin: 5px;
+        margin-bottom: 0;
+        margin-top: 10px;
+    }
+}
+
+.color-option {
+    display: flex;
+    padding: 3px 0;
+    height: 100%;
+
+    // justify-content: space-between;
+    .color-value {
+        width: 50px;
+        margin-right: 10px;
+        border-radius: 6px;
+    }
+
+}
+</style>
+
+<style lang="less">
+.ibsp-color-picker-popper.el-popper {
+    position: fixed !important;
+    top: var(--color-picker-x) !important;
+    left: var(--color-picker-y) !important;
+}
+</style>

package/src/components/ibsp/IbspColorSelect.vue

@@ -0,0 +1,14 @@
+<script setup'>
+
+</script>
+
+<template>
+  <div class="ibsp-color-select">
+
+  </div>
+
+</template>
+
+<style>
+
+</style>

package/src/components/ibsp/IbspContextmenu.vue

@@ -0,0 +1,176 @@
+<script setup lang="jsx">
+import { Menu } from 'ant-design-vue'
+import { h, ref } from 'vue';
+import {
+  MailOutlined,
+  CalendarOutlined,
+  AppstoreOutlined,
+  SettingOutlined,
+} from '@ant-design/icons-vue';
+
+import SvgIcon from '../globals/SvgIcon.vue';
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [
+      {
+        id: '1',
+        key: 'Ctrl+C',
+        icon: {
+          type: 'svg',
+          value: '弹性布局'
+        },
+        label: (
+          <span>111111111111111</span>
+        ),
+        title: 'Navigation One',
+      },
+      {
+        id: '2',
+        key: 'Ctrl+C',
+        icon: {
+          type: 'svg',
+          value: '弹性布局'
+        },
+        label: 'Navigation Two',
+        title: 'Navigation Two',
+      },
+    ]
+  }
+})
+const selectedKeys = ref([]);
+const openKeys = ref([]);
+
+const getLabelNode = (item)=>{
+  return (
+    <div className='contextmenu-item'>
+      <span className='contextmenu-label'>{item.label}</span>
+      {
+        item.key && <span className='contextmenu-shortcutKey'>{item.key}</span>
+      }
+    </div>
+  )
+}
+const filterData = (data) => {
+  return data.map(item => {
+    return {
+      ...item,
+      key: item.key || item.id,
+      icon: <SvgIcon icon={item.icon} />,
+      label: getLabelNode(item),
+      children: filterData(item.children)
+    }
+  })
+}
+const items = ref(filterData(props.data))
+
+
+// const items = ref([
+//   {
+//     key: '1',
+//     icon: () => h(MailOutlined),
+//     label: (
+//       <span>111111111111111</span>
+//     ),
+//     title: 'Navigation One',
+//   },
+//   {
+//     key: '2',
+//     icon: () => h(CalendarOutlined),
+//     label: 'Navigation Two',
+//     title: 'Navigation Two',
+//   },
+//   {
+//     key: 'sub1',
+//     icon: () => h(AppstoreOutlined),
+//     label: 'Navigation Three',
+//     title: 'Navigation Three',
+//     children: [
+//       {
+//         key: '3',
+//         label: 'Option 3',
+//         title: 'Option 3',
+//       },
+//       {
+//         key: '4',
+//         label: 'Option 4',
+//         title: 'Option 4',
+//       },
+//       {
+//         key: 'sub1-2',
+//         label: 'Submenu',
+//         title: 'Submenu',
+//         children: [
+//           {
+//             key: '5',
+//             label: 'Option 5',
+//             title: 'Option 5',
+//           },
+//           {
+//             key: '6',
+//             label: 'Option 6',
+//             title: 'Option 6',
+//           },
+//         ],
+//       },
+//     ],
+//   },
+//   {
+//     key: 'sub2',
+//     icon: () => h(SettingOutlined),
+//     label: 'Navigation Four',
+//     title: 'Navigation Four',
+//     children: [
+//       {
+//         key: '7',
+//         label: 'Option 7',
+//         title: 'Option 7',
+//       },
+//       {
+//         key: '8',
+//         label: 'Option 8',
+//         title: 'Option 8',
+//       },
+//       {
+//         key: '9',
+//         label: 'Option 9',
+//         title: 'Option 9',
+//       },
+//       {
+//         key: '10',
+//         label: 'Option 10',
+//         title: 'Option 10',
+//       },
+//     ],
+//   },
+// ]);
+const handleClick = menuInfo => {
+  console.log('click ', menuInfo);
+};
+</script>
+
+<template>
+  <div class="ibsp-vertical-menu">
+    <Menu
+      v-model:openKeys="openKeys"
+      v-model:selectedKeys="selectedKeys"
+      mode="vertical"
+      :items="items"
+      :selectable="false"
+      @click="handleClick"
+    />
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ibsp-vertical-menu {
+    width: 200px;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+
+}
+
+</style>

package/src/components/ibsp/IbspDialog.vue

@@ -0,0 +1,52 @@
+<script setup>
+defineProps({
+  bodyPadding: {
+    type: String,
+    default: '10px'
+  },
+  headerVisible: {
+    type: Boolean,
+    default: true
+  },
+})
+</script>
+
+<template>
+  <div class="ibsp-dialog-container">
+    <el-dialog
+      append-to-body
+      v-bind="$attrs"
+      class="ibsp-dialog"
+      :style="{
+        '--el-dialog-padding-primary': bodyPadding,
+        '--el-dialog-header-display': headerVisible ? 'block' : 'none'
+      }"
+    >
+      <template #[key]="values"
+                v-for="(_, key) in $slots">
+        <slot :name="key" v-bind="values"></slot>
+      </template>
+    </el-dialog>
+  </div>
+
+</template>
+
+<style lang="less">
+.ibsp-dialog {
+    --el-dialog-padding-primary:10px;
+    padding: 0;
+    border: 1px solid var(--theme-gl-bg) !important;
+    .el-dialog__header{
+      display: var(--el-dialog-header-display);
+      padding: 10px;
+      border-bottom: 1px solid var(--theme-gl-bg) !important;
+      margin-right:0;
+      .el-dialog__headerbtn{
+        top: 0;
+      }
+    }
+    .el-dialog__body{
+      padding: var(--el-dialog-padding-primary);
+    }
+  }
+</style>

package/src/components/ibsp/IbspDrawer.vue

@@ -0,0 +1,44 @@
+<script setup>
+defineProps({
+  width: {
+    type: String,
+    default: '30%'
+  },
+})
+</script>
+
+<template>
+  <el-drawer :style="{ '--width':width }"
+             class="ibsp-drawer"
+             v-bind="$attrs"
+             append-to-body>
+    <template #[key]="values" v-for="(_, key) in $slots">
+      <slot :name="key" v-bind="values"></slot>
+    </template>
+  </el-drawer>
+</template>
+
+
+<style lang="less">
+.ibsp-drawer {
+    border: 1px solid var(--theme-gl-bg);
+    height: 95% !important;
+    margin: 20px !important;
+    border-radius: 10px !important;
+    width: var(--width) !important;
+
+    .el-drawer__header {
+        margin-bottom: 0;
+        border-bottom: 1px solid var(--theme-gl-bg);
+        padding: 10px !important;
+    }
+
+    .el-drawer__body {
+        padding: 10px;
+    }
+
+    .el-drawer__title {
+        color: var(--theme-font-color);
+    }
+}
+</style>