Merge branch 'develop' into pr/asvae/2925

epicmaxco · Apr 15, 2023 · fab1cbc · fab1cbc
2 parents aaa1b2a + 2b24d10
commit fab1cbc
Show file tree

Hide file tree

Showing 93 changed files with 3,009 additions and 1,476 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug-template.md b/.github/ISSUE_TEMPLATE/bug-template.md
@@ -1,12 +1,12 @@
 ---
 name: Bug Report
 about: Report a bug for Vuestic UI
-labels: ["BUG", "EXTERNAL"]
+labels: ["BUG"]
 assignees: ''
 
 ---
 
-**Vuestic-ui version:** 1.6.3
+**Vuestic-ui version:** 1.6.4
 
 **Steps to reproduce**
 

diff --git a/.github/ISSUE_TEMPLATE/docs-template.md b/.github/ISSUE_TEMPLATE/docs-template.md
@@ -1,7 +1,7 @@
 ---
 name: Docs Report
 about: Help us improve Vuestic UI docs
-labels: ["docs", "EXTERNAL"]
+labels: ["docs"]
 assignees: ''
 
 ---

diff --git a/.github/ISSUE_TEMPLATE/feature-request-template.md b/.github/ISSUE_TEMPLATE/feature-request-template.md
@@ -1,7 +1,7 @@
 ---
 name: Feature Request
 about: Suggest a feature or idea for Vuestic UI
-labels: ["FEATURE", "EXTERNAL"]
+labels: ["FEATURE"]
 assignees: ''
 
 ---

diff --git a/package.json b/package.json
@@ -41,9 +41,10 @@
     "pre-commit": "lerna run --concurrency 1 --stream precommit --since HEAD"
   },
   "resolutions": {
-    "nuxt": "3.1.1",
+    "nuxt": "3.4.0",
+    "semver": "^7.0.0",
     "vue": "3.2.37",
     "vue-router": "4.1.6",
-    "@nuxt/schema": "3.0.0"
+    "@nuxt/schema": "3.4.0"
   }
 }
diff --git a/packages/bundlers-tests/package.json b/packages/bundlers-tests/package.json
@@ -13,7 +13,7 @@
     "test:vite": "docker-compose --profile vite up --build --exit-code-from cypress_vite",
     "test:vite-cjs": "docker-compose --profile vite-cjs up --build --exit-code-from cypress_vite_cjs",
     "test:cli": "docker-compose --profile cli up --build --exit-code-from cypress_cli",
-    "test:nuxt": "yarn test:nuxt-ssr && yarn test:nuxt-spa",
+    "test:nuxt": "yarn test:nuxt-ssr",
     "test:webpack": "docker-compose --profile webpack up --build --exit-code-from cypress_webpack",
     "test:nuxt-ssr": "docker-compose --profile nuxt-ssr up --build --exit-code-from cypress_nuxt_ssr",
     "test:nuxt-spa": "docker-compose --profile nuxt-spa up --build --exit-code-from cypress_nuxt_spa",

diff --git a/packages/docs/components/landing/StarsButton.vue b/packages/docs/components/landing/StarsButton.vue
@@ -1,21 +1,19 @@
 <template>
-  <client-only>
-    <va-button
-      :href="url"
-      size="small"
-      target="blank"
-      color="textPrimary"
-      class="stars-button"
-    >
-      <template #prepend>
-        <va-icon
-          name="star_empty"
-          size="small"
-        />
-      </template>
-      {{ stars }}
-    </va-button>
-  </client-only>
+  <va-button
+    :href="url"
+    size="small"
+    target="blank"
+    color="textPrimary"
+    class="stars-button"
+  >
+    <template #prepend>
+      <va-icon
+        name="star_empty"
+        size="small"
+      />
+    </template>
+    {{ stars }}
+  </va-button>
 </template>
 
 <script lang="ts">

diff --git a/packages/docs/components/layout/Header.vue b/packages/docs/components/layout/Header.vue
@@ -31,7 +31,8 @@
             />
           </a>
         </NuxtLink>
-        <algolia-search class="header__searchbar" />
+        <span style="font-size: 1rem" class="ml-3 opacity-50" title="will be back in a bit">Search under reassembly 🤖</span>
+<!--        <algolia-search class="header__searchbar" />-->
       </template>
       <template #right>
         <va-button

diff --git a/packages/docs/locales/en.json b/packages/docs/locales/en.json
@@ -221,7 +221,13 @@
     },
     "VaForm": {
       "props": {
-        "autofocus": "Focus on first form-component <!-- TODO Add link --> on render"
+        "autofocus": "Focus on first form-component on render",
+        "hideErrorMessages": "Hide error messages for all form-components. Can be used if you want to display messages separately",
+        "hideErrors": "Do not highlight invalid form-components",
+        "hideLoading": "Do not show loading state for all form-components",
+        "immediate": "Validate form-components on mount. By default validation is performed on first user interaction with form-components",
+        "modelValue": "Used to indicate if form is valid or not. Can be used to disable submit button for example",
+        "stateful": "Makes all form-components stateful. By default form-components are stateless and you need to pass `v-model` to them to make them stateful"
       },
       "events": {
         "validation": "Triggered on validation update"
@@ -1538,6 +1544,11 @@
         "lastLineWidth": "Width of last line in `px`, `rem`, `em`, `%` if `variant` is `text`",
         "tag": "Skeleton tag."
       }
+    },
+    "VaConfig": {
+      "props": {
+        "components": "Components configuration object."
+      }
     }
   },
   "menu": {
@@ -1677,6 +1688,7 @@
     "unocss": "UnoCSS Integration",
     "testing": "Testing",
     "value": "Value",
+    "config": "Config",
     "confirm": "Confirm"
   },
   "all": {
@@ -4283,7 +4295,8 @@
     "vaConfig": {
       "title": "Scoped config",
       "subtitle": "You can use the `<va-config>` component to overwrite the default props values for the components inside that tag. Take a look at the demo below:",
-      "explain": "Look at the code. In this demo we have changed the default color for all the `VaButton` and `VaIcon` inside the `VaConfig`. We also have passed a different value to the third button's `color` prop (direct component's prop takes precedence over the one specified on the `VaConfig`)."
+      "explain": "Look at the code. In this demo we have changed the default color for all the `VaButton` and `VaIcon` inside the `VaConfig`. We also have passed a different value to the third button's `color` prop (direct component's prop takes precedence over the one specified on the `VaConfig`).",
+      "vaConfigComponentLink": "Find out more about VaConfig component"
     },
     "priority": {
       "title": "Props values priority",
@@ -4639,6 +4652,10 @@
         "title": "Expandable rows",
         "text": "Each row could can be additionally expanded by providing `expandableRow` slot. Slot expansion is triggered by `row.toggleExpandableRow` slot property"
       },
+      "inlineEditing": {
+        "title": "Inline Editing",
+        "text": "Inline cell editing example. We provide a `#cell` slot for each column. The [VaValue](/ui-elements/value) component provides a boolean variable, which we can use to show/hide input. To change cell data we need access it by reference using `row.rowData[item.key]` - this way vue can track reactivity. Additional CSS is used to make the table look better. This way you can use [VaInput](/ui-elements/input), [VaSelect](/ui-elements/select) or any other component to edit data inline."
+      },
       "other": {
         "title": "Other",
         "text": [

diff --git a/packages/docs/locales/ru.json b/packages/docs/locales/ru.json
@@ -1427,6 +1427,11 @@
         "default": "Слот для шаблона элемента списка.",
         "content": "Слот для перезаписи шаблона компонента (для сложных интеграция, когда стандартная структура не подходит)."
       }
+    },
+    "VaConfig": {
+      "props": {
+        "components": "Объект c конфигурацией компонентов."
+      }
     }
   },
   "menu": {
@@ -4171,7 +4176,8 @@
     "vaConfig": {
       "title": "Scoped конфигурация",
       "subtitle": "Мы можем использовать VaConfig для переопределения свойств компонентов внутри `<va-config></va-config>`. Конфигурация компонентов для всех компонентов внутри тега `va-config` будет перезаписана на значение свойства `components`. Давайте посмотрим на демонстрацию ниже:",
-      "explain": "Посмотрите на код. В этой демонстрации мы изменили цвет по умолчанию для всех наших компонентов `VaButton` и `VaIcons`. Также мы передаем свойство третьей кнопке, значение которой имеет более высокий приоритет, чем в scoped конфигурации."
+      "explain": "Посмотрите на код. В этой демонстрации мы изменили цвет по умолчанию для всех наших компонентов `VaButton` и `VaIcons`. Также мы передаем свойство третьей кнопке, значение которой имеет более высокий приоритет, чем в scoped конфигурации.",
+      "vaConfigComponentLink": "Подробнее про VaConfig компонент"
     },
     "priority": {
       "title": "Приоритеты использования значений",
@@ -4524,6 +4530,14 @@
         "title": "Виртуальный скроллинг",
         "text": "Свойство `virtual-scroller` включает виртуальный скроллинг для строк `tbody` ([дополнительная информация](/ui-elements/virtual-scroller)). Обратите внимание, что в данном режиме отключен `CSS transition` из-за возможных проблем с производительностью."
       },
+      "expandableRow": {
+        "title": "Раскрывающиеся строки",
+        "text": "Каждая строка может быть дополнительно расширена с помощью слота `expandableRow`. Расширение слота запускается свойством слота `row.toggleExpandableRow`."
+      },
+      "inlineEditing": {
+        "title": "Встроенное редактирование",
+        "text": "Пример добавления функционала встроенного редактирования. Мы используем `#cell` слот для каждой колонки. [VaValue](/ui-elements/value) предоставляет значение, которое мы используем чтобы прятать или показывать поле ввода. Чтобы изменить данные, нужно обращаться к ним по ссылке таким образом `row.rowData[item.key]` - так vue может отслеживать изменения. Дополнительный CSS используется для того, чтобы таблица выглядела лучше. Таким образом вы можете использовать [VaInput](/ui-elements/input), [VaSelect](/ui-elements/select) или любой другой компонент для встроенного редактирования данных."
+      },
       "other": {
         "title": "Другое",
         "text": [

diff --git a/packages/docs/modules/banner/module.ts b/packages/docs/modules/banner/module.ts
@@ -19,6 +19,8 @@ export default defineNuxtModule<any>({
   },
 
   setup(options) {
+    return // Disabled for railway
+
     addPluginTemplate({
       src: resolve(__dirname, './runtime/banner.ts'),
 

diff --git a/packages/docs/modules/page-config/composables/useCompiler.ts b/packages/docs/modules/page-config/composables/useCompiler.ts
@@ -1,3 +1,4 @@
+import MagicString from 'magic-string';
 import { addVitePlugin } from '@nuxt/kit';
 import { createFilter } from '@rollup/pluginutils'
 import { createImporter } from '../compiler/create-importer'
@@ -23,16 +24,22 @@ export const useCompiler = (options: any) => {
       importer.importNamed('definePageConfig', (await this.resolve(runtimePath))!.id)
       importer.importNamed('defineManualApi', (await this.resolve(runtimePath))!.id)
 
+      const newCode = new MagicString(code)
+
       try {
-        code = await transform(code, importer)
+        newCode.overwrite(0, code.length, await transform(code, importer))
       } catch (e: any) {
         throw new Error(`Error transforming page-config: ${id}\n${e.message}`)
       }
 
-      code += '\n' + await exportTranslations(importer, id)
+      newCode.append('\n' + await exportTranslations(importer, id))
+      newCode.prepend(importer.imports)
 
       try {
-        return importer.imports + code
+        return {
+          code: newCode.toString(),
+          map: newCode.generateMap({ hires: true }),
+        }
       } catch (e: any) {
         throw new Error(`Error resolving imports in page-config: ${id}\n${e.message}`)
       }

diff --git a/packages/docs/modules/page-config/runtime/PageConfig.vue b/packages/docs/modules/page-config/runtime/PageConfig.vue
@@ -9,6 +9,10 @@ const props = defineProps({
     required: true
   }
 })
+
+if (props.pageConfig.head) {
+  useHead(props.pageConfig.head)
+}
 </script>
 
 <template>

diff --git a/packages/docs/modules/page-config/runtime/index.ts b/packages/docs/modules/page-config/runtime/index.ts
@@ -1,4 +1,5 @@
 import { DefineComponent } from 'vue'
+import { MetaObject } from '#head';
 import example from '../blocks/example'
 import title from '../blocks/title'
 import paragraph from '../blocks/paragraph'
@@ -53,6 +54,8 @@ export type Block = ReturnType<GlobalBlock[keyof typeof block]>
 export type ConcreteBlock<T extends string, B = Block> = B extends { type: T } ? B : never
 
 export type PageConfigOptions = {
+  head?: MetaObject,
+
   meta?: {
     title?: string;
     // TODO: Add more

diff --git a/packages/docs/modules/page-config/runtime/usePageConfig.ts b/packages/docs/modules/page-config/runtime/usePageConfig.ts
@@ -14,7 +14,13 @@ const files = Object.entries(import.meta.glob<PageConfigJSModule>('@/page-config
   }, {} as Record<string, () => Promise<PageConfigJSModule>>)
 
 const getConfig = async (name: string) => {
-  const file = files[unref(name)]
+  name = unref(name)
+
+  if (name.endsWith('/')) {
+    name = name.slice(0, -1)
+  }
+
+  const file = files[name]
 
   if (!file) {
     console.log(`Page config ${name} not found`)

diff --git a/packages/docs/modules/vuestic.ts b/packages/docs/modules/vuestic.ts
@@ -24,7 +24,7 @@ export default defineNuxtModule<VuesticOptions>({
 
   setup (options, nuxt) {
     // Fix CSS variables made by v-bind in component: they're not rendered in cjs (SSG).
-    addVitePlugin(componentVBindFix())
+    addVitePlugin(componentVBindFix({ sourcemap: false }))
 
     nuxt.options.alias['@vuestic/ag-grid-theme'] = resolve(__dirname, '../../ag-grid-theme/src/styles/index.scss');
     nuxt.options.alias['vuestic-ui/styles/typography.css'] = resolve(__dirname, '../../ui/src/styles/typography/typography.scss');

diff --git a/packages/docs/nuxt.config.ts b/packages/docs/nuxt.config.ts
@@ -5,16 +5,6 @@ export default defineNuxtConfig({
       link: [
         { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
         { rel: 'icon', type: 'image/png', href: '/favicon.png' },
-        { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
-        { rel: 'stylesheet', href: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap" },
-        { rel: 'stylesheet', href: "https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400&display=swap" },
-        { rel: 'stylesheet', href: "https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" },
-        { rel: 'stylesheet', href: "https://fonts.googleapis.com/icon?family=Material+Icons+Outlined&display=swap" },
-      ],
-
-      script: [
-        { crossorigin: 'anonymous', src: 'https://kit.fontawesome.com/5460c87b2a.js' },
-        { type: 'module', src: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js' },
       ],
 
       meta: [
@@ -76,21 +66,18 @@ export default defineNuxtConfig({
     },
   },
 
-  // TODO: hydration mismatch issues; tailwind doesn't work properly
-  // ssr: false,
-  // nitro: {
-  //   prerender: {
-  //     routes: ['/'],
-  //     ignore: ['/*']
-  //   }
-  // },
+  ssr: true,
+  nitro: {
+    compressPublicAssets: true,
+  },
 
   modules: [
     // './modules/banner',
     './modules/vuestic',
     './modules/page-config',
     // "./modules/i18n",
     // TODO: remove after i18n is released https://github.com/nuxt-modules/i18n/pull/1712
+    '@nuxtjs/google-fonts',
     '@nuxtjs/i18n-edge',
     './modules/markdown',
     '@nuxtjs/tailwindcss',
@@ -102,6 +89,21 @@ export default defineNuxtConfig({
     fonts: false,
   },
 
+  googleFonts: {
+    preload: true,
+    swap: true,
+    families: {
+      'Source+Sans+Pro': {
+        wght: [400, 600, 700],
+      },
+      'Source+Code+Pro': {
+        wght: [400],
+      },
+      'Material+Icons': true,
+      'Material+Icons+Outlined': true,
+    },
+  },
+
   tailwindcss: {
     config: {
       content: [

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -26,7 +26,7 @@
     "autoprefixer": "^10.4.13",
     "escodegen": "^2.0.0",
     "eslint": "7",
-    "nuxt": "^3.1.1",
+    "nuxt": "latest",
     "postcss": "^7",
     "postcss-custom-properties": "^13.1.1",
     "stylelint": "^13.13.1",
@@ -36,11 +36,12 @@
   },
   "dependencies": {
     "@docsearch/js": "^3.2.1",
+    "@nuxtjs/google-fonts": "^3.0.0-1",
     "@types/acorn": "^6.0.0",
     "acorn": "^8.8.1",
     "codesandbox": "^2.2.3",
+    "highlight.js": "^11.7.0",
     "markdown-it": "^12.3.2",
-    "markdown-it-attrs": "^4.0.0",
-    "highlight.js": "^11.7.0"
+    "markdown-it-attrs": "^4.0.0"
   }
 }
diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts
@@ -206,6 +206,9 @@ export const navigationRoutes: NavigationRoute[] = [
         category: "menu.categories.form",
         name: "form",
         displayName: "menu.form",
+        meta: {
+          badge: "updated",
+        }
       },
       {
         name: "switch",
@@ -359,6 +362,13 @@ export const navigationRoutes: NavigationRoute[] = [
           badge: "new",
         }
       },
+      {
+        name: "config",
+        displayName: "menu.config",
+        meta: {
+          badge: "new",
+        }
+      },
       {
         name: "hover",
         displayName: "menu.hover",