{"version":3,"file":"fs-files-format-ff815381.mjs","sources":["../src/uploader/components/fs-files-format.vue","../src/uploader/components/fs-files-format.vue"],"sourcesContent":["<template>\n  <div class=\"fs-files-format\">\n    <template v-if=\"computedProps.type === 'text'\">\n      <span v-for=\"item in itemsRef\" :key=\"item.url\" class=\"fs-files-item\">\n        <a :href=\"item.url\" target=\"_blank\" v-bind=\"computedProps.a\">\n          {{ item.name }}\n        </a>\n      </span>\n    </template>\n    <template v-else>\n      <component\n        :is=\"ui.tag.name\"\n        v-for=\"item in itemsRef\"\n        :key=\"item.url\"\n        class=\"fs-tag-item\"\n        :color=\"item.color\"\n        v-bind=\"computedProps.tag\"\n      >\n        <a :href=\"item.url\" target=\"_blank\" v-bind=\"computedProps.a\">{{ item.name }}</a>\n      </component>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, Ref, ref, watch } from \"vue\";\nimport { useUi } from \"@fast-crud/fast-crud\";\n/**\n * 文件格式化展示组件\n */\nexport default defineComponent({\n  name: \"FsFilesFormat\",\n  props: {\n    /**\n     * 文件列表\n     * 支持格式： `url , {url} , [url1,url2] ,  [{url:url1},{url:url2}]`\n     */\n    modelValue: {},\n    // tag颜色，`【primary, success, warning, danger ,info】`\n    color: {\n      default: \"\"\n    },\n    // 展示类型`【text, tag】`\n    type: {\n      default: \"tag\" // `可选【text,tag】`\n    },\n    // 链接配置\n    a: {},\n    // tag配置\n    tag: {},\n    // 构建下载url方法，支持异步\n    buildUrl: {},\n    // 批量构建下载url方法，支持异步\n    buildUrls: {},\n    // 根据value构建文件名\n    getFileName: {}\n  } as any,\n  setup(props: any, ctx) {\n    const { ui } = useUi();\n    const getFileName = computed(() => {\n      return (\n        // @ts-ignore\n        props.getFileName ||\n        function (url: any) {\n          if (typeof url !== \"string\") {\n            console.warn(\"获取文件名失败，请配置getFileName\");\n            return url;\n          }\n          if (url?.lastIndexOf(\"/\") >= 0) {\n            return url.substring(url.lastIndexOf(\"/\") + 1);\n          }\n          return url;\n        }\n      );\n    });\n    function getItem(value: any): any {\n      return {\n        url: undefined,\n        value: value,\n        name: getFileName.value(value),\n        // @ts-ignore\n        color: props.color\n      };\n    }\n\n    async function buildFileListUrls(list: any[]) {\n      // @ts-ignore\n      if (props.buildUrls) {\n        const values = list.map((item) => item.value);\n        // @ts-ignore\n        const urls = await props.buildUrls(values);\n        for (let i = 0; i < list.length; i++) {\n          list[i].url = urls[i];\n        }\n        // @ts-ignore\n      } else if (props.buildUrl) {\n        for (let item of list) {\n          // @ts-ignore\n          item.url = await props.buildUrl(item.value);\n        }\n      } else {\n        for (let i = 0; i < list.length; i++) {\n          list[i].url = list[i].value;\n        }\n      }\n    }\n\n    async function buildItems() {\n      // @ts-ignore\n      if (props.modelValue == null || props.modelValue === \"\") {\n        return [];\n      }\n      let valueArr = [];\n      // @ts-ignore\n      if (typeof props.modelValue === \"string\") {\n        // @ts-ignore\n        valueArr = [getItem(props.modelValue)];\n        // @ts-ignore\n      } else if (props.modelValue instanceof Array) {\n        // 本来就是数组的\n        valueArr = [];\n        // @ts-ignore\n        for (const val of props.modelValue) {\n          valueArr.push(getItem(val));\n        }\n      }\n      await buildFileListUrls(valueArr);\n      return valueArr;\n    }\n    const itemsRef: Ref = ref([]);\n    watch(\n      () => {\n        // @ts-ignore\n        return props.modelValue;\n      },\n      async () => {\n        itemsRef.value = await buildItems();\n      },\n      {\n        immediate: true\n      }\n    );\n    const computedProps = computed(() => {\n      return {\n        ...props\n      };\n    });\n    return {\n      ui,\n      itemsRef,\n      computedProps\n    };\n  }\n});\n</script>\n<style lang=\"less\">\n.fs-files-format {\n  display: flex;\n  flex-wrap: wrap;\n  .fs-form-item,\n  .fs-tag-item {\n    margin: 1px;\n    a {\n      text-decoration: none;\n    }\n  }\n  .tag-item {\n    margin-right: 10px;\n  }\n  .el-divider__text,\n  .el-link {\n    font-size: inherit;\n  }\n}\n</style>\n","<template>\n  <div class=\"fs-files-format\">\n    <template v-if=\"computedProps.type === 'text'\">\n      <span v-for=\"item in itemsRef\" :key=\"item.url\" class=\"fs-files-item\">\n        <a :href=\"item.url\" target=\"_blank\" v-bind=\"computedProps.a\">\n          {{ item.name }}\n        </a>\n      </span>\n    </template>\n    <template v-else>\n      <component\n        :is=\"ui.tag.name\"\n        v-for=\"item in itemsRef\"\n        :key=\"item.url\"\n        class=\"fs-tag-item\"\n        :color=\"item.color\"\n        v-bind=\"computedProps.tag\"\n      >\n        <a :href=\"item.url\" target=\"_blank\" v-bind=\"computedProps.a\">{{ item.name }}</a>\n      </component>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, Ref, ref, watch } from \"vue\";\nimport { useUi } from \"@fast-crud/fast-crud\";\n/**\n * 文件格式化展示组件\n */\nexport default defineComponent({\n  name: \"FsFilesFormat\",\n  props: {\n    /**\n     * 文件列表\n     * 支持格式： `url , {url} , [url1,url2] ,  [{url:url1},{url:url2}]`\n     */\n    modelValue: {},\n    // tag颜色，`【primary, success, warning, danger ,info】`\n    color: {\n      default: \"\"\n    },\n    // 展示类型`【text, tag】`\n    type: {\n      default: \"tag\" // `可选【text,tag】`\n    },\n    // 链接配置\n    a: {},\n    // tag配置\n    tag: {},\n    // 构建下载url方法，支持异步\n    buildUrl: {},\n    // 批量构建下载url方法，支持异步\n    buildUrls: {},\n    // 根据value构建文件名\n    getFileName: {}\n  } as any,\n  setup(props: any, ctx) {\n    const { ui } = useUi();\n    const getFileName = computed(() => {\n      return (\n        // @ts-ignore\n        props.getFileName ||\n        function (url: any) {\n          if (typeof url !== \"string\") {\n            console.warn(\"获取文件名失败，请配置getFileName\");\n            return url;\n          }\n          if (url?.lastIndexOf(\"/\") >= 0) {\n            return url.substring(url.lastIndexOf(\"/\") + 1);\n          }\n          return url;\n        }\n      );\n    });\n    function getItem(value: any): any {\n      return {\n        url: undefined,\n        value: value,\n        name: getFileName.value(value),\n        // @ts-ignore\n        color: props.color\n      };\n    }\n\n    async function buildFileListUrls(list: any[]) {\n      // @ts-ignore\n      if (props.buildUrls) {\n        const values = list.map((item) => item.value);\n        // @ts-ignore\n        const urls = await props.buildUrls(values);\n        for (let i = 0; i < list.length; i++) {\n          list[i].url = urls[i];\n        }\n        // @ts-ignore\n      } else if (props.buildUrl) {\n        for (let item of list) {\n          // @ts-ignore\n          item.url = await props.buildUrl(item.value);\n        }\n      } else {\n        for (let i = 0; i < list.length; i++) {\n          list[i].url = list[i].value;\n        }\n      }\n    }\n\n    async function buildItems() {\n      // @ts-ignore\n      if (props.modelValue == null || props.modelValue === \"\") {\n        return [];\n      }\n      let valueArr = [];\n      // @ts-ignore\n      if (typeof props.modelValue === \"string\") {\n        // @ts-ignore\n        valueArr = [getItem(props.modelValue)];\n        // @ts-ignore\n      } else if (props.modelValue instanceof Array) {\n        // 本来就是数组的\n        valueArr = [];\n        // @ts-ignore\n        for (const val of props.modelValue) {\n          valueArr.push(getItem(val));\n        }\n      }\n      await buildFileListUrls(valueArr);\n      return valueArr;\n    }\n    const itemsRef: Ref = ref([]);\n    watch(\n      () => {\n        // @ts-ignore\n        return props.modelValue;\n      },\n      async () => {\n        itemsRef.value = await buildItems();\n      },\n      {\n        immediate: true\n      }\n    );\n    const computedProps = computed(() => {\n      return {\n        ...props\n      };\n    });\n    return {\n      ui,\n      itemsRef,\n      computedProps\n    };\n  }\n});\n</script>\n<style lang=\"less\">\n.fs-files-format {\n  display: flex;\n  flex-wrap: wrap;\n  .fs-form-item,\n  .fs-tag-item {\n    margin: 1px;\n    a {\n      text-decoration: none;\n    }\n  }\n  .tag-item {\n    margin-right: 10px;\n  }\n  .el-divider__text,\n  .el-link {\n    font-size: inherit;\n  }\n}\n</style>\n"],"names":["_sfc_main","defineComponent","props","ctx","ui","useUi","getFileName","computed","url","getItem","value","buildFileListUrls","list","values","item","urls","i","buildItems","valueArr","val","itemsRef","ref","watch","computedProps","_cache","$props","$setup","$data","$options","_hoisted_1","_ctx","_openBlock","_createElementBlock","_Fragment","_renderList","_createElementVNode","_mergeProps","_createBlock","_resolveDynamicComponent","_withCtx"],"mappings":"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"}