@mythpe/quasar-ui-qui 0.0.23-dev → 0.0.24-dev

package/index.d.ts

@@ -11,3 +11,7 @@ export * from './src/types'
 export * from './src/components'
 export * from './src/composable'
 export * from './src/utils'
+export { ThemeBtn } from './src/types/theme'
+export { ThemeInput } from './src/types/theme'
+export { ThemeShadow } from './src/types/theme'
+export { ThemeSize } from './src/types/theme'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.23-dev",
+  "version": "0.0.24-dev",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",
@@ -24,12 +24,13 @@
     "build:css": "node build/script.css.js"
   },
   "dependencies": {
-    "typed.js": "^2.1.0",
-    "vee-validate": "^4.14.0",
     "@vee-validate/i18n": "^4.14.0",
     "@vee-validate/rules": "^4.14.0",
-    "vue-i18n": "^10.0.0",
-    "lodash": "^4.17.0"
+    "axios": "^1.7.8",
+    "lodash": "^4.17.0",
+    "typed.js": "^2.1.0",
+    "vee-validate": "^4.14.0",
+    "vue-i18n": "^10.0.0"
   },
   "devDependencies": {
     "@quasar/app-webpack": "^3.13.0",
@@ -63,8 +64,10 @@
     "sass": "^1.33.0",
     "typescript": "~5.5.3",
     "uglify-js": "^3.13.3",
+    "vite-plugin-checker": "^0.8.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0",
+    "vue-tsc": "^2.0.29",
     "zlib": "^1.0.5"
   },
   "browserslist": [

package/src/components/form/MAvatarViewer.vue

@@ -0,0 +1,324 @@
+<!--
+  - 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 (props.clearable && 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(null, !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>