nuxt-glorious 1.2.1-3 → 1.2.1-4
Sign up to get free protection for your applications and to get access to all the features.
package/dist/module.json
CHANGED
@@ -0,0 +1,55 @@
|
|
1
|
+
<script lang="ts" setup>
|
2
|
+
interface breadcrumbInterface {
|
3
|
+
text: String;
|
4
|
+
icon: String;
|
5
|
+
to: String;
|
6
|
+
}
|
7
|
+
|
8
|
+
const props = defineProps({
|
9
|
+
items: {
|
10
|
+
required: true,
|
11
|
+
type: Array<breadcrumbInterface>,
|
12
|
+
},
|
13
|
+
divider: {
|
14
|
+
required: false,
|
15
|
+
type: String,
|
16
|
+
default: "/",
|
17
|
+
},
|
18
|
+
});
|
19
|
+
</script>
|
20
|
+
|
21
|
+
<template>
|
22
|
+
<div class="glorious-breadcrumb flex gap-1 flex-wrap">
|
23
|
+
<div
|
24
|
+
v-for="(item, index) in props.items"
|
25
|
+
:key="index"
|
26
|
+
class="flex items-center gap-1 flex-wrap"
|
27
|
+
>
|
28
|
+
<GIcon v-if="item.icon" :name="item.icon" />
|
29
|
+
<nuxt-link
|
30
|
+
v-if="item.to"
|
31
|
+
class="glorious-breadcrumb-link"
|
32
|
+
:to="item.to.toString()"
|
33
|
+
>
|
34
|
+
{{ item.text }}
|
35
|
+
</nuxt-link>
|
36
|
+
<span
|
37
|
+
v-else
|
38
|
+
class="glorious-breadcrumb-text"
|
39
|
+
:class="[index + 1 === props.items.length ? 'end-text' : '']"
|
40
|
+
>
|
41
|
+
{{ item.text }}
|
42
|
+
</span>
|
43
|
+
<span v-if="index + 1 !== props.items.length">{{ props.divider }}</span>
|
44
|
+
</div>
|
45
|
+
</div>
|
46
|
+
</template>
|
47
|
+
|
48
|
+
<style>
|
49
|
+
.glorious-breadcrumb {
|
50
|
+
@apply text-sm;
|
51
|
+
}
|
52
|
+
.glorious-breadcrumb .end-text {
|
53
|
+
@apply font-bold;
|
54
|
+
}
|
55
|
+
</style>
|
package/package.json
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
{
|
2
|
-
"version": "1.2.1-
|
2
|
+
"version": "1.2.1-4",
|
3
3
|
"name": "nuxt-glorious",
|
4
4
|
"description": "This package provides many things needed by a project, including server requests and authentication, SEO and other requirements of a project.",
|
5
5
|
"repository": "sajadhzj/nuxt-glorious",
|
@@ -1,46 +0,0 @@
|
|
1
|
-
<script lang="ts" setup>
|
2
|
-
const props = defineProps({
|
3
|
-
items: {
|
4
|
-
required: true,
|
5
|
-
type: Object,
|
6
|
-
},
|
7
|
-
dir: {
|
8
|
-
required: false,
|
9
|
-
type: String as () => "rtl" | "ltr",
|
10
|
-
default: "rtl",
|
11
|
-
},
|
12
|
-
});
|
13
|
-
</script>
|
14
|
-
|
15
|
-
<template>
|
16
|
-
<div class="flex gap-1 flex-wrap dir-ltr" :dir="props.dir">
|
17
|
-
<div
|
18
|
-
v-for="(item, key, index) in props.items"
|
19
|
-
:key="index"
|
20
|
-
class="flex items-center gap-1 flex-wrap"
|
21
|
-
>
|
22
|
-
<nuxt-link
|
23
|
-
v-if="index !== Object.entries(props.items).length - 1"
|
24
|
-
:to="key"
|
25
|
-
class="text-gray-500 hover:text-gray-800"
|
26
|
-
>
|
27
|
-
{{ item }}
|
28
|
-
</nuxt-link>
|
29
|
-
|
30
|
-
<span
|
31
|
-
v-if="index === Object.entries(props.items).length - 1"
|
32
|
-
class="text-gray-600 font-medium"
|
33
|
-
>
|
34
|
-
{{ item }}
|
35
|
-
</span>
|
36
|
-
|
37
|
-
<GIcon
|
38
|
-
v-if="index !== Object.entries(props.items).length - 1"
|
39
|
-
name="glorious-arrow"
|
40
|
-
:style="{ rotate: props.dir === 'rtl' ? '180deg' : '0deg' }"
|
41
|
-
:size="10"
|
42
|
-
color="#6b7280"
|
43
|
-
/>
|
44
|
-
</div>
|
45
|
-
</div>
|
46
|
-
</template>
|