Merge pull request #27 from sinan-aydogan/TA-31

TA-31

package.json

@@ -40,6 +40,7 @@
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
         "@fortawesome/vue-fontawesome": "^3.0.0-4",
         "@popperjs/core": "^2.10.1",
+        "@vueuse/core": "^6.6.2",
         "chart.js": "^2.9.4",
         "simple-syntax-highlighter": "^2.0.6",
         "tailwind-scrollbar": "^1.3.0",

resources/css/app.css

@@ -7,7 +7,10 @@
 @import "./components/breadcrumb.css";
 @import "./components/button.css";
 @import "./components/collapsible.css";
+@import "./components/dropdown.css";
 @import "./components/loading.css";
+@import "./components/radius.css";
+
 
 /*Utilities*/
 @import 'tailwindcss/utilities';
@@ -169,15 +172,6 @@
     @apply inline-flex space-x-2 justify-end
 }
 
-/*Dropdown*/
-.dropdown{
-    @apply relative flex flex-row justify-between border whitespace-nowrap font-semibold p-2 items-center gap-2 cursor-pointer
-}
-/*Dropdown Child*/
-.dropdown-content{
-    @apply flex flex-col whitespace-normal z-10 absolute border rounded-md mt-1 overflow-hidden bg-white
-}
-
 /*Form Input*/
 /*SelectInput*/
 .select-container{

resources/css/components/dropdown.css

@@ -0,0 +1,48 @@
+.dropdown {
+    @apply relative max-w-min select-none
+}
+
+.dropdown-button-trigger {
+    @apply relative whitespace-nowrap space-x-2
+}
+
+.dropdown-button-trigger-content {
+    @apply flex flex-col whitespace-normal z-10 absolute border rounded-md mt-1 overflow-hidden bg-white
+}
+
+.dropdown-rich-trigger {
+    @apply cursor-pointer
+}
+
+.dropdown-rich-trigger-content {
+    @apply absolute flex flex-col whitespace-normal z-10
+}
+
+.dropdown-content-container {
+    @apply relative z-40
+}
+
+
+.dropdown-content-left {
+    @apply origin-top-left left-0
+}
+
+.dropdown-content-center {
+    @apply origin-top
+}
+
+.dropdown-content-right {
+    @apply origin-top-right right-0
+}
+
+.dropdown-content-wide {
+    @apply min-w-22
+}
+
+.dropdown-content-fit {
+    @apply min-w-min
+}
+
+.dropdown-trigger-icon {
+    @apply w-5 h-5 transform duration-300
+}

resources/css/components/radius.css

@@ -0,0 +1,58 @@
+/*TODO:Apply all of them*/
+.radius-0{
+    @apply rounded-none
+}
+.radius-1{
+    @apply rounded-sm
+}
+.radius-2{
+    @apply rounded
+}
+.radius-3{
+    @apply rounded-md
+}
+.radius-4{
+    @apply rounded-lg
+}
+.radius-5{
+    @apply rounded-xl
+}
+.radius-6{
+    @apply rounded-2xl
+}
+.radius-7{
+    @apply rounded-3xl
+}
+.radius-8{
+    @apply rounded-full
+}
+
+/*<editor-fold desc="Group Radius">*/
+.group-radius-0{
+    @apply rounded-none
+}
+.group-radius-1{
+    @apply first:rounded-t-sm last:rounded-b-sm
+}
+.group-radius-2{
+    @apply first:rounded-t last:rounded-b
+}
+.group-radius-3{
+    @apply first:rounded-t-md last:rounded-b-md
+}
+.group-radius-4{
+    @apply first:rounded-t-lg last:rounded-b-lg
+}
+.group-radius-5{
+    @apply first:rounded-t-xl last:rounded-b-xl
+}
+.group-radius-6{
+    @apply first:rounded-t-2xl last:rounded-b-2xl
+}
+.group-radius-7{
+    @apply first:rounded-t-3xl last:rounded-b-3xl
+}
+.group-radius-8{
+    @apply first:rounded-t-full last:rounded-b-full
+}
+/*</editor-fold>*/

resources/js/Components/Alert/TAlert.vue

@@ -3,11 +3,7 @@
         <!--Alert Container-->
         <div
             v-if="showAlertBox"
-            :class="[
-                'alert',
-                radiusStyle,
-                styleClass
-                ]"
+            :class="styleClass()"
         >
             <!--Inline Line-->
             <div v-if="design.includes('line')"
@@ -53,76 +49,75 @@
 </template>
 
 <script>
-import {defineComponent, ref} from 'vue'
-import {radiusSizeMixin} from "@/Mixins/radiusSizeMixin";
+import {defineComponent, ref, toRefs} from 'vue'
 import TXCircleIcon from "@/Components/Icon/TXCircleIcon";
 
 export default defineComponent({
     name: "TAlert",
     components: {TXCircleIcon},
-    mixins: [radiusSizeMixin],
     props: {
         id: {
             type: String
         },
         closeable: {
             type: Boolean,
-            required: false,
             default: false
         },
         timer: {
             type: Number,
             required: false
         },
-        type: {
-            type: String,
-            default: null
-        },
         title: {
             type: String,
             default: null
         },
+        radius: {
+            type: Number,
+            default: 3
+        },
         design: {
             type: String,
             default: 'filled'
         },
         color: {
             type: String,
             default: 'white'
-        },
-        gradientDirection: {
-            type: String,
-            default: 'r'
         }
     },
     setup(props, {slots, emit}) {
+        /*Definitions*/
+        const {design, color, radius, timer, id} = toRefs(props)
         const showAlertBox = ref(true)
-        /*Design Check*/
-        const design = props.design
-        const color = props.color
-        const styleClass = 'alert-' + design + '-' + color + ' alert-' + design + '-base'
+
+        /*Generating Style Classes*/
+        const styleClass = () => {
+            return  'alert ' +
+                'alert-' + design.value + '-' + color.value + ' '+
+                'alert-' + design.value + '-base' + ' '+
+                'radius-'+radius.value
+        }
 
         /*Close Function*/
         const close = () => {
             showAlertBox.value = false;
-            emit('destroy', props.id)
+            emit('destroy', id.value)
         }
 
         /*Timer*/
         const timerCounter = ref(0)
         const countDownCounter = ref(0)
 
-        if (props.timer) {
+        if (timer.value) {
             /*Timer Function*/
             let timerFn = setTimeout(() => {
                 showAlertBox.value = false;
-                emit('destroy', props.id)
-            }, props.timer)
+                emit('destroy', id.value)
+            }, timer.value)
 
             /*Count Down Function*/
             let countDownFn = setInterval(() => {
-                if (props.timer >= timerCounter.value) {
-                    countDownCounter.value = 100 - (timerCounter.value / props.timer) * 100
+                if (timer.value >= timerCounter.value) {
+                    countDownCounter.value = 100 - (timerCounter.value / timer.value) * 100
                     timerCounter.value += 4
                 } else {
                     clearInterval(countDownFn)