@scayle/components
TypeScript icon, indicating that this package has built-in type declarations

1.11.1 • Public • Published

scayle-logo-cr

SCAYLE Component Library

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

SCAYLE's *Component Library* is released under the MIT license. Total Downloads

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

License

Licensed under the MIT

Package Sidebar

Install

npm i @scayle/components

Weekly Downloads

255

Version

1.11.1

License

MIT

Unpacked Size

1.9 MB

Total Files

222

Last publish

Collaborators

  • kyosifov
  • cloud-panel-ay
  • marcel-domke-ay
  • hector_gonzalez_ay