@cloudparker/moldex.js 4.1.7 → 4.1.8

package/dist/views/core/input/index.d.ts

@@ -0,0 +1,20 @@
+import CheckboxField from "./components/checkbox-field/checkbox-field.svelte";
+import ColorField from "./components/color-field/color-field.svelte";
+import ComboboxField from "./components/combobox-field/combobox-field.svelte";
+import DateField from "./components/date-field/date-field.svelte";
+import DatetimeField from "./components/datetime-field/datetime-field.svelte";
+import EmailField from "./components/email-field/email-field.svelte";
+import FileField from "./components/file-field/file-field.svelte";
+import InputField from "./components/input-field/input-field.svelte";
+import Label from "./components/label/label.svelte";
+import NumberField from "./components/number-field/number-field.svelte";
+import PasswordField from "./components/password-field/password-field.svelte";
+import PhoneField from "./components/phone-field/phone-field.svelte";
+import RadioField from "./components/radio-field/radio-field.svelte";
+import RangeField from "./components/range-field/range-field.svelte";
+import SearchField from "./components/search-field/search-field.svelte";
+import TextField from "./components/text-field/text-field.svelte";
+import TextareaField from "./components/textarea-field/textarea-field.svelte";
+import TimeField from "./components/time-field/time-field.svelte";
+export * from './types';
+export { CheckboxField, ColorField, ComboboxField, DateField, DatetimeField, EmailField, FileField, InputField, Label, NumberField, PasswordField, PhoneField, RadioField, RangeField, SearchField, TextareaField, TextField, TimeField };

package/dist/views/core/input/index.js

@@ -0,0 +1,20 @@
+import CheckboxField from "./components/checkbox-field/checkbox-field.svelte";
+import ColorField from "./components/color-field/color-field.svelte";
+import ComboboxField from "./components/combobox-field/combobox-field.svelte";
+import DateField from "./components/date-field/date-field.svelte";
+import DatetimeField from "./components/datetime-field/datetime-field.svelte";
+import EmailField from "./components/email-field/email-field.svelte";
+import FileField from "./components/file-field/file-field.svelte";
+import InputField from "./components/input-field/input-field.svelte";
+import Label from "./components/label/label.svelte";
+import NumberField from "./components/number-field/number-field.svelte";
+import PasswordField from "./components/password-field/password-field.svelte";
+import PhoneField from "./components/phone-field/phone-field.svelte";
+import RadioField from "./components/radio-field/radio-field.svelte";
+import RangeField from "./components/range-field/range-field.svelte";
+import SearchField from "./components/search-field/search-field.svelte";
+import TextField from "./components/text-field/text-field.svelte";
+import TextareaField from "./components/textarea-field/textarea-field.svelte";
+import TimeField from "./components/time-field/time-field.svelte";
+export * from './types';
+export { CheckboxField, ColorField, ComboboxField, DateField, DatetimeField, EmailField, FileField, InputField, Label, NumberField, PasswordField, PhoneField, RadioField, RangeField, SearchField, TextareaField, TextField, TimeField };

package/dist/views/core/input/types.d.ts

@@ -0,0 +1,159 @@
+import type { Snippet } from "svelte";
+import type { AriaRole, HTMLInputTypeAttribute } from "svelte/elements";
+export type ComboboxFieldProps = {
+    chipClassName?: string;
+    comboboxIconClassName?: string;
+    comboboxIconPath?: string;
+    createButtonClassName?: string;
+    createButtonLabel?: string;
+    displayClassName?: string;
+    displayFieldName?: string;
+    displayItemsCount?: number;
+    dropdownBodyClassName?: string;
+    dropdownBodySnippet?: Snippet;
+    dropdownClassName?: string;
+    dropdownFooterClassName?: string;
+    dropdownFooterSnippet?: Snippet;
+    dropdownHeaderClassName?: string;
+    dropdownHeaderSnippet?: Snippet;
+    emptyMessage?: string;
+    emptyMessageSnippet?: Snippet;
+    hasComboboxIcon?: boolean;
+    hasDropdownFooter?: boolean;
+    hasDropdownFooterCreateButton?: boolean;
+    hasDropdownHeader?: boolean;
+    hasDropdownHeaderSearch?: boolean;
+    hasCheckbox?: boolean;
+    iconClassName?: string;
+    iconPathFieldName?: string;
+    identityFieldName?: string;
+    itemClassName?: string;
+    items?: any[];
+    multiple?: boolean;
+    onCreateButtonClick?: (ev: MouseEvent) => void;
+    onSearch?: (value: string) => void;
+    searchClassName?: string;
+    searchFieldName?: string;
+    searchPlaceholder?: string;
+    showChip?: boolean;
+    subtitleClassName?: string;
+    subtitleFieldName?: string;
+    titleClassName?: string;
+    titleFieldName?: string;
+    checkboxIconPath?: string;
+    uncheckboxIconPath?: string;
+    checkboxIconClassName?: string;
+    uncheckboxIconClassName?: string;
+    checkboxClassName?: string;
+    dropPosition?: 'top' | 'bottom' | 'middle';
+    itemTileSnippet?: Snippet<[item: any, index: any]>;
+};
+export type InputFieldSize = 'lg' | 'md' | 'sm' | 'xs';
+export type InputFieldAppearance = 'normal' | 'box' | 'fill' | 'underline' | 'fill-underline' | 'none';
+export type InputValue = any | string | string[] | number | number[] | Date | Date[] | File | File[] | null | undefined;
+export type InputFieldProps = {
+    appearance?: InputFieldAppearance;
+    ariaControls?: string;
+    ariaExpanded?: boolean;
+    autofocus?: boolean;
+    className?: string;
+    cols?: number;
+    containerClassName?: string;
+    contentSnippet?: Snippet;
+    contentSnippetClassName?: string;
+    disabled?: boolean;
+    floatingLabel?: boolean;
+    hasRequiredSymbol?: boolean;
+    iconClassName?: string;
+    iconPath?: string;
+    id?: string;
+    label?: string;
+    labelClassName?: string;
+    leftSnippet?: Snippet;
+    leftSnippetContainerClassName?: string;
+    max?: number | string;
+    maxlength?: number;
+    min?: number | string;
+    minlength?: number;
+    multiple?: boolean;
+    name?: string;
+    title?: string;
+    onBlur?: (ev: any) => void;
+    onChange?: (ev: any) => void;
+    onClick?: (ev: MouseEvent) => void;
+    onDblClick?: (ev: MouseEvent) => void;
+    onDrag?: (ev: DragEvent) => void;
+    onDragOver?: (ev: DragEvent) => void;
+    onDrop?: (ev: DragEvent) => void;
+    onFocus?: (ev: any) => void;
+    onInput?: (ev: any) => void;
+    onKeyDown?: (ev: KeyboardEvent) => void;
+    onKeyPress?: (ev: KeyboardEvent) => void;
+    onKeyUp?: (ev: KeyboardEvent) => void;
+    onMouseDown?: (ev: MouseEvent) => void;
+    onMouseUp?: (ev: MouseEvent) => void;
+    pattern?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    required?: boolean;
+    requiredSymbol?: string;
+    requiredSymbolColor?: string;
+    rightSnippet?: Snippet;
+    rightSnippetContainerClassName?: string;
+    role?: AriaRole;
+    rows?: number;
+    size?: InputFieldSize;
+    step?: number;
+    type?: HTMLInputTypeAttribute | 'textarea';
+    value?: InputValue;
+};
+export type LibPhoneNumberParseType = {
+    isValid: () => boolean;
+    nationalNumber: string;
+    countryCallingCode: string;
+};
+export type LibPhoneNumberType = {
+    parsePhoneNumber: (phoneNumber: string, dialCode?: string) => LibPhoneNumberParseType;
+};
+export type CountryType = {
+    name: string;
+    dialCode: string;
+    isoCode: string;
+};
+export type EasyCountryDataType = {
+    getCountries: () => CountryType[];
+    getCountry: (params: {
+        name?: string;
+        dialCode?: string;
+        isoCode?: string;
+    }) => CountryType;
+};
+export type RadioValueType = string | boolean | number | Date;
+export type RadioItem = {
+    value: any;
+    label: string;
+    desc?: string;
+};
+export type RadioItems = (RadioValueType | RadioItem)[];
+export type RadioPosition = 'left' | 'right';
+export type RadioDirection = 'vertical' | 'horizontal';
+export type RadioPropsType = {
+    className?: string;
+    groupContainerClassName?: string;
+    hasPrimitiveItemsData?: boolean;
+    id?: string;
+    items?: RadioItems;
+    labelClassName?: string;
+    name?: string;
+    position?: RadioPosition;
+    direction?: RadioDirection;
+    radioContainerClassName?: string;
+    required?: boolean;
+    subtitle?: string;
+    subtitleClassName?: string;
+    title?: string;
+    titleClassName?: string;
+    value?: RadioValueType;
+    descClassName?: string;
+    onChange?: (value: RadioValueType) => void;
+};

package/dist/views/core/input/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,133 @@
+ 
+<script lang="ts">
+	import ButtonBack from '../../../button/components/button-back/button-back.svelte';
+	import { Icon, mdiMenu } from '../../../icon';
+	import type { NavbarProps } from '../../types';
+
+	let {
+		disabledLogo,
+		backButtonClassName,
+		backIconPath,
+		centerContainerClassName = '',
+		centerSnippet,
+		children,
+		className = '',
+		drawerButtonClassName = '',
+		hasBack = false,
+		hasLogo = false,
+		hasMore = false,
+		hasSubtitle = false,
+		hasTitle = false,
+		id = '',
+		leftContainerClassName = '',
+		leftSnippet,
+		logoButtonClassName = '',
+		logoIconClassName = 'text-indigo-600',
+		logoIconPath,
+		logoImgClassName = '',
+		logoImgSrc,
+		moreIconPath = mdiMenu,
+		morePosition = 'left',
+		onLogo,
+		onMore,
+		onBack,
+		rightContainerClassName = '',
+		rightSnippet,
+		subtitle = '',
+		subtitleClassName = '',
+		title = '',
+		titleClassName = ''
+	}: NavbarProps = $props();
+</script>
+
+<nav
+	class="sticky top-0 z-20 flex h-16 shrink-0 items-center px-2 border-b border-neutral-100 dark:border-neutral-700 bg-white dark:bg-neutral-800 shadow-sm {className}"
+>
+	{#if hasBack}
+		<div class="h-full flex items-center">
+			<ButtonBack
+				iconPath={backIconPath}
+				className="text-neutral-800 dark:text-neutral-100 {backButtonClassName}"
+				onClick={onBack}
+			/>
+		</div>
+	{/if}
+	{#if hasMore && morePosition === 'left'}
+		<div class="h-full">
+			<button
+				type="button"
+				class="h-full px-2 text-neutral-800 dark:text-neutral-100 {drawerButtonClassName}"
+				disabled={disabledLogo}
+				onclick={onMore}
+			>
+				<Icon path={moreIconPath} />
+			</button>
+		</div>
+	{/if}
+	{#if hasLogo}
+		<div class="h-full">
+			<button
+				id="btn-more"
+				type="button"
+				class="h-full px-2 rounded-0 text-neutral-800 dark:text-neutral-100 {logoButtonClassName}"
+				disabled={!onLogo}
+				onclick={onLogo}
+			>
+				{#if logoIconPath}
+					<Icon path={logoIconPath} className="h-10 w-10 {logoIconClassName}" />
+				{/if}
+				{#if logoImgSrc}
+					<img src={logoImgSrc} class="h-8 w-8 {logoImgClassName}" alt="logo" />
+				{/if}
+			</button>
+		</div>
+	{/if}
+	{#if children}
+		{@render children()}
+	{:else}
+		<div class="h-full flex items-center">
+			<div>
+				{#if hasTitle}
+					<div class="font-bold px-2 text-neutral-800 dark:text-neutral-100 {titleClassName}">
+						{title || ''}
+					</div>
+				{/if}
+				{#if hasSubtitle}
+					<div class="text-sm px-2 text-neutral-600 dark:text-neutral-500 {subtitleClassName}">
+						{subtitle || ''}
+					</div>
+				{/if}
+			</div>
+		</div>
+		<div class="h-full {leftContainerClassName}">
+			{#if leftSnippet}
+				{@render leftSnippet()}
+			{/if}
+		</div>
+		<div class="flex-grow flex items-center justify-center h-full {centerContainerClassName}">
+			{#if centerSnippet}
+				{@render centerSnippet()}
+			{/if}
+		</div>
+		<div class="h-full {rightContainerClassName}">
+			{#if rightSnippet}
+				{@render rightSnippet()}
+			{/if}
+		</div>
+	{/if}
+	{#if hasMore && morePosition === 'right'}
+		<div class="h-full">
+			<div class="h-full">
+				<button
+					id="btn-more"
+					type="button"
+					class="h-full px-2 text-neutral-800 dark:text-neutral-100 {drawerButtonClassName}"
+					disabled={!onMore}
+					onclick={onMore}
+				>
+					<Icon path={moreIconPath} />
+				</button>
+			</div>
+		</div>
+	{/if}
+</nav>

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

@@ -0,0 +1,4 @@
+import type { NavbarProps } from '../../types';
+declare const Navbar: import("svelte").Component<NavbarProps, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/views/core/navbar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Navbar } from "./components/navbar/navbar.svelte";
+export * from './types';

package/dist/views/core/navbar/index.js

@@ -0,0 +1,2 @@
+export { default as Navbar } from "./components/navbar/navbar.svelte";
+export * from './types';

package/dist/views/core/navbar/types.d.ts

@@ -0,0 +1,35 @@
+import type { Snippet } from "svelte";
+export type NavbarProps = {
+    disabledLogo?: boolean;
+    backIconPath?: string;
+    backButtonClassName?: string;
+    centerContainerClassName?: string;
+    centerSnippet?: Snippet<[]>;
+    children?: Snippet;
+    className?: String;
+    drawerButtonClassName?: string;
+    hasBack?: boolean;
+    hasLogo?: boolean;
+    hasMore?: boolean;
+    hasSubtitle?: boolean;
+    hasTitle?: boolean;
+    id?: string;
+    leftContainerClassName?: string;
+    leftSnippet?: Snippet<[]>;
+    logoButtonClassName?: string;
+    logoIconClassName?: string;
+    logoIconPath?: string;
+    logoImgClassName?: string;
+    logoImgSrc?: string;
+    moreIconPath?: string;
+    morePosition?: 'left' | 'right';
+    onLogo?: () => void;
+    onMore?: () => void;
+    onBack?: () => void;
+    rightContainerClassName?: string;
+    rightSnippet?: Snippet<[]>;
+    subtitle?: string;
+    subtitleClassName?: string;
+    title?: string;
+    titleClassName?: string;
+};

package/dist/views/core/navbar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/views/core/no-data/components/no-data/no-data.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import type { Snippet } from 'svelte';
+
+	type PlacementType = 'top' | 'bottom' | 'left' | 'right';
+
+	type PropsType = {
+		message?: string;
+		className?: string;
+		iconPath?: string;
+		iconClassName?: string;
+		iconPlacement?: PlacementType;
+		children?: Snippet;
+	};
+
+	let {
+		message = 'No data found!',
+		className = '',
+		iconPath = '',
+		iconClassName = '',
+		iconPlacement = 'top',
+		children
+	}: PropsType = $props();
+
+	const iconPlacementClassNameMap: any = {
+		top: 'flex-col',
+		bottom: 'flex-col-reverse',
+		left: 'flex-row',
+		right: 'flex-row-reverse'
+	};
+
+	let iconPlacementClassName: string = $derived(iconPlacementClassNameMap[iconPlacement]);
+ 
+</script>
+
+<div
+	class="flex items-center justify-center gap-3 text-gray-500 p-4 {iconPlacementClassName}  {className}"
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{#if iconPath}
+			<Icon path={iconPath} className="w-6 h-6 {iconClassName}" />
+		{/if}
+		<div>{@html message}</div>
+	{/if}
+</div>

package/dist/views/core/no-data/components/no-data/no-data.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type PlacementType = 'top' | 'bottom' | 'left' | 'right';
+type PropsType = {
+    message?: string;
+    className?: string;
+    iconPath?: string;
+    iconClassName?: string;
+    iconPlacement?: PlacementType;
+    children?: Snippet;
+};
+declare const NoData: import("svelte").Component<PropsType, {}, "">;
+type NoData = ReturnType<typeof NoData>;
+export default NoData;

package/dist/views/core/no-data/index.d.ts

@@ -0,0 +1,2 @@
+import NoData from "./components/no-data/no-data.svelte";
+export { NoData };

package/dist/views/core/no-data/index.js

@@ -0,0 +1,2 @@
+import NoData from "./components/no-data/no-data.svelte";
+export { NoData };

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

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import ButtonMenu from '../../../button/components/button-menu/button-menu.svelte';
+	import Button from '../../../button/components/button/button.svelte';
+	import {
+		mdiChevronDown,
+		mdiChevronLeft,
+		mdiChevronRight,
+		mdiPageFirst,
+		mdiPageLast
+	} from '../../../icon';
+
+	type PropsType = {
+		itemsCount?: number;
+		pageIndex?: number;
+		pageSize?: number;
+		pageSizeOptions?: number[];
+		itemsText?: string;
+		pageSizeText?: string;
+		pageText?: string;
+		dropPosition?: 'top' | 'bottom' | 'middle' | undefined;
+		disableSizeMenuButton?: boolean;
+		onPageSizeChange?: (size: number) => void;
+		onPageIndexChange?: (index: number) => void;
+	};
+
+	let {
+		itemsCount = $bindable(0),
+		pageIndex = $bindable(0),
+		pageSize = $bindable(10),
+		pageSizeOptions = [5, 10, 25, 50, 100, 200],
+		itemsText = 'Items',
+		pageSizeText = 'Page Size',
+		pageText = 'Page',
+		dropPosition = 'bottom',
+		disableSizeMenuButton,
+		onPageSizeChange,
+		onPageIndexChange
+	}: PropsType = $props();
+
+	let pageCount: number = $derived(Math.ceil(itemsCount / pageSize));
+
+	let hasFirst: boolean = $derived(pageIndex > 0);
+	let hasPrev: boolean = $derived(pageIndex > 0);
+
+	let hasLast: boolean = $derived(pageIndex < pageCount - 1);
+	let hasNext: boolean = $derived(pageIndex < pageCount - 1);
+
+	const handlePageSize = (size: any) => {
+		pageIndex = 0;
+		if (pageSize != size) {
+			pageSize = size;
+			onPageSizeChange?.(pageSize);
+		}
+	};
+
+	const handlePage = (type?: string) => {
+		// console.log('handlePage');
+		let index = 0;
+		switch (type) {
+			case 'first':
+				index = 0;
+				break;
+			case 'last':
+				index = pageCount - 1;
+				break;
+			case 'next':
+				index = pageIndex;
+				index++;
+				break;
+			case 'prev':
+				index = pageIndex;
+				index--;
+				break;
+		}
+
+		if (index <= 0) index = 0;
+		if (index >= pageCount) index = pageCount - 1;
+
+		if (pageIndex != index) {
+			pageIndex = index;
+			onPageIndexChange?.(pageIndex);
+		}
+	};
+
+	function handlePageSizeMenu(ev: Event, menu: string) {
+		try {
+			let size = parseInt(menu);
+			handlePageSize(size);
+		} catch (error) {}
+	}
+</script>
+
+{#snippet pageButton({ onClick, disabled, icon }: any)}
+	<Button {disabled} {onClick} iconPath={icon} />
+{/snippet}
+
+<div class="flex items-center flex-wrap justify-end text-neutral-500 gap-3 -mb-2">
+	<div class="flex-grow">{itemsText} {itemsCount}</div>
+	<div class="flex items-center flex-nowrap gap-2">
+		<div>{pageSizeText}</div>
+		<div class="">
+			<ButtonMenu
+				{dropPosition}
+				disabled={disableSizeMenuButton}
+				iconPath={mdiChevronDown}
+				label={'' + pageSize}
+				menus={pageSizeOptions.map((o) => '' + o)}
+				onMenu={(ev, menu) => handlePageSizeMenu(ev, menu as string)}
+			/>
+		</div>
+		<div class="text-neutral-500">
+			<span>
+				{pageText}
+			</span>
+			<span>
+				({pageIndex + 1} / {pageCount})
+			</span>
+		</div>
+	</div>
+
+	<div class="flex items-center flex-nowrap gap-1">
+		<div>
+			{@render pageButton({
+				icon: mdiPageFirst,
+				disabled: !hasFirst,
+				onClick: () => handlePage('first')
+			})}
+		</div>
+		<div>
+			{@render pageButton({
+				icon: mdiChevronLeft,
+				disabled: !hasPrev,
+				onClick: () => handlePage('prev')
+			})}
+		</div>
+		<div>
+			{@render pageButton({
+				icon: mdiChevronRight,
+				disabled: !hasNext,
+				onClick: () => handlePage('next')
+			})}
+		</div>
+		<div>
+			{@render pageButton({
+				icon: mdiPageLast,
+				disabled: !hasLast,
+				onClick: () => handlePage('last')
+			})}
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,16 @@
+type PropsType = {
+    itemsCount?: number;
+    pageIndex?: number;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    itemsText?: string;
+    pageSizeText?: string;
+    pageText?: string;
+    dropPosition?: 'top' | 'bottom' | 'middle' | undefined;
+    disableSizeMenuButton?: boolean;
+    onPageSizeChange?: (size: number) => void;
+    onPageIndexChange?: (index: number) => void;
+};
+declare const Pagination: import("svelte").Component<PropsType, {}, "itemsCount" | "pageIndex" | "pageSize">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/views/core/pagination/index.d.ts

@@ -0,0 +1,2 @@
+import Pagination from "./components/pagination/pagination.svelte";
+export { Pagination, };

package/dist/views/core/pagination/index.js

@@ -0,0 +1,2 @@
+import Pagination from "./components/pagination/pagination.svelte";
+export { Pagination, };