Skip to content

Commit 6386f61

Browse files
robsongajuniorrobsongajunior
committedMar 5, 2025··
feat: new componentgroup and section listdescriptionunordered, sectionoverview
·
v1.99.2v1.95.0
1 parent b150c01 commit 6386f61

9 files changed

+318
-20
lines changed
 

‎src/App.vue

+61-20
Original file line numberDiff line numberDiff line change
@@ -9,38 +9,79 @@
99
import SectionOverview from './templates/sectionoverview'
1010
1111
const MOCK = {
12-
overline: 'Marketplace',
13-
title: 'What is the Azion Marketplace?',
12+
overline: 'Overview',
13+
title: 'Proactively safeguard applications and APIs from automated bot attacks',
1414
description:
15-
'The Azion Marketplace is a digital catalog that makes it easy to find, test, and deploy edge-enabled software that runs anywhere. The Marketplace brings together a wide range of solutions that you can use to enhance, compose, or customize your applications.',
15+
'As more businesses progressively operate online, the risk from bots has escalated, making bot management a crucial component of cybersecurity. By adopting a robust strategy, businesses can detect, categorize, and neutralize malicious bots while allowing beneficial ones to operate. This approach enhances user experience, maintains site integrity, and secures sensitive business and customer data.',
1616
buttons: [
17+
// {
18+
// label: 'Try it for freet',
19+
// link: 'https://console.azion.com/signup'
20+
// },
1721
{
18-
label: 'Try it for freet',
19-
link: 'https://console.azion.com/signup'
20-
},
21-
{
22-
label: 'Become Partner',
23-
link: 'https://console.azion.com/signup',
22+
label: 'View Customer Success Stories',
23+
link: 'https://www.azion.com/en/success-cases/',
2424
outlined: 'true'
2525
}
2626
],
2727
data: [
2828
{
29-
icon: 'pi pi-bolt',
30-
// title: 'Agile',
31-
description:
32-
'Run code and deploy in minutes. From prototype to enterprise scale with NoOps, just code.'
29+
title: 'Reduce financial risks',
30+
items: [
31+
{
32+
icon: 'pi pi-check',
33+
description: 'Protecting your website and applications against a variety of attacks.'
34+
},
35+
{
36+
icon: 'pi pi-check',
37+
description:
38+
'Avoiding credential abuse, card balance verification, and other forms of online fraud.'
39+
},
40+
{
41+
icon: 'pi pi-check',
42+
description:
43+
"Avoiding legal fees and permanent damage to your company's image due to invasions and data breaches."
44+
}
45+
]
3346
},
3447
{
35-
icon: 'pi pi-arrow-right-arrow-left',
36-
// title: 'Diverse use cases',
37-
description:
38-
'Fraud detection, authentication and authorization, bot mitigation, and facial recognition, using technologies such as visual computing and artificial intelligence executed at the edge.'
48+
title: 'Boost your reliability and resilience',
49+
items: [
50+
{
51+
icon: 'pi pi-check',
52+
description:
53+
'Reducing the impact of bots on applications and the entire infrastructure.'
54+
},
55+
{
56+
icon: 'pi pi-check',
57+
description: 'Providing extensive bot protection through collective intelligence.'
58+
},
59+
{
60+
icon: 'pi pi-check',
61+
description:
62+
'Analyzing every request and acting preventively according to predefined, customizable rules.'
63+
}
64+
]
3965
},
4066
{
41-
icon: 'pi pi-dollar',
42-
// title: 'Cost-effective',
43-
description: 'Pricing is based on the edge resources and/or private edge locations in use.'
67+
title: 'Increase application and API observability',
68+
items: [
69+
{
70+
icon: 'pi pi-check',
71+
description:
72+
'Analyzing the amount and characteristics of bots trying to access your website, APIs, and applications.'
73+
},
74+
{
75+
icon: 'pi pi-check',
76+
description:
77+
'Using the observability tools provided by Azion to monitor malicious activity.'
78+
},
79+
{
80+
icon: 'pi pi-check',
81+
description:
82+
'Combine with other integrations from the Marketplace to enhance the efficiency of Bot Management.'
83+
}
84+
]
4485
}
4586
]
4687
}

‎src/templates/listdescriptionunordered/ListDescriptionUnordered.d.ts

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/**
2+
*
3+
* ListDescriptionUnordered
4+
*
5+
*
6+
* @module `listdescriptionunordered`
7+
*/
8+
import { VNode } from 'vue'
9+
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'
10+
11+
/**
12+
* Defines valid properties in ListDescriptionUnordered component.
13+
*/
14+
export interface ListDescriptionUnorderedProps {
15+
/**
16+
* @defaultValue () => []
17+
*/
18+
data: Array<{
19+
title: string
20+
items: Array<{
21+
icon: string
22+
description: string
23+
}>
24+
}>
25+
/**
26+
* @defaultValue 'default'
27+
*/
28+
severity?: string
29+
}
30+
31+
/**
32+
* Defines valid slots in ListDescriptionUnordered component.
33+
*/
34+
export interface ListDescriptionUnorderedSlots {
35+
/**
36+
* Content can easily be customized with the default slot instead of using the built-in modes.
37+
*/
38+
default(): VNode[]
39+
}
40+
41+
/**
42+
* Defines valid emits in ListDescriptionUnordered component.
43+
*/
44+
export interface ListDescriptionUnorderedEmits {
45+
/**
46+
* Triggered when an error occurs
47+
*/
48+
error(event: Event): void
49+
}
50+
51+
/**
52+
* @group Component
53+
*/
54+
declare class ListDescriptionUnordered extends ClassComponent<
55+
ListDescriptionUnorderedProps,
56+
ListDescriptionUnorderedSlots,
57+
ListDescriptionUnorderedEmits
58+
> {}
59+
60+
declare module 'vue' {
61+
export interface GlobalComponents {
62+
ListDescriptionUnordered: GlobalComponentConstructor<ListDescriptionUnordered>
63+
}
64+
}
65+
66+
export default ListDescriptionUnordered

‎src/templates/listdescriptionunordered/ListDescriptionUnordered.vue

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<div class="flex flex-col gap-12">
3+
<template
4+
v-for="({ title, items }, index) in props.data"
5+
:key="index"
6+
>
7+
<div class="flex flex-col gap-6">
8+
<p class="font-medium text-base">{{ title }}</p>
9+
<UnorderedList
10+
:severity="severity"
11+
:data="items"
12+
/>
13+
</div>
14+
</template>
15+
</div>
16+
</template>
17+
18+
<script setup>
19+
import UnorderedList from '../listunordered'
20+
21+
const props = defineProps({
22+
data: {
23+
type: Array,
24+
required: true,
25+
default: () => []
26+
},
27+
severity: {
28+
type: String,
29+
default: () => 'default',
30+
options: ['default', 'primary', 'secondary', 'warning', 'success', 'info']
31+
}
32+
})
33+
</script>

‎src/templates/listdescriptionunordered/listdescriptionunordered.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import ListDescriptionUnordered from './ListDescriptionUnordered.vue'
2+
export default ListDescriptionUnordered

‎src/templates/listdescriptionunordered/package.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"main": "./listdescriptionunordered.js",
3+
"types": "./ListDescriptionUnordered.d.ts",
4+
"browser": {
5+
"./sfc": "./ListDescriptionUnordered.vue"
6+
}
7+
}

‎src/templates/sectionoverview/SectionOverview.d.ts

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/**
2+
*
3+
* SectionOverview
4+
*
5+
*
6+
* @module `sectionoverview`
7+
*/
8+
import { VNode } from 'vue'
9+
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'
10+
11+
interface Button {
12+
label: string
13+
link: string
14+
outlined?: boolean // Optional, as not all buttons have this property
15+
}
16+
17+
// Type for individual content block objects
18+
interface ContentBlock {
19+
icon: string
20+
title: string
21+
description: string
22+
}
23+
24+
/**
25+
* Defines valid properties in SectionOverview component.
26+
*/
27+
export interface SectionOverviewProps {
28+
overline: string
29+
title: string
30+
description: string
31+
buttons: Button[]
32+
data: ContentBlock[]
33+
}
34+
35+
/**
36+
* Defines valid slots in SectionOverview component.
37+
*/
38+
export interface SectionOverviewSlots {
39+
/**
40+
* Content can easily be customized with the default slot instead of using the built-in modes.
41+
*/
42+
default(): VNode[]
43+
}
44+
45+
/**
46+
* Defines valid emits in SectionOverview component.
47+
*/
48+
export interface SectionOverviewEmits {
49+
/**
50+
* Triggered when an error occurs
51+
*/
52+
error(event: Event): void
53+
}
54+
55+
/**
56+
* @group Component
57+
*/
58+
declare class SectionOverview extends ClassComponent<
59+
SectionOverviewProps,
60+
SectionOverviewSlots,
61+
SectionOverviewEmits
62+
> {}
63+
64+
declare module 'vue' {
65+
export interface GlobalComponents {
66+
SectionOverview: GlobalComponentConstructor<SectionOverview>
67+
}
68+
}
69+
70+
export default SectionOverview

‎src/templates/sectionoverview/SectionOverview.vue

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<ContentSection
3+
:titleTag="titleTag"
4+
:title="title"
5+
:overline="overline"
6+
:description="description"
7+
>
8+
<template #actions>
9+
<LinkButton
10+
v-for="{ link, label, outlined } in buttons"
11+
:link="link"
12+
:label="label"
13+
:outlined="outlined"
14+
/>
15+
</template>
16+
<template #main>
17+
<DescriptionUnorderedList
18+
:severity="severity"
19+
:data="data"
20+
class="min-w-[40%]"
21+
/>
22+
</template>
23+
</ContentSection>
24+
</template>
25+
26+
<script setup>
27+
import ContentSection from '../contentsection'
28+
import LinkButton from '../linkbutton'
29+
import DescriptionUnorderedList from '../listdescriptionunordered'
30+
31+
defineProps({
32+
overline: {
33+
type: String
34+
},
35+
titleTag: {
36+
type: String,
37+
default() {
38+
return 'h2'
39+
},
40+
validator(value) {
41+
return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value)
42+
}
43+
},
44+
title: {
45+
type: String,
46+
required: true
47+
},
48+
description: {
49+
type: String,
50+
required: true
51+
},
52+
buttons: {
53+
type: Array,
54+
default() {
55+
return []
56+
}
57+
},
58+
severity: {
59+
type: String,
60+
default: () => 'primary',
61+
options: ['default', 'primary', 'secondary', 'warning', 'success', 'info']
62+
},
63+
data: {
64+
type: Array,
65+
default() {
66+
return []
67+
}
68+
}
69+
})
70+
</script>

‎src/templates/sectionoverview/package.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"main": "./sectionoverview.js",
3+
"types": "./SectionOverview.d.ts",
4+
"browser": {
5+
"./sfc": "./SectionOverview.vue"
6+
}
7+
}

‎src/templates/sectionoverview/sectionoverview.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import SectionOverview from './SectionOverview.vue'
2+
export default SectionOverview

0 commit comments

Comments
 (0)
Please sign in to comment.