@livestorm/ui-vue 1.1.3 → 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>