removing slider

removing slider

<template lang="html">
	<div>
		Slider
		<!--<slider :items="items" :speed="2" :delay="3" :pause="true" :autoplay:"true" :dots="true" :arrows:"true"></slider>-->
	</div>
</template>
<script>
// import Slider from 'vue-slider'
export default {
  data () {
    return {
		items: [
			{
				src: '/images/wall2.png',
				alt: '/images/wall2.png'
			},
			{
				src: '/images/wall1.jpeg',
				alt: '/images/wall1.jpeg'
			}
		]
	}
},
components: {
	Slider
},
props: {
	content: []
}
}
</script>

<style lang="css">

</style>

<template lang="html">
	<slider :items="items" :speed="2" :delay="3" :pause="true" :autoplay:"true" :dots="true" :arrows:"true"></slider>
</template>
<script>
import Slider from 'vue-slider'
export default {
  data () {
    return {
		items: [
			{
				src: '/images/wall2.png',
				alt: '/images/wall2.png'
			},
			{
				src: '/images/wall1.jpeg',
				alt: '/images/wall1.jpeg'
			}
		]
	}
},
components: {
	Slider
},
props: {
	content: []
}
}
</script>

<style lang="css">

</style>


[SCI-10095] flat-button using Tailwind colour names

<template>
  <button
    class="flat-button"
    :class="level"
    :title="hint"
    @click.prevent="$emit('click')"
    @mouseover.prevent="$emit('mouseover')"
  >
    <slot />
  </button>
</template>

<script>
export default {
    'name': "FlatButton",
    'props': {
        'level': {
            'type': String,
            'default': 'secondary',
        },
        'hint': {
            'type': String,
            'default': '',
        },
    },
}
</script>

<style lang="scss" scoped>
.flat-button {
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-sizing: content-box;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    &:disabled, &.disabled {
        opacity: 0.5;
        cursor: auto;
    }
    &.primary {
        @apply tw-bg-blue-500 tw-text-white;
        &:hover, &:focus {
            @apply tw-bg-blue-700;
        }
    }
    &.secondary {
        @apply tw-bg-gray-400 tw-text-black;
        &:hover, &:focus {
            @apply tw-bg-gray-600 tw-text-white;
        }
    }
    &.success {
        @apply tw-bg-green-500 tw-text-white;
        &:hover, &:focus {
            @apply tw-bg-green-700;
        }
    }
    &.info {
        /* Cyan would be usual for info, but Tailwind has no such thing */
        @apply tw-bg-pink-500 tw-text-black;
        &:hover, &:focus {
            @apply tw-bg-pink-700;
        }
    }
    &.warning {
        @apply tw-bg-yellow-300 tw-text-black;
        &:hover, &:focus {
            @apply tw-bg-yellow-500;
        }
    }
    &.danger {
        @apply tw-bg-red-500 tw-text-white;
        &:hover, &:focus {
            @apply tw-bg-red-700
        }
    }
}
</style>

<template>
  <button
    class="flat-button"
    :class="level"
    :title="hint"
    @click.prevent="$emit('click')"
    @mouseover.prevent="$emit('mouseover')"
  >
    <slot />
  </button>
</template>

<script>
export default {
    'name': "FlatButton",
    'props': {
        'level': {
            'type': String,
            'default': 'secondary',
        },
        'hint': {
            'type': String,
            'default': '',
        },
    },
}
</script>

<style lang="scss" scoped>
/* I'm using "tailwind compatible" colours here
   ...and if you can reproduce it using actual Tailwind please feel free */
.flat-button {
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-sizing: content-box;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    &:disabled, &.disabled {
        opacity: 0.5;
        cursor: auto;
    }
    &.primary {
        background-color: #4299e1; /* tw-bg-blue-500 */
        color: #fff; /* tw-text-white */
        &:hover, &:focus {
            background-color: #2b6cb0; /* tw-bg-blue-700 */
        }
    }
    &.secondary {
        background-color: #cbd5e0; /* tw-bg-gray-400 */
        color: #000; /* tw-text-black */
        &:hover, &:focus {
            background-color: #718096; /* tw-bg-gray-600 */
            color: #fff; /* tw-text-white */
        }
    }
    &.success {
        background-color: #48bb78; /* tw-bg-green-500 */
        color: #fff; /* tw-text-white */
        &:hover, &:focus {
            background-color: #2f855a; /* tw-bg-green-700 */
        }
    }
    &.info {
        /* Cyan would be usual for info, but Tailwind has no such thing */
        background-color: #ed64a6; /* tw-bg-pink-500 */
        color: #000; /* tw-text-black */
        &:hover, &:focus {
            background-color: #b83280; /* tw-bg-pink-700 */
        }
    }
    &.warning {
        background-color: #faf089; /* tw-bg-yellow-300 */
        color: #000; /* tw-text-black */
        &:hover, &:focus {
            background-color: #ecc94b; /* tw-bg-yellow-500 */
        }
    }
    &.danger {
        background-color: #f56565; /* tw-bg-red-500 */
        color: #fff; /* tw-text-white */
        &:hover, &:focus {
            background-color: #c53030; /* tw-bg-red-700 */
        }
    }
}
</style>


fix: showPublicKey bug with address import (#780)

* fix resetHeading() && showPublicKey bug

* rm unused data

* revert unneeded changes

* restore previous implementation

<template>

      <svg
        xmlns="http://www.w3.org/2000/svg"
        :width="160"
        :height="160"
        :viewBox="`0 0 100 100`"
      >
        <rect
          width="130"
          height="70"
          rx="35"
          ry="40"
          transform="translate(0) rotate(240 37.5 37.5)"
          fill="#4c5082"
          fill-opacity="0.45"
          x="-20"
          y="0"
        />
      </svg>

    <WalletIdenticon
      :value="address"
      :size="75"
      class="WalletHeading__identicon"
    />

          {{ name | truncate(12) }}

          {{ name | truncate(30) }}

          {{ wallet_truncate(label, 12) }}

          {{ showPublicKey ? wallet_truncate(label, 40) : label }}

        <SvgIcon
          v-if="currentWallet.secondPublicKey"
          v-tooltip="$t('WALLET_HEADING.SECOND_PASSPHRASE_ENABLED')"
          name="2nd-passphrase"
          view-box="0 0 18 18"
          class="ml-1"
        />

        <ButtonClipboard
          :value="showPublicKey ? publicKey : address"
          view-box="0 0 15 18"
          class="text-inherit opacity-50 mx-2"
        />

        <button
          v-if="currentWallet.publicKey"
          v-tooltip="{
            content: labelTooltip,
            trigger:'hover'
          }"
          class="text-inherit opacity-50"
          @click="togglePublicKey"
        >
          <SvgIcon
            :name="showPublicKey ? 'world' : 'key'"
            view-box="0 0 18 18"
          />
        </button>

        {{ balance }}

          {{ alternativeBalance }}

</template>


cleanup

cleanup

<template>

        Schedule to run repeatedly?

          <input id="scheduledFalse"
                 type="radio"
                 name="scheduled"
                 :value="false"
                 v-model="modelData.scheduled"/>

            {{ $t('no') }}

          <input type="radio"
                 name="scheduled"
                 :value="true"
                 v-model="modelData.scheduled"
                 id="scheduledTrue"/>

            {{ $t('yes') }}

    <template v-if="modelData.scheduled">

                          Simple

                          Crontab

                              Hour
                              <select
                                id="hourNumber"
                                name="hour"
                                v-model="modelData.hourSelected"
                                class="form-control"
                                style="width:auto;"
                              >
                                <option v-for="hour in this.hours" :key="hour" v-bind:value="hour">{{hour}}</option>
                              </select>
                              :
                              Minute
                              <select
                                id="minuteNumber"
                                name="minute"
                                v-model="modelData.minuteSelected"
                                class="form-control"
                                style="width:auto;"
                              >
                                <option v-for="minute in this.minutes" :key="minute" v-bind:value="minute">{{minute}}</option>
                              </select>

                                <input
                                  id="everyDay"
                                  name="everyDay"
                                  type="checkbox"
                                  value="all"
                                  v-model="modelData.everyDayOfWeek"
                                >
                                Every Day

                                  <input
                                    :id="'dayCheckbox_'+n"
                                    type="checkbox"
                                    :value="day.shortName"
                                    v-model="modelData.selectedDays"
                                  >
                                  {{day.name}}

                                <input type="hidden" name="selectedDaysOfWeek" :value="modelData.selectedDays.join(',')" >

                                <input
                                  id="everyMonth"
                                  name="everyMonth"
                                  type="checkbox"
                                  value="all"
                                  v-model="modelData.allMonths"
                                >
                                Every Month

                                  <input
                                    :id="'monthCheckbox_'+n"
                                    type="checkbox"
                                    :value="month.shortName"
                                    v-model="modelData.selectedMonths"
                                  >
                                  {{month.name}}

                              <input type="hidden" name="selectedMonths" :value="modelData.selectedMonths.join(',')" >

                                    <input
                                      ref="crontabInput"
                                      type="text"
                                      name="crontabString"
                                      autofocus="true"
                                      class="form-control input-sm"
                                      size="50"
                                      @click="updateCrontabPosition"
                                      @keyup="updateCrontabPosition"
                                      @change="validateCronExpression"
                                      @blur="crontabBlur"
                                      v-model="modelData.crontabString"
                                    >
                                    <input type="hidden" name="useCrontabString" v-model="modelData.useCrontabString">

                                  {{crontabHint}}

                                  <template>

                                  </template>

Ranges: 1-3.  Lists: 1,4,6. Increments: 0/15 "every 15 units starting at 0".

Valid values of Day of Week: 1-7 or SUN-SAT

Valid values of Month: 1-12 or JAN-DEC

                                  See: Cron reference for formatting help

          {{$t('scheduledExecution.property.timezone.prompt')}}

          <input
            type="text"
            name="timeZone"
            id="timeZone"
            autofocus="true"
            class="form-control input-sm"
            size="50"
            v-model="modelData.timeZone"
          >
          <typeahead  v-model="modelData.timeZone"  target="#timeZone" :data="modelData.timeZones"  />

            {{$t('scheduledExecution.property.timezone.description')}}

    </template>

          {{ $t('scheduledExecution.property.scheduleEnabled.label') }}

            <input type="radio"
                   name="scheduleEnabled"
                   :value="true"
                   v-model="modelData.scheduleEnabled"
                   id="scheduleEnabledTrue"/>

              {{ $t('yes') }}

            <input type=radio
                   :value="false"
                   name="scheduleEnabled"
                   v-model="modelData.scheduleEnabled"
                   id="scheduleEnabledFalse"/>

              {{ $t('no') }}

                {{ $t('scheduledExecution.property.scheduleEnabled.description') }}

          {{ $t('scheduledExecution.property.executionEnabled.label') }}

            <input type="radio"
                   name="executionEnabled"
                   :value="true"
                   v-model="modelData.executionEnabled"
                   id="executionEnabledTrue"/>

              {{ $t('yes') }}

            <input type=radio
                   :value="false"
                   name="executionEnabled"
                   v-model="modelData.executionEnabled"
                   id="executionEnabledFalse"/>

              {{ $t('no') }}

                {{ $t('scheduledExecution.property.executionEnabled.description') }}

</template>


Use router values

Use router values

It would be helpful to include this in the template as a way to show the power of vue.

<template>

Information

{{#isEnabled plugins 'vue-router'}}

Path:

\{{ path }}

Route Name:

\{{ name }}

{{/isEnabled}}

Vue.js:

\{{ vue }}

Electron:

\{{ electron }}

Node:

\{{ node }}

Platform:

\{{ platform }}

</template>


development Vec3Picker

development Vec3Picker

<script>
import noop from '../../utils/noop';
import clamp from '../../utils/clamp';
import { multiplyMatrixByVector, getInverseMatrix, getViewMatrix } from '../../utils/matrix';
import { vectorLength, normalizeVector } from '../../utils/vector';
import getElementOffsets from '../../utils/getElementOffsets';

export default {
  name: 'Vec3Picker',
  props: {
    name: String,
    dimension: {
      type: Number,
      default: 200
    },
    vector: {
      type: Array,
      default: () => [67, 55, -35]
    },
    onChange: {
      type: Function,
      default: noop
    }
  },
  data() {
    return {
      canvas: null,
      canvasOffsets: null,
      ctx: null,

      rotationSpeed: 0.01,
      isMouseDownOverPoint: false,
      isMouseDownOnCoordsSystem: false,

      viewMatrix: [],
      inversMatrix: [],

      width: this.dimension,
      height: this.dimension,

      edgeLength: 0.5 * this.dimension - 15,
      edgeIndent: 0.5 * this.dimension - 10,

      pointVector: this.vector,
      tempPointVector: this.vector,

      pointX: 0,
      pointY: 0,

      thetaX: 0.512,
      thetaY: -0.464,

      dx: 0.512,
      dy: -0.464,

      startX: 0,
      startY: 0
    };
  },
  methods: {
    drawAxis(adgesVector, adgesTextVector, axisName) {
      const edgeTextVector = multiplyMatrixByVector(this.viewMatrix, adgesTextVector);
      const egdeVector = multiplyMatrixByVector(this.viewMatrix, adgesVector);

      this.ctx.fillText(axisName, edgeTextVector[0], -1 * edgeTextVector[1]);
      this.ctx.save();
      this.ctx.strokeStyle = '#000';
      this.ctx.beginPath();
      this.ctx.moveTo(0, 0);
      this.ctx.lineTo(egdeVector[0], -1 * egdeVector[1]);
      this.ctx.stroke();
      this.ctx.restore();
    },

    drawAxes() {
      this.ctx.clearRect(-this.width / 2, -this.height / 2, this.width, this.height);

      this.ctx.textBaseline = 'middle';
      this.ctx.textAlign = 'center';
      this.ctx.fillStyle = '#fff';

      this.drawAxis([this.edgeLength, 0, 0], [this.edgeIndent, 0, 0], 'X');
      this.drawAxis([-this.edgeLength, 0, 0], [-this.edgeIndent, 0, 0], '-X');
      this.drawAxis([0, this.edgeLength, 0], [0, this.edgeIndent, 0], 'Y');
      this.drawAxis([0, -this.edgeLength, 0], [0, -this.edgeIndent, 0], '-Y');
      this.drawAxis([0, 0, this.edgeLength], [0, 0, this.edgeIndent], 'Z');
      this.drawAxis([0, 0, -this.edgeLength], [0, 0, -this.edgeIndent], '-Z');
    },

    drawPoint(x, y) {
      this.ctx.save();
      this.ctx.strokeStyle = '#08c';
      this.ctx.beginPath();
      this.ctx.setLineDash([5, 2.5]);
      this.ctx.moveTo(0, 0);
      this.ctx.lineTo(x, -1 * y);
      this.ctx.stroke();
      this.ctx.restore();

      this.ctx.beginPath();
      this.ctx.arc(x, -1 * y, 2, 0, 2 * Math.PI, false);
      this.ctx.fill();
    },

    getMouseClickCoords(curentX, currentY) {
      return {
        x: curentX - this.dimension * 0.5,
        y: -1 * (currentY - this.dimension * 0.5) || 0,
      }
    },

    onMovePoint(curentX, currentY) {
      this.drawAxes();
      const pointCoords = this.getMouseClickCoords(curentX, currentY);
      const pointVector = multiplyMatrixByVector(this.viewMatrix, this.pointVector);
      this.tempPointVector = multiplyMatrixByVector(this.inversMatrix, [pointCoords.x, pointCoords.y, pointVector[2]]);
      const newPointVec = multiplyMatrixByVector(this.viewMatrix, this.tempPointVector);
      this.drawPoint(newPointVec[0], newPointVec[1]);
    },

    onRotateCoordinateSystem(curentX, currentY) {
      this.thetaX = this.rotationSpeed * (currentY - this.startY) + this.dx;
      this.thetaY = this.rotationSpeed * (curentX - this.startX) + this.dy;

      this.viewMatrix = getViewMatrix(this.thetaX, this.thetaY);
      const newPointVec = multiplyMatrixByVector(this.viewMatrix, this.pointVector);

      this.drawAxes();
      this.drawPoint(newPointVec[0], newPointVec[1]);
    },

    setMousedownBy(curentX, currentY) {
      const pointCoords = this.getMouseClickCoords(curentX, currentY);
      const num = (this.pointVector[0] + this.pointVector[1]) - (pointCoords.x + pointCoords.y);

      console.log(num);

      // this.isMouseDownOnCoordsSystem = true;
      // this.isMouseDownOverPoint = true;
    },

    onMouseDown(event) {
      this.canvasOffsets = getElementOffsets(this.canvas);
      this.startX = event.pageX - this.canvasOffsets.left;
      this.startY = event.pageY - this.canvasOffsets.top;
      this.setMousedownBy(this.startX, this.startY);
    },

    onMouseMove(event) {
      if (this.isMouseDownOnCoordsSystem || this.isMouseDownOverPoint) {
        const curentX = clamp(event.pageX - this.canvasOffsets.left, 0, this.width);
        const currentY = clamp(event.pageY - this.canvasOffsets.top, 0, this.height);

        if (this.isMouseDownOnCoordsSystem) {
          this.onRotateCoordinateSystem(curentX, currentY);
        }

        if (this.isMouseDownOverPoint) {
          this.onMovePoint(curentX, currentY);
        }
      }
    },

    onMouseUp() {
      this.isMouseDownOnCoordsSystem = false;
      this.isMouseDownOverPoint = false;
      this.dx = this.thetaX;
      this.dy = this.thetaY;
      this.pointVector = this.tempPointVector;
    }
  },

  mounted() {
    this.canvas = this.$refs.vec3Picker;
    this.canvasOffsets = getElementOffsets(this.canvas);
    this.ctx = this.canvas.getContext('2d');

    this.ctx.translate(this.width / 2, this.height / 2);

    this.viewMatrix = getViewMatrix(this.thetaX, this.thetaY);
    const newPointVec = multiplyMatrixByVector(this.viewMatrix, this.pointVector);

    this.drawAxes();
    this.drawPoint(newPointVec[0], newPointVec[1]);

    this.inversMatrix = getInverseMatrix(this.viewMatrix);

    this.canvas.addEventListener('mousedown', event => this.onMouseDown(event));
    document.addEventListener('mousemove', event => this.onMouseMove(event));
    document.addEventListener('mouseup', event => this.onMouseUp(event));
  },

  beforeDestroy() {
    this.canvas.removeEventListener('mousedown', event => this.onMouseDown(event));
    document.removeEventListener('mousemove', event => this.onMouseMove(event));
    document.removeEventListener('mouseup', event => this.onMouseUp(event));
  }
};
</script>

<template>
  <canvas ref="vec3Picker" class="vec3-picker" :width="width" :height="height"></canvas>
</template>

<script>
import noop from '../../utils/noop';
import clamp from '../../utils/clamp';
import { multiplyMatrixByVector, getInverseMatrix, getViewMatrix } from '../../utils/matrix';
import { vectorLength, normalizeVector } from '../../utils/vector';
import getElementOffsets from '../../utils/getElementOffsets';

export default {
  name: 'Vec3Picker',
  props: {
    name: String,
    dimension: {
      type: Number,
      default: 200
    },
    vector: {
      type: Array,
      default: () => [67, 55, -35]
    },
    onChange: {
      type: Function,
      default: noop
    }
  },
  data() {
    return {
      canvas: null,
      canvasOffsets: null,
      ctx: null,

      isPressedSpace: false,

      rotationSpeed: 0.01,

      isMouseDown: false,

      viewMatrix: [],
      inversMatrix: [],

      width: this.dimension,
      height: this.dimension,

      edgeLength: 0.5 * this.dimension - 15,
      edgeIndent: 0.5 * this.dimension - 10,

      pointVector: this.vector,
      tempPointVector: this.vector,

      pointX: 0,
      pointY: 0,

      thetaX: 0.512,
      thetaY: -0.464,

      dx: 0.512,
      dy: -0.464,

      startX: 0,
      startY: 0
    };
  },
  methods: {
    drawAxis(adgesVector, adgesTextVector, axisName) {
      const edgeTextVector = multiplyMatrixByVector(this.viewMatrix, adgesTextVector);
      const egdeVector = multiplyMatrixByVector(this.viewMatrix, adgesVector);

      this.ctx.fillText(axisName, edgeTextVector[0], -1 * edgeTextVector[1]);
      this.ctx.save();
      this.ctx.strokeStyle = '#000';
      this.ctx.beginPath();
      this.ctx.moveTo(0, 0);
      this.ctx.lineTo(egdeVector[0], -1 * egdeVector[1]);
      this.ctx.stroke();
      this.ctx.restore();
    },

    drawAxes() {
      this.ctx.clearRect(-this.width / 2, -this.height / 2, this.width, this.height);

      this.ctx.textBaseline = 'middle';
      this.ctx.textAlign = 'center';
      this.ctx.fillStyle = '#fff';

      this.drawAxis([this.edgeLength, 0, 0], [this.edgeIndent, 0, 0], 'X');
      this.drawAxis([-this.edgeLength, 0, 0], [-this.edgeIndent, 0, 0], '-X');
      this.drawAxis([0, this.edgeLength, 0], [0, this.edgeIndent, 0], 'Y');
      this.drawAxis([0, -this.edgeLength, 0], [0, -this.edgeIndent, 0], '-Y');
      this.drawAxis([0, 0, this.edgeLength], [0, 0, this.edgeIndent], 'Z');
      this.drawAxis([0, 0, -this.edgeLength], [0, 0, -this.edgeIndent], '-Z');
    },

    drawPoint(x, y) {
      this.ctx.save();
      this.ctx.strokeStyle = '#08c';
      this.ctx.beginPath();
      this.ctx.setLineDash([5, 2.5]);
      this.ctx.moveTo(0, 0);
      this.ctx.lineTo(x, -1 * y);
      this.ctx.stroke();
      this.ctx.restore();

      this.ctx.beginPath();
      this.ctx.arc(x, -1 * y, 2, 0, 2 * Math.PI, false);
      this.ctx.fill();
    },

    onMovePoint(x, y) {
      if (!this.isPressedSpace) {
        this.drawAxes();

        const pointX = x - this.dimension * 0.5;
        const pointY = -1 * (y - this.dimension * 0.5) || 0;

        const pointVector = multiplyMatrixByVector(this.viewMatrix, this.pointVector);

        this.tempPointVector = multiplyMatrixByVector(this.inversMatrix, [pointX, pointY, pointVector[2]]);

        const newPointVec = multiplyMatrixByVector(this.viewMatrix, this.tempPointVector);

        this.drawPoint(newPointVec[0], newPointVec[1]);
      }
    },

    onMouseDown(event) {
      this.canvasOffsets = getElementOffsets(this.canvas);
      this.isMouseDown = true;

      this.startX = event.pageX - this.canvasOffsets.left;
      this.startY = event.pageY - this.canvasOffsets.top;

      this.onMovePoint(this.startX, this.startY);
    },

    onMouseMove(event) {
      if (this.isMouseDown) {
        const x = clamp(event.pageX - this.canvasOffsets.left, 0, this.width);
        const y = clamp(event.pageY - this.canvasOffsets.top, 0, this.height);

        this.onMovePoint(x, y);

        if (this.isPressedSpace) {
          this.thetaX = this.rotationSpeed * (y - this.startY) + this.dx;
          this.thetaY = this.rotationSpeed * (x - this.startX) + this.dy;

          this.viewMatrix = getViewMatrix(this.thetaX, this.thetaY);
          const newPointVec = multiplyMatrixByVector(this.viewMatrix, this.pointVector);

          this.drawAxes();
          this.drawPoint(newPointVec[0], newPointVec[1]);
        }
      }
    },

    onMouseUp() {
      this.isMouseDown = false;
      this.dx = this.thetaX;
      this.dy = this.thetaY;
      this.pointVector = this.tempPointVector;
    },

    onKeyDown(e) {
      if (e.keyCode === 32) {
        this.isPressedSpace = true;
      }
    },

    onKeyUp(e) {
      if (e.keyCode === 32) {
        this.isPressedSpace = false;
        this.inversMatrix = getInverseMatrix(this.viewMatrix);
      }
    }
  },

  mounted() {
    this.canvas = this.$refs.vec3Picker;
    this.canvasOffsets = getElementOffsets(this.canvas);
    this.ctx = this.canvas.getContext('2d');

    this.ctx.translate(this.width / 2, this.height / 2);

    this.viewMatrix = getViewMatrix(this.thetaX, this.thetaY);
    const newPointVec = multiplyMatrixByVector(this.viewMatrix, this.pointVector);

    this.drawAxes();
    this.drawPoint(newPointVec[0], newPointVec[1]);

    this.inversMatrix = getInverseMatrix(this.viewMatrix);

    this.canvas.addEventListener('mousedown', event => this.onMouseDown(event));
    document.addEventListener('mousemove', event => this.onMouseMove(event));
    document.addEventListener('mouseup', event => this.onMouseUp(event));

    document.addEventListener('keydown', event => this.onKeyDown(event));
    document.addEventListener('keyup', event => this.onKeyUp(event));
  },

  beforeDestroy() {
    this.canvas.removeEventListener('mousedown', event => this.onMouseDown(event));
    document.removeEventListener('mousemove', event => this.onMouseMove(event));
    document.removeEventListener('mouseup', event => this.onMouseUp(event));

    document.removeEventListener('keydown', event => this.onKeyDown(event));
    document.removeEventListener('keyup', event => this.onKeyUp(event));
  }
};
</script>

<template>
  <canvas ref="vec3Picker" class="vec3-picker" :width="width" :height="height"></canvas>
</template>


Fix: Datetimepicker ignores expanded prop (#1961)

<template>
    <b-datepicker
        v-if="!isMobile || inline"
        ref="datepicker"
        v-model="computedValue"
        v-bind="datepicker"
        :open-on-focus="openOnFocus"
        :position="position"
        :loading="loading"
        :inline="inline"
        :editable="editable"
        :expanded="expanded"
        :close-on-click="false"
        :date-formatter="defaultDatetimeFormatter"
        :date-parser="defaultDatetimeParser"
        :min-date="minDate"
        :max-date="maxDate"
        :icon="icon"
        :icon-pack="iconPack"
        :size="datepickerSize"
        :placeholder="placeholder"
        :range="false"
        :disabled="disabled"
        :mobile-native="mobileNative"
        @change-month="$emit('change-month', $event)"
        @change-year="$emit('change-year', $event)">
        <nav class="level is-mobile">
            <div
                class="level-item has-text-centered"
                v-if="$slots.left !== undefined">
                <slot name="left" />
            </div>
            <div class="level-item has-text-centered">
                <b-timepicker
                    ref="timepicker"
                    v-bind="timepicker"
                    v-model="computedValue"
                    inline
                    :editable="editable"
                    :min-time="minTime"
                    :max-time="maxTime"
                    :size="timepickerSize"
                    :disabled="timepickerDisabled"
                />
            </div>
            <div
                class="level-item has-text-centered"
                v-if="$slots.right !== undefined">
                <slot name="right" />
            </div>
        </nav>
    </b-datepicker>
    <b-input
        v-else
        ref="input"
        type="datetime-local"
        autocomplete="off"
        :value="formatNative(computedValue)"
        :placeholder="placeholder"
        :size="size"
        :icon="icon"
        :icon-pack="iconPack"
        :loading="loading"
        :max="formatNative(maxDate)"
        :min="formatNative(minDate)"
        :disabled="disabled"
        :readonly="false"
        v-bind="$attrs"
        :use-html5-validation="useHtml5Validation"
        @change.native="onChangeNativePicker"
        @focus="onFocus"
        @blur="onBlur"/>
</template>

<script>
import FormElementMixin from '../../utils/FormElementMixin'
import { isMobile } from '../../utils/helpers'
import config from '../../utils/config'

import Datepicker from '../datepicker/Datepicker'
import Timepicker from '../timepicker/Timepicker'

export default {
    name: 'BDatetimepicker',
    components: {
        [Datepicker.name]: Datepicker,
        [Timepicker.name]: Timepicker
    },
    mixins: [FormElementMixin],
    inheritAttrs: false,
    props: {
        value: {
            type: Date
        },
        editable: {
            type: Boolean,
            default: false
        },
        placeholder: String,
        disabled: Boolean,
        icon: String,
        iconPack: String,
        inline: Boolean,
        openOnFocus: Boolean,
        position: String,
        mobileNative: {
            type: Boolean,
            default: true
        },
        minDatetime: Date,
        maxDatetime: Date,
        datetimeFormatter: {
            type: Function
        },
        datetimeParser: {
            type: Function
        },
        datetimeCreator: {
            type: Function,
            default: (date) => {
                if (typeof config.defaultDatetimeCreator === 'function') {
                    return config.defaultDatetimeCreator(date)
                } else {
                    return date
                }
            }
        },
        datepicker: Object,
        timepicker: Object
    },
    data() {
        return {
            newValue: this.value
        }
    },
    computed: {
        computedValue: {
            get() {
                return this.newValue
            },
            set(value) {
                if (value) {
                    let val = new Date(value.getTime())
                    if (this.newValue) {
                        // restore time part
                        if (value.getHours() === 0 &&
                            value.getMinutes() === 0 &&
                            value.getSeconds() === 0) {
                            val.setHours(this.newValue.getHours(),
                                this.newValue.getMinutes(),
                                this.newValue.getSeconds(), 0)
                        }
                    } else {
                        val = this.datetimeCreator(value)
                    }
                    // check min and max range
                    if (this.minDatetime && val < this.minDatetime) {
                        val = this.minDatetime
                    } else if (this.maxDatetime && val > this.maxDatetime) {
                        val = this.maxDatetime
                    }
                    this.newValue = new Date(val.getTime())
                } else {
                    this.newValue = value
                }
                this.$emit('input', this.newValue)
            }
        },
        isMobile() {
            return this.mobileNative && isMobile.any()
        },
        minDate() {
            if (!this.minDatetime) return null
            return new Date(this.minDatetime.getFullYear(),
                this.minDatetime.getMonth(),
                this.minDatetime.getDate(), 0, 0, 0, 0)
        },
        maxDate() {
            if (!this.maxDatetime) return null
            return new Date(this.maxDatetime.getFullYear(),
                this.maxDatetime.getMonth(),
                this.maxDatetime.getDate(), 0, 0, 0, 0)
        },
        minTime() {
            if (!this.minDatetime) return null
            if (this.newValue === null || typeof this.newValue === 'undefined') return null
            if (this.minDatetime.getFullYear() === this.newValue.getFullYear() &&
                this.minDatetime.getMonth() === this.newValue.getMonth() &&
                this.minDatetime.getDate() === this.newValue.getDate()) {
                return this.minDatetime
            }
        },
        maxTime() {
            if (!this.maxDatetime) return null
            if (this.newValue === null || typeof this.newValue === 'undefined') return null
            if (this.maxDatetime.getFullYear() === this.newValue.getFullYear() &&
                this.maxDatetime.getMonth() === this.newValue.getMonth() &&
                this.maxDatetime.getDate() === this.newValue.getDate()) {
                return this.maxDatetime
            }
        },
        datepickerSize() {
            return this.datepicker && this.datepicker.size
                ? this.datepicker.size : this.size
        },
        timepickerSize() {
            return this.timepicker && this.timepicker.size
                ? this.timepicker.size : this.size
        },
        timepickerDisabled() {
            return this.timepicker && this.timepicker.disabled
                ? this.timepicker.disabled : this.disabled
        }
    },
    watch: {
        value(value) {
            this.newValue = value
        }
    },
    methods: {
        defaultDatetimeParser(date) {
            if (typeof this.datetimeParser === 'function') {
                return this.datetimeParser(date)
            } else if (typeof config.defaultDatetimeParser === 'function') {
                return config.defaultDatetimeParser(date)
            } else {
                return new Date(Date.parse(date))
            }
        },
        defaultDatetimeFormatter(date) {
            if (typeof this.datetimeFormatter === 'function') {
                return this.datetimeFormatter(date)
            } else if (typeof config.defaultDatetimeParser === 'function') {
                return config.defaultDatetimeParser(date)
            } else {
                if (this.$refs.timepicker) {
                    const yyyyMMdd = date.getFullYear() +
                        '/' + (date.getMonth() + 1) +
                        '/' + date.getDate()
                    const d = new Date(yyyyMMdd)
                    return d.toLocaleDateString() +
                        ' ' + this.$refs.timepicker.timeFormatter(date, this.$refs.timepicker)
                }
                return null
            }
        },
        /*
        * Parse date from string
        */
        onChangeNativePicker(event) {
            const date = event.target.value
            this.computedValue = date ? new Date(date) : null
        },
        formatNative(value) {
            const date = new Date(value)
            if (value && !isNaN(date)) {
                const year = date.getFullYear()
                const month = date.getMonth() + 1
                const day = date.getDate()
                const hours = date.getHours()
                const minutes = date.getMinutes()
                const seconds = date.getSeconds()
                return year + '-' +
                    ((month < 10 ? '0' : '') + month) + '-' +
                    ((day < 10 ? '0' : '') + day) + 'T' +
                    ((hours < 10 ? '0' : '') + hours) + ':' +
                    ((minutes < 10 ? '0' : '') + minutes) + ':' +
                    ((seconds < 10 ? '0' : '') + seconds)
            }
            return ''
        },
        toggle() {
            this.$refs.datepicker.toggle()
        }
    },
    mounted() {
        // $refs attached, it's time to refresh datepicker (input)
        if (this.newValue) {
            this.$refs.datepicker.$forceUpdate()
        }
    }
}
</script>

<template>
    <b-datepicker
        v-if="!isMobile || inline"
        ref="datepicker"
        v-model="computedValue"
        v-bind="datepicker"
        :open-on-focus="openOnFocus"
        :position="position"
        :loading="loading"
        :inline="inline"
        :editable="editable"
        :close-on-click="false"
        :date-formatter="defaultDatetimeFormatter"
        :date-parser="defaultDatetimeParser"
        :min-date="minDate"
        :max-date="maxDate"
        :icon="icon"
        :icon-pack="iconPack"
        :size="datepickerSize"
        :placeholder="placeholder"
        :range="false"
        :disabled="disabled"
        :mobile-native="mobileNative"
        @change-month="$emit('change-month', $event)"
        @change-year="$emit('change-year', $event)">
        <nav class="level is-mobile">
            <div
                class="level-item has-text-centered"
                v-if="$slots.left !== undefined">
                <slot name="left" />
            </div>
            <div class="level-item has-text-centered">
                <b-timepicker
                    ref="timepicker"
                    v-bind="timepicker"
                    v-model="computedValue"
                    inline
                    :editable="editable"
                    :min-time="minTime"
                    :max-time="maxTime"
                    :size="timepickerSize"
                    :disabled="timepickerDisabled"
                />
            </div>
            <div
                class="level-item has-text-centered"
                v-if="$slots.right !== undefined">
                <slot name="right" />
            </div>
        </nav>
    </b-datepicker>
    <b-input
        v-else
        ref="input"
        type="datetime-local"
        autocomplete="off"
        :value="formatNative(computedValue)"
        :placeholder="placeholder"
        :size="size"
        :icon="icon"
        :icon-pack="iconPack"
        :loading="loading"
        :max="formatNative(maxDate)"
        :min="formatNative(minDate)"
        :disabled="disabled"
        :readonly="false"
        v-bind="$attrs"
        :use-html5-validation="useHtml5Validation"
        @change.native="onChangeNativePicker"
        @focus="onFocus"
        @blur="onBlur"/>
</template>

<script>
import FormElementMixin from '../../utils/FormElementMixin'
import { isMobile } from '../../utils/helpers'
import config from '../../utils/config'

import Datepicker from '../datepicker/Datepicker'
import Timepicker from '../timepicker/Timepicker'

export default {
    name: 'BDatetimepicker',
    components: {
        [Datepicker.name]: Datepicker,
        [Timepicker.name]: Timepicker
    },
    mixins: [FormElementMixin],
    inheritAttrs: false,
    props: {
        value: {
            type: Date
        },
        editable: {
            type: Boolean,
            default: false
        },
        placeholder: String,
        disabled: Boolean,
        icon: String,
        iconPack: String,
        inline: Boolean,
        openOnFocus: Boolean,
        position: String,
        mobileNative: {
            type: Boolean,
            default: true
        },
        minDatetime: Date,
        maxDatetime: Date,
        datetimeFormatter: {
            type: Function
        },
        datetimeParser: {
            type: Function
        },
        datetimeCreator: {
            type: Function,
            default: (date) => {
                if (typeof config.defaultDatetimeCreator === 'function') {
                    return config.defaultDatetimeCreator(date)
                } else {
                    return date
                }
            }
        },
        datepicker: Object,
        timepicker: Object
    },
    data() {
        return {
            newValue: this.value
        }
    },
    computed: {
        computedValue: {
            get() {
                return this.newValue
            },
            set(value) {
                if (value) {
                    let val = new Date(value.getTime())
                    if (this.newValue) {
                        // restore time part
                        if (value.getHours() === 0 &&
                            value.getMinutes() === 0 &&
                            value.getSeconds() === 0) {
                            val.setHours(this.newValue.getHours(),
                                this.newValue.getMinutes(),
                                this.newValue.getSeconds(), 0)
                        }
                    } else {
                        val = this.datetimeCreator(value)
                    }
                    // check min and max range
                    if (this.minDatetime && val < this.minDatetime) {
                        val = this.minDatetime
                    } else if (this.maxDatetime && val > this.maxDatetime) {
                        val = this.maxDatetime
                    }
                    this.newValue = new Date(val.getTime())
                } else {
                    this.newValue = value
                }
                this.$emit('input', this.newValue)
            }
        },
        isMobile() {
            return this.mobileNative && isMobile.any()
        },
        minDate() {
            if (!this.minDatetime) return null
            return new Date(this.minDatetime.getFullYear(),
                this.minDatetime.getMonth(),
                this.minDatetime.getDate(), 0, 0, 0, 0)
        },
        maxDate() {
            if (!this.maxDatetime) return null
            return new Date(this.maxDatetime.getFullYear(),
                this.maxDatetime.getMonth(),
                this.maxDatetime.getDate(), 0, 0, 0, 0)
        },
        minTime() {
            if (!this.minDatetime) return null
            if (this.newValue === null || typeof this.newValue === 'undefined') return null
            if (this.minDatetime.getFullYear() === this.newValue.getFullYear() &&
                this.minDatetime.getMonth() === this.newValue.getMonth() &&
                this.minDatetime.getDate() === this.newValue.getDate()) {
                return this.minDatetime
            }
        },
        maxTime() {
            if (!this.maxDatetime) return null
            if (this.newValue === null || typeof this.newValue === 'undefined') return null
            if (this.maxDatetime.getFullYear() === this.newValue.getFullYear() &&
                this.maxDatetime.getMonth() === this.newValue.getMonth() &&
                this.maxDatetime.getDate() === this.newValue.getDate()) {
                return this.maxDatetime
            }
        },
        datepickerSize() {
            return this.datepicker && this.datepicker.size
                ? this.datepicker.size : this.size
        },
        timepickerSize() {
            return this.timepicker && this.timepicker.size
                ? this.timepicker.size : this.size
        },
        timepickerDisabled() {
            return this.timepicker && this.timepicker.disabled
                ? this.timepicker.disabled : this.disabled
        }
    },
    watch: {
        value(value) {
            this.newValue = value
        }
    },
    methods: {
        defaultDatetimeParser(date) {
            if (typeof this.datetimeParser === 'function') {
                return this.datetimeParser(date)
            } else if (typeof config.defaultDatetimeParser === 'function') {
                return config.defaultDatetimeParser(date)
            } else {
                return new Date(Date.parse(date))
            }
        },
        defaultDatetimeFormatter(date) {
            if (typeof this.datetimeFormatter === 'function') {
                return this.datetimeFormatter(date)
            } else if (typeof config.defaultDatetimeParser === 'function') {
                return config.defaultDatetimeParser(date)
            } else {
                if (this.$refs.timepicker) {
                    const yyyyMMdd = date.getFullYear() +
                        '/' + (date.getMonth() + 1) +
                        '/' + date.getDate()
                    const d = new Date(yyyyMMdd)
                    return d.toLocaleDateString() +
                        ' ' + this.$refs.timepicker.timeFormatter(date, this.$refs.timepicker)
                }
                return null
            }
        },
        /*
        * Parse date from string
        */
        onChangeNativePicker(event) {
            const date = event.target.value
            this.computedValue = date ? new Date(date) : null
        },
        formatNative(value) {
            const date = new Date(value)
            if (value && !isNaN(date)) {
                const year = date.getFullYear()
                const month = date.getMonth() + 1
                const day = date.getDate()
                const hours = date.getHours()
                const minutes = date.getMinutes()
                const seconds = date.getSeconds()
                return year + '-' +
                    ((month < 10 ? '0' : '') + month) + '-' +
                    ((day < 10 ? '0' : '') + day) + 'T' +
                    ((hours < 10 ? '0' : '') + hours) + ':' +
                    ((minutes < 10 ? '0' : '') + minutes) + ':' +
                    ((seconds < 10 ? '0' : '') + seconds)
            }
            return ''
        },
        toggle() {
            this.$refs.datepicker.toggle()
        }
    },
    mounted() {
        // $refs attached, it's time to refresh datepicker (input)
        if (this.newValue) {
            this.$refs.datepicker.$forceUpdate()
        }
    }
}
</script>


fix: prevent text collapsing on smaller screens

<template>

        <va-card :title="$t('menu.colorPickers')">

                  {{ $t('colorPickers.simple') }}

                <va-color-picker-input
                  mode="palette"
                  v-model="topSimpleSquareColor"
                  :palette="palette"
                >
                  <va-color-square :value="topSimpleSquareColor"/>
                </va-color-picker-input>

                  {{ $t('colorPickers.slider') }}

                <va-color-picker-input
                  mode="slider"
                  v-model="topSliderSquareColor"
                >
                  <va-color-square :value="topSliderSquareColor"/>
                </va-color-picker-input>

                  {{ $t('colorPickers.advanced') }}

                <va-color-picker-input
                  mode="advanced"
                  v-model="topAdvancedSquareColor"
                >
                  <va-color-square :value="topAdvancedSquareColor"/>
                </va-color-picker-input>

        </va-card>

        <va-card title="Simple Inline">

              <va-color-square :value="simpleColor"/>

              <va-palette-custom :palette="palette" v-model="simpleColor"/>

        </va-card>

        <va-card title="Slider">

              <va-color-square :value="sliderColor"/>

              <va-slider-color-picker v-model="sliderColor"/>

        </va-card>

        <va-card title="Advanced">

              <va-color-square :value="advancedColor"/>

              <va-advanced-color-picker v-model="advancedColor"/>

        </va-card>

</template>


Updated service descriptions.

Updated service descriptions.

<template>

Inkline

                        Inkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications.

                    Get Started

Modern

Inkline is a versatile and modern framework, written using the best Vue.js practices.

Responsive

Designed to be mobile-first, Inkline looks great on phones, tablets, laptops and desktops.

Modular

With over 50 components, Inkline is designed to give you the best development experience.

                                Sponsors

</template>

<template>

Inkline

                        Inkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications.

                    Get Started

Modern

Inkline is a versatile and modern framework, written using the Vue.js best practices.

Responsive

Inkline is designed to be mobile-first. It looks great on phones, tablets, laptops and desktops.

Modular

Inkline comes with over 50 components designed to give you the best development experience.

Modern

Inkline is a versatile and modern framework, written using the Vue.js best practices.

Responsive

Inkline is designed to be mobile-first. It looks great on phones, tablets, laptops and desktops.

Modular

Inkline comes with over 50 components designed to give you the best development experience.

                                Sponsors

</template>


Added Riposte

Added Riposte

<template>

{{ arena.mapname | getmapname }}

No active match

</template>


formItem加入icon组件

formItem加入icon组件

<template>
<v-row>

    <v-col :span="labelCol" class="form-label">

        *
        {{label}}

    </v-col>
    <v-col :span="wrapperCol">

        <slot></slot>
        <template v-if="showIcon">
          <icon class="status-icon" v-if="validStatus == 'warn'" type="waring"></icon>
          <icon class="status-icon" v-if="validStatus == 'error'" type="error"></icon>
          <icon class="status-icon" v-if="validStatus == 'success'" type="success"></icon>
          <icon class="status-icon" v-if="validStatus == 'help'" type="help"></icon>
        </template>

{{tip}}

    </v-col>

</v-row>
</template>

<template>
<v-row>

    <v-col :span="labelCol" class="form-label">

        *
        {{label}}

    </v-col>
    <v-col :span="wrapperCol">

        <slot></slot>
        

{{tip}}

    </v-col>

</v-row>
</template>


Total refactoring (store types)

Total refactoring (store types)

<template lang="pug">
  v-container(fluid).pl-4.pr-4
    v-layout(row wrap).stretch
      v-flex(xs12 sm6 md4 lg3 v-ripple='' relative v-if="item._display" v-for="(item, key) in items" :key="item._id" @click="SET_OPERATION(item)").operation--block
        v-divider
        .pt-1.pb-1
          app-operation(:o="items[key]")
          div(v-if='IS_DESCRIPTION')
            .pt-1.pr-1.body-2(style='padding-left: 68px') {{item.description}}
</template>

<script>
  import { mapMutations, mapGetters } from 'vuex'
  import * as types from '../store/types'

  export default {
    components: {
      appOperation: () => import('./Operation')
    },
    props: ['items'],
    computed: {
      ...mapGetters([
        types.IS_DESCRIPTION
      ])
    },
    methods: {
      ...mapMutations([
        types.SET_OPERATION
      ])
    }
  }
</script>

<style lang="stylus">
  .stretch
    align-content stretch

  .relative
    position relative

  @import "../../node_modules/vuetify/src/stylus/settings/_theme.styl"

  .operation--block:hover
    background: $material-twelve-percent-dark
    cursor pointer
</style>

<template lang="pug">
  v-container(fluid).pl-4.pr-4
    v-layout(row wrap).stretch
      v-flex(xs12 sm6 md4 lg3 v-ripple='' relative v-if="item._display" v-for="(item, key) in items" :key="item._id" @click="setOperation(item)").operation--block
        v-divider
        .pt-1.pb-1
          app-operation(:o="items[key]")
          div(v-if='IS_DESCRIPTION')
            .pt-1.pr-1.body-2(style='padding-left: 68px') {{item.description}}
</template>

<script>
  import { mapMutations, mapGetters } from 'vuex'
  import * as types from '../store/types'

  export default {
    components: {
      appOperation: () => import('./Operation')
    },
    props: ['items'],
    computed: {
      ...mapGetters([
        types.IS_DESCRIPTION
      ])
    },
    methods: {
      ...mapMutations([
        types.SET_OPERATION
      ])
    }
  }
</script>

<style lang="stylus">
  .stretch
    align-content stretch

  .relative
    position relative

  @import "../../node_modules/vuetify/src/stylus/settings/_theme.styl"

  .operation--block:hover
    background: $material-twelve-percent-dark
    cursor pointer
</style>


x-input: fix scrollIntoViewIfNeeded of undefined (#2886)

* Update index.vue

报错：Cannot read property 'scrollIntoViewIfNeeded' of undefined。
修复：切换页面时，input的'scrollIntoViewIfNeeded'方法尚未执行导致'undefined'错误。

* Update index.vue

<template>

        <slot name="restricted-label"></slot>

      <slot name="label">
        <label class="weui-label" :class="labelClass" :style="{width: labelWidth || $parent.labelWidth || labelWidthComputed, textAlign: $parent.labelAlign, marginRight: $parent.labelMarginRight}" v-if="title" v-html="title" :for="`vux-x-input-${uuid}`">
        <inline-desc v-if="inlineDesc">{{ inlineDesc }}</inline-desc>
      </slot>

    <div class="weui-cell__bd weui-cell__primary" :class="placeholderAlign ? `vux-x-input-placeholder-${placeholderAlign}` : ''">
      <input
      :id="`vux-x-input-${uuid}`"
      v-if="!type || type === 'text'"
      class="weui-input"
      :maxlength="max"
      :autocomplete="autocomplete"
      :autocapitalize="autocapitalize"
      :autocorrect="autocorrect"
      :spellcheck="spellcheck"
      :style="inputStyle"
      type="text"
      :name="name"
      :pattern="pattern"
      :placeholder="placeholder"
      :readonly="readonly"
      :disabled="disabled"
      v-model="currentValue"
      @focus="focusHandler"
      @blur="onBlur"
      @keyup="onKeyUp"
      ref="input"/>
      <input
      :id="`vux-x-input-${uuid}`"
      v-if="type === 'number'"
      class="weui-input"
      :maxlength="max"
      :autocomplete="autocomplete"
      :autocapitalize="autocapitalize"
      :autocorrect="autocorrect"
      :spellcheck="spellcheck"
      :style="inputStyle"
      type="number"
      :name="name"
      :pattern="pattern"
      :placeholder="placeholder"
      :readonly="readonly"
      :disabled="disabled"
      v-model="currentValue"
      @focus="focusHandler"
      @blur="onBlur"
      @keyup="onKeyUp"
      ref="input"/>
      <input
      :id="`vux-x-input-${uuid}`"
      v-if="type === 'email'"
      class="weui-input"
      :maxlength="max"
      :autocomplete="autocomplete"
      :autocapitalize="autocapitalize"
      :autocorrect="autocorrect"
      :spellcheck="spellcheck"
      :style="inputStyle"
      type="email"
      :name="name"
      :pattern="pattern"
      :placeholder="placeholder"
      :readonly="readonly"
      :disabled="disabled"
      v-model="currentValue"
      @focus="focusHandler"
      @blur="onBlur"
      @keyup="onKeyUp"
      ref="input"/>
      <input
      :id="`vux-x-input-${uuid}`"
      v-if="type === 'password'"
      class="weui-input"
      :maxlength="max"
      :autocomplete="autocomplete"
      :autocapitalize="autocapitalize"
      :autocorrect="autocorrect"
      :spellcheck="spellcheck"
      :style="inputStyle"
      type="password"
      :name="name"
      :pattern="pattern"
      :placeholder="placeholder"
      :readonly="readonly"
      :disabled="disabled"
      v-model="currentValue"
      @focus="focusHandler"
      @blur="onBlur"
      @keyup="onKeyUp"
      ref="input"/>
      <input
      :id="`vux-x-input-${uuid}`"
      v-if="type === 'tel'"
      class="weui-input"
      :maxlength="max"
      :autocomplete="autocomplete"
      :autocapitalize="autocapitalize"
      :autocorrect="autocorrect"
      :spellcheck="spellcheck"
      :style="inputStyle"
      type="tel"
      :name="name"
      :pattern="pattern"
      :placeholder="placeholder"
      :readonly="readonly"
      :disabled="disabled"
      v-model="currentValue"
      @focus="focusHandler"
      @blur="onBlur"
      @keyup="onKeyUp"
      ref="input"/>

      <icon type="clear" v-show="!hasRightFullHeightSlot && !equalWith && showClear && currentValue !== '' && !readonly && !disabled && isFocus" @click.native="clear"></icon>

      <icon @click.native="onClickErrorIcon" class="vux-input-icon" type="warn" :title="!valid ? firstError : ''" v-show="showWarn"></icon>
      <icon @click.native="onClickErrorIcon" class="vux-input-icon" type="warn" v-if="!novalidate && hasLengthEqual && dirty && equalWith && !valid"></icon>

      <icon type="success" v-show="!novalidate && equalWith && equalWith === currentValue && valid"></icon>

      <icon type="success" class="vux-input-icon" v-show="novalidate && iconType === 'success'"></icon>
      <icon type="warn" class="vux-input-icon" v-show="novalidate && iconType === 'error'"></icon>

      <slot name="right"></slot>

        <slot name="right-full-height"></slot>

    <toast
    v-model="showErrorToast"
    type="text"
    width="auto"
    :time="600">{{ firstError }}</toast>

</template>


ui: change scrollable to flase as default

<template>
  <v-dialog
    max-width="600"
    :value="show"
    content-class="core--components--app-modal"
    @click:outside="handleClickOutside"
  >
    <v-sheet class="py-6 px-4 position--relative">
      <v-btn icon class="header-close-icon">
        <v-icon size="x-large" color="grey cursor--pointer" @click="close">
          mdi-close
        </v-icon>
      </v-btn>

      <v-row class="header-container">
        <v-col cols="12" align-self="center">

{{ title }}

        </v-col>
      </v-row>

        <slot name="dialogBody">

This is a test value

        </slot>

      <v-row v-if="!noBtn" class="mt-2" justify="space-around">
        <v-col v-if="!closeOnly" cols="5" class="text-right">
          <mew-button
            btn-style="outline"
            btn-size="xlarge"
            title="Cancel"
            @click.native="close"
          />
        </v-col>
        <v-col v-if="!closeOnly" cols="7" class="text-left">
          <mew-button
            btn-size="xlarge"
            :title="btnText"
            :disabled="!btnEnabled"
            @click.native="btnAction"
          />
        </v-col>
        <v-col v-if="closeOnly" cols="12" class="text-left">
          <mew-button
            btn-size="xlarge"
            title="Close"
            :has-full-width="true"
            @click.native="close"
          />
        </v-col>
      </v-row>
    </v-sheet>
  </v-dialog>
</template>


storage: VMware storage capabilities fixes (#580)

Co-authored-by: Pearl Dsilva <a7e572d3431fc2fd354c398908bac1714980160b@shapeblue.com>
Signed-off-by: Rohit Yadav <902b9eb5dd62819678163bd5e00fbf0cbc7c264b@shapeblue.com>

// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.

<template>

           { this.scope = val }">
             {{ $t('label.clusterid') }}
             {{ $t('label.zoneid') }}

             this.selectedHypervisor = val">

                {{ hypervisor }}

          <a-select
            v-decorator="['zone', { initialValue: this.zoneSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
            @change="val => changeZone(val)">

              {{ zone.name }}

            <a-select
              v-decorator="['pod', { initialValue: this.podSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
              @change="val => changePod(val)">

                {{ pod.name }}

            <a-select
              v-decorator="['cluster', { initialValue: this.clusterSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
              @change="val => fetchHypervisor(val)">

                {{ cluster.name }}

            <a-select
              v-decorator="['host', { initialValue: this.hostSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
              @change="val => this.hostSelected = val">

                {{ host.name }}

          <a-input v-decorator="['name', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>

          <a-select
            v-decorator="['protocol', { initialValue: this.protocols[0], rules: [{ required: true, message: `${$t('label.required')}`}] }]"
            @change="val => this.protocolSelected = val">

              {{ protocol }}

            <a-input v-decorator="['server', { rules: [{ required: true, message: `${$t('label.required')}` }] }]" />

            <a-input v-decorator="['path', { rules: [{ required: true, message: `${$t('label.required')}` }] }]" />

            <a-input v-decorator="['smbUsername', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>

            <a-input-password v-decorator="['smbPassword', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>

            <a-input v-decorator="['smbDomain', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>

            <a-input v-decorator="['iqn', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>

            <a-input v-decorator="['lun', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>

            <a-input v-decorator="['vCenterDataCenter', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>

            <a-input v-decorator="['vCenterDataStore', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>

          <a-select
            v-decorator="['provider', { initialValue: providerSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
            @change="val => this.providerSelected = val">

              {{ provider }}

            <a-input v-decorator="['volumegroup', { rules: [{ required: true, message: `${$t('label.required')}`}] }]" />

            {{ tag.name }}

        {{ $t('label.cancel') }}
        {{ $t('label.ok') }}

</template>


Remove duplicated keys

Remove duplicated keys

<template>

    <template v-if="showRecentOnly">

{{ $tr('recentTitle') }}

{{ $tr('showingRecent', { threshold }) }}

{{ $tr('noRecent', { threshold }) }}

    </template>
    <template v-else>

{{ $tr('topicsTitle') }}

{{ $tr('noChannels') }}

    </template>
    <core-table
      v-if="standardDataTable.length"
      :caption="$tr('channelList')"
    >

            <content-icon :kind="CHANNEL" />

          <name-cell
            :kind="CHANNEL"
            :title="channel.title"
            :link="reportLink(channel.id)"
          />
          <activity-cell :date="channel.lastActive" />

    </core-table>

</template>

<template>

    <template v-if="showRecentOnly">

{{ $tr('recentTitle') }}

{{ $tr('showingRecent', { threshold }) }}

{{ $tr('noRecent', { threshold }) }}

    </template>
    <template v-else>

{{ $tr('topicsTitle') }}

{{ $tr('noChannels') }}

    </template>
    <core-table
      v-if="standardDataTable.length"
      :caption="$tr('channelList')"
    >

        <template v-for="channel in standardDataTable">

              <content-icon :kind="CHANNEL" />

            <name-cell
              :kind="CHANNEL"
              :title="channel.title"
              :link="reportLink(channel.id)"
              :key="channel.id"
            />
            <activity-cell
              :date="channel.lastActive"
              :key="channel.id"
            />

        </template>

    </core-table>

</template>


Fix routing

Fix routing

<template>

{{ $t('title') }}

{{ $t('sub-title') }}

		<form-button primary round @click="match">{{ $t('invite') }}</form-button>

			{{ $t('rule') }}

{{ $t('rule-desc') }}

{{ $t('mode-invite') }}

{{ $t('mode-invite-desc') }}

 0">

{{ $t('invitations') }}

			<mk-avatar class="avatar" :user="i.parent"/>
			<mk-user-name :user="i.parent"/>
			@{{ i.parent.username }}
			<mk-time :time="i.createdAt"/>

 0">

{{ $t('my-games') }}

		<a class="game" v-for="g in myGames" tabindex="-1" @click.prevent="go(g)" :href="`/reversi/${g.id}`">
			<mk-avatar class="avatar" :user="g.user1"/>
			<mk-avatar class="avatar" :user="g.user2"/>
			<mk-user-name :user="g.user1"/> vs <mk-user-name :user="g.user2"/>
			{{ g.isEnded ? $t('game-state.ended') : $t('game-state.playing') }}
			<mk-time :time="g.createdAt" />

 0">

{{ $t('all-games') }}

		<a class="game" v-for="g in games" tabindex="-1" @click.prevent="go(g)" :href="`/games/reversi/${g.id}`">
			<mk-avatar class="avatar" :user="g.user1"/>
			<mk-avatar class="avatar" :user="g.user2"/>
			<mk-user-name :user="g.user1"/> vs <mk-user-name :user="g.user2"/>
			{{ g.isEnded ? $t('game-state.ended') : $t('game-state.playing') }}
			<mk-time :time="g.createdAt" />

</template>

<template>

{{ $t('title') }}

{{ $t('sub-title') }}

		<form-button primary round @click="match">{{ $t('invite') }}</form-button>

			{{ $t('rule') }}

{{ $t('rule-desc') }}

{{ $t('mode-invite') }}

{{ $t('mode-invite-desc') }}

 0">

{{ $t('invitations') }}

			<mk-avatar class="avatar" :user="i.parent"/>
			<mk-user-name :user="i.parent"/>
			@{{ i.parent.username }}
			<mk-time :time="i.createdAt"/>

 0">

{{ $t('my-games') }}

		<a class="game" v-for="g in myGames" tabindex="-1" @click.prevent="go(g)" :href="`/reversi/${g.id}`">
			<mk-avatar class="avatar" :user="g.user1"/>
			<mk-avatar class="avatar" :user="g.user2"/>
			<mk-user-name :user="g.user1"/> vs <mk-user-name :user="g.user2"/>
			{{ g.isEnded ? $t('game-state.ended') : $t('game-state.playing') }}
			<mk-time :time="g.createdAt" />

 0">

{{ $t('all-games') }}

		<a class="game" v-for="g in games" tabindex="-1" @click.prevent="go(g)" :href="`/reversi/${g.id}`">
			<mk-avatar class="avatar" :user="g.user1"/>
			<mk-avatar class="avatar" :user="g.user2"/>
			<mk-user-name :user="g.user1"/> vs <mk-user-name :user="g.user2"/>
			{{ g.isEnded ? $t('game-state.ended') : $t('game-state.playing') }}
			<mk-time :time="g.createdAt" />

</template>


update

update

<template>
    <mor-tip
        :_uiid="uiid"
        :class="[colorClass]"

        :target="target"
        :placement="placement"
        :offset="offset"
        :trigger="trigger"
    >

        <template v-if="!$slots.default">
            {{data.title}}
        </template>
        <template v-else>
            <slot></slot>
        </template>

    </mor-tip>
</template>


simplify syntax

simplify syntax

<template>

      <fieldset id="summary_fieldset" class="detail-section mb-3">
        <legend>
          Well Summary

            <router-link v-if="show.edit" :to="{ name: 'SubmissionsEdit', params: { id: $route.params.id } }" class="mr-3">
              <button class="btn btn-primary mb-1">Edit</button>
            </router-link>

        </legend>

          Well Tag Number: {{ well.well_tag_number }}
          Well Status: {{ well.well_status }}
          Observation Well Number:
            <a
              v-if="well.observation_well_number"
              id="obs_well_number"
              :href="`https://governmentofbc.maps.arcgis.com/apps/webappviewer/index.html?id=b53cb0bf3f6848e79d66ffd09b74f00d&find=OBS%20WELL%20${well.observation_well_number}`"
            >
              {{ well.observation_well_number }}

          Well Identification Plate Number: {{ well.identification_plate_number }}
          Well Class: {{ well.well_class }}
          Observation Well Status: {{ well.observation_well_status }}

          Owner Name: {{ well.owner_full_name }}
          Well Subclass: {{ well.subclass }}
          Environmental Monitoring System (EMS) ID: {{ well.ems || well.ems_id }}

          Licensed Status: {{ well.licenced_status }}
          Intended Water Use: {{ well.intended_water_use }}
          Aquifer Number:
            <router-link :to="{ name: 'aquifers-view', params: { id: well.aquifer } }">
              {{ well.aquifer }}
            </router-link>

          Alternative specs submitted (if required): {{ well.alternative_specs_submitted }}

      </fieldset>

      <fieldset id="jump_links_fieldset" class="d-print-none detail-section my-3">
          <legend>Sections</legend>

Location Information

Well Activity

Well Completion Data and Artesian Flow

Lithology

Casing Details

Surface Seal and Backfill Details

Liner Details

Screen Details

Well Development

Well Yield

Well Decommissioning

Comments

Documentation

Disclaimer

      </fieldset>

      <fieldset id="location_information_fieldset" class="my-3 detail-section">
        <legend>Location Information</legend>

              Street Address: {{ well.street_address }}

              Town/City: {{ well.city }}

Legal Description:

                        Lot
                        {{ well.legal_lot }}

                        Plan
                        {{ well.legal_plan }}

                        District Lot
                        {{ well.legal_district_lot }}

                        Block
                        {{ well.legal_block }}

                        Section
                        {{ well.legal_section }}

                        Township
                        {{ well.legal_township }}

                        Range
                        {{ well.legal_range }}

                        Land District
                        {{ well.land_district }}

                        Property Identification Description (PID)
                        {{ well.legal_pid }}

                    Description of Well Location: {{ well.well_location_description }}

              <single-well-map :latitude="Number(well.latitude)" :longitude="Number(well.longitude)" :draggable="false"></single-well-map>

Geographic Coordinates - North American Datum of 1983 (NAD 83)

              Latitude: {{well.latitude}}
              Longitude: {{well.longitude}}

              UTM Easting: {{ UTM.easting ? Math.round(UTM.easting) : ''}}
              UTM Northing: {{ UTM.northing ? Math.round(UTM.northing) : ''}}

              Zone: {{UTM.zone}}
              Location Accuracy Code: {{well.location_accuracy_code}}

      </fieldset>

      <fieldset id="well_activity_fieldset" class="my-3 detail-section">
        <legend>Well Activity</legend>

      </fieldset>

      <fieldset id="well_completion_data_fieldset" class="my-3 detail-section">
        <legend>Well Completion Data</legend>

          Total Depth Drilled: {{ well.total_depth_drilled }} {{ well.total_depth_drilled ? 'feet':''}}
          Static Water Level (BTOC): {{ well.static_water_level }} {{ well.static_water_level ? 'feet': ''}}
          Well Cap: {{ well.well_cap_type }}

          Finished Well Depth: {{ well.finished_well_depth }} {{ well.finished_well_depth ? 'feet':''}}
          Estimated Well Yield: {{ well.well_yield }} {{ well.well_yield ? 'USGPM': ''}}
          Well Disinfected: {{ well.well_disinfected }}

          Final Casing Stick Up: {{ well.final_casing_stick_up }} {{ well.final_casing_stick_up ? 'inches':''}}
          Artesian Flow: {{ well.artesian_flow }} {{ well.artesian_flow ? 'USGPM': ''}}
          Drilling Method: {{ well.method_of_drilling }}

          Depth to Bedrock: {{ well.bedrock_depth }} {{ well.bedrock_depth ? 'feet':''}}
          Artesian Pressure: {{ well.artesian_pressure }} {{ well.artesian_pressure ? 'feet': ''}}
          Orientation of Well: {{ well.well_orientation }}

          Ground elevation: {{ well.ground_elevation }}
          Method of determining elevation: {{ well.ground_elevation_method }}

      </fieldset>

      <fieldset id="lithology_fieldset" class="my-3 detail-section">
        <legend>Lithology</legend>

      </fieldset>

      <fieldset id="casing_fieldset" class="my-3 detail-section">
        <legend>Casing Details</legend>

            <template slot="from" slot-scope="data">{{data.item.start}}</template>
            <template slot="HEAD_from" slot-scope="data">{{ data.label }} (ft)</template>
            <template slot="to" slot-scope="data">{{data.item.end}}</template>
            <template slot="HEAD_to" slot-scope="data">{{ data.label }} (ft)</template>
            <template slot="casing_type" slot-scope="data">{{codeToDescription('casing_codes', data.item.casing_code)}}</template>
            <template slot="casing_material" slot-scope="data">{{codeToDescription('casing_materials', data.item.casing_material)}}</template>

      </fieldset>

      <fieldset id="surface_seal_fieldset" class="my-3 detail-section">
        <legend>Surface Seal and Backfill Details</legend>

          Surface Seal Material: {{ codeToDescription('surface_seal_materials', well.surface_seal_material) }}
          Backfill Material Above Surface Seal: {{ codeToDescription('surface_seal_materials', well.backfill_above_surface_seal) }}

          Surface Seal Installation Method: {{ codeToDescription('surface_seal_methods', well.surface_seal_method) }}
          Backfill Depth: {{ well.backfill_depth }}

          Surface Seal Thickness: {{ well.surface_seal_thickness }}

          Surface Seal Depth: {{ well.surface_seal_depth }}

      </fieldset>

      <fieldset id="liner_details_fieldset" class="my-3 detail-section">
        <legend>Liner Details</legend>

              Liner Material: {{ codeToDescription('liner_materials', well.liner_material) }}

              Liner Diameter: {{ well.liner_diameter }}
              Liner Thickness: {{ well.liner_thickness }}

              Liner from: {{ well.liner_from }}
              Liner to: {{ well.liner_to }}

Liner perforations

              <template slot="from" slot-scope="data">{{data.item.start}} ft</template>
              <template slot="to" slot-scope="data">{{data.item.end}} ft</template>

      </fieldset>

      <fieldset id="screen_details_fieldset" class="my-3 detail-section">
        <legend>Screen Details</legend>

              Intake Method: {{ codeToDescription('screen_intake_methods', well.screen_intake_method) }}

              Type: {{ codeToDescription('screen_types', well.screen_type) }}

              Material: {{ codeToDescription('screen_materials', well.screen_material) }}

              Opening: {{ codeToDescription('screen_openings', well.screen_opening) }}

              Bottom: {{ codeToDescription('screen_bottoms', well.screen_bottom) }}

Installed Screens

              <template slot="from" slot-scope="data">{{data.item.start}} ft</template>
              <template slot="to" slot-scope="data">{{data.item.end}} ft</template>
              <template slot="assembly_type" slot-scope="data">{{codeToDescription('screen_assemblies', data.item.assembly_type)}}</template>

      </fieldset>

      <fieldset id="well_development_fieldset" class="my-3 detail-section">
        <legend>Well Development</legend>

          Developed by: {{ codeToDescription('development_methods', well.development_method) }}
          Development Total Duration: {{ well.development_hours }} {{ well.development_hours ? 'hours':'' }}

      </fieldset>

      <fieldset id="well_yield_fieldset" class="my-3 detail-section">
        <legend>Well Yield</legend>

No well yield data available.

        <div v-for="(productionTest, index) in well.production_data_set" :key="`ProductionDataSet${index}`">

            Estimation Method: {{codeToDescription('yield_estimation_methods', productionTest.yield_estimation_method)}}
            Estimation Rate: {{productionTest.yield_estimation_rate}}
            Estimation Duration: {{productionTest.yield_estimation_duration}}

            Static Water Level Before Test: {{productionTest.static_level}}
            Drawdown: {{productionTest.drawdown}}

            Hydrofracturing Performed: {{productionTest.hydro_fracturing_performed}}
            Increase in Yield Due to Hydrofracturing: {{productionTest.hydro_fracturing_yield_increase}}

      </fieldset>

      <fieldset id="well_decommissioning_fieldset" class="my-3 detail-section">
        <legend>Well Decommission Information</legend>

          Finished Well Depth: {{ well.finished_well_depth }} {{ well.finished_well_depth ? 'feet':''}}
          Sealant Material: {{ well.sealant_material }}

          Reason for Decommission: {{ well.decommission_reason }}
          Backfill Material: {{ well.backfill_material }}

          Method of Decommission: {{ well.decommission_method }}
          Decommission Details: {{ well.decommission_details }}

      </fieldset>

      <fieldset id="well_comments_fieldset" class="my-3 detail-section">
        <legend>Comments</legend>

          {{ well.comments ? well.comments : 'No comments submitted' }}

          Alternative Specs Submitted: {{ well.alternative_specs_submitted === true ? "Yes" : "No" }}

      </fieldset>

      <fieldset id="documents_fieldset" class="detail-section my-3">
        <legend>Documents</legend>
        <documents :well="$route.params.id"></documents>
      </fieldset>

      <fieldset id="disclaimer_fieldset" class="detail-section my-3">
        <legend>Disclaimer</legend>

          The information provided should not be used as a basis for making financial or any other commitments. The Government of British Columbia accepts no liability for the accuracy, availability, suitability, reliability, usability, completeness or timeliness of the data or graphical depictions rendered from the data.

      </fieldset>

</template>

<template>

      <fieldset id="summary_fieldset" class="detail-section mb-3">
        <legend>
          Well Summary

            <router-link v-if="show.edit" :to="{ name: 'SubmissionsEdit', params: { id: $route.params.id } }" class="mr-3">
              <button class="btn btn-primary mb-1">Edit</button>
            </router-link>

        </legend>

          Well Tag Number: {{ well.well_tag_number }}
          Well Status: {{ well.well_status }}
          Observation Well Number:
            <a
              v-if="well.observation_well_number"
              id="obs_well_number"
              :href="`https://governmentofbc.maps.arcgis.com/apps/webappviewer/index.html?id=b53cb0bf3f6848e79d66ffd09b74f00d&find=OBS%20WELL%20${well.observation_well_number}`"
            >
              {{ well.observation_well_number }}

          Well Identification Plate Number: {{ well.identification_plate_number }}
          Well Class: {{ well.well_class }}
          Observation Well Status: {{ well.observation_well_status }}

          Owner Name: {{ well.owner_full_name }}
          Well Subclass: {{ well.subclass }}
          Environmental Monitoring System (EMS) ID: {{ well.ems ? well.ems : well.ems_id }}

          Licensed Status: {{ well.licenced_status }}
          Intended Water Use: {{ well.intended_water_use }}
          Aquifer Number:
            <router-link :to="{ name: 'aquifers-view', params: { id: well.aquifer } }">
              {{ well.aquifer }}
            </router-link>

          Alternative specs submitted (if required): {{ well.alternative_specs_submitted }}

      </fieldset>

      <fieldset id="jump_links_fieldset" class="d-print-none detail-section my-3">
          <legend>Sections</legend>

Location Information

Well Activity

Well Completion Data and Artesian Flow

Lithology

Casing Details

Surface Seal and Backfill Details

Liner Details

Screen Details

Well Development

Well Yield

Well Decommissioning

Comments

Documentation

Disclaimer

      </fieldset>

      <fieldset id="location_information_fieldset" class="my-3 detail-section">
        <legend>Location Information</legend>

              Street Address: {{ well.street_address }}

              Town/City: {{ well.city }}

Legal Description:

                        Lot
                        {{ well.legal_lot }}

                        Plan
                        {{ well.legal_plan }}

                        District Lot
                        {{ well.legal_district_lot }}

                        Block
                        {{ well.legal_block }}

                        Section
                        {{ well.legal_section }}

                        Township
                        {{ well.legal_township }}

                        Range
                        {{ well.legal_range }}

                        Land District
                        {{ well.land_district }}

                        Property Identification Description (PID)
                        {{ well.legal_pid }}

                    Description of Well Location: {{ well.well_location_description }}

              <single-well-map :latitude="Number(well.latitude)" :longitude="Number(well.longitude)" :draggable="false"></single-well-map>

Geographic Coordinates - North American Datum of 1983 (NAD 83)

              Latitude: {{well.latitude}}
              Longitude: {{well.longitude}}

              UTM Easting: {{ UTM.easting ? Math.round(UTM.easting) : ''}}
              UTM Northing: {{ UTM.northing ? Math.round(UTM.northing) : ''}}

              Zone: {{UTM.zone}}
              Location Accuracy Code: {{well.location_accuracy_code}}

      </fieldset>

      <fieldset id="well_activity_fieldset" class="my-3 detail-section">
        <legend>Well Activity</legend>

      </fieldset>

      <fieldset id="well_completion_data_fieldset" class="my-3 detail-section">
        <legend>Well Completion Data</legend>

          Total Depth Drilled: {{ well.total_depth_drilled }} {{ well.total_depth_drilled ? 'feet':''}}
          Static Water Level (BTOC): {{ well.static_water_level }} {{ well.static_water_level ? 'feet': ''}}
          Well Cap: {{ well.well_cap_type }}

          Finished Well Depth: {{ well.finished_well_depth }} {{ well.finished_well_depth ? 'feet':''}}
          Estimated Well Yield: {{ well.well_yield }} {{ well.well_yield ? 'USGPM': ''}}
          Well Disinfected: {{ well.well_disinfected }}

          Final Casing Stick Up: {{ well.final_casing_stick_up }} {{ well.final_casing_stick_up ? 'inches':''}}
          Artesian Flow: {{ well.artesian_flow }} {{ well.artesian_flow ? 'USGPM': ''}}
          Drilling Method: {{ well.method_of_drilling }}

          Depth to Bedrock: {{ well.bedrock_depth }} {{ well.bedrock_depth ? 'feet':''}}
          Artesian Pressure: {{ well.artesian_pressure }} {{ well.artesian_pressure ? 'feet': ''}}
          Orientation of Well: {{ well.well_orientation }}

          Ground elevation: {{ well.ground_elevation }}
          Method of determining elevation: {{ well.ground_elevation_method }}

      </fieldset>

      <fieldset id="lithology_fieldset" class="my-3 detail-section">
        <legend>Lithology</legend>

      </fieldset>

      <fieldset id="casing_fieldset" class="my-3 detail-section">
        <legend>Casing Details</legend>

            <template slot="from" slot-scope="data">{{data.item.start}}</template>
            <template slot="HEAD_from" slot-scope="data">{{ data.label }} (ft)</template>
            <template slot="to" slot-scope="data">{{data.item.end}}</template>
            <template slot="HEAD_to" slot-scope="data">{{ data.label }} (ft)</template>
            <template slot="casing_type" slot-scope="data">{{codeToDescription('casing_codes', data.item.casing_code)}}</template>
            <template slot="casing_material" slot-scope="data">{{codeToDescription('casing_materials', data.item.casing_material)}}</template>

      </fieldset>

      <fieldset id="surface_seal_fieldset" class="my-3 detail-section">
        <legend>Surface Seal and Backfill Details</legend>

          Surface Seal Material: {{ codeToDescription('surface_seal_materials', well.surface_seal_material) }}
          Backfill Material Above Surface Seal: {{ codeToDescription('surface_seal_materials', well.backfill_above_surface_seal) }}

          Surface Seal Installation Method: {{ codeToDescription('surface_seal_methods', well.surface_seal_method) }}
          Backfill Depth: {{ well.backfill_depth }}

          Surface Seal Thickness: {{ well.surface_seal_thickness }}

          Surface Seal Depth: {{ well.surface_seal_depth }}

      </fieldset>

      <fieldset id="liner_details_fieldset" class="my-3 detail-section">
        <legend>Liner Details</legend>

              Liner Material: {{ codeToDescription('liner_materials', well.liner_material) }}

              Liner Diameter: {{ well.liner_diameter }}
              Liner Thickness: {{ well.liner_thickness }}

              Liner from: {{ well.liner_from }}
              Liner to: {{ well.liner_to }}

Liner perforations

              <template slot="from" slot-scope="data">{{data.item.start}} ft</template>
              <template slot="to" slot-scope="data">{{data.item.end}} ft</template>

      </fieldset>

      <fieldset id="screen_details_fieldset" class="my-3 detail-section">
        <legend>Screen Details</legend>

              Intake Method: {{ codeToDescription('screen_intake_methods', well.screen_intake_method) }}

              Type: {{ codeToDescription('screen_types', well.screen_type) }}

              Material: {{ codeToDescription('screen_materials', well.screen_material) }}

              Opening: {{ codeToDescription('screen_openings', well.screen_opening) }}

              Bottom: {{ codeToDescription('screen_bottoms', well.screen_bottom) }}

Installed Screens

              <template slot="from" slot-scope="data">{{data.item.start}} ft</template>
              <template slot="to" slot-scope="data">{{data.item.end}} ft</template>
              <template slot="assembly_type" slot-scope="data">{{codeToDescription('screen_assemblies', data.item.assembly_type)}}</template>

      </fieldset>

      <fieldset id="well_development_fieldset" class="my-3 detail-section">
        <legend>Well Development</legend>

          Developed by: {{ codeToDescription('development_methods', well.development_method) }}
          Development Total Duration: {{ well.development_hours }} {{ well.development_hours ? 'hours':'' }}

      </fieldset>

      <fieldset id="well_yield_fieldset" class="my-3 detail-section">
        <legend>Well Yield</legend>

No well yield data available.

        <div v-for="(productionTest, index) in well.production_data_set" :key="`ProductionDataSet${index}`">

            Estimation Method: {{codeToDescription('yield_estimation_methods', productionTest.yield_estimation_method)}}
            Estimation Rate: {{productionTest.yield_estimation_rate}}
            Estimation Duration: {{productionTest.yield_estimation_duration}}

            Static Water Level Before Test: {{productionTest.static_level}}
            Drawdown: {{productionTest.drawdown}}

            Hydrofracturing Performed: {{productionTest.hydro_fracturing_performed}}
            Increase in Yield Due to Hydrofracturing: {{productionTest.hydro_fracturing_yield_increase}}

      </fieldset>

      <fieldset id="well_decommissioning_fieldset" class="my-3 detail-section">
        <legend>Well Decommission Information</legend>

          Finished Well Depth: {{ well.finished_well_depth }} {{ well.finished_well_depth ? 'feet':''}}
          Sealant Material: {{ well.sealant_material }}

          Reason for Decommission: {{ well.decommission_reason }}
          Backfill Material: {{ well.backfill_material }}

          Method of Decommission: {{ well.decommission_method }}
          Decommission Details: {{ well.decommission_details }}

      </fieldset>

      <fieldset id="well_comments_fieldset" class="my-3 detail-section">
        <legend>Comments</legend>

          {{ well.comments ? well.comments : 'No comments submitted' }}

          Alternative Specs Submitted: {{ well.alternative_specs_submitted === true ? "Yes" : "No" }}

      </fieldset>

      <fieldset id="documents_fieldset" class="detail-section my-3">
        <legend>Documents</legend>
        <documents :well="$route.params.id"></documents>
      </fieldset>

      <fieldset id="disclaimer_fieldset" class="detail-section my-3">
        <legend>Disclaimer</legend>

          The information provided should not be used as a basis for making financial or any other commitments. The Government of British Columbia accepts no liability for the accuracy, availability, suitability, reliability, usability, completeness or timeliness of the data or graphical depictions rendered from the data.

      </fieldset>

</template>


Sedonc part of moving store properties in methods to computed properties

<template>

        <breadcrumbs
          :routes="[{name: 'Homepage', route_link: '/'}]"
          :active-route="this.$t('Order confirmation')"
        />

          {{ $t('Order confirmation') }}

              {{ $t('Your purchase') }}

            <p v-if="OnlineOnly" v-html="this.$t('You have successfuly placed the order. You can check status of your order by using our delivery status feature. You will receive an order confirmation e-mail with details of your order and a link to track its progress.')" />
            <p v-if="OnlineOnly" v-html="this.$t('E-mail us at demo@vuestorefront.io with any questions, suggestions how we could improve products or shopping experience')"/>

              {{ $t('You are offline') }}

              {{ $t('To finish the order just come back to our store while online. Your order will be sent to the server as soon as you come back here while online and then confirmed regarding the stock quantities of selected items') }}

              {{ $t("You can allow us to remind you about the order via push notification after coming back online. You'll only need to click on it to confirm.") }}

              {{ $t('You will receive Push notification after coming back online. You can confirm the order by clicking on it') }}

              <button-outline color="dark" @click.native="requestNotificationPermission()" >
                {{ $t('Allow notification about the order') }}
              </button-outline>

              {{ $t('Your Account') }}

            <p v-html="this.$t('You can log to your account using e-mail and password defined earlier. On your account you can edit your profile data, check history of transactions, edit subscription to newsletter.')"/>

              {{ $t('What we can improve?') }}

              {{ $t('Your feedback is important fo us. Let us know what we could improve.') }}

            <form @submit.prevent="sendFeedback">
              <base-textarea
                class="mb25"
                type="text"
                name="body"
                v-model="feedback"
                :placeholder="$t('Type your opinion')"
                :autofocus="true"
              />
              <button-outline color="dark">
                {{ $t('Give a feedback') }}
              </button-outline>
            </form>

</template>


fix denominator for proposal

fix denominator for proposal

<style lang="sass">
@import '@/css/variables.scss'

.poll-proposal-chart-panel__chart-container
  display: flex

.poll-proposal-chart-panel__label
  border-width: 2px
  border-bottom-style: solid

.poll-proposal-chart-panel__legend
  margin-left: 16px
  min-width: 80px

.poll-proposal-chart-panel__legend td
  padding-bottom: 10px

.poll-proposal-chart-panel__label--agree
  border-color: $agree-color

.poll-proposal-chart-panel__label--consent
  border-color: $agree-color

.poll-proposal-chart-panel__label--abstain
  border-color: $abstain-color

.poll-proposal-chart-panel__label--disagree
  border-color: $disagree-color

.poll-proposal-chart-panel__label--block
  border-color: $block-color

.poll-proposal-chart-panel__label--objection
  border-color: $block-color

</style>

<script lang="coffee">
import Records from '@/shared/services/records'

export default
  props:
    poll: Object

  data: ->
    pollOptionNames: ['agree', 'consent', 'abstain', 'disagree', 'block', 'objection'].filter (p) => @poll.pollOptionNames.includes(p)

  methods:
    countFor: (name) ->
      @poll.stanceData[name] or 0

    percentFor: (name) ->
      parseInt(parseFloat(@countFor(name)) / parseFloat(@poll.decidedVotersCount) * 100) || 0

    translationFor: (name) ->
      @$t("poll_proposal_options.#{name}")

</script>
<template lang="pug">
.poll-proposal-chart-panel
  v-subheader(v-t="'poll_common.results'")
  .poll-proposal-chart-panel__chart-container
    poll-proposal-chart.poll-proposal-chart-panel__chart(:stance-data="poll.stanceData", :diameter="140")
    table.poll-proposal-chart-panel__legend(role="presentation")
      tbody
        tr(v-for="(name, index) in pollOptionNames" :key="index")
          td
            .poll-proposal-chart-panel__label(:class="'poll-proposal-chart-panel__label--' + name")
              | {{ translationFor(name) }} {{ countFor(name) }} ({{ percentFor(name) }}%)
</template>

<style lang="sass">
@import '@/css/variables.scss'

.poll-proposal-chart-panel__chart-container
  display: flex

.poll-proposal-chart-panel__label
  border-width: 2px
  border-bottom-style: solid

.poll-proposal-chart-panel__legend
  margin-left: 16px
  min-width: 80px

.poll-proposal-chart-panel__legend td
  padding-bottom: 10px

.poll-proposal-chart-panel__label--agree
  border-color: $agree-color

.poll-proposal-chart-panel__label--consent
  border-color: $agree-color

.poll-proposal-chart-panel__label--abstain
  border-color: $abstain-color

.poll-proposal-chart-panel__label--disagree
  border-color: $disagree-color

.poll-proposal-chart-panel__label--block
  border-color: $block-color

.poll-proposal-chart-panel__label--objection
  border-color: $block-color

</style>

<script lang="coffee">
import Records from '@/shared/services/records'

export default
  props:
    poll: Object

  data: ->
    pollOptionNames: ['agree', 'consent', 'abstain', 'disagree', 'block', 'objection'].filter (p) => @poll.pollOptionNames.includes(p)

  methods:
    countFor: (name) ->
      @poll.stanceData[name] or 0

    percentFor: (name) ->
      parseInt(parseFloat(@countFor(name)) / parseFloat(@poll.votersCount) * 100) || 0

    translationFor: (name) ->
      @$t("poll_proposal_options.#{name}")

</script>
<template lang="pug">
.poll-proposal-chart-panel
  v-subheader(v-t="'poll_common.results'")
  .poll-proposal-chart-panel__chart-container
    poll-proposal-chart.poll-proposal-chart-panel__chart(:stance-data="poll.stanceData", :diameter="140")
    table.poll-proposal-chart-panel__legend(role="presentation")
      tbody
        tr(v-for="(name, index) in pollOptionNames" :key="index")
          td
            .poll-proposal-chart-panel__label(:class="'poll-proposal-chart-panel__label--' + name")
              | {{ translationFor(name) }} {{ countFor(name) }} ({{ percentFor(name) }}%)
</template>


feature(board-page): move list data to the store tree

<template>

        #14
        {{card.title}}

Drop files to upload.

</template>


don't pop modal when click battle (#6393)

Co-authored-by: smallst_wsl <6c42689ff77371401bf43b7d56b93ac1ca3e92d3@163.com>

<template lang="pug">
  .table-responsive(:class="{'col-md-6': scoreType=='arena'}")
    div(id="histogram-display-humans", class="histogram-display", data-team-name='humans' v-if="scoreType == 'arena'")
    table.table.table-bordered.table-condensed.table-hover.ladder-table
      thead
        tr
          th(colspan=13)
            span {{ title }}
            span
            span {{ $t('ladder.leaderboard') }}
            span(v-if="playerCount > 1")
              span  -
              span {{ playerCount.toLocaleString() }}
              span  players

        tr
          th(v-for="t in tableTitles" :key="t.slug" :colspan="t.col" :class="computeClass(t.slug)")
            | {{ t.title }}
            span
            span.age-filter(v-if="t.slug == 'age'")
              .glyphicon.glyphicon-filter(@click="toggleAgeFilter")
              #age-filter(:class="{display: ageFilter}")
                .slug(v-for="bracket in ageBrackets" @click="filterAge(bracket.slug)")
                  span {{bracket.name}}

          th.iconic-cell
            .glyphicon.glyphicon-eye-open

      tbody
        tr(v-for="row, rank in rankings" :key="rank" :class="classForRow(row)")
          template(v-if="row.type==='BLANK_ROW'")
            td(colspan=3) ...
          template(v-else)
            td(v-for="item, index in row" :key="'' + rank + index" :colspan="tableTitles[index].col" :style="computeStyle(item, index)" :class="computeClass(tableTitles[index].slug, item)" :title="computeTitle(tableTitles[index].slug, item)" v-html="index != 0 ? computeBody(tableTitles[index].slug, item): ''" @click="onClickUserRow(rank, tableTitles[index].slug)")
            td.spectate-cell.iconic-cell(@click="onClickSpectateCell(rank)")
              .glyphicon(:class="{'glyphicon-eye-open': selectedRow.indexOf(rank) != -1}")

    #load-more.btn.btn-sm(data-i18n='editor.more', @click="loadMore")
</template>

<template lang="pug">
  .table-responsive(:class="{'col-md-6': scoreType=='arena'}")
    div(id="histogram-display-humans", class="histogram-display", data-team-name='humans' v-if="scoreType == 'arena'")
    table.table.table-bordered.table-condensed.table-hover.ladder-table
      thead
        tr
          th(colspan=13)
            span {{ title }}
            span
            span {{ $t('ladder.leaderboard') }}
            span(v-if="playerCount > 1")
              span  -
              span {{ playerCount.toLocaleString() }}
              span  players

        tr
          th(v-for="t in tableTitles" :key="t.slug" :colspan="t.col" :class="computeClass(t.slug)")
            | {{ t.title }}
            span
            span.age-filter(v-if="t.slug == 'age'")
              .glyphicon.glyphicon-filter(@click="toggleAgeFilter")
              #age-filter(:class="{display: ageFilter}")
                .slug(v-for="bracket in ageBrackets" @click="filterAge(bracket.slug)")
                  span {{bracket.name}}

          th.iconic-cell
            .glyphicon.glyphicon-eye-open

      tbody
        tr(v-for="row, rank in rankings" :key="rank" :class="classForRow(row)")
          template(v-if="row.type==='BLANK_ROW'")
            td(colspan=3) ...
          template(v-else)
            td(v-for="item, index in row" :key="'' + rank + index" :colspan="tableTitles[index].col" :style="computeStyle(item, index)" :class="computeClass(tableTitles[index].slug, item)" :title="computeTitle(tableTitles[index].slug, item)" v-html="index != 0 ? computeBody(tableTitles[index].slug, item): ''" @click="onClickUserRow(rank)")
            td.spectate-cell.iconic-cell(@click="onClickSpectateCell(rank)")
              .glyphicon(:class="{'glyphicon-eye-open': selectedRow.indexOf(rank) != -1}")

    #load-more.btn.btn-sm(data-i18n='editor.more', @click="loadMore")
</template>


modal form dropped by 80px for alert message

<template>

          {{modal_title}}

          <hook-app-form ref="form" :form="modal_Form_Data" :submit_resource="resource_urls.submit_resource" :search_resource="resource_urls.search_resource" :form_is_inline="inlined_form"></hook-app-form>

          <button type="button" class="btn btn-danger" v-on:click="closeModal">Close</button>
          <button type="submit" v-on:click="submitForm" :class="['btn', 'btn-primary', {'disabled-button' : !activate_submit_button}]">{{modal_submit_message}}</button>

</template>