@scayle/components

SCAYLE Component Library

Documentation | Website

The SCAYLE Component Library offers essential components for developing Panel Add-Ons written in Vue.js 3.

Getting Started

Visit the Add-On Developer Guide to learn more on how to use the components.

Visit the Docs to learn more about our system requirements.

What is Scayle ?

SCAYLE is a full-featured e-commerce software solution that comes with flexible APIs. Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about Scayles’s architecture and commerce modules in the Docs.

Installation

npm i -S @scayle/components

Usage

All components

import * as components from '@scayle/components';
import '@scayle/components/dist/style.css';

for (let component of components) {
    app.use(component);
}

Individual components

import { Spinner, Modal } from '@scayle/components';
import '@scayle/components/dist/style.css';

app.use(Spinner).use(Modal);

Auto-load components

Alternatively components can be automatically registered on demand using unplugin-vue-components.

Install the package (npm i unplugin-vue-components -D) and add the following to your webpack config.

plugins: [
    /*...*/
    require('unplugin-vue-components/webpack')({
        dts: true,
        resolvers: [
            componentName => {
                if (componentName.startsWith('Ay')) {
                    return {
                        name: componentName.slice(2),
                        from: '@scayle/components',
                    };
                }
            },
        ],
    }),
];

Afterwards, whenever a component matching the pattern ay-name or AyName is found in a template, the component will automatically be registered for that component.

for example, this SFC

<template>
    <ay-modal>Foo</ay-modal>
</template>
<script>
    export default { name: 'MyComponent' };
</script>

is compiled as

<template>
    <ay-modal>Foo</ay-modal>
</template>
<script>
    import { Modal } from '@scayle/components';
    export default { name: 'MyComponent', components: { 'ay-modal': Modal } };
</script>

RTL

The library is designed to work well in both left-to-right and right-to-left languages. For this it depends on the :dir() pseudo-class. There is a polyfill for unsupported browsers, included as well, but it requires that you explicitly specify a dir attribute in your DOM. (Usually on html or body)

Other channels

• LinkedIn
• Jobs
• AboutYou Tech Blog

License

Licensed under the MIT