@lvce-editor/settings-view 1.9.0 → 1.11.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.
@@ -989,29 +989,36 @@ const create$1 = (id, uri, x, y, width, height) => {
989
989
  preferences: {},
990
990
  inputSource: 0,
991
991
  scrollOffset: 0,
992
- filteredItemsCount: 0
992
+ filteredItemsCount: 0,
993
+ history: [],
994
+ modifiedSettings: {}
993
995
  };
994
996
  set$1(id, state, state);
995
997
  };
996
998
 
997
- const isEqual$2 = (oldState, newState) => {
999
+ const isEqual$3 = (oldState, newState) => {
998
1000
  return oldState.focus === newState.focus;
999
1001
  };
1000
1002
 
1003
+ const isEqual$2 = (oldState, newState) => {
1004
+ return oldState.filteredItems === newState.filteredItems;
1005
+ };
1006
+
1001
1007
  const isEqual$1 = (oldState, newState) => {
1002
- return oldState === newState;
1008
+ return oldState.filteredItems === newState.filteredItems;
1003
1009
  };
1004
1010
 
1005
1011
  const RenderItems = 1;
1006
1012
  const RenderFocus = 2;
1007
1013
  const RenderValue = 3;
1014
+ const RenderSettingValues = 10;
1008
1015
 
1009
1016
  const isEqual = (oldState, newState) => {
1010
1017
  return newState.inputSource === User || oldState.searchValue === newState.searchValue;
1011
1018
  };
1012
1019
 
1013
- const modules = [isEqual$2, isEqual$1, isEqual];
1014
- const numbers = [RenderFocus, RenderItems, RenderValue];
1020
+ const modules = [isEqual$3, isEqual$2, isEqual, isEqual$1];
1021
+ const numbers = [RenderFocus, RenderItems, RenderValue, RenderSettingValues];
1015
1022
 
1016
1023
  const diff = (oldState, newState) => {
1017
1024
  const diffResult = [];
@@ -1073,7 +1080,7 @@ const handleClickTab = (state, name) => {
1073
1080
  };
1074
1081
  };
1075
1082
 
1076
- const handleInput = (state, value) => {
1083
+ const handleInput = (state, value, inputSource = User) => {
1077
1084
  const {
1078
1085
  items,
1079
1086
  tabs,
@@ -1084,7 +1091,29 @@ const handleInput = (state, value) => {
1084
1091
  ...state,
1085
1092
  searchValue: value,
1086
1093
  filteredItems,
1087
- inputSource: User
1094
+ inputSource
1095
+ };
1096
+ };
1097
+
1098
+ const handleSettingChecked = (state, name, value) => {
1099
+ // TODO update value
1100
+ return {
1101
+ ...state
1102
+ };
1103
+ };
1104
+
1105
+ const handleSettingInput = (state, name, value, inputSource = User) => {
1106
+ // TODO update value
1107
+ return {
1108
+ ...state,
1109
+ inputSource
1110
+ };
1111
+ };
1112
+
1113
+ const handleSettingSelect = (state, name, value) => {
1114
+ // TODO update value
1115
+ return {
1116
+ ...state
1088
1117
  };
1089
1118
  };
1090
1119
 
@@ -1141,8 +1170,9 @@ const FontSizeDescription = 'The font size of the editor';
1141
1170
  const FormatOnSave = 'Format on Save';
1142
1171
  const FormatOnSaveDescription = 'Format code when saving';
1143
1172
  const NumberValue = 'number value';
1173
+ const StringValue = 'string value';
1144
1174
  const SearchSettings = 'Search Settings';
1145
- const SettingsContent = 'Settings Content';
1175
+ const SettingsContent$1 = 'Settings Content';
1146
1176
  const SidebarPosition = 'Sidebar Position';
1147
1177
  const SidebarPositionDescription = 'The position of the sidebar';
1148
1178
  const Telemetry = 'Telemetry';
@@ -1156,6 +1186,7 @@ const WindowSizeDescription = 'The default window size';
1156
1186
  const WindowTitle = 'Window Title';
1157
1187
  const WindowTitleDescription = 'The title shown in the window';
1158
1188
  const NoSettingsMatching = 'No settings matching "{PH1}" found';
1189
+ const MatchingSettings = '{PH1} matching settings';
1159
1190
 
1160
1191
  // Text Editor Settings
1161
1192
  const WordWrap = 'Word Wrap';
@@ -1443,11 +1474,14 @@ const formatOnSaveDescription = () => {
1443
1474
  const numberValue = () => {
1444
1475
  return i18nString(NumberValue);
1445
1476
  };
1477
+ const stringValue = () => {
1478
+ return i18nString(StringValue);
1479
+ };
1446
1480
  const searchSettings = () => {
1447
1481
  return i18nString(SearchSettings);
1448
1482
  };
1449
1483
  const settingsContent = () => {
1450
- return i18nString(SettingsContent);
1484
+ return i18nString(SettingsContent$1);
1451
1485
  };
1452
1486
  const sidebarPosition = () => {
1453
1487
  return i18nString(SidebarPosition);
@@ -1490,6 +1524,11 @@ const noSettingsMatching = searchTerm => {
1490
1524
  PH1: searchTerm
1491
1525
  });
1492
1526
  };
1527
+ const matchingSettings = count => {
1528
+ return i18nString(MatchingSettings, {
1529
+ PH1: count.toString()
1530
+ });
1531
+ };
1493
1532
 
1494
1533
  // Text Editor Settings
1495
1534
  const wordWrap = () => {
@@ -2181,14 +2220,14 @@ const wrappingIndentDescription = () => {
2181
2220
 
2182
2221
  const getSettingItems = async () => {
2183
2222
  return [{
2184
- id: 'fontSize',
2223
+ id: 'Editor.fontSize',
2185
2224
  heading: fontSize(),
2186
2225
  description: fontSizeDescription(),
2187
2226
  type: Number$1,
2188
- value: '15px',
2227
+ value: 15,
2189
2228
  category: TextEditorTab
2190
2229
  }, {
2191
- id: 'fontFamily',
2230
+ id: 'Editor.fontFamily',
2192
2231
  heading: fontFamily(),
2193
2232
  description: fontFamilyDescription(),
2194
2233
  type: String,
@@ -2197,7 +2236,7 @@ const getSettingItems = async () => {
2197
2236
  },
2198
2237
  // Text Editor Settings
2199
2238
  {
2200
- id: 'wordWrap',
2239
+ id: 'Editor.wordWrap',
2201
2240
  heading: wordWrap(),
2202
2241
  description: wordWrapDescription(),
2203
2242
  type: Enum,
@@ -2211,7 +2250,7 @@ const getSettingItems = async () => {
2211
2250
  label: 'off' // i18n
2212
2251
  }]
2213
2252
  }, {
2214
- id: 'lineNumbers',
2253
+ id: 'Editor.lineNumbers',
2215
2254
  heading: lineNumbers(),
2216
2255
  description: lineNumbersDescription(),
2217
2256
  type: Enum,
@@ -2225,133 +2264,133 @@ const getSettingItems = async () => {
2225
2264
  label: 'off' // i18n
2226
2265
  }]
2227
2266
  }, {
2228
- id: 'minimap',
2267
+ id: 'Editor.minimap',
2229
2268
  heading: minimap(),
2230
2269
  description: minimapDescription(),
2231
2270
  type: Boolean$1,
2232
2271
  value: 'true',
2233
2272
  category: TextEditorTab
2234
2273
  }, {
2235
- id: 'scrollBeyondLastLine',
2274
+ id: 'Editor.scrollBeyondLastLine',
2236
2275
  heading: scrollBeyondLastLine(),
2237
2276
  description: scrollBeyondLastLineDescription(),
2238
2277
  type: Boolean$1,
2239
2278
  value: 'false',
2240
2279
  category: TextEditorTab
2241
2280
  }, {
2242
- id: 'smoothScrolling',
2281
+ id: 'Editor.smoothScrolling',
2243
2282
  heading: smoothScrolling(),
2244
2283
  description: smoothScrollingDescription(),
2245
2284
  type: Boolean$1,
2246
2285
  value: 'true',
2247
2286
  category: TextEditorTab
2248
2287
  }, {
2249
- id: 'cursorBlinking',
2288
+ id: 'Editor.cursorBlinking',
2250
2289
  heading: cursorBlinking(),
2251
2290
  description: cursorBlinkingDescription(),
2252
2291
  type: String,
2253
2292
  value: 'blink',
2254
2293
  category: TextEditorTab
2255
2294
  }, {
2256
- id: 'cursorStyle',
2295
+ id: 'Editor.cursorStyle',
2257
2296
  heading: cursorStyle(),
2258
2297
  description: cursorStyleDescription(),
2259
2298
  type: String,
2260
2299
  value: 'line',
2261
2300
  category: TextEditorTab
2262
2301
  }, {
2263
- id: 'cursorWidth',
2302
+ id: 'Editor.cursorWidth',
2264
2303
  heading: cursorWidth(),
2265
2304
  description: cursorWidthDescription(),
2266
2305
  type: Number$1,
2267
2306
  value: '0',
2268
2307
  category: TextEditorTab
2269
2308
  }, {
2270
- id: 'tabSize',
2309
+ id: 'Editor.tabSize',
2271
2310
  heading: tabSize(),
2272
2311
  description: tabSizeDescription(),
2273
2312
  type: Number$1,
2274
2313
  value: '4',
2275
2314
  category: TextEditorTab
2276
2315
  }, {
2277
- id: 'insertSpaces',
2316
+ id: 'Editor.insertSpaces',
2278
2317
  heading: insertSpaces(),
2279
2318
  description: insertSpacesDescription(),
2280
2319
  type: Boolean$1,
2281
2320
  value: 'true',
2282
2321
  category: TextEditorTab
2283
2322
  }, {
2284
- id: 'detectIndentation',
2323
+ id: 'Editor.detectIndentation',
2285
2324
  heading: detectIndentation(),
2286
2325
  description: detectIndentationDescription(),
2287
2326
  type: Boolean$1,
2288
2327
  value: 'true',
2289
2328
  category: TextEditorTab
2290
2329
  }, {
2291
- id: 'trimAutoWhitespace',
2330
+ id: 'Editor.trimAutoWhitespace',
2292
2331
  heading: trimAutoWhitespace(),
2293
2332
  description: trimAutoWhitespaceDescription(),
2294
2333
  type: Boolean$1,
2295
2334
  value: 'true',
2296
2335
  category: TextEditorTab
2297
2336
  }, {
2298
- id: 'largeFileOptimizations',
2337
+ id: 'Editor.largeFileOptimizations',
2299
2338
  heading: largeFileOptimizations(),
2300
2339
  description: largeFileOptimizationsDescription(),
2301
2340
  type: Boolean$1,
2302
2341
  value: 'true',
2303
2342
  category: TextEditorTab
2304
2343
  }, {
2305
- id: 'renderWhitespace',
2344
+ id: 'Editor.renderWhitespace',
2306
2345
  heading: renderWhitespace(),
2307
2346
  description: renderWhitespaceDescription(),
2308
2347
  type: String,
2309
2348
  value: 'selection',
2310
2349
  category: TextEditorTab
2311
2350
  }, {
2312
- id: 'renderControlCharacters',
2351
+ id: 'Editor.renderControlCharacters',
2313
2352
  heading: renderControlCharacters(),
2314
2353
  description: renderControlCharactersDescription(),
2315
2354
  type: Boolean$1,
2316
2355
  value: 'false',
2317
2356
  category: TextEditorTab
2318
2357
  }, {
2319
- id: 'renderLineHighlight',
2358
+ id: 'Editor.renderLineHighlight',
2320
2359
  heading: renderLineHighlight(),
2321
2360
  description: renderLineHighlightDescription(),
2322
2361
  type: String,
2323
2362
  value: 'line',
2324
2363
  category: TextEditorTab
2325
2364
  }, {
2326
- id: 'codeLens',
2365
+ id: 'Editor.codeLens',
2327
2366
  heading: codeLens(),
2328
2367
  description: codeLensDescription(),
2329
2368
  type: Boolean$1,
2330
2369
  value: 'true',
2331
2370
  category: TextEditorTab
2332
2371
  }, {
2333
- id: 'folding',
2372
+ id: 'Editor.folding',
2334
2373
  heading: folding(),
2335
2374
  description: foldingDescription(),
2336
2375
  type: Boolean$1,
2337
2376
  value: 'true',
2338
2377
  category: TextEditorTab
2339
2378
  }, {
2340
- id: 'showFoldingControls',
2379
+ id: 'Editor.showFoldingControls',
2341
2380
  heading: showFoldingControls(),
2342
2381
  description: showFoldingControlsDescription(),
2343
2382
  type: String,
2344
2383
  value: 'mouseover',
2345
2384
  category: TextEditorTab
2346
2385
  }, {
2347
- id: 'unfoldOnClickAfterEnd',
2386
+ id: 'Editor.unfoldOnClickAfterEnd',
2348
2387
  heading: unfoldOnClickAfterEnd(),
2349
2388
  description: unfoldOnClickAfterEndDescription(),
2350
2389
  type: Boolean$1,
2351
2390
  value: 'false',
2352
2391
  category: TextEditorTab
2353
2392
  }, {
2354
- id: 'links',
2393
+ id: 'Editor.links',
2355
2394
  heading: links(),
2356
2395
  description: linksDescription(),
2357
2396
  type: Boolean$1,
@@ -3184,6 +3223,13 @@ const restoreState = savedState => {
3184
3223
  };
3185
3224
  };
3186
3225
 
3226
+ const getModifiedSettings = preferences => {
3227
+ const modifiedSettings = Object.create(null);
3228
+ for (const key of Object.keys(preferences)) {
3229
+ modifiedSettings[key] = true;
3230
+ }
3231
+ return modifiedSettings;
3232
+ };
3187
3233
  const loadContent = async (state, savedState) => {
3188
3234
  const {
3189
3235
  searchValue,
@@ -3193,15 +3239,17 @@ const loadContent = async (state, savedState) => {
3193
3239
  const newTabs = getUpdatedTabs(tabs, tabId);
3194
3240
  const items = await getSettingItems();
3195
3241
  const preferences = await getPreferences();
3242
+ const modifiedSettings = getModifiedSettings(preferences);
3196
3243
  const filteredItems = getFilteredItems(items, newTabs, searchValue, preferences);
3197
3244
  return {
3198
3245
  ...state,
3199
- tabs: newTabs,
3200
- items,
3201
3246
  filteredItems,
3202
- preferences,
3203
3247
  inputSource: Script,
3204
- searchValue
3248
+ items,
3249
+ modifiedSettings,
3250
+ preferences,
3251
+ searchValue,
3252
+ tabs: newTabs
3205
3253
  };
3206
3254
  };
3207
3255
 
@@ -3218,7 +3266,7 @@ const ClassNames = {
3218
3266
  const mergeClassNames = (...classNames) => {
3219
3267
  return classNames.filter(Boolean).join(' ');
3220
3268
  };
3221
- const Button = 1;
3269
+ const Button$1 = 1;
3222
3270
  const Div = 4;
3223
3271
  const H1 = 5;
3224
3272
  const Input = 6;
@@ -3227,13 +3275,13 @@ const H3 = 23;
3227
3275
  const Aside = 28;
3228
3276
  const P = 50;
3229
3277
  const Ul = 60;
3230
- const Select = 63;
3278
+ const Select$1 = 63;
3231
3279
  const Option = 64;
3232
3280
  const Label = 66;
3233
3281
  const VirtualDomElements = {
3234
3282
  __proto__: null,
3235
3283
  Aside,
3236
- Button,
3284
+ Button: Button$1,
3237
3285
  Div,
3238
3286
  H1,
3239
3287
  H3,
@@ -3241,7 +3289,7 @@ const VirtualDomElements = {
3241
3289
  Label,
3242
3290
  Option,
3243
3291
  P,
3244
- Select,
3292
+ Select: Select$1,
3245
3293
  Ul};
3246
3294
  const text = data => {
3247
3295
  return {
@@ -3255,28 +3303,54 @@ const {
3255
3303
  Viewlet
3256
3304
  } = ClassNames;
3257
3305
  const Settings = 'Settings';
3306
+ const SettingsInputWrapper = 'SettingsInputWrapper';
3307
+ const InputBox = 'InputBox';
3308
+ const SettingsSearchInput = 'SettingsSearchInput';
3309
+ const Button = 'Button';
3310
+ const InputButton = 'InputButton';
3311
+ const SearchFieldButton = 'SearchFieldButton';
3312
+ const MaskIcon = 'MaskIcon';
3313
+ const MaskIconClearAll = 'MaskIconClearAll';
3314
+ const SettingsItem = 'SettingsItem';
3315
+ const SettingsItemCheckBox = 'SettingsItemCheckBox';
3316
+ const CheckBox = 'CheckBox';
3317
+ const Select = 'Select';
3318
+ const SettingsItems = 'SettingsItems';
3319
+ const SettingsNoResults = 'SettingsNoResults';
3320
+ const SettingsMain = 'SettingsMain';
3321
+ const SettingsContent = 'SettingsContent';
3322
+ const SettingsContentHeading = 'SettingsContentHeading';
3323
+ const SettingsHeader = 'SettingsHeader';
3324
+ const SettingsSideBar = 'SettingsSideBar';
3325
+ const SettingsTabs = 'SettingsTabs';
3326
+ const Tab = 'Tab';
3327
+ const TabSelected = 'TabSelected';
3328
+ const Badge = 'Badge';
3329
+
3330
+ const getSettingsInputBadgeDom = (filteredSettingsCount, hasSearchValue) => {
3331
+ if (!hasSearchValue) {
3332
+ return [];
3333
+ }
3334
+ const badgeText = matchingSettings(filteredSettingsCount);
3335
+ return [{
3336
+ type: VirtualDomElements.Div,
3337
+ className: Badge,
3338
+ childCount: 1
3339
+ }, text(badgeText)];
3340
+ };
3258
3341
 
3259
3342
  // TODo use numeric ids
3260
3343
  const HandleClickClear = 'handleClickClear';
3261
3344
  const HandleClickTab = 'handleClickTab';
3262
3345
  const HandleInput = 'handleInput';
3346
+ const HandleSettingInput = 'handleSettingInput';
3347
+ const HandleSettingChecked = 'handleSettingChecked';
3348
+ const HandleSettingSelect = 'handleSettingSelect';
3263
3349
 
3264
- const getSettingsInputDom = () => {
3265
- const placeholder = searchSettings();
3350
+ const getSettingsInputButtonsDom = () => {
3266
3351
  return [{
3267
- type: VirtualDomElements.Div,
3268
- className: 'SettingsInputWrapper',
3269
- childCount: 2
3270
- }, {
3271
- type: VirtualDomElements.Input,
3272
- className: 'InputBox SettingsSearchInput',
3273
- placeholder,
3274
- childCount: 0,
3275
- name: SettingsSearch,
3276
- onInput: HandleInput
3277
- }, {
3278
3352
  type: VirtualDomElements.Button,
3279
- className: 'Button InputButton SearchFieldButton',
3353
+ className: mergeClassNames(Button, InputButton, SearchFieldButton),
3280
3354
  childCount: 1,
3281
3355
  ariaLabel: clear(),
3282
3356
  name: Clear$1,
@@ -3284,17 +3358,38 @@ const getSettingsInputDom = () => {
3284
3358
  onClick: HandleClickClear
3285
3359
  }, {
3286
3360
  type: VirtualDomElements.Div,
3287
- className: 'MaskIcon MaskIconClearAll',
3361
+ className: mergeClassNames(MaskIcon, MaskIconClearAll),
3288
3362
  childCount: 0
3289
3363
  }];
3290
3364
  };
3291
3365
 
3292
- const getSettingsHeaderDom = () => {
3366
+ const getSettingsInputDom = () => {
3367
+ const placeholder = searchSettings();
3368
+ return [{
3369
+ type: VirtualDomElements.Input,
3370
+ className: mergeClassNames(InputBox, SettingsSearchInput),
3371
+ placeholder,
3372
+ childCount: 0,
3373
+ name: SettingsSearch,
3374
+ onInput: HandleInput
3375
+ }];
3376
+ };
3377
+
3378
+ const getChildCount = hasSearchValue => {
3379
+ return hasSearchValue ? 3 : 2;
3380
+ };
3381
+ const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
3382
+ const badgeDom = getSettingsInputBadgeDom(filteredSettingsCount, hasSearchValue);
3383
+ const childCount = getChildCount(hasSearchValue);
3293
3384
  return [{
3294
3385
  type: VirtualDomElements.Div,
3295
- className: 'SettingsHeader',
3386
+ className: SettingsHeader,
3296
3387
  childCount: 1
3297
- }, ...getSettingsInputDom()];
3388
+ }, {
3389
+ type: VirtualDomElements.Div,
3390
+ className: SettingsInputWrapper,
3391
+ childCount
3392
+ }, ...getSettingsInputDom(), ...getSettingsInputButtonsDom(), ...badgeDom];
3298
3393
  };
3299
3394
 
3300
3395
  const getInputId = id => {
@@ -3310,21 +3405,22 @@ const getItemCheckBoxVirtualDom = item => {
3310
3405
  const domId = getInputId(id);
3311
3406
  return [{
3312
3407
  type: VirtualDomElements.Div,
3313
- className: 'SettingsItem',
3408
+ className: SettingsItem,
3314
3409
  childCount: 3
3315
3410
  }, {
3316
3411
  type: VirtualDomElements.H3,
3317
3412
  childCount: 1
3318
3413
  }, text(heading), {
3319
3414
  type: VirtualDomElements.Div,
3320
- className: 'SettingsItemCheckBox',
3415
+ className: SettingsItemCheckBox,
3321
3416
  childCount: 2
3322
3417
  }, {
3323
3418
  type: VirtualDomElements.Input,
3324
- className: 'CheckBox',
3419
+ className: CheckBox,
3325
3420
  inputType: 'checkbox',
3326
3421
  childCount: 0,
3327
- id: domId
3422
+ id: domId,
3423
+ name: id
3328
3424
  }, {
3329
3425
  type: VirtualDomElements.Label,
3330
3426
  childCount: 1,
@@ -3335,24 +3431,31 @@ const getItemCheckBoxVirtualDom = item => {
3335
3431
  const getItemNumberVirtualDom = item => {
3336
3432
  const {
3337
3433
  heading,
3338
- description
3434
+ description,
3435
+ id
3339
3436
  } = item;
3437
+ const domId = getInputId(id);
3340
3438
  return [{
3341
3439
  type: VirtualDomElements.Div,
3342
- className: 'SettingsItem',
3440
+ className: SettingsItem,
3343
3441
  childCount: 3
3344
3442
  }, {
3345
3443
  type: VirtualDomElements.H3,
3346
3444
  childCount: 1
3347
3445
  }, text(heading), {
3348
- type: VirtualDomElements.P,
3349
- childCount: 1
3446
+ type: VirtualDomElements.Label,
3447
+ htmlFor: domId,
3448
+ childCount: 1,
3449
+ className: 'Label'
3350
3450
  }, text(description), {
3351
3451
  type: VirtualDomElements.Input,
3352
- className: 'InputBox',
3452
+ className: InputBox,
3353
3453
  inputType: 'number',
3354
3454
  placeholder: numberValue(),
3355
- childCount: 0
3455
+ childCount: 0,
3456
+ id: domId,
3457
+ name: id,
3458
+ onInput: HandleSettingInput
3356
3459
  }];
3357
3460
  };
3358
3461
 
@@ -3371,12 +3474,13 @@ const getOptionDom = option => {
3371
3474
  const getItemSelectVirtualDom = item => {
3372
3475
  const {
3373
3476
  heading,
3374
- description
3477
+ description,
3478
+ id
3375
3479
  } = item;
3376
3480
  const options = item.options || [];
3377
3481
  return [{
3378
3482
  type: VirtualDomElements.Div,
3379
- className: 'SettingsItem',
3483
+ className: SettingsItem,
3380
3484
  childCount: 3
3381
3485
  }, {
3382
3486
  type: VirtualDomElements.H3,
@@ -3386,19 +3490,21 @@ const getItemSelectVirtualDom = item => {
3386
3490
  childCount: 1
3387
3491
  }, text(description), {
3388
3492
  type: VirtualDomElements.Select,
3389
- className: 'Select',
3390
- childCount: options.length
3493
+ className: Select,
3494
+ childCount: options.length,
3495
+ name: id
3391
3496
  }, ...options.flatMap(getOptionDom)];
3392
3497
  };
3393
3498
 
3394
3499
  const getItemStringVirtualDom = item => {
3395
3500
  const {
3396
3501
  heading,
3397
- description
3502
+ description,
3503
+ id
3398
3504
  } = item;
3399
3505
  return [{
3400
3506
  type: VirtualDomElements.Div,
3401
- className: 'SettingsItem',
3507
+ className: SettingsItem,
3402
3508
  childCount: 3
3403
3509
  }, {
3404
3510
  type: VirtualDomElements.H3,
@@ -3408,13 +3514,23 @@ const getItemStringVirtualDom = item => {
3408
3514
  childCount: 1
3409
3515
  }, text(description), {
3410
3516
  type: VirtualDomElements.Input,
3411
- className: 'InputBox',
3517
+ className: InputBox,
3412
3518
  inputType: 'text',
3413
- placeholder: numberValue(),
3414
- childCount: 0
3519
+ placeholder: stringValue(),
3520
+ childCount: 0,
3521
+ name: id,
3522
+ onInput: HandleSettingInput
3415
3523
  }];
3416
3524
  };
3417
3525
 
3526
+ const getItemUnknownVirtualDom = () => {
3527
+ return [{
3528
+ type: VirtualDomElements.Div,
3529
+ className: SettingsItem,
3530
+ childCount: 1
3531
+ }, text('unknown setting type')];
3532
+ };
3533
+
3418
3534
  const getItemVirtualDom = item => {
3419
3535
  if (item.type === Number$1) {
3420
3536
  return getItemNumberVirtualDom(item);
@@ -3428,18 +3544,17 @@ const getItemVirtualDom = item => {
3428
3544
  if (item.type === Enum) {
3429
3545
  return getItemSelectVirtualDom(item);
3430
3546
  }
3431
- // TODO
3432
- return [text('unknown setting type')];
3547
+ return getItemUnknownVirtualDom();
3433
3548
  };
3434
3549
 
3435
3550
  const getSettingsNoResultsDom = searchValue => {
3436
3551
  return [{
3437
3552
  type: VirtualDomElements.Div,
3438
- className: 'SettingsItems',
3553
+ className: SettingsItems,
3439
3554
  childCount: 1
3440
3555
  }, {
3441
- type: VirtualDomElements.Div,
3442
- className: 'SettingsNoResults',
3556
+ type: VirtualDomElements.P,
3557
+ className: SettingsNoResults,
3443
3558
  childCount: 1
3444
3559
  }, text(noSettingsMatching(searchValue))];
3445
3560
  };
@@ -3450,7 +3565,7 @@ const getSettingsItemsDom = (items, searchValue) => {
3450
3565
  }
3451
3566
  return [{
3452
3567
  type: VirtualDomElements.Div,
3453
- className: 'SettingsItems',
3568
+ className: SettingsItems,
3454
3569
  childCount: items.length
3455
3570
  }, ...items.flatMap(getItemVirtualDom)];
3456
3571
  };
@@ -3460,17 +3575,17 @@ const getSettingsContentDom = (items, tabs, searchValue) => {
3460
3575
  const headerText = selectedTab ? selectedTab.label : settingsContent();
3461
3576
  return [{
3462
3577
  type: VirtualDomElements.Div,
3463
- className: 'SettingsContent',
3578
+ className: SettingsContent,
3464
3579
  childCount: 2
3465
3580
  }, {
3466
3581
  type: VirtualDomElements.H1,
3467
- className: 'SettingsContentHeading',
3582
+ className: SettingsContentHeading,
3468
3583
  childCount: 1
3469
3584
  }, text(headerText), ...getSettingsItemsDom(items, searchValue)];
3470
3585
  };
3471
3586
 
3472
3587
  const getTabClassName = tab => {
3473
- return tab.selected ? mergeClassNames('Tab', 'TabSelected') : 'Tab';
3588
+ return tab.selected ? mergeClassNames(Tab, TabSelected) : Tab;
3474
3589
  };
3475
3590
 
3476
3591
  const getTabVirtualDom = tab => {
@@ -3489,7 +3604,7 @@ const getTabVirtualDom = tab => {
3489
3604
  const getSettingsTabsDom = tabs => {
3490
3605
  return [{
3491
3606
  type: VirtualDomElements.Ul,
3492
- className: 'SettingsTabs',
3607
+ className: SettingsTabs,
3493
3608
  role: AriaRoles.TabList,
3494
3609
  childCount: tabs.length,
3495
3610
  onClick: HandleClickTab
@@ -3499,7 +3614,7 @@ const getSettingsTabsDom = tabs => {
3499
3614
  const getSettingsSideBarDom = tabs => {
3500
3615
  return [{
3501
3616
  type: VirtualDomElements.Aside,
3502
- className: 'SettingsSideBar',
3617
+ className: SettingsSideBar,
3503
3618
  childCount: 1
3504
3619
  }, ...getSettingsTabsDom(tabs)];
3505
3620
  };
@@ -3507,7 +3622,7 @@ const getSettingsSideBarDom = tabs => {
3507
3622
  const getSettingsMainDom = (tabs, items, searchValue) => {
3508
3623
  return [{
3509
3624
  type: VirtualDomElements.Div,
3510
- className: 'SettingsMain',
3625
+ className: SettingsMain,
3511
3626
  childCount: 2
3512
3627
  }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(items, tabs, searchValue)];
3513
3628
  };
@@ -3516,13 +3631,15 @@ const getSettingsDom = state => {
3516
3631
  const {
3517
3632
  tabs,
3518
3633
  filteredItems,
3519
- searchValue
3634
+ searchValue,
3635
+ filteredItemsCount
3520
3636
  } = state;
3637
+ const hasSearchValue = searchValue.trim().length > 0;
3521
3638
  return [{
3522
3639
  type: VirtualDomElements.Div,
3523
3640
  childCount: 2,
3524
3641
  className: mergeClassNames(Viewlet, Settings)
3525
- }, ...getSettingsHeaderDom(), ...getSettingsMainDom(tabs, filteredItems, searchValue)];
3642
+ }, ...getSettingsHeaderDom(filteredItemsCount, hasSearchValue), ...getSettingsMainDom(tabs, filteredItems, searchValue)];
3526
3643
  };
3527
3644
 
3528
3645
  const renderItems = (oldState, newState) => {
@@ -3530,6 +3647,20 @@ const renderItems = (oldState, newState) => {
3530
3647
  return ['Viewlet.setDom2', newState.id, dom];
3531
3648
  };
3532
3649
 
3650
+ const renderSettingValues = (oldState, newState) => {
3651
+ const {
3652
+ filteredItems,
3653
+ id
3654
+ } = newState;
3655
+ const enabledTypes = [Number$1, String];
3656
+ const numericSettings = filteredItems.filter(item => enabledTypes.includes(item.type));
3657
+ const inputValues = numericSettings.map(item => ({
3658
+ name: item.id,
3659
+ value: item.value
3660
+ }));
3661
+ return ['Viewlet.setInputValues', id, inputValues];
3662
+ };
3663
+
3533
3664
  const renderValue = (oldState, newState) => {
3534
3665
  const {
3535
3666
  id,
@@ -3544,6 +3675,8 @@ const getRenderer = diffType => {
3544
3675
  return renderItems;
3545
3676
  case RenderValue:
3546
3677
  return renderValue;
3678
+ case RenderSettingValues:
3679
+ return renderSettingValues;
3547
3680
  default:
3548
3681
  throw new Error('unknown renderer');
3549
3682
  }
@@ -3582,6 +3715,15 @@ const renderEventListeners = () => {
3582
3715
  }, {
3583
3716
  name: HandleClickClear,
3584
3717
  params: ['clear']
3718
+ }, {
3719
+ name: HandleSettingInput,
3720
+ params: ['handleSettingInput', 'event.target.name', 'event.target.value']
3721
+ }, {
3722
+ name: HandleSettingChecked,
3723
+ params: ['handleSettingInput', 'event.target.name', 'event.target.value']
3724
+ }, {
3725
+ name: HandleSettingSelect,
3726
+ params: ['handleSettingInput', 'event.target.name', 'event.target.value']
3585
3727
  }];
3586
3728
  };
3587
3729
 
@@ -3616,7 +3758,10 @@ const commandMap = {
3616
3758
  'Settings.terminate': terminate,
3617
3759
  'Settings.handleClickTab': wrapCommand(handleClickTab),
3618
3760
  'Settings.clear': wrapCommand(clear$1),
3619
- 'Settings.handleInput': wrapCommand(handleInput)
3761
+ 'Settings.handleInput': wrapCommand(handleInput),
3762
+ 'Settings.handleSettingInput': wrapCommand(handleSettingInput),
3763
+ 'Settings.handleSettingChecked': wrapCommand(handleSettingChecked),
3764
+ 'Settings.handleSettingSelect': wrapCommand(handleSettingSelect)
3620
3765
  };
3621
3766
 
3622
3767
  const rpcs = Object.create(null);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lvce-editor/settings-view",
3
- "version": "1.9.0",
3
+ "version": "1.11.0",
4
4
  "description": "Explorer Worker",
5
5
  "repository": {
6
6
  "type": "git",