@mythpe/quasar-ui-qui 0.2.1 → 0.2.3

package/package.json

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

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/components/form/__MOptions.vue

@@ -0,0 +1,289 @@
+<!--
+  - 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 { useField } from 'vee-validate'
+import type { MOptionsOptionContext, MOptionsProps as Props } from '../../types'
+import { computed, onMounted, reactive, toValue, useTemplateRef } from 'vue'
+import type { QField, QOptionGroupSlots } from 'quasar'
+import { QOptionGroup } from 'quasar'
+import { useBindInput, useMyth } from '../../composable'
+
+interface P {
+  name: Props['name'];
+  auto?: Props['auto'];
+  col?: Props['col'];
+  xs?: Props['xs'];
+  sm?: Props['sm'];
+  md?: Props['md'];
+  lg?: Props['lg'];
+  xl?: Props['xl'];
+  label?: Props['label'];
+  caption?: Props['caption'];
+  hint?: Props['hint'];
+  placeholder?: Props['placeholder'];
+  help?: Props['help'];
+  required?: Props['required'];
+  rules?: Props['rules'];
+  disable?: Props['disable'];
+  viewMode?: Props['viewMode'];
+  viewModeValue?: Props['viewModeValue'];
+  topLabel?: Props['topLabel'];
+  color?: Props['color'];
+  type?: Props['type'];
+  keepColor?: Props['keepColor'];
+  service?: Props['service'];
+  guest?: boolean;
+  fullWidth?: Props['fullWidth'];
+  fitWidth?: Props['fullWidth'];
+  fieldOptions?: Props['fieldOptions'];
+}
+
+const props = withDefaults(defineProps<P>(), {
+  name: () => '',
+  auto: undefined,
+  col: undefined,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined,
+  label: undefined,
+  caption: undefined,
+  hint: undefined,
+  placeholder: undefined,
+  help: undefined,
+  required: undefined,
+  rules: undefined,
+  disable: undefined,
+  viewMode: !1,
+  viewModeValue: undefined,
+  topLabel: undefined,
+  color: 'primary',
+  type: 'radio',
+  keepColor: undefined,
+  guest: !1,
+  service: undefined,
+  fullWidth: !1,
+  fitWidth: !1,
+  fieldOptions: undefined
+})
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const loading = defineModel<Props['loading']>('loading', { required: !1, default: !1 })
+const options = defineModel<MOptionsOptionContext[]>('options', { required: !1, default: undefined })
+const helper = useBindInput<P>(() => props, 'options')
+const { getLabel, inputRules, getProp, theme } = helper
+const inputScope = useField<Props['modelValue']>(() => props.name, inputRules, {
+  syncVModel: !0,
+  label: getLabel,
+  ...toValue<any>(props.fieldOptions)
+})
+const { value, errorMessage, handleChange, handleBlur } = inputScope
+
+const listeners = {
+  blur: (v: any) => handleBlur(v, !0),
+  'update:modelValue': (v: Props['modelValue']) => handleChange(v, !!errorMessage.value)
+}
+const input = useTemplateRef<InstanceType<typeof QField> | InstanceType<typeof QOptionGroup>>('input')
+const scopes = reactive(inputScope)
+defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
+const { alertError, __, props: pluginProps, api } = useMyth()
+const fetchData = async () => {
+  if (props.service) {
+    const s = props.service
+    loading.value = !0
+    try {
+      let method: any = null
+      if (typeof s === 'string' && s.includes('.')) {
+        const args = s.split('.')
+        do {
+          if (!method) {
+            method = api.value.services[args.shift() as any]
+          }
+          method = method[args.shift() as any]
+        }
+        while (args.length)
+      } else {
+        method = typeof s === 'function' ? s : (props.guest ? api.value.services[s].staticIndex : api.value.services[s].index)
+      }
+      if (method != null) {
+        const { _data } = await method()
+        options.value = _data as any
+      }
+    } catch (e: any) {
+      alertError(e?._message || e?.message || 'Failed to fetch data')
+    } finally {
+      loading.value = !1
+    }
+  }
+}
+const getOptions = computed(() => {
+  if (props.viewMode) {
+    return options.value.filter(e => e.value === value.value)
+  }
+  return options.value
+})
+onMounted(() => {
+  fetchData()
+})
+defineOptions({
+  name: 'MOptions',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MCol
+    :auto="auto"
+    :class="[$attrs.class,{'m--input__required':inputRules?.required!==undefined,'m--input__error':!!errorMessage,'m--input__view':viewMode}]"
+    :col="col"
+    :lg="lg"
+    :md="md"
+    :name="name"
+    :sm="sm"
+    :xs="xs"
+  >
+    <slot
+      name="top-input"
+      v-bind="scopes"
+    />
+    <slot name="top-label">
+      <MInputLabel
+        v-if="!!getLabel"
+        :field="scopes"
+      >
+        <template #default>
+          <MHelpRow
+            v-if="!!help"
+            :text="help"
+            class="q-ml-lg"
+            tooltip
+          />
+          <template v-if="loading">
+            <div class="flex-break" />
+            <q-spinner-dots
+              class="q-mt-lg q-ml-lg"
+              color="primary"
+              size="22px"
+            />
+          </template>
+        </template>
+      </MInputLabel>
+    </slot>
+    <slot name="caption">
+      <div
+        v-if="!!caption"
+        class="m--input__caption"
+      >
+        {{ __(caption) }}
+      </div>
+    </slot>
+    <MTransition>
+      <div
+        v-if="!!errorMessage"
+        class="text-negative text-caption"
+      >
+        <q-icon
+          v-if="!!errorMessage"
+          color="negative"
+          name="ion-ios-information-circle-outline"
+          size="20px"
+        />
+        {{ errorMessage }}
+      </div>
+    </MTransition>
+    <q-option-group
+      ref="input"
+      :class="{'m--options': !0, 'm--options__full_width': fullWidth, 'm--options__fit_width': fitWidth }"
+      :color="!!errorMessage ? 'negative' : getProp('color')"
+      :disable="disable"
+      :keep-color="!!errorMessage ? !0 : getProp('keepColor')"
+      :option-disable="viewMode ? (v) => v.value !== value : undefined"
+      v-bind="{
+        ...$attrs,
+        ...theme,
+        ...pluginProps.options as any,
+        modelValue: value,
+        name: name,
+        options: getOptions,
+        type: type,
+        label: getLabel || undefined,
+      }"
+      v-on="listeners"
+    >
+      <template
+        v-for="(_,slot) in $slots as Readonly<QOptionGroupSlots>"
+        :key="slot"
+        #[slot]="inputSlot"
+      >
+        <slot
+          :name="slot"
+          v-bind="inputSlot || {}"
+        />
+      </template>
+      <template
+        v-if="viewMode"
+        #control
+      >
+        <slot name="control">
+          <MInputFieldControl>
+            {{ viewModeValue ?? value }}
+          </MInputFieldControl>
+        </slot>
+      </template>
+    </q-option-group>
+    <slot
+      name="help"
+      v-bind="scopes"
+    >
+      <MHelpRow
+        v-if="!getLabel && help"
+        :text="help"
+      />
+    </slot>
+    <slot
+      name="bottom-input"
+      v-bind="scopes"
+    />
+    <slot
+      :options="options"
+      v-bind="scopes"
+    />
+  </MCol>
+</template>
+
+<style lang="sass">
+$c: calc(100% / 3)
+
+.m--options
+  .q-checkbox__inner,
+  .q-radio__inner,
+  .q-toggle__inner
+    align-self: flex-start
+
+  &__full_width
+    > div
+      .q-checkbox,
+      .q-radio,
+      .q-toggle,
+      .q-checkbox__label,
+      .q-radio__label,
+      .q-toggle__label
+        width: 100%
+
+  &__fit_width
+    margin-left: 0
+
+    > div
+      width: calc(100% / 3)
+      margin-left: 0
+</style>

package/src/index.sass

@@ -5,9 +5,13 @@
 // Github: https://github.com/mythpe
 
 //@import 'quasar/src/css/variables.sass'
-@import './style/ckeditor5.sass'
-@import './style/m-container.sass'
-@import './style/m-dt.sass'
-@import './style/main.sass'
-@import './style/print.sass'
+@import './style/main'
+@import './style/ckeditor5'
+@import './style/m-container'
+@import './style/m-dt'
+@import './style/m-help-row'
+@import './style/m-input'
+@import './style/m-picker'
+@import './style/m-select'
+@import './style/print'
 @import './style/transition'

package/src/style/m-dt.sass

@@ -1,4 +1,4 @@
-
+$control-max-width: 200px !default
 $fixed-dt-height: 80vh !default
 
 .touch
@@ -74,3 +74,12 @@ $fixed-dt-height: 80vh !default
 
 .grid-style-transition
   transition: transform .28s, background-color .28s
+
+.screen--xs,
+.screen--sm
+  .m--dt-btn-tooltip
+    display: none
+
+.m--control-cell,
+.m--control-header
+  width: $control-max-width

package/src/style/m-help-row.sass

@@ -0,0 +1,4 @@
+$m-help-row-margin-top: 4px !default
+
+.m--help-row
+  margin-top: $m-help-row-margin-top

package/src/style/m-input.sass

@@ -0,0 +1,47 @@
+$m--input-helpers-margin: 5px !default
+$radius-value: $generic-border-radius !default
+
+[data-input-name].m--input__error
+  > .q-field
+    &:not(.q-field--disabled)
+      .q-field__label::after
+        color: var(--q-negative)
+
+  .m--input__top-label__content
+    color: var(--q-negative)
+
+
+[data-input-name].m--input__required
+  &:not(.m--input__is-top-label)
+    > .q-field
+      &:not(.q-field--disabled)
+        .q-field__label::after
+          content: ' *'
+
+  .m--input__top-label__content::after
+    content: ' *'
+    color: var(--q-negative)
+
+
+.m--input__color-preview
+  border: 1px solid var(--q-primary)
+  border-radius: $radius-value
+
+
+.m--input__top-label,
+.m--input__hint
+  margin-bottom: $m--input-helpers-margin
+
+.m--input__caption
+  margin-bottom: $m--input-helpers-margin
+  font-size: 0.75rem
+  font-weight: 400
+  line-height: 1.25rem
+  letter-spacing: 0.03333em
+
+.m--input
+  .m--sar-col
+    &__text
+      font-size: 18px
+      line-height: 16px
+      height: 15px

package/src/style/m-picker.sass

@@ -0,0 +1,7 @@
+.m--date__picker,
+.m--time__picker
+  .q-date__calendar-item
+    > div
+      text-overflow: ellipsis
+      white-space: nowrap
+      overflow: hidden

package/src/style/m-select.sass

@@ -0,0 +1,4 @@
+$m--select__popup-content: 300px !default
+
+.m--select__popup-content
+  max-height: $m--select__popup-content

package/src/style/main.sass

@@ -1,7 +1,6 @@
 @use 'sass:map'
 
 $m--row-margin-top: 1rem !default
-$m--input-helpers-margin: 5px !default
 
 // Flex.
 .flex-break
@@ -86,7 +85,6 @@ $bordered-style: $bordered-size solid var(--q-primary) !default
 .#{$bordered-class-name}
   border: $bordered-style
 
-
 @each $x in $alignsX
   .bordered-#{$x}
     border-#{$x}: $bordered-style
@@ -109,87 +107,15 @@ $bordered-style: $bordered-size solid var(--q-primary) !default
     .bordered-#{$y}
       border-#{$y}: $bordered-style
 
+
 .pre-text
   white-space-collapse: preserve-breaks
   white-space: pre-line
 
+
 pre
   max-width: 100%
 
-[data-input-name].m--input__error
-  > .q-field
-    &:not(.q-field--disabled)
-      .q-field__label::after
-        color: var(--q-negative)
-
-  .m--input__top-label__content
-    color: var(--q-negative)
-
-
-[data-input-name].m--input__required
-  &:not(.m--input__is-top-label)
-    > .q-field
-      &:not(.q-field--disabled)
-        .q-field__label::after
-          content: ' *'
-
-  .m--input__top-label__content::after
-    content: ' *'
-    color: var(--q-negative)
-
-.m--input__color-preview
-  border: 1px solid var(--q-primary)
-  border-radius: $radius-value
-
-
 .m--confirm.actions-between
   .q-card__actions
     justify-content: space-between !important
-
-.m--input__top-label,
-.m--input__hint
-  margin-bottom: $m--input-helpers-margin
-
-
-.m--input__caption
-  margin-bottom: $m--input-helpers-margin
-  font-size: 0.75rem
-  font-weight: 400
-  line-height: 1.25rem
-  letter-spacing: 0.03333em
-
-$control-max-width: 200px !default
-
-.m--control-cell,
-.m--control-header
-  width: $control-max-width
-
-.screen--xs,
-.screen--sm
-  .m--dt-btn-tooltip
-    display: none
-
-$m-help-row-margin-top: 4px !default
-
-.m--help-row
-  margin-top: $m-help-row-margin-top
-
-$m--select__popup-content: 300px !default
-
-.m--select__popup-content
-  max-height: $m--select__popup-content
-
-.m--input
-  .m--sar-col
-    &__text
-      font-size: 18px
-      line-height: 16px
-      height: 15px
-
-.m--date__picker,
-.m--time__picker
-  .q-date__calendar-item
-    > div
-      text-overflow: ellipsis
-      white-space: nowrap
-      overflow: hidden

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;