├── .github ├── ISSUE_TEMPLATE │ ├── bug.yml │ ├── config.yml │ └── feature-request.yml └── workflows │ ├── deploy-demos.yml │ ├── handle-new-issue-comment.yml │ ├── handle-new-issue.yml │ └── issue-staler.yml ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── documentation.html ├── hire-us.html ├── javascript-version ├── .editorconfig ├── .eslintrc-auto-import.json ├── .eslintrc.cjs ├── .gitattributes ├── .gitignore ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc.json ├── .stylelintrc.json ├── .vscode │ ├── anchor-comments.code-snippets │ ├── extensions.json │ ├── settings.json │ ├── vue-ts.code-snippets │ ├── vue.code-snippets │ └── vuetify.code-snippets ├── README.md ├── auto-imports.d.ts ├── components.d.ts ├── index.html ├── jsconfig.json ├── package.json ├── pnpm-lock.yaml ├── public │ ├── favicon.ico │ ├── images │ │ └── avatars │ │ │ └── avatar-1.png │ ├── loader.css │ └── logo.png ├── src │ ├── @core │ │ ├── components │ │ │ ├── MoreBtn.vue │ │ │ ├── ThemeSwitcher.vue │ │ │ └── cards │ │ │ │ ├── CardStatisticsHorizontal.vue │ │ │ │ ├── CardStatisticsVertical.vue │ │ │ │ └── CardStatisticsWithImages.vue │ │ ├── scss │ │ │ ├── base │ │ │ │ ├── _components.scss │ │ │ │ ├── _dark.scss │ │ │ │ ├── _default-layout-w-vertical-nav.scss │ │ │ │ ├── _default-layout.scss │ │ │ │ ├── _index.scss │ │ │ │ ├── _layouts.scss │ │ │ │ ├── _misc.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── _utilities.scss │ │ │ │ ├── _utils.scss │ │ │ │ ├── _variables.scss │ │ │ │ ├── _vertical-nav.scss │ │ │ │ ├── libs │ │ │ │ │ ├── _perfect-scrollbar.scss │ │ │ │ │ └── vuetify │ │ │ │ │ │ ├── _index.scss │ │ │ │ │ │ ├── _overrides.scss │ │ │ │ │ │ └── _variables.scss │ │ │ │ └── placeholders │ │ │ │ │ ├── _default-layout-vertical-nav.scss │ │ │ │ │ ├── _default-layout.scss │ │ │ │ │ ├── _index.scss │ │ │ │ │ ├── _misc.scss │ │ │ │ │ ├── _nav.scss │ │ │ │ │ └── _vertical-nav.scss │ │ │ └── template │ │ │ │ ├── _default-layout-w-vertical-nav.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── _utilities.scss │ │ │ │ ├── _utils.scss │ │ │ │ ├── _variables.scss │ │ │ │ ├── _vertical-nav.scss │ │ │ │ ├── index.scss │ │ │ │ ├── libs │ │ │ │ ├── apex-chart.scss │ │ │ │ └── vuetify │ │ │ │ │ ├── _overrides.scss │ │ │ │ │ ├── _variables.scss │ │ │ │ │ ├── components │ │ │ │ │ ├── _alert.scss │ │ │ │ │ ├── _avatar.scss │ │ │ │ │ ├── _badge.scss │ │ │ │ │ ├── _button.scss │ │ │ │ │ ├── _cards.scss │ │ │ │ │ ├── _checkbox.scss │ │ │ │ │ ├── _chip.scss │ │ │ │ │ ├── _dialog.scss │ │ │ │ │ ├── _expansion-panels.scss │ │ │ │ │ ├── _field.scss │ │ │ │ │ ├── _list.scss │ │ │ │ │ ├── _menu.scss │ │ │ │ │ ├── _otp-input.scss │ │ │ │ │ ├── _pagination.scss │ │ │ │ │ ├── _progress.scss │ │ │ │ │ ├── _radio.scss │ │ │ │ │ ├── _rating.scss │ │ │ │ │ ├── _slider.scss │ │ │ │ │ ├── _snackbar.scss │ │ │ │ │ ├── _switch.scss │ │ │ │ │ ├── _table.scss │ │ │ │ │ ├── _tabs.scss │ │ │ │ │ ├── _textarea.scss │ │ │ │ │ ├── _timeline.scss │ │ │ │ │ ├── _tooltip.scss │ │ │ │ │ └── index.scss │ │ │ │ │ └── index.scss │ │ │ │ ├── pages │ │ │ │ ├── misc.scss │ │ │ │ └── page-auth.scss │ │ │ │ └── placeholders │ │ │ │ ├── _default-layout-vertical-nav.scss │ │ │ │ ├── _index.scss │ │ │ │ ├── _misc.scss │ │ │ │ ├── _nav.scss │ │ │ │ └── _vertical-nav.scss │ │ └── utils │ │ │ ├── colorConverter.js │ │ │ ├── formatters.js │ │ │ ├── helpers.js │ │ │ └── plugins.js │ ├── @layouts │ │ ├── components.js │ │ ├── components │ │ │ ├── TransitionExpand.vue │ │ │ ├── VerticalNav.vue │ │ │ ├── VerticalNavGroup.vue │ │ │ ├── VerticalNavLayout.vue │ │ │ ├── VerticalNavLink.vue │ │ │ └── VerticalNavSectionTitle.vue │ │ ├── enums.js │ │ ├── index.js │ │ ├── styles │ │ │ ├── _classes.scss │ │ │ ├── _default-layout.scss │ │ │ ├── _global.scss │ │ │ ├── _mixins.scss │ │ │ ├── _placeholders.scss │ │ │ ├── _rtl.scss │ │ │ ├── _variables.scss │ │ │ └── index.scss │ │ ├── types.js │ │ └── utils.js │ ├── App.vue │ ├── assets │ │ ├── images │ │ │ ├── avatars │ │ │ │ ├── avatar-1.png │ │ │ │ ├── avatar-10.png │ │ │ │ ├── avatar-11.png │ │ │ │ ├── avatar-12.png │ │ │ │ ├── avatar-13.png │ │ │ │ ├── avatar-14.png │ │ │ │ ├── avatar-15.png │ │ │ │ ├── avatar-2.png │ │ │ │ ├── avatar-3.png │ │ │ │ ├── avatar-4.png │ │ │ │ ├── avatar-5.png │ │ │ │ ├── avatar-6.png │ │ │ │ ├── avatar-7.png │ │ │ │ ├── avatar-8.png │ │ │ │ └── avatar-9.png │ │ │ ├── eCommerce │ │ │ │ └── 2.png │ │ │ ├── logo.svg │ │ │ ├── logos │ │ │ │ ├── american-bank.png │ │ │ │ ├── aviato.png │ │ │ │ ├── aws.png │ │ │ │ ├── bitbank.png │ │ │ │ ├── chrome.png │ │ │ │ ├── citi-bank.png │ │ │ │ ├── digital-ocean.png │ │ │ │ ├── github.png │ │ │ │ ├── google.png │ │ │ │ ├── gumroad.png │ │ │ │ ├── mastercard-label.png │ │ │ │ ├── slack.png │ │ │ │ ├── stripe.png │ │ │ │ └── zipcar.png │ │ │ ├── misc │ │ │ │ └── trophy.png │ │ │ ├── pages │ │ │ │ ├── 1.png │ │ │ │ ├── 2.png │ │ │ │ ├── 3.png │ │ │ │ ├── 404.png │ │ │ │ ├── 5.jpg │ │ │ │ ├── 6.jpg │ │ │ │ ├── auth-v1-mask-dark.png │ │ │ │ ├── auth-v1-mask-light.png │ │ │ │ ├── auth-v1-tree-2.png │ │ │ │ ├── auth-v1-tree.png │ │ │ │ ├── misc-mask-dark.png │ │ │ │ ├── misc-mask-light.png │ │ │ │ └── tree.png │ │ │ └── svg │ │ │ │ ├── checkbox-checked.svg │ │ │ │ ├── checkbox-indeterminate.svg │ │ │ │ ├── checkbox-unchecked.svg │ │ │ │ ├── radio-checked.svg │ │ │ │ └── radio-unchecked.svg │ │ └── styles │ │ │ ├── styles.scss │ │ │ └── variables │ │ │ ├── _template.scss │ │ │ └── _vuetify.scss │ ├── components │ │ ├── ErrorHeader.vue │ │ └── UpgradeToPro.vue │ ├── layouts │ │ ├── blank.vue │ │ ├── components │ │ │ ├── DefaultLayoutWithVerticalNav.vue │ │ │ ├── Footer.vue │ │ │ ├── NavItems.vue │ │ │ ├── NavbarThemeSwitcher.vue │ │ │ └── UserProfile.vue │ │ └── default.vue │ ├── main.js │ ├── pages │ │ ├── [...error].vue │ │ ├── account-settings.vue │ │ ├── card-basic.vue │ │ ├── cards.vue │ │ ├── dashboard.vue │ │ ├── form-layouts.vue │ │ ├── icons.vue │ │ ├── login.vue │ │ ├── register.vue │ │ ├── tables.vue │ │ └── typography.vue │ ├── plugins │ │ ├── iconify │ │ │ ├── build-icons.js │ │ │ ├── index.js │ │ │ └── package.json │ │ ├── pinia.js │ │ ├── router │ │ │ ├── index.js │ │ │ └── routes.js │ │ ├── vuetify │ │ │ ├── defaults.js │ │ │ ├── icons.js │ │ │ ├── index.js │ │ │ └── theme.js │ │ └── webfontloader.js │ ├── utils │ │ └── paginationMeta.js │ └── views │ │ ├── dashboard │ │ ├── AnalyticsAward.vue │ │ ├── AnalyticsBarCharts.vue │ │ ├── AnalyticsDepositWithdraw.vue │ │ ├── AnalyticsSalesByCountries.vue │ │ ├── AnalyticsTotalEarning.vue │ │ ├── AnalyticsTotalProfitLineCharts.vue │ │ ├── AnalyticsTransactions.vue │ │ ├── AnalyticsUserTable.vue │ │ └── AnalyticsWeeklyOverview.vue │ │ ├── pages │ │ ├── account-settings │ │ │ ├── AccountSettingsAccount.vue │ │ │ ├── AccountSettingsNotification.vue │ │ │ └── AccountSettingsSecurity.vue │ │ ├── authentication │ │ │ └── AuthProvider.vue │ │ ├── cards │ │ │ └── card-basic │ │ │ │ ├── CardBasic.vue │ │ │ │ ├── CardNavigation.vue │ │ │ │ └── CardSolid.vue │ │ ├── form-layouts │ │ │ ├── DemoFormLayoutHorizontalForm.vue │ │ │ ├── DemoFormLayoutHorizontalFormWithIcons.vue │ │ │ ├── DemoFormLayoutMultipleColumn.vue │ │ │ ├── DemoFormLayoutVerticalForm.vue │ │ │ └── DemoFormLayoutVerticalFormWithIcons.vue │ │ └── tables │ │ │ ├── DemoSimpleTableBasics.vue │ │ │ ├── DemoSimpleTableDensity.vue │ │ │ ├── DemoSimpleTableFixedHeader.vue │ │ │ ├── DemoSimpleTableHeight.vue │ │ │ └── DemoSimpleTableTheme.vue │ │ └── user-interface │ │ ├── form-layouts │ │ ├── DemoFormLayoutHorizontalForm.vue │ │ ├── DemoFormLayoutHorizontalFormWithIcons.vue │ │ ├── DemoFormLayoutMultipleColumn.vue │ │ ├── DemoFormLayoutVerticalForm.vue │ │ └── DemoFormLayoutVerticalFormWithIcons.vue │ │ ├── tables │ │ ├── TableBasic.vue │ │ ├── TableDark.vue │ │ ├── TableDensity.vue │ │ ├── TableFixedHeader.vue │ │ └── TableHeight.vue │ │ └── typography │ │ ├── TypographyHeadlines.vue │ │ └── TypographyTexts.vue └── vite.config.js ├── package.json ├── pnpm-lock.yaml └── typescript-version ├── .editorconfig ├── .eslintrc.cjs ├── .gitattributes ├── .gitignore ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc.json ├── .stylelintrc.json ├── .vscode ├── anchor-comments.code-snippets ├── extensions.json ├── settings.json ├── vue-ts.code-snippets ├── vue.code-snippets └── vuetify.code-snippets ├── README.md ├── auto-imports.d.ts ├── components.d.ts ├── env.d.ts ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public ├── favicon.ico ├── images │ └── avatars │ │ └── avatar-1.png ├── loader.css └── logo.png ├── shims.d.ts ├── src ├── @core │ ├── components │ │ ├── MoreBtn.vue │ │ ├── ThemeSwitcher.vue │ │ └── cards │ │ │ ├── CardStatisticsHorizontal.vue │ │ │ ├── CardStatisticsVertical.vue │ │ │ └── CardStatisticsWithImages.vue │ ├── scss │ │ ├── base │ │ │ ├── _components.scss │ │ │ ├── _dark.scss │ │ │ ├── _default-layout-w-vertical-nav.scss │ │ │ ├── _default-layout.scss │ │ │ ├── _index.scss │ │ │ ├── _layouts.scss │ │ │ ├── _misc.scss │ │ │ ├── _mixins.scss │ │ │ ├── _utilities.scss │ │ │ ├── _utils.scss │ │ │ ├── _variables.scss │ │ │ ├── _vertical-nav.scss │ │ │ ├── libs │ │ │ │ ├── _perfect-scrollbar.scss │ │ │ │ └── vuetify │ │ │ │ │ ├── _index.scss │ │ │ │ │ ├── _overrides.scss │ │ │ │ │ └── _variables.scss │ │ │ └── placeholders │ │ │ │ ├── _default-layout-vertical-nav.scss │ │ │ │ ├── _default-layout.scss │ │ │ │ ├── _index.scss │ │ │ │ ├── _misc.scss │ │ │ │ ├── _nav.scss │ │ │ │ └── _vertical-nav.scss │ │ └── template │ │ │ ├── _default-layout-w-vertical-nav.scss │ │ │ ├── _mixins.scss │ │ │ ├── _utilities.scss │ │ │ ├── _utils.scss │ │ │ ├── _variables.scss │ │ │ ├── _vertical-nav.scss │ │ │ ├── index.scss │ │ │ ├── libs │ │ │ ├── apex-chart.scss │ │ │ └── vuetify │ │ │ │ ├── _overrides.scss │ │ │ │ ├── _variables.scss │ │ │ │ ├── components │ │ │ │ ├── _alert.scss │ │ │ │ ├── _avatar.scss │ │ │ │ ├── _badge.scss │ │ │ │ ├── _button.scss │ │ │ │ ├── _cards.scss │ │ │ │ ├── _checkbox.scss │ │ │ │ ├── _chip.scss │ │ │ │ ├── _dialog.scss │ │ │ │ ├── _expansion-panels.scss │ │ │ │ ├── _field.scss │ │ │ │ ├── _list.scss │ │ │ │ ├── _menu.scss │ │ │ │ ├── _otp-input.scss │ │ │ │ ├── _pagination.scss │ │ │ │ ├── _progress.scss │ │ │ │ ├── _radio.scss │ │ │ │ ├── _rating.scss │ │ │ │ ├── _slider.scss │ │ │ │ ├── _snackbar.scss │ │ │ │ ├── _switch.scss │ │ │ │ ├── _table.scss │ │ │ │ ├── _tabs.scss │ │ │ │ ├── _textarea.scss │ │ │ │ ├── _timeline.scss │ │ │ │ ├── _tooltip.scss │ │ │ │ └── index.scss │ │ │ │ └── index.scss │ │ │ ├── pages │ │ │ ├── misc.scss │ │ │ └── page-auth.scss │ │ │ └── placeholders │ │ │ ├── _default-layout-vertical-nav.scss │ │ │ ├── _index.scss │ │ │ ├── _misc.scss │ │ │ ├── _nav.scss │ │ │ └── _vertical-nav.scss │ └── utils │ │ ├── colorConverter.ts │ │ ├── formatters.ts │ │ ├── helpers.ts │ │ └── plugins.ts ├── @layouts │ ├── components.ts │ ├── components │ │ ├── TransitionExpand.vue │ │ ├── VerticalNav.vue │ │ ├── VerticalNavGroup.vue │ │ ├── VerticalNavLayout.vue │ │ ├── VerticalNavLink.vue │ │ └── VerticalNavSectionTitle.vue │ ├── enums.ts │ ├── index.ts │ ├── styles │ │ ├── _classes.scss │ │ ├── _default-layout.scss │ │ ├── _global.scss │ │ ├── _mixins.scss │ │ ├── _placeholders.scss │ │ ├── _rtl.scss │ │ ├── _variables.scss │ │ └── index.scss │ ├── types.ts │ └── utils.ts ├── App.vue ├── assets │ ├── images │ │ ├── avatars │ │ │ ├── avatar-1.png │ │ │ ├── avatar-10.png │ │ │ ├── avatar-11.png │ │ │ ├── avatar-12.png │ │ │ ├── avatar-13.png │ │ │ ├── avatar-14.png │ │ │ ├── avatar-15.png │ │ │ ├── avatar-2.png │ │ │ ├── avatar-3.png │ │ │ ├── avatar-4.png │ │ │ ├── avatar-5.png │ │ │ ├── avatar-6.png │ │ │ ├── avatar-7.png │ │ │ ├── avatar-8.png │ │ │ └── avatar-9.png │ │ ├── eCommerce │ │ │ └── 2.png │ │ ├── logo.svg │ │ ├── logos │ │ │ ├── american-bank.png │ │ │ ├── aviato.png │ │ │ ├── aws.png │ │ │ ├── bitbank.png │ │ │ ├── chrome.png │ │ │ ├── citi-bank.png │ │ │ ├── digital-ocean.png │ │ │ ├── github.png │ │ │ ├── google.png │ │ │ ├── gumroad.png │ │ │ ├── mastercard-label.png │ │ │ ├── slack.png │ │ │ ├── stripe.png │ │ │ └── zipcar.png │ │ ├── misc │ │ │ └── trophy.png │ │ ├── pages │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 404.png │ │ │ ├── 5.jpg │ │ │ ├── 6.jpg │ │ │ ├── auth-v1-mask-dark.png │ │ │ ├── auth-v1-mask-light.png │ │ │ ├── auth-v1-tree-2.png │ │ │ ├── auth-v1-tree.png │ │ │ ├── misc-mask-dark.png │ │ │ ├── misc-mask-light.png │ │ │ └── tree.png │ │ └── svg │ │ │ ├── checkbox-checked.svg │ │ │ ├── checkbox-indeterminate.svg │ │ │ ├── checkbox-unchecked.svg │ │ │ ├── radio-checked.svg │ │ │ └── radio-unchecked.svg │ └── styles │ │ ├── styles.scss │ │ └── variables │ │ ├── _template.scss │ │ └── _vuetify.scss ├── components │ ├── ErrorHeader.vue │ └── UpgradeToPro.vue ├── layouts │ ├── blank.vue │ ├── components │ │ ├── DefaultLayoutWithVerticalNav.vue │ │ ├── Footer.vue │ │ ├── NavItems.vue │ │ ├── NavbarThemeSwitcher.vue │ │ └── UserProfile.vue │ └── default.vue ├── main.ts ├── pages │ ├── [...error].vue │ ├── account-settings.vue │ ├── card-basic.vue │ ├── cards.vue │ ├── dashboard.vue │ ├── form-layouts.vue │ ├── icons.vue │ ├── login.vue │ ├── register.vue │ ├── tables.vue │ └── typography.vue ├── plugins │ ├── iconify │ │ ├── build-icons.ts │ │ ├── index.ts │ │ └── package.json │ ├── pinia.ts │ ├── router │ │ ├── index.ts │ │ └── routes.ts │ ├── vuetify │ │ ├── defaults.ts │ │ ├── icons.ts │ │ ├── index.ts │ │ └── theme.ts │ └── webfontloader.ts ├── utils │ └── paginationMeta.ts └── views │ ├── dashboard │ ├── AnalyticsAward.vue │ ├── AnalyticsBarCharts.vue │ ├── AnalyticsDepositWithdraw.vue │ ├── AnalyticsSalesByCountries.vue │ ├── AnalyticsTotalEarning.vue │ ├── AnalyticsTotalProfitLineCharts.vue │ ├── AnalyticsTransactions.vue │ ├── AnalyticsUserTable.vue │ └── AnalyticsWeeklyOverview.vue │ ├── pages │ ├── account-settings │ │ ├── AccountSettingsAccount.vue │ │ ├── AccountSettingsNotification.vue │ │ └── AccountSettingsSecurity.vue │ ├── authentication │ │ └── AuthProvider.vue │ ├── cards │ │ └── card-basic │ │ │ ├── CardBasic.vue │ │ │ ├── CardNavigation.vue │ │ │ └── CardSolid.vue │ ├── form-layouts │ │ ├── DemoFormLayoutHorizontalForm.vue │ │ ├── DemoFormLayoutHorizontalFormWithIcons.vue │ │ ├── DemoFormLayoutMultipleColumn.vue │ │ ├── DemoFormLayoutVerticalForm.vue │ │ └── DemoFormLayoutVerticalFormWithIcons.vue │ └── tables │ │ ├── DemoSimpleTableBasics.vue │ │ ├── DemoSimpleTableDensity.vue │ │ ├── DemoSimpleTableFixedHeader.vue │ │ ├── DemoSimpleTableHeight.vue │ │ └── DemoSimpleTableTheme.vue │ └── user-interface │ ├── form-layouts │ ├── DemoFormLayoutHorizontalForm.vue │ ├── DemoFormLayoutHorizontalFormWithIcons.vue │ ├── DemoFormLayoutMultipleColumn.vue │ ├── DemoFormLayoutVerticalForm.vue │ └── DemoFormLayoutVerticalFormWithIcons.vue │ ├── tables │ ├── TableBasic.vue │ ├── TableDark.vue │ ├── TableDensity.vue │ ├── TableFixedHeader.vue │ └── TableHeight.vue │ └── typography │ ├── TypographyHeadlines.vue │ └── TypographyTexts.vue ├── tsconfig.json └── vite.config.ts /.github/ISSUE_TEMPLATE/bug.yml: -------------------------------------------------------------------------------- 1 | name: Bug 🐞 2 | description: Report a bug 3 | labels: [support, bug] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | Thanks for taking the time to fill out this bug report! ☺️ 9 | - type: textarea 10 | attributes: 11 | label: Steps to reproduce 12 | validations: 13 | required: true 14 | - type: textarea 15 | attributes: 16 | label: What is expected? 17 | validations: 18 | required: true 19 | - type: textarea 20 | attributes: 21 | label: What is actually happening? 22 | validations: 23 | required: true 24 | - type: textarea 25 | attributes: 26 | label: Additional data 27 | value: | 28 | 34 | 35 | 38 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request.yml: -------------------------------------------------------------------------------- 1 | name: Feature request ✨ 2 | description: Suggest an idea or ask for a feature that you would like to have 3 | labels: [support, feature-req] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | Thanks for letting us know how we can improve our product! ☺️ 9 | - type: textarea 10 | attributes: 11 | label: What problem does this feature solve? 12 | validations: 13 | required: true 14 | - type: textarea 15 | attributes: 16 | label: What does the proposed solution look like? 17 | validations: 18 | required: true 19 | -------------------------------------------------------------------------------- /.github/workflows/handle-new-issue-comment.yml: -------------------------------------------------------------------------------- 1 | name: 'Handle new issue comment' 2 | on: 3 | issue_comment: 4 | types: [created] 5 | 6 | jobs: 7 | handle_new_issue_comment: 8 | runs-on: ubuntu-latest 9 | name: Handle new issue comment 10 | steps: 11 | - name: Toggle awaiting-reply label 12 | uses: jd-solanki/gh-action-toggle-awaiting-reply-label@v2.1.0 13 | with: 14 | label: awaiting-reply 15 | -------------------------------------------------------------------------------- /.github/workflows/handle-new-issue.yml: -------------------------------------------------------------------------------- 1 | name: 'Handle new issue' 2 | on: 3 | issues: 4 | types: [opened] 5 | 6 | jobs: 7 | handle_new_issue: 8 | runs-on: ubuntu-latest 9 | name: Handle new issue 10 | steps: 11 | - name: Find duplicates 12 | uses: wow-actions/potential-duplicates@v1.0.8 13 | with: 14 | GITHUB_TOKEN: ${{ github.token }} 15 | label: duplicate 16 | comment: > 17 | Potential duplicates: {{#issues}} 18 | - #{{ number }} _({{ accuracy }}% Match)_ 19 | {{/issues}} -------------------------------------------------------------------------------- /.github/workflows/issue-staler.yml: -------------------------------------------------------------------------------- 1 | name: 'Close stale issues and PRs' 2 | on: 3 | schedule: 4 | - cron: '30 1 * * *' 5 | 6 | jobs: 7 | stale: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/stale@v4 11 | with: 12 | stale-issue-message: 'This issue has been automatically marked as stale because it has no recent activity. It will be closed if no further activity occurs. Thank you for raising the concern.' 13 | close-issue-message: 'This issue has been automatically marked as closed because it has no recent activity.' 14 | stale-issue-label: 'stale' 15 | only-labels: 'awaiting-reply' 16 | exempt-issue-labels: 'triage' 17 | days-before-stale: 7 18 | days-before-close: 7 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Changelog 4 | 5 | All notable changes to this template will be documented in this file 6 | 7 | ## v2.3.0 (2025-01-01) 8 | 9 | ### Updated 10 | 11 | - Updated Vue & Vuetify to the latest version 12 | 13 | ## v2.2.2 (2024-07-29) 14 | 15 | ### Updated 16 | 17 | - Updated all the libraries to the latest version 18 | 19 | ## v2.2.1 (2024-01-05) 20 | 21 | ### Added 22 | 23 | - Added Hire Us file 24 | - Added Documentation File 25 | 26 | ## v2.2.0 (2024-01-04) 27 | 28 | ### Updated 29 | 30 | - Updated all dependencies and devDependencies to latest 31 | 32 | ### Added 33 | 34 | - Added Remix Icons 35 | 36 | ### Removed 37 | 38 | - Material Design icons removed 39 | 40 | ## v2.1.0 (2023-05-26) 41 | 42 | ### Updated 43 | 44 | - Updated repo according to pro template 45 | - Use Vuetify's official release instead of BETA 46 | 47 | ## v2.0.0 (2022-10-15) 48 | 49 | ### Added 50 | 51 | - Vue 3 version added 52 | - Vuetify 3 support added 53 | - TypeScript version added (Vue 3 only) 54 | 55 | ## v1.0.3 (2021-11-12) 56 | 57 | ### Updated 58 | 59 | - Updated [@vue/composition-api](https://github.com/vuejs/composition-api) package to v1.3.3 to mitigate composition api error 60 | 61 | ## v1.0.2 (2021-08-18) 62 | 63 | ### Fixed 64 | 65 | - broken links updated in footer 66 | 67 | ## Updates 68 | 69 | - "Basic Cards" page renamed to "Cards" 70 | - `README.md` updated 71 | 72 | ## v1.0.1 (2021-08-13) 73 | 74 | ### Fixed 75 | 76 | - Fixed missing fonts + branding updated 77 | 78 | ### Updated 79 | 80 | - public path updated in `vue.config.js` 81 | - `README.md` updated 82 | 83 | ## v1.0.0 (2021-08-13) 84 | 85 | ### Added 86 | 87 | - Initial Release 88 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 ThemeSelection 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /documentation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Materio - Vuetify Vuejs Admin Template Free 6 | 8 | 9 | 10 | 11 |

If you do not redirect please visit : https://demos.themeselection.com/materio-vuetify-vuejs-admin-template/documentation/ 13 |

14 | 15 | 16 | -------------------------------------------------------------------------------- /hire-us.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hire Us 6 | 8 | 9 | 10 | 11 |

If you do not redirect please visit : https://themeselection.com/hire-us/

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /javascript-version/.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | 11 | # Matches multiple files with brace expansion notation 12 | # Set default charset 13 | [*.{js,py}] 14 | charset = utf-8 15 | 16 | # 4 space indentation 17 | [*.py] 18 | indent_style = space 19 | indent_size = 4 20 | 21 | # 2 space indentation 22 | [*.{vue,scss,ts}] 23 | indent_style = space 24 | indent_size = 2 25 | 26 | # Tab indentation (no size specified) 27 | [Makefile] 28 | indent_style = tab 29 | 30 | # Indentation override for all JS under lib directory 31 | [lib/**.js] 32 | indent_style = space 33 | indent_size = 2 34 | 35 | # Matches the exact files either package.json or .travis.yml 36 | [{package.json,.travis.yml}] 37 | indent_style = space 38 | indent_size = 2 39 | -------------------------------------------------------------------------------- /javascript-version/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | /cypress/videos/ 17 | /cypress/screenshots/ 18 | 19 | # 👉 Custom Git ignores 20 | 21 | # Editor directories and files 22 | .vscode/* 23 | !.vscode/extensions.json 24 | !.vscode/settings.json 25 | !.vscode/*.code-snippets 26 | !.vscode/tours 27 | .idea 28 | *.suo 29 | *.ntvs* 30 | *.njsproj 31 | *.sln 32 | *.sw? 33 | .yarn 34 | 35 | # iconify dist files 36 | src/plugins/iconify/icons.css 37 | 38 | # Ignore MSW script 39 | public/mockServiceWorker.js 40 | 41 | # Env files 42 | .env* 43 | !.env.example 44 | -------------------------------------------------------------------------------- /javascript-version/.npmrc: -------------------------------------------------------------------------------- 1 | auto-install-peers=true 2 | shamefully-hoist=true 3 | -------------------------------------------------------------------------------- /javascript-version/.nvmrc: -------------------------------------------------------------------------------- 1 | lts/* 2 | -------------------------------------------------------------------------------- /javascript-version/.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules -------------------------------------------------------------------------------- /javascript-version/.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "htmlWhitespaceSensitivity": "css", 5 | "insertPragma": false, 6 | "jsxBracketSameLine": false, 7 | "jsxSingleQuote": true, 8 | "printWidth": 120, 9 | "proseWrap": "preserve", 10 | "quoteProps": "as-needed", 11 | "requirePragma": false, 12 | "semi": false, 13 | "singleQuote": true, 14 | "tabWidth": 2, 15 | "trailingComma": "all", 16 | "useTabs": false, 17 | "vueIndentScriptAndStyle": false, 18 | "endOfLine": "lf", 19 | "singleAttributePerLine": true 20 | } -------------------------------------------------------------------------------- /javascript-version/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-standard-scss", 4 | "stylelint-config-idiomatic-order", 5 | "@stylistic/stylelint-config" 6 | ], 7 | "plugins": [ 8 | "stylelint-use-logical-spec", 9 | "@stylistic/stylelint-plugin" 10 | ], 11 | "overrides": [ 12 | { 13 | "files": [ 14 | "**/*.scss" 15 | ], 16 | "customSyntax": "postcss-scss" 17 | }, 18 | { 19 | "files": [ 20 | "**/*.vue" 21 | ], 22 | "customSyntax": "postcss-html" 23 | } 24 | ], 25 | "rules": { 26 | "@stylistic/max-line-length": [ 27 | 220, 28 | { 29 | "ignore": "comments" 30 | } 31 | ], 32 | "@stylistic/indentation": 2, 33 | "liberty/use-logical-spec": true, 34 | "selector-class-pattern": null, 35 | "color-function-notation": null, 36 | "annotation-no-unknown": [ 37 | true, 38 | { 39 | "ignoreAnnotations": [ 40 | "default" 41 | ] 42 | } 43 | ], 44 | "media-feature-range-notation": null 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /javascript-version/.vscode/anchor-comments.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "Add hand emoji": { 3 | "prefix": "cm-hand-emoji", 4 | "body": [ 5 | "👉" 6 | ], 7 | "description": "Add hand emoji" 8 | }, 9 | "Add info emoji": { 10 | "prefix": "cm-info-emoji", 11 | "body": [ 12 | "ℹ️" 13 | ], 14 | "description": "Add info emoji" 15 | }, 16 | "Add warning emoji": { 17 | "prefix": "cm-warning-emoji", 18 | "body": [ 19 | "❗" 20 | ], 21 | "description": "Add warning emoji" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /javascript-version/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "editorconfig.editorconfig", 5 | "xabikos.javascriptsnippets", 6 | "stylelint.vscode-stylelint", 7 | "fabiospampinato.vscode-highlight", 8 | "github.vscode-pull-request-github", 9 | "vue.volar", 10 | "antfu.iconify", 11 | "cipchk.cssrem", 12 | "matijao.vue-nuxt-snippets", 13 | "dongido.sync-env" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /javascript-version/.vscode/vue-ts.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "Vue TS - DefineProps": { 3 | "prefix": "dprops", 4 | "body": [ 5 | "defineProps<${1:Props}>()" 6 | ], 7 | "description": "DefineProps in script setup" 8 | }, 9 | "Vue TS - Props interface": { 10 | "prefix": "iprops", 11 | "body": [ 12 | "interface Props {", 13 | " ${1}", 14 | "}" 15 | ], 16 | "description": "Create props interface in script setup" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /javascript-version/.vscode/vuetify.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "Vuetify Menu -- Parent Activator": { 3 | "prefix": "v-menu", 4 | "body": [ 5 | "", 6 | " Activator", 7 | " ", 8 | " ", 9 | " ", 14 | " {{ item }}", 15 | " ", 16 | " ", 17 | " ", 18 | "" 19 | ], 20 | "description": "We use menu component with parent activator mostly because it is compact and easy to understand." 21 | }, 22 | "Vuetify CSS variable": { 23 | "prefix": "v-css-var", 24 | "body": [ 25 | "rgb(var(--v-${1:theme}))" 26 | ], 27 | "description": "Vuetify CSS variable" 28 | }, 29 | "Icon only button": { 30 | "prefix": "IconBtn", 31 | "body": [ 32 | "", 33 | " ", 34 | "" 35 | ], 36 | "description": "Icon only button" 37 | }, 38 | "Radio Group": { 39 | "prefix": "v-radio-grp", 40 | "body": [ 41 | "", 42 | " ", 48 | "" 49 | ], 50 | "description": "Radio Group" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /javascript-version/README.md: -------------------------------------------------------------------------------- 1 | # vue 2 | 3 | This template should help get you started developing with Vue 3 in Vite. 4 | 5 | ## Recommended IDE Setup 6 | 7 | [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). 8 | 9 | ## Type Support for `.vue` Imports in TS 10 | 11 | Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. 12 | 13 | However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VS Code command palette. 14 | 15 | ## Customize configuration 16 | 17 | See [Vite Configuration Reference](https://vitejs.dev/config/). 18 | 19 | ## Project Setup 20 | 21 | ```sh 22 | npm install 23 | ``` 24 | 25 | ### Compile and Hot-Reload for Development 26 | 27 | ```sh 28 | npm run dev 29 | ``` 30 | 31 | ### Type-Check, Compile and Minify for Production 32 | 33 | ```sh 34 | npm run build 35 | ``` 36 | -------------------------------------------------------------------------------- /javascript-version/components.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | // @ts-nocheck 3 | // Generated by unplugin-vue-components 4 | // Read more: https://github.com/vuejs/core/pull/3399 5 | export {} 6 | 7 | /* prettier-ignore */ 8 | declare module 'vue' { 9 | export interface GlobalComponents { 10 | CardStatisticsHorizontal: typeof import('./src/@core/components/cards/CardStatisticsHorizontal.vue')['default'] 11 | CardStatisticsVertical: typeof import('./src/@core/components/cards/CardStatisticsVertical.vue')['default'] 12 | CardStatisticsWithImages: typeof import('./src/@core/components/cards/CardStatisticsWithImages.vue')['default'] 13 | ErrorHeader: typeof import('./src/components/ErrorHeader.vue')['default'] 14 | MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default'] 15 | RouterLink: typeof import('vue-router')['RouterLink'] 16 | RouterView: typeof import('vue-router')['RouterView'] 17 | ThemeSwitcher: typeof import('./src/@core/components/ThemeSwitcher.vue')['default'] 18 | UpgradeToPro: typeof import('./src/components/UpgradeToPro.vue')['default'] 19 | VueApexCharts: typeof import('vue3-apexcharts')['default'] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /javascript-version/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "./vite.config.*", 4 | "./src/**/*", 5 | "./src/**/*.vue", 6 | "./themeConfig.js" 7 | ], 8 | "exclude": [ 9 | "./dist", 10 | "./node_modules" 11 | ], 12 | "compilerOptions": { 13 | "target": "esnext", 14 | "module": "esnext", 15 | "moduleResolution": "Bundler", 16 | "jsx": "preserve", 17 | "paths": { 18 | "@/*": [ 19 | "./src/*" 20 | ], 21 | "@layouts/*": [ 22 | "./src/@layouts/*" 23 | ], 24 | "@layouts": [ 25 | "./src/@layouts" 26 | ], 27 | "@core/*": [ 28 | "./src/@core/*" 29 | ], 30 | "@core": [ 31 | "./src/@core" 32 | ], 33 | "@images/*": [ 34 | "./src/assets/images/*" 35 | ], 36 | "@styles/*": [ 37 | "./src/styles/*" 38 | ] 39 | }, 40 | "types": [ 41 | "vite/client", 42 | "vite-plugin-vue-layouts/client" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /javascript-version/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/public/favicon.ico -------------------------------------------------------------------------------- /javascript-version/public/images/avatars/avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/public/images/avatars/avatar-1.png -------------------------------------------------------------------------------- /javascript-version/public/loader.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | html { 6 | overflow-x: hidden; 7 | overflow-y: scroll; 8 | } 9 | 10 | #loading-bg { 11 | position: absolute; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | background: var(--initial-loader-bg, #fff); 17 | block-size: 100%; 18 | gap: 1rem 0; 19 | inline-size: 100%; 20 | } 21 | 22 | .loading { 23 | position: relative; 24 | box-sizing: border-box; 25 | border: 3px solid transparent; 26 | border-radius: 50%; 27 | block-size: 55px; 28 | inline-size: 55px; 29 | } 30 | 31 | .loading .effect-1, 32 | .loading .effect-2, 33 | .loading .effect-3 { 34 | position: absolute; 35 | box-sizing: border-box; 36 | border: 3px solid transparent; 37 | border-radius: 50%; 38 | block-size: 100%; 39 | border-inline-start: 3px solid var(--initial-loader-color, #eee); 40 | inline-size: 100%; 41 | } 42 | 43 | .loading .effect-1 { 44 | animation: rotate 1s ease infinite; 45 | } 46 | 47 | .loading .effect-2 { 48 | animation: rotate-opacity 1s ease infinite 0.1s; 49 | } 50 | 51 | .loading .effect-3 { 52 | animation: rotate-opacity 1s ease infinite 0.2s; 53 | } 54 | 55 | .loading .effects { 56 | transition: all 0.3s ease; 57 | } 58 | 59 | @keyframes rotate { 60 | 0% { 61 | transform: rotate(0deg); 62 | } 63 | 64 | 100% { 65 | transform: rotate(1turn); 66 | } 67 | } 68 | 69 | @keyframes rotate-opacity { 70 | 0% { 71 | opacity: 0.1; 72 | transform: rotate(0deg); 73 | } 74 | 75 | 100% { 76 | opacity: 1; 77 | transform: rotate(1turn); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /javascript-version/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/public/logo.png -------------------------------------------------------------------------------- /javascript-version/src/@core/components/MoreBtn.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 36 | -------------------------------------------------------------------------------- /javascript-version/src/@core/components/ThemeSwitcher.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 44 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/base/_dark.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | 3 | // ———————————————————————————————————— 4 | // * ——— Perfect Scrollbar 5 | // ———————————————————————————————————— 6 | 7 | body.v-theme--dark { 8 | .ps__rail-y, 9 | .ps__rail-x { 10 | background-color: transparent !important; 11 | } 12 | 13 | .ps__thumb-y { 14 | background-color: variables.$plugin-ps-thumb-y-dark; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/base/_default-layout.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/placeholders"; 2 | @use "@core/scss/base/variables"; 3 | 4 | .layout-vertical-nav, 5 | .layout-horizontal-nav { 6 | ol, 7 | ul { 8 | list-style: none; 9 | } 10 | } 11 | 12 | .layout-navbar { 13 | @if variables.$navbar-high-emphasis-text { 14 | @extend %layout-navbar; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/base/_index.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | 3 | // Layout 4 | @use "vertical-nav"; 5 | @use "default-layout"; 6 | @use "default-layout-w-vertical-nav"; 7 | 8 | // Layouts package 9 | @use "layouts"; 10 | 11 | // Components 12 | @use "components"; 13 | 14 | // Utilities 15 | @use "utilities"; 16 | 17 | // Misc 18 | @use "misc"; 19 | 20 | // Dark 21 | @use "dark"; 22 | 23 | // libs 24 | @use "libs/perfect-scrollbar"; 25 | 26 | a { 27 | color: rgb(var(--v-theme-primary)); 28 | text-decoration: none; 29 | } 30 | 31 | // Vuetify 3 don't provide margin bottom style like vuetify 2 32 | p { 33 | margin-block-end: 1rem; 34 | } 35 | 36 | // Iconify icon size 37 | svg.iconify { 38 | block-size: 1em; 39 | inline-size: 1em; 40 | } 41 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/base/_misc.scss: -------------------------------------------------------------------------------- 1 | // ℹ️ scrollable-content allows creating fixed header and scrollable content for VNavigationDrawer (Used when perfect scrollbar is used) 2 | .scrollable-content { 3 | &.v-navigation-drawer { 4 | .v-navigation-drawer__content { 5 | display: flex; 6 | overflow: hidden; 7 | flex-direction: column; 8 | } 9 | } 10 | } 11 | 12 | // ℹ️ adding styling for code tag 13 | code { 14 | border-radius: 3px; 15 | color: rgb(var(--v-code-color)); 16 | font-size: 90%; 17 | font-weight: 400; 18 | padding-block: 0.2em; 19 | padding-inline: 0.4em; 20 | } 21 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/base/libs/_perfect-scrollbar.scss: -------------------------------------------------------------------------------- 1 | $ps-size: 0.25rem; 2 | $ps-hover-size: 0.375rem; 3 | $ps-track-size: 0.5rem; 4 | 5 | .ps__thumb-y { 6 | inline-size: $ps-size !important; 7 | inset-inline-end: 0.0625rem; 8 | } 9 | 10 | .ps__thumb-y, 11 | .ps__thumb-x { 12 | background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important; 13 | } 14 | 15 | .ps__thumb-x { 16 | block-size: $ps-size !important; 17 | } 18 | 19 | .ps__rail-x { 20 | background: transparent !important; 21 | block-size: $ps-track-size; 22 | } 23 | 24 | .ps__rail-y { 25 | background: transparent !important; 26 | inline-size: $ps-track-size !important; 27 | inset-inline-end: 0.125rem !important; 28 | inset-inline-start: unset !important; 29 | } 30 | 31 | .ps__rail-y.ps--clicking .ps__thumb-y, 32 | .ps__rail-y:focus > .ps__thumb-y, 33 | .ps__rail-y:hover > .ps__thumb-y { 34 | inline-size: $ps-hover-size !important; 35 | } 36 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/base/libs/vuetify/_index.scss: -------------------------------------------------------------------------------- 1 | @use "overrides"; 2 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/base/placeholders/_default-layout-vertical-nav.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | @use "misc"; 3 | @use "@core/scss/base/mixins"; 4 | 5 | %default-layout-vertical-nav-scrolled-sticky-elevated-nav { 6 | background-color: rgb(var(--v-theme-surface)); 7 | } 8 | 9 | %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled { 10 | @include mixins.elevation(variables.$vertical-nav-navbar-elevation); 11 | 12 | // If navbar is contained => Squeeze navbar content on scroll 13 | @if variables.$layout-vertical-nav-navbar-is-contained { 14 | padding-inline: 1.2rem; 15 | } 16 | } 17 | 18 | %default-layout-vertical-nav-floating-navbar-overlay { 19 | isolation: isolate; 20 | 21 | &::after { 22 | position: absolute; 23 | z-index: -1; 24 | /* stylelint-disable property-no-vendor-prefix */ 25 | -webkit-backdrop-filter: blur(10px); 26 | backdrop-filter: blur(10px); 27 | /* stylelint-enable */ 28 | background: 29 | linear-gradient( 30 | 180deg, 31 | rgba(var(--v-theme-background), 70%) 44%, 32 | rgba(var(--v-theme-background), 43%) 73%, 33 | rgba(var(--v-theme-background), 0%) 34 | ); 35 | background-repeat: repeat; 36 | block-size: calc(variables.$layout-vertical-nav-navbar-height + variables.$vertical-nav-floating-navbar-top + 0.5rem); 37 | content: ""; 38 | inset-block-start: -(variables.$vertical-nav-floating-navbar-top); 39 | inset-inline: 0 0; 40 | /* stylelint-disable property-no-vendor-prefix */ 41 | -webkit-mask: linear-gradient(black, black 18%, transparent 100%); 42 | mask: linear-gradient(black, black 18%, transparent 100%); 43 | /* stylelint-enable */ 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/base/placeholders/_default-layout.scss: -------------------------------------------------------------------------------- 1 | %layout-navbar { 2 | color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); 3 | } 4 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/base/placeholders/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "vertical-nav"; 2 | @forward "nav"; 3 | @forward "default-layout"; 4 | @forward "default-layout-vertical-nav"; 5 | @forward "misc"; 6 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/base/placeholders/_misc.scss: -------------------------------------------------------------------------------- 1 | %blurry-bg { 2 | /* stylelint-disable property-no-vendor-prefix */ 3 | -webkit-backdrop-filter: blur(6px); 4 | backdrop-filter: blur(6px); 5 | /* stylelint-enable */ 6 | background-color: rgb(var(--v-theme-surface), 0.9); 7 | } 8 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/base/placeholders/_nav.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/mixins"; 2 | 3 | // ℹ️ This is common style that needs to be applied to both navs 4 | %nav { 5 | color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); 6 | 7 | .nav-item-title { 8 | letter-spacing: 0.15px; 9 | } 10 | 11 | .nav-section-title { 12 | letter-spacing: 0.4px; 13 | } 14 | } 15 | 16 | /* 17 | Active nav link styles for horizontal & vertical nav 18 | 19 | For horizontal nav it will be only applied to top level nav items 20 | For vertical nav it will be only applied to nav links (not nav groups) 21 | */ 22 | %nav-link-active { 23 | background-color: rgb(var(--v-theme-primary)); 24 | color: rgb(var(--v-theme-on-primary)); 25 | 26 | @include mixins.elevation(3); 27 | } 28 | 29 | %nav-link { 30 | a { 31 | color: inherit; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/_default-layout-w-vertical-nav.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | @use "@core/scss/base/mixins"; 3 | 4 | $header: ".layout-navbar"; 5 | 6 | @if variables.$layout-vertical-nav-navbar-is-contained { 7 | $header: ".layout-navbar .navbar-content-container"; 8 | } 9 | 10 | .layout-wrapper.layout-nav-type-vertical { 11 | // 👉 Layout footer 12 | .layout-footer { 13 | $ele-layout-footer: &; 14 | 15 | .footer-content-container { 16 | // Sticky footer 17 | @at-root { 18 | // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer 19 | .layout-footer-sticky#{$ele-layout-footer} { 20 | .footer-content-container { 21 | box-shadow: 0 -4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%); 22 | padding-inline: 1.5rem; 23 | } 24 | } 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/_mixins.scss: -------------------------------------------------------------------------------- 1 | @use "vuetify/lib/styles/settings" as vuetify_settings; 2 | 3 | @mixin avatar-font-sizes($map: $avatar-sizes) { 4 | @each $sizeName, $multiplier in vuetify_settings.$size-scales { 5 | /* stylelint-disable-next-line scss/no-global-function-names */ 6 | $size: map-get($map, $sizeName); 7 | 8 | &.v-avatar--size-#{$sizeName} { 9 | font-size: #{$size}px; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/_utilities.scss: -------------------------------------------------------------------------------- 1 | .v-timeline{ 2 | .v-timeline-item { 3 | .app-timeline-title { 4 | color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); 5 | font-size: 15px; 6 | font-weight: 500; 7 | letter-spacing: 0.15px; 8 | line-height: 1.375rem; 9 | } 10 | 11 | .app-timeline-meta { 12 | color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)); 13 | font-size: 13px; 14 | letter-spacing: 0.4px; 15 | line-height: 1.125rem; 16 | } 17 | 18 | .app-timeline-text { 19 | color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); 20 | font-size: .9375rem; 21 | line-height: 1.375rem; 22 | } 23 | } 24 | } 25 | 26 | .per-page-select { 27 | margin-block: auto; 28 | 29 | .v-field__input { 30 | align-items: center; 31 | padding: 2px; 32 | } 33 | 34 | .v-field__append-inner { 35 | align-items: center; 36 | padding: 0; 37 | 38 | .v-icon { 39 | margin-inline-start: 0 !important; 40 | } 41 | } 42 | } 43 | 44 | .leading-normal { 45 | font-weight: 600; 46 | letter-spacing: .0094rem; 47 | } 48 | 49 | .bg-custom-background{ 50 | background-color: rgb(var(--v-table-header-color)) !important; 51 | } 52 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/_utils.scss: -------------------------------------------------------------------------------- 1 | @use "sass:string"; 2 | 3 | /* 4 | ℹ️ This function is helpful when we have multi dimensional value 5 | 6 | Assume we have padding variable `$nav-padding-horizontal: 10px;` 7 | With above variable let's say we use it in some style: 8 | ```scss 9 | .selector { 10 | margin-left: $nav-padding-horizontal; 11 | } 12 | ``` 13 | 14 | Now, problem is we can also have value as `$nav-padding-horizontal: 10px 15px;` 15 | In this case above style will be invalid. 16 | 17 | This function will extract the left most value from the variable value. 18 | 19 | $nav-padding-horizontal: 10px; => 10px; 20 | $nav-padding-horizontal: 10px 15px; => 10px; 21 | 22 | This is safe: 23 | ```scss 24 | .selector { 25 | margin-left: get-first-value($nav-padding-horizontal); 26 | } 27 | ``` 28 | */ 29 | @function get-first-value($var) { 30 | $start-at: string.index(#{$var}, " "); 31 | 32 | @if $start-at { 33 | @return string.slice( 34 | #{$var}, 35 | 0, 36 | $start-at 37 | ); 38 | } @else { 39 | @return $var; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/_vertical-nav.scss: -------------------------------------------------------------------------------- 1 | @use "@layouts/styles/mixins" as layoutsMixins; 2 | 3 | .layout-nav-type-vertical { 4 | // 👉 Layout Vertical nav 5 | .layout-vertical-nav { 6 | .nav-items{ 7 | padding-block-start: .25rem; 8 | } 9 | 10 | // 👉 Vertical nav group 11 | .nav-group { 12 | .nav-group-arrow { 13 | font-size: 1.375rem; 14 | } 15 | } 16 | 17 | // 👉 Nav group & Link 18 | .nav-link, 19 | .nav-group { 20 | // shadow cut issue fix 21 | margin-block-end: -0.5rem; 22 | padding-block-end: 0.5rem; 23 | 24 | a { 25 | outline: none; 26 | } 27 | } 28 | 29 | // 👉 Nav section title 30 | .nav-section-title { 31 | .placeholder-icon { 32 | transform: translateX(-3px); 33 | 34 | @include layoutsMixins.rtl { 35 | transform: translateX(3px); 36 | } 37 | } 38 | } 39 | 40 | // 👉 Nav header 41 | .nav-header { 42 | padding-block: 1.25rem; 43 | padding-inline: 23px 0; 44 | } 45 | } 46 | } 47 | 48 | // 👉 Overlay 49 | .layout-overlay{ 50 | touch-action: none; 51 | } 52 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/index.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "@core/scss/base"; 3 | 4 | // layouts 5 | @use "vertical-nav"; 6 | @use "default-layout-w-vertical-nav"; 7 | 8 | // Utilities 9 | @use "utilities"; 10 | 11 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/_overrides.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/utils"; 2 | @use "@configured-variables" as variables; 3 | 4 | // 👉 Body 5 | // set body font size 15px 6 | body { 7 | font-size: 15px !important; 8 | } 9 | 10 | // 👉 Typography 11 | .text-h1, 12 | .text-h2, 13 | .text-h3, 14 | .text-h4, 15 | .text-h5, 16 | .text-h6, 17 | .text-overline, 18 | .v-input { 19 | color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); 20 | } 21 | 22 | .text-caption{ 23 | color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)); 24 | } 25 | 26 | .v-card-subtitle, 27 | .text-subtitle-1, 28 | .text-subtitle-2 { 29 | color: rgba(var(--v-theme-on-background), 0.55); 30 | } 31 | 32 | // 👉 Input placeholder alignment 33 | .v-input--density-compact{ 34 | input::placeholder { 35 | position: relative; 36 | inset-block-start: 1px; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_avatar.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/mixins"; 2 | 3 | // 👉 Avatar 4 | body { 5 | .v-avatar { 6 | font-size: 0.9375rem; 7 | 8 | .v-icon { 9 | block-size: 1.5rem; 10 | font-size: 1.5rem; 11 | inline-size: 1.5rem; 12 | } 13 | 14 | &.v-avatar--variant-tonal:not([class*="text-"]) { 15 | .v-avatar__underlay { 16 | --v-activated-opacity: 0.08; 17 | } 18 | } 19 | } 20 | 21 | .v-avatar-group { 22 | > * { 23 | &:hover { 24 | @include mixins.elevation(6); 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_badge.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | 3 | // 👉 Badge 4 | .v-badge { 5 | &.v-badge--inline:not(.v-badge--dot) { 6 | .v-badge__wrapper { 7 | .v-badge__badge { 8 | padding-block: 4px; 9 | padding-inline: 8px; 10 | } 11 | } 12 | } 13 | 14 | &.v-badge--tonal { 15 | @each $color-name in variables.$theme-colors-name { 16 | .v-badge__wrapper { 17 | .v-badge__badge.bg-#{$color-name} { 18 | background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important; 19 | color: rgb(var(--v-theme-#{$color-name})) !important; 20 | } 21 | } 22 | } 23 | } 24 | 25 | /* stylelint-disable-next-line no-descending-specificity */ 26 | &.v-badge--bordered.v-badge--dot .v-badge__badge { 27 | border-radius: 10px; 28 | block-size: 12px; 29 | inline-size: 12px; 30 | 31 | &::after { 32 | border-width: 2px; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_cards.scss: -------------------------------------------------------------------------------- 1 | // 👉 Card 2 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_checkbox.scss: -------------------------------------------------------------------------------- 1 | @use "sass:list"; 2 | @use "sass:map"; 3 | @use "@styles/variables/vuetify"; 4 | @use "@configured-variables" as variables; 5 | 6 | // 👉 checkbox box shadow 7 | .v-checkbox-btn { 8 | &.v-selection-control--dirty { 9 | .v-selection-control__input { 10 | .v-icon.custom-checkbox-checked, 11 | .v-icon.custom-checkbox-indeterminate { 12 | // ℹ️ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG;Usingfilter 13 | filter: drop-shadow(rgba(var(--v-shadow-key-umbra-color), 16%) 0 2px 4px); 14 | } 15 | } 16 | } 17 | 18 | &.v-selection-control { 19 | .v-label { 20 | color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); 21 | } 22 | 23 | .v-selection-control__input { 24 | svg { 25 | font-size: 1.5rem; 26 | } 27 | } 28 | } 29 | 30 | &:not(.v-selection-control--dirty) { 31 | .v-selection-control__input { 32 | > .v-icon { 33 | color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); 34 | opacity: 1; 35 | } 36 | 37 | > .custom-checkbox-indeterminate { 38 | color: rgb(var(--v-theme-primary)); 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_dialog.scss: -------------------------------------------------------------------------------- 1 | // 👉 Dialog 2 | 3 | body { 4 | .v-dialog { 5 | font-size: 0.9375rem; 6 | line-height: 1.375rem; 7 | 8 | .v-dialog-close-btn { 9 | color: rgb(var(--v-theme-secondary)) !important; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_expansion-panels.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/mixins"; 2 | 3 | // 👉 Expansion Panel 4 | .v-expansion-panels { 5 | .v-expansion-panel { 6 | .v-expansion-panel-title { 7 | font-weight: 500; 8 | 9 | &--active { 10 | .v-expansion-panel-title__overlay, 11 | &:hover .v-expansion-panel-title__overlay { 12 | opacity: 0 !important; 13 | } 14 | } 15 | 16 | .v-expansion-panel-title__icon { 17 | .v-icon { 18 | block-size: 1.25rem; 19 | font-size: 1.25rem; 20 | inline-size: 1.25rem; 21 | } 22 | } 23 | 24 | &:hover { 25 | .v-expansion-panel-title__overlay { 26 | opacity: 0 !important; 27 | } 28 | } 29 | } 30 | 31 | .v-expansion-panel-text { 32 | color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); 33 | font-size: 15px; 34 | line-height: 1.375rem; 35 | } 36 | } 37 | 38 | &:not(.v-expansion-panels--variant-accordion) { 39 | .v-expansion-panel { 40 | &.v-expansion-panel--active { 41 | .v-expansion-panel__shadow { 42 | @include mixins.elevation(6); 43 | } 44 | } 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_list.scss: -------------------------------------------------------------------------------- 1 | // 👉 VList 2 | 3 | .v-list { 4 | // .v-icon { 5 | // font-size: 1.375rem;font-sizefont-size 6 | // } 7 | 8 | .v-list-item { 9 | &.v-list-item--active:not(.v-list-group__header) { 10 | .v-list-item__content, 11 | .v-list-item__prepend { 12 | * { 13 | color: rgb(var(--v-theme-primary)); 14 | } 15 | } 16 | 17 | .v-list-item__overlay { 18 | background: rgb(var(--v-theme-primary)); 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_menu.scss: -------------------------------------------------------------------------------- 1 | // 👉 VMenu 2 | .v-menu { 3 | .v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line { 4 | padding-inline: 16px; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_otp-input.scss: -------------------------------------------------------------------------------- 1 | // 👉 Otp input 2 | 3 | .v-otp-input { 4 | justify-content: unset !important; 5 | 6 | .v-otp-input__content { 7 | max-inline-size: 100%; 8 | 9 | .v-field.v-field--focused { 10 | .v-field__outline { 11 | .v-field__outline__start, 12 | .v-field__outline__end { 13 | border-color: rgb(var(--v-theme-primary)) !important; 14 | } 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_progress.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | 3 | // 👉 Progress 4 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_radio.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/mixins"; 2 | @use "@configured-variables" as variables; 3 | 4 | // 👉 Radio 5 | .v-radio, 6 | .v-radio-btn { 7 | &.v-selection-control--dirty { 8 | .v-selection-control__input { 9 | .custom-radio-checked { 10 | filter: drop-shadow(rgba(var(--v-shadow-key-umbra-color), 16%) 0 2px 4px); 11 | } 12 | } 13 | } 14 | 15 | &.v-selection-control { 16 | .v-selection-control__input { 17 | svg { 18 | font-size: 1.5rem; 19 | } 20 | } 21 | 22 | .v-label { 23 | color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); 24 | } 25 | } 26 | 27 | &:not(.v-selection-control--dirty) { 28 | .v-selection-control__input > .v-icon { 29 | color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); 30 | opacity: 1; 31 | } 32 | } 33 | } 34 | 35 | .v-radio-group.v-input > .v-input__control > .v-label { 36 | font-size: 0.9375rem; 37 | line-height: 22px; 38 | margin-inline-start: 0; 39 | } 40 | 41 | .v-radio-group { 42 | .v-selection-control-group { 43 | .v-radio:not(:last-child) { 44 | margin-inline-end: 0; 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_rating.scss: -------------------------------------------------------------------------------- 1 | // // 👉 Rating 2 | // .v-rating { 3 | // .v-rating__wrapper { 4 | // .v-btn { 5 | // &:hover { 6 | // transform: none;transform 7 | // } 8 | 9 | // .v-icon { 10 | // --v-icon-size-multiplier: 1;--v-icon-size-multiplier 11 | // } 12 | // } 13 | // } 14 | // } 15 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_slider.scss: -------------------------------------------------------------------------------- 1 | // 👉 Slider 2 | 3 | .v-slider { 4 | .v-slider-track__background--opacity { 5 | opacity: 0.16; 6 | } 7 | } 8 | 9 | .v-slider-thumb { 10 | .v-slider-thumb__surface::after { 11 | border-radius: 50%; 12 | background-color: #fff; 13 | block-size: calc(var(--v-slider-thumb-size) - 10px); 14 | inline-size: calc(var(--v-slider-thumb-size) - 10px); 15 | } 16 | 17 | .v-slider-thumb__label { 18 | background-color: rgb(var(--v-tooltip-background)); 19 | color: rgb(var(--v-theme-surface)); 20 | font-weight: 500; 21 | letter-spacing: 0.15px; 22 | line-height: 1.25rem; 23 | 24 | &::before { 25 | content: none; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_snackbar.scss: -------------------------------------------------------------------------------- 1 | // 👉 snackbar 2 | 3 | .v-snackbar { 4 | .v-snackbar__actions { 5 | .v-btn { 6 | padding-block: 0; 7 | padding-inline: 10px; 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_switch.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | @use "@core/scss/base/mixins"; 3 | 4 | // 👉 Switch 5 | 6 | .v-switch { 7 | .v-label { 8 | color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); 9 | line-height: 22px; 10 | } 11 | } 12 | 13 | .v-switch.v-switch--inset { 14 | .v-selection-control .v-selection-control__wrapper { 15 | block-size: 36px; 16 | } 17 | 18 | .v-ripple__container { 19 | opacity: 0; 20 | } 21 | 22 | .v-switch__track { 23 | background-color: rgba(var(--v-theme-on-surface), var(--v-focus-opacity)); 24 | box-shadow: 0 0 4px 0 rgba(0, 0, 0, 16%) inset; 25 | opacity: 1; 26 | } 27 | 28 | .v-selection-control__input { 29 | transform: translateX(-5px) !important; 30 | 31 | --v-selection-control-size: 1.125rem; 32 | 33 | .v-switch__thumb { 34 | background-color: #fff; 35 | block-size: 0.875rem; 36 | box-shadow: none; 37 | filter: drop-shadow(0 2px 4px rgba(var(--v-shadow-key-umbra-color), 16%)); 38 | inline-size: 0.875rem; 39 | transform: scale(1); 40 | } 41 | } 42 | 43 | .v-selection-control--dirty { 44 | @each $color-name in variables.$theme-colors-name { 45 | .text-#{$color-name} { 46 | .v-switch__track { 47 | border-color: rgb(var(--v-theme-#{$color-name})); 48 | background-color: rgb(var(--v-theme-#{$color-name})); 49 | } 50 | } 51 | } 52 | 53 | .v-selection-control__input { 54 | transform: translateX(5px) !important; 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_table.scss: -------------------------------------------------------------------------------- 1 | .v-data-table { 2 | table { 3 | tbody { 4 | tr { 5 | &.v-data-table-group-header-row { 6 | td { 7 | background: none; 8 | } 9 | } 10 | } 11 | } 12 | } 13 | } 14 | 15 | // 👉 Table 16 | .v-table { 17 | .v-table__wrapper { 18 | border-radius: 0; 19 | 20 | table { 21 | thead { 22 | tr { 23 | th { 24 | background: rgb(var(--v-table-header-color)) !important; 25 | border-block-end: none !important; 26 | color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important; 27 | font-size: 0.8125rem; 28 | letter-spacing: 0.2px; 29 | line-height: 24px; 30 | text-transform: uppercase; 31 | } 32 | } 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_textarea.scss: -------------------------------------------------------------------------------- 1 | // 👉 Text Area 2 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_timeline.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | @use "sass:map"; 3 | @use "@styles/variables/vuetify"; 4 | @use "@core/scss/base/mixins"; 5 | @use "@core/scss/base/utils"; 6 | 7 | // 👉 Timeline 8 | 9 | .v-timeline { 10 | &:not(.v-timeline--variant-outlined) .v-timeline-divider__dot { 11 | background: none !important; 12 | 13 | .v-timeline-divider__inner-dot { 14 | box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant)); 15 | 16 | @each $color-name in variables.$theme-colors-name { 17 | 18 | &.bg-#{$color-name} { 19 | box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12); 20 | } 21 | } 22 | } 23 | } 24 | 25 | .v-timeline-item { 26 | .timeline-chip { 27 | border-radius: 6px; 28 | background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)); 29 | padding-block: 5px; 30 | padding-inline: 10px; 31 | } 32 | } 33 | 34 | &.v-timeline--variant-outlined { 35 | .v-timeline-item { 36 | .v-timeline-divider { 37 | .v-timeline-divider__dot { 38 | background: none !important; 39 | } 40 | } 41 | 42 | .v-timeline-divider__after { 43 | border: 1px dashed rgba(var(--v-border-color), var(--v-border-opacity)); 44 | background: none; 45 | } 46 | 47 | .v-timeline-divider__before { 48 | background: none; 49 | } 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_tooltip.scss: -------------------------------------------------------------------------------- 1 | // 👉 Tooltip 2 | 3 | .v-tooltip { 4 | .v-overlay__content { 5 | font-weight: 500; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/index.scss: -------------------------------------------------------------------------------- 1 | @use "alert"; 2 | @use "avatar"; 3 | @use "button"; 4 | @use "badge"; 5 | @use "cards"; 6 | @use "chip"; 7 | @use "dialog"; 8 | @use "expansion-panels"; 9 | @use "list"; 10 | @use "menu"; 11 | @use "pagination"; 12 | @use "progress"; 13 | @use "rating"; 14 | @use "snackbar"; 15 | @use "slider"; 16 | @use "table"; 17 | @use "tabs"; 18 | @use "timeline"; 19 | @use "tooltip"; 20 | @use "otp-input"; 21 | @use "field"; 22 | @use "checkbox"; 23 | @use "textarea"; 24 | @use "radio"; 25 | @use "switch"; 26 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/index.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/libs/vuetify"; 2 | @use "overrides"; 3 | @use "components/index"; 4 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/pages/misc.scss: -------------------------------------------------------------------------------- 1 | .layout-blank { 2 | .misc-wrapper { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | justify-content: center; 7 | padding: 1.25rem; 8 | min-block-size: 100dvh; 9 | 10 | .misc-footer-img { 11 | position: absolute; 12 | inline-size: 100%; 13 | inset-block-end: 0; 14 | inset-inline-start: 0; 15 | } 16 | 17 | .misc-footer-tree, .misc-footer-tree-1 { 18 | position: absolute; 19 | } 20 | 21 | .misc-footer-tree { 22 | inset-block-end: 3.75rem; 23 | inset-inline-start: 3.75rem; 24 | } 25 | 26 | .misc-footer-tree-1 { 27 | inset-block-end: 5rem; 28 | inset-inline-end: 4.75rem; 29 | } 30 | 31 | } 32 | 33 | .misc-avatar { 34 | z-index: 1; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/pages/page-auth.scss: -------------------------------------------------------------------------------- 1 | .layout-blank { 2 | .auth-wrapper { 3 | min-block-size: 100dvh; 4 | } 5 | 6 | .auth-footer-mask { 7 | position: absolute; 8 | inset-block-end: 0; 9 | max-inline-size: 100%; 10 | min-inline-size: 100%; 11 | } 12 | 13 | .auth-footer-tree{ 14 | position: absolute !important; 15 | inset-block-end: 70px; 16 | inset-inline-start: 70px; 17 | } 18 | 19 | .auth-footer-start-tree, .auth-footer-end-tree{ 20 | position: absolute !important; 21 | z-index: 1 !important; 22 | } 23 | 24 | .auth-footer-start-tree{ 25 | inset-block-end: 3.75rem; 26 | inset-inline-start: 3.75rem; 27 | } 28 | 29 | .auth-footer-end-tree{ 30 | inset-block-end: 4.625rem; 31 | inset-inline-end: 5rem; 32 | } 33 | 34 | .auth-card, .auth-card-v2, .auth-illustration { 35 | z-index: 1 !important; 36 | } 37 | } 38 | 39 | @media (min-width: 960px) { 40 | .skin--bordered { 41 | .auth-card-v2 { 42 | border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important; 43 | } 44 | } 45 | } 46 | 47 | 48 | .auth-logo { 49 | position: absolute; 50 | z-index: 2; 51 | inset-block-start: 2rem; 52 | inset-inline-start: 2.3rem; 53 | } 54 | 55 | .auth-title{ 56 | font-size: 1.5rem; 57 | font-weight: 600; 58 | letter-spacing: 0.273px; 59 | line-height: normal; 60 | text-transform: capitalize; 61 | } 62 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/placeholders/_default-layout-vertical-nav.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | @use "@core/scss/base/mixins"; 3 | 4 | %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled { 5 | box-shadow: 0 4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%); 6 | 7 | // If navbar is contained => Squeeze navbar content on scroll 8 | @if variables.$layout-vertical-nav-navbar-is-contained { 9 | padding-inline: 1.5rem; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/placeholders/_index.scss: -------------------------------------------------------------------------------- 1 | 2 | @forward "nav"; 3 | @forward "default-layout-vertical-nav"; 4 | @forward "vertical-nav"; 5 | @forward "misc"; 6 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/placeholders/_misc.scss: -------------------------------------------------------------------------------- 1 | %blurry-bg { 2 | /* stylelint-disable property-no-vendor-prefix */ 3 | -webkit-backdrop-filter: blur(9px); 4 | backdrop-filter: blur(9px); 5 | /* stylelint-enable */ 6 | background-color: rgb(var(--v-theme-surface), 0.85); 7 | } 8 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/placeholders/_nav.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/mixins"; 2 | 3 | %nav-link-active { 4 | background: linear-gradient(-72.47deg, rgb(var(--v-theme-primary)) 22.16%, 5 | rgba(var(--v-theme-primary), 0.7) 76.47%) !important; 6 | 7 | i { color: rgb(var(--v-theme-on-primary)) !important; } 8 | 9 | @include mixins.elevation(4); 10 | } 11 | 12 | // ℹ️ This is common style that needs to be applied to both navs 13 | %nav { 14 | .nav-item-title { 15 | line-height: 1.375rem; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /javascript-version/src/@core/utils/colorConverter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Convert Hex color to rgb 3 | * @param hex 4 | */ 5 | export const hexToRgb = hex => { 6 | // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") 7 | const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i 8 | 9 | hex = hex.replace(shorthandRegex, (m, r, g, b) => { 10 | return r + r + g + g + b + b 11 | }) 12 | 13 | const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) 14 | 15 | return result ? `${Number.parseInt(result[1], 16)},${Number.parseInt(result[2], 16)},${Number.parseInt(result[3], 16)}` : null 16 | } 17 | 18 | /** 19 | *RGBA color to Hex color with / without opacity 20 | */ 21 | export const rgbaToHex = (rgba, forceRemoveAlpha = false) => { 22 | return (`#${rgba 23 | .replace(/^rgba?\(|\s+|\)$/g, '') // Get's rgba / rgb string values 24 | .split(',') // splits them at "," 25 | .filter((string, index) => !forceRemoveAlpha || index !== 3) 26 | .map(string => Number.parseFloat(string)) // Converts them to numbers 27 | .map((number, index) => (index === 3 ? Math.round(number * 255) : number)) // Converts alpha to 255 number 28 | .map(number => number.toString(16)) // Converts numbers to hex 29 | .map(string => (string.length === 1 ? `0${string}` : string)) // Adds 0 when length of one number is 1 30 | .join('')}`) 31 | } 32 | -------------------------------------------------------------------------------- /javascript-version/src/@core/utils/formatters.js: -------------------------------------------------------------------------------- 1 | // TODO: Try to implement this: https://twitter.com/fireship_dev/status/1565424801216311297 2 | export const kFormatter = num => { 3 | const regex = /\B(?=(\d{3})+(?!\d))/g 4 | 5 | return Math.abs(num) > 9999 ? `${Math.sign(num) * +((Math.abs(num) / 1000).toFixed(1))}k` : Math.abs(num).toFixed(0).replace(regex, ',') 6 | } 7 | -------------------------------------------------------------------------------- /javascript-version/src/@core/utils/helpers.js: -------------------------------------------------------------------------------- 1 | // 👉 IsEmpty 2 | export const isEmpty = value => { 3 | if (value === null || value === undefined || value === '') 4 | return true 5 | 6 | return !!(Array.isArray(value) && value.length === 0) 7 | } 8 | 9 | // 👉 IsNullOrUndefined 10 | export const isNullOrUndefined = value => { 11 | return value === null || value === undefined 12 | } 13 | 14 | // 👉 IsEmptyArray 15 | export const isEmptyArray = arr => { 16 | return Array.isArray(arr) && arr.length === 0 17 | } 18 | 19 | // 👉 IsObject 20 | export const isObject = obj => obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj) 21 | 22 | // 👉 IsToday 23 | export const isToday = date => { 24 | const today = new Date() 25 | 26 | return (date.getDate() === today.getDate() 27 | && date.getMonth() === today.getMonth() 28 | && date.getFullYear() === today.getFullYear()) 29 | } 30 | -------------------------------------------------------------------------------- /javascript-version/src/@core/utils/plugins.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This is helper function to register plugins like a nuxt 3 | * To register a plugin just export a const function `defineVuePlugin` that takes `app` as argument and call `app.use` 4 | * For Scanning plugins it will include all files in `src/plugins` and `src/plugins/**\/index.ts` 5 | * 6 | * 7 | * @param {App} app Vue app instance 8 | * @returns void 9 | * 10 | * @example 11 | * ```ts 12 | * // File: src/plugins/vuetify/index.ts 13 | * 14 | * import type { App } from 'vue' 15 | * import { createVuetify } from 'vuetify' 16 | * 17 | * const vuetify = createVuetify({ ... }) 18 | * 19 | * export default function (app: App) { 20 | * app.use(vuetify) 21 | * } 22 | * ``` 23 | * 24 | * All you have to do is use this helper function in `main.ts` file like below: 25 | * ```ts 26 | * // File: src/main.ts 27 | * import { registerPlugins } from '@core/utils/plugins' 28 | * import { createApp } from 'vue' 29 | * import App from '@/App.vue' 30 | * 31 | * // Create vue app 32 | * const app = createApp(App) 33 | * 34 | * // Register plugins 35 | * registerPlugins(app) // [!code focus] 36 | * 37 | * // Mount vue app 38 | * app.mount('#app') 39 | * ``` 40 | */ 41 | export const registerPlugins = app => { 42 | const imports = import.meta.glob(['../../plugins/*.{ts,js}', '../../plugins/*/index.{ts,js}'], { eager: true }) 43 | const importPaths = Object.keys(imports).sort() 44 | 45 | importPaths.forEach(path => { 46 | const pluginImportModule = imports[path] 47 | 48 | pluginImportModule.default?.(app) 49 | }) 50 | } 51 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/components.js: -------------------------------------------------------------------------------- 1 | export { default as VerticalNavLayout } from './components/VerticalNavLayout.vue' 2 | export { default as VerticalNavLink } from './components/VerticalNavLink.vue' 3 | export { default as VerticalNavSectionTitle } from './components/VerticalNavSectionTitle.vue' 4 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/components/VerticalNavGroup.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 44 | 45 | 72 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/components/VerticalNavLink.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 38 | 39 | 48 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/components/VerticalNavSectionTitle.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 22 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/enums.js: -------------------------------------------------------------------------------- 1 | export const ContentWidth = { 2 | Fluid: 'fluid', 3 | Boxed: 'boxed', 4 | } 5 | export const NavbarType = { 6 | Sticky: 'sticky', 7 | Static: 'static', 8 | Hidden: 'hidden', 9 | } 10 | export const FooterType = { 11 | Sticky: 'sticky', 12 | Static: 'static', 13 | Hidden: 'hidden', 14 | } 15 | export const AppContentLayoutNav = { 16 | Vertical: 'vertical', 17 | Horizontal: 'horizontal', 18 | } 19 | export const HorizontalNavType = { 20 | Sticky: 'sticky', 21 | Static: 'static', 22 | Hidden: 'hidden', 23 | } 24 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/index.js: -------------------------------------------------------------------------------- 1 | export * from './components' 2 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/styles/_classes.scss: -------------------------------------------------------------------------------- 1 | .cursor-pointer { 2 | cursor: pointer; 3 | } 4 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/styles/_default-layout.scss: -------------------------------------------------------------------------------- 1 | // These are styles which are both common in layout w/ vertical nav & horizontal nav 2 | @use "@layouts/styles/rtl"; 3 | @use "@layouts/styles/placeholders"; 4 | @use "@layouts/styles/mixins"; 5 | @use "@configured-variables" as variables; 6 | 7 | html, 8 | body { 9 | min-block-size: 100%; 10 | } 11 | 12 | .layout-page-content { 13 | @include mixins.boxed-content(true); 14 | 15 | flex-grow: 1; 16 | 17 | // TODO: Use grid gutter variable here 18 | padding-block: 1.5rem; 19 | } 20 | 21 | .layout-footer { 22 | .footer-content-container { 23 | block-size: variables.$layout-vertical-nav-footer-height; 24 | } 25 | 26 | .layout-footer-sticky & { 27 | position: sticky; 28 | inset-block-end: 0; 29 | will-change: transform; 30 | } 31 | 32 | .layout-footer-hidden & { 33 | display: none; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/styles/_global.scss: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | box-sizing: inherit; 5 | background-repeat: no-repeat; 6 | } 7 | 8 | html { 9 | box-sizing: border-box; 10 | } 11 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @use "placeholders"; 2 | @use "@configured-variables" as variables; 3 | 4 | @mixin rtl { 5 | @if variables.$enable-rtl-styles { 6 | [dir="rtl"] & { 7 | @content; 8 | } 9 | } 10 | } 11 | 12 | @mixin boxed-content($nest-selector: false) { 13 | & { 14 | @extend %boxed-content-spacing; 15 | 16 | @at-root { 17 | @if $nest-selector == false { 18 | .layout-content-width-boxed#{&} { 19 | @extend %boxed-content; 20 | } 21 | } 22 | // stylelint-disable-next-line @stylistic/indentation 23 | @else { 24 | .layout-content-width-boxed & { 25 | @extend %boxed-content; 26 | } 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/styles/_placeholders.scss: -------------------------------------------------------------------------------- 1 | // placeholders 2 | @use "@configured-variables" as variables; 3 | 4 | %boxed-content { 5 | @at-root #{&}-spacing { 6 | // TODO: Use grid gutter variable here 7 | padding-inline: 1.5rem; 8 | } 9 | 10 | inline-size: 100%; 11 | margin-inline: auto; 12 | max-inline-size: variables.$layout-boxed-content-width; 13 | } 14 | 15 | %layout-navbar-hidden { 16 | display: none; 17 | } 18 | 19 | // ℹ️ We created this placeholder even it is being used in just layout w/ vertical nav because in future we might apply style to both navbar & horizontal nav separately 20 | %layout-navbar-sticky { 21 | position: sticky; 22 | inset-block-start: 0; 23 | 24 | // will-change: transform; 25 | // inline-size: 100%; 26 | } 27 | 28 | %style-scroll-bar { 29 | /* width */ 30 | 31 | &::-webkit-scrollbar { 32 | background: rgb(var(--v-theme-surface)); 33 | block-size: 8px; 34 | border-end-end-radius: 14px; 35 | border-start-end-radius: 14px; 36 | inline-size: 4px; 37 | } 38 | 39 | /* Track */ 40 | &::-webkit-scrollbar-track { 41 | background: transparent; 42 | } 43 | 44 | /* Handle */ 45 | &::-webkit-scrollbar-thumb { 46 | border-radius: 0.5rem; 47 | background: rgb(var(--v-theme-perfect-scrollbar-thumb)); 48 | } 49 | 50 | &::-webkit-scrollbar-corner { 51 | display: none; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/styles/_rtl.scss: -------------------------------------------------------------------------------- 1 | @use "./mixins"; 2 | 3 | .layout-vertical-nav .nav-group-arrow { 4 | @include mixins.rtl { 5 | transform: rotate(180deg); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | // @use "@styles/style.scss"; 2 | 3 | // 👉 Vertical nav 4 | $layout-vertical-nav-z-index: 12 !default; 5 | $layout-vertical-nav-width: 260px !default; 6 | $layout-vertical-nav-collapsed-width: 80px !default; 7 | $selector-vertical-nav-mini: ".layout-vertical-nav-collapsed .layout-vertical-nav:not(:hover)"; 8 | 9 | // 👉 Horizontal nav 10 | $layout-horizontal-nav-z-index: 11 !default; 11 | $layout-horizontal-nav-navbar-height: 64px !default; 12 | 13 | // 👉 Navbar 14 | $layout-vertical-nav-navbar-height: 64px !default; 15 | $layout-vertical-nav-navbar-is-contained: true !default; 16 | $layout-vertical-nav-layout-navbar-z-index: 11 !default; 17 | $layout-horizontal-nav-layout-navbar-z-index: 11 !default; 18 | 19 | // 👉 Main content 20 | $layout-boxed-content-width: 1440px !default; 21 | 22 | // 👉Footer 23 | $layout-vertical-nav-footer-height: 56px !default; 24 | 25 | // 👉 Layout overlay 26 | $layout-overlay-z-index: 11 !default; 27 | 28 | // 👉 RTL 29 | $enable-rtl-styles: true !default; 30 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/styles/index.scss: -------------------------------------------------------------------------------- 1 | @use "global"; 2 | @use "vue3-perfect-scrollbar/style.css"; 3 | @use "classes"; 4 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/types.js: -------------------------------------------------------------------------------- 1 | export {} 2 | -------------------------------------------------------------------------------- /javascript-version/src/@layouts/utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Convert Hex color to rgb 3 | * @param hex 4 | */ 5 | export const hexToRgb = hex => { 6 | // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") 7 | const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i 8 | 9 | hex = hex.replace(shorthandRegex, (m, r, g, b) => { 10 | return r + r + g + g + b + b 11 | }) 12 | 13 | const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) 14 | 15 | return result ? `${Number.parseInt(result[1], 16)},${Number.parseInt(result[2], 16)},${Number.parseInt(result[3], 16)}` : null 16 | } 17 | -------------------------------------------------------------------------------- /javascript-version/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-1.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-10.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-11.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-12.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-13.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-14.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-15.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-2.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-3.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-4.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-5.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-6.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-7.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-8.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/avatars/avatar-9.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/eCommerce/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/eCommerce/2.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/logos/american-bank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/logos/american-bank.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/logos/aviato.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/logos/aviato.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/logos/aws.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/logos/aws.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/logos/bitbank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/logos/bitbank.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/logos/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/logos/chrome.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/logos/citi-bank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/logos/citi-bank.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/logos/digital-ocean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/logos/digital-ocean.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/logos/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/logos/github.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/logos/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/logos/google.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/logos/gumroad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/logos/gumroad.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/logos/mastercard-label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/logos/mastercard-label.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/logos/slack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/logos/slack.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/logos/stripe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/logos/stripe.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/logos/zipcar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/logos/zipcar.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/misc/trophy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/misc/trophy.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/pages/1.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/pages/2.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/pages/3.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/pages/404.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/pages/5.jpg -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/pages/6.jpg -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/auth-v1-mask-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/pages/auth-v1-mask-dark.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/auth-v1-mask-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/pages/auth-v1-mask-light.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/auth-v1-tree-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/pages/auth-v1-tree-2.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/auth-v1-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/pages/auth-v1-tree.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/misc-mask-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/pages/misc-mask-dark.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/misc-mask-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/pages/misc-mask-light.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/javascript-version/src/assets/images/pages/tree.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/svg/checkbox-checked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /javascript-version/src/assets/images/svg/checkbox-indeterminate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /javascript-version/src/assets/images/svg/checkbox-unchecked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /javascript-version/src/assets/images/svg/radio-checked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /javascript-version/src/assets/images/svg/radio-unchecked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /javascript-version/src/assets/styles/styles.scss: -------------------------------------------------------------------------------- 1 | // Write your overrides 2 | -------------------------------------------------------------------------------- /javascript-version/src/assets/styles/variables/_template.scss: -------------------------------------------------------------------------------- 1 | @forward "@core/scss/template/variables"; 2 | 3 | // ℹ️ Remove above import and uncomment below to override core variables. 4 | // @forward "@core/scss/template/variables" with ( 5 | // $: 6 | // ) 7 | -------------------------------------------------------------------------------- /javascript-version/src/assets/styles/variables/_vuetify.scss: -------------------------------------------------------------------------------- 1 | // ❗ Path must be relative 2 | @forward "../../../@core/scss/template/libs/vuetify/variables"; 3 | 4 | // ℹ️ Remove above import and uncomment below to override core variables. 5 | // @forward "../../../@core/scss/template/libs/vuetify/variables" with ( 6 | // $: 7 | // ) 8 | -------------------------------------------------------------------------------- /javascript-version/src/components/ErrorHeader.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 41 | 42 | 48 | -------------------------------------------------------------------------------- /javascript-version/src/layouts/blank.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /javascript-version/src/layouts/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 42 | -------------------------------------------------------------------------------- /javascript-version/src/layouts/components/NavbarThemeSwitcher.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 17 | -------------------------------------------------------------------------------- /javascript-version/src/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 15 | -------------------------------------------------------------------------------- /javascript-version/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from '@/App.vue' 3 | import { registerPlugins } from '@core/utils/plugins' 4 | 5 | // Styles 6 | import '@core/scss/template/index.scss' 7 | import '@layouts/styles/index.scss' 8 | 9 | // Create vue app 10 | const app = createApp(App) 11 | 12 | 13 | // Register plugins 14 | registerPlugins(app) 15 | 16 | // Mount vue app 17 | app.mount('#app') 18 | -------------------------------------------------------------------------------- /javascript-version/src/pages/[...error].vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 51 | 52 | 61 | -------------------------------------------------------------------------------- /javascript-version/src/pages/card-basic.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | -------------------------------------------------------------------------------- /javascript-version/src/pages/cards.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | -------------------------------------------------------------------------------- /javascript-version/src/pages/typography.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 17 | -------------------------------------------------------------------------------- /javascript-version/src/plugins/iconify/index.js: -------------------------------------------------------------------------------- 1 | import './icons.css'; 2 | export default function () { 3 | // This plugin just requires icons import 4 | } 5 | -------------------------------------------------------------------------------- /javascript-version/src/plugins/iconify/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "commonjs" 3 | } 4 | -------------------------------------------------------------------------------- /javascript-version/src/plugins/pinia.js: -------------------------------------------------------------------------------- 1 | import { createPinia } from 'pinia' 2 | 3 | export const store = createPinia() 4 | export default function (app) { 5 | app.use(store) 6 | } 7 | -------------------------------------------------------------------------------- /javascript-version/src/plugins/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from 'vue-router' 2 | import { routes } from './routes' 3 | 4 | const router = createRouter({ 5 | history: createWebHistory(import.meta.env.BASE_URL), 6 | routes, 7 | }) 8 | 9 | export default function (app) { 10 | app.use(router) 11 | } 12 | export { router } 13 | -------------------------------------------------------------------------------- /javascript-version/src/plugins/router/routes.js: -------------------------------------------------------------------------------- 1 | export const routes = [ 2 | { path: '/', redirect: '/dashboard' }, 3 | { 4 | path: '/', 5 | component: () => import('@/layouts/default.vue'), 6 | children: [ 7 | { 8 | path: 'dashboard', 9 | component: () => import('@/pages/dashboard.vue'), 10 | }, 11 | { 12 | path: 'account-settings', 13 | component: () => import('@/pages/account-settings.vue'), 14 | }, 15 | { 16 | path: 'typography', 17 | component: () => import('@/pages/typography.vue'), 18 | }, 19 | { 20 | path: 'icons', 21 | component: () => import('@/pages/icons.vue'), 22 | }, 23 | { 24 | path: 'cards', 25 | component: () => import('@/pages/cards.vue'), 26 | }, 27 | { 28 | path: 'tables', 29 | component: () => import('@/pages/tables.vue'), 30 | }, 31 | { 32 | path: 'form-layouts', 33 | component: () => import('@/pages/form-layouts.vue'), 34 | }, 35 | ], 36 | }, 37 | { 38 | path: '/', 39 | component: () => import('@/layouts/blank.vue'), 40 | children: [ 41 | { 42 | path: 'login', 43 | component: () => import('@/pages/login.vue'), 44 | }, 45 | { 46 | path: 'register', 47 | component: () => import('@/pages/register.vue'), 48 | }, 49 | { 50 | path: '/:pathMatch(.*)*', 51 | component: () => import('@/pages/[...error].vue'), 52 | }, 53 | ], 54 | }, 55 | ] 56 | -------------------------------------------------------------------------------- /javascript-version/src/plugins/vuetify/index.js: -------------------------------------------------------------------------------- 1 | import { createVuetify } from 'vuetify' 2 | import { VBtn } from 'vuetify/components/VBtn' 3 | import defaults from './defaults' 4 | import { icons } from './icons' 5 | import { themes } from './theme' 6 | 7 | // Styles 8 | import '@core/scss/template/libs/vuetify/index.scss' 9 | import 'vuetify/styles' 10 | 11 | export default function (app) { 12 | const vuetify = createVuetify({ 13 | aliases: { 14 | IconBtn: VBtn, 15 | }, 16 | defaults, 17 | icons, 18 | theme: { 19 | defaultTheme: 'light', 20 | themes, 21 | }, 22 | }) 23 | 24 | app.use(vuetify) 25 | } 26 | -------------------------------------------------------------------------------- /javascript-version/src/plugins/webfontloader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * plugins/webfontloader.js 3 | * 4 | * webfontloader documentation: https://github.com/typekit/webfontloader 5 | */ 6 | export async function loadFonts() { 7 | const webFontLoader = await import(/* webpackChunkName: "webfontloader" */ 'webfontloader') 8 | 9 | webFontLoader.load({ 10 | google: { 11 | api: 'https://fonts.googleapis.com/css2', 12 | families: ['Inter:wght@300;400;500;600;700;900&display=swap'], 13 | }, 14 | }) 15 | } 16 | export default function () { 17 | loadFonts() 18 | } 19 | -------------------------------------------------------------------------------- /javascript-version/src/utils/paginationMeta.js: -------------------------------------------------------------------------------- 1 | export const paginationMeta = (options, total) => { 2 | const start = (options.page - 1) * options.itemsPerPage + 1 3 | const end = Math.min(options.page * options.itemsPerPage, total) 4 | 5 | return `Showing ${total === 0 ? 0 : start} to ${end} of ${total} entries` 6 | } 7 | -------------------------------------------------------------------------------- /javascript-version/src/views/dashboard/AnalyticsAward.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 34 | 35 | 43 | -------------------------------------------------------------------------------- /javascript-version/src/views/pages/authentication/AuthProvider.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | -------------------------------------------------------------------------------- /javascript-version/src/views/user-interface/form-layouts/DemoFormLayoutVerticalForm.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 73 | -------------------------------------------------------------------------------- /javascript-version/src/views/user-interface/typography/TypographyHeadlines.vue: -------------------------------------------------------------------------------- 1 | 48 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.3.0", 3 | "private": true, 4 | "scripts": { 5 | "release": "code -r CHANGELOG.md && node -e \"process.stdin.once('data', () => process.exit())\" && yarn bumpp --all package.json javascript-version/package.json typescript-version/package.json" 6 | }, 7 | "devDependencies": { 8 | "bumpp": "^8.2.1" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /typescript-version/.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | 11 | # Matches multiple files with brace expansion notation 12 | # Set default charset 13 | [*.{js,py}] 14 | charset = utf-8 15 | 16 | # 4 space indentation 17 | [*.py] 18 | indent_style = space 19 | indent_size = 4 20 | 21 | # 2 space indentation 22 | [*.{vue,scss,ts}] 23 | indent_style = space 24 | indent_size = 2 25 | 26 | # Tab indentation (no size specified) 27 | [Makefile] 28 | indent_style = tab 29 | 30 | # Indentation override for all JS under lib directory 31 | [lib/**.js] 32 | indent_style = space 33 | indent_size = 2 34 | 35 | # Matches the exact files either package.json or .travis.yml 36 | [{package.json,.travis.yml}] 37 | indent_style = space 38 | indent_size = 2 39 | -------------------------------------------------------------------------------- /typescript-version/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | /cypress/videos/ 17 | /cypress/screenshots/ 18 | 19 | # 👉 Custom Git ignores 20 | 21 | # Editor directories and files 22 | .vscode/* 23 | !.vscode/extensions.json 24 | !.vscode/settings.json 25 | !.vscode/*.code-snippets 26 | !.vscode/tours 27 | .idea 28 | *.suo 29 | *.ntvs* 30 | *.njsproj 31 | *.sln 32 | *.sw? 33 | .yarn 34 | 35 | # iconify dist files 36 | src/plugins/iconify/icons.css 37 | 38 | # Ignore MSW script 39 | public/mockServiceWorker.js 40 | 41 | # Env files 42 | .env* 43 | !.env.example 44 | -------------------------------------------------------------------------------- /typescript-version/.npmrc: -------------------------------------------------------------------------------- 1 | auto-install-peers=true 2 | shamefully-hoist=true 3 | -------------------------------------------------------------------------------- /typescript-version/.nvmrc: -------------------------------------------------------------------------------- 1 | lts/* 2 | -------------------------------------------------------------------------------- /typescript-version/.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules -------------------------------------------------------------------------------- /typescript-version/.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "htmlWhitespaceSensitivity": "css", 5 | "insertPragma": false, 6 | "jsxBracketSameLine": false, 7 | "jsxSingleQuote": true, 8 | "printWidth": 120, 9 | "proseWrap": "preserve", 10 | "quoteProps": "as-needed", 11 | "requirePragma": false, 12 | "semi": false, 13 | "singleQuote": true, 14 | "tabWidth": 2, 15 | "trailingComma": "all", 16 | "useTabs": false, 17 | "vueIndentScriptAndStyle": false, 18 | "endOfLine": "lf", 19 | "singleAttributePerLine": true 20 | } -------------------------------------------------------------------------------- /typescript-version/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-standard-scss", 4 | "stylelint-config-idiomatic-order", 5 | "@stylistic/stylelint-config" 6 | ], 7 | "plugins": [ 8 | "stylelint-use-logical-spec", 9 | "@stylistic/stylelint-plugin" 10 | ], 11 | "overrides": [ 12 | { 13 | "files": [ 14 | "**/*.scss" 15 | ], 16 | "customSyntax": "postcss-scss" 17 | }, 18 | { 19 | "files": [ 20 | "**/*.vue" 21 | ], 22 | "customSyntax": "postcss-html" 23 | } 24 | ], 25 | "rules": { 26 | "@stylistic/max-line-length": [ 27 | 220, 28 | { 29 | "ignore": "comments" 30 | } 31 | ], 32 | "@stylistic/indentation": 2, 33 | "liberty/use-logical-spec": true, 34 | "selector-class-pattern": null, 35 | "color-function-notation": null, 36 | "annotation-no-unknown": [ 37 | true, 38 | { 39 | "ignoreAnnotations": [ 40 | "default" 41 | ] 42 | } 43 | ], 44 | "media-feature-range-notation": null 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /typescript-version/.vscode/anchor-comments.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "Add hand emoji": { 3 | "prefix": "cm-hand-emoji", 4 | "body": [ 5 | "👉" 6 | ], 7 | "description": "Add hand emoji" 8 | }, 9 | "Add info emoji": { 10 | "prefix": "cm-info-emoji", 11 | "body": [ 12 | "ℹ️" 13 | ], 14 | "description": "Add info emoji" 15 | }, 16 | "Add warning emoji": { 17 | "prefix": "cm-warning-emoji", 18 | "body": [ 19 | "❗" 20 | ], 21 | "description": "Add warning emoji" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /typescript-version/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "editorconfig.editorconfig", 5 | "xabikos.javascriptsnippets", 6 | "stylelint.vscode-stylelint", 7 | "fabiospampinato.vscode-highlight", 8 | "github.vscode-pull-request-github", 9 | "vue.volar", 10 | "antfu.iconify", 11 | "cipchk.cssrem", 12 | "matijao.vue-nuxt-snippets", 13 | "dongido.sync-env" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /typescript-version/.vscode/vue-ts.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "Vue TS - DefineProps": { 3 | "prefix": "dprops", 4 | "body": [ 5 | "defineProps<${1:Props}>()" 6 | ], 7 | "description": "DefineProps in script setup" 8 | }, 9 | "Vue TS - Props interface": { 10 | "prefix": "iprops", 11 | "body": [ 12 | "interface Props {", 13 | " ${1}", 14 | "}" 15 | ], 16 | "description": "Create props interface in script setup" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /typescript-version/.vscode/vuetify.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "Vuetify Menu -- Parent Activator": { 3 | "prefix": "v-menu", 4 | "body": [ 5 | "", 6 | " Activator", 7 | " ", 8 | " ", 9 | " ", 14 | " {{ item }}", 15 | " ", 16 | " ", 17 | " ", 18 | "" 19 | ], 20 | "description": "We use menu component with parent activator mostly because it is compact and easy to understand." 21 | }, 22 | "Vuetify CSS variable": { 23 | "prefix": "v-css-var", 24 | "body": [ 25 | "rgb(var(--v-${1:theme}))" 26 | ], 27 | "description": "Vuetify CSS variable" 28 | }, 29 | "Icon only button": { 30 | "prefix": "IconBtn", 31 | "body": [ 32 | "", 33 | " ", 34 | "" 35 | ], 36 | "description": "Icon only button" 37 | }, 38 | "Radio Group": { 39 | "prefix": "v-radio-grp", 40 | "body": [ 41 | "", 42 | " ", 48 | "" 49 | ], 50 | "description": "Radio Group" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /typescript-version/README.md: -------------------------------------------------------------------------------- 1 | # vue 2 | 3 | This template should help get you started developing with Vue 3 in Vite. 4 | 5 | ## Recommended IDE Setup 6 | 7 | [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). 8 | 9 | ## Type Support for `.vue` Imports in TS 10 | 11 | Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. 12 | 13 | However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VS Code command palette. 14 | 15 | ## Customize configuration 16 | 17 | See [Vite Configuration Reference](https://vitejs.dev/config/). 18 | 19 | ## Project Setup 20 | 21 | ```sh 22 | npm install 23 | ``` 24 | 25 | ### Compile and Hot-Reload for Development 26 | 27 | ```sh 28 | npm run dev 29 | ``` 30 | 31 | ### Type-Check, Compile and Minify for Production 32 | 33 | ```sh 34 | npm run build 35 | ``` 36 | -------------------------------------------------------------------------------- /typescript-version/components.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | // @ts-nocheck 3 | // Generated by unplugin-vue-components 4 | // Read more: https://github.com/vuejs/core/pull/3399 5 | export {} 6 | 7 | /* prettier-ignore */ 8 | declare module 'vue' { 9 | export interface GlobalComponents { 10 | CardStatisticsHorizontal: typeof import('./src/@core/components/cards/CardStatisticsHorizontal.vue')['default'] 11 | CardStatisticsVertical: typeof import('./src/@core/components/cards/CardStatisticsVertical.vue')['default'] 12 | CardStatisticsWithImages: typeof import('./src/@core/components/cards/CardStatisticsWithImages.vue')['default'] 13 | ErrorHeader: typeof import('./src/components/ErrorHeader.vue')['default'] 14 | MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default'] 15 | RouterLink: typeof import('vue-router')['RouterLink'] 16 | RouterView: typeof import('vue-router')['RouterView'] 17 | ThemeSwitcher: typeof import('./src/@core/components/ThemeSwitcher.vue')['default'] 18 | UpgradeToPro: typeof import('./src/components/UpgradeToPro.vue')['default'] 19 | VueApexCharts: typeof import('vue3-apexcharts')['default'] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /typescript-version/env.d.ts: -------------------------------------------------------------------------------- 1 | import 'vue-router' 2 | declare module 'vue-router' { 3 | interface RouteMeta { 4 | action?: string 5 | subject?: string 6 | layoutWrapperClasses?: string 7 | navActiveLink?: RouteLocationRaw 8 | layout?: 'blank' | 'default' 9 | unauthenticatedOnly?: boolean 10 | public?: boolean 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /typescript-version/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/public/favicon.ico -------------------------------------------------------------------------------- /typescript-version/public/images/avatars/avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/public/images/avatars/avatar-1.png -------------------------------------------------------------------------------- /typescript-version/public/loader.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | html { 6 | overflow-x: hidden; 7 | overflow-y: scroll; 8 | } 9 | 10 | #loading-bg { 11 | position: absolute; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | background: var(--initial-loader-bg, #fff); 17 | block-size: 100%; 18 | gap: 1rem 0; 19 | inline-size: 100%; 20 | } 21 | 22 | .loading { 23 | position: relative; 24 | box-sizing: border-box; 25 | border: 3px solid transparent; 26 | border-radius: 50%; 27 | block-size: 55px; 28 | inline-size: 55px; 29 | } 30 | 31 | .loading .effect-1, 32 | .loading .effect-2, 33 | .loading .effect-3 { 34 | position: absolute; 35 | box-sizing: border-box; 36 | border: 3px solid transparent; 37 | border-radius: 50%; 38 | block-size: 100%; 39 | border-inline-start: 3px solid var(--initial-loader-color, #eee); 40 | inline-size: 100%; 41 | } 42 | 43 | .loading .effect-1 { 44 | animation: rotate 1s ease infinite; 45 | } 46 | 47 | .loading .effect-2 { 48 | animation: rotate-opacity 1s ease infinite 0.1s; 49 | } 50 | 51 | .loading .effect-3 { 52 | animation: rotate-opacity 1s ease infinite 0.2s; 53 | } 54 | 55 | .loading .effects { 56 | transition: all 0.3s ease; 57 | } 58 | 59 | @keyframes rotate { 60 | 0% { 61 | transform: rotate(0deg); 62 | } 63 | 64 | 100% { 65 | transform: rotate(1turn); 66 | } 67 | } 68 | 69 | @keyframes rotate-opacity { 70 | 0% { 71 | opacity: 0.1; 72 | transform: rotate(0deg); 73 | } 74 | 75 | 100% { 76 | opacity: 1; 77 | transform: rotate(1turn); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /typescript-version/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/public/logo.png -------------------------------------------------------------------------------- /typescript-version/shims.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { DefineComponent } from 'vue' 3 | 4 | const component: DefineComponent<{}, {}, any> 5 | export default component 6 | } 7 | 8 | 9 | declare module 'vue-prism-component' { 10 | import { ComponentOptions } from 'vue' 11 | const component: ComponentOptions 12 | export default component 13 | } 14 | declare module 'vue-shepherd'; 15 | -------------------------------------------------------------------------------- /typescript-version/src/@core/components/MoreBtn.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 29 | -------------------------------------------------------------------------------- /typescript-version/src/@core/components/ThemeSwitcher.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 34 | -------------------------------------------------------------------------------- /typescript-version/src/@core/components/cards/CardStatisticsHorizontal.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 54 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/base/_dark.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | 3 | // ———————————————————————————————————— 4 | // * ——— Perfect Scrollbar 5 | // ———————————————————————————————————— 6 | 7 | body.v-theme--dark { 8 | .ps__rail-y, 9 | .ps__rail-x { 10 | background-color: transparent !important; 11 | } 12 | 13 | .ps__thumb-y { 14 | background-color: variables.$plugin-ps-thumb-y-dark; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/base/_default-layout.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/placeholders"; 2 | @use "@core/scss/base/variables"; 3 | 4 | .layout-vertical-nav, 5 | .layout-horizontal-nav { 6 | ol, 7 | ul { 8 | list-style: none; 9 | } 10 | } 11 | 12 | .layout-navbar { 13 | @if variables.$navbar-high-emphasis-text { 14 | @extend %layout-navbar; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/base/_index.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | 3 | // Layout 4 | @use "vertical-nav"; 5 | @use "default-layout"; 6 | @use "default-layout-w-vertical-nav"; 7 | 8 | // Layouts package 9 | @use "layouts"; 10 | 11 | // Components 12 | @use "components"; 13 | 14 | // Utilities 15 | @use "utilities"; 16 | 17 | // Misc 18 | @use "misc"; 19 | 20 | // Dark 21 | @use "dark"; 22 | 23 | // libs 24 | @use "libs/perfect-scrollbar"; 25 | 26 | a { 27 | color: rgb(var(--v-theme-primary)); 28 | text-decoration: none; 29 | } 30 | 31 | // Vuetify 3 don't provide margin bottom style like vuetify 2 32 | p { 33 | margin-block-end: 1rem; 34 | } 35 | 36 | // Iconify icon size 37 | svg.iconify { 38 | block-size: 1em; 39 | inline-size: 1em; 40 | } 41 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/base/_misc.scss: -------------------------------------------------------------------------------- 1 | // ℹ️ scrollable-content allows creating fixed header and scrollable content for VNavigationDrawer (Used when perfect scrollbar is used) 2 | .scrollable-content { 3 | &.v-navigation-drawer { 4 | .v-navigation-drawer__content { 5 | display: flex; 6 | overflow: hidden; 7 | flex-direction: column; 8 | } 9 | } 10 | } 11 | 12 | // ℹ️ adding styling for code tag 13 | code { 14 | border-radius: 3px; 15 | color: rgb(var(--v-code-color)); 16 | font-size: 90%; 17 | font-weight: 400; 18 | padding-block: 0.2em; 19 | padding-inline: 0.4em; 20 | } 21 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/base/libs/_perfect-scrollbar.scss: -------------------------------------------------------------------------------- 1 | $ps-size: 0.25rem; 2 | $ps-hover-size: 0.375rem; 3 | $ps-track-size: 0.5rem; 4 | 5 | .ps__thumb-y { 6 | inline-size: $ps-size !important; 7 | inset-inline-end: 0.0625rem; 8 | } 9 | 10 | .ps__thumb-y, 11 | .ps__thumb-x { 12 | background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important; 13 | } 14 | 15 | .ps__thumb-x { 16 | block-size: $ps-size !important; 17 | } 18 | 19 | .ps__rail-x { 20 | background: transparent !important; 21 | block-size: $ps-track-size; 22 | } 23 | 24 | .ps__rail-y { 25 | background: transparent !important; 26 | inline-size: $ps-track-size !important; 27 | inset-inline-end: 0.125rem !important; 28 | inset-inline-start: unset !important; 29 | } 30 | 31 | .ps__rail-y.ps--clicking .ps__thumb-y, 32 | .ps__rail-y:focus > .ps__thumb-y, 33 | .ps__rail-y:hover > .ps__thumb-y { 34 | inline-size: $ps-hover-size !important; 35 | } 36 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/base/libs/vuetify/_index.scss: -------------------------------------------------------------------------------- 1 | @use "overrides"; 2 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/base/placeholders/_default-layout.scss: -------------------------------------------------------------------------------- 1 | %layout-navbar { 2 | color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); 3 | } 4 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/base/placeholders/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "vertical-nav"; 2 | @forward "nav"; 3 | @forward "default-layout"; 4 | @forward "default-layout-vertical-nav"; 5 | @forward "misc"; 6 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/base/placeholders/_misc.scss: -------------------------------------------------------------------------------- 1 | %blurry-bg { 2 | /* stylelint-disable property-no-vendor-prefix */ 3 | -webkit-backdrop-filter: blur(6px); 4 | backdrop-filter: blur(6px); 5 | /* stylelint-enable */ 6 | background-color: rgb(var(--v-theme-surface), 0.9); 7 | } 8 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/base/placeholders/_nav.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/mixins"; 2 | 3 | // ℹ️ This is common style that needs to be applied to both navs 4 | %nav { 5 | color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); 6 | 7 | .nav-item-title { 8 | letter-spacing: 0.15px; 9 | } 10 | 11 | .nav-section-title { 12 | letter-spacing: 0.4px; 13 | } 14 | } 15 | 16 | /* 17 | Active nav link styles for horizontal & vertical nav 18 | 19 | For horizontal nav it will be only applied to top level nav items 20 | For vertical nav it will be only applied to nav links (not nav groups) 21 | */ 22 | %nav-link-active { 23 | background-color: rgb(var(--v-theme-primary)); 24 | color: rgb(var(--v-theme-on-primary)); 25 | 26 | @include mixins.elevation(3); 27 | } 28 | 29 | %nav-link { 30 | a { 31 | color: inherit; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/_default-layout-w-vertical-nav.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | @use "@core/scss/base/mixins"; 3 | 4 | $header: ".layout-navbar"; 5 | 6 | @if variables.$layout-vertical-nav-navbar-is-contained { 7 | $header: ".layout-navbar .navbar-content-container"; 8 | } 9 | 10 | .layout-wrapper.layout-nav-type-vertical { 11 | // 👉 Layout footer 12 | .layout-footer { 13 | $ele-layout-footer: &; 14 | 15 | .footer-content-container { 16 | // Sticky footer 17 | @at-root { 18 | // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer 19 | .layout-footer-sticky#{$ele-layout-footer} { 20 | .footer-content-container { 21 | box-shadow: 0 -4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%); 22 | padding-inline: 1.5rem; 23 | } 24 | } 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/_mixins.scss: -------------------------------------------------------------------------------- 1 | @use "vuetify/lib/styles/settings" as vuetify_settings; 2 | 3 | @mixin avatar-font-sizes($map: $avatar-sizes) { 4 | @each $sizeName, $multiplier in vuetify_settings.$size-scales { 5 | /* stylelint-disable-next-line scss/no-global-function-names */ 6 | $size: map-get($map, $sizeName); 7 | 8 | &.v-avatar--size-#{$sizeName} { 9 | font-size: #{$size}px; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/_utilities.scss: -------------------------------------------------------------------------------- 1 | .v-timeline{ 2 | .v-timeline-item { 3 | .app-timeline-title { 4 | color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); 5 | font-size: 15px; 6 | font-weight: 500; 7 | letter-spacing: 0.15px; 8 | line-height: 1.375rem; 9 | } 10 | 11 | .app-timeline-meta { 12 | color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)); 13 | font-size: 13px; 14 | letter-spacing: 0.4px; 15 | line-height: 1.125rem; 16 | } 17 | 18 | .app-timeline-text { 19 | color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); 20 | font-size: .9375rem; 21 | line-height: 1.375rem; 22 | } 23 | } 24 | } 25 | 26 | .per-page-select { 27 | margin-block: auto; 28 | 29 | .v-field__input { 30 | align-items: center; 31 | padding: 2px; 32 | } 33 | 34 | .v-field__append-inner { 35 | align-items: center; 36 | padding: 0; 37 | 38 | .v-icon { 39 | margin-inline-start: 0 !important; 40 | } 41 | } 42 | } 43 | 44 | .leading-normal { 45 | font-weight: 600; 46 | letter-spacing: .0094rem; 47 | } 48 | 49 | .bg-custom-background{ 50 | background-color: rgb(var(--v-table-header-color)) !important; 51 | } 52 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/_utils.scss: -------------------------------------------------------------------------------- 1 | @use "sass:string"; 2 | 3 | /* 4 | ℹ️ This function is helpful when we have multi dimensional value 5 | 6 | Assume we have padding variable `$nav-padding-horizontal: 10px;` 7 | With above variable let's say we use it in some style: 8 | ```scss 9 | .selector { 10 | margin-left: $nav-padding-horizontal; 11 | } 12 | ``` 13 | 14 | Now, problem is we can also have value as `$nav-padding-horizontal: 10px 15px;` 15 | In this case above style will be invalid. 16 | 17 | This function will extract the left most value from the variable value. 18 | 19 | $nav-padding-horizontal: 10px; => 10px; 20 | $nav-padding-horizontal: 10px 15px; => 10px; 21 | 22 | This is safe: 23 | ```scss 24 | .selector { 25 | margin-left: get-first-value($nav-padding-horizontal); 26 | } 27 | ``` 28 | */ 29 | @function get-first-value($var) { 30 | $start-at: string.index(#{$var}, " "); 31 | 32 | @if $start-at { 33 | @return string.slice( 34 | #{$var}, 35 | 0, 36 | $start-at 37 | ); 38 | } @else { 39 | @return $var; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/_vertical-nav.scss: -------------------------------------------------------------------------------- 1 | @use "@layouts/styles/mixins" as layoutsMixins; 2 | 3 | .layout-nav-type-vertical { 4 | // 👉 Layout Vertical nav 5 | .layout-vertical-nav { 6 | .nav-items{ 7 | padding-block-start: .25rem; 8 | } 9 | 10 | // 👉 Vertical nav group 11 | .nav-group { 12 | .nav-group-arrow { 13 | font-size: 1.375rem; 14 | } 15 | } 16 | 17 | // 👉 Nav group & Link 18 | .nav-link, 19 | .nav-group { 20 | // shadow cut issue fix 21 | margin-block-end: -0.5rem; 22 | padding-block-end: 0.5rem; 23 | 24 | a { 25 | outline: none; 26 | } 27 | } 28 | 29 | // 👉 Nav section title 30 | .nav-section-title { 31 | .placeholder-icon { 32 | transform: translateX(-3px); 33 | 34 | @include layoutsMixins.rtl { 35 | transform: translateX(3px); 36 | } 37 | } 38 | } 39 | 40 | // 👉 Nav header 41 | .nav-header { 42 | padding-block: 1.25rem; 43 | padding-inline: 23px 0; 44 | } 45 | } 46 | } 47 | 48 | // 👉 Overlay 49 | .layout-overlay{ 50 | touch-action: none; 51 | } 52 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/index.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "@core/scss/base"; 3 | 4 | // layouts 5 | @use "vertical-nav"; 6 | @use "default-layout-w-vertical-nav"; 7 | 8 | // Utilities 9 | @use "utilities"; 10 | 11 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/_overrides.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/utils"; 2 | @use "@configured-variables" as variables; 3 | 4 | // 👉 Body 5 | // set body font size 15px 6 | body { 7 | font-size: 15px !important; 8 | } 9 | 10 | // 👉 Typography 11 | .text-h1, 12 | .text-h2, 13 | .text-h3, 14 | .text-h4, 15 | .text-h5, 16 | .text-h6, 17 | .text-overline, 18 | .v-input { 19 | color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); 20 | } 21 | 22 | .text-caption{ 23 | color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)); 24 | } 25 | 26 | .v-card-subtitle, 27 | .text-subtitle-1, 28 | .text-subtitle-2 { 29 | color: rgba(var(--v-theme-on-background), 0.55); 30 | } 31 | 32 | // 👉 Input placeholder alignment 33 | .v-input--density-compact{ 34 | input::placeholder { 35 | position: relative; 36 | inset-block-start: 1px; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_avatar.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/mixins"; 2 | 3 | // 👉 Avatar 4 | body { 5 | .v-avatar { 6 | font-size: 0.9375rem; 7 | 8 | .v-icon { 9 | block-size: 1.5rem; 10 | font-size: 1.5rem; 11 | inline-size: 1.5rem; 12 | } 13 | 14 | &.v-avatar--variant-tonal:not([class*="text-"]) { 15 | .v-avatar__underlay { 16 | --v-activated-opacity: 0.08; 17 | } 18 | } 19 | } 20 | 21 | .v-avatar-group { 22 | > * { 23 | &:hover { 24 | @include mixins.elevation(6); 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_badge.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | 3 | // 👉 Badge 4 | .v-badge { 5 | &.v-badge--inline:not(.v-badge--dot) { 6 | .v-badge__wrapper { 7 | .v-badge__badge { 8 | padding-block: 4px; 9 | padding-inline: 8px; 10 | } 11 | } 12 | } 13 | 14 | &.v-badge--tonal { 15 | @each $color-name in variables.$theme-colors-name { 16 | .v-badge__wrapper { 17 | .v-badge__badge.bg-#{$color-name} { 18 | background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important; 19 | color: rgb(var(--v-theme-#{$color-name})) !important; 20 | } 21 | } 22 | } 23 | } 24 | 25 | /* stylelint-disable-next-line no-descending-specificity */ 26 | &.v-badge--bordered.v-badge--dot .v-badge__badge { 27 | border-radius: 10px; 28 | block-size: 12px; 29 | inline-size: 12px; 30 | 31 | &::after { 32 | border-width: 2px; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_cards.scss: -------------------------------------------------------------------------------- 1 | // 👉 Card 2 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_checkbox.scss: -------------------------------------------------------------------------------- 1 | @use "sass:list"; 2 | @use "sass:map"; 3 | @use "@styles/variables/vuetify"; 4 | @use "@configured-variables" as variables; 5 | 6 | // 👉 checkbox box shadow 7 | .v-checkbox-btn { 8 | &.v-selection-control--dirty { 9 | .v-selection-control__input { 10 | .v-icon.custom-checkbox-checked, 11 | .v-icon.custom-checkbox-indeterminate { 12 | // ℹ️ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG;Usingfilter 13 | filter: drop-shadow(rgba(var(--v-shadow-key-umbra-color), 16%) 0 2px 4px); 14 | } 15 | } 16 | } 17 | 18 | &.v-selection-control { 19 | .v-label { 20 | color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); 21 | } 22 | 23 | .v-selection-control__input { 24 | svg { 25 | font-size: 1.5rem; 26 | } 27 | } 28 | } 29 | 30 | &:not(.v-selection-control--dirty) { 31 | .v-selection-control__input { 32 | > .v-icon { 33 | color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); 34 | opacity: 1; 35 | } 36 | 37 | > .custom-checkbox-indeterminate { 38 | color: rgb(var(--v-theme-primary)); 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_dialog.scss: -------------------------------------------------------------------------------- 1 | // 👉 Dialog 2 | 3 | body { 4 | .v-dialog { 5 | font-size: 0.9375rem; 6 | line-height: 1.375rem; 7 | 8 | .v-dialog-close-btn { 9 | color: rgb(var(--v-theme-secondary)) !important; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_expansion-panels.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/mixins"; 2 | 3 | // 👉 Expansion Panel 4 | .v-expansion-panels { 5 | .v-expansion-panel { 6 | .v-expansion-panel-title { 7 | font-weight: 500; 8 | 9 | &--active { 10 | .v-expansion-panel-title__overlay, 11 | &:hover .v-expansion-panel-title__overlay { 12 | opacity: 0 !important; 13 | } 14 | } 15 | 16 | .v-expansion-panel-title__icon { 17 | .v-icon { 18 | block-size: 1.25rem; 19 | font-size: 1.25rem; 20 | inline-size: 1.25rem; 21 | } 22 | } 23 | 24 | &:hover { 25 | .v-expansion-panel-title__overlay { 26 | opacity: 0 !important; 27 | } 28 | } 29 | } 30 | 31 | .v-expansion-panel-text { 32 | color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); 33 | font-size: 15px; 34 | line-height: 1.375rem; 35 | } 36 | } 37 | 38 | &:not(.v-expansion-panels--variant-accordion) { 39 | .v-expansion-panel { 40 | &.v-expansion-panel--active { 41 | .v-expansion-panel__shadow { 42 | @include mixins.elevation(6); 43 | } 44 | } 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_list.scss: -------------------------------------------------------------------------------- 1 | // 👉 VList 2 | 3 | .v-list { 4 | // .v-icon { 5 | // font-size: 1.375rem;font-sizefont-size 6 | // } 7 | 8 | .v-list-item { 9 | &.v-list-item--active:not(.v-list-group__header) { 10 | .v-list-item__content, 11 | .v-list-item__prepend { 12 | * { 13 | color: rgb(var(--v-theme-primary)); 14 | } 15 | } 16 | 17 | .v-list-item__overlay { 18 | background: rgb(var(--v-theme-primary)); 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_menu.scss: -------------------------------------------------------------------------------- 1 | // 👉 VMenu 2 | .v-menu { 3 | .v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line { 4 | padding-inline: 16px; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_otp-input.scss: -------------------------------------------------------------------------------- 1 | // 👉 Otp input 2 | 3 | .v-otp-input { 4 | justify-content: unset !important; 5 | 6 | .v-otp-input__content { 7 | max-inline-size: 100%; 8 | 9 | .v-field.v-field--focused { 10 | .v-field__outline { 11 | .v-field__outline__start, 12 | .v-field__outline__end { 13 | border-color: rgb(var(--v-theme-primary)) !important; 14 | } 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_progress.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | 3 | // 👉 Progress 4 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_radio.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/mixins"; 2 | @use "@configured-variables" as variables; 3 | 4 | // 👉 Radio 5 | .v-radio, 6 | .v-radio-btn { 7 | &.v-selection-control--dirty { 8 | .v-selection-control__input { 9 | .custom-radio-checked { 10 | filter: drop-shadow(rgba(var(--v-shadow-key-umbra-color), 16%) 0 2px 4px); 11 | } 12 | } 13 | } 14 | 15 | &.v-selection-control { 16 | .v-selection-control__input { 17 | svg { 18 | font-size: 1.5rem; 19 | } 20 | } 21 | 22 | .v-label { 23 | color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); 24 | } 25 | } 26 | 27 | &:not(.v-selection-control--dirty) { 28 | .v-selection-control__input > .v-icon { 29 | color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); 30 | opacity: 1; 31 | } 32 | } 33 | } 34 | 35 | .v-radio-group.v-input > .v-input__control > .v-label { 36 | font-size: 0.9375rem; 37 | line-height: 22px; 38 | margin-inline-start: 0; 39 | } 40 | 41 | .v-radio-group { 42 | .v-selection-control-group { 43 | .v-radio:not(:last-child) { 44 | margin-inline-end: 0; 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_rating.scss: -------------------------------------------------------------------------------- 1 | // // 👉 Rating 2 | // .v-rating { 3 | // .v-rating__wrapper { 4 | // .v-btn { 5 | // &:hover { 6 | // transform: none;transform 7 | // } 8 | 9 | // .v-icon { 10 | // --v-icon-size-multiplier: 1;--v-icon-size-multiplier 11 | // } 12 | // } 13 | // } 14 | // } 15 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_slider.scss: -------------------------------------------------------------------------------- 1 | // 👉 Slider 2 | 3 | .v-slider { 4 | .v-slider-track__background--opacity { 5 | opacity: 0.16; 6 | } 7 | } 8 | 9 | .v-slider-thumb { 10 | .v-slider-thumb__surface::after { 11 | border-radius: 50%; 12 | background-color: #fff; 13 | block-size: calc(var(--v-slider-thumb-size) - 10px); 14 | inline-size: calc(var(--v-slider-thumb-size) - 10px); 15 | } 16 | 17 | .v-slider-thumb__label { 18 | background-color: rgb(var(--v-tooltip-background)); 19 | color: rgb(var(--v-theme-surface)); 20 | font-weight: 500; 21 | letter-spacing: 0.15px; 22 | line-height: 1.25rem; 23 | 24 | &::before { 25 | content: none; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_snackbar.scss: -------------------------------------------------------------------------------- 1 | // 👉 snackbar 2 | 3 | .v-snackbar { 4 | .v-snackbar__actions { 5 | .v-btn { 6 | padding-block: 0; 7 | padding-inline: 10px; 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_switch.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | @use "@core/scss/base/mixins"; 3 | 4 | // 👉 Switch 5 | 6 | .v-switch { 7 | .v-label { 8 | color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); 9 | line-height: 22px; 10 | } 11 | } 12 | 13 | .v-switch.v-switch--inset { 14 | .v-selection-control .v-selection-control__wrapper { 15 | block-size: 36px; 16 | } 17 | 18 | .v-ripple__container { 19 | opacity: 0; 20 | } 21 | 22 | .v-switch__track { 23 | background-color: rgba(var(--v-theme-on-surface), var(--v-focus-opacity)); 24 | box-shadow: 0 0 4px 0 rgba(0, 0, 0, 16%) inset; 25 | opacity: 1; 26 | } 27 | 28 | .v-selection-control__input { 29 | transform: translateX(-5px) !important; 30 | 31 | --v-selection-control-size: 1.125rem; 32 | 33 | .v-switch__thumb { 34 | background-color: #fff; 35 | block-size: 0.875rem; 36 | box-shadow: none; 37 | filter: drop-shadow(0 2px 4px rgba(var(--v-shadow-key-umbra-color), 16%)); 38 | inline-size: 0.875rem; 39 | transform: scale(1); 40 | } 41 | } 42 | 43 | .v-selection-control--dirty { 44 | @each $color-name in variables.$theme-colors-name { 45 | .text-#{$color-name} { 46 | .v-switch__track { 47 | border-color: rgb(var(--v-theme-#{$color-name})); 48 | background-color: rgb(var(--v-theme-#{$color-name})); 49 | } 50 | } 51 | } 52 | 53 | .v-selection-control__input { 54 | transform: translateX(5px) !important; 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_table.scss: -------------------------------------------------------------------------------- 1 | .v-data-table { 2 | table { 3 | tbody { 4 | tr { 5 | &.v-data-table-group-header-row { 6 | td { 7 | background: none; 8 | } 9 | } 10 | } 11 | } 12 | } 13 | } 14 | 15 | // 👉 Table 16 | .v-table { 17 | .v-table__wrapper { 18 | border-radius: 0; 19 | 20 | table { 21 | thead { 22 | tr { 23 | th { 24 | background: rgb(var(--v-table-header-color)) !important; 25 | border-block-end: none !important; 26 | color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important; 27 | font-size: 0.8125rem; 28 | letter-spacing: 0.2px; 29 | line-height: 24px; 30 | text-transform: uppercase; 31 | } 32 | } 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_textarea.scss: -------------------------------------------------------------------------------- 1 | // 👉 Text Area 2 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_timeline.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | @use "sass:map"; 3 | @use "@styles/variables/vuetify"; 4 | @use "@core/scss/base/mixins"; 5 | @use "@core/scss/base/utils"; 6 | 7 | // 👉 Timeline 8 | 9 | .v-timeline { 10 | &:not(.v-timeline--variant-outlined) .v-timeline-divider__dot { 11 | background: none !important; 12 | 13 | .v-timeline-divider__inner-dot { 14 | box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant)); 15 | 16 | @each $color-name in variables.$theme-colors-name { 17 | 18 | &.bg-#{$color-name} { 19 | box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12); 20 | } 21 | } 22 | } 23 | } 24 | 25 | .v-timeline-item { 26 | .timeline-chip { 27 | border-radius: 6px; 28 | background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)); 29 | padding-block: 5px; 30 | padding-inline: 10px; 31 | } 32 | } 33 | 34 | &.v-timeline--variant-outlined { 35 | .v-timeline-item { 36 | .v-timeline-divider { 37 | .v-timeline-divider__dot { 38 | background: none !important; 39 | } 40 | } 41 | 42 | .v-timeline-divider__after { 43 | border: 1px dashed rgba(var(--v-border-color), var(--v-border-opacity)); 44 | background: none; 45 | } 46 | 47 | .v-timeline-divider__before { 48 | background: none; 49 | } 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_tooltip.scss: -------------------------------------------------------------------------------- 1 | // 👉 Tooltip 2 | 3 | .v-tooltip { 4 | .v-overlay__content { 5 | font-weight: 500; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/index.scss: -------------------------------------------------------------------------------- 1 | @use "alert"; 2 | @use "avatar"; 3 | @use "button"; 4 | @use "badge"; 5 | @use "cards"; 6 | @use "chip"; 7 | @use "dialog"; 8 | @use "expansion-panels"; 9 | @use "list"; 10 | @use "menu"; 11 | @use "pagination"; 12 | @use "progress"; 13 | @use "rating"; 14 | @use "snackbar"; 15 | @use "slider"; 16 | @use "table"; 17 | @use "tabs"; 18 | @use "timeline"; 19 | @use "tooltip"; 20 | @use "otp-input"; 21 | @use "field"; 22 | @use "checkbox"; 23 | @use "textarea"; 24 | @use "radio"; 25 | @use "switch"; 26 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/index.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/libs/vuetify"; 2 | @use "overrides"; 3 | @use "components/index"; 4 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/pages/misc.scss: -------------------------------------------------------------------------------- 1 | .layout-blank { 2 | .misc-wrapper { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | justify-content: center; 7 | padding: 1.25rem; 8 | min-block-size: 100dvh; 9 | 10 | .misc-footer-img { 11 | position: absolute; 12 | inline-size: 100%; 13 | inset-block-end: 0; 14 | inset-inline-start: 0; 15 | } 16 | 17 | .misc-footer-tree, .misc-footer-tree-1 { 18 | position: absolute; 19 | } 20 | 21 | .misc-footer-tree { 22 | inset-block-end: 3.75rem; 23 | inset-inline-start: 3.75rem; 24 | } 25 | 26 | .misc-footer-tree-1 { 27 | inset-block-end: 5rem; 28 | inset-inline-end: 4.75rem; 29 | } 30 | 31 | } 32 | 33 | .misc-avatar { 34 | z-index: 1; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/pages/page-auth.scss: -------------------------------------------------------------------------------- 1 | .layout-blank { 2 | .auth-wrapper { 3 | min-block-size: 100dvh; 4 | } 5 | 6 | .auth-footer-mask { 7 | position: absolute; 8 | inset-block-end: 0; 9 | max-inline-size: 100%; 10 | min-inline-size: 100%; 11 | } 12 | 13 | .auth-footer-tree{ 14 | position: absolute !important; 15 | inset-block-end: 70px; 16 | inset-inline-start: 70px; 17 | } 18 | 19 | .auth-footer-start-tree, .auth-footer-end-tree{ 20 | position: absolute !important; 21 | z-index: 1 !important; 22 | } 23 | 24 | .auth-footer-start-tree{ 25 | inset-block-end: 3.75rem; 26 | inset-inline-start: 3.75rem; 27 | } 28 | 29 | .auth-footer-end-tree{ 30 | inset-block-end: 4.625rem; 31 | inset-inline-end: 5rem; 32 | } 33 | 34 | .auth-card, .auth-card-v2, .auth-illustration { 35 | z-index: 1 !important; 36 | } 37 | } 38 | 39 | @media (min-width: 960px) { 40 | .skin--bordered { 41 | .auth-card-v2 { 42 | border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important; 43 | } 44 | } 45 | } 46 | 47 | 48 | .auth-logo { 49 | position: absolute; 50 | z-index: 2; 51 | inset-block-start: 2rem; 52 | inset-inline-start: 2.3rem; 53 | } 54 | 55 | .auth-title{ 56 | font-size: 1.5rem; 57 | font-weight: 600; 58 | letter-spacing: 0.273px; 59 | line-height: normal; 60 | text-transform: capitalize; 61 | } 62 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/placeholders/_default-layout-vertical-nav.scss: -------------------------------------------------------------------------------- 1 | @use "@configured-variables" as variables; 2 | @use "@core/scss/base/mixins"; 3 | 4 | %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled { 5 | box-shadow: 0 4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%); 6 | 7 | // If navbar is contained => Squeeze navbar content on scroll 8 | @if variables.$layout-vertical-nav-navbar-is-contained { 9 | padding-inline: 1.5rem; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/placeholders/_index.scss: -------------------------------------------------------------------------------- 1 | 2 | @forward "nav"; 3 | @forward "default-layout-vertical-nav"; 4 | @forward "vertical-nav"; 5 | @forward "misc"; 6 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/placeholders/_misc.scss: -------------------------------------------------------------------------------- 1 | %blurry-bg { 2 | /* stylelint-disable property-no-vendor-prefix */ 3 | -webkit-backdrop-filter: blur(9px); 4 | backdrop-filter: blur(9px); 5 | /* stylelint-enable */ 6 | background-color: rgb(var(--v-theme-surface), 0.85); 7 | } 8 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/placeholders/_nav.scss: -------------------------------------------------------------------------------- 1 | @use "@core/scss/base/mixins"; 2 | 3 | %nav-link-active { 4 | background: linear-gradient(-72.47deg, rgb(var(--v-theme-primary)) 22.16%, 5 | rgba(var(--v-theme-primary), 0.7) 76.47%) !important; 6 | 7 | i { color: rgb(var(--v-theme-on-primary)) !important; } 8 | 9 | @include mixins.elevation(4); 10 | } 11 | 12 | // ℹ️ This is common style that needs to be applied to both navs 13 | %nav { 14 | .nav-item-title { 15 | line-height: 1.375rem; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /typescript-version/src/@core/utils/colorConverter.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Convert Hex color to rgb 3 | * @param hex 4 | */ 5 | 6 | export const hexToRgb = (hex: string) => { 7 | // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") 8 | const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i 9 | 10 | hex = hex.replace(shorthandRegex, (m: string, r: string, g: string, b: string) => { 11 | return r + r + g + g + b + b 12 | }) 13 | 14 | const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) 15 | 16 | return result ? `${Number.parseInt(result[1], 16)},${Number.parseInt(result[2], 16)},${Number.parseInt(result[3], 16)}` : null 17 | } 18 | 19 | /** 20 | *RGBA color to Hex color with / without opacity 21 | */ 22 | export const rgbaToHex = (rgba: string, forceRemoveAlpha = false) => { 23 | return ( 24 | `#${ 25 | rgba 26 | .replace(/^rgba?\(|\s+|\)$/g, '') // Get's rgba / rgb string values 27 | .split(',') // splits them at "," 28 | .filter((string, index) => !forceRemoveAlpha || index !== 3) 29 | .map(string => Number.parseFloat(string)) // Converts them to numbers 30 | .map((number, index) => (index === 3 ? Math.round(number * 255) : number)) // Converts alpha to 255 number 31 | .map(number => number.toString(16)) // Converts numbers to hex 32 | .map(string => (string.length === 1 ? `0${string}` : string)) // Adds 0 when length of one number is 1 33 | .join('')}` 34 | ) 35 | } 36 | -------------------------------------------------------------------------------- /typescript-version/src/@core/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | // TODO: Try to implement this: https://twitter.com/fireship_dev/status/1565424801216311297 2 | export const kFormatter = (num: number) => { 3 | const regex = /\B(?=(\d{3})+(?!\d))/g 4 | 5 | return Math.abs(num) > 9999 ? `${Math.sign(num) * +((Math.abs(num) / 1000).toFixed(1))}k` : Math.abs(num).toFixed(0).replace(regex, ',') 6 | } 7 | -------------------------------------------------------------------------------- /typescript-version/src/@core/utils/helpers.ts: -------------------------------------------------------------------------------- 1 | // 👉 IsEmpty 2 | export const isEmpty = (value: unknown): boolean => { 3 | if (value === null || value === undefined || value === '') 4 | return true 5 | 6 | return !!(Array.isArray(value) && value.length === 0) 7 | } 8 | 9 | // 👉 IsNullOrUndefined 10 | export const isNullOrUndefined = (value: unknown): value is undefined | null => { 11 | return value === null || value === undefined 12 | } 13 | 14 | // 👉 IsEmptyArray 15 | export const isEmptyArray = (arr: unknown): boolean => { 16 | return Array.isArray(arr) && arr.length === 0 17 | } 18 | 19 | // 👉 IsObject 20 | export const isObject = (obj: unknown): obj is Record => 21 | obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj) 22 | 23 | // 👉 IsToday 24 | export const isToday = (date: Date) => { 25 | const today = new Date() 26 | 27 | return ( 28 | date.getDate() === today.getDate() 29 | && date.getMonth() === today.getMonth() 30 | && date.getFullYear() === today.getFullYear() 31 | ) 32 | } 33 | -------------------------------------------------------------------------------- /typescript-version/src/@core/utils/plugins.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | 3 | /** 4 | * This is helper function to register plugins like a nuxt 5 | * To register a plugin just export a const function `defineVuePlugin` that takes `app` as argument and call `app.use` 6 | * For Scanning plugins it will include all files in `src/plugins` and `src/plugins/**\/index.ts` 7 | * 8 | * 9 | * @param {App} app Vue app instance 10 | * @returns void 11 | * 12 | * @example 13 | * ```ts 14 | * // File: src/plugins/vuetify/index.ts 15 | * 16 | * import type { App } from 'vue' 17 | * import { createVuetify } from 'vuetify' 18 | * 19 | * const vuetify = createVuetify({ ... }) 20 | * 21 | * export default function (app: App) { 22 | * app.use(vuetify) 23 | * } 24 | * ``` 25 | * 26 | * All you have to do is use this helper function in `main.ts` file like below: 27 | * ```ts 28 | * // File: src/main.ts 29 | * import { registerPlugins } from '@core/utils/plugins' 30 | * import { createApp } from 'vue' 31 | * import App from '@/App.vue' 32 | * 33 | * // Create vue app 34 | * const app = createApp(App) 35 | * 36 | * // Register plugins 37 | * registerPlugins(app) // [!code focus] 38 | * 39 | * // Mount vue app 40 | * app.mount('#app') 41 | * ``` 42 | */ 43 | 44 | export const registerPlugins = (app: App) => { 45 | const imports = import.meta.glob<{ default: (app: App) => void }>(['../../plugins/*.{ts,js}', '../../plugins/*/index.{ts,js}'], { eager: true }) 46 | 47 | const importPaths = Object.keys(imports).sort() 48 | 49 | importPaths.forEach(path => { 50 | const pluginImportModule = imports[path] 51 | 52 | pluginImportModule.default?.(app) 53 | }) 54 | } 55 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/components.ts: -------------------------------------------------------------------------------- 1 | export { default as VerticalNavLayout } from './components/VerticalNavLayout.vue' 2 | export { default as VerticalNavLink } from './components/VerticalNavLink.vue' 3 | export { default as VerticalNavSectionTitle } from './components/VerticalNavSectionTitle.vue' 4 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/components/VerticalNavGroup.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 43 | 44 | 71 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/components/VerticalNavLink.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 37 | 38 | 47 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/components/VerticalNavSectionTitle.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 21 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/enums.ts: -------------------------------------------------------------------------------- 1 | export const ContentWidth = { 2 | Fluid: 'fluid', 3 | Boxed: 'boxed', 4 | } as const 5 | 6 | export const NavbarType = { 7 | Sticky: 'sticky', 8 | Static: 'static', 9 | Hidden: 'hidden', 10 | } as const 11 | 12 | export const FooterType = { 13 | Sticky: 'sticky', 14 | Static: 'static', 15 | Hidden: 'hidden', 16 | } as const 17 | 18 | export const AppContentLayoutNav = { 19 | Vertical: 'vertical', 20 | Horizontal: 'horizontal', 21 | } as const 22 | 23 | export const HorizontalNavType = { 24 | Sticky: 'sticky', 25 | Static: 'static', 26 | Hidden: 'hidden', 27 | } as const 28 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/index.ts: -------------------------------------------------------------------------------- 1 | export * from './components' 2 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/styles/_classes.scss: -------------------------------------------------------------------------------- 1 | .cursor-pointer { 2 | cursor: pointer; 3 | } 4 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/styles/_default-layout.scss: -------------------------------------------------------------------------------- 1 | // These are styles which are both common in layout w/ vertical nav & horizontal nav 2 | @use "@layouts/styles/rtl"; 3 | @use "@layouts/styles/placeholders"; 4 | @use "@layouts/styles/mixins"; 5 | @use "@configured-variables" as variables; 6 | 7 | html, 8 | body { 9 | min-block-size: 100%; 10 | } 11 | 12 | .layout-page-content { 13 | @include mixins.boxed-content(true); 14 | 15 | flex-grow: 1; 16 | 17 | // TODO: Use grid gutter variable here 18 | padding-block: 1.5rem; 19 | } 20 | 21 | .layout-footer { 22 | .footer-content-container { 23 | block-size: variables.$layout-vertical-nav-footer-height; 24 | } 25 | 26 | .layout-footer-sticky & { 27 | position: sticky; 28 | inset-block-end: 0; 29 | will-change: transform; 30 | } 31 | 32 | .layout-footer-hidden & { 33 | display: none; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/styles/_global.scss: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | box-sizing: inherit; 5 | background-repeat: no-repeat; 6 | } 7 | 8 | html { 9 | box-sizing: border-box; 10 | } 11 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @use "placeholders"; 2 | @use "@configured-variables" as variables; 3 | 4 | @mixin rtl { 5 | @if variables.$enable-rtl-styles { 6 | [dir="rtl"] & { 7 | @content; 8 | } 9 | } 10 | } 11 | 12 | @mixin boxed-content($nest-selector: false) { 13 | & { 14 | @extend %boxed-content-spacing; 15 | 16 | @at-root { 17 | @if $nest-selector == false { 18 | .layout-content-width-boxed#{&} { 19 | @extend %boxed-content; 20 | } 21 | } 22 | // stylelint-disable-next-line @stylistic/indentation 23 | @else { 24 | .layout-content-width-boxed & { 25 | @extend %boxed-content; 26 | } 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/styles/_placeholders.scss: -------------------------------------------------------------------------------- 1 | // placeholders 2 | @use "@configured-variables" as variables; 3 | 4 | %boxed-content { 5 | @at-root #{&}-spacing { 6 | // TODO: Use grid gutter variable here 7 | padding-inline: 1.5rem; 8 | } 9 | 10 | inline-size: 100%; 11 | margin-inline: auto; 12 | max-inline-size: variables.$layout-boxed-content-width; 13 | } 14 | 15 | %layout-navbar-hidden { 16 | display: none; 17 | } 18 | 19 | // ℹ️ We created this placeholder even it is being used in just layout w/ vertical nav because in future we might apply style to both navbar & horizontal nav separately 20 | %layout-navbar-sticky { 21 | position: sticky; 22 | inset-block-start: 0; 23 | 24 | // will-change: transform; 25 | // inline-size: 100%; 26 | } 27 | 28 | %style-scroll-bar { 29 | /* width */ 30 | 31 | &::-webkit-scrollbar { 32 | background: rgb(var(--v-theme-surface)); 33 | block-size: 8px; 34 | border-end-end-radius: 14px; 35 | border-start-end-radius: 14px; 36 | inline-size: 4px; 37 | } 38 | 39 | /* Track */ 40 | &::-webkit-scrollbar-track { 41 | background: transparent; 42 | } 43 | 44 | /* Handle */ 45 | &::-webkit-scrollbar-thumb { 46 | border-radius: 0.5rem; 47 | background: rgb(var(--v-theme-perfect-scrollbar-thumb)); 48 | } 49 | 50 | &::-webkit-scrollbar-corner { 51 | display: none; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/styles/_rtl.scss: -------------------------------------------------------------------------------- 1 | @use "./mixins"; 2 | 3 | .layout-vertical-nav .nav-group-arrow { 4 | @include mixins.rtl { 5 | transform: rotate(180deg); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | // @use "@styles/style.scss"; 2 | 3 | // 👉 Vertical nav 4 | $layout-vertical-nav-z-index: 12 !default; 5 | $layout-vertical-nav-width: 260px !default; 6 | $layout-vertical-nav-collapsed-width: 80px !default; 7 | $selector-vertical-nav-mini: ".layout-vertical-nav-collapsed .layout-vertical-nav:not(:hover)"; 8 | 9 | // 👉 Horizontal nav 10 | $layout-horizontal-nav-z-index: 11 !default; 11 | $layout-horizontal-nav-navbar-height: 64px !default; 12 | 13 | // 👉 Navbar 14 | $layout-vertical-nav-navbar-height: 64px !default; 15 | $layout-vertical-nav-navbar-is-contained: true !default; 16 | $layout-vertical-nav-layout-navbar-z-index: 11 !default; 17 | $layout-horizontal-nav-layout-navbar-z-index: 11 !default; 18 | 19 | // 👉 Main content 20 | $layout-boxed-content-width: 1440px !default; 21 | 22 | // 👉Footer 23 | $layout-vertical-nav-footer-height: 56px !default; 24 | 25 | // 👉 Layout overlay 26 | $layout-overlay-z-index: 11 !default; 27 | 28 | // 👉 RTL 29 | $enable-rtl-styles: true !default; 30 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/styles/index.scss: -------------------------------------------------------------------------------- 1 | @use "global"; 2 | @use "vue3-perfect-scrollbar/style.css"; 3 | @use "classes"; 4 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/types.ts: -------------------------------------------------------------------------------- 1 | import type { RouteLocationRaw } from 'vue-router' 2 | 3 | export interface AclProperties { 4 | action: string 5 | subject: string 6 | } 7 | 8 | // 👉 Vertical nav section title 9 | export interface NavSectionTitle extends Partial { 10 | heading: string 11 | } 12 | 13 | // 👉 Vertical nav link 14 | declare type ATagTargetAttrValues = '_blank' | '_self' | '_parent' | '_top' | 'framename' 15 | declare type ATagRelAttrValues = 16 | | 'alternate' 17 | | 'author' 18 | | 'bookmark' 19 | | 'external' 20 | | 'help' 21 | | 'license' 22 | | 'next' 23 | | 'nofollow' 24 | | 'noopener' 25 | | 'noreferrer' 26 | | 'prev' 27 | | 'search' 28 | | 'tag' 29 | 30 | export interface NavLinkProps { 31 | to?: RouteLocationRaw | string | null 32 | href?: string 33 | target?: ATagTargetAttrValues 34 | rel?: ATagRelAttrValues 35 | } 36 | 37 | export interface NavLink extends NavLinkProps, Partial { 38 | title: string 39 | icon?: unknown 40 | badgeContent?: string 41 | badgeClass?: string 42 | disable?: boolean 43 | } 44 | 45 | // 👉 Vertical nav group 46 | export interface NavGroup extends Partial { 47 | title: string 48 | icon?: unknown 49 | badgeContent?: string 50 | badgeClass?: string 51 | children: (NavLink | NavGroup)[] 52 | disable?: boolean 53 | } 54 | 55 | // 👉 Components ======================== 56 | export interface ThemeSwitcherTheme { 57 | name: string 58 | icon: string 59 | } 60 | -------------------------------------------------------------------------------- /typescript-version/src/@layouts/utils.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Convert Hex color to rgb 3 | * @param hex 4 | */ 5 | 6 | export const hexToRgb = (hex: string) => { 7 | // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") 8 | const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i 9 | 10 | hex = hex.replace(shorthandRegex, (m: string, r: string, g: string, b: string) => { 11 | return r + r + g + g + b + b 12 | }) 13 | 14 | const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) 15 | 16 | return result ? `${Number.parseInt(result[1], 16)},${Number.parseInt(result[2], 16)},${Number.parseInt(result[3], 16)}` : null 17 | } 18 | -------------------------------------------------------------------------------- /typescript-version/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-1.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-10.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-11.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-12.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-13.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-14.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-15.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-2.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-3.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-4.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-5.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-6.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-7.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-8.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/avatars/avatar-9.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/eCommerce/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/eCommerce/2.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/logos/american-bank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/logos/american-bank.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/logos/aviato.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/logos/aviato.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/logos/aws.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/logos/aws.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/logos/bitbank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/logos/bitbank.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/logos/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/logos/chrome.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/logos/citi-bank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/logos/citi-bank.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/logos/digital-ocean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/logos/digital-ocean.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/logos/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/logos/github.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/logos/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/logos/google.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/logos/gumroad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/logos/gumroad.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/logos/mastercard-label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/logos/mastercard-label.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/logos/slack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/logos/slack.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/logos/stripe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/logos/stripe.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/logos/zipcar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/logos/zipcar.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/misc/trophy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/misc/trophy.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/pages/1.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/pages/2.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/pages/3.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/pages/404.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/pages/5.jpg -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/pages/6.jpg -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/auth-v1-mask-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/pages/auth-v1-mask-dark.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/auth-v1-mask-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/pages/auth-v1-mask-light.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/auth-v1-tree-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/pages/auth-v1-tree-2.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/auth-v1-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/pages/auth-v1-tree.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/misc-mask-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/pages/misc-mask-dark.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/misc-mask-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/pages/misc-mask-light.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-vuetify-vuejs-admin-template-free/039f469f9a60996b95e92fd6eaa75fb45647b106/typescript-version/src/assets/images/pages/tree.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/svg/checkbox-checked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /typescript-version/src/assets/images/svg/checkbox-indeterminate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /typescript-version/src/assets/images/svg/checkbox-unchecked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /typescript-version/src/assets/images/svg/radio-checked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /typescript-version/src/assets/images/svg/radio-unchecked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /typescript-version/src/assets/styles/styles.scss: -------------------------------------------------------------------------------- 1 | // Write your overrides 2 | -------------------------------------------------------------------------------- /typescript-version/src/assets/styles/variables/_template.scss: -------------------------------------------------------------------------------- 1 | @forward "@core/scss/template/variables"; 2 | 3 | // ℹ️ Remove above import and uncomment below to override core variables. 4 | // @forward "@core/scss/template/variables" with ( 5 | // $: 6 | // ) 7 | -------------------------------------------------------------------------------- /typescript-version/src/assets/styles/variables/_vuetify.scss: -------------------------------------------------------------------------------- 1 | // ❗ Path must be relative 2 | @forward "../../../@core/scss/template/libs/vuetify/variables"; 3 | 4 | // ℹ️ Remove above import and uncomment below to override core variables. 5 | // @forward "../../../@core/scss/template/libs/vuetify/variables" with ( 6 | // $: 7 | // ) 8 | -------------------------------------------------------------------------------- /typescript-version/src/components/ErrorHeader.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 31 | 32 | 38 | -------------------------------------------------------------------------------- /typescript-version/src/layouts/blank.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /typescript-version/src/layouts/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 42 | -------------------------------------------------------------------------------- /typescript-version/src/layouts/components/NavbarThemeSwitcher.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /typescript-version/src/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 15 | -------------------------------------------------------------------------------- /typescript-version/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | 3 | import App from '@/App.vue' 4 | import { registerPlugins } from '@core/utils/plugins' 5 | 6 | // Styles 7 | import '@core/scss/template/index.scss' 8 | import '@layouts/styles/index.scss' 9 | 10 | // Create vue app 11 | const app = createApp(App) 12 | 13 | // Register plugins 14 | registerPlugins(app) 15 | 16 | // Mount vue app 17 | app.mount('#app') 18 | -------------------------------------------------------------------------------- /typescript-version/src/pages/[...error].vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 53 | 54 | 63 | -------------------------------------------------------------------------------- /typescript-version/src/pages/card-basic.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | -------------------------------------------------------------------------------- /typescript-version/src/pages/cards.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | -------------------------------------------------------------------------------- /typescript-version/src/pages/typography.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 17 | -------------------------------------------------------------------------------- /typescript-version/src/plugins/iconify/index.ts: -------------------------------------------------------------------------------- 1 | import './icons.css' 2 | 3 | export default function () { 4 | // This plugin just requires icons import 5 | } 6 | -------------------------------------------------------------------------------- /typescript-version/src/plugins/iconify/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "commonjs" 3 | } 4 | -------------------------------------------------------------------------------- /typescript-version/src/plugins/pinia.ts: -------------------------------------------------------------------------------- 1 | import { createPinia } from 'pinia' 2 | import type { App } from 'vue' 3 | 4 | export const store = createPinia() 5 | 6 | export default function (app: App) { 7 | app.use(store) 8 | } 9 | -------------------------------------------------------------------------------- /typescript-version/src/plugins/router/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | import { createRouter, createWebHistory } from 'vue-router' 3 | import { routes } from './routes' 4 | 5 | const router = createRouter({ 6 | history: createWebHistory(import.meta.env.BASE_URL), 7 | routes, 8 | }) 9 | 10 | export default function (app: App) { 11 | app.use(router) 12 | } 13 | 14 | export { router } 15 | -------------------------------------------------------------------------------- /typescript-version/src/plugins/router/routes.ts: -------------------------------------------------------------------------------- 1 | export const routes = [ 2 | { path: '/', redirect: '/dashboard' }, 3 | { 4 | path: '/', 5 | component: () => import('@/layouts/default.vue'), 6 | children: [ 7 | { 8 | path: 'dashboard', 9 | component: () => import('@/pages/dashboard.vue'), 10 | }, 11 | { 12 | path: 'account-settings', 13 | component: () => import('@/pages/account-settings.vue'), 14 | }, 15 | { 16 | path: 'typography', 17 | component: () => import('@/pages/typography.vue'), 18 | }, 19 | { 20 | path: 'icons', 21 | component: () => import('@/pages/icons.vue'), 22 | }, 23 | { 24 | path: 'cards', 25 | component: () => import('@/pages/cards.vue'), 26 | }, 27 | { 28 | path: 'tables', 29 | component: () => import('@/pages/tables.vue'), 30 | }, 31 | { 32 | path: 'form-layouts', 33 | component: () => import('@/pages/form-layouts.vue'), 34 | }, 35 | ], 36 | }, 37 | { 38 | path: '/', 39 | component: () => import('@/layouts/blank.vue'), 40 | children: [ 41 | { 42 | path: 'login', 43 | component: () => import('@/pages/login.vue'), 44 | }, 45 | { 46 | path: 'register', 47 | component: () => import('@/pages/register.vue'), 48 | }, 49 | { 50 | path: '/:pathMatch(.*)*', 51 | component: () => import('@/pages/[...error].vue'), 52 | }, 53 | ], 54 | }, 55 | ] 56 | -------------------------------------------------------------------------------- /typescript-version/src/plugins/vuetify/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | 3 | import { createVuetify } from 'vuetify' 4 | import { VBtn } from 'vuetify/components/VBtn' 5 | import defaults from './defaults' 6 | import { icons } from './icons' 7 | import { themes } from './theme' 8 | 9 | // Styles 10 | 11 | import '@core/scss/template/libs/vuetify/index.scss' 12 | import 'vuetify/styles' 13 | 14 | export default function (app: App) { 15 | const vuetify = createVuetify({ 16 | aliases: { 17 | IconBtn: VBtn, 18 | }, 19 | defaults, 20 | icons, 21 | theme: { 22 | defaultTheme: 'light', 23 | themes, 24 | }, 25 | }) 26 | 27 | app.use(vuetify) 28 | } 29 | -------------------------------------------------------------------------------- /typescript-version/src/plugins/webfontloader.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * plugins/webfontloader.js 3 | * 4 | * webfontloader documentation: https://github.com/typekit/webfontloader 5 | */ 6 | 7 | export async function loadFonts() { 8 | const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader') 9 | 10 | webFontLoader.load({ 11 | google: { 12 | api: 'https://fonts.googleapis.com/css2', 13 | families: ['Inter:wght@300;400;500;600;700;900&display=swap'], 14 | }, 15 | }) 16 | } 17 | 18 | export default function () { 19 | loadFonts() 20 | } 21 | -------------------------------------------------------------------------------- /typescript-version/src/utils/paginationMeta.ts: -------------------------------------------------------------------------------- 1 | export const paginationMeta = (options: T, total: number) => { 2 | const start = (options.page - 1) * options.itemsPerPage + 1 3 | const end = Math.min(options.page * options.itemsPerPage, total) 4 | 5 | return `Showing ${total === 0 ? 0 : start} to ${end} of ${total} entries` 6 | } 7 | -------------------------------------------------------------------------------- /typescript-version/src/views/dashboard/AnalyticsAward.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 34 | 35 | 43 | -------------------------------------------------------------------------------- /typescript-version/src/views/pages/authentication/AuthProvider.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | -------------------------------------------------------------------------------- /typescript-version/src/views/user-interface/typography/TypographyHeadlines.vue: -------------------------------------------------------------------------------- 1 | 48 | -------------------------------------------------------------------------------- /typescript-version/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "Bundler", 7 | "isolatedModules": true, 8 | "strict": true, 9 | "jsx": "preserve", 10 | "jsxFactory": "h", 11 | "jsxFragmentFactory": "Fragment", 12 | "sourceMap": true, 13 | "resolveJsonModule": true, 14 | "esModuleInterop": true, 15 | "paths": { 16 | "@/*": [ 17 | "./src/*" 18 | ], 19 | "@layouts/*": [ 20 | "./src/@layouts/*" 21 | ], 22 | "@layouts": [ 23 | "./src/@layouts" 24 | ], 25 | "@core/*": [ 26 | "./src/@core/*" 27 | ], 28 | "@core": [ 29 | "./src/@core" 30 | ], 31 | "@images/*": [ 32 | "./src/assets/images/*" 33 | ], 34 | "@styles/*": [ 35 | "./src/styles/*" 36 | ] 37 | }, 38 | "lib": [ 39 | "esnext", 40 | "dom", 41 | "dom.iterable", 42 | "scripthost" 43 | ], 44 | "skipLibCheck": true, 45 | "types": [ 46 | "vite/client", 47 | "vite-plugin-vue-layouts/client" 48 | ] 49 | }, 50 | "include": [ 51 | "./typed-router.d.ts", 52 | "./vite.config.*", 53 | "./env.d.ts", 54 | "./shims.d.ts", 55 | "./src/**/*", 56 | "./src/**/*.vue", 57 | "./themeConfig.ts", 58 | "./auto-imports.d.ts", 59 | "./components.d.ts" 60 | ], 61 | "exclude": [ 62 | "./dist", 63 | "./node_modules" 64 | ] 65 | } 66 | --------------------------------------------------------------------------------