{"id":24888657,"url":"https://github.com/tuspedesign/svelte-components","last_synced_at":"2025-10-16T05:32:21.959Z","repository":{"id":274363511,"uuid":"922489123","full_name":"TuspeDesign/svelte-components","owner":"TuspeDesign","description":"A component library with UI elements and utilities for forms, modals, breadcrumbs, pricing, VAT, and validations.","archived":false,"fork":false,"pushed_at":"2025-08-10T03:07:01.000Z","size":90,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-14T12:32:36.541Z","etag":null,"topics":["svelte","svelte-components","svelte5","sveltekit","sveltekit-components","sveltekit-tailwindcss","tailwindcss"],"latest_commit_sha":null,"homepage":"https://tuspe.com/en","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TuspeDesign.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-26T11:03:03.000Z","updated_at":"2025-08-10T03:07:04.000Z","dependencies_parsed_at":"2025-01-26T21:21:50.936Z","dependency_job_id":"02cebfe5-07cd-4e72-879c-4876fd6b3fc8","html_url":"https://github.com/TuspeDesign/svelte-components","commit_stats":null,"previous_names":["tuspedesign/svelte-components"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TuspeDesign/svelte-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TuspeDesign%2Fsvelte-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TuspeDesign%2Fsvelte-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TuspeDesign%2Fsvelte-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TuspeDesign%2Fsvelte-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TuspeDesign","download_url":"https://codeload.github.com/TuspeDesign/svelte-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TuspeDesign%2Fsvelte-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279159536,"owners_count":26116492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-16T02:00:06.019Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["svelte","svelte-components","svelte5","sveltekit","sveltekit-components","sveltekit-tailwindcss","tailwindcss"],"created_at":"2025-02-01T16:14:26.922Z","updated_at":"2025-10-16T05:32:21.952Z","avatar_url":"https://github.com/TuspeDesign.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tuspe SvelteKit Components\n\n[Tuspe Design](https://tuspe.com/en) builds websites and online stores for small and large businesses. This component library includes essential elements for forms, modals, breadcrumbs, and images. It also offers utility functions for price display, VAT calculations, and validations for tables and strings.\n\n## Example of required style specifications\n\n```CSS\n  :root {\n    --color-border: #bbb;\n    --color-content: #362e26;\n    --color-primary: #20a3cb;\n    --color-secondary: #263927;\n  }\n```\n\n## Breadcrumbs\n\nA breadcrumb navigation provide links back to previous pages, and shows the user's current location in a website. The component complies with [Google standards](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb).\n\n```TypeScript\n  interface Breadcrumb {\n    '@type'?: string\n    item: string\n    name: string\n    position?: string\n  }\n\n  type Props =  {\n    homeName?: string\n    homeSlug?: string\n    onlyMeta?: boolean\n    outerClass?: string\n    values: Breadcrumb[]\n  }\n```\n\n## Button\n\nEasily replace most buttons in your project with this versatile button component. The `control` value makes it ideal for icons and as a toggler for the mobile menu.\n\n```TypeScript\n  type Props =  {\n    ariaControls?: string | undefined\n    ariaExpanded?: boolean | undefined\n    ariaLabel?: string | undefined\n    ariaPopup?: 'dialog' | 'listbox' | 'menu' | undefined\n    borderColor?: 'content' | 'default' | 'primary'\n    borderSize?: 0 | 1 | 2\n    children: Snippet\n    color?: string\n    colorBg?: string\n    control?: boolean\n    disabled?: boolean\n    extraClass?: string\n    fill?: boolean\n    fontWeight?: 'normal' | 'bold'\n    fullWidth?: boolean\n    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent'\n    hoverText?: 'black' | 'primary' | 'secondary' | 'white'\n    href?: string | undefined\n    id?: string\n    noCenter?: boolean\n    noHeight?: boolean\n    noPadding?: boolean\n    noSpinner?: boolean\n    onclick?: any\n    preload?: 'hover' | 'tap'\n    rel?: string\n    role?: string\n    rounded?: 'full' | 'lg' | 'none' | 'sm'\n    spinnerColor?: 'black' | 'white'\n    target?: '_blank' | '_top' | undefined\n    title?: string | undefined\n    type?: 'submit'\n    uppercase?: boolean\n    value?: string | number\n  }\n```\n\n## ButtonArrow\n\nArrow icons for navigation, such as image sliders or content transitions.\n\n```TypeScript\n  type Props =  {\n    ariaLabel: string\n    color?: string\n    direction: 'left' | 'right'\n    id?: string\n    onclick?: () =\u003e any\n  }\n```\n\n## ButtonClose\n\nClose button for modals and other dismissible elements.\n\n```TypeScript\n  type Props =  {\n    ariaLabel?: string\n    color?: string\n    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent'\n    hoverText?: 'black' | 'primary' | 'secondary' | 'white'\n    id?: string\n    onclick?: any\n  }\n```\n\n## ButtonMenu\n\nA button for toggling the mobile menu, dynamically changing its icon based on the menu's open or closed state.\n\n```TypeScript\n  type Props =  {\n    ariaControls: string\n    color?: 'black' | 'white'\n    extraClass?: string\n    hidden?: boolean\n    id?: string\n    onclick?: () =\u003e any\n    open: boolean\n    title: string\n  }\n```\n\n## Image\n\nA versatile image component supporting various aspect ratios and object fit options. Features include optional borders, centering, full-width display, custom classes, and configurable loading behavior.\n\n```TypeScript\n  interface ImageData {\n    alt: string\n    height?: number\n    src: string\n    width?: number\n  }\n\n  type Props =  {\n    ariaHidden?: boolean\n    aspect?: '3:4' | '4:3' | 'square' | 'video'\n    ball?: boolean\n    border?: boolean\n    center?: boolean\n    display?: 'block' | 'inline-block'\n    extraClasses?: string\n    fullWidth?: boolean\n    image: ImageData\n    loading?: 'eager' | 'lazy'\n    objectFit?: 'contain' | 'cover'\n  }\n```\n\n## Input\n\nA flexible `Input` component supporting common input types with basic styling for form fields. It includes optional attributes for labels, placeholders, min/max values, steps, and event handlers but does not perform content validation.\n\n```TypeScript\n  type Props =  {\n    onchange?: () =\u003e void\n    onclick?: () =\u003e void\n    borderColor?: string\n    disabled?: boolean\n    id?: string\n    label: string\n    max?: number | string\n    min?: number | string\n    outerClass?: string\n    placeholder?: string\n    required?: boolean\n    step?: number\n    type?: 'email' | 'date' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url'\n    value: string | number\n  }\n```\n\n## Select\n\nA customizable `Select` component for choosing from a list of options. Supports labels, placeholders, required fields, and disabled states. Accepts an array of selectable items and triggers an optional onchange event when the value changes.\n\n```TypeScript\n  interface SelectItem {\n    name: string\n    value: number | string\n  }\n\n  type Props =  {\n    disabled?: boolean\n    id?: string\n    innerClass?: string\n    label: string\n    onchange?: () =\u003e void\n    outerClass?: string\n    placeholder?: string\n    required?: boolean\n    value: string | number\n    values: SelectItem[]\n  }\n```\n\n## Checkbox\n\nAllows users to toggle between checked and unchecked states.\n\n```TypeScript\n  type Props =  {\n    checked?: boolean\n    children: Snippet\n    disabled?: boolean\n    group?: boolean\n    id?: string\n    onchange?: () =\u003e void\n    outerClass?: string\n    required?: boolean\n    value?: number | string\n  }\n```\n\n## Modal\n\nA simple `Modal` component that displays a popup with customizable content.\n\n```TypeScript\n  type Props =  {\n    children: Snippet\n    buttonAriaLabel?: string\n    colorButton?: string\n    colorBg?: string\n    headerClass?: string\n    innerClass?: string\n    open?: boolean\n    outerClass?: string\n    title?: string\n    titleClass?: string\n  }\n```\n\n## Functions\n\n### calculatePreTax\n\nComputes the pre-tax amount by subtracting the tax from the total, using the specified VAT percentage.\n\n### calculateTax\n\nCalculates the tax portion of a total amount based on a given VAT percentage (default: 25.5%), ensuring precision.\n\n### calculateWithTax\n\nCalculates the total price by adding VAT to a pre-tax amount, using the specified VAT percentage (default: 25.5%).\n\n### fixNumber\n\nConverts a number or string to a rounded number with two decimal places, ensuring precision.\n\n### formatPrice\n\nFormats a number or string as a price with two decimal places, spaces as thousand separators, optional comma as a decimal separator, and an appended currency symbol (default: €).\n\n### handleCache\n\nRetrieves or stores values in the cache; keys are slugified, and values are updated or returned if they exist. This ensures that `+page.ts` and other pages only retrieve data from the backend once and that the WordPress frontend uses the product list data on the product page without retrieving the same page again.\n\n### preventDefault\n\nPreviously, Svelte handled form submission without reloading the page. However, the `preventDefault` function is no longer supported by Svelte v5, so this function handles form submission without loading the page.\n\n### slugify\n\nConverts a string to a URL-friendly format by replacing special characters, removing quotes, and replacing non-alphanumeric characters with hyphens.\n\n\n### summary\n\nThis function removes any HTML tags from a given string, then trims it to a maximum of 160 characters. If possible, it truncates at the last occurrence of a sentence-ending character (\".\", \"!\", \"?\"); otherwise, it appends \"...\" to indicate truncation.\n\n### validateArray\n\nChecks if a value is an array and contains more than a specified number of items (default: 0).\n\n### validateEmail\n\nValidates if a string is a properly formatted email address.\n\n### validateSlug\n\nChecks if a given string is a valid slug by ensuring it matches its slugified version.\n\n### validateString\n\nEnsures a string contains only allowed characters (letters, numbers, spaces, and certain symbols).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuspedesign%2Fsvelte-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftuspedesign%2Fsvelte-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuspedesign%2Fsvelte-components/lists"}