feat: Created the Vue Vue CSC Selector package.

Author: 3m1n3nc3

package.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "@eslint/js": "^9.13.0",
     "@paystack/inline-js": "^2.22.1",
+    "@types/node": "^22.10.5",
     "@vitejs/plugin-vue": "^5.1.4",
     "eslint": "~9.18.0",
     "eslint-plugin-vue": "^9.29.1",

packages/vue-csc-selector/README.md

@@ -0,0 +1,127 @@
+# Vue CSC Selector
+
+[![npm](https://img.shields.io/npm/v/@toneflix/vue-place-selector.svg?style=flat-square)](https://www.npmjs.com/package/@toneflix/vue-place-selector)
+[![npm](https://img.shields.io/npm/dt/@toneflix/vue-place-selector.svg?style=flat-square)](https://www.npmjs.com/package/@toneflix/vue-place-selector)
+
+Country State City Selector component for Vue3. - See a live demo [here](https://toneflix.github.io/vue-component-pack/vue-place-selector/demo.html).
+
+<p align="center">
+    <img width="200" src="https://toneflix.github.io/vue-component-pack/vue-place-selector/images/banner.png" alt="CSC Selector">
+    <!--<img width="200" src="https://vuejs.org/images/logo.png" alt="Vue.js">-->
+</p>
+
+## Documentation
+
+Read the full documentation [here](https://toneflix.github.io/vue-component-pack/vue-place-selector/)
+
+## Installation
+
+```bash
+npm install @toneflix/vue-place-selector
+#or
+yarn add @toneflix/vue-place-selector
+#or
+pnpm add @toneflix/vue-place-selector
+```
+
+## Usage
+
+## Get API Key
+
+This package depends on the `Toneflix Places API` for it's data set, the `Toneflix Places API` requires an API key for use on production, the get you api keys, head to `https://naija-places.toneflix.com.ng`:
+
+1. Click on `Portal`.
+2. Login if required.
+3. Click on `API Keys`
+4. Click on `Create new API Key`
+5. Provide a name to identify your API key and click on `Create`
+
+### Global Registration
+
+You can make `Vue CSC Selector` available throughout your Vue project.
+
+**main.js or main.ts**
+
+```js
+import { createApp } from 'vue'
+import App from './app.vue'
+import VuePlaceSelector from '@toneflix/vue-place-selector'
+
+const app = createApp(App)
+app.use(VuePlaceSelector)
+app.mount('#app')
+```
+
+### Local Registration
+
+You can also import the component in your Vue component.
+
+**SomeComponent.vue**
+
+```vue
+<script setup>
+import { VuePlaceSelector } from '@toneflix/vue-place-selector'
+</script>
+```
+
+### Use the Registered Component in Your Vue Template
+
+**SomeComponent.vue**
+
+```vue
+<script setup lang="ts">
+import { VuePlaceSelector } from '@toneflix/vue-place-selector'
+import { ref } from 'vue'
+
+const form = ref({
+  country: '',
+  state: '',
+  city: ''
+})
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: row;">
+    <div>
+      <VuePlaceSelector type="country" v-model="form.country" @error="console.log" />
+    </div>
+    <div>
+      <VuePlaceSelector
+        type="state"
+        v-model="form.state"
+        :params="{ countries: form.country }"
+        @error="console.log"
+      />
+    </div>
+    <div>
+      <VuePlaceSelector
+        type="city"
+        v-model="form.city"
+        :params="{ countries: form.country, states: form.state }"
+        @error="console.log"
+      />
+    </div>
+  </div>
+</template>
+```
+
+### Setup API Key (For Production)
+
+If you have an `env` file, that would be the best place to provide your API key, add `VITE_VUE_PLACESELECTOR_API_KEY` to your env file with your API Key as the value
+
+```env
+VITE_VUE_PLACESELECTOR_API_KEY=ExampleApiKeyHere
+```
+
+If you do not have an `env` file, you can pass the `api-key` prop to each component instance.
+
+```vue
+<template>
+  <VuePlaceSelector
+    api-key="ExampleApiKeyHere"
+    v-model="form.city"
+    :params="{ countries: form.country, states: form.state }"
+    @error="console.log"
+  />
+</template>
+```

packages/vue-csc-selector/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import { VuePlaceSelector } from './src/index'
+
+export { VuePlaceSelector } from './src/index'
+
+export default {
+  install: (app: App): void => {
+    app.use(VuePlaceSelector)
+  }
+}

packages/vue-csc-selector/src/components/csc-selector.vue

@@ -1,12 +1,12 @@
 {
-  "name": "@toneflix/vue-csc-selector",
+  "name": "@toneflix/vue-place-selector",
   "version": "1.0.0",
-  "description": "Country State City Selector component for Vue3.",
+  "description": "Place (Country, State, City, e.t.c) Selector component for Vue3.",
   "style": "dist/lib/style.css",
   "main": "dist/lib/index.cjs",
   "module": "dist/es/index.mjs",
   "type": "module",
-  "homepage": "https://toneflix.github.io/vue-component-pack/vue-csc-selector",
+  "homepage": "https://toneflix.github.io/vue-component-pack/vue-place-selector",
   "repository": {
     "url": "https://github.com/toneflix/vue-component-pack"
   },
@@ -16,7 +16,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "vite build",
-    "deploy": "../deploy.sh vue-csc-selector"
+    "deploy": "../deploy.sh vue-place-selector"
   },
   "keywords": [],
   "author": "",
@@ -31,5 +31,9 @@
     "vitepress": "^1.4.0",
     "vue": "^3.5.11"
   },
-  "nx": {}
+  "nx": {},
+  "dependencies": {
+    "@vueuse/core": "^12.4.0",
+    "axios": "^1.7.7"
+  }
 }