Merge branch 'develop-minor' into v6/develop

Author: distantnative

panel/lab/internals/helpers/object/index.php

@@ -1,5 +1,5 @@
 <?php
 
 return [
-	'source' => 'panel/src/helpers/object.js'
+	'source' => 'panel/src/helpers/object.ts'
 ];

panel/lab/internals/helpers/string/index.php

@@ -1,5 +1,5 @@
 <?php
 
 return [
-	'source' => 'panel/src/helpers/string.js'
+	'source' => 'panel/src/helpers/string.ts'
 ];

panel/src/api/request.js

@@ -1,5 +1,5 @@
 import { responder, safeFetch } from "@/panel/request.js";
-import { toLowerKeys } from "@/helpers/object.js";
+import { toLowerKeys } from "@/helpers/object";
 import { ltrim, rtrim } from "@/helpers/string";
 
 export default (api) => {

panel/src/components/Dialogs/Elements/Buttons.vue

@@ -6,8 +6,6 @@
 </template>
 
 <script>
-import { isObject } from "@/helpers/object.js";
-
 export const props = {
 	props: {
 		/**
@@ -94,7 +92,7 @@ export default {
 				return false;
 			}
 
-			if (isObject(button) === false) {
+			if (this.$helper.object.isObject(button) === false) {
 				return defaults;
 			}
 

panel/src/helpers/field.test.js panel/src/helpers/field.test.tspanel/src/helpers/field.test.js renamed to panel/src/helpers/field.test.ts

@@ -2,6 +2,8 @@ import { describe, expect, it } from "vitest";
 import { form } from "./field";
 
 describe.concurrent("$helper.field.form()", () => {
+	// TODO: Remove once window.panel is globally typed
+	// @ts-expect-error - window.panel is not typed yet
 	// mock the app with the component setup
 	window.panel = {
 		app: {

panel/src/helpers/field.js panel/src/helpers/field.tspanel/src/helpers/field.js renamed to panel/src/helpers/field.ts

@@ -1,17 +1,22 @@
-import { clone } from "./object.js";
+import { clone } from "./object";
+
+type Field = Record<string, unknown>;
 
 /**
  * Loads the default value for a field definition
  * @unstable
  *
- * @param {Object} field
- * @returns {mixed}
+ * @example
+ * defaultValue({ type: "text", default: "Hello" }) // => "Hello"
+ * defaultValue({ type: "text" }) // => null
  */
-export function defaultValue(field) {
+export function defaultValue(field: Field): unknown {
 	if (field.default !== undefined) {
 		return clone(field.default);
 	}
 
+	// TODO: Remove once window.panel is globally typed
+	// @ts-expect-error - window.panel has no type yet
 	const component = window.panel.app.component(`k-${field.type}-field`);
 	const valueProp = component?.props?.value;
 
@@ -39,11 +44,12 @@ export function defaultValue(field) {
  * Creates form values for provided fields
  * @unstable
  *
- * @param {Object} fields
- * @returns {Object}
+ * @example
+ * form({ title: { type: "text", default: "Hello" }, age: { type: "number" } })
+ * // => { title: "Hello" }
  */
-export function form(fields) {
-	const form = {};
+export function form(fields: Record<string, Field>): Record<string, unknown> {
+	const form: Record<string, unknown> = {};
 
 	for (const fieldName in fields) {
 		const defaultVal = defaultValue(fields[fieldName]);
@@ -61,11 +67,17 @@ export function form(fields) {
  * and the current form values. Also works for sections.
  * @unstable
  *
- * @param {Object} field - The form field object
- * @param {Object} values - The current form values object
- * @returns {boolean} - Whether the field is visible or not
+ * @example
+ * isVisible({ type: "text", when: { status: "draft" } }, { status: "draft" }) // => true
+ * isVisible({ type: "text", when: { status: "draft" } }, { status: "published" }) // => false
+ *
+ * @param field - The form field object
+ * @param values - The current form values object
  */
-export function isVisible(field, values) {
+export function isVisible(
+	field: Field,
+	values: Record<string, unknown>
+): boolean {
 	if (field.type === "hidden" || field.hidden === true) {
 		return false;
 	}
@@ -74,9 +86,11 @@ export function isVisible(field, values) {
 		return true;
 	}
 
-	for (const key in field.when) {
+	const when = field.when as Record<string, unknown>;
+
+	for (const key in when) {
 		const value = values[key.toLowerCase()];
-		const condition = field.when[key];
+		const condition = when[key];
 
 		// if condition is checking for empty field
 		if (
@@ -98,24 +112,29 @@ export function isVisible(field, values) {
  * Adds proper endpoint and section definitions
  * to subfields for a form field.
  * @unstable
- *
- * @param {object} field
- * @param {object} fields
- * @returns {object}
  */
-export function subfields(field, fields) {
-	let subfields = {};
+export function subfields(
+	field: Field,
+	fields: Record<string, Field>
+): Record<string, Field> {
+	const subfields: Record<string, Field> = {};
 
 	for (const name in fields) {
 		const subfield = fields[name];
 
 		subfield.section = field.name;
 
 		if (field.endpoints) {
+			const endpoints = field.endpoints as {
+				field: string;
+				section: string;
+				model: string;
+			};
+
 			subfield.endpoints = {
-				field: field.endpoints.field + "+" + name,
-				section: field.endpoints.section,
-				model: field.endpoints.model
+				field: endpoints.field + "+" + name,
+				section: endpoints.section,
+				model: endpoints.model
 			};
 		}
 

panel/src/helpers/file.test.js panel/src/helpers/file.test.tspanel/src/helpers/file.test.js renamed to panel/src/helpers/file.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { extension, name } from "./file";
+import { extension, name, niceSize } from "./file";
 
 describe.concurrent("$helper.file.extension()", () => {
 	it("returns the extension of a filename", () => {
@@ -16,3 +16,11 @@ describe.concurrent("$helper.file.name()", () => {
 		expect(name("file")).toBe("");
 	});
 });
+
+describe.concurrent("$helper.file.niceSize()", () => {
+	it("formats bytes", () => {
+		expect(niceSize(0)).toBe("0B");
+		expect(niceSize(1024)).toBe("1KB");
+		expect(niceSize(1048576)).toBe("1MB");
+	});
+});

panel/src/helpers/file.js panel/src/helpers/file.tspanel/src/helpers/file.js renamed to panel/src/helpers/file.ts

@@ -1,30 +1,31 @@
 /**
  * Extracts the extension
  *
- * @param {String} filename
- * @returns {String}
+ * @example
+ * extension("image.jpg") // => "jpg"
  */
-export const extension = (filename) => {
+export function extension(filename: string): string {
 	return filename.split(".").slice(-1).join("");
-};
+}
 
 /**
  * Extracts the name without extension
  *
- * @param {String} filename
- * @returns {String}
+ * @example
+ * name("image.jpg") // => "image"
  */
-export const name = (filename) => {
+export function name(filename: string): string {
 	return filename.split(".").slice(0, -1).join(".");
-};
+}
 
 /**
  * Creates a nice human-readable file size string with size unit
  *
- * @param {Number} size
- * @returns {String}
+ * @example
+ * niceSize(1024) // => "1KB"
+ * niceSize(1048576) // => "1MB"
  */
-export const niceSize = (size) => {
+export function niceSize(size: number): string {
 	const formatter = Intl.NumberFormat("en", {
 		notation: "compact",
 		style: "unit",
@@ -33,7 +34,7 @@ export const niceSize = (size) => {
 	});
 
 	return formatter.format(size);
-};
+}
 
 export default {
 	extension,

panel/src/helpers/index.js

@@ -3,18 +3,18 @@ import clipboard from "./clipboard.js";
 import color from "./color.js";
 import debounce from "./debounce";
 import embed from "./embed";
-import field from "./field.js";
+import field from "./field";
 import file from "./file.js";
 import focus from "./focus.js";
 import isComponent from "./isComponent";
 import isUploadEvent from "./isUploadEvent";
 import keyboard from "./keyboard";
 import link from "./link.js";
-import object from "./object.js";
+import object from "./object";
 import page from "./page.js";
 import ratio from "./ratio.js";
 import sort from "./sort.js";
-import string from "./string.js";
+import string from "./string";
 import throttle from "./throttle";
 import upload from "./upload.js";
 import url from "./url.js";

panel/src/helpers/link.test.js

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { length } from "./object.js";
+import { length } from "./object";
 import link from "./link.js";
 
 // mock $t() function