Skip to content

Vue3 #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Vue3 #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6e8d730
vue 3 migration
TomSmith27 Nov 28, 2022
6d3b30b
more vue3 updates
tomsm10 Nov 29, 2022
c8992ab
update package lock
tomsm10 Nov 29, 2022
cc0e709
Merge branch 'main' into vue3
tomsm10 Nov 29, 2022
151756a
update package json
tomsm10 Nov 29, 2022
8336f94
fix more errors
tomsm10 Nov 29, 2022
2bc34ba
update lock
TomSmith27 Nov 29, 2022
a9faea9
fix many type errors
tomsm10 Nov 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/docs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ An example might look like this:
import Vue from 'vue';
import { ForgeInlineEditor } from '@3squared/forge-ui';

export default Vue.extend({
export default defineComponent({
components: { ForgeInlineEditor },
data() {
return {
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"lint": "eslint src/**/*.{ts,vue} --fix"
},
"dependencies": {
"@3squared/forge-playground": "1.1.3",
"@3squared/forge-playground": "^2.0.0-beta.0",
"@3squared/forge-ui": "*",
"bootstrap-vue": "2.22.0",
"prismjs": "1.28.0",
Expand Down
25 changes: 12 additions & 13 deletions apps/docs/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@
<TheNavBar></TheNavBar>
<main class="forge-layout" id="main-content">
<div class="container">
<router-view/>
<router-view />
</div>
</main>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import pkg from '../package.json';
import Changelog from './components/Changelog.vue';
import TheNavBar from './components/TheNavBar.vue';
import {BNavItemDropdown, BDropdownItem, BButton, BTooltip, VBTooltip, BNavItem } from 'bootstrap-vue';
export default Vue.extend({
name: 'Home',
import Vue from "vue";
import pkg from "../package.json";
import Changelog from "./components/Changelog.vue";
import TheNavBar from "./components/TheNavBar.vue";
import { BNavItemDropdown, BDropdownItem, BButton, BTooltip, VBTooltip, BNavItem } from "bootstrap-vue";
export default defineComponent({
name: "Home",
components: {
Changelog,
BNavItemDropdown,
Expand All @@ -25,13 +25,12 @@ export default Vue.extend({
BNavItem,
TheNavBar
},
directives: {"b-tooltip": VBTooltip},
directives: { "b-tooltip": VBTooltip },

computed: {
pkg() {
return pkg;
},
},
}
}
});

</script>
</script>
21 changes: 9 additions & 12 deletions apps/docs/src/components/Demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@
<component :is="component"></component>
</div>
<div v-if="code">
<b-button class="mt-2" :variant="codeVisible ? 'primary' : 'outline-primary'" @click="codeVisible = !codeVisible">
View Code
</b-button>
<b-button class="mt-2" :variant="codeVisible ? 'primary' : 'outline-primary'" @click="codeVisible = !codeVisible"> View Code </b-button>
<b-collapse v-model="codeVisible" class="mt-2 position-relative">
<b-button class="copy-code text-white" variant="link">
Copy
Expand All @@ -19,12 +17,12 @@
</template>

<script lang="ts">
import Vue from 'vue';
import { BButton, BCollapse, BIconClipboard } from 'bootstrap-vue';
import Prism from 'prismjs';
import Vue from "vue";
import { BButton, BCollapse, BIconClipboard } from "bootstrap-vue";
import Prism from "prismjs";

export default Vue.extend({
name: 'Demo',
export default defineComponent({
name: "Demo",
components: { BButton, BCollapse, BIconClipboard },
props: {
component: {
Expand All @@ -38,14 +36,14 @@ export default Vue.extend({
},
computed: {
formattedCode() {
const html = Prism.highlight(this.code, Prism.languages.markup, 'vue');
const html = Prism.highlight(this.code, Prism.languages.markup, "vue");
return html;
}
},
methods: {
copyCode() {
navigator.clipboard.writeText(this.code);
this.$forgeToast('success', 'Example Successfully Copied');
this.$forgeToast("success", "Example Successfully Copied");
}
},
data() {
Expand All @@ -71,10 +69,9 @@ export default Vue.extend({
}
}


.copy-code {
position: absolute;
z-index: 10;
right: 0;
}
</style>
</style>
128 changes: 64 additions & 64 deletions apps/docs/src/components/TheNavBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,106 +2,106 @@
<b-navbar type="dark" variant="dark">
<b-navbar-nav class="w-100">
<b-navbar-brand>
<router-link :to="{path : '/'}">
<router-link :to="{ path: '/' }">
<img alt="" height="32px" src="https://cdn.3sq.app/assets/products/forge-ui/images/logo.svg" />
</router-link>
</b-navbar-brand>


<!-- Navbar dropdowns -->
<div class="d-flex align-items-center">
<b-nav-item-dropdown v-for="section in sections" :text="section.label" :key="section.label">
<b-dropdown-item v-for="page in section.children" :key="page.label" :to="page.to">{{ page.label }}</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item v-for="page in pages" :key="page.label" :to="page.to">{{ page.label }}</b-nav-item>
</div>

<div class="d-flex mt-auto mb-auto ml-auto">
<route-searcher class="searcher"/>
<route-searcher class="searcher" />
</div>
</b-navbar-nav>
</b-navbar>
</template>

<script lang="ts">
import { ForgeNavbarBuilder, Page, Section } from '@3squared/forge-ui';
import { BButton, BDropdownItem, BNavbar, BNavbarBrand, BNavbarNav, BNavItem, BNavItemDropdown } from 'bootstrap-vue';
import { ForgeNavbarBuilder, Page, Section } from "@3squared/forge-ui";
import { BButton, BDropdownItem, BNavbar, BNavbarBrand, BNavbarNav, BNavItem, BNavItemDropdown } from "bootstrap-vue";
// @ts-ignore
import routes from 'pages-generated';
import RouteSearcher from './RouteSearcher.vue';
import Vue from 'vue';
import routes from "pages-generated";
import RouteSearcher from "./RouteSearcher.vue";
import Vue from "vue";

export default Vue.extend({
name: 'TheNavBar',
export default defineComponent({
name: "TheNavBar",
components: {
BNavItemDropdown,
BDropdownItem,
BButton,
BNavItem,
RouteSearcher,
BNavbar, BNavbarNav, BNavbarBrand
BNavbar,
BNavbarNav,
BNavbarBrand
},
computed: {
routes(): any {
return routes;
},
navItems() {
return new ForgeNavbarBuilder()
.addSection('Getting Started', this.$route.name?.includes('getting-started-') ? true : false, (s) =>
s
.addSubPage('Get Started', (sp) => sp.to({ name: 'getting-started-Installation' }))
)
.addSection('Forms', this.$route.name?.includes('forms-') ? true : false, (s) =>
s
.addSubPage('Checkbox', (sp) => sp.to({ name: 'forms-checkbox-Checkbox' }))
.addSubPage('Date Picker', (sp) => sp.to({ name: 'forms-date-picker-DatePicker' }))
.addSubPage('File Uploader', (sp) => sp.to({ name: 'forms-file-upload-FileUploader' }))
.addSubPage('Remaining Characters', (sp) => sp.to({ name: 'forms-remaining-characters-RemainingCharacters' }))
.addSubPage('Form', (sp) => sp.to({ name: 'forms-form-Form' }))
.addSubPage('Form Field', (sp) => sp.to({ name: 'forms-form-field-FormField' }))
.addSubPage('Inline Editor', (sp) => sp.to({ name: 'forms-inline-editor-InlineEditor' }))
.addSubPage('Input', (sp) => sp.to({ name: 'forms-input-Input' }))
.addSubPage('Multiselect', (sp) => sp.to({ name: 'forms-multiselect-Multiselect' }))
.addSubPage('Multiselect Preview', (sp) => sp.to({ name: 'forms-multiselect-preview-MultiselectPreview' }))
.addSubPage('Select', (sp) => sp.to({ name: 'forms-select-Select' }))
.addSubPage('Tags', (sp) => sp.to({ name: 'forms-tags-Tags' }))
.addSubPage('Textarea', (sp) => sp.to({ name: 'forms-textarea-Textarea' }))
)
.addSection('General', this.$route.name?.includes('general-') ? true : false, (s) =>
s
.addSubPage('Action Button', (sp) => sp.to({ name: 'general-action-button-ActionButton' }))
.addSubPage('Alert', (sp) => sp.to({ name: 'general-alert-Alert' }))
.addSubPage('Button', (sp) => sp.to({ name: 'general-button-Button' }))
.addSubPage('Chart', (sp) => sp.to({ name: 'general-chart-Chart' }))
.addSubPage('Loader', (sp) => sp.to({ name: 'general-loader-Loader' }))
.addSubPage('Modal', (sp) => sp.to({ name: 'general-modal-Modal' }))
.addSubPage('Popover', (sp) => sp.to({ name: 'general-popover-Popover' }))
.addSubPage('Progress', (sp) => sp.to({ name: 'general-progress-Progress' }))
.addSubPage('Stat Widget', (sp) => sp.to({ name: 'general-stat-widget-StatWidget' }))
.addSubPage('Toast', (sp) => sp.to({ name: 'general-toast-Toast' }))
.addSubPage('Tooltip', (sp) => sp.to({ name: 'general-tooltip-Tooltip' }))
)
.addSection('Layout', this.$route.name?.includes('layout-') ? true : false, (s) =>
s
.addSubPage('Collapse', (sp) => sp.to({ name: 'layout-collapse-Collapse' }))
.addSubPage('Page Header', (sp) => sp.to({ name: 'layout-page-header-PageHeader' }))
.addSubPage('Stepper', (sp) => sp.to({ name: 'layout-stepper-Stepper' }))
.addSubPage('Tabs', (sp) => sp.to({ name: 'layout-tabs-Tabs' }))
)
.addSection('Tables', this.$route.name?.includes('tables-') ? true : false, (s) =>
s
.addSubPage('Filter Header', (sp) => sp.to({ name: 'tables-filter-header-FilterHeader' }))
.addSubPage('Table', (sp) => sp.to({ name: 'tables-table-Table' }))
)
.addPage('Icons', (p) => p.to({ name: 'Icons-Icons' }))
.addPage('Colours', (p) => p.to({ name: 'Colours' }))
.build();
.addSection("Getting Started", this.$route.name?.includes("getting-started-") ? true : false, (s) =>
s.addSubPage("Get Started", (sp) => sp.to({ name: "getting-started-Installation" }))
)
.addSection("Forms", this.$route.name?.includes("forms-") ? true : false, (s) =>
s
.addSubPage("Checkbox", (sp) => sp.to({ name: "forms-checkbox-Checkbox" }))
.addSubPage("Date Picker", (sp) => sp.to({ name: "forms-date-picker-DatePicker" }))
.addSubPage("File Uploader", (sp) => sp.to({ name: "forms-file-upload-FileUploader" }))
.addSubPage("Remaining Characters", (sp) => sp.to({ name: "forms-remaining-characters-RemainingCharacters" }))
.addSubPage("Form", (sp) => sp.to({ name: "forms-form-Form" }))
.addSubPage("Form Field", (sp) => sp.to({ name: "forms-form-field-FormField" }))
.addSubPage("Inline Editor", (sp) => sp.to({ name: "forms-inline-editor-InlineEditor" }))
.addSubPage("Input", (sp) => sp.to({ name: "forms-input-Input" }))
.addSubPage("Multiselect", (sp) => sp.to({ name: "forms-multiselect-Multiselect" }))
.addSubPage("Multiselect Preview", (sp) => sp.to({ name: "forms-multiselect-preview-MultiselectPreview" }))
.addSubPage("Select", (sp) => sp.to({ name: "forms-select-Select" }))
.addSubPage("Tags", (sp) => sp.to({ name: "forms-tags-Tags" }))
.addSubPage("Textarea", (sp) => sp.to({ name: "forms-textarea-Textarea" }))
)
.addSection("General", this.$route.name?.includes("general-") ? true : false, (s) =>
s
.addSubPage("Action Button", (sp) => sp.to({ name: "general-action-button-ActionButton" }))
.addSubPage("Alert", (sp) => sp.to({ name: "general-alert-Alert" }))
.addSubPage("Button", (sp) => sp.to({ name: "general-button-Button" }))
.addSubPage("Chart", (sp) => sp.to({ name: "general-chart-Chart" }))
.addSubPage("Loader", (sp) => sp.to({ name: "general-loader-Loader" }))
.addSubPage("Modal", (sp) => sp.to({ name: "general-modal-Modal" }))
.addSubPage("Popover", (sp) => sp.to({ name: "general-popover-Popover" }))
.addSubPage("Progress", (sp) => sp.to({ name: "general-progress-Progress" }))
.addSubPage("Stat Widget", (sp) => sp.to({ name: "general-stat-widget-StatWidget" }))
.addSubPage("Toast", (sp) => sp.to({ name: "general-toast-Toast" }))
.addSubPage("Tooltip", (sp) => sp.to({ name: "general-tooltip-Tooltip" }))
)
.addSection("Layout", this.$route.name?.includes("layout-") ? true : false, (s) =>
s
.addSubPage("Collapse", (sp) => sp.to({ name: "layout-collapse-Collapse" }))
.addSubPage("Page Header", (sp) => sp.to({ name: "layout-page-header-PageHeader" }))
.addSubPage("Stepper", (sp) => sp.to({ name: "layout-stepper-Stepper" }))
.addSubPage("Tabs", (sp) => sp.to({ name: "layout-tabs-Tabs" }))
)
.addSection("Tables", this.$route.name?.includes("tables-") ? true : false, (s) =>
s
.addSubPage("Filter Header", (sp) => sp.to({ name: "tables-filter-header-FilterHeader" }))
.addSubPage("Table", (sp) => sp.to({ name: "tables-table-Table" }))
)
.addPage("Icons", (p) => p.to({ name: "Icons-Icons" }))
.addPage("Colours", (p) => p.to({ name: "Colours" }))
.build();
},
sections(): Section[] {
return this.navItems.filter(n => n.type === 'section') as Section[]
return this.navItems.filter((n) => n.type === "section") as Section[];
},
pages(): Page[] {
return this.navItems.filter(n => n.type === 'page') as Page[]
return this.navItems.filter((n) => n.type === "page") as Page[];
}
}
});
Expand All @@ -111,4 +111,4 @@ export default Vue.extend({
.searcher {
width: 300px !important;
}
</style>
</style>
Loading