@mythpe/quasar-ui-qui 0.5.1 → 0.5.2

package/src/components/MBtn/MBtn.vue

@@ -1,142 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-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

@@ -1,28 +0,0 @@
-<!--
-  - 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

@@ -1,39 +0,0 @@
-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

@@ -1,66 +0,0 @@
-<!--
-  - 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

@@ -1,16 +0,0 @@
-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

@@ -1,47 +0,0 @@
-<!--
-  - 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

@@ -1,15 +0,0 @@
-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/MRow/MRow.vue

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

package/src/components/index.ts

@@ -1,30 +0,0 @@
-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 './grid/MGrid'
-export * from './grid/MColumn/MColumn'
-export * from './grid/MContainer/MContainer'
-export * from './grid/MRow/MRow'
-
-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

@@ -1,93 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-.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

@@ -1,9 +0,0 @@
-: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

@@ -1,14 +0,0 @@
-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 +0,0 @@
-export * from './vue-plugin'

package/src/index.ts

@@ -1,4 +0,0 @@
-import * as VuePlugin from './vue-plugin'
-
-export * from './vue-plugin'
-export default VuePlugin

package/src/index.umd.js

@@ -1,2 +0,0 @@
-import * as VuePlugin from './vue-plugin'
-export default VuePlugin

package/src/shims-myth.d.ts

@@ -1,6 +0,0 @@
-declare const __UI_VERSION__: string
-
-declare module '*.scss' {
-  const content: Record<string, string>
-  export default content
-}

package/src/shims-vue.d.ts

@@ -1,22 +0,0 @@
-import 'quasar'
-import 'vue'
-import '@vue/runtime-core'
-import type { MythGlobalComponents } from './components'
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent
-  export default component
-}
-
-declare module 'vue' {
-  export interface GlobalComponents extends MythGlobalComponents {}
-}
-
-declare module '@vue/runtime-dom' {
-  export interface GlobalComponents extends MythGlobalComponents {}
-}
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents extends MythGlobalComponents {}
-}