base6-ui 1.1.1

package/src/components/BaseProgress/index.ts

@@ -0,0 +1,99 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable max-lines-per-function */
+import { defineComponent, h, PropType, shallowRef, watch } from 'vue'
+import { progressProps, NProgress } from 'naive-ui'
+import { SvgIcon } from 'lib-materials'
+import useNaiveConfigProvideContext from '../../hooks/useNaiveConfigProvideContext'
+
+export type Size = 'medium' | 'large'
+
+const baseProgressProps = {
+  ...progressProps,
+  circleSize: {
+    type: String as PropType<Size>,
+    default: 'medium'
+  },
+  tip: String
+} as const
+
+export default defineComponent({
+  name: 'BaseProgress',
+  props: baseProgressProps,
+  setup(props, { slots }) {
+    const clsPrefix = 'base-progress-'
+    const { mergedThemeOverridesRef } = useNaiveConfigProvideContext()
+    const extendStyle = shallowRef({})
+
+    const renderDashBoardContent = () => h(
+      'div',
+      {
+        class: `${clsPrefix}dashboard-content`
+      },
+      [
+        h(
+          'div',
+          {
+            class: `${clsPrefix}dashboard-content-logo`,
+            style: 'height:24px;width:24px'
+          },
+          slots.icon ? slots.icon() : h(SvgIcon, { icon: 'progress-default', size: '18' })
+        ),
+        h(
+          'div',
+          {
+            class: `${clsPrefix}dashboard-content-title`
+          },
+          [
+            h('span', {}, `${props.percentage}`),
+            h('span', {}, '%')
+          ]
+        ),
+        props.tip ? h(
+          'div',
+          {
+            class: `${clsPrefix}dashboard-content-tip`
+          },
+          props.tip
+        ) : undefined
+      ]
+    )
+    const renderDefault = () => {
+      if (slots.default) return () => (slots as any).default()
+      if (props.type === 'dashboard') return renderDashBoardContent
+      return undefined
+      // if (props.type === 'dashboard') return renderDashBoardContent
+      // return slots.default ? () => (slots as any).default() : undefined
+    }
+
+    watch(
+      () => mergedThemeOverridesRef?.value?.Progress,
+      (curVal) => {
+        const fontSize = props.circleSize === 'medium' ? curVal.fontSizeCircleMedium : curVal.fontSizeCircleLarge
+        const width = props.circleSize === 'medium' ? curVal.circleWidthMedium : curVal.circleWidthLarge
+        extendStyle.value = {
+          '--n-tip-color-circle': curVal.tipColorCircle || '#56647A',
+          '--n-tip-font-size-circle': curVal.tipFontSizeCircle || '14px',
+          '--n-content-font-size': fontSize || 'var(--n-font-size)',
+          '--n-circle-width': width || '120px'
+        }
+      },
+      {
+        immediate: true
+      }
+    )
+
+    return () => (
+      h(
+        NProgress,
+        {
+          ...props,
+          class: 'base-progress',
+          style: extendStyle.value
+        },
+        {
+          default: renderDefault()
+        }
+      )
+    )
+  }
+})

package/src/components/BaseRadio/index.ts

@@ -0,0 +1 @@
+export { default as BaseRadio } from './index.vue'

package/src/components/BaseRadio/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <n-radio v-bind="$attrs" :class="['base-radio', className]" :style="[extendStyle, style]">
+    <template v-for="(item,keys) in $slots" v-slot:[keys]>
+      <slot :name="keys"></slot>
+    </template>
+  </n-radio>
+</template>
+<script lang="ts" setup>
+import { CSSProperties, shallowRef, watch } from 'vue'
+import useNaiveConfigProvideContext from '../../hooks/useNaiveConfigProvideContext'
+type PropsType = {
+  className?: string;
+  style?: CSSProperties;
+}
+withDefaults(defineProps<PropsType>(), { className: '', style: () => ({}) })
+defineOptions({
+  name: 'BaseRadio'
+})
+const { mergedThemeOverridesRef } = useNaiveConfigProvideContext()
+const extendStyle = shallowRef({})
+
+watch(
+  () => mergedThemeOverridesRef?.value?.Radio,
+  (curVal) => {
+    if (!curVal) return
+    extendStyle.value = {
+      '--n-box-shadow-active-disabled': curVal.boxShadowActiveDisabled || curVal.boxShadowDisabled,
+      '--n-color-active-disabled': curVal.colorActiveDisabled || curVal.boxShadowDisabled
+    }
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+<style lang="scss" scoped>
+.base-radio {
+  &.n-radio--disabled.n-radio--checked {
+    :deep(.n-radio__dot--checked) {
+      box-shadow: var(--n-box-shadow-active-disabled);
+      background-color: var(--n-color-active-disabled);
+    }
+  }
+}
+</style>

package/src/components/BaseSelect/index.ts

@@ -0,0 +1 @@
+export { default as BaseSelect } from './index.vue'

package/src/components/BaseSelect/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <n-select
+    class="base-select"
+    :renderTag="multiple ? renderMultipleTag : undefined"
+    :render-label="multiple ? renderMultipleLabel : undefined"
+    :multiple="multiple"
+    v-bind="$attrs"
+  >
+    <template v-for="(item, keys) in $slots" v-slot:[keys]>
+      <slot :name="keys"></slot>
+    </template>
+  </n-select>
+</template>
+<script lang="ts" setup>
+import { h, type VNodeChild } from 'vue'
+import { NCheckbox, NTag, type SelectOption, type SelectRenderTag } from 'naive-ui'
+type PropsType = {
+  multiple?: boolean
+}
+withDefaults(defineProps<PropsType>(), { multiple: false })
+const renderMultipleLabel = (option: SelectOption, selected: boolean): VNodeChild => {
+  return [
+    h(
+      NCheckbox,
+      {
+        checked: selected,
+        disabled: option.disabled
+      },
+      {
+        default: () => option.label
+      }
+    )
+  ]
+}
+
+const renderMultipleTag: SelectRenderTag = ({ option, handleClose }) => {
+  return h(
+    NTag,
+    {
+      type: 'default',
+      closable: true,
+      bordered: false,
+      onMousedown: (e: FocusEvent) => {
+        e.preventDefault()
+      },
+      onClose: (e: MouseEvent) => {
+        e.stopPropagation()
+        handleClose()
+      }
+    },
+    { default: () => option.label }
+  )
+}
+
+defineOptions({
+  name: 'BaseSelect'
+})
+
+</script>

package/src/components/BaseSlider/index.ts

@@ -0,0 +1 @@
+export { default as BaseSlider } from './index.vue'

package/src/components/BaseSlider/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="base-slider" :style="[extendStyle, style]">
+    <div class="slider-content">
+      <n-slider v-bind="$attrs" v-model:value="currentValue" :min="min" :max="max" :range="range" />
+      <div v-if="showExtremeValueText" class="extreme-value-text">
+        <div>{{ min }}</div>
+        <div>{{ max }}</div>
+      </div>
+    </div>
+    <div class="slider-input" v-if="showInput">
+      <n-input-number v-if="!range && typeof currentValue === 'number'" :show-button="false" placeholder="" :size="size"
+        v-model:value="currentValue" :min="min" :max="max" :precision="precision" />
+      <template v-else-if="range && typeof currentValue !== 'number'">
+        <n-input-number :show-button="false" placeholder="" :size="size" v-model:value="currentValue[0]" :min="min"
+          :max="max" :precision="precision" />
+        <div class="line"></div>
+        <n-input-number :show-button="false" placeholder="" :size="size" v-model:value="currentValue[1]" :min="min"
+          :max="max" :precision="precision" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, CSSProperties, shallowRef, watch } from 'vue'
+import useNaiveConfigProvideContext from '../../hooks/useNaiveConfigProvideContext'
+type PropsType = {
+  style?: CSSProperties;
+  showInput?: boolean;
+  size?: 'small' | 'medium';
+  value: number | number[],
+  min?: number,
+  max?: number,
+  range?: boolean,
+  showExtremeValueText?: boolean
+  precision?: number
+}
+const props = withDefaults(defineProps<PropsType>(), {
+  style: () => ({}), showInput: false, size: 'medium',
+  min: 0, max: 100, range: false, showExtremeValueText: false,
+  precision: 0
+})
+defineOptions({
+  name: 'BaseSlider'
+})
+const { mergedThemeOverridesRef } = useNaiveConfigProvideContext()
+const extendStyle = shallowRef({})
+
+const emits = defineEmits(['update:value'])
+const currentValue = computed({
+  get() { return props.value },
+  set(value) { emits('update:value', value) }
+})
+
+watch(
+  () => mergedThemeOverridesRef?.value?.Slider,
+  (curVal) => {
+    if (!curVal) return
+    extendStyle.value = {
+      '--n-slider-handler-border': curVal.handleBorderStyle,
+      '--n-slider-input-width': curVal.inputWidth,
+      '--n-slider-range-input-line-color': curVal.rangeInputLineColor,
+      '--n-slider-extreme-value-text-color': curVal.extremeValueTextColor
+    }
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.base-slider {
+  display: flex;
+  align-items: center;
+
+  :deep(.n-slider-handle) {
+    border: var(--n-slider-handler-border)
+  }
+
+  .slider-content {
+    flex: 1;
+    position: relative;
+
+    .extreme-value-text {
+      position: absolute;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      font-size: 12px;
+      color: var(--n-slider-extreme-value-text-color);
+    }
+
+  }
+
+  .slider-input {
+    margin-left: 16px;
+    display: flex;
+    align-items: center;
+
+    .line {
+      margin: 0 8px;
+      width: 10px;
+      height: 1px;
+      background: var(--n-slider-range-input-line-color);
+    }
+
+    :deep(.n-input-number) {
+      width: var(--n-slider-input-width);
+    }
+  }
+}
+</style>

package/src/components/BaseSwitch/index.ts

@@ -0,0 +1 @@
+export { default as BaseSwitch } from './index.vue'

package/src/components/BaseSwitch/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <n-switch v-bind="$attrs" :class="`base-switch ${className}`" :style="[extendStyle, style]">
+    <template v-for="(item,keys) in $slots" v-slot:[keys]>
+      <slot :name="keys"></slot>
+    </template>
+  </n-switch>
+</template>
+<script lang="ts" setup>
+import { CSSProperties, shallowRef, watch } from 'vue'
+import { useThemeVars } from 'naive-ui'
+import useNaiveConfigProvideContext from '../../hooks/useNaiveConfigProvideContext'
+type PropsType = {
+  className?: string;
+  style?: CSSProperties;
+}
+withDefaults(defineProps<PropsType>(), { className: '', style: () => ({}) })
+defineOptions({
+  name: 'BaseSwitch'
+})
+const NConfigProvider = useNaiveConfigProvideContext()
+const extendStyle = shallowRef({})
+
+watch(
+  () => NConfigProvider?.mergedThemeOverridesRef.value.Switch,
+  (curVal) => {
+    console.log(useThemeVars(), 'useThemeVars')
+    if (!curVal) return
+    extendStyle.value = {
+      '--n-rail-color-active-disabled': curVal.railColorActiveDisabled,
+      '--n-rail-color-disabled': curVal.railColorDisabled,
+      '--n-button-color-disabled': curVal.buttonColorDisabled,
+      '--n-button-color-active-disabled': curVal.buttonColorActiveDisabled
+    }
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+<style lang="scss" scoped>
+.base-switch {
+  :deep(.n-switch__button) {
+    box-shadow:
+      0px 5px 5px -3px #0000001A,
+      0px 8px 10px 1px #0000000F,
+      0px 3px 14px 2px #0000000D;
+
+  }
+  :deep(.n-switch__rail) {
+    opacity: 1;
+  }
+  &.n-switch--disabled {
+    :deep(.n-switch__rail) {
+      background-color: var(--n-rail-color-disabled);
+      .n-switch__button {
+        background-color: var(--n-button-color-disabled)
+      }
+    }
+    &.n-switch--active {
+      :deep(.n-switch__rail) {
+        background-color: var(--n-rail-color-active-disabled);
+        .n-switch__button {
+          background-color: var(--n-button-color-active-disabled)
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/index.ts

@@ -0,0 +1,11 @@
+export * from './AppProvider'
+export * from './BaseButton'
+export * from './BaseDataTable'
+export * from './BaseDialog'
+export * from './BaseInputNumber'
+export * from './BaseLayout'
+export * from './BaseRadio'
+export { default as BaseProgress } from './BaseProgress'
+export * from './BaseSelect'
+export * from './BaseSlider'
+export * from './BaseSwitch'

package/src/components/types/themes/extendThemes.ts

@@ -0,0 +1,50 @@
+export type ExtendThemeRadio = {
+  colorActiveDisabled?: string
+  boxShadowActiveDisabled?: string
+}
+
+export type ExtendThemeSwitch = {
+  railColorActiveDisabled?: string
+  railColorDisabled?: string
+  buttonColorActiveDisabled?: string
+  buttonColorDisabled?: string
+}
+
+export type ExtendThemeSlider = {
+  handleBorderStyle?: string
+  inputWidth?: string
+  rangeInputLineColor?: string
+  extremeValueTextColor?: string
+}
+
+export type ExtendInputNumber = {
+  controlsFontColor?: string
+  controlFontColorDisabled?: string
+
+  innerControlsLargeWidth?: string
+  innerControlsMediumWidth?: string
+  innerControlsSmallWidth?: string
+  innerControlsLargeHeight?: string
+  innerControlsMediumHeight?: string
+  innerControlsSmallHeight?: string
+  innerControlsBackground?: string
+  innerControlsDisabledBackground?: string
+  innerControlsLargeBorderRadius?: string
+  innerControlsMediumBorderRadius?: string
+  innerControlsSmallBorderRadius?: string
+
+  outerControlsBorderStyle?: string
+  outerControlsBackground?: string
+  outerControlsBorderStyleDisabled?: string
+  outerControlsBackgroundDisabled?: string
+  outerControlsOpacityDisabled?: number
+}
+
+export type ExtendProgress = {
+  circleWidthMedium?: string;
+  circleWidthLarge?: string;
+  fontSizeCircleMedium?: string;
+  fontSizeCircleLarge?: string;
+  tipColorCircle?: string;
+  tipFontSizeCircle?: string;
+}

package/src/config/index.ts

@@ -0,0 +1 @@
+export * from './themes/index'

package/src/config/themes/color/dark.ts

@@ -0,0 +1,60 @@
+const darkBase = {
+  // 主色
+  'color-primary-1': '#263658',
+  'color-primary-2': '#1D4184',
+  'color-primary-3': '#184391',
+  'color-primary-4': '#18429D',
+  'color-primary-5': '#296BD0',
+  'color-primary-6': '#3693FF',
+  'color-primary-7': '#3693FF',
+  'color-primary-8': '#BBD1FF',
+  'color-primary-9': '#CBDEFF',
+  'color-primary-10': '#E8F1FF',
+  // green
+  'color-green-1': '#163A2A',
+  'color-green-2': '#0D4934',
+  'color-green-3': '#005C3A',
+  'color-green-4': '#006D55',
+  'color-green-5': '#047D4C',
+  'color-green-6': '#10C278',
+  'color-green-7': '#6DD68E',
+  'color-green-8': '#91E9CA',
+  'color-green-9': '#C6F0E0',
+  'color-green-10': '#E7FFF8',
+  // red
+  'color-red-1': '#431B1B',
+  'color-red-2': '#5E201D',
+  'color-red-3': '#76201B',
+  'color-red-4': '#96241B',
+  'color-red-5': '#C82D25',
+  'color-red-6': '#EA4D44',
+  'color-red-7': '#EA4D44',
+  'color-red-8': '#FFD2CF',
+  'color-red-9': '#F9DAD8',
+  'color-red-10': '#FFEEEC',
+  // origin
+  'color-origin-1': '#3F260A',
+  'color-origin-2': '#703510',
+  'color-origin-3': '#9B5020',
+  'color-origin-4': '#A65519',
+  'color-origin-5': '#A74800',
+  'color-origin-6': '#FF9939',
+  'color-origin-7': '#F7A55D',
+  'color-origin-8': '#FFB677',
+  'color-origin-9': '#FFD59F',
+  'color-origin-10': '#FFF7D9',
+  // gray
+  'color-gray-1': '#161C28',
+  'color-gray-2': '#222833',
+  'color-gray-3': '#2F3A4B',
+  'color-gray-4': '#474E58',
+  'color-gray-5': '#818691',
+  'color-gray-6': '#9DA3AF',
+  'color-gray-7': '#AFB4BE',
+  'color-gray-8': '#C7CAD1',
+  'color-gray-9': '#E5E9EF',
+  'color-gray-10': '#F6F6F6',
+  'color-gray-11': '#636467'
+}
+
+export default darkBase

package/src/config/themes/color/index.ts

@@ -0,0 +1,2 @@
+export { default as darkBase } from './dark'
+export { default as lightBase } from './light'

package/src/config/themes/color/light.ts

@@ -0,0 +1,59 @@
+const lightBase = {
+  // 主色
+  'color-primary-1': '#ECF2FF',
+  'color-primary-2': '#DEEAFF',
+  'color-primary-3': '#BBD1FF',
+  'color-primary-4': '#A1BFFF',
+  'color-primary-5': '#4C8EFF',
+  'color-primary-6': '#0151FF',
+  'color-primary-7': '#0046DC',
+  'color-primary-8': '#003AB8',
+  'color-primary-9': '#003098',
+  'color-primary-10': '#002575',
+  // green
+  'color-green-1': '#EBFCF4',
+  'color-green-2': '#D6F8E6',
+  'color-green-3': '#C0ECD6',
+  'color-green-4': '#91E9BC',
+  'color-green-5': '#6ED9A5',
+  'color-green-6': '#0DAB63',
+  'color-green-7': '#059D5E',
+  'color-green-8': '#006D45',
+  'color-green-9': '#0D492B',
+  'color-green-10': '#213F26',
+  // red
+  'color-red-1': '#FFF0EF',
+  'color-red-2': '#F9DAD8',
+  'color-red-3': '#FFD2CF',
+  'color-red-4': '#FF989A',
+  'color-red-5': '#EF7173',
+  'color-red-6': '#EC352B',
+  'color-red-7': '#C82D25',
+  'color-red-8': '#96241B',
+  'color-red-9': '#5E201D',
+  'color-red-10': '#4B2C2C',
+  // origin
+  'color-origin-1': '#FFF5E8',
+  'color-origin-2': '#FFE5CD',
+  'color-origin-3': '#FFE3BF',
+  'color-origin-4': '#FFB677',
+  'color-origin-5': '#F7A55D',
+  'color-origin-6': '#F78821',
+  'color-origin-7': '#D25C02',
+  'color-origin-8': '#9A4C1B',
+  'color-origin-9': '#703510',
+  'color-origin-10': '#452009',
+  // gray
+  'color-gray-1': '#FAFAFA',
+  'color-gray-2': '#F3F6FC',
+  'color-gray-3': '#E0E6EF',
+  'color-gray-4': '#CAD3E2',
+  'color-gray-5': '#B0BACB',
+  'color-gray-6': '#8D9CAF',
+  'color-gray-7': '#657489',
+  'color-gray-8': '#56647A',
+  'color-gray-9': '#262D3E',
+  'color-gray-10': '#161C2A'
+}
+
+export default lightBase

package/src/config/themes/common.ts

@@ -0,0 +1,50 @@
+export const commonBase = {
+  borderRadiusLarge: '10px',
+  borderRadiusMedium: '10px',
+  borderRadiusSmall: '10px',
+
+  heightSmall: '28px',
+  heightMedium: '32px',
+  heightLarge: '40px',
+
+  fontSizeLarge: '14px',
+  fontSizeMedium: '14px',
+  fontSizeSmall: '12px',
+
+  // switch
+  buttonHeightSmall: '12px',
+  buttonHeightMedium: '16px',
+  buttonHeightLarge: '22px',
+  buttonWidthSmall: '12px',
+  buttonWidthMedium: '16px',
+  buttonWidthLarge: '22px',
+  buttonWidthPressedSmall: '20px',
+  buttonWidthPressedMedium: '24px',
+  buttonWidthPressedLarge: '28px',
+  railHeightSmall: '16px',
+  railHeightMedium: '24px',
+  railHeightLarge: '26px',
+  railWidthSmall: '28px',
+  railWidthMedium: '40px',
+  railWidthLarge: '48px',
+
+  // tag
+  tagBorderRadius: '6px',
+  tagHeightMedium: '22px',
+  tagHeightLarge: '26px',
+  paddingBase: '8px 12px',
+  iconSizeBase: '20px',
+
+  paddingMedium: '0 10px',
+  tabGapSmall: '24px',
+  tabGapMedium: '24px',
+  tabGapLarge: '24px',
+  /* 小尺寸Line类型水平内边距 */
+  tabPaddingSmall: '0 0 4px 0',
+  tabPaddingMedium: '0 0 4px 0',
+  tabPaddingLarge: '0 0 4px 0',
+
+  fontWeightNormal: '400',
+  fontWeightActive: '500',
+  tabBorderRadius: '19px'
+}

package/src/config/themes/components/alert/common.ts

@@ -0,0 +1,13 @@
+import { AlertProps } from 'naive-ui'
+import { commonBase } from '../../common'
+
+export const AlertThemeCommon: AlertProps['themeOverrides'] = {
+
+  borderRadius: commonBase.borderRadiusMedium,
+
+  fontSize: commonBase.fontSizeMedium,
+
+  iconSize: '16px',
+
+  iconMargin: '15px 8px 0 12px'
+}

package/src/config/themes/components/alert/dark.ts

@@ -0,0 +1,23 @@
+import { AlertProps } from 'naive-ui'
+import { darkBase } from '../../color'
+import { AlertThemeCommon } from './common'
+
+export const AlertThemeDark: AlertProps['themeOverrides'] = {
+  ...AlertThemeCommon,
+  colorInfo: darkBase['color-primary-1'],
+  colorSuccess: darkBase['color-green-1'],
+  colorError: darkBase['color-red-1'],
+  colorWarning: darkBase['color-origin-1'],
+
+  contentTextColorError: darkBase['color-gray-10'],
+  contentTextColorInfo: darkBase['color-gray-10'],
+  contentTextColorSuccess: darkBase['color-gray-10'],
+  contentTextColorWarning: darkBase['color-gray-10'],
+
+  iconColorInfo: darkBase['color-primary-6'],
+  iconColorError: darkBase['color-red-6'],
+  iconColorSuccess: darkBase['color-green-6'],
+  iconColorWarning: darkBase['color-origin-6'],
+
+  titleTextColor: darkBase['color-gray-10']
+}