vxe-pc-ui 0.0.2 → 0.1.0

package/packages/input/src/number.ts

@@ -0,0 +1,12 @@
+import XEUtils from 'xe-utils'
+
+export function handleNumber (val: string | number) {
+  return XEUtils.isString(val) ? val.replace(/,/g, '') : val
+}
+
+export function toFloatValueFixed (inputValue: string | number, digitsValue: number) {
+  if (/^-/.test('' + inputValue)) {
+    return XEUtils.toFixed(XEUtils.ceil(inputValue, digitsValue), digitsValue)
+  }
+  return XEUtils.toFixed(XEUtils.floor(inputValue, digitsValue), digitsValue)
+}

package/packages/list-design/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeListDesignComponent from './src/list-design'
+
+const VxeListDesign = Object.assign({}, VxeListDesignComponent, {
+  install (app: App) {
+    app.component(VxeListDesignComponent.name as string, VxeListDesignComponent)
+  }
+})
+
+export const ListDesign = VxeListDesign
+export default VxeListDesign

package/packages/list-design/src/list-design.ts

@@ -0,0 +1,55 @@
+import { defineComponent, ref, h, PropType, reactive } from 'vue'
+import XEUtils from 'xe-utils'
+import globalConfigStore from '../../ui/src/globalStore'
+
+import { VxeListDesignPropTypes, ListDesignReactData, ListDesignPrivateRef, VxeListDesignPrivateComputed, VxeListDesignConstructor, VxeListDesignPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeListDesign',
+  props: {
+    size: {
+      type: String as PropType<VxeListDesignPropTypes.Size>,
+      default: () => globalConfigStore.formDesign.size
+    }
+  },
+  emits: [],
+  setup (props, context) {
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<ListDesignReactData>({
+    })
+
+    const refMaps: ListDesignPrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeListDesignPrivateComputed = {
+    }
+
+    const $xeListDesign = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeListDesignConstructor & VxeListDesignPrivateMethods
+
+    const renderVN = () => {
+      return h('div', {
+        ref: refElem,
+        class: 'vxe-list-design'
+      })
+    }
+
+    $xeListDesign.renderVN = renderVN
+
+    return $xeListDesign
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/loading/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeLoadingComponent from './src/loading'
+
+const VxeLoading = Object.assign({}, VxeLoadingComponent, {
+  install (app: App) {
+    app.component(VxeLoadingComponent.name as string, VxeLoadingComponent)
+  }
+})
+
+export const Loading = VxeLoading
+export default VxeLoading

package/packages/loading/src/loading.ts

@@ -0,0 +1,56 @@
+import { defineComponent, h, computed } from 'vue'
+import globalConfigStore from '../../ui/src/globalStore'
+import iconConfigStore from '../../ui/src/iconStore'
+import { getI18n } from '../../ui/src/i18n'
+
+export default defineComponent({
+  name: 'VxeLoading',
+  props: {
+    modelValue: Boolean,
+    icon: String,
+    text: String
+  },
+  setup (props, { slots }) {
+    const computeLoadingIcon = computed(() => {
+      return props.icon || iconConfigStore.LOADING
+    })
+
+    const computeLoadingText = computed(() => {
+      const loadingText = globalConfigStore.loadingText
+      return props.text || (loadingText === null ? loadingText : getI18n('vxe.loading.text'))
+    })
+
+    return () => {
+      const loadingIcon = computeLoadingIcon.value
+      const loadingText = computeLoadingText.value
+      return h('div', {
+        class: ['vxe-loading', {
+          'is--visible': props.modelValue
+        }]
+      }, slots.default
+        ? [
+            h('div', {
+              class: 'vxe-loading--wrapper'
+            }, slots.default({}))
+          ]
+        : [
+            h('div', {
+              class: 'vxe-loading--chunk'
+            }, [
+              loadingIcon
+                ? h('i', {
+                  class: loadingIcon
+                })
+                : h('div', {
+                  class: 'vxe-loading--spinner'
+                }),
+              loadingText
+                ? h('div', {
+                  class: 'vxe-loading--text'
+                }, `${loadingText}`)
+                : null
+            ])
+          ])
+    }
+  }
+})

package/packages/modal/index.ts

@@ -0,0 +1,110 @@
+import { App } from 'vue'
+import XEUtils from 'xe-utils'
+import VxeModalComponent, { allActivedModals } from './src/modal'
+import VxeCore from '../ui/src/core'
+import { dynamicApp, dynamicStore, checkDynamic } from '../dynamics'
+
+import { VxeModalPropTypes, ModalEventTypes, VxeModalDefines } from '../../types'
+
+function openModal (options: VxeModalDefines.ModalOptions): Promise<ModalEventTypes> {
+  // 使用动态组件渲染动态弹框
+  checkDynamic()
+  return new Promise(resolve => {
+    if (options && options.id && allActivedModals.some(comp => comp.props.id === options.id)) {
+      resolve('exist')
+    } else {
+      const _onHide = options.onHide
+      const modalOpts = Object.assign(options, {
+        key: XEUtils.uniqueId(),
+        modelValue: true,
+        onHide (params) {
+          const modalList = dynamicStore.modals
+          if (_onHide) {
+            _onHide(params)
+          }
+          dynamicStore.modals = modalList.filter(item => item.key !== modalOpts.key)
+          resolve(params.type)
+        }
+      } as VxeModalDefines.ModalOptions)
+      dynamicStore.modals.push(modalOpts)
+    }
+  })
+}
+
+function getModal (id: VxeModalPropTypes.ID) {
+  return XEUtils.find(allActivedModals, $modal => $modal.props.id === id)
+}
+
+/**
+ * 全局关闭动态的活动窗口（只能用于关闭动态的创建的活动窗口）
+ * 如果传 id 则关闭指定的窗口
+ * 如果不传则关闭所有窗口
+ */
+function closeModal (id?: VxeModalPropTypes.ID) {
+  const modals = id ? [getModal(id)] : allActivedModals
+  const restPromises: any[] = []
+  modals.forEach($modal => {
+    if ($modal) {
+      restPromises.push($modal.close())
+    }
+  })
+  return Promise.all(restPromises)
+}
+
+function handleOpen (defOpts: VxeModalDefines.ModalOptions, content: VxeModalPropTypes.Content | VxeModalDefines.ModalOptions, title?: VxeModalPropTypes.Title, options?: VxeModalDefines.ModalOptions) {
+  let opts
+  if (XEUtils.isObject(content)) {
+    opts = content
+  } else {
+    opts = { content: XEUtils.toValueString(content), title }
+  }
+  return openModal({ ...defOpts, ...options, ...opts })
+}
+
+function openAlert (content: VxeModalPropTypes.Content | VxeModalDefines.ModalOptions, title?: VxeModalPropTypes.Title, options?: VxeModalDefines.ModalOptions) {
+  return handleOpen({
+    type: 'alert',
+    showFooter: true
+  }, content, title, options)
+}
+
+function openConfirm (content: VxeModalPropTypes.Content | VxeModalDefines.ModalOptions, title?: VxeModalPropTypes.Title, options?: VxeModalDefines.ModalOptions) {
+  return handleOpen({
+    type: 'confirm',
+    status: 'question',
+    showFooter: true
+  }, content, title, options)
+}
+
+function openMessage (content: VxeModalPropTypes.Content | VxeModalDefines.ModalOptions, options?: VxeModalDefines.ModalOptions) {
+  return handleOpen({
+    type: 'message',
+    mask: false,
+    lockView: false,
+    showHeader: false
+  }, content, '', options)
+}
+
+const ModalController = {
+  get: getModal,
+  close: closeModal,
+  open: openModal,
+  alert: openAlert,
+  confirm: openConfirm,
+  message: openMessage
+}
+
+export const modal = ModalController
+
+export const VxeModal = Object.assign(VxeModalComponent, {
+  install: function (app: App) {
+    app.component(VxeModalComponent.name as string, VxeModalComponent)
+    VxeCore.modal = ModalController
+  }
+})
+
+dynamicApp.component(VxeModalComponent.name as string, VxeModalComponent)
+
+export const Modal = VxeModal
+
+export default VxeModal