Publish docs (#4289)

* fix: tab animation when link

* fix(tabs): what for router link changes

* feat(data-table): add no-data slot

* fix(counter/#4281): disable button in readonly VaCounter

* fix(file-upload/#4282): add file incorrect i18n key

* Fixed scoped class on modal (#4274)

* Try to resolve $t from vue global properties (#4244) (#4256)

* Try to resolve $t from vue global properties #4244

* fix(docs/i18n): move back vuestic key in example

* docs(i18n): remove extra steps in vue-i18n

---------

Co-authored-by: Maksim Nedoshev <m0ksem1337@gmail.com>

* Let VaDateInput accept a null value (#4169)

* Allow a user to have a null date input. Devs will have to handle validation as they normal would with other controlls.

* Updated to use props.clearValue and merged develop back in

* fix(date-input): allow null value

---------

Co-authored-by: Maksim Nedoshev <m0ksem1337@gmail.com>

* fix(i18n): use custom values when translating props

* fix(data-table/story): fix correct no filter data story

* Fixed code audit modal on mobile

---------

Co-authored-by: Maksim Nedoshev <m0ksem1337@gmail.com>
Co-authored-by: Bond-Addict <117455332+Bond-Addict@users.noreply.github.com>

packages/docs/.stylelintrc.js

@@ -8,11 +8,16 @@ module.exports = {
     'color-hex-length': 'long',
     'color-hex-case': 'lower',
     'at-rule-no-unknown': null,
-    'selector-pseudo-class-no-unknown': null,
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['deep'],
+      },
+    ],
     'value-keyword-case': null,
     'length-zero-no-unit': null,
     indentation: [2, { baseIndentLevel: 0 }],
     'selector-pseudo-element-no-unknown': [true, { ignorePseudoElements: ['v-deep'] }],
   },
   ignoreFiles: ['dist/**/*'],
-}
+}

packages/docs/components/HeaderBanner.vue

@@ -169,7 +169,6 @@ const hide = () => {
   }
 
   &__buttons {
-    z-index: 10;
     display: flex;
     align-items: center;
 

packages/docs/components/Recaptcha.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="elementRef" />
+  <div ref="elementRef" :class="{compact}" />
 </template>
 
 <script setup lang='ts'>
@@ -11,6 +11,10 @@ const emit = defineEmits<{
   (e: "error"): void;
 }>()
 
+const breakpoint = useBreakpoint()
+
+const compact = computed(() => breakpoint.current && ['xs'].includes(breakpoint.current))
+
 const elementRef = ref<HTMLElement>();
 const widgetIdRef = ref<string>();
 
@@ -45,5 +49,8 @@ watchEffect(() => {
 </script>
 
 <style lang="scss" scoped>
-
+.compact {
+  transform: scale(0.77);
+  transform-origin: left;
+}
 </style>

packages/docs/components/landing/forms/RequestAuditForm.vue

@@ -31,16 +31,16 @@
         placeholder="Email"
         required
         name="Email"
-        class="w-full mt-3"
+        class="w-full mt-3 form__input"
       />
       <VaTextarea
         v-model="description"
         placeholder="Project link, tech stack, and details"
         required
         name="Field 3"
-        class="w-full mt-3"
+        class="w-full mt-3 form__input"
         :resize="false"
-        :max-rows="4"
+        :max-rows="3"
       />
       <Recaptcha
         ref="recaptchaRef"
@@ -56,7 +56,7 @@
       <div v-if="submitError" class="form__notice form__notice--error mt-6">
         Oops! Something went wrong while submitting the form. Please try again or contact us directly at <a href="mailto:hello@epicmax.co" target="_new">hello@epicmax.co</a>. We're here to help and ensure your inquiry is handled promptly.
       </div>
-      <div v-else class="form__notice mt-6">
+      <div v-else class="form__notice mt-6 xs:mt-3">
         Click "Submit!" to consent to processing your data by Epicmax Georgia LLC for marketing purposes, including sending emails. For details see our <a href="https://www.iubenda.com/privacy-policy/90200659" target="_blank">Privacy Policy</a>
       </div>
     </div>
@@ -137,18 +137,24 @@ const submitForm = async () => {
     max-width: 100%;
   }
 
-  &__text {
+  &__text,
+  &__input {
     font-size: 0.9rem;
   }
 
   &__title {
     margin-top: 20px;
     margin-bottom: 34px;
+
+    @include xs(margin-top, 0);
+    @include xs(margin-bottom, 12px);
   }
 
   &__notice {
-    font-size: 13px;
     color: var(--va-secondary);
+    font-size: 13px;
+
+    @include xs(font-size, 10px);
   }
 
   &__notice--error {
@@ -160,5 +166,7 @@ h3 {
   @include subtitle-font();
 
   font-size: 2.5rem !important;
+
+  @include xs(font-size, 1.75rem !important);
 }
 </style>

packages/docs/composables/useRecaptcha.ts

@@ -3,18 +3,20 @@ import { isServer } from 'vuestic-ui/src/utils/ssr'
 
 let addedScript = false;
 
-interface Recaptcha {
+export interface RecaptchaRenderParams {
+  sitekey: string;
+  theme?:	'dark' | 'light';
+  size?:	'compact' | 'normal';
+  tabindex?: number;
+  callback?: (token: string) => void;
+  'expired-callback'?: () => void;
+  'error-callback'?: () => void;
+}
+
+export interface Recaptcha {
   render(
     container: string | HTMLElement,
-    parameters: {
-      sitekey: string;
-      theme?:	'dark' | 'light';
-      size?:	'compact' | 'normal';
-      tabindex?: number;
-      callback?: (token: string) => void;
-      'expired-callback'?: () => void;
-      'error-callback'?: () => void;
-    }
+    parameters: RecaptchaRenderParams
   ): string;
   reset(widgetId?: string): void;
 }

packages/docs/page-config/services/i18n/code/runtime.ts

@@ -11,6 +11,8 @@ const messages = {
   },
 };
 
+const { mergeIntoConfig } = useI18nConfig()
+
 watch(locale, (newLocale) => {
   mergeIntoConfig(messages[newLocale]);
 });

packages/docs/page-config/services/i18n/index.ts

@@ -16,17 +16,13 @@ export default definePageConfig({
     block.paragraph("Default messages can be set in `GlobalConfig`. Config is fully typed, so you can use autocomplete to find messages you want to change."),
     block.code("setup"),
 
-    block.subtitle("Changing language in runtime"),
-    block.paragraph("If you have more than one language, you can update messages in runtime with `useI18nConfig` hook from VuesticUI."),
-
-    block.code("runtime"),
-
     block.subtitle("Using with vue-i18n"),
-    block.paragraph("If you use vue-i18n we can recommend to store VuesticUI messages under specific key"),
+    block.paragraph("Vuestic integrates with vue-i18n and looks for translations under the key `vuestic.{key}` so you can override the default messages directly in vue-i18n translations with config structure like this:"),
+    block.code("vue-i18n-config"),
+    block.paragraph("If key can't be resolved through vue-i18n we fallback to own config messages."),
 
-    block.code("vue-i18n-runtime"),
-    block.collapse("Recommended config structure", [
-      block.code("vue-i18n-config"),
-    ]),
+    block.subtitle("Changing language in runtime"),
+    block.paragraph("Translations can be used without vue-i18n in case if you use custom solution. You can change translations in runtime by using `useI18nConfig` composable."),
+    block.code("runtime"),
   ],
 });

packages/ui/.stylelintrc.js

@@ -11,6 +11,12 @@ module.exports = {
     'value-list-max-empty-lines': 1,
     'function-calc-no-unspaced-operator': null,
     'value-keyword-case': null,
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['deep'],
+      },
+    ],
     indentation: [2, { baseIndentLevel: 0 }],
   },
   ignoreFiles: ['dist/**/*', 'storybook-static/**/*'],

packages/ui/src/components/va-counter/VaCounter.stories.ts

@@ -181,15 +181,17 @@ export const DecreaseIcon = () => ({
 
 export const Disabled = () => ({
   components: { VaCounter },
+  data () { return { value: 0 } },
   template: `
-    <VaCounter disabled />
+    <VaCounter v-model="value" disabled />
   `,
 })
 
 export const Readonly = () => ({
   components: { VaCounter },
+  data () { return { value: 0 } },
   template: `
-    <VaCounter readonly />
+    <VaCounter v-model="value" readonly />
   `,
 })
 

packages/ui/src/components/va-counter/VaCounter.vue

@@ -268,11 +268,11 @@ const isMaxReached = computed(() => {
 const tabIndexComputed = computed(() => props.disabled ? -1 : 0)
 
 const isDecreaseActionDisabled = computed(() => (
-  isMinReached.value || props.disabled
+  isMinReached.value || props.disabled || props.readonly
 ))
 
 const isIncreaseActionDisabled = computed(() => (
-  isMaxReached.value || props.disabled
+  isMaxReached.value || props.disabled || props.readonly
 ))
 
 const decreaseCount = () => {

packages/ui/src/components/va-data-table/VaDataTable.stories.ts

@@ -197,3 +197,34 @@ export const ExpandableRow = () => ({
   </VaDataTable>
   `,
 })
+
+export const NoDataText = () => ({
+  components: { VaDataTable, VaPagination },
+  data: () => ({ columns, items }),
+
+  template: `
+    <VaDataTable :items="[]" :columns="columns" no-data-html="Test no data" />
+  `,
+})
+
+export const NoDataTextSlot = () => ({
+  components: { VaDataTable, VaPagination },
+  data: () => ({ columns, items }),
+
+  template: `
+    <VaDataTable :items="[]" :columns="columns">
+      <template #no-data>
+        <div class="text-center">No data Test</div>
+      </template>
+    </VaDataTable>
+  `,
+})
+
+export const NoFilteredDataText = () => ({
+  components: { VaDataTable, VaPagination },
+  data: () => ({ columns, items }),
+
+  template: `
+    <VaDataTable :items="[{ name: 'BbB' }]" :columns="columns" filter="Aaa" no-data-filtered-html="Test no filtered data" />
+  `,
+})

packages/ui/src/components/va-data-table/VaDataTable.vue

@@ -76,8 +76,11 @@
                 <td
                   class="va-data-table__table-td no-data"
                   colspan="99999"
-                  v-html="noDataHtml"
-                />
+                >
+                  <slot name="no-data">
+                    <div v-html="noDataHtml" />
+                  </slot>
+                </td>
               </tr>
 
               <tr
@@ -88,8 +91,13 @@
                 <td
                   class="va-data-table__table-td no-data"
                   colspan="99999"
-                  v-html="noDataFilteredHtml"
-                />
+                >
+                  <slot name="no-filtered-data">
+                    <slot name="no-data">
+                      <div v-html="noDataFilteredHtml" />
+                    </slot>
+                  </slot>
+                </td>
               </tr>
 
               <template

packages/ui/src/components/va-date-input/VaDateInput.stories.ts

@@ -221,3 +221,16 @@ export const AsyncDate = () => ({
   <VaDateInput v-model="stringValueUTC" />
   `,
 })
+
+export const NullValue = () => ({
+  components: { VaDateInput },
+  data () {
+    return {
+      value: null,
+    }
+  },
+  template: `
+  [[value]]: {{ value === null ? 'null' : value }}
+  <VaDateInput v-model="value" clearable manual-input clear-value="null" />
+  `,
+})

packages/ui/src/components/va-date-input/VaDateInput.vue

@@ -126,7 +126,7 @@ const props = defineProps({
   ...useValidationProps as ValidationProps<DateInputModelValue>,
   ...useComponentPresetProp,
 
-  clearValue: { type: Date as PropType<DateInputModelValue>, default: undefined },
+  clearValue: { type: undefined as unknown as PropType<any>, default: undefined },
   modelValue: { type: [Date, Array, Object, String, Number] as PropType<DateInputModelValue> },
 
   resetOnClose: { type: Boolean, default: true },
@@ -239,7 +239,7 @@ const modelValueToString = (value: DateInputModelValue): string => {
     return ''
   }
 
-  throw new Error('VaDatePicker: Invalid model value. Value should be Date, Date[] or { start: Date, end: Date | null }, got ' + typeof value)
+  return ''
 }
 
 const {
@@ -263,10 +263,10 @@ const valueText = computed(() => {
 const onInputTextChanged = ({ target }: Event) => {
   if (props.disabled) { return }
 
-  const parsedValue = parseDateInputValue((target as HTMLInputElement).value)
+  const inputValue = (target as HTMLInputElement).value
 
   if (isValid.value) {
-    valueComputed.value = parsedValue
+    valueComputed.value = inputValue === '' ? props.clearValue : parseDateInputValue(inputValue)
   }
 }
 

packages/ui/src/components/va-file-upload/VaFileUpload.stories.ts

@@ -1,12 +1,32 @@
 import { defineComponent } from 'vue'
-import VaFileUpload from './VaFileUpload.demo.vue'
+import VaFileUpload from './VaFileUpload.vue'
+import VaFileUploadDemo from './VaFileUpload.demo.vue'
+import { defineStory } from '../../../.storybook/types'
 
 export default {
   title: 'VaFileUpload',
   component: VaFileUpload,
 }
 
-export const Default = defineComponent({
-  components: { VaFileUpload },
-  template: '<VaFileUpload/>',
+export const Default = () => defineComponent({
+  components: { VaFileUploadDemo },
+  template: '<VaFileUploadDemo/>',
+})
+
+export const FileType = defineStory({
+  story: () => ({
+    components: { VaFileUpload },
+    template: '<VaFileUpload file-types="jpg,png" />',
+  }),
+})
+
+export const MultipleFile = defineStory({
+  story: () => ({
+    components: { VaFileUpload },
+    data () { return { files: [] } },
+    template: `
+      {{ files }}
+      <VaFileUpload v-model="files" multiple />
+    `,
+  }),
 })