mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.2 KiB
73 lines
2.2 KiB
7 months ago
|
<script lang="ts" setup>
|
||
|
|
import { useVModel } from '#imports'
|
||
|
|
|
||
|
|
interface Prop {
|
||
|
|
modelValue?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = defineProps<Prop>()
|
||
|
|
|
||
|
|
const emit = defineEmits(['update:modelValue'])
|
||
|
|
|
||
|
|
const vModel = useVModel(props, 'modelValue', emit)
|
||
|
|
|
||
|
|
const { availableExtensions, addExtension, getExtensionIcon, showExtensionDetails } = useExtensions()
|
||
|
|
|
||
|
|
const onExtensionClick = (extensionId: string) => {
|
||
|
|
showExtensionDetails(extensionId)
|
||
|
|
vModel.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
const onAddExtension = (ext: any) => {
|
||
|
|
addExtension(ext)
|
||
|
|
vModel.value = false
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<NcModal
|
||
|
|
v-model:visible="vModel"
|
||
|
|
:body-style="{ 'max-height': '864px', 'height': '85vh' }"
|
||
|
|
:class="{ active: vModel }"
|
||
|
|
:closable="true"
|
||
|
|
:footer="null"
|
||
|
|
:width="1280"
|
||
|
|
size="medium"
|
||
|
|
wrap-class-name="nc-modal-extension-market"
|
||
|
|
>
|
||
|
|
<div class="flex flex-col h-full">
|
||
|
|
<div class="flex items-center px-4 py-2">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<GeneralIcon icon="puzzle" />
|
||
|
|
<div class="font-weight-700">Extensions Marketplace</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col flex-1 px-4 py-2">
|
||
|
|
<div class="flex flex-wrap gap-4 p-2">
|
||
|
|
<template v-for="ext of availableExtensions" :key="ext.id">
|
||
|
|
<div class="flex border-1 rounded-lg p-2 w-[360px] cursor-pointer" @click="onExtensionClick(ext.id)">
|
||
|
|
<div class="h-[60px] overflow-hidden m-auto">
|
||
|
|
<img :src="getExtensionIcon(ext.iconUrl)" alt="icon" class="w-full h-full object-cover" />
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-grow flex-col ml-3">
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<div class="font-weight-600">{{ ext.title }}</div>
|
||
|
|
<NcButton size="xsmall" @click.stop="onAddExtension(ext)">
|
||
|
|
<div class="flex items-center gap-1 mx-1">
|
||
|
|
<GeneralIcon icon="plus" />
|
||
|
|
Add
|
||
|
|
</div>
|
||
|
|
</NcButton>
|
||
|
|
</div>
|
||
|
|
<div class="w-[250px] h-[50px] text-xs line-clamp-3">{{ ext.description }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</NcModal>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|