Merge pull request #1 from SlovakNationalGallery/feat/control-components

MG-18: fist control components

.env.example

@@ -0,0 +1,2 @@
+API_URL=https://test.webumenia.sk/api/v1
+APP_URL=http://localhost:3000

.eslintrc.cjs

@@ -0,0 +1,75 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:prettier-vue/recommended',
+    'prettier',
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  plugins: ['prettier', 'import'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/no-deprecated-slot-attribute': 'off',
+    'vue/multi-word-component-names': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+    'vue/no-v-html': 'off',
+    'no-mixed-operators': 'off',
+    'vue/html-button-has-type': 'error',
+    'unicorn/prefer-includes': 'off',
+    'space-before-function-paren': 'off',
+    'curly': 'error',
+    '@typescript-eslint/no-var-requires': 'off',
+    'vue/valid-v-slot': 'off',
+    'vue/no-unused-vars': 'warn',
+    '@typescript-eslint/quotes': ['error', 'single'],
+    '@typescript-eslint/consistent-type-imports': ['off'],
+    'vue/component-tags-order': [
+      'error',
+      {
+        order: ['template', 'script', 'style'],
+      },
+    ],
+    'vue/define-macros-order': [
+      'error',
+      {
+        order: ['defineProps', 'defineEmits'],
+      },
+    ],
+    'import/order': [
+      'error',
+      {
+        'newlines-between': 'always',
+        'groups': [
+          'index',
+          ['sibling', 'parent'],
+          'internal',
+          'external',
+          'builtin',
+          'object',
+          'type',
+        ],
+      },
+    ],
+    'vue/v-on-event-hyphenation': 'off',
+    'vue/require-default-prop': 'off',
+    'prettier-vue/prettier': ['error'],
+    '@typescript-eslint/ban-ts-comment': 'off',
+  },
+  overrides: [
+    {
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+      env: {
+        jest: true,
+      },
+    },
+  ],
+}

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "trailingComma": "es5",
+  "semi": false,
+  "singleQuote": true,
+  "useTabs": false,
+  "quoteProps": "consistent",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "printWidth": 100
+}

README.md

@@ -1,23 +1,14 @@
-# Nuxt 3 Minimal Starter
-
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+# MORAVSKÁ GALERIE
+https://sbirky.moravska-galerie.cz/
 
 ## Setup
 
+Copy the `.env.example` file to `.env` and fill in the values \
 Make sure to install the dependencies:
 
 ```bash
 # npm
 npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
 ```
 
 ## Development Server
@@ -27,49 +18,4 @@ Start the development server on `http://localhost:3000`:
 ```bash
 # npm
 npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
 ```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -1,5 +1,30 @@
 <template>
-  <div>
-    <NuxtWelcome />
-  </div>
+  <NuxtLoadingIndicator />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
+<script setup lang="ts">
+import 'virtual:svg-icons-register'
+</script>
+<style>
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.4s;
+  transform: translateX(0);
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+.page-leave-to {
+  opacity: 0;
+  transform: translateX(10px);
+}
+
+body {
+  @apply bg-[#D9D9D9];
+}
+</style>

assets/css/popper.css

@@ -0,0 +1,14 @@
+.v-popper__popper {
+    &.v-popper--theme-dropdown {
+        .v-popper__arrow-container {
+
+            @apply hidden;
+        }
+        .v-popper__inner {
+
+            @apply bg-transparent text-inherit shadow-[0_10px_18px_0_rgba(0,0,0,0.10)] border-0 rounded-none;
+        }
+    }
+}
+
+

assets/css/slider.css

@@ -0,0 +1,48 @@
+:root {
+    --slider-bg: #D1D5DB;
+    --slider-connect-bg: theme('colors.primary');
+    --slider-connect-bg-disabled: #9CA3AF;
+    --slider-height: 6px;
+    --slider-vertical-height: 300px;
+    --slider-radius: 9999px;
+
+    --slider-handle-bg: #fff;
+    --slider-handle-border: 0;
+    --slider-handle-width: 16px;
+    --slider-handle-height: 16px;
+    --slider-handle-radius: 9999px;
+    --slider-handle-shadow: 0.5px 0.5px 2px 1px rgba(0,0,0,.32);
+    --slider-handle-shadow-active: 0.5px 0.5px 2px 1px rgba(0,0,0,.42);
+    --slider-handle-ring-width: 3px;
+    --slider-handle-ring-color: #10B98130;
+
+    --slider-tooltip-font-size: 0.875rem;
+    --slider-tooltip-line-height: 1.25rem;
+    --slider-tooltip-font-weight: 600;
+    --slider-tooltip-min-width: 20px;
+    --slider-tooltip-bg: theme('colors.primary');
+    --slider-tooltip-bg-disabled: #9CA3AF;
+    --slider-tooltip-color: #fff;
+    --slider-tooltip-radius: 5px;
+    --slider-tooltip-py: 2px;
+    --slider-tooltip-px: 6px;
+    --slider-tooltip-arrow-size: 5px;
+    --slider-tooltip-distance: 3px;
+}
+
+.carousel {
+    .carousel__slide {
+        align-items: flex-start;
+    }
+
+    .carousel__pagination-button{
+        padding: 10px;
+         &::after {
+             content: '';
+             width: 10px;
+             height: 10px;
+             border-radius: 50%;
+         }
+    }
+}
+

assets/css/tailwind.css

@@ -0,0 +1,6 @@
+@import "popper.css";
+@import "slider.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;