fix: remove external dependency for icones (#805)

* change all icons to use iconify

* fix minor UI elements

* fix layout of table
This commit is contained in:
Hayden 2024-02-29 19:20:18 -06:00 committed by GitHub
parent cf166ac641
commit f91b33db38
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
40 changed files with 303 additions and 183 deletions

View file

@ -13,18 +13,13 @@
>
<h2 class="flex items-center justify-between gap-2">
<label class="swap swap-rotate" :class="isActive ? 'swap-active' : ''">
<Icon name="heroicons-arrow-right" class="swap-on h-6 w-6" />
<Icon name="heroicons-map-pin" class="swap-off h-6 w-6" />
<MdiArrowRight class="swap-on h-6 w-6" />
<MdiMapMarkerOutline class="swap-off h-6 w-6" />
</label>
<span class="mx-auto">
{{ location.name }}
</span>
<span
class="badge badge-primary h-6 badge-lg"
:class="{
'opacity-0': !hasCount,
}"
>
<span class="badge badge-primary h-6 badge-lg" :class="{ 'opacity-0': !hasCount }">
{{ count }}
</span>
</h2>
@ -34,6 +29,8 @@
<script lang="ts" setup>
import { LocationOut, LocationOutCount, LocationSummary } from "~~/lib/api/types/data-contracts";
import MdiArrowRight from "~icons/mdi/arrow-right";
import MdiMapMarkerOutline from "~icons/mdi/map-marker-outline";
const props = defineProps({
location: {

View file

@ -16,7 +16,7 @@
<BaseButton class="rounded-r-none" type="submit" :loading="loading"> Create </BaseButton>
<div class="dropdown dropdown-top">
<label tabindex="0" class="btn rounded-l-none rounded-r-xl">
<Icon class="h-5 w-5" name="mdi-chevron-down" />
<MdiChevronDown class="h-5 w-5" />
</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64 right-0">
<li>
@ -35,6 +35,7 @@
<script setup lang="ts">
import { LocationSummary } from "~~/lib/api/types/data-contracts";
import MdiChevronDown from "~icons/mdi/chevron-down";
const props = defineProps({
modelValue: {
type: Boolean,

View file

@ -8,7 +8,7 @@
v-if="selected"
:class="['absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-primary']"
>
<Icon name="mdi-check" class="h-5 w-5" aria-hidden="true" />
<MdiCheck class="h-5 w-5" aria-hidden="true" />
</span>
</div>
<div v-if="cast(item.value).name != cast(item.value).treeString" class="text-xs mt-1">
@ -22,6 +22,7 @@
<script lang="ts" setup>
import { FlatTreeItem, useFlatLocations } from "~~/composables/use-location-helpers";
import { LocationSummary } from "~~/lib/api/types/data-contracts";
import MdiCheck from "~icons/mdi/check";
type Props = {
modelValue?: LocationSummary | null;

View file

@ -1,6 +1,10 @@
<script setup lang="ts">
import { useTreeState } from "./tree-state";
import { TreeItem } from "~~/lib/api/types/data-contracts";
import MdiChevronDown from "~icons/mdi/chevron-down";
import MdiChevronRight from "~icons/mdi/chevron-right";
import MdiMapMarker from "~icons/mdi/map-marker";
import MdiPackageVariant from "~icons/mdi/package-variant";
type Props = {
treeId: string;
@ -56,12 +60,12 @@
'swap-active': openRef,
}"
>
<Icon name="mdi-chevron-right" class="h-6 w-6 swap-off" />
<Icon name="mdi-chevron-down" class="h-6 w-6 swap-on" />
<MdiChevronRight name="mdi-chevron-right" class="h-6 w-6 swap-off" />
<MdiChevronDown name="mdi-chevron-down" class="h-6 w-6 swap-on" />
</label>
</div>
<Icon v-if="item.type === 'location'" name="mdi-map-marker" class="h-4 w-4" />
<Icon v-else name="mdi-package-variant" class="h-4 w-4" />
<MdiMapMarker v-if="item.type === 'location'" class="h-4 w-4" />
<MdiPackageVariant v-else class="h-4 w-4" />
<NuxtLink class="hover:link text-lg" :to="link" @click.stop>{{ item.name }} </NuxtLink>
</div>
<div v-if="openRef" class="ml-4">