@3birds/midori-ui 0.0.48 → 0.0.50

package/dist/components/CardSide.svelte

@@ -1,13 +1,24 @@
 <script lang="ts">
-	import { Img, type ContentGeo } from '..';
+	import { Btn, closeSvg, Img, type ContentGeo } from '..';
 
-	let { content, searchParams = '' }: { content: ContentGeo; searchParams?: string } = $props();
+	let {
+		content,
+		searchParams = '',
+		onClickClose
+	}: {
+		content: ContentGeo;
+		searchParams?: string;
+		onClickClose: (e: MouseEvent) => void;
+	} = $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}"
 >
+	<Btn class="absolute top-2 right-2 btn-circle btn-sm" onclick={onClickClose}>
+		<Img src={closeSvg} alt="削除" class="size-4" />
+	</Btn>
 	<figure class="aspect-1">
 		<Img src={content.thumbnail} alt={content.name} class="h-full w-full object-cover" />
 	</figure>

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

@@ -2,6 +2,7 @@ import { type ContentGeo } from '..';
 type $$ComponentProps = {
     content: ContentGeo;
     searchParams?: string;
+    onClickClose: (e: MouseEvent) => void;
 };
 declare const CardSide: import("svelte").Component<$$ComponentProps, {}, "">;
 type CardSide = ReturnType<typeof CardSide>;

package/dist/components/Map.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import 'leaflet/dist/leaflet.css';
+
+	let {
+		container = $bindable(),
+		class: className
+	}: {
+		container: HTMLDivElement | undefined;
+		class?: string;
+	} = $props();
+</script>
+
+<div bind:this={container} class={className}></div>
+
+<style>
+	:global(.midori-marker) {
+		background: transparent;
+		border: none;
+	}
+
+	:global(.marker-wrapper) {
+		width: 20px;
+		display: flex;
+		align-items: center;
+		gap: 3px;
+	}
+
+	:global(.marker-icon) {
+		min-width: 20px;
+		width: 20px;
+		height: 20px;
+		border-radius: 6px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+	}
+
+	:global(.marker-icon img) {
+		width: 14px;
+		height: 14px;
+		display: block;
+	}
+
+	:global(.marker-label) {
+		font-size: 10px;
+		line-height: 1.2;
+		color: #747476;
+		white-space: nowrap;
+		max-width: 100px;
+		text-shadow:
+			-1px -1px 0 #f8f8f8,
+			1px -1px 0 #f8f8f8,
+			-1px 1px 0 #f8f8f8,
+			1px 1px 0 #f8f8f8;
+	}
+
+	:global(.marker-label span) {
+		overflow-x: hidden;
+		text-overflow: ellipsis;
+		display: block;
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import 'leaflet/dist/leaflet.css';
+type $$ComponentProps = {
+    container: HTMLDivElement | undefined;
+    class?: string;
+};
+declare const Map: import("svelte").Component<$$ComponentProps, {}, "container">;
+type Map = ReturnType<typeof Map>;
+export default Map;

package/dist/components/Range.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { Img } from '@3birds/midori-ui';
+
+	let {
+		label,
+		icon,
+		option,
+		value = $bindable()
+	}: {
+		label?: string;
+		icon?: string;
+		option?: string;
+		value: any;
+		oninput?: (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => void;
+		onchange?: (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => void;
+	} = $props();
+</script>
+
+<fieldset class="fieldset w-full">
+	{#if label}
+		<legend class="fieldset-legend whitespace-nowrap">{label}</legend>
+	{/if}
+	<label class="flex w-full items-center gap-4 rounded-full {icon ? '' : 'px-5'}">
+		{#if icon}
+			<Img src={icon} class="size-8" alt="アイコン" />
+		{/if}
+		<div class="flex-1">
+			<input
+				type="range"
+				min="0"
+				max="5.0"
+				bind:value
+				class="range w-full range-warning"
+				step="0.5"
+			/>
+			<div class="mt-2 flex justify-between px-2.5 text-xs">
+				<span>0</span>
+				<span> </span>
+				<span>1</span>
+				<span> </span>
+				<span>2</span>
+				<span> </span>
+				<span>3</span>
+				<span> </span>
+				<span>4</span>
+				<span> </span>
+				<span>5</span>
+			</div>
+		</div>
+	</label>
+	{#if option}
+		<p class="label ml-auto whitespace-pre-wrap">{option}</p>
+	{/if}
+</fieldset>

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

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    label?: string;
+    icon?: string;
+    option?: string;
+    value: any;
+    oninput?: (e: Event & {
+        currentTarget: EventTarget & HTMLInputElement;
+    }) => void;
+    onchange?: (e: Event & {
+        currentTarget: EventTarget & HTMLInputElement;
+    }) => void;
+};
+declare const Range: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Range = ReturnType<typeof Range>;
+export default Range;

package/dist/components/Textarea.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	let {
+		required,
+		readonly,
+		disabled,
+		label,
+		placeholder,
+		option,
+		value = $bindable(),
+		class: className,
+		oninput,
+		onchange
+	}: {
+		required?: boolean;
+		readonly?: boolean;
+		disabled?: boolean;
+		label?: string;
+		placeholder?: string;
+		option?: string;
+		value: string;
+		class?: string;
+		oninput?: (e: Event & { currentTarget: EventTarget & HTMLTextAreaElement }) => void;
+		onchange?: (e: Event & { currentTarget: EventTarget & HTMLTextAreaElement }) => void;
+	} = $props();
+</script>
+
+<fieldset class="fieldset w-full">
+	{#if label}
+		<legend class="fieldset-legend whitespace-nowrap">{label}</legend>
+	{/if}
+	<textarea
+		class="textarea w-full rounded-3xl p-4 {className}"
+		{required}
+		{readonly}
+		{disabled}
+		{placeholder}
+		bind:value
+		{oninput}
+		{onchange}></textarea>
+	{#if option}
+		<p class="label ml-auto whitespace-pre-wrap">{option}</p>
+	{/if}
+</fieldset>

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

@@ -0,0 +1,19 @@
+type $$ComponentProps = {
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    label?: string;
+    placeholder?: string;
+    option?: string;
+    value: string;
+    class?: string;
+    oninput?: (e: Event & {
+        currentTarget: EventTarget & HTMLTextAreaElement;
+    }) => void;
+    onchange?: (e: Event & {
+        currentTarget: EventTarget & HTMLTextAreaElement;
+    }) => void;
+};
+declare const Textarea: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/constants/index.d.ts

@@ -8,5 +8,9 @@ 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 RATING_OPTIONS: {
+    value: number;
+    label: string;
+}[];
 export declare const PREFECTURE_SVG: Record<string, string>;
 export declare const POI_ICON: Record<string, string>;

package/dist/constants/index.js

@@ -17,6 +17,19 @@ export const PRIORITIES_WITHOUT_LOG = [
     { label: 'コンテンツ', value: '20' },
     { label: 'アメニティ', value: '10' }
 ];
+export const RATING_OPTIONS = [
+    { value: 0, label: '0' },
+    { value: 0.5, label: '0.5' },
+    { value: 1.0, label: '1.0' },
+    { value: 1.5, label: '1.5' },
+    { value: 2.0, label: '2.0' },
+    { value: 2.5, label: '2.5' },
+    { value: 3.0, label: '3.0' },
+    { value: 3.5, label: '3.5' },
+    { value: 4.0, label: '4.0' },
+    { value: 4.5, label: '4.5' },
+    { value: 5.0, label: '5.0' }
+];
 import { 北海道, 青森県, 岩手県, 宮城県, 秋田県, 山形県, 福島県, 茨城県, 栃木県, 群馬県, 埼玉県, 千葉県, 東京都, 神奈川県, 新潟県, 富山県, 石川県, 福井県, 山梨県, 長野県, 岐阜県, 静岡県, 愛知県, 三重県, 滋賀県, 京都府, 大阪府, 兵庫県, 奈良県, 和歌山県, 鳥取県, 島根県, 岡山県, 広島県, 山口県, 徳島県, 香川県, 愛媛県, 高知県, 福岡県, 佐賀県, 長崎県, 熊本県, 大分県, 宮崎県, 鹿児島県, 沖縄県 } from '..';
 export const PREFECTURE_SVG = {
     北海道: 北海道,

package/dist/image.d.ts

@@ -0,0 +1,3 @@
+export declare const image: {
+    optimize: (file: File | Blob, callback: Function) => Promise<void>;
+};

package/dist/image.js

@@ -0,0 +1,41 @@
+import { browser } from '$app/environment';
+// 元ファイルがこのサイズ以下なら圧縮処理自体をスキップする（劣化防止）
+const SKIP_COMPRESSION_THRESHOLD_MB = 1;
+let heic2any = null;
+let imageCompression = null;
+const loadLibs = async () => {
+    if (!heic2any) {
+        heic2any = (await import('heic2any')).default;
+        imageCompression = (await import('browser-image-compression')).default;
+    }
+};
+const convert = async (file) => {
+    await loadLibs();
+    return await imageCompression(new File([file], '', { type: file.type }), {
+        maxSizeMB: 3,
+        maxWidthOrHeight: 2048,
+        useWebWorker: true,
+        fileType: 'image/webp',
+        initialQuality: 1
+    });
+};
+export const image = {
+    optimize: async (file, callback) => {
+        if (!browser)
+            return;
+        await loadLibs();
+        if (file.type === 'image/heic' || file.name.endsWith('.HEIC')) {
+            file = (await heic2any({
+                blob: file,
+                toType: 'image/jpeg',
+                quality: 1
+            }));
+        }
+        // 元々十分小さいファイルは再エンコードせずそのまま使う
+        const fileSizeMB = file.size / 1024 / 1024;
+        const convertedImage = fileSizeMB <= SKIP_COMPRESSION_THRESHOLD_MB ? file : await convert(file);
+        const reader = new FileReader();
+        reader.onload = () => callback(reader.result);
+        reader.readAsDataURL(convertedImage);
+    }
+};

package/dist/index.d.ts

@@ -11,6 +11,9 @@ 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 Map } from './components/Map.svelte';
+export { default as Range } from './components/Range.svelte';
+export { default as Textarea } from './components/Textarea.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';
@@ -250,5 +253,6 @@ export * as firebase from './auth';
 export { auth } from './firebase';
 export * as modal from './modals-context.ts';
 export * from './utils/index.ts';
-export { MAP_ATTRIBUTION, MAP_DEFAULT_ICON_SIZE, PRIORITIES, MAP_DEFAULT_ICON_ANCHOR, MAP_MAX_ZOOM, MAP_DEFAULT_LATITUDE, MAP_DEFAULT_LONGITUDE, PRIORITIES_WITHOUT_LOG, PREFECTURE_SVG, POI_ICON } from './constants/index.ts';
-export type { BtnType, InputType, AlertType, AlertState, BreadcrumbsItem, FilterItem, Priority, PriorityChoice, ModalsContext, Data, ContentAdditionalInfo, ContentAdmin, ContentImage, ContentReview, ContentMinimal, ContentCasual, ContentFormal, ContentGeo, ContentChildren, ContentReviews, Account, Dashboard, DashboardPref } from './types/index.ts';
+export { image } from './image.ts';
+export { MAP_ATTRIBUTION, MAP_DEFAULT_ICON_SIZE, PRIORITIES, RATING_OPTIONS, MAP_DEFAULT_ICON_ANCHOR, MAP_MAX_ZOOM, MAP_DEFAULT_LATITUDE, MAP_DEFAULT_LONGITUDE, PRIORITIES_WITHOUT_LOG, PREFECTURE_SVG, POI_ICON } from './constants/index.ts';
+export type { BtnType, InputType, AlertType, ImageType, AlertState, BreadcrumbsItem, FilterItem, Priority, PriorityChoice, ModalsContext, Data, ContentAdditionalInfo, ContentAdmin, ContentImage, ContentReview, ContentMinimal, ContentCasual, ContentFormal, ContentGeo, ContentChildren, ContentReviews, Account, Dashboard, DashboardPref } from './types/index.ts';

package/dist/index.js

@@ -12,6 +12,9 @@ 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 Map } from './components/Map.svelte';
+export { default as Range } from './components/Range.svelte';
+export { default as Textarea } from './components/Textarea.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';
@@ -251,4 +254,5 @@ export * as firebase from './auth';
 export { auth } from './firebase';
 export * as modal from "./modals-context.js";
 export * from "./utils/index.js";
-export { MAP_ATTRIBUTION, MAP_DEFAULT_ICON_SIZE, PRIORITIES, MAP_DEFAULT_ICON_ANCHOR, MAP_MAX_ZOOM, MAP_DEFAULT_LATITUDE, MAP_DEFAULT_LONGITUDE, PRIORITIES_WITHOUT_LOG, PREFECTURE_SVG, POI_ICON } from "./constants/index.js";
+export { image } from "./image.js";
+export { MAP_ATTRIBUTION, MAP_DEFAULT_ICON_SIZE, PRIORITIES, RATING_OPTIONS, MAP_DEFAULT_ICON_ANCHOR, MAP_MAX_ZOOM, MAP_DEFAULT_LATITUDE, MAP_DEFAULT_LONGITUDE, PRIORITIES_WITHOUT_LOG, PREFECTURE_SVG, POI_ICON } from "./constants/index.js";

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 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 type ImageType = 'contents' | 'general_user' | 'admin';
 export interface AlertState {
     show: boolean;
     message: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@3birds/midori-ui",
-	"version": "0.0.48",
+	"version": "0.0.50",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -57,6 +57,8 @@
 		"vite": "^8.0.16"
 	},
 	"dependencies": {
-		"firebase": "^12.0.0"
+		"browser-image-compression": "^2.0.2",
+		"firebase": "^12.0.0",
+		"heic2any": "^0.0.4"
 	}
 }