feat(detachable): add activator scoped slot #5318

KaelWD · 2018-10-12T17:13:55Z

Motivation and Context

fixes #2489
resolves #3030
fixes #3107
fixes #4428
fixes #5193

Markup:

<template>
  <v-app>
    <v-toolbar app>
      <v-spacer />
      <v-toolbar-items>
        <v-menu lazy attach>
          <v-btn flat slot="activator" slot-scope="props" v-on="props.on">menu</v-btn>
          <v-list>
            <v-list-tile @click>menu item 1</v-list-tile>
            <v-list-tile @click>menu item 2</v-list-tile>
            <v-list-tile @click>menu item 3</v-list-tile>
            <v-list-tile @click>menu item 4</v-list-tile>
            <v-list-tile @click>menu item 5</v-list-tile>
          </v-list>
        </v-menu>
        <v-tooltip bottom attach>
          <v-btn
            slot="activator"
            slot-scope="props"
            v-on="props.on"
            flat
          >
            tooltip
          </v-btn>
          <span>Tooltip</span>
        </v-tooltip>
      </v-toolbar-items>
    </v-toolbar>
    <v-content>
      <v-container>
        <v-menu lazy>
          <v-btn slot="activator" slot-scope="props" v-on="props.on">menu</v-btn>
          <v-list>
            <v-list-tile @click>menu item 1</v-list-tile>
            <v-list-tile @click>menu item 2</v-list-tile>
            <v-list-tile @click>menu item 3</v-list-tile>
            <v-list-tile @click>menu item 4</v-list-tile>
            <v-list-tile @click>menu item 5</v-list-tile>
          </v-list>
        </v-menu>

        <v-tooltip bottom>
          <v-btn
            slot="activator"
            slot-scope="props"
            v-on="props.on"
            color="primary"
            dark
          >
            tooltip
          </v-btn>
          <span>Tooltip</span>
        </v-tooltip>

        <v-dialog>
          <v-btn
            slot="activator"
            slot-scope="props"
            v-on="props.on"
            color="secondary"
            dark
          >
            dialog
          </v-btn>
          <v-card>
            <v-card-text>
              dialog
            </v-card-text>
          </v-card>
        </v-dialog>

        <v-layout row wrap>
          <v-flex xs12 sm12 md6>
            <v-card>
              <v-toolbar color="white" extended>
                <v-toolbar-side-icon></v-toolbar-side-icon>
                <v-tooltip top>
                  <v-btn
                    color="pink"
                    dark
                    small
                    absolute
                    bottom
                    right
                    fab
                    slot="activator"
                    slot-scope="props"
                    v-on="props.on"
                  >
                    <v-icon>add</v-icon>
                  </v-btn>
                  tooltip
                </v-tooltip>
              </v-toolbar>
              <v-card-text style="height: 228px;" class="blue lighten-5"></v-card-text>
              <v-card-text style="height: 100px; position: relative">
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>

        <v-menu lazy>
          <v-tooltip slot="activator" slot-scope="menuProps" bottom>
            <v-btn slot="activator" slot-scope="props" v-on="Object.assign({}, props.on, menuProps.on)">menu + tooltip</v-btn>
            tooltip
          </v-tooltip>
          <v-list>
            <v-list-tile @click>menu item 1</v-list-tile>
            <v-list-tile @click>menu item 2</v-list-tile>
            <v-list-tile @click>menu item 3</v-list-tile>
            <v-list-tile @click>menu item 4</v-list-tile>
            <v-list-tile @click>menu item 5</v-list-tile>
          </v-list>
        </v-menu>
      </v-container>
    </v-content>
  </v-app>
</template>

<template>
  <v-app>
    <v-toolbar app>
      <v-spacer />
      <v-toolbar-items>
        <v-menu lazy attach offset-y>
          <v-btn flat slot="activator">menu</v-btn>
          <v-list>
            <v-list-tile @click>menu item 1</v-list-tile>
            <v-list-tile @click>menu item 2</v-list-tile>
            <v-list-tile @click>menu item 3</v-list-tile>
            <v-list-tile @click>menu item 4</v-list-tile>
            <v-list-tile @click>menu item 5</v-list-tile>
          </v-list>
        </v-menu>
        <v-menu lazy attach offset-y>
          <v-btn flat slot="activator" slot-scope="props" v-on="props.on">menu</v-btn>
          <v-list>
            <v-list-tile @click>menu item 1</v-list-tile>
            <v-list-tile @click>menu item 2</v-list-tile>
            <v-list-tile @click>menu item 3</v-list-tile>
            <v-list-tile @click>menu item 4</v-list-tile>
            <v-list-tile @click>menu item 5</v-list-tile>
          </v-list>
        </v-menu>
        <v-tooltip bottom attach>
          <v-btn
            slot="activator"
            slot-scope="props"
            v-on="props.on"
            flat
          >
            tooltip
          </v-btn>
          <span>Tooltip</span>
        </v-tooltip>
      </v-toolbar-items>
    </v-toolbar>
    <v-content>
      <v-container>
        <v-select :items="['a', 'b', 'c']" attach></v-select>
        <v-combobox :items="['a', 'b', 'c']" attach></v-combobox>
        <v-menu attach>
          <v-btn slot="activator" slot-scope="data" v-on="data.on">menu</v-btn>
          <v-list>
            <v-list-tile @click>menu item 1</v-list-tile>
            <v-list-tile @click>menu item 2</v-list-tile>
            <v-list-tile @click>menu item 3</v-list-tile>
            <v-list-tile @click>menu item 4</v-list-tile>
            <v-list-tile @click>menu item 5</v-list-tile>
          </v-list>
        </v-menu>
        <v-menu attach>
          <v-btn slot="activator">menu</v-btn>
          <v-list>
            <v-list-tile @click>menu item 1</v-list-tile>
            <v-list-tile @click>menu item 2</v-list-tile>
            <v-list-tile @click>menu item 3</v-list-tile>
            <v-list-tile @click>menu item 4</v-list-tile>
            <v-list-tile @click>menu item 5</v-list-tile>
          </v-list>
        </v-menu>
        <v-tooltip bottom attach>
          <v-btn
            slot="activator"
            slot-scope="props"
            v-on="props.on"
            flat
          >
            tooltip
          </v-btn>
          <span>Tooltip</span>
        </v-tooltip>
        <v-tooltip right attach>
          <v-btn
            slot="activator"
            slot-scope="props"
            v-on="props.on"
            flat
          >
            tooltip
          </v-btn>
          <span>Tooltip</span>
        </v-tooltip>
        <v-tooltip bottom>
          <v-btn
            slot="activator"
            slot-scope="props"
            v-on="props.on"
            flat
          >
            tooltip
          </v-btn>
          <span>Tooltip</span>
        </v-tooltip>
        <v-tooltip right>
          <v-btn
            slot="activator"
            slot-scope="props"
            v-on="props.on"
            flat
          >
            tooltip
          </v-btn>
          <span>Tooltip</span>
        </v-tooltip>
        <v-combobox :items="['a', 'b', 'c']"></v-combobox>
      </v-container>
    </v-content>
  </v-app>
</template>

TODO

menus
tooltips
dialogs
unit tests
detachable needs to change, [Bug Report] Tooltip does not work with fab #3107 requires that the activator doesn't have anything extra around it
Still can't nest two detachables, the wrong element gets moved
Attached menu/tooltip has incorrect positioning

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

codecov · 2018-10-12T17:19:17Z

Codecov Report

Merging #5318 into dev will decrease coverage by 0.1%.
The diff coverage is 76%.

@@           Coverage Diff            @@
##             dev   #5318      +/-   ##
========================================
- Coverage   88.7%   88.6%   -0.11%     
========================================
  Files        281     281              
  Lines       6251    6300      +49     
  Branches    1566    1581      +15     
========================================
+ Hits        5545    5582      +37     
- Misses       590     600      +10     
- Partials     116     118       +2

Impacted Files	Coverage Δ
...tify/src/components/VMenu/mixins/menu-activator.js	`46.15% <50%> (ø)`	⬆️
...ify/src/components/VMenu/mixins/menu-generators.js	`78.12% <58.33%> (-6.5%)`	⬇️
packages/vuetify/src/mixins/detachable.js	`90.9% <75%> (-2.2%)`	⬇️
packages/vuetify/src/components/VDialog/VDialog.js	`72% <80%> (-0.73%)`	⬇️
packages/vuetify/src/mixins/menuable.js	`91.86% <80%> (-3.42%)`	⬇️
...ckages/vuetify/src/components/VTooltip/VTooltip.js	`84.74% <82.35%> (-2.22%)`	⬇️
packages/vuetify/src/mixins/overlayable.js	`49.43% <0%> (+2.24%)`	⬆️
...fy/src/components/transitions/expand-transition.js	`76% <0%> (+4%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f783f21...be1003e. Read the comment docs.

resolves #3030

runs parent -> child instead of child -> parent

johnleider · 2018-11-23T02:15:26Z

Is all that's left is adding unit tests? If so I'll lend a hand.

KaelWD · 2018-11-23T03:30:43Z

And the position calculations need rewriting for attached menus.

see a025093, #5318

lock · 2019-04-14T18:31:05Z

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord

KaelWD added the S: in progress label Oct 12, 2018

KaelWD changed the title ~~feat(VMenu): add activator scoped slot~~ feat(detachable): add activator scoped slot Oct 12, 2018

SajibMahmud previously approved these changes Oct 16, 2018

View reviewed changes

KaelWD added this to the v1.4.0 milestone Oct 21, 2018

johnleider removed the S: in progress label Oct 25, 2018

KaelWD added the S: has merge conflicts The pending Pull Request has merge conflicts label Oct 29, 2018

johnleider mentioned this pull request Nov 1, 2018

[Bug Report] V-Dialog Activator slot does not honor block prop on V-Button #5193

Closed

KaelWD added 4 commits November 11, 2018 01:16

feat(VMenu): add activator scoped slot

5facde2

resolves #3030

feat(VTooltip): add activator scoped slot

6ce6c8e

feat(VDialog): create activator scoped slot

65b3c40

fix: remove activator element from self at mount

e5a1640

KaelWD dismissed SajibMahmud’s stale review via e5a1640 November 10, 2018 14:16

KaelWD force-pushed the feat/3030-activator-scoped-slot branch from 347c692 to e5a1640 Compare November 10, 2018 14:16

KaelWD removed the S: has merge conflicts The pending Pull Request has merge conflicts label Nov 10, 2018

KaelWD added 3 commits November 18, 2018 23:17

Merge branch 'dev' into feat/3030-activator-scoped-slot

dee4bd9

fix: extract activator in beforeMount

573b752

runs parent -> child instead of child -> parent

fix(VDialog): don't render activator if slot isn't used

7253df0

Merge branch 'dev' into feat/3030-activator-scoped-slot

3297760

johnleider added T: feature A new feature and removed T: feature A new feature labels Dec 2, 2018

KaelWD mentioned this pull request Dec 10, 2018

[Bug Report] <v-btn disabled> can still be clickable and open <v-menu> #5851

Closed

johnleider removed this from the v1.4.0 milestone Dec 16, 2018

fix(menuable): account for top padding in autocomplete when attached

11ab339

KaelWD force-pushed the feat/3030-activator-scoped-slot branch from 874a4c5 to 11ab339 Compare December 17, 2018 12:33

KaelWD added 2 commits December 17, 2018 23:38

Merge branch 'dev' into feat/3030-activator-scoped-slot

ad141ce

fix(VMenu): remove 6px offset when attached

beb8c29

KaelWD added 4 commits December 18, 2018 00:43

fix(VTooltip): set correct position when attached

5249b94

fix(VTooltip): use correct left offset when not attached

890c4fd

fix(menuable): use correct offsets when not attached

e7a5079

test: update failing tests

f32072f

KaelWD requested review from jacekkarczmarczyk, johnleider and nekosaur December 17, 2018 14:26

KaelWD added this to the v1.4.0 milestone Dec 17, 2018

refactor(VMenu): remove duplicate detach call

be1003e

KaelWD merged commit a025093 into dev Dec 18, 2018

KaelWD deleted the feat/3030-activator-scoped-slot branch December 18, 2018 14:11

KaelWD added a commit that referenced this pull request Dec 18, 2018

fix(menuable): account for top+left

50ab611

see a025093, #5318

KaelWD added a commit that referenced this pull request Dec 18, 2018

fix(menuable): set correct position with left+attach+offset-x

f561ca2

see a025093, #5318

KaelWD mentioned this pull request Feb 6, 2019

[Feature Request] margin slot activator #6382

Closed

lock bot locked as resolved and limited conversation to collaborators Apr 14, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(detachable): add activator scoped slot #5318

feat(detachable): add activator scoped slot #5318

KaelWD commented Oct 12, 2018 •

edited

codecov bot commented Oct 12, 2018 •

edited

johnleider commented Nov 23, 2018

KaelWD commented Nov 23, 2018

lock bot commented Apr 14, 2019

feat(detachable): add activator scoped slot #5318

feat(detachable): add activator scoped slot #5318

Conversation

KaelWD commented Oct 12, 2018 • edited

Motivation and Context

Markup:

TODO

Types of changes

codecov bot commented Oct 12, 2018 • edited

Codecov Report

johnleider commented Nov 23, 2018

KaelWD commented Nov 23, 2018

lock bot commented Apr 14, 2019

KaelWD commented Oct 12, 2018 •

edited

codecov bot commented Oct 12, 2018 •

edited