move multiselect components, week start and timezon functions to ui package

resources/js/Components/Common/Client/ClientMultiselectDropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import MultiselectDropdown from '@/Components/Common/MultiselectDropdown.vue';
+import MultiselectDropdown from '@/packages/ui/src/Input/MultiselectDropdown.vue';
 import { storeToRefs } from 'pinia';
 import type { Client } from '@/packages/api/src';
 import { useClientsStore } from '@/utils/useClients';

resources/js/Components/Common/Member/MemberMultiselectDropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import MultiselectDropdown from '@/Components/Common/MultiselectDropdown.vue';
+import MultiselectDropdown from '@/packages/ui/src/Input/MultiselectDropdown.vue';
 import { useMembersStore } from '@/utils/useMembers';
 import { storeToRefs } from 'pinia';
 import type { Member } from '@/packages/api/src';

resources/js/Components/Common/Project/ProjectMultiselectDropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import MultiselectDropdown from '@/Components/Common/MultiselectDropdown.vue';
+import MultiselectDropdown from '@/packages/ui/src/Input/MultiselectDropdown.vue';
 import { storeToRefs } from 'pinia';
 import { useProjectsStore } from '@/utils/useProjects';
 import type { Project } from '@/packages/api/src';

resources/js/Components/Common/Task/TaskMultiselectDropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import MultiselectDropdown from '@/Components/Common/MultiselectDropdown.vue';
+import MultiselectDropdown from '@/packages/ui/src/Input/MultiselectDropdown.vue';
 import { storeToRefs } from 'pinia';
 import type { Task } from '@/packages/api/src';
 import { useTasksStore } from '@/utils/useTasks';

resources/js/Components/Dashboard/ThisWeekOverview.vue

@@ -17,7 +17,7 @@ import LinearGradient from 'zrender/lib/graphic/LinearGradient';
 import ProjectsChartCard from '@/Components/Dashboard/ProjectsChartCard.vue';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import { formatCents } from '@/packages/ui/src/utils/money';
-import { getWeekStart } from '@/utils/useUser';
+import { getWeekStart } from '@/packages/ui/src/utils/settings';
 import { useCssVar } from '@vueuse/core';
 import { getOrganizationCurrencyString } from '@/utils/money';
 

resources/js/packages/ui/package.json

@@ -36,17 +36,27 @@
     "type": "module",
     "author": "solidtime",
     "license": "AGPL-3.0",
-    "peerDependencies": {
+    "devDependencies": {
-        "@floating-ui/vue": "^1.1.4",
-        "tailwind-merge": "^2.5.2",
-        "@heroicons/vue": "^2.1.5",
-        "@types/node": "^22.4.1",
         "@vitejs/plugin-vue": "^5.1.2",
         "@vue/tsconfig": "^0.5.1",
+        "autoprefixer": "^10.4.20",
+        "postcss-import": "^15.1.0"
+    },
+    "peerDependencies": {
+        "@floating-ui/vue": "^1.1.4",
+        "@heroicons/vue": "^2.1.5",
+        "@types/node": "^22.4.1",
+        "@vueuse/core": "^10.11.0",
         "dayjs": "^1.11.13",
+        "parse-duration": "^1.1.0",
+        "postcss": "^8.4.14",
+        "postcss-nesting": "^12.1.0",
+        "tailwind-merge": "^2.5.2",
+        "tailwindcss": "^3.1.0",
         "typescript": "^5.5.4",
         "vite": "^5.4.1",
         "vue": "^3.4.38",
-        "vue-tsc": "^2.0.29"
+        "vue-tsc": "^2.0.29",
+        "@zodios/core": "^10.9.6"
     }
 }

resources/js/packages/ui/postcss.config.js

@@ -0,0 +1,8 @@
+export default {
+    plugins: {
+        'postcss-import': {},
+        'tailwindcss/nesting': {},
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

resources/js/packages/ui/src/Input/MultiselectDropdown.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T">
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 import { type Component, computed, nextTick, ref, watch } from 'vue';
-import MultiselectDropdownItem from '@/Components/Common/MultiselectDropdownItem.vue';
+import MultiselectDropdownItem from '@/packages/ui/src/Input/MultiselectDropdownItem.vue';
 
 const model = defineModel<string[]>({
     default: [],

resources/js/packages/ui/src/Tag/TagDropdown.vue

@@ -3,7 +3,7 @@ import { PlusCircleIcon } from '@heroicons/vue/20/solid';
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 import { type Component, computed, nextTick, ref, watch } from 'vue';
 import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
-import MultiselectDropdownItem from '@/Components/Common/MultiselectDropdownItem.vue';
+import MultiselectDropdownItem from '@/packages/ui/src/Input/MultiselectDropdownItem.vue';
 import type { Tag } from '@/packages/api/src';
 import type { Placement } from '@floating-ui/vue';
 
@@ -67,7 +67,7 @@ watch(open, (isOpen) => {
 });
 
 const filteredTags = computed(() => {
-    return sortedTags.value.filter((tag) => {
+    return sortedTags.value.filter((tag: Tag) => {
         return tag.name
             .toLowerCase()
             .includes(searchValue.value?.toLowerCase()?.trim() || '');

resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue

@@ -40,28 +40,28 @@ const props = defineProps<{
 }>();
 
 function updateTimeEntryDescription(description: string) {
-    const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
+    const updatedTimeEntries = props.timeEntry.timeEntries.map((entry: TimeEntry) => {
         return { ...entry, description };
     });
     props.updateTimeEntries(updatedTimeEntries);
 }
 
 function updateTimeEntryTags(tags: string[]) {
-    const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
+    const updatedTimeEntries = props.timeEntry.timeEntries.map((entry: TimeEntry) => {
         return { ...entry, tags };
     });
     props.updateTimeEntries(updatedTimeEntries);
 }
 
 function updateTimeEntryBillable(billable: boolean) {
-    const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
+    const updatedTimeEntries = props.timeEntry.timeEntries.map((entry: TimeEntry) => {
         return { ...entry, billable };
     });
     props.updateTimeEntries(updatedTimeEntries);
 }
 
 function updateProjectAndTask(projectId: string, taskId: string) {
-    const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
+    const updatedTimeEntries = props.timeEntry.timeEntries.map((entry: TimeEntry) => {
         return { ...entry, project_id: projectId, task_id: taskId };
     });
     props.updateTimeEntries(updatedTimeEntries);

resources/js/packages/ui/src/utils/settings.ts

@@ -0,0 +1,19 @@
+export function getWeekStart() {
+    const weekStart = window?.getWeekStartSetting() as string;
+
+    if (!weekStart) {
+        throw new Error(
+            'Please make sure to provide the current user week start setting as a vue inject (week_start)'
+        );
+    }
+    return weekStart;
+}
+export function getUserTimezone() {
+    const timezone = window?.getTimezoneSetting() as string;
+    if (!timezone) {
+        throw new Error(
+            'Please make sure to provide the current user timezone as a vue inject (timezone)'
+        );
+    }
+    return timezone;
+}

resources/js/packages/ui/src/utils/time.ts

@@ -6,7 +6,7 @@ import isYesterday from 'dayjs/plugin/isYesterday';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
-import { getUserTimezone, getWeekStart } from '@/utils/useUser';
+import { getUserTimezone, getWeekStart } from './settings';
 import updateLocale from 'dayjs/plugin/updateLocale';
 import { computed } from 'vue';
 

resources/js/utils/useUser.ts

@@ -10,16 +10,6 @@ function getCurrentUserId() {
     return page.props.auth.user.id;
 }
 
-function getWeekStart() {
-    const weekStart = window?.getWeekStartSetting() as string;
-
-    if (!weekStart) {
-        throw new Error(
-            'Please make sure to provide the current user week start setting as a vue inject (week_start)'
-        );
-    }
-    return weekStart;
-}
 
 function getCurrentOrganizationId() {
     return page.props.auth.user.current_team_id;
@@ -37,21 +27,11 @@ function getCurrentRole() {
     )?.membership.role;
 }
 
-function getUserTimezone() {
+
-    const timezone = window?.getTimezoneSetting() as string;
-    if (!timezone) {
-        throw new Error(
-            'Please make sure to provide the current user timezone as a vue inject (timezone)'
-        );
-    }
-    return timezone;
-}
 
 export {
     getCurrentOrganizationId,
     getCurrentUserId,
-    getUserTimezone,
-    getWeekStart,
     getCurrentMembershipId,
     getCurrentRole,
 };