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

package/index.d.ts

@@ -0,0 +1,17 @@
+/*
+ * 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
+ */
+
+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,14 +1,17 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.25",
+  "version": "0.0.26-dev",
   "description": "MyTh Quasar UI Kit App Extension",
-  "author": "MyTh Ahmed Faiz <mythpe@gmail.com>",
-  "email": "mythpe@gmail.com",
-  "mobile": "+966590470092",
+  "author": {
+    "name": "MyTh Ahmed Faiz",
+    "mobile": "+966590470092",
+    "email": "mythpe@gmail.com",
+    "url": "https://www.4myth.com"
+  },
   "license": "MIT",
+  "type": "module",
   "module": "src/index.esm.js",
   "main": "src/index.common.js",
-  "type": "module",
   "scripts": {
     "dev": "cd ../dev && yarn dev && cd ..",
     "dev:umd": "yarn build && node build/script.open-umd.js",
@@ -21,14 +24,15 @@
     "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",
+    "axios": "^1.7.8",
+    "lodash": "^4.17.0",
+    "typed.js": "^2.1.0",
+    "vee-validate": "^4.14.0",
     "vue-i18n": "^10.0.0"
   },
   "devDependencies": {
-    "lodash": "^4.17.21",
     "@quasar/app-webpack": "^3.13.0",
     "@quasar/extras": "^1.16.4",
     "@rollup/plugin-buble": "^0.21.3",
@@ -60,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/boot/register.ts

@@ -0,0 +1,14 @@
+/*
+ * 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
+ */
+
+import { boot } from 'quasar/wrappers'
+import Plugin from '../utils/vue-plugin'
+
+export default boot(({ app }) => {
+  app.use(Plugin)
+})

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>

package/src/components/form/MAxios.vue

@@ -0,0 +1,141 @@
+<!--
+  - 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 { MAxiosProps as Props, MSelectModelEmit } from '../../types'
+import type { QSelectSlots } from 'quasar'
+import { computed, onMounted, ref, toValue, watch } from 'vue'
+import { useSetFieldValue } from 'vee-validate'
+import MSelect from './MSelect.vue'
+import { useMyth } from '../../composable'
+
+type P = {
+  name: Props['name'];
+  label?: Props['label'];
+  placeholder?: Props['placeholder'];
+  viewMode?: Props['viewMode'];
+  viewModeValue?: Props['viewModeValue'];
+  service?: Props['service'];
+  guest?: Props['guest'];
+  requestWith?: Props['requestWith'];
+  params?: Props['params'];
+  lazy?: Props['lazy'];
+  useChoice?: Props['useChoice'];
+}
+
+const props = withDefaults(defineProps<P>(), {
+  name: () => '',
+  label: undefined,
+  placeholder: undefined,
+  viewMode: () => !1,
+  viewModeValue: undefined,
+  service: undefined,
+  guest: undefined,
+  requestWith: undefined,
+  params: () => () => ({}),
+  lazy: () => !1,
+  useChoice: undefined
+})
+const modelValue = defineModel<Props['modelValue']>({ required: !1, default: undefined })
+type Emits = {
+  (e: 'model', value: MSelectModelEmit): void;
+}
+const emit = defineEmits<Emits>()
+const search = defineModel<string>('search', { required: !1, default: '' })
+const setFieldValue = useSetFieldValue(() => props.name)
+const { alertError, api } = useMyth()
+const loading = defineModel<Props['loading']>('loading', { required: !1, default: !1 })
+const items = defineModel<Props['items']>('items', { required: !1, default: [] })
+const isGuest = computed(() => {
+  const v = toValue(props.guest)
+  return v !== undefined && v !== null && v !== !1
+})
+const prepare = async (fromWatch = !1) => {
+  if (!props.service || loading.value) {
+    return
+  }
+  const method = typeof props.service === 'string'
+    ? (isGuest.value ? api.value[props.service].staticIndex : api.value[props.service].index)
+    : props.service
+  if (!method) {
+    throw Error(`No service: ${props.service}`)
+  }
+  const params: any = {
+    requestWith: undefined,
+    search: search.value,
+    itemsPerPage: -1,
+    page: 1,
+    staticRequest: 1,
+    ...(toValue(props.params) || {})
+  }
+  if (props.requestWith) {
+    params.requestWith = toValue(props.requestWith)
+  }
+  loading.value = !0
+  items.value = []
+  method({ params })
+    .then(({ _data }: any) => {
+      items.value = _data || []
+    })
+    .catch((e: any) => {
+      alertError(e?.message || 'An error occurred')
+    })
+    .finally(() => {
+      loading.value = !1
+      if (fromWatch) {
+        if (modelValue.value !== null && modelValue.value !== undefined) {
+          setFieldValue(undefined)
+        }
+      }
+    })
+}
+const listeners = {
+  'update:search': prepare,
+  model: (v: MSelectModelEmit) => emit('model', v)
+}
+onMounted(() => {
+  if (!props.lazy) {
+    prepare()
+  }
+})
+watch(props.params, () => prepare(!0), { deep: !0 })
+const input = ref<InstanceType<typeof MSelect> | null>(null)
+defineExpose<{ input: typeof input }>({ input })
+defineOptions({ name: 'MAxios', inheritAttrs: !1 })
+</script>
+
+<template>
+  <MSelect
+    ref="input"
+    v-model="modelValue"
+    v-model:loading="loading"
+    v-model:search="search"
+    :label="label"
+    :name="name"
+    :options="items"
+    :placeholder="placeholder"
+    :view-mode="viewMode"
+    :view-mode-value="viewModeValue"
+    axios-mode
+    no-filter
+    v-bind="$attrs"
+    v-on="listeners"
+  >
+    <template
+      v-for="(_,slot) in $slots as Readonly<QSelectSlots>"
+      :key="slot"
+      #[slot]="inputSlot"
+    >
+      <slot
+        :name="slot"
+        v-bind="inputSlot || {}"
+      />
+    </template>
+  </MSelect>
+</template>