edvoyui-component-library-test-flight 0.0.153 → 0.0.156
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/EUIButtonGroup.vue.d.ts.map +1 -0
- package/dist/library-vue-ts.cjs.js +26 -26
- package/dist/library-vue-ts.css +1 -1
- package/dist/library-vue-ts.es.js +2075 -2066
- package/dist/library-vue-ts.umd.js +27 -27
- package/dist/toggle/EUIToggle.vue.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/timeLine/EUITimeLine.vue +133 -28
- package/src/components/toggle/EUIToggle.vue +3 -1
- package/dist/button/EUIButtonGroup.vue.d.ts.map +0 -1
- package/dist/timeLine/EUITimeLineItem.vue.d.ts +0 -4
- package/dist/timeLine/EUITimeLineItem.vue.d.ts.map +0 -1
- package/src/components/timeLine/EUITimeLineItem.vue +0 -124
- /package/dist/{button/EUIButtonGroup.vue.d.ts → EUIButtonGroup.vue.d.ts} +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/toggle/EUIToggle.vue?vue&type=script&setup=true&lang.ts";
|
|
2
|
-
import "/Volumes/work/repos/edvoy-ui-v2/src/components/toggle/EUIToggle.vue?vue&type=style&index=0&scoped=
|
|
2
|
+
import "/Volumes/work/repos/edvoy-ui-v2/src/components/toggle/EUIToggle.vue?vue&type=style&index=0&scoped=f3426066&lang.scss";
|
|
3
3
|
declare const _default: any;
|
|
4
4
|
export default _default;
|
|
5
5
|
//# sourceMappingURL=EUIToggle.vue.d.ts.map
|
package/package.json
CHANGED
|
@@ -1,43 +1,148 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
<div>
|
|
3
|
+
<ul role="list" class="p-4 space-y-6">
|
|
4
|
+
<li
|
|
5
|
+
v-for="(item, itemIdx) in items"
|
|
6
|
+
:data="item"
|
|
7
|
+
:key="`timeline_${itemIdx}`"
|
|
8
|
+
class="relative flex gap-x-4 group"
|
|
9
|
+
:type="type"
|
|
10
|
+
:timeline-icon="icon"
|
|
11
|
+
:show-more="showMore"
|
|
12
|
+
>
|
|
13
|
+
<div
|
|
14
|
+
:class="[
|
|
15
|
+
itemIdx === items.length - 1 ? 'h-6' : '-bottom-6',
|
|
16
|
+
'absolute left-0 top-0 flex w-6 justify-center',
|
|
17
|
+
]"
|
|
18
|
+
>
|
|
19
|
+
<slot name="line" :type="type">
|
|
20
|
+
<div
|
|
21
|
+
:class="[
|
|
22
|
+
type === 'icon' ? 'w-0.5 bg-green-500' : 'w-px bg-gray-200',
|
|
23
|
+
]"
|
|
24
|
+
/>
|
|
25
|
+
</slot>
|
|
26
|
+
|
|
27
|
+
</div>
|
|
28
|
+
<template v-if="type === 'image'">
|
|
29
|
+
<slot name="image" :data="item" :dataIndex="itemIdx">
|
|
30
|
+
<img
|
|
31
|
+
:src="item.person?.imageUrl"
|
|
32
|
+
alt=""
|
|
33
|
+
class="relative flex-initial flex-shrink-0 rounded-full size-6 bg-gray-50"
|
|
34
|
+
/>
|
|
35
|
+
</slot>
|
|
36
|
+
<slot name="details" :data="item" :dataIndex="itemIdx">
|
|
37
|
+
<div
|
|
38
|
+
class="flex-1 min-w-0 p-3 rounded-md ring-1 ring-inset ring-gray-200"
|
|
39
|
+
>
|
|
40
|
+
<div class="flex justify-between gap-x-4 mb-0.5">
|
|
41
|
+
<div class="text-xs leading-5 text-gray-500">
|
|
42
|
+
<span class="font-medium text-gray-900">{{
|
|
43
|
+
item.person?.name
|
|
44
|
+
}}</span>
|
|
45
|
+
</div>
|
|
46
|
+
<time
|
|
47
|
+
:datetime="item.dateTime"
|
|
48
|
+
class="flex-none text-xs leading-5 text-gray-500"
|
|
49
|
+
>
|
|
50
|
+
{{ item.date + " " + item.dateTime }}
|
|
51
|
+
</time>
|
|
52
|
+
</div>
|
|
53
|
+
<p class="text-sm leading-6 text-gray-500">
|
|
54
|
+
{{ item.comment }}
|
|
55
|
+
</p>
|
|
56
|
+
|
|
57
|
+
<details
|
|
58
|
+
v-if="showMore"
|
|
59
|
+
:open="itemIdx === 0"
|
|
60
|
+
class="h-6 p-2 mt-2 text-xs text-gray-500 transition-colors duration-100 ease-in-out select-none open:border open:border-gray-100 open:bg-gray-50 open:rounded-md group open:h-auto"
|
|
61
|
+
>
|
|
62
|
+
<summary
|
|
63
|
+
class="flex flex-row items-center justify-start text-sm leading-5 text-gray-900 list-none cursor-pointer"
|
|
64
|
+
>
|
|
65
|
+
<slot name="showMoreTitle" :data="item" :open="itemIdx === 0">
|
|
66
|
+
{{ item.showmore?.title || "More Details" }}
|
|
67
|
+
<PlusIcon
|
|
68
|
+
class="ml-auto -mr-1 transition-all duration-300 opacity-75 fill-current size-4 group-open:hidden"
|
|
69
|
+
/>
|
|
70
|
+
<MinusIcon
|
|
71
|
+
class="hidden ml-auto -mr-1 transition-all duration-300 opacity-75 fill-current size-4 group-open:inline-block"
|
|
72
|
+
/>
|
|
73
|
+
</slot>
|
|
74
|
+
</summary>
|
|
75
|
+
<slot name="showMoreContent" :data="item">
|
|
76
|
+
<div>{{ item.showmore?.content }}</div>
|
|
77
|
+
</slot>
|
|
78
|
+
</details>
|
|
79
|
+
</div>
|
|
80
|
+
</slot>
|
|
81
|
+
</template>
|
|
82
|
+
<template v-else>
|
|
83
|
+
<div
|
|
84
|
+
class="relative flex items-center justify-center flex-none bg-white size-6"
|
|
85
|
+
>
|
|
86
|
+
<component
|
|
87
|
+
v-if="type === 'icon'"
|
|
88
|
+
:is="icon || CheckCircleIcon"
|
|
89
|
+
class="text-green-500 size-6"
|
|
90
|
+
aria-hidden="true"
|
|
91
|
+
/>
|
|
92
|
+
<div
|
|
93
|
+
v-else
|
|
94
|
+
class="size-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300 group-hover:bg-purple-200 group-hover:ring-purple-500"
|
|
95
|
+
/>
|
|
96
|
+
</div>
|
|
97
|
+
<p class="flex-auto py-0.5 text-xs leading-5 text-gray-500">
|
|
98
|
+
<span class="font-medium text-gray-900">{{
|
|
99
|
+
item.person?.name
|
|
100
|
+
}}</span>
|
|
101
|
+
{{ item?.comment }}
|
|
102
|
+
</p>
|
|
103
|
+
<time
|
|
104
|
+
:datetime="item.dateTime"
|
|
105
|
+
class="flex-none py-0.5 text-xs leading-5 text-gray-500"
|
|
106
|
+
>{{ item.date + " " + item.dateTime }}</time
|
|
107
|
+
>
|
|
108
|
+
</template>
|
|
109
|
+
</li>
|
|
110
|
+
</ul>
|
|
111
|
+
</div>
|
|
7
112
|
</template>
|
|
8
113
|
|
|
9
114
|
<script setup lang="ts">
|
|
10
|
-
import { PropType
|
|
11
|
-
import
|
|
115
|
+
import { PropType, toRefs } from "vue";
|
|
116
|
+
import { MinusIcon, PlusIcon } from "@heroicons/vue/24/outline";
|
|
117
|
+
import { CheckCircleIcon } from "@heroicons/vue/24/solid";
|
|
118
|
+
|
|
12
119
|
interface ITimeLine {
|
|
13
|
-
id: number | string
|
|
14
|
-
person: any
|
|
120
|
+
id: number | string;
|
|
121
|
+
person: any;
|
|
15
122
|
comment?: string;
|
|
16
|
-
date?: string
|
|
17
|
-
dateTime?: string
|
|
18
|
-
showmore?: any
|
|
123
|
+
date?: string;
|
|
124
|
+
dateTime?: string;
|
|
125
|
+
showmore?: any;
|
|
19
126
|
}
|
|
20
127
|
|
|
21
|
-
|
|
22
128
|
const props = defineProps({
|
|
23
|
-
items:{
|
|
24
|
-
type:Array<ITimeLine>,
|
|
25
|
-
default:[]
|
|
129
|
+
items: {
|
|
130
|
+
type: Array<ITimeLine>,
|
|
131
|
+
default: [],
|
|
26
132
|
},
|
|
27
133
|
type: {
|
|
28
|
-
type:String as PropType<"view" | "icon" | "image">,
|
|
29
|
-
default:
|
|
134
|
+
type: String as PropType<"view" | "icon" | "image">,
|
|
135
|
+
default: "",
|
|
136
|
+
},
|
|
137
|
+
icon: {
|
|
138
|
+
type: [String, Object],
|
|
139
|
+
default: "",
|
|
140
|
+
},
|
|
141
|
+
showMore: {
|
|
142
|
+
type: Boolean,
|
|
143
|
+
default: false,
|
|
30
144
|
},
|
|
31
|
-
icon:{
|
|
32
|
-
type:[String , Object],
|
|
33
|
-
default:''
|
|
34
|
-
} ,
|
|
35
|
-
showMore:{
|
|
36
|
-
type:Boolean,
|
|
37
|
-
default:false
|
|
38
|
-
}
|
|
39
145
|
});
|
|
40
146
|
|
|
41
|
-
const
|
|
147
|
+
const { items, type, icon, showMore } = toRefs(props);
|
|
42
148
|
</script>
|
|
43
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EUIButtonGroup.vue.d.ts","sourceRoot":"","sources":["../../src/components/button/EUIButtonGroup.vue"],"names":[],"mappings":"AACA,cAAc,6GAA6G,CAAC;AAC5H,OAAO,2HAA2H,CAAC;;AAEnI,wBAA0F"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import _sfc_main from "/Volumes/work/repos/edvoy-ui-v2/src/components/timeLine/EUITimeLineItem.vue?vue&type=script&setup=true&lang.ts";
|
|
2
|
-
export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/timeLine/EUITimeLineItem.vue?vue&type=script&setup=true&lang.ts";
|
|
3
|
-
export default _sfc_main;
|
|
4
|
-
//# sourceMappingURL=EUITimeLineItem.vue.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EUITimeLineItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/timeLine/EUITimeLineItem.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,gHAAgH,CAAC;AACvI,cAAc,gHAAgH,CAAC;AAC/H,eAAe,SAAS,CAAC"}
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<li
|
|
3
|
-
v-for="(item, itemIdx) in data"
|
|
4
|
-
:key="item.id"
|
|
5
|
-
class="relative flex gap-x-4 group"
|
|
6
|
-
>
|
|
7
|
-
<div
|
|
8
|
-
:class="[
|
|
9
|
-
itemIdx === data.length - 1 ? 'h-6' : '-bottom-6',
|
|
10
|
-
'absolute left-0 top-0 flex w-6 justify-center',
|
|
11
|
-
]"
|
|
12
|
-
>
|
|
13
|
-
<div
|
|
14
|
-
:class="[type === 'icon' ? 'w-0.5 bg-green-500' : 'w-px bg-gray-200']"
|
|
15
|
-
/>
|
|
16
|
-
</div>
|
|
17
|
-
<template v-if="type === 'image'">
|
|
18
|
-
<img
|
|
19
|
-
:src="item.person?.imageUrl"
|
|
20
|
-
alt=""
|
|
21
|
-
class="relative size-6 flex-none rounded-full bg-gray-50"
|
|
22
|
-
/>
|
|
23
|
-
<div class="flex-auto rounded-md p-3 ring-1 ring-inset ring-gray-200">
|
|
24
|
-
<div class="flex justify-between gap-x-4 mb-0.5">
|
|
25
|
-
<div class="text-xs leading-5 text-gray-500">
|
|
26
|
-
<span class="font-medium text-gray-900">{{
|
|
27
|
-
item.person?.name
|
|
28
|
-
}}</span>
|
|
29
|
-
</div>
|
|
30
|
-
<time
|
|
31
|
-
:datetime="item.dateTime"
|
|
32
|
-
class="flex-none text-xs leading-5 text-gray-500"
|
|
33
|
-
>
|
|
34
|
-
{{ item.date + " " + item.dateTime }}
|
|
35
|
-
</time>
|
|
36
|
-
</div>
|
|
37
|
-
<p class="text-sm leading-6 text-gray-500">
|
|
38
|
-
{{ item.comment }}
|
|
39
|
-
</p>
|
|
40
|
-
<details
|
|
41
|
-
v-if="showMore"
|
|
42
|
-
:open="itemIdx === 0"
|
|
43
|
-
class="text-gray-500 text-xs select-none open:border open:border-gray-100 open:bg-gray-50 open:rounded-md transition-colors duration-100 ease-in-out mt-2 p-2 group h-6 open:h-auto"
|
|
44
|
-
>
|
|
45
|
-
<summary
|
|
46
|
-
class="text-sm leading-5 text-gray-900 list-none flex items-center justify-start flex-row cursor-pointer"
|
|
47
|
-
>
|
|
48
|
-
{{ item.showmore?.title || "More Details" }}
|
|
49
|
-
<PlusIcon
|
|
50
|
-
class="fill-current opacity-75 size-4 -mr-1 transition-all duration-300 ml-auto group-open:hidden"
|
|
51
|
-
/>
|
|
52
|
-
<MinusIcon
|
|
53
|
-
class="fill-current opacity-75 size-4 -mr-1 transition-all duration-300 ml-auto hidden group-open:inline-block"
|
|
54
|
-
/>
|
|
55
|
-
</summary>
|
|
56
|
-
<div>{{ item.showmore?.content }}</div>
|
|
57
|
-
</details>
|
|
58
|
-
</div>
|
|
59
|
-
</template>
|
|
60
|
-
<template v-else>
|
|
61
|
-
<div
|
|
62
|
-
class="relative flex size-6 flex-none items-center justify-center bg-white"
|
|
63
|
-
>
|
|
64
|
-
<component
|
|
65
|
-
v-if="type === 'icon'"
|
|
66
|
-
:is="icon || CheckCircleIcon"
|
|
67
|
-
class="size-6 text-green-500"
|
|
68
|
-
aria-hidden="true"
|
|
69
|
-
/>
|
|
70
|
-
<div
|
|
71
|
-
v-else
|
|
72
|
-
class="size-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300 group-hover:bg-purple-200 group-hover:ring-purple-500"
|
|
73
|
-
/>
|
|
74
|
-
</div>
|
|
75
|
-
<p class="flex-auto py-0.5 text-xs leading-5 text-gray-500">
|
|
76
|
-
<span class="font-medium text-gray-900">{{ item.person?.name }}</span>
|
|
77
|
-
{{ item?.command }}
|
|
78
|
-
</p>
|
|
79
|
-
<time
|
|
80
|
-
:datetime="item.dateTime"
|
|
81
|
-
class="flex-none py-0.5 text-xs leading-5 text-gray-500"
|
|
82
|
-
>{{ item.date + " " + item.dateTime }}</time
|
|
83
|
-
>
|
|
84
|
-
</template>
|
|
85
|
-
</li>
|
|
86
|
-
</template>
|
|
87
|
-
|
|
88
|
-
<script setup lang="ts">
|
|
89
|
-
import { PropType, toRefs } from "vue";
|
|
90
|
-
import { MinusIcon, PlusIcon } from "@heroicons/vue/24/outline";
|
|
91
|
-
import { CheckCircleIcon } from "@heroicons/vue/24/solid";
|
|
92
|
-
|
|
93
|
-
interface ITimeLine {
|
|
94
|
-
id: number | string;
|
|
95
|
-
person: any;
|
|
96
|
-
comment?: string;
|
|
97
|
-
date?: string;
|
|
98
|
-
dateTime?: string;
|
|
99
|
-
showmore?: any;
|
|
100
|
-
command?:string
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
const props = defineProps({
|
|
104
|
-
data: {
|
|
105
|
-
type: Array<ITimeLine>,
|
|
106
|
-
default: [],
|
|
107
|
-
},
|
|
108
|
-
type: {
|
|
109
|
-
type: String as PropType<"view" | "icon" | "image">,
|
|
110
|
-
default: "",
|
|
111
|
-
},
|
|
112
|
-
icon: {
|
|
113
|
-
type: [String, Object],
|
|
114
|
-
default: "",
|
|
115
|
-
},
|
|
116
|
-
showMore: {
|
|
117
|
-
type: Boolean,
|
|
118
|
-
default: false,
|
|
119
|
-
},
|
|
120
|
-
});
|
|
121
|
-
const {data,type,icon,showMore} = toRefs(props)
|
|
122
|
-
</script>
|
|
123
|
-
|
|
124
|
-
<style scoped></style>
|
|
File without changes
|