Skip to content

Commit a16601a

Browse files
JammingBenJammingBen
committed
refactor(pkg): components to script setup
1 parent ce600e3 commit a16601a

28 files changed

Lines changed: 893 additions & 1205 deletions

‎packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,11 @@ describe('SharedWithMe view', () => {
4343
describe('different files view states', () => {
4444
it('shows the loading spinner during loading', () => {
4545
const { wrapper } = getMountedWrapper({ loading: true })
46-
expect(wrapper.find('app-loading-spinner-stub').exists()).toBeTruthy()
46+
expect(wrapper.find('#app-loading-spinner').exists()).toBeTruthy()
4747
})
4848
it('does not show the loading spinner after loading finished', () => {
4949
const { wrapper } = getMountedWrapper()
50-
expect(wrapper.find('app-loading-spinner-stub').exists()).toBeFalsy()
50+
expect(wrapper.find('#app-loading-spinner').exists()).toBeFalsy()
5151
})
5252
})
5353
describe('filter', () => {

‎packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,11 @@ describe('SharedWithOthers view', () => {
3838
describe('different files view states', () => {
3939
it('shows the loading spinner during loading', () => {
4040
const { wrapper } = getMountedWrapper({ loading: true })
41-
expect(wrapper.find('app-loading-spinner-stub').exists()).toBeTruthy()
41+
expect(wrapper.find('#app-loading-spinner').exists()).toBeTruthy()
4242
})
4343
it('shows the no-content-message after loading', () => {
4444
const { wrapper } = getMountedWrapper()
45-
expect(wrapper.find('app-loading-spinner-stub').exists()).toBeFalsy()
45+
expect(wrapper.find('#app-loading-spinner').exists()).toBeFalsy()
4646
expect(wrapper.find('.no-content-message').exists()).toBeTruthy()
4747
})
4848
it('shows the files table when files are available', () => {

‎packages/web-pkg/src/components/AppLoadingSpinner.vue‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,4 @@
44
</div>
55
</template>
66

7-
<script lang="ts">
8-
import { defineComponent } from 'vue'
9-
10-
export default defineComponent({
11-
name: 'AppLoadingSpinner'
12-
})
13-
</script>
7+
<script setup lang="ts"></script>

‎packages/web-pkg/src/components/AppTemplates/PartialViews/ErrorScreen.vue‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,8 @@
55
</div>
66
</template>
77

8-
<script lang="ts">
9-
import { defineComponent } from 'vue'
10-
export default defineComponent({
11-
name: 'ErrorScreen',
12-
props: {
13-
/**
14-
* Error message passed from external app
15-
*/
16-
message: {
17-
default: '',
18-
type: String,
19-
required: false
20-
}
21-
}
22-
})
8+
<script setup lang="ts">
9+
const { message = '' } = defineProps<{
10+
message?: string
11+
}>()
2312
</script>

‎packages/web-pkg/src/components/AppTemplates/PartialViews/LoadingScreen.vue‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,4 @@
55
</div>
66
</template>
77

8-
<script lang="ts">
9-
import { defineComponent } from 'vue'
10-
11-
export default defineComponent({
12-
name: 'LoadingScreen'
13-
})
14-
</script>
8+
<script setup lang="ts"></script>

‎packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue‎

Lines changed: 75 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -52,128 +52,94 @@
5252
</li>
5353
</template>
5454

55-
<script lang="ts">
56-
import { computed, defineComponent, PropType, unref } from 'vue'
55+
<script setup lang="ts">
56+
import { computed, unref } from 'vue'
5757
import { Action, ActionOptions, useConfigStore } from '../../composables'
5858
import { storeToRefs } from 'pinia'
5959
import { AppearanceType } from '@opencloud-eu/design-system/helpers'
6060
61-
export default defineComponent({
62-
name: 'ActionMenuItem',
63-
props: {
64-
action: {
65-
type: Object as PropType<Action>,
66-
required: true
67-
},
68-
actionOptions: {
69-
type: Object as PropType<ActionOptions>,
70-
required: true
71-
},
72-
size: {
73-
type: String as PropType<'small' | 'medium' | 'large'>,
74-
required: false,
75-
default: 'medium'
76-
},
77-
appearance: {
78-
type: String as PropType<AppearanceType>,
79-
default: 'raw'
80-
},
81-
shortcutHint: {
82-
type: Boolean,
83-
default: true,
84-
required: false
85-
},
86-
showTooltip: {
87-
type: Boolean,
88-
default: false,
89-
required: false
90-
},
91-
buttonClasses: {
92-
type: Array as PropType<string[]>,
93-
default: (): string[] => []
94-
}
95-
},
96-
setup(props) {
97-
const configStore = useConfigStore()
98-
const { options } = storeToRefs(configStore)
61+
const {
62+
action,
63+
actionOptions,
64+
size = 'medium',
65+
appearance = 'raw',
66+
shortcutHint = true,
67+
showTooltip = false,
68+
buttonClasses = []
69+
} = defineProps<{
70+
action: Action
71+
actionOptions: ActionOptions
72+
size?: 'small' | 'medium' | 'large'
73+
appearance?: AppearanceType
74+
shortcutHint?: boolean
75+
showTooltip?: boolean
76+
buttonClasses?: string[]
77+
}>()
9978
100-
const componentType = computed<'a' | 'button' | 'router-link'>(() => {
101-
if (Object.hasOwn(props.action, 'route')) {
102-
return 'router-link'
103-
}
104-
if (Object.hasOwn(props.action, 'href')) {
105-
return 'a'
106-
}
107-
if (Object.hasOwn(props.action, 'handler')) {
108-
return 'button'
109-
}
110-
console.warn(
111-
'ActionMenuItem: No handler, route or href callback found in action',
112-
props.action
113-
)
114-
return 'button'
115-
})
79+
const configStore = useConfigStore()
80+
const { options } = storeToRefs(configStore)
11681
117-
const componentProps = computed(() => {
118-
const properties = {
119-
appearance: props.action.appearance || props.appearance,
120-
...(props.action.isDisabled && {
121-
disabled: props.action.isDisabled(props.actionOptions)
122-
}),
123-
...(props.action.id && { id: props.action.id })
124-
}
82+
const componentType = computed<'a' | 'button' | 'router-link'>(() => {
83+
if (Object.hasOwn(action, 'route')) {
84+
return 'router-link'
85+
}
86+
if (Object.hasOwn(action, 'href')) {
87+
return 'a'
88+
}
89+
if (Object.hasOwn(action, 'handler')) {
90+
return 'button'
91+
}
92+
console.warn('ActionMenuItem: No handler, route or href callback found in action', action)
93+
return 'button'
94+
})
12595
126-
return {
127-
...properties,
128-
...(unref(componentType) === 'router-link' && {
129-
to: props.action.route(props.actionOptions)
130-
}),
131-
...(unref(componentType) === 'a' && {
132-
href: props.action.href(props.actionOptions)
133-
}),
134-
...(['router-link', 'a'].includes(unref(componentType)) && {
135-
target: options.value.openFilesInNewTab ? ('_blank' as const) : ('_self' as const)
136-
})
137-
}
138-
})
96+
const componentProps = computed(() => {
97+
const properties = {
98+
appearance: action.appearance || appearance,
99+
...(action.isDisabled && {
100+
disabled: action.isDisabled(actionOptions)
101+
}),
102+
...(action.id && { id: action.id })
103+
}
139104
140-
const actionIcon = computed(() => {
141-
return typeof props.action.icon === 'function'
142-
? props.action.icon(props.actionOptions)
143-
: props.action.icon
105+
return {
106+
...properties,
107+
...(unref(componentType) === 'router-link' && {
108+
to: action.route(actionOptions)
109+
}),
110+
...(unref(componentType) === 'a' && {
111+
href: action.href(actionOptions)
112+
}),
113+
...(['router-link', 'a'].includes(unref(componentType)) && {
114+
target: options.value.openFilesInNewTab ? ('_blank' as const) : ('_self' as const)
144115
})
116+
}
117+
})
145118
146-
return {
147-
componentType,
148-
componentProps,
149-
actionIcon
150-
}
151-
},
152-
computed: {
153-
hasExternalImageIcon() {
154-
return this.actionIcon && /^https?:\/\//i.test(this.actionIcon)
155-
},
156-
componentListeners() {
157-
if (typeof this.action.handler !== 'function') {
158-
return {}
159-
}
119+
const actionIcon = computed(() => {
120+
return typeof action.icon === 'function' ? action.icon(actionOptions) : action.icon
121+
})
160122
161-
const callback = () =>
162-
this.action.handler({
163-
...this.actionOptions
164-
})
165-
if (this.action.keepOpen) {
166-
return {
167-
click: (event: Event) => {
168-
event.stopPropagation()
169-
callback()
170-
}
171-
}
172-
}
173-
return {
174-
click: callback
123+
const hasExternalImageIcon = computed(() => {
124+
return actionIcon.value && /^https?:\/\//i.test(actionIcon.value)
125+
})
126+
127+
const componentListeners = computed(() => {
128+
if (typeof action.handler !== 'function') {
129+
return {}
130+
}
131+
132+
const callback = () => action.handler({ ...actionOptions })
133+
if (action.keepOpen) {
134+
return {
135+
click: (event: Event) => {
136+
event.stopPropagation()
137+
callback()
175138
}
176139
}
177140
}
141+
return {
142+
click: callback
143+
}
178144
})
179145
</script>

‎packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue‎

Lines changed: 35 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -40,56 +40,46 @@
4040
</div>
4141
</template>
4242

43-
<script lang="ts">
44-
import { defineComponent, PropType } from 'vue'
43+
<script setup lang="ts">
4544
import ActionMenuItem from './ActionMenuItem.vue'
4645
import { Action, ActionOptions } from '../../composables'
4746
import { AppearanceType } from '@opencloud-eu/design-system/helpers'
4847
import ActionMenuDropItem from './ActionMenuDropItem.vue'
4948
import { MenuSection, MenuSectionDrop } from './types'
5049
51-
export default defineComponent({
52-
name: 'ContextActionMenu',
53-
components: { ActionMenuDropItem, ActionMenuItem },
54-
props: {
55-
menuSections: {
56-
type: Array as PropType<MenuSection[]>,
57-
required: true
58-
},
59-
appearance: {
60-
type: String as PropType<AppearanceType>,
61-
default: 'raw'
62-
},
63-
actionOptions: {
64-
type: Object as PropType<ActionOptions>,
65-
required: true
66-
}
67-
},
68-
methods: {
69-
actionToDropItem(action: Action): MenuSectionDrop {
70-
return {
71-
label: action.label(this.actionOptions),
72-
name: action.name,
73-
icon: typeof action.icon === 'function' ? action.icon(this.actionOptions) : action.icon,
74-
items: (action.children || []).filter((child) => child.isVisible(this.actionOptions))
75-
}
76-
},
77-
getSectionClasses(index: number) {
78-
const classes: string[] = []
79-
if (!this.menuSections.length) {
80-
return classes
81-
}
82-
if (index < this.menuSections.length - 1) {
83-
classes.push('pb-2')
84-
}
85-
if (index > 0) {
86-
classes.push('pt-2')
87-
}
88-
if (index < this.menuSections.length - 1) {
89-
classes.push('border-b')
90-
}
91-
return classes
92-
}
50+
const {
51+
menuSections,
52+
actionOptions,
53+
appearance = 'raw'
54+
} = defineProps<{
55+
menuSections: MenuSection[]
56+
actionOptions: ActionOptions
57+
appearance?: AppearanceType
58+
}>()
59+
60+
function actionToDropItem(action: Action): MenuSectionDrop {
61+
return {
62+
label: action.label(actionOptions),
63+
name: action.name,
64+
icon: typeof action.icon === 'function' ? action.icon(actionOptions) : action.icon,
65+
items: (action.children || []).filter((child) => child.isVisible(actionOptions))
66+
}
67+
}
68+
69+
function getSectionClasses(index: number) {
70+
const classes: string[] = []
71+
if (!menuSections.length) {
72+
return classes
73+
}
74+
if (index < menuSections.length - 1) {
75+
classes.push('pb-2')
76+
}
77+
if (index > 0) {
78+
classes.push('pt-2')
79+
}
80+
if (index < menuSections.length - 1) {
81+
classes.push('border-b')
9382
}
94-
})
83+
return classes
84+
}
9585
</script>

0 commit comments

Comments
 (0)