@nixweb/nixloc-ui 0.0.93 → 0.0.94

package/src/component/shared/query-builder/layouts/Bootstrap/BootstrapRule.vue

@@ -0,0 +1,171 @@
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <div class="vqb-rule card">
+    <div class="form-inline">
+      <label :class="rule.classeCss" class="mr-5">
+        <i :class="rule.icone"></i>
+        <span style="margin-left: 10px">{{ rule.label }} </span>
+      </label>
+
+      <!-- List of operands (optional) -->
+      <select
+        v-if="typeof rule.operands !== 'undefined'"
+        v-model="query.operand"
+        class="form-control mr-2"
+      >
+        <option v-for="operand in rule.operands" :key="operand">
+          {{ operand }}
+        </option>
+      </select>
+
+      <!-- List of operators (e.g. =, !=, >, <) -->
+      <select
+        v-if="typeof rule.operators !== 'undefined' && rule.operators.length > 1"
+        v-model="query.operator"
+        class="form-control mr-2"
+      >
+        <option v-for="operator in rule.operators" :key="operator" :value="operator">
+          {{ operator }}
+        </option>
+      </select>
+
+      <!-- Basic text input -->
+      <input
+        v-if="rule.inputType === 'text'"
+        v-model="query.value"
+        class="form-control"
+        type="text"
+        :placeholder="labels.textInputPlaceholder"
+      />
+
+      <!-- Basic number input -->
+      <input
+        v-if="rule.inputType === 'number'"
+        v-model="query.value"
+        class="form-control"
+        type="number"
+      />
+
+      <!-- Datepicker -->
+      <input
+        v-if="rule.inputType === 'date'"
+        v-model="query.value"
+        class="form-control"
+        type="date"
+      />
+
+      <!-- Custom component input -->
+      <div v-if="isCustomComponent" class="vqb-custom-component-wrap">
+        <DateTime
+          v-if="rule.component == 'datetime'"
+          :format="rule.props.format"
+          :type="rule.props.type"
+          :range="rule.props.range"
+          :value="query.value"
+          @input="updateQuery"
+        />
+      </div>
+
+      <!-- Checkbox input -->
+      <template v-if="rule.inputType === 'checkbox'">
+        <div
+          v-for="choice in rule.choices"
+          :key="choice.value"
+          class="form-check form-check-inline"
+        >
+          <input
+            :id="'depth' + depth + '-' + rule.id + '-' + index + '-' + choice.value"
+            v-model="query.value"
+            type="checkbox"
+            :value="choice.value"
+            class="form-check-input"
+          />
+          <label
+            class="form-check-label"
+            :for="'depth' + depth + '-' + rule.id + '-' + index + '-' + choice.value"
+          >
+            {{ choice.label }}
+          </label>
+        </div>
+      </template>
+
+      <!-- Radio input -->
+      <template v-if="rule.inputType === 'radio'">
+        <div
+          v-for="choice in rule.choices"
+          :key="choice.value"
+          class="form-check form-check-inline"
+        >
+          <input
+            :id="'depth' + depth + '-' + rule.id + '-' + index + '-' + choice.value"
+            v-model="query.value"
+            :name="'depth' + depth + '-' + rule.id + '-' + index"
+            type="radio"
+            :value="choice.value"
+            class="form-check-input"
+          />
+          <label
+            class="form-check-label"
+            :for="'depth' + depth + '-' + rule.id + '-' + index + '-' + choice.value"
+          >
+            {{ choice.label }}
+          </label>
+        </div>
+      </template>
+
+      <!-- Select without groups -->
+      <select
+        v-if="rule.inputType === 'select' && !hasOptionGroups"
+        v-model="query.value"
+        class="form-control"
+        :multiple="rule.type === 'multi-select'"
+      >
+        <option v-for="option in selectOptions" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+
+      <!-- Select with groups -->
+      <select
+        v-if="rule.inputType === 'select' && hasOptionGroups"
+        v-model="query.value"
+        class="form-control"
+        :multiple="rule.type === 'multi-select'"
+      >
+        <optgroup
+          v-for="(option, option_key) in selectOptions"
+          :key="option_key"
+          :label="option_key"
+        >
+          <option
+            v-for="sub_option in option"
+            :key="sub_option.value"
+            :value="sub_option.value"
+          >
+            {{ sub_option.label }}
+          </option>
+        </optgroup>
+      </select>
+
+      <!-- Remove rule button -->
+      <button
+        type="button"
+        class="close ml-auto"
+        @click="remove"
+        v-html="labels.removeRule"
+      ></button>
+    </div>
+  </div>
+</template>
+
+<script>
+import QueryBuilderRule from "../../components/QueryBuilderRule";
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+
+export default {
+  extends: QueryBuilderRule,
+  components: {
+    DateTime,
+  },
+};
+</script>

package/src/component/shared/query-builder/main.js

@@ -0,0 +1,81 @@
+import Vue from 'vue'
+import VueQueryBuilder from '@nixweb/nixloc-ui/src/component/shared/QueryBuilder/VueQueryBuilder.vue'
+
+Vue.config.productionTip = false
+
+let rules = [
+    {
+      type: "text",
+      id: "first-name",
+      label: "First Name",
+    },
+    {
+      type: "text",
+      id: "last-name",
+      label: "Last Name",
+    },
+    {
+      type: "radio",
+      id: "plan-type",
+      label: "Plan Type",
+      choices: [
+        {label: "Standard", value: "standard"},
+        {label: "Premium", value: "premium"}
+      ]
+    },
+    {
+      type: "checkbox",
+      id: "sizes",
+      label: "Sizes",
+      choices: [
+        {label: "Small", value: "small"},
+        {label: "Medium", value: "medium"},
+        {label: "Large", value: "large"}
+      ]
+    },
+    {
+      type: "text",
+      id: "date",
+      inputType:"date",
+      label: "Date",
+      operands: ['Start Date', 'End Date']
+    },
+    {
+      type: "select",
+      id: 'select',
+      label: 'Color',
+      operators: ['=', '<>'],
+      choices: [
+        {label: "red", value: 'Red'},
+        {label: "orange", value: 'Orange'},
+        {label: "yellow", value: 'Yellow'},
+        {label: "green", value: 'Green'},
+        {label: "blue", value: 'Blue'},
+        {label: "indigo", value: 'Indigo'},
+        {label: "violet", value: 'Violet'},
+      ]
+    },
+  ];
+
+new Vue({
+  el: '#app',
+
+  components: { VueQueryBuilder },
+
+  data: {
+    rules: rules,
+    output: {},
+  },
+
+  computed: {
+    outputFormatted: function() {
+      return JSON.stringify(this.output, null, 2);
+    }
+  },
+
+  methods: {
+    updateQuery: function(value){
+      this.output = value;
+    }
+  }
+});

package/src/component/shared/query-builder/utilities.js

@@ -0,0 +1,22 @@
+/**
+ * Returns a depply cloned object without reference.
+ * Copied from Vue MultiSelect and Vuex.
+ * @type {Object}
+ */
+const deepClone = function (obj) {
+  if (Array.isArray(obj)) {
+    return obj.map(deepClone)
+  } else if (obj && typeof obj === 'object') {
+    var cloned = {}
+    var keys = Object.keys(obj)
+    for (var i = 0, l = keys.length; i < l; i++) {
+      var key = keys[i]
+      cloned[key] = deepClone(obj[key])
+    }
+    return cloned
+  } else {
+    return obj
+  }
+}
+
+export default deepClone;