open-index/open-npm huggingface dataset:
npm package: @lefrancois/alpine-focal
Description: Add focal point image alignment to your Alpine 3.x components with a custom directive.
Author: Michael Lefrancois
Latest version: 1.0.0

# Alpine Focal

Add focal point alignment of images to your Alpine 3.x components with a custom directive.

![GitHub](https://img.shields.io/github/license/lefrancois/alpine-focal?color=red&style=flat-square)
![Build size Brotli](https://img.badgesize.io/lefrancois/alpine-focal/master/dist/cdn.min.js.svg?compression=gzip&style=flat-square&color=green)
[![](https://data.jsdelivr.com/v1/package/npm/@lefrancois/alpine-focal/badge)](https://www.jsdelivr.com/package/npm/@lefrancois/alpine-focal)
[![](https://img.shields.io/discord/492260310414262274.svg?color=7289da&label=lefrancois&logo=discord&style=flat-square)](https://discord.gg/fnBQBdVdSZ)
[![](https://img.shields.io/twitter/follow/lefrancois?style=flat-square)](https://www.twitter.com/lefrancois)

> This package only supports Alpine v3.x.

## About

This plugin adds a new `x-focal` directive to Alpine that allows to easliy align your images to keep focus on the selected part of the image.

## Installation

### CDN

Include the following `<script>` tag in the `<head>` of your document, just before Alpine.

```html
<script
    src="https://cdn.jsdelivr.net/npm/@lefrancois/alpine-focal@1/dist/cdn.min.js"
    defer
></script>
```

### NPM

```bash
npm install @lefrancois/alpine-focal
```

Add the `x-focal` directive to your project by registering the plugin with Alpine.

```js
import Alpine from "alpinejs";
import Focal from "@lefrancois/alpine-focal";

Alpine.plugin(Focal);

window.Alpine = Alpine;
window.Alpine.start();
```

## Usage

Attach the `x-focal` directive on an image element and enter the point (unsing px or % informations) to keep in focus while containing the image.

```html
<div x-data>
    <img 
        src="..." 
        width="400px" 
        height="600px" 
        x-focal="10% 80%"
        >
    </img>
</div>
```

Optinally you can use set the third parameter to true (`x-focal="100px 100px true"`) to get a preview image where you can set the focal point with an easy click on the image. Note: Just copy and paste the value to the `x-focal` attribute of the image element in production. ;) This is just a helper for your development.

## License

Copyright (c) 2021 Michael Lefrancois

Licensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.
npm package: @lefrancois/alpine-lorem
Description: Add easy lorem ipsum text creation to your Alpine 3.x components with a custom directive.
Author: Michael Lefrancois
Latest version: 1.0.2

# Alpine Lorem

Add easy lorem ipsum text creation to your Alpine 3.x components with a custom directive.

> This package only supports Alpine v3.x.

## About

This plugin adds a new `x-lorem` to Alpine that allows to easliy create lorem ipsum text.

## Installation

### CDN

Include the following `<script>` tag in the `<head>` of your document, just before Alpine.

```html
<script
    src="https://cdn.jsdelivr.net/npm/@lefrancois/alpine-lorem@1.x.x/dist/cdn.min.js"
    defer
></script>
```

### NPM

```bash
npm install @lefrancois/alpine-lorem
```

Add the `x-lorem` directive to your project by registering the plugin with Alpine.

```js
import Alpine from "alpinejs";
import Lorem from "@lefrancois/alpine-lorem";

Alpine.plugin(Lorem);

window.Alpine = Alpine;
window.Alpine.start();
```

## Usage

To create random lorem ipsum text, just use the `x-lorem` directive on an element.

```html
<div x-data>
    <div x-lorem></div>
</div>
```

Optionally you can set the number of paragraphs and word per paragraph.

```html
<div x-data>
    <div x-lorem="[2,160]"></div>
</div>
```

## License

Copyright (c) 2021 Michael Lefrancois

Licensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.
npm package: @lefreet/vue-form
Description: 基础表单组件
Author: lefreet
Latest version: 1.0.13

> 基于element-ui的vue表单组件封装，通过配置生成表单

[![Build Status](https://travis-ci.org/lefreet/vue-form.svg?branch=master)](https://travis-ci.org/lefreet/vue-form)

[live demo](https://lefreet.github.io/vue-form/)

## 说明

通过`config`配置项生成一张表单，起因是项目应用中，有几百张表单要通过对应的`json`配置自动生成，方便通过配置维护，才做了这个组件。

组件的npm包名称是`@lefreet/vue-form`，不是`vue-form`。不想取别的名字了，`@lefreet/vue-form`更关注表单配置抽象和简单取值。

* 发现低版本的脚手架存在`postcss-url`的依赖缺失问题， 集成本组件时发现`postcss-url`引用报错，执行：`npm i postcss-url -D`解决.

## 使用

```bash
# install
npm install @lefreet/vue-form --save
```

```html
<template>
  <div id="app">
    <vue-form :config="config" @submit="submit" ref="form"></vue-form>
  </div>
</template>

<script>
  import VueForm from '@lefreet/vue-form'

  export default {
    components: { VueForm },
    data () {
      return {
        config: {
          'cols': 1,
          'label-width': '200px',
          'values': {},
          'fields': [{
            'type': 'input',
            'prop': 'name',
            'label': 'name',
            'options': {
              // some options of element component
              'placeholder': 'input your name'
            }
          }, {
            'type': 'radio',
            'prop': 'sex',
            'label': 'sex',
            'options': {
              // some extend options by me
              'radios': [{
                'label': 'man',
                'value': 1  
              }, {
                'label': 'woman',
                'value': 2
              }]
            }
          }]
        }
      }
    },
    methods: {
      // on submit event to get form's values by verifying
      submit (values) {
        console.log(values)
      },
      // use method to clear all fields
      clear () {
        this.$refs['form'].clearFields()
      }
    }
  }
</script>
```

## 可选控件列表

* `input` 文本框
* `radio` 单选框
* `checkbox` 复选框
* `select` 下拉框
* `switch` 开关
* `tree` 树形下拉框
* `date` 时间选择框
* `upload` 文件上传
* `richtext` 富文本编辑器([vue-quill-editor](https://github.com/surmon-china/vue-quill-editor))

具体用法见[live demo](https://lefreet.github.io/vue-form/)，[欢迎提issue](https://github.com/lefreet/vue-form/issues)。