@sdata/web-vue 3.7.0 → 3.7.1

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.
@@ -785,6 +785,12 @@
785
785
  .sd-select-view-multiple:not(.sd-select-view-focus) .sd-select-view-icon-hover:hover::before {
786
786
  background-color: var(--sd-color-fill-4);
787
787
  }
788
+ .sd-select-view-multiple {
789
+ position: relative;
790
+ min-width: 0;
791
+ max-width: 100%;
792
+ overflow: hidden;
793
+ }
788
794
  .sd-select-view-multiple.sd-select-view-has-tag {
789
795
  padding-right: 4px;
790
796
  padding-left: 4px;
@@ -884,6 +890,9 @@
884
890
  .sd-select-view-multiple .sd-select-view-resize-observer {
885
891
  position: absolute;
886
892
  inset: 0;
893
+ display: block;
894
+ width: 100%;
895
+ height: 100%;
887
896
  visibility: hidden;
888
897
  pointer-events: none;
889
898
  }
@@ -891,11 +900,18 @@
891
900
  position: absolute;
892
901
  top: 0;
893
902
  left: 0;
894
- display: inline-flex;
903
+ display: block;
904
+ width: 100%;
905
+ max-width: 100%;
906
+ overflow: hidden;
895
907
  white-space: nowrap;
896
908
  visibility: hidden;
897
909
  pointer-events: none;
898
910
  }
911
+ .sd-select-view-multiple .sd-select-view-measure .sd-select-view-tag {
912
+ display: inline-flex;
913
+ flex-shrink: 0;
914
+ }
899
915
  .sd-select-view-multiple .sd-select-view-tag-ellipsis {
900
916
  display: block;
901
917
  min-width: 0;
package/es/index.css CHANGED
@@ -2677,6 +2677,12 @@ body {
2677
2677
  .sd-select-view-multiple:not(.sd-select-view-focus) .sd-select-view-icon-hover:hover::before {
2678
2678
  background-color: var(--sd-color-fill-4);
2679
2679
  }
2680
+ .sd-select-view-multiple {
2681
+ position: relative;
2682
+ min-width: 0;
2683
+ max-width: 100%;
2684
+ overflow: hidden;
2685
+ }
2680
2686
  .sd-select-view-multiple.sd-select-view-has-tag {
2681
2687
  padding-right: 4px;
2682
2688
  padding-left: 4px;
@@ -2776,6 +2782,9 @@ body {
2776
2782
  .sd-select-view-multiple .sd-select-view-resize-observer {
2777
2783
  position: absolute;
2778
2784
  inset: 0;
2785
+ display: block;
2786
+ width: 100%;
2787
+ height: 100%;
2779
2788
  visibility: hidden;
2780
2789
  pointer-events: none;
2781
2790
  }
@@ -2783,11 +2792,18 @@ body {
2783
2792
  position: absolute;
2784
2793
  top: 0;
2785
2794
  left: 0;
2786
- display: inline-flex;
2795
+ display: block;
2796
+ width: 100%;
2797
+ max-width: 100%;
2798
+ overflow: hidden;
2787
2799
  white-space: nowrap;
2788
2800
  visibility: hidden;
2789
2801
  pointer-events: none;
2790
2802
  }
2803
+ .sd-select-view-multiple .sd-select-view-measure .sd-select-view-tag {
2804
+ display: inline-flex;
2805
+ flex-shrink: 0;
2806
+ }
2791
2807
  .sd-select-view-multiple .sd-select-view-tag-ellipsis {
2792
2808
  display: block;
2793
2809
  min-width: 0;
@@ -11588,6 +11604,12 @@ body.sd-tour-active .sd-tour-popover * {
11588
11604
  .sd-input-tag:not(.sd-input-tag-focus) .sd-input-tag-icon-hover:hover::before {
11589
11605
  background-color: var(--sd-color-fill-4);
11590
11606
  }
11607
+ .sd-input-tag {
11608
+ position: relative;
11609
+ min-width: 0;
11610
+ max-width: 100%;
11611
+ overflow: hidden;
11612
+ }
11591
11613
  .sd-input-tag.sd-input-tag-has-tag {
11592
11614
  padding-right: 4px;
11593
11615
  padding-left: 4px;
@@ -11687,6 +11709,9 @@ body.sd-tour-active .sd-tour-popover * {
11687
11709
  .sd-input-tag .sd-input-tag-resize-observer {
11688
11710
  position: absolute;
11689
11711
  inset: 0;
11712
+ display: block;
11713
+ width: 100%;
11714
+ height: 100%;
11690
11715
  visibility: hidden;
11691
11716
  pointer-events: none;
11692
11717
  }
@@ -11694,11 +11719,18 @@ body.sd-tour-active .sd-tour-popover * {
11694
11719
  position: absolute;
11695
11720
  top: 0;
11696
11721
  left: 0;
11697
- display: inline-flex;
11722
+ display: block;
11723
+ width: 100%;
11724
+ max-width: 100%;
11725
+ overflow: hidden;
11698
11726
  white-space: nowrap;
11699
11727
  visibility: hidden;
11700
11728
  pointer-events: none;
11701
11729
  }
11730
+ .sd-input-tag .sd-input-tag-measure .sd-input-tag-tag {
11731
+ display: inline-flex;
11732
+ flex-shrink: 0;
11733
+ }
11702
11734
  .sd-input-tag .sd-input-tag-tag-ellipsis {
11703
11735
  display: block;
11704
11736
  min-width: 0;
@@ -336,6 +336,10 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
336
336
  if (!measureRef.value || hiddenCount <= 0) return 0;
337
337
  return getOuterWidth(measureRef.value.querySelector(`[data-hidden-count="${hiddenCount}"]`));
338
338
  };
339
+ const isClosableTag = (item) => {
340
+ var _item$tagProps$closab, _item$tagProps;
341
+ return Boolean((_item$tagProps$closab = (_item$tagProps = item.tagProps) === null || _item$tagProps === void 0 ? void 0 : _item$tagProps.closable) !== null && _item$tagProps$closab !== void 0 ? _item$tagProps$closab : !mergedDisabled.value && !props.readonly && item.closable);
342
+ };
339
343
  const syncResponsiveTags = () => {
340
344
  var _inputRef$value$offse, _inputRef$value;
341
345
  if (!isResponsiveMaxTagCount.value) {
@@ -534,7 +538,8 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
534
538
  "key": `measure-tag-${item.value}`,
535
539
  "class": `${prefixCls}-tag`,
536
540
  "visible": true,
537
- "nowrap": true
541
+ "nowrap": true,
542
+ "closable": isClosableTag(item)
538
543
  }, item.tagProps), { default: () => {
539
544
  var _ref2, _slots$tag3, _slots$tag4, _props$formatTag2;
540
545
  return [(_ref2 = (_slots$tag3 = (_slots$tag4 = slots.tag) === null || _slots$tag4 === void 0 ? void 0 : _slots$tag4.call(slots, { data: item.raw })) !== null && _slots$tag3 !== void 0 ? _slots$tag3 : (_props$formatTag2 = props.formatTag) === null || _props$formatTag2 === void 0 ? void 0 : _props$formatTag2.call(props, item.raw)) !== null && _ref2 !== void 0 ? _ref2 : item.label];
@@ -561,7 +566,7 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
561
566
  [`${prefixCls}-tag-counter`]: isOverflowCounterTag(item.value),
562
567
  [`${prefixCls}-tag-overflow`]: isCompressedResponsiveTag(index, item.value)
563
568
  }],
564
- "closable": !mergedDisabled.value && !props.readonly && item.closable,
569
+ "closable": isClosableTag(item),
565
570
  "visible": true,
566
571
  "nowrap": props.tagNowrap || isResponsiveMaxTagCount.value,
567
572
  "style": getTagStyle(index)
@@ -582,6 +582,12 @@
582
582
  .sd-input-tag:not(.sd-input-tag-focus) .sd-input-tag-icon-hover:hover::before {
583
583
  background-color: var(--sd-color-fill-4);
584
584
  }
585
+ .sd-input-tag {
586
+ position: relative;
587
+ min-width: 0;
588
+ max-width: 100%;
589
+ overflow: hidden;
590
+ }
585
591
  .sd-input-tag.sd-input-tag-has-tag {
586
592
  padding-right: 4px;
587
593
  padding-left: 4px;
@@ -681,6 +687,9 @@
681
687
  .sd-input-tag .sd-input-tag-resize-observer {
682
688
  position: absolute;
683
689
  inset: 0;
690
+ display: block;
691
+ width: 100%;
692
+ height: 100%;
684
693
  visibility: hidden;
685
694
  pointer-events: none;
686
695
  }
@@ -688,11 +697,18 @@
688
697
  position: absolute;
689
698
  top: 0;
690
699
  left: 0;
691
- display: inline-flex;
700
+ display: block;
701
+ width: 100%;
702
+ max-width: 100%;
703
+ overflow: hidden;
692
704
  white-space: nowrap;
693
705
  visibility: hidden;
694
706
  pointer-events: none;
695
707
  }
708
+ .sd-input-tag .sd-input-tag-measure .sd-input-tag-tag {
709
+ display: inline-flex;
710
+ flex-shrink: 0;
711
+ }
696
712
  .sd-input-tag .sd-input-tag-tag-ellipsis {
697
713
  display: block;
698
714
  min-width: 0;
@@ -75,6 +75,11 @@
75
75
  @mixin input-tag-style($cls) {
76
76
  @include input-wrapper-style($cls);
77
77
 
78
+ position: relative;
79
+ min-width: 0;
80
+ max-width: 100%;
81
+ overflow: hidden;
82
+
78
83
  &.#{$cls}-has-tag {
79
84
  padding-right: $input-tag-padding-horizontal;
80
85
  padding-left: $input-tag-padding-horizontal;
@@ -169,6 +174,9 @@
169
174
  .#{$cls}-resize-observer {
170
175
  position: absolute;
171
176
  inset: 0;
177
+ display: block;
178
+ width: 100%;
179
+ height: 100%;
172
180
  visibility: hidden;
173
181
  pointer-events: none;
174
182
  }
@@ -177,10 +185,18 @@
177
185
  position: absolute;
178
186
  top: 0;
179
187
  left: 0;
180
- display: inline-flex;
188
+ display: block;
189
+ width: 100%;
190
+ max-width: 100%;
191
+ overflow: hidden;
181
192
  white-space: nowrap;
182
193
  visibility: hidden;
183
194
  pointer-events: none;
195
+
196
+ .#{$cls}-tag {
197
+ display: inline-flex;
198
+ flex-shrink: 0;
199
+ }
184
200
  }
185
201
 
186
202
  .#{$cls}-tag-ellipsis {
@@ -2,7 +2,7 @@
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "framework": "vue",
4
4
  "name": "@sdata/web-vue",
5
- "version": "3.6.0",
5
+ "version": "3.7.0",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "types-syntax": "typescript",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sdata/web-vue",
3
- "version": "3.7.0",
3
+ "version": "3.7.1",
4
4
  "description": "SD Design Vue: A Vue.js 3 UI Library",
5
5
  "keywords": [
6
6
  "sd",