open-index/open-npm huggingface dataset:
npm package: @michael-chiang-dev5/lib-vue-custom-background
Description: A vue component for a button that allows the user to select an image. Returns the image as a base64 string.
Latest version: 0.0.2

# Description

A vue component for a button that allows the user to select an image. Returns the image as a base64 string.

## Usage

```javascript
import { SetBackgroundButton } from '@michael-chiang-dev5/lib-vue-custom-background'
```

## Props
idStr - a string that can be used to style the button via css
classStr - a string that can be used to style the button via css

## Emits
update - passes the image as a base64 string

## Example

``` html
<template>
  <div :style="{ backgroundImage: `url(${backgroundImageData})`, width: '800px', height: '600px' }">
  </div>
  <SetBackgroundButton @update="(image64) => backgroundImageData = image64">Click me</SetBackgroundButton>
</template>

<script setup>
import {  ref } from 'vue'
import { SetBackgroundButton } from '@michael-chiang-dev5/lib-vue-custom-background'

const backgroundImageData = ref(null)

</script>
```
npm package: @michael-chiang-dev5/lib-vue-modal
Description: Creates a modal. Modal wraps user input so that it is displayed in the center of the screen. User is responsible for supplying logic to show/hide the modal.
Latest version: 0.0.2

# Description

Creates a modal. Modal wraps user input so that it is displayed in the center of the screen. User is responsible for supplying logic to show/hide the modal.

## Usage
Import with:
```javascript
import { ModalWrapper } from '@michael-chiang-dev5/lib-vue-modal'
import '@michael-chiang-dev5/lib-vue-modal/style.css'
```

## Emits
```
@close - callback that will be called when the top-right 'x' button is clicked
```
## Example
This is how you might write a modal that asks the user to confirm a delete action.

```html
<template>
    <ModalWrapper @close="handleCancel">
        <h1>Are you sure you want to delete?</h1>
        <div class="confirm-delete">
            <div class="actions">
                <button type="button" @click="handleCancel()">
                    No
                </button>
                <button type="button" @click="handleConfirm()">
                    Yes
                </button>
            </div>
        </div>
    </ModalWrapper>
</template>

<script setup>
import { ModalWrapper } from '@michael-chiang-dev5/lib-vue-modal'
import '@michael-chiang-dev5/lib-vue-modal/style.css'
const emit = defineEmits(['confirm', 'cancel'])
const handleCancel = () => emit('cancel')
const handleConfirm = () => emit('confirm')
</script>
```


## Publishing

* copy/paste folder `my-library` and rename it to <LIB_FOLDER_NAME>
* Search/replace "MyVueComponent" --> <NAME_OF_YOUR_COMPONENT>. Also rename `src/components/MyVueComponent.vue`
* Give your library a name: Search/replace "@michael-chiang-dev5/example-vue-component-lib" to <NPM_LIBRARY_NAME> 
* Test that component transpiles properly with `npm run build`
* Publish with: `npm publish --access public`

## Importing
* You can import by `npm link` (preferred)
* You can import by symlinking directly
    * add to package.json: `"<NPM_LIBRARY_NAME": "file:<PATH><LIB_FOLDER_NAME>"`
* You can import by `npm install <NPM_LIBRARY_NAME>`

## Usage
```javacript
import { NAME_OF_YOUR_COMPONENT } from 'NPM_LIBRARY_NAME'
```

## Notes

* Note all dependencies are devDependencies. This is because the component is compiled into a single file when bundled as a library.
* For more information (especially about TS) see: https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library-update/
npm package: @michael-chiang-dev5/lib-vue-overlay-draw
Description: This is a vue component that that overlays a drawing tool over a vue component
Latest version: 0.0.1

# Description

This is a vue component that that overlays a drawing tool over a vue component

## Usage:

* Import the vue component:
```
import { OverlayDrawer } from '@michael-chiang-dev5/lib-vue-overlay-draw'
```
* Import css: import "@michael-chiang-dev5/overlay-drawer/style.css"
```
import '@michael-chiang-dev5/lib-vue-overlay-draw/style.css'
```
* Use `OverlayDrawer` to overlay a drawing tool over another vue component 
```
  <OverlayDrawer>
    <YourComponent />
  </OverlayDrawer>
```

## Example:

```html
<template>
  <div>
      <input type="radio" id="radio1" :value="OVERLAY_MODE.DISABLED" v-model="mode" />
      <label>disable</label>
    
      <input type="radio" id="radio2" :value="OVERLAY_MODE.RECTANGLE" v-model="mode" />
      <label>rectangle</label>

      <input type="radio" id="radio3" :value="OVERLAY_MODE.ELLIPSE" v-model="mode" />
      <label>ellipse</label>

      <input type="radio" id="radio4" :value="OVERLAY_MODE.ARROW" v-model="mode" />
      <label>arrow</label>

      <input type="radio" id="radio5" :value="OVERLAY_MODE.TEXT" v-model="mode" />
      <label>text</label>

      <input type="radio" id="radio6" :value="OVERLAY_MODE.SELECTION" v-model="mode" />
      <label>selection</label>
  </div> 
  <OverlayDrawer 
    :width="800" 
    :height="600" 
    :mode="mode"
    >
      <div 
        :style="{backgroundColor: 'lightcoral', width: '800px', height: '600px'}"
        @click="() => console.info('clicked')"
      ></div>
  </OverlayDrawer>
</template>

<script setup>
  import { ref } from 'vue'
  import { OverlayDrawer } from '@michael-chiang-dev5/lib-vue-overlay-draw'
  import '@michael-chiang-dev5/lib-vue-overlay-draw/style.css'
  import { OVERLAY_MODE } from '@michael-chiang-dev5/lib-vue-overlay-draw'

  const mode = ref(OVERLAY_MODE.TEXT)
</script>
```
npm package: @michael-chiang-dev5/overlay-drawer
Description: This is a vue component that that overlwys a drawing tool over a vue component
Latest version: 0.0.0

# Description

This is a vue component that that overlwys a drawing tool over a vue component

## Usage:

* Import the vue component: `import { OverlayDrawer } from '@michael-chiang-dev5/overlay-drawer'
* Import css: import "@michael-chiang-dev5/overlay-drawer/style.css"
* Use `OverlayDrawer` to overlay a drawing tool over another vue component 
```
  <OverlayDrawer :width="'800px'" :height="'600px'">
    <YourComponent />
  </OverlayDrawer>
```

## Example:

```html
<template>
  <OverlayDrawer :width="'800px'" :height="'600px'">
    <div class="big-blue-square" @click="() => console.log('you clicked on the big-blue-square')">
      This is a big blue square
    </div>
  </OverlayDrawer>
</template>

<script setup>
import { OverlayDrawer } from '@michael-chiang-dev5/overlay-drawer'
import "@michael-chiang-dev5/overlay-drawer/style.css"
</script>


<style scoped>
.big-blue-square {
  width: 800px;
  height: 600px;
  background-color: lightblue;
}
</style>
```