@antsoo-lib/components 0.1.2 → 0.1.4

package/src/input-number/style/index.tsx

@@ -0,0 +1,416 @@
+import type { InputToken } from '../../input/style'
+import {
+  genActiveStyle,
+  genBasicInputStyle,
+  genDisabledStyle,
+  genHoverStyle,
+  genInputGroupStyle,
+  genPlaceholderStyle,
+  genStatusStyle,
+  initInputToken,
+} from '../../input/style'
+import { resetComponent, resetIcon } from '../../style'
+import { genCompactItemStyle } from '../../style/compact-item'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+import { genComponentStyleHook } from '../../theme/internal'
+
+export interface ComponentToken {
+  controlWidth: number
+  handleWidth: number
+  handleFontSize: number
+  /** Default `auto`. Set `true` will always show the handle */
+  handleVisible: 'auto' | true
+}
+
+type InputNumberToken = InputToken<FullToken<'InputNumber'>>
+
+const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
+  const {
+    componentCls,
+    lineWidth,
+    lineType,
+    colorBorder,
+    borderRadius,
+    fontSizeLG,
+    controlHeightLG,
+    controlHeightSM,
+    colorError,
+    inputPaddingHorizontalSM,
+    colorTextDescription,
+    motionDurationMid,
+    colorPrimary,
+    controlHeight,
+    inputPaddingHorizontal,
+    colorBgContainer,
+    colorTextDisabled,
+    borderRadiusSM,
+    borderRadiusLG,
+    controlWidth,
+    handleVisible,
+  } = token
+
+  return [
+    {
+      [componentCls]: {
+        ...resetComponent(token),
+        ...genBasicInputStyle(token),
+        ...genStatusStyle(token, componentCls),
+
+        display: 'inline-block',
+        width: controlWidth,
+        margin: 0,
+        padding: 0,
+        border: `${lineWidth}px ${lineType} ${colorBorder}`,
+        borderRadius,
+
+        '&-rtl': {
+          direction: 'rtl',
+
+          [`${componentCls}-input`]: {
+            direction: 'rtl',
+          },
+        },
+
+        '&-lg': {
+          padding: 0,
+          fontSize: fontSizeLG,
+          borderRadius: borderRadiusLG,
+
+          [`input${componentCls}-input`]: {
+            height: controlHeightLG - 2 * lineWidth,
+          },
+        },
+
+        '&-sm': {
+          padding: 0,
+          borderRadius: borderRadiusSM,
+
+          [`input${componentCls}-input`]: {
+            height: controlHeightSM - 2 * lineWidth,
+            padding: `0 ${inputPaddingHorizontalSM}px`,
+          },
+        },
+
+        '&:hover': {
+          ...genHoverStyle(token),
+        },
+
+        '&-focused': {
+          ...genActiveStyle(token),
+        },
+
+        '&-disabled': {
+          ...genDisabledStyle(token),
+          [`${componentCls}-input`]: {
+            cursor: 'not-allowed',
+          },
+        },
+
+        // ===================== Out Of Range =====================
+        '&-out-of-range': {
+          input: {
+            color: colorError,
+          },
+        },
+
+        // Style for input-group: input with label, with button or dropdown...
+        '&-group': {
+          ...resetComponent(token),
+          ...genInputGroupStyle(token),
+
+          '&-wrapper': {
+            display: 'inline-block',
+            textAlign: 'start',
+            verticalAlign: 'top', // https://github.com/ant-design/ant-design/issues/6403
+
+            [`${componentCls}-affix-wrapper`]: {
+              width: '100%',
+            },
+
+            // Size
+            '&-lg': {
+              [`${componentCls}-group-addon`]: {
+                borderRadius: borderRadiusLG,
+              },
+            },
+            '&-sm': {
+              [`${componentCls}-group-addon`]: {
+                borderRadius: borderRadiusSM,
+              },
+            },
+          },
+        },
+
+        [componentCls]: {
+          '&-input': {
+            width: '100%',
+            height: controlHeight - 2 * lineWidth,
+            padding: `0 ${inputPaddingHorizontal}px`,
+            textAlign: 'start',
+            backgroundColor: 'transparent',
+            border: 0,
+            borderRadius,
+            outline: 0,
+            transition: `all ${motionDurationMid} linear`,
+            appearance: 'textfield',
+            color: token.colorText,
+            fontSize: 'inherit',
+            verticalAlign: 'top',
+            ...genPlaceholderStyle(token.colorTextPlaceholder),
+
+            '&[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button':
+              {
+                margin: 0,
+                /* stylelint-disable-next-line property-no-vendor-prefix */
+                webkitAppearance: 'none',
+                appearance: 'none',
+              },
+          },
+        },
+      },
+    },
+
+    // Handler
+    {
+      [componentCls]: {
+        [`&:hover ${componentCls}-handler-wrap, &-focused ${componentCls}-handler-wrap`]: {
+          opacity: 1,
+        },
+
+        [`${componentCls}-handler-wrap`]: {
+          position: 'absolute',
+          insetBlockStart: 0,
+          insetInlineEnd: 0,
+          width: token.handleWidth,
+          height: '100%',
+          background: colorBgContainer,
+          borderStartStartRadius: 0,
+          borderStartEndRadius: borderRadius,
+          borderEndEndRadius: borderRadius,
+          borderEndStartRadius: 0,
+          opacity: handleVisible === true ? 1 : 0,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'stretch',
+          transition: `opacity ${motionDurationMid} linear ${motionDurationMid}`,
+
+          // Fix input number inside Menu makes icon too large
+          // We arise the selector priority by nest selector here
+          // https://github.com/ant-design/ant-design/issues/14367
+          [`${componentCls}-handler`]: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: 'auto',
+            height: '40%',
+
+            [`
+              ${componentCls}-handler-up-inner,
+              ${componentCls}-handler-down-inner
+            `]: {
+              marginInlineEnd: 0,
+              fontSize: token.handleFontSize,
+            },
+          },
+        },
+
+        [`${componentCls}-handler`]: {
+          height: '50%',
+          overflow: 'hidden',
+          color: colorTextDescription,
+          fontWeight: 'bold',
+          lineHeight: 0,
+          textAlign: 'center',
+          cursor: 'pointer',
+          borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`,
+          transition: `all ${motionDurationMid} linear`,
+          '&:active': {
+            background: token.colorFillAlter,
+          },
+
+          // Hover
+          '&:hover': {
+            height: `60%`,
+
+            [`
+              ${componentCls}-handler-up-inner,
+              ${componentCls}-handler-down-inner
+            `]: {
+              color: colorPrimary,
+            },
+          },
+
+          '&-up-inner, &-down-inner': {
+            ...resetIcon(),
+
+            color: colorTextDescription,
+            transition: `all ${motionDurationMid} linear`,
+            userSelect: 'none',
+          },
+        },
+
+        [`${componentCls}-handler-up`]: {
+          borderStartEndRadius: borderRadius,
+        },
+
+        [`${componentCls}-handler-down`]: {
+          borderBlockStart: `${lineWidth}px ${lineType} ${colorBorder}`,
+          borderEndEndRadius: borderRadius,
+        },
+
+        // Disabled
+        '&-disabled, &-readonly': {
+          [`${componentCls}-handler-wrap`]: {
+            display: 'none',
+          },
+
+          [`${componentCls}-input`]: {
+            color: 'inherit',
+          },
+        },
+
+        [`
+          ${componentCls}-handler-up-disabled,
+          ${componentCls}-handler-down-disabled
+        `]: {
+          cursor: 'not-allowed',
+        },
+
+        [`
+          ${componentCls}-handler-up-disabled:hover &-handler-up-inner,
+          ${componentCls}-handler-down-disabled:hover &-handler-down-inner
+        `]: {
+          color: colorTextDisabled,
+        },
+      },
+    },
+
+    // Border-less
+    {
+      [`${componentCls}-borderless`]: {
+        borderColor: 'transparent',
+        boxShadow: 'none',
+
+        [`${componentCls}-handler-down`]: {
+          borderBlockStartWidth: 0,
+        },
+      },
+    },
+  ]
+}
+
+const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
+  const {
+    componentCls,
+    inputPaddingHorizontal,
+    inputAffixPadding,
+    controlWidth,
+    borderRadiusLG,
+    borderRadiusSM,
+  } = token
+
+  return {
+    [`${componentCls}-affix-wrapper`]: {
+      ...genBasicInputStyle(token),
+      ...genStatusStyle(token, `${componentCls}-affix-wrapper`),
+      // or number handler will cover form status
+      position: 'relative',
+      display: 'inline-flex',
+      width: controlWidth,
+      padding: 0,
+      paddingInlineStart: inputPaddingHorizontal,
+
+      '&-lg': {
+        borderRadius: borderRadiusLG,
+      },
+
+      '&-sm': {
+        borderRadius: borderRadiusSM,
+      },
+
+      [`&:not(${componentCls}-affix-wrapper-disabled):hover`]: {
+        ...genHoverStyle(token),
+        zIndex: 1,
+      },
+
+      '&-focused, &:focus': {
+        zIndex: 1,
+      },
+
+      '&-disabled': {
+        [`${componentCls}[disabled]`]: {
+          background: 'transparent',
+        },
+      },
+
+      [`> div${componentCls}`]: {
+        width: '100%',
+        border: 'none',
+        outline: 'none',
+
+        [`&${componentCls}-focused`]: {
+          boxShadow: 'none !important',
+        },
+      },
+
+      [`input${componentCls}-input`]: {
+        padding: 0,
+      },
+
+      '&::before': {
+        width: 0,
+        visibility: 'hidden',
+        content: '"\\a0"',
+      },
+
+      [`${componentCls}-handler-wrap`]: {
+        zIndex: 2,
+      },
+
+      [componentCls]: {
+        '&-prefix, &-suffix': {
+          display: 'flex',
+          flex: 'none',
+          alignItems: 'center',
+          pointerEvents: 'none',
+        },
+
+        '&-prefix': {
+          marginInlineEnd: inputAffixPadding,
+        },
+
+        '&-suffix': {
+          position: 'absolute',
+          insetBlockStart: 0,
+          insetInlineEnd: 0,
+          zIndex: 1,
+          height: '100%',
+          marginInlineEnd: inputPaddingHorizontal,
+          marginInlineStart: inputAffixPadding,
+        },
+      },
+    },
+  }
+}
+
+// ============================== Export ==============================
+export default genComponentStyleHook(
+  'InputNumber',
+  (token) => {
+    const inputNumberToken = initInputToken<FullToken<'InputNumber'>>(token)
+    return [
+      genInputNumberStyles(inputNumberToken),
+      genAffixWrapperStyles(inputNumberToken),
+      // =====================================================
+      // ==             Space Compact                       ==
+      // =====================================================
+      genCompactItemStyle(inputNumberToken),
+    ]
+  },
+  (token) => ({
+    controlWidth: 90,
+    handleWidth: token.controlHeightSM - token.lineWidth * 2,
+    handleFontSize: token.fontSize / 2,
+    handleVisible: 'auto',
+  }),
+)

package/src/layout/Sider.tsx

@@ -0,0 +1,235 @@
+import BarsOutlined from '@ant-design/icons-vue/BarsOutlined'
+import LeftOutlined from '@ant-design/icons-vue/LeftOutlined'
+import RightOutlined from '@ant-design/icons-vue/RightOutlined'
+
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
+import {
+  defineComponent,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  shallowRef,
+  watch,
+} from 'vue'
+
+import classNames from '../_util/classNames'
+import isNumeric from '../_util/isNumeric'
+import initDefaultProps from '../_util/props-util/initDefaultProps'
+import { tuple } from '../_util/type'
+import PropTypes from '../_util/vue-types'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import { SiderCollapsedKey, SiderHookProviderKey } from './injectionKey'
+
+const dimensionMaxMap = {
+  xs: '479.98px',
+  sm: '575.98px',
+  md: '767.98px',
+  lg: '991.98px',
+  xl: '1199.98px',
+  xxl: '1599.98px',
+  xxxl: '1999.98px',
+}
+
+export type CollapseType = 'clickTrigger' | 'responsive'
+
+export const siderProps = () => ({
+  prefixCls: String,
+  collapsible: { type: Boolean, default: undefined },
+  collapsed: { type: Boolean, default: undefined },
+  defaultCollapsed: { type: Boolean, default: undefined },
+  reverseArrow: { type: Boolean, default: undefined },
+  zeroWidthTriggerStyle: {
+    type: Object as PropType<CSSProperties>,
+    default: undefined as CSSProperties,
+  },
+  trigger: PropTypes.any,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  breakpoint: PropTypes.oneOf(tuple('xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl')),
+  theme: PropTypes.oneOf(tuple('light', 'dark')).def('dark'),
+  onBreakpoint: Function as PropType<(broken: boolean) => void>,
+  onCollapse: Function as PropType<(collapsed: boolean, type: CollapseType) => void>,
+})
+
+export type SiderProps = Partial<ExtractPropTypes<ReturnType<typeof siderProps>>>
+
+export interface SiderContextProps {
+  sCollapsed?: boolean
+  collapsedWidth?: string | number
+}
+
+const generateId = (() => {
+  let i = 0
+  return (prefix = '') => {
+    i += 1
+    return `${prefix}${i}`
+  }
+})()
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ALayoutSider',
+  inheritAttrs: false,
+  props: initDefaultProps(siderProps(), {
+    collapsible: false,
+    defaultCollapsed: false,
+    reverseArrow: false,
+    width: 200,
+    collapsedWidth: 80,
+  }),
+  emits: ['breakpoint', 'update:collapsed', 'collapse'],
+  setup(props, { emit, attrs, slots }) {
+    const { prefixCls } = useConfigInject('layout-sider', props)
+    const siderHook = inject(SiderHookProviderKey, undefined)
+    const collapsed = shallowRef(
+      !!(props.collapsed !== undefined ? props.collapsed : props.defaultCollapsed),
+    )
+    const below = shallowRef(false)
+
+    watch(
+      () => props.collapsed,
+      () => {
+        collapsed.value = !!props.collapsed
+      },
+    )
+
+    provide(SiderCollapsedKey, collapsed)
+
+    const handleSetCollapsed = (value: boolean, type: CollapseType) => {
+      if (props.collapsed === undefined) {
+        collapsed.value = value
+      }
+      emit('update:collapsed', value)
+      emit('collapse', value, type)
+    }
+
+    // ========================= Responsive =========================
+    const responsiveHandlerRef = shallowRef<(mql: MediaQueryListEvent | MediaQueryList) => void>(
+      (mql: MediaQueryListEvent | MediaQueryList) => {
+        below.value = mql.matches
+        emit('breakpoint', mql.matches)
+
+        if (collapsed.value !== mql.matches) {
+          handleSetCollapsed(mql.matches, 'responsive')
+        }
+      },
+    )
+    let mql: MediaQueryList
+    function responsiveHandler(mql: MediaQueryListEvent | MediaQueryList) {
+      return responsiveHandlerRef.value!(mql)
+    }
+    const uniqueId = generateId('ant-sider-')
+    siderHook && siderHook.addSider(uniqueId)
+
+    onMounted(() => {
+      watch(
+        () => props.breakpoint,
+        () => {
+          try {
+            mql?.removeEventListener('change', responsiveHandler)
+          } catch (error) {
+            mql?.removeListener(responsiveHandler)
+          }
+          if (typeof window !== 'undefined') {
+            const { matchMedia } = window
+            if (matchMedia! && props.breakpoint && props.breakpoint in dimensionMaxMap) {
+              mql = matchMedia(`(max-width: ${dimensionMaxMap[props.breakpoint]})`)
+              try {
+                mql.addEventListener('change', responsiveHandler)
+              } catch (error) {
+                mql.addListener(responsiveHandler)
+              }
+              responsiveHandler(mql)
+            }
+          }
+        },
+        {
+          immediate: true,
+        },
+      )
+    })
+    onBeforeUnmount(() => {
+      try {
+        mql?.removeEventListener('change', responsiveHandler)
+      } catch (error) {
+        mql?.removeListener(responsiveHandler)
+      }
+      siderHook && siderHook.removeSider(uniqueId)
+    })
+
+    const toggle = () => {
+      handleSetCollapsed(!collapsed.value, 'clickTrigger')
+    }
+
+    return () => {
+      const pre = prefixCls.value
+      const {
+        collapsedWidth,
+        width,
+        reverseArrow,
+        zeroWidthTriggerStyle,
+        trigger = slots.trigger?.(),
+        collapsible,
+        theme,
+      } = props
+      const rawWidth = collapsed.value ? collapsedWidth : width
+      // use "px" as fallback unit for width
+      const siderWidth = isNumeric(rawWidth) ? `${rawWidth}px` : String(rawWidth)
+      // special trigger when collapsedWidth == 0
+      const zeroWidthTrigger =
+        Number.parseFloat(String(collapsedWidth || 0)) === 0 ? (
+          <span
+            onClick={toggle}
+            class={classNames(
+              `${pre}-zero-width-trigger`,
+              `${pre}-zero-width-trigger-${reverseArrow ? 'right' : 'left'}`,
+            )}
+            style={zeroWidthTriggerStyle}
+          >
+            {trigger || <BarsOutlined />}
+          </span>
+        ) : null
+      const iconObj = {
+        expanded: reverseArrow ? <RightOutlined /> : <LeftOutlined />,
+        collapsed: reverseArrow ? <LeftOutlined /> : <RightOutlined />,
+      }
+      const status = collapsed.value ? 'collapsed' : 'expanded'
+      const defaultTrigger = iconObj[status]
+      const triggerDom =
+        trigger !== null
+          ? zeroWidthTrigger || (
+              <div class={`${pre}-trigger`} onClick={toggle} style={{ width: siderWidth }}>
+                {trigger || defaultTrigger}
+              </div>
+            )
+          : null
+      const divStyle = [
+        attrs.style as CSSProperties,
+        {
+          flex: `0 0 ${siderWidth}`,
+          maxWidth: siderWidth, // Fix width transition bug in IE11
+          minWidth: siderWidth, // https://github.com/ant-design/ant-design/issues/6349
+          width: siderWidth,
+        },
+      ]
+      const siderCls = classNames(
+        pre,
+        `${pre}-${theme}`,
+        {
+          [`${pre}-collapsed`]: !!collapsed.value,
+          [`${pre}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
+          [`${pre}-below`]: !!below.value,
+          [`${pre}-zero-width`]: Number.parseFloat(siderWidth) === 0,
+        },
+        attrs.class,
+      )
+      return (
+        <aside {...attrs} class={siderCls} style={divStyle}>
+          <div class={`${pre}-children`}>{slots.default?.()}</div>
+          {collapsible || (below.value && zeroWidthTrigger) ? triggerDom : null}
+        </aside>
+      )
+    }
+  },
+})