@3birds/midori-ui 0.0.40 → 0.0.42

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/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, searchParams = '' }: { content: ContentCasual; searchParams?: string } = $props();
-
-	const onErrorImage = (e: Event): void => {
-		const target = e.currentTarget as HTMLImageElement;
-		target.src = noImageSvg;
-		target.onerror = null;
-	};
 </script>
 
 <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/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 bg-base-100 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/constants/index.d.ts

@@ -1,4 +1,10 @@
 import type { PriorityChoice } from '../types';
+export declare const MAP_ATTRIBUTION: string;
+export declare const MAP_DEFAULT_ICON_SIZE: number[];
+export declare const MAP_DEFAULT_ICON_ANCHOR: number[];
+export declare const MAP_MAX_ZOOM: number;
+export declare const MAP_DEFAULT_LATITUDE: number;
+export declare const MAP_DEFAULT_LONGITUDE: number;
 export declare const PRIORITIES: PriorityChoice[];
 export declare const PRIORITIES_WITHOUT_LOG: PriorityChoice[];
 export declare const PREFECTURE_SVG: Record<string, string>;

package/dist/constants/index.js

@@ -1,3 +1,9 @@
+export const MAP_ATTRIBUTION = '<a href="https://github.com/protomaps/basemaps">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>';
+export const MAP_DEFAULT_ICON_SIZE = [20, 20];
+export const MAP_DEFAULT_ICON_ANCHOR = [10, 10];
+export const MAP_MAX_ZOOM = 20;
+export const MAP_DEFAULT_LATITUDE = 35.658;
+export const MAP_DEFAULT_LONGITUDE = 139.745;
 export const PRIORITIES = [
     { label: 'フィールド', value: '50' },
     { label: 'イベント', value: '40' },

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';
@@ -48,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';
@@ -244,5 +247,6 @@ export { authState } from './auth.svelte.ts';
 export * as firebase from './auth';
 export { auth } from './firebase';
 export * as modal from './modals-context.ts';
+export * from './utils/index.ts';
 export { PRIORITIES, PRIORITIES_WITHOUT_LOG, PREFECTURE_SVG, POI_ICON } from './constants/index.ts';
-export type { BtnType, InputType, AlertType, AlertState, BreadcrumbsItem, FilterItem, Priority, PriorityChoice, ModalsContext, Data, ContentCasual, ContentGeo, Dashboard, DashboardPref } from './types/index.ts';
+export type { BtnType, InputType, AlertType, AlertState, BreadcrumbsItem, FilterItem, Priority, PriorityChoice, ModalsContext, Data, ContentAdditionalInfo, ContentAdmin, ContentImage, ContentReview, ContentMinimal, ContentCasual, ContentFormal, ContentGeo, Dashboard, DashboardPref } from './types/index.ts';

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';
@@ -49,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';
@@ -245,4 +248,5 @@ export { authState } from "./auth.svelte.js";
 export * as firebase from './auth';
 export { auth } from './firebase';
 export * as modal from "./modals-context.js";
+export * from "./utils/index.js";
 export { PRIORITIES, PRIORITIES_WITHOUT_LOG, PREFECTURE_SVG, POI_ICON } from "./constants/index.js";

package/dist/types/index.d.ts

@@ -31,6 +31,33 @@ export interface Data<T> {
     data?: T;
     message?: string;
 }
+export interface ContentImage {
+    src: string;
+    credit: string;
+    link: string;
+}
+export interface ContentAdditionalInfo {
+    title: string;
+    body: string;
+}
+export interface ContentReview {
+    rating: number;
+    body: string;
+    photo?: string;
+    content_id: string;
+    content_name: string;
+    reviewer_nickname: string;
+    reviewer_icon?: string;
+}
+export interface ContentMinimal {
+    id: string;
+    name: string;
+}
+export interface ContentAdmin {
+    name: string;
+    midori: boolean;
+    photo?: string;
+}
 export interface ContentCasual {
     id: string;
     name: string;
@@ -42,6 +69,34 @@ export interface ContentCasual {
     rate_average: number;
     schedules: string[];
 }
+export interface ContentFormal {
+    id: string;
+    name: string;
+    latitude: number;
+    longitude: number;
+    map_zoom_level: number;
+    marker_color: string;
+    marker_icon: string;
+    address: string;
+    overview: string;
+    hp: string;
+    x: string;
+    instagram: string;
+    facebook: string;
+    images: ContentImage[];
+    parents: ContentMinimal[];
+    rate_average: number;
+    review_count: number;
+    schedules: string[];
+    fields: ContentCasual[];
+    events: ContentCasual[];
+    contents: ContentCasual[];
+    amenities: ContentCasual[];
+    logs: ContentCasual[];
+    additional_infos: ContentAdditionalInfo[];
+    reviews: ContentReview[];
+    admins: ContentAdmin[];
+}
 export interface ContentGeo {
     latitude: number;
     longitude: number;

package/dist/utils/index.d.ts

@@ -0,0 +1,7 @@
+export declare const yen: (amount: number) => string;
+export declare const withoutFormatText: (text?: string) => string;
+export declare const autoFormatText: (text: string) => string;
+export declare const date: (datetime: string) => string;
+export declare const datetime: (datetime: string) => string;
+export declare const datetimeForInput: (datetime: string) => string;
+export declare const truncateWithEllipsis: (text: string, maxLength: number) => string;

package/dist/utils/index.js

@@ -0,0 +1,69 @@
+export const yen = (amount) => `${amount.toLocaleString()}円`;
+const processCustomMarkup = (text, type, replacer) => {
+    let pattern;
+    switch (type) {
+        case 'link':
+            pattern = /@link\[([^\]]*)\]\(([^\)]*)\)/g;
+            break;
+        case 'bold':
+            pattern = /@bold\[([^\]]*)\]/g;
+            break;
+        case 'small':
+            pattern = /@small\[([^\]]*)\]/g;
+            break;
+    }
+    return text.replace(pattern, (_, display, link) => replacer(display, link));
+};
+const stripCustomMarkup = (text, type) => {
+    return processCustomMarkup(text, type, (display) => display);
+};
+export const withoutFormatText = (text) => {
+    if (!text)
+        return '';
+    text = stripCustomMarkup(text, 'link');
+    text = stripCustomMarkup(text, 'bold');
+    text = stripCustomMarkup(text, 'small');
+    return text.replace(/\s+/g, '');
+};
+export const autoFormatText = (text) => {
+    text = escapeHtml(text);
+    text = processCustomMarkup(text, 'link', (display, link) => `<a href="${sanitizeUrl(link)}" target="_blank" rel="noopener noreferrer" class="link">${display}</a>`);
+    text = processCustomMarkup(text, 'bold', (display) => `<span class="font-bold">${display}</span>`);
+    text = processCustomMarkup(text, 'small', (display) => `<span class="text-xs">${display}</span>`);
+    return text;
+};
+export const date = (datetime) => {
+    return datetime.slice(0, 10).replace(/-/g, '/');
+};
+export const datetime = (datetime) => {
+    return datetime.slice(0, 16).replace(/-/g, '/').replace('T', ' ');
+};
+export const datetimeForInput = (datetime) => {
+    return datetime.slice(0, 16);
+};
+export const truncateWithEllipsis = (text, maxLength) => {
+    return text.length > maxLength ? `${text.slice(0, maxLength)}…` : text;
+};
+const escapeHtml = (text) => text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+const unescapeHtml = (text) => text
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'");
+const sanitizeUrl = (url) => {
+    try {
+        const parsed = new URL(unescapeHtml(url));
+        if (parsed.protocol === 'http:' || parsed.protocol === 'https:')
+            return parsed.href;
+    }
+    catch {
+        // 不正なURL形式
+    }
+    return '#';
+};

package/package.json

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