fit2cloud-ui-plus 0.0.1-beta.8 → 1.0.0-beta.2

package/src/components/table/table-column-select/FuTableColumnSelectDialog.vue

@@ -1,6 +1,5 @@
 <template>
   <div style="display: inline-block">
-    <!-- :size="configSize"  -->
     <el-button class="fu-search-bar-button" :icon="icon" @click="visible = true">{{ t('fu.table.custom_table_rows') }}
     </el-button>
     <el-dialog custom-class="fu-table-column-select-dialog" v-model="visible" @open="open" append-to-body>
@@ -34,17 +33,12 @@
 import { ref, inject } from "vue";
 import { tableColumnSelect } from "./utils"
 import { useLocale } from "@/hooks"
-
+import { LocalKey } from "../types";
 const props = defineProps({
   icon: {
     type: String,
     default: "Setting"
   },
-  trigger: {
-    type: String,
-    default: "hover",
-    validator: (value: string) => ['click', 'hover'].includes(value)
-  },
   columns: {
     type: Array,
     default: () => []
@@ -52,7 +46,7 @@ const props = defineProps({
 
 })
 
-const localKey = inject("localKey")
+const localKey = inject(LocalKey, undefined)
 
 const { t } = useLocale()
 
@@ -90,7 +84,7 @@ function ok() {
 }
 
 function reset() {
-  if (columnsKey) {
+  if (columnsKey.value) {
     localStorage.removeItem(columnsKey.value)
   }
   props.columns.splice(0, props.columns.length)

package/src/components/table/table-column-select/FuTableColumnSelectPopover.vue

@@ -1,6 +1,6 @@
 <template>
   <el-popover class="fu-table-column-select" popper-class="fu-table-column-select-popper" :trigger="trigger"
-    :show-arrow="false" v-show="hasSelect">
+    :show-arrow="false" :style="{'visibility': hasSelect ? 'visible': 'hidden'}">
     <h3>
       {{ t('fu.table.custom_table_fields') }}
     </h3>
@@ -22,7 +22,6 @@
     <template #reference>
       <el-button class="fu-search-bar-button" :icon="icon">{{ t('fu.table.custom_table_rows') }}</el-button>
     </template>
-    <!-- :size="configSize" -->
   </el-popover>
 </template>
 
@@ -30,6 +29,7 @@
 import { computed, inject } from "vue";
 import { tableColumnSelect } from "./utils"
 import { useLocale } from "@/hooks"
+import { LocalKey } from "../types";
 
 const props = defineProps({
   icon: {
@@ -50,7 +50,8 @@ const props = defineProps({
 
 const { t } = useLocale()
 
-const localKey = inject("localKey")
+const localKey = inject(LocalKey, undefined)
+
 
 const {
   columnsKey,

package/src/components/table/table-operations/FuTableButton.vue

@@ -6,11 +6,8 @@
   </el-tooltip>
 </template>
 <script lang="ts" setup>
+defineOptions({ name: "FuTableButton" });
 defineProps({
-  size: {
-    type: String,
-    default: "default"
-  },
   label: String,
   disabled: Boolean,
   icon: Boolean,

package/src/components/table/table-operations/FuTableMoreButton.vue

@@ -23,7 +23,7 @@ import { computed } from "vue";
 import { useLocale } from "@/hooks"
 import { PropType } from "vue";
 import { DropdownProps } from "@/tools/types";
-
+defineOptions({ name: "FuTableMoreButton" });
 const { t } = useLocale()
 const props = defineProps({
   row: Object,

package/src/components/table/table-operations/FuTableOperations.vue

@@ -26,7 +26,6 @@ import FuTableMoreButton from "./FuTableMoreButton.vue";
 
 defineOptions({ name: "FuTableOperations" });
 const props = defineProps({
-  // columns: Array,
   align: {
     type: String,
     default: "center"
@@ -35,7 +34,7 @@ const props = defineProps({
   minWidth: [String, Number],
   ellipsis: { // 超过几个按钮时显示省略号，如果只超过一个也不显示省略号
     type: Number,
-    default: 3
+    default: 2
   },
   buttons: {
     type: Array,

package/src/components/table/types.ts

@@ -0,0 +1,3 @@
+import {InjectionKey} from "vue";
+
+export const LocalKey: InjectionKey<string | undefined> = Symbol('LocalKey')

package/src/components/tabs/FuTabs.vue

@@ -1,13 +1,12 @@
 <template>
   <el-tabs class="fu-tabs" :before-leave="beforeLeave" :editable="false" :addable="false" v-bind="$attrs">
-    <slot></slot>
-    <el-tab-pane name="add" key="add" v-if="addable">
+      <el-tab-pane name="add" key="add" v-if="addable" :lazy="true">
       <template #label>
         <slot name="add">
           <!-- 下拉方式 -->
           <el-dropdown @command="handleCommand" v-if="addType === 'dropdown'" :trigger="addTrigger">
             <slot name="dropdownButton">
-              <el-button type="primary" plain>
+              <el-button type="primary" plain >
                 <el-icon>
                   <component :is="addIcon" />
                 </el-icon>
@@ -34,6 +33,8 @@
         </slot>
       </template>
     </el-tab-pane>
+    <slot />
+
   </el-tabs>
 </template>
 

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
-
 export * from './use-global-config'
 export * from './use-locale'
+export * from './use-size'
+

package/src/hooks/use-global-config/index.ts

@@ -1,28 +1,17 @@
-import { computed, getCurrentInstance, inject, ref } from 'vue'
-// import { configProviderContextKey } from '@element-plus/tokens'
-// import type { Ref } from 'vue'
-// import type { ConfigProviderContext } from '@element-plus/tokens'
+import {computed, getCurrentInstance, inject, provide, InjectionKey, Ref, ref, App, unref} from 'vue'
+import {MaybeRef} from "@vueuse/core";
 
-// this is meant to fix global methods like `ElMessage(opts)`, this way we can inject current locale
-// into the component as default injection value.
-// refer to: https://github.com/element-plus/element-plus/issues/2610#issuecomment-887965266
 const globalConfig = ref()
 
-// export function useGlobalConfig<
-//   K extends keyof ConfigProviderContext,
-//   D extends ConfigProviderContext[K]
-// >(
-//   key: K,
-//   defaultValue?: D
-// ): Ref<Exclude<ConfigProviderContext[K], undefined> | D>
-// export function useGlobalConfig(): Ref<ConfigProviderContext>
-export function useGlobalConfig(
-  key?: keyof any,
-  defaultValue = undefined
-) {
-  const config = getCurrentInstance()
-    ? inject( Symbol(), globalConfig)
-    : globalConfig
+export const globalConfigKey: InjectionKey<Ref<GlobalConfig>> = Symbol('GlobalConfigKey')
+
+export interface GlobalConfig {
+  size?: string,
+  locale?: any
+}
+
+export function useGlobalConfig(key?: keyof any, defaultValue = undefined) {
+  const config = getCurrentInstance() ? inject(globalConfigKey, globalConfig) : globalConfig
   if (key) {
     return computed(() => config.value?.[key] ?? defaultValue)
   } else {
@@ -30,3 +19,17 @@ export function useGlobalConfig(
   }
 }
 
+export const provideGlobalConfig = (config: MaybeRef<GlobalConfig>, app?: App) => {
+  const inSetup = !!getCurrentInstance()
+  const provideFn = app?.provide ?? (inSetup ? provide : undefined)
+  const context = computed(() => {
+    return unref(config)
+  })
+  provideFn?.(globalConfigKey, context)
+  if (!globalConfig.value) {
+    globalConfig.value = context.value
+  }
+
+  return context
+}
+

package/src/hooks/use-locale/index.ts

@@ -1,7 +1,7 @@
 import { computed, isRef, ref, unref } from 'vue'
 import { get } from 'lodash-unified'
 import Chinese from '@/locale/lang/zh-cn'
-import { useGlobalConfig } from '../use-global-config'
+import { useGlobalConfig } from '@/hooks'
 import type { MaybeRef } from '@vueuse/core'
 import type { Ref } from 'vue'
 import type { Language } from '@/locale'

package/src/hooks/use-size/index.ts

@@ -0,0 +1,35 @@
+import {computed, getCurrentInstance, ref, unref} from 'vue'
+import {useGlobalConfig} from '@/hooks'
+import type {ComputedRef} from 'vue'
+import type {ComponentSize} from '@/tools/size'
+import {validateSize} from "@/tools/size";
+import {MaybeRef} from "@vueuse/core";
+
+export const useProp = <T>(name: string): ComputedRef<T | undefined> => {
+  const vm = getCurrentInstance()!
+  return computed(() => (vm.proxy?.$props as any)[name] ?? undefined)
+}
+
+export const useSize = (
+  fallback?: MaybeRef<ComponentSize | undefined>,
+  ignore: Partial<Record<'prop' | 'global', boolean>> = {}
+) => {
+  const emptyRef = ref(undefined)
+
+  const size = ignore.prop ? emptyRef : useProp<ComponentSize>('size')
+  const globalConfig = ignore.global ? emptyRef : useGlobalConfig('size')
+
+  return computed(
+    (): ComponentSize =>
+      size.value ||
+      unref(fallback) ||
+      globalConfig.value ||
+      ''
+  )
+}
+
+export const useSizeProp = {
+  type: String,
+  validator: validateSize,
+}
+

package/src/index.ts

@@ -1,13 +1,16 @@
 import PackageJSON from "../package.json"
 
-import type { App } from 'vue'
+import type {App} from 'vue'
+import {GlobalConfig, provideGlobalConfig} from "@/hooks";
+
 const components = import.meta.globEager('@/components/*/index.ts');
 
-const install = (app: App): void => {
+const install = (app: App, config: GlobalConfig): void => {
   Object.keys(components).forEach(key => {
     let component = components[key].default;
     app.use(component)
   })
+  provideGlobalConfig(config)
 }
 
 const plugin = {

package/src/styles/common/function.scss

@@ -43,7 +43,7 @@
 }
 
 // join var name
-// joinVarName(('button', 'text-color')) => '--el-button-text-color'
+// joinVarName(('button', 'text-color')) => '--fu-button-text-color'
 @function joinVarName($list) {
   $name: '--' + config.$namespace;
   @each $item in $list {
@@ -54,17 +54,17 @@
   @return $name;
 }
 
-// getCssVarName('button', 'text-color') => '--el-button-text-color'
+// getCssVarName('button', 'text-color') => '--fu-button-text-color'
 @function getCssVarName($args...) {
   @return joinVarName($args);
 }
 
-// getCssVar('button', 'text-color') => var(--el-button-text-color)
+// getCssVar('button', 'text-color') => var(--fu-button-text-color)
 @function getCssVar($args...) {
   @return var(#{joinVarName($args)});
 }
 
-// bem('block', 'element', 'modifier') => 'el-block__element--modifier'
+// bem('block', 'element', 'modifier') => 'fu-block__element--modifier'
 @function bem($block, $element: '', $modifier: '') {
   $name: config.$namespace + config.$common-separator + $block;
 
@@ -79,3 +79,13 @@
   // @debug $name;
   @return $name;
 }
+
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

package/src/styles/common/mixins.scss

@@ -1,8 +1,4 @@
 @use 'function' as *;
-@use 'variables' as *;
-// forward mixins
-@forward 'config';
-@forward 'function';
 @use 'config' as *;
 
 // BEM
@@ -83,3 +79,12 @@
   }
 }
 
+@mixin set-css-var($name, $value) {
+  #{joinVarName($name)}: #{$value};
+}
+
+@mixin set-component-css-var($name, $variables) {
+  @each $attribute, $value in $variables {
+    #{getCssVarName($name, $attribute)}: #{$value};
+  }
+}

package/src/styles/common/variables.scss

@@ -1,24 +1,61 @@
+@use 'sass:map';
+@use "./mixins" as *;
+@use 'element-plus/theme-chalk/src/common/var.scss' as *;
 
-@forward 'element-plus/theme-chalk/src/common/var.scss' with (
-  $colors: (
-    'primary': (
-      'base': #004A71,
+// fit2cloud ui variables
+$condition: () !default;
+$condition: map.deep-merge(
+    (
+      'color': #646A73,
+      'bgColor': #F5F6F7,
     ),
-  ),
-  $table: (
-    'border-color' : rgba(31, 35, 41, 0.15),
-    'header-text-color': '#646A73',
-    'text-color': '#1F2329',
+    $condition
+);
 
-  )
+$fu-search-bar: () !default;
+$fu-search-bar: map.deep-merge(
+    (
+      'width': 100%,
+      'height': 48px,
+      'condition-color': map-get($condition, "color"),
+      'condition-bgColor': map-get($condition, "bgColor"),
+    ),
+    $fu-search-bar
 );
 
-// fit2cloud ui variables
-$table-header-bgColor: #F5F6F7 !default;
+$fu-filter-bar: () !default;
+$fu-filter-bar: map.deep-merge(
+    (
+      'color': map-get($condition, "color"),
+      'drawer-color': map-get($condition, "color"),
+      'condition-color': map-get($condition, "color"),
+      'condition-bgColor': map-get($condition, "bgColor"),
+      'option-bgColor': map-get($condition, "bgColor"),
+      'option-hover-bgColor': rgba($color-primary, 10%),
+      'scroll-bgColor': mix(#000, map-get($condition, "bgColor"), 15%),
+    ),
+    $fu-filter-bar
+);
+
+$fu-icon-button: () !default;
+$fu-icon-button: map.deep-merge(
+    (
+      'color': map-get($text-color, "primary"),
+      'bgColor': transparent,
+      'hover-color': map-get($fu-icon-button, "color"),
+      'hover-bgColor': rgba(map-get($fu-icon-button, "color"), 0.1),
+      'active-color': map-get($fu-icon-button, "color"),
+      'active-bgColor': rgba(map-get($fu-icon-button, "color"), 0.2),
+      'disabled-color': #BBBFC4,
+      'disabled-bgColor': transparent,
+      'gap': 12px,
+    ),
+    $fu-icon-button
+);
 
-$filter-color: #646A73 !default;
-$filter-drawer-color: #646A73 !default;
-$filter-condition-color: #0C296E !default;
-$filter-condition-bgColor: rgba(51, 112, 255, 0.1) !default;
-$filter-option-bgColor:  #F5F6F7 !default;
-$filter-scroll-bgColor:  rgba(31, 35, 41, 0.1) !default;
+:root {
+  // 遍历组件变量，例如: --fu-search-bar-{key}: {value}
+  @include set-component-css-var('search-bar', $fu-search-bar);
+  @include set-component-css-var('filter-bar', $fu-filter-bar);
+  @include set-component-css-var('icon-button', $fu-icon-button);
+}

package/src/styles/components/filter-bar.scss

@@ -1,5 +1,4 @@
 @use "../common/mixins.scss" as *;
-@use "../common/variables.scss" as *;
 
 @include b(filter-bar) {
   border-radius: 4px;
@@ -19,19 +18,18 @@
   }
 }
 
-@include b(search-input) {
+@include b(filter-input) {
   width: 240px;
-  margin-right: 10px;
   .el-input__prefix, .el-input__suffix {
     .el-input__icon {
-      color: $filter-color;
+      color: var(--fu-filter-bar-color);
       font-size: 14px
     }
   }
+}
 
-  .el-icon-circle-close:before {
-    content: "\e79d"
-  }
+@include b(filter-button) {
+  margin-left: 12px;
 }
 
 @include b(filter) {
@@ -48,7 +46,7 @@
   }
 
   @include e(split) {
-    background-color: $filter-color;
+    background-color: var(--fu-filter-bar-color);
     height: 16px;
     width: 1px;
     margin: 2px 8px;
@@ -63,7 +61,7 @@
     margin: 0 2px;
 
     &:hover {
-      background: $filter-scroll-bgColor;
+      background: var(--fu-filter-bar-scroll-bgColor);
       border-radius: 4px;
     }
 
@@ -80,7 +78,7 @@
     height: 22px;
     min-width: 76px;
     max-width: 76px;
-    color: $filter-color;
+    color: var(--fu-filter-bar-color);
     cursor: pointer;
     margin-left: 6px;
   }
@@ -111,7 +109,7 @@
       bottom: 0;
       width: 100%;
       height: 72px;
-      padding: 0 24px;
+      right: 20px;
       display: flex;
       justify-content: flex-end;
       align-items: center;
@@ -136,9 +134,9 @@
     padding: 1px 6px;
     box-sizing: border-box;
     height: 24px;
-    background-color: $filter-condition-bgColor;
+    background-color: var(--fu-filter-bar-condition-bgColor);
     border-radius: 2px;
-    color: $filter-condition-color;
+    color: var(--fu-filter-bar-condition-color);
 
     & + & {
       margin-left: 8px;
@@ -197,14 +195,13 @@
   padding: 1px 6px;
   font-size: 14px;
   line-height: 22px;
-  background-color: $filter-option-bgColor;
+  background-color: var(--fu-filter-bar-option-bgColor);
   border-radius: 2px;
   cursor: pointer;
   margin: 6px;
 
   &.is-selected, &:hover {
-    background: $filter-condition-bgColor;
-    color: $filter-condition-color;
+    background-color: var(--fu-filter-bar-option-hover-bgColor);
   }
 
   &:active {
@@ -221,6 +218,9 @@
 
 @include b(scale-click) {
   cursor: pointer;
+  &:hover, &:focus {
+    opacity: 0.8;
+  }
   &:active {
     transform: scale(0.9)
   }

package/src/styles/components/icon-button.scss

@@ -0,0 +1,66 @@
+@use "../common/mixins.scss" as *;
+@use 'element-plus/theme-chalk/src/common/var.scss' as *;
+
+@mixin set-type-css-var($color) {
+  @include set-component-css-var('icon-button', (
+    'color': $color,
+    'bgColor': transparent,
+    'hover-color': $color,
+    'hover-bgColor': rgba($color, 0.1),
+    'active-color': $color,
+    'active-bgColor': rgba($color, 0.2),
+  ));
+}
+
+@include b(icon-button) {
+  @include flex-row(center, center);
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  color: var(--fu-icon-button-color);
+  background-color: var(--fu-icon-button-bgColor);
+
+  &:not(.is-disabled) {
+    &:hover, &:focus {
+      color: var(--fu-icon-button-hover-color);
+      background-color: var(--fu-icon-button-hover-bgColor);
+    }
+
+    &:active {
+      color: var(--fu-icon-button-active-color);
+      background-color: var(--fu-icon-button-active-bgColor);
+    }
+  }
+
+  &.is-disabled {
+    color: var(--fu-icon-button-disabled-color);
+    background-color: var(--fu-icon-button-disabled-bgColor);
+    cursor: not-allowed;
+    pointer-events: none;
+
+    .el-icon {
+      color: var(--fu-icon-button-disabled-color);
+    }
+  }
+
+  @include m(primary) {
+    @include set-type-css-var($color-primary);
+  }
+  @include m(success) {
+    @include set-type-css-var($color-success);
+  }
+  @include m(warning) {
+    @include set-type-css-var($color-warning);
+  }
+  @include m(danger) {
+    @include set-type-css-var($color-danger);
+  }
+  @include m(info) {
+    @include set-type-css-var($color-info);
+  }
+
+  & + & {
+    margin-left: var(--fu-icon-button-gap);
+  }
+}