@mythpe/quasar-ui-qui 0.2.2 → 0.2.4

package/package.json

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

package/src/components/form/MAvatarViewer.vue

@@ -84,7 +84,7 @@ const props = withDefaults(defineProps<P>(), {
   rules: () => ({}),
   contentClass: 'items-center',
   emptyColor: 'grey-2',
-  btnLabel: 'choose_file'
+  btnLabel: 'pick'
 })
 type Emits = {
   (e: 'click', evt?: Event): void;

package/src/components/form/MSelect.vue

@@ -78,25 +78,25 @@ const props = withDefaults(defineProps<P>(), {
   stackLabel: undefined,
   required: undefined,
   rules: undefined,
-  viewMode: () => !1,
+  viewMode: !1,
   viewModeValue: undefined,
   autocomplete: undefined,
   topLabel: undefined,
   behavior: undefined,
-  emitValue: () => !0,
-  useInput: () => !0,
-  mapOptions: () => !0,
+  emitValue: !0,
+  useInput: !0,
+  mapOptions: !0,
   loading: undefined,
   noLoading: !1,
   multiple: undefined,
   options: () => ([]),
-  optionLabel: () => 'label',
-  optionValue: () => 'value',
+  optionLabel: 'label',
+  optionValue: 'value',
   noFilter: undefined,
   hideEmptyList: undefined,
   readonly: undefined,
   useChips: undefined,
-  searchLength: () => 1,
+  searchLength: 1,
   axiosMode: undefined,
   hideSelected: undefined,
   onFilter: undefined,
@@ -169,6 +169,18 @@ const listeners = {
 }
 const input = useTemplateRef<InstanceType<typeof QSelect> | InstanceType<typeof QField>>('input')
 const scopes = reactive(inputScope)
+const getViewModeValue = computed(() => {
+  if (props.viewModeValue === undefined) {
+    const i = getOptions.value.find(e => e.value === value.value)
+    if (i) {
+      if (typeof props.optionLabel === 'function') {
+        return props.optionLabel(i)
+      }
+      return i[props.optionLabel]
+    }
+  }
+  return props.viewModeValue || value.value
+})
 defineExpose<typeof scopes & {
   input: typeof input,
   onDoneOptions: typeof onDoneOptions
@@ -334,7 +346,7 @@ defineOptions({
       >
         <slot name="control">
           <MInputFieldControl>
-            {{ viewModeValue ?? value }}
+            {{ getViewModeValue ?? viewModeValue ?? value }}
           </MInputFieldControl>
         </slot>
       </template>

package/src/components/form/MToggle.vue

@@ -48,6 +48,7 @@ interface P {
   colProps?: Props['colProps'];
   viewMode?: Props['viewMode'];
   fieldOptions?: Props['fieldOptions'];
+  hideBottomSpace?: boolean;
 }
 
 const props = withDefaults(defineProps<P>(), {
@@ -80,8 +81,9 @@ const props = withDefaults(defineProps<P>(), {
   required: undefined,
   rowProps: undefined,
   colProps: undefined,
-  viewMode: () => !1,
-  fieldOptions: undefined
+  viewMode: !1,
+  fieldOptions: undefined,
+  hideBottomSpace: !0
 })
 defineModel<Props['modelValue']>({ required: !1, default: undefined })
 const helper = useBindInput<P>(() => props, 'toggle', () => ({ choose: !0 }))
@@ -160,6 +162,7 @@ defineOptions({
       />
       <MCol v-bind="colProps">
         <q-field
+          :hide-bottom-space="hideBottomSpace"
           v-bind="{
             error: !!errorMessage,
             errorMessage,
@@ -169,7 +172,8 @@ defineOptions({
             ...$attrs,
             borderless: !0,
             outlined: !1,
-            dense: theme.dense !== undefined ? theme.dense : getProp('dense')
+            // dense2: theme.dense !== undefined ? theme.dense : getProp('dense')
+            dense: !0
           }"
         >
           <q-toggle
@@ -182,7 +186,8 @@ defineOptions({
               ...pluginOptions.toggle,
               ...theme,
               ...$attrs,
-              dense: theme.dense !== undefined ? theme.dense : getProp('dense'),
+              // dense: theme.dense !== undefined ? theme.dense : getProp('dense'),
+              dense: !0,
               checkedIcon: getProp('checkedIcon'),
               uncheckedIcon: getProp('uncheckedIcon'),
               color: !!errorMessage ? 'negative' : getProp('color'),

package/src/types/install-options.d.ts

@@ -1,26 +1,7 @@
-import type { ButtonLoadingOptions, Theme, ThemeBtn, ThemeContext, ThemeFluid, ThemeInput, ThemeRounded, ThemeShadow, ThemeSize } from './theme'
+import type { ThemeContext } from './theme'
 import type { MythComponentsProps } from './plugin-props-option'
-import type { HelpersStubSchema } from './api-helpers'
-import type { AxiosInstance } from 'axios'
 import type { ApiContext, MythApi } from './myth-api'
 
-export interface InstallOptions2 {
-  asyncComponents?: boolean | undefined;
-  theme?: Theme;
-  size?: ThemeSize;
-  rounded?: ThemeRounded;
-  shadow?: ThemeShadow;
-  fluid?: ThemeFluid;
-  rules?: string[];
-  btnLoading?: ButtonLoadingOptions;
-  props?: MythComponentsProps;
-  themeInput?: ThemeInput;
-  themeBtn?: ThemeBtn;
-  baseUrl?: string;
-  api?: HelpersStubSchema;
-  mAxios?: AxiosInstance;
-}
-
 export interface InstallOptions extends MythApi {
   api: ApiContext;
   asyncComponents?: boolean;