@mythpe/quasar-ui-qui 0.0.75 → 0.0.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",

package/src/components/form/MAxios.vue

@@ -11,8 +11,7 @@
   setup
 >
 
-import type { MAxiosProps as Props, MSelectModelEmit } from '../../types'
-import type { QSelectSlots } from 'quasar'
+import type { MAxiosProps as Props, MSelectModelEmit, MSelectSlots } from '../../types'
 import { computed, onMounted, toValue, useTemplateRef, watch } from 'vue'
 import { useSetFieldValue } from 'vee-validate'
 import MSelect from './MSelect.vue'
@@ -131,7 +130,7 @@ defineOptions({ name: 'MAxios', inheritAttrs: !1 })
     v-on="listeners"
   >
     <template
-      v-for="(_,slot) in $slots as Readonly<QSelectSlots>"
+      v-for="(_,slot) in $slots as Readonly<MSelectSlots>"
       :key="slot"
       #[slot]="inputSlot"
     >

package/src/composable/useBindInput.ts

@@ -54,11 +54,23 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
     return !1
   })
 
+  const nameRegExp = /\.\d+\./g
+  const nameLabel = computed(() => {
+    const k = props.label === undefined ? props.name : props.label
+    if (k && nameRegExp.test(k)) {
+      return k?.toString?.()?.replaceAll(nameRegExp, '.*.')
+    }
+    return k
+  })
   const getLabel = computed<string | undefined>(() => {
     const k = props.label === undefined ? props.name : props.label
     return k ? (__(k) || undefined) : undefined
   })
   const getPlaceholder = computed<string | undefined>(() => {
+    if (props.placeholder === !1) {
+      return undefined
+    }
+
     const replace = computed(() => {
       const val = props.useChoice !== undefined ? props.useChoice : (attributes.useChoice !== undefined ? attributes.useChoice : opts?.choose)
       if (typeof val === 'string' && val?.length > 0) {
@@ -70,14 +82,12 @@ export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key:
       return 'enter'
     })
     if (props.placeholder === undefined) {
-      const k = props.label !== undefined ? props.label : props.name
-      return __(`replace.${replace.value}`, { name: __(k) })
+      return __(`replace.${replace.value}`, { name: __(nameLabel.value) })
     }
-    return __(props.placeholder) || undefined
+    return props.placeholder ? (__(props.placeholder) || undefined) : undefined
   })
   const getAutocompleteAttribute = computed<string | null | undefined>(() => {
     const autocomplete = props.autocomplete !== undefined ? props.autocomplete : (pluginProps.value[key] && 'autocomplete' in pluginProps.value[key] ? pluginProps.value[key]?.autocomplete : undefined)
-    // const autocomplete = 'autocomplete' in opt && opt?.autocomplete !== undefined ? opt?.autocomplete : props.autocomplete
     if (autocomplete !== undefined) {
       if (autocomplete === !0 || autocomplete === '') {
         return kebabCase(props.name)

package/src/types/api/MAvatarViewer.d.ts

@@ -0,0 +1,114 @@
+import type { QAvatarProps, QAvatarSlots, QImgProps } from 'quasar'
+import type { VNode } from 'vue'
+import type { InputErrorsContext, InputFormErrorsContext, InputRulesContext, MColProps } from '../components'
+
+export type MAvatarViewerModelValue = File | null | undefined;
+
+export interface MAvatarViewerProps extends QAvatarProps, MColProps {
+  /**
+   * Comma separated list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element
+   */
+  accept?: string | string [] | null | Record<string, string>;
+  /**
+   * Add accept file type.
+   */
+  images?: boolean | string;
+  /**
+   * Add accept svg type.
+   */
+  svg?: boolean | string;
+  /**
+   * Add accept video type.
+   */
+  video?: boolean | string;
+  /**
+   * Add accept pdf type.
+   */
+  pdf?: boolean;
+  /**
+   * Add accept excel type.
+   */
+  excel?: boolean | string;
+  /**
+   * Show text if no image
+   */
+  avatarText?: string;
+  /**
+   * How the image will fit into the container; Equivalent of the object-fit prop; Can be coordinated with 'position' prop
+   * Default value: cover
+   */
+  fit?: QImgProps['fit'];
+  /**
+   * Can clear the input & not required
+   */
+  clearable?: boolean;
+  /**
+   * The label that will appear above the image
+   */
+  label?: string;
+  /**
+   * List of error messages.
+   */
+  errors?: InputErrorsContext;
+  /**
+   * List of form errors.
+   */
+  formErrors?: InputFormErrorsContext;
+  /**
+   * Model of the component;
+   * Must be FileList or Array if using 'multiple' prop;
+   * Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
+   */
+  modelValue?: MAvatarViewerModelValue;
+  /**
+   * The name of the file for the image used and the field.
+   * Example: name='avatar' { avatar: https://4myth.com, avatarBlob: Blob, avatarRemoved: !0 | !1 }
+   */
+  name?: string;
+  /**
+   * Avatar url.
+   * (along with a listener for 'update:url' event) OR use v-model directive
+   */
+  url?: string;
+  /**
+   * value if user remove the image
+   * (along with a listener for 'update:removed' event) OR use v-model directive
+   */
+  removed?: boolean;
+  /**
+   * Input hint.
+   */
+  hint?: string;
+  hintProps?: Record<string, any>;
+
+  caption?: string;
+  captionProps?: Record<string, any>;
+  /**
+   * Help text after label.
+   */
+  help?: string;
+  /**
+   * Set input to readonly.
+   */
+  readonly?: boolean;
+  /**
+   * Loading for skeleton.
+   */
+  loading?: boolean;
+  /**
+   * Input Required validation.
+   */
+  required?: boolean;
+  /**
+   * Input Validation Rules.
+   */
+  rules?: InputRulesContext;
+}
+
+export interface MAvatarViewerSlots extends QAvatarSlots {
+  /**
+   * Field main content
+   */
+  default: () => VNode[];
+  hint: () => VNode[];
+}

package/src/types/api/MAxios.d.ts

@@ -0,0 +1,40 @@
+import type { AxiosRequestConfig } from 'axios'
+import type { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef, WritableComputedRef } from 'vue'
+import type { MSelectProps, MSelectSlots } from './MSelect'
+
+type ParamsReq = Record<string, any>;
+
+export interface MAxiosProps extends Omit<MSelectProps, 'options' | 'axiosMode'> {
+  /**
+   * Request method. Default is GET.
+   */
+  service: ((config?: AxiosRequestConfig) => Promise<any>) | string;
+  /**
+   * Send request as guest request. If false, send request as authenticated user. Default is true.
+   */
+  guest?: boolean | MaybeRefOrGetter<boolean>;
+  /**
+   * Request params.
+   */
+  params?: Ref<ParamsReq> | ShallowRef<ParamsReq> | WritableComputedRef<ParamsReq> | ComputedRef<ParamsReq> | (() => ParamsReq);
+  /**
+   * Request relations.
+   */
+  requestWith?: MaybeRefOrGetter<string> | undefined;
+  /**
+   * Component items.
+   */
+  items?: any[];
+  /**
+   *  The name of the attribute to be used as a label
+   */
+  attributeName?: string;
+  /**
+   * Do fetch asynchronous
+   */
+  lazy?: boolean;
+}
+
+export interface MAxiosSlots extends MSelectSlots {
+  [ k : keyof MSelectSlots ]
+}

package/src/types/api/MSelect.d.ts

@@ -0,0 +1,183 @@
+import type { QFieldSlots, QSelectProps, QSelectSlots } from 'quasar'
+import type { BaseInputsProps, BaseInputsSlots } from '../components'
+import type { VNode } from 'vue'
+
+export interface MSelectModelEmit {
+  value: any | null;
+  model: object | null;
+}
+
+export interface MSelectProps extends Omit<QSelectProps, 'rules' | 'name' | 'modelValue' | 'label' | 'hint' | 'autocomplete'>, BaseInputsProps {
+  /**
+   * Input search functionality. useInput prop for this feature.
+   */
+  search?: string | null | undefined;
+  /**
+   * Minimum characters to start searching. Default is 1.
+   */
+  searchLength?: string | number;
+  /**
+   * hide the default empty list message.
+   */
+  hideEmptyList?: boolean | undefined;
+  /**
+   * Disable filter functionality.
+   */
+  noFilter?: boolean | undefined;
+  /**
+   * Set mode of component to axios of filter & search.
+   * if set to true, component will fetch data from api and don't do filter functionality.
+   */
+  axiosMode?: boolean | undefined;
+  /**
+   * Fetch Data on mounted
+   */
+  // iniData?: boolean;
+}
+
+type ItemsScope = { items: any[], value: any };
+
+export interface MSelectSlots extends QSelectSlots, QFieldSlots, BaseInputsSlots {
+  /**
+   * Field main content
+   */
+  default: () => VNode[];
+  /**
+   * Prepend inner field; Suggestions: QIcon, QBtn
+   */
+  prepend: (scope: ItemsScope) => VNode[];
+  /**
+   * Append to inner field; Suggestions: QIcon, QBtn
+   */
+  append: (scope: ItemsScope) => VNode[];
+  /**
+   * Prepend outer field; Suggestions: QIcon, QBtn
+   */
+  before: (scope: ItemsScope) => VNode[];
+  /**
+   * Append outer field; Suggestions: QIcon, QBtn
+   */
+  after: (scope: ItemsScope) => VNode[];
+  /**
+   * Slot for label; Used only if 'label-slot' prop is set or the 'label' prop is set; When it is used the text in the 'label' prop is ignored
+   */
+  label: (scope: ItemsScope) => VNode[];
+  /**
+   * Slot for errors; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>
+   */
+  error: (scope: ItemsScope) => VNode[];
+  /**
+   * Slot for hint text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>
+   */
+  hint: (scope: ItemsScope) => VNode[];
+  /**
+   * Slot for counter text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>
+   */
+  counter: (scope: ItemsScope) => VNode[];
+  /**
+   * Override default spinner when component is in loading mode; Suggestion: spinners
+   */
+  loading: (scope: ItemsScope) => VNode[];
+  /**
+   * Override default selection slot; Suggestion: QChip
+   */
+  selected: (scope: ItemsScope) => VNode[];
+  /**
+   * Template slot for the elements that should be rendered before the list of options
+   */
+  'before-options': (scope: ItemsScope) => VNode[];
+  /**
+   * Template slot for the elements that should be rendered after the list of options
+   */
+  'after-options': (scope: ItemsScope) => VNode[];
+  /**
+   * What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>
+   * @param scope
+   */
+  'no-option': (scope: {
+    /**
+     * Input textfield value, if any (not QSelect model)
+     */
+    inputValue: string;
+  }) => VNode[];
+  /**
+   * Override default selection slot; Suggestion: QChip
+   * @param scope
+   */
+  'selected-item': (scope: {
+    /**
+     * Selection index
+     */
+    index: number;
+    /**
+     * Selected option -- its value is taken from model
+     */
+    opt: any;
+    /**
+     * Always true -- passed down as prop to QItem (when using QItem)
+     */
+    selected: boolean;
+    /**
+     * Is the content HTML?
+     */
+    html: boolean;
+    /**
+     * Remove selected option located at specific index
+     * @param index Index at which to remove selection
+     */
+    removeAtIndex: (index: number) => void;
+    /**
+     * Add/remove option from model
+     * @param opt Option to add to model
+     */
+    toggleOption: (opt: any) => void;
+    /**
+     * Tabindex HTML attribute value associated with respective option
+     */
+    tabindex: number;
+  }) => VNode[];
+  /**
+   * Customize how options are rendered; Suggestion: QItem
+   * @param scope
+   */
+  option: (scope: {
+    /**
+     * Option index
+     */
+    index: number;
+    /**
+     * Option -- its value is taken from 'options' prop
+     */
+    opt: any;
+    /**
+     * Is the content HTML?
+     */
+    html: boolean;
+    /**
+     * Label of the option
+     */
+    label: string;
+    /**
+     * Is option selected?
+     */
+    selected: boolean;
+    /**
+     * Is option focused?
+     */
+    focused: boolean;
+    /**
+     * Add/remove option from model
+     * @param opt Option to add to model
+     */
+    toggleOption: (opt: any) => void;
+    /**
+     * Sets option from menu as 'focused'
+     * @param index Index of option from menu
+     */
+    setOptionIndex: (index: number) => void;
+    /**
+     * Computed properties passed down to QItem
+     */
+    itemProps: any;
+  }) => VNode[];
+}

package/src/types/api/MTransition.d.ts

@@ -0,0 +1,12 @@
+import type { TransitionGroupProps, VNode } from 'vue'
+
+export interface MTransitionProps extends TransitionGroupProps {
+  enterIn?: string;
+  enterOut?: string;
+  slowIn?: boolean;
+  slowOut?: boolean;
+}
+
+export interface MTransitionsSlots {
+  default: () => VNode[];
+}

package/src/types/components.d.ts

@@ -8,8 +8,6 @@
 
 import type {
   GlobalComponentConstructor,
-  QAvatarProps,
-  QAvatarSlots,
   QBtnProps,
   QBtnSlots,
   QCheckboxProps,
@@ -20,7 +18,6 @@ import type {
   QFieldSlots,
   QFileProps,
   QFileSlots,
-  QImgProps,
   QInputProps,
   QInputSlots,
   QItemProps,
@@ -29,28 +26,16 @@ import type {
   QOptionGroupSlots,
   QPopupProxyProps,
   QRadioProps,
-  QSelectProps, QSelectSlots,
   QTimeProps,
   QToggleProps,
   QTooltipProps,
   QUploaderProps,
   QUploaderSlots
 } from 'quasar'
-import type {
-  ComputedRef,
-  MaybeRefOrGetter,
-  Ref,
-  ShallowRef,
-  TransitionGroupProps,
-  TransitionProps,
-  UnwrapNestedRefs,
-  VNode,
-  WritableComputedRef
-} from 'vue'
+import type { MaybeRefOrGetter, TransitionProps, UnwrapNestedRefs, VNode } from 'vue'
 import type { TypedOptions } from 'typed.js'
 import type { FieldContext, FieldOptions, FormContext, FormOptions, FormState } from 'vee-validate'
 import type { ThemeShadow, ThemeSize } from './theme'
-import type { AxiosRequestConfig } from 'axios'
 import type { ApiInterface, HelpersStubSchema } from './api-helpers'
 import type {
   MDatatableProps,
@@ -63,17 +48,10 @@ import type {
   MDtContextmenuItemsSlots
 } from './m-datatable'
 import type { EditorConfig } from 'ckeditor5'
-
-export interface MTransitionProps extends TransitionGroupProps {
-  enterIn?: string;
-  enterOut?: string;
-  slowIn?: boolean;
-  slowOut?: boolean;
-}
-
-export interface MTransitionsSlots {
-  default: () => VNode[];
-}
+import type { MAvatarViewerProps, MAvatarViewerSlots } from './api/MAvatarViewer'
+import type { MTransitionProps, MTransitionsSlots } from './api/MTransition'
+import type { MAxiosProps, MAxiosSlots } from './api/MAxios'
+import type { MSelectProps, MSelectSlots } from './api/MSelect'
 
 export interface MBtnProps extends QBtnProps {
   ariaLabel?: boolean | string | null | undefined;
@@ -274,117 +252,6 @@ export type InputRulesContext = string | string[] | Record<string, any> | undefi
 export type InputErrorsContext = string[];
 export type InputFormErrorsContext = Record<string, InputErrorsContext> | undefined;
 
-export type MAvatarViewerModelValue = File | null | undefined;
-
-export interface MAvatarViewerProps extends QAvatarProps, MColProps {
-  /**
-   * Comma separated list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element
-   */
-  accept?: string | string [] | null | Record<string, string>;
-  /**
-   * Add accept file type.
-   */
-  images?: boolean | string;
-  /**
-   * Add accept svg type.
-   */
-  svg?: boolean | string;
-  /**
-   * Add accept video type.
-   */
-  video?: boolean | string;
-  /**
-   * Add accept pdf type.
-   */
-  pdf?: boolean;
-  /**
-   * Add accept excel type.
-   */
-  excel?: boolean | string;
-  /**
-   * Show text if no image
-   */
-  avatarText?: string;
-  /**
-   * How the image will fit into the container; Equivalent of the object-fit prop; Can be coordinated with 'position' prop
-   * Default value: cover
-   */
-  fit?: QImgProps['fit'];
-  /**
-   * Can clear the input & not required
-   */
-  clearable?: boolean;
-  /**
-   * The label that will appear above the image
-   */
-  label?: string;
-  /**
-   * List of error messages.
-   */
-  errors?: InputErrorsContext;
-  /**
-   * List of form errors.
-   */
-  formErrors?: InputFormErrorsContext;
-  /**
-   * Model of the component;
-   * Must be FileList or Array if using 'multiple' prop;
-   * Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
-   */
-  modelValue?: MAvatarViewerModelValue;
-  /**
-   * The name of the file for the image used and the field.
-   * Example: name='avatar' { avatar: https://4myth.com, avatarBlob: Blob, avatarRemoved: !0 | !1 }
-   */
-  name?: string;
-  /**
-   * Avatar url.
-   * (along with a listener for 'update:url' event) OR use v-model directive
-   */
-  url?: string;
-  /**
-   * value if user remove the image
-   * (along with a listener for 'update:removed' event) OR use v-model directive
-   */
-  removed?: boolean;
-  /**
-   * Input hint.
-   */
-  hint?: string;
-  hintProps?: Record<string, any>;
-
-  caption?: string;
-  captionProps?: Record<string, any>;
-  /**
-   * Help text after label.
-   */
-  help?: string;
-  /**
-   * Set input to readonly.
-   */
-  readonly?: boolean;
-  /**
-   * Loading for skeleton.
-   */
-  loading?: boolean;
-  /**
-   * Input Required validation.
-   */
-  required?: boolean;
-  /**
-   * Input Validation Rules.
-   */
-  rules?: InputRulesContext;
-}
-
-export interface MAvatarViewerSlots extends QAvatarSlots {
-  /**
-   * Field main content
-   */
-  default: () => VNode[];
-  hint: () => VNode[];
-}
-
 export interface BaseInputFormProps {
   /**
    * Input name.
@@ -515,43 +382,6 @@ export interface MEditorSlots extends QEditorSlots, BaseInputsSlots {
   //
 }
 
-export interface MSelectModelEmit {
-  value: any | null;
-  model: object | null;
-}
-
-export interface MSelectProps extends Omit<QSelectProps, 'rules' | 'name' | 'modelValue' | 'label' | 'hint' | 'autocomplete'>, BaseInputsProps {
-  /**
-   * Input search functionality. useInput prop for this feature.
-   */
-  search?: string | null | undefined;
-  /**
-   * Minimum characters to start searching. Default is 1.
-   */
-  searchLength?: string | number;
-  /**
-   * hide the default empty list message.
-   */
-  hideEmptyList?: boolean | undefined;
-  /**
-   * Disable filter functionality.
-   */
-  noFilter?: boolean | undefined;
-  /**
-   * Set mode of component to axios of filter & search.
-   * if set to true, component will fetch data from api and don't do filter functionality.
-   */
-  axiosMode?: boolean | undefined;
-  /**
-   * Fetch Data on mounted
-   */
-  // iniData?: boolean;
-}
-
-export interface MSelectSlots extends QSelectSlots, QFieldSlots, BaseInputsSlots {
-  //
-}
-
 export interface MFileProps extends Omit<QFileProps, 'modelValue' | 'rules' | 'name' | 'label' | 'hint'>, Omit<BaseInputsProps, 'autocomplete'> {
   accept?: string | undefined;
   images?: boolean | string;
@@ -678,7 +508,7 @@ export interface MHiddenSlots {
   default: () => VNode[];
 }
 
-export type MFormScope = FormContext<Record<string, any>, Record<string, any>>;
+export type MFormScope = FormContext;
 
 export interface MFormProps {
   /**
@@ -727,43 +557,6 @@ export interface MFormSlots {
 
 export declare type GenericFormValues = Record<any, any>;
 
-type ParamsReq = Record<string, any>;
-
-export interface MAxiosProps extends Omit<MSelectProps, 'options' | 'axiosMode'> {
-  /**
-   * Request method. Default is GET.
-   */
-  service: ((config?: AxiosRequestConfig) => Promise<any>) | string;
-  /**
-   * Send request as guest request. If false, send request as authenticated user. Default is true.
-   */
-  guest?: boolean | MaybeRefOrGetter<boolean>;
-  /**
-   * Request params.
-   */
-  params?: Ref<ParamsReq> | ShallowRef<ParamsReq> | WritableComputedRef<ParamsReq> | ComputedRef<ParamsReq> | (() => ParamsReq);
-  /**
-   * Request relations.
-   */
-  requestWith?: MaybeRefOrGetter<string> | undefined;
-  /**
-   * Component items.
-   */
-  items?: any[];
-  /**
-   *  The name of the attribute to be used as a label
-   */
-  attributeName?: string;
-  /**
-   * Do fetch asynchronous
-   */
-  lazy?: boolean;
-}
-
-export interface MAxiosSlots extends MSelectSlots {
-  //
-}
-
 export interface MOptionsOptionContext extends Omit<QToggleProps, 'modelValue'>, Omit<QRadioProps, 'modelValue'>, Omit<QCheckboxProps, 'modelValue'> {
   /**
    * Label to display along the component

package/src/types/index.d.ts

@@ -17,3 +17,8 @@ export * from './plugin-props-option'
 export * from './m-helpers'
 export * from './quasar-helpers'
 export * from './theme'
+
+export * from './api/MAvatarViewer'
+export * from './api/MAxios'
+export * from './api/MSelect'
+export * from './api/MTransition'

package/src/types/plugin-props-option.d.ts

@@ -1,5 +1,4 @@
 import type {
-  MAvatarViewerProps,
   MBlockProps,
   MBtnProps,
   MCheckboxProps,
@@ -19,7 +18,6 @@ import type {
   MPickerProps,
   MRadioProps,
   MRowProps,
-  MSelectProps,
   MTimeProps,
   MToggleProps,
   MTooltipProps,
@@ -44,6 +42,8 @@ import type {
   QPopupProxyProps
 } from 'quasar'
 import type { MDatatableProps, MDtBtnProps } from './m-datatable'
+import type { MAvatarViewerProps } from './api/MAvatarViewer'
+import type { MSelectProps } from './api/MSelect'
 
 export interface MythComponentsProps {
   // Grid.