feat(comp:select): add selelct component

packages/cdk/overlay/src/types.ts

@@ -116,15 +116,15 @@ export interface OverlayInstance<
    * Manually bind to the event on the trigger.
    */
   triggerEvents: ComputedRef<OverlayTriggerEvents>
-  /**
-   * Manually bind to events on the overlay.
-   */
-  overlayEvents: OverlayPopperEvents
   /**
    * The truth DOM node of the overlay.
    * The caller needs to bind the variable to the view.
    */
   overlayRef: Ref<OE | null>
+  /**
+   * Manually bind to events on the overlay.
+   */
+  overlayEvents: OverlayPopperEvents
   /**
    * The truth DOM node of the arrow.
    * If showArrow is false, we won't return arrowRef.

packages/components/components.less

@@ -14,6 +14,7 @@
 @import './input/style/index.less';
 @import './radio/style/index.less';
 @import './rate/style/index.less';
+@import './select/style/index.less';
 @import './switch/style/index.less';
 // import Data Display
 @import './badge/style/index.less';

packages/components/config/src/defaultConfig.ts

@@ -19,6 +19,7 @@ import type {
   GlobalConfig,
   TooltipConfig,
   PopoverConfig,
+  SelectConfig,
   RadioGroupConfig,
 } from './types'
 
@@ -71,6 +72,15 @@ const radioGroup: RadioGroupConfig = shallowReactive({
   mode: 'border',
 })
 
+const select = shallowReactive<SelectConfig>({
+  borderless: false,
+  clearable: false,
+  labelKey: 'label',
+  searchable: false,
+  size: 'medium',
+  valueKey: 'value',
+})
+
 // --------------------- Data Display ---------------------
 const badge = shallowReactive<BadgeConfig>({ showZero: false, dot: false, overflowCount: 99 })
 
@@ -154,6 +164,7 @@ export const defaultConfig: GlobalConfig = {
   textarea,
   rate,
   radioGroup,
+  select,
   // Data Display
   badge,
   card,

packages/components/config/src/types.ts

@@ -71,6 +71,17 @@ export interface RateConfig {
   allowClear: boolean
 }
 
+export type SelectSize = FormSize
+export interface SelectConfig {
+  borderless: boolean
+  clearable: boolean
+  labelKey: string
+  searchable: boolean
+  size: SelectSize
+  suffix?: string
+  valueKey: string
+}
+
 // Data Display
 export interface BadgeConfig {
   showZero: boolean
@@ -175,6 +186,7 @@ export interface GlobalConfig {
   textarea: TextareaConfig
   radioGroup: RadioGroupConfig
   rate: RateConfig
+  select: SelectConfig
   // Data Display
   badge: BadgeConfig
   card: CardConfig

packages/components/index.ts

@@ -18,6 +18,7 @@ import { IxCheckbox, IxCheckboxGroup } from './checkbox'
 import { IxInput, IxTextarea } from './input'
 import { IxRadio, IxRadioButton, IxRadioGroup } from './radio'
 import { IxRate } from './rate'
+import { IxSelect, IxOption, IxOptionGroup } from './select'
 import { IxSwitch } from './switch'
 // import Data Display
 import { IxBadge } from './badge'
@@ -58,6 +59,9 @@ const components = [
   IxRadioButton,
   IxRadioGroup,
   IxRate,
+  IxSelect,
+  IxOption,
+  IxOptionGroup,
   IxSwitch,
   // components Data Display
   IxBadge,

packages/components/select/__tests__/__snapshots__/option.spec.ts.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Option.vue render work 1`] = `"<div class=\\"ix-option\\"><!--v-if--><span class=\\"ix-option-label\\">Tom</span></div>"`;
+
+exports[`OptionGroup.vue render work 1`] = `"<div class=\\"ix-option-group\\" style=\\"display: none;\\"><span class=\\"ix-option-group-label\\">TomGroup</span></div>"`;

packages/components/select/__tests__/__snapshots__/select.spec.ts.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select.vue multiple template work render work 1`] = `"<div class=\\"ix-select ix-select-multiple ix-select-searchable ix-select-medium\\"><div class=\\"ix-select-selector\\"><div class=\\"ix-select-input\\"><input class=\\"ix-select-input-inner\\" autocomplete=\\"off\\"><span class=\\"ix-select-input-mirror\\" aria-hidden=\\"true\\"></span></div><div class=\\"ix-select-placeholder\\"></div></div><!--v-if--><!--v-if--><!--teleport start--><!--teleport end--></div>"`;
+
+exports[`Select.vue render options work group options work 1`] = `"<div class=\\"ix-select ix-select-single ix-select-show-suffix ix-select-medium\\"><div class=\\"ix-select-selector\\"><div class=\\"ix-select-item\\"><span class=\\"ix-select-item-label\\">Tom0</span><!--v-if--></div><div class=\\"ix-select-input\\"><input class=\\"ix-select-input-inner\\" autocomplete=\\"off\\" style=\\"opacity: 0;\\"><!--v-if--></div><!--v-if--></div><div class=\\"ix-select-suffix\\"><i class=\\"ix-icon ix-icon-down\\" role=\\"img\\" arialabel=\\"down\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"64 64 896 896\\" width=\\"1em\\" height=\\"1em\\" focusable=\\"false\\" fill=\\"currentColor\\" aria-hidden=\\"true\\" data-icon=\\"down\\"><path d=\\"M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z\\"></path></svg></i></div><!--v-if--><!--teleport start--><!--teleport end--></div>"`;
+
+exports[`Select.vue render options work render work 1`] = `"<div class=\\"ix-select ix-select-single ix-select-show-suffix ix-select-medium\\"><div class=\\"ix-select-selector\\"><div class=\\"ix-select-input\\"><input class=\\"ix-select-input-inner\\" autocomplete=\\"off\\" style=\\"opacity: 0;\\"><!--v-if--></div><div class=\\"ix-select-placeholder\\"></div></div><div class=\\"ix-select-suffix\\"><i class=\\"ix-icon ix-icon-down\\" role=\\"img\\" arialabel=\\"down\\"></i></div><!--v-if--><!--teleport start--><!--teleport end--></div>"`;
+
+exports[`Select.vue single template work group options work 1`] = `"<div class=\\"ix-select ix-select-single ix-select-show-suffix ix-select-medium\\"><div class=\\"ix-select-selector\\"><div class=\\"ix-select-item\\"><span class=\\"ix-select-item-label\\">Tom0</span><!--v-if--></div><div class=\\"ix-select-input\\"><input class=\\"ix-select-input-inner\\" autocomplete=\\"off\\" style=\\"opacity: 0;\\"><!--v-if--></div><!--v-if--></div><div class=\\"ix-select-suffix\\"><i class=\\"ix-icon ix-icon-down\\" role=\\"img\\" arialabel=\\"down\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"64 64 896 896\\" width=\\"1em\\" height=\\"1em\\" focusable=\\"false\\" fill=\\"currentColor\\" aria-hidden=\\"true\\" data-icon=\\"down\\"><path d=\\"M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z\\"></path></svg></i></div><!--v-if--><!--teleport start--><!--teleport end--></div>"`;
+
+exports[`Select.vue single template work render work 1`] = `"<div class=\\"ix-select ix-select-single ix-select-show-suffix ix-select-medium\\"><div class=\\"ix-select-selector\\"><div class=\\"ix-select-input\\"><input class=\\"ix-select-input-inner\\" autocomplete=\\"off\\" style=\\"opacity: 0;\\"><!--v-if--></div><div class=\\"ix-select-placeholder\\"></div></div><div class=\\"ix-select-suffix\\"><i class=\\"ix-icon ix-icon-down\\" role=\\"img\\" arialabel=\\"down\\"></i></div><!--v-if--><!--teleport start--><!--teleport end--></div>"`;

packages/components/select/__tests__/option.spec.ts

@@ -0,0 +1,54 @@
+import { mount, MountingOptions, VueWrapper } from '@vue/test-utils'
+import IxOption from '../src/Option.vue'
+import IxOptionGroup from '../src/OptionGroup.vue'
+import { OptionProps, OptionGroupProps } from '../src/types'
+
+describe('Option.vue', () => {
+  let OptionMount: (options?: MountingOptions<Partial<OptionProps>>) => VueWrapper<InstanceType<typeof IxOption>>
+
+  beforeEach(() => {
+    OptionMount = options => mount(IxOption, { ...options })
+  })
+
+  afterEach(() => {
+    jest.spyOn(console, 'warn').mockClear()
+  })
+
+  test('render work', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    const wrapper = OptionMount({ props: { label: 'Tom', value: 'tom' } })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(warn).toBeCalledTimes(2)
+    expect(() => {
+      wrapper.vm.$forceUpdate()
+      wrapper.unmount()
+    }).not.toThrow()
+  })
+})
+
+describe('OptionGroup.vue', () => {
+  let OptionGroupMount: (
+    options?: MountingOptions<Partial<OptionGroupProps>>,
+  ) => VueWrapper<InstanceType<typeof IxOptionGroup>>
+
+  beforeEach(() => {
+    OptionGroupMount = options => mount(IxOptionGroup, { ...options })
+  })
+
+  afterEach(() => {
+    jest.spyOn(console, 'warn').mockClear()
+  })
+
+  test('render work', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    const wrapper = OptionGroupMount({ props: { label: 'TomGroup' } })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(warn).toBeCalledTimes(1)
+    expect(() => {
+      wrapper.vm.$forceUpdate()
+      wrapper.unmount()
+    }).not.toThrow()
+  })
+})