@mythpe/quasar-ui-qui 0.0.26-dev → 0.0.27-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

@@ -6,7 +6,10 @@
   - Github: https://github.com/mythpe
   -->
 
-<script lang="ts" setup>
+<script
+  lang="ts"
+  setup
+>
 import { computed, nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
 
 import MFile from './MFile.vue'
@@ -143,7 +146,7 @@ const onClick = (e?: Event) => {
   }
   loadingSrc.value = !0
   nextTick(() => {
-    if (props.clearable && hasSrc.value && !props.required) {
+    if (hasSrc.value && !props.required) {
       onClearInput()
       handleReset()
       loadingSrc.value = !1
@@ -160,7 +163,7 @@ const onClick = (e?: Event) => {
 const onClearInput = () => {
   removeFile()
   handleRemoved(!0, !1)
-  handleUrl(null, !1)
+  handleUrl(undefined, !1)
 }
 onBeforeUnmount(() => {
   revoke()

package/src/components/form/MAxios.vue

@@ -6,11 +6,14 @@
   - Github: https://github.com/mythpe
   -->
 
-<script lang="ts" setup>
+<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 { computed, onMounted, toValue, useTemplateRef, watch } from 'vue'
 import { useSetFieldValue } from 'vee-validate'
 import MSelect from './MSelect.vue'
 import { useMyth } from '../../composable'
@@ -61,7 +64,7 @@ const prepare = async (fromWatch = !1) => {
     return
   }
   const method = typeof props.service === 'string'
-    ? (isGuest.value ? api.value[props.service].staticIndex : api.value[props.service].index)
+    ? (isGuest.value ? api.value[props.service]?.staticIndex : api.value[props.service]?.index)
     : props.service
   if (!method) {
     throw Error(`No service: ${props.service}`)
@@ -105,7 +108,7 @@ onMounted(() => {
   }
 })
 watch(props.params, () => prepare(!0), { deep: !0 })
-const input = ref<InstanceType<typeof MSelect> | null>(null)
+const input = useTemplateRef<InstanceType<typeof MSelect>>('input')
 defineExpose<{ input: typeof input }>({ input })
 defineOptions({ name: 'MAxios', inheritAttrs: !1 })
 </script>

package/src/components/form/MCheckbox.vue

@@ -6,20 +6,44 @@
   - Github: https://github.com/mythpe
   -->
 
-<script lang="ts" setup>
+<script
+  lang="ts"
+  setup
+>
 import { useField } from 'vee-validate'
-import { computed, reactive, toValue, useTemplateRef } from 'vue'
+import { reactive, toValue, useTemplateRef } from 'vue'
 import { useBindInput, useMyth } from '../../composable'
 import type { MCheckboxProps as Props } from '../../types'
 import { QCheckbox, QField } from 'quasar'
-import { myth } from '../../utils'
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  name: '',
+  label: undefined,
+  toggleIndeterminate: undefined,
+  leftLabel: undefined,
+  keepColor: undefined,
+  dark: undefined,
+  dense: undefined,
+  disable: undefined,
+  viewMode: undefined,
+  auto: undefined,
+  col: undefined,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined,
+  required: undefined,
+  autocomplete: undefined,
+  mobile: undefined,
+  email: undefined,
+  float: undefined,
+  useChoice: undefined
+})
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const { __ } = useMyth()
 const helper = useBindInput<any>(() => props, 'checkbox')
 const { getLabel, attrs, inputRules } = helper
-const options = computed(() => myth.props.value)
 const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
   syncVModel: !0,
   label: getLabel,
@@ -32,7 +56,7 @@ const { value, errorMessage, handleChange } = inputScope
 const listeners = {
   'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
 }
-const input = useTemplateRef<InstanceType<typeof QCheckbox> | null>('input')
+const input = useTemplateRef<InstanceType<typeof QCheckbox>>('input')
 const scopes = reactive(inputScope)
 defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
 defineOptions({
@@ -71,12 +95,12 @@ defineOptions({
       />
       <MCol v-bind="colProps">
         <q-field
-          :error="!!errorMessage"
-          :error-message="errorMessage"
-          :hint="__(hint)"
           v-bind="{
             ...$props,
             ...attrs,
+            error:!!errorMessage,
+            errorMessage,
+            hint:__(hint),
             borderless: !0,
             outlined: !1,
             stackLabel: !0

package/src/components/form/MDate.vue

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

package/src/components/form/MEmail.vue

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

package/src/components/form/MField.vue

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

package/src/components/form/MFile.vue

@@ -6,12 +6,15 @@
   - Github: https://github.com/mythpe
   -->
 
-<script lang="ts" setup>
+<script
+  lang="ts"
+  setup
+>
 
 import { QField, QFile, QFileSlots } from 'quasar'
 import { useBindInput, useMyth } from '../../composable'
 import { useField } from 'vee-validate'
-import { defineProps, reactive, toValue, useTemplateRef } from 'vue'
+import { reactive, toValue, useTemplateRef } from 'vue'
 import type { MFileProps as Props } from '../../types'
 import { myth } from '../../utils'
 

package/src/components/form/MForm.vue

@@ -6,7 +6,10 @@
   - Github: https://github.com/mythpe
   -->
 
-<script lang="ts" setup>
+<script
+  lang="ts"
+  setup
+>
 import type { InvalidSubmissionHandler, SubmissionContext, SubmissionHandler } from 'vee-validate'
 import { useForm } from 'vee-validate'
 import type { MFormProps as Props } from '../../types'

package/src/components/form/MHiddenInput.vue

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

package/src/components/form/MInput.vue

@@ -78,7 +78,7 @@ const listeners = {
   blur: (v: any) => handleBlur(v, !0),
   'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
 }
-const input = useTemplateRef<InstanceType<typeof QInput | typeof QField> | null>('input')
+const input = useTemplateRef<InstanceType<typeof QInput> | InstanceType<typeof QField>>('input')
 const scopes = reactive(inputScope)
 defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
 defineOptions({

package/src/components/form/MInputLabel.vue

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

package/src/components/form/MMobile.vue

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