Display stories (#668)

* rating

* datetime

* filesize

* image

* mime-type

* user

* Update .storybook/decorators/full-width.ts

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>

.storybook/decorators/full-width.ts

@@ -0,0 +1,5 @@
+export default function fullWidth() {
+	return {
+		template: `<div style="max-width: 632px;"><story /></div>`,
+	};
+}

.storybook/decorators/half-width.ts

@@ -0,0 +1,5 @@
+export default function halfWidth() {
+	return {
+		template: `<div style="max-width: 300px;"><story /></div>`,
+	};
+}

src/displays/datetime/datetime.story.ts

@@ -0,0 +1,35 @@
+import withPadding from '../../../.storybook/decorators/with-padding';
+import { withKnobs, date, select } from '@storybook/addon-knobs';
+import readme from './readme.md';
+import { defineComponent, ref, watch } from '@vue/composition-api';
+
+export default {
+	title: 'Displays / Datetime',
+	decorators: [withPadding, withKnobs],
+	parameters: {
+		notes: readme,
+	},
+};
+
+export const basic = () =>
+	defineComponent({
+		props: {
+			value: {
+				default: date('Value', new Date()),
+			},
+			type: {
+				default: select('Type', ['date', 'time', 'datetime'], 'datetime'),
+			},
+		},
+		setup(props) {
+			const val = ref(new Date(props.value).toISOString());
+			watch(
+				() => props.value,
+				() => (val.value = new Date(props.value).toISOString())
+			);
+			return { val };
+		},
+		template: `
+      <display-datetime :value="val" :type="type"/>
+    `,
+	});

src/displays/datetime/datetime.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch } from '@vue/composition-api';
+import { defineComponent, ref, watch, PropType } from '@vue/composition-api';
 import formatLocalized from '@/utils/localized-format';
 import i18n from '@/lang';
 import parse from 'date-fns/parse';
@@ -16,8 +16,9 @@ export default defineComponent({
 			required: true,
 		},
 		type: {
-			type: String,
+			type: String as PropType<'datetime' | 'time' | 'date'>,
 			required: true,
+			validator: (val: string) => ['datetime', 'date', 'time'].includes(val),
 		},
 	},
 	setup(props) {

src/displays/filesize/filesize.story.ts

@@ -0,0 +1,36 @@
+import withPadding from '../../../.storybook/decorators/with-padding';
+import { withKnobs, number } from '@storybook/addon-knobs';
+import readme from './readme.md';
+import { defineComponent, watch, ref } from '@vue/composition-api';
+import DisplayFilesize from './index';
+
+export default {
+	title: 'Displays / Filesize',
+	decorators: [withPadding, withKnobs],
+	parameters: {
+		notes: readme,
+	},
+};
+
+export const basic = () =>
+	defineComponent({
+		props: {
+			value: {
+				default: number('Value', 1024 * 1024),
+			},
+		},
+		setup(props) {
+			const val = ref(props.value);
+			watch(
+				() => props.value,
+				() => {
+					const handler = DisplayFilesize.handler as Function;
+					val.value = handler(props.value);
+				}
+			);
+			return { val };
+		},
+		template: `
+      <div>{{ val }}</div>
+    `,
+	});

src/displays/image/image.story.ts

@@ -0,0 +1,41 @@
+import withPadding from '../../../.storybook/decorators/with-padding';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import readme from './readme.md';
+import { defineComponent } from '@vue/composition-api';
+
+export default {
+	title: 'Displays / Image',
+	decorators: [withPadding, withKnobs],
+	parameters: {
+		notes: readme,
+	},
+};
+
+export const basic = () =>
+	defineComponent({
+		props: {
+			circle: {
+				default: boolean('Circle', false),
+			},
+		},
+		setup() {
+			const image = {
+				type: 'png',
+				data: {
+					thumbnails: [
+						{
+							key: 'directus-small-crop',
+							url:
+								'https://demo.directus.io/thumper/assets/pnw7s9lqy68048g0?key=directus-small-crop',
+						},
+					],
+				},
+			};
+			return { image };
+		},
+		template: `
+    <div style="max-width: 100px;">
+      <display-image :circle="circle" :value="image"/>
+    </div>
+    `,
+	});

src/displays/mime-type/mime-type.story.ts

@@ -0,0 +1,36 @@
+import withPadding from '../../../.storybook/decorators/with-padding';
+import { withKnobs, text } from '@storybook/addon-knobs';
+import readme from './readme.md';
+import { defineComponent, ref, watch } from '@vue/composition-api';
+import DisplayMimeType from './index';
+
+export default {
+	title: 'Displays / MimeType',
+	decorators: [withPadding, withKnobs],
+	parameters: {
+		notes: readme,
+	},
+};
+
+export const basic = () =>
+	defineComponent({
+		props: {
+			value: {
+				default: text('Value', 'image/png'),
+			},
+		},
+		setup(props) {
+			const val = ref(props.value);
+			watch(
+				() => props.value,
+				() => {
+					const handler = DisplayMimeType.handler as Function;
+					val.value = handler(props.value);
+				}
+			);
+			return { val };
+		},
+		template: `
+      <div>{{ val }}</div>
+    `,
+	});

src/displays/rating/rating.story.ts

@@ -0,0 +1,26 @@
+import withPadding from '../../../.storybook/decorators/with-padding';
+import { withKnobs, number } from '@storybook/addon-knobs';
+import readme from './readme.md';
+import { defineComponent } from '@vue/composition-api';
+
+export default {
+	title: 'Displays / Rating',
+	decorators: [withPadding, withKnobs],
+	parameters: {
+		notes: readme,
+	},
+};
+
+export const basic = () =>
+	defineComponent({
+		props: {
+			value: {
+				default: number('Value', 2, { max: 5, min: 0, step: 1 }),
+			},
+		},
+		template: `
+    <div style="max-width: 300px;">
+      <display-rating :value="value"/>
+    </div>
+    `,
+	});

src/displays/rating/rating.vue

@@ -3,14 +3,14 @@
 		<v-icon small name="star" />
 		{{ value }}
 	</span>
-	<span v-else class="rating detailed" v-tooltip.bottom="value">
+	<div v-else class="rating detailed" v-tooltip.bottom.start="value">
 		<div class="active" :style="ratingPercentage">
 			<v-icon v-for="index in starCount" :key="index" small name="star" />
 		</div>
 		<div class="inactive">
 			<v-icon v-for="index in starCount" :key="index" small name="star" />
 		</div>
-	</span>
+	</div>
 </template>
 
 <script lang="ts">
@@ -30,10 +30,6 @@ export default defineComponent({
 			type: Object as PropType<InterfaceOptions>,
 			default: null,
 		},
-		total: {
-			type: Number,
-			default: 5,
-		},
 	},
 	setup(props) {
 		const starCount = computed(() => {
@@ -69,9 +65,11 @@ export default defineComponent({
 
 	&.detailed {
 		position: relative;
+		width: min-content;
 		.active {
 			position: relative;
 			z-index: 2;
+			display: flex;
 			width: 0%;
 			overflow: hidden;
 			color: #ffc107;
@@ -81,6 +79,7 @@ export default defineComponent({
 			top: 0;
 			left: 0;
 			z-index: 1;
+			display: flex;
 			color: var(--background-normal);
 		}
 	}

src/displays/user/user.story.ts

@@ -0,0 +1,48 @@
+import withPadding from '../../../.storybook/decorators/with-padding';
+import { withKnobs, boolean, select } from '@storybook/addon-knobs';
+import readme from './readme.md';
+import { defineComponent } from '@vue/composition-api';
+
+export default {
+	title: 'Displays / User',
+	decorators: [withPadding, withKnobs],
+	parameters: {
+		notes: readme,
+	},
+};
+
+export const basic = () =>
+	defineComponent({
+		props: {
+			circle: {
+				default: boolean('Circle', false),
+			},
+			display: {
+				default: select('Display', ['avatar', 'name'], 'avatar'),
+			},
+		},
+		setup() {
+			const user = {
+				id: 1,
+				avatar: {
+					data: {
+						thumbnails: [
+							{
+								key: 'directus-small-crop',
+								url:
+									'https://demo.directus.io/thumper/assets/pnw7s9lqy68048g0?key=directus-small-crop',
+							},
+						],
+					},
+				},
+				first_name: 'John',
+				last_name: 'Smith',
+			};
+			return { user };
+		},
+		template: `
+    <div style="max-width: 100px;">
+      <display-user :display="display" :circle="circle" :value="user"/>
+    </div>
+    `,
+	});