@lumen-design/descriptions 0.0.2

package/dist/Descriptions.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { DescriptionsSize, DescriptionsDirection } from './types'
+    import { setContext } from 'svelte'
+    import { DESCRIPTIONS_CONTEXT_KEY, type DescriptionsContext } from './DescriptionsContext'
+
+    interface DescriptionsProps {
+        title?: string | Snippet
+        extra?: Snippet
+        border?: boolean
+        column?: number
+        direction?: DescriptionsDirection
+        size?: DescriptionsSize
+        children?: Snippet
+        class?: string
+    }
+
+    let { title, extra, border = false, column = 3, direction = 'horizontal', size = 'default', children, class: cls = '', ...attrs }: DescriptionsProps = $props()
+
+    const context: DescriptionsContext = {
+        get border() {
+            return border
+        },
+        get column() {
+            return column
+        },
+        get direction() {
+            return direction
+        },
+        get size() {
+            return size
+        },
+    }
+
+    setContext(DESCRIPTIONS_CONTEXT_KEY, context)
+
+    const classes = $derived(`lm-descriptions lm-descriptions--${size}${border ? ' is-bordered' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    {#if title || extra}
+        <div class="lm-descriptions__header">
+            {#if title}
+                <div class="lm-descriptions__title">
+                    {#if typeof title === 'string'}
+                        {title}
+                    {:else}
+                        {@render title()}
+                    {/if}
+                </div>
+            {/if}
+            {#if extra}
+                <div class="lm-descriptions__extra">
+                    {@render extra()}
+                </div>
+            {/if}
+        </div>
+    {/if}
+
+    <div class="lm-descriptions__body">
+        <table class="lm-descriptions__table">
+            <tbody>
+                {#if children}
+                    {@render children()}
+                {/if}
+            </tbody>
+        </table>
+    </div>
+</div>

package/dist/DescriptionsContext.js

@@ -0,0 +1 @@
+export const DESCRIPTIONS_CONTEXT_KEY = Symbol('descriptions');

package/dist/DescriptionsItem.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { getContext } from 'svelte'
+    import { DESCRIPTIONS_CONTEXT_KEY, type DescriptionsContext } from './DescriptionsContext'
+
+    interface DescriptionsItemProps {
+        label?: string | Snippet
+        span?: number
+        labelWidth?: string | number
+        align?: 'left' | 'center' | 'right'
+        labelAlign?: 'left' | 'center' | 'right'
+        children?: Snippet
+        class?: string
+    }
+
+    let { label = '', span = 1, labelWidth, align = 'left', labelAlign = 'left', children, class: cls = '', ...attrs }: DescriptionsItemProps = $props()
+
+    const descriptions = getContext<DescriptionsContext>(DESCRIPTIONS_CONTEXT_KEY)
+    const isBordered = $derived(descriptions?.border ?? false)
+
+    const labelStyle = $derived(labelWidth ? `width: ${typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth}; text-align: ${labelAlign}` : `text-align: ${labelAlign}`)
+
+    const contentStyle = $derived(`text-align: ${align}`)
+    const classes = $derived(cls ? `lm-descriptions-item ${cls}` : 'lm-descriptions-item')
+</script>
+
+{#if isBordered}
+    <tr class={classes} {...attrs}>
+        <th class="lm-descriptions-item__label" style={labelStyle}>
+            {#if typeof label === 'string'}
+                {label}
+            {:else if label}
+                {@render label()}
+            {/if}
+        </th>
+        <td class="lm-descriptions-item__content" colspan={span * 2 - 1} style={contentStyle}>
+            {#if children}
+                {@render children()}
+            {/if}
+        </td>
+    </tr>
+{:else}
+    <tr class={classes} {...attrs}>
+        <td class="lm-descriptions-item__cell" colspan={span}>
+            <span class="lm-descriptions-item__label" style={labelStyle}>
+                {#if typeof label === 'string'}
+                    {label}
+                {:else if label}
+                    {@render label()}
+                {/if}
+            </span>
+            <span class="lm-descriptions-item__content" style={contentStyle}>
+                {#if children}
+                    {@render children()}
+                {/if}
+            </span>
+        </td>
+    </tr>
+{/if}

package/dist/index.js

@@ -0,0 +1,4 @@
+import Descriptions from './Descriptions.svelte';
+import DescriptionsItem from './DescriptionsItem.svelte';
+export { Descriptions, DescriptionsItem };
+export default Descriptions;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@lumen-design/descriptions",
+  "version": "0.0.2",
+  "description": "Descriptions component for Lumen UI",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist --types",
+    "build:watch": "svelte-package -i src -o dist --types -w"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "svelte": "5.48.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}