@bagelink/vue 0.0.665 → 0.0.669

package/dist/components/TableSchema.vue.d.ts

@@ -1,14 +1,15 @@
 import { BglFormSchemaT } from '..';
 
+export type SortDirectionsT = 'ASC' | 'DESC';
 declare const _default: <T extends Record<string, any>>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{
-        onSelect?: ((...args: any[]) => any) | undefined;
-        "onUpdate:selectedItems"?: ((...args: any[]) => any) | undefined;
-        onOrderBy?: ((...args: any[]) => any) | undefined;
+        onSelect?: ((args_0: T) => any) | undefined;
+        "onUpdate:selectedItems"?: ((args_0: string[]) => any) | undefined;
+        onOrderBy?: ((args_0: string) => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>> & {
-        onSelect?: ((...args: any[]) => any) | undefined;
-        "onUpdate:selectedItems"?: ((...args: any[]) => any) | undefined;
-        onOrderBy?: ((...args: any[]) => any) | undefined;
+        onSelect?: ((args_0: T) => any) | undefined;
+        "onUpdate:selectedItems"?: ((args_0: string[]) => any) | undefined;
+        onOrderBy?: ((args_0: string) => any) | undefined;
     }, never>) & ({
         selectedItems?: string[];
         data: T[];
@@ -24,7 +25,7 @@ declare const _default: <T extends Record<string, any>>(__VLS_props: Awaited<typ
         row: Record<string, any>;
         field: import('..').Field<T>;
     }) => any>>>;
-    emit: (event: "select" | "update:selectedItems" | "orderBy", ...args: any[]) => void;
+    emit: ((evt: "select", args_0: T) => void) & ((evt: "update:selectedItems", args_0: string[]) => void) & ((evt: "orderBy", args_0: string) => void);
 }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }> & {

package/dist/components/TableSchema.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableSchema.vue.d.ts","sourceRoot":"","sources":["../../src/components/TableSchema.vue"],"names":[],"mappings":"AAEA,OAAO,EAEN,KAAK,cAAc,EAKnB,MAAM,eAAe,CAAA;yBAKL,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eACjC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,OAAO,CAAC,cACrC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC1E,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAwiB1D,cAAc,CAAC,gCAAgC,CAAC;;;;;;;;;wBAZtC,MAAM,EAAE;cAClB,CAAC,EAAE;iBACA,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC;qBACzC,MAAM,EAAE;;kBAEV,GAAG;qBACA,GAAG;MAMuG,6EAAkC,CAAC,6GAAwD;oBACpM,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;WACH,UAAU;;;UApDqE,GAAG,GAoDjD;;;;;YAII,OAAO,CAAC,OAAO,WAAW,CAAC;;AAljBvE,wBAkjB2E"}
+{"version":3,"file":"TableSchema.vue.d.ts","sourceRoot":"","sources":["../../src/components/TableSchema.vue"],"names":[],"mappings":"AAEA,OAAO,EAEN,KAAK,cAAc,EAKnB,MAAM,eAAe,CAAA;AAItB,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,CAAA;yBAE3B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eACjC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,OAAO,CAAC,cACrC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC1E,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAgjB1D,cAAc,CAAC,gCAAgC,CAAC;;;;;;;;;wBAZtC,MAAM,EAAE;cAClB,CAAC,EAAE;iBACA,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC;qBACzC,MAAM,EAAE;;kBAEV,GAAG;qBACA,GAAG;MAMuG,6EAAkC,CAAC,6GAAwD;oBACpM,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;WACH,UAAU;;;UApDqE,GAAG,GAoDjD;;;;;YAII,OAAO,CAAC,OAAO,WAAW,CAAC;;AA1jBvE,wBA0jB2E"}

package/dist/index.cjs

@@ -6364,7 +6364,7 @@ function useVerticalVirtualList(options, list) {
     containerRef
   };
 }
-const _withScopeId$3 = (n2) => (vue.pushScopeId("data-v-e893b127"), n2 = n2(), vue.popScopeId(), n2);
+const _withScopeId$3 = (n2) => (vue.pushScopeId("data-v-a4afe8dc"), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$D = {
   key: 0,
   class: "loading-table-wrapper z-99 h-100 w-100 absolute inset"
@@ -6398,7 +6398,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
   emits: /* @__PURE__ */ vue.mergeModels(["update:selectedItems", "orderBy", "select"], ["update:loading", "update:itemHeight"]),
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "f952eb70": vue.unref(computedItemHiehgt)
+      "15f476b1": vue.unref(computedItemHiehgt)
     }));
     const props2 = __props;
     const emit2 = __emit;
@@ -6603,7 +6603,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-e893b127"]]);
+const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-a4afe8dc"]]);
 const _sfc_main$F = {};
 const _hoisted_1$C = { class: "flex space-between" };
 function _sfc_render$1(_ctx, _cache) {
@@ -47251,9 +47251,9 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     const selectedOption = vue.useModel(__props, "modelValue");
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", null, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (opt, index2) => {
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (opt) => {
           return vue.openBlock(), vue.createElementBlock("label", {
-            key: index2,
+            key: opt.id,
             class: "border round p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover",
             for: opt.id
           }, [
@@ -47281,7 +47281,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
               ]),
               vue.renderSlot(_ctx.$slots, "radioItem", vue.mergeProps({ ref_for: true }, opt), void 0, true)
             ]),
-            !_ctx.deletable ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+            _ctx.deletable ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
               key: 0,
               class: "ms-auto",
               flat: "",
@@ -47295,7 +47295,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-751ec522"]]);
+const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-d6ebc385"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }

package/dist/index.mjs

@@ -6362,7 +6362,7 @@ function useVerticalVirtualList(options, list) {
     containerRef
   };
 }
-const _withScopeId$3 = (n2) => (pushScopeId("data-v-e893b127"), n2 = n2(), popScopeId(), n2);
+const _withScopeId$3 = (n2) => (pushScopeId("data-v-a4afe8dc"), n2 = n2(), popScopeId(), n2);
 const _hoisted_1$D = {
   key: 0,
   class: "loading-table-wrapper z-99 h-100 w-100 absolute inset"
@@ -6396,7 +6396,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["update:selectedItems", "orderBy", "select"], ["update:loading", "update:itemHeight"]),
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "f952eb70": unref(computedItemHiehgt)
+      "15f476b1": unref(computedItemHiehgt)
     }));
     const props2 = __props;
     const emit2 = __emit;
@@ -6601,7 +6601,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-e893b127"]]);
+const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-a4afe8dc"]]);
 const _sfc_main$F = {};
 const _hoisted_1$C = { class: "flex space-between" };
 function _sfc_render$1(_ctx, _cache) {
@@ -47249,9 +47249,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const selectedOption = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.options, (opt, index2) => {
+        (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.options, (opt) => {
           return openBlock(), createElementBlock("label", {
-            key: index2,
+            key: opt.id,
             class: "border round p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover",
             for: opt.id
           }, [
@@ -47279,7 +47279,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               ]),
               renderSlot(_ctx.$slots, "radioItem", mergeProps({ ref_for: true }, opt), void 0, true)
             ]),
-            !_ctx.deletable ? (openBlock(), createBlock(unref(Btn), {
+            _ctx.deletable ? (openBlock(), createBlock(unref(Btn), {
               key: 0,
               class: "ms-auto",
               flat: "",
@@ -47293,7 +47293,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-751ec522"]]);
+const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-d6ebc385"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }

package/dist/style.css

@@ -647,19 +647,19 @@ a[data-v-26f1062f] {
 }
 }
 
-.selected[data-v-e893b127] {
+.selected[data-v-a4afe8dc] {
 	background: var(--bgl-primary-tint);
 }
-tbody tr.selected[data-v-e893b127]:hover {
+tbody tr.selected[data-v-a4afe8dc]:hover {
 	background: var(--bgl-primary-light);
 }
-.loading-table[data-v-e893b127] {
+.loading-table[data-v-a4afe8dc] {
 	position: relative;
 }
-.inset[data-v-e893b127] {
+.inset[data-v-a4afe8dc] {
 	inset: 0;
 }
-.loading-table-animation[data-v-e893b127] {
+.loading-table-animation[data-v-a4afe8dc] {
 	--size: 60px;
 	top: 30vh;
 	inset-inline-start: calc(50% - var(--size));
@@ -667,9 +667,9 @@ tbody tr.selected[data-v-e893b127]:hover {
 	border-top: 4px solid var(--bgl-primary);
 	width: var(--size);
 	height: var(--size);
-	animation: loading-table-e893b127 1s linear infinite;
+	animation: loading-table-a4afe8dc 1s linear infinite;
 }
-@keyframes loading-table-e893b127 {
+@keyframes loading-table-a4afe8dc {
 0% {
 		transform: translate(-50%, -50%) rotate(0deg);
 }
@@ -677,52 +677,52 @@ tbody tr.selected[data-v-e893b127]:hover {
 		transform: translate(-50%, -50%) rotate(360deg);
 }
 }
-.list-arrows[data-v-e893b127] {
+.list-arrows[data-v-a4afe8dc] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-e893b127] {
+.list-arrows .bgl_icon-font[data-v-a4afe8dc] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-e893b127] {
+.list-arrows.sorted[data-v-a4afe8dc] {
 	opacity: 1;
 }
-.col img[data-v-e893b127] {
+.col img[data-v-a4afe8dc] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-e893b127] {
+.list-arrows.sorted .desc[data-v-a4afe8dc] {
 	transform: rotate(180deg);
 	display: inline-block;
 }
-table[data-v-e893b127] {
+table[data-v-a4afe8dc] {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 	width: 100%;
 }
-th[data-v-e893b127] {
+th[data-v-a4afe8dc] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
 	top: 0;
 	z-index: 2;
 	background: var(--bgl-white);
-	height: var(--f952eb70);
+	height: var(--15f476b1);
 	vertical-align: bottom;
 	font-weight: 400;
 	text-align: start;
 }
-.embedded-field[data-v-e893b127] {
+.embedded-field[data-v-a4afe8dc] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-e893b127] {
+.row[data-v-a4afe8dc] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-e893b127] {
+.row.first-row[data-v-a4afe8dc] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -731,7 +731,7 @@ th[data-v-e893b127] {
 	background: var(--bgl-white);
 	vertical-align: bottom;
 }
-.row.first-row[data-v-e893b127]::after {
+.row.first-row[data-v-a4afe8dc]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -739,30 +739,30 @@ th[data-v-e893b127] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-e893b127] {
+.first-row .col[data-v-a4afe8dc] {
 	cursor: pointer;
 	background: var(--bgl-white);
 }
-.col[data-v-e893b127] {
+.col[data-v-a4afe8dc] {
 	white-space: nowrap;
 	padding: 0.75rem 1rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 	align-items: center;
 }
-.col[data-v-e893b127]:has(.bagel-input) {
+.col[data-v-a4afe8dc]:has(.bagel-input) {
 	padding: 0rem 0.25rem;
 }
-.col > div[data-v-e893b127] {
+.col > div[data-v-a4afe8dc] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-e893b127] {
+.max-col-width[data-v-a4afe8dc] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-e893b127] {
+.col.check .bgl_icon-font[data-v-a4afe8dc] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -773,35 +773,35 @@ th[data-v-e893b127] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-e893b127] {
+.rows[data-v-a4afe8dc] {
 	font-size: 0.88em;
 }
-.table-list[data-v-e893b127] {
+.table-list[data-v-a4afe8dc] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-e893b127] {
+.BagelTable .table-list[data-v-a4afe8dc] {
 	overflow: unset;
 }
-.row-item[data-v-e893b127] {
-	height: var(--f952eb70);
+.row-item[data-v-a4afe8dc] {
+	height: var(--15f476b1);
 	transition: all 200ms ease;
 }
-.row-item[data-v-e893b127]:hover {
+.row-item[data-v-a4afe8dc]:hover {
 	background: var(--bgl-gray-light);
 }
-.row-item input[type='checkbox'][data-v-e893b127] {
+.row-item input[type='checkbox'][data-v-a4afe8dc] {
 	margin-top: 0.45rem !important;
 	accent-color: var(--bgl-accent-color);
 }
-.infinite-wrapper[data-v-e893b127] {
+.infinite-wrapper[data-v-a4afe8dc] {
 	overflow-y: auto;
 	width: 100%;
 }
-input[type='checkbox'][data-v-e893b127] {
+input[type='checkbox'][data-v-a4afe8dc] {
 	margin-top: 0.3rem !important;
 	accent-color: var(--bgl-accent-color);
 	transform: scale(1.2);
@@ -813,7 +813,7 @@ input[type='checkbox'][data-v-e893b127] {
 	height: 0.85rem;
 	width: 0.85rem;
 }
-input[type='checkbox'][data-v-e893b127]::before {
+input[type='checkbox'][data-v-a4afe8dc]::before {
 	content: '';
 	height: 0.85rem;
 	width: 0.85rem;
@@ -826,18 +826,18 @@ input[type='checkbox'][data-v-e893b127]::before {
 	transform: scale(1);
 	position: absolute;
 }
-input[type='checkbox'][data-v-e893b127]:hover::before {
+input[type='checkbox'][data-v-a4afe8dc]:hover::before {
 	opacity: 0.2;
 	transform: scale(2);
 }
-[lang='he'] [dir='ltr'][data-v-e893b127] {
+[lang='he'] [dir='ltr'][data-v-a4afe8dc] {
 	text-align: right;
 }
-th input[type='checkbox'][data-v-e893b127] {
+th input[type='checkbox'][data-v-a4afe8dc] {
 	transform: translateY(0.2rem) scale(1.2);
 	accent-color: var(--bgl-accent-color);
 }
-th[data-v-e893b127]::after {
+th[data-v-a4afe8dc]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -845,24 +845,24 @@ th[data-v-e893b127]::after {
 	right: 0;
 	bottom: -1px;
 }
-tr[data-v-e893b127] {
+tr[data-v-a4afe8dc] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 	align-items: center;
 }
-td[data-v-e893b127],
-th[data-v-e893b127] {
+td[data-v-a4afe8dc],
+th[data-v-a4afe8dc] {
 	white-space: nowrap;
 	padding: 0.75rem 0.65rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 }
-tbody tr[data-v-e893b127] {
+tbody tr[data-v-a4afe8dc] {
 	font-size: 0.88em;
-	height: var(--f952eb70);
+	height: var(--15f476b1);
 	transition: all 200ms ease;
 }
-tbody tr[data-v-e893b127]:hover {
+tbody tr[data-v-a4afe8dc]:hover {
 	background: var(--bgl-gray-light);
 }
 
@@ -2177,12 +2177,12 @@ input[type="number"][data-v-4c741194] {
 }
 }
 
-.radio-input-list[data-v-751ec522]{
+.radio-input-list[data-v-d6ebc385]{
 	width: auto;
 	transform: scale(1.4);
 	margin-inline-end: 0.6rem;
 }
-.active-list-item[data-v-751ec522]:has(:checked){
+.active-list-item[data-v-d6ebc385]:has(:checked){
 	background: var(--bgl-primary-light) !important;
 	border-color: var(--bgl-primary) !important;
 	accent-color: var(--bgl-accent-color);
@@ -8423,6 +8423,10 @@ select {
 .table-list-wrap {
     overflow: auto;
 }
+[dir="rtl"] .data-row .bgl_icon-font, 
+[dir="rtl"] .embedded-field .bgl_icon-font {
+	transform: rotateY(180deg) !important;
+}
 .copy-url {
     background-color: var(--bgl-gray-light);
     border-radius: var(--btn-border-radius);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.665",
+  "version": "0.0.669",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/TableSchema.vue

@@ -10,6 +10,7 @@ import {
 import { computed, useSlots, watch } from 'vue'
 import { useVirtualList } from '@vueuse/core'
 
+export type SortDirectionsT = 'ASC' | 'DESC'
 const props = defineProps<{
 	selectedItems?: string[]
 	data: T[]
@@ -17,7 +18,15 @@ const props = defineProps<{
 	showFields?: string[]
 }>()
 
-const emit = defineEmits(['update:selectedItems', 'orderBy', 'select'])
+const emit = defineEmits<{
+	'update:selectedItems': [string[]]
+	// 'orderBy': [`${string} ${SortDirectionsT}`]
+	'orderBy': [string]
+	'select': [T]
+}>(
+// ['update:selectedItems', 'orderBy', 'select']
+)
+
 const slots = useSlots()
 const loading = defineModel('loading', { default: false })
 
@@ -25,7 +34,7 @@ const itemHeight = defineModel('itemHeight', { default: 50 })
 const computedItemHiehgt = $computed(() => `${itemHeight.value}px`)
 
 let sortField = $ref('')
-let sortDirection = $ref('ASC')
+let sortDirection = $ref<SortDirectionsT>('ASC')
 let selectedItems = $ref<string[]>(props.selectedItems || [])
 
 const isSelectable = $computed(() => Array.isArray(props.selectedItems))
@@ -145,7 +154,7 @@ function toggleSelectItem(item: Record<string, any>) {
 			if (key.startsWith('_transformed_')) delete obj[key]
 		})
 
-		emit('select', obj)
+		emit('select', obj as T)
 		return
 	}
 	const index = computedSelectedItems.indexOf(item.id)
@@ -250,6 +259,7 @@ function toggleSelectAll(event: Event) {
 	</div>
 </template>
 
+
 <style scoped>
 .selected {
 	background: var(--bgl-primary-tint);
@@ -337,6 +347,7 @@ th {
 	margin-top: -0.2rem;
 }
 
+
 .row {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;

package/src/components/form/inputs/RadioGroup.vue

@@ -25,8 +25,8 @@ const selectedOption = defineModel('modelValue')
 <template>
 	<div>
 		<label
-			v-for="(opt, index) in options"
-			:key="index"
+			v-for="opt in options"
+			:key="opt.id"
 			class="border round p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover"
 			:for="opt.id"
 		>
@@ -53,7 +53,7 @@ const selectedOption = defineModel('modelValue')
 				<slot name="radioItem" v-bind="opt" />
 			</div>
 			<Btn
-				v-if="!deletable"
+				v-if="deletable"
 				class="ms-auto"
 				flat thin icon="delete"
 				@click="$emit('delete', opt)"

package/src/styles/theme.css

@@ -209,6 +209,10 @@
 .table-list-wrap {
     overflow: auto;
 }
+[dir="rtl"] .data-row .bgl_icon-font, 
+[dir="rtl"] .embedded-field .bgl_icon-font {
+	transform: rotateY(180deg) !important;
+}
 
 .copy-url {
     background-color: var(--bgl-gray-light);