svelte-mobile-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 free-walk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,173 @@
+# svelte-mobile-ui
+
+基于 Svelte 5 的移动端 UI 组件库，提供 80+ 高质量组件。
+
+## 特性
+
+- 🎯 **80+ 组件** — 覆盖移动端开发常用场景
+- ⚡ **Svelte 5** — 基于 Svelte 5 Runes 模式，性能优异
+- 📦 **按需引入** — 支持全量引入和按需引入
+- 🌐 **CDN 支持** — 提供 IIFE 格式，可直接通过 CDN 使用
+- 🎨 **主题定制** — 基于 CSS 变量，轻松定制主题
+- 📱 **移动端优先** — 专为移动端设计，触控友好
+
+## 安装
+
+```bash
+npm install svelte-mobile-ui
+```
+
+## 快速开始
+
+### ES Module 引入
+
+```ts
+import { Button, Cell, Icon } from 'svelte-mobile-ui'
+import 'svelte-mobile-ui/dist/styles.css'
+```
+
+### 按需引入
+
+```ts
+import { Button } from 'svelte-mobile-ui/components/Button'
+```
+
+### CDN 引入
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/svelte-mobile-ui/dist/styles.css" />
+<script src="https://unpkg.com/svelte-mobile-ui/dist/svelte-mobile-ui.iife.js"></script>
+<script>
+  const { Button, Cell } = SvelteMobileUI
+</script>
+```
+
+## 组件列表
+
+### 基础组件
+- `Button` — 按钮
+- `Cell` / `CellGroup` — 单元格
+- `Icon` — 图标
+- `ImageComp` — 图片
+- `Popup` — 弹出层
+- `Overlay` — 遮罩层
+- `Toast` — 轻提示
+- `ConfigProvider` — 全局配置
+
+### 表单组件
+- `Calendar` — 日历
+- `Cascader` — 级联选择
+- `Checkbox` / `CheckboxGroup` — 复选框
+- `DatePicker` — 日期选择
+- `Field` — 输入框
+- `Form` — 表单
+- `NumberKeyboard` — 数字键盘
+- `PasswordInput` — 密码输入框
+- `Picker` / `PickerGroup` — 选择器
+- `Radio` / `RadioGroup` — 单选
+- `Rate` — 评分
+- `Search` — 搜索
+- `Slider` — 滑块
+- `Stepper` — 步进器
+- `Switch` — 开关
+- `TimePicker` — 时间选择
+- `Uploader` — 文件上传
+
+### 反馈组件
+- `ActionSheet` — 动作面板
+- `Dialog` — 弹出框
+- `Loading` — 加载
+- `Notify` — 消息提示
+- `Popover` — 气泡弹出框
+- `PullRefresh` — 下拉刷新
+- `ShareSheet` — 分享面板
+- `SwipeCell` — 滑动单元格
+- `FloatingPanel` — 浮动面板
+- `FloatingBubble` — 浮动气泡
+
+### 展示组件
+- `Badge` — 徽标
+- `Circle` — 环形进度条
+- `Collapse` / `CollapseItem` — 折叠面板
+- `CountDown` — 倒计时
+- `Divider` — 分割线
+- `Empty` — 空状态
+- `Highlight` — 高亮文本
+- `ImagePreview` — 图片预览
+- `NoticeBar` — 通知栏
+- `Progress` — 进度条
+- `Skeleton` — 骨架屏
+- `Steps` / `Step` — 步骤条
+- `Swipe` / `SwipeItem` — 轮播
+- `Tag` — 标签
+- `TextEllipsis` — 文本省略
+- `Watermark` — 水印
+- `Barrage` — 弹幕
+- `RollingText` — 翻滚文本
+- `List` — 列表
+
+### 导航组件
+- `ActionBar` — 动作栏
+- `BackTop` — 回到顶部
+- `Grid` / `GridItem` — 宫格
+- `IndexBar` / `IndexAnchor` — 索引栏
+- `NavBar` — 导航栏
+- `Pagination` — 分页
+- `Sidebar` / `SidebarItem` — 侧边导航
+- `Sticky` — 粘性布局
+- `Tabs` / `Tab` — 标签页
+- `Tabbar` / `TabbarItem` — 标签栏
+- `TreeSelect` — 分类选择
+
+### 布局组件
+- `Col` — 列
+- `Row` — 行
+- `Space` — 间距
+
+### 业务组件
+- `AddressEdit` — 地址编辑
+- `AddressList` — 地址列表
+- `Area` — 省市区选择
+- `Card` — 商品卡片
+- `ContactCard` — 联系人卡片
+- `ContactEdit` — 联系人编辑
+- `ContactList` — 联系人列表
+- `Coupon` / `CouponCell` / `CouponList` — 优惠券
+- `Signature` — 签名
+- `SubmitBar` — 提交订单栏
+- `DropdownMenu` / `DropdownItem` — 下拉菜单
+
+## 主题定制
+
+通过 CSS 变量定制主题：
+
+```css
+:root {
+  --smu-primary-color: #1989fa;
+  --smu-success-color: #07c160;
+  --smu-warning-color: #ff976a;
+  --smu-danger-color: #ee0a24;
+}
+```
+
+或使用 `ConfigProvider` 组件：
+
+```svelte
+<ConfigProvider theme={{ primaryColor: '#1989fa' }}>
+  <Button type="primary">主题按钮</Button>
+</ConfigProvider>
+```
+
+## 兼容性
+
+| 格式 | 文件 | 用途 |
+|---|---|---|
+| ESM | `dist/svelte-mobile-ui.mjs` | `import` 语法 |
+| CJS | `dist/svelte-mobile-ui.cjs` | `require()` 语法 |
+| IIFE | `dist/svelte-mobile-ui.iife.js` | CDN / `<script>` 标签 |
+| CSS | `dist/styles.css` | 全局样式 |
+| Svelte 源码 | `index.ts` | Svelte 项目直接引用 |
+
+## License
+
+MIT

package/components/ActionBar/ActionBar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    let {
+        children,
+        class: className = "",
+    }: {
+        children?: Snippet;
+        class?: string;
+    } = $props();
+</script>
+
+<div class="smu-action-bar {className}">
+    {#if children}{@render children()}{/if}
+</div>
+
+<style lang="scss">
+    .smu-action-bar {
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 0 var(--smu-padding-md);
+        height: 50px;
+        background: var(--smu-background-2);
+        z-index: var(--smu-action-bar-z-index, 100);
+    }
+</style>

package/components/ActionBar/ActionBarButton.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    let {
+        text = "",
+        type = "danger",
+        color = "",
+        icon = "",
+        loading = false,
+        disabled = false,
+        url = "",
+        onclick,
+        children,
+        class: className = "",
+    }: {
+        text?: string;
+        type?: "default" | "primary" | "warning" | "danger";
+        color?: string;
+        icon?: string;
+        loading?: boolean;
+        disabled?: boolean;
+        url?: string;
+        onclick?: (e: MouseEvent) => void;
+        children?: Snippet;
+        class?: string;
+    } = $props();
+
+    function handleClick(e: MouseEvent) {
+        if (loading || disabled) return;
+        onclick?.(e);
+        if (url) window.location.href = url;
+    }
+</script>
+
+<button
+    class="smu-action-bar-button smu-action-bar-button--{type} {loading
+        ? 'smu-action-bar-button--loading'
+        : ''} {className}"
+    style={color ? `background: ${color}; border-color: ${color}` : ""}
+    disabled={disabled || loading}
+    onclick={handleClick}
+>
+    {#if loading}
+        <span class="smu-action-bar-button__loading"></span>
+    {/if}
+    {#if children}{@render children()}{:else}{text}{/if}
+</button>
+
+<style lang="scss">
+    .smu-action-bar-button {
+        flex: 1;
+        height: 40px;
+        font-size: var(--smu-font-size-md);
+        font-weight: var(--smu-font-bold);
+        border: none;
+        border-radius: var(--smu-radius-max);
+        cursor: pointer;
+        color: var(--smu-white);
+
+        &:not(:first-child) {
+            margin-left: 8px;
+        }
+
+        &--danger {
+            background: var(--smu-danger-color);
+        }
+        &--warning {
+            background: var(--smu-warning-color);
+        }
+        &--primary {
+            background: var(--smu-primary-color);
+        }
+        &--default {
+            background: var(--smu-white);
+            color: var(--smu-text-color);
+            border: 1px solid var(--smu-border-color);
+        }
+
+        &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        &:active:not(:disabled) {
+            opacity: 0.8;
+        }
+
+        &__loading {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 2px solid currentColor;
+            border-top-color: transparent;
+            border-radius: 50%;
+            animation: smu-rotate 0.8s linear infinite;
+            margin-right: 4px;
+            vertical-align: middle;
+        }
+    }
+
+    @keyframes smu-rotate {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+</style>

package/components/ActionBar/ActionBarIcon.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import Icon from "../Icon/Icon.svelte";
+
+    let {
+        text = "",
+        icon = "",
+        color = "",
+        dot = false,
+        badge = "",
+        url = "",
+        onclick,
+        iconSlot,
+        class: className = "",
+    }: {
+        text?: string;
+        icon?: string;
+        color?: string;
+        dot?: boolean;
+        badge?: string | number;
+        url?: string;
+        onclick?: (e: MouseEvent) => void;
+        iconSlot?: Snippet;
+        class?: string;
+    } = $props();
+
+    function handleClick(e: MouseEvent) {
+        onclick?.(e);
+        if (url) window.location.href = url;
+    }
+</script>
+
+<div
+    class="smu-action-bar-icon {className}"
+    role="button"
+    tabindex="0"
+    onclick={handleClick}
+>
+    <div class="smu-action-bar-icon__icon">
+        {#if iconSlot}
+            {@render iconSlot()}
+        {:else if icon}
+            <Icon name={icon} {color} />
+        {/if}
+        {#if dot}<div class="smu-action-bar-icon__dot"></div>{/if}
+        {#if badge}<div class="smu-action-bar-icon__badge">{badge}</div>{/if}
+    </div>
+    {#if text}<span class="smu-action-bar-icon__text">{text}</span>{/if}
+</div>
+
+<style lang="scss">
+    .smu-action-bar-icon {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-width: 48px;
+        height: 100%;
+        color: var(--smu-text-color);
+        font-size: var(--smu-font-size-xs);
+        cursor: pointer;
+
+        &:active {
+            opacity: 0.7;
+        }
+
+        &__icon {
+            position: relative;
+            font-size: 18px;
+        }
+
+        &__text {
+            margin-top: 4px;
+        }
+
+        &__dot {
+            position: absolute;
+            top: -4px;
+            right: -4px;
+            width: 8px;
+            height: 8px;
+            background: var(--smu-danger-color);
+            border-radius: 50%;
+        }
+
+        &__badge {
+            position: absolute;
+            top: -6px;
+            right: -8px;
+            min-width: 16px;
+            padding: 0 3px;
+            color: var(--smu-white);
+            font-size: 10px;
+            line-height: 14px;
+            text-align: center;
+            background: var(--smu-danger-color);
+            border-radius: var(--smu-radius-max);
+        }
+    }
+</style>

package/components/ActionBar/index.ts

@@ -0,0 +1,3 @@
+export { default as ActionBar } from './ActionBar.svelte'
+export { default as ActionBarButton } from './ActionBarButton.svelte'
+export { default as ActionBarIcon } from './ActionBarIcon.svelte'

package/components/ActionSheet/ActionSheet.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import Popup from '../Popup/Popup.svelte'
+  import Loading from '../Loading/Loading.svelte'
+  import Icon from '../Icon/Icon.svelte'
+  import type { Snippet } from 'svelte'
+
+  let {
+    show = $bindable(false),
+    title = '',
+    description = '',
+    cancelText = '',
+    closeable = true,
+    closeIcon = 'cross',
+    round = true,
+    safeAreaInsetBottom = true,
+    actions = [],
+    onSelect,
+    onCancel,
+    onclose,
+    children,
+    class: className = '',
+  }: {
+    show?: boolean
+    title?: string
+    description?: string
+    cancelText?: string
+    closeable?: boolean
+    closeIcon?: string
+    round?: boolean
+    safeAreaInsetBottom?: boolean
+    actions?: Array<{ name: string; subname?: string; color?: string; loading?: boolean; disabled?: boolean; className?: string }>
+    onSelect?: (action: any, index: number) => void
+    onCancel?: () => void
+    onclose?: () => void
+    children?: Snippet
+    class?: string
+  } = $props()
+
+  function handleClose() { show = false; onclose?.() }
+</script>
+
+<Popup bind:show position="bottom" {round} {closeable} closeIcon={title ? closeIcon : ''} {safeAreaInsetBottom} onclose={handleClose}>
+  <div class="smu-action-sheet {className}">
+    {#if title}
+      <div class="smu-action-sheet__header">{title}</div>
+    {/if}
+    {#if description}
+      <div class="smu-action-sheet__description">{description}</div>
+    {/if}
+    {#if children}
+      <div class="smu-action-sheet__content">{@render children()}</div>
+    {:else}
+      {#each actions as action, i}
+        <button
+          class="smu-action-sheet__item {action.disabled ? 'smu-action-sheet__item--disabled' : ''} {action.className || ''}"
+          style="{action.color ? `color: ${action.color}` : ''}"
+          disabled={action.disabled || action.loading}
+          onclick={() => { if (!action.disabled && !action.loading) { onSelect?.(action, i); show = false } }}
+          type="button"
+        >
+          {#if action.loading}
+            <Loading size="20px" />
+          {:else}
+            <span class="smu-action-sheet__name">{action.name}</span>
+            {#if action.subname}<div class="smu-action-sheet__subname">{action.subname}</div>{/if}
+          {/if}
+        </button>
+      {/each}
+    {/if}
+    {#if cancelText}
+      <div class="smu-action-sheet__gap"></div>
+      <button class="smu-action-sheet__cancel" onclick={() => { show = false; onCancel?.() }} type="button">{cancelText}</button>
+    {/if}
+  </div>
+</Popup>
+
+<style lang="scss">
+  .smu-action-sheet {
+    max-height: 80vh;
+    overflow-y: auto;
+    color: var(--smu-text-color);
+
+    &__header {
+      padding: 12px 16px;
+      font-weight: var(--smu-font-bold);
+      font-size: var(--smu-font-size-lg);
+      line-height: var(--smu-line-height-lg);
+      text-align: center;
+    }
+
+    &__description {
+      padding: 12px 16px;
+      color: var(--smu-text-color-2);
+      font-size: var(--smu-font-size-md);
+      line-height: var(--smu-line-height-md);
+      text-align: center;
+    }
+
+    &__item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      padding: 14px 16px;
+      font-size: var(--smu-font-size-lg);
+      background: var(--smu-background-2);
+      border: none;
+      cursor: pointer;
+
+      &:active { background: var(--smu-active-color); }
+      &--disabled { color: var(--smu-gray-5); cursor: not-allowed; &:active { background: var(--smu-background-2); } }
+    }
+
+    &__subname {
+      margin-top: var(--smu-padding-xs);
+      color: var(--smu-text-color-2);
+      font-size: var(--smu-font-size-sm);
+    }
+
+    &__gap { display: block; height: 8px; background: var(--smu-background); }
+
+    &__cancel {
+      display: block;
+      width: 100%;
+      padding: 14px;
+      font-size: var(--smu-font-size-lg);
+      background: var(--smu-background-2);
+      border: none;
+      cursor: pointer;
+      &:active { background: var(--smu-active-color); }
+    }
+  }
+</style>

package/components/ActionSheet/index.ts

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

package/components/AddressEdit/AddressEdit.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-addressedit {className}">
+  {#if children}{@render children()}{/if}
+</div>
+
+<style lang="scss">
+  .smu-addressedit {
+    position: relative;
+  }
+</style>

package/components/AddressEdit/index.ts

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

package/components/AddressList/AddressList.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-addresslist {className}">
+  {#if children}{@render children()}{/if}
+</div>
+
+<style lang="scss">
+  .smu-addresslist {
+    position: relative;
+  }
+</style>

package/components/AddressList/index.ts

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

package/components/Area/Area.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-area {className}">
+  {#if children}{@render children()}{/if}
+</div>
+
+<style lang="scss">
+  .smu-area {
+    position: relative;
+  }
+</style>

package/components/Area/index.ts

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

package/components/BackTop/BackTop.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-backtop {className}">
+  {#if children}{@render children()}{/if}
+</div>
+
+<style lang="scss">
+  .smu-backtop {
+    position: relative;
+  }
+</style>

package/components/BackTop/index.ts

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