feat: upload-demo.vue

src/components/primevue/primevue.vue

@@ -1,91 +1,11 @@
 <script lang="ts"></script>
 
 <script setup lang="tsx">
-import { ConfirmationService, DialogService, ToastService, useDialogRef } from '@/plugins/primevue';
-import dialogContent from './dialog-content.vue';
-
-const dynamicComponent = defineComponent({
-  props: {
-    'defining-props': {
-      type: Object as PropType<Record<string, unknown>>,
-      default: () => ({}),
-    },
-  },
-  setup(props, ctx) {
-    const dialogRef = useDialogRef();
-    return () => (
-      <div>
-        <button onClick={() => ctx.emit('close')}>emit('close')</button> <hr />
-        <pre>{JSON.stringify({ 'dialogRef?.data': dialogRef!.value.data }, null, 2)}</pre> <hr />
-        <div>PrimeVue DynamicDialog</div> <hr />
-        <pre>{`${JSON.stringify({ 'ctx.attrs': ctx, props }, null, 2)}`}</pre> <hr />
-        <pre>{JSON.stringify({ "inject('dialogRef')": dialogRef!.value }, null, 2)}</pre> <hr />
-      </div>
-    );
-  },
-});
-
-// https://primevue.org/dynamicdialog/
-const openDialog = async () => {
-  const dialog1 = DialogService.open(dynamicComponent, {
-    props: {
-      header: '对话框1 可以拖动',
-      position: 'bottomleft',
-      draggable: true,
-      pt: { mask: { class: 'backdrop-blur-sm' } }, // 相当于: pt:mask:class="backdrop-blur-sm"
-    },
-    data: {
-      用inject接收: '通过 DynamicDialogOptions.data 传递的数据',
-    },
-    emits: {
-      // https://github.com/primefaces/primevue/blob/bd7161298a472c8cd954e35e6a538a8bd1b1b386/packages/primevue/src/dynamicdialog/DynamicDialog.vue#L5
-      //   ↑v-bind="instance.options.emits", 所以 props 也可以通过 emits 传递给 content 的组件
-      'defining-props': {
-        '用-props-接收': '定义在-DynamicDialogOptions.emits-的数据',
-      },
-      绑定给组件的attrs: '定义在-DynamicDialogOptions.emits-的数据，',
-      onClose: () => dialog1.close(),
-    },
-  });
-
-  await nextTick();
-  // if ($__DEV__) return;
-
-  await new Promise((resolve) => setTimeout(resolve, 300));
-  DialogService.open(dialogContent, {
-    props: {
-      header: '对话框2',
-      // draggable: false, // Header1的 draggable: true 会影响 Header2，如果指定 draggable: false，则不会受到影响。
-    },
-  });
-};
-const openToast = () => {
-  ToastService.add({ severity: 'info', summary: '提示', detail: '消息内容', life: 3000 });
-  ToastService.add({ severity: 'info', summary: '提示', detail: '消息内容', life: 0 });
-};
-const openConfirm = async () => {
-  ConfirmationService.require({
-    message: '确定要继续吗？',
-    header: '确认',
-    icon: 'pi pi-exclamation-triangle',
-    rejectProps: { label: '取消', severity: 'secondary', outlined: true },
-    acceptProps: { label: '确定' },
-    accept: () => {
-      ToastService.add({ severity: 'info', summary: '已确认', detail: '您已同意操作', life: 3000 });
-    },
-    reject: () => {
-      ToastService.add({ severity: 'error', summary: '已取消', detail: '您已取消操作', life: 3000 });
-    },
-  });
-};
-
-const onAdvancedUpload = () => {
-  ToastService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-};
+import { openConfirm, openDialog, openToast } from './fns';
 </script>
 
 <template>
-  <div class="primevue p-4 flex flex-wrap gap-6">
+  <div class="primevue py-4 flex items-start flex-wrap gap-6">
     <FloatLabel>
       <InputText default-value="DEFAULT_VALUE" id="username" />
       <label for="username">Username</label>
@@ -106,19 +26,13 @@ const onAdvancedUpload = () => {
       <label>SELECT</label>
     </FloatLabel>
 
+    <FloatLabel w-full>
+      <UploadDemo />
+      <label>FileUpload</label>
+    </FloatLabel>
+
     <FloatLabel>
-      <FileUpload
-        name="demo[]"
-        url="/api/upload"
-        @upload="onAdvancedUpload()"
-        :multiple="true"
-        accept="image/*"
-        :maxFileSize="1000000"
-      >
-        <template #empty>
-          <span>Drag and drop files to here to upload.</span>
-        </template>
-      </FileUpload>
+      <FileUpload name="demo[]" url="/api/upload" :maxFileSize="1000000" />
       <label>FileUpload</label>
     </FloatLabel>