@cloudparker/moldex.js 0.0.80 → 0.0.82

package/dist/services/dialog/dialog-service.d.ts

@@ -27,6 +27,9 @@ export declare function openDeleteConfirmDialog({ msg, title, footerOkButtonLabl
     msg?: string;
 }): Promise<unknown>;
 export declare function openPickerDialog<R>({ items, value, multiple, hasCheckbox, hasArrow, maxlength, maxlengthMsg, identityFieldName, titleFieldName, searchFieldName, subtitleFieldName, ...params }: DialogProps & PickerDialogProps): Promise<R>;
+export declare function openNumberFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, ...params }?: DialogProps & InputFieldProps & {
+    fieldClassName?: string;
+}): Promise<unknown>;
 export declare function openTextFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, ...params }?: DialogProps & InputFieldProps & {
     fieldClassName?: string;
 }): Promise<unknown>;

package/dist/services/dialog/dialog-service.js

@@ -8,6 +8,7 @@ import { isMobileScreen } from '../screen/screen-service';
 import CropperDialog, {} from '../../views/core/dialog/components/cropper-dialog/cropper-dialog.svelte';
 import { processImageFile } from '../utils/image-service';
 import PickerDialog from '../../views/core/dialog/components/picker-dialog/picker-dialog.svelte';
+import NumberFieldDialog from '../../views/core/dialog/components/number-field-dialog/number-field-dialog.svelte';
 function addDialog(props) {
     const dialog = mount(Dialog, { target: document.getElementsByTagName('body')[0], props });
     return dialog;
@@ -104,6 +105,24 @@ export async function openPickerDialog({ items, value, multiple, hasCheckbox = t
         hasFooterCloseButton: multiple,
     });
 }
+export async function openNumberFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, ...params } = {}) {
+    return await openDialog({
+        bodyComponent: NumberFieldDialog,
+        props: { value, label, name, maxlength, className: fieldClassName, autofocus, required, appearance, size, floatingLabel, },
+        ...params,
+        hasHeader: true,
+        hasHeaderBack: isMobileScreen(),
+        hasHeaderClose: !isMobileScreen(),
+        size: isMobileScreen() ? 'full' : 'sm',
+        hasTitle: true,
+        title: title || 'Prompt',
+        hasFooter: true,
+        hasFooterCloseButton: true,
+        hasFooterOkButton: true,
+        footerOkButtonType: 'submit',
+        targetFormId: 'number-field-dialog-form'
+    });
+}
 export async function openTextFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, ...params } = {}) {
     return await openDialog({
         bodyComponent: TextFieldDialog,

package/dist/services/utils/utils-service.d.ts

@@ -255,3 +255,4 @@ export declare function inchToPixel(inches: number): number;
  * console.log(inches); // Output: 1
  */
 export declare function pixelToInch(pixels: number): number;
+export declare function alphabetNanoid(length?: number, lowercase?: boolean): string;

package/dist/services/utils/utils-service.js

@@ -1,4 +1,5 @@
 import { toDate } from '../date/date-service';
+import { customAlphabet } from 'nanoid';
 /**
  * Generates a random number between the specified minimum and maximum values (inclusive of the minimum and exclusive of the maximum).
  *
@@ -394,3 +395,11 @@ export function pixelToInch(pixels) {
     const DPI = 96; // Default DPI for screen resolution
     return pixels / DPI;
 }
+export function alphabetNanoid(length = 10, lowercase = false) {
+    let alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i)).join('');
+    if (lowercase) {
+        alphabet = alphabet.toLowerCase();
+    }
+    const nanoid = customAlphabet(alphabet, length);
+    return nanoid();
+}

package/dist/views/core/dialog/components/number-field-dialog/number-field-dialog.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">import { showToast } from "../../../../../services";
+import NumberField from "../../../input/components/number-field/number-field.svelte";
+let {
+  value = $bindable(0),
+  label,
+  name,
+  maxlength,
+  className,
+  autofocus,
+  required,
+  setOnOkClick,
+  setResult,
+  closeDialog,
+  ...props
+} = $props();
+let _value = $state(value || 0);
+function handleSubmit(ev) {
+  ev?.preventDefault();
+  _value = _value || 0;
+  if (required) {
+    showToast({ msg: "This is a required field!" });
+  } else {
+    setResult(_value);
+    closeDialog();
+  }
+}
+</script>
+
+<div class="p-6">
+	<form id="number-field-dialog-form" onsubmit={handleSubmit}>
+		<NumberField
+			{...props}
+			{label}
+			{name}
+			{maxlength}
+			{className}
+			{autofocus}
+			{required}
+			bind:value={_value}
+		/>
+	</form>
+</div>

package/dist/views/core/dialog/components/number-field-dialog/number-field-dialog.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { DialogExports } from '../dialog/dialog.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NumberFieldDialog: $$__sveltets_2_IsomorphicComponent<{
+    value?: number;
+    label?: string;
+    name?: string;
+    maxlength?: number;
+    className?: string;
+    autofocus?: boolean;
+    required?: boolean;
+} & DialogExports, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type NumberFieldDialog = InstanceType<typeof NumberFieldDialog>;
+export default NumberFieldDialog;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "0.0.80",
+    "version": "0.0.82",
     "author": "cloudparker.com",
     "license": "MIT",
     "keywords": [