@nixweb/nixloc-ui 0.0.119 → 0.0.122

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

@@ -1,171 +0,0 @@
-<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

@@ -1,81 +0,0 @@
-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;
-    }
-  }
-});