@3birds/midori-ui 0.0.39 → 0.0.41

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

@@ -1 +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>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#18181B99"  d="M12 13H7V18H12V20H5V10H7V11H12V13M8 4V6H4V4H8M10 2H2V8H10V2M20 11V13H16V11H20M22 9H14V15H22V9M20 18V20H16V18H20M22 16H14V22H22V16Z" /></svg>

package/dist/assets/heart-outline-red.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>heart-outline</title>
+    <path
+      fill="#FF637D"
+      d="M12.1,18.55L12,18.65L11.89,18.55C7.14,14.24 4,11.39 4,8.5C4,6.5 5.5,5 7.5,5C9.04,5 10.54,6 11.07,7.36H12.93C13.46,6 14.96,5 16.5,5C18.5,5 20,6.5 20,8.5C20,11.39 16.86,14.24 12.1,18.55M16.5,3C14.76,3 13.09,3.81 12,5.08C10.91,3.81 9.24,3 7.5,3C4.42,3 2,5.41 2,8.5C2,12.27 5.4,15.36 10.55,20.03L12,21.35L13.45,20.03C18.6,15.36 22,12.27 22,8.5C22,5.41 19.58,3 16.5,3Z"
+    />
+  </svg>

package/dist/assets/star-yellow.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>star</title>
+    <path
+      fill="#FCB700"
+      d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+    />
+  </svg>

package/dist/components/Alert.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { alertSvg, checkCircleSvg, closeCircleSvg, informationSvg } from '..';
+	import { alertSvg, checkCircleSvg, closeCircleSvg, Img, informationSvg } from '..';
 	import { alert } from '../alert';
 
 	let popover: HTMLButtonElement | undefined = $state(undefined);
@@ -43,6 +43,6 @@
 	class="alert rounded-3xl {color} fixed top-4 right-4 left-4 {$alert.show ? 'flex' : 'hidden'}"
 	onclick={() => alert.close()}
 >
-	<img src={icon} alt="アラート" class="size-6" />
+	<Img src={icon} alt="アラート" class="size-6" />
 	{$alert.message}
 </button>

package/dist/components/Breadcrumbs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { fileTreeOutlineSvg, type BreadcrumbsItem } from '..';
+	import { fileTreeOutlineSvg, Img, type BreadcrumbsItem } from '..';
 
 	let {
 		items,
@@ -10,9 +10,9 @@
 	} = $props();
 </script>
 
-<nav class="breadcrumbs p-0 text-sm {className}">
+<nav class="breadcrumbs p-0 text-xs text-base-content/60 {className}">
 	<ul class="flex-wrap items-center">
-		<img src={fileTreeOutlineSvg} alt="パンくずリスト" class="mr-2 size-4" />
+		<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}

package/dist/components/Card.svelte

@@ -1,40 +1,25 @@
 <script lang="ts">
-	import { calendarMonthGraySvg, noImageSvg, StarGraySvg } from '..';
+	import { calendarMonthGraySvg, Img } from '..';
 	import type { ContentCasual } from '../types';
 
-	let { content }: { content: ContentCasual } = $props();
-
-	const onErrorImage = (e: Event): void => {
-		const target = e.currentTarget as HTMLImageElement;
-		target.src = noImageSvg;
-		target.onerror = null;
-	};
+	let { content, searchParams = '' }: { content: ContentCasual; searchParams?: string } = $props();
 </script>
 
-<a class="card w-full rounded-3xl card-sm" href="/contents/{content.id}">
+<a class="card w-full rounded-3xl card-sm" href="/contents/{content.id}{searchParams}">
 	<figure class="aspect-3/2 rounded-3xl">
-		<img
-			src={content.thumbnail}
-			alt={content.name}
-			class="h-full w-full object-cover"
-			onerror={onErrorImage}
-		/>
+		<Img src={content.thumbnail} alt={content.name} class="h-full w-full object-cover" />
 	</figure>
 	<div class="card-body gap-0.5 px-1 py-2">
 		{#if content.schedules.length > 0}
 			<p class="flex min-w-0 items-center gap-0.5 text-base-content/60">
-				<img src={calendarMonthGraySvg} alt="スケジュール" class="size-3 shrink-0" />
+				<Img src={calendarMonthGraySvg} alt="スケジュール" class="size-3 shrink-0" />
 				<span class="block min-w-0 truncate">{content.schedules.join(',')}</span>
 			</p>
 		{/if}
 		<div class="flex">
-			<h2 class="card-title min-w-0">
-				<span class="block min-w-0 truncate">{content.name}</span>
+			<h2 class="card-title min-w-0 truncate">
+				{content.name}
 			</h2>
-			<p class="flex shrink-0 items-center justify-end gap-0.5 text-base-content/60">
-				<img src={StarGraySvg} alt="評価" class="size-3 shrink-0" />
-				{content.rate_average}
-			</p>
 		</div>
 		{#if content.parents}
 			<p class="flex items-center gap-1 text-base-content/60">

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

@@ -1,6 +1,7 @@
 import type { ContentCasual } from '../types';
 type $$ComponentProps = {
     content: ContentCasual;
+    searchParams?: string;
 };
 declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
 type Card = ReturnType<typeof Card>;

package/dist/components/CardSide.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Img, type ContentGeo } from '..';
+
+	let { content, searchParams = '' }: { content: ContentGeo; searchParams?: string } = $props();
+</script>
+
+<a
+	class="card fixed right-22 bottom-4 left-4 z-20 mx-auto card-side h-32 max-w-sm rounded-3xl bg-base-100 shadow-sm card-sm sm:right-4"
+	href="/contents/{content.id}{searchParams}"
+>
+	<figure class="aspect-1">
+		<Img src={content.thumbnail} alt={content.name} class="h-full w-full object-cover" />
+	</figure>
+	<div class="card-body justify-center">
+		<h2 class="card-title">{content.name}</h2>
+	</div>
+</a>

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

@@ -0,0 +1,8 @@
+import { type ContentGeo } from '..';
+type $$ComponentProps = {
+    content: ContentGeo;
+    searchParams?: string;
+};
+declare const CardSide: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardSide = ReturnType<typeof CardSide>;
+export default CardSide;

package/dist/components/Filter.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Btn, closeSvg, type FilterItem } from '..';
+	import { Btn, closeSvg, Img, type FilterItem } from '..';
 
 	let {
 		value = $bindable(),
@@ -16,7 +16,7 @@
 	<p class="text-sm text-base-content/60">絞り込み：</p>
 	{#each items as item}
 		<input
-			class="btn m-0.5 rounded-full btn-sm"
+			class="btn m-0.5 rounded-full btn-outline btn-sm"
 			type="checkbox"
 			name="frameworks"
 			aria-label={item.label}
@@ -24,7 +24,7 @@
 			bind:group={value}
 		/>
 	{/each}
-	<Btn class="m-0.5 btn-circle btn-sm" type="reset">
-		<img src={closeSvg} alt="クリア" class="size-4" />
+	<Btn class="m-0.5 btn-circle btn-outline btn-sm" type="reset">
+		<Img src={closeSvg} alt="クリア" class="size-4" />
 	</Btn>
 </form>

package/dist/components/Img.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { noImageSvg } from '..';
+
+	let { src, alt, class: className }: { src: string; alt: string; class?: string } = $props();
+
+	const onerror = (e: Event): void => {
+		const target = e.currentTarget as HTMLImageElement;
+		target.src = noImageSvg;
+		target.onerror = null;
+	};
+</script>
+
+<img {src} {alt} class={className} {onerror} />

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    src: string;
+    alt: string;
+    class?: string;
+};
+declare const Img: import("svelte").Component<$$ComponentProps, {}, "">;
+type Img = ReturnType<typeof Img>;
+export default Img;

package/dist/components/Input.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { InputType } from '..';
+	import { Img, type InputType } from '..';
 
 	let {
 		type,
@@ -44,7 +44,7 @@
 	{/if}
 	<label class="input w-full rounded-full {icon ? '' : 'px-5'}">
 		{#if icon}
-			<img src={icon} class="size-4" alt="アイコン" />
+			<Img src={icon} class="size-4" alt="アイコン" />
 		{/if}
 		<input
 			{type}

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

@@ -1,4 +1,4 @@
-import type { InputType } from '..';
+import { type InputType } from '..';
 type $$ComponentProps = {
     type: InputType;
     required?: boolean;

package/dist/components/Modal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Btn, closeSvg } from '..';
+	import { Btn, closeSvg, Img } from '..';
 
 	let {
 		value = $bindable(),
@@ -14,7 +14,7 @@
 		<div class="modal-action">
 			<form method="dialog">
 				<Btn class="absolute top-2 right-2 btn-circle btn-ghost btn-sm" type="submit">
-					<img src={closeSvg} alt="閉じる" class="size-6" />
+					<Img src={closeSvg} alt="閉じる" class="size-6" />
 				</Btn>
 			</form>
 		</div>

package/dist/index.d.ts

@@ -7,8 +7,10 @@ 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 Card } from './components/Card.svelte';
+export { default as CardSide } from './components/CardSide.svelte';
 export { default as Header } from './components/Header.svelte';
 export { default as Pagination } from './components/Pagination.svelte';
+export { default as Img } from './components/Img.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';
@@ -28,6 +30,7 @@ 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 heartOutlineRedSvg } from './assets/heart-outline-red.svg';
 export { default as homeOutlineSvg } from './assets/home-outline.svg';
 export { default as humanMaleFemaleSvg } from './assets/human-male-female.svg';
 export { default as informationSvg } from './assets/information.svg';
@@ -47,6 +50,7 @@ export { default as refreshSvg } from './assets/refresh.svg';
 export { default as shapeOutlineSvg } from './assets/shape-outline.svg';
 export { default as StarSvg } from './assets/star.svg';
 export { default as StarGraySvg } from './assets/star-gray.svg';
+export { default as StarYellowSvg } from './assets/star-yellow.svg';
 export { default as 北海道 } from './assets/prefs/北海道.svg';
 export { default as 青森県 } from './assets/prefs/青森県.svg';
 export { default as 岩手県 } from './assets/prefs/岩手県.svg';

package/dist/index.js

@@ -8,8 +8,10 @@ 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 Card } from './components/Card.svelte';
+export { default as CardSide } from './components/CardSide.svelte';
 export { default as Header } from './components/Header.svelte';
 export { default as Pagination } from './components/Pagination.svelte';
+export { default as Img } from './components/Img.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';
@@ -29,6 +31,7 @@ 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 heartOutlineRedSvg } from './assets/heart-outline-red.svg';
 export { default as homeOutlineSvg } from './assets/home-outline.svg';
 export { default as humanMaleFemaleSvg } from './assets/human-male-female.svg';
 export { default as informationSvg } from './assets/information.svg';
@@ -48,6 +51,7 @@ export { default as refreshSvg } from './assets/refresh.svg';
 export { default as shapeOutlineSvg } from './assets/shape-outline.svg';
 export { default as StarSvg } from './assets/star.svg';
 export { default as StarGraySvg } from './assets/star-gray.svg';
+export { default as StarYellowSvg } from './assets/star-yellow.svg';
 export { default as 北海道 } from './assets/prefs/北海道.svg';
 export { default as 青森県 } from './assets/prefs/青森県.svg';
 export { default as 岩手県 } from './assets/prefs/岩手県.svg';

package/dist/types/index.d.ts

@@ -24,6 +24,7 @@ export type ModalsContext = {
     openSignin: () => void;
     openSignup: () => void;
     openPassword: () => void;
+    openSearch: () => void;
 };
 export interface Data<T> {
     status: number;

package/package.json

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