block builde: add prview
This commit is contained in:
parent
a0211026ba
commit
fea5319dc5
|
@ -21,6 +21,7 @@ class TextareaBlock extends EditorBlock
|
||||||
->addSetting(name: 'nl2br', label: 'Insert line breaks', type: 'checkbox', default: true)
|
->addSetting(name: 'nl2br', label: 'Insert line breaks', type: 'checkbox', default: true)
|
||||||
->addSetting(name: 'allowHtml', label: 'Allow HTML', type: 'checkbox', default: false)
|
->addSetting(name: 'allowHtml', label: 'Allow HTML', type: 'checkbox', default: false)
|
||||||
->addSetting(name: 'value', type: 'textarea')
|
->addSetting(name: 'value', type: 'textarea')
|
||||||
|
->setPreview('value')
|
||||||
;
|
;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,6 +12,7 @@ abstract class BuilderBlock
|
||||||
protected array $widgets = [];
|
protected array $widgets = [];
|
||||||
protected array $vars = [];
|
protected array $vars = [];
|
||||||
protected string $template = '';
|
protected string $template = '';
|
||||||
|
protected ?string $preview = null;
|
||||||
protected bool $isContainer = false;
|
protected bool $isContainer = false;
|
||||||
protected ?string $icon = null;
|
protected ?string $icon = null;
|
||||||
protected int $order = 1;
|
protected int $order = 1;
|
||||||
|
@ -171,6 +172,18 @@ abstract class BuilderBlock
|
||||||
return $this->order;
|
return $this->order;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function setPreview(?string $preview): self
|
||||||
|
{
|
||||||
|
$this->preview = $preview;
|
||||||
|
|
||||||
|
return $this;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getPreview(): ?string
|
||||||
|
{
|
||||||
|
return $this->preview;
|
||||||
|
}
|
||||||
|
|
||||||
public function buildVars(array $data, array $context)
|
public function buildVars(array $data, array $context)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -190,6 +203,7 @@ abstract class BuilderBlock
|
||||||
'settings' => $this->getSettings(),
|
'settings' => $this->getSettings(),
|
||||||
'class' => $this->getClass(),
|
'class' => $this->getClass(),
|
||||||
'icon' => $this->getIcon(),
|
'icon' => $this->getIcon(),
|
||||||
|
'preview' => $this->getPreview(),
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -846,6 +846,13 @@ label.required::after {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.block-preview {
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: 30%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
dialog {
|
dialog {
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
@ -31,6 +31,13 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="widget.preview && typeof item.settings[widget.preview] == 'string'"
|
||||||
|
class="block-preview"
|
||||||
|
>
|
||||||
|
{{ truncate(item.settings[widget.preview]) }}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<span class="block-id">
|
<span class="block-id">
|
||||||
{{ item.id }}
|
{{ item.id }}
|
||||||
|
@ -144,6 +151,9 @@ export default {
|
||||||
this.openedBlocks[this.item.id] = !this.openedBlocks[this.item.id]
|
this.openedBlocks[this.item.id] = !this.openedBlocks[this.item.id]
|
||||||
this.showSettings = !this.showSettings
|
this.showSettings = !this.showSettings
|
||||||
},
|
},
|
||||||
|
truncate(value) {
|
||||||
|
return value.replace(/(<([^>]+)>)/ig, '')
|
||||||
|
},
|
||||||
removeMe() {
|
removeMe() {
|
||||||
this.$emit('remove-item')
|
this.$emit('remove-item')
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue