spi-widgets

v0.0.9

Published

3 years ago

``` cd qilab-widgets npm run dev ```

0High
0Medium
0Low

Start in Dev mode

cd qilab-widgets
npm run dev

Use your components on library's index.html to test it!

Start in Dev mode on Angular

Build library to test it on external projects

cd qilab-widgets
npm run build

Create new Angular project

ng new [PROJECT_NAME]
cd [PROJECT_NAME]
npm i lit
npm link qilab-widgets
npm run start

in AppModule (or any other Angular module you want import library)

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import "node_modules/qilab-widgets/dist/widgets"


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Use components in html files

<div class="container">
     <div class="row my-4">
      <div class="col">
        <widget-input-integer 
            [validationMsg]="validationMsg" #validation 
            [required]="true" label="Integer Input"
            id="integer" name="integer" [value]="formValues.integer"
           (valueChange)=" valueChange($event)">
           </widget-input-integer>
      </div>
    </div>
</div>

Start in Dev mode on React

Build library to test it on external projects

cd qilab-widgets
npm run build

Create new React project

npx create-react-app [PROJECT_NAME] --template typescript
cd [PROJECT_NAME]
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
npm i @lit-labs/react
npm link qilab-widgets
npm run start

in App.tsx

 import { createComponent } from '@lit-labs/react';
 import  * as Compo from '../node_modules/qilab-widgets/dist/widgets'

export const WidgetSwitchReact = createComponent({
 tagName: 'widget-switch',
 elementClass: Compo.WidgetSwitch,
 react: React,
 events: {
     input: 'valueChange',
 },
});

export const WidgetInputTextReact = createComponent({
 tagName: 'widget-input-text',
 elementClass: Compo.WidgetInputText,
 react: React,
 events: {
     input: 'valueChange',
 },
});


function App() {
 return (
   <>
  <WidgetSwitchReact></WidgetSwitchReact>
  <WidgetInputTextReact></WidgetInputTextReact>
  </>
 )
}

Start in Dev mode on Vanilla

Create Vanilla Project using parcel js

mkdir [PROJECT_NAME]
cd [PROJECT_NAME]
npm init
npm install --save-dev parcel
touch index.html
npm link qilab-widgets
parcel index.html

in index.html

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <!--Import lib module with type=module -->
   <script type="module" src="../node_modules/qilab-widgets/dist/widgets.js"></script>

</head>

<body>
   <widget-switch></widget-switch>

   <widget-input-text label="Test Label"></widget-input-text>


</body>

</html>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Start in Dev mode

Start in Dev mode on Angular

Start in Dev mode on React

Start in Dev mode on Vanilla