feat: initial commit

.github/workflows/Build.yml

@@ -0,0 +1,11 @@
+name: Build
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Dependencies
+        run: npm ci
+      - name: Build the Directive
+        run: npm run build

.gitignore

@@ -0,0 +1,118 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+playground

README.md

@@ -0,0 +1,61 @@
+# Vue Query Sync
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm package](https://img.shields.io/npm/v/vue-query-sync.svg)](https://www.npmjs.org/package/vue-query-sync) [![downloads](https://img.shields.io/npm/dt/vue-query-sync.svg)](https://www.npmjs.com/package/vue-query-sync) [![size](https://img.shields.io/bundlephobia/minzip/vue-query-sync)](https://www.npmjs.com/package/vue-query-sync)
+
+A Vue2.x directive to update your query strings after each input and sync your input elements with your search bar to having refresh-proof forms.
+
+<img src="https://raw.githubusercontent.com/kaangokdemir/vue-query-sync/master/example/example.gif"/>
+
+## Installation
+
+```bash
+npm i vue-query-sync
+```
+
+## Dependencies
+
+- VueJs 2.6.x
+- Vue Router 3.x
+
+## Usage
+
+```js
+import VueQuerySync from 'vue-query-sync'
+Vue.use(VueQuerySync)
+
+// or
+
+Vue.directive('query', VueQuerySync)
+```
+
+```html
+// Automatically adds ?state=myValue query after typing.
+<input v-query="country" />
+
+// Automatically adds ?city=myValue query after typing.
+<input v-query="price" />
+```
+
+### For More, please check the [Example](./example/App.vue)
+
+## Build
+
+```bash
+npm run build
+```
+
+## Contributing
+
+1. Fork it!
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -am 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+5. Submit a pull request
+
+## Contributors
+
+Kaan Gökdemir - Author ([@kaangokdemir](https://twitter.com/kaangokdemir)) - [kaangokdemir.com](https://kaangokdemir.com)
+
+## License
+
+MIT

example/App.vue

@@ -0,0 +1,39 @@
+<template lang="pug">
+.app
+  label Country:&nbsp;
+    input(v-query:sync="'country'")
+  label City:&nbsp;
+    input(v-query:sync="'city'")
+  .numbers
+    label Min:&nbsp;
+      select(v-query:sync="'min'")
+        option(selected value='') Min..
+        option(v-for="i in 10", :key="i", :value="i * 10") {{ i * 10 }} $
+    label Max:&nbsp;
+      select(v-query:sync="'max'")
+        option(selected value='') Max..
+        option(v-for="i in 10", :key="i", :value="i * 10") {{ i * 10 }} $
+  label Is Registered:&nbsp;
+    input(type="checkbox", v-query:sync="'registered'")
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "App",
+});
+</script>
+
+<style lang="scss">
+.app {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 10px;
+  .numbers {
+    display: flex;
+    gap: 10px;
+  }
+}
+</style>

example/index.html

@@ -0,0 +1,14 @@
+<!-- index.html -->
+
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <title>Example</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>

example/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import App from './App.vue'
+import VueQuerySync from '../dist'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+Vue.use(VueQuerySync)
+
+const router = new VueRouter({
+  mode: 'history',
+})
+
+new Vue({ render: (createElement) => createElement(App), router }).$mount(
+  '#app'
+)