chore: add components
This commit is contained in:
parent
73d549456e
commit
f52da5044e
115
src/components/Breadcrump.vue
Normal file
115
src/components/Breadcrump.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="breadcrump-box transition duration-300 ease-in-out py-3 ">
|
||||
<div class="card-body">
|
||||
<nav aria-label="breadcrumb" class="flex flex-wrap">
|
||||
<ul v-for="(itm,i) in arrBcPath" :key="`bread-${i}`" class="breadcrumb">
|
||||
<li v-if="i == 0 && itm[0] == '#'" class="breadcrumb-item flex-1 cursor-pointer" @click="bookselec(itm[i])">
|
||||
<span class="shield">
|
||||
<span class="icon">
|
||||
<svg
|
||||
v-if="itm === '#fa-cloud'"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="cloud"
|
||||
class="svg-inline--fa fa-cloud fa-w-16 dark:text-white text-blue-400"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
><path fill="currentColor" d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4z"></path></svg>
|
||||
<svg
|
||||
v-if="itm === '#fa-book'"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fad"
|
||||
data-icon="book-reader"
|
||||
class="svg-inline--fa fa-book-reader fa-w-16 dark:text-white"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M256 192a96 96 0 1 1 96-96 96 96 0 0 1-96 96z" opacity="0.4" /><path class="fa-primary" fill="currentColor" d="M233.59 241.1c-59.33-36.32-155.43-46.3-203.79-49C13.55 191.13 0 203.51 0 219.14v222.8c0 14.33 11.59 26.28 26.49 27.06 43.66 2.29 132 10.68 193 41.43 9.37 4.72 20.48-1.71 20.48-11.87v-246a13.31 13.31 0 0 0-6.38-11.46zm248.61-49c-48.35 2.74-144.46 12.73-203.78 49a13.56 13.56 0 0 0-6.42 11.63v245.79c0 10.19 11.14 16.63 20.54 11.9 61-30.72 149.32-39.11 193-41.4C500.42 468.24 512 456.29 512 442V219.14c0-15.63-13.55-28.01-29.8-27.09z" /></g></svg>
|
||||
<span v-else class="iconify" :data-icon="itm.replace('#','').replace('fa-','fa:')" />
|
||||
</span>
|
||||
</span>
|
||||
<span class="slash text-xs">/</span>
|
||||
</li>
|
||||
<li v-else-if="arrBcPath[i+1]" class="breadcrumb-item flex-1 cursor-pointer">
|
||||
<a href="#{itm}" class="mx-1 leading-tight text-xs" @click="(e) => { e.preventDefault(); $router.push(`/${itm}`)}">
|
||||
{{ translate(itm) }}</a>
|
||||
<span class="slash text-xs">/</span>
|
||||
</li>
|
||||
<li v-else class="breadcrumb-item active flex-1 mx-1 ml-1 leading-tight text-xs cursor-pointer" aria-current="page">
|
||||
<span style="line-height: 2.2em" @click="bookselec(itm)"> {{ translate(itm) }} </span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const props = defineProps({
|
||||
bcPath: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['onBookSelec'])
|
||||
// const currAppTab = ref('')
|
||||
const arrBcPath = computed(() => props.bcPath.split('/'))
|
||||
const bookselec = (book: any) => {
|
||||
emit('onBookSelec', book)
|
||||
}
|
||||
const { t, locale } = useI18n()
|
||||
const translate = (txt: any) => {
|
||||
const tr_txt = t(`bc.${txt}`)
|
||||
return tr_txt === `bc.${txt}` ? txt : tr_txt
|
||||
}
|
||||
// $: arrBcPath=bcPath.split("/");
|
||||
// const bookselec = (e) => {
|
||||
// dispatch("bookselec","main");
|
||||
// // console.log(`mode: ${mode} id: ${id} target: ${target}`);
|
||||
// const parent=".tabs-menu";
|
||||
// document.querySelectorAll(`${parent} span`).forEach(it => it.classList.remove('active') )
|
||||
// // e.target.parentElement.childNodes.forEach(it => it.classList.remove('active') )
|
||||
// // e.target.classList.add('active')
|
||||
// document.querySelectorAll(`${parent} span`).forEach(it => it.classList.remove('active') )
|
||||
// document.querySelectorAll(`${parent} span.itm-${id}`).forEach(it => it.classList.add('active') )
|
||||
// dispatch("choosetab",id);
|
||||
// //const tab=document.querySelector(`#${currTab}`);
|
||||
// //if (tab) { }
|
||||
// }
|
||||
</script>
|
||||
<style scoped>
|
||||
.breadcrumb-item .shield {
|
||||
padding: 0em 0.5em;
|
||||
/* margin-top: -0.4em; */
|
||||
}
|
||||
.breadcrumb-item .icon {
|
||||
padding: 0em;
|
||||
margin: 0;
|
||||
}
|
||||
.breadcrumb-item .icon svg {
|
||||
width: 100%;
|
||||
}
|
||||
.breadcrumb .breadcrumb-item {
|
||||
position: relative;
|
||||
}
|
||||
.breadcrumb-item a:hover {
|
||||
padding-bottom: 0.2em;
|
||||
border-bottom: 1px solid rgb(154, 154, 154);
|
||||
border-bottom-width: thin;
|
||||
border-bottom-style: dashed;
|
||||
}
|
||||
/*
|
||||
.breadcrumb .breadcrumb-item:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
*/
|
||||
.breadcrumb .breadcrumb-item:not(:last-child):after {
|
||||
content: '/';
|
||||
color: rgb(154, 154, 154);
|
||||
}
|
||||
</style>
|
||||
44
src/components/IconLink.vue
Normal file
44
src/components/IconLink.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<span class="flex" :class="{'justify-start': open}">
|
||||
<span v-if="pfx" class="-ml-5 mr-2 text-xs" :class="{ 'lg:hidden': open }">
|
||||
<small class="text-gray-400">{{ pfx }}</small>
|
||||
</span>
|
||||
<span v-if="icon === 'carbon-home'" class="mt-1"> <carbon-home /> </span>
|
||||
<span v-if="icon === 'carbon-campsite'" class="mt-1"> <carbon-campsite /> </span>
|
||||
<span v-if="icon === 'carbon-login'" class="mt-1"> <carbon-login /> </span>
|
||||
<span v-if="icon === 'carbon-dicom-overlay'" class="mt-1"> <carbon-dicom-overlay /> </span>
|
||||
<span v-if="icon === 'carbon-table'" class="mt-1"> <carbon-table class="dark:text-white" /> </span>
|
||||
<span v-if="icon === 'carbon-image'" class="mt-1"> <carbon-image /> </span>
|
||||
<span v-if="icon === 'carbon-storage-pool'" class="mt-1"> <carbon-storage-pool /> </span>
|
||||
<span v-if="icon === 'carbon-application'"> <carbon-application /> </span>
|
||||
<span v-if="icon === 'carbon-services'" class="mt-1"> <carbon-cloud-services /> </span>
|
||||
<span v-if="icon === 'carbon-event'"> <carbon-event /> </span>
|
||||
<span v-if="icon === 'carbon-operation'"> <carbon-operation /> </span>
|
||||
<span v-if="icon === 'carbon-api'"> <carbon-api /> </span>
|
||||
<span v-if="icon === 'carbon-cloud'" class="flex justify-center items-center"> <carbon-cloud /> </span>
|
||||
<span v-if="icon === 'carbon-flow'"> <carbon-flow /> </span>
|
||||
<span v-if="icon === 'carbon-nominal'"> <carbon-nominal /> </span>
|
||||
<span v-if="icon === 'carbon-language'"> <carbon-language /> </span>
|
||||
<span v-if="show_to && name && name !== 'items'" class="mt-1 ml-2 text-xs" :class="{ 'hidden': open }"> {{ t(`${name}`,name||'') || '' }}</span>
|
||||
<span v-if="mode !== 'icon'" class="ml-2" :class="{ 'lg:hidden': !open }"> {{ t(`${title}`,title||'') }}</span>
|
||||
<span v-if="show_to" :class="{ 'lg:hidden': !open }" class="ml-2 text-xs flex justify-center items-center "> {{ t(`${name}`,name || '') }}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NavItemType } from '~/typs'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
typ: NavItemType
|
||||
icon: string | undefined
|
||||
pfx: string | undefined
|
||||
name: string | undefined
|
||||
show_to: boolean | false
|
||||
title: string | undefined
|
||||
mode: sring | undefined
|
||||
open: boolean | false
|
||||
}>()
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user