@mythpe/quasar-ui-qui 0.0.26-dev → 0.0.27-dev

package/src/components/modal/MTooltip.vue

@@ -0,0 +1,39 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script
+  lang="ts"
+  setup
+>
+
+import { useMyth } from '../../composable'
+
+interface Props {
+  noCloseBtn?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  noCloseBtn: () => !1
+})
+defineOptions({
+  name: 'MTooltip',
+  inheritAttrs: !1
+})
+const { mOptions } = useMyth()
+</script>
+
+<template>
+  <q-tooltip
+    class="m--dt-btn-tooltip"
+    transition-hide="scale"
+    transition-show="scale"
+    v-bind="{...mOptions.tooltip,...$attrs}"
+  >
+    <slot />
+  </q-tooltip>
+</template>

package/src/components/modal/index.ts

@@ -0,0 +1,5 @@
+import MDialog from './MDialog.vue'
+import MModalMenu from './MModalMenu.vue'
+import MTooltip from './MTooltip.vue'
+
+export { MDialog, MModalMenu, MTooltip }

package/src/components/parials/UploaderItem.vue

@@ -0,0 +1,298 @@
+<!--
+  - MyTh Ahmed Faiz Copyright © 2016-2024 All rights reserved.
+  - Email: mythpe@gmail.com
+  - Mobile: +966590470092
+  - Website: https://www.4myth.com
+  - Github: https://github.com/mythpe
+  -->
+
+<script
+  lang="ts"
+  setup
+>
+
+import { computed, nextTick, reactive, ref } from 'vue'
+import type { MUploaderMediaItem, MUploaderProps as Props, MUploaderServiceType } from '../../types'
+import { QUploader, useQuasar } from 'quasar'
+import { useMyth } from '../../composable'
+import { useI18n } from 'vue-i18n'
+
+type ModelValue = MUploaderMediaItem | File & {
+  __sizeLabel?: string;
+  __progressLabel?: string;
+  __status?: string;
+  __img?: string;
+};
+
+interface P {
+  name: Props['name'];
+  modelId?: Props['modelId'];
+  iconsSize?: Props['iconsSize'];
+  hideDeleteMedia?: Props['hideDeleteMedia'];
+  updateBtn?: Props['updateBtn'];
+  collection?: Props['collection'];
+  returnType?: Props['returnType'];
+  service: Props['service'];
+  displayMode?: Props['displayMode'];
+  shadow?: Props['shadow'];
+  scope: QUploader;
+  defaultFileIcon?: Props['defaultFileIcon'];
+  deleteMediaIcon?: Props['deleteMediaIcon'];
+  downloadFileIcon?: Props['downloadFileIcon'];
+  mediaLabel?: Props['mediaLabel'];
+}
+
+const props = withDefaults(defineProps<P>(), {
+  name: () => '',
+  modelId: undefined,
+  iconsSize: undefined,
+  hideDeleteMedia: undefined,
+  updateBtn: undefined,
+  collection: undefined,
+  returnType: undefined,
+  service: undefined,
+  displayMode: undefined,
+  shadow: undefined,
+  scope: () => ({} as QUploader),
+  defaultFileIcon: undefined,
+  deleteMediaIcon: undefined,
+  downloadFileIcon: undefined,
+  mediaLabel: () => ''
+})
+const modelValue = defineModel<ModelValue>({ required: !0, default: () => ({} as ModelValue) })
+const mediaProp = computed<MUploaderMediaItem>(() => modelValue.value as MUploaderMediaItem)
+
+interface Emits {
+  (e: 'delete-media', media: MUploaderMediaItem, result: boolean): void;
+
+  (e: 'remove-file', File: File): void;
+
+  (e: 'values', value: Props['modelValue']): void;
+}
+
+const emit = defineEmits<Emits>()
+
+const q = useQuasar()
+const { te } = useI18n({ useScope: 'global' })
+const $myth = useMyth()
+const { alertError, alertSuccess, confirmMessage, __ } = $myth
+const { api, mOptions } = reactive($myth)
+const setModelValue = (value: Props['modelValue']) => emit('values', value)
+const deleting = ref(!1)
+const onClickDeleteAttachment = () => {
+  const file = modelValue.value
+  if (file instanceof File) {
+    confirmMessage().onOk(() => {
+      deleteUploaderFile(file)
+    })
+  } else {
+    deleteMedia(file)
+  }
+}
+
+const hideDeleteMediaProp = computed(() => props.hideDeleteMedia)
+const getRequestConfig = () => ({
+  params: {
+    collection: props.collection !== undefined ? props.collection : undefined,
+    return: props.returnType !== undefined ? props.returnType : undefined
+  }
+})
+const deleteMedia = (media: MUploaderMediaItem) => {
+  if (deleting.value || hideDeleteMediaProp.value) {
+    return
+  }
+  confirmMessage().onOk(() => {
+    const model = modelValue.value as MUploaderMediaItem
+    let r = !1
+    const method = (typeof props.service === 'string' ? api[props.service] : props.service) as MUploaderServiceType
+    if (method) {
+      deleting.value = !0
+      q.loading.show()
+      method.deleteAttachment(props.modelId, model.id, getRequestConfig())
+        .then(({ _message, _success, _data }) => {
+          _message && alertSuccess(_message)
+          r = _success
+          setModelValue((_data ?? []) as MUploaderMediaItem[])
+        })
+        .catch((e) => {
+          alertError(e?._message || e?.message)
+          r = !1
+        })
+        .finally(() => {
+          deleting.value = !1
+          q.loading.hide()
+          emit('delete-media', media, r)
+        })
+    }
+  })
+}
+const deleteUploaderFile = (file: File) => {
+  nextTick(() => emit('remove-file', file))
+}
+const onUpdateField = (data: any) => {
+  const model = modelValue.value as MUploaderMediaItem
+  const method = (typeof props.service === 'string' ? api[props.service] : props.service) as MUploaderServiceType
+  if (method) {
+    deleting.value = !0
+    q.loading.show()
+    method.updateAttachment(props.modelId, model.id, data, getRequestConfig())
+      .then(({ _message, _data }) => {
+        _message && alertSuccess(_message)
+        setModelValue((_data ?? []) as MUploaderMediaItem[])
+      })
+      .catch((e) => {
+        alertError(e?._message || e?.message)
+      })
+      .finally(() => {
+        deleting.value = !1
+        q.loading.hide()
+      })
+  }
+}
+defineOptions({ name: 'UploaderItem' })
+</script>
+
+<template>
+  <q-item
+    :class="displayMode === 'card' ? `rounded-borders ${shadow || 'shadow-1'}` : undefined"
+    :dense="displayMode === 'card'"
+    :style="displayMode === 'card' ? 'max-width: 300px; min-width: 200px;' : undefined"
+  >
+    <q-item-section
+      v-if="displayMode === 'list'"
+      avatar
+      top
+    >
+      <q-icon
+        v-if="!!mediaProp.icon"
+        :name="mediaProp.icon"
+        :size="iconsSize"
+        color="primary"
+      />
+      <q-img
+        v-else-if="!!modelValue.__img || (mediaProp.url && modelValue.type === 'image')"
+        :ratio="1"
+        :src="modelValue.__img ? modelValue.__img.src : mediaProp.url"
+        fit="contain"
+      />
+      <q-icon
+        v-else
+        :name="modelValue.type === 'pdf' ? 'fa-regular fa-file-pdf' : (modelValue.type === 'excel' ? 'fa-regular fa-file-excel' : (modelValue.type === 'image' ? 'o_image' :defaultFileIcon))"
+        :size="props.iconsSize"
+        color="primary"
+      />
+    </q-item-section>
+    <q-item-section :class="{'overflow-hidden': displayMode === 'card'}">
+      <q-item-label v-if="!!mediaProp[mediaLabel]">
+        {{ mediaProp[mediaLabel] }}
+        <q-icon
+          v-if="updateBtn"
+          class="cursor-pointer"
+          color="primary"
+          name="o_edit"
+          right
+        >
+          <q-popup-edit
+            v-slot="popupScope"
+            :label-set="__('labels.save')"
+            :model-value="{name: mediaProp.name, order_column: mediaProp.order_column}"
+            :title="__('labels.update')"
+            buttons
+            cover
+            max-width="350px"
+            persistent
+            @save="onUpdateField( $event)"
+          >
+            <q-input
+              v-model="popupScope.value.name"
+              :label="__('name')"
+              autofocus
+              dense
+              hide-bottom-space
+            />
+            <q-input
+              v-model="popupScope.value.order_column"
+              :label="__('order_column')"
+              autofocus
+              dense
+              hide-bottom-space
+            />
+          </q-popup-edit>
+          <q-tooltip>{{ __('labels.update') }}</q-tooltip>
+        </q-icon>
+      </q-item-label>
+      <q-item-label v-else-if="!!mediaProp.label">
+        {{ __(mediaProp.label) }}
+      </q-item-label>
+      <q-item-label v-if="!!mediaProp.user_id_to_string">
+        <q-icon
+          color="primary"
+          name="ion-ios-contact"
+        />
+        {{ mediaProp.user_id_to_string }}
+      </q-item-label>
+      <q-item-label v-if="!!mediaProp.description">
+        {{ mediaProp.description }}
+      </q-item-label>
+      <q-item-label v-else-if="!!mediaProp.attachment_type">
+        {{ mediaProp.attachment_type }}
+      </q-item-label>
+      <slot
+        :item="modelValue"
+        name="item"
+      />
+      <q-item-label
+        v-if="!!modelValue.__status"
+        :class="{'print-hide': !0,'text-positive' : (modelValue.__status === 'uploaded' || !!mediaProp.id),'text-orange' : modelValue.__status === 'uploading','text-amber-10' : modelValue.__status === 'idle' || modelValue.__status === 'failed'}"
+        caption
+      >
+        <q-icon
+          :name="modelValue.__status === 'uploaded' ? 'o_check' : ( modelValue.__status === 'uploading' ? 'o_cloud_sync' : (modelValue.__status === 'idle' ? 'o_hourglass_empty' : (modelValue.__status === 'failed' ? 'o_error_outline' : undefined)))"
+          size="22px"
+        />
+        <span class="text-body2 q-pl-xs">
+          {{ te(`myth.uploader.statuses.${modelValue.__status}`) ? __(`myth.uploader.statuses.${modelValue.__status}`) : modelValue.__status }}
+        </span>
+      </q-item-label>
+      <q-item-label
+        v-if="!!mediaProp.size_to_string || !!modelValue.__sizeLabel"
+        caption
+        class="print-hide"
+      >
+        <span v-if="!!mediaProp.size_to_string">{{ mediaProp.size_to_string }} | {{ modelValue.type }}</span>
+        <span v-if="modelValue.__sizeLabel">{{ modelValue.__sizeLabel }} / {{ modelValue.__progressLabel }}</span>
+      </q-item-label>
+      <q-item-label
+        v-if="(mediaProp.id && mediaProp.url) || (!hideDeleteMedia || (hideDeleteMedia && !mediaProp.id))"
+        class="print-hide justify-between"
+      >
+        <q-btn
+          v-if="mediaProp.id && mediaProp.url"
+          :href="mediaProp.url"
+          :icon="downloadFileIcon"
+          dense
+          flat
+          target="_blank"
+          v-bind="mOptions.uploaderOptions?.downloadBtnProps"
+        >
+          <q-tooltip class="m--dt-btn-tooltip">
+            {{ __('myth.titles.download') }}
+          </q-tooltip>
+        </q-btn>
+        <q-btn
+          v-if="(!hideDeleteMedia || (hideDeleteMedia && !mediaProp.id))"
+          :disable="deleting || scope.isBusy || scope.isUploading"
+          :icon="deleteMediaIcon"
+          dense
+          flat
+          v-bind="mOptions.uploaderOptions?.removeBtnProps"
+          @click="onClickDeleteAttachment()"
+        >
+          <q-tooltip class="m--dt-btn-tooltip">
+            {{ __(mediaProp.id ? 'myth.uploader.deleteMedia' : 'myth.uploader.removeMedia') }}
+          </q-tooltip>
+        </q-btn>
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>

package/src/components/parials/index.ts

@@ -0,0 +1,3 @@
+import UploaderItem from './UploaderItem.vue'
+
+export { UploaderItem }

package/src/components/transition/MTransition.vue

@@ -6,7 +6,10 @@
   - Github: https://github.com/mythpe
   -->
 
-<script lang="ts" setup>
+<script
+  lang="ts"
+  setup
+>
 import type { MTransitionProps as Props } from '../../types'
 
 interface P {

package/src/composable/useBindInput.ts

@@ -1,10 +1,10 @@
-import type { PropsContext as UiOpt } from '../types'
 import { computed, MaybeRefOrGetter, ref, toValue } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useMyth } from './useMyth'
 import { useSplitAttrs } from 'quasar'
 import { myth } from '../utils'
 import { camelCase, kebabCase, snakeCase, uniq } from 'lodash'
+import { PropsContext as UiOpt } from '../types/plugin-props-option'
 
 type G = { name: string; [k: string]: any };
 type OptsContext = { choose?: boolean; };

package/src/composable/useMyth.ts

@@ -9,7 +9,7 @@
 import lodash from 'lodash'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import { copyToClipboard, Dialog, extend, QDialogOptions, QNotifyCreateOptions, useQuasar } from 'quasar'
+import { copyToClipboard, extend, QDialogOptions, QNotifyCreateOptions, useQuasar } from 'quasar'
 import { Helpers, myth, Str, veeRules } from '../utils'
 import type { MDtColumn, MDtHeadersParameter, ParseHeaderOptions, Vue3MAlertMessage, Vue3MAlertMessageOptions, Vue3MConfirmMessage } from '../types'
 import { computed } from 'vue'
@@ -242,19 +242,16 @@ export const useMyth = () => {
     message = message || ''
     opts = opts || {}
     const buttonsProps = {
-      ...(pluginOptions.value.btn || {})
-      // ...(options.value.confirmDialogOptions?.buttons || {})
+      ...pluginOptions.value.btn,
+      ...pluginOptions.value.confirmDialogOptions?.buttons
     }
-    // const okProps = options.value.confirmDialogOptions?.okProps || {}
-    const okProps: any = {}
-    // const cancelProps = options.value.confirmDialogOptions?.cancelProps || {}
-    const cancelProps: any = {}
-    // const dialogProps = options.value.confirmDialog || {} as any
-    const dialogProps: any = {}
+    const okProps = pluginOptions.value.confirmDialogOptions?.okProps || {}
+    const cancelProps = pluginOptions.value.confirmDialogOptions?.cancelProps || {}
+    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 || '')
-    return Dialog.create({
+    return q.dialog({
       title,
       message,
       focus: 'none',
@@ -284,8 +281,19 @@ export const useMyth = () => {
     })
   }
   const api = computed(() => myth.api.value)
+  const baseUrl = computed(() => myth.baseUrl.value)
+  const mAxios = computed(() => myth.mAxios.value)
+  const mOptions = computed(() => myth.props.value)
+  const isSmall = computed(() => q.screen.lt.md)
+  const themeInput = computed(() => myth.themeInput.value)
+  const themeBtn = computed(() => myth.themeBtn.value)
   return {
     api,
+    baseUrl,
+    mAxios,
+    mOptions,
+    themeInput,
+    themeBtn,
     __,
     getPageTitle,
     parseHeaders,
@@ -297,6 +305,7 @@ export const useMyth = () => {
     confirmMessage,
     ...Helpers,
     ...Str,
-    veeRules
+    veeRules,
+    isSmall
   }
 }

package/src/index.sass

@@ -6,4 +6,5 @@
 
 @import 'quasar/src/css/variables.sass'
 @import './style/main.sass'
-@import './style/m-container'
+@import './style/m-container.sass'
+@import './style/print.sass'

package/src/style/main.sass

@@ -1,3 +1,6 @@
+@use 'sass:map'
+@use "quasar/src/css/variables" as q
+
 // Flex.
 .flex-break
   flex: 1 0 100% !important
@@ -40,3 +43,104 @@ $text-dark-color: #ffffff !default
 
   .text-color
     color: $text-dark-color
+
+
+$text-decorations: ('none': none, 'overline': overline, 'underline': underline, 'line-through': line-through)
+@each $name, $value in $text-decorations
+  .text-decoration-#{$name}
+    text-decoration: map.get($text-decorations, $value) !important
+
+$text-wraps: ('wrap': wrap, 'nowrap': nowrap, 'balance': balance, 'pretty': pretty, 'stable': stable)
+@each $name, $value in $text-wraps
+  .text-wrap-#{$name}
+    text-wrap: map.get($text-wraps, $value) !important
+
+$breaks: ('inside', 'after', 'before')
+@each $break in $breaks
+  .break-#{$break}-avoid
+    page-break-#{$break}: avoid
+
+@each $break in $breaks
+  .break-#{$break}-always
+    page-break-#{$break}: always
+
+
+$maxes: ('width', 'height') !default
+@each $max in $maxes
+  .max-#{$max}
+    max-#{$max}: 100% !important
+
+$alignsX: ('top', 'bottom') !default
+$alignsY: ('left', 'right') !default
+$radius-class-name: 'border-rounded' !default
+$radius-value: q.$generic-border-radius !default
+$bordered-class-name: 'bordered' !default
+$bordered-size: 1px !default
+$bordered-style: $bordered-size solid q.$primary !default
+
+
+.#{$radius-class-name}
+  border-radius: $radius-value
+
+
+.#{$bordered-class-name}
+  border: $bordered-style
+
+
+@each $x in $alignsX
+  .bordered-#{$x}
+    border-#{$x}: $bordered-style
+
+  .#{$radius-class-name}-#{$x}
+    border-#{$x}-left-radius: $radius-value
+    border-#{$x}-right-radius: $radius-value
+
+
+  @each $y in $alignsY
+    .#{$radius-class-name}-#{$x}-#{$y}
+      border-#{$x}-#{$y}-radius: $radius-value
+
+
+    .#{$radius-class-name}-#{$y}
+      border-bottom-#{$y}-radius: $radius-value
+      border-top-#{$y}-radius: $radius-value
+
+
+    .bordered-#{$y}
+      border-#{$y}: $bordered-style
+
+.pre-text
+  white-space-collapse: preserve-breaks
+  white-space: pre-line
+
+
+pre
+  max-width: 100%
+
+[data-input-name].m--input__error
+  > .q-field
+    &:not(.q-field--disabled)
+      .q-field__label::after
+        color: q.$negative
+
+  .m--input__top-label__content
+    color: q.$negative
+
+[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
+    content: ' *'
+
+.m--input__color-preview
+  border: 1px solid q.$primary
+  border-radius: $radius-value
+
+
+.m--confirm.actions-between
+  .q-card__actions
+    justify-content: space-between !important

package/src/style/print.sass

@@ -0,0 +1,14 @@
+@media print
+  .q-notifications
+    display: none !important
+
+  .print-shadow-none
+    box-shadow: none !important
+    border: 0 !important
+
+  .print-no-padding
+    padding: 0 !important
+
+  .print-no-margin
+    margin: 0 !important
+

package/src/style/transition.sass

@@ -0,0 +1,40 @@
+.myth-transition__fade-enter-from,
+.myth-transition__fade-leave-to
+  opacity: 0
+  transform: translateY(-20px)
+
+
+.myth-transition__fade-enter-active,
+.myth-transition__fade-leave-active
+  transition: all .3s ease
+
+
+.myth-transition__fade-x-enter-from,
+.myth-transition__fade-x-leave-to
+  opacity: 0
+  transform: translateX(-20px)
+
+
+.myth-transition__fade-x-enter-active
+  transition: all .3s ease
+
+
+.myth-transition__fade-x-leave-active
+  transition: all .1s ease
+
+
+.m__transition__fade-move,
+.m__transition__fade-enter-active,
+.m__transition__fade-leave-active
+  transition: all 0.5s ease
+
+
+.m__transition__fade-enter-from,
+.m__transition__fade-leave-to
+  opacity: 0
+  transform: translateX(30px)
+
+
+.m__transition__fade-leave-active
+  position: absolute
+