@sdata/web-vue 1.7.1 → 1.9.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.
Files changed (155) hide show
  1. package/dist/sd.css +182 -1
  2. package/dist/sd.min.css +1 -1
  3. package/es/_components/input-label/input-label.js +30 -24
  4. package/es/_components/select-view/interface.d.ts +1 -0
  5. package/es/_components/select-view/select-view.d.ts +12 -3
  6. package/es/_components/select-view/select-view.js +38 -28
  7. package/es/_components/select-view/style/index.css +45 -0
  8. package/es/_hooks/use-allow-clear.d.ts +4 -0
  9. package/es/_hooks/use-allow-clear.js +20 -0
  10. package/es/_hooks/use-trigger.d.ts +4 -6
  11. package/es/_hooks/use-trigger.js +7 -5
  12. package/es/_utils/color.js +1 -18
  13. package/es/auto-complete/auto-complete.d.ts +1 -1
  14. package/es/auto-complete/auto-complete.js +4 -2
  15. package/es/auto-complete/index.d.ts +3 -3
  16. package/es/badge/badge.d.ts +1 -1
  17. package/es/badge/index.d.ts +3 -3
  18. package/es/carousel/carousel-arrow.vue.d.ts +1 -1
  19. package/es/carousel/carousel.d.ts +2 -2
  20. package/es/carousel/index.d.ts +6 -6
  21. package/es/cascader/cascader-panel.vue.d.ts +2 -2
  22. package/es/cascader/cascader.js +1 -1
  23. package/es/cascader/cascader.vue.d.ts +21 -11
  24. package/es/cascader/cascader.vue_vue_type_script_lang.js +4 -1
  25. package/es/cascader/index.d.ts +47 -26
  26. package/es/color-picker/color-picker.d.ts +115 -40
  27. package/es/color-picker/color-picker.js +146 -102
  28. package/es/color-picker/index.d.ts +217 -69
  29. package/es/color-picker/interface.d.ts +41 -0
  30. package/es/color-picker/palette.js +1 -1
  31. package/es/color-picker/panel.d.ts +73 -34
  32. package/es/color-picker/panel.js +423 -89
  33. package/es/color-picker/style/index.css +92 -1
  34. package/es/color-picker/style/index.scss +107 -1
  35. package/es/color-picker/utils.d.ts +89 -0
  36. package/es/color-picker/utils.js +456 -0
  37. package/es/config-provider/config-provider.vue.d.ts +10 -1
  38. package/es/config-provider/config-provider.vue_vue_type_script_lang.js +6 -1
  39. package/es/config-provider/context.d.ts +1 -0
  40. package/es/config-provider/index.d.ts +18 -3
  41. package/es/date-picker/index.d.ts +7 -6
  42. package/es/date-picker/picker.js +1 -1
  43. package/es/date-picker/picker.vue.d.ts +7 -6
  44. package/es/date-picker/picker.vue_vue_type_script_lang.js +4 -1
  45. package/es/date-picker/range-picker.js +1 -1
  46. package/es/date-picker/range-picker.vue.d.ts +7 -6
  47. package/es/date-picker/range-picker.vue_vue_type_script_lang.js +4 -1
  48. package/es/descriptions/descriptions.d.ts +2 -2
  49. package/es/descriptions/index.d.ts +6 -6
  50. package/es/drawer/drawer.vue_vue_type_script_lang.js +1 -1
  51. package/es/dropdown/dropdown-button.vue.d.ts +8 -8
  52. package/es/dropdown/dropdown-panel.vue.d.ts +2 -2
  53. package/es/dropdown/dropdown-submenu.vue.d.ts +8 -8
  54. package/es/dropdown/dropdown.vue.d.ts +8 -8
  55. package/es/dropdown/index.d.ts +32 -32
  56. package/es/ellipsis/ellipsis.vue.d.ts +13 -13
  57. package/es/ellipsis/ellipsis.vue_vue_type_script_lang.js +1 -1
  58. package/es/ellipsis/index.d.ts +56 -56
  59. package/es/ellipsis/performant-ellipsis.vue.d.ts +14 -14
  60. package/es/form/form-item-label.vue.d.ts +12 -12
  61. package/es/form/form-item.vue.d.ts +12 -12
  62. package/es/form/index.d.ts +12 -12
  63. package/es/grid/grid.vue.d.ts +1 -1
  64. package/es/grid/index.d.ts +3 -3
  65. package/es/image/image.vue.d.ts +12 -12
  66. package/es/image/preview-action.d.ts +12 -12
  67. package/es/image/preview-group.vue.d.ts +12 -12
  68. package/es/image/preview-toolbar.vue.d.ts +12 -12
  69. package/es/image/preview.vue.d.ts +12 -12
  70. package/es/index.css +182 -1
  71. package/es/index.js +2 -2
  72. package/es/input/input.js +4 -2
  73. package/es/input-number/input-number.js +4 -2
  74. package/es/input-tag/index.d.ts +6 -6
  75. package/es/input-tag/input-tag.d.ts +3 -3
  76. package/es/input-tag/input-tag.js +183 -32
  77. package/es/input-tag/style/index.css +45 -0
  78. package/es/input-tag/style/input-tag.scss +53 -0
  79. package/es/list/index.d.ts +3 -3
  80. package/es/list/list.d.ts +1 -1
  81. package/es/mention/mention.js +4 -2
  82. package/es/menu/sub-menu-pop.vue.d.ts +6 -6
  83. package/es/modal/modal.vue_vue_type_script_lang.js +1 -1
  84. package/es/overflow-list/index.d.ts +3 -3
  85. package/es/overflow-list/overflow-list.d.ts +1 -1
  86. package/es/pagination/page-options.vue.d.ts +188 -98
  87. package/es/popconfirm/index.d.ts +12 -12
  88. package/es/popconfirm/popconfirm.vue.d.ts +6 -6
  89. package/es/popover/index.d.ts +12 -12
  90. package/es/popover/popover.vue.d.ts +6 -6
  91. package/es/progress/index.d.ts +5 -5
  92. package/es/progress/line.vue.d.ts +1 -1
  93. package/es/progress/progress.vue.d.ts +2 -2
  94. package/es/rate/rate.js +4 -2
  95. package/es/scrollbar/index.d.ts +2 -2
  96. package/es/scrollbar/scrollbar.vue.d.ts +1 -1
  97. package/es/scrollbar/thumb.vue.d.ts +1 -1
  98. package/es/sd-vue.js +2 -2
  99. package/es/select/hooks/use-options.d.ts +9 -4
  100. package/es/select/hooks/use-options.js +2 -2
  101. package/es/select/hooks/use-select.d.ts +9 -4
  102. package/es/select/index.d.ts +188 -98
  103. package/es/select/interface.d.ts +57 -46
  104. package/es/select/select-dropdown.vue.d.ts +2 -2
  105. package/es/select/select.d.ts +107 -59
  106. package/es/select/select.js +182 -126
  107. package/es/select/utils.d.ts +1 -1
  108. package/es/select/utils.js +28 -10
  109. package/es/skeleton/index.d.ts +1 -1
  110. package/es/skeleton/line.vue.d.ts +1 -1
  111. package/es/slider/index.d.ts +27 -27
  112. package/es/slider/slider-button.vue.d.ts +12 -12
  113. package/es/slider/slider.vue.d.ts +13 -13
  114. package/es/space/index.d.ts +3 -3
  115. package/es/space/space.d.ts +1 -1
  116. package/es/statistic/index.d.ts +6 -6
  117. package/es/statistic/statistic.vue.d.ts +2 -2
  118. package/es/table/index.d.ts +6 -6
  119. package/es/table/table.d.ts +2 -2
  120. package/es/tabs/index.d.ts +9 -9
  121. package/es/tabs/tabs.d.ts +3 -3
  122. package/es/tag/index.d.ts +3 -3
  123. package/es/tag/tag.vue.d.ts +1 -1
  124. package/es/textarea/index.d.ts +3 -3
  125. package/es/textarea/textarea.vue.d.ts +1 -1
  126. package/es/textarea/textarea.vue_vue_type_script_lang.js +6 -2
  127. package/es/time-picker/index.d.ts +15 -12
  128. package/es/time-picker/time-picker.js +1 -1
  129. package/es/time-picker/time-picker.vue.d.ts +7 -6
  130. package/es/time-picker/time-picker.vue_vue_type_script_lang.js +4 -1
  131. package/es/tooltip/index.d.ts +12 -12
  132. package/es/tooltip/tooltip.vue.d.ts +6 -6
  133. package/es/transfer/index.d.ts +10 -10
  134. package/es/transfer/transfer-view.vue.d.ts +5 -5
  135. package/es/transfer/transfer.vue.d.ts +5 -5
  136. package/es/tree/index.d.ts +6 -6
  137. package/es/tree/tree.vue.d.ts +2 -2
  138. package/es/tree-select/hooks/use-selected-state.d.ts +2 -0
  139. package/es/tree-select/hooks/use-selected-state.js +26 -8
  140. package/es/tree-select/index.d.ts +268 -61
  141. package/es/tree-select/interface.d.ts +16 -3
  142. package/es/tree-select/panel.d.ts +6 -6
  143. package/es/tree-select/tree-select.js +29 -16
  144. package/es/tree-select/tree-select.vue.d.ts +144 -30
  145. package/es/tree-select/tree-select.vue_vue_type_script_lang.js +102 -22
  146. package/es/trigger/index.d.ts +6 -6
  147. package/es/trigger/trigger.d.ts +2 -2
  148. package/es/typography/operations.vue.d.ts +12 -12
  149. package/json/vetur-attributes.json +82 -178
  150. package/json/vetur-tags.json +24 -52
  151. package/json/web-types.json +164 -387
  152. package/package.json +9 -7
  153. package/es/color-picker/input-alpha.js +0 -32
  154. package/es/color-picker/input-hex.js +0 -73
  155. package/es/color-picker/input-rgb.js +0 -55
package/dist/sd.css CHANGED
@@ -2012,6 +2012,7 @@ body {
2012
2012
  }
2013
2013
  .sd-select-view-multiple .sd-select-view-inner {
2014
2014
  flex: 1;
2015
+ min-width: 0;
2015
2016
  overflow: hidden;
2016
2017
  line-height: 0;
2017
2018
  }
@@ -2019,9 +2020,16 @@ body {
2019
2020
  display: flex;
2020
2021
  flex-wrap: wrap;
2021
2022
  }
2023
+ .sd-select-view-multiple .sd-select-view-inner.sd-select-view-inner-responsive {
2024
+ display: flex;
2025
+ flex-wrap: nowrap;
2026
+ align-items: center;
2027
+ }
2022
2028
  .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag {
2023
2029
  display: inline-flex;
2030
+ flex-shrink: 0;
2024
2031
  align-items: center;
2032
+ min-width: 0;
2025
2033
  margin-right: 4px;
2026
2034
  color: var(--color-text-1);
2027
2035
  font-size: 12px;
@@ -2039,6 +2047,19 @@ body {
2039
2047
  .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
2040
2048
  background-color: rgba(255, 255, 255, 0.2);
2041
2049
  }
2050
+ .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-overflow {
2051
+ flex-shrink: 1;
2052
+ white-space: nowrap;
2053
+ word-break: normal;
2054
+ }
2055
+ .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-overflow .sd-tag-text {
2056
+ max-width: 100%;
2057
+ }
2058
+ .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-counter {
2059
+ flex-shrink: 0;
2060
+ white-space: nowrap;
2061
+ word-break: normal;
2062
+ }
2042
2063
  .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
2043
2064
  width: 100%;
2044
2065
  padding-right: 0;
@@ -2065,6 +2086,9 @@ body {
2065
2086
  .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
2066
2087
  box-sizing: border-box;
2067
2088
  }
2089
+ .sd-select-view-inner-responsive .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
2090
+ flex: 0 0 auto;
2091
+ }
2068
2092
  .sd-select-view-multiple .sd-select-view-mirror {
2069
2093
  position: absolute;
2070
2094
  top: 0;
@@ -2073,6 +2097,27 @@ body {
2073
2097
  visibility: hidden;
2074
2098
  pointer-events: none;
2075
2099
  }
2100
+ .sd-select-view-multiple .sd-select-view-resize-observer {
2101
+ position: absolute;
2102
+ inset: 0;
2103
+ visibility: hidden;
2104
+ pointer-events: none;
2105
+ }
2106
+ .sd-select-view-multiple .sd-select-view-measure {
2107
+ position: absolute;
2108
+ top: 0;
2109
+ left: 0;
2110
+ display: inline-flex;
2111
+ white-space: nowrap;
2112
+ visibility: hidden;
2113
+ pointer-events: none;
2114
+ }
2115
+ .sd-select-view-multiple .sd-select-view-tag-ellipsis {
2116
+ display: block;
2117
+ min-width: 0;
2118
+ max-width: 100%;
2119
+ vertical-align: bottom;
2120
+ }
2076
2121
  .sd-select-view-multiple.sd-select-view-focus .sd-select-view-tag {
2077
2122
  background-color: var(--color-fill-2);
2078
2123
  border-color: var(--color-fill-2);
@@ -10160,6 +10205,7 @@ body {
10160
10205
  }
10161
10206
  .sd-input-tag .sd-input-tag-inner {
10162
10207
  flex: 1;
10208
+ min-width: 0;
10163
10209
  overflow: hidden;
10164
10210
  line-height: 0;
10165
10211
  }
@@ -10167,9 +10213,16 @@ body {
10167
10213
  display: flex;
10168
10214
  flex-wrap: wrap;
10169
10215
  }
10216
+ .sd-input-tag .sd-input-tag-inner.sd-input-tag-inner-responsive {
10217
+ display: flex;
10218
+ flex-wrap: nowrap;
10219
+ align-items: center;
10220
+ }
10170
10221
  .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag {
10171
10222
  display: inline-flex;
10223
+ flex-shrink: 0;
10172
10224
  align-items: center;
10225
+ min-width: 0;
10173
10226
  margin-right: 4px;
10174
10227
  color: var(--color-text-1);
10175
10228
  font-size: 12px;
@@ -10187,6 +10240,19 @@ body {
10187
10240
  .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
10188
10241
  background-color: rgba(255, 255, 255, 0.2);
10189
10242
  }
10243
+ .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-overflow {
10244
+ flex-shrink: 1;
10245
+ white-space: nowrap;
10246
+ word-break: normal;
10247
+ }
10248
+ .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-overflow .sd-tag-text {
10249
+ max-width: 100%;
10250
+ }
10251
+ .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-counter {
10252
+ flex-shrink: 0;
10253
+ white-space: nowrap;
10254
+ word-break: normal;
10255
+ }
10190
10256
  .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
10191
10257
  width: 100%;
10192
10258
  padding-right: 0;
@@ -10213,6 +10279,9 @@ body {
10213
10279
  .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
10214
10280
  box-sizing: border-box;
10215
10281
  }
10282
+ .sd-input-tag-inner-responsive .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
10283
+ flex: 0 0 auto;
10284
+ }
10216
10285
  .sd-input-tag .sd-input-tag-mirror {
10217
10286
  position: absolute;
10218
10287
  top: 0;
@@ -10221,6 +10290,27 @@ body {
10221
10290
  visibility: hidden;
10222
10291
  pointer-events: none;
10223
10292
  }
10293
+ .sd-input-tag .sd-input-tag-resize-observer {
10294
+ position: absolute;
10295
+ inset: 0;
10296
+ visibility: hidden;
10297
+ pointer-events: none;
10298
+ }
10299
+ .sd-input-tag .sd-input-tag-measure {
10300
+ position: absolute;
10301
+ top: 0;
10302
+ left: 0;
10303
+ display: inline-flex;
10304
+ white-space: nowrap;
10305
+ visibility: hidden;
10306
+ pointer-events: none;
10307
+ }
10308
+ .sd-input-tag .sd-input-tag-tag-ellipsis {
10309
+ display: block;
10310
+ min-width: 0;
10311
+ max-width: 100%;
10312
+ vertical-align: bottom;
10313
+ }
10224
10314
  .sd-input-tag.sd-input-tag-focus .sd-input-tag-tag {
10225
10315
  background-color: var(--color-fill-2);
10226
10316
  border-color: var(--color-fill-2);
@@ -14669,6 +14759,75 @@ body {
14669
14759
  border-radius: 2px;
14670
14760
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
14671
14761
  }
14762
+ .sd-color-picker-panel .sd-color-picker-panel-head {
14763
+ display: flex;
14764
+ justify-content: center;
14765
+ padding: 8px 8px 0;
14766
+ }
14767
+ .sd-color-picker-panel .sd-color-picker-gradient-panel {
14768
+ padding: 8px 8px 0;
14769
+ }
14770
+ .sd-color-picker-panel .sd-color-picker-gradient-bar-shell {
14771
+ position: relative;
14772
+ display: flex;
14773
+ align-items: center;
14774
+ height: 28px;
14775
+ user-select: none;
14776
+ margin-inline: 8px;
14777
+ }
14778
+ .sd-color-picker-panel .sd-color-picker-gradient-bar {
14779
+ display: block;
14780
+ width: 100%;
14781
+ height: 8px;
14782
+ padding: 0;
14783
+ background-color: transparent;
14784
+ border: 1px solid var(--color-border-2);
14785
+ border-radius: 4px;
14786
+ cursor: pointer;
14787
+ }
14788
+ .sd-color-picker-panel .sd-color-picker-gradient-thumb {
14789
+ position: absolute;
14790
+ z-index: 1;
14791
+ width: 18px;
14792
+ height: 18px;
14793
+ padding: 2px;
14794
+ background: var(--color-bg-white);
14795
+ border: 1px solid var(--color-border-2);
14796
+ border-radius: 50%;
14797
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
14798
+ transform: translateX(-50%);
14799
+ cursor: pointer;
14800
+ touch-action: none;
14801
+ }
14802
+ .sd-color-picker-panel .sd-color-picker-gradient-thumb-active {
14803
+ border-color: var(--color-primary-6);
14804
+ box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.16);
14805
+ }
14806
+ .sd-color-picker-panel .sd-color-picker-gradient-thumb-inner {
14807
+ display: block;
14808
+ width: 100%;
14809
+ height: 100%;
14810
+ border-radius: 50%;
14811
+ }
14812
+ .sd-color-picker-panel .sd-color-picker-gradient-meta {
14813
+ display: flex;
14814
+ gap: 6px;
14815
+ align-items: center;
14816
+ margin-top: 8px;
14817
+ }
14818
+ .sd-color-picker-panel .sd-color-picker-gradient-label {
14819
+ color: var(--color-text-2);
14820
+ font-size: 12px;
14821
+ }
14822
+ .sd-color-picker-panel .sd-color-picker-gradient-degree {
14823
+ width: 72px;
14824
+ }
14825
+ .sd-color-picker-panel .sd-color-picker-gradient-preview {
14826
+ height: 32px;
14827
+ margin-top: 8px;
14828
+ border: 1px solid var(--color-border-2);
14829
+ border-radius: 4px;
14830
+ }
14672
14831
  .sd-color-picker-panel .sd-color-picker-palette {
14673
14832
  position: relative;
14674
14833
  box-sizing: border-box;
@@ -14741,11 +14900,25 @@ body {
14741
14900
  .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-section:not(:first-child) {
14742
14901
  margin-top: 12px;
14743
14902
  }
14903
+ .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-header {
14904
+ display: flex;
14905
+ gap: 6px;
14906
+ align-items: center;
14907
+ justify-content: space-between;
14908
+ }
14744
14909
  .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-text {
14745
14910
  color: var(--color-text-1);
14746
14911
  font-weight: 400;
14747
14912
  font-size: 12px;
14748
14913
  }
14914
+ .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-action {
14915
+ padding: 0;
14916
+ color: var(--color-primary-6);
14917
+ font-size: 12px;
14918
+ background: transparent;
14919
+ border: 0;
14920
+ cursor: pointer;
14921
+ }
14749
14922
  .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-empty {
14750
14923
  margin: 12px 0;
14751
14924
  color: var(--color-text-3);
@@ -14831,13 +15004,21 @@ body {
14831
15004
  flex: 0 0 auto;
14832
15005
  width: 52px;
14833
15006
  }
15007
+ .sd-color-picker-panel .sd-color-picker-input-group {
15008
+ width: 100%;
15009
+ }
15010
+ .sd-color-picker-panel .sd-color-picker-format-input {
15011
+ min-width: 0;
15012
+ }
14834
15013
  .sd-color-picker-panel .sd-color-picker-input-hex .sd-input {
14835
15014
  padding-left: 4px;
14836
15015
  }
14837
15016
  .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-palette,
14838
15017
  .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-control-bar,
14839
15018
  .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-color-block,
14840
- .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-preview {
15019
+ .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-preview,
15020
+ .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-gradient-bar,
15021
+ .sd-color-picker-panel.sd-color-picker-panel-disabled .sd-color-picker-gradient-thumb {
14841
15022
  cursor: not-allowed;
14842
15023
  opacity: 0.8;
14843
15024
  }