open-index/open-npm huggingface dataset:
npm package: @lumx/angularjs
Description: The official LumApps Design System (LumX) for AngularJS applications
Author: LumApps
Latest version: 3.21.1

# LumApps Design System (LumX)

The first official LumApps Design System for [AngularJS][angularjs] applications.
_LumX_ will help you design your applications faster and more easily. You will be able to use LumX with either the LumApps design styleguides or the [Google Material Design specifications][material].

## Quick start

To start to use LumX, you can either:

-   Install with Yarn/NPM:

```bash
yarn add @lumx/angularjs
# Or
npm install @lumx/angularjs
```

-   Download the latest release for [AngularJS][angularjs-release]
-   Clone the repository: `git clone https://github.com/lumapps/design-system.git`

## Documentation

You can find an online version of the demo and documentation site at https://design.lumapps.com.

## How to get help, contribute, or provide feedback

Please refer to our [contributing guidelines](CONTRIBUTING.md).

## Copyright and license

Code and documentation copyright 2019 LumApps. Code released under the [MIT license](LICENSE.md).

[angularjs]: https://angularjs.org/
[react]: https://react.org/
[material]: http://www.google.com/design/spec/material-design/introduction.html
[angularjs-release]: https://www.npmjs.com/package/@lumx/angularjs
[react-release]: https://www.npmjs.com/package/@lumx/react
[webpack]: https://webpack.js.org/
npm package: @lun-web/components
Description: A full-featured web components library based on Vue3
Author: lejunyang
Latest version: 0.0.1-alpha.7

# @lun-web/components

A full-featured web components library based on Vue3.
This is styleless library, you can customize your own theme or use `@lun-web/theme` to apply preset themes

Usage guide: [English](https://lejunyang.github.io/lun/en/guides/usage/) | [中文](https://lejunyang.github.io/lun/guides/usage/)

English doc is not translated yet
npm package: @lun-web/plugins
Description: Directive plugins for Vue template or Vue JSX
Author: lejunyang
Latest version: 0.0.1-alpha.7

# @lun-web/plugins

This package provides some useful vue directives

## v-content

replacing `v-show` by using `content-visibility: hidden` when supported to get better performance, if not supported, it falls back to `display: none`. It also support vue's transition.

## v-update

This is specially for `@lun-web/components`

As most of lun input components have a `value` prop and an `update` event, this package provide plugins to use `v-update` in both vue jsx and vue template, making it convenient to set the value and listen to the change 

It performs below transformation:

`v-update-TARGET:FROM={EXPR}` => `TARGET={EXPR} onUpdate={(e) => EXPR = e.detail.FROM}`
Both TARGET and FROM are optional, Target defaults to 'value', FROM defaults to none(EXPR = e.detail)
npm package: @lun7/use-sortable
Description: A simple react hook to help you sort the data for table view and list view
Author: LUN7
Latest version: 1.5.0

# use-sortable

> A simple react hook to help you sort the data for table view and list view

[![NPM](https://img.shields.io/npm/v/use-sortable.svg)](https://www.npmjs.com/package/use-sortable) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save use-sortable
```

or

```bash
yarn add use-sortable
```

## Usage

### Basic

```tsx
import * as React from "react";

import { useSortable } from "use-sortable";

const sampleData = [
  { name: "John", age: 20 },
  { name: "Jane", age: 21 },
  { name: "Jack", age: 22 },
];

const ExampleA = () => {
  // sort the data by name in ascending order
  const { sorted, setSortKey } = useSortable(sampleData, {
    defaultSortKey: "name",
    defaultSortOrder: "asc",
  });
  return <div>{example}</div>;
};

const ExampleB = () => {
  // sort the data by name in descending order
  const { sorted, setSortKey } = useSortable(sampleData, "name", {
    defaultSortKey: "name",
    defaultSortOrder: "desc",
  });
  return <div>{example}</div>;
};
```

### Changing the sort key

```tsx
import * as React from "react";

import { useSortable } from "use-sortable";

const sampleData = [
  { name: "John", age: 20 },
  { name: "Jane", age: 21 },
  { name: "Jack", age: 22 },
];

const Example = () => {
  const { sorted, setSortKey } = useSortable(sampleData, {
    defaultSortKey: "name",
    defaultSortOrder: "asc",
  });

  const handleSort = (key: string) => {
    setSortKey(key);
  };

  return <Table data={sorted} onHeaderClicked={handleSort} />;
};
```

### More

Please check the [example](https://github.com/LUN7/use-sortable/example) and [docs] for more details.

## Q&A

### How to change sort direction

You can change the sort direction by invoking setSortKey again with the same key.

## License

MIT © [LUN7](https://github.com/LUN7)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).