feat(picker): support columnsCount (#1722)

* feat(Picker): support columnsNum prop for Picker feat(Picker): support columnsNum for Picker feat(Picker): update Picker docs feat(Picker): update test snapshot * feat(Picker): optimize logic based on review comment feat(Picker): add version tip for columnsNum prop feat(Picker): update default value of columnsNum prop feat(Picker): add an example for columnsNun prop * feat(Picker): update docs for columnsNum prop * feat(Picker): update docs * feat(picker): change columnsNum to columnsCount * feat(picker): modify variable name * feat(picker): update default logic * feat(picker): update docs
varletjs · Jul 31, 2024 · 3570f05 · 3570f05
1 parent dfd92a6
commit 3570f05
Show file tree

Hide file tree

Showing 11 changed files with 395 additions and 6 deletions.
diff --git a/packages/varlet-ui/src/picker/Picker.vue b/packages/varlet-ui/src/picker/Picker.vue
@@ -101,7 +101,7 @@ import VarPopup from '../popup'
 import { defineComponent, watch, ref, computed, Transition, type ComponentPublicInstance } from 'vue'
 import { props, type PickerColumnOption } from './props'
 import { useTouch, useVModel } from '@varlet/use'
-import { clamp, clampArrayRange, call } from '@varlet/shared'
+import { clamp, clampArrayRange, call, toNumber } from '@varlet/shared'
 import { toPxNum, getTranslateY } from '../utils/elements'
 import { t } from '../locale'
 import { createNamespace } from '../utils/components'
@@ -140,6 +140,7 @@ export default defineComponent({
   setup(props) {
     const modelValue = useVModel(props, 'modelValue')
     const scrollColumns = ref<ScrollColumn[]>([])
+    const visibleColumnsCount = computed(() => toNumber(props.columnsCount))
     const optionHeight = computed(() => toPxNum(props.optionHeight))
     const optionCount = computed(() => toPxNum(props.optionCount))
     const center = computed(() => (optionCount.value * optionHeight.value) / 2 - optionHeight.value / 2)
@@ -174,7 +175,8 @@ export default defineComponent({
     }
 
     function normalizeNormalMode(columns: PickerColumnOption[][]) {
-      return columns.map((column, idx) => {
+      const visibleColumns = props.columnsCount != null ? columns.slice(0, visibleColumnsCount.value) : columns
+      return visibleColumns.map((column, idx) => {
         const scrollColumn: ScrollColumn = {
           id: sid++,
           prevY: 0,
@@ -204,8 +206,13 @@ export default defineComponent({
       return scrollColumns
     }
 
-    function createChildren(scrollColumns: ScrollColumn[], children: PickerColumnOption[], syncModelValue = true) {
-      if (children.length) {
+    function createChildren(
+      scrollColumns: ScrollColumn[],
+      children: PickerColumnOption[],
+      syncModelValue = true,
+      depth = 1
+    ) {
+      if (children.length && (props.columnsCount == null || depth <= visibleColumnsCount.value)) {
         const scrollColumn: ScrollColumn = {
           id: sid++,
           prevY: 0,
@@ -232,7 +239,8 @@ export default defineComponent({
         createChildren(
           scrollColumns,
           scrollColumn.column[scrollColumn.index][getOptionKey('children')] ?? [],
-          syncModelValue
+          syncModelValue,
+          depth + 1
         )
       }
     }
@@ -242,7 +250,8 @@ export default defineComponent({
       createChildren(
         scrollColumns.value,
         scrollColumn.column[scrollColumn.index][getOptionKey('children')] ?? [],
-        false
+        false,
+        scrollColumns.value.length + 1
       )
     }
 

diff --git a/packages/varlet-ui/src/picker/__tests__/__snapshots__/component.spec.js.snap b/packages/varlet-ui/src/picker/__tests__/__snapshots__/component.spec.js.snap
@@ -1,5 +1,47 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`test cascade column picker columnsCount 1`] = `
+"<transition-stub appear="false" persisted="false" css="true" var-picker-cover="">
+  <div class="var-picker">
+    <div class="var-picker__toolbar"><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-default var-picker__cancel-button" type="button" var-picker-cover="">
+        <!--v-if-->
+        <div class="var-button__content">取消</div>
+        <div class="var-hover-overlay"></div>
+      </button>
+      <div class="var-picker__title">请选择</div><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-default var-picker__confirm-button" type="button" var-picker-cover="">
+        <!--v-if-->
+        <div class="var-button__content">确认</div>
+        <div class="var-hover-overlay"></div>
+      </button>
+    </div>
+    <div class="var-picker__columns" style="height: 264px;">
+      <div class="var-picker__column">
+        <div class="var-picker__scroller" style="transform: translateY(110px); transition-duration: 0ms; transition-property: none;">
+          <div class="var-picker__option" style="height: 44px;">
+            <div class="var-picker__text">四川省</div>
+          </div>
+          <div class="var-picker__option" style="height: 44px;">
+            <div class="var-picker__text">江苏省</div>
+          </div>
+        </div>
+      </div>
+      <div class="var-picker__column">
+        <div class="var-picker__scroller" style="transform: translateY(110px); transition-duration: 0ms; transition-property: none;">
+          <div class="var-picker__option" style="height: 44px;">
+            <div class="var-picker__text">成都市</div>
+          </div>
+          <div class="var-picker__option" style="height: 44px;">
+            <div class="var-picker__text">攀枝花市</div>
+          </div>
+        </div>
+      </div>
+      <div class="var-picker__picked" style="top: 110px; height: 44px;"></div>
+      <div class="var-picker__mask" style="background-size: 100% 110px;"></div>
+    </div>
+  </div>
+</transition-stub>"
+`;
+
 exports[`test cascade mode 1`] = `
 "<transition-stub appear="false" persisted="false" css="true" var-picker-cover="">
   <div class="var-picker">
@@ -152,6 +194,54 @@ exports[`test custom key 2`] = `
 </transition-stub>"
 `;
 
+exports[`test multiple column picker columnsCount 1`] = `
+"<transition-stub appear="false" persisted="false" css="true" var-picker-cover="">
+  <div class="var-picker">
+    <div class="var-picker__toolbar"><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-default var-picker__cancel-button" type="button" var-picker-cover="">
+        <!--v-if-->
+        <div class="var-button__content">取消</div>
+        <div class="var-hover-overlay"></div>
+      </button>
+      <div class="var-picker__title">请选择</div><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-default var-picker__confirm-button" type="button" var-picker-cover="">
+        <!--v-if-->
+        <div class="var-button__content">确认</div>
+        <div class="var-hover-overlay"></div>
+      </button>
+    </div>
+    <div class="var-picker__columns" style="height: 264px;">
+      <div class="var-picker__column">
+        <div class="var-picker__scroller" style="transform: translateY(110px); transition-duration: 0ms; transition-property: none;">
+          <div class="var-picker__option" style="height: 44px;">
+            <div class="var-picker__text">A</div>
+          </div>
+          <div class="var-picker__option" style="height: 44px;">
+            <div class="var-picker__text">B</div>
+          </div>
+          <div class="var-picker__option" style="height: 44px;">
+            <div class="var-picker__text">C</div>
+          </div>
+        </div>
+      </div>
+      <div class="var-picker__column">
+        <div class="var-picker__scroller" style="transform: translateY(110px); transition-duration: 0ms; transition-property: none;">
+          <div class="var-picker__option" style="height: 44px;">
+            <div class="var-picker__text">A</div>
+          </div>
+          <div class="var-picker__option" style="height: 44px;">
+            <div class="var-picker__text">B</div>
+          </div>
+          <div class="var-picker__option" style="height: 44px;">
+            <div class="var-picker__text">C</div>
+          </div>
+        </div>
+      </div>
+      <div class="var-picker__picked" style="top: 110px; height: 44px;"></div>
+      <div class="var-picker__mask" style="background-size: 100% 110px;"></div>
+    </div>
+  </div>
+</transition-stub>"
+`;
+
 exports[`test scroll down & onCancel 1`] = `
 "<transition-stub appear="false" persisted="false" css="true" var-picker-cover="">
   <div class="var-picker">

diff --git a/packages/varlet-ui/src/picker/__tests__/component.spec.js b/packages/varlet-ui/src/picker/__tests__/component.spec.js
@@ -234,6 +234,143 @@ test('test custom key', async () => {
   wrapper.unmount()
 })
 
+test('test multiple column picker columnsCount', async () => {
+  const onConfirm = vi.fn()
+  const wrapper = mount(VarPicker, {
+    props: {
+      columns: [
+        [
+          { text: 'A', value: '1-1' },
+          { text: 'B', value: '1-2' },
+          { text: 'C', value: '1-3' },
+        ],
+        [
+          { text: 'A', value: '2-1' },
+          { text: 'B', value: '2-2' },
+          { text: 'C', value: '2-3' },
+        ],
+        [
+          { text: 'A', value: '3-1' },
+          { text: 'B', value: '3-2' },
+          { text: 'C', value: '3-3' },
+        ],
+      ],
+      columnsCount: 2,
+      onConfirm,
+    },
+  })
+  const columns = wrapper.findAll('.var-picker__column')
+  expect(wrapper.html()).toMatchSnapshot()
+  expect(columns.length).toBe(2)
+
+  await triggerDrag(columns[1].element, 0, -44)
+  await wrapper.find('.var-picker__confirm-button').trigger('click')
+  expect(onConfirm).lastCalledWith(
+    ['1-1', '2-2'],
+    [0, 1],
+    [
+      {
+        text: 'A',
+        value: '1-1',
+      },
+      {
+        text: 'B',
+        value: '2-2',
+      },
+    ]
+  )
+  wrapper.unmount()
+})
+
+test('test cascade column picker columnsCount', async () => {
+  const onConfirm = vi.fn()
+  const wrapper = mount(VarPicker, {
+    props: {
+      columns: [
+        {
+          text: '四川省',
+          children: [
+            {
+              text: '成都市',
+              children: [
+                {
+                  text: '温江区',
+                },
+              ],
+            },
+            {
+              text: '攀枝花市',
+              children: [
+                {
+                  text: '东区',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          text: '江苏省',
+          children: [
+            {
+              text: '无锡市',
+              children: [
+                {
+                  text: '新吴区',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      cascade: true,
+      columnsCount: 2,
+      onConfirm,
+    },
+  })
+  const columns = wrapper.findAll('.var-picker__column')
+  expect(wrapper.html()).toMatchSnapshot()
+  expect(columns.length).toBe(2)
+
+  await triggerDrag(columns[1].element, 0, -44)
+  await wrapper.find('.var-picker__confirm-button').trigger('click')
+  expect(onConfirm).lastCalledWith(
+    ['四川省', '攀枝花市'],
+    [0, 1],
+    [
+      {
+        text: '四川省',
+        children: [
+          {
+            text: '成都市',
+            children: [
+              {
+                text: '温江区',
+              },
+            ],
+          },
+          {
+            text: '攀枝花市',
+            children: [
+              {
+                text: '东区',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        text: '攀枝花市',
+        children: [
+          {
+            text: '东区',
+          },
+        ],
+      },
+    ]
+  )
+  wrapper.unmount()
+})
+
 test('test column option className', async () => {
   const wrapper = mount(VarPicker, {
     props: {