github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-18 06:31:27 -05:00
Code Issues Packages Projects Releases Wiki Activity

Text-input / v-input fixes (#386)

Browse Source 
* textinput fixes including masking trimming icons and fonts

* removed masked attribute from v-input

* added wrapper div

* ugh

* test fix

* fixed all calls to monospace boolean except on textarea (in separate branch)

* readonly

* Remove unused wrapper div and rename readonly to disabled

* Rename readonly to disabled in story

* Prefer style over inline styles

* Fix codesmell

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Jacob Rienstra
2020-04-20 10:23:01 -04:00
committed by GitHub
parent 471c759df7
commit bf79610219
18 changed files with 248 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/v-select/readme.md
View File

@@ -23,25 +23,29 @@ Renders a dropdown input.
## Props
| Prop | Description | Default |
|---------------|-----------------------------------------------------|---------|
| `items`* | Items to render in the select | |
| ------------- | --------------------------------------------------- | ------- |
| `items`\* | Items to render in the select | |
| `itemText` | What item value to use for the display text | `text` |
| `itemValue` | What item value to use for the item value | `value` |
| `value` | Currently selected item(s) | |
| `multiple` | Allow multiple items to be selected | `false` |
| `placeholder` | What placeholder to show when no items are selected | |
| `full-width` | Render the select at full width | |
| `monospace` | Render the value and options monospaced | |
| `disabled` | Disable the select | |
## Events
| Event | Description | Value |
|---------|--------------------------|-----------------------------------------|
| ------- | ------------------------ | --------------------------------------- |
| `input` | New value for the select | `(string | number)[] | string | number` |
## Slots
n/a
## CSS Variables
n/a
| Variable | Default |
| ------------------------ | -------------------------- |
| `--v-select-font-family` | `var(--family-sans-serif)` |

27
src/components/v-select/v-select.vue
View File

@@ -8,7 +8,6 @@
<template #activator="{ toggle }">
<v-input
:full-width="fullWidth"
:monospace="monospace"
readonly
:value="displayValue"
@click="toggle"
@@ -29,7 +28,7 @@
@click="multiple ? null : $emit('input', item.value)"
>
<v-list-item-content>
<span v-if="multiple === false" :class="{ monospace }">{{ item.text }}</span>
<span v-if="multiple === false" class="item-text">{{ item.text }}</span>
<v-checkbox
v-else
:inputValue="value || []"
@@ -86,10 +85,6 @@ export default defineComponent({
type: Boolean,
default: false,
},
monospace: {
type: Boolean,
default: false,
},
allowNull: {
type: Boolean,
default: false,
@@ -147,15 +142,23 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.monospace {
font-family: var(--family-monospace);
}
.v-select {
--v-select-font-family: var(--family-sans-serif);
.v-input {
cursor: pointer;
font-family: var(--v-select-font-family);
.item-text {
font-family: var(--v-select-font-family);
}
.v-input {
--v-input-font-family: var(--v-select-font-family);
::v-deep input {
cursor: pointer;
::v-deep input {
cursor: pointer;
}
}
}
</style>