fit2cloud-ui-plus 0.0.1-beta.17 → 0.0.1-beta.18

package/src/components/search-bar/FuSearchBarButton.vue

@@ -1,22 +1,20 @@
 <template>
   <el-tooltip :content="tooltip" :disabled="!tooltip">
-    <el-button class="fu-search-bar-button" circle :size="size" v-bind="$attrs">
-      <slot></slot>
-    </el-button>
+    <el-button class="fu-search-bar-button" circle :size="size" v-bind="$attrs"/>
   </el-tooltip>
 </template>
 
-<script>
+
+<script setup lang="ts">
 import {validateSize} from "@/tools/size";
 
-export default {
-  name: "FuSearchBarButton",
-  props: {
-    size: {
-      type: String,
-      validator: validateSize
-    },
-    tooltip: String
-  }
-}
+defineOptions({name: "FuSearchBarButton"});
+
+const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
+  tooltip: String
+})
 </script>

package/src/components/search-bar/FuSearchContions.vue

@@ -1,29 +1,37 @@
 <template>
-  <div :class="['fu-search-conditions', 'fu-search-conditions--' + configSize]">
-    <div class="fu-search-conditions__item" v-for="(condition, index) in conditions" :key="index">
+  <div :class="['fu-search-conditions', 'fu-search-conditions--' + size]">
+    <div class="fu-search-conditions__item" v-for="(condition, index) in conditions">
       <div v-if="condition.label">{{ condition.label }}</div>
-      <div v-if="condition.operatorLabel">{{ condition.operatorLabel }}</div>
       <div class="condition-value">{{ condition.valueLabel }}</div>
-      <i class="el-icon-close condition-remove" @click="remove(index)"/>
+      <el-icon class="condition-remove" @click="remove(index)">
+        <Close/>
+      </el-icon>
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import {PropType} from "vue";
+import {ComplexCondition} from "./types";
+import {validateSize} from "@/tools/size";
 
-import ConfigSize from "@/mixins/config-size";
+defineOptions({name: "FuSearchConditions"});
 
-export default {
-  name: "FuSearchConditions",
-  mixins: [ConfigSize],
-  props: {
-    conditions: Array
+const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
   },
-  methods: {
-    remove(index) {
-      this.conditions.splice(index, 1)
-      this.$emit("change", this.conditions)
-    }
+  conditions: {
+    type: Array as PropType<ComplexCondition[]>,
+    required: true
   }
+})
+
+const emit = defineEmits<{ (e: 'change', conditions: Array<ComplexCondition>): void }>()
+
+function remove(index: number) {
+  props.conditions.splice(index, 1)
+  emit("change", props.conditions)
 }
 </script>

package/src/components/search-bar/complex-components/FuComplexDate.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="fu-filter-component">
-    <div class="fu-filter-component__label">{{ label }}</div>
-    <div class="fu-filter-component__content">
-      <!--configSize-->
-      <el-date-picker class="fu-filter-date" v-model="value" v-bind="$attrs" :size="size"
+  <div class="fu-complex-component">
+    <div class="fu-complex-component__label">{{ label }}</div>
+    <div class="fu-complex-component__content">
+      <el-date-picker class="fu-complex-date" v-model="value" v-bind="$attrs" :size="size"
                       :placeholder="t('fu.search_bar.select_date')" type="daterange" :value-format="valueFormat"
                       :start-placeholder="t('fu.search_bar.start_date')" :end-placeholder="t('fu.search_bar.end_date')">
       </el-date-picker>
@@ -40,7 +39,7 @@ const value = ref('')
 const valueLabel = computed(() => {
   return (
     dateFormat(value.value[0]) +
-    " - " +
+    " ~ " +
     dateFormat(value.value[1])
   );
 })

package/src/components/search-bar/complex-components/FuComplexDateTime.vue

@@ -1,24 +1,27 @@
 <template>
-  <div class="fu-filter-component">
-    <div class="fu-filter-component__label">{{ label }}</div>
-    <div class="fu-filter-component__content">
+  <div class="fu-complex-component">
+    <div class="fu-complex-component__label">{{ label }}</div>
+    <div class="fu-complex-component__content">
       <!-- :size="configSize"  -->
-      <el-date-picker class="fu-filter-date" v-model="value" v-bind="$attrs" :size="size"
-        :placeholder="t('fu.search_bar.select_date_time')" type="datetimerange" :value-format="valueFormat"
-        :start-placeholder="t('fu.search_bar.start_date_time')" :end-placeholder="t('fu.search_bar.end_date_time')">
+      <el-date-picker class="fu-complex-date-time" v-model="value" v-bind="$attrs" :size="size"
+                      :placeholder="t('fu.search_bar.select_date_time')" type="datetimerange"
+                      :value-format="valueFormat"
+                      :start-placeholder="t('fu.search_bar.start_date_time')"
+                      :end-placeholder="t('fu.search_bar.end_date_time')">
       </el-date-picker>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, inject } from "vue";
-import { ComplexCondition, ReferenceContext, referenceKey } from "../types";
-import { datetimeFormat } from "@/tools/time";
-import { useLocale } from "@/hooks"
-import { validateSize } from "@/tools/size";
-defineOptions({ name: "FuComplexDateTime" });
-const { t } = useLocale()
+import {ref, computed, inject} from "vue";
+import {ComplexCondition, ReferenceContext, referenceKey} from "../types";
+import {datetimeFormat} from "@/tools/time";
+import {useLocale} from "@/hooks"
+import {validateSize} from "@/tools/size";
+
+defineOptions({name: "FuComplexDateTime"});
+const {t} = useLocale()
 
 const props = defineProps({
   size: {
@@ -41,15 +44,15 @@ const value = ref('')
 const valueLabel = computed(() => {
   return (
     datetimeFormat(value.value[0]) +
-    " - " +
+    " ~ " +
     datetimeFormat(value.value[1])
   );
 })
 
 function getCondition(): ComplexCondition | undefined {
   if (!String(value.value)) return;
-  let { field, label } = props
-  return { field, label, value: value.value, valueLabel: valueLabel.value }
+  let {field, label} = props
+  return {field, label, value: value.value, valueLabel: valueLabel.value}
 }
 
 function init(v: any) {
@@ -58,7 +61,7 @@ function init(v: any) {
 
 const references = inject(referenceKey)
 const field = props.field
-const reference: ReferenceContext = { field, init, getCondition }
+const reference: ReferenceContext = {field, init, getCondition}
 references?.value.push(reference)
 
 defineExpose({

package/src/components/search-bar/complex-components/FuComplexInput.vue

@@ -1,5 +1,10 @@
 <template>
-  <el-input v-model="inputValue" :placeholder="t('fu.search_bar.please_input')" :size="size" v-bind="$attrs"/>
+  <div class="fu-complex-component">
+    <div class="fu-complex-component__label">{{ label }}</div>
+    <div class="fu-complex-component__content">
+      <el-input v-model="inputValue" :placeholder="t('fu.search_bar.please_input')" :size="size" v-bind="$attrs"/>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -8,7 +13,7 @@ import {ComplexCondition, ReferenceContext, referenceKey} from "../types";
 import {validateSize} from "@/tools/size";
 import {useLocale} from "@/hooks"
 
-defineOptions({name: "FuFilterSelect"});
+defineOptions({name: "FuComplexInput"});
 
 const props = defineProps({
   size: {

package/src/components/search-bar/complex-components/FuComplexSelect.vue

@@ -1,12 +1,17 @@
 <template>
-  <el-select class="fu-complex-select"
-             :placeholder="t('fu.search_bar.please_select')"
-             v-model="selection"
-             :size="size"
-             v-bind="$attrs"
-             clearable>
-    <el-option v-for="o in options" :key="o.value" :label="o.label" :value="o.value"></el-option>
-  </el-select>
+  <div class="fu-complex-component">
+    <div class="fu-complex-component__label">{{ label }}</div>
+    <div class="fu-complex-component__content">
+      <el-select class="fu-complex-select"
+                 :placeholder="t('fu.search_bar.please_select')"
+                 v-model="selection"
+                 :size="size"
+                 v-bind="$attrs"
+                 clearable>
+        <el-option v-for="o in options" :key="o.value" :label="o.label" :value="o.value"></el-option>
+      </el-select>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -15,7 +20,7 @@ import {ComplexCondition, OptionProps, ReferenceContext, referenceKey} from "../
 import {validateSize} from "@/tools/size";
 import {useLocale} from "@/hooks"
 
-defineOptions({name: "FuFilterSelect"});
+defineOptions({name: "FuComplexSelect"});
 
 const props = defineProps({
   size: {

package/src/components/search-bar/index.ts

@@ -0,0 +1,20 @@
+import FuSearchBar from "./FuSearchBar.vue";
+import FuQuickSearch from "./FuQuickSearch.vue";
+import FuSearchBarButton from "./FuSearchBarButton.vue";
+import FuComplexSelect from "./complex-components/FuComplexSelect.vue";
+import FuComplexInput from "./complex-components/FuComplexInput.vue";
+import FuComplexDate from "./complex-components/FuComplexDate.vue";
+import FuComplexDateTime from "./complex-components/FuComplexDateTime.vue";
+import type {App} from "vue";
+
+FuSearchBar.install = (app: App): void => {
+  app.component(FuQuickSearch.name, FuQuickSearch);
+  app.component(FuSearchBar.name, FuSearchBar);
+  app.component(FuSearchBarButton.name, FuSearchBarButton);
+  app.component(FuComplexSelect.name, FuComplexSelect);
+  app.component(FuComplexInput.name, FuComplexInput);
+  app.component(FuComplexDate.name, FuComplexDate);
+  app.component(FuComplexDateTime.name, FuComplexDateTime);
+};
+
+export default FuSearchBar;

package/src/components/search-bar/types.ts

@@ -5,7 +5,7 @@ export const referenceKey = Symbol('ReferenceKey') as unknown as InjectionKey<Re
 export interface ReferenceContext {
   field: string,
 
-  init(v: any): void
+  init(v?: any): void
 
   getCondition(): ComplexCondition | undefined
 }

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;
   }