-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add fontawesome and vee-validate by default.
- Loading branch information
Showing
6 changed files
with
111 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { library } from '@fortawesome/fontawesome-svg-core'; | ||
| import { faChevronUp, faCheck } from '@fortawesome/free-solid-svg-icons'; | ||
| import { } from '@fortawesome/free-regular-svg-icons'; | ||
|
|
||
| library.add(faChevronUp, faCheck); | ||
|
|
||
| // Reduce dll size by only importing icons which are actually being used: | ||
| // https://fontawesome.com/how-to-use/use-with-node-js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,29 @@ | ||
| import * as Vue from 'vue'; | ||
| import Vue from 'vue'; | ||
| import { renderAsyncComponent } from './vue-renderer'; | ||
|
|
||
| type VueAsync = () => Promise<typeof import('*.vue')>; | ||
| import { defineRule, Form, Field } from 'vee-validate'; | ||
| import AllRules from '@vee-validate/rules'; | ||
| import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; | ||
|
|
||
| function renderAsyncComponent(tag: string, factory: VueAsync) { | ||
| const ac = Vue.defineAsyncComponent(factory); | ||
| const elements = document.getElementsByTagName(tag); | ||
|
|
||
| for (const e of elements) { | ||
| const props: Record<string, unknown> = {}; | ||
| // enable passing HTML attributes as component props | ||
| if (e.hasAttributes()) { | ||
| for (const attr of e.attributes) { | ||
| if (attr.name.startsWith(':')) { | ||
| props[attr.name.substr(1)] = JSON.parse(attr.value); | ||
| } else { | ||
| // simple string | ||
| props[attr.name] = attr.value; | ||
| } | ||
| } | ||
| } | ||
| // define validation rules | ||
| Object.keys(AllRules).forEach(rule => { | ||
| defineRule(rule, AllRules[rule]); | ||
| }); | ||
|
|
||
| const app = Vue.createApp(ac, props); | ||
| app.mount(e); | ||
| } | ||
| /** | ||
| * allows declaring components that can be used in all components. | ||
| * usually these components are third-party libraries | ||
| * or any first-party reusable components such as a custom submit button. | ||
| * @param app | ||
| */ | ||
| function configure(app: Vue.App) { | ||
| // https://v3.vuejs.org/style-guide/#component-name-casing-in-templates-strongly-recommended | ||
| app.component('fa-icon', FontAwesomeIcon); | ||
| app.component('vv-form', Form); | ||
| app.component('vv-field', Field); | ||
| } | ||
|
|
||
| renderAsyncComponent('Hello', () => import('./components/Hello.vue')); | ||
| // use this file to render top-level components asynchronously. | ||
|
|
||
| // for example: allows calling <Hello sdk="instapack" language="vue"></Hello> in HTML! | ||
| renderAsyncComponent('Hello', () => import('./components/Hello.vue'), configure); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import Vue from 'vue'; | ||
|
|
||
| type VueAsync = () => Promise<typeof import('*.vue')>; | ||
|
|
||
| type ConfigureVueApp = (app: Vue.App<Element>) => void; | ||
|
|
||
| /** | ||
| * Convert a hyphenated string to camelCase. | ||
| */ | ||
| function hyphenToCamelCase(name: string) { | ||
| return name.replace(/-(.)/g, (_match: string, char: string) => { | ||
| return char.toUpperCase(); | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Attempts to extract element attributes as string map. | ||
| * @param el | ||
| * @returns | ||
| */ | ||
| function convertElementAttributesToPropsMap(el: Element): Record<string, string> { | ||
| if (el.hasAttributes() === false) { | ||
| return {}; | ||
| } | ||
| const result: Record<string, string> = {}; | ||
|
|
||
| for (const attribute of el.attributes) { | ||
| const name = hyphenToCamelCase(attribute.name); | ||
| result[name] = attribute.value; | ||
| } | ||
|
|
||
| return result; | ||
| } | ||
|
|
||
| /** | ||
| * For each matching HTML Elements, render and mount a Vue Component asynchronously. | ||
| * Passes Element attributes as string to props. Kebab-case attributes will be converted to camel-case. | ||
| * @param tag | ||
| * @param factory | ||
| * @param configure | ||
| */ | ||
| export function renderAsyncComponent(tag: string, factory: VueAsync, configure?: ConfigureVueApp) { | ||
| const ac = Vue.defineAsyncComponent(factory); | ||
| const elements = document.getElementsByTagName(tag); | ||
|
|
||
| for (const el of elements) { | ||
| const props = convertElementAttributesToPropsMap(el) | ||
| const app = Vue.createApp(ac, props); | ||
| if (configure) { | ||
| configure(app); | ||
| } | ||
| app.mount(el); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters