@usb-ai/retag-search-input NPM

@usb-ai/retag-search-input

@usb-ai/retag-search-input is a vanilla javascript component which will work in any frontend framework. You can install from npm like this:

npm install --save @usb-ai/retag-search-input

Usage: Javascript (assumes es module)

import SearchInput from '@usb-ai/retag-search-input'

let searchInput = new SearchInput({target:document.body, props: { label: 'Search' });
searchInput.label = 'Updated Value';

The "target" is where the component is created. Here it is added to the html body with "document.body", but it could also be document.getElementById('id-of-html-element').

You initialize properties with "props" and you can change the prop values by just assigning the props to new values - this will be updated in the UI.

Usage: Legacy Javascript

Below you can see how to use the component with vanilla js.

...
<head>
  ...
  <script src="https://unpkg.com/@usb-ai/retag-search-input@0.0.2/index.js"></script>
</head>
<body>
  <script>
    let searchInput = new SearchInput({ target: document.body });
  </script>
</body>

Usage: Web Component (aka. Custom Element)

You can use it as a web component.

<head>
  <script src="https://unpkg.com/@usb-ai/retag-search-input@0.0.2/index.js"></script>
</head>
<body>
  <retag-search-input label="Search" />
</body>

Svelte Component

<script>
  import SearchInput from "@usb-ai/retag-search-input";
</script>
<SearchInput />

Theme

In order to use the provided theme you should import root.css (TODO: add it to the bundle, download it here in the meantime: https://github.com/usb-ai/retag-search/tree/main/packages/%40usb-ai/retag-search-input/), which sets different css variables used in the component which you can adapt for your own.

FIXME: href path of link is not yet available in this bundle

<head>
  ...
  <link href="root.css" rel="stylesheet" />
</head>

Alternatively you can set the variables in inline style in your prefered html
document of your website: ```html
<style>
  :root {
    --color-bg: #fff;
    --color-bg-secondary: #e9e9e9;
    --color-text: #000;
    --color-text-secondary: #999;
    --border-radius: 5px;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --width-card-wide: 800px;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: #333;
      --color-bg-secondary: #555;
      --color-text: #f7f7f7;
      --color-text-secondary: #aaa;
    }
  }
</style>

Pelte

This component was created by pelte (aka publish-svelte)

@infinitebrahmanuniverse/nolb-_usb @everything-registry/sub-chunk-971

0.0.2

3 years ago

0.0.1

3 years ago