layers-design-system 2.4.0 → 2.5.1

package/src/components/LDropdownMenu/docs.vue

@@ -1,44 +0,0 @@
-<template>
-  <div id="app">
-    <h1>DropdownMenu</h1>
-
-    <div>
-      <h3>Basic</h3>
-      <div class="row">
-        <l-dropdown trigger="click" @command="handleCommand" placement="top-end">
-        <l-icon :size="24" class="lead-light--text">uil-ellipsis-v</l-icon>
-        <l-dropdown-menu slot="dropdown" style="z-index: 2010!important">
-          <l-dropdown-item class="lead--text" command="ticket-info">
-            <l-icon class="mr-2 lead--text" style="font-size: 24px;">uil-info-circle</l-icon>
-            Informações da solicitação
-          </l-dropdown-item>
-          <l-dropdown-item divided class="lead--text" command="client-info">
-            <l-icon class="mr-2 lead--text" style="font-size: 24px;">uil-user</l-icon>
-            Informações do solicitante
-          </l-dropdown-item>
-        </l-dropdown-menu>
-      </l-dropdown>
-      </div>
-      <div>
-        Current command: {{currentCommand}}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'DropdownMenu',
-  data() {
-    return {
-      currentCommand: null,
-    }
-  },
-
-  methods: {
-    handleCommand(command) {
-      this.currentCommand = command
-    },
-  }
-};
-</script>

package/src/components/LDropdownMenu/index.vue

@@ -1,12 +0,0 @@
-<script>
-  import { DropdownMenu } from 'element-ui';
-  export default {
-    tagName: 'l-dropdown-menu',
-    extends: DropdownMenu
-  }
-</script>
-<style type="text/css">
-.l-dropdown-menu > .el-dropdown-menu__item--divided:before {
-  margin: 0 -16px;
-}
-</style>

package/src/components/LFailedToLoad/docs.vue

@@ -1,37 +0,0 @@
-<template>
-  <div v-if="success">
-    <h1 >Deu certo 🥳</h1>
-    <l-button @click="success = false">falhar novamente</l-button>
-  </div>
-  <l-failed-to-load
-    :actionFunction="retry"
-    :loading=loading
-    v-else
-  />
-</template>
-
-<script>
-
-export default {
-  name: 'FailedToLoad',
-  data: function () {
-    return {
-      success: false,
-      loading: false
-    }
-  },
-  methods: {
-    retry: function () {
-      this.loading = true
-      setTimeout(() => {
-        this.success =  true
-        this.loading = false
-      }, 2000);
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>

package/src/components/LFailedToLoad/index.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="failed-to-load">
-    <div style="display: flex">
-      <img
-        src="../../assets/failed-to-load/failed-to-load.svg"
-        height="280"
-        class="mt-5"
-        style="display: flex"
-      />
-    </div>
-    <h1 class="lead--text title mt-3">{{ title }}</h1>
-    <l-button
-      @click="actionFunction"
-      height="40"
-      width="220"
-      block
-      class="mt-3 bold f-19"
-      :loading=loading
-    >
-      {{ actionLabel }}
-    </l-button>
-  </div>
-</template>
-
-<script>
-export default {
-  tagName: 'l-failed-to-load',
-  props: {
-    title: {
-      type: String,
-      default: 'Algo deu errado :('
-    },
-    actionFunction: {
-      type: Function,
-    },
-    actionLabel: {
-      type: String,
-      default: 'Tentar novamente'
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
-
-<style type="text/css" scoped>
-.failed-to-load {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 1 1 auto;
-  height: 100%;
-}
-
-.title {
-  font-size: 2em;
-}
-</style>

package/src/components/LForm/index.vue

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

package/src/components/LFormItem/index.vue

@@ -1,12 +0,0 @@
-<script>
-  import { FormItem } from 'element-ui';
-  export default {
-    tagName: 'l-form-item',
-    extends: FormItem,
-  }
-</script>
-<style>
-.l-form-item .el-form-item__content {
-  line-height: 28px;
-}
-</style>

package/src/components/LHelperBox/assets/link.svg

@@ -1,4 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.3202 20.282C16.6481 21.4497 17.2779 22.5517 18.1963 23.4702C19.1148 24.3885 20.2168 25.0183 21.3845 25.3463L22.1324 27.4062L25.36 25.3857C26.5801 25.0576 27.7347 24.4279 28.6924 23.4702L34.4918 17.6708C37.3914 14.7712 37.3914 10.0743 34.4918 7.17469C31.5922 4.2751 26.8953 4.2751 23.9957 7.17469L18.1963 12.9741C17.2386 13.9318 16.6089 15.0864 16.2808 16.3065L18.1963 18.2221L20.2562 16.3459C20.604 15.6822 20.6595 15.8093 26.6197 9.79875C28.0629 8.35551 30.4246 8.35557 31.8677 9.79875C33.3109 11.2419 33.311 13.6036 31.8677 15.0468L26.0684 20.8462C25.8454 21.0692 25.5961 21.2659 25.3205 21.4103L22.1323 19.5342L18.1963 18.2222L16.3202 20.282Z" fill="#2F8AF5"/>
-<path d="M23.4445 28.718L17.6707 34.4918C14.7713 37.3913 10.0742 37.3914 7.17465 34.4918C4.27506 31.5922 4.27518 26.8952 7.17465 23.9957L12.9484 18.2219C13.9063 17.2641 15.0608 16.6344 16.2809 16.3064C17.5798 15.9522 18.9574 15.9652 20.2563 16.3458C21.424 16.6737 22.526 17.3035 23.4445 18.2219C24.363 19.1404 24.9926 20.2424 25.3207 21.4101C23.9038 22.2498 22.0407 22.0661 20.8205 20.8459C19.6004 19.6257 17.7372 19.4421 16.3203 20.2817C16.0449 20.426 15.7956 20.6228 15.5725 20.8459L9.7987 26.6198C8.35552 28.0629 8.35552 30.4246 9.7987 31.8678C11.2419 33.311 13.6036 33.311 15.0467 31.8678C20.9679 25.8964 21.0368 26.0103 21.3846 25.3462C22.6836 25.7267 24.0611 25.7398 25.3601 25.3856C25.0321 26.6056 24.4023 27.7602 23.4445 28.718Z" fill="#1765C1"/>
-</svg>

package/src/components/LHelperBox/assets/open-envelope.svg

@@ -1,9 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M38.3339 14.9363V34.8173C38.3339 35.8371 37.9 36.7553 37.207 37.3982C36.5783 37.981 35.7373 38.3371 34.8133 38.3371H5.18777C4.26368 38.3371 3.42269 37.981 2.79489 37.3988C2.10189 36.7553 1.66797 35.8371 1.66797 34.8173V14.9363H38.3339Z" fill="#4644B5"/>
-<path d="M38.3324 14.9358L24.239 3.2008C21.7826 1.1554 18.2163 1.1554 15.76 3.2008L1.6665 14.9358H1.66678L5.82054 18.3943L15.76 26.6702C18.2166 28.7162 21.7829 28.7162 24.2387 26.6702L34.1789 18.3943L38.3327 14.9358" fill="#5451D6" fill-opacity="0.2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M34.1792 18.395V15.9255V7.6129C34.1792 5.36494 32.3571 3.54224 30.1085 3.54224H9.89202C7.64351 3.54224 5.8208 5.36494 5.8208 7.6129V15.9255V18.395L15.7602 26.6709C18.2169 28.7168 21.7831 28.7168 24.2389 26.6709L34.1792 18.395Z" fill="#EEF1F5"/>
-<path d="M28.2307 17.7753H11.7687C11.4588 17.7753 11.2075 17.524 11.2075 17.2141C11.2075 16.9043 11.4588 16.6528 11.7687 16.6528H28.2307C28.5407 16.6528 28.792 16.9043 28.792 17.2141C28.792 17.524 28.5407 17.7753 28.2307 17.7753Z" fill="#5451D6"/>
-<path d="M28.2307 21.0348H11.7687C11.4588 21.0348 11.2075 20.7836 11.2075 20.4736C11.2075 20.1636 11.4588 19.9124 11.7687 19.9124H28.2307C28.5407 19.9124 28.792 20.1636 28.792 20.4736C28.792 20.7836 28.5407 21.0348 28.2307 21.0348Z" fill="#5451D6"/>
-<path d="M28.2307 11.2567H11.7687C11.4588 11.2567 11.2075 11.0055 11.2075 10.6955C11.2075 10.3855 11.4588 10.1343 11.7687 10.1343H28.2307C28.5407 10.1343 28.792 10.3855 28.792 10.6955C28.792 11.0055 28.5407 11.2567 28.2307 11.2567Z" fill="#5451D6"/>
-<path d="M28.2307 14.516H11.7687C11.4588 14.516 11.2075 14.2648 11.2075 13.9548C11.2075 13.6448 11.4588 13.3936 11.7687 13.3936H28.2307C28.5407 13.3936 28.792 13.6448 28.792 13.9548C28.792 14.2648 28.5407 14.516 28.2307 14.516Z" fill="#5451D6"/>
-</svg>

package/src/components/LHelperBox/docs.vue

@@ -1,29 +0,0 @@
-<template>
-<div>
-  <h1>Helper Box</h1>
-  <div class="row">
-    <l-helper-box
-      :icon="require('./assets/link.svg')"
-      title="O que são comunidades?"
-      description="São as organizações das quais você faz parte e pode acessar."
-      width="200"
-      actionButtonText="Saiba mais"
-      href="https://layers.movidesk.com/kb/article/141040/comunidades"
-    />
-  </div>
-
-  <div class="row">
-    <l-helper-box
-      :icon="require('./assets/open-envelope.svg')"
-      title="Precisa alterar seu nome ou e-mail?"
-      description="Entre em contato com a instituição de ensino."
-      width="200"
-    />
-  </div>
-</div>
-</template>
-<script>
-export default {
-  name: 'HelperBox'
-};
-</script>

package/src/components/LHelperBox/index.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="box p-4" :style="{ width: computedWidth }">
-    <img :src="icon" class="box-image" />
-    <h4 class="mt-2 lead--text">
-      {{ title }}
-    </h4>
-    <div class="mt-2 box-value lead-light--text mb-1">
-      {{ description }}
-    </div>
-    <l-button v-if="actionButtonText" class="mt-2" @click="actionButtonClick()">{{ actionButtonText }}</l-button>
-  </div>
-</template>
-
-<script>
-export default {
-  tagName: 'l-helper-box',
-
-  props: {
-    icon: {
-      type: String,
-      required: true
-    },
-    title: {
-      type: String,
-      required: true
-    },
-    description: {
-      type: String,
-      required: true
-    },
-    actionButtonText: {
-      type: String
-    },
-    href: {
-      type: String
-    },
-    width: {
-      type: [Number, String]
-    }
-  },
-
-  computed: {
-    computedWidth() {
-      const DEFAULT_WIDTH = 200;
-      const width = this.width || DEFAULT_WIDTH;
-
-      return `${width}px`;
-    }
-  },
-
-  methods: {
-    actionButtonClick() {
-      this.$emit('actionButtonClick');
-
-      if (this.href) {
-        window.open(this.href, '_blank');
-      }
-    }
-  }
-}
-</script>
-
-<style>
-.box {
-  display: flex;
-  border: 1px solid #d7dee3;
-  border-radius: 20px;
-  flex-direction: column;
-  justify-content: center;
-  height: max-content;
-  box-sizing: border-box!important;
-}
-
-.box-value {
-  font-size: 14px;
-  line-height: 19px;
-}
-
-.box-image {
-  width: 40px;
-  height: 40px;
-}
-</style>

package/src/components/LIcon/docs.vue

@@ -1,174 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Icon</h1>
-
-    <div>
-      <l-icon v-for="(icon, idx) in icons" :key="idx" size="32" :color="rainbow(idx)" :icon="icon"></l-icon>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Icon",
-
-  data() {
-    return {
-      icons: [
-        'type:String',
-        'amount',
-        'uil-10-plus',
-        'uil-12-plus',
-        'uil-13-plus',
-        'uil-16-plus',
-        'uil-17-plus',
-        'uil-18-plus',
-        'uil-21-plus',
-        'uil-3-plus',
-        'uil-500px',
-        'uil-6-plus',
-        'uil-abacus',
-        'uil-accessible-icon-alt',
-        'uil-adjust',
-        'uil-adjust-alt',
-        'uil-adjust-circle',
-        'uil-adjust-half',
-        'uil-adobe',
-        'uil-adobe-alt',
-        'uil-airplay',
-        'uil-align',
-        'uil-align-alt',
-        'uil-align-center',
-        'uil-align-center-alt',
-        'uil-align-center-h',
-        'uil-align-center-justify',
-        'uil-align-center-v',
-        'uil-align-justify',
-        'uil-align-left',
-        'uil-align-left-justify',
-        'uil-align-letter-right',
-        'uil-align-right',
-        'uil-align-right-justify',
-        'uil-amazon',
-        'uil-ambulance',
-        'uil-analysis',
-        'uil-analytics',
-        'uil-anchor',
-        'uil-android',
-        'uil-android-alt',
-        'uil-android-phone-slash',
-        'uil-angle-double-down',
-        'uil-angle-double-left',
-        'uil-angle-double-right',
-        'uil-angle-double-up',
-        'uil-angle-down',
-        'uil-angle-left',
-        'uil-angle-left-b',
-        'uil-angle-right',
-        'uil-angle-right-b',
-        'uil-angle-up',
-        'uil-angry',
-        'uil-ankh',
-        'uil-annoyed',
-        'uil-annoyed-alt',
-        'uil-apple',
-        'uil-apple-alt',
-        'uil-apps',
-        'uil-archive',
-        'uil-archive-alt',
-        'uil-archway',
-        'uil-arrow',
-        'uil-arrow-break',
-        'uil-arrow-circle-down',
-        'uil-arrow-circle-left',
-        'uil-arrow-circle-right',
-        'uil-arrow-circle-up',
-        'uil-arrow-compress-h',
-        'uil-arrow-down',
-        'uil-arrow-down-left',
-        'uil-arrow-down-right',
-        'uil-arrow-from-right',
-        'uil-arrow-from-top',
-        'uil-arrow-growth',
-        'uil-arrow-left',
-        'uil-arrow-random',
-        'uil-arrow-resize-diagonal',
-        'uil-arrow-right',
-        'uil-arrow-to-bottom',
-        'uil-arrow-to-right',
-        'uil-arrow-up',
-        'uil-arrow-up-left',
-        'uil-arrow-up-right',
-        'uil-arrows-h',
-        'uil-arrows-h-alt',
-        'uil-arrows-left-down',
-        'uil-arrows-maximize',
-        'uil-arrows-merge',
-        'uil-arrows-resize',
-        'uil-arrows-resize-h',
-        'uil-arrows-resize-v',
-        'uil-arrows-right-down',
-        'uil-arrows-shrink-h',
-        'uil-arrows-shrink-v',
-        'uil-arrows-up-right',
-        'uil-arrows-v',
-        'uil-arrows-v-alt',
-        'uil-assistive-listening-systems',
-        'uil-asterisk',
-        'uil-at',
-        'uil-atom',
-        'uil-auto-flash',
-        'uil-award',
-        'uil-award-alt',
-        'uil-baby-carriage',
-        'uil-backpack',
-        'uil-backspace',
-        'uil-backward',
-        'uil-bag',
-        'uil-bag-alt',
-        'uil-bag-slash',
-        'uil-balance-scale',
-        'uil-ban',
-        'uil-band-aid',
-        'uil-bars',
-        'uil-baseball-ball',
-        'uil-basketball',
-        'uil-basketball-hoop',
-        'uil-bath',
-        'uil-battery-bolt',
-        'uil-battery-empty',
-        'uil-bed',
-        'uil-bed-double',
-        'uil-behance',
-        'uil-behance-alt',
-        'uil-bell',
-        'uil-bell-school',
-        'uil-bell-slash',
-        'uil-bill',
-        'uil-bitcoin',
-        'uil-bitcoin-alt',
-        'uil-bitcoin-circle',
-        'uil-bitcoin-sign',
-        'uil-black-berry',
-        'uil-blogger',
-        'uil-blogger-alt',
-        'uil-bluetooth-b',
-        'uil-bold',
-        'uil-bolt',
-        'uil-bolt-alt',
-      ]
-    }
-  },
-
-  methods: {
-    rainbow(idx) {
-      return '#' +
-       [(idx * 30) % 256,
-        (idx * 40) % 256,
-        (idx * 100) % 256]
-        .map(c => c.toString(16).padStart(2, '0'))
-        .join('')
-    }
-  }
-};
-</script>

package/src/components/LIcon/index.vue

@@ -1,55 +0,0 @@
-<script>
-import {getColor} from '../../helpers/Colors'
-
-export default {
-  tagName: "l-icon",
-
-  functional: true,
-
-  props: ['icon', 'size', 'color'],
-
-  render: function(createElement, ctx) {
-    // Parse and transform icon name/pack
-    const iconText = (ctx.props.icon) || (ctx.data.domProps && ctx.data.domProps.textContent) || (ctx.children && ctx.children[0] && ctx.children[0].text)
-    const iconName = ctx.parent.$L ? ctx.parent.$L.Icons.get(iconText) : iconText;
-    const iconPack = iconName ? iconName.split('-')[0] : null;
-    
-    // Empty if no icon text or name
-    if (!iconText || !iconName) return null;
-
-    // Render element
-    const el = createElement('i', Object.assign({
-      staticStyle: {}
-    },ctx.data))
-
-    // Clear text
-    el.data.domProps = {}
-
-    // Build and apply icon class
-    const iconClass = `l-icon ${iconPack} ${iconName}`
-    el.data.staticClass = el.data.staticClass ? `${el.data.staticClass} ${iconClass}` : iconClass
-
-    // Build and apply icon size
-    if (ctx.props.size) {
-      const size = ctx.props.size
-      const onlyNumber = (parseFloat(size) == size)
-      const sizeStyle = onlyNumber ? `${size}px` : size
-      el.data.staticStyle['font-size'] = sizeStyle;
-    }
-
-    // Build and apply icon color
-    if (ctx.props.color) {
-      const color = getColor(ctx.props.color)
-      el.data.staticStyle['color'] = color;
-    }
-
-    return el;
-  }
-};
-</script>
-
-<style>
-.l-icon {
-  line-height: 1em;
-}
-</style>

package/src/components/LImage/index.vue

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

package/src/components/LImageViewer/docs.vue

@@ -1,111 +0,0 @@
-<template>
-  <div class="column">
-    <div class="row" style="justify-content: space-between;">
-      <l-input placeholder="Initial Index" v-model="index"></l-input>  
-      <l-button @click="openModal">abrir visualizador</l-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import ImageViewer from "./index.vue";
-import VueModals from "@tenda.digital/vue-modals";
-
-export default {
-  name: "ImageViewer",
-
-  data: function () {
-    return {
-      images: [
-        {
-          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://cdn.staging.layers.digital/staging/uploads/6cd2f532-dbae-4a1d-8d5a-8b1ad732ee0d/00011511.jpg",
-        },
-        {
-          name: "Imagem 3",
-          id: "3",
-          src: "https://cdn.staging.layers.digital/staging/uploads/b4f64d68-ce17-4dea-995c-cc63f5e761cf/UCD-Registro-de-aula.png",
-        },
-        {
-          name: "Imagem 4",
-          id: "4",
-          src: "https://cdn.staging.layers.digital/staging/uploads/6cd2f532-dbae-4a1d-8d5a-8b1ad732ee0d/00011511.jpg",
-        },
-        {
-          name: "Imagem 5",
-          id: "5",
-          src: "https://cdn.staging.layers.digital/staging/uploads/b4f64d68-ce17-4dea-995c-cc63f5e761cf/UCD-Registro-de-aula.png",
-        },
-        {
-          name: "Imagem 6",
-          id: "6",
-          src: "https://cdn.staging.layers.digital/staging/uploads/6cd2f532-dbae-4a1d-8d5a-8b1ad732ee0d/00011511.jpg",
-        },
-        {
-          name: "Imagem 6",
-          id: "7",
-          src: "https://cdn.staging.layers.digital/staging/uploads/b4f64d68-ce17-4dea-995c-cc63f5e761cf/UCD-Registro-de-aula.png",
-        },
-        {
-          name: "Imagem 8",
-          id: "8",
-          src: "https://cdn.staging.layers.digital/staging/uploads/6cd2f532-dbae-4a1d-8d5a-8b1ad732ee0d/00011511.jpg",
-        },
-        {
-          name: "Imagem 9",
-          id: "9",
-          src: "https://cdn.staging.layers.digital/staging/uploads/b4f64d68-ce17-4dea-995c-cc63f5e761cf/UCD-Registro-de-aula.png",
-        },
-        {
-          name: "Imagem 10",
-          id: "10",
-          src: "https://cdn.staging.layers.digital/staging/uploads/6cd2f532-dbae-4a1d-8d5a-8b1ad732ee0d/00011511.jpg",
-        },
-        {
-          name: "Imagem 11",
-          id: "11",
-          src: "https://cdn.staging.layers.digital/staging/uploads/b4f64d68-ce17-4dea-995c-cc63f5e761cf/UCD-Registro-de-aula.png",
-        },
-        {
-          name: "Imagem 12",
-          id: "12",
-          src: "https://cdn.staging.layers.digital/staging/uploads/6cd2f532-dbae-4a1d-8d5a-8b1ad732ee0d/00011511.jpg",
-        },
-      ],
-      index: 0
-    };
-  },
-
-  methods: {
-    async openModal() {
-      const modalStack = VueModals.Modals.stack();
-      try {
-        const modal = await modalStack.push({
-          layout: "drawer",
-          component: ImageViewer,
-          width: "100%",
-          props: {
-            images: this.images,
-            index: this.index,
-          },
-        });
-        if (modal) {
-          this.answer = modal;
-        }
-      } catch (error) {
-        // ignore
-      }
-      return;
-    },
-  },
-};
-</script>
-
-<style>
-</style>