layers-design-system 2.4.0 → 2.6.0

package/src/helpers/Icons.js

@@ -1,67 +0,0 @@
-const CUSTOM_ICONS = {
-  "type:String": "uil-text",
-  "type:Number": "uil-star",
-  "type:Date": "uil-calender",
-
-  "format:Email": "uil-at",
-  "format:Amount": "uil-usd-circle",
-  "format:PaymentStatus": "uil-bolt-alt",
-
-  "amount": "uil-usd-circle",
-  "recurrence": "uil-repeat",
-  "date": "uil-calender",
-  "user": "uil-user-circle",
-  "email": "uil-at",
-  "key": "uil-key-skeleton"
-};
-
-function get(key) {
-  if (!key) {
-    return null
-  }
-
-  if (key.icon) {
-    key = key.icon
-  }
-  else if (key.format) {
-    key = `format:${key.format}`
-  }
-  else if (key.type) {
-    key = `type:${key.type}`
-  }
-  if (key in CUSTOM_ICONS) {
-    key = CUSTOM_ICONS[key];
-  }
-
-  return key;
-}
-function register(key, className) {
-  CUSTOM_ICONS[key] = className
-}
-function registerForType(type, className) {
-  CUSTOM_ICONS[`type:${type}`] = className
-}
-function registerForFormat(format, className) {
-  CUSTOM_ICONS[`format:${format}`] = className
-}
-
-const Plugin = {};
-Plugin.install = function (Vue) {
-  Vue.prototype.$L.Icons = {
-    get,
-    register,
-    registerForType,
-    registerForFormat
-  }
-
-  // Vue.mixin({
-  //   beforeCreate() {
-  //     window['console'].log('beforeCreate', this)
-  //     if (this.$options && this.$options.propsData && this.$options.propsData.icon) {
-  //       this.$options.propsData.icon = get(this.$options.propsData.icon)
-  //     }
-  //   }
-  // })
-}
-
-export default Plugin;

package/src/helpers/Notification.js

@@ -1,94 +0,0 @@
-import Vue from 'vue';
-import Main from '../components/LNotification/index.vue';
-import merge from 'element-ui/src/utils/merge';
-import { PopupManager } from 'element-ui/src/utils/popup';
-import { isVNode } from 'element-ui/src/utils/vdom';
-const NotificationConstructor = Vue.extend(Main);
-
-let instance;
-let instances = [];
-let seed = 1;
-
-const Notification = function(options) {
-  if (Vue.prototype.$isServer) return;
-  options = merge({}, options);
-  const userOnClose = options.onClose;
-  const id = 'notification_' + seed++;
-  const position = options.position || 'top-right';
-
-  options.onClose = function() {
-    Notification.close(id, userOnClose);
-  };
-
-  instance = new NotificationConstructor({
-    data: options
-  });
-
-  if (isVNode(options.message)) {
-    instance.$slots.default = [options.message];
-    options.message = 'REPLACED_BY_VNODE';
-  }
-  instance.id = id;
-  instance.$mount();
-  document.body.appendChild(instance.$el);
-  instance.visible = true;
-  instance.dom = instance.$el;
-  instance.dom.style.zIndex = PopupManager.nextZIndex();
-
-  let verticalOffset = options.offset || 0;
-  instances.filter(item => item.position === position).forEach(item => {
-    verticalOffset += item.$el.offsetHeight + 16;
-  });
-  verticalOffset += 16;
-  instance.verticalOffset = verticalOffset;
-  instances.push(instance);
-  return instance;
-};
-
-['success', 'warning', 'info', 'error'].forEach(type => {
-  Notification[type] = options => {
-    if (typeof options === 'string' || isVNode(options)) {
-      options = {
-        message: options
-      };
-    }
-    options.type = type;
-    return Notification(options);
-  };
-});
-
-Notification.close = function(id, userOnClose) {
-  let index = -1;
-  const len = instances.length;
-  const instance = instances.filter((instance, i) => {
-    if (instance.id === id) {
-      index = i;
-      return true;
-    }
-    return false;
-  })[0];
-  if (!instance) return;
-
-  if (typeof userOnClose === 'function') {
-    userOnClose(instance);
-  }
-  instances.splice(index, 1);
-
-  if (len <= 1) return;
-  const position = instance.position;
-  const removedHeight = instance.dom.offsetHeight;
-  for (let i = index; i < len - 1 ; i++) {
-    if (instances[i].position === position) {
-      instances[i].dom.style[instance.verticalProperty] =
-        parseInt(instances[i].dom.style[instance.verticalProperty], 10) - removedHeight - 16 + 'px';
-    }
-  }
-};
-
-Notification.closeAll = function() {
-  for (let i = instances.length - 1; i >= 0; i--) {
-    instances[i].close();
-  }
-};
-
-export default Notification;

package/src/helpers/PrettySize.js

@@ -1,25 +0,0 @@
-/*
- * Source: https://stackoverflow.com/a/14919494
- *
- * Returns a pretty form of "size" to show in UI. Examples:
- * 10 => '10B'
- * 1024 => '10KB'
- */
-export default function PrettySize(bytes) {
-  if (!bytes) return '';
-
-  var si = true
-  var thresh = si ? 1000 : 1024;
-  if(Math.abs(bytes) < thresh) {
-      return bytes + ' B';
-  }
-  var units = si
-      ? ['kb','MB','GB','TB','PB','EB','ZB','YB']
-      : ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
-  var u = -1;
-  do {
-      bytes /= thresh;
-      ++u;
-  } while(Math.abs(bytes) >= thresh && u < units.length - 1);
-  return bytes.toFixed(1)+' '+units[u];
-}

package/src/helpers/RegisterElementUIComponents.js

@@ -1,9 +0,0 @@
-import { Input } from "element-ui"
-
-const Plugin = {}
-
-Plugin.install = function (Vue) {
-  Vue.component(Input.name, Input)
-}
-
-export default Plugin

package/src/helpers/Schemas.js

@@ -1,18 +0,0 @@
-const SCHEMAS = new Map();
-
-function getSchema(key) {
-  return SCHEMAS.get(key);
-}
-function registerSchema(key, schema) {
-  SCHEMAS.set(key, schema);
-}
-
-const Plugin = {};
-Plugin.install = function (Vue) {
-  Vue.prototype.$L.Schemas = {
-    get: getSchema,
-    register: registerSchema,
-  }
-}
-
-export default Plugin;

package/src/helpers/util.js

@@ -1,15 +0,0 @@
-export function buildFieldKeys(fieldSchema) {
-  const keys = []
-  if (fieldSchema && fieldSchema.format) {
-    keys.push(`format:${fieldSchema.format}`)
-  }
-  if (fieldSchema && fieldSchema.type) {
-    keys.push(`type:${fieldSchema.type}`)
-  }
-  keys.push('DEFAULT')
-
-  if (keys.length === 0) {
-    throw new Error(`Unprocessable fieldSchema ${fieldSchema}`)
-  }
-  return keys
-}

package/src/main-docs.js

@@ -1,132 +0,0 @@
-import Vue from 'vue'
-
-import Element from 'element-ui'
-import './style/element-variables.scss'
-import locale from 'element-ui/lib/locale/lang/pt-br'
-Vue.use(Element, { locale })
-
-import LayersDesignSystem from './main.js'
-Vue.use(LayersDesignSystem)
-window.$L = Vue.prototype.$L
-
-import VueModals from '@tenda.digital/vue-modals'
-import '@tenda.digital/vue-modals/dist/vue-modals.css'
-Vue.use(VueModals)
-
-import VueRouter from 'vue-router'
-Vue.use(VueRouter)
-
-const PayableSchema = {
-  title: 'Cobranças',
-  description: '',
-  collection: 'payables',
-  url: 'https://api.layers.digital/v1/payments/payables',
-  fields: [
-    {
-      title: 'Código da Cobrança',
-      description: 'Identificador único da cobrança',
-      reason: '',
-      path: 'code',
-      type: 'String',
-      options: {
-        routerLink: '/payments/payables/{{ id }}',
-      },
-      sortable: false,
-      displayable: true,
-      filterable: true,
-      editable: false,
-      icon: 'key',
-    },
-    {
-      title: 'Data da Cobrança',
-      description: 'Data de vencimento da cobrança',
-      reason: '',
-      path: 'dueAt',
-      type: 'Date',
-      options: {
-        format: 'LL',
-      },
-      sortable: true,
-      displayable: true,
-      filterable: true,
-      editable: true,
-    },
-    {
-      title: 'Cliente',
-      description: 'Nome de quem fez a compra',
-      reason: '',
-      path: 'customer.name',
-      type: 'String',
-      options: null,
-      sortable: true,
-      displayable: true,
-      filterable: true,
-      editable: false,
-      icon: 'user',
-    },
-    {
-      title: 'Parcela',
-      description: 'Número da parcela da venda',
-      reason: '',
-      path: 'installment',
-      format: 'Installment',
-      type: 'Number',
-      options: null,
-      sortable: true,
-      displayable: true,
-      filterable: true,
-      editable: false,
-    },
-    {
-      title: 'Status',
-      description: 'Status atual da cobrança',
-      reason: '',
-      path: 'status',
-      format: 'PaymentStatus',
-      type: 'String',
-      options: {
-        enum: [
-          'open',
-          'refunded',
-          'chargeback',
-          'in_protest',
-          'paid',
-          'released',
-          'pending',
-          'failed',
-          'expired',
-          'late',
-          'canceled',
-        ],
-      },
-      sortable: false,
-      displayable: true,
-      filterable: true,
-      editable: false,
-    },
-    {
-      title: 'Valor',
-      description: 'Valor total cobrado do cliente',
-      reason: '',
-      path: 'price.amount',
-      format: 'Amount',
-      type: 'Number',
-      options: null,
-      sortable: true,
-      displayable: true,
-      filterable: true,
-      editable: true,
-    },
-  ],
-}
-Vue.prototype.$L.Schemas.register('payable', PayableSchema)
-
-import App from './docs'
-import routes from './docs/routes'
-
-const router = new VueRouter({ routes })
-
-new Vue({
-  router,
-  render: (h) => h(App),
-}).$mount('#app')

package/src/main.js

@@ -1,100 +0,0 @@
-import lang from "element-ui/lib/locale/lang/pt-br";
-import locale from "element-ui/lib/locale";
-import "dayjs/locale/pt-br";
-import dayjs from "dayjs";
-import localizedFormatPlugin from "dayjs/plugin/localizedFormat";
-
-import "./style/main.scss";
-import Colors from "./helpers/Colors";
-import Icons from "./helpers/Icons";
-import Schemas from "./helpers/Schemas";
-import Notification from "./helpers/Notification";
-import FieldTypeComponents from "./helpers/FieldTypeComponents";
-import RegisterElementUIComponents from "./helpers/RegisterElementUIComponents";
-
-// Vant
-import Vant from "vant";
-import "vant/lib/index.css";
-// Zoomer
-import VueZoomer from "vue-zoomer";
-
-function hasRequire() {
-  try {
-    return typeof require.context !== "undefined";
-  } catch (e) {
-    return false;
-  }
-}
-
-const LayersDesignSystem = {};
-LayersDesignSystem.install = function (Vue) {
-  Vue.prototype.$L = {};
-
-  Vue.use(Vant);
-  Vue.use(VueZoomer);
-  Vue.use(Colors);
-  Vue.use(Icons);
-  Vue.use(Schemas);
-  Vue.use(FieldTypeComponents);
-  Vue.use(RegisterElementUIComponents);
-
-  locale.use(lang);
-  dayjs.extend(localizedFormatPlugin);
-
-  Vue.mixin({
-    mounted() {
-      this.__layers_addClassName();
-    },
-    updated() {
-      this.__layers_addClassName();
-    },
-    methods: {
-      __layers_addClassName() {
-        if (!this.__layers_addedClassName) {
-          const tagName = this.$options.tagName || "";
-          if (/^l-/.test(tagName) && this.$el.classList) {
-            this.$el.classList.add(tagName);
-          }
-        }
-      },
-    },
-  });
-
-  Vue.prototype.$notify = function (params) {
-    const isClickable = params.onClick && params.onClick instanceof Function;
-    const customClasses = [
-      params.customClass,
-      params.type,
-      !params.customClass && !params.type && "default",
-      isClickable && "cursor-pointer",
-    ];
-
-    return Notification({
-      ...params,
-      customClass: customClasses.filter((customClass) => customClass).join(" "),
-    });
-  };
-
-  if (hasRequire()) {
-    const requireComponent = require.context(
-      "./components",
-      true,
-      /index.vue$/
-    );
-    requireComponent.keys().forEach((path) => {
-      const component = requireComponent(path).default;
-      if (!component.tagName) throw new Error(`Missing tagName for ${path}`);
-      Vue.component(component.tagName, component);
-    });
-  } else {
-    const components = import.meta.glob("./components/**/index.vue", {
-      eager: true,
-    });
-    for (const componentModule of Object.values(components)) {
-      Vue.component(componentModule.default.tagName, componentModule.default);
-    }
-  }
-};
-
-export { Notification };
-export default LayersDesignSystem;

package/src/style/colors.scss

@@ -1,31 +0,0 @@
-@function hexToRGBString($hexColor) {
-  @return "#{red($hexColor)},#{green($hexColor)},#{blue($hexColor)}";
-}
-
-@function setOpacity($color) {
-  @return "rgba(#{hexToRGBString($color)}, 0.12)";
-}
-
-@each $key, $value in $colors {
-  .#{"" + $key} {
-    background-color: #{$value} !important;
-  }
-  .#{"" + $key}-outline {
-    border-color: #{$value} !important;
-  }
-  .#{"" + $key}--text {
-    color: #{$value} !important;
-  }
-  .color-#{"" + $key} {
-    color: #{$value};
-  }
-  .bg-color-#{"" + $key} {
-    background-color: #{$value};
-  }
-  & {
-    --#{"" + $key}: #{$value};
-    --color-#{"" + $key}: #{$value};
-    --color-#{"" + $key}-rgb: #{hexToRGBString($value)};
-    --color-#{"" + $key}-op: #{setOpacity($value)};
-  }
-}

package/src/style/element-variables.scss

@@ -1,21 +0,0 @@
-@import "./layers-variables.scss";
-
-$--color-primary: $aqua;
-$--color-success: $success;
-$--color-warning: $yellow-dark;
-$--color-danger: $danger;
-$--color-info: $lead-light;
-
-:root {
-  --color-primary: #{$--color-primary};
-  --color-success: #{$--color-success};
-  --color-warning: #{$--color-warning};
-  --color-danger: #{$--color-danger};
-  --color-info: #{$--color-info};
-  --white: #{$white};
-}
-
-/* icon font path, required */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
-
-@import "~element-ui/packages/theme-chalk/src/index";

package/src/style/icons.scss

@@ -1,5 +0,0 @@
-/* unicons fix */
-[class^="uil-"]:before,
-[class*=" uil-"]:before {
-  margin: 0 !important;
-}

package/src/style/layers-variables.scss

@@ -1,73 +0,0 @@
-/* Brand Colors */
-$aqua: #00b8ad;
-$aqua-dark: #00a69c;
-$aqua-light: rgba($aqua, 0.1);
-$purple: #5451d6;
-$purple-dark: #4644b5;
-$salmon: #f97777;
-$salmon-dark: #e86161;
-$yellow: #ffca65;
-$yellow-dark: #f5b845;
-$lead: #232b34;
-$lead-light: #434e5b;
-$white: #ffffff;
-$gray: #808080;
-$red: #ed6b4f;
-$green: #30b565;
-
-/* Feedback Colors */
-$link: #2f8af5;
-$link-light: rgba($link, 0.1);
-$success: #30b565;
-$success-light: rgba($success, 0.1);
-$warning: #f0af09;
-$warning-light: rgba($warning, 0.12);
-$danger: #ed6b4f;
-$danger-light: rgba($danger, 0.1);
-
-/* Greyscale Colors */
-$gray-10: #F4F6F8;
-$gray-20: #EEF1F5;
-$gray-30: #E8ECEF;
-$gray-40: #D7DEE3;
-$gray-50: #C8D0D8;
-$gray-60: #A3B1BF;
-$gray-70: #748494;
-$gray-80: #405261;
-$gray-90: #1D2B36;
-
-
-$colors: (
-  aqua: $aqua,
-  aqua-dark: $aqua-dark,
-  aqua-light: $aqua-light,
-  purple: $purple,
-  purple-dark: $purple-dark,
-  salmon: $salmon,
-  salmon-dark: $salmon-dark,
-  yellow: $yellow,
-  yellow-dark: $yellow-dark,
-  lead: $lead,
-  lead-light: $lead-light,
-  white: $white,
-  red: $red,
-  green: $green,
-  link: $link,
-  link-light: $link-light,
-  success: $success,
-  success-light: $success-light,
-  warning: $warning,
-  warning-light: $warning-light,
-  danger: $danger,
-  danger-light: $danger-light,
-  gray: $gray,
-  gray-10: $gray-10,
-  gray-20: $gray-20,
-  gray-30: $gray-30,
-  gray-40: $gray-40,
-  gray-50: $gray-50,
-  gray-60: $gray-60,
-  gray-70: $gray-70,
-  gray-80: $gray-80,
-  gray-90: $gray-90,
-);