br-dionysus 0.7.21 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "br-dionysus",
-  "version": "0.7.21",
+  "version": "0.8.0",
   "scripts": {
     "dev": "vite --config ./build/base.config.ts",
     "build:doc": "vue-tsc --noEmit && vite build --config ./build/doc.config.ts && node script/copyDir.js",

package/packages/Hook/useRemainingSpace/useRemainingSpace.ts

@@ -116,7 +116,7 @@ const useRemainingSpace = (boxClassName: string, className: string = '', redunda
   }
 
   // 节流
-  const throttle = (func: Function, limit: number = 1000) => {
+  const throttle = (func: Function, limit: number = 100) => {
     let inThrottle: boolean = false
     return (...args: any) => {
       if (!inThrottle) {

package/packages/MInline/index.ts

@@ -1,5 +1,5 @@
 import { App, Plugin } from 'vue'
-import MInline from './src/index.vue'
+import MInline from './src/Minline.vue'
 
 export const MInlinePlugin: Plugin = {
   install(app: App) {

package/packages/MInputNumber/index.ts

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

package/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                 |                       设置数值输入框允许的最小值                       | number |  -  | -Infinity |
+| 其他属性同element-plus的el-select组件 | https://element-plus.gitee.io/zh-CN/component/select.html |   -    |  -  |     -     |

package/packages/MSelect/docs/demo.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="g-demo-m-select-box">
+    <m-select
+      v-model="test"
+      checkbox-mode
+      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/packages/MSelect/index.ts

@@ -0,0 +1,12 @@
+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('m-select', MSelect)
+    app.component('m-option', MOption)
+  }
+}
+
+export { MSelect, MOption }

package/packages/MSelect/src/MOption.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-option v-bind="attrs">
+    <div
+      class="u-group"
+      v-if="selectData?.checkboxMode"
+    >
+      <el-checkbox
+        class="u-checkbox"
+        v-model="checkboxValue"
+      />
+      <slot>
+        <span>{{ attrs.label }}</span>
+      </slot>
+    </div>
+  </el-option>
+</template>
+
+<script setup lang="ts">
+import { inject, useAttrs, computed } from 'vue'
+import { selectKey } from 'packages/MSelect/src/token'
+
+const attrs = useAttrs()
+
+const selectData = inject(selectKey)
+const checkboxValue = computed(() => {
+  if (selectData?.multiple && Array.isArray(selectData?.modelValue?.value)) return selectData?.modelValue?.value?.includes(attrs.value as string | number)
+  return selectData?.modelValue.value === attrs.value
+})
+</script>
+
+<style scoped lang="scss">
+.u-group {
+  display: flex;
+  align-items: center;
+
+  .u-checkbox {
+    padding-right: 4px;
+    pointer-events: none;
+  }
+}
+</style>

package/packages/MSelect/src/MSelect.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-select
+    v-bind="attrs"
+    :multiple="props.multiple"
+  >
+    <!--<template #header>-->
+    <!--  <el-checkbox-->
+    <!--    v-model="checkAll"-->
+    <!--    :indeterminate="indeterminate"-->
+    <!--    @change="handleCheckAll"-->
+    <!--  >-->
+    <!--    全选-->
+    <!--  </el-checkbox>-->
+    <!--</template>-->
+    <slot></slot>
+    <template v-for="(slot, name) in $slots" v-slot:[name]="slotData">
+      <slot :name="name" v-bind="slotData"></slot>
+    </template>
+  </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<{
+  /** 是否为checkbox模式 */
+  checkboxMode?: boolean,
+  /** 多选 */
+  multiple?: boolean
+  // /** 是否显示全选 */
+  // showAll?: boolean
+}>(), {
+  checkboxMode: false,
+  multiple: false
+  // showAll: false
+})
+
+const attrs = useAttrs()
+
+const modelValue = ref<string | number>(attrs.modelValue as string | number)
+watch(
+  () => attrs.modelValue,
+  () => {
+    modelValue.value = attrs.modelValue as string | number
+  }
+)
+
+// const emit = defineEmits<{
+//   'update:modelValue': [data: any]
+// }>()
+
+// const checkAll = ref(false)
+// const indeterminate = ref(false)
+// const handleCheckAll = (val: boolean) => {
+//   indeterminate.value = false
+//   if (val) {
+//     emit('update:modelValue', [])
+//   } else {
+//     emit('update:modelValue', [])
+//   }
+// }
+
+provide(selectKey, {
+  checkboxMode: props.checkboxMode,
+  modelValue,
+  multiple: props.multiple as boolean
+})
+</script>
+
+<style lang="scss" scoped>
+</style>
+
+<style lang="scss">
+</style>

package/packages/MSelect/src/token.ts

@@ -0,0 +1,8 @@
+import { InjectionKey } from 'vue'
+import type { Ref } from 'vue'
+
+export const selectKey: InjectionKey<{
+  checkboxMode: boolean,
+  modelValue: Ref<string | number | Array<string | number>>,
+  multiple: boolean
+}> = Symbol('selectKey')

package/packages/MSelectTable/index.ts

@@ -1,5 +1,5 @@
 import { App, Plugin } from 'vue'
-import MSelectTable from './src/index.vue'
+import MSelectTable from './src/MSelectTable.vue'
 
 export const MSelectTablePlugin: Plugin = {
   install(app: App) {

package/packages/MTable/index.ts

@@ -1,5 +1,5 @@
 import { App, Plugin } from 'vue'
-import MTable from './src/index.vue'
+import MTable from './src/MTable.vue'
 
 export const MTablePlugin: Plugin = {
   install(app: App) {

package/packages/MTableColumn/index.ts

@@ -1,5 +1,5 @@
 import { App, Plugin } from 'vue'
-import MTableColumn from './src/index.vue'
+import MTableColumn from './src/MTableColumn.vue'
 
 export const MTableColumnPlugin: Plugin = {
   install(app: App) {

package/packages/MTableColumnSet/index.ts

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

package/packages/SkinConfig/index.ts

@@ -1,5 +1,5 @@
 import { App, Plugin } from 'vue'
-import SkinConfig from './src/index.vue'
+import SkinConfig from './src/SkinConfig.vue'
 
 export const SkinConfigPlugin: Plugin = {
   install(app: App) {

package/packages/TabPage/index.ts

@@ -1,5 +1,5 @@
 import { App, Plugin } from 'vue';
-import TabPage from './src/index.vue';
+import TabPage from './src/TabPage.vue';
 
 export const TabPagePlugin: Plugin = {
   install(app: App) {

package/packages/index.ts

@@ -1,5 +1,3 @@
-/* eslint-disable */
-
 import { App, Plugin } from 'vue'
 
 import { ButtonPlugin } from './Button'
@@ -12,6 +10,7 @@ import { MSelectTablePlugin } from 'packages/MSelectTable'
 import { MTablePlugin } from 'packages/MTable'
 import { MTableColumnPlugin } from 'packages/MTableColumn'
 import { MTableColumnSetPlugin } from 'packages/MTableColumnSet'
+import { MSelectPlugin } from 'packages/MSelect'
 import hook from 'packages/Hook'
 import useTableConfig from 'packages/Hook/useTableConfig/useTableConfig'
 import useRemainingSpace from 'packages/Hook/useRemainingSpace/useRemainingSpace'
@@ -28,6 +27,7 @@ const BrPlugin: Plugin = {
     MTablePlugin.install?.(app)
     MTableColumnPlugin.install?.(app)
     MTableColumnSetPlugin.install?.(app)
+    MSelectPlugin.install?.(app)
   }
 }
 
@@ -43,6 +43,7 @@ export * from './MSelectTable'
 export * from './MTable'
 export * from './MTableColumn'
 export * from './MTableColumnSet'
+export * from './MSelect'
 
 export { hook }
 export { useTableConfig }

package/packages/list.json

@@ -58,5 +58,11 @@
     "compZhName": "表格头设置组件",
     "compDesc": "这是一个表格头设置组件",
     "compClassName": "m-table-column-set"
+  },
+  {
+    "compName": "MSelect",
+    "compZhName": "下拉选择器组件",
+    "compDesc": "这是一个下拉选择器组件",
+    "compClassName": "m-select"
   }
 ]

package/src/router.ts

@@ -46,11 +46,16 @@ const routes = [{
   name: 'MTableColumn',
   path: '/components/MTableColumn',
   component: () => import('packages/MTableColumn/docs/README.md')
-},{
+}, {
   title: '表格头设置组件',
   name: 'MTableColumnSet',
   path: '/components/MTableColumnSet',
   component: () => import('packages/MTableColumnSet/docs/README.md')
+}, {
+  title: '下拉选择器组件',
+  name: 'MSelect',
+  path: '/components/MSelect',
+  component: () => import('packages/MSelect/docs/README.md')
 }]
 
 const routerConfig = {

package/dist/packages/MSelectTable/src/{index.vue.d.ts → MSelectTable.vue.d.ts}

@@ -70,8 +70,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     clearable: boolean;
     placeholder: string;
     disabled: boolean;
-    total: number | null;
     options: Option[];
+    total: number | null;
     remoteMethod: Function;
     tableTitle: any[];
     focusShow: boolean;