@rkosafo/cai.components 0.0.74 → 0.0.78

package/dist/utils/closeButton/CloseButton.svelte

@@ -1,88 +1,88 @@
-<script lang="ts" module>
-	export type CloseButtonProps = CloseButtonVariants &
-		AnchorButtonAttributes & {
-			onclick?: (ev: MouseEvent) => void;
-			name?: string;
-			ariaLabel?: string;
-			class?: string;
-			svgClass?: string;
-		};
-</script>
-
-<script lang="ts">
-	import clsx from 'clsx';
-	import { closeButton } from './index.js';
-	import { useDismiss } from '../dismissable.js';
-	import type { AnchorButtonAttributes } from '../../types/index.js';
-	import type { CloseButtonVariants } from './theme.js';
-
-	let {
-		children,
-		color = 'gray',
-		onclick: onclickorg,
-		name = 'Close',
-		ariaLabel,
-		size = 'md',
-		class: className,
-		svgClass,
-		...restProps
-	}: CloseButtonProps = $props();
-
-	const { base, svg } = $derived(closeButton({ color, size }));
-
-	const context = useDismiss();
-
-	function onclick(event: MouseEvent) {
-		onclickorg?.(event);
-		if (event.defaultPrevented) return;
-		context?.dismiss?.(event);
-	}
-</script>
-
-{#if restProps.href === undefined}
-	<button
-		type="button"
-		{...restProps}
-		class={base({ class: clsx(className) })}
-		{onclick}
-		aria-label={ariaLabel ?? name}
-	>
-		{#if name}<span class="sr-only">{name}</span>{/if}
-		{#if children}
-			{@render children()}
-		{:else}
-			<svg
-				class={svg({ class: svgClass })}
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					fill-rule="evenodd"
-					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		{/if}
-	</button>
-{:else}
-	<a
-		{...restProps}
-		{onclick}
-		class={base({ class: clsx(className) })}
-		aria-label={ariaLabel ?? name}
-	>
-		{#if name}<span class="sr-only">{name}</span>{/if}
-		{#if children}
-			{@render children()}
-		{:else}
-			<svg class={svg()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-				<path
-					fill-rule="evenodd"
-					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		{/if}
-	</a>
-{/if}
+<script lang="ts" module>
+	export type CloseButtonProps = CloseButtonVariants &
+		AnchorButtonAttributes & {
+			onclick?: (ev: MouseEvent) => void;
+			name?: string;
+			ariaLabel?: string;
+			class?: string;
+			svgClass?: string;
+		};
+</script>
+
+<script lang="ts">
+	import clsx from 'clsx';
+	import { closeButton } from './index.js';
+	import { useDismiss } from '../dismissable.js';
+	import type { AnchorButtonAttributes } from '../../types/index.js';
+	import type { CloseButtonVariants } from './theme.js';
+
+	let {
+		children,
+		color = 'gray',
+		onclick: onclickorg,
+		name = 'Close',
+		ariaLabel,
+		size = 'md',
+		class: className,
+		svgClass,
+		...restProps
+	}: CloseButtonProps = $props();
+
+	const { base, svg } = $derived(closeButton({ color, size }));
+
+	const context = useDismiss();
+
+	function onclick(event: MouseEvent) {
+		onclickorg?.(event);
+		if (event.defaultPrevented) return;
+		context?.dismiss?.(event);
+	}
+</script>
+
+{#if restProps.href === undefined}
+	<button
+		type="button"
+		{...restProps}
+		class={base({ class: clsx(className) })}
+		{onclick}
+		aria-label={ariaLabel ?? name}
+	>
+		{#if name}<span class="sr-only">{name}</span>{/if}
+		{#if children}
+			{@render children()}
+		{:else}
+			<svg
+				class={svg({ class: svgClass })}
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		{/if}
+	</button>
+{:else}
+	<a
+		{...restProps}
+		{onclick}
+		class={base({ class: clsx(className) })}
+		aria-label={ariaLabel ?? name}
+	>
+		{#if name}<span class="sr-only">{name}</span>{/if}
+		{#if children}
+			{@render children()}
+		{:else}
+			<svg class={svg()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+				<path
+					fill-rule="evenodd"
+					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		{/if}
+	</a>
+{/if}

package/dist/utils/index.d.ts

@@ -14,9 +14,10 @@ export declare const send: (node: any, params: import("svelte/transition").Cross
     key: any;
 }) => () => import("svelte/transition").TransitionConfig;
 export declare function getInitials(val?: string): string;
+export declare function getInitials2(x: string): string;
 export declare function findTicketCategoryParents(selectedItem: ICaseCategory, data: ICaseCategory[]): string[] | null;
-export declare function formatTicketDate(x: any): string;
-export declare function formatTicketHeader(x: any): string;
+export declare function formatTicketDate(x: any): any;
+export declare function formatTicketHeader(x: any): any;
 export declare function isImage(path: string): boolean;
 export declare function isPdf(path: string): boolean;
 export declare function isWord(path: string): boolean;

package/dist/utils/index.js

@@ -45,9 +45,9 @@ export const [send, receive] = crossfade({
         return {
             duration: 600,
             easing: quintOut,
-            css: (t) => `
-				        transform: ${transform} translateX(${(1 - t) * 100}%);
-				opacity: ${t}
+            css: (t) => `
+				        transform: ${transform} translateX(${(1 - t) * 100}%);
+				opacity: ${t}
 			`
         };
     }
@@ -61,6 +61,16 @@ export function getInitials(val) {
         .map((x) => x[0])
         .join('');
 }
+export function getInitials2(x) {
+    if (!x)
+        return '';
+    var xs = x.trim().split(' ');
+    if (xs.length === 1)
+        return x[0].toUpperCase();
+    if (xs.length === 0)
+        return 'X';
+    return `${xs[0][0]}${xs[xs.length - 1][0]}`.toUpperCase();
+}
 export function findTicketCategoryParents(selectedItem, data) {
     function findParentsRecursive(category, categories) {
         for (const item of categories) {

package/dist/utils/singleSelection.svelte.js

@@ -1,49 +1,49 @@
-import { getContext, setContext } from "svelte";
-
-/**
- * @template T
- * @typedef {Object} SingleSelectionContext
- * @property {T=} value
- */
-
-/** @type {symbol} */
-const SINGLE_SELECTION_KEY = Symbol("singleton");
-
-/**
- * @template T
- * @param {boolean} [nonReactive=false] - use a non-reactive placeholder to allow multiple selection and keep context shallow
- * @returns {SingleSelectionContext<T>}
- */
-export function createSingleSelectionContext(nonReactive = false) {
-  const context = $state({ value: undefined });
-  return setContext(SINGLE_SELECTION_KEY, nonReactive ? {} : context);
-}
-
-/**
- * @template T
- * @param {SingleSelectionContext<T>} context
- * @param {boolean} open
- * @param {T=} value
- * @returns {SingleSelectionContext<T>}
- */
-function setSelected(context, open, value) {
-  if (Object.hasOwn(context, 'value')) {
-    if (open) context.value = value;
-    else if (context.value === value) context.value = undefined;
-  }
-  return context;
-}
-
-/**
- * @template T
- * @param {(value: T) => void} callback
- * @returns {(open: boolean, v?: T) => SingleSelectionContext<T>}
- */
-export function useSingleSelection(callback) {
-  const context = getContext(SINGLE_SELECTION_KEY) ?? createSingleSelectionContext(false);
-
-  $effect(() => {
-    if (context.value !== undefined) callback(context.value);
-  });
-  return (open, v) => setSelected(context, open, v);
+import { getContext, setContext } from "svelte";
+
+/**
+ * @template T
+ * @typedef {Object} SingleSelectionContext
+ * @property {T=} value
+ */
+
+/** @type {symbol} */
+const SINGLE_SELECTION_KEY = Symbol("singleton");
+
+/**
+ * @template T
+ * @param {boolean} [nonReactive=false] - use a non-reactive placeholder to allow multiple selection and keep context shallow
+ * @returns {SingleSelectionContext<T>}
+ */
+export function createSingleSelectionContext(nonReactive = false) {
+  const context = $state({ value: undefined });
+  return setContext(SINGLE_SELECTION_KEY, nonReactive ? {} : context);
+}
+
+/**
+ * @template T
+ * @param {SingleSelectionContext<T>} context
+ * @param {boolean} open
+ * @param {T=} value
+ * @returns {SingleSelectionContext<T>}
+ */
+function setSelected(context, open, value) {
+  if (Object.hasOwn(context, 'value')) {
+    if (open) context.value = value;
+    else if (context.value === value) context.value = undefined;
+  }
+  return context;
+}
+
+/**
+ * @template T
+ * @param {(value: T) => void} callback
+ * @returns {(open: boolean, v?: T) => SingleSelectionContext<T>}
+ */
+export function useSingleSelection(callback) {
+  const context = getContext(SINGLE_SELECTION_KEY) ?? createSingleSelectionContext(false);
+
+  $effect(() => {
+    if (context.value !== undefined) callback(context.value);
+  });
+  return (open, v) => setSelected(context, open, v);
 }

package/dist/youtube/index.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-  let { url, videoId } = $props()
-</script>
-
-
-<div>
-  <div class="bg-red-100 p-4 m-4">
-    {url}
-
-  </div>
-  <br/>
-  {videoId}
+<script lang="ts">
+  let { url, videoId } = $props()
+</script>
+
+
+<div>
+  <div class="bg-red-100 p-4 m-4">
+    {url}
+
+  </div>
+  <br/>
+  {videoId}
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.74",
+  "version": "0.0.78",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -49,6 +49,7 @@
   "dependencies": {
     "@felte/validator-zod": "^1.0.18",
     "@floating-ui/dom": "^1.7.3",
+    "@floating-ui/utils": "^0.2.10",
     "@tiptap/core": "^3.0.7",
     "@tiptap/extension-list": "^3.0.7",
     "@tiptap/extension-text-style": "^3.0.7",