fit2cloud-ui-plus 0.0.1-beta.9 → 1.0.0-beta.1

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

@@ -1,8 +1,9 @@
-import { computed, ref, unref, getCurrentInstance } from 'vue'
-import { useGlobalConfig } from '../use-global-config'
-import type { ComputedRef } from 'vue'
-import type { ComponentSize } from '@/tools/size'
-import type { MaybeRef } from '@vueuse/core'
+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()!
@@ -27,3 +28,8 @@ export const useSize = (
   )
 }
 
+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' : #dddddd,
-    '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);
+  }
+}

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

@@ -0,0 +1,240 @@
+@use "../common/mixins.scss" as *;
+
+@include b(search-bar) {
+  @include flex-row(flex-start, center);
+  position: relative;
+  width: var(--fu-search-bar-width);
+  height: var(--fu-search-bar-height);
+
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    width: 100%;
+    background-color: #D5D5D5;
+  }
+
+  @include e(content) {
+    @include flex-row(flex-start, center);
+    margin-right: 10px;
+    height: 100%;
+  }
+
+  @include e(buttons) {
+    @include flex-row(flex-end, center);
+    flex: auto;
+    height: 100%;
+  }
+
+  @include b(quick-search) {
+    &:after {
+      content: none;
+    }
+  }
+}
+
+@include b(search-bar-button) {
+  &.el-button {
+    @include active-scale(0.9);
+  }
+}
+
+@include b(search-conditions) {
+  @include flex-row(flex-start, center);
+  overflow-x: auto;
+  overflow-y: hidden;
+  height: calc(100% - 2px);
+
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 5px;
+  }
+
+  @include m(large) {
+    font-size: 16px;
+
+    @include e(item) {
+      height: 32px;
+    }
+  }
+
+  @include m(small) {
+    font-size: 13px;
+
+    @include e(item) {
+      height: 26px;
+    }
+  }
+
+  @include e(item) {
+    @include flex-row(flex-start, center);
+    flex-shrink: 0;
+    position: relative;
+    box-sizing: border-box;
+    padding: 0 10px;
+    border-radius: 50px;
+    color: var(--fu-search-bar-condition-color);
+    background-color: var(--fu-search-bar-condition-bgColor);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
+    margin-left: 10px;
+    font-size: inherit;
+
+    &:last-child {
+      margin-right: 10px;
+    }
+
+    div + div {
+      margin-left: 4px;
+    }
+
+    .condition-value {
+      font-style: italic;
+    }
+
+    .condition-remove {
+      @include active-scale(0.9);
+      margin-left: 6px;
+      margin-right: -6px;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+}
+
+@include b(quick-search) {
+  @include flex-row(flex-start, center);
+  min-width: 200px;
+  position: relative;
+
+  @include m(large) {
+    font-size: 16px;
+  }
+
+  @include m(small) {
+    font-size: 12px;
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    width: 100%;
+    background-color: #D5D5D5;
+  }
+
+  input {
+    border: none;
+    position: relative;
+    font-size: inherit;
+    padding: 10px;
+    width: 200px;
+    box-sizing: border-box;
+    color: var(--el-input-text-color);
+    background-color: var(--el-input-bg-color);
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--el-text-color-placeholder);
+    }
+  }
+
+  .clean-button {
+    @include active-scale;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+}
+
+@include b(complex-components-trigger) {
+  i {
+    transition: transform 0.2s;
+  }
+
+  @include when(active) {
+    i {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+@include b(complex-components) {
+  @include e(body) {
+    width: 100%;
+    margin: 5px;
+    min-width: 200px;
+  }
+
+  @include e(footer) {
+    width: 100%;
+    text-align: center;
+    margin: 5px 0;
+  }
+}
+
+@include b(complex-component) {
+  @include flex-row(space-between, center);
+  gap: 20px;
+  padding: 5px;
+
+  @include e(content) {
+    flex: 1;
+  }
+
+  @include e(label) {
+    width: 80px;
+    padding: 0 5px;
+    flex-grow: 0;
+    flex-shrink: 0;
+    font-size: inherit;
+
+    @include m(large) {
+      font-size: 14px;
+    }
+  }
+
+  @include e(value) {
+    padding: 0 5px;
+    flex-grow: 1;
+    min-width: 240px;
+  }
+}
+
+@include b(complex-select) {
+  &.el-select {
+    width: 100%;
+  }
+}
+
+@include b(complex-date) {
+  &.el-date-editor {
+    width: 100% !important;
+    box-sizing: border-box;
+  }
+}
+
+@include b(complex-date-time) {
+  &.el-date-editor {
+    width: 100% !important;
+    box-sizing: border-box;
+  }
+}

package/src/styles/components/speed-dial.scss

@@ -1,38 +1,6 @@
 @use "../common/mixins.scss" as *;
 @use "../common/variables.scss" as *;
 
-// @mixin speed-dial-button-variant($color, $background-color) {
-//   color: $color;
-//   background-color: $background-color;
-
-//   &:hover,
-//   &:focus {
-//     background: mix($--color-white, $background-color, $--button-hover-tint-percent);
-//     color: $color;
-//   }
-
-//   &:active {
-//     background: mix($--color-black, $background-color, $--button-active-shade-percent);
-//     color: $color;
-//     outline: none;
-//   }
-
-//   &.is-active {
-//     background: mix($--color-black, $background-color, $--button-active-shade-percent);
-//     color: $color;
-//   }
-
-//   &.is-disabled {
-//     &,
-//     &:hover,
-//     &:focus,
-//     &:active {
-//       color: $--color-white;
-//       background-color: mix($background-color, $--color-white);
-//     }
-//   }
-// }
-
 @include b(speed-dial) {
   width: 0;
 
@@ -47,6 +15,7 @@
   box-sizing: border-box;
   cursor: pointer;
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
+  padding: 0;
   @include active-scale(0.9);
 
   @include m(rotate) {
@@ -60,25 +29,6 @@
       }
     }
   }
-
-  // @include m(default) {
-  //   @include speed-dial-button-variant($--button-default-font-color, $--button-default-background-color);
-  // }
-  // @include m(primary) {
-  //   @include speed-dial-button-variant($--button-primary-font-color, $--button-primary-background-color);
-  // }
-  // @include m(success) {
-  //   @include speed-dial-button-variant($--button-success-font-color, $--button-success-background-color);
-  // }
-  // @include m(warning) {
-  //   @include speed-dial-button-variant($--button-warning-font-color, $--button-warning-background-color);
-  // }
-  // @include m(danger) {
-  //   @include speed-dial-button-variant($--button-danger-font-color, $--button-danger-background-color);
-  // }
-  // @include m(info) {
-  //   @include speed-dial-button-variant($--button-info-font-color, $--button-info-background-color);
-  // }
 }
 
 @include b(speed-dial-item) {