glib-web 6.0.1 → 6.0.3

package/components/composable/listAutoload.js

@@ -1,4 +1,4 @@
-import { getCurrentInstance, nextTick, ref } from "vue";
+import { getCurrentInstance, nextTick, ref, shallowRef } from "vue";
 import { jsonView } from "../../store";
 import { isArray, isFunction, isNotNull, isObject } from "../../utils/type";
 
@@ -8,6 +8,8 @@ function useListAutoload() {
   const instance = getCurrentInstance();
   const topScrollHandler = ref(null);
   const bottomScrollHandler = ref(null);
+  const topAnchorEl = shallowRef(null);
+  const bottomAnchorEl = shallowRef(null);
   const nextPageUrl = ref(null);
   const prevPageUrl = ref(null);
   const request = ref(null);
@@ -68,7 +70,7 @@ function useListAutoload() {
     if (!proxy) return;
 
     topScrollHandler.value = onVisibilityChange(
-      proxy.$refs?.topAnchor,
+      topAnchorEl.value,
       (_el, visible) => {
         if (visible) {
           handleTopScroll(onScrollToTop);
@@ -85,7 +87,7 @@ function useListAutoload() {
     const proxy = getProxy(instance);
     if (!proxy) return;
 
-    const topAnchor = proxy.$refs?.topAnchor;
+    const topAnchor = topAnchorEl.value;
     const bodyRef = proxy.$refs?.body;
     if (!isNotNull(topAnchor) || !isArray(bodyRef)) return;
 
@@ -153,7 +155,7 @@ function useListAutoload() {
     if (!proxy) return;
 
     bottomScrollHandler.value = onVisibilityChange(
-      proxy.$refs?.bottomAnchor,
+      bottomAnchorEl.value,
       (_el, visible) => {
         if (visible) {
           handleBottomScroll(onScrollToBottom);
@@ -227,6 +229,8 @@ function useListAutoload() {
     prevPageUrl,
     request,
     infiniteScroll,
+    setTopAnchorEl: (el) => { topAnchorEl.value = el; },
+    setBottomAnchorEl: (el) => { bottomAnchorEl.value = el; },
     enableInfiniteScrollIfApplicable,
     autoloadAll,
     cancelAutoloadRequest,

package/components/composable/selectable.js

@@ -14,7 +14,7 @@ function useGlibSelectable({ model, options, valueForDisableAll, itemKey = 'valu
     model.value = Array.from(new Set([...model.value, ...values]));
   };
   const deselect = (values) => {
-    model.value = model.filter((v) => values.includes(v));
+    model.value = model.value.filter((v) => values.includes(v));
   };
   const selectAll = () => {
     model.value = allItem.value.map((item) => item[itemKey]);
@@ -53,9 +53,7 @@ function watchNoneOfAbove({ model, options, valueForDisableAll, itemKey = 'value
     }
   };
 
-  const hasNoneOfAbove = !!options.value.filter((item) => item.checkValue == valueForDisableAll);
-  if (hasNoneOfAbove) {
-    watch(model, (value, oldValue) => {
+  watch(model, (value, oldValue) => {
       if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
       if (!isArray(value)) return;
       if (value && !value.includes(valueForDisableAll) && oldValue && !oldValue.includes(valueForDisableAll)) return;
@@ -66,7 +64,6 @@ function watchNoneOfAbove({ model, options, valueForDisableAll, itemKey = 'value
         disableExceptNoneOfAbove(false);
       }
     });
-  }
 };
 
 export { useGlibSelectable, watchNoneOfAbove };

package/components/fields/_select.vue

@@ -9,18 +9,15 @@
       :menu-props="{ maxWidth: 0 }" @update:modelValue="onChange" @focus="focused = true" @blur="focused = false">
 
       <template #item="{ props, item }">
-        <div class="fields-select-option">
-          <v-list-subheader v-if="item.raw.type == 'view'">
-            <!-- {{ item.raw.header }} -->
-            <glib-component :spec="item.raw" />
-          </v-list-subheader>
-          <v-divider v-else-if="item.raw.divider"></v-divider>
-          <select-item-with-image v-else-if="item.raw.imageUrl" :context="props" :item="item"
-            :spec="spec"></select-item-with-image>
-          <select-item-with-icon v-else-if="item.raw.icon" :context="props" :item="item"
-            :spec="spec"></select-item-with-icon>
-          <select-item-default v-else :context="props" :item="item" :spec="spec"></select-item-default>
-        </div>
+        <v-list-subheader v-if="item.type == 'view'">
+          <glib-component :spec="item" />
+        </v-list-subheader>
+        <v-divider v-else-if="item.divider"></v-divider>
+        <select-item-with-image v-else-if="item.imageUrl" :context="props" :item="item"
+          :spec="spec"></select-item-with-image>
+        <select-item-with-icon v-else-if="item.icon" :context="props" :item="item"
+          :spec="spec"></select-item-with-icon>
+        <select-item-default v-else :context="props" :item="item" :spec="spec"></select-item-default>
       </template>
 
       <template #prepend-item>
@@ -38,7 +35,7 @@
 
       <template v-if="useChips" #selection="{ item, index }">
         <v-chip v-if="index < maxVisibleChips" :density="density" closable @click:close="removeItem(item)">
-          <span>{{ item.title }}</span>
+          <span>{{ item.text }}</span>
         </v-chip>
         <v-chip
           v-if="!expanded && chipExceedsTwoLines && visibleChipCount < fieldModel.length && index === visibleChipCount"
@@ -67,10 +64,6 @@
 
     <input v-for="(item, index) in values" :key="index" type="hidden" :disabled="inputDisabled" :name="fieldName"
       :value="item" />
-
-    <select hidden aria-hidden="true">
-      <option v-for="(opt, i) in selectableOptions" :key="i" :value="opt.value">{{ opt.text }}</option>
-    </select>
   </div>
 </template>
 
@@ -366,9 +359,6 @@ export default {
     emptyValue() {
       return [null];
     },
-    selectableOptions() {
-      return this.normalizedOptions.filter(o => !o.divider && o.type !== 'view');
-    },
     density() {
       return determineDensity(this.spec.styleClasses);
     },

package/components/fields/_selectItemDefault.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-list-item v-bind="props.context" :disabled="props.item.raw.disabled">
+  <v-list-item v-bind="props.context" :disabled="props.item.disabled">
     <template #prepend="{ isActive }">
       <v-checkbox-btn v-if="props.spec.multiple" :model-value="isActive"></v-checkbox-btn>
     </template>

package/components/fields/_selectItemWithIcon.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-list-item v-bind="props.context" :disabled="props.item.raw.disabled">
+  <v-list-item v-bind="props.context" :disabled="props.item.disabled">
     <template #prepend="{ isActive }">
       <v-checkbox-btn v-if="props.spec.multiple" :model-value="isActive"></v-checkbox-btn>
-      <glib-component :spec="itemIconSpec(props.item.raw.icon)" />
+      <glib-component :spec="itemIconSpec(props.item.icon)" />
     </template>
   </v-list-item>
 </template>

package/components/fields/_selectItemWithImage.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-list-item v-bind="props.context" :disabled="props.item.raw.disabled">
+  <v-list-item v-bind="props.context" :disabled="props.item.disabled">
     <template #prepend>
       <v-avatar size="24" color="white">
-        <v-img :src="props.item.raw.imageUrl"></v-img>
+        <v-img :src="props.item.imageUrl"></v-img>
       </v-avatar>
     </template>
     <template #append="{ isActive }">

package/components/panels/list.vue

@@ -1,6 +1,6 @@
 <template>
   <v-list v-if="loadIf" class="py-0" :class="$classes()" :style="$styles()">
-    <div ref="topAnchor">
+    <div :ref="setTopAnchorEl">
       <div v-if="prevPageUrl" class="py-3 px-4">
         Loading...
       </div>
@@ -37,7 +37,7 @@
       </div>
     </template>
 
-    <div ref="bottomAnchor">
+    <div :ref="setBottomAnchorEl">
       <div v-if="nextPageUrl" class="py-3 px-4">
         Loading...
       </div>

package/cypress/component/testUtils.js

@@ -1,16 +1,16 @@
 import { mount } from "cypress/vue";
-import genericMixin from "../../components/mixins/generic";
+import genericMixin from "../../components/mixins/generic.js";
 import stylesMixin from "../../components/mixins/styles.js";
-import updatableComponent from "../../components/mixins/updatableComponent";
-import vuetify from "../../plugins/vuetify";
-import Uploader from "../../utils/glibDirectUpload";
-import * as TypeUtils from "../../utils/type";
-import Framework from "../../utils/public";
-import App from "../../utils/app";
-import UrlUtils from "../../utils/url";
-import Format from "../../utils/format";
-import Dom from "../../utils/dom";
-import Settings from "../../utils/settings";
+import updatableComponent from "../../components/mixins/updatableComponent.js";
+import vuetify from "../../plugins/vuetify.js";
+import Uploader from "../../utils/glibDirectUpload.js";
+import * as TypeUtils from "../../utils/type.js";
+import Framework from "../../utils/public.js";
+import App from "../../utils/app.js";
+import UrlUtils from "../../utils/url.js";
+import Format from "../../utils/format.js";
+import Dom from "../../utils/dom.js";
+import Settings from "../../utils/settings.js";
 
 const glibGlobals = {
   app: App,

package/cypress/support/component.js

@@ -1,5 +1,5 @@
 import "./commands.js";
-import "@cypress/code-coverage/support";
+import "@cypress/code-coverage/support.js";
 import { isFunction, isObject } from "../../utils/type.js";
 
 const win = window;

package/cypress/support/e2e.js

@@ -15,7 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import "./commands.js";
-import "@cypress/code-coverage/support";
+import "@cypress/code-coverage/support.js";
 // import { isFunction, isObject } from "../../utils/type.js";
 
 // Cypress.on("window:before:load", (win) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "glib-web",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -9,8 +9,7 @@
     "pretest": "eslint .",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "test": "env -u ELECTRON_RUN_AS_NODE cypress run --browser chrome && env -u ELECTRON_RUN_AS_NODE cypress run --component",
-    "test:component": "env -u ELECTRON_RUN_AS_NODE cypress run --component",
+    "test": "env -u ELECTRON_RUN_AS_NODE cypress run --browser chrome",
     "test:coverage": "env -u ELECTRON_RUN_AS_NODE VITE_COVERAGE=true cypress run --browser chrome && env -u ELECTRON_RUN_AS_NODE VITE_COVERAGE=true cypress run --component && nyc report"
   },
   "author": "",