base6-ui 1.1.1

package/src/components/BaseButton/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <n-button v-bind="$attrs">
+    <template v-if="$slots.icon || icon" #icon>
+      <slot v-if="$slots.icon" name="icon" />
+      <svg-icon v-else :icon="icon" />
+    </template>
+    <template v-if="$slots.default || content" #default>
+      <slot v-if="$slots.default" />
+      <span v-else>{{ content }}</span>
+    </template>
+  </n-button>
+</template>
+
+<script setup lang="ts">
+type PropsType = {
+  icon?: string;
+  content?: string;
+}
+
+withDefaults(defineProps<PropsType>(), { icon: '' })
+</script>

package/src/components/BaseDataTable/index.ts

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

package/src/components/BaseDataTable/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <n-card class="base-data-table" size="small" :bordered="false">
+    <div ref="dataTableWrapRef" class="w-full" :class="dataTableWrapClass">
+      <n-data-table
+        class="base-data-table"
+        v-bind="$attrs"
+        :bordered="bordered"
+        :columns="columns"
+        :data="data"
+        :max-height="maxHeight"
+        :min-height="minHeight"
+        :pagination="pagination"
+        :single-column="singleColumn"
+        :striped="striped"
+        table-layout="fixed"
+      />
+    </div>
+  </n-card>
+</template>
+<script lang="ts" setup>
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  useTemplateRef
+} from 'vue'
+import { DataTableProps } from 'naive-ui'
+
+type PropsType = {
+  columns: DataTableProps['columns']
+  data: DataTableProps['data']
+  tableScroll?: boolean
+  pagination: DataTableProps['pagination']
+  bordered: DataTableProps['bordered']
+  singleColumn: DataTableProps['singleColumn'],
+  striped: DataTableProps['striped']
+}
+defineOptions({
+  inheritAttrs: false
+})
+
+const maxHeight = ref<number | undefined>(0)
+const minHeight = ref<number | undefined>(0)
+const dataTableWrapRef = useTemplateRef('dataTableWrapRef')
+
+const props = withDefaults(defineProps<PropsType>(), {
+  bordered: true,
+  tableScroll: true,
+  columns: undefined,
+  data: undefined,
+  pagination: false,
+  singleColumn: false,
+  striped: false
+})
+
+const dataTableWrapClass = computed(() => {
+  const classList: Array<string> = []
+  if (props.tableScroll) classList.push('h-full overflow-hidden table-scroll')
+  return classList
+})
+
+const calcMaxHeight = () => {
+  if (!dataTableWrapRef.value) return
+  if (!props.tableScroll) {
+    maxHeight.value = undefined
+    minHeight.value = undefined
+  }
+  else {
+    const headerDom = document.getElementsByClassName('n-data-table-base-table-header')[0] as HTMLDivElement
+    const paginationDom = document.getElementsByClassName('n-data-table__pagination')[0] as HTMLDivElement
+    let otherHeight = 0
+    console.log(dataTableWrapRef.value.offsetHeight, 'headerDom')
+    if (headerDom) otherHeight += headerDom.offsetHeight
+    if (paginationDom) otherHeight += paginationDom.offsetHeight + 12
+    const wrapHeight = dataTableWrapRef.value.offsetHeight - otherHeight
+    maxHeight.value = wrapHeight
+    minHeight.value = wrapHeight
+  }
+}
+
+const handleWindowResize = async () => {
+  maxHeight.value = 0
+  minHeight.value = 0
+  await nextTick()
+  calcMaxHeight()
+}
+
+onMounted(() => {
+  calcMaxHeight()
+  window.addEventListener('resize', handleWindowResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleWindowResize)
+})
+</script>
+<style lang="scss" scoped>
+.base-data-table {
+  display: flex;
+  flex: 1;
+  &-content.n-data-table {
+    :deep(.n-data-table-th) {
+      .n-data-table-th__title-wrapper .n-data-table-th__title {
+        flex: none;
+      }
+      &.n-data-table-th--filterable {
+        display: flex;
+      }
+      .n-data-table-filter {
+        position: relative;
+        width: auto;
+        margin-left: 4px;
+        background-color: transparent;
+      }
+    }
+  }
+}
+</style>

package/src/components/BaseDialog/index.ts

@@ -0,0 +1,2 @@
+export { default as BaseDialog } from './index.vue'
+export { type BaseDialogPropsType } from './type'

package/src/components/BaseDialog/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <n-modal
+    v-model:show="showModel"
+    :maskClosable="maskClosable"
+    :closeOnEsc="closeOnEsc"
+    v-bind="$attrs"
+  >
+    <n-card
+      :header-style="cardHeadStyle"
+      :style="cardStyle"
+      :size="cardSize"
+      :closable="closable"
+      :segmented="{ content: true }"
+      v-bind="$attrs"
+    >
+      <template v-if="$slots.header || title" #header>
+        <slot v-if="$slots.header" name="header" />
+        <span style="margin: 0 auto;" v-else>{{ title }}</span>
+      </template>
+      <template v-if="$slots['header-extra'] || showHeaderExtra" #header-extra>
+        <slot v-if="$slots['header-extra']" name="header-extra" />
+        <svg-icon v-else icon="operate-close" class="cursor-pointer active:scale-[0.95] text-[18px]" @click="handleCancel" />
+      </template>
+      <slot />
+      <template v-if="$slots.footer || showFooter" #footer>
+        <slot v-if="$slots.footer" name="footer" />
+        <div v-else class="gap-[30px]" :class="footerClass">
+          <BaseButton
+            :icon="cancelIcon"
+            :icon-placement="cancelIconPlacement"
+            :color="cancelColor"
+            :text-color="cancelTextColor"
+            :content="cancelBtnText"
+            :round="btnRound"
+            :size="btnSize"
+            :type="cancelType"
+            @click="handleCancel"
+          />
+          <BaseButton
+            :icon="confirmIcon"
+            :icon-placement="confirmIconPlacement"
+            :color="confirmColor"
+            :text-color="confirmTextColor"
+            :content="confirmBtnText"
+            :round="btnRound"
+            :size="btnSize"
+            :type="confirmType"
+            @click="handleConfirm"
+          />
+        </div>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties } from 'vue'
+import { defaultProps } from './options'
+import { BaseDialogPropsType } from './type'
+import { BaseButton } from '../BaseButton'
+
+type PropsType = BaseDialogPropsType
+const emits = defineEmits(['update:visible', 'cancel', 'confirm'])
+const props = withDefaults(defineProps<PropsType>(), defaultProps)
+const cardStyle = computed<CSSProperties>(() => {
+  return {
+    width: `${props.width}`,
+    position: 'fixed',
+    left: '50%',
+    top: `${props.top}`,
+    transform: 'translateX(-50%)'
+  }
+})
+
+const cardHeadStyle = computed<CSSProperties>(() => ({
+  lineHeight: '28px',
+  textAlign: `${props.center ? 'center' : 'left'}`
+}))
+
+const footerClass = computed(() => {
+  if (props.btnPlacement === 'center') return 'flex-c'
+  return 'flex justify-end'
+})
+
+const showModel = computed({
+  get: () => props.visible,
+  set: (value: boolean) => {
+    emits('update:visible', value)
+  }
+})
+
+const handleCancel = () => {
+  showModel.value = false
+  emits('cancel')
+}
+
+const handleConfirm = () => {
+  emits('confirm')
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/BaseDialog/options.ts

@@ -0,0 +1,25 @@
+import { BaseDialogPropsType } from './type'
+export const defaultProps: BaseDialogPropsType = {
+  visible: false,
+  width: '1000px',
+  title: undefined,
+  top: '10vh',
+  cardSize: 'medium',
+  center: true,
+  closable: false,
+  showHeaderExtra: true,
+  showFooter: true,
+  closeOnEsc: false,
+  maskClosable: false,
+  cancelBtnText: 'Cancel',
+  confirmBtnText: 'Confirm',
+  cancelIcon: '',
+  confirmIcon: '',
+  cancelIconPlacement: 'left',
+  confirmIconPlacement: 'left',
+  cancelType: 'default',
+  confirmType: 'primary',
+  btnPlacement: 'center',
+  btnRound: true,
+  btnSize: 'small'
+}

package/src/components/BaseDialog/type.ts

@@ -0,0 +1,30 @@
+import { ModalProps, CardProps, ButtonProps } from 'naive-ui'
+
+export type BaseDialogPropsType = {
+  visible: boolean
+  width?: string
+  top?: string
+  title?: CardProps['title']
+  cardSize?: CardProps['size']
+  center?: boolean;
+  closable?: CardProps['closable']
+  showHeaderExtra?: boolean
+  showFooter?: boolean
+  maskClosable?: ModalProps['maskClosable']
+  closeOnEsc?: ModalProps['closeOnEsc']
+  cancelBtnText?: string;
+  confirmBtnText?: string;
+  cancelColor?: ButtonProps['color'];
+  confirmColor?: ButtonProps['color'];
+  cancelTextColor?: ButtonProps['textColor'];
+  confirmTextColor?: ButtonProps['textColor'];
+  cancelIcon?: string;
+  confirmIcon?: string;
+  cancelIconPlacement?: ButtonProps['iconPlacement'];
+  confirmIconPlacement?: ButtonProps['iconPlacement'];
+  cancelType?: ButtonProps['type'],
+  confirmType?: ButtonProps['type'],
+  btnPlacement?: 'center' | 'right';
+  btnRound?: boolean;
+  btnSize?: ButtonProps['size'];
+}

package/src/components/BaseInputNumber/index.ts

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

package/src/components/BaseInputNumber/index.vue

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

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

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

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