@vscode-elements/elements 2.0.0 → 2.1.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.
@@ -1947,7 +1947,7 @@
1947
1947
  "type": {
1948
1948
  "text": "CSSResultGroup"
1949
1949
  },
1950
- "default": "[ defaultStyles, css` .collapsible { background-color: var(--vscode-sideBar-background, #181818); } .collapsible-header { align-items: center; background-color: var(--vscode-sideBarSectionHeader-background, #181818); cursor: pointer; display: flex; height: 22px; line-height: 22px; user-select: none; } .collapsible-header:focus { opacity: 1; outline-offset: -1px; outline-style: solid; outline-width: 1px; outline-color: var(--vscode-focusBorder, #0078d4); } .title { color: var(--vscode-sideBarTitle-foreground, #cccccc); display: block; font-family: var(--vscode-font-family, sans-serif); font-size: 11px; font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .title .description { font-weight: 400; margin-left: 10px; text-transform: none; opacity: 0.6; } .header-icon { color: var(--vscode-icon-foreground, #cccccc); display: block; flex-shrink: 0; margin: 0 3px; } .collapsible.open .header-icon { transform: rotate(90deg); } .header-slots { align-items: center; display: flex; height: 22px; margin-left: auto; margin-right: 4px; } .actions { display: none; } .collapsible.open .actions { display: block; } .header-slots slot { display: flex; max-height: 22px; overflow: hidden; } .header-slots slot::slotted(div) { align-items: center; display: flex; } .collapsible-body { display: none; overflow: hidden; } .collapsible.open .collapsible-body { display: block; } `, ]"
1950
+ "default": "[ defaultStyles, css` .collapsible { background-color: var(--vscode-sideBar-background, #181818); } .collapsible-header { align-items: center; background-color: var(--vscode-sideBarSectionHeader-background, #181818); cursor: pointer; display: flex; height: 22px; line-height: 22px; user-select: none; } .collapsible-header:focus { opacity: 1; outline-offset: -1px; outline-style: solid; outline-width: 1px; outline-color: var(--vscode-focusBorder, #0078d4); } .title { color: var(--vscode-sideBarTitle-foreground, #cccccc); display: block; font-family: var(--vscode-font-family, sans-serif); font-size: 11px; font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .title .description { font-weight: 400; margin-left: 10px; text-transform: none; opacity: 0.6; } .header-icon { color: var(--vscode-icon-foreground, #cccccc); display: block; flex-shrink: 0; margin: 0 3px; } .collapsible.open .header-icon { transform: rotate(90deg); } .header-slots { align-items: center; display: flex; height: 22px; margin-left: auto; margin-right: 4px; } .actions { display: none; } .collapsible.open .actions.always-visible, .collapsible.open:hover .actions { display: block; } .header-slots slot { display: flex; max-height: 22px; overflow: hidden; } .header-slots slot::slotted(div) { align-items: center; display: flex; } .collapsible-body { display: none; overflow: hidden; } .collapsible.open .collapsible-body { display: block; } `, ]"
1951
1951
  }
1952
1952
  ],
1953
1953
  "exports": [
@@ -2022,6 +2022,17 @@
2022
2022
  }
2023
2023
  ],
2024
2024
  "members": [
2025
+ {
2026
+ "kind": "field",
2027
+ "name": "alwaysShowHeaderActions",
2028
+ "type": {
2029
+ "text": "boolean"
2030
+ },
2031
+ "default": "false",
2032
+ "description": "When enabled, header actions are always visible; otherwise, they appear only when the cursor\nhovers over the component. Actions are shown only when the Collapsible component is open. This\nproperty is designed to use the `workbench.view.alwaysShowHeaderActions` setting.",
2033
+ "attribute": "always-show-header-actions",
2034
+ "reflects": true
2035
+ },
2025
2036
  {
2026
2037
  "kind": "field",
2027
2038
  "name": "title",
@@ -2110,6 +2121,15 @@
2110
2121
  }
2111
2122
  ],
2112
2123
  "attributes": [
2124
+ {
2125
+ "name": "always-show-header-actions",
2126
+ "type": {
2127
+ "text": "boolean"
2128
+ },
2129
+ "default": "false",
2130
+ "description": "When enabled, header actions are always visible; otherwise, they appear only when the cursor\nhovers over the component. Actions are shown only when the Collapsible component is open. This\nproperty is designed to use the `workbench.view.alwaysShowHeaderActions` setting.",
2131
+ "fieldName": "alwaysShowHeaderActions"
2132
+ },
2113
2133
  {
2114
2134
  "name": "title",
2115
2135
  "type": {
@@ -2976,6 +2996,112 @@
2976
2996
  }
2977
2997
  ]
2978
2998
  },
2999
+ {
3000
+ "kind": "javascript-module",
3001
+ "path": "src/vscode-form-group/vscode-form-group.styles.ts",
3002
+ "declarations": [
3003
+ {
3004
+ "kind": "variable",
3005
+ "name": "styles",
3006
+ "type": {
3007
+ "text": "CSSResultGroup"
3008
+ },
3009
+ "default": "[ defaultStyles, css` :host { --label-right-margin: 14px; --label-width: 150px; display: block; margin: 15px 0; } :host([variant='settings-group']) { margin: 0; padding: 12px 14px 18px; max-width: 727px; } .wrapper { display: flex; flex-wrap: wrap; } :host([variant='vertical']) .wrapper, :host([variant='settings-group']) .wrapper { display: block; } :host([variant='horizontal']) ::slotted(vscode-checkbox-group), :host([variant='horizontal']) ::slotted(vscode-radio-group) { width: calc(100% - calc(var(--label-width) + var(--label-right-margin))); } :host([variant='horizontal']) ::slotted(vscode-label) { margin-right: var(--label-right-margin); text-align: right; width: var(--label-width); } :host([variant='settings-group']) ::slotted(vscode-label) { height: 18px; line-height: 18px; margin-bottom: 4px; margin-right: 0; padding: 0; } ::slotted(vscode-form-helper) { margin-left: calc(var(--label-width) + var(--label-right-margin)); } :host([variant='vertical']) ::slotted(vscode-form-helper), :host([variant='settings-group']) ::slotted(vscode-form-helper) { display: block; margin-left: 0; } :host([variant='settings-group']) ::slotted(vscode-form-helper) { margin-bottom: 0; margin-top: 0; } :host([variant='vertical']) ::slotted(vscode-label), :host([variant='settings-group']) ::slotted(vscode-label) { display: block; margin-left: 0; text-align: left; } :host([variant='settings-group']) ::slotted(vscode-inputbox), :host([variant='settings-group']) ::slotted(vscode-textfield), :host([variant='settings-group']) ::slotted(vscode-textarea), :host([variant='settings-group']) ::slotted(vscode-single-select), :host([variant='settings-group']) ::slotted(vscode-multi-select) { margin-top: 9px; } ::slotted(vscode-button:first-child) { margin-left: calc(var(--label-width) + var(--label-right-margin)); } :host([variant='vertical']) ::slotted(vscode-button) { margin-left: 0; } ::slotted(vscode-button) { margin-right: 4px; } `, ]"
3010
+ }
3011
+ ],
3012
+ "exports": [
3013
+ {
3014
+ "kind": "js",
3015
+ "name": "default",
3016
+ "declaration": {
3017
+ "name": "styles",
3018
+ "module": "src/vscode-form-group/vscode-form-group.styles.ts"
3019
+ }
3020
+ }
3021
+ ]
3022
+ },
3023
+ {
3024
+ "kind": "javascript-module",
3025
+ "path": "src/vscode-form-group/vscode-form-group.ts",
3026
+ "declarations": [
3027
+ {
3028
+ "kind": "class",
3029
+ "description": "",
3030
+ "name": "VscodeFormGroup",
3031
+ "cssProperties": [
3032
+ {
3033
+ "description": "The width of the label in horizontal mode",
3034
+ "name": "--label-width",
3035
+ "default": "150px"
3036
+ },
3037
+ {
3038
+ "description": "The right margin of the label in horizontal mode",
3039
+ "name": "--label-right-margin",
3040
+ "default": "14px"
3041
+ }
3042
+ ],
3043
+ "members": [
3044
+ {
3045
+ "kind": "field",
3046
+ "name": "variant",
3047
+ "type": {
3048
+ "text": "FormGroupVariant"
3049
+ },
3050
+ "default": "'horizontal'",
3051
+ "attribute": "variant",
3052
+ "reflects": true
3053
+ },
3054
+ {
3055
+ "kind": "field",
3056
+ "name": "version",
3057
+ "type": {
3058
+ "text": "string"
3059
+ },
3060
+ "description": "VSCode Elements version",
3061
+ "readonly": true,
3062
+ "inheritedFrom": {
3063
+ "name": "VscElement",
3064
+ "module": "src/includes/VscElement.ts"
3065
+ }
3066
+ }
3067
+ ],
3068
+ "attributes": [
3069
+ {
3070
+ "name": "variant",
3071
+ "type": {
3072
+ "text": "FormGroupVariant"
3073
+ },
3074
+ "default": "'horizontal'",
3075
+ "fieldName": "variant"
3076
+ }
3077
+ ],
3078
+ "superclass": {
3079
+ "name": "VscElement",
3080
+ "module": "/src/includes/VscElement.js"
3081
+ },
3082
+ "tagName": "vscode-form-group",
3083
+ "customElement": true
3084
+ }
3085
+ ],
3086
+ "exports": [
3087
+ {
3088
+ "kind": "js",
3089
+ "name": "VscodeFormGroup",
3090
+ "declaration": {
3091
+ "name": "VscodeFormGroup",
3092
+ "module": "src/vscode-form-group/vscode-form-group.ts"
3093
+ }
3094
+ },
3095
+ {
3096
+ "kind": "custom-element-definition",
3097
+ "name": "vscode-form-group",
3098
+ "declaration": {
3099
+ "name": "VscodeFormGroup",
3100
+ "module": "src/vscode-form-group/vscode-form-group.ts"
3101
+ }
3102
+ }
3103
+ ]
3104
+ },
2979
3105
  {
2980
3106
  "kind": "javascript-module",
2981
3107
  "path": "src/vscode-form-helper/vscode-form-helper.styles.ts",
@@ -3490,112 +3616,6 @@
3490
3616
  }
3491
3617
  ]
3492
3618
  },
3493
- {
3494
- "kind": "javascript-module",
3495
- "path": "src/vscode-form-group/vscode-form-group.styles.ts",
3496
- "declarations": [
3497
- {
3498
- "kind": "variable",
3499
- "name": "styles",
3500
- "type": {
3501
- "text": "CSSResultGroup"
3502
- },
3503
- "default": "[ defaultStyles, css` :host { --label-right-margin: 14px; --label-width: 150px; display: block; margin: 15px 0; } :host([variant='settings-group']) { margin: 0; padding: 12px 14px 18px; max-width: 727px; } .wrapper { display: flex; flex-wrap: wrap; } :host([variant='vertical']) .wrapper, :host([variant='settings-group']) .wrapper { display: block; } :host([variant='horizontal']) ::slotted(vscode-checkbox-group), :host([variant='horizontal']) ::slotted(vscode-radio-group) { width: calc(100% - calc(var(--label-width) + var(--label-right-margin))); } :host([variant='horizontal']) ::slotted(vscode-label) { margin-right: var(--label-right-margin); text-align: right; width: var(--label-width); } :host([variant='settings-group']) ::slotted(vscode-label) { height: 18px; line-height: 18px; margin-bottom: 4px; margin-right: 0; padding: 0; } ::slotted(vscode-form-helper) { margin-left: calc(var(--label-width) + var(--label-right-margin)); } :host([variant='vertical']) ::slotted(vscode-form-helper), :host([variant='settings-group']) ::slotted(vscode-form-helper) { display: block; margin-left: 0; } :host([variant='settings-group']) ::slotted(vscode-form-helper) { margin-bottom: 0; margin-top: 0; } :host([variant='vertical']) ::slotted(vscode-label), :host([variant='settings-group']) ::slotted(vscode-label) { display: block; margin-left: 0; text-align: left; } :host([variant='settings-group']) ::slotted(vscode-inputbox), :host([variant='settings-group']) ::slotted(vscode-textfield), :host([variant='settings-group']) ::slotted(vscode-textarea), :host([variant='settings-group']) ::slotted(vscode-single-select), :host([variant='settings-group']) ::slotted(vscode-multi-select) { margin-top: 9px; } ::slotted(vscode-button:first-child) { margin-left: calc(var(--label-width) + var(--label-right-margin)); } :host([variant='vertical']) ::slotted(vscode-button) { margin-left: 0; } ::slotted(vscode-button) { margin-right: 4px; } `, ]"
3504
- }
3505
- ],
3506
- "exports": [
3507
- {
3508
- "kind": "js",
3509
- "name": "default",
3510
- "declaration": {
3511
- "name": "styles",
3512
- "module": "src/vscode-form-group/vscode-form-group.styles.ts"
3513
- }
3514
- }
3515
- ]
3516
- },
3517
- {
3518
- "kind": "javascript-module",
3519
- "path": "src/vscode-form-group/vscode-form-group.ts",
3520
- "declarations": [
3521
- {
3522
- "kind": "class",
3523
- "description": "",
3524
- "name": "VscodeFormGroup",
3525
- "cssProperties": [
3526
- {
3527
- "description": "The width of the label in horizontal mode",
3528
- "name": "--label-width",
3529
- "default": "150px"
3530
- },
3531
- {
3532
- "description": "The right margin of the label in horizontal mode",
3533
- "name": "--label-right-margin",
3534
- "default": "14px"
3535
- }
3536
- ],
3537
- "members": [
3538
- {
3539
- "kind": "field",
3540
- "name": "variant",
3541
- "type": {
3542
- "text": "FormGroupVariant"
3543
- },
3544
- "default": "'horizontal'",
3545
- "attribute": "variant",
3546
- "reflects": true
3547
- },
3548
- {
3549
- "kind": "field",
3550
- "name": "version",
3551
- "type": {
3552
- "text": "string"
3553
- },
3554
- "description": "VSCode Elements version",
3555
- "readonly": true,
3556
- "inheritedFrom": {
3557
- "name": "VscElement",
3558
- "module": "src/includes/VscElement.ts"
3559
- }
3560
- }
3561
- ],
3562
- "attributes": [
3563
- {
3564
- "name": "variant",
3565
- "type": {
3566
- "text": "FormGroupVariant"
3567
- },
3568
- "default": "'horizontal'",
3569
- "fieldName": "variant"
3570
- }
3571
- ],
3572
- "superclass": {
3573
- "name": "VscElement",
3574
- "module": "/src/includes/VscElement.js"
3575
- },
3576
- "tagName": "vscode-form-group",
3577
- "customElement": true
3578
- }
3579
- ],
3580
- "exports": [
3581
- {
3582
- "kind": "js",
3583
- "name": "VscodeFormGroup",
3584
- "declaration": {
3585
- "name": "VscodeFormGroup",
3586
- "module": "src/vscode-form-group/vscode-form-group.ts"
3587
- }
3588
- },
3589
- {
3590
- "kind": "custom-element-definition",
3591
- "name": "vscode-form-group",
3592
- "declaration": {
3593
- "name": "VscodeFormGroup",
3594
- "module": "src/vscode-form-group/vscode-form-group.ts"
3595
- }
3596
- }
3597
- ]
3598
- },
3599
3619
  {
3600
3620
  "kind": "javascript-module",
3601
3621
  "path": "src/vscode-multi-select/vscode-multi-select.styles.ts",
@@ -3621,13 +3641,8 @@
3621
3641
  "name": "VscodeMultiSelect",
3622
3642
  "cssProperties": [
3623
3643
  {
3624
- "description": "workaround for dropdown z-index issues",
3625
3644
  "name": "--dropdown-z-index",
3626
- "default": "2",
3627
- "inheritedFrom": {
3628
- "name": "VscodeSelectBase",
3629
- "module": "src/includes/vscode-select/vscode-select-base.ts"
3630
- }
3645
+ "default": "2"
3631
3646
  },
3632
3647
  {
3633
3648
  "name": "--vscode-badge-background",
@@ -4205,6 +4220,18 @@
4205
4220
  "module": "src/includes/vscode-select/vscode-select-base.ts"
4206
4221
  }
4207
4222
  },
4223
+ {
4224
+ "kind": "field",
4225
+ "name": "_dropdownEl",
4226
+ "type": {
4227
+ "text": "HTMLDivElement"
4228
+ },
4229
+ "privacy": "private",
4230
+ "inheritedFrom": {
4231
+ "name": "VscodeSelectBase",
4232
+ "module": "src/includes/vscode-select/vscode-select-base.ts"
4233
+ }
4234
+ },
4208
4235
  {
4209
4236
  "kind": "field",
4210
4237
  "name": "_opts",
@@ -4467,9 +4494,17 @@
4467
4494
  }
4468
4495
  },
4469
4496
  {
4470
- "kind": "field",
4471
- "name": "_onClickOutside",
4497
+ "kind": "method",
4498
+ "name": "_handleDropdownToggle",
4472
4499
  "privacy": "private",
4500
+ "parameters": [
4501
+ {
4502
+ "name": "event",
4503
+ "type": {
4504
+ "text": "ToggleEvent"
4505
+ }
4506
+ }
4507
+ ],
4473
4508
  "inheritedFrom": {
4474
4509
  "name": "VscodeSelectBase",
4475
4510
  "module": "src/includes/vscode-select/vscode-select-base.ts"
@@ -4734,6 +4769,15 @@
4734
4769
  "module": "src/includes/vscode-select/vscode-select-base.ts"
4735
4770
  }
4736
4771
  },
4772
+ {
4773
+ "kind": "field",
4774
+ "name": "_handleWindowScroll",
4775
+ "privacy": "private",
4776
+ "inheritedFrom": {
4777
+ "name": "VscodeSelectBase",
4778
+ "module": "src/includes/vscode-select/vscode-select-base.ts"
4779
+ }
4780
+ },
4737
4781
  {
4738
4782
  "kind": "method",
4739
4783
  "name": "_renderCheckbox",
@@ -6603,13 +6647,8 @@
6603
6647
  "name": "VscodeSingleSelect",
6604
6648
  "cssProperties": [
6605
6649
  {
6606
- "description": "workaround for dropdown z-index issues",
6607
6650
  "name": "--dropdown-z-index",
6608
- "default": "2",
6609
- "inheritedFrom": {
6610
- "name": "VscodeSelectBase",
6611
- "module": "src/includes/vscode-select/vscode-select-base.ts"
6612
- }
6651
+ "default": "2"
6613
6652
  },
6614
6653
  {
6615
6654
  "name": "--vscode-badge-background",
@@ -7093,6 +7132,18 @@
7093
7132
  "module": "src/includes/vscode-select/vscode-select-base.ts"
7094
7133
  }
7095
7134
  },
7135
+ {
7136
+ "kind": "field",
7137
+ "name": "_dropdownEl",
7138
+ "type": {
7139
+ "text": "HTMLDivElement"
7140
+ },
7141
+ "privacy": "private",
7142
+ "inheritedFrom": {
7143
+ "name": "VscodeSelectBase",
7144
+ "module": "src/includes/vscode-select/vscode-select-base.ts"
7145
+ }
7146
+ },
7096
7147
  {
7097
7148
  "kind": "field",
7098
7149
  "name": "_opts",
@@ -7383,9 +7434,17 @@
7383
7434
  }
7384
7435
  },
7385
7436
  {
7386
- "kind": "field",
7387
- "name": "_onClickOutside",
7437
+ "kind": "method",
7438
+ "name": "_handleDropdownToggle",
7388
7439
  "privacy": "private",
7440
+ "parameters": [
7441
+ {
7442
+ "name": "event",
7443
+ "type": {
7444
+ "text": "ToggleEvent"
7445
+ }
7446
+ }
7447
+ ],
7389
7448
  "inheritedFrom": {
7390
7449
  "name": "VscodeSelectBase",
7391
7450
  "module": "src/includes/vscode-select/vscode-select-base.ts"
@@ -7650,6 +7709,15 @@
7650
7709
  "module": "src/includes/vscode-select/vscode-select-base.ts"
7651
7710
  }
7652
7711
  },
7712
+ {
7713
+ "kind": "field",
7714
+ "name": "_handleWindowScroll",
7715
+ "privacy": "private",
7716
+ "inheritedFrom": {
7717
+ "name": "VscodeSelectBase",
7718
+ "module": "src/includes/vscode-select/vscode-select-base.ts"
7719
+ }
7720
+ },
7653
7721
  {
7654
7722
  "kind": "method",
7655
7723
  "name": "_renderCheckbox",
@@ -13754,12 +13822,6 @@
13754
13822
  "kind": "class",
13755
13823
  "description": "",
13756
13824
  "name": "VscodeSelectBase",
13757
- "cssProperties": [
13758
- {
13759
- "description": "workaround for dropdown z-index issues",
13760
- "name": "--dropdown-z-index"
13761
- }
13762
- ],
13763
13825
  "members": [
13764
13826
  {
13765
13827
  "kind": "field",
@@ -13869,6 +13931,14 @@
13869
13931
  },
13870
13932
  "privacy": "private"
13871
13933
  },
13934
+ {
13935
+ "kind": "field",
13936
+ "name": "_dropdownEl",
13937
+ "type": {
13938
+ "text": "HTMLDivElement"
13939
+ },
13940
+ "privacy": "private"
13941
+ },
13872
13942
  {
13873
13943
  "kind": "field",
13874
13944
  "name": "_opts",
@@ -14082,9 +14152,17 @@
14082
14152
  }
14083
14153
  },
14084
14154
  {
14085
- "kind": "field",
14086
- "name": "_onClickOutside",
14087
- "privacy": "private"
14155
+ "kind": "method",
14156
+ "name": "_handleDropdownToggle",
14157
+ "privacy": "private",
14158
+ "parameters": [
14159
+ {
14160
+ "name": "event",
14161
+ "type": {
14162
+ "text": "ToggleEvent"
14163
+ }
14164
+ }
14165
+ ]
14088
14166
  },
14089
14167
  {
14090
14168
  "kind": "field",
@@ -14310,6 +14388,11 @@
14310
14388
  }
14311
14389
  ]
14312
14390
  },
14391
+ {
14392
+ "kind": "field",
14393
+ "name": "_handleWindowScroll",
14394
+ "privacy": "private"
14395
+ },
14313
14396
  {
14314
14397
  "kind": "method",
14315
14398
  "name": "_renderCheckbox",