feat(comp: select): maxLabel support responsive (#806)

* feat(comp:overflow): add overflow

* feat(comp: select): maxLabelCount support responsive (#756)

BREAKING CHANGE: `maxLabelCount` was deprecated, please use `maxLabel` instead

packages/cdk/utils/src/props.ts

@@ -217,4 +217,4 @@ export function callEmit<T extends (...args: any[]) => any>(
 
 export type VKey = string | number | symbol
 
-export const vKeyPropDef = IxPropTypes.oneOf([String, Number, Symbol])
+export const vKeyPropDef = IxPropTypes.oneOfType([String, Number, Symbol])

packages/components/_private/overflow/__tests__/__snapshots__/overflow.spec.ts.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Overflow maxLabel responsive work 1`] = `
+"<div class=\\"ix-overflow ix-test-overflow\\">
+  <div class=\\"ix-overflow-item\\">0</div>
+  <div class=\\"ix-overflow-item\\">1</div>
+  <div class=\\"ix-overflow-item\\">2</div>
+  <div class=\\"ix-overflow-item\\">3</div>
+  <div class=\\"ix-overflow-item\\">4</div>
+  <div class=\\"ix-overflow-item\\">5</div>
+  <div class=\\"ix-overflow-item\\">6</div>
+  <div class=\\"ix-overflow-item\\">7</div>
+  <div class=\\"ix-overflow-item\\">8</div>
+  <div class=\\"ix-overflow-item\\">9</div>
+  <div class=\\"ix-overflow-item\\">10</div>
+  <div class=\\"ix-overflow-item\\">11</div>
+  <div class=\\"ix-overflow-item\\">12</div>
+  <div class=\\"ix-overflow-item\\">13</div>
+  <div class=\\"ix-overflow-item\\">14</div>
+  <div class=\\"ix-overflow-item\\">15</div>
+  <div class=\\"ix-overflow-item\\">16</div>
+  <div class=\\"ix-overflow-item\\">17</div>
+  <div class=\\"ix-overflow-item\\">18</div>
+  <div class=\\"ix-overflow-item\\">19</div>
+  <!---->
+  <!---->
+</div>"
+`;
+
+exports[`Overflow maxLabel responsive work 2`] = `
+"<div class=\\"ix-overflow ix-test-overflow\\">
+  <div class=\\"ix-overflow-item\\">0</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">1</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">2</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">3</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">4</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">5</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">6</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">7</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">8</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">9</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">10</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">11</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">12</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">13</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">14</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">15</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">16</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">17</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">18</div>
+  <div class=\\"ix-overflow-item\\" style=\\"display: none;\\">19</div>
+  <div class=\\"ix-overflow-item ix-overflow-rest\\" style=\\"\\">+ 19 ...</div>
+  <!---->
+</div>"
+`;
+
+exports[`Overflow render work 1`] = `
+"<div class=\\"ix-overflow undefined-overflow\\">
+  <!---->
+  <!---->
+</div>"
+`;
+
+exports[`Overflow render work 2`] = `
+"<div class=\\"ix-overflow undefined-overflow\\">
+  <div class=\\"ix-overflow-item ix-overflow-rest\\" style=\\"display: none;\\">+ 0 ...</div>
+  <!---->
+</div>"
+`;

packages/components/_private/overflow/__tests__/overflow.spec.ts

@@ -0,0 +1,95 @@
+import { MountingOptions, mount } from '@vue/test-utils'
+
+import { merge } from 'lodash-es'
+
+import { renderWork } from '@tests'
+
+import Overflow from '../src/Overflow'
+import { OverflowProps } from '../src/types'
+
+interface OverflowData {
+  value: number
+  key: string
+}
+
+describe('Overflow', () => {
+  const overfolwData: OverflowData[] = Array.from(Array(20)).map((_, idx) => ({ value: idx, key: `${idx}-key` }))
+  const totalLen = overfolwData.length
+
+  const OverflowMount = (options?: MountingOptions<Partial<OverflowProps>>) => {
+    return mount(Overflow, {
+      ...(merge(
+        {
+          props: {
+            getKey: (item: OverflowData) => item.key,
+            prefixCls: 'ix-test',
+            dataSource: overfolwData,
+          },
+          slots: { item: `<template #item="item">{{ item.value }}</template>` },
+        },
+        options,
+      ) as MountingOptions<OverflowProps>),
+    })
+  }
+
+  renderWork<OverflowProps>(Overflow, {
+    props: { maxLabel: 4 },
+  })
+
+  renderWork<OverflowData>(Overflow, {
+    props: { maxLabel: 'responsive' },
+  })
+
+  test('maxLabel work', async () => {
+    const wrapper = OverflowMount()
+
+    let items = wrapper.findAll('.ix-overflow-item')
+
+    expect(items.length).toBe(totalLen)
+
+    await wrapper.setProps({ maxLabel: 3 })
+
+    // [0, 1, 2, + 17 ...]
+    items = wrapper.findAll('.ix-overflow-item')
+
+    expect(items.length).toBe(4)
+    expect(items[3].text()).toBe('+ 17 ...')
+    expect(items[3].attributes('style')).toEqual(expect.not.stringContaining('display: none'))
+  })
+  test('maxLabel responsive work', async () => {
+    const wrapper = OverflowMount()
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({ maxLabel: 'responsive' })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+  test('item slot work', async () => {
+    const wrapper = OverflowMount({ props: { maxLabel: 2 } })
+
+    const items = wrapper.findAll('.ix-overflow-item')
+
+    expect(items[0].text()).toBe('0')
+    expect(items[1].text()).toBe('1')
+  })
+  test('rest slot work', async () => {
+    const wrapper = OverflowMount({
+      props: { maxLabel: 2 },
+      slots: { rest: `<template #rest="rest">+ {{ rest.length }} more</template>` },
+    })
+
+    const rest = wrapper.find('.ix-overflow-rest')
+
+    expect(rest.text()).toBe('+ 18 more')
+  })
+  test('suffix slot work', async () => {
+    const wrapper = OverflowMount({
+      props: { maxLabel: 2 },
+      slots: { suffix: `x` },
+    })
+
+    const suffix = wrapper.find('.ix-overflow-suffix')
+    expect(suffix.text()).toBe('x')
+  })
+})

packages/components/_private/overflow/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { OverflowComponent } from './src/types'
+
+import Overflow from './src/Overflow'
+
+const ɵOverflow = Overflow as unknown as OverflowComponent
+
+export { ɵOverflow }
+
+export type {
+  OverflowInstance as ɵOverflowInstance,
+  OverflowComponent as ɵOverflowComponent,
+  OverflowPublicProps as ɵOverflowProps,
+} from './src/types'

packages/components/_private/overflow/src/Item.tsx

@@ -0,0 +1,34 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import { callEmit, offResize, onResize } from '@idux/cdk/utils'
+
+import { overflowItemProps } from './types'
+
+export default defineComponent({
+  name: 'IxOverflowItem',
+  props: overflowItemProps,
+  setup(props, { slots }) {
+    const itemElRef = ref<HTMLElement | undefined>()
+    const handleResize = (entry: ResizeObserverEntry) => callEmit(props.onSizeChange, entry.target, props.itemKey ?? '')
+
+    onMounted(() => onResize(itemElRef.value, handleResize))
+    onBeforeUnmount(() => {
+      offResize(itemElRef.value, handleResize)
+    })
+
+    return () => {
+      return (
+        <div v-show={props.display} class={`${props.prefixCls}-item`} ref={itemElRef}>
+          {slots.default?.()}
+        </div>
+      )
+    }
+  },
+})