layers-design-system 2.4.0 → 2.6.0

package/src/components/LSelect/docs.vue

@@ -1,129 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Select</h1>
-
-    <div>
-      <h2>Basic</h2>
-
-      <l-select v-model="value" placeholder="Select">
-        <l-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        ></l-option>
-      </l-select>
-      <br />
-      <l-select v-model="value" placeholder="Select" disabled>
-        <l-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        ></l-option>
-      </l-select>
-      <br />
-      <l-select v-model="value1" multiple placeholder="Select">
-        <l-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        ></l-option>
-      </l-select>
-      <br />
-      <l-select
-        v-model="value1"
-        multiple
-        collapse-tags
-        placeholder="Select"
-      >
-        <l-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        ></l-option>
-      </l-select>
-    </div>
-
-    <div>
-      <h2>Original (from Element UI)</h2>
-
-      <el-select v-model="value" placeholder="Select">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        ></el-option>
-      </el-select>
-      <br />
-      <el-select v-model="value" placeholder="Select" disabled>
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        ></el-option>
-      </el-select>
-      <br />
-      <el-select v-model="value1" multiple placeholder="Select">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        ></el-option>
-      </el-select>
-      <br />
-      <el-select
-        v-model="value1"
-        multiple
-        collapse-tags
-        placeholder="Select"
-      >
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        ></el-option>
-      </el-select>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Select",
-  data() {
-    return {
-      options: [
-        {
-          value: "Option1",
-          label: "Option1"
-        },
-        {
-          value: "Option2",
-          label: "Option2"
-        },
-        {
-          value: "Option3",
-          label: "Option3"
-        },
-        {
-          value: "Option4",
-          label: "Option4"
-        },
-        {
-          value: "Option5",
-          label: "Option5"
-        }
-      ],
-      value: "",
-      value1: [],
-    };
-  }
-};
-</script>

package/src/components/LSelect/index.vue

@@ -1,9 +0,0 @@
-<script>
-  import { Select } from 'element-ui';
-  export default {
-    tagName: 'l-select',
-    extends: Select
-  }
-</script>
-<style scoped>
-</style>

package/src/components/LSlider/index.vue

@@ -1,7 +0,0 @@
-<script>
-  import { Slider } from 'element-ui';
-  export default {
-    tagName: 'l-slider',
-    extends: Slider
-  }
-</script>

package/src/components/LSwitch/docs.vue

@@ -1,24 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Switch</h1>
-
-    <div>
-      <h2>Basic</h2>
-      <l-switch v-model="value1" />
-      <br /><br />
-      <l-switch v-model="value2" :width="60" :active-icon-class="value2 ? 'uil-check' : 'uil-times'" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Switch",
-  data() {
-    return {
-      value1: false,
-      value2: false,
-    };
-  }
-};
-</script>

package/src/components/LSwitch/index.vue

@@ -1,60 +0,0 @@
-<script>
-  import clone from "lodash/clone";
-  import { Switch } from 'element-ui';
-
-  const Base = clone(Switch);
-  delete Base.props.activeIconClass;
-
-  export default {
-    tagName: 'l-switch',
-    extends: Switch,
-    computed: {
-      activeIconClass() {
-        return this.value ? 'uil-check' : 'uil-times'
-      }
-    }
-  }
-</script>
-<style scoped>
-.l-switch,
-.l-switch .el-switch__core {
-  height: 24px;
-}
-.l-switch .el-switch__core {
-  border-radius: 40px;
-  border: none;
-  background: var(--color-gray-60);
-}
-.l-switch.el-switch.is-checked .el-switch__core::after {
-  left: 100%;
-  margin-left: -24px;
-  border: 1px solid var(--color-aqua);
-}
-.l-switch .el-switch__core:after {
-  width: 22px;
-  height: 22px;
-  top: 0px;
-  left: 0px;
-  border: 1px solid var(--color-gray-60);
-  box-sizing: initial;
-}
-.l-switch .el-switch__label.el-switch__label--right {
-  left: 0px;
-  position: absolute;
-  margin: 0px;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-gray-60);
-}
-.l-switch .el-switch__label.el-switch__label--right > i {
-  font-size: 18px;
-}
-.l-switch .el-switch__label.el-switch__label--right.is-active{
-  left: 100%;
-  margin-left: -24px;
-  color: var(--color-aqua);
-}
-</style>

package/src/components/LTabPane/index.vue

@@ -1,7 +0,0 @@
-<script>
-  import { TabPane } from 'element-ui';
-  export default {
-    tagName: 'l-tab-pane',
-    extends: TabPane
-  }
-</script>

package/src/components/LTable/FieldTypes/AmountView.vue

@@ -1,16 +0,0 @@
-<template functional>
-  <span>{{ $options.methods.formatValue(props.value, parent) }}</span>
-</template>
-<script>
-export default {
-  props: ["value", "schema"],
-  methods: {
-    formatValue(value, parent) {
-      if (isNaN(value) || value === null || value === undefined) return "-"
-      if (parent.$n) return parent.$n(value / 100, 'currency')
-      return Number(value / 100).toLocaleString('pt-BR', {style: 'currency', currency: 'BRL'})
-      
-    }
-  }
-};
-</script>

package/src/components/LTable/FieldTypes/DateView.vue

@@ -1,18 +0,0 @@
-<template functional>
-  <span>{{ $options.methods.formatValue(props.value, props.schema) }}</span>
-</template>
-<script>
-import get from "lodash/get";
-import dayjs from "dayjs"
-
-export default {
-  props: ["value", "schema"],
-  methods: {
-    formatValue(value, schema) {
-      if (!value) return "-"
-      const format = get(schema, 'options.format', 'dd/MM/yyyy hh:mm:ss')
-      return dayjs(value, { locale: 'pt-br' }).format(format)
-    }
-  }
-};
-</script>

package/src/components/LTable/FieldTypes/EmailView.vue

@@ -1,8 +0,0 @@
-<template functional>
-  <a target="_blank" :href="`mailto:${props.value}`">{{ props.value }}</a>
-</template>
-<script>
-export default {
-  props: ["value", "schema"]
-};
-</script>

package/src/components/LTable/FieldTypes/NumberView.vue

@@ -1,13 +0,0 @@
-<template functional>
-  <span>{{ $options.methods.formatValue(props.value) }}</span>
-</template>
-<script>
-export default {
-  props: ["value", "schema"],
-  methods: {
-    formatValue(value) {
-      return value
-    }
-  }
-};
-</script>

package/src/components/LTable/FieldTypes/PaymentStatusView.vue

@@ -1,8 +0,0 @@
-<template functional>
-  <l-chip color="success">{{ props.value }}</l-chip>
-</template>
-<script>
-export default {
-  props: ["value", "schema"]
-};
-</script>

package/src/components/LTable/FieldTypes/StringView.vue

@@ -1,24 +0,0 @@
-<template functional>
-  <router-link
-    v-if="$options.methods.hasRouterLink(props)"
-    :to="$options.methods.getRouterLink(props)"
-  >{{ props.value }}</router-link>
-  <span v-else>{{ props.value }}</span>
-</template>
-<script>
-import get from "lodash/get";
-import Mustache from "mustache";
-
-export default {
-  props: ["value", "schema", "entity"],
-  methods: {
-    hasRouterLink(props) {
-      return get(props.schema, "options.routerLink");
-    },
-    getRouterLink(props) {
-      const template = get(props.schema, "options.routerLink");
-      return Mustache.render(template, props.entity);
-    }
-  }
-};
-</script>

package/src/components/LTable/FieldTypes/index.js

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

package/src/components/LTable/LTableBody.vue

@@ -1,245 +0,0 @@
-<template>
-  <tbody class="l-table-tbody">
-    <template v-if="page && page.loaded">
-      <tr
-        v-for="(item, index) in page.data"
-        :key="index"
-        :class="{'l-table-selected': checked[index]}"
-      >
-        <td v-if="selectable" key="selector" class="l-table-cell l-table-column-selector">
-          <l-checkbox
-            class="l-table-selector"
-            :type="multiselect ? 'checkbox' : 'radio'"
-            :value="checked[index]"
-            @change="$emit('selected', {key: item.id, selected: $event})"
-          />
-        </td>
-        <td
-          v-for="(columnSpec, idx) in columnSpecs"
-          :key="idx"
-          class="l-table-cell"
-          :class="`align-${columnSpec.align}${clickable? ' cursor-pointer' : ''}`"
-          @click="$emit('click-item', item)"
-        >
-          <component
-            :is="getColumnComponent(columnSpec)"
-            :value="getColumnValue(item, columnSpec)"
-            :schema="columnSpec"
-            :entity="item"
-          />
-        </td>
-      </tr>
-    </template>
-    <template v-else-if="page && page.loading">
-      <tr
-        v-for="(item, index) in estimatedRows"
-        :key="index">
-        <td v-if="selectable" key="selector" class="l-table-cell l-table-column-selector">
-          <l-checkbox
-            disabled
-            class="l-table-selector"
-            :type="multiselect ? 'checkbox' : 'radio'"
-            :value="includedAll"
-          />
-        </td>
-        <td
-          v-for="(columnSpec, idx) in columnSpecs"
-          :key="idx"
-          class="l-table-cell"
-          :class="`align-${columnSpec.align}`">
-          <span class="l-table-skeleton"></span>
-        </td>
-      </tr>
-    </template>
-    <template v-else>
-      <tr
-        v-for="(item, index) in estimatedRows"
-        :key="index">
-        <td v-if="selectable" key="selector" class="l-table-cell l-table-column-selector">
-          <l-checkbox
-            disabled
-            class="l-table-selector"
-            :type="multiselect ? 'checkbox' : 'radio'"
-            :value="includedAll"
-          />
-        </td>
-        <td
-          v-for="(columnSpec, idx) in columnSpecs"
-          :key="idx"
-          class="l-table-cell"
-          :class="`align-${columnSpec.align}`">
-          <span class="l-table-skeleton error"></span>
-        </td>
-      </tr>
-    </template>
-  </tbody>
-</template>
-
-<script>
-import get from "lodash/get";
-
-export default {
-  props: {
-    perPage: Number,
-    pagesCount: Number,
-    totalCount: Number,
-
-    columnSpecs: {
-      type: Array
-    },
-
-    includedIds: {
-      type: Array
-    },
-
-    excludedIds: {
-      type: Array
-    },
-
-    selectable: Boolean,
-    clickable: Boolean,
-    multiselect: Boolean,
-    page: Object
-  },
-
-  computed: {
-    includedAll() {
-      return this.includedIds.toString() === "*";
-    },
-
-    estimatedRows() {
-      if (this.page && this.pagesCount > 1 && this.page.index >= this.pagesCount - 1) {
-        return this.totalCount % this.perPage
-      }
-      return this.perPage
-    },
-
-    checked() {
-      if (!this.page || !this.page.data) return [];
-
-      let includedIds = this.includedIds;
-      let excludedIds = this.excludedIds;
-      let includedAll = this.includedAll;
-      return this.page.data.map(
-        item =>
-          (includedAll && !excludedIds.includes(item.id)) ||
-          includedIds.includes(item.id)
-      );
-    }
-  },
-
-  methods: {
-    getColumnComponent(columnSpec) {
-      return columnSpec.component;
-    },
-    getColumnValue(item, columnSpec) {
-      return get(item, columnSpec.path);
-    },
-  }
-};
-</script>
-
-<style>
-.cursor-pointer {
-  cursor: pointer
-}
-
-.l-table-tbody {
-  border-spacing: 0;
-}
-
-.l-table-tbody > tr {
-  background-color: var(--l-table-bg-color);
-}
-
-.l-table-tbody > tr:hover {
-  background-color: var(--l-table-row-hover-color);
-}
-
-.l-table-tbody > tr.l-table-selected {
-  background-color: var(--l-table-row-selected-color);
-}
-
-.l-table-tbody > tr.l-table-selected:hover {
-  background-color: var(--l-table-row-selected-hover-color);
-}
-
-/* Skeleton for table */
-.l-table-skeleton {
-  display: block;
-  margin-right: 30px;
-  margin-top: 2px;
-  border-radius: 2px;
-  height: var(--l-table-skeleton-height);
-  background-color: var(--color-gray-20);
-}
-
-.l-table-skeleton.error {
-  background-color: var(--color-danger-light) !important;
-  animation: none !important;
-  background-image: none !important;
-}
-
-@keyframes lTableSkeletonShimmer {
-  0%{ background-position: 50% 0; }
-  100%{ background-position: -50% 0; }
-}
-
-.l-table-tbody > tr:first-child .l-table-skeleton{
-  animation-duration: 1.2s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: 10;
-  animation-timing-function: linear;
-  animation-delay: 500ms;
-  animation-name: lTableSkeletonShimmer;
-  background-image: linear-gradient(to right, var(--color-gray-20) 8%, var(--color-gray-40) 18%, var(--color-gray-20) 33%);
-  background-size: 400px 100%;
-  background-position: 50% 0;
-}
-
-/* Cell styling */
-.l-table-tbody > tr > .l-table-cell {
-  padding: var(--l-table-cell-padding);
-
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  box-sizing: border-box;
-
-  border-top: var(--l-table-border-tick) solid var(--l-table-border-color);
-
-  height: var(--l-table-row-height);
-  max-height: var(--l-table-row-height);
-  min-height: var(--l-table-row-height);
-}
-
-.l-table-cell.align-left {
-  text-align: left;
-}
-
-.l-table-cell.align-right {
-  text-align: right;
-}
-
-.l-table-cell.align-center {
-  text-align: center;
-}
-
-/* Selector styling */
-.l-table-tbody > tr > .l-table-column-selector > input {
-  opacity: 0.4;
-}
-
-.l-table-tbody > tr:hover > .l-table-column-selector > input,
-.l-table-tbody > tr.l-table-selected > .l-table-column-selector > input {
-  opacity: 1;
-}
-
-/* Error handeling */
-.l-table-error-cell {
-  padding: var(--l-table-cell-padding);
-  border-top: var(--l-table-border-tick) solid var(--l-table-border-color);
-  height: var(--l-table-row-height);
-  max-height: var(--l-table-row-height);
-  min-height: var(--l-table-row-height);
-}
-</style>

package/src/components/LTable/LTableBodySpacer.vue

@@ -1,17 +0,0 @@
-<template functional>
-  <tbody class="l-table-spacer">
-    <tr :style="{height: `${props.height}px`}">
-      <td class="l-table-spacer-bg" colspan="999"/>
-    </tr>
-  </tbody>
-</template>
-
-<style>
-/* Create fake lines on spacers */
-.l-table-spacer-bg {
-  background-image: linear-gradient(var(--l-table-border-color) 1px, 1px, transparent calc(var(--l-table-row-height) - 1px));
-  background-size: 100% var(--l-table-row-height);
-  background-position: 0px 0px;
-  background-repeat: repeat-y;
-}
-</style>

package/src/components/LTable/LTableEndspace.vue

@@ -1,20 +0,0 @@
-<template functional>
-    <div class="l-table-endspace"/>
-</template>
-
-<style>
-/* Final spacer for paged mode */
-.l-table-endspace {
-  position: sticky;
-  left: 0;
-  right: 0;
-  flex: 1;
-  background: var(--l-table-endspace-bg-color);
-  /* border-top: var(--l-table-border-tick) solid var(--l-table-border-color); */
-  background-image: linear-gradient(var(--l-table-border-color) 1px, 1px, transparent calc(var(--l-table-row-height) - 1px));
-  background-size: 100% var(--l-table-row-height);
-  background-position: 0px 0px;
-  background-repeat: no-repeat;
-}
-
-</style>