Merge pull request #4 from rtucek/publish

Publish as package

See https://www.npmjs.com/package/query-builder-vue
See https://yarnpkg.com/en/package/query-builder-vue

.editorconfig

@@ -1,4 +1,4 @@
-[*.{js,jsx,ts,tsx,vue}]
+[*]
 indent_style = space
 indent_size = 2
 end_of_line = lf

.eslintignore

@@ -0,0 +1 @@
+dist/

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Rudolf Tucek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

dev/App.vue

@@ -0,0 +1,179 @@
+<template>
+  <div id="app">
+    <query-builder
+      :config="config"
+      v-model="query"
+    >
+      <template #groupOperator="props">
+        <div class="query-builder-group-slot__group-selection">
+          <span class="query-builder-group-slot__group-operator">SLOT #groupOperator</span>
+          <select
+            :value="props.currentOperator"
+            @input="props.updateCurrentOperator($event.target.value)"
+          >
+            <option disabled value="">Select an operator</option>
+            <option
+              v-for="operator in props.operators"
+              :key="operator.identifier"
+              :value="operator.identifier"
+              v-text="operator.name"
+            />
+          </select>
+        </div>
+      </template>
+
+      <template #groupControl="props">
+        <group-ctrl-slot :group-ctrl="props"/>
+      </template>
+
+      <template #rule="props">
+        <rule-slot :ruleCtrl="props"/>
+      </template>
+    </query-builder>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import QueryBuilder from '@/QueryBuilder.vue';
+import { RuleSet, QueryBuilderConfig } from '@/types';
+
+import InputSelection from './Input.vue';
+import NumberSelection from './Number.vue';
+import GroupCtrlSlot from './GroupCtrlSlot.vue';
+import RuleSlot from './RuleSlot.vue';
+
+@Component({
+  components: {
+    QueryBuilder,
+    GroupCtrlSlot,
+    RuleSlot,
+  },
+})
+export default class App extends Vue {
+  query: RuleSet | null = {
+    operatorIdentifier: 'OR',
+    children: [
+      {
+        operatorIdentifier: 'AND',
+        children: [
+          {
+            identifier: 'txt',
+            value: 'A',
+          },
+          {
+            identifier: 'txt',
+            value: 'B',
+          },
+          {
+            identifier: 'txt',
+            value: 'C',
+          },
+          {
+            operatorIdentifier: 'AND',
+            children: [
+              {
+                identifier: 'txt',
+                value: 'c',
+              },
+              {
+                identifier: 'txt',
+                value: 'd',
+              },
+              {
+                operatorIdentifier: 'AND',
+                children: [
+                  {
+                    identifier: 'txt',
+                    value: 'a',
+                  },
+                  {
+                    identifier: 'txt',
+                    value: 'b',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        operatorIdentifier: 'AND',
+        children: [
+          {
+            identifier: 'txt',
+            value: 'X',
+          },
+          {
+            identifier: 'txt',
+            value: 'Y',
+          },
+          {
+            identifier: 'txt',
+            value: 'Z',
+          },
+        ],
+      },
+    ],
+  };
+
+  config: QueryBuilderConfig = {
+    operators: [
+      {
+        name: 'AND',
+        identifier: 'AND',
+      },
+      {
+        name: 'OR',
+        identifier: 'OR',
+      },
+    ],
+    rules: [
+      {
+        identifier: 'txt',
+        name: 'Text Selection',
+        component: InputSelection,
+        initialValue: '',
+      },
+      {
+        identifier: 'num',
+        name: 'Number Selection',
+        component: NumberSelection,
+        initialValue: 10,
+      },
+    ],
+    colors: [
+      'hsl(88, 50%, 55%)',
+      'hsl(187, 100%, 45%)',
+      'hsl(15, 100%, 55%)',
+    ],
+    dragging: {
+      animation: 300,
+      disabled: false,
+      ghostClass: 'ghost',
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  margin: 30px auto;
+  width: 90%;
+  border: 1px solid hsl(0, 0%, 75%);
+}
+
+.query-builder-group-slot__group-selection {
+  padding: 16px;
+  background-color: hsl(0, 0, 95%);
+}
+.query-builder-group-slot__group-operator {
+  margin-right: 8px;
+}
+</style>

dev/GroupCtrlSlot.vue

@@ -0,0 +1,63 @@
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { GroupCtrlSlotProps } from '@/types';
+
+@Component
+export default class GroupCtrlSlot extends Vue {
+  @Prop({ required: true }) readonly groupCtrl!: GroupCtrlSlotProps
+
+  selectedRule: string = ''
+}
+</script>
+
+<template>
+  <div class="query-builder-group-slot__group-control">
+    SLOT #groupControl
+    <select
+      v-model="selectedRule"
+      class="query-builder-group-slot__rule-selection"
+    >
+      <option disabled value="">Select a rule</option>
+      <option
+        v-for="rule in groupCtrl.rules"
+        :key="rule.identifier"
+        :value="rule.identifier"
+        v-text="rule.name"
+      />
+    </select>
+    <button
+      :disabled="selectedRule === ''"
+      @click="groupCtrl.addRule(selectedRule)"
+      class="query-builder-group-slot__rule-adding-button"
+    >
+      Add Rule
+    </button>
+    <div class="query-builder-group-slot__spacer"/>
+    <button
+      @click="groupCtrl.newGroup"
+      class="query-builder-group-slot__group-adding-button"
+    >
+      Add Group
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.query-builder-group-slot__group-control {
+  padding: 16px;
+  display: flex;
+  flex-direction: row;
+}
+
+.query-builder-group-slot__rule-selection,
+.query-builder-group-slot__rule-adding-button {
+  margin-left: 8px;
+}
+
+.query-builder-group-slot__spacer {
+  width: 0;
+  margin-left: 12px;
+  margin-right: 12px;
+  border-left: 1px solid hsl(0, 0%, 75%);
+}
+</style>

dev/RuleSlot.vue

@@ -0,0 +1,33 @@
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import { RuleSlotProps } from '@/types';
+
+@Component
+export default class RuleSlot extends Vue {
+  @Prop({ required: true }) readonly ruleCtrl!: RuleSlotProps
+
+  get ruleData(): any {
+    return this.ruleCtrl.ruleData;
+  }
+
+  set ruleData(newData: any) {
+    this.ruleCtrl.updateRuleData(newData);
+  }
+}
+</script>
+
+<template>
+  <div>
+    <span class="slot-text">SLOT #rule</span>
+    <component
+      :is="ruleCtrl.ruleComponent"
+      v-model="ruleData"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slot-text {
+  margin-right: 8px;
+}
+</style>

package.json

@@ -1,13 +1,30 @@
 {
-  "name": "query-builder",
+  "name": "query-builder-vue",
   "version": "0.1.0",
-  "private": true,
+  "license": "MIT",
+  "repository": "https://github.com/rtucek/vue-query-builder",
+  "description": "A query-builder library for Vue.js",
+  "author": {
+    "name": "Rudolf Tucek",
+    "url": "https://github.com/rtucek/"
+  },
+  "private": false,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "serve": "vue-cli-service serve dev/main.ts",
+    "build": "vue-cli-service build --target lib src/QueryBuilder.vue",
     "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint src/ tests/ dev/"
   },
+  "main": "dist/query-builder.umd.js",
+  "browser": "dist/query-builder.common.js",
+  "jsdelivr": "dist/query-builder.umd.min.js",
+  "unpkg": "dist/query-builder.umd.min.js",
+  "types": "./types/index.d.ts",
+  "files": [
+    "/dist/*.js",
+    "/dist/*.js.map",
+    "/types/*.d.ts"
+  ],
   "dependencies": {
     "@types/sortablejs": "^1.10.2",
     "core-js": "^3.3.2",
@@ -34,13 +51,14 @@
     "node-sass": "^4.9.0",
     "sass-loader": "^8.0.0",
     "typescript": "^3.4.3",
+    "vue-svg-inline-loader": "^1.4.4",
     "vue-template-compiler": "^2.5.21"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
   "lint-staged": {
-    "*.{js,vue}": [
+    "*.{js,vue,ts}": [
       "vue-cli-service lint",
       "git add"
     ]

public/index.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>query-builder</title>
   </head>
   <body>