svelte-mobile-ui 1.0.0

package/components/Stepper/Stepper.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+  let {
+    value = $bindable(1),
+    min = 1,
+    max = Infinity,
+    step = 1,
+    theme = '',
+    integer = false,
+    disabled = false,
+    disablePlus = false,
+    disableMinus = false,
+    disableInput = false,
+    showPlus = true,
+    showMinus = true,
+    showInput = true,
+    inputWidth = '32px',
+    buttonSize = '28px',
+    longPress = true,
+    placeholder = '',
+    decimalLength,
+    onChange,
+    class: className = '',
+  }: {
+    value?: number
+    min?: number
+    max?: number
+    step?: number
+    theme?: '' | 'round'
+    integer?: boolean
+    disabled?: boolean
+    disablePlus?: boolean
+    disableMinus?: boolean
+    disableInput?: boolean
+    showPlus?: boolean
+    showMinus?: boolean
+    showInput?: boolean
+    inputWidth?: string
+    buttonSize?: string
+    longPress?: boolean
+    placeholder?: string
+    decimalLength?: number
+    onChange?: (value: number) => void
+    class?: string
+  } = $props()
+
+  const minusDisabled = $derived(disabled || disableMinus || value <= min)
+  const plusDisabled = $derived(disabled || disablePlus || value >= max)
+
+  function format(val: number) {
+    val = Math.max(Math.min(val, max), min)
+    if (integer) val = Math.round(val)
+    if (decimalLength !== undefined) val = Number(val.toFixed(decimalLength))
+    return val
+  }
+
+  function onMinus() {
+    if (minusDisabled) return
+    value = format(value - step)
+    onChange?.(value)
+  }
+
+  function onPlus() {
+    if (plusDisabled) return
+    value = format(value + step)
+    onChange?.(value)
+  }
+
+  function onInput(e: Event) {
+    const v = (e.target as HTMLInputElement).value
+    const num = Number(v)
+    if (!isNaN(num)) {
+      value = format(num)
+      onChange?.(value)
+    }
+  }
+</script>
+
+<div class="smu-stepper {theme ? `smu-stepper--${theme}` : ''} {className}">
+  {#if showMinus}
+    <button
+      class="smu-stepper__minus {minusDisabled ? 'smu-stepper__minus--disabled' : ''}"
+      style="width: {buttonSize}; height: {buttonSize}"
+      onclick={onMinus}
+      disabled={minusDisabled}
+      type="button"
+    ></button>
+  {/if}
+  {#if showInput}
+    <input
+      class="smu-stepper__input"
+      type={integer ? 'tel' : 'text'}
+      role="spinbutton"
+      value={value}
+      disabled={disabled || disableInput}
+      readonly={disableInput}
+      inputmode={integer ? 'numeric' : 'decimal'}
+      {placeholder}
+      style="width: {inputWidth}; height: {buttonSize}"
+      oninput={onInput}
+    />
+  {/if}
+  {#if showPlus}
+    <button
+      class="smu-stepper__plus {plusDisabled ? 'smu-stepper__plus--disabled' : ''}"
+      style="width: {buttonSize}; height: {buttonSize}"
+      onclick={onPlus}
+      disabled={plusDisabled}
+      type="button"
+    ></button>
+  {/if}
+</div>
+
+<style lang="scss">
+  .smu-stepper {
+    display: inline-flex;
+    user-select: none;
+
+    &__minus,
+    &__plus {
+      position: relative;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      color: var(--smu-text-color);
+      vertical-align: middle;
+      background: var(--smu-active-color);
+      border: 0;
+      cursor: pointer;
+
+      &::before,
+      &::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        background: var(--smu-text-color);
+        transform: translate(-50%, -50%);
+        content: '';
+      }
+
+      &::before {
+        width: 50%;
+        height: 1px;
+      }
+
+      &--disabled {
+        cursor: not-allowed;
+        opacity: var(--smu-disabled-opacity);
+      }
+    }
+
+    &__plus::after {
+      width: 1px;
+      height: 50%;
+    }
+
+    &__minus {
+      border-radius: var(--smu-radius-md) 0 0 var(--smu-radius-md);
+    }
+
+    &__plus {
+      border-radius: 0 var(--smu-radius-md) var(--smu-radius-md) 0;
+    }
+
+    &__input {
+      box-sizing: border-box;
+      width: 32px;
+      height: 28px;
+      margin: 0 2px;
+      padding: 0;
+      color: var(--smu-text-color);
+      font-size: var(--smu-font-size-md);
+      text-align: center;
+      vertical-align: middle;
+      background: var(--smu-active-color);
+      border: 0;
+      border-radius: 0;
+      -webkit-appearance: none;
+
+      &:focus { outline: none; }
+    }
+
+    &--round {
+      .smu-stepper__minus,
+      .smu-stepper__plus {
+        border-radius: 50%;
+      }
+
+      .smu-stepper__minus { border: 1px solid var(--smu-danger-color); background: var(--smu-white); color: var(--smu-danger-color);
+        &::before, &::after { background: var(--smu-danger-color); }
+      }
+      .smu-stepper__plus { border: 1px solid var(--smu-primary-color); background: var(--smu-primary-color); color: var(--smu-white);
+        &::before, &::after { background: var(--smu-white); }
+      }
+      .smu-stepper__input { background: transparent; }
+    }
+  }
+</style>

package/components/Stepper/index.ts

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

package/components/Steps/Step.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    let {
+        activeIndex = 0,
+        status = "waiting",
+        title = "",
+        description = "",
+        icon = "",
+        iconPrefix = "",
+        children,
+        titleSlot,
+        descriptionSlot,
+        iconSlot,
+        class: className = "",
+    }: {
+        activeIndex?: number;
+        status?: "waiting" | "process" | "finish";
+        title?: string;
+        description?: string;
+        icon?: string;
+        iconPrefix?: string;
+        children?: Snippet;
+        titleSlot?: Snippet;
+        descriptionSlot?: Snippet;
+        iconSlot?: Snippet;
+        class?: string;
+    } = $props();
+</script>
+
+<div class="smu-step smu-step--{status} {className}">
+    <div class="smu-step__circle-container">
+        {#if iconSlot}
+            {@render iconSlot()}
+        {:else}
+            <div class="smu-step__circle"></div>
+        {/if}
+        <div class="smu-step__line"></div>
+    </div>
+    <div class="smu-step__info">
+        <div class="smu-step__title">
+            {#if titleSlot}{@render titleSlot()}{:else}{title}{/if}
+        </div>
+        {#if description || descriptionSlot}
+            <div class="smu-step__description">
+                {#if descriptionSlot}{@render descriptionSlot()}{:else}{description}{/if}
+            </div>
+        {/if}
+    </div>
+</div>
+
+<style lang="scss">
+    .smu-step {
+        position: relative;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        color: var(--smu-gray-6);
+        font-size: var(--smu-font-size-sm);
+
+        &--process {
+            color: var(--smu-text-color);
+            .smu-step__circle {
+                background: var(--smu-primary-color);
+            }
+        }
+
+        &--finish {
+            color: var(--smu-primary-color);
+            .smu-step__circle {
+                background: var(--smu-primary-color);
+            }
+            .smu-step__line {
+                background: var(--smu-primary-color);
+            }
+        }
+
+        &__circle-container {
+            position: relative;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            justify-content: center;
+        }
+
+        &__circle {
+            width: 12px;
+            height: 12px;
+            background: var(--smu-gray-5);
+            border-radius: 50%;
+            flex-shrink: 0;
+            z-index: 1;
+        }
+
+        &__line {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            height: 1px;
+            background: var(--smu-gray-5);
+            transform: translateY(-50%);
+        }
+
+        &:last-child .smu-step__line {
+            display: none;
+        }
+
+        &__info {
+            margin-top: 8px;
+            text-align: center;
+        }
+
+        &__title {
+            font-size: var(--smu-font-size-sm);
+            line-height: 1.4;
+        }
+
+        &__description {
+            margin-top: 4px;
+            color: var(--smu-gray-6);
+            font-size: var(--smu-font-size-xs);
+        }
+    }
+</style>

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

package/components/Steps/index.ts

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

package/components/Sticky/Sticky.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { onMount, onDestroy } from "svelte";
+
+    let {
+        offsetTop = 0,
+        offsetBottom,
+        zIndex = 99,
+        container,
+        position = "top",
+        onChange,
+        onScroll,
+        children,
+        class: className = "",
+    }: {
+        offsetTop?: number | string;
+        offsetBottom?: number | string;
+        zIndex?: number | string;
+        container?: HTMLElement;
+        position?: "top" | "bottom";
+        onChange?: (isFixed: boolean) => void;
+        onScroll?: (params: { scrollTop: number; isFixed: boolean }) => void;
+        children?: Snippet;
+        class?: string;
+    } = $props();
+
+    let rootEl: HTMLDivElement;
+    let isFixed = $state(false);
+    let fixedStyle = $state("");
+
+    function handleScroll() {
+        if (!rootEl) return;
+        const scrollTop =
+            (container || document.documentElement).scrollTop ||
+            window.pageYOffset;
+        const rect = rootEl.getBoundingClientRect();
+        const offset =
+            Number(position === "bottom" ? (offsetBottom ?? 0) : offsetTop) ||
+            0;
+
+        let newFixed = false;
+        if (position === "top") {
+            newFixed = rect.top < offset;
+        } else {
+            newFixed = rect.bottom > window.innerHeight - offset;
+        }
+
+        if (newFixed !== isFixed) {
+            isFixed = newFixed;
+            onChange?.(isFixed);
+        }
+
+        if (isFixed) {
+            if (position === "top") {
+                fixedStyle = `position: fixed; top: ${offset}px; left: ${rect.left}px; width: ${rect.width}px; z-index: ${zIndex};`;
+            } else {
+                fixedStyle = `position: fixed; bottom: ${offset}px; left: ${rect.left}px; width: ${rect.width}px; z-index: ${zIndex};`;
+            }
+        } else {
+            fixedStyle = "";
+        }
+
+        onScroll?.({ scrollTop, isFixed });
+    }
+
+    onMount(() => {
+        const target = container || window;
+        target.addEventListener("scroll", handleScroll, { passive: true });
+        handleScroll();
+    });
+
+    onDestroy(() => {
+        const target = container || window;
+        target.removeEventListener("scroll", handleScroll);
+    });
+</script>
+
+<div class="smu-sticky {className}" bind:this={rootEl}>
+    <div style={fixedStyle}>
+        {#if children}{@render children()}{/if}
+    </div>
+</div>
+
+<style lang="scss">
+    .smu-sticky {
+        position: relative;
+    }
+</style>

package/components/Sticky/index.ts

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

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

package/components/SubmitBar/index.ts

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

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

package/components/Swipe/SwipeItem.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    let {
+        children,
+        class: className = "",
+    }: {
+        children?: Snippet;
+        class?: string;
+    } = $props();
+</script>
+
+<div class="smu-swipe-item {className}">
+    {#if children}{@render children()}{/if}
+</div>
+
+<style lang="scss">
+    .smu-swipe-item {
+        position: relative;
+        flex-shrink: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+</style>

package/components/Swipe/index.ts

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

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

package/components/SwipeCell/index.ts

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

package/components/Switch/Switch.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import Loading from '../Loading/Loading.svelte'
+
+  let {
+    checked = $bindable(false),
+    loading = false,
+    disabled = false,
+    size = '26px',
+    activeColor = '',
+    inactiveColor = '',
+    activeValue = true,
+    inactiveValue = false,
+    onChange,
+    class: className = '',
+  }: {
+    checked?: boolean | any
+    loading?: boolean
+    disabled?: boolean
+    size?: string | number
+    activeColor?: string
+    inactiveColor?: string
+    activeValue?: any
+    inactiveValue?: any
+    onChange?: (val: any) => void
+    class?: string
+  } = $props()
+
+  const isChecked = $derived(checked === activeValue)
+  const sizeStr = $derived(typeof size === 'number' ? size + 'px' : size)
+
+  function toggle() {
+    if (disabled || loading) return
+    const newVal = isChecked ? inactiveValue : activeValue
+    checked = newVal
+    onChange?.(newVal)
+  }
+</script>
+
+<div
+  class="smu-switch {isChecked ? 'smu-switch--on' : ''} {disabled ? 'smu-switch--disabled' : ''} {loading ? 'smu-switch--loading' : ''} {className}"
+  style="font-size: {sizeStr}; {isChecked && activeColor ? `background: ${activeColor}` : ''} {!isChecked && inactiveColor ? `background: ${inactiveColor}` : ''}"
+  role="switch"
+  aria-checked={isChecked}
+  tabindex="0"
+  onclick={toggle}
+>
+  <div class="smu-switch__node">
+    {#if loading}
+      <Loading size="65%" class="smu-switch__loading" color={isChecked ? (activeColor || 'var(--smu-primary-color)') : (inactiveColor || 'var(--smu-gray-5)')} />
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  .smu-switch {
+    position: relative;
+    display: inline-block;
+    box-sizing: content-box;
+    width: 2em;
+    height: 1em;
+    background: rgba(120, 120, 128, 0.16);
+    border-radius: 1em;
+    cursor: pointer;
+    transition: background var(--smu-duration-base);
+
+    &--on {
+      background: var(--smu-primary-color);
+
+      .smu-switch__node {
+        transform: translateX(1em);
+        background: var(--smu-white);
+      }
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+      opacity: var(--smu-disabled-opacity);
+    }
+
+    &__node {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 1em;
+      height: 1em;
+      background: var(--smu-white);
+      border-radius: 50%;
+      box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
+      transition: transform var(--smu-duration-base) cubic-bezier(0.3, 1.05, 0.4, 1.05);
+    }
+
+    &__loading { display: flex; }
+  }
+</style>

package/components/Switch/index.ts

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