@canlooks/can-ui 0.0.34 → 0.0.36

package/dist/esm/components/touchRipple/touchRipple.style.js

@@ -1,7 +1,7 @@
 import { css, keyframes } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('touch-ripple', [
+export const classes = defineInnerClasses('touch-ripple', [
     'ripple'
 ]);
 export function useStyle({ color }) {

package/dist/esm/components/transfer/transfer.style.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { menuListPadding } from '../menuItem/menuItem.style';
-export const classes = defineClasses('transfer', [
+export const classes = defineInnerClasses('transfer', [
     'panel',
     'header',
     'checkbox',

package/dist/esm/components/transitionBase/transitionBase.style.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss, useCss } from '../../utils';
-export const classes = defineClasses('transition-base');
+import { defineInnerClasses, defineCss, useCss } from '../../utils';
+export const classes = defineInnerClasses('transition-base');
 export function useTransitionBaseStyle({ timeout }) {
     const timeoutIsNumber = typeof timeout === 'number';
     return useCss(() => css `

package/dist/esm/components/tree/tree.style.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('tree', [
+export const classes = defineInnerClasses('tree', [
     'search',
     'node',
     'indent',

package/dist/esm/components/treeSelect/treeSelect.style.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as tagClasses } from '../tag/tag.style';
-export const classes = defineClasses('tree-select', [
+export const classes = defineInnerClasses('tree-select', [
     'contentWrap',
     'placeholder',
     'backfill',

package/dist/esm/components/typography/typography.style.js

@@ -1,7 +1,7 @@
 import { css, keyframes } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('typography', [
+export const classes = defineInnerClasses('typography', [
     'text',
     'ellipsis',
     'expand',

package/dist/esm/components/upload/dropArea.style.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('upload-drop-area', [
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('upload-drop-area', [
     'icon',
     'description'
 ]);

package/dist/esm/components/upload/upload.style.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('upload', [
+export const classes = defineInnerClasses('upload', [
     'input',
     'files',
     'file',

package/dist/esm/components/waterfall/waterfall.style.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, responsiveVariables, useCss } from '../../utils';
-export const classes = defineClasses('waterfall', [
+import { defineInnerClasses, responsiveVariables, useCss } from '../../utils';
+export const classes = defineInnerClasses('waterfall', [
     'item'
 ]);
 export function useStyle({ columnCount, columnGap, rowGap }) {

package/dist/esm/extensions/documentViewer/documentViewer.style.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as loadingClasses } from '../../components/loading/loading.style';
-export const classes = defineClasses('document-viewer', [
+export const classes = defineInnerClasses('document-viewer', [
     'svgViewer',
     'svgToolbar',
     'svgTitle',

package/dist/esm/extensions/textFormatter/textFormatter.style.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('text-formatter');
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('text-formatter');
 export const style = defineCss(({ spacing }) => css `
 `);

package/dist/esm/utils/style.d.ts

@@ -19,6 +19,17 @@ export declare function defineClasses<T extends string>(prefixName: string, name
 } & {
     root: string;
 };
+/**
+ * @private 携带`CanUI`前缀，内部使用
+ */
+export declare function defineInnerClasses<T extends string>(prefixName: string): {
+    root: string;
+};
+export declare function defineInnerClasses<T extends string>(prefixName: string, names: T[]): {
+    [P in T]: string;
+} & {
+    root: string;
+};
 /**
  * 用于定义css，返回一个可调用的函数，可直接传入emotion的css属性
  * @param callback

package/dist/esm/utils/style.js

@@ -7,11 +7,10 @@ import Color from 'color';
  * @param prefixName
  */
 export function definePrefix(prefixName) {
-    const _prefix = `CanUI-${prefixName}`;
     return (...names) => {
         return names.length
-            ? names.map(name => `${_prefix}-${name}`).join(' ')
-            : _prefix;
+            ? names.map(name => `${prefixName}-${name}`).join(' ')
+            : prefixName;
     };
 }
 export function defineClasses(prefixName, names) {
@@ -22,6 +21,14 @@ export function defineClasses(prefixName, names) {
     });
     return ret;
 }
+export function defineInnerClasses(prefixName, names) {
+    const prefix = definePrefix('CanUI-' + humpToSegmented(prefixName));
+    const ret = { root: prefix() };
+    names?.forEach(name => {
+        ret[name] = prefix(humpToSegmented(name));
+    });
+    return ret;
+}
 /**
  * 用于定义css，返回一个可调用的函数，可直接传入emotion的css属性
  * @param callback