@mythpe/quasar-ui-qui 0.0.19-dev → 0.0.19

package/src/components/grid/MContainer.vue

@@ -6,24 +6,33 @@
   - Github: https://github.com/mythpe
   -->
 
-<script lang="ts" setup>
+<script
+  lang="ts"
+  setup
+>
 import type { MContainerProps } from '../../types'
 import { myth } from '../../utils'
 import { computed } from 'vue'
 
-interface Props {
-  size?: MContainerProps['size'];
-  fluid?: MContainerProps['fluid'];
-  dense?: MContainerProps['dense'];
-}
-
-const props = defineProps<Props>()
-const styles = computed(() => myth.options.value?.style ?? {})
+const props = withDefaults(defineProps<MContainerProps>(), {
+  size: undefined,
+  dense: !1,
+  fluid: undefined
+})
 const sizeProp = computed(() => {
   if (props.size !== undefined) {
     return props.size
   }
-  return styles.value.gutters
+  if (myth.props.value.container?.size !== undefined) {
+    return myth.props.value.container?.size
+  }
+  return myth.size.value
+})
+const fluidProp = computed(() => {
+  if (props.fluid !== undefined) {
+    return props.fluid
+  }
+  return myth.fluid.value === !0
 })
 defineOptions({
   name: 'MContainer',
@@ -35,8 +44,8 @@ defineOptions({
   <div
     :class="{
       'm--container' : !0,
-      'm--container__fluid' : (fluid !== !1 && fluid !== undefined) || (styles.fluid === !0 && (fluid !== !1 && fluid !== undefined)),
-      'm--container__dense' : dense !== !1 && dense !== undefined,
+      '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

@@ -11,14 +11,13 @@
   setup
 >
 import { useMyth } from '../../composable'
+import type { MHelpRowProps } from '../../types'
 
-interface Props {
-  text?: string | undefined;
-  icon?: string | undefined;
-  tooltip?: boolean | undefined;
-}
-
-defineProps<Props>()
+withDefaults(defineProps<MHelpRowProps>(), {
+  text: undefined,
+  icon: undefined,
+  tooltip: !1
+})
 const { __ } = useMyth()
 defineOptions({
   name: 'MHelpRow',
@@ -27,11 +26,14 @@ defineOptions({
 </script>
 
 <template>
-  <div class="row">
+  <div
+    v-if="text || tooltip"
+    class="row"
+  >
     <div class="col-auto">
       <q-icon
+        :class="{'cursor-pointer': !!tooltip}"
         :left="!!text && !tooltip"
-        class="cursor-pointer"
         name="ion-ios-information-circle-outline"
         size="19px"
       >

package/src/components/grid/MRow.vue

@@ -14,15 +14,28 @@ import type { MRowProps } from '../../types'
 import { computed } from 'vue'
 import { myth } from '../../utils'
 
-interface Props {
-  gutter?: MRowProps['gutter'];
-  col?: MRowProps['col'];
-}
-
-const props = defineProps<Props>()
-const defSize = computed<string>(() => myth.options.value.style?.gutters || '')
-const gutterSize = computed<string>(() => props.gutter === !0 ? defSize.value : (props.gutter || defSize.value))
-const colSize = computed<string>(() => props.gutter === !0 ? defSize.value : (props.gutter || defSize.value))
+const props = withDefaults(defineProps<MRowProps>(), {
+  gutter: undefined,
+  col: undefined
+})
+const defSize = 'md'
+const gutterSize = computed<string>(() => {
+  if (props.gutter !== undefined) {
+    if (typeof props.gutter === 'string' && props.gutter?.length > 0) {
+      return props.gutter
+    }
+  }
+  return myth.size.value || defSize
+})
+const colSize = computed<string>(() => {
+  if (props.col !== undefined) {
+    if (typeof props.col === 'string' && props.col?.length > 0) {
+      return props.col
+    }
+  }
+  return myth.size.value || defSize
+})
+// const colSize = computed<string>(() => props.gutter === !0 ? defSize.value : (props.gutter || defSize.value))
 defineOptions({
   name: 'MRow',
   inheritAttrs: !1

package/src/components/index.ts

@@ -6,6 +6,10 @@
  * Github: https://github.com/mythpe
  */
 
+export * from './datatable'
 export * from './form'
 export * from './grid'
+export * from './modal'
+export * from './parials'
 export * from './typography'
+export * from './transition'

package/src/components/modal/MDialog.vue

@@ -0,0 +1,58 @@
+<!--
+  - 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, reactive } from 'vue'
+import type { MDialogProps as Props } from '../../types'
+import { useMyth } from '../../composable'
+
+interface P {
+  slide?: Props['slide'] | undefined;
+  from?: Props['from']
+}
+
+const props = withDefaults(defineProps<P>(), {
+  slide: () => !1,
+  from: () => 'left'
+})
+const slideProp = computed(() => props.slide !== undefined && props.slide !== !1 && props.slide !== null)
+const map = {
+  left: 'right',
+  right: 'left',
+  up: 'down',
+  down: 'up'
+}
+
+const slideHide = computed<string>(() => 'slide-' + props.from)
+const slideShow = computed<string>(() => 'slide-' + map[props.from])
+const { mOptions } = reactive(useMyth())
+defineOptions({
+  name: 'MDialog',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <q-dialog
+    :transition-hide="$q.screen.lt.md ? slideHide : (slideProp ? slideHide : 'jump-down')"
+    :transition-show="$q.screen.lt.md ? slideShow : (slideProp ? slideShow : 'jump-up')"
+    allow-focus-outside
+    maximized
+    no-backdrop-dismiss
+    no-esc-dismiss
+    no-shake
+    persistent
+    v-bind="{...mOptions.dialog,...$attrs}"
+  >
+    <slot />
+  </q-dialog>
+</template>

package/src/components/modal/MModalMenu.vue

@@ -0,0 +1,62 @@
+<!--
+  - 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 type { MModalMenuProps } from '../../types'
+import { useMyth } from '../../composable'
+import { reactive } from 'vue'
+
+interface Props {
+  noCloseBtn?: MModalMenuProps['noCloseBtn'];
+  position?: MModalMenuProps['position'];
+}
+
+const { mOptions, __ } = reactive(useMyth())
+withDefaults(defineProps<Props>(), {
+  noCloseBtn: () => !1,
+  position: () => 'bottom'
+})
+defineOptions({
+  name: 'MModalMenu',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <q-popup-proxy
+    :position="position"
+    allow-focus-outside
+    class="m--modal_menu shadow-24"
+    maximized
+    no-backdrop-dismiss
+    no-shake
+    v-bind="{...mOptions.modalMenu,...$attrs}"
+  >
+    <q-card v-bind="mOptions.modalMenuOptions?.card">
+      <slot />
+      <template v-if="!noCloseBtn">
+        <q-separator class="lt-md" />
+        <q-item
+          v-close-popup
+          class="lt-md"
+          clickable
+          v-bind="mOptions.modalMenuOptions?.closeBtn"
+        >
+          <q-item-section>
+            <q-item-label header>
+              {{ __('myth.titles.close') }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-card>
+  </q-popup-proxy>
+</template>

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,299 @@
+<!--
+  - 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 type { QUploader } from 'quasar'
+import { 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/MFadeTransition.vue

@@ -0,0 +1,27 @@
+<!--
+  - 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
+>
+defineOptions({
+  name: 'MFadeTransition',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <Transition
+    appear
+    name="myth-transition__fade"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Transition>
+</template>

package/src/components/transition/MFadeXTransition.vue

@@ -0,0 +1,26 @@
+<!--
+  - 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
+>
+defineOptions({
+  name: 'MFadeXTransition',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <Transition
+    appear
+    name="myth-transition__fade-x"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Transition>
+</template>