@cloudparker/moldex.js 0.0.68 → 0.0.70

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

@@ -23,10 +23,10 @@ export declare function openConfirmDialog(params?: DialogProps & {
 export declare function openAlertDialog(params?: DialogProps & {
     msg?: string;
 }): Promise<unknown>;
-export declare function openDeleteConfirmDialog(params?: DialogProps & {
+export declare function openDeleteConfirmDialog({ msg, title, footerOkButtonLable, footerOkButtonClassName, ...params }?: DialogProps & {
     msg?: string;
 }): Promise<unknown>;
-export declare function openPickerDialog<R>({ items, value, multiple, hasCheckbox, hasArrow, ...params }: DialogProps & PickerDialogProps): Promise<R>;
+export declare function openPickerDialog<R>({ items, value, multiple, hasCheckbox, hasArrow, maxlength, maxlengthMsg, identityFieldName, titleFieldName, searchFieldName, subtitleFieldName, ...params }: DialogProps & PickerDialogProps): Promise<R>;
 export declare function openTextFieldDialog({ title, value, label, name, maxlength, fieldClassName, autofocus, required, appearance, size, floatingLabel, ...params }?: DialogProps & InputFieldProps & {
     fieldClassName?: string;
 }): Promise<unknown>;
@@ -52,6 +52,7 @@ export declare function openLoadingDialog({ msg, loadingDialogContainerClassName
     postData: (data: any) => void;
     setHeaderSnippet: (snippet: import("svelte").Snippet) => void;
     setFooterSnippet: (snippet: import("svelte").Snippet) => void;
+    setDialogTitle: (dialogTitle: string) => void;
 } & {
     $set?: any;
     $on?: any;

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

@@ -62,15 +62,16 @@ export async function openAlertDialog(params = {}) {
         footerCloseButtonLabel: 'OK'
     });
 }
-export async function openDeleteConfirmDialog(params = {}) {
+export async function openDeleteConfirmDialog({ msg = 'Are you sure to delete?', title = 'Delete', footerOkButtonLable = 'Delete', footerOkButtonClassName = 'bg-red-500 hover:bg-red-700 focus:bg-red-700', ...params } = {}) {
     return await openConfirmDialog({
-        msg: 'Are you sure to delete?',
-        title: 'Delete',
-        footerOkButtonLable: 'Delete',
-        footerOkButtonClassName: 'bg-red-500 hover:bg-red-700 focus:bg-red-700'
+        msg,
+        title,
+        footerOkButtonLable,
+        footerOkButtonClassName,
+        ...params,
     });
 }
-export async function openPickerDialog({ items, value, multiple, hasCheckbox = true, hasArrow, ...params }) {
+export async function openPickerDialog({ items, value, multiple, hasCheckbox = true, hasArrow, maxlength, maxlengthMsg, identityFieldName, titleFieldName, searchFieldName, subtitleFieldName, ...params }) {
     if (hasArrow) {
         multiple = false;
         hasCheckbox = false;
@@ -83,13 +84,20 @@ export async function openPickerDialog({ items, value, multiple, hasCheckbox = t
             multiple,
             hasCheckbox,
             hasArrow,
+            maxlength,
+            maxlengthMsg,
+            identityFieldName,
+            titleFieldName,
+            searchFieldName,
+            subtitleFieldName,
         },
         hasHeader: true,
+        hasTitle: true,
         hasHeaderBack: isMobileScreen(),
         hasHeaderClose: !isMobileScreen(),
         footerOkButtonLable: 'Select',
         footerClassName: 'border-t',
-        title: 'Picker',
+        title: 'Pick',
         ...params,
         hasFooter: multiple,
         hasFooterOkButton: multiple,

package/dist/views/core/button/components/button/button.svelte

@@ -5,6 +5,7 @@ import { Icon, mdiOpenInNew } from "../../../icon";
 import { Spinner } from "../../../spinner";
 import "../../../../../tailwind.css";
 let {
+  title,
   appearance = "none",
   id = "",
   form = void 0,
@@ -117,6 +118,7 @@ function handleRipple(node, options) {
 		ondragenter={onDragEnter}
 		ondragleave={onDragLeave}
 		ondragover={onDragOver}
+		{title}
 	>
 		{#if children}
 			{@render children()}
@@ -132,6 +134,7 @@ function handleRipple(node, options) {
 		{id}
 		{type}
 		{form}
+		{title}
 		class="relative flex items-center justify-center gap-2 focus:outline-primary dark:focus:outline-primary rounded {btnSizeClassName} {btnAppearanceClassName} {className}"
 		{disabled}
 		use:handleRipple

package/dist/views/core/button/components/button/button.svelte.d.ts

@@ -2,6 +2,7 @@ export type ButtonAppearance = 'none' | 'primary' | 'base' | 'border' | 'border-
 export type ButtonSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type ButtonType = 'button' | 'submit' | 'reset';
 export type ButtonProps = {
+    title?: string;
     id?: string;
     type?: ButtonType;
     appearance?: ButtonAppearance;

package/dist/views/core/button/components/button-dropdown/button-dropdown.svelte

@@ -23,7 +23,9 @@ let {
   containerClassName = "",
   dropdownClassName = "",
   dropdownCloseClassName = "",
-  dropdownOpenClassName = ""
+  dropdownOpenClassName = "",
+  disabled,
+  ...others
 } = $props();
 let placement = $state(false);
 let dropdownState = $state(3 /* CLOSED */);
@@ -59,6 +61,8 @@ function handleBackdropEvent(ev) {
 		onClick={handleToggleDropdown}
 		{label}
 		{children}
+		{disabled}
+		{...others}
 	/>
 
 	{#if placement}

package/dist/views/core/button/components/button-dropdown/button-dropdown.svelte.d.ts

@@ -12,10 +12,11 @@ export type ButtonDropdownProps = {
     dropdownClassName?: string;
     dropdownCloseClassName?: string;
     dropdownOpenClassName?: string;
+    disabled?: boolean;
 };
 import '../../../../../tailwind.css';
 import type { Snippet } from 'svelte';
-import { type ButtonAppearance, type ButtonSize, type ButtonType } from '../button/button.svelte';
+import { type ButtonAppearance, type ButtonProps, type ButtonSize, type ButtonType } from '../button/button.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;
@@ -29,7 +30,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ButtonDropdown: $$__sveltets_2_IsomorphicComponent<ButtonDropdownProps, {
+declare const ButtonDropdown: $$__sveltets_2_IsomorphicComponent<ButtonProps & ButtonDropdownProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     toggleDropdown: (ev: MouseEvent) => void;

package/dist/views/core/button/components/button-menu/button-menu.svelte

@@ -15,7 +15,9 @@ let {
   menus,
   onMenu,
   dropdownClassName,
-  menuIconClassName
+  menuIconClassName,
+  disabled,
+  ...others
 } = $props();
 let buttonDropdownRef;
 let items = $derived.by(() => {
@@ -63,6 +65,8 @@ function handleItemClick(ev, menuItem, index) {
 	{appearance}
 	{size}
 	{dropdownClassName}
+	{disabled}
+	{...others}
 >
 	{#if children}
 		{@render children()}

package/dist/views/core/button/components/button-menu/button-menu.svelte.d.ts

@@ -9,7 +9,7 @@ export type Menu = {
     checkboxClassName?: string;
     isChecked?: boolean;
 };
-import { type ButtonAppearance, type ButtonSize } from '../../../../..';
+import { type ButtonAppearance, type ButtonProps, type ButtonSize } from '../../../../..';
 import type { Snippet } from '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> & {
@@ -24,7 +24,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ButtonMenu: $$__sveltets_2_IsomorphicComponent<{
+declare const ButtonMenu: $$__sveltets_2_IsomorphicComponent<ButtonProps & {
     label?: string;
     className?: string;
     appearance?: ButtonAppearance;
@@ -36,6 +36,7 @@ declare const ButtonMenu: $$__sveltets_2_IsomorphicComponent<{
     onMenu?: (ev: MouseEvent, menu: string | Menu) => void;
     dropdownClassName?: string;
     menuIconClassName?: string;
+    disabled?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;

package/dist/views/core/button/components/button-search/button-search.svelte

@@ -14,7 +14,8 @@ let {
   size,
   children,
   iconClassName,
-  dropdownClassName
+  dropdownClassName,
+  ...others
 } = $props();
 </script>
 
@@ -30,7 +31,14 @@ let {
 	</div>
 {/snippet}
 
-<ButtonDropdown dropdownSnippet={dropdownSearch} {className} {appearance} {size} {dropdownClassName}>
+<ButtonDropdown
+	dropdownSnippet={dropdownSearch}
+	{className}
+	{appearance}
+	{size}
+	{dropdownClassName}
+	{...others}
+>
 	{#if children}
 		{@render children()}
 	{:else}

package/dist/views/core/button/components/button-search/button-search.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonAppearance, type ButtonSize, type InputFieldAppearance, type InputFieldSize } from '../../../../..';
+import { type ButtonAppearance, type ButtonProps, type ButtonSize, type InputFieldAppearance, type InputFieldSize } from '../../../../..';
 import type { Snippet } from '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> & {
@@ -13,7 +13,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ButtonSearch: $$__sveltets_2_IsomorphicComponent<{
+declare const ButtonSearch: $$__sveltets_2_IsomorphicComponent<ButtonProps & {
     searchAppearance?: InputFieldAppearance;
     searchClassName?: string;
     searchSize?: InputFieldSize;

package/dist/views/core/dialog/components/dialog/dialog.svelte

@@ -12,6 +12,7 @@ let {
   bodyClassName = "",
   bodyComponent,
   cancelable = true,
+  scrollable = true,
   children,
   className = "",
   component,
@@ -64,14 +65,15 @@ let dialogExports = {
   setOnOkClick,
   setOnData,
   setHeaderSnippet,
-  setFooterSnippet
+  setFooterSnippet,
+  setDialogTitle
 };
 let isPlaced = $state(false);
 let isOpened = $state(false);
 let headerSnippet = $state(null);
 let footerSnippet = $state(null);
-let CustomComponent = $state(null);
-let BodyComponent = $state(null);
+let CustomComponent = $derived(component);
+let BodyComponent = $derived(bodyComponent);
 let result;
 let xsSizeClassName = "w-64";
 let smSizeClassName = "w-96";
@@ -87,6 +89,7 @@ let screenSizeClassNameMap = {
   xl: xlSizeClassName,
   full: fullSizeClassName
 };
+let customTitle = $state("");
 export function toggleDialog() {
   if (isOpened) {
     closeDialog();
@@ -138,6 +141,9 @@ export function setHeaderSnippet(snippet) {
 export function setFooterSnippet(snippet) {
   footerSnippet = snippet;
 }
+export function setDialogTitle(dialogTitle) {
+  customTitle = dialogTitle;
+}
 function handleBackdropClick() {
   if (cancelable) {
     closeDialog();
@@ -165,12 +171,6 @@ function handleOkClick(event) {
     onOkClick(event, dialogExports);
   }
 }
-$effect(() => {
-  BodyComponent = bodyComponent;
-});
-$effect(() => {
-  CustomComponent = component;
-});
 </script>
 
 {#snippet dialogContent()}
@@ -209,7 +209,7 @@ $effect(() => {
 					<div class="py-2 flex-grow">
 						{#if hasTitle}
 							<div class="text-xl text-base-800 dark:text-base-300 {titleClassName}">
-								{title || ''}
+								{@html customTitle || title || ''}
 							</div>
 						{/if}
 						{#if hasSubtitle}
@@ -236,7 +236,7 @@ $effect(() => {
 				</div>
 			{/if}
 
-			<div class="flex-grow overflow-y-auto {bodyClassName}">
+			<div class="flex-grow {scrollable ? 'overflow-y-auto' : ''} {bodyClassName}">
 				{#if children}
 					{@render children()}
 				{:else if BodyComponent?.length == 2}

package/dist/views/core/dialog/components/dialog/dialog.svelte.d.ts

@@ -10,6 +10,7 @@ export type DialogProps = {
     bodyClassName?: string;
     bodyComponent?: any;
     cancelable?: boolean;
+    scrollable?: boolean;
     children?: Snippet;
     className?: string;
     component?: any;
@@ -63,6 +64,7 @@ export type DialogExports = {
     setOnData: (listener: (data: any) => void) => void;
     setHeaderSnippet: (snippet: Snippet) => void;
     setFooterSnippet: (snippet: Snippet) => void;
+    setDialogTitle: (title: string) => void;
 };
 import { type Snippet } from 'svelte';
 import '../../../../../tailwind.css';
@@ -94,6 +96,7 @@ declare const Dialog: $$__sveltets_2_IsomorphicComponent<DialogProps, {
     postData: (data: any) => void;
     setHeaderSnippet: (snippet: Snippet) => void;
     setFooterSnippet: (snippet: Snippet) => void;
+    setDialogTitle: (dialogTitle: string) => void;
 }, "">;
 type Dialog = InstanceType<typeof Dialog>;
 export default Dialog;

package/dist/views/core/dialog/components/picker-dialog/picker-dialog.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" module></script>
 
-<script lang="ts">import ButtonListItem from "../../../button/components/button-list-item/button-list-item.svelte";
+<script lang="ts">import { showToast } from "../../../../../services";
+import ButtonListItem from "../../../button/components/button-list-item/button-list-item.svelte";
 import ButtonSearch from "../../../button/components/button-search/button-search.svelte";
 let {
   value,
@@ -12,10 +13,13 @@ let {
   searchFieldName = "name",
   hasCheckbox,
   hasArrow,
+  maxlength = 0,
+  maxlengthMsg = "Selection limit reached!",
   closeDialog,
   setResult,
   setOnOkClick,
-  setHeaderSnippet
+  setHeaderSnippet,
+  setDialogTitle
 } = $props();
 let selected = $state({ items: {} });
 let searchText = $state("");
@@ -62,7 +66,18 @@ function handleItemClick(ev, item, index) {
     if (selected.items[itemId]) {
       delete selected.items[itemId];
     } else {
-      selected.items[itemId] = itemId;
+      let itemLength2 = Object.keys(selected.items).length;
+      if (maxlength > 0 && itemLength2 >= maxlength) {
+        showToast({ msg: maxlengthMsg });
+      } else {
+        selected.items[itemId] = itemId;
+      }
+    }
+    let itemLength = Object.keys(selected.items).length;
+    if (itemLength) {
+      setDialogTitle(`Selected (${itemLength})`);
+    } else {
+      setDialogTitle("");
     }
   }
 }

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

@@ -7,13 +7,9 @@ export type PickerDialogProps = {
     searchFieldName?: string;
     subtitleFieldName?: string;
     hasCheckbox?: boolean;
-    checkboxCheckIconPath?: string;
-    checkboxUncheckIconPath?: string;
-    checkboxCheckIconClassName?: string;
-    checkboxUncheckIconClassName?: string;
     hasArrow?: boolean;
-    arrowIconPath?: string;
-    arrowIconClassName?: string;
+    maxlength?: number;
+    maxlengthMsg?: string;
 };
 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> {

package/package.json

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