@vcmap/ui 6.3.11 → 7.0.0-rc.1

package/src/components/form-inputs-controls/{VcsFileInput.vue → VcsFileInput.ts.vue}

@@ -37,13 +37,14 @@
   </v-file-input>
 </template>
 
-<script>
-  import { ref } from 'vue';
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent, ref } from 'vue';
   import { VFileInput, VTooltip } from 'vuetify/components';
   import { getForwardSlots, usePadding } from '../composables.js';
 
   /**
-   * @description extends API of {@link https://vuetifyjs.com/en/api/v-file-input v-text-field}.
+   * @description extends API of {@link https://vuetifyjs.com/en/api/v-file-input v-file-input}.
    * Provides a tooltip to
    * - show error messages on focus
    * - show tooltips, if supplied, when hovered over append-icon
@@ -51,8 +52,8 @@
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the tooltip.
    * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
    */
-  export default {
-    name: 'VcsTextField',
+  export default defineComponent({
+    name: 'VcsFileInput',
     components: {
       VTooltip,
       VFileInput,
@@ -64,11 +65,11 @@
         default: undefined,
       },
       tooltipPosition: {
-        type: String,
+        type: String as PropType<'bottom' | 'left' | 'top' | 'right'>,
         default: 'right',
       },
     },
-    setup(props, { attrs, slots }) {
+    setup(_, { attrs, slots }) {
       const fileInputRef = ref();
       const errorTooltipRef = ref();
 
@@ -82,7 +83,7 @@
         errorTooltipRef,
       };
     },
-  };
+  });
 </script>
 
 <style lang="scss" scoped>

package/src/components/form-inputs-controls/VcsFileInput.ts.vue.d.ts

@@ -0,0 +1,39 @@
+import type { PropType } from 'vue';
+/**
+ * @description extends API of {@link https://vuetifyjs.com/en/api/v-file-input v-file-input}.
+ * Provides a tooltip to
+ * - show error messages on focus
+ * - show tooltips, if supplied, when hovered over append-icon
+ * When clicking esc key, previous input is restored.
+ * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the tooltip.
+ * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+}, {
+    forwardSlots: string[];
+    paddingProvided: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    fileInputRef: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+    errorTooltipRef: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+}>>, {
+    tooltip: string;
+    tooltipPosition: "top" | "bottom" | "left" | "right";
+}, {}>;

package/src/components/form-inputs-controls/{VcsLabel.vue → VcsLabel.ts.vue}

@@ -23,22 +23,23 @@
   </label>
 </template>
 
-<script>
+<script lang="ts">
   import { VTooltip } from 'vuetify/components';
-  import { computed, ref } from 'vue';
+  import type { PropType } from 'vue';
+  import { computed, defineComponent, ref } from 'vue';
   import { createEllipseTooltip, usePadding } from '../composables.js';
-  import VcsHelpTooltip from '../notification/VcsHelpTooltip.vue';
+  import VcsHelpTooltip from '../notification/VcsHelpTooltip.ts.vue';
 
   /**
    * @description Stylized wrapper around {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label |label label}.
    * Pass the label text as innerHtml.
-   * @vue-prop {string} htmlFor - an id reference the label is meant for.
-   * @vue-prop {boolean} [required=false] - Marks an input field as required by adding an asterisk after the label.
-   * @vue-prop {boolean} [disabled=false] - Marks an input field as disabled by adding transparency to the label.
-   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the tooltip.
-   * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
+   * @vue-prop htmlFor - an id reference the label is meant for.
+   * @vue-prop [required=false] - Marks an input field as required by adding an asterisk after the label.
+   * @vue-prop [disabled=false] - Marks an input field as disabled by adding transparency to the label.
+   * @vue-prop [tooltipPosition='right'] - Position of the tooltip.
+   * @vue-prop tooltip - Optional tooltip which will be shown on hover when no error message is shown
    */
-  export default {
+  export default defineComponent({
     name: 'VcsLabel',
     components: {
       VcsHelpTooltip,
@@ -62,7 +63,7 @@
         default: undefined,
       },
       tooltipPosition: {
-        type: String,
+        type: String as PropType<'bottom' | 'left' | 'top' | 'right'>,
         default: 'right',
       },
       helpText: {
@@ -74,9 +75,7 @@
       const paddingProvided = usePadding(attrs);
       const labelTextRef = ref();
       const labelTooltip = createEllipseTooltip(
-        computed(() => {
-          return labelTextRef.value;
-        }),
+        computed(() => labelTextRef.value),
         computed(() => props.tooltip),
         computed(() => labelTextRef.value?.textContent),
       );
@@ -86,8 +85,9 @@
         labelTextRef,
       };
     },
-  };
+  });
 </script>
+
 <style lang="scss" scoped>
   .ellipsis-text {
     flex: 1;

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

@@ -0,0 +1,74 @@
+import type { PropType } from 'vue';
+/**
+ * @description Stylized wrapper around {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label |label label}.
+ * Pass the label text as innerHtml.
+ * @vue-prop htmlFor - an id reference the label is meant for.
+ * @vue-prop [required=false] - Marks an input field as required by adding an asterisk after the label.
+ * @vue-prop [disabled=false] - Marks an input field as disabled by adding transparency to the label.
+ * @vue-prop [tooltipPosition='right'] - Position of the tooltip.
+ * @vue-prop tooltip - Optional tooltip which will be shown on hover when no error message is shown
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    htmlFor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+    helpText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}, {
+    paddingProvided: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    labelTooltip: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<string>;
+    labelTextRef: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    htmlFor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+    helpText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>>, {
+    disabled: boolean;
+    required: boolean;
+    tooltip: string;
+    tooltipPosition: "top" | "bottom" | "left" | "right";
+    htmlFor: string;
+    helpText: string;
+}, {}>;

package/src/components/form-inputs-controls/{VcsLabeledSlider.vue → VcsLabeledSlider.ts.vue}

@@ -8,7 +8,7 @@
           :help-text="tooltip"
           class="pt-1 gc-2"
         >
-          {{ $t(label) }}
+          {{ $st(label) }}
         </VcsLabel>
       </v-col>
       <v-col :cols="textInputCols">
@@ -37,11 +37,12 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
   import { VCol, VRow } from 'vuetify/components';
-  import VcsTextField from './VcsTextField.vue';
-  import VcsLabel from './VcsLabel.vue';
-  import VcsSlider from './VcsSlider.vue';
+  import { defineComponent } from 'vue';
+  import VcsTextField from './VcsTextField.ts.vue';
+  import VcsLabel from './VcsLabel.ts.vue';
+  import VcsSlider from './VcsSlider.ts.vue';
   import { useProxiedAtomicModel } from '../modelHelper.js';
   import { useComponentId } from '../composables.js';
 
@@ -54,7 +55,7 @@
    * @vue-prop {number | string | boolean} [textInputCols=6] - The number of columns the text input should take (out of 12).
    * All other props will be forwarded to the slider and inputfield (if allowTextInput is true). E.g. min, max, step, disabled and unit can be provided to the component.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsLabeledSlider',
     components: {
       VCol,
@@ -75,9 +76,9 @@
       const cid = useComponentId();
       const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
 
-      function getVisibleValue(value) {
-        if (Number.isFinite(value)) {
-          const unitText = attrs.unit ? ` ${attrs.unit}` : '';
+      function getVisibleValue(value: number | string): string {
+        if (Number.isFinite(Number(value))) {
+          const unitText = attrs.unit ? ` ${attrs.unit as string}` : '';
           return `${value}${unitText}`;
         }
         return '';
@@ -89,7 +90,7 @@
         getVisibleValue,
       };
     },
-  };
+  });
 </script>
 
 <style lang="scss" scoped>

package/src/components/form-inputs-controls/VcsLabeledSlider.ts.vue.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @description stylized component, rendering a row with a label and an inputfield, and another with a slider.
+ * @vue-prop {number} [modelValue=0] - The value modeled by the slider and inputfield.
+ * @vue-prop {string} label - The title of the value to be modeled. Will be translated.
+ * @vue-prop {string} [tooltip] - An optional tooltip for the label.
+ * @vue-prop {boolean} [allowTextInput=false] - Whether to allow the value to be manually set in an inputfield.
+ * @vue-prop {number | string | boolean} [textInputCols=6] - The number of columns the text input should take (out of 12).
+ * All other props will be forwarded to the slider and inputfield (if allowTextInput is true). E.g. min, max, step, disabled and unit can be provided to the component.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    allowTextInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    textInputCols: {
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}, {
+    cid: string;
+    localValue: import("vue", { with: { "resolution-mode": "import" } }).WritableComputedRef<string | number>;
+    getVisibleValue: (value: number | string) => string;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    allowTextInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    textInputCols: {
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string | number;
+    tooltip: string;
+    allowTextInput: boolean;
+    textInputCols: string | number | boolean;
+}, {}>;

package/src/components/form-inputs-controls/{VcsRadio.vue → VcsRadio.ts.vue}

@@ -11,9 +11,24 @@
       v-for="(item, idx) in items"
       :id="`${cid}-${idx}`"
       :key="`${cid}-${idx}`"
-      :value="item[itemValue] ?? item"
-      :disabled="$attrs.disabled ?? item.disabled ?? false"
-      :color="item?.color ?? undefined"
+      :value="
+        typeof item === 'object'
+          ? ((item as Record<string, unknown>)[itemValue] ?? item)
+          : item
+      "
+      :disabled="
+        ($attrs.disabled as boolean | undefined) ??
+        (typeof item === 'object'
+          ? (((item as Record<string, unknown>).disabled as
+              | boolean
+              | undefined) ?? false)
+          : false)
+      "
+      :color="
+        typeof item === 'object'
+          ? ((item?.color as string | undefined) ?? undefined)
+          : undefined
+      "
       :error="!!errorTooltip"
       class="pa-0"
       :class="{
@@ -24,7 +39,7 @@
       <template #label>
         <slot name="label" :item="item" :error="!!errorTooltip">
           <span :html-for="`${cid}-${idx}`">
-            {{ $st(item.label ?? item) }}
+            {{ $st(getItemLabel(item)) }}
           </span>
         </slot>
       </template>
@@ -48,18 +63,21 @@
     ></v-tooltip>
   </v-radio-group>
 </template>
-<script>
-  import { ref } from 'vue';
+
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent, ref } from 'vue';
   import { VRadio, VRadioGroup, VTooltip } from 'vuetify/components';
   import { useComponentId, usePadding } from '../composables.js';
 
-  /**
-   * @typedef {Object} VcsRadioItem
-   * @property {string} label
-   * @property {string} [color='secondary']
-   * @property {any} value
-   * @property {boolean} [disabled=false]
-   */
+  export type VcsRadioItem = {
+    label: string;
+    /** @default 'secondary' */
+    color?: string;
+    value: string | number | boolean;
+    /** @default false */
+    disabled?: boolean;
+  };
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-radio-group/ |vuetify v-radio-group} using
@@ -72,7 +90,7 @@
    * @vue-data {slot} [#top-label] - A slot to render a label on top of the radio button, e.g. using <img> or <v-icon>. Passes item and error as props
    * @vue-data {slot} [#label] - A slot to render a label. Passes item and error as props.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsRadio',
     components: {
       VTooltip,
@@ -82,7 +100,13 @@
     inheritAttrs: false,
     props: {
       items: {
-        type: Array,
+        type: Array as PropType<
+          Array<
+            | string
+            | VcsRadioItem
+            | Record<string, string | number | boolean | undefined>
+          >
+        >,
         required: true,
       },
       itemValue: {
@@ -94,7 +118,7 @@
         default: undefined,
       },
       tooltipPosition: {
-        type: String,
+        type: String as PropType<'bottom' | 'left' | 'top' | 'right'>,
         default: 'right',
       },
       labelPosition: {
@@ -113,10 +137,22 @@
         radioGroup,
         errorTooltip,
         cid,
+        getItemLabel(
+          item: Record<string, unknown> | string | number | boolean,
+        ): string {
+          if (typeof item === 'object' && item !== null) {
+            return (
+              (item.label as string | undefined) ??
+              String(item[props.itemValue])
+            );
+          }
+          return String(item);
+        },
       };
     },
-  };
+  });
 </script>
+
 <style lang="scss" scoped>
   .v-input--density-compact :deep(.v-selection-control) {
     --v-selection-control-size: calc(var(--v-vcs-font-size) * 2 - 2px);

package/src/components/form-inputs-controls/VcsRadio.ts.vue.d.ts

@@ -0,0 +1,76 @@
+import type { PropType } from 'vue';
+export type VcsRadioItem = {
+    label: string;
+    /** @default 'secondary' */
+    color?: string;
+    value: string | number | boolean;
+    /** @default false */
+    disabled?: boolean;
+};
+/**
+ * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-radio-group/ |vuetify v-radio-group} using
+ * {@link https://vuetifyjs.com/en/api/v-radio/ |vuetify v-radio}.
+ * Provides VTooltip to show passed messages and error messages.
+ * @vue-prop {Array<string|VcsRadioItem>} items - A list of options. If strings are provided, the string is used as label and value.
+ * @vue-prop {string} [item-value='value'] - The value used when the component is selected in a group.
+ * @vue-prop {string} [tooltip] - A message to be displayed when there is no error.
+ * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip, see {@link https://vuetifyjs.com/en/api/v-tooltip/#props-location | vuetify tooltip}.
+ * @vue-data {slot} [#top-label] - A slot to render a label on top of the radio button, e.g. using <img> or <v-icon>. Passes item and error as props
+ * @vue-data {slot} [#label] - A slot to render a label. Passes item and error as props.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    items: {
+        type: PropType<Array<string | VcsRadioItem | Record<string, string | number | boolean | undefined>>>;
+        required: true;
+    };
+    itemValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+    labelPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    paddingProvided: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    radioGroup: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+    errorTooltip: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+    cid: string;
+    getItemLabel(item: Record<string, unknown> | string | number | boolean): string;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    items: {
+        type: PropType<Array<string | VcsRadioItem | Record<string, string | number | boolean | undefined>>>;
+        required: true;
+    };
+    itemValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+    labelPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    tooltip: string;
+    tooltipPosition: "top" | "bottom" | "left" | "right";
+    itemValue: string;
+    labelPosition: string;
+}, {}>;

package/src/components/form-inputs-controls/{VcsSelect.vue → VcsSelect.ts.vue}

@@ -62,11 +62,13 @@
     </template>
   </v-select>
 </template>
-<script>
+
+<script lang="ts">
   import { VSelect, VTooltip, VListItem } from 'vuetify/components';
-  import { computed, ref } from 'vue';
+  import type { PropType } from 'vue';
+  import { computed, defineComponent, ref } from 'vue';
   import { getForwardSlots, usePadding } from '../composables.js';
-  import VcsCheckbox from './VcsCheckbox.vue';
+  import VcsCheckbox from './VcsCheckbox.ts.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
 
   /**
@@ -78,7 +80,7 @@
    * @vue-prop {Function} itemText - A function that is applied to each item and should return the item's text value.
    * @vue-prop {boolean} multiple - allows selecting several values instead of just one
    */
-  export default {
+  export default defineComponent({
     name: 'VcsSelect',
     components: {
       VSelect,
@@ -92,8 +94,10 @@
         default: false,
       },
       modelValue: {
-        type: [Array, String, Boolean, Number, Object],
-        default(rawProps) {
+        type: [Array, String, Boolean, Number, Object] as PropType<
+          string | boolean | number | object
+        >,
+        default(rawProps: { multiple?: boolean }) {
           if (rawProps.multiple) {
             return [];
           }
@@ -105,7 +109,7 @@
         default: undefined,
       },
       tooltipPosition: {
-        type: String,
+        type: String as PropType<'bottom' | 'left' | 'top' | 'right'>,
         default: 'right',
       },
       itemText: {
@@ -126,16 +130,14 @@
         return 0;
       });
 
-      function getTitle(item) {
+      function getTitle(item: string | boolean | number | object): string {
         if (props.itemText) {
           return props.itemText(item);
         } else {
-          return item?.title ?? item;
+          return (item as { title?: string })?.title ?? (item as string);
         }
       }
-      const isMultiple = computed(() => {
-        return props.multiple;
-      });
+      const isMultiple = computed(() => props.multiple);
       const paddingProvided = usePadding(attrs);
       const forwardSlots = getForwardSlots(slots, ['append-inner', 'message']);
 
@@ -150,8 +152,9 @@
         getTitle,
       };
     },
-  };
+  });
 </script>
+
 <style lang="scss" scoped>
   :deep(.v-field) {
     --v-field-padding-start: 4px;