@mythpe/quasar-ui-qui 0.0.24 → 0.0.25-dev

package/src/components/grid/MRow.vue

@@ -1,20 +1,41 @@
+<!--
+  - 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'
-
-interface Props {
-  gutter?: MRowProps['gutter'];
-  col?: MRowProps['col'];
-}
+import { myth } from '../../utils'
 
-const props = defineProps<Props>()
-const defSize = computed<string>(() => MythOptions.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))
+const props = withDefaults(defineProps<MRowProps>(), {
+  gutter: undefined,
+  col: undefined
+})
+const defSize = 'md'
+const gutterSize = computed<string>(() => {
+  if (props.gutter !== undefined) {
+    if (typeof props.gutter === 'string' && props.gutter?.length > 0) {
+      return props.gutter
+    }
+  }
+  return myth.size.value || defSize
+})
+const colSize = computed<string>(() => {
+  if (props.col !== undefined) {
+    if (typeof props.col === 'string' && props.col?.length > 0) {
+      return props.col
+    }
+  }
+  return myth.size.value || defSize
+})
+// const colSize = computed<string>(() => props.gutter === !0 ? defSize.value : (props.gutter || defSize.value))
 defineOptions({
   name: 'MRow',
   inheritAttrs: !1

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,12 @@
+/*
+ * 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'
+export * from './transition'

package/src/components/transition/MFadeTransition.vue

@@ -0,0 +1,27 @@
+<!--
+  - 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: 'MFadeTransition',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <Transition
+    appear
+    name="myth-transition__fade"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Transition>
+</template>

package/src/components/transition/MFadeXTransition.vue

@@ -0,0 +1,26 @@
+<!--
+  - 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: 'MFadeXTransition',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <Transition
+    appear
+    name="myth-transition__fade-x"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Transition>
+</template>

package/src/components/transition/MTransition.vue

@@ -0,0 +1,41 @@
+<!--
+  - 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 { MTransitionProps as Props } from '../../types'
+
+interface P {
+  enterIn?: Props['enterIn'];
+  enterOut?: Props['enterOut'];
+  slowIn?: Props['slowIn'];
+  slowOut?: Props['slowIn'];
+}
+
+withDefaults(defineProps<P>(), {
+  enterIn: () => 'fadeIn',
+  enterOut: () => 'fadeOut',
+  slowIn: () => !1,
+  slowOut: () => !1
+})
+defineOptions({
+  name: 'MTransition',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <TransitionGroup
+    :enter-active-class="`animated ${enterIn} ${slowIn ? 'slow' : ''}`"
+    :leave-active-class="`animated ${enterOut} ${slowOut ? 'slow' : ''}`"
+    appear
+    name="m__transition__fade"
+    v-bind="$attrs"
+  >
+    <slot />
+  </TransitionGroup>
+</template>

package/src/components/transition/index.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
+ */
+
+import MFadeTransition from './MFadeTransition.vue'
+import MFadeXTransition from './MFadeXTransition.vue'
+import MTransition from './MTransition.vue'
+
+export { MFadeTransition, MFadeXTransition, MTransition }

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

package/src/composable/index.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 './useBindInput'
+export * from './useMyth'
+export * from './useValue'
+export * from './useError'

package/src/composable/useBindInput.ts

@@ -0,0 +1,209 @@
+import type { PropsContext as UiOpt } from '../types'
+import { computed, MaybeRefOrGetter, ref, toValue } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useMyth } from './useMyth'
+import { useSplitAttrs } from 'quasar'
+import { myth } from '../utils'
+import { camelCase, kebabCase, snakeCase, uniq } from 'lodash'
+
+type G = { name: string; [k: string]: any };
+type OptsContext = { choose?: boolean; };
+export const useBindInput = <P extends G = G> (Props: MaybeRefOrGetter<P>, key: keyof UiOpt, Opts: MaybeRefOrGetter<OptsContext> = {}) => {
+  const { messages, locale } = useI18n({ useScope: 'global' })
+  const { __ } = useMyth()
+  const { attributes } = useSplitAttrs()
+  const props = toValue<P>(Props)
+  const opts = toValue<OptsContext>(Opts)
+  const getProp = computed(() => (k: string) => {
+    if (props[k] !== undefined) {
+      return props[k]
+    }
+    return pluginProps.value[key]?.[k]
+  })
+
+  const { themeBtn, themeInput, props: pluginProps } = myth
+  const theme = computed(() => (key === 'btn' ? themeBtn.value : themeInput.value) ?? {})
+  const mergedTheme = ref({})
+  for (const k in theme.value) {
+    mergedTheme.value[k] = props[k] !== undefined ? theme.value[k] : props[k]
+  }
+  /**
+   * Top Label Style.
+   */
+  const hasTopLabel = computed(() => {
+    if (props.topLabel !== undefined) {
+      return props.topLabel !== !1
+    }
+    if ('topLabel' in theme.value && theme.value.topLabel !== undefined) {
+      return theme.value.topLabel !== !1
+    }
+    if (pluginProps.value[key] && 'topLabel' in pluginProps.value[key]) {
+      return pluginProps.value[key]?.topLabel !== !1
+    }
+    return !1
+  })
+
+  const getLabel = computed<string | undefined>(() => {
+    const k = props.label === undefined ? props.name : props.label
+    return k ? (__(k) || undefined) : undefined
+  })
+  const getPlaceholder = computed<string | undefined>(() => {
+    const replace = computed(() => {
+      const val = props.useChoice !== undefined ? props.useChoice : (attributes.value.useChoice !== undefined ? attributes.value.useChoice : opts?.choose)
+      if (typeof val === 'string' && val?.length > 0) {
+        return val
+      }
+      return 'enter'
+    })
+    if (props.placeholder === undefined) {
+      const k = props.label !== undefined ? props.label : props.name
+      return __(`replace.${replace.value}`, { name: __(k) })
+    }
+    return __(props.placeholder) || 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)
+      } else if (autocomplete === !1) {
+        return 'off'
+      } else if (autocomplete?.length > 0) {
+        return autocomplete
+      }
+    }
+    return undefined
+  })
+  const accepts = computed(() => {
+    const l: string[] = []
+    if (props.accept) {
+      if (typeof props.accept === 'string') {
+        l.push(props.accept)
+      } else if (Array.isArray(props.accept)) {
+        l.push(...props.accept)
+      } else if (typeof props.accept === 'object') {
+        const v = toValue(props.accept)
+        l.push(...Object.values<string>(v))
+      }
+    }
+    if (props.images) {
+      if (typeof props.images === 'string' && props.images?.length > 0) {
+        l.push(props.images)
+      } else {
+        l.push('image/png,image/jpg,image/jpeg')
+      }
+    }
+    if (props.svg) {
+      if (typeof props.svg === 'string' && props.svg?.length > 0) {
+        l.push(props.svg)
+      } else {
+        l.push('image/svg+xml')
+      }
+    }
+    if (props.video) {
+      if (typeof props.video === 'string' && props.video?.length > 0) {
+        l.push(props.video)
+      } else {
+        l.push('video/mp4')
+      }
+    }
+    if (props.pdf) {
+      if (typeof props.pdf === 'string' && props.pdf?.length > 0) {
+        l.push(props.pdf)
+      } else {
+        l.push('application/pdf')
+      }
+    }
+    if (props.excel) {
+      if (typeof props.excel === 'string' && props.excel?.length > 0) {
+        l.push(props.excel)
+      } else {
+        l.push('application/vnd.ms-excel')
+      }
+    }
+    return l
+  })
+
+  const isNumeric = (str: any) => !isNaN(str) && !isNaN(parseFloat(str))
+  const convertRules = (rules: any) => {
+    if (!rules) {
+      return {}
+    }
+    let values: Record<string, any> = {}
+    const list: any[] = typeof rules === 'string' ? rules.split('|') : (Array.isArray(rules) ? rules : [rules])
+
+    for (const rule of list) {
+      // console.log(rule)
+      if (!rule) {
+        continue
+      }
+      if (typeof rule === 'object' && !Array.isArray(rule)) {
+        values = { ...values, ...rule }
+        continue
+      }
+      if (Array.isArray(rule)) {
+        values = { ...values, ...rule }
+      }
+      const [name, value] = rule.split(':')
+      if (!name) {
+        continue
+      }
+      values[name] = !value ? !0
+        : /,/g.test(value) ? value.split(',').map((e: any) => isNumeric(e) ? parseInt(e) : e) : (isNumeric(value) ? parseInt(value) : value)
+    }
+    if (values.color && props.required) {
+      values.requiredColor = values.color
+      delete values.color
+    }
+    return values
+  }
+  const publicRules = ['required', 'email', 'numeric', 'integer', 'float', 'color']
+  const validations = (messages.value as any)?.[locale.value]?.validation?.messages || {}
+  const inputRules = computed<Record<string, any>>(() => {
+    if (props.viewMode) {
+      return {}
+    }
+    const rules: any = { ...convertRules(toValue(props.rules)) }
+    const keys = uniq<string>([...publicRules, ...(myth.rules.value ?? []), ...Object.keys(validations)])
+    for (const k of keys) {
+      if (['mobile', '_default', 'default'].includes(k)) {
+        continue
+      }
+      const cases = [k, snakeCase(k), camelCase(k), kebabCase(k)]
+
+      // eslint-disable-next-line no-labels
+      mainFor: for (const c of cases) {
+        for (const b of [attributes.value, props]) {
+          if (c in b && (b[c] === !0 || b[c] === '')) {
+            rules[snakeCase(k)] = b[c] === !0 || b[c] === '' ? !0 : b[c]
+            // eslint-disable-next-line no-labels
+            break mainFor
+          }
+        }
+      }
+    }
+
+    const mobile = attributes.value?.mobile !== undefined ? attributes.value.mobile : props.mobile
+    if (mobile !== undefined && mobile !== false) {
+      const defLen = 10
+      rules.digits = typeof mobile === 'boolean' ? defLen : (mobile || defLen)
+    }
+    return Object.values(rules).filter(e => !!e).length > 0 ? rules : undefined
+  })
+  const attrs = computed(() => ({
+    ...props,
+    ...attributes.value,
+    ...mergedTheme.value
+  }))
+  return {
+    inputRules,
+    accepts,
+    hasTopLabel,
+    getLabel,
+    getPlaceholder,
+    getAutocompleteAttribute,
+    getProp,
+    attrs
+  }
+}

package/src/composable/useError.ts

@@ -0,0 +1,11 @@
+import { computed, MaybeRefOrGetter } from 'vue'
+import { useFieldError, useSetFieldError } from 'vee-validate'
+
+export const useError = (name: MaybeRefOrGetter<string>) => {
+  const [error, setErrors] = [useFieldError(name), useSetFieldError(name)]
+  const errors = computed<string | string[] | undefined>({
+    get: () => error.value,
+    set: (v: string | string[] | undefined) => setErrors(v)
+  })
+  return { errors, error, setErrors }
+}