@mythpe/quasar-ui-qui 0.0.21 → 0.0.22-dev

package/index.d.ts

@@ -0,0 +1,13 @@
+/*
+ * 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'

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.21",
+  "version": "0.0.22-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,15 +24,14 @@
     "build:css": "node build/script.css.js"
   },
   "dependencies": {
-    "lodash": "^4.17.21",
     "typed.js": "^2.1.0",
     "vee-validate": "^4.14.0",
     "@vee-validate/i18n": "^4.14.0",
     "@vee-validate/rules": "^4.14.0",
-    "vue-i18n": "^10.0.0"
+    "vue-i18n": "^10.0.0",
+    "lodash": "^4.17.0"
   },
   "devDependencies": {
-    "lodash": "^4.17.21",
     "@quasar/app-webpack": "^3.13.0",
     "@quasar/extras": "^1.16.4",
     "@rollup/plugin-buble": "^0.21.3",

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/MBtn.vue

@@ -1,9 +1,20 @@
-<script lang="ts" setup>
+<!--
+  - 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 { MBtnProps } from '../../types'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { extend } from 'quasar'
-import { myth } from '../../myth'
+import { myth } from '../../utils'
 
 const props = defineProps<MBtnProps>()
 const options = computed(() => myth.options.value.btn ?? {})

package/src/components/form/MInput.vue

@@ -0,0 +1,181 @@
+<!--
+  - 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 { computed, reactive, ref, toValue } from 'vue'
+import type { MInputProps as Props } from '../../types'
+import { QField, QInput, type QInputSlots } from 'quasar'
+import { useInputHelper, useMyth } from '../../composable'
+import { myth } from '../../utils'
+
+type 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'];
+  viewMode?: Props['viewMode'];
+  viewModeValue?: Props['viewModeValue'];
+  autocomplete?: Props['autocomplete'];
+  topLabel?: Props['topLabel'];
+  fieldOptions?: Props['fieldOptions'];
+  clearable?: Props['clearable'];
+}
+
+// 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,
+//   viewMode: () => !1,
+//   viewModeValue: undefined,
+//   autocomplete: undefined,
+//   topLabel: undefined,
+//   fieldOptions: undefined,
+//   clearable: undefined
+// })
+const props = defineProps<Props>()
+defineModel<Props['modelValue']>({ required: !1, default: undefined })
+const { __ } = useMyth()
+const options = computed(() => myth.options.value)
+const helper = useInputHelper<P>(() => props, 'input')
+const { hasTopLabel, getLabel, getPlaceholder, getAutocompleteAttribute, getRules } = helper
+const inputScope = useField<Props['modelValue']>(() => props.name, getRules, {
+  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 = ref<InstanceType<typeof QInput | typeof QField> | null>(null)
+const scopes = reactive(inputScope)
+defineExpose<typeof scopes & { input: typeof input }>({ input, ...scopes })
+defineOptions({
+  name: 'MInput',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <MCol
+    :auto="auto"
+    :class="[$attrs.class,{'m--input__required':getRules?.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"
+      v-bind="scopes"
+    >
+      <MInputLabel
+        v-if="hasTopLabel"
+        :field="scopes"
+      >
+        <MHelpRow
+          :text="help"
+          tooltip
+        />
+      </MInputLabel>
+    </slot>
+    <slot name="caption">
+      <div
+        v-if="!!caption"
+        class="m--input__caption"
+      >
+        {{ __(caption) }}
+      </div>
+    </slot>
+    <component
+      :is="viewMode ? QField : QInput"
+      ref="input"
+      :error="!!errorMessage"
+      :error-message="errorMessage"
+      :hint="hint ? __(hint) : hint"
+      :label="hasTopLabel ? undefined : getLabel"
+      :model-value="value"
+      :placeholder="getPlaceholder"
+      v-bind="{
+        ...options.input as any,
+        ...( viewMode ? options.field : {} ),
+        ...$attrs,
+        ...( viewMode ? { stackLabel: !0 } : {} ),
+        autocomplete:getAutocompleteAttribute,
+        clearable: viewMode ? !1 : clearable
+      }"
+      v-on="listeners"
+    >
+      <template
+        v-for="(_,slot) in $slots as Readonly<QInputSlots>"
+        :key="slot"
+        #[slot]
+      >
+        <slot :name="slot" />
+      </template>
+      <template
+        v-if="viewMode"
+        #control
+      >
+        <slot name="control">
+          <MInputFieldControl>
+            {{ viewModeValue ?? value }}
+          </MInputFieldControl>
+        </slot>
+      </template>
+    </component>
+    <slot
+      name="help"
+      v-bind="scopes"
+    >
+      <MHelpRow
+        v-if="!hasTopLabel"
+        :text="help"
+      />
+    </slot>
+    <slot
+      name="bottom-input"
+      v-bind="scopes"
+    />
+  </MCol>
+</template>

package/src/components/form/MInputFieldControl.vue

@@ -0,0 +1,24 @@
+<!--
+  - 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
+>
+defineOptions({ name: 'MInputFieldControl', inheritAttrs: !1 })
+</script>
+
+<template>
+  <div
+    class="self-center full-width no-outline ellipsis"
+    tabindex="0"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/form/MInputLabel.vue

@@ -0,0 +1,31 @@
+<!--
+  - 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 { MInputLabelProps as Props } from '../../types'
+import { useMyth } from '../../composable'
+
+const { __ } = useMyth()
+defineProps<Props>()
+defineOptions({ name: 'MInputLabel' })
+</script>
+
+<template>
+  <div
+    :class="{
+      'row items-center m--input__top-label' : !0,
+      'm--input__top-label__invalid' : !field?.meta?.valid && field?.meta?.dirty
+    }"
+  >
+    <div class="m--input__top-label__content">
+      {{ label !== undefined ? __(label) : field?.label }}
+    </div>
+    <slot />
+  </div>
+</template>

package/src/components/form/index.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 MBtn from './MBtn.vue'
+import MInput from './MInput.vue'
+import MInputFieldControl from './MInputFieldControl.vue'
+import MInputLabel from './MInputLabel.vue'
+
+export { MBtn, MInput, MInputFieldControl, MInputLabel }

package/src/components/grid/MBlock.vue

@@ -1,7 +1,15 @@
+<!--
+  - 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 { MBlockProps } from '../../types'
 import { computed } from 'vue'
-import MythOptions from '../../myth'
+import { myth } from '../../utils'
 import { extend } from 'quasar'
 
 interface Props {
@@ -15,7 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
   rounded: !1,
   shadow: 'none'
 })
-const block = computed(() => MythOptions.options.value.block ?? {})
+const block = computed(() => myth.options.value.block ?? {})
 const options = computed<Props>(() => extend(!0, { ...props }, block.value))
 defineOptions({
   name: 'MBlock',

package/src/components/grid/MCol.vue

@@ -1,3 +1,11 @@
+<!--
+  - 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
@@ -45,8 +53,8 @@ const classes = computed(() => {
     list.push('col')
   }
   return uniq(list)
-  // return list
 })
+
 defineOptions({
   name: 'MCol',
   inheritAttrs: !1

package/src/components/grid/MColumn.vue

@@ -1,3 +1,11 @@
+<!--
+  - 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>
 defineOptions({
   name: 'MColumn',

package/src/components/grid/MContainer.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import type { MContainerProps } from '../../types'
-import MythOptions from '../../myth'
+import { myth } from '../../utils'
 import { computed } from 'vue'
 
 interface Props {
@@ -18,7 +18,7 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-const styles = computed(() => MythOptions.options.value?.style ?? {})
+const styles = computed(() => myth.options.value?.style ?? {})
 const sizeProp = computed(() => {
   if (props.size !== undefined) {
     return props.size

package/src/components/grid/MHelpRow.vue

@@ -10,7 +10,7 @@
   lang="ts"
   setup
 >
-import { useI18n } from 'vue-i18n'
+import { useMyth } from '../../composable'
 
 interface Props {
   text?: string | undefined;
@@ -19,8 +19,7 @@ interface Props {
 }
 
 defineProps<Props>()
-const { t, te } = useI18n({ useScope: 'global' })
-const __ = (s: any) => !s ? '' : te(`attributes.${s}`) ? t(`attributes.${s}`) : te(s) ? t(s) : s
+const { __ } = useMyth()
 defineOptions({
   name: 'MHelpRow',
   inheritAttrs: !1
@@ -28,7 +27,10 @@ defineOptions({
 </script>
 
 <template>
-  <div class="row">
+  <div
+    class="row"
+    v-if="text || tooltip"
+  >
     <div class="col-auto">
       <q-icon
         :left="!!text && !tooltip"

package/src/components/grid/MRow.vue

@@ -1,10 +1,18 @@
+<!--
+  - 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 { MRowProps } from '../../types'
 import { computed } from 'vue'
-import MythOptions from '../../myth'
+import { myth } from '../../utils'
 
 interface Props {
   gutter?: MRowProps['gutter'];
@@ -12,7 +20,7 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-const defSize = computed<string>(() => MythOptions.options.value.style?.gutters || '')
+const defSize = computed<string>(() => myth.options.value.style?.gutters || '')
 const gutterSize = computed<string>(() => props.gutter === !0 ? defSize.value : (props.gutter || defSize.value))
 const colSize = computed<string>(() => props.gutter === !0 ? defSize.value : (props.gutter || defSize.value))
 defineOptions({

package/src/components/grid/index.ts

@@ -0,0 +1,16 @@
+/*
+ * 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 MBlock from './MBlock.vue'
+import MCol from './MCol.vue'
+import MColumn from './MColumn.vue'
+import MContainer from './MContainer.vue'
+import MHelpRow from './MHelpRow.vue'
+import MRow from './MRow.vue'
+
+export { MBlock, MCol, MColumn, MContainer, MHelpRow, MRow }

package/src/components/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 './form'
+export * from './grid'
+export * from './typography'

package/src/components/typography/MTypingString.vue

@@ -1,3 +1,11 @@
+<!--
+  - 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

package/src/components/typography/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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 MTypingString from './MTypingString.vue'
+export { MTypingString }

package/src/composable/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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 './useHelpersMyth'
+export * from './useMyth'