@livestorm/ui-vue 1.1.3 → 2.0.0

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/BaseRadio/BaseRadio.stories.js

@@ -1,164 +0,0 @@
-import BaseRadio from './BaseRadio.vue'
-import { action } from '@storybook/addon-actions'
-
-export default {
-  title: 'common/vue/components/BaseRadio',
-  component: BaseRadio,
-}
-
-const actions = {
-  onChange: action('change'),
-  onClick: action('click'),
-}
-
-const Template = (args) => ({
-  components: { BaseRadio },
-  setup: () => ({ args, ...actions }),
-  template: '<BaseRadio v-bind="args" @tooltip-clicked="onClick" @change="onChange" />',
-})
-
-const TemplateWithBackground = (args) => ({
-  components: { BaseRadio },
-  setup: () => ({ args, ...actions }),
-  template: '<BaseRadio class="base-choice" v-bind="args" @tooltip-clicked="onClick" @change="onChange" />',
-})
-
-export const Selected = Template.bind({})
-Selected.args = {
-  value: true,
-  modelValue: true,
-  forId: 'my-radio',
-  label: 'This Radio button is selected',
-}
-
-export const SelectedWithBackground = TemplateWithBackground.bind({})
-SelectedWithBackground.args = Selected.args
-
-export const NotSelected = Template.bind({})
-NotSelected.args = {
-  value: false,
-  modelValue: true,
-  forId: 'my-radio',
-  label: 'This Radio button is not selected',
-}
-
-export const WithLabelClass = Template.bind({})
-WithLabelClass.args = {
-  value: false,
-  modelValue: true,
-  forId: 'my-radio',
-  label: 'This radio button has a label class',
-  labelClass: '!text-16-medium',
-}
-
-export const WithDescription = Template.bind({})
-WithDescription.args = {
-  value: false,
-  modelValue: true,
-  forId: 'my-radio',
-  label: 'This radio button has a description',
-  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam diam leo, semper ut urna ut, tristique placerat dolor. Mauris hendrerit dolor tempus purus fringilla malesuada.',
-}
-
-export const Required = Template.bind({})
-Required.args = {
-  value: true,
-  modelValue: true,
-  forId: 'my-radio',
-  label: 'This Radio button is required',
-  required: true,
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  value: true,
-  modelValue: true,
-  forId: 'my-radio',
-  label: 'This Radio button is disabled',
-  disabled: true,
-}
-
-export const WithTooltip = Template.bind({})
-WithTooltip.args = {
-  value: true,
-  modelValue: true,
-  forId: 'my-radio',
-  label: 'This Radio button has a tooltip',
-  tooltip: 'Base radio tooltip',
-}
-
-const WithBorderTemplate = (args) => ({
-  components: { BaseRadio },
-  setup: () => ({ args, ...actions }),
-  template: '<BaseRadio class="base-choice" v-bind="args" @tooltip-clicked="onClick" @change="onChange" />',
-})
-
-export const WithBorder = WithBorderTemplate.bind({})
-WithBorder.args = {
-  value: true,
-  modelValue: true,
-  forId: 'my-radio',
-  label: 'This Radio has a border',
-}
-
-export const WithBorderDisabled = WithBorderTemplate.bind({})
-WithBorderDisabled.args = {
-  value: true,
-  modelValue: true,
-  disabled: true,
-  forId: 'my-radio',
-  label: 'This Radio has a border and is disabled',
-}
-
-export const SelectedWithBorder = WithBorderTemplate.bind({})
-SelectedWithBorder.args = Selected.args
-
-export const NotSelectedWithBorder = WithBorderTemplate.bind({})
-NotSelectedWithBorder.args = NotSelected.args
-
-export const WithDescriptionWithBorder = WithBorderTemplate.bind({})
-WithDescriptionWithBorder.args = WithDescription.args
-
-export const WithBorderVertical = WithBorderTemplate.bind({})
-WithBorderVertical.args = {
-  ...WithBorder.args,
-  orientation: 'vertical',
-}
-
-export const WithBorderWithDescriptionVertical = WithBorderTemplate.bind({})
-WithBorderWithDescriptionVertical.args = {
-  ...WithDescription.args,
-  orientation: 'vertical',
-}
-
-const WithBorderAndImageTemplate = (args) => ({
-  components: { BaseRadio },
-  setup: () => ({ args, ...actions }),
-  template: `<BaseRadio class="base-choice" v-bind="args" @tooltip-clicked="onClick" @change="onChange">
-    <template #icon>
-      <div class="i-ls-twitter-fill" />
-    </template>
-  </BaseRadio>`,
-})
-
-export const WithBorderWithDescriptionWithIconVertical = WithBorderAndImageTemplate.bind({})
-WithBorderWithDescriptionWithIconVertical.args = {
-  ...WithDescription.args,
-  orientation: 'vertical',
-}
-
-const withBorderAndImageTemplate = (args) => ({
-  components: { BaseRadio },
-  setup: () => ({ args, ...actions }),
-  template: `<BaseRadio class="base-choice" v-bind="args" @tooltip-clicked="onClick" @change="onChange">
-    <template #icon>
-      <img src="/outlook.svg" />
-    </template>
-  </BaseRadio>`,
-})
-
-export const WithBorderWithDescriptionWithImageVertical = withBorderAndImageTemplate.bind({})
-WithBorderWithDescriptionWithImageVertical.args = {
-  ...WithDescription.args,
-  orientation: 'vertical',
-}

package/src/components/BaseRadio/BaseRadio.vue

@@ -1,153 +0,0 @@
-<script setup lang="ts">
-import { useSlotsAsComponents } from '../../utils/slot'
-import { computed, inject, ref } from 'vue'
-
-interface BaseFormInputInjectionType {
-  childConfig: { value: any } | undefined,
-  setInputModel: (value: any) => void,
-}
-
-const BaseFormInputInjection = inject<BaseFormInputInjectionType | undefined>('BaseFormInputInjection', undefined)
-
-const props = withDefaults(defineProps<{
-  modelValue?: any,
-  value: any,
-  label?: string,
-  labelContainerClass?: string,
-  labelClass?: string,
-  description?: string,
-  forId?: string,
-  required?: boolean,
-  disabled?: boolean,
-  tooltip?: string,
-  orientation?: 'horizontal' | 'vertical'
-}>(), {
-  modelValue: null,
-  label: undefined,
-  labelContainerClass: undefined,
-  labelClass: undefined,
-  description: undefined,
-  forId: undefined,
-  required: false,
-  disabled: false,
-  tooltip: undefined,
-  orientation: 'horizontal',
-})
-
-const emit = defineEmits<{
-  (e: 'change', a: any): void,
-  (e: 'update:modelValue', a: any): void,
-  (e: 'tooltip-clicked'): void,
-}>()
-
-const slots = useSlotsAsComponents()
-const iconSlot = computed(() => slots.icon ? slots.icon() : null)
-
-const finalCurrentValue = computed(() => BaseFormInputInjection?.childConfig?.value)
-const checked = computed(() => {
-  if (!BaseFormInputInjection) {
-    return props.modelValue === props.value
-  }
-  return finalCurrentValue.value === props.value
-})
-
-function onChange () {
-  if (!BaseFormInputInjection) {
-    emit('update:modelValue', props.value)
-    emit('change', props.value)
-    return false
-  }
-  BaseFormInputInjection.setInputModel(props.value)
-}
-
-const myUid = ref()
-
-myUid.value = `BaseRadio:${uid++}`
-</script>
-
-<template>
-  <div
-    class="base-radio"
-    :class="{
-      'base-radio-disabled': disabled,
-      'with-description': description,
-    }"
-  >
-    <input
-      :id="forId || myUid"
-      :checked="checked"
-      :disabled="disabled"
-      :value="value"
-      type="radio"
-      @change="onChange"
-    >
-    <label
-      :for="forId || myUid"
-      :class="{
-        'label-disabled': disabled,
-        'flex flex-col vertical-padding-large': orientation === 'vertical',
-        'vertical-padding': description && orientation === 'horizontal',
-      }"
-    >
-
-      <div
-        v-if="iconSlot"
-        class="w-4 h-4 icon flex items-center justify-center"
-        :class="[orientation === 'vertical' ? 'mb-2' : 'mr-2']"
-      >
-        <RenderSlot
-          :vnodes="iconSlot"
-        />
-      </div>
-
-      <span
-        v-if="orientation === 'horizontal'"
-        class="input-custom"
-      >
-        <span class="check-radio" />
-      </span>
-
-      <span
-        v-if="label"
-        class="label-custom"
-        :class="{
-          'mb-2 !ml-0 text-center': orientation === 'vertical'
-        }"
-      >
-        <span
-          class="text-grey-700 label"
-          :class="[
-            labelClass,
-          ]"
-          v-html="required ? `${label} *` : label"
-        />
-        <span
-          v-if="tooltip"
-          v-tooltip="tooltip"
-          @click.stop.prevent="$emit('tooltip-clicked')"
-        />
-        <span
-          v-if="description"
-          class="description text-grey-600 block"
-          :class="{
-            'text-center': orientation === 'vertical'
-          }"
-          v-html="description"
-        />
-      </span>
-
-      <span
-        v-if="orientation === 'vertical'"
-        class="input-custom"
-      >
-        <span class="check-radio" />
-      </span>
-
-      <slot name="incentive" />
-    </label>
-  </div>
-</template>
-
-<script lang="ts">
-let uid = 0
-</script>

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',
-}