layers-design-system 2.4.0 → 2.6.0

package/src/components/LChip/docs.vue

@@ -1,113 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Chip</h1>
-
-    <div>
-      <div class="row">
-        <ul>
-          <li>
-            <l-chip color="warning">Aguardando</l-chip>
-          </li>
-          <li>
-            <l-chip color="warning" fill>Aguardando</l-chip>
-          </li>
-          <li>
-            <l-chip color="warning" outline>Aguardando</l-chip>
-          </li>
-          <li>
-            <l-chip color="warning" fill outline>Aguardando</l-chip>
-          </li>
-          <li>
-            <l-chip color="danger">Falhou</l-chip>
-          </li>
-          <li>
-            <l-chip color="danger" fill>Falhou</l-chip>
-          </li>
-          <li>
-            <l-chip color="danger" outline>Falhou</l-chip>
-          </li>
-          <li>
-            <l-chip color="danger" fill outline>Falhou</l-chip>
-          </li>
-          <li>
-            <l-chip color="success" hide-icon>Pago</l-chip> <l-chip color="success" :hideIcon="true">Pago</l-chip>
-          </li>
-          <li>
-            <l-chip color="success" fill>Pago</l-chip>
-          </li>
-          <li>
-            <l-chip color="success" outline>Pago</l-chip>
-          </li>
-          <li>
-            <l-chip color="success" fill outline>Pago</l-chip>
-          </li>
-          <li>
-            <l-chip color="purple" icon="recurrence">Recorrência</l-chip>
-          </li>
-          <li>
-            <l-chip color="purple" fill icon="recurrence" style="margin-right: 8px;">Recorrência</l-chip>
-            <l-chip color="purple" fill icon="uil-graduation-cap" style="margin-right: 8px;">Pedro de Alcântara Francisco</l-chip>
-            <l-chip color="lead" fill hide-icon>2020</l-chip>
-          </li>
-          <li>
-            <l-chip color="purple" outline icon="recurrence">Recorrência</l-chip>
-          </li>
-          <li>
-            <l-chip color="purple" fill outline icon="recurrence">Recorrência</l-chip>
-          </li>
-          <li>
-            <l-chip color="link" outline>Normal </l-chip>
-            <l-chip color="link" class="ml-2" bold outline icon="uil-bold">Bold</l-chip>
-          </li>
-          <li>
-            <l-chip color="link" fill outline>Normal </l-chip>
-            <l-chip color="link" class="ml-2" fill bold outline icon="uil-bold">Bold</l-chip>
-          </li>
-          <li>
-            <l-chip color="gray" fill hide-icon>Geral</l-chip>
-            <l-chip color="red" class="ml-2" fill hide-icon>Categoria</l-chip>
-            <l-chip color="green" class="ml-2" fill hide-icon>Categoria</l-chip>
-          </li>
-          <li>
-            <l-chip color="gray-10" fill bold outline hide-icon>gray-10</l-chip>
-            <l-chip color="gray-20" class="ml-2" fill bold outline hide-icon>gray-20</l-chip>
-            <l-chip color="gray-30" class="ml-2" fill bold outline hide-icon>gray-30</l-chip>
-            <l-chip color="gray-40" class="ml-2" fill bold outline hide-icon>gray-40</l-chip>
-            <l-chip color="gray-50" class="ml-2" fill bold outline hide-icon>gray-50</l-chip>
-            <l-chip color="gray-60" class="ml-2" fill bold outline hide-icon>gray-60</l-chip>
-            <l-chip color="gray-70" class="ml-2" fill bold outline hide-icon>gray-70</l-chip>
-            <l-chip color="gray-80" class="ml-2" fill bold outline hide-icon>gray-80</l-chip>
-            <l-chip color="gray-90" class="ml-2" fill bold outline hide-icon>gray-90</l-chip>
-          </li>
-          <li>
-            <l-chip
-              style="height: 24px"
-              bold
-              color="#FF8C00"
-              fill
-              hide-icon
-              class="mr-2"
-            >
-              categoria
-            </l-chip>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Chip"
-};
-</script>
-
-<style scoped>
-ul li {
-  margin: 8px 0;
-}
-.teste {
-  margin-right: 8px;
-}
-</style>

package/src/components/LChip/index.vue

@@ -1,78 +0,0 @@
-<template functional>
-  <span
-    class="l-chip"
-    :style="[
-      { 
-        '--color': parent.$L.getColor(props.color),
-        '--b-color': parent.$L.getColorLight(props.color),
-      },
-      data.style,
-      data.staticStyle,
-    ]"
-    :class="[
-      { fill: props.fill, outline: props.outline, bold: props.bold },
-      data.class,
-      data.staticClass,
-    ]"
-  >
-    <l-icon v-if="props.icon">{{ props.icon }}</l-icon>
-    <span v-else-if="!props.hideIcon" class="no-icon"></span>
-    <span class="text">
-      <slot></slot>
-    </span>
-  </span>
-</template>
-<script>
-export default {
-  tagName: "l-chip",
-  props: {
-    style: String,
-    icon: String,
-    color: String,
-    outline: { type: Boolean, default: () => false },
-    fill: { type: Boolean, default: () => false },
-    showIcon: { type: Boolean, default: () => true },
-    hideIcon: { type: Boolean, default: () => false },
-    bold: { type: Boolean, default: () => false },
-  },
-};
-</script>
-<style>
-.l-chip {
-  height: initial;
-  min-height: 24px;
-  padding: 0 8px;
-  border-radius: 4px;
-  border: 0 solid var(--color);
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-.l-chip .text {
-  font-size: 12px;
-}
-.l-chip.fill .text {
-  color: var(--color);
-}
-.l-chip .bold {
-  font-weight: bold;
-}
-.l-chip.fill {
-  background: var(--b-color);
-}
-.l-chip.outline {
-  border-width: 1px;
-}
-.l-chip .l-icon {
-  color: var(--color);
-  margin-right: 8px;
-}
-.l-chip .no-icon {
-  border-radius: 50%;
-  margin-right: 8px;
-  height: 8px;
-  width: 8px;
-  display: inline-block;
-  background: var(--color);
-}
-</style>

package/src/components/LCircularLoader/docs.vue

@@ -1,30 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Circular Loader</h1>
-    <div class="row">
-      <div class="column">
-        <h4>Light</h4>
-        <l-circular-loader />
-        <l-circular-loader style="margin-top: 10px;" :width="32" :height="32"/>
-        <l-circular-loader style="margin-top: 10px;" :width="40" :height="40"/>
-        <l-circular-loader style="margin-top: 10px;" :width="56" :height="56"/>
-      </div>
-      <div class="column" style="margin-left: 42px;">
-        <h4>Dark</h4>
-        <l-circular-loader type="dark"/>
-        <l-circular-loader type="dark" style="margin-top: 10px;" :width="32" :height="32"/>
-        <l-circular-loader type="dark" style="margin-top: 10px;" :width="40" :height="40"/>
-        <l-circular-loader type="dark" style="margin-top: 10px;" :width="56" :height="56"/>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CircularLoader"
-};
-</script>
-
-<style scoped>
-</style>

package/src/components/LCircularLoader/index.vue

@@ -1,97 +0,0 @@
-<template>
-  <div class="loader-container" :class="{ dark: type === 'dark'}" :style="{'width': `${width}px`, 'height': `${height}px`, 'border-radius': `${width}px` }">
-    <div class="loader" :style="{'width': `${width * 0.66}px` }">
-      <svg class="circular" viewBox="25 25 50 50">
-        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
-      </svg>
-    </div>
-  </div>
-</template>
-<script type="text/javascript">
-export default {
-  tagName: "l-circular-loader",
-  props: {
-    width: {
-      type: Number,
-      default: 24
-    },
-    height: {
-      type: Number,
-      default: 24
-    },
-    type: {
-      type: String,
-      default: 'light'
-    }
-  }
-}
-</script>
-<style type="text/css">
-.loader-container {
-  flex: none;
-  background: white;
-  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-}
-
-.loader-container.dark {
-  background-color: var(--color-lead-light)
-}
-
-.loader {
-  position: relative;
-  margin: 0 auto;
-}
-.loader:before {
-  content: '';
-  display: block;
-  padding-top: 100%;
-}
-.circular {
-  animation: rotate 2s linear infinite;
-  height: 100%;
-  transform-origin: center center;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-}
-.path {
-  stroke-dasharray: 1, 200;
-  stroke-dashoffset: 0;
-  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
-  stroke-linecap: round;
-  stroke: var(--color-primary);
-}
-.path.white {
-  stroke-dasharray: 1, 200;
-  stroke-dashoffset: 0;
-  animation: dash 1.5s ease-in-out infinite, color-white 6s ease-in-out infinite;
-  stroke-linecap: round;
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -35px;
-  }
-  100% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -124px;
-  }
-}
-</style>

package/src/components/LCollapse/docs.vue

@@ -1,68 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Collapse</h1>
-
-    <l-collapse v-model="activeNames" @change="handleChange">
-      <l-collapse-item title="Consistency" name="1">
-        <div>
-          Consistent with real life: in line with the process and logic of real
-          life, and comply with languages and habits that the users are used to;
-        </div>
-        <div>
-          Consistent within interface: all elements should be consistent, such
-          as: design style, icons and texts, position of elements, etc.
-        </div>
-      </l-collapse-item>
-      <l-collapse-item title="Feedback" name="2">
-        <div>
-          Operation feedback: enable the users to clearly perceive their
-          operations by style updates and interactive effects;
-        </div>
-        <div>
-          Visual feedback: reflect current state by updating or rearranging
-          elements of the page.
-        </div>
-      </l-collapse-item>
-      <l-collapse-item title="Efficiency" name="3">
-        <div>
-          Simplify the process: keep operating process simple and intuitive;
-        </div>
-        <div>
-          Definite and clear: enunciate your intentions clearly so that the
-          users can quickly understand and make decisions;
-        </div>
-        <div>
-          Easy to identify: the interface should be straightforward, which helps
-          the users to identify and frees them from memorizing and recalling.
-        </div>
-      </l-collapse-item>
-      <l-collapse-item title="Controllability" name="4">
-        <div>
-          Decision making: giving advices about operations is acceptable, but do
-          not make decisions for the users;
-        </div>
-        <div>
-          Controlled consequences: users should be granted the freedom to
-          operate, including canceling, aborting or terminating current
-          operation.
-        </div>
-      </l-collapse-item>
-    </l-collapse>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Collapse",
-  data() {
-    return {
-      activeNames: ["1"],
-    };
-  },
-  methods: {
-    handleChange() {},
-  },
-};
-</script>
-
-<style scoped></style>

package/src/components/LCollapse/index.vue

@@ -1,13 +0,0 @@
-<script>
-import { Collapse } from "element-ui";
-
-export default {
-  tagName: "l-collapse",
-  extends: Collapse,
-};
-</script>
-<style>
-.l-collapse.el-collapse {
-  border: none;
-}
-</style>

package/src/components/LCollapseItem/index.vue

@@ -1,28 +0,0 @@
-<script>
-import { CollapseItem } from "element-ui";
-
-export default {
-  tagName: "l-collapse-item",
-  extends: CollapseItem,
-};
-</script>
-<style>
-.l-collapse-item {
-  border: 1px solid var(--color-gray-30);
-  border-radius: 4px;
-  padding: 16px 20px;
-  margin-bottom: 16px;
-}
-.l-collapse-item .el-collapse-item__wrap {
-  border-bottom: none;
-}
-.l-collapse-item .el-collapse-item__header {
-  border-bottom: none;
-}
-.l-collapse-item .el-collapse-item__arrow.el-icon-arrow-right {
-  transform: rotate(90deg)
-}
-.l-collapse-item .el-collapse-item__arrow.el-icon-arrow-right.is-active {
-  transform: rotate(-90deg)
-}
-</style>

package/src/components/LDatePicker/docs.vue

@@ -1,66 +0,0 @@
-<template>
-  <div>
-    <h1>DatePicker</h1>
-
-    <div class="row">
-      <l-date-picker
-        v-model="value1"
-        type="daterange"
-        :picker-options="pickerOptions"
-      ></l-date-picker>
-    </div>
-
-    <div class="row">
-      <l-date-picker v-model="value2"></l-date-picker>
-    </div>
-
-    <div style="margin-top: 12px;">Sem ícone</div>
-    <div class="row">
-      <l-date-picker hideIcon v-model="value3"></l-date-picker>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "DatePicker",
-  data() {
-    return {
-      pickerOptions: {
-        shortcuts: [
-          {
-            text: "Últimos 7 dias",
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit("pick", [start, end]);
-            }
-          },
-          {
-            text: "Últimos 30 dias",
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit("pick", [start, end]);
-            }
-          },
-          {
-            text: "Últimos 90 dias",
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit("pick", [start, end]);
-            }
-          }
-        ]
-      },
-      value1: "",
-      value2: "",
-      value3: ""
-    };
-  }
-};
-</script>

package/src/components/LDatePicker/index.vue

@@ -1,63 +0,0 @@
-<script>
-import { DatePicker } from "element-ui";
-export default {
-  tagName: "l-date-picker",
-  extends: DatePicker,
-  props: {
-    prefixIcon: { type: String, default: () => "uil-calender" },
-    format: { type: String, default: () => "dd/MM/yyyy" },
-    startPlaceholder: { type: String, default: () => "Do dia" },
-    endPlaceholder: { type: String, default: () => "Ao dia" },
-    placeholder: { type: String, default: () => "Selecione uma data" },
-    rangeSeparator: { type: String, default: () => " " },
-    popperClass: { type: String, default: () => "l-date-picker-popper" },
-    hideIcon: { type: Boolean, default: () => false },
-  },
-
-  mounted() {
-    if(this.hideIcon) this.$el.classList.add("hide-icon")
-  }
-};
-</script>
-<style>
-.l-date-picker.el-date-editor.el-input.hide-icon {
-  width: 192px;
-}
-.l-date-picker.el-date-editor.el-input.hide-icon > .el-input__prefix {
-  display: none;
-}
-.l-date-picker.el-date-editor.el-input.hide-icon .el-input__inner{
-  padding-left: 12px !important;
-  padding-right: 12px !important;
-}
-
-
-.l-date-picker.el-date-editor--daterange {
-  width: 280px !important;
-}
-
-.l-date-picker .el-input__prefix {
-  margin-left: 6px !important;
-  font-size: 18px !important;
-  color: var(--color-gray-70);
-}
-.l-date-picker .el-input__inner {
-  padding-left: 38px !important;
-}
-
-.l-date-picker .el-input__icon.el-range__icon.uil-calender {
-  font-size: 18px;
-  margin-left: -3px;
-  color: var(--color-gray-70);
-}
-
-.l-date-picker .el-range-separator {
-  height: 0 !important;
-  width: 12px !important;
-  border-bottom: 1px solid var(--color-gray-50);
-}
-
-.l-date-picker-popper .el-picker-panel__sidebar {
-  width: auto;
-}
-</style>

package/src/components/LDialog/docs.vue

@@ -1,36 +0,0 @@
-<template>
-<div>
-  <l-button type="text" @click="dialogVisible = true">click to open the Dialog</l-button>
-
-  <l-dialog
-    title="Tips"
-    :visible.sync="dialogVisible"
-    width="30%"
-    :before-close="handleClose">
-    <span>This is a message</span>
-    <div>
-      <l-button @click="dialogVisible = false">Cancel</l-button>
-      <l-button type="primary" @click="dialogVisible = false">Confirm</l-button>
-    </div>
-  </l-dialog>
-</div>
-</template>
-<script>
-  export default {
-    name: 'Dialog',
-    data() {
-      return {
-        dialogVisible: false
-      };
-    },
-    methods: {
-      handleClose(done) {
-        this.$confirm('Are you sure to close this dialog?')
-          .then(() => {
-            done();
-          })
-          .catch(() => {});
-      }
-    }
-  };
-</script>

package/src/components/LDialog/index.vue

@@ -1,37 +0,0 @@
-<script>
-  import { Dialog } from 'element-ui';
-  export default {
-    tagName: 'l-dialog',
-    extends: Dialog
-  }
-</script>
-<style type="text/css">
-.el-dialog__wrapper.l-dialog {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.l-dialog .el-dialog {
-  border-radius: 12px !important;
-  margin-top: 0px !important;
-  margin-bottom: 0px !important;
-}
-
-.l-dialog .el-dialog .el-dialog__header {
-  padding: 24px;
-  margin-bottom: -16px;
-  padding-bottom: 10px;
-}
-
-.l-dialog .el-dialog .el-dialog__body {
-  padding: 24px;
-  word-break: initial;
-}
-
-.l-dialog .el-dialog .el-dialog__title {
-  color: var(--color-lead);
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 120%;
-}
-</style>

package/src/components/LDropdown/index.vue

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

package/src/components/LDropdownItem/index.vue

@@ -1,13 +0,0 @@
-<script>
-import { DropdownItem } from "element-ui";
-
-export default {
-  tagName: "l-dropdown-item",
-  extends: DropdownItem,
-};
-</script>
-<style>
-.l-dropdown-item {
-  padding: 0 16px !important;
-}
-</style>