@lvce-editor/settings-view 1.2.0 → 1.3.0

package/dist/settingsViewWorkerMain.js

@@ -932,7 +932,8 @@ const create$1 = (id, uri, x, y, width, height) => {
     x,
     y,
     width,
-    height
+    height,
+    tabs: []
   };
   set$1(id, state, state);
 };
@@ -975,12 +976,25 @@ const initialize = async () => {
   // TODO
 };
 
+const getTabs = () => {
+  const tabs = ['Text Editor', 'Workbench', 'Window', 'Features', 'Applications', 'Security', 'Extensions'];
+  return tabs;
+};
+
 const loadContent = async (state, savedState) => {
+  const tabs = getTabs();
   return {
-    ...state
+    ...state,
+    tabs
   };
 };
 
+const Tab$1 = 'tab';
+const TabList = 'tablist';
+const AriaRoles = {
+  __proto__: null,
+  Tab: Tab$1,
+  TabList};
 const Viewlet$1 = 'Viewlet';
 const ClassNames = {
   __proto__: null,
@@ -989,12 +1003,18 @@ const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
 const Div = 4;
-const H1 = 5;
+const Input = 6;
 const Text = 12;
+const H2 = 22;
+const Aside = 28;
+const Ul = 60;
 const VirtualDomElements = {
   __proto__: null,
+  Aside,
   Div,
-  H1};
+  H2,
+  Input,
+  Ul};
 const text = data => {
   return {
     type: Text,
@@ -1007,19 +1027,87 @@ const {
   Viewlet} = ClassNames;
 const Settings = 'Settings';
 
-const getSettingsDom = state => {
+const getSettingsInputDom = () => {
+  const placeholder = 'Search Settings';
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsInputWrapper',
+    childCount: 1
+  }, {
+    type: VirtualDomElements.Input,
+    className: 'InputBox SettingsSearchInput',
+    placeholder
+  }];
+};
+
+const getSettingsHeaderDom = () => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsHeader',
+    childCount: 1
+  }, ...getSettingsInputDom()];
+};
+
+const getSettingsContentDom = () => {
   return [{
     type: VirtualDomElements.Div,
+    className: 'SettingsContent',
+    childCount: 1
+  }, text('Settings Content')];
+};
+
+const getTabVirtualDom = tab => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'Tab',
     childCount: 1,
-    className: mergeClassNames(Viewlet, Settings)
+    role: AriaRoles.Tab
+  }, text(tab)];
+};
+
+const getSettingsTabsDom = tabs => {
+  return [{
+    type: VirtualDomElements.Ul,
+    className: 'SettingsTabs',
+    role: AriaRoles.TabList,
+    childCount: tabs.length
+  }, ...tabs.flatMap(getTabVirtualDom)];
+};
+
+const getSettingsSideBarDom = tabs => {
+  const sideBarHeading = 'Settings SideBar';
+  return [{
+    type: VirtualDomElements.Aside,
+    className: 'SettingsSideBar',
+    childCount: 2
   }, {
-    type: VirtualDomElements.H1,
+    type: VirtualDomElements.H2,
+    className: 'SettingsSideBarHeading',
     childCount: 1
-  }, text('Settings Dom: TODO')];
+  }, text(sideBarHeading), ...getSettingsTabsDom(tabs)];
+};
+
+const getSettingsMainDom = tabs => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsMain',
+    childCount: 2
+  }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom()];
+};
+
+const getSettingsDom = state => {
+  const {
+    tabs
+  } = state;
+  return [{
+    type: VirtualDomElements.Div,
+    childCount: 2,
+    className: mergeClassNames(Viewlet, Settings)
+  }, ...getSettingsHeaderDom(), ...getSettingsMainDom(tabs)];
 };
 
 const renderItems = (oldState, newState) => {
-  const dom = getSettingsDom();
+  const dom = getSettingsDom(newState);
   return ['Viewlet.setDom2', newState.id, dom];
 };
 

package/package.json

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