layers-design-system 2.4.0 → 2.6.0

package/src/components/LTabs/docs.vue

@@ -1,28 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Tabs</h1>
-
-    <div>
-      <h2>Basic</h2>
-
-      <l-tabs v-model="activeName">
-        <l-tab-pane label="User" name="first">User</l-tab-pane>
-        <l-tab-pane label="Config" name="second">Config</l-tab-pane>
-        <l-tab-pane label="Role" name="third">Role</l-tab-pane>
-        <l-tab-pane label="Task" name="fourth">Task</l-tab-pane>
-      </l-tabs>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Tabs",
-
-  data() {
-    return {
-      activeName: "first",
-    };
-  }
-};
-</script>

package/src/components/LTabs/index.vue

@@ -1,37 +0,0 @@
-<script>
-import { Tabs } from "element-ui";
-export default {
-  tagName: "l-tabs",
-  extends: Tabs,
-  methods: {
-    calcPaneInstances(isForceUpdate = false) {
-      if (this.$slots.default) {
-        const paneSlots = this.$slots.default.filter(
-          (vnode) =>
-            vnode.tag &&
-            vnode.componentOptions &&
-            vnode.componentOptions.Ctor.options.tagName === "l-tab-pane"
-        );
-        // update indeed
-        const panes = paneSlots.map(
-          ({ componentInstance }) => componentInstance
-        );
-        const panesChanged = !(
-          panes.length === this.panes.length &&
-          panes.every((pane, index) => pane === this.panes[index])
-        );
-        if (isForceUpdate || panesChanged) {
-          this.panes = panes;
-        }
-      } else if (this.panes.length !== 0) {
-        this.panes = [];
-      }
-    },
-  },
-};
-</script>
-<style>
-.l-tabs .el-tabs__item:not(.is-active) {
-  color: var(--color-gray-70);
-}
-</style>

package/src/components/LTargetChip/docs.vue

@@ -1,86 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Target Chip</h1>
-
-    <div>
-      <div class="row">
-        <ul>
-          <li>
-            <l-target-chip class="ml-3 mt-3" kind="user" name="Usuário Teste" />
-          </li>
-          <li>
-            <l-target-chip class="ml-3 mt-3" kind="member" name="Aluno Teste" />
-          </li>
-          <li>
-            <l-target-chip class="ml-3 mt-3" kind="group" name="Turma Teste" />
-          </li>
-          <li>
-            <l-target-chip class="ml-3 mt-3" kind="tag" name="Marcador Teste" />
-          </li>
-          <li>
-            <l-target-chip
-              :count="1"
-              class="ml-3 mt-3"
-              kind="community"
-              name="Comunidade Teste"
-            />
-            <l-target-chip
-              :count="2"
-              class="ml-3 mt-3"
-              kind="community"
-              name="Comunidade Teste"
-            />
-            <l-target-chip
-              :count="3"
-              class="ml-3 mt-3"
-              kind="community"
-              name="Comunidade Teste"
-            />
-          </li>
-          <li>
-            <l-target-chip class="ml-3 mt-3" kind="role" name="Administrador" />
-            <l-target-chip class="ml-3 mt-3" kind="role" name="Professor" />
-            <l-target-chip class="ml-3 mt-3" kind="role" name="Responsável" />
-          </li>
-          <li>
-            <l-target-chip
-              v-if="showTargetChip"
-              closeable
-              @remove="showTargetChip = false"
-              class="ml-3 mt-3"
-              kind="tag"
-              name="Marcador Teste"
-            />
-            <l-button
-              class="ml-3 mt-3"
-              v-if="!showTargetChip"
-              @click="showTargetChip = true"
-            >
-              mostrar
-            </l-button>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'TargetChip',
-  data: () => {
-    return {
-      showTargetChip: true,
-    }
-  },
-}
-</script>
-
-<style scoped>
-ul li {
-  margin: 8px 0;
-}
-.teste {
-  margin-right: 8px;
-}
-</style>

package/src/components/LTargetChip/index.vue

@@ -1,64 +0,0 @@
-<template>
-  <l-chip style="height: 24px" bold fill :color="color" :icon="icon">
-    <div class="l-d-flex l-align-items">
-      {{ count }}
-      {{ name }}
-      <l-icon
-        @click="$emit('remove')"
-        class="l-d-flex l-align-items-center ml-1 mr-0"
-        style="cursor: pointer"
-        size="15"
-        v-if="closeable"
-      >
-        uis-times-circle
-      </l-icon>
-    </div>
-  </l-chip>
-</template>
-<script>
-export default {
-  tagName: 'l-target-chip',
-  name: 'LTargetChip',
-  props: {
-    kind: {
-      type: String,
-      required: true,
-    },
-    closeable: {
-      type: Boolean,
-      default: false,
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    count: {
-      type: Number,
-    },
-  },
-  computed: {
-    color: function() {
-      return (
-        {
-          member: 'purple',
-          group: 'aqua',
-          user: 'link',
-          tag: 'warning',
-          community: 'danger',
-          role: 'lead-light',
-        }[this.kind] || 'lead'
-      )
-    },
-    icon: function() {
-      return {
-        member: 'uil-graduation-cap',
-        group: 'uil-users-alt',
-        user: 'uil-user',
-        tag: 'uil-tag-alt',
-        role: 'uil-user',
-        community: 'uil-channel',
-      }[this.kind]
-    },
-  },
-}
-</script>

package/src/components/LTargetInput/docs.vue

@@ -1,72 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Target Input</h1>
-
-    <h3 class="mt-5">Non-editable</h3>
-    <l-target-input
-      :topics="topics"
-    ></l-target-input>
-    <h3 class="mt-3">Editable</h3>
-    <l-target-input
-      :topics="topics"
-      :limit="5"
-      editable
-    ></l-target-input>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'TargetInput',
-  data: () => {
-    return {
-      topics: [
-        {
-          name: 'Aluno',
-          id: '123',
-          kind: 'member'
-        },
-        {
-          name: 'Aluno 2',
-          id: '234',
-          kind: 'member'
-        },
-        {
-          name: 'User',
-          id: 'u123',
-          kind: 'user'
-        },
-        {
-          name: 'Turma',
-          id: 't123',
-          kind: 'group'
-        },
-        {
-          name: 'Marcador',
-          id: 'm123',
-          kind: 'tag'
-        },
-        {
-          name: 'Marcador 2',
-          id: 'm234',
-          kind: 'tag'
-        },
-        {
-          name: 'Marcador 3',
-          id: 'm345',
-          kind: 'tag'
-        }
-      ],
-    }
-  },
-}
-</script>
-
-<style scoped>
-ul li {
-  margin: 8px 0;
-}
-.teste {
-  margin-right: 8px;
-}
-</style>

package/src/components/LTargetInput/index.vue

@@ -1,78 +0,0 @@
-<template>
-  <div
-    :class="'l-target-input' + (editable? ' editable' : '') "
-    v-if="topics && topics.length"
-  >
-    <l-target-chip
-      v-for="topic in topicsToShow"
-      :kind="topic.kind"
-      :name="topic.name"
-      :key="topic.id"
-      class="mr-2 mb-2"
-    />
-    <l-chip
-      color="purple"
-      class="mb-2"
-      fill
-      hide-icon
-      v-if="topics.length > this.limit"
-    >
-      {{ moreTopicsText }}
-    </l-chip>
-  </div>
-</template>
-
-<script>
-
-export default {
-  tagName: 'l-target-input',
-  name: 'LTargetInput',
-
-  props: {
-    topics: {
-      type: Array,
-      required: true
-    },
-    limit: {
-      type: Number,
-      default: 3,
-    },
-    editable: {
-      type: Boolean,
-      default: false,
-    }
-  },
-  
-  computed: {
-    topicsToShow() {
-      return this.topics.slice(0, this.limit)
-    },
-
-    moreTopicsText() {
-      const isPlural = this.topics.length - this.limit > 1
-      return (
-        `+ ${this.topics.length - this.limit} destinatário` +
-        (isPlural ? 's' : '')
-      )
-    }
-  }
-}
-</script>
-
-<style scoped>
-.l-target-input {
-  display: flex;
-  justify-content: left;
-  flex-wrap: wrap;
-  flex-direction: initial;
-  align-items: center;
-  min-height: 24px;
-}
-.editable {
-  border: 1px solid var(--gray-50);
-  border-radius: 5px;
-  cursor: pointer;
-  padding-left: 8px;
-  padding-top: 8px;
-}
-</style>

package/src/components/LTextEditor/FloatingLink.vue

@@ -1,91 +0,0 @@
-<template>
-  <div
-    class="wrapper-floating-link l-ra-1 px-2 py-2 row  l-align-items-center l-align-content-center"
-  >
-    <l-icon size="24" class="color-lead-light mr-2" icon="uil-globe" />
-    <l-tooltip class="item color-link" :content="tooltipLink">
-      <a
-        class="l-flex-grow-1 h6 color-link l-ellipsis"
-        target="_blank"
-        rel="nofollow noopener noreferrer"
-        style="display: inline"
-        :href="dataLink"
-        :open-delay="tooltipDelay"
-      >
-        {{ dataLink }}
-      </a>
-    </l-tooltip>
-    <l-tooltip
-      class="item"
-      v-for="(button, idx) in boxButtons"
-      :key="idx"
-      :content="button.tooltip"
-      :open-delay="tooltipDelay"
-    >
-      <l-icon
-        size="20"
-        class="color-lead-light ml-2"
-        :icon="button.icon"
-        @click="actionButtonBased(button.event)"
-      ></l-icon
-    ></l-tooltip>
-  </div>
-</template>
-
-<script>
-export default {
-  props: { dataLink: String },
-
-  data() {
-    return {
-      boxButtons: [
-        {
-          tooltip: 'Editar link',
-          icon: 'uil-edit',
-          event: 'edit',
-        },
-        {
-          tooltip: 'Remover link',
-          icon: 'uil-link-broken',
-          event: 'remove',
-        },
-      ],
-      tooltipDelay: 125,
-    }
-  },
-
-  methods: {
-    actionButtonBased(value) {
-      this.$emit(value)
-    },
-  },
-
-  computed: {
-    tooltipLink() {
-      if (this.dataLink.length >= 60) {
-        return this.dataLink.slice(0, 60) + '...'
-      } else {
-        return this.dataLink
-      }
-    },
-  },
-}
-</script>
-
-<style scoped>
-.wrapper-floating-link {
-  border: 1px solid var(--color-gray-50);
-  min-height: 24px;
-  justify-content: start;
-  background-color: var(--white);
-  box-sizing: content-box;
-}
-
-.wrapper-floating-link >>> .uil-globe {
-  cursor: default;
-}
-
-.wrapper-floating-link >>> * {
-  cursor: pointer;
-}
-</style>

package/src/components/LTextEditor/LinkBox.vue

@@ -1,94 +0,0 @@
-<template>
-  <l-box class="link-box column">
-    <div class="wrapper-input mb-3">
-      <l-input
-        v-model="linkToAppend"
-        placeholder="Insira um link"
-        :error="linkError"
-        autofocus
-        style="box-sizing: border-box"
-      >
-      </l-input>
-      <div class="l-input-error-message" v-if="linkError">
-        Insira um link válido
-      </div>
-    </div>
-    <div class="wrapper-buttons row l-justify-content-end">
-      <l-button size="small" @click="$emit('close')">Cancelar</l-button>
-      <l-button
-        size="small"
-        type="primary"
-        @click="insertLink()"
-        :disabled="disableButton"
-        >Inserir</l-button
-      >
-    </div>
-  </l-box>
-</template>
-
-<script>
-import Autolinker from 'autolinker'
-import { addProtocol } from './helpers/addProtocol'
-
-export default {
-  props: {
-    previousURL: String,
-  },
-
-  data() {
-    return {
-      linkToAppend: this.previousURL,
-      linkError: '',
-    }
-  },
-
-  methods: {
-    insertLink() {
-      if (this.isLinkValid(this.linkToAppend)) {
-        this.linkError = false
-        this.$emit('setLink', {
-          url: addProtocol(this.linkToAppend),
-          insertedText: this.linkToAppend,
-        })
-        this.$emit('close')
-      } else {
-        this.linkError = true
-      }
-    },
-
-    isLinkValid(link) {
-      const validating = Autolinker.link(link, {
-        email: false,
-      })
-      return validating.includes('href')
-    },
-  },
-
-  computed: {
-    disableButton() {
-      return this.linkToAppend === '' || this.linkToAppend === undefined
-    },
-  },
-}
-</script>
-
-<style scoped>
-.wrapper-link-box {
-  position: relative;
-}
-
-.link-box {
-  width: min(calc(100vw - 2rem), 456px);
-  padding: 16px;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.l-input-error-message {
-  color: var(--color-danger);
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 130%;
-  margin-top: 2px;
-}
-</style>

package/src/components/LTextEditor/docs.vue

@@ -1,32 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Text Editor</h1>
-
-    <l-text-editor v-model="textEditorContent" />
-
-    <section>
-      <h1>Output Text</h1>
-      <div v-html="textEditorContent"></div>
-    </section>
-
-    <section>
-      <h1>Output HTML</h1>
-      <div>
-        <code>{{ textEditorContent }}</code>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'TextEditor',
-  data() {
-    return {
-      textEditorContent: 'Text for test 3.0 ',
-    }
-  },
-}
-</script>
-
-<style></style>

package/src/components/LTextEditor/extensions/LayersBlockquote.js

@@ -1,12 +0,0 @@
-import Blockquote from '@tiptap/extension-blockquote'
-
-const LayersBlockquote = Blockquote.extend({
-  addAttributes() {
-    return {
-      class: { default: 'px-3 mx-0 my-2' },
-      style: { default: 'border-left: 3px solid var(--color-gray-50)'}
-    }
-  },
-})
-
-export default LayersBlockquote

package/src/components/LTextEditor/extensions/LayersBold.js

@@ -1,11 +0,0 @@
-import Bold from '@tiptap/extension-bold'
-
-const LayersBold = Bold.extend({
-  addAttributes() {
-    return {
-      class: { default: 'l-bold' },
-    }
-  },
-})
-
-export default LayersBold

package/src/components/LTextEditor/extensions/LayersBreakLine.js

@@ -1,16 +0,0 @@
-import HardBreak from '@tiptap/extension-hard-break'
-
-const LayersBreakLine = HardBreak.extend({
-  defaultOptions: {
-    ...HardBreak.options,
-    keepMarks: false,
-  },
-
-  addKeyboardShortcuts() {
-    return {
-      'Shift-Enter': () => this.editor.commands.setHardBreak(),
-    }
-  },
-})
-
-export default LayersBreakLine

package/src/components/LTextEditor/extensions/LayersBubbleMenu.js

@@ -1,10 +0,0 @@
-import BubbleMenu from '@tiptap/extension-bubble-menu'
-
-const LayersBubbleMenu = BubbleMenu.extend({
-  element: document.querySelector('#bubble-menu'),
-  tippyOptions: {
-    zIndex: 1000,
-  },
-})
-
-export default LayersBubbleMenu

package/src/components/LTextEditor/extensions/LayersBulletList.js

@@ -1,12 +0,0 @@
-import BulletList from '@tiptap/extension-bullet-list'
-
-const LayersBulletList = BulletList.extend({
-  addAttributes() {
-    return {
-      class: { default: 'color-lead-light pl-4' },
-      style: { default: 'list-style-type: disc;' },
-    }
-  },
-})
-
-export default LayersBulletList

package/src/components/LTextEditor/extensions/LayersHeading.js

@@ -1,13 +0,0 @@
-import Heading from '@tiptap/extension-heading'
-
-const LayersHeading = Heading.extend({
-  defaultOptions: {
-    ...Heading.options,
-    levels: [1],
-    HTMLAttributes: {
-      class: 'l-h3 color-lead-light',
-    },
-  },
-})
-
-export default LayersHeading

package/src/components/LTextEditor/extensions/LayersHistory.js

@@ -1,10 +0,0 @@
-import History from '@tiptap/extension-history'
-
-const LayersHistory = History.extend({
-  defaultOptions: {
-    ...History.options,
-    newGroupDelay: 150,
-  },
-})
-
-export default LayersHistory

package/src/components/LTextEditor/extensions/LayersItalic.js

@@ -1,11 +0,0 @@
-import Italic from '@tiptap/extension-italic'
-
-const LayersItalic = Italic.extend({
-  addAttributes() {
-    return {
-      class: { default: '' },
-    }
-  },
-})
-
-export default LayersItalic