@lvce-editor/settings-view 1.4.0 → 1.5.0

package/dist/settingsViewWorkerMain.js

@@ -926,7 +926,8 @@ const {
   set: set$1,
   wrapCommand,
   getCommandIds,
-  registerCommands
+  registerCommands,
+  wrapGetter
 } = create$2();
 
 const create$1 = (id, uri, x, y, width, height) => {
@@ -942,7 +943,8 @@ const create$1 = (id, uri, x, y, width, height) => {
     height,
     tabs: [],
     items: [],
-    searchValue: ''
+    searchValue: '',
+    filteredItems: []
   };
   set$1(id, state, state);
 };
@@ -981,6 +983,14 @@ const diff2 = uid => {
   return diffResult;
 };
 
+const getFilteredItems = (items, tabs) => {
+  const selectedTab = tabs.find(tab => tab.selected);
+  if (!selectedTab) {
+    return items;
+  }
+  return items.filter(item => item.category === selectedTab.id);
+};
+
 const getSelectedTabId = tabs => {
   for (const tab of tabs) {
     if (tab.selected) {
@@ -989,6 +999,7 @@ const getSelectedTabId = tabs => {
   }
   return '';
 };
+
 const getUpdatedTabs = (tabs, selectedTabId) => {
   // Check if the clicked tab is already selected
   const clickedTabId = getSelectedTabId(tabs);
@@ -1005,9 +1016,12 @@ const handleClickTab = (state, name) => {
   if (!name) {
     return state;
   }
+  const updatedTabs = getUpdatedTabs(state.tabs, name);
+  const filteredItems = getFilteredItems(state.items, updatedTabs);
   return {
     ...state,
-    tabs: getUpdatedTabs(state.tabs, name)
+    tabs: updatedTabs,
+    filteredItems
   };
 };
 
@@ -1022,7 +1036,18 @@ const initialize = async () => {
   // TODO
 };
 
+const ApplicationsTab = 'applications';
+const Clear = 'Clear';
+const ExtensionsTab = 'extensions';
+const FeaturesTab = 'features';
+const SecurityTab = 'security';
+const SettingsSearch = 'SettingsSearch';
+const TextEditorTab = 'text-editor';
+const WindowTab = 'window';
+const WorkbenchTab = 'workbench';
+
 const String = 2;
+const Boolean$1 = 3;
 const Number$1 = 5;
 
 const getSettingItems = async () => {
@@ -1031,43 +1056,129 @@ const getSettingItems = async () => {
     heading: 'Font Size',
     description: 'The font size of the editor',
     type: Number$1,
-    value: '15px'
+    value: '15px',
+    category: TextEditorTab
   }, {
     id: 'fontFamily',
     heading: 'Font Family',
     description: 'The font family of the editor',
     type: String,
-    value: 'Fira Code'
+    value: 'Fira Code',
+    category: TextEditorTab
+  }, {
+    id: 'theme',
+    heading: 'Theme',
+    description: 'The color theme of the workbench',
+    type: String,
+    value: 'Dark',
+    category: WorkbenchTab
+  }, {
+    id: 'sidebarPosition',
+    heading: 'Sidebar Position',
+    description: 'The position of the sidebar',
+    type: String,
+    value: 'Left',
+    category: WorkbenchTab
+  }, {
+    id: 'windowTitle',
+    heading: 'Window Title',
+    description: 'The title shown in the window',
+    type: String,
+    value: 'Settings View',
+    category: WindowTab
+  }, {
+    id: 'windowSize',
+    heading: 'Window Size',
+    description: 'The default window size',
+    type: String,
+    value: '1024x768',
+    category: WindowTab
+  }, {
+    id: 'autoSave',
+    heading: 'Auto Save',
+    description: 'Automatically save files',
+    type: Boolean$1,
+    value: 'true',
+    category: FeaturesTab
+  }, {
+    id: 'formatOnSave',
+    heading: 'Format on Save',
+    description: 'Format code when saving',
+    type: Boolean$1,
+    value: 'false',
+    category: FeaturesTab
+  }, {
+    id: 'telemetry',
+    heading: 'Telemetry',
+    description: 'Enable telemetry collection',
+    type: Boolean$1,
+    value: 'true',
+    category: ApplicationsTab
+  }, {
+    id: 'updates',
+    heading: 'Auto Updates',
+    description: 'Automatically check for updates',
+    type: Boolean$1,
+    value: 'true',
+    category: ApplicationsTab
+  }, {
+    id: 'encryption',
+    heading: 'File Encryption',
+    description: 'Encrypt sensitive files',
+    type: Boolean$1,
+    value: 'false',
+    category: SecurityTab
+  }, {
+    id: 'twoFactor',
+    heading: 'Two Factor Auth',
+    description: 'Enable two factor authentication',
+    type: Boolean$1,
+    value: 'false',
+    category: SecurityTab
+  }, {
+    id: 'extensionsAutoUpdate',
+    heading: 'Auto Update Extensions',
+    description: 'Automatically update extensions',
+    type: Boolean$1,
+    value: 'true',
+    category: ExtensionsTab
+  }, {
+    id: 'extensionRecommendations',
+    heading: 'Extension Recommendations',
+    description: 'Show extension recommendations',
+    type: Boolean$1,
+    value: 'true',
+    category: ExtensionsTab
   }];
 };
 
 const getTabs = () => {
   const tabs = [{
-    id: 'text-editor',
+    id: TextEditorTab,
     label: 'Text Editor',
     selected: true
   }, {
-    id: 'workbench',
+    id: WorkbenchTab,
     label: 'Workbench',
     selected: false
   }, {
-    id: 'window',
+    id: WindowTab,
     label: 'Window',
     selected: false
   }, {
-    id: 'features',
+    id: FeaturesTab,
     label: 'Features',
     selected: false
   }, {
-    id: 'applications',
+    id: ApplicationsTab,
     label: 'Applications',
     selected: false
   }, {
-    id: 'security',
+    id: SecurityTab,
     label: 'Security',
     selected: false
   }, {
-    id: 'extensions',
+    id: ExtensionsTab,
     label: 'Extensions',
     selected: false
   }];
@@ -1077,10 +1188,12 @@ const getTabs = () => {
 const loadContent = async (state, savedState) => {
   const tabs = getTabs();
   const items = await getSettingItems();
+  const filteredItems = getFilteredItems(items, tabs);
   return {
     ...state,
     tabs,
-    items
+    items,
+    filteredItems
   };
 };
 
@@ -1105,7 +1218,6 @@ const Text = 12;
 const H2 = 22;
 const H3 = 23;
 const Aside = 28;
-const Li = 48;
 const P = 50;
 const Ul = 60;
 const VirtualDomElements = {
@@ -1117,7 +1229,6 @@ const VirtualDomElements = {
   H2,
   H3,
   Input,
-  Li,
   P,
   Ul};
 const text = data => {
@@ -1132,9 +1243,6 @@ const {
   Viewlet} = ClassNames;
 const Settings = 'Settings';
 
-const SettingsSearch = 'SettingsSearch';
-const Clear = 'Clear';
-
 const getSettingsInputDom = () => {
   const placeholder = 'Search Settings';
   return [{
@@ -1198,7 +1306,9 @@ const getSettingsItemsDom = items => {
   }, ...items.flatMap(getItemNumberVirtualDom)];
 };
 
-const getSettingsContentDom = items => {
+const getSettingsContentDom = (items, tabs) => {
+  const selectedTab = tabs.find(tab => tab.selected);
+  const headerText = selectedTab ? selectedTab.label : 'Settings Content';
   return [{
     type: VirtualDomElements.Div,
     className: 'SettingsContent',
@@ -1206,22 +1316,28 @@ const getSettingsContentDom = items => {
   }, {
     type: VirtualDomElements.H1,
     childCount: 1
-  }, text('Settings Content'), ...getSettingsItemsDom(items)];
+  }, text(headerText), ...getSettingsItemsDom(items)];
 };
 
+// TODo use numeric ids
+const HandleClickClear = 'handleClickClear';
 const HandleClickTab = 'handleClickTab';
 const HandleInput = 'handleInput';
 
-// TODo use numeric ids
+const getTabClassName = tab => {
+  return tab.selected ? mergeClassNames('Tab', 'TabSelected') : 'Tab';
+};
 
 const getTabVirtualDom = tab => {
-  const className = tab.selected ? mergeClassNames('Tab', 'TabSelected') : 'Tab';
+  const className = getTabClassName(tab);
   return [{
-    type: VirtualDomElements.Li,
+    type: VirtualDomElements.Button,
     className,
     childCount: 1,
     role: AriaRoles.Tab,
-    name: tab.id
+    name: tab.id,
+    id: tab.id,
+    ariaSelected: tab.selected
   }, text(tab.label)];
 };
 
@@ -1253,19 +1369,19 @@ const getSettingsMainDom = (tabs, items) => {
     type: VirtualDomElements.Div,
     className: 'SettingsMain',
     childCount: 2
-  }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(items)];
+  }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(items, tabs)];
 };
 
 const getSettingsDom = state => {
   const {
     tabs,
-    items
+    filteredItems
   } = state;
   return [{
     type: VirtualDomElements.Div,
     childCount: 2,
     className: mergeClassNames(Viewlet, Settings)
-  }, ...getSettingsHeaderDom(), ...getSettingsMainDom(tabs, items)];
+  }, ...getSettingsHeaderDom(), ...getSettingsMainDom(tabs, filteredItems)];
 };
 
 const renderItems = (oldState, newState) => {
@@ -1312,6 +1428,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleInput,
     params: ['handleInput', 'event.target.value']
+  }, {
+    name: HandleClickClear,
+    params: ['clear']
   }];
 };
 
@@ -1351,13 +1470,20 @@ const restoreState = savedState => {
   };
 };
 
-const saveState = uid => {
+const saveState = state => {
+  const {
+    tabs,
+    searchValue
+  } = state;
+  const selectedTab = getSelectedTabId(tabs);
   return {
     expandedPaths: [],
     root: '',
     minLineY: 0,
     maxLineY: 0,
-    deltaY: 0
+    deltaY: 0,
+    searchValue,
+    selectedTab
   };
 };
 
@@ -1371,7 +1497,7 @@ const commandMap = {
   'Settings.renderActions': renderActions,
   'Settings.renderEventListeners': renderEventListeners,
   'Settings.restoreState': restoreState,
-  'Settings.saveState': saveState,
+  'Settings.saveState': wrapGetter(saveState),
   'Settings.terminate': terminate,
   'Settings.handleClickTab': wrapCommand(handleClickTab),
   'Settings.clear': wrapCommand(clear),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/settings-view",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",