open-index/open-npm huggingface dataset:
npm package: @ghentcdh/cune-iiif-orm-viewer
Description: A Vue 3 based IIIF viewer for the Cune-iiif-orm project.
Author: feissN
Latest version: 0.9.5

# Cune-iiif-orm IIIF Viewer

This repository contains a Vue 3 based IIIF viewer for the Cune-iiif-orm project.


![img.png](img.png)

## Installation

```bash
pnpm add @ghentcdh/cune-iiif-orm-viewer
```

Import the required CSS in your entry file:

```js
import '@ghentcdh/cune-iiif-orm-viewer/style.css'
```

### Peer dependencies

| Package | Version |
|---------|---------|
| `vue` | `^3.0.0` |

---

## Usage

```vue
<script setup>
import { ManifestViewer } from '@ghentcdh/cune-iiif-orm-viewer'
</script>

<template>
  <ManifestViewer :manifest-id="manifestUrl" />
</template>
```

---

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `manifest-id` | `string` | required | IIIF manifest URL to load |
| `verbose` | `boolean` | `false` | Enable debug logging |
| `viewer-state-id` | `string` | `undefined` | Optional ID to scope/persist viewer state across instances |

---

## Slots

Slots receive their scope via Vue's provide/inject mechanism. Each slot is passed a scope object that exposes controls for the active image viewer. Use named slots with the `#slot-name="scope"` syntax to access these controls.

### Available slots

| Slot name | Scope | Position |
|-----------|-------|----------|
| `image-controls-bottom` | `ImageControlsScope` | Appended after zoom/rotation buttons (bottom-left overlay) |
| `image-controls-top` | `ImageControlsScope` | Appended after annotation toggle (top-left overlay) |

### `ImageControlsScope`

| Property | Type | Description |
|----------|------|-------------|
| `zoomIn` | `() => void` | Zoom in |
| `zoomOut` | `() => void` | Zoom out |
| `goHome` | `() => void` | Reset to home view |
| `rotateLeft` | `() => void` | Rotate counter-clockwise |
| `rotateRight` | `() => void` | Rotate clockwise |
| `osd` | `any` | Raw OpenSeadragon viewer instance |

### Example

```vue
<ManifestViewer :manifest-id="manifestUrl">
  <template #image-controls-bottom="{ goHome, osd }">
    <button @click="download(osd)">Download</button>
  </template>
  <template #image-controls-top>
    <MyCustomToggle />
  </template>
</ManifestViewer>
```

---

## TypeScript types

The following types are exported from the package:

```ts
import type {
  ManifestViewerProps,
  ManifestViewerSlots,
  ImageControlsScope,
} from '@ghentcdh/cune-iiif-orm-viewer'
```

## Credits

Development by [Ghent Centre for Digital Humanities - Ghent University](https://www.ghentcdh.ugent.be/). Funded by the [GhentCDH research projects](https://www.ghentcdh.ugent.be/projects).

<img src="https://www.ghentcdh.ugent.be/ghentcdh_logo_blue_text_transparent_bg_landscape.svg" alt="Landscape" width="500">
npm package: @ghentcdh/json-forms-core
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.6.9

# json-forms-core

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build json-forms-core` to build the library.

## Running unit tests

Run `nx test json-forms-core` to execute the unit tests via [Vitest](https://vitest.dev/).
npm package: @ghentcdh/json-forms-vue
Description: A json-forms library for Vue.js that allows you to create forms based on a JSON schema and a UI schema.
Latest version: 0.6.9

# Vue json-forms frontend 

A json-forms library for Vue.js that allows you to create forms based on a JSON schema and a UI schema.

It uses the components inside `@ghentcdh/ui` for styling


## Install the library

```ssh
pnpm add @ghentcdh/json-forms-vue
```

# Add the styling to your project

## Install the libraries

```ssh
pnpm add @ghentcdh/auth/vue @ghentcdh/auth/backend
```

## Add the styling

Add the styling to your project by importing the css file in your main.js or App.vue file:

```scss 

```

## Show the form

A json form can be shown using the `FormComponent` component. The component requires a schema and a ui schema to be passed as props, and it uses the `v-model` directive to bind the form data.

```vue
import {FormComponent} from '@ghentcdh/json-forms-vue';

<div>
  <FormComponent 
    :schema="schema"
    :uischema="uischema"
    v-model="formData" />
  <pre>{{formData}}</pre>
</div>
```
npm package: @ghentcdh/tools-api
Description: This library consist of a group of tools used by the GhentCDH projects.
Latest version: 0.6.9

This library consist of a group of tools used by the GhentCDH projects.

# Health api

This will add a health check endpoint to the nestjs application.

Add it to the `AppModule` imports

```typescript

import { HealthApiModule } from '@ghentcdh/tools/health/api';

@Module({
  imports: [
    ...
    HealthApiModule,
  ],
})
export class AppModule {}

```

# Logging api for nestjs application

## Configuration

1. adjust the nestjs file `main.ts` to include the logging module

```typescript

import {Logger as MyLogger} from '@ghentcdh/tools/api';

// bootstrap the application


async function bootstrap() {
    const app = await NestFactory.create(AppModule);
    //...

    app.useLogger(new MyLogger())
    //...
}

```

2. configure the logging environment variable ```LOG_DIR``` in the `.env` file

```
LOG_DIR=/tmp/logs
```

3. Use the logging command

```typescript
import {Logger} from '@ghentcdh/tools/api';


Logger.log('Nest hello api', 'AppController');
```
npm package: @ghentcdh/tools-vue
Description: GhentCdh shared vue tooling
Latest version: 0.6.9

GhentCdh shared vue tooling

# logging-frontend

This logging will just perform output to the console. Different levels can be enabled through environment variables

```
VITE_VERBOSE_DEBUG=true // By default this is false
VITE_DEBUG_ENABLE=true // By default this is false
```

## Usage

```typescript
import {Debugger} from "@ghentcdh/tools/logging/frontend";

Debugger.log('my message');
```
npm package: @ghentcdh/ui
Description: --- Ui ---
Author: GhentCDH
Latest version: 0.6.9

---
Ui
---

# GhentCDH UI

A modular **Vue.js** component library styled with **TailwindCSS**, designed for **GhentCDH** projects. By overriding specific variables, the library can be customized for **white-label** use.

## Features

- **Vue.js components**: Prebuilt UI elements for rapid development.
- **TailwindCSS-based**: Highly customizable design.
- **White-label support**: Modify variables to adapt the UI to different brands.
- **Reusable and scalable**: Built for consistency across projects.

## Installation

```sh
pnpm add @ghentcdh/ui
```

```sh
npm install @ghentcdh/ui
```

```sh
yarn add @ghentcdh/ui
```

## Usage

### Register the styling
```scss
@use '@ghentcdh/ui/style.css' as *;

// Adjust the tailwind variables if necessary

// The projects tailwind should scan for
@source "./src";


```

### Registering Components

Import the components in your **Vue** project:

```vue
<script setup>
import { Btn, Card } from "@ghentcdh/ui";
</script>

<template>
  <Card>
    <h2 class="text-lg font-bold">Welcome</h2>
    <p>This is a reusable UI component from GhentCDH UI.</p>
    <Btn>Click me</Btn>
  </Card>
</template>
```

## Development & Contribution

To contribute, clone the repository and install dependencies:

```sh
git clone https://github.com/GhentCDH/ui.git
cd ui
npm install
```

Run the development server:

```sh
npm run dev
```

## License

This project is licensed under the **MIT License**. See the [LICENSE](./LICENSE) file for details.


# credits

Bo Vandersteene, Ghent University.