base6-ui 1.1.1 → 1.1.2

package/src/components/BaseInputNumber/index.vue

@@ -1,188 +0,0 @@
-<template>
-  <div class="base-input-number" :class="[`base-input-number--${size}`]" :style="[extendStyle, style]">
-    <n-button v-if="!controlsInner" :style="extendButtonStyle" :ghost="!disabledMinus" class="outer-controls minus-btn"
-      v-bind="$attrs" :disabled="disabledMinus" :size="size" @click="handleMinus">
-      <svg-icon icon="operate-minus" />
-    </n-button>
-    <n-input-number v-bind="$attrs" ref="inputNumberRef" :show-button="false" :size="size" :disabled="disabled"
-      :min="min" :max="max" v-model:value="currentValue">
-      <template v-if="$slots.prefix || prefixIcon" #prefix>
-        <slot v-if="$slots.prefix" name="prefix" />
-        <svg-icon v-else :icon="prefixIcon" />
-      </template>
-      <template #suffix>
-        <template v-if="$slots.suffix || suffixIcon">
-          <slot v-if="$slots.suffix" name="suffix" />
-          <svg-icon v-else :icon="suffixIcon" />
-        </template>
-        <div class="inner-controls" v-if="controlsInner">
-          <div class="add" :class="[disabledAdd ? 'is-disabled' : '']" @click="handleAdd">
-            <svg-icon icon="arrow-top" />
-          </div>
-          <div class="minus" :class="[disabledMinus ? 'is-disabled' : '']" @click="handleMinus">
-            <svg-icon icon="arrow-down" />
-          </div>
-        </div>
-      </template>
-    </n-input-number>
-    <n-button v-if="!controlsInner" :size="size" :ghost="!disabledAdd" :style="extendButtonStyle"
-      class="outer-controls add-btn" v-bind="$attrs" :disabled="disabledAdd" @click="handleAdd">
-      <svg-icon icon="operate-add" />
-    </n-button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, CSSProperties, ref, shallowRef, watch } from 'vue'
-import useNaiveConfigProvideContext from '../../hooks/useNaiveConfigProvideContext'
-
-type PropsType = {
-  style?: CSSProperties;
-  prefixIcon?: string;
-  suffixIcon?: string;
-  addIcon?: string;
-  minusIcon?: string;
-  controlsInner?: boolean
-  disabled?: boolean
-  min?: number
-  max?: number
-  value: number
-  size?: 'small' | 'medium' | 'large'
-}
-const props = withDefaults(defineProps<PropsType>(), { prefixIcon: '', suffixIcon: '', addIcon: '', minusIcon: '', size: 'medium' })
-
-defineOptions({
-  name: 'BaseInputNumber'
-})
-const emits = defineEmits(['update:value'])
-
-const { mergedThemeOverridesRef } = useNaiveConfigProvideContext()
-const extendStyle = shallowRef({})
-const extendButtonStyle = shallowRef({})
-const inputNumberRef = ref()
-const currentValue = computed({
-  get() { return props.value },
-  set(value) { emits('update:value', value) }
-})
-const disabledAdd = computed(() => props.disabled || !inputNumberRef.value?.addable)
-const disabledMinus = computed(() => props.disabled || !inputNumberRef.value?.minusable)
-
-const handleAdd = () => {
-  if (!inputNumberRef.value || disabledAdd.value) return
-  inputNumberRef.value.handleAddClick()
-}
-const handleMinus = () => {
-  if (!inputNumberRef.value || disabledMinus.value) return
-  inputNumberRef.value.handleMinusClick()
-}
-
-watch(
-  () => mergedThemeOverridesRef?.value?.InputNumber,
-  (curVal) => {
-    extendStyle.value = {
-      '--n-input-number-controls-color': curVal.controlsFontColor,
-      '--n-input-number-controls-color-disabled': curVal.controlFontColorDisabled,
-      '--n-input-number-inner-controls-width-large': curVal.innerControlsLargeWidth,
-      '--n-input-number-inner-controls-width-medium': curVal.innerControlsMediumWidth,
-      '--n-input-number-inner-controls-width-small': curVal.innerControlsSmallWidth,
-      '--n-input-number-inner-controls-height-large': curVal.innerControlsLargeHeight,
-      '--n-input-number-inner-controls-height-medium': curVal.innerControlsMediumHeight,
-      '--n-input-number-inner-controls-height-small': curVal.innerControlsSmallHeight,
-      '--n-input-number-inner-controls-background': curVal.innerControlsBackground,
-      '--n-input-number-inner-controls-background-disabled': curVal.innerControlsDisabledBackground,
-      '--n-input-number-inner-controls-border-radius-large': curVal.innerControlsLargeBorderRadius,
-      '--n-input-number-inner-controls-border-radius-medium': curVal.innerControlsMediumBorderRadius,
-      '--n-input-number-inner-controls-border-radius-small': curVal.innerControlsSmallBorderRadius
-    }
-    extendButtonStyle.value = {
-      '--n-border': curVal.outerControlsBorderStyle,
-      '--n-border-disabled': curVal.outerControlsBorderStyleDisabled,
-      '--n-text-color': curVal.controlsFontColor,
-      '--n-text-color-disabled': curVal.controlFontColorDisabled,
-      '--n-color': curVal.outerControlsBackground,
-      '--n-color-disabled': curVal.outerControlsBackgroundDisabled,
-      '--n-opacity-disabled': curVal.outerControlsOpacityDisabled
-
-    }
-  },
-  {
-    immediate: true
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-.base-input-number {
-  display: flex;
-  align-items: center;
-
-  &.base-input-number--large {
-    .inner-controls>div {
-      width: var(--n-input-number-inner-controls-width-large);
-      height: var(--n-input-number-inner-controls-height-large);
-      border-radius: var(--n-input-number-inner-controls-border-radius-large);
-    }
-  }
-
-  &.base-input-number--medium {
-    .inner-controls>div {
-      width: var(--n-input-number-inner-controls-width-medium);
-      height: var(--n-input-number-inner-controls-height-medium);
-      border-radius: var(--n-input-number-inner-controls-border-radius-medium);
-    }
-  }
-
-  &.base-input-number--small {
-    .inner-controls>div {
-      width: var(--n-input-number-inner-controls-width-small);
-      height: var(--n-input-number-inner-controls-height-small);
-      border-radius: var(--n-input-number-inner-controls-border-radius-small);
-    }
-  }
-
-  .inner-controls {
-    display: flex;
-    flex-direction: column;
-
-    .add {
-      margin-bottom: 2px;
-    }
-
-    .add,
-    .minus {
-      background-color: var(--n-input-number-inner-controls-background);
-      cursor: pointer;
-      color: var(--n-input-number-controls-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &.is-disabled {
-        cursor: not-allowed;
-        background-color: var(--n-input-number-inner-controls-background-disabled);
-        color: var(--n-input-number-controls-color-disabled);
-      }
-
-      &:hover {
-        scale: 1.1;
-      }
-    }
-  }
-
-  .minus-btn,
-  .add-btn {
-    border-radius: 10px;
-    padding: 0;
-    width: var(--n-height);
-  }
-
-  .minus-btn {
-    margin-right: 4px;
-  }
-
-  .add-btn {
-    margin-left: 4px;
-  }
-
-}
-</style>

package/src/components/BaseLayout/ASide/index.vue

@@ -1,104 +0,0 @@
-<template>
-  <aside
-    class="h-full w-full flex-col-stretch base-layout-aside"
-    :style="extendStyle"
-    v-bind="$attrs"
-  >
-    <div
-      :class="['base-layout-aside-logo-wrap', logoClass]"
-      :style="[extendLogoStyle, logoStyle]"
-    >
-      <slot name="header"></slot>
-    </div>
-    <div class="flex-1 overflow-hidden">
-      <n-scrollbar>
-        <slot name="default" />
-      </n-scrollbar>
-    </div>
-    <div
-      :class="['base-layout-aside-footer', footerClass]"
-      :style="[footerLogoStyle, footerStyle]"
-    >
-      <slot name="footer"></slot>
-    </div>
-  </aside>
-</template>
-<script lang="ts" setup>
-import { shallowRef, watch } from 'vue'
-import useNaiveConfigProvideContext from '../../../hooks/useNaiveConfigProvideContext'
-import { BaseLayoutASidePropsType } from './type'
-const { mergedThemeOverridesRef } = useNaiveConfigProvideContext()
-
-withDefaults(defineProps<BaseLayoutASidePropsType>(), { })
-
-const extendStyle = shallowRef({})
-const extendLogoStyle = shallowRef({})
-const footerLogoStyle = shallowRef({})
-
-watch(
-  () => mergedThemeOverridesRef?.value?.Layout,
-  (curVal) => {
-    if (!curVal) return
-    extendStyle.value = {
-      '--n-color': curVal.siderColor || undefined
-    }
-    // extendLogoStyle.value = {
-    //   '--n-icon-color': curVal.siderIconColor || '#0151FF'
-    // }
-    // const menu = mergedThemeOverridesRef?.value?.Menu
-    // footerLogoStyle.value = {
-    //   '--n-icon-color': menu.itemIconColorCollapsed || '#56647A',
-    //   '--n-icon-bg-color': curVal.siderFooterIconBgColor || '#4C4C4F'
-    // }
-  },
-  {
-    immediate: true
-  }
-)
-</script>
-<style lang="scss" scoped>
-.base-layout-aside {
-  background-color: var(--n-color);
-  padding: 24px 0;
-
-  &-logo-wrap {
-    display: flex;
-    justify-content: center;
-    color: var(--n-icon-color);
-    padding-bottom: 32px;
-  }
-
-  &-footer {}
-
-  :deep(.n-menu.n-menu--vertical.n-menu--collapsed) {
-    .n-menu-item {
-      height: 56px;
-      &-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        padding: 0 20px !important;
-        overflow: hidden;
-        &::before {
-          left: 16px;
-          right: 16px;
-        }
-        &__icon {
-          margin: 0 !important;
-        }
-        &-header {
-          opacity: 1;
-          width: 100%;
-          overflow: hidden;
-          text-align: center;
-        }
-        &__arrow {
-          display: none;
-        }
-      }
-    }
-  }
-}
-</style>

package/src/components/BaseLayout/ASide/type.ts

@@ -1,11 +0,0 @@
-import { CSSProperties } from 'vue'
-
-export type BaseLayoutASidePropsType = {
-  logoClass?: string;
-  logoStyle?: CSSProperties;
-  // logoSize?: number;
-
-  footerClass?: string;
-  footerStyle?: CSSProperties;
-  // footerIconSize?: number
-}

package/src/components/BaseLayout/index.ts

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

package/src/components/BaseProgress/index.ts

@@ -1,99 +0,0 @@
-/* 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

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

package/src/components/BaseRadio/index.vue

@@ -1,45 +0,0 @@
-<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

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

package/src/components/BaseSelect/index.vue

@@ -1,59 +0,0 @@
-<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

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

package/src/components/BaseSlider/index.vue

@@ -1,114 +0,0 @@
-<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

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