@mc-markets/ui 1.0.0 → 1.0.2

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@mc-markets/ui",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "author": "chenyu",
-  "description": "一个功能强大的 Vue 3 UI 组件库，提供完整的 TypeScript 支持",
+  "description": "Element Plus 完整导出包，提供所有组件、指令和服务",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,12 +15,26 @@
       "types": "./dist/index.d.ts"
     },
     "./style": "./dist/style.css",
-    "./dist/style.css": "./dist/style.css",
-    "./resolver": "./dist/resolver.js"
+    "./styles": "./dist/style.css",
+    "./css-variables": "./packages/styles/css-variables.css",
+    "./scss-variables": "./packages/styles/variables.scss",
+    "./theme-config": "./packages/styles/theme-config.ts",
+    "./element-plus": {
+      "import": "./node_modules/element-plus/dist/index.full.mjs",
+      "require": "./node_modules/element-plus/dist/index.full.js",
+      "types": "./node_modules/element-plus/dist/index.d.ts"
+    },
+    "./element-plus/style": "./node_modules/element-plus/dist/index.css",
+    "./element-plus/styles": "./node_modules/element-plus/dist/index.css",
+    "./locales": "./dist/locales/index.js",
+    "./themes": "./dist/themes/index.js"
   },
   "files": [
     "dist",
-    "README.md"
+    "packages/styles",
+    "README.md",
+    "USAGE.md",
+    "node_modules/element-plus/dist"
   ],
   "keywords": [
     "vue3",
@@ -28,12 +42,9 @@
     "ui",
     "component",
     "element-plus",
-    "pro-table",
-    "pro-form",
-    "search-form",
-    "grid",
-    "icon",
-    "dialog"
+    "element-ui",
+    "ui-library",
+    "components"
   ],
   "license": "MIT",
   "scripts": {
@@ -46,37 +57,19 @@
     "test": "vitest",
     "test:coverage": "vitest --coverage",
     "prepublishOnly": "npm run build",
-    "publish:lib": "node publish.js"
+    "publish:lib": "node publish.js",
+    "demo": "npm run dev",
+    "demo:build": "npm run build",
+    "demo:preview": "npm run preview"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.13.2",
-    "@vueuse/core": "^9.13.0",
-    "@vueuse/integrations": "^9.13.0",
-    "axios": "^1.3.5",
-    "commitizen": "^4.3.0",
-    "dayjs": "^1.11.7",
-    "element-plus": "^2.8.3",
-    "eruda": "^3.0.0",
-    "eslint-config-prettier": "^8.8.0",
-    "hotkeys-js": "^3.10.2",
-    "lodash-es": "^4.17.21",
-    "mitt": "^3.0.0",
-    "mockjs": "^1.1.0",
-    "npm": "^9.6.6",
-    "nprogress": "^0.2.0",
-    "path-browserify": "^1.0.1",
-    "path-to-regexp": "^6.2.1",
-    "pinia": "^2.0.34",
-    "pinia-plugin-persist": "^1.0.0",
-    "pinia-plugin-persistedstate": "^3.1.0",
-    "qs": "^6.11.1",
-    "vconsole": "^3.15.0",
-    "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "@vueuse/core": "^10.5.0",
+    "element-plus": "^2.8.0",
+    "vue": "^3.3.0"
   },
   "peerDependencies": {
-    "vue": "^3.3.0",
-    "element-plus": "^2.8.0"
+    "element-plus": "^2.8.0",
+    "vue": "^3.3.0"
   },
   "peerDependenciesMeta": {
     "element-plus": {
@@ -89,12 +82,12 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://gitee.com/daboluoxigua/npm-pro-ui.git"
+    "url": "https://gitee.com/daboluoxigua/npm-mc-markets-ui.git"
   },
   "bugs": {
-    "url": "https://gitee.com/daboluoxigua/npm-pro-ui/issues"
+    "url": "https://gitee.com/daboluoxigua/npm-mc-markets-ui/issues"
   },
-  "homepage": "https://gitee.com/daboluoxigua/npm-pro-ui#readme",
+  "homepage": "https://gitee.com/daboluoxigua/npm-mc-markets-ui#readme",
   "publishConfig": {
     "access": "public"
   },
@@ -133,7 +126,7 @@
     "svgo": "^3.0.2",
     "terser": "^5.16.9",
     "typescript": "^5.0.4",
-    "unplugin-auto-import": "^0.15.2",
+    "unplugin-auto-import": "^0.15.3",
     "unplugin-vue-components": "^0.24.1",
     "vite": "^4.2.1",
     "vite-plugin-banner": "^0.7.0",

package/packages/styles/css-variables.css

@@ -0,0 +1,197 @@
+/**
+ * @mc-markets/ui - Element Plus CSS 变量配置
+ * 
+ * 基于 Element Plus 官方主题定制指南
+ * @see https://element-plus.org/zh-CN/guide/theming.html
+ */
+
+:root {
+  /* 主色调 */
+  --el-color-primary: #409eff;
+  --el-color-primary-light-3: #79bbff;
+  --el-color-primary-light-5: #a0cfff;
+  --el-color-primary-light-7: #c6e2ff;
+  --el-color-primary-light-8: #d9ecff;
+  --el-color-primary-light-9: #ecf5ff;
+  --el-color-primary-dark-2: #337ecc;
+  
+  /* 成功色 */
+  --el-color-success: #67c23a;
+  --el-color-success-light-3: #95d475;
+  --el-color-success-light-5: #b3e19d;
+  --el-color-success-light-7: #d1edc4;
+  --el-color-success-light-8: #e1f3d8;
+  --el-color-success-light-9: #f0f9ff;
+  --el-color-success-dark-2: #529b2e;
+  
+  /* 警告色 */
+  --el-color-warning: #e6a23c;
+  --el-color-warning-light-3: #eebe77;
+  --el-color-warning-light-5: #f3d19e;
+  --el-color-warning-light-7: #f8e3c5;
+  --el-color-warning-light-8: #faecd8;
+  --el-color-warning-light-9: #fdf6ec;
+  --el-color-warning-dark-2: #b88230;
+  
+  /* 危险色 */
+  --el-color-danger: #f56c6c;
+  --el-color-danger-light-3: #f89898;
+  --el-color-danger-light-5: #fab6b6;
+  --el-color-danger-light-7: #fcd3d3;
+  --el-color-danger-light-8: #fde2e2;
+  --el-color-danger-light-9: #fef0f0;
+  --el-color-danger-dark-2: #c45656;
+  
+  /* 错误色 */
+  --el-color-error: #f56c6c;
+  --el-color-error-light-3: #f89898;
+  --el-color-error-light-5: #fab6b6;
+  --el-color-error-light-7: #fcd3d3;
+  --el-color-error-light-8: #fde2e2;
+  --el-color-error-light-9: #fef0f0;
+  --el-color-error-dark-2: #c45656;
+  
+  /* 信息色 */
+  --el-color-info: #909399;
+  --el-color-info-light-3: #b1b3b8;
+  --el-color-info-light-5: #c8c9cc;
+  --el-color-info-light-7: #dedfe0;
+  --el-color-info-light-8: #e9e9eb;
+  --el-color-info-light-9: #f4f4f5;
+  --el-color-info-dark-2: #73767a;
+  
+  /* 文本颜色 */
+  --el-text-color-primary: #303133;
+  --el-text-color-regular: #606266;
+  --el-text-color-secondary: #909399;
+  --el-text-color-placeholder: #a8abb2;
+  --el-text-color-disabled: #c0c4cc;
+  
+  /* 边框颜色 */
+  --el-border-color: #dcdfe6;
+  --el-border-color-light: #e4e7ed;
+  --el-border-color-lighter: #ebeef5;
+  --el-border-color-extra-light: #f2f6fc;
+  --el-border-color-dark: #d4d7de;
+  --el-border-color-darker: #cdd0d6;
+  
+  /* 填充颜色 */
+  --el-fill-color: #f0f2f5;
+  --el-fill-color-light: #f5f7fa;
+  --el-fill-color-lighter: #fafafa;
+  --el-fill-color-extra-light: #fafcff;
+  --el-fill-color-dark: #ebedf0;
+  --el-fill-color-darker: #e6e8eb;
+  --el-fill-color-blank: #ffffff;
+  
+  /* 背景颜色 */
+  --el-bg-color: #ffffff;
+  --el-bg-color-page: #f2f3f5;
+  --el-bg-color-overlay: #ffffff;
+  
+  /* 字体大小 */
+  --el-font-size-extra-large: 20px;
+  --el-font-size-large: 18px;
+  --el-font-size-medium: 16px;
+  --el-font-size-base: 14px;
+  --el-font-size-small: 13px;
+  --el-font-size-extra-small: 12px;
+  
+  /* 圆角 */
+  --el-border-radius-base: 4px;
+  --el-border-radius-small: 2px;
+  --el-border-radius-round: 20px;
+  --el-border-radius-circle: 100%;
+  
+  /* 阴影 */
+  --el-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  --el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  --el-box-shadow-lighter: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  --el-box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
+  
+  /* 间距 */
+  --el-spacing-base: 20px;
+  --el-spacing-small: 10px;
+  --el-spacing-large: 30px;
+  
+  /* 动画时长 */
+  --el-transition-duration: 0.3s;
+  --el-transition-duration-fast: 0.2s;
+  --el-transition-duration-slow: 0.5s;
+  
+  /* 动画函数 */
+  --el-transition-function-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --el-transition-function-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --el-transition-function-ease-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  
+  /* z-index */
+  --el-z-index-normal: 1;
+  --el-z-index-top: 1000;
+  --el-z-index-popper: 2000;
+}
+
+/* 暗色主题 */
+.dark {
+  --el-color-primary: #409eff;
+  --el-color-success: #67c23a;
+  --el-color-warning: #e6a23c;
+  --el-color-danger: #f56c6c;
+  --el-color-error: #f56c6c;
+  --el-color-info: #909399;
+  
+  --el-text-color-primary: #e5eaf3;
+  --el-text-color-regular: #cfd3dc;
+  --el-text-color-secondary: #a3a6ad;
+  --el-text-color-placeholder: #8d9095;
+  --el-text-color-disabled: #6c6e72;
+  
+  --el-border-color: #4c4d4f;
+  --el-border-color-light: #414243;
+  --el-border-color-lighter: #363637;
+  --el-border-color-extra-light: #2b2b2c;
+  --el-border-color-dark: #58585b;
+  --el-border-color-darker: #636466;
+  
+  --el-fill-color: #262727;
+  --el-fill-color-light: #1d1d1d;
+  --el-fill-color-lighter: #171717;
+  --el-fill-color-extra-light: #111111;
+  --el-fill-color-dark: #2b2b2c;
+  --el-fill-color-darker: #363637;
+  --el-fill-color-blank: #141414;
+  
+  --el-bg-color: #141414;
+  --el-bg-color-page: #0a0a0a;
+  --el-bg-color-overlay: #1d1e1f;
+}
+
+/* 自定义主题类 */
+.mc-markets-theme-blue {
+  --el-color-primary: #1890ff;
+  --el-color-primary-light-3: #40a9ff;
+  --el-color-primary-light-5: #69c0ff;
+  --el-color-primary-light-7: #91d5ff;
+  --el-color-primary-light-8: #bae7ff;
+  --el-color-primary-light-9: #e6f7ff;
+  --el-color-primary-dark-2: #096dd9;
+}
+
+.mc-markets-theme-green {
+  --el-color-primary: #52c41a;
+  --el-color-primary-light-3: #73d13d;
+  --el-color-primary-light-5: #95de64;
+  --el-color-primary-light-7: #b7eb8f;
+  --el-color-primary-light-8: #d9f7be;
+  --el-color-primary-light-9: #f6ffed;
+  --el-color-primary-dark-2: #389e0d;
+}
+
+.mc-markets-theme-purple {
+  --el-color-primary: #722ed1;
+  --el-color-primary-light-3: #9254de;
+  --el-color-primary-light-5: #b37feb;
+  --el-color-primary-light-7: #d3adf7;
+  --el-color-primary-light-8: #efdbff;
+  --el-color-primary-light-9: #f9f0ff;
+  --el-color-primary-dark-2: #531dab;
+}

package/packages/styles/theme-config.ts

@@ -0,0 +1,261 @@
+/**
+ * @mc-markets/ui - 主题配置工具
+ * 
+ * 基于 Element Plus 官方主题定制指南
+ * @see https://element-plus.org/zh-CN/guide/theming.html
+ */
+
+export interface ThemeConfig {
+  /** 主题名称 */
+  name?: string
+  /** 是否暗色主题 */
+  dark?: boolean
+  /** 自定义CSS变量 */
+  cssVars?: Record<string, string>
+  /** 自定义类名 */
+  customClass?: string
+  /** 主色调 */
+  primaryColor?: string
+  /** 成功色 */
+  successColor?: string
+  /** 警告色 */
+  warningColor?: string
+  /** 危险色 */
+  dangerColor?: string
+  /** 信息色 */
+  infoColor?: string
+}
+
+export class ThemeConfigManager {
+  private static instance: ThemeConfigManager
+  private currentTheme: ThemeConfig = { name: 'default', dark: false }
+  
+  static getInstance(): ThemeConfigManager {
+    if (!ThemeConfigManager.instance) {
+      ThemeConfigManager.instance = new ThemeConfigManager()
+    }
+    return ThemeConfigManager.instance
+  }
+  
+  /** 设置主题 */
+  setTheme(theme: ThemeConfig): void {
+    this.currentTheme = { ...this.currentTheme, ...theme }
+    this.applyTheme()
+  }
+  
+  /** 获取当前主题 */
+  getTheme(): ThemeConfig {
+    return { ...this.currentTheme }
+  }
+  
+  /** 切换暗色主题 */
+  toggleDark(): void {
+    this.currentTheme.dark = !this.currentTheme.dark
+    this.applyTheme()
+  }
+  
+  /** 设置主色调 */
+  setPrimaryColor(color: string): void {
+    this.setCssVar('--el-color-primary', color)
+    this.generateColorPalette(color, 'primary')
+  }
+  
+  /** 设置成功色 */
+  setSuccessColor(color: string): void {
+    this.setCssVar('--el-color-success', color)
+    this.generateColorPalette(color, 'success')
+  }
+  
+  /** 设置警告色 */
+  setWarningColor(color: string): void {
+    this.setCssVar('--el-color-warning', color)
+    this.generateColorPalette(color, 'warning')
+  }
+  
+  /** 设置危险色 */
+  setDangerColor(color: string): void {
+    this.setCssVar('--el-color-danger', color)
+    this.generateColorPalette(color, 'danger')
+  }
+  
+  /** 设置信息色 */
+  setInfoColor(color: string): void {
+    this.setCssVar('--el-color-info', color)
+    this.generateColorPalette(color, 'info')
+  }
+  
+  /** 设置CSS变量 */
+  setCssVar(name: string, value: string): void {
+    const root = document.documentElement
+    root.style.setProperty(name, value)
+  }
+  
+  /** 获取CSS变量 */
+  getCssVar(name: string): string {
+    const root = document.documentElement
+    return getComputedStyle(root).getPropertyValue(name).trim()
+  }
+  
+  /** 生成颜色调色板 */
+  private generateColorPalette(color: string, type: 'primary' | 'success' | 'warning' | 'danger' | 'info'): void {
+    const root = document.documentElement
+    const baseColor = this.hexToRgb(color)
+    
+    if (!baseColor) return
+    
+    // 生成不同亮度的颜色
+    const lightColors = this.generateLightColors(baseColor)
+    const darkColors = this.generateDarkColors(baseColor)
+    
+    // 设置CSS变量
+    root.style.setProperty(`--el-color-${type}`, color)
+    root.style.setProperty(`--el-color-${type}-light-3`, lightColors[3])
+    root.style.setProperty(`--el-color-${type}-light-5`, lightColors[5])
+    root.style.setProperty(`--el-color-${type}-light-7`, lightColors[7])
+    root.style.setProperty(`--el-color-${type}-light-8`, lightColors[8])
+    root.style.setProperty(`--el-color-${type}-light-9`, lightColors[9])
+    root.style.setProperty(`--el-color-${type}-dark-2`, darkColors[2])
+  }
+  
+  /** 应用主题 */
+  private applyTheme(): void {
+    const root = document.documentElement
+    
+    // 应用暗色主题
+    if (this.currentTheme.dark) {
+      root.classList.add('dark')
+    } else {
+      root.classList.remove('dark')
+    }
+    
+    // 应用自定义类名
+    if (this.currentTheme.customClass) {
+      root.classList.add(this.currentTheme.customClass)
+    }
+    
+    // 应用自定义CSS变量
+    if (this.currentTheme.cssVars) {
+      Object.entries(this.currentTheme.cssVars).forEach(([key, value]) => {
+        root.style.setProperty(key, value)
+      })
+    }
+    
+    // 应用预设颜色
+    if (this.currentTheme.primaryColor) {
+      this.setPrimaryColor(this.currentTheme.primaryColor)
+    }
+    if (this.currentTheme.successColor) {
+      this.setSuccessColor(this.currentTheme.successColor)
+    }
+    if (this.currentTheme.warningColor) {
+      this.setWarningColor(this.currentTheme.warningColor)
+    }
+    if (this.currentTheme.dangerColor) {
+      this.setDangerColor(this.currentTheme.dangerColor)
+    }
+    if (this.currentTheme.infoColor) {
+      this.setInfoColor(this.currentTheme.infoColor)
+    }
+  }
+  
+  /** 十六进制颜色转RGB */
+  private hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : null
+  }
+  
+  /** RGB转十六进制 */
+  private rgbToHex(r: number, g: number, b: number): string {
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
+  }
+  
+  /** 生成浅色变体 */
+  private generateLightColors(rgb: { r: number; g: number; b: number }): Record<number, string> {
+    const colors: Record<number, string> = {}
+    
+    for (let i = 1; i <= 9; i++) {
+      const factor = (10 - i) / 10
+      const r = Math.round(255 - (255 - rgb.r) * factor)
+      const g = Math.round(255 - (255 - rgb.g) * factor)
+      const b = Math.round(255 - (255 - rgb.b) * factor)
+      colors[i] = this.rgbToHex(r, g, b)
+    }
+    
+    return colors
+  }
+  
+  /** 生成深色变体 */
+  private generateDarkColors(rgb: { r: number; g: number; b: number }): Record<number, string> {
+    const colors: Record<number, string> = {}
+    
+    for (let i = 1; i <= 2; i++) {
+      const factor = i / 10
+      const r = Math.round(rgb.r * (1 - factor))
+      const g = Math.round(rgb.g * (1 - factor))
+      const b = Math.round(rgb.b * (1 - factor))
+      colors[i] = this.rgbToHex(r, g, b)
+    }
+    
+    return colors
+  }
+  
+  /** 重置主题 */
+  resetTheme(): void {
+    const root = document.documentElement
+    root.className = ''
+    root.style.cssText = ''
+    this.currentTheme = { name: 'default', dark: false }
+  }
+  
+  /** 导出主题配置 */
+  exportTheme(): string {
+    const root = document.documentElement
+    const computedStyle = getComputedStyle(root)
+    const cssVars: Record<string, string> = {}
+    
+    // 获取所有CSS变量
+    for (let i = 0; i < computedStyle.length; i++) {
+      const property = computedStyle[i]
+      if (property.startsWith('--el-')) {
+        cssVars[property] = computedStyle.getPropertyValue(property).trim()
+      }
+    }
+    
+    return JSON.stringify({
+      ...this.currentTheme,
+      cssVars
+    }, null, 2)
+  }
+  
+  /** 导入主题配置 */
+  importTheme(config: string): void {
+    try {
+      const themeConfig = JSON.parse(config)
+      this.setTheme(themeConfig)
+    } catch (error) {
+      console.error('导入主题配置失败:', error)
+    }
+  }
+}
+
+// 导出主题管理器实例
+export const themeConfigManager = ThemeConfigManager.getInstance()
+
+// 导出便捷方法
+export const setTheme = (theme: ThemeConfig) => themeConfigManager.setTheme(theme)
+export const getTheme = () => themeConfigManager.getTheme()
+export const toggleDark = () => themeConfigManager.toggleDark()
+export const setPrimaryColor = (color: string) => themeConfigManager.setPrimaryColor(color)
+export const setSuccessColor = (color: string) => themeConfigManager.setSuccessColor(color)
+export const setWarningColor = (color: string) => themeConfigManager.setWarningColor(color)
+export const setDangerColor = (color: string) => themeConfigManager.setDangerColor(color)
+export const setInfoColor = (color: string) => themeConfigManager.setInfoColor(color)
+export const setCssVar = (name: string, value: string) => themeConfigManager.setCssVar(name, value)
+export const getCssVar = (name: string) => themeConfigManager.getCssVar(name)
+export const resetTheme = () => themeConfigManager.resetTheme()
+export const exportTheme = () => themeConfigManager.exportTheme()
+export const importTheme = (config: string) => themeConfigManager.importTheme(config)

package/packages/styles/variables.scss

@@ -0,0 +1,70 @@
+/**
+ * @mc-markets/ui - Element Plus 主题变量配置
+ * 
+ * 基于 Element Plus 官方主题定制指南
+ * @see https://element-plus.org/zh-CN/guide/theming.html
+ */
+
+// 导入 Element Plus 的 SCSS 变量
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  // 自定义颜色变量
+  $colors: (
+    'primary': (
+      'base': #409eff, // 主色
+    ),
+    'success': (
+      'base': #67c23a, // 成功色
+    ),
+    'warning': (
+      'base': #e6a23c, // 警告色
+    ),
+    'danger': (
+      'base': #f56c6c, // 危险色
+    ),
+    'error': (
+      'base': #f56c6c, // 错误色
+    ),
+    'info': (
+      'base': #909399, // 信息色
+    ),
+  ),
+  
+  // 自定义字体大小
+  $font-size: (
+    'extra-large': 20px,
+    'large': 18px,
+    'medium': 16px,
+    'base': 14px,
+    'small': 13px,
+    'extra-small': 12px,
+  ),
+  
+  // 自定义圆角
+  $border-radius: (
+    'base': 4px,
+    'small': 2px,
+    'round': 20px,
+    'circle': 100%,
+  ),
+  
+  // 自定义阴影
+  $box-shadow: (
+    'base': (
+      0 2px 4px rgba(0, 0, 0, 0.12),
+      0 0 6px rgba(0, 0, 0, 0.04)
+    ),
+    'light': (
+      0 2px 12px 0 rgba(0, 0, 0, 0.1)
+    ),
+    'lighter': (
+      0 2px 12px 0 rgba(0, 0, 0, 0.06)
+    ),
+    'dark': (
+      0 2px 4px rgba(0, 0, 0, 0.12),
+      0 0 6px rgba(0, 0, 0, 0.12)
+    ),
+  )
+);
+
+// 导入所有 Element Plus 样式
+@use "element-plus/theme-chalk/src/index.scss" as *;

package/dist/packages/components/Grid/components/GridItem.vue.d.ts

@@ -1,37 +0,0 @@
-import { Responsive } from '../interface/index';
-type Props = {
-    offset?: number;
-    span?: number;
-    suffix?: boolean;
-    xs?: Responsive;
-    sm?: Responsive;
-    md?: Responsive;
-    lg?: Responsive;
-    xl?: Responsive;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    xs: Responsive;
-    sm: Responsive;
-    md: Responsive;
-    lg: Responsive;
-    xl: Responsive;
-    offset: number;
-    span: number;
-    suffix: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};