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

package/plugins/@vcmap-show-case/wizard-example/wizardExample.vue

@@ -10,44 +10,67 @@
       v-model.number="step"
     >
       <template #content>
-        <div>
-          This is the content of the first step.
-        </div>
-        <VcsButton
-          @click="increaseStep()"
-          class="my-2"
-        >
-          Next
-        </VcsButton>
+        <!-- px-2 because does not contain input components -->
+        <v-container class="px-2 py-0">
+          <div>
+            This is the content of the first step.
+          </div>
+          <VcsButton
+            @click="increaseStep()"
+            class="my-2"
+          >
+            Next
+          </VcsButton>
+        </v-container>
       </template>
     </VcsWizardStep>
     <VcsWizardStep
-      :rules="[() => false]"
       step="2"
       editable
       :header-actions="actions.second"
       heading="This is the second step"
       v-model.number="step"
+      :rules="[v => !!formValid]"
     >
       <template #help>
+        Allowed options:
         <ol>
-          <li>this</li>
           <li>is</li>
-          <li>the help slot</li>
+          <li>a</li>
+          <li>test</li>
         </ol>
       </template>
       <template #content>
-        <VcsSelect
-          :items="['this', 'is', 'a', 'test']"
-          v-model="selection"
-          label="Select"
-          class="my-2"
-        />
-        <VcsButton
-          @click="decreaseStep()"
-        >
-          Back
-        </VcsButton>
+        <v-container class="px-1 py-0">
+          <v-form ref="form" v-model="formValid" lazy-validation>
+            <VcsSelect
+              :items="['this', 'is', 'a', 'test']"
+              v-model="selection"
+              placeholder="Select"
+              :rules="[v => (!!v && v !== 'this') || 'Please select a valid option.']"
+            />
+            <VcsButton
+              @click="decreaseStep()"
+            >
+              Back
+            </VcsButton>
+          </v-form>
+        </v-container>
+      </template>
+    </VcsWizardStep>
+    <VcsWizardStep
+      step="3"
+      v-model.number="step"
+    >
+      <template #header>
+        <div class="d-flex flex-grow-1 flex-row-reverse">
+          <VcsButton
+            :disabled="!selection || !formValid"
+            @click="finish()"
+          >
+            Finish
+          </VcsButton>
+        </div>
       </template>
     </VcsWizardStep>
   </VcsWizard>
@@ -55,6 +78,7 @@
 
 <script>
   import { VcsWizard, VcsWizardStep, VcsButton, VcsSelect } from '@vcmap/ui';
+  import { VForm, VContainer } from 'vuetify/lib';
   import { ref } from 'vue';
 
   /** Component to showcase the VcsWizard and VcsWizardStep. */
@@ -65,10 +89,14 @@
       VcsWizardStep,
       VcsButton,
       VcsSelect,
+      VForm,
+      VContainer,
     },
     setup() {
       const step = ref(1);
       const selection = ref();
+      const form = ref();
+      const formValid = ref(false);
       const actions = {
         second: [{
           name: 'resetSecondStep',
@@ -85,6 +113,12 @@
         decreaseStep() { step.value -= 1; },
         selection,
         actions,
+        formValid,
+        form,
+        finish() {
+          step.value = 1;
+          form.value.reset();
+        },
       };
     },
   };

package/plugins/package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "@vcmap/hello-world": "^1.0.7",
     "@vcmap/print": "^1.0.2",
-    "@vcmap/swipe-tool": "^1.0.3"
+    "@vcmap/swipe-tool": "^1.0.3",
+    "@vcmap/export": "^1.0.1"
   }
 }

package/src/application/VcsApp.vue

@@ -69,7 +69,7 @@
     getCurrentInstance,
     onMounted,
     onUnmounted,
-    provide,
+    provide, watch,
   } from 'vue';
   import { getVcsAppById } from '@vcmap/core';
   import { VContainer, VFooter } from 'vuetify/lib';
@@ -350,6 +350,7 @@
    * This helper sets up a listener to sync the theming relevant keys from the {@see UiConfigObject}
    * with a given vuetify instance. Use this helper, if you do not use the VcsApp component and wish to evaluate
    * the theming keys. Returns a function to stop syncing.
+   * Also adds a watcher to vuetify theme, which triggers themeChanged event on the VcsUiApp.
    * @param {VcsUiApp} app
    * @param {import("vuetify").Framework} vuetify
    * @returns {function():void} - call to stop syncing
@@ -358,21 +359,28 @@
     const listeners = [
       app.uiConfig.added.addEventListener((item) => {
         if (item.name === 'primaryColor') {
-          vuetify.theme.themes.dark.primary = item.value;
-          vuetify.theme.themes.light.primary = item.value;
+          vuetify.theme.themes.dark.primary = item.value?.dark || item.value;
+          vuetify.theme.themes.light.primary = item.value?.light || item.value;
+          app.themeChanged.raiseEvent();
         }
       }),
       app.uiConfig.removed.addEventListener((item) => {
         if (item.name === 'primaryColor') {
-          vuetify.theme.themes.dark.primary = defaultPrimaryColor;
-          vuetify.theme.themes.light.primary = defaultPrimaryColor;
+          vuetify.theme.themes.dark.primary = defaultPrimaryColor.dark;
+          vuetify.theme.themes.light.primary = defaultPrimaryColor.light;
+          app.themeChanged.raiseEvent();
         }
       }),
     ];
+    const stopWatching = watch(
+      () => vuetify.theme.dark,
+      () => app.themeChanged.raiseEvent(),
+    );
 
     return () => {
       listeners.forEach((cb) => { cb(); });
       listeners.splice(0);
+      stopWatching();
     };
   }
 

package/src/application/VcsAttributions.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-list>
-    <v-list-item v-for="({key, title, attributions}) in entries" :key="key">
+  <v-list class="px-1">
+    <v-list-item v-for="({key, title, attributions}) in entries" :key="key" class="px-1">
       <v-list-item-content>
         <v-list-item-title>{{ $t(title) }}</v-list-item-title>
         <v-list-item-subtitle
@@ -11,7 +11,6 @@
           <a
             :href="attribution.url"
             target="_blank"
-            class="text--secondary"
           >
             {{ $t(attribution.provider) }} {{ attribution.year }}
           </a>

package/src/application/VcsAttributionsFooter.vue

@@ -1,14 +1,13 @@
 <template>
-  <span class="attribution-wrap">
+  <span class="d-inline-block text-truncate mr-10 attribution-wrap">
     <span v-for="attribution in mergedAttributions" class="attribution-span" :key="attribution.provider">
       <a
         :href="attribution.url"
         target="_blank"
-        class="text--secondary"
       >{{ $t(attribution.provider) }} <span>{{ attribution.years }}</span></a>
     </span>
     <VcsButton
-      class="d-flex text--secondary"
+      class="d-flex"
       small
       :key="attributionAction.name"
       :tooltip="attributionAction.title"
@@ -20,18 +19,13 @@
 </template>
 
 <style lang="scss" scoped>
-  .attribution-wrap{
-    white-space: nowrap;
-    margin-right: 40px;
-    overflow: hidden;
-    text-overflow: ellipsis;
 
-    .vcs-button-wrap{
-      position: absolute;
-      right: 4px;
-      bottom: 3px;
-    }
+  .attribution-wrap .vcs-button-wrap {
+    position: absolute;
+    right: 4px;
+    bottom: 3px;
   }
+
   a:before {
     content: '\00a9\00a0';
   }
@@ -40,17 +34,17 @@
     &:before {
       content: '\00a0\007c\00a0';
     }
-    &:first-child::before{
+    &:first-child::before {
       content: '';
     }
-    span{
+    span {
       font-size: inherit;
     }
   }
 
 </style>
 
-<script >
+<script>
 
   import { computed } from 'vue';
   import { mergeAttributions } from './attributionsHelper.js';

package/src/application/VcsNavbar.vue

@@ -4,7 +4,6 @@
     dense
     elevation="0"
     :height="$vuetify.breakpoint.xs ? '56px' : '48px'"
-    :color="'var(--v-basic-base)'"
     :bottom="$vuetify.breakpoint.xs ? 'bottom' : undefined"
     width="100%"
   >
@@ -31,7 +30,7 @@
               />
               <v-divider
                 v-if="contentActions.length > 0 && toolActions.length > 0"
-                class="mx-2"
+                class="mx-2 base lighten-2"
                 vertical
                 inset
               />

package/src/application/VcsSettings.vue

@@ -1,14 +1,21 @@
 <template>
-  <v-container class="pa-2">
+  <v-container class="px-1 py-0">
     <v-row
       no-gutters
       align="center"
     >
       <v-col>
-        <VcsLabel>
-          {{ $t('settings.languageTitle') }}
+        <VcsLabel html-for="settingsLanguageSelect">
+          {{ $t('settings.languageSelector') }}
         </VcsLabel>
       </v-col>
+      <v-col>
+        <VcsSelect
+          id="settingsLanguageSelect"
+          :items="languages"
+          v-model="language"
+        />
+      </v-col>
     </v-row>
     <v-row
       no-gutters
@@ -16,14 +23,18 @@
     >
       <v-col>
         <VcsLabel html-for="settingsLanguageSelect">
-          {{ $t('settings.languageSelector') }}
+          {{ $t('settings.theme.title') }}
         </VcsLabel>
       </v-col>
       <v-col>
-        <VcsSelect
-          id="settingsLanguageSelect"
-          :items="languages"
-          v-model="language"
+        <VcsRadio
+          dense
+          :items="[
+            { label: 'settings.theme.light', value: false },
+            { label: 'settings.theme.dark', value: true },
+          ]"
+          v-model="$vuetify.theme.dark"
+          row
         />
       </v-col>
     </v-row>
@@ -37,11 +48,13 @@
   import { VCol, VContainer, VRow } from 'vuetify/lib';
   import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
+  import VcsRadio from '../components/form-inputs-controls/VcsRadio.vue';
 
   export default {
     name: 'VcsSettings',
     components: {
       VcsSelect,
+      VcsRadio,
       VcsLabel,
       VContainer,
       VRow,

package/src/assets/favicon.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="SvgjsSvg1004" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <rect width="128" height="128" style="fill: none;"/>
+  <g>
+    <path id="SvgjsPath1003" d="m120.44,41.1l-22.64,22.9-30.07-30.44c-.98-1-2.33-1.56-3.73-1.56h52.71c1.4,0,2.73.56,3.73,1.56,2.04,2.05,2.06,5.4.05,7.48,0,0-.05.06-.05.06Z" style="fill: #86b110; isolation: isolate; opacity: .9;"/>
+    <path id="SvgjsPath1002" d="m97.8,64l-30.09,30.44c-2.06,2.08-5.39,2.08-7.45,0-.98-1-1.55-2.36-1.55-3.78v-53.32c0-1.41.56-2.77,1.55-3.78,2.06-2.08,5.39-2.08,7.45,0l30.09,30.44Z" style="fill: #005434; isolation: isolate; opacity: .9;"/>
+    <path id="SvgjsPath1001" d="m58.71,37.34v53.32c0,1.41.56,2.77,1.55,3.78L7.54,41.1c-2.04-2.05-2.06-5.4-.05-7.48l.05-.06c1-1,2.33-1.56,3.73-1.56h52.71c-1.4,0-2.73.56-3.73,1.56-.98.99-1.55,2.34-1.55,3.78Z" style="fill: #409d76; isolation: isolate; opacity: .9;"/>
+    <path id="SvgjsPath1000" d="m120.44,94.44c-.98,1-2.33,1.56-3.73,1.56h-52.71c1.4,0,2.73-.56,3.73-1.56l30.09-30.44,22.64,22.9c2.04,2.05,2.06,5.4.05,7.48l-.05.06h-.02Z" style="fill: #00a0ba; isolation: isolate; opacity: .9;"/>
+  </g>
+</svg>

package/src/components/buttons/VcsButton.vue

@@ -52,7 +52,7 @@
         font-size: 12px;
         border: 1px solid transparent;
         &:hover{
-          color: var(--v-accent-lighten5) !important;
+          color: var(--v-base-lighten5) !important;
           border-color: var(--v-primary-base);
           background-color: var(--v-primary-base);
         }
@@ -87,8 +87,7 @@
 
         &.vcs-button--active-background {
           border: 2px solid var(--v-primary-base);
-          color: var(--v-secondary-base);
-          background-color: var(--v-accent-darken1) !important;
+          background-color: var(--v-base-lighten2) !important;
         }
 
         &.v-btn--disabled {

package/src/components/form-inputs-controls/VcsCheckbox.vue

@@ -3,24 +3,26 @@
     :tooltip-position="tooltipPosition"
     :tooltip="errorMessage"
     color="error"
+    :max-width="200"
   >
     <template #activator="{ on, attrs }">
       <span v-on="on">
         <v-checkbox
+          ref="checkbox"
           :input-value="$attrs.value"
           on-icon="$vcsCheckboxChecked"
           off-icon="$vcsCheckbox"
           class="vcs-checkbox"
+          :class="{'pl-1': !isDense }"
           hide-details
           indeterminate-icon="$vcsCheckboxIndeterminate"
-          :dense="$attrs.dense!==false"
+          :dense="isDense"
           :ripple="false"
           v-bind="{...$attrs, ...attrs}"
           v-on="{...$listeners, ...on}"
-          @update:error="setError"
         >
           <template #label>
-            <VcsLabel :html-for="$attrs.id" :dense="!!$attrs.dense">
+            <VcsLabel :html-for="$attrs.id" :dense="isDense">
               <slot name="label" />
               <span v-if="!$slots.label">{{ $t($attrs.label) }}</span>
             </VcsLabel>
@@ -31,28 +33,45 @@
   </VcsTooltip>
 </template>
 <style lang="scss" scoped>
-.vcs-checkbox {
-  ::v-deep {
-    label.v-label,
-    .v-icon.v-icon{
-      color: inherit;
-    }
-    .v-input--selection-controls__input {
-      margin: 0;
-      padding: 0;
+@import '../../styles/shades.scss';
+  .vcs-checkbox {
+    ::v-deep {
+      .v-input--selection-controls__input {
+        margin: 0;
+        padding: 0;
+      }
+      label.v-label.error--text {
+        animation: none;
+      }
+      .v-icon,
+      .v-label {
+        &.theme--light {
+          color: map-get($shades, 'black') !important;
+          &.error--text{
+            color: var(--v-error-base) !important;
+          }
+        }
+        &.theme--dark {
+          color: map-get($shades, 'white') !important;
+          &.error--text{
+            color: var(--v-error-base) !important;
+          }
+        }
+      }
     }
   }
-}
-.v-input--selection-controls {
-  margin: 0;
-  padding: 0;
-}
+  .v-input--selection-controls {
+    margin: 0;
+    padding: 0;
+  }
+
 </style>
 <script>
+  import { computed, ref } from 'vue';
   import { VCheckbox } from 'vuetify/lib';
   import VcsLabel from './VcsLabel.vue';
   import VcsTooltip from '../notification/VcsTooltip.vue';
-  import validate from '../notification/validation.js';
+  import { useErrorSync } from './composables.js';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-checkbox/ |vuetify checkbox}.
@@ -77,17 +96,18 @@
         default: 'right',
       },
     },
-    data() {
+    setup(props, { attrs }) {
+      const checkbox = ref();
+
+      const errorMessage = useErrorSync(checkbox);
+      const isDense = computed(() => attrs.dense !== false);
+
       return {
-        errorMessage: '',
+        checkbox,
+        errorMessage,
+        isDense,
       };
     },
-    methods: {
-      setError() {
-        const rules = [...this.$attrs.rules].concat(this.$attrs.errorMessages);
-        this.errorMessage = validate(rules, this.$attrs.value).join('\n');
-      },
-    },
     model: {
       event: 'change',
     },

package/src/components/form-inputs-controls/VcsFormSection.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="vcs-form-section">
     <slot name="header" :heading="heading" :actions="actions">
-      <article class="pa-2 accent">
+      <article class="pa-2 base lighten-3">
         <div class="form-section-header d-flex justify-space-between align-center">
           <strong class="caption">{{ $t(heading) }}</strong>
           <VcsActionButtonList
@@ -12,17 +12,13 @@
         </div>
       </article>
     </slot>
-    <v-alert
-      :value="showHelp"
-      dense
-      text
-      color="secondary"
-      class="ma-0"
+    <VcsHelp
+      :text="helpText"
+      :show="showHelp"
+      class="base lighten-4"
     >
-      <slot name="help">
-        <span>{{ $t(helpText) }}</span>
-      </slot>
-    </v-alert>
+      <slot name="help" />
+    </VcsHelp>
     <article class="section-content">
       <slot />
     </article>
@@ -32,8 +28,8 @@
 
 <script>
   import { computed, reactive } from 'vue';
-  import { VAlert } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import VcsHelp from '../notification/VcsHelp.vue';
 
   /**
    * @description
@@ -51,7 +47,7 @@
     name: 'VcsFormSection',
     components: {
       VcsActionButtonList,
-      VAlert,
+      VcsHelp,
     },
     props: {
       heading: {
@@ -98,3 +94,9 @@
     },
   };
 </script>
+
+<style scoped>
+  .v-alert--text:before{
+    background-color: transparent;
+  }
+</style>

package/src/components/form-inputs-controls/VcsLabel.vue

@@ -1,8 +1,17 @@
 <template>
-  <label :htmlFor="htmlFor" class="vcs-label" :class="{'vcs-label-dense': dense}">
+  <label
+    :htmlFor="htmlFor"
+    class="vcs-label"
+    :class="{
+      'vcs-label-dense': dense,
+      'px-1': dense,
+      'px-2': !dense,
+    }"
+  >
     <slot />
   </label>
 </template>
+
 <style lang="scss" scoped>
 @import "../../styles/vcsGrid.scss";
 @import "../../styles/vcsFont";