@livestorm/ui-vue 1.1.3 → 2.0.0

package/src/components/BaseAutocomplete/BaseAutocomplete.vue

@@ -1,431 +0,0 @@
-<script setup>
-import { computed, ref, toRefs, useSlots, onMounted } from 'vue'
-import { onClickOutside } from '@vueuse/core'
-
-const emit = defineEmits(['update:modelValue', 'update:search'])
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Array, Object],
-    default: null,
-  },
-  size: {
-    type: String,
-    validator: (value) => ['small', 'medium', 'large'].includes(value),
-    default: 'medium',
-  },
-  placeholder: {
-    type: String,
-    default: null,
-  },
-  prependIcon: {
-    type: String,
-    default: null,
-  },
-  items: {
-    type: Array,
-    required: true,
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  hideSelected: {
-    type: Boolean,
-    default: false,
-  },
-  noFilter: {
-    type: Boolean,
-    default: false,
-  },
-  error: {
-    type: Boolean,
-    default: false,
-  },
-  hideNoData: {
-    type: Boolean,
-    default: false,
-  },
-  autofocus: {
-    type: Boolean,
-    default: false,
-  },
-  noDataText: {
-    type: String,
-    default: null,
-  },
-  clearable: {
-    type: Boolean,
-    default: false,
-  },
-  creatable: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const { items, modelValue, multiple, hideSelected, noFilter, hideNoData, autofocus, creatable } = toRefs(props)
-
-const slots = useSlots()
-
-const hasFocus = ref(false)
-const selection = computed(() => multiple.value ? (modelValue.value?.map(item => normalizeItem(item, true)) || []) : normalizeItem(modelValue.value, true))
-const search = ref(multiple.value ? null : itemText(selection.value))
-const normalizedItems = computed(() => items.value?.map(normalizeItem) || [])
-const searching = ref(false)
-const itemsKeyboardNavigationIndex = ref(null)
-const tagsKeyboardNavigationIndex = ref(null)
-
-const input = ref(null)
-const autocompleteWrapper = ref(null)
-const dropdown = ref(null)
-
-const filteredItems = computed(() => {
-  const filteredFromSearch = !noFilter.value && searching.value && search.value
-    ? normalizedItems.value.filter(item => itemText(item).toLowerCase().includes(search.value.toLowerCase()))
-    : normalizedItems.value
-  const filteredFromSelected = hideSelected.value ? filteredFromSearch.filter(item => !isSelectedItem(item)) : filteredFromSearch
-  return filteredFromSelected
-})
-const hasTags = computed(() => multiple.value && selection.value.length > 0)
-const showPopperContent = computed(() => {
-  if (hideNoData.value && filteredItems.value.length === 0 && (!creatable.value || !search.value)) return false
-  return hasFocus.value
-})
-const canCreateItem = computed(() => creatable.value && search.value && searching.value && !normalizedItems.value.some(item => itemValue(item) === search.value))
-
-function normalizeItem (item) {
-  const isItemObject = item !== null && typeof item === 'object'
-  return {
-    ...(isItemObject ? item : null),
-    value: isItemObject ? item.value : item,
-    text: isItemObject ? item.text : item,
-  }
-}
-
-function getItemProps (item) {
-  const itemProps = normalizedItems.value.find(nItem => itemValue(nItem) === itemValue(item))
-  return itemProps ?? null
-}
-
-function createItem (item) {
-  const newItem = normalizeItem(item)
-  addSelectedItem(newItem)
-
-  if (multiple.value) {
-    normalizedItems.value.push(newItem)
-  }
-}
-
-function addSelectedItem (item) {
-  if (isSelectedItem(item)) {
-    removeSelectedItem(item)
-    return
-  }
-
-  if (multiple.value) {
-    search.value = null
-    tagsKeyboardNavigationIndex.value = null
-    input.value.focus()
-    emit('update:modelValue', [...selection.value.map(item => item.value), itemValue(item)])
-  } else {
-    hasFocus.value = false
-    search.value = itemText(item)
-    emit('update:modelValue', selection.value)
-  }
-
-  searching.value = false
-}
-
-function removeSelectedItem (item) {
-  if (multiple.value) {
-    emit('update:modelValue', selection.value.filter(value => itemValue(value) !== itemValue(item)).map(item => itemValue(item)))
-    input.value.focus()
-  } else {
-    hasFocus.value = false
-    search.value = null
-    emit('update:modelValue', null)
-  }
-}
-
-function isSelectedItem (item) {
-  if (!selection.value) return false
-  return multiple.value
-    ? selection.value.some(value => itemValue(value) === itemValue(item))
-    : itemValue(item) === itemValue(selection.value)
-}
-
-function isKeyboardTargetItem (index) {
-  if (itemsKeyboardNavigationIndex.value === null) return false
-  return (itemsKeyboardNavigationIndex.value % filteredItems.value.length) === index
-}
-
-function isKeyboardTargetTag (index) {
-  if (tagsKeyboardNavigationIndex.value === null || !multiple.value) return false
-  return (tagsKeyboardNavigationIndex.value % selection.value.length) === index
-}
-
-function onUserFocus (e) {
-  hasFocus.value = true
-}
-
-function onUserSearch () {
-  searching.value = true
-  itemsKeyboardNavigationIndex.value = null
-  tagsKeyboardNavigationIndex.value = null
-
-  if (!multiple.value) {
-    emit('update:modelValue', null)
-  }
-
-  emit('update:search', search.value)
-}
-
-function onPopperHide () {
-  hasFocus.value = false
-  searching.value = false
-  itemsKeyboardNavigationIndex.value = null
-  tagsKeyboardNavigationIndex.value = null
-  input.value.blur()
-  if (multiple.value) {
-    search.value = null
-  }
-}
-
-/**
- *
- * @param {('down'|'up'|'enter')} action
- */
-function onUserKeyboardNavigateItems (action) {
-  if (action === 'up') {
-    itemsKeyboardNavigationIndex.value = itemsKeyboardNavigationIndex.value <= 0
-      ? filteredItems.value.length - 1
-      : itemsKeyboardNavigationIndex.value - 1
-  } else if (action === 'down') {
-    itemsKeyboardNavigationIndex.value ??= -1
-    itemsKeyboardNavigationIndex.value++
-  } else if (action === 'enter') {
-    if (itemsKeyboardNavigationIndex.value !== null) {
-      const itemToSelect = filteredItems.value[itemsKeyboardNavigationIndex.value % filteredItems.value.length]
-      if (itemToSelect) {
-        addSelectedItem(itemToSelect)
-      }
-    } else if (canCreateItem.value) {
-      createItem(search.value)
-    }
-  }
-}
-
-/**
- *
- * @param {('left'|'right'|'delete')} action
- */
-function onUserKeyboardNavigateTags (action) {
-  if (!!search.value || !multiple.value) return
-  tagsKeyboardNavigationIndex.value ??= -1
-
-  if (action === 'left') {
-    tagsKeyboardNavigationIndex.value = tagsKeyboardNavigationIndex.value <= 0
-      ? selection.value.length - 1
-      : tagsKeyboardNavigationIndex.value - 1
-  } else if (action === 'right') {
-    tagsKeyboardNavigationIndex.value++
-  } else if (action === 'delete') {
-    if (tagsKeyboardNavigationIndex.value === -1) {
-      tagsKeyboardNavigationIndex.value = selection.value.length - 1
-    } else {
-      removeSelectedItem(selection.value[tagsKeyboardNavigationIndex.value % selection.value.length])
-      tagsKeyboardNavigationIndex.value = tagsKeyboardNavigationIndex.value - 1
-    }
-  }
-}
-
-function onUserClickChevron () {
-  if (hasFocus.value) {
-    hasFocus.value = false
-  } else {
-    input.value.focus()
-  }
-}
-
-function onUserClickClear () {
-  if (multiple.value) {
-    emit('update:modelValue', [])
-  } else {
-    emit('update:modelValue', null)
-  }
-
-  search.value = null
-}
-
-function itemValue (item) {
-  return item.value
-}
-
-function itemText (item) {
-  return item.text
-}
-
-onMounted(() => {
-  if (autofocus.value) {
-    input.value?.focus()
-
-    // If removed, unit tests fail
-    hasFocus.value = true
-  }
-})
-
-onClickOutside(autocompleteWrapper, () => {
-  hasFocus.value = false
-}, {
-  ignore: [computed(() => dropdown.value.$refs.popperContent.$el)],
-})
-
-</script>
-
-<template>
-  <VDropdown
-    ref="dropdown"
-    :shown="showPopperContent"
-    :triggers="[]"
-    auto-size
-    popper-class="no-padding"
-    no-auto-focus
-    :auto-hide="false"
-    @hide="onPopperHide"
-  >
-    <div
-      ref="autocompleteWrapper"
-      class="base-input base-form-style stretchable flex rounded-8 items-center"
-      :class="[`base-input-${size}`, {
-        error,
-        '!border-livestorm-600': showPopperContent,
-      }]"
-    >
-      <div
-        v-if="prependIcon"
-        :class="prependIcon"
-        class="w-4 h-4 mr-3"
-      />
-      <div
-        class="flex flex-1 flex-wrap items-center"
-        :class="{
-          'mb-1': size == 'medium' && hasTags,
-          'mb-2': size === 'large' && hasTags
-        }"
-      >
-        <template v-if="hasTags">
-          <BaseTag
-            v-for="(item, index) in selection"
-            :key="itemValue(getItemProps(item))"
-            deletable
-            :theme="isKeyboardTargetTag(index) ? 'dark-grey' : 'light-grey'"
-            class="mr-1 self-baseline"
-            :class="{
-              'mt-1': size !== 'large',
-              'mt-2': size === 'large'
-            }"
-            :size="size === 'small' ? 'xsmall': 'small'"
-            @delete="removeSelectedItem(item)"
-          >
-            <div v-if="slots.tag">
-              <slot
-                name="tag"
-                v-bind="{
-                  item: getItemProps(item),
-                  index,
-                }"
-              />
-            </div>
-            <template v-else>
-              {{ itemText(getItemProps(item)) }}
-            </template>
-          </BaseTag>
-        </template>
-        <input
-          ref="input"
-          v-model="search"
-          type="text"
-          data-testid="base-autocomplete-input"
-          class="flex-1 h-6 min-w-0 focus:min-w-[64px]"
-          :class="{
-            'mt-1': hasTags && size === 'medium',
-            'mt-2': hasTags && size === 'large'
-          }"
-          :placeholder="selection?.length ? null : placeholder"
-          @focus="onUserFocus"
-          @input="onUserSearch"
-          @keydown.up="onUserKeyboardNavigateItems('up')"
-          @keydown.down="onUserKeyboardNavigateItems('down')"
-          @keydown.enter="onUserKeyboardNavigateItems('enter')"
-          @keydown.left="onUserKeyboardNavigateTags('left')"
-          @keydown.right="onUserKeyboardNavigateTags('right')"
-          @keydown.delete="onUserKeyboardNavigateTags('delete')"
-        >
-      </div>
-      <div
-        v-if="clearable && (search?.length > 0 || selection?.length > 0)"
-        class="i-ls-x cursor-pointer w-4 h-4 ml-3"
-        data-testid="base-autocomplete-clear"
-        @click="onUserClickClear"
-      />
-      <div
-        v-if="filteredItems.length > 0"
-        :class="hasFocus ? 'i-ls-chevron-up' : 'i-ls-chevron-down'"
-        class="cursor-text w-4 h-4 ml-3"
-        @click="onUserClickChevron"
-      />
-    </div>
-
-    <template #popper>
-      <div
-        class="bg-white"
-      >
-        <div
-          v-if="canCreateItem"
-          data-testid="base-autocomplete-create-item"
-          class="empty:hidden item text-livestorm-600 text-14-semibold"
-          :class="{
-            active: itemsKeyboardNavigationIndex === null
-          }"
-          @click="createItem(search)"
-        >
-          {{ i18n.t('base-autocomplete-create-item', { item: search }) }}
-        </div>
-        <div
-          v-for="(item, index) of filteredItems"
-          :key="itemValue(item)"
-          class="item"
-          data-testid="base-autocomplete-item"
-          :class="{
-            'selected': isSelectedItem(item),
-            'active': isKeyboardTargetItem(index),
-          }"
-          @click="addSelectedItem(item)"
-        >
-          {{ itemText(item) }}
-        </div>
-        <div
-          v-if="hideSelected && noDataText && filteredItems.length === 0"
-          class="px-4 py-2"
-        >
-          {{ noDataText }}
-        </div>
-      </div>
-    </template>
-  </VDropdown>
-</template>
-
-<style lang="postcss" scoped>
-.item {
-  @apply px-4 py-2 cursor-pointer hover:bg-grey-100;
-
-  &.selected {
-    @apply bg-grey-100;
-  }
-
-  &.active {
-    @apply bg-grey-300;
-  }
-}
-</style>

package/src/components/BaseBanner/BaseBanner.spec.js

@@ -1,32 +0,0 @@
-import { mount } from '@vue/test-utils'
-import BaseBanner from './BaseBanner.vue'
-
-describe('BaseBanner', () => {
-  /** @type {import('@vue/test-utils').VueWrapper} */
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(BaseBanner, {
-      props: {
-        type: 'error',
-      },
-      slots: {
-        default: 'Main content',
-      },
-    })
-  })
-
-  test('It should include info class when type prop change', async () => {
-    await wrapper.setProps({ type: 'info' })
-    expect(wrapper.find('[data-testid="base-banner"]').attributes().class.includes('info')).toBe(true)
-  })
-
-  test('It should render slot content', () => {
-    expect(wrapper.find('[data-testid="base-banner"]').text()).toContain('Main content')
-  })
-
-  test('It should render the correct icon when type change', async () => {
-    await wrapper.setProps({ type: 'warning' })
-    expect(wrapper.exists('.i-ls-alert-triangle')).toBe(true)
-  })
-})

package/src/components/BaseBanner/BaseBanner.stories.js

@@ -1,133 +0,0 @@
-import BaseBanner from './BaseBanner.vue'
-import { icons } from '@/../../frontend/.storybook/icons'
-import { withDesign } from 'storybook-addon-designs'
-
-export default {
-  title: 'common/vue/components/BaseBanner',
-  component: BaseBanner,
-  decorators: [withDesign],
-  argTypes: {
-    type: {
-      control: {
-        type: 'select',
-      },
-      options: ['info', 'success', 'warning', 'alert'],
-    },
-    display: {
-      control: {
-        type: 'select',
-      },
-      options: ['inline', 'block'],
-    },
-    buttonIcon: {
-      control: {
-        type: 'select',
-      },
-      options: icons,
-    },
-  },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/JY03TRyhauKw0jjoHFFtmMHV/0.-Design-system---Fondation?node-id=7846%3A13012',
-    },
-  },
-}
-
-const Template = (args) => ({
-  setup: () => ({ args }),
-  template: `
-      <BaseBanner v-bind="args">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-      </BaseBanner>
-    `,
-})
-
-const WithDescriptionTemplate = (args) => ({
-  setup: () => ({ args }),
-  template: `
-      <BaseBanner v-bind="args">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr
-        <template #description>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</template>
-      </BaseBanner>
-    `,
-})
-
-const WithButtonsSlotTemplate = (args) => ({
-  setup: () => ({ args }),
-  template: `
-      <BaseBanner v-bind="args">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr
-        <template #description>At vero eos et accusam et justo duo <a href="#">dolores et ea rebum</a>. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</template>
-        <template #buttons>
-          <div class="flex">
-            <BaseButton
-              class="base-button-secondary mr-2"
-              href="#"
-              icon-right="i-ls-external-link"
-              target="_blank"
-            >
-              Read documentation
-            </BaseButton>
-            <BaseButton
-              class="base-button-primary"
-            >
-              Contact us
-            </BaseButton>
-          </div>
-        </template>
-      </BaseBanner>
-    `,
-})
-
-export const Info = Template.bind({})
-Info.args = {
-  type: 'info',
-}
-
-export const Success = Template.bind({})
-Success.args = {
-  type: 'success',
-}
-
-export const Warning = Template.bind({})
-Warning.args = {
-  type: 'warning',
-}
-
-export const Alert = Template.bind({})
-Alert.args = {
-  type: 'alert',
-}
-
-export const WithDescription = WithDescriptionTemplate.bind({})
-WithDescription.args = {
-  type: 'success',
-}
-
-export const WithOneCta = WithDescriptionTemplate.bind({})
-WithOneCta.args = {
-  type: 'success',
-  buttonLabel: 'Call to action',
-  buttonIcon: 'i-ls-share',
-}
-
-export const WithTwoCta = WithButtonsSlotTemplate.bind({})
-WithTwoCta.args = {
-  type: 'info',
-}
-
-export const Closable = WithDescriptionTemplate.bind({})
-Closable.args = {
-  type: 'success',
-  buttonLabel: 'Call to action',
-  closable: true,
-}
-
-export const BannerMode = WithDescriptionTemplate.bind({})
-BannerMode.args = {
-  type: 'success',
-  buttonLabel: 'Call to action',
-  closable: true,
-  bannerMode: true,
-}