@mythpe/quasar-ui-qui 0.4.103 → 0.5.0

package/src/components/MBtn/MBtn.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import {
+  QBtn,
+  QSpinner,
+  QSpinnerAudio,
+  QSpinnerBall,
+  QSpinnerBars,
+  QSpinnerBox,
+  QSpinnerClock,
+  QSpinnerComment,
+  QSpinnerCube,
+  QSpinnerDots,
+  QSpinnerFacebook,
+  QSpinnerGears,
+  QSpinnerGrid,
+  QSpinnerHearts,
+  QSpinnerHourglass,
+  QSpinnerInfinity,
+  QSpinnerIos,
+  QSpinnerOrbit,
+  QSpinnerOval,
+  QSpinnerPie,
+  QSpinnerPuff,
+  QSpinnerRadio,
+  QSpinnerRings,
+  QSpinnerTail
+} from 'quasar'
+import { computed } from 'vue'
+import type { MBtnProps } from './MBtn'
+import { useMyth } from '../../vue-plugin'
+import { pascalCase } from 'change-case'
+
+interface Props {
+  label?: MBtnProps['label']
+  spinner?: MBtnProps['spinner']
+  loading?: boolean
+  nativeLabel?: boolean
+  noStyle?: boolean
+}
+
+const spinners = {
+  QSpinner,
+  QSpinnerAudio,
+  QSpinnerBall,
+  QSpinnerBars,
+  QSpinnerBox,
+  QSpinnerClock,
+  QSpinnerComment,
+  QSpinnerCube,
+  QSpinnerDots,
+  QSpinnerFacebook,
+  QSpinnerGears,
+  QSpinnerGrid,
+  QSpinnerHearts,
+  QSpinnerHourglass,
+  QSpinnerInfinity,
+  QSpinnerIos,
+  QSpinnerOrbit,
+  QSpinnerOval,
+  QSpinnerPie,
+  QSpinnerPuff,
+  QSpinnerRadio,
+  QSpinnerRings,
+  QSpinnerTail
+}
+const {
+  noStyle = !1,
+  label = undefined,
+  loading = false,
+  nativeLabel = false,
+  spinner = undefined
+} = defineProps<Props>()
+const { __, loadingOptions, componentProps, btnStyle } = useMyth()
+const loadingType = computed(() => {
+  if (spinner !== undefined) {
+    return spinner
+  }
+  return loadingOptions.value?.type
+})
+const spinnerComponent = computed(() => {
+  if (!loadingType.value) {
+    return undefined
+  }
+  if (loadingType.value === 'spinner') {
+    return spinners.QSpinner
+  }
+  const k = pascalCase(`q-spinner-${loadingType.value}`) as keyof typeof spinners
+  return spinners[k]
+})
+const loadingSize = computed(() => loadingOptions.value?.size)
+const loadingColor = computed(() => loadingOptions.value?.color)
+const DEFAULT_LABEL = undefined
+const computedLabel = computed<string | undefined>(() => {
+  if (nativeLabel === !0) {
+    return label === null || label === undefined ? DEFAULT_LABEL : String(label)
+  }
+  if (label === undefined || label === null) {
+    return DEFAULT_LABEL
+  }
+  return __(label)
+})
+const computedAttrs = computed(() => ({
+  ...(noStyle ? {} : btnStyle.value),
+  ...(componentProps.value.btn || {}),
+  ariaLabel: computedLabel.value
+}))
+defineOptions({
+  name: 'MBtn'
+})
+</script>
+
+<template>
+  <q-btn
+    :loading="loading"
+    :label="computedLabel"
+    v-bind="computedAttrs"
+  >
+    <template
+      v-if="!!$slots.loading"
+      #loading
+    >
+      <slot name="loading" />
+    </template>
+    <template
+      v-else-if="!!loadingType && spinnerComponent"
+      #loading
+    >
+      <component
+        :is="spinnerComponent"
+        :color="loadingColor"
+        :size="loadingSize"
+      />
+    </template>
+
+    <template
+      v-if="!!$slots.default"
+      #default
+    >
+      <slot />
+    </template>
+  </q-btn>
+</template>

package/src/components/grid/MColumn/MColumn.ts

@@ -0,0 +1,15 @@
+import type { ComponentPublicInstance, VNode } from 'vue'
+import type { MGridProps } from '../MGrid'
+
+export interface MColumnProps {
+  size?: MGridProps['size']
+  type?: MGridProps['type']
+}
+
+export interface MColumnSlots {
+  default?: () => VNode[]
+}
+
+export interface MColumn extends ComponentPublicInstance<MColumnProps> {
+  //
+}

package/src/components/grid/MColumn/MColumn.vue

@@ -0,0 +1,28 @@
+<!--
+  - 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 MGrid from '../MGrid.vue'
+import type { MColumnProps } from './MColumn'
+
+const { size = undefined, type = undefined } = defineProps<MColumnProps>()
+
+defineOptions({
+  name: 'MColumn'
+})
+</script>
+
+<template>
+  <MGrid
+    grid-type="column"
+    :size="size"
+    :type="type"
+  >
+    <slot />
+  </MGrid>
+</template>

package/src/components/grid/MContainer/MContainer.ts

@@ -0,0 +1,39 @@
+import type { ComponentPublicInstance, VNode } from 'vue'
+import type { MGridProps } from '../MGrid'
+
+export type MContainerProps = {
+  /**
+   * Defines the spacing size (gutter) between rows and columns.
+   * Matches the design system global theme sizes.
+   * @default 'md'
+   */
+  size?: MGridProps['size']
+
+  /**
+   * Determines the Quasar gutter implementation behavior.
+   * - 'col': Uses 'q-col-gutter' (adds negative margins, ideal for layout grids).
+   * - 'gutter': Uses 'q-gutter' (adds standard margins between direct children).
+   * @default 'gutter'
+   */
+  type?: MGridProps['type']
+
+  /**
+   * Reduces the inner padding or vertical spacing of the container for a more compact layout.
+   * @default false
+   */
+  dense?: boolean | undefined
+
+  /**
+   * If true, the container spans the full width of the viewport, removing maximum width constraints.
+   * @default false
+   */
+  fluid?: boolean | undefined
+}
+
+export type MContainerSlots = {
+  default?: () => VNode[]
+}
+
+export interface MContainer extends ComponentPublicInstance<MContainerProps> {
+  //
+}

package/src/components/grid/MContainer/MContainer.vue

@@ -0,0 +1,66 @@
+<!--
+  - 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 { computed, provide, reactive } from 'vue'
+import type { MContainerProps } from './MContainer'
+import useMyth from '../../../composables/useMyth'
+import { DEFAULT_GRID_SIZE, DEFAULT_GRID_TYPE, MContainerInjectionKey } from '../../../config'
+
+const {
+  size = DEFAULT_GRID_SIZE,
+  type = DEFAULT_GRID_TYPE,
+  dense = undefined,
+  fluid = undefined
+} = defineProps<MContainerProps>()
+
+const { theme } = useMyth()
+
+const computedGutterSize = computed(() => {
+  return size !== DEFAULT_GRID_SIZE ? size : (theme.gutterSize ?? DEFAULT_GRID_SIZE)
+})
+const computedGutterType = computed(() => {
+  return type !== DEFAULT_GRID_TYPE ? type : (theme.gutterType ?? DEFAULT_GRID_TYPE)
+})
+const computedDense = computed(() => dense ?? theme.dense ?? false)
+const computedFluid = computed(() => fluid ?? theme.fluid ?? false)
+provide(
+  MContainerInjectionKey,
+  reactive({
+    gutterSize: computedGutterSize,
+    gutterType: computedGutterType,
+    dense: computedDense,
+    fluid: computedFluid
+  })
+)
+defineOptions({
+  name: 'MContainer'
+})
+</script>
+
+<template>
+  <div
+    :class="{
+      'm-container__fluid': !!computedFluid,
+      'm-container__dense': !!computedDense,
+      'q-pa-none': computedGutterSize === 'none',
+      [`q-pa-${computedGutterSize || ''}`]: computedGutterSize && computedGutterSize !== 'none'
+    }"
+    class="m-container"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.m-container {
+  width: 100%;
+  min-height: 400px;
+  background-color: red;
+}
+</style>

package/src/components/grid/MGrid.ts

@@ -0,0 +1,16 @@
+import type { ComponentPublicInstance, VNode } from 'vue'
+import type { GridGutterSize, GridGutterType, GridType } from '../../types/config'
+
+export interface MGridProps {
+  gridType: GridType
+  size?: GridGutterSize
+  type?: GridGutterType
+}
+
+export interface MGridSlots {
+  default?: () => VNode[]
+}
+
+export interface MGrid extends ComponentPublicInstance<MGridProps> {
+  //
+}

package/src/components/grid/MGrid.vue

@@ -0,0 +1,47 @@
+<!--
+  - 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 { computed, inject } from 'vue'
+import useMyth from '../../composables/useMyth'
+import { DEFAULT_GRID_SIZE, DEFAULT_GRID_TYPE, MContainerInjectionKey } from '../../config'
+import type { MGridProps } from './MGrid'
+
+const { size = undefined, type = undefined, gridType = 'row' } = defineProps<MGridProps>()
+const parent = inject(MContainerInjectionKey)
+const { theme } = useMyth()
+
+const computedGutterSize = computed<string>(() => {
+  if (size !== undefined) {
+    return size
+  }
+  return parent?.size ?? theme.gutterSize ?? DEFAULT_GRID_SIZE
+})
+const computedGutterType = computed<string>(() => {
+  if (type !== undefined) {
+    return type
+  }
+  return parent?.type ?? theme.gutterType ?? DEFAULT_GRID_TYPE
+})
+const gutterKey = computed(() => `q${type === 'col' ? '-col' : ''}-gutter`)
+defineOptions({
+  name: 'MGrid'
+})
+</script>
+
+<template>
+  <div
+    :class="{
+      'm-row row': gridType === 'row',
+      'm-column column': gridType === 'column',
+      [`${gutterKey}-${computedGutterSize}`]: !!computedGutterType && computedGutterType !== 'none'
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/grid/MRow/MRow.ts

@@ -0,0 +1,15 @@
+import type { ComponentPublicInstance, VNode } from 'vue'
+import type { MGridProps } from '../MGrid'
+
+export interface MRowProps {
+  size?: MGridProps['size']
+  type?: MGridProps['type']
+}
+
+export interface MRowSlots {
+  default?: () => VNode[]
+}
+
+export interface MRow extends ComponentPublicInstance<MRowProps> {
+  //
+}

package/src/components/grid/{MColumn.vue → MRow/MRow.vue}

@@ -6,21 +6,23 @@
   - Github: https://github.com/mythpe
   -->
 
-<script
-  lang="ts"
-  setup
->
+<script lang="ts" setup>
+import MGrid from '../MGrid.vue'
+import type { MRowProps } from './MRow'
+
+const { size = undefined, type = undefined } = defineProps<MRowProps>()
+
 defineOptions({
-  name: 'MColumn',
-  inheritAttrs: !1
+  name: 'MRow'
 })
 </script>
 
 <template>
-  <div
-    class="m-column column"
-    v-bind="$attrs"
+  <MGrid
+    grid-type="row"
+    :size="size"
+    :type="type"
   >
     <slot />
-  </div>
+  </MGrid>
 </template>

package/src/components/index.ts

@@ -1,20 +1,30 @@
-/*
- * 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/MBtn.vue'
+import MContainer from './grid/MContainer/MContainer.vue'
+import MGrid from './grid/MGrid.vue'
+import MColumn from './grid/MColumn/MColumn.vue'
+import MRow from './grid/MRow/MRow.vue'
+import type { GlobalComponentConstructor } from 'quasar'
+import type { MContainerProps, MContainerSlots } from './grid/MContainer/MContainer'
+import type { MGridProps, MGridSlots } from './grid/MGrid'
+import type { MColumnProps, MColumnSlots } from './grid/MColumn/MColumn'
+import type { MRowProps, MRowSlots } from './grid/MRow/MRow'
+import type { MBtnProps, MBtnSlots } from './MBtn/MBtn'
 
-export * from './datatable'
-export * from './form'
-export * from './grid'
-export * from './map'
-export * from './modal'
-export * from './parials'
-export * from './sar'
-export * from './transition'
-export * from './typography'
+export * from './grid/MGrid'
+export * from './grid/MColumn/MColumn'
+export * from './grid/MContainer/MContainer'
+export * from './grid/MRow/MRow'
 
-export default {}
-export {}
+export * from './MBtn/MBtn'
+
+export { MBtn, MContainer, MGrid, MColumn, MRow }
+
+export interface MythGlobalComponents {
+  // Grid.
+  MContainer: GlobalComponentConstructor<MContainerProps, MContainerSlots>
+  MGrid: GlobalComponentConstructor<MGridProps, MGridSlots>
+  MColumn: GlobalComponentConstructor<MColumnProps, MColumnSlots>
+  MRow: GlobalComponentConstructor<MRowProps, MRowSlots>
+
+  MBtn: GlobalComponentConstructor<MBtnProps, MBtnSlots>
+}

package/src/composables/useMyth.ts

@@ -0,0 +1,93 @@
+import { computed, inject, reactive, readonly, ref } from 'vue'
+import { mythConfig, MythInjectionKey } from '../config/config'
+import { useI18n } from 'vue-i18n'
+import type { MythConfig } from '../types/config'
+import * as str from '../utils/str'
+import * as helpers from '../utils/helpers'
+
+export function useMyth() {
+  const { t, te } = useI18n({ useScope: 'global' })
+  const MythConfig = inject<MythConfig>(MythInjectionKey, mythConfig)
+  const config = readonly(MythConfig)
+  const name = ref('MyTh')
+  const version = computed(() => MythConfig.version)
+  const loadingOptions = computed(() => MythConfig.loadingOptions)
+
+  const theme = reactive(MythConfig.theme)
+  const btnStyle = computed(() => MythConfig.theme.btn)
+  const inputStyle = computed(() => MythConfig.theme.input)
+  const componentProps = computed(() => MythConfig.component)
+  const __ = (key: any, ...rest: any[]): string => {
+    key = key ?? ''
+    const m1 = key.startsWith(':') && key.endsWith(':')
+    const m2 = key.startsWith("{'") && key.endsWith("'}")
+    if ((m1 || m2) && key.length > 2) {
+      if (m1) {
+        return key.slice(1, -1)
+      }
+      return key.slice(2, -2)
+    }
+    const attrKey = `attributes.${key}`
+    if (te(attrKey)) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      return t(attrKey, ...rest)
+    }
+    if (te(key)) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      return t(key, ...rest)
+    }
+    return t(key)
+  }
+  const pageTitle = (name: string, num?: number) => {
+    num ??= 2
+    const singular = str.singular(name)
+    const pascalSingular = str.pascalCase(name)
+    const snakeSingular = str.snakeCase(name)
+    const camelSingular = str.camelCase(name)
+    const kebabSingular = str.kebabCase(name)
+    const plural = str.plural(name)
+    const pascalPlural = str.pascalCase(plural)
+    const snakePlural = str.snakeCase(plural)
+    const camelPlural = str.camelCase(plural)
+    const kebabPlural = str.kebabCase(plural)
+    const names = helpers.uniq<string>([
+      name,
+      singular,
+      pascalSingular,
+      snakeSingular,
+      camelSingular,
+      kebabSingular,
+      plural,
+      pascalPlural,
+      snakePlural,
+      camelPlural,
+      kebabPlural
+    ])
+    const keys = helpers.uniq<string>(['routes', 'attributes'])
+    for (const k of keys) {
+      for (const n of names) {
+        if (te(`${k}.${n}`)) {
+          return __(`${k}.${n}`, num)
+        }
+      }
+    }
+    return __(name)
+  }
+
+  return {
+    config,
+    name,
+    version,
+    loadingOptions,
+    theme,
+    btnStyle,
+    inputStyle,
+    componentProps,
+    __,
+    pageTitle
+  }
+}
+
+export default useMyth

package/src/composables/useMythMeta.ts

@@ -0,0 +1,40 @@
+import { useMeta } from 'quasar'
+import type { MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
+
+type MetaTagOptions = Record<string, any> & {
+  template?: (attributeValue: string) => string
+}
+export interface MetaOptions {
+  meta?: { [name: string]: MetaTagOptions }
+  link?: { [name: string]: Record<string, string> }
+  script?: { [name: string]: Record<string, string> }
+  htmlAttr?: { [name: string]: string | undefined }
+  bodyAttr?: { [name: string]: string | undefined }
+  noscript?: { [name: string]: string }
+}
+/**
+ * Initializes global meta tags that bind dynamically to your mythConfig state.
+ * Use all the variables and store them in one place for the application.
+ */
+export function useMythMeta(
+  appName?: MaybeRefOrGetter<string>,
+  pageTitle?: MaybeRefOrGetter<string>,
+  metaOptions?: MaybeRefOrGetter<MetaOptions>
+): void {
+  useMeta(() => {
+    const rawAppName = toValue(appName) || 'MyTh'
+    const rawPageTitle = toValue(pageTitle) || ''
+    const rawOptions = toValue(metaOptions) || {}
+    return {
+      title: rawPageTitle,
+      titleTemplate: (title: string) => {
+        if (!title || title === rawAppName) {
+          return rawAppName
+        }
+        return `${rawAppName} | ${title}`
+      },
+      ...rawOptions
+    }
+  })
+}

package/src/config/config.ts

@@ -0,0 +1,16 @@
+import { type InjectionKey, reactive } from 'vue'
+import { version } from '../../package.json'
+import type { MythConfig } from '../types/config'
+
+export const mythConfig = reactive<MythConfig>({
+  version,
+  theme: {
+    btn: {
+      noCaps: true
+    },
+    input: {}
+  },
+  component: {},
+  loadingOptions: undefined
+})
+export const MythInjectionKey = Symbol.for('_m_') as unknown as InjectionKey<MythConfig>

package/src/config/grid.ts

@@ -0,0 +1,10 @@
+import type { InjectionKey } from 'vue'
+import type { MContainerProps } from '../components/grid/MContainer/MContainer'
+import type { GridGutterSize, GridGutterType } from '../types/config'
+
+export const MContainerInjectionKey = Symbol.for(
+  '_m__m-container'
+) as unknown as InjectionKey<MContainerProps>
+
+export const DEFAULT_GRID_SIZE: GridGutterSize = 'md'
+export const DEFAULT_GRID_TYPE: GridGutterType = 'gutter'

package/src/config/index.ts

@@ -0,0 +1,2 @@
+export * from './grid'
+export * from './config'

package/src/css/components/m-btn.scss

@@ -0,0 +1,13 @@
+.m-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+
+  &--primary {
+    background-color: var(--q-primary);
+    color: white;
+  }
+}

package/src/css/index.scss

@@ -0,0 +1,9 @@
+:root {
+  --myth-border-radius: 12px;
+  --myth-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.myth-disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}

package/src/env.d.ts

@@ -0,0 +1,14 @@
+declare namespace NodeJS {
+  interface ProcessEnv {
+    DEV: boolean
+    PROD: boolean
+    DEBUGGING: boolean
+    CLIENT: boolean
+    SERVER: boolean
+    MODE: 'spa' | 'ssr' | 'pwa' | 'cordova' | 'capacitor'
+    NODE_ENV: 'development' | 'production'
+    TARGET: 'ios' | 'android' | 'chrome' | 'firefox' | undefined
+    VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined
+    VUE_ROUTER_BASE: string | undefined
+  }
+}

package/src/index.common.js

@@ -1,15 +1 @@
-/*
- * 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 './components'
-export * from './composable'
-export * from './utils'
-
-import * as Plugin from './utils'
-
-export default Plugin
+export * from './vue-plugin'