feat: sync inner to open (#2533)

examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue

@@ -5,6 +5,16 @@
       <tiny-date-picker v-model="disabledValue" disabled placeholder="请选择日期"></tiny-date-picker>
     </div>
     <br />
+    <p>年禁用：</p>
+    <div class="demo-date-picker-wrap">
+      <tiny-date-picker
+        v-model="value"
+        type="year"
+        :picker-options="yearPickerOptions"
+        placeholder="请选择年"
+      ></tiny-date-picker>
+    </div>
+    <br />
     <p>部分禁用：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :picker-options="pickerOptions" placeholder="请选择日期"></tiny-date-picker>
@@ -46,6 +56,11 @@ const pickerOptions = {
     return time.getTime() > Date.now() || time.getTime() < new Date('2023-08-01').getTime()
   }
 }
+const yearPickerOptions = {
+  disabledDate(year) {
+    return year > 2025 || year < 2022
+  }
+}
 </script>
 
 <style scoped lang="less">

examples/sites/demos/pc/app/date-picker/disabled.vue

@@ -5,6 +5,16 @@
       <tiny-date-picker v-model="disabledValue" disabled placeholder="请选择日期"></tiny-date-picker>
     </div>
     <br />
+    <p>年禁用：</p>
+    <div class="demo-date-picker-wrap">
+      <tiny-date-picker
+        v-model="value"
+        type="year"
+        :picker-options="yearPickerOptions"
+        placeholder="请选择年"
+      ></tiny-date-picker>
+    </div>
+    <br />
     <p>部分禁用：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :picker-options="pickerOptions" placeholder="请选择日期"></tiny-date-picker>
@@ -47,7 +57,12 @@ export default {
       editableValue: '',
       pickerOptions: {
         disabledDate(time) {
-          return time.getTime() > Date.now() || time.getTime() < new Date('2023-08-01').getTime()
+          return time.getTime() > Date.now() || time.getTime() < new Date('2023-08-15').getTime()
+        }
+      },
+      yearPickerOptions: {
+        disabledDate(year) {
+          return year > 2025 || year < 2022
         }
       }
     }

examples/sites/demos/pc/app/select/optimization-composition-api.vue

@@ -2,13 +2,14 @@
   <div>
     <p>单选：</p>
     <br />
-    <tiny-select v-model="value1" :options="options" optimization @change="onChange"></tiny-select>
+    <tiny-select v-model="value1" :options="options" filterable optimization @change="onChange"></tiny-select>
     <br /><br />
     <p>多选：</p>
     <br />
     <tiny-select
       v-model="value2"
       optimization
+      filterable
       multiple
       collapse-tags
       :multiple-limit="5"
@@ -41,6 +42,7 @@ const onChange = (value) => {
 .tiny-select {
   width: 280px;
 }
+
 p {
   font-size: 14px;
   line-height: 1.5;

examples/sites/demos/pc/app/select/optimization.vue

@@ -2,13 +2,14 @@
   <div>
     <p>单选：</p>
     <br />
-    <tiny-select v-model="value1" :options="options" optimization @change="onChange"></tiny-select>
+    <tiny-select v-model="value1" :options="options" filterable optimization @change="onChange"></tiny-select>
     <br /><br />
     <p>多选：</p>
     <br />
     <tiny-select
       v-model="value2"
       optimization
+      filterable
       multiple
       collapse-tags
       :multiple-limit="5"
@@ -50,6 +51,7 @@ export default {
 .tiny-select {
   width: 280px;
 }
+
 p {
   font-size: 14px;
   line-height: 1.5;

internals/cli/src/commands/release/releaseAurora.ts

@@ -42,6 +42,7 @@ const findAllpage = (packagesPath) => {
       .replace(/"(.*?\/xss)"/g, '"@aurora/utils"')
       // @opentiny/fluent-editor 包是与框架无关的包
       .replace(/@aurora\/fluent-editor/g, '@opentiny/fluent-editor')
+      .replace(/@aurora\/huicharts/g, '@opentiny/huicharts')
 
     // 解决当AUI只有一个mobile-first模板而TinyVue有多个模板，导致Linkjs加载不到多端模板的问题
     if (

packages/design/aurora/src/popeditor/index.ts

@@ -3,8 +3,8 @@ export default {
     const state = api.state
 
     return {
-      treeWrapperMaxHeight() {
-        state.treeWrapperMaxHeight = 'auto'
+      computedTreeMaxHeight() {
+        state.treeWrapperMaxHeight = ''
       }
     }
   }

packages/design/aurora/src/select/index.ts

@@ -20,7 +20,8 @@ export default {
     delayBlur: true
   },
   props: {
-    tagType: 'info'
+    tagType: 'info',
+    stopPropagation: true
   },
   renderless: (props, hooks, { emit }, api) => {
     const state = api.state

packages/design/saas/src/popeditor/index.ts

@@ -3,8 +3,8 @@ export default {
     const state = api.state
 
     return {
-      treeWrapperMaxHeight() {
-        state.treeWrapperMaxHeight = 'auto'
+      computedTreeMaxHeight() {
+        state.treeWrapperMaxHeight = ''
       }
     }
   }

packages/design/saas/src/select/index.ts

@@ -23,7 +23,8 @@ export default {
     delayBlur: true
   },
   props: {
-    tagType: 'info'
+    tagType: 'info',
+    stopPropagation: true
   },
   renderless: (props, hooks, { emit }, api) => {
     const state = api.state

packages/renderless/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.19.5",
+  "version": "3.19.4",
   "private": true,
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",

packages/renderless/src/common/deps/useUserAgent.ts

@@ -0,0 +1,18 @@
+import { isServer } from './dom'
+
+function getIsIOS() {
+  if (isServer) return false
+  return (
+    window.navigator &&
+    window.navigator.userAgent &&
+    (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) ||
+      // The new iPad Pro Gen3 does not identify itself as iPad, but as Macintosh.
+      // https://github.com/vueuse/vueuse/issues/3577
+      (window.navigator.maxTouchPoints > 2 && /iPad|Macintosh/.test(window.navigator.userAgent)))
+  )
+}
+
+export const useUserAgent = () => {
+  const isIOS = getIsIOS()
+  return { isIOS }
+}

packages/renderless/src/common/event.ts

@@ -41,6 +41,7 @@ export const emitEvent = (emit, name, ...args) => {
 
     args.unshift(event)
     args.unshift(name)
+    // eslint-disable-next-line prefer-spread
     emit.apply(null, args)
   }
 
@@ -59,3 +60,26 @@ export const getActualTarget = (e) => {
   }
   return e.target.shadowRoot && e.composed ? e.composedPath()[0] || e.target : e.target
 }
+
+export const correctTarget = (event, target?: EventTarget) => {
+  let newTarget
+
+  if (event.target === null && target) {
+    newTarget = target
+  } else {
+    const nodeList = event.composedPath()
+    if (event.target !== nodeList[0]) {
+      newTarget = nodeList[0]
+    }
+  }
+
+  if (newTarget) {
+    Object.defineProperty(event, 'target', {
+      get() {
+        return newTarget
+      },
+      enumerable: true,
+      configurable: true
+    })
+  }
+}

packages/renderless/src/date-picker-mobile/index.ts

@@ -63,7 +63,7 @@ export const formatDate =
 const getDateFromStr = (dateStr, direction = 'top') => {
   const arr = dateStr.split('/').map((item) => +item)
   const yarr = arr[0]
-  const month = direction == 'top' ? arr[1] - 1 : arr[1]
+  const month = direction === 'top' ? arr[1] - 1 : arr[1]
   return new Date(yarr, month, 1)
 }
 
@@ -99,12 +99,12 @@ export const initPanel =
     let date = new Date(year, month - 1, 1) // 加载日历的起始日期
     const dateList = {}
 
-    Array.from({ length: 12 * state.yearNum }).map(() => {
+    Array.from({ length: 12 * state.yearNum }).forEach(() => {
       const startWeek = date.getDay()
       dateList[getDateStr(year, month)] = Array.from({ length: startWeek }).map(() => ({}))
       const days = getDaysByMonth(year, month)
 
-      Array.from({ length: days }).map((v, index) => {
+      Array.from({ length: days }).forEach((v, index) => {
         const day = index + 1
         const dayInfo = api.getCurrentDate(new Date(year, month - 1, day))
 
@@ -276,9 +276,8 @@ export const selectOption =
       }
     } else {
       state.date = new Date(current.value)
-
-      emit('click', current)
     }
+    emit('click', current)
   }
 
 export const confirm =
@@ -391,16 +390,20 @@ export const scrollEnd =
     state.isYearMonthPanel ? api.loadYearMonth('down') : api.loadingDate('down')
   }
 
-export const clear = ({ state, emit, api }) => () => {
-  state.date = Array.isArray(state.date) ? [] : ''
+export const clear =
+  ({ state, emit, api }) =>
+  () => {
+    state.date = Array.isArray(state.date) ? [] : ''
 
-  emit('update:modelValue', state.date)
-  emit('clear', state.date)
-  api.close()
-}
+    emit('update:modelValue', state.date)
+    emit('clear', state.date)
+    api.close()
+  }
 
-export const close = ({ emit, vm }) => () => {
-  vm.$refs.actionSheet.close()
+export const close =
+  ({ emit, vm }) =>
+  () => {
+    vm.$refs.actionSheet.close()
 
-  emit('close')
-}
+    emit('close')
+  }

packages/renderless/src/dialog-box/index.ts

@@ -290,7 +290,7 @@ export const handleDrag =
     vm
   }: Pick<IDialogBoxRenderlessParams, 'parent' | 'props' | 'state' | 'emit' | 'vm'>) =>
   (event: MouseEvent): void => {
-    if (!props.draggable) {
+    if (!props.draggable || state.isFull) {
       return
     }
 

packages/renderless/src/dropdown/index.ts

@@ -266,7 +266,7 @@ export const mounted =
   }
 
 export const beforeDistory =
-  ({ api, state }: Pick<IDropdownRenderlessParams, 'api' | 'state'>) =>
+  ({ vm, api, state }: Pick<IDropdownRenderlessParams, 'vm' | 'api' | 'state'>) =>
   () => {
     if (state.triggerElm) {
       off(state.triggerElm, 'keydown', api.handleTriggerKeyDown)
@@ -287,6 +287,11 @@ export const beforeDistory =
 
       state.dropdownElm = null
     }
+
+    vm.$off('menu-item-click')
+    vm.$off('current-item-click')
+    vm.$off('selected-index')
+    vm.$off('is-disabled')
   }
 
 export const clickOutside =

packages/renderless/src/dropdown/vue.ts

@@ -84,8 +84,8 @@ export const renderless = (
     handleMainButtonClick: handleMainButtonClick({ api, emit }),
     triggerElmFocus: triggerElmFocus(state),
     initDomOperation: initDomOperation({ api, state, vm }),
-    beforeDistory: beforeDistory({ api, state }),
-    clickOutside: clickOutside({ state, props, api })
+    beforeDistory: beforeDistory({ vm, api, state }),
+    clickOutside: clickOutside({ props, api })
   })
 
   watch(() => state.visible, api.watchVisible)

packages/renderless/src/file-upload/vue.ts

@@ -366,6 +366,7 @@ export const renderless = (
   onBeforeUnmount(() => {
     api.onBeforeDestroy()
     api = {} as IFileUploadApi
+    vm.$off('drag-over')
   })
 
   initWatch({ watch, state, api, props, $service })

packages/renderless/src/form-item/index.ts

@@ -276,6 +276,7 @@ export const unmounted =
   (): void => {
     state.canShowTip = false
     api.dispatch('Form', 'form:removeField', vm)
+    api.removeValidateEvents()
   }
 
 export const validate =
@@ -452,7 +453,9 @@ export const addValidateEvents =
   }
 
 export const removeValidateEvents = (vm: IFormItemRenderlessParams['vm']) => (): void => {
-  vm.$off()
+  vm.$off('form.blur')
+  vm.$off('form.change')
+  vm.$off('displayed-value-changed')
 }
 
 export const updateTip =

packages/renderless/src/input/index.ts

@@ -283,7 +283,7 @@ export const resizeTextarea =
       return
     }
 
-    if (!autosize) {
+    if (!autosize || state.isDisplayOnly) {
       state.textareaCalcStyle = {
         minHeight: api.calcTextareaHeight(vm.$refs.textarea).minHeight
       }

packages/renderless/src/menu/vue.ts

@@ -22,7 +22,7 @@ const initState = ({ reactive, computed, props, api }) => {
   })
   return state
 }
-export const renderless = (props, { reactive, watch, onMounted, computed }, { vm, emit, nextTick }) => {
+export const renderless = (props, { reactive, watch, onMounted, computed, onUnmounted }, { vm, emit, nextTick }) => {
   const api = {}
 
   const state = initState({ reactive, computed, props, api })
@@ -95,5 +95,10 @@ export const renderless = (props, { reactive, watch, onMounted, computed }, { vm
     })
   })
 
+  onUnmounted(() => {
+    vm.$off('node-clicked')
+    vm.$off('node-changed')
+  })
+
   return api
 }