layers-design-system 2.4.0 → 2.6.0

package/src/components/LImageViewer/index.vue

@@ -1,449 +0,0 @@
-<template>
-  <div
-    class="image-viewer"
-    style="position: relative;"
-  >
-    <div class="header" :class="{'colapsed': !showCommands}">
-      <l-button
-        circle
-        @click="back"
-        class="header-button"
-        icon="uil-arrow-left"
-      >
-      </l-button>
-      <div v-if="images.length !== 1">{{ parseInt(selected) + 1 }}/{{ images.length }}</div>
-      <l-button
-        circle
-        @click="download"
-        class="header-button"
-        icon="el-icon-download"
-      ></l-button>
-    </div>
-    <transition name="el-notification-fade">
-      <l-button
-        @click="previous"
-        @touchstart="previous"
-        circle
-        icon="uil-angle-left"
-        class="nav-button left"
-        v-if="selected > 0 && showCommands"
-      >
-      </l-button>
-    </transition>
-    <transition name="el-notification-fade">
-      <l-button
-        @click="next"
-        circle
-        icon="uil-angle-right"
-        class="nav-button right"
-        v-if="selected < images.length - 1 && showCommands"
-      >
-      </l-button>
-    </transition>
-    <div class="row scroll-container" id="gallery-container" :style="{overflow: zoomed ? 'hidden' : 'auto'}">
-      <div
-        observer-targets
-        class="image-container"
-        @click="toggleCommands"
-        @mousedown="updateMouseDown"
-        @mouseup="updateMouseUp"
-        v-for="(image, index) in images"
-        :ref="`${image.id}-${index}`"
-        :id="index"
-        :key="index"
-        >
-          <v-zoomer :zoomed.sync="zoomed" class="image" ref="zoomer">
-            <img  class="image" :src="image.src"/>
-          </v-zoomer>
-      </div>
-    </div>
-    <div v-if="images.length" class="web-image-selector">
-      <div class="carousel-container">
-        <div
-          class="fade-box left"
-        ></div>
-        <div
-          class="carousel-inner"
-          :style="{ transform: `translateX(${this.scale * 8.5}em)` }"
-        >
-          <div
-            v-for="(image, index) in cards"
-            :key="image.id"
-            @click="select(index)"
-            class="card"
-            :class="{ selected: index == selected }"
-            :data-scale="image.scale"
-          >
-            <img :src="image.src" style="width: 100%; height: 100%; object-fit: cover;" />
-          </div>
-        </div>
-        <div
-          class="fade-box right"
-        ></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-let targets = null
-
-export default {
-  tagName: "l-image-viewer",
-  name: "LImageViewer",
-
-  props: ["images", "index"],
-
-  data: function () {
-    return {
-      selected: 0,
-      cards: [],
-      scale: 0,
-      showCommands: true,
-      latestTap: 0,
-      lastMouseUp: 0,
-      lastMouseDown: 0,
-      zoomed: false,
-    }
-  },
-
-  mounted() {
-    targets = document.querySelectorAll('[observer-targets]')
-    this.intersectionObserver = new IntersectionObserver((event) => this.onChangeVisibility(event[0]), {
-      threshold: [0.9, 1],
-    })
-
-    targets.forEach(target => {
-      this.intersectionObserver.observe(target)
-    })
-
-    const initialIndex = parseInt(this.index) || 0
-    this.cards = this.images.map((image, index) => {
-      image.scale = index
-      return image
-    })
-
-    this.scale = 2 - (this.index)
-
-    this.slideAndScale()
-
-    this.select(initialIndex)
-  },
-
-  beforeDestroy() {
-    this.intersectionObserver.disconnect;
-  },
-
-  methods: {
-    onChangeVisibility(event) {
-      if (event.isIntersecting) {
-        this.selected = Number(event.target.id)
-      }
-    },
-
-    toggleCommands() {
-      let now = new Date().getTime();
-      let timesince = now - this.latestTap;
-      let clickDuration =  this.lastMouseUp - this.lastMouseDown
-      if((timesince > 700 || timesince < 0 ) && clickDuration < 100){
-        this.showCommands = !this.showCommands
-      } else if (clickDuration > 1500) {
-        this.download()
-      }
-
-      this.latestTap = new Date().getTime();
-    },
-
-    updateMouseUp(){
-      this.lastMouseUp = new Date().getTime()
-    },
-
-    updateMouseDown() {
-      this.lastMouseDown = new Date().getTime()
-    },
-
-    back() {
-      this.$emit("close", null);
-    },
-
-    download: async function () {
-      const selectedImage = this.images[this.selected]
-      const LayersPortal = window.LayersPortal
-      if (LayersPortal) {
-        await LayersPortal('download', {
-          url: selectedImage.src,
-          name: selectedImage.name,
-        })
-      } else {
-        window.open(selectedImage.src);
-      }
-    },
-
-    previous() {
-      if(this.selected <= 0) return
-
-      document.getElementById('gallery-container').scrollTo({
-        left: Math.abs(window.innerWidth - (window.innerWidth*(this.selected))),
-        behavior: 'smooth'
-      })
-
-      if (this.cards[0].scale < 2) {
-        this.scale++
-      }
-      this.lastMouseDown = 0
-      this.slideAndScale()
-    },
-
-    next() {
-      if(this.selected >= targets.length - 1) return
-
-      document.getElementById('gallery-container').scrollTo({
-        left: window.innerWidth*(this.selected + 1),
-        behavior: 'smooth'
-      })
-
-      if (this.cards[this.cards.length - 1].scale != 2) {
-        this.scale--
-      }
-
-      this.lastMouseDown = 0
-      this.slideAndScale()
-    },
-
-    select(index) {
-      if(index > this.selected) {
-        document.getElementById('gallery-container').scrollTo({
-          left: window.innerWidth*(index),
-          behavior: 'smooth'
-        })
-      }
-
-      if(index < this.selected) {
-        document.getElementById('gallery-container').scrollTo({
-          left: Math.abs(window.innerWidth - (window.innerWidth*(index + 1))),
-          behavior: 'smooth'
-        })
-      }
-
-      const selectedCardScale = this.cards[index].scale;
-      if (selectedCardScale !== 2) {
-        this.scale -= selectedCardScale - 2;
-        this.slideAndScale();
-      }
-
-    },
-
-    slideAndScale: function () {
-      this.cards.map((card, i) => {
-        card.scale = i + this.scale;
-      });
-    },
-  },
-
-  watch: {
-    selected: function(current, previous) {
-      this.$refs.zoomer[previous].reset()
-    }
-  }
-};
-</script>
-
-<style scoped>
-.image-viewer {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100vw;
-}
-
-.header {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  height: 56px;
-  transition: max-height 0.3s ease-out;
-  max-height: 60px;
-  margin-right: 16px;
-  margin-left: 16px;
-}
-
-.header.colapsed {
-  max-height: 0;
-}
-
-.header-button {
-  border: none !important;
-  font-size: 24px !important;
-}
-
-.nav-button {
-  position: absolute;
-  top: 50%;
-  z-index: 99999;
-  height: 32px;
-  width: 32px;
-}
-
-.nav-button.right {
-  right: 10%;
-}
-
-.nav-button.left {
-  left: 10%;
-}
-
-
-.image-container {
-  display: flex;
-  flex: 1 1 auto;
-  min-width: 100vw;
-  flex-direction: column;
-  scroll-snap-align:  center;
-  scroll-snap-stop:  always;
-}
-
-.translate {
-  transform: translateX(0, 100vw);
-}
-
-.image {
-  height: 100%;
-  width: 100%;
-  object-fit: contain;
-}
-
-.vue-zoomer {
-  height: 100% !important;
-}
-
-.border-none {
-  border: none;
-}
-
-.card {
-  font-family: sans-serif;
-  line-height: 120px;
-  width: 120px;
-  height: 120px;
-  background: white;
-  border-radius: 4px;
-  overflow: hidden;
-  display: inline-block;
-  margin: 0 10px;
-  position: relative;
-  bottom: -1.2em;
-  transition: transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
-  cursor: pointer;
-}
-
-.card[data-scale="0"],
-.card[data-scale="4"] {
-  transform: scale(1);
-  z-index: 0;
-}
-.card[data-scale="1"],
-.card[data-scale="3"] {
-  transform: scale(1.05);
-  z-index: 1;
-}
-.card[data-scale="2"] {
-  transform: scale(1.1);
-  z-index: 2;
-}
-
-.selected {
-  box-shadow: 0 0 0 4px var(--aqua);
-}
-
-.web-image-selector {
-  display: flex;
-  min-height: 170px;
-  max-height: 170px;
-  margin-top: 10px;
-}
-
-.carousel-container {
-  position: relative;
-  white-space: nowrap;
-  overflow-x: hidden;
-  height: 100%;
-  width: 41.5em;
-  margin: auto;
-  transform: translateY((-0.6 * 120px));
-}
-
-.carousel-inner {
-  position: absolute;
-  transition: transform 0.3s ease;
-}
-
-.fade-box {
-  position: absolute;
-  top: 0;
-  height: 170px;
-  width: 100px;
-  z-index: 10;
-  bottom: -1.2em;
-}
-
-.fade-box.right {
-  right: 0;
-  background-image: linear-gradient(
-    270deg,
-    #ffffff 45.07%,
-    rgba(255, 255, 255, 0) 100%
-  );
-}
-
-.fade-box.left {
-  left: 0;
-  background: linear-gradient(
-    90deg,
-    #ffffff 31.57%,
-    rgba(255, 255, 255, 0) 100%
-  );
-}
-
-.scroll-container {
-  background-color: white;
-  padding: 0px;
-  transition: all 0.3s ease-out;
-  scroll-snap-type: x mandatory;
-  overflow: auto;
-  position: relative;
-  width: 100%;
-  height: auto;
-  z-index: 1;
-  display: flex;
-  flex: 1 1 auto;
-  transition-property: transform;
-  box-sizing: content-box;
-  touch-action: pan-x pinch-zoom;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-.scroll-container::-webkit-scrollbar {
-  display: none;
-}
-
-@media (max-width: 768px) {
-  .web-image-selector {
-    display: none !important;
-  }
-
-  .image {
-    margin: 0px;
-  }
-
-  .nav-button.right {
-  right: 16px;
-  }
-
-  .nav-button.left {
-    left: 16px;
-  }
-}
-</style>

package/src/components/LInput/docs.vue

@@ -1,43 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Input</h1>
-
-    <div>
-      <h3>Basic</h3>
-      <div class="row">
-        <l-input placeholder="Please input" v-model="input"></l-input>
-      </div>
-    </div>
-
-    <div>
-      <h3>Original (from Element UI)</h3>
-      <el-input placeholder="Please input" v-model="input"></el-input>
-    </div>
-
-    <div>
-      <h3>Error</h3>
-      <div class="row">
-        <l-input 
-          v-model="input"
-          prefix-icon="uil-map-marker"
-          suffix-icon="uil-angle-right"
-          placeholder="Please input" 
-          :error="true" 
-          error-message="Este input é obrigatório"
-        ></l-input>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Input',
-  data() {
-    return {
-      input: ''
-    }
-  }
-};
-</script>

package/src/components/LInput/index.vue

@@ -1,60 +0,0 @@
-<template functional>
-  <div class="l-input-wrapper"     
-    :style="[ 
-      data.style,
-      data.staticStyle
-    ]"
-    :class="[
-      data.class,
-      data.staticClass,
-    ]">
-    <el-input 
-      v-bind="data.attrs"
-      v-on="listeners"
-      class="l-input"
-      :class="{ 'l-input-error': props.error }"
-    >
-      <slot />
-    </el-input>
-    <div class="l-input-error-message" v-if="props.errorMessage">
-      {{ props.errorMessage }}
-    </div>
-  </div>
-</template>
-<script>
-  import Vue from "vue"
-  import { Input } from "element-ui"
-  Vue.component(Input.name, Input)
-
-  export default {
-    tagName: "l-input",
-    name: 'Linput'
-  }
-</script>
-
-<style type="text/css">
-.l-input-error > .el-input__inner {
-  border: 1px solid var(--color-danger);
-}
-.l-input.l-input-error .el-input__prefix {
-  color: var(--color-danger);
-}
-.l-input-error-message {
-  color: var(--color-danger);
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 130%;
-  margin-top: 2px;
-}
-.l-input.el-input--prefix .el-input__inner {
-  padding-left: 42px;
-}
-.l-input .el-input__prefix {
-  left: 12px;
-  color: var(--color-grey-80);
-}
-.l-input .el-input__prefix .el-input__icon,
-.l-input .el-input__suffix .el-input__icon {
-  font-size: 20px;
-}
-</style>

package/src/components/LLinearProgress/docs.vue

@@ -1,21 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Linear Progress</h1>
-
-    <div>
-      <div class="row">
-        <l-linear-progress />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "LinearProgress"
-};
-</script>
-
-<style scoped>
-
-</style>

package/src/components/LLinearProgress/index.vue

@@ -1,74 +0,0 @@
-<template functional>
-  <div
-    class="l-linear-progress"
-    :style="[
-      data.style,
-      data.staticStyle,
-      { 'height': props.height + 'px' },
-    ]"
-    :class="[
-      data.class,
-      data.staticClass,
-    ]">
-    <div class="l-linear-progress-background" :style="{ '--color': parent.$L.getColor(props.background) }"></div>
-    <div class="l-linear-progress-indeterminate"
-      :style="{ '--color': parent.$L.getColor(props.color) }"
-      :class="[props.color]">
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  tagName: "l-linear-progress",
-  props: {
-    color: { type: String, default: () => 'rainbow' },
-    background: { type: String, default: () => 'transparent' },
-    height: { type: Number, default: () => 4 },
-  },
-};
-</script>
-<style>
-.l-linear-progress {
-  width: 100%;
-  height: 4px;
-  background: transparent;
-  overflow: hidden;
-  position: relative;
-  transition: .2s cubic-bezier(.4,0,.6,1);
-}
-.l-linear-progress .rainbow {
-  background: linear-gradient(90deg, #00B8AD 0%, #5451D6 33.19%, #F97777 50%, #FFCA65 90%, #FFCA65 100%);
-}
-.l-linear-progress-indeterminate {
-  height: inherit;
-  left: 0;
-  right: auto;
-  animation-iteration-count: infinite;
-  bottom: 0;
-  height: inherit;
-  position: absolute;
-  top: 0;
-  width: auto;
-  will-change: left,right;
-  animation-name: indeterminate;
-  animation-duration: 1.2s;
-  animation-delay: 0.2s;
-  left: -100%;
-  right: 100%;
-}
-@keyframes indeterminate {
-  0% {
-    right:100%;
-    left:-100%;
-  }
-  40% {
-    right:-10%;
-    left:-50%;
-  }
-  to {
-    right:-10%;
-    left:100%;
-  }
-}
-
-</style>

package/src/components/LNotice/docs.vue

@@ -1,26 +0,0 @@
-<template>
-  <div>
-    <h1>Notice</h1>
-
-    <l-notice type="danger">
-      Texto do problemão.
-      <br />Texto do problemão.
-    </l-notice>
-    <l-notice type="warning">Texto do probleminha.</l-notice>
-    <l-notice type="success">Texto de sucesso.</l-notice>
-    <l-notice color="purple" icon="uil-sync">Texto texto texto texto.</l-notice>
-    <l-notice color="danger" outline :fill="false" :show-icon="false">Texto texto texto texto.</l-notice>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Notice"
-};
-</script>
-
-<style scoped>
-.l-notice {
-  margin-bottom: 20px;
-}
-</style>