日历 AsamCalendar

<template>
	<AsamCalendar v-model="date">
		<template #date-cell="{ data }">
			<span>{{ data.day }}{{ data.isSelected ? ' · 当前' : '' }}</span>
		</template>
	</AsamCalendar>
	<p class="example-paragraph" role="status">{{ date.toLocaleDateString() }}</p>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamCalendarBasicDemo' });
import { ref } from 'vue';
import { AsamCalendar } from '@asam-ui/ui';
const date = ref(new Date(2026, 9, 1));
</script>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

<template>
	<AsamCalendar v-model="date">
		<template #date-cell="{ data }">
			<span>{{ data.day }}{{ data.isSelected ? ' · 当前' : '' }}</span>
		</template>
	</AsamCalendar>
	<p class="example-paragraph" role="status">{{ date.toLocaleDateString() }}</p>
</template>

<script setup>
defineOptions({ name: 'AsamCalendarBasicDemo' });
import { ref } from 'vue';
import { AsamCalendar } from '@asam-ui/ui';
const date = ref(new Date(2026, 9, 1));
</script>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

<template>
	<AsamCalendar v-model="value" />
</template>

<script lang="ts" setup>
import { AsamCalendar } from '@asam-ui/ui';
defineOptions({ name: 'AsamCalendarofficialcalendarbasicExample' });

import { ref } from 'vue';

const value = ref(new Date());
</script>

<template>
	<AsamCalendar v-model="value" />
</template>

<script setup>
import { AsamCalendar } from '@asam-ui/ui';
defineOptions({ name: 'AsamCalendarofficialcalendarbasicExample' });
import { ref } from 'vue';
const value = ref(new Date());
</script>

<template>
	<div class="demo-root-layout">
		<AsamRadioGroup :model-value="controllerType" @update:model-value="updatecontrollerType">
			<AsamRadioButton label="select" value="select" />
			<AsamRadioButton label="button" value="button" />
		</AsamRadioGroup>

		<AsamCalendar v-model="value" :controller-type="controllerType" />
	</div>
</template>

<script lang="ts" setup>
import { AsamRadioGroup, AsamRadioButton, AsamCalendar } from '@asam-ui/ui';
defineOptions({ name: 'AsamCalendarofficialcalendarcontrollertypeExample' });

import { ref } from 'vue';

const controllerType = ref<'select' | 'button'>('select');
const value = ref(new Date());
function updatecontrollerType(value: unknown) {
	if (value === 'button' || value === 'select') controllerType.value = value;
}
</script>

<style scoped>
.demo-root-layout {
	display: flex;
	gap: var(--asam-space-md);
	flex-wrap: wrap;
	align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

<template>
	<div class="demo-root-layout">
		<AsamRadioGroup :model-value="controllerType" @update:model-value="updatecontrollerType">
			<AsamRadioButton label="select" value="select" />
			<AsamRadioButton label="button" value="button" />
		</AsamRadioGroup>

		<AsamCalendar v-model="value" :controller-type="controllerType" />
	</div>
</template>

<script setup>
import { AsamRadioGroup, AsamRadioButton, AsamCalendar } from '@asam-ui/ui';
defineOptions({ name: 'AsamCalendarofficialcalendarcontrollertypeExample' });
import { ref } from 'vue';
const controllerType = ref('select');
const value = ref(new Date());
function updatecontrollerType(value) {
	if (value === 'button' || value === 'select') controllerType.value = value;
}
</script>

<style scoped>
.demo-root-layout {
	display: flex;
	gap: var(--asam-space-md);
	flex-wrap: wrap;
	align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

<template>
	<AsamCalendar>
		<template #date-cell="{ data }">
			<p class="example-paragraph" :class="data.isSelected ? 'is-selected' : ''">
				{{ data.day.split('-').slice(1).join('-') }}
				{{ data.isSelected ? '✔️' : '' }}
			</p>
		</template>
	</AsamCalendar>
</template>
<script lang="ts" setup>
import { AsamCalendar } from '@asam-ui/ui';
defineOptions({ name: 'AsamCalendarofficialcalendarcustomizeExample' });
</script>

<style scoped>
/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */
.is-selected {
	color: var(--asam-color-primary);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

<template>
	<AsamCalendar>
		<template #date-cell="{ data }">
			<p class="example-paragraph" :class="data.isSelected ? 'is-selected' : ''">
				{{ data.day.split('-').slice(1).join('-') }}
				{{ data.isSelected ? '✔️' : '' }}
			</p>
		</template>
	</AsamCalendar>
</template>
<script setup>
import { AsamCalendar } from '@asam-ui/ui';
defineOptions({ name: 'AsamCalendarofficialcalendarcustomizeExample' });
</script>

<style scoped>
/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */
.is-selected {
	color: var(--asam-color-primary);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

<template>
	<AsamCalendar :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]" />
</template>
<script lang="ts" setup>
import { AsamCalendar } from '@asam-ui/ui';
defineOptions({ name: 'AsamCalendarofficialcalendarrangeExample' });
</script>

<template>
	<AsamCalendar :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]" />
</template>
<script setup>
import { AsamCalendar } from '@asam-ui/ui';
defineOptions({ name: 'AsamCalendarofficialcalendarrangeExample' });
</script>

<template>
	<AsamCalendar ref="calendar">
		<template #header="{ date }">
			<span>自定义头部内容</span>
			<span>{{ date }}</span>
			<AsamButtonGroup>
				<AsamButton type="default" size="small" @click="selectDate('prev-year')">
					上一年
				</AsamButton>
				<AsamButton type="default" size="small" @click="selectDate('prev-month')">
					上个月
				</AsamButton>
				<AsamButton type="default" size="small" @click="selectDate('today')"
					>今天</AsamButton
				>
				<AsamButton type="default" size="small" @click="selectDate('next-month')">
					下个月
				</AsamButton>
				<AsamButton type="default" size="small" @click="selectDate('next-year')">
					下一年
				</AsamButton>
			</AsamButtonGroup>
		</template>
	</AsamCalendar>
</template>

<script lang="ts" setup>
import { AsamCalendar, AsamButtonGroup, AsamButton } from '@asam-ui/ui';
defineOptions({ name: 'AsamCalendarofficialcalendarheaderExample' });

import { ref } from 'vue';

import type {
	AsamCalendarDateType as CalendarDateType,
	AsamCalendarInstance as CalendarInstance
} from '@asam-ui/ui';

const calendar = ref<CalendarInstance>();
const selectDate = (val: CalendarDateType) => {
	if (!calendar.value) return;
	calendar.value.selectDate(val);
};
</script>

<template>
	<AsamCalendar ref="calendar">
		<template #header="{ date }">
			<span>自定义头部内容</span>
			<span>{{ date }}</span>
			<AsamButtonGroup>
				<AsamButton type="default" size="small" @click="selectDate('prev-year')">
					上一年
				</AsamButton>
				<AsamButton type="default" size="small" @click="selectDate('prev-month')">
					上个月
				</AsamButton>
				<AsamButton type="default" size="small" @click="selectDate('today')"
					>今天</AsamButton
				>
				<AsamButton type="default" size="small" @click="selectDate('next-month')">
					下个月
				</AsamButton>
				<AsamButton type="default" size="small" @click="selectDate('next-year')">
					下一年
				</AsamButton>
			</AsamButtonGroup>
		</template>
	</AsamCalendar>
</template>

<script setup>
import { AsamCalendar, AsamButtonGroup, AsamButton } from '@asam-ui/ui';
defineOptions({ name: 'AsamCalendarofficialcalendarheaderExample' });
import { ref } from 'vue';
const calendar = ref();
const selectDate = (val) => {
	if (!calendar.value) return;
	calendar.value.selectDate(val);
};
</script>

<template>
	<section class="demo-layout-1">
		<!-- prettier-ignore -->
		<AsamCalendar
			ref="calendar"
			v-model="value"
			controller-type="select"
			:formatter="formatter"
		/>
		<!-- prettier-ignore -->
		<AsamButton native-type="submit" type="default" @click="calendar?.selectDate('next-year')">下一年</AsamButton
		><AsamButton native-type="submit" type="default" @click="calendar?.selectDate('prev-month')"
			>上一月</AsamButton
		><AsamButton native-type="submit" type="default" @click="calendar?.selectDate('today')"
			>今天</AsamButton
		>
		<output>{{ value }}</output>
	</section>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCalendarformatterinstanceExample' });

import { ref } from 'vue';
import { AsamButton, AsamCalendar } from '@asam-ui/ui';
import type { AsamCalendarInstance } from '@asam-ui/ui';
const value = ref(new Date(2026, 9, 4));
const calendar = ref<AsamCalendarInstance>();
const formatter = (value: number, type: 'year' | 'month') =>
	type === 'year' ? value + '年' : value + '月';
</script>

<style scoped>
.demo-layout-1 {
	display: grid;
	gap: var(--asam-space-md);
}
</style>

<template>
	<section class="demo-layout-1">
		<!-- prettier-ignore -->
		<AsamCalendar
			ref="calendar"
			v-model="value"
			controller-type="select"
			:formatter="formatter"
		/>
		<!-- prettier-ignore -->
		<AsamButton native-type="submit" type="default" @click="calendar?.selectDate('next-year')">下一年</AsamButton
		><AsamButton native-type="submit" type="default" @click="calendar?.selectDate('prev-month')"
			>上一月</AsamButton
		><AsamButton native-type="submit" type="default" @click="calendar?.selectDate('today')"
			>今天</AsamButton
		>
		<output>{{ value }}</output>
	</section>
</template>
<script setup>
defineOptions({ name: 'AsamCalendarformatterinstanceExample' });
import { ref } from 'vue';
import { AsamButton, AsamCalendar } from '@asam-ui/ui';
const value = ref(new Date(2026, 9, 4));
const calendar = ref();
const formatter = (value, type) => (type === 'year' ? value + '年' : value + '月');
</script>

<style scoped>
.demo-layout-1 {
	display: grid;
	gap: var(--asam-space-md);
}
</style>

<!-- 此演示还使用 dayjs，请按官网对应指南配置这些公开依赖。 -->
<template><StandaloneDemo /></template>

<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
import * as __external2 from "dayjs";
import * as __external3 from "dayjs/locale/zh-cn.js";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true },
"dayjs": { ...__external2, __esModule: true },
"dayjs/locale/zh-cn.js": { ...__external3, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "demo-layout-1" };
const vue_3: any = require("vue");
const date_locale_session_js_1: any = require("./date-locale-session.js");
const ui_1: any = require("@asam-ui/ui");
const locale_js_1: any = require("./locale.js");
exports.default = (0, vue_1.defineComponent)({
    ...{ name: 'AsamCalendarAdvancedContractExample' },
    __name: 'Demo',
    setup(__props?: any) {
        const chinese: any = (0, vue_3.ref)(true);
        // Fixed Calendar reads the global week start once when its table is created.
        const dateLocaleSession: any = (0, date_locale_session_js_1.createCalendarDateLocaleSession)();
        (0, vue_3.watch)(chinese, (enabled?: any) => dateLocaleSession.select(enabled ? 'zh-cn' : 'en'), {
            immediate: true,
            flush: 'sync'
        });
        (0, vue_3.onUnmounted)(dateLocaleSession.release);
        const changes: any = (0, vue_3.ref)(0);
        const value: any = (0, vue_3.ref)(new Date(2026, 9, 4));
        const configuration: any = {
            controllerType: 'select',
            formatter: (value?: any, type?: any) => value + (type === 'year' ? '年' : '月')
        };
        return (_ctx?: any, _cache?: any) => {
            return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
                (0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
                    modelValue: chinese.value,
                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((chinese).value = $event))
                }, {
                    default: (0, vue_2.withCtx)(() => [...(_cache[3] || (_cache[3] = [
                            (0, vue_2.createTextVNode)("中文本地化", -1 /* CACHED */)
                        ]))]),
                    _: 1 /* STABLE */
                }, 8 /* PROPS */, ["modelValue"]),
                (0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamConfigProvider), {
                    locale: chinese.value ? (0, vue_2.unref)(locale_js_1.zhCn) : (0, vue_2.unref)(locale_js_1.en)
                }, {
                    default: (0, vue_2.withCtx)(() => [
                        ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamCalendar), (0, vue_2.mergeProps)({
                            key: chinese.value ? 'zh-cn' : 'en',
                            modelValue: value.value,
                            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((value).value = $event))
                        }, configuration, {
                            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event?: any) => (changes.value++))
                        }), null, 16 /* FULL_PROPS */, ["modelValue"]))
                    ]),
                    _: 1 /* STABLE */
                }, 8 /* PROPS */, ["locale"]),
                (0, vue_2.createElementVNode)("output", null, "模型 " + (0, vue_2.toDisplayString)(value.value) + "；模型更新次数 " + (0, vue_2.toDisplayString)(changes.value), 1 /* TEXT */)
            ]));
        };
    }
});

exports.default.__scopeId = "data-v-d3d13e2b";
},
"locale.ts": (module: any, exports: any, require: any) => {
"use strict";
var __importDefault: any = function (mod?: any) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.en = exports.zhCn = void 0;
const dayjs_1: any = __importDefault(require("dayjs"));
const zh_cn_js_1: any = __importDefault(require("dayjs/locale/zh-cn.js"));
// Register date locale on the same public Day.js instance used by the components.
// The third argument preserves the application default; the provider selects per component.
dayjs_1.default.locale(zh_cn_js_1.default, undefined, true);
/** Application-authored dictionary, supplied through the public provider. */
exports.zhCn = {
    name: 'zh-cn',
    el: {
        datepicker: {
            now: '当前时刻',
            today: '当前日期',
            cancel: '取消选择',
            clear: '清除选择',
            confirm: '应用选择',
            dateTablePrompt: '方向键选日期，回车确认',
            monthTablePrompt: '方向键选月份',
            quarterTablePrompt: '方向键选季度',
            yearTablePrompt: '方向键选年份',
            selectedDate: '当前选择',
            selectDate: '选择日期',
            selectTime: '选择时间',
            startDate: '起始日期',
            startTime: '起始时间',
            endDate: '结束日期',
            endTime: '结束时间',
            prevYear: '上一年',
            nextYear: '下一年',
            prevMonth: '上一月',
            nextMonth: '下一月',
            year: '年',
            ...Object.fromEntries(Array.from({ length: 12 }, (_?: any, index?: any) => ['month' + (index + 1), index + 1 + '月'])),
            weeks: {
                sun: '周日',
                mon: '周一',
                tue: '周二',
                wed: '周三',
                thu: '周四',
                fri: '周五',
                sat: '周六'
            },
            months: {
                jan: '一月',
                feb: '二月',
                mar: '三月',
                apr: '四月',
                may: '五月',
                jun: '六月',
                jul: '七月',
                aug: '八月',
                sep: '九月',
                oct: '十月',
                nov: '十一月',
                dec: '十二月'
            },
            quarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }
        },
        calendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },
        select: {
            loading: '正在读取',
            noMatch: '没有匹配时间',
            noData: '没有可选时间',
            placeholder: '选择时间'
        }
    }
};
exports.en = {
    name: 'en',
    el: {
        datepicker: {
            ...exports.zhCn.el.datepicker,
            now: 'Now',
            today: 'Today',
            cancel: 'Cancel',
            clear: 'Clear',
            confirm: 'OK',
            dateTablePrompt: 'Use arrows to select a date',
            monthTablePrompt: 'Use arrows to select a month',
            quarterTablePrompt: 'Use arrows to select a quarter',
            yearTablePrompt: 'Use arrows to select a year',
            selectedDate: 'Selected date',
            selectDate: 'Select date',
            selectTime: 'Select time',
            startDate: 'Start date',
            startTime: 'Start time',
            endDate: 'End date',
            endTime: 'End time',
            prevYear: 'Previous year',
            nextYear: 'Next year',
            prevMonth: 'Previous month',
            nextMonth: 'Next month',
            year: '',
            ...Object.fromEntries([
                'January',
                'February',
                'March',
                'April',
                'May',
                'June',
                'July',
                'August',
                'September',
                'October',
                'November',
                'December'
            ].map((month?: any, index?: any) => ['month' + (index + 1), month])),
            weeks: {
                sun: 'Sun',
                mon: 'Mon',
                tue: 'Tue',
                wed: 'Wed',
                thu: 'Thu',
                fri: 'Fri',
                sat: 'Sat'
            },
            months: {
                jan: 'Jan',
                feb: 'Feb',
                mar: 'Mar',
                apr: 'Apr',
                may: 'May',
                jun: 'Jun',
                jul: 'Jul',
                aug: 'Aug',
                sep: 'Sep',
                oct: 'Oct',
                nov: 'Nov',
                dec: 'Dec'
            },
            quarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }
        },
        calendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },
        select: {
            loading: 'Loading times',
            noMatch: 'No matching time',
            noData: 'No available time',
            placeholder: 'Select a time'
        }
    }
};


},
"date-locale-session.ts": (module: any, exports: any, require: any) => {
"use strict";
var __importDefault: any = function (mod?: any) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createCalendarDateLocaleSession = createCalendarDateLocaleSession;
const dayjs_1: any = __importDefault(require("dayjs"));
/** Own only the example's global date-locale changes; no native instance or private API. */
function createCalendarDateLocaleSession() {
    const sessions: any = ((globalThis as any).asamCalendarAdvancedExampleLocalesV1 ??= new WeakMap());
    let session: any = sessions.get(dayjs_1.default);
    if (!session) {
        const baseline: any = dayjs_1.default.locale();
        session = { baseline, lastWritten: baseline, sequence: 0, selections: new Map() };
        sessions.set(dayjs_1.default, session);
    }
    const state: any = session;
    const token: any = Symbol('calendar-example');
    let released: any = false;
    const observeExternalLocale: any = () => {
        const current: any = dayjs_1.default.locale();
        if (current !== state.lastWritten)
            state.baseline = current;
    };
    const write: any = (locale?: any) => {
        state.lastWritten = dayjs_1.default.locale(locale);
    };
    return {
        select(locale?: any) {
            if (released)
                return;
            observeExternalLocale();
            state.selections.set(token, { locale, order: ++state.sequence });
            write(locale);
        },
        release() {
            if (released)
                return;
            released = true;
            observeExternalLocale();
            state.selections.delete(token);
            const remaining: any = [...state.selections.values()].sort((a?: any, b?: any) => b.order - a.order)[0];
            write(remaining?.locale ?? state.baseline);
            if (!state.selections.size)
                sessions.delete(dayjs_1.default);
        }
    };
}


},
};
const __dependencies: any = {"Demo.vue":{"./date-locale-session.js":"date-locale-session.ts","./locale.js":"locale.ts"},"locale.ts":{},"date-locale-session.ts":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
 if (__external[id]) return __external[id];
 if (__cache[id]) return __cache[id].exports;
 const module: any = { exports: {} };
 __cache[id] = module;
 __modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
 return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>

<style>

.demo-layout-1[data-v-d3d13e2b] {
	display: grid;
	gap: var(--asam-space-md);
}

</style>

<!-- 此演示还使用 dayjs，请按官网对应指南配置这些公开依赖。 -->
<template><StandaloneDemo /></template>

<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
import * as __external2 from "dayjs";
import * as __external3 from "dayjs/locale/zh-cn.js";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true },
"dayjs": { ...__external2, __esModule: true },
"dayjs/locale/zh-cn.js": { ...__external3, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "demo-layout-1" };
const vue_2 = require("vue");
const date_locale_session_js_1 = require("./date-locale-session.js");
const ui_1 = require("@asam-ui/ui");
const locale_js_1 = require("./locale.js");
exports.default = Object.assign({ name: 'AsamCalendarAdvancedContractExample' }, {
    __name: 'Demo',
    setup(__props) {
        const chinese = (0, vue_2.ref)(true);
        // Fixed Calendar reads the global week start once when its table is created.
        const dateLocaleSession = (0, date_locale_session_js_1.createCalendarDateLocaleSession)();
        (0, vue_2.watch)(chinese, (enabled) => dateLocaleSession.select(enabled ? 'zh-cn' : 'en'), {
            immediate: true,
            flush: 'sync'
        });
        (0, vue_2.onUnmounted)(dateLocaleSession.release);
        const changes = (0, vue_2.ref)(0);
        const value = (0, vue_2.ref)(new Date(2026, 9, 4));
        const configuration = {
            controllerType: 'select',
            formatter: (value, type) => value + (type === 'year' ? '年' : '月')
        };
        return (_ctx, _cache) => {
            return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
                (0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
                    modelValue: chinese.value,
                    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((chinese).value = $event))
                }, {
                    default: (0, vue_1.withCtx)(() => [...(_cache[3] || (_cache[3] = [
                            (0, vue_1.createTextVNode)("中文本地化", -1 /* CACHED */)
                        ]))]),
                    _: 1 /* STABLE */
                }, 8 /* PROPS */, ["modelValue"]),
                (0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamConfigProvider), {
                    locale: chinese.value ? (0, vue_1.unref)(locale_js_1.zhCn) : (0, vue_1.unref)(locale_js_1.en)
                }, {
                    default: (0, vue_1.withCtx)(() => [
                        ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamCalendar), (0, vue_1.mergeProps)({
                            key: chinese.value ? 'zh-cn' : 'en',
                            modelValue: value.value,
                            "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((value).value = $event))
                        }, configuration, {
                            "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => (changes.value++))
                        }), null, 16 /* FULL_PROPS */, ["modelValue"]))
                    ]),
                    _: 1 /* STABLE */
                }, 8 /* PROPS */, ["locale"]),
                (0, vue_1.createElementVNode)("output", null, "模型 " + (0, vue_1.toDisplayString)(value.value) + "；模型更新次数 " + (0, vue_1.toDisplayString)(changes.value), 1 /* TEXT */)
            ]));
        };
    }
});

exports.default.__scopeId = "data-v-d37c0cc8";
},
"locale.js": (module, exports, require) => {
"use strict";
var __importDefault = function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.en = exports.zhCn = void 0;
const dayjs_1 = __importDefault(require("dayjs"));
const zh_cn_js_1 = __importDefault(require("dayjs/locale/zh-cn.js"));
// Register date locale on the same public Day.js instance used by the components.
// The third argument preserves the application default; the provider selects per component.
dayjs_1.default.locale(zh_cn_js_1.default, undefined, true);
/** Application-authored dictionary, supplied through the public provider. */
exports.zhCn = {
    name: 'zh-cn',
    el: {
        datepicker: {
            now: '当前时刻',
            today: '当前日期',
            cancel: '取消选择',
            clear: '清除选择',
            confirm: '应用选择',
            dateTablePrompt: '方向键选日期，回车确认',
            monthTablePrompt: '方向键选月份',
            quarterTablePrompt: '方向键选季度',
            yearTablePrompt: '方向键选年份',
            selectedDate: '当前选择',
            selectDate: '选择日期',
            selectTime: '选择时间',
            startDate: '起始日期',
            startTime: '起始时间',
            endDate: '结束日期',
            endTime: '结束时间',
            prevYear: '上一年',
            nextYear: '下一年',
            prevMonth: '上一月',
            nextMonth: '下一月',
            year: '年',
            ...Object.fromEntries(Array.from({ length: 12 }, (_, index) => ['month' + (index + 1), index + 1 + '月'])),
            weeks: {
                sun: '周日',
                mon: '周一',
                tue: '周二',
                wed: '周三',
                thu: '周四',
                fri: '周五',
                sat: '周六'
            },
            months: {
                jan: '一月',
                feb: '二月',
                mar: '三月',
                apr: '四月',
                may: '五月',
                jun: '六月',
                jul: '七月',
                aug: '八月',
                sep: '九月',
                oct: '十月',
                nov: '十一月',
                dec: '十二月'
            },
            quarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }
        },
        calendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },
        select: {
            loading: '正在读取',
            noMatch: '没有匹配时间',
            noData: '没有可选时间',
            placeholder: '选择时间'
        }
    }
};
exports.en = {
    name: 'en',
    el: {
        datepicker: {
            ...exports.zhCn.el.datepicker,
            now: 'Now',
            today: 'Today',
            cancel: 'Cancel',
            clear: 'Clear',
            confirm: 'OK',
            dateTablePrompt: 'Use arrows to select a date',
            monthTablePrompt: 'Use arrows to select a month',
            quarterTablePrompt: 'Use arrows to select a quarter',
            yearTablePrompt: 'Use arrows to select a year',
            selectedDate: 'Selected date',
            selectDate: 'Select date',
            selectTime: 'Select time',
            startDate: 'Start date',
            startTime: 'Start time',
            endDate: 'End date',
            endTime: 'End time',
            prevYear: 'Previous year',
            nextYear: 'Next year',
            prevMonth: 'Previous month',
            nextMonth: 'Next month',
            year: '',
            ...Object.fromEntries([
                'January',
                'February',
                'March',
                'April',
                'May',
                'June',
                'July',
                'August',
                'September',
                'October',
                'November',
                'December'
            ].map((month, index) => ['month' + (index + 1), month])),
            weeks: {
                sun: 'Sun',
                mon: 'Mon',
                tue: 'Tue',
                wed: 'Wed',
                thu: 'Thu',
                fri: 'Fri',
                sat: 'Sat'
            },
            months: {
                jan: 'Jan',
                feb: 'Feb',
                mar: 'Mar',
                apr: 'Apr',
                may: 'May',
                jun: 'Jun',
                jul: 'Jul',
                aug: 'Aug',
                sep: 'Sep',
                oct: 'Oct',
                nov: 'Nov',
                dec: 'Dec'
            },
            quarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }
        },
        calendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },
        select: {
            loading: 'Loading times',
            noMatch: 'No matching time',
            noData: 'No available time',
            placeholder: 'Select a time'
        }
    }
};


},
"date-locale-session.js": (module, exports, require) => {
"use strict";
var __importDefault = function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createCalendarDateLocaleSession = createCalendarDateLocaleSession;
const dayjs_1 = __importDefault(require("dayjs"));
/** Own only the example's global date-locale changes; no native instance or private API. */
function createCalendarDateLocaleSession() {
    const sessions = (globalThis.asamCalendarAdvancedExampleLocalesV1 ??= new WeakMap());
    let session = sessions.get(dayjs_1.default);
    if (!session) {
        const baseline = dayjs_1.default.locale();
        session = { baseline, lastWritten: baseline, sequence: 0, selections: new Map() };
        sessions.set(dayjs_1.default, session);
    }
    const state = session;
    const token = Symbol('calendar-example');
    let released = false;
    const observeExternalLocale = () => {
        const current = dayjs_1.default.locale();
        if (current !== state.lastWritten)
            state.baseline = current;
    };
    const write = (locale) => {
        state.lastWritten = dayjs_1.default.locale(locale);
    };
    return {
        select(locale) {
            if (released)
                return;
            observeExternalLocale();
            state.selections.set(token, { locale, order: ++state.sequence });
            write(locale);
        },
        release() {
            if (released)
                return;
            released = true;
            observeExternalLocale();
            state.selections.delete(token);
            const remaining = [...state.selections.values()].sort((a, b) => b.order - a.order)[0];
            write(remaining?.locale ?? state.baseline);
            if (!state.selections.size)
                sessions.delete(dayjs_1.default);
        }
    };
}


},
};
const __dependencies = {"Demo.vue":{"./date-locale-session.js":"date-locale-session.js","./locale.js":"locale.js"},"locale.js":{},"date-locale-session.js":{}};
const __cache = Object.create(null);
function __require(id) {
 if (__external[id]) return __external[id];
 if (__cache[id]) return __cache[id].exports;
 const module = { exports: {} };
 __cache[id] = module;
 __modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
 return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>

<style>

.demo-layout-1[data-v-d37c0cc8] {
	display: grid;
	gap: var(--asam-space-md);
}

</style>