@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.2

package/src/navigation/TiltSlider.vue.d.ts

@@ -8,14 +8,17 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
         default: boolean;
     };
-}, any, {
-    localValue: number;
 }, {
-    tilt: {
-        get(): number;
-        set(value: any): void;
-    };
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    localValue: import("vue").Ref<any>;
+    tickSize: import("vue").ComputedRef<number>;
+    trackSize: import("vue").ComputedRef<number>;
+    props: import("@vue/shared").LooseRequired<{
+        readonly disabled: boolean;
+        readonly modelValue: number;
+    } & {}>;
+    minWidth: import("vue").ComputedRef<number>;
+    minHeight: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: NumberConstructor;
         required: true;

package/src/navigation/VcsCompass.vue

@@ -4,8 +4,10 @@
       transform: `rotate(${compassRotation}deg)`,
     }"
     @click="$emit('update:modelValue', 0)"
-    class="h-16 w-16 d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease"
+    class="d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease"
     elevation="1"
+    :height="height"
+    :width="width"
   >
     <span>N</span>
     <MapNavCompass
@@ -17,25 +19,18 @@
     />
   </v-sheet>
 </template>
-<style lang="scss" scoped>
-  .h-16 {
-    height: 64px;
-  }
-  .w-16 {
-    width: 64px;
-  }
-</style>
+<style lang="scss" scoped></style>
 <script>
   import { computed, ref } from 'vue';
 
   import { VSheet } from 'vuetify/components';
   import MapNavCompass from './MapNavCompass.vue';
+  import { useFontSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description Compass component to be shown on the map.
    * @vue-prop {OrientationToolsViewMode}  viewMode  - Mode of the map. Defines the behaviour of the compass.
-   * @vue-prop {number}                     value     - Number of degrees of the compass rotation.
-   * @vue-event {number} input
+   * @vue-prop {number}                     modelValue     - Number of degrees of the compass rotation.
    * @vue-prop {boolean} disabled - whether compass should be disabled
    */
   export default {
@@ -62,9 +57,20 @@
     setup(props) {
       const rotationValue = ref(props.modelValue);
 
+      const fontSize = useFontSize();
+      const height = computed(() => {
+        return fontSize.value * 5;
+      });
+
+      const width = computed(() => {
+        return fontSize.value * 5;
+      });
+
       return {
         rotationValue,
         compassRotation: computed(() => -1 * rotationValue.value),
+        height,
+        width,
       };
     },
     watch: {

package/src/navigation/VcsCompass.vue.d.ts

@@ -15,6 +15,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     rotationValue: import("vue").Ref<number>;
     compassRotation: import("vue").ComputedRef<number>;
+    height: import("vue").ComputedRef<number>;
+    width: import("vue").ComputedRef<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     viewMode: {
         type: StringConstructor;

package/src/styles/_typography.scss

@@ -12,6 +12,7 @@
   span,
   button,
   input,
+  textarea,
   .caption,
   .tooltip,
   label,

package/src/vcsUiApp.d.ts

@@ -11,19 +11,23 @@ export type PluginConfig = {
     /**
      * - path to the plugin's index.js
      */
-    entry: string | undefined;
+    entry?: string | undefined;
     /**
      * - version or version range
      */
-    version: string | undefined;
+    version?: string | undefined;
+};
+export type PluginConfigEditorComponent<Config extends Object> = import("vue").Component<{
+    getConfig(): Promise<Config>;
+    setConfig(config: Config): Promise<void>;
+}> & {
+    title?: string;
 };
 export type PluginConfigEditor = {
     /**
      * - A editor component to configure a plugin or item
      */
-    component: import("vue").Component & {
-        title: string | undefined;
-    };
+    component: PluginConfigEditorComponent<object>;
     /**
      * - The collection the item belongs to. Default is plugins collection.
      */
@@ -267,10 +271,7 @@ declare class VcsUiApp extends VcsApp {
     get vuetify(): {
         install: (app: import("vue").App<any>) => void;
         defaults: import("vue").Ref<import("vuetify").DefaultsInstance>;
-        display: import("vuetify").DisplayInstance; /**
-         * @type {import("@vcmap/core").OverrideCollection<AbstractFeatureInfoView>}
-         * @private
-         */
+        display: import("vuetify").DisplayInstance;
         theme: import("vuetify").ThemeInstance & {
             install: (app: import("vue").App<any>) => void;
         };
@@ -305,11 +306,7 @@ declare class VcsUiApp extends VcsApp {
                 toISO: (date: unknown) => string;
                 startOfDay: (date: unknown) => unknown;
                 endOfDay: (date: unknown) => unknown;
-                startOfWeek: (date: unknown) => unknown; /**
-                 * An event triggered when the VcsApp was mounted and a target was set for the maps.
-                 * Provides the id of the target html element.
-                 * @type {import("@vcmap/core").VcsEvent<string>}
-                 */
+                startOfWeek: (date: unknown) => unknown;
                 endOfWeek: (date: unknown) => unknown;
                 startOfMonth: (date: unknown) => unknown;
                 endOfMonth: (date: unknown) => unknown;
@@ -340,9 +337,6 @@ declare class VcsUiApp extends VcsApp {
                 setDate: (date: unknown, day: number) => unknown;
                 getNextMonth: (date: unknown) => unknown;
                 getPreviousMonth: (date: unknown) => unknown;
-                /**
-                 * @type {I18nCollection}
-                 */
                 getHours: (date: unknown) => number;
                 setHours: (date: unknown, hours: number) => unknown;
                 getMinutes: (date: unknown) => number;

package/src/vcsUiApp.js

@@ -59,13 +59,20 @@ import { createVcsVuetify } from './vuePlugins/vuetify.js';
 /**
  * @typedef {Object} PluginConfig
  * @property {string} name
- * @property {string|undefined} entry - path to the plugin's index.js
- * @property {string|undefined} version - version or version range
+ * @property {string|undefined} [entry] - path to the plugin's index.js
+ * @property {string|undefined} [version] - version or version range
+ */
+
+/**
+ * @typedef {import("vue").Component<{ getConfig(): Promise<Config>, setConfig(config: Config): Promise<void> }> & {
+ *  title?: string
+ * }} PluginConfigEditorComponent
+ * @template {Object} Config
  */
 
 /**
  * @typedef {Object} PluginConfigEditor
- * @property {import("vue").Component & { title: string | undefined}} component - A editor component to configure a plugin or item
+ * @property {PluginConfigEditorComponent<object>} component - A editor component to configure a plugin or item
  * @property {string} [collectionName='plugins'] - The collection the item belongs to. Default is plugins collection.
  * @property {string} [itemName] - The item the editor can be used for. Can be a name or className. Default is the plugin's name.
  * @property {function():string} [infoUrlCallback] - An optional function returning an url referencing help or further information regarding the config editor.

package/src/vuePlugins/i18n.js

@@ -1,5 +1,6 @@
 import { createI18n } from 'vue-i18n';
 import { is } from '@vcsuite/check';
+import { resolveValue } from '@intlify/core-base';
 
 /**
  * creates a new VueI18n Instance.
@@ -12,6 +13,12 @@ export function createVueI18n() {
     missingWarn: false,
     fallbackWarn: false,
     fallbackLocale: ['en', 'de'],
+    messageResolver: (obj, path) => {
+      const value = resolveValue(obj, path);
+      return typeof value === 'string'
+        ? value.replaceAll(/@/g, "{'@'}")
+        : value;
+    },
     messages: {
       en: {},
     },

package/src/vuePlugins/vuetify.js

@@ -140,6 +140,10 @@ export function createVcsVuetify(i18n) {
         density: 'compact',
         ripple: false,
       },
+      VSwitch: {
+        density: 'compact',
+        ripple: false,
+      },
     },
     defaultAssets: {
       font: {