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

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

@@ -0,0 +1,86 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import {ref, computed, PropType, inject} from "vue";
+import {ComplexCondition, OptionProps, ReferenceContext, referenceKey} from "../types";
+import {validateSize} from "@/tools/size";
+import {useLocale} from "@/hooks"
+
+defineOptions({name: "FuFilterSelect"});
+
+const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  label: String,
+  field: {
+    type: String,
+    required: true
+  },
+  options: {
+    type: Array as PropType<OptionProps[]>,
+    default: []
+  }
+})
+
+const selection = ref<Array<string | number> | string | number>(props.multiple ? [] : '')
+
+const valueLabel = computed(() => {
+  if (Array.isArray(selection.value)) {
+    let values: any = []
+    selection.value.forEach((v: any) => {
+      values.push(getValueLabel(v))
+    })
+    return values.join(", ");
+  }
+  return getValueLabel(selection.value);
+})
+
+const emit = defineEmits<{ (e: 'init'): void }>()
+
+const {t} = useLocale()
+
+function getValueLabel(value: string | number) {
+  for (let o of props.options) {
+    if (o.value === value) {
+      return o.label
+    }
+  }
+  return value
+}
+
+function getCondition(): ComplexCondition | undefined {
+  if (!selection.value || (Array.isArray(selection.value) && selection.value.length === 0)) return;
+  let {field, label} = props
+  return {field, label, value: selection.value, valueLabel: valueLabel.value}
+}
+
+function init(v: any) {
+  selection.value = v !== undefined ? v : props.multiple ? [] : ''
+  emit("init")
+}
+
+const references = inject(referenceKey)
+const field = props.field
+const reference: ReferenceContext = {field, init, getCondition}
+references?.value.push(reference)
+
+defineExpose({
+  getCondition,
+  init,
+})
+</script>

package/src/components/search-bar/complex-components/index.js

@@ -0,0 +1,16 @@
+import locale from "@/locale";
+
+const components = require.context('./', true, /\.vue$/)
+
+const FuComplexComponents = {
+  install: function (Vue, opts = {}) {
+    locale.use(opts.locale);
+    locale.i18n(opts.i18n);
+    components.keys().map(key => {
+      const component = components(key).default
+      Vue.component(component.name, component);
+    })
+  }
+}
+
+export default FuComplexComponents;

package/src/components/search-bar/complex-components/mixins.js

@@ -0,0 +1,26 @@
+import Locale from "@/mixins/locale";
+import ConfigSize from "@/mixins/config-size";
+import {ComplexCondition} from "@/components/search-bar/model";
+
+export default {
+  props: ConfigSize.props,
+  methods: {
+    ...Locale.methods,
+    createCondition(value, operator) {
+      this.value = value
+      this.operator = operator
+      return this.getCondition()
+    }
+  },
+  computed: {
+    ...ConfigSize.computed,
+    operatorLabel() {
+      for (let operator of this.operators) {
+        if (operator.value === this.operator) {
+          return this.t(operator.label)
+        }
+      }
+      return this.operator
+    },
+  }
+};

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

@@ -0,0 +1,16 @@
+import FuSearchBar from "./FuSearchBar"
+import FuQuickSearch from "./FuQuickSearch"
+import FuSearchBarButton from "./FuSearchBarButton"
+import FuComplexComponents from "./complex-components"
+import locale from "@/locale"
+
+FuSearchBar.install = function (Vue, opts = {}) {
+  locale.use(opts.locale)
+  locale.i18n(opts.i18n)
+  Vue.component(FuSearchBar.name, FuSearchBar)
+  Vue.component(FuSearchBarButton.name, FuSearchBarButton)
+  Vue.component(FuQuickSearch.name, FuQuickSearch)
+  Vue.use(FuComplexComponents)
+}
+
+export default FuSearchBar

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

@@ -0,0 +1,23 @@
+import {InjectionKey, Ref} from "vue";
+
+export const referenceKey = Symbol('ReferenceKey') as unknown as InjectionKey<Ref<ReferenceContext[]>>
+
+export interface ReferenceContext {
+  field: string,
+
+  init(v: any): void
+
+  getCondition(): ComplexCondition | undefined
+}
+
+export interface OptionProps {
+  label: string
+  value: string | number
+}
+
+export interface ComplexCondition {
+  field: string
+  label?: string
+  value: any
+  valueLabel?: string
+}

package/src/components/table/index.d.ts

@@ -0,0 +1,2 @@
+import FuTable from "./FuTable.vue";
+export default FuTable;

package/src/components/table/table-column-select/utils.d.ts

@@ -0,0 +1,8 @@
+export declare const tableColumnSelect: (localKey: any) => {
+    columnsKey: import("vue").ComputedRef<string>;
+    dragstart: (event: DragEvent, index: any) => void;
+    dragenter: (event: DragEvent) => void;
+    dragleave: (event: DragEvent) => void;
+    dragend: (event: DragEvent) => void;
+    drop: (event: DragEvent, list: any, index: number) => void;
+};

package/src/components/table/types.d.ts

@@ -0,0 +1,2 @@
+import { InjectionKey } from "vue";
+export declare const LocalKey: InjectionKey<string | undefined>;

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

@@ -0,0 +1 @@
+export declare function useGlobalConfig(key?: keyof any, defaultValue?: undefined): import("vue").Ref<any>;

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

@@ -0,0 +1,14 @@
+import type { MaybeRef } from '@vueuse/core';
+import type { Ref } from 'vue';
+import type { Language } from '@/locale';
+export declare type TranslatorOption = Record<string, string | number>;
+export declare type Translator = (path: string, option?: TranslatorOption) => string;
+export declare type LocaleContext = {
+    locale: Ref<Language>;
+    lang: Ref<string>;
+    t: Translator;
+};
+export declare const buildTranslator: (locale: MaybeRef<Language>) => Translator;
+export declare const translate: (path: string, option: undefined | TranslatorOption, locale: Language) => string;
+export declare const buildLocaleContext: (locale: MaybeRef<Language>) => LocaleContext;
+export declare const useLocale: () => LocaleContext;

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

@@ -0,0 +1,5 @@
+import type { ComputedRef } from 'vue';
+import type { ComponentSize } from '@/tools/size';
+import type { MaybeRef } from '@vueuse/core';
+export declare const useProp: <T>(name: string) => ComputedRef<T | undefined>;
+export declare const useSize: (fallback?: MaybeRef<ComponentSize | undefined>, ignore?: Partial<Record<'prop' | 'global', boolean>>) => ComputedRef<string>;

package/src/styles/common/variables.scss

@@ -16,6 +16,11 @@
 // fit2cloud ui variables
 $table-header-bgColor: #F5F6F7 !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;
+
 $filter-color: #646A73 !default;
 $filter-drawer-color: #646A73 !default;
 $filter-condition-color: #0C296E !default;

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

@@ -19,9 +19,8 @@
   }
 }
 
-@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;
@@ -34,6 +33,10 @@
   // }
 }
 
+@include b(filter-button) {
+  margin-left: 12px;
+}
+
 @include b(filter) {
   display: flex;
   align-items: center;
@@ -111,7 +114,7 @@
       bottom: 0;
       width: 100%;
       height: 72px;
-      padding: 0 24px;
+      right: 20px;
       display: flex;
       justify-content: flex-end;
       align-items: center;

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

@@ -0,0 +1,285 @@
+@use "../common/mixins.scss" as *;
+@use "../common/variables.scss" as *;
+
+@include b(search-bar) {
+  @include flex-row(flex-start, center);
+  position: relative;
+  width: $fu-search-bar-width;
+  height: $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(medium) {
+    font-size: 14px;
+
+    @include e(item) {
+      height: 28px;
+    }
+  }
+
+  @include m(small) {
+    font-size: 13px;
+
+    @include e(item) {
+      height: 26px;
+    }
+  }
+
+  @include m(mini) {
+    font-size: 12px;
+
+    @include e(item) {
+      height: 24px;
+    }
+  }
+
+  @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: $fu-search-bar-condition-color;
+    background-color: $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(medium) {
+    font-size: 14px;
+  }
+
+  @include m(small) {
+    font-size: 13px;
+  }
+
+  @include m(mini) {
+    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-input-placeholder-color);
+    }
+  }
+
+  .clean-button {
+    @include active-scale;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+}
+
+@include b(complex-search) {
+  @include e(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(operator-component) {
+  @include flex-row(flex-start, center);
+  padding: 5px;
+
+  @include e(label) {
+    text-align: left;
+    width: 120px;
+    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 e(operator) {
+    padding: 0 5px;
+    width: 120px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  @include e(value) {
+    padding: 0 5px;
+    flex-grow: 1;
+    min-width: 240px;
+  }
+}
+
+@include b(complex-select) {
+  &.el-select {
+    width: 100% !important;
+  }
+}
+
+@include b(complex-data) {
+  &.el-date-editor {
+    width: 100% !important;
+  }
+}
+
+@include b(complex-data-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
+  }
+}

package/src/styles/components/table.scss

@@ -67,7 +67,8 @@
 
 @include b(table-more-button) {
   button+& {
-    margin-left: 10px;
+    margin-left: 12px;
+    vertical-align: middle;
   }
 }
 

package/types/examples/pages/table/demo/TablePagination.vue.d.ts

@@ -1,2 +1,2 @@
-declare var _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/src/components/filter-bar/FuSearchInput.vue

@@ -1,37 +0,0 @@
-<template>
-  <el-input class="fu-search-input" prefix-icon="Search" v-model="quick" @input="input" @blur="blur" @keydown="keydown"
-    v-bind="$attrs" clearable :size="size"/>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import { validateSize } from "@/tools/size";
-defineOptions({ name: "FuSearchInput" });
-
-const props = defineProps({
-  size: {
-    type: String,
-    validator: validateSize
-  },
-  value: String,
-})
-const emit = defineEmits(["input", "change"])
-const quick = ref("")
-
-watch(() => props.value, (val: any) => {
-  quick.value = val
-})
-
-function input(e: Event) {
-  emit("input", quick.value, e)
-}
-function blur(e: Event) {
-  emit("change", quick.value, e)
-}
-function keydown(e: Event) {
-  const event = e as KeyboardEvent
-  if (event.key === "Enter") {
-    emit("change", quick.value, e)
-  }
-}
-</script>