@vyr/design 0.0.33 → 0.0.35

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "@vyr/design",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "main": "./src/index.ts",
   "dependencies": {
+    "devui-theme": "^0.1.0",
+    "async-validator": "4.2.5",
     "@popperjs/core": "2.11.7",
-    "ag-grid-community": "^35.0.0",
-    "ag-grid-vue3": "^35.0.0",
+    "ag-grid-community": "35.0.0",
+    "ag-grid-vue3": "35.0.0",
     "tinycolor2": "1.6.0",
     "vue": "3.5.22"
   },
+  "devDependencies": {
+    "sass": "^1.32.0"
+  },
   "files": [
     "package.json",
     "src/"

package/src/components/Card.vue

@@ -1,29 +1,25 @@
 <template>
-  <div class="vyr-card" :style="style">
-    <div class="card-header" :class="{ 'handle': arrow }" @click="changeVisible">
+  <div class="vyr-card">
+    <div class="card-header" :class="{ 'handle': arrow }">
       <div class="header-title">
         <slot v-if="$slots.title" name="title"></slot>
         <div v-else class="title-text">
           {{ title }}
         </div>
       </div>
-      <div class="header-icon" :class="{ 'expand': state.visible }">
+      <div class="header-icon">
         <slot name="icon">
           <i v-if="arrow" class="vyrfont vyr-arrow-down-bold"></i>
         </slot>
       </div>
     </div>
-    <div class="card-body" :class="{ scroll }" ref="refBody" :style="state.style">
+    <div class="card-body" ref="refBody">
       <template v-if="scroll">
         <vyr-scroll :margin="8" :padding="8">
           <slot></slot>
         </vyr-scroll>
       </template>
-      <template v-else>
-        <div class="body-wrapper" ref="refWrapper">
-          <slot></slot>
-        </div>
-      </template>
+      <slot v-else></slot>
     </div>
     <div class="card-tool" v-if="$slots.tool">
       <slot name="tool"></slot>
@@ -42,52 +38,6 @@ const props = defineProps({
   scroll: { default: false }
 })
 
-const refBody = useTemplateRef('refBody')
-const refWrapper = useTemplateRef('refWrapper')
-const state = ref({
-  visible: true,
-  style: '',
-  showing: false,
-})
-const showBodyEnd = () => {
-  state.value.showing = false
-  state.value.style = ''
-}
-const showBody = () => {
-  if (!refWrapper.value) return
-  let height = refWrapper.value.clientHeight
-  state.value.style = `height:${height}px;overflow:hidden;`
-  setTimeout(showBodyEnd, Theme.config.animationTime.value)
-}
-const hideBodyEnd = () => {
-  state.value.showing = false
-  state.value.style = 'display:none;'
-}
-const hideBody = () => {
-  if (!refBody.value) return
-  state.value.style = `height:${refBody.value.clientHeight}px;overflow:hidden;`
-  requestAnimationFrame(() => state.value.style = `height:0px;overflow:hidden;`)
-  setTimeout(hideBodyEnd, Theme.config.animationTime.value)
-}
-const watchVisible = () => {
-  state.value.showing = true
-  if (state.value.visible === true) {
-    state.value.style = 'height:0px;overflow:hidden;'
-    requestAnimationFrame(showBody)
-  } else {
-    hideBody()
-  }
-}
-watch(() => state.value.visible, watchVisible)
-
-const style = computed(() => {
-  return props.scroll ? 'height:100%;' : ''
-})
-
-const changeVisible = () => {
-  if (props.arrow === false || state.value.showing === true) return
-  state.value.visible = !state.value.visible
-}
 </script>
 
 <style lang="less" scoped>
@@ -99,6 +49,7 @@ const changeVisible = () => {
 .vyr-card {
   .vyr-font-family;
   width: 100%;
+  height: 100%;
   font-size: var(--vyr-font-size);
   color: var(--vyr-font-color);
   border: 1px solid var(--vyr-border-color);
@@ -154,16 +105,12 @@ const changeVisible = () => {
         color: var(--vyr-helper-color);
       }
     }
-
-    .header-icon.expand {
-      .vyrfont {
-        transform: rotate(-180deg);
-      }
-    }
   }
 
   .card-body {
     width: 100%;
+    height: 100%;
+    overflow: hidden;
     box-sizing: border-box;
     background-color: var(--vyr-topic-color);
     border-top: var(--vyr-border-size) solid var(--vyr-border-color);
@@ -177,11 +124,6 @@ const changeVisible = () => {
     }
   }
 
-  .card-body.scroll {
-    height: 100%;
-    overflow: hidden;
-  }
-
   .card-tool {
     border-top: var(--vyr-border-size) solid var(--vyr-border-color);
     padding: @card-pad-size;

package/src/components/Dialog.vue

@@ -19,7 +19,6 @@
       <div class="dialog-footer" :style="`height:${footer}px;`" v-if="$slots.footer">
         <slot name="footer"></slot>
       </div>
-      <slot name="dialog"></slot>
     </div>
   </vyr-mask>
 </template>

package/src/components/DynamicDialog.vue

@@ -1,15 +1,15 @@
 <template>
-    <vyr-dialog v-model="state.visible" :mask="state.mask" :draggable="true" :width="state.width"
+    <vyr-dialog v-model="state.visible" :mask="state.mask" :draggable="true" :width="state.width" :height="state.height"
         :maxHeight="state.maxHeight" @close="close">
         <template #title>
             <template v-if="state.type === 'warning'">
                 <i class="vyrfont vyr-warning tips-type"></i>
             </template>{{ state.title }}
         </template>
-        <template v-if="state.component">
+        <template #[slotName] v-if="state.component">
             <component :is="state.component" v-bind="state.props"></component>
         </template>
-        <template v-else>
+        <template #[slotName] v-else>
             <vyr-form>
                 <div class="dynamic-item" v-for="(option, i) in state.options" :key="i">
                     <div class="item-label">{{ option.label }}</div>
@@ -46,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { DialogOptions, useDialogState } from './utils';
 import { language } from '../locale'
 import VyrDialog from './Dialog.vue';
@@ -68,6 +68,10 @@ const privateState = ref({
     flag: false,
 })
 
+const slotName = computed(() => {
+    return state.value.scroll === true ? 'default' : 'scroll'
+})
+
 const currentData = (option: DialogOptions[number]) => {
     if (option.componentData === undefined) return []
     return Array.isArray(option.componentData) ? option.componentData : option.componentData(privateState.value.data)

package/src/components/DynamicLayouter.vue

@@ -4,7 +4,7 @@
             <slot></slot>
         </div>
         <div class="dynamic-sidebar" :style="sidebarStyle">
-            <div :class="`vyr-${mode}-bar ${state.enable ? 'enable' : ''}`" @mousedown.stop.prevent="start"></div>
+            <div :class="`vyr-${mode}-bar ${state.enable ? 'enable' : ''}`" @mousedown.prevent="start"></div>
             <slot name="sidebar"></slot>
         </div>
     </div>

package/src/components/Input.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="vyr-input" :class="{ 'clearable': curClearable, 'icon': $slots.icon }" :style="`width:${curInputWidth};`"
     @click="e => emit('click', e)" @mouseenter="mouseenter" @mouseleave="mouseleave" @mouseup="mouseup">
-    <input ref="refInput" class="input-wrapper" tabindex="-1" v-focus="curReadonly ? false : autofocus"
+    <input ref="refInput" class="input-wrapper" v-focus="curReadonly ? false : autofocus"
       :class="{ 'readonly': curReadonly, 'icon': curClearable, 'draggable': drag.draggable }" :type="type"
       :placeholder="placeholder" :value="currentValue" :readonly="curReadonly" @input="inputValue" @focus="focus"
       @blur="blurValue" @compositionstart="compositionstart" @compositionend="compositionend" />
@@ -58,10 +58,11 @@ const compositionend = (e: CompositionEvent) => {
   inputValue()
 }
 const focus = () => {
-  if (curReadonly.value === true) return
-  emit('focus')
+  if (curReadonly.value === false) {
+    emit('focus')
+    isFocus.value = true
+  }
   window.addEventListener('keydown', confirm)
-  isFocus.value = true
 }
 const inputValue = () => {
   if (composition.value === true) return
@@ -72,12 +73,13 @@ const inputValue = () => {
 const validateProvider = useValidateItemProvider()
 const blurValue = () => {
   composition.value = false
-  if (curReadonly.value === true) return
-  currentValue.value = refInput.value?.value ?? ''
-  if (props.trigger === 'blur') emit('update:modelValue', currentValue.value)
-  emit('blur', currentValue.value)
-  validateProvider.value.validate(currentValue.value)
-  isFocus.value = false
+  if (curReadonly.value === false) {
+    currentValue.value = refInput.value?.value ?? ''
+    if (props.trigger === 'blur') emit('update:modelValue', currentValue.value)
+    emit('blur', currentValue.value)
+    validateProvider.value.validate(currentValue.value)
+    isFocus.value = false
+  }
   window.removeEventListener('keydown', confirm)
 }
 const clear = (e: MouseEvent) => {

package/src/components/Notify.vue

@@ -28,7 +28,7 @@ const remove = () => {
   ArrayUtils.remove(NotifySetting.collection.value, setting.value)
 }
 const close = () => {
-  setTimeout(remove, Theme.config.animationTime.value)
+  window.setTimeout(remove, Theme.config.animationTime.value)
   setting.value.visible = false
 }
 const show = (set: NotifySetting) => {
@@ -38,7 +38,7 @@ const show = (set: NotifySetting) => {
   setting.value.visible = true
 
   if (set.duration === Infinity) return
-  setTimeout(close, set.duration)
+  window.setTimeout(close, set.duration)
 }
 
 defineExpose<NotifyVue>({ show })

package/src/components/Popover.vue

@@ -129,7 +129,7 @@ const delayShow = () => {
 const delayDispatch = () => {
   if (props.disabled === true || props.trigger !== 'hover' || state.value.needOpen === false) return
   state.value.delayCount++
-  setTimeout(delayShow, 200)
+  window.setTimeout(delayShow, 200)
 }
 const mouseenter = () => {
   if (props.disabled === true || props.trigger !== 'hover') return
@@ -146,7 +146,7 @@ const mouseleave = () => {
   state.value.needOpen = false
   if (state.value.needClose === true) return
   state.value.needClose = true
-  setTimeout(close, 300)
+  window.setTimeout(close, 300)
 }
 const rightClick = () => {
   state.value.needOpen = false
@@ -190,6 +190,7 @@ defineExpose(expose)
     position: relative;
     left: 0;
     top: 0;
+    border-radius: var(--vyr-radius-size);
   }
 
   .popover-wrapper.flex {

package/src/components/Scroll.vue

@@ -22,7 +22,7 @@ import { language } from '../locale'
 const props = defineProps(scrollCommonDefaultProps)
 const { marginStyle, paddingStyle } = useMarginStyle(props)
 
-const emit = defineEmits(['resize'])
+const emit = defineEmits(['resize', 'wheel'])
 const refWrapper = useTemplateRef('refWrapper')
 const refBody = useTemplateRef('refBody')
 const state = ref({
@@ -58,7 +58,9 @@ const unlisten = () => {
 onMounted(listen)
 onBeforeUnmount(unlisten)
 
-const { opacity, layout, move, leave } = useScroll(computeTop, refWrapper as Ref<HTMLElement>)
+const { opacity, layout, move, leave } = useScroll(computeTop, emit, refWrapper as Ref<HTMLElement>)
+
+defineExpose({ wrapper: refWrapper })
 </script>
 
 <style lang="less" scoped>

package/src/components/common/ResizeListener.ts

@@ -16,7 +16,7 @@ class ResizeListener {
     //防止回调形成无限循环
     if (this.debounce === true) return
     this.debounce = true
-    setTimeout(() => this.callback(entrys), 0)
+    window.setTimeout(() => this.callback(entrys), 0)
   }
   private callback = (entrys: ResizeObserverEntry[]) => {
     this.debounce = false

package/src/components/composables/useScroll.ts

@@ -1,6 +1,6 @@
 import { ref, Ref } from "vue"
 
-const useScroll = (computeTop: () => void, wrapper: Ref<HTMLElement>) => {
+const useScroll = (computeTop: () => void, emit: (...arsg: any[]) => void, wrapper: Ref<HTMLElement>) => {
   const scroll = {
     tick: 0,
     count: 0,
@@ -22,10 +22,11 @@ const useScroll = (computeTop: () => void, wrapper: Ref<HTMLElement>) => {
     stop()
   }
   const layout = (e: WheelEvent) => {
+    emit('wheel', e)
     if (scroll.stopWheel === true) e.preventDefault()
     if (scroll.tick === 0) loop()
     scroll.count++
-    setTimeout(delay, 300);
+    window.setTimeout(delay, 300);
   }
   const move = () => {
     opacity.value = 0.75

package/src/components/composables/useTimer.ts

@@ -1,5 +1,5 @@
 const useTimer = (handler: TimerHandler, timeout?: number | undefined, ...args: any[]): number => {
-    return window.setTimeout(handler, timeout, ...args)
+    return window.window.setTimeout(handler, timeout, ...args)
 }
 
 export { useTimer }

package/src/components/singleton/confirm.ts

@@ -6,13 +6,20 @@ const confirm = (config: Partial<Confirm> = {}) => {
     const app = createApp(ConfirmVue)
 
     const promise = new Promise<Confirm>((resolve) => {
-        const state = getConfirmState(config, (success) => {
+        let id = -1
+        const close = (success: boolean) => {
             state.value.visible = false
             app.unmount()
             config.value = state.value.value
             config.success = success
+            clearTimeout(id)
             resolve(config as Confirm)
-        })
+        }
+        const state = getConfirmState(config, close)
+
+        if (state.value.timeout > 0) {
+            id = window.setTimeout(() => close(false), config.timeout)
+        }
 
         app.provide(confirmKey, state)
         app.mount(document.createElement('div'))

package/src/components/utils/Confirm.ts

@@ -12,6 +12,7 @@ interface Confirm {
     options: ConfirmOptions
     mode: string
     placeholder: string
+    timeout: number
     success: boolean
 }
 
@@ -27,6 +28,7 @@ const getConfirmState = (config: Partial<Confirm>, close = (state: boolean) => {
         mode: config.mode,
         value: config.value,
         placeholder: config.placeholder,
+        timeout: config.timeout ?? 0,
         success: false,
         close
     })

package/src/components/utils/DynamicDialog.ts

@@ -16,10 +16,12 @@ interface Dialog {
     value: { [k: string]: any }
     options: DialogOptions
     width?: string
+    height?: string
     maxHeight?: string
     component?: DefineComponent<any, any, any>
     props?: { [k: string]: any }
     mask?: boolean
+    scroll?: boolean
     success: boolean
 }
 
@@ -33,10 +35,12 @@ const getDialogState = (config: Partial<Dialog>, close = (state: boolean) => { }
         options: config.options ?? [],
         value: config.value,
         width: config.width ?? '720px',
+        height: config.height,
         maxHeight: config.maxHeight ?? '70%',
         component: config.component ? markRaw(config.component) : undefined,
         props: config.props ?? {},
         mask: config.mask ?? false,
+        scroll: config.scroll ?? true,
         success: false,
         close
     })