@3birds/midori-ui 0.0.20 → 0.0.22

package/dist/assets/file-tree-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor"  d="M12 13H7V18H12V20H5V10H7V11H12V13M8 4V6H4V4H8M10 2H2V8H10V2M20 11V13H16V11H20M22 9H14V15H22V9M20 18V20H16V18H20M22 16H14V22H22V16Z" /></svg>

package/dist/components/Alert.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+	import { alertSvg, checkCircleSvg, closeCircleSvg, informationSvg } from '..';
 	import { alert } from '../alert';
-	import { alertSvg, checkCircleSvg, closeCircleSvg, informationSvg } from '@3birds/midori-ui';
 
 	let popover: HTMLButtonElement | undefined = $state(undefined);
 

package/dist/components/Breadcrumbs.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { fileTreeOutlineSvg } from '..';
+	import type { BreadcrumbsItem } from '../types';
+
+	let {
+		items,
+		class: className
+	}: {
+		items: BreadcrumbsItem[];
+		class?: string;
+	} = $props();
+</script>
+
+<nav class="breadcrumbs text-sm {className}">
+	<ul class="flex-wrap items-center">
+		<img src={fileTreeOutlineSvg} alt="パンくずリスト" class="mr-2 size-4" />
+		{#each items as item}
+			<li class={item.href ? 'shrink-0' : 'min-w-0'}>
+				{#if item.href}
+					<a href={item.href}>{item.text}</a>
+				{:else}
+					<span class="block truncate hover:cursor-default hover:no-underline">{item.text}</span>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+</nav>

package/dist/components/Breadcrumbs.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { BreadcrumbsItem } from '../types';
+type $$ComponentProps = {
+    items: BreadcrumbsItem[];
+    class?: string;
+};
+declare const Breadcrumbs: import("svelte").Component<$$ComponentProps, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/components/Btn.svelte

@@ -30,6 +30,7 @@
 		class="btn rounded-full {className}"
 		aria-disabled={disabled}
 		tabindex={disabled ? -1 : undefined}
+		{onclick}
 	>
 		{@render children()}
 	</a>

package/dist/components/Filter.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Btn, closeSvg } from '..';
+	import type { FilterItem } from '../types';
+
+	let {
+		value = $bindable(),
+		items,
+		class: className
+	}: {
+		value: any[];
+		items: FilterItem[];
+		class?: string;
+	} = $props();
+</script>
+
+<form class="filter my-4 items-center {className}">
+	<p class="text-sm text-base-content/60">絞り込み：</p>
+	{#each items as item}
+		<input
+			class="btn m-0.5 rounded-full btn-sm"
+			type="checkbox"
+			name="frameworks"
+			aria-label={item.label}
+			value={item.value}
+			bind:group={value}
+		/>
+	{/each}
+	<Btn class="m-0.5 btn-circle btn-sm" type="reset">
+		<img src={closeSvg} alt="クリア" class="size-4" />
+	</Btn>
+</form>

package/dist/components/Filter.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { FilterItem } from '../types';
+type $$ComponentProps = {
+    value: any[];
+    items: FilterItem[];
+    class?: string;
+};
+declare const Filter: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Filter = ReturnType<typeof Filter>;
+export default Filter;

package/dist/components/Input.svelte

@@ -15,7 +15,9 @@
 		icon,
 		placeholder,
 		option,
-		value = $bindable()
+		value = $bindable(),
+		oninput,
+		onchange
 	}: {
 		type: InputType;
 		required?: boolean;
@@ -31,6 +33,8 @@
 		placeholder?: string;
 		option?: string;
 		value: any;
+		oninput?: (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => void;
+		onchange?: (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => void;
 	} = $props();
 </script>
 
@@ -54,6 +58,8 @@
 			{max}
 			{placeholder}
 			bind:value
+			{oninput}
+			{onchange}
 		/>
 	</label>
 	{#if option}

package/dist/components/Input.svelte.d.ts

@@ -14,6 +14,12 @@ type $$ComponentProps = {
     placeholder?: string;
     option?: string;
     value: any;
+    oninput?: (e: Event & {
+        currentTarget: EventTarget & HTMLInputElement;
+    }) => void;
+    onchange?: (e: Event & {
+        currentTarget: EventTarget & HTMLInputElement;
+    }) => void;
 };
 declare const Input: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/constants/index.d.ts

@@ -0,0 +1,2 @@
+import type { PriorityChoice } from '../types';
+export declare const PRIORITIES: PriorityChoice[];

package/dist/constants/index.js

@@ -0,0 +1,7 @@
+export const PRIORITIES = [
+    { label: 'フィールド', value: '50' },
+    { label: 'イベント', value: '40' },
+    { label: 'コンテンツ', value: '20' },
+    { label: 'アメニティ', value: '10' },
+    { label: 'ログ', value: '5' }
+];

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export { default as Fab } from './components/Fab.svelte';
 export { default as Input } from './components/Input.svelte';
 export { default as Modal } from './components/Modal.svelte';
 export { default as Alert } from './components/Alert.svelte';
+export { default as Breadcrumbs } from './components/Breadcrumbs.svelte';
+export { default as Filter } from './components/Filter.svelte';
 export { default as accountSvg } from './assets/account.svg';
 export { default as alertSvg } from './assets/alert.svg';
 export { default as calendarMonthSvg } from './assets/calendar-month.svg';
@@ -19,6 +21,7 @@ export { default as faceAgentSvg } from './assets/face-agent.svg';
 export { default as faceManSvg } from './assets/face-man.svg';
 export { default as faceManWhiteSvg } from './assets/face-man-white.svg';
 export { default as faviconSvg } from './assets/favicon.svg';
+export { default as fileTreeOutlineSvg } from './assets/file-tree-outline.svg';
 export { default as forestOutlineSvg } from './assets/forest-outline.svg';
 export { default as heartOutlineSvg } from './assets/heart-outline.svg';
 export { default as homeOutlineSvg } from './assets/home-outline.svg';

package/dist/index.js

@@ -5,6 +5,8 @@ export { default as Fab } from './components/Fab.svelte';
 export { default as Input } from './components/Input.svelte';
 export { default as Modal } from './components/Modal.svelte';
 export { default as Alert } from './components/Alert.svelte';
+export { default as Breadcrumbs } from './components/Breadcrumbs.svelte';
+export { default as Filter } from './components/Filter.svelte';
 export { default as accountSvg } from './assets/account.svg';
 export { default as alertSvg } from './assets/alert.svg';
 export { default as calendarMonthSvg } from './assets/calendar-month.svg';
@@ -20,6 +22,7 @@ export { default as faceAgentSvg } from './assets/face-agent.svg';
 export { default as faceManSvg } from './assets/face-man.svg';
 export { default as faceManWhiteSvg } from './assets/face-man-white.svg';
 export { default as faviconSvg } from './assets/favicon.svg';
+export { default as fileTreeOutlineSvg } from './assets/file-tree-outline.svg';
 export { default as forestOutlineSvg } from './assets/forest-outline.svg';
 export { default as heartOutlineSvg } from './assets/heart-outline.svg';
 export { default as homeOutlineSvg } from './assets/home-outline.svg';

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export type BtnType = 'button' | 'submit';
+export type BtnType = 'button' | 'submit' | 'reset';
 export type InputType = 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal' | 'password' | 'datetime-local' | 'date';
 export type AlertType = 'info' | 'success' | 'error' | 'warning';
 export interface AlertState {
@@ -7,3 +7,16 @@ export interface AlertState {
     type: AlertType;
     duration: number;
 }
+export interface BreadcrumbsItem {
+    text: string;
+    href?: string;
+}
+export interface FilterItem {
+    label: string;
+    value: any;
+}
+export type Priority = '50' | '40' | '20' | '10' | '5';
+export interface PriorityChoice {
+    label: string;
+    value: Priority;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@3birds/midori-ui",
-	"version": "0.0.20",
+	"version": "0.0.22",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",