layers-design-system 2.4.0 → 2.6.0

package/src/components/LSearchBar/Filters/FilterChip.vue

@@ -1,105 +0,0 @@
-<template>
-  <el-popover
-    popper-class="filter-chip-popper"
-    class="filter-chip"
-    placement="bottom-start"
-    width="288"
-    trigger="manual"
-    v-model="editing"
-    @after-enter="afterEnterPopover"
-  >
-    <l-button type="primary" round size="small" slot="reference" @click="editing = !editing">
-      <component ref="view" v-bind:is="viewComponent" v-model="filter" :schema="schema"></component>
-      <l-icon @click.stop="remove" class="close-button">uil-times-circle</l-icon>
-    </l-button>
-    <component
-      ref="editor"
-      v-bind:is="editorComponent"
-      v-model="filter"
-      :schema="schema"
-      @cancel="cancel"
-      @change="change"
-    ></component>
-  </el-popover>
-</template>
-
-<script>
-import Editors from "./Editors";
-import Views from "./Views";
-
-import { Popover } from "element-ui";
-
-Editors.register();
-Views.register();
-
-export default {
-  name: "FilterChip",
-
-  props: ["filter", "schema"],
-
-  components: {
-    'el-popover': Popover
-  },
-
-  data() {
-    return {
-      editing: false
-    };
-  },
-
-  mounted() {
-    if (!this.$refs.editor || !this.$refs.view) {
-      this.remove()
-    }
-    this.$refs.editor.validate(valid => {
-      if (!valid) {
-        this.editing = true;
-      }
-    });
-  },
-
-  methods: {
-    afterEnterPopover() {
-      if (this.$refs.editor.focus) {
-        this.$refs.editor.focus();
-      }
-    },
-    cancel() {
-      this.editing = false;
-      this.$refs.editor.validate(valid => {
-        if (!valid) {
-          this.remove();
-        }
-      });
-    },
-    change() {
-      this.editing = false;
-    },
-    remove() {
-      this.$emit("onRemove");
-    }
-  },
-
-  computed: {
-    editorComponent() {
-      return this.$L.FieldTypeComponents.get(this.schema, 'filterChipEditor');
-    },
-    viewComponent() {
-      return this.$L.FieldTypeComponents.get(this.schema, 'filterChipView');
-    }
-  },
-};
-</script>
-
-<style>
-.filter-chip-popper {
-  padding: 16px;
-  box-sizing: border-box;
-}
-
-.close-button {
-  margin-left: 8px;
-  transform: scale(1.5);
-  display: inline-block;
-}
-</style>

package/src/components/LSearchBar/Filters/Views/AmountView.vue

@@ -1,28 +0,0 @@
-<template>
-  <span>
-    <l-icon>{{ $L.Icons.get(schema) }}</l-icon>&nbsp;
-    <strong>{{ schema.title }}</strong>
-    &nbsp;
-    <span v-if="filter.comparison == 'eq'">=</span>
-    <span v-else-if="filter.comparison == 'lt'">&lt;</span>
-    <span v-else-if="filter.comparison == 'lte'">&lt;=</span>
-    <span v-else-if="filter.comparison == 'gt'">&gt;</span>
-    <span v-else-if="filter.comparison == 'gte'">&gt;=</span>
-    &nbsp;
-    {{ formattedValue }}
-  </span>
-</template>
-<script>
-export default {
-  model: {
-    prop: "filter",
-    event: "change"
-  },
-  props: ["filter", "schema"],
-  computed: {
-    formattedValue() {
-      return this.$n(this.filter.value / 100, 'currency')
-    }
-  }
-};
-</script>

package/src/components/LSearchBar/Filters/Views/DateView.vue

@@ -1,46 +0,0 @@
-<template>
-  <span>
-    <l-icon>{{ $L.Icons.get(schema) }}</l-icon>&nbsp;
-    <strong>{{ schema.title }}</strong>
-    {{ comparisonLabel }} {{ formattedValue }}
-  </span>
-</template>
-<script>
-import get from "lodash/get";
-import dayjs from 'dayjs';
-
-export default {
-  model: {
-    prop: "filter",
-    event: "change"
-  },
-  props: ["filter", "schema"],
-  computed: {
-    comparisonLabel() {
-      return {
-        relative_past_gte: "há menos de",
-        relative_past_lt: "há mais de",
-        relative_past_eq: "há exatamente",
-        relative_future_gte: "daqui a mais de",
-        relative_future_lt: "daqui a menos de",
-        relative_future_eq: "daqui a exatamente",
-        absolute_eq: "em",
-        absolute_gte: "a partir de",
-        absolute_lt: "até"
-      }[this.filter.comparison];
-    },
-    isRelative() {
-      return this.filter.comparison && this.filter.comparison.indexOf("relative_") === 0
-    },
-    formattedValue() {
-      if (!this.filter.value) return "-"
-
-      if (this.filter.comparison.indexOf("relative_") === 0) {
-        return `${this.filter.value} ${this.filter.value > 1 ? 'dias' : 'dia'}`
-      }
-      const format = get(this.schema, 'options.format', 'LL')
-      return dayjs(this.filter.value, { locale: 'pt-br' }).format(format)
-    }
-  }
-};
-</script>

package/src/components/LSearchBar/Filters/Views/NumberView.vue

@@ -1,24 +0,0 @@
-<template>
-  <span>
-    <l-icon>{{ $L.Icons.get(schema) }}</l-icon>&nbsp;
-    <strong>{{ schema.title }}</strong>
-    &nbsp;
-    <span v-if="filter.comparison == 'eq'">=</span>
-    <span v-else-if="filter.comparison == 'neq'">≠</span>
-    <span v-else-if="filter.comparison == 'lt'">&lt;</span>
-    <span v-else-if="filter.comparison == 'lte'">≤</span>
-    <span v-else-if="filter.comparison == 'gt'">&gt;</span>
-    <span v-else-if="filter.comparison == 'gte'">≥</span>
-    &nbsp;
-    {{ filter.value }}
-  </span>
-</template>
-<script>
-export default {
-  model: {
-    prop: "filter",
-    event: "change"
-  },
-  props: ["filter", "schema"],
-};
-</script>

package/src/components/LSearchBar/Filters/Views/StringView.vue

@@ -1,47 +0,0 @@
-<template>
-  <span>
-    <l-icon>{{ $L.Icons.get(schema) }}</l-icon>&nbsp;
-    <strong>{{ schema.title }}</strong>
-    {{ comparisonLabel }}
-    <template v-if="filter.comparison === 'in'">
-      <span v-for="(value, idx) in filter.value" :key="idx">
-        <component v-if="inlineComponent" v-bind:is="inlineComponent" :value="value" :schema="schema"></component>
-        <span v-else v-text="value"></span>
-
-        <template v-if="idx < filter.value.length - 1">
-          <span v-if="idx < filter.value.length - 2">, </span>
-          <span v-else> ou </span>
-        </template>
-      </span>
-    </template>
-    <template v-else>"{{ filter.value }}"</template>
-  </span>
-</template>
-<script>
-export default {
-  model: {
-    prop: "filter",
-    event: "change"
-  },
-  props: ["filter", "schema"],
-  computed: {
-    inlineComponent() {
-      try {
-        return this.$L.FieldTypeComponents.get(this.schema, 'textOnly');
-      } catch(e) {
-        return null  // Ignore error
-      }
-    },
-    comparisonLabel() {
-      return {
-        in: "é",
-        eq: "é",
-        neq: "não é",
-        starts_with: "começa com",
-        ends_with: "termina com",
-        contains: "contém"
-      }[this.filter.comparison];
-    }
-  }
-};
-</script>

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

@@ -1,16 +0,0 @@
-import StringView from "./StringView.vue";
-import AmountView from "./AmountView.vue";
-import NumberView from "./NumberView.vue";
-import DateView from "./DateView.vue";
-
-import { FieldTypeComponents } from '../../../../helpers/FieldTypeComponents'
-
-const Views = {}
-Views.register = function () {
-  FieldTypeComponents.register({ type: 'String' }, 'filterChipView', StringView);
-  FieldTypeComponents.register({ type: 'Number' }, 'filterChipView', NumberView);
-  FieldTypeComponents.register({ type: 'Date' }, 'filterChipView', DateView);
-
-  FieldTypeComponents.register({ format: 'Amount' }, 'filterChipView', AmountView);
-}
-export default Views

package/src/components/LSearchBar/docs.vue

@@ -1,60 +0,0 @@
-<template>
-  <div id="app">
-    <h1>SearchBar</h1>
-
-    <div>
-      <h2>Basic</h2>
-      <div class="row">
-        <l-search-bar
-          v-model="filterValue"
-          :availableModes="['simple', 'advanced']"
-          :schema="schema"
-        />
-      </div>
-      <div class="row">
-        <pre>{{ filterValue }}</pre>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import pickBy from "lodash/pickBy";
-
-export default {
-  name: "SearchBar",
-  data() {
-    return {
-      filterValue: null,
-      query: null
-    };
-  },
-  mounted() {
-    if (this.$route.query.q) {
-      try {
-        const newValue = JSON.parse(decodeURIComponent(this.$route.query.q));
-        this.filterValue = newValue;
-      } catch (e) {
-        // Ignore malformed filter
-      }
-    }
-  },
-  watch: {
-    filterValue(v) {
-      const q = encodeURIComponent(JSON.stringify(v));
-      this.$router.push({ query: { ...this.$route.query, q } }).catch(() => {});
-    }
-  },
-  computed: {
-    schema() {
-      return this.$L.Schemas.get('payable')
-    }
-  },
-  methods: {
-    fetchQuery() {
-      // Pick only values that are not empty string
-      return pickBy(this.query, val => (val === "" ? false : true));
-    }
-  }
-};
-</script>

package/src/components/LSearchBar/index.vue

@@ -1,240 +0,0 @@
-<template>
-  <div
-    :class="{
-      disabled,
-    }"
-  >
-    <l-toggle-button-group
-      :disabled="disabled"
-      v-model="mode"
-      :options="availableModesOptions"
-    ></l-toggle-button-group>
-    <template v-if="mode == 'simple'">
-      <l-input
-        :disabled="disabled"
-        size="large"
-        v-model="queryText"
-        style="flex: 1 1 auto"
-        :placeholder="disabled ? '' : 'Digite algo para buscar'"
-      />
-    </template>
-    <template v-else>
-      <div class="filters">
-        <filter-chip
-          v-for="filter in filters"
-          ref="filterChips"
-          :key="filter.path"
-          :filter="filter"
-          :schema="getFilterSchema(filter)"
-          @onRemove="removeFilter(filter)"
-        />
-        <add-filter-button
-          :schema="schema"
-          :filters="filters"
-          @addFilter="addFilter"
-        />
-      </div>
-    </template>
-    <div class="clear-button">
-      <l-button type="text" v-show="showClearButton" @click="clear">
-        <l-icon>uil-times</l-icon>
-      </l-button>
-    </div>
-  </div>
-</template>
-<script>
-import get from "lodash/get";
-import cloneDeep from "lodash/cloneDeep";
-import isEqual from "lodash/isEqual";
-import findIndex from "lodash/findIndex";
-import find from "lodash/find";
-
-import AddFilterButton from "./AddFilterButton.vue";
-import FilterChip from "./Filters/FilterChip.vue";
-
-export default {
-  tagName: "l-search-bar",
-  model: {
-    prop: "value",
-    event: "change",
-  },
-  props: {
-    availableModes: {
-      type: Array,
-      default: () => ["simple"],
-    },
-    value: {
-      type: Object,
-      default: () => {
-        return {
-          mode: this.availableModes[0],
-          queryText: "",
-          filters: [],
-        };
-      },
-    },
-    schema: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      mode: get(this.value, "mode", this.availableModes[0]),
-      queryText: get(this.value, "queryText", ""),
-      filters: cloneDeep(get(this.value, "filters", [])),
-    };
-  },
-  watch: {
-    value(newValue) {
-      this.mode = get(newValue, "mode", this.availableModes[0]);
-      this.queryText = get(newValue, "queryText", "");
-
-      const newFilters = get(newValue, "filters", []);
-      if (!isEqual(this.filters, newFilters)) {
-        this.filters = cloneDeep(newFilters);
-      }
-    },
-    queryValue: {
-      deep: true,
-      handler(newValue) {
-        if (this.isValid) {
-          this.$emit("change", cloneDeep(newValue));
-        }
-      },
-    },
-  },
-  methods: {
-    getFilterSchema(filter) {
-      const { path } = filter;
-      return find(this.schema.fields, { path });
-    },
-    addFilter(option) {
-      this.filters.push(Object.assign({}, option));
-    },
-    removeFilter(filter) {
-      const index = findIndex(this.filters, filter);
-      this.$delete(this.filters, index);
-    },
-    clear() {
-      switch (this.mode) {
-        case "simple":
-          this.queryText = "";
-          return;
-        case "advanced":
-          this.filters.splice(0, this.filters.length);
-          return;
-        default:
-          throw new Error(`Unknown mode ${this.mode}`);
-      }
-    },
-  },
-  computed: {
-    queryValue() {
-      return {
-        mode: this.mode,
-        queryText: this.queryText,
-        filters: this.filters,
-      };
-    },
-    isValid() {
-      return this.filters.filter((filter) => !filter.valid).length === 0;
-    },
-    availableModesOptions() {
-      return [
-        { icon: "uil-search", value: "simple", title: "Filtro simples" },
-        { icon: "uil-filter", value: "advanced", title: "Filtro avançado" },
-      ].filter((option) => this.availableModes.includes(option.value));
-    },
-    showClearButton() {
-      switch (this.mode) {
-        case "simple":
-          return this.queryText.length > 0;
-        case "advanced":
-          return this.filters.length > 0;
-        default:
-          throw new Error(`Unknown mode ${this.mode}`);
-      }
-    },
-  },
-  components: {
-    AddFilterButton,
-    FilterChip,
-  },
-};
-</script>
-<style lang="scss">
-@import "../../style/main.scss";
-
-.l-search-bar {
-  $height: 48px;
-  min-height: 48px;
-  border: 1px solid #c8d0d8;
-  border-radius: 4px;
-  box-sizing: border-box;
-  transition: border-color 0.35s linear;
-  display: flex;
-  flex-direction: row;
-  flex: 1 1 auto;
-
-  .l-toggle-button-group {
-    display: flex;
-  }
-
-  .filters {
-    display: flex;
-    flex-flow: row wrap;
-    flex-grow: 1;
-    padding: 8px 4px 4px 4px;
-  }
-
-  &:focus-within,
-  &:hover {
-    border-color: $--color-primary;
-  }
-
-  .el-input {
-    margin-top: 4px;
-    input {
-      border: 0;
-      padding: 0 0 0 4px;
-      outline: none;
-      &::placeholder {
-        color: #c8d0d8;
-      }
-    }
-  }
-
-  .l-toggle-button-group {
-    position: relative;
-    margin: 8px;
-  }
-
-  .filter-chip,
-  .add-filter-button {
-    margin: 0px 4px 4px 0px;
-  }
-
-  .clear-button {
-    padding: 0 12px;
-
-    .el-button {
-      color: $gray-70;
-      font-size: 20px;
-    }
-  }
-}
-.disabled {
-  border-color: #c8d0d8 !important;
-  background: #f5f7fa;
-  &:hover {
-    cursor: not-allowed;
-  }
-}
-</style>

package/src/components/LSearchTopics/RecentTermSearched.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="l-d-flex l-align-items-center lead--text recent-topic">
-    <l-icon size="16">uil-history</l-icon>
-    <div class="l-flex l-text-regular mx-2">{{ term }}</div>
-    <l-button
-      @click.stop="$emit('remove')"
-      circle
-      icon="uil-multiply"
-      class="border-none lead--text f-18 p-1"
-    >
-    </l-button>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    term: {
-      type: String,
-    },
-  },
-}
-</script>
-<style scoped>
-.recent-topic {
-  min-height: 32px;
-}
-.border-none {
-  border: none !important;
-}
-</style>