mirror of
https://github.com/directus/directus.git
synced 2026-02-08 08:15:44 -05:00
Inline select (#537)
* Add inline mode support to v-select * Use inline selects on tabular/cards
This commit is contained in:
@@ -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>
|
||||
`,
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
`,
|
||||
});
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
`,
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -113,6 +113,7 @@
|
||||
@input="limit = +$event"
|
||||
:value="`${limit}`"
|
||||
:items="['25', '50', '100', '250']"
|
||||
inline
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -115,6 +115,7 @@
|
||||
@input="limit = +$event"
|
||||
:value="`${limit}`"
|
||||
:items="['25', '50', '100', '250']"
|
||||
inline
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user