open-index/open-npm huggingface dataset:
npm package: @jwc/vue-openjscad
Description: This is a Vue component wrapping an OpenJSCAD viewer. The component will respond to container resizes and generate the parameters table and export utilities.
Latest version: 2.0.4

# Vue OpenJscad

This is a Vue component wrapping an OpenJSCAD viewer. The component will respond to container resizes and generate the parameters table and export utilities.

This is intended as a way to embed a 3D viewer in a Vue application.

> Caution: You can have only one element of `open-jscad`!

Currently, you can only have one element on a page. There is an issue where OpenJSCAD only renders to the last element.

OpenJscad example:

```js
<open-jscad
    design="gearset.jscad"
    :panel="{ size: 223 }"
    :camera="{
    position: { x: 0, y: 0, z: 150 },
    clip: { min: 1, max: 500 }
    }"
></open-jscad>
```

## Installation

To add `vue-openjscad` to a project, follow these steps.

First, install the package.

```shell
npm install @jwc/vue-OpenJscad
```

Import the package into your page and add it to the components list.

```html static
<script>
  import OpenJscad from '@jwc/vue-openjscad'

  export default {
    name: 'app',
    components: {
      OpenJscad,
    },
  }
</script>
```

Add an `open-jscad` element to your template.

```html static
<open-jscad
  design="gearset.jscad"
  :panel="{ size: 223 }"
  :camera="{
    position: { x: 0, y: 0, z: 150 },
    clip: { min: 1, max: 500 }
    }"
></open-jscad>
```

`design` is a url where a `.jscad` file is located.
The component uses the `fetch` api to retrieve the desing
and load it into the OpenJsCAD processor.

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Compile and Minify for Production

```sh
npm run build
```

### Run End-to-End Tests with [Playwright](https://playwright.dev)

```sh
# Install browsers for the first run
npx playwright install

# When testing on CI, must build the project first
npm run build

# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```