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

package/src/components/datatable/MDtAvatar.vue

@@ -0,0 +1,49 @@
+<!--
+  - 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 {
+  width?: string | undefined
+  src?: string | undefined
+  href?: string | undefined;
+}
+
+withDefaults(defineProps<Props>(), {
+  width: '50px',
+  src: undefined,
+  href: undefined
+})
+const { openWindow } = useMyth()
+defineOptions({
+  name: 'MDtAvatar',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <q-avatar
+    rounded
+    v-bind="$attrs"
+  >
+    <q-img
+      v-if="src"
+      :height="width"
+      :src="src"
+      :width="width"
+      class="cursor-pointer"
+      fit="contain"
+      @click="openWindow(Boolean(href) ? href: src)"
+    />
+  </q-avatar>
+</template>

package/src/components/datatable/MDtBtn.vue

@@ -0,0 +1,153 @@
+<!--
+  - 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 } from 'vue'
+import { useMyth } from '../../composable'
+
+interface Props {
+  show?: boolean | undefined;
+  update?: boolean | undefined;
+  destroy?: boolean | undefined;
+  tooltip?: string | null | undefined;
+  color?: string | undefined;
+  icon?: string | undefined;
+  listItem?: boolean | undefined;
+  label?: string | undefined;
+  round?: boolean | undefined;
+  dense?: boolean | undefined;
+  fabMini?: boolean | undefined;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  show: undefined,
+  update: undefined,
+  destroy: undefined,
+  color: undefined,
+  icon: undefined,
+  tooltip: undefined,
+  listItem: undefined,
+  label: undefined,
+  round: undefined,
+  dense: undefined,
+  fabMini: undefined
+})
+type Events = {
+  (e: 'click', evt: Event): void;
+}
+const emit = defineEmits<Events>()
+
+const hasTooltip = computed(() => !!props.tooltip || !!props.show || !!props.update || !!props.destroy)
+const { __, mOptions } = useMyth()
+const getTooltip = computed(() => {
+  if (props.tooltip !== undefined) {
+    return props.tooltip ? __(props.tooltip) : props.tooltip
+  } else if (props.show) {
+    return __('labels.show')
+  } else if (props.update) {
+    return __('labels.update')
+  } else if (props.destroy) {
+    return __('labels.destroy')
+  }
+  return props.tooltip
+})
+const getIcon = computed(() => {
+  if (props.show) {
+    return 'ion-ios-eye'
+  } else if (props.update) {
+    return 'ion-ios-create'
+  } else if (props.destroy) {
+    return 'ion-ios-trash'
+  }
+  return props.icon
+})
+const getColor = computed<string | undefined>(() => {
+  if (props.color !== undefined) {
+    return props.color
+  }
+  if (props.show) {
+    return mOptions.value?.dt?.contextmenu?.btnStyle?.showColor
+  } else if (props.update) {
+    return mOptions.value?.dt?.contextmenu?.btnStyle?.updateColor
+  } else if (props.destroy) {
+    return mOptions.value?.dt?.contextmenu?.btnStyle?.destroyColor
+  }
+  return props.color
+})
+// const getLabel = computed(() => {
+//   if (props.label) {
+//     return __(props.label)
+//   } else if (props.show) {
+//     return __('labels.show')
+//   } else if (props.update) {
+//     return __('labels.update')
+//   } else if (props.destroy) {
+//     return __('labels.destroy')
+//   }
+//   return props.label
+// })
+
+defineOptions({
+  name: 'MDtBtn',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <q-item
+    v-if="listItem"
+    v-close-popup
+    clickable
+    v-bind="{...mOptions.dt?.MDtBtn?.item?.props,...$attrs}"
+    @click="emit('click',$event)"
+  >
+    <q-item-section
+      side
+      v-bind="mOptions.dt?.MDtBtn?.item?.avatarProps"
+    >
+      <q-icon
+        :color="getColor"
+        :name="getIcon"
+        v-bind="mOptions.dt?.MDtBtn?.item?.iconProps"
+      />
+    </q-item-section>
+    <q-item-section v-bind="mOptions.dt?.MDtBtn?.item?.labelSectionProps">
+      <q-item-label v-bind="mOptions.dt?.MDtBtn?.item?.itemLabelProps">
+        <slot>
+          {{ label ? __(label) : label }}
+        </slot>
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+  <q-btn
+    v-else
+    v-bind="{
+      ...mOptions.dt?.MDtBtn?.btn?.props,
+      ...$attrs,
+      fabMini: fabMini !== undefined ? fabMini : ( mOptions.dt?.btn?.fabMini !== undefined ? mOptions.dt.btn.fabMini : label === undefined),
+      round: round !== undefined ? round : ( mOptions.dt?.btn?.round !== undefined ? mOptions.dt.btn.round : label === undefined),
+      dense: dense !== undefined ? dense : ( mOptions.dt?.btn?.dense !== undefined ? mOptions.dt.btn.dense : label === undefined),
+      label: label !== undefined ? __(label) : label,
+      icon: getIcon,
+      color: getColor
+    }"
+    @click="emit('click',$event)"
+  >
+    <q-tooltip
+      v-if="hasTooltip"
+      class="m--dt-btn-tooltip"
+    >
+      {{ getTooltip }}
+    </q-tooltip>
+    <slot />
+  </q-btn>
+</template>

package/src/components/datatable/MDtContextmenuItems.vue

@@ -0,0 +1,54 @@
+<!--
+  - 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 { MDatatableDialogsOptions, MDatatableProps } from '../../types'
+import { computed, UnwrapRef } from 'vue'
+import { useMyth } from '../../composable'
+
+interface Props {
+  items: MDatatableProps['contextItems'],
+  item: UnwrapRef<MDatatableDialogsOptions['item']>,
+  index: UnwrapRef<MDatatableDialogsOptions['index']>,
+  displayMode?: 'icon' | 'item'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => ([]),
+  item: undefined,
+  index: undefined,
+  displayMode: () => 'icon'
+})
+const itemMode = computed(() => props.displayMode === 'item')
+const { __ } = useMyth()
+defineOptions({ name: 'MDtContextmenuItems', inheritAttrs: !1 })
+</script>
+
+<template>
+  <template v-if="item !== undefined && index !== undefined">
+    <template
+      v-for="(m,i) in items"
+      :key="`MDtContextmenuItems-i${i}`"
+    >
+      <MDtBtn
+        v-if="typeof m.showIf === 'function' ? m.showIf(item,index) : m.showIf"
+        :[m.name]="!0"
+        :label="itemMode && m.label === undefined ? __(m.tooltip || m.attr?.label || m.attr?.tooltip ||m.name) : (m.label !== undefined ? __(m.label || m.name) :
+          undefined)"
+        :list-item="itemMode"
+        :tooltip="m.tooltip !== undefined ? m.tooltip : (m.label === undefined ? m.name : undefined)"
+        v-bind="m.attr"
+        @click="m.click ? m.click(item,index) : undefined"
+      />
+    </template>
+  </template>
+</template>

package/src/components/datatable/index.ts

@@ -0,0 +1,6 @@
+import MDatatable from './MDatatable.vue'
+import MDtAvatar from './MDtAvatar.vue'
+import MDtBtn from './MDtBtn.vue'
+import MDtContextmenuItems from './MDtContextmenuItems.vue'
+
+export { MDatatable, MDtAvatar, MDtBtn, MDtContextmenuItems }

package/src/components/form/MAvatarViewer.vue

@@ -0,0 +1,327 @@
+<!--
+  - 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, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
+
+import MFile from './MFile.vue'
+import type { MAvatarViewerProps as Props } from '../../types'
+import { useField, useFieldError } from 'vee-validate'
+import { useBindInput, useMyth } from '../../composable'
+
+interface P {
+  auto?: Props['auto'];
+  col?: Props['col'];
+  xs?: Props['xs'];
+  sm?: Props['sm'];
+  md?: Props['md'];
+  lg?: Props['lg'];
+  xl?: Props['xl'];
+  accept?: Props['accept'];
+  images?: Props['images'];
+  svg?: Props['svg'];
+  video?: Props['video'];
+  pdf?: Props['pdf'];
+  excel?: Props['excel'];
+  size?: Props['size'];
+  avatarText?: Props['avatarText'];
+  fit?: Props['fit'];
+  clearable?: Props['clearable'];
+  label?: Props['label'];
+  rounded?: Props['rounded'];
+  name?: Props['name'];
+  caption?: Props['caption'];
+  captionProps?: Props['captionProps'];
+  hint?: Props['hint'];
+  hintProps?: Props['hintProps'];
+  formErrors?: Props['formErrors'];
+  help?: Props['help'];
+  readonly?: Props['readonly'];
+  loading?: Props['loading'];
+  required?: Props['required'];
+  rules?: Props['rules'];
+}
+
+const props = withDefaults(defineProps<P>(), {
+  auto: undefined,
+  col: undefined,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined,
+  accept: undefined,
+  images: !0,
+  svg: !0,
+  video: !1,
+  pdf: !1,
+  excel: !1,
+  size: () => '100px',
+  avatarText: undefined,
+  fit: () => 'contain',
+  clearable: undefined,
+  label: undefined,
+  rounded: undefined,
+  name: 'avatar',
+  hint: undefined,
+  hintProps: undefined,
+  caption: undefined,
+  captionProps: undefined,
+  formErrors: () => ({}),
+  help: undefined,
+  readonly: () => !1,
+  loading: () => !1,
+  required: undefined,
+  rules: () => ({})
+})
+type Emits = {
+  (e: 'click', evt?: Event): void;
+}
+const emit = defineEmits<Emits>()
+const { __ } = useMyth()
+const { accepts } = useBindInput<any>(() => props, 'avatarViewer')
+const modelValueScope = useField<Props['modelValue']>(() => props.name, undefined, {
+  syncVModel: !0
+})
+const { value: modelValue, handleReset } = modelValueScope
+const errorMessage = useFieldError(() => props.name)
+const removedScope = useField<Props['removed']>(() => `${props.name}_removed`, undefined, {
+  syncVModel: 'removed'
+})
+const { handleChange: handleRemoved } = removedScope
+
+const urlScope = useField<Props['url']>(() => `${props.name}_url`, undefined, {
+  syncVModel: 'url'
+})
+const { value: url, handleChange: handleUrl } = urlScope
+
+const fileRef = useTemplateRef<typeof MFile>('fileRef')
+const pickFiles = () => fileRef.value?.pickFiles()
+const removeFile = () => fileRef.value?.removeAtIndex(0)
+
+/**
+ * Blob file to url helpers
+ */
+const blobUrl = ref<string | null>(null)
+const isLoaded = ref(!1)
+const revoke = () => {
+  if (blobUrl.value) {
+    URL.revokeObjectURL(blobUrl.value)
+    blobUrl.value = null
+  }
+}
+const toUrl = (data?: any) => {
+  revoke()
+  blobUrl.value = URL.createObjectURL(data)
+  return blobUrl
+}
+
+const hasSrc = computed(() => !!modelValue.value || !!url.value)
+
+/**
+ * Check if blob value is a File & not image
+ */
+const isFile = computed(() => {
+  if (!(modelValue.value instanceof File)) {
+    return !1
+  }
+  return modelValue.value instanceof File && modelValue.value?.type.slice(0, 6) !== 'image/'
+})
+const getAvatarText = computed(() => props.avatarText ? props.avatarText.slice(0, 1).toUpperCase() : undefined)
+const loadingSrc = ref(!1)
+const onClick = (e?: Event) => {
+  if (props.readonly) {
+    if (loadingSrc.value) {
+      loadingSrc.value = !1
+    }
+    return
+  }
+  loadingSrc.value = !0
+  nextTick(() => {
+    if (hasSrc.value && !props.required) {
+      onClearInput()
+      handleReset()
+      loadingSrc.value = !1
+      return
+    }
+    handleReset()
+    pickFiles()
+    nextTick(() => {
+      emit('click', e)
+      loadingSrc.value = !1
+    })
+  })
+}
+const onClearInput = () => {
+  removeFile()
+  handleRemoved(!0, !1)
+  handleUrl(undefined, !1)
+}
+onBeforeUnmount(() => {
+  revoke()
+  removeFile()
+  handleRemoved(undefined, !1)
+})
+watch(modelValue, (v) => {
+  if (props.readonly) {
+    return
+  }
+  if (v instanceof File) {
+    nextTick(() => toUrl(v))
+  }
+})
+
+defineOptions({
+  name: 'MAvatarViewer',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MCol
+    :auto="auto"
+    :class="$attrs.class"
+    :col="col"
+    :lg="lg"
+    :md="md"
+    :name="name"
+    :sm="sm"
+    :xs="xs"
+  >
+    <MColumn class="items-center">
+      <MTransition>
+        <div
+          v-if="!!label"
+          key="label"
+          class="row items-center"
+        >
+          <q-skeleton
+            v-if="loading"
+            class="q-mb-md"
+            height="22px"
+            width="80px"
+          />
+          <div
+            v-else
+            :class="`text-h6 q-px-sm rounded-borders q-mb-sm ${!!errorMessage ? 'text-negative' : ''}`"
+          >
+            {{ __(label) }}
+            <span
+              v-if="!clearable"
+              class="text-negative"
+            >*</span>
+          </div>
+          <MHelpRow
+            v-if="!!help && !loading"
+            :text="help"
+            tooltip
+          />
+        </div>
+        <slot name="hint">
+          <div
+            v-if="!!hint && !loading"
+            key="hint"
+            class="m--input__hint"
+            v-bind="hintProps"
+          >
+            <span>{{ __(hint) }}</span>
+          </div>
+        </slot>
+        <div
+          key="avatar"
+          :class="`rounded-borders q-mb-sm ${!!errorMessage ? 'q-pa-xs bg-negative' : ''}`"
+        >
+          <q-skeleton
+            v-if="loading"
+            :size="size"
+            type="QAvatar"
+          />
+          <q-avatar
+            v-else
+            :color="!!errorMessage ? 'negative' : ((!isLoaded || !hasSrc || isFile) ? 'primary' : undefined)"
+            :icon="isFile ? 'o_description' : undefined"
+            :rounded="rounded === undefined ? hasSrc : rounded"
+            :size="size"
+            text-color="white"
+          >
+            <q-img
+              v-if="hasSrc && !isFile"
+              :fit="fit"
+              :height="size"
+              :src="blobUrl || url"
+              ratio="1"
+              @error="isLoaded = !0"
+              @load="isLoaded = !0"
+            >
+              <template #loading>
+                <div class="text-white">
+                  <q-spinner-ios />
+                </div>
+              </template>
+            </q-img>
+            <div
+              v-if="getAvatarText && !hasSrc"
+              class="text-white text-h3"
+              v-text="getAvatarText"
+            />
+          </q-avatar>
+        </div>
+        <div
+          v-if="!readonly"
+          key="btn"
+          class="q-mb-sm"
+        >
+          <q-skeleton
+            v-if="loading"
+            type="QBtn"
+          />
+          <MBtn
+            v-else
+            :color="!hasSrc ? 'positive' : 'secondary'"
+            :disable="!isLoaded && !!url"
+            :icon="hasSrc ? 'ion-ios-close' : 'ion-ios-attach'"
+            :label="__( clearable && hasSrc ? 'remove' : ( !clearable && hasSrc ? 'change' : 'choose') )"
+            :loading="loadingSrc"
+            @click="onClick"
+          />
+        </div>
+        <div
+          v-if="!!errorMessage"
+          key="errors"
+          class="q-mb-sm"
+        >
+          <span class="text-body2 text-negative">{{ errorMessage }}</span>
+        </div>
+      </MTransition>
+      <slot name="caption">
+        <div
+          v-if="!!caption"
+          class="m--input__caption"
+          v-bind="captionProps"
+        >
+          {{ __(caption) }}
+        </div>
+      </slot>
+    </MColumn>
+    <slot />
+    <MFile
+      key="file"
+      ref="fileRef"
+      v-model="modelValue"
+      :accept="accepts.join(',')"
+      :clearable="clearable"
+      :name="name || ''"
+      :required="required"
+      :rules="rules"
+      class="hidden"
+    />
+  </MCol>
+</template>