@sfgrp/distinguish 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -30
- package/dist/distinguish.es.js +5663 -103
- package/dist/distinguish.umd.js +24 -20
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -48,7 +48,7 @@ You can copy and paste the following tags into your HTML file.
|
|
|
48
48
|
```
|
|
49
49
|
|
|
50
50
|
## Usage
|
|
51
|
-
There are
|
|
51
|
+
There are two ways to setup Interactive Keys. The easiest way is to let InteractiveKey auto discover your inputs automatically. For that, you simply need to provide a data attribute to your input.
|
|
52
52
|
|
|
53
53
|
### Declarative
|
|
54
54
|
|
|
@@ -72,39 +72,12 @@ You can initialize it by createInteractiveKey function
|
|
|
72
72
|
<div id="interactive-key"></div>
|
|
73
73
|
```
|
|
74
74
|
```javascript
|
|
75
|
-
import createInteractiveKey from '@sfgrp/distinguish'
|
|
75
|
+
import { createInteractiveKey } from '@sfgrp/distinguish'
|
|
76
76
|
import '@sfgrp/distinguish/dist/style.css'
|
|
77
77
|
|
|
78
|
-
const app =
|
|
78
|
+
const app = createInteractiveKey('#interactive-key', options)
|
|
79
79
|
```
|
|
80
80
|
|
|
81
|
-
### Vue component (Vue 3.x)
|
|
82
|
-
*Pinia is required in your application to use this component*
|
|
83
|
-
|
|
84
|
-
```javascript
|
|
85
|
-
<template>
|
|
86
|
-
<VueInteractiveKey
|
|
87
|
-
:observationMatrixId="observationId"
|
|
88
|
-
:api-config="config"
|
|
89
|
-
/>
|
|
90
|
-
</template>
|
|
91
|
-
|
|
92
|
-
<script setup>
|
|
93
|
-
import { ref, reactive } from 'vue'
|
|
94
|
-
import { VueInteractiveKey } from '@sfgrp/distinguish'
|
|
95
|
-
import '@sfgrp/distinguish/dist/style.css'
|
|
96
|
-
|
|
97
|
-
const observationMatrixId = ref(1)
|
|
98
|
-
const config = ref({
|
|
99
|
-
baseURL: 'http://localhost:3000/api/v1/',
|
|
100
|
-
projectId: undefined,
|
|
101
|
-
projectToken: '5kshojqRCr83fM3MW7OA9g',
|
|
102
|
-
userToken: undefined
|
|
103
|
-
})
|
|
104
|
-
</script>
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
|
|
108
81
|
### Options object
|
|
109
82
|
```javascript
|
|
110
83
|
{
|