open-index/open-npm huggingface dataset:
npm package: @mypandora/element-datepicker
Description: ### 依赖
Latest version: 0.0.7

# 日期选择器

### 依赖

Vue 2.6.14+

Element-UI 2.15.8+


### 安装

```
npm install @mypandora/element-datepicker
```

### 属性、事件、方法

兼容 element-ui datepicker 的所有属性、事件、方法

### 扩展之处

1. 支持半年度选择

2. 支持季度选择

3. 支持旬选择


###  日期格式

使用`format`指定输入框的格式；使用`value-format`指定绑定值的格式。

默认情况下，组件接受并返回`Date`对象。以下为可用的格式化字符串，以 UTC 2017年1月2日 03:04:05 为例：

:::warning
请注意大小写
:::

| 格式 | 含义 | 备注 | 举例 |
|------|------|------|------|
| `yyyy` | 年 | | 2017 |
| `BB` | 半年 | 仅半年选择器的 `value-format` 可用；使用 01, 02 表示| 201701|
| `B`  | 半年 | 仅半年选择器的 `format` 可用，使用上半年、下半年表示 | 2017上半年|
| `QQ` | 季度 | 仅季度选择器的 `value-format` 可用；使用 01, 02, 03, 04 表示| 201701|
| `Q`  | 季度 | 仅季度选择器的 `format` 可用，使用第一季度、第二季度、第三季度、第四季度表示 | 2017第一季度|
| `TT` | 旬 | 仅旬选择器的 `value-format` 可用；使用 01, 02, 03 表示| 20170101|
| `T`  | 旬 | 仅旬选择器的 `format` 可用，使用上旬、中旬、下旬表示 | 2017年01月上旬|
| `M`  | 月 | 不补0 | 1 |
| `MM` | 月 | | 01 |
| `W`  | 周 | 仅周选择器的 `format` 可用；不补0 | 1 |
| `WW` | 周 | 仅周选择器的 `format` 可用 | 01 |
| `d`  | 日 | 不补0 | 2 |
| `dd` | 日 | | 02 |
| `H`  | 小时 | 24小时制；不补0 | 3 |
| `HH` | 小时 | 24小时制 | 03 |
| `h`  | 小时 | 12小时制，须和 `A` 或 `a` 使用；不补0 | 3 |
| `hh` | 小时 | 12小时制，须和 `A` 或 `a` 使用 | 03 |
| `m`  | 分钟 | 不补0 | 4 |
| `mm` | 分钟 | | 04 |
| `s`  | 秒 | 不补0 | 5 |
| `ss` | 秒 | | 05 |
| `A`  | AM/PM | 仅 `format` 可用，大写 | AM |
| `a`  | am/pm | 仅 `format` 可用，小写 | am |
| `timestamp` | JS时间戳 | 仅 `value-format` 可用；组件绑定值为`number`类型 | 1483326245000 |
| `[MM]` | 不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如  [A] [MM])  | MM |

:::

### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| type | 显示类型 | string | year/halfyear/quarter/month/tenday/date/dates/tendays/months/quarters/halfyears/years week/datetime/datetimerange/ daterange/monthrange | date |
npm package: @mypandora/pro-layout
Description: 一个基于 vue 的布局组件。
Author: mypandora
Latest version: 0.0.4

# 布局

### 依赖

Vue 2.6.14+

Vue-Router 3.5.4+

Element-UI 2.15.8+

svg-sprite-loader 6.0.11+

### 安装

```
npm install @mypandora/pro-layout
```

### 属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| device | 显示模式：手机、电脑 | String | desktop | desktop |
| logoTitle | layout 的左上角 的 title | String | - | '' |
| headerHeight | 顶部导航高度 | Number | - | 60 |
| sideWidth | 左侧菜单栏宽度 | Number | - | 200 |
| sideCollpaseWidth | 左侧菜单栏收缩宽度 | Number | - | 48 |
| menuRoutes | 路由数组 | Array | - | [] |
| predefine | 预设颜色 | Array | - | ['#2e59a7', '#80d1c8', '#0095b6', '#ff770f', '#1a7bb0'] |
| settings | 布局配置 | Object | - | - |

#### menuRoutes

| 参数        | 说明                     | 类型    | 可选值      | 默认值     |
| ----------- | ------------------------ | ------- | ----------- | ---------- |
| path        | 路由路径                 | String  |             |            |
| name        | 路由的名字               | String  |             |            |
| component   | 路由组件                 | Vue     |             |            |
| hiddren     | 路由是否隐藏             | Boolean | false, true | false      |
| alwaysShow  | 路由是否总是显示         | Boolean | false, true | true       |
| redirect    | 在面包屑导航中是否可点击 | String  |             | noRedirect |
| query       | 默认传递参数             | String  |             |            |
| roles       | 访问路由的角色权限       | Array   |             |            |
| permissions | 访问路由的菜单权限       | Array   |             |            |
| meta        | 路由元数据信息           | Object  |             |            |

#### settings

| 参数         | 说明             | 类型    | 可选值                  | 默认值      |
| ------------ | ---------------- | ------- | ----------------------- | ----------- |
| showSettings | 是否显示配置     | Boolean | true, false             | false       |
| sideTheme    | 侧边栏风格       | String  | theme-dark, theme-light | theme-light |
| theme        | 主题色           | String  | -                       | #2E59A7     |
| navMode      | 导航模式         | String  | aside, top, mix         | mix         |
| fixedHeader  | 是否固定顶部导航 | Boolean | true, false             | true        |
| fixedSide    | 是否固定侧边菜单 | Boolean | true, false             | true        |
| autoMenu     | 是否自动分割菜单 | Boolean | true, false             | true        |
| showHeader   | 是否显示顶栏     | Boolean | true, false             | true        |
| showSide     | 是否显示菜单     | Boolean | true, false             | true        |
| showLogo     | 是否显示 Logo    | Boolean | true, false             | true        |

### 插槽

| 名称       | 说明                 |
| ---------- | -------------------- |
| logo       | layout 的左上角 logo |
| logoRender | layout 的左上角      |
| rightMenu  | 导航栏最右侧菜单区域 |
| default    | 默认插槽             |
npm package: @mypandora/query-builder
Description: ### 使用方式
Latest version: 0.0.3

# query-builder

### 使用方式

1. 安装依赖
```bash
pnpm add @mypandora/query-builder
```

2. 引入组件
```vue
<!-- 引入组件与样式 -->
import QueryBuilder from '@mypandora/query-builder';
import '@mypandora/query-builder/style.css';

export default {
  name: 'Demo',
  components: {
    QueryBuilder,
  }
  ...
}
```

3. 在 template 中使用
```html
<template>
  <div id="app">
    <query-builder :data.sync="treeData" :operatorText="operatorText">
      <!-- 使用插槽添加自定义查询内容 -->
      <!-- data 为当前数据；onUpdate 为更新数据方法，第一个参数为 key，第二个参数为 value -->
      <template #default="{ data, onUpdate }">
        <div class="item-nohover">
          <span class="item-field">{{ data.name }}</span>

          <el-select
            class="item-op"
            size="small"
            :value="data.condition"
            @change="(val) => onUpdate('condition', val)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in conditionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>

          <div class="item-value">
            <el-input
              :value="data.startValue"
              @input="(val) => onUpdate('startValue', val)"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div class="item-text">至</div>
          <div class="item-value">
            <el-input
              :value="data.endValue"
              @input="(val) => onUpdate('endValue', val)"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
      </template>
    </query-builder>
  </div>
</template>
```




### 数据格式

#### tree 数据，必填
```js
[
    {
        // 组数据结构: operator: 操作符 isOpen: 是否展开 children: 子节点
        operator: "or",
        isOpen: true,
        children: [
        {
            operator: "and",
            isOpen: true,
            children: [
            {
                // 插槽内容数据结构，请按你的插槽内容组织
                name: "手机价格",
                condition: "",
                startValue: "",
                endValue: "",
            },
            {
                operator: "and",
                isOpen: true,
                children: [
                {
                    name: "手机颜色",
                    condition: "",
                    startValue: "",
                    endValue: "",
                },
                {
                    name: "手机尺寸",
                    condition: "",
                    startValue: "",
                    endValue: "",
                },
                ],
            },
            ],
        },
        ],
    },
]
```

#### operatorText 操作符配置，默认为“且”和“或”，可选

```js
{
    and: "且",
    or: "或",
}
```