@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/components/BaseSelect/BaseSelect.vue

@@ -1,443 +0,0 @@
-<template>
-  <BaseDropdownMenu
-    ref="dropdown"
-    :theme="theme"
-    :popper-class="popperClass + ' select-popper ios-fix-height'"
-    :disabled="disabled"
-    :class="{
-      'has-value': displayedLabel.hasValue,
-    }"
-    class="base-select"
-    :search-enabled="searchEnabled"
-    :search-throttle="200"
-    :search-placeholder="searchPlaceholder || i18n.t('general_form_multiselect-search')"
-    :scrollable="scrollable"
-    @show="onShow"
-    @hide="onHide"
-    @apply-show="onApplyShow"
-    @update:search="e => search = e"
-    @search:enter="selectFirstResult(hide)"
-  >
-    <template #default="{ shown }">
-      <div
-        ref="toggle"
-        class="select-toggle"
-      >
-        <slot
-          :loading="loading"
-          :value="modelValue"
-          :label="finalLabel"
-          :disabled="disabled"
-          :is-shown="shown"
-          name="toggle"
-        >
-          <BaseButton
-            class="w-full justify-start"
-            :class="[
-              buttonClass,
-              { 'active': shown },
-            ]"
-            :disabled="disabled"
-            :icon="icon"
-            icon-right="i-ls-chevron-down"
-            :loading="loading"
-            type="button"
-          >
-            <slot
-              :loading="loading"
-              :value="modelValue"
-              :label="finalLabel"
-              name="toggle-button"
-            >
-              {{ finalLabel }}
-            </slot>
-          </BaseButton>
-        </slot>
-      </div>
-    </template>
-
-    <template #header>
-      <slot name="header" />
-    </template>
-
-    <template #header-with-search-additional-block>
-      <slot name="header-with-search-additional-block" />
-    </template>
-
-    <template #footer>
-      <slot name="footer" />
-    </template>
-
-    <template #popper>
-      <BaseDropdownMenuItem
-        v-if="!search && multi && childOptions.length && selectAllButtonDisplayed"
-        :label="i18n.t(selectAll ? 'general_form_multiselect-unselect-all' : 'general_form_multiselect-select-all')"
-        keep-open
-        data-testid="select-all"
-        can-click-on-active
-        @click.prevent="onToggleSelectAll()"
-      >
-        <template #checkbox>
-          <BaseCheckbox
-            :icon="selectAllIcon"
-            :value="selectAll"
-            for-id="select-all"
-          />
-        </template>
-      </BaseDropdownMenuItem>
-      <slot />
-    </template>
-  </BaseDropdownMenu>
-</template>
-
-<script>
-import { ref, provide, computed, toRefs } from 'vue'
-import { isMobile } from '../../../../frontend/src/common/js/environment'
-
-export default {
-  provide () {
-    return {
-      select_onValueChange: this.onValueChange,
-      select_childConfig: this.childConfig,
-    }
-  },
-
-  props: {
-    buttonClass: {
-      type: String,
-      default: 'base-button-select base-form-style',
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    icon: {
-      type: String,
-      default: null,
-    },
-
-    // eslint-disable-next-line vue/require-prop-types
-    modelValue: {
-      default: null,
-    },
-
-    label: {
-      type: [String, Boolean],
-      default: null,
-    },
-
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-
-    searchEnabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    searchPlaceholder: {
-      type: String,
-      default: null,
-    },
-
-    multi: {
-      type: Boolean,
-      default: false,
-    },
-
-    values: {
-      type: Array,
-      default: null,
-    },
-
-    // Override
-    popperClass: {
-      type: String,
-      default: null,
-    },
-
-    placeholder: {
-      type: String,
-      default: null,
-    },
-
-    placeholderOne: {
-      type: String,
-      default: null,
-    },
-
-    placeholderMany: {
-      type: [String, Function],
-      default: null,
-    },
-
-    placeholderAll: {
-      type: String,
-      default: null,
-    },
-
-    required: {
-      type: Boolean,
-      default: false,
-    },
-
-    theme: {
-      type: String,
-      default: 'select',
-    },
-
-    selectAllButtonDisplayed: {
-      type: Boolean,
-      default: false,
-    },
-
-    scrollable: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  emits: ['input', 'change', 'update:modelValue'],
-
-  setup (props) {
-    const { modelValue } = toRefs(props)
-    provide('BaseSelect.modelValue', modelValue)
-
-    const childOptions = ref([])
-    provide('BaseSelect.childOptions', childOptions)
-
-    const currentChild = computed(() => childOptions.value.find(o => o.value === props.modelValue))
-
-    const search = ref('')
-
-    const mobileMode = isMobile()
-
-    return {
-      currentChild,
-      childOptions,
-      search,
-      mobileMode,
-    }
-  },
-
-  data () {
-    return {
-      childConfig: {
-        width: 0,
-        multi: this.multi,
-        count: 0,
-      },
-    }
-  },
-
-  computed: {
-    allChildOptionsInModelValue () {
-      return this.childOptions.filter(option => !this.modelValue.includes(option.value)).length === 0
-    },
-
-    selectAllIcon () {
-      if (this.allChildOptionsInModelValue) return 'i-ls-check'
-      return 'i-ls-minus'
-    },
-
-    selectAll () {
-      if (!this.modelValue?.length) return false
-      // if all data are disabled and selected we return true
-      if (this.childOptions.filter(option => option.disabled).length === this.modelValue.length && this.allChildOptionsInModelValue) return true
-      // we check the "select all" if at least one enabled option is selected
-      return !!this.childOptions.filter(option => !option.disabled).find(option => this.modelValue.includes(option.value))
-    },
-
-    displayedLabel () {
-      let label
-      let hasValue = false
-      if (this.label) {
-        label = this.label
-      } else if (!this.multi && this.currentChild) {
-        label = this.currentChild.label ||
-          this.modelValue
-        hasValue = true
-      } else if (this.placeholderOne && this.selectedCount === 1) {
-        label = this.placeholderOne
-        hasValue = true
-      } else if (this.multi && this.placeholderAll && this.selectedCount === this.totalCount) {
-        label = this.placeholderAll
-        hasValue = true
-      } else if (this.placeholderMany && this.selectedCount > 0) {
-        if (typeof this.placeholderMany === 'function') {
-          label = this.placeholderMany(this.selectedCount)
-        } else {
-          label = `${this.selectedCount} ${this.placeholderMany}`
-        }
-        hasValue = true
-      } else if (this.placeholder) {
-        label = this.placeholder
-      } else {
-        label = this.modelValue
-      }
-      return {
-        label,
-        hasValue,
-      }
-    },
-
-    selectedCount () {
-      if (this.multi && Array.isArray(this.modelValue)) {
-        return this.modelValue.length
-      }
-      return undefined
-    },
-
-    totalCount () {
-      return this.childConfig.count
-    },
-
-    finalLabel () {
-      return this.loading ? '' : this.displayedLabel.label
-    },
-  },
-
-  watch: {
-    search (value, oldValue) {
-      this.scrollToSelectedItem()
-    },
-
-    multi (value) {
-      this.childConfig.multi = value
-    },
-  },
-
-  methods: {
-    onToggleSelectAll () {
-      if (this.selectAll) {
-        this.$emit('update:modelValue', this.childOptions.filter(option => option.disabled).map(option => option.value))
-      } else {
-        // We don't want to uncheck disabled selected options
-        const disabledSelectedOptions = this.childOptions
-          .filter(option => option.disabled && this.modelValue.includes(option.value))
-          .map(option => option.value)
-
-        this.$emit('update:modelValue', [
-          ...disabledSelectedOptions,
-          ...this.childOptions.filter(option => !option.disabled && !option.hidden).map(option => option.value),
-        ])
-      }
-    },
-    onValueChange (childValue) {
-      let value
-      let added = false
-      if (this.multi) {
-        value = (this.modelValue && this.modelValue.slice()) || []
-        const index = value.indexOf(childValue)
-        if (index === -1) {
-          if (this.values) {
-            value.splice(this.getValueIndex(value, childValue), 0, childValue)
-          } else {
-            value.push(childValue)
-            added = true
-          }
-        } else {
-          value.splice(index, 1)
-        }
-      } else {
-        value = childValue
-      }
-
-      this.$emit('update:modelValue', value)
-      this.$emit('change', childValue, added)
-
-      if (!this.mobileMode) this.focusSearch()
-    },
-
-    getValueIndex (list, value) {
-      const indexInValues = this.values.indexOf(value)
-      let index = indexInValues
-      let indexInList
-      while (index >= 0 && (indexInList = list.indexOf(this.values[index])) === -1) {
-        index--
-      }
-      return indexInList + 1
-    },
-
-    onApplyShow () {
-      if (!this.multi) this.scrollToSelectedItem()
-      if (!this.mobileMode) this.focusSearch()
-    },
-
-    focusSearch () {
-      this.$refs.dropdown.$refs.searchInput?.focusSearch()
-    },
-
-    onShow () {
-      if (this.$responsive.tablet && !this.$_wasShown) {
-        this.$_documentElementOverflow = document.documentElement.style.overflow
-        this.$_bodyOverflow = document.body.style.overflow
-        document.documentElement.style.overflow = 'hidden'
-        document.body.style.overflow = 'hidden'
-        this.$_wasShown = true
-      }
-    },
-
-    onHide () {
-      document.documentElement.style.overflow = this.$_documentElementOverflow
-      document.body.style.overflow = this.$_bodyOverflow
-      this.$_wasShown = false
-    },
-
-    async scrollToSelectedItem () {
-      await this.$nextTick()
-      const el = this.$refs.dropdown.$refs.list
-      const item = el.querySelector('.selected')
-      if (item) el.scrollTop = item.offsetTop + ((item.clientHeight - el.clientHeight) / 2)
-    },
-
-    selectFirstResult () {
-      if (this.search) {
-        const [firstFilteredOption] = this.childOptions.filter(o => o.matchSearch)
-        if (firstFilteredOption) {
-          this.onValueChange(firstFilteredOption.value)
-          if (!this.multi) this.$refs.dropdown.hide()
-        }
-      }
-    },
-  },
-}
-</script>
-
-<style lang="postcss" scoped>
-.base-select :deep(.base-button:not(.base-button-tertiary)) {
-  @apply font-normal;
-}
-
-/* Transparent buttons as toggle (typically dataview filters) should have text colord when open */
-/* .base-select :deep(.base-button-tertiary.active) {
-  @apply text-livestorm-600;
-} */
-
-.select-toggle {
-  @apply relative;
-
-  :deep(.base-form-style) {
-    @apply w-full;
-    .button-wrapper > .content {
-      @apply text-left;
-      flex: auto 1 1;
-    }
-  }
-}
-
-.base-select {
-  @apply inline-block;
-
-  &.has-value:not(.transparent) {
-    .base-form & {
-      :deep(.select-button:not(.transparent)) {
-        @apply text-black;
-      }
-    }
-  }
-}
-</style>

package/src/components/BaseSelect/BaseSelectGroup.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="base-select-group">
-    <BaseDropdownMenuTitle
-      v-if="title && childConfig.visible"
-      :title="title"
-    />
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {
-  provide () {
-    return {
-      selectGroup_childConfig: this.childConfig,
-    }
-  },
-
-  props: {
-    title: {
-      type: String,
-      default: null,
-    },
-  },
-
-  data () {
-    return {
-      childConfig: {
-        visible: 0,
-      },
-    }
-  },
-}
-</script>

package/src/components/BaseSelect/BaseSelectOption.vue

@@ -1,219 +0,0 @@
-<template>
-  <BaseDropdownMenuItem
-    :keep-open="$attrs['keep-open'] != null ? $attrs['keep-open'] === '' || $attrs['keep-open'] : multi"
-    :class="cssClass"
-    :tooltip="tooltip"
-    class="base-select-option overflow-hidden"
-    :active="finalSelected"
-    :label="labelContent"
-    :secondary-label="description"
-    :disabled="disabled"
-    :label-class="labelClass"
-    :icon="icon"
-    :can-click-on-active="true"
-    @click="onClick"
-  >
-    <template #checkbox>
-      <BaseCheckbox
-        v-if="multi && !$attrs.loading"
-        v-model="finalValue"
-        :for-id="value"
-        :value="value"
-        :disabled="disabled"
-        disable-change
-      />
-    </template>
-
-    <template #label-override>
-      <slot />
-    </template>
-    <template #additional-left-part>
-      <slot name="additional-left-part" />
-    </template>
-    <template #additional-right-part>
-      <slot name="additional-right-part" />
-    </template>
-  </BaseDropdownMenuItem>
-</template>
-
-<script>
-import { computed, inject, onBeforeUnmount, reactive, ref } from 'vue'
-
-let uid = 0
-
-export default {
-  name: 'BaseSelectOption',
-
-  inject: {
-    select_onValueChange: {},
-    select_childConfig: {},
-    selectGroup_childConfig: { default: null },
-  },
-
-  props: {
-    // eslint-disable-next-line vue/require-prop-types
-    value: {
-      default: null,
-    },
-    label: {
-      type: [String, Function],
-      default: '',
-    },
-    hidden: {
-      type: Boolean,
-      default: false,
-    },
-    prevent: {
-      type: Boolean,
-      default: false,
-    },
-    selected: {
-      type: Boolean,
-      default: false,
-    },
-    description: {
-      type: String,
-      default: null,
-    },
-    tooltip: {
-      type: [String, Object],
-      default: null,
-    },
-    labelClass: {
-      type: String,
-      default: null,
-    },
-    descriptionClass: {
-      type: String,
-      default: null,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: ['click'],
-
-  setup (props) {
-    const finalValue = inject('BaseSelect.modelValue')
-
-    const labelContent = ref('')
-    const childOptions = inject('BaseSelect.childOptions')
-
-    const search = inject('BaseDropdown.search')
-
-    const matchSearch = computed(() => {
-      if (!search.value) return true
-      if (!labelContent.value) return false
-      const replaceAccents = str => str.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
-      const searchWithEscape = replaceAccents(search.value).replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&')
-      const reg = new RegExp(searchWithEscape, 'i')
-      return reg.test(replaceAccents(labelContent.value))
-    })
-
-    const id = uid++
-    childOptions.value.push(reactive({
-      id,
-      value: computed(() => props.value),
-      label: labelContent,
-      matchSearch,
-      disabled: computed(() => props.disabled),
-      hidden: computed(() => props.hidden),
-    }))
-
-    onBeforeUnmount(() => {
-      const index = childOptions.value.findIndex(item => item.id === id)
-      if (index !== -1) childOptions.value.splice(index, 1)
-    })
-
-    return {
-      finalValue,
-      labelContent,
-      matchSearch,
-    }
-  },
-
-  computed: {
-    finalSelected () {
-      if (this.selected) return this.selected
-      const value = this.finalValue
-      if (this.multi) return value && value.indexOf(this.value) !== -1
-      return this.value === value
-    },
-
-    cssClass () {
-      return {
-        selected: this.finalSelected,
-        hidden: this.finalHidden,
-      }
-    },
-
-    finalHidden () {
-      return this.hidden || !this.matchSearch
-    },
-
-    multi () {
-      return this.select_childConfig.multi
-    },
-  },
-
-  watch: {
-    hidden (value) {
-      this.select_childConfig.count += value ? -1 : 1
-    },
-
-    finalHidden (value) {
-      if (this.selectGroup_childConfig) {
-        this.selectGroup_childConfig.visible += value ? -1 : 1
-      }
-    },
-
-    label: {
-      handler: 'updateLabelContent',
-      immediate: true,
-    },
-  },
-
-  mounted () {
-    this.select_childConfig.count++
-    if (this.selectGroup_childConfig && !this.finalHidden) {
-      this.selectGroup_childConfig.visible++
-    }
-  },
-
-  beforeUnmount () {
-    this.select_childConfig.count--
-    if (this.selectGroup_childConfig && !this.finalHidden) {
-      this.selectGroup_childConfig.visible--
-    }
-  },
-
-  methods: {
-    async updateLabelContent () {
-      if (typeof this.label === 'function') {
-        this.labelContent = await this.label()
-      } else {
-        this.labelContent = this.label
-      }
-    },
-
-    onClick (event) {
-      if (!this.prevent) this.select_onValueChange(this.value)
-      this.$emit('click', event)
-    },
-  },
-}
-</script>
-
-<style lang="postcss" scoped>
-&.v-popover-item.base-select-option.fullwidth {
-  .item-label {
-    @apply w-full;
-  }
-}
-</style>