#74 - vacation calendar (#87)

* - polishing calendar

* wip

* wip

* #74 - wip

* #74 - wip

* #74 - wip

* #74 - fix icons

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>

resources/js/Shared/VacationType.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex items-center">
+    <component
+      :is="vacationTypeInfo.icon"
+      :class="[vacationTypeInfo.color ,'w-5 h-5 mr-1.5']"
+      :size="20"
+    />
+    <span>{{ vacationTypeInfo.text }}</span>
+  </div>
+</template>
+
+<script>
+import {computed} from 'vue'
+import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
+
+export default {
+  name: 'VacationType',
+  props: {
+    type: {
+      type: String,
+      default: () => null,
+    },
+    last: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  setup(props) {
+    const { findType } = useVacationTypeInfo()
+
+    const vacationTypeInfo = computed(() => findType(props.type))
+
+    return {
+      vacationTypeInfo,
+    }
+  },
+}
+</script>

resources/js/Shared/VacationTypeCalendarIcon.vue

@@ -0,0 +1,48 @@
+<template>
+  <Popper hover>
+    <div class="flex items-center">
+      <div>
+        <span :class="[typeInfo.color, 'flex items-center justify-center']">
+          <component :is="typeInfo.icon" />
+        </span>
+      </div>
+    </div>
+    <template #content>
+      <div class="px-2 py-1 bg-white text-xs text-gray-900 shadow-md ">
+        {{ typeInfo.text }}
+      </div>
+    </template>
+  </Popper>
+</template>
+
+<script>
+import {computed} from 'vue'
+import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
+import Popper from 'vue3-popper'
+
+export default {
+  name: 'VacationTypeCalendarIcon',
+  components: {
+    Popper,
+  },
+  props: {
+    type: {
+      type: String,
+      default: () => null,
+    },
+    last: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  setup(props) {
+    const { findType } = useVacationTypeInfo()
+
+    const typeInfo = computed(() => findType(props.type))
+
+    return {
+      typeInfo,
+    }
+  },
+}
+</script>