@mythpe/quasar-ui-qui 0.5.0 → 0.5.2

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 {}
-}

package/src/types/config.ts

@@ -1,136 +0,0 @@
-import type { MBtnProps } from '../components'
-import type { NamedColor, QBtnProps, QInputProps } from 'quasar'
-import type { ClassProp, StyleProp } from './vue-prop-types'
-
-export type GridType = 'column' | 'row'
-/**
- * Standard size options with string extension capability
- */
-export type GridGutterSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'none' | string
-export type GridGutterType = 'col' | 'gutter'
-
-export type ThemeBtn = Partial<
-  Pick<
-    QBtnProps,
-    | 'size'
-    | 'outline'
-    | 'flat'
-    | 'unelevated'
-    | 'rounded'
-    | 'push'
-    | 'square'
-    | 'glossy'
-    | 'padding'
-    | 'color'
-    | 'textColor'
-    | 'dense'
-    | 'ripple'
-    | 'round'
-    | 'noCaps'
-  >
->
-
-export type ThemeInput = Partial<
-  Pick<
-    QInputProps,
-    | 'labelColor'
-    | 'color'
-    | 'bgColor'
-    | 'dark'
-    | 'filled'
-    | 'outlined'
-    | 'borderless'
-    | 'standout'
-    | 'hideBottomSpace'
-    | 'rounded'
-    | 'square'
-    | 'dense'
-    | 'itemAligned'
-    // | 'inputClass'
-    // | 'inputStyle'
-  >
-> & {
-  /**
-   * Class definitions to be attributed to the underlying input tag
-   */
-  inputClass?: ClassProp | undefined
-  /**
-   * Style definitions to be attributed to the underlying input tag
-   */
-  inputStyle?: StyleProp | undefined
-}
-
-export interface ThemeConfig {
-  fluid?: boolean
-  dense?: boolean
-  gutterSize?: GridGutterSize | undefined
-  gutterType?: GridGutterType | undefined
-  btn: ThemeBtn
-  input: ThemeInput
-}
-
-export interface ComponentConfig {
-  btn?: Omit<MBtnProps, 'onClick' | keyof ThemeBtn | 'label' | 'href' | 'to' | 'type' | 'target'>
-  input?: Omit<MBtnProps, 'onClick' | keyof ThemeInput>
-}
-export type SpinnerType =
-  | 'audio'
-  | 'ball'
-  | 'bars'
-  | 'box'
-  | 'clock'
-  | 'comment'
-  | 'cube'
-  | 'dots'
-  | 'facebook'
-  | 'gears'
-  | 'grid'
-  | 'hearts'
-  | 'hourglass'
-  | 'infinity'
-  | 'ios'
-  | 'orbit'
-  | 'oval'
-  | 'pie'
-  | 'puff'
-  | 'radio'
-  | 'rings'
-  | 'tail'
-  | 'spinner'
-export type LoadingOptions = {
-  /**
-   * Type of loading indicator
-   */
-  type: SpinnerType
-  /**
-   * Color of the loading indicator
-   */
-  color?: NamedColor
-  /**
-   * Size of the loading indicator
-   */
-  size?: string
-  /**
-   * Whether to show loading text
-   */
-  label?: boolean
-}
-
-export interface MythConfig {
-  /**
-   * Version.
-   */
-  readonly version: string
-  /**
-   * Theme configuration.
-   */
-  theme: ThemeConfig
-  /**
-   * Component props.
-   */
-  component: ComponentConfig
-  /**
-   * q-btn loading slot.
-   */
-  loadingOptions?: LoadingOptions
-}

package/src/types/helpers.ts

@@ -1,21 +0,0 @@
-import type { AxiosRequestConfig, AxiosResponse } from 'axios'
-
-export type UrlType = string | number | any
-export type ParamsType = Record<string, any> | FormData | object
-export type ConfigType = AxiosRequestConfig
-export type DownloadFromResponse = {
-  status: boolean
-  response: AxiosResponse
-}
-export type DownloadFromResponseCode =
-  | 'no_response'
-  | 'no_file_name'
-  | 'no_file_url'
-  | 'unknown'
-  | string
-export type DownloadFromResponseError = {
-  code: DownloadFromResponseCode
-  status: boolean
-}
-
-export type HelpersStubSchema = object

package/src/types/index.ts

@@ -1,9 +0,0 @@
-import type { MythConfig } from './config'
-
-export * from './vue-prop-types'
-export * from './helpers'
-export * from '../vue-plugin'
-
-export interface MythPluginConfig extends Partial<Omit<MythConfig, 'version'>> {
-  //
-}

package/src/types/vue-prop-types.ts

@@ -1,13 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-export type ClassValueNoArray = false | null | undefined | string | Record<string, any>
-export type ClassProp =
-  | false
-  | null
-  | undefined
-  | string
-  | Record<string, any>
-  | Array<ClassValueNoArray>
-
-export type StyleValueNoArray = false | null | undefined | string | CSSProperties
-export type StyleProp = false | null | undefined | string | CSSProperties | StyleValueNoArray[]