Inline select (#537)

* Add inline mode support to v-select

* Use inline selects on tabular/cards
This commit is contained in:
Rijk van Zanten
2020-05-08 14:09:06 -04:00
committed by GitHub
parent a070a25353
commit 9e5c0f0078
7 changed files with 102 additions and 54 deletions

View File

@@ -122,20 +122,23 @@ export const withMenu = () =>
defineComponent({
components: { VMenu },
template: `
<v-menu placement="bottom-start" close-on-content-click attached>
<template #activator="{ toggle, active }">
<v-input placeholder="Enter value...">
<template #append><v-icon @click="toggle" name="public" :style="{
'--v-icon-color': active ? 'var(--blue)' : 'currentColor'
}" /></template>
</v-input>
</template>
<div>
<v-menu placement="bottom-start" close-on-content-click attached>
<template #activator="{ toggle, active }">
<v-input placeholder="Enter value...">
<template #append><v-icon @click="toggle" name="public" :style="{
'--v-icon-color': active ? 'var(--blue)' : 'currentColor'
}" /></template>
</v-input>
</template>
<v-list>
<v-list-item v-for="i in [1, 2, 3]" :key="i" @click="() => {}">
Item {{i}}
</v-list-item>
</v-list>
</v-menu>
<v-list>
<v-list-item v-for="i in [1, 2, 3]" :key="i" @click="() => {}">
Item {{i}}
</v-list-item>
</v-list>
</v-menu>
<portal-target name="popper-outlet" />
</div>
`,
});

View File

@@ -28,22 +28,25 @@ export const basic = () =>
},
},
template: `
<v-menu
:close-on-click="closeOnClick"
:close-on-content-click="closeOnContentClick"
show-arrow
placement="right-start"
>
<template #activator="{ toggle }">
<v-button @click="toggle">Click me</v-button>
</template>
<div>
<v-menu
:close-on-click="closeOnClick"
:close-on-content-click="closeOnContentClick"
show-arrow
placement="right-start"
>
<template #activator="{ toggle }">
<v-button @click="toggle">Click me</v-button>
</template>
<v-list>
<v-list-item v-for="i in [1, 2, 3]" :key="i" @click="() => {}">
Item {{i}}
</v-list-item>
</v-list>
</v-menu>
<v-list>
<v-list-item v-for="i in [1, 2, 3]" :key="i" @click="() => {}">
Item {{i}}
</v-list-item>
</v-list>
</v-menu>
<portal-target name="popper-outlet" />
</div>
`,
});
@@ -67,8 +70,9 @@ export const withVModel = () =>
<v-list-item v-for="i in [1, 2, 3]" :key="i" @click="() => {}">
Item {{i}}
</v-list-item>
</v-list>
</v-list>
</v-menu>
<portal-target name="popper-outlet" />
</div>
`,
});
@@ -120,7 +124,7 @@ export const positioning = () =>
</v-list-item>
</v-list>
</v-menu>
<portal-target name="menu-outlet" />
<portal-target name="popper-outlet" />
</div>
`,
});
@@ -182,7 +186,7 @@ export const withEdgeOffset = () =>
</v-list>
</v-menu>
</div>
<portal-target name="menu-outlet" />
<portal-target name="popper-outlet" />
</div>
`,
});
@@ -199,26 +203,29 @@ export const attached = () =>
},
},
template: `
<v-menu
:close-on-click="closeOnClick"
:close-on-content-click="closeOnContentClick"
attached
>
<template #activator="{ toggle, active }">
<v-input placeholder="This is an input...">
<template #append>
<v-icon @click="toggle" name="public" :style="{
'--v-icon-color': active ? 'var(--blue)' : 'currentColor'
}" />
</template>
</v-input>
</template>
<div>
<v-menu
:close-on-click="closeOnClick"
:close-on-content-click="closeOnContentClick"
attached
>
<template #activator="{ toggle, active }">
<v-input placeholder="This is an input...">
<template #append>
<v-icon @click="toggle" name="public" :style="{
'--v-icon-color': active ? 'var(--blue)' : 'currentColor'
}" />
</template>
</v-input>
</template>
<v-list>
<v-list-item v-for="i in [1, 2, 3]" :key="i" @click="() => {}">
Item {{i}}
</v-list-item>
</v-list>
</v-menu>
<v-list>
<v-list-item v-for="i in [1, 2, 3]" :key="i" @click="() => {}">
Item {{i}}
</v-list-item>
</v-list>
</v-menu>
<portal-target name="popper-outlet" />
</div>
`,
});

View File

@@ -34,6 +34,7 @@ Renders a dropdown input.
| `disabled` | Disable the select | |
| `show-deselect` | Show the deselect option when a value has been set | |
| `close-on-content-click` | Close the select when selecting a value | `true` |
| `inline` | Render the select inline in text | `false` |
## Events

View File

@@ -32,6 +32,9 @@ export const basic = () =>
allowOther: {
default: boolean('Allow Other', false),
},
inline: {
default: boolean('Inline', false),
},
},
setup() {
const value = ref(null);
@@ -45,8 +48,10 @@ export const basic = () =>
:placeholder="placeholder"
v-model="value"
:items="items"
:inline="inline"
/>
<raw-value>{{ value }}</raw-value>
<portal-target name="popper-outlet" />
</div>
`,
});
@@ -84,6 +89,7 @@ export const multiple = () =>
multiple
/>
<raw-value>{{ value }}</raw-value>
<portal-target name="popper-outlet" />
</div>
`,
});

View File

@@ -2,11 +2,22 @@
<v-menu
:disabled="disabled"
class="v-select"
attached
:attached="inline === false"
:show-arrow="inline === true"
:close-on-content-click="closeOnContentClick"
>
<template #activator="{ toggle, active }">
<div
v-if="inline"
class="inline-display"
:class="{ placeholder: !displayValue }"
@click="toggle"
>
{{ displayValue || placeholder }}
<v-icon name="expand_more" :class="{ active }" />
</div>
<v-input
v-else
:full-width="fullWidth"
readonly
:value="displayValue"
@@ -100,7 +111,7 @@
</v-list-item-icon>
</v-list-item>
<v-list-item @click="addOtherValue()">
<v-list-item @click.stop="addOtherValue()">
<v-list-item-icon><v-icon name="add" /></v-list-item-icon>
<v-list-item-content>{{ $t('other') }}</v-list-item-content>
</v-list-item>
@@ -168,6 +179,10 @@ export default defineComponent({
type: Boolean,
default: true,
},
inline: {
type: Boolean,
default: false,
},
},
setup(props, { emit }) {
const { _items } = useItems();
@@ -288,4 +303,18 @@ body {
border: none;
border-radius: 0;
}
.inline-display {
width: max-content;
padding-right: 18px;
cursor: pointer;
.v-icon {
position: absolute;
}
&.placeholder {
color: var(--foreground-subdued);
}
}
</style>

View File

@@ -113,6 +113,7 @@
@input="limit = +$event"
:value="`${limit}`"
:items="['25', '50', '100', '250']"
inline
/>
</div>
</div>

View File

@@ -115,6 +115,7 @@
@input="limit = +$event"
:value="`${limit}`"
:items="['25', '50', '100', '250']"
inline
/>
</div>
</div>