@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/components/BaseDropdownMenu/BaseDropdownMenu.vue

@@ -1,251 +0,0 @@
-<script setup>
-import { useSlotsAsComponents } from '../../utils/slot'
-import { ref, provide, computed, onMounted, watch, onBeforeUnmount } from 'vue'
-import { isMobile } from '../../../../frontend/src/common/js/environment'
-
-const props = defineProps({
-  icon: {
-    type: String,
-    default: 'i-ls-more-horizontal',
-  },
-  searchEnabled: {
-    type: Boolean,
-    default: false,
-  },
-  searchPosition: {
-    type: String,
-    default: 'top',
-    validator: value => ['top', 'bottom'].includes(value),
-  },
-  searchThrottle: {
-    type: Number,
-    default: 0,
-  },
-  searchPlaceholder: {
-    type: String,
-    default: null,
-  },
-  containerClass: {
-    type: String,
-    default: '',
-  },
-  /** Prevent click events propagation on the trigger */
-  blockClick: {
-    type: Boolean,
-    default: false,
-  },
-  scrollable: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-provide('BaseDropdown', { close: hide })
-
-function hide () {
-  popover.value.hide()
-}
-
-defineExpose({
-  hide,
-})
-
-const slots = useSlotsAsComponents()
-const headerSlot = computed(() => slots.header ? slots.header() : null)
-const footerSlot = computed(() => slots.footer ? slots.footer() : null)
-
-const searchEnabledTop = computed(() => props.searchEnabled && props.searchPosition === 'top')
-const searchEnabledBottom = computed(() => props.searchEnabled && props.searchPosition === 'bottom')
-
-const mobileMode = isMobile()
-
-const popover = ref()
-
-const search = ref()
-
-watch(
-  () => search.value,
-  val => {
-    emit('update:search', val)
-  }
-)
-provide('BaseDropdown.search', search)
-
-/** Block event default and propagation */
-function onClickToBlock (event) {
-  event.stopPropagation()
-  event.preventDefault()
-}
-
-function addBlockClick () {
-  popover.value.$refs.popper.$refs.reference.addEventListener('click', onClickToBlock)
-}
-
-function removeBlockClick () {
-  popover.value.$refs.popper.$refs.reference.removeEventListener('click', onClickToBlock)
-}
-
-watch(
-  () => props.blockClick,
-  (val, oldVal) => {
-    if (val !== oldVal) {
-      if (val) {
-        addBlockClick()
-      } else {
-        removeBlockClick()
-      }
-    }
-  }
-)
-
-onMounted(() => {
-  if (props.blockClick) {
-    addBlockClick()
-  }
-})
-
-onBeforeUnmount(() => {
-  removeBlockClick()
-})
-
-const searchInput = ref()
-
-function onApplyShow () {
-  if (props.searchEnabled && !mobileMode) {
-    searchInput.value.focusSearch()
-  }
-}
-
-const emit = defineEmits(['search:enter', 'update:search'])
-</script>
-
-<template>
-  <VDropdown
-    ref="popover"
-    class="base-dropdown-menu"
-    popper-class="no-padding"
-    @apply-show="onApplyShow()"
-  >
-    <template #default>
-      <slot v-bind="props">
-        <div class="toggle toggle-default cursor-pointer flex items-center justify-center w-full">
-          <div
-            :class="icon"
-            class="icon w-4 h-4 text-grey-700 hover:text-grey-900"
-          />
-        </div>
-      </slot>
-    </template>
-
-    <template #popper>
-      <div
-        class="max-w-inherit max-h-inherit text-grey-900 [&_a:not(.base-button)]:text-grey-900"
-        :class="[
-          {
-            'bg-white rounded-8': isMobile,
-          },
-          headerSlot || searchEnabledTop ? 'pt-2' : 'pt-1',
-          footerSlot || searchEnabledBottom ? 'pb-2' : 'pb-1',
-          containerClass
-        ]"
-        data-testid="popper"
-        @click.stop
-      >
-        <div
-          v-if="headerSlot || searchEnabledTop"
-          class="gradient-divider-top"
-        >
-          <div
-            v-if="headerSlot"
-            class="sticky-header"
-          >
-            <RenderSlot :vnodes="headerSlot" />
-          </div>
-          <div v-else-if="searchEnabledTop">
-            <BaseDropdownMenuSearch
-              ref="searchInput"
-              class="sticky-header bg-white"
-              padding-item="px-2 pb-2"
-              :throttle="searchThrottle"
-              :placeholder="searchPlaceholder"
-              @update:search="e => search = e"
-              @search:enter="$emit('search:enter', search)"
-            />
-            <slot name="header-with-search-additional-block" />
-          </div>
-        </div>
-
-        <div
-          ref="list"
-          class="menu-items max-w-inherit overflow-y-auto"
-          :class="{
-            'max-h-[268px]': scrollable || mobileMode,
-          }"
-        >
-          <slot
-            name="popper"
-            v-bind="{ ...props, search }"
-          />
-        </div>
-
-        <div
-          v-if="footerSlot || searchEnabledBottom"
-          class="gradient-divider-bottom"
-        >
-          <div
-            v-if="footerSlot"
-            class="sticky-footer"
-          >
-            <RenderSlot :vnodes="footerSlot" />
-          </div>
-          <div v-else-if="searchEnabledBottom">
-            <slot name="header-with-search-additional-block" />
-            <BaseDropdownMenuSearch
-              ref="searchInput"
-              class="sticky-footer bg-white"
-              padding-item="px-2 pt-2"
-              :throttle="searchThrottle"
-              :placeholder="searchPlaceholder"
-              @update:search="e => search = e"
-              @search:enter="$emit('search:enter', search)"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        v-if="mobileMode"
-        class="pt-4"
-      >
-        <BaseButton
-          class="base-button-alpha-white w-full"
-          @click="hide()"
-        >
-          {{ i18n.t('general_text_cancel') }}
-        </BaseButton>
-      </div>
-    </template>
-  </VDropdown>
-</template>
-
-<style lang="postcss" scoped>
-.base-dropdown-menu {
-  :deep(.base-button) {
-    @apply overflow-hidden;
-    .right-icon {
-      transition: transform .15s ease;
-    }
-  }
-  &.v-popper--shown {
-    :deep(.base-button .right-icon) {
-      transform: rotate(180deg);
-    }
-  }
-}
-
-.gradient-divider-top {
-  box-shadow: 0px 1px 2px rgba(13, 22, 38, 0.07);
-}
-.gradient-divider-bottom {
-  box-shadow: 0px -1px 2px rgba(13, 22, 38, 0.07);
-}
-</style>

package/src/components/BaseDropdownMenu/BaseDropdownMenuButton.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-defineEmits(['click'])
-</script>
-
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
-<template>
-  <BaseDropdownMenuItem
-    tag="div"
-    :has-hover-effect="false"
-    keep-open
-    padding-item="px-2"
-  >
-    <BaseButton
-      v-bind="$attrs"
-      class="w-full"
-      @click="$emit('click')"
-    >
-      <slot />
-    </BaseButton>
-  </BaseDropdownMenuItem>
-</template>

package/src/components/BaseDropdownMenu/BaseDropdownMenuDivider.vue

@@ -1,10 +0,0 @@
-<template>
-  <BaseDropdownMenuItem
-    tag="div"
-    padding-item="px-O py-1"
-    keep-open
-    :has-hover-effect="false"
-  >
-    <hr class="h-[1px] border-alpha-black-100 w-full">
-  </BaseDropdownMenuItem>
-</template>

package/src/components/BaseDropdownMenu/BaseDropdownMenuItem.vue

@@ -1,206 +0,0 @@
-<script setup>
-import { useSlotsAsComponents } from '../../utils/slot'
-import { computed, inject } from 'vue'
-
-import DynamicAction from '../../mixins/DynamicAction'
-
-const props = defineProps({
-  id: {
-    type: String,
-    default: null,
-  },
-  label: {
-    type: [String, Function],
-    default: null,
-  },
-  secondaryLabel: {
-    type: String,
-    default: null,
-  },
-  icon: {
-    type: String,
-    default: null,
-  },
-  secondaryIcon: {
-    type: String,
-    default: null,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  keepOpen: {
-    type: Boolean,
-    default: false,
-  },
-  labelClass: {
-    type: String,
-    default: null,
-  },
-  secondaryLabelClass: {
-    type: String,
-    default: null,
-  },
-  tooltip: {
-    type: [String, Object],
-    default: null,
-  },
-  labelTooltip: {
-    type: Object,
-    default: null,
-  },
-  secondaryLabelTooltip: {
-    type: Object,
-    default: null,
-  },
-  additionalInfo: {
-    type: String,
-    default: null,
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  canClickOnActive: {
-    type: Boolean,
-    default: false,
-  },
-  paddingItem: {
-    type: String,
-    default: 'py-2 px-4',
-  },
-  hasHoverEffect: {
-    type: Boolean,
-    default: true,
-  },
-})
-
-const parentDropdown = inject('BaseDropdown')
-
-const isDisabled = computed(() => props.loading || props.disabled)
-const cssClass = computed(() => ({
-  icon: props.icon,
-  active: props.active,
-}))
-
-const slots = useSlotsAsComponents()
-const iconSlot = computed(() => slots.icon ? slots.icon() : null)
-
-const emit = defineEmits(['click', 'input'])
-
-function onClick (event) {
-  if (props.disabled || (props.active && !props.canClickOnActive)) {
-    event.preventDefault()
-  } else {
-    emit('click', event)
-
-    /**
-     * We close the dropdown programmatically instead of using v-close-popover
-     * because it was causing problems with iOS inside the iframe
-     * https://linear.app/livestorm/issue/LIV-1976/dashboard-registration-widget-sessions-dropdown-unclickable-on-some
-     */
-    if (!props.keepOpen) {
-      parentDropdown.close()
-    }
-  }
-}
-</script>
-
-<script>
-export default {
-  mixins: [
-    DynamicAction,
-  ],
-}
-</script>
-
-<template>
-  <component
-    :is="component.is"
-    v-tooltip="tooltip"
-    v-bind="component.props"
-    :disabled="isDisabled ? true : null"
-    class="base-dropdown-menu-item v-popover-item flex w-full h-auto"
-    :class="cssClass"
-    @click="onClick"
-    @input="value => $emit('input', value)"
-  >
-    <div
-      class="base-dropdown-item flex w-full justify-between"
-      :class="[{
-        'hover:bg-grey-100 transition-all duration-200': !active && !isDisabled && hasHoverEffect,
-        'opacity-40 cursor-default pointer-events-none': isDisabled,
-        'bg-livestorm-100': active,
-      }, paddingItem]"
-    >
-      <slot>
-        <div class="left-part flex items-center [&>*]:mr-2">
-          <span
-            v-if="loading"
-            class="loader grey-dovegray w-4 h-4"
-            size="small"
-          />
-          <template v-else>
-            <slot name="additional-left-part" />
-            <slot name="checkbox" />
-
-            <div
-              v-if="iconSlot"
-              class="icon w-4 h-4"
-            >
-              <RenderSlot :vnodes="iconSlot" />
-            </div>
-            <div
-              v-else-if="icon"
-              :class="icon"
-              class="icon w-4 h-4"
-            />
-          </template>
-
-          <div>
-            <div
-              :class="[
-                labelClass,
-              ]"
-              class="text-14-medium text-left"
-            >
-              <slot name="label-override">
-                <div
-                  v-tooltip="labelTooltip"
-                  class="no-info"
-                  v-html="label"
-                />
-              </slot>
-            </div>
-            <div
-              v-tooltip="secondaryLabelTooltip"
-              :class="secondaryLabelClass"
-              class="text-14-regular text-grey-600 text-left no-info"
-            >
-              {{ secondaryLabel }}
-            </div>
-          </div>
-        </div>
-
-        <div class="right-part flex items-center [&>*]:ml-2">
-          <div
-            v-if="additionalInfo"
-            class="text-14-regular text-grey-600"
-          >
-            {{ additionalInfo }}
-          </div>
-          <div
-            v-if="secondaryIcon"
-            :class="secondaryIcon"
-            class="icon icon-right w-4 h-4 text-grey-600"
-          />
-          <slot name="additional-right-part" />
-        </div>
-      </slot>
-    </div>
-  </component>
-</template>

package/src/components/BaseDropdownMenu/BaseDropdownMenuSearch.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { focusElement } from '../../utils/elements'
-
-defineProps({
-  paddingItem: {
-    type: String,
-    default: 'px-2',
-  },
-})
-
-const searchInput = ref()
-function focusSearch () {
-  focusElement(searchInput.value)
-}
-
-defineExpose({
-  focusSearch,
-})
-
-const search = ref()
-
-watch(
-  () => search.value,
-  val => {
-    emit('update:search', val)
-  }
-)
-
-const emit = defineEmits(['update:search', 'search:enter'])
-</script>
-
-<template>
-  <BaseDropdownMenuItem
-    tag="div"
-    keep-open
-    :padding-item="paddingItem"
-    :has-hover-effect="false"
-  >
-    <BaseSearchInput
-      ref="searchInput"
-      v-bind="$attrs"
-      v-model.trim.lazy="search"
-      input-class="base-input-small"
-      class="w-full"
-      @keyup.enter="emit('search:enter')"
-    />
-  </BaseDropdownMenuItem>
-</template>

package/src/components/BaseDropdownMenu/BaseDropdownMenuTitle.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  paddingItem: {
-    type: String,
-    default: 'px-4 pt-2 pb-1',
-  },
-})
-</script>
-
-<template>
-  <BaseDropdownMenuItem
-    tag="h3"
-    :padding-item="paddingItem"
-    keep-open
-    :has-hover-effect="false"
-  >
-    <div class="text-12-medium text-grey-600 flex justify-between items-center w-full">
-      <span>{{ title }}</span>
-      <slot name="additional-info" />
-    </div>
-  </BaseDropdownMenuItem>
-</template>

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

@@ -1,143 +0,0 @@
-import BaseModal from './BaseModal.vue'
-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'],
-    },
-  },
-  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 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,
-}