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

package/src/components/lists/VcsList.vue

@@ -32,7 +32,7 @@
         </template>
       </v-list-item>
       <template v-for="(item, index) in renderingItems">
-        <VcsListItem
+        <VcsListItemComponent
           v-if="item"
           :dragging="dragging === index"
           :item="item"
@@ -66,7 +66,7 @@
           <template #default="scope">
             <slot name="item.default" v-bind="{ ...scope, index }" />
           </template>
-        </VcsListItem>
+        </VcsListItemComponent>
         <slot name="item.intermediate" :item="item" :index="index" />
         <div
           v-if="hasIntermediateSlot"
@@ -94,14 +94,14 @@
     VListItemTitle,
     VTooltip,
   } from 'vuetify/components';
+  import VcsListItemComponent from './VcsListItemComponent.vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
-  import VcsListItem from './VcsListItem.vue';
   import { createEllipseTooltip } from '../composables.js';
 
   /**
-   * @param {import("vue").Ref<VcsListItem[]>} items
-   * @param {import("vue").ShallowRef<VcsListItem[]>} selected
+   * @param {import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>} items
+   * @param {import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>} selected
    * @param {function(string, ...any[]):void} emit
    * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
    */
@@ -138,25 +138,9 @@
     ];
   }
 
-  /**
-   * @typedef {Object} VcsListItem
-   * @property {string} name
-   * @property {boolean} [visible] - Whether to display this item or not.
-   * @property {boolean} [disabled] - Whether this item should be displayed as disabled.
-   * @property {boolean|import("../../actions/actionHelper.js").ActionOptions} [renamable] - Whether the title of can be edited. will add a rename action to the end of the action list. This action will call titleChanged with the new title, you must provide the callback yourself, otherwise this does not work as expeted.
-   * @property {string} title - The title to be displayed
-   * @property {string} [tooltip]
-   * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be a URL or HTMLElement.
-   * @property {boolean} [hasUpdate] - Shows badge, if item has an update.
-   * @property {Array<import("../../actions/actionHelper.js").VcsAction>} [actions]
-   * @property {Array<function(PointerEvent):void>|undefined} [clickedCallbacks] - An array of callbacks called on item click. called before selection update
-   * @property {function(boolean):void} [selectionChanged] - A callback called if the selection changes with the current selection status. called before value update
-   * @property {function(string):void} [titleChanged] - A callback called if the title changes via rename action. only usable with renamble true.
-   */
-
   /**
    * @typedef {Object} ItemMovedEvent
-   * @property {VcsListItem} item
+   * @property {import("./VcsListItemComponent.vue").VcsListItem} item
    * @property {number} targetIndex
    */
 
@@ -172,12 +156,12 @@
    * Clicking with CTRL adds or removes to a selection set.
    * Clicking with SHIFT will create a selection range, starting or ending with the first item in the list
    * or the last normally selected item (not the last item clicked with CTRL for instance).
-   * @vue-prop {Array<VcsListItem>} items
+   * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} items
    * @vue-prop {boolean} [draggable=false]
    * @vue-prop {boolean} [selectable=false]
    * @vue-prop {boolean} [singleSelect=false]
-   * @vue-prop {Array<VcsListItem>} [value=[]] - the initial items to be selected.
-   * @vue-prop {boolean} [searchable=false] - if this list can have its items searched. you can provide your own predicate function by providing "filterPredicate" which is of type function(VcsListItem, string):boolean
+   * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} [value=[]] - the initial items to be selected.
+   * @vue-prop {boolean} [searchable=false] - if this list can have its items searched. you can provide your own predicate function by providing "filterPredicate" which is of type function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean
    * @vue-prop {string} [searchbarPlaceholder] - placeholder to render inside the search field
    * @vue-prop {boolean} [showTitle=true] - show the title component
    * @vue-prop {number} [actionButtonListOverflowCount] - overflow count to use for action lists in the title and items
@@ -194,7 +178,7 @@
   export default {
     name: 'VcsList',
     components: {
-      VcsListItem,
+      VcsListItemComponent,
       VcsTreeviewSearchbar,
       VcsActionButtonList,
       VTooltip,
@@ -263,7 +247,7 @@
       },
     },
     setup(props, { emit, slots }) {
-      /** @type {import("vue").ShallowRef<Array<VcsListItem>>} */
+      /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
       const selected = shallowRef([]);
       /** @type {import("vue").Ref<string>} */
       const query = ref('');
@@ -319,7 +303,7 @@
       );
 
       const vm = getCurrentInstance().proxy;
-      /** @type {function(VcsListItem, string):boolean} */
+      /** @type {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} */
       const filterPredicate = inject(
         'filterPredicate',
         (item, queryString = '') => {
@@ -331,7 +315,7 @@
       );
 
       /**
-       * @type {VcsListItem|null}
+       * @type {import("./VcsListItemComponent.vue").VcsListItem|null}
        */
       let draggedItem = null;
 
@@ -356,7 +340,7 @@
 
       /**
        * @param {MouseEvent} e
-       * @param {VcsListItem} item
+       * @param {import("./VcsListItemComponent.vue").VcsListItem} item
        * @param {number} index
        */
       function drag(e, item, index) {
@@ -369,7 +353,7 @@
       }
 
       /**
-       * @type {import("vue").ComputedRef<Array<VcsListItem>>}
+       * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
        */
       const renderingItems = computed(() => {
         let items = props.items.filter((i) => i.visible !== false);
@@ -408,13 +392,13 @@
          */
         renderingActions,
         /**
-         * @type {import("vue").ComputedRef<Array<VcsListItem>>}
+         * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
          */
         renderingItems,
-        /** @type {import("vue").ShallowRef<Array<VcsListItem>>} */
+        /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
         selected,
         /**
-         * @param {import("vue").UnwrapNestedRef<VcsListItem>} item
+         * @param {import("vue").UnwrapNestedRef<import("./VcsListItemComponent.vue").VcsListItem>} item
          * @param {PointerEvent} event
          */
         select(item, event) {
@@ -508,7 +492,7 @@
           emit('update:modelValue', selected.value);
         },
         /**
-         * @param {import("vue").UnwrapNestedRefs<VcsListItem>} item
+         * @param {import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>} item
          */
         add(item) {
           if (!isReactive(item)) {
@@ -521,7 +505,7 @@
           }
         },
         /**
-         * @param {import("vue").UnwrapNestedRefs<VcsListItem>} item
+         * @param {import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>} item
          */
         remove(item) {
           if (selected.value.includes(item) && !item.disabled) {
@@ -597,10 +581,11 @@
     }
 
     &:not(.vcs-list__selectable) {
+      cursor: auto;
+
       .v-list-item--link {
         cursor: auto;
       }
-      cursor: auto;
 
       &:hover {
         .v-list-item__overlay {

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

@@ -1,10 +1,10 @@
 /**
- * @param {import("vue").Ref<VcsListItem[]>} items
- * @param {import("vue").ShallowRef<VcsListItem[]>} selected
+ * @param {import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>} items
+ * @param {import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>} selected
  * @param {function(string, ...any[]):void} emit
  * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
  */
-export function createSelectionActions(items: import("vue").Ref<VcsListItem[]>, selected: import("vue").ShallowRef<VcsListItem[]>, emit: (arg0: string, ...args: any[][]) => void): Array<import("../../actions/actionHelper.js").VcsAction>;
+export function createSelectionActions(items: import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>, selected: import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>, emit: (arg0: string, ...args: any[][]) => void): Array<import("../../actions/actionHelper.js").VcsAction>;
 declare const _default: import("vue").DefineComponent<{
     items: {
         type: ArrayConstructor;
@@ -76,26 +76,26 @@ declare const _default: import("vue").DefineComponent<{
      */
     renderingActions: import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>;
     /**
-     * @type {import("vue").ComputedRef<Array<VcsListItem>>}
+     * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
      */
-    renderingItems: import("vue").ComputedRef<Array<VcsListItem>>;
-    /** @type {import("vue").ShallowRef<Array<VcsListItem>>} */
-    selected: import("vue").ShallowRef<Array<VcsListItem>>;
+    renderingItems: import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>;
+    /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
+    selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>;
     /**
-     * @param {import("vue").UnwrapNestedRef<VcsListItem>} item
+     * @param {import("vue").UnwrapNestedRef<import("./VcsListItemComponent.vue").VcsListItem>} item
      * @param {PointerEvent} event
      */
     select(item: any, event: PointerEvent): void;
     /**
-     * @param {import("vue").UnwrapNestedRefs<VcsListItem>} item
+     * @param {import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>} item
      */
-    add(item: import("vue").UnwrapNestedRefs<VcsListItem>): void;
+    add(item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>): void;
     /**
-     * @param {import("vue").UnwrapNestedRefs<VcsListItem>} item
+     * @param {import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>} item
      */
-    remove(item: import("vue").UnwrapNestedRefs<VcsListItem>): void;
+    remove(item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>): void;
     clear(): void;
-    drag: (e: MouseEvent, item: VcsListItem, index: number) => void;
+    drag: (e: MouseEvent, item: import("./VcsListItemComponent.vue").VcsListItem, index: number) => void;
     drop: (e: MouseEvent, targetIndex: number) => void;
     listHeader: import("vue").Ref<any>;
     listHeaderTooltip: import("vue").ComputedRef<string>;
@@ -173,48 +173,7 @@ declare const _default: import("vue").DefineComponent<{
     showTitle: boolean;
 }, {}>;
 export default _default;
-export type VcsListItem = {
-    name: string;
-    /**
-     * - Whether to display this item or not.
-     */
-    visible?: boolean | undefined;
-    /**
-     * - Whether this item should be displayed as disabled.
-     */
-    disabled?: boolean | undefined;
-    /**
-     * - Whether the title of can be edited. will add a rename action to the end of the action list. This action will call titleChanged with the new title, you must provide the callback yourself, otherwise this does not work as expeted.
-     */
-    renamable?: boolean | import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).ActionOptions | undefined;
-    /**
-     * - The title to be displayed
-     */
-    title: string;
-    tooltip?: string | undefined;
-    /**
-     * - An optional icon to display with this item. Can be a URL or HTMLElement.
-     */
-    icon?: string | HTMLCanvasElement | HTMLImageElement | undefined;
-    /**
-     * - Shows badge, if item has an update.
-     */
-    hasUpdate?: boolean | undefined;
-    actions?: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[] | undefined;
-    /**
-     * - An array of callbacks called on item click. called before selection update
-     */
-    clickedCallbacks?: Array<(arg0: PointerEvent) => void> | undefined;
-    /**
-     * - A callback called if the selection changes with the current selection status. called before value update
-     */
-    selectionChanged?: ((arg0: boolean) => void) | undefined;
-    /**
-     * - A callback called if the title changes via rename action. only usable with renamble true.
-     */
-    titleChanged?: ((arg0: string) => void) | undefined;
-};
 export type ItemMovedEvent = {
-    item: VcsListItem;
+    item: import("./VcsListItemComponent.vue").VcsListItem;
     targetIndex: number;
 };

package/src/components/lists/{VcsListItem.vue → VcsListItemComponent.vue}

@@ -12,8 +12,24 @@
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import { createEllipseTooltip } from '../composables.js';
 
+  /**
+   * @typedef {Object} VcsListItem
+   * @property {string} name
+   * @property {boolean} [visible] - Whether to display this item or not.
+   * @property {boolean} [disabled] - Whether this item should be displayed as disabled.
+   * @property {boolean|import("../../actions/actionHelper.js").ActionOptions} [renamable] - Whether the title of can be edited. will add a rename action to the end of the action list. This action will call titleChanged with the new title, you must provide the callback yourself, otherwise this does not work as expeted.
+   * @property {string} title - The title to be displayed
+   * @property {string} [tooltip]
+   * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be a URL or HTMLElement.
+   * @property {boolean} [hasUpdate] - Shows badge, if item has an update.
+   * @property {Array<import("../../actions/actionHelper.js").VcsAction>} [actions]
+   * @property {Array<function(PointerEvent):void>|undefined} [clickedCallbacks] - An array of callbacks called on item click. called before selection update
+   * @property {function(boolean):void} [selectionChanged] - A callback called if the selection changes with the current selection status. called before value update
+   * @property {function(string):void} [titleChanged] - A callback called if the title changes via rename action. only usable with renamble true.
+   */
+
   const props = defineProps({
-    /** @type {import("./VcsList.vue").VcsListItem} */
+    /** @type {VcsListItem} */
     item: {
       type: Object,
       required: true,

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

@@ -0,0 +1,69 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
+    $props: {
+        readonly [x: string]: any;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    title?(_: {
+        item: any;
+        dragging: any;
+        tooltip: string;
+    }): any;
+    subtitle?(_: {
+        item: any;
+    }): any;
+    default?(_: {
+        item: any;
+        dragging: any;
+        tooltip: string;
+        isActive: boolean;
+        isOpen: boolean;
+        isSelected: boolean;
+        isIndeterminate: boolean;
+        select: (value: boolean) => void;
+    }): any;
+}>;
+export default _default;
+export type VcsListItem = {
+    name: string;
+    /**
+     * - Whether to display this item or not.
+     */
+    visible?: boolean | undefined;
+    /**
+     * - Whether this item should be displayed as disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether the title of can be edited. will add a rename action to the end of the action list. This action will call titleChanged with the new title, you must provide the callback yourself, otherwise this does not work as expeted.
+     */
+    renamable?: boolean | import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).ActionOptions | undefined;
+    /**
+     * - The title to be displayed
+     */
+    title: string;
+    tooltip?: string | undefined;
+    /**
+     * - An optional icon to display with this item. Can be a URL or HTMLElement.
+     */
+    icon?: string | HTMLCanvasElement | HTMLImageElement | undefined;
+    /**
+     * - Shows badge, if item has an update.
+     */
+    hasUpdate?: boolean | undefined;
+    actions?: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[] | undefined;
+    /**
+     * - An array of callbacks called on item click. called before selection update
+     */
+    clickedCallbacks?: Array<(arg0: PointerEvent) => void> | undefined;
+    /**
+     * - A callback called if the selection changes with the current selection status. called before value update
+     */
+    selectionChanged?: ((arg0: boolean) => void) | undefined;
+    /**
+     * - A callback called if the title changes via rename action. only usable with renamble true.
+     */
+    titleChanged?: ((arg0: string) => void) | undefined;
+};
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});

package/src/components/lists/VcsTreeview.vue

@@ -3,17 +3,20 @@
     <VcsTreeviewSearchbar
       v-if="showSearchbar"
       :placeholder="searchbarPlaceholder"
-      v-model="search"
+      v-model="localSearchValue"
     />
     <v-treeview
       class="vcs-treeview"
-      v-bind="{ ...$props, ...$attrs }"
+      density="compact"
       item-value="name"
       :item-props="true"
-      :search="search"
       :custom-filter="handleFilter"
       :selectable="false"
       :activatable="false"
+      expand-icon="mdi-chevron-right"
+      collapse-icon="mdi-chevron-down"
+      v-bind="{ ...$props, ...$attrs }"
+      :search="localSearchValue"
     >
       <template #item="{ props: item }">
         <VcsTreeviewLeaf
@@ -33,6 +36,7 @@
     > .v-list-item,
     > .v-list-group > .v-list-item {
       min-height: calc(var(--v-vcs-item-height) + 8px) !important;
+      padding-left: 6px;
     }
     // Border around root nodes with children included
     > .v-list-item:not(:last-child),
@@ -46,17 +50,32 @@
       > .v-list-item-title {
       font-weight: 700 !important;
     }
-    // remove ripple effect from expand icon
-    .v-icon.v-icon {
-      &::after {
-        background-color: transparent;
-      }
-    }
-    // Toggle Item Chevron with should be 16px
-    .v-treeview-node__toggle {
-      width: 16px;
+  }
+
+  // leaf indent
+  :deep(.v-list--slim .v-treeview-group.v-list-group) {
+    --prepend-width: 0px;
+  }
+
+  // Padding left of root nodes
+  :deep(.v-list-item__prepend) {
+    width: var(--v-vcs-font-size);
+    margin-right: 8px;
+    > .v-list-item-action > .v-btn {
+      width: var(--v-vcs-font-size);
+      height: var(--v-vcs-font-size);
+      margin: auto;
     }
   }
+
+  // remove hover shadow over button
+  :deep(.v-btn__overlay) {
+    --v-hover-opacity: 0;
+  }
+  // remove ripple effect
+  :deep(.v-ripple__container) {
+    display: none;
+  }
   // hide active class
   :deep(.v-list-item__overlay) {
     display: none;
@@ -68,8 +87,9 @@
 </style>
 
 <script>
-  import { getCurrentInstance, ref } from 'vue';
+  import { getCurrentInstance } from 'vue';
   import { VTreeview } from 'vuetify/labs/VTreeview';
+  import { useProxiedAtomicModel } from '../modelHelper.js';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
   import VcsTreeviewLeaf from './VcsTreeviewLeaf.vue';
 
@@ -77,6 +97,7 @@
    * @description extends API of https://vuetifyjs.com/en/api/v-treeview/
    * Can render dynamic components as leaf items.
    * In order to display an item needs to be registered and added to `availableComponents`.
+   * Exposes the `search` value for filtering the treeview.
    * @vue-prop {boolean} [showSearchbar=false] - Whether there is a searchbar for this treeview
    * @vue-prop {string}  [searchbarPlaceholder] - Placeholder text for the searchbar, will be translated
    */
@@ -88,6 +109,10 @@
       VTreeview,
     },
     props: {
+      search: {
+        type: String,
+        default: '',
+      },
       showSearchbar: {
         type: Boolean,
         default: false,
@@ -97,8 +122,10 @@
         default: undefined,
       },
     },
-    setup() {
-      const search = ref('');
+    emits: ['update:search'],
+    setup(props, { emit }) {
+      const localSearchValue = useProxiedAtomicModel(props, 'search', emit);
+
       // TODO properly type the tree view item interface & export in index.d.ts
 
       const vm = getCurrentInstance().proxy;
@@ -119,7 +146,7 @@
       };
 
       return {
-        search,
+        localSearchValue,
         handleFilter,
       };
     },

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

@@ -1,4 +1,8 @@
 declare const _default: import("vue").DefineComponent<{
+    search: {
+        type: StringConstructor;
+        default: string;
+    };
     showSearchbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -8,9 +12,13 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    search: import("vue").Ref<string>;
+    localSearchValue: import("vue").Ref<any>;
     handleFilter: (value: string, q: string, item: Object) => number;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:search"[], "update:search", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    search: {
+        type: StringConstructor;
+        default: string;
+    };
     showSearchbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -19,7 +27,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-}>>, {
+}>> & {
+    "onUpdate:search"?: ((...args: any[]) => any) | undefined;
+}, {
+    search: string;
     showSearchbar: boolean;
     searchbarPlaceholder: string;
 }, {}>;

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -53,12 +53,19 @@
 </script>
 
 <template>
-  <v-treeview-item v-if="item" ref="parentElement">
-    <template #prepend v-if="item.icon">
-      <v-icon v-if="isStringIcon" :size="16" class="mr-1">
-        {{ item.icon }}
-      </v-icon>
-      <ImageElementInjector :element="item.icon" v-else />
+  <v-treeview-item
+    v-if="item"
+    ref="parentElement"
+    density="compact"
+    class="vcs-treeview-leaf pr-2"
+  >
+    <template #prepend>
+      <template v-if="item.icon">
+        <v-icon v-if="isStringIcon" :size="16">
+          {{ item.icon }}
+        </v-icon>
+        <ImageElementInjector :element="item.icon" v-else />
+      </template>
     </template>
     <div class="text-truncate" ref="titleElem">
       {{ $st(item.title || item.name) }}
@@ -76,6 +83,8 @@
         :overflow-count="3"
         :disabled="item.disabled"
         right
+        tooltip-position="right"
+        block-overflow
         class="col-4 pa-0 d-flex align-center"
       />
     </template>

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -10,8 +10,8 @@
       <VcsTextField
         class="searchbar outlined rounded-xl align-center justify-center base-lighten-4 pa-1 pl-6"
         :placeholder="$st(placeholder)"
-        v-bind="$attrs"
         clearable
+        v-bind="$attrs"
       />
     </slot>
 
@@ -66,7 +66,7 @@
   // override primary--placeholder of VcsTextField
   :deep(input::placeholder) {
     color: rgb(var(--v-theme-base-lighten-1)) !important;
-    font-style: initial !important;
+    font-style: italic !important;
     opacity: 0.75 !important;
   }
 </style>

package/src/components/notification/VcsHelp.vue

@@ -37,7 +37,7 @@
       },
       show: {
         type: Boolean,
-        required: true,
+        default: true,
       },
     },
   };

package/src/components/notification/VcsHelp.vue.d.ts

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     show: {
         type: BooleanConstructor;
-        required: true;
+        default: boolean;
     };
 }, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     text: {
@@ -14,9 +14,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     show: {
         type: BooleanConstructor;
-        required: true;
+        default: boolean;
     };
 }>>, {
     text: string;
+    show: boolean;
 }, {}>;
 export default _default;

package/src/components/section/VcsExpansionPanel.vue

@@ -45,8 +45,8 @@
     <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>
+          <v-icon v-if="!expanded" class="pr-1"> mdi-chevron-right </v-icon>
+          <v-icon v-if="expanded" class="pr-1"> mdi-chevron-down </v-icon>
           <span
             :class="{
               'vcs-panel-title__append':