ankiutils 0.0.4 → 0.0.6

package/dist/components/BaseSelect.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { tick } from 'svelte';
-	import SelectOptions, { type SelectOption } from './SelectOptions.svelte';
-
+	import { type SelectOption } from './types.js';
+	import SelectOptions from './SelectOptions.svelte';
+	import { filterSelectOptions } from './utils.js';
 	interface Props {
 		id?: string;
 		options: SelectOption[];
@@ -34,11 +35,7 @@
 	let inputElement: HTMLInputElement;
 	let optionElements: (HTMLButtonElement | HTMLInputElement)[] = $state([]);
 
-	let filteredOptions = $derived(
-		searchTerm
-			? options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()))
-			: options
-	);
+	let filteredOptions = $derived(filterSelectOptions(searchTerm, options));
 
 	let displayValue = $derived(
 		isOpen

package/dist/components/BaseSelect.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type SelectOption } from './SelectOptions.svelte';
+import { type SelectOption } from './types.ts';
 interface Props {
     id?: string;
     options: SelectOption[];

package/dist/components/Dropdown.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import SelectOptions, { type SelectOption } from './SelectOptions.svelte';
+	import SelectOptions from './SelectOptions.svelte';
+	import { type SelectOption } from './types.js';
 
 	interface Props {
 		label: string;

package/dist/components/Dropdown.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type SelectOption } from './SelectOptions.svelte';
+import { type SelectOption } from './types.ts';
 interface Props {
     label: string;
     options: SelectOption[];

package/dist/components/ModalSelector.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
-	export interface Option {
-		value: string;
-		label: string;
-	}
-
+	import { type SelectOption } from './types.js';
+	import { filterSelectOptions } from './utils.js';
 	interface Props {
 		selectedOption: string;
-		options: Option[];
+		options: SelectOption[];
 		placeholder?: string;
 		onSelected?: () => void;
 	}
@@ -18,15 +15,7 @@
 		placeholder = 'Search...'
 	}: Props = $props();
 	let search = $state('');
-	let filteredOptions = $derived.by(() =>
-		search
-			? options.filter(
-					(opt) =>
-						opt.value.toLowerCase().includes(search.toLowerCase()) ||
-						opt.label.toLowerCase().includes(search.toLowerCase())
-				)
-			: options
-	);
+	let filteredOptions = $derived(filterSelectOptions(search, options));
 	let selectedIndex = $derived.by(() => {
 		for (let i = 0; i < filteredOptions.length; i++) {
 			if (isOptionSelected(filteredOptions[i])) return i;
@@ -38,11 +27,11 @@
 	let modalElement: HTMLDialogElement;
 	let optionElements: HTMLButtonElement[] = $state([]);
 
-	function isOptionSelected(option: Option) {
+	function isOptionSelected(option: SelectOption) {
 		return option.value.toLowerCase() === selectedOption.toLowerCase();
 	}
 
-	function selectOption(language: Option) {
+	function selectOption(language: SelectOption) {
 		selectedOption = language.value;
 		modalElement.close();
 		onSelected?.();

package/dist/components/ModalSelector.svelte.d.ts

@@ -1,10 +1,7 @@
-export interface Option {
-    value: string;
-    label: string;
-}
+import { type SelectOption } from './types.ts';
 interface Props {
     selectedOption: string;
-    options: Option[];
+    options: SelectOption[];
     placeholder?: string;
     onSelected?: () => void;
 }

package/dist/components/MultiSelect.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import BaseSelect from './BaseSelect.svelte';
-	import { type SelectOption } from './SelectOptions.svelte';
+	import { type SelectOption } from './types.js';
 
 	interface Props {
 		id?: string;

package/dist/components/MultiSelect.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type SelectOption } from './SelectOptions.svelte';
+import { type SelectOption } from './types.ts';
 interface Props {
     id?: string;
     options: SelectOption[];

package/dist/components/Select.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import BaseSelect from './BaseSelect.svelte';
-	import { type SelectOption } from './SelectOptions.svelte';
+	import { type SelectOption } from './types.js';
 	interface Props {
 		id?: string;
 		options: SelectOption[];

package/dist/components/Select.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type SelectOption } from './SelectOptions.svelte';
+import { type SelectOption } from './types.ts';
 interface Props {
     id?: string;
     options: SelectOption[];

package/dist/components/SelectOptions.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
-	export interface SelectOption {
-		value: string;
-		label: string;
-	}
-
+	import { type SelectOption } from './types.js';
 	interface Props {
 		options: SelectOption[];
 		selectedOptions: string[];

package/dist/components/SelectOptions.svelte.d.ts

@@ -1,7 +1,4 @@
-export interface SelectOption {
-    value: string;
-    label: string;
-}
+import { type SelectOption } from './types.ts';
 interface Props {
     options: SelectOption[];
     selectedOptions: string[];

package/dist/components/Spinner.svelte

@@ -1,77 +1,23 @@
 <script lang="ts">
-    import { pageTheme } from "../theme.svelte";
+	interface Props {
+		label?: string;
+	}
 
-    interface Props {
-        label?: string;
-        size?: number;
-        center?: boolean;
-    }
-
-    let { label = "Loading...", size = 80, center = true }: Props =
-        $props();
+	let { label = 'Loading...' }: Props = $props();
 </script>
 
-<!-- spinner taken from https://loading.io/css/; CC0 -->
-<div
-    class="progress-container"
-    class:centered={center}
-    style="--size: {size}px"
->
-    <div class="spinner" class:nightMode={pageTheme.isDark}>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-    </div>
-    <div class="progress-label">{label}</div>
+<div class="spinner-container">
+	<span class="loading loading-spinner w-20"></span>
+	<div>{label}</div>
 </div>
 
-<style>.progress-container.centered {
-  position: absolute;
+<style>.spinner-container {
+  position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-}
-
-.spinner {
-  display: block;
-  position: relative;
-  width: var(--size);
-  height: var(--size);
-  margin: 0 auto;
-}
-.spinner div {
-  display: block;
-  position: absolute;
-  width: calc(var(--size) - 16px);
-  height: calc(var(--size) - 16px);
-  margin: 8px;
-  border: calc(var(--size) / 10) solid #000;
-  border-radius: 50%;
-  animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #000 transparent transparent transparent;
-}
-.spinner.nightMode div {
-  border-top-color: #fff;
-}
-.spinner div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.spinner div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.spinner div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.progress-label {
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
 }</style>

package/dist/components/Spinner.svelte.d.ts

@@ -1,7 +1,5 @@
 interface Props {
     label?: string;
-    size?: number;
-    center?: boolean;
 }
 declare const Spinner: import("svelte").Component<Props, {}, "">;
 type Spinner = ReturnType<typeof Spinner>;

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
 import Spinner from './Spinner.svelte';
-import type { SelectOption } from './SelectOptions.svelte';
+import type { SelectOption } from './types.ts';
 import Select from './Select.svelte';
 import MultiSelect from './MultiSelect.svelte';
 import Dropdown from './Dropdown.svelte';

package/dist/components/types.d.ts

@@ -0,0 +1,4 @@
+export interface SelectOption {
+    value: string;
+    label: string;
+}

package/dist/components/types.js

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

package/dist/components/utils.d.ts

@@ -0,0 +1,2 @@
+import type { SelectOption } from './types.ts';
+export declare function filterSelectOptions(search: string, options: SelectOption[]): SelectOption[];

package/dist/components/utils.js

@@ -0,0 +1,6 @@
+export function filterSelectOptions(search, options) {
+    return search
+        ? options.filter((opt) => opt.value.toLowerCase().includes(search.toLowerCase()) ||
+            opt.label.toLowerCase().includes(search.toLowerCase()))
+        : options;
+}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./bridgecommand";
-export * from "./promise";
-export * from "./proto";
-export * from "./theme.svelte";
-export * from "./components";
+export * from './bridgecommand';
+export * from './promise';
+export * from './proto';
+export * from './theme.svelte';
+export * from './components';

package/dist/index.js

@@ -1,5 +1,5 @@
-export * from "./bridgecommand";
-export * from "./promise";
-export * from "./proto";
-export * from "./theme.svelte";
-export * from "./components";
+export * from './bridgecommand';
+export * from './promise';
+export * from './proto';
+export * from './theme.svelte';
+export * from './components';

package/dist/promise.d.ts

@@ -1 +1,5 @@
-export declare function promiseWithResolver<T>(): [Promise<T>, (value: T) => void, (error: unknown) => void];
+export declare function promiseWithResolver<T>(): [
+    Promise<T>,
+    (value: T) => void,
+    (error: unknown) => void
+];

package/dist/promise.js

@@ -1,6 +1,6 @@
 export function promiseWithResolver() {
     let resolve;
     let reject;
-    const promise = new Promise((res, rej) => (resolve = res, reject = rej));
+    const promise = new Promise((res, rej) => ((resolve = res), (reject = rej)));
     return [promise, resolve, reject];
 }

package/dist/proto.d.ts

@@ -1,3 +1,3 @@
-import type { DescService } from "@bufbuild/protobuf";
-import { type Client } from "@connectrpc/connect";
+import type { DescService } from '@bufbuild/protobuf';
+import { type Client } from '@connectrpc/connect';
 export declare function createProtoClient<T extends DescService>(service: T): Client<T>;

package/dist/proto.js

@@ -1,7 +1,7 @@
-import { createClient, } from "@connectrpc/connect";
-import { createConnectTransport } from "@connectrpc/connect-web";
+import { createClient } from '@connectrpc/connect';
+import { createConnectTransport } from '@connectrpc/connect-web';
 const transport = createConnectTransport({
-    baseUrl: "/api",
+    baseUrl: '/api',
     useBinaryFormat: true,
     fetch: (input, init) => {
         const headers = init?.headers ?? {};
@@ -9,10 +9,10 @@ const transport = createConnectTransport({
             ...init,
             headers: {
                 ...headers,
-                "qt-widget-id": window.qtWidgetId,
-            },
+                'qt-widget-id': window.qtWidgetId
+            }
         });
-    },
+    }
 });
 export function createProtoClient(service) {
     return createClient(service, transport);

package/dist/theme.svelte.js

@@ -1,23 +1,23 @@
 export function checkNightMode() {
-    const nightMode = window.location.hash == "#night";
-    const theme = nightMode ? "dark" : "light";
+    const nightMode = window.location.hash == '#night';
+    const theme = nightMode ? 'dark' : 'light';
     // DaisyUI
     document.documentElement.dataset.theme = theme;
     if (nightMode) {
         // Standard Anki class
-        document.documentElement.className = "night-mode";
+        document.documentElement.className = 'night-mode';
         // Bootstrap
-        document.documentElement.dataset.bsTheme = "dark";
+        document.documentElement.dataset.bsTheme = 'dark';
     }
     return nightMode;
 }
 function getThemeFromRoot() {
     return {
-        isDark: document.documentElement.classList.contains("night-mode"),
+        isDark: document.documentElement.classList.contains('night-mode')
     };
 }
 export const pageTheme = $state(getThemeFromRoot());
 const observer = new MutationObserver((_mutationsList, _observer) => {
     pageTheme.isDark = getThemeFromRoot().isDark;
 });
-observer.observe(document.documentElement, { attributeFilter: ["class"] });
+observer.observe(document.documentElement, { attributeFilter: ['class'] });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ankiutils",
-	"version": "0.0.4",
+	"version": "0.0.6",
 	"license": "AGPL-3.0-or-later",
 	"scripts": {
 		"dev": "vite dev",