@citizenplane/pimp 6.4.0 → 7.0.4

package/src/libs/CoreMultiSelect.vue

@@ -1,618 +0,0 @@
-<template>
-  <div
-    :tabindex="searchable ? -1 : tabindex"
-    :class="{ 'multiselect--active': isOpen, 'multiselect--disabled': disabled, 'multiselect--above': isAbove }"
-    :aria-owns="'listbox-' + id"
-    class="multiselect"
-    role="combobox"
-    @focus="activate()"
-    @blur="searchable ? false : deactivate()"
-    @keydown.self.down.prevent="pointerForward()"
-    @keydown.self.up.prevent="pointerBackward()"
-    @keypress.enter.tab.stop.self="addPointerElement($event)"
-    @keyup.esc="deactivate()"
-  >
-    <slot :toggle="toggle" name="caret">
-      <div class="multiselect__select" @mousedown.prevent.stop="toggle()"></div>
-    </slot>
-    <slot :search="search" name="clear" />
-    <div ref="tags" class="multiselect__tags">
-      <slot :search="search" :remove="removeElement" :values="visibleValues" :is-open="isOpen" name="selection">
-        <template v-if="internalValue && internalValue.length > limit">
-          <slot name="limit">
-            <strong class="multiselect__strong" v-text="limitText(internalValue.length - limit)" />
-          </slot>
-        </template>
-      </slot>
-      <transition name="multiselect__loading">
-        <slot name="loading">
-          <div v-show="loading" class="multiselect__spinner"></div>
-        </slot>
-      </transition>
-      <input
-        v-if="searchable"
-        :id="id"
-        ref="search"
-        :name="name"
-        :placeholder="placeholder"
-        :style="inputStyle"
-        :value="search"
-        :disabled="disabled"
-        :tabindex="tabindex"
-        :aria-controls="'listbox-' + id"
-        class="multiselect__input"
-        type="text"
-        autocomplete="off"
-        spellcheck="false"
-        @input="updateSearch($event.target.value)"
-        @focus.prevent="activate()"
-        @blur.prevent="deactivate()"
-        @keyup.esc="deactivate()"
-        @keydown.down.prevent="pointerForward()"
-        @keydown.up.prevent="pointerBackward()"
-        @keypress.enter.prevent.stop.self="addPointerElement($event)"
-        @keydown.delete.stop="removeLastElement()"
-      />
-      <span v-if="isSingleLabelVisible" class="multiselect__single" @mousedown.prevent="toggle">
-        <slot :option="singleValue" name="singleLabel">
-          {{ currentOptionLabel }}
-        </slot>
-      </span>
-    </div>
-    <transition name="multiselect">
-      <div
-        v-show="isOpen"
-        ref="list"
-        :style="{ maxHeight: optimizedHeight + 'px' }"
-        class="multiselect__content-wrapper"
-        tabindex="-1"
-        @focus="activate"
-        @mousedown.prevent=""
-      >
-        <ul :id="'listbox-' + id" :style="contentStyle" class="multiselect__content" role="listbox">
-          <slot name="beforeList" />
-          <li v-if="multiple && max === internalValue.length">
-            <div class="multiselect__option">
-              <slot name="maxElements">
-                Maximum of {{ max }} options selected. First remove a selected option to select another.
-              </slot>
-            </div>
-          </li>
-          <template v-if="!max || internalValue.length < max">
-            <li
-              v-for="(option, index) of filteredOptions"
-              :id="`${id} - ${index}`"
-              :key="index"
-              :role="!(option && (option.$isLabel || option.$isDisabled)) ? 'option' : null"
-              class="multiselect__element"
-            >
-              <div
-                v-if="!(option && (option.$isLabel || option.$isDisabled))"
-                :class="optionHighlight(index, option)"
-                class="multiselect__option"
-                @click.stop="select(option)"
-                @mouseenter.self="pointerSet(index)"
-              >
-                <slot :option="option" :search="search" name="option">
-                  <span>{{ getOptionLabel(option) }}</span>
-                </slot>
-              </div>
-              <div
-                v-if="option && (option.$isLabel || option.$isDisabled)"
-                :class="groupHighlight(index, option)"
-                class="multiselect__option"
-                @mouseenter.self="groupSelect && pointerSet(index)"
-                @mousedown.prevent="selectGroup(option)"
-              >
-                <slot :option="option" :search="search" name="option">
-                  <span>{{ getOptionLabel(option) }}</span>
-                </slot>
-              </div>
-            </li>
-          </template>
-          <li v-show="showNoResults && filteredOptions.length === 0 && search && !loading">
-            <span class="multiselect__option">
-              <slot :search="search" name="noResult"> No elements found. Consider changing the search query. </slot>
-            </span>
-          </li>
-          <li v-show="showNoOptions && options.length === 0 && !search && !loading">
-            <span class="multiselect__option"><slot name="noOptions">List is empty.</slot></span>
-          </li>
-        </ul>
-      </div>
-    </transition>
-    <div v-if="visibleValues.length > 0" class="multiselect__tags-wrap">
-      <template v-for="(option, index) of visibleValues" @mousedown.prevent="">
-        <slot :option="option" :search="search" :remove="removeElement" name="tag">
-          <span :key="index" class="multiselect__tag">
-            <span v-text="getOptionLabel(option)" />
-            <i
-              class="multiselect__tag-icon"
-              tabindex="1"
-              @keypress.enter.prevent="removeElement(option)"
-              @mousedown.prevent="removeElement(option)"
-            />
-          </span>
-        </slot>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import multiselectMixin from '../helpers/multiselectMixin'
-import pointerMixin from '../helpers/pointerMixin'
-
-export default {
-  name: 'CoreMultiselect',
-  mixins: [multiselectMixin, pointerMixin],
-  props: {
-    /**
-     * name attribute to match optional label element
-     * @default ''
-     * @type {String}
-     */
-    name: {
-      type: String,
-      default: '',
-    },
-    /**
-     * Limit the display of selected options. The rest will be hidden within the limitText string.
-     * @default 99999
-     * @type {Integer}
-     */
-    limit: {
-      type: Number,
-      default: 99999,
-    },
-    /**
-     * Sets maxHeight style value of the dropdown
-     * @default 250
-     * @type {Integer}
-     */
-    maxHeight: {
-      type: Number,
-      default: 250,
-    },
-    /**
-     * Function that process the message shown when selected
-     * elements pass the defined limit.
-     * @default 'and * more'
-     * @param {Int} count Number of elements more than limit
-     * @type {Function}
-     */
-    limitText: {
-      type: Function,
-      default: (count) => `and ${count} more`,
-    },
-    /**
-     * Set true to trigger the loading spinner.
-     * @default False
-     * @type {Boolean}
-     */
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Disables the multiselect if true.
-     * @default false
-     * @type {Boolean}
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Fixed opening direction
-     * @default ''
-     * @type {String}
-     */
-    openDirection: {
-      type: String,
-      default: '',
-    },
-    /**
-     * Shows slot with message about empty options
-     * @default true
-     * @type {Boolean}
-     */
-    showNoOptions: {
-      type: Boolean,
-      default: true,
-    },
-    showNoResults: {
-      type: Boolean,
-      default: true,
-    },
-    tabindex: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    isSingleLabelVisible() {
-      return (
-        (this.singleValue || this.singleValue === 0) && (!this.isOpen || !this.searchable) && !this.visibleValues.length
-      )
-    },
-    visibleValues() {
-      return this.multiple ? this.internalValue.slice(0, this.limit) : []
-    },
-    singleValue() {
-      return this.internalValue[0]
-    },
-    inputStyle() {
-      if (this.searchable || (this.multiple && this.value && this.value.length)) {
-        // Hide input by setting the width to 0 allowing it to receive focus
-        return this.isOpen
-          ? { width: '100%' }
-          : this.taggable
-          ? { margin: 'O' }
-          : { width: '80%', position: 'absolute', padding: '0' }
-      } else {
-        return {}
-      }
-    },
-    contentStyle() {
-      return this.options.length ? { display: 'inline-block' } : { display: 'block' }
-    },
-    isAbove() {
-      if (this.openDirection === 'above' || this.openDirection === 'top') {
-        return true
-      } else if (this.openDirection === 'below' || this.openDirection === 'bottom') {
-        return false
-      } else {
-        return this.preferredOpenDirection === 'above'
-      }
-    },
-  },
-}
-</script>
-
-<style lang="stylus" scoped>
-$mobile = 768px
-
-fieldset[disabled]
-	.multiselect
-		pointer-events none
-
-.multiselect__spinner
-	position absolute
-	width 40px
-	height 40px
-	background $neutral-light
-	display block
-	right 5px
-	top 50%
-	margin-top -20px
-
-	&:before
-		animation spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62)
-		animation-iteration-count infinite
-
-	&:after
-		animation spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8)
-		animation-iteration-count infinite
-
-.multiselect__spinner:before
-	position absolute
-	content ""
-	top 10px
-	left 12px
-	width 20px
-	height 20px
-	border-radius 100%
-	border-color $success-color-light transparent transparent
-	border-style solid
-	border-width 2px
-	box-shadow 0 0 0 1px transparent
-
-.multiselect__loading-enter-active,
-.multiselect__loading-leave-active
-	transition opacity 200ms ease-in-out
-	opacity 1
-
-.multiselect__loading-enter,
-.multiselect__loading-leave-active
-	opacity 0
-
-.multiselect,
-.multiselect__input,
-.multiselect__single
-	font-family inherit
-	font-size 14px
-	touch-action manipulation
-
-.multiselect
-	display block
-	position relative
-	width 100%
-	min-height 40px
-	text-align left
-
-	&:focus
-		outline none
-
-.multiselect--disabled
-	background #ededed
-	pointer-events none
-	opacity 0.6
-
-.multiselect--active
-	z-index 50
-
-	.multiselect__select svg
-		transform rotate(180deg)
-
-	.multiselect__placeholder
-		display none
-
-.multiselect__input,
-.multiselect__single
-	position relative
-	display inline-block
-	min-height 20px
-	line-height 20px
-	border none
-	background $neutral-light
-	padding 0
-	width calc(98%)
-	box-sizing border-box
-
-.multiselect__input
-	&::placeholder
-		color $neutral-dark
-		font-size 14px
-
-.multiselect__tag ~ .multiselect__input,
-.multiselect__tag ~ .multiselect__single
-	width auto
-
-.multiselect__input:hover,
-.multiselect__single:hover
-	border-color #cfcfcf
-
-.multiselect__input:focus,
-.multiselect__single:focus
-	border-color #a8a8a8
-	outline none
-
-.multiselect__single
-	padding 0
-	margin 0
-	color $neutral-dark
-	white-space nowrap
-	text-overflow ellipsis
-	overflow hidden
-
-.multiselect__tags-wrap
-	display block
-	width auto
-	max-width 450px
-	height auto
-	padding-top 5px
-
-	@media (max-width: $mobile)
-		max-width 300px
-
-.multiselect__tags
-	min-height 40px
-	display block
-	cursor pointer
-	padding 0.8rem 20px 0.8rem 0.8rem
-	height 45px
-	border-radius 10px
-	border 1px solid #DCE3E6
-	font-size 14px
-
-.multiselect__tag
-	position relative
-	display inline-block
-	padding 4px 26px 4px 10px
-	border-radius 5px
-	margin-right 10px
-	color $neutral-light
-	line-height 1
-	background $primary-color
-	margin-bottom 5px
-	white-space nowrap
-	overflow hidden
-	max-width 100%
-	text-overflow ellipsis
-
-.multiselect__tag-icon
-	cursor pointer
-	margin-left 7px
-	position absolute
-	right 0
-	top 0
-	bottom 0
-	font-weight 700
-	font-style initial
-	width 22px
-	text-align center
-	line-height 22px
-	transition all 200ms ease
-	border-radius 5px
-
-	&:after
-		content "×"
-		font-size 16px
-		font-weight 500
-
-.multiselect__tag-icon:focus,
-.multiselect__tag-icon:hover
-	background rgba(0, 0, 0, 0.2)
-
-.multiselect__current
-	line-height 16px
-	min-height 40px
-	box-sizing border-box
-	display block
-	overflow hidden
-	padding 8px 12px 0
-	padding-right 30px
-	white-space nowrap
-	margin 0
-	text-decoration none
-	border-radius 5px
-	border 1px solid #e8e8e8
-	cursor pointer
-
-.multiselect__select
-	line-height 16px
-	display block
-	position absolute
-	box-sizing border-box
-	width 40px
-	height 38px
-	right 0px
-	top 4px
-	text-decoration none
-	text-align center
-	cursor pointer
-
-	&:before
-		position absolute
-		width 22px
-		right 0
-		top 0
-		bottom 0
-		content ""
-		background url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM3Njc3N0YiIGQ9Ik0xMC43NjggNS45NjVINS4xNjVjLS44NzIgMC0yLjAwMi4wOTUtLjQzNCAyLjE5OCAxLjU3IDEuOTMzIDIuNTI5IDIuNzg0IDIuNTI5IDIuNzg0LjM5LjM4MyAxLjAyMi4zODMgMS40MTIgMCAwIDAgLjk1OS0uODUyIDIuNTI5LTIuNzg0IDEuNTY5LTIuMTAzLjQzOS0yLjE5OC0uNDMzLTIuMTk4eiIvPjwvc3ZnPg==') no-repeat left center
-		pointer-events none
-
-.multiselect__placeholder
-	color $neutral-dark
-	display inline-block
-	margin-bottom 10px
-	padding-top 2px
-
-.multiselect__content-wrapper
-	position absolute
-	display block
-	background $neutral-light
-	max-height 240px
-	overflow auto
-	border-radius 10px
-	z-index 50
-	-webkit-overflow-scrolling touch
-	width 300px
-
-	@media (min-width: $mobile)
-		margin-top 5px
-		width 450px
-		box-shadow 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2)
-
-.multiselect__content
-	list-style none
-	display inline-block
-	padding 0
-	margin 0
-	min-width 100%
-	vertical-align top
-
-	&::webkit-scrollbar
-		display none
-
-.multiselect--above
-	.multiselect__content-wrapper
-		bottom 100%
-
-		@media (min-width: $mobile)
-			margin-bottom 5px
-
-.multiselect__element
-	display block
-
-.multiselect__option
-	display flex
-	padding 12px
-	color $neutral-dark
-	font-size 16px
-	min-height 40px
-	line-height 16px
-	vertical-align middle
-	position relative
-	cursor pointer
-	white-space nowrap
-
-	&:not(.multiselect__option--group)
-		padding-left 40px
-
-	&:after
-		top 0
-		right 0
-		position absolute
-		line-height 40px
-		padding-right 12px
-		padding-left 20px
-		font-size 13px
-
-.multiselect__option--highlight
-	background rgba($neutral-dark, 0.03)
-
-.multiselect--disabled .multiselect__current,
-.multiselect--disabled .multiselect__select
-	background #ededed
-	color #a6a6a6
-
-.multiselect__option--disabled
-	background #ededed
-	color #a6a6a6
-	cursor text
-	pointer-events none
-
-	&.multiselect__option--highlight
-		background #dedede
-
-.multiselect__option--group
-	background $neutral-light
-	color $neutral-dark
-
-	&.multiselect__option--highlight
-		background rgba($neutral-dark, 0.03)
-
-.multiselect__strong
-	margin-bottom 8px
-	line-height 20px
-	display inline-block
-	vertical-align top
-
-*[dir="rtl"]
-	.multiselect
-		text-align right
-
-	.multiselect__select
-		right auto
-		left 1px
-
-	.multiselect__tags
-		padding 8px 8px 0px 40px
-
-	.multiselect__content
-		text-align right
-
-	.multiselect__option
-		&:after
-			right auto
-			left 0
-
-	.multiselect__clear
-		right auto
-		left 12px
-
-	.multiselect__spinner
-		right auto
-		left 1px
-
-@keyframes spinning {
-  from {
-    transform rotate(0)
-  }
-  to {
-	  transform rotate(2turn)
-  }
-}
-</style>