Skip to content
This repository has been archived by the owner on Nov 9, 2022. It is now read-only.

Commit

Permalink
update to bootstrap 4 as default
Browse files Browse the repository at this point in the history
dabernathy89 committed Jan 12, 2020
1 parent 4c6ebea commit 18ab501
Showing 12 changed files with 157 additions and 91 deletions.
58 changes: 39 additions & 19 deletions dist/VueQueryBuilder.common.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/VueQueryBuilder.common.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/VueQueryBuilder.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

58 changes: 39 additions & 19 deletions dist/VueQueryBuilder.umd.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/VueQueryBuilder.umd.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/VueQueryBuilder.umd.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/VueQueryBuilder.umd.min.js.map

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -5,15 +5,15 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue Query Builder</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<noscript>
<strong>We're sorry but vue-query-builder doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>

<div id="app">
<div class="container" style="margin-top: 40px;">
<div class="container mt-3">
<vue-query-builder :rules="rules" v-model="output"></vue-query-builder>
<br>
--
2 changes: 1 addition & 1 deletion src/components/QueryBuilderRule.vue
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ import deepClone from '../utilities.js';
export default {
// eslint-disable-next-line vue/require-prop-types
props: ['query', 'index', 'rule', 'labels'],
props: ['query', 'index', 'rule', 'labels', 'depth'],
computed: {
isCustomComponent () {
53 changes: 27 additions & 26 deletions src/layouts/Bootstrap/BootstrapGroup.vue
Original file line number Diff line number Diff line change
@@ -1,44 +1,49 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<div
class="vqb-group panel panel-default"
class="vqb-group card"
:class="'depth-' + depth.toString()"
>
<div class="vqb-group-heading panel-heading">
<div class="vqb-group-heading card-header">
<div class="match-type-container form-inline">
<div class="form-group">
<label for="vqb-match-type">{{ labels.matchType }}</label>
<select
id="vqb-match-type"
v-model="query.logicalOperator"
class="form-control"
<label
class="mr-2"
for="vqb-match-type"
>
{{ labels.matchType }}
</label>

<select
id="vqb-match-type"
v-model="query.logicalOperator"
class="form-control"
>
<option
v-for="label in labels.matchTypes"
:key="label.id"
:value="label.id"
>
<option
v-for="label in labels.matchTypes"
:key="label.id"
:value="label.id"
>
{{ label.label }}
</option>
</select>
</div>
{{ label.label }}
</option>
</select>

<button
v-if="depth > 1"
type="button"
class="close pull-right"
class="close ml-auto"
@click="remove"
v-html="labels.removeGroup"
>
</button>
</div>
</div>

<div class="vqb-group-body panel-body">
<div class="vqb-group-body card-body">
<div class="rule-actions form-inline">
<div class="form-group">
<select
v-model="selectedRule"
class="form-control"
class="form-control mr-2"
>
<option
v-for="rule in rules"
@@ -51,7 +56,7 @@

<button
type="button"
class="btn btn-default"
class="btn btn-secondary mr-2"
@click="addRule"
>
{{ labels.addRule }}
@@ -60,7 +65,7 @@
<button
v-if="depth < maxDepth"
type="button"
class="btn btn-default"
class="btn btn-secondary"
@click="addGroup"
>
{{ labels.addGroup }}
@@ -102,10 +107,6 @@ export default {
padding: 15px;
}
.vue-query-builder .vqb-rule label {
margin-right: 10px;
}
.vue-query-builder .vqb-group.depth-1 .vqb-rule,
.vue-query-builder .vqb-group.depth-2 {
border-left: 2px solid #8bc34a;
53 changes: 34 additions & 19 deletions src/layouts/Bootstrap/BootstrapRule.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<div class="vqb-rule panel panel-default form-inline">
<div class="form-group">
<label>{{ rule.label }}</label>
<div class="vqb-rule card">
<div class="form-inline">
<label class="mr-5">{{ rule.label }}</label>

<!-- List of operands (optional) -->
<select
v-if="typeof rule.operands !== 'undefined'"
v-model="query.operand"
class="form-control"
class="form-control mr-2"
>
<option
v-for="operand in rule.operands"
@@ -22,7 +22,7 @@
<select
v-if="typeof rule.operators !== 'undefined' && rule.operators.length > 1"
v-model="query.operator"
class="form-control"
class="form-control mr-2"
>
<option
v-for="operator in rule.operators"
@@ -68,40 +68,55 @@
</template>

<!-- Checkbox input -->
<div
<template
v-if="rule.inputType === 'checkbox'"
class="checkbox"
>
<label
<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"
>
{{ choice.label }}
</label>
</div>
<label
class="form-check-label"
:for="'depth' + depth + '-' + rule.id + '-' + index + '-' + choice.value"
>
{{ choice.label }}
</label>
</div>
</template>

<!-- Radio input -->
<div
<template
v-if="rule.inputType === 'radio'"
class="radio"
>
<label
<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"
:value="choice.value"
:name="'depth' + depth + '-' + rule.id + '-' + index"
type="radio"
:value="choice.value"
class="form-check-input"
>
{{ choice.label }}
</label>
</div>
<label
class="form-check-label"
:for="'depth' + depth + '-' + rule.id + '-' + index + '-' + choice.value"
>
{{ choice.label }}
</label>
</div>
</template>

<!-- Select without groups -->
<select
@@ -144,7 +159,7 @@
<!-- Remove rule button -->
<button
type="button"
class="close pull-right"
class="close ml-auto"
@click="remove"
v-html="labels.removeRule"
>
10 changes: 10 additions & 0 deletions src/main.js
Original file line number Diff line number Diff line change
@@ -23,6 +23,16 @@ let rules = [
{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",

0 comments on commit 18ab501

Please sign in to comment.