{"version":3,"file":"index8.js","sources":["../../../../../components/uikit/file/Attach.vue","../../../../../components/uikit/file/AttachedImages.vue","../../../../../components/uikit/file/index.vue"],"sourcesContent":["<template>\n  <label\n    :class=\"{\n      'osk-file-attach': true,\n      'osk-file-attach_disabled': disabled,\n      'osk-file-attach_small': !!small,\n    }\"\n  >\n    <UikitIcon\n      :name=\"icon ?? 'Photo'\"\n      :size=\"iconSize ?? 'xl'\"\n      :color=\"color\"\n    />\n\n    <input\n      ref=\"$inputAttach\"\n      class=\"osk-file-attach__input\"\n      type=\"file\"\n      multiple\n      :disabled=\"disabled\"\n      @change=\"handleAttachFile\"\n    >\n  </label>\n</template>\n\n<script setup lang=\"ts\">\nimport type { TIconNames } from '~/assets/icons';\nimport type { TColors } from '~/types/components/colors';\n\nconst $inputAttach = ref<HTMLInputElement | null>(null);\n\nconst props = defineProps<{\n  disabled?: boolean\n  icon?: TIconNames\n  iconSize?: 's' | 'm' | 'l' | 'xl' | 'auto'\n  color?: TColors\n  small?: boolean\n}>();\n\nconst emit = defineEmits<{\n  (e: 'fileAttach', file: File[]): void,\n}>();\n\nfunction handleAttachFile(e: Event) {\n  if (!$inputAttach.value) return;\n\n  emit('fileAttach', [...($inputAttach.value.files ?? [])]);\n\n  $inputAttach.value.value = '';\n}\n</script>\n\n<style scoped lang=\"scss\">\n@import \"~/assets/scss/settings/index\";\n\n.osk-file-attach {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 2px;\n  border: 1px dashed $grey;\n  width: 93px;\n  height: 93px;\n  transition: all linear .2s;\n\n  &:hover {\n    border-color: #000;\n  }\n\n  &_small {\n    width: auto;\n    height: auto;\n    border: none;\n  }\n\n  &_disabled {\n    pointer-events: none;\n    opacity: .4;\n  }\n\n  &__input {\n    display: none;\n  }\n}\n</style>\n","<template>\n  <div\n    v-for=\"(img, index) in images\"\n    :key=\"img.name\"\n    class=\"osk-file-attached-imgs__item\"\n  >\n    <div\n      class=\"osk-file-attached-imgs__item-remove\"\n      @click=\"() => handleImgRemove(img, index)\"\n    >\n      <UikitIcon\n        name=\"CloseCircle\"\n        size=\"s\"\n        color=\"white\"\n        class=\"osk-file-attached-imgs__item-icon\"\n      />\n    </div>\n\n    <img\n      :src=\"img.dataSrc\"\n      class=\"osk-file-attached-imgs__image\"\n    >\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { IAttachedImg } from '~/types/components/attachedImages';\n\nconst props = defineProps<{\n  attachedImgs: IAttachedImg[];\n  maxImages?: number\n}>();\n\nconst emit = defineEmits<{\n  (e: 'remove-img', file: IAttachedImg, index: number): void,\n}>();\n\nconst images = ref<IAttachedImg[]>([]);\n\nfunction handleImgRemove(img: IAttachedImg, index: number) {\n  const currFile = props.attachedImgs.find((file) => img.name === file.name && img.size === file.size);\n\n  images.value = images.value.filter((file) => img.name !== file.name && img.size !== file.size);\n\n  if (!currFile) return;\n  emit('remove-img', currFile, index);\n}\n\nwatch(() => props.attachedImgs, () => {\n  if (!props.attachedImgs.length) {\n    images.value = [];\n    return;\n  }\n  props.attachedImgs.forEach((img) => {\n    const isFileAdded = images.value.find((file) => img.name === file.name && img.size === file.size);\n\n    if (isFileAdded) return;\n    if (props.maxImages && images.value.length === props.maxImages) {\n      images.value.shift();\n    }\n    images.value.push(img);\n  });\n});\n</script>\n\n<style lang=\"scss\">\n@import \"~/assets/scss/settings/index\";\n\n.osk-file-attached-imgs {\n  &__item {\n    position: relative;\n    width: 93px;\n    height: 93px;\n    margin-bottom: 21px;\n\n    &:not(:last-child) {\n      margin-right: 21px;\n    }\n  }\n\n  &__item-remove {\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    background: rgba(0,0,0,.4);\n    border-radius: 100px;\n    overflow: hidden;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  &__image {\n    width: 93px;\n    height: 93px;\n    object-fit: cover;\n    border-radius: 2px;\n    overflow: hidden;\n  }\n}\n</style>\n","<template>\n  <div class=\"osk-file\">\n    <slot\n      name=\"label\"\n      :data=\"{\n        disabled: base64Imgs.length >= (maxImages ?? 100)\n      }\"\n      :disabled=\"base64Imgs.length >= (maxImages ?? 100)\"\n      :handle-file-attach=\"handleFileAttach\"\n      :upload-image-loading=\"uploadImageLoading\"\n    >\n      <div class=\"osk-file__label\">\n        {{ label ?? $t('uikit.file.label') }}\n      </div>\n    </slot>\n\n    <div class=\"osk-file__content\">\n      <UikitFileAttach\n        v-if=\"!hideFileAttach\"\n        ref=\"$fileAttach\"\n        class=\"osk-file__images\"\n        :disabled=\"base64Imgs.length >= (maxImages ?? 100)\"\n        @file-attach=\"handleFileAttach\"\n      />\n\n      <UikitFileAttachedImages\n        :attached-imgs=\"base64Imgs\"\n        :max-images=\"maxImages\"\n        @remove-img=\"removeImg\"\n      />\n    </div>\n\n    <UikitFormFieldCaption\n      :message=\"errorMessage\"\n      error\n      class=\"osk-products-filters-price__error\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { IAttachedImg } from '~/types/components/attachedImages';\n\nconst props = defineProps<{\n  label?: string\n  maxImages?: number\n  hideFileAttach?: boolean\n  uploadImage?: (file: File) => Promise<{ error?: any, data?: any }>\n}>();\n\nconst emits = defineEmits<{\n  (e: 'remove-img', index: number): void,\n}>();\n\nconst errorMessage = ref('');\nconst $fileAttach = ref();\nconst base64Imgs = ref<IAttachedImg[]>([]);\nconst addedFiles = ref<File[]>([]);\nconst uploadImageLoading = ref(false);\n\nasync function handleFileAttach(files: File[]) {\n  errorMessage.value = '';\n  addedFiles.value = files.filter((file) => file.type.match('image'));\n\n  if (props.uploadImage && addedFiles.value[0]) {\n    uploadImageLoading.value = true;\n\n    await Promise.all(addedFiles.value.map(props.uploadImage));\n\n    uploadImageLoading.value = false;\n  }\n\n  base64Imgs.value = [\n    ...base64Imgs.value,\n    ...await Promise.all(addedFiles.value.map(img2Base64))\n      .then(\n        (res) => res.map(\n          (file) => ({\n            name: file.img.name,\n            size: file.img.size,\n            dataSrc: file.base64 as string,\n          }),\n        ),\n      ),\n  ];\n}\n\nfunction removeImg(file: IAttachedImg, index: number) {\n  if (!$fileAttach.value && !props.hideFileAttach) return;\n\n  clearError();\n\n  base64Imgs.value = base64Imgs.value.filter((attached) => attached.name !== file.name && attached.size !== file.size);\n\n  emits('remove-img', index);\n}\n\nfunction removeAllImages() {\n  base64Imgs.value = [];\n}\n\ndefineExpose({\n  removeAllImages,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@import \"~/assets/scss/settings/index\";\n\n.osk-file {\n  &__label {\n    @include font-style($font-size-caption, normal, $font-weight-semibold);\n    color: $grey;\n    margin-bottom: $indent-small;\n  }\n\n  &__content {\n    display: flex;\n    flex-wrap: wrap;\n    margin-bottom: -21px;\n  }\n\n  &__images {\n    margin-right: 21px;\n    margin-bottom: 21px;\n  }\n}\n</style>\n"],"names":["$inputAttach","ref","emit","__emit","handleAttachFile","e","props","__props","images","handleImgRemove","img","index","currFile","file","watch","emits","errorMessage","$fileAttach","base64Imgs","addedFiles","uploadImageLoading","handleFileAttach","files","img2Base64","res","removeImg","clearError","attached","removeAllImages","__expose"],"mappings":"gtBA6BM,MAAAA,EAAeC,EAA6B,IAAI,EAUhDC,EAAOC,EAIb,SAASC,EAAiBC,EAAU,CAC7BL,EAAa,QAEbE,EAAA,aAAc,CAAC,GAAIF,EAAa,MAAM,OAAS,CAAG,CAAA,CAAC,EAExDA,EAAa,MAAM,MAAQ,GAC7B,ojBCrBA,MAAMM,EAAQC,EAKRL,EAAOC,EAIPK,EAASP,EAAoB,CAAA,CAAE,EAE5B,SAAAQ,EAAgBC,EAAmBC,EAAe,CACzD,MAAMC,EAAWN,EAAM,aAAa,KAAMO,GAASH,EAAI,OAASG,EAAK,MAAQH,EAAI,OAASG,EAAK,IAAI,EAEnGL,EAAO,MAAQA,EAAO,MAAM,OAAQK,GAASH,EAAI,OAASG,EAAK,MAAQH,EAAI,OAASG,EAAK,IAAI,EAExFD,GACAV,EAAA,aAAcU,EAAUD,CAAK,CACpC,CAEM,OAAAG,EAAA,IAAMR,EAAM,aAAc,IAAM,CAChC,GAAA,CAACA,EAAM,aAAa,OAAQ,CAC9BE,EAAO,MAAQ,GACf,MACF,CACMF,EAAA,aAAa,QAASI,GAAQ,CACdF,EAAO,MAAM,KAAMK,GAASH,EAAI,OAASG,EAAK,MAAQH,EAAI,OAASG,EAAK,IAAI,IAG5FP,EAAM,WAAaE,EAAO,MAAM,SAAWF,EAAM,WACnDE,EAAO,MAAM,QAERA,EAAA,MAAM,KAAKE,CAAG,EAAA,CACtB,CAAA,CACF,mmBCnBD,MAAMJ,EAAQC,EAORQ,EAAQZ,EAIRa,EAAef,EAAI,EAAE,EACrBgB,EAAchB,IACdiB,EAAajB,EAAoB,CAAA,CAAE,EACnCkB,EAAalB,EAAY,CAAA,CAAE,EAC3BmB,EAAqBnB,EAAI,EAAK,EAEpC,eAAeoB,EAAiBC,EAAe,CAC7CN,EAAa,MAAQ,GACVG,EAAA,MAAQG,EAAM,OAAQT,GAASA,EAAK,KAAK,MAAM,OAAO,CAAC,EAE9DP,EAAM,aAAea,EAAW,MAAM,CAAC,IACzCC,EAAmB,MAAQ,GAE3B,MAAM,QAAQ,IAAID,EAAW,MAAM,IAAIb,EAAM,WAAW,CAAC,EAEzDc,EAAmB,MAAQ,IAG7BF,EAAW,MAAQ,CACjB,GAAGA,EAAW,MACd,GAAG,MAAM,QAAQ,IAAIC,EAAW,MAAM,IAAII,CAAU,CAAC,EAClD,KACEC,GAAQA,EAAI,IACVX,IAAU,CACT,KAAMA,EAAK,IAAI,KACf,KAAMA,EAAK,IAAI,KACf,QAASA,EAAK,MAAA,EAElB,CACF,CAAA,CAEN,CAES,SAAAY,EAAUZ,EAAoBF,EAAe,CAChD,CAACM,EAAY,OAAS,CAACX,EAAM,iBAEtBoB,IAEXR,EAAW,MAAQA,EAAW,MAAM,OAAQS,GAAaA,EAAS,OAASd,EAAK,MAAQc,EAAS,OAASd,EAAK,IAAI,EAEnHE,EAAM,aAAcJ,CAAK,EAC3B,CAEA,SAASiB,GAAkB,CACzBV,EAAW,MAAQ,EACrB,CAEa,OAAAW,EAAA,CACX,gBAAAD,CAAA,CACD"}