Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@dbp-toolkit/common

Package Overview
Dependencies
Maintainers
3
Versions
29
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dbp-toolkit/common

You can install these components via npm:

  • 0.3.4
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
91
increased by44.44%
Maintainers
3
Weekly downloads
 
Created
Source

Common Code

You can install these components via npm:

npm i @dbp-toolkit/common

Icon Web Component

For valid icon names see: LineIcons

<script type="module" src="https://unpkg.com/@dbp-toolkit/common@0.2.8/dist/components.js"></script>
<dbp-icon style="color: red" name="menu-down"></dbp-icon>

Exposed CSS variables

Variables like --dbp-override-icon-<icon-name> can be used to override the icons.

Example CSS: html { --dbp-override-icon-cloud: url(/icons/cloud.svg); }

Translated Web Component

You can use this web component to show translated html.

<script type="module" src="https://unpkg.com/@dbp-toolkit/common@0.2.8/dist/components.js"></script>
<dbp-translated subscribe="lang">
    <div slot="de">
        Dieser Text ist Deutsch und wird Englisch werden wenn man die Sprache auf Englisch stellt.
    </div>
    <div slot="en">
        This text is English and will be German if the language is changed to German.
    </div>
</dbp-translated>

The English or German text will be shown according to the lang attribute.

Overriding slots in nested web components

If slots are used in web components then it is best to derive your component class from DBPLitElement and subscribe to the attribute html-overrides everywhere you use it with subscribe="html-overrides".

This way integrators who are using topics or activities are able to globally override these slots in their root html.

Example of the part of an index.html file for overriding the auth-info text in all Nextcloud file pickers of the signature topic:

<dbp-signature html-overrides="global-override"></dbp-signature>

<template id="global-override">
    <template id="dbp-nextcloud-file-picker">
        <div slot="auth-info">
            <dbp-translated subscribe="lang">
                <div slot="de">
                    Deutscher Text mit <a href="#ein-link">einem Link</a>
                </div>
                <div slot="en">
                    English text with <a href="#a-link">a link</a>
                </div>
            </dbp-translated>
        </div>
    </template>
</template>

By using html-overrides="global-override" in the topic dbp-signature you are able to define a template with id="global-override" that can hold one or more other templates for different components.

In our case we have a template id="dbp-nextcloud-file-picker", because we want to override slots in the component dbp-nextcloud-file-picker inside the signature topic.

You can define one or more slots in that template that should be overridden.

In our example we only want to override the slot auth-info, that holds additional text to add in the Nextcloud file picker component.

We are using the dbp-translated component to insert translated text at the specified position in the Nextcloud file picker.

FAQs

Package last updated on 12 Jul 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc