glib-web 6.0.0 → 6.0.2

package/app.scss

@@ -1,3 +1,22 @@
+/**
+ * Vuetify 3 bundled sanitize.css which reset all element margins via `* { margin: 0; padding: 0 }`.
+ * Vuetify 4 dropped sanitize.css in favour of a lighter CSS-layers reset that does NOT zero
+ * browser-default margins on block elements. We restore the relevant resets here explicitly so
+ * that layout behaves the same as it did under Vuetify 3.
+ *
+ * Padding is intentionally NOT reset on h1–h6, p, li, figure, figcaption, dl: browsers add no
+ * default padding to those elements, so a reset is a visual no-op — but an unlayered `padding: 0`
+ * would override Vuetify 4 spacing utilities (pb-*, pt-*, px-* …) which live in
+ * @layer vuetify-utilities and lose to any unlayered CSS.
+ */
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, ol, ul, li, figure, figcaption, dl, dd {
+  margin: 0;
+}
+// Only reset padding where the browser UA actually sets a non-zero default.
+blockquote, pre, ol, ul, dd {
+  padding: 0;
+}
+
 .border-\[2px\] {
   border-width: 2px;
 }

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/flow.vue

@@ -35,6 +35,18 @@ export default {
     cssClasses: function () {
       const classes = this.$classes().concat("layouts-flow");
 
+      // Use Vuetify utility classes for display/flex-wrap so that responsive
+      // display overrides (d-sm-none, d-none, d-md-flex …) provided via the
+      // spec's styleClasses live in the same @layer vuetify-utilities.helpers
+      // and Vuetify's own CSS source order makes them win over these defaults.
+      if (!classes.includes("d-flex") && !classes.includes("d-none") &&
+          !classes.includes("d-block") && !classes.includes("d-inline")) {
+        classes.push("d-flex");
+      }
+      if (!classes.some((c) => typeof c === "string" && c.startsWith("flex-"))) {
+        classes.push("flex-wrap");
+      }
+
       const configs = {
         'top': 'align-start',
         'middle': 'align-center',
@@ -148,13 +160,10 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.layouts-flow {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-/* .layouts-horizontal > div {
-  display: inline-block;
-} */
-</style>
+<!-- No CSS for display/flex-wrap here.
+     In Vuetify 4, responsive display classes (d-sm-none, d-none …) live in
+     @layer vuetify-utilities.helpers. Any author CSS that sets display
+     (even in a lower-priority layer) can interfere because of layer ordering
+     in the Vite module graph. Instead we add d-flex and flex-wrap as Vuetify
+     utility class strings in cssClasses() so they sit in the same layer as
+     d-sm-none/d-none and Vuetify's source order makes responsive classes win. -->

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/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "glib-web",
-  "version": "6.0.0",
+  "version": "6.0.2",
   "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": "",