layers-design-system 2.4.0 → 2.6.0

package/src/components/LAttachmentChip/index.vue

@@ -1,179 +0,0 @@
-<template>
-  <span
-    class="l-attachment-chip"
-  >
-    <div class="l-attachment-chip-thumb" v-if="thumb">
-      <img :src="thumb" width="32" height="32" />
-    </div>
-    <div class="l-attachment-chip-mime" v-else-if="mime && prettyMime">
-      <div 
-        class="l-attachment-chip-extension" 
-        :style="{ 'background-color': 'var(--color-' + prettyMime.color + ')' }">
-        {{ prettyMime.extension }}
-      </div>
-    </div>
-    <span class="l-attachment-chip-text">
-      <span class="l-attachment-chip-name" v-if="name">{{ name }}</span>
-      <span class="l-attachment-chip-size" v-if="prettySize && !closeable">({{ prettySize }})</span>
-    </span>
-    <button class="l-attachment-chip-clear" v-if="closeable" @click="handleClose">
-      <l-icon color="link">uil-multiply</l-icon>
-    </button>
-  </span>
-</template>
-<script>
-import PrettySize from '../../helpers/PrettySize'
-export default {
-  tagName: 'l-attachment-chip',
-
-  props: {
-    name: String,
-    mime: String,
-    thumb: String,
-    url: String,
-    size: Number,
-    closeable: {
-      type: Boolean,
-      default: false,
-    }
-  },
-
-  computed: {
-    prettySize() {
-      return PrettySize(this.size)
-    },
-
-    prettyMime() {
-      if(!this.mime) return { extension: '???', color: 'gray-20' }
-
-      if(this.mime.indexOf('image/') > -1) {
-        const mimeDefault = { extension: 'IMG', color: 'green' }
-        return {
-          'image/gif': { extension: 'GIF', color: 'primary' },
-          'image/jpeg': { extension: 'JPG', color: 'primary' },
-          'image/png': { extension: 'PNG', color: 'primary' },
-          'image/svg+xml': { extension: 'SVG', color: 'danger' },
-        }[this.mime] || mimeDefault
-      }
-
-      if(this.mime.indexOf('text/') > -1) {
-        const mimeDefault = { extension: 'TXT', color: 'lead' }
-        return {
-          'text/css': { extension: 'CSS', color: 'lead' },
-          'text/csv': { extension: 'CSV', color: 'lead' },
-          'text/html': { extension: 'HTML', color: 'lead' },
-        }[this.mime] || mimeDefault
-      }
-
-      if(this.mime.indexOf('video/') > -1) {
-        const mimeDefault = { extension: 'VID', color: 'danger' }
-        return {
-          'video/quicktime': { extension: 'MOV', color: 'danger' },
-          'video/mp4': { extension: 'MP4', color: 'danger' },
-          'video/mpeg': { extension: 'MP4', color: 'danger' }
-        }[this.mime] || mimeDefault
-      }
-
-      if(this.mime.indexOf('audio/') > -1) {
-        return { extension: 'AUD', color: 'info' }
-      }
-
-      if(this.mime.indexOf('application/') > -1) {
-        const mimeDefault = { extension: 'FIL', color: 'danger' }
-
-        return {
-          'application/zip': { extension: 'ZIP', color: 'danger' },
-          'application/x-rar-compressed': { extension: 'RAR', color: 'danger' },
-          'application/pdf': { extension: 'PDF', color: 'danger' },
-          'application/xml': { extension: 'XML', color: 'danger' },
-          'application/javascript': { extension: 'JS', color: 'success' },
-          'application/json': { extension: 'JSON', color: 'success' },
-
-          // Office tools
-          'application/msword': { extension: 'DOC', color: 'link' },
-          'application/vnd.openxmlformats-officedocument.wordprocessingml.document': { extension: 'DOC', color: 'link' },
-          'application/vnd.ms-powerpoint': { extension: 'PPT', color: 'salmon' },
-          'application/vnd.openxmlformats-officedocument.presentationml.presentation': { extension: 'PPT', color: 'info' },
-          'application/vnd.ms-excel': { extension: 'XLS', color: 'success' },
-          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': { extension: 'XLS', color: 'success' }
-        }[this.mime] || mimeDefault
-      }
-
-      return { extension: 'FIL', color: 'gray-20' }
-    },
-  },
-
-  methods: {
-    handleClose(event) {
-      event.stopPropagation();
-      this.$emit('close', this);
-    },
-  }
-}
-</script>
-<style>
-.l-attachment-chip {
-  background: var(--color-gray-20);
-  display: inline-flex;
-  border-radius: 4px;
-}
-.l-attachment-chip-thumb {
-  margin-right: 6px;
-}
-.l-attachment-chip-thumb > img {
-  object-fit: cover;
-  width: 32px;
-  height: 32px;
-  overflow: hidden;
-  border-radius: 4px;
-}
-.l-attachment-chip-thumb, 
-.l-attachment-chip-mime {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-}
-.l-attachment-chip-extension {
-  width: 16px;
-  height: 16px;
-  border-radius: 2px;  
-  font-size: 6px;
-  line-height: 16px;
-  text-align: center;
-  color: white;
-  font-weight: bold;
-}
-.l-attachment-chip-text {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 8px;
-  font-size: 12px;
-  font-weight: 600;
-  flex: 1 1 auto;
-}
-.l-attachment-chip-name {
-  color: var(--color-link);
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-.l-attachment-chip-size {
-  color: var(--color-gray-70);
-  padding-left: 4px;
-  white-space: pre;
-}
-.l-attachment-chip-clear {
-  border: none;
-  border-radius: 4px;
-  width: 24px;
-  background: var(--color-gray-30);
-  outline: none;
-  cursor: pointer;
-  flex: none;
-}
-</style>

package/src/components/LBox/docs.vue

@@ -1,26 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Box</h1>
-
-    <div>
-      <h2>Basic</h2>
-
-      <div class="row">
-        <l-box style="width: 320px; height: 224px;">
-          <l-box-header>Título do Box</l-box-header>
-          <p>Conteúdo do Box</p>
-        </l-box>
-        <l-box style="width: 320px; height: 224px; margin-left: 24px">
-          <l-box-header icon="user">Título do Box</l-box-header>
-          <p>Conteúdo do Box</p>
-        </l-box>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Box"
-};
-</script>

package/src/components/LBox/index.vue

@@ -1,19 +0,0 @@
-<template>
-  <div>
-    <slot></slot>
-  </div>
-</template>
-<script>
-  export default {
-    tagName: 'l-box',
-  }
-</script>
-<style>
-.l-box {
-  border: 1px solid var(--color-gray-30);
-  background: white;
-  box-shadow: 0px 1px 6px rgba(46, 142, 255, 0.1);
-  border-radius: 4px;
-  padding: 24px;
-}
-</style>

package/src/components/LBoxHeader/index.vue

@@ -1,24 +0,0 @@
-<template>
-  <div>
-    <h1>
-      <l-icon v-if="icon">{{ icon }}</l-icon>
-      <slot></slot>
-    </h1>
-  </div>
-</template>
-<script>
-export default {
-  tagName: "l-box-header",
-  props: ["icon"]
-};
-</script>
-<style>
-.l-box-header h1 {
-  font-size: 16px;
-  line-height: 24px;
-  margin: 0 0 16px 0;
-}
-.l-box-header .l-icon {
-  margin-right: 8px;
-}
-</style>

package/src/components/LBreadcrumb/docs.vue

@@ -1,21 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Breadcrumb</h1>
-
-    <div class="row">
-      <l-breadcrumb>
-        <l-breadcrumb-item :to="{ path: '/' }">Payments</l-breadcrumb-item>
-        <l-breadcrumb-item>Cobranças</l-breadcrumb-item>
-        <l-breadcrumb-item>Em protesto</l-breadcrumb-item>
-        <l-breadcrumb-item>Em protesto</l-breadcrumb-item>
-        <l-breadcrumb-item>Em protesto</l-breadcrumb-item>
-      </l-breadcrumb>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Breadcrumb"
-};
-</script>

package/src/components/LBreadcrumb/index.vue

@@ -1,22 +0,0 @@
-<script>
-  import { Breadcrumb } from 'element-ui';
-  export default {
-    tagName: 'l-breadcrumb',
-    extends: Breadcrumb,
-    props: {
-      "separator-class": {
-        type: String,
-        default: () => "uil-angle-right-b"
-      }
-    }
-  }
-</script>
-<style>
-.l-breadcrumb .el-breadcrumb__separator {
-  font-size: 20px;
-  height: 20px;
-}
-.l-breadcrumb-item:last-child {
-  line-height: 24px;
-}
-</style>

package/src/components/LBreadcrumbItem/index.vue

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

package/src/components/LButton/docs.vue

@@ -1,205 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Button</h1>
-
-    <div>
-      <h2>Sizes</h2>
-      <div class="row-2">
-        <l-button>Default</l-button>
-        <l-button size="large">Large</l-button>
-        <l-button size="medium">Medium</l-button>
-        <l-button size="small">Small</l-button>
-        <l-button size="mini">Mini</l-button>
-      </div>
-
-      <div class="row-2">
-        <l-button round>Default</l-button>
-        <l-button size="large" round>Large</l-button>
-        <l-button size="medium" round>Medium</l-button>
-        <l-button size="small" round>Small</l-button>
-        <l-button size="small" round plain type="info">Small</l-button>
-        <l-button size="mini" round>Mini</l-button>
-      </div>
-
-      <h2>Fill</h2>
-      <div class="row-2">
-        <l-button fill>Default</l-button>
-      </div>
-
-      <h2>Type (primary, success, info...)</h2>
-      <div class="row-2 mb-2">
-        <l-button>Default</l-button>
-        <l-button type="primary">Primary</l-button>
-        <l-button type="success">Success</l-button>
-        <l-button type="info">Info</l-button>
-        <l-button type="warning">Warning</l-button>
-        <l-button type="danger">Danger</l-button>
-      </div>
-
-      <div>
-        <h2>Text Buttons</h2>
-        <l-button type="text">Text Button</l-button>
-        <l-button type="text" disabled>Text Button</l-button>
-      </div>
-
-      <div>
-        <h2>Text Buttons - Colors</h2>
-        <l-button type="text" text-color="link">Text Button</l-button>
-        <l-button type="text" text-color="success">Text Button</l-button>
-        <l-button type="text" text-color="danger">Text Button</l-button>
-        <l-button type="text" text-color="warning">Text Button</l-button>
-      </div>
-
-      <h2>Plain</h2>
-      <div class="row-2 mb-2">
-        <l-button plain>Plain</l-button>
-        <l-button type="primary" plain>Primary</l-button>
-        <l-button type="success" plain>Success</l-button>
-        <l-button type="info" plain>Info</l-button>
-        <l-button type="warning" plain>Warning</l-button>
-        <l-button type="danger" plain>Danger</l-button>
-      </div>
-
-      <h2>Round</h2>
-      <div class="row-2 mb-2">
-        <l-button
-          type="info"
-          plain
-          round
-          size="small"
-        >
-          <l-icon class="mr-2" size="16" color="lead">uil-calender</l-icon>
-          Carregando...
-          <l-icon class="ml-2" size="16" color="lead">uil-angle-down</l-icon>
-        </l-button>
-
-        <l-button type="info" plain round>
-          <l-icon class="mr-2">uil-calender</l-icon>
-          Default
-          <l-icon class="ml-2">uil-angle-down</l-icon>
-        </l-button>
-
-        <l-button round>Round</l-button>
-        <l-button type="primary" round>Primary</l-button>
-        <l-button type="success" round>Success</l-button>
-        <l-button type="info" round>Info</l-button>
-        <l-button type="warning" round>Warning</l-button>
-        <l-button type="danger" round>Danger</l-button>
-      </div>
-
-      <h2>Circle</h2>
-      <div class="row-2">
-        <l-button icon="el-icon-search" size="large" circle></l-button>
-        <l-button icon="el-icon-search" size="medium" circle></l-button>
-        <l-button icon="el-icon-search" size="small" circle></l-button>
-        <l-button icon="el-icon-search" size="mini" circle></l-button>
-        <l-button icon="el-icon-search" circle></l-button>
-        <l-button type="primary" icon="el-icon-edit" circle></l-button>
-        <l-button type="success" icon="el-icon-check" circle></l-button>
-        <l-button type="info" icon="el-icon-message" circle></l-button>
-        <l-button type="warning" icon="el-icon-star-off" circle></l-button>
-        <l-button type="danger" icon="el-icon-delete" circle></l-button>
-      </div>
-
-      <h2>FAB</h2>
-      <div class="row-2 mb-2">
-        <l-button type="primary" icon="uil-times" fab size="large"></l-button>
-        <l-button type="primary" plain fab icon="uil-times" size="medium"></l-button>
-        <l-button fab icon="uil-times" size="small"></l-button>
-        <l-button fab icon="uil-times" size="mini"></l-button>
-
-        <l-button icon="el-icon-search" fab></l-button>
-        <l-button type="primary" icon="el-icon-edit" fab></l-button>
-        <l-button type="success" icon="el-icon-check" fab></l-button>
-        <l-button type="info" icon="el-icon-message" fab></l-button>
-        <l-button type="warning" icon="el-icon-star-off" fab></l-button>
-        <l-button type="danger" icon="el-icon-delete" fab></l-button>
-      </div>
-
-      <h2>Square</h2>
-      <div class="row-2 mb-2">
-        <l-button type="primary" icon="uil-setting" square size="large"></l-button>
-        <l-button type="primary" plain square icon="uil-setting" size="medium"></l-button>
-        <l-button square icon="uil-setting" size="small"></l-button>
-        <l-button square icon="uil-setting" size="mini"></l-button>
-
-        <l-button icon="el-icon-search" square></l-button>
-        <l-button type="primary" icon="el-icon-edit" square></l-button>
-        <l-button type="success" icon="el-icon-check" square></l-button>
-        <l-button type="info" icon="el-icon-message" square></l-button>
-        <l-button type="warning" icon="el-icon-star-off" square></l-button>
-        <l-button type="danger" icon="el-icon-delete" square></l-button>
-      </div>
-
-      <h2>Disabled</h2>
-      <div class="row-2">
-        <l-button disabled>Default</l-button>
-        <l-button type="primary" disabled>Primary</l-button>
-        <l-button type="success" disabled>Success</l-button>
-        <l-button type="info" disabled>Info</l-button>
-        <l-button type="warning" disabled>Warning</l-button>
-        <l-button type="danger" disabled>Danger</l-button>
-      </div>
-
-      <div class="row-2">
-        <l-button plain disabled>Plain</l-button>
-        <l-button type="primary" plain disabled>Primary</l-button>
-        <l-button type="success" plain disabled>Success</l-button>
-        <l-button type="info" plain disabled>Info</l-button>
-        <l-button type="warning" plain disabled>Warning</l-button>
-        <l-button type="danger" plain disabled>Danger</l-button>
-      </div>
-    </div>
-
-    <div>
-      <h2>Icon Buttons</h2>
-
-      <l-button type="primary" icon="el-icon-edit"></l-button>
-      <l-button type="primary" icon="el-icon-share"></l-button>
-      <l-button type="primary" icon="el-icon-delete"></l-button>
-      <l-button type="primary" icon="el-icon-search">Search</l-button>
-      <l-button type="primary">
-        Upload
-        <i class="el-icon-upload el-icon-right"></i>
-      </l-button>
-    </div>
-
-    <div>
-      <h2>Button Group</h2>
-
-      <div class="row-2">
-        <l-button-group>
-          <l-button type="primary" icon="el-icon-arrow-left">Previous Page</l-button>
-          <l-button type="primary">
-            Next Page
-            <i class="el-icon-arrow-right el-icon-right"></i>
-          </l-button>
-        </l-button-group>
-      </div>
-      <div class="row-2">
-        <l-button-group>
-          <l-button type="primary" icon="el-icon-edit"></l-button>
-          <l-button type="primary" icon="el-icon-share"></l-button>
-          <l-button type="primary" icon="el-icon-delete"></l-button>
-        </l-button-group>
-      </div>
-    </div>
-
-    <div>
-      <h2>Loading Button</h2>
-      <l-button type="primary" :loading="true">Loading</l-button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Button"
-};
-</script>
-
-<style>
-.row-2 {
-  margin: 8px 0;
-}
-</style>