@vcmap/ui 5.0.0-rc.22 → 5.0.0-rc.24

package/src/state.js

@@ -39,7 +39,7 @@ import { Viewpoint } from '@vcmap/core';
  * @typedef {Object} AppState
  * @property {import("@vcmap/core").ViewpointOptions} [activeViewpoint]
  * @property {string} [activeMap]
- * @property {Array<string>} contextIds
+ * @property {Array<string>} moduleIds
  * @property {Array<LayerState>} layers
  * @property {Array<PluginState>} plugins
  * @property {string} [activeObliqueCollection]
@@ -48,7 +48,7 @@ import { Viewpoint } from '@vcmap/core';
 /**
  * The URL state of the app is an array. To null parameters, pass in 0 instead.
  * The first entry is the viewpoint state, the second the active map name
- * The third is an array of contexts to apply the state to
+ * The third is an array of modules to apply the state to
  * the fourth is an array of layer states
  * the fifth is an array of plugin states
  * the sixth is the currently active oblique collection or 0 if not applicable
@@ -65,7 +65,7 @@ const MAX_URL_LENGTH = 2048;
  */
 export function createEmptyState() {
   return {
-    contextIds: [],
+    moduleIds: [],
     layers: [],
     plugins: [],
   };
@@ -143,7 +143,7 @@ function parseUrlAppState(urlState) {
     state.activeMap = urlState[1];
   }
   if (Array.isArray(urlState[2])) {
-    state.contextIds = urlState[2].slice();
+    state.moduleIds = urlState[2].slice();
   }
   if (Array.isArray(urlState[3])) {
     urlState[3].forEach((urlLayerState) => {
@@ -190,7 +190,7 @@ function writeUrlAppState(state, maxLength) {
     urlState[1] = state.activeMap;
   }
 
-  urlState[2] = state.contextIds.slice();
+  urlState[2] = state.moduleIds.slice();
   urlState[3] = [];
   urlState[4] = [];
 
@@ -200,20 +200,31 @@ function writeUrlAppState(state, maxLength) {
 
   state.layers.forEach((layerState) => {
     const layerUrlState = writeUrlLayerState(layerState);
-    if ((JSON.stringify(urlState).length + JSON.stringify(layerUrlState).length) < maxLength) {
+    if (
+      JSON.stringify(urlState).length + JSON.stringify(layerUrlState).length <
+      maxLength
+    ) {
       urlState[3].push(layerUrlState);
     }
   });
 
   state.plugins.forEach((pluginState) => {
     const urlPluginState = writeUrlPluginState(pluginState);
-    if ((JSON.stringify(urlState).length + JSON.stringify(urlPluginState).length) < maxLength) {
+    if (
+      JSON.stringify(urlState).length + JSON.stringify(urlPluginState).length <
+      maxLength
+    ) {
       urlState[4].push(urlPluginState);
     }
   });
 
-  if (urlState[3].length !== state.layers.length || urlState[4].length !== state.plugins.length) {
-    getLogger('StateManagement').warning('State too large for URL: Not all layers and plugins are represented');
+  if (
+    urlState[3].length !== state.layers.length ||
+    urlState[4].length !== state.plugins.length
+  ) {
+    getLogger('StateManagement').warning(
+      'State too large for URL: Not all layers and plugins are represented',
+    );
   }
 
   return urlState;
@@ -230,7 +241,9 @@ export function getStateFromURL(url) {
     try {
       return parseUrlAppState(JSON.parse(url.searchParams.get('state')));
     } catch (e) {
-      getLogger('StateManager').error('failed to parse the state URL parameter');
+      getLogger('StateManager').error(
+        'failed to parse the state URL parameter',
+      );
     }
   }
   return createEmptyState();
@@ -247,10 +260,13 @@ export function setStateToUrl(state, url) {
     activeObliqueCollection: [String, undefined],
     layers: Array,
     plugins: Array,
-    contextIds: [String],
+    moduleIds: [String],
   });
   check(url, URL);
 
   const maxLength = MAX_URL_LENGTH - url.toString().length;
-  url.searchParams.set('state', JSON.stringify(writeUrlAppState(state, maxLength)));
+  url.searchParams.set(
+    'state',
+    JSON.stringify(writeUrlAppState(state, maxLength)),
+  );
 }

package/src/styles/_typography.scss

@@ -36,5 +36,4 @@
     font-size: 12px;
     font-weight: normal;
   }
-
 }

package/src/styles/shades.scss

@@ -1,2 +1,4 @@
-
-$shades: ('black': #222222, 'white': #FFFFFF);
+$shades: (
+  'black': #222222,
+  'white': #ffffff,
+);

package/src/styles/utils/_border.scss

@@ -4,4 +4,4 @@
 
 .border-2--primary {
   border: 2px solid var(--v-primary-base);
-}
+}

package/src/styles/utils/_display.scss

@@ -1,3 +1,3 @@
 .d-contents {
   display: contents;
-}
+}

package/src/styles/variables.scss

@@ -1,41 +1,42 @@
 @import 'shades.scss';
+@import 'vcsFont.scss';
 
 /** Global **/
-$font-size: 14px;
-$font-size-root: 14px;
+$font-size: $vcs-font-size;
+$font-size-root: $vcs-font-size;
 
 $material-dark: (
-        'background': map-get($shades, 'black'),
-        'cards': map-get($shades, 'black'),
-        'text-fields': (
-                'outlined': var(--v-base-base),
-                'outlined-hover': var(--v-base-base),
-        ),
-        'input-bottom-line': var(--v-base-base),
-        'dividers': var(--v-base-lighten2),
-        'toolbar': rgba(map-get($shades, 'black'), 0.8),
-        'table': (
-                'hover': var(--v-base-lighten4),
-        ),
+  'background': map-get($shades, 'black'),
+  'cards': map-get($shades, 'black'),
+  'text-fields': (
+    'outlined': var(--v-base-base),
+    'outlined-hover': var(--v-base-base),
+  ),
+  'input-bottom-line': var(--v-base-base),
+  'dividers': var(--v-base-lighten2),
+  'toolbar': rgba(map-get($shades, 'black'), 0.8),
+  'table': (
+    'hover': var(--v-base-lighten4),
+  ),
 );
 $material-light: (
-        'text-fields': (
-                'outlined': var(--v-base-base),
-                'outlined-hover': var(--v-base-base),
-        ),
-        'input-bottom-line': var(--v-base-base),
-        'text': (
-                'primary': map-get($shades, 'black'),
-                'disabled': rgba(map-get($shades, 'black'), 0.3),
-        ),
-        'buttons': (
-                'disabled': rgba(map-get($shades, 'black'), 0.5),
-        ),
-        'dividers': var(--v-base-lighten2),
-        'toolbar': rgba(map-get($shades, 'white'), 0.8),
-        'table': (
-                'hover': var(--v-base-lighten4),
-        ),
+  'text-fields': (
+    'outlined': var(--v-base-base),
+    'outlined-hover': var(--v-base-base),
+  ),
+  'input-bottom-line': var(--v-base-base),
+  'text': (
+    'primary': map-get($shades, 'black'),
+    'disabled': rgba(map-get($shades, 'black'), 0.3),
+  ),
+  'buttons': (
+    'disabled': rgba(map-get($shades, 'black'), 0.5),
+  ),
+  'dividers': var(--v-base-lighten2),
+  'toolbar': rgba(map-get($shades, 'white'), 0.8),
+  'table': (
+    'hover': var(--v-base-lighten4),
+  ),
 );
 
 // input font and icon
@@ -43,7 +44,7 @@ $input-font-size: $font-size;
 $input-icon-height: 16px; // 24px !default;
 $input-icon-width: 16px; // 24px !default;
 $input-icon-min-width: 16px; // 24px !default;
-
+$input-icon-font-size: 16px;
 
 /** VcsTextfield **/
 
@@ -71,8 +72,9 @@ $text-field-outlined-label-position-x: 6px;
 $text-field-outlined-label-position-y: -14px;
 $text-field-outlined-dense-label-position-x: 2px;
 $text-field-outlined-dense-label-position-y: -10px;
+$label-font-size: $font-size; // 1rem !default;
 $text-field-label-top: 2px; // 6px !default;
-$text-field-label-active-transform: translateY(-14px) scale(.75); //translateY(-18px) scale(.75) !default;
+$text-field-label-active-transform: translateY(-14px) scale(0.75); //translateY(-18px) scale(.75) !default;
 
 /** VcsTextarea **/
 $textarea-box-enclosed-single-outlined-margin-top: 0; // 10px !default;
@@ -130,4 +132,7 @@ $snackbar-bottom: 36px;
 $snackbar-background-color: rgba(0, 0, 0, 0.8);
 $snackbar-content-padding: 8px;
 $snackbar-action-margin: 8px;
-$snackbar-wrapper-min-height: 36px;
+$snackbar-wrapper-min-height: 36px;
+
+/** Datatable **/
+$data-table-regular-row-font-size: $font-size;

package/src/styles/vcsFont.scss

@@ -4,7 +4,8 @@
   font-style: normal;
   font-weight: 400;
   src: url(../assets/font/TitilliumWeb-Regular.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
@@ -12,11 +13,11 @@
   font-style: normal;
   font-weight: 400;
   src: url(../assets/font/TitilliumWeb-Regular.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
 }
 
 // fonts
-$base-font-size: 14px; // base font-size minimum size
-
+$vcs-font-size: 13px;
 // header
-

package/src/styles/vcsGrid.scss

@@ -2,3 +2,12 @@
 $line-height-base: 40px; // header lines
 $line-height-dense: 32px; // rows in form field
 
+.gap-1 {
+  gap: 4px;
+}
+.gap-2 {
+  gap: 8px;
+}
+.gap-3 {
+  gap: 12px;
+}

package/src/uiConfig.js

@@ -23,12 +23,12 @@ import { ref } from 'vue';
  */
 class UiConfig extends Collection {
   /**
-   * @param {function():string} getDynamicContextId
+   * @param {function():string} getDynamicModuleId
    */
-  constructor(getDynamicContextId) {
+  constructor(getDynamicModuleId) {
     super();
 
-    makeOverrideCollection(this, getDynamicContextId);
+    makeOverrideCollection(this, getDynamicModuleId);
     /**
      * This object just acts as a go between for reactivity until we have vue3
      * @todo vue3 cleanup
@@ -71,7 +71,9 @@ class UiConfig extends Collection {
    * @inheritDoc
    */
   destroy() {
-    this._listeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
     this._listeners = [];
     super.destroy();
   }