feat: wip

varletjs · Dec 26, 2024 · 13798df · 13798df
1 parent dadc1c5
commit 13798df
Show file tree

Hide file tree

Showing 16 changed files with 312 additions and 41 deletions.
diff --git a/packages/varlet-ui/src/menu-option/MenuOption.vue b/packages/varlet-ui/src/menu-option/MenuOption.vue
@@ -78,6 +78,8 @@ export default defineComponent({
     const selected = computed(() => optionSelected.value)
     const indeterminate = computed(() => optionIndeterminate.value)
     const value = computed<any>(() => props.value)
+    const disabled = computed(() => props.disabled)
+    const ripple = computed(() => props.ripple)
     const { menuSelect, bindMenuSelect } = useMenuSelect()
     const { size, multiple, onSelect, computeLabel } = menuSelect
     const { hovering, handleHovering } = useHoverOverlay()
@@ -100,6 +102,8 @@ export default defineComponent({
       label: labelVNode,
       value,
       selected,
+      disabled,
+      ripple,
       indeterminate,
       sync,
     }

diff --git a/packages/varlet-ui/src/menu-select/MenuSelect.vue b/packages/varlet-ui/src/menu-select/MenuSelect.vue
@@ -90,7 +90,7 @@ export default defineComponent({
 
     const { menuOptions, length, bindMenuOptions } = useMenuOptions()
 
-    const { computeLabel, getSelectedValue } = useSelectController({
+    const { computeLabel, getSelectedValue, getOptionProviderKey } = useSelectController({
       modelValue: () => props.modelValue,
       multiple: () => props.multiple,
       optionProviders: () => menuOptions,
@@ -172,7 +172,7 @@ export default defineComponent({
     function enhance(options: MenuSelectOption[]) {
       function baseEnhance(options: MenuSelectOption[], parent?: MenuSelectOption) {
         return options.map((option) => {
-          option = { ...option }
+          option = { ...option, _rawOption: option }
 
           if (parent) {
             option._parent = parent
@@ -195,7 +195,7 @@ export default defineComponent({
 
     function onSelect(optionProvider: MenuOptionProvider) {
       const { multiple, closeOnSelect } = props
-      const { value, selected } = optionProvider
+      const { value, label, selected, disabled, ripple } = optionProvider
       const enhancedOption = getEnhancedOption(value.value)
 
       if (enhancedOption) {
@@ -225,8 +225,15 @@ export default defineComponent({
       }
 
       const selectedValue = getSelectedValue(optionProvider)
+      const selectedOption: MenuSelectOption = enhancedOption?._rawOption ?? {
+        value: value.value,
+        label: label.value,
+        disabled: disabled.value,
+        ripple: ripple.value,
+      }
+
+      call(props.onSelect, getOptionProviderKey(optionProvider), selectedOption)
       call(props['onUpdate:modelValue'], selectedValue)
-      call(props.onSelect, selectedValue)
 
       if (!multiple && closeOnSelect) {
         menu.value!.$el.focus()

diff --git a/packages/varlet-ui/src/menu-select/docs/en-US.md b/packages/varlet-ui/src/menu-select/docs/en-US.md
@@ -26,6 +26,30 @@ const value = ref()
 </template>
 ```
 
+### Selected Event
+
+```html
+<script setup>
+import { Snackbar } from '@varlet/ui'
+
+function handleSelect(value) {
+  Snackbar(`Select: ${value}`)
+}
+</script>
+
+<template>
+  <var-menu-select @select="handleSelect">
+    <var-button type="primary">Please Select</var-button>
+
+    <template #options>
+      <var-menu-option label="Eat" />
+      <var-menu-option label="Sleep" />
+      <var-menu-option label="Play game" />
+    </template>
+  </var-menu-select>
+</template>
+```
+
 ### Size
 
 ```html
@@ -246,6 +270,110 @@ const options = ref([
 </template>
 ```
 
+### Cascade
+
+An array of options may be passed to the `children` attribute of options to achieve a cascading effect.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const value = ref()
+const options = ref([
+  {
+    label: '1',
+    value: 1,
+  },
+  {
+    label: '2',
+    value: 2,
+    children: [
+      {
+        label: '2-1',
+        value: 21,
+        children: [
+          {
+            label: '2-1-1',
+            value: 211,
+          },
+          {
+            label: '2-1-2',
+            value: 212,
+          },
+        ],
+      },
+      {
+        label: '2-2',
+        value: 22,
+      },
+    ],
+  },
+  {
+    label: '3',
+    value: 3,
+  },
+])
+</script>
+
+<template>
+  <var-menu-select v-model="value" :options="options">
+    <var-button type="primary">{{ value ? value : 'Please Select' }}</var-button>
+  </var-menu-select>
+</template>
+```
+
+### Multiple Cascade
+
+Cascading multiple selections can be achieved by setting the `multiple` attribute on the basis of cascading single selections.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const value = ref()
+const options = ref([
+  {
+    label: '1',
+    value: 1,
+  },
+  {
+    label: '2',
+    value: 2,
+    children: [
+      {
+        label: '2-1',
+        value: 21,
+        children: [
+          {
+            label: '2-1-1',
+            value: 211,
+          },
+          {
+            label: '2-1-2',
+            value: 212,
+          },
+        ],
+      },
+      {
+        label: '2-2',
+        value: 22,
+      },
+    ],
+  },
+  {
+    label: '3',
+    value: 3,
+  },
+])
+</script>
+
+<template>
+  <var-menu-select multiple v-model="value" :options="options">
+    <var-button type="primary">{{ value ? value : 'Please Select' }}</var-button>
+  </var-menu-select>
+</template>
+```
+
 ### Options API With Customized Key
 
 You can pass the options as an array of objects to the `options` property. Use the `label-key` and `value-key` properties to specify the fields for the label and value within the options array.
@@ -308,13 +436,15 @@ const options = ref([
 | `options` ***3.3.7*** | Specifies options | _MenuSelectOption[]_ | `[]` |
 | `label-key` ***3.3.7*** | As the key that uniquely identifies label | _string_ | `label` |
 | `value-key` ***3.3.7*** | As the key that uniquely identifies value | _string_ | `value` |
+| `children-key` ***3.8.0*** |  As the key that uniquely identifies children | _string_ | `children` |
 
 #### MenuSelectOption
 
 | Prop | Description | Type | Default |
 | ------- | --- |----------------|-----------|
 | `label`    |   The text of option    | _string \| VNode \| (option: MenuSelectOption, selected: boolean) => VNodeChild_      | `-`   |
 | `value`  |    The value of option    | _any_      | `-`   |
+| `children` ***3.8.0***  |    The children options of option | _MenuSelectOption[]_      | `-`   |
 | `disabled`    |    Whether to disable option   | _boolean_      | `-`   |
 | `ripple`  | Whether to enable ripple | _boolean_ | `true` |
 
@@ -374,6 +504,7 @@ const options = ref([
 | `close` | Triggered when the menu is closed | `-` |
 | `closed` | Triggered when the closing menu animation ends | `-` |
 | `click-outside` | Triggered when clicking outside the menu | `event: Event` |
+| `select` ***3.8.0*** | Triggered when selecting a option | `value: any, option: MenuSelectOption` |
 
 ### Slots
 

diff --git a/packages/varlet-ui/src/menu-select/docs/zh-CN.md b/packages/varlet-ui/src/menu-select/docs/zh-CN.md
@@ -26,6 +26,30 @@ const value = ref()
 </template>
 ```
 
+### 选中事件
+
+```html
+<script setup>
+import { Snackbar } from '@varlet/ui'
+
+function handleSelect(value) {
+  Snackbar(`Select: ${value}`)
+}
+</script>
+
+<template>
+  <var-menu-select @select="handleSelect">
+    <var-button type="primary">请选择</var-button>
+
+    <template #options>
+      <var-menu-option label="吃饭" />
+      <var-menu-option label="睡觉" />
+      <var-menu-option label="打游戏" />
+    </template>
+  </var-menu-select>
+</template>
+```
+
 ### 尺寸
 
 ```html
@@ -246,6 +270,110 @@ const options = ref([
 </template>
 ```
 
+### 级联单选
+
+可以将选项数组传递给选项的 `children` 属性以实现级联效果。
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const value = ref()
+const options = ref([
+  {
+    label: '1',
+    value: 1,
+  },
+  {
+    label: '2',
+    value: 2,
+    children: [
+      {
+        label: '2-1',
+        value: 21,
+        children: [
+          {
+            label: '2-1-1',
+            value: 211,
+          },
+          {
+            label: '2-1-2',
+            value: 212,
+          },
+        ],
+      },
+      {
+        label: '2-2',
+        value: 22,
+      },
+    ],
+  },
+  {
+    label: '3',
+    value: 3,
+  },
+])
+</script>
+
+<template>
+  <var-menu-select v-model="value" :options="options">
+    <var-button type="primary">{{ value ? value : '请选择' }}</var-button>
+  </var-menu-select>
+</template>
+```
+
+### 级联多选
+
+在级联单选的基础上设置 `multiple` 属性即可实现级联多选。
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const value = ref()
+const options = ref([
+  {
+    label: '1',
+    value: 1,
+  },
+  {
+    label: '2',
+    value: 2,
+    children: [
+      {
+        label: '2-1',
+        value: 21,
+        children: [
+          {
+            label: '2-1-1',
+            value: 211,
+          },
+          {
+            label: '2-1-2',
+            value: 212,
+          },
+        ],
+      },
+      {
+        label: '2-2',
+        value: 22,
+      },
+    ],
+  },
+  {
+    label: '3',
+    value: 3,
+  },
+])
+</script>
+
+<template>
+  <var-menu-select multiple v-model="value" :options="options">
+    <var-button type="primary">{{ value ? value : '请选择' }}</var-button>
+  </var-menu-select>
+</template>
+```
+
 ### 选项式 API（自定义字段）
 
 可以将选项以数组形式传给 `options` 属性，同时通过 `label-key` 和 `value-key` 属性指定选项数组内文本和值的字段。
@@ -308,13 +436,15 @@ const options = ref([
 | `options` ***3.3.7*** | 指定可选项 | _MenuSelectOption[]_ | `[]` |
 | `label-key` ***3.3.7*** | 作为 label 唯一标识的键名 | _string_ | `label` |
 | `value-key` ***3.3.7*** | 作为 value 唯一标识的键名 | _string_ | `value` |
+| `children-key` ***3.8.0*** | 作为 children 唯一标识的键名 | _string_ | `children` |
 
 #### MenuSelectOption
 
 | 参数 | 说明 | 类型             | 默认值       |
 | ------- | --- |----------------|-----------|
 | `label`    |    选项的标签    | _string \| VNode \| (option: MenuSelectOption, selected: boolean) => VNodeChild_      | `-`   |
 | `value`  |    选项的值    | _any_      | `-`   |
+| `children` ***3.8.0***  |    选项的子选项    | _MenuSelectOption[]_      | `-`   |
 | `disabled`    |    是否禁用   | _boolean_      | `-`   |
 | `ripple` | 是否启用水波效果 | _boolean_ | `true` |
 
@@ -374,6 +504,7 @@ const options = ref([
 | `close` | 关闭菜单时触发 | `-` |
 | `closed` | 关闭菜单动画结束时触发 | `-` |
 | `click-outside` | 点击菜单外部时触发 | `event: Event` |
+| `select` ***3.8.0*** | 选择某个选项时触发 | `value: any, option: MenuSelectOption` |
 
 ### 插槽