@cortezaproject/corteza-vue 2021.9.5 → 2021.9.6-dev.1
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/index.es.js +32 -32
- package/dist/index.js +32 -32
- package/package.json +2 -2
package/dist/index.es.js
CHANGED
|
@@ -13948,11 +13948,11 @@ __vue_render__$1._withStripped = true;
|
|
|
13948
13948
|
/* style */
|
|
13949
13949
|
const __vue_inject_styles__$2 = function (inject) {
|
|
13950
13950
|
if (!inject) return
|
|
13951
|
-
inject("data-v-
|
|
13951
|
+
inject("data-v-4906883d_0", { source: "div[data-v-4906883d] {\n object-fit: contain;\n}\ndiv img.loaded[data-v-4906883d] {\n width: auto;\n height: auto;\n display: block;\n}\ndiv.inline img[data-v-4906883d] {\n cursor: zoom-in;\n}\n\n/*# sourceMappingURL=InlineIMG.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/filePreview/common/types/IMG/InlineIMG.vue","InlineIMG.vue"],"names":[],"mappings":"AAiFA;EACA,mBAAA;AChFA;ADkFA;EACA,WAAA;EACA,YAAA;EACA,cAAA;AChFA;ADoFA;EACA,eAAA;AClFA;;AAEA,wCAAwC","file":"InlineIMG.vue","sourcesContent":["<template>\n <div class=\"inline\">\n <img\n ref=\"image\"\n :key=\"src\"\n :src=\"src\"\n :title=\"title\"\n :alt=\"alt\"\n :class=\"getClass\"\n :style=\"previewStyle\"\n :width=\"getWidth\"\n :height=\"getHeight\"\n @click=\"$emit('openPreview', {})\"\n @error.once=\"reloadBrokenImage\"\n @load=\"loaded=true\"\n >\n </div>\n</template>\n\n<script lang=\"js\">\nimport base from '../base.vue'\n\nexport default {\n extends: base,\n\n props: {\n alt: {\n required: false,\n type: String,\n default: null,\n },\n title: {\n required: false,\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n loaded: false,\n }\n },\n\n computed: {\n getClass () {\n const rtr = [...this.previewClass]\n if (this.$listeners.click) {\n rtr.push('clickable')\n }\n if (this.loaded) {\n rtr.push('loaded')\n }\n return rtr\n },\n\n getWidth () {\n return this.meta.preview.image.width\n },\n getHeight () {\n return this.meta.preview.image.height\n },\n },\n\n methods: {\n reloadBrokenImage (ev) {\n if (ev.target && ev.target.src) {\n window.setTimeout(() => {\n if (!ev.target && !ev.target.src) return\n\n // This forces Vue to re-try image download\n // eslint-disable-next-line\n ev.target.src = ev.target.src\n }, 500)\n }\n },\n },\n}\n</script>\n\n<style scoped lang=\"scss\">\ndiv {\n object-fit: contain;\n img {\n &.loaded {\n width: auto;\n height: auto;\n display: block;\n }\n }\n &.inline {\n img {\n cursor: zoom-in;\n }\n }\n}\n</style>\n","div {\n object-fit: contain;\n}\ndiv img.loaded {\n width: auto;\n height: auto;\n display: block;\n}\ndiv.inline img {\n cursor: zoom-in;\n}\n\n/*# sourceMappingURL=InlineIMG.vue.map */"]}, media: undefined });
|
|
13952
13952
|
|
|
13953
13953
|
};
|
|
13954
13954
|
/* scoped */
|
|
13955
|
-
const __vue_scope_id__$2 = "data-v-
|
|
13955
|
+
const __vue_scope_id__$2 = "data-v-4906883d";
|
|
13956
13956
|
/* module identifier */
|
|
13957
13957
|
const __vue_module_identifier__$2 = undefined;
|
|
13958
13958
|
/* functional template */
|
|
@@ -14058,7 +14058,7 @@ __vue_render__$2._withStripped = true;
|
|
|
14058
14058
|
/* style */
|
|
14059
14059
|
const __vue_inject_styles__$3 = function (inject) {
|
|
14060
14060
|
if (!inject) return
|
|
14061
|
-
inject("data-v-
|
|
14061
|
+
inject("data-v-ccce0558_0", { source: ".popup-img-preview .pswp {\n pointer-events: none;\n}\n.popup-img-preview .pswp .pswp__img {\n pointer-events: all;\n}\n.popup-img-preview .pswp__top-bar {\n display: none !important;\n}\n\n/*# sourceMappingURL=LightboxIMG.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/filePreview/common/types/IMG/LightboxIMG.vue","LightboxIMG.vue"],"names":[],"mappings":"AAoEA;EACA,oBAAA;ACnEA;ADoEA;EACA,mBAAA;AClEA;ADqEA;EACA,wBAAA;ACnEA;;AAEA,0CAA0C","file":"LightboxIMG.vue","sourcesContent":["<template>\n <div class=\"popup-img-preview\">\n <photo-swipe\n :is-open=\"true\"\n :items=\"items\"\n :options=\"options\"\n @close=\"() => $emit('close')\"\n />\n </div>\n</template>\n\n<script lang=\"js\">\nimport { PhotoSwipe } from 'v-photoswipe'\nimport base from '../base.vue'\n\nexport default {\n components: {\n PhotoSwipe,\n },\n\n extends: base,\n\n data () {\n return {\n options: {\n index: 0,\n bgOpacity: 0,\n closeOnScroll: false,\n escKey: false,\n history: false,\n arrowKeys: false,\n modal: false,\n\n closeEl: false,\n captionEl: false,\n fullscreenEl: false,\n zoomEl: false,\n shareEl: false,\n counterEl: false,\n arrowEl: false,\n preloaderEl: false,\n\n clickToCloseNonZoomable: false,\n },\n }\n },\n\n computed: {\n items () {\n const { original, preview } = this.meta\n const image = (original || preview || {}).image\n if (!image) {\n this.$emit('close')\n return []\n }\n\n return [{\n src: this.src,\n w: image.width,\n h: image.height,\n }]\n },\n },\n}\n</script>\n\n<style lang=\"scss\">\n.popup-img-preview {\n .pswp {\n pointer-events: none;\n .pswp__img {\n pointer-events: all;\n }\n }\n .pswp__top-bar {\n display: none!important;\n }\n}\n</style>\n",".popup-img-preview .pswp {\n pointer-events: none;\n}\n.popup-img-preview .pswp .pswp__img {\n pointer-events: all;\n}\n.popup-img-preview .pswp__top-bar {\n display: none !important;\n}\n\n/*# sourceMappingURL=LightboxIMG.vue.map */"]}, media: undefined });
|
|
14062
14062
|
|
|
14063
14063
|
};
|
|
14064
14064
|
/* scoped */
|
|
@@ -70269,12 +70269,12 @@ __vue_render__$3._withStripped = true;
|
|
|
70269
70269
|
/* style */
|
|
70270
70270
|
const __vue_inject_styles__$4 = function (inject) {
|
|
70271
70271
|
if (!inject) return
|
|
70272
|
-
inject("data-v-
|
|
70273
|
-
,inject("data-v-0e0b6952_1", { source: ".pdf-preview {\n text-align: center;\n}\n.pdf-preview:not(.inline) {\n padding-top: 20px;\n padding-bottom: 20px;\n}\n.pdf-preview:not(.inline) canvas {\n box-shadow: 0 0 3px #1E1E1E41;\n}\n.pdf-preview.inline {\n height: 200px;\n overflow-y: scroll;\n display: inline-block;\n cursor: zoom-in;\n width: 100%;\n max-width: 500px;\n}\n.pdf-preview canvas {\n margin-bottom: 10px;\n}\n.pdf-preview canvas.inline {\n width: 100%;\n}\n.pdf-preview canvas:not(.inline) {\n margin: 0 auto 10px auto;\n display: block;\n}\n.pdf-preview canvas:last-of-type {\n margin-bottom: unset;\n}\n.pdf-preview .loader {\n margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=PDF.vue.map */", map: {"version":3,"sources":["/home/fajfa/Kendu/Corteza/packages/corteza-vue/src/components/filePreview/common/types/PDF/PDF.vue","PDF.vue"],"names":[],"mappings":"AA+TA;EACA,kBAAA;AC9TA;AD+TA;EACA,iBAAA;EACA,oBAAA;AC7TA;AD8TA;EACA,6BAAA;AC5TA;AD+TA;EACA,aAAA;EACA,kBAAA;EACA,qBAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;AC7TA;ADgUA;EACA,mBAAA;AC9TA;AD+TA;EACA,WAAA;AC7TA;ADgUA;EACA,wBAAA;EACA,cAAA;AC9TA;ADiUA;EACA,oBAAA;AC/TA;ADmUA;EACA,mBAAA;ACjUA;;AAEA,kCAAkC","file":"PDF.vue","sourcesContent":["<template>\n <div\n :style=\"previewStyle\"\n :class=\"[...previewClass, 'pdf-preview', inline ? 'inline' : '', $listeners.click ? 'clickable' : '']\"\n @click=\"onPreviewClick\"\n >\n <!-- Container for pdf's pages -->\n <div\n v-show=\"show\"\n ref=\"pages\"\n class=\"pages\"\n />\n\n <div\n v-if=\"loadError\"\n class=\"doc-msg doc-err\"\n >\n <div>\n <h4 class=\"err-message\">\n {{ loadError.message }}\n </h4>\n <p v-if=\"labels.clickToRetry\">\n {{ labels.clickToRetry }}\n </p>\n </div>\n </div>\n <div\n v-else-if=\"!show && labels.loading\"\n class=\"doc-msg doc-err\"\n >\n <p>{{ labels.loading }}</p>\n </div>\n <div\n v-else-if=\"!pageCount && labels.noPages\"\n class=\"doc-msg doc-err\"\n >\n <p>{{ labels.noPages }}</p>\n </div>\n <template v-else>\n <div v-if=\"!inline && labels.downloadForAll && show && hasMore\">\n <p>{{ labels.downloadForAll }}</p>\n </div>\n <div v-else-if=\"inline && labels.firstPagePreview && show\">\n <p>{{ labels.firstPagePreview }}</p>\n </div>\n </template>\n </div>\n</template>\n\n<script lang=\"js\">\nimport pdfjs from 'pdfjs-dist'\nimport pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'\nimport base from '../base.vue'\nimport { makePlaceholder, makeFailedPage, Page, Document } from './helpers'\n\npdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker\n\nfunction sleep (t) {\n return new Promise(resolve => setTimeout(resolve, t))\n}\n\nexport default {\n extends: base,\n\n props: {\n retryBackoff: {\n type: Number,\n required: false,\n default: 300,\n },\n maxRetries: {\n type: Number,\n required: false,\n default: 10,\n },\n\n maxPages: {\n required: false,\n type: Number,\n default: 5,\n },\n\n initialScale: {\n required: false,\n type: Number,\n default: 1,\n },\n },\n\n data () {\n return {\n document: null,\n pages: [],\n show: false,\n loadError: undefined,\n }\n },\n\n computed: {\n /**\n * Helper to provide the number of pages for the given PDF\n * @returns {Number}\n */\n pageCount () {\n if (!this.document || !this.document.pdf) {\n return 0\n }\n return this.document.pdf.numPages\n },\n\n /**\n * Helper to determine if the given PDF has more pages then we are willing to show\n * @returns {Boolean}\n */\n hasMore () {\n return this.maxPages < this.pageCount\n },\n },\n\n created () {\n if (!this.src) {\n this.stdErr(new Error('src.missing'))\n return\n }\n\n this.$nextTick(() => this.init())\n },\n\n methods: {\n /**\n * Helper to handle on preview click. It either requests a retry or\n * emits an open event\n */\n onPreviewClick () {\n if (this.loadError) {\n this.init()\n } else {\n this.$emit('openPreview', { document: this.document })\n }\n },\n\n /**\n * Initializes the state, loads the document & renderes it's pages\n */\n async init () {\n this.document = null\n this.pages = []\n this.show = false\n this.loadError = undefined\n\n return this.loadDocument(this.src)\n .then(this.renderDocument)\n .catch(this.stdErr)\n },\n\n /**\n * Helper method to load the given document. Needed for test stubbing\n * @param {String} src Document's src\n * @returns {Promise<PDFDocumentProxy>}\n */\n async pdfjsLoad (src) {\n return pdfjs.getDocument(src).promise\n },\n\n /**\n * Loads the given PDF. It can load it from API or re-use existing document\n * @param {Document|String} src PDF's source or a Document object\n * @returns {Document}\n */\n async loadDocument (src) {\n if (src instanceof Document) {\n this.document = new Document({ ...src, scale: this.initialScale })\n } else if (typeof src === 'string') {\n let retries = 0\n let err\n const pdfl = async () => {\n return sleep(retries * this.retryBackoff)\n .then(() => this.pdfjsLoad(src))\n .then(pdf => {\n this.document = new Document({ pdf, src, scale: this.initialScale })\n })\n }\n\n // Retry with backoff it it fails to load\n while (!this.document && retries < this.maxRetries) {\n await pdfl().catch(e => {\n retries++\n err = e\n })\n }\n\n if (!this.document) {\n throw err\n }\n } else {\n throw new Error('src.notValid')\n }\n return this.document\n },\n\n /**\n * Renders the given PDF\n * @param {Document} doc The Document to render\n * @return {Promise<undefined>}\n */\n async renderDocument (doc) {\n const rf = this.$refs.pages\n\n const pgCount = Math.min(this.pageCount, this.maxPages)\n this.pages = [...new Array(pgCount)].map((_, i) => new Page({ index: i }))\n\n if (pgCount <= 0) {\n this.show = true\n return\n }\n\n // Loadup pages\n for (let i = 0; i < pgCount; i++) {\n const node = makePlaceholder(this.labels)\n rf.appendChild(node)\n this.pages.splice(i, 1, new Page({ ...this.pages[i], node, loading: true }))\n\n this.renderPage(this.pages[i], doc, rf)\n .then(page => {\n this.pages.splice(page.index, 1, page)\n\n if (page.index === 0) {\n this.show = true\n }\n })\n .catch(this.stdErr)\n }\n },\n\n /**\n * Renders the given page\n * @param {Page} page The page in question\n * @param {Document} doc Page source\n * @param {Node} rf PDF container\n * @returns {Promise<undefined>}\n */\n async renderPage (page, doc, rf) {\n // pdfjs starts with 1!\n return doc.pdf.getPage(page.index + 1).then(p => {\n const np = new Page(page)\n np.loading = false\n np.loaded = true\n np.page = p\n\n // Render page\n const canvas = document.createElement('canvas')\n const scale = doc.scale\n const viewport = np.page.getViewport(scale)\n const canvasContext = canvas.getContext('2d')\n const renderContext = { canvasContext, viewport }\n canvas.height = viewport.height\n canvas.width = viewport.width\n\n return np.page.render(renderContext).then(() => {\n np.node = canvas\n np.rendered = true\n if (this.inline) {\n canvas.classList.add('inline')\n }\n return np\n })\n\n .catch(() => {\n const node = makeFailedPage(this.labels)\n np.node = node\n np.rendered = false\n np.failed = true\n return np\n })\n\n .then(np => {\n rf.replaceChild(np.node, page.node)\n return np\n })\n })\n },\n\n /**\n * Standard error handler\n * @param {Error} err The error\n */\n stdErr (err) {\n this.loadError = err\n this.$emit('error', err)\n },\n },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$white: white !default;\n$danger: red !default;\n\n.doc-msg {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n background-color: $white;\n}\n.doc-err {\n cursor: pointer;\n\n .err-message {\n color: $danger;\n }\n}\n\n</style>\n\n<style lang=\"scss\">\n// Style not scoped, since pages are manually rendered\n\n.pdf-preview {\n text-align: center;\n &:not(.inline) {\n padding-top: 20px;\n padding-bottom: 20px;\n canvas {\n box-shadow: 0 0 3px #1E1E1E41;\n }\n }\n &.inline {\n height: 200px;\n overflow-y: scroll;\n display: inline-block;\n cursor: zoom-in;\n width: 100%;\n max-width: 500px;\n }\n\n canvas {\n margin-bottom: 10px;\n &.inline {\n width: 100%;\n }\n\n &:not(.inline) {\n margin: 0 auto 10px auto;\n display: block;\n }\n\n &:last-of-type {\n margin-bottom: unset;\n }\n }\n\n .loader {\n margin-bottom: 10px;\n }\n}\n\n</style>\n",".pdf-preview {\n text-align: center;\n}\n.pdf-preview:not(.inline) {\n padding-top: 20px;\n padding-bottom: 20px;\n}\n.pdf-preview:not(.inline) canvas {\n box-shadow: 0 0 3px #1E1E1E41;\n}\n.pdf-preview.inline {\n height: 200px;\n overflow-y: scroll;\n display: inline-block;\n cursor: zoom-in;\n width: 100%;\n max-width: 500px;\n}\n.pdf-preview canvas {\n margin-bottom: 10px;\n}\n.pdf-preview canvas.inline {\n width: 100%;\n}\n.pdf-preview canvas:not(.inline) {\n margin: 0 auto 10px auto;\n display: block;\n}\n.pdf-preview canvas:last-of-type {\n margin-bottom: unset;\n}\n.pdf-preview .loader {\n margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=PDF.vue.map */"]}, media: undefined });
|
|
70272
|
+
inject("data-v-66127e42_0", { source: ".doc-msg[data-v-66127e42] {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n background-color: white;\n}\n.doc-err[data-v-66127e42] {\n cursor: pointer;\n}\n.doc-err .err-message[data-v-66127e42] {\n color: red;\n}\n\n/*# sourceMappingURL=PDF.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/filePreview/common/types/PDF/PDF.vue","PDF.vue"],"names":[],"mappings":"AA0SA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;EACA,WAAA;EACA,uBATA;AChSA;AD2SA;EACA,eAAA;ACxSA;AD0SA;EACA,UAdA;AC1RA;;AAEA,kCAAkC","file":"PDF.vue","sourcesContent":["<template>\n <div\n :style=\"previewStyle\"\n :class=\"[...previewClass, 'pdf-preview', inline ? 'inline' : '', $listeners.click ? 'clickable' : '']\"\n @click=\"onPreviewClick\"\n >\n <!-- Container for pdf's pages -->\n <div\n v-show=\"show\"\n ref=\"pages\"\n class=\"pages\"\n />\n\n <div\n v-if=\"loadError\"\n class=\"doc-msg doc-err\"\n >\n <div>\n <h4 class=\"err-message\">\n {{ loadError.message }}\n </h4>\n <p v-if=\"labels.clickToRetry\">\n {{ labels.clickToRetry }}\n </p>\n </div>\n </div>\n <div\n v-else-if=\"!show && labels.loading\"\n class=\"doc-msg doc-err\"\n >\n <p>{{ labels.loading }}</p>\n </div>\n <div\n v-else-if=\"!pageCount && labels.noPages\"\n class=\"doc-msg doc-err\"\n >\n <p>{{ labels.noPages }}</p>\n </div>\n <template v-else>\n <div v-if=\"!inline && labels.downloadForAll && show && hasMore\">\n <p>{{ labels.downloadForAll }}</p>\n </div>\n <div v-else-if=\"inline && labels.firstPagePreview && show\">\n <p>{{ labels.firstPagePreview }}</p>\n </div>\n </template>\n </div>\n</template>\n\n<script lang=\"js\">\nimport pdfjs from 'pdfjs-dist'\nimport pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'\nimport base from '../base.vue'\nimport { makePlaceholder, makeFailedPage, Page, Document } from './helpers'\n\npdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker\n\nfunction sleep (t) {\n return new Promise(resolve => setTimeout(resolve, t))\n}\n\nexport default {\n extends: base,\n\n props: {\n retryBackoff: {\n type: Number,\n required: false,\n default: 300,\n },\n maxRetries: {\n type: Number,\n required: false,\n default: 10,\n },\n\n maxPages: {\n required: false,\n type: Number,\n default: 5,\n },\n\n initialScale: {\n required: false,\n type: Number,\n default: 1,\n },\n },\n\n data () {\n return {\n document: null,\n pages: [],\n show: false,\n loadError: undefined,\n }\n },\n\n computed: {\n /**\n * Helper to provide the number of pages for the given PDF\n * @returns {Number}\n */\n pageCount () {\n if (!this.document || !this.document.pdf) {\n return 0\n }\n return this.document.pdf.numPages\n },\n\n /**\n * Helper to determine if the given PDF has more pages then we are willing to show\n * @returns {Boolean}\n */\n hasMore () {\n return this.maxPages < this.pageCount\n },\n },\n\n created () {\n if (!this.src) {\n this.stdErr(new Error('src.missing'))\n return\n }\n\n this.$nextTick(() => this.init())\n },\n\n methods: {\n /**\n * Helper to handle on preview click. It either requests a retry or\n * emits an open event\n */\n onPreviewClick () {\n if (this.loadError) {\n this.init()\n } else {\n this.$emit('openPreview', { document: this.document })\n }\n },\n\n /**\n * Initializes the state, loads the document & renderes it's pages\n */\n async init () {\n this.document = null\n this.pages = []\n this.show = false\n this.loadError = undefined\n\n return this.loadDocument(this.src)\n .then(this.renderDocument)\n .catch(this.stdErr)\n },\n\n /**\n * Helper method to load the given document. Needed for test stubbing\n * @param {String} src Document's src\n * @returns {Promise<PDFDocumentProxy>}\n */\n async pdfjsLoad (src) {\n return pdfjs.getDocument(src).promise\n },\n\n /**\n * Loads the given PDF. It can load it from API or re-use existing document\n * @param {Document|String} src PDF's source or a Document object\n * @returns {Document}\n */\n async loadDocument (src) {\n if (src instanceof Document) {\n this.document = new Document({ ...src, scale: this.initialScale })\n } else if (typeof src === 'string') {\n let retries = 0\n let err\n const pdfl = async () => {\n return sleep(retries * this.retryBackoff)\n .then(() => this.pdfjsLoad(src))\n .then(pdf => {\n this.document = new Document({ pdf, src, scale: this.initialScale })\n })\n }\n\n // Retry with backoff it it fails to load\n while (!this.document && retries < this.maxRetries) {\n await pdfl().catch(e => {\n retries++\n err = e\n })\n }\n\n if (!this.document) {\n throw err\n }\n } else {\n throw new Error('src.notValid')\n }\n return this.document\n },\n\n /**\n * Renders the given PDF\n * @param {Document} doc The Document to render\n * @return {Promise<undefined>}\n */\n async renderDocument (doc) {\n const rf = this.$refs.pages\n\n const pgCount = Math.min(this.pageCount, this.maxPages)\n this.pages = [...new Array(pgCount)].map((_, i) => new Page({ index: i }))\n\n if (pgCount <= 0) {\n this.show = true\n return\n }\n\n // Loadup pages\n for (let i = 0; i < pgCount; i++) {\n const node = makePlaceholder(this.labels)\n rf.appendChild(node)\n this.pages.splice(i, 1, new Page({ ...this.pages[i], node, loading: true }))\n\n this.renderPage(this.pages[i], doc, rf)\n .then(page => {\n this.pages.splice(page.index, 1, page)\n\n if (page.index === 0) {\n this.show = true\n }\n })\n .catch(this.stdErr)\n }\n },\n\n /**\n * Renders the given page\n * @param {Page} page The page in question\n * @param {Document} doc Page source\n * @param {Node} rf PDF container\n * @returns {Promise<undefined>}\n */\n async renderPage (page, doc, rf) {\n // pdfjs starts with 1!\n return doc.pdf.getPage(page.index + 1).then(p => {\n const np = new Page(page)\n np.loading = false\n np.loaded = true\n np.page = p\n\n // Render page\n const canvas = document.createElement('canvas')\n const scale = doc.scale\n const viewport = np.page.getViewport(scale)\n const canvasContext = canvas.getContext('2d')\n const renderContext = { canvasContext, viewport }\n canvas.height = viewport.height\n canvas.width = viewport.width\n\n return np.page.render(renderContext).then(() => {\n np.node = canvas\n np.rendered = true\n if (this.inline) {\n canvas.classList.add('inline')\n }\n return np\n })\n\n .catch(() => {\n const node = makeFailedPage(this.labels)\n np.node = node\n np.rendered = false\n np.failed = true\n return np\n })\n\n .then(np => {\n rf.replaceChild(np.node, page.node)\n return np\n })\n })\n },\n\n /**\n * Standard error handler\n * @param {Error} err The error\n */\n stdErr (err) {\n this.loadError = err\n this.$emit('error', err)\n },\n },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$white: white !default;\n$danger: red !default;\n\n.doc-msg {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n background-color: $white;\n}\n.doc-err {\n cursor: pointer;\n\n .err-message {\n color: $danger;\n }\n}\n\n</style>\n\n<style lang=\"scss\">\n// Style not scoped, since pages are manually rendered\n\n.pdf-preview {\n text-align: center;\n &:not(.inline) {\n padding-top: 20px;\n padding-bottom: 20px;\n canvas {\n box-shadow: 0 0 3px #1E1E1E41;\n }\n }\n &.inline {\n height: 200px;\n overflow-y: scroll;\n display: inline-block;\n cursor: zoom-in;\n width: 100%;\n max-width: 500px;\n }\n\n canvas {\n margin-bottom: 10px;\n &.inline {\n width: 100%;\n }\n\n &:not(.inline) {\n margin: 0 auto 10px auto;\n display: block;\n }\n\n &:last-of-type {\n margin-bottom: unset;\n }\n }\n\n .loader {\n margin-bottom: 10px;\n }\n}\n\n</style>\n",".doc-msg {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n background-color: white;\n}\n\n.doc-err {\n cursor: pointer;\n}\n.doc-err .err-message {\n color: red;\n}\n\n/*# sourceMappingURL=PDF.vue.map */"]}, media: undefined })
|
|
70273
|
+
,inject("data-v-66127e42_1", { source: ".pdf-preview {\n text-align: center;\n}\n.pdf-preview:not(.inline) {\n padding-top: 20px;\n padding-bottom: 20px;\n}\n.pdf-preview:not(.inline) canvas {\n box-shadow: 0 0 3px #1E1E1E41;\n}\n.pdf-preview.inline {\n height: 200px;\n overflow-y: scroll;\n display: inline-block;\n cursor: zoom-in;\n width: 100%;\n max-width: 500px;\n}\n.pdf-preview canvas {\n margin-bottom: 10px;\n}\n.pdf-preview canvas.inline {\n width: 100%;\n}\n.pdf-preview canvas:not(.inline) {\n margin: 0 auto 10px auto;\n display: block;\n}\n.pdf-preview canvas:last-of-type {\n margin-bottom: unset;\n}\n.pdf-preview .loader {\n margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=PDF.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/filePreview/common/types/PDF/PDF.vue","PDF.vue"],"names":[],"mappings":"AA+TA;EACA,kBAAA;AC9TA;AD+TA;EACA,iBAAA;EACA,oBAAA;AC7TA;AD8TA;EACA,6BAAA;AC5TA;AD+TA;EACA,aAAA;EACA,kBAAA;EACA,qBAAA;EACA,eAAA;EACA,WAAA;EACA,gBAAA;AC7TA;ADgUA;EACA,mBAAA;AC9TA;AD+TA;EACA,WAAA;AC7TA;ADgUA;EACA,wBAAA;EACA,cAAA;AC9TA;ADiUA;EACA,oBAAA;AC/TA;ADmUA;EACA,mBAAA;ACjUA;;AAEA,kCAAkC","file":"PDF.vue","sourcesContent":["<template>\n <div\n :style=\"previewStyle\"\n :class=\"[...previewClass, 'pdf-preview', inline ? 'inline' : '', $listeners.click ? 'clickable' : '']\"\n @click=\"onPreviewClick\"\n >\n <!-- Container for pdf's pages -->\n <div\n v-show=\"show\"\n ref=\"pages\"\n class=\"pages\"\n />\n\n <div\n v-if=\"loadError\"\n class=\"doc-msg doc-err\"\n >\n <div>\n <h4 class=\"err-message\">\n {{ loadError.message }}\n </h4>\n <p v-if=\"labels.clickToRetry\">\n {{ labels.clickToRetry }}\n </p>\n </div>\n </div>\n <div\n v-else-if=\"!show && labels.loading\"\n class=\"doc-msg doc-err\"\n >\n <p>{{ labels.loading }}</p>\n </div>\n <div\n v-else-if=\"!pageCount && labels.noPages\"\n class=\"doc-msg doc-err\"\n >\n <p>{{ labels.noPages }}</p>\n </div>\n <template v-else>\n <div v-if=\"!inline && labels.downloadForAll && show && hasMore\">\n <p>{{ labels.downloadForAll }}</p>\n </div>\n <div v-else-if=\"inline && labels.firstPagePreview && show\">\n <p>{{ labels.firstPagePreview }}</p>\n </div>\n </template>\n </div>\n</template>\n\n<script lang=\"js\">\nimport pdfjs from 'pdfjs-dist'\nimport pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'\nimport base from '../base.vue'\nimport { makePlaceholder, makeFailedPage, Page, Document } from './helpers'\n\npdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker\n\nfunction sleep (t) {\n return new Promise(resolve => setTimeout(resolve, t))\n}\n\nexport default {\n extends: base,\n\n props: {\n retryBackoff: {\n type: Number,\n required: false,\n default: 300,\n },\n maxRetries: {\n type: Number,\n required: false,\n default: 10,\n },\n\n maxPages: {\n required: false,\n type: Number,\n default: 5,\n },\n\n initialScale: {\n required: false,\n type: Number,\n default: 1,\n },\n },\n\n data () {\n return {\n document: null,\n pages: [],\n show: false,\n loadError: undefined,\n }\n },\n\n computed: {\n /**\n * Helper to provide the number of pages for the given PDF\n * @returns {Number}\n */\n pageCount () {\n if (!this.document || !this.document.pdf) {\n return 0\n }\n return this.document.pdf.numPages\n },\n\n /**\n * Helper to determine if the given PDF has more pages then we are willing to show\n * @returns {Boolean}\n */\n hasMore () {\n return this.maxPages < this.pageCount\n },\n },\n\n created () {\n if (!this.src) {\n this.stdErr(new Error('src.missing'))\n return\n }\n\n this.$nextTick(() => this.init())\n },\n\n methods: {\n /**\n * Helper to handle on preview click. It either requests a retry or\n * emits an open event\n */\n onPreviewClick () {\n if (this.loadError) {\n this.init()\n } else {\n this.$emit('openPreview', { document: this.document })\n }\n },\n\n /**\n * Initializes the state, loads the document & renderes it's pages\n */\n async init () {\n this.document = null\n this.pages = []\n this.show = false\n this.loadError = undefined\n\n return this.loadDocument(this.src)\n .then(this.renderDocument)\n .catch(this.stdErr)\n },\n\n /**\n * Helper method to load the given document. Needed for test stubbing\n * @param {String} src Document's src\n * @returns {Promise<PDFDocumentProxy>}\n */\n async pdfjsLoad (src) {\n return pdfjs.getDocument(src).promise\n },\n\n /**\n * Loads the given PDF. It can load it from API or re-use existing document\n * @param {Document|String} src PDF's source or a Document object\n * @returns {Document}\n */\n async loadDocument (src) {\n if (src instanceof Document) {\n this.document = new Document({ ...src, scale: this.initialScale })\n } else if (typeof src === 'string') {\n let retries = 0\n let err\n const pdfl = async () => {\n return sleep(retries * this.retryBackoff)\n .then(() => this.pdfjsLoad(src))\n .then(pdf => {\n this.document = new Document({ pdf, src, scale: this.initialScale })\n })\n }\n\n // Retry with backoff it it fails to load\n while (!this.document && retries < this.maxRetries) {\n await pdfl().catch(e => {\n retries++\n err = e\n })\n }\n\n if (!this.document) {\n throw err\n }\n } else {\n throw new Error('src.notValid')\n }\n return this.document\n },\n\n /**\n * Renders the given PDF\n * @param {Document} doc The Document to render\n * @return {Promise<undefined>}\n */\n async renderDocument (doc) {\n const rf = this.$refs.pages\n\n const pgCount = Math.min(this.pageCount, this.maxPages)\n this.pages = [...new Array(pgCount)].map((_, i) => new Page({ index: i }))\n\n if (pgCount <= 0) {\n this.show = true\n return\n }\n\n // Loadup pages\n for (let i = 0; i < pgCount; i++) {\n const node = makePlaceholder(this.labels)\n rf.appendChild(node)\n this.pages.splice(i, 1, new Page({ ...this.pages[i], node, loading: true }))\n\n this.renderPage(this.pages[i], doc, rf)\n .then(page => {\n this.pages.splice(page.index, 1, page)\n\n if (page.index === 0) {\n this.show = true\n }\n })\n .catch(this.stdErr)\n }\n },\n\n /**\n * Renders the given page\n * @param {Page} page The page in question\n * @param {Document} doc Page source\n * @param {Node} rf PDF container\n * @returns {Promise<undefined>}\n */\n async renderPage (page, doc, rf) {\n // pdfjs starts with 1!\n return doc.pdf.getPage(page.index + 1).then(p => {\n const np = new Page(page)\n np.loading = false\n np.loaded = true\n np.page = p\n\n // Render page\n const canvas = document.createElement('canvas')\n const scale = doc.scale\n const viewport = np.page.getViewport(scale)\n const canvasContext = canvas.getContext('2d')\n const renderContext = { canvasContext, viewport }\n canvas.height = viewport.height\n canvas.width = viewport.width\n\n return np.page.render(renderContext).then(() => {\n np.node = canvas\n np.rendered = true\n if (this.inline) {\n canvas.classList.add('inline')\n }\n return np\n })\n\n .catch(() => {\n const node = makeFailedPage(this.labels)\n np.node = node\n np.rendered = false\n np.failed = true\n return np\n })\n\n .then(np => {\n rf.replaceChild(np.node, page.node)\n return np\n })\n })\n },\n\n /**\n * Standard error handler\n * @param {Error} err The error\n */\n stdErr (err) {\n this.loadError = err\n this.$emit('error', err)\n },\n },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$white: white !default;\n$danger: red !default;\n\n.doc-msg {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n background-color: $white;\n}\n.doc-err {\n cursor: pointer;\n\n .err-message {\n color: $danger;\n }\n}\n\n</style>\n\n<style lang=\"scss\">\n// Style not scoped, since pages are manually rendered\n\n.pdf-preview {\n text-align: center;\n &:not(.inline) {\n padding-top: 20px;\n padding-bottom: 20px;\n canvas {\n box-shadow: 0 0 3px #1E1E1E41;\n }\n }\n &.inline {\n height: 200px;\n overflow-y: scroll;\n display: inline-block;\n cursor: zoom-in;\n width: 100%;\n max-width: 500px;\n }\n\n canvas {\n margin-bottom: 10px;\n &.inline {\n width: 100%;\n }\n\n &:not(.inline) {\n margin: 0 auto 10px auto;\n display: block;\n }\n\n &:last-of-type {\n margin-bottom: unset;\n }\n }\n\n .loader {\n margin-bottom: 10px;\n }\n}\n\n</style>\n",".pdf-preview {\n text-align: center;\n}\n.pdf-preview:not(.inline) {\n padding-top: 20px;\n padding-bottom: 20px;\n}\n.pdf-preview:not(.inline) canvas {\n box-shadow: 0 0 3px #1E1E1E41;\n}\n.pdf-preview.inline {\n height: 200px;\n overflow-y: scroll;\n display: inline-block;\n cursor: zoom-in;\n width: 100%;\n max-width: 500px;\n}\n.pdf-preview canvas {\n margin-bottom: 10px;\n}\n.pdf-preview canvas.inline {\n width: 100%;\n}\n.pdf-preview canvas:not(.inline) {\n margin: 0 auto 10px auto;\n display: block;\n}\n.pdf-preview canvas:last-of-type {\n margin-bottom: unset;\n}\n.pdf-preview .loader {\n margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=PDF.vue.map */"]}, media: undefined });
|
|
70274
70274
|
|
|
70275
70275
|
};
|
|
70276
70276
|
/* scoped */
|
|
70277
|
-
const __vue_scope_id__$4 = "data-v-
|
|
70277
|
+
const __vue_scope_id__$4 = "data-v-66127e42";
|
|
70278
70278
|
/* module identifier */
|
|
70279
70279
|
const __vue_module_identifier__$4 = undefined;
|
|
70280
70280
|
/* functional template */
|
|
@@ -70341,11 +70341,11 @@ __vue_render__$4._withStripped = true;
|
|
|
70341
70341
|
/* style */
|
|
70342
70342
|
const __vue_inject_styles__$5 = function (inject) {
|
|
70343
70343
|
if (!inject) return
|
|
70344
|
-
inject("data-v-
|
|
70344
|
+
inject("data-v-09c086fd_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Temporary style; update when messaging is updated with bootstrap */\n.lightbox[data-v-09c086fd] {\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n\n background-color: #EEF1F3;\n z-index: 2000;\n}\n.lightbox header[data-v-09c086fd] {\n display: flex;\n justify-content: space-between;\n background-color: #FFFFFF;\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n box-shadow: 0 0 3px #1E1E1E41;\n z-index: 1000;\n height: 50px;\n}\n.lightbox header .left[data-v-09c086fd] {\n margin-left: 10px;\n}\n.lightbox header .right[data-v-09c086fd] {\n margin-right: 10px;\n}\n.lightbox header > div[data-v-09c086fd] {\n display: flex;\n align-items: center;\n}\n.lightbox main[data-v-09c086fd] {\n position: absolute;\n top: 50px;\n left: 0;\n right: 0;\n bottom: 0;\n overflow-y: scroll;\n z-index: 1;\n}\n.lightbox header button[data-v-09c086fd] {\n background-color: transparent;\n border: none;\n outline: none;\n font-size: 25px;\n font-weight: bold;\n margin: 10px;\n cursor: pointer;\n box-sizing: border-box;\n}\n.lightbox header button[data-v-09c086fd]:last-of-type {\n margin-right: 0;\n}\n\n", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/lightbox/CLightbox.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBA,qEAAA;AAEA;EACA,eAAA;EACA,OAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;;EAEA,yBAAA;EACA,aAAA;AACA;AAEA;EACA,aAAA;EACA,8BAAA;EACA,yBAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,QAAA;EACA,6BAAA;EACA,aAAA;EACA,YAAA;AACA;AAEA;EACA,iBAAA;AACA;AACA;EACA,kBAAA;AACA;AAEA;EACA,aAAA;EACA,mBAAA;AACA;AAEA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,kBAAA;EACA,UAAA;AACA;AAEA;EACA,6BAAA;EACA,YAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,sBAAA;AACA;AAEA;EACA,eAAA;AACA","file":"CLightbox.vue","sourcesContent":["<template>\n <div class=\"lightbox\">\n <header>\n <div class=\"left\">\n <slot name=\"header.left\" />\n </div>\n <div class=\"right\">\n <slot name=\"header.right\" />\n <button\n class=\"closer\"\n @click=\"$emit('close')\"\n >\n ×\n </button>\n </div>\n </header>\n <main>\n <slot name=\"main\" />\n </main>\n </div>\n</template>\n\n<style scoped>\n/* Temporary style; update when messaging is updated with bootstrap */\n\n.lightbox {\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n\n background-color: #EEF1F3;\n z-index: 2000;\n}\n\n.lightbox header {\n display: flex;\n justify-content: space-between;\n background-color: #FFFFFF;\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n box-shadow: 0 0 3px #1E1E1E41;\n z-index: 1000;\n height: 50px;\n}\n\n.lightbox header .left {\n margin-left: 10px;\n}\n.lightbox header .right {\n margin-right: 10px;\n}\n\n.lightbox header > div {\n display: flex;\n align-items: center;\n}\n\n.lightbox main {\n position: absolute;\n top: 50px;\n left: 0;\n right: 0;\n bottom: 0;\n overflow-y: scroll;\n z-index: 1;\n}\n\n.lightbox header button {\n background-color: transparent;\n border: none;\n outline: none;\n font-size: 25px;\n font-weight: bold;\n margin: 10px;\n cursor: pointer;\n box-sizing: border-box;\n}\n\n.lightbox header button:last-of-type {\n margin-right: 0;\n}\n\n</style>\n"]}, media: undefined });
|
|
70345
70345
|
|
|
70346
70346
|
};
|
|
70347
70347
|
/* scoped */
|
|
70348
|
-
const __vue_scope_id__$5 = "data-v-
|
|
70348
|
+
const __vue_scope_id__$5 = "data-v-09c086fd";
|
|
70349
70349
|
/* module identifier */
|
|
70350
70350
|
const __vue_module_identifier__$5 = undefined;
|
|
70351
70351
|
/* functional template */
|
|
@@ -71489,12 +71489,12 @@ __vue_render__$b._withStripped = true;
|
|
|
71489
71489
|
/* style */
|
|
71490
71490
|
const __vue_inject_styles__$f = function (inject) {
|
|
71491
71491
|
if (!inject) return
|
|
71492
|
-
inject("data-v-
|
|
71493
|
-
,inject("data-v-
|
|
71492
|
+
inject("data-v-d8948e54_0", { source: ".icon[data-v-d8948e54] {\n padding: 0 2px;\n}\n.icon.color-icon[data-v-d8948e54] {\n border-bottom: 1px solid black;\n}\n.icon.background-icon[data-v-d8948e54] {\n background-color: rgba(0, 0, 0, 0.07);\n padding: 2px 3px;\n}\n\n/*# sourceMappingURL=Color.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/input/CRichTextInput/RToolbar/TMark/Color.vue","Color.vue"],"names":[],"mappings":"AA8DA;EACA,cAAA;AC7DA;AD+DA;EACA,8BAAA;AC7DA;ADgEA;EACA,qCAAA;EACA,gBAAA;AC9DA;;AAEA,oCAAoC","file":"Color.vue","sourcesContent":["<template>\n <div>\n <b-button\n variant=\"link\"\n class=\"text-dark font-weight-bold text-decoration-none\"\n :id=\"`color-popover-${format.type}`\">\n\n <span\n class=\"icon\"\n :class=\"typeStyle\">A</span>\n\n </b-button>\n\n <b-popover\n :delay=\"0\"\n no-fade\n custom-class=\"tcl-popover\"\n triggers=\"focus\"\n :target=\"`color-popover-${format.type}`\"\n placement=\"bottom\"\n :container=\"null\"\n ref=\"popover\">\n\n <swatches\n swatch-size=\"14\"\n colors=\"text-advanced\"\n @input=\"onClick(format.type, { color: $event })\"\n inline />\n\n </b-popover>\n </div>\n</template>\n\n<script>\nimport base from './base.vue'\nimport Swatches from 'vue-swatches'\nimport 'vue-swatches/dist/vue-swatches.min.css'\n\n/**\n * Component is used to display link formatters. It provides an interface to\n * input the URL that should be applied.\n */\nexport default {\n name: 't-mark-color',\n\n components: {\n Swatches,\n },\n extends: base,\n\n computed: {\n typeStyle () {\n return `${this.format.type}-icon`\n },\n },\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n// Since we don't have icons for color related formatters,\n// this extra styling makes up for that\n.icon {\n padding: 0 2px;\n\n &.color-icon {\n border-bottom: 1px solid black;\n }\n\n &.background-icon {\n background-color: rgba(black, 0.07);\n padding: 2px 3px;\n }\n}\n</style>\n\n<style lang=\"scss\">\n// Bootstrap popover doesn't provide a way to style it's body component\n// Can't be scoped, since it's not rendered in here\n.tcl-popover .popover-body {\n padding: 0 !important;\n}\n</style>\n",".icon {\n padding: 0 2px;\n}\n.icon.color-icon {\n border-bottom: 1px solid black;\n}\n.icon.background-icon {\n background-color: rgba(0, 0, 0, 0.07);\n padding: 2px 3px;\n}\n\n/*# sourceMappingURL=Color.vue.map */"]}, media: undefined })
|
|
71493
|
+
,inject("data-v-d8948e54_1", { source: ".tcl-popover .popover-body {\n padding: 0 !important;\n}\n\n/*# sourceMappingURL=Color.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/input/CRichTextInput/RToolbar/TMark/Color.vue","Color.vue"],"names":[],"mappings":"AA+EA;EACA,qBAAA;AC9EA;;AAEA,oCAAoC","file":"Color.vue","sourcesContent":["<template>\n <div>\n <b-button\n variant=\"link\"\n class=\"text-dark font-weight-bold text-decoration-none\"\n :id=\"`color-popover-${format.type}`\">\n\n <span\n class=\"icon\"\n :class=\"typeStyle\">A</span>\n\n </b-button>\n\n <b-popover\n :delay=\"0\"\n no-fade\n custom-class=\"tcl-popover\"\n triggers=\"focus\"\n :target=\"`color-popover-${format.type}`\"\n placement=\"bottom\"\n :container=\"null\"\n ref=\"popover\">\n\n <swatches\n swatch-size=\"14\"\n colors=\"text-advanced\"\n @input=\"onClick(format.type, { color: $event })\"\n inline />\n\n </b-popover>\n </div>\n</template>\n\n<script>\nimport base from './base.vue'\nimport Swatches from 'vue-swatches'\nimport 'vue-swatches/dist/vue-swatches.min.css'\n\n/**\n * Component is used to display link formatters. It provides an interface to\n * input the URL that should be applied.\n */\nexport default {\n name: 't-mark-color',\n\n components: {\n Swatches,\n },\n extends: base,\n\n computed: {\n typeStyle () {\n return `${this.format.type}-icon`\n },\n },\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n// Since we don't have icons for color related formatters,\n// this extra styling makes up for that\n.icon {\n padding: 0 2px;\n\n &.color-icon {\n border-bottom: 1px solid black;\n }\n\n &.background-icon {\n background-color: rgba(black, 0.07);\n padding: 2px 3px;\n }\n}\n</style>\n\n<style lang=\"scss\">\n// Bootstrap popover doesn't provide a way to style it's body component\n// Can't be scoped, since it's not rendered in here\n.tcl-popover .popover-body {\n padding: 0 !important;\n}\n</style>\n",".tcl-popover .popover-body {\n padding: 0 !important;\n}\n\n/*# sourceMappingURL=Color.vue.map */"]}, media: undefined });
|
|
71494
71494
|
|
|
71495
71495
|
};
|
|
71496
71496
|
/* scoped */
|
|
71497
|
-
const __vue_scope_id__$f = "data-v-
|
|
71497
|
+
const __vue_scope_id__$f = "data-v-d8948e54";
|
|
71498
71498
|
/* module identifier */
|
|
71499
71499
|
const __vue_module_identifier__$f = undefined;
|
|
71500
71500
|
/* functional template */
|
|
@@ -79511,11 +79511,11 @@ __vue_render__$i._withStripped = true;
|
|
|
79511
79511
|
/* style */
|
|
79512
79512
|
const __vue_inject_styles__$n = function (inject) {
|
|
79513
79513
|
if (!inject) return
|
|
79514
|
-
inject("data-v-
|
|
79514
|
+
inject("data-v-9fb84ff2_0", { source: ".pointer[data-v-9fb84ff2] {\n cursor: pointer;\n}\n\n/*# sourceMappingURL=CPermissionsButton.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/permissions/CPermissionsButton.vue","CPermissionsButton.vue"],"names":[],"mappings":"AA0FA;EACA,eAAA;ACzFA;;AAEA,iDAAiD","file":"CPermissionsButton.vue","sourcesContent":["<template>\n <a\n v-if=\"link\"\n class=\"pointer\"\n @click=\"onClick\"\n >\n <font-awesome-icon :icon=\"['fas', 'lock']\" />\n </a>\n <b-button\n v-else\n :variant=\"buttonVariant\"\n @click=\"onClick\"\n >\n <slot>\n <font-awesome-icon v-if=\"showButtonIcon\" :icon=\"['fas', 'lock']\" />\n <span v-if=\"buttonLabel\">\n {{ buttonLabel }}\n </span>\n </slot>\n </b-button>\n</template>\n<script lang=\"js\">\nimport { modalOpenEventName } from './def.ts'\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport { faLock } from '@fortawesome/free-solid-svg-icons'\n\nlibrary.add(faLock)\n\nexport default {\n props: {\n link: {\n type: Boolean,\n },\n\n buttonVariant: {\n type: String,\n default: undefined,\n },\n\n resource: {\n type: String,\n required: true,\n },\n\n title: {\n type: String,\n default: undefined,\n },\n\n buttonLabel: {\n type: String,\n default: undefined,\n },\n\n modalOpenEvent: {\n type: String,\n default: modalOpenEventName,\n },\n\n target: {\n type: String,\n required: false,\n default: undefined,\n },\n\n showButtonIcon: {\n type: Boolean,\n default: true,\n },\n\n // Use this prop if you want the translations to look for all-specific key instead of all/specific\n allSpecific: {\n type: Boolean,\n default: false\n },\n },\n\n methods: {\n onClick () {\n this.$root.$emit(this.modalOpenEvent, {\n target: this.target,\n resource: this.resource,\n title: this.title,\n allSpecific: this.allSpecific\n })\n },\n },\n}\n</script>\n<style lang=\"scss\" scoped>\n.pointer {\n cursor: pointer;\n}\n</style>\n",".pointer {\n cursor: pointer;\n}\n\n/*# sourceMappingURL=CPermissionsButton.vue.map */"]}, media: undefined });
|
|
79515
79515
|
|
|
79516
79516
|
};
|
|
79517
79517
|
/* scoped */
|
|
79518
|
-
const __vue_scope_id__$n = "data-v-
|
|
79518
|
+
const __vue_scope_id__$n = "data-v-9fb84ff2";
|
|
79519
79519
|
/* module identifier */
|
|
79520
79520
|
const __vue_module_identifier__$n = undefined;
|
|
79521
79521
|
/* functional template */
|
|
@@ -80282,11 +80282,11 @@ __vue_render__$m._withStripped = true;
|
|
|
80282
80282
|
/* style */
|
|
80283
80283
|
const __vue_inject_styles__$r = function (inject) {
|
|
80284
80284
|
if (!inject) return
|
|
80285
|
-
inject("data-v-
|
|
80285
|
+
inject("data-v-4bfc6a37_0", { source: ".pointer[data-v-4bfc6a37] {\n cursor: pointer;\n}\n\n/*# sourceMappingURL=CPermissionsForm.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/permissions/CPermissionsForm.vue","CPermissionsForm.vue"],"names":[],"mappings":"AAsQA;EACA,eAAA;ACrQA;;AAEA,+CAA+C","file":"CPermissionsForm.vue","sourcesContent":["<template>\n <b-form @submit.prevent=\"onSubmit\">\n <b-row>\n <b-col\n class=\"role-list\"\n cols=\"12\"\n lg=\"3\"\n >\n <b-list-group class=\"d-none d-lg-block\">\n <b-list-group-item\n v-for=\"r in roles\"\n :key=\"r.roleID\"\n :active=\"r.roleID === currentRole.roleID\"\n active-class=\"primary\"\n variant=\"outline-primary\"\n class=\"text-break pointer\"\n @click=\"onRoleChange(r)\"\n >\n {{ r.name || r.handle || r.roleID }}\n </b-list-group-item>\n </b-list-group>\n <vue-select\n v-model=\"currentRole\"\n key=\"roleID\"\n label=\"name\"\n class=\"mb-4 d-block d-lg-none\"\n :clearable=\"false\"\n :options=\"roles\"\n @input=\"onRoleChange\"\n />\n </b-col>\n <b-col\n class=\"rule-list\"\n cols=\"12\"\n lg=\"9\"\n >\n <rules :rules.sync=\"rules\" />\n </b-col>\n </b-row>\n\n <b-row class=\"footer mt-3\"\n >\n <b-col\n class=\"rule-list text-right\"\n cols=\"9\"\n offset=\"3\"\n >\n <b-button\n type=\"submit\"\n variant=\"primary\"\n :disabled=\"disabled\"\n >\n {{ $t('permissions:ui.save-changes') }}\n </b-button>\n </b-col>\n </b-row>\n </b-form>\n</template>\n<script lang=\"js\">\nimport Rules from './form/Rules.vue'\nimport { VueSelect } from 'vue-select'\nimport { split } from './def.ts'\n\n// Data, Methods, Computed, Props\nexport default {\n i18nOptions: {\n /**\n * Using both, implicit (here) and explicit (at $t()) namespace setting.\n * If we only use implicit the behaviour is flaky.\n */\n namespaces: 'permissions',\n },\n\n components: {\n Rules,\n VueSelect,\n },\n\n props: {\n resource: {\n type: String,\n required: true,\n },\n\n target: {\n type: String,\n required: false,\n default: undefined,\n },\n\n allSpecific: {\n type: Boolean,\n default: false\n },\n\n backendComponentName: {\n type: String,\n default () {\n // Assuming backend service will\n // be equal to (first part of) resource\n if (!this.resource.startsWith('corteza::')) {\n throw Error('unrecognized resource type schema')\n }\n\n // <schema>::<backend-component-name>:...\n return this.resource.split(':')[2]\n },\n },\n },\n\n data () {\n return {\n processing: false,\n\n // List of available permissions (for a specific resource)\n permissions: [],\n\n // List of rules for the current role\n rules: [],\n\n // List of all available roles\n roles: [],\n\n // Current role object\n currentRole: undefined,\n }\n },\n\n computed: {\n dirty () {\n return this.collectChangedRules().length > 0\n },\n\n disabled () {\n return !this.dirty\n },\n\n api () {\n const s = this.backendComponentName\n return this['$' + s.charAt(0).toUpperCase() + s.slice(1) + 'API']\n },\n },\n\n created () {\n this.fetchPermissions()\n this.fetchRoles()\n },\n\n methods: {\n onRoleChange (role) {\n this.currentRole = role\n this.fetchRules(role.roleID)\n },\n\n onSubmit () {\n this.processing = true\n const rules = this.collectChangedRules()\n const { roleID } = this.currentRole\n\n this.api.permissionsUpdate({ roleID, rules }).then(() => {\n this.fetchRules(roleID)\n this.processing = false\n })\n },\n\n async fetchPermissions () {\n // clean loaded rules\n this.rules = []\n this.permissions = []\n this.processing = true\n\n return this.api.permissionsList().then((pp) => {\n this.permissions = this.filterPermissions(pp)\n this.processing = false\n })\n },\n\n async fetchRules (roleID) {\n this.processing = true\n return this.api.permissionsRead({ roleID }).then((rules) => {\n this.rules = this.normalizeRules(rules)\n this.processing = false\n })\n },\n\n async fetchRoles () {\n this.processing = true\n // Roles are always fetched from $SystemAPI.\n return this.$SystemAPI.roleList().then(({ set }) => {\n this.roles = set\n .filter(({ isBypass }) => !isBypass )\n .sort((a, b) => a.roleID.localeCompare(b.roleID))\n\n if (this.roles.length > 0) {\n this.onRoleChange(this.roles[0])\n }\n this.processing = false\n })\n },\n\n normalizeRules (rr) {\n const inherit = 'inherit'\n\n // merges roleRules (subset) with list of all permissions\n const findCurrent = ({ resource, operation }) => {\n if (!rr) {\n return inherit\n }\n\n return (rr.find(r => r.resource === resource && r.operation === operation) || {}).access || inherit\n }\n\n return this.permissions.map((p) => {\n const current = findCurrent(p)\n return { ...p, access: current, current }\n })\n },\n\n // Removes unneeded permissions (ones that do not match resource prop)\n // and translates the rest\n filterPermissions (pp) {\n const [ resourceType ] = this.resource.split('/', 2)\n return pp\n .filter(({ type }) => resourceType === type)\n .map(({ type, op: operation }) => {\n return {\n ...this.describePermission({ resource: type, operation }),\n operation,\n // override resource-type with the actual resource-ID\n resource: this.resource\n }\n })\n },\n\n collectChangedRules () {\n return this.rules.filter(r => r.access !== r.current).map(({ resource, operation, access }) => {\n return { resource, operation, access }\n })\n },\n\n describePermission ({ resource, operation }) {\n const i18nPrefix = split(resource).i18nPrefix + `.operations.${operation}`\n\n let title = ''\n if (this.allSpecific) {\n title = this.$t(`permissions:${i18nPrefix}.all-specific`, { target: this.target, interpolation: { escapeValue: false } })\n } else if (this.target) {\n title = this.$t(`permissions:${i18nPrefix}.specific`, { target: this.target, interpolation: { escapeValue: false } })\n } else {\n title = this.$t(`permissions:${i18nPrefix}.title`)\n }\n\n return {\n title,\n description: this.$t(`permissions:${i18nPrefix}.description`),\n }\n },\n },\n}\n\n</script>\n<style scoped lang=\"scss\">\n.pointer {\n cursor: pointer;\n}\n</style>\n",".pointer {\n cursor: pointer;\n}\n\n/*# sourceMappingURL=CPermissionsForm.vue.map */"]}, media: undefined });
|
|
80286
80286
|
|
|
80287
80287
|
};
|
|
80288
80288
|
/* scoped */
|
|
80289
|
-
const __vue_scope_id__$r = "data-v-
|
|
80289
|
+
const __vue_scope_id__$r = "data-v-4bfc6a37";
|
|
80290
80290
|
/* module identifier */
|
|
80291
80291
|
const __vue_module_identifier__$r = undefined;
|
|
80292
80292
|
/* functional template */
|
|
@@ -81502,11 +81502,11 @@ __vue_render__$t._withStripped = true;
|
|
|
81502
81502
|
/* style */
|
|
81503
81503
|
const __vue_inject_styles__$z = function (inject) {
|
|
81504
81504
|
if (!inject) return
|
|
81505
|
-
inject("data-v-
|
|
81505
|
+
inject("data-v-4a7f9f1e_0", { source: ".slide-enter-active[data-v-4a7f9f1e] {\n transition: all 0.3s ease;\n}\n.slide-leave-active[data-v-4a7f9f1e] {\n transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);\n}\n.slide-enter[data-v-4a7f9f1e], .slide-leave-to[data-v-4a7f9f1e] {\n transform: translateX(10px);\n opacity: 0;\n}\n\n/*# sourceMappingURL=CPromptToast.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/prompts/CPromptToast.vue","CPromptToast.vue"],"names":[],"mappings":"AAqJA;EACA,yBAAA;ACpJA;ADsJA;EACA,iDAAA;ACnJA;ADqJA;EAEA,2BAAA;EACA,UAAA;ACnJA;;AAEA,2CAA2C","file":"CPromptToast.vue","sourcesContent":["<template>\n <div>\n <b-toast\n v-for=\"({ prompt, component, passive }) in toasts\"\n :id=\"'wfPromptToast-'+prompt.stateID\"\n :key=\"'wfPromptToast-'+prompt.stateID\"\n :variant=\"pVal(prompt, 'variant', 'primary')\"\n :visible=\"!isActive\"\n solid\n :no-auto-hide=\"!passive\"\n :auto-hide-delay=\"pVal(prompt, 'timeout', defaultTimeout) * 1000\"\n :no-close-button=\"!passive\"\n >\n <template #toast-title>\n <div class=\"d-flex flex-grow-1 align-items-baseline\">\n <strong class=\"mr-auto\">{{ pVal(prompt, 'title', 'Workflow prompt') }}</strong>\n <b-button\n variant=\"link\"\n size=\"sm\"\n v-if=\"!passive && active.length > 1\"\n @click=\"activate(true)\"\n >\n {{ active.length }} waiting\n </b-button>\n </div>\n </template>\n <component\n v-if=\"component\"\n :is=\"component\"\n :payload=\"prompt.payload\"\n :loading=\"isLoading\"\n @submit=\"resumeToast({ input: $event, prompt })\"\n />\n </b-toast>\n </div>\n</template>\n<script>\nimport { mapGetters, mapActions } from 'vuex'\nimport definitions from './kinds/index.ts'\nimport { pVal } from './utils.ts'\n\nexport default {\n name: 'c-prompt-toast',\n\n data () {\n return {\n passive: new Set(),\n }\n },\n\n computed: {\n ...mapGetters({\n prompts: 'wfPrompts/all',\n isActive: 'wfPrompts/isActive',\n isLoading: 'wfPrompts/isLoading',\n }),\n\n withHandlers () {\n return this.prompts\n .filter(({ ref }) => !!definitions[ref] && !!definitions[ref].handler)\n .map(prompt => ({ ...definitions[prompt.ref], prompt }))\n },\n\n withComponents () {\n return this.prompts\n .filter(({ ref }) => !!definitions[ref] && !!definitions[ref].component)\n .map(prompt => ({ ...definitions[prompt.ref], prompt }))\n },\n\n /**\n * All non-passive prompts with components\n */\n active() {\n return this.withComponents.filter(({ passive }) => !passive)\n },\n\n /**\n * Returns list of prompts that we can interpret as toasts: display component is defined\n *\n * Toasts (prompts with components) are displayed in order received but\n * passive (no feedback or input from user required) first and the rest later\n */\n toasts () {\n return [\n ...this.passive.values(),\n ...this.active\n ]\n },\n\n defaultTimeout () {\n return 7\n }\n },\n\n watch: {\n // watch prompts with handlers and when a new one arrives\n // shift it from the stack, resume the prompt and handle it\n withHandlers (hh) {\n if (hh.length > 0) {\n const { handler, prompt } = hh.shift()\n this.resume({ input: {}, prompt }).then(() => {\n handler.call(this, prompt.payload)\n })\n }\n },\n\n /**\n * Make a copy of prompt if it is defined as passive\n *\n * We do this because we do not want it to be removed right away\n * but through a toast component's timeout\n */\n prompts: {\n immediate: true,\n handler () {\n this.withComponents.forEach(p => {\n if (p.passive) {\n this.passive.add(p)\n }\n })\n },\n },\n },\n\n methods: {\n ...mapActions({\n resume: 'wfPrompts/resume',\n activate: 'wfPrompts/activate',\n }),\n\n resumeToast (values) {\n // Only reset input if prompt is kept open\n if (values.input && values.input.keep) {\n values.input = {}\n } else {\n // Otherwise remove prompt from toasts\n this.toasts = this.toasts.filter(({ prompt }) => prompt.stateID !== values.prompt.stateID)\n }\n\n this.resume(values)\n },\n\n pVal (prompt, k, def = undefined) {\n return pVal(prompt.payload, k, def)\n },\n },\n}\n</script>\n<style scoped lang=\"scss\">\n.slide-enter-active {\n transition: all .3s ease;\n}\n.slide-leave-active {\n transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n}\n.slide-enter, .slide-leave-to\n/* .slide-leave-active below version 2.1.8 */ {\n transform: translateX(10px);\n opacity: 0;\n}\n</style>\n",".slide-enter-active {\n transition: all 0.3s ease;\n}\n\n.slide-leave-active {\n transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);\n}\n\n.slide-enter, .slide-leave-to {\n transform: translateX(10px);\n opacity: 0;\n}\n\n/*# sourceMappingURL=CPromptToast.vue.map */"]}, media: undefined });
|
|
81506
81506
|
|
|
81507
81507
|
};
|
|
81508
81508
|
/* scoped */
|
|
81509
|
-
const __vue_scope_id__$z = "data-v-
|
|
81509
|
+
const __vue_scope_id__$z = "data-v-4a7f9f1e";
|
|
81510
81510
|
/* module identifier */
|
|
81511
81511
|
const __vue_module_identifier__$z = undefined;
|
|
81512
81512
|
/* functional template */
|
|
@@ -81970,11 +81970,11 @@ __vue_render__$w._withStripped = true;
|
|
|
81970
81970
|
/* style */
|
|
81971
81971
|
const __vue_inject_styles__$C = function (inject) {
|
|
81972
81972
|
if (!inject) return
|
|
81973
|
-
inject("data-v-
|
|
81973
|
+
inject("data-v-cc01ea74_0", { source: ".logo img[data-v-cc01ea74] {\n animation: pulse-data-v-cc01ea74 4.2s infinite;\n}\n@keyframes pulse-data-v-cc01ea74 {\n0% {\n opacity: 0;\n}\n65% {\n opacity: 1;\n}\n100% {\n opacity: 0;\n}\n}\n\n/*# sourceMappingURL=CLoaderLogo.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/loader/CLoaderLogo.vue","CLoaderLogo.vue"],"names":[],"mappings":"AA0BA;EACA,8CAAA;ACzBA;AD4BA;AACA;IACA,UAAA;AC1BE;AD4BF;IACA,UAAA;AC1BE;AD4BF;IACA,UAAA;AC1BE;AACF;;AAEA,0CAA0C","file":"CLoaderLogo.vue","sourcesContent":["<template>\n <b-container\n fluid\n class=\"d-flex justify-content-center vh-100 logo\"\n >\n <img\n v-if=\"logo\"\n :src=\"logo\"\n class=\"w-25 my-auto\"\n >\n </b-container>\n</template>\n\n<script>\nexport default {\n props: {\n logo: {\n type: String,\n default: () => ''\n },\n },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.logo {\n img {\n animation: pulse 4.2s infinite;\n }\n\n @keyframes pulse {\n 0% {\n opacity: 0;\n }\n 65% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n}\n</style>\n",".logo img {\n animation: pulse 4.2s infinite;\n}\n@keyframes pulse {\n 0% {\n opacity: 0;\n }\n 65% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n\n/*# sourceMappingURL=CLoaderLogo.vue.map */"]}, media: undefined });
|
|
81974
81974
|
|
|
81975
81975
|
};
|
|
81976
81976
|
/* scoped */
|
|
81977
|
-
const __vue_scope_id__$C = "data-v-
|
|
81977
|
+
const __vue_scope_id__$C = "data-v-cc01ea74";
|
|
81978
81978
|
/* module identifier */
|
|
81979
81979
|
const __vue_module_identifier__$C = undefined;
|
|
81980
81980
|
/* functional template */
|
|
@@ -82484,11 +82484,11 @@ __vue_render__$x._withStripped = true;
|
|
|
82484
82484
|
/* style */
|
|
82485
82485
|
const __vue_inject_styles__$D = function (inject) {
|
|
82486
82486
|
if (!inject) return
|
|
82487
|
-
inject("data-v-
|
|
82487
|
+
inject("data-v-1e94218e_0", { source: ".icon-logo[data-v-1e94218e] {\n height: calc(64px / 2);\n background-repeat: no-repeat;\n background-position: center;\n}\n.nav-icon[data-v-1e94218e] {\n width: 40px;\n height: 40px;\n}\n.nav-user-icon[data-v-1e94218e] {\n width: 50px;\n height: 50px;\n}\n.header-navigation[data-v-1e94218e] {\n width: 100vw;\n height: 64px;\n background-color: #F3F3F5 !important;\n}\n.header-navigation h2[data-v-1e94218e] {\n padding-left: calc(0.5rem + 2px);\n}\n.spacer[data-v-1e94218e] {\n min-width: 0px;\n -webkit-transition: min-width 0.15s ease-in-out;\n -moz-transition: min-width 0.15s ease-in-out;\n -o-transition: min-width 0.15s ease-in-out;\n transition: min-width 0.15s ease-in-out;\n}\n.spacer.expanded[data-v-1e94218e] {\n min-width: calc(320px - 42px);\n -webkit-transition: min-width 0.2s ease-in-out;\n -moz-transition: min-width 0.2s ease-in-out;\n -o-transition: min-width 0.2s ease-in-out;\n transition: min-width 0.2s ease-in-out;\n}\n\n/*# sourceMappingURL=CTopbar.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/navigation/CTopbar.vue","CTopbar.vue"],"names":[],"mappings":"AA2MA;EACA,sBAAA;EACA,4BAAA;EACA,2BAAA;AC1MA;AD6MA;EACA,WAVA;EAWA,YAXA;AC/LA;AD6MA;EACA,WAdA;EAeA,YAfA;AC3LA;AD6MA;EACA,YAAA;EACA,YAvBA;EAwBA,oCAAA;AC1MA;AD4MA;EACA,gCAAA;AC1MA;AD8MA;EACA,cAAA;EACA,+CAAA;EACA,4CAAA;EACA,0CAAA;EACA,uCAAA;AC3MA;AD6MA;EACA,6BAAA;EACA,8CAAA;EACA,2CAAA;EACA,yCAAA;EACA,sCAAA;AC3MA;;AAEA,sCAAsC","file":"CTopbar.vue","sourcesContent":["<template>\n <div class=\"header-navigation d-flex align-items-center justify-content-between sticky-top pr-3 pl-5 \">\n <div\n class=\"d-flex text-nowrap flex-grow-1 align-items-center header h-100 w-100\"\n >\n <template>\n <div\n class=\"spacer\"\n :class=\"{\n 'expanded': sidebarPinned,\n }\"\n />\n </template>\n\n <div\n class=\"d-flex align-items-center ml-2 text-truncate mr-auto h-100\"\n >\n <h2\n class=\"d-none d-sm-block mb-0\"\n >\n <slot name=\"title\" />\n </h2>\n\n </div>\n\n <div class=\"ml-3\">\n <slot name=\"tools\" />\n </div>\n\n <b-button\n v-if=\"!hideAppSelector\"\n variant=\"outline-light\"\n :href=\"appSelectorURL\"\n size=\"lg\"\n class=\"d-flex align-items-center justify-content-center text-dark border-0 nav-icon rounded-circle ml-2\"\n >\n <font-awesome-icon\n class=\"m-0 h5\"\n :icon=\"['fas', 'grip-horizontal']\"\n />\n </b-button>\n\n <b-dropdown\n size=\"lg\"\n variant=\"outline-light\"\n class=\"nav-icon mx-1\"\n toggle-class=\"text-decoration-none text-dark rounded-circle border-0 w-100\"\n menu-class=\"border-0 shadow-sm text-dark font-weight-bold mt-2\"\n right\n no-caret\n >\n <template #button-content>\n <div\n class=\"d-flex align-items-center justify-content-center\"\n >\n <font-awesome-icon\n class=\"m-0 h5\"\n :icon=\"['far', 'question-circle']\"\n />\n <span class=\"sr-only\">\n Help\n </span>\n </div>\n </template>\n <div>\n <slot name=\"help-dropdown\" />\n </div>\n <b-dropdown-item\n href=\"https://forum.cortezaproject.org/\"\n target=\"_blank\"\n >\n {{ labels.helpForum }}\n </b-dropdown-item>\n <b-dropdown-item\n :href=\"documentationURL\"\n target=\"_blank\"\n >\n {{ labels.helpDocumentation }}\n </b-dropdown-item>\n <b-dropdown-item\n href=\"mailto:info@crust.tech\"\n target=\"_blank\"\n >\n {{ labels.helpFeedback }}\n </b-dropdown-item>\n <b-dropdown-divider />\n <b-dropdown-item\n disabled\n class=\"small\"\n >\n {{ labels.helpVersion }}\n <br>\n {{ frontendVersion }}\n </b-dropdown-item>\n </b-dropdown>\n <b-dropdown\n data-v-onboarding=\"profile\"\n size=\"lg\"\n variant=\"outline-light\"\n class=\"nav-user-icon\"\n toggle-class=\"nav-icon text-decoration-none text-dark rounded-circle border\"\n menu-class=\"border-0 shadow-sm text-dark font-weight-bold mt-2\"\n right\n no-caret\n >\n <template #button-content>\n <div\n class=\"d-flex align-items-center justify-content-center\"\n >\n <font-awesome-icon\n class=\"m-0 h5\"\n :icon=\"['far', 'user']\"\n />\n <span class=\"sr-only\">\n {{ labels.helpForum }}\n </span>\n </div>\n </template>\n <b-dropdown-text class=\"text-muted mb-2\">\n {{ labels.userSettingsLoggedInAs }}\n </b-dropdown-text>\n <div>\n <slot name=\"avatar-dropdown\" />\n </div>\n <b-dropdown-item\n :href=\"userProfileURL\"\n target=\"_blank\"\n >\n {{ labels.userSettingsProfile }}\n </b-dropdown-item>\n <b-dropdown-item\n :href=\"changePasswordURL\"\n target=\"_blank\"\n >\n {{ labels.userSettingsChangePassword }}\n </b-dropdown-item>\n <b-dropdown-divider />\n <b-dropdown-item\n href=\"\"\n @click=\"$auth.logout()\"\n class=\"mt-2\"\n >\n {{ labels.userSettingsLogout }}\n </b-dropdown-item>\n </b-dropdown>\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n props: {\n sidebarPinned: {\n type: Boolean,\n required: true,\n default: false,\n },\n\n hideAppSelector: {\n type: Boolean,\n required: false,\n default: false,\n },\n\n appSelectorURL: {\n type: String,\n default: '../'\n },\n\n labels: {\n type: Object,\n required: true,\n },\n },\n\n computed: {\n userProfileURL () {\n return this.$auth.cortezaAuthURL\n },\n\n changePasswordURL () {\n return `${this.$auth.cortezaAuthURL}/change-password`\n },\n\n documentationURL () {\n const [year, month] = VERSION.split('.')\n return `https://docs.cortezaproject.org/corteza-docs/${year}.${month}/index.html`\n },\n\n frontendVersion () {\n /* eslint-disable no-undef */\n return VERSION\n },\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$header-height: 64px;\n$nav-width: 320px;\n$nav-icon-size: 40px;\n$nav-user-icon-size: 50px;\n\n.icon-logo {\n height: calc(#{$header-height} / 2);\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.nav-icon {\n width: $nav-icon-size;\n height: $nav-icon-size;\n}\n\n.nav-user-icon {\n width: $nav-user-icon-size;\n height: $nav-user-icon-size;\n}\n\n.header-navigation {\n width: 100vw;\n height: $header-height;\n background-color: #F3F3F5 !important;\n\n h2 {\n padding-left: calc(0.5rem + 2px);\n }\n}\n\n.spacer {\n min-width: 0px;\n -webkit-transition: min-width 0.15s ease-in-out;\n -moz-transition: min-width 0.15s ease-in-out;\n -o-transition: min-width 0.15s ease-in-out;\n transition: min-width 0.15s ease-in-out;\n\n &.expanded {\n min-width: calc(#{$nav-width} - 42px);\n -webkit-transition: min-width 0.2s ease-in-out;\n -moz-transition: min-width 0.2s ease-in-out;\n -o-transition: min-width 0.2s ease-in-out;\n transition: min-width 0.2s ease-in-out;\n }\n}\n</style>\n",".icon-logo {\n height: calc(64px / 2);\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.nav-icon {\n width: 40px;\n height: 40px;\n}\n\n.nav-user-icon {\n width: 50px;\n height: 50px;\n}\n\n.header-navigation {\n width: 100vw;\n height: 64px;\n background-color: #F3F3F5 !important;\n}\n.header-navigation h2 {\n padding-left: calc(0.5rem + 2px);\n}\n\n.spacer {\n min-width: 0px;\n -webkit-transition: min-width 0.15s ease-in-out;\n -moz-transition: min-width 0.15s ease-in-out;\n -o-transition: min-width 0.15s ease-in-out;\n transition: min-width 0.15s ease-in-out;\n}\n.spacer.expanded {\n min-width: calc(320px - 42px);\n -webkit-transition: min-width 0.2s ease-in-out;\n -moz-transition: min-width 0.2s ease-in-out;\n -o-transition: min-width 0.2s ease-in-out;\n transition: min-width 0.2s ease-in-out;\n}\n\n/*# sourceMappingURL=CTopbar.vue.map */"]}, media: undefined });
|
|
82488
82488
|
|
|
82489
82489
|
};
|
|
82490
82490
|
/* scoped */
|
|
82491
|
-
const __vue_scope_id__$D = "data-v-
|
|
82491
|
+
const __vue_scope_id__$D = "data-v-1e94218e";
|
|
82492
82492
|
/* module identifier */
|
|
82493
82493
|
const __vue_module_identifier__$D = undefined;
|
|
82494
82494
|
/* functional template */
|
|
@@ -83048,12 +83048,12 @@ __vue_render__$y._withStripped = true;
|
|
|
83048
83048
|
/* style */
|
|
83049
83049
|
const __vue_inject_styles__$E = function (inject) {
|
|
83050
83050
|
if (!inject) return
|
|
83051
|
-
inject("data-v-
|
|
83052
|
-
,inject("data-v-
|
|
83051
|
+
inject("data-v-5c37b5a0_0", { source: ".tab[data-v-5c37b5a0] {\n z-index: 1021;\n top: 0;\n height: 64px;\n width: 66px;\n}\n.icon[data-v-5c37b5a0] {\n max-height: 40px;\n max-width: 40px;\n}\n.logo[data-v-5c37b5a0] {\n max-height: 40px;\n}\n.sidebar-header[data-v-5c37b5a0] {\n height: 64px;\n}\n\n/*# sourceMappingURL=CSidebar.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/navigation/CSidebar.vue","CSidebar.vue"],"names":[],"mappings":"AAiSA;EACA,aAAA;EACA,MAAA;EACA,YALA;EAMA,WAAA;AChSA;ADmSA;EACA,gBAAA;EACA,eAAA;AChSA;ADmSA;EACA,gBAAA;AChSA;ADmSA;EACA,YAnBA;AC7QA;;AAEA,uCAAuC","file":"CSidebar.vue","sourcesContent":["<template>\n <div>\n <div\n @mouseleave=\"onHover(false)\"\n >\n <b-sidebar\n v-model=\"isExpanded\"\n :sidebar-class=\"`sidebar ${isExpanded ? 'expanded' : ''}`\"\n :header-class=\"`d-block sidebar-header ${isExpanded ? 'expanded border-bottom p-2' : ''}`\"\n :body-class=\"`bg-white ${isExpanded ? 'py-2 px-3' : ''}`\"\n :footer-class=\"`bg-white rounded-right ${isExpanded ? 'p-2' : ''}`\"\n :no-header=\"!isExpanded\"\n :backdrop=\"isMobile\"\n :shadow=\"isExpanded\"\n no-slide\n no-close-on-route-change\n no-close-on-esc\n >\n <template #header>\n <div\n class=\"d-flex align-items-center justify-content-between px-2\"\n style=\"height: 50px;\"\n >\n <img\n class=\"logo w-auto border-0\"\n :src=\"logo\"\n >\n\n <b-button\n v-if=\"isMobile\"\n variant=\"outline-light border-0\"\n class=\"d-flex align-items-center justify-content-center p-2\"\n @click=\"closeSidebar()\"\n >\n <font-awesome-icon\n :icon=\"['fas', 'times']\"\n class=\"h6 mb-0 text-dark\"\n />\n </b-button>\n\n <b-button\n v-else\n variant=\"outline-light border-0\"\n class=\"d-flex align-items-center justify-content-center p-2\"\n @click=\"togglePin()\"\n >\n <font-awesome-icon\n :icon=\"['fas', 'thumbtack']\"\n :class=\"`h6 mb-0 ${isPinned ? 'text-primary' : 'text-secondary'}`\"\n />\n </b-button>\n </div>\n\n <div\n v-if=\"!isExpanded\"\n class=\"d-flex align-items-center justify-content-center my-3\"\n >\n <b-button\n variant=\"link\"\n @click=\"togglePin()\"\n >\n <font-awesome-icon\n :icon=\"['fas', 'chevron-right']\"\n class=\"h6 mb-0\"\n />\n </b-button>\n </div>\n\n <div\n v-if=\"isExpanded\"\n class=\"px-2\"\n >\n <slot\n name=\"header-expanded\"\n />\n </div>\n\n\n <hr\n v-if=\"!isExpanded\"\n class=\"my-2\"\n >\n </template>\n\n <slot\n v-if=\"isExpanded\"\n name=\"body-expanded\"\n />\n\n <template #footer>\n <slot\n v-if=\"isExpanded\"\n name=\"footer-expanded\"\n />\n </template>\n </b-sidebar>\n </div>\n\n <div\n class=\"d-flex align-items-center justify-content-center tab position-absolute p-2\"\n >\n <b-button\n v-if=\"expandOnHover && !disabledRoutes.includes($route.name)\"\n variant=\"outline-light\"\n size=\"lg\"\n class=\"d-flex align-items-center border-0\"\n @mouseover=\"onHover(true)\"\n >\n <font-awesome-icon\n :icon=\"['fas', 'bars']\"\n class=\"h4 mb-0 text-primary\"\n />\n </b-button>\n\n <b-button\n v-else-if=\"!disabledRoutes.includes($route.name)\"\n variant=\"outline-light\"\n size=\"lg\"\n class=\"d-flex align-items-center p-2 border-0\"\n :to=\"{ name: 'root' }\"\n >\n <font-awesome-icon\n :icon=\"['fas', 'home']\"\n class=\"h4 mb-0 text-primary\"\n />\n </b-button>\n\n <div\n v-else\n class=\"d-flex align-items-center border-0 p-2\"\n >\n <img\n class=\"icon w-auto border-0\"\n :src=\"icon\"\n >\n </div>\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n props: {\n expanded: {\n type: Boolean,\n default: false,\n },\n\n pinned: {\n type: Boolean,\n default: false,\n },\n\n expandOnHover: {\n type: Boolean,\n default: false,\n },\n\n disabledRoutes: {\n type: Array,\n default: () => [],\n },\n\n icon: {\n type: String,\n default: () => ''\n },\n\n logo: {\n type: String,\n default: () => ''\n },\n },\n\n data () {\n return {\n sidebar_settings : {}\n }\n },\n\n computed: {\n isExpanded: {\n get () {\n return this.expanded\n },\n\n set (expanded) {\n this.$emit('update:expanded', expanded)\n },\n },\n\n isPinned: {\n get () {\n return this.pinned\n },\n\n set (pinned) {\n this.$emit('update:pinned', pinned)\n },\n },\n\n isMobile () {\n return window.innerWidth < 576\n },\n },\n\n created () {\n this.$root.$on('close-sidebar', () => {\n this.isExpanded = false\n this.isPinned = false\n })\n },\n\n beforeDestroy () {\n this.$root.$off('close-sidebar')\n },\n\n watch: {\n '$route.name': {\n immediate: true,\n handler (name) {\n // If sidebar should be disabled on route, close and unpin when navigating to route\n if (this.disabledRoutes.includes(name)) {\n this.isPinned = false\n this.isExpanded = false\n } else if(this.expandOnHover){\n this.defaultSidebarAppearance()\n }\n },\n },\n },\n\n methods: {\n onHover (expand) {\n if (!this.pinned && this.expandOnHover) {\n setTimeout(() => {\n this.isExpanded = expand\n }, expand ? 0 : 100)\n }\n },\n\n togglePin () {\n this.saveSettings(!this.isPinned)\n this.isPinned = !this.isPinned\n },\n\n defaultSidebarAppearance () {\n const localstorage_settings = JSON.parse(window.localStorage.getItem('sidebar_settings'))\n if (localstorage_settings) {\n this.sidebar_settings = localstorage_settings\n }\n const app_sidebar = (localstorage_settings || {})[this.$root.$options.name]\n if (!this.isMobile) {\n if (app_sidebar) {\n this.isExpanded = app_sidebar.pinned\n this.isPinned = app_sidebar.pinned\n } else {\n this.openSidebar()\n }\n } else {\n this.closeSidebar()\n }\n },\n\n saveSettings (pinned) {\n if (this.sidebar_settings[this.$root.$options.name]) {\n this.sidebar_settings[this.$root.$options.name].pinned = pinned\n } else {\n this.sidebar_settings[this.$root.$options.name] = { pinned: pinned }\n }\n window.localStorage.setItem('sidebar_settings', JSON.stringify(this.sidebar_settings))\n },\n\n openSidebar () {\n this.isPinned = true\n this.isExpanded = true\n },\n\n closeSidebar () {\n this.isPinned = false\n this.isExpanded = false\n },\n },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$header-height: 64px;\n\n.tab {\n z-index: 1021;\n top: 0;\n height: $header-height;\n width: 66px;\n}\n\n.icon {\n max-height: 40px;\n max-width: 40px;\n}\n\n.logo {\n max-height: 40px;\n}\n\n.sidebar-header {\n height: $header-height;\n}\n</style>\n\n<style lang=\"scss\">\n$nav-width: 320px;\n$sidebar-bg: #F4F7FA;\n\n.sidebar {\n display: flex !important;\n left: calc(-#{$nav-width}) !important;\n -webkit-transition: left 0.15s ease-in-out;\n -moz-transition: left 0.15s ease-in-out;\n -o-transition: left 0.15s ease-in-out;\n transition: left 0.15s ease-in-out;\n\n header {\n background-color: white;\n\n &.expanded {\n background-color: $sidebar-bg !important;\n }\n }\n\n &.expanded {\n left: 0 !important;\n -webkit-transition: left 0.2s ease-in-out;\n -moz-transition: left 0.2s ease-in-out;\n -o-transition: left 0.2s ease-in-out;\n transition: left 0.2s ease-in-out;\n }\n}\n</style>\n",".tab {\n z-index: 1021;\n top: 0;\n height: 64px;\n width: 66px;\n}\n\n.icon {\n max-height: 40px;\n max-width: 40px;\n}\n\n.logo {\n max-height: 40px;\n}\n\n.sidebar-header {\n height: 64px;\n}\n\n/*# sourceMappingURL=CSidebar.vue.map */"]}, media: undefined })
|
|
83052
|
+
,inject("data-v-5c37b5a0_1", { source: ".sidebar {\n display: flex !important;\n left: calc(-320px) !important;\n -webkit-transition: left 0.15s ease-in-out;\n -moz-transition: left 0.15s ease-in-out;\n -o-transition: left 0.15s ease-in-out;\n transition: left 0.15s ease-in-out;\n}\n.sidebar header {\n background-color: white;\n}\n.sidebar header.expanded {\n background-color: #F4F7FA !important;\n}\n.sidebar.expanded {\n left: 0 !important;\n -webkit-transition: left 0.2s ease-in-out;\n -moz-transition: left 0.2s ease-in-out;\n -o-transition: left 0.2s ease-in-out;\n transition: left 0.2s ease-in-out;\n}\n\n/*# sourceMappingURL=CSidebar.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/navigation/CSidebar.vue","CSidebar.vue"],"names":[],"mappings":"AA0TA;EACA,wBAAA;EACA,6BAAA;EACA,0CAAA;EACA,uCAAA;EACA,qCAAA;EACA,kCAAA;ACzTA;AD2TA;EACA,uBAAA;ACzTA;AD2TA;EACA,oCAAA;ACzTA;AD6TA;EACA,kBAAA;EACA,yCAAA;EACA,sCAAA;EACA,oCAAA;EACA,iCAAA;AC3TA;;AAEA,uCAAuC","file":"CSidebar.vue","sourcesContent":["<template>\n <div>\n <div\n @mouseleave=\"onHover(false)\"\n >\n <b-sidebar\n v-model=\"isExpanded\"\n :sidebar-class=\"`sidebar ${isExpanded ? 'expanded' : ''}`\"\n :header-class=\"`d-block sidebar-header ${isExpanded ? 'expanded border-bottom p-2' : ''}`\"\n :body-class=\"`bg-white ${isExpanded ? 'py-2 px-3' : ''}`\"\n :footer-class=\"`bg-white rounded-right ${isExpanded ? 'p-2' : ''}`\"\n :no-header=\"!isExpanded\"\n :backdrop=\"isMobile\"\n :shadow=\"isExpanded\"\n no-slide\n no-close-on-route-change\n no-close-on-esc\n >\n <template #header>\n <div\n class=\"d-flex align-items-center justify-content-between px-2\"\n style=\"height: 50px;\"\n >\n <img\n class=\"logo w-auto border-0\"\n :src=\"logo\"\n >\n\n <b-button\n v-if=\"isMobile\"\n variant=\"outline-light border-0\"\n class=\"d-flex align-items-center justify-content-center p-2\"\n @click=\"closeSidebar()\"\n >\n <font-awesome-icon\n :icon=\"['fas', 'times']\"\n class=\"h6 mb-0 text-dark\"\n />\n </b-button>\n\n <b-button\n v-else\n variant=\"outline-light border-0\"\n class=\"d-flex align-items-center justify-content-center p-2\"\n @click=\"togglePin()\"\n >\n <font-awesome-icon\n :icon=\"['fas', 'thumbtack']\"\n :class=\"`h6 mb-0 ${isPinned ? 'text-primary' : 'text-secondary'}`\"\n />\n </b-button>\n </div>\n\n <div\n v-if=\"!isExpanded\"\n class=\"d-flex align-items-center justify-content-center my-3\"\n >\n <b-button\n variant=\"link\"\n @click=\"togglePin()\"\n >\n <font-awesome-icon\n :icon=\"['fas', 'chevron-right']\"\n class=\"h6 mb-0\"\n />\n </b-button>\n </div>\n\n <div\n v-if=\"isExpanded\"\n class=\"px-2\"\n >\n <slot\n name=\"header-expanded\"\n />\n </div>\n\n\n <hr\n v-if=\"!isExpanded\"\n class=\"my-2\"\n >\n </template>\n\n <slot\n v-if=\"isExpanded\"\n name=\"body-expanded\"\n />\n\n <template #footer>\n <slot\n v-if=\"isExpanded\"\n name=\"footer-expanded\"\n />\n </template>\n </b-sidebar>\n </div>\n\n <div\n class=\"d-flex align-items-center justify-content-center tab position-absolute p-2\"\n >\n <b-button\n v-if=\"expandOnHover && !disabledRoutes.includes($route.name)\"\n variant=\"outline-light\"\n size=\"lg\"\n class=\"d-flex align-items-center border-0\"\n @mouseover=\"onHover(true)\"\n >\n <font-awesome-icon\n :icon=\"['fas', 'bars']\"\n class=\"h4 mb-0 text-primary\"\n />\n </b-button>\n\n <b-button\n v-else-if=\"!disabledRoutes.includes($route.name)\"\n variant=\"outline-light\"\n size=\"lg\"\n class=\"d-flex align-items-center p-2 border-0\"\n :to=\"{ name: 'root' }\"\n >\n <font-awesome-icon\n :icon=\"['fas', 'home']\"\n class=\"h4 mb-0 text-primary\"\n />\n </b-button>\n\n <div\n v-else\n class=\"d-flex align-items-center border-0 p-2\"\n >\n <img\n class=\"icon w-auto border-0\"\n :src=\"icon\"\n >\n </div>\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n props: {\n expanded: {\n type: Boolean,\n default: false,\n },\n\n pinned: {\n type: Boolean,\n default: false,\n },\n\n expandOnHover: {\n type: Boolean,\n default: false,\n },\n\n disabledRoutes: {\n type: Array,\n default: () => [],\n },\n\n icon: {\n type: String,\n default: () => ''\n },\n\n logo: {\n type: String,\n default: () => ''\n },\n },\n\n data () {\n return {\n sidebar_settings : {}\n }\n },\n\n computed: {\n isExpanded: {\n get () {\n return this.expanded\n },\n\n set (expanded) {\n this.$emit('update:expanded', expanded)\n },\n },\n\n isPinned: {\n get () {\n return this.pinned\n },\n\n set (pinned) {\n this.$emit('update:pinned', pinned)\n },\n },\n\n isMobile () {\n return window.innerWidth < 576\n },\n },\n\n created () {\n this.$root.$on('close-sidebar', () => {\n this.isExpanded = false\n this.isPinned = false\n })\n },\n\n beforeDestroy () {\n this.$root.$off('close-sidebar')\n },\n\n watch: {\n '$route.name': {\n immediate: true,\n handler (name) {\n // If sidebar should be disabled on route, close and unpin when navigating to route\n if (this.disabledRoutes.includes(name)) {\n this.isPinned = false\n this.isExpanded = false\n } else if(this.expandOnHover){\n this.defaultSidebarAppearance()\n }\n },\n },\n },\n\n methods: {\n onHover (expand) {\n if (!this.pinned && this.expandOnHover) {\n setTimeout(() => {\n this.isExpanded = expand\n }, expand ? 0 : 100)\n }\n },\n\n togglePin () {\n this.saveSettings(!this.isPinned)\n this.isPinned = !this.isPinned\n },\n\n defaultSidebarAppearance () {\n const localstorage_settings = JSON.parse(window.localStorage.getItem('sidebar_settings'))\n if (localstorage_settings) {\n this.sidebar_settings = localstorage_settings\n }\n const app_sidebar = (localstorage_settings || {})[this.$root.$options.name]\n if (!this.isMobile) {\n if (app_sidebar) {\n this.isExpanded = app_sidebar.pinned\n this.isPinned = app_sidebar.pinned\n } else {\n this.openSidebar()\n }\n } else {\n this.closeSidebar()\n }\n },\n\n saveSettings (pinned) {\n if (this.sidebar_settings[this.$root.$options.name]) {\n this.sidebar_settings[this.$root.$options.name].pinned = pinned\n } else {\n this.sidebar_settings[this.$root.$options.name] = { pinned: pinned }\n }\n window.localStorage.setItem('sidebar_settings', JSON.stringify(this.sidebar_settings))\n },\n\n openSidebar () {\n this.isPinned = true\n this.isExpanded = true\n },\n\n closeSidebar () {\n this.isPinned = false\n this.isExpanded = false\n },\n },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$header-height: 64px;\n\n.tab {\n z-index: 1021;\n top: 0;\n height: $header-height;\n width: 66px;\n}\n\n.icon {\n max-height: 40px;\n max-width: 40px;\n}\n\n.logo {\n max-height: 40px;\n}\n\n.sidebar-header {\n height: $header-height;\n}\n</style>\n\n<style lang=\"scss\">\n$nav-width: 320px;\n$sidebar-bg: #F4F7FA;\n\n.sidebar {\n display: flex !important;\n left: calc(-#{$nav-width}) !important;\n -webkit-transition: left 0.15s ease-in-out;\n -moz-transition: left 0.15s ease-in-out;\n -o-transition: left 0.15s ease-in-out;\n transition: left 0.15s ease-in-out;\n\n header {\n background-color: white;\n\n &.expanded {\n background-color: $sidebar-bg !important;\n }\n }\n\n &.expanded {\n left: 0 !important;\n -webkit-transition: left 0.2s ease-in-out;\n -moz-transition: left 0.2s ease-in-out;\n -o-transition: left 0.2s ease-in-out;\n transition: left 0.2s ease-in-out;\n }\n}\n</style>\n",".sidebar {\n display: flex !important;\n left: calc(-320px) !important;\n -webkit-transition: left 0.15s ease-in-out;\n -moz-transition: left 0.15s ease-in-out;\n -o-transition: left 0.15s ease-in-out;\n transition: left 0.15s ease-in-out;\n}\n.sidebar header {\n background-color: white;\n}\n.sidebar header.expanded {\n background-color: #F4F7FA !important;\n}\n.sidebar.expanded {\n left: 0 !important;\n -webkit-transition: left 0.2s ease-in-out;\n -moz-transition: left 0.2s ease-in-out;\n -o-transition: left 0.2s ease-in-out;\n transition: left 0.2s ease-in-out;\n}\n\n/*# sourceMappingURL=CSidebar.vue.map */"]}, media: undefined });
|
|
83053
83053
|
|
|
83054
83054
|
};
|
|
83055
83055
|
/* scoped */
|
|
83056
|
-
const __vue_scope_id__$E = "data-v-
|
|
83056
|
+
const __vue_scope_id__$E = "data-v-5c37b5a0";
|
|
83057
83057
|
/* module identifier */
|
|
83058
83058
|
const __vue_module_identifier__$E = undefined;
|
|
83059
83059
|
/* functional template */
|
|
@@ -83358,11 +83358,11 @@ __vue_render__$z._withStripped = true;
|
|
|
83358
83358
|
/* style */
|
|
83359
83359
|
const __vue_inject_styles__$F = function (inject) {
|
|
83360
83360
|
if (!inject) return
|
|
83361
|
-
inject("data-v-
|
|
83361
|
+
inject("data-v-3ce3680e_0", { source: ".pointer-none[data-v-3ce3680e] {\n pointer-events: none;\n}\n.svg-inline--fa[data-v-3ce3680e] {\n width: 30px;\n}\n.nav-item > span > .title[data-v-3ce3680e] {\n font-family: \"Poppins-Regular\";\n}\n.nav-active > span > .icon[data-v-3ce3680e] {\n color: #4D7281;\n}\n.nav-active > span > .title[data-v-3ce3680e] {\n font-family: \"Poppins-SemiBold\";\n}\n\n/*# sourceMappingURL=CSidebarNavItems.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/navigation/CSidebarNavItems.vue","CSidebarNavItems.vue"],"names":[],"mappings":"AA+IA;EACA,oBAAA;AC9IA;ADiJA;EACA,WAAA;AC9IA;ADkJA;EACA,8BAAA;AC/IA;ADoJA;EACA,cAAA;ACjJA;ADoJA;EACA,+BAAA;AClJA;;AAEA,+CAA+C","file":"CSidebarNavItems.vue","sourcesContent":["<template>\n <div class=\"nav-sidebar\">\n <b-button\n v-for=\"({page = {}, params = {}, children = []}, index) of items\"\n :key=\"index\"\n variant=\"link\"\n class=\"w-100 text-left text-dark text-decoration-none p-0 pt-2 nav-item\"\n active-class=\"nav-active\"\n exact-active-class=\"nav-active\"\n :to=\"{ name: page.name || defaultRouteName, params }\"\n >\n <span\n class=\"d-inline-block w-75 text-nowrap text-truncate\"\n @click=\"closeSidebar()\"\n >\n <font-awesome-icon\n v-if=\"page.icon\"\n class=\"icon\"\n :icon=\"page.icon\"\n />\n <span\n class=\"title\"\n >\n {{ page.title }}\n </span>\n </span>\n\n <template\n v-if=\"children.length\"\n >\n <b-button\n variant=\"link\"\n class=\"p-0 float-right\"\n :disabled=\"showChildren(page, children)\"\n @click.self.stop.prevent=\"toggle(page)\"\n >\n <font-awesome-icon\n v-if=\"!collapses[pageIndex(page)]\"\n class=\"pointer-none\"\n :icon=\"['fas', 'chevron-down']\"\n />\n <font-awesome-icon\n v-else\n class=\"pointer-none\"\n :icon=\"['fas', 'chevron-up']\"\n />\n </b-button>\n\n <b-collapse\n :visible=\"collapses[pageIndex(page)] || showChildren(page, children)\"\n @click.stop.prevent\n >\n <c-sidebar-nav-items\n class=\"ml-2\"\n :items=\"children\"\n :start-expanded=\"startExpanded\"\n :default-route-name=\"defaultRouteName\"\n v-on=\"$listeners\"\n />\n </b-collapse>\n </template>\n </b-button>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'CSidebarNavItems',\n\n props: {\n /*\n * {\n page: { name, title }\n params: {...}\n }\n */\n items: {\n type: Array,\n required: true,\n default: () => [],\n },\n defaultRouteName: {\n type: String,\n required: true,\n },\n startExpanded: {\n type: Boolean,\n required: false,\n },\n },\n\n data () {\n return {\n collapses: {},\n }\n },\n\n watch: {\n items: {\n handler: function (items) {\n for (const i of items) {\n this.setState(i.page, this.startExpanded)\n }\n },\n immediate: true,\n },\n },\n\n methods: {\n closeSidebar () {\n if (window.innerWidth < 576) {\n this.$root.$emit('close-sidebar')\n }\n },\n\n pageIndex (p) {\n return p.pageID || p.name || p.title\n },\n\n toggle (p) {\n const px = this.pageIndex(p)\n this.$set(this.collapses, px, !this.collapses[px])\n },\n\n setState (p, state = false) {\n const px = this.pageIndex(p)\n this.$set(this.collapses, px, state)\n },\n\n // Recursively check for child pages that are open, so that parents can open aswell\n showChildren (page = {}, children = []) {\n if (page.pageID === this.$route.params.pageID) {\n return page.pageID === this.$route.params.pageID\n }\n\n return children.map(({ page, children }) => this.showChildren(page, children)).some(isOpen => isOpen)\n },\n },\n}\n</script>\n\n<style scoped lang=\"scss\">\n// This has to be there, so chevrons are clickable inside the button\n.pointer-none {\n pointer-events: none;\n}\n\n.svg-inline--fa {\n width: 30px;\n}\n\n.nav-item > span > {\n .title {\n font-family: 'Poppins-Regular'\n }\n}\n\n.nav-active > span > {\n .icon {\n color: #4D7281;\n }\n\n .title {\n font-family: 'Poppins-SemiBold'\n }\n}\n</style>\n",".pointer-none {\n pointer-events: none;\n}\n\n.svg-inline--fa {\n width: 30px;\n}\n\n.nav-item > span > .title {\n font-family: \"Poppins-Regular\";\n}\n\n.nav-active > span > .icon {\n color: #4D7281;\n}\n.nav-active > span > .title {\n font-family: \"Poppins-SemiBold\";\n}\n\n/*# sourceMappingURL=CSidebarNavItems.vue.map */"]}, media: undefined });
|
|
83362
83362
|
|
|
83363
83363
|
};
|
|
83364
83364
|
/* scoped */
|
|
83365
|
-
const __vue_scope_id__$F = "data-v-
|
|
83365
|
+
const __vue_scope_id__$F = "data-v-3ce3680e";
|
|
83366
83366
|
/* module identifier */
|
|
83367
83367
|
const __vue_module_identifier__$F = undefined;
|
|
83368
83368
|
/* functional template */
|
|
@@ -83761,7 +83761,7 @@ __vue_render__$A._withStripped = true;
|
|
|
83761
83761
|
/* style */
|
|
83762
83762
|
const __vue_inject_styles__$G = function (inject) {
|
|
83763
83763
|
if (!inject) return
|
|
83764
|
-
inject("data-v-
|
|
83764
|
+
inject("data-v-37b59a00_0", { source: ".v-step {\n background: #5C5C5C;\n max-width: 320px;\n z-index: 10000;\n border-radius: 1.1rem;\n}\n.v-step--sticky {\n position: fixed;\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.v-step--sticky .v-step__arrow {\n display: none;\n}\n.v-step__arrow,\n.v-step__arrow:before {\n position: absolute;\n width: 10px;\n height: 10px;\n background: inherit;\n}\n.v-step__arrow {\n visibility: hidden;\n}\n.v-step__arrow--dark:before {\n background: #5C5C5C;\n}\n.v-step__arrow:before {\n visibility: visible;\n content: \"\";\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n margin-left: -5px;\n}\n.v-step[data-popper-placement^=top] > .v-step__arrow {\n bottom: -5px;\n}\n.v-step[data-popper-placement^=bottom] > .v-step__arrow {\n top: -5px;\n}\n.v-step[data-popper-placement^=right] > .v-step__arrow {\n left: -5px;\n}\n.v-step[data-popper-placement^=left] > .v-step__arrow {\n right: -5px;\n}\n\n/*# sourceMappingURL=Tour.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/Tour/Tour.vue","Tour.vue"],"names":[],"mappings":"AA8IA;EACA,mBAAA;EACA,gBAAA;EACA,cAAA;EACA,qBAAA;AC7IA;AD+IA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,wCAAA;EACA,gCAAA;AC5IA;AD8IA;EACA,aAAA;AC3IA;AD6IA;;EAEA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,mBAAA;AC1IA;AD4IA;EACA,kBAAA;ACzIA;AD2IA;EACA,mBAAA;ACxIA;AD0IA;EACA,mBAAA;EACA,WAAA;EACA,gCAAA;EACA,wBAAA;EACA,iBAAA;ACvIA;ADyIA;EACA,YAAA;ACtIA;ADwIA;EACA,SAAA;ACrIA;ADuIA;EACA,UAAA;ACpIA;ADsIA;EACA,WAAA;ACnIA;;AAEA,mCAAmC","file":"Tour.vue","sourcesContent":["<template>\n <v-tour\n v-if=\"tour !== null\"\n :name=\"tour.name\"\n :steps=\"tour.steps\"\n :options=\"tour\"\n :callbacks=\"this.callbacks\"\n @onStop=\"onStop\"\n >\n <template slot-scope=\"tour\">\n <transition name=\"fade\">\n <template v-for=\"(step, index) of tour.steps\">\n <v-step\n v-if=\"tour.currentStep === index\"\n :key=\"index\"\n class=\"shadow p-3 text-light text-center\"\n :step=\"step\"\n :previous-step=\"tour.previousStep\"\n :next-step=\"tour.nextStep\"\n :stop=\"tour.stop\"\n :is-first=\"tour.isFirst\"\n :is-last=\"tour.isLast\"\n :labels=\"tour.labels\"\n @onStop=\"onStop\"\n >\n <div slot=\"header\">\n <h5\n v-if=\"(step.header || {}).title\"\n v-html=\"$t(step.header.title)\"\n />\n </div>\n\n <div slot=\"content\">\n <div class=\"p-1 mb-2\">\n <div v-html=\"$t(step.content)\" />\n </div>\n </div>\n\n <div\n slot=\"actions\"\n >\n <b-button\n variant=\"primary\"\n @click=\"onStop\"\n >\n <template v-if=\"tour.isLast && !(callbacks || {}).onNextRedirect\">\n {{ $t('buttons.end') }}\n </template>\n <template v-else>\n {{ $t('buttons.skip') }}\n </template>\n </b-button>\n <b-button\n v-if=\"tour.isFirst && (callbacks || {}).onPrevRedirect\"\n variant=\"primary\"\n :href=\"callbacks.onPrevRedirect\"\n >\n {{ $t('buttons.previous') }}\n </b-button>\n <b-button\n v-else-if=\"!tour.isFirst\"\n variant=\"primary\"\n @click=\"tour.previousStep\"\n >\n {{ $t('buttons.previous') }}\n </b-button>\n <b-button\n v-if=\"tour.isLast && (callbacks || {}).onNextRedirect\"\n variant=\"primary\"\n :href=\"callbacks.onNextRedirect\"\n >\n {{ $t('buttons.next') }}\n </b-button>\n <b-button\n v-else-if=\"!tour.isLast\"\n variant=\"primary\"\n @click=\"tour.nextStep\"\n >\n {{ $t('buttons.next') }}\n </b-button>\n </div>\n </v-step>\n </template>\n </transition>\n </template>\n </v-tour>\n</template>\n<script>\nexport default {\n name: 'TourComponent',\n i18nOptions: {\n namespaces: 'onboarding-tour',\n },\n props: {\n name: String,\n callbacks: {\n type: Object,\n },\n steps: {\n default: () => [],\n type: Array,\n },\n },\n computed: {\n labels () {\n return this.tour.labels\n },\n tour () {\n return {\n name: this.name,\n steps: this.steps.map(step => {\n return {\n name: step,\n target: `[data-v-onboarding=\"${step}\"]`,\n header: {\n title: this.$t(`steps.${step}.title`),\n },\n content: this.$t(`steps.${step}.content`),\n }\n }),\n }\n },\n },\n methods: {\n onStart () {\n if (JSON.parse(localStorage.getItem('corteza.tour')) && this.tour.steps.length) {\n this.$tours[this.tour.name].start()\n }\n },\n onStop () {\n localStorage.setItem('corteza.tour', JSON.stringify(false))\n this.$tours[this.tour.name].stop()\n },\n onStartClick () {\n localStorage.setItem('corteza.tour', JSON.stringify(true))\n this.onStart()\n },\n },\n}\n</script>\n\n<style lang=\"scss\">\n.v-step {\n background: #5C5C5C;\n max-width: 320px;\n z-index: 10000;\n border-radius: 1.1rem;\n}\n.v-step--sticky {\n position: fixed;\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.v-step--sticky .v-step__arrow {\n display: none;\n}\n.v-step__arrow,\n.v-step__arrow:before {\n position: absolute;\n width: 10px;\n height: 10px;\n background: inherit;\n}\n.v-step__arrow {\n visibility: hidden;\n}\n.v-step__arrow--dark:before {\n background: #5C5C5C;\n}\n.v-step__arrow:before {\n visibility: visible;\n content: \"\";\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n margin-left: -5px;\n}\n.v-step[data-popper-placement^=\"top\"] > .v-step__arrow {\n bottom: -5px;\n}\n.v-step[data-popper-placement^=\"bottom\"] > .v-step__arrow {\n top: -5px;\n}\n.v-step[data-popper-placement^=\"right\"] > .v-step__arrow {\n left: -5px;\n}\n.v-step[data-popper-placement^=\"left\"] > .v-step__arrow {\n right: -5px;\n}\n</style>",".v-step {\n background: #5C5C5C;\n max-width: 320px;\n z-index: 10000;\n border-radius: 1.1rem;\n}\n\n.v-step--sticky {\n position: fixed;\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n\n.v-step--sticky .v-step__arrow {\n display: none;\n}\n\n.v-step__arrow,\n.v-step__arrow:before {\n position: absolute;\n width: 10px;\n height: 10px;\n background: inherit;\n}\n\n.v-step__arrow {\n visibility: hidden;\n}\n\n.v-step__arrow--dark:before {\n background: #5C5C5C;\n}\n\n.v-step__arrow:before {\n visibility: visible;\n content: \"\";\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n margin-left: -5px;\n}\n\n.v-step[data-popper-placement^=top] > .v-step__arrow {\n bottom: -5px;\n}\n\n.v-step[data-popper-placement^=bottom] > .v-step__arrow {\n top: -5px;\n}\n\n.v-step[data-popper-placement^=right] > .v-step__arrow {\n left: -5px;\n}\n\n.v-step[data-popper-placement^=left] > .v-step__arrow {\n right: -5px;\n}\n\n/*# sourceMappingURL=Tour.vue.map */"]}, media: undefined });
|
|
83765
83765
|
|
|
83766
83766
|
};
|
|
83767
83767
|
/* scoped */
|
|
@@ -84437,7 +84437,7 @@ __vue_render__$G._withStripped = true;
|
|
|
84437
84437
|
/* style */
|
|
84438
84438
|
const __vue_inject_styles__$N = function (inject) {
|
|
84439
84439
|
if (!inject) return
|
|
84440
|
-
inject("data-v-
|
|
84440
|
+
inject("data-v-6e108672_0", { source: ".toast.overflow-unset {\n overflow: unset !important;\n}\n\n/*# sourceMappingURL=CToaster.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/toaster/CToaster.vue","CToaster.vue"],"names":[],"mappings":"AA6EA;EACA,0BAAA;AC5EA;;AAEA,uCAAuC","file":"CToaster.vue","sourcesContent":["<template>\n <div>\n <b-toast\n v-for=\"t in toasts\"\n :key=\"t.id\"\n visible\n v-bind=\"t.options || {}\"\n :title=\"t.payload.title\"\n :no-close-button=\"!t.actions.hide\"\n toast-class=\"overflow-unset\"\n @hide=\"t.actions.hide ? t.actions.hide.cb(t) : evtSink\"\n >\n <b-card\n header-bg-variant=\"transparent\"\n bg-variant=\"transparent\"\n body-class=\"p-0\"\n class=\"border-0\"\n >\n <b-card-text>\n {{ t.payload.notes }}\n </b-card-text>\n\n <b-card-text v-if=\"t.payload.link\">\n <c-toaster-link :toast=\"t\" />\n </b-card-text>\n\n <component\n :is=\"actComponent(act)\"\n v-for=\"([name, act]) in extraActions(t)\"\n :key=\"name\"\n class=\"mr-1\"\n v-bind=\"act\"\n @action=\"act.cb ? act.cb(t, $event) : evtSink\"\n />\n </b-card>\n </b-toast>\n </div>\n</template>\n\n<script lang=\"js\">\nimport * as actions from './actions'\nimport CToasterLink from './CToasterLink.vue'\n\nexport default {\n components: {\n CToasterLink,\n },\n\n props: {\n toasts: {\n type: Array,\n required: false,\n default: () => [],\n },\n },\n\n methods: {\n extraActions ({ actions = {} }) {\n const { hide, ...act } = actions\n return Object.entries(act)\n },\n\n actComponent ({ kind }) {\n const act = actions[kind]\n if (!act) {\n throw new Error('toast.actionKind.unknown')\n }\n return act\n },\n\n evtSink () {},\n },\n}\n</script>\n\n<style lang=\"scss\">\n// BS only provides overflow-[auto, hidden]\n.toast.overflow-unset {\n overflow: unset!important;\n}\n</style>\n",".toast.overflow-unset {\n overflow: unset !important;\n}\n\n/*# sourceMappingURL=CToaster.vue.map */"]}, media: undefined });
|
|
84441
84441
|
|
|
84442
84442
|
};
|
|
84443
84443
|
/* scoped */
|
|
@@ -84571,7 +84571,7 @@ __vue_render__$H._withStripped = true;
|
|
|
84571
84571
|
/* style */
|
|
84572
84572
|
const __vue_inject_styles__$O = function (inject) {
|
|
84573
84573
|
if (!inject) return
|
|
84574
|
-
inject("data-v-
|
|
84574
|
+
inject("data-v-072f061a_0", { source: ".reminder-sidebar-header {\n height: 64px;\n background-color: #F4F7FA;\n}\n\n/*# sourceMappingURL=CReminderSidebar.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/reminders/CReminderSidebar.vue","CReminderSidebar.vue"],"names":[],"mappings":"AAsEA;EACA,YAAA;EACA,yBAAA;ACrEA;;AAEA,+CAA+C","file":"CReminderSidebar.vue","sourcesContent":["<template>\n <b-sidebar\n v-model=\"isVisible\"\n header-class=\"d-flex align-items-center justify-content-between reminder-sidebar-header px-2 py-3 border-bottom\"\n body-class=\"bg-white px-2\"\n :title=\"title\"\n :backdrop=\"isMobile\"\n no-footer\n right\n shadow\n no-close-on-route-change\n no-close-on-esc\n >\n <template #header>\n <h4\n class=\"text-primary mb-0\"\n >\n <b>{{ title }}</b>\n </h4>\n\n <b-button\n variant=\"outline-light border-0\"\n class=\"d-flex align-items-center justify-content-center p-2\"\n @click=\"isVisible = false\"\n >\n <font-awesome-icon\n :icon=\"['fas', 'times']\"\n class=\"h6 mb-0 text-dark\"\n />\n </b-button>\n </template>\n\n <slot />\n </b-sidebar>\n</template>\n\n<script lang=\"js\">\nexport default {\n props: {\n title: {\n type: String,\n default: '',\n },\n\n visible: {\n type: Boolean,\n required: false,\n default: false,\n },\n },\n\n computed: {\n isVisible: {\n get () {\n return this.visible\n },\n\n set (visible) {\n this.$emit('update:visible', visible)\n },\n },\n\n isMobile () {\n return window.innerWidth < 576\n },\n },\n}\n</script>\n\n<style lang=\"scss\">\n.reminder-sidebar-header {\n height: 64px;\n background-color: #F4F7FA;\n}\n</style>\n",".reminder-sidebar-header {\n height: 64px;\n background-color: #F4F7FA;\n}\n\n/*# sourceMappingURL=CReminderSidebar.vue.map */"]}, media: undefined });
|
|
84575
84575
|
|
|
84576
84576
|
};
|
|
84577
84577
|
/* scoped */
|
|
@@ -84754,11 +84754,11 @@ __vue_render__$I._withStripped = true;
|
|
|
84754
84754
|
/* style */
|
|
84755
84755
|
const __vue_inject_styles__$P = function (inject) {
|
|
84756
84756
|
if (!inject) return
|
|
84757
|
-
inject("data-v-
|
|
84757
|
+
inject("data-v-03e1564e_0", { source: ".component[data-v-03e1564e] {\n cursor: pointer;\n}\n\n/*# sourceMappingURL=ComponentList.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/c3/ComponentList.vue","ComponentList.vue"],"names":[],"mappings":"AA+EA;EACA,eAAA;AC9EA;;AAEA,4CAA4C","file":"ComponentList.vue","sourcesContent":["<template>\n <div>\n <h5\n v-if=\"!root\"\n class=\"mb-0\"\n >\n {{ group }}\n </h5>\n\n <div\n v-if=\"subgroups.length > 0 || components.length > 0\"\n >\n <div\n v-for=\"(cmp, i) in components\"\n :key=\"i\"\n @click=\"$emit('select', cmp)\"\n class=\"component ml-2\"\n >\n {{ cmp.name || cmp.component.name || 'Untitled' }}\n <b-badge\n v-if=\"cmp.wip\"\n variant=\"warning\"\n class=\"float-right\"\n >\n wip\n </b-badge>\n </div>\n <component-list\n v-for=\"(group) in subgroups\"\n :key=\"group\"\n :catalogue=\"catalogue\"\n :path=\"[...path, group]\"\n @select=\"$emit('select', $event)\"\n class=\"my-3\"\n />\n </div>\n </div>\n</template>\n<script>\nimport {ExtractComponents, ExtractSubgroups} from './helpers.ts'\n\nexport default {\n name: 'ComponentList',\n props: {\n catalogue: {\n required: true,\n type: Object,\n },\n\n path: {\n type: Array,\n default: () => []\n },\n },\n\n computed: {\n // name of the current group\n root () {\n return this.path.length === 0\n },\n\n // name of the current group\n group () {\n return this.root ? undefined : this.path[this.path.length - 1]\n },\n\n // returns all groups at this level\n subgroups () {\n return ExtractSubgroups(this.catalogue, ...this.path)\n },\n\n components () {\n // return ExtractComponents(this.catalogue, ...this.path)\n return ExtractComponents(this.catalogue, ...this.path)\n }\n }\n}\n</script>\n<style lang=\"scss\" scoped>\n.component {\n cursor: pointer;\n}\n</style>\n",".component {\n cursor: pointer;\n}\n\n/*# sourceMappingURL=ComponentList.vue.map */"]}, media: undefined });
|
|
84758
84758
|
|
|
84759
84759
|
};
|
|
84760
84760
|
/* scoped */
|
|
84761
|
-
const __vue_scope_id__$P = "data-v-
|
|
84761
|
+
const __vue_scope_id__$P = "data-v-03e1564e";
|
|
84762
84762
|
/* module identifier */
|
|
84763
84763
|
const __vue_module_identifier__$P = undefined;
|
|
84764
84764
|
/* functional template */
|
|
@@ -84980,7 +84980,7 @@ __vue_render__$J._withStripped = true;
|
|
|
84980
84980
|
/* style */
|
|
84981
84981
|
const __vue_inject_styles__$Q = function (inject) {
|
|
84982
84982
|
if (!inject) return
|
|
84983
|
-
inject("data-v-
|
|
84983
|
+
inject("data-v-091aab11_0", { source: ".layout {\n height: 100vh;\n width: 100vw;\n display: grid;\n grid-template-rows: auto 400px;\n grid-template-columns: 300px auto;\n align-content: stretch;\n grid-template-areas: \"side main\" \"side controls\";\n}\n.layout aside {\n grid-area: side;\n overflow: auto;\n}\n.layout main {\n grid-area: main;\n background-image: linear-gradient(135deg, #f3f3f5 21.43%, #ffffff 21.43%, #ffffff 50%, #f3f3f5 50%, #f3f3f5 71.43%, #ffffff 71.43%, #ffffff 100%);\n background-size: 35px 35px;\n overflow: auto;\n}\n.layout .controls {\n grid-area: controls;\n overflow: auto;\n}\n.layout .controls .control-group {\n float: left;\n}\n.layout .scenario {\n cursor: pointer;\n}\n\n/*# sourceMappingURL=C3.vue.map */", map: {"version":3,"sources":["/Users/darh/dev/corteza/vue/src/components/c3/C3.vue","C3.vue"],"names":[],"mappings":"AAwIA;EACA,aAAA;EACA,YAAA;EAEA,aAAA;EACA,8BAAA;EACA,iCAAA;EACA,sBAAA;EACA,gDACA;ACzIA;AD6IA;EACA,eAAA;EACA,cAAA;AC3IA;AD8IA;EACA,eAAA;EACA,iJAAA;EAUA,0BAAA;EACA,cAAA;ACrJA;ADwJA;EACA,mBAAA;EACA,cAAA;ACtJA;ADwJA;EACA,WAAA;ACtJA;AD0JA;EACA,eAAA;ACxJA;;AAEA,iCAAiC","file":"C3.vue","sourcesContent":["<template>\n <div class=\"layout\">\n <aside class=\"sidebar p-2\">\n <h5\n class=\"border-bottom\">\n C3: Component Catalogue\n </h5>\n <component-list\n :catalogue=\"catalogue\"\n @select=\"setCurrent($event)\"\n />\n </aside>\n\n <main\n class=\"p-5\"\n >\n <component\n :is=\"current.component\"\n v-if=\"current\"\n v-bind=\"current.props\"\n />\n <p\n v-else\n class=\"text-center\"\n >\n Select a component from the C3 Catalogue and start hacking :)\n </p>\n </main>\n\n <div\n class=\"controls px-5 py-2 mt-2\"\n v-if=\"current\"\n >\n <div\n class=\"control-group mr-2\"\n v-for=\"(cg, g) in controlGroups\"\n :key=\"`control-group-${g}`\"\n >\n <h3>\n Controls\n </h3>\n <component\n :is=\"c.component\"\n v-for=\"(c, i) in cg\"\n :key=\"i\"\n :value=\"c.value(current.props)\"\n v-bind=\"c.props\"\n @update=\"c.update(current.props, $event)\"\n />\n </div>\n\n <div\n v-if=\"current.scenarios\"\n class=\"control-group float-right\"\n >\n <h3>\n Pre-set controls\n </h3>\n <ul\n class=\"pl-0\"\n >\n <li\n v-for=\"(s, i) in current.scenarios\"\n :key=\"i\"\n class=\"list-unstyled scenario\"\n @click=\"setScenario(s)\"\n >\n {{ s.label }}\n </li>\n </ul>\n </div>\n </div>\n </div>\n</template>\n<script>\nimport ComponentList from './ComponentList.vue'\n\nexport default {\n name: 'C3',\n\n components: {\n ComponentList,\n },\n\n props: {\n catalogue: {\n required: true,\n type: Object,\n },\n },\n\n computed: {\n controlGroups () {\n if (this.current.controls.length === 0) {\n return []\n }\n\n if (Array.isArray(this.current.controls[0])) {\n // already grouped\n return this.current.controls\n }\n\n // make one virtual group holding all controls\n return [this.current.controls]\n },\n },\n\n data () {\n return {\n current: undefined,\n }\n },\n\n methods: {\n setCurrent (component) {\n this.current = { props: {}, ...component }\n this.setScenario(this.current)\n },\n\n setScenario ({ props = {}, controls = [] }) {\n // create missing props from controls\n const apply = (c, props) => c.update(props, c.value(props) || null)\n controls.forEach(c => {\n if (Array.isArray(c)) {\n c.forEach(c => apply(c, props))\n } else {\n apply(c, props)\n }\n })\n\n this.current.props = props\n },\n },\n}\n</script>\n<style lang=\"scss\">\n.layout {\n height: 100vh;\n width: 100vw;\n\n display: grid;\n grid-template-rows: auto 400px;\n grid-template-columns: 300px auto;\n align-content: stretch;\n grid-template-areas:\n \"side main\"\n \"side controls\"\n ;\n\n aside {\n grid-area: side;\n overflow: auto;\n }\n\n main {\n grid-area: main;\n background-image: linear-gradient(\n 135deg,\n #f3f3f5 21.43%,\n #ffffff 21.43%,\n #ffffff 50%,\n #f3f3f5 50%,\n #f3f3f5 71.43%,\n #ffffff 71.43%,\n #ffffff 100%\n );\n background-size: 35.00px 35.00px;\n overflow: auto;\n }\n\n .controls {\n grid-area: controls;\n overflow: auto;\n\n .control-group {\n float: left;\n }\n }\n\n .scenario {\n cursor: pointer;\n }\n}\n</style>\n",".layout {\n height: 100vh;\n width: 100vw;\n display: grid;\n grid-template-rows: auto 400px;\n grid-template-columns: 300px auto;\n align-content: stretch;\n grid-template-areas: \"side main\" \"side controls\";\n}\n.layout aside {\n grid-area: side;\n overflow: auto;\n}\n.layout main {\n grid-area: main;\n background-image: linear-gradient(135deg, #f3f3f5 21.43%, #ffffff 21.43%, #ffffff 50%, #f3f3f5 50%, #f3f3f5 71.43%, #ffffff 71.43%, #ffffff 100%);\n background-size: 35px 35px;\n overflow: auto;\n}\n.layout .controls {\n grid-area: controls;\n overflow: auto;\n}\n.layout .controls .control-group {\n float: left;\n}\n.layout .scenario {\n cursor: pointer;\n}\n\n/*# sourceMappingURL=C3.vue.map */"]}, media: undefined });
|
|
84984
84984
|
|
|
84985
84985
|
};
|
|
84986
84986
|
/* scoped */
|