@bagelink/vue 0.0.667 → 0.0.671

package/dist/components/form/inputs/RadioGroup.vue.d.ts

@@ -3,11 +3,11 @@ export interface RadioOption<T> {
     imgSrc?: string;
     subLabel?: string;
     label?: string;
-    value: object;
+    value: any;
     id: string;
     contextObj: T;
 }
-declare const _default: <ContextObjType extends Record<string, unknown>>(__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<{
+declare const _default: <ContextObjType>(__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<{
         onDelete?: ((...args: any[]) => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>> & {
@@ -27,7 +27,7 @@ declare const _default: <ContextObjType extends Record<string, unknown>>(__VLS_p
             imgSrc?: string;
             subLabel?: string;
             label?: string;
-            value: object;
+            value: any;
             id: string;
             contextObj: ContextObjType;
         }): any;

package/dist/components/form/inputs/RadioGroup.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RadioGroup.vue"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,CAAC,CAAA;CACb;yBAGgB,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,eAClD,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;WAqN1D,cAAc,CAAC,gCAAgC,CAAC;;;;;mBAV3C,MAAM;iBACR,WAAW,CAAC,cAAc,CAAC,EAAE;oBAC1B,OAAO;;qBAEL,GAAG;MAMuG,6EAAkC,CAAC,6GAAwD;oBACpM,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;WACH,UAAU;;qBArOP,MAAM;qBACN,MAAM;uBACJ,MAAM;oBACT,MAAM;mBACP,MAAM;gBACT,MAAM;;YA+LqB,GAAG;MAiCK;;;;;YAII,OAAO,CAAC,OAAO,WAAW,CAAC;;AA/NvE,wBA+N2E"}
+{"version":3,"file":"RadioGroup.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RadioGroup.vue"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,GAAG,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,CAAC,CAAA;CACb;yBAGgB,cAAc,eAClB,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;WAqN1D,cAAc,CAAC,gCAAgC,CAAC;;;;;mBAV3C,MAAM;iBACR,WAAW,CAAC,cAAc,CAAC,EAAE;oBAC1B,OAAO;;qBAEL,GAAG;MAMuG,6EAAkC,CAAC,6GAAwD;oBACpM,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;WACH,UAAU;;qBArOP,MAAM;qBACN,MAAM;uBACJ,MAAM;oBACT,MAAM;mBACP,GAAG;gBACN,MAAM;;YA+LqB,GAAG;MAiCK;;;;;YAII,OAAO,CAAC,OAAO,WAAW,CAAC;;AA/NvE,wBA+N2E"}

package/dist/index.cjs

@@ -6364,7 +6364,7 @@ function useVerticalVirtualList(options, list) {
     containerRef
   };
 }
-const _withScopeId$3 = (n2) => (vue.pushScopeId("data-v-6653fb41"), 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) => ({
-      "96a68704": 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-6653fb41"]]);
+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-667d5432"]]);
 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-6653fb41"), 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) => ({
-      "96a68704": 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-6653fb41"]]);
+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-667d5432"]]);
 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-6653fb41] {
+.selected[data-v-a4afe8dc] {
 	background: var(--bgl-primary-tint);
 }
-tbody tr.selected[data-v-6653fb41]:hover {
+tbody tr.selected[data-v-a4afe8dc]:hover {
 	background: var(--bgl-primary-light);
 }
-.loading-table[data-v-6653fb41] {
+.loading-table[data-v-a4afe8dc] {
 	position: relative;
 }
-.inset[data-v-6653fb41] {
+.inset[data-v-a4afe8dc] {
 	inset: 0;
 }
-.loading-table-animation[data-v-6653fb41] {
+.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-6653fb41]:hover {
 	border-top: 4px solid var(--bgl-primary);
 	width: var(--size);
 	height: var(--size);
-	animation: loading-table-6653fb41 1s linear infinite;
+	animation: loading-table-a4afe8dc 1s linear infinite;
 }
-@keyframes loading-table-6653fb41 {
+@keyframes loading-table-a4afe8dc {
 0% {
 		transform: translate(-50%, -50%) rotate(0deg);
 }
@@ -677,52 +677,52 @@ tbody tr.selected[data-v-6653fb41]:hover {
 		transform: translate(-50%, -50%) rotate(360deg);
 }
 }
-.list-arrows[data-v-6653fb41] {
+.list-arrows[data-v-a4afe8dc] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-6653fb41] {
+.list-arrows .bgl_icon-font[data-v-a4afe8dc] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-6653fb41] {
+.list-arrows.sorted[data-v-a4afe8dc] {
 	opacity: 1;
 }
-.col img[data-v-6653fb41] {
+.col img[data-v-a4afe8dc] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-6653fb41] {
+.list-arrows.sorted .desc[data-v-a4afe8dc] {
 	transform: rotate(180deg);
 	display: inline-block;
 }
-table[data-v-6653fb41] {
+table[data-v-a4afe8dc] {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 	width: 100%;
 }
-th[data-v-6653fb41] {
+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(--96a68704);
+	height: var(--15f476b1);
 	vertical-align: bottom;
 	font-weight: 400;
 	text-align: start;
 }
-.embedded-field[data-v-6653fb41] {
+.embedded-field[data-v-a4afe8dc] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-6653fb41] {
+.row[data-v-a4afe8dc] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-6653fb41] {
+.row.first-row[data-v-a4afe8dc] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -731,7 +731,7 @@ th[data-v-6653fb41] {
 	background: var(--bgl-white);
 	vertical-align: bottom;
 }
-.row.first-row[data-v-6653fb41]::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-6653fb41] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-6653fb41] {
+.first-row .col[data-v-a4afe8dc] {
 	cursor: pointer;
 	background: var(--bgl-white);
 }
-.col[data-v-6653fb41] {
+.col[data-v-a4afe8dc] {
 	white-space: nowrap;
 	padding: 0.75rem 1rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 	align-items: center;
 }
-.col[data-v-6653fb41]:has(.bagel-input) {
+.col[data-v-a4afe8dc]:has(.bagel-input) {
 	padding: 0rem 0.25rem;
 }
-.col > div[data-v-6653fb41] {
+.col > div[data-v-a4afe8dc] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-6653fb41] {
+.max-col-width[data-v-a4afe8dc] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-6653fb41] {
+.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-6653fb41] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-6653fb41] {
+.rows[data-v-a4afe8dc] {
 	font-size: 0.88em;
 }
-.table-list[data-v-6653fb41] {
+.table-list[data-v-a4afe8dc] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-6653fb41] {
+.BagelTable .table-list[data-v-a4afe8dc] {
 	overflow: unset;
 }
-.row-item[data-v-6653fb41] {
-	height: var(--96a68704);
+.row-item[data-v-a4afe8dc] {
+	height: var(--15f476b1);
 	transition: all 200ms ease;
 }
-.row-item[data-v-6653fb41]:hover {
+.row-item[data-v-a4afe8dc]:hover {
 	background: var(--bgl-gray-light);
 }
-.row-item input[type='checkbox'][data-v-6653fb41] {
+.row-item input[type='checkbox'][data-v-a4afe8dc] {
 	margin-top: 0.45rem !important;
 	accent-color: var(--bgl-accent-color);
 }
-.infinite-wrapper[data-v-6653fb41] {
+.infinite-wrapper[data-v-a4afe8dc] {
 	overflow-y: auto;
 	width: 100%;
 }
-input[type='checkbox'][data-v-6653fb41] {
+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-6653fb41] {
 	height: 0.85rem;
 	width: 0.85rem;
 }
-input[type='checkbox'][data-v-6653fb41]::before {
+input[type='checkbox'][data-v-a4afe8dc]::before {
 	content: '';
 	height: 0.85rem;
 	width: 0.85rem;
@@ -826,18 +826,18 @@ input[type='checkbox'][data-v-6653fb41]::before {
 	transform: scale(1);
 	position: absolute;
 }
-input[type='checkbox'][data-v-6653fb41]:hover::before {
+input[type='checkbox'][data-v-a4afe8dc]:hover::before {
 	opacity: 0.2;
 	transform: scale(2);
 }
-[lang='he'] [dir='ltr'][data-v-6653fb41] {
+[lang='he'] [dir='ltr'][data-v-a4afe8dc] {
 	text-align: right;
 }
-th input[type='checkbox'][data-v-6653fb41] {
+th input[type='checkbox'][data-v-a4afe8dc] {
 	transform: translateY(0.2rem) scale(1.2);
 	accent-color: var(--bgl-accent-color);
 }
-th[data-v-6653fb41]::after {
+th[data-v-a4afe8dc]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -845,24 +845,24 @@ th[data-v-6653fb41]::after {
 	right: 0;
 	bottom: -1px;
 }
-tr[data-v-6653fb41] {
+tr[data-v-a4afe8dc] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 	align-items: center;
 }
-td[data-v-6653fb41],
-th[data-v-6653fb41] {
+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-6653fb41] {
+tbody tr[data-v-a4afe8dc] {
 	font-size: 0.88em;
-	height: var(--96a68704);
+	height: var(--15f476b1);
 	transition: all 200ms ease;
 }
-tbody tr[data-v-6653fb41]: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-667d5432]{
 	width: auto;
 	transform: scale(1.4);
 	margin-inline-end: 0.6rem;
 }
-.active-list-item[data-v-751ec522]:has(:checked){
+.active-list-item[data-v-667d5432]: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.667",
+  "version": "0.0.671",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/TableSchema.vue

@@ -259,6 +259,7 @@ function toggleSelectAll(event: Event) {
 	</div>
 </template>
 
+
 <style scoped>
 .selected {
 	background: var(--bgl-primary-tint);
@@ -346,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

@@ -1,4 +1,4 @@
-<script setup lang="ts" generic="ContextObjType extends Record<string, unknown>">
+<script setup lang="ts" generic="ContextObjType">
 import { Btn } from '@bagelink/vue'
 
 export interface RadioOption<T> {
@@ -6,7 +6,7 @@ export interface RadioOption<T> {
 	imgSrc?: string
 	subLabel?: string
 	label?: string
-	value: object
+	value: any
 	id: string
 	contextObj: T
 }
@@ -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);