svelte-mobile-ui 1.0.0

package/components/ContactList/ContactList.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    let {
+        list = [],
+        addText = "新建联系人",
+        defaultTagText = "默认",
+        onAdd,
+        onEdit,
+        onSelect,
+        class: className = "",
+    }: {
+        list?: Array<{
+            id?: string | number;
+            name: string;
+            tel: string;
+            isDefault?: boolean;
+        }>;
+        addText?: string;
+        defaultTagText?: string;
+        onAdd?: () => void;
+        onEdit?: (item: any, index: number) => void;
+        onSelect?: (item: any, index: number) => void;
+        class?: string;
+    } = $props();
+</script>
+
+<div class="smu-contact-list {className}">
+    {#if list.length > 0}
+        {#each list as item, i}
+            <div
+                class="smu-contact-list__item"
+                onclick={() => onSelect?.(item, i)}
+            >
+                <div class="smu-contact-list__info">
+                    <div class="smu-contact-list__name">
+                        {item.name}
+                        {#if item.isDefault}
+                            <span class="smu-contact-list__tag"
+                                >{defaultTagText}</span
+                            >
+                        {/if}
+                    </div>
+                    <div class="smu-contact-list__tel">{item.tel}</div>
+                </div>
+                <div
+                    class="smu-contact-list__edit"
+                    onclick={(e) => {
+                        e.stopPropagation();
+                        onEdit?.(item, i);
+                    }}
+                >
+                    编辑
+                </div>
+            </div>
+        {/each}
+    {:else}
+        <div class="smu-contact-list__empty">暂无联系人</div>
+    {/if}
+
+    <div class="smu-contact-list__add" onclick={() => onAdd?.()}>
+        {addText}
+    </div>
+</div>
+
+<style lang="scss">
+    .smu-contact-list {
+        &__item {
+            display: flex;
+            align-items: center;
+            padding: 12px var(--smu-padding-md);
+            background: var(--smu-background-2);
+            cursor: pointer;
+
+            &:not(:last-child) {
+                border-bottom: 1px solid var(--smu-border-color);
+            }
+
+            &:active {
+                background: var(--smu-active-color);
+            }
+        }
+
+        &__info {
+            flex: 1;
+        }
+
+        &__name {
+            font-size: var(--smu-font-size-md);
+            font-weight: var(--smu-font-bold);
+            line-height: 24px;
+        }
+
+        &__tag {
+            display: inline-block;
+            margin-left: 8px;
+            padding: 0 4px;
+            color: var(--smu-primary-color);
+            font-size: var(--smu-font-size-xs);
+            line-height: 18px;
+            border: 1px solid var(--smu-primary-color);
+            border-radius: var(--smu-radius-sm);
+            font-weight: normal;
+        }
+
+        &__tel {
+            margin-top: 4px;
+            color: var(--smu-gray-6);
+            font-size: var(--smu-font-size-sm);
+        }
+
+        &__edit {
+            padding: 4px 12px;
+            color: var(--smu-primary-color);
+            font-size: var(--smu-font-size-sm);
+            cursor: pointer;
+        }
+
+        &__empty {
+            padding: 40px 0;
+            text-align: center;
+            color: var(--smu-gray-6);
+            font-size: var(--smu-font-size-md);
+        }
+
+        &__add {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 12px 0;
+            text-align: center;
+            color: var(--smu-white);
+            font-size: var(--smu-font-size-lg);
+            background: var(--smu-primary-color);
+            cursor: pointer;
+
+            &:active {
+                opacity: 0.8;
+            }
+        }
+    }
+</style>

package/components/ContactList/index.ts

@@ -0,0 +1 @@
+export { default as ContactList } from './ContactList.svelte'

package/components/CountDown/CountDown.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let {
+    children,
+    class: className = '',
+    ...restProps
+  }: {
+    children?: Snippet
+    class?: string
+    [key: string]: any
+  } = $props()
+</script>
+
+<div class="smu-countdown {className}">
+  {#if children}{@render children()}{/if}
+</div>
+
+<style lang="scss">
+  .smu-countdown {
+    position: relative;
+  }
+</style>

package/components/CountDown/index.ts

@@ -0,0 +1 @@
+export { default as CountDown } from './CountDown.svelte'

package/components/Coupon/Coupon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let {
+    children,
+    class: className = '',
+    ...restProps
+  }: {
+    children?: Snippet
+    class?: string
+    [key: string]: any
+  } = $props()
+</script>
+
+<div class="smu-coupon {className}">
+  {#if children}{@render children()}{/if}
+</div>
+
+<style lang="scss">
+  .smu-coupon {
+    position: relative;
+  }
+</style>

package/components/Coupon/CouponCell.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+    let {
+        title = "",
+        condition = "",
+        description = "",
+        startAt = 0,
+        endAt = 0,
+        valueDesc = 0,
+        unitDesc = "",
+        reason = "",
+        value = 0,
+        currency = "¥",
+        disabled = false,
+        chosen = false,
+        onclick,
+        class: className = "",
+    }: {
+        title?: string;
+        condition?: string;
+        description?: string;
+        startAt?: number;
+        endAt?: number;
+        valueDesc?: number | string;
+        unitDesc?: string;
+        reason?: string;
+        value?: number;
+        currency?: string;
+        disabled?: boolean;
+        chosen?: boolean;
+        onclick?: () => void;
+        class?: string;
+    } = $props();
+
+    function formatDate(ts: number): string {
+        if (!ts) return "";
+        const d = new Date(ts * 1000);
+        return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, "0")}.${String(d.getDate()).padStart(2, "0")}`;
+    }
+</script>
+
+<div
+    class="smu-coupon-cell {chosen ? 'smu-coupon-cell--chosen' : ''} {disabled
+        ? 'smu-coupon-cell--disabled'
+        : ''} {className}"
+    onclick={() => !disabled && onclick?.()}
+>
+    <div class="smu-coupon-cell__value">
+        <span class="smu-coupon-cell__currency">{currency}</span>
+        <span class="smu-coupon-cell__amount">{valueDesc || value}</span>
+        {#if unitDesc}<span class="smu-coupon-cell__unit">{unitDesc}</span>{/if}
+    </div>
+    <div class="smu-coupon-cell__info">
+        <div class="smu-coupon-cell__name">{title}</div>
+        {#if condition}<div class="smu-coupon-cell__condition">
+                {condition}
+            </div>{/if}
+        {#if startAt || endAt}
+            <div class="smu-coupon-cell__date">
+                {formatDate(startAt)} - {formatDate(endAt)}
+            </div>
+        {/if}
+        {#if description}<div class="smu-coupon-cell__desc">
+                {description}
+            </div>{/if}
+    </div>
+</div>
+
+<style lang="scss">
+    .smu-coupon-cell {
+        display: flex;
+        align-items: center;
+        padding: 14px 0;
+        margin: 0 var(--smu-padding-md);
+        cursor: pointer;
+        border-bottom: 1px solid var(--smu-border-color);
+
+        &--disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        &--chosen {
+            .smu-coupon-cell__value {
+                color: var(--smu-danger-color);
+            }
+        }
+
+        &__value {
+            min-width: 80px;
+            text-align: center;
+            color: var(--smu-danger-color);
+        }
+
+        &__currency {
+            font-size: var(--smu-font-size-sm);
+            vertical-align: middle;
+        }
+
+        &__amount {
+            font-size: 24px;
+            font-weight: var(--smu-font-bold);
+            vertical-align: middle;
+        }
+
+        &__unit {
+            font-size: var(--smu-font-size-xs);
+            vertical-align: middle;
+        }
+
+        &__info {
+            flex: 1;
+            padding-left: 12px;
+        }
+
+        &__name {
+            font-size: var(--smu-font-size-md);
+            font-weight: var(--smu-font-bold);
+            line-height: 20px;
+        }
+
+        &__condition,
+        &__date,
+        &__desc {
+            margin-top: 4px;
+            color: var(--smu-gray-6);
+            font-size: var(--smu-font-size-sm);
+            line-height: 18px;
+        }
+    }
+</style>

package/components/Coupon/CouponList.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import CouponCell from "./CouponCell.svelte";
+
+    let {
+        code = $bindable(""),
+        coupons = [],
+        disabledCoupons = [],
+        chosenCoupon = $bindable(-1),
+        enabledTitle = "可用优惠券",
+        disabledTitle = "不可用优惠券",
+        exchangeButtonText = "兑换",
+        exchangeButtonLoading = false,
+        exchangeButtonDisabled = false,
+        showExchangeBar = true,
+        showCloseButton = true,
+        closeButtonText = "不使用优惠",
+        inputPlaceholder = "请输入优惠码",
+        showCount = true,
+        currency = "¥",
+        emptyImage = "",
+        onchange,
+        onexchange,
+        children,
+        class: className = "",
+    }: {
+        code?: string;
+        coupons?: any[];
+        disabledCoupons?: any[];
+        chosenCoupon?: number;
+        enabledTitle?: string;
+        disabledTitle?: string;
+        exchangeButtonText?: string;
+        exchangeButtonLoading?: boolean;
+        exchangeButtonDisabled?: boolean;
+        showExchangeBar?: boolean;
+        showCloseButton?: boolean;
+        closeButtonText?: string;
+        inputPlaceholder?: string;
+        showCount?: boolean;
+        currency?: string;
+        emptyImage?: string;
+        onchange?: (index: number) => void;
+        onexchange?: (code: string) => void;
+        children?: Snippet;
+        class?: string;
+    } = $props();
+
+    let activeTab = $state(0);
+
+    function handleSelect(index: number) {
+        chosenCoupon = index;
+        onchange?.(index);
+    }
+
+    function handleExchange() {
+        if (!code || exchangeButtonDisabled || exchangeButtonLoading) return;
+        onexchange?.(code);
+    }
+</script>
+
+<div class="smu-coupon-list {className}">
+    {#if showExchangeBar}
+        <div class="smu-coupon-list__exchange">
+            <input
+                class="smu-coupon-list__input"
+                type="text"
+                placeholder={inputPlaceholder}
+                bind:value={code}
+            />
+            <button
+                class="smu-coupon-list__exchange-btn"
+                disabled={exchangeButtonDisabled ||
+                    exchangeButtonLoading ||
+                    !code}
+                onclick={handleExchange}
+            >
+                {exchangeButtonText}
+            </button>
+        </div>
+    {/if}
+
+    <div class="smu-coupon-list__tabs">
+        <div
+            class="smu-coupon-list__tab {activeTab === 0
+                ? 'smu-coupon-list__tab--active'
+                : ''}"
+            onclick={() => (activeTab = 0)}
+        >
+            {enabledTitle}{#if showCount}
+                ({coupons.length}){/if}
+        </div>
+        <div
+            class="smu-coupon-list__tab {activeTab === 1
+                ? 'smu-coupon-list__tab--active'
+                : ''}"
+            onclick={() => (activeTab = 1)}
+        >
+            {disabledTitle}{#if showCount}
+                ({disabledCoupons.length}){/if}
+        </div>
+    </div>
+
+    <div class="smu-coupon-list__content">
+        {#if activeTab === 0}
+            {#if coupons.length > 0}
+                {#each coupons as coupon, i}
+                    <CouponCell
+                        {...coupon}
+                        {currency}
+                        chosen={chosenCoupon === i}
+                        onclick={() => handleSelect(i)}
+                    />
+                {/each}
+            {:else}
+                <div class="smu-coupon-list__empty">暂无可用优惠券</div>
+            {/if}
+        {:else if disabledCoupons.length > 0}
+            {#each disabledCoupons as coupon}
+                <CouponCell {...coupon} {currency} disabled />
+            {/each}
+        {:else}
+            <div class="smu-coupon-list__empty">暂无不可用优惠券</div>
+        {/if}
+    </div>
+
+    {#if showCloseButton}
+        <div class="smu-coupon-list__close" onclick={() => onchange?.(-1)}>
+            {closeButtonText}
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .smu-coupon-list {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background: var(--smu-background);
+
+        &__exchange {
+            display: flex;
+            align-items: center;
+            padding: 8px var(--smu-padding-md);
+            background: var(--smu-background-2);
+        }
+
+        &__input {
+            flex: 1;
+            height: 32px;
+            padding: 0 8px;
+            border: 1px solid var(--smu-border-color);
+            border-radius: var(--smu-radius-sm);
+            font-size: var(--smu-font-size-md);
+            outline: none;
+        }
+
+        &__exchange-btn {
+            margin-left: 8px;
+            padding: 0 16px;
+            height: 32px;
+            color: var(--smu-white);
+            background: var(--smu-primary-color);
+            border: none;
+            border-radius: var(--smu-radius-sm);
+            font-size: var(--smu-font-size-sm);
+            cursor: pointer;
+
+            &:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+        }
+
+        &__tabs {
+            display: flex;
+            background: var(--smu-background-2);
+        }
+
+        &__tab {
+            flex: 1;
+            padding: 12px 0;
+            text-align: center;
+            font-size: var(--smu-font-size-md);
+            color: var(--smu-gray-6);
+            cursor: pointer;
+
+            &--active {
+                color: var(--smu-text-color);
+                font-weight: var(--smu-font-bold);
+                border-bottom: 2px solid var(--smu-primary-color);
+            }
+        }
+
+        &__content {
+            flex: 1;
+            overflow-y: auto;
+            padding: var(--smu-padding-sm) 0;
+            background: var(--smu-background-2);
+        }
+
+        &__empty {
+            padding: 60px 0;
+            text-align: center;
+            color: var(--smu-gray-6);
+            font-size: var(--smu-font-size-md);
+        }
+
+        &__close {
+            padding: 12px 0;
+            text-align: center;
+            color: var(--smu-text-color);
+            font-size: var(--smu-font-size-md);
+            font-weight: var(--smu-font-bold);
+            background: var(--smu-background-2);
+            cursor: pointer;
+            border-top: 1px solid var(--smu-border-color);
+
+            &:active {
+                background: var(--smu-active-color);
+            }
+        }
+    }
+</style>

package/components/Coupon/index.ts

@@ -0,0 +1,3 @@
+export { default as Coupon } from './Coupon.svelte'
+export { default as CouponCell } from './CouponCell.svelte'
+export { default as CouponList } from './CouponList.svelte'

package/components/DatePicker/DatePicker.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let {
+    children,
+    class: className = '',
+    ...restProps
+  }: {
+    children?: Snippet
+    class?: string
+    [key: string]: any
+  } = $props()
+</script>
+
+<div class="smu-datepicker {className}">
+  {#if children}{@render children()}{/if}
+</div>
+
+<style lang="scss">
+  .smu-datepicker {
+    position: relative;
+  }
+</style>

package/components/DatePicker/index.ts

@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker.svelte'