@sdata/web-vue-auto-import-resolver 2.2.0 → 2.4.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [2.3.0](https://github.com/liunnn1994/sd-design/compare/v2.2.1...v2.3.0) (2026-06-12)
+
+### Bug Fixes
+
+- **anchor:** 将 affix 属性的默认值改为 false ([1b444cb](https://github.com/liunnn1994/sd-design/commit/1b444cb3da97daab4cf450593ab886f18c233764))
+- **date-picker:** 修复日期面板年份边界问题并优化日期计算 ([df04707](https://github.com/liunnn1994/sd-design/commit/df0470752775cb4b8a65ad7698550e03f49ddf7c))
+- **locale:** 修复部分国际化语言检验信息字段缺失问题 ([#3656](https://github.com/liunnn1994/sd-design/issues/3656)) ([8eab41d](https://github.com/liunnn1994/sd-design/commit/8eab41dead8119cc31c7d1558e5c3a6d99892686))
+- **mention:** 清除输入后关闭弹出层并重置测量信息 ([#3653](https://github.com/liunnn1994/sd-design/issues/3653)) ([e7c9aa9](https://github.com/liunnn1994/sd-design/commit/e7c9aa926d4528136c26ad8f9c378d3314fb836e))
+- **scripts:** 修复 dev-component 构建 watcher 报错 ([#3654](https://github.com/liunnn1994/sd-design/issues/3654)) ([b17b75c](https://github.com/liunnn1994/sd-design/commit/b17b75c17e94044c56c8bd3ef8262a287d0e1de2))
+- **textarea:** update value before input event ([#3659](https://github.com/liunnn1994/sd-design/issues/3659)) ([f7ca0c0](https://github.com/liunnn1994/sd-design/commit/f7ca0c0f7899f086de9e93a67f408a53b77b9c0e))
+- **verification-code:** 修复验证码输入框光标定位与聚焦行为 ([#3658](https://github.com/liunnn1994/sd-design/issues/3658)) ([4b36fef](https://github.com/liunnn1994/sd-design/commit/4b36fef9bf54c2485cbf67b064e07793a5991c20))
+
+### Features
+
+- **anchor:** 新增横向锚点并优化文档示例 ([8699aee](https://github.com/liunnn1994/sd-design/commit/8699aeee4dacd25138251c5a7f6089533748cac6))
+- **button:** 新增 loadingFixedWidth 和 autoInsertSpaceInButton 属性 ([1ed094f](https://github.com/liunnn1994/sd-design/commit/1ed094fc1102337b47e689d8cf453f48d5aa4f81))
+- **calendar:** 新增卡片模式、下拉头部和日期内容定制功能 ([3b42562](https://github.com/liunnn1994/sd-design/commit/3b425628218dbaf96b66518cedd80345e7d2b016))
+- **date-picker:** 新增 inputProps 与 fixedTime 属性并支持自定义面板头部格式 ([a19694d](https://github.com/liunnn1994/sd-design/commit/a19694d90a6974152287104e7dfa6d1ff2a2896b))
+- **date-picker:** 新增时区支持、隐藏灰色日期和范围重选清空功能 ([b5d912f](https://github.com/liunnn1994/sd-design/commit/b5d912f95b171fa44df77d6f1b144ef2ee56ef9f))
+- **modal:** 新增全局配置和批量关闭功能 ([ff66efd](https://github.com/liunnn1994/sd-design/commit/ff66efd03ea8019e8ef801c31e670c7bad188026))
+- 🆕 去掉自定义的render-function，改为使用官方写法 ([6a865c8](https://github.com/liunnn1994/sd-design/commit/6a865c851a10e560040ea0e4713ddec06e924ff2))
+
+# [2.2.0](https://github.com/liunnn1994/sd-design/compare/v2.1.1...v2.2.0) (2026-06-11)
+
+### Features
+
+- 🆕 迁移到 composition api ([a719b6f](https://github.com/liunnn1994/sd-design/commit/a719b6f3c065ae0856bbdfde6198f86c15add1a4))
+
 # [2.0.0](https://github.com/liunnn1994/sd-design/compare/v1.20.0...v2.0.0) (2026-06-08)
 
 ### Bug Fixes

package/README.md

@@ -1,6 +1,6 @@
 # @sdata/web-vue-auto-import-resolver
 
-`@sdata/web-vue-auto-import-resolver` 为 `@sdata/web-vue` 提供 `unplugin-vue-components` 自动导入解析能力。
+`@sdata/web-vue-auto-import-resolver` 为 `@sdata/web-vue` 提供 `unplugin-vue-components` 自动导入解析能力，以及 SCSS 别名解析。
 
 解析器会在运行时读取已安装的 `@sdata/web-vue` 发布产物来识别组件导出和样式入口，因此新增组件后不需要再维护额外的组件映射文件。
 
@@ -13,17 +13,18 @@ pnpm add @sdata/web-vue
 pnpm add -D @sdata/web-vue-auto-import-resolver unplugin-vue-components
 ```
 
-## Vite
+## Vite（推荐）
 
 ```ts
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import Components from 'unplugin-vue-components/vite';
-import { SdDesignResolver } from '@sdata/web-vue-auto-import-resolver';
+import { SdDesignResolver, createSdDesignVitePlugin } from '@sdata/web-vue-auto-import-resolver';
 
 export default defineConfig({
   plugins: [
     vue(),
+    createSdDesignVitePlugin(),
     Components({
       resolvers: [
         SdDesignResolver({
@@ -37,8 +38,31 @@ export default defineConfig({
 
 `sideEffect: true` 会自动注入组件样式入口，例如 `@sdata/web-vue/es/button/style/index.js`。
 
+`createSdDesignVitePlugin()` 会自动配置 Sass importer 来解析 `@sdata/web-vue` SCSS 文件中的 `@style/` 和 `@components/` 别名。
+
+## 手动配置 SCSS importer
+
+`createSdDesignVitePlugin()` 实际上就是在 `config` hook 里调用了 `createSdDesignScssImporter()` 并注入到 `css.preprocessorOptions.scss.importers`。如果你不想用 Vite 插件，或者需要在非 Vite 环境下使用，可以手动配置：
+
+```ts
+import { defineConfig } from 'vite';
+import { createSdDesignScssImporter } from '@sdata/web-vue-auto-import-resolver';
+
+export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        importers: [createSdDesignScssImporter()],
+      },
+    },
+  },
+});
+```
+
 ## 选项
 
+### SdDesignResolver
+
 ```ts
 interface SdDesignResolverOptions {
   prefix?: string;
@@ -48,3 +72,14 @@ interface SdDesignResolverOptions {
 
 - `prefix`：组件前缀，默认是 `Sd`，对应模板里的 `<sd-button />`。
 - `sideEffect`：是否自动导入组件样式。
+
+### createSdDesignScssImporter / createSdDesignVitePlugin
+
+```ts
+interface SdDesignScssImporterOptions {
+  /** @default '@sdata/web-vue' */
+  packageName?: string;
+}
+```
+
+- `packageName`：`@sdata/web-vue` 的包名，默认不需要修改。

package/index.d.ts

@@ -1,4 +1,6 @@
+import * as node_url from 'node:url';
 import { ComponentResolveResult, ComponentResolver } from 'unplugin-vue-components/types';
+import { Plugin } from 'vite';
 
 interface SdDesignComponentMeta {
     importName: string;
@@ -10,6 +12,61 @@ interface SdDesignResolverOptions {
     sideEffect?: boolean;
     resolve?: (meta: SdDesignComponentMeta, type: 'component') => ComponentResolveResult | undefined;
 }
+interface SdDesignScssImporterOptions {
+    /** @default '@sdata/web-vue' */
+    packageName?: string;
+}
+interface SdDesignVitePluginOptions extends SdDesignScssImporterOptions {
+}
 declare function SdDesignResolver(options?: SdDesignResolverOptions): ComponentResolver[];
+/**
+ * Create a custom Sass importer that resolves `@style/` and `@components/`
+ * aliases used in `@sdata/web-vue` SCSS files.
+ *
+ * Use this when you need to configure `css.preprocessorOptions.scss.importers`
+ * manually instead of using the Vite plugin.
+ *
+ * @example
+ * ```ts
+ * import { createSdDesignScssImporter } from '@sdata/web-vue-auto-import-resolver';
+ *
+ * export default defineConfig({
+ *   css: {
+ *     preprocessorOptions: {
+ *       scss: {
+ *         importers: [createSdDesignScssImporter()],
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
+ */
+declare function createSdDesignScssImporter(options?: SdDesignScssImporterOptions): {
+    canonicalize(url: string): node_url.URL | null;
+    load(canonicalUrl: URL): Promise<{
+        contents: string;
+        syntax: "css" | "scss" | "indented";
+        sourceMapUrl: URL;
+    } | null>;
+};
+/**
+ * Create a Vite plugin that automatically configures a custom Sass importer
+ * to resolve `@style/` and `@components/` aliases used in `@sdata/web-vue`
+ * SCSS files.  Equivalent to calling `createSdDesignScssImporter()` and
+ * adding it to `css.preprocessorOptions.scss.importers` manually.
+ *
+ * @example
+ * ```ts
+ * import { createSdDesignVitePlugin, SdDesignResolver } from '@sdata/web-vue-auto-import-resolver';
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     createSdDesignVitePlugin(),
+ *     Components({ resolvers: [SdDesignResolver({ sideEffect: true })] }),
+ *   ],
+ * });
+ * ```
+ */
+declare function createSdDesignVitePlugin(options?: SdDesignVitePluginOptions): Plugin;
 
-export { type SdDesignComponentMeta, SdDesignResolver, type SdDesignResolverOptions };
+export { type SdDesignComponentMeta, SdDesignResolver, type SdDesignResolverOptions, type SdDesignScssImporterOptions, type SdDesignVitePluginOptions, createSdDesignScssImporter, createSdDesignVitePlugin };

package/index.js

@@ -1,9 +1,12 @@
 // index.ts
 import { existsSync, readFileSync } from "fs";
+import { readFile } from "fs/promises";
 import { createRequire } from "module";
 import path from "path";
+import { fileURLToPath, pathToFileURL } from "url";
 var DEFAULT_PREFIX = "Sd";
 var PACKAGE_NAME = "@sdata/web-vue";
+var SASS_EXTENSIONS = [".scss", ".sass", ".css"];
 var cachedComponentMap;
 var getName = (name, prefix) => {
   if (!prefix) {
@@ -115,6 +118,89 @@ function SdDesignResolver(options = {}) {
     }
   ];
 }
+function resolveAliasedPath(url, componentsDir) {
+  const normalized = url.replaceAll("\\", "/");
+  if (/^(?:sass:|https?:|file:)/.test(normalized)) {
+    return null;
+  }
+  let basePath;
+  if (normalized.startsWith("@style/")) {
+    basePath = path.resolve(componentsDir, "style", normalized.slice("@style/".length));
+  } else if (normalized.startsWith("@components/")) {
+    basePath = path.resolve(componentsDir, normalized.slice("@components/".length));
+  } else {
+    return null;
+  }
+  const ext = path.extname(basePath);
+  const dir = path.dirname(basePath);
+  const base = path.basename(basePath);
+  const candidates = ext ? [basePath] : [
+    ...SASS_EXTENSIONS.map((e) => `${basePath}${e}`),
+    ...SASS_EXTENSIONS.map((e) => path.join(dir, `_${base}${e}`)),
+    ...SASS_EXTENSIONS.map((e) => path.join(basePath, `index${e}`)),
+    ...SASS_EXTENSIONS.map((e) => path.join(basePath, `_index${e}`))
+  ];
+  return candidates.find((c) => existsSync(c)) ?? null;
+}
+function getComponentsDir(packageName) {
+  const packageRoot = path.dirname(createRequire(import.meta.url)(`${packageName}/package.json`));
+  return path.resolve(packageRoot, "es");
+}
+function createImporter(componentsDir) {
+  return {
+    canonicalize(url) {
+      const resolved = resolveAliasedPath(url, componentsDir);
+      return resolved ? pathToFileURL(resolved) : null;
+    },
+    async load(canonicalUrl) {
+      if (canonicalUrl.protocol !== "file:") {
+        return null;
+      }
+      const filePath = fileURLToPath(canonicalUrl);
+      const ext = path.extname(filePath);
+      let syntax = "scss";
+      if (ext === ".sass") {
+        syntax = "indented";
+      } else if (ext === ".css") {
+        syntax = "css";
+      }
+      return {
+        contents: await readFile(filePath, "utf8"),
+        syntax,
+        sourceMapUrl: canonicalUrl
+      };
+    }
+  };
+}
+function createSdDesignScssImporter(options = {}) {
+  const packageName = options.packageName ?? PACKAGE_NAME;
+  return createImporter(getComponentsDir(packageName));
+}
+function createSdDesignVitePlugin(options = {}) {
+  const packageName = options.packageName ?? PACKAGE_NAME;
+  return {
+    name: "sd-design",
+    config(config) {
+      const importer = createImporter(getComponentsDir(packageName));
+      const existingScss = config.css?.preprocessorOptions?.scss ?? {};
+      const existingImporters = Array.isArray(existingScss.importers) ? existingScss.importers : [];
+      return {
+        css: {
+          ...config.css,
+          preprocessorOptions: {
+            ...config.css?.preprocessorOptions,
+            scss: {
+              ...existingScss,
+              importers: [importer, ...existingImporters]
+            }
+          }
+        }
+      };
+    }
+  };
+}
 export {
-  SdDesignResolver
+  SdDesignResolver,
+  createSdDesignScssImporter,
+  createSdDesignVitePlugin
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdata/web-vue-auto-import-resolver",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "Auto import resolver for @sdata/web-vue and unplugin-vue-components.",
   "homepage": "https://sd-design.js.org",
   "bugs": {
@@ -21,7 +21,8 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@sdata/web-vue": "*"
+    "@sdata/web-vue": "*",
+    "vite": "*"
   },
   "exports": {
     ".": {