rimecms 0.26.6 → 0.26.8

package/dist/panel/components/ui/label/label.css

@@ -1,14 +1,14 @@
 .rz-label {
-	display: inline-block;
-	color: hsl(var(--rz-color-fg));
-	font-variation-settings: 'wght' 600;
-	font-weight: 600;
+  display: inline-block;
+  color: hsl(var(--rz-color-fg));
+  font-variation-settings: 'wght' 600;
+  font-weight: 600;
 }
 .rz-label ~ :disabled {
-	opacity: 0.7;
-	cursor: not-allowed;
+  opacity: 0.7;
+  cursor: not-allowed;
 }
 
 .rz-label[for] {
-	cursor: pointer;
+  cursor: pointer;
 }

package/dist/panel/components/ui/label/label.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Label as LabelPrimitive } from 'bits-ui';
-	import './label.css';
-	import type { HTMLAttributes } from 'svelte/elements';
+  import { Label as LabelPrimitive } from 'bits-ui';
+  import './label.css';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: LabelPrimitive.RootProps & HTMLAttributes<HTMLLabelElement> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: LabelPrimitive.RootProps & HTMLAttributes<HTMLLabelElement> = $props();
 </script>
 
 <LabelPrimitive.Root bind:ref class="rz-label {className}" {...restProps} />

package/dist/panel/components/ui/language-switcher/LanguageSwitcher.svelte

@@ -1,57 +1,57 @@
 <script lang="ts">
-	import { dev } from '$app/environment';
-	import Button from '../button/button.svelte';
-	import * as DropdownMenu from '../dropdown-menu/index.js';
-	import { getConfigContext } from '../../../context/config.svelte.js';
-	import { getLocaleContext } from '../../../context/locale.svelte.js';
-	import { Languages } from '@lucide/svelte';
-	import Cookies from 'js-cookie';
+  import { dev } from '$app/environment';
+  import Button from '../button/button.svelte';
+  import * as DropdownMenu from '../dropdown-menu/index.js';
+  import { getConfigContext } from '../../../context/config.svelte.js';
+  import { getLocaleContext } from '../../../context/locale.svelte.js';
+  import { Languages } from '@lucide/svelte';
+  import Cookies from 'js-cookie';
 
-	type Props = { onLocalClick: (code: string) => void };
-	const { onLocalClick }: Props = $props();
+  type Props = { onLocalClick: (code: string) => void };
+  const { onLocalClick }: Props = $props();
 
-	const locale = getLocaleContext();
-	const config = getConfigContext();
-	const locales = $state(config.raw.localization?.locales || []);
+  const locale = getLocaleContext();
+  const config = getConfigContext();
+  const locales = $state(config.raw.localization?.locales || []);
 
-	function isActive(code: string) {
-		return code === locale.code;
-	}
+  function isActive(code: string) {
+    return code === locale.code;
+  }
 </script>
 
 {#if config.raw.localization?.locales.length}
-	<DropdownMenu.Root>
-		<DropdownMenu.Trigger>
-			{#snippet child({ props })}
-				<Button
-					icon={Languages}
-					size="sm"
-					variant={props['data-state'] === 'open' ? 'secondary' : 'ghost'}
-					{...props}
-				>
-					{locale.label}
-				</Button>
-			{/snippet}
-		</DropdownMenu.Trigger>
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      {#snippet child({ props })}
+        <Button
+          icon={Languages}
+          size="sm"
+          variant={props['data-state'] === 'open' ? 'secondary' : 'ghost'}
+          {...props}
+        >
+          {locale.label}
+        </Button>
+      {/snippet}
+    </DropdownMenu.Trigger>
 
-		<DropdownMenu.Portal>
-			<DropdownMenu.Content align="end">
-				{#each locales as item, index (index)}
-					<DropdownMenu.Item
-						disabled={isActive(item.code)}
-						data-active={isActive(item.code) ? '' : null}
-						onclick={() => {
-							Cookies.set('rime.locale', item.code, {
-								sameSite: 'strict',
-								secure: !dev
-							});
-							onLocalClick(item.code);
-						}}
-					>
-						<span>{item.label}</span>
-					</DropdownMenu.Item>
-				{/each}
-			</DropdownMenu.Content>
-		</DropdownMenu.Portal>
-	</DropdownMenu.Root>
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content align="end">
+        {#each locales as item, index (index)}
+          <DropdownMenu.Item
+            disabled={isActive(item.code)}
+            data-active={isActive(item.code) ? '' : null}
+            onclick={() => {
+              Cookies.set('rime.locale', item.code, {
+                sameSite: 'strict',
+                secure: !dev
+              });
+              onLocalClick(item.code);
+            }}
+          >
+            <span>{item.label}</span>
+          </DropdownMenu.Item>
+        {/each}
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
+  </DropdownMenu.Root>
 {/if}

package/dist/panel/components/ui/nav/Nav.svelte

@@ -1,170 +1,170 @@
 <script lang="ts">
-	import { page } from '$app/state';
-	import { getConfigContext } from '../../../context/config.svelte.js';
-	import type { Route } from '../../../types';
-	import { panelUrl } from '../../../util/url.js';
-	import { PanelsTopLeft } from '@lucide/svelte';
-	import ScrollArea from '../scroll-area/scroll-area.svelte';
-	import NavGroup from './NavGroup.svelte';
-	import NavItem from './NavItem.svelte';
-	import UserButton from './UserButton.svelte';
+  import { page } from '$app/state';
+  import { getConfigContext } from '../../../context/config.svelte.js';
+  import type { Route } from '../../../types';
+  import { panelUrl } from '../../../util/url.js';
+  import { PanelsTopLeft } from '@lucide/svelte';
+  import ScrollArea from '../scroll-area/scroll-area.svelte';
+  import NavGroup from './NavGroup.svelte';
+  import NavItem from './NavItem.svelte';
+  import UserButton from './UserButton.svelte';
 
-	type Props = {
-		isCollapsed: boolean;
-		setCollapsed: (value: boolean) => void;
-		routes: Record<string, Route[]>;
-	};
-	const { isCollapsed, setCollapsed, routes: routesGroups }: Props = $props();
+  type Props = {
+    isCollapsed: boolean;
+    setCollapsed: (value: boolean) => void;
+    routes: Record<string, Route[]>;
+  };
+  const { isCollapsed, setCollapsed, routes: routesGroups }: Props = $props();
 
-	const config = getConfigContext();
-	const navigationGroupsConfig = config.raw.panel.navigation?.groups;
+  const config = getConfigContext();
+  const navigationGroupsConfig = config.raw.panel.navigation?.groups;
 
-	const getGroupIcon = (groupName: string) => {
-		if (!navigationGroupsConfig) return null;
-		const group = navigationGroupsConfig.find((group) => group.label === groupName);
-		if (group) {
-			return group.icon;
-		}
-		return null;
-	};
+  const getGroupIcon = (groupName: string) => {
+    if (!navigationGroupsConfig) return null;
+    const group = navigationGroupsConfig.find((group) => group.label === groupName);
+    if (group) {
+      return group.icon;
+    }
+    return null;
+  };
 
-	const dashBoardRoute: Route = {
-		title: 'Dashboard',
-		url: panelUrl(),
-		icon: PanelsTopLeft
-	};
+  const dashBoardRoute: Route = {
+    title: 'Dashboard',
+    url: panelUrl(),
+    icon: PanelsTopLeft
+  };
 </script>
 
 <div class:rz-nav--collapsed={isCollapsed} class="rz-nav">
-	<div class="rz-nav__content">
-		<div class="rz-nav__header" class:rz-nav__header--collapsed={isCollapsed}>
-			<NavItem href="/panel" {isCollapsed} route={dashBoardRoute} />
-		</div>
+  <div class="rz-nav__content">
+    <div class="rz-nav__header" class:rz-nav__header--collapsed={isCollapsed}>
+      <NavItem href="/panel" {isCollapsed} route={dashBoardRoute} />
+    </div>
 
-		<div class="rz-nav__body">
-			<ScrollArea>
-				{#key page.url}
-					<nav class="rz-nav__nav">
-						{#each Object.entries(routesGroups) as [groupName, routes], index (index)}
-							{#if groupName !== 'none'}
-								{@const icon = getGroupIcon(groupName)}
-								<NavGroup name={groupName} {icon} navCollapsed={isCollapsed}>
-									{#each routes as route (route.url)}
-										<NavItem href={route.url} {isCollapsed} {route} />
-									{/each}
-								</NavGroup>
-							{/if}
-						{/each}
-						{#each routesGroups.none as route (route.url)}
-							<div class="rz-nav__group-none">
-								<NavItem href={route.url} {isCollapsed} {route} />
-							</div>
-						{/each}
-					</nav>
-				{/key}
-			</ScrollArea>
+    <div class="rz-nav__body">
+      <ScrollArea>
+        {#key page.url}
+          <nav class="rz-nav__nav">
+            {#each Object.entries(routesGroups) as [groupName, routes], index (index)}
+              {#if groupName !== 'none'}
+                {@const icon = getGroupIcon(groupName)}
+                <NavGroup name={groupName} {icon} navCollapsed={isCollapsed}>
+                  {#each routes as route (route.url)}
+                    <NavItem href={route.url} {isCollapsed} {route} />
+                  {/each}
+                </NavGroup>
+              {/if}
+            {/each}
+            {#each routesGroups.none as route (route.url)}
+              <div class="rz-nav__group-none">
+                <NavItem href={route.url} {isCollapsed} {route} />
+              </div>
+            {/each}
+          </nav>
+        {/key}
+      </ScrollArea>
 
-			<div class="rz-nav__user">
-				<UserButton navCollapsed={isCollapsed} />
-			</div>
-		</div>
-	</div>
+      <div class="rz-nav__user">
+        <UserButton navCollapsed={isCollapsed} />
+      </div>
+    </div>
+  </div>
 
-	<button
-		class="rz-nav__toggle"
-		onclick={() => setCollapsed(!isCollapsed)}
-		aria-label="Toggle navigation"
-	>
-	</button>
+  <button
+    class="rz-nav__toggle"
+    onclick={() => setCollapsed(!isCollapsed)}
+    aria-label="Toggle navigation"
+  >
+  </button>
 </div>
 
 <style>
-	:root {
-		--rz-nav-button-height: var(--rz-size-12);
-		--rz-nav-bg: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-0)));
+  :root {
+    --rz-nav-button-height: var(--rz-size-12);
+    --rz-nav-bg: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-0)));
 
-		--rz-nav-button-bg: light-dark(hsl(var(--rz-gray-19)), hsl(var(--rz-gray-2)));
-		--rz-nav-group-bg: light-dark(hsl(var(--rz-gray-17)), hsl(var(--rz-gray-1)));
-		--rz-nav-group-border-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-2)));
-	}
+    --rz-nav-button-bg: light-dark(hsl(var(--rz-gray-19)), hsl(var(--rz-gray-2)));
+    --rz-nav-group-bg: light-dark(hsl(var(--rz-gray-17)), hsl(var(--rz-gray-1)));
+    --rz-nav-group-border-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-2)));
+  }
 
-	.rz-nav {
-		position: fixed;
-		z-index: 100;
-		bottom: 0;
-		left: 0;
-		top: 0;
-		padding: var(--rz-size-2) var(--rz-size-5);
-		background-color: var(--rz-nav-bg);
-		border-right: var(--rz-border);
-		width: var(--rz-size-72);
+  .rz-nav {
+    position: fixed;
+    z-index: 100;
+    bottom: 0;
+    left: 0;
+    top: 0;
+    padding: var(--rz-size-2) var(--rz-size-5);
+    background-color: var(--rz-nav-bg);
+    border-right: var(--rz-border);
+    width: var(--rz-size-72);
 
-		.rz-nav__toggle {
-			position: absolute;
-			display: none;
-			align-items: center;
-			justify-content: center;
-			width: var(--rz-size-6);
-			height: 100vh;
-			right: 0;
-			translate: var(--rz-size-3) 0;
-			z-index: 10;
-			top: 0;
-			display: none;
-			cursor: w-resize;
-			padding: var(--rz-size-2);
-			@media (min-width: 1024px) {
-				display: flex;
-			}
-		}
-	}
-	.rz-nav--collapsed {
-		width: var(--rz-size-20);
-		padding: var(--rz-size-3);
-		:global(.rz-button-nav) {
-			justify-content: start;
-		}
-		.rz-nav__toggle {
-			cursor: e-resize;
-		}
-	}
-	.rz-nav__content {
-		display: flex;
-		height: 100%;
-		flex-direction: column;
-	}
-	.rz-nav__header {
-		display: flex;
-		height: var(--rz-size-14);
-		flex-shrink: 0;
-		align-items: center;
-		justify-content: space-between;
-		padding-right: var(--rz-size-4);
-		padding-left: var(--rz-size-4);
+    .rz-nav__toggle {
+      position: absolute;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      width: var(--rz-size-6);
+      height: 100vh;
+      right: 0;
+      translate: var(--rz-size-3) 0;
+      z-index: 10;
+      top: 0;
+      display: none;
+      cursor: w-resize;
+      padding: var(--rz-size-2);
+      @media (min-width: 1024px) {
+        display: flex;
+      }
+    }
+  }
+  .rz-nav--collapsed {
+    width: var(--rz-size-20);
+    padding: var(--rz-size-3);
+    :global(.rz-button-nav) {
+      justify-content: start;
+    }
+    .rz-nav__toggle {
+      cursor: e-resize;
+    }
+  }
+  .rz-nav__content {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+  }
+  .rz-nav__header {
+    display: flex;
+    height: var(--rz-size-14);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: var(--rz-size-4);
+    padding-left: var(--rz-size-4);
 
-		&.rz-nav__header--collapsed {
-			justify-content: center;
-		}
-	}
-	.rz-nav__body {
-		display: flex;
-		height: 100%;
-		flex-direction: column;
-		justify-content: space-between;
-	}
-	.rz-nav__group-none {
-		padding: 0 var(--rz-size-4);
-		display: flex;
-		flex-direction: column;
-		gap: var(--rz-size-2);
-	}
-	.rz-nav__nav {
-		border-radius: var(--rz-radius-lg);
-	}
-	.rz-nav--collapsed .rz-nav__nav {
-		align-items: center;
-	}
-	.rz-nav__user {
-		padding-bottom: var(--rz-size-2);
-	}
+    &.rz-nav__header--collapsed {
+      justify-content: center;
+    }
+  }
+  .rz-nav__body {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .rz-nav__group-none {
+    padding: 0 var(--rz-size-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--rz-size-2);
+  }
+  .rz-nav__nav {
+    border-radius: var(--rz-radius-lg);
+  }
+  .rz-nav--collapsed .rz-nav__nav {
+    align-items: center;
+  }
+  .rz-nav__user {
+    padding-bottom: var(--rz-size-2);
+  }
 </style>

package/dist/panel/components/ui/nav/NavGroup.svelte

@@ -1,103 +1,103 @@
 <script lang="ts">
-	import { ChevronDown, ChevronUp, type IconProps } from '@lucide/svelte';
-	import type { Component, Snippet } from 'svelte';
+  import { ChevronDown, ChevronUp, type IconProps } from '@lucide/svelte';
+  import type { Component, Snippet } from 'svelte';
 
-	type Props = {
-		children: Snippet;
-		navCollapsed: boolean;
-		name: string;
-		icon: Component<IconProps> | null;
-	};
-	const { children, name, navCollapsed, icon }: Props = $props();
+  type Props = {
+    children: Snippet;
+    navCollapsed: boolean;
+    name: string;
+    icon: Component<IconProps> | null;
+  };
+  const { children, name, navCollapsed, icon }: Props = $props();
 
-	let groupCollapsed = $state(false);
+  let groupCollapsed = $state(false);
 
-	const setCollapsed = () => {
-		groupCollapsed = !groupCollapsed;
-		localStorage.setItem(`NavGroupCollapsed:${name}`, groupCollapsed.toString());
-	};
+  const setCollapsed = () => {
+    groupCollapsed = !groupCollapsed;
+    localStorage.setItem(`NavGroupCollapsed:${name}`, groupCollapsed.toString());
+  };
 
-	$effect(() => {
-		groupCollapsed = localStorage.getItem(`NavGroupCollapsed:${name}`) === 'true';
-	});
+  $effect(() => {
+    groupCollapsed = localStorage.getItem(`NavGroupCollapsed:${name}`) === 'true';
+  });
 
-	const navCollapsedClassModifier = $derived(navCollapsed ? 'rz-nav-group--nav-collapsed' : '');
-	const groupCollapsedClassModifier = $derived(groupCollapsed ? 'rz-nav-group--collapsed' : '');
+  const navCollapsedClassModifier = $derived(navCollapsed ? 'rz-nav-group--nav-collapsed' : '');
+  const groupCollapsedClassModifier = $derived(groupCollapsed ? 'rz-nav-group--collapsed' : '');
 </script>
 
 <div class="rz-nav-group {navCollapsedClassModifier} {groupCollapsedClassModifier}">
-	{#if !navCollapsed}
-		<button onclick={setCollapsed} class="rz-nav-group__trigger">
-			<span>
-				{#if icon}
-					{@const IconComp = icon}
-					<IconComp size="15" />
-				{/if}
-				{name}
-			</span>
-			{#if groupCollapsed}
-				<ChevronDown size="12" />
-			{:else}
-				<ChevronUp size="12" />
-			{/if}
-		</button>
-	{/if}
-	{#if !groupCollapsed || navCollapsed}
-		<div class="rz-nav-group__content">
-			{@render children()}
-		</div>
-	{/if}
+  {#if !navCollapsed}
+    <button onclick={setCollapsed} class="rz-nav-group__trigger">
+      <span>
+        {#if icon}
+          {@const IconComp = icon}
+          <IconComp size="15" />
+        {/if}
+        {name}
+      </span>
+      {#if groupCollapsed}
+        <ChevronDown size="12" />
+      {:else}
+        <ChevronUp size="12" />
+      {/if}
+    </button>
+  {/if}
+  {#if !groupCollapsed || navCollapsed}
+    <div class="rz-nav-group__content">
+      {@render children()}
+    </div>
+  {/if}
 </div>
 
 <style global>
-	.rz-nav-group {
-		width: 100%;
-		position: sticky;
-		top: 0;
-		z-index: 20;
-		margin-bottom: var(--rz-size-2);
-		background-color: var(--rz-nav-button-bg);
-		border-radius: var(--rz-radius-lg);
-	}
+  .rz-nav-group {
+    width: 100%;
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    margin-bottom: var(--rz-size-2);
+    background-color: var(--rz-nav-button-bg);
+    border-radius: var(--rz-radius-lg);
+  }
 
-	.rz-nav-group__content {
-		display: grid;
-		padding: 0 var(--rz-size-4);
-		background-color: var(--rz-nav-group-bg);
-		border-bottom-left-radius: var(--rz-radius-lg);
-		border-bottom-right-radius: var(--rz-radius-lg);
-	}
+  .rz-nav-group__content {
+    display: grid;
+    padding: 0 var(--rz-size-4);
+    background-color: var(--rz-nav-group-bg);
+    border-bottom-left-radius: var(--rz-radius-lg);
+    border-bottom-right-radius: var(--rz-radius-lg);
+  }
 
-	.rz-nav-group__trigger {
-		padding: var(--rz-size-3);
-		display: flex;
-		width: 100%;
-		height: var(--rz-input-height);
-		gap: var(--rz-size-2);
-		align-items: center;
-		text-transform: capitalize;
-		justify-content: space-between;
-		text-align: left;
-		border-bottom: 1px solid var(--rz-nav-group-border-color);
+  .rz-nav-group__trigger {
+    padding: var(--rz-size-3);
+    display: flex;
+    width: 100%;
+    height: var(--rz-input-height);
+    gap: var(--rz-size-2);
+    align-items: center;
+    text-transform: capitalize;
+    justify-content: space-between;
+    text-align: left;
+    border-bottom: 1px solid var(--rz-nav-group-border-color);
 
-		span {
-			display: flex;
-			align-items: center;
-			gap: var(--rz-size-3);
-		}
-	}
+    span {
+      display: flex;
+      align-items: center;
+      gap: var(--rz-size-3);
+    }
+  }
 
-	.rz-nav-group--collapsed {
-		.rz-nav-group__trigger {
-			border-color: transparent;
-		}
-	}
+  .rz-nav-group--collapsed {
+    .rz-nav-group__trigger {
+      border-color: transparent;
+    }
+  }
 
-	.rz-nav-group--nav-collapsed {
-		/*padding-top: var(--rz-size-2);*/
-		.rz-nav-group__content {
-			background-color: transparent;
-			padding: 0 var(--rz-size-5);
-		}
-	}
+  .rz-nav-group--nav-collapsed {
+    /*padding-top: var(--rz-size-2);*/
+    .rz-nav-group__content {
+      background-color: transparent;
+      padding: 0 var(--rz-size-5);
+    }
+  }
 </style>