fix(mobile): fix mobile components build error (#2696)

packages/mobile/components/container/index.ts

@@ -10,7 +10,6 @@
  *
  */
 import Container from './src/mobile.vue'
-import '@opentiny/vue-theme/container/index.less'
 
 /* istanbul ignore next */
 Container.install = function (Vue) {

packages/mobile/components/date-picker/src/mobile.vue

@@ -19,7 +19,9 @@
       readOnly="true"
       :_mode="_mode"
     >
-      <icon-close slot="suffix" v-if="!state.clearable" @click="clearDisplayValue"></icon-close>
+      <template #suffix>
+        <icon-close v-if="!state.clearable" @click="clearDisplayValue"></icon-close>
+      </template>
     </tiny-input>
     <tiny-mini-picker
       v-model:visible="state.visible"
@@ -38,7 +40,6 @@ import { renderless, api } from './renderless/vue'
 import MiniPicker from '../../mini-picker'
 import Input from '../../input'
 import { iconCloseCircle } from '@opentiny/vue-icon'
-import '@opentiny/vue-theme/date-picker/index.less'
 
 export default defineComponent({
   components: {

packages/mobile/components/loading/index.ts

@@ -11,7 +11,7 @@
  */
 import service from './src/service'
 import directive from './src/directive'
-import { setupComponent } from '../../../vue-common'
+import { setupComponent } from '../../vue-common'
 
 const Loadings: any = {
   install(app) {

packages/mobile/components/modal/index.ts

@@ -10,7 +10,7 @@
  *
  */
 
-import { createComponent, setupComponent } from '../../../vue-common'
+import { createComponent, setupComponent } from '../../vue-common'
 import { MsgQueue } from './src/renderless'
 import TINYModal from './src/mobile.vue'
 

packages/mobile/components/multi-select-item/src/mobile.vue

@@ -49,10 +49,10 @@
 </template>
 
 <script lang="ts">
-import { $prefix, props, setup, defineComponent } from '../../../vue-common'
+import { $prefix, setup, defineComponent } from '../../../vue-common'
 import { renderless, api } from './renderless/vue'
 import { iconChevronDown } from '@opentiny/vue-icon'
-import Button from '@opentiny/vue-button'
+import Button from '../../button'
 import { multiSelectItemProps } from './multi-select-item'
 import '@opentiny/vue-theme-mobile/multi-select-item/index.less'
 

packages/mobile/components/popover/index.ts

@@ -10,7 +10,6 @@
  *
  */
 import Popover from './src/mobile.vue'
-import '@opentiny/vue-theme/popover/index.less'
 
 /* istanbul ignore next */
 Popover.install = function (Vue) {

packages/mobile/components/tooltip/src/mobile.vue

@@ -22,8 +22,7 @@ import {
   defineComponent,
   isEmptyVnode,
   hooks
-} from '../../..//vue-common'
-import '@opentiny/vue-theme/tooltip/index.less'
+} from '../../../vue-common'
 import type { ITooltipApi, ITinyVm } from './tooltip'
 import { tooltipProps } from './tooltip'
 

packages/mobile/components/upload/src/mobile.vue

@@ -11,7 +11,7 @@
  -->
 
 <script lang="tsx">
-import { $prefix, setup, h, defineComponent, props } from '@opentiny/vue-common'
+import { $prefix, setup, h, defineComponent } from '../../../vue-common'
 
 // 此处引入 h 是为了防止打包后 h 被重命名导致组件报错的问题
 import { renderless, api } from './renderless/vue'
@@ -37,7 +37,6 @@ export default defineComponent({
     let {
       accept,
       disabled,
-      drag,
       handleChange,
       handleClick,
       handlePaste,
@@ -46,7 +45,6 @@ export default defineComponent({
       listType,
       multiple,
       name,
-      uploadFiles,
       fileList,
       limit,
       isHidden,

packages/mobile/package.json

@@ -32,6 +32,7 @@
     "@better-scroll/wheel": "^2.5.0",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/mobile-utils": "workspace:~",
+    "@opentiny/vue-theme-mobile": "workspace:~",
     "@opentiny/vue-locale": "workspace:~"
   },
   "devDependencies": {

packages/mobile/vite.config.ts

@@ -1,19 +1,16 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import dts from 'vite-plugin-dts'
 import svgLoader from 'vite-svg-loader'
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueJsx(), dts(), svgLoader()],
+  plugins: [vue(), vueJsx(), svgLoader()],
   build: {
     lib: {
       entry: './index.ts'
     },
-    minify: true,
     rollupOptions: {
-      external: [/@better-scroll/, /@opentiny/],
+      external: [/@opentiny\/vue/, /@better-scroll/, 'vue', 'xss'],
       input: ['index.ts'],
       output: [
         {

packages/mobile/vue-common/index.ts

@@ -20,7 +20,6 @@ import {
 } from './src/adapter'
 import { t } from '@opentiny/vue-locale'
 import { stringifyCssClass, stringifyCssClassObject, stringifyCssClassArray, deduplicateCssClass } from './src/csscls'
-import '@opentiny/vue-theme/base/index.less'
 import { defineComponent, isVue2, isVue3 } from './src/adapter'
 import { useBreakpoint } from './src/breakpoint'
 import { useDefer } from './src/usedefer'
@@ -164,7 +163,6 @@ export const setup = ({ props, context, renderless, api, extendOptions = {}, cla
   const globalDesignConfig: DesignConfig = customDesignConfig.designConfig || hooks.inject(design.configKey, {})
   const designConfig = globalDesignConfig?.components?.[getComponentName().replace($prefix, '')]
 
-  const specifyPc = typeof process === 'object' ? process.env?.TINY_MODE : null
   const utils = {
     $prefix,
     t,
@@ -233,16 +231,14 @@ export function svg({ name = 'Icon', component }) {
       defineComponent({
         name: $prefix + name,
         setup: (props, context) => {
-          const { fill, width, height, 'custom-class': customClass } = context.attrs || {}
+          const { fill, width, height } = context.attrs || {}
           const mergeProps = Object.assign({}, props, propData || null)
           const mode = resolveMode(mergeProps, context)
           const isMobileFirst = mode === 'mobile-first'
           const tinyTag = { 'data-tag': isMobileFirst ? 'tiny-svg' : null }
           const attrs = isVue3 ? tinyTag : { attrs: tinyTag }
           let className = 'tiny-svg'
 
-          const specifyPc = typeof process === 'object' ? process.env?.TINY_MODE : null
-
           const extend = Object.assign(
             {
               style: { fill, width, height },