br-dionysus 1.6.7 → 1.6.8

package/docs/packages/MInline/src/MInline.vue

@@ -1,284 +0,0 @@
-<template>
-  <div class="g-inline-box">
-    <div
-      v-if="slots.inlineBtn"
-      v-show="showInlineBtnBox"
-      class="m-inline-btn"
-      :class="inlineBtnBoxClassName"
-      @click="checkMultiLine"
-    >
-      <slot name="inlineBtn"></slot>
-    </div>
-    <div
-      v-if="slots.default"
-      class="m-inline"
-      :data-show-inline-btn="showInlineBtnBox"
-      dataCover
-    >
-      <div
-        class="u-row"
-        :class="boxClassName"
-        :style="{
-          maxHeight: height + 'px'
-        }"
-        :data-unfold="unfold"
-        :data-single-line="!showUnfoldBtn"
-      >
-        <slot name="default"></slot>
-      </div>
-      <div
-        class="u-btn-gp"
-        :style="{
-          height: height + 'px'
-        }"
-      >
-        <slot name="submitBtn"></slot>
-        <el-icon
-          v-if="showUnfoldBtn"
-          class="u-btn-unfold"
-          @click="switchUnfold"
-          :data-unfold="unfold"
-        >
-          <DArrowRight />
-        </el-icon>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, useSlots, watch, computed } from 'vue'
-import { Size } from 'packages/typings/enum'
-
-const props = withDefaults(defineProps<{
-  /**
-   * @description 列最小宽度
-   * */
-  minWidth?: number,
-  /**
-   * 列最大宽度
-   * */
-  maxWidth?: number,
-  /** 组件尺寸 */
-  size?: Size
-}>(), {
-  minWidth: 290,
-  maxWidth: 400,
-  size: Size.DEFAULT
-})
-
-const height = computed(() => {
-  if (props.size === Size.LARGE) return 50
-  if (props.size === Size.DEFAULT) return 42
-  if (props.size === Size.SMALL) return 34
-  return 34
-})
-
-const createHash = (hashLength: number = 24) => {
-  return Array.from(Array(Number(hashLength) || 24), () => Math.floor(Math.random() * 36).toString(36)).join('')
-}
-
-const init = () => {
-  document.documentElement.style.setProperty('--m-inline-min-width', props.minWidth + 'px')
-  document.documentElement.style.setProperty('--m-inline-max-width', props.maxWidth + 'px')
-}
-watch(
-  () => [props.minWidth, props.maxWidth],
-  () => {
-    init()
-  }
-)
-init()
-
-const slots = useSlots()
-
-const emit = defineEmits<{
-  /** 切换折叠展开事件 */
-  switch: [status: boolean]
-}>()
-
-const boxClassName = 'j-' + createHash(8)
-
-// 检查多行
-const checkMultiLine = () => {
-  const boxEl: Element | null = document.querySelector('.' + boxClassName + ' [data-box]')
-  if (!boxEl) return false
-  const itemEls: NodeListOf<Element> = boxEl.querySelectorAll('.' + boxClassName + ' [data-item]')
-  return boxEl.clientWidth < itemEls.length * props.minWidth
-}
-
-const resizeObserver = new ResizeObserver(() => {
-  showUnfoldBtn.value = checkMultiLine()
-})
-const showUnfoldBtn = ref<boolean>(true)
-onMounted(() => {
-  const boxEl: Element | null = document.querySelector('[data-box]')
-  if (!boxEl) return false
-  showUnfoldBtn.value = checkMultiLine()
-  resizeObserver.observe(boxEl)
-})
-
-const unfold = ref<boolean>(false)
-
-const switchUnfold = () => {
-  unfold.value = !unfold.value
-  emit('switch', unfold.value)
-}
-
-const throttle = (func: Function, limit: number = 100) => {
-  let inThrottle: boolean = false
-  return (...args: any) => {
-    if (!inThrottle) {
-      inThrottle = true
-      setTimeout(() => {
-        func.apply(this, args)
-        inThrottle = false
-      }, limit)
-    }
-  }
-}
-const showInlineBtnBox = ref<boolean>(false)
-const inlineBtnBoxClassName = 'j-' + createHash(8)
-onMounted(() => {
-  const targetNode: Element | null = document.querySelector('.' + inlineBtnBoxClassName)
-  if (!targetNode) return false
-  const getDomState = () => {
-    showInlineBtnBox.value = false
-    for (let i = 0; i < targetNode.children.length; i++) {
-      const node = targetNode.children[i]
-      const nodeStyle: CSSStyleDeclaration = window.getComputedStyle(node)
-      if (nodeStyle.display !== 'none') showInlineBtnBox.value = true
-    }
-  }
-  getDomState()
-  const observer = new MutationObserver(throttle(getDomState))
-  observer.observe(targetNode, {
-    attributes: true, // 属性变化
-    childList: true, // 子节点增删
-    subtree: true // 后代
-  })
-})
-</script>
-
-<style scoped lang="scss">
-.g-inline-box {
-  margin-bottom: 14px;
-  padding-top: 10px;
-  //padding-bottom: 10px;
-  //padding-right: 14px;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 4px;
-}
-
-.m-inline-btn {
-  padding: 0 14px 10px 14px;
-}
-
-.m-inline {
-  display: flex;
-  position: relative;
-  width: 100%;
-}
-
-.m-inline-btn + .m-inline[data-show-inline-btn="true"] {
-  padding-top: 10px;
-
-  &:before {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    content: '';
-    width: calc(100% - 28px);
-    height: 1px;
-    background-color: var(--el-border-color-lighter);
-    transform: translateX(-50%);
-  }
-}
-
-.u-btn-gp {
-  display: flex;
-  padding-bottom: 10px;
-  padding-left: 14px;
-  padding-right: 14px;
-  align-items: center;
-  box-sizing: border-box;
-}
-
-.u-row {
-  display: flex;
-  overflow: hidden;
-  max-height: 34px;
-  flex: 1;
-
-  &[data-unfold="true"] {
-    max-height: none !important;
-  }
-}
-
-.u-btn-unfold {
-  margin-left: 8px;
-  width: 12px;
-  height: 24px;
-  line-height: 24px;
-  text-align: center;
-  color: var(--el-text-color-regular);
-  transform: rotate(90deg);
-  cursor: pointer;
-
-  &[data-unfold="true"] {
-    transform: rotate(270deg);
-  }
-}
-</style>
-
-<style lang="scss">
-.g-inline-box {
-  /*element组件样式全局覆盖*/
-  .m-inline[dataCover] {
-    //display: flex;
-
-    [data-box] {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(var(--m-inline-min-width), 1fr));
-
-      [data-item] {
-        padding-bottom: 10px;
-        min-width: var(--m-inline-min-width);
-        max-width: var(--m-inline-max-width);
-      }
-    }
-
-    .el-form-item {
-      margin-bottom: 0;
-      width: 100%;
-
-      .el-input, .el-cascader {
-        //width: 180px;
-        width: 100%;
-      }
-
-      //.el-form-item__content {
-      //  width: 180px;
-      //}
-    }
-
-    .el-form {
-      //display: flex;
-      width: 100%;
-      //flex-wrap: wrap;
-      //align-items: center;
-
-      .u-it-gp {
-        display: flex;
-      }
-    }
-
-    .u-row[data-single-line="true"] {
-      .el-form {
-        display: flex;
-        justify-content: flex-start;
-      }
-    }
-  }
-}
-</style>

package/docs/packages/MInputNumber/docs/README.md

@@ -1,35 +0,0 @@
-<script setup>
-import demo from './demo.vue'
-</script>
-
-数值输入框组件
-=================
-
-### 1) 基础用法
-<Preview comp-name="MInputNumber" demo-name="demo">
-  <demo />
-</Preview>
-
-### 2) Attributes
-
-| 参数               |        说明         |   类型    |        可选值         |    默认值    |
-|------------------|:-----------------:|:-------:|:------------------:|:---------:|
-| value / v-model  |        绑定值        | number  |         -          |    ''     |
-| min              |   设置数值输入框允许的最小值   | number  |         -          | -Infinity |
-| max              |   设置数值输入框允许的最大值   | number  |         -          | Infinity  |
-| step             |      数值输入框步长      | number  |         -          |     1     |
-| step-strictly    |  是否只能输入 step 的倍数  | boolean |         -          |   true    |
-| size             |      数值输入框尺寸      | string  | large, small, mini |     -     |
-| disabled         |     是否禁用数值输入框     | boolean |         -          |   false   |
-| placeholder      | 输入框默认 placeholder | string  |         -          |    ''     |
-| thousandth-place |    输入框是否显示千分位     | boolean |         -          |   false   |
-| no-border        |      是否不要边框       | boolean |         -          |   false   |
-| no-spacing       |       不要边距        | boolean |         -          |   false   |
-
-### 3) Events
-
-| 方法名    |       说明        |           参数           |
-|--------|:---------------:|:----------------------:|
-| change |    绑定值被改变时触发    | currentValue, oldValue |
-| focus  | 当 input 获得焦点时触发 |     (event: Event)     |
-| blur   | 当 input 失去焦点时触发 |     (event: Event)     |

package/docs/packages/MInputNumber/docs/demo.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="g-demo-m-input-number-box">
-    <m-input-number v-model="test"></m-input-number>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const test = ref<number>(0)
-</script>
-
-<style scoped>
-.g-demo-m-input-number-box {
-  max-width: 1000px;
-}
-</style>

package/docs/packages/MInputNumber/index.ts

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

package/docs/packages/MInputNumber/src/MInputNumber.vue

@@ -1,268 +0,0 @@
-<template>
-  <div
-    class="g-m-input-number-box"
-    :data-is-table-mini="data.isTableMini"
-    :data-no-spacing="props.noSpacing"
-  >
-    <el-input-number
-      class="m-input-number"
-      v-model="data.vValue"
-      :size="data.vSize"
-      :min="props.min"
-      :max="max"
-      :controls="false"
-      :disabled="props.disabled"
-      :placeholder="props.placeholder"
-      :step="props.step"
-      :stepStrictly="props.stepStrictly"
-      :data-thousandth-place="props.thousandthPlace"
-      :data-focus="data.isFocus"
-      :noBorder="props.noBorder"
-      @change="onChange($event);input()"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-    <input
-      v-if="props.thousandthPlace"
-      class="u-text"
-      type="text"
-      :data-size="data.vSize"
-      :data-thousandth-place="props.thousandthPlace"
-      :data-focus="data.isFocus"
-      :value="valueFormat"
-      :data-disabled="props.disabled"
-      readonly
-    >
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, computed, watch } from 'vue'
-
-const props = withDefaults(defineProps<{
-  modelValue: string | number,
-  placeholder?: string,
-  /** 是否禁用数值输入框 */
-  disabled?: boolean,
-  /** 数值输入框尺寸 */
-  size?: string,
-  /** 设置数值输入框允许的最小值 */
-  min?: number,
-  /** 设置数值输入框允许的最大值 */
-  max?: number,
-  /** 数值输入框步长 */
-  step?: number,
-  /** 是否只能输入 step 的倍数 */
-  stepStrictly?: boolean,
-  /** 输入框是否显示千分位 */
-  thousandthPlace?: boolean,
-  /** 是否不要边框 */
-  noBorder?: boolean,
-  /** 不要边距 */
-  noSpacing?: boolean
-}>(), {
-  modelValue: '',
-  placeholder: '',
-  /** 是否禁用数值输入框 */
-  disabled: false,
-  /** 数值输入框尺寸 */
-  size: '',
-  /** 设置数值输入框允许的最小值 */
-  min: -Infinity,
-  /** 设置数值输入框允许的最大值 */
-  max: Infinity,
-  /** 数值输入框步长 */
-  step: 1,
-  /** 是否只能输入 step 的倍数 */
-  stepStrictly: true,
-  /** 输入框是否显示千分位 */
-  thousandthPlace: false,
-  /** 是否不要边框 */
-  noBorder: false,
-  /** 不要边距 */
-  noSpacing: false
-})
-
-interface Data {
-  vValue: any,
-  isFocus: boolean,
-  vSize: any,
-  isTableMini: any
-}
-
-const data: Data = reactive<Data>({
-  vValue: null,
-  isFocus: false,
-  vSize: null,
-  isTableMini: false
-})
-
-const emit = defineEmits(['update:modelValue', 'change', 'focus', 'blur'])
-
-const valueFormat = computed(() => {
-  return (data.vValue || '').toLocaleString('en-US', { maximumFractionDigits: 6 })
-})
-
-const max = computed(() => {
-  return props.max >= props.min ? props.max : props.min
-})
-
-watch(() => props.modelValue, () => {
-  init()
-})
-
-watch(() => props.size, () => {
-  syncSize()
-})
-
-const init = () => {
-  if (props.modelValue === '' || props.modelValue === null || props.modelValue === undefined) {
-    data.vValue = undefined
-    return false
-  }
-  if ((props.modelValue as number) > props.max || (props.modelValue as number) < props.min) {
-    emit('update:modelValue', data.vValue)
-    return false
-  }
-  data.vValue = props.modelValue
-}
-
-const syncSize = () => {
-  const map = {
-    large: 'large',
-    small: 'small',
-    mini: 'mini',
-    'table-mini': 'mini'
-  }
-  data.vSize = map[props.size as keyof typeof map]
-  data.isTableMini = props.size === 'table-mini'
-}
-
-const input = () => {
-  if (data.vValue === undefined) {
-    emit('update:modelValue', null)
-    return false
-  }
-  emit('update:modelValue', data.vValue)
-}
-
-const onChange = (value: number) => {
-  if (value === undefined) {
-    emit('update:modelValue', null)
-    return false
-  }
-  input()
-  emit('change', value)
-}
-
-const onFocus = () => {
-  data.isFocus = true
-  emit('focus', data.vValue)
-}
-
-const onBlur = () => {
-  data.isFocus = false
-  emit('blur', data.vValue)
-}
-
-init()
-syncSize()
-</script>
-
-<style lang="scss" scoped>
-.g-m-input-number-box {
-  position: relative;
-  width: 100%;
-
-  .m-input-number {
-    width: 100%;
-  }
-
-  .u-text[data-thousandth-place="true"] {
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin-bottom: 0;
-    padding-left: 15px;
-    padding-right: 15px;
-    width: 100%;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    font-feature-settings: normal;
-    font-stretch: 100%;
-    font-weight: 400;
-    text-indent: 0;
-    color: #606266;
-    text-align: left;
-    letter-spacing: normal;
-    word-spacing: 0;
-    background-color: rgba(0, 0, 0, 0);
-    border-radius: 4px;
-    border: 1px solid rgba(0, 0, 0, 0);
-    box-sizing: border-box;
-    cursor: text;
-    pointer-events: none;
-
-    &:hover {
-      border-color: #C0C4CC;
-    }
-
-    &[data-size="mini"] {
-      font-size: 12px;
-      height: 28px;
-      line-height: 28px;
-    }
-
-    &[data-disabled="true"] {
-      color: rgba(0, 0, 0, 0.25);
-    }
-
-    &[data-focus="true"] {
-      color: rgba(0, 0, 0, 0);
-    }
-  }
-
-  &[data-is-table-mini="true"] .u-text[data-size="mini"] {
-    height: 24px;
-    font-size: 14px;
-    line-height: 24px;
-  }
-
-  &[data-no-spacing] .u-text {
-    padding-left: 0;
-  }
-}
-</style>
-
-<style lang="scss">
-.g-m-input-number-box {
-
-  .m-input-number {
-    .el-input__inner {
-      text-align: left;
-    }
-
-    &[data-thousandth-place="true"] .el-input__inner {
-      color: rgba(0, 0, 0, 0);
-    }
-
-    &[data-focus="true"] .el-input__inner {
-      color: #606266;
-    }
-
-    &[no-border="true"] .el-input__inner {
-      border: 0;
-    }
-  }
-
-  &[data-is-table-mini="true"] .m-input-number .el-input__inner {
-    height: 24px;
-    font-size: 14px;
-    line-height: 24px;
-  }
-
-  &[data-no-spacing="true"] .m-input-number .el-input__inner {
-    padding-left: 0;
-  }
-}
-</style>

package/docs/packages/MSelect/docs/README.md

@@ -1,20 +0,0 @@
-<script setup>
-import demo from './demo.vue'
-</script>
-
-下拉选择器组件
-=================
-
-### 1) 基础用法
-
-<Preview comp-name="MSelect" demo-name="demo">
-  <demo />
-</Preview>
-
-### 2) Attributes
-
-| 参数                            |                            说明                             |   类型    | 可选值 |  默认值  |
-|-------------------------------|:---------------------------------------------------------:|:-------:|:---:|:-----:|
-| value / v-model               |                            绑定值                            | number  |  -  |  ''   |
-| checkbox-mode                 |                      是否为复选框模式（只影响样式）                      | boolean |  -  | false |
-| 其他属性同element-plus的el-select组件 | https://element-plus.gitee.io/zh-CN/component/select.html |    -    |  -  |   -   |

package/docs/packages/MSelect/docs/demo.vue

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

package/docs/packages/MSelect/index.ts

@@ -1,17 +0,0 @@
-import { App, Plugin } from 'vue'
-import MSelect from './src/MSelect.vue'
-import MOption from './src/MOption.vue'
-
-export const MSelectPlugin: Plugin = {
-  install (app: App) {
-    app.component('MSelect', MSelect)
-  }
-}
-
-export const MOptionPlugin: Plugin = {
-  install (app: App) {
-    app.component('MOption', MOption)
-  }
-}
-
-export { MSelect, MOption }