Don't wrap text in nav (#4035)

* Move v-list-item-text to v-text-overflow, use in tables

* Fix type issue

app/src/components/register.ts

@@ -21,7 +21,7 @@ import VIcon from './v-icon/';
 import VInfo from './v-info/';
 import VInput from './v-input/';
 import VItemGroup, { VItem } from './v-item-group';
-import VList, { VListGroup, VListItem, VListItemContent, VListItemHint, VListItemIcon, VListItemText } from './v-list/';
+import VList, { VListGroup, VListItem, VListItemContent, VListItemHint, VListItemIcon } from './v-list/';
 import VMenu from './v-menu/';
 import VDrawer from './v-drawer/';
 import VNotice from './v-notice/';
@@ -38,6 +38,7 @@ import VSwitch from './v-switch/';
 import VTable from './v-table/';
 import VTabs, { VTab, VTabsItems, VTabItem } from './v-tabs/';
 import VTextarea from './v-textarea';
+import VTextOverflow from './v-text-overflow.vue';
 import VUpload from './v-upload';
 
 Vue.component('v-avatar', VAvatar);
@@ -70,7 +71,6 @@ Vue.component('v-list-group', VListGroup);
 Vue.component('v-list-item-content', VListItemContent);
 Vue.component('v-list-item-hint', VListItemHint);
 Vue.component('v-list-item-icon', VListItemIcon);
-Vue.component('v-list-item-text', VListItemText);
 Vue.component('v-list-item', VListItem);
 Vue.component('v-list', VList);
 Vue.component('v-menu', VMenu);
@@ -92,6 +92,7 @@ Vue.component('v-table', VTable);
 Vue.component('v-tabs-items', VTabsItems);
 Vue.component('v-tabs', VTabs);
 Vue.component('v-textarea', VTextarea);
+Vue.component('v-text-overflow', VTextOverflow);
 Vue.component('v-upload', VUpload);
 
 import TransitionBounce from './transition/bounce';

app/src/components/v-divider/v-divider.story.ts

@@ -1,109 +0,0 @@
-import VDivider from './v-divider.vue';
-import readme from './readme.md';
-import withPadding from '../../../.storybook/decorators/with-padding';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-import { defineComponent } from '@vue/composition-api';
-import VList, { VListItem, VListItemContent, VListItemText, VListItemIcon } from '@/components/v-list';
-import VIcon from '@/components/v-icon/';
-
-export default {
-	title: 'Components / Divider',
-	parameters: {
-		notes: readme,
-	},
-	decorators: [withPadding, withKnobs],
-};
-
-export const basic = () =>
-	defineComponent({
-		components: { VDivider },
-		props: {
-			vertical: {
-				default: boolean('Vertical', false),
-			},
-		},
-		template: `
-			<v-divider :vertical="vertical" />
-		`,
-	});
-
-export const withText = () =>
-	defineComponent({
-		components: { VDivider },
-		props: {
-			vertical: {
-				default: boolean('Vertical', false),
-			},
-			inlineTitle: {
-				default: boolean('Inline Title', true),
-			},
-		},
-		template: `
-			<v-divider v-bind="{ vertical, inlineTitle }">
-				This is a divider.
-			</v-divider>
-		`,
-	});
-
-export const withColorIcon = () =>
-	defineComponent({
-		components: { VDivider, VIcon },
-		props: {
-			vertical: {
-				default: boolean('Vertical', false),
-			},
-			inlineTitle: {
-				default: boolean('Inline Title', true),
-			},
-		},
-		template: `
-			<v-divider v-bind="{ vertical, inlineTitle }" :style="{'--v-divider-color': 'var(--secondary-125)', '--v-divider-label-color':  'var(--secondary-125)'}">
-			<template #icon><v-icon name="box"></template>
-			This is a divider.
-			</v-divider>
-		`,
-	});
-
-export const inList = () =>
-	defineComponent({
-		components: {
-			VDivider,
-			VList,
-			VListItem,
-			VListItemContent,
-			VListItemIcon,
-			VListItemText,
-			VIcon,
-		},
-		props: {},
-		template: `
-			<v-sheet style="max-width: 200px">
-				<v-list>
-					<v-list-item v-for="n in 3" @click="() => {}">
-						<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
-						<v-list-item-content>
-							<v-list-item-text>Item {{ n }}</v-list-item-text>
-						</v-list-item-content>
-					</v-list-item>
-
-					<v-divider style="margin-top: 8px; margin-bottom: 8px;" />
-
-					<v-list-item v-for="n in 1" @click="() => {}">
-						<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
-						<v-list-item-content>
-							<v-list-item-text>Item {{ n + 3 }}</v-list-item-text>
-						</v-list-item-content>
-					</v-list-item>
-
-					<v-divider style="margin-top: 8px; margin-bottom: 8px;" />
-
-					<v-list-item v-for="n in 3" @click="() => {}">
-						<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
-						<v-list-item-content>
-							<v-list-item-text>Item {{ n + 4 }}</v-list-item-text>
-						</v-list-item-content>
-					</v-list-item>
-				</v-list>
-			</v-sheet>
-		`,
-	});

app/src/components/v-form/v-form.vue

@@ -91,7 +91,7 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
-		const el = ref<Element | null>(null);
+		const el = ref<Element>();
 		const fieldsStore = useFieldsStore();
 
 		const values = computed(() => {

app/src/components/v-list/index.ts

@@ -1,11 +1,10 @@
 import VList from './v-list.vue';
 import VListItem from './v-list-item.vue';
 import VListItemContent from './v-list-item-content.vue';
-import VListItemText from './v-list-item-text.vue';
 import VListItemIcon from './v-list-item-icon.vue';
 import VListItemHint from './v-list-item-hint.vue';
 import VListGroup from './v-list-group.vue';
 
-export { VList, VListItem, VListItemContent, VListItemText, VListItemIcon, VListItemHint, VListGroup };
+export { VList, VListItem, VListItemContent, VListItemIcon, VListItemHint, VListGroup };
 
 export default VList;

app/src/components/v-list/v-list-item-text.vue

@@ -1,17 +0,0 @@
-<template functional>
-	<div class="v-list-item-text">
-		<slot />
-	</div>
-</template>
-
-<style lang="scss" scoped>
-.v-list-item-text {
-	flex-basis: 100%;
-	flex-grow: 1;
-	flex-shrink: 1;
-	align-self: center;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-</style>

app/src/components/v-list/v-list-item.vue

@@ -175,13 +175,13 @@ body {
 	}
 
 	&.dense {
-		::v-deep .v-list-item-text {
+		::v-deep .v-text-overflow {
 			color: var(--foreground-subdued);
 		}
 
 		&:hover,
 		&.active {
-			::v-deep .v-list-item-text {
+			::v-deep .v-text-overflow {
 				color: var(--primary);
 			}
 		}

app/src/components/v-table/table-row/table-row.vue

@@ -15,7 +15,10 @@
 			<v-checkbox :inputValue="isSelected" @change="toggleSelect" />
 		</td>
 		<td class="cell" :class="getClassesForCell(header)" v-for="header in headers" :key="header.value">
-			<slot :name="`item.${header.value}`" :item="item">{{ get(item, header.value) }}</slot>
+			<slot :name="`item.${header.value}`" :item="item">
+				<v-text-overflow v-if="get(item, header.value)" :text="get(item, header.value)" />
+				<value-null v-else />
+			</slot>
 		</td>
 
 		<td class="spacer cell" />

app/src/components/v-text-overflow.vue

@@ -0,0 +1,46 @@
+<template>
+	<div class="v-text-overflow" ref="el" v-tooltip="hasEllipsis && text">
+		{{ text }}
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch } from '@vue/composition-api';
+import { useElementSize } from '@/composables/use-element-size';
+
+export default defineComponent({
+	props: {
+		text: {
+			type: String,
+			required: true,
+		},
+	},
+	setup() {
+		const el = ref<HTMLElement>();
+		const hasEllipsis = ref(false);
+
+		const { width } = useElementSize(el);
+
+		watch(
+			width,
+			() => {
+				console.log(width.value);
+				if (!el.value) return;
+				hasEllipsis.value = el.value.offsetWidth < el.value.scrollWidth;
+			},
+			{ immediate: true }
+		);
+
+		return { el, hasEllipsis };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.v-text-overflow {
+	overflow: hidden;
+	line-height: 1.1;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+</style>