Skip to content

Commit

Permalink
daisyui3 tree
Browse files Browse the repository at this point in the history
  • Loading branch information
arily committed Jun 30, 2023
1 parent 2dba7d1 commit f77a3ca
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 73 deletions.
69 changes: 39 additions & 30 deletions src/components/app/score-list-item.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,37 +108,24 @@ const meta = computed(
},
}" class="truncate"
>
<template v-if="meta">
<span class="text-sm truncate md:text-md lg:text-lg font-bold flex gap-2 items-center">
<!-- eslint-disable-next-line vue/no-extra-parens -->
<icon v-if="beatmap.status in rankingStatusIconMapping" :name="(rankingStatusIconMapping[beatmap.status] as string)" :aria-label="beatmap.status" />
{{ meta.artist }} - {{ meta.title }}</span>
</template>
<div v-if="meta" class="flex gap-2 items-center">
<icon v-if="beatmap.status in rankingStatusIconMapping" :name="rankingStatusIconMapping[beatmap.status]" class="w-5 h-5 md:w-6 md:h-6 lg:w-6 lg:h-6" :aria-label="beatmap.status" />
<span class=" text-sm truncate md:text-md lg:text-lg font-bold">
{{ meta.artist }} - {{ meta.title }}
</span>
</div>
</router-link>
</template>
<div v-else>
Unknown Beatmap
</div>
<div class="flex text-xs gap-2 md:text-sm lg:text-md flex-wrap">
<div class="flex gap-2">
<span v-if="beatmap" class="font-semibold">
{{ beatmap.version }}
</span>
<span class="font-light">
{{ score.mods.map(i => StableMod[i]).join(", ") || "NoMod" }}
</span>
</div>
<div class="flex">
<div v-if="beatmap" class="font-semibold">
{{ score.maxCombo }} / {{ beatmap.properties.maxCombo }}
</div>
<div v-else class="font-semibold">
{{ score.maxCombo }}
</div>
<div class="font-light">
x
</div>
</div>
<span v-if="beatmap" class="font-semibold">
{{ beatmap.version }}
</span>
<span v-if="score.mods.length" class="flex justify-end gap-1 tooltip tooltip-primary lg:tooltip-right" :data-tip="score.mods.map(m => StableMod[m]).join(', ')">
<app-mod v-for="mod in score.mods" :key="mod" :mod="mod" class="w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6" />
</span>
</div>
<div class="mt-auto map-date">
<time class="text-xs italic lg:text-sm font-extralight">
Expand All @@ -162,11 +149,33 @@ const meta = computed(
</div>
</template>
</div>
<div class="flex mt-auto text-xs md:text-md lg:text-md whitespace-nowrap justify-end">
<b class="font-mono">{{ score.accuracy.toFixed(2) }}</b>
<div class="text-light">
% Acc
</div>
<div class="flex gap-2 mt-auto text-sm md:text-md lg:text-md whitespace-nowrap justify-end">
<span class="flex items-center">
<template v-if="beatmap">
<div class="font-semibold">
{{ score.maxCombo }}
</div>
<div class="font-light text-xs px-1">
/
</div>
<div>
{{ beatmap.properties.maxCombo }}
</div>
</template>
<div v-else>
{{ score.maxCombo }}
</div>
<div class="font-light">
x
</div>
</span>

<span class="flex">
<b class="font-mono">{{ score.accuracy.toFixed(2) }}</b>
<div class="text-light">
% Acc
</div>
</span>
</div>
</div>
<div class="flex items-center justify-center">
Expand Down
49 changes: 13 additions & 36 deletions src/components/tree.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
<script setup lang="ts">
import type { TSingleSelect } from '#components'
interface Prop {
path: string
name: string
Expand All @@ -9,45 +7,24 @@ interface Prop {
const props = defineProps<Prop>()
const emit = defineEmits<(event: 'select', data: Prop) => void>()
const stack = ref<Prop[]>([props])
const t = ref<InstanceType<typeof TSingleSelect>>()
function levelUp(lv: number) {
if (lv <= 0) {
lv = 1
}
stack.value.splice(lv)
}
const selected = computed(() => stack.value.at(-1) || props)
const children = computed(() => selected.value.children?.sort(a => a.children ? -1 : 1).map(child => ({ value: child, label: ((child.children ? '> ' : '- ') + child.name) as string | number })) || [])
type Child = typeof children['value'][number]
const selectedChildren = ref<Child>()
function select({ value: child }: Child) {
if (child.children) {
stack.value.push(child)
return
}
emit('select', child)
}
</script>

<template>
<div class="flex gap-2">
<div class="text-sm breadcrumbs">
<li>
<details v-if="props.children" open>
<summary>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" /></svg>
{{ props.name }}
</summary>
<ul>
<li v-for="(p, level) in stack" :key="`p-${p}`">
<a @click.prevent="levelUp(level)">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 mr-2 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
{{ p.name }}
</a>
</li>
<li />
<tree v-for="p in props.children" v-bind="p" :key="`p-${p}`" @select="p => emit('select', p)" />
</ul>
</div>
<t-single-select v-if="selected.children" ref="t" v-model="selectedChildren" class="font-mono" size="sm" :options="children" @update:model-value="(value) => select(value)" />
</div>
</details>
<a v-else @click.prevent="emit('select', props)">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
{{ props.name }}
</a>
</li>
</template>

<style scoped>
Expand Down
16 changes: 9 additions & 7 deletions src/pages/article/edit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,13 +144,15 @@ async function postFetch() {

<template>
<section class="container pb-8 mx-auto custom-container lg:px-2">
<tree
v-bind="articles" @select="(entry) => {
article.slug = entry.path
update()
postFetch()
}"
/>
<ul class="menu menu-xs bg-base-100 rounded-lg max-w-xs w-full">
<tree
v-bind="articles" @select="(entry) => {
article.slug = entry.path
update()
postFetch()
}"
/>
</ul>
<div class="flex gap-2 items-baseline">
Editing: <input
v-model="article.slug" type="text" class="input input-sm shadow-lg" :class="{
Expand Down

0 comments on commit f77a3ca

Please sign in to comment.