br-dionysus 1.6.6 → 1.6.7

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

@@ -0,0 +1,284 @@
+<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

@@ -0,0 +1,35 @@
+<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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,268 @@
+<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

@@ -0,0 +1,20 @@
+<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

@@ -0,0 +1,36 @@
+<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

@@ -0,0 +1,17 @@
+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 }