glib-web 4.40.0 → 4.41.1

package/.nycrc.json

@@ -0,0 +1,18 @@
+{
+  "reporter": [
+    "text-summary",
+    "html"
+  ],
+  "report-dir": "./coverage",
+  "extension": [
+    ".js",
+    ".ts",
+    ".vue"
+  ],
+  "exclude": [
+    "cypress/**",
+    "coverage/**",
+    "doc/**",
+    "node_modules/**"
+  ]
+}

package/actions/dialogs/alert.js

@@ -1,5 +1,7 @@
 // import Launch from "../../utils/launch";
 
+import Action from "../../action";
+
 export default class {
   execute(properties, component) {
     const spec = Object.assign({}, properties, {
@@ -13,5 +15,7 @@ export default class {
       ]
     });
     Utils.launch.dialog.open(spec, component);
+
+    Action.execute(properties.onOpen, component);
   }
 }

package/actions/dialogs/open.js

@@ -1,3 +1,4 @@
+import Action from "../../action";
 import { dialogs } from "../../store";
 
 export default class {
@@ -13,5 +14,7 @@ export default class {
     }
 
     Utils.launch.dialog.open(prop, component);
+
+    Action.execute(spec.onOpen, component);
   }
 }

package/actions/dialogs/show.js

@@ -1,3 +1,4 @@
+import Action from "../../action";
 import { dialogs } from "../../store";
 
 export default class {
@@ -12,5 +13,6 @@ export default class {
       return;
     }
     Utils.launch.dialog.open(prop, component);
+    Action.execute(spec.onShow, component);
   }
 }

package/components/composable/date.js

@@ -1,10 +1,10 @@
 import moment from "moment-timezone";
+import { isString } from "../../utils/type";
 
-export function sanitize(val, type, timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone) {
-
+export function sanitize(val, type, timeZone) {
   if (!val) return;
-
-  val = moment(val).tz(timeZone).toISOString(true);
+  const hasTimeZone = isString(timeZone) && timeZone !== "";
+  val = hasTimeZone ? moment.tz(val, timeZone).toISOString(true) : moment(val).toISOString(true);
 
   switch (type) {
     case "date":
@@ -31,4 +31,4 @@ export function localeString(val, type, format) {
       return new Date(val).toLocaleDateString(undefined, fmt);
   }
 
-}
+}

package/components/fields/_patternText.vue

@@ -1,20 +1,28 @@
 <template>
-  <div :style="$styles()" :class="$classes()" v-if="loadIf">
+  <div :style="$styles()" :class="$classes()" class="pattern-picker-field" v-if="loadIf">
     <button-date v-if="spec.template" :type="type" :spec="spec" @datePicked="handleDatePicked"></button-date>
     <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
-    <v-text-field v-else ref="field" :color="gcolor" v-model="fieldModel" :name="fieldName" :label="spec.label"
-      :hint="spec.hint" :type="type" :readonly="spec.readOnly" :disabled="inputDisabled" :min="sanitizeValue(spec.min)"
-      :max="sanitizeValue(spec.max)" :pattern="pattern" :rules="$validation()" :style="$styles()"
-      :density="$classes().includes('compact') ? 'compact' : 'default'" :clearable="spec.clearable" @change="onChange"
-      :variant="variant" validate-on="blur" persistent-placeholder />
+
+    <template v-else>
+      <v-text-field ref="field" :color="gcolor" :label="spec.label" :hint="spec.hint" :readonly="spec.readOnly"
+        :disabled="inputDisabled" :style="$styles()" :density="$classes().includes('compact') ? 'compact' : 'default'"
+        :clearable="spec.clearable" @change="onChange" :variant="variant" validate-on="blur" persistent-placeholder
+        :placeholder="spec.placeholder" @click="openPicker" :value="format" />
+      <input ref="nativePicker" v-model="fieldModel" class="native-picker" :type="type" :name="fieldName"
+        :min="sanitizeValue(spec.min)" :max="sanitizeValue(spec.max)" :value="sanitizeValue(fieldModel)"
+        @change="handleNativeChange" />
+      <v-input :model-value="fieldModel" :rules="$validation()"></v-input>
+    </template>
   </div>
 </template>
 
 <script>
+import { useDate } from "vuetify";
 import { sanitize } from "../composable/date";
 import { useGlibInput } from "../composable/form";
 import inputVariant from '../mixins/inputVariant';
 import buttonDate from "./_buttonDate.vue";
+import { isPresent, isString, isFunction } from "../../utils/type";
 
 export default {
   mixins: [inputVariant],
@@ -25,20 +33,73 @@ export default {
     pattern: { type: String, required: true }
   },
   setup(props) {
+    const adapter = useDate();
     useGlibInput({ props });
+
+    return { adapter };
+  },
+  computed: {
+    isDateType() {
+      return this.type === 'date';
+    },
+    isDateTimeType() {
+      return this.type === 'datetime-local';
+    },
+    format() {
+      if (!isPresent(this.fieldModel)) return;
+      if (!isPresent(this.spec.format)) {
+        switch (this.type) {
+          case 'date':
+            return this.adapter.format(this.fieldModel, 'fullDate');
+
+          case 'datetime-local':
+            return this.adapter.format(this.fieldModel, 'keyboardDateTime24h');
+
+          default:
+            return this.adapter.format(this.fieldModel, 'keyboardDateTime24h');
+        }
+      }
+
+      return this.adapter.format(this.fieldModel, this.spec.format);
+    }
   },
   methods: {
     _linkFieldModels(valueChanged) {
       if (valueChanged) this.fieldModel = this.sanitizeValue(this.spec.value);
     },
-    sanitizeValue(val) {
-      if (val) {
-        return sanitize(val, this.type, this.spec.time_zone);
+    sanitizeValue(val, timeZone = this.spec.time_zone) {
+      if (isPresent(val)) {
+        return sanitize(val, this.type, timeZone);
+      }
+    },
+    openPicker() {
+      if (this.inputDisabled || this.spec.readOnly) return;
+
+      const picker = this.$refs.nativePicker;
+      if (!picker) return;
+
+      if (isPresent(this.fieldModel)) {
+        picker.value = this.sanitizeValue(this.fieldModel);
+      } else if (isPresent(this.spec.value)) {
+        picker.value = this.sanitizeValue(this.spec.value);
+      }
+
+      if (isFunction(picker.showPicker)) {
+        picker.showPicker();
+      } else {
+        picker.click();
       }
     },
     onChange() {
       this.$executeOnChange();
     },
+    handleNativeChange(event) {
+      const value = event?.target?.value;
+      if (!isString(value)) return;
+
+      this.fieldModel = this.sanitizeValue(value, '');
+      this.$executeOnChange();
+    },
     handleDatePicked(value) {
       this.fieldModel = value;
       this.$executeOnChange();
@@ -62,4 +123,17 @@ export default {
     padding-bottom: unset;
   }
 }
+
+.pattern-picker-field {
+  position: relative;
+}
+
+.native-picker {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
 </style>

package/cypress/support/e2e.ts

@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
+import '@cypress/code-coverage/support'
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

package/cypress.config.ts

@@ -1,9 +1,11 @@
 import { defineConfig } from "cypress";
+import codeCoverageTask from "@cypress/code-coverage/task";
 
 export default defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
-      // implement node event listeners here
+      codeCoverageTask(on, config);
+      return config;
     },
   },
 });

package/doc/TESTING.md

@@ -54,3 +54,17 @@ You **cannot write frontend tests in isolation**.
 ---
 
 These 6 concepts explain **why the test structure exists** and **what you need to get started**. Everything else (selectors, assertions, etc.) is standard Cypress mechanics.
+
+## Cypress Coverage Workflow
+
+- **Prerequisites**: Keep the backend `glib-web` server running with the matching `test_page/*` fixtures (same as normal Cypress runs) and make sure the frontend package is linked into that app: `yarn link glib-web` (run from the backend repo).
+- **Instrument code**: Coverage is only collected when `VITE_COVERAGE=true` because `vite-plugin-istanbul` has `requireEnv` enabled.
+- **Step-by-step run**:
+  1. From the backend repo (`glib-web`), ensure the link is active: `yarn link glib-web`.
+  2. From the backend repo, start Vite with instrumentation: `VITE_COVERAGE=true bin/vite dev`.
+  3. From the backend repo, start Rails: `bin/rails s`.
+  4. From this repo (`glib-web-npm`), execute `yarn test:coverage` to run Cypress and emit coverage reports via `nyc` (uses `.nycrc.json`).
+- **Manual run (if you need custom flags)**:
+  1. `VITE_COVERAGE=true yarn test`
+  2. `nyc report` (or add reporters, e.g. `nyc report --reporter=lcov`).
+- **Where to read results**: HTML report at `coverage/index.html`; summary printed in the terminal; raw data in `.nyc_output` and `coverage/coverage-final.json`.

package/package.json

@@ -1,10 +1,12 @@
 {
+  "type": "module",
   "name": "glib-web",
-  "version": "4.40.0",
+  "version": "4.41.1",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "cypress run --browser chrome"
+    "test": "cypress run --browser chrome",
+    "test:coverage": "VITE_COVERAGE=true cypress run --browser chrome && nyc report"
   },
   "author": "",
   "license": "ISC",
@@ -42,11 +44,18 @@
     "vuetify": "3.8.6"
   },
   "devDependencies": {
+    "@cypress/code-coverage": "^3.14.7",
     "@types/chart.js": "^2.9.34",
+    "@vitejs/plugin-vue": "^6.0.2",
     "cypress": "^13.13.1",
     "eslint": "^8.36.0",
     "eslint-plugin-vue": "^9.26.0",
     "prettier": "^1.18.2",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "vite": "^7.2.7",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-environment": "^1.1.3",
+    "vite-plugin-istanbul": "^7.2.1",
+    "vite-plugin-ruby": "^5.1.1"
   }
 }

package/plugins/viteDefaultConfig.js

@@ -0,0 +1,88 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+import RubyPlugin from "vite-plugin-ruby";
+import vue from "@vitejs/plugin-vue";
+import viteCompression from "vite-plugin-compression";
+import EnvironmentPlugin from "vite-plugin-environment";
+import istanbul from "vite-plugin-istanbul";
+import * as TypeUtils from "../utils/type.js";
+
+function pickStringArray(value) {
+  if (!TypeUtils.isArray(value)) {
+    return null;
+  }
+
+  const filtered = value.filter((item) => TypeUtils.isString(item));
+  return filtered.length > 0 ? filtered : null;
+}
+
+function resolveGlibRoot(customRoot) {
+  if (TypeUtils.isString(customRoot)) {
+    return customRoot;
+  }
+
+  return path.resolve(fileURLToPath(new URL("..", import.meta.url)));
+}
+
+
+/**
+ * Builds the default Vite configuration used by glib projects.
+ *
+ * @param {object} [options] Configuration overrides.
+ * @param {string} [options.glibRoot] Root directory for the glib package (defaults to repo root).
+ * @param {string} [options.aliasName] Module alias name for glib imports.
+ * @param {string} [options.aliasPath] Filesystem path used for the alias.
+ * @param {string} [options.workspaceRoot] Workspace root for coverage and path resolution.
+ * @param {string[]} [options.istanbulInclude] Globs to include when running Istanbul.
+ * @param {string[]} [options.environmentVariables] Environment variables exposed to the client.
+ * @param {string[]} [options.serverAllow] Additional filesystem paths allowed by Vite dev server.
+ * @param {import("vite").Plugin[]} [options.plugins] Extra Vite plugins to append.
+ * @returns {import("vite").UserConfig} Config object passed to `defineConfig`.
+ */
+function useGlibViteDefineConfig(options = {}) {
+  if (TypeUtils.isNotNull(globalThis.window)) {
+    throw new Error("useGlibViteDefineConfig is only available in Node environments.");
+  }
+
+  const configOptions = TypeUtils.isObject(options) && !TypeUtils.isArray(options) ? options : {};
+
+  const glibRoot = resolveGlibRoot(configOptions.glibRoot);
+  const aliasName = TypeUtils.isString(configOptions.aliasName) ? configOptions.aliasName : "glib-web";
+  const aliasPath = TypeUtils.isString(configOptions.aliasPath) ? configOptions.aliasPath : glibRoot;
+  const workspaceRoot = TypeUtils.isString(configOptions.workspaceRoot)
+    ? configOptions.workspaceRoot
+    : path.resolve(glibRoot, "..");
+  const istanbulInclude = pickStringArray(configOptions.istanbulInclude) ?? [`${path.basename(glibRoot)}/**/*`];
+  const environmentVariables = pickStringArray(configOptions.environmentVariables) ?? ["VITE_GMAPS_API_KEY"];
+  const serverAllow = pickStringArray(configOptions.serverAllow) ?? [glibRoot];
+  const additionalPlugins = TypeUtils.isArray(configOptions.plugins) ? configOptions.plugins : [];
+
+  return defineConfig({
+    server: {
+      fs: {
+        allow: serverAllow.map((allowedPath) => path.resolve(allowedPath))
+      }
+    },
+    resolve: {
+      alias: {
+        [aliasName]: path.resolve(aliasPath)
+      }
+    },
+    plugins: [
+      vue(),
+      RubyPlugin(),
+      istanbul({
+        cwd: path.resolve(workspaceRoot),
+        include: istanbulInclude,
+        requireEnv: true
+      }),
+      viteCompression(),
+      EnvironmentPlugin(environmentVariables, { defineOn: "import.meta.env" }),
+      ...additionalPlugins
+    ]
+  });
+}
+
+export { useGlibViteDefineConfig };
+export default useGlibViteDefineConfig;

package/plugins/vuetify.js

@@ -11,6 +11,17 @@ const opts = {
     // blueprint: md3,
     components,
     // directives,
+    date: {
+        formats: {
+            glibDate: (d) => {
+                const yyyy = d.getFullYear();
+                const mm = String(d.getMonth() + 1).padStart(2, "0");
+                const dd = String(d.getDate()).padStart(2, "0");
+
+                return `${yyyy} ${mm} ${dd}`;
+            }
+        }
+    },
     icons: {
         defaultSet: 'md',
         aliases,
@@ -24,4 +35,4 @@ const opts = {
     }
 };
 
-export default new createVuetify(opts);
+export default new createVuetify(opts);

package/utils/type.js

@@ -1,4 +1,4 @@
-import Hash from "./hash";
+import Hash from "./hash.js";
 
 export function isObject(obj) {
   return typeof obj === "object" && obj !== null;