Merge pull request #1527 from undb-xyz/release/v0.8.2

.github/workflows/build-and-push-to-registry.yaml

@@ -13,25 +13,25 @@ jobs:
       - name: Fetch Sources
         uses: actions/checkout@v4
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v3
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
       - name: Log in to the Container registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: |
             ghcr.io/${{ github.repository }}
 
       - name: Build undb and push
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v5
         with:
           push: true
           context: .

CHANGELOG.md

@@ -1,3 +1,5 @@
+## v0.8.2
+
 ## v0.8.1
 
 ## v0.8.0

apps/backend/package.json

@@ -23,9 +23,9 @@
     "@nestjs/serve-static": "^4.0.0",
     "@nestjs/terminus": "^10.0.1",
     "@opentelemetry/auto-instrumentations-node": "^0.39.2",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.42.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.43.0",
     "@opentelemetry/resources": "^1.15.2",
-    "@opentelemetry/sdk-node": "^0.42.0",
+    "@opentelemetry/sdk-node": "^0.43.0",
     "@opentelemetry/semantic-conventions": "^1.15.2",
     "@temporalio/activity": "^1.8.4",
     "@temporalio/client": "^1.8.4",

apps/frontend/src/lib/cell/CellInput/Color.svelte

@@ -2,9 +2,11 @@
 	import { cn } from '$lib/utils'
 	import { Input } from '$lib/components/ui/input'
 	export let value: string | undefined = undefined
+
+	export let readonly = false
 </script>
 
 <div {...$$restProps} class={cn('inline-flex items-center gap-2 px-2 text-sm', $$restProps.class)}>
-	<Input bind:value autocomplete="off" type="color" readonly={$$restProps.readonly} />
+	<Input bind:value autocomplete="off" type="color" readonly={readonly ? true : undefined} />
 	<span>{value ?? ''}</span>
 </div>

apps/frontend/src/lib/cell/CellInput/DateInput.svelte

@@ -3,6 +3,8 @@
 	import { Input } from '$lib/components/ui/input'
 	import { isString } from 'lodash-es'
 
+	export let readonly = false
+
 	function dateIsValid(date: string) {
 		return !Number.isNaN(new Date(date).getTime())
 	}
@@ -13,4 +15,4 @@
 	$: value = dateValue ? startOfDay(new Date(dateValue)).toISOString() : ''
 </script>
 
-<Input type="date" bind:value={dateValue} class={$$restProps.class} />
+<Input type="date" bind:value={dateValue} class={$$restProps.class} readonly={readonly ? true : undefined} />

apps/frontend/src/lib/cell/CellInput/DateRange.svelte

@@ -5,6 +5,7 @@
 
 	export let field: DateRangeField
 	export let value: [string | undefined, string | undefined] = [undefined, undefined]
+	export let readonly = false
 
 	$: if (!value) {
 		value = [undefined, undefined]
@@ -13,14 +14,14 @@
 
 <div class="flex gap-2 items-center">
 	{#if !!field?.timeFormatString}
-		<DateTimeInput bind:value={value[0]} class={$$restProps.class} />
+		<DateTimeInput bind:value={value[0]} class={$$restProps.class} {readonly} />
 	{:else}
-		<DateInput bind:value={value[0]} class={$$restProps.class} />
+		<DateInput bind:value={value[0]} class={$$restProps.class} {readonly} />
 	{/if}
 	<span>-</span>
 	{#if !!field?.timeFormatString}
-		<DateTimeInput bind:value={value[1]} class={$$restProps.class} />
+		<DateTimeInput bind:value={value[1]} class={$$restProps.class} {readonly} />
 	{:else}
-		<DateInput bind:value={value[1]} class={$$restProps.class} />
+		<DateInput bind:value={value[1]} class={$$restProps.class} {readonly} />
 	{/if}
 </div>

apps/frontend/src/lib/cell/CellInput/DateTimeInput.svelte

@@ -3,9 +3,10 @@
 	import { Input } from '$lib/components/ui/input'
 
 	export let value: string | undefined = undefined
+	export let readonly = false
 
 	let dateValue = value ? format(new Date(value), "yyyy-MM-dd'T'HH:mm") : ''
 	$: value = dateValue ? new Date(dateValue).toISOString() : ''
 </script>
 
-<Input type="datetime-local" bind:value={dateValue} {...$$restProps} />
+<Input type="datetime-local" bind:value={dateValue} {...$$restProps} readonly={readonly ? true : undefined} />

apps/frontend/src/lib/cell/CellInput/Email.svelte

@@ -3,6 +3,8 @@
 	import { Input } from '$lib/components/ui/input'
 	export let value: string | undefined = undefined
 	export let field: EmailField
+
+	export let readonly = false
 </script>
 
-<Input bind:value class={$$restProps.class} autocomplete="off" type="email"></Input>
+<Input bind:value class={$$restProps.class} autocomplete="off" type="email" readonly={readonly ? true : undefined} />

apps/frontend/src/lib/cell/CellInput/Json.svelte

@@ -3,6 +3,7 @@
 	import { JSONEditor, Mode, type Content, type OnChange } from 'svelte-jsoneditor'
 	export let value: Json | undefined = undefined
 	export let field: JsonField
+	export let readonly = false
 
 	let content: Content = {
 		text: undefined,
@@ -18,7 +19,7 @@
 
 <JSONEditor
 	{content}
-	readOnly={$$restProps.readonly}
+	readOnly={readonly ? true : undefined}
 	onChange={handleChange}
 	mode={Mode.text}
 	mainMenuBar={false}

apps/frontend/src/lib/cell/CellInput/Number.svelte

@@ -8,6 +8,8 @@
 			value = target.value === '' ? null : Number(target.value)
 		}
 	}
+
+	export let readonly = false
 </script>
 
-<Input {value} class={$$restProps.class} type="number" on:change={onChange} />
+<Input {value} class={$$restProps.class} type="number" on:change={onChange} readonly={readonly ? true : undefined} />

apps/frontend/src/lib/cell/CellInput/String.svelte

@@ -3,6 +3,8 @@
 	import { Input } from '$lib/components/ui/input'
 	export let value: string | undefined = undefined
 	export let field: StringField
+
+	export let readonly = false
 </script>
 
-<Input bind:value class={$$restProps.class} autocomplete="off" />
+<Input bind:value class={$$restProps.class} autocomplete="off" readonly={readonly ? true : undefined} />

apps/frontend/src/lib/cell/CellInput/Url.svelte

@@ -3,6 +3,15 @@
 	import { Input } from '$lib/components/ui/input'
 	export let value: string | undefined = undefined
 	export let field: EmailField
+
+	export let readonly = false
 </script>
 
-<Input bind:value placeholder="https://example.com" class={$$restProps.class} autocomplete="off" type="url" />
+<Input
+	bind:value
+	placeholder="https://example.com"
+	class={$$restProps.class}
+	autocomplete="off"
+	type="url"
+	readonly={readonly ? true : undefined}
+/>

apps/frontend/src/lib/field/FieldMenu.svelte

@@ -4,7 +4,7 @@
 	import { currentFieldId, getField, getTable, getView, listRecordFn } from '$lib/store/table'
 	import { confirmDeleteField, duplicateFieldModal, flsModal, updateFieldModal } from '$lib/store/modal'
 	import { trpc } from '$lib/trpc/client'
-	import { canDisplay, canDuplicate, type ISortDirection } from '@undb/core'
+	import { canDisplay, canDuplicate, isSortable, type ISortDirection } from '@undb/core'
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
 	import { noop } from 'lodash-es'
 	import { t } from '$lib/i18n'
@@ -72,15 +72,15 @@
 </script>
 
 <DropdownMenu.Item
-	class="items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium"
+	class="items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium hover:bg-gray-100"
 	on:click={() => updateFieldModal.open()}
 >
 	<i class="ti ti-edit text-sm" />
 	<span>{$t('Update Field')}</span>
 </DropdownMenu.Item>
 {#if $field && canDuplicate($field.type)}
 	<DropdownMenu.Item
-		class="items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium"
+		class="items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium hover:bg-gray-100"
 		on:click={() => duplicateFieldModal.open()}
 	>
 		<i class="ti ti-copy text-sm" />
@@ -92,11 +92,11 @@
 
 <FieldMenuFieldComponent
 	field={$field}
-	class="items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium"
+	class="items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium hover:bg-gray-100"
 />
 
 <DropdownMenu.Item
-	class="items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium"
+	class="items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium hover:bg-gray-100"
 	on:click={() => {
 		if ($field) {
 			togglePin($field.id.value)
@@ -112,7 +112,7 @@
 	{/if}
 </DropdownMenu.Item>
 <DropdownMenu.Item
-	class="items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium"
+	class="items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium hover:bg-gray-100"
 	on:click={() => {
 		if ($field) {
 			$hideField.mutate({ tableId: $table.id.value, fieldId: $field.id.value, viewId: $view.id.value, hidden: true })
@@ -125,40 +125,42 @@
 
 <DropdownMenu.Separator />
 
+{#if $field && isSortable($field.type)}
+	<DropdownMenu.Item
+		class={cn(
+			'items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium hover:bg-gray-100',
+			fieldDirection === 'asc' && 'bg-gray-100',
+		)}
+		on:click={() => sort('asc')}
+	>
+		<i class="ti ti-sort-ascending-2 text-sm" />
+		<span>
+			{#if fieldDirection === 'asc'}
+				{$t('Delete Sort Ascending')}
+			{:else}
+				{$t('Sort Ascending')}
+			{/if}
+		</span>
+	</DropdownMenu.Item>
+	<DropdownMenu.Item
+		class={cn(
+			'items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium hover:bg-gray-100',
+			fieldDirection === 'desc' && 'bg-gray-100',
+		)}
+		on:click={() => sort('desc')}
+	>
+		<i class="ti ti-sort-descending-2 text-sm" />
+		<span>
+			{#if fieldDirection === 'desc'}
+				{$t('Delete Sort Descending')}
+			{:else}
+				{$t('Sort Descending')}
+			{/if}
+		</span>
+	</DropdownMenu.Item>
+{/if}
 <DropdownMenu.Item
-	class={cn(
-		'items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium',
-		fieldDirection === 'asc' && 'bg-gray-100',
-	)}
-	on:click={() => sort('asc')}
->
-	<i class="ti ti-sort-ascending-2 text-sm" />
-	<span>
-		{#if fieldDirection === 'asc'}
-			{$t('Delete Sort Ascending')}
-		{:else}
-			{$t('Sort Ascending')}
-		{/if}
-	</span>
-</DropdownMenu.Item>
-<DropdownMenu.Item
-	class={cn(
-		'items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium',
-		fieldDirection === 'desc' && 'bg-gray-100',
-	)}
-	on:click={() => sort('desc')}
->
-	<i class="ti ti-sort-descending-2 text-sm" />
-	<span>
-		{#if fieldDirection === 'desc'}
-			{$t('Delete Sort Descending')}
-		{:else}
-			{$t('Sort Descending')}
-		{/if}
-	</span>
-</DropdownMenu.Item>
-<DropdownMenu.Item
-	class={cn('items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium')}
+	class={cn('items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium hover:bg-gray-100')}
 	on:click={() => flsModal.open()}
 >
 	<i class="ti ti-shield-checkered-filled text-sm" />
@@ -168,7 +170,7 @@
 </DropdownMenu.Item>
 {#if $field && !$field.display && canDisplay($field.type)}
 	<DropdownMenu.Item
-		class={cn('items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium')}
+		class={cn('items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium hover:bg-gray-100')}
 		on:click={() => {
 			if (!$field) return
 			$setFieldDisplay.mutate({
@@ -185,7 +187,10 @@
 	</DropdownMenu.Item>
 {/if}
 <DropdownMenu.Separator />
-<DropdownMenu.Item class={'items-center gap-2 text-xs text-red-400'} on:click={() => ($confirmDeleteField = true)}>
+<DropdownMenu.Item
+	class={'items-center gap-2 text-xs text-red-400 hover:bg-red-50'}
+	on:click={() => ($confirmDeleteField = true)}
+>
 	<i class="ti ti-trash text-sm" />
 	<span>
 		{$t('Delete Field')}

apps/frontend/src/lib/share/ShareDropdown.svelte

@@ -10,6 +10,7 @@
 	import * as Popover from '$lib/components/ui/popover'
 
 	import { copyText } from 'svelte-copy'
+	import { Textarea } from '$components/ui/textarea'
 
 	export let url: string
 	export let share: IQueryShare | null
@@ -102,9 +103,9 @@
 						</div>
 					{/if}
 				</Label>
-				<h4>Embed</h4>
+				<h5>{$t('Embed', { ns: 'common' })}</h5>
 				<div class="flex items-center gap-2">
-					<Input value={iframe} readonly></Input>
+					<Textarea value={iframe} readonly />
 					{#if iframeCopied}
 						<i class="ti ti-check text-green-500" />
 					{:else}

apps/frontend/src/lib/table/FilterItem.svelte

@@ -6,8 +6,6 @@
 	import { isFilterable, type Field, type IFilter, isOperatorWithoutValue, type IQueryFieldSchema } from '@undb/core'
 	import { allTableFields, getTable } from '$lib/store/table'
 	import FilterValue from './FilterValue.svelte'
-	import { quintOut } from 'svelte/easing'
-	import { fly } from 'svelte/transition'
 	export let filter: Partial<IFilter>
 
 	export let index: number
@@ -24,10 +22,7 @@
 	$: withoutValue = !!filter.operator && isOperatorWithoutValue(filter.operator)
 </script>
 
-<li
-	class="flex h-10 items-center justify-between gap-2 dark:border-gray-200"
-	transition:fly={{ duration: 300, x: 100, easing: quintOut }}
->
+<li class="flex h-10 items-center justify-between gap-2 dark:border-gray-200">
 	{#if !readonly}
 		<i role="button" class="handle ti ti-grip-vertical dark:text-white" />
 	{/if}

apps/frontend/src/lib/table/FilterMenu.svelte

@@ -12,7 +12,7 @@
 	import Badge from '$components/ui/badge/badge.svelte'
 	import * as Alert from '$lib/components/ui/alert'
 
-	let value = $filters
+	$: value = $filters
 
 	$: validFilters = getValidFilters(value)