@lvce-editor/settings-view 1.3.0 → 1.4.0

package/dist/settingsViewWorkerMain.js

@@ -914,6 +914,13 @@ const terminate = () => {
   globalThis.close();
 };
 
+const clear = state => {
+  return {
+    ...state,
+    searchValue: ''
+  };
+};
+
 const {
   get: get$1,
   set: set$1,
@@ -933,7 +940,9 @@ const create$1 = (id, uri, x, y, width, height) => {
     y,
     width,
     height,
-    tabs: []
+    tabs: [],
+    items: [],
+    searchValue: ''
   };
   set$1(id, state, state);
 };
@@ -972,20 +981,106 @@ const diff2 = uid => {
   return diffResult;
 };
 
+const getSelectedTabId = tabs => {
+  for (const tab of tabs) {
+    if (tab.selected) {
+      return tab.id;
+    }
+  }
+  return '';
+};
+const getUpdatedTabs = (tabs, selectedTabId) => {
+  // Check if the clicked tab is already selected
+  const clickedTabId = getSelectedTabId(tabs);
+  if (clickedTabId === selectedTabId) {
+    return tabs;
+  }
+  return tabs.map(tab => ({
+    ...tab,
+    selected: tab.id === selectedTabId
+  }));
+};
+
+const handleClickTab = (state, name) => {
+  if (!name) {
+    return state;
+  }
+  return {
+    ...state,
+    tabs: getUpdatedTabs(state.tabs, name)
+  };
+};
+
+const handleInput = (state, value) => {
+  return {
+    ...state,
+    searchValue: value
+  };
+};
+
 const initialize = async () => {
   // TODO
 };
 
+const String = 2;
+const Number$1 = 5;
+
+const getSettingItems = async () => {
+  return [{
+    id: 'fontSize',
+    heading: 'Font Size',
+    description: 'The font size of the editor',
+    type: Number$1,
+    value: '15px'
+  }, {
+    id: 'fontFamily',
+    heading: 'Font Family',
+    description: 'The font family of the editor',
+    type: String,
+    value: 'Fira Code'
+  }];
+};
+
 const getTabs = () => {
-  const tabs = ['Text Editor', 'Workbench', 'Window', 'Features', 'Applications', 'Security', 'Extensions'];
+  const tabs = [{
+    id: 'text-editor',
+    label: 'Text Editor',
+    selected: true
+  }, {
+    id: 'workbench',
+    label: 'Workbench',
+    selected: false
+  }, {
+    id: 'window',
+    label: 'Window',
+    selected: false
+  }, {
+    id: 'features',
+    label: 'Features',
+    selected: false
+  }, {
+    id: 'applications',
+    label: 'Applications',
+    selected: false
+  }, {
+    id: 'security',
+    label: 'Security',
+    selected: false
+  }, {
+    id: 'extensions',
+    label: 'Extensions',
+    selected: false
+  }];
   return tabs;
 };
 
 const loadContent = async (state, savedState) => {
   const tabs = getTabs();
+  const items = await getSettingItems();
   return {
     ...state,
-    tabs
+    tabs,
+    items
   };
 };
 
@@ -1002,18 +1097,28 @@ const ClassNames = {
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
+const Button = 1;
 const Div = 4;
+const H1 = 5;
 const Input = 6;
 const Text = 12;
 const H2 = 22;
+const H3 = 23;
 const Aside = 28;
+const Li = 48;
+const P = 50;
 const Ul = 60;
 const VirtualDomElements = {
   __proto__: null,
   Aside,
+  Button,
   Div,
+  H1,
   H2,
+  H3,
   Input,
+  Li,
+  P,
   Ul};
 const text = data => {
   return {
@@ -1027,17 +1132,30 @@ const {
   Viewlet} = ClassNames;
 const Settings = 'Settings';
 
+const SettingsSearch = 'SettingsSearch';
+const Clear = 'Clear';
+
 const getSettingsInputDom = () => {
   const placeholder = 'Search Settings';
   return [{
     type: VirtualDomElements.Div,
     className: 'SettingsInputWrapper',
-    childCount: 1
+    childCount: 2
   }, {
     type: VirtualDomElements.Input,
     className: 'InputBox SettingsSearchInput',
-    placeholder
-  }];
+    placeholder,
+    childCount: 0,
+    name: SettingsSearch // TODO add input event listener
+  }, {
+    type: VirtualDomElements.Button,
+    className: 'Button InputButton',
+    childCount: 1,
+    ariaLabel: 'Clear',
+    // TODO i18n string
+    name: Clear // TODO add click event listener
+  }, text('Clear') // TODO use icon
+  ];
 };
 
 const getSettingsHeaderDom = () => {
@@ -1048,21 +1166,63 @@ const getSettingsHeaderDom = () => {
   }, ...getSettingsInputDom()];
 };
 
-const getSettingsContentDom = () => {
+const getItemNumberVirtualDom = item => {
+  const {
+    heading,
+    description
+  } = item;
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsItem',
+    childCount: 3
+  }, {
+    type: VirtualDomElements.H3,
+    childCount: 1
+  }, text(heading), {
+    type: VirtualDomElements.P,
+    childCount: 1
+  }, text(description), {
+    type: VirtualDomElements.Input,
+    className: 'InputBox',
+    inputType: 'number',
+    placeholder: 'number value',
+    childCount: 0
+  }];
+};
+
+const getSettingsItemsDom = items => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsItems',
+    childCount: items.length
+  }, ...items.flatMap(getItemNumberVirtualDom)];
+};
+
+const getSettingsContentDom = items => {
   return [{
     type: VirtualDomElements.Div,
     className: 'SettingsContent',
+    childCount: 2
+  }, {
+    type: VirtualDomElements.H1,
     childCount: 1
-  }, text('Settings Content')];
+  }, text('Settings Content'), ...getSettingsItemsDom(items)];
 };
 
+const HandleClickTab = 'handleClickTab';
+const HandleInput = 'handleInput';
+
+// TODo use numeric ids
+
 const getTabVirtualDom = tab => {
+  const className = tab.selected ? mergeClassNames('Tab', 'TabSelected') : 'Tab';
   return [{
-    type: VirtualDomElements.Div,
-    className: 'Tab',
+    type: VirtualDomElements.Li,
+    className,
     childCount: 1,
-    role: AriaRoles.Tab
-  }, text(tab)];
+    role: AriaRoles.Tab,
+    name: tab.id
+  }, text(tab.label)];
 };
 
 const getSettingsTabsDom = tabs => {
@@ -1070,7 +1230,8 @@ const getSettingsTabsDom = tabs => {
     type: VirtualDomElements.Ul,
     className: 'SettingsTabs',
     role: AriaRoles.TabList,
-    childCount: tabs.length
+    childCount: tabs.length,
+    onClick: HandleClickTab
   }, ...tabs.flatMap(getTabVirtualDom)];
 };
 
@@ -1087,23 +1248,24 @@ const getSettingsSideBarDom = tabs => {
   }, text(sideBarHeading), ...getSettingsTabsDom(tabs)];
 };
 
-const getSettingsMainDom = tabs => {
+const getSettingsMainDom = (tabs, items) => {
   return [{
     type: VirtualDomElements.Div,
     className: 'SettingsMain',
     childCount: 2
-  }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom()];
+  }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(items)];
 };
 
 const getSettingsDom = state => {
   const {
-    tabs
+    tabs,
+    items
   } = state;
   return [{
     type: VirtualDomElements.Div,
     childCount: 2,
     className: mergeClassNames(Viewlet, Settings)
-  }, ...getSettingsHeaderDom(), ...getSettingsMainDom(tabs)];
+  }, ...getSettingsHeaderDom(), ...getSettingsMainDom(tabs, items)];
 };
 
 const renderItems = (oldState, newState) => {
@@ -1143,108 +1305,13 @@ const renderActions = () => {
   return [];
 };
 
-const HandleClickCallStackItem = 'handleClickCallStackItem';
-const HandleClickWatchExpression = 'handleClickWatchExpression';
-const HandleClickWatchExpressionDelete = 'handleClickWatchExpressionDelete';
-const HandleClickCheckBox = 'handleClickCheckBox';
-const HandleClickContinue = 'handleClickContinue';
-const HandleClickDebugButton = 'handleClickDebugButton';
-const HandleClickPause = 'handleClickPause';
-const HandleClickScopeValue = 'handleClickScopeValue';
-const HandleClickSectionBreakPoints = 'handleClickSectionBreakPoints';
-const HandleClickSectionCallstack = 'handleClickSectionCallstack';
-const HandleClickSectionHeading = 'handleClickSectionHeading';
-const HandleClickSectionScope = 'handleClickSectionScope';
-const HandleClickSectionWatch = 'handleClickSectionWatch';
-const HandleClickStepInto = 'handleClickStepInto';
-const HandleClickStepOut = 'handleClickStepOut';
-const HandleClickStepOver = 'handleClickStepOver';
-const HandleDebugInput = 'handleDebugInput';
-const HandleClickSectionAction = 'handleClickSectionAction';
-const HandleInputFieldChange = 'handleInputFieldChange';
-const HandleInputBlur = 'handleInputBlur';
-const HandleSectionHeaderContextMenu = 'handleSectionHeaderContextMenu';
-const HandleWatchExpressionContextMenu = 'handleWatchExpressionContextMenu';
-
-// TODo use numeric ids
-
 const renderEventListeners = () => {
   return [{
-    name: HandleClickContinue,
-    params: ['handleClickContinue']
-  }, {
-    name: HandleClickDebugButton,
-    params: ['handleClickDebugButton', 'event.target.name']
-  }, {
-    name: HandleClickPause,
-    params: ['handleClickPause']
-  }, {
-    name: HandleClickStepOver,
-    params: ['handleClickStepOver']
-  }, {
-    name: HandleClickStepInto,
-    params: ['handleClickStepInto']
-  }, {
-    name: HandleClickStepOut,
-    params: ['handleClickStepOut']
-  }, {
-    name: HandleClickSectionWatch,
-    params: ['HandleClickSectionWatch']
-  }, {
-    name: HandleClickSectionBreakPoints,
-    params: ['handleClickSectionBreakpoints']
-  }, {
-    name: HandleClickSectionScope,
-    params: ['handleClickSectionScope']
-  }, {
-    name: HandleClickSectionCallstack,
-    params: ['handleClickSectionCallstack']
-  }, {
-    name: HandleClickSectionBreakPoints,
-    params: ['handleClickSectionBreakPoints']
-  }, {
-    name: HandleDebugInput,
-    params: ['handleDebugInput', 'event.target.value']
-  }, {
-    name: HandleClickSectionHeading,
-    params: ['handleClickSectionHeading', 'event.target.dataset.name', 'event.button'],
-    preventDefault: true
-  }, {
-    name: HandleClickCheckBox,
-    params: ['handleClickCheckBox', 'event.target.name']
-  }, {
-    name: HandleClickDebugButton,
-    params: ['handleClickDebugButton', 'event.target.name']
-  }, {
-    name: HandleClickCallStackItem,
-    params: ['handleClickCallStackItem', 'event.target.dataset.index']
-  }, {
-    name: HandleClickWatchExpression,
-    params: ['handleClickWatchExpression', 'event.target.dataset.index', 'event.defaultPrevented']
-  }, {
-    name: HandleClickWatchExpressionDelete,
-    params: ['handleClickWatchExpressionDelete', 'event.target.dataset.index'],
-    preventDefault: true
-  }, {
-    name: HandleClickScopeValue,
-    params: ['handleClickScopeValue', 'event.target.dataset.index', 'event.button']
-  }, {
-    name: HandleInputFieldChange,
-    params: ['handleInputFieldChange', 'event.target.name', 'event.target.value']
-  }, {
-    name: HandleClickSectionAction,
-    params: ['handleClickSectionAction', 'event.target.name']
-  }, {
-    name: HandleInputBlur,
-    params: ['handleInputBlur']
-  }, {
-    name: HandleSectionHeaderContextMenu,
-    params: ['handleSectionHeaderContextMenu', 'event.clientX', 'event.clientY', 'event.target.dataset.name'],
-    preventDefault: true
+    name: HandleClickTab,
+    params: ['handleClickTab', 'event.target.name']
   }, {
-    name: HandleWatchExpressionContextMenu,
-    params: ['handleWatchExpressionContextMenu', 'event.clientX', 'event.clientY', 'event.target.dataset.index'],
-    preventDefault: true
+    name: HandleInput,
+    params: ['handleInput', 'event.target.value']
   }];
 };
 
@@ -1305,7 +1372,10 @@ const commandMap = {
   'Settings.renderEventListeners': renderEventListeners,
   'Settings.restoreState': restoreState,
   'Settings.saveState': saveState,
-  'Settings.terminate': terminate
+  'Settings.terminate': terminate,
+  'Settings.handleClickTab': wrapCommand(handleClickTab),
+  'Settings.clear': wrapCommand(clear),
+  'Settings.handleInput': wrapCommand(handleInput)
 };
 
 const rpcs = Object.create(null);

package/package.json

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