eco-vue-js 0.8.40 → 0.8.42

package/eslint/recommended.js

@@ -0,0 +1,171 @@
+import pluginQuery from '@tanstack/eslint-plugin-query'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'
+import importPlugin from 'eslint-plugin-import'
+import tailwind from 'eslint-plugin-tailwindcss'
+import unusedImports from 'eslint-plugin-unused-imports'
+import pluginVue from 'eslint-plugin-vue'
+
+export default [
+  ...pluginVue.configs['flat/recommended'],
+  ...tailwind.configs['flat/recommended'],
+  ...pluginQuery.configs['flat/recommended'],
+  ...vueTsEslintConfig(),
+
+  {
+    files: ['**/*.cjs'],
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+
+  {
+    files: ['**/*.{ts,js,mts,tsx,json}'],
+    rules: {
+      'indent': ['error', 2, {
+        'SwitchCase': 1,
+      }],
+    },
+  },
+
+  {
+    files: ['**/*.json'],
+    rules: {
+      'quotes': ['error', 'double'],
+      '@typescript-eslint/no-unused-expressions': 'off',
+      'comma-dangle': ['error', 'never'],
+    },
+  },
+
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@typescript-eslint/naming-convention': [
+        'error',
+        {'selector': 'enum', 'format': ['PascalCase']},
+        {'selector': 'enumMember', 'format': ['UPPER_CASE', 'snake_case']},
+      ],
+    },
+  },
+
+  {
+    files: ['**/*.{ts,js,vue}'],
+    plugins: {
+      import: importPlugin,
+    },
+    languageOptions: {
+      parser: pluginVue.parser,
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+    },
+    rules: {
+      ...importPlugin.flatConfigs.recommended.rules,
+      'import/order': [
+        1,
+        {
+          'newlines-between': 'always',
+          'named': true,
+          'groups': ['type', 'external', 'builtin', 'internal', 'sibling', 'parent', 'index'],
+          distinctGroup: true,
+          'pathGroups': [
+            {'pattern': 'eco-vue-js/**/W**', 'group': 'builtin', 'position': 'before'},
+            {'pattern': '**/W**', 'group': 'builtin', 'position': 'before'},
+            {'pattern': 'eco-vue-js/**/Icon**', 'group': 'builtin', 'position': 'before'},
+            {'pattern': '**/Icon**', 'group': 'builtin', 'position': 'before'},
+            {'pattern': 'eco-vue-js/**', 'group': 'external', 'position': 'after'},
+          ],
+          'pathGroupsExcludedImportTypes': ['builtin'],
+          'alphabetize': {'order': 'asc', 'caseInsensitive': false},
+        },
+      ],
+      'import/no-useless-path-segments': [1, {noUselessIndex: true}],
+      // 'import/extensions': [1, 'never'],
+      'import/first': 1,
+      'import/newline-after-import': 1,
+    },
+    settings: {
+      'import/parsers': {
+        '@typescript-eslint/parser': ['.ts', '.js'],
+      },
+      'import/resolver': {
+        'typescript': {
+          'alwaysTryTypes': true,
+          'project': './tsconfig.vue.json',
+        },
+        'node': true,
+      },
+    },
+  },
+
+  {
+    files: ['**/*.{ts,js,vue}'],
+    plugins: {
+      'unused-imports': unusedImports,
+    },
+    rules: {
+      'semi': ['error', 'never'],
+      'quotes': ['error', 'single', {allowTemplateLiterals: true}],
+      'comma-dangle': ['error', 'always-multiline'],
+      'comma-spacing': ['error', {'before': false, 'after': true}],
+      'object-curly-spacing': ['error', 'never'],
+      'func-call-spacing': 'off',
+      'template-curly-spacing': ['error', 'always'],
+      'space-before-function-paren': ['error', {anonymous: 'always', named: 'never', asyncArrow: 'always'}],
+      'vue/no-lone-template': ['error', {
+        ignoreAccessible: false,
+      }],
+      'no-undef': 'off',
+      'default-case-last': 'off',
+      'no-console': ['warn'],
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': ['error', {'args': 'after-used', 'caughtErrors': 'none'}],
+      'unused-imports/no-unused-imports': 'error',
+      'tailwindcss/no-custom-classname': 'off',
+      'tailwindcss/migration-from-tailwind-2': 'off',
+      'no-multiple-empty-lines': [1, {max: 1, maxEOF: 0, maxBOF: 0}],
+    },
+  },
+
+  {
+    files: ['**/*.vue'],
+    rules: {
+      'vue/script-indent': ['error', 2, {
+        'baseIndent': 0,
+        'switchCase': 1,
+        'ignores': [],
+      }],
+      'vue/component-name-in-template-casing': ['error', 'PascalCase', {registeredComponentsOnly: false}],
+      'vue/component-tags-order': ['error', {
+        'order': ['template', 'script[setup]', 'style'],
+      }],
+      'vue/multiline-html-element-content-newline': ['error', {
+        'ignoreWhenEmpty': true,
+        'ignores': ['pre', 'textarea', 'span', 'tspan'],
+        'allowEmptyLines': false,
+      }],
+      'vue/attributes-order': ['error', {
+        'order': [
+          'DEFINITION',
+          'LIST_RENDERING',
+          'CONDITIONALS',
+          'RENDER_MODIFIERS',
+          'GLOBAL',
+          ['UNIQUE', 'SLOT'],
+          'TWO_WAY_BINDING',
+          'OTHER_DIRECTIVES',
+          ['ATTR_DYNAMIC', 'ATTR_STATIC', 'ATTR_SHORTHAND_BOOL'],
+          'EVENTS',
+          'CONTENT',
+        ],
+        'alphabetical': false,
+      }],
+      'vue/prefer-use-template-ref': 'error',
+      'vue/require-macro-variable-name': ['error', {'defineProps': 'props', 'defineEmits': 'emit', 'defineSlots': 'slots', 'useSlots': 'slots', 'useAttrs': 'attrs'}],
+      'vue/require-typed-ref': 'error',
+      'vue/padding-line-between-blocks': ['error', 'always'],
+      'vue/block-tag-newline': [1, {
+        'singleline': 'always',
+        'multiline': 'always',
+      }],
+    },
+  },
+]

package/eslint/rules/modal-declaration.js

@@ -0,0 +1,33 @@
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Restrict specific imports and provide replacement',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    fixable: 'code',
+  },
+
+  create: function (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode()
+    const filename = context.filename ?? context.getFilename()
+    return {
+      Program(node) {
+        const baseName = filename
+
+        if (!baseName.endsWith('.vue') || baseName.includes('Modal')) return
+
+        const templateNode = node.templateBody
+        if (!templateNode) return
+
+        if (!sourceCode.getText(templateNode).includes('<WModalWrapper')) return
+  
+        context.report({
+          node,
+          message: `Component with <WModalWrapper> should contain "Modal" in file name`,
+        })
+      },
+    }
+  },
+}

package/eslint/rules/modal-import-async.js

@@ -0,0 +1,38 @@
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Restrict specific imports and provide replacement',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    fixable: 'code',
+  },
+
+  create: function (context) {
+    return {
+      ImportDeclaration(node) {
+        const importPath = node.source.value
+
+        // Check if import is of a modal component
+        if (importPath.includes('@') && importPath.includes('Modal')) {
+          const defaultImport = node.specifiers.find(specifier => specifier.type === 'ImportDefaultSpecifier')
+
+          if (defaultImport) {
+            // Check if import method is not defineAsyncComponent
+            if (node.importKind !== 'type' && node.importKind !== 'typeof') {
+              context.report({
+                node,
+                message: `Imported modal component '${ defaultImport.local.name }' should use defineAsyncComponent`,
+                fix: function (fixer) {
+                  const replacement = `const ${ defaultImport.local.name } = defineAsyncComponent(() => import('${ importPath }'))`
+                  return fixer.replaceText(node, replacement)
+                },
+              })
+            }
+          }
+        }
+      },
+    }
+  },
+}

package/eslint/rules/modal-import.js

@@ -0,0 +1,44 @@
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Ensure defineAsyncComponent is not called inside functions or passed as arguments',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    fixable: 'code',
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode()
+    return {
+      CallExpression(node) {
+        if (node.callee.type === 'Identifier' && node.callee.name === 'defineAsyncComponent') {
+          const parentFunction = (sourceCode.getAncestors ? sourceCode.getAncestors(node, node) : context.getAncestors()).find(ancestor => ancestor.type === 'FunctionDeclaration' || ancestor.type === 'ArrowFunctionExpression')
+
+          if (parentFunction) {
+            const importPath = node.arguments[0].body.source.value
+            const componentName = importPath.substring(importPath.lastIndexOf('/') + 1, importPath.lastIndexOf('.'))
+
+            context.report({
+              node: node,
+              message: 'defineAsyncComponent should not be called inside functions or passed as arguments',
+              fix: function (fixer) {
+                return [
+                  fixer.replaceText(node, componentName),
+                  fixer.insertTextAfterRange(
+                    (sourceCode.getAncestors ? sourceCode.getAncestors(node, node) : context.getAncestors())[0].body
+                      .slice()
+                      .reverse()
+                      .find(item => item.type === 'ImportDeclaration').source.range,
+                    `\n\nconst ${ componentName } = defineAsyncComponent(() => import('${ importPath }'));`,
+                  ),
+                ]
+              },
+            })
+          }
+        }
+      },
+    }
+  },
+}

package/eslint/rules/ui-kit-imports.js

@@ -0,0 +1,65 @@
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Restrict specific imports and provide replacement',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    fixable: 'code',
+  },
+
+  create: function (context) {
+    return {
+      ImportDeclaration(node) {
+        const source = node.source.value
+        const importSpecifiers = node.specifiers.filter(specifier => specifier.type === 'ImportSpecifier')
+
+        importSpecifiers.forEach(specifier => {
+          if (!source.includes('eco-vue-js')) return
+
+          const importedName = specifier.imported.name
+
+          if (importedName.startsWith('W')) {
+            const replacementImport = `import ${ importedName } from 'eco-vue-js/dist/components/${ importedName.substr(1) }/${ importedName }.vue'`
+            context.report({
+              node,
+              message: `Do not import '${ importedName }' directly. Use the replacement: ${ replacementImport }`,
+              fix: function (fixer) {
+                return fixer.replaceText(node, replacementImport)
+              },
+            })
+
+            return
+          }
+
+          if (source.includes('iconsSax')) {
+            const replacementImport = `import ${ importedName } from 'eco-vue-js/dist/assets/icons/sax/${ importedName }'`
+            context.report({
+              node,
+              message: `Do not import '${ importedName }' directly. Use the replacement: ${ replacementImport }`,
+              fix: function (fixer) {
+                return fixer.replaceText(node, replacementImport)
+              },
+            })
+
+            return
+          }
+
+          if (source.includes('iconsDefault')) {
+            const replacementImport = `import ${ importedName } from 'eco-vue-js/dist/assets/icons/default/${ importedName }'`
+            context.report({
+              node,
+              message: `Do not import '${ importedName }' directly. Use the replacement: ${ replacementImport }`,
+              fix: function (fixer) {
+                return fixer.replaceText(node, replacementImport)
+              },
+            })
+
+            return
+          }
+        })
+      },
+    }
+  },
+}

package/package.json

@@ -4,51 +4,55 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.8.40",
+  "version": "0.8.42",
   "scripts": {
-    "dev": "vite",
-    "build": "run-p type-check build-only",
+    "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
-    "test:unit": "vitest --environment jsdom --root src/",
     "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit -p tsconfig.vue.json --composite false",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "lint:no-fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --fix",
+    "lint-no-fix": "eslint .",
+    "lint-inspect-config": "npx eslint --inspect-config",
     "write-imports": "node write-imports.js"
   },
+  "dependencies": {
+    "@tanstack/eslint-plugin-query": "5.60.1",
+    "@vue/eslint-config-typescript": "14.1.3",
+    "eslint-import-resolver-typescript": "3.6.3",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-tailwindcss": "3.17.5",
+    "eslint-plugin-unused-imports": "4.1.4",
+    "eslint-plugin-vue": "9.31.0"
+  },
   "peerDependencies": {
     "@tanstack/vue-query": ">=5.59.0",
     "vue": ">=3.5.11",
     "vue-router": ">=4.4.5"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "1.10.4",
-    "@tsconfig/node18": "18.2.4",
+    "@tsconfig/node22": "22.0.0",
     "@types/jsdom": "21.1.7",
-    "@types/node": "22.9.0",
+    "@types/node": "22.9.1",
     "@types/postcss-import": "14.0.3",
-    "@vitejs/plugin-vue": "5.1.4",
-    "@vue/eslint-config-typescript": "13.0.0",
-    "@vue/tsconfig": "0.5.1",
+    "@vitejs/plugin-vue": "5.2.0",
+    "@vue/tsconfig": "0.6.0",
     "autoprefixer": "10.4.20",
-    "eslint": "8.57.0",
-    "eslint-plugin-unused-imports": "3.0.0",
-    "eslint-plugin-vue": "9.30.0",
+    "eslint": "9.15.0",
     "jsdom": "25.0.1",
-    "npm-run-all": "4.1.5",
+    "npm-run-all2": "7.0.1",
     "path": "0.12.7",
-    "postcss": "8.4.47",
+    "postcss": "8.4.49",
     "postcss-import": "16.1.0",
-    "tailwindcss": "3.4.14",
+    "tailwindcss": "3.4.15",
     "typescript": "5.6.3",
-    "vite": "5.4.10",
+    "vite": "5.4.11",
     "vite-plugin-dts": "4.3.0",
     "vite-svg-loader": "5.1.0",
-    "vitest": "2.1.4",
     "vue-tsc": "2.1.10"
   },
   "type": "module",
   "files": [
+    "eslint",
     "dist",
     "tailwind-base",
     "LICENSE"
@@ -69,6 +73,9 @@
     "./tailwind-base/index.cjs": {
       "require": "./tailwind-base/index.cjs"
     },
+    "./eslint/plugin": {
+      "import": "./eslint/plugin.js"
+    },
     "./dist/assets/icons/default/*": {
       "import": "./dist/assets/icons/default/*.svg.js"
     },

package/tailwind-base/index.cjs

@@ -38,6 +38,8 @@ module.exports = {
 
       severity: require('./theme/severity.cjs'),
       score: require('./theme/score.cjs'),
+
+      transparent: 'transparent',
     },
     extend: {
       ...require('./theme/sizes.cjs'),