├── .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 ├── .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 ├── 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 │ │ │ │ ├── _components.scss │ │ │ │ ├── _dark.scss │ │ │ │ ├── _default-layout-w-vertical-nav.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── _utilities.scss │ │ │ │ ├── _utils.scss │ │ │ │ ├── _variables.scss │ │ │ │ ├── _vertical-nav.scss │ │ │ │ ├── index.scss │ │ │ │ ├── libs │ │ │ │ ├── apex-chart.scss │ │ │ │ └── vuetify │ │ │ │ │ ├── _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 │ │ │ │ │ └── overrides.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 │ │ │ ├── TransitionExpand.vue │ │ │ ├── VerticalNav.vue │ │ │ ├── VerticalNavGroup.vue │ │ │ ├── VerticalNavLayout.vue │ │ │ ├── VerticalNavLink.vue │ │ │ └── VerticalNavSectionTitle.vue │ │ ├── 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 │ │ │ ├── cards │ │ │ │ ├── chart-info.png │ │ │ │ ├── chart-success.png │ │ │ │ ├── credit-card-primary.png │ │ │ │ ├── credit-card-success.png │ │ │ │ ├── credit-card-warning.png │ │ │ │ ├── illustration-john-dark.png │ │ │ │ ├── illustration-john-light.png │ │ │ │ ├── paypal-error.png │ │ │ │ ├── wallet-info.png │ │ │ │ └── wallet-primary.png │ │ │ ├── customizer-icons │ │ │ │ └── horizontal-light.svg │ │ │ ├── eCommerce │ │ │ │ └── 2.png │ │ │ ├── iconify-svg │ │ │ │ ├── checked-checkbox.svg │ │ │ │ ├── checked-radio.svg │ │ │ │ ├── indeterminate-checkbox.svg │ │ │ │ ├── javascript.svg │ │ │ │ ├── typescript.svg │ │ │ │ ├── unchecked-checkbox.svg │ │ │ │ └── unchecked-radio.svg │ │ │ ├── icons │ │ │ │ ├── flags │ │ │ │ │ ├── australia.png │ │ │ │ │ ├── belgium.png │ │ │ │ │ ├── brazil.png │ │ │ │ │ ├── china.png │ │ │ │ │ ├── france.png │ │ │ │ │ ├── india.png │ │ │ │ │ └── usa.png │ │ │ │ └── logo │ │ │ │ │ ├── brave.png │ │ │ │ │ ├── cent.png │ │ │ │ │ ├── chrome.png │ │ │ │ │ ├── edge.png │ │ │ │ │ ├── firefox.png │ │ │ │ │ ├── linux.png │ │ │ │ │ ├── mac.png │ │ │ │ │ ├── opera.png │ │ │ │ │ ├── safari.png │ │ │ │ │ ├── ubuntu.png │ │ │ │ │ └── windows.png │ │ │ ├── logo.svg │ │ │ ├── misc │ │ │ │ ├── triangle-dark.png │ │ │ │ └── triangle-light.png │ │ │ ├── pages │ │ │ │ ├── 1.png │ │ │ │ ├── 2.png │ │ │ │ ├── 3.png │ │ │ │ ├── 404.png │ │ │ │ ├── 5.jpg │ │ │ │ ├── 6.jpg │ │ │ │ ├── empty-cart.png │ │ │ │ └── pose-fs-9.png │ │ │ ├── pro │ │ │ │ ├── upgrade-banner-dark.png │ │ │ │ └── upgrade-banner-light.png │ │ │ └── svg │ │ │ │ ├── auth-v1-bottom-shape.svg │ │ │ │ ├── auth-v1-top-shape.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 │ │ ├── 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 │ │ ├── AnalyticsCongratulations.vue │ │ ├── AnalyticsFinanceTab.vue │ │ ├── AnalyticsOrder.vue │ │ ├── AnalyticsOrderStatistics.vue │ │ ├── AnalyticsProfitReport.vue │ │ ├── AnalyticsRevenue.vue │ │ ├── AnalyticsTotalRevenue.vue │ │ └── AnalyticsTransactions.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 └── vite.config.js ├── package.json ├── pnpm-lock.yaml └── typescript-version ├── .editorconfig ├── .eslintrc.cjs ├── .gitattributes ├── .gitignore ├── .npmrc ├── .nvmrc ├── .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 ├── eslint-internal-rules └── package.json ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public ├── favicon.ico ├── images │ └── avatars │ │ └── avatar-1.png └── loader.css ├── 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 │ │ │ ├── _components.scss │ │ │ ├── _dark.scss │ │ │ ├── _default-layout-w-vertical-nav.scss │ │ │ ├── _mixins.scss │ │ │ ├── _utilities.scss │ │ │ ├── _utils.scss │ │ │ ├── _variables.scss │ │ │ ├── _vertical-nav.scss │ │ │ ├── index.scss │ │ │ ├── libs │ │ │ ├── apex-chart.scss │ │ │ └── vuetify │ │ │ │ ├── _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 │ │ │ │ └── overrides.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 │ │ ├── TransitionExpand.vue │ │ ├── VerticalNav.vue │ │ ├── VerticalNavGroup.vue │ │ ├── VerticalNavLayout.vue │ │ ├── VerticalNavLink.vue │ │ └── VerticalNavSectionTitle.vue │ ├── 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 │ │ ├── cards │ │ │ ├── chart-info.png │ │ │ ├── chart-success.png │ │ │ ├── credit-card-primary.png │ │ │ ├── credit-card-success.png │ │ │ ├── credit-card-warning.png │ │ │ ├── illustration-john-dark.png │ │ │ ├── illustration-john-light.png │ │ │ ├── paypal-error.png │ │ │ ├── wallet-info.png │ │ │ └── wallet-primary.png │ │ ├── customizer-icons │ │ │ └── horizontal-light.svg │ │ ├── eCommerce │ │ │ └── 2.png │ │ ├── iconify-svg │ │ │ ├── checked-checkbox.svg │ │ │ ├── checked-radio.svg │ │ │ ├── indeterminate-checkbox.svg │ │ │ ├── javascript.svg │ │ │ ├── typescript.svg │ │ │ ├── unchecked-checkbox.svg │ │ │ └── unchecked-radio.svg │ │ ├── icons │ │ │ ├── flags │ │ │ │ ├── australia.png │ │ │ │ ├── belgium.png │ │ │ │ ├── brazil.png │ │ │ │ ├── china.png │ │ │ │ ├── france.png │ │ │ │ ├── india.png │ │ │ │ └── usa.png │ │ │ └── logo │ │ │ │ ├── brave.png │ │ │ │ ├── cent.png │ │ │ │ ├── chrome.png │ │ │ │ ├── edge.png │ │ │ │ ├── firefox.png │ │ │ │ ├── linux.png │ │ │ │ ├── mac.png │ │ │ │ ├── opera.png │ │ │ │ ├── safari.png │ │ │ │ ├── ubuntu.png │ │ │ │ └── windows.png │ │ ├── logo.svg │ │ ├── misc │ │ │ ├── triangle-dark.png │ │ │ └── triangle-light.png │ │ ├── pages │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 404.png │ │ │ ├── 5.jpg │ │ │ ├── 6.jpg │ │ │ ├── empty-cart.png │ │ │ └── pose-fs-9.png │ │ ├── pro │ │ │ ├── upgrade-banner-dark.png │ │ │ └── upgrade-banner-light.png │ │ └── svg │ │ │ ├── auth-v1-bottom-shape.svg │ │ │ ├── auth-v1-top-shape.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 │ ├── 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 │ ├── AnalyticsCongratulations.vue │ ├── AnalyticsFinanceTab.vue │ ├── AnalyticsOrder.vue │ ├── AnalyticsOrderStatistics.vue │ ├── AnalyticsProfitReport.vue │ ├── AnalyticsRevenue.vue │ ├── AnalyticsTotalRevenue.vue │ └── AnalyticsTransactions.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 ├── 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 -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Changelog 4 | 5 | All notable changes to this template will be documented in this file 6 | 7 | ## v2.1.0 (2025-01-01) 8 | 9 | ### Updated 10 | 11 | - Updated Vue & Vuetify to latest version 12 | 13 | ## v2.0.0 (2024-07-09) 14 | 15 | ### Updated 16 | 17 | - Updated all dependencies and devDependencies to latest 18 | - Updated layouts design 19 | 20 | ## v1.0.0 (2023-06-01) 21 | 22 | ### Added 23 | 24 | - Initial Release 25 | -------------------------------------------------------------------------------- /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 | $template_name 6 | 8 | 9 | 10 | 11 |

If you do not redirect please visit : $docs_url

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /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/.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/assets/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/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/public/favicon.ico -------------------------------------------------------------------------------- /javascript-version/public/images/avatars/avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/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: 50px; 28 | inline-size: 50px; 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/src/@core/components/MoreBtn.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 36 | -------------------------------------------------------------------------------- /javascript-version/src/@core/components/ThemeSwitcher.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 44 | -------------------------------------------------------------------------------- /javascript-version/src/@core/components/cards/CardStatisticsHorizontal.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 61 | -------------------------------------------------------------------------------- /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.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 "vuetify/lib/styles/tools/elevation" as elevation; 2 | 3 | .layout-wrapper.layout-nav-type-vertical { 4 | // 👉 Layout footer 5 | .layout-footer { 6 | $ele-layout-footer: &; 7 | 8 | .footer-content-container { 9 | // Sticky footer 10 | @at-root { 11 | // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer 12 | .layout-footer-sticky#{$ele-layout-footer} { 13 | .footer-content-container { 14 | @include elevation.elevation(8); 15 | } 16 | } 17 | } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/_mixins.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "@configured-variables" as variables; 3 | 4 | @mixin custom-elevation($color, $size) { 5 | box-shadow: (map.get(variables.$shadow-params, $size) rgba($color, map.get(variables.$shadow-opacity, $size))); 6 | } 7 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/_utilities.scss: -------------------------------------------------------------------------------- 1 | .v-timeline-item { 2 | .app-timeline-title { 3 | color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); 4 | font-size: 15px; 5 | font-weight: 500; 6 | line-height: 1.3125rem; 7 | } 8 | 9 | .app-timeline-meta { 10 | color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)); 11 | font-size: 11px; 12 | line-height: 0.875rem; 13 | } 14 | 15 | .app-timeline-text { 16 | color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); 17 | font-size: 13px; 18 | line-height: 1.25rem; 19 | } 20 | } 21 | 22 | // ℹ️ Temporary solution as v-spacer style is not getting applied in build version. will remove this after release. 23 | // VSpacer 24 | .v-spacer { 25 | flex-grow: 1; 26 | } 27 | 28 | // app-logo & app-logo-title 29 | .app-logo { 30 | display: flex; 31 | align-items: center !important; 32 | column-gap: 0.5rem !important; 33 | 34 | .app-logo-title { 35 | font-size: 1.75rem !important; 36 | font-weight: 700 !important; 37 | letter-spacing: 0.15px !important; 38 | line-height: 1.75rem !important; 39 | text-transform: lowercase !important; 40 | } 41 | } 42 | 43 | .text-white-variant { 44 | color: rgba(255, 255, 255, 78%) !important; 45 | } 46 | 47 | .bg-custom-background { 48 | background-color: rgb(var(--v-table-header-color)); 49 | } 50 | -------------------------------------------------------------------------------- /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 | } 39 | /* stylelint-disable-next-line @stylistic/indentation */ 40 | @else { 41 | @return $var; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/index.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "@core/scss/base"; 3 | 4 | // Layout 5 | @use "vertical-nav"; 6 | @use "default-layout-w-vertical-nav"; 7 | 8 | // Utilities 9 | @use "utilities"; 10 | 11 | // Components 12 | @use "components"; 13 | 14 | // Mixins 15 | @use "mixins"; 16 | 17 | // Dark 18 | @use "dark"; 19 | -------------------------------------------------------------------------------- /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 | .v-icon { 7 | block-size: 1.5rem; 8 | inline-size: 1.5rem; 9 | } 10 | 11 | &.v-avatar--variant-tonal:not([class*="text-"]) { 12 | .v-avatar__underlay { 13 | --v-activated-opacity: 0.08; 14 | } 15 | } 16 | } 17 | 18 | .v-avatar-group { 19 | > * { 20 | &:hover { 21 | transform: translateY(-5px) scale(1); 22 | 23 | @include mixins.elevation(6); 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /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__badge .v-icon { 6 | font-size: 0.9375rem; 7 | } 8 | 9 | &.v-badge--bordered:not(.v-badge--dot) { 10 | .v-badge__badge { 11 | &::after { 12 | transform: scale(1.05); 13 | } 14 | } 15 | } 16 | 17 | &.v-badge--tonal { 18 | @each $color-name in variables.$theme-colors-name { 19 | .v-badge__badge.bg-#{$color-name} { 20 | background-color: rgba(var(--v-theme-#{$color-name}), 0.16) !important; 21 | color: rgb(var(--v-theme-#{$color-name})) !important; 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_cards.scss: -------------------------------------------------------------------------------- 1 | .v-card-subtitle { 2 | color: rgba(var(--v-theme-on-background), 0.55); 3 | } 4 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_dialog.scss: -------------------------------------------------------------------------------- 1 | @use "@layouts/styles/mixins" as layoutsMixins; 2 | 3 | // 👉 Dialog 4 | body .v-dialog { 5 | // dialog custom close btn 6 | .v-dialog-close-btn { 7 | border-radius: 0.25rem; 8 | inset-block-start: 0; 9 | inset-inline-end: 0; 10 | transform: translate(0.5rem, -0.5rem); 11 | 12 | @include layoutsMixins.rtl { 13 | transform: translate(-0.5rem, -0.5rem); 14 | } 15 | 16 | &:hover { 17 | transform: translate(0.3125rem, -0.3125rem); 18 | 19 | @include layoutsMixins.rtl { 20 | transform: translate(-0.3125rem, -0.3125rem); 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_list.scss: -------------------------------------------------------------------------------- 1 | // 👉 List 2 | .v-list-item { 3 | --v-hover-opacity: 0.06 !important; 4 | 5 | .v-checkbox-btn.v-selection-control--density-compact { 6 | margin-inline-end: 0.5rem; 7 | } 8 | 9 | .v-list-item__overlay { 10 | transition: none; 11 | } 12 | 13 | .v-list-item__prepend { 14 | .v-icon { 15 | font-size: 1.25rem; 16 | } 17 | } 18 | 19 | &.v-list-item--active { 20 | &.v-list-group__header { 21 | color: rgb(var(--v-theme-primary)); 22 | } 23 | 24 | &:not(.v-list-group__header) { 25 | .v-list-item-subtitle { 26 | color: rgb(var(--v-theme-primary)); 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_menu.scss: -------------------------------------------------------------------------------- 1 | // Style list differently when it's used in a components like select, menu etc 2 | .v-menu { 3 | // Adjust padding of list item inside menu 4 | .v-list-item { 5 | padding-block: 8px !important; 6 | padding-inline: 20px !important; 7 | } 8 | } 9 | 10 | // 👉 Menu 11 | // Menu custom style 12 | .v-menu.v-overlay { 13 | .v-overlay__content { 14 | .v-list { 15 | .v-list-item { 16 | margin-block-end: 0.125rem; 17 | min-block-size: 2.375rem; 18 | 19 | &:first-child { 20 | margin-block-start: 0; 21 | } 22 | 23 | &:last-child { 24 | margin-block-end: 0; 25 | } 26 | } 27 | 28 | .v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line { 29 | padding-block: 0.5rem; 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_otp-input.scss: -------------------------------------------------------------------------------- 1 | // otp input 2 | .v-otp-input { 3 | justify-content: unset !important; 4 | 5 | .v-otp-input__content { 6 | max-inline-size: 100%; 7 | 8 | .v-field.v-field--focused { 9 | .v-field__outline { 10 | .v-field__outline__start, 11 | .v-field__outline__end { 12 | border-color: rgb(var(--v-theme-primary)) !important; 13 | } 14 | } 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_progress.scss: -------------------------------------------------------------------------------- 1 | // @use "@core/scss/template/mixins" as templateMixins; 2 | @use "@configured-variables" as variables; 3 | 4 | // 👉 Progress 5 | // .v-progress-linear { 6 | // .v-progress-linear__determinate { 7 | // @each $color-name in variables.$theme-colors-name { 8 | // &.bg-#{$color-name} { 9 | // // @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm"); 10 | // } 11 | // } 12 | // } 13 | // } 14 | -------------------------------------------------------------------------------- /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 | // 👉 radio icon opacity 8 | .v-selection-control__input > .v-icon { 9 | opacity: 1; 10 | } 11 | 12 | &.v-selection-control--disabled { 13 | --v-disabled-opacity: 0.45; 14 | } 15 | 16 | &.v-selection-control--dirty { 17 | @each $color-name in variables.$theme-colors-name { 18 | .v-selection-control__wrapper.text-#{$color-name} { 19 | .v-selection-control__input { 20 | /* ℹ️ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG; */ 21 | .v-icon { 22 | filter: drop-shadow(0 2px 4px rgba(var(--v-theme-#{$color-name}), 0.4)); 23 | } 24 | } 25 | } 26 | } 27 | } 28 | 29 | &.v-selection-control { 30 | .v-selection-control__input { 31 | svg { 32 | font-size: 1.5rem; 33 | } 34 | } 35 | 36 | .v-label { 37 | color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); 38 | } 39 | } 40 | } 41 | 42 | // 👉 Radio, Checkbox 43 | 44 | .v-input.v-radio-group > .v-input__control > .v-label { 45 | margin-inline-start: 0; 46 | } 47 | 48 | .v-radio-group { 49 | .v-selection-control-group { 50 | .v-radio:not(:last-child) { 51 | margin-inline-end: 0; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /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; 7 | } 8 | 9 | .v-icon { 10 | --v-icon-size-multiplier: 1; 11 | } 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_slider.scss: -------------------------------------------------------------------------------- 1 | // 👉 Slider 2 | .v-slider { 3 | .v-slider-track__background--opacity { 4 | opacity: 0.16; 5 | } 6 | } 7 | 8 | .v-slider-thumb { 9 | .v-slider-thumb__surface::after { 10 | border-radius: 50%; 11 | background-color: #fff; 12 | block-size: calc(var(--v-slider-thumb-size) - 9px); 13 | inline-size: calc(var(--v-slider-thumb-size) - 9px); 14 | } 15 | 16 | .v-slider-thumb__label { 17 | background-color: rgb(var(--v-tooltip-background)); 18 | color: rgb(var(--v-theme-surface)); 19 | font-weight: 500; 20 | line-height: 1.25rem; 21 | 22 | &::before { 23 | content: none; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_snackbar.scss: -------------------------------------------------------------------------------- 1 | // 👉 snackbar 2 | .v-snackbar { 3 | .v-snackbar__actions { 4 | .v-btn { 5 | font-size: 13px; 6 | line-height: 18px; 7 | text-transform: capitalize; 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_table.scss: -------------------------------------------------------------------------------- 1 | @use "@layouts/styles/mixins" as layoutMixins; 2 | 3 | // 👉 Table 4 | .v-table { 5 | th { 6 | color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important; 7 | font-size: 0.8125rem; 8 | letter-spacing: 0.2px; 9 | line-height: 24px; 10 | text-transform: uppercase; 11 | 12 | .v-data-table-header__content { 13 | display: flex; 14 | justify-content: space-between; 15 | } 16 | } 17 | 18 | .v-data-table-footer { 19 | row-gap: 8px !important; 20 | } 21 | } 22 | 23 | // 👉 Datatable 24 | .v-data-table, 25 | .v-table { 26 | table { 27 | thead, 28 | tbody { 29 | tr { 30 | th, 31 | td { 32 | &:first-child:has(.v-checkbox-btn) { 33 | padding-inline: 15px 0 !important; 34 | } 35 | 36 | @include layoutMixins.rtl { 37 | padding-inline: 20px 16px !important; 38 | } 39 | } 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_textarea.scss: -------------------------------------------------------------------------------- 1 | .v-textarea { 2 | textarea { 3 | opacity: 0 !important; 4 | } 5 | 6 | & .v-field--active textarea { 7 | opacity: 1 !important; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/libs/vuetify/components/_tooltip.scss: -------------------------------------------------------------------------------- 1 | // 👉 Tooltip 2 | .v-tooltip { 3 | .v-overlay__content { 4 | font-weight: 500; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /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.scss"; 3 | @use "components/index.scss"; 4 | -------------------------------------------------------------------------------- /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 | 6 | // set body font size 15px 7 | body { 8 | font-size: 15px !important; 9 | 10 | // 👉 Button outline with default color border color 11 | .v-alert--variant-outlined, 12 | .v-avatar--variant-outlined, 13 | .v-btn.v-btn--variant-outlined, 14 | .v-card--variant-outlined, 15 | .v-chip--variant-outlined, 16 | .v-list-item--variant-outlined { 17 | &:not([class*="text-"]) { 18 | border-color: rgba(var(--v-border-color), 0.22); 19 | } 20 | 21 | &.text-default { 22 | border-color: rgba(var(--v-border-color), 0.22); 23 | } 24 | } 25 | 26 | // We reduced this margin to get 40px input height 27 | .v-input--density-compact { 28 | --v-input-chips-margin-bottom: 1px; 29 | } 30 | } 31 | 32 | .text-caption { 33 | color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)); 34 | } 35 | -------------------------------------------------------------------------------- /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: calc(var(--vh, 1vh) * 100); 9 | } 10 | 11 | .misc-avatar { 12 | z-index: 1; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /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-card { 7 | z-index: 1 !important; 8 | } 9 | } 10 | 11 | .auth-v1-top-shape, 12 | .auth-v1-bottom-shape { 13 | position: absolute; 14 | } 15 | 16 | .auth-v1-top-shape { 17 | block-size: 148px; 18 | inline-size: 148px; 19 | inset-block-start: -3.5rem; 20 | inset-inline-end: -2.5rem; 21 | } 22 | 23 | .auth-v1-bottom-shape { 24 | block-size: 240px; 25 | inline-size: 240px; 26 | inset-block-end: -4.5rem; 27 | inset-inline-start: -3rem; 28 | } 29 | 30 | .auth-illustration { 31 | z-index: 1; 32 | } 33 | 34 | @media (min-width: 960px) { 35 | .skin--bordered { 36 | .auth-card-v2 { 37 | border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important; 38 | } 39 | } 40 | } 41 | 42 | .auth-logo { 43 | position: absolute; 44 | z-index: 2; 45 | inset-block-start: 2.5rem; 46 | inset-inline-start: 2.5rem; 47 | } 48 | 49 | .auth-title { 50 | font-size: 1.75rem; 51 | font-weight: 700; 52 | letter-spacing: 0.15px; 53 | line-height: 1.75rem; 54 | } 55 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/placeholders/_default-layout-vertical-nav.scss: -------------------------------------------------------------------------------- 1 | @use "vuetify/lib/styles/tools/elevation" as elevation; 2 | @use "@configured-variables" as variables; 3 | 4 | %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled { 5 | // If navbar is contained => Squeeze navbar content on scroll 6 | @if variables.$layout-vertical-nav-navbar-is-contained { 7 | padding-inline: 1.5rem; 8 | 9 | @include elevation.elevation(4); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/placeholders/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "vertical-nav"; 2 | @forward "nav"; 3 | @forward "default-layout-vertical-nav"; 4 | @forward "misc"; 5 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/placeholders/_misc.scss: -------------------------------------------------------------------------------- 1 | %blurry-bg { 2 | /* stylelint-disable property-no-vendor-prefix */ 3 | -webkit-backdrop-filter: blur(3px); 4 | backdrop-filter: blur(3px); 5 | /* stylelint-enable */ 6 | background-color: rgb(var(--v-theme-surface), 0.88); 7 | } 8 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/placeholders/_nav.scss: -------------------------------------------------------------------------------- 1 | // ℹ️ This is common style that needs to be applied to both navs 2 | %nav { 3 | .nav-item-title { 4 | letter-spacing: normal; 5 | line-height: 1.375rem; 6 | } 7 | } 8 | 9 | /* 10 | Active nav link styles for horizontal & vertical nav 11 | 12 | For horizontal nav it will be only applied to top level nav items 13 | For vertical nav it will be only applied to nav links (not nav groups) 14 | */ 15 | %nav-link-active { 16 | --v-activated-opacity: 0.16; 17 | 18 | background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)); 19 | box-shadow: none; 20 | color: rgb(var(--v-theme-primary)); 21 | } 22 | 23 | // style for vertical nav nested icon 24 | %nav-link-nested-active { 25 | background-color: transparent !important; 26 | box-shadow: none; 27 | color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important; 28 | 29 | // style for nested dot icon 30 | .nav-item-icon { 31 | color: rgb(var(--v-theme-primary), var(--v-activated-opacity)) !important; 32 | transform: scale(2.6662); 33 | 34 | &::before { 35 | position: absolute; 36 | border-radius: 6px; 37 | background-color: rgb(var(--v-theme-primary)); 38 | block-size: 100%; 39 | content: ""; 40 | inline-size: 100%; 41 | inset: 0; 42 | transform: scale(-0.5); 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /javascript-version/src/@core/scss/template/placeholders/_vertical-nav.scss: -------------------------------------------------------------------------------- 1 | // Open & Active nav group styles 2 | %vertical-nav-group-active { 3 | --v-theme-overlay-multiplier: 2; 4 | 5 | color: rgb(var(--v-theme-primary)); 6 | } 7 | 8 | %nav-header-action { 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | background-color: rgb(var(--v-theme-primary)); 13 | block-size: 1.375rem; 14 | inline-size: 1.375rem; 15 | } 16 | 17 | // nav-group and nav-link border radius 18 | %vertical-nav-item-interactive { 19 | border-radius: 0.375rem; 20 | block-size: 2.625rem; 21 | margin-block-end: 0.25rem; 22 | } 23 | 24 | // ℹ️ Icon styling for icon nested inside another nav item (2nd level) 25 | %vertical-nav-items-nested-icon { 26 | margin-inline: 6px 20px; 27 | transition: transform 0.25s ease-in-out 0s; 28 | } 29 | 30 | %vertical-nav-items-icon-after-2nd-level { 31 | margin-inline-start: 14px; 32 | visibility: visible; 33 | } 34 | 35 | %vertical-nav-section-title { 36 | block-size: 1.125rem; 37 | color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)); 38 | font-size: 0.8125rem; 39 | line-height: 1.125rem; 40 | text-transform: uppercase; 41 | } 42 | 43 | // Vertical nav item badge styles 44 | %vertical-nav-item-badge { 45 | z-index: 1; 46 | display: flex; 47 | align-items: center; 48 | justify-content: center; 49 | border-radius: 500px; 50 | block-size: 1.5rem; 51 | font-size: 0.8125rem; 52 | font-weight: 500; 53 | line-height: 1.25rem; 54 | margin-inline-end: 0.5rem; 55 | padding-block: 0; 56 | padding-inline: 0.625rem; 57 | } 58 | -------------------------------------------------------------------------------- /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/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/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 | export const hexToRgb = hex => { 2 | // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") 3 | const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i 4 | 5 | hex = hex.replace(shorthandRegex, (m, r, g, b) => { 6 | return r + r + g + g + b + b 7 | }) 8 | 9 | const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) 10 | 11 | return result ? `${Number.parseInt(result[1], 16)},${Number.parseInt(result[2], 16)},${Number.parseInt(result[3], 16)}` : null 12 | } 13 | -------------------------------------------------------------------------------- /javascript-version/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-1.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-10.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-11.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-12.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-13.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-14.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-15.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-2.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-3.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-4.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-5.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-6.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-7.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-8.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/avatars/avatar-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/avatars/avatar-9.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/cards/chart-info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/cards/chart-info.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/cards/chart-success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/cards/chart-success.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/cards/credit-card-primary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/cards/credit-card-primary.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/cards/credit-card-success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/cards/credit-card-success.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/cards/credit-card-warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/cards/credit-card-warning.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/cards/illustration-john-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/cards/illustration-john-dark.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/cards/illustration-john-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/cards/illustration-john-light.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/cards/paypal-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/cards/paypal-error.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/cards/wallet-info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/cards/wallet-info.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/cards/wallet-primary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/cards/wallet-primary.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/customizer-icons/horizontal-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /javascript-version/src/assets/images/eCommerce/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/eCommerce/2.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/iconify-svg/checked-checkbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /javascript-version/src/assets/images/iconify-svg/checked-radio.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /javascript-version/src/assets/images/iconify-svg/indeterminate-checkbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /javascript-version/src/assets/images/iconify-svg/javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /javascript-version/src/assets/images/iconify-svg/typescript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /javascript-version/src/assets/images/iconify-svg/unchecked-checkbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /javascript-version/src/assets/images/iconify-svg/unchecked-radio.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/flags/australia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/flags/australia.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/flags/belgium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/flags/belgium.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/flags/brazil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/flags/brazil.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/flags/china.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/flags/china.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/flags/france.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/flags/france.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/flags/india.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/flags/india.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/flags/usa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/flags/usa.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/logo/brave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/logo/brave.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/logo/cent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/logo/cent.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/logo/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/logo/chrome.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/logo/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/logo/edge.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/logo/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/logo/firefox.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/logo/linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/logo/linux.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/logo/mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/logo/mac.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/logo/opera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/logo/opera.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/logo/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/logo/safari.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/logo/ubuntu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/logo/ubuntu.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/icons/logo/windows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/icons/logo/windows.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/misc/triangle-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/misc/triangle-dark.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/misc/triangle-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/misc/triangle-light.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/pages/1.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/pages/2.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/pages/3.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/pages/404.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/pages/5.jpg -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/pages/6.jpg -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/empty-cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/pages/empty-cart.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pages/pose-fs-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/pages/pose-fs-9.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pro/upgrade-banner-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/pro/upgrade-banner-dark.png -------------------------------------------------------------------------------- /javascript-version/src/assets/images/pro/upgrade-banner-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/javascript-version/src/assets/images/pro/upgrade-banner-light.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 | 44 | 45 | 51 | -------------------------------------------------------------------------------- /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 | import '@styles/styles.scss' 9 | 10 | // Create vue app 11 | const app = createApp(App) 12 | 13 | 14 | // Register plugins 15 | registerPlugins(app) 16 | 17 | // Mount vue app 18 | app.mount('#app') 19 | -------------------------------------------------------------------------------- /javascript-version/src/pages/[...error].vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 31 | 32 | 35 | -------------------------------------------------------------------------------- /javascript-version/src/pages/cards.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | -------------------------------------------------------------------------------- /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 | families: ['Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'], 12 | }, 13 | }) 14 | } 15 | export default function () { 16 | loadFonts() 17 | } 18 | -------------------------------------------------------------------------------- /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/pages/authentication/AuthProvider.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | -------------------------------------------------------------------------------- /javascript-version/src/views/pages/tables/DemoSimpleTableBasics.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 87 | -------------------------------------------------------------------------------- /javascript-version/src/views/pages/tables/DemoSimpleTableHeight.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 87 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.1.0", 3 | "private": true, 4 | "scripts": { 5 | "release": "code -r CHANGELOG.md && node -e \"process.stdin.once('data', () => process.exit())\" && pnpm 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/.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/env.d.ts: -------------------------------------------------------------------------------- 1 | import 'vue-router' 2 | 3 | declare module 'vue-router' { 4 | interface RouteMeta { 5 | action?: string 6 | subject?: string 7 | layoutWrapperClasses?: string 8 | navActiveLink?: RouteLocationRaw 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /typescript-version/eslint-internal-rules/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "commonjs" 3 | } 4 | -------------------------------------------------------------------------------- /typescript-version/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/public/favicon.ico -------------------------------------------------------------------------------- /typescript-version/public/images/avatars/avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/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: 50px; 28 | inline-size: 50px; 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/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 | 49 | -------------------------------------------------------------------------------- /typescript-version/src/@core/components/cards/CardStatisticsVertical.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 57 | -------------------------------------------------------------------------------- /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 "vuetify/lib/styles/tools/elevation" as elevation; 2 | 3 | .layout-wrapper.layout-nav-type-vertical { 4 | // 👉 Layout footer 5 | .layout-footer { 6 | $ele-layout-footer: &; 7 | 8 | .footer-content-container { 9 | // Sticky footer 10 | @at-root { 11 | // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer 12 | .layout-footer-sticky#{$ele-layout-footer} { 13 | .footer-content-container { 14 | @include elevation.elevation(8); 15 | } 16 | } 17 | } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/_mixins.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "@configured-variables" as variables; 3 | 4 | @mixin custom-elevation($color, $size) { 5 | box-shadow: (map.get(variables.$shadow-params, $size) rgba($color, map.get(variables.$shadow-opacity, $size))); 6 | } 7 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/_utilities.scss: -------------------------------------------------------------------------------- 1 | .v-timeline-item { 2 | .app-timeline-title { 3 | color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); 4 | font-size: 15px; 5 | font-weight: 500; 6 | line-height: 1.3125rem; 7 | } 8 | 9 | .app-timeline-meta { 10 | color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)); 11 | font-size: 11px; 12 | line-height: 0.875rem; 13 | } 14 | 15 | .app-timeline-text { 16 | color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); 17 | font-size: 13px; 18 | line-height: 1.25rem; 19 | } 20 | } 21 | 22 | // ℹ️ Temporary solution as v-spacer style is not getting applied in build version. will remove this after release. 23 | // VSpacer 24 | .v-spacer { 25 | flex-grow: 1; 26 | } 27 | 28 | // app-logo & app-logo-title 29 | .app-logo { 30 | display: flex; 31 | align-items: center !important; 32 | column-gap: 0.5rem !important; 33 | 34 | .app-logo-title { 35 | font-size: 1.75rem !important; 36 | font-weight: 700 !important; 37 | letter-spacing: 0.15px !important; 38 | line-height: 1.75rem !important; 39 | text-transform: lowercase !important; 40 | } 41 | } 42 | 43 | .text-white-variant { 44 | color: rgba(255, 255, 255, 78%) !important; 45 | } 46 | 47 | .bg-custom-background { 48 | background-color: rgb(var(--v-table-header-color)); 49 | } 50 | -------------------------------------------------------------------------------- /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 | } 39 | /* stylelint-disable-next-line @stylistic/indentation */ 40 | @else { 41 | @return $var; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/index.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "@core/scss/base"; 3 | 4 | // Layout 5 | @use "vertical-nav"; 6 | @use "default-layout-w-vertical-nav"; 7 | 8 | // Utilities 9 | @use "utilities"; 10 | 11 | // Components 12 | @use "components"; 13 | 14 | // Mixins 15 | @use "mixins"; 16 | 17 | // Dark 18 | @use "dark"; 19 | -------------------------------------------------------------------------------- /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 | .v-icon { 7 | block-size: 1.5rem; 8 | inline-size: 1.5rem; 9 | } 10 | 11 | &.v-avatar--variant-tonal:not([class*="text-"]) { 12 | .v-avatar__underlay { 13 | --v-activated-opacity: 0.08; 14 | } 15 | } 16 | } 17 | 18 | .v-avatar-group { 19 | > * { 20 | &:hover { 21 | transform: translateY(-5px) scale(1); 22 | 23 | @include mixins.elevation(6); 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /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__badge .v-icon { 6 | font-size: 0.9375rem; 7 | } 8 | 9 | &.v-badge--bordered:not(.v-badge--dot) { 10 | .v-badge__badge { 11 | &::after { 12 | transform: scale(1.05); 13 | } 14 | } 15 | } 16 | 17 | &.v-badge--tonal { 18 | @each $color-name in variables.$theme-colors-name { 19 | .v-badge__badge.bg-#{$color-name} { 20 | background-color: rgba(var(--v-theme-#{$color-name}), 0.16) !important; 21 | color: rgb(var(--v-theme-#{$color-name})) !important; 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_cards.scss: -------------------------------------------------------------------------------- 1 | .v-card-subtitle { 2 | color: rgba(var(--v-theme-on-background), 0.55); 3 | } 4 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_dialog.scss: -------------------------------------------------------------------------------- 1 | @use "@layouts/styles/mixins" as layoutsMixins; 2 | 3 | // 👉 Dialog 4 | body .v-dialog { 5 | // dialog custom close btn 6 | .v-dialog-close-btn { 7 | border-radius: 0.25rem; 8 | inset-block-start: 0; 9 | inset-inline-end: 0; 10 | transform: translate(0.5rem, -0.5rem); 11 | 12 | @include layoutsMixins.rtl { 13 | transform: translate(-0.5rem, -0.5rem); 14 | } 15 | 16 | &:hover { 17 | transform: translate(0.3125rem, -0.3125rem); 18 | 19 | @include layoutsMixins.rtl { 20 | transform: translate(-0.3125rem, -0.3125rem); 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_list.scss: -------------------------------------------------------------------------------- 1 | // 👉 List 2 | .v-list-item { 3 | --v-hover-opacity: 0.06 !important; 4 | 5 | .v-checkbox-btn.v-selection-control--density-compact { 6 | margin-inline-end: 0.5rem; 7 | } 8 | 9 | .v-list-item__overlay { 10 | transition: none; 11 | } 12 | 13 | .v-list-item__prepend { 14 | .v-icon { 15 | font-size: 1.25rem; 16 | } 17 | } 18 | 19 | &.v-list-item--active { 20 | &.v-list-group__header { 21 | color: rgb(var(--v-theme-primary)); 22 | } 23 | 24 | &:not(.v-list-group__header) { 25 | .v-list-item-subtitle { 26 | color: rgb(var(--v-theme-primary)); 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_menu.scss: -------------------------------------------------------------------------------- 1 | // Style list differently when it's used in a components like select, menu etc 2 | .v-menu { 3 | // Adjust padding of list item inside menu 4 | .v-list-item { 5 | padding-block: 8px !important; 6 | padding-inline: 20px !important; 7 | } 8 | } 9 | 10 | // 👉 Menu 11 | // Menu custom style 12 | .v-menu.v-overlay { 13 | .v-overlay__content { 14 | .v-list { 15 | .v-list-item { 16 | margin-block-end: 0.125rem; 17 | min-block-size: 2.375rem; 18 | 19 | &:first-child { 20 | margin-block-start: 0; 21 | } 22 | 23 | &:last-child { 24 | margin-block-end: 0; 25 | } 26 | } 27 | 28 | .v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line { 29 | padding-block: 0.5rem; 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_otp-input.scss: -------------------------------------------------------------------------------- 1 | // otp input 2 | .v-otp-input { 3 | justify-content: unset !important; 4 | 5 | .v-otp-input__content { 6 | max-inline-size: 100%; 7 | 8 | .v-field.v-field--focused { 9 | .v-field__outline { 10 | .v-field__outline__start, 11 | .v-field__outline__end { 12 | border-color: rgb(var(--v-theme-primary)) !important; 13 | } 14 | } 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_progress.scss: -------------------------------------------------------------------------------- 1 | // @use "@core/scss/template/mixins" as templateMixins; 2 | @use "@configured-variables" as variables; 3 | 4 | // 👉 Progress 5 | // .v-progress-linear { 6 | // .v-progress-linear__determinate { 7 | // @each $color-name in variables.$theme-colors-name { 8 | // &.bg-#{$color-name} { 9 | // // @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm"); 10 | // } 11 | // } 12 | // } 13 | // } 14 | -------------------------------------------------------------------------------- /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 | // 👉 radio icon opacity 8 | .v-selection-control__input > .v-icon { 9 | opacity: 1; 10 | } 11 | 12 | &.v-selection-control--disabled { 13 | --v-disabled-opacity: 0.45; 14 | } 15 | 16 | &.v-selection-control--dirty { 17 | @each $color-name in variables.$theme-colors-name { 18 | .v-selection-control__wrapper.text-#{$color-name} { 19 | .v-selection-control__input { 20 | /* ℹ️ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG; */ 21 | .v-icon { 22 | filter: drop-shadow(0 2px 4px rgba(var(--v-theme-#{$color-name}), 0.4)); 23 | } 24 | } 25 | } 26 | } 27 | } 28 | 29 | &.v-selection-control { 30 | .v-selection-control__input { 31 | svg { 32 | font-size: 1.5rem; 33 | } 34 | } 35 | 36 | .v-label { 37 | color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); 38 | } 39 | } 40 | } 41 | 42 | // 👉 Radio, Checkbox 43 | 44 | .v-input.v-radio-group > .v-input__control > .v-label { 45 | margin-inline-start: 0; 46 | } 47 | 48 | .v-radio-group { 49 | .v-selection-control-group { 50 | .v-radio:not(:last-child) { 51 | margin-inline-end: 0; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /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; 7 | } 8 | 9 | .v-icon { 10 | --v-icon-size-multiplier: 1; 11 | } 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_slider.scss: -------------------------------------------------------------------------------- 1 | // 👉 Slider 2 | .v-slider { 3 | .v-slider-track__background--opacity { 4 | opacity: 0.16; 5 | } 6 | } 7 | 8 | .v-slider-thumb { 9 | .v-slider-thumb__surface::after { 10 | border-radius: 50%; 11 | background-color: #fff; 12 | block-size: calc(var(--v-slider-thumb-size) - 9px); 13 | inline-size: calc(var(--v-slider-thumb-size) - 9px); 14 | } 15 | 16 | .v-slider-thumb__label { 17 | background-color: rgb(var(--v-tooltip-background)); 18 | color: rgb(var(--v-theme-surface)); 19 | font-weight: 500; 20 | line-height: 1.25rem; 21 | 22 | &::before { 23 | content: none; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_snackbar.scss: -------------------------------------------------------------------------------- 1 | // 👉 snackbar 2 | .v-snackbar { 3 | .v-snackbar__actions { 4 | .v-btn { 5 | font-size: 13px; 6 | line-height: 18px; 7 | text-transform: capitalize; 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_table.scss: -------------------------------------------------------------------------------- 1 | @use "@layouts/styles/mixins" as layoutMixins; 2 | 3 | // 👉 Table 4 | .v-table { 5 | th { 6 | color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important; 7 | font-size: 0.8125rem; 8 | letter-spacing: 0.2px; 9 | line-height: 24px; 10 | text-transform: uppercase; 11 | 12 | .v-data-table-header__content { 13 | display: flex; 14 | justify-content: space-between; 15 | } 16 | } 17 | 18 | .v-data-table-footer { 19 | row-gap: 8px !important; 20 | } 21 | } 22 | 23 | // 👉 Datatable 24 | .v-data-table, 25 | .v-table { 26 | table { 27 | thead, 28 | tbody { 29 | tr { 30 | th, 31 | td { 32 | &:first-child:has(.v-checkbox-btn) { 33 | padding-inline: 15px 0 !important; 34 | } 35 | 36 | @include layoutMixins.rtl { 37 | padding-inline: 20px 16px !important; 38 | } 39 | } 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_textarea.scss: -------------------------------------------------------------------------------- 1 | .v-textarea { 2 | textarea { 3 | opacity: 0 !important; 4 | } 5 | 6 | & .v-field--active textarea { 7 | opacity: 1 !important; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/libs/vuetify/components/_tooltip.scss: -------------------------------------------------------------------------------- 1 | // 👉 Tooltip 2 | .v-tooltip { 3 | .v-overlay__content { 4 | font-weight: 500; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /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.scss"; 3 | @use "components/index.scss"; 4 | -------------------------------------------------------------------------------- /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 | 6 | // set body font size 15px 7 | body { 8 | font-size: 15px !important; 9 | 10 | // 👉 Button outline with default color border color 11 | .v-alert--variant-outlined, 12 | .v-avatar--variant-outlined, 13 | .v-btn.v-btn--variant-outlined, 14 | .v-card--variant-outlined, 15 | .v-chip--variant-outlined, 16 | .v-list-item--variant-outlined { 17 | &:not([class*="text-"]) { 18 | border-color: rgba(var(--v-border-color), 0.22); 19 | } 20 | 21 | &.text-default { 22 | border-color: rgba(var(--v-border-color), 0.22); 23 | } 24 | } 25 | 26 | // We reduced this margin to get 40px input height 27 | .v-input--density-compact { 28 | --v-input-chips-margin-bottom: 1px; 29 | } 30 | } 31 | 32 | .text-caption { 33 | color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)); 34 | } 35 | -------------------------------------------------------------------------------- /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: calc(var(--vh, 1vh) * 100); 9 | } 10 | 11 | .misc-avatar { 12 | z-index: 1; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /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-card { 7 | z-index: 1 !important; 8 | } 9 | } 10 | 11 | .auth-v1-top-shape, 12 | .auth-v1-bottom-shape { 13 | position: absolute; 14 | } 15 | 16 | .auth-v1-top-shape { 17 | block-size: 148px; 18 | inline-size: 148px; 19 | inset-block-start: -3.5rem; 20 | inset-inline-end: -2.5rem; 21 | } 22 | 23 | .auth-v1-bottom-shape { 24 | block-size: 240px; 25 | inline-size: 240px; 26 | inset-block-end: -4.5rem; 27 | inset-inline-start: -3rem; 28 | } 29 | 30 | .auth-illustration { 31 | z-index: 1; 32 | } 33 | 34 | @media (min-width: 960px) { 35 | .skin--bordered { 36 | .auth-card-v2 { 37 | border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important; 38 | } 39 | } 40 | } 41 | 42 | .auth-logo { 43 | position: absolute; 44 | z-index: 2; 45 | inset-block-start: 2.5rem; 46 | inset-inline-start: 2.5rem; 47 | } 48 | 49 | .auth-title { 50 | font-size: 1.75rem; 51 | font-weight: 700; 52 | letter-spacing: 0.15px; 53 | line-height: 1.75rem; 54 | } 55 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/placeholders/_default-layout-vertical-nav.scss: -------------------------------------------------------------------------------- 1 | @use "vuetify/lib/styles/tools/elevation" as elevation; 2 | @use "@configured-variables" as variables; 3 | 4 | %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled { 5 | // If navbar is contained => Squeeze navbar content on scroll 6 | @if variables.$layout-vertical-nav-navbar-is-contained { 7 | padding-inline: 1.5rem; 8 | 9 | @include elevation.elevation(4); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/placeholders/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "vertical-nav"; 2 | @forward "nav"; 3 | @forward "default-layout-vertical-nav"; 4 | @forward "misc"; 5 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/placeholders/_misc.scss: -------------------------------------------------------------------------------- 1 | %blurry-bg { 2 | /* stylelint-disable property-no-vendor-prefix */ 3 | -webkit-backdrop-filter: blur(3px); 4 | backdrop-filter: blur(3px); 5 | /* stylelint-enable */ 6 | background-color: rgb(var(--v-theme-surface), 0.88); 7 | } 8 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/placeholders/_nav.scss: -------------------------------------------------------------------------------- 1 | // ℹ️ This is common style that needs to be applied to both navs 2 | %nav { 3 | .nav-item-title { 4 | letter-spacing: normal; 5 | line-height: 1.375rem; 6 | } 7 | } 8 | 9 | /* 10 | Active nav link styles for horizontal & vertical nav 11 | 12 | For horizontal nav it will be only applied to top level nav items 13 | For vertical nav it will be only applied to nav links (not nav groups) 14 | */ 15 | %nav-link-active { 16 | --v-activated-opacity: 0.16; 17 | 18 | background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)); 19 | box-shadow: none; 20 | color: rgb(var(--v-theme-primary)); 21 | } 22 | 23 | // style for vertical nav nested icon 24 | %nav-link-nested-active { 25 | background-color: transparent !important; 26 | box-shadow: none; 27 | color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important; 28 | 29 | // style for nested dot icon 30 | .nav-item-icon { 31 | color: rgb(var(--v-theme-primary), var(--v-activated-opacity)) !important; 32 | transform: scale(2.6662); 33 | 34 | &::before { 35 | position: absolute; 36 | border-radius: 6px; 37 | background-color: rgb(var(--v-theme-primary)); 38 | block-size: 100%; 39 | content: ""; 40 | inline-size: 100%; 41 | inset: 0; 42 | transform: scale(-0.5); 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /typescript-version/src/@core/scss/template/placeholders/_vertical-nav.scss: -------------------------------------------------------------------------------- 1 | // Open & Active nav group styles 2 | %vertical-nav-group-active { 3 | --v-theme-overlay-multiplier: 2; 4 | 5 | color: rgb(var(--v-theme-primary)); 6 | } 7 | 8 | %nav-header-action { 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | background-color: rgb(var(--v-theme-primary)); 13 | block-size: 1.375rem; 14 | inline-size: 1.375rem; 15 | } 16 | 17 | // nav-group and nav-link border radius 18 | %vertical-nav-item-interactive { 19 | border-radius: 0.375rem; 20 | block-size: 2.625rem; 21 | margin-block-end: 0.25rem; 22 | } 23 | 24 | // ℹ️ Icon styling for icon nested inside another nav item (2nd level) 25 | %vertical-nav-items-nested-icon { 26 | margin-inline: 6px 20px; 27 | transition: transform 0.25s ease-in-out 0s; 28 | } 29 | 30 | %vertical-nav-items-icon-after-2nd-level { 31 | margin-inline-start: 14px; 32 | visibility: visible; 33 | } 34 | 35 | %vertical-nav-section-title { 36 | block-size: 1.125rem; 37 | color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)); 38 | font-size: 0.8125rem; 39 | line-height: 1.125rem; 40 | text-transform: uppercase; 41 | } 42 | 43 | // Vertical nav item badge styles 44 | %vertical-nav-item-badge { 45 | z-index: 1; 46 | display: flex; 47 | align-items: center; 48 | justify-content: center; 49 | border-radius: 500px; 50 | block-size: 1.5rem; 51 | font-size: 0.8125rem; 52 | font-weight: 500; 53 | line-height: 1.25rem; 54 | margin-inline-end: 0.5rem; 55 | padding-block: 0; 56 | padding-inline: 0.625rem; 57 | } 58 | -------------------------------------------------------------------------------- /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/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/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 | export const hexToRgb = (hex: string) => { 2 | // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") 3 | const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i 4 | 5 | hex = hex.replace(shorthandRegex, (m: string, r: string, g: string, b: string) => { 6 | return r + r + g + g + b + b 7 | }) 8 | 9 | const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) 10 | 11 | return result ? `${Number.parseInt(result[1], 16)},${Number.parseInt(result[2], 16)},${Number.parseInt(result[3], 16)}` : null 12 | } 13 | -------------------------------------------------------------------------------- /typescript-version/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-1.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-10.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-11.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-12.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-13.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-14.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-15.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-2.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-3.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-4.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-5.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-6.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-7.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-8.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/avatars/avatar-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/avatars/avatar-9.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/cards/chart-info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/cards/chart-info.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/cards/chart-success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/cards/chart-success.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/cards/credit-card-primary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/cards/credit-card-primary.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/cards/credit-card-success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/cards/credit-card-success.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/cards/credit-card-warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/cards/credit-card-warning.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/cards/illustration-john-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/cards/illustration-john-dark.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/cards/illustration-john-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/cards/illustration-john-light.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/cards/paypal-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/cards/paypal-error.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/cards/wallet-info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/cards/wallet-info.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/cards/wallet-primary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/cards/wallet-primary.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/customizer-icons/horizontal-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /typescript-version/src/assets/images/eCommerce/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/eCommerce/2.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/iconify-svg/checked-checkbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /typescript-version/src/assets/images/iconify-svg/checked-radio.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /typescript-version/src/assets/images/iconify-svg/indeterminate-checkbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /typescript-version/src/assets/images/iconify-svg/javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /typescript-version/src/assets/images/iconify-svg/typescript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /typescript-version/src/assets/images/iconify-svg/unchecked-checkbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /typescript-version/src/assets/images/iconify-svg/unchecked-radio.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/flags/australia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/flags/australia.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/flags/belgium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/flags/belgium.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/flags/brazil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/flags/brazil.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/flags/china.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/flags/china.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/flags/france.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/flags/france.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/flags/india.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/flags/india.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/flags/usa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/flags/usa.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/logo/brave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/logo/brave.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/logo/cent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/logo/cent.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/logo/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/logo/chrome.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/logo/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/logo/edge.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/logo/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/logo/firefox.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/logo/linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/logo/linux.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/logo/mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/logo/mac.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/logo/opera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/logo/opera.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/logo/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/logo/safari.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/logo/ubuntu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/logo/ubuntu.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/icons/logo/windows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/icons/logo/windows.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/misc/triangle-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/misc/triangle-dark.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/misc/triangle-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/misc/triangle-light.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/pages/1.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/pages/2.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/pages/3.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/pages/404.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/pages/5.jpg -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/pages/6.jpg -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/empty-cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/pages/empty-cart.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pages/pose-fs-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/pages/pose-fs-9.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pro/upgrade-banner-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/pro/upgrade-banner-dark.png -------------------------------------------------------------------------------- /typescript-version/src/assets/images/pro/upgrade-banner-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-vuetify-vuejs-admin-template-free/9f84e6c7eb781c54fa96dbd2223c33846f7afc31/typescript-version/src/assets/images/pro/upgrade-banner-light.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 | 34 | 35 | 41 | -------------------------------------------------------------------------------- /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 | import '@styles/styles.scss' 10 | 11 | // Create vue app 12 | const app = createApp(App) 13 | 14 | // Register plugins 15 | registerPlugins(app) 16 | 17 | // Mount vue app 18 | app.mount('#app') 19 | -------------------------------------------------------------------------------- /typescript-version/src/pages/[...error].vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 31 | 32 | 35 | -------------------------------------------------------------------------------- /typescript-version/src/pages/cards.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | -------------------------------------------------------------------------------- /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 | families: ['Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'], 13 | }, 14 | }) 15 | } 16 | 17 | export default function () { 18 | loadFonts() 19 | } 20 | -------------------------------------------------------------------------------- /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/pages/authentication/AuthProvider.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 39 | -------------------------------------------------------------------------------- /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/assets/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 | --------------------------------------------------------------------------------