@rainbow-oh/yee-c 0.2.0 → 0.3.0
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.
- package/dist/cjs/Button/button.js +2 -2
- package/dist/cjs/Button/style/index.less +23 -8
- package/dist/cjs/Card/demo/collapsible.js +2 -1
- package/dist/cjs/Carousel/demo/arrows.js +1 -1
- package/dist/cjs/Carousel/demo/autoplay.js +1 -1
- package/dist/cjs/Carousel/demo/effect.js +1 -1
- package/dist/cjs/Carousel/demo/position.js +1 -1
- package/dist/cjs/Config-Provider/interface.d.ts +4 -0
- package/dist/cjs/Form/Field.js +32 -10
- package/dist/cjs/Form/interface.d.ts +17 -1
- package/dist/cjs/Menu/style/index.less +2 -2
- package/dist/cjs/Radio/demo/button.js +1 -0
- package/dist/cjs/Radio/interface.d.ts +4 -0
- package/dist/cjs/Radio/radio-group.js +28 -14
- package/dist/cjs/Radio/radio.js +3 -1
- package/dist/cjs/Radio/style/index.less +19 -5
- package/dist/cjs/Segmented/demo/basic.d.ts +3 -0
- package/dist/cjs/Segmented/demo/basic.js +51 -0
- package/dist/cjs/Segmented/demo/block.d.ts +3 -0
- package/dist/cjs/Segmented/demo/block.js +49 -0
- package/dist/cjs/Segmented/demo/disabled.d.ts +3 -0
- package/dist/cjs/Segmented/demo/disabled.js +47 -0
- package/dist/cjs/Segmented/demo/size.d.ts +3 -0
- package/dist/cjs/Segmented/demo/size.js +37 -0
- package/dist/cjs/Segmented/index.d.ts +3 -0
- package/dist/cjs/Segmented/index.js +36 -0
- package/dist/cjs/Segmented/interface.d.ts +82 -0
- package/dist/cjs/Segmented/interface.js +17 -0
- package/dist/cjs/Segmented/segmented.d.ts +5 -0
- package/dist/cjs/Segmented/segmented.js +177 -0
- package/dist/cjs/Segmented/style/index.less +104 -0
- package/dist/cjs/Spin/spin.js +2 -1
- package/dist/cjs/Steps/step.js +1 -1
- package/dist/cjs/Steps/style/index.less +8 -2
- package/dist/cjs/Switch/demo/content.js +22 -1
- package/dist/cjs/Switch/style/index.less +16 -0
- package/dist/cjs/Switch/switch.js +9 -2
- package/dist/cjs/Table/interface.d.ts +5 -1
- package/dist/cjs/Table/theader/cell.js +4 -5
- package/dist/cjs/Tag/demo/size.js +1 -1
- package/dist/cjs/Tag/style/index.less +1 -0
- package/dist/cjs/Tour/demo/basic.d.ts +3 -0
- package/dist/cjs/Tour/demo/basic.js +69 -0
- package/dist/cjs/Tour/demo/indicators.d.ts +3 -0
- package/dist/cjs/Tour/demo/indicators.js +76 -0
- package/dist/cjs/Tour/demo/placement.d.ts +3 -0
- package/dist/cjs/Tour/demo/placement.js +80 -0
- package/dist/cjs/Tour/demo/scroll.d.ts +3 -0
- package/dist/cjs/Tour/demo/scroll.js +72 -0
- package/dist/cjs/Tour/index.d.ts +3 -0
- package/dist/cjs/Tour/index.js +36 -0
- package/dist/cjs/Tour/interface.d.ts +118 -0
- package/dist/cjs/Tour/interface.js +17 -0
- package/dist/cjs/Tour/style/index.less +103 -0
- package/dist/cjs/Tour/tour.d.ts +5 -0
- package/dist/cjs/Tour/tour.js +403 -0
- package/dist/cjs/Tree/demo/checkable.js +6 -6
- package/dist/cjs/index.d.ts +4 -0
- package/dist/cjs/index.js +6 -0
- package/dist/cjs/locale/interface.d.ts +7 -0
- package/dist/cjs/locale/lang/en_US.js +6 -0
- package/dist/cjs/locale/lang/ja_JP.js +6 -0
- package/dist/cjs/locale/lang/zh_CN.js +6 -0
- package/dist/cjs/locale/lang/zh_TW.js +6 -0
- package/dist/cjs/style/color.blue.css +1 -1
- package/dist/cjs/style/color.crimson.css +1 -1
- package/dist/cjs/style/color.css +18 -1
- package/dist/cjs/style/size.css +38 -0
- package/dist/cjs/style/themes.css +3 -3
- package/dist/cjs/style/variables.css +57 -2
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/esm/Button/button.js +2 -2
- package/dist/esm/Button/style/index.less +23 -8
- package/dist/esm/Card/demo/collapsible.js +2 -1
- package/dist/esm/Carousel/demo/arrows.js +1 -1
- package/dist/esm/Carousel/demo/autoplay.js +1 -1
- package/dist/esm/Carousel/demo/effect.js +1 -1
- package/dist/esm/Carousel/demo/position.js +1 -1
- package/dist/esm/Config-Provider/interface.d.ts +4 -0
- package/dist/esm/Form/Field.js +11 -4
- package/dist/esm/Form/interface.d.ts +17 -1
- package/dist/esm/Menu/style/index.less +2 -2
- package/dist/esm/Radio/demo/button.js +1 -0
- package/dist/esm/Radio/interface.d.ts +4 -0
- package/dist/esm/Radio/radio-group.js +9 -2
- package/dist/esm/Radio/radio.js +3 -1
- package/dist/esm/Radio/style/index.less +19 -5
- package/dist/esm/Segmented/demo/basic.d.ts +3 -0
- package/dist/esm/Segmented/demo/basic.js +33 -0
- package/dist/esm/Segmented/demo/block.d.ts +3 -0
- package/dist/esm/Segmented/demo/block.js +29 -0
- package/dist/esm/Segmented/demo/disabled.d.ts +3 -0
- package/dist/esm/Segmented/demo/disabled.js +22 -0
- package/dist/esm/Segmented/demo/size.d.ts +3 -0
- package/dist/esm/Segmented/demo/size.js +15 -0
- package/dist/esm/Segmented/index.d.ts +3 -0
- package/dist/esm/Segmented/index.js +2 -0
- package/dist/esm/Segmented/interface.d.ts +82 -0
- package/dist/esm/Segmented/interface.js +1 -0
- package/dist/esm/Segmented/segmented.d.ts +5 -0
- package/dist/esm/Segmented/segmented.js +110 -0
- package/dist/esm/Segmented/style/index.less +104 -0
- package/dist/esm/Spin/spin.js +2 -1
- package/dist/esm/Steps/step.js +4 -1
- package/dist/esm/Steps/style/index.less +8 -2
- package/dist/esm/Switch/demo/content.js +12 -3
- package/dist/esm/Switch/style/index.less +16 -0
- package/dist/esm/Switch/switch.js +7 -5
- package/dist/esm/Table/interface.d.ts +5 -1
- package/dist/esm/Table/theader/cell.js +2 -3
- package/dist/esm/Tag/demo/size.js +6 -2
- package/dist/esm/Tag/style/index.less +1 -0
- package/dist/esm/Tour/demo/basic.d.ts +3 -0
- package/dist/esm/Tour/demo/basic.js +69 -0
- package/dist/esm/Tour/demo/indicators.d.ts +3 -0
- package/dist/esm/Tour/demo/indicators.js +73 -0
- package/dist/esm/Tour/demo/placement.d.ts +3 -0
- package/dist/esm/Tour/demo/placement.js +53 -0
- package/dist/esm/Tour/demo/scroll.d.ts +3 -0
- package/dist/esm/Tour/demo/scroll.js +58 -0
- package/dist/esm/Tour/index.d.ts +3 -0
- package/dist/esm/Tour/index.js +2 -0
- package/dist/esm/Tour/interface.d.ts +118 -0
- package/dist/esm/Tour/interface.js +1 -0
- package/dist/esm/Tour/style/index.less +103 -0
- package/dist/esm/Tour/tour.d.ts +5 -0
- package/dist/esm/Tour/tour.js +383 -0
- package/dist/esm/Tree/demo/checkable.js +6 -6
- package/dist/esm/index.d.ts +4 -0
- package/dist/esm/index.js +4 -0
- package/dist/esm/locale/interface.d.ts +7 -0
- package/dist/esm/locale/lang/en_US.js +6 -0
- package/dist/esm/locale/lang/ja_JP.js +6 -0
- package/dist/esm/locale/lang/zh_CN.js +6 -0
- package/dist/esm/locale/lang/zh_TW.js +6 -0
- package/dist/esm/style/color.blue.css +1 -1
- package/dist/esm/style/color.crimson.css +1 -1
- package/dist/esm/style/color.css +18 -1
- package/dist/esm/style/size.css +38 -0
- package/dist/esm/style/themes.css +3 -3
- package/dist/esm/style/variables.css +57 -2
- package/dist/esm/version.d.ts +1 -1
- package/dist/esm/version.js +1 -1
- package/dist/umd/yee-c.min.css +3 -3
- package/dist/umd/yee-c.min.js +1 -1
- package/package.json +1 -1
- package/src/Button/button.tsx +2 -2
- package/src/Button/style/index.less +23 -8
- package/src/Card/demo/collapsible.tsx +1 -0
- package/src/Carousel/demo/arrows.tsx +1 -1
- package/src/Carousel/demo/autoplay.tsx +1 -1
- package/src/Carousel/demo/effect.tsx +1 -1
- package/src/Carousel/demo/position.tsx +1 -1
- package/src/Config-Provider/index.en-US.md +2 -0
- package/src/Config-Provider/index.zh-CN.md +2 -0
- package/src/Config-Provider/interface.ts +4 -0
- package/src/Form/Field.tsx +30 -11
- package/src/Form/index.en-US.md +4 -0
- package/src/Form/index.zh-CN.md +4 -0
- package/src/Form/interface.ts +17 -1
- package/src/Menu/style/index.less +2 -2
- package/src/Radio/demo/button.tsx +1 -0
- package/src/Radio/index.en-US.md +2 -0
- package/src/Radio/index.zh-CN.md +2 -0
- package/src/Radio/interface.ts +4 -0
- package/src/Radio/radio-group.tsx +9 -1
- package/src/Radio/radio.tsx +2 -1
- package/src/Radio/style/index.less +19 -5
- package/src/Segmented/demo/basic.tsx +24 -0
- package/src/Segmented/demo/block.tsx +17 -0
- package/src/Segmented/demo/disabled.tsx +18 -0
- package/src/Segmented/demo/size.tsx +10 -0
- package/src/Segmented/index.en-US.md +47 -0
- package/src/Segmented/index.ts +12 -0
- package/src/Segmented/index.zh-CN.md +47 -0
- package/src/Segmented/interface.ts +87 -0
- package/src/Segmented/segmented.tsx +134 -0
- package/src/Segmented/style/index.less +104 -0
- package/src/Spin/spin.tsx +1 -0
- package/src/Steps/step.tsx +1 -1
- package/src/Steps/style/index.less +8 -2
- package/src/Switch/demo/content.tsx +15 -5
- package/src/Switch/style/index.less +16 -0
- package/src/Switch/switch.tsx +14 -6
- package/src/Table/index.en-US.md +1 -0
- package/src/Table/index.zh-CN.md +1 -0
- package/src/Table/interface.ts +5 -1
- package/src/Table/theader/cell.tsx +2 -9
- package/src/Tag/demo/size.tsx +2 -2
- package/src/Tag/style/index.less +1 -0
- package/src/Tour/demo/basic.tsx +52 -0
- package/src/Tour/demo/indicators.tsx +63 -0
- package/src/Tour/demo/placement.tsx +55 -0
- package/src/Tour/demo/scroll.tsx +49 -0
- package/src/Tour/index.en-US.md +61 -0
- package/src/Tour/index.ts +10 -0
- package/src/Tour/index.zh-CN.md +61 -0
- package/src/Tour/interface.ts +126 -0
- package/src/Tour/style/index.less +103 -0
- package/src/Tour/tour.tsx +399 -0
- package/src/Tree/demo/checkable.tsx +6 -6
- package/src/index.ts +6 -0
- package/src/locale/interface.ts +9 -0
- package/src/locale/lang/en_US.ts +7 -0
- package/src/locale/lang/ja_JP.ts +7 -0
- package/src/locale/lang/zh_CN.ts +7 -0
- package/src/locale/lang/zh_TW.ts +7 -0
- package/src/style/color.blue.css +1 -1
- package/src/style/color.crimson.css +1 -1
- package/src/style/color.css +18 -1
- package/src/style/size.css +38 -0
- package/src/version.ts +1 -1
- package/dist/cjs/utils/x.d.ts +0 -11
- package/dist/cjs/utils/x.js +0 -51
- package/dist/esm/utils/x.d.ts +0 -11
- package/dist/esm/utils/x.js +0 -49
- package/src/utils/x.ts +0 -33
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* @rainbow-oh/yee-c CSS Variables
|
|
3
3
|
* Auto-generated, do not edit manually
|
|
4
|
-
* Generated on 2026-06-
|
|
4
|
+
* Generated on 2026-06-25T07:27:25.693Z
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
/* ========== color.blue.css ========== */
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
--yee-text-color-description: #7c7c7c;
|
|
38
38
|
--yee-text-color-disabled: #bfbfbf;
|
|
39
39
|
--yee-text-color-highlight: #f58220;
|
|
40
|
-
--yee-text-color-auxiliary: #
|
|
40
|
+
--yee-text-color-auxiliary: #f5f5f5;
|
|
41
41
|
--yee-color-split: #e7e7e7;
|
|
42
42
|
--yee-border-color: #cbd6e2;
|
|
43
43
|
--yee-border-color-hover-focus: #75b9f0;
|
|
@@ -1406,7 +1406,7 @@
|
|
|
1406
1406
|
--yee-text-color-description: #8d8d8d;
|
|
1407
1407
|
--yee-text-color-disabled: #bfbfbf;
|
|
1408
1408
|
--yee-text-color-highlight: #bc463e;
|
|
1409
|
-
--yee-text-color-auxiliary: #
|
|
1409
|
+
--yee-text-color-auxiliary: #f5f5f5;
|
|
1410
1410
|
--yee-color-split: #eeeeee;
|
|
1411
1411
|
--yee-border-color: #cccccc;
|
|
1412
1412
|
--yee-border-color-hover-focus: #7aadc2;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* @rainbow-oh/yee-c CSS Variables
|
|
3
3
|
* Auto-generated, do not edit manually
|
|
4
|
-
* Generated on 2026-06-
|
|
4
|
+
* Generated on 2026-06-25T07:27:25.693Z
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
/* ========== color.css ========== */
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
--yee-text-color-description: #7c7c7c;
|
|
38
38
|
--yee-text-color-disabled: #bfbfbf;
|
|
39
39
|
--yee-text-color-highlight: #f58220;
|
|
40
|
-
--yee-text-color-auxiliary: #
|
|
40
|
+
--yee-text-color-auxiliary: #f5f5f5;
|
|
41
41
|
--yee-color-split: #e7e7e7;
|
|
42
42
|
--yee-border-color: #cbd6e2;
|
|
43
43
|
--yee-border-color-hover-focus: #75b9f0;
|
|
@@ -605,6 +605,15 @@
|
|
|
605
605
|
--yee-select-multi-disabled-tag-border-color: var(--yee-color-split);
|
|
606
606
|
--yee-select-multi-disabled-tag-bg-color: var(--yee-color-split);
|
|
607
607
|
|
|
608
|
+
/* --Segmented-- */
|
|
609
|
+
--yee-segmented-bg-color: var(--yee-color-bg-layout);
|
|
610
|
+
--yee-segmented-item-color: var(--yee-text-color);
|
|
611
|
+
--yee-segmented-item-hover-color: var(--yee-primary-color);
|
|
612
|
+
--yee-segmented-item-selected-color: var(--yee-text-color);
|
|
613
|
+
--yee-segmented-item-disabled-color: var(--yee-text-color-disabled);
|
|
614
|
+
--yee-segmented-thumb-bg-color: var(--yee-color-bg-container);
|
|
615
|
+
--yee-segmented-thumb-box-shadow: 0 2px 8px var(--yee-box-shadow-color);
|
|
616
|
+
|
|
608
617
|
/* --Slider-- */
|
|
609
618
|
--yee-slider-track-bg-color: var(--yee-primary-color);
|
|
610
619
|
--yee-slider-track-bg-hover-color: var(--yee-primary-color-hover);
|
|
@@ -961,6 +970,14 @@
|
|
|
961
970
|
--yee-tooltip-error-color: #fff;
|
|
962
971
|
--yee-tooltip-error-bg-color: var(--yee-error-color);
|
|
963
972
|
|
|
973
|
+
/* --Tour-- */
|
|
974
|
+
--yee-tour-mask-color: rgba(0, 0, 0, 45%);
|
|
975
|
+
--yee-tour-content-bg-color: var(--yee-color-bg-container);
|
|
976
|
+
--yee-tour-content-box-shadow: 0 6px 16px var(--yee-box-shadow-color);
|
|
977
|
+
--yee-tour-close-color: var(--yee-text-color);
|
|
978
|
+
--yee-tour-title-color: var(--yee-text-color);
|
|
979
|
+
--yee-tour-description-color: var(--yee-text-color-description);
|
|
980
|
+
|
|
964
981
|
/* --Tree-- */
|
|
965
982
|
--yee-tree-node-text-hover-bg-color: var(--yee-color-option-hover-bg);
|
|
966
983
|
--yee-tree-node-text-hover-color: var(--yee-color-option-hover);
|
|
@@ -1519,6 +1536,10 @@
|
|
|
1519
1536
|
--yee-radio-inner-border-width: 1px;
|
|
1520
1537
|
--yee-radio-inner-after-width: 10px;
|
|
1521
1538
|
--yee-radio-inner-after-height: 10px;
|
|
1539
|
+
--yee-radio-font-small-size: 12px;
|
|
1540
|
+
--yee-radio-small-padding: 2px;
|
|
1541
|
+
--yee-radio-font-large-size: 16px;
|
|
1542
|
+
--yee-radio-large-padding: 6px;
|
|
1522
1543
|
|
|
1523
1544
|
/* --Rate-- */
|
|
1524
1545
|
--yee-rate-star-width: 24px;
|
|
@@ -1594,6 +1615,20 @@
|
|
|
1594
1615
|
--yee-skeleton-active-translate-start: -37.5%;
|
|
1595
1616
|
--yee-skeleton-active-translate-end: 37.5%;
|
|
1596
1617
|
|
|
1618
|
+
/* --Segmented-- */
|
|
1619
|
+
--yee-segmented-padding: 2px;
|
|
1620
|
+
--yee-segmented-border-radius: 8px;
|
|
1621
|
+
--yee-segmented-item-padding: 4px 12px;
|
|
1622
|
+
--yee-segmented-item-border-radius: 6px;
|
|
1623
|
+
--yee-segmented-item-gap: 6px;
|
|
1624
|
+
--yee-segmented-font-size: 14px;
|
|
1625
|
+
--yee-segmented-item-small-padding: 2px 8px;
|
|
1626
|
+
--yee-segmented-font-small-size: 12px;
|
|
1627
|
+
--yee-segmented-item-large-padding: 6px 16px;
|
|
1628
|
+
--yee-segmented-font-large-size: 16px;
|
|
1629
|
+
--yee-segmented-thumb-border-radius: 6px;
|
|
1630
|
+
--yee-segmented-transition-duration: 0.2s;
|
|
1631
|
+
|
|
1597
1632
|
/* --Slider-- */
|
|
1598
1633
|
--yee-slider-height: 12px;
|
|
1599
1634
|
--yee-slider-padding: 4px 0;
|
|
@@ -1884,6 +1919,26 @@
|
|
|
1884
1919
|
--yee-tooltip-arrow-translate-y: 50%;
|
|
1885
1920
|
--yee-tooltip-arrow-rotate: -135deg;
|
|
1886
1921
|
|
|
1922
|
+
/* --Tour-- */
|
|
1923
|
+
--yee-tour-mask-z-index: var(--yee-z-index-mask);
|
|
1924
|
+
--yee-tour-content-width: 400px;
|
|
1925
|
+
--yee-tour-content-padding: 16px;
|
|
1926
|
+
--yee-tour-content-border-radius: 8px;
|
|
1927
|
+
--yee-tour-highlight-border-radius: 6px;
|
|
1928
|
+
--yee-tour-close-top: 12px;
|
|
1929
|
+
--yee-tour-close-right: 12px;
|
|
1930
|
+
--yee-tour-close-size: 20px;
|
|
1931
|
+
--yee-tour-header-margin-bottom: 8px;
|
|
1932
|
+
--yee-tour-title-font-size: 16px;
|
|
1933
|
+
--yee-tour-title-font-weight: 600;
|
|
1934
|
+
--yee-tour-title-line-height: 24px;
|
|
1935
|
+
--yee-tour-description-font-size: 14px;
|
|
1936
|
+
--yee-tour-description-line-height: 22px;
|
|
1937
|
+
--yee-tour-footer-margin-top: 16px;
|
|
1938
|
+
--yee-tour-indicator-gap: 6px;
|
|
1939
|
+
--yee-tour-button-gap: 8px;
|
|
1940
|
+
--yee-tour-transition-duration: 0.2s;
|
|
1941
|
+
|
|
1887
1942
|
/* --Tree-- */
|
|
1888
1943
|
--yee-tree-node-height: 32px;
|
|
1889
1944
|
--yee-tree-node-expand-icon-margin-left: 4px;
|
package/dist/cjs/version.d.ts
CHANGED
package/dist/cjs/version.js
CHANGED
|
@@ -45,7 +45,7 @@ var Button = /*#__PURE__*/forwardRef(function (baseprops, ref) {
|
|
|
45
45
|
if (type) {
|
|
46
46
|
switch (type) {
|
|
47
47
|
case 'default':
|
|
48
|
-
mergedColor = '
|
|
48
|
+
mergedColor = 'default';
|
|
49
49
|
mergedVariant = 'outlined';
|
|
50
50
|
break;
|
|
51
51
|
case 'primary':
|
|
@@ -53,7 +53,7 @@ var Button = /*#__PURE__*/forwardRef(function (baseprops, ref) {
|
|
|
53
53
|
mergedVariant = 'solid';
|
|
54
54
|
break;
|
|
55
55
|
case 'dashed':
|
|
56
|
-
mergedColor = '
|
|
56
|
+
mergedColor = 'default';
|
|
57
57
|
mergedVariant = 'dashed';
|
|
58
58
|
break;
|
|
59
59
|
case 'link':
|
|
@@ -41,18 +41,18 @@
|
|
|
41
41
|
border: none;
|
|
42
42
|
|
|
43
43
|
&:not(@{pls}-disabled):hover {
|
|
44
|
-
background-color: var(--m-btn-hover-color);
|
|
44
|
+
background-color: var(--m-btn-hover-bg-color);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
&:not(@{pls}-disabled):active {
|
|
48
|
-
background-color: var(--m-btn-active-color);
|
|
48
|
+
background-color: var(--m-btn-active-bg-color);
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
&-dashed {
|
|
53
53
|
color: var(--m-btn-color);
|
|
54
54
|
background-color: transparent;
|
|
55
|
-
border: var(--yee-btn-border-width) dashed var(--m-btn-color);
|
|
55
|
+
border: var(--yee-btn-border-width) dashed var(--m-btn-border-color);
|
|
56
56
|
|
|
57
57
|
&:not(@{pls}-disabled):hover {
|
|
58
58
|
color: var(--m-btn-hover-color);
|
|
@@ -84,7 +84,19 @@
|
|
|
84
84
|
&-outlined {
|
|
85
85
|
color: var(--m-btn-color);
|
|
86
86
|
background-color: transparent;
|
|
87
|
-
border: var(--yee-btn-border-width) solid var(--m-btn-color);
|
|
87
|
+
border: var(--yee-btn-border-width) solid var(--m-btn-border-color);
|
|
88
|
+
|
|
89
|
+
&:not(@{pls}-disabled) {
|
|
90
|
+
&:hover {
|
|
91
|
+
color: var(--m-btn-hover-color);
|
|
92
|
+
border-color: var(--m-btn-border-hover-color);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&:active {
|
|
96
|
+
color: var(--m-btn-active-color);
|
|
97
|
+
border-color: var(--m-btn-border-active-color);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
88
100
|
}
|
|
89
101
|
|
|
90
102
|
&-ghost {
|
|
@@ -134,11 +146,14 @@
|
|
|
134
146
|
// ---- color ------
|
|
135
147
|
&-default {
|
|
136
148
|
--m-btn-color: var(--yee-text-color);
|
|
137
|
-
--m-btn-hover-color: var(--yee-
|
|
138
|
-
--m-btn-
|
|
149
|
+
--m-btn-hover-color: var(--yee-primary-color);
|
|
150
|
+
--m-btn-border-color: var(--yee-border-color);
|
|
151
|
+
--m-btn-border-hover-color: var(--yee-primary-color);
|
|
139
152
|
--m-btn-bg-color: var(--yee-btn-default-bg-color);
|
|
140
|
-
--m-btn-hover-bg-color: var(--yee-
|
|
141
|
-
--m-btn-active-
|
|
153
|
+
--m-btn-hover-bg-color: var(--yee-text-color-auxiliary);
|
|
154
|
+
--m-btn-border-active-color: var(--yee-primary-color-active);
|
|
155
|
+
--m-btn-active-color: var(--yee-primary-color-active);
|
|
156
|
+
--m-btn-active-bg-color: var(--yee-text-color-auxiliary);
|
|
142
157
|
}
|
|
143
158
|
|
|
144
159
|
&-primary {
|
|
@@ -9,6 +9,7 @@ export default (function () {
|
|
|
9
9
|
}, "More"),
|
|
10
10
|
style: {
|
|
11
11
|
width: 300
|
|
12
|
-
}
|
|
12
|
+
},
|
|
13
|
+
bordered: true
|
|
13
14
|
}, /*#__PURE__*/React.createElement("p", null, "Card content"), /*#__PURE__*/React.createElement("p", null, "Card content"), /*#__PURE__*/React.createElement("p", null, "Card content"));
|
|
14
15
|
});
|
|
@@ -38,6 +38,7 @@ import { RadioGroupProps, RadioProps } from '../Radio';
|
|
|
38
38
|
import { RangePickerProps } from '../RangePicker';
|
|
39
39
|
import { RateProps } from '../Rate';
|
|
40
40
|
import { SearchProps } from '../Search';
|
|
41
|
+
import { SegmentedProps } from '../Segmented';
|
|
41
42
|
import { SelectProps } from '../Select';
|
|
42
43
|
import { SkeletonProps } from '../Skeleton';
|
|
43
44
|
import { SliderProps } from '../Slider';
|
|
@@ -53,6 +54,7 @@ import { TextAreaProps } from '../TextArea';
|
|
|
53
54
|
import { SpinProps } from '../Spin';
|
|
54
55
|
import { TimelineProps } from '../Timeline';
|
|
55
56
|
import { TooltipProps } from '../Tooltip';
|
|
57
|
+
import { TourProps } from '../Tour';
|
|
56
58
|
import { TransferProps } from '../Transfer';
|
|
57
59
|
import { TreeProps } from '../Tree';
|
|
58
60
|
import { TreeSelectProps } from '../TreeSelect';
|
|
@@ -105,6 +107,7 @@ export type GlobalCtxType = {
|
|
|
105
107
|
rate?: RateProps;
|
|
106
108
|
search?: SearchProps;
|
|
107
109
|
select?: SelectProps;
|
|
110
|
+
segmented?: SegmentedProps;
|
|
108
111
|
skeleton?: SkeletonProps;
|
|
109
112
|
slider?: SliderProps;
|
|
110
113
|
space?: SpaceProps;
|
|
@@ -121,6 +124,7 @@ export type GlobalCtxType = {
|
|
|
121
124
|
timeline?: TimelineProps;
|
|
122
125
|
highlight?: HighlightProps;
|
|
123
126
|
tooltip?: TooltipProps;
|
|
127
|
+
tour?: TourProps;
|
|
124
128
|
transfer?: TransferProps;
|
|
125
129
|
tree?: TreeProps<unknown>;
|
|
126
130
|
treeselect?: TreeSelectProps;
|
package/dist/esm/Form/Field.js
CHANGED
|
@@ -37,7 +37,11 @@ function stringifyPath(path) {
|
|
|
37
37
|
return path.join('.');
|
|
38
38
|
}
|
|
39
39
|
var Field = function Field(props) {
|
|
40
|
-
var
|
|
40
|
+
var style = props.style,
|
|
41
|
+
className = props.className,
|
|
42
|
+
styles = props.styles,
|
|
43
|
+
classNames = props.classNames,
|
|
44
|
+
children = props.children,
|
|
41
45
|
name = props.name,
|
|
42
46
|
rules = props.rules,
|
|
43
47
|
label = props.label,
|
|
@@ -160,18 +164,21 @@ var Field = function Field(props) {
|
|
|
160
164
|
});
|
|
161
165
|
};
|
|
162
166
|
return /*#__PURE__*/React.createElement("div", {
|
|
163
|
-
className: clsx("".concat(prefixCls, "-item"), "".concat(prefixCls, "-item-").concat(layout), _defineProperty({}, "".concat(prefixCls, "-item-").concat(validate === null || validate === void 0 ? void 0 : validate.status), validate && validate.status))
|
|
167
|
+
className: clsx("".concat(prefixCls, "-item"), "".concat(prefixCls, "-item-").concat(layout), _defineProperty({}, "".concat(prefixCls, "-item-").concat(validate === null || validate === void 0 ? void 0 : validate.status), validate && validate.status), className),
|
|
168
|
+
style: style
|
|
164
169
|
}, /*#__PURE__*/React.createElement("div", {
|
|
165
170
|
className: clsx("".concat(prefixCls, "-item-row"))
|
|
166
171
|
}, label || tooltipConfig ? /*#__PURE__*/React.createElement("label", {
|
|
167
172
|
htmlFor: normalizedName,
|
|
168
|
-
className: clsx("".concat(prefixCls, "-item-label"), _defineProperty({}, "".concat(prefixCls, "-item-required"), isRequired()))
|
|
173
|
+
className: clsx("".concat(prefixCls, "-item-label"), _defineProperty({}, "".concat(prefixCls, "-item-required"), isRequired()), classNames === null || classNames === void 0 ? void 0 : classNames.label),
|
|
174
|
+
style: styles === null || styles === void 0 ? void 0 : styles.label
|
|
169
175
|
}, label, isRequired() ? /*#__PURE__*/React.createElement("span", {
|
|
170
176
|
className: "".concat(prefixCls, "-item-required-mark")
|
|
171
177
|
}, "*") : null, tooltipConfig ? /*#__PURE__*/React.createElement(Tooltip, tooltipConfig.tooltipProps, /*#__PURE__*/React.createElement("span", {
|
|
172
178
|
className: "".concat(prefixCls, "-item-tooltip-icon")
|
|
173
179
|
}, tooltipConfig.icon)) : null) : null, /*#__PURE__*/React.createElement("div", {
|
|
174
|
-
className: "".concat(prefixCls, "-item-control")
|
|
180
|
+
className: clsx("".concat(prefixCls, "-item-control"), classNames === null || classNames === void 0 ? void 0 : classNames.control),
|
|
181
|
+
style: styles === null || styles === void 0 ? void 0 : styles.control
|
|
175
182
|
}, /*#__PURE__*/React.isValidElement(children) ? ( /*#__PURE__*/React.cloneElement(children, getControlled(children))) : /*#__PURE__*/React.createElement("span", null, children))), /*#__PURE__*/React.createElement(AnimatePresence, null, validate && /*#__PURE__*/React.createElement(motion.small, {
|
|
176
183
|
initial: {
|
|
177
184
|
opacity: 0,
|
|
@@ -5,7 +5,7 @@ export type StoreValue = any;
|
|
|
5
5
|
export type Store = Record<string, StoreValue>;
|
|
6
6
|
export type Name = string;
|
|
7
7
|
export type NamePath = string | string[] | number | (string | number)[];
|
|
8
|
-
export type
|
|
8
|
+
export type FieldSemanticDOM = 'label' | 'control';
|
|
9
9
|
export type InternalNamePath = (string | number)[];
|
|
10
10
|
export interface FormProps<Values = any> extends DataAttributeProps {
|
|
11
11
|
/**
|
|
@@ -236,6 +236,22 @@ export type FieldConfigurableTooltip = Omit<TooltipProps, 'children'> & {
|
|
|
236
236
|
};
|
|
237
237
|
export type FieldTooltip = React.ReactNode | FieldConfigurableTooltip;
|
|
238
238
|
export type FieldProps = {
|
|
239
|
+
/**
|
|
240
|
+
* custom field root className
|
|
241
|
+
* */
|
|
242
|
+
className?: string;
|
|
243
|
+
/**
|
|
244
|
+
* custom field root style
|
|
245
|
+
* */
|
|
246
|
+
style?: React.CSSProperties;
|
|
247
|
+
/**
|
|
248
|
+
* Semantic DOM className
|
|
249
|
+
* */
|
|
250
|
+
classNames?: Partial<Record<FieldSemanticDOM, string>>;
|
|
251
|
+
/**
|
|
252
|
+
* Semantic DOM style
|
|
253
|
+
* */
|
|
254
|
+
styles?: Partial<Record<FieldSemanticDOM, React.CSSProperties>>;
|
|
239
255
|
/**
|
|
240
256
|
* Child nodes
|
|
241
257
|
* */
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
list-style: none;
|
|
83
83
|
|
|
84
84
|
&-title {
|
|
85
|
-
padding: var(--yee-menu-item-group-title-padding,
|
|
85
|
+
padding: var(--yee-menu-item-group-title-padding, 4px 12px);
|
|
86
86
|
color: var(
|
|
87
87
|
--yee-menu-item-group-title-color,
|
|
88
88
|
var(--yee-color-text-secondary)
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
margin: var(--yee-menu-item-divider-margin, 4px 0);
|
|
107
107
|
border-top: var(
|
|
108
108
|
--yee-menu-item-divider-border,
|
|
109
|
-
1px solid var(--yee-color
|
|
109
|
+
1px solid var(--yee-border-color)
|
|
110
110
|
);
|
|
111
111
|
}
|
|
112
112
|
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
var _excluded = ["prefixCls", "className", "name", "value", "defaultValue", "options", "buttonStyle", "disabled", "size", "onChange"];
|
|
2
|
+
var _excluded = ["prefixCls", "className", "style", "name", "value", "defaultValue", "options", "buttonStyle", "disabled", "size", "gap", "onChange"];
|
|
3
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
6
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
7
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
8
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
@@ -27,6 +29,7 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
|
|
|
27
29
|
var _props$prefixCls = props.prefixCls,
|
|
28
30
|
prefixCls = _props$prefixCls === void 0 ? 'yee-radio-group' : _props$prefixCls,
|
|
29
31
|
className = props.className,
|
|
32
|
+
style = props.style,
|
|
30
33
|
_props$name = props.name,
|
|
31
34
|
name = _props$name === void 0 ? uid : _props$name,
|
|
32
35
|
value = props.value,
|
|
@@ -35,6 +38,7 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
|
|
|
35
38
|
buttonStyle = props.buttonStyle,
|
|
36
39
|
disabled = props.disabled,
|
|
37
40
|
size = props.size,
|
|
41
|
+
gap = props.gap,
|
|
38
42
|
onChange = props.onChange,
|
|
39
43
|
rest = _objectWithoutProperties(props, _excluded);
|
|
40
44
|
var _useMergedState = useMergedState('', {
|
|
@@ -44,13 +48,16 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
|
|
|
44
48
|
_useMergedState2 = _slicedToArray(_useMergedState, 2),
|
|
45
49
|
mergedValue = _useMergedState2[0],
|
|
46
50
|
setMergedValue = _useMergedState2[1];
|
|
47
|
-
var cls = clsx(prefixCls, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-").concat(buttonStyle), buttonStyle), "".concat(prefixCls, "-").concat(size), size), className);
|
|
51
|
+
var cls = clsx(prefixCls, _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-").concat(buttonStyle), buttonStyle), "".concat(prefixCls, "-").concat(size), size), "".concat(prefixCls, "-with-gap"), gap), className);
|
|
48
52
|
var handleChange = function handleChange(event) {
|
|
49
53
|
setMergedValue(event.target.value);
|
|
50
54
|
onChange === null || onChange === void 0 || onChange(event.target.value, event);
|
|
51
55
|
};
|
|
52
56
|
return /*#__PURE__*/React.createElement("div", {
|
|
53
57
|
className: cls,
|
|
58
|
+
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
59
|
+
gap: gap
|
|
60
|
+
}),
|
|
54
61
|
ref: ref,
|
|
55
62
|
role: "radiogroup"
|
|
56
63
|
}, /*#__PURE__*/React.createElement(GroupCtx.Provider, {
|
package/dist/esm/Radio/radio.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
var _excluded = ["prefixCls", "className", "classNames", "styles", "label", "children", "value", "checked", "defaultChecked", "disabled", "toggleable", "onChange"];
|
|
2
|
+
var _excluded = ["prefixCls", "className", "classNames", "style", "styles", "label", "children", "value", "checked", "defaultChecked", "disabled", "toggleable", "onChange"];
|
|
3
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
4
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
5
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
@@ -27,6 +27,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
|
|
|
27
27
|
prefixCls = _props$prefixCls === void 0 ? 'yee-radio' : _props$prefixCls,
|
|
28
28
|
className = props.className,
|
|
29
29
|
classNames = props.classNames,
|
|
30
|
+
style = props.style,
|
|
30
31
|
styles = props.styles,
|
|
31
32
|
label = props.label,
|
|
32
33
|
children = props.children,
|
|
@@ -68,6 +69,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
|
|
|
68
69
|
var cls = clsx(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-wrapper"), !buttonStyle), "".concat(prefixCls, "-button-wrapper"), buttonStyle), "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-checked"), mergedChecked), className);
|
|
69
70
|
return /*#__PURE__*/React.createElement("label", {
|
|
70
71
|
className: cls,
|
|
72
|
+
style: style,
|
|
71
73
|
onClick: handleClick
|
|
72
74
|
}, /*#__PURE__*/React.createElement("span", {
|
|
73
75
|
className: clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-disabled"), disabled))
|
|
@@ -9,9 +9,17 @@
|
|
|
9
9
|
gap: var(--yee-radio-group-gap);
|
|
10
10
|
|
|
11
11
|
&-small {
|
|
12
|
+
@{pls}-button-wrapper {
|
|
13
|
+
font-size: var(--yee-radio-font-small-size);
|
|
14
|
+
padding: var(--yee-radio-small-padding);
|
|
15
|
+
}
|
|
12
16
|
}
|
|
13
17
|
|
|
14
18
|
&-large {
|
|
19
|
+
@{pls}-button-wrapper {
|
|
20
|
+
font-size: var(--yee-radio-font-large-size);
|
|
21
|
+
padding: var(--yee-radio-large-padding);
|
|
22
|
+
}
|
|
15
23
|
}
|
|
16
24
|
|
|
17
25
|
&-solid {
|
|
@@ -55,7 +63,7 @@
|
|
|
55
63
|
bottom: 0;
|
|
56
64
|
border-color: transparent;
|
|
57
65
|
border-style: solid;
|
|
58
|
-
border-width: var(--yee-radio-cornermark-border-width);
|
|
66
|
+
border-width: calc(var(--yee-radio-cornermark-border-width) / 3 * 2);
|
|
59
67
|
border-right-color: var(--yee-radio-inner-checked-border-color);
|
|
60
68
|
border-bottom-color: var(--yee-radio-inner-checked-border-color);
|
|
61
69
|
content: '';
|
|
@@ -64,10 +72,10 @@
|
|
|
64
72
|
&::before {
|
|
65
73
|
position: absolute;
|
|
66
74
|
z-index: 1;
|
|
67
|
-
right:
|
|
68
|
-
top:
|
|
69
|
-
width:
|
|
70
|
-
height:
|
|
75
|
+
right: 3px;
|
|
76
|
+
top: 18px;
|
|
77
|
+
width: 3px;
|
|
78
|
+
height: 7px;
|
|
71
79
|
border: 2px solid #fff;
|
|
72
80
|
border-width: 0 2px 2px 0;
|
|
73
81
|
transform: rotate(45deg);
|
|
@@ -81,6 +89,12 @@
|
|
|
81
89
|
margin-left: -1px;
|
|
82
90
|
}
|
|
83
91
|
}
|
|
92
|
+
|
|
93
|
+
&-with-gap {
|
|
94
|
+
@{pls}-button-wrapper {
|
|
95
|
+
border-radius: var(--yee-radio-button-wrapper-border-radius);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
84
98
|
}
|
|
85
99
|
|
|
86
100
|
&-wrapper {
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import { Segmented, Space } from "../..";
|
|
8
|
+
import React, { useState } from 'react';
|
|
9
|
+
export default (function () {
|
|
10
|
+
var _useState = useState('daily'),
|
|
11
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
12
|
+
value = _useState2[0],
|
|
13
|
+
setValue = _useState2[1];
|
|
14
|
+
return /*#__PURE__*/React.createElement(Space, {
|
|
15
|
+
direction: "vertical"
|
|
16
|
+
}, /*#__PURE__*/React.createElement(Segmented, {
|
|
17
|
+
options: [{
|
|
18
|
+
label: 'Daily',
|
|
19
|
+
value: 'daily'
|
|
20
|
+
}, {
|
|
21
|
+
label: 'Weekly',
|
|
22
|
+
value: 'weekly'
|
|
23
|
+
}, {
|
|
24
|
+
label: 'Monthly',
|
|
25
|
+
value: 'monthly'
|
|
26
|
+
}],
|
|
27
|
+
value: value,
|
|
28
|
+
onChange: setValue
|
|
29
|
+
}), /*#__PURE__*/React.createElement(Segmented, {
|
|
30
|
+
options: ['List', 'Table', 'Chart'],
|
|
31
|
+
defaultValue: "List"
|
|
32
|
+
}), /*#__PURE__*/React.createElement("div", null, "Selected: ", value));
|
|
33
|
+
});
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Segmented } from "../..";
|
|
2
|
+
import { LayoutGrid, List } from 'lucide-react';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
export default (function () {
|
|
5
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
6
|
+
style: {
|
|
7
|
+
width: 480
|
|
8
|
+
}
|
|
9
|
+
}, /*#__PURE__*/React.createElement(Segmented, {
|
|
10
|
+
block: true,
|
|
11
|
+
defaultValue: "list",
|
|
12
|
+
options: [{
|
|
13
|
+
label: 'List',
|
|
14
|
+
value: 'list',
|
|
15
|
+
icon: /*#__PURE__*/React.createElement(List, {
|
|
16
|
+
size: 16
|
|
17
|
+
})
|
|
18
|
+
}, {
|
|
19
|
+
label: 'Grid',
|
|
20
|
+
value: 'grid',
|
|
21
|
+
icon: /*#__PURE__*/React.createElement(LayoutGrid, {
|
|
22
|
+
size: 16
|
|
23
|
+
})
|
|
24
|
+
}, {
|
|
25
|
+
label: 'Detail',
|
|
26
|
+
value: 'detail'
|
|
27
|
+
}]
|
|
28
|
+
}));
|
|
29
|
+
});
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Segmented } from "../..";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export default (function () {
|
|
4
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Segmented, {
|
|
5
|
+
options: [{
|
|
6
|
+
label: 'A',
|
|
7
|
+
value: 'a'
|
|
8
|
+
}, {
|
|
9
|
+
label: 'B',
|
|
10
|
+
value: 'b',
|
|
11
|
+
disabled: true
|
|
12
|
+
}, {
|
|
13
|
+
label: 'C',
|
|
14
|
+
value: 'c'
|
|
15
|
+
}],
|
|
16
|
+
defaultValue: "a"
|
|
17
|
+
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Segmented, {
|
|
18
|
+
disabled: true,
|
|
19
|
+
options: ['A', 'B', 'C'],
|
|
20
|
+
defaultValue: "A"
|
|
21
|
+
}));
|
|
22
|
+
});
|