Montime/webMontime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace emoji icons with Lucide icons

Browse Source
This commit is contained in:
Mahdi
2026-05-25 16:29:03 +03:30
parent 4f3d461dcf
commit bdad9ee073
9 changed files with 142 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+10
View File
@@ -8,6 +8,7 @@
"name": "montime-web",
"version": "0.0.1",
"dependencies": {
"@lucide/vue": "^1.16.0",
"@vueuse/core": "^12.8.2",
"pinia": "^2.3.1",
"vue": "^3.5.13",
@@ -562,6 +563,15 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@lucide/vue": {
"version": "1.16.0",
"resolved": "https://mirror-npm.runflare.com/@lucide/vue/-/vue-1.16.0.tgz",
"integrity": "sha512-kiHx0fe49DMjQuvNaEOu9Jou6u9FwdqQ8xbZIKlD47sXrOI8g59kIeeQL42NBLI4AvO+UJsbaPX0hEK/4rHSBQ==",
"license": "ISC",
"peerDependencies": {
"vue": ">=3.0.1"
}
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://mirror-npm.runflare.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
package.json
+1
View File
@@ -10,6 +10,7 @@
"typecheck": "vue-tsc --noEmit -p tsconfig.app.json"
},
"dependencies": {
"@lucide/vue": "^1.16.0",
"@vueuse/core": "^12.8.2",
"pinia": "^2.3.1",
"vue": "^3.5.13",
src/components/business/BusinessCard.vue
+9 -4
View File
@@ -16,8 +16,12 @@
<p v-if="business.description" class="mt-0.5 truncate text-xs text-muted">
{{ business.description }}
</p>
<p v-if="business.address" class="mt-0.5 truncate text-xs text-muted">
📍 {{ business.address }}
<p
v-if="business.address"
class="mt-0.5 flex items-center gap-1 truncate text-xs text-muted"
>
<AppIcon name="map-pin" size="sm" class="shrink-0" />
<span class="truncate">{{ business.address }}</span>
</p>
</div>
@@ -33,9 +37,9 @@
/>
<div
v-else
class="flex h-full w-full items-center justify-center text-xl text-muted/50"
class="flex h-full w-full items-center justify-center text-muted/40"
>
🏪
<AppIcon name="store" size="lg" />
</div>
</div>
</RouterLink>
@@ -44,6 +48,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import type { Business } from '@/api/types';
import AppIcon from '@/components/ui/AppIcon.vue';
import { businessCoverUrl } from '@/utils/media';
const props = defineProps<{
src/components/ui/AppIcon.vue
+72
View File
@@ -0,0 +1,72 @@
<template>
<component
:is="iconComponent"
:class="sizeClass"
:stroke-width="strokeWidth"
aria-hidden="true"
/>
</template>
<script setup lang="ts">
import type { Component } from 'vue';
import { computed } from 'vue';
import {
ArrowRight,
Calendar,
Camera,
CircleCheck,
ClipboardList,
FolderOpen,
Home,
LayoutDashboard,
MapPin,
Moon,
Plus,
Search,
Store,
Sun,
User,
Users,
X,
} from '@lucide/vue';
import type { AppIconName } from '@/types/icons';
const iconMap: Record<AppIconName, Component> = {
home: Home,
calendar: Calendar,
user: User,
store: Store,
plus: Plus,
'layout-dashboard': LayoutDashboard,
folder: FolderOpen,
'clipboard-list': ClipboardList,
users: Users,
'map-pin': MapPin,
sun: Sun,
moon: Moon,
'arrow-right': ArrowRight,
x: X,
camera: Camera,
'circle-check': CircleCheck,
search: Search,
};
const props = withDefaults(
defineProps<{
name: AppIconName;
size?: 'sm' | 'md' | 'lg';
strokeWidth?: number;
}>(),
{
size: 'md',
strokeWidth: 2,
},
);
const sizeClass = computed(() => {
const map = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' } as const;
return map[props.size];
});
const iconComponent = computed(() => iconMap[props.name]);
</script>
src/components/ui/ThemeToggle.vue
+3 -2
View File
@@ -5,13 +5,14 @@
:aria-label="isDark ? 'حالت روشن' : 'حالت تاریک'"
@click="toggle"
>
<span v-if="isDark" aria-hidden="true">☀️</span>
<span v-else aria-hidden="true">🌙</span>
<AppIcon v-if="isDark" name="sun" />
<AppIcon v-else name="moon" />
</button>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import AppIcon from '@/components/ui/AppIcon.vue';
import { useTheme } from '@/composables/useTheme';
const { isDark: mode, toggle } = useTheme();
src/layouts/WebAppLayout.vue
+10 -8
View File
@@ -41,7 +41,7 @@
: 'text-muted hover:bg-surface-3 hover:text-text'
"
>
<span class="text-lg" aria-hidden="true">{{ item.icon }}</span>
<AppIcon :name="item.icon" size="lg" />
<span>{{ item.label }}</span>
</RouterLink>
</div>
@@ -53,32 +53,34 @@
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import AppShell from '@/components/shell/AppShell.vue';
import AppIcon from '@/components/ui/AppIcon.vue';
import ThemeToggle from '@/components/ui/ThemeToggle.vue';
import type { NavItem } from '@/types/icons';
import { useAuthStore } from '@/stores/auth';
const auth = useAuthStore();
const route = useRoute();
const router = useRouter();
const navItems = computed(() => {
const items = [
{ to: '/app', name: 'app-home', label: 'خانه', icon: '🏠' },
{ to: '/app/bookings', name: 'app-bookings', label: 'رزروها', icon: '📅' },
{ to: '/app/profile', name: 'app-profile', label: 'پروفایل', icon: '👤' },
const navItems = computed((): NavItem[] => {
const items: NavItem[] = [
{ to: '/app', name: 'app-home', label: 'خانه', icon: 'home' },
{ to: '/app/bookings', name: 'app-bookings', label: 'رزروها', icon: 'calendar' },
{ to: '/app/profile', name: 'app-profile', label: 'پروفایل', icon: 'user' },
];
if (auth.isBusinessOwner) {
items.splice(2, 0, {
to: '/app/owner',
name: 'app-owner',
label: 'کسب‌وکار',
icon: '🏪',
icon: 'store',
});
} else if (auth.isCustomer) {
items.splice(2, 0, {
to: '/app/register-business',
name: 'app-register-business',
label: 'ثبت کسب‌وکار',
icon: '➕',
icon: 'plus',
});
}
return items;
src/types/icons.ts
+25
View File
@@ -0,0 +1,25 @@
export type AppIconName =
| 'home'
| 'calendar'
| 'user'
| 'store'
| 'plus'
| 'layout-dashboard'
| 'folder'
| 'clipboard-list'
| 'users'
| 'map-pin'
| 'sun'
| 'moon'
| 'arrow-right'
| 'x'
| 'camera'
| 'circle-check'
| 'search';
export type NavItem = {
to: string;
name: string;
label: string;
icon: AppIconName;
};
src/views/app/AppBusinessDetailView.vue
+4 -2
View File
@@ -10,10 +10,11 @@
<section v-else-if="business" class="space-y-6">
<button
type="button"
class="text-sm text-brand-600 dark:text-brand-500"
class="inline-flex items-center gap-1 text-sm text-brand-600 dark:text-brand-500"
@click="router.back()"
>
← بازگشت
<AppIcon name="arrow-right" size="sm" />
بازگشت
</button>
<div>
@@ -92,6 +93,7 @@ import { fetchBusiness } from '@/api/businesses';
import { ApiError } from '@/api/client';
import type { Business, BusinessService } from '@/api/types';
import AppButton from '@/components/ui/AppButton.vue';
import AppIcon from '@/components/ui/AppIcon.vue';
import WebAppLayout from '@/layouts/WebAppLayout.vue';
import { formatDuration, formatPriceToman } from '@/utils/format';
src/views/app/AppHomeView.vue
+8 -2
View File
@@ -6,14 +6,19 @@
<p class="mt-1 text-sm text-muted">کسب‌وکارهای محلی نزدیک شما</p>
</div>
<div>
<div class="relative">
<label class="sr-only" for="search">جستجو</label>
<AppIcon
name="search"
size="sm"
class="pointer-events-none absolute start-3 top-1/2 -translate-y-1/2 text-muted"
/>
<input
id="search"
v-model="searchQuery"
type="search"
placeholder="جستجو در نام یا آدرس…"
class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-sm text-text outline-none placeholder:text-muted focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
class="w-full rounded-xl border border-border bg-surface-2 py-3 pe-4 ps-10 text-sm text-text outline-none placeholder:text-muted focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
/>
</div>
@@ -58,6 +63,7 @@ import { fetchBusinesses } from '@/api/businesses';
import { ApiError } from '@/api/client';
import type { Business, BusinessCategory } from '@/api/types';
import BusinessCard from '@/components/business/BusinessCard.vue';
import AppIcon from '@/components/ui/AppIcon.vue';
import CategoryFilter from '@/components/business/CategoryFilter.vue';
import WebAppLayout from '@/layouts/WebAppLayout.vue';