layers-design-system 2.4.0 → 2.6.0

package/src/components/LToggleButtonGroup/index.vue

@@ -1,87 +0,0 @@
-<template>
-  <l-button-group class="l-toggle-button-group">
-    <l-tooltip
-      effect="dark"
-      :content="option.title"
-      placement="bottom"
-      v-for="option of options"
-      :key="option.value"
-    >
-      <l-button
-        :disabled="disabled"
-        :type="optionType(option)"
-        :icon="option.icon"
-        size="small"
-        plain
-        @click="selectOption(option)"
-      ></l-button>
-    </l-tooltip>
-  </l-button-group>
-</template>
-<script>
-export default {
-  tagName: 'l-toggle-button-group',
-  model: {
-    prop: "modelValue",
-    event: "change"
-  },
-  props: {
-    options: Array,
-    modelValue: String,
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      value: this.modelValue
-    };
-  },
-  watch: {
-    modelValue(val) {
-      if (this.value !== val) {
-        this.value = val;
-        this.$emit("change", this.value);
-      }
-    }
-  },
-  methods: {
-    optionType(option) {
-      if (this.disabled) return "default"
-      if (option.value === this.value) return "primary";
-      return "default";
-    },
-    selectOption(option) {
-      this.value = option.value;
-      this.$emit("change", this.value);
-    }
-  }
-};
-</script>
-<style lang="scss">
-@import "../../style/main.scss";
-
-.l-toggle-button-group {
-  .el-button {
-    height: 32px;
-    width: 32px;
-    padding: 0px;
-
-    &.el-button--primary,
-    &.el-button--primary + .el-button {
-      border-left-color: $--color-primary !important;
-    }
-    &.el-button--primary {
-      border-color: $--color-primary !important;
-    }
-    &.el-button--default {
-      color: #dcdfe6;
-    }
-
-    i {
-      font-size: 18px;
-    }
-  }
-}
-</style>

package/src/components/LTooltip/docs.vue

@@ -1,66 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Tooltip</h1>
-    <l-tooltip class="item" content="Top Left prompts info" placement="right-start" effect="light" :value="true" manual>
-      <l-button>top-start</l-button>
-    </l-tooltip>
-    <br>
-    <l-tooltip class="item" content="Top Left prompts info" placement="right-start" effect="dark" :value="true" manual>
-      <l-button>top-start</l-button>
-    </l-tooltip>
-    <div class="box">
-      <div class="row">
-        <l-tooltip class="item" content="Top Left prompts info" placement="top-start">
-          <l-button>top-start</l-button>
-        </l-tooltip>
-        <l-tooltip class="item" content="Top Center prompts info" placement="top">
-          <l-button>top</l-button>
-        </l-tooltip>
-        <l-tooltip class="item" content="Top Right prompts info" placement="top-end">
-          <l-button>top-end</l-button>
-        </l-tooltip>
-      </div>
-      <div class="row">
-        <l-tooltip class="item" content="Left Top prompts info" placement="left-start">
-          <l-button>left-start</l-button>
-        </l-tooltip>
-        <l-tooltip class="item" content="Left Center prompts info" placement="left">
-          <l-button>left</l-button>
-        </l-tooltip>
-        <l-tooltip class="item" content="Left Bottom prompts info" placement="left-end">
-          <l-button>left-end</l-button>
-        </l-tooltip>
-      </div>
-
-      <div class="row">
-        <l-tooltip class="item" content="Right Top prompts info" placement="right-start">
-          <l-button>right-start</l-button>
-        </l-tooltip>
-        <l-tooltip class="item" content="Right Center prompts info" placement="right">
-          <l-button>right</l-button>
-        </l-tooltip>
-        <l-tooltip class="item" content="Right Bottom prompts info" placement="right-end">
-          <l-button>right-end</l-button>
-        </l-tooltip>
-      </div>
-
-      <div class="row">
-        <l-tooltip class="item" content="Bottom Left prompts info" placement="bottom-start">
-          <l-button>bottom-start</l-button>
-        </l-tooltip>
-        <l-tooltip class="item" content="Bottom Center prompts info" placement="bottom">
-          <l-button>bottom</l-button>
-        </l-tooltip>
-        <l-tooltip class="item" content="Bottom Right prompts info" placement="bottom-end">
-          <l-button>bottom-end</l-button>
-        </l-tooltip>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Tooltip"
-};
-</script>

package/src/components/LTooltip/index.vue

@@ -1,28 +0,0 @@
-<script>
-import clone from "lodash/clone";
-import { Tooltip } from "element-ui";
-
-const Base = clone(Tooltip);
-delete Base.props.popperClass;  // Hack to overwrite base component prop
-
-export default {
-  tagName: "l-tooltip",
-  extends: Base,
-  props: ["tooltipClass"],
-  computed: {
-    popperClass() {
-      return this.tooltipClass || "l-tooltip-popper"
-    }
-  }
-};
-</script>
-<style>
-.l-tooltip-popper.el-tooltip__popper.is-light {
-  background: #ffffff;
-  border: 0px solid #303133;
-  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
-}
-.l-tooltip-popper.el-tooltip__popper.is-light .popper__arrow {
-  border-width: 0;
-}
-</style>

package/src/components/LTransitionExpand/docs.vue

@@ -1,26 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Transition Expand</h1>
-    <div class="box">
-      <div class="row">
-        <div class="item">
-          <l-button @click="expand = !expand">Expand!</l-button>
-          <l-transition-expand>
-            <div class="content" v-if="expand">Hi!</div>
-          </l-transition-expand>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "TransitionExpand", 
-  data() {
-    return {
-      expand: false
-    }
-  }
-};
-</script>

package/src/components/LTransitionExpand/index.vue

@@ -1,88 +0,0 @@
-<template>
-  <transition
-    class="l-transition-expand"
-    name="expand"
-    @enter="enter"
-    @after-enter="afterEnter"
-    @leave="leave">
-    <slot/>
-  </transition>
-</template>
-
-<script>
-export default {
-  tagName: "l-transition-expand",
-  methods: {
-    enter(element) {
-      const width = getComputedStyle(element).width;
-
-      element.style.width = width;
-      element.style.position = 'absolute';
-      element.style.visibility = 'hidden';
-      element.style.height = 'auto';
-
-      const height = getComputedStyle(element).height;
-
-      element.style.width = null;
-      element.style.position = null;
-      element.style.visibility = null;
-      element.style.height = 0;
-
-      // Force repaint to make sure the
-      // animation is triggered correctly.
-      getComputedStyle(element).height;
-
-      // Trigger the animation.
-      requestAnimationFrame(() => {
-        element.style.height = height;
-      });
-    },
-    afterEnter(element) {
-      element.style.height = 'auto'
-    },
-    leave(element) {
-      const height = getComputedStyle(element).height
-
-      element.style.height = height
-
-      // Force repaint to make sure the
-      // animation is triggered correctly.
-      getComputedStyle(element).height
-
-      requestAnimationFrame(() => {
-        element.style.height = 0
-      })
-    },
-  },
-}
-</script>
-
-<style scoped>
-* {
-  will-change: height;
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  perspective: 1000px;
-}
-
-.expand-enter-active,
-.expand-leave-active {
-  transition: height 0.3s ease-in-out;
-  overflow: hidden;
-}
-
-.expand-enter,
-.expand-leave-to {
-  height: 0;
-}
-
-.expand-enter-active,
-.expand-leave-active {
-  transition-property: opacity, height;
-}
-
-.expand-enter,
-.expand-leave-to {
-  opacity: 0;
-}
-</style>

package/src/components/LUpload/index.vue

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

package/src/docs/Colors.vue

@@ -1,50 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Colors</h1>
-
-    <el-card class="primary">
-      <h2>Primary</h2>
-    </el-card>
-    <el-card class="success">
-      <h2>Success</h2>
-    </el-card>
-    <el-card class="warning">
-      <h2>Warning</h2>
-    </el-card>
-    <el-card class="danger">
-      <h2>Danger</h2>
-    </el-card>
-    <el-card class="info">
-      <h2>Info</h2>
-    </el-card>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "app"
-};
-</script>
-<style lang="scss" scoped>
-@import "../style/main.scss";
-
-.row {
-  padding: 8px 0;
-}
-
-.el-card.primary {
-  background: $--color-primary;
-}
-.el-card.success {
-  background: $--color-success;
-}
-.el-card.warning {
-  background: $--color-warning;
-}
-.el-card.danger {
-  background: $--color-danger;
-}
-.el-card.info {
-  background: $--color-info;
-}
-</style>

package/src/docs/Home.vue

@@ -1,11 +0,0 @@
-<template>
-  <div>
-    Home
-  </div>
-</template>
-
-<script>
-export default {
-  name: "app"
-};
-</script>

package/src/docs/Notifications.vue

@@ -1,88 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Notifications</h1>
-
-    <l-button @click="defaultNotification">Default</l-button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Notifications",
-
-  methods: {
-    async defaultNotification() {
-      const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
-
-      this.$notify({
-        message: 'Alguma coisa aconteceu e ela é neutra.',
-        duration: 10000,
-        loading: true,
-        position: 'bottom',
-        actionLabel: 'ATUALIZAR',
-        action: () => {
-          alert('Você me clicou')
-        }
-      });
-      await sleep(1)
-
-      this.$notify({
-        type: 'error',
-        message: 'Algo aconteceu aqui e falhou :(',
-        duration: 10000,
-        position: 'top',
-        loading: true,
-        loadingPosition: 'right',
-        action: () => {
-          alert('Você me clicou')
-        }
-      });
-      await sleep(1)
-
-      this.$notify({
-        type: 'warning',
-        showClose: false,
-        actionLabel: 'ATUALIZAR',
-        action: () => {
-          alert('Você me clicou')
-        },
-        message: 'Parece que você está offline. Alguma outra info...',
-        duration: 10000,
-        position: 'top',
-      });
-      await sleep(1)
-
-      this.$notify({
-        type: 'success',
-        message: 'Algo aconteceu aqui e foi um sucesso!',
-        duration: 10000
-      });
-      await sleep(1)
-
-      this.$notify({
-        type: 'success',
-        message: 'Algo aconteceu aqui e foi um sucesso! Algo aconteceu aqui e foi um sucesso! Algo aconteceu aqui e foi um sucesso!',
-        duration: 10000
-      });
-      await sleep(1)
-
-      this.$notify({
-        type: 'success',
-        message: 'Algo aconteceu e é clicável',
-        duration: 10000,
-        onClick() {}
-      });
-
-      await sleep(1)
-
-      this.$notify({
-        type: 'success',
-        title: 'Algo aconteceu...',
-        message: 'e tem título!',
-        duration: 0,
-        onClick() {}
-      });
-    }
-  }
-};
-</script>

package/src/docs/index.vue

@@ -1,76 +0,0 @@
-<template>
-  <el-container id="app" class="layers-design-system">
-    <el-header>
-      <h1>Layers Design System</h1>
-    </el-header>
-
-    <el-container>
-      <el-aside
-        width="200px"
-        style="background-color: rgb(238, 241, 246); height: calc(100vh - 80px)"
-      >
-        <el-menu>
-          <router-link
-            :to="item.path"
-            v-for="item in menuItems"
-            :key="item.title"
-          >
-            <el-menu-item>{{ item.title }}</el-menu-item>
-          </router-link>
-        </el-menu>
-      </el-aside>
-
-      <div class="docs-content">
-        <router-view></router-view>
-      </div>
-    </el-container>
-    <vue-modals-stack name="default"></vue-modals-stack>
-  </el-container>
-</template>
-
-<style>
-body {
-  margin: 0;
-}
-
-.docs-content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 80px);
-  width: calc(100vw - 200px);
-  margin-left: 64px;
-  margin-right: 64px;
-}
-
-.docs-content > *:first-child {
-  height: 100%;
-  max-height: 100%;
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.row {
-  padding: 8px 0;
-}
-.el-aside {
-  color: #333;
-}
-.el-aside .el-menu-item a {
-  color: inherit;
-  text-decoration: none;
-}
-</style>
-
-<script>
-import routes from './routes'
-
-export default {
-  computed: {
-    menuItems() {
-      return routes
-    },
-  },
-}
-</script>

package/src/docs/routes.js

@@ -1,20 +0,0 @@
-import Home from './Home'
-import Colors from './Colors'
-import Notifications from './Notifications'
-
-const componentsPages = require.context('../components', true, /docs.vue$/);
-const componentsRoutes = componentsPages.keys().map(path => {
-  const component = componentsPages(path).default
-  return {
-    title: component.name,
-    path: '/component/' + component.name,
-    component: component
-  }
-})
-
-export default [
-  { title: 'Home', path: '/', component: Home },
-  { title: 'Colors', path: '/colors', component: Colors },
-  { title: 'Notifications', path: '/notifications', component: Notifications },
-  ...componentsRoutes
-]

package/src/helpers/Colors.js

@@ -1,79 +0,0 @@
-const CUSTOM_COLORS = [
-  "aqua",
-  "aqua-dark",
-  "purple",
-  "purple-dark",
-  "salmon",
-  "salmon-dark",
-  "yellow",
-  "yellow-dark",
-  "lead",
-  "lead-light",
-  "link",
-  "link-light",
-  "success",
-  "success-light",
-  "warning",
-  "warning-light",
-  "danger",
-  "danger-light",
-  "white",
-  "red",
-  "green",
-  "gray",
-  "gray-10",
-  "gray-20",
-  "gray-30",
-  "gray-40",
-  "gray-50",
-  "gray-60",
-  "gray-70",
-  "gray-80",
-  "gray-90",
-];
-
-export function getColor(color) {
-  if (CUSTOM_COLORS.includes(color)) {
-    return `var(--color-${color})`;
-  }
-  return color;
-}
-
-export function getColorLight(color) {
-  if (CUSTOM_COLORS.includes(color)) {
-    return `var(--color-${color}-op)`;
-  }
-
-  return hexToRgbA(color)
-}
-
-function hexToRgbA(hex){
-  var c;
-  if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
-      c= hex.substring(1).split('');
-      if(c.length== 3){
-          c= [c[0], c[0], c[1], c[1], c[2], c[2]];
-      }
-      c= '0x'+c.join('');
-      return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',0.1)';
-  }
-
-  return `var(--color-gray-60-op)`
-}
-
-const Plugin = {}
-Plugin.install = function (Vue) {
-
-  Vue.prototype.$L.getColor = getColor;
-  Vue.prototype.$L.getColorLight = getColorLight;
-
-  Vue.mixin({
-    beforeCreate: function() {
-      if (this.$options && this.$options.propsData && this.$options.propsData.color) {
-        this.$options.propsData.color = getColor(this.$options.propsData.color)
-      }
-    }
-  })
-}
-
-export default Plugin

package/src/helpers/FieldTypeComponents.js

@@ -1,43 +0,0 @@
-import { buildFieldKeys } from "./util"
-
-const COMPONENTS = new Map();
-
-function getComponent(fieldSchema, componentType) {
-  if (!fieldSchema) {
-    throw new Error(`Received ${fieldSchema} fieldSchema, componentType ${componentType}`)
-  }
-  if (fieldSchema.components && fieldSchema.components[componentType]) {
-    return fieldSchema.components[componentType]
-  }
-
-  const fieldKeys = buildFieldKeys(fieldSchema)
-  for (const fieldKey of fieldKeys) {
-    const component = COMPONENTS.get(`${fieldKey}:${componentType}`);
-    if (component) {
-      return component
-    }
-  }
-  throw new Error(`Component not found for field schema ${JSON.stringify(fieldSchema)} and component type ${componentType}`)
-}
-
-function registerComponent(fieldSchema, componentType, component) {
-  const fieldKey = buildFieldKeys(fieldSchema)[0] // Only set most prioritary key
-  const key = `${fieldKey}:${componentType}`
-  if (COMPONENTS.has(key) && COMPONENTS.get(key) !== component) {
-    // eslint-disable-next-line no-console
-    console.warn(`Overwriting component for key ${key}`)
-  }
-  COMPONENTS.set(key, component);
-}
-
-export const FieldTypeComponents = {
-  get: getComponent,
-  register: registerComponent,
-}
-
-const Plugin = {};
-Plugin.install = function (Vue) {
-  Vue.prototype.$L.FieldTypeComponents = FieldTypeComponents
-}
-
-export default Plugin;