js-kompo-utils 1.0.40 → 1.0.43

package/components/VlDateMonthDay.vue

@@ -52,9 +52,10 @@
 
 <script>
 import Field from 'vue-kompo/js/form/mixins/Field'
+import UsesKompoLocale from './mixins/UsesKompoLocale.js'
 
 export default {
-    mixins: [Field],
+    mixins: [Field, UsesKompoLocale],
     data() {
         return {
             firstValue: '',
@@ -70,7 +71,6 @@ export default {
     computed: {
         $_mode() { return this.$_config('mode') || 'day-month' },
         $_separator() { return this.$_config('separator') || '-' },
-        $_locale() { return this.$_config('kompo_locale') || 'en' },
         $_yearStart() { return this.$_config('yearStart') || new Date().getFullYear() - 10 },
         $_yearEnd() { return this.$_config('yearEnd') || new Date().getFullYear() + 10 },
         
@@ -266,11 +266,13 @@ export default {
 
 .vlDateMonthDay-select-wrapper {
     position: relative;
-    flex: 1;
+    flex: 1 1 auto;
 }
 
+/* Sized by its longest option, then stretched to the room left: a month name is never clipped. */
 .vlDateMonthDay-select {
-    width: 100%;
+    width: auto;
+    min-width: 100%;
     appearance: none;
     -webkit-appearance: none;
     background-color: transparent;

package/components/VlDocxPreview.vue

@@ -0,0 +1,98 @@
+<template>
+<div
+    v-if="!$_displayNone"
+    v-show="!$_hidden"
+    v-bind="$_attributes"
+    class="vl-docx-preview"
+>
+    <div v-if="loading" class="vl-docx-preview__status">
+        <span class="vl-docx-preview__spinner" aria-hidden="true"></span>
+    </div>
+    <div v-else-if="failed" class="vl-docx-preview__status">{{ fallbackLabel }}</div>
+    <div v-show="!loading && !failed" ref="document"></div>
+</div>
+</template>
+
+<script>
+import Other from 'vue-kompo/js/form/mixins/Other'
+
+export default {
+    mixins: [Other],
+    data() {
+        return {
+            loading: true,
+            failed: false,
+        }
+    },
+    computed: {
+        url() { return this.$_config('url') },
+        fallbackLabel() { return this.$_config('fallbackLabel') || 'No preview available' },
+    },
+    methods: {
+        async renderDocument() {
+            try {
+                const { renderAsync } = await import('docx-preview')
+                const response = await fetch(this.url, { credentials: 'same-origin' })
+
+                if (!response.ok) throw new Error(`HTTP ${response.status}`)
+
+                await renderAsync(await response.blob(), this.$refs.document)
+            } catch (e) {
+                // Legacy .doc and corrupt files are not zip archives and end up here.
+                this.failed = true
+            } finally {
+                this.loading = false
+            }
+
+            this.$nextTick(this.fitToWidth)
+        },
+        fitToWidth() {
+            const container = this.$refs.document
+            const wrapper = container && container.querySelector('.docx-wrapper')
+            const page = wrapper && wrapper.querySelector('section')
+
+            if (!page) return
+
+            wrapper.style.zoom = 1
+
+            const styles = getComputedStyle(wrapper)
+            const neededWidth = page.offsetWidth + parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight)
+
+            wrapper.style.zoom = Math.min(1, container.clientWidth / neededWidth)
+        },
+    },
+    mounted() {
+        this.renderDocument()
+    },
+}
+</script>
+
+<style>
+.vl-docx-preview {
+    overflow: auto;
+}
+
+.vl-docx-preview__status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 2rem 1rem;
+    color: #6b7280;
+}
+
+.vl-docx-preview__spinner {
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 9999px;
+    animation: vl-docx-preview-spin 0.65s linear infinite;
+}
+
+@keyframes vl-docx-preview-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+</style>

package/components/VlPartialDate.vue

@@ -18,15 +18,16 @@
 
 <script>
 import Field from 'vue-kompo/js/form/mixins/Field'
+import UsesKompoLocale from './mixins/UsesKompoLocale.js'
 
-import flatPickr from 'vue-flatpickr-component'; 
+import flatPickr from 'vue-flatpickr-component';
 import 'flatpickr/dist/flatpickr.css';
 import 'flatpickr/dist/themes/airbnb.css';
 
 import { French } from "flatpickr/dist/l10n/fr.js"
 
 export default {
-    mixins: [Field],
+    mixins: [Field, UsesKompoLocale],
     components: { flatPickr },
     data() {
         return {
@@ -46,7 +47,6 @@ export default {
     computed: {
         $_mode() { return this.$_config('mode') || 'day-month' },
         $_separator() { return this.$_config('separator') || '-' },
-        $_locale() { return this.$_config('kompo_locale') },
         $_placeholder() { return this.$_config('placeholder') || this.defaultPlaceholder },
         $_yearStart() { return this.$_config('yearStart') || new Date().getFullYear() - 10 },
         $_yearEnd() { return this.$_config('yearEnd') || new Date().getFullYear() + 10 },

package/components/mixins/UsesKompoLocale.js

@@ -0,0 +1,9 @@
+// Locale for month names, calendars, editors: the element's kompo_locale config (Kompo's passLocale()),
+// else the page language, else English.
+export default {
+    computed: {
+        $_locale() {
+            return this.$_config('kompo_locale') || (document.documentElement.lang || '').slice(0, 2) || 'en';
+        },
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-kompo-utils",
-  "version": "1.0.40",
+  "version": "1.0.43",
   "description": "",
   "main": "app.js",
   "scripts": {
@@ -14,6 +14,7 @@
     "@floating-ui/dom": "^1.7.6",
     "apexcharts": "^5.10.4",
     "ckeditor5": "^44.3.0",
+    "docx-preview": "^0.4.1",
     "gsap": "^3.14.2",
     "highlight.js": "^11.11.1",
     "html2canvas": "^1.4.1",