@icij/murmur-next 4.0.1 → 4.0.3

package/lib/components/ScaleLegend.vue

@@ -1,8 +1,17 @@
 <script lang="ts">
-import {isFunction, isString} from 'lodash'
+import { isFunction, isString } from 'lodash'
 import * as d3 from 'd3'
 import * as scaleFunctions from 'd3-scale'
-import {defineComponent, PropType, ref, computed, onMounted, watch, nextTick, toRef} from 'vue'
+import {
+  defineComponent,
+  PropType,
+  ref,
+  computed,
+  onMounted,
+  watch,
+  nextTick,
+  toRef
+} from 'vue'
 
 type ClassListLegend = { 'scale-legend--has-cursor': boolean }
 // eslint-disable-next-line no-unused-vars
@@ -39,7 +48,9 @@ export default defineComponent({
       type: [Function, String] as PropType<ColorScaleFn | string>,
       default: 'scaleLinear',
       validator(colorScale: ColorScale) {
-        return isFunction(colorScale) || (colorScale as string) in scaleFunctions
+        return (
+          isFunction(colorScale) || (colorScale as string) in scaleFunctions
+        )
       }
     },
     colorScaleEnd: {
@@ -76,7 +87,11 @@ export default defineComponent({
       return isNaN(left) ? '0%' : `${left}%`
     })
     const colorScaleBaseCanvas = computed((): HTMLCanvasElement | null => {
-      return d3.create('canvas').attr('width', props.width).attr('height', props.height).node()
+      return d3
+        .create('canvas')
+        .attr('width', props.width)
+        .attr('height', props.height)
+        .node()
     })
     const colorScaleContext = computed((): CanvasRenderingContext2D | null => {
       return colorScaleBaseCanvas.value?.getContext('2d') ?? null
@@ -97,12 +112,18 @@ export default defineComponent({
       if (isString(props.colorScale)) {
         // @ts-ignore
         const fn: () => any = scaleFunctions[props.colorScale]
-        return fn().domain([props.min, props.max]).range([props.colorScaleStart, props.colorScaleEnd])
+        return fn()
+          .domain([props.min, props.max])
+          .range([props.colorScaleStart, props.colorScaleEnd])
       }
       return props.colorScale
     })
     const cursorLeftScale = computed((): d3.ScaleLinear<number, number> => {
-      return d3.scaleLinear().domain([props.min, props.max]).range([0, 100]).interpolate(d3.interpolateRound)
+      return d3
+        .scaleLinear()
+        .domain([props.min, props.max])
+        .range([0, 100])
+        .interpolate(d3.interpolateRound)
     })
     const widthScaleColor = computed((): WidthScaleFn => {
       return (x: number) => {
@@ -111,7 +132,10 @@ export default defineComponent({
       }
     })
     const widthScale = computed((): d3.ScaleLinear<number, number> => {
-      return d3.scaleLinear().domain([0, props.width]).range([props.min, props.max])
+      return d3
+        .scaleLinear()
+        .domain([0, props.width])
+        .range([props.min, props.max])
     })
 
     const formatNumber = d3.format(',')
@@ -119,8 +143,10 @@ export default defineComponent({
     function setCursorWrapperOffset(): void {
       const cursor = el.value?.querySelector('.scale-legend__cursor')
       if (cursor && el.value) {
-        const {x: cursorX, width: cursorWidth} = cursor.getBoundingClientRect()
-        const {x: legendX, width: legendWidth} = el.value.getBoundingClientRect()
+        const { x: cursorX, width: cursorWidth } =
+          cursor.getBoundingClientRect()
+        const { x: legendX, width: legendWidth } =
+          el.value.getBoundingClientRect()
         const left = legendX - cursorX - 6
         const right = legendX + legendWidth - (cursorX + cursorWidth) + 6
         cursorWrapperOffset.value = Math.max(0, left) || Math.min(0, right)
@@ -139,11 +165,10 @@ export default defineComponent({
       }
     }
 
-    watch(cursorValue,
-        async () => {
-          await nextTick()
-          setCursorWrapperOffset()
-        })
+    watch(cursorValue, async () => {
+      await nextTick()
+      setCursorWrapperOffset()
+    })
 
     return {
       classList,
@@ -155,7 +180,7 @@ export default defineComponent({
       //CD: function below are only uses in unit tests. use callable?
       widthScale,
       colorScaleFunction,
-      widthScaleColor,
+      widthScaleColor
     }
   }
 })
@@ -168,14 +193,27 @@ export default defineComponent({
         {{ formatNumber(min) }}
       </slot>
     </div>
-    <img :height="height" :src="colorScaleBase64" :width="width" class="scale-legend__scale" alt="legend scale"/>
+    <img
+      :height="height"
+      :src="colorScaleBase64"
+      :width="width"
+      class="scale-legend__scale"
+      alt="legend scale"
+    />
     <div class="scale-legend__bound scale-legend__bound--max">
       <slot name="legend-cursor-max" v-bind="{ max }">
         {{ formatNumber(max) }}
       </slot>
     </div>
-    <div v-if="hasCursor" :style="{ left: cursorLeft }" class="scale-legend__cursor">
-      <div :style="{ transform: `translateX(${cursorWrapperOffset}px)` }" class="scale-legend__cursor__wrapper">
+    <div
+      v-if="hasCursor"
+      :style="{ left: cursorLeft }"
+      class="scale-legend__cursor"
+    >
+      <div
+        :style="{ transform: `translateX(${cursorWrapperOffset}px)` }"
+        class="scale-legend__cursor__wrapper"
+      >
         <slot name="cursor" v-bind="{ value: cursorValue }">
           {{ formatNumber(cursorValue) }}
         </slot>

package/lib/components/SecretInput.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons'
 
-import { computed,ref,onBeforeMount, watch,defineComponent} from 'vue'
+import { computed, ref, onBeforeMount, watch, defineComponent } from 'vue'
 import { library, default as Fa } from './Fa'
 import HapticCopy from './HapticCopy.vue'
 
@@ -49,12 +49,12 @@ export default defineComponent({
       type: Boolean
     }
   },
-  emits:['update:visible'],
-  setup(props,{emit}){
-    onBeforeMount(() =>{
+  emits: ['update:visible'],
+  setup(props, { emit }) {
+    onBeforeMount(() => {
       library.add(faEye, faEyeSlash)
     })
-    const secretInput = ref<HTMLInputElement|null>(null)
+    const secretInput = ref<HTMLInputElement | null>(null)
     const inputType = computed(() => {
       return props.visible ? 'text' : 'password'
     })
@@ -62,10 +62,9 @@ export default defineComponent({
       return props.visible ? ['far', 'eye-slash'] : ['far', 'eye']
     })
     const hapticCopyClassList = computed(() => {
-          return `btn-${props.hapticCopyVariant}`
+      return `btn-${props.hapticCopyVariant}`
     })
 
-
     function toggle() {
       /**
        * Emitted when the visibility of the input changes.
@@ -73,7 +72,7 @@ export default defineComponent({
        * @event update:visible
        * @type {Boolean}
        */
-      emit("update:visible", !props.visible)
+      emit('update:visible', !props.visible)
     }
     function selectInput() {
       if (props.visible) {

package/lib/components/SelectableDropdown.vue

@@ -10,12 +10,20 @@ import { faCheckSquare, faSquare } from '@fortawesome/free-regular-svg-icons'
 import { RecycleScroller } from 'vue-virtual-scroller'
 
 import Fa from './Fa'
-import {defineComponent, ref, computed, watch, onMounted, onUnmounted,PropType } from 'vue'
+import {
+  defineComponent,
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onUnmounted,
+  PropType
+} from 'vue'
 
 const KEY_ESC_CODE = 27
 const KEY_UP_CODE = 38
 const KEY_DOWN_CODE = 40
-type Item = any;
+type Item = any
 export default defineComponent({
   name: 'SelectableDropdown',
   components: {
@@ -108,74 +116,90 @@ export default defineComponent({
       default: 'inherit'
     }
   },
-  emits:['click','update:modelValue', 'deactivate'],
-  setup(props,{emit}){
-    onMounted(()=> {
+  emits: ['click', 'update:modelValue', 'deactivate'],
+  setup(props, { emit }) {
+    onMounted(() => {
       activateItemOrItems()
       toggleKeys()
     })
     onUnmounted(() => {
       unbindKeys()
     })
-    const scroller=ref(null)
-    const activeItems =  ref<Item[]>([])
-    const cssProps = computed(()=>{
+    const scroller = ref(null)
+    const activeItems = ref<Item[]>([])
+    const cssProps = computed(() => {
       return {
         '--scroller-height': props.scrollerHeight
       }
     })
-    const keyField = computed(()=>{
+    const keyField = computed(() => {
       return typeof items_.value[0] === 'string' ? null : 'recycle_scroller_id'
     })
-    const items_ = computed(():Item[]=>{
+    const items_ = computed((): Item[] => {
       if (typeof props.items[0] === 'string') {
         return props.items
       }
-      return props.items.map((item:Item) => ({ ...item, recycle_scroller_id: `id-${uniqueId()}` }))
+      return props.items.map((item: Item) => ({
+        ...item,
+        recycle_scroller_id: `id-${uniqueId()}`
+      }))
     })
-    const firstActiveItemIndex = computed(()=>{
-      return activeItems.value.length ? items_.value.indexOf(activeItems.value[0]) : -1
+    const firstActiveItemIndex = computed(() => {
+      return activeItems.value.length
+        ? items_.value.indexOf(activeItems.value[0])
+        : -1
     })
-    const lastActiveItemIndex = computed(()=>{
-      return activeItems.value.length ? items_.value.indexOf(activeItems.value.slice(-1)) : -1
+    const lastActiveItemIndex = computed(() => {
+      return activeItems.value.length
+        ? items_.value.indexOf(activeItems.value.slice(-1))
+        : -1
     })
-    const keysMap = computed(():{[key:string]:Function }=>{
-          return {
-            [KEY_UP_CODE]: activatePreviousItem,
-            [KEY_DOWN_CODE]: activateNextItem,
-            [KEY_ESC_CODE]: deactivateItems
-          }
-        }
-    )
-    watch(()=>props.hide,()=> {
-      toggleKeys()
-    })
-    watch(()=>activeItems.value,
-        ()=> {
-      /**
-       * Fired when the selected value change. It will pass a canonical value
-       * or an array of values if the property `multiple` is set to true.
-       *
-       * @event input
-       * @type {String, Object, Array, Number}
-       */
-      emit('update:modelValue', props.multiple ? activeItems.value : activeItems.value[0])
+    const keysMap = computed((): { [key: string]: Function } => {
+      return {
+        [KEY_UP_CODE]: activatePreviousItem,
+        [KEY_DOWN_CODE]: activateNextItem,
+        [KEY_ESC_CODE]: deactivateItems
+      }
     })
-    watch(()=>props.modelValue,
-        (itemOrItems)=>{
-      const items = castArray(itemOrItems)
-      if (!isEqual(activeItems.value, items)) {
-        activateItemOrItems(items)
+    watch(
+      () => props.hide,
+      () => {
+        toggleKeys()
+      }
+    )
+    watch(
+      () => activeItems.value,
+      () => {
+        /**
+         * Fired when the selected value change. It will pass a canonical value
+         * or an array of values if the property `multiple` is set to true.
+         *
+         * @event input
+         * @type {String, Object, Array, Number}
+         */
+        emit(
+          'update:modelValue',
+          props.multiple ? activeItems.value : activeItems.value[0]
+        )
       }
+    )
+    watch(
+      () => props.modelValue,
+      (itemOrItems) => {
+        const items = castArray(itemOrItems)
+        if (!isEqual(activeItems.value, items)) {
+          activateItemOrItems(items)
+        }
       },
-        {deep: true})
-    function indexIcon(item:Item){
+      { deep: true }
+    )
+    function indexIcon(item: Item) {
       return itemActivated(item) ? faCheckSquare : faSquare
     }
-    function itemActivated(item:Item) {
+    function itemActivated(item: Item) {
       return findIndex(activeItems.value, (i) => props.eq(item, i)) > -1
     }
-    function clickToSelectItem(item:Item) {
+    function clickToSelectItem(item: Item) {
       /**
        * Fired when user click on an item
        *
@@ -189,7 +213,7 @@ export default defineComponent({
         selectItem(item)
       }
     }
-    function clickToAddItem(item:Item) {
+    function clickToAddItem(item: Item) {
       /**
        * Fired when user click on an item
        *
@@ -199,7 +223,7 @@ export default defineComponent({
       emit('click', item)
       addItem(item)
     }
-    function clickToSelectRangeToItem(item:Item) {
+    function clickToSelectRangeToItem(item: Item) {
       /**
        * Fired when user click on an item
        *
@@ -209,33 +233,42 @@ export default defineComponent({
       emit('click', item)
       selectRangeToItem(item)
     }
-    function emitEventOnItem(name:"click" | "update:modelValue" | "deactivate", item:Item) {
+    function emitEventOnItem(
+      name: 'click' | 'update:modelValue' | 'deactivate',
+      item: Item
+    ) {
       emit(name, item)
     }
-    function selectItem(item:Item) {
+    function selectItem(item: Item) {
       if (itemActivated(item) && activeItems.value.length === 1) {
         activeItems.value = filter(activeItems.value, (i) => !props.eq(item, i))
       } else {
         activeItems.value = [item]
       }
     }
-    function addItem(item:Item) {
+    function addItem(item: Item) {
       if (itemActivated(item)) {
         activeItems.value = filter(activeItems.value, (i) => !props.eq(item, i))
       } else {
         activeItems.value.push(item)
       }
     }
-    function selectRangeToItem(item:Item) {
+    function selectRangeToItem(item: Item) {
       // No activated items
       if (!activeItems.value.length || !props.multiple) {
         selectItem(item)
       } else {
         const index = items_.value.indexOf(item)
         if (index > firstActiveItemIndex.value) {
-          activeItems.value = items_.value.slice(firstActiveItemIndex.value, index + 1)
+          activeItems.value = items_.value.slice(
+            firstActiveItemIndex.value,
+            index + 1
+          )
         } else {
-          activeItems.value = items_.value.slice(index, firstActiveItemIndex.value + 1)
+          activeItems.value = items_.value.slice(
+            index,
+            firstActiveItemIndex.value + 1
+          )
         }
       }
     }
@@ -244,10 +277,16 @@ export default defineComponent({
       activeItems.value = [...items]
     }
     function activatePreviousItem() {
-      activeItems.value = [items_.value[Math.max(firstActiveItemIndex.value - 1, -1)]]
+      activeItems.value = [
+        items_.value[Math.max(firstActiveItemIndex.value - 1, -1)]
+      ]
     }
     function activateNextItem() {
-      activeItems.value = [items_.value[Math.min(firstActiveItemIndex.value + 1, items_.value.length - 1)]]
+      activeItems.value = [
+        items_.value[
+          Math.min(firstActiveItemIndex.value + 1, items_.value.length - 1)
+        ]
+      ]
     }
     function deactivateItems() {
       activeItems.value = []
@@ -258,7 +297,7 @@ export default defineComponent({
        */
       emit('deactivate')
     }
-    function keyDown(event:KeyboardEvent) {
+    function keyDown(event: KeyboardEvent) {
       const keyCode = event.keyCode || event.which
       // The dropdown must be active
       if (props.deactivateKeys || props.hide || !isKnownKey(keyCode)) return
@@ -270,7 +309,7 @@ export default defineComponent({
       // Then call the right method
       keysMap.value[keyCode]()
     }
-    function isKnownKey(keycode:number) {
+    function isKnownKey(keycode: number) {
       return Object.keys(keysMap.value).map(Number).indexOf(keycode) > -1
     }
     function unbindKeys() {
@@ -286,7 +325,7 @@ export default defineComponent({
         bindKeys()
       }
     }
-    function itemId(item:Item){
+    function itemId(item: Item) {
       return `dropdown-item-${item.recycle_scroller_id ?? item.toLowerCase()}`
     }
 
@@ -310,32 +349,38 @@ export default defineComponent({
 
 <template>
   <div
-      v-if="!hide"
-      class="selectable-dropdown show"
-      :class="{ 'selectable-dropdown--multiple': multiple, [listClass]: true }"
+    v-if="!hide"
+    class="selectable-dropdown show"
+    :class="{ 'selectable-dropdown--multiple': multiple, [listClass]: true }"
   >
     <recycle-scroller
-        v-slot="{ item, active }"
-        :style="cssProps"
-        class="scroller"
-        :items="items_"
-        :key-field="keyField"
-        :item-size="itemSize"
+      v-slot="{ item, active }"
+      :style="cssProps"
+      class="scroller"
+      :items="items_"
+      :key-field="keyField"
+      :item-size="itemSize"
     >
       <span
-          :id="itemId(item)"
-          :class="{ 'recycle_scroller-item--active': active, active: itemActivated(item), [itemClass]: true }"
-          class="selectable-dropdown__item px-3 d-flex"
-          @click.exact="clickToSelectItem(item)"
-          @click.ctrl="clickToAddItem(item)"
-          @click.shift="clickToSelectRangeToItem(item)"
+        :id="itemId(item)"
+        :class="{
+          'recycle_scroller-item--active': active,
+          active: itemActivated(item),
+          [itemClass]: true
+        }"
+        class="selectable-dropdown__item px-3 d-flex"
+        @click.exact="clickToSelectItem(item)"
+        @click.ctrl="clickToAddItem(item)"
+        @click.shift="clickToSelectRangeToItem(item)"
       >
         <!-- @slot Item content -->
         <slot name="item" :item="item">
           <div v-if="multiple" class="selectable-dropdown__item__check">
             <fa :icon="indexIcon(item)" class="me-2" />
           </div>
-          <div class="flex-grow-1 text-truncate selectable-dropdown__item__label">
+          <div
+            class="flex-grow-1 text-truncate selectable-dropdown__item__label"
+          >
             <!-- @slot Item's label content -->
             <slot name="item-label" :item="item">
               {{ serializer(item) }}