first commit

2026-03-13 10:45:28 +07:00
commit 6bb6a1d430
568 changed files with 51753 additions and 0 deletions
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { HeartIcon, MoodSmileIcon, UserIcon } from "vue-tabler-icons";
+</script>
+<template>
+    <div class="d-flex gap-3 justify-center">
+        <v-avatar size="35">
+            <v-btn class="rounded-circle" color="primary" flat>
+            <UserIcon size="22"/>
+            <v-tooltip activator="parent" location="start">
+                    primary
+            </v-tooltip>
+        </v-btn>
+        </v-avatar>
+        <v-avatar size="35">
+            <v-btn class="rounded-circle" color="secondary" flat>
+            <HeartIcon color="white" size="22" />
+            <v-tooltip activator="parent" location="top">
+                    secondary
+            </v-tooltip>
+        </v-btn>
+        </v-avatar>
+        <v-avatar size="35">
+            <v-btn class="rounded-circle" color="warning" flat>
+            <MoodSmileIcon size="22" color="white"/>
+            <v-tooltip activator="parent" location="end">
+                    warning
+            </v-tooltip>
+        </v-btn>
+        </v-avatar>
+        <v-avatar size="35">
+            <v-btn class="rounded-circle" color="error" flat>
+            <HeartIcon size="22"/>
+            <v-tooltip activator="parent" location="bottom">
+                    error
+            </v-tooltip>
+        </v-btn>
+        </v-avatar>
+    </div>
+</template>
@@ -0,0 +1,20 @@
+<template>
+    <div class="d-flex flex-column flex-sm-row gap-3 justify-center">
+        <v-btn  color="primary" flat>
+            Start
+            <v-tooltip activator="parent" location="start">Tooltip</v-tooltip>
+        </v-btn>
+        <v-btn  color="primary" flat>
+            End
+            <v-tooltip activator="parent" location="end">Tooltip</v-tooltip>
+        </v-btn>
+        <v-btn  color="primary" flat>
+            Top
+            <v-tooltip activator="parent" location="top">Tooltip</v-tooltip>
+        </v-btn>
+        <v-btn  color="primary" flat>
+            Bottom
+            <v-tooltip activator="parent" location="bottom">Tooltip</v-tooltip>
+        </v-btn>
+    </div>
+</template>
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const show = ref(false);    
+</script>
+<template>
+    <div class="d-flex">
+        <v-btn @click="show = !show" color="primary" flat>
+            {{ !show ? 'Show Tooltip' : 'Hide Tooltip' }}
+        </v-btn>
+        <v-tooltip v-model="show" top>
+            <template v-slot:activator="{ props }">
+                <v-btn icon v-bind="props" class="ml-6" color="primary" flat>
+                    <v-icon> mdi-cart </v-icon>
+                </v-btn>
+            </template>
+            <span>Programmatic tooltip</span>
+        </v-tooltip>
+    </div>
+</template>