open-index/open-npm huggingface dataset:
npm package: @ibiz/studio-cli
Description: Studio 操作命令行工具
Author: chitanda
Latest version: 0.0.2

# iBiz命令行工具

## 目录说明

```text
|-- actions                与命令匹配的对应处理行为
|-- bin                    入口目录
|-- commands               命令声明与命令注册
|-- core                   核心包，基本工具类与接口
|-- tools                  工具包
|   `-- gulp               打包清理gulp插件
|-- LICENSE
|-- README.md
|-- gulpfile.js
|-- package.json
|-- tsconfig.json
`-- yarn.lock
```

## 本地开发
```base
// 在项目根目录
yarn

// 启动项目
yarn dev

// 本地全局安装，成功后可在命令行任意目录使用
npm link
```

## 扩展

#### 1. 新增命令

1. 以新增link命令为例

2. 在commands目录下新建需要新增的命令link/link.ts文件。

3. link命令类继承CommandBase类

    ```typescript
    export class LinkCommand extends CommandBase { }
    ```

4. 实现抽象方法load，用于注册命令
    ```typescript
    protected load(program: CommanderStatic): void {
        program
        .command('link')
        .arguments('<source> <target>')
        .description('建立软链接', {
            source: '需要链接的「文件、文件夹」',
            target: '链接至的目标目录',
        })
        .usage('<source> <target>')
        .option('-f, --force', '当指向的目标文件存在时，删除原有[文件 or 文件夹]并建立软链接!')
        .action(async (source: string, target: string, options: Record<string, string | boolean>, _command: Command) => {
            const input: Input = {};
            input.source = { name: 'source', value: source };
            input.target = { name: 'target', value: target };
            const opts: Input = {};
            opts.force = { name: 'force', value: options.force };
            try {
            await this.action.handle(input, opts);
            } catch (err) {
            if (isError(err)) {
                log.error('', err.message);
                process.exit(10);
            } else {
                process.exit(0);
            }
            }
        });
    }
    ```

5. 在commands/loader/loader.ts的load方法中进行命令注册
    ```typescript
    public static load(program: CommanderStatic): void {
        new LinkCommand(program);
        new LinkModelCommand(program);
        this.handleInvalidCommand(program);
    }
    ```

6. 实现getAction抽象方法注册行为。

#### 2. 补充命令处理行为

1. 补充link的处理行为

2. 在actions目录下新建link/link.ts行为处理文件

3. link行为处理继承ActionBase

    ```typescript
    export class LinkAction extends ActionBase
    ```

4. 实现handle抽象方法，用于处理命令。

    ```typescript
    async handle(input: Input, options: Input, _extraFlags?: string[]): Promise<void> {
        const { source, target } = input;
        const { force } = options;
        linkDir(source.value, target.value, force.value);
    }
    ```
npm package: @ibizstudio/quick-action-bar
Description: stencilJs 组件开发基本脚手架
Latest version: 0.0.1-beta.2

## 指令快捷操作栏

### 使用示例

#### 1. 根据自身需求实现 ListDataProvider、DataItemProvider 接口，此为操作栏列表的数据适配器

```typescript
/**
 * 操作栏默认模式数据适配器
 *
 * @author chitanda
 * @date 2022-06-28 18:06:54
 * @export
 * @class DefaultModeDataProvider
 * @implements {ListDataProvider<DefaultModeDataItemProvider>}
 */
export class DefaultModeDataProvider implements ListDataProvider<DefaultModeDataItemProvider> {
  /**
   * 列表行内点击指令
   *
   * @author chitanda
   * @date 2022-06-30 11:06:49
   * @type {string}
   */
  command: string = CommandConst.DEFAULT_MODE_CLICK;

  list: DefaultModeDataItemProvider[] = [];

  constructor() {
    // 注册列表行内点击指令
    commands.register(
      CommandConst.DEFAULT_MODE_CLICK,
      async (data: DefaultModeDataItemProvider) => {
        const { keyboards } = data.mode.opts;
        Mousetrap.trigger(keyboards instanceof Array ? keyboards[0] : keyboards);
      },
      {
        id: CommandConst.DEFAULT_MODE_CLICK,
        title: '默认模式点击',
      },
    );
  }

  /**
   * 过滤展示列表
   *
   * @author chitanda
   * @date 2022-06-29 14:06:49
   * @param {string} [searchVal]
   * @return {*}  {Promise<DefaultModeDataItemProvider[]>}
   */
  async getItems(_searchVal?: string): Promise<DefaultModeDataItemProvider[]> {
    // 减一是因为默认模式不需要显示
    if (quickActionModeRegister.size - 1 !== this.list.length) {
      this.list = [];
      const modes = quickActionModeRegister.getModes();
      for (let i = 1; i < modes.length; i++) {
        const mode = modes[i];
        this.list.push(new DefaultModeDataItemProvider(i.toString(), mode));
      }
    }
    return this.list;
  }
}
```

``` typescript
/**
 * 列表数据项
 *
 * @author chitanda
 * @date 2022-06-28 18:06:15
 * @export
 * @class DefaultModeDataItemProvider
 * @implements {DataItemProvider}
 */
export class DefaultModeDataItemProvider implements DataItemProvider {
  readonly id: string = '';
  readonly label: string;
  readonly tooltip?: string;
  readonly icon?: string;
  readonly description?: string;
  readonly mode: QuickActionMode;

  /**
   * Creates an instance of DefaultModeDataItemProvider.
   *
   * @author chitanda
   * @date 2022-06-30 11:06:54
   * @param {string} id
   * @param {QuickActionMode} mode
   */
  constructor(id: string, mode: QuickActionMode) {
    const { opts } = mode;
    this.mode = mode;
    this.id = id;
    this.label = opts.title;
    this.icon = opts.icon;
    this.description = opts.description;
  }
}

```

#### 2. 注册新适配的模式

```typescript
  quickActionModeRegister.addModel({
    title: '默认模式',
    tooltip: '默认模式提示',
    description: '默认模式描述',
    icon: './assets/svg/icon-default.svg',
    type: ModeType.DEFAULT,
    keyboards: 'ctrl+p',
    tag: '',
    provider: new DefaultModeDataProvider(),
  });
```
npm package: @ibizstudio/stencil-components-vue
Description: iBizDesignVue specific wrappers for ibiz-stencil-components
Latest version: 0.0.1-beta.3

# @ionic/vue (beta)

Ionic Vue.js specific building blocks on top of [@ionic/core](https://www.npmjs.com/package/@ionic/core) components.

To get started simply install `@ionic/vue` and `@ionic/core` with npm into your project and then register `@ionic/vue` as a plugin to your vue application.

```ts
import Vue from 'vue';
import Ionic from '@ionic/vue';

Vue.use(Ionic);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');
```

## Publishing a Native Application

You can now make use of all of the ionic components in your vue application.
If you want to publish your app to the App Store or Google Play you will need to use the ionic cli to execute Capacitor commands to do so.

More information on this can be found here. https://ionicframework.com/docs/cli
If you want to learn more about Capacitor our dedicated site can be found here. https://capacitor.ionicframework.com/

The commands that you will need to execute are below.

```sh
ionic capacitor add
ionic capacitor copy
ionic capacitor run
```

## Current known limitations

This is an beta release of @ionic/vue so please understand that there are some missing pieces but know that many of the components will work.

- The shorthand `v-model` binding is currently not supported
- Stack navigation for deep transitions is under heavy development at this time.

## Related

- [Ionic Core Components](https://www.npmjs.com/package/@ionic/core)
- [Ionic Documentation](https://ionicframework.com/docs/)
- [Ionic Worldwide Slack](http://ionicworldwide.herokuapp.com/)
- [Ionic Forum](https://forum.ionicframework.com/)
- [Ionicons](http://ionicons.com/)
- [Capacitor](https://capacitor.ionicframework.com/)

## License

- [MIT](https://raw.githubusercontent.com/ionic-team/ionic/master/LICENSE)
npm package: @ibjs/vite-plugin-vue-page-route
Description: A vite plugin for vue, auto generate route info by page
Author: Yun-Ruoxi
Latest version: 0.0.3

# @ibjs/vite-plugin-vue-page-route

A Vite plugin for vue, auto generate route info by page, include route declaration, route file import, route module const.

## Usage

````ts
import { defineConfig } from "vite";
import pageRoute from "@ibjs/vite-plugin-vue-page-route";

export default defineConfig({
  plugins: [
    pageRoute({
      pageDir: "src/views", // default
      pageGlobs: ["**/index.{vue,tsx,jsx}", "!**/components/**"], // default
      routeDts: "src/typings/page-route.d.ts", // default
      routeModuleDir: "src/router/modules", // default
      routeModuleExt: "ts", // default
      routeModuleType: "AuthRoute.Route", // default
      /**
       * @example _builtin_login => login
       */
      routeNameTansformer: (name) =>
        name.replace(/^_([a-zA-Z]|[0-9]|$)+_*/, ""), // default
      /**
       * whether the route is lazy import
       * @param name route name
       * @example
       * - the direct import
       * ```ts
       * import Home from './views/home/index.vue';
       * ```
       * - the lazy import
       * ```ts
       * const Home = import('./views/home/index.vue');
       * ```
       */
      lazyImport: (_name) => true, // default
      /**
       * whether generate the route module
       * @param name the route name, which is not transformed(not execute function routeNameTansformer)
       * @returns boolean
       */
      onRouteModuleGenerate: (name) => !name.includes("_builtin"), // not generate route module for the builtin routes, but other routes will
    }),
  ],
});
````
npm package: @ibjs/vue-materials
Description: vue2 and vue3 components material
Author: IbJS
Latest version: 0.0.4

# @ibjs/vue-materials

Vue 组件物料

## 安装

```bash
npm install @ibjs/vue-materials
yarn install @ibjs/vue-materials
pnpm install @ibjs/vue-materials
```

## 使用

```vue
<script setup lang="ts">
import { AdminLayout, PageTab } from "@ibjs/vue-materials";
import "@ibjs/vue-materials/dist/style.css";
</script>

<template>
  <AdminLayout></AdminLayout>
  <PageTab></PageTab>
</template>
```

## AdminLayout

后台管理系统的布局组件

- 支持垂直(vertical)和水平(horizontal)两种布局模式
- 布局由头部 Header、页签 Tab、侧边栏 Sider、主体内容 Content 和底部 Footer 组成，除了主体内容 Content，其余都可以控制是否渲染
- 支持两种滚动模式：容器滚动(wrapper)和主体内容滚动(content)
- 支持主体内容 Content 全屏

### Api 用法

#### 属性

| 字段                      | 说明                                                                     | 类型                      | 默认值                    |
| ------------------------- | ------------------------------------------------------------------------ | ------------------------- | ------------------------- |
| mode                      | 布局模式                                                                 | [LayoutMode](#LayoutMode) | "vertical"                |
| scrollMode                | 滚动模式                                                                 | [ScrollMode](#ScrollMode) | "vertical"                |
| [scrollElId](#scrollElId) | 滚动元素的 ID, 可用于获取对应的 Dom，使其滚动                            | string                    | "**LAYOUT_SCROLL_EL_ID**" |
| commonClass               | 组件的通用样式类名，可控制容器、头部、页签、侧边栏、主体和底部的公共样式 | string                    | "transition-all-300"      |
| fixedTop                  | 固定上面的头部和 Tab 页签部分                                            | boolean                   | true                      |

### 说明

#### LayoutMode

```ts
/**
 * 布局模式
 * - horizontal 水平
 * - vertical 垂直
 */
type LayoutMode = "horizontal" | "vertical";
```

#### ScrollMode

```ts
/**
 * 内容溢出时的出现滚动条的方式
 * - wrapper 布局组件最外层的元素出现滚动条
 * - content 主体内容组件出现滚动条
 * @default 默认 wrapper
 */
type ScrollMode = "wrapper" | "content";
```

#### scrollElId

使用导出的默认 ID

```ts
import { LAYOUT_SCROLL_EL_ID } from "@ibjs/vue-materials";
```
npm package: @ibkhall/v-phone-field
Description: Vuetify phone field
Author: Ibrahim Boubacar
Latest version: 1.1.3

# Vuetify phone field

[![npm](https://img.shields.io/npm/v/@ibkhall/v-phone-field.svg)](http://npm.im/@ibkhall/v-phone-field)
<a href="https://www.npmjs.com/package/@ibkhall/v-phone-field">
    <img src="https://img.shields.io/npm/dt/@ibkhall/v-phone-field.svg" alt="Downloads">
  </a>
  <a href="https://www.npmjs.com/package/@ibkhall/v-phone-field">
    <img src="https://img.shields.io/npm/dm/@ibkhall/v-phone-field.svg" alt="Downloads">
  </a>
![](./demo.gif)

Vuetify telephone field

## Install

```bash
npm install @ibkhall/v-phone-field
```
## Usage

```html
<script setup>
import VPhoneField from '@ibkhall/v-phone-field'
import {ref} from 'vue'

const phone = ref('')
</script>
<template>
<!-- some codes -->

<VPhoneField v-model="phone"/>
<!-- some codes -->
</template>
```



## Props

All VTextField props and following props

| Name              | Default                                      |      Description                           |
|-------------------|----------------------------------------------|--------------------------------------------|
| default-country   | the country fetched from IP address of user  |    The country iso2 code(ex: ne for Niger) |
| invalid-message   | Invalid phone number                         |    Error message to display when invalid   |

## Events

All VTextField events and @validate

| Name        | Description                                        |
|-------------|----------------------------------------------------|
| @validate   | On phone number is valid                           |


## License

The MIT License.

## Author

<table>
  <tr>
    <td>
      <img src="https://github.com/ibkhall.png?s=100" width="100">
    </td>
    <td>
      Ibrahim Boubacar<br />
      <a href="mailto:ibrahimkhall212@gmail.com">ibrahimkhall212@gmail.com</a><br />
    </td>
  </tr>
</table>