br-dionysus 1.6.7 → 1.6.8

package/docs/packages/MSelectTableV1/src/MSelectTableV1.vue

@@ -1,460 +0,0 @@
-<template>
-  <div
-    class="g-box g-select-table-box"
-    :class="elClassName"
-  >
-    <div class="u-input-gp">
-      <el-input
-        v-model="_this.vValue"
-        :class="_this.inputClass"
-        :size="props.size"
-        :placeholder="props.placeholder"
-        @input="props.remoteMethod($event, page);_this.showPanel = true"
-        @focus="focus"
-        @keyup.enter="addRowData"
-        :disabled="props.disabled"
-      />
-      <div
-        class="el-icon el-icon-circle-close"
-        v-if="props.clearable && _this.vValue"
-        @click="empty"
-      >
-        <el-icon><CircleClose /></el-icon>
-      </div>
-    </div>
-
-    <Teleport to="body">
-      <div
-        class="m-table-box"
-        v-show="_this.showPanel"
-        :style="{...mTableBoxStyle, ..._this.boxStyle}"
-      >
-        <div
-          v-if="isSelect"
-          class="btn-box"
-        >
-          <el-button
-            @click="selectMultiple"
-            size="small"
-          >
-            确认
-          </el-button>
-        </div>
-        <el-table
-          ref="mTableRef"
-          class="m-table s-table"
-          :data="optionsMap"
-          :size="props.size"
-          :scrollbarAlwaysOn="props.scrollbarAlwaysOn"
-          @currentChange="handleCurrentChange"
-          :rowClassName="tableRowClassName"
-          :rowStyle="tableRowStyle"
-          :cellStyle="tableCellStyle"
-          @selectionChange="handleSelectionChange"
-        >
-          <el-table-column
-            v-if="props.isSelect"
-            type="selection"
-            width="55"
-          />
-          <el-table-column
-            showOverflowTooltip
-            v-for="item in tableTitle"
-            :key="item.prop"
-            :prop="item.prop"
-            :label="item.label"
-            :width="item.width"
-            :minWidth="item.minWidth"
-            :filters="item.filters"
-            :headerAlign="item.headerAlign"
-          >
-            <template #default="scope">
-              {{ optionsMap[scope.$index][item.prop] || '-' }}
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <!--分页-->
-        <div
-          class="m-page"
-          v-if="props.total"
-        >
-          <el-pagination
-            v-model:currentPage="page.currentPage"
-            v-model:pageSize="page.pageSize"
-            hideOnSinglePage
-            :small="props.size === 'small'"
-            :pageSizes="page.pageSizesOptions"
-            layout="total, prev, pager, next, sizes"
-            :total="page.total"
-            @currentChange="toPage"
-            @sizeChange="toPage(page.currentPage, $event)"
-          />
-        </div>
-      </div>
-
-      <div
-        v-show="_this.showPanel"
-        :style="mMarkStyle as any"
-        @click="clickOutside"
-      />
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, computed, watch, nextTick, ref } from 'vue'
-import { ElMessage } from 'element-plus'
-import { Page } from './../../typings/class'
-
-const createHash = (hashLength: number = 24) => {
-  return Array.from(Array(Number(hashLength) || 24), () => Math.floor(Math.random() * 36).toString(36)).join('')
-}
-
-const props = withDefaults(defineProps<{
-  modelValue?: string | number,
-  placeholder?: string,
-  disabled?: boolean,
-  options: Option[],
-  tableTitle: any[],
-  remoteMethod?: Function,
-  allowCreate?: boolean, // 是否创建条目
-  focusShow?: boolean, // 聚焦显示
-  isSelect?: boolean, // 是否多选
-  clearable?: boolean,
-  size?: 'small' | 'large' | '',
-  labelKey?: string, // 显示字段
-  scrollbarAlwaysOn?: boolean, // 总是显示滚动条
-  total?: number | null // 总数据量，当有值时，出现分页器
-}>(), {
-  modelValue: '',
-  placeholder: '请输入',
-  disabled: false,
-  options: () => [],
-  tableTitle: () => [],
-  remoteMethod: () => {},
-  allowCreate: false,
-  focusShow: false,
-  isSelect: false,
-  clearable: false,
-  size: '',
-  labelKey: 'label',
-  scrollbarAlwaysOn: false,
-  total: null
-})
-
-const _this = reactive<{
-  vValue: string | number,
-  vLabel: string | number,
-  oValue: string | number,
-  inputClass: string,
-  masterPieceLoading: boolean,
-  showPanel: boolean, // 显示面板
-  selectedRow: Option | {},
-  boxStyle: any,
-  selectKeys: string[]
-}>({
-  vValue: '',
-  vLabel: '',
-  oValue: '',
-  inputClass: 'j-' + createHash(),
-  masterPieceLoading: false,
-  showPanel: false, // 显示面板
-  selectedRow: {},
-  boxStyle: {
-  },
-  selectKeys: []
-})
-
-const emit = defineEmits(['update:modelValue', 'selectMultiple', 'change', 'selected', 'clear'])
-const optionsMap = computed(() => {
-  const options = props.options.map(item => ({
-    ...item,
-    className: item.disabled ? 's-disabled' : ''
-  }))
-  if (!props.allowCreate || !_this.vValue) return options
-  const checkSame = options.some(item => item.label === _this.vValue)
-  if (checkSame) return options
-  const nodeObj: any = {}
-  props.tableTitle.forEach(key => {
-    nodeObj[key] = null
-  })
-  return [...options, {
-    ...nodeObj,
-    label: _this.vValue,
-    value: '#' + createHash(),
-    className: 's-add'
-    // [props.labelKey]: _this.vValue
-  }
-  ]
-})
-
-const elClassName = 'j-' + createHash(6)
-
-// 分页
-const page = reactive<Page>(new Page({
-  total: props.total as number,
-  pageSize: 5,
-  currentPage: 1,
-  pageSizesOptions: [5, 10, 20]
-}))
-const toPage = (currentPage: number = 1, pageSize: number = page.pageSize) => {
-  page.currentPage = currentPage
-  page.pageSize = pageSize
-  props.remoteMethod(_this.vValue || '', page)
-}
-
-watch(
-  () => _this.showPanel,
-  () => {
-    const style = {}
-    if (_this.showPanel) {
-      const element = document.querySelector('.' + _this.inputClass)
-      if (!element) return
-      const rect = element.getBoundingClientRect()
-      if (!rect) return
-      const bottom = window.innerHeight - rect.top - rect.height
-      const right = window.innerWidth - rect.left - rect.width
-      if (bottom < 250) {
-        Object.assign(style, { bottom: (bottom + rect.height) + 'px' })
-        Object.assign(style, { transform: 'translateY(-10px)' })
-      } else {
-        Object.assign(style, { top: (rect.top + rect.height) + 'px' })
-        Object.assign(style, { transform: 'translateY(10px)' })
-      }
-      if ((window.innerWidth - rect.left) < 550) {
-        Object.assign(style, { right: right + 'px' })
-      } else {
-        Object.assign(style, { left: rect.left + 'px' })
-      }
-
-      Object.assign(style, { opacity: 1 })
-    }
-    if (!_this.showPanel) {
-      Object.assign(style, { opacity: 0 })
-    }
-
-    nextTick(() => {
-      _this.boxStyle = style
-    })
-  }
-)
-
-watch(
-  () => props.modelValue,
-  () => {
-    _this.vValue = props.options.find(item => item.value === props.modelValue)?.label || props.modelValue as string
-  }
-)
-
-watch(() => props.total, () => {
-  page.total = props.total as number
-})
-
-_this.vValue = props.options.find(item => item.value === props.modelValue)?.label || props.modelValue as string
-
-const empty = () => {
-  _this.selectedRow = {}
-  selected()
-  emit('clear')
-}
-
-const handleSelectionChange = (val: string[]) => {
-  _this.selectKeys = val
-}
-
-const mTableRef = ref<any>(null)
-
-const selectMultiple = () => {
-  if (!_this.selectKeys.length) return ElMessage.warning('请勾选数据')
-  const arr = JSON.parse(JSON.stringify(_this.selectKeys))
-  _this.selectKeys = []
-  mTableRef.value.clearSelection()
-  _this.showPanel = false
-  emit('selectMultiple', arr)
-}
-
-const handleCurrentChange = (currentRow: Option) => {
-  if (!currentRow) return false
-  _this.showPanel = false
-  if (currentRow[props.labelKey] !== undefined) {
-    _this.vValue = currentRow[props.labelKey] as string
-  }
-  _this.selectedRow = currentRow
-  selected()
-}
-
-const addRowData = () => {
-  handleCurrentChange(optionsMap.value[optionsMap.value.length - 1])
-}
-
-const selected = () => {
-  emit('update:modelValue', (_this.selectedRow as Option)?.value || '')
-  emit('change', (_this.selectedRow as Option)?.value || '')
-  emit('selected', _this.selectedRow)
-}
-
-const clickOutside = () => {
-  if (!_this.showPanel) return false
-  _this.showPanel = false
-  _this.vValue = (_this.selectedRow as Option)?.label || _this.oValue
-}
-
-/** 关闭 */
-const close = () => {
-  if (!_this.showPanel) return false
-  setTimeout(() => {
-    _this.showPanel = false
-  })
-}
-
-const focus = () => {
-  const elDom = document.querySelector('.' + elClassName)
-  if (elDom) {
-    const clickEvent = new MouseEvent('click', {
-      bubbles: true, // 允许事件冒泡
-      cancelable: true // 允许事件可以被取消
-    })
-    elDom.dispatchEvent(clickEvent)
-  }
-  _this.oValue = _this.vValue
-  if (props.focusShow) {
-    _this.showPanel = true
-    if (props.total !== null) {
-      props.remoteMethod(_this.vValue || '', page)
-    } else {
-      props.remoteMethod(_this.vValue || '')
-    }
-  }
-}
-
-const tableRowClassName = ({ row }: { row: any, rowIndex: number }): string => {
-  return row.className
-}
-
-const tableRowStyle = ({ row }: { row: any, rowIndex: number }): any => {
-  const style: any = {}
-  if (row.className.includes('s-disabled')) {
-    style.color = 'var(--el-disabled-text-color)'
-    style.cursor = 'not-allowed'
-  }
-  if (row.className.includes('s-add')) {
-    style.backgroundColor = 'rgba(135, 208, 104, 0.1)'
-  }
-  return style
-}
-
-const tableCellStyle = ({ row }: { row: any, column: any, rowIndex: number, columnIndex: number }): any => {
-  const style: any = {}
-  if (row.className.includes('s-disabled')) {
-    style.pointerEvents = 'none'
-  }
-  return style
-}
-
-const mTableBoxStyle = {
-  position: 'fixed',
-  opacity: 0,
-  zIndex: 9000,
-  padding: '8px',
-  width: '500px',
-  border: '1px solid var(--el-border-color-lighter, #ebeef5)',
-  boxShadow: '0 2px 12px 0 rgba(0,0,0,.1)',
-  background: 'var(--el-bg-color, #fff)',
-  borderRadius: '4px'
-}
-
-const mMarkStyle = {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  zIndex: 8,
-  width: '100%',
-  height: '100%'
-}
-
-defineExpose({
-  close
-})
-</script>
-
-<style scoped lang="scss">
-.g-select-table-box {
-  position: relative;
-  line-height: normal;
-
-  .u-input-gp {
-    position: relative;
-    //height: 24px;
-
-    &:hover .el-icon-circle-close {
-      display: block;
-    }
-  }
-
-  .el-icon-circle-close {
-    display: none;
-    position: absolute;
-    top: 50%;
-    right: 10px;
-    font-size: 14px;
-    color: #c0c4cc;
-    transform: translateY(-50%);
-    cursor: pointer;
-
-    &:hover {
-      color: #a4a7ad;
-    }
-  }
-
-  .s-table {
-    width: 100%;
-  }
-}
-
-.btn-box{
-  text-align: right;
-  padding-bottom: 6px;
-}
-
-.m-page {
-  padding-top: 4px;
-}
-</style>
-
-<style lang="scss">
-.g-select-table-box {
-  .u-input-gp .el-input {
-    display: flex;
-  }
-
-  .el-table {
-    --el-table-header-bg-color: var(--m-list-el-table-header-bg-color, #f5f5f5);
-  }
-}
-
-/*标记*/
-//.m-table-box {
-//  position: fixed;
-//  //top: 100%;
-//  //left: 0;
-//  opacity: 0;
-//  z-index: 9;
-//  padding: 8px;
-//  width: 500px;
-//  border: 1px solid var(--el-border-color-lighter, #ebeef5);
-//  -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
-//  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
-//  background: var(--el-bg-color, #fff);
-//  border-radius: 4px;
-//}
-
-//.m-mask {
-//  position: fixed;
-//  top: 0;
-//  left: 0;
-//  z-index: 8;
-//  width: 100%;
-//  height: 100%;
-//}
-</style>

package/docs/packages/MSelectV2/docs/README.md

@@ -1,31 +0,0 @@
-<script setup>
-import demo from './demo.vue'
-</script>
-
-下拉选择器V2组件
-=================
-
-### 1) 基础用法
-
-<Preview comp-name="MSelectV2" demo-name="demo">
-  <demo />
-</Preview>
-
-### 2) Attributes
-
-| 参数                            |                            说明                             |    类型    | 可选值 |  默认值  |
-|-------------------------------|:---------------------------------------------------------:|:--------:|:---:|:-----:|
-| value / v-model               |                            绑定值                            |  number  |  -  |  ''   |
-| checkbox-mode                 |                      是否为复选框模式（只影响样式）                      | boolean  |  -  | false |
-| multiple                      |                           是否多选                            | boolean  |  -  | false |
-| show-all                      |               是否显示全选选项（只在multiple为true时生效）                | boolean  |  -  | false |
-| options                       |                            选项值                            | Option[] |  -  |  []   |
-| 其他属性同element-plus的el-select组件 | https://element-plus.gitee.io/zh-CN/component/select.html |    -     |  -  |   -   |
-
-#### Option（选项对象）
-
-| 参数       |          说明           |   类型    | 必填 | 可选值 |  默认值  |
-|----------|:---------------------:|:-------:|:--:|:---:|:-----:|
-| label    | 选项的标签，若不设置则默认与value相同 | string  | 否  |  -  |   -   |
-| value    |         选项的值          | number  | 是  |  -  |   -   |
-| disabled |        是否禁用该选项        | boolean | 否  |  -  | false |

package/docs/packages/MSelectV2/docs/demo.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="g-demo-m-select-box">
-    <m-select-v2
-      v-model="test"
-      checkboxMode
-      multiple
-      :options="options"
-      showAll
-    >
-    </m-select-v2>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const test = ref<string>('')
-
-const options: Option[] = [{
-  label: '这是选项一',
-  value: 'a'
-}, {
-  label: '这是选项二',
-  value: 'b'
-}, {
-  label: '这是选项三',
-  value: 'c',
-  disabled: true
-}]
-</script>
-
-<style scoped>
-.g-demo-m-select-box {
-  max-width: 1000px;
-}
-</style>

package/docs/packages/MSelectV2/index.ts

@@ -1,10 +0,0 @@
-import { App, Plugin } from 'vue'
-import MSelectV2 from './src/MSelectV2.vue'
-
-export const MSelectV2Plugin: Plugin = {
-  install (app: App) {
-    app.component('MSelectV2', MSelectV2)
-  }
-}
-
-export { MSelectV2 }

package/docs/packages/MSelectV2/src/MSelectV2.vue

@@ -1,116 +0,0 @@
-<template>
-  <el-select
-    v-bind="attrs"
-    :multiple="props.multiple"
-    v-model="modelValue"
-  >
-    <template
-      v-if="showAll && props.multiple"
-      #header
-    >
-      <el-checkbox
-        class="u-checkbox"
-        v-model="checkAll"
-        :indeterminate="indeterminate"
-        @change="handleCheckAll"
-      >
-        全选
-      </el-checkbox>
-    </template>
-    <el-option
-      v-for="item in props.options"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value"
-      :disabled="item.disabled"
-    ></el-option>
-  </el-select>
-</template>
-
-<script setup lang="ts">
-import { provide, useAttrs, ref, watch } from 'vue'
-import { selectKey } from 'packages/MSelect/src/token'
-
-const props = withDefaults(defineProps<{
-  /** @description 是否为checkbox模式 */
-  checkboxMode?: boolean,
-  /** @description 多选 */
-  multiple?: boolean,
-  /** @description 是否显示全选 */
-  showAll?: boolean,
-  /** @description 选项 */
-  options?: Option[]
-}>(), {
-  /** @description 是否为checkbox模式 */
-  checkboxMode: false,
-  /** @description 多选 */
-  multiple: false,
-  /** @description 是否显示全选 */
-  showAll: false,
-  /** @description 选项 */
-  options: () => []
-})
-
-const attrs = useAttrs()
-
-type ValueType = string | number | Array<string | number>
-const modelValue = ref<ValueType>(attrs.modelValue as ValueType)
-watch(
-  () => attrs.modelValue,
-  () => {
-    modelValue.value = attrs.modelValue as ValueType
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [data: any]
-}>()
-
-const checkAll = ref(false)
-const indeterminate = ref(false)
-const handleCheckAll = (val: boolean) => {
-  indeterminate.value = false
-  if (val) {
-    modelValue.value = props.options.filter(item => !item.disabled).map(item => item.value)
-  } else {
-    modelValue.value = []
-  }
-}
-watch(
-  () => modelValue.value,
-  (val) => {
-    if (!Array.isArray(val)) return
-    if (val.length === 0) {
-      checkAll.value = false
-      indeterminate.value = false
-    } else if (val.length === props.options.filter(item => !item.disabled).length) {
-      checkAll.value = true
-      indeterminate.value = false
-    } else {
-      indeterminate.value = true
-    }
-  }
-)
-
-watch(
-  () => modelValue.value,
-  () => {
-    emit('update:modelValue', modelValue.value)
-  }
-)
-
-provide(selectKey, {
-  checkboxMode: props.checkboxMode,
-  modelValue,
-  multiple: props.multiple as boolean
-})
-</script>
-
-<style lang="scss" scoped>
-.u-checkbox {
-  height: var(--el-checkbox-height, 20px)
-}
-</style>
-
-<style lang="scss">
-</style>

package/docs/packages/MTable/docs/README.md

@@ -1,40 +0,0 @@
-<script setup>
-import demo from './demo.vue'
-</script>
-
-表格组件
-=================
-
-### 1) 基础用法
-
-<Preview comp-name="MTable" demo-name="demo">
-  <demo />
-</Preview>
-
-
-### 2) Attributes
-| 参数              |            说明            |    类型    |         可选值          |  默认值 |
-| ----------- | ------- | ---------------------------- |-----|--------|
-|data               |表格的数据                  | Array      |           -            |    [ ]   |
-|sole               |行的唯一值                  |String , number     |    -              |    key  |
-|filtersValue       |表格内容筛选                |Function    |   -                    |  () => void   |
-|其余参数            |参考el官网的table           |any         |        -               |https://element-plus.org/zh-CN/component/table.html|
-## 要求
-```
-sole 必须传递在表格数据内为唯一的值  如id key 等不会发生重复的关键字
-```
-
-### 3) Events
-| 方法名          |     说明      |          回调参数           |
-| ----------- | ------- | ---------------------------- |
-| pasteData      | 表格粘贴方法   |  共有2个参数,依次为粘贴动作的数据PasteAction ,表格原始数据tableData |
-|其余方法          |参考el官网的table           |https://element-plus.org/zh-CN/component/table.html|
-
-### 4) PasteAction
-|参数  |  说明  | 类型  | 
-|-----|-------|-------|
-|editRow|返回粘贴的对应行的原始数据|Object|
-|editColumn|返回粘贴时鼠标所在列的 表格prop值|String|
-|arr|返回粘贴时候处理之后的 数组信息|Array|
-|rowIndex|根据sole的值 去data内查找   当前操作的 粘贴行在data内的序号|number|
-