svelte-mobile-ui 1.0.0

package/components/NoticeBar/NoticeBar.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import Icon from '../Icon/Icon.svelte'
+  import type { Snippet } from 'svelte'
+
+  let {
+    text = '',
+    mode = '',
+    color = '',
+    background = '',
+    leftIcon = '',
+    wrapable = false,
+    scrollable = true,
+    delay = 1,
+    speed = 60,
+    children,
+    onclick,
+    onclose,
+    class: className = '',
+  }: {
+    text?: string
+    mode?: '' | 'closeable' | 'link'
+    color?: string
+    background?: string
+    leftIcon?: string
+    wrapable?: boolean
+    scrollable?: boolean
+    delay?: number
+    speed?: number
+    children?: Snippet
+    onclick?: (e: MouseEvent) => void
+    onclose?: () => void
+    class?: string
+  } = $props()
+
+  let show = $state(true)
+
+  function handleClose(e: MouseEvent) {
+    e.stopPropagation()
+    show = false
+    onclose?.()
+  }
+</script>
+
+{#if show}
+  <div
+    class="smu-notice-bar {wrapable ? 'smu-notice-bar--wrapable' : ''} {className}"
+    style="{color ? `color: ${color}` : ''}; {background ? `background: ${background}` : ''}"
+    onclick={onclick}
+    role={mode === 'link' ? 'link' : undefined}
+  >
+    {#if leftIcon}
+      <Icon name={leftIcon} class="smu-notice-bar__left-icon" />
+    {/if}
+    <div class="smu-notice-bar__wrap">
+      <div class="smu-notice-bar__content {scrollable && !wrapable ? 'smu-notice-bar__content--scrollable' : ''}" style={scrollable && !wrapable ? `animation-delay: ${delay}s; animation-duration: ${text.length / speed * 10}s` : ''}>
+        {#if children}{@render children()}{:else}{text}{/if}
+      </div>
+    </div>
+    {#if mode === 'closeable'}
+      <Icon name="cross" class="smu-notice-bar__right-icon" onclick={handleClose} />
+    {:else if mode === 'link'}
+      <Icon name="arrow" class="smu-notice-bar__right-icon" />
+    {/if}
+  </div>
+{/if}
+
+<style lang="scss">
+  .smu-notice-bar {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 40px;
+    padding: 0 var(--smu-padding-md);
+    color: #ed6a0c;
+    font-size: var(--smu-font-size-md);
+    line-height: 24px;
+    background: #fffbe8;
+
+    &--wrapable {
+      height: auto;
+      padding: var(--smu-padding-xs) var(--smu-padding-md);
+
+      .smu-notice-bar__wrap { height: auto; }
+      .smu-notice-bar__content { position: relative; white-space: normal; word-wrap: break-word; }
+    }
+
+    &__left-icon {
+      min-width: 24px;
+      font-size: 16px;
+      margin-right: 4px;
+    }
+
+    &__right-icon {
+      min-width: 24px;
+      font-size: 16px;
+      margin-left: 4px;
+      cursor: pointer;
+    }
+
+    &__wrap {
+      position: relative;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    &__content {
+      position: absolute;
+      white-space: nowrap;
+
+      &--scrollable {
+        animation: smu-notice-scroll linear infinite;
+      }
+    }
+  }
+
+  @keyframes smu-notice-scroll {
+    0% { transform: translateX(100%); }
+    100% { transform: translateX(-100%); }
+  }
+</style>

package/components/NoticeBar/index.ts

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

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

package/components/Notify/index.ts

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

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

package/components/NumberKeyboard/index.ts

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

package/components/Overlay/Overlay.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  let {
+    show = false,
+    zIndex = 1,
+    duration = 0.3,
+    lockScroll = true,
+    customStyle = '',
+    onclick,
+    class: className = '',
+  }: {
+    show?: boolean
+    zIndex?: number
+    duration?: number
+    lockScroll?: boolean
+    customStyle?: string
+    onclick?: (e: MouseEvent) => void
+    class?: string
+  } = $props()
+</script>
+
+{#if show}
+  <div
+    class="smu-overlay {className}"
+    style="z-index: {zIndex}; animation-duration: {duration}s; {customStyle}"
+    onclick={onclick}
+    role="presentation"
+  ></div>
+{/if}
+
+<style lang="scss">
+  .smu-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    animation: smu-fade-in var(--smu-duration-base);
+  }
+
+  @keyframes smu-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+</style>

package/components/Overlay/index.ts

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

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

package/components/Pagination/index.ts

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

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

package/components/PasswordInput/index.ts

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

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

package/components/Picker/index.ts

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

package/components/PickerGroup/PickerGroup.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    let {
+        title = "",
+        nextStepText = "下一步",
+        tabs = [],
+        activeTab = $bindable(0),
+        children,
+        class: className = "",
+    }: {
+        title?: string;
+        nextStepText?: string;
+        tabs?: string[];
+        activeTab?: number;
+        children?: Snippet;
+        class?: string;
+    } = $props();
+
+    function handleNext() {
+        if (activeTab < tabs.length - 1) {
+            activeTab++;
+        }
+    }
+
+    function handlePrev() {
+        if (activeTab > 0) {
+            activeTab--;
+        }
+    }
+</script>
+
+<div class="smu-picker-group {className}">
+    {#if title || tabs.length > 0}
+        <div class="smu-picker-group__header">
+            {#if title}
+                <div class="smu-picker-group__title">{title}</div>
+            {/if}
+            {#if tabs.length > 0}
+                <div class="smu-picker-group__tabs">
+                    {#each tabs as tab, i}
+                        <div
+                            class="smu-picker-group__tab {i === activeTab
+                                ? 'smu-picker-group__tab--active'
+                                : ''}"
+                            onclick={() => (activeTab = i)}
+                        >
+                            {tab}
+                        </div>
+                    {/each}
+                </div>
+            {/if}
+        </div>
+    {/if}
+    <div class="smu-picker-group__content">
+        {#if children}{@render children()}{/if}
+    </div>
+</div>
+
+<style lang="scss">
+    .smu-picker-group {
+        background: var(--smu-background-2);
+
+        &__header {
+            padding: var(--smu-padding-md);
+        }
+
+        &__title {
+            text-align: center;
+            font-size: var(--smu-font-size-lg);
+            font-weight: var(--smu-font-bold);
+            line-height: 44px;
+        }
+
+        &__tabs {
+            display: flex;
+            border-bottom: 1px solid var(--smu-border-color);
+        }
+
+        &__tab {
+            flex: 1;
+            padding: 8px 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 {
+            position: relative;
+        }
+    }
+</style>

package/components/PickerGroup/index.ts

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

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

package/components/Popover/index.ts

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

package/components/Popup/Popup.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+  import Overlay from '../Overlay/Overlay.svelte'
+  import Icon from '../Icon/Icon.svelte'
+  import type { Snippet } from 'svelte'
+
+  let {
+    show = $bindable(false),
+    position = 'center',
+    round = false,
+    closeable = false,
+    closeIcon = 'cross',
+    closeIconPosition = 'top-right',
+    overlay = true,
+    lockScroll = true,
+    duration = 0.3,
+    safeAreaInsetBottom = false,
+    safeAreaInsetTop = false,
+    zIndex = 2000,
+    onclose,
+    children,
+    class: className = '',
+  }: {
+    show?: boolean
+    position?: 'top' | 'bottom' | 'left' | 'right' | 'center'
+    round?: boolean
+    closeable?: boolean
+    closeIcon?: string
+    closeIconPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+    overlay?: boolean
+    lockScroll?: boolean
+    duration?: number
+    safeAreaInsetBottom?: boolean
+    safeAreaInsetTop?: boolean
+    zIndex?: number
+    onclose?: () => void
+    children?: Snippet
+    class?: string
+  } = $props()
+
+  function close() {
+    show = false
+    onclose?.()
+  }
+</script>
+
+{#if show}
+  {#if overlay}
+    <Overlay {show} zIndex={zIndex} onclick={close} />
+  {/if}
+  <div
+    class="smu-popup smu-popup--{position} {round ? 'smu-popup--round' : ''} {safeAreaInsetBottom ? 'smu-safe-area-bottom' : ''} {safeAreaInsetTop ? 'smu-safe-area-top' : ''} {className}"
+    style="z-index: {zIndex}; animation-duration: {duration}s"
+    role="dialog"
+  >
+    {#if children}{@render children()}{/if}
+    {#if closeable}
+      <div class="smu-popup__close-icon smu-popup__close-icon--{closeIconPosition}" onclick={close} role="button" tabindex="0">
+        <Icon name={closeIcon} />
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style lang="scss">
+  .smu-popup {
+    position: fixed;
+    max-height: 100%;
+    overflow-y: auto;
+    background: var(--smu-background-2);
+    transition: transform var(--smu-duration-base);
+    -webkit-overflow-scrolling: touch;
+
+    &--center {
+      top: 50%;
+      left: 0;
+      right: 0;
+      width: fit-content;
+      max-width: calc(100vw - var(--smu-padding-md) * 2);
+      margin: 0 auto;
+      transform: translateY(-50%);
+      animation: smu-fade-in var(--smu-duration-base);
+    }
+
+    &--top {
+      top: 0;
+      left: 0;
+      width: 100%;
+      animation: smu-slide-top-in var(--smu-duration-base);
+    }
+
+    &--bottom {
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      animation: smu-slide-bottom-in var(--smu-duration-base);
+    }
+
+    &--left {
+      top: 0;
+      left: 0;
+      height: 100%;
+      animation: smu-slide-left-in var(--smu-duration-base);
+    }
+
+    &--right {
+      top: 0;
+      right: 0;
+      height: 100%;
+      animation: smu-slide-right-in var(--smu-duration-base);
+    }
+
+    &--round {
+      &.smu-popup--top { border-radius: 0 0 16px 16px; }
+      &.smu-popup--bottom { border-radius: 16px 16px 0 0; }
+      &.smu-popup--left { border-radius: 0 16px 16px 0; }
+      &.smu-popup--right { border-radius: 16px 0 0 16px; }
+      &.smu-popup--center { border-radius: 16px; }
+    }
+
+    &__close-icon {
+      position: absolute;
+      z-index: 1;
+      color: var(--smu-gray-5);
+      font-size: 22px;
+      cursor: pointer;
+
+      &--top-right { top: 16px; right: 16px; }
+      &--top-left { top: 16px; left: 16px; }
+      &--bottom-right { bottom: 16px; right: 16px; }
+      &--bottom-left { bottom: 16px; left: 16px; }
+    }
+  }
+
+  @keyframes smu-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes smu-slide-top-in {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+  }
+  @keyframes smu-slide-bottom-in {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  }
+  @keyframes smu-slide-left-in {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  }
+  @keyframes smu-slide-right-in {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+</style>

package/components/Popup/index.ts

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

package/components/Progress/Progress.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  let {
+    percentage = 0,
+    strokeWidth = 4,
+    color = '',
+    trackColor = '',
+    pivotText = '',
+    pivotColor = '',
+    textColor = '',
+    inactive = false,
+    showPivot = true,
+    class: className = '',
+  }: {
+    percentage?: number
+    strokeWidth?: number | string
+    color?: string
+    trackColor?: string
+    pivotText?: string
+    pivotColor?: string
+    textColor?: string
+    inactive?: boolean
+    showPivot?: boolean
+    class?: string
+  } = $props()
+
+  const bg = $derived(inactive ? 'var(--smu-gray-5)' : (color || 'var(--smu-primary-color)'))
+  const text = $derived(pivotText || `${percentage}%`)
+</script>
+
+<div class="smu-progress {className}">
+  <span
+    class="smu-progress__track"
+    style="height: {typeof strokeWidth === 'number' ? strokeWidth + 'px' : strokeWidth}; {trackColor ? `background: ${trackColor}` : ''}"
+  >
+    <span
+      class="smu-progress__portion"
+      style="width: {percentage}%; background: {bg}"
+    >
+      {#if showPivot}
+        <span
+          class="smu-progress__pivot"
+          style="color: {textColor || 'var(--smu-white)'}; background: {pivotColor || bg}"
+        >{text}</span>
+      {/if}
+    </span>
+  </span>
+</div>
+
+<style lang="scss">
+  .smu-progress {
+    position: relative;
+    height: 4px;
+    border-radius: var(--smu-radius-max);
+
+    &__track {
+      position: relative;
+      display: block;
+      width: 100%;
+      height: 100%;
+      background: var(--smu-gray-3);
+      border-radius: inherit;
+    }
+
+    &__portion {
+      position: absolute;
+      left: 0;
+      height: 100%;
+      background: var(--smu-primary-color);
+      border-radius: inherit;
+      transition: width var(--smu-duration-base);
+    }
+
+    &__pivot {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      box-sizing: border-box;
+      min-width: 3.6em;
+      padding: 0 5px;
+      font-size: var(--smu-font-size-xs);
+      line-height: 1.6;
+      text-align: center;
+      word-break: keep-all;
+      background: var(--smu-primary-color);
+      border-radius: 1em;
+      transform: translate(50%, -50%);
+    }
+  }
+</style>

package/components/Progress/index.ts

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