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

package/src/components/lists/VcsListItem.vue

@@ -6,6 +6,7 @@
     VTooltip,
   } from 'vuetify/components';
   import { computed, ref } from 'vue';
+  import { is } from '@vcsuite/check';
   import VcsBadge from '../notification/VcsBadge.vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
@@ -27,17 +28,35 @@
     },
   });
 
-  const emits = defineEmits(['item-renamed']);
+  const rename = ref(false);
+  const renameAction = computed(() => {
+    if (props.item.renamable) {
+      return {
+        name: 'list.renameItem',
+        ...(is(props.item.renamable, Object) ? props.item.renamable : {}),
+        callback() {
+          rename.value = true;
+        },
+      };
+    }
+    return undefined;
+  });
 
   function renameOff() {
-    // eslint-disable-next-line vue/no-mutating-props
-    props.item.rename = false;
+    rename.value = false;
   }
 
+  const actions = computed(() => {
+    if (renameAction.value) {
+      return [...(props.item?.actions || []), renameAction.value];
+    }
+    return [...(props.item?.actions || [])];
+  });
+
   const title = ref();
   const tooltip = createEllipseTooltip(
     computed(() => {
-      if (props.item?.rename) {
+      if (rename.value) {
         return undefined;
       }
       return title.value?.$el;
@@ -46,9 +65,8 @@
     computed(() => props.item?.title),
   );
 
-  function rename(item, newTitle) {
+  function renameItem(item, newTitle) {
     if (newTitle) {
-      emits('item-renamed', { item, newTitle });
       item.titleChanged?.(newTitle);
     }
   }
@@ -61,15 +79,17 @@
         {{ item.icon }}
       </v-icon>
     </template>
-    <template #default>
-      <v-list-item-title ref="title">
-        <slot name="prepend-title" :item="item" />
-        <slot name="title" :item="item">
+    <template #title>
+      <slot name="title" v-bind="{ item, dragging, tooltip }">
+        <v-list-item-title
+          ref="title"
+          :class="{ 'vcs-list-item__rename': rename }"
+        >
           <vcs-text-field
-            v-if="item.rename"
+            v-if="rename"
             :model-value="item.title"
             autofocus
-            @update:model-value="(value) => rename(item, value)"
+            @update:model-value="(value) => renameItem(item, value)"
             @click.stop
             @keydown.enter="renameOff"
             @blur="renameOff"
@@ -79,18 +99,23 @@
           <template v-else>
             {{ $st(item.title) }}
           </template>
-        </slot>
-        <slot name="append-title" :item="item" class="ml-auto" />
-        <v-tooltip v-if="dragging === false && tooltip" activator="parent">
-          {{ $st(tooltip) }}
-        </v-tooltip>
-      </v-list-item-title>
+          <v-tooltip v-if="dragging === false && tooltip" activator="parent">
+            {{ $st(tooltip) }}
+          </v-tooltip>
+        </v-list-item-title>
+      </slot>
+    </template>
+    <template #subtitle>
+      <slot name="subtitle" v-bind="{ item }" />
+    </template>
+    <template #default="scope">
+      <slot name="default" v-bind="{ ...scope, item, dragging, tooltip }" />
     </template>
     <template #append>
       <vcs-badge v-if="item.hasUpdate" class="mr-1" />
       <vcs-action-button-list
-        v-if="item.actions?.length > 0"
-        :actions="item.actions"
+        v-if="actions.length > 0"
+        :actions="actions"
         :disabled="item.disabled"
         :block-overflow="true"
         :overflow-count="actionButtonListOverflowCount"
@@ -102,7 +127,9 @@
 
 <style lang="scss" scoped>
   .v-list-item {
-    padding: 4px 8px 4px 16px;
+    padding: 4px 8px 4px 8px;
+    padding-inline-end: 8px !important;
+    padding-inline-start: 16px !important;
     &.border-bottom {
       border-bottom: solid;
       border-bottom-color: rgb(var(--v-theme-base-lighten-2));
@@ -150,5 +177,8 @@
     :deep(.v-list-item__overlay) {
       background-color: transparent;
     }
+    :deep(.vcs-list-item__rename) {
+      color: rgb(var(--v-theme-on-surface));
+    }
   }
 </style>

package/src/components/lists/VcsListItem.vue.d.ts

@@ -1,18 +1,24 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
-    $emit: (event: "item-renamed", ...args: any[]) => void;
     $props: {
         readonly [x: string]: any;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
-    "prepend-title"?(_: {
+    title?(_: {
         item: any;
+        dragging: any;
+        tooltip: string;
     }): any;
-    title?(_: {
+    subtitle?(_: {
         item: any;
     }): any;
-    "append-title"?(_: {
+    default?(_: {
         item: any;
-        class: string;
+        dragging: any;
+        tooltip: string;
+        isActive: boolean;
+        isSelected: boolean;
+        isIndeterminate: boolean;
+        select: (value: boolean) => void;
     }): any;
 }>;
 export default _default;

package/src/components/section/VcsExpansionPanel.vue

@@ -0,0 +1,101 @@
+<script setup>
+  import {
+    VExpansionPanel,
+    VExpansionPanelText,
+    VExpansionPanelTitle,
+    VIcon,
+    VTooltip,
+    VListItemTitle,
+  } from 'vuetify/components';
+  import { computed, ref, useSlots } from 'vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import { createEllipseTooltip } from '../composables.js';
+
+  const props = defineProps({
+    heading: {
+      type: String,
+      default: undefined,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    headerActions: {
+      type: Array,
+      default: () => [],
+    },
+    actionButtonListOverflowCount: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+  });
+
+  const slots = useSlots();
+
+  const panelHeader = ref(null);
+  const panelHeaderTooltip = createEllipseTooltip(
+    computed(() => panelHeader.value?.$el),
+    computed(() => undefined),
+    computed(() => props.heading),
+  );
+</script>
+<template>
+  <v-expansion-panel :disabled="disabled" v-bind="$attrs">
+    <v-expansion-panel-title static class="px-2">
+      <template #default="{ expanded }">
+        <v-list-item-title ref="panelHeader">
+          <v-icon v-if="!expanded" class="pr-1"> mdi-chevron-down </v-icon>
+          <v-icon v-if="expanded" class="pr-1"> mdi-chevron-right </v-icon>
+          <span
+            :class="{
+              'vcs-panel-title__append':
+                !!slots['header-append'] && !!panelHeaderTooltip,
+            }"
+          >
+            {{ $st(heading) }}
+          </span>
+          <v-tooltip
+            v-if="panelHeaderTooltip"
+            activator=".v-expansion-panel-title"
+          >
+            {{ $st(panelHeaderTooltip) }}
+          </v-tooltip>
+          <slot name="header-append" />
+        </v-list-item-title>
+      </template>
+      <template #actions>
+        <VcsActionButtonList
+          v-if="headerActions?.length > 0"
+          :actions="headerActions"
+          :overflow-count="actionButtonListOverflowCount"
+        />
+      </template>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
+      <slot name="default" />
+    </v-expansion-panel-text>
+  </v-expansion-panel>
+</template>
+
+<style scoped lang="scss">
+  :deep(.v-expansion-panel-title) {
+    font-size: var(--v-vcs-font-size);
+    min-height: unset;
+    height: var(--v-vcs-item-height);
+    line-height: 1.2;
+    padding: 0 8px;
+  }
+
+  .vcs-panel-title__append {
+    width: 90%;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+  }
+
+  :deep(.v-expansion-panel-text__wrapper) {
+    padding: 0 0;
+  }
+</style>

package/src/components/section/VcsExpansionPanel.vue.d.ts

@@ -0,0 +1,19 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
+    headerActions: unknown[];
+    disabled: boolean;
+    heading?: string | undefined;
+    actionButtonListOverflowCount?: number | undefined;
+    $props: {
+        readonly headerActions?: unknown[] | undefined;
+        readonly disabled?: boolean | undefined;
+        readonly heading?: string | undefined;
+        readonly actionButtonListOverflowCount?: number | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    "header-append"?(_: {}): any;
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});

package/src/components/style/MenuWrapper.vue

@@ -3,7 +3,7 @@
     <div class="d-flex align-center py-1">
       <VcsCheckbox
         :model-value="!!modelValue"
-        @change="handleCheckbox"
+        @update:modelValue="handleCheckbox"
         :disabled="disabled"
       />
       <v-menu
@@ -11,24 +11,19 @@
         persistent
         v-model="isMenuOpen"
         :absolute="true"
-        :disabled="!value || disabled"
-        min-width="300"
-        max-width="300"
+        :disabled="!modelValue || disabled"
+        width="300"
       >
         <template #activator="{ props }">
-          <VcsTooltip :tooltip="name">
-            <template #activator>
-              <v-card
-                rounded
-                height="24px"
-                width="32px"
-                v-bind="props"
-                class="tiled-background"
-              >
-                <slot name="preview" />
-              </v-card>
-            </template>
-          </VcsTooltip>
+          <v-card
+            rounded
+            height="24px"
+            width="32px"
+            v-bind="props"
+            class="tiled-background"
+          >
+            <slot name="preview" />
+          </v-card>
         </template>
         <VcsFormSection
           :heading="name"
@@ -60,21 +55,22 @@
 </template>
 
 <script>
-  import { ref } from 'vue';
+  import { ref, toRaw } from 'vue';
   import { VSheet, VMenu, VCard } from 'vuetify/components';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
   import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
 
   /**
    * @description A wrapper for style components, that provides:
    * - a 32 x 24 px preview
-   * - a checkbox that emits null when unchecked and the value of the valueDefault prop when checked again. If the vauleDefault is undefined or null, the valueFallback will be emitted.
+   * - a checkbox that emits null when unchecked and the value of the valueDefault prop when checked again.
+   *   If the valueDefault is undefined or null, the valueFallback will be emitted.
    * - a menu that pops up when clicking the preview. It has also a reset button that emits the value of the valueDefault prop when clicked
-   * @vue-prop {Object} [value] - Style options that are modelled by the checkbox.
+   * @vue-prop {Object} [modelValue] - Style options that are modelled by the checkbox.
    * @vue-prop {string} name - The name that is displayed in the header of the menu and in the tooltip of the preview.
    * @vue-prop {Object} [valueDefault] - The default Options, that are applied when clicking reset or setting the checkbox from null to true.
    * @vue-prop {Object} valueFallback - The fallback Options, in case the valueDefault is null or undefined. These are applied when the checkbox is checked again and the default value is null. The fallback value must not be null or undefined.
+   * @vue-prop {boolean} [disabled=false] - Disable the input
    */
   export default {
     name: 'MenuWrapper',
@@ -83,13 +79,11 @@
       VMenu,
       VCard,
       VcsFormSection,
-      VcsTooltip,
       VcsCheckbox,
     },
     props: {
       modelValue: {
         default: undefined,
-        required: false,
         type: Object,
       },
       valueDefault: {
@@ -109,13 +103,14 @@
         type: Boolean,
       },
     },
+    emits: ['update:modelValue'],
     setup(props, { emit }) {
       const isMenuOpen = ref(false);
 
       return {
         isMenuOpen,
         reset() {
-          emit('update:modelValue', props.valueDefault);
+          emit('update:modelValue', structuredClone(toRaw(props.valueDefault)));
         },
         close() {
           isMenuOpen.value = false;
@@ -123,7 +118,10 @@
         handleCheckbox(value) {
           emit(
             'update:modelValue',
-            value ? props.valueDefault || props.valueFallback : null,
+            value
+              ? structuredClone(toRaw(props.valueDefault)) ||
+                  structuredClone(toRaw(props.valueFallback))
+              : null,
           );
         },
       };

package/src/components/style/MenuWrapper.vue.d.ts

@@ -1,7 +1,6 @@
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         default: undefined;
-        required: false;
         type: ObjectConstructor;
     };
     valueDefault: {
@@ -25,10 +24,9 @@ declare const _default: import("vue").DefineComponent<{
     reset(): void;
     close(): void;
     handleCheckbox(value: any): void;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: undefined;
-        required: false;
         type: ObjectConstructor;
     };
     valueDefault: {
@@ -47,7 +45,9 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}>>, {
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     disabled: boolean;
     modelValue: Record<string, any>;
     valueDefault: Record<string, any>;

package/src/components/style/VcsFillMenu.vue

@@ -1,14 +1,14 @@
 <template>
   <MenuWrapper
-    v-bind="{ ...$attrs, modelValue, valueDefault, disabled }"
     :value-fallback="{ color: [255, 255, 255, 1] }"
     name="components.style.fill"
+    v-bind="{ ...$attrs, ...$props }"
   >
     <template #preview>
       <v-sheet :color="rgbaString" width="100%" height="100%" />
     </template>
     <template #content>
-      <VcsFillSelector :model-value="modelValue" v-bind="$attrs" />
+      <VcsFillSelector v-bind="{ ...$attrs, ...$props }" />
     </template>
   </MenuWrapper>
 </template>
@@ -16,16 +16,16 @@
 <script>
   import { computed } from 'vue';
   import { VSheet } from 'vuetify/components';
+  import { useProxiedAtomicModel } from '../modelHelper.js';
   import VcsFillSelector from './VcsFillSelector.vue';
   import MenuWrapper from './MenuWrapper.vue';
   import { useColorObject, rgbaObjectToString } from './composables.js';
 
   /**
    * @description A wrapper for the VcsFillSelector, that has a small color preview and a menu that pops up when clicking the preview, containing the fill selector.
-   * When clicking the reset button, the valueDefault is emitted, when unchecking the checkbox in front of the preview, null is emitted. If it is checked again, valueDefault is emitted. If the valueDefault is undefined or null, { color: [255, 255, 255, 1] } is emitted.
-   * @vue-prop {import("ol/style/Fill").Options} [value] - The Fill Options
-   * @vue-prop {import("ol/style/Fill").Options} [valueDefault] - The default Fill Options
-   * @vue-prop {boolean} [disabled=false] - Disable the input
+   * When clicking the reset button, the valueDefault is emitted, when unchecking the checkbox in front of the preview, null is emitted.
+   * If it is checked again, valueDefault is emitted. If the valueDefault is undefined or null, { color: [255, 255, 255, 1] } is emitted.
+   * @vue-prop {import("ol/style/Fill").Options} [modelValue] - The Fill Options
    */
   export default {
     name: 'VcsFillMenu',
@@ -39,17 +39,10 @@
         type: Object,
         default: undefined,
       },
-      valueDefault: {
-        type: Object,
-        default: undefined,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
     },
-    setup(props) {
-      const rgbaObject = useColorObject(() => props.modelValue?.color);
+    setup(props, { emit }) {
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
+      const rgbaObject = useColorObject(() => localValue.value?.color);
       return {
         rgbaString: computed(() => rgbaObjectToString(rgbaObject.value)),
       };

package/src/components/style/VcsFillMenu.vue.d.ts

@@ -3,14 +3,6 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: undefined;
     };
-    valueDefault: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, {
     rgbaString: import("vue").ComputedRef<string>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -18,17 +10,7 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: undefined;
     };
-    valueDefault: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }>>, {
-    disabled: boolean;
     modelValue: Record<string, any>;
-    valueDefault: Record<string, any>;
 }, {}>;
 export default _default;

package/src/components/style/VcsFillSelector.vue

@@ -1,26 +1,25 @@
 <template>
-  <v-sheet>
-    <v-color-picker
-      :model-value="rgbaObject"
-      @update:model-value="updateColor"
-      mode="rgba"
-      :disabled="!value"
-    />
-  </v-sheet>
+  <v-color-picker
+    :model-value="rgbaObject"
+    @update:model-value="updateColor"
+    mode="rgba"
+    :disabled="!modelValue"
+    width="100%"
+  />
 </template>
 
 <script>
-  import { VSheet, VColorPicker } from 'vuetify/components';
+  import { VColorPicker } from 'vuetify/components';
   import { useColorObject } from './composables.js';
+  import { useProxiedComplexModel } from '../modelHelper.js';
 
   /**
    * @description Allows to model a JSON representation of ol/Fill vector style with a vuetify VColorPicker.
-   * @vue-prop {import("ol/style/Fill").Options} value - The Fill Options
+   * @vue-prop {import("ol/style/Fill").Options} [modelValue] - The Fill Options
    */
   export default {
     name: 'VcsFillSelector',
     components: {
-      VSheet,
       VColorPicker,
     },
     props: {
@@ -30,13 +29,11 @@
       },
     },
     setup(props, { emit }) {
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
       return {
-        rgbaObject: useColorObject(() => props.modelValue?.color),
+        rgbaObject: useColorObject(() => localValue.value?.color),
         updateColor(rgba) {
-          const fill = {
-            color: [rgba.r, rgba.g, rgba.b, rgba.a],
-          };
-          emit('update:modelValue', fill);
+          localValue.value.color = [rgba.r, rgba.g, rgba.b, rgba.a];
         },
       };
     },

package/src/components/style/VcsImageMenu.vue

@@ -1,12 +1,12 @@
 <template>
   <MenuWrapper
-    v-bind="{ ...$attrs, modelValue, valueDefault }"
     :value-fallback="{
       radius: 10,
       fill: { color: [255, 255, 255, 1] },
       stroke: { color: [0, 0, 0, 1], width: 2 },
     }"
     name="components.style.image"
+    v-bind="{ ...$attrs, ...$props }"
   >
     <template #preview>
       <canvas ref="canvas" width="32" height="24" />
@@ -15,10 +15,7 @@
       <VcsImageSelector
         v-bind="{
           ...$attrs,
-          modelValue,
-          valueDefault,
-          iconOptions,
-          extendedShapeSettings,
+          ...$props,
         }"
         class="pb-2"
       />
@@ -28,15 +25,13 @@
 
 <script>
   import { onMounted, ref, watch } from 'vue';
+  import { useProxiedAtomicModel } from '../modelHelper.js';
   import MenuWrapper from './MenuWrapper.vue';
   import VcsImageSelector, { drawImageStyle } from './VcsImageSelector.vue';
 
   /**
    * @description A wrapper for the VcsImageSelector, that has a small shape/icon preview and a menu that pops up when clicking the preview, containing the image selector.
-   * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} modelValue - The Image options
-   * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} valueDefault - The default image options
-   * @vue-prop {import("ol/style/Icon").Options} iconOptions - The icon options too choose from. Scale and opacity are ignored.
-   * @vue-prop {boolean} [extendedShapeSettings=false] - If true, there are all the input fields needed to create arbitrary ol RegularShapes.
+   * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} [modelValue] - The Image options
    */
   export default {
     name: 'VcsImageMenu',
@@ -49,29 +44,17 @@
         type: Object,
         default: undefined,
       },
-      valueDefault: {
-        type: Object,
-        default: undefined,
-      },
-      iconOptions: {
-        type: Array,
-        default: undefined,
-      },
-      extendedShapeSettings: {
-        type: Boolean,
-        default: false,
-      },
     },
-    setup(props) {
+    setup(props, { emits }) {
       const canvas = ref(null);
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emits);
 
       onMounted(() => {
-        drawImageStyle(canvas.value, props.modelValue, true);
+        drawImageStyle(canvas.value, localValue.value, true);
         watch(
           () => props.modelValue,
           () => {
-            // XXX Maybe add some sort of timeout funciton, so it draws only once when user stops using the slider
-            drawImageStyle(canvas.value, props.modelValue, true);
+            drawImageStyle(canvas.value, localValue.value, true);
           },
           { deep: true },
         );