@sdata/web-vue 3.12.0 → 3.13.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 (108) hide show
  1. package/dist/sd.css +147 -15
  2. package/dist/sd.min.css +43 -1
  3. package/es/_components/picker/input-range.vue.d.ts +6 -7
  4. package/es/_components/picker/input-range.vue_vue_type_script_setup_true_lang.js +63 -46
  5. package/es/_components/picker/input.vue.d.ts +5 -6
  6. package/es/_components/picker/input.vue_vue_type_script_setup_true_lang.js +52 -35
  7. package/es/_hooks/use-readonly-tip.d.ts +11 -0
  8. package/es/_hooks/use-readonly-tip.js +66 -0
  9. package/es/auto-complete/auto-complete.d.ts +9 -0
  10. package/es/auto-complete/auto-complete.js +11 -1
  11. package/es/auto-complete/index.d.ts +15 -0
  12. package/es/button/button.vue.d.ts +16 -7
  13. package/es/button/button.vue_vue_type_script_setup_true_lang.js +57 -31
  14. package/es/button/index.d.ts +11 -0
  15. package/es/button/interface.d.ts +2 -0
  16. package/es/card/card.d.ts +312 -0
  17. package/es/card/card.js +39 -7
  18. package/es/card/index.d.ts +616 -0
  19. package/es/card/style/index.css +23 -0
  20. package/es/card/style/index.scss +31 -0
  21. package/es/cascader/cascader.vue.d.ts +9 -8
  22. package/es/cascader/cascader.vue_vue_type_script_setup_true_lang.js +149 -128
  23. package/es/cascader/types.d.ts +1 -0
  24. package/es/color-picker/color-picker.d.ts +9 -0
  25. package/es/color-picker/color-picker.js +33 -11
  26. package/es/color-picker/index.d.ts +15 -0
  27. package/es/config-provider/context.d.ts +9 -9
  28. package/es/copy/copy.vue_vue_type_script_setup_true_lang.js +1 -1
  29. package/es/date-picker/index.d.ts +3 -6
  30. package/es/date-picker/picker.vue.d.ts +2 -3
  31. package/es/date-picker/picker.vue_vue_type_script_setup_true_lang.js +5 -5
  32. package/es/date-picker/range-picker.vue.d.ts +2 -3
  33. package/es/date-picker/range-picker.vue_vue_type_script_setup_true_lang.js +4 -4
  34. package/es/drawer/drawer.vue_vue_type_script_setup_true_lang.js +3 -3
  35. package/es/empty/empty.js +1 -1
  36. package/es/file-previewer/file-previewer.vue_vue_type_script_setup_true_lang.js +1 -1
  37. package/es/image/image.vue_vue_type_script_setup_true_lang.js +1 -1
  38. package/es/image/preview-action.d.ts +7 -127
  39. package/es/image/preview.vue_vue_type_script_setup_true_lang.js +2 -2
  40. package/es/index.css +147 -15
  41. package/es/index.js +3 -3
  42. package/es/input/index.d.ts +6 -6
  43. package/es/input/input.d.ts +3 -3
  44. package/es/input/input.js +18 -6
  45. package/es/input-number/index.d.ts +9 -9
  46. package/es/input-number/input-number.d.ts +5 -5
  47. package/es/input-number/input-number.js +8 -8
  48. package/es/input-tag/index.d.ts +6 -6
  49. package/es/input-tag/input-tag.d.ts +3 -3
  50. package/es/input-tag/input-tag.js +16 -7
  51. package/es/locale/interface.d.ts +1 -0
  52. package/es/locale/lang/en-us.js +1 -0
  53. package/es/locale/lang/zh-cn.js +1 -0
  54. package/es/locale/lang/zh-tw.js +1 -0
  55. package/es/mention/index.d.ts +15 -0
  56. package/es/mention/mention.d.ts +9 -0
  57. package/es/mention/mention.js +12 -1
  58. package/es/menu/base-menu.vue_vue_type_script_setup_true_lang.js +1 -1
  59. package/es/modal/modal.vue_vue_type_script_setup_true_lang.js +3 -3
  60. package/es/pagination/pagination.js +1 -1
  61. package/es/popconfirm/popconfirm.vue_vue_type_script_setup_true_lang.js +2 -2
  62. package/es/popover/popover.vue_vue_type_script_setup_true_lang.js +1 -1
  63. package/es/rate/index.d.ts +6 -6
  64. package/es/rate/rate.d.ts +3 -3
  65. package/es/rate/rate.js +17 -7
  66. package/es/scrollbar/style/index.css +57 -15
  67. package/es/scrollbar/style/index.scss +63 -15
  68. package/es/sd-vue.js +3 -3
  69. package/es/secret/secret.vue_vue_type_script_setup_true_lang.js +1 -1
  70. package/es/select/index.d.ts +15 -0
  71. package/es/select/select.d.ts +9 -0
  72. package/es/select/select.js +28 -5
  73. package/es/style/normalize.scss +68 -0
  74. package/es/table/table-th.js +2 -2
  75. package/es/tabs/context.d.ts +2 -0
  76. package/es/tabs/index.d.ts +32 -0
  77. package/es/tabs/style/index.css +29 -0
  78. package/es/tabs/style/index.scss +38 -0
  79. package/es/tabs/tab-pane.vue.d.ts +4 -2
  80. package/es/tabs/tab-pane.vue_vue_type_script_setup_true_lang.js +19 -3
  81. package/es/tabs/tabs.d.ts +19 -0
  82. package/es/tabs/tabs.js +23 -2
  83. package/es/textarea/index.d.ts +15 -0
  84. package/es/textarea/textarea.vue.d.ts +11 -2
  85. package/es/textarea/textarea.vue_vue_type_script_setup_true_lang.js +71 -46
  86. package/es/time-picker/index.d.ts +3 -6
  87. package/es/time-picker/panel.vue_vue_type_script_setup_true_lang.js +1 -1
  88. package/es/time-picker/time-picker.vue.d.ts +2 -3
  89. package/es/time-picker/time-picker.vue_vue_type_script_setup_true_lang.js +8 -5
  90. package/es/toolbar/toolbar.vue_vue_type_script_setup_true_lang.js +1 -1
  91. package/es/tooltip/index.d.ts +8 -127
  92. package/es/tooltip/interface.d.ts +17 -0
  93. package/es/tooltip/tooltip.vue.d.ts +5 -88
  94. package/es/tooltip/tooltip.vue_vue_type_script_setup_true_lang.js +8 -69
  95. package/es/tour/tour.vue_vue_type_script_setup_true_lang.js +1 -1
  96. package/es/tree/tree.vue_vue_type_script_setup_true_lang.js +1 -1
  97. package/es/tree-select/tree-select.vue.d.ts +16 -10
  98. package/es/tree-select/tree-select.vue_vue_type_script_setup_true_lang.js +156 -133
  99. package/es/typography/base.js +1 -1
  100. package/es/upload/upload-button.js +1 -1
  101. package/es/verification-code/index.d.ts +15 -6
  102. package/es/verification-code/verification-code.d.ts +9 -3
  103. package/es/verification-code/verification-code.js +4 -1
  104. package/json/vetur-attributes.json +48 -7
  105. package/json/vetur-tags.json +17 -5
  106. package/json/web-types.json +99 -10
  107. package/package.json +1 -1
  108. package/es/style/base.scss +0 -18
package/dist/sd.css CHANGED
@@ -687,6 +687,9 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
687
687
  /******** link *******/
688
688
  /******** radius *******/
689
689
  /********* icon hover *********/
690
+ /*! Tailwind CSS v4 preflight baseline scoped to SD Design layer */
691
+ /*! Tailwind CSS v4 preflight baseline scoped to SD Design layer */
692
+ /*! Tailwind CSS v4 preflight baseline scoped to SD Design layer */
690
693
  /* stylelint-disable-next-line layer-name-pattern */
691
694
  @layer sd-design {
692
695
  *,
@@ -871,6 +874,41 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
871
874
  [hidden]:where(:not([hidden=until-found])) {
872
875
  display: none !important;
873
876
  }
877
+ /* Native scrollbar baseline — mirrors the <Scrollbar> embed theme
878
+ (transparent track, neutral thumb; shares --sd-scrollbar-* with the <Scrollbar> component).
879
+ Opt-in: only applies within an element carrying the design-system
880
+ class (`.sd-design` by default; follows $prefix), e.g.
881
+ <html class="sd-design-system-scrollbar">. Standard scrollbar-* properties are
882
+ primary; ::-webkit-scrollbar*
883
+ is the fallback for browsers without standard support. Where the
884
+ standard properties apply they override the webkit rules, so the
885
+ rounded corners and hover/active states only render in webkit-only
886
+ browsers. */
887
+ @supports (scrollbar-color: auto) {
888
+ .sd-design-system-scrollbar, .sd-design-system-scrollbar * {
889
+ scrollbar-width: thin;
890
+ scrollbar-color: var(--sd-scrollbar-thumb-color, var(--sd-color-neutral-4)) transparent;
891
+ }
892
+ }
893
+ @supports selector(::-webkit-scrollbar) {
894
+ .sd-design-system-scrollbar::-webkit-scrollbar, .sd-design-system-scrollbar *::-webkit-scrollbar {
895
+ width: var(--sd-scrollbar-size, 6px);
896
+ height: var(--sd-scrollbar-size, 6px);
897
+ }
898
+ .sd-design-system-scrollbar::-webkit-scrollbar-track, .sd-design-system-scrollbar *::-webkit-scrollbar-track {
899
+ background: transparent;
900
+ }
901
+ .sd-design-system-scrollbar::-webkit-scrollbar-thumb, .sd-design-system-scrollbar *::-webkit-scrollbar-thumb {
902
+ background: var(--sd-scrollbar-thumb-color, var(--sd-color-neutral-4));
903
+ border-radius: var(--sd-scrollbar-thumb-radius, 6px);
904
+ }
905
+ .sd-design-system-scrollbar::-webkit-scrollbar-thumb:hover, .sd-design-system-scrollbar *::-webkit-scrollbar-thumb:hover {
906
+ background: var(--sd-scrollbar-thumb-color-hover, var(--sd-color-neutral-5));
907
+ }
908
+ .sd-design-system-scrollbar::-webkit-scrollbar-thumb:active, .sd-design-system-scrollbar *::-webkit-scrollbar-thumb:active {
909
+ background: var(--sd-scrollbar-thumb-color-active, var(--sd-color-neutral-6));
910
+ }
911
+ }
874
912
  }
875
913
  .sd-icon {
876
914
  display: inline-block;
@@ -5814,6 +5852,35 @@ body.sd-tour-active .sd-tour-popover * {
5814
5852
  height: 100%;
5815
5853
  }
5816
5854
 
5855
+ .sd-tabs-horizontal.sd-tabs-full-height {
5856
+ display: flex;
5857
+ flex-direction: column;
5858
+ height: 100%;
5859
+ }
5860
+ .sd-tabs-horizontal.sd-tabs-full-height > .sd-tabs-nav {
5861
+ flex-shrink: 0;
5862
+ }
5863
+ .sd-tabs-horizontal.sd-tabs-full-height .sd-tabs-content {
5864
+ flex: 1;
5865
+ min-height: 0;
5866
+ }
5867
+ .sd-tabs-horizontal.sd-tabs-full-height .sd-tabs-content-list {
5868
+ height: 100%;
5869
+ }
5870
+ .sd-tabs-horizontal.sd-tabs-full-height .sd-tabs-content-item-active {
5871
+ height: 100%;
5872
+ }
5873
+ .sd-tabs-horizontal.sd-tabs-full-height .sd-tabs-pane {
5874
+ height: 100%;
5875
+ overflow: auto;
5876
+ }
5877
+ .sd-tabs-horizontal.sd-tabs-full-height .sd-tabs-pane-scroll {
5878
+ overflow: hidden;
5879
+ }
5880
+ .sd-tabs-horizontal.sd-tabs-full-height .sd-tabs-pane-scrollbar {
5881
+ height: 100%;
5882
+ }
5883
+
5817
5884
  .sd-tabs-nav-size-mini.sd-tabs-nav-type-line .sd-tabs-nav-extra {
5818
5885
  font-size: 12px;
5819
5886
  line-height: 32px;
@@ -8509,24 +8576,45 @@ body.sd-tour-active .sd-tour-popover * {
8509
8576
  height: 100%;
8510
8577
  }
8511
8578
  .sd-scrollbar .os-scrollbar {
8512
- --os-size: 6px;
8513
- --os-handle-bg: var(--sd-color-neutral-4);
8514
- --os-handle-bg-hover: var(--sd-color-neutral-5);
8515
- --os-handle-bg-active: var(--sd-color-neutral-6);
8579
+ --os-size: var(--sd-scrollbar-size, 6px);
8580
+ --os-handle-bg: var(
8581
+ --sd-scrollbar-thumb-color,
8582
+ var(--sd-color-neutral-4)
8583
+ );
8584
+ --os-handle-bg-hover: var(
8585
+ --sd-scrollbar-thumb-color-hover,
8586
+ var(--sd-color-neutral-5)
8587
+ );
8588
+ --os-handle-bg-active: var(
8589
+ --sd-scrollbar-thumb-color-active,
8590
+ var(--sd-color-neutral-6)
8591
+ );
8516
8592
  --os-track-bg: transparent;
8517
8593
  --os-track-bg-hover: transparent;
8518
8594
  --os-track-bg-active: transparent;
8519
8595
  --os-padding-axis: 0;
8520
8596
  --os-padding-perpendicular: 0;
8521
- --os-handle-border-radius: 6px;
8597
+ --os-handle-border-radius: var(
8598
+ --sd-scrollbar-thumb-radius,
8599
+ 6px
8600
+ );
8522
8601
  }
8523
8602
  .sd-scrollbar .os-scrollbar-handle {
8524
8603
  transition: background-color 0.16s ease, opacity 0.16s ease;
8525
8604
  }
8526
8605
  .sd-scrollbar .sd-scrollbar-theme-embed {
8527
- --os-handle-perpendicular-size: 6px;
8528
- --os-handle-perpendicular-size-hover: 6px;
8529
- --os-handle-perpendicular-size-active: 6px;
8606
+ --os-handle-perpendicular-size: var(
8607
+ --sd-scrollbar-size,
8608
+ 6px
8609
+ );
8610
+ --os-handle-perpendicular-size-hover: var(
8611
+ --sd-scrollbar-size,
8612
+ 6px
8613
+ );
8614
+ --os-handle-perpendicular-size-active: var(
8615
+ --sd-scrollbar-size,
8616
+ 6px
8617
+ );
8530
8618
  --os-handle-interactive-area-offset: 0;
8531
8619
  }
8532
8620
  .sd-scrollbar .sd-scrollbar-theme-track {
@@ -8535,18 +8623,39 @@ body.sd-tour-active .sd-tour-popover * {
8535
8623
  --os-track-bg-hover: var(--sd-color-neutral-1);
8536
8624
  --os-track-bg-active: var(--sd-color-neutral-1);
8537
8625
  --os-track-border: 1px solid var(--sd-color-neutral-3);
8538
- --os-handle-perpendicular-size: 6px;
8626
+ --os-handle-perpendicular-size: var(
8627
+ --sd-scrollbar-size,
8628
+ 6px
8629
+ );
8539
8630
  --os-padding-axis: -1px;
8540
8631
  }
8541
8632
  .sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-theme-embed {
8542
- --os-handle-bg: var(--sd-color-neutral-4);
8543
- --os-handle-bg-hover: var(--sd-color-neutral-5);
8544
- --os-handle-bg-active: var(--sd-color-neutral-6);
8633
+ --os-handle-bg: var(
8634
+ --sd-scrollbar-thumb-color,
8635
+ var(--sd-color-neutral-4)
8636
+ );
8637
+ --os-handle-bg-hover: var(
8638
+ --sd-scrollbar-thumb-color-hover,
8639
+ var(--sd-color-neutral-5)
8640
+ );
8641
+ --os-handle-bg-active: var(
8642
+ --sd-scrollbar-thumb-color-active,
8643
+ var(--sd-color-neutral-6)
8644
+ );
8545
8645
  }
8546
8646
  .sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-theme-track {
8547
- --os-handle-bg: var(--sd-color-neutral-4);
8548
- --os-handle-bg-hover: var(--sd-color-neutral-5);
8549
- --os-handle-bg-active: var(--sd-color-neutral-6);
8647
+ --os-handle-bg: var(
8648
+ --sd-scrollbar-thumb-color,
8649
+ var(--sd-color-neutral-4)
8650
+ );
8651
+ --os-handle-bg-hover: var(
8652
+ --sd-scrollbar-thumb-color-hover,
8653
+ var(--sd-color-neutral-5)
8654
+ );
8655
+ --os-handle-bg-active: var(
8656
+ --sd-scrollbar-thumb-color-active,
8657
+ var(--sd-color-neutral-6)
8658
+ );
8550
8659
  }
8551
8660
 
8552
8661
  .sd-result {
@@ -17796,6 +17905,29 @@ body.sd-tour-active .sd-tour-popover * {
17796
17905
  padding: 12px 16px;
17797
17906
  }
17798
17907
 
17908
+ .sd-card-full-height {
17909
+ display: flex;
17910
+ flex-direction: column;
17911
+ height: 100%;
17912
+ overflow: hidden;
17913
+ }
17914
+ .sd-card-full-height .sd-card-header {
17915
+ flex-shrink: 0;
17916
+ }
17917
+ .sd-card-full-height .sd-card-body {
17918
+ flex: 1;
17919
+ min-height: 0;
17920
+ }
17921
+ .sd-card-full-height .sd-card-body-native {
17922
+ overflow: auto;
17923
+ }
17924
+ .sd-card-full-height .sd-card-body-scroll {
17925
+ overflow: hidden;
17926
+ }
17927
+ .sd-card-full-height .sd-card-body-scroll .sd-card-body-scrollbar {
17928
+ height: 100%;
17929
+ }
17930
+
17799
17931
  :where(body, [sd-theme])[sd-theme=dark] .sd-card-grid-hoverable:hover::before,
17800
17932
  :where(body, [sd-theme])[sd-theme=dark] .sd-card-hoverable:hover {
17801
17933
  box-shadow: 0 4px 10px rgb(var(--sd-gray-1), 40%);