@lancom/shared 0.0.62 → 0.0.66

package/components/common/btn.vue

@@ -0,0 +1,159 @@
+<template>
+  <component
+    :is="to ? 'nuxt-link' : 'div'"
+    class="Btn__wrapper"
+    :class="{
+      block: btnBlock,
+      [`btn-${btnClass}`]: btnClass,
+      disabled: btnDisabled,
+      processing: btnProcessing,
+      'icon-before': $slots['icon-before'],
+      'icon-after': $slots['icon-after'],
+      icon: $slots.icon
+    }"
+    :to="to"
+    @click.stop="$emit('onclick');">
+    <transition name="scale" mode="out-in" appear>
+      <div
+        v-if="btnProcessing"
+        class="Btn__processing">
+        <spinner />
+      </div>
+    </transition>
+    <div
+      key="false"
+      class="Btn__inner"
+      :class="{ invalidate: btnDisabled }">
+      <div
+        v-if="$slots['icon-before']"
+        class="Btn__icon-before">
+        <slot name="icon-before"></slot>
+      </div>
+      <div
+        v-if="$slots.icon"
+        class="Btn__icon">
+        <slot name="icon"></slot>
+      </div>
+      <span
+        v-else
+        class="Btn__label"
+        :class="{ capitalize: labelCapitalize }">
+        {{ btnLabel }}
+      </span>
+      <div
+        v-if="$slots['icon-after']"
+        class="Btn__icon-after">
+        <slot name="icon-after"></slot>
+      </div>
+    </div>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'Btn',
+  props: {
+    to: {
+      type: String
+    },
+    btnClass: {
+      type: String,
+      default: 'white'
+    },
+    btnLabel: {
+      type: String,
+      default: 'Submit'
+    },
+    btnDisabled: {
+      type: Boolean,
+      default: false
+    },
+    btnProcessing: {
+      type: Boolean,
+      default: false
+    },
+    btnBlock: {
+      type: Boolean,
+      default: false
+    },
+    labelCapitalize: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/variables";
+
+.Btn {
+  &__wrapper {
+    &.block {
+      width: 100%;
+    }
+  }
+  &__inner {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    opacity: 1;
+    transition: opacity .2s ease-in-out;
+  }
+  &__wrapper.processing &__inner {
+    opacity: 0;
+  }
+  &__processing {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform .2s ease-in-out, opacity .22s ease-in-out;
+  }
+  &__icon {
+    font-size: 75%;
+  }
+  &__icon-before {
+    font-size: 75%;
+    margin-right: 7px;
+  }
+  &__icon-after {
+    font-size: 75%;
+    margin-left: 7px;
+  }
+  &__wrapper.icon {
+    padding: 6px 0px;
+  }
+  &__label:not(.capitalize) {
+    text-transform: none;
+  }
+  @media (max-width: $bp-extra-small-max) {
+    &__wrapper.limited-xs-only {
+      padding-left: 8px;
+      padding-right: 8px;
+      &.icon-before {
+        padding-left: 26px;
+      }
+      &.icon-after {
+        padding-right: 26px;
+      }
+    }
+    &__wrapper.limited-xs-only &__icon-before {
+      left: 0;
+      & i:before {
+        margin: 0;
+      }
+    }
+    &__wrapper.limited-xs-only &__icon-after {
+      right: 0;
+      & i:before {
+        margin: 0;
+      }
+    }
+  }
+}
+</style>

package/components/common/checkbox.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="Checkbox__wrapper">
+    <input
+      :id="id"
+      v-model="model"
+      class="Checkbox__input"
+      type="checkbox"
+      @change="$emit('change', model)" />
+    <label
+      class="Checkbox__label"
+      :for="id"
+      @click.stop>
+      <i class="icon-ok Checkbox__icon"></i>
+      <slot></slot>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Checkbox',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    checkedValue: {
+      default: true
+    },
+    uncheckedValue: {
+      default: false
+    },
+    checked: { type: Boolean }
+  },
+  data() {
+    return {
+      id: `checkbox-${(Math.random() * (new Date().getTime())).toFixed()}`
+    };
+  },
+  computed: {
+    model: {
+      get() {
+        return this.value === this.checkedValue;
+      },
+      set(val) {
+        this.$emit('input', val ? this.checkedValue : this.uncheckedValue);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import '@/assets/scss/variables';
+html[dir=ltr] .Checkbox {
+  &__wrapper {
+    padding: 0 12px 0 24px;
+  }
+  &__label {
+    &:before {
+      left: 0;
+    }
+    &:after {
+      left: 0;
+    }
+  }
+  &__icon {
+    left: 0;
+  }
+}
+html[dir=rtl] .Checkbox {
+  &__wrapper {
+    padding: 0 24px 0 12px;
+  }
+  &__label {
+    &:before {
+      right: 0;
+    }
+    &:after {
+      right: 0;
+    }
+  }
+  &__icon {
+    right: 0;
+}
+}
+
+html[dir=ltr],
+html[dir=rtl] {
+  .Checkbox {
+    &__wrapper {
+      position: relative;
+      cursor: pointer;
+      line-height: 16px;
+      display: inline-block;
+      margin: 2px 0;
+    }
+
+    &__input {
+      display: none;
+    }
+
+    &__label {
+      cursor: pointer;
+      font-size: 15px;
+      color: #292929;
+
+      &:before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        width: 24px;
+        height: 24px;
+        border: 1px solid $grey_3;
+        border-radius: 2px;
+        transform: translateY(-50%);
+      }
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        width: 24px;
+        height: 24px;
+        border-radius: 2px;
+        transform: scale(0) translateY(-50%);
+        transition: transform .2s ease-in, background-color .2s ease-in-out;
+      }
+    }
+
+    &__icon {
+      font-size: 24px;
+      position: absolute;
+      top: 50%;
+      left: 2px;
+      z-index: 1;
+      color: #FFF;
+      line-height: 24px;
+      transform: scale(0) translateY(-50%);
+      transition: transform .2s cubic-bezier(.87, -.41, .19, 1.44) .16s;
+      &:before {
+        margin: 0;
+      }
+    }
+  }
+
+  .Checkbox__input:checked + .Checkbox__label:after {
+    transform: scale(1) translateY(-50%);
+    // background-color: $secondary_500;
+  }
+  .Checkbox__input:checked + .Checkbox__label .Checkbox__icon {
+    transform: scale(1) translateY(-50%);
+    color: $green;
+  }
+}
+</style>

package/components/common/checked-icon.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    :class="{ checked, circle }"
+    class="CheckedIcon__wrapper">
+    <i v-if="checked" class="icon-ok"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LancomCheckedIcon',
+  props: {
+    checked: {
+      type: Boolean,
+      required: true
+    },
+    circle: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/variables";
+.CheckedIcon {
+  &__wrapper {
+    width: 20px;
+    height: 20px;
+    border: 1px solid $grey_2;
+    background-color: $gray;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &.checked {
+      background-color: $green;
+      i {
+        color: $white;
+        font-size: 11px;
+      }
+    }
+    &.circle {
+      border-radius: 10px;
+    }
+  }
+}
+</style>

package/components/common/color-picker.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="ColorPicker__wrapper">
+    <div
+      class="form-field ColorPicker__field"
+      @click="isOpen = !isOpen">
+      <div
+        class="ColorPicker__inner"
+        :style="{ 'background-color': model }">
+      </div>
+      <div class="lc_regular16 ColorPicker__value">
+        {{ hex }}
+      </div>
+      <i class="icon-angle-down ColorPicker__caret"></i>
+    </div>
+    <div
+      v-if="isOpen"
+      v-click-outside="close"
+      class="ColorPicker__dropdown">
+      <v-color
+        v-model="model"
+        :disable-alpha="true" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ColorPicker',
+  props: {
+    value: {
+      type: String,
+      default: 'rgb(0,0,0)'
+    }
+  },
+  data() {
+    return {
+      isOpen: false
+    };
+  },
+  computed: {
+    model: {
+      get() {
+        return this.hex;
+      },
+      set(value) {
+        const { r, g, b } = value.rgba;
+        this.$emit('input', `rgb(${r}, ${g}, ${b})`);
+      }
+    },
+    hex() {
+      if (!this.value) {
+        return this.value;
+      }
+
+      const [r, g, b] = this.value.replace(/[^\d,]/g, '').split(',');
+      return `#${this.toHex(r)}${this.toHex(g)}${this.toHex(b)}`;
+    }
+  },
+  methods: {
+    close() {
+      this.isOpen = false;
+    },
+    toHex(number) {
+      const hex = Number(number).toString(16);
+      return hex.length < 2 ? `0${hex}` : hex;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/scss/variables";
+.ColorPicker {
+  &__wrapper {
+    position: relative;
+  }
+  &__field {
+    padding: 6px !important;
+    height: 50px;
+    display: flex !important;
+    align-items: center;
+  }
+  &__inner {
+    min-width: 72px;
+    width: 33%;
+    height: 100%;
+    border-radius: 2px;
+    box-shadow: $elevation1;
+  }
+  &__value {
+    color: $grey_1;
+    text-transform: uppercase;
+    margin-left: 20px;
+    flex-grow: 1;
+  }
+  &__caret {
+    color: $grey_5;
+    font-size: 18px;
+    cursor: pointer;
+  }
+  &__dropdown {
+    position: absolute;
+    z-index: 101;
+    top: 0;
+    transform: translateY(-50%);
+  }
+}
+</style>

package/components/common/file_uploader.vue

@@ -0,0 +1,186 @@
+<template>
+  <div
+    class="FileUploader__wrapper"
+    :class="[error ? 'error' : '', dragging ? 'active' : '']"
+    @dragenter="dragging=true"
+    @dragend="dragging=false"
+    @dragleave="dragging=false"
+    @drop="dragging=false">
+    <div class="FileUploader__dropzone">
+      <slot name="toggle" :uploading="uploading"></slot>
+      <slot name="progress" :progress="progress"></slot>
+      <input
+        ref="fileUploaderField"
+        class="FileUploader__input"
+        type="file"
+        :class="{ disabled: disabled || uploading }"
+        :multiple="multiple"
+        :accept="accept"
+        :required="required"
+        :disabled="disabled || uploading"
+        @change="fileChange" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Power3, TimelineLite } from 'gsap';
+import api from '@lancom/shared/assets/js/api';
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
+import FailedConversionModal from '@lancom/shared/components/modals/failed_conversion_modal/failed-conversion-modal';
+
+export default {
+  name: 'FileUploader',
+  props: {
+    required: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    multiple: { type: Boolean, default: false },
+    hasConversionErrorModal: { type: Boolean, default: true },
+    showErrorMessage: { type: Boolean, default: true },
+    url: { type: String },
+    accept: { type: String, default: 'all' }
+  },
+  data() {
+    return {
+      file: null,
+      uploading: false,
+      dragging: false,
+      rendered: null,
+      error: null,
+      progress: 0,
+      timelineLite: new TimelineLite()
+    };
+  },
+  methods: {
+    async fileChange(ev) {
+      this.uploading = true;
+      const files = Array.from(ev.target.files);
+      for (let index = 0; index < files.length; index++) {
+        await this.readAndUploadFile(files[index]);
+      }
+      this.uploading = false;
+    },
+    async readAndUploadFile(file) {
+      this.file = file;
+      this.$emit('onchange', this.file);
+      const reader = new FileReader();
+      reader.onload = e => {
+        this.rendered = e.target.result;
+        this.$emit('onrendered', this.rendered);
+      };
+      if (this.file) {
+        reader.readAsDataURL(this.file);
+        if (this.$refs.fileUploaderField) {
+          this.$refs.fileUploaderField.value = '';
+        }
+        await this.upload();
+      }
+    },
+    async upload() {
+      try {
+        const image = await api.uploadImage(this.file, this.onProgress, this.url);
+        this.onProgress(0);
+        const url = image && staticLink(image.thumb);
+        this.$emit('onuploaded', { ...image, url });
+      } catch (e) {
+        this.onProgress(0);
+        const { message, data } = e.response.data;
+        if (message === 'Conversion failed' && this.hasConversionErrorModal) {
+          this.showConversionFailedModal(data);
+        } else if (this.showErrorMessage) {
+          this.$toastr.e(e);
+        } else {
+          this.$emit('onerror', e);
+        }
+      }
+    },
+    onProgress(progress) {
+      const duration = progress ? 0.1 : 0;
+      this.timelineLite.to(this, duration, { progress, ease: Power3.easeIn });
+    },
+    toggle() {
+      this.$refs.fileUploaderField.click();
+    },
+    showConversionFailedModal(file) {
+      this.$modal.show(
+        FailedConversionModal,
+        { file },
+        {
+          name: 'failed-conversion-modal',
+          root: this.$root,
+          width: 640,
+          height: 'auto',
+          adaptive: true,
+          clickToClose: true,
+          transition: 'from-right-to-left'
+        }
+      );
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/assets/scss/variables";
+
+.FileUploader {
+  &__wrapper {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  &__dropzone {
+    display: inline-block;
+    position: relative;
+    width: inherit;
+    &:before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      color: #FFFFFF;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-width: 0;
+      border-style: dashed;
+      border-color: #FFFFFF;
+      transition: background-color .2s;
+    }
+  }
+
+  &__wrapper.active &__dropzone {
+    &:before {
+      background-color: $light_gray;
+    }
+
+    & > * {
+      opacity: 0;
+    }
+  }
+
+  &__wrapper.error &__dropzone {
+    &:before {
+      content: 'Upload file error.';
+      color: #FFF;
+      background-color: $error;
+    }
+  }
+
+  &__input {
+    opacity: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    cursor: pointer;
+    &.disabled {
+      cursor: default;
+    }
+  }
+}
+</style>