@vyr/design 0.0.32 → 0.0.34

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "@vyr/design",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "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/Popover.vue

@@ -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/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,6 +22,7 @@ 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++

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 = 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
     })

package/src/font/demo_index.html

@@ -55,33 +55,33 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
-              <span class="icon vyrfont">&#xe67d;</span>
-                <div class="name">search</div>
-                <div class="code-name">&amp;#xe67d;</div>
+              <span class="icon vyrfont">&#xe663;</span>
+                <div class="name">错误列表</div>
+                <div class="code-name">&amp;#xe663;</div>
               </li>
           
             <li class="dib">
-              <span class="icon vyrfont">&#xe645;</span>
-                <div class="name">删除</div>
-                <div class="code-name">&amp;#xe645;</div>
+              <span class="icon vyrfont">&#xe872;</span>
+                <div class="name">ai</div>
+                <div class="code-name">&amp;#xe872;</div>
               </li>
           
             <li class="dib">
-              <span class="icon vyrfont">&#xe6a5;</span>
-                <div class="name">preset</div>
-                <div class="code-name">&amp;#xe6a5;</div>
+              <span class="icon vyrfont">&#xe648;</span>
+                <div class="name">预制体</div>
+                <div class="code-name">&amp;#xe648;</div>
               </li>
           
             <li class="dib">
-              <span class="icon vyrfont">&#xe64e;</span>
-                <div class="name">激活</div>
-                <div class="code-name">&amp;#xe64e;</div>
+              <span class="icon vyrfont">&#xe67d;</span>
+                <div class="name">search</div>
+                <div class="code-name">&amp;#xe67d;</div>
               </li>
           
             <li class="dib">
-              <span class="icon vyrfont">&#xe75b;</span>
-                <div class="name">动画</div>
-                <div class="code-name">&amp;#xe75b;</div>
+              <span class="icon vyrfont">&#xe6a5;</span>
+                <div class="name">preset</div>
+                <div class="code-name">&amp;#xe6a5;</div>
               </li>
           
             <li class="dib">
@@ -126,12 +126,6 @@
                 <div class="code-name">&amp;#xe60d;</div>
               </li>
           
-            <li class="dib">
-              <span class="icon vyrfont">&#xe65f;</span>
-                <div class="name">预制体</div>
-                <div class="code-name">&amp;#xe65f;</div>
-              </li>
-          
             <li class="dib">
               <span class="icon vyrfont">&#xe817;</span>
                 <div class="name">json</div>
@@ -176,7 +170,7 @@
           
             <li class="dib">
               <span class="icon vyrfont">&#xe717;</span>
-                <div class="name">数据集</div>
+                <div class="name">数据容器</div>
                 <div class="code-name">&amp;#xe717;</div>
               </li>
           
@@ -372,9 +366,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'vyrfont';
-  src: url('iconfont.woff2?t=1767237848841') format('woff2'),
-       url('iconfont.woff?t=1767237848841') format('woff'),
-       url('iconfont.ttf?t=1767237848841') format('truetype');
+  src: url('iconfont.woff2?t=1773586535090') format('woff2'),
+       url('iconfont.woff?t=1773586535090') format('woff'),
+       url('iconfont.ttf?t=1773586535090') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -401,47 +395,47 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
-            <span class="icon vyrfont vyr-search"></span>
+            <span class="icon vyrfont vyr-liebiao3"></span>
             <div class="name">
-              search
+              错误列表
             </div>
-            <div class="code-name">.vyr-search
+            <div class="code-name">.vyr-liebiao3
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon vyrfont vyr-delete"></span>
+            <span class="icon vyrfont vyr-ai"></span>
             <div class="name">
-              删除
+              ai
             </div>
-            <div class="code-name">.vyr-delete
+            <div class="code-name">.vyr-ai
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon vyrfont vyr-preset"></span>
+            <span class="icon vyrfont vyr-sidebar-prefab"></span>
             <div class="name">
-              preset
+              预制体
             </div>
-            <div class="code-name">.vyr-preset
+            <div class="code-name">.vyr-sidebar-prefab
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon vyrfont vyr-active"></span>
+            <span class="icon vyrfont vyr-search"></span>
             <div class="name">
-              激活
+              search
             </div>
-            <div class="code-name">.vyr-active
+            <div class="code-name">.vyr-search
             </div>
           </li>
           
           <li class="dib">
-            <span class="icon vyrfont vyr-hover"></span>
+            <span class="icon vyrfont vyr-preset"></span>
             <div class="name">
-              动画
+              preset
             </div>
-            <div class="code-name">.vyr-hover
+            <div class="code-name">.vyr-preset
             </div>
           </li>
           
@@ -473,11 +467,11 @@
           </li>
           
           <li class="dib">
-            <span class="icon vyrfont vyr-changjing"></span>
+            <span class="icon vyrfont vyr-category-scene"></span>
             <div class="name">
               场景
             </div>
-            <div class="code-name">.vyr-changjing
+            <div class="code-name">.vyr-category-scene
             </div>
           </li>
           
@@ -508,15 +502,6 @@
             </div>
           </li>
           
-          <li class="dib">
-            <span class="icon vyrfont vyr-category-prefab"></span>
-            <div class="name">
-              预制体
-            </div>
-            <div class="code-name">.vyr-category-prefab
-            </div>
-          </li>
-          
           <li class="dib">
             <span class="icon vyrfont vyr-category-json"></span>
             <div class="name">
@@ -581,11 +566,11 @@
           </li>
           
           <li class="dib">
-            <span class="icon vyrfont vyr-category-dataset"></span>
+            <span class="icon vyrfont vyr-category-store"></span>
             <div class="name">
-              数据集
+              数据容器
             </div>
-            <div class="code-name">.vyr-category-dataset
+            <div class="code-name">.vyr-category-store
             </div>
           </li>
           
@@ -879,42 +864,42 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#vyr-search"></use>
+                  <use xlink:href="#vyr-liebiao3"></use>
                 </svg>
-                <div class="name">search</div>
-                <div class="code-name">#vyr-search</div>
+                <div class="name">错误列表</div>
+                <div class="code-name">#vyr-liebiao3</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#vyr-delete"></use>
+                  <use xlink:href="#vyr-ai"></use>
                 </svg>
-                <div class="name">删除</div>
-                <div class="code-name">#vyr-delete</div>
+                <div class="name">ai</div>
+                <div class="code-name">#vyr-ai</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#vyr-preset"></use>
+                  <use xlink:href="#vyr-sidebar-prefab"></use>
                 </svg>
-                <div class="name">preset</div>
-                <div class="code-name">#vyr-preset</div>
+                <div class="name">预制体</div>
+                <div class="code-name">#vyr-sidebar-prefab</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#vyr-active"></use>
+                  <use xlink:href="#vyr-search"></use>
                 </svg>
-                <div class="name">激活</div>
-                <div class="code-name">#vyr-active</div>
+                <div class="name">search</div>
+                <div class="code-name">#vyr-search</div>
             </li>
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#vyr-hover"></use>
+                  <use xlink:href="#vyr-preset"></use>
                 </svg>
-                <div class="name">动画</div>
-                <div class="code-name">#vyr-hover</div>
+                <div class="name">preset</div>
+                <div class="code-name">#vyr-preset</div>
             </li>
           
             <li class="dib">
@@ -943,10 +928,10 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#vyr-changjing"></use>
+                  <use xlink:href="#vyr-category-scene"></use>
                 </svg>
                 <div class="name">场景</div>
-                <div class="code-name">#vyr-changjing</div>
+                <div class="code-name">#vyr-category-scene</div>
             </li>
           
             <li class="dib">
@@ -973,14 +958,6 @@
                 <div class="code-name">#vyr-tingzhi</div>
             </li>
           
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#vyr-category-prefab"></use>
-                </svg>
-                <div class="name">预制体</div>
-                <div class="code-name">#vyr-category-prefab</div>
-            </li>
-          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#vyr-category-json"></use>
@@ -1039,10 +1016,10 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#vyr-category-dataset"></use>
+                  <use xlink:href="#vyr-category-store"></use>
                 </svg>
-                <div class="name">数据集</div>
-                <div class="code-name">#vyr-category-dataset</div>
+                <div class="name">数据容器</div>
+                <div class="code-name">#vyr-category-store</div>
             </li>
           
             <li class="dib">