Sticky Scroll isn't working for .vue files

[danielgroen]

According due the new nice feature that allows sticky view in editors there is a bug with .vue files.

It keeps hanging on the <template> tag, no matter how far you scroll.

Related issue.

I have tested this issue on:

• Mac os
• 1.71 Insiders

[danielgroen]

@gjsjohnmurray This is the new issue i created

[gjsjohnmurray]

@danielgroen what does the Outline view for your file show? If you're not sure where to find this, run the command View: Focus on Outline View.

[danielgroen]

@danielgroen what does the Outline view for your file show? If you're not sure where to find this, run the command View: Focus on Outline View.

[gjsjohnmurray]

Sticky scroll relies on the same information as Outline. It looks like you don't have an extension which implements DocumentSymbolProvider for your files.

[danielgroen]

i've installed an extention that impolemented documentSymbolProvider. Now i got this:

However it's still stuck on the <template>

[aiday-mar]

Hi thanks for the feedback. Could you share the .vue file to copy paste? I will try to reproduce the issue on my computer.

[danielgroen]

<template>
    <div class="drop-down__wrapper">
        <aside v-if="hasPrefix" class="drop-down__prefix">
            <slot name="prefix" />:&nbsp;
        </aside>
        <div
            v-if="dropdownState === 'idle'"
            :class="[
                'drop-down',
                `drop-down--${color}`,
                `drop-down--${alignment}`,
                { 'drop-down--open': dropdownIsOpen }]"
        >
            <li class="hidden-words">
                {{ dropdownValues.default.name }}
            </li>
            <li v-for="option in options" :key="option.id" class="hidden-words">
                {{ option.name }}
            </li>
            <div class="drop-down__current" @click="changeDropdownState()">
                <span class="drop-down__current__word">{{ getCurrentName }}</span>
                <AtomSvg class="drop-down__current__svg" type="chevrondown" />
            </div>
            <ul class="drop-down__selections">
                <li
                    v-if="!dropdownValues.default.id"
                    disabled
                    :class="[
                        'drop-down__selections__word',
                        { disabled: dropdownValues.required || !dropdownValues.current.id },
                    ]"
                    @click="changeValue('default')"
                >
                    {{ dropdownValues.default.name }}
                </li>
                <li
                    v-for="(option, i) in options"
                    :key="option.id"
                    :class="[
                        'drop-down__selections__word',
                        { disabled: dropdownValues.current.name === option.name },
                    ]"
                    :val="option.id"
                    @click="changeValue(i)"
                >
                    {{ option.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { defineComponent, onMounted, onBeforeUnmount, computed } from '@nuxtjs/composition-api';

import useDropdown from '@/composables/useDropdown';

export default defineComponent({
  name: 'AtomDropdown',
  props: {
    options: {
      type: Array,
      required: true
    },
    color: {
      type: String,
      default: 'white',
      validator: color => !!['white', 'sand'].includes(color)
    },
    alignment: {
      type: String,
      default: 'left',
      validator: color => !!['left', 'right'].includes(color)
    }
  },

  setup ({ options }, { slots }) {
    const {
      dropdownValues,
      reset,
      setOptions,
      dropdownIsOpen,
      changeState,
      dropdownState,
      changeDropdownState
    } = useDropdown();

    const hasPrefix = !!slots.prefix;

    onMounted(() => {
      reset();
      setOptions(options);
      changeState('idle');
    });

    onBeforeUnmount(() => {
      reset();
    });

    const getCurrentName = computed(() => {
      if (dropdownValues.value.current.name) {
        return dropdownValues.value.current.name;
      } else {
        return dropdownValues.value.default.name;
      }
    });

    const changeValue = (i) => {
      if (i === 'default') {
        dropdownValues.value.current = { id: null, name: null };
      } else {
        dropdownValues.value.current = dropdownValues.value.options[i];
      }
      changeDropdownState();
    };

    return { dropdownValues, hasPrefix, changeValue, dropdownIsOpen, changeDropdownState, dropdownState, getCurrentName };
  }
});
</script>

<style lang="scss" scoped>
.drop-down {
}
</style>

[gjsjohnmurray]

@danielgroen thanks for pasting that. Which extension did you add to get Outline content?

[danielgroen]

document this

However i now see that the stickyness work on the javascript!

[danielgroen]

However, maybe this is a new feature request, but can it also be sticky in the <template> part?

[aiday-mar]

I just tested on my computer on the latest VSCode Insiders version which you can find here https://code.visualstudio.com/insiders/. For the sticky scroll to work you need a language service provider extension. I used the Vue Language Features developed by vue which you can find in the marketplace of VSCode. The new behavior is as follows:

[danielgroen]

Great it works! Thanks. I indeed had the deprecated ext volar still installed since vue language features had some bugs back in the days

[Jacobify]

@danielgroen thanks for addressing this issue. and thanks for resolving it @gjsjohnmurray @aiday-mar