fit2cloud-ui-plus 0.0.1-beta.16 → 0.0.1-beta.19

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,3 +1,4 @@
+@use 'sass:map';
 
 @forward 'element-plus/theme-chalk/src/common/var.scss' with (
   $colors: (
@@ -14,16 +15,37 @@
 );
 
 // fit2cloud ui variables
-$table-header-bgColor: #F5F6F7 !default;
+$fu-search-bar: () !default;
+$fu-search-bar: map.deep-merge(
+    (
+      'width': 100%,
+      'height': 48px,
+      'condition-color': #424242,
+      'condition-bgColor': #E6E6E6,
+    ),
+    $fu-search-bar
+);
+$fu-search-bar-width: map.get($fu-search-bar, 'width') !default;
+$fu-search-bar-height: map.get($fu-search-bar, 'height') !default;
+$fu-search-bar-condition-color: map.get($fu-search-bar, 'condition-color') !default;
+$fu-search-bar-condition-bgColor: map.get($fu-search-bar, 'condition-bgColor') !default;
 
-$fu-search-bar-width: 100% !default;
-$fu-search-bar-height: 48px !default;
-$fu-search-bar-condition-color: #424242 !default;
-$fu-search-bar-condition-bgColor: #E6E6E6 !default;
+$fu-filter-bar: () !default;
+$fu-filter-bar: map.deep-merge(
+    (
+      'color': #646A73,
+      'drawer-color': #646A73,
+      'condition-color': #0C296E,
+      'condition-bgColor': #3370FF19,
+      'option-bgColor': #F5F6F7,
+      'scroll-bgColor': #1F232919
+    ),
+    $fu-filter-bar
+);
 
-$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;
+$fu-filter-bar-color: map.get($fu-filter-bar, 'color') !default;
+$fu-filter-bar-drawer-color: map.get($fu-filter-bar, 'drawer-color') !default;
+$fu-filter-bar-condition-color: map.get($fu-filter-bar, 'condition-color') !default;
+$fu-filter-bar-condition-bgColor: map.get($fu-filter-bar, 'condition-bgColor') !default;
+$fu-filter-bar-option-bgColor: map.get($fu-filter-bar, 'option-bgColor') !default;
+$fu-filter-bar-scroll-bgColor: map.get($fu-filter-bar, 'scroll-bgColor') !default;

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;
@@ -23,7 +22,7 @@
   width: 240px;
   .el-input__prefix, .el-input__suffix {
     .el-input__icon {
-      color: $filter-color;
+      color: var(--fu-filter-bar-color);
       font-size: 14px
     }
   }
@@ -51,7 +50,7 @@
   }
 
   @include e(split) {
-    background-color: $filter-color;
+    background-color: var(--fu-filter-bar-color);
     height: 16px;
     width: 1px;
     margin: 2px 8px;
@@ -66,7 +65,7 @@
     margin: 0 2px;
 
     &:hover {
-      background: $filter-scroll-bgColor;
+      background: var(--fu-filter-bar-scroll-bgColor);
       border-radius: 4px;
     }
 
@@ -83,7 +82,7 @@
     height: 22px;
     min-width: 76px;
     max-width: 76px;
-    color: $filter-color;
+    color: var(--fu-filter-bar-color);
     cursor: pointer;
     margin-left: 6px;
   }
@@ -139,9 +138,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;
@@ -200,14 +199,14 @@
   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: var(--fu-filter-bar-condition-bgColor);
+    color: var(--fu-filter-bar-condition-color);
   }
 
   &:active {

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

@@ -60,11 +60,11 @@
     border-radius: 5px;
   }
 
-  @include m(medium) {
-    font-size: 14px;
+  @include m(large) {
+    font-size: 16px;
 
     @include e(item) {
-      height: 28px;
+      height: 32px;
     }
   }
 
@@ -76,14 +76,6 @@
     }
   }
 
-  @include m(mini) {
-    font-size: 12px;
-
-    @include e(item) {
-      height: 24px;
-    }
-  }
-
   @include e(item) {
     @include flex-row(flex-start, center);
     flex-shrink: 0;
@@ -127,15 +119,11 @@
   min-width: 200px;
   position: relative;
 
-  @include m(medium) {
-    font-size: 14px;
+  @include m(large) {
+    font-size: 16px;
   }
 
   @include m(small) {
-    font-size: 13px;
-  }
-
-  @include m(mini) {
     font-size: 12px;
   }
 
@@ -178,16 +166,14 @@
   }
 }
 
-@include b(complex-search) {
-  @include e(trigger) {
-    i {
-      transition: transform 0.2s;
-    }
+@include b(complex-components-trigger) {
+  i {
+    transition: transform 0.2s;
+  }
 
-    @include when(active) {
-      i {
-        transform: rotate(90deg);
-      }
+  @include when(active) {
+    i {
+      transform: rotate(90deg);
     }
   }
 }
@@ -206,36 +192,27 @@
   }
 }
 
-@include b(operator-component) {
-  @include flex-row(flex-start, center);
+@include b(complex-component) {
+  @include flex-row(space-between, center);
+  gap: 20px;
   padding: 5px;
 
+  @include e(content) {
+    flex: 1;
+  }
+
   @include e(label) {
-    text-align: left;
-    width: 120px;
+    width: 80px;
     padding: 0 5px;
     flex-grow: 0;
     flex-shrink: 0;
     font-size: inherit;
 
-    @include m(small) {
-      width: 100px;
-      font-size: 13px;
-    }
-
-    @include m(mini) {
-      width: 100px;
-      font-size: 12px;
+    @include m(large) {
+      font-size: 14px;
     }
   }
 
-  @include e(operator) {
-    padding: 0 5px;
-    width: 120px;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-
   @include e(value) {
     padding: 0 5px;
     flex-grow: 1;
@@ -245,41 +222,20 @@
 
 @include b(complex-select) {
   &.el-select {
-    width: 100% !important;
+    width: 100%;
   }
 }
 
-@include b(complex-data) {
+@include b(complex-date) {
   &.el-date-editor {
     width: 100% !important;
+    box-sizing: border-box;
   }
 }
 
-@include b(complex-data-time) {
+@include b(complex-date-time) {
   &.el-date-editor {
     width: 100% !important;
-  }
-}
-
-@include b(complex-input-number) {
-  margin-right: -10px;
-  display: flex;
-  align-items: center;
-
-  @include e(input) {
-    .is-hide {
-      .el-input-number__decrease {
-        visibility: hidden;
-      }
-
-      .el-input-number__increase {
-        visibility: hidden;
-      }
-    }
-
-  }
-
-  .range-separator {
-    margin: 0 8px
+    box-sizing: border-box;
   }
 }

package/src/styles/components/table.scss

@@ -3,7 +3,7 @@
 
 @include b(table) {
   &.el-table {
-    th.el-table-column--selection>.cell {
+    th.el-table-column--selection > .cell {
       padding-left: 14px;
       padding-right: 14px;
     }
@@ -15,7 +15,7 @@
 
 @include b(table-header) {
   th {
-    background-color: $table-header-bgColor !important;
+    background-color: var(--el-table-header-bg-color) !important;
     border-top: 1px solid var(--el-table-border-color);
     font-weight: 500 !important;;
   }
@@ -37,7 +37,7 @@
   }
 
   @include e(item) {
-    &+& {
+    & + & {
       margin-top: 5px;
     }
   }
@@ -60,13 +60,13 @@
 }
 
 @include b(table-operations) {
-  div[type='dialog']>.fu-search-bar-button {
+  div[type='dialog'] > .fu-search-bar-button {
     border: none;
   }
 }
 
 @include b(table-more-button) {
-  button+& {
+  button + & {
     margin-left: 12px;
     vertical-align: middle;
   }

package/src/styles/index.scss

@@ -2,9 +2,11 @@
 @use "element-plus/theme-chalk/src/index.scss" as *;
 @use "./components/speed-dial";
 @use "./components/filter-bar";
+@use "./components/search-bar";
 @use "./components/table";
 @use "./components/steps";
 @use "./components/read-write-switch";
 @use "./components/split-pane";
 @use "./components/tabs";
 @use "./components/virtual-scroller";
+@use "./var";

package/src/styles/var.scss

@@ -0,0 +1,8 @@
+@use "./common/mixins" as *;
+@use "./common/variables.scss" as *;
+
+: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);
+}

package/types/examples/pages/search/attributes.d.ts

@@ -0,0 +1,57 @@
+declare var _default: {
+    name: string;
+    children: ({
+        name: string;
+        header: {
+            prop: string;
+            desc: string;
+            type: string;
+            enum: string;
+            default: string;
+            event?: undefined;
+            value?: undefined;
+            name?: undefined;
+        };
+        table: {
+            prop: string;
+            desc: string;
+            type: string;
+            enum: string;
+            default: string;
+        }[];
+    } | {
+        name: string;
+        header: {
+            event: string;
+            desc: string;
+            value: string;
+            prop?: undefined;
+            type?: undefined;
+            enum?: undefined;
+            default?: undefined;
+            name?: undefined;
+        };
+        table: {
+            event: string;
+            desc: string;
+            value: string;
+        }[];
+    } | {
+        name: string;
+        header: {
+            name: string;
+            desc: string;
+            prop?: undefined;
+            type?: undefined;
+            enum?: undefined;
+            default?: undefined;
+            event?: undefined;
+            value?: undefined;
+        };
+        table: {
+            name: string;
+            desc: string;
+        }[];
+    })[];
+}[];
+export default _default;

package/types/examples/pages/search/demo/BaseSearchbar.vue.d.ts

@@ -0,0 +1,66 @@
+declare namespace _default {
+    const name: string;
+    function data(): {
+        components: ({
+            field: string;
+            label: string;
+            component: string;
+            options?: undefined;
+            change?: undefined;
+        } | {
+            field: string;
+            label: string;
+            component: string;
+            options: {
+                label: string;
+                value: string;
+            }[];
+            change: (val: any) => void;
+        } | {
+            field: string;
+            label: string;
+            component: string;
+            options: {
+                label: string;
+                value: string;
+            }[];
+            change?: undefined;
+        })[];
+        condition: {};
+    };
+    function data(): {
+        components: ({
+            field: string;
+            label: string;
+            component: string;
+            options?: undefined;
+            change?: undefined;
+        } | {
+            field: string;
+            label: string;
+            component: string;
+            options: {
+                label: string;
+                value: string;
+            }[];
+            change: (val: any) => void;
+        } | {
+            field: string;
+            label: string;
+            component: string;
+            options: {
+                label: string;
+                value: string;
+            }[];
+            change?: undefined;
+        })[];
+        condition: {};
+    };
+    namespace methods {
+        function close(): void;
+        function close(): void;
+        function search(condition: any): void;
+        function search(condition: any): void;
+    }
+}
+export default _default;

package/types/examples/pages/search/demo/ComplexComponentsDemo.vue.d.ts

@@ -0,0 +1,60 @@
+declare namespace _default {
+    const name: string;
+    function data(): {
+        options: {
+            label: string;
+            value: string;
+        }[];
+        components: ({
+            field: string;
+            label: string;
+            component: string;
+            options?: undefined;
+            multiple?: undefined;
+            filterable?: undefined;
+        } | {
+            field: string;
+            label: string;
+            component: string;
+            options: {
+                label: string;
+                value: string;
+            }[];
+            multiple: boolean;
+            filterable: boolean;
+        })[];
+        condition: {};
+    };
+    function data(): {
+        options: {
+            label: string;
+            value: string;
+        }[];
+        components: ({
+            field: string;
+            label: string;
+            component: string;
+            options?: undefined;
+            multiple?: undefined;
+            filterable?: undefined;
+        } | {
+            field: string;
+            label: string;
+            component: string;
+            options: {
+                label: string;
+                value: string;
+            }[];
+            multiple: boolean;
+            filterable: boolean;
+        })[];
+        condition: {};
+    };
+    namespace methods {
+        function initOptions(options: any, loading: any): void;
+        function initOptions(options: any, loading: any): void;
+        function search(condition: any): void;
+        function search(condition: any): void;
+    }
+}
+export default _default;