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

package/src/vuePlugins/vuetify.d.ts

@@ -1,59 +1,54 @@
-export function createVcsThemes(): {
-    light: {
-        colors: {
-            base: string;
-            'base-lighten-5': string;
-            'base-lighten-4': string;
-            'base-lighten-3': string;
-            'base-lighten-2': string;
-            'base-lighten-1': string;
-            'base-darken-1': string;
-            'base-darken-2': string;
-            'base-darken-3': string;
-            'base-darken-4': string;
-            primary: string;
-            warning: string;
-            error: string;
-            info: string;
-            success: string;
-            'surface-light': string;
-        };
-        variables: {
-            'hover-opacity': number;
-            'high-emphasis-opacity': number;
-            'medium-emphasis-opacity': number;
-            'vcs-item-height': string;
-            'vcs-font-size': string;
-            'vcs-font-family': string;
-        };
-    };
-    dark: {
-        colors: {
-            base: string;
-            'base-lighten-5': string;
-            'base-lighten-4': string;
-            'base-lighten-3': string;
-            'base-lighten-2': string;
-            'base-lighten-1': string;
-            'base-darken-1': string;
-            'base-darken-2': string;
-            'base-darken-3': string;
-            'base-darken-4': string;
-            primary: string;
-            warning: string;
-            error: string;
-            info: string;
-            success: string;
-            'surface-light': string;
-        };
-        variables: {
-            'hover-opacity': number;
-            'vcs-item-height': string;
-            'vcs-font-size': string;
-            'vcs-font-family': string;
-        };
-    };
-};
+/**
+ * @typedef {Object} VcsColors
+ * @property {string} [base]
+ * @property {string} [base-lighten-5]
+ * @property {string} [base-lighten-4]
+ * @property {string} [base-lighten-3]
+ * @property {string} [base-lighten-2]
+ * @property {string} [base-lighten-1]
+ * @property {string} [base-darken-1]
+ * @property {string} [base-darken-2]
+ * @property {string} [base-darken-3]
+ * @property {string} [base-darken-4]
+ * @property {string} [primary]
+ * @property {string} [warning]
+ * @property {string} [error]
+ * @property {string} [info]
+ * @property {string} [success]
+ * @property {string} [surface-light]
+ */
+/**
+ * @typedef {Object} VcsVariables
+ * @property {string} [hover-opacity]
+ * @property {string} [high-emphasis-opacity]
+ * @property {string} [medium-emphasis-opacity]
+ * @property {string} [vcs-font-size]
+ * @property {string} [vcs-font-family]
+ */
+/**
+ * @typedef {Object} VcsTheme
+ * @property {VcsColors} [colors]
+ * @property {VcsVariables} [variables]
+ */
+/**
+ * @typedef {Object} VcsThemes
+ * @property {VcsTheme} [dark]
+ * @property {VcsTheme} [light]
+ */
+/**
+ * @param {VcsThemes} [options]
+ * @param {{ dark:string, light:string }|string} [primaryColor]
+ * @returns {VcsThemes}
+ */
+export function createVcsThemes(options?: VcsThemes | undefined, primaryColor?: string | {
+    dark: string;
+    light: string;
+} | undefined): VcsThemes;
+/**
+ * @param {ReturnType<typeof import("vuetify").createVuetify>} vuetify
+ * @param {VcsThemes} theme
+ */
+export function setTheme(vuetify: ReturnType<typeof import("vuetify").createVuetify>, theme: VcsThemes): void;
 /**
  * @param {import("vue-i18n").I18n} i18n
  * @returns {ReturnType<typeof import("vuetify").createVuetify>}
@@ -79,15 +74,15 @@ export function getDefaultPrimaryColor(app: import("../vcsUiApp.js").default): s
  */
 export function getColorByKey(app: import("../vcsUiApp.js").default, value: string, variant?: string | undefined): string;
 /**
- * returns the itemHeight as a number
+ * returns the fontSize as a number
  * @returns {import("vue").ComputedRef<number>}
  */
-export function useItemHeight(): import("vue").ComputedRef<number>;
+export function useFontSize(): import("vue").ComputedRef<number>;
 /**
- * returns the fontSize as a number
+ * returns the default IconSize as a number, value is based on the fontSize
  * @returns {import("vue").ComputedRef<number>}
  */
-export function useFontSize(): import("vue").ComputedRef<number>;
+export function useIconSize(): import("vue").ComputedRef<number>;
 /**
  * @type {{light:string,dark:string}}
  */
@@ -95,3 +90,36 @@ export const defaultPrimaryColor: {
     light: string;
     dark: string;
 };
+export type VcsColors = {
+    base?: string | undefined;
+    "base-lighten-5"?: string | undefined;
+    "base-lighten-4"?: string | undefined;
+    "base-lighten-3"?: string | undefined;
+    "base-lighten-2"?: string | undefined;
+    "base-lighten-1"?: string | undefined;
+    "base-darken-1"?: string | undefined;
+    "base-darken-2"?: string | undefined;
+    "base-darken-3"?: string | undefined;
+    "base-darken-4"?: string | undefined;
+    primary?: string | undefined;
+    warning?: string | undefined;
+    error?: string | undefined;
+    info?: string | undefined;
+    success?: string | undefined;
+    "surface-light"?: string | undefined;
+};
+export type VcsVariables = {
+    "hover-opacity"?: string | undefined;
+    "high-emphasis-opacity"?: string | undefined;
+    "medium-emphasis-opacity"?: string | undefined;
+    "vcs-font-size"?: string | undefined;
+    "vcs-font-family"?: string | undefined;
+};
+export type VcsTheme = {
+    colors?: VcsColors | undefined;
+    variables?: VcsVariables | undefined;
+};
+export type VcsThemes = {
+    dark?: VcsTheme | undefined;
+    light?: VcsTheme | undefined;
+};

package/src/vuePlugins/vuetify.js

@@ -1,8 +1,10 @@
 import { createVuetify, useTheme } from 'vuetify';
+import { VSvgIcon } from 'vuetify/components';
 import { useI18n } from 'vue-i18n';
 import 'vuetify/styles';
 import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n';
-import { computed } from 'vue';
+import { computed, h } from 'vue';
+import DOMPurify from 'dompurify';
 import Icons from '../components/icons/+all.js';
 
 /**
@@ -13,7 +15,53 @@ export const defaultPrimaryColor = {
   dark: '#27B97C',
 };
 
-export function createVcsThemes() {
+/**
+ * @typedef {Object} VcsColors
+ * @property {string} [base]
+ * @property {string} [base-lighten-5]
+ * @property {string} [base-lighten-4]
+ * @property {string} [base-lighten-3]
+ * @property {string} [base-lighten-2]
+ * @property {string} [base-lighten-1]
+ * @property {string} [base-darken-1]
+ * @property {string} [base-darken-2]
+ * @property {string} [base-darken-3]
+ * @property {string} [base-darken-4]
+ * @property {string} [primary]
+ * @property {string} [warning]
+ * @property {string} [error]
+ * @property {string} [info]
+ * @property {string} [success]
+ * @property {string} [surface-light]
+ */
+
+/**
+ * @typedef {Object} VcsVariables
+ * @property {string} [hover-opacity]
+ * @property {string} [high-emphasis-opacity]
+ * @property {string} [medium-emphasis-opacity]
+ * @property {string} [vcs-font-size]
+ * @property {string} [vcs-font-family]
+ */
+
+/**
+ * @typedef {Object} VcsTheme
+ * @property {VcsColors} [colors]
+ * @property {VcsVariables} [variables]
+ */
+
+/**
+ * @typedef {Object} VcsThemes
+ * @property {VcsTheme} [dark]
+ * @property {VcsTheme} [light]
+ */
+
+/**
+ * @param {VcsThemes} [options]
+ * @param {{ dark:string, light:string }|string} [primaryColor]
+ * @returns {VcsThemes}
+ */
+export function createVcsThemes(options, primaryColor) {
   return {
     light: {
       colors: {
@@ -27,20 +75,22 @@ export function createVcsThemes() {
         'base-darken-2': '#6B6B6B',
         'base-darken-3': '#525252',
         'base-darken-4': '#383838',
-        primary: defaultPrimaryColor.light,
+        primary:
+          primaryColor?.dark ?? primaryColor ?? defaultPrimaryColor.light,
         warning: '#FFCE00',
         error: '#AA0000',
         info: '#2196F3',
         success: '#4CAF50',
         'surface-light': '#ffffff',
+        ...options?.light?.colors,
       },
       variables: {
         'hover-opacity': 0.16,
         'high-emphasis-opacity': 1,
         'medium-emphasis-opacity': 1,
-        'vcs-item-height': '32px',
         'vcs-font-size': '13px',
         'vcs-font-family': 'Titillium Web',
+        ...options?.light?.variables,
       },
     },
     dark: {
@@ -55,23 +105,71 @@ export function createVcsThemes() {
         'base-darken-2': '#D0D0D0',
         'base-darken-3': '#EBEBEB',
         'base-darken-4': '#F8F8F8',
-        primary: defaultPrimaryColor.dark,
+        primary: primaryColor?.dark ?? primaryColor ?? defaultPrimaryColor.dark,
         warning: '#FFCE00',
         error: '#FF5252',
         info: '#2196F3',
         success: '#4CAF50',
         'surface-light': '#222222',
+        ...options?.dark?.colors,
       },
       variables: {
         'hover-opacity': 0.16,
-        'vcs-item-height': '40px',
-        'vcs-font-size': '15px',
+        'high-emphasis-opacity': 1,
+        'medium-emphasis-opacity': 1,
+        'vcs-font-size': '13px',
         'vcs-font-family': 'Titillium Web',
+        ...options?.dark?.variables,
       },
     },
   };
 }
 
+/**
+ * @param {ReturnType<typeof import("vuetify").createVuetify>} vuetify
+ * @param {VcsThemes} theme
+ */
+export function setTheme(vuetify, theme) {
+  Object.assign(vuetify.theme.themes.value.light.colors, theme?.light?.colors);
+  Object.assign(
+    vuetify.theme.themes.value.light.variables,
+    theme?.light?.variables,
+  );
+  Object.assign(vuetify.theme.themes.value.dark.colors, theme?.dark?.colors);
+  Object.assign(
+    vuetify.theme.themes.value.dark.variables,
+    theme?.dark?.variables,
+  );
+}
+
+const imageUrlSet = {
+  component: (props) =>
+    h(
+      props.tag,
+      h('img', {
+        src: props.icon,
+        alt: 'custom icon',
+        style: { width: 'auto', height: '100%' },
+      }),
+    ),
+};
+
+const svgStringSet = {
+  component: (props) => {
+    const svg = new DOMParser()
+      .parseFromString(DOMPurify.sanitize(props.icon), 'image/svg+xml')
+      .querySelector('svg');
+    svg?.classList.add('v-icon__svg');
+    return h(props.tag, {
+      innerHTML: svg?.outerHTML,
+    });
+  },
+};
+
+const svgPathDataSet = {
+  component: VSvgIcon,
+};
+
 /**
  * @param {import("vue-i18n").I18n} i18n
  * @returns {ReturnType<typeof import("vuetify").createVuetify>}
@@ -101,9 +199,6 @@ export function createVcsVuetify(i18n) {
       VBtn: {
         ripple: false,
       },
-      VIcon: {
-        size: 16,
-      },
       VList: {
         density: 'compact',
         class: 'pa-0 vcsList',
@@ -133,6 +228,9 @@ export function createVcsVuetify(i18n) {
         density: 'compact',
         ripple: false,
       },
+      VDataTable: {
+        density: 'compact',
+      },
       VSelect: {
         density: 'compact',
       },
@@ -140,6 +238,19 @@ export function createVcsVuetify(i18n) {
         density: 'compact',
         ripple: false,
       },
+      VSwitch: {
+        density: 'compact',
+        ripple: false,
+      },
+      VColorPicker: {
+        elevation: 0,
+        tile: true,
+      },
+      VExpansionPanel: {
+        ripple: false,
+        elevation: 0,
+        tile: true,
+      },
     },
     defaultAssets: {
       font: {
@@ -151,6 +262,11 @@ export function createVcsVuetify(i18n) {
       aliases: {
         ...Icons,
       },
+      sets: {
+        imageUrl: imageUrlSet,
+        svgString: svgStringSet,
+        svgPathData: svgPathDataSet,
+      },
     },
     locale: {
       adapter: createVueI18nAdapter({ i18n, useI18n }),
@@ -194,27 +310,25 @@ export function getColorByKey(app, value, variant) {
 }
 
 /**
- * returns the itemHeight as a number
+ * returns the fontSize as a number
  * @returns {import("vue").ComputedRef<number>}
  */
-export function useItemHeight() {
+export function useFontSize() {
   const theme = useTheme();
   return computed(() => {
-    const itemHeight = theme.current.value.variables['vcs-item-height'] ?? 32;
+    const fontSize = theme.current.value.variables['vcs-font-size'] ?? 13;
     // get rid of `px`
-    return Number.parseFloat(itemHeight);
+    return Number.parseFloat(fontSize);
   });
 }
 
 /**
- * returns the fontSize as a number
+ * returns the default IconSize as a number, value is based on the fontSize
  * @returns {import("vue").ComputedRef<number>}
  */
-export function useFontSize() {
-  const theme = useTheme();
+export function useIconSize() {
+  const fontSize = useFontSize();
   return computed(() => {
-    const fontSize = theme.current.value.variables['vcs-font-size'] ?? 13;
-    // get rid of `px`
-    return Number.parseFloat(fontSize);
+    return fontSize.value * (1.2 + 0.1 / 3);
   });
 }