UNPKG

@eotl/core

Version:

Assortment of data structures, Vue.js components, and utilities across EOTL apps and sites.

164 lines (102 loc) 3.24 kB
# Core [![status-badge](https://ci.codeberg.org/api/badges/13380/status.svg)](https://ci.codeberg.org/repos/13380) Various data, structures, and utils to use across EOTL applications. ⚠️ Warning this repo is not ready for production and is highly subject to change ## JS Utils & Components A JavaScript package that can be installed in your JS application. ``` $ yarn add @eotl/core ``` **Vue Components** ```js import { ... } from '@eotl/core/components ``` **Vue Mixins** ```js import { ... } from '@eotl/core/mixins ``` Vue i18n translation strings ```js import { ... } from '@eotl/core/locales ``` **Generic Utils** ```js import { ... } from '@eotl/core/enums ``` ## Styling For the components to work properly you also need to include the styling ```js import '@eotl/core/dist/style.css' ``` ## Example To include Vue.js libraries you must first include and `init()` the package with the following: ```js import { useEotlCore } from '@eotl/core/store' // init EOTL core const eotlStore = useEotlCore() eotlStore.init({ // mapboxToken: '', url_sextant: import.meta.env.VITE_SEXTANT_URL, url_api: import.meta.env.VITE_SEXTANT_API_URL }) ``` This package will only work with passing in a [pinia](https://pinia.vuejs.org) store (for now), thus working only in a Vue.js app and breaking the idea of using it as a standalone. **Alerts** To trigger alerts in apps, use these components. The `message` argument is required, the `title` has a default specified. ``` eotlStore.alertPrimary('Hello, I am a primary alert.') eotlStore.alertSuccess('Good job, keep it up', 'Success Custom Title') eotlStore.alertInfo(message, title) eotlStore.alertWarning('message', title) eotlStore.alertDanger(message, title) ``` **Fetching Data** Within the `eotlStore` are HTTP `fetch()` helpers which handle various response states. ```js async fetchGet(endpoint, queryString = '') { ... } async fetchPost(endpoint, record) { ... } async fetchPatch(endpoint, record) { ... } async fetchDelete(endpoint) { ... } ``` ## To-Do - [ ] Logistics UI widget for calculating size, weight, and price estimation of items to be transported ## Vue Basic Setup Testing This template should help get you started developing with Vue 3 in Vite. ### Recommended IDE Setup - [VSCode](https://code.visualstudio.com/) - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Disable Vetur ### Customize configuration See [Vite Configuration Reference](https://vitejs.dev/config/). ### Developing ```sh yarn install ``` #### Compile and Hot-Reload for Development ```sh yarn dev ``` To work on `eotl.places.js` code, Places is served separately because we wanna know for sure that no other libraries are being imported in the code with the `vite.config.places.js` config file. ```sh yarn dev:places ``` The normal Component view can also be seen at root directory and is compiled: - http://localhost:8081/places.html #### For local dev and importing it in another package use ```sh yarn build --watch ``` #### Compile and Minify for Production ```sh yarn build ``` #### Lint with [ESLint](https://eslint.org/) ```sh yarn lint ``` --- ## Go No shared Golang code at present... but will be soon.