refactor(input-group, button-group, input-group-label): merge into input & button

src/_mixins/with-cssr.js

@@ -51,7 +51,7 @@ function setupMutableStyle (vm, theme, depKey, CNode) {
     $options: options
   } = vm
   const resolveId = options.cssrName || options.name
-  const mountPrefix = options.cssrId || resolveId
+  const mountPrefix = options.cssrId || options.name
   const depValue =
     depKey === 'mergedTheme' || depKey === 'theme' ? theme : vm[depKey]
   if (depValue === null || depValue === undefined) {

src/button-group/index.js

@@ -1,2 +0,0 @@
-/* istanbul ignore file */
-export { default as NButtonGroup } from './src/ButtonGroup.vue'

src/button-group/styles/dark.js

@@ -1,12 +0,0 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseDark } from '../../_styles/base'
-import { buttonDark } from '../../button/styles'
-
-export default create({
-  theme: 'dark',
-  name: 'ButtonGroup',
-  peer: [baseDark, buttonDark],
-  getLocalVars () {
-    return {}
-  }
-})

src/button-group/styles/index.js

@@ -1,2 +0,0 @@
-export { default as buttonGroupDark } from './dark.js'
-export { default as buttonGroupLight } from './light.js'

src/button-group/styles/light.js

@@ -1,12 +0,0 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseLight } from '../../_styles/base'
-import { buttonLight } from '../../button/styles'
-
-export default create({
-  theme: 'light',
-  name: 'ButtonGroup',
-  peer: [baseLight, buttonLight],
-  getLocalVars () {
-    return {}
-  }
-})

src/button-group/tests/ButtonGroup.spec.js

@@ -1,19 +0,0 @@
-import { mount } from '@vue/test-utils'
-import create from '../../create'
-import { enUS } from '../../locales'
-import { buttonGroupLight } from '../styles'
-import { NButtonGroup } from '../index'
-
-describe('n-button-group', () => {
-  const naive = create({
-    locales: [enUS],
-    styles: [buttonGroupLight]
-  })
-  it('should work with import on demand', () => {
-    mount(NButtonGroup, {
-      global: {
-        plugins: [naive]
-      }
-    })
-  })
-})

src/button/index.js

@@ -1,2 +1,3 @@
 /* istanbul ignore file */
 export { default as NButton } from './src/Button.vue'
+export { default as NButtonGroup } from './src/ButtonGroup.vue'

src/button/src/Button.vue

@@ -69,7 +69,7 @@ import {
   NBaseWave
 } from '../../_base'
 import { NIcon } from '../../icon'
-import styles from './styles/index.js'
+import styles from './styles/button/index.js'
 import {
   createHoverColor,
   createPressedColor

src/button/src/ButtonGroup.vue

@@ -11,10 +11,11 @@
 
 <script>
 import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles/index.js'
+import styles from './styles/button-group/index.js'
 
 export default {
   name: 'ButtonGroup',
+  cssrName: 'Button',
   mixins: [configurable, themeable, withCssr(styles)],
   provide () {
     return {

src/button/src/styles/button-group/themed-base.cssr.js

@@ -1,4 +1,4 @@
-import { c, cB, cM, cNotM } from '../../../_utils/cssr/index'
+import { c, cB, cM, cNotM } from '../../../../_utils/cssr/index'
 
 const zero = '0 !important'
 

src/button/src/styles/button/themed-base.cssr.js

@@ -1,6 +1,6 @@
-import { c, cTB, cB, cE, cM, cNotM } from '../../../_utils/cssr'
-import fadeInWidthExpandTransition from '../../../_styles/transitions/fade-in-width-expand'
-import iconSwitchTransition from '../../../_styles/transitions/icon-switch'
+import { c, cTB, cB, cE, cM, cNotM } from '../../../../_utils/cssr'
+import fadeInWidthExpandTransition from '../../../../_styles/transitions/fade-in-width-expand'
+import iconSwitchTransition from '../../../../_styles/transitions/icon-switch'
 
 export default c([
   ({ props }) => {

src/button/src/styles/button/themed-color.cssr.js

@@ -1,4 +1,4 @@
-import { c, cB, cTB, cE, cM, cNotM, createKey } from '../../../_utils/cssr'
+import { c, cB, cTB, cE, cM, cNotM, createKey } from '../../../../_utils/cssr'
 
 export default c([
   ({ props }) => {

src/button/src/styles/button/themed-size.cssr.js

@@ -1,5 +1,5 @@
-import { c, cB, cTB, cE, cM, createKey } from '../../../_utils/cssr'
-import { formatLength } from '../../../_utils'
+import { c, cB, cTB, cE, cM, createKey } from '../../../../_utils/cssr'
+import { formatLength } from '../../../../_utils'
 
 export default c([
   ({ props }) => {

src/components.js

@@ -7,7 +7,6 @@ export * from './back-top'
 export * from './badge'
 export * from './breadcrumb'
 export * from './button'
-export * from './button-group'
 export * from './card'
 export * from './cascader'
 export * from './checkbox'
@@ -31,8 +30,6 @@ export * from './gradient-text'
 export * from './grid'
 export * from './icon'
 export * from './input'
-export * from './input-group'
-export * from './input-group-label'
 export * from './input-number'
 export * from './layout'
 export * from './list'

src/dynamic-input/src/DynamicInput.vue

@@ -60,8 +60,7 @@
 
 <script>
 import { ref, toRef, isProxy, toRaw } from 'vue'
-import { NButton } from '../../button'
-import { NButtonGroup } from '../../button-group'
+import { NButton, NButtonGroup } from '../../button'
 import { RemoveIcon, AddIcon } from '../../_base/icons'
 import NDynamicInputInputPreset from './InputPreset.vue'
 import NDynamicInputPairPreset from './PairPreset.vue'

src/input-group-label/index.js

@@ -1,2 +0,0 @@
-/* istanbul ignore file */
-export { default as NInputGroupLabel } from './src/InputGroupLabel.vue'

src/input-group-label/src/styles/themed-base.cssr.js

@@ -1,44 +0,0 @@
-import { cTB, c, cM, createKey } from '../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-    const {
-      $global: {
-        cubicBezierEaseInOut
-      },
-      $local: {
-        borderRadius,
-        color: backgroundColor,
-        textColor,
-        boxShadow
-      }
-    } = props
-    return cTB('input-group-label', {
-      userSelect: 'none',
-      boxSizing: 'border-box',
-      padding: '0 12px',
-      display: 'inline-block',
-      borderRadius,
-      backgroundColor,
-      color: textColor,
-      boxShadow,
-      transition: `
-        color .3s ${cubicBezierEaseInOut},
-        background-color .3s ${cubicBezierEaseInOut},
-        box-shadow .3s ${cubicBezierEaseInOut}
-      `
-    }, ['small', 'medium', 'large'].map(size => {
-      const {
-        $local: {
-          [createKey('fontSize', size)]: fontSize,
-          [createKey('height', size)]: height
-        }
-      } = props
-      return cM(size + '-size', {
-        fontSize,
-        lineHeight: height,
-        height
-      })
-    }))
-  }
-])

src/input-group-label/styles/dark.js

@@ -1,20 +0,0 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseDark } from '../../_styles/base'
-
-export default create({
-  name: 'InputGroupLabel',
-  theme: 'dark',
-  peer: [baseDark],
-  getLocalVars (vars) {
-    return {
-      heightTiny: vars.heightTiny,
-      heightSmall: vars.heightSmall,
-      heightMedium: vars.heightMedium,
-      heightLarge: vars.heightLarge,
-      borderRadius: vars.borderRadius,
-      color: vars.inputColorOverlay,
-      textColor: vars.textColor2,
-      boxShadow: 'inset 0 0 0 1px transparent'
-    }
-  }
-})

src/input-group-label/styles/index.js

@@ -1,2 +0,0 @@
-export { default as inputGroupLabelDark } from './dark.js'
-export { default as inputGroupLabelLight } from './light.js'

src/input-group-label/styles/light.js

@@ -1,20 +0,0 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseLight } from '../../_styles/base'
-
-export default create({
-  name: 'InputGroupLabel',
-  theme: 'light',
-  peer: [baseLight],
-  getLocalVars (vars) {
-    return {
-      heightTiny: vars.heightTiny,
-      heightSmall: vars.heightSmall,
-      heightMedium: vars.heightMedium,
-      heightLarge: vars.heightLarge,
-      borderRadius: vars.borderRadius,
-      color: vars.actionColor,
-      textColor: vars.textColor2,
-      boxShadow: `inset 0 0 0 1px ${vars.borderColor}`
-    }
-  }
-})

src/input-group-label/tests/InputGroupLabel.spec.js

@@ -1,19 +0,0 @@
-import { mount } from '@vue/test-utils'
-import create from '../../create'
-import { enUS } from '../../locales'
-import { inputGroupLabelLight } from '../styles'
-import { NInputGroupLabel } from '../index'
-
-describe('n-input-group-label', () => {
-  const naive = create({
-    locales: [enUS],
-    styles: [inputGroupLabelLight]
-  })
-  it('should work with import on demand', () => {
-    mount(NInputGroupLabel, {
-      global: {
-        plugins: [naive]
-      }
-    })
-  })
-})

src/input-group/index.js

@@ -1,2 +0,0 @@
-/* istanbul ignore file */
-export { default as NInputGroup } from './src/InputGroup.vue'

src/input-group/styles/dark.js

@@ -1,9 +0,0 @@
-import create from '../../_styles/utils/create-component-base'
-
-export default create({
-  theme: 'dark',
-  name: 'InputGroup',
-  getLocalVars () {
-    return {}
-  }
-})

src/input-group/styles/index.js

@@ -1,2 +0,0 @@
-export { default as inputGroupDark } from './dark.js'
-export { default as inputGroupLight } from './light.js'

src/input-group/styles/light.js

@@ -1,9 +0,0 @@
-import create from '../../_styles/utils/create-component-base'
-
-export default create({
-  theme: 'light',
-  name: 'InputGroup',
-  getLocalVars () {
-    return {}
-  }
-})

src/input-group/tests/InputGroup.spec.js

@@ -1,19 +0,0 @@
-import { mount } from '@vue/test-utils'
-import create from '../../create'
-import { enUS } from '../../locales'
-import { inputGroupLight } from '../styles'
-import { NInputGroup } from '../index'
-
-describe('n-input-group', () => {
-  const naive = create({
-    locales: [enUS],
-    styles: [inputGroupLight]
-  })
-  it('should work with import on demand', () => {
-    mount(NInputGroup, {
-      global: {
-        plugins: [naive]
-      }
-    })
-  })
-})

src/input/index.js

@@ -1,2 +1,4 @@
 /* istanbul ignore file */
 export { default as NInput } from './src/Input.vue'
+export { default as NInputGroup } from './src/InputGroup.vue'
+export { default as NInputGroupLabel } from './src/InputGroupLabel.vue'

src/input/src/Input.vue

@@ -166,7 +166,7 @@ import {
   withCssr
 } from '../../_mixins'
 import { call } from '../../_utils'
-import styles from './styles'
+import styles from './styles/input'
 
 export default {
   name: 'Input',

src/input/src/InputGroup.vue

@@ -6,10 +6,11 @@
 
 <script>
 import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles'
+import styles from './styles/input-group'
 
 export default {
   name: 'InputGroup',
+  cssrName: 'Input',
   mixins: [configurable, themeable, withCssr(styles)]
 }
 </script>

src/input/src/InputGroupLabel.vue

@@ -7,15 +7,17 @@
     }"
   >
     <slot />
+    <div class="n-input-group-label__border" />
   </div>
 </template>
 
 <script>
 import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles'
+import styles from './styles/input-group-label'
 
 export default {
   name: 'InputGroupLabel',
+  cssrName: 'Input',
   mixins: [configurable, themeable, withCssr(styles)],
   props: {
     size: {

src/input/src/styles/input-group-label/index.js

@@ -1,4 +1,4 @@
-import baseStyle from './base.cssr.js'
+import baseStyle from './themed-base.cssr.js'
 
 export default [
   {

src/input/src/styles/input-group-label/themed-base.cssr.js

@@ -0,0 +1,58 @@
+import { cTB, c, cM, cE, createKey } from '../../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    const {
+      $global: {
+        cubicBezierEaseInOut
+      },
+      $local: {
+        borderRadius,
+        groupLabelColor,
+        textColor,
+        boxShadow,
+        border
+      }
+    } = props
+    return cTB('input-group-label', {
+      position: 'relative',
+      userSelect: 'none',
+      boxSizing: 'border-box',
+      padding: '0 12px',
+      display: 'inline-block',
+      borderRadius,
+      backgroundColor: groupLabelColor,
+      color: textColor,
+      boxShadow,
+      transition: `
+        color .3s ${cubicBezierEaseInOut},
+        background-color .3s ${cubicBezierEaseInOut},
+        box-shadow .3s ${cubicBezierEaseInOut}
+      `
+    }, [
+      ['small', 'medium', 'large'].map(size => {
+        const {
+          $local: {
+            [createKey('fontSize', size)]: fontSize,
+            [createKey('height', size)]: height
+          }
+        } = props
+        return cM(size + '-size', {
+          fontSize,
+          lineHeight: height,
+          height
+        })
+      }),
+      cE('border', {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        borderRadius: 'inherit',
+        border,
+        transition: `border-color .3s ${cubicBezierEaseInOut}`
+      })
+    ])
+  }
+])

src/input/src/styles/input-group/base.cssr.js

@@ -1,4 +1,4 @@
-import { c, cB, cE } from '../../../_utils/cssr'
+import { c, cB, cE } from '../../../../_utils/cssr'
 
 export default c([
   () => {

src/input/src/styles/input/themed-base.cssr.js

@@ -1,5 +1,5 @@
-import { cTB, c, cB, cE, cM, cNotM, insideFormItem, createKey } from '../../../_utils/cssr'
-import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up'
+import { cTB, c, cB, cE, cM, cNotM, insideFormItem, createKey } from '../../../../_utils/cssr'
+import fadeInScaleUpTransition from '../../../../_styles/transitions/fade-in-scale-up'
 
 export default c([
   ({ props }) => {

src/input/src/styles/input/themed-size.cssr.js

@@ -1,4 +1,4 @@
-import { cTB, c, cE, cM, cNotM, createKey } from '../../../_utils/cssr'
+import { cTB, c, cE, cM, cNotM, createKey } from '../../../../_utils/cssr'
 import { depx, pxfy } from 'seemly'
 
 export default c([

src/input/styles/dark.js

@@ -45,6 +45,7 @@ export default create({
       lineHeightTextarea: lineHeight,
       borderRadius,
       iconSize: '16px',
+      groupLabelColor: inputColorOverlay,
       textColor: textColor2Overlay,
       textColorDisabled: textColor4Overlay,
       textDecorationColor: textColor2Overlay,

src/input/styles/light.js

@@ -31,7 +31,8 @@ export default create({
       heightTiny,
       heightSmall,
       heightMedium,
-      heightLarge
+      heightLarge,
+      actionColor
     } = vars
     return {
       ...commonVariables,
@@ -46,6 +47,7 @@ export default create({
       lineHeightTextarea: lineHeight,
       borderRadius,
       iconSize: '16px',
+      groupLabelColor: actionColor,
       textColor: textColor2,
       textColorDisabled: textColor4,
       textDecorationColor: textColor2,

src/styles.js

@@ -23,7 +23,6 @@ export { backTopDark, backTopLight } from './back-top/styles'
 export { badgeDark, badgeLight } from './badge/styles'
 export { breadcrumbDark, breadcrumbLight } from './breadcrumb/styles'
 export { buttonDark, buttonLight } from './button/styles'
-export { buttonGroupDark, buttonGroupLight } from './button-group/styles'
 export { cardDark, cardLight } from './card/styles'
 export { cascaderDark, cascaderLight } from './cascader/styles'
 export { checkboxDark, checkboxLight } from './checkbox/styles'
@@ -45,11 +44,6 @@ export { gradientTextDark, gradientTextLight } from './gradient-text/styles'
 export { gridDark, gridLight } from './grid/styles'
 export { iconDark, iconLight } from './icon/styles'
 export { inputDark, inputLight } from './input/styles'
-export { inputGroupDark, inputGroupLight } from './input-group/styles'
-export {
-  inputGroupLabelDark,
-  inputGroupLabelLight
-} from './input-group-label/styles'
 export { inputNumberDark, inputNumberLight } from './input-number/styles'
 export { layoutDark, layoutLight } from './layout/styles'
 export { listDark, listLight } from './list/styles'