@mythpe/quasar-ui-qui 0.0.8 → 0.0.10

package/.eslintrc.cjs

@@ -0,0 +1,103 @@
+module.exports = {
+  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
+  // This option interrupts the configuration hierarchy at this file
+  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
+  root: true,
+
+  // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
+  // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
+  // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
+  parserOptions: {
+    parser: require.resolve('@typescript-eslint/parser'),
+    extraFileExtensions: ['.vue']
+  },
+
+  env: {
+    browser: true,
+    es2021: true,
+    node: true
+  },
+
+  // Rules order is important, please avoid shuffling them
+  extends: [
+    // Base ESLint recommended rules
+    // 'eslint:recommended',
+
+    // https://typescript-eslint.io/getting-started/legacy-eslint-setup
+    // ESLint typescript rules
+    'plugin:@typescript-eslint/recommended',
+
+    // Uncomment any of the lines below to choose desired strictness,
+    // but leave only one uncommented!
+    // See https://eslint.vuejs.org/rules/#available-rules
+    // 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
+    'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
+    // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+    'standard'
+  ],
+
+  plugins: [
+    // required to apply rules which need type information
+    '@typescript-eslint',
+
+    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
+    // required to lint *.vue files
+    'vue'
+
+  ],
+
+  globals: {
+    ga: 'readonly', // Google Analytics
+    cordova: 'readonly',
+    __statics: 'readonly',
+    __QUASAR_SSR__: 'readonly',
+    __QUASAR_SSR_SERVER__: 'readonly',
+    __QUASAR_SSR_CLIENT__: 'readonly',
+    __QUASAR_SSR_PWA__: 'readonly',
+    process: 'readonly',
+    Capacitor: 'readonly',
+    chrome: 'readonly'
+  },
+
+  // add your custom rules here
+  rules: {
+
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow paren-less arrow functions
+    'arrow-parens': 'off',
+    'one-var': 'off',
+    'no-void': 'off',
+    'multiline-ternary': 'off',
+
+    'import/first': 'off',
+    'import/namespace': 'error',
+    'import/default': 'error',
+    'import/export': 'error',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+
+    // The core 'import/named' rules
+    // does not work with type definitions
+    'import/named': 'off',
+
+    'prefer-promise-reject-errors': 'off',
+
+    quotes: ['warn', 'single', { avoidEscape: true }],
+
+    // this rule, if on, would require explicit return type on the `render` function
+    '@typescript-eslint/explicit-function-return-type': 'off',
+
+    // in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled
+    '@typescript-eslint/no-var-requires': 'off',
+
+    // The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
+    // does not work with type definitions
+    'no-unused-vars': 'off',
+
+    // allow debugger during development only
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    '@typescript-eslint/no-explicit-any': 'off'
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": "MyTh Ahmed Faiz <mythpe@gmail.com>",
   "email": "mythpe@gmail.com",
@@ -20,6 +20,12 @@
     "build:js": "node build/script.javascript.js",
     "build:css": "node build/script.css.js"
   },
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "typed.js": "^2.1.0",
+    "vee-validate": "^4.14.7",
+    "vue-i18n": "^10.0.4"
+  },
   "devDependencies": {
     "@quasar/app-webpack": "^3.13.0",
     "@quasar/extras": "^1.16.4",
@@ -27,10 +33,20 @@
     "@rollup/plugin-json": "^4.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.4.2",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^20.5.9",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "autoprefixer": "^10.0.2",
     "chalk": "^4.1.0",
     "core-js": "^3.0.0",
     "cssnano": "^4.1.10",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-vue": "^9.0.0",
     "fs-extra": "^8.1.0",
     "open": "^7.3.0",
     "postcss": "^8.1.9",
@@ -54,7 +70,9 @@
     "last 4 FirefoxAndroid versions",
     "last 4 iOS versions"
   ],
-  "dependencies": {
-    "vue-i18n": "^10.0.4"
+  "engines": {
+    "node": "^24 || ^22 || ^20 || ^18",
+    "npm": ">= 6.13.4",
+    "yarn": ">= 1.21.1"
   }
 }

package/src/components/{MBtn.vue → form/MBtn.vue}

@@ -1,15 +1,11 @@
 <script lang="ts" setup>
-import type { MBtnProps } from '../types'
+import type { MBtnProps } from '../../types'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { extend } from 'quasar'
-import { MythOptions } from '../utils'
+import { MythOptions } from '../../utils'
 
 const props = defineProps<MBtnProps>()
-defineOptions({
-  name: 'MBtn',
-  inheritAttrs: !1
-})
 const options = computed(() => MythOptions.defaults.value.btn ?? {})
 const { t, te } = useI18n({ useScope: 'global' })
 const getLabel = computed(() => {
@@ -23,12 +19,13 @@ const getLabel = computed(() => {
   }
   return props.label
 })
+defineOptions({
+  name: 'MBtn',
+  inheritAttrs: !1
+})
 </script>
 
 <template>
-  <div>
-    <pre>{{ options }}</pre>
-  </div>
   <q-btn v-bind="extend(!0,{...$attrs},options.props,{...$props},{label: getLabel})">
     <template
       v-if="!!options.loading && !$slots.loading"

package/src/components/grid/MBlock.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { MBlockProps } from '../../types'
+import { computed } from 'vue'
+import MythOptions from '../../utils'
+import { extend } from 'quasar'
+
+interface Props {
+  size?: MBlockProps['size'];
+  rounded?: MBlockProps['rounded'];
+  shadow?: MBlockProps['shadow'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  rounded: !1,
+  shadow: 'none'
+})
+const block = computed(() => MythOptions.defaults.value.block ?? {})
+const options = computed<Props>(() => extend(!0, { ...props }, block.value))
+defineOptions({
+  name: 'MBlock',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <div
+    :class="{
+      'm---block' : !0,
+      [`q-pa-${options.size}`] : !!options.size && options.size !== 'none',
+      'rounded-borders' : options.rounded === !0,
+      [`shadow-${options.shadow}`] : !!options.shadow && options.shadow !== 'none'
+    }"
+    v-bind="$attrs"
+  >
+    <pre style="direction: ltr;">{{ options }}</pre>
+    <slot />
+  </div>
+</template>

package/src/components/grid/MCol.vue

@@ -0,0 +1,73 @@
+<script
+  lang="ts"
+  setup
+>
+import { computed } from 'vue'
+import type { MColProps } from '../../types'
+import lodash from 'lodash'
+
+interface Props {
+  name?: MColProps['name']
+  auto?: MColProps['auto']
+  col?: MColProps['col']
+  xs?: MColProps['xs']
+  sm?: MColProps['sm']
+  md?: MColProps['md']
+  lg?: MColProps['lg']
+  xl?: MColProps['xl']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: undefined,
+  auto: undefined,
+  col: undefined,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined
+})
+const classes = computed(() => {
+  const list: string[] = ['m--col']
+  if (props.auto === !0) {
+    list.push('col-auto')
+  }
+  if (props.col === 'grow') {
+    list.push('col-grow')
+  } else if (props.col === 'shrink') {
+    list.push('col-shrink')
+  } else if (typeof props.col === 'string') {
+    if (props.col?.toString()?.trim()?.length > 0 && !list.includes(`col-${props.col}`)) {
+      list.push(`col-${props.col}`)
+    }
+  }
+
+  for (const k of (['xs', 'sm', 'md', 'lg', 'xl'] as (keyof Props)[])) {
+    if (props[k] && typeof props[k] !== 'boolean') {
+      if (!list.includes(`col-${k}-${props[k]}`)) {
+        list.push(`col-${k}-${props[k]}`)
+      }
+    }
+  }
+
+  if (list.length === 1 && props.col !== !1) {
+    list.push('col')
+  }
+
+  return lodash.uniq(list)
+})
+defineOptions({
+  name: 'MCol',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <div
+    :class="classes"
+    :data-input-name="name??undefined"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/grid/MColumn.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+defineOptions({
+  name: 'MColumn',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <div
+    class="m--column column"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/grid/MContainer.vue

@@ -0,0 +1,46 @@
+<!--
+  - 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 { MContainerProps } from '../../types'
+import MythOptions from '../../utils'
+import { computed } from 'vue'
+
+interface Props {
+  size?: MContainerProps['size'];
+  fluid?: MContainerProps['fluid'];
+  dense?: MContainerProps['dense'];
+}
+
+const props = defineProps<Props>()
+const styles = computed(() => MythOptions.defaults.value?.style ?? {})
+const sizeProp = computed(() => {
+  if (props.size !== undefined) {
+    return props.size
+  }
+  return styles.value.gutters
+})
+defineOptions({
+  name: 'MContainer',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <div
+    :class="{
+      'm--container' : !0,
+      'm--container__fluid' : (fluid !== !1 && fluid !== undefined) || (styles.fluid === !0 && (fluid !== !1 && fluid !== undefined)),
+      'm--container__dense' : dense !== !1 && dense !== undefined,
+      [`q-pa-${sizeProp||''}`]: sizeProp && sizeProp !== 'none'
+    }"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/grid/MHelpRow.vue

@@ -0,0 +1,62 @@
+<!--
+  - 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 { useI18n } from 'vue-i18n'
+
+interface Props {
+  text?: string | undefined;
+  icon?: string | undefined;
+  tooltip?: boolean | undefined;
+}
+
+defineProps<Props>()
+const { t, te } = useI18n({ useScope: 'global' })
+const __ = (s: any) => !s ? '' : te(`attributes.${s}`) ? t(`attributes.${s}`) : te(s) ? t(s) : s
+defineOptions({
+  name: 'MHelpRow',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-auto">
+      <q-icon
+        :left="!!text && !tooltip"
+        class="cursor-pointer"
+        name="ion-ios-information-circle-outline"
+        size="19px"
+      >
+        <q-tooltip
+          v-if="!!tooltip"
+          anchor="center end"
+          class="bg-transparent text-black text-justify"
+          self="center start"
+          transition-hide="jump-right"
+          transition-show="jump-left"
+        >
+          <q-card style="max-width: 280px">
+            <q-card-section style="font-size: 13px">
+              {{ __(text) }}
+            </q-card-section>
+          </q-card>
+        </q-tooltip>
+      </q-icon>
+    </div>
+    <div
+      v-if="!tooltip && !!text"
+      class="col"
+    >
+      <div v-text="__(text)" />
+    </div>
+  </div>
+</template>

package/src/components/grid/MRow.vue

@@ -0,0 +1,35 @@
+<script
+  lang="ts"
+  setup
+>
+import type { MRowProps } from '../../types'
+import { computed } from 'vue'
+import MythOptions from '../../utils'
+
+interface Props {
+  gutter?: MRowProps['gutter'];
+  col?: MRowProps['col'];
+}
+
+const props = defineProps<Props>()
+const defSize = computed<string>(() => MythOptions.defaults.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))
+defineOptions({
+  name: 'MRow',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <div
+    :class="{
+      'm--row row': !0,
+      [`q-gutter-${gutterSize}`]: gutter !== !1 && gutter !== undefined,
+      [`q-col-gutter-${colSize}`]: col !== !1 && col !== undefined,
+    }"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/typography/MTypingString.vue

@@ -0,0 +1,78 @@
+<script
+  lang="ts"
+  setup
+>
+
+import Typed, { type TypedOptions } from 'typed.js'
+import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
+import type { MTypingStringProps } from '../../types'
+
+interface Props {
+  name: MTypingStringProps['name'];
+  tag?: MTypingStringProps['tag'];
+  string: MTypingStringProps['string'];
+  loop?: MTypingStringProps['loop'];
+  typeSpeed?: MTypingStringProps['typeSpeed'];
+  backDelay?: MTypingStringProps['backDelay'];
+  fadeOut?: MTypingStringProps['fadeOut'];
+  options?: MTypingStringProps['options'];
+}
+
+const props = defineProps<Props>()
+
+const elmId = computed(() => `typed-content-${props.name}`)
+const computedOptions = computed(() => ({
+  loop: props.loop === undefined ? !1 : props.loop,
+  typeSpeed: props.typeSpeed === undefined ? 300 : props.typeSpeed,
+  backDelay: props.backDelay,
+  fadeOut: props.fadeOut,
+  strings: typeof props.string === 'string' ? [props.string] : props.string,
+  ...props.options
+} as TypedOptions))
+let typed: Typed | undefined
+const iniTyped = () => {
+  try {
+    typed = new Typed(`#${elmId.value}`, computedOptions.value)
+  } catch (e) {
+    console.log(e)
+  }
+}
+const destroy = () => {
+  if (typed) {
+    try {
+      typed.destroy()
+    } catch (e) {
+
+    }
+  }
+}
+watch(() => props.string, () => {
+  destroy()
+  iniTyped()
+})
+onMounted(() => {
+  if (props.string) {
+    try {
+      iniTyped()
+    } catch (e) {
+      console.log(e)
+      const a = document.getElementById(elmId.value)
+      a && (a.innerHTML = typeof props.string === 'string' ? props.string : props.string.join('<br />'))
+    }
+  }
+})
+onBeforeUnmount(() => destroy())
+defineExpose({ typed })
+defineOptions({
+  name: 'MTypingString',
+  inheritAttrs: !1
+})
+</script>
+
+<template>
+  <component
+    :is="tag || 'span'"
+    :id="elmId"
+    v-bind="$attrs"
+  />
+</template>

package/src/index.common.js

@@ -2,4 +2,5 @@ export * from './vue-plugin'
 export * from './utils'
 
 import * as VuePlugin from './vue-plugin'
+
 export default VuePlugin

package/src/index.esm.js

@@ -2,4 +2,5 @@ export * from './vue-plugin'
 export * from './utils'
 
 import * as VuePlugin from './vue-plugin'
+
 export default VuePlugin

package/src/index.sass

@@ -1,2 +1,27 @@
 @import 'quasar/src/css/variables.sass'
+$m--container-padding: $space-base !default
+$m--container-fluid-width: 1440px !default
+$m--row-margin-top: $m--container-padding !default
 
+.flex-break
+  flex: 1 0 100% !important
+
+.row
+  .flex-break
+    height: 0 !important
+
+.column
+  .flex-break
+    width: 0 !important
+
+.m--container
+  &__dense
+    padding: 0 !important
+
+  &__fluid
+    max-width: $m--container-fluid-width
+    margin-left: auto
+    margin-right: auto
+
+.m--row + .m--row
+  margin-top: $m--row-margin-top

package/src/index.umd.js

@@ -2,4 +2,5 @@ export * from './vue-plugin'
 export * from './utils'
 
 import * as VuePlugin from './vue-plugin'
+
 export default VuePlugin

package/src/types/VuePlugin.d.ts

@@ -1,7 +1,24 @@
 import type { QBtnProps } from 'quasar'
 import type { Ref } from 'vue'
+import type { MBlockProps, StyleSize } from './components'
 
 export interface UiOptions {
+  /**
+   * Style of the components.
+   */
+  style?: {
+    /**
+     * Apply Padding on all sides of components.
+     */
+    gutters?: StyleSize | undefined;
+    /**
+     * Apply Fluid on all sides of containers.
+     */
+    fluid?: boolean | undefined;
+  };
+  /**
+   * MBtn component.
+   */
   btn?: {
     props?: Partial<QBtnProps>;
     loading?: {
@@ -11,7 +28,12 @@ export interface UiOptions {
       label?: boolean | undefined;
     }
   };
+  /**
+   * MBlock component.
+   */
+  block?: Partial<MBlockProps>;
 }
+
 export interface MythOptionsContext {
   defaults: Ref<UiOptions>;
   getDefaults: () => UiOptions;