fit2cloud-ui-plus 0.0.1-beta.3 → 0.0.1-beta.7

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/types.ts

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

package/src/components/split-pane/FuSplitPane.vue

@@ -8,7 +8,7 @@
       @mouseover="hover = true" @mouseleave="hover = false">
       <div class="icon" v-if="resizerType === 'resizer'">
         <slot name="resizer">
-          <i class="el-icon-more"></i>
+          <el-icon :size="10"><MoreFilled /></el-icon>
         </slot>
       </div>
     </div>

package/src/components/table/FuTableBody.ts

@@ -1,40 +1,46 @@
-import { h } from 'vue'
+import { h } from "vue";
 
 const isFix = (node: any) => {
-  const includeTag = node.type.name.indexOf("FuTableColumnDropdown") >= 0
-  const { fix } = node.props
-  let { type } = node.props
-  return (fix !== undefined && fix !== false) || ["selection", "index", "expand"].includes(type) || includeTag
-}
+  const includeTag = node.type.name.indexOf("FuTableColumnDropdown") >= 0;
+  const { fix } = node.props;
+  let { type } = node.props;
+  return (
+    (fix !== undefined && fix !== false) ||
+    ["selection", "index", "expand"].includes(type) ||
+    includeTag
+  );
+};
 
 const getLabel = (node: any) => {
-  if (node.props.label) return node.props.label
-  const prefix = "FU-T-"
-  const includeTag = node.type.name.indexOf("FuTableColumnDropdown") >= 0
-  let { label, type } = node.props
-  if (includeTag) label = prefix + "dropdown"
-  label ??= node.props.label
-  label ??= prefix + type
+  if (node.props.label) return node.props.label;
+  const prefix = "FU-T-";
+  const includeTag = node.type.name.indexOf("FuTableColumnDropdown") >= 0;
+  let { label, type } = node.props;
+  if (includeTag) label = prefix + "dropdown";
+  label ??= node.props.label;
+  label ??= prefix + type;
   return label;
-}
+};
+
 const FuTableBody = (props: any, context: any) => {
-  const slots = context.slots.default()
+  let slots = context.slots.default();
   const nodes: any = [];
-  let { columns } = props
-  const children = slots[0].children.filter((c: any) => c.type.name !== undefined)
-  if (!children) return nodes
-  if (!columns || columns?.length === 0) return children
+  let { columns } = props;
+  if (typeof slots[0].children[0].type === "symbol") {
+    slots = slots[0].children;
+  }
+  const children = slots[0].children.filter((c: any) => c.type.name !== undefined);
+  if (!children) return nodes;
+  if (!columns || columns?.length === 0) return children;
   columns.forEach((col: any) => {
     let node = children.find((child: any) => {
-      return col.label === getLabel(child)
-    })
+      return col.label === getLabel(child);
+    });
     if (node && (isFix(node) || col.show !== false)) {
       nodes.push(node);
     }
-  })
-  return nodes
-}
+  });
+  return nodes;
+};
 
 export default FuTableBody;
-
-

package/src/components/table/table-column-dropdown/FuTableColumnDropdown.vue

@@ -33,6 +33,9 @@
 </template>
 <script lang="ts" setup>
 import { computed, getCurrentInstance } from "vue";
+import { PropType } from "vue";
+import { DropdownProps } from "@/tools/types";
+
 defineOptions({ name: "FuTableColumnDropdown" });
 const props = defineProps({
   showType: {
@@ -41,7 +44,7 @@ const props = defineProps({
     validator: (value: string) => ["always", "hover", "selected"].includes(value),
   },
   menus: {
-    type: Array,
+    type: Array as PropType<DropdownProps[]>,
     default: () => [],
   },
   title: String,
@@ -56,7 +59,7 @@ const props = defineProps({
 
 });
 
-const instance = getCurrentInstance()
+const instance = getCurrentInstance() as any
 
 
 const isShow = computed(() => {

package/src/components/table/table-column-select/FuTableColumnSelectDialog.vue

@@ -1,18 +1,19 @@
 <template>
   <div style="display: inline-block">
     <!-- :size="configSize"  -->
-    <el-button class="fu-search-bar-button" :icon="icon" @click="visible = true">{{t('fu.table.custom_table_rows')}}</el-button>
+    <el-button class="fu-search-bar-button" :icon="icon" @click="visible = true">{{ t('fu.table.custom_table_rows') }}
+    </el-button>
     <el-dialog custom-class="fu-table-column-select-dialog" v-model="visible" @open="open" append-to-body>
-      <template #title>
+      <template #header>
         <h3>
           {{ t('fu.table.custom_table_fields') }}
         </h3>
-        <el-alert :title="t('fu.table.custom_table_fields_desc')" type="info" :closable="false"/>
+        <el-alert :title="t('fu.table.custom_table_fields_desc')" type="info" :closable="false" />
       </template>
 
       <el-checkbox v-for="(c, i) in cloneColumns" :key="i" v-model="c.show" :checked="c.show !== false" draggable="true"
-                   @dragstart="dragstart($event, i)" @dragenter="dragenter" @dragleave="dragleave"
-                   @dragover.prevent @dragend="dragend" @drop="drop($event, cloneColumns, i)" v-show="!c.fix">
+        @dragstart="dragstart($event, i)" @dragenter="dragenter" @dragleave="dragleave" @dragover.prevent
+        @dragend="dragend" @drop="drop($event, cloneColumns, i)" v-show="!c.fix">
         {{ c.label }}
       </el-checkbox>
 
@@ -30,9 +31,9 @@
 </template>
 
 <script setup lang="ts">
-import {ref, inject} from "vue";
-import {tableColumnSelect} from "./utils"
-import {useLocale} from "@/hooks"
+import { ref, inject } from "vue";
+import { tableColumnSelect } from "./utils"
+import { useLocale } from "@/hooks"
 
 const props = defineProps({
   icon: {
@@ -53,7 +54,7 @@ const props = defineProps({
 
 const localKey = inject("localKey")
 
-const {t} = useLocale()
+const { t } = useLocale()
 
 const cloneColumn = (source: any, target: any) => {
   source.forEach((col: any) => {
@@ -72,7 +73,7 @@ const {
   drop
 } = tableColumnSelect(localKey)
 
-const cloneColumns = ref([])
+const cloneColumns = ref([]) as any
 const visible = ref(false)
 
 function open() {
@@ -82,7 +83,7 @@ function open() {
 
 function ok() {
   props.columns.splice(0, props.columns.length)
-  cloneColumns.value.forEach(c => {
+  cloneColumns.value.forEach((c: any) => {
     props.columns.push(c)
   })
   visible.value = false

package/src/components/table/table-column-select/FuTableColumnSelectPopover.vue

@@ -1,14 +1,14 @@
 <template>
   <el-popover class="fu-table-column-select" popper-class="fu-table-column-select-popper" :trigger="trigger"
-              :show-arrow="false" v-show="hasSelect">
+    :show-arrow="false" v-show="hasSelect">
     <h3>
       {{ t('fu.table.custom_table_fields') }}
     </h3>
     <div class="fu-table-column-select-popper__body">
       <div v-for="(c, i) in columns" :key="i" class="fu-table-column-select-popper__item">
         <el-checkbox v-model="c.show" :checked="c.show !== false" draggable="true" @dragstart="dragstart($event, i)"
-                     @dragenter="dragenter" @dragleave="dragleave" @dragover.prevent @dragend="dragend"
-                     @drop="drop($event, columns, i)" v-show="!c.fix">
+          @dragenter="dragenter" @dragleave="dragleave" @dragover.prevent @dragend="dragend"
+          @drop="drop($event, columns, i)" v-show="!c.fix">
           {{ c.label }}
         </el-checkbox>
       </div>
@@ -20,16 +20,16 @@
     </div>
 
     <template #reference>
-      <el-button class="fu-search-bar-button" :icon="icon">{{t('fu.table.custom_table_rows')}}</el-button>
+      <el-button class="fu-search-bar-button" :icon="icon">{{ t('fu.table.custom_table_rows') }}</el-button>
     </template>
     <!-- :size="configSize" -->
   </el-popover>
 </template>
 
 <script setup lang="ts">
-import {computed, inject} from "vue";
-import {tableColumnSelect} from "./utils"
-import {useLocale} from "@/hooks"
+import { computed, inject } from "vue";
+import { tableColumnSelect } from "./utils"
+import { useLocale } from "@/hooks"
 
 const props = defineProps({
   icon: {
@@ -42,13 +42,13 @@ const props = defineProps({
     validator: (value: string) => ['click', 'hover'].includes(value)
   },
   columns: {
-    type: Array,
+    type: Array as any,
     default: () => []
   },
 
 });
 
-const {t} = useLocale()
+const { t } = useLocale()
 
 const localKey = inject("localKey")
 

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

@@ -6,7 +6,7 @@ export const tableColumnSelect = (localKey: any) => {
     return localKey ? "FU-T-" + localKey : ''
   })
 
-  function dragstart(event: DragEvent, index: string) {
+  function dragstart(event: DragEvent, index: any) {
     if (event.dataTransfer) {
       event.dataTransfer.effectAllowed = "move"
       event.dataTransfer.setData("source_index", index)
@@ -15,15 +15,17 @@ export const tableColumnSelect = (localKey: any) => {
 
   function dragenter(event: DragEvent) {
     event.preventDefault()
-    if (event.target) {
-      event.target.style.opacity = .2
+    let target = event.target as HTMLElement
+    if (target) {
+      target.style.opacity= ".2"
     }
   }
 
   function dragleave(event: DragEvent) {
     event.preventDefault()
-    if (event.target) {
-      event.target.style.opacity = ""
+    let target = event.target as HTMLElement
+    if (target) {
+      target.style.opacity = ""
     }
   }
 
@@ -34,6 +36,7 @@ export const tableColumnSelect = (localKey: any) => {
   }
 
   function drop(event: DragEvent, list: any, index: number) {
+    let target = event.target as HTMLElement
     let source_index = Number(event.dataTransfer?.getData("source_index"))
     let target_index = index
     if (target_index > source_index) {
@@ -43,8 +46,8 @@ export const tableColumnSelect = (localKey: any) => {
       list.splice(target_index, 0, list[source_index])
       list.splice(source_index + 1, 1)
     }
-    if (event.target) {
-      event.target.style.opacity = ""
+    if (target) {
+      target.style.opacity = ""
     }
   }
 

package/src/components/table/table-operations/FuTableMoreButton.vue

@@ -10,7 +10,7 @@
     </el-button>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-dropdown-item v-for="(btn, i) in buttons" :key="i" :icon="type === 'icon'&& btn.icon" :disabled="disabled(btn)"
+        <el-dropdown-item v-for="(btn, i) in buttons" :key="i" :icon="type === 'icon'? btn.icon: ''" :disabled="disabled(btn)"
           :command="btn">
           {{ btn.label }}
         </el-dropdown-item>
@@ -21,12 +21,14 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import { useLocale } from "@/hooks"
+import { PropType } from "vue";
+import { DropdownProps } from "@/tools/types";
 
 const { t } = useLocale()
 const props = defineProps({
   row: Object,
   buttons: {
-    type: Array,
+    type: Array as PropType<DropdownProps[]>,
     required: true
   },
   size: {

package/src/components/table/table-operations/FuTableOperations.vue

@@ -5,8 +5,8 @@
     </template>
     <template #default="{ row }">
       <fu-table-button :icon="type === 'icon'" v-for="(btn, i) in defaultButtons(row)" :key="i"
-        @click.stop="btn.click(row)" :disabled="disableButton(btn, row)" :label="btn.label" :type="btn.type || 'primary'"
-        link>
+        @click.stop="btn.click(row)" :disabled="disableButton(btn, row)" :label="btn.label"
+        :type="btn.type || 'primary'" link>
         <el-icon v-if="type === 'icon'">
           <component :is="btn.icon" />
         </el-icon>
@@ -52,13 +52,13 @@ const hasShowFunc = computed(() => {
   return props.buttons.some((btn: any) => typeof btn.show === "function")
 });
 
-const defaultButtons = computed(() => {
+const defaultButtons: any = computed(() => {
   return function (row: any) {
     return hasMore(row) ? showButtons(row).slice(0, props.ellipsis) : showButtons(row)
   }
 });
 
-const moreButtons = computed(() => {
+const moreButtons: any = computed(() => {
   return function (row: any) {
     return hasMore(row) ? showButtons(row).slice(props.ellipsis) : []
   }
@@ -66,7 +66,7 @@ const moreButtons = computed(() => {
 
 const computeWidth = computed(() => {
   let length = hasShowFunc.value ? props.ellipsis : defaultButtons.value.length
-  let buttonsWidth = 35 + length * 58 + 58
+  let buttonsWidth: string | number = 35 + length * 58 + 58
   if (props.minWidth) {
     buttonsWidth = buttonsWidth < props.minWidth ? props.minWidth : buttonsWidth
   }

package/src/components/tabs/FuTabs.vue

@@ -2,7 +2,7 @@
   <el-tabs class="fu-tabs" :before-leave="beforeLeave" :editable="false" :addable="false" v-bind="$attrs">
     <slot></slot>
     <el-tab-pane name="add" key="add" v-if="addable">
-      <template v-slot:label>
+      <template #label>
         <slot name="add">
           <!-- 下拉方式 -->
           <el-dropdown @command="handleCommand" v-if="addType === 'dropdown'" :trigger="addTrigger">
@@ -38,6 +38,8 @@
 </template>
 
 <script lang="ts" setup>
+import { PropType } from "vue";
+import { DropdownProps } from "@/tools/types";
 import { uuid } from "@/tools/utils";
 defineOptions({ name: "FuTabs" });
 type TabPanelName = string | number
@@ -48,7 +50,7 @@ const props = defineProps({
     validator: (val: string) => ["default", "dropdown"].includes(val),
   },
   dropdownMenus: {
-    type: Array,
+    type: Array as PropType<DropdownProps[]>,
     default: () => [],
   },
   addTrigger: {

package/src/styles/common/variables.scss

@@ -14,15 +14,9 @@
 );
 
 // fit2cloud ui variables
-
 $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-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;

package/src/styles/components/tabs.scss

@@ -3,7 +3,7 @@
 
 @include b(tabs) {
   #tab-add {
-    .el-icon-close {
+    .is-icon-close {
       display: none;
     }
   }

package/src/tools/types.ts

@@ -0,0 +1,9 @@
+export interface DropdownProps {
+  icon?: string
+  disabled?: boolean
+  divided?: boolean
+  command?: string | number | object
+  label?: string | number
+  [k:string]: any;
+}
+

package/src/tools/utils.ts

@@ -1,29 +1,29 @@
-export const download = function ({url, name, content}) {
-  if (url) {
-    downloadByURL(url)
-  } else {
-    downloadByContent(name, content)
-  }
-}
+// export const download = function ({url, name, content}) {
+//   if (url) {
+//     downloadByURL(url)
+//   } else {
+//     downloadByContent(name, content)
+//   }
+// }
 
-export const downloadByContent = function (name, content) {
-  const blob = new Blob([content])
-  const a = document.createElement('a')
-  a.setAttribute('href', window.URL.createObjectURL(blob))
-  a.setAttribute('download', name)
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
-}
+// export const downloadByContent = function (name, content) {
+//   const blob = new Blob([content])
+//   const a = document.createElement('a')
+//   a.setAttribute('href', window.URL.createObjectURL(blob))
+//   a.setAttribute('download', name)
+//   document.body.appendChild(a)
+//   a.click()
+//   document.body.removeChild(a)
+// }
 
-export const downloadByURL = function (url) {
-  const a = document.createElement('a')
-  a.setAttribute('href', url)
-  a.setAttribute('download', url)
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
-}
+// export const downloadByURL = function (url) {
+//   const a = document.createElement('a')
+//   a.setAttribute('href', url)
+//   a.setAttribute('download', url)
+//   document.body.appendChild(a)
+//   a.click()
+//   document.body.removeChild(a)
+// }
 
 export const uuid = function () {
   let d = new Date().getTime();
@@ -45,16 +45,16 @@ export const randomId = function () {
   return Math.floor(Math.random() * 10000);
 }
 
-export const hasOwn = function (obj, key) {
-  return Object.prototype.hasOwnProperty.call(obj, key);
-}
+// export const hasOwn = function (obj, key) {
+//   return Object.prototype.hasOwnProperty.call(obj, key);
+// }
 
-export const convertToUnit = function (value, unit = "px") {
-  if (value == null || value === '') {
-    return undefined
-  } else if (isNaN(+value)) {
-    return String(value)
-  } else {
-    return `${Number(value)}${unit}`
-  }
-}
+// export const convertToUnit = function (value, unit = "px") {
+//   if (value == null || value === '') {
+//     return undefined
+//   } else if (isNaN(+value)) {
+//     return String(value)
+//   } else {
+//     return `${Number(value)}${unit}`
+//   }
+// }

package/.editorconfig

@@ -1,14 +0,0 @@
-# https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-insert_final_newline = false
-trim_trailing_whitespace = false

package/BETA.MD

@@ -1,6 +0,0 @@
-### 如何发布测试版
-
-1. package.json 中的 version 修改为 x.x.x-beta.x(不用提交)，例如1.1.0-beta.0
-2. 打包，npm run build，然后检查lib目录内容是否正确
-3. 发布，npm publish --tag beta，发布的包是beta，而不是latest，这样npm install不会安装beta版的包
-4. 安装，npm install fit2cloud-ui-plus@beta 或者 直接修改package.json 中的 version，然后npm install

package/env.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
-
-declare module "*.md" {
-  const content: string;
-  export default content;
-}

package/examples/App.vue

@@ -1,65 +0,0 @@
-<template>
-   <div id="app">
-      <router-view></router-view>
-    </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style>
-button {
-  margin: 0;
-}
-body {
-  margin: 0;
-  padding: 0 !important;
-  height: 100%;
-  color: #333333;
-  font-size: 14px;
-  overflow: hidden;
-}
-
-#app {
-  width: 100%;
-  height: 100%;
-}
-
-:focus {
-  outline: none;
-}
-
-a:active {
-  outline: none;
-}
-
-a,
-a:focus,
-a:hover {
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
-}
-/* 列表元素 */
-ul,
-ol {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background-color: rgba(144, 147, 153, 0.3);
-}
-
-::-webkit-scrollbar-track {
-  border-radius: 5px;
-  background-color: transparent;
-}
-</style>