layers-design-system 2.4.0 → 2.5.1

package/src/components/LButton/index.vue

@@ -1,369 +0,0 @@
-<template>
-  <button
-    class="l-button el-button"
-    @click="handleClick"
-    :disabled="buttonDisabled || loading"
-    :autofocus="autofocus"
-    :type="nativeType"
-    :class="[
-      type ? 'el-button--' + type : '',
-      buttonSize ? 'el-button--' + buttonSize : '',
-      {
-        'is-disabled': buttonDisabled,
-        'is-loading': loading,
-        'is-plain': plain,
-        'is-round': round,
-        'is-circle': circle,
-        'is-fab': fab,
-        'is-square': square,
-        'is-fill': fill,
-      }
-    ]"
-  >
-    <i class="el-icon-loading" v-if="loading"></i>
-    <i :class="icon" v-if="icon && !loading"></i>
-    <span 
-      :style="type == 'text' && textColor ? { 'color': textColorStyle } : ''"
-      v-if="$slots.default" 
-    >
-      <slot></slot>
-    </span>
-  </button>
-</template>
-<script>
-  import { getColor } from '../../helpers/Colors'
-  export default {
-    tagName: 'l-button',
-    inject: {
-      elForm: {
-        default: ''
-      },
-      elFormItem: {
-        default: ''
-      }
-    },
-    props: {
-      type: {
-        type: String,
-        default: 'default'
-      },
-      size: String,
-      icon: {
-        type: String,
-        default: ''
-      },
-      nativeType: {
-        type: String,
-        default: 'button'
-      },
-      loading: Boolean,
-      disabled: Boolean,
-      plain: Boolean,
-      autofocus: Boolean,
-      round: Boolean,
-      circle: Boolean,
-      fab: Boolean,
-      square: Boolean,
-      fill: Boolean,
-      textColor: String,
-    },
-    computed: {
-      _elFormItemSize() {
-        return (this.elFormItem || {}).elFormItemSize;
-      },
-      buttonSize() {
-        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
-      },
-      buttonDisabled() {
-        return this.disabled || (this.elForm || {}).disabled;
-      },
-      textColorStyle() {
-        return getColor(this.textColor)
-      }
-    },
-    methods: {
-      handleClick(evt) {
-        this.$emit('click', evt);
-      }
-    }
-  };
-</script>
-<style lang="scss">
-@import "../../style/main.scss";
-
-@mixin button-plain($color) {
-  color: $color;
-  background: transparent;
-  border-color: $color;
-
-  &:hover,
-  &:focus {
-    background: mix($--color-white, $color, 90%);
-    border-color: $color;
-    color: $color;
-  }
-
-  &:active {
-    background: mix($--color-white, $color, 70%);
-    border-color: $color;
-    color: $color;
-    outline: none;
-  }
-
-  &.is-disabled {
-    &,
-    &:hover,
-    &:focus,
-    &:active {
-      color: $gray-50;
-      background-color: mix($--color-white, $color, 100%);
-      border-color: $gray-30;
-    }
-  }
-}
-
-@mixin button-variant($color, $background-color, $border-color) {
-  color: $color;
-  background-color: $background-color;
-  border-color: $border-color;
-
-  &:hover,
-  &:focus {
-    background: mix($--color-white, $background-color, $--button-hover-tint-percent);
-    border-color: mix($--color-white, $border-color, $--button-hover-tint-percent);
-    color: $color;
-  }
-
-  &:active {
-    background: mix($--color-black, $background-color, $--button-active-shade-percent);
-    border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
-    color: $color;
-    outline: none;
-  }
-
-  &.is-active {
-    background: mix($--color-black, $background-color, $--button-active-shade-percent);
-    border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
-    color: $color;
-  }
-
-  &.is-disabled {
-    &,
-    &:hover,
-    &:focus,
-    &:active {
-      color: $gray-50;
-      background-color: $gray-30;
-      border-color: transparent;
-    }
-  }
-
-  &.is-plain {
-    @include button-plain($background-color);
-  }
-}
-
-.l-button.el-button {
-  color: $--button-info-background-color;
-  font-weight: 700;
-
-  &.el-button--default:hover, &.el-button--default:focus {
-   color: $--button-info-background-color;
-   background-color: $gray-10;
-   border-color: $gray-40;
-  }
-  &.el-button--primary {
-    @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
-  }
-  &.el-button--success {
-    @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
-  }
-  &.el-button--warning {
-    @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
-  }
-  &.el-button--danger {
-    @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
-  }
-  &.el-button--info {
-    @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
-  }
-}
-
-
-.l-button.el-button--medium, .l-button.el-button--medium.is-round {
-  padding-bottom: 0px;
-  padding-top: 0px;
-}
-.l-button.el-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-.l-button.el-button > i {
-  flex: none;
-}
-.l-button.el-button [class*=el-icon-] + span,
-.l-button.el-button [class*=uil-] + span {
-  margin-left: 8px;
-}
-
-.l-button > span {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.l-button.is-loading > span {
-  opacity: 0;
-}
-
-.l-button .el-icon-loading {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-
-/* Fix button height */
-.l-button.el-button--large {
-  height: 56px;
-  font-size: 18px;
-}
-.l-button.el-button--medium {
-  height: 40px;
-  font-size: 14px;
-}
-.l-button.el-button--small {
-  height: 32px;
-  font-size: 14px;
-}
-.l-button.el-button--mini {
-  height: 28px;
-}
-
-
-.l-button.el-button--large {
-  padding: 18px 42px;
-  font-size: 18px;
-  border-radius: 4px;
-}
-.l-button.el-button--large.is-round {
-  padding: 18px 42px;
-  font-size: 18px;
-  border-radius: 42px;
-}
-.l-button.el-button--medium {
-  padding: 12px 20px;
-}
-.l-button.el-button--medium.is-round {
-  padding: 12px 20px;
-}
-
-
-/* Fill */
-.l-button.el-button.is-fill {
-  width: 100%;
-  margin: 0px;
-}
-
-
-/* Circle buttons */
-.l-button.el-button--large.el-button.is-circle {
-  height: 44px;
-}
-.l-button.el-button--medium.el-button.is-circle {
-  height: 36px;
-}
-
-
-/* Square */
-.l-button.el-button.is-square {
-  padding: 12px;
-  border-radius: 4px;
-}
-.l-button.el-button--large.el-button.is-square {
-  padding: 13px;
-  height: 56px;
-  width: 56px;
-}
-.l-button.el-button--medium.el-button.is-square {
-  padding: 7px;
-  height: 40px;
-  width: 40px;
-}
-.l-button.el-button--small.el-button.is-square {
-  padding: 5px;
-  height: 32px;
-  width: 32px;
-}
-.l-button.el-button--mini.el-button.is-square {
-  padding: 4px;
-  height: 28px;
-  width: 28px;
-}
-.l-button.el-button--large.el-button.is-square > i {
-  font-size: 28px;
-}
-.l-button.el-button--medium.el-button.is-square > i {
-  font-size: 24px;
-}
-.l-button.el-button--small.el-button.is-square > i {
-  font-size: 20px;
-}
-
-
-/* Text button */
-.l-button.el-button.el-button--text:hover:not(.is-disabled) > span, 
-.l-button.el-button.el-button--text:focus:not(.is-disabled) > span { 
-  text-decoration: underline;
-}
-
-/* Float Action Button */
-.l-button.el-button.is-fab {
-  height: 40px;
-  border: none;
-  padding: 13px;
-  border-radius: 50%;
-  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.16);
-}
-.l-button.el-button--large.el-button.is-fab {
-  padding: 14px;
-  height: 56px;
-  width: 56px;
-}
-.l-button.el-button--medium.el-button.is-fab {
-  padding: 12px;
-  height: 48px;
-  width: 48px;
-}
-.l-button.el-button--small.el-button.is-fab {
-  padding: 10px;
-  height: 40px;
-  width: 40px;
-}
-.l-button.el-button--mini.el-button.is-fab {
-  padding: 7px;
-  height: 32px;
-  width: 32px;
-}
-
-/* Icons */
-.l-button.el-button--large.el-button.is-fab > i {
-  font-size: 28px;
-}
-.l-button.el-button--medium.el-button.is-fab > i {
-  font-size: 24px;
-}
-.l-button.el-button--small.el-button.is-fab > i {
-  font-size: 20px;
-}
-.l-button.el-button--mini.el-button.is-fab > i {
-  font-size: 18px;
-}
-</style>

package/src/components/LButtonGroup/index.vue

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

package/src/components/LCarousel/docs.vue

@@ -1,32 +0,0 @@
-<template>
-  <div style="display: flex; flex: 1 1 auto; max-width: 80%">
-    <l-carousel  :images="demoImages"/>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'Carousel',
-    data: function() {
-      return {
-        demoImages: [
-        {
-          name: "Imagem 1",
-          id: "1",
-          src: "https://image.shutterstock.com/image-photo/panoramic-background-wide-old-red-600w-1642362355.jpg",
-        },
-        {
-          name: "Imagem 2",
-          id: "2",
-          src: "https://image.shutterstock.com/image-photo/panoramic-background-wide-old-red-600w-1642362355.jpg",
-        },
-        {
-          name: "Imagem 3",
-          id: "3",
-          src: "https://image.shutterstock.com/image-photo/panoramic-background-wide-old-red-600w-1642362355.jpg",
-        }
-      ]
-      }
-    }
-  }
-</script>

package/src/components/LCarousel/index.vue

@@ -1,88 +0,0 @@
-<template>
-  <div class="carousel">
-    <l-button class="slider-control" circle icon="uil-angle-left" style="left: 1em;" @click="previous" v-if="selected > 0"></l-button>
-    <div class="slider-container">
-      <div v-for="(image, index) of images" :key="image.index"
-        class="slide" :ref="`img:${index}`">
-        <div class="img-container">
-          <img :src="image.src" :height="height" :width="width" style="border-radius: 10px;"/>
-        </div>
-      </div>
-    </div>
-    <l-button class="slider-control" circle icon="uil-angle-right" style="right: 1em;" @click="next" v-if="selected < images.length - 1"></l-button>
-  </div>
-</template>
-
-<script>
-
-export default {
-  tagName: 'l-carousel',
-  name: 'Lcarousel',
-  props:['images', 'height', 'width'],
-  data: function() {
-    return {
-      selected: 0
-    }
-  },
-  methods: {
-    previous() {
-      this.selected--
-      const el = this.$refs[`img:${this.selected}`]
-      el[0].scrollIntoView({ behavior: 'smooth' })
-    },
-    next() {
-      this.selected++
-      const el = this.$refs[`img:${this.selected}`]
-      el[0].scrollIntoView({ behavior: 'smooth' })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.carousel {
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  max-width: 100%;
-  position: relative;
-}
-
-.slider-container {
-  height: 100%;
-  padding-bottom: 1em;
-  padding-top: 1em;
-  position: relative;
-  overflow-x: scroll;
-  scroll-snap-type: x mandatory;
-  display: flex;
-  flex-direction: row;
-}
-
-.slide {
-  display: flex;
-  height: 100%;
-  min-width: 80%;
-  scroll-snap-align: center;
-  scroll-snap-stop: always;
-}
-.slide + .slide {
-  margin-left: 1rem;
-}
-
-.slider-control {
-  position: absolute;
-  top: 50%;
-  z-index: 999;
-  height: 24px;
-  width: 24px
-}
-
-.img-container {
-  display: flex;
-  flex: 1 1 auto;
-  justify-content: center;
-  align-items: center;
-}
-
-</style>

package/src/components/LCheckbox/docs.vue

@@ -1,62 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Checkbox</h1>
-
-    <div>
-      <h2>Basic</h2>
-      <l-checkbox>Option</l-checkbox>
-      <l-checkbox :value="true">Checked</l-checkbox>
-      <l-checkbox :disabled="true">Disabled</l-checkbox>
-      <l-checkbox :value="true" :disabled="true">Checked Disabled</l-checkbox>
-      <l-checkbox :indeterminate="true">Indeterminate</l-checkbox>
-    </div>
-
-    <div>
-      <h2>Original (from Element UI)</h2>
-      <el-checkbox>Option</el-checkbox>
-      <el-checkbox :value="true">Checked</el-checkbox>
-      <el-checkbox :disabled="true">Disabled</el-checkbox>
-      <el-checkbox :value="true" :disabled="true">Checked Disabled</el-checkbox>
-      <el-checkbox :indeterminate="true">Indeterminate</el-checkbox>
-    </div>
-
-    <div>
-      <h2>Button style </h2>
-      <l-checkbox-group v-model="checkbox1" size="medium">
-        <l-checkbox-button label="New York" ></l-checkbox-button>
-        <l-checkbox-button label="Washington"></l-checkbox-button>
-        <l-checkbox-button label="Los Angeles"></l-checkbox-button>
-        <l-checkbox-button label="Chicago"></l-checkbox-button>
-      </l-checkbox-group>
-    </div>
-
-    <div>
-      <h2>Button style separeted</h2>
-      <l-checkbox-group v-model="checkbox2" size="small" separated color="link">
-        <l-checkbox-button 
-          v-for="option in options" 
-          :label="option" 
-          :key="option"
-        >
-          {{ option }}
-        </l-checkbox-button>
-      </l-checkbox-group>
-    </div>
-
-
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Checkbox",
-
-  data(){
-    return {
-      checkbox1: [],
-      checkbox2: [],
-      options: ['👨‍🎓 Administrador', '👨‍🎓 Coordenador', '👨‍🎓 Estudante', '👨‍🎓 Familiar']
-    }
-  }
-};
-</script>

package/src/components/LCheckbox/index.vue

@@ -1,34 +0,0 @@
-<script>
-import { Checkbox } from "element-ui";
-export default {
-  tagName: "l-checkbox",
-  extends: Checkbox,
-};
-</script>
-<style>
-@charset "UTF-8";
-
-.l-checkbox .el-checkbox__inner {
-  transition: none !important;
-  box-sizing: border-box;
-  border-color: var(--color-gray-50);
-  width: 16px;
-  height: 16px;
-}
-
-.l-checkbox .el-checkbox__input.is-checked .el-checkbox__inner::after {
-  border-width: 2px;
-  width: 5px;
-  height: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  left: 5px;
-  border-color: var(--white);
-}
-
-.l-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
-  height: 4px;
-  top: 4px;
-}
-</style>

package/src/components/LCheckboxButton/index.vue

@@ -1,30 +0,0 @@
-<script>
-  import { CheckboxButton } from 'element-ui';
-  export default {
-    tagName: 'l-checkbox-button',
-    extends: CheckboxButton
-  }
-</script>
-
-<style type="text/css">
-.l-checkbox-button:first-child .el-checkbox-button__inner {
-  border-left: 1px solid var(--color-gray-70)!important;
-}
-.l-checkbox-button:last-child .el-checkbox-button__inner {
-  border-right: 1px solid var(--color-gray-70)!important;
-}
-.l-checkbox-button .el-checkbox-button__inner {
-  border-top: 1px solid var(--color-gray-70);
-  border-bottom: 1px solid var(--color-gray-70);
-  border-left: 1px solid var(--color-gray-70);
-  border-right: none;
-}
-.l-checkbox-button.el-checkbox-button--small .el-checkbox-button__inner {
-  padding-left: 12px;
-  padding-right: 12px;
-  color: var(--color-lead);
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 12px;
-}
-</style>

package/src/components/LCheckboxGroup/index.vue

@@ -1,53 +0,0 @@
-<script>
-  import { getColor } from '../../helpers/Colors'
-  import { CheckboxGroup } from 'element-ui';
-
-  import clone from 'lodash/clone'
-  const Base = clone(CheckboxGroup);
-  delete Base.props.fill;
-
-  export default {
-    tagName: 'l-checkbox-group',
-    extends: CheckboxGroup,
-
-    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-checkbox-group-separated")
-
-        if(this.$el.children && this.$el.children.length) {
-          Array.from(this.$el.children).forEach(child => child.classList.add("l-checkbox-button-separated"))
-        }
-      }
-    }
-  }
-</script>
-
-<style type="text/css">
-.l-checkbox-group.l-checkbox-group-separated {
-  display: inline-flex;
-  flex-wrap: wrap;
-  margin: -0.5rem 0 0 -0.5rem;
-  width: calc(100% + 0.5rem);
-}
-.l-checkbox-group.l-checkbox-group-separated > * {
-  margin: 0.5rem 0 0 0.5rem;
-}
-.l-checkbox-group.l-checkbox-group-separated .l-checkbox-button .el-checkbox-button__inner {
-  border: 1px solid var(--color-gray-70)!important;
-  border-radius: 4px!important;
-}
-.l-checkbox-group .l-checkbox-button .el-checkbox-button__original:checked + .el-checkbox-button__inner{
-  border: 1px solid transparent!important;
-}
-</style>