added some text handling 3

src/components/AdminFieldHelp.vue

@@ -1,23 +1,20 @@
 <template>
   <a-tooltip
-    v-if="text"
+    v-if="hasContent"
     placement="top"
-    :title="text"
     overlay-class-name="admin-field-help-tooltip"
     :overlay-style="{ zIndex: TOOLTIP_ABOVE_MODAL_Z_INDEX }"
-    :overlay-inner-style="{
-      maxWidth: '22rem',
-      direction: 'rtl',
-      textAlign: 'right',
-      whiteSpace: 'pre-line',
-    }"
+    :overlay-inner-style="tooltipInnerStyle"
     :mouse-enter-delay="0.15"
   >
+    <template #title>
+      <AdminHelpTooltipContent :content="parsed" />
+    </template>
     <span
       class="admin-field-help"
       :class="rootClass"
       role="img"
-      :aria-label="text"
+      :aria-label="plainText"
       tabindex="0"
     >
       <IosInfoBadge :size="size" />
@@ -27,11 +24,17 @@
 
 <script setup lang="ts">
 import IosInfoBadge from '@/pages/dashboard/components/IosInfoBadge.vue'
+import AdminHelpTooltipContent from '@/components/AdminHelpTooltipContent.vue'
 import { TOOLTIP_ABOVE_MODAL_Z_INDEX } from '@/constants/overlayZIndex'
+import {
+  adminHelpPlainText,
+  parseAdminHelp,
+  type AdminHelpContent,
+} from '@/utils/adminHelpFormat'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
-    text?: string
+    text?: string | AdminHelpContent
     rootClass?: string
     size?: 'xs' | 'sm' | 'md'
   }>(),
@@ -41,6 +44,16 @@ withDefaults(
     size: 'xs',
   }
 )
+
+const parsed = computed(() => parseAdminHelp(props.text))
+const hasContent = computed(() => Boolean(parsed.value.description || parsed.value.formula))
+const plainText = computed(() => adminHelpPlainText(parsed.value))
+
+const tooltipInnerStyle = {
+  maxWidth: '24rem',
+  direction: 'rtl',
+  textAlign: 'right',
+}
 </script>
 
 <style scoped lang="less">
@@ -57,4 +70,9 @@ withDefaults(
 .ant-tooltip.admin-field-help-tooltip {
   z-index: 1250 !important;
 }
+
+.ant-tooltip.admin-field-help-tooltip .ant-tooltip-inner {
+  direction: rtl;
+  text-align: right;
+}
 </style>

src/components/AdminHelpTooltipContent.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="admin-help-tooltip-content" dir="rtl">
+    <p v-if="content.description" class="admin-help-tooltip-content__text">
+      {{ content.description }}
+    </p>
+    <div v-if="content.formula" class="admin-help-tooltip-content__formula">
+      <span class="admin-help-tooltip-content__formula-label">فرمول</span>
+      <p class="admin-help-tooltip-content__formula-text">{{ content.formula }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AdminHelpContent } from '@/utils/adminHelpFormat'
+
+defineProps<{
+  content: AdminHelpContent
+}>()
+</script>
+
+<style scoped>
+.admin-help-tooltip-content {
+  direction: rtl;
+  text-align: right;
+  line-height: 1.6;
+}
+
+.admin-help-tooltip-content__text {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: inherit;
+}
+
+.admin-help-tooltip-content__formula {
+  margin-top: 0.55rem;
+  padding: 0.45rem 0.55rem;
+  border-radius: 0.45rem;
+  border: 1px solid rgba(245, 158, 11, 0.35);
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.admin-help-tooltip-content__formula-label {
+  display: block;
+  margin-bottom: 0.2rem;
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: #b45309;
+}
+
+.admin-help-tooltip-content__formula-text {
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.55;
+  color: inherit;
+  direction: rtl;
+  text-align: right;
+  white-space: pre-line;
+}
+
+html.is-dark .admin-help-tooltip-content__formula {
+  border-color: rgba(252, 211, 77, 0.35);
+  background: rgba(252, 211, 77, 0.08);
+}
+
+html.is-dark .admin-help-tooltip-content__formula-label {
+  color: #fcd34d;
+}
+</style>

src/components/BasicInput.vue

@@ -66,7 +66,7 @@ const localValue = computed({
   get() {
     let a =
       props.type === 'price'
-        ? props.value
+        ? props.value != null && props.value !== ''
           ? usePrice(props.value as number, true, '').trim()
           : ''
         : props.value