@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/components/BaseModal/BaseModal.vue

@@ -1,187 +0,0 @@
-<script lang="ts">
-import type { InjectionKey } from 'vue'
-
-interface PropsFromContent {
-  locked?: boolean
-  fullScreen?: boolean
-}
-
-export const InjectPropsFromContent = Symbol('BaseModal.propsFromContent') as InjectionKey<PropsFromContent>
-
-export const InjectClose = Symbol('BaseModal.close') as InjectionKey<() => void>
-
-type OnCloseHandler = () => unknown
-
-export const InjectOnClose = Symbol('BaseModal.onClose') as InjectionKey<(handler: OnCloseHandler) => void>
-</script>
-
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, provide, reactive, ref, toRefs } from 'vue'
-// @ts-ignore
-import { useStackedComponent, useStackAutofocus } from '../../utils'
-
-const props = withDefaults(defineProps<{
-  shown?: boolean
-}>(), { shown: true })
-
-const emit = defineEmits([
-  'close',
-  'update:shown',
-])
-
-const propsFromContent = reactive<PropsFromContent>({
-  locked: false,
-  fullScreen: false,
-})
-provide(InjectPropsFromContent, propsFromContent)
-
-const lockedFinal = computed(() => propsFromContent.locked)
-const fullScreenFinal = computed(() => propsFromContent.fullScreen)
-
-function close () {
-  if (!lockedFinal.value) {
-    emit('update:shown', false)
-    emit('close')
-  }
-}
-
-provide(InjectClose, close)
-
-const onCloseHandlers: OnCloseHandler[] = []
-
-provide(InjectOnClose, (handler) => {
-  onCloseHandlers.push(handler)
-
-  // Child context
-  // On child unmount
-  onUnmounted(() => {
-    const index = onCloseHandlers.indexOf(handler)
-    onCloseHandlers.splice(index, 1)
-  })
-})
-
-function closeHandler () {
-  if (!lockedFinal.value) {
-    close()
-    onCloseHandlers.forEach(handler => handler())
-  }
-}
-
-const { shown } = toRefs(props)
-const {
-  isActiveStacked,
-  stackIndex,
-  onClose,
-} = useStackedComponent(shown, 'modal')
-onClose(closeHandler)
-
-// Allow the opening animation in case `shown` is initially true
-
-const firstFrame = ref(false)
-
-onMounted(() => {
-  requestAnimationFrame(() => {
-    firstFrame.value = true
-  })
-})
-
-const finalShown = computed(() => shown.value && firstFrame.value)
-
-// Autofocus
-useStackAutofocus()
-</script>
-
-<template>
-  <SafeTeleport
-    to="#teleport-end"
-  >
-    <transition
-      :duration="200"
-      name="modal"
-      appear
-    >
-      <!-- Suspense will wait for async child components before rendering (so the transition will wait for them to be loaded) -->
-      <Suspense
-        v-if="finalShown"
-      >
-        <div
-          class="base-modal-wrapper fixed inset-0 overflow-y-auto"
-          :class="[
-            isActiveStacked ? 'stack-active' : 'grayscale stack-inactive',
-            {
-              'full-screen': fullScreenFinal,
-            },
-          ]"
-          :style="{
-            'z-index': stackIndex + 8000,
-          }"
-          data-testid="modal-wrapper"
-        >
-          <!-- Close overlay -->
-          <div
-            class="absolute inset-0"
-            @click="closeHandler()"
-          />
-
-          <div class="backdrop bg-alpha-black-300 fixed inset-0 -z-10" />
-
-          <slot />
-        </div>
-      </Suspense>
-    </transition>
-  </SafeTeleport>
-</template>
-
-<style lang="postcss" scoped>
-.base-modal-wrapper {
-  &.full-screen {
-    overflow-y: initial;
-
-    :deep(.close-button) {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      margin: 0;
-      .icon {
-        margin: 0;
-      }
-    }
-
-    :deep(.base-modal-layout) {
-      height: 100%;
-      padding: 0;
-
-      .base-modal-header {
-        background-color: #fff;
-        margin: 0 !important;
-        z-index: 50;
-        position: sticky;
-        top: 0;
-      }
-
-      & > section {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-        max-width: unset;
-        border-radius: 0px;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .base-modal-content {
-        height: 100%;
-        overflow-y: auto;
-      }
-    }
-  }
-
-  &.stack-inactive {
-    :deep(.base-modal-layout > section) {
-      @apply scale-95;
-    }
-  }
-}
-</style>

package/src/components/BaseModal/BaseModalContent.vue

@@ -1,164 +0,0 @@
-<script setup lang="ts">
-import { computed, defineEmits, defineProps, inject, watch } from 'vue'
-import BaseButton from '../BaseButton/BaseButton.vue'
-import { useSlotsAsComponents } from '../../utils/slot'
-import { InjectClose, InjectOnClose, InjectPropsFromContent } from './BaseModal.vue'
-
-interface ModalProps {
-  title: string
-  locked?: boolean
-  width?: number
-  confirmLabel?: string
-  cancelLabel?: string
-  confirmLoading?: boolean
-  confirmColor?: string
-  confirmHref?: string
-  type?: 'alert'|'warning'|'info'|'success'
-}
-
-const props = defineProps<ModalProps>()
-
-// Send back to BaseModal the props used in BaseModal
-
-const propsToParent = inject(InjectPropsFromContent)
-
-if (!propsToParent) {
-  throw new Error('BaseModalContent must be used inside a BaseModal')
-}
-
-watch(() => props.locked, value => {
-  propsToParent.locked = value
-}, { immediate: true })
-
-// Close
-
-const closeParent = inject(InjectClose)!
-
-function close (alsoCloseParent = true) {
-  if (!props.locked) {
-    emit('close')
-    if (alsoCloseParent) {
-      closeParent()
-    }
-  }
-}
-
-const onParentClose = inject(InjectOnClose)!
-
-onParentClose(() => {
-  close(false)
-})
-
-// Slots
-const slots = useSlotsAsComponents()
-const contentSlot = computed(() => slots.content ? slots.content() : [])
-const buttonsSlot = computed(() => slots['additional-buttons']!())
-
-const emit = defineEmits([
-  'confirm',
-  'cancel',
-  'close',
-])
-
-// Types
-
-const typeIcon = computed(() => {
-  switch (props.type) {
-    case 'alert':
-      return 'i-ls-alert-circle text-red-600'
-    case 'warning':
-      return 'i-ls-alert-triangle text-orange-600'
-    case 'info':
-      return 'i-ls-info text-livestorm-600'
-    case 'success':
-      return 'i-ls-check-circle text-green-600'
-    default:
-      return 'i-ls-alert-circle text-livestorm-600'
-  }
-})
-</script>
-
-<template>
-  <div class="flex min-h-full items-end justify-center p-2 text-center sm:items-center">
-    <div
-      class="relative bg-white w-full min-w-[320px] max-w-[650px] rounded-8 base-modal-box"
-      :style="{ 'max-width': `${width}px` }"
-      @click.stop
-    >
-      <div class="flex justify-between">
-        <div
-          v-if="props.title"
-          class="flex items-center px-6 pt-6"
-        >
-          <div
-            v-if="props.type"
-            class="w-6 h-6 mr-2 sm:mr-3 shrink-0"
-            :class="typeIcon"
-          />
-          <span
-            data-testid="modal-title"
-            class="block text-16-semibold text-grey-900 text-left"
-            :class="{ 'pb-6': !contentSlot }"
-          >
-            {{ props.title }}
-          </span>
-        </div>
-        <span v-else />
-        <div
-          v-if="!locked"
-          class="i-ls-x w-6 h-6 text-grey-700 hover:text-grey-900 cursor-pointer shrink-0 mt-6 mr-6"
-          data-testid="modal-close-icon"
-          tabindex="0"
-          role="button"
-          aria-label="close"
-          @click="close()"
-          @keydown.enter="close()"
-        />
-      </div>
-      <div
-        v-if="contentSlot"
-        class="p-6 text-left text-grey-700"
-        data-testid="modal-content"
-      >
-        <slot name="content" />
-      </div>
-      <div
-        v-if="confirmLabel || cancelLabel || buttonsSlot"
-        class="px-6 pb-6 flex flex-row-reverse w-full sm:w-auto"
-        :class="{ 'pt-6': !props.title && !contentSlot }"
-      >
-        <div
-          class="flex flex-col-reverse sm:flex-row gap-2.5 w-full justify-end"
-        >
-          <slot name="additional-buttons" />
-
-          <BaseButton
-            v-if="cancelLabel"
-            class="base-button-anti-primary w-full sm:w-auto"
-            @click="$emit('cancel')"
-          >
-            {{ cancelLabel }}
-          </BaseButton>
-
-          <BaseButton
-            v-if="confirmLabel"
-            :loading="confirmLoading"
-            :href="confirmHref"
-            :target="confirmHref ? '_blank' : null"
-            class="w-full sm:w-auto"
-            :class="confirmColor ? `base-button-${confirmColor}` : 'base-button-primary'"
-            @click="$emit('confirm', $event)"
-          >
-            {{ confirmLabel }}
-          </BaseButton>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.base-modal-box {
-  box-shadow: 0px 2px 4px 0px #0D16261A;
-}
-</style>

package/src/components/BaseModal/BaseModalContentOld.vue

@@ -1,242 +0,0 @@
-<script setup lang="ts">
-/**
- * @TODO Remove it once the fullscreen mode is supported
- * in BaseModal or another dedicated component (to define)
- */
-import { computed, inject, watch, toRefs } from 'vue'
-import { useSlotsAsComponents } from '../../utils/slot'
-import { InjectPropsFromContent, InjectClose, InjectOnClose } from './BaseModal.vue'
-
-const props = defineProps({
-  locked: {
-    type: Boolean,
-    default: false,
-  },
-
-  width: {
-    type: Number,
-    default: null,
-  },
-
-  // @deprecated
-  fullScreen: {
-    type: Boolean,
-    default: false,
-  },
-
-  // @deprecated
-  noPadding: {
-    type: Boolean,
-    default: false,
-  },
-
-  dataTestid: {
-    type: String,
-    default: null,
-  },
-})
-
-const {
-  locked,
-  fullScreen,
-  width,
-  noPadding,
-} = toRefs(props)
-
-const emit = defineEmits([
-  'close',
-])
-
-// Send back to BaseModal the props used in BaseModal
-
-const propsToParent = inject(InjectPropsFromContent)
-
-if (!propsToParent) {
-  throw new Error('BaseModalContentOld must be used inside BaseModal')
-}
-
-watch(() => props.locked, value => {
-  propsToParent.locked = value
-}, { immediate: true })
-watch(() => props.fullScreen, value => {
-  propsToParent.fullScreen = value
-}, { immediate: true })
-
-// Close
-
-const closeParent = inject(InjectClose)!
-
-function close (alsoCloseParent = true) {
-  if (!locked.value) {
-    emit('close')
-    if (alsoCloseParent) {
-      closeParent()
-    }
-  }
-}
-
-const onParentClose = inject(InjectOnClose)!
-
-onParentClose(() => {
-  close(false)
-})
-
-// Slots
-
-const slots = useSlotsAsComponents()
-const titleSlot = computed(() => slots.title!())
-const subtitleSlot = computed(() => slots.subtitle!())
-const contentSlot = computed(() => slots.content!())
-</script>
-
-<template>
-  <div
-    :class="{
-      'has-header': titleSlot || subtitleSlot,
-      'has-title': titleSlot,
-      'has-subtitle': subtitleSlot,
-      'has-content': contentSlot,
-    }"
-    class="base-modal-layout"
-    @click.stop
-  >
-    <section
-      :style="{ 'max-width': `${width}px` }"
-      :class="[noPadding ? 'p-0': 'p-5']"
-      class="transition-transform"
-      :data-testid="dataTestid"
-    >
-      <slot name="outside-header" />
-
-      <div class="base-modal-header">
-        <div
-          v-if="!locked && !fullScreen"
-          class="close-button"
-          data-testid="modal-close-icon"
-          @click="close()"
-        >
-          <div
-            class="i-ls-x icon"
-          />
-        </div>
-
-        <div
-          v-if="titleSlot"
-          class="title text-grey-900"
-          :class="{
-            'flex flex-row items-center border-b h-16 border-grey-200 px-6 py-4': fullScreen,
-          }"
-        >
-          <div
-            v-if="fullScreen"
-            class="i-ls-chevron-left arrow-back cursor-pointer w-6 h-6 mr-2 text-grey-600 hover:text-grey-600"
-            @click="close()"
-          />
-          <RenderSlot :vnodes="titleSlot" />
-        </div>
-        <div
-          v-if="subtitleSlot"
-          class="subtitle"
-        >
-          <RenderSlot :vnodes="subtitleSlot" />
-        </div>
-      </div>
-
-      <div
-        v-if="contentSlot"
-        class="base-modal-content"
-      >
-        <RenderSlot :vnodes="contentSlot" />
-      </div>
-    </section>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.close-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-  cursor: pointer;
-  opacity: 0.5;
-  transition: opacity 0.2s ease;
-  margin: 2px;
-  padding: 16px;
-  .icon {
-    width: 24px;
-    height: 24px;
-  }
-  &:hover {
-    opacity: 1;
-  }
-}
-
-.base-modal-layout {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 0;
-  z-index: 8001;
-  padding: 0 10px;
-  @apply text-grey-900;
-  & > section {
-    position: relative;
-    background: #fff;
-    margin: 30px auto;
-    max-width: 650px;
-    @apply rounded-8;
-  }
-  &.has-content {
-    &.has-header {
-      .base-modal-header {
-        margin-bottom: 16px;
-      }
-    }
-  }
-  &.has-title {
-    &.has-subtitle {
-      .base-modal-header {
-        .subtitle {
-          margin-top: 6px;
-        }
-      }
-    }
-  }
-  &:not(.has-header) {
-    .close-button {
-      padding: 6px;
-    }
-  }
-}
-
-.base-modal-header {
-  @apply text-grey-700;
-  text-align: center;
-  & > span {
-    display: block;
-  }
-  .title {
-    font-size: 1.1em;
-    font-weight: 600;
-  }
-  .subtitle {
-    font-weight: 300;
-  }
-}
-
-.img-ico {
-  display: block;
-  margin: 0 auto 16px auto;
-}
-
-.cover-ico {
-  width: 36px;
-  height: 36px;
-  margin: 0 auto 16px auto;
-}
-
-:deep(.warning-title) {
-  @apply font-semibold text-grey-900
-}
-</style>

package/src/components/BaseRating/BaseRating.spec.js

@@ -1,46 +0,0 @@
-import { mount } from '@vue/test-utils'
-import BaseRating from './BaseRating.vue'
-
-const Selectors = {
-  Item: '[data-testid="base-rating-item"]',
-  ItemLabel: 'label',
-  ItemActive: '.active',
-}
-
-describe('BaseRating', () => {
-  test('it should interact with the user', async () => {
-    const wrapper = mount(BaseRating)
-    await wrapper.findAll(Selectors.Item)[2].find(Selectors.ItemLabel).trigger('click')
-    expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(3)
-
-    await wrapper.findAll(Selectors.Item)[4].find(Selectors.ItemLabel).trigger('click')
-    expect(wrapper.emitted()['update:modelValue'][1][0]).toBe(5)
-  })
-
-  test('it should active items on hover', async () => {
-    const wrapper = mount(BaseRating, {
-      props: {
-        hover: true,
-      },
-    })
-    expect(wrapper.findAll(`${Selectors.Item}${Selectors.ItemActive}`).length).toBe(0)
-
-    await wrapper.findAll(Selectors.Item)[2].trigger('mouseenter')
-    expect(wrapper.findAll(Selectors.Item)[0].classes()).toContain(Selectors.ItemActive.slice(1))
-    expect(wrapper.findAll(Selectors.Item)[1].classes()).toContain(Selectors.ItemActive.slice(1))
-    expect(wrapper.findAll(Selectors.Item)[2].classes()).toContain(Selectors.ItemActive.slice(1))
-    expect(wrapper.findAll(Selectors.Item)[3].classes()).not.toContain(Selectors.ItemActive.slice(1))
-    expect(wrapper.findAll(Selectors.Item)[4].classes()).not.toContain(Selectors.ItemActive.slice(1))
-    expect(wrapper.emitted()['update:modelValue']).toBeUndefined()
-  })
-
-  test('it should not react to events when readonly', async () => {
-    const wrapper = mount(BaseRating, {
-      props: {
-        readonly: true,
-      },
-    })
-    await wrapper.findAll(Selectors.Item)[2].find(Selectors.ItemLabel).trigger('click')
-    expect(wrapper.emitted()['update:modelValue']).toBeUndefined()
-  })
-})

package/src/components/BaseRating/BaseRating.stories.js

@@ -1,46 +0,0 @@
-import BaseRating from './BaseRating.vue'
-
-export default {
-  title: 'common/vue/components/BaseRating',
-  component: BaseRating,
-}
-
-const defaultTemplate = (args) => ({
-  setup: () => ({ args }),
-  template: `
-    <BaseRating v-bind="args" />
-  `,
-})
-
-export const Simple = defaultTemplate.bind({})
-
-export const Labels = defaultTemplate.bind({})
-Labels.args = {
-  itemLabels: ['Very poor', 'Poor', 'Average', 'Good', 'Great'],
-}
-
-export const StyledLabels = defaultTemplate.bind({})
-StyledLabels.args = {
-  itemLabels: ['Very poor', 'Poor', 'Not so bad', 'Good', 'Very good'],
-  itemLabelClass: 'w-[50px] border border-grey-200 rounded p-1',
-}
-
-export const TenItems = defaultTemplate.bind({})
-TenItems.args = {
-  length: 10,
-}
-
-export const Rated = defaultTemplate.bind({})
-Rated.args = {
-  modelValue: 3,
-}
-
-export const Hover = defaultTemplate.bind({})
-Hover.args = {
-  hover: true,
-}
-
-export const Name = defaultTemplate.bind({})
-Name.args = {
-  name: 'session-quality',
-}