@autoafleveren/ui 1.3.2 → 1.3.3

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@autoafleveren/ui",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "type": "module",
   "files": [
     "dist/*",
+    "src/*",
     "index.d.ts",
     "icons.d.ts",
     "composables.d.ts",
@@ -69,7 +70,7 @@
   },
   "packageManager": "yarn@4.6.0",
   "dependencies": {
-    "@awesome.me/kit-6a64244790": "^1.0.238",
+    "@awesome.me/kit-6a64244790": "^1.0.247",
     "@floating-ui/vue": "^1.1.7",
     "@fortawesome/fontawesome-svg-core": "^7.0.0",
     "@fortawesome/vue-fontawesome": "^3.1.1",

package/src/App.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+  import Playground from './Playground.vue';
+</script>
+
+<template>
+  <Suspense>
+    <template #default>
+      <Playground />
+    </template>
+
+    <template #fallback>
+      Loading...
+    </template>
+  </Suspense>
+</template>

package/src/Playground.vue.example

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+   import { BaseLayout } from '~layouts';
+</script>
+
+<template>
+  <BaseLayout>
+    Playground
+  </BaseLayout>
+</template>

package/src/config/eslint.cjs

@@ -0,0 +1,199 @@
+const typescriptOverride = require('@programic/eslint-plugin/lib/configs/typescript-override');
+
+const tsConfigPath = 'tsconfig.vitest.json';
+const tailwindConfigPath = 'tailwind.config.cjs';
+
+const defaultTypescriptOverride = {
+  parser: '@typescript-eslint/parser',
+  plugins: [
+    '@typescript-eslint',
+    'vitest',
+  ],
+  extends: [
+    ...typescriptOverride.extends,
+    'plugin:vitest/recommended',
+  ],
+};
+
+const namingConventionsTestFileRule = [
+  ...typescriptOverride.rules['@typescript-eslint/naming-convention'],
+];
+
+const variableIndex = namingConventionsTestFileRule.findIndex(selector => {
+  return typeof selector === 'object' && selector.selector === 'variable';
+});
+
+if (variableIndex > -1) {
+  namingConventionsTestFileRule.splice(variableIndex, 1, {
+    selector: 'variable',
+    format: ['strictCamelCase', 'StrictPascalCase', 'UPPER_CASE'],
+  });
+}
+
+const testOverrideRules = {
+  '@typescript-eslint/explicit-function-return-type': 'off',
+  '@typescript-eslint/explicit-module-boundary-types': 'off',
+};
+
+/** @type {import('eslint').Config} */
+module.exports = {
+  env: {
+    node: true,
+  },
+  plugins: [
+    '@programic',
+    'vitest',
+  ],
+  extends: [
+    // 'plugin:@programic/tailwindcss',
+    'plugin:@programic/vue-typescript',
+  ],
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project: tsConfigPath,
+      },
+    },
+    // tailwindcss: {
+    //   config: tailwindConfigPath,
+    // },
+    programic: {
+      vue: {
+        extendedComputedProperties: {
+          '@vueuse/core': [
+            'computedAsync',
+            'computedEager',
+            'computedInject',
+            'computedWithControl',
+            'reactiveComputed',
+          ],
+        },
+        extendedWatchers: {
+          '@vueuse/core': [
+            'until',
+            'watchArray',
+            'watchAtMost',
+            'watchDebounced',
+            'watchDeep',
+            'watchIgnorable',
+            'watchImmediate',
+            'watchOnce',
+            'watchPausable',
+            'watchThrottled',
+            'watchTriggerable',
+            'watchWithFilter',
+            'whenever',
+          ],
+        },
+        extendedHooks: {
+          'vue-router': [
+            'onBeforeRouteLeave',
+            'onBeforeRouteUpdate',
+          ],
+        },
+      },
+    },
+  },
+  parserOptions: {
+    ecmaVersion: 2020,
+    parser: '@typescript-eslint/parser',
+    extraFileExtensions: ['.vue'],
+    project: tsConfigPath,
+  },
+  overrides: [
+    {
+      ...defaultTypescriptOverride,
+      files: ['**/*.spec.ts', '**/tests/**', '**/tests/**'],
+      rules: {
+        ...typescriptOverride.rules,
+        ...testOverrideRules,
+        'no-promise-executor-return': 'off',
+        'import/no-unresolved': 'off',
+        '@typescript-eslint/naming-convention': namingConventionsTestFileRule,
+        'unicorn/prevent-abbreviations': ['error', {
+          checkShorthandProperties: true,
+          checkProperties: true,
+          ignore: [
+            /^src$/i,
+            // Vue specific ignores
+            /attrs|params|prop|props|ref|refs/i,
+          ],
+        }],
+        'vue/one-component-per-file': 'off',
+        '@typescript-eslint/no-unsafe-member-access': 'off',
+        '@typescript-eslint/no-floating-promises': 'off',
+        '@typescript-eslint/no-unsafe-call': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        '@programic/typescript-explicit-function-return-type': 'off',
+        '@programic/typescript-explicit-module-boundary-types': 'off',
+        'vitest/consistent-test-it': ['error', { fn: 'it' }],
+        'vitest/no-alias-methods': 'error',
+        'vitest/no-conditional-expect': 'error',
+        'vitest/no-conditional-in-test': 'error',
+        'vitest/no-conditional-tests': 'error',
+        'vitest/no-disabled-tests': 'error',
+        'vitest/no-done-callback': 'error',
+        'vitest/no-duplicate-hooks': 'error',
+        'vitest/no-focused-tests': 'error',
+        'vitest/no-standalone-expect': 'error',
+        'vitest/no-test-return-statement': 'error',
+        'vitest/prefer-called-with': 'error',
+        'vitest/prefer-lowercase-title': 'error',
+        'vitest/prefer-strict-equal': 'error',
+        'vitest/prefer-to-be-object': 'error',
+        'vitest/prefer-to-have-length': 'error',
+      },
+    },
+    {
+      ...defaultTypescriptOverride,
+      files: ['**/*.stories.ts'],
+      rules: {
+        ...typescriptOverride.rules,
+        '@typescript-eslint/no-unsafe-assignment': 'off',
+        '@typescript-eslint/no-unsafe-member-access': 'off',
+        '@typescript-eslint/no-unsafe-call': 'off',
+        '@typescript-eslint/no-unsafe-argument': 'off',
+        '@typescript-eslint/no-unsafe-return': 'off',
+        'unicorn/prevent-abbreviations': ['error', {
+          checkShorthandProperties: true,
+          checkProperties: true,
+          ignore: [
+            /^src$/i,
+            // Vue specific ignores
+            /arg/i,
+          ],
+        }],
+      },
+    },
+    {
+      ...defaultTypescriptOverride,
+      files: ['**/__mocks__/*.ts', '**/mocks/**/*.ts'],
+      rules: {
+        ...typescriptOverride.rules,
+        ...testOverrideRules,
+      },
+    }
+  ],
+  rules: {
+    'id-length': ['error', {
+      min: 2,
+      properties: 'always',
+      exceptions: ['t', 'rt', 'd', 'n', 'te', 'tm', 'x', 'y'],
+    }],
+    'import/no-extraneous-dependencies': ['error', {
+      devDependencies: ["**/tests/**", "**/__tests__/**"],
+    }],
+    // 'tailwindcss/no-custom-classname': ['error', {
+    //   whitelist: ['^app-.+$', 'stroke-3', 'scrollbar-primary'],
+    // }],
+    'vitest/consistent-test-filename': ['error', {
+      pattern: '.*\\.spec\\.[tj]sx?$',
+      allTestPattern: '.*\\.(test|spec)\\.[tj]sx?$',
+    }],
+    '@typescript-eslint/no-floating-promises': 'off',
+    'vue/no-v-text-v-html-on-component': 'off',
+    'vue/no-ref-object-destructure': 'off',
+    'import/no-cycle': 'off',
+    'import/no-unresolved': 'off',
+  },
+};

package/src/config/tailwind/config.cjs

@@ -0,0 +1,229 @@
+const screens = require('./screens.json');
+const svgToDataUri = require('mini-svg-data-uri');
+const plugin = require('tailwindcss/plugin');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './components/**/*.{js,vue,ts}',
+    './main.ts',
+    './App.vue'
+  ],
+  theme: {
+    container: {
+      center: true,
+
+      screens: {
+        sm: '600px',
+        md: '728px',
+        lg: '984px',
+        xl: '1240px',
+        '2xl': '1400px',
+      },
+    },
+    fontSize: {
+      '4xl': ['1.953rem', {
+        lineHeight: '2rem',
+      }],
+      '3xl': ['1.563rem', {
+        lineHeight: '2rem',
+      }],
+      '2xl': ['1.25rem', {
+        lineHeight: '1.75rem',
+      }],
+      xl: ['1.125rem', {
+        lineHeight: '1.75rem',
+      }],
+      lg: ['1rem', {
+        lineHeight: '1.5rem',
+      }],
+      base: ['0.875rem', {
+        lineHeight: '1.375rem',
+      }],
+      sm: ['0.75rem', {
+        lineHeight: '1rem',
+      }],
+      xs: ['0.625rem', {
+        lineHeight: '0.75rem',
+      }],
+      xxs: ['0.5rem', {
+        lineHeight: '0.6rem',
+      }],
+    },
+    fontFamily: {
+      sans: 'Inter',
+      serif: 'Inter',
+      mono: 'Inter',
+    },
+    colors: {
+      current: 'currentColor',
+      transparent: 'transparent',
+      primary: 'rgb(var(--color-primary) / <alpha-value>)',
+      'primary-active': 'rgb(var(--color-primary-active) / <alpha-value>)',
+      secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
+      'secondary-active': 'rgb(var(--color-secondary-active) / <alpha-value>)',
+      black: {
+        black: '#000000',
+        DEFAULT: '#1E1E1E',
+        50: '#FCFCFD',
+        100: '#202020',
+      },
+      white: '#FFFFFF',
+      error: '#dc2626',
+      zinc: {
+        50:  '#FAFAFA',
+        100: '#F4F4F5',
+        200: '#E4E4E7',
+        300: '#D4D4D8',
+        400: '#A1A1AA',
+        500: '#71717A',
+        600: '#52525B',
+        700: '#3F3F46',
+        800: '#27272A',
+        900: '#18181B',
+      },
+      yellow: {
+        50:  '#fefce8',
+        100: '#fef9c3',
+        200: '#fef08a',
+        300: '#fde047',
+        400: '#facc15',
+        500: '#eab308',
+        600: '#ca8a04',
+        700: '#a16207',
+        800: '#854d0e',
+        900: '#713f12',
+      },
+      red: {
+        50:  '#fef2f2',
+        100: '#fee2e2',
+        200: '#fecaca',
+        300: '#fca5a5',
+        400: '#f87171',
+        500: '#ef4444',
+        600: '#dc2626',
+        700: '#b91c1c',
+        800: '#991b1b',
+        900: '#7f1d1d',
+      },
+      green: {
+        50:  '#f0fdf4',
+        100: '#dcfce7',
+        200: '#bbf7d0',
+        300: '#86efac',
+        400: '#4ade80',
+        500: '#22c55e',
+        600: '#16a34a',
+        700: '#15803d',
+        800: '#166534',
+        900: '#14532d',
+      },
+      indigo: {
+        200: '#C7D2FE',
+        600: '#4F46E5',
+        900: '#162C87',
+      },
+      lime: {
+        200: '#D9F99D',
+        600: '#65A30D',
+      },
+      orange: {
+        200: '#FED7AA',
+        500: '#E25C2A',
+      },
+      sky: {
+        200: '#BAE6FD',
+        600: '#0284C7',
+      },
+      teal: {
+        200: '#99F6E4',
+        600: '#0D9488',
+      },
+      violet: {
+        200: '#DDD6FE',
+        600: '#7C3AED',
+      },
+      blue: {
+        200: '#BFDBFE',
+        600: '#2563EB',
+      },
+      gold: {
+        200: '#FDE68A',
+        600: '#D97706',
+      },
+      pink: {
+        200: '#FBCFE8',
+        600: '#DB2777',
+      },
+    },
+    screens,
+    extend: {
+      fontSize: {
+        'sm': ['0.875rem', {
+          lineHeight: '1.375rem',
+        }],
+        'xxs': ['0.625rem', {
+          lineHeight: '0.75rem',
+        }],
+      },
+      spacing: {
+        '4.5': '1.2rem',
+        13: '3.25rem',
+        18: '4.5rem',
+        110: '27.5rem',
+        141: '34.375rem',
+      },
+      height: {
+        18: '4.5rem',
+      },
+      width: {
+        110: '27.5rem',
+        141: '34.375rem',
+        fullPlus8: 'calc(100% + 2rem)',
+      },
+      maxHeight: {
+        160: '40rem',
+      },
+      borderWidth: {
+        '4.5': '1.2rem',
+        '6': '6px',
+        10: '10px',
+        12: '12px',
+      },
+      scale: {
+        flip: '-1',
+      },
+      strokeWidth: {
+        3: '3px',
+        4: '4px',
+      },
+      dropShadow: {
+        card: '0px 4px 2px rgba(21, 21, 21, 0.08)',
+        cardhighlight: '1px 4px 3px rgba(21, 21, 21, 0.16)',
+      },
+      transitionProperty: {
+        'font': 'font-weight, font-size, line-height',
+      },
+      zIndex: {
+        '100': 100,
+      },
+      backgroundImage: (theme) => ({
+        'multiselect-caret': `url("${svgToDataUri(
+          `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>`,
+        )}")`,
+        'multiselect-spinner': `url("${svgToDataUri(
+          `<svg viewBox="0 0 512 512" fill="${theme('primaryColor')}" xmlns="http://www.w3.org/2000/svg"><path d="M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z"></path></svg>`,
+        )}")`,
+        'multiselect-remove': `url("${svgToDataUri(
+          `<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>`,
+        )}")`,
+        'nature': "url('/images/nature.svg')",
+      }),
+    },
+  },
+  plugins: [
+    plugin(function({ addVariant }) {
+      addVariant('context-menu-open', '.context-menu-open &');
+    })
+  ],
+}

package/src/config/tailwind/screens.json

@@ -0,0 +1,9 @@
+{
+  "xxs": "480px",
+  "xs": "600px",
+  "sm": "768px",
+  "md": "992px",
+  "lg": "1200px",
+  "xl": "1440px",
+  "2xl": "1800px"
+}

package/src/css/build.css

@@ -0,0 +1,52 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import 'tippy.js/dist/tippy.css';
+@import 'vue-toastification/dist/index.css';
+@import './tinymce.css';
+
+svg {
+  stroke-width: 2;
+}
+
+.sentry-error-embed .powered-by { display: none; }
+
+.Vue-Toastification__container .Vue-Toastification__close-button {
+  @apply hidden;
+}
+
+.Vue-Toastification__container .Vue-Toastification__toast {
+  @apply p-4 shadow-none drop-shadow-card rounded-2xl;
+}
+.Vue-Toastification__container .Vue-Toastification__toast--success {
+  @apply text-black bg-green-100;
+}
+.Vue-Toastification__container .Vue-Toastification__toast--error {
+  @apply text-black bg-red-100;
+}
+.Vue-Toastification__container .Vue-Toastification__toast--warning {
+  @apply text-black bg-yellow-100;
+}
+
+.tippy-arrow, .tippy-box {
+  @apply bg-secondary!;
+}
+
+.scrollbar-primary {
+  ::-webkit-scrollbar {
+    @apply w-2.5 rounded-xl
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    @apply bg-zinc-200 rounded-xl;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    @apply bg-primary rounded-xl;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-primary-active;
+  }
+}

package/src/css/main.css

@@ -0,0 +1,4 @@
+@import 'tailwindcss';
+@import './theme.css';
+
+@config '../../tailwind.config.cjs';