br-dionysus 1.6.7 → 1.6.9

package/docs/packages/MTableColumn/src/MTableColumn.vue

@@ -1,345 +0,0 @@
-<template>
-  <el-table-column
-    v-bind="attrs"
-    :filterMethod="props.filterMethod"
-  >
-    <template
-      #default="scope"
-      v-if="slots.default"
-    >
-      <slot
-        name="default"
-        :row="scope.row"
-        :column="scope.column"
-        :index="scope.$index"
-      ></slot>
-    </template>
-    <template v-if="props.children && props.children.length">
-      <m-table-column
-        v-for="child in props.children"
-        :key="child.prop"
-        :prop="child.prop"
-        :label="child.label"
-        :minWidth="child.minWidth"
-        showOverflowTooltip
-        :children="child.children || []"
-      ></m-table-column>
-    </template>
-    <template #header="scope">
-      <span>
-        <slot
-          name="header"
-          :row="scope.row"
-          :column="scope.column"
-          :index="scope.$index"
-        ></slot>
-        <span>
-          <span v-if="!slots.header">{{ scope.column.label }}</span>
-          <div
-            v-if="props.filters.length"
-            class="u-filter-group"
-          >
-            <i
-              class="u-icon j-icon"
-              @click="open($event, scope.column.property)"
-            ></i>
-
-            <Teleport to="body">
-              <div
-                class="m-filter-box j-filter-box"
-                :data-is-open="filterBoxIsOpen"
-                v-if="filterBoxIsOpen"
-              >
-                <div
-                  class="u-filter-mask"
-                  @click="close(scope.column.property)"
-                ></div>
-                <div
-                  class="u-list-box"
-                  ref="filterBoxRef"
-                  :style="boxStyle"
-                >
-                  <div class="u-it-gp">
-                    <el-input
-                      v-model="filterText"
-                      placeholder="请输入内容"
-                      clearable
-                      size="small"
-                    ></el-input>
-                  </div>
-                  <el-checkbox-group
-                    class="u-checkbox-group"
-                    v-model="filteredValue"
-                  >
-                    <el-checkbox
-                      v-for="item in getCheckboxOptions(props.filters)"
-                      :key="item.value"
-                      :label="item.value"
-                    >
-                      <template v-if="slots.default">
-                        <slot
-                          name="default"
-                          :row="{ [scope.column.property]: item.text }"
-                          :column="scope.column"
-                          :index="scope.$index"
-                        ></slot>
-                      </template>
-                      <template v-if="!slots.default">{{ item.text }}</template>
-                    </el-checkbox>
-                  </el-checkbox-group>
-                  <div class="u-btn-gp">
-                    <el-button
-                      link
-                      :disabled="!filteredValue.length"
-                      @click="sift(scope.column.property)"
-                    >
-                      筛选
-                    </el-button>
-                    <el-button
-                      link
-                      @click="reset(scope.column.property)"
-                    >
-                      重置
-                    </el-button>
-                  </div>
-                </div>
-              </div>
-            </Teleport>
-          </div>
-          <MTableColumnSet
-            class="u-set"
-            v-if="showTableConfig"
-            v-model="tableConfig"
-            link
-          ></MTableColumnSet>
-        </span>
-      </span>
-    </template>
-  </el-table-column>
-</template>
-
-<script setup lang="ts">
-import { ref, useSlots, useAttrs, inject, computed } from 'vue'
-import checkType from '../../../tool/checkType'
-import { tableKey } from './../../MTable/src/token'
-
-interface FilterValue {
-  [key: string]: Array<string | number>
-}
-
-interface PropChildren {
-  [prop: string]: any,
-  children?: PropChildren[]
-}
-
-const props = withDefaults(defineProps<{
-  /** 过滤值 */
-  filtersValue?: FilterValue,
-  /** 过滤选项 */
-  filters?: Array<{ text: string | number, value: string | number }>,
-  /** 过滤方法 */
-  filterMethod?: Function | null,
-  children?: Array<PropChildren>,
-}>(), {
-  filtersValue: () => ({}),
-  filters: () => [],
-  filterMethod: null,
-  children: () => []
-})
-
-const slots = useSlots()
-const attrs = useAttrs()
-
-const emit = defineEmits(['update:filtersValue'])
-
-const tableKeyData = inject(tableKey)
-const tableConfig = tableKeyData?.tableConfig
-const showTableConfig = computed(() => {
-  if (!tableKeyData || !tableConfig) return false
-  if (!tableConfig.value) return false
-  return tableKeyData.lastColumnProp.value === attrs.prop
-})
-
-const filterText = ref<string>('')
-
-const getCheckboxOptions = (options: { text: string | number, value: string | number }[]) => {
-  return options
-    .map(item => ({
-      ...item,
-      value: checkType.isArray(item.value) || checkType.isObject(item.value) ? JSON.stringify(item.value) : item.value
-    }))
-    .filter(item => String(item.value).includes(filterText.value))
-}
-
-const filteredValue = ref<Array<string | number>>([])
-const sift = (property: string) => {
-  const data = {
-    ...props.filtersValue,
-    [property]: filteredValue.value
-  }
-  emit('update:filtersValue', data)
-  close(property)
-}
-
-const reset = (property: string) => {
-  filteredValue.value = []
-  const data = {
-    ...props.filtersValue,
-    [property]: []
-  }
-  emit('update:filtersValue', data)
-  close(property)
-}
-
-const filterBoxIsOpen = ref<boolean>(false)
-
-const filterBoxRef = ref<HTMLElement>()
-
-const open = (event: MouseEvent, property: string) => {
-  const dom: HTMLElement = event.target as HTMLElement
-  const { width, height, bottom, right } = dom.getBoundingClientRect()
-  const isTopMode = window.innerHeight - bottom < 400 + 20
-  const isLeftMode = window.innerWidth - right < (filterBoxRef.value?.clientWidth || 0) + 20
-  filteredValue.value = props.filtersValue[property] || []
-  if (isTopMode) {
-    boxStyle.value.top = 'unset'
-    boxStyle.value.bottom = `${window.innerHeight - event.clientY + height - 5}px`
-  } else {
-    boxStyle.value.top = `${event.clientY - event.offsetY + height + 5}px`
-    boxStyle.value.bottom = 'unset'
-  }
-  if (isLeftMode) {
-    boxStyle.value.left = 'unset'
-    boxStyle.value.right = `${window.innerWidth - (event.clientX - event.offsetX) - width}px`
-  } else {
-    boxStyle.value.left = `${event.clientX - event.offsetX}px`
-    boxStyle.value.right = 'unset'
-  }
-  filterBoxIsOpen.value = true
-}
-
-const close = (property: string) => {
-  filterBoxIsOpen.value = false
-  filteredValue.value = props.filtersValue[property] || []
-}
-
-interface BoxStyle {
-  top: string | number,
-  left: string | number,
-  bottom: string | number,
-  right: string | number
-}
-
-const boxStyle = ref<BoxStyle>({
-  top: 0,
-  left: 0,
-  bottom: 'unset',
-  right: 'unset'
-})
-</script>
-
-<style scoped lang="scss">
-.u-icon {
-  display: inline-block;
-  position: relative;
-  width: 14px;
-  height: 14px;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAMdJREFUOE/tkyESwjAQRfMj0Xgkp2AmaQweHCeAS1AuASfAgce0yQynQOLRyHyazpRpoW2YAcnKbP7L7t8sxJeBoM+yLK04Ukp678vzWBhj0iegEK5jgnq+eGTzO4C1dkhyDGAvhBhFKrmSXAC4aK1vjV6dcxPv/QnAoA1C8i6lnCqlzlX+zaw8z2cADh2AeZIkx3qu1W3n3JLktnERWCmldq/gznFZa8NUyvFWjrdV9QcIEfWgz8BgaicgLFj467H9+Gjr+iAPDfV1EeVT6aEAAAAASUVORK5CYII=");
-  background-size: 100% 100%;
-  transform: translateY(2px);
-  cursor: pointer;
-}
-
-.u-filter-group {
-  display: inline-block;
-  position: relative;
-}
-
-.u-set {
-  padding: 2.5px 0;
-  float: right;
-}
-</style>
-
-<style lang="scss">
-.m-filter-box {
-  $zIndex: 2050;
-
-  &[data-is-open="true"] {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  &[data-is-open="false"] {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .u-filter-mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: $zIndex;
-    width: 100%;
-    height: 100%;
-  }
-
-  .u-it-gp {
-    padding: 10px;
-    border-bottom: 1px solid var(--el-border-color-lighter);
-  }
-
-  .u-list-box {
-    overflow: hidden;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: $zIndex;
-    //width: 134px;
-    max-width: 50%;
-    background: var(--el-bg-color-overlay);
-    border: 1px solid var(--el-border-color-light);
-    border-radius: var(--el-popper-border-radius, 4px);
-    box-shadow: var(--el-box-shadow-light);
-
-    .u-checkbox-group {
-      overflow-y: auto;
-      display: block;
-      padding: 10px;
-      max-height: 280px;
-    }
-
-    label.el-checkbox {
-      display: flex;
-      align-items: center;
-      margin-right: 5px;
-      margin-bottom: 12px;
-      margin-left: 5px;
-      height: unset;
-    }
-
-    label.el-checkbox:last-child {
-      margin-bottom: 0;
-    }
-
-    .u-btn-gp {
-      border-top: 1px solid var(--el-border-color-lighter);
-      padding: 8px;
-    }
-
-    button.is-disabled {
-      color: var(--el-disabled-text-color);
-      cursor: not-allowed;
-    }
-
-    button {
-      background: 0 0;
-      border: none;
-      color: var(--el-text-color-regular);
-      cursor: pointer;
-      font-size: var(--el-font-size-small);
-      padding: 0 3px;
-    }
-  }
-}
-</style>

package/docs/packages/MTableColumnSet/docs/README.md

@@ -1,31 +0,0 @@
-<script setup>
-import demo from './demo.vue'
-</script>
-
-表格头设置组件
-=================
-
-### 1) 基础用法
-
-<Preview comp-name="MTableColumnSet" demo-name="demo">
-  <demo />
-</Preview>
-
-
-### 2) Attributes
-
-| 参数                    | 说明                                                 | 类型                                     | 可选值 | 默认值   |
-|-----------------------| ---------------------------------------------------- | ---------------------------------------- | ------ |-------|
-| model-value / v-model | 绑定值                                               | {  [propName: string]: TableConfigItem } | -      | {}    |
-| link                  | 是否为链接按钮                                               | boolean | -      | false |
-| foldMode              | 是否开启折叠 开启的话需要父级元素为flex布局/grid布局 | boolean                                  | -      | false |
-
-
-### 3) TableConfigItem 
-| 参数        | 说明                                              | 类型                       |
-| ----------- | ------------------------------------------------- | -------------------------- |
-| minWidth    | 最小列宽                                          | number,string              |
-| show        | 是否显示                                          | boolean                    |
-| sort        | 排序                                              | number                     |
-| label       | 列名                                              | string                     |
-| headerAlign | 表头对齐方式， 若不设置该项，则使用表格的对齐方式 | 'left' ,'center' , 'right' |

package/docs/packages/MTableColumnSet/docs/demo.vue

@@ -1,36 +0,0 @@
-<template>
-  <div>
-    <MTableColumnSet v-model="tableConfig"/>
-    <div>
-      {{ tableConfig }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const tableConfig = ref({
-  date: {
-    minWidth: 100,
-    show: true,
-    sort: 0,
-    label: 'date'
-  },
-  name: {
-    minWidth: 100,
-    show: true,
-    sort: 1,
-    label: 'name'
-  },
-  address: {
-    minWidth: 100,
-    show: true,
-    sort: 2,
-    label: 'address'
-  }
-})
-
-</script>
-
-<style lang="scss"></style>

package/docs/packages/MTableColumnSet/index.ts

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