@lancom/shared 0.0.62 → 0.0.66

package/components/common/progress_steps/progress-steps.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="ProgressSteps__wrapper">
+    <div class="ProgressSteps__steps-wrapper">
+      <div
+        class="ProgressSteps__progress"
+        :style="{
+          width: progress
+        }"></div>
+      <div class="ProgressSteps__steps">
+        <div
+          v-for="(step, index) in visibleSteps"
+          :key="index"
+          class="ProgressSteps__step"
+          :class="{
+            'ProgressSteps__step--active': index <= (currentStepIndex - stepOffset)
+          }"
+          @click="index <= (currentStepIndex - stepOffset) && goToStep(step)">
+          <slot name="step-progress" v-bind="{ index, step, currentStepIndex, stepOffset, stepLabel }">
+            <div class="ProgressSteps__step-progress">
+              <div class="ProgressSteps__step-line-prev"></div>
+              <div class="ProgressSteps__step-number">
+                <span v-if="hiddenDoneStepNumber && index <= (currentStepIndex - stepOffset)">
+                  <i class="icon-ok"></i>
+                </span>
+                <span v-else>
+                  {{ stepLabel }} {{ index + 1 }}
+                </span>
+              </div>
+              <div class="ProgressSteps__step-line-next"></div>
+            </div>
+            <div class="ProgressSteps__step-name">
+              {{ step }}
+            </div>
+          </slot>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="currentStepMessage"
+      class="ProgressSteps__description"
+      v-html="nl2p(currentStepMessage)">
+    </div>
+    <div class="ProgressSteps__content-wrapper">
+      <div class="ProgressSteps__content">
+        <div
+          v-if="visibleStepName"
+          class="lc_h3 lc_uppercase">
+          {{ currentStep }}
+        </div>
+        <div
+          v-if="visibleCurrentStep"
+          class="ProgressSteps__content-title">
+          Step {{ currentStepIndex + 1 }}
+        </div>
+        <div class="ProgressSteps__content-steps">
+          <slot name="before-steps"></slot>
+          <div class="ProgressSteps__content-main">
+            <slot
+              ref="steps"
+              v-bind="{ currentStep }"
+              class="ProgressSteps__content-main"></slot>
+          </div>
+          <slot name="after-steps"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { nl2p } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'ProgressSteps',
+  props: {
+    steps: {
+      type: Array,
+      required: true
+    },
+    startStep: {
+      type: String
+    },
+    stepLabel: {
+      type: String,
+      default: ''
+    },
+    visibleCurrentStep: {
+      type: Boolean,
+      default: true
+    },
+    visibleStepName: {
+      type: Boolean,
+      default: false
+    },
+    hiddenDoneStepNumber: {
+      type: Boolean,
+      default: false
+    },
+    stepOffset: {
+      type: Number,
+      default: 0
+    },
+    hiddenSteps: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      currentStep: null
+    };
+  },
+  computed: {
+    ...mapGetters(['helpMessages']),
+    visibleSteps() {
+      return this.steps.filter(step => !this.hiddenSteps.includes(step));
+    },
+    progress() {
+      return `${this.currentStep / this.steps.length * 100}%`;
+    },
+    currentStepIndex() {
+      return this.steps.indexOf(this.currentStep);
+    },
+    isLastStep() {
+      return this.currentStepIndex === (this.steps.length - 1);
+    },
+    isDisabledNextBtn() {
+      return this.currentStepIndex === this.steps.length;
+    },
+    isDisabledPrevBtn() {
+      return this.currentStepIndex === 0;
+    },
+    currentStepMessage() {
+      const key = this.currentStep.toLowerCase().replace(' ', '-');
+      const { message } = this.helpMessages[key] || {};
+      return message;
+    }
+  },
+  created() {
+    if (!this.currentStep) {
+      this.goToStep(this.startStep || this.steps[0]);
+    }
+  },
+  methods: {
+    goToPrevStep() {
+      this.goToStep(this.steps[this.currentStepIndex - 1]);
+    },
+    goToNextStep() {
+      if (this.isLastStep) {
+        this.$emit('finish');
+      } else {
+        this.goToStep(this.steps[this.currentStepIndex + 1]);
+      }
+    },
+    goToStep(step) {
+      this.currentStep = step;
+    },
+    nl2p
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'progress-steps';
+</style>

package/components/common/progress_steps/progress_steps_controls/progress-steps-controls.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="ProgressSteps__controls">
+    <btn
+      v-if="showPrev"
+      :btn-disabled="disabledPrev"
+      :btn-processing="processingPrev"
+      btn-class="white"
+      :btn-label="labelPrev"
+      @onclick="$emit('prev')">
+    </btn>
+    <btn
+      v-if="showNext"
+      :btn-disabled="disabledNext"
+      :btn-processing="processingNext"
+      btn-class="green"
+      :btn-label="labelNext"
+      @onclick="$emit('next')">
+      <i
+        slot="icon-after"
+        class="icon-arrow-right"></i>
+    </btn>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProgressStepsControls',
+  props: {
+    showPrev: {
+      type: Boolean,
+      default: true
+    },
+    showNext: {
+      type: Boolean,
+      default: true
+    },
+    disabledPrev: {
+      type: Boolean,
+      default: false
+    },
+    disabledNext: {
+      type: Boolean,
+      default: false
+    },
+    processingPrev: {
+      type: Boolean,
+      default: false
+    },
+    processingNext: {
+      type: Boolean,
+      default: false
+    },
+    labelPrev: {
+      type: String,
+      default: 'BACK'
+    },
+    labelNext: {
+      type: String,
+      default: 'NEXT'
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'progress-steps-controls';
+</style>

package/components/common/range/range.scss

@@ -0,0 +1,51 @@
+@import '@/assets/scss/variables';
+
+$height: 8px;
+
+.Range {
+  &__wrapper {
+    width: 100%;
+    position: relative;
+    margin: 18px 10px;
+    z-index: 1;
+    height: $height;
+  }
+  &__indicator {
+    position: absolute;
+    top: calc((100% - #{$height}) / 2);
+    bottom: calc((100% - #{$height}) / 2);
+    left: 0;
+    right: 0;
+    &-before, &-after {
+      display: block;
+      height: 100%;
+      position: absolute;
+      border-radius: 3px;
+      background-color: $light_gray;
+      cursor: pointer;
+    }
+
+    &-after {
+      right: 0;
+    }
+    &-before {
+      left: 0;
+      background-color: $green;
+    }
+  }
+  &__value {
+    position: absolute;
+    top: -6px;
+    width: 20px;
+    height: 20px;
+    border-radius: 3px;
+    border: 2px solid #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $green;
+    transform: translateX(-50%);
+    cursor: pointer;
+    z-index: 51;
+  }
+}

package/components/common/range/range.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="Range__wrapper no-select">
+    <div
+      ref="indicator"
+      class="Range__indicator">
+      <div
+        class="ub_h6--white Range__value"
+        :style="{ left: before }"
+        @mousedown="onMouseDown"
+        @touchstart="onMouseDown">
+      </div>
+      <div
+        class="Range__indicator-before"
+        :style="{ width: before }"
+        @click="handleClick"></div>
+      <div
+        class="Range__indicator-after"
+        :style="{ width: after }"
+        @click="handleClick"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Range',
+  props: {
+    value: {
+      type: Number
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      startX: null,
+      startValue: null
+    };
+  },
+  computed: {
+    model: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', Number(value));
+      }
+    },
+    before() {
+      return `${100 * ((this.value - this.min) / (this.max - this.min))}%`;
+    },
+    after() {
+      return `${100 * (1 - ((this.value - this.min) / (this.max - this.min)))}%`;
+    }
+  },
+  mounted() {
+    this.model = this.validate(this.value);
+  },
+  methods: {
+    validate(value) {
+      if (value < this.min) {
+        return this.min;
+      }
+      if (value > this.max) {
+        return this.max;
+      }
+      return Number(value);
+    },
+    handleClick(event) {
+      const length = this.max - this.min;
+      const width = this.$refs.indicator.offsetWidth;
+      const x = event.layerX + event.target.offsetLeft;
+      const ratio = x / width;
+      const position = Number(this.min + (length * ratio)).toFixed();
+      this.model = this.validate(position);
+    },
+    onMouseDown(event) {
+      this.startX = event.type === 'touchstart' ? event.touches[0].pageX : event.pageX;
+      this.startValue = this.value;
+      window.addEventListener('mousemove', this.onMouseMove);
+      window.addEventListener('touchmove', this.onMouseMove);
+      window.addEventListener('mouseup', this.onMouseUp);
+      window.addEventListener('touchend', this.onMouseUp);
+    },
+    onMouseMove(event) {
+      const { pageX } = event.type === 'touchmove' ? event.touches[0] : event;
+      const diff = pageX - this.startX;
+      const ratio = (this.max - this.min) / this.$refs.indicator.offsetWidth;
+      const diffInSteps = Number((diff * ratio).toFixed());
+      this.model = this.validate(this.startValue + diffInSteps);
+    },
+    onMouseUp(event) {
+      window.removeEventListener('mousemove', this.onMouseMove);
+      window.removeEventListener('touchmove', this.onMouseMove);
+      window.removeEventListener('mouseup', this.onMouseUp);
+      window.removeEventListener('touchend', this.onMouseUp);
+      this.startX = null;
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+  @import 'range.scss';
+</style>

package/components/common/rich-text.vue

@@ -0,0 +1,30 @@
+<template>
+  <div
+    class="RichText__wrapper"
+    v-html="text"></div>
+</template>
+
+<script>
+export default {
+  name: 'Richtext',
+  props: {
+    text: {
+      type: String,
+      required: true
+    }
+  }
+};
+</script>
+<style lang="scss">
+@import '@/assets/scss/variables';
+
+.RichText {
+  &__wrapper {
+    @import "@lancom/shared/assets/scss/normalize";
+    letter-spacing: -0.02em !important;
+    p {
+      margin: 10px 0;
+    }
+  }
+}
+</style>

package/components/common/shops-multiselect.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="form-row">
+    <multiselect
+      v-model="itemShops"
+      :options="shops"
+      :multiple="true"
+      placeholder="Shops"
+      label="name"
+      track-by="_id" />
+  </div>
+</template>
+
+<script>
+import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'ShopMultiselect',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      shops: []
+    };
+  },
+  computed: {
+    itemShops: {
+      get() {
+        return this.item.shops ? this.shops.filter(shop => this.item.shops.includes(shop._id)) : [];
+      },
+      set(shops) {
+        this.$set(this.item, 'shops', shops.map(t => t._id));
+      }
+    }
+  },
+  async mounted() {
+    this.shops = await api.admin.fetchShops();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/common/single-item-price.vue

@@ -0,0 +1,30 @@
+<template>
+  <span>{{ singlePrice | price }}</span>
+</template>
+
+<script>
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import { priceFromRange } from '@lancom/shared/assets/js/utils/pricing';
+
+export default {
+  name: 'SingleItemPrice',
+  filters: {
+    price
+  },
+  props: {
+    amount: {
+      type: Number,
+      required: true
+    },
+    pricing: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    singlePrice() {
+      return priceFromRange(this.amount, this.pricing);
+    }
+  }
+};
+</script>

package/components/common/spinner.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="Spinner">
+    <div class="Spinner__container">
+      <div
+        v-for="petal in 12"
+        :key="petal"
+        class="Spinner__petal"
+        :style="{ background }">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Spinner',
+  props: {
+    background: {
+      type: String
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+$size: 26px;
+$delay_step: 1/12;
+
+.Spinner {
+  @keyframes lds-spinner {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @-webkit-keyframes lds-spinner {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  &__container {
+    width: $size;
+    height: $size;
+    margin: 0 auto;
+    position: relative;
+    transform: translate(-$size, -$size) scale(1) translate($size, $size);
+  }
+
+  &__petal{
+    left: calc(#{($size / 16) * 7});
+    position: absolute;
+    animation: lds-spinner linear 1s infinite;
+    background: #55A8FF;
+    width: calc(#{$size} / 8);
+    height: calc(#{$size} / 4);
+    border-radius: 40%;
+    transform-origin: calc(#{$size} / 16) calc(#{$size} / 2);
+
+    @for $i from 1 through 12 {
+      &:nth-child(#{$i}) {
+        transform: rotate(#{30 * ($i - 1)}deg);
+        animation-delay: calc(#{$i * $delay_step - 1}s);
+      }
+    }
+  }
+}
+</style>

package/components/common/stars-mark.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    ref="mark"
+    class="StarsMark__wrapper"
+    :class="{ disabled }"
+    @mouseenter="onMouseenter"
+    @mousemove="onMousemove"
+    @mouseleave="onMouseleave"
+    @click="onSelect">
+    <div
+      :style="{ width }"
+      class="StarsMark__value"></div>
+  </div>
+</template>
+
+<script>
+const STAR_WIDTH = 24;
+
+export default {
+  name: 'StarsMark',
+  props: {
+    value: {
+      type: Number
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isMouseEnter: null,
+      hoverValue: null
+    };
+  },
+  computed: {
+    model: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit('input', val);
+      }
+    },
+    width() {
+      return `${(this.hoverValue || this.model) * STAR_WIDTH}px`;
+    }
+  },
+  methods: {
+    onSelect(e) {
+      this.model = this.getMarkFromEvent(e);
+    },
+    onMouseenter() {
+      this.isMouseEnter = true;
+    },
+    onMousemove(e) {
+      if (this.isMouseEnter) {
+        this.hoverValue = this.getMarkFromEvent(e);
+      }
+    },
+    onMouseleave() {
+      this.isMouseEnter = false;
+      this.hoverValue = null;
+    },
+    getMarkFromEvent(e) {
+      const markWrapperRect = this.$refs.mark.getBoundingClientRect();
+      const x = e.clientX - markWrapperRect.left;
+      return Math.max(1, Math.min(5, Number.parseInt(x / STAR_WIDTH) + 1));
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.StarsMark {
+  &__wrapper {
+    &.disabled {
+      pointer-events: none;
+    }
+  }
+  &__wrapper,
+  &__value  {
+    height: 24px;
+    background-position: top left;
+    background-repeat: repeat-x;
+    background-size: 24px 24px;
+    cursor: pointer;
+  }
+  &__wrapper  {
+    width: 120px;
+    background-image: url(./../../static/icons/star_gray.svg);
+  }
+  &__value {
+    background-image: url(./../../static/icons/star_green.svg);
+    pointer-events: none;
+  }
+}
+</style>