/* xeslint-disable */ import Vue from "vue"; import Vuetify from "vuetify/lib"; //--------------------------- //ICONS //tree shaking compatible icon method //https://stackoverflow.com/a/58261449/8939 import { library } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; Vue.component("font-awesome-icon", FontAwesomeIcon); // Register component globally import { faSquare as farSquare } from "@fortawesome/free-regular-svg-icons"; import { faAddressBook, faAddressCard, faArrowsAltH, faArrowsAltV, faBars, faBell, faBinoculars, faBold, faBox, faBoxes, faBullhorn, faBusinessTime, faCalculator, faCalendarAlt, faCalendarCheck, faCalendarDay, faCaretDown, faCheckCircle, faCheckSquare, faChevronDown, faChild, faClock, faCode, faCogs, faColumns, faDiceD20, faDolly, faDollyFlatbed, faDoorOpen, faEdit, faEllipsisV, faExclamationCircle, faEye, faEyeSlash, faFan, faFeather, faFile, faFileAlt, faFileArchive, faFileAudio, faFileCode, faFileContract, faFileCsv, faFileExcel, faFileImage, faFileImport, faFileMedicalAlt, faFilePdf, faFilePowerpoint, faFileVideo, faFileWord, faFilter, faFolder, faGenderless, faGlasses, faGlobe, faHeading, faHistory, faHome, faImage, faInbox, faInfoCircle, faItalic, faKey, faLanguage, faLink, faListOl, faListUl, faMinus, faPallet, faPaperclip, faPaperPlane, faPencilAlt, faPencilRuler, faPlug, faQuestionCircle, faQuoteLeft, faRobot, faRocket, faSearch, faSeedling, faServer, faShippingFast, faSignInAlt, faSignOutAlt, faSitemap, faSlidersH, faSquareFull, faStickyNote, faStore, faStrikethrough, faTable, faTachometerAlt, faThList, faTicketAlt, faToolbox, faTools, faUser, faUserCog, faUsers, faUserTie, faVial } from "@fortawesome/free-solid-svg-icons"; Vue.component("font-awesome-icon", FontAwesomeIcon); library.add( faAddressBook, faAddressCard, faArrowsAltH, faArrowsAltV, faBars, faBell, faBinoculars, faBold, faBox, faBoxes, faBullhorn, faBusinessTime, faCalculator, faCalendarAlt, faCalendarCheck, faCalendarDay, faCaretDown, faCheckCircle, faCheckSquare, faChevronDown, faChild, faClock, faCode, faCogs, faColumns, faDiceD20, faDolly, faDollyFlatbed, faDoorOpen, faEdit, faEllipsisV, faExclamationCircle, faEye, faEyeSlash, faFan, faFeather, faFile, faFileAlt, faFileArchive, faFileAudio, faFileCode, faFileContract, faFileCsv, faFileExcel, faFileImage, faFileImport, faFileMedicalAlt, faFilePdf, faFilePowerpoint, faFileVideo, faFileWord, faFilter, faFolder, faGenderless, faGlasses, faGlobe, faHeading, faHistory, faHome, faImage, faInbox, faInfoCircle, faItalic, faKey, faLanguage, faLink, faListOl, faListUl, faMinus, faPallet, faPaperclip, faPaperPlane, faPencilAlt, faPencilRuler, faPlug, faQuestionCircle, faQuoteLeft, faRobot, faRocket, faSearch, faSeedling, faServer, faShippingFast, faSignInAlt, faSignOutAlt, faSitemap, faSlidersH, farSquare, faSquareFull, faStickyNote, faStore, faStrikethrough, faTable, faTachometerAlt, faThList, faTicketAlt, faToolbox, faTools, faUser, faUserCog, faUsers, faUserTie, faVial ); const CUSTOM_ICONS = { ayiAddressBook: { component: FontAwesomeIcon, props: { icon: ["fas", "address-book"] } }, ayiAddressCard: { component: FontAwesomeIcon, props: { icon: ["fas", "address-card"] } }, ayiArrowsAltH: { component: FontAwesomeIcon, props: { icon: ["fas", "arrows-alt-h"] } }, ayiArrowsAltV: { component: FontAwesomeIcon, props: { icon: ["fas", "arrows-alt-v"] } }, ayiBell: { component: FontAwesomeIcon, props: { icon: ["fas", "bell"] } }, ayiBinoculars: { component: FontAwesomeIcon, props: { icon: ["fas", "binoculars"] } }, ayiBold: { component: FontAwesomeIcon, props: { icon: ["fas", "bold"] } }, ayiBox: { component: FontAwesomeIcon, props: { icon: ["fas", "box"] } }, ayiBoxes: { component: FontAwesomeIcon, props: { icon: ["fas", "boxes"] } }, ayiBullhorn: { component: FontAwesomeIcon, props: { icon: ["fas", "bullhorn"] } }, ayiBusinessTime: { component: FontAwesomeIcon, props: { icon: ["fas", "business-time"] } }, ayiCalculator: { component: FontAwesomeIcon, props: { icon: ["fas", "calculator"] } }, ayiCalendarAlt: { component: FontAwesomeIcon, props: { icon: ["fas", "calendar-alt"] } }, ayiCalendarCheck: { component: FontAwesomeIcon, props: { icon: ["fas", "calendar-check"] } }, ayiCalendarDay: { component: FontAwesomeIcon, props: { icon: ["fas", "calendar-day"] } }, ayiCheckCircle: { component: FontAwesomeIcon, props: { icon: ["fas", "check-circle"] } }, ayiCheckSquare: { component: FontAwesomeIcon, props: { icon: ["fas", "check-square"] } }, ayiChild: { component: FontAwesomeIcon, props: { icon: ["fas", "child"] } }, ayiClock: { component: FontAwesomeIcon, props: { icon: ["fas", "clock"] } }, ayiCode: { component: FontAwesomeIcon, props: { icon: ["fas", "code"] } }, ayiCogs: { component: FontAwesomeIcon, props: { icon: ["fas", "cogs"] } }, ayiColumns: { component: FontAwesomeIcon, props: { icon: ["fas", "columns"] } }, ayiCustomize: { component: FontAwesomeIcon, props: { icon: ["fas", "sliders-h"] } }, ayiDiceD20: { component: FontAwesomeIcon, props: { icon: ["fas", "dice-d20"] } }, ayiDolly: { component: FontAwesomeIcon, props: { icon: ["fas", "dolly"] } }, ayiDollyFlatbed: { component: FontAwesomeIcon, props: { icon: ["fas", "dolly-flatbed"] } }, ayiDoorOpen: { component: FontAwesomeIcon, props: { icon: ["fas", "door-open"] } }, ayiEdit: { component: FontAwesomeIcon, props: { icon: ["fas", "edit"] } }, ayiExclamationCircle: { component: FontAwesomeIcon, props: { icon: ["fas", "exclamation-circle"] } }, ayiEye: { component: FontAwesomeIcon, props: { icon: ["fas", "eye"] } }, ayiEyeSlash: { component: FontAwesomeIcon, props: { icon: ["fas", "eye-slash"] } }, ayiEllipsisV: { component: FontAwesomeIcon, props: { icon: ["fas", "ellipsis-v"] } }, ayiFan: { component: FontAwesomeIcon, props: { icon: ["fas", "fan"] } }, ayiFeather: { component: FontAwesomeIcon, props: { icon: ["fas", "feather"] } }, ayiFile: { component: FontAwesomeIcon, props: { icon: ["fas", "file"] } }, ayiFileArchive: { component: FontAwesomeIcon, props: { icon: ["fas", "file-archive"] } }, ayiFileAlt: { component: FontAwesomeIcon, props: { icon: ["fas", "file-alt"] } }, ayiFileAudio: { component: FontAwesomeIcon, props: { icon: ["fas", "file-audio"] } }, ayiFileCode: { component: FontAwesomeIcon, props: { icon: ["fas", "file-code"] } }, ayiFileContract: { component: FontAwesomeIcon, props: { icon: ["fas", "file-contract"] } }, ayiFileCsv: { component: FontAwesomeIcon, props: { icon: ["fas", "file-csv"] } }, ayiFileExcel: { component: FontAwesomeIcon, props: { icon: ["fas", "file-excel"] } }, ayiFileImage: { component: FontAwesomeIcon, props: { icon: ["fas", "file-image"] } }, ayiFileImport: { component: FontAwesomeIcon, props: { icon: ["fas", "file-import"] } }, ayiFileMedicalAlt: { component: FontAwesomeIcon, props: { icon: ["fas", "file-medical-alt"] } }, ayiFilePdf: { component: FontAwesomeIcon, props: { icon: ["fas", "file-pdf"] } }, ayiFilePowerpoint: { component: FontAwesomeIcon, props: { icon: ["fas", "file-powerpoint"] } }, ayiFileVidio: { component: FontAwesomeIcon, props: { icon: ["fas", "file-vidio"] } }, ayiFileWord: { component: FontAwesomeIcon, props: { icon: ["fas", "file-word"] } }, ayiFilter: { component: FontAwesomeIcon, props: { icon: ["fas", "filter"] } }, ayiFolder: { component: FontAwesomeIcon, props: { icon: ["fas", "folder"] } }, ayiGenderless: { component: FontAwesomeIcon, props: { icon: ["fas", "genderless"] } }, ayiGlasses: { component: FontAwesomeIcon, props: { icon: ["fas", "glasses"] } }, ayiGlobe: { component: FontAwesomeIcon, props: { icon: ["fas", "globe"] } }, ayiHeading: { component: FontAwesomeIcon, props: { icon: ["fas", "heading"] } }, ayiHistory: { component: FontAwesomeIcon, props: { icon: ["fas", "history"] } }, ayiHome: { component: FontAwesomeIcon, props: { icon: ["fas", "home"] } }, ayiImage: { component: FontAwesomeIcon, props: { icon: ["fas", "image"] } }, ayiInbox: { component: FontAwesomeIcon, props: { icon: ["fas", "inbox"] } }, ayiInfoCircle: { component: FontAwesomeIcon, props: { icon: ["fas", "info-circle"] } }, ayiItalic: { component: FontAwesomeIcon, props: { icon: ["fas", "italic"] } }, ayiKey: { component: FontAwesomeIcon, props: { icon: ["fas", "key"] } }, ayiLanguage: { component: FontAwesomeIcon, props: { icon: ["fas", "language"] } }, ayiLink: { component: FontAwesomeIcon, props: { icon: ["fas", "link"] } }, ayiListOl: { component: FontAwesomeIcon, props: { icon: ["fas", "list-ol"] } }, ayiListUl: { component: FontAwesomeIcon, props: { icon: ["fas", "list-ul"] } }, ayiMinus: { component: FontAwesomeIcon, props: { icon: ["fas", "minus"] } }, ayiPallet: { component: FontAwesomeIcon, props: { icon: ["fas", "pallet"] } }, ayiPaperclip: { component: FontAwesomeIcon, props: { icon: ["fas", "paperclip"] } }, ayiPaperPlane: { component: FontAwesomeIcon, props: { icon: ["fas", "paper-plane"] } }, ayiPencilAlt: { component: FontAwesomeIcon, props: { icon: ["fas", "pencil-alt"] } }, ayiPencilRuler: { component: FontAwesomeIcon, props: { icon: ["fas", "pencil-ruler"] } }, ayiPlug: { component: FontAwesomeIcon, props: { icon: ["fas", "plug"] } }, ayiQuestionCircle: { component: FontAwesomeIcon, props: { icon: ["fas", "question-circle"] } }, ayiQuoteLeft: { component: FontAwesomeIcon, props: { icon: ["fas", "quote-left"] } }, ayiRobot: { component: FontAwesomeIcon, props: { icon: ["fas", "robot"] } }, ayiRocket: { component: FontAwesomeIcon, props: { icon: ["fas", "rocket"] } }, ayiSearch: { component: FontAwesomeIcon, props: { icon: ["fas", "search"] } }, ayiSeedling: { component: FontAwesomeIcon, props: { icon: ["fas", "seedling"] } }, ayiServer: { component: FontAwesomeIcon, props: { icon: ["fas", "server"] } }, ayiShippingFast: { component: FontAwesomeIcon, props: { icon: ["fas", "shipping-fast"] } }, ayiSignIn: { component: FontAwesomeIcon, props: { icon: ["fas", "sign-in-alt"] } }, ayiSignOut: { component: FontAwesomeIcon, props: { icon: ["fas", "sign-out-alt"] } }, ayiSitemap: { component: FontAwesomeIcon, props: { icon: ["fas", "sitemap"] } }, ayiSquare: { component: FontAwesomeIcon, props: { icon: ["far", "square"] } }, ayiSquareFull: { component: FontAwesomeIcon, props: { icon: ["fas", "square-full"] } }, ayiStickyNote: { component: FontAwesomeIcon, props: { icon: ["fas", "sticky-note"] } }, ayiStore: { component: FontAwesomeIcon, props: { icon: ["fas", "store"] } }, ayiStrikethrough: { component: FontAwesomeIcon, props: { icon: ["fas", "strikethrough"] } }, ayiTable: { component: FontAwesomeIcon, props: { icon: ["fas", "table"] } }, ayiTachometer: { component: FontAwesomeIcon, props: { icon: ["fas", "tachometer-alt"] } }, ayiThList: { component: FontAwesomeIcon, props: { icon: ["fas", "th-list"] } }, ayiTicket: { component: FontAwesomeIcon, props: { icon: ["fas", "ticket-alt"] } }, ayiToolbox: { component: FontAwesomeIcon, props: { icon: ["fas", "toolbox"] } }, ayiTools: { component: FontAwesomeIcon, props: { icon: ["fas", "tools"] } }, ayiUser: { component: FontAwesomeIcon, props: { icon: ["fas", "user"] } }, ayiUserCog: { component: FontAwesomeIcon, props: { icon: ["fas", "user-cog"] } }, ayiUsers: { component: FontAwesomeIcon, props: { icon: ["fas", "users"] } }, ayiUserTie: { component: FontAwesomeIcon, props: { icon: ["fas", "user-tie"] } }, ayiVial: { component: FontAwesomeIcon, props: { icon: ["fas", "vial"] } }, //VUETIFY REQUIRED ONES //https://vuetifyjs.com/en/features/icons/#using-custom-icons dropdown: { component: FontAwesomeIcon, props: { icon: ["fas", "caret-down"] } }, info: { component: FontAwesomeIcon, props: { icon: ["fas", "info-circle"] } }, menu: { component: FontAwesomeIcon, props: { icon: ["fas", "bars"] } }, sort: { component: FontAwesomeIcon, props: { icon: ["fas", "chevron-down"] } } }; //------------- Vue.use(Vuetify); export default new Vuetify({ // lang: { locales: { myLang }, current: "myLang" }, theme: { themes: { light: { primary: "#00205B", //Canucks dark blue secondary: "#00843D", //canucks green accent: "#db7022", //lighter orangey red, more friendly looking though not as much clarity it seems //error: "#b71c1c", //dark red, easy to read but not error-y enough possibly //accent: "#BD491A", //dark orangey red, more clarity, less friendly looking error: "#ff5252", //lighter red, have to see if it's good for all screens and sizes as it's a bit light but it stands out as an error condition better disabled: "#e0e0e0" }, dark: { //here you will define primary secondary stuff for dark theme //color adjuster tool: https://www.hexcolortool.com/#00205c primary: "#7F9FDA", //Canucks dark blue LIGHTENED 50% secondary: "#006B24", //canucks green DARKENED 10% accent: "#db7022", //lighter orangey red, more friendly looking though not as much clarity it seems //error: "#b71c1c", //dark red, easy to read but not error-y enough possibly //accent: "#BD491A", //dark orangey red, more clarity, less friendly looking error: "#ff5252", //lighter red, have to see if it's good for all screens and sizes as it's a bit light but it stands out as an error condition better disabled: "#e0e0e0" } } }, icons: { iconfont: "faSvg", values: CUSTOM_ICONS } });