@livestorm/ui-vue 1.1.3 → 2.0.0

package/src/components/BaseModal/BaseModal.stories.js

@@ -1,155 +0,0 @@
-import BaseModal from './BaseModal.vue'
-import { icons } from '@/../../frontend/.storybook/icons'
-import { action } from '@storybook/addon-actions'
-import { withDesign } from 'storybook-addon-designs'
-
-const actions = {
-  onClose: action('close'),
-}
-
-export default {
-  title: 'common/vue/components/BaseModal',
-  component: BaseModal,
-  argTypes: {
-    locked: false,
-    width: {
-      control: {
-        type: 'number',
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-      },
-      options: ['info', 'success', 'warning', 'alert'],
-    },
-    customIcon: {
-      control: {
-        type: 'select',
-      },
-      options: icons,
-    },
-  },
-  decorators: [withDesign],
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/JY03TRyhauKw0jjoHFFtmMHV/0.-Design-system---Fondation?node-id=2578%3A746',
-    },
-  },
-}
-
-const title = (args) => ({
-  setup: () => ({ args, ...actions }),
-  template: `
-    <TeleportTarget id="teleport-end" />
-    <BaseModal @close="onClose">
-      <BaseModalContent v-bind="args" title="Lorem Ipsum is simply dummy text" />
-    </BaseModal>
-  `,
-})
-
-const titleContent = (args) => ({
-  setup: () => ({ args, ...actions }),
-  template: `
-    <TeleportTarget id="teleport-end" />
-    <BaseModal @close="onClose">
-      <BaseModalContent v-bind="args" title="Lorem Ipsum is simply dummy text">
-        <template #content>
-          <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
-        </template>
-      </BaseModalContent>
-    </BaseModal>
-  `,
-})
-
-const titleActions = (args) => ({
-  setup: () => ({ args, ...actions }),
-  template: `
-    <TeleportTarget id="teleport-end" />
-    <BaseModal @close="onClose">
-      <BaseModalContent v-bind="args" title="Lorem Ipsum is simply dummy text" confirm-label="Confirm" cancel-label="Cancel" />
-    </BaseModal>
-  `,
-})
-
-const titleContentActions = (args) => ({
-  setup: () => ({ args, ...actions }),
-  template: `
-    <TeleportTarget id="teleport-end" />
-    <BaseModal @close="onClose">
-      <BaseModalContent v-bind="args" title="Lorem Ipsum is simply dummy text" confirm-label="Confirm" cancel-label="Cancel">
-        <template #content>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</template>
-      </BaseModalContent>
-    </BaseModal>
-  `,
-})
-
-const titleContentActionsLong = (args) => ({
-  setup: () => ({ args, ...actions }),
-  template: `
-    <TeleportTarget id="teleport-end" />
-    <BaseModal @close="onClose">
-      <BaseModalContent
-        v-bind="args"
-        title="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
-        confirm-label="Lorem Ipsum is simply dummy"
-        cancel-label="Lorem Ipsum is simply dummy"
-      >
-        <template #content>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</template>
-      </BaseModalContent>
-    </BaseModal>
-  `,
-})
-
-export const TitleContentActions = titleContentActions.bind({})
-export const Title = title.bind({})
-export const TitleActions = titleActions.bind({})
-export const TitleContent = titleContent.bind({})
-
-export const LongText = titleContentActionsLong.bind({})
-
-export const Info = TitleContentActions.bind({})
-Info.args = {
-  type: 'info',
-}
-
-export const Success = TitleContentActions.bind({})
-Success.args = {
-  type: 'success',
-}
-
-export const Warning = TitleContentActions.bind({})
-Warning.args = {
-  type: 'warning',
-}
-
-export const Alert = TitleContentActions.bind({})
-Alert.args = {
-  type: 'alert',
-}
-
-export const Locked = TitleContentActions.bind({})
-Locked.args = {
-  locked: true,
-}
-
-export const CustomIcon = TitleContentActions.bind({})
-CustomIcon.args = {
-  customIcon: 'i-ls-mail',
-}
-
-export const ConfirmLoading = TitleContentActions.bind({})
-ConfirmLoading.args = {
-  confirmLoading: true,
-}
-
-export const Width100 = TitleContentActions.bind({})
-Width100.args = {
-  width: 100,
-}
-
-export const Width1920 = TitleContentActions.bind({})
-Width1920.args = {
-  width: 1920,
-}

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,166 +0,0 @@
-<script setup lang="ts">
-import { computed, 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
-  customIcon?: 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',
-])
-
-const modalIcon = computed(() => {
-  if (props.customIcon) return props.customIcon
-
-  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 undefined
-  }
-})
-
-</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="modalIcon"
-            class="w-6 h-6 mr-2 sm:mr-3 shrink-0"
-            :class="modalIcon"
-          />
-          <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>