open-index/open-npm huggingface dataset:
npm package: @imo-tikuwa/vue3-plugin-dev-study
Description: This is Vue3&Bootstrap5 component library development examples.
Latest version: 0.0.3

# @imo-tikuwa/vue3-plugin-dev-study

This is Vue3&Bootstrap5 component library development examples.

## Installation
```
npm install -D @imo-tikuwa/vue3-plugin-dev-study
```

## Usage
1. import plugin.
```diff:main.ts
import { createApp } from 'vue'
import App from './App.vue'

import { BootstrapButtonPlugin } from '@imo-tikuwa/vue3-plugin-dev-study'

createApp(App).use(BootstrapButtonPlugin).mount('#app')
```

2. You can display Bootstrap5 buttons using the following code:
```vue:SomethingPage.vue
<script setup lang="ts">
import { BaseButton } from '@imo-tikuwa/vue3-plugin-dev-study'
</script>

<template>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <BaseButton label="Primary" class="me-2" />
        <BaseButton label="Secondary" :color="'secondary'" class="me-2" />
        <BaseButton label="Success" :color="'success'" class="me-2" />
        <BaseButton label="Danger" :color="'danger'" class="me-2" />
        <BaseButton label="Warning" :color="'warning'" class="me-2" />
        <BaseButton label="Info" :color="'info'" class="me-2" />
        <BaseButton label="Light" :color="'light'" class="me-2" />
        <BaseButton label="Dark" :color="'dark'" class="me-2" />
        <BaseButton label="Link" :color="'link'" />
      </div>
    </div>
  </div>
</template>
```

## BaseButton Properties

| Option    | Required | Values                                     | Default    | Description                    |
|-----------|----------|--------------------------------------------|------------|--------------------------------|
| label     |          | string                                     |            | The text displayed on the button|
| size      |          | 'small' \| 'medium' \| 'large'             | 'medium'   | Size of the button             |
| outline   |          | boolean                                    | false      | Specifies if it's an outline button or not |
| color     |          | 'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'light' \| 'dark' \| 'link' | 'primary'  | Color variant of the button |
| disabled  |          | boolean                                    | false      | Disables the button            |
npm package: @imob-phoenix/card
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.
Author: Sistema iMob
Latest version: 0.1.19

# Card

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.

## Code scaffolding

Run `ng generate component component-name --project card` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project card`.
> Note: Don't forget to add `--project card` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build card` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build card`, go to the dist folder `cd dist/card` and run `npm publish`.

## Running unit tests

Run `ng test card` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @imob-phoenix/modal
Description: Lib para utilização de modal dinâmica padrão para as aplicações iMob.
Author: Sistema iMob
Latest version: 2.1.38

# ImobModal

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0.

Lib para utilização de modais dinâmicas em qualquer aplicação iMob.

### Instalação:

**1. Instale o pacote pelo NPMJS na aplicação:**

<pre>> npm i @imob-phoenix/modal</pre>
<br>

**2. Importe o módulo da lib:**<br>
No _app.module.ts_ da aplicação, insira o módulo **`ModalModule`** nos _imports_:

<pre>
import { ModalModule } from 'imob-modal';

@NgModule({
  imports: [ModalModule],
  ...
})
export class AppModule { }
</pre>
<br>

**3. Utilização do componente:**<br>

- No componente da aplicação onde deseja utilizar a modal dinâmica, declare uma propriedade privada com o decorator **@ViewChild** para injetar uma instância do **`ModalComponent`** permitindo interagir com o componente da modal dinâmica diretamente a partir do componente pai (**`ParentComponent`**, por exemplo):
<pre>
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
    @ViewChild('modal')
    private modal: ModalComponent;
    ...
}</pre>

- No template do componente pai, utilize o seletor do componente da modal dinâmica da lib para utilização do comportamento da modal, incluindo também o identificador criado no componente (**`modal`**) para identificar a referência para o componente da modal dinâmica:

<pre>
< lib-modal #modal [component]="childComponent"> < /lib-modal>
</pre>

- Insira como child (dentro das tags do seletor), o conteúdo que deseja renderizar na modal. Sendo HTML nativo ou um outro seletor de um component filho, como no exemplo:
<pre>
< lib-modal #modal [component]="childComponent">
  < app-child> < /app-child> 
  < !-- COMPONENTES OU  QUALQUER CONTEÚDO HTML -->
< /lib-modal>
</pre>

- Caso necessário, utilize os bindings de _Input_ para setar tamanho e posicionamento da modal:

**Tamanho:**
<br>Propriedade: _**size**_
<br>Opções: _**[small, medium, large]**_
<br>Opções: _**[left, center, right]**_ - Enum _**Size**_ criado e exportado na lib.

**Posicionamento:**
<br>Propriedade: _**position**_
<br>Opções: _**[left, center, right]**_ - Enum _**Position**_ criado e exportado na lib.