parent
d87405ae5b
commit
7897ce7354
|
@ -2,6 +2,7 @@
|
|||
import type { UpEntry } from '@upnd/upend';
|
||||
import { attributeLabels } from '$lib/util/labels';
|
||||
import UpObject from './UpObject.svelte';
|
||||
import Ellipsis from '$lib/components/utils/Ellipsis.svelte';
|
||||
export let resolve = true;
|
||||
|
||||
export let entry: UpEntry;
|
||||
|
@ -12,13 +13,13 @@
|
|||
<UpObject plain link address={entry.entity} labels={resolve ? undefined : []} />
|
||||
</div>
|
||||
<div class="attribute" title={entry.attribute}>
|
||||
{$attributeLabels[entry.attribute] || entry.attribute}
|
||||
<Ellipsis value={$attributeLabels[entry.attribute] || entry.attribute} />
|
||||
</div>
|
||||
<div class="value value-{entry.value.t.toLowerCase()}">
|
||||
{#if entry.value.t === 'Address'}
|
||||
<UpObject link address={entry.value.c} labels={resolve ? undefined : []} />
|
||||
{:else}
|
||||
{entry.value.c}
|
||||
<Ellipsis value={entry.value.c} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -41,14 +42,21 @@
|
|||
}
|
||||
|
||||
.attribute {
|
||||
position: relative;
|
||||
top: 0.2em;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
&::before {
|
||||
content: '→\00a0';
|
||||
}
|
||||
&::after {
|
||||
content: '\00a0→';
|
||||
|
||||
position: absolute;
|
||||
top: calc(-50% + 2px);
|
||||
left: calc(50% - 2px);
|
||||
|
||||
transform: translateX(-50%);
|
||||
font-size: 0.66em;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import type { Meta, StoryObj } from '@storybook/svelte';
|
||||
import Selector from '../lib/components/utils/Selector.svelte';
|
||||
import NarrowDecorator from './NarrowDecorator.svelte';
|
||||
|
||||
const meta: Meta<Selector> = {
|
||||
title: 'Widgets/Selector',
|
||||
|
@ -80,3 +81,10 @@ export const MultipleValues: Story = {
|
|||
types: ['String', 'Number']
|
||||
}
|
||||
};
|
||||
|
||||
export const Narrow: Story = {
|
||||
args: {
|
||||
types: AllValues.args!.types
|
||||
},
|
||||
decorators: [() => NarrowDecorator as any]
|
||||
};
|
||||
|
|
|
@ -0,0 +1,47 @@
|
|||
import type { Meta, StoryObj } from '@storybook/svelte';
|
||||
import { UpEntry, UpListing } from '@upnd/upend';
|
||||
import { entryAddress, videoAddress } from './common';
|
||||
import NarrowDecorator from './NarrowDecorator.svelte';
|
||||
import UpEntryComponent from '../lib/components/display/UpEntry.svelte';
|
||||
|
||||
const entry = new UpEntry(
|
||||
entryAddress,
|
||||
{
|
||||
entity: videoAddress,
|
||||
attribute: 'ATTRIBUTE_PERHAPS_LONG',
|
||||
value: { t: 'String', c: 'This Is A Video' },
|
||||
provenance: 'MOCK',
|
||||
timestamp: new Date().toISOString()
|
||||
},
|
||||
new UpListing({})
|
||||
);
|
||||
|
||||
const meta: Meta<UpEntryComponent> = {
|
||||
title: 'Display/UpEntry',
|
||||
component: UpEntryComponent,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
entry
|
||||
},
|
||||
argTypes: {
|
||||
address: {
|
||||
defaultValue: entry,
|
||||
name: 'Entry'
|
||||
},
|
||||
onResolved: {
|
||||
action: 'resolved'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<UpEntryComponent>;
|
||||
|
||||
export const Default: Story = {};
|
||||
|
||||
export const Overflow: Story = {
|
||||
args: {
|
||||
labels: ['qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm'.repeat(3)]
|
||||
},
|
||||
decorators: [() => NarrowDecorator as any]
|
||||
};
|
|
@ -7,3 +7,5 @@ export const videoAddress = 'zb2rhnhv2Me2ZWohSYp7kyf1KAQbZ1zsLficHsaWTgoex67iJ';
|
|||
export const videoVerticalAddress = 'zb2rhocWjf4rc39Wi7TDv6KaVxs2iTQqN6CVYR6m7M8AYgp9c';
|
||||
|
||||
export const stlAddress = 'zb2rhbprcQL38kifW8aMW8cvgWymtaBEe6fK9n3nzDum25Paf';
|
||||
|
||||
export const entryAddress = 'zb2rhkxWUCBYuXGF4dCEDWrR48V19ujimULcSGvThknLEBrDm';
|
||||
|
|
Loading…
Reference in New Issue