Merge pull request #360 from bethinkpl/LMS-1855

LMS-1855 | add none to POP_OVER_TRIGGER_ACTIONS
bethinkpl · May 21, 2024 · 4cd6a42 · 4cd6a42
2 parents 3fd6b98 + 602f1dd
commit 4cd6a42
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 40 deletions.
diff --git a/lib/js/components/PopOver/PopOver.consts.ts b/lib/js/components/PopOver/PopOver.consts.ts
@@ -6,6 +6,7 @@ export const POP_OVER_COLORS = {
 export const POP_OVER_TRIGGER_ACTIONS = {
 	CLICK: 'click',
 	HOVER: 'hover',
+	NONE: 'none',
 } as const;
 
 export const POP_OVER_PLACEMENTS = {

diff --git a/lib/js/components/PopOver/PopOver.vue b/lib/js/components/PopOver/PopOver.vue
@@ -1,48 +1,54 @@
 <template>
-	<vue-popper
-		ref="popper"
-		:key="key"
-		:boundaries-selector="boundariesSelector"
-		:force-show="forceShow"
-		:options="{ placement, modifiers }"
-		:trigger="triggerAction"
-		:delay-on-mouse-over="300"
-		:delay-on-mouse-out="300"
-		:append-to-body="appendToBody"
-		:visible-arrow="isPointerVisible"
-		:root-class="rootClass"
-	>
-		<div
-			class="popper ds-popOver"
-			:class="{
-				'-ds-color-neutral': color === POP_OVER_COLORS.NEUTRAL,
-				'-ds-small': size === POP_OVER_SIZES.SMALL,
-				'-ds-medium': size === POP_OVER_SIZES.MEDIUM,
-			}"
+	<div>
+		<div v-if="triggerAction === POP_OVER_TRIGGER_ACTIONS.NONE">
+			<slot name="reference" />
+		</div>
+		<vue-popper
+			v-else
+			ref="popper"
+			:key="key"
+			:boundaries-selector="boundariesSelector"
+			:force-show="forceShow"
+			:options="{ placement, modifiers }"
+			:trigger="triggerAction"
+			:delay-on-mouse-over="300"
+			:delay-on-mouse-out="300"
+			:append-to-body="appendToBody"
+			:visible-arrow="isPointerVisible"
+			:root-class="rootClass"
 		>
-			<img v-if="headerImageUrl" class="ds-popOver__image" :src="headerImageUrl" alt="" />
-			<div class="ds-popOver__content">
-				<div v-if="titleText" class="ds-popOver__title"> {{ titleText }} </div>
-				<div v-if="subtitleText" class="ds-popOver__subtitle"> {{ subtitleText }} </div>
-				<div class="ds-popOver__contentSlot" :class="{ '-ds-maxHeight': maxHeight }">
-					<slot :close="close" />
+			<div
+				class="popper ds-popOver"
+				:class="{
+					'-ds-color-neutral': color === POP_OVER_COLORS.NEUTRAL,
+					'-ds-small': size === POP_OVER_SIZES.SMALL,
+					'-ds-medium': size === POP_OVER_SIZES.MEDIUM,
+				}"
+			>
+				<img v-if="headerImageUrl" class="ds-popOver__image" :src="headerImageUrl" alt="" />
+				<div class="ds-popOver__content">
+					<div v-if="titleText" class="ds-popOver__title"> {{ titleText }} </div>
+					<div v-if="subtitleText" class="ds-popOver__subtitle"> {{ subtitleText }} </div>
+					<div class="ds-popOver__contentSlot" :class="{ '-ds-maxHeight': maxHeight }">
+						<slot :close="close" />
+					</div>
 				</div>
+				<ds-button
+					v-if="buttonText"
+					class="ds-popOver__button"
+					:type="BUTTON_TYPES.TEXT"
+					:size="BUTTON_SIZES.LARGE"
+					@click="$emit('button-click')"
+				>
+					{{ buttonText }}
+				</ds-button>
 			</div>
-			<ds-button
-				v-if="buttonText"
-				class="ds-popOver__button"
-				:type="BUTTON_TYPES.TEXT"
-				:size="BUTTON_SIZES.LARGE"
-				@click="$emit('button-click')"
-			>
-				{{ buttonText }}
-			</ds-button>
-		</div>
 
-		<template #reference>
-			<slot name="reference" />
-		</template>
-	</vue-popper>
+			<template #reference>
+				<slot name="reference" />
+			</template>
+		</vue-popper>
+	</div>
 </template>
 
 <style lang="scss" scoped>
@@ -287,6 +293,7 @@ export default {
 		return {
 			POP_OVER_COLORS: Object.freeze(POP_OVER_COLORS),
 			POP_OVER_SIZES: Object.freeze(POP_OVER_SIZES),
+			POP_OVER_TRIGGER_ACTIONS: Object.freeze(POP_OVER_TRIGGER_ACTIONS),
 			BUTTON_TYPES: Object.freeze(BUTTON_TYPES),
 			BUTTON_SIZES: Object.freeze(BUTTON_SIZES),
 			key: 1,