@canlooks/can-ui 0.0.154 → 0.0.156

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/cjs/components/tabs/tab.js +1 -1
  2. package/dist/cjs/components/tabs/tabs.d.ts +2 -0
  3. package/dist/cjs/components/tabs/tabs.js +10 -7
  4. package/dist/cjs/components/tabs/tabs.style.d.ts +1 -0
  5. package/dist/cjs/components/tabs/tabs.style.js +1 -0
  6. package/dist/esm/components/tabs/tab.js +1 -1
  7. package/dist/esm/components/tabs/tabs.d.ts +2 -0
  8. package/dist/esm/components/tabs/tabs.js +10 -7
  9. package/dist/esm/components/tabs/tabs.style.d.ts +1 -0
  10. package/dist/esm/components/tabs/tabs.style.js +1 -0
  11. package/package.json +1 -1
package/dist/cjs/components/tabs/tab.js CHANGED
@@ -20,7 +20,7 @@ exports.Tab = (0, react_1.memo)(({ prefix, suffix, color, orientation, label, va
20
20
  context.onClose?.(value);
21
21
  };
22
22
  const _sortable = sortable ?? context.sortable;
23
- return ((0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { ...props, component: transitionBase_1.Collapse, orientation: "horizontal", id: value, disabled: !_sortable, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.clsx)(tabs_style_1.classes.tab, props.className), style: {
23
+ return ((0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { ...props, className: (0, utils_1.clsx)(tabs_style_1.classes.tabWrapper, props.className), component: transitionBase_1.Collapse, orientation: "horizontal", id: value, disabled: !_sortable, children: (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.tab, style: {
24
24
  borderColor: context.variant === 'line' && !context.animating && _active ? colorValue : void 0,
25
25
  color: _active ? colorValue : void 0,
26
26
  ...props.style
package/dist/cjs/components/tabs/tabs.d.ts CHANGED
@@ -33,6 +33,8 @@ export interface TabsProps<T extends TabType = TabType> extends TabsSharedProps,
33
33
  * @param tabs 仅{@link tabs}模式支持，使用children时，该参数为`undefined`
34
34
  */
35
35
  onSort?(e: DragEndEvent, tabs?: T[]): void;
36
+ /** 触发change事件的事件，默认为`click` */
37
+ changeEvent?: 'click' | 'pointerDown';
36
38
  }
37
39
  interface ITabsContext extends TabsSharedProps {
38
40
  animating: boolean;
package/dist/cjs/components/tabs/tabs.js CHANGED
@@ -18,7 +18,7 @@ const TabsContext = (0, react_2.createContext)({});
18
18
  function useTabsContext() {
19
19
  return (0, react_2.useContext)(TabsContext);
20
20
  }
21
- exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'value', size, position = 'top', justifyContent = 'flex-start', fullWidth, prefix, suffix, defaultValue, value, onChange, readOnly, disabled, variant = 'line', color = 'primary', closable, onClose, sortable, ...props }) => {
21
+ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'value', size, position = 'top', justifyContent = 'flex-start', fullWidth, prefix, suffix, defaultValue, value, onChange, readOnly, disabled, variant = 'line', color = 'primary', closable, onClose, sortable, changeEvent = 'click', ...props }) => {
22
22
  const theme = (0, theme_1.useTheme)();
23
23
  size ??= theme.size;
24
24
  const [innerValue, _setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
@@ -36,6 +36,7 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
36
36
  const getActiveTab = () => {
37
37
  return (0, utils_1.isUnset)(innerValue.current) ? void 0 : tabRefs.current.get(innerValue.current);
38
38
  };
39
+ const eventName = changeEvent === 'click' ? 'onClick' : 'onPointerDown';
39
40
  const renderTabs = () => {
40
41
  if (tabs) {
41
42
  return tabs.map((p, i) => {
@@ -45,15 +46,15 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
45
46
  el
46
47
  ? tabRefs.current.set(value, el)
47
48
  : tabRefs.current.delete(value);
48
- }, value: value, label: p[labelKey], onClick: e => {
49
- p.onClick?.(e);
49
+ }, value: value, label: p[labelKey], [eventName]: (e) => {
50
+ p[eventName]?.(e);
50
51
  setInnerValue(value);
51
52
  }, _active: active }));
52
53
  });
53
54
  }
54
55
  return react_2.Children.map(props.children, c => {
55
56
  if ((0, react_2.isValidElement)(c)) {
56
- const { value, onClick } = c.props;
57
+ const { value } = c.props;
57
58
  const active = !(0, utils_1.isUnset)(value) && value === innerValue.current;
58
59
  return (0, react_2.cloneElement)(c, {
59
60
  ref: (0, utils_1.cloneRef)(c.ref, el => {
@@ -63,9 +64,11 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
63
64
  : tabRefs.current.delete(value);
64
65
  }
65
66
  }),
66
- onClick(e) {
67
- onClick?.(e);
68
- !(0, utils_1.isUnset)(value) && setInnerValue(value);
67
+ ...{
68
+ [eventName]: (e) => {
69
+ c.props[eventName]?.(e);
70
+ !(0, utils_1.isUnset)(value) && setInnerValue(value);
71
+ }
69
72
  },
70
73
  _active: active
71
74
  });
package/dist/cjs/components/tabs/tabs.style.d.ts CHANGED
@@ -10,6 +10,7 @@ export declare const classes: {
10
10
  ellipsis: string;
11
11
  tab: string;
12
12
  scrollWrap: string;
13
+ tabWrapper: string;
13
14
  tabPrefix: string;
14
15
  tabSuffix: string;
15
16
  tabClose: string;
package/dist/cjs/components/tabs/tabs.style.js CHANGED
@@ -12,6 +12,7 @@ exports.classes = (0, utils_1.defineInnerClasses)('tabs', [
12
12
  'ellipsis',
13
13
  'prefix',
14
14
  'suffix',
15
+ 'tabWrapper',
15
16
  'tab',
16
17
  'label',
17
18
  'tabPrefix',
package/dist/esm/components/tabs/tab.js CHANGED
@@ -17,7 +17,7 @@ export const Tab = memo(({ prefix, suffix, color, orientation, label, value, dis
17
17
  context.onClose?.(value);
18
18
  };
19
19
  const _sortable = sortable ?? context.sortable;
20
- return (_jsx(SortableItem, { ...props, component: Collapse, orientation: "horizontal", id: value, disabled: !_sortable, children: _jsxs("div", { className: clsx(classes.tab, props.className), style: {
20
+ return (_jsx(SortableItem, { ...props, className: clsx(classes.tabWrapper, props.className), component: Collapse, orientation: "horizontal", id: value, disabled: !_sortable, children: _jsxs("div", { className: classes.tab, style: {
21
21
  borderColor: context.variant === 'line' && !context.animating && _active ? colorValue : void 0,
22
22
  color: _active ? colorValue : void 0,
23
23
  ...props.style
package/dist/esm/components/tabs/tabs.d.ts CHANGED
@@ -33,6 +33,8 @@ export interface TabsProps<T extends TabType = TabType> extends TabsSharedProps,
33
33
  * @param tabs 仅{@link tabs}模式支持，使用children时，该参数为`undefined`
34
34
  */
35
35
  onSort?(e: DragEndEvent, tabs?: T[]): void;
36
+ /** 触发change事件的事件，默认为`click` */
37
+ changeEvent?: 'click' | 'pointerDown';
36
38
  }
37
39
  interface ITabsContext extends TabsSharedProps {
38
40
  animating: boolean;
package/dist/esm/components/tabs/tabs.js CHANGED
@@ -14,7 +14,7 @@ const TabsContext = createContext({});
14
14
  export function useTabsContext() {
15
15
  return useContext(TabsContext);
16
16
  }
17
- export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size, position = 'top', justifyContent = 'flex-start', fullWidth, prefix, suffix, defaultValue, value, onChange, readOnly, disabled, variant = 'line', color = 'primary', closable, onClose, sortable, ...props }) => {
17
+ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size, position = 'top', justifyContent = 'flex-start', fullWidth, prefix, suffix, defaultValue, value, onChange, readOnly, disabled, variant = 'line', color = 'primary', closable, onClose, sortable, changeEvent = 'click', ...props }) => {
18
18
  const theme = useTheme();
19
19
  size ??= theme.size;
20
20
  const [innerValue, _setInnerValue] = useControlled(defaultValue, value, onChange);
@@ -32,6 +32,7 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
32
32
  const getActiveTab = () => {
33
33
  return isUnset(innerValue.current) ? void 0 : tabRefs.current.get(innerValue.current);
34
34
  };
35
+ const eventName = changeEvent === 'click' ? 'onClick' : 'onPointerDown';
35
36
  const renderTabs = () => {
36
37
  if (tabs) {
37
38
  return tabs.map((p, i) => {
@@ -41,15 +42,15 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
41
42
  el
42
43
  ? tabRefs.current.set(value, el)
43
44
  : tabRefs.current.delete(value);
44
- }, value: value, label: p[labelKey], onClick: e => {
45
- p.onClick?.(e);
45
+ }, value: value, label: p[labelKey], [eventName]: (e) => {
46
+ p[eventName]?.(e);
46
47
  setInnerValue(value);
47
48
  }, _active: active }));
48
49
  });
49
50
  }
50
51
  return Children.map(props.children, c => {
51
52
  if (isValidElement(c)) {
52
- const { value, onClick } = c.props;
53
+ const { value } = c.props;
53
54
  const active = !isUnset(value) && value === innerValue.current;
54
55
  return cloneElement(c, {
55
56
  ref: cloneRef(c.ref, el => {
@@ -59,9 +60,11 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
59
60
  : tabRefs.current.delete(value);
60
61
  }
61
62
  }),
62
- onClick(e) {
63
- onClick?.(e);
64
- !isUnset(value) && setInnerValue(value);
63
+ ...{
64
+ [eventName]: (e) => {
65
+ c.props[eventName]?.(e);
66
+ !isUnset(value) && setInnerValue(value);
67
+ }
65
68
  },
66
69
  _active: active
67
70
  });
package/dist/esm/components/tabs/tabs.style.d.ts CHANGED
@@ -10,6 +10,7 @@ export declare const classes: {
10
10
  ellipsis: string;
11
11
  tab: string;
12
12
  scrollWrap: string;
13
+ tabWrapper: string;
13
14
  tabPrefix: string;
14
15
  tabSuffix: string;
15
16
  tabClose: string;
package/dist/esm/components/tabs/tabs.style.js CHANGED
@@ -8,6 +8,7 @@ export const classes = defineInnerClasses('tabs', [
8
8
  'ellipsis',
9
9
  'prefix',
10
10
  'suffix',
11
+ 'tabWrapper',
11
12
  'tab',
12
13
  'label',
13
14
  'tabPrefix',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canlooks/can-ui",
3
- "version": "0.0.154",
3
+ "version": "0.0.156",
4
4
  "author": "C.CanLiang <canlooks@gmail.com>",
5
5
  "description": "My ui framework",
6
6
  "license": "MIT",