br-dionysus 1.6.5 → 1.6.7

package/docs/packages/MTableColumnSet/src/MTableColumnSet.vue

@@ -0,0 +1,310 @@
+<template>
+  <div
+    class="g-m-table-column-set-box"
+    :data-fold="props.foldMode"
+    :data-visible="visible"
+  >
+    <el-button
+      class="vab"
+      :class="btnClassName"
+      size="small"
+      icon="Setting"
+      :link="props.link"
+      @click="switchVisible"
+    >
+    </el-button>
+
+    <Teleport to="body">
+      <div
+        class="g-m-table-column-set-teleport"
+        v-if="visible"
+      >
+        <div
+          class="m-panel-box"
+          :data-active="visible"
+          :style="panelStyle as any"
+        >
+          <div class="u-tt">
+            <el-text class="u-p">表头</el-text>
+            <el-radio-group
+              v-model="tableTitleAlign"
+              size="small"
+              @change="editTableTitleAlign"
+            >
+              <el-radio-button label="left">居左</el-radio-button>
+              <el-radio-button label="center">居中</el-radio-button>
+              <el-radio-button label="right">居右</el-radio-button>
+            </el-radio-group>
+          </div>
+          <el-divider class="u-divider" />
+          <div class="u-tc">
+            <el-text class="u-p">列配置</el-text>
+            <el-checkbox-group v-model="checkList">
+              <ul
+                class="u-list"
+                @dragover.prevent="dragover"
+              >
+                <li
+                  class="u-li"
+                  v-for="(item, index) in list"
+                  :key="item.prop"
+                  draggable="true"
+                  @drop="drop(index)"
+                  @dragstart="dragstart(item.prop)"
+                >
+                  <el-icon class="u-icon"><Sort /></el-icon>
+                  <el-checkbox :label="item.prop">
+                    {{ index + 1 }}. {{ item.label }}
+                  </el-checkbox>
+                  <!--<el-radio-group-->
+                  <!--  v-model="item.align"-->
+                  <!--  size="small"-->
+                  <!--&gt;-->
+                  <!--  <el-radio-button label="left">居左</el-radio-button>-->
+                  <!--  <el-radio-button label="center">居中</el-radio-button>-->
+                  <!--  <el-radio-button label="right">居右</el-radio-button>-->
+                  <!--</el-radio-group>-->
+                </li>
+              </ul>
+            </el-checkbox-group>
+          </div>
+        </div>
+
+        <div
+          class="m-masked"
+          v-if="visible"
+          @click="switchVisible"
+        ></div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import type { Ref } from 'vue'
+import createHash from '../../../tool/createHash'
+interface TableConfigItem {
+  /** 最小列宽 */
+  minWidth: number | string,
+  /** 是否显示 */
+  show: boolean,
+  /** 排序 */
+  sort: number,
+  /** 列名 */
+  label: string,
+  /** 表头对齐方式， 若不设置该项，则使用表格的对齐方式 */
+  headerAlign: 'left' | 'center' | 'right',
+  // /** 对齐方式 */
+  // align: 'left' | 'center' | 'right',
+}
+interface TableConfig {
+  [propName: string]: TableConfigItem
+}
+
+const props = withDefaults(defineProps<{
+  /** 配置 */
+  modelValue: TableConfig,
+  /** 是否为折叠模式 */
+  foldMode?: boolean,
+  /** 是否为链接按钮 */
+  link?: boolean
+}>(), {
+  modelValue: () => ({} as TableConfig),
+  foldMode: false,
+  link: false
+})
+
+interface Item extends TableConfigItem {
+  prop: string
+}
+
+const list: Ref<Item[]> = computed(() => {
+  return Object.keys(props.modelValue).map(key => {
+    return {
+      ...props.modelValue[key],
+      prop: key
+    }
+  }).sort((a, b) => a.sort - b.sort)
+})
+
+const tableTitleAlign = ref<'left' | 'center' | 'right'>(list.value[0]?.headerAlign || 'left')
+
+const editTableTitleAlign = () => {
+  const tableConfig: TableConfig = {}
+  for (const key in props.modelValue) {
+    tableConfig[key] = {
+      ...props.modelValue[key],
+      headerAlign: tableTitleAlign.value
+    }
+  }
+  emit('update:modelValue', tableConfig)
+  emit('change', tableConfig)
+}
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const checkList = ref<string[]>([])
+checkList.value = list.value.filter(item => item.show).map(item => item.prop)
+
+watch(
+  () => checkList.value,
+  () => {
+    const tableConfig: TableConfig = {}
+    for (const key in props.modelValue) {
+      tableConfig[key] = {
+        ...props.modelValue[key],
+        show: checkList.value.includes(key)
+      }
+    }
+    emit('update:modelValue', tableConfig)
+    emit('change', tableConfig)
+  }
+)
+
+const visible = ref<boolean>(false)
+const btnClassName = 'j-' + createHash(8)
+const panelStyle = ref<Partial<CSSStyleDeclaration>>({})
+const switchVisible = () => {
+  visible.value = !visible.value
+  if (!visible.value) return false
+  const element: Element | null = document.querySelector('.' + btnClassName)
+  if (!element) return false
+  const rect = element.getBoundingClientRect()
+  panelStyle.value = {
+    top: rect.top + rect.height + 8 + 'px',
+    right: window.innerWidth - rect.right + 'px'
+  }
+}
+
+const dragKey = ref<string>('')
+
+const dragstart = (key: string) => {
+  dragKey.value = key
+}
+
+const drop = (index: number) => {
+  const tableConfig: TableConfig = {}
+  const arr = list.value.map(item => item.prop)
+  arr.splice(arr.indexOf(dragKey.value), 1)
+  arr.splice(index, 0, dragKey.value)
+  for (const key in props.modelValue) {
+    tableConfig[key] = {
+      ...props.modelValue[key],
+      sort: arr.indexOf(key)
+    }
+  }
+  emit('update:modelValue', tableConfig)
+  emit('change', tableConfig)
+}
+
+const dragover = () => {
+}
+</script>
+
+<style scoped lang="scss">
+.vab {
+  vertical-align: baseline;
+}
+.g-m-table-column-set-box {
+  display: flex;
+  position: relative;
+
+  &[data-fold="true"] {
+    overflow: hidden;
+    width: 10px;
+    transition: width .3s;
+
+    &:hover {
+      width: 36px;
+    }
+  }
+
+  &[data-visible="true"] {
+    overflow: visible;
+    width: auto !important;
+  }
+}
+
+.m-panel-box {
+  display: none;
+  overflow-y: auto;
+  padding: 6px 4px;
+  position: absolute;
+  top: 30px;
+  right: 0;
+  z-index: 7;
+  min-width: 214px;
+  max-height: 300px;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 1px solid var(--el-border-color-lighter);
+  box-shadow: 2px 0 8px #1d23290d;
+  box-sizing: border-box;
+
+  &[data-active="true"] {
+    display: block;
+  }
+
+  .u-list {
+    .u-li {
+      display: flex;
+      align-items: center;
+      padding: 4px;
+
+      .u-icon {
+        margin-right: 8px;
+        font-size: 12px;
+        color: var(--el-color-primary);
+        cursor: move;
+      }
+    }
+  }
+
+  .u-tt, .u-tc {
+    display: flex;
+    padding-top: 10px;
+
+    .u-p {
+      display: block;
+      padding-left: 4px;
+      width: 50px;
+      align-self: auto;
+      white-space: nowrap;
+      line-height: 24px;
+      font-weight: 700;
+    }
+  }
+
+  .u-tc {
+    padding-top: 0;
+
+    .u-p {
+      line-height: 40px;
+    }
+  }
+
+  .u-divider {
+    margin-top: 10px;
+    margin-bottom: 0;
+  }
+}
+
+.m-masked {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 6;
+  width: 100%;
+  height: 100%;
+}
+
+.g-m-table-column-set-teleport {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 6;
+  width: 100%;
+  height: 100%;
+}
+</style>

package/docs/packages/README.md

@@ -0,0 +1,10 @@
+# 对于打包生成MD的第一版的格式要求
+
+1. 在`packages`文件夹下新建对应组件的文件夹，里面需要包含`docs`。
+2. `docs`文件夹内应包含`README.md`文档和`demo.vue`两个文件。
+3. 对于`README.md`文档的要求如下：
+   1. 必须有一个`#XXX`的组件名
+   2. 包含基础用法示例，示例为 demo 模块放置区域的开始
+   3. 当前版本取为 demo 模块区域结束
+4. 如果发现 demo 区域样式不对，请在 `demo.vue` 的文件内添加一行空的换行。
+5. 如果有`packages`文件夹下需要过滤的文件夹请在`createMd.js`文件内的`unwantedFolders`数组内添加文件夹名称

package/docs/packages/SkinConfig/docs/README.md

@@ -0,0 +1,42 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+
+皮肤设置
+=================
+
+### 1) 基础用法
+
+<Preview comp-name="SkinConfig" demo-name="demo">
+  <demo />
+</Preview>
+
+### 2) Exposes
+
+| 方法名     |    说明    |        参数        |       返回值        |
+|---------|:--------:|:----------------:|:----------------:|
+| setSkin |  设置主题配置  | SkinConfig（皮肤对象） |       void       |
+| getSkin | 获取当前主题配置 |        -         | SkinConfig（皮肤对象） |
+
+#### SkinConfig（皮肤对象）
+
+| 参数           |   说明    |   类型    |            可选值            |    默认值    |
+|--------------|:-------:|:-------:|:-------------------------:|:---------:|
+| darkTheme    | 是否为深色主题 | boolean |             -             |   false   |
+| followSystem | 是否跟随系统  | boolean |             -             |   false   |
+| size         |   大小    |  enum   | large \| default \| small |  default  |
+| primaryColor |   主题色   | string  |             -             | '#646CFF' |
+| successColor |   成功色   | string  |             -             | '#67c23a' |
+| warningColor |   警告色   | string  |             -             | '#e6a23c' |
+| dangerColor  |   危险色   | string  |             -             | '#f56c6c' |
+| infoColor    |   信息色   | string  |             -             | '#909399' |
+
+### 3) 说明
+
+组件通过修改全局的css变量来实现的效果，故暗夜模式需手动在全局加css，具体见示例。组件一被引用，就会自动读取本地配置生效，无本地配置时，以默认值计算。
+
+### 4) Events
+
+| 方法名    |    说明     |     参数     |
+|--------|:---------:|:----------:|
+| change | 绑定值被改变时触发 | SkinConfig |