Skip to content

Commit

Permalink
feat: enhance preset css and reorder navigation link elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@tada5hi
tada5hi committed Oct 17, 2024
1 parent 52f4ad0 commit 6705bed
Show file tree
Hide file tree
Showing 6 changed files with 57 additions and 45 deletions.
2 changes: 1 addition & 1 deletion examples/nuxt/plugins/vue-layout.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import installFormControl from '@vuecs/form-controls';
import installGravatar from '@vuecs/gravatar';
import installLink from '@vuecs/link';
import { install as installNavigation } from '@vuecs/navigation';
import '@vuecs/navigation/../dist/index.css';
// import '@vuecs/navigation/../dist/index.css';
import '@vuecs/pagination/../dist/index.css';
import '@vuecs/list-controls/../dist/index.css';
import installPagination from '@vuecs/pagination';
Expand Down
36 changes: 16 additions & 20 deletions packages/navigation/assets/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,22 @@
list-style: none;
}

.vc-nav-items .vc-nav-link i,
.vc-nav-items .vc-nav-sub-level-title i {
padding-right: 4px;
}

.vc-nav-items .vc-nav-link,
.vc-nav-items .vc-nav-item .vc-nav-sub-level-title {
.vc-nav-items .vc-nav-link {
cursor: pointer;
color: #aeb2b7;
padding: 18px 15px 18px 15px;
display: block;
font-size: 13px;
padding: 1rem;
font-size: 0.8rem;
text-align: left;
text-decoration: none;
display: flex;
flex-direction: row;
gap: 0.4rem;
}

/* for now */
.vc-nav-items .vc-nav-item:hover .vc-nav-title,
.vc-nav-items .vc-nav-item:hover .vc-nav-sub-level-title,

.vc-nav-items .vc-nav-item:active .vc-nav-title,
.vc-nav-items .vc-nav-item:active .vc-nav-sub-level-title,

.vc-nav-items .vc-nav-item.active .vc-nav-title,
.vc-nav-items .vc-nav-item.active .vc-nav-sub-level-title {
.vc-nav-items .vc-nav-item.vc-nav-item-nested:hover > .vc-nav-link,
.vc-nav-items .vc-nav-item.vc-nav-item-nested:active > .vc-nav-link,
.vc-nav-items .vc-nav-item.vc-nav-item-nested.active > .vc-nav-link {
background: #c8b98d;
color: #fff;
}
Expand Down Expand Up @@ -61,7 +52,8 @@
align-items: center;
font-size:14px;
font-weight: bold;
padding:5px 0;
padding: 0.4rem 0;
background: rgba(151, 151, 153, 0.1);
}

.vc-nav-items .vc-nav-separator:before,
Expand All @@ -80,7 +72,11 @@
margin-left: 0.4rem;
}

.vc-nav-items .vc-nav-sub-level-items .vc-nav-link {
.vc-nav-item-nested:not(.active) .vc-nav-items {
display: none;
}

.vc-nav-item-nested .vc-nav-items .vc-nav-link {
border-left-width: 6px;
border-left-style: solid;
border-left-color: rgb(64,67,78);
Expand Down
42 changes: 31 additions & 11 deletions packages/navigation/src/components/item/module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type { LinkProperties } from '@vuecs/link';
import { VCLink } from '@vuecs/link';
import type { PropType, VNodeChild } from 'vue';
import {
computed,
defineComponent,
h,
resolveComponent,
Expand All @@ -34,6 +35,8 @@ export const VCNavItem = defineComponent({
const manager = injectNavigationManager();

const data = toRef(props, 'data');
const hasChildren = computed(() => data.value.children &&
data.value.children.length > 0);

const select = async (
value: NavigationItemNormalized,
Expand Down Expand Up @@ -119,14 +122,22 @@ export const VCNavItem = defineComponent({
}, {
default: () => [
...(data.value.icon ?
[h('i', { class: data.value.icon })] :
[h(
options.linkIconTag,
{
class: options.linkIconClass,
},
[
h('i', { class: data.value.icon }),
],
)] :
[]
),
h(
options.linkTextTag,
{ class: options.linkTextClass },
[data.value.name],
),
h(options.linkTextTag, {
class: options.linkTextClass,
}, [
data.value.name,
]),
],
});
}
Expand All @@ -148,26 +159,34 @@ export const VCNavItem = defineComponent({
});
} else {
title = h('div', {
class: options.subGroupTitleClass,
class: options.linkClass,
onClick($event: any) {
$event.preventDefault();

return toggle(data.value);
},
}, [[
}, [
...(data.value.icon ?
[h('i', { class: data.value.icon })] :
[h(
options.linkIconTag,
{
class: options.linkIconClass,
},
[
h('i', { class: data.value.icon }),
],
)] :
[]
),
h(options.linkTextTag, {
class: options.linkTextClass,
}, [
data.value.name,
]),
]]);
]);
}

if (!data.value.displayChildren) {
if (!hasChildren.value) {
return title;
}

Expand Down Expand Up @@ -195,6 +214,7 @@ export const VCNavItem = defineComponent({
return h(options.itemTag, {
class: [
options.itemClass,
...(hasChildren.value ? [options.itemNestedClass] : []),
{
active: data.value.active || data.value.displayChildren,
},
Expand Down
4 changes: 1 addition & 3 deletions packages/navigation/src/components/items/module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,7 @@ export const VCNavItems = defineComponent({
}

return h(options.groupTag, {
class: props.data ?
options.subGroupItemsClass :
options.groupClass,
class: options.groupClass,
}, vNodes);
};
},
Expand Down
11 changes: 5 additions & 6 deletions packages/navigation/src/helpers/component/build.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,18 @@ export function buildComponentOptions() : ComponentOptions {
groupTag: manager.get('groupTag') || 'ul',

itemClass: mergeOption('class', manager.get('itemClass'), 'vc-nav-item') as VNodeClass,
itemNestedClass: mergeOption('class', manager.get('itemNestedClass'), 'vc-nav-item-nested') as VNodeClass,
itemTag: manager.get('itemTag') || 'li',

subGroupTitleClass: mergeOption('class', manager.get('subGroupTitleClass'), 'vc-nav-sub-level-title') as VNodeClass,
subGroupItemsClass: mergeOption('class', manager.get('subGroupTitleClass'), 'vc-nav-sub-level-items') as VNodeClass,

separatorTag: manager.get('separatorTag') || 'div',
separatorClass: mergeOption('class', manager.get('iconClass'), 'vc-nav-separator') as VNodeClass,
separatorClass: mergeOption('class', manager.get('linkIconClass'), 'vc-nav-separator') as VNodeClass,

iconClass: mergeOption('class', manager.get('iconClass'), 'vc-nav-icon') as VNodeClass,
linkIconTag: manager.get('linkIconTag') || 'div',
linkIconClass: mergeOption('class', manager.get('linkIconClass'), 'vc-nav-link-icon') as VNodeClass,

linkClass: mergeOption('class', manager.get('linkClass'), 'vc-nav-link') as VNodeClass,
linkRootClass: mergeOption('class', manager.get('linkRootClass'), 'vc-nav-link-root') as VNodeClass,
linkTextTag: manager.get('linkTextTag') || 'span',
linkTextTag: manager.get('linkTextTag') || 'div',
linkTextClass: mergeOption('class', manager.get('linkTextClass'), 'vc-nav-link-text') as VNodeClass,
};
}
7 changes: 3 additions & 4 deletions packages/navigation/src/helpers/component/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,15 @@ export type ComponentOptions = {
groupClass: VNodeClass,
groupTag: VNodeClass,

subGroupTitleClass: VNodeClass,
subGroupItemsClass: VNodeClass,

itemClass: VNodeClass,
itemNestedClass: VNodeClass,
itemTag: string,

separatorTag: string,
separatorClass: VNodeClass,

iconClass: VNodeClass
linkIconTag: string,
linkIconClass: VNodeClass

linkClass: VNodeClass,
linkRootClass?: VNodeClass,
Expand Down

0 comments on commit 6705bed

Please sign in to comment.