parent
d87405ae5b
commit
7897ce7354
|
@ -2,6 +2,7 @@
|
||||||
import type { UpEntry } from '@upnd/upend';
|
import type { UpEntry } from '@upnd/upend';
|
||||||
import { attributeLabels } from '$lib/util/labels';
|
import { attributeLabels } from '$lib/util/labels';
|
||||||
import UpObject from './UpObject.svelte';
|
import UpObject from './UpObject.svelte';
|
||||||
|
import Ellipsis from '$lib/components/utils/Ellipsis.svelte';
|
||||||
export let resolve = true;
|
export let resolve = true;
|
||||||
|
|
||||||
export let entry: UpEntry;
|
export let entry: UpEntry;
|
||||||
|
@ -12,13 +13,13 @@
|
||||||
<UpObject plain link address={entry.entity} labels={resolve ? undefined : []} />
|
<UpObject plain link address={entry.entity} labels={resolve ? undefined : []} />
|
||||||
</div>
|
</div>
|
||||||
<div class="attribute" title={entry.attribute}>
|
<div class="attribute" title={entry.attribute}>
|
||||||
{$attributeLabels[entry.attribute] || entry.attribute}
|
<Ellipsis value={$attributeLabels[entry.attribute] || entry.attribute} />
|
||||||
</div>
|
</div>
|
||||||
<div class="value value-{entry.value.t.toLowerCase()}">
|
<div class="value value-{entry.value.t.toLowerCase()}">
|
||||||
{#if entry.value.t === 'Address'}
|
{#if entry.value.t === 'Address'}
|
||||||
<UpObject link address={entry.value.c} labels={resolve ? undefined : []} />
|
<UpObject link address={entry.value.c} labels={resolve ? undefined : []} />
|
||||||
{:else}
|
{:else}
|
||||||
{entry.value.c}
|
<Ellipsis value={entry.value.c} />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -41,14 +42,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.attribute {
|
.attribute {
|
||||||
|
position: relative;
|
||||||
|
top: 0.2em;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
&::before {
|
|
||||||
content: '→\00a0';
|
|
||||||
}
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '\00a0→';
|
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 type { Meta, StoryObj } from '@storybook/svelte';
|
||||||
import Selector from '../lib/components/utils/Selector.svelte';
|
import Selector from '../lib/components/utils/Selector.svelte';
|
||||||
|
import NarrowDecorator from './NarrowDecorator.svelte';
|
||||||
|
|
||||||
const meta: Meta<Selector> = {
|
const meta: Meta<Selector> = {
|
||||||
title: 'Widgets/Selector',
|
title: 'Widgets/Selector',
|
||||||
|
@ -80,3 +81,10 @@ export const MultipleValues: Story = {
|
||||||
types: ['String', 'Number']
|
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 videoVerticalAddress = 'zb2rhocWjf4rc39Wi7TDv6KaVxs2iTQqN6CVYR6m7M8AYgp9c';
|
||||||
|
|
||||||
export const stlAddress = 'zb2rhbprcQL38kifW8aMW8cvgWymtaBEe6fK9n3nzDum25Paf';
|
export const stlAddress = 'zb2rhbprcQL38kifW8aMW8cvgWymtaBEe6fK9n3nzDum25Paf';
|
||||||
|
|
||||||
|
export const entryAddress = 'zb2rhkxWUCBYuXGF4dCEDWrR48V19ujimULcSGvThknLEBrDm';
|
||||||
|
|
Loading…
Reference in New Issue