@vue-ui-kit/ant 1.8.3 → 1.8.4

package/README.md

@@ -16,23 +16,83 @@ yarn add @vue-ui-kit/ant
 pnpm add @vue-ui-kit/ant
 ```
 
+## Quick Start
+
+### 1. Basic Usage
+
 ```ts
 /*main.ts*/
 import { createApp } from 'vue';
 import App from './App.vue';
 import Antd from 'ant-design-vue';
 import UIKit from '@vue-ui-kit/ant';
-import '@vue-ui-kit/ant/scss';
-/*Create renderer (recommended to use tsx)*/
-import { setupKit } from './setup/kit.tsx';
 
-/*Create formatter*/
-UIKit.addFormatter({
-  test: ({ row, column, cellValue }) => 'test:...' + 'field:' + column.field + '...v:' + cellvalue,
+// Import styles - choose one of the following methods:
+// Method 1: Import SCSS source files (recommended, allows variable override)
+import '@vue-ui-kit/ant/style.scss';
+
+// Method 2: Import compiled CSS file
+// import '@vue-ui-kit/ant/style.css';
+
+createApp(App).use(Antd).use(UIKit).mount('#app');
+```
+
+### 2. Configure Global Defaults
+
+```ts
+/*main.ts*/
+import { createApp } from 'vue';
+import App from './App.vue';
+import Antd from 'ant-design-vue';
+import UIKit, { setup } from '@vue-ui-kit/ant';
+import '@vue-ui-kit/ant/style.scss';
+
+// Configure global defaults
+setup({
+  form: {
+    labelCol: { span: 8 },  // Modify form label column width
+    wrapperCol: { span: 14 }, // Modify form input column width
+  },
+  grid: {
+    align: 'center',    // Set default table alignment
+    lazyReset: true,    // Don't auto-submit after reset
+    fitHeight: 200,     // Set adaptive height
+  }
 });
+
 createApp(App).use(Antd).use(UIKit).mount('#app');
 ```
 
+### 3. Alternative import methods (if main method doesn't work)
+
+If you encounter issues with the standard import, try these alternatives:
+
+```scss
+// In your main.scss file
+@import '@vue-ui-kit/ant/dist/style.scss';
+```
+
+```ts
+// Or using require in JavaScript/TypeScript
+require('@vue-ui-kit/ant/style.css');
+```
+
+### 4. For Vite users
+If using Vite, make sure your vite.config.js includes sass support:
+
+```js
+// vite.config.js
+export default {
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import '@vue-ui-kit/ant/style.scss';`
+      }
+    }
+  }
+}
+```
+
 ```tsx
 /*kit.tsx*/
 import UIKit from '@vue-ui-kit/ant';

package/dist/style.scss

@@ -1,4 +1,8 @@
-@import 'variables';
+// Variables inlined for npm distribution
+:root {
+  --p-theme-bg: #fff;
+}
+
 
 .p-pane {
   background-color: var(--p-theme-bg);

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/es/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
@@ -10,8 +12,18 @@
       "import": "./dist/es/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./style.css": "./dist/style.css",
-    "./style.scss": "./dist/style.scss"
+    "./style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css",
+      "default": "./dist/style.css"
+    },
+    "./style.scss": {
+      "import": "./dist/style.scss",
+      "require": "./dist/style.scss", 
+      "default": "./dist/style.scss"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./dist/style.scss": "./dist/style.scss"
   },
   "files": [
     "dist",

package/dist/variables.scss

@@ -1,3 +0,0 @@
-:root {
-  --p-theme-bg: #fff;
-}