svelte-mobile-ui 1.0.0

package/components/Badge/Badge.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let {
+    content = '',
+    color = '',
+    dot = false,
+    max = 0,
+    showZero = true,
+    offset,
+    children,
+    class: className = '',
+  }: {
+    content?: string | number
+    color?: string
+    dot?: boolean
+    max?: number
+    showZero?: boolean
+    offset?: [number, number]
+    children?: Snippet
+    class?: string
+  } = $props()
+
+  const displayContent = $derived(() => {
+    if (dot) return ''
+    if (typeof content === 'number' && max > 0 && content > max) return max + '+'
+    if (content === 0 && !showZero) return ''
+    return String(content ?? '')
+  })
+
+  const badgeStyle = $derived([
+    color ? `background: ${color}` : '',
+    offset ? `transform: translate(${offset[0]}px, ${offset[1]}px)` : '',
+  ].filter(Boolean).join('; '))
+</script>
+
+<div class="smu-badge__wrapper {className}">
+  {#if children}{@render children()}{/if}
+  {#if dot || displayContent()}
+    <div class="smu-badge {dot ? 'smu-badge--dot' : ''} {!children ? 'smu-badge--fixed' : ''}" style={badgeStyle}>
+      {#if !dot}{displayContent()}{/if}
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .smu-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 16px;
+    padding: 0 3px;
+    color: var(--smu-white);
+    font-size: var(--smu-font-size-xs);
+    font-weight: var(--smu-font-bold);
+    line-height: 14px;
+    text-align: center;
+    background: var(--smu-danger-color);
+    border: 1px solid var(--smu-white);
+    border-radius: var(--smu-radius-max);
+
+    &__wrapper {
+      position: relative;
+      display: inline-block;
+    }
+
+    &--dot {
+      width: 8px;
+      min-width: 0;
+      height: 8px;
+      padding: 0;
+      border-radius: 50%;
+    }
+
+    &--fixed:not(.smu-badge--dot) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translate(50%, -50%);
+    }
+
+    &--dot.smu-badge--fixed {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translate(50%, -50%);
+    }
+  }
+</style>

package/components/Badge/index.ts

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

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

package/components/Barrage/index.ts

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

package/components/Button/Button.svelte

@@ -0,0 +1,297 @@
+<script lang="ts">
+    /**
+     * Button 按钮组件
+     * 支持多种类型、尺寸、形状
+     */
+    import Icon from "../Icon/Icon.svelte";
+    import Loading from "../Loading/Loading.svelte";
+    import type { Snippet } from "svelte";
+
+    let {
+        type = "default",
+        size = "normal",
+        text = "",
+        icon = "",
+        color = "",
+        block = false,
+        plain = false,
+        round = false,
+        square = false,
+        loading = false,
+        loadingText = "",
+        loadingSize = "20px",
+        loadingType = "circular",
+        disabled = false,
+        hairline = false,
+        iconPosition = "left",
+        nativeType = "button",
+        onclick,
+        children,
+        class: className = "",
+    }: {
+        type?: "default" | "primary" | "success" | "warning" | "danger";
+        size?: "large" | "normal" | "small" | "mini";
+        text?: string;
+        icon?: string;
+        color?: string;
+        block?: boolean;
+        plain?: boolean;
+        round?: boolean;
+        square?: boolean;
+        loading?: boolean;
+        loadingText?: string;
+        loadingSize?: string;
+        loadingType?: "circular" | "spinner";
+        disabled?: boolean;
+        hairline?: boolean;
+        iconPosition?: "left" | "right";
+        nativeType?: "button" | "submit" | "reset";
+        onclick?: (e: MouseEvent) => void;
+        children?: Snippet;
+        class?: string;
+    } = $props();
+
+    const classes = $derived(
+        [
+            "smu-button",
+            `smu-button--${type}`,
+            `smu-button--${size}`,
+            plain && "smu-button--plain",
+            block && "smu-button--block",
+            round && "smu-button--round",
+            square && "smu-button--square",
+            loading && "smu-button--loading",
+            disabled && "smu-button--disabled",
+            hairline && "smu-hairline--surround",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "),
+    );
+
+    const customStyle = $derived(() => {
+        if (!color) return "";
+        const s: string[] = [];
+        if (plain) {
+            s.push(`color: ${color}`);
+            s.push(`border-color: ${color}`);
+        } else {
+            s.push(`color: white`);
+            s.push(`background: ${color}`);
+            if (!color.includes("gradient")) s.push(`border-color: ${color}`);
+            else s.push("border: 0");
+        }
+        return s.join("; ");
+    });
+
+    function handleClick(e: MouseEvent) {
+        if (!loading && !disabled && onclick) onclick(e);
+    }
+</script>
+
+<button
+    type={nativeType}
+    class={classes}
+    style={customStyle()}
+    {disabled}
+    onclick={handleClick}
+>
+    <div class="smu-button__content">
+        {#if loading}
+            {#if iconPosition === "left"}
+                <Loading
+                    size={loadingSize}
+                    type={loadingType}
+                    class="smu-button__loading"
+                />
+            {/if}
+            <span class="smu-button__text"
+                >{loadingText ||
+                    text ||
+                    ""}{#if children && !loadingText}{@render children()}{/if}</span
+            >
+            {#if iconPosition === "right"}
+                <Loading
+                    size={loadingSize}
+                    type={loadingType}
+                    class="smu-button__loading"
+                />
+            {/if}
+        {:else}
+            {#if icon && iconPosition === "left"}
+                <Icon name={icon} class="smu-button__icon" />
+            {/if}
+            {#if text || children}
+                <span class="smu-button__text"
+                    >{text}{#if children}{@render children()}{/if}</span
+                >
+            {/if}
+            {#if icon && iconPosition === "right"}
+                <Icon name={icon} class="smu-button__icon" />
+            {/if}
+        {/if}
+    </div>
+</button>
+
+<style lang="scss">
+    .smu-button {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        height: 44px;
+        margin: 0;
+        padding: 0 15px;
+        font-size: var(--smu-font-size-lg);
+        line-height: 1.2;
+        text-align: center;
+        border-radius: var(--smu-radius-md);
+        cursor: pointer;
+        border: 1px solid transparent;
+        transition: opacity var(--smu-duration-fast);
+        -webkit-appearance: none;
+        -webkit-font-smoothing: auto;
+
+        &::before {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            height: 100%;
+            background: var(--smu-black);
+            border: inherit;
+            border-color: var(--smu-black);
+            border-radius: inherit;
+            transform: translate(-50%, -50%);
+            opacity: 0;
+            content: "";
+        }
+
+        &:active::before {
+            opacity: 0.1;
+        }
+
+        &__content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+        }
+
+        &__text {
+            display: inline;
+        }
+
+        &__icon {
+            font-size: 1.2em;
+            line-height: inherit;
+        }
+
+        &__icon + &__text,
+        &__loading + &__text,
+        &__text + &__icon,
+        &__text + &__loading {
+            margin-left: 4px;
+        }
+
+        // ========== 类型 ==========
+        &--default {
+            color: var(--smu-text-color);
+            background: var(--smu-white);
+            border-color: var(--smu-border-color);
+        }
+
+        &--primary {
+            color: var(--smu-white);
+            background: var(--smu-primary-color);
+            border-color: var(--smu-primary-color);
+        }
+
+        &--success {
+            color: var(--smu-white);
+            background: var(--smu-success-color);
+            border-color: var(--smu-success-color);
+        }
+
+        &--warning {
+            color: var(--smu-white);
+            background: var(--smu-warning-color);
+            border-color: var(--smu-warning-color);
+        }
+
+        &--danger {
+            color: var(--smu-white);
+            background: var(--smu-danger-color);
+            border-color: var(--smu-danger-color);
+        }
+
+        // ========== 朴素 ==========
+        &--plain {
+            background: var(--smu-white);
+
+            &.smu-button--primary {
+                color: var(--smu-primary-color);
+            }
+            &.smu-button--success {
+                color: var(--smu-success-color);
+            }
+            &.smu-button--warning {
+                color: var(--smu-warning-color);
+            }
+            &.smu-button--danger {
+                color: var(--smu-danger-color);
+            }
+        }
+
+        // ========== 尺寸 ==========
+        &--large {
+            width: 100%;
+            height: 50px;
+        }
+
+        &--small {
+            height: 32px;
+            padding: 0 8px;
+            font-size: var(--smu-font-size-sm);
+        }
+
+        &--mini {
+            height: 24px;
+            padding: 0 4px;
+            font-size: var(--smu-font-size-xs);
+        }
+
+        // ========== 形状 ==========
+        &--round {
+            border-radius: var(--smu-radius-max);
+        }
+
+        &--square {
+            border-radius: 0;
+        }
+
+        &--block {
+            display: flex;
+            width: 100%;
+        }
+
+        // ========== 状态 ==========
+        &--disabled {
+            cursor: not-allowed;
+            opacity: var(--smu-disabled-opacity);
+
+            &:active::before {
+                opacity: 0;
+            }
+        }
+
+        &--loading {
+            cursor: default;
+
+            &:active::before {
+                opacity: 0;
+            }
+        }
+    }
+</style>

package/components/Button/index.ts

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

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

package/components/Calendar/index.ts

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

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

package/components/Card/index.ts

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

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

package/components/Cascader/index.ts

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

package/components/Cell/Cell.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+  import Icon from '../Icon/Icon.svelte'
+  import type { Snippet } from 'svelte'
+
+  let {
+    title = '',
+    value = '',
+    label = '',
+    icon = '',
+    size = '',
+    border = true,
+    center = false,
+    isLink = false,
+    required = false,
+    arrowDirection = 'right',
+    clickable = false,
+    titleClass = '',
+    valueClass = '',
+    labelClass = '',
+    onclick,
+    children,
+    titleSlot,
+    class: className = '',
+  }: {
+    title?: string
+    value?: string | number
+    label?: string
+    icon?: string
+    size?: '' | 'large'
+    border?: boolean
+    center?: boolean
+    isLink?: boolean
+    required?: boolean
+    arrowDirection?: 'up' | 'down' | 'left' | 'right'
+    clickable?: boolean | null
+    titleClass?: string
+    valueClass?: string
+    labelClass?: string
+    onclick?: (e: MouseEvent) => void
+    children?: Snippet
+    titleSlot?: Snippet
+    class?: string
+  } = $props()
+
+  const isClickable = $derived(clickable ?? isLink)
+</script>
+
+<div
+  class="smu-cell {size ? `smu-cell--${size}` : ''} {center ? 'smu-cell--center' : ''} {required ? 'smu-cell--required' : ''} {border ? 'smu-cell--border' : ''} {isClickable ? 'smu-cell--clickable' : ''} {className}"
+  role={isClickable ? 'button' : undefined}
+  tabindex={isClickable ? 0 : undefined}
+  onclick={onclick}
+>
+  {#if icon}
+    <Icon name={icon} class="smu-cell__left-icon" />
+  {/if}
+  <div class="smu-cell__title {titleClass}">
+    {#if titleSlot}{@render titleSlot()}{:else}{title}{/if}
+    {#if label}<div class="smu-cell__label {labelClass}">{label}</div>{/if}
+  </div>
+  <div class="smu-cell__value {valueClass}">
+    {#if children}{@render children()}{:else}{value}{/if}
+  </div>
+  {#if isLink}
+    <Icon name="arrow" class="smu-cell__right-icon smu-cell__right-icon--{arrowDirection}" />
+  {/if}
+</div>
+
+<style lang="scss">
+  .smu-cell {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 10px 16px;
+    overflow: hidden;
+    color: var(--smu-text-color);
+    font-size: var(--smu-font-size-md);
+    line-height: 24px;
+    background: var(--smu-background-2);
+
+    &--border::after {
+      position: absolute;
+      box-sizing: border-box;
+      content: '';
+      pointer-events: none;
+      right: 16px;
+      bottom: 0;
+      left: 16px;
+      border-bottom: 1px solid var(--smu-border-color);
+      transform: scaleY(0.5);
+    }
+
+    &--center { align-items: center; }
+
+    &--required::before {
+      position: absolute;
+      left: 8px;
+      color: var(--smu-danger-color);
+      font-size: var(--smu-font-size-md);
+      content: '*';
+    }
+
+    &--clickable {
+      cursor: pointer;
+      &:active { background: var(--smu-active-color); }
+    }
+
+    &--large {
+      padding-top: 12px;
+      padding-bottom: 12px;
+
+      .smu-cell__title { font-size: var(--smu-font-size-lg); }
+      .smu-cell__label { font-size: var(--smu-font-size-md); }
+    }
+
+    &__left-icon {
+      margin-right: 4px;
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    &__right-icon {
+      margin-left: 4px;
+      color: var(--smu-gray-6);
+      font-size: 16px;
+      line-height: 24px;
+      flex-shrink: 0;
+
+      &--up { transform: rotate(90deg); }
+      &--down { transform: rotate(-90deg); }
+      &--left { transform: rotate(0deg); }
+    }
+
+    &__title {
+      flex: 1;
+    }
+
+    &__value {
+      position: relative;
+      overflow: hidden;
+      color: var(--smu-gray-6);
+      text-align: right;
+      vertical-align: middle;
+      word-wrap: break-word;
+    }
+
+    &__label {
+      margin-top: 4px;
+      color: var(--smu-gray-6);
+      font-size: var(--smu-font-size-sm);
+      line-height: var(--smu-line-height-sm);
+    }
+  }
+</style>

package/components/Cell/index.ts

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

package/components/CellGroup/CellGroup.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let {
+    title = '',
+    inset = false,
+    border = true,
+    children,
+    class: className = '',
+  }: {
+    title?: string
+    inset?: boolean
+    border?: boolean
+    children?: Snippet
+    class?: string
+  } = $props()
+</script>
+
+{#if title}
+  <div class="smu-cell-group__title {inset ? 'smu-cell-group__title--inset' : ''}">{title}</div>
+{/if}
+<div class="smu-cell-group {inset ? 'smu-cell-group--inset' : ''} {border ? 'smu-hairline--top-bottom' : ''} {className}">
+  {#if children}{@render children()}{/if}
+</div>
+
+<style lang="scss">
+  .smu-cell-group {
+    background: var(--smu-background-2);
+
+    &--inset {
+      margin: 0 var(--smu-padding-md);
+      border-radius: var(--smu-radius-lg);
+      overflow: hidden;
+    }
+
+    &__title {
+      padding: var(--smu-padding-md) var(--smu-padding-md) var(--smu-padding-xs);
+      color: var(--smu-text-color-2);
+      font-size: var(--smu-font-size-md);
+      line-height: var(--smu-line-height-md);
+
+      &--inset {
+        padding-left: calc(var(--smu-padding-md) * 2);
+      }
+    }
+  }
+</style>