Giter Club home page Giter Club logo

sap / fundamental-vue Goto Github PK

View Code? Open in Web Editor NEW
197.0 26.0 32.0 40.27 MB

Vue.js components implementation of Fundamental Library Styles guidelines. The library is aiming to provide a Vue.js implementation of the components designed in Fundamental Library Styles.

Home Page: https://sap.github.io/fundamental-vue

License: Apache License 2.0

JavaScript 38.93% Vue 59.27% Shell 0.44% HTML 0.50% CSS 0.22% TypeScript 0.17% SCSS 0.47%
open-source fundamental vuejs sap-fundamentals vue-components

fundamental-vue's Introduction

Fundamental Vue

npm version Minified Size Minzipped Size Build Status Coverage Status Slack REUSE status

Deploys by Netlify

Description

The fundamental-vue library is a set of Vue.js components built using Fundamental Library Styles.

Fundamental Library for Vue is behind the latest Fundamental Library Styles and is open for contributors.

API Reference

See Component Documentation for examples and API details.

Requirements

To download and use Fundamental Vue library, you first need to install the node package manager. https://www.npmjs.com/get-npm

Some prior knowledge of Vue is required for using this library.

Getting started

Fundamental Vue in 5 Minutes or less

A minimal working Fundamental Vue app can look like following. You can just copy that in to a single html file and then open it in a browser.

<!DOCTYPE html>
<html>

<head>
    <!-- Import fiori-fundamentals stylesheet, vue.js and FundamentalVue -->
    <link
        rel="stylesheet"
        href="https://unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/fundamental-vue@latest/dist/FundamentalVue.umd.js"></script>
</head>

<body>
    <!-- Create Vue app with a single fundamental vue popover element -->
    <div id="app">
        <fd-popover v-fd-margin:large placement="bottom-start" with-arrow>
            <h1 v-fd-margin:large>
                ๐Ÿš€ Hello Fundamental Vue ๐Ÿš€
            </h1>
            <template #control="{toggle}">
                <fd-button @click="toggle">Show Popover</fd-button>
            </template>
        </fd-popover>
    </div>
    <script>new Vue({ el: '#app' })</script>
</body>

</html>

When using Fundamental Vue via a <script>-tag you don't have to install it manually by calling Vue.use(FundamentalVue). This is done for you automatically. You can disable the automatic installation by setting window.__FD_AUTO_INSTALL_DISABLED_KEY__ to true early on.

If you are targeting IE 11 you have to include the IE-compatible build of Fiori Fundamentals:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals-ie11.min.css">

How to install Fundamental Vue via NPM is described below.

Install

To download and use this library, you first need to install the node package manager - npm.

  1. Install Fundamental Vue

    NPM

    $ npm install --save fundamental-vue

    After installing, you will need to import fundamental-vue and make it available to your Vue application. These instructions assume the usage of Vue CLI to scaffold your project.

    In your project's main.js:

    import FundamentalVue from 'fundamental-vue';
    Vue.use(FundamentalVue);
    // โ€ฆ

    Fundamental Vue does not include the Fundamental Library Styles which is required for styling.

  2. Install Fundamental Library Styles

    The quickest way to get Fundamental Library Styles styling for your components is to include the compiled and minified Fundamental Library Styles with the following CDN link in your public index.html file:

    <link rel="stylesheet" type="text/css" href="https://unpkg.com/fiori-fundamentals@latest/dist/fundamental-styles.min.css">

    However, installing the Fundamental Library Styles with npm (recommended) will give you the flexibility to use individual components and enable advanced customisation options. In this case, you do not need the CDN link as this method uses the SASS/SCSS source.

    To install the Fundamental Library Styles source:

    $ npm install --save fundamental-styles

    The following assumes the usage of a module bundler such as webpack. To compile Fiori Fundamentals SASS/SCSS to CSS, two additional packages are required for your bundling process - sass-loader and node-sass. To install these packages as development dependencies:

    $ npm install sass-loader node-sass --save-dev

    Loading the SCSS and running your project at this point will result in errors relating to the path configuration for icons and fonts. This is a known issue.

    You can now use the Documentation to browse the components currently available with Fundamental Vue.

    To use a Fundamental Vue component, paste the desired code snippet from the Playground and configure it as necessary:

    <fd-alert dismissible>
        Happy building! ๐Ÿš€
    </fd-alert>

Versioning

The fundamental-vue library follows Semantic Versioning. These components strictly adhere to the [MAJOR].[MINOR].[PATCH] numbering system (also known as [BREAKING].[FEATURE].[FIX]).

Merges to the main branch will be published as a prerelease. Prereleases will include an rc version (e.g. [MAJOR].[MINOR].[PATCH]-rc.[RC]).

Known Issues

Please see Issues.

Developer Guide

Interested in contributing to this Fundamental Vue? See the Developer Guide.

Testing Guide

See the Testing Guide.

Support

If you encounter an issue, you can create a ticket

Contributing

If you want to contribute, please check the Developer Guide documentation for contribution guidelines.

Check out this guide on building a new component for the library and creating the necessary documentation for your new component.

Similar Projects

fundamental-vue's People

Contributors

albrechtjohannes avatar betrozov avatar christiankienle avatar codesofra avatar damianlion avatar dandashino avatar deepshikha02 avatar dependabot-preview[bot] avatar dependabot[bot] avatar droshev avatar eduardoweber avatar fundamental-bot avatar greg-a-smith avatar innaatanasova avatar jbadan avatar jkmarkowski avatar jonathanbaker7 avatar kzai avatar mattl75 avatar pierrefritsch avatar scottheron avatar sebastianoe avatar sebastianwolf-sap avatar shegox avatar suwarnoong avatar xujing-shen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fundamental-vue's Issues

Internationalization and localization

Would there be a some built in internationalization feature in fundamental-vue? Similar to OpenUI5 having i18n files for their components like its calendar.

If this will not be supported then components would need to offer the api to do this. One example would be the pagination component having tooltip properties for the next and previous buttons.

Edge detection for popover-style elements

popovers (and other popup style components. should edge-detect and flip where there is no space.

popperjs / popperjs github provides this functionality, and has libraries to react, angular and vue

https://www.npmjs.com/package/react-popper
https://www.npmjs.com/package/ngx-popper
https://www.npmjs.com/package/vue-popperjs

SAP Concur has previously had good success with popper.js, and implemented within our pre-fundamentals components library.

image

also see
SAP/fundamental-ngx#410 and
SAP/fundamental-react#313

Fix Events emitted by Input

@deepshikha02 noticed that the Input component emits events unnecessarily. You can reproduce the issue by checking out her branch in PR #32.

Simply add a breakpoint at setCurrentValue and you will be overwhelmed with events.

This is because the Input component emits those events multiple times. In the past there was a bug in vue which required that kind of workaround. This bug is now fixed and thus we can safely also fix the Input component.

Make an actual Release

In order to get things rolling we should make the first release. There is already a build script scripts/build which should produce all the artefacts we need but someone has to do it. Also I would love to automate everything as quickly as possible. But this is something for later.

Modal does not contain Focus Cycling mechanism

Description

In order to be WCAG 2.1 compliant, our Modal's with the role='dialog' must contain a mechanism to enforce focus cycling. A users focus must be contained within a modal to be compliant. See https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal for more information.

Reproduction

  1. Open a modal
  2. Attempt to tab

Expected:

  • Focus should remain within modal
  • Focus should be redirected into modal when opened

Actual:

  • Focus is not altered and left in last known state.

Note: This issue is seen in all 3 libraries
Fundamental-React: SAP/fundamental-react#345
Fundamental-NGX: SAP/fundamental-ngx#477
Fundamental-Vue: #136

update package description in package.json

Is this a bug, enhancement, or feature request?

enhancement

Briefly describe your proposal.

Unify the fundamentals repository package.json description.

Which versions of Vue.JS and Fundamental Vue are affected? (If this is a feature request, use current version.)

latest

Is there anything else we should know?

v-model fixes and more component implementation guide details

The current v-model implementation is buggy in Fundamental Vue. For example FdToggle is implementing v-model incorrectly. The overall buggy state of the v-model implementation makes it hard to compose components properly. For example because of the fact that FdPopover also implements v-model incorrectly it makes it impossible to nicely use it to implement a date picker.

  • Fix v-model implementation thought-out Fundamental Vue
  • Write unit tests for all fixed v-model bugs
  • Update the component impl. guide and explain v-model in detail and what Fundamental Vue expects a good component to be/have./support.

Since I have already started to fix things (FdToggle) I will liberally assign this issue to myself. :D

SearchInput Interaction

PR #32 added the SearchInput component. It supports basic interactions like clicking on the search button. However some interactions are missing. For example:

  • Support for Arrow Keys
  • Support for ESC
  • โ€ฆ

However it is not yet clear to us what kind of interactions are required. At the time of writing neither the React nor the Angular colleagues seem to have implemented the SearchInput component. Thus we have to first collect all interactions that we want to have and the implement them.

  • Talk to colleagues (UX/NGX/Fundamental/React) about the SearchInput interactions.
  • Write them down somewhere (here?) and then...
  • Implement the interactions to make the SearchInput component fully functional.

Color Component

At the moment the Color component contains everything hardcoded and it needs to be updated anytime fundamental-ui changes. Maybe we can find a generic way to read those colors directly from fundamental-ui.

Fix GH Pages

At the moment we don't publish our documentation API in GH pages but we would like to

support @change on FdInput

Is this a bug, enhancement, or feature request?

Debateable...from my perspective rather a bug as @change is part of the Vue standard API

Briefly describe your proposal.

Support @change in FdInput, so that we can immediately send an update request to the server when a user finished his/her input. This @change binding works with a plain <input>, but not with <FdInput>. It seems currently only @input is supported, but of course we don't wanna send a request to the server on every keystroke.

Which versions of Vue.JS and Fundamental Vue are affected? (If this is a feature request, use current version.)

Current version.

If this is a bug, please provide steps for reproducing it.

  • Does not work: <FdInput @change="updateDetails()" v-model="details"/>
  • Works: <input @change="updateDetails()" v-model="details"/>

Please provide relevant source code if applicable.

Is there anything else we should know?

Add missing features to Table + make things nice

Our table component is lacking a few features.

  • rows with alternating background color
  • borderless table option
  • tests
  • custom header
  • checkbox integration
  • generics removal (?)

Things like that. The table component was also written relatively early on when things were much less specced out.

Build and serve are failing

Is this a bug, enhancement, or feature request?

When run 'npm run build' and 'npm run serve' from the root folder, has error:
'This relative module was not found:
* ./src/main.ts in multi ./src/main.ts'

Briefly describe your proposal.

Which versions of Vue.JS and Fundamental Vue are affected? (If this is a feature request, use current version.)

If this is a bug, please provide steps for reproducing it.

Please provide relevant source code if applicable.

Is there anything else we should know?

Add keyboard support

Users should be able to navigate and interact with the components using the keyboard.

layout bug in fiori fundamental 1.4.1

rel: SAP/fundamental#1199

Is this a bug, enhancement, or feature request?

bug

Briefly describe your proposal.

Which versions of Vue.JS and Fundamental Vue are affected? (If this is a feature request, use current version.)

vue-fundamental 0.0.9-beta
fiori-fundamental 1.4.1

If this is a bug, please provide steps for reproducing it.

https://codepen.io/DeltaM/pen/VgZpvY

Please provide relevant source code if applicable.

Is there anything else we should know?

I provided a fix which works for us

.fd-app__main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

Refactor Identifier component

The latest version of Fiori Fundamentals introduced thumbnail (background image) modifier and more size options for the Identifier component.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.