@canlooks/can-ui 0.0.33 → 0.0.35

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

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { appStyleCallback } from '../app/app.style';
 import { zIndex } from '../theme';
-export const classes = defineClasses('snackbar-base', [
+export const classes = defineInnerClasses('snackbar-base', [
     'itemWrap',
     'item',
     'icon',

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

@@ -1,6 +1,6 @@
 import { css, keyframes } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('status', [
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('status', [
     'icon',
     'label',
     'dot'

package/dist/esm/components/stepper/step.style.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('step', [
+export const classes = defineInnerClasses('step', [
     'indicatorWrap',
     'indicator',
     'label',

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('stepper');
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('stepper');
 export const style = defineCss(() => css `
     display: flex;
 

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('switch', [
+export const classes = defineInnerClasses('switch', [
     'input',
     'track',
     'label',

package/dist/esm/components/table/table.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('table', [
+export const classes = defineInnerClasses('table', [
     'container',
     'cell'
 ]);

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
-export const classes = defineClasses('tabs', [
+import { defineInnerClasses, useColor, useCss } from '../../utils';
+export const classes = defineInnerClasses('tabs', [
     'scroll',
     'scrollWrap',
     'start',

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('tag', [
+export const classes = defineInnerClasses('tag', [
     'content',
     'prefix',
     'suffix',

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as inputBaseClasses } from '../inputBase/inputBase.style';
-export const classes = defineClasses('textarea', [
+export const classes = defineInnerClasses('textarea', [
     'textarea'
 ]);
 export const style = defineCss(({ spacing }) => css `

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss, useColor, useCss } from '../../utils';
-export const classes = defineClasses('timeline', ['item', 'opposite', 'dotArea', 'dot', 'content']);
+import { defineInnerClasses, defineCss, useColor, useCss } from '../../utils';
+export const classes = defineInnerClasses('timeline', ['item', 'opposite', 'dotArea', 'dot', 'content']);
 export const style = defineCss(() => css `
     display: flex;
     flex-direction: column;

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

@@ -1,2 +1,2 @@
-import { defineClasses } from '../../utils';
-export const classes = defineClasses('buttonGroup');
+import { defineInnerClasses } from '../../utils';
+export const classes = defineInnerClasses('buttonGroup');

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

@@ -1,9 +1,9 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import { popperArrowStyle } from '../popper/popper.style';
 import Color from 'color';
 import { zIndex } from '../theme';
-export const classes = defineClasses('tooltip', [
+export const classes = defineInnerClasses('tooltip', [
     'title'
 ]);
 export function useStyle({ color }) {

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,9 @@ export function defineClasses(prefixName, names) {
     });
     return ret;
 }
+export function defineInnerClasses(prefixName, names) {
+    return defineClasses(`CanUI-${prefixName}`, names);
+}
 /**
  * 用于定义css，返回一个可调用的函数，可直接传入emotion的css属性
  * @param callback