@anmed/mui-selection 0.0.2

package/Selection.svelte

@@ -0,0 +1,134 @@
+<script>import './mui-select-field.scss';
+import { onMount } from "svelte";
+export let dataList = [];
+export let value;
+export let displayKey;
+let pickerColumn;
+let pickerContent;
+let isPointerdown = false;
+let itemHeight = 40;
+let maxY = itemHeight * 2;
+let minY = 0;
+let lastY = 0;
+let diffY = 0;
+let translateY = 0;
+let friction = 0.95; // 摩擦系数
+let distanceY = 0;
+let listHtml = "";
+onMount(() => {
+    if (!value && dataList.length != 0) {
+        value = dataList[0];
+    }
+});
+function handlePointerdown(e) {
+    // 如果是鼠标点击，只响应左键
+    if (e.pointerType === 'mouse' && e.button !== 0) {
+        return;
+    }
+    pickerColumn.setPointerCapture(e.pointerId);
+    isPointerdown = true;
+    lastY = e.clientY;
+    diffY = 0;
+    distanceY = 0;
+    getTransform();
+    pickerContent.style.transition = 'none';
+}
+function handlePointermove(e) {
+    if (isPointerdown) {
+        diffY = e.clientY - lastY;
+        translateY += diffY;
+        lastY = e.clientY;
+    }
+}
+function handlePointerup(e) {
+    if (isPointerdown) {
+        isPointerdown = false;
+        getTranslateY();
+        // 滑动距离与时长成正比且最短时长为300ms
+        const duration = Math.max(Math.abs(distanceY) * 1.5, 300);
+        pickerContent.style.transition = 'transform ' + duration + 'ms ease';
+    }
+}
+function handlePointercancel(e) {
+    if (isPointerdown) {
+        isPointerdown = false;
+    }
+}
+function getTransform() {
+    const transform = window.getComputedStyle(pickerContent).getPropertyValue('transform');
+    if (transform !== 'none') {
+        translateY = parseFloat(transform.split(',')[5]);
+    }
+}
+function getTranslateY() {
+    let speed = diffY;
+    while (Math.abs(speed) > 1) {
+        speed *= friction;
+        distanceY += speed;
+    }
+    // 边界判断
+    let y = translateY + distanceY;
+    if (y > maxY) {
+        translateY = maxY;
+        distanceY = maxY - translateY;
+    }
+    else if (y < minY) {
+        translateY = minY;
+        distanceY = minY - translateY;
+    }
+    else {
+        translateY = y;
+    }
+    // 计算停止位置使其为itemHeight的整数倍
+    let i = Math.round(translateY / itemHeight);
+    translateY = i * itemHeight;
+    value = dataList[2 - translateY / itemHeight];
+}
+function getHtmlList(list) {
+    let html = '';
+    for (const item of list) {
+        let displayText = '';
+        if ((displayKey?.length ?? 0) === 0) {
+            displayText = item.toString();
+        }
+        else {
+            displayText = item[displayKey];
+        }
+        html += `<li style="line-height: 40px;text-align: center"> ${displayText} </li>`;
+    }
+    return html;
+}
+function getDefaultTranslateY(data) {
+    let dY;
+    let indexOf = data.indexOf(value);
+    if (indexOf == -1) {
+        dY = maxY;
+    }
+    else if (indexOf > 2) {
+        dY = -itemHeight * (indexOf - 2);
+    }
+    else {
+        dY = itemHeight * (2 - indexOf);
+    }
+    return dY;
+}
+$: minY = itemHeight * (3 - dataList.length);
+$: listHtml = getHtmlList(dataList);
+$: translateY = getDefaultTranslateY(dataList);
+</script>
+
+<div class="mui-select-slide-box">
+    <div class="mui-select-group">
+        <div class="mui-select-column" bind:this={pickerColumn}
+             on:pointerdown={handlePointerdown}
+             on:pointermove={handlePointermove}
+             on:pointerup={handlePointerup}
+             on:pointercancel={handlePointercancel}>
+            <ul class="mui-select-content" bind:this={pickerContent}
+                style="transform: {'translate3d(0px, ' + translateY + 'px, 0px)'}"
+            >
+                {@html listHtml}
+            </ul>
+        </div>
+    </div>
+</div>

package/Selection.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import './mui-select-field.scss';
+declare const __propDef: {
+    props: {
+        dataList?: any[] | undefined;
+        value: any;
+        displayKey: string | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SelectionProps = typeof __propDef.props;
+export type SelectionEvents = typeof __propDef.events;
+export type SelectionSlots = typeof __propDef.slots;
+export default class Selection extends SvelteComponentTyped<SelectionProps, SelectionEvents, SelectionSlots> {
+}
+export {};

package/SelectionField.svelte

@@ -0,0 +1,70 @@
+<script>import CommonField from "@anmed/mui-common-ui/common-field";
+import { createEventDispatcher } from "svelte";
+let dispatcher = createEventDispatcher();
+export let list = [];
+export let value;
+export let keyCode = 'value';
+export let keyText = 'text';
+export let convertText;
+export let label;
+export let readOnly = false;
+export let required = false;
+export let error;
+export let options;
+export let isCardSelection = false;
+let focused;
+let above;
+let displayText;
+const getDisplayText = (item) => {
+    let text;
+    if (convertText) {
+        text = convertText(item);
+    }
+    else {
+        text = item[keyText];
+    }
+    return text;
+};
+const onCardItemClick = (item) => {
+    if (!readOnly) {
+        value = item;
+    }
+};
+$: {
+    let selectItem = list.find((item) => item[keyCode] == value);
+    if (selectItem) {
+        displayText = getDisplayText(selectItem);
+    }
+    else {
+        displayText = '';
+    }
+}
+$: above = focused || displayText.toString().length != 0 || isCardSelection;
+const handlerClick = () => {
+    if (!readOnly && !isCardSelection) {
+        dispatcher('action', value);
+    }
+};
+</script>
+
+<div on:click={handlerClick}>
+
+    {#if isCardSelection}
+        <CommonField {label} {required} bind:focused {above} {error}>
+            <div class="card-select-box">
+                {#each list as item}
+        <span class="{item === value? 'card-select-item-selected' :'card-select-item-normal'}"
+              on:click={()=>onCardItemClick(item)}>{getDisplayText(item)}</span>
+                {/each}
+            </div>
+        </CommonField>
+    {:else }
+        <CommonField {label} {required} bind:focused {above} {error}>
+            <span class="mui-select-field-text">{displayText}</span>
+            <div slot="trailing-icon">
+                <span class="triangle-down"></span>
+            </div>
+        </CommonField>
+    {/if}
+
+</div>

package/SelectionField.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        list?: any[] | undefined;
+        value: any;
+        keyCode?: string | undefined;
+        keyText?: string | undefined;
+        convertText: (item: any) => string;
+        label: string | null;
+        readOnly?: boolean | undefined;
+        required?: boolean | undefined;
+        error: any;
+        options: any;
+        isCardSelection?: boolean | undefined;
+    };
+    events: {
+        action: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SelectionFieldProps = typeof __propDef.props;
+export type SelectionFieldEvents = typeof __propDef.events;
+export type SelectionFieldSlots = typeof __propDef.slots;
+export default class SelectionField extends SvelteComponentTyped<SelectionFieldProps, SelectionFieldEvents, SelectionFieldSlots> {
+}
+export {};

package/SelectionSpinner.svelte

@@ -0,0 +1,54 @@
+<script>import { createEventDispatcher } from "svelte";
+import Button from "@anmed/mui-buttons";
+import SelectField from "./Selection.svelte";
+export let visible;
+export let title;
+export let style;
+export let dataList = [];
+export let value;
+export let displayKey;
+const dispatch = createEventDispatcher();
+const handleItemSelected = (item) => {
+    dispatch('select', value);
+};
+</script>
+<div class="box" {style}>
+    <div>
+        {#if title}
+            <div class="title">
+                <span>{title}</span>
+            </div>
+        {/if}
+        <div>
+            <SelectField bind:value={value} bind:dataList={dataList} bind:displayKey={displayKey}/>
+        </div>
+        <div class="bottom_button_tab">
+            <Button round label="取消" on:click={()=>visible =false}/>
+            <Button round label="确认" on:click={handleItemSelected}/>
+        </div>
+    </div>
+</div>
+
+<style>
+
+    .box {
+        background-color: white;
+        border-top-right-radius: 15px;
+        border-top-left-radius: 15px;
+    }
+
+    .title {
+        padding: 15px;
+        text-align: center;
+        color: #333333;
+        font-size: 15px;
+        font-weight: bold;
+    }
+
+    .bottom_button_tab {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+    }
+</style>

package/SelectionSpinner.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        visible: boolean;
+        title: string | null;
+        style: any;
+        dataList?: any[] | undefined;
+        value: any;
+        displayKey: string | null;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SelectionSpinnerProps = typeof __propDef.props;
+export type SelectionSpinnerEvents = typeof __propDef.events;
+export type SelectionSpinnerSlots = typeof __propDef.slots;
+export default class SelectionSpinner extends SvelteComponentTyped<SelectionSpinnerProps, SelectionSpinnerEvents, SelectionSpinnerSlots> {
+}
+export {};

package/SingleClickSelectionSpinner.svelte

@@ -0,0 +1,46 @@
+ <script>import { createEventDispatcher } from "svelte";
+export let visible;
+export let title;
+export let style;
+export let list = [];
+export let value;
+export let keyField = 'value';
+export let textField = 'text';
+export let convertText;
+export let itemSelect;
+const dispatch = createEventDispatcher();
+const handleItemSelected = (item) => {
+    dispatch('select', item);
+    if (itemSelect) {
+        itemSelect(item);
+    }
+    value = item[keyField];
+};
+const getDisplayText = (item) => {
+    let displayText = '';
+    if (item) {
+        if (convertText) {
+            displayText = convertText(item);
+        }
+        else {
+            displayText = item[textField];
+        }
+    }
+    else {
+        displayText = '';
+    }
+    return displayText;
+};
+</script>
+
+<div class="single-click-selection-box" {style}>
+    {#if title}
+        <span class="single-click-selection-title">{title}</span>
+    {/if}
+    <ul class="single-click-selection-ul">
+        {#each list as data}
+            <li on:click={()=>handleItemSelected(data)}
+                class={value === data[keyField] ? 'single-click-selection-li-selected':'single-click-selection-li-normal'}> {getDisplayText(data)}</li>
+        {/each}
+    </ul>
+</div>

package/SingleClickSelectionSpinner.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        visible: boolean;
+        title: string | null;
+        style: any;
+        list?: any[] | undefined;
+        value: any;
+        keyField?: string | undefined;
+        textField?: string | undefined;
+        convertText: (item: any) => string;
+        itemSelect: (item: any) => void;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SingleClickSelectionSpinnerProps = typeof __propDef.props;
+export type SingleClickSelectionSpinnerEvents = typeof __propDef.events;
+export type SingleClickSelectionSpinnerSlots = typeof __propDef.slots;
+export default class SingleClickSelectionSpinner extends SvelteComponentTyped<SingleClickSelectionSpinnerProps, SingleClickSelectionSpinnerEvents, SingleClickSelectionSpinnerSlots> {
+}
+export {};

package/index.d.ts

@@ -0,0 +1,6 @@
+import SelectField from "./Selection.svelte";
+import SelectFieldSpinner from "./SelectionSpinner.svelte";
+import SingleClickSelectionSpinner from "./lib/SingleClickSelectionSpinner.svelte";
+import Selection from "./lib/Selection.svelte";
+export default SelectField;
+export { SingleClickSelectionSpinner, SelectFieldSpinner, Selection };

package/index.js

@@ -0,0 +1,6 @@
+import SelectField from "./Selection.svelte";
+import SelectFieldSpinner from "./SelectionSpinner.svelte";
+import SingleClickSelectionSpinner from "./lib/SingleClickSelectionSpinner.svelte";
+import Selection from "./lib/Selection.svelte";
+export default SelectField;
+export { SingleClickSelectionSpinner, SelectFieldSpinner, Selection };

package/mui-select-field.css

@@ -0,0 +1,129 @@
+@charset "UTF-8";
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.mui-select-slide-box {
+  flex: 1;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: white;
+  user-select: none;
+}
+
+.mui-select-group {
+  display: flex;
+}
+
+.mui-select-column {
+  position: relative;
+  flex: 1;
+  height: 200px;
+  margin: 0 auto;
+  overflow: hidden;
+  touch-action: none;
+}
+
+.mui-select-column::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  height: 79px;
+  border-bottom: 1px solid #ebebeb;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
+}
+
+.mui-select-column::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  height: 79px;
+  border-top: 1px solid #ebebeb;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9));
+}
+
+li {
+  list-style: none;
+  font-size: 14px;
+  line-height: 40px;
+  text-align: center;
+}
+
+/*CSS小三角*/
+span.triangle-down {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin: auto;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid #666;
+}
+
+.mui-select-field-text {
+  color: var(mui-select-field-text-color, #999);
+  font-size: var(mui-select-field-text-font-size, 16px);
+}
+
+.single-click-selection-box {
+  width: 100%;
+  background-color: white;
+  border-top-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+
+.single-click-selection-title {
+  display: flex;
+  padding: 15px;
+  justify-content: center;
+  color: #333333;
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.single-click-selection-ul {
+  height: 200px;
+  overflow: auto;
+}
+
+.single-click-selection-li-normal {
+  height: 40px;
+  color: var(single-click-selection-normal-text-color, #666);
+}
+
+.single-click-selection-li-selected {
+  height: 40px;
+  color: var(--single-click-selection-selected-text-color, #0912ff);
+}
+
+.card-select-box {
+  display: flex;
+  justify-content: space-around;
+}
+.card-select-box .select-item-base, .card-select-box .card-select-item-selected, .card-select-box .card-select-item-normal {
+  width: 100%;
+  line-height: 24px;
+  border-radius: 5px;
+  margin-right: 10px;
+  font-size: 12px;
+  text-align: center;
+}
+.card-select-box .select-item-base:last-child, .card-select-box .card-select-item-selected:last-child, .card-select-box .card-select-item-normal:last-child {
+  margin-right: 0;
+}
+.card-select-box .card-select-item-normal {
+  background-color: var(--card-select-item-normal-bg-color, #F8F8F8);
+  color: var(--card-select-item-normal-text-color, #333333);
+}
+.card-select-box .card-select-item-selected {
+  background-color: var(--card-select-item-selected-bg-color, #E5F3FF);
+  color: var(--card-select-item-selected-text-color, #377EE1);
+}

package/mui-select-field.scss

@@ -0,0 +1,135 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.mui-select-slide-box {
+  flex: 1;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: white;
+  user-select: none;
+}
+
+.mui-select-group {
+  display: flex;
+}
+
+.mui-select-column {
+  position: relative;
+  flex: 1;
+  height: 200px;
+  margin: 0 auto;
+  overflow: hidden;
+  touch-action: none;
+}
+
+.mui-select-column::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  height: 79px;
+  border-bottom: 1px solid #ebebeb;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6));
+}
+
+.mui-select-column::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  height: 79px;
+  border-top: 1px solid #ebebeb;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, .6), rgba(255, 255, 255, .9));
+}
+
+li {
+  list-style: none;
+  font-size: 14px;
+  line-height: 40px;
+  text-align: center;
+}
+
+/*CSS小三角*/
+span.triangle-down {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin: auto;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid #666;
+}
+
+.mui-select-field-text {
+  color: var(mui-select-field-text-color, #999);
+  font-size: var(mui-select-field-text-font-size, 16px);;
+}
+
+.single-click-selection-box {
+  width: 100%;
+  background-color: white;
+  border-top-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+
+.single-click-selection-title {
+  display: flex;
+  padding: 15px;
+  justify-content: center;
+  color: #333333;
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.single-click-selection-ul {
+  height: 200px;
+  overflow: auto;
+}
+
+.single-click-selection-li-normal {
+  height: 40px;
+  color: var(single-click-selection-normal-text-color, #666);
+}
+
+.single-click-selection-li-selected {
+  height: 40px;
+  color: var(--single-click-selection-selected-text-color, #0912ff);
+}
+
+
+.card-select-box {
+  display: flex;
+  justify-content: space-around;
+
+  .select-item-base {
+    width: 100%;
+    line-height: 24px;
+    border-radius: 5px;
+    margin-right: 10px;
+    font-size: 12px;
+    text-align: center;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .card-select-item-normal {
+    @extend .select-item-base;
+    background-color: var(--card-select-item-normal-bg-color, #F8F8F8);
+    color: var(--card-select-item-normal-text-color, #333333);
+  }
+
+  .card-select-item-selected {
+    @extend .select-item-base;
+    background-color: var(--card-select-item-selected-bg-color, #E5F3FF);
+    color: var(--card-select-item-selected-text-color, #377EE1);
+  }
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@anmed/mui-selection",
+  "version": "0.0.2",
+  "description": "",
+  "type": "module",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "@sveltejs/package": "next",
+    "node-sass": "^8.0.0",
+    "sass": "^1.57.1",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.7.1",
+    "svelte-preprocess": "^4.10.6",
+    "tslib": "^2.3.1",
+    "typescript": "^4.7.4",
+    "vite": "4.0.4",
+    "@anmed/mui-buttons": "^0.0.1",
+    "@anmed/mui-common-ui": "file:/Users/mac/Work/Project/almd/code/jjld_3/mobile-components/mui-common-ui/package"
+  },
+  "author": "Xiang Feng",
+  "license": "MIT",
+  "exports": {
+    "./package.json": "./package.json",
+    "./Selection.svelte": "./Selection.svelte",
+    "./SelectionField.svelte": "./SelectionField.svelte",
+    "./SelectionSpinner.svelte": "./SelectionSpinner.svelte",
+    "./SingleClickSelectionSpinner.svelte": "./SingleClickSelectionSpinner.svelte",
+    ".": "./index.js",
+    "./mui-select-field.css": "./mui-select-field.css",
+    "./mui-select-field.scss": "./mui-select-field.scss"
+  },
+  "svelte": "./index.js"
+}