admins-components 9.0.19 → 9.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/admins-components31.js +6 -3
- package/dist/admins-components31.js.map +1 -1
- package/dist/admins-components33.js.map +1 -1
- package/dist/admins-components39.js +0 -1
- package/dist/admins-components39.js.map +1 -1
- package/dist/admins-components41.js.map +1 -1
- package/dist/src/components/Modal.vue.d.ts +1 -1
- package/dist/src/styles/components/modal.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { Teleport as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, onMounted as o, onUnmounted as s, openBlock as c, renderSlot as l, toDisplayString as u } from "vue";
|
|
2
2
|
//#region src/components/Modal.vue?vue&type=script&setup=true&lang.ts
|
|
3
|
-
var d = { class: "ac-component" }, f = { class: "c-modal" }, p = {
|
|
3
|
+
var d = { class: "ac-component" }, f = { class: "c-modal" }, p = {
|
|
4
4
|
key: 0,
|
|
5
|
+
class: "c-modal-header"
|
|
6
|
+
}, m = { class: "c-modal-title" }, h = { class: "c-modal-body c-scroll" }, g = {
|
|
7
|
+
key: 1,
|
|
5
8
|
class: "c-modal-footer"
|
|
6
9
|
}, _ = /* @__PURE__ */ a({
|
|
7
10
|
__name: "Modal",
|
|
@@ -23,11 +26,11 @@ var d = { class: "ac-component" }, f = { class: "c-modal" }, p = { class: "c-mod
|
|
|
23
26
|
class: "c-modal-backdrop",
|
|
24
27
|
onMousedown: y
|
|
25
28
|
}, [i("div", f, [
|
|
26
|
-
|
|
29
|
+
a.title ? (c(), r("div", p, [i("h3", m, u(a.title), 1), i("button", {
|
|
27
30
|
type: "button",
|
|
28
31
|
class: "c-modal-close",
|
|
29
32
|
onClick: s[0] ||= (e) => v("close")
|
|
30
|
-
}, [...s[1] ||= [i("i", { class: "
|
|
33
|
+
}, [...s[1] ||= [i("i", { class: "fa-solid fa-xmark" }, null, -1)]])])) : n("", !0),
|
|
31
34
|
i("div", h, [l(o.$slots, "default")]),
|
|
32
35
|
o.$slots.footer ? (c(), r("div", g, [l(o.$slots, "footer")])) : n("", !0)
|
|
33
36
|
])], 32)])]));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components31.js","names":["$slots"],"sources":["../src/components/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ModalProps {\n title
|
|
1
|
+
{"version":3,"file":"admins-components31.js","names":["$slots"],"sources":["../src/components/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ModalProps {\n title?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from 'vue'\n\ndefineProps<ModalProps>()\n\nconst emit = defineEmits<{\n close: []\n}>()\n\nfunction onBackdropClick(e: MouseEvent) {\n if (e.target === e.currentTarget) {\n emit('close')\n }\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n if (e.key === 'Escape') {\n emit('close')\n }\n}\n\nonMounted(() => {\n document.addEventListener('keydown', onKeydown)\n})\n\nonUnmounted(() => {\n document.removeEventListener('keydown', onKeydown)\n})\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div class=\"c-modal-backdrop\" @mousedown=\"onBackdropClick\">\n <div class=\"c-modal\">\n <div class=\"c-modal-header\" v-if=\"title\">\n <h3 class=\"c-modal-title\">{{ title }}</h3>\n <button type=\"button\" class=\"c-modal-close\" @click=\"emit('close')\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"c-modal-body c-scroll\">\n <slot />\n </div>\n <div v-if=\"$slots.footer\" class=\"c-modal-footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n </div>\n </div>\n </Teleport>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/modal.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;EAWA,IAAM,IAAO;EAIb,SAAS,EAAgB,GAAe;GACtC,AAAI,EAAE,WAAW,EAAE,iBACjB,EAAK,OAAO;EAEhB;EAEA,SAAS,EAAU,GAAkB;GACnC,AAAI,EAAE,QAAQ,YACZ,EAAK,OAAO;EAEhB;SAEA,QAAgB;GACd,SAAS,iBAAiB,WAAW,CAAS;EAChD,CAAC,GAED,QAAkB;GAChB,SAAS,oBAAoB,WAAW,CAAS;EACnD,CAAC,mBAIC,EAmBW,GAAA,EAnBD,IAAG,OAAM,GAAA,CACjB,EAiBM,OAjBN,GAiBM,CAhBJ,EAeM,OAAA;GAfD,OAAM;GAAoB,aAAW;MACxC,EAaM,OAbN,GAaM;GAZ8B,EAAA,SAAA,EAAA,GAAlC,EAKM,OALN,GAKM,CAJJ,EAA0C,MAA1C,GAA0C,EAAb,EAAA,KAAK,GAAA,CAAA,GAClC,EAES,UAAA;IAFD,MAAK;IAAS,OAAM;IAAiB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,OAAA;oBACtD,EAAiC,KAAA,EAA9B,OAAM,oBAAmB,GAAA,MAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAGhC,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;GAECA,EAAAA,OAAO,UAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components33.js","names":[],"sources":["../src/components/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ModalProps {\n title
|
|
1
|
+
{"version":3,"file":"admins-components33.js","names":[],"sources":["../src/components/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ModalProps {\n title?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from 'vue'\n\ndefineProps<ModalProps>()\n\nconst emit = defineEmits<{\n close: []\n}>()\n\nfunction onBackdropClick(e: MouseEvent) {\n if (e.target === e.currentTarget) {\n emit('close')\n }\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n if (e.key === 'Escape') {\n emit('close')\n }\n}\n\nonMounted(() => {\n document.addEventListener('keydown', onKeydown)\n})\n\nonUnmounted(() => {\n document.removeEventListener('keydown', onKeydown)\n})\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div class=\"c-modal-backdrop\" @mousedown=\"onBackdropClick\">\n <div class=\"c-modal\">\n <div class=\"c-modal-header\" v-if=\"title\">\n <h3 class=\"c-modal-title\">{{ title }}</h3>\n <button type=\"button\" class=\"c-modal-close\" @click=\"emit('close')\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"c-modal-body c-scroll\">\n <slot />\n </div>\n <div v-if=\"$slots.footer\" class=\"c-modal-footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n </div>\n </div>\n </Teleport>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/modal.scss\"></style>\n"],"mappings":""}
|
|
@@ -130,7 +130,6 @@ var y = { class: "ac-component" }, b = { class: "c-image-picker" }, x = { class:
|
|
|
130
130
|
])) : i("", !0)
|
|
131
131
|
], 2), R.value ? (f(), r(t, {
|
|
132
132
|
key: 0,
|
|
133
|
-
title: "Kép keresése",
|
|
134
133
|
onClose: u[3] ||= (e) => R.value = !1
|
|
135
134
|
}, {
|
|
136
135
|
default: _(() => [o("hvg-search-image", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components39.js","names":[],"sources":["../src/components/custom/ImagePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ImagePickerModel {\n id: string\n url: string\n source: string\n title: string\n isAdult: boolean\n}\n\nexport interface ImagePickerProps {\n modelValue?: ImagePickerModel\n details?: boolean\n editable?: boolean\n direction?: 'horizontal' | 'vertical'\n articleEditorUrl: string\n environment: string\n searchImageWidgetUrl: string\n imageBaseUrl: string\n imageViewId: string\n}\n\nconst defaultValue: ImagePickerModel = {\n id: '',\n url: '',\n isAdult: false,\n source: '',\n title: '',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport Modal from '@/components/Modal.vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<ImagePickerProps>(), {\n modelValue: undefined,\n details: false,\n editable: false,\n direction: 'vertical',\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', v: ImagePickerModel): void\n}>()\n\nconst local = ref<ImagePickerModel>(defaultValue)\nconst showImageModal = ref(false)\n\nwatch(\n () => local.value,\n () => {\n emit('update:modelValue', local.value)\n },\n { deep: true },\n)\n\nwatch(\n () => props.modelValue,\n (newValue) => {\n if (newValue) {\n local.value = newValue\n }\n },\n { deep: true, immediate: true },\n)\n\n// Generate unique ID\nconst uniqueId = (() => {\n if (typeof crypto !== 'undefined' && crypto.randomUUID) return crypto.randomUUID()\n return `ip-${Date.now()}-${Math.random().toString(36).slice(2)}`\n})()\n\nconst imageCausationId = `${uniqueId}-image-picker-causation`\n\n// Load external search image widget script\nonMounted(() => {\n // Check if custom element is already registered\n if (!customElements.get('hvg-search-image')) {\n if (!document.querySelector(`script[src=\"${props.searchImageWidgetUrl}\"]`)) {\n const script = document.createElement('script')\n script.type = 'text/javascript'\n script.src = props.searchImageWidgetUrl\n script.async = true\n document.head.appendChild(script)\n }\n }\n})\n\n// Computed properties\nconst hasImage = computed(() => {\n return (\n local.value &&\n ((local.value.url && local.value.url.length > 0) ||\n (local.value.id && local.value.id.length > 0))\n )\n})\n\nconst imageUrl = computed(() => {\n if (!hasImage.value) return undefined\n if (local.value.url && local.value.url.length > 0) return local.value.url\n return `${props.imageBaseUrl}/${props.imageViewId}/${local.value.id}.img`\n})\n\nconst isHorizontal = computed(() => props.direction === 'horizontal')\n\n// Event handlers\nconst selectImage = (event: MouseEvent) => {\n event.preventDefault()\n showImageModal.value = true\n}\n\nconst resetImage = (event: MouseEvent) => {\n event.preventDefault()\n local.value = { ...defaultValue }\n}\n\nconst onImageSelected = (e: CustomEvent) => {\n if (e?.detail?.causationid === imageCausationId) {\n showImageModal.value = false\n\n if (e.detail?.image) {\n local.value = {\n id: e.detail.image.id,\n url: '',\n isAdult: e.detail.image.isAdult,\n source: e.detail.image.source,\n title: e.detail.image.title,\n }\n }\n }\n}\n\n// Event listeners\nonMounted(() => {\n window.addEventListener('image-selected', onImageSelected as EventListener)\n})\n\nonUnmounted(() => {\n window.removeEventListener('image-selected', onImageSelected as EventListener)\n})\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div class=\"c-image-picker\">\n <div\n class=\"c-image-picker__container\"\n :class=\"{ 'c-image-picker__container--horizontal': isHorizontal }\"\n >\n <div class=\"c-image-picker__preview\">\n <img\n v-if=\"hasImage\"\n :src=\"imageUrl\"\n :alt=\"local.title || 'Selected image'\"\n class=\"c-image-picker__img\"\n />\n <p v-else class=\"c-image-picker__placeholder\">Nincs kiválasztott kép</p>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"c-image-picker__buttons\">\n <Button\n type=\"success\"\n label=\"Kép kiválasztása\"\n class=\"nowrap\"\n @click=\"selectImage\"\n icon=\"fa-solid fa-image\"\n ></Button>\n <Button\n type=\"error\"\n label=\"Eltávolítás\"\n class=\"nowrap\"\n @click=\"resetImage\"\n icon=\"fa-solid fa-trash\"\n ></Button>\n </div>\n\n <!-- Details Section -->\n <div v-if=\"details && local.id\" class=\"c-image-picker__details\">\n <!-- Source Input -->\n <div>\n <label for=\"image-source\" class=\"c-label\">Forrás</label>\n <div class=\"c-input-row\">\n <input\n v-model=\"local.source\"\n id=\"image-source\"\n type=\"text\"\n class=\"c-input\"\n placeholder=\"Kép forrása\"\n :disabled=\"!editable\"\n />\n </div>\n </div>\n\n <!-- Title/Alt Text Input -->\n <div>\n <label for=\"image-title\" class=\"c-label\">Cím / Alt szöveg</label>\n <div class=\"c-input-row\">\n <textarea\n v-model=\"local.title\"\n id=\"image-title\"\n class=\"c-input c-image-picker__textarea\"\n placeholder=\"Cím vagy alt szöveg\"\n :disabled=\"!editable\"\n />\n </div>\n </div>\n\n <!-- Adult Content Checkbox -->\n <div class=\"flex-center gap-1\">\n <input\n id=\"image-adult\"\n v-model=\"local.isAdult\"\n type=\"checkbox\"\n class=\"c-checkbox\"\n :checked=\"local.isAdult\"\n :disabled=\"!editable\"\n />\n <label for=\"image-adult\" class=\"c-label\">Felnőtt tartalom</label>\n </div>\n </div>\n </div>\n\n <!-- Image Search Modal Dialog -->\n <Modal v-if=\"showImageModal\"
|
|
1
|
+
{"version":3,"file":"admins-components39.js","names":[],"sources":["../src/components/custom/ImagePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ImagePickerModel {\n id: string\n url: string\n source: string\n title: string\n isAdult: boolean\n}\n\nexport interface ImagePickerProps {\n modelValue?: ImagePickerModel\n details?: boolean\n editable?: boolean\n direction?: 'horizontal' | 'vertical'\n articleEditorUrl: string\n environment: string\n searchImageWidgetUrl: string\n imageBaseUrl: string\n imageViewId: string\n}\n\nconst defaultValue: ImagePickerModel = {\n id: '',\n url: '',\n isAdult: false,\n source: '',\n title: '',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport Modal from '@/components/Modal.vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<ImagePickerProps>(), {\n modelValue: undefined,\n details: false,\n editable: false,\n direction: 'vertical',\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', v: ImagePickerModel): void\n}>()\n\nconst local = ref<ImagePickerModel>(defaultValue)\nconst showImageModal = ref(false)\n\nwatch(\n () => local.value,\n () => {\n emit('update:modelValue', local.value)\n },\n { deep: true },\n)\n\nwatch(\n () => props.modelValue,\n (newValue) => {\n if (newValue) {\n local.value = newValue\n }\n },\n { deep: true, immediate: true },\n)\n\n// Generate unique ID\nconst uniqueId = (() => {\n if (typeof crypto !== 'undefined' && crypto.randomUUID) return crypto.randomUUID()\n return `ip-${Date.now()}-${Math.random().toString(36).slice(2)}`\n})()\n\nconst imageCausationId = `${uniqueId}-image-picker-causation`\n\n// Load external search image widget script\nonMounted(() => {\n // Check if custom element is already registered\n if (!customElements.get('hvg-search-image')) {\n if (!document.querySelector(`script[src=\"${props.searchImageWidgetUrl}\"]`)) {\n const script = document.createElement('script')\n script.type = 'text/javascript'\n script.src = props.searchImageWidgetUrl\n script.async = true\n document.head.appendChild(script)\n }\n }\n})\n\n// Computed properties\nconst hasImage = computed(() => {\n return (\n local.value &&\n ((local.value.url && local.value.url.length > 0) ||\n (local.value.id && local.value.id.length > 0))\n )\n})\n\nconst imageUrl = computed(() => {\n if (!hasImage.value) return undefined\n if (local.value.url && local.value.url.length > 0) return local.value.url\n return `${props.imageBaseUrl}/${props.imageViewId}/${local.value.id}.img`\n})\n\nconst isHorizontal = computed(() => props.direction === 'horizontal')\n\n// Event handlers\nconst selectImage = (event: MouseEvent) => {\n event.preventDefault()\n showImageModal.value = true\n}\n\nconst resetImage = (event: MouseEvent) => {\n event.preventDefault()\n local.value = { ...defaultValue }\n}\n\nconst onImageSelected = (e: CustomEvent) => {\n if (e?.detail?.causationid === imageCausationId) {\n showImageModal.value = false\n\n if (e.detail?.image) {\n local.value = {\n id: e.detail.image.id,\n url: '',\n isAdult: e.detail.image.isAdult,\n source: e.detail.image.source,\n title: e.detail.image.title,\n }\n }\n }\n}\n\n// Event listeners\nonMounted(() => {\n window.addEventListener('image-selected', onImageSelected as EventListener)\n})\n\nonUnmounted(() => {\n window.removeEventListener('image-selected', onImageSelected as EventListener)\n})\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div class=\"c-image-picker\">\n <div\n class=\"c-image-picker__container\"\n :class=\"{ 'c-image-picker__container--horizontal': isHorizontal }\"\n >\n <div class=\"c-image-picker__preview\">\n <img\n v-if=\"hasImage\"\n :src=\"imageUrl\"\n :alt=\"local.title || 'Selected image'\"\n class=\"c-image-picker__img\"\n />\n <p v-else class=\"c-image-picker__placeholder\">Nincs kiválasztott kép</p>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"c-image-picker__buttons\">\n <Button\n type=\"success\"\n label=\"Kép kiválasztása\"\n class=\"nowrap\"\n @click=\"selectImage\"\n icon=\"fa-solid fa-image\"\n ></Button>\n <Button\n type=\"error\"\n label=\"Eltávolítás\"\n class=\"nowrap\"\n @click=\"resetImage\"\n icon=\"fa-solid fa-trash\"\n ></Button>\n </div>\n\n <!-- Details Section -->\n <div v-if=\"details && local.id\" class=\"c-image-picker__details\">\n <!-- Source Input -->\n <div>\n <label for=\"image-source\" class=\"c-label\">Forrás</label>\n <div class=\"c-input-row\">\n <input\n v-model=\"local.source\"\n id=\"image-source\"\n type=\"text\"\n class=\"c-input\"\n placeholder=\"Kép forrása\"\n :disabled=\"!editable\"\n />\n </div>\n </div>\n\n <!-- Title/Alt Text Input -->\n <div>\n <label for=\"image-title\" class=\"c-label\">Cím / Alt szöveg</label>\n <div class=\"c-input-row\">\n <textarea\n v-model=\"local.title\"\n id=\"image-title\"\n class=\"c-input c-image-picker__textarea\"\n placeholder=\"Cím vagy alt szöveg\"\n :disabled=\"!editable\"\n />\n </div>\n </div>\n\n <!-- Adult Content Checkbox -->\n <div class=\"flex-center gap-1\">\n <input\n id=\"image-adult\"\n v-model=\"local.isAdult\"\n type=\"checkbox\"\n class=\"c-checkbox\"\n :checked=\"local.isAdult\"\n :disabled=\"!editable\"\n />\n <label for=\"image-adult\" class=\"c-label\">Felnőtt tartalom</label>\n </div>\n </div>\n </div>\n\n <!-- Image Search Modal Dialog -->\n <Modal v-if=\"showImageModal\" @close=\"showImageModal = false\">\n <hvg-search-image\n :causationid=\"imageCausationId\"\n :viewid=\"imageViewId\"\n :environment=\"environment\"\n :aeurl=\"articleEditorUrl\"\n selectonly=\"true\"\n />\n </Modal>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/image-picker.scss\"></style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components41.js","names":[],"sources":["../src/components/custom/ImagePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ImagePickerModel {\n id: string\n url: string\n source: string\n title: string\n isAdult: boolean\n}\n\nexport interface ImagePickerProps {\n modelValue?: ImagePickerModel\n details?: boolean\n editable?: boolean\n direction?: 'horizontal' | 'vertical'\n articleEditorUrl: string\n environment: string\n searchImageWidgetUrl: string\n imageBaseUrl: string\n imageViewId: string\n}\n\nconst defaultValue: ImagePickerModel = {\n id: '',\n url: '',\n isAdult: false,\n source: '',\n title: '',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport Modal from '@/components/Modal.vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<ImagePickerProps>(), {\n modelValue: undefined,\n details: false,\n editable: false,\n direction: 'vertical',\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', v: ImagePickerModel): void\n}>()\n\nconst local = ref<ImagePickerModel>(defaultValue)\nconst showImageModal = ref(false)\n\nwatch(\n () => local.value,\n () => {\n emit('update:modelValue', local.value)\n },\n { deep: true },\n)\n\nwatch(\n () => props.modelValue,\n (newValue) => {\n if (newValue) {\n local.value = newValue\n }\n },\n { deep: true, immediate: true },\n)\n\n// Generate unique ID\nconst uniqueId = (() => {\n if (typeof crypto !== 'undefined' && crypto.randomUUID) return crypto.randomUUID()\n return `ip-${Date.now()}-${Math.random().toString(36).slice(2)}`\n})()\n\nconst imageCausationId = `${uniqueId}-image-picker-causation`\n\n// Load external search image widget script\nonMounted(() => {\n // Check if custom element is already registered\n if (!customElements.get('hvg-search-image')) {\n if (!document.querySelector(`script[src=\"${props.searchImageWidgetUrl}\"]`)) {\n const script = document.createElement('script')\n script.type = 'text/javascript'\n script.src = props.searchImageWidgetUrl\n script.async = true\n document.head.appendChild(script)\n }\n }\n})\n\n// Computed properties\nconst hasImage = computed(() => {\n return (\n local.value &&\n ((local.value.url && local.value.url.length > 0) ||\n (local.value.id && local.value.id.length > 0))\n )\n})\n\nconst imageUrl = computed(() => {\n if (!hasImage.value) return undefined\n if (local.value.url && local.value.url.length > 0) return local.value.url\n return `${props.imageBaseUrl}/${props.imageViewId}/${local.value.id}.img`\n})\n\nconst isHorizontal = computed(() => props.direction === 'horizontal')\n\n// Event handlers\nconst selectImage = (event: MouseEvent) => {\n event.preventDefault()\n showImageModal.value = true\n}\n\nconst resetImage = (event: MouseEvent) => {\n event.preventDefault()\n local.value = { ...defaultValue }\n}\n\nconst onImageSelected = (e: CustomEvent) => {\n if (e?.detail?.causationid === imageCausationId) {\n showImageModal.value = false\n\n if (e.detail?.image) {\n local.value = {\n id: e.detail.image.id,\n url: '',\n isAdult: e.detail.image.isAdult,\n source: e.detail.image.source,\n title: e.detail.image.title,\n }\n }\n }\n}\n\n// Event listeners\nonMounted(() => {\n window.addEventListener('image-selected', onImageSelected as EventListener)\n})\n\nonUnmounted(() => {\n window.removeEventListener('image-selected', onImageSelected as EventListener)\n})\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div class=\"c-image-picker\">\n <div\n class=\"c-image-picker__container\"\n :class=\"{ 'c-image-picker__container--horizontal': isHorizontal }\"\n >\n <div class=\"c-image-picker__preview\">\n <img\n v-if=\"hasImage\"\n :src=\"imageUrl\"\n :alt=\"local.title || 'Selected image'\"\n class=\"c-image-picker__img\"\n />\n <p v-else class=\"c-image-picker__placeholder\">Nincs kiválasztott kép</p>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"c-image-picker__buttons\">\n <Button\n type=\"success\"\n label=\"Kép kiválasztása\"\n class=\"nowrap\"\n @click=\"selectImage\"\n icon=\"fa-solid fa-image\"\n ></Button>\n <Button\n type=\"error\"\n label=\"Eltávolítás\"\n class=\"nowrap\"\n @click=\"resetImage\"\n icon=\"fa-solid fa-trash\"\n ></Button>\n </div>\n\n <!-- Details Section -->\n <div v-if=\"details && local.id\" class=\"c-image-picker__details\">\n <!-- Source Input -->\n <div>\n <label for=\"image-source\" class=\"c-label\">Forrás</label>\n <div class=\"c-input-row\">\n <input\n v-model=\"local.source\"\n id=\"image-source\"\n type=\"text\"\n class=\"c-input\"\n placeholder=\"Kép forrása\"\n :disabled=\"!editable\"\n />\n </div>\n </div>\n\n <!-- Title/Alt Text Input -->\n <div>\n <label for=\"image-title\" class=\"c-label\">Cím / Alt szöveg</label>\n <div class=\"c-input-row\">\n <textarea\n v-model=\"local.title\"\n id=\"image-title\"\n class=\"c-input c-image-picker__textarea\"\n placeholder=\"Cím vagy alt szöveg\"\n :disabled=\"!editable\"\n />\n </div>\n </div>\n\n <!-- Adult Content Checkbox -->\n <div class=\"flex-center gap-1\">\n <input\n id=\"image-adult\"\n v-model=\"local.isAdult\"\n type=\"checkbox\"\n class=\"c-checkbox\"\n :checked=\"local.isAdult\"\n :disabled=\"!editable\"\n />\n <label for=\"image-adult\" class=\"c-label\">Felnőtt tartalom</label>\n </div>\n </div>\n </div>\n\n <!-- Image Search Modal Dialog -->\n <Modal v-if=\"showImageModal\"
|
|
1
|
+
{"version":3,"file":"admins-components41.js","names":[],"sources":["../src/components/custom/ImagePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ImagePickerModel {\n id: string\n url: string\n source: string\n title: string\n isAdult: boolean\n}\n\nexport interface ImagePickerProps {\n modelValue?: ImagePickerModel\n details?: boolean\n editable?: boolean\n direction?: 'horizontal' | 'vertical'\n articleEditorUrl: string\n environment: string\n searchImageWidgetUrl: string\n imageBaseUrl: string\n imageViewId: string\n}\n\nconst defaultValue: ImagePickerModel = {\n id: '',\n url: '',\n isAdult: false,\n source: '',\n title: '',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport Modal from '@/components/Modal.vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<ImagePickerProps>(), {\n modelValue: undefined,\n details: false,\n editable: false,\n direction: 'vertical',\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', v: ImagePickerModel): void\n}>()\n\nconst local = ref<ImagePickerModel>(defaultValue)\nconst showImageModal = ref(false)\n\nwatch(\n () => local.value,\n () => {\n emit('update:modelValue', local.value)\n },\n { deep: true },\n)\n\nwatch(\n () => props.modelValue,\n (newValue) => {\n if (newValue) {\n local.value = newValue\n }\n },\n { deep: true, immediate: true },\n)\n\n// Generate unique ID\nconst uniqueId = (() => {\n if (typeof crypto !== 'undefined' && crypto.randomUUID) return crypto.randomUUID()\n return `ip-${Date.now()}-${Math.random().toString(36).slice(2)}`\n})()\n\nconst imageCausationId = `${uniqueId}-image-picker-causation`\n\n// Load external search image widget script\nonMounted(() => {\n // Check if custom element is already registered\n if (!customElements.get('hvg-search-image')) {\n if (!document.querySelector(`script[src=\"${props.searchImageWidgetUrl}\"]`)) {\n const script = document.createElement('script')\n script.type = 'text/javascript'\n script.src = props.searchImageWidgetUrl\n script.async = true\n document.head.appendChild(script)\n }\n }\n})\n\n// Computed properties\nconst hasImage = computed(() => {\n return (\n local.value &&\n ((local.value.url && local.value.url.length > 0) ||\n (local.value.id && local.value.id.length > 0))\n )\n})\n\nconst imageUrl = computed(() => {\n if (!hasImage.value) return undefined\n if (local.value.url && local.value.url.length > 0) return local.value.url\n return `${props.imageBaseUrl}/${props.imageViewId}/${local.value.id}.img`\n})\n\nconst isHorizontal = computed(() => props.direction === 'horizontal')\n\n// Event handlers\nconst selectImage = (event: MouseEvent) => {\n event.preventDefault()\n showImageModal.value = true\n}\n\nconst resetImage = (event: MouseEvent) => {\n event.preventDefault()\n local.value = { ...defaultValue }\n}\n\nconst onImageSelected = (e: CustomEvent) => {\n if (e?.detail?.causationid === imageCausationId) {\n showImageModal.value = false\n\n if (e.detail?.image) {\n local.value = {\n id: e.detail.image.id,\n url: '',\n isAdult: e.detail.image.isAdult,\n source: e.detail.image.source,\n title: e.detail.image.title,\n }\n }\n }\n}\n\n// Event listeners\nonMounted(() => {\n window.addEventListener('image-selected', onImageSelected as EventListener)\n})\n\nonUnmounted(() => {\n window.removeEventListener('image-selected', onImageSelected as EventListener)\n})\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div class=\"c-image-picker\">\n <div\n class=\"c-image-picker__container\"\n :class=\"{ 'c-image-picker__container--horizontal': isHorizontal }\"\n >\n <div class=\"c-image-picker__preview\">\n <img\n v-if=\"hasImage\"\n :src=\"imageUrl\"\n :alt=\"local.title || 'Selected image'\"\n class=\"c-image-picker__img\"\n />\n <p v-else class=\"c-image-picker__placeholder\">Nincs kiválasztott kép</p>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"c-image-picker__buttons\">\n <Button\n type=\"success\"\n label=\"Kép kiválasztása\"\n class=\"nowrap\"\n @click=\"selectImage\"\n icon=\"fa-solid fa-image\"\n ></Button>\n <Button\n type=\"error\"\n label=\"Eltávolítás\"\n class=\"nowrap\"\n @click=\"resetImage\"\n icon=\"fa-solid fa-trash\"\n ></Button>\n </div>\n\n <!-- Details Section -->\n <div v-if=\"details && local.id\" class=\"c-image-picker__details\">\n <!-- Source Input -->\n <div>\n <label for=\"image-source\" class=\"c-label\">Forrás</label>\n <div class=\"c-input-row\">\n <input\n v-model=\"local.source\"\n id=\"image-source\"\n type=\"text\"\n class=\"c-input\"\n placeholder=\"Kép forrása\"\n :disabled=\"!editable\"\n />\n </div>\n </div>\n\n <!-- Title/Alt Text Input -->\n <div>\n <label for=\"image-title\" class=\"c-label\">Cím / Alt szöveg</label>\n <div class=\"c-input-row\">\n <textarea\n v-model=\"local.title\"\n id=\"image-title\"\n class=\"c-input c-image-picker__textarea\"\n placeholder=\"Cím vagy alt szöveg\"\n :disabled=\"!editable\"\n />\n </div>\n </div>\n\n <!-- Adult Content Checkbox -->\n <div class=\"flex-center gap-1\">\n <input\n id=\"image-adult\"\n v-model=\"local.isAdult\"\n type=\"checkbox\"\n class=\"c-checkbox\"\n :checked=\"local.isAdult\"\n :disabled=\"!editable\"\n />\n <label for=\"image-adult\" class=\"c-label\">Felnőtt tartalom</label>\n </div>\n </div>\n </div>\n\n <!-- Image Search Modal Dialog -->\n <Modal v-if=\"showImageModal\" @close=\"showImageModal = false\">\n <hvg-search-image\n :causationid=\"imageCausationId\"\n :viewid=\"imageViewId\"\n :environment=\"environment\"\n :aeurl=\"articleEditorUrl\"\n selectonly=\"true\"\n />\n </Modal>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/image-picker.scss\"></style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ac-component .c-modal-backdrop{z-index:11000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.ac-component .c-modal{background:var(--neutral-0);border-radius:.75rem;flex-direction:column;min-width:20rem;max-width:calc(100dvw - 2rem);max-height:calc(100dvh - 4rem);animation:.15s ease-out c-modal-enter;display:flex;overflow:hidden;box-shadow:0 8px 32px #0000001f}.ac-component .c-modal-header{border-bottom:1px solid var(--neutral-100);justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}.ac-component .c-modal-title{color:var(--neutral-900);margin:0;font-size:1rem;font-weight:600}.ac-component .c-modal-close{width:2rem;height:2rem;color:var(--neutral-600);cursor:pointer;background:0 0;border:none;border-radius:.375rem;justify-content:center;align-items:center;font-size:1.25rem;transition:background-color .15s,color .15s;display:flex}.ac-component .c-modal-close:hover{background:var(--neutral-100);color:var(--neutral-900)}.ac-component .c-modal-close:focus-visible{outline:none;box-shadow:0 0 0 2px #f265221f}.ac-component .c-modal-body{flex:1;padding:1.25rem;overflow-y:auto}.ac-component .c-modal-footer{border-top:1px solid var(--neutral-100);justify-content:flex-end;align-items:center;gap:.5rem;padding:.75rem 1.25rem;display:flex}.ac-component .c-confirm-modal-message{color:var(--neutral-700);margin:0;font-size:.875rem;line-height:1.5}@keyframes c-modal-enter{0%{opacity:0;transform:scale(.95)translateY(-.5rem)}to{opacity:1;transform:scale(1)translateY(0)}}
|
|
1
|
+
.ac-component .c-modal-backdrop{z-index:11000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.ac-component .c-modal{background:var(--neutral-0);border-radius:.75rem;flex-direction:column;min-width:20rem;max-width:calc(100dvw - 2rem);max-height:calc(100dvh - 4rem);animation:.15s ease-out c-modal-enter;display:flex;overflow:hidden;box-shadow:0 8px 32px #0000001f}.ac-component .c-modal-header{border-bottom:1px solid var(--neutral-100);justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}.ac-component .c-modal-title{color:var(--neutral-900);margin:0;font-size:1rem;font-weight:600}.ac-component .c-modal-close{width:2rem;height:2rem;color:var(--neutral-600);cursor:pointer;background:0 0;border:none;border-radius:.375rem;justify-content:center;align-items:center;font-size:1.25rem;transition:background-color .15s,color .15s;display:flex}.ac-component .c-modal-close:hover{background:var(--neutral-100);color:var(--neutral-900)}.ac-component .c-modal-close:focus-visible{outline:none;box-shadow:0 0 0 2px #f265221f}.ac-component .c-modal-body{flex:1;padding:1.25rem;display:flex;overflow-y:auto}.ac-component .c-modal-footer{border-top:1px solid var(--neutral-100);justify-content:flex-end;align-items:center;gap:.5rem;padding:.75rem 1.25rem;display:flex}.ac-component .c-confirm-modal-message{color:var(--neutral-700);margin:0;font-size:.875rem;line-height:1.5}@keyframes c-modal-enter{0%{opacity:0;transform:scale(.95)translateY(-.5rem)}to{opacity:1;transform:scale(1)translateY(0)}}
|