fit2cloud-ui-plus 0.0.1-beta.1 → 0.0.1-beta.12

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

@@ -2,24 +2,28 @@
   <div class="fu-filter-component">
     <div class="fu-filter-component__label">{{ label }}</div>
     <div class="fu-filter-component__content">
-      <!-- :size="configSize"  -->
-      <el-date-picker class="fu-filter-date" v-model="value" v-bind="$attrs"
-                      :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')">
+      <!--configSize-->
+      <el-date-picker class="fu-filter-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>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {ref, computed, inject} from "vue";
-import {FilterCondition, ReferenceContext, referenceKey} from "../types";
-import {dateFormat} from "@/tools/time";
-import {useLocale} from "@/hooks"
+import { ref, computed, inject } from "vue";
+import { FilterCondition, ReferenceContext, referenceKey } from "../types";
+import { dateFormat } from "@/tools/time";
+import { useLocale } from "@/hooks"
+import { validateSize } from "@/tools/size";
 defineOptions({ name: "FuFilterDate" });
-const {t} = useLocale()
-
+const { t } = useLocale()
 const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
   label: String,
   field: {
     type: String,
@@ -42,8 +46,8 @@ const valueLabel = computed(() => {
 
 function getCondition(): FilterCondition | 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) {
@@ -52,7 +56,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/filter-bar/filter-components/FuFilterDateTime.vue

@@ -3,25 +3,28 @@
     <div class="fu-filter-component__label">{{ label }}</div>
     <div class="fu-filter-component__content">
       <!-- :size="configSize"  -->
-      <el-date-picker class="fu-filter-date" v-model="value" v-bind="$attrs"
-                      :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-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>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {ref, computed, inject} from "vue";
-import {FilterCondition, ReferenceContext, referenceKey} from "../types";
-import {datetimeFormat} from "@/tools/time";
-import {useLocale} from "@/hooks"
+import { ref, computed, inject } from "vue";
+import { FilterCondition, ReferenceContext, referenceKey } from "../types";
+import { datetimeFormat } from "@/tools/time";
+import { useLocale } from "@/hooks"
+import { validateSize } from "@/tools/size";
 defineOptions({ name: "FuFilterDateTime" });
-const {t} = useLocale()
+const { t } = useLocale()
 
 const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
   label: String,
   field: {
     type: String,
@@ -45,8 +48,8 @@ const valueLabel = computed(() => {
 
 function getCondition(): FilterCondition | 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) {
@@ -55,7 +58,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/filter-bar/filter-components/FuFilterSelect.vue

@@ -2,20 +2,20 @@
   <div class="fu-filter-component">
     <div class="fu-filter-component__label">{{ label }}</div>
     <div class="fu-filter-component__content">
-      <fu-filter-option :label="o.label" :value="o.value" v-for="o in showOptions" :key="o.value"/>
+      <fu-filter-option :label="o.label" :value="o.value" v-for="o in showOptions" :key="o.value" />
       <el-popover popper-class="fu-filter-component-popover" :show-arrow="false" placement="bottom-start"
-                  trigger="click" width="240">
+        trigger="click" width="240">
         <el-select v-model="selection" v-bind="$attrs" :multiple="multiple" @change="change" :teleported="false"
-                   :placeholder="t('fu.search_bar.please_select')">
+          :size="size" :placeholder="t('fu.search_bar.please_select')">
           <el-option value="" v-if="useSelectAll && multiple">
             <div @click="selectAll">{{ t('fu.filter_bar.select_all') }}</div>
           </el-option>
-          <el-option :label="o.label" :value="o.value" v-for="o in options" :key="o.value"/>
+          <el-option :label="o.label" :value="o.value" v-for="o in options" :key="o.value" />
         </el-select>
         <template #reference>
           <div class="fu-filter-option">
             <el-icon>
-              <Plus/>
+              <Plus />
             </el-icon>
             {{ t('fu.filter_bar.more') }}
           </div>
@@ -26,15 +26,20 @@
 </template>
 
 <script setup lang="ts">
-import {ref, provide, computed, PropType, Ref, inject} from "vue";
+import { ref, provide, computed, PropType, Ref, inject } from "vue";
 import FuFilterOption from "./FuFilterOption.vue";
-import {FilterCondition, OptionProps, ReferenceContext, referenceKey, selectKey} from "../types";
+import { FilterCondition, OptionProps, ReferenceContext, referenceKey, selectKey } from "../types";
 
-import {useLocale} from "@/hooks"
+import { useLocale } from "@/hooks"
+import { validateSize } from "@/tools/size";
 defineOptions({ name: "FuFilterSelect" });
-const {t} = useLocale()
+const { t } = useLocale()
 
 const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
   multiple: {
     type: Boolean,
     default: false
@@ -118,8 +123,8 @@ function getValueLabel(value: string | number) {
 
 function getCondition(): FilterCondition | 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}
+  let { field, label } = props
+  return { field, label, value: selection.value, valueLabel: valueLabel.value }
 }
 
 function init(v: any) {
@@ -133,7 +138,7 @@ provide(selectKey, {
 
 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/filter-bar/index.d.ts

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

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

@@ -1,19 +1,18 @@
-import FuSearchInput from "./FuSearchInput.vue"
+import FuSearchInput from "./FuSearchInput.vue";
 import FuFilterBar from "./FuFilterBar.vue";
 import FuFilter from "./FuFilter.vue";
 import FuFilterSelect from "./filter-components/FuFilterSelect.vue";
 import FuFilterDate from "./filter-components/FuFilterDate.vue";
 import FuFilterDateTime from "./filter-components/FuFilterDateTime.vue";
+import type { App } from "vue";
 
-import type {App} from 'vue'
+FuSearchInput.install = (app: App): void => {
+  app.component(FuFilterBar.name, FuFilterBar);
+  app.component(FuFilter.name, FuFilter);
+  app.component(FuSearchInput.name, FuSearchInput);
+  app.component(FuFilterSelect.name, FuFilterSelect);
+  app.component(FuFilterDate.name, FuFilterDate);
+  app.component(FuFilterDateTime.name, FuFilterDateTime);
+};
 
-export default {
-  install: (app: App): void => {
-    app.component(FuFilterBar.name, FuFilterBar)
-    app.component(FuFilter.name, FuFilter)
-    app.component(FuSearchInput.name, FuSearchInput)
-    app.component(FuFilterSelect.name, FuFilterSelect)
-    app.component(FuFilterDate.name, FuFilterDate)
-    app.component(FuFilterDateTime.name, FuFilterDateTime)
-  }
-}
+export default FuSearchInput;

package/src/components/filter-bar/types.d.ts

@@ -0,0 +1,22 @@
+import { InjectionKey, Ref } from "vue";
+export declare const selectKey: InjectionKey<SelectContext>;
+export interface SelectContext {
+    selection: Ref<Array<string | number> | string | number>;
+    setSelected(value: string | number, selected: boolean): void;
+}
+export declare const referenceKey: InjectionKey<Ref<ReferenceContext[]>>;
+export interface ReferenceContext {
+    field: string;
+    init(v: any): void;
+    getCondition(): FilterCondition | undefined;
+}
+export interface OptionProps {
+    label: string;
+    value: string | number;
+}
+export interface FilterCondition {
+    field: string;
+    label?: string;
+    value: any;
+    valueLabel?: string;
+}

package/src/components/read-write-switch/FuInputRwSwitch.vue

@@ -9,33 +9,37 @@
 
 <script setup lang="ts">
 
+import FuReadWriteSwitch from "@/components/read-write-switch/FuReadWriteSwitch.vue";
 import { ref, watch } from "vue";
+
 defineOptions({ name: "FuInputRwSwitch" });
 const props = defineProps({
-  value: [String, Number],
+  modelValue: [String, Number],
   writeTrigger: {
     type: String,
-    default: "click",
+    default: "onClick",
     validator: (value: string) => {
-      return ['click', 'dblclick'].includes(value)
+      return ['onClick', 'onDblclick'].includes(value)
     }
   }
 })
 const emit = defineEmits(["input", "blur"])
 
-const data = ref(props.value)
+const data = ref(props.modelValue)
 
-watch(() => props.value, (v) => {
+watch(() => props.modelValue, (v) => {
   data.value = v
 })
 
 function input(e: Event) {
   emit("input", data.value, e)
 }
+
 function blur(read: Function, e: Event) {
   emit("blur", data.value, e)
   read()
 }
+
 function keydown(read: Function, e: KeyboardEvent) {
   if (e.key === "Enter") {
     read()

package/src/components/read-write-switch/FuReadWriteSwitch.vue

@@ -1,28 +1,27 @@
 <script lang="ts">
-import { ref, watch, defineComponent, h, nextTick } from 'vue'
-import { uuid } from "@/tools/utils"
+import {ref, watch, defineComponent, h, nextTick} from 'vue'
+import {uuid} from "@/tools/utils"
 
-const TRIGGERS = ['manual', 'click', 'dblclick']
+const TRIGGERS = ['manual', 'onClick', 'onDblclick']
 
 export default defineComponent({
   name: "FuReadWriteSwitch",
   props: {
-    value: Boolean,
+    modelValue: Boolean,
     data: [String, Number, Boolean],
     writeTrigger: {
       type: String,
-      default: "click",
+      default: "onClick",
       validator: (value: string) => {
         return TRIGGERS.includes(value)
       }
     }
   },
 
-  setup(props, { slots, emit }) {
+  setup(props, {slots, emit}) {
     const id = ref(uuid())
-    const write = ref(props.value === undefined ? false : props.value)
-    watch(() => props.value, (v) => {
-          console.log(v)
+    const write = ref(props.modelValue === undefined ? false : props.modelValue)
+    watch(() => props.modelValue, (v) => {
       if (v === write.value) return
 
       if (v) {
@@ -33,12 +32,13 @@ export default defineComponent({
     })
 
     function change() {
-      emit("input", write.value)
+      emit("update:modelValue", write.value)
       emit("change", [props.data, write.value])
     }
+
     function switchWrite() {
       write.value = true
-  
+
       nextTick(() => {
         // 目前只支持input和textarea自动获取焦点
         const nid = document.getElementById(id.value)
@@ -52,39 +52,41 @@ export default defineComponent({
         change()
       })
     }
+
     function switchRead() {
       write.value = false
       change()
     }
-    
-    const context: any = {
-      class: "fu-read-write-switch",
-      attrs: { id: id.value },
-      on: {}
-    }
 
-    // 读状态添加触发写状态的事件
-    if (!write.value && props.writeTrigger !== TRIGGERS[0]) {
-      context.on[props.writeTrigger] = switchWrite
-    }
-    // 没有slot时显示文本数据
-    let children: any = props.data
+    return () => {
+      const context: any = {
+        class: "fu-read-write-switch",
+        id: id.value,
+      }
 
-    // 读状态内容，提供切换到写状态的方法
-    if (!write.value && slots.read) {
-      children = slots.read({
-        write: switchWrite
-      })
-    }
+      // 读状态添加触发写状态的事件
+      if (!write.value && props.writeTrigger !== TRIGGERS[0]) {
+        context[props.writeTrigger] = switchWrite
+      }
+      // 没有slot时显示文本数据
+      let children: any = props.data
 
-    // 写状态内容，提供切换到读状态的方法
-    if (write.value && slots.default) {
-      children = slots.default({
-        read: switchRead
-      })
-    }
+      // 读状态内容，提供切换到写状态的方法
+      if (!write.value && slots.read) {
+        children = slots.read({
+          write: switchWrite
+        })
+      }
 
-     return () => h("div", context, children)
+      // 写状态内容，提供切换到读状态的方法
+      if (write.value && slots.default) {
+        children = slots.default({
+          read: switchRead
+        })
+      }
+
+      return h("div", context, children)
+    }
   }
 
 })

package/src/components/read-write-switch/FuSelectRwSwitch.vue

@@ -17,23 +17,27 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, PropType } from "vue";
+import { OptionProps } from "./types";
 defineOptions({ name: "FuSelectRwSwitch" });
 const props = defineProps({
-  value: [String, Number],
-  options: Array,
+  modelValue: [String, Number],
+  options: {
+    type: Array as PropType<OptionProps[]>,
+    default: []
+  },
   writeTrigger: {
     type: String,
-    default: "click",
+    default: "onClick",
     validator: (value: string) => {
-      return ['click', 'dblclick'].includes(value)
+      return ['onClick', 'onDblclick'].includes(value)
     }
   }
 })
 const emit = defineEmits(["input", "blur", "change"])
-const data = ref(props.value)
+const data = ref(props.modelValue)
 
-watch(() => props.value, (v) => {
+watch(() => props.modelValue, (v) => {
   data.value = v
 })
 function input(e: Event) {

package/src/components/read-write-switch/index.d.ts

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

package/src/components/read-write-switch/types.d.ts

@@ -0,0 +1,4 @@
+export interface OptionProps {
+    label: string;
+    value: string | number;
+}

package/src/components/read-write-switch/types.ts

@@ -0,0 +1,4 @@
+export interface OptionProps {
+  label: string
+  value: string | number
+}