@vcmap/ui 5.0.0-rc.9 → 5.0.0

package/src/styles/_theming.scss

@@ -1,25 +1,73 @@
-:root {
-  --vcs-primary-logo: url('../assets/logo.svg');
-  --vcs-mobile-logo: url('../assets/logo-mobile.svg');
+.v-application .base {
+  background-color: var(--v-base-base) !important;
+  border-color: var(--v-base-base) !important;
 }
-
-.company-logo {
-  background-image: var(--vcs-primary-logo);
-  height: 36px;
-  width: 151px;
-  margin: 0 auto;
-}
-.company-logo-mobile {
-  background-image: var(--vcs-mobile-logo);
-  height: 40px;
-  width: 70px;
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  z-index: 1;
+.v-application .base.lighten-1 {
+  background-color: var(--v-base-lighten1) !important;
+  border-color: var(--v-base-lighten1) !important;
+}
+.v-application .base.lighten-2 {
+  background-color: var(--v-base-lighten2) !important;
+  border-color: var(--v-base-lighten2) !important;
+}
+.v-application .base.lighten-3 {
+  background-color: var(--v-base-lighten3) !important;
+  border-color: var(--v-base-lighten3) !important;
+}
+.v-application .base.lighten-4 {
+  background-color: var(--v-base-lighten4) !important;
+  border-color: var(--v-base-lighten4) !important;
+}
+.v-application .base.darken-1 {
+  background-color: var(--v-base-darken1) !important;
+  border-color: var(--v-base-darken1) !important;
+}
+.v-application .base.darken-2 {
+  background-color: var(--v-base-darken2) !important;
+  border-color: var(--v-base-darken2) !important;
+}
+.v-application .base.darken-3 {
+  background-color: var(--v-base-darken3) !important;
+  border-color: var(--v-base-darken3) !important;
+}
+.v-application .base.darken-4 {
+  background-color: var(--v-base-darken4) !important;
+  border-color: var(--v-base-darken4) !important;
 }
 
-// Dev-Only!
-.bg-dev.theme--light.v-application {
-  background-color: var(--v-primary-base);
+.v-application .base--text {
+  color: var(--v-base-base) !important;
+  caret-color: var(--v-base-base) !important;
+}
+.v-application .base--text.text--lighten-1 {
+  color: var(--v-base-lighten1) !important;
+  caret-color: var(--v-base-lighten1) !important;
+}
+.v-application .base--text.text--lighten-2 {
+  color: var(--v-base-lighten2) !important;
+  caret-color: var(--v-base-lighten2) !important;
+}
+.v-application .base--text.text--lighten-3 {
+  color: var(--v-base-lighten3) !important;
+  caret-color: var(--v-base-lighten3) !important;
+}
+.v-application .base--text.text--lighten-4 {
+  color: var(--v-base-lighten4) !important;
+  caret-color: var(--v-base-lighten4) !important;
+}
+.v-application .base--text.text--darken-1 {
+  color: var(--v-base-darken1) !important;
+  caret-color: var(--v-base-darken1) !important;
+}
+.v-application .base--text.text--darken-2 {
+  color: var(--v-base-darken2) !important;
+  caret-color: var(--v-base-darken2) !important;
+}
+.v-application .base--text.text--darken-3 {
+  color: var(--v-base-darken3) !important;
+  caret-color: var(--v-base-darken3) !important;
+}
+.v-application .base--text.text--darken-4 {
+  color: var(--v-base-darken4) !important;
+  caret-color: var(--v-base-darken4) !important;
 }

package/src/styles/_typography.scss

@@ -1,3 +1,5 @@
+@import 'vcsFont.scss';
+
 .v-application {
   h1,
   h2,
@@ -12,6 +14,7 @@
   .caption,
   .tooltip,
   p {
+    font-size: $vcs-font-size;
     &:not(.v-icon) {
       font-family: 'Titillium Web', sans-serif !important;
     }
@@ -26,17 +29,11 @@
   }
 
   h3 {
-    font-size: 12px;
     font-weight: normal;
   }
 
   h4 {
     font-size: 12px;
     font-weight: normal;
-    color: rgba(#222222, 0.5);
-  }
-
-  .text--disabled {
-    color: rgba(0, 0, 0, 0.38) !important;
   }
 }

package/src/styles/main.scss

@@ -2,10 +2,19 @@
 
 @import './theming';
 @import './typography';
+@import './shades';
 @import './variables';
 @import './vcsFont';
 @import './vcsGrid';
 
+/* latin-ext */
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 400;
+  src: url(./assets/font/TitilliumWeb-Regular.woff2) format('woff2');
+}
+
 html.vcs-ui {
   overflow-x: hidden !important;
   overflow-y: hidden !important;

package/src/styles/shades.scss

@@ -0,0 +1,4 @@
+$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/_cursor.scss

@@ -6,6 +6,10 @@
   cursor: pointer;
 }
 
+.cursor-auto {
+  cursor: auto;
+}
+
 .cursor-not-allowed {
   cursor: not-allowed !important;
 }

package/src/styles/utils/_display.scss

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

package/src/styles/variables.scss

@@ -1,13 +1,50 @@
+@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),
+  ),
+);
+$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),
+  ),
+);
 
 // input font and icon
 $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 **/
 
@@ -20,14 +57,14 @@ $text-field-solo-dense-control-min-height: 22px; //38px !default;
 $text-field-outlined-fieldset-border: 1px solid currentColor; // 2px solid currentColor !default;
 
 // dense non outlined
-$text-field-dense-padding: 2px 0px 1px; //4px 0 2px !default;
+$text-field-dense-padding: 2px 0 1px; //4px 0 2px !default;
 
 // clear icon non dense
 $text-field-enclosed-prepend-append-margin-top: 9px;
 
 // tooltip icon in append slot
 $text-field-outlined-append-prepend-outer-margin-top: 4px; // 18px !default;
-$text-field-append-prepend-margin: 0px; // 4px !default;
+$text-field-append-prepend-margin: 0; // 4px !default;
 $text-field-outlined-prepend-append-margin-top: 4px; // 8px !default;
 
 // label position for outlined Label dense and non-dense
@@ -35,19 +72,19 @@ $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: 0px; // 10px !default;
-$textarea-dense-box-enclosed-single-outlined-margin-top: 0px; // 6px !default;
+$textarea-box-enclosed-single-outlined-margin-top: 0; // 10px !default;
+$textarea-dense-box-enclosed-single-outlined-margin-top: 0; // 6px !default;
 
 /** VcsCheckbox **/
 $icon-size: 20px; // 24px !default;
 $icon-size-dense: 16px; // 20px !default;
 
 /** VcsSelect **/
-
 $select-dense-selections-margin: 4px 4px 3px 0; // 5px 4px 3px 0 !default;
 
 // list box
@@ -55,16 +92,47 @@ $list-padding: 0 0; // 8px 0 !default;
 $list-item-title-font-size: $font-size; // map-deep-get($headings, 'subtitle-1', 'size') !default;
 $list-item-dense-title-font-size: $font-size; // 0.8125rem !default;
 $list-item-dense-title-line-height: 24px; // 1rem !default;
+$list-item-title-subtitle-line-height: 24px; // 1.2 !default;
+$list-dense-subheader-height: 32px; // 40px !default;
 $list-item-min-height: 32px; // 48px !default;
 $list-dense-min-height: 24px; // 40px !default;
 $list-item-content-padding: 4px 0; // 12px 0 !default;
 $list-dense-content-padding: 0 0; // 8px 0 !default;
-$list-item-action-icon-margin: 0 0; //32px !default;
+$list-item-action-icon-margin: 0; //32px !default;
 $list-item-action-margin: 0 0; // 12px 0 !default;
 $list-item-icon-margin: auto 0; // 16px 0 !default;
-
+$list-item-content-children-margin-bottom: 0; // 2px !default;
 
 /** Treeview **/
 $treeview-node-level-width: 16px;
 $treeview-node-margin: 4px;
 $treeview-node-height: 32px; // 48px !default;
+
+/** Expansion Panel **/
+$expansion-panel-header-min-height: 32px; // 48px !default;
+$expansion-panel-active-header-min-height: 32px; // 64px !default;
+$expansion-panel-header-padding: 6px 0; // 16px 24px !default;
+$expansion-panel-content-padding: 0 0 4px; // 0 24px 16px !default;
+
+/** Footer **/
+$footer-padding: 0 8px; // 6px 16px !default;
+
+/** Wizard **/
+$stepper-vertical-padding-bottom: 16px; // 36px !default;
+$stepper-vertical-step-padding: 12px 8px;
+$stepper-vertical-content-ltr-margin: -14px 0 -14px 13px; // -8px -36px -16px 36px !default;
+$stepper-vertical-content-ltr-padding: 16px 8px 16px 16px; // 16px 23px 16px 60px !default;
+$stepper-vertical-step-step-margin: 8px;
+$stepper-step-step-min-width: 12px;
+$stepper-step-step-width: 12px;
+$stepper-step-step-height: 12px;
+
+/** Snackbar **/
+$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;
+
+/** Datatable **/
+$data-table-regular-row-font-size: $font-size;

package/src/styles/vcsFont.scss

@@ -1,5 +1,2 @@
-// fonts
-$base-font-size: 14px; // base font-size minimum size
-
-// header
-
+// fontSize
+$vcs-font-size: 13px;

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

@@ -0,0 +1,83 @@
+import { Collection, makeOverrideCollection } from '@vcmap/core';
+import { ref } from 'vue';
+
+/**
+ * @typedef {Object} UiConfigurationItem
+ * @property {string} name
+ * @property {*} value
+ */
+
+/**
+ * @typedef {Object} UiConfigObject
+ * @property {string} [logo] - the company logo to display. this will override any and all css overrides.
+ * @property {string} [mobileLogo] - an alternative logo to display in mobile view
+ * @property {string} [appTitle] - an optional title to display next to the company logo
+ * @property {string} [primaryColor] - an optional primary color to use in all themes
+ * @property {boolean} [startingFeatureInfo] - an optional flag whether to activate feature info on startup (default active)
+ * @property {string} [helpBaseUrl='https://help.vc.systems/'] - an optional URL to a help landing page
+ */
+
+/**
+ * @class
+ * @extends {Collection<UiConfigurationItem>}
+ * @implements {import("@vcmap/core").OverrideCollectionInterface<UiConfigurationItem>}
+ */
+class UiConfig extends Collection {
+  /**
+   * @param {function():string} getDynamicModuleId
+   */
+  constructor(getDynamicModuleId) {
+    super();
+
+    makeOverrideCollection(this, getDynamicModuleId);
+    /**
+     * This object just acts as a go between for reactivity until we have vue3
+     * @todo vue3 cleanup
+     * @type {Object<string, *>}
+     */
+    const configObject = {};
+    /**
+     * @type {import("vue").Ref<Object<string, *>>}
+     * @private
+     */
+    this._config = ref({});
+    /**
+     * @type {Array<function():void>}
+     * @private
+     */
+    this._listeners = [
+      this.added.addEventListener((item) => {
+        if (typeof item?.name === 'string') {
+          configObject[item.name] = item.value;
+          this._config.value = { ...configObject }; // shallow clone to trip reactivity
+        }
+      }),
+      this.removed.addEventListener((item) => {
+        if (typeof item?.name === 'string') {
+          delete configObject[item.name];
+          this._config.value = { ...configObject }; // shallow clone to trip reactivity
+        }
+      }),
+    ];
+  }
+
+  /**
+   * @returns {import("vue").Ref<Object<string, *>|UiConfigObject>}
+   */
+  get config() {
+    return this._config;
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._listeners.forEach((cb) => {
+      cb();
+    });
+    this._listeners = [];
+    super.destroy();
+  }
+}
+
+export default UiConfig;