@vcmap/ui 5.3.3 → 6.0.0-rc.2

package/src/components/buttons/VcsButton.vue.d.ts

@@ -3,14 +3,14 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    color: {
-        type: StringConstructor;
-        default: undefined;
-    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
     hasUpdate: {
         type: BooleanConstructor;
         default: boolean;
@@ -27,30 +27,25 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    tooltipProps: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    customClasses: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-}, {}, {}, {
-    appliedColor(): any;
-    hasDefaultSlot(): boolean;
-}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    forwardSlots: import("vue").ComputedRef<string[]>;
+    hasDefaultSlot: import("vue").ComputedRef<boolean>;
+    appliedColor: import("vue").ComputedRef<string | null>;
+    iconSize: import("vue").ComputedRef<number>;
+    minHeight: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     active: {
         type: BooleanConstructor;
         default: boolean;
     };
-    color: {
-        type: StringConstructor;
-        default: undefined;
-    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
     hasUpdate: {
         type: BooleanConstructor;
         default: boolean;
@@ -67,23 +62,13 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    tooltipProps: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    customClasses: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
 }>>, {
-    tooltip: string;
-    tooltipPosition: string;
-    disabled: boolean;
     icon: string;
     active: boolean;
     hasUpdate: boolean;
+    disabled: boolean;
     color: string;
-    tooltipProps: Record<string, any>;
-    customClasses: unknown[];
-}>;
+    tooltip: string;
+    tooltipPosition: string;
+}, {}>;
 export default _default;

package/src/components/buttons/VcsFormButton.vue

@@ -1,132 +1,91 @@
 <template>
-  <div class="vcs-button-wrap">
-    <v-btn
-      v-if="!tooltip"
-      :outlined="variant === 'outlined'"
-      :disabled="disabled"
-      :loading="loading"
-      :ripple="false"
-      elevation="0"
-      color="primary"
-      class="vcs-form-button"
-      :class="classes"
-      v-bind="{ ...$attrs }"
-      v-on="{ ...$listeners }"
-    >
-      <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
+  <v-btn
+    :variant="buttonVariant"
+    elevation="0"
+    color="primary"
+    :min-width="itemHeight * 1.5"
+    :height="itemHeight"
+    class="vcsFormButton"
+    :slim="false"
+    v-bind="{ ...$attrs }"
+  >
+    <template #default="scope">
+      <v-tooltip
+        activator="parent"
+        v-if="tooltip"
+        :text="$st(tooltip)"
+        :location="tooltipPosition"
+      />
+      <v-icon :size="iconSize" v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
         {{ icon }}
       </v-icon>
-      <slot />
-    </v-btn>
-    <VcsTooltip
-      v-else
-      :tooltip="tooltip"
-      :tooltip-position="tooltipPosition"
-      v-bind="{ ...tooltipProps }"
-    >
-      <template #activator="{ on, attrs }">
-        <v-btn
-          :outlined="variant === 'outlined'"
-          :disabled="disabled"
-          :loading="loading"
-          :ripple="false"
-          elevation="0"
-          color="primary"
-          class="vcs-form-button"
-          :class="classes"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="{ ...$listeners, ...on }"
-        >
-          <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
-            {{ icon }}
-          </v-icon>
-          <slot />
-        </v-btn>
-      </template>
-    </VcsTooltip>
-    <VcsBadge v-if="hasUpdate" :color="'warning'" class="position-absolute" />
-  </div>
+      <VcsBadge
+        v-if="hasUpdate"
+        :color="'bg-warning'"
+        class="position-absolute"
+      />
+      <slot name="default" v-bind="scope ?? {}" />
+    </template>
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
+    </template>
+  </v-btn>
 </template>
 
 <style lang="scss" scoped>
-  @import '../../styles/shades.scss';
-
-  .vcs-button-wrap {
-    position: relative;
-    display: inline-block;
-  }
   .badge {
     top: -3px;
     right: -3px;
   }
   .v-btn {
-    &--outlined {
-      border: thin solid currentColor;
+    &.v-btn--variant-outlined:hover {
+      border-color: rgb(var(--v-theme-primary-lighten-1));
     }
-    &--disabled {
-      // TODO text color primary
-      border-color: var(--v-primary-lighten1);
-      background-color: transparent !important;
+    &.v-btn--variant-flat:hover {
+      background-color: rgb(var(--v-theme-primary-lighten-1)) !important;
+      --v-hover-opacity: 0;
     }
-  }
-  .vcs-button-wrap {
-    .vcs-form-button {
-      min-width: 48px;
-      height: 32px;
-      font-size: 12px;
-      border: 1px solid transparent;
-
-      &--outlined {
-        border: thin solid currentColor;
-        &:hover {
-          border-color: var(--v-primary-lighten1) !important;
-        }
-        &.theme--light:hover::before {
-          opacity: 0.16;
-        }
-        &.theme--dark:hover::before {
-          opacity: 0.32;
-        }
-      }
-
-      &--filled {
-        &:hover {
-          color: map-get($shades, 'white') !important;
-          border-color: var(--v-primary-lighten1) !important;
-          background-color: var(--v-primary-lighten1) !important;
-        }
+    &.v-btn--disabled.v-btn--variant-outlined {
+      opacity: var(--v-disabled-opacity);
+      color: rgb(var(--v-theme-on-surface)) !important;
+    }
+    &.v-btn--disabled.v-btn--variant-flat {
+      opacity: var(--v-disabled-opacity);
+      background-color: rgb(var(--v-theme-base-lighten-1)) !important;
+      :deep(.v-btn__overlay) {
+        opacity: 0;
       }
     }
+    :deep(.v-btn__loader > .v-progress-circular) {
+      width: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
+      height: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
+    }
   }
 </style>
 
 <script>
-  import { VBtn, VIcon } from 'vuetify/lib';
+  import { computed } from 'vue';
+  import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
+  import { useFontSize, useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { useForwardSlots } from '../composables.js';
 
   /**
-   * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn} using {@link VcsTooltip}. Meant to be used in forms or window contents.
+   * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn}.
+   * Meant to be used in forms or window contents.
    * @vue-prop {('filled' | 'outlined')}                [variant='outlined'] - Filled or outlined representation of the button.
-   * @vue-prop {boolean}                                disabled
-   * @vue-prop {boolean}                                loading
    * @vue-prop {boolean}                                hasUpdate - Whether the button shows a badge in the top right.
    * @vue-prop {string}                                 icon - When given, will display an icon in the button. Replaces vuetify icon property.
    * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
-   * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to VcsTooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
-   * @vue-prop {string[]}                               [customClasses] - CSS classes to customize style
-   * @vue-computed {Object<string, string>}             classes - css classes applied to button, depending on variant
-   * @vue-computed {boolean}                            hasDefaultSlot
-   * @vue-event {MouseEvent}                            click - Emits click event when the button is clicked.
    */
   export default {
     name: 'VcsFormButton',
     components: {
-      VcsTooltip,
       VcsBadge,
       VBtn,
       VIcon,
+      VTooltip,
     },
     inheritAttrs: false,
     props: {
@@ -135,14 +94,6 @@
         default: 'outlined',
         validator: (value) => ['outlined', 'filled'].includes(value),
       },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      loading: {
-        type: Boolean,
-        default: false,
-      },
       hasUpdate: {
         type: Boolean,
         default: false,
@@ -159,29 +110,30 @@
         type: String,
         default: 'bottom',
       },
-      tooltipProps: {
-        type: Object,
-        default: () => ({}),
-      },
-      customClasses: {
-        type: Array,
-        default: () => [],
-      },
     },
-    computed: {
-      classes() {
-        return {
-          ...this.customClasses.reduce(
-            (acc, cur) => ({ ...acc, [cur]: true }),
-            {},
-          ),
-          'vcs-form-button--outlined': this.variant === 'outlined',
-          'vcs-form-button--filled': this.variant === 'filled',
-        };
-      },
-      hasDefaultSlot() {
-        return !!this.$slots?.default?.[0]?.text?.trim();
-      },
+    setup(props, { slots }) {
+      const itemHeight = useItemHeight();
+      const buttonVariant = computed(() => {
+        if (props.variant === 'filled') {
+          return 'flat';
+        }
+        return props.variant;
+      });
+      const hasDefaultSlot = computed(() => {
+        return !!slots?.default;
+      });
+      const forwardSlots = useForwardSlots(slots, ['default']);
+      const fontSize = useFontSize();
+      const iconSize = computed(() => {
+        return fontSize.value * (1.2 + 0.1 / 3);
+      });
+      return {
+        forwardSlots,
+        buttonVariant,
+        hasDefaultSlot,
+        itemHeight,
+        iconSize,
+      };
     },
   };
 </script>

package/src/components/buttons/VcsFormButton.vue.d.ts

@@ -4,14 +4,6 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: unknown) => boolean;
     };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     hasUpdate: {
         type: BooleanConstructor;
         default: boolean;
@@ -28,31 +20,18 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    tooltipProps: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    customClasses: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-}, {}, {}, {
-    classes(): any;
-    hasDefaultSlot(): boolean;
-}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    forwardSlots: import("vue").ComputedRef<string[]>;
+    buttonVariant: import("vue").ComputedRef<string>;
+    hasDefaultSlot: import("vue").ComputedRef<boolean>;
+    itemHeight: import("vue").ComputedRef<number>;
+    iconSize: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     variant: {
         type: StringConstructor;
         default: string;
         validator: (value: unknown) => boolean;
     };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     hasUpdate: {
         type: BooleanConstructor;
         default: boolean;
@@ -69,23 +48,11 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    tooltipProps: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    customClasses: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
 }>>, {
-    tooltip: string;
-    tooltipPosition: string;
-    disabled: boolean;
     icon: string;
     hasUpdate: boolean;
-    tooltipProps: Record<string, any>;
-    customClasses: unknown[];
     variant: string;
-    loading: boolean;
-}>;
+    tooltip: string;
+    tooltipPosition: string;
+}, {}>;
 export default _default;

package/src/components/buttons/VcsToolButton.vue

@@ -1,85 +1,81 @@
 <template>
-  <div class="vcs-button-wrap">
-    <v-btn
-      v-if="!tooltip"
-      :color="appliedColor"
-      :text="isTextButton"
-      class="vcs-tool-button"
-      :class="classes"
-      :ripple="{ class: 'primary--text text--darken-4' }"
-      elevation="0"
-      v-bind="{ ...$attrs }"
-      v-on="{ ...$listeners }"
-    >
-      <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
+  <v-btn
+    :color="appliedColor"
+    :variant="buttonVariant"
+    :height="itemHeight + 2"
+    :min-width="itemHeight + itemHeight / 3"
+    class="vcsToolButton"
+    :disabled="disabled"
+    :class="{
+      'vcs-background': background,
+      'vcs-active': active,
+    }"
+    elevation="0"
+    v-bind="{ ...$attrs }"
+  >
+    <template #default="scope">
+      <v-tooltip
+        activator="parent"
+        v-if="tooltip"
+        :text="$st(tooltip)"
+        :location="tooltipPosition"
+      />
+      <v-icon :size="iconSize" v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
         {{ icon }}
       </v-icon>
-      <slot />
-    </v-btn>
-    <VcsTooltip
-      v-else
-      :tooltip="tooltip"
-      :tooltip-position="tooltipPosition"
-      v-bind="{ ...tooltipProps }"
-    >
-      <template #activator="{ on, attrs }">
-        <v-btn
-          :color="appliedColor"
-          :text="isTextButton"
-          class="vcs-tool-button"
-          :class="classes"
-          :ripple="{ class: 'primary--text text--darken-4' }"
-          elevation="0"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="{ ...$listeners, ...on }"
-        >
-          <v-icon v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
-            {{ icon }}
-          </v-icon>
-          <slot />
-        </v-btn>
-      </template>
-    </VcsTooltip>
-    <VcsBadge v-if="hasUpdate" :color="'warning'" class="position-absolute" />
-  </div>
+      <VcsBadge
+        v-if="hasUpdate"
+        :color="'bg-warning'"
+        class="position-absolute"
+      />
+      <slot name="default" v-bind="scope ?? {}" />
+    </template>
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
+    </template>
+  </v-btn>
 </template>
 
 <style lang="scss" scoped>
-  .vcs-button-wrap {
-    position: relative;
-    display: inline-block;
-  }
   .badge {
     top: -3px;
     right: -3px;
   }
+  .vcs-active.vcs-background:not(.v-btn--disabled) :deep(.badge) {
+    top: -5px;
+    right: -5px;
+  }
   .v-btn {
-    &.vcs-tool-button {
-      min-width: 42px;
-      height: 34px;
-      padding: 0;
-      position: relative;
-
-      &.vcs-tool-button--active-background {
-        border: 2px solid var(--v-primary-base);
-        background-color: var(--v-base-lighten2) !important;
-      }
+    padding-left: 11px;
+    padding-right: 11px;
 
-      &.v-btn--disabled {
-        background-color: transparent !important;
-      }
+    &.vcs-active.vcs-background:not(.v-btn--disabled) {
+      padding-left: 9px;
+      padding-right: 9px;
+      border: 2px solid rgb(var(--v-theme-primary));
+      background-color: rgb(var(--v-theme-base-lighten-2)) !important;
+    }
+    &.v-btn--disabled.v-btn--variant-text {
+      opacity: var(--v-disabled-opacity);
+    }
+    :deep(.v-btn__loader > .v-progress-circular) {
+      width: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
+      height: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3)) !important;
     }
   }
 </style>
 
 <script>
-  import { VBtn, VIcon } from 'vuetify/lib';
+  import { computed } from 'vue';
+  import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
+  import { useForwardSlots } from '../composables.js';
+  import { useItemHeight, useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn} using {@link VcsTooltip}. Used for tool buttons in the Navbar.
    * @vue-prop {boolean}                                active - Whether button has background color. Applies vuetify primary color if color property is not set.
+   * @vue-prop {boolean}                                disabled - Whether button is disabled.
    * @vue-prop {string}                                 color - Passes property to v-btn in case prop active is true.
    * @vue-prop {boolean}                                background - When applied with active the button shows an active-background state implying that a tool is active, but running in background, e.g. windowComponent closed.
    * @vue-prop {boolean}                                hasUpdate - Whether the button shows a badge in the top right.
@@ -87,20 +83,16 @@
    * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
    * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to VcsTooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
-   * @vue-prop {string[]}                               [customClasses] - CSS classes to customize style
    * @vue-computed {string}                             appliedColor - color applied to button, depending on size and state
-   * @vue-computed {Object<string, string>}             classes - css classes applied to button, depending on size and state
    * @vue-computed {boolean}                            hasDefaultSlot
-   * @vue-computed {boolean}                            isTextButton - button is text
-   * @vue-event {MouseEvent}                            click - Emits click event when the button is clicked.
    */
   export default {
     name: 'VcsToolButton',
     components: {
-      VcsTooltip,
       VcsBadge,
       VBtn,
       VIcon,
+      VTooltip,
     },
     inheritAttrs: false,
     props: {
@@ -108,6 +100,10 @@
         type: Boolean,
         default: false,
       },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
       color: {
         type: String,
         default: undefined,
@@ -132,39 +128,40 @@
         type: String,
         default: 'bottom',
       },
-      tooltipProps: {
-        type: Object,
-        default: () => ({}),
-      },
-      customClasses: {
-        type: Array,
-        default: () => [],
-      },
     },
-    computed: {
-      appliedColor() {
-        if (this.active) {
-          return this.color ? this.color : 'primary';
+    setup(props, { slots }) {
+      const appliedColor = computed(() => {
+        if (props.active && !props.disabled) {
+          return props.color ? props.color : 'primary';
         } else {
           return null;
         }
-      },
-      classes() {
-        return {
-          ...this.customClasses.reduce(
-            (acc, cur) => ({ ...acc, [cur]: true }),
-            {},
-          ),
-          'vcs-tool-button--active-background':
-            this.active && this.background && !this.$attrs.disabled,
-        };
-      },
-      hasDefaultSlot() {
-        return !!this.$slots?.default?.[0]?.text?.trim();
-      },
-      isTextButton() {
-        return !this.active ? true : null;
-      },
+      });
+      const hasDefaultSlot = computed(() => {
+        return !!slots?.default;
+      });
+      const forwardSlots = useForwardSlots(slots, ['default']);
+      const buttonVariant = computed(() => {
+        if (props.active && !props.disabled) {
+          return 'flat';
+        }
+        return 'text';
+      });
+
+      const fontSize = useFontSize();
+      const itemHeight = useItemHeight();
+      const iconSize = computed(() => {
+        return fontSize.value * 1.5;
+      });
+
+      return {
+        itemHeight,
+        iconSize,
+        appliedColor,
+        forwardSlots,
+        buttonVariant,
+        hasDefaultSlot,
+      };
     },
   };
 </script>