fix: apply ESLint rule vue/padding-line-between-blocks

2024-07-26 11:52:27 +05:30
parent 1b045c499c
commit 29007de112
218 changed files with 247 additions and 0 deletions
@@ -980,6 +980,7 @@ export default {
    </woot-modal>
  </div>
 </template>
+
 <style scoped>
@tailwind components;
@layer components {
@@ -64,6 +64,7 @@ export default {
    </form>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .modal-content {
  @apply pt-2 px-5 pb-6;
@@ -66,6 +66,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <Banner
    v-if="shouldShowBanner"
@@ -8,6 +8,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <kbd class="hotkey p-0.5 min-w-[1rem] uppercase" :class="customClass">
    <slot />
@@ -61,6 +61,7 @@ export default {
    <Spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
  </button>
 </template>
+
 <style lang="scss" scoped>
 button:disabled {
  @apply bg-woot-100 dark:bg-woot-500/25 dark:text-slate-500 opacity-100;
@@ -220,6 +220,7 @@ export default {
    </div>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .dropdown-pane {
  @apply left-auto top-[2.625rem] mt-0.5 right-0 max-w-[12.5rem] min-w-[9.75rem];
@@ -24,6 +24,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div
    v-if="showShowCurrentAccountContext"
@@ -56,6 +57,7 @@ export default {
    </transition>
  </div>
 </template>
+
 <style scoped>
@tailwind components;
@layer components {
@@ -22,6 +22,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <woot-button
    v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
@@ -23,6 +23,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="w-8 h-8">
    <router-link :to="dashboardPath" replace>
@@ -29,6 +29,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="mb-4">
    <button
@@ -66,6 +66,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div
    class="flex flex-col justify-between w-16 h-full bg-white border-r dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0"
@@ -28,6 +28,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <router-link v-slot="{ href, isActive, navigate }" :to="to" custom>
    <a
@@ -234,6 +234,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div
    v-if="hasSecondaryMenu"
@@ -49,6 +49,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <router-link
    v-slot="{ href, isActive, navigate }"
@@ -28,6 +28,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="announcement-popup">
    <span v-if="popupMessage" class="popup-content">
@@ -30,6 +30,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div
    class="fixed outline-none z-[9999] cursor-pointer"
@@ -14,6 +14,7 @@ defineProps({
  },
 });
 </script>
+
 <template>
  <button
    class="inline-flex relative items-center p-1.5 w-fit h-8 gap-1.5 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
@@ -6,6 +6,7 @@ defineProps({
  },
 });
 </script>
+
 <template>
  <div
    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
@@ -71,6 +71,7 @@ const shouldShowEmptyState = computed(() => {
  return !props.isLoading && isDropdownListEmpty.value;
 });
 </script>
+
 <template>
  <div
    class="absolute z-20 w-40 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-50 dark:border-slate-700/50 max-h-[400px]"
@@ -10,6 +10,7 @@ defineProps({
  },
 });
 </script>
+
 <template>
  <button
    class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
@@ -6,6 +6,7 @@ defineProps({
  },
 });
 </script>
+
 <template>
  <div
    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
@@ -14,6 +14,7 @@ defineProps({
  },
 });
 </script>
+
 <template>
  <div
    class="flex items-center justify-between h-10 min-h-[40px] sticky top-0 bg-white z-10 dark:bg-slate-800 gap-2 px-3 border-b rounded-t-xl border-slate-50 dark:border-slate-700"
@@ -6,6 +6,7 @@ defineProps({
  },
 });
 </script>
+
 <template>
  <div class="relative group w-[inherit] whitespace-normal z-20">
    <fluent-icon
@@ -79,6 +79,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div
    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
@@ -24,6 +24,7 @@ export default {
    <span aria-hidden="true" :class="{ active: value }" />
  </button>
 </template>
+
 <style lang="scss" scoped>
 .toggle-button {
  @apply bg-slate-200 dark:bg-slate-600;
@@ -44,6 +44,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <li
    :class="{
@@ -65,6 +65,7 @@ export default {
    </div>
  </transition-group>
 </template>
+
 <style lang="scss" scoped>
 .wizard-box {
  .item {
@@ -103,6 +103,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <button
    class="button"
@@ -106,6 +106,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div v-if="!isFetchingAppIntegrations">
    <div v-if="isAIIntegrationEnabled" class="relative">
@@ -7,6 +7,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="relative">
    <woot-button
@@ -28,6 +29,7 @@ export default {
    />
  </div>
 </template>
+
 <style scoped>
@tailwind components;
@layer components {
@@ -57,6 +57,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <ChannelSelector
    :class="{ inactive: !isActive }"
@@ -41,6 +41,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <woot-tabs :index="activeTabIndex" @change="onTabChange">
    <woot-tabs-item
@@ -18,6 +18,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div v-if="isFeatureEnabled">
    <slot />
@@ -279,6 +279,7 @@ export default {
    </div>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .filter__answer--wrap {
  input {
@@ -17,6 +17,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div
    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap font-medium bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
@@ -5,6 +5,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="flex items-center justify-center p-8">
    <h6
@@ -35,6 +35,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <span>
    {{ textToBeDisplayed }}
@@ -47,6 +48,7 @@ export default {
    </button>
  </span>
 </template>
+
 <style scoped>
 .show-more--button {
  color: var(--w-500);
@@ -26,6 +26,7 @@ const spanClass = computed(() => {
  return 'col-span-1';
 });
 </script>
+
 <template>
  <div
    class="flex items-center px-0 py-2 text-xs font-medium text-left uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
@@ -130,6 +130,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div
    :class="thumbnailBoxClass"
@@ -33,6 +33,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="overlapping-thumbnails">
    <Thumbnail
@@ -21,6 +21,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="flex items-center gap-1.5 text-left">
    <Thumbnail
@@ -40,6 +40,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <woot-button
    v-if="isVideoIntegrationEnabled"
@@ -5,11 +5,13 @@ export default {
  },
 };
 </script>
+
 <template>
  <div
    :class="`status-badge status-badge__${status} rounded-full w-2.5 h-2.5 mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-flex`"
  />
 </template>
+
 <style lang="scss" scoped>
 .status-badge {
  &__online {
@@ -362,6 +362,7 @@ export default {
    </div>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .folder-input {
  @apply w-[50%];
@@ -106,6 +106,7 @@ export default {
    </div>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .basic-filter {
  @apply w-52 p-4 top-6;
@@ -89,6 +89,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div
    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
@@ -153,6 +154,7 @@ export default {
    />
  </div>
 </template>
+
 <style lang="scss" scoped>
 .conversation-details-wrap {
  @apply flex flex-col min-w-0 w-full;
@@ -228,6 +228,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div
    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-slate-25 dark:hover:bg-slate-800 group"
@@ -344,6 +345,7 @@ export default {
    </woot-context-menu>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .conversation {
  &.unread-chat {
@@ -130,6 +130,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div
    class="flex flex-col items-center justify-between px-4 py-2 bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 md:flex-row"
@@ -60,6 +60,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div :class="emptyClassName">
    <woot-loading-state
@@ -35,6 +35,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <select
    v-model="activeValue"
@@ -438,6 +438,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <li
    v-if="shouldRenderMessage"
@@ -582,6 +583,7 @@ export default {
    </div>
  </li>
 </template>
+
 <style lang="scss">
 .wrap {
  > .bubble {
@@ -47,6 +47,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="relative flex items-center gap-2 actions--container">
    <woot-button
@@ -84,6 +85,7 @@ export default {
    />
  </div>
 </template>
+
 <style scoped lang="scss">
 .more--button {
  @apply items-center flex ml-2 rtl:ml-0 rtl:mr-2;
@@ -18,6 +18,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="onboarding-wrap">
    <div class="onboarding">
@@ -98,6 +99,7 @@ export default {
    </div>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .onboarding-wrap {
  display: flex;
@@ -152,6 +152,7 @@ export default {
    </div>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .input-group-wrap .message {
  @apply text-sm text-red-500 dark:text-red-500;
@@ -71,6 +71,7 @@ export default {
    </template>
  </MentionBox>
 </template>
+
 <style scoped>
 .variable--list-label {
  font-weight: var(--font-weight-bold);
@@ -36,6 +36,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <BubbleImage
    v-if="!hasImgStoryError"
@@ -25,6 +25,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <blockquote
    class="my-0 px-2 pb-0 pt-0 border-l-4 border-solid border-slate-75 dark:border-slate-600 text-slate-600 dark:text-slate-200"
@@ -30,6 +30,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <DyteVideoCall
    v-if="showDyteIntegration"
@@ -75,6 +75,7 @@ export default {
    </div>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .message__mail-head {
  padding-bottom: var(--space-small);
@@ -114,6 +114,7 @@ export default {
    />
  </div>
 </template>
+
 <style lang="scss">
 .text-content {
  overflow: auto;
@@ -25,6 +25,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <woot-modal
    modal-type="right-aligned"
@@ -41,6 +41,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div>
    <woot-button
@@ -71,6 +72,7 @@ export default {
    </div>
  </div>
 </template>
+
 <style lang="scss">
 .join-call-button {
  margin: var(--space-small) 0;
@@ -14,6 +14,7 @@ defineProps({
 const formatDate = timestamp =>
  format(fromUnixTime(timestamp), 'MMM dd, yyyy, hh:mm a');
 </script>
+
 <template>
  <div class="flex justify-between w-full">
    <span
@@ -37,6 +37,7 @@ const toggleShowAllNRT = () => {
  shouldShowAllNrts.value = !shouldShowAllNrts.value;
 };
 </script>
+
 <template>
  <div
    class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
@@ -60,6 +60,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div
    v-if="activeLabels.length || $slots.before"
@@ -47,6 +47,7 @@ const onClickTabChange = index => {
  selectedTabIndex.value = index;
 };
 </script>
+
 <template>
  <div class="flex flex-col h-auto overflow-auto">
    <woot-modal-header
@@ -65,6 +65,7 @@ export default {
    <slot name="masked" />
  </label>
 </template>
+
 <style scoped lang="scss">
 .help-text {
  @apply mt-0.5 text-xs not-italic text-slate-600 dark:text-slate-400;
@@ -49,6 +49,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <Modal :show.sync="show" :on-close="cancel">
    <div class="h-auto overflow-auto flex flex-col">
@@ -41,6 +41,7 @@ export default {
    </div>
  </Modal>
 </template>
+
 <style lang="scss" scoped>
 .action-button {
  max-width: var(--space-giga);
@@ -112,6 +112,7 @@ export default {
    </div>
  </woot-modal>
 </template>
+
 <style scoped>
 .key {
  @apply py-2 px-2.5 font-semibold text-xs text-slate-700 dark:text-slate-100 bg-slate-75 dark:bg-slate-900 shadow border-b-2 rtl:border-l-2 ltr:border-r-2 border-slate-200 dark:border-slate-700;
@@ -48,6 +48,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="contact-fields">
    <h3 class="text-lg title">
@@ -41,6 +41,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="contact--intro">
    <Thumbnail
@@ -66,6 +66,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="panel">
    <ContactIntro
@@ -140,6 +140,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="context-menu">
    <!-- Add To Canned Responses -->
@@ -245,6 +246,7 @@ export default {
    </woot-context-menu>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .menu-container {
  @apply p-1 bg-white dark:bg-slate-900 shadow-xl rounded-md;
@@ -32,6 +32,7 @@ export default {
    </woot-button>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .search-input-box {
  @apply p-2;
@@ -43,6 +43,7 @@ export default {
    </woot-tabs>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .tab-container {
  @apply mt-1 border-b border-solid border-slate-100 dark:border-slate-800/50;
@@ -343,6 +343,7 @@ export default {
    </div>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .folder-input {
  @apply w-[50%];
@@ -99,6 +99,7 @@ const staticElements = computed(() =>
    />
  </div>
 </template>
+
 <style scoped lang="scss">
 .conversation--attribute {
  @apply border-slate-50 dark:border-slate-700/50 border-b border-solid;
@@ -228,6 +228,7 @@ export default {
    </div>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .dropdown-pane {
  @apply box-border top-8 w-full;
@@ -254,6 +254,7 @@ export default {
    </woot-modal>
  </section>
 </template>
+
 <style lang="scss" scoped>
 .conversation-page {
  display: flex;
@@ -25,6 +25,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div>
    <div
@@ -59,6 +60,7 @@ export default {
    </div>
  </div>
 </template>
+
 <style scoped lang="scss">
 .macros-list {
  padding: var(--space-smaller);
@@ -167,6 +167,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="relative items-center w-full p-4 bg-white dark:bg-slate-900">
    <div class="flex flex-col w-full gap-2 text-left rtl:text-right">
@@ -38,6 +38,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="w-full h-5 ltr:-ml-1 rtl:-mr-1">
    <a
@@ -65,6 +65,7 @@ export default {
    </div>
  </div>
 </template>
+
 <style lang="scss" scoped>
 .search-link {
  &:hover {
@@ -134,6 +134,7 @@ export default {
    </form>
  </Modal>
 </template>
+
 <style scoped lang="scss">
 .input-container::v-deep {
  margin: 0 0 var(--space-normal);
@@ -68,6 +68,7 @@ export default {
    </div>
  </div>
 </template>
+
 <style scoped>
 .empty-state-message {
  @apply text-center flex items-center justify-center px-4 py-8 text-slate-500 text-sm;
@@ -155,6 +155,7 @@ export default {
    />
  </div>
 </template>
+
 <style lang="scss" scoped>
 /*
 The .article-ghost-class class is maintained as the vueDraggable doesn't allow multiple classes
@@ -283,6 +283,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
    <Sidebar
@@ -178,6 +178,7 @@ export default {
    </form>
  </woot-modal>
 </template>
+
 <style scoped lang="scss">
 .input-container::v-deep {
  @apply mt-0 mb-4 mx-0;
@@ -189,6 +189,7 @@ export default {
    </form>
  </woot-modal>
 </template>
+
 <style scoped lang="scss">
 .article-info {
  width: 100%;
@@ -99,6 +99,7 @@ export default {
    </div>
  </div>
 </template>
+
 <style scoped lang="scss">
 .wrapper {
  flex: 1;
@@ -21,6 +21,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div
    class="inline-flex items-center rounded-[4px] border border-slate-100 dark:border-slate-700/50 divide-x divide-slate-100 dark:divide-slate-700/50 bg-none"
@@ -12,6 +12,7 @@ const onMenuItemClick = () => {
  emits('click');
 };
 </script>
+
 <template>
  <div
    role="button"
@@ -32,6 +32,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="flex gap-2 items-center">
    <div class="flex gap-1 items-center">
@@ -55,6 +55,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div
    class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800/50"
@@ -10,6 +10,7 @@ defineProps({
  },
 });
 </script>
+
 <template>
  <div class="flex flex-col w-full h-full gap-10 font-inter">
    <slot name="header" />
@@ -89,6 +89,7 @@ export default {
    />
  </div>
 </template>
+
 <style scoped>
 .bots-list {
  list-style: none;
@@ -22,6 +22,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <tr class="space-x-2">
    <td class="agent-bot--details">
@@ -54,6 +55,7 @@ export default {
    </td>
  </tr>
 </template>
+
 <style scoped lang="scss">
 .agent-bot--link {
  align-items: center;
@@ -22,6 +22,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <span class="inline-flex items-center gap-1">
    <img
@@ -33,6 +34,7 @@ export default {
    <span>{{ botTypeConfig[botType].label }}</span>
  </span>
 </template>
+
 <style scoped>
 .agent-bot-type--thumbnail {
  width: auto;
@@ -45,6 +45,7 @@ export default {
  },
 };
 </script>
+
 <template>
  <div class="csml-editor--container">
    <LoadingState
--- a/Show More
+++ b/Show More