npm - @mythpe/quasar-ui-qui - Versions diffs - 0.5.0 → 0.5.2 - Mend

@mythpe/quasar-ui-qui 0.5.0 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/README.md +9 -6
package/dist/components/MBtn/MBtn.d.ts +35 -0
package/dist/components/grid/MColumn/MColumn.d.ts +28 -0
package/dist/components/grid/MContainer/MContainer.d.ts +23 -0
package/dist/components/grid/MGrid.d.ts +12 -0
package/dist/components/grid/MRow/MRow.d.ts +11 -0
package/dist/components/index.d.ts +19 -0
package/dist/composables/useMyth.d.ts +6765 -0
package/dist/composables/useMythMeta.d.ts +30 -0
package/dist/config/config.d.ts +3411 -0
package/dist/config/grid.d.ts +6 -0
package/dist/config/index.d.ts +2 -0
package/dist/index.common.js +1 -0
package/dist/index.css +2 -0
package/dist/index.d.ts +3 -0
package/dist/index.js +2 -0
package/dist/index.umd.js +1 -0
package/dist/types/config.d.ts +69 -0
package/dist/types/helpers.d.ts +14 -0
package/dist/types/index.d.ts +6 -0
package/dist/types/vue-prop-types.d.ts +5 -0
package/dist/utils/helpers.d.ts +40 -0
package/dist/utils/icons.d.ts +4 -0
package/dist/utils/index.d.ts +21 -0
package/dist/utils/str.d.ts +67 -0
package/dist/utils/vee-rules.d.ts +17 -0
package/dist/vue-plugin.d.ts +16 -0
package/package.json +31 -20
package/rREADME.md +0 -147
package/src/components/MBtn/MBtn.ts +0 -38
package/src/components/MBtn/MBtn.vue +0 -142
package/src/components/grid/MColumn/MColumn.ts +0 -15
package/src/components/grid/MColumn/MColumn.vue +0 -28
package/src/components/grid/MContainer/MContainer.ts +0 -39
package/src/components/grid/MContainer/MContainer.vue +0 -66
package/src/components/grid/MGrid.ts +0 -16
package/src/components/grid/MGrid.vue +0 -47
package/src/components/grid/MRow/MRow.ts +0 -15
package/src/components/grid/MRow/MRow.vue +0 -28
package/src/components/index.ts +0 -30
package/src/composables/useMyth.ts +0 -93
package/src/composables/useMythMeta.ts +0 -40
package/src/config/config.ts +0 -16
package/src/config/grid.ts +0 -10
package/src/config/index.ts +0 -2
package/src/css/components/m-btn.scss +0 -13
package/src/css/index.scss +0 -9
package/src/env.d.ts +0 -14
package/src/index.common.js +0 -1
package/src/index.ts +0 -4
package/src/index.umd.js +0 -2
package/src/shims-myth.d.ts +0 -6
package/src/shims-vue.d.ts +0 -22
package/src/types/config.ts +0 -136
package/src/types/helpers.ts +0 -21
package/src/types/index.ts +0 -9
package/src/types/vue-prop-types.ts +0 -13
package/src/utils/helpers.ts +0 -446
package/src/utils/icons.ts +0 -4
package/src/utils/index.ts +0 -77
package/src/utils/str.ts +0 -237
package/src/utils/vee-rules.ts +0 -40
package/src/vue-plugin.ts +0 -76

package/rREADME.md DELETED Viewed

@@ -1,147 +0,0 @@
-# MyTh Quasar UI Kit Extintion
-[![npm](https://img.shields.io/npm/v/@mythpe/quasar-ui-qui.svg?label=quasar-ui-qui)](https://www.npmjs.com/package/@mythpe/quasar-ui-qui)
-[![npm](https://img.shields.io/npm/dt/@mythpe/quasar-ui-qui.svg)](https://www.npmjs.com/package/@mythpe/quasar-ui-qui)
-**Compatible with Quasar UI v2 and Vue 3**.
-# Usage
-## Quasar CLI project
-Install the [App Extension](https://www.npmjs.com/package/@mythpe/quasar-app-extension-qui).
-**OR**:
-Create and register a boot file:
-```js
-import Vue from 'vue'
-import Plugin from '@mythpe/quasar-ui-qui'
-import '@mythpe/quasar-ui-qui/dist/index.css'
-Vue.use(Plugin)
-```
-**OR**:
-```html
-<style src="@mythpe/quasar-ui-qui/dist/index.css"></style>
-<script>
-  import { Component as MyComponent, Directive } from '@mythpe/quasar-ui-qui'
-  export default {
-    components: {
-      MyComponent
-    },
-    directives: {
-      Directive
-    }
-  }
-</script>
-```
-## Vue CLI project
-```js
-import Vue from 'vue'
-import Plugin from '@mythpe/quasar-ui-qui'
-import '@mythpe/quasar-ui-qui/dist/index.css'
-Vue.use(Plugin)
-```
-**OR**:
-```html
-<style src="@mythpe/quasar-ui-qui/dist/index.css"></style>
-<script>
-  import { Component as MyComponent, Directive } from '@mythpe/quasar-ui-qui'
-  export default {
-    components: {
-      MyComponent
-    },
-    directives: {
-      Directive
-    }
-  }
-</script>
-```
-## UMD variant
-Exports `window.Myth`.
-Add the following tag(s) after the Quasar ones:
-```html
-<head>
-  <!-- AFTER the Quasar stylesheet tags: -->
-  <link
-    href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.min.css"
-    rel="stylesheet"
-    type="text/css"
-  />
-</head>
-<body>
-  <!-- at end of body, AFTER Quasar script(s): -->
-  <script src="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.umd.min.js"></script>
-</body>
-```
-If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
-```html
-<link
-  href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.rtl.min.css"
-  rel="stylesheet"
-  type="text/css"
-/>
-```
-# Setup
-```bash
-$ yarn
-```
-# Developing
-```bash
-# start dev in SPA mode
-$ yarn dev
-# start dev in UMD mode
-$ yarn dev:umd
-# start dev in SSR mode
-$ yarn dev:ssr
-# start dev in Cordova iOS mode
-$ yarn dev:ios
-# start dev in Cordova Android mode
-$ yarn dev:android
-# start dev in Electron mode
-$ yarn dev:electron
-```
-# Building package
-```bash
-$ yarn build
-```
-# Adding Assets
-If you have a component that has assets, like language or icon-sets, you will need to provide these for UMD. In the `ui/build/script.javascript.js`
-file, you will find a couple of commented out commands that call `addAssets`. Uncomment what you need and add your assets to have them be built and
-put into the `ui/dist` folder.
-# License
-MIT (c) MyTh <mythpe@gmail.com>

package/src/components/MBtn/MBtn.ts DELETED Viewed

@@ -1,38 +0,0 @@
-import type { QBtnProps } from 'quasar'
-import type { ComponentPublicInstance, VNode } from 'vue'
-import type { SpinnerType } from '../../types/config'
-export interface MBtnProps extends Omit<QBtnProps, 'label'> {
-  /**
-   * The text that will be shown on the button
-   */
-  label?: string | number | undefined | null
-  /**
-   * Removes the default button styles
-   */
-  noStyle?: boolean
-  nativeLabel?: boolean | undefined
-  /**
-   * Type of loading indicator
-   */
-  spinner?: SpinnerType
-}
-export interface MBtnSlots {
-  /**
-   * Use for custom content, instead of relying on 'icon' and 'label' props
-   */
-  default: () => VNode[]
-  /**
-   * Override the default QSpinner when in 'loading' state
-   */
-  loading: () => VNode[]
-}
-export interface MBtn extends ComponentPublicInstance<MBtnProps> {
-  /**
-   * Emulate click on MBtn
-   * @param evt JS event object
-   */
-  click: (evt?: Event) => void
-}

package/src/components/MBtn/MBtn.vue DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

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