@mythpe/quasar-ui-qui 0.2.53 → 0.2.55

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/plugin/defineAsyncComponents.ts

@@ -55,7 +55,12 @@ export const defineAsyncComponents = function (app: App) {
   app.component('MDatatable', defineAsyncComponent(() => import('../components/datatable/MDatatable.vue')))
   app.component('MDtAvatar', defineAsyncComponent(() => import('../components/datatable/MDtAvatar.vue')))
   app.component('MDtBtn', defineAsyncComponent(() => import('../components/datatable/MDtBtn.vue')))
+  app.component('MDtColorColumn', defineAsyncComponent(() => import('../components/datatable/MDtColorColumn.vue')))
   app.component('MDtContextmenuItems', defineAsyncComponent(() => import('../components/datatable/MDtContextmenuItems.vue')))
+  app.component('MDtCopyColumn', defineAsyncComponent(() => import('../components/datatable/MDtCopyColumn.vue')))
+  app.component('MDtImageColumn', defineAsyncComponent(() => import('../components/datatable/MDtImageColumn.vue')))
+  app.component('MDtSarColumn', defineAsyncComponent(() => import('../components/datatable/MDtSarColumn.vue')))
+  app.component('MDtUrlColumn', defineAsyncComponent(() => import('../components/datatable/MDtUrlColumn.vue')))
 
   // Utils.
   app.component('MSarIcon', defineAsyncComponent(() => import('../components/sar/MSarIcon.vue')))

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

package/src/types/components.d.ts

@@ -8,7 +8,26 @@
 
 import type { GlobalComponentConstructor } from 'quasar'
 import type { ApiInterface } from './api-helpers'
-import type { MDatatableProps, MDatatableSlots, MDtAvatarProps, MDtAvatarSlots, MDtBtnProps, MDtBtnSlots, MDtContextmenuItemsProps, MDtContextmenuItemsSlots } from './m-datatable'
+import type {
+  MDatatableProps,
+  MDatatableSlots,
+  MDtAvatarProps,
+  MDtAvatarSlots,
+  MDtBtnProps,
+  MDtBtnSlots,
+  MDtColorColumnProps,
+  MDtColorColumnSlots,
+  MDtContextmenuItemsProps,
+  MDtContextmenuItemsSlots,
+  MDtCopyColumnProps,
+  MDtCopyColumnSlots,
+  MDtImageColumnProps,
+  MDtImageColumnSlots,
+  MDtSarColumnProps,
+  MDtSarColumnSlots,
+  MDtUrlColumnProps,
+  MDtUrlColumnSlots
+} from './m-datatable'
 import type { MAvatarViewerProps, MAvatarViewerSlots } from './api/MAvatarViewer'
 import type { MTransitionGroupProps, MTransitionProps, MTransitionsSlots } from './api/MTransition'
 import type { MAxiosProps, MAxiosSlots } from './api/MAxios'
@@ -103,7 +122,12 @@ declare module '@vue/runtime-core' {
     MDatatable: GlobalComponentConstructor<MDatatableProps, MDatatableSlots>;
     MDtAvatar: GlobalComponentConstructor<MDtAvatarProps, MDtAvatarSlots>;
     MDtBtn: GlobalComponentConstructor<MDtBtnProps, MDtBtnSlots>;
+    MDtColorColumn: GlobalComponentConstructor<MDtColorColumnProps, MDtColorColumnSlots>;
     MDtContextmenuItems: GlobalComponentConstructor<MDtContextmenuItemsProps, MDtContextmenuItemsSlots>;
+    MDtCopyColumn: GlobalComponentConstructor<MDtCopyColumnProps, MDtCopyColumnSlots>;
+    MDtImageColumn: GlobalComponentConstructor<MDtImageColumnProps, MDtImageColumnSlots>;
+    MDtSarColumn: GlobalComponentConstructor<MDtSarColumnProps, MDtSarColumnSlots>;
+    MDtUrlColumn: GlobalComponentConstructor<MDtUrlColumnProps, MDtUrlColumnSlots>;
 
     // Utils.
     MSarIcon: GlobalComponentConstructor<MSarIconProps, MSarIconSlots>;

package/src/types/m-datatable.d.ts

@@ -182,24 +182,22 @@ type MDatatableMainScope = {
   form: MDatatableFormScope,
 }
 
-export interface MDatatableSlots extends Omit<QTableSlots, `body-cell-${string}` | 'top'> {
-  tools: ((scope: { dt: MDatatableScope, }) => VNode[]);
+type MDatatableSlotFn<T = any> = (scope: T) => VNode[];
 
-  selection: ((scope: { dt: MDatatableScope, }) => VNode[]);
+export interface MDatatableSlots extends Omit<QTableSlots, 'top'> {
+  tools: MDatatableSlotFn<{ dt: MDatatableScope }>;
+  selection: MDatatableSlotFn<{ dt: MDatatableScope }>;
+  filter: MDatatableSlotFn<{ filter: MDatatableFilterForm } & MDatatableMainScope>;
+  show: MDatatableSlotFn<MDatatableMainScope>;
+  form: MDatatableSlotFn<MDatatableMainScope>;
+  'form-actions': MDatatableSlotFn<MDatatableMainScope>;
+  title: MDatatableSlotFn<MDatatableMainScope>;
+  'top-search': MDatatableSlotFn<MDatatableMainScope>;
+  'bottom-search': MDatatableSlotFn<MDatatableMainScope>;
 
-  filter: ((scope: { filter: MDatatableFilterForm } & MDatatableMainScope) => VNode[]);
-
-  show: ((scope: MDatatableMainScope) => VNode[]);
-
-  form: ((scope: MDatatableMainScope) => VNode[]);
-
-  'form-actions': ((scope: MDatatableMainScope) => VNode[]);
-
-  title: ((scope: MDatatableMainScope) => VNode[]);
-  'top-search': ((scope: MDatatableMainScope) => VNode[]);
-  'bottom-search': ((scope: MDatatableMainScope) => VNode[]);
-
-  [K: `body-cell-${string}`]: ((scope: Parameters<QTableSlots['body-cell']>[0] & { dt: MDatatableScope }) => VNode[]);
+  [key: `body-cell-${string}`]: MDatatableSlotFn<
+    Parameters<QTableSlots['body-cell']>[0] & { dt: MDatatableScope }
+  >;
 }
 
 export type MDtServiceNameCallbackProp = (() => Record<string, (() => Promise<AxiosResponse>)>)
@@ -310,6 +308,10 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
    * Names of SAR columns in the table.
    */
   sarColumns?: MaybeRefOrGetter<string[]>;
+  /**
+   * Names of a text want to show copy btn
+   */
+  copyColumns?: MaybeRefOrGetter<string[]>;
 }
 
 export interface MDtAvatarProps extends QAvatarProps {
@@ -338,3 +340,62 @@ export interface MDtContextmenuItemsSlots {
    */
   default: () => VNode[];
 }
+
+export interface MDtColorColumnProps {
+  value?: any;
+  size?: string | number;
+}
+
+export interface MDtColorColumnSlots {
+  /**
+   * Default slot can be used for captions. See examples
+   */
+  default: () => VNode[];
+}
+
+export interface MDtCopyColumnProps {
+  value?: any;
+  width?: string | number;
+}
+
+export interface MDtCopyColumnSlots {
+  /**
+   * Default slot can be used for captions. See examples
+   */
+  default: () => VNode[];
+}
+
+export interface MDtImageColumnProps {
+  imageMode?: MDatatableProps['imageMode'];
+  imageSize?: MDatatableProps['imageSize'];
+  value: any;
+}
+
+export interface MDtImageColumnSlots {
+  /**
+   * Default slot can be used for captions. See examples
+   */
+  default: () => VNode[];
+}
+
+export interface MDtSarColumnProps {
+  value?: any;
+}
+
+export interface MDtSarColumnSlots {
+  /**
+   * Default slot can be used for captions. See examples
+   */
+  default: () => VNode[];
+}
+
+export interface MDtUrlColumnProps {
+  value?: any;
+}
+
+export interface MDtUrlColumnSlots {
+  /**
+   * Default slot can be used for captions. See examples
+   */
+  default: () => VNode[];
+}