@cloudparker/moldex.js 0.0.87 → 0.0.88

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

@@ -35,7 +35,7 @@ export declare function openAlertDialog(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, maxlength, maxlengthMsg, identityFieldName, titleFieldName, searchFieldName, subtitleFieldName, ...params }: DialogProps & PickerDialogProps): Promise<R>;
+export declare function openPickerDialog<R>({ items, value, multiple, hasCheckbox, hasArrow, maxlength, maxlengthMsg, identityFieldName, titleFieldName, searchFieldName, subtitleFieldName, itemTileSnippet, ...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>;

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

@@ -81,7 +81,7 @@ export async function openDeleteConfirmDialog({ msg = 'Are you sure to delete?',
         ...params,
     });
 }
-export async function openPickerDialog({ items, value, multiple, hasCheckbox = true, hasArrow, maxlength, maxlengthMsg, identityFieldName, titleFieldName, searchFieldName, subtitleFieldName, ...params }) {
+export async function openPickerDialog({ items, value, multiple, hasCheckbox = true, hasArrow, maxlength, maxlengthMsg, identityFieldName, titleFieldName, searchFieldName, subtitleFieldName, itemTileSnippet, ...params }) {
     if (hasArrow) {
         multiple = false;
         hasCheckbox = false;
@@ -100,6 +100,7 @@ export async function openPickerDialog({ items, value, multiple, hasCheckbox = t
             titleFieldName,
             searchFieldName,
             subtitleFieldName,
+            itemTileSnippet,
         },
         hasHeader: true,
         hasTitle: true,

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

@@ -1,8 +1,12 @@
 <script lang="ts" module></script>
 
-<script lang="ts">import { showToast } from "../../../../../services";
+<script lang="ts">import { DialogSizeEnum, getDialogSize, 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";
+import { onMount } from "svelte";
+import Icon from "../../../icon/components/icon/icon.svelte";
+import { mdiCheckCircle, mdiCheckCircleOutline, mdiChevronRight } from "../../../icon";
+import { SvelteSet } from "svelte/reactivity";
 let {
   value,
   items = [],
@@ -15,13 +19,23 @@ let {
   hasArrow,
   maxlength = 0,
   maxlengthMsg = "Selection limit reached!",
+  checkboxIconPath = mdiCheckCircle,
+  uncheckboxIconPath = mdiCheckCircleOutline,
+  arrowIconPath = mdiChevronRight,
+  checkboxIconClassName = "",
+  uncheckboxIconClassName = "",
+  arrowClassName = "",
+  checkboxClassName = "",
+  itemTileSnippet,
   closeDialog,
   setResult,
   setOnOkClick,
   setHeaderSnippet,
   setDialogTitle
 } = $props();
-let selected = $state({ items: {} });
+let selectedSet = $state(
+  value ? new SvelteSet(Array.isArray(value) ? value : [value]) : new SvelteSet()
+);
 let searchText = $state("");
 let records = $derived.by(() => {
   if (items && typeof items[0] == "string") {
@@ -42,40 +56,29 @@ let filteredRecords = $derived.by(() => {
   }
   return records;
 });
-$effect(() => {
-  if (value) {
-    if (Array.isArray(value)) {
-      value.forEach((val) => selected.items[val] = val);
-    } else {
-      selected.items[value] = value;
-    }
-  }
-});
 function handleItemClick(ev, item, index) {
   let itemId = item[identityFieldName];
   if (!multiple) {
-    if (selected.items[itemId]) {
-      selected.items = {};
+    if (selectedSet.has(itemId)) {
+      selectedSet.delete(itemId);
+      setResult(void 0);
     } else {
-      selected.items = { [itemId]: itemId };
+      selectedSet.add(itemId);
+      setResult(itemId);
     }
-    let selectedItemId = Object.keys(selected.items)[0];
-    setResult(selectedItemId);
     closeDialog();
   } else {
-    if (selected.items[itemId]) {
-      delete selected.items[itemId];
+    if (selectedSet.has(itemId)) {
+      selectedSet.delete(itemId);
     } else {
-      let itemLength2 = Object.keys(selected.items).length;
-      if (maxlength > 0 && itemLength2 >= maxlength) {
+      if (selectedSet.size >= maxlength) {
         showToast({ msg: maxlengthMsg });
       } else {
-        selected.items[itemId] = itemId;
+        selectedSet.add(itemId);
       }
     }
-    let itemLength = Object.keys(selected.items).length;
-    if (itemLength) {
-      setDialogTitle(`Selected (${itemLength})`);
+    if (selectedSet.size) {
+      setDialogTitle(`Selected (${selectedSet.size})`);
     } else {
       setDialogTitle("");
     }
@@ -83,32 +86,63 @@ function handleItemClick(ev, item, index) {
 }
 function handleOkClick(ev) {
   if (multiple) {
-    closeDialog(Object.keys(selected.items));
+    closeDialog(Array.from(selectedSet));
   }
 }
 function handleSearch(txt) {
   searchText = txt;
 }
-setOnOkClick(handleOkClick);
-setHeaderSnippet(headerSnippet);
+onMount(() => {
+  setOnOkClick(handleOkClick);
+  setHeaderSnippet(headerSnippet);
+});
 </script>
 
 {#snippet headerSnippet()}
 	<ButtonSearch className="rounded-full !p-3 " onSearch={handleSearch} />
 {/snippet}
 
-<div class="mb-4">
+<div class="mb-4 min-h-80">
 	{#each filteredRecords as record, index}
-		{@const isSelected = !!selected.items[record[identityFieldName]]}
+		{@const isSelected = selectedSet.has(record[identityFieldName])}
 		<div>
-			<ButtonListItem
-				onClick={(ev) => handleItemClick(ev, record, index)}
-				title={record[titleFieldName]}
-				subtitle={record[subtitleFieldName || ''] || ''}
-				{hasCheckbox}
-				{hasArrow}
-				isChecked={isSelected}
-			/>
+			{#if itemTileSnippet}
+				<ButtonListItem onClick={(ev) => handleItemClick(ev, record, index)}>
+					{@render itemTileSnippet(record, index)}
+					{#if hasCheckbox}
+						<div>
+							<Icon
+								path={isSelected ? checkboxIconPath : uncheckboxIconPath}
+								className="w-5 h-5 {checkboxClassName} {isSelected
+									? `text-primary ${checkboxIconClassName}`
+									: `text-base-400 ${uncheckboxIconClassName}`}"
+							/>
+						</div>
+					{/if}
+
+					{#if hasArrow}
+						<div>
+							<Icon path={arrowIconPath} className="w-5 h-5 text-base-500 {arrowClassName}  " />
+						</div>
+					{/if}
+				</ButtonListItem>
+			{:else}
+				<ButtonListItem
+					onClick={(ev) => handleItemClick(ev, record, index)}
+					title={record[titleFieldName]}
+					subtitle={record[subtitleFieldName || ''] || ''}
+					{hasCheckbox}
+					{hasArrow}
+					isChecked={isSelected}
+					{checkboxIconPath}
+					{uncheckboxIconPath}
+					{checkboxIconClassName}
+					{uncheckboxIconClassName}
+					{checkboxClassName}
+					{arrowIconPath}
+					{arrowClassName}
+				/>
+			{/if}
 		</div>
 	{/each}
 </div>

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

@@ -1,7 +1,7 @@
 export type PickerDialogProps = {
     items?: string[] | any[];
     multiple?: boolean;
-    value?: string | string[];
+    value?: any;
     identityFieldName?: string;
     titleFieldName?: string;
     searchFieldName?: string;
@@ -10,7 +10,16 @@ export type PickerDialogProps = {
     hasArrow?: boolean;
     maxlength?: number;
     maxlengthMsg?: string;
+    checkboxIconPath?: string;
+    uncheckboxIconPath?: string;
+    checkboxIconClassName?: string;
+    uncheckboxIconClassName?: string;
+    checkboxClassName?: string;
+    arrowIconPath?: string;
+    arrowClassName?: string;
+    itemTileSnippet?: Snippet<[item: any, index: number]>;
 };
+import { type Snippet } from 'svelte';
 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> & {

package/dist/views/core/icon/components/icon-circle/icon-circle.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import Icon from "../icon/icon.svelte";
-let { circleClassName, iconPath, iconClassName = "text-primary" } = $props();
+let { circleClassName, iconPath, iconClassName = "w-5 h-5 text-primary" } = $props();
 </script>
 
 <div
-	class="aspect-square bg-primary-100 rounded-full w-12 h-12 flex items-center justify-center {circleClassName}"
+	class="aspect-square bg-primary-100 rounded-full w-10 h-10 flex items-center justify-center {circleClassName}"
 >
 	<Icon path={iconPath!} className={iconClassName} />
 </div>

package/dist/views/core/input/components/combobox-field/combobox-field.svelte

@@ -2,11 +2,16 @@
 
 <script lang="ts">import ButtonListItem from "../../../button/components/button-list-item/button-list-item.svelte";
 import Button from "../../../button/components/button/button.svelte";
-import { mdiUnfoldMoreHorizontal } from "../../../icon";
+import {
+  mdiCheckCircle,
+  mdiCheckCircleOutline,
+  mdiUnfoldMoreHorizontal
+} from "../../../icon";
 import Icon from "../../../icon/components/icon/icon.svelte";
 import NoData from "../../../no-data/components/no-data/no-data.svelte";
 import InputField, {} from "../input-field/input-field.svelte";
 import SearchField from "../search-field/search-field.svelte";
+import { SvelteSet } from "svelte/reactivity";
 let {
   appearance,
   chipClassName,
@@ -54,11 +59,20 @@ let {
   titleClassName,
   titleFieldName = "name",
   value = $bindable(),
+  checkboxIconPath = mdiCheckCircle,
+  uncheckboxIconPath = mdiCheckCircleOutline,
+  checkboxIconClassName = "",
+  uncheckboxIconClassName = "",
+  checkboxClassName = "",
+  itemTileSnippet,
   ...props
 } = $props();
 let searchFieldRef = $state(null);
 let isPlaced = $state(false);
 let searchText = $state("");
+let selectedItemsSet = $state(
+  value ? new SvelteSet(Array.isArray(value) ? value : [value]) : new SvelteSet()
+);
 let comboboxIconSizeClassName = $derived.by(() => {
   if (size) {
     switch (size) {
@@ -120,17 +134,6 @@ let displayText = $derived.by(() => {
   }
   return "";
 });
-let selectedItemsSet = $derived.by(() => {
-  let set = /* @__PURE__ */ new Set();
-  if (value != null) {
-    if (Array.isArray(value)) {
-      value.forEach((v) => set.add(v));
-    } else if (value) {
-      set.add(value);
-    }
-  }
-  return set;
-});
 let preparedItems = $derived.by(() => {
   return (items || []).map((item, index) => {
     let res = {};
@@ -329,6 +332,7 @@ function handleItemClick(ev, item, index) {
 				{:else if filteredItems?.length}
 					<ul>
 						{#each filteredItems as item, index}
+							{@const isSelected = selectedItemsSet.has(item[identityFieldName])}
 							<li
 								class="select-none"
 								id="item-{index}"
@@ -336,16 +340,38 @@ function handleItemClick(ev, item, index) {
 								tabindex="-1"
 								aria-selected={item.isChecked}
 							>
-								<ButtonListItem
-									title={item[titleFieldName] || ''}
-									subtitle={item[subtitleFieldName || ''] || ''}
-									{index}
-									{hasCheckbox}
-									className=" {itemClassName}"
-									titleClassName=" {titleClassName}"
-									subtitleClassName=" {subtitleClassName}"
-									onClick={(ev) => handleItemClick(ev, item, index)}
-								/>
+								{#if itemTileSnippet}
+									<ButtonListItem onClick={(ev) => handleItemClick(ev, item, index)}>
+										{@render itemTileSnippet(item, index)}
+										{#if hasCheckbox}
+											<div>
+												<Icon
+													path={isSelected ? checkboxIconPath : uncheckboxIconPath}
+													className="w-5 h-5 {checkboxClassName} {isSelected
+														? `text-primary ${checkboxIconClassName}`
+														: `text-base-400 ${uncheckboxIconClassName}`}"
+												/>
+											</div>
+										{/if}
+									</ButtonListItem>
+								{:else}
+									<ButtonListItem
+										title={item[titleFieldName] || ''}
+										subtitle={item[subtitleFieldName || ''] || ''}
+										{index}
+										{hasCheckbox}
+										className=" {itemClassName}"
+										titleClassName=" {titleClassName}"
+										subtitleClassName=" {subtitleClassName}"
+										isChecked={isSelected}
+										{checkboxIconPath}
+										{uncheckboxIconPath}
+										{checkboxIconClassName}
+										{uncheckboxIconClassName}
+										{checkboxClassName}
+										onClick={(ev) => handleItemClick(ev, item, index)}
+									/>
+								{/if}
 							</li>
 						{/each}
 					</ul>

package/dist/views/core/input/components/combobox-field/combobox-field.svelte.d.ts

@@ -38,6 +38,12 @@ export type ComboboxFieldProps = {
     subtitleFieldName?: string;
     titleClassName?: string;
     titleFieldName?: string;
+    checkboxIconPath?: string;
+    uncheckboxIconPath?: string;
+    checkboxIconClassName?: string;
+    uncheckboxIconClassName?: string;
+    checkboxClassName?: string;
+    itemTileSnippet?: Snippet<[item: any, index: any]>;
 };
 import type { Snippet } from 'svelte';
 import { type InputFieldProps } from '../input-field/input-field.svelte';

package/dist/views/core/input/components/phone-field/phone-field.svelte

@@ -1,9 +1,9 @@
 <script module lang="ts"></script>
 
 <script lang="ts">import { ripple } from "../../../../../actions";
+import { getDialogSize, openPickerDialog } from "../../../../../services";
 import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
 import InputField, {} from "../input-field/input-field.svelte";
-import { isMobileScreen, openPickerDialog } from "../../../../../services";
 let {
   id,
   name,
@@ -60,18 +60,15 @@ function formatDialCode(dialcode) {
   }
   return dialcode;
 }
-async function hanleDialCodePicker() {
+async function handleDialCodePicker() {
   if (EasyCountryData) {
     let items = EasyCountryData.getCountries();
-    let size2 = isMobileScreen() ? "full" : "sm";
+    let size2 = getDialogSize();
     let res = await openPickerDialog({
-      items
-      // itemTitle: 'dialCode',
-      // itemSubtitle: 'name',
-      // size,
-      // hasCheck: true,
-      // identity: 'dialCode',
-      // search: ['name', 'dialCode', 'isoCode']
+      value: dialCode,
+      items,
+      identityFieldName: "dialCode",
+      itemTileSnippet: dialCodePickerItemTile
     });
     console.log(res);
     if (res) {
@@ -118,13 +115,22 @@ function handleNumberKeyDown(ev) {
 }
 </script>
 
-{#snippet showPasswordButton()}
+{#snippet dialCodePickerItemTile(item: any, index: number)}
+	<div class="w-14 text-sm font-bold text-base">
+		{item.dialCode}
+	</div>
+	<div class="flex-grow">
+		{item.name}
+	</div>
+{/snippet}
+
+{#snippet showDialCodeButton()}
 	<button
 		id="btn-dialcode-picker-{name || id}"
 		type="button"
 		class="w-16 h-full hover:bg-gray-100 font-bold text-gray-400 focus:outline-primary {btnRoundedClassName} {buttonClassName}"
 		use:ripple
-		onclick={hanleDialCodePicker}
+		onclick={handleDialCodePicker}
 	>
 		{_dailCode}
 	</button>
@@ -150,7 +156,7 @@ function handleNumberKeyDown(ev) {
 	{id}
 	{name}
 	maxlength={props?.maxlength || 12}
-	leftSnippet={showPasswordButton}
+	leftSnippet={showDialCodeButton}
 	{size}
 	{appearance}
 	{floatingLabel}

package/package.json

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