added tooltip and popper

siddiquipro · Oct 25, 2023 · de5cffa · de5cffa
1 parent 946c3f0
commit de5cffa
Show file tree

Hide file tree

Showing 15 changed files with 537 additions and 55 deletions.
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -1,21 +1,24 @@
 <template>
-  <div class="container mx-auto grid gap-6 py-10">
-    <div class="text-xl font-semibold">MASC Vue Component</div>
+	<div class="container mx-auto grid gap-6 py-10">
+		<div class="text-xl font-semibold">MASC Vue Component</div>
 
-    <buttons />
-    <alert />
+		<div>
+			<tooltip />
+		</div>
+		<buttons />
+		<alert />
 
-    <dropdown />
-    <stable />
+		<dropdown />
+		<stable />
 
-    <smodal />
-    <sconfirm />
+		<smodal />
+		<sconfirm />
 
-    <sloading />
-    <sicon />
+		<sloading />
+		<sicon />
 
-    <sform />
-  </div>
+		<sform />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -29,4 +32,5 @@ import smodal from "./components/smodal.vue";
 import sloading from "./components/sloading.vue";
 import sicon from "./components/sicon.vue";
 import sconfirm from "./components/sconfirm.vue";
+import tooltip from "./components/tooltip.vue";
 </script>
diff --git a/example/src/components/dropdown.vue b/example/src/components/dropdown.vue
@@ -1,17 +1,19 @@
 <template>
-  <s-card title="Dropdown">
-    <s-dropdown class="w-56">
-      <s-btn class="btn-primary w-full">DropDown Button</s-btn>
+	<s-card title="Dropdown">
+		<div class="p-4 bg-base-300 w-96 overflow-hidden">
+			<s-dropdown class="w-56">
+				<s-btn class="btn-primary w-full">DropDown Button</s-btn>
 
-      <template v-slot:content>
-        <ul class="menu p-2">
-          <li v-for="item in 10">
-            <a>Item {{ item }}</a>
-          </li>
-        </ul>
-      </template>
-    </s-dropdown>
-  </s-card>
+				<template v-slot:content>
+					<ul class="menu p-2">
+						<li v-for="item in 10">
+							<a>Item {{ item }}</a>
+						</li>
+					</ul>
+				</template>
+			</s-dropdown>
+		</div>
+	</s-card>
 </template>
 
 <script setup lang="ts"></script>
diff --git a/example/src/components/tooltip.vue b/example/src/components/tooltip.vue
@@ -0,0 +1,30 @@
+<template>
+	<div class="p-4 bg-base-300 overflow-hidden">
+		<div class="tooltip mb-4" data-tip="hello World">
+			<button class="btn">Hover me</button>
+		</div>
+
+		<s-btn class="my-4 btn-primary w-full" v-tooltip="text" data-placement="bottom">Directive element</s-btn>
+
+		<div class="relative">
+			<s-popper hover arrow class="w-full z-10" open>
+				<s-btn class="btn-primary w-full">Popper element</s-btn>
+				<template #content>
+					<div class="bg-base-100 shadow-xl rounded">
+						<div class="max-h-80 overflow-y-auto">
+							<ul class="menu">
+								<li v-for="i in 20">
+									<a>Item {{ i }}</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</template>
+			</s-popper>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+const text = `lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.`;
+</script>
diff --git a/packages/masc/package.json b/packages/masc/package.json
@@ -29,19 +29,19 @@
 	"dependencies": {
 		"@iconify/vue": "^4.1.1",
 		"@vueuse/core": "^10.4.1",
-		"tippy.js": "^6.3.7",
 		"vue": "^3.3.4"
 	},
 	"devDependencies": {
+		"@popperjs/core": "^2.11.8",
 		"@release-it/conventional-changelog": "^5.1.1",
-		"release-it": "^15.9.3",
-		"cross-env": "^7.0.3",
-		"sass": "^1.68.0",
 		"@types/node": "^20.8.2",
 		"@vitejs/plugin-vue": "^4.4.0",
 		"autoprefixer": "^10.4.16",
+		"cross-env": "^7.0.3",
 		"daisyui": "^3.9.1",
 		"postcss": "^8.4.31",
+		"release-it": "^15.9.3",
+		"sass": "^1.68.0",
 		"tailwindcss": "^3.3.3",
 		"typescript": "^5.2.2",
 		"vite": "^4.4.11",

diff --git a/packages/masc/src/components/index.ts b/packages/masc/src/components/index.ts
@@ -7,7 +7,8 @@ import { SIcon } from "./icon";
 import { SField } from "./formitem";
 import { SForm } from "./form";
 import { SDropdown } from "./dropdown";
+import { SPopper } from "./popper";
 
-export default { SBtn, SCard, SAppbar, STable, SPagination, STableColumn, SModal, SIcon, SField, SForm, SDropdown };
+export default { SBtn, SCard, SAppbar, STable, SPagination, STableColumn, SModal, SIcon, SField, SForm, SDropdown, SPopper };
 
-export { SBtn, SCard, SAppbar, STable, SPagination, STableColumn, SModal, SIcon, SField, SForm, SDropdown };
+export { SBtn, SCard, SAppbar, STable, SPagination, STableColumn, SModal, SIcon, SField, SForm, SDropdown, SPopper };
diff --git a/packages/masc/src/components/popper/index.ts b/packages/masc/src/components/popper/index.ts
@@ -0,0 +1,4 @@
+import SPopper from "./s-popper.vue";
+
+export default { SPopper };
+export { SPopper };
diff --git a/packages/masc/src/components/popper/s-arrow.vue b/packages/masc/src/components/popper/s-arrow.vue
@@ -0,0 +1,42 @@
+<template>
+	<div class="s-arrow" data-popper-arrow></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style>
+.s-arrow,
+.s-arrow::before {
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	background: inherit;
+	z-index: -1;
+}
+
+.s-arrow {
+	visibility: hidden;
+}
+
+.s-arrow::before {
+	visibility: visible;
+	content: "";
+	transform: rotate(45deg);
+}
+
+.s-popper[data-popper-placement^="top"] > .s-arrow {
+	bottom: -5px;
+}
+
+.s-popper[data-popper-placement^="bottom"] > .s-arrow {
+	top: -5px;
+}
+
+.s-popper[data-popper-placement^="left"] > .s-arrow {
+	right: -5px;
+}
+
+.s-popper[data-popper-placement^="right"] > .s-arrow {
+	left: -5px;
+}
+</style>