layers-design-system 2.4.0 → 2.6.0

package/src/components/LRadioGroup/index.vue

@@ -1,54 +0,0 @@
-<script>
-  import { getColor } from '../../helpers/Colors'
-
-  import { RadioGroup } from 'element-ui';
-
-  import clone from 'lodash/clone'
-  const Base = clone(RadioGroup);
-  delete Base.props.fill;
-
-  export default {
-    tagName: 'l-radio-group',
-    extends: RadioGroup,
-
-    props: {
-      separated: { type: Boolean, default: () => false },
-      color: { type: String, default: () => 'primary' },
-    },
-
-    computed: {
-      fill() {
-        return getColor(this.$options.propsData.color)
-      }
-    },
-
-    mounted() {
-      if(this.separated) {
-        this.$el.classList.add("l-radio-group-separated")
-
-        if(this.$el.children && this.$el.children.length) {
-          Array.from(this.$el.children).forEach(child => child.classList.add("l-radio-button-separated"))
-        }
-      }
-    }
-  }
-</script>
-
-<style type="text/css">
-.l-radio-group.l-radio-group-separated {
-  display: inline-flex;
-  flex-wrap: wrap;
-  margin: -0.5rem 0 0 -0.5rem;
-  width: calc(100% + 0.5rem);
-}
-.l-radio-group.l-radio-group-separated > * {
-  margin: 0.5rem 0 0 0.5rem;
-}
-.l-radio-group.l-radio-group-separated .l-radio-button .el-radio-button__inner {
-  border: 1px solid var(--color-gray-70)!important;
-  border-radius: 4px!important;
-}
-.l-radio-group .l-radio-button .el-radio-button__orig-radio:checked + .el-radio-button__inner{
-  border: 1px solid transparent!important;
-}
-</style>

package/src/components/LSearchBar/AddFilterButton.vue

@@ -1,71 +0,0 @@
-<template>
-  <l-dropdown trigger="click" placement="bottom-start" @command="addFilter">
-    <l-button
-      class="add-filter-button"
-      round
-      plain
-      size="small"
-      v-show="availableOptions.length > 0"
-    >
-      <l-icon style="margin-right: 4px">uil-plus</l-icon>Adicionar filtro
-    </l-button>
-    <l-dropdown-menu slot="dropdown">
-      <l-tooltip
-        :disabled="!option.description"
-        :content="option.description"
-        effect="light"
-        :open-delay="600"
-        placement="right-start"
-        v-for="option in availableOptions"
-        :key="option.title"
-      >
-        <l-dropdown-item
-          :icon="$L.Icons.get(option)"
-          :key="option.title"
-          :command="option"
-          :disabled="hasFilterFor(option.path)"
-        >{{ option.title }}</l-dropdown-item>
-      </l-tooltip>
-    </l-dropdown-menu>
-  </l-dropdown>
-</template>
-<script>
-
-import find from "lodash/find"
-import get from "lodash/get"
-import filter from "lodash/filter"
-
-export default {
-  name: "AddFilterButton",
-  props: ["schema", "filters"],
-  methods: {
-    addFilter(option) {
-      const filter = {
-        path: option.path,
-        value: null,
-        comparison: null,
-        valid: false,
-      };
-      this.$emit("addFilter", filter);
-    },
-    hasFilterFor(path) {
-      return find(this.filters, { path });
-    }
-  },
-  computed: {
-    availableOptions() {
-      if (!get(this.schema, "fields", []).length === 0) return [];
-
-      return filter(
-        this.schema.fields,
-        option => option.filterable && !this.hasFilterFor(option.path)
-      );
-    }
-  }
-};
-</script>
-<style>
-.add-filter-button {
-  border-style: dashed;
-}
-</style>

package/src/components/LSearchBar/Filters/Editors/AmountEditor.vue

@@ -1,110 +0,0 @@
-<template>
-  <l-form :model="form" :rules="rules" ref="form" @submit.prevent.native>
-    <div><l-icon>{{ $L.Icons.get(schema) }}</l-icon>&nbsp;{{ schema.title }}</div>
-    <br>
-
-    <l-form-item prop="value">
-      <el-input
-        ref="valueInput"
-        v-model="inputValue"
-        size="small"
-        @change="changeInput"
-      >
-        <template slot="prepend">R$</template>
-      </el-input>
-    </l-form-item>
-
-    <l-form-item prop="comparison">
-      <l-radio v-model="form.comparison" label="gt">Maior que</l-radio>
-      <br />
-      <l-radio v-model="form.comparison" label="gte">Maior que ou igual a</l-radio>
-      <br />
-      <l-radio v-model="form.comparison" label="eq">Igual a</l-radio>
-      <br />
-      <l-radio v-model="form.comparison" label="lt">Menor que</l-radio>
-      <br />
-      <l-radio v-model="form.comparison" label="lte">Menor que ou igual a</l-radio>
-    </l-form-item>
-
-    <div style="text-align: right">
-      <l-button plain size="small" @click="cancel">Cancelar</l-button>
-      <l-button type="primary" size="small" @click="save">Buscar</l-button>
-    </div>
-  </l-form>
-</template>
-<script>
-import Vue from "vue";
-import currency from 'currency.js'
-
-export default {
-  model: {
-    prop: "filter",
-    event: "change"
-  },
-  props: ["filter", "schema"],
-  data() {
-    return {
-      form: {
-        value: this.filter.value,
-        comparison: this.filter.comparison || "gt"
-      },
-      inputValue: this.formatValue(this.filter.value)
-    };
-  },
-  methods: {
-    focus() {
-      this.$refs.valueInput.focus()
-    },
-    formatValue(amount) {
-      if (!amount) return "0,00"
-      return (amount / 100).toFixed(2).replace(".", ",")
-    },
-    getAmount(value) {
-      if (!value) return 0
-      return currency(value, { decimal: ','}).intValue
-    },
-    changeInput() {
-      this.form.value = this.getAmount(this.inputValue)
-      this.inputValue = this.formatValue(this.form.value)
-    },
-    validate(callback) {
-      return this.$refs.form.validate(callback);
-    },
-    save() {
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          Vue.set(this.filter, "valid", valid);
-          Vue.set(this.filter, "value", this.form.value);
-          Vue.set(this.filter, "comparison", this.form.comparison);
-          this.$emit("change", this.filter);
-        }
-      });
-    },
-    cancel() {
-      this.form.value = this.filter.value;
-      this.form.comparison = this.filter.comparison;
-      this.$emit("cancel");
-    }
-  },
-  computed: {
-    rules() {
-      return {
-        value: [
-          {
-            required: true,
-            message: `Digite para filtrar ${this.schema.title}`,
-            trigger: "change"
-          }
-        ],
-        comparison: [
-          {
-            required: true,
-            message: `Escolha um modo para filtrar ${this.schema.title}`,
-            trigger: "change"
-          }
-        ]
-      };
-    }
-  }
-};
-</script>

package/src/components/LSearchBar/Filters/Editors/DateEditor.vue

@@ -1,146 +0,0 @@
-<template>
-  <l-form :model="form" :rules="rules" ref="form" @submit.prevent.native>
-    <div>
-      <l-icon>{{ $L.Icons.get(schema) }}</l-icon>
-      &nbsp;{{ schema.title }}
-    </div>
-    <br>
-
-    <l-form-item prop="comparison">
-      <strong>Relativo - Passado</strong>
-      <div v-for="option in relativePastComparisons" :key="option.value">
-        <l-radio v-model="form.comparison" :label="option.value">{{ option.label }}</l-radio>
-        <l-form-item prop="value" v-if="form.comparison == option.value" style="margin-left: 24px; margin-bottom: 8px">
-          <div class="row">
-            <l-input type="number" min="1" ref="valueInput" v-model.number="form.value" size="small"/>
-            <div style="margin-left: 8px; white-space: nowrap;">{{ form.value > 1 ? 'dias' : 'dia' }}</div>
-          </div>
-        </l-form-item>
-      </div>
-
-      <strong>Relativo - Futuro</strong>
-      <div v-for="option in relativeFutureComparisons" :key="option.value">
-        <l-radio v-model="form.comparison" :label="option.value">{{ option.label }}</l-radio>
-        <l-form-item prop="value" v-if="form.comparison == option.value" style="margin-left: 24px; margin-bottom: 8px">
-          <div class="row">
-            <l-input type="number" min="1" ref="valueInput" v-model.number="form.value" size="small"/>
-            <div style="margin-left: 8px; white-space: nowrap;">{{ form.value > 1 ? 'dias' : 'dia' }}</div>
-          </div>
-        </l-form-item>
-      </div>
-
-      <strong>Absoluto</strong>
-      <div v-for="option in absoluteComparisons" :key="option.value">
-        <l-radio v-model="form.comparison" :label="option.value">{{ option.label }}</l-radio>
-        <l-form-item prop="value" v-if="form.comparison == option.value" style="margin-left: 24px; margin-bottom: 8px">
-          <div class="row">
-            <l-date-picker v-model="form.value"></l-date-picker>
-            <div style="margin-left: 8px; white-space: nowrap;"></div>
-          </div>
-        </l-form-item>
-      </div>
-    </l-form-item>
-
-    <div style="text-align: right">
-      <l-button plain size="small" @click="cancel">Cancelar</l-button>
-      <l-button type="primary" size="small" @click="save">Buscar</l-button>
-    </div>
-  </l-form>
-</template>
-<script>
-import Vue from "vue";
-
-export default {
-  model: {
-    prop: "filter",
-    event: "change"
-  },
-  props: ["filter", "schema"],
-  data() {
-    return {
-      form: {
-        value: this.filter.value,
-        comparison: this.filter.comparison || "relative_past_gte"
-      }
-    };
-  },
-  watch: {
-    "form.comparison": {
-      handler(newValue, oldValue) {
-        if (oldValue.indexOf("relative_") === 0 && newValue.indexOf("absolute_") === 0) {
-          this.form.value = new Date()
-        } else if (oldValue.indexOf("absolute_") === 0 && newValue.indexOf("relative_") === 0) {
-          this.form.value = 1
-        }
-        this.$nextTick(() => this.focus());
-      }
-    }
-  },
-  methods: {
-    focus() {
-      if (this.$refs.valueInput && this.$refs.valueInput.length > 0) {
-        this.$refs.valueInput[0].focus();
-      }
-    },
-    validate(callback) {
-      return this.$refs.form.validate(callback);
-    },
-    save() {
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          Vue.set(this.filter, "valid", valid);
-          Vue.set(this.filter, "value", this.form.value);
-          Vue.set(this.filter, "comparison", this.form.comparison);
-          this.$emit("change", this.filter);
-        }
-      });
-    },
-    cancel() {
-      this.form.value = this.filter.value;
-      this.form.comparison = this.filter.comparison;
-      this.$emit("cancel");
-    }
-  },
-  computed: {
-    relativePastComparisons() {
-      return [
-        { label: "Há menos de", value: "relative_past_gte" },
-        { label: "Há mais de", value: "relative_past_lt" },
-        { label: "Há exatamente", value: "relative_past_eq" },
-      ]
-    },
-    relativeFutureComparisons() {
-      return [
-        { label: "Daqui a mais de", value: "relative_future_gte" },
-        { label: "Daqui a menos de", value: "relative_future_lt" },
-        { label: "Daqui a exatamente", value: "relative_future_eq" },
-      ]
-    },
-    absoluteComparisons() {
-      return [
-        { label: "Em", value: "absolute_eq" },
-        { label: "A partir de", value: "absolute_gte" },
-        { label: "Até", value: "absolute_lt" },
-      ];
-    },
-    rules() {
-      return {
-        value: [
-          {
-            required: true,
-            message: `Digite para filtrar ${this.schema.title}`,
-            trigger: "change"
-          }
-        ],
-        comparison: [
-          {
-            required: true,
-            message: `Escolha um modo para filtrar ${this.schema.title}`,
-            trigger: "change"
-          }
-        ]
-      };
-    }
-  }
-};
-</script>

package/src/components/LSearchBar/Filters/Editors/NumberEditor.vue

@@ -1,141 +0,0 @@
-<template>
-  <l-form :model="form" :rules="rules" ref="form" @submit.prevent.native>
-    <div>
-      <l-icon>{{ $L.Icons.get(schema) }}</l-icon>
-      &nbsp;{{ schema.title }}
-    </div>
-    <br />
-
-    <template v-if="valuesEnum">
-      <l-form-item prop="value">
-        <l-checkbox-group v-model="form.value">
-          <div v-for="value of valuesEnum" :key="value">
-            <l-checkbox :label="value">
-              <component v-if="inlineComponent" v-bind:is="inlineComponent" :value="value" :schema="schema"></component>
-              <span v-else v-text="value"></span>
-            </l-checkbox>
-          </div>
-        </l-checkbox-group>
-      </l-form-item>
-    </template>
-    <template v-else>
-      <l-form-item prop="comparison">
-        <div v-for="option in comparisons" :key="option.value">
-          <l-radio v-model="form.comparison" :label="option.value">{{ option.label }}</l-radio>
-          <l-form-item
-            prop="value"
-            v-if="form.comparison == option.value"
-            style="margin-left: 24px; margin-bottom: 8px"
-          >
-            <l-input ref="valueInput" type="number" v-model.number="form.value" />
-          </l-form-item>
-        </div>
-      </l-form-item>
-    </template>
-
-    <div style="text-align: right">
-      <l-button plain size="small" @click="cancel">Cancelar</l-button>
-      <l-button type="primary" size="small" @click="save">Buscar</l-button>
-    </div>
-  </l-form>
-</template>
-<script>
-import Vue from "vue";
-import get from "lodash/get";
-
-export default {
-  model: {
-    prop: "filter",
-    event: "change"
-  },
-  props: ["filter", "schema"],
-  data() {
-    if (get(this.schema, "options.enum")) {
-      return {
-        form: {
-          value: this.filter.value || [],
-          comparison: this.filter.comparison || "in"
-        }
-      };
-    }
-    return {
-      form: {
-        value: this.filter.value,
-        comparison: this.filter.comparison || "gte"
-      }
-    };
-  },
-  watch: {
-    "form.comparison": {
-      handler() {
-        this.$nextTick(() => this.focus());
-      }
-    }
-  },
-  methods: {
-    focus() {
-      if (this.$refs.valueInput) {
-        this.$refs.valueInput[0].focus();
-      }
-    },
-    validate(callback) {
-      return this.$refs.form.validate(callback);
-    },
-    save() {
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          Vue.set(this.filter, "valid", valid);
-          Vue.set(this.filter, "value", this.form.value);
-          Vue.set(this.filter, "comparison", this.form.comparison);
-          this.$emit("change", this.filter);
-        }
-      });
-    },
-    cancel() {
-      this.form.value = this.filter.value;
-      this.form.comparison = this.filter.comparison;
-      this.$emit("cancel");
-    }
-  },
-  computed: {
-    valuesEnum() {
-      return get(this.schema, "options.enum");
-    },
-    inlineComponent() {
-      try {
-        return this.$L.FieldTypeComponents.get(this.schema, 'default');
-      } catch (e) {
-        return null  // Ignore error
-      }
-    },
-    comparisons() {
-      return [
-        { label: "Menor que", value: "lt" },
-        { label: "Menor ou igual a", value: "lte" },
-        { label: "Maior que", value: "gt" },
-        { label: "Maior ou igual a", value: "gte" },
-        { label: "Igual a", value: "eq" },
-        { label: "Diferente de", value: "neq" }
-      ];
-    },
-    rules() {
-      return {
-        value: [
-          {
-            required: true,
-            message: `Escolha para filtrar ${this.schema.title}`,
-            trigger: "change"
-          }
-        ],
-        comparison: [
-          {
-            required: true,
-            message: `Escolha um modo para filtrar ${this.schema.title}`,
-            trigger: "change"
-          }
-        ]
-      };
-    }
-  }
-};
-</script>

package/src/components/LSearchBar/Filters/Editors/StringEditor.vue

@@ -1,140 +0,0 @@
-<template>
-  <l-form :model="form" :rules="rules" ref="form" @submit.prevent.native>
-    <div>
-      <l-icon>{{ $L.Icons.get(schema) }}</l-icon>
-      &nbsp;{{ schema.title }}
-    </div>
-    <br />
-
-    <template v-if="valuesEnum">
-      <l-form-item prop="value">
-        <l-checkbox-group v-model="form.value">
-          <div v-for="value of valuesEnum" :key="value">
-            <l-checkbox :label="value">
-              <component v-if="inlineComponent" v-bind:is="inlineComponent" :value="value" :schema="schema"></component>
-              <span v-else v-text="value"></span>
-            </l-checkbox>
-          </div>
-        </l-checkbox-group>
-      </l-form-item>
-    </template>
-    <template v-else>
-      <l-form-item prop="comparison">
-        <div v-for="option in comparisons" :key="option.value">
-          <l-radio v-model="form.comparison" :label="option.value">{{ option.label }}</l-radio>
-          <l-form-item
-            prop="value"
-            v-if="form.comparison == option.value"
-            style="margin-left: 24px; margin-bottom: 8px"
-          >
-            <l-input ref="valueInput" v-model="form.value" />
-          </l-form-item>
-        </div>
-      </l-form-item>
-    </template>
-
-    <div style="text-align: right">
-      <l-button plain size="small" @click="cancel">Cancelar</l-button>
-      <l-button type="primary" size="small" @click="save">Buscar</l-button>
-    </div>
-  </l-form>
-</template>
-<script>
-import Vue from "vue";
-import get from "lodash/get";
-
-export default {
-  model: {
-    prop: "filter",
-    event: "change"
-  },
-  props: ["filter", "schema"],
-  data() {
-    if (get(this.schema, "options.enum")) {
-      return {
-        form: {
-          value: this.filter.value || [],
-          comparison: this.filter.comparison || "in"
-        }
-      };
-    }
-    return {
-      form: {
-        value: this.filter.value,
-        comparison: this.filter.comparison || "contains"
-      }
-    };
-  },
-  watch: {
-    "form.comparison": {
-      handler() {
-        this.$nextTick(() => this.focus());
-      }
-    }
-  },
-  methods: {
-    focus() {
-      if (this.$refs.valueInput) {
-        this.$refs.valueInput[0].focus();
-      }
-    },
-    validate(callback) {
-      return this.$refs.form.validate(callback);
-    },
-    save() {
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          Vue.set(this.filter, "valid", valid);
-          Vue.set(this.filter, "value", this.form.value);
-          Vue.set(this.filter, "comparison", this.form.comparison);
-          this.$emit("change", this.filter);
-        }
-      });
-    },
-    cancel() {
-      this.form.value = this.filter.value;
-      this.form.comparison = this.filter.comparison;
-      this.$emit("cancel");
-    }
-  },
-  computed: {
-    valuesEnum() {
-      return get(this.schema, "options.enum");
-    },
-    inlineComponent() {
-      try {
-        return this.$L.FieldTypeComponents.get(this.schema, 'default');
-      } catch (e) {
-        return null  // Ignore error
-      }
-    },
-    comparisons() {
-      return [
-        { label: "Contém", value: "contains" },
-        { label: "Começa com", value: "starts_with" },
-        { label: "Termina com", value: "ends_with" },
-        { label: "É exatamente", value: "eq" },
-        { label: "Não é", value: "neq" }
-      ];
-    },
-    rules() {
-      return {
-        value: [
-          {
-            required: true,
-            message: `Escolha para filtrar ${this.schema.title}`,
-            trigger: "change"
-          }
-        ],
-        comparison: [
-          {
-            required: true,
-            message: `Escolha um modo para filtrar ${this.schema.title}`,
-            trigger: "change"
-          }
-        ]
-      };
-    }
-  }
-};
-</script>

package/src/components/LSearchBar/Filters/Editors/index.js

@@ -1,16 +0,0 @@
-import StringEditor from "./StringEditor.vue";
-import AmountEditor from "./AmountEditor.vue";
-import NumberEditor from "./NumberEditor.vue";
-import DateEditor from "./DateEditor.vue";
-
-import { FieldTypeComponents } from '../../../../helpers/FieldTypeComponents'
-
-const Editors = {}
-Editors.register = function () {
-  FieldTypeComponents.register({ type: 'String' }, 'filterChipEditor', StringEditor);
-  FieldTypeComponents.register({ type: 'Number' }, 'filterChipEditor', NumberEditor);
-  FieldTypeComponents.register({ type: 'Date' }, 'filterChipEditor', DateEditor);
-
-  FieldTypeComponents.register({ format: 'Amount' }, 'filterChipEditor', AmountEditor);
-}
-export default Editors