@component-hook/picker 0.1.0

package/README.md

@@ -0,0 +1,231 @@
+# @component-hook/picker
+
+Picker component with vue3 ([DEMO](https://tzuyi0817.github.io/component-hook/))
+
+<p>
+  <a href="https://npm-stat.com/charts.html?package=@component-hook/picker">
+    <img src="https://img.shields.io/npm/dm/@component-hook/picker.svg" alt="npm"/>
+  </a>
+  <a href="https://www.npmjs.com/package/@component-hook/picker">
+    <img src="https://img.shields.io/npm/v/@component-hook/picker.svg" alt="npm"/>
+  </a>
+</p>
+
+## Features
+
+- Picker List
+- Supports single-column and concatenated data
+- Scroll wheel 3D effect
+- Custom title, confirm and cancel text, class and color
+- Custom wheel swipe Time
+- Built-in date and time data
+- Supports typescript
+
+## Getting started
+
+### Installation
+
+First step is to install it using `yarn`、`npm` or `pnpm`:
+
+```bash
+npm install @component-hook/picker
+
+# or use yarn
+yarn add @component-hook/picker
+
+# or use pnpm
+pnpm install @component-hook/picker
+```
+
+### Precautions
+
+If you use Vite Tooling and report an error (TypeError: Cannot read properties of null (reading 'setupContext')):
+
+```bash
+defineConfig({
+  ...
+  resolve: {
+    dedupe: ['vue'],
+  },
+});
+```
+
+### Basic Using
+
+```vue
+<script setup>
+import { ref, computed, reactive } from 'vue';
+import Picker from '@component-hook/picker';
+
+const currentSelect = ref({});
+const anchor = ref([0, 1, 2]);
+const currentSingle = ref < LangType > {};
+const anchorSingle = ref(1);
+const currentDate = ref([2022, 7, 7]);
+const currentTime = ref([]);
+const isShowPicker = ref(false);
+const isShowDate = ref(false);
+const isShowTime = ref(false);
+const singleData = [
+  { langType: 2, code: 'vi', original: 'Tiếng Việt' },
+  { langType: 0, code: 'en', original: 'English' },
+  { langType: 1, code: 'cn', original: '中文' },
+];
+const dataList = ref([singleData, singleData, singleData]);
+
+const options = reactive({
+  confirmColor: '#000',
+  cancelClass: 'test',
+  titleText: 'Title',
+});
+
+function confirm(value) {
+  currentSelect.value = value;
+}
+
+function cancel() {
+  console.log('cancel');
+}
+
+function toggle() {
+  isShowPicker.value = true;
+}
+
+function openSingle() {
+  isShowSingle.value = true;
+}
+
+function openDate() {
+  isShowDate.value = true;
+}
+
+function openTime() {
+  isShowTime.value = true;
+}
+</script>
+
+<template>
+  <picker
+    v-model:isShowPicker="isShowPicker"
+    v-model:anchor="anchor"
+    :data="dataList"
+    :showKey="['original', 'original', 'original']"
+    :options="options"
+    :swipeTime="500"
+    @confirm="confirm"
+    @cancel="cancel"
+  />
+
+  <picker
+    v-model:isShowPicker="isShowSingle"
+    v-model:anchor="anchorSingle"
+    :data="singleData"
+    showKey="original"
+    :options="options"
+    @confirm="confirmSingle"
+  />
+
+  <picker
+    v-model:isShowPicker="isShowDate"
+    v-model:anchor="currentDate"
+    type="date"
+    :options="{ titleText: 'date selector' }"
+  />
+
+  <picker
+    v-model:isShowPicker="isShowTime"
+    v-model:anchor="currentTime"
+    type="time"
+    :options="{ titleText: 'time selector' }"
+  />
+
+  <button @click="toggle">toggle</button>
+  <button @click="openSingle">single</button>
+  <button @click="openDate">date</button>
+  <button @click="openTime">time</button>
+</template>
+```
+
+### Props
+
+<table width="100%">
+  <tr>
+    <th style="min-width:160px">Name</th>
+    <th>Required</th>
+    <th>Type</th>
+    <th>Description</th>
+    <th style="min-width:130px">Default</th>
+  </tr>
+  <tr>
+    <td>v-model:isShowPicker</td>
+    <td>true</td>
+    <td>Boolean</td>
+    <td>Control picker show</td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>v-model:anchor</td>
+    <td>true</td>
+    <td>Number or Number[]</td>
+    <td>Picker current select index (single column for Number、 multiple columns for Array)</td>
+    <td>date: [2022, 7, 12] <br/> time: [10, 13, 20]</td>
+  </tr>
+  <tr>
+    <td>data</td>
+    <td>false</td>
+    <td>Array</td>
+    <td>Picker list [1, 2, 3] or [[1, 2, 3], [1, 2, 3]]</td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>type</td>
+    <td>false</td>
+    <td>String</td>
+    <td>Built-in picker type, no need to pass in data (date, time)</td>
+    <td>date: current date <br/> time: current time</td>
+  </tr>
+  <tr>
+    <td>showKey</td>
+    <td>false</td>
+    <td>String or String[]</td>
+    <td>Wheel options name (object key)</td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>swipeTime</td>
+    <td>false</td>
+    <td>Number</td>
+    <td>Wheel swipe Time</td>
+    <td>500</td>
+  </tr>
+  <tr>
+    <td>options</td>
+    <td>false</td>
+    <td>Object</td>
+    <td>Custom text, color and class</td>
+    <td>See below for details</td>
+  </tr>
+</table>
+
+#### options
+
+```object
+{
+  cancelClass: '',
+  confirmClass: '',
+  titleClass: '',
+  cancelColor: '#999',
+  confirmColor: '#42b983',
+  titleColor: '',
+  cancelText: 'Cancel',
+  confirmText: 'Confirm',
+  titleText: '',
+}
+```
+
+### Events
+
+| Event   | Description                                  | Return Parameters |
+| :------ | :------------------------------------------- | :---------------- |
+| confirm | Triggered when the confirm button is clicked | Selected value    |
+| cancel  | Triggered when the cancel button is clicked  | None              |

package/dist/index.css

@@ -0,0 +1 @@
+.fade-enter-active[data-v-f4d0313e],.fade-leave-active[data-v-f4d0313e],.slide-enter-active[data-v-f4d0313e],.slide-leave-active[data-v-f4d0313e]{transition:all .3s ease}.fade-enter-from[data-v-f4d0313e],.fade-leave-to[data-v-f4d0313e]{opacity:0}.slide-enter-from[data-v-f4d0313e],.slide-leave-to[data-v-f4d0313e]{opacity:.5;transform:translate3d(0,270px,0)}.mask[data-v-f4d0313e]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#0003}.picker[data-v-f4d0313e]{position:fixed;left:0;right:0;bottom:0;height:270px;z-index:10000;background:#fff;-webkit-user-select:none;user-select:none}.picker_title[data-v-f4d0313e]{position:relative;height:44px;color:#333}.picker_title[data-v-f4d0313e]:after{content:"";display:block;border-bottom:1px solid #ebebeb;left:0;right:0;transform:scaleY(.5)}.picker_title button[data-v-f4d0313e]{position:absolute;height:44px;line-height:44px;padding:0 12px;font-size:14px;border:none;background-color:transparent}.picker_title h4[data-v-f4d0313e]{margin:0;font-size:16px;font-weight:400;height:44px;line-height:44px;text-align:center}.picker_cancel[data-v-f4d0313e]{left:0;cursor:pointer;transition:all .3s}.picker_cancel[data-v-f4d0313e]:hover{filter:brightness(110%)}.picker_confirm[data-v-f4d0313e]{right:0;cursor:pointer;transition:all .3s}.picker_confirm[data-v-f4d0313e]:hover{filter:brightness(110%)}.picker_panel[data-v-f4d0313e]{position:relative;height:226px;padding:24px 12px;box-sizing:border-box}.picker_mask_top[data-v-f4d0313e],.picker_mask_bottom[data-v-f4d0313e]{position:absolute;left:0;right:0;height:72px;background:#fff;transform:translateZ(0);z-index:1;pointer-events:none}.picker_mask_top[data-v-f4d0313e]{top:24px;background:linear-gradient(to bottom,#ffffffe6,#ffffff80)}.picker_mask_top[data-v-f4d0313e]:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid #ebebeb;transform:scaleY(.5)}.picker_mask_bottom[data-v-f4d0313e]{bottom:24px;background:linear-gradient(to top,#ffffffe6,#ffffff80)}.picker_mask_bottom[data-v-f4d0313e]:before{content:"";display:block;position:absolute;left:0;right:0;top:0;border-bottom:1px solid #ebebeb;transform:scaleY(.5)}.picker_wheel[data-v-f4d0313e]{flex:1;overflow:hidden}.picker_wheel_wrapper[data-v-f4d0313e]{display:flex;align-items:stretch;height:100%}.picker_wheel_scroll[data-v-f4d0313e]{margin-top:72px;padding:0}.picker_wheel_item[data-v-f4d0313e]{height:34px;line-height:34px;font-size:17px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;cursor:pointer}

package/dist/index.d.ts

@@ -0,0 +1,106 @@
+import { ComponentOptionsMixin } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
+import { PublicProps } from 'vue';
+
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
+declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+data: () => never[];
+isShowPicker: boolean;
+options: () => {};
+swipeTime: number;
+type: string;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:isShowPicker": (...args: any[]) => void;
+"update:anchor": (...args: any[]) => void;
+cancel: (...args: any[]) => void;
+confirm: (...args: any[]) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+data: () => never[];
+isShowPicker: boolean;
+options: () => {};
+swipeTime: number;
+type: string;
+}>>> & {
+onCancel?: ((...args: any[]) => any) | undefined;
+onConfirm?: ((...args: any[]) => any) | undefined;
+"onUpdate:isShowPicker"?: ((...args: any[]) => any) | undefined;
+"onUpdate:anchor"?: ((...args: any[]) => any) | undefined;
+}, {
+swipeTime: number;
+options: Partial<PickerOptions>;
+type: string;
+data: PickData;
+isShowPicker: boolean;
+}, {}>;
+export default _default;
+
+declare type EmitKey = 'update:isShowPicker' | 'update:anchor' | 'cancel' | 'confirm';
+
+export declare type NormalData = Record<PropertyKey, unknown> | string | number;
+
+export declare type OriginData = Array<NormalData>;
+
+export declare type PickData = OriginData | Array<OriginData>;
+
+export declare type PickerEmit = (event: EmitKey, ...args: unknown[]) => void;
+
+export declare interface PickerOptions {
+    cancelClass: string;
+    confirmClass: string;
+    titleClass: string;
+    cancelColor: string;
+    confirmColor: string;
+    titleColor: string;
+    cancelText: string;
+    confirmText: string;
+    titleText: string;
+}
+
+export declare interface PickerProps {
+    data: PickData;
+    isShowPicker: boolean;
+    anchor: number | Array<number>;
+    options?: Partial<PickerOptions>;
+    showKey?: string | Array<string>;
+    swipeTime?: number;
+    type: string;
+}
+
+export declare interface PickerSelectItems {
+    item: Array<NormalData>;
+    anchor: Array<number>;
+}
+
+declare interface Props {
+    data?: PickData;
+    isShowPicker: boolean;
+    options?: Partial<PickerOptions>;
+    anchor: number | Array<number>;
+    showKey?: string | Array<string>;
+    swipeTime?: number;
+    type?: string;
+}
+
+export { }