v-thaana 1.0.4 → 1.1.0
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 +194 -29
- package/dist/index.d.ts +7 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.esm.js +15 -0
- package/package.json +47 -6
- package/index.js +0 -63
package/README.md
CHANGED
|
@@ -4,55 +4,220 @@
|
|
|
4
4
|
|
|
5
5
|
[](https://travis-ci.org/joemccann/dillinger)
|
|
6
6
|
|
|
7
|
-
V-Thaana is a
|
|
8
|
-
Exports are
|
|
9
|
-
- Thaana (standalone library with thaana transpilation)
|
|
10
|
-
- `v-thaana` directive (default export)
|
|
11
|
-
|
|
7
|
+
V-Thaana is a Vue directive and standalone library for Thaana (Maldivian script) input with full TypeScript support.
|
|
12
8
|
|
|
13
|
-
|
|
9
|
+
## Features
|
|
14
10
|
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
- ✅ **Vue 2 & Vue 3 Compatible** - Works with both Vue 2 and Vue 3
|
|
12
|
+
- ✅ **TypeScript Support** - Fully typed with TypeScript definitions
|
|
13
|
+
- ✅ **Two Keyboard Layouts** - Phonetic and Typewriter layouts
|
|
14
|
+
- ✅ **Input & Textarea Support** - Works with both input and textarea elements
|
|
15
|
+
- ✅ **Standalone Function** - Can be used without Vue
|
|
16
|
+
- ✅ **Modern Package Structure** - Proper ES modules and CommonJS support
|
|
17
17
|
|
|
18
|
+
## Installation
|
|
18
19
|
|
|
19
|
-
|
|
20
|
+
```bash
|
|
21
|
+
npm install v-thaana
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
20
25
|
|
|
21
|
-
|
|
26
|
+
### As a Vue Plugin
|
|
27
|
+
|
|
28
|
+
```javascript
|
|
29
|
+
import Vue from 'vue';
|
|
30
|
+
import vThaana from 'v-thaana';
|
|
22
31
|
|
|
23
|
-
|
|
32
|
+
Vue.use(vThaana, {
|
|
33
|
+
keyboard: 'phonetic' // or 'typewriter'
|
|
34
|
+
});
|
|
24
35
|
|
|
25
|
-
|
|
26
|
-
|
|
36
|
+
// In your template
|
|
37
|
+
<input v-thaana v-model="text" type="text" />
|
|
38
|
+
<textarea v-thaana v-model="text"></textarea>
|
|
27
39
|
```
|
|
28
40
|
|
|
29
|
-
### Usage
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
Vue
|
|
41
|
+
### TypeScript Usage
|
|
42
|
+
|
|
43
|
+
```typescript
|
|
44
|
+
import Vue from "vue";
|
|
45
|
+
import vThaana, { ThaanaOptions } from "v-thaana";
|
|
33
46
|
|
|
47
|
+
const options: ThaanaOptions = {
|
|
48
|
+
keyboard: "phonetic",
|
|
49
|
+
};
|
|
34
50
|
|
|
35
|
-
|
|
51
|
+
Vue.use(vThaana, options);
|
|
36
52
|
```
|
|
37
53
|
|
|
38
|
-
###
|
|
54
|
+
### Standalone Function
|
|
55
|
+
|
|
39
56
|
```javascript
|
|
40
|
-
import { thaana } from
|
|
57
|
+
import { thaana } from "v-thaana";
|
|
58
|
+
|
|
59
|
+
const input = document.querySelector("#my-input");
|
|
60
|
+
thaana(
|
|
61
|
+
input,
|
|
62
|
+
(value) => {
|
|
63
|
+
console.log("Updated value:", value);
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
keyboard: "phonetic",
|
|
67
|
+
}
|
|
68
|
+
);
|
|
69
|
+
```
|
|
41
70
|
|
|
42
|
-
|
|
43
|
-
// Handle app logic
|
|
44
|
-
}, options)
|
|
71
|
+
### TypeScript Standalone Usage
|
|
45
72
|
|
|
73
|
+
```typescript
|
|
74
|
+
import { thaana, ThaanaOptions } from "v-thaana";
|
|
75
|
+
|
|
76
|
+
const input = document.querySelector("#my-input") as HTMLInputElement;
|
|
77
|
+
const options: ThaanaOptions = {
|
|
78
|
+
keyboard: "phonetic",
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
thaana(
|
|
82
|
+
input,
|
|
83
|
+
(value: string) => {
|
|
84
|
+
console.log("Updated value:", value);
|
|
85
|
+
},
|
|
86
|
+
options
|
|
87
|
+
);
|
|
46
88
|
```
|
|
47
89
|
|
|
48
|
-
|
|
90
|
+
## API
|
|
49
91
|
|
|
50
|
-
|
|
51
|
-
- Better doc
|
|
92
|
+
### Types
|
|
52
93
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
94
|
+
```typescript
|
|
95
|
+
type KeyboardType = "phonetic" | "typewriter";
|
|
96
|
+
|
|
97
|
+
interface ThaanaOptions {
|
|
98
|
+
keyboard?: KeyboardType;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
interface ThaanaUpdateCallback {
|
|
102
|
+
(value: string): void;
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Functions
|
|
107
|
+
|
|
108
|
+
#### `thaana(el, updateCallback, options?)`
|
|
109
|
+
|
|
110
|
+
Standalone function to enable Thaana input on an element.
|
|
111
|
+
|
|
112
|
+
- `el`: `HTMLInputElement | HTMLTextAreaElement` - The input element
|
|
113
|
+
- `updateCallback`: `ThaanaUpdateCallback` - Callback function called when value changes
|
|
114
|
+
- `options`: `ThaanaOptions` - Optional configuration
|
|
115
|
+
|
|
116
|
+
## Keyboard Layouts
|
|
117
|
+
|
|
118
|
+
### Phonetic Layout
|
|
119
|
+
|
|
120
|
+
The phonetic layout maps English QWERTY keys to Thaana characters based on phonetic similarity.
|
|
121
|
+
|
|
122
|
+
### Typewriter Layout
|
|
123
|
+
|
|
124
|
+
The typewriter layout uses the traditional Thaana typewriter keyboard mapping.
|
|
125
|
+
|
|
126
|
+
## Sample Project
|
|
127
|
+
|
|
128
|
+
A complete sample project is included in the `sample/` directory. To run it:
|
|
129
|
+
|
|
130
|
+
```bash
|
|
131
|
+
cd sample
|
|
132
|
+
npm install
|
|
133
|
+
npm run dev
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## Development
|
|
137
|
+
|
|
138
|
+
### Building
|
|
139
|
+
|
|
140
|
+
```bash
|
|
141
|
+
npm run build
|
|
142
|
+
```
|
|
56
143
|
|
|
144
|
+
This will:
|
|
145
|
+
|
|
146
|
+
- Compile TypeScript to JavaScript
|
|
147
|
+
- Generate type definitions (`.d.ts` files)
|
|
148
|
+
- Create both CommonJS and ES module builds
|
|
149
|
+
|
|
150
|
+
### Development Mode
|
|
151
|
+
|
|
152
|
+
```bash
|
|
153
|
+
npm run dev
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
Runs TypeScript compiler in watch mode.
|
|
157
|
+
|
|
158
|
+
### Publishing
|
|
159
|
+
|
|
160
|
+
The package includes scripts for semantic versioning and publishing:
|
|
161
|
+
|
|
162
|
+
**Quick publish (recommended):**
|
|
163
|
+
|
|
164
|
+
```bash
|
|
165
|
+
# Using the shell script (handles everything)
|
|
166
|
+
./scripts/publish.sh [patch|minor|major]
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
**Using npm scripts:**
|
|
170
|
+
|
|
171
|
+
```bash
|
|
172
|
+
# Patch version (1.0.2 -> 1.0.3) - bug fixes
|
|
173
|
+
npm run release:patch
|
|
174
|
+
|
|
175
|
+
# Minor version (1.0.2 -> 1.1.0) - new features
|
|
176
|
+
npm run release:minor
|
|
177
|
+
|
|
178
|
+
# Major version (1.0.2 -> 2.0.0) - breaking changes
|
|
179
|
+
npm run release:major
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
**Manual version bump (without publishing):**
|
|
183
|
+
|
|
184
|
+
```bash
|
|
185
|
+
npm run version:patch # or version:minor, version:major
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
**Publish without git operations:**
|
|
189
|
+
|
|
190
|
+
```bash
|
|
191
|
+
npm run publish:patch # or publish:minor, publish:major
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
The release scripts will:
|
|
195
|
+
|
|
196
|
+
1. Build the package
|
|
197
|
+
2. Bump the version in `package.json`
|
|
198
|
+
3. Publish to npm
|
|
199
|
+
4. Create a git tag
|
|
200
|
+
5. Push to remote repository
|
|
201
|
+
|
|
202
|
+
## Project Structure
|
|
203
|
+
|
|
204
|
+
```
|
|
205
|
+
v-thaana/
|
|
206
|
+
├── src/
|
|
207
|
+
│ └── index.ts # Main source code
|
|
208
|
+
├── dist/ # Built files (generated)
|
|
209
|
+
├── sample/ # Sample/demo project
|
|
210
|
+
│ ├── src/
|
|
211
|
+
│ │ ├── App.vue
|
|
212
|
+
│ │ └── main.js
|
|
213
|
+
│ └── ...
|
|
214
|
+
├── package.json
|
|
215
|
+
├── tsconfig.json
|
|
216
|
+
└── README.md
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
## License
|
|
220
|
+
|
|
221
|
+
MIT
|
|
57
222
|
|
|
58
223
|
**Free Software, Hell Yeah!**
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAC;AAE9B,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AAGjD,QAAA,MAAM,MAAM;iBACG,GAAG,YAAW,WAAW;CAUvC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import dhivehi from "dhivehi";
|
|
2
|
+
// Vue 3 plugin (compatible with Vue 2)
|
|
3
|
+
const plugin = {
|
|
4
|
+
install(app, options = { flavor: "phonetic" }) {
|
|
5
|
+
var _a;
|
|
6
|
+
// Vue 3 uses 'mounted', Vue 2 uses 'inserted'
|
|
7
|
+
const hook = ((_a = app.version) === null || _a === void 0 ? void 0 : _a.startsWith("3")) ? "mounted" : "inserted";
|
|
8
|
+
app.directive("thaana", {
|
|
9
|
+
[hook](el) {
|
|
10
|
+
dhivehi(el, options);
|
|
11
|
+
},
|
|
12
|
+
});
|
|
13
|
+
},
|
|
14
|
+
};
|
|
15
|
+
export default plugin;
|
package/package.json
CHANGED
|
@@ -1,12 +1,42 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "v-thaana",
|
|
3
|
-
"version": "1.0
|
|
4
|
-
"description": "
|
|
5
|
-
"main": "index.js",
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "Vue directive for Thaana (Maldivian script) input with TypeScript support",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.esm.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist",
|
|
10
|
+
"README.md",
|
|
11
|
+
"LICENSE"
|
|
12
|
+
],
|
|
6
13
|
"scripts": {
|
|
7
|
-
"
|
|
14
|
+
"build": "tsc && npm run build:esm",
|
|
15
|
+
"build:esm": "tsc --module ESNext --outDir dist --declaration false && mv dist/index.js dist/index.esm.js",
|
|
16
|
+
"dev": "tsc --watch --noEmit",
|
|
17
|
+
"dev:sample": "cd sample && npm run dev",
|
|
18
|
+
"dev:all": "concurrently \"npm run dev\" \"npm run dev:sample\" --names \"TSC,SAMPLE\" --prefix-colors \"blue,green\"",
|
|
19
|
+
"prepublishOnly": "npm run build",
|
|
20
|
+
"preversion": "npm run build",
|
|
21
|
+
"version:patch": "npm version patch --no-git-tag-version",
|
|
22
|
+
"version:minor": "npm version minor --no-git-tag-version",
|
|
23
|
+
"version:major": "npm version major --no-git-tag-version",
|
|
24
|
+
"publish:patch": "npm run version:patch && npm publish",
|
|
25
|
+
"publish:minor": "npm run version:minor && npm publish",
|
|
26
|
+
"publish:major": "npm run version:major && npm publish",
|
|
27
|
+
"release:patch": "npm run build && npm version patch && npm publish && git push && git push --tags",
|
|
28
|
+
"release:minor": "npm run build && npm version minor && npm publish && git push && git push --tags",
|
|
29
|
+
"release:major": "npm run build && npm version major && npm publish && git push && git push --tags"
|
|
8
30
|
},
|
|
9
|
-
"keywords": [
|
|
31
|
+
"keywords": [
|
|
32
|
+
"vue",
|
|
33
|
+
"thaana",
|
|
34
|
+
"dhivehi",
|
|
35
|
+
"maldivian",
|
|
36
|
+
"input",
|
|
37
|
+
"directive",
|
|
38
|
+
"typescript"
|
|
39
|
+
],
|
|
10
40
|
"author": "Yameen Mohamed (yaamynu@gmail.com)",
|
|
11
41
|
"license": "MIT",
|
|
12
42
|
"repository": {
|
|
@@ -16,5 +46,16 @@
|
|
|
16
46
|
"bugs": {
|
|
17
47
|
"url": "https://github.com/yaameen/v-thaana/issues"
|
|
18
48
|
},
|
|
19
|
-
"homepage": "https://github.com/yaameen/v-thaana#readme"
|
|
49
|
+
"homepage": "https://github.com/yaameen/v-thaana#readme",
|
|
50
|
+
"peerDependencies": {
|
|
51
|
+
"vue": "^2.6.0 || ^3.0.0"
|
|
52
|
+
},
|
|
53
|
+
"devDependencies": {
|
|
54
|
+
"concurrently": "^8.2.2",
|
|
55
|
+
"typescript": "^5.0.0",
|
|
56
|
+
"vue": "^2.7.14"
|
|
57
|
+
},
|
|
58
|
+
"dependencies": {
|
|
59
|
+
"dhivehi": "^1.2.12"
|
|
60
|
+
}
|
|
20
61
|
}
|
package/index.js
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
const thaana = function(el, updateCallback) {
|
|
2
|
-
var keyboards = {
|
|
3
|
-
'phonetic' : { 33 : '!', 34 : '"', 35: '#', 36 : '$', 37 : '%', 38 : '&', 39 : '\'', 40 : ')', 41 : '(', 42 : '*', 43 : '+', 44 : '،', 45 : '-', 46 : '.', 47 : '/', 58: ':', 59 : '؛', 60 : '>', 61 : '=', 62 : '<', 63 : '؟', 64 : '@', 65 : 'ާ', 66 : 'ޞ', 67 : 'ޝ', 68 : 'ޑ', 69 : 'ޭ', 70 : 'ﷲ', 71 : 'ޣ', 72 : 'ޙ', 73 : 'ީ' ,74 : 'ޛ', 75 : 'ޚ' ,76 : 'ޅ', 77 : 'ޟ', 78 : 'ޏ', 79 : 'ޯ', 80 : '÷', 81 : 'ޤ', 82 : 'ޜ', 83 : 'ށ', 84 : 'ޓ', 85 : 'ޫ', 86 : 'ޥ', 87 : 'ޢ', 88 : 'ޘ', 89 : 'ޠ', 90 : 'ޡ', 91 : ']', 92 : '\\', 93 : '[', 94 : '^', 95: '_', 96 : '`', 97 : 'ަ', 98 : 'ބ', 99 : 'ޗ', 100 : 'ދ', 101 : 'ެ', 102 : 'ފ', 103 : 'ގ', 104 : 'ހ', 105 : 'ި', 106 : 'ޖ', 107 : 'ކ', 108 : 'ލ', 109 : 'މ', 110 : 'ނ', 111 : 'ޮ', 112 : 'ޕ', 113 : 'ް', 114 : 'ރ', 115 : 'ސ', 116 : 'ތ', 117 : 'ު', 118 : 'ވ', 119 : 'އ', 120 : '×', 121 : 'ޔ', 122 : 'ޒ', 123: '}', 124 : '|', 125 : '{', 126 : '~'},
|
|
4
|
-
'typewriter' : { 33 : '!', 34 : '؛', 35: '#', 36 : '$', 37 : '%', 38 : '&', 39 : 'ﷲ', 40 : ')', 41 : '(', 42 : '*', 43 : '+', 44 : 'ށ', 45 : '-', 46 : 'ޓ', 47 : 'ޯ', 58: 'ޡ', 59 : 'ފ', 60 : '\\', 61 : '=', 62 : 'ޞ', 63 : '؟', 64 : '@', 65 : '<', 66 : 'ޟ', 67 : 'ޏ', 68 : '.', 69 : '“', 70 : '،', 71 : '"', 72 : 'ޥ', 73 : 'ޣ' ,74 : 'ޢ', 75 : 'ޘ' ,76 : 'ޚ', 77 : 'ޝ', 78 : 'ޛ', 79 : 'ޠ', 80 : 'ޙ', 81 : '×', 82 : '/', 83 : '>', 84 : ':', 85 : 'ޜ', 86 : 'ޗ', 87 : '’', 88 : 'ޕ', 89 : 'ޤ', 90 : 'ޖ', 91 : 'ލ', 92 : ']', 93 : '[', 94 : '^', 95: '_', 96 : '`', 97 : 'ި', 98 : 'ޅ', 99 : 'ސ', 100 : 'ް', 101 : 'ާ', 102 : 'ަ', 103 : 'ެ', 104 : 'ވ', 105 : 'މ', 106 : 'އ', 107 : 'ނ', 108 : 'ކ', 109 : 'ބ', 110 : 'ދ', 111 : 'ތ', 112 : 'ހ', 113 : 'ޫ', 114 : 'ީ', 115 : 'ު', 116 : 'ޭ', 117 : 'ރ', 118 : 'ޔ', 119 : 'ޮ', 120 : 'ޑ', 121 : 'ގ', 122 : 'ޒ', 123: '÷', 124 : '}', 125 : '{', 126 : '~'}
|
|
5
|
-
};
|
|
6
|
-
var settings = {
|
|
7
|
-
keyboard: 'phonetic'
|
|
8
|
-
}
|
|
9
|
-
var handleKeyboardInput = function(e){
|
|
10
|
-
let current = '';
|
|
11
|
-
|
|
12
|
-
var str = e.target.value,key,selectionMode = false, selectionStart = 0;
|
|
13
|
-
if(!str) return;
|
|
14
|
-
|
|
15
|
-
if(e.target.selectionEnd < str.length && e.target.selectionEnd > 0){
|
|
16
|
-
selectionMode = true;
|
|
17
|
-
selectionStart = e.target.selectionEnd;
|
|
18
|
-
key = str.substring(e.target.selectionEnd-1,e.target.selectionEnd);
|
|
19
|
-
}
|
|
20
|
-
else{
|
|
21
|
-
key = str.substring(str.length-1);
|
|
22
|
-
}
|
|
23
|
-
var k = key.charCodeAt(0),
|
|
24
|
-
lastLength = 0,
|
|
25
|
-
diff = str.length - lastLength;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
// && (diff == 1 || str.length < lastLength)
|
|
30
|
-
if((typeof(keyboards[settings.keyboard][k]) != "undefined") ){
|
|
31
|
-
if(selectionMode == true){
|
|
32
|
-
current = e.target.value.substr(0,e.target.selectionStart-1) + keyboards[settings.keyboard][k] + e.target.value.substr(e.target.selectionStart);
|
|
33
|
-
}
|
|
34
|
-
else{
|
|
35
|
-
current = e.target.value.substr(0,str.length-1);
|
|
36
|
-
current += keyboards[settings.keyboard][k];
|
|
37
|
-
}
|
|
38
|
-
e.target.value = current;
|
|
39
|
-
if(selectionMode){
|
|
40
|
-
e.target.selectionStart = selectionStart;
|
|
41
|
-
e.target.selectionEnd = selectionStart;
|
|
42
|
-
}
|
|
43
|
-
updateCallback(current);
|
|
44
|
-
}
|
|
45
|
-
return false;
|
|
46
|
-
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
el.addEventListener('input', handleKeyboardInput)
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
module.exports = {
|
|
55
|
-
install (Vue, options) {
|
|
56
|
-
Vue.directive('thaana', {
|
|
57
|
-
inserted: function (el, binding, vnode) {
|
|
58
|
-
thaana(el, (v) => vnode.child && vnode.child.$emit('input', v), options)
|
|
59
|
-
}
|
|
60
|
-
})
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
module.exports.thaana = thaana;
|