@mythpe/quasar-ui-qui 0.2.53 → 0.2.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.2.53",
+  "version": "0.2.54",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",

package/src/components/datatable/MDatatable.vue

@@ -355,7 +355,7 @@ const onSuccess: SubmissionHandler = async (form) => {
   } catch (e: any) {
     const { _message, _errors } = e || {}
     dialogErrors.value = _errors || {}
-    await scrollToElementFromErrors(_errors, undefined, '.m--datatable__dialog-form-container')
+    await scrollToElementFromErrors(_errors, undefined, '.m-datatable__dialog-form-container')
     _message && alertError(_message)
     if (_errors) {
       useFormContext.setErrors(_errors)
@@ -368,7 +368,7 @@ const onInvalidSubmit: InvalidSubmissionHandler = ({ errors }) => {
   const keys: (keyof typeof errors)[] = Object.keys(errors)
   if (keys[0]) {
     const message = errors[keys[0]] as string || __('messages.the_given_data_was_invalid')
-    scrollToElementFromErrors({ [keys[0]]: [message] }, undefined, '.m--datatable__dialog-form-container')
+    scrollToElementFromErrors({ [keys[0]]: [message] }, undefined, '.m-datatable__dialog-form-container')
   }
 }
 const defaultSubmitItem = handleSubmit.withControlled(onSuccess, onInvalidSubmit)
@@ -435,10 +435,10 @@ defineExpose({
 <template>
   <div
     :class="{
-      'm--datatable-component': !0,
-      'm--datatable-component__fixed': fixed === undefined ? ( pluginOptions.datatable?.fixed === undefined ? undefined : pluginOptions.datatable?.fixed) : fixed,
-      'm--datatable-component__too_small': $q.screen.height < 900,
-      'm--datatable-component__fab': hasAddBtn && (addFabBtn === undefined ? !!pluginOptions.datatable?.addFabBtn : addFabBtn)
+      'm-datatable-component': !0,
+      'm-datatable-component__fixed': fixed === undefined ? ( pluginOptions.datatable?.fixed === undefined ? undefined : pluginOptions.datatable?.fixed) : fixed,
+      'm-datatable-component__too_small': $q.screen.height < 900,
+      'm-datatable-component__fab': hasAddBtn && (addFabBtn === undefined ? !!pluginOptions.datatable?.addFabBtn : addFabBtn)
     }"
   >
     <!-- Context Menu -->
@@ -484,7 +484,7 @@ defineExpose({
         v-model:fullscreen="fullscreen"
         v-model:pagination="pagination"
         v-model:selected="selected"
-        :class="`m--datatable ` + ($q.screen.lt.md ? 'm--datatable-grid' : '')"
+        :class="`m-datatable ` + ($q.screen.lt.md ? 'm-datatable-grid' : '')"
         :columns="getHeaders"
         :filter="search"
         :grid="isGrid"
@@ -494,8 +494,8 @@ defineExpose({
         :rows-per-page-options="getRowsPerPageOptions"
         :selection="getShowSelection ? (multiSelection ? 'multiple' : 'single') : 'none'"
         :visible-columns="visibleHeaders"
-        card-container-class="m--datatable-container"
-        table-class="m--datatable-container"
+        card-container-class="m-datatable-container"
+        table-class="m-datatable-container"
         v-bind="{
           virtualScroll: !0,
           wrapCells:!0,
@@ -525,7 +525,7 @@ defineExpose({
                 :class="iTempProps.selected ? ($q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2') : ''"
               >
                 <template v-if="getShowSelection || iTempProps.colsMap[controlKey ?? 'control'] !== undefined">
-                  <div class="m--datatable-card-control-header">
+                  <div class="m-datatable-card-control-header">
                     <MRow class="items-center justify-between">
                       <div class="q-px-md">
                         <q-checkbox
@@ -574,7 +574,7 @@ defineExpose({
                               icon="ion-ios-eye"
                               @click="openImageDialog(col.value)"
                             >
-                              <q-tooltip class="m--dt-btn-tooltip">
+                              <q-tooltip class="m-dt-btn-tooltip">
                                 {{ __('myth.titles.show') }}
                               </q-tooltip>
                             </q-btn>
@@ -590,7 +590,7 @@ defineExpose({
                                 no-spinner
                                 @click="openImageDialog(col.value)"
                               >
-                                <q-tooltip class="m--dt-btn-tooltip">
+                                <q-tooltip class="m-dt-btn-tooltip">
                                   {{ __('myth.titles.show') }}
                                 </q-tooltip>
                               </q-img>
@@ -626,7 +626,7 @@ defineExpose({
                             </div>
                             <div
                               :style="`width: 20px; height: 20px; background-color: ${col.value};`"
-                              class="m--input__color-preview cursor-pointer"
+                              class="m-input__color-preview cursor-pointer"
                               @click="copyText(col.value)"
                             >
                               <q-tooltip>{{ __('labels.copy') }}</q-tooltip>
@@ -643,7 +643,7 @@ defineExpose({
                         </template>
                         <template v-else-if="col.name === controlKey">
                           <MRow
-                            class="m--dt-context_menu_items"
+                            class="m-dt-context_menu_items"
                             gutter
                             space="xs"
                           >
@@ -656,7 +656,7 @@ defineExpose({
                           </MRow>
                         </template>
                         <template v-else>
-                          <div class="m--datatable-card-value">
+                          <div class="m-datatable-card-value">
                             <slot
                               :name="`card-cell-${col.name}`"
                               v-bind="iTempProps"
@@ -751,7 +751,7 @@ defineExpose({
                       v-if="!search"
                       name="ion-ios-search"
                     >
-                      <q-tooltip class="m--dt-btn-tooltip">
+                      <q-tooltip class="m-dt-btn-tooltip">
                         {{ __('myth.datatable.searchInput') }}
                       </q-tooltip>
                     </q-icon>
@@ -761,7 +761,7 @@ defineExpose({
                       name="ion-ios-close"
                       @click="search = ''"
                     >
-                      <q-tooltip class="m--dt-btn-tooltip">
+                      <q-tooltip class="m-dt-btn-tooltip">
                         {{ __('myth.datatable.searchInputClear') }}
                       </q-tooltip>
                     </q-icon>
@@ -845,7 +845,7 @@ defineExpose({
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any}"
                   @click="exportData('pdf')"
                 >
-                  <q-tooltip class="m--dt-btn-tooltip">
+                  <q-tooltip class="m-dt-btn-tooltip">
                     {{ __('myth.titles.exportPdf') }}
                   </q-tooltip>
                 </MDtBtn>
@@ -858,7 +858,7 @@ defineExpose({
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any}"
                   @click="exportData('excel')"
                 >
-                  <q-tooltip class="m--dt-btn-tooltip">
+                  <q-tooltip class="m-dt-btn-tooltip">
                     {{ __('myth.titles.exportExcel') }}
                   </q-tooltip>
                 </MDtBtn>
@@ -1155,7 +1155,7 @@ defineExpose({
               </q-btn-dropdown>
               <MRow
                 v-else
-                class="m--dt-context_menu_items justify-end"
+                class="m-dt-context_menu_items justify-end"
                 gutter
                 space="xs"
               >
@@ -1185,7 +1185,7 @@ defineExpose({
                 icon="ion-ios-eye"
                 @click="openImageDialog(colProps.row[c])"
               >
-                <q-tooltip class="m--dt-btn-tooltip">
+                <q-tooltip class="m-dt-btn-tooltip">
                   {{ __('myth.titles.show') }}
                 </q-tooltip>
               </q-btn>
@@ -1201,7 +1201,7 @@ defineExpose({
                   no-spinner
                   @click="openImageDialog(colProps.row[c])"
                 >
-                  <q-tooltip class="m--dt-btn-tooltip">
+                  <q-tooltip class="m-dt-btn-tooltip">
                     {{ __('myth.titles.show') }}
                   </q-tooltip>
                 </q-img>
@@ -1250,7 +1250,7 @@ defineExpose({
               </div>
               <div
                 :style="`width: 20px; height: 20px; background-color: ${ccProps.row[cc]};`"
-                class="m--input__color-preview cursor-pointer"
+                class="m-input__color-preview cursor-pointer"
                 @click="copyText(ccProps.row[cc])"
               >
                 <q-tooltip>{{ __('labels.copy') }}</q-tooltip>
@@ -1304,7 +1304,7 @@ defineExpose({
       v-model="showDialogModel"
       v-bind="pluginOptions.dt?.showDialogProps"
     >
-      <q-card class="m--dialog-card">
+      <q-card class="m-dialog-card">
         <q-card-section ref="showTitleRef">
           <q-toolbar>
             <q-toolbar-title>
@@ -1314,7 +1314,7 @@ defineExpose({
                 flat
                 @click="closeShowDialog()"
               >
-                <q-tooltip class="m--dt-btn-tooltip">
+                <q-tooltip class="m-dt-btn-tooltip">
                   {{ __('myth.titles.back') }}
                 </q-tooltip>
               </q-btn>
@@ -1325,7 +1325,7 @@ defineExpose({
         <q-separator />
         <q-card-section
           :style="`height: ${($q.screen.height || 100) - 3 - (($refs.showActionsRef as any)?.$el?.offsetHeight || 60) - (($refs.showTitleRef as any)?.$el?.offsetHeight || 80)}px`"
-          class="scroll m--datatable__dialog-show-container"
+          class="scroll m-datatable__dialog-show-container"
         >
           <slot
             :dt="datatableItemsScope"
@@ -1355,12 +1355,12 @@ defineExpose({
       v-model="formDialogModel"
       v-bind="pluginOptions.dt?.formDialogProps"
     >
-      <div class="m--form__container full-height no-wrap">
+      <div class="m-form__container full-height no-wrap">
         <form
-          class="m--form column full-height justify-between no-wrap"
+          class="m-form column full-height justify-between no-wrap"
           @submit="defaultSubmitItem"
         >
-          <q-card class="m--dialog-card">
+          <q-card class="m-dialog-card">
             <q-card-section ref="formTitle">
               <q-toolbar :class="{'q-pa-none': $q.screen.lt.md}">
                 <slot
@@ -1388,7 +1388,7 @@ defineExpose({
                         text-color="none"
                         @click="closeFormDialog"
                       >
-                        <q-tooltip class="m--dt-btn-tooltip">
+                        <q-tooltip class="m-dt-btn-tooltip">
                           {{ __('myth.titles.close') }}
                         </q-tooltip>
                       </MBtn>
@@ -1409,7 +1409,7 @@ defineExpose({
             <q-card-section
               ref="formDialogCartSection"
               :style="`height: ${($q.screen.height || 100) - 3 - (($refs.formActions as any)?.$el?.offsetHeight || 60) - (($refs.formTitle as any)?.$el?.offsetHeight || 80)}px`"
-              class="scroll m--datatable__dialog-form-container"
+              class="scroll m-datatable__dialog-form-container"
             >
               <MContainer
                 v-if="loading && !dialogItem"
@@ -1445,7 +1445,7 @@ defineExpose({
             <q-card-actions
               ref="formActions"
               align="between"
-              class="m--datatable-form-actions print-hide"
+              class="m-datatable-form-actions print-hide"
             >
               <slot
                 :dt="datatableItemsScope"
@@ -1541,7 +1541,7 @@ defineExpose({
       >
         <MTooltip
           anchor="top middle"
-          class="m--datatable-fab-tooltip"
+          class="m-datatable-fab-tooltip"
           self="bottom start"
         >
           <span class="text-caption">{{ getFormTitle }}</span>

package/src/components/datatable/MDtBtn.vue

@@ -154,7 +154,7 @@ defineOptions({
   >
     <q-tooltip
       v-if="hasTooltip"
-      class="m--dt-btn-tooltip"
+      class="m-dt-btn-tooltip"
     >
       {{ getTooltip }}
     </q-tooltip>

package/src/components/form/MAvatarViewer.vue

@@ -265,7 +265,7 @@ defineOptions({
           <div
             v-if="hint !== undefined && !loading"
             key="hint"
-            class="m--input__hint"
+            class="m-input__hint"
             v-bind="hintProps"
           >
             <span>{{ hint ? __(hint) : hint }}</span>
@@ -362,7 +362,7 @@ defineOptions({
       <slot name="caption">
         <div
           v-if="!!caption"
-          class="m--input__caption"
+          class="m-input__caption"
           v-bind="captionProps"
         >
           {{ __(caption) }}

package/src/components/form/MCheckbox.vue

@@ -97,7 +97,7 @@ defineOptions({
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view':viewMode}]"
     :col="col"
     :lg="lg"
     :md="md"
@@ -112,7 +112,7 @@ defineOptions({
     <slot name="caption">
       <div
         v-if="!!caption"
-        class="m--input__caption text-caption"
+        class="m-input__caption text-caption"
       >
         {{ __(caption) }}
       </div>

package/src/components/form/MCkeditor.vue

@@ -630,7 +630,7 @@ defineOptions({
 
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view':viewMode}]"
     :col="col"
     :lg="lg"
     :md="md"
@@ -657,7 +657,7 @@ defineOptions({
     <slot name="caption">
       <div
         v-if="!!caption"
-        class="m--input__caption"
+        class="m-input__caption"
       >
         {{ __(caption) }}
       </div>

package/src/components/form/MColor.vue

@@ -83,7 +83,7 @@ defineOptions({
     <template #prepend>
       <div
         :style="`width: 20px; height: 20px; background-color: ${value};`"
-        class="m--input__color-preview"
+        class="m-input__color-preview"
       />
     </template>
     <template

package/src/components/form/MEditor.vue

@@ -186,7 +186,7 @@ defineOptions({
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view':viewMode}]"
     :col="col"
     :lg="lg"
     :md="md"
@@ -213,7 +213,7 @@ defineOptions({
     <slot name="caption">
       <div
         v-if="!!caption"
-        class="m--input__caption"
+        class="m-input__caption"
       >
         {{ __(caption) }}
       </div>

package/src/components/form/MField.vue

@@ -76,7 +76,7 @@ defineOptions({
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view': !0}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view': !0}]"
     :col="col"
     :lg="lg"
     :md="md"
@@ -100,7 +100,7 @@ defineOptions({
     <slot name="caption">
       <div
         v-if="!!caption"
-        class="m--input__caption"
+        class="m-input__caption"
       >
         {{ __(caption) }}
       </div>

package/src/components/form/MFile.vue

@@ -122,7 +122,7 @@ defineOptions({
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view':viewMode}]"
     :col="col"
     :lg="lg"
     :md="md"
@@ -149,7 +149,7 @@ defineOptions({
     <slot name="caption">
       <div
         v-if="!!caption"
-        class="m--input__caption"
+        class="m-input__caption"
       >
         {{ __(caption) }}
       </div>

package/src/components/form/MForm.vue

@@ -75,11 +75,11 @@ watch(errorsComputed, v => v && setErrors(v), options)
 
 <template>
   <div
-    class="m--form__container"
+    class="m-form__container"
     v-bind="$attrs"
   >
     <form
-      :class="{'m--form': !0, 'm--container': padding}"
+      :class="{'m-form': !0, 'm-container': padding}"
       v-bind="formProps"
       @submit="defaultSubmit"
     >

package/src/components/form/MHidden.vue

@@ -71,7 +71,7 @@ defineOptions({
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view':viewMode}]"
     :col="col"
     :lg="lg"
     :md="md"

package/src/components/form/MInput.vue

@@ -126,10 +126,10 @@ defineOptions({
   <MCol
     :auto="auto"
     :class="[$attrs.class,{
-      'm--input__required': inputRules?.required!==undefined,
-      'm--input__error': !!errorMessage,
-      'm--input__view': viewMode
-    },'m--input__col']"
+      'm-input__required': inputRules?.required!==undefined,
+      'm-input__error': !!errorMessage,
+      'm-input__view': viewMode
+    },'m-input__col']"
     :col="col"
     :lg="lg"
     :md="md"
@@ -159,7 +159,7 @@ defineOptions({
     <slot name="caption">
       <div
         v-if="!!caption"
-        class="m--input__caption"
+        class="m-input__caption"
       >
         {{ __(caption) }}
       </div>
@@ -167,8 +167,8 @@ defineOptions({
     <component
       :is="viewMode ? QField : QInput"
       ref="input"
-      :class="{'m--input__sar': sar}"
-      class="m--input"
+      :class="{'m-input__sar': sar}"
+      class="m-input"
       v-bind="{
         ...$attrs,
         ...theme,

package/src/components/form/MInputLabel.vue

@@ -28,13 +28,13 @@ defineOptions({
 <template>
   <div
     :class="{
-      'row items-center m--input__top-label' : !0,
-      'm--input__top-label__invalid' : !field?.meta?.valid && field?.meta?.dirty
+      'row items-center m-input__top-label' : !0,
+      'm-input__top-label__invalid' : !field?.meta?.valid && field?.meta?.dirty
     }"
     v-bind="$attrs"
   >
     <slot name="before" />
-    <div class="m--input__top-label__content">
+    <div class="m-input__top-label__content">
       {{ label !== undefined ? __(label) : field?.label }}
     </div>
     <slot />

package/src/components/form/MOptions.vue

@@ -136,7 +136,7 @@ defineOptions({
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view':viewMode}]"
     :col="col"
     :lg="lg"
     :md="md"
@@ -174,7 +174,7 @@ defineOptions({
     <slot name="caption">
       <div
         v-if="!!caption"
-        class="m--input__caption"
+        class="m-input__caption"
       >
         {{ __(caption) }}
       </div>
@@ -196,7 +196,7 @@ defineOptions({
     <component
       :is="viewMode ? QField : QOptionGroup"
       ref="input"
-      :class="{'m--options': !0, 'm--options__full_width': fullWidth, 'm--options__fit_width': fitWidth }"
+      :class="{'m-options': !0, 'm-options__full_width': fullWidth, 'm-options__fit_width': fitWidth }"
       :error="viewMode ? !!errorMessage : undefined"
       :error-message="viewMode ? errorMessage : undefined"
       :hint="viewMode ? ( hint ? __(hint) : undefined ) : undefined"
@@ -258,7 +258,7 @@ defineOptions({
 <style lang="sass">
 $c: calc(100% / 3)
 
-.m--options
+.m-options
   .q-checkbox__inner,
   .q-radio__inner,
   .q-toggle__inner

package/src/components/form/MPicker.vue

@@ -176,7 +176,7 @@ defineOptions({
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode,'m--picker':!0}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view':viewMode,'m-picker':!0}]"
     :col="col"
     :lg="lg"
     :md="md"
@@ -203,7 +203,7 @@ defineOptions({
     <slot name="caption">
       <div
         v-if="!!caption"
-        class="m--input__caption"
+        class="m-input__caption"
       >
         {{ __(caption) }}
       </div>
@@ -278,7 +278,7 @@ defineOptions({
               <q-date
                 v-if="isDate"
                 ref="dateElm"
-                class="m--date__picker"
+                class="m-date__picker"
                 v-bind="{
                   ...pluginOptions.date as any,
                   ...$attrs,
@@ -308,7 +308,7 @@ defineOptions({
               <q-time
                 v-else
                 ref="timeElm"
-                class="m--time__picker"
+                class="m-time__picker"
                 v-bind="{
                   ...pluginOptions.time,
                   ...$attrs,

package/src/components/form/MRadio.vue

@@ -94,7 +94,7 @@ defineOptions({
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view':viewMode}]"
     :col="col"
     :lg="lg"
     :md="md"
@@ -109,7 +109,7 @@ defineOptions({
     <slot name="caption">
       <div
         v-if="!!caption"
-        class="m--input__caption text-caption"
+        class="m-input__caption text-caption"
       >
         {{ __(caption) }}
       </div>

package/src/components/form/MSelect.vue

@@ -210,7 +210,7 @@ defineOptions({
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__is-top-label':hasTopLabel,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__is-top-label':hasTopLabel,'m-input__error':!!errorMessage,'m-input__view':viewMode}]"
     :col="col"
     :lg="lg"
     :md="md"
@@ -237,7 +237,7 @@ defineOptions({
     <slot name="caption">
       <div
         v-if="!!caption"
-        class="m--input__caption"
+        class="m-input__caption"
       >
         {{ __(caption) }}
       </div>
@@ -245,7 +245,7 @@ defineOptions({
     <component
       :is="viewMode ? QField : QSelect"
       ref="input"
-      popup-content-class="m--select__popup-content"
+      popup-content-class="m-select__popup-content"
       v-bind="{
         behavior: $q.platform.is.ios === !0 ? 'dialog' : behavior,
         ...theme,

package/src/components/form/MSignaturePad.vue

@@ -149,7 +149,7 @@ watch(url, (url) => {
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__is-top-label':hasTopLabel,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__is-top-label':hasTopLabel,'m-input__error':!!errorMessage,'m-input__view':viewMode}]"
     :col="col"
     :lg="lg"
     :md="md"

package/src/components/form/MToggle.vue

@@ -123,7 +123,7 @@ defineOptions({
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view':viewMode}]"
     :col="col"
     :lg="lg"
     :md="md"
@@ -150,7 +150,7 @@ defineOptions({
     <slot name="caption">
       <div
         v-if="!!caption"
-        class="m--input__caption text-caption"
+        class="m-input__caption text-caption"
       >
         {{ __(caption) }}
       </div>

package/src/components/form/MUploader.vue

@@ -416,7 +416,7 @@ defineOptions({
       <template #list="scope">
         <div
           v-if="!scope.files.length && !attachments?.length"
-          key="m--uploader-no-data"
+          key="m-uploader-no-data"
           class="absolute-full"
         >
           <div class="full-width full-height  overflow-hidden">

package/src/components/form/__MCkeditor.vue

@@ -318,7 +318,7 @@ defineOptions({
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view':viewMode}]"
     :col="col"
     :lg="lg"
     :md="md"
@@ -345,7 +345,7 @@ defineOptions({
     <slot name="caption">
       <div
         v-if="!!caption"
-        class="m--input__caption"
+        class="m-input__caption"
       >
         {{ __(caption) }}
       </div>

package/src/components/form/__MOptions.vue

@@ -144,7 +144,7 @@ defineOptions({
 <template>
   <MCol
     :auto="auto"
-    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :class="[$attrs.class,{'m-input__required':inputRules?.required!==undefined,'m-input__error':!!errorMessage,'m-input__view':viewMode}]"
     :col="col"
     :lg="lg"
     :md="md"
@@ -182,7 +182,7 @@ defineOptions({
     <slot name="caption">
       <div
         v-if="!!caption"
-        class="m--input__caption"
+        class="m-input__caption"
       >
         {{ __(caption) }}
       </div>
@@ -203,7 +203,7 @@ defineOptions({
     </MTransition>
     <q-option-group
       ref="input"
-      :class="{'m--options': !0, 'm--options__full_width': fullWidth, 'm--options__fit_width': fitWidth }"
+      :class="{'m-options': !0, 'm-options__full_width': fullWidth, 'm-options__fit_width': fitWidth }"
       :color="!!errorMessage ? 'negative' : getProp('color')"
       :disable="disable"
       :keep-color="!!errorMessage ? !0 : getProp('keepColor')"
@@ -264,7 +264,7 @@ defineOptions({
 <style lang="sass">
 $c: calc(100% / 3)
 
-.m--options
+.m-options
   .q-checkbox__inner,
   .q-radio__inner,
   .q-toggle__inner

package/src/components/grid/MBlock.vue

@@ -57,7 +57,7 @@ defineOptions({
 <template>
   <div
     :class="{
-      'm---block' : !0,
+      'm-block' : !0,
       [`q-pa-${getSize}`] : getSize && getSize !== 'none',
       'rounded-borders' : getRounded === !0,
       [`shadow-${getShadow||''}`] : getShadow && getShadow !== 'none'

package/src/components/grid/MCol.vue

@@ -16,7 +16,7 @@ import { useMyth } from '../../composable'
 const { uniq } = useMyth()
 const props = defineProps<Props>()
 const classes = computed(() => {
-  const list: string[] = ['m--col']
+  const list: string[] = ['m-col']
   if (props.auto === !0) {
     list.push('col-auto')
   }

package/src/components/grid/MColumn.vue

@@ -18,7 +18,7 @@ defineOptions({
 
 <template>
   <div
-    class="m--column column"
+    class="m-column column"
     v-bind="$attrs"
   >
     <slot />

package/src/components/grid/MContainer.vue

@@ -48,9 +48,9 @@ defineOptions({
 <template>
   <div
     :class="{
-      'm--container' : !0,
-      'm--container__fluid' : fluidProp === !0,
-      'm--container__dense' : dense === !0,
+      'm-container' : !0,
+      'm-container__fluid' : fluidProp === !0,
+      'm-container__dense' : dense === !0,
       [`q-pa-${sizeProp||''}`]: sizeProp && sizeProp !== 'none'
     }"
     v-bind="$attrs"

package/src/components/grid/MHelpRow.vue

@@ -28,7 +28,7 @@ defineOptions({
 <template>
   <div
     v-if="text || tooltip"
-    class="m--help-row row"
+    class="m-help-row row"
     v-bind="$attrs"
   >
     <div class="col-auto">

package/src/components/grid/MRow.vue

@@ -46,7 +46,7 @@ defineOptions({
 <template>
   <div
     :class="{
-      'm--row row': !0,
+      'm-row row': !0,
       [`q-gutter-${gutterSize}`]: gutter !== !1 && gutter !== undefined,
       [`q-col-gutter-${colSize}`]: col !== !1 && col !== undefined,
     }"

package/src/components/modal/MModalMenu.vue

@@ -44,7 +44,7 @@ defineOptions({
     v-model="modelValue"
     :position="position"
     allow-focus-outside
-    class="m--modal_menu"
+    class="m-modal_menu"
     maximized
     no-backdrop-dismiss
     no-shake

package/src/components/modal/MTooltip.vue

@@ -29,7 +29,7 @@ const { props: pluginOptions } = useMyth()
 
 <template>
   <q-tooltip
-    class="m--dt-btn-tooltip"
+    class="m-dt-btn-tooltip"
     transition-hide="scale"
     transition-show="scale"
     v-bind="{...pluginOptions.tooltip,...$attrs}"

package/src/components/parials/MUploaderItem.vue

@@ -278,7 +278,7 @@ defineOptions({
           target="_blank"
           v-bind="pluginOptions.uploaderOptions?.downloadBtnProps"
         >
-          <q-tooltip class="m--dt-btn-tooltip">
+          <q-tooltip class="m-dt-btn-tooltip">
             {{ __('myth.titles.download') }}
           </q-tooltip>
         </q-btn>
@@ -291,7 +291,7 @@ defineOptions({
           v-bind="pluginOptions.uploaderOptions?.removeBtnProps"
           @click="onClickDeleteAttachment()"
         >
-          <q-tooltip class="m--dt-btn-tooltip">
+          <q-tooltip class="m-dt-btn-tooltip">
             {{ __(mediaProp.id ? 'myth.uploader.deleteMedia' : 'myth.uploader.removeMedia') }}
           </q-tooltip>
         </q-btn>

package/src/components/sar/MSarString.vue

@@ -48,7 +48,7 @@ defineOptions({
 
 <template>
   <div
-    class="m--sar-col"
+    class="m-sar-col"
     v-bind="$attrs"
   >
     <span>

package/src/composable/useMyth.ts

@@ -189,7 +189,7 @@ export const useMyth = () => {
         if (controlStyle && !item.style) {
           item.style = controlStyle + (item.style ? ` ${item.style}` : '')
         }
-        item.headerClasses = (item.headerClasses ? item.headerClasses : '') + ' m--control-header'
+        item.headerClasses = (item.headerClasses ? item.headerClasses : '') + ' m-control-header'
         item.headerClasses = item.headerClasses.trim()
         item.sortable = !1
         if (!item.align) {
@@ -198,9 +198,9 @@ export const useMyth = () => {
         // opts.classes = opts.classes || ''
         if (typeof opts.classes === 'function') {
           const callback = opts.classes
-          opts.classes = (item) => (callback(item) || '') + ' m--control-cell'
+          opts.classes = (item) => (callback(item) || '') + ' m-control-cell'
         } else if (typeof opts.classes === 'string') {
-          opts.classes += ' m--control-cell'
+          opts.classes += ' m-control-cell'
           opts.classes = opts.classes.trim()
         }
       }
@@ -247,7 +247,7 @@ export const useMyth = () => {
     const dialogProps = pluginOptions.value.confirmDialog || {} as any
     dialogProps.transitionShow = dialogProps.transitionShow || 'jump-down'
     dialogProps.transitionHide = dialogProps.transitionHide || 'jump-up'
-    dialogProps.class = ('m--confirm ') + (dialogProps.class || '')
+    dialogProps.class = ('m-confirm ') + (dialogProps.class || '')
     return q.dialog({
       title,
       message,

package/src/style/m-container.sass

@@ -1,12 +1,12 @@
 
-$m--container-padding: $space-base !default
-$m--container-fluid-width: 1440px !default
+$m-container-padding: $space-base !default
+$m-container-fluid-width: 1440px !default
 
-.m--container
+.m-container
   &__dense
     padding: 0
 
   &__fluid
-    max-width: $m--container-fluid-width
+    max-width: $m-container-fluid-width
     margin-left: auto
     margin-right: auto

package/src/style/m-dt.sass

@@ -1,26 +1,27 @@
-$control-max-width: 200px !default
-$fixed-dt-height: 80vh !default
+$m-control-max-width: 200px !default
+$m-dt-fixed-height: 80vh !default
+$m-dt-desc-width: 150px !default
 
 .touch
-  .m--datatable-fab-tooltip
+  .m-datatable-fab-tooltip
     display: none
 
 .body--light
-  .m--datatable
+  .m-datatable
     .q-table__top,
     .q-table__bottom,
     thead tr:first-child th
       background: #fff
 
 .body--dark
-  .m--datatable
+  .m-datatable
     .q-table__top,
     .q-table__bottom,
     thead tr:first-child th
       background: var(--q-dark-page)
 
-.m--datatable-component
-  .m--datatable.m--datatable-grid
+.m-datatable-component
+  .m-datatable.m-datatable-grid
     .q-table__top
       padding-left: 0
       padding-right: 0
@@ -36,14 +37,14 @@ $fixed-dt-height: 80vh !default
     thead tr:first-child th
       top: 0
 
-    .m--datatable:not(.m--datatable-grid)
-      max-height: $fixed-dt-height
+    .m-datatable:not(.m-datatable-grid)
+      max-height: $m-dt-fixed-height
 
-    .m--datatable:not(.m--datatable-grid).q-table--dense
+    .m-datatable:not(.m-datatable-grid).q-table--dense
       &.q-table--loading thead tr:last-child th
         top: 26px
 
-      .m--datatable:not(.m--datatable-grid):not(.q-table--dense)
+      .m-datatable:not(.m-datatable-grid):not(.q-table--dense)
         &.q-table--loading thead tr:last-child th
           top: 55px
 
@@ -67,7 +68,7 @@ $fixed-dt-height: 80vh !default
       min-width: 0
       max-width: 100%
 
-.m--dialog-card
+.m-dialog-card
   .q-card__actions
     .q-btn
       padding: 4px 16px !important
@@ -77,9 +78,15 @@ $fixed-dt-height: 80vh !default
 
 .screen--xs,
 .screen--sm
-  .m--dt-btn-tooltip
+  .m-dt-btn-tooltip
     display: none
 
-.m--control-cell,
-.m--control-header
-  width: $control-max-width
+.m-control-cell,
+.m-control-header
+  width: $m-control-max-width
+
+.m-dt__max_desc
+  max-width: $m-dt-desc-width
+  text-overflow: ellipsis
+  white-space: nowrap
+  overflow: hidden

package/src/style/m-help-row.sass

@@ -1,4 +1,4 @@
 $m-help-row-margin-top: 4px !default
 
-.m--help-row
+.m-help-row
   margin-top: $m-help-row-margin-top

package/src/style/m-input.sass

@@ -1,28 +1,28 @@
-$m--input-helpers-margin: 5px !default
+$m-input-helpers-margin: 5px !default
 $radius-value: $generic-border-radius !default
 
-[data-input-name].m--input__error
+[data-input-name].m-input__error
   > .q-field
     &:not(.q-field--disabled)
       .q-field__label::after
         color: var(--q-negative)
 
-  .m--input__top-label__content
+  .m-input__top-label__content
     color: var(--q-negative)
 
 
-[data-input-name].m--input__required
-  &:not(.m--input__is-top-label)
+[data-input-name].m-input__required
+  &:not(.m-input__is-top-label)
     > .q-field
       &:not(.q-field--disabled)
         .q-field__label::after
           content: ' *'
 
-  .m--input__top-label__content::after
+  .m-input__top-label__content::after
     content: ' *'
     color: var(--q-negative)
 
-.m--input
+.m-input
   &__color-preview
     border: 1px solid var(--q-brand)
     border-radius: $radius-value
@@ -30,7 +30,7 @@ $radius-value: $generic-border-radius !default
   &__top-label,
   &__hint,
   &__caption
-    margin-bottom: $m--input-helpers-margin
+    margin-bottom: $m-input-helpers-margin
 
 //&__caption
   //font-size: 0.75rem

package/src/style/m-picker.sass

@@ -1,5 +1,5 @@
-.m--date__picker,
-.m--time__picker
+.m-date__picker,
+.m-time__picker
   .q-date__calendar-item
     > div
       text-overflow: ellipsis

package/src/style/m-select.sass

@@ -1,4 +1,4 @@
-$m--select__popup-content: 300px !default
+$m-select__popup-content: 300px !default
 
-.m--select__popup-content
-  max-height: $m--select__popup-content
+.m-select__popup-content
+  max-height: $m-select__popup-content

package/src/style/main.sass

@@ -1,6 +1,6 @@
 @use 'sass:map'
 
-$m--row-margin-top: 1rem !default
+$m-row-margin-top: 1rem !default
 
 // Flex.
 .flex-break
@@ -17,8 +17,8 @@ $m--row-margin-top: 1rem !default
     width: 0 !important
 
 
-.m--row + .m--row
-  margin-top: $m--row-margin-top
+.m-row + .m-row
+  margin-top: $m-row-margin-top
 
 
 // Directions.
@@ -52,14 +52,14 @@ $maxes: ('width', 'height') !default
   .max-#{$max}
     max-#{$max}: 100% !important
 
-$m--bordered-color: var(--q-body) !default
+$m-bordered-color: var(--q-body) !default
 $alignsX: ('top', 'bottom') !default
 $alignsY: ('left', 'right') !default
 $radius-class-name: 'border-rounded' !default
 $radius-value: $generic-border-radius !default
 $bordered-class-name: 'bordered' !default
 $bordered-size: 1px !default
-$bordered-style: $bordered-size solid $m--bordered-color !default
+$bordered-style: $bordered-size solid $m-bordered-color !default
 
 
 .#{$radius-class-name}
@@ -100,6 +100,6 @@ $bordered-style: $bordered-size solid $m--bordered-color !default
 pre
   max-width: 100%
 
-.m--confirm.actions-between
+.m-confirm.actions-between
   .q-card__actions
     justify-content: space-between !important