layers-design-system 2.4.0 → 2.6.0

package/src/components/LNotice/index.vue

@@ -1,86 +0,0 @@
-
-<template>
-  <div :style="{'--color': color}" :class="{ outline, fill }">
-    <template v-if="showIcon">
-      <l-icon v-if="icon">{{ icon }}</l-icon>
-      <span v-else class="no-icon"></span>
-    </template>
-    <span class="text">
-      <slot></slot>
-    </span>
-  </div>
-</template>
-<script>
-export default {
-  tagName: "l-notice",
-  props: {
-    type: String,
-    outline: { type: Boolean, default: () => false },
-    fill: { type: Boolean, default: () => true },
-    showIcon: { type: Boolean, default: () => true },
-    color: {
-      type: String,
-      default() {
-        return this.type;
-      }
-    },
-    icon: {
-      type: String,
-      default() {
-        if (!this.type) return null;
-        switch (this.type) {
-          case "danger":
-            return "uil-exclamation-circle";
-          case "warning":
-            return "uil-clock";
-          case "success":
-            return "uil-check-circle";
-          default:
-            throw new Error(`Unknown type ${this.type}`);
-        }
-      }
-    }
-  }
-};
-</script>
-<style>
-.l-notice {
-  padding: 4px 8px;
-  border-radius: 4px;
-  border: 0 solid var(--color);
-  position: relative;
-  display: flex;
-}
-.l-notice.outline {
-  border-width: 1px;
-}
-.l-notice .text {
-  font-size: 14px;
-}
-.l-notice.fill:before {
-  content: " ";
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--color);
-  display: block;
-  position: absolute;
-  overflow: hidden;
-  z-index: -1;
-  opacity: 0.1;
-  border-radius: 4px;
-}
-.l-notice .l-icon {
-  color: var(--color);
-  margin-right: 8px;
-}
-.l-notice .no-icon {
-  border-radius: 50%;
-  margin-right: 8px;
-  height: 8px;
-  width: 8px;
-  display: inline-block;
-  background: var(--color);
-}
-</style>

package/src/components/LNotification/index.vue

@@ -1,182 +0,0 @@
-<template>
-  <transition name="el-notification-fade">
-    <div
-      :class="['el-notification', customClass, horizontalClass]"
-      v-show="visible"
-      :style="positionStyle"
-      @mouseenter="clearTimer()"
-      @mouseleave="startTimer()"
-      @click="click"
-      role="alert"
-    >
-      <l-circular-loader
-        v-if="loading && loadingPosition == 'left'"
-        :type="loadingType"
-        class="el-notification__loadingLeft"
-      ></l-circular-loader>
-      <i
-        class="el-notification__icon"
-        :class="[ typeClass, iconClass ]"
-        v-else-if="typeClass || iconClass">
-      </i>
-      <div class="el-notification__group" :class="{ 'is-with-icon': typeClass || iconClass, 'not-closeable': !showClose }">
-        <div class="el-notification__wrapper">
-          <h2 class="el-notification__title" v-if="title" v-text="title"></h2>
-          <div class="el-notification__content text-regular" v-show="message">
-            <slot>
-              <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
-              <p v-else v-html="message"></p>
-            </slot>
-          </div>
-        </div>
-        <l-button
-          type="text"
-          v-if="actionLabel"
-          @click="callAction()"
-          class="el-notification__actionBtn" :class="actionColor + '--text'">
-          {{ actionLabel }}
-        </l-button>
-      </div>
-      <l-circular-loader
-        class="el-notification__loadingRight"
-        v-if="loading && loadingPosition == 'right'"
-        :type="loadingType"
-      ></l-circular-loader>
-      <l-icon
-        class="white--text el-notification_closeButton"
-        v-else-if="showClose"
-        @click.stop="close"
-      >
-        uil-multiply
-      </l-icon>
-    </div>
-  </transition>
-</template>
-
-<script>
-  import LIcon from '../LIcon/index.vue'
-
-  let typeMap = {
-    success: 'success',
-    info: null,
-    warning: 'warning',
-    error: null
-  };
-  export default {
-    tagName: "l-notification",
-    components: {
-      LIcon
-    },
-    data() {
-      return {
-        visible: false,
-        title: '',
-        message: '',
-        duration: 4500,
-        type: '',
-        showClose: true,
-        customClass: '',
-        iconClass: '',
-        onClose: null,
-        onClick: null,
-        closed: false,
-        verticalOffset: 0,
-        timer: null,
-        dangerouslyUseHTMLString: false,
-        position: 'top-right',
-        loading: false,
-        loadingPosition: 'left',
-        loadingType: 'dark',
-        action: null,
-        actionLabel: '',
-        actionColor: 'white',
-      };
-    },
-    computed: {
-      typeClass() {
-        return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : '';
-      },
-      horizontalClass() {
-        if(this.position.indexOf('left') === -1 && this.position.indexOf('right') === -1) {
-          return 'center'
-        }
-        return this.position.indexOf('right') > -1 ? 'right' : 'left';
-      },
-      verticalProperty() {
-        return /^top/.test(this.position) ? 'top' : 'bottom';
-      },
-      positionStyle() {
-        return {
-          [this.verticalProperty]: `${ this.verticalOffset }px`
-        };
-      }
-    },
-    watch: {
-      closed(newVal) {
-        if (newVal) {
-          this.visible = false;
-          this.$el.addEventListener('transitionend', this.destroyElement);
-        }
-      }
-    },
-    methods: {
-      callAction() {
-        if(typeof this.action === 'function') {
-          return this.action()
-        }
-      },
-      destroyElement() {
-        this.$el.removeEventListener('transitionend', this.destroyElement);
-        this.$destroy(true);
-        this.$el.parentNode.removeChild(this.$el);
-      },
-      click() {
-        if (typeof this.onClick === 'function') {
-          this.onClick();
-        }
-      },
-      close() {
-        this.closed = true;
-        if (typeof this.onClose === 'function') {
-          this.onClose();
-        }
-      },
-      clearTimer() {
-        clearTimeout(this.timer);
-      },
-      startTimer() {
-        if (this.duration > 0) {
-          this.timer = setTimeout(() => {
-            if (!this.closed) {
-              this.close();
-            }
-          }, this.duration);
-        }
-      },
-      keydown(e) {
-        if (e.keyCode === 46 || e.keyCode === 8) {
-          this.clearTimer();
-        } else if (e.keyCode === 27) {
-          if (!this.closed) {
-            this.close();
-          }
-        } else {
-          this.startTimer();
-        }
-      }
-    },
-    mounted() {
-      if (this.duration > 0) {
-        this.timer = setTimeout(() => {
-          if (!this.closed) {
-            this.close();
-          }
-        }, this.duration);
-      }
-      document.addEventListener('keydown', this.keydown);
-    },
-    beforeDestroy() {
-      document.removeEventListener('keydown', this.keydown);
-    }
-  };
-</script>

package/src/components/LOption/index.vue

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

package/src/components/LOptionGroup/index.vue

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

package/src/components/LPresentation/docs.vue

@@ -1,35 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Presentation</h1>
-    <l-presentation @close="toggleDialog" :value="dialog" color="#BAEAF8" :image="require('../../assets/l-presentation/notification.png')">
-      <slot slot="content">
-        Agora é possível administrar suas notificações. Diga como e por quais apps você deseja ser notificado em <strong>Notificações.</strong>
-      </slot>
-      <l-button @click="toggleDialog" style="width: fit-content; margin-top: 20px;">Apresentação por dialog</l-button>
-    </l-presentation>
-    <l-presentation @close="toggleTooltip" mode="cover" :isTooltip="true" :value="tooltip" placement="right" color="#BAEAF8" :image="require('../../assets/l-presentation/external-apps.png')">
-      <slot slot="content">
-          Administre suas notificações. Diga como e por quais apps você deseja ser notificado, acesse a aba de <strong>Notificações.</strong>
-      </slot>
-      <l-button @click="toggleTooltip" style="width: fit-content; margin-top: 20px;">Apresentação por tooltip</l-button>
-    </l-presentation>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Presentation",
-  data: () => ({
-    tooltip: false,
-    dialog: false
-  }),
-  methods: {
-    toggleTooltip() {
-      this.tooltip = !this.tooltip;
-    },
-    toggleDialog() {
-      this.dialog = !this.dialog;
-    }
-  }
-};
-</script>

package/src/components/LPresentation/index.vue

@@ -1,182 +0,0 @@
-<template>
-    <l-tooltip v-if="isTooltip" ref="tooltip" :placement="placement" effect="light" :value="value" manual
-        :tooltipClass="['l-presentation-popper', tooltipClass]">
-        <div class="tooltip-content" slot="content">
-            <div class="image-container" :style="{ 'background-color': color }">
-                <img :src="image" :class="['l-presentation-image', mode]" draggable="false" alt="Presentation">
-                <l-button @click="close" class="close-button" fab icon="uil-times" size="mini" type="info" />
-            </div>
-            <p>
-                <slot name="content" />
-            </p>
-        </div>
-        <slot />
-    </l-tooltip>
-    <div v-else>
-        <l-dialog :visible.sync="value" :before-close="close">
-            <div slot="title" class="image-container" :style="{ 'background-color': color }">
-                <img :src="image" :class="['l-presentation-image', mode]" width="280" height="160" draggable="false"
-                    alt="Presentation">
-            </div>
-            <div class="tooltip-content">
-                <p>
-                    <slot name="content" />
-                </p>
-            </div>
-        </l-dialog>
-        <slot />
-    </div>
-</template>
-
-<script>
-import Vue from "vue";
-
-export default {
-    tagName: "l-presentation",
-    props: {
-        image: {
-            type: String,
-            required: true,
-        },
-        color: {
-            type: String,
-            default: "#FFF"
-        },
-        placement: {
-            type: String,
-            default: "bottom"
-        },
-        value: {
-            type: Boolean,
-            default: false
-        },
-        isTooltip: {
-            type: Boolean,
-            default: false
-        },
-        mode: {
-            type: String,
-            default: "contain",
-            required: false
-        },
-        tooltipClass: {
-            type: String,
-            required: false
-        }
-    },
-    watch: {
-        value(value) {
-            if (this.isTooltip && value) {
-                Vue.nextTick(this.updateTooltipArrow);
-            }
-        }
-    },
-    methods: {
-        updateTooltipArrow() {
-            const element = this.$refs.tooltip.popperElm;
-            element.style.setProperty("--popper-arrow", this.color);
-        },
-        close() {
-            this.$emit("close");
-        }
-    },
-};
-</script>
-
-<style type="text/css" scoped>
-.tooltip-content {
-    width: fit-content;
-    overflow: hidden;
-    border-radius: 2px;
-    max-width: 330px;
-}
-
-.image-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    border-radius: 20px 20px 0 0;
-    overflow: hidden;
-}
-
-.l-presentation-image {
-    height: 100%;
-    width: 100%;
-}
-
-.contain {
-    object-fit: contain !important;
-}
-
-.cover {
-    object-fit: cover !important;
-}
-
-.tooltip-content .close-button {
-    position: absolute;
-    width: 25px !important;
-    height: 25px !important;
-    padding-top: 8px !important;
-    padding-left: 8px !important;
-    top: 20px;
-    right: 20px;
-    background: rgba(0, 0, 0, 0.25);
-}
-
-.tooltip-content .close-button i {
-    margin-top: 1px;
-}
-
-.tooltip-content p {
-    padding: 20px;
-    padding-bottom: 30px;
-    margin: 0;
-    color: var(--color-lead-light);
-    font-size: 16px;
-    word-wrap: break-word;
-}
-</style>
-
-<style>
-.l-presentation-popper {
-    padding: 0 !important;
-    border: 0px !important;
-    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.15);
-    border-radius: 20px !important;
-    user-select: none;
-    --popper-arrow: #FFF;
-}
-
-.l-presentation-popper .popper__arrow {
-    border-width: 0 !important;
-}
-
-.l-presentation-popper .popper__arrow::after {
-    border-right-color: var(--popper-arrow) !important;
-}
-
-.l-presentation .el-dialog {
-    max-width: 80%;
-    width: 330px;
-    overflow: hidden;
-    border-radius: 2px;
-}
-
-.l-presentation .el-dialog__header {
-    padding: 0 !important;
-    border: none;
-}
-
-.l-presentation .el-dialog__header .image {
-    border-radius: 0px;
-}
-
-.l-presentation .el-dialog__body {
-    padding: 0 !important;
-    border: none;
-    margin: 0px;
-    margin-top: 10px;
-    text-align: center;
-}
-</style>

package/src/components/LProgress/index.vue

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

package/src/components/LPromptDialog/index.vue

@@ -1,82 +0,0 @@
-<template>
-  <div class="prompt-dialog">
-    <h3>{{ title }}</h3>
-    <p v-if="content" style="display: block" class="mt-4">
-      {{ content }}
-    </p>
-    <div class="l-d-flex mt-4 prompt-buttons">
-      <l-button
-        @click="close()"
-        type="primary"
-        plain
-        class="bold my-0 ml-0 mr-2 dialog-button decline-button-dialog"
-      >
-        {{ buttonCloseLabel }}
-      </l-button>
-      <l-button
-        @click="selectModel()"
-        type="primary"
-        class="bold m-0 dialog-button confirm-button-dialog"
-      >
-        {{ buttonConfirmLabel }}
-      </l-button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  tagName: 'l-prompt-dialog',
-  props: {
-    title: {
-      type: String,
-    },
-    content: {
-      type: String,
-    },
-    buttonCloseLabel: {
-      type: String,
-      default: 'Cancelar',
-    },
-    buttonConfirmLabel: {
-      type: String,
-      default: 'Continuar',
-    },
-  },
-  methods: {
-    close() {
-      this.$emit('close')
-    },
-
-    selectModel() {
-      this.$emit('answer', true)
-    },
-  },
-}
-</script>
-
-<style scoped>
-.prompt-dialog {
-  padding: 24px;
-  max-width: 392px;
-}
-
-.dialog-button {
-  width: 100%;
-}
-
-@media (max-width: 504px) {
-  .prompt-dialog {
-    max-width: calc(100vw - 64px);
-    min-width: 100%;
-    width: 100vw;
-  }
-  .prompt-buttons {
-    flex-wrap: wrap;
-  }
-  .prompt-buttons > .decline-button-dialog {
-    margin-bottom: 8px !important;
-    margin-right: 0px !important;
-  }
-}
-</style>

package/src/components/LRadio/docs.vue

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

package/src/components/LRadio/index.vue

@@ -1,13 +0,0 @@
-<script>
-  import { Radio } from 'element-ui';
-  export default {
-    tagName: 'l-radio',
-    extends: Radio,
-  }
-</script>
-<style scoped>
-.l-radio .el-radio__inner::after {
-  width: 6px;
-  height: 6px;
-}
-</style>

package/src/components/LRadioButton/index.vue

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