glib-web 3.15.3 → 3.16.1

package/components/charts/pie.vue

@@ -1,6 +1,6 @@
 <template>
   <pie-chart :style="genericStyles()" :class="$classes()" :data="series" :colors="color" :suffix="spec.suffix"
-    :prefix="spec.prefix" :min=spec.min :max=spec.max :legend=spec.legend></pie-chart>
+    :prefix="spec.prefix" :min="spec.min" :max="spec.max" :legend="spec.legend" :donut="isDonut($classes())"></pie-chart>
 </template>
 
 <script setup>
@@ -9,8 +9,8 @@ const { singleDataSeries } = await import('./series');
 
 const { spec } = defineProps({ spec: Object });
 const color = spec.colors == null ? '' : spec.colors;
-const series = computed(() => singleDataSeries(spec.dataSeries))
-
+const series = computed(() => singleDataSeries(spec.dataSeries));
+const isDonut = (classes) => [classes].flat().includes('donut');
 </script>
 
 <style scoped></style>

package/components/component.vue

@@ -71,7 +71,7 @@ import TextAreaField from "./fields/textarea.vue";
 const RichTextField = defineAsyncComponent(() => import("./fields/richText.vue"));
 // import NewRichTextField from "./fields/newRichText.vue";
 const FileField = defineAsyncComponent(() => import("./fields/file.vue"));
-const MultipleUploadField = defineAsyncComponent(() => import("./fields/multipleUpload.vue"));
+const MultiUploadField = defineAsyncComponent(() => import("./fields/multiUpload.vue"));
 import AutocompleteField from "./fields/autocomplete.vue";
 import SelectField from "./fields/select.vue";
 import TimeZoneField from "./fields/timeZone.vue";
@@ -164,7 +164,7 @@ export default {
     "fields-richText": RichTextField,
     // "fields-newRichText": NewRichTextField,
     "fields-file": FileField,
-    "fields-multipleUpload": MultipleUploadField,
+    "fields-multiUpload": MultiUploadField,
     "fields-autocomplete": AutocompleteField,
     "fields-select": SelectField,
     "fields-timeZone": TimeZoneField,

package/components/fields/_select.vue

@@ -1,10 +1,10 @@
 <template>
   <div :style="$styles()" :class="classes()">
-    <v-autocomplete v-model="fieldModel" :label="spec.label" :items="options || []" :chips="spec.multiple"
-      :multiple="spec.multiple" :readonly="spec.readOnly" :clearable="!spec.readOnly" :hint="spec.hint"
+    <v-autocomplete v-model="fieldModel" :label="label" :items="options || []" :chips="spec.multiple"
+      :multiple="spec.multiple" :readonly="spec.readOnly" :clearable="!spec.readOnly"
       :placeholder="spec.placeholder" :rules="rules" persistent-hint :append-icon="append.icon" validate-on="blur"
       item-title='text' :variant="variant" :closable-chips="spec.multiple" :density="density" persistent-placeholder
-      @update:modelValue="onChange">
+      @update:modelValue="onChange" @focus="focused = true" @blur="focused = false">
 
       <template #item="{props, item}">
         <v-list-subheader v-if="item.raw.header">
@@ -41,7 +41,8 @@ export default {
     return {
       options: null,
       append: {},
-      rules: []
+      rules: [],
+      focused: false
     };
   },
   computed: {
@@ -60,6 +61,12 @@ export default {
     },
     density() {
       return determineDensity(this.spec.styleClasses);
+    },
+    label() {
+      if (this.focused) {
+        return `${this.spec.label} ${this.spec.hint}`
+      }
+      return this.spec.label
     }
   },
   methods: {

package/components/fields/file.vue

@@ -9,28 +9,18 @@
         :src="fileImage || placeholder.url" />
 
       <v-text-field v-else-if="placeholder.type == 'input'" :value="fileTitle" variant="outlined"
-        placholder="Upload your file" disabled />
+        :placeholder="placeholder.inputPlaceholder" disabled />
 
-        <!-- See https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/ -->
+      <!-- See https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/ -->
       <a href="" @click="showPreview" v-else>{{ fileTitle }}</a>
 
-      <span v-if="spec.uploadText">
-        <v-btn @click="triggerUpload">
-          <v-icon> {{ spec.uploadIcon || "upload" }} </v-icon>
-          {{ spec.uploadText }}
-        </v-btn>
-
-        <v-btn v-if="fileImage" icon @click="removeImage">
-          <v-icon>close</v-icon>
-        </v-btn>
-      </span>
-      <div v-else class="action-container">
+      <div class="action-container">
         <v-btn @click="triggerUpload" class="upload-btn">
-          {{ fileImage ? 'Change' : 'Upload' }}
+          {{ fileImage ? buttonLabels.change : buttonLabels.upload }}
         </v-btn>
 
         <v-btn variant="flat" v-if="fileImage" @click="removeImage" class="remove-btn">
-          Delete
+          {{ buttonLabels.delete }}
         </v-btn>
 
 
@@ -39,28 +29,13 @@
       </div>
     </div>
     <input ref="directUploadFile" style="display: none" type="file" @change="uploadFiles" />
-
-    <!-- <input type="file" :name="spec.name" ref='directUploadFile' @change='uploadFiles' v-show='!uploaded'/> -->
     <v-progress-linear class="mt-1" v-if="showProgress" v-model="progress.value" />
-    <!-- <div v-show='uploaded'>
-      <v-layout align-center justify-space-between row>
-        <v-chip @click='removeImage' class='mr-2' color='red' text-color="white">X</v-chip>
-        <span ref='fileName' class='w-full mr-2'></span>
-        <img ref='fileImage' class='place-image-preview' />
-      </v-layout>
-    </div> -->
     <input type="hidden" :name="spec.name" :value="fileValue" :disabled="inputDisabled" />
   </div>
 </template>
 
 <script>
-// import * as ActiveStorage from "@rails/activestorage"
 import Uploader from "../../utils/uploader";
-// import EventController, {
-//   DISABLE_SUBMIT_BUTTON
-// } from "../../utils/global-event-controller";
-
-// ActiveStorage.start()
 
 export default {
   props: {
@@ -75,6 +50,7 @@ export default {
       fileValue: null,
       inputElement: null,
       placeholder: {},
+      buttonLabels: { delete: 'Delete', upload: 'Upload', change: 'Change' }
     };
   },
   computed: {
@@ -91,8 +67,9 @@ export default {
         this.fileValue = this.spec.value;
       }
 
-      this.placeholder = this.spec.placeholderView || {};
+      this.placeholder = this.spec.placeholderView || { inputPlaceholder: 'Upload your file' };
       this.inputElement = this.$refs.directUploadFile;
+      this.buttonLabels = Object.assign(this.buttonLabels, this.spec.buttonLabels);
     },
     triggerUpload() {
       this.inputElement.click();
@@ -122,7 +99,7 @@ export default {
       const previewWindow = window.open("");
       previewWindow?.document.write(
         `<iframe width='100%' height='100%' src='${this.fileImage}'></iframe>`
-      )
+      );
     },
     uploadFile(file) {
       const upload = new Uploader(
@@ -182,6 +159,7 @@ export default {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  gap: 8px;
 
   &.uploaded {
     gap: 16px;

package/components/fields/{multipleUpload.vue → multiUpload.vue}

@@ -6,8 +6,8 @@
 
       <div class="cloud" style="pointer-events: none;">
         <v-icon ref="icon" size="48" class="icon">cloud_upload</v-icon>
-        <h4 v-if="spec.title" class="title">{{ spec.title }}</h4>
-        <p v-if="spec.subtitle" class="subtitle">{{ spec.subtitle }}</p>
+        <h4 v-if="spec.placeholder" class="title">{{ spec.placeholder }}</h4>
+        <p v-if="spec.hint" class="subtitle">{{ spec.hint }}</p>
       </div>
 
       <input v-for="(file, index) in Object.values(files)" type="hidden" :name="spec.name" :value="file.signedId"
@@ -239,8 +239,8 @@ export default defineComponent({
     const container = ref(null);
     const icon = ref(null);
 
-    let files = null;
-    if (spec.files) {
+    let files = ref({});
+    if (spec.files && spec.files.length > 0) {
       files = ref(spec.files.reduce((prev, curr) => {
         const key = makeKey();
 
@@ -255,8 +255,6 @@ export default defineComponent({
 
         return prev;
       }, {}));
-    } else {
-      files = ref([]);
     }
 
     const setBusy = (value) => {

package/components/fields/otpField.vue

@@ -1,24 +1,41 @@
 <template>
-  <fields-otp :spec="spec" />
+  <div :style="$styles()" :class="$classes()">
+    <v-otp-input ref="field" v-model="fieldModel" :name="fieldName" :disabled="inputDisabled" :rounded="4"
+      :max-width="maxWidth" type="spec.type || 'number'" :length="length" :variant="variant" />
+    <label class="hint" v-if="spec.hint">{{ spec.hint }}</label>
+  </div>
 </template>
 
 <script>
-import OtpField from "./_otp.vue";
+import inputVariant from "../mixins/inputVariant";
 
 export default {
-  components: {
-    // Need to start with `fields-` to enable jsonlogic in `styles.js#_linkFieldModels`
-    "fields-otp": OtpField,
-  },
+  expose: ['fieldModel'],
+  mixins: [inputVariant],
   props: {
     spec: { type: Object, required: true },
   },
-  data() {
-    return {
-      value: null,
-    };
+  computed: {
+    length() {
+      return this.spec.length || 6;
+    },
+    maxWidth() {
+      const width = 50;
+      const pad = 8;
+      return this.length * width + this.length * pad;
+    }
   },
+  methods: {
+    $sanitizeValue(val) {
+      if (!val) return '';
+
+      let value = val + '';
+      if (this.length > value.length) {
+        value = '0'.repeat(this.length - value.length) + value;
+      }
+
+      return value;
+    }
+  }
 };
 </script>
-
-<style scoped></style>

package/components/mixins/styles.js

@@ -94,7 +94,9 @@ export default {
             return;
           }
 
-          this.fieldModel = this.$sanitizeValue(this.$externalizeValue(value));
+          if (this.spec.valueIf) {
+            this.fieldModel = this.$sanitizeValue(this.$externalizeValue(value));
+          }
         });
         this._watchers.push(watcher1);
       }
@@ -253,12 +255,12 @@ export default {
 
         // Avoid user input getting removed when updating certain parts of the page.
         if (valueChanged) {
-          this.fieldModel = this._sanitizeValue(this.spec.value);
+          this.fieldModel = this.$sanitizeValue(this.$externalizeValue(this.spec.value));
         }
       }
     },
     action_resetValue() {
-      this.fieldModel = this._sanitizeValue(this.spec.value);
+      this.fieldModel = this.$sanitizeValue(this.$externalizeValue(this.spec.value));
     },
     $classes(spec, defaultViewName) {
       const properties = Object.assign(

package/components/panels/table.vue

@@ -49,12 +49,14 @@
             <tr :class="row.onClick ? 'clickable' : ''">
               <td v-for="(cell, cellIndex) in row.cellViews" :key="`cell_${cellIndex}`" :colSpan="colSpan(row, cellIndex)"
                 :style="colStyles(row, cellIndex)">
-                <!-- Prevent double links -->
-                <glib-component v-if="$href(cell)" :spec="cell" />
-                <!-- without "|| null" the browser will reload strangely -->
-                <a v-else :href="$href(row) || null" @click="$onClick($event, row)">
-                  <glib-component :spec="cell" />
-                </a>
+                <span>
+                  <!-- Prevent double links -->
+                  <glib-component v-if="$href(cell)" :spec="cell" />
+                  <!-- without "|| null" the browser will reload strangely -->
+                  <a v-else :href="$href(row) || null" @click="$onClick($event, row)">
+                    <glib-component :spec="cell" />
+                  </a>
+                </span>
               </td>
             </tr>
           </template>
@@ -175,9 +177,8 @@ tbody {
 
   td {
     border-top: 1px solid rgba(0, 0, 0, 0.12);
-    // border-left: 1px solid rgba(0, 0, 0, 0.12);
 
-    a {
+    span {
       padding: 10px 24px;
       display: block;
       color: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.15.3",
+  "version": "3.16.1",
   "description": "",
   "main": "index.js",
   "scripts": {