@livestorm/ui-vue 1.1.0 → 1.1.2

package/src/components/BaseModal/BaseModal.vue

@@ -0,0 +1,187 @@
+<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

@@ -0,0 +1,164 @@
+<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

@@ -0,0 +1,242 @@
+<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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,46 @@
+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',
+}