pxd 0.0.64 → 0.1.2

package/dist/components/calendar/index.vue

@@ -0,0 +1,247 @@
+<script setup>
+import ChevronDoubleLeftIcon from "@gdsicon/vue/chevron-double-left";
+import ChevronDoubleRightIcon from "@gdsicon/vue/chevron-double-right";
+import ChevronRightIcon from "@gdsicon/vue/chevron-right";
+import { computed, shallowRef, watch } from "vue";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { dayjs } from "../../utils/date.js";
+import { isNil, isUndefined } from "../../utils/is.js";
+import PCalendarDay from "../_internal/calendar-day.vue";
+import PButton from "../button/index.vue";
+defineOptions({
+	name: "PCalendar",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const props = defineProps({
+	compact: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	modelValue: {
+		type: [
+			Number,
+			String,
+			Date,
+			null
+		],
+		required: false
+	},
+	defaultValue: {
+		type: [
+			Number,
+			String,
+			Date,
+			null
+		],
+		required: false,
+		default: null
+	},
+	valueFormat: {
+		type: String,
+		required: false,
+		default: "YYYY-MM-DD"
+	},
+	isDateDisabled: {
+		type: Function,
+		required: false
+	}
+});
+const emits = defineEmits([
+	"panel-change",
+	"change",
+	"update:modelValue"
+]);
+const configProvider = useConfigProvider();
+const today = dayjs();
+const todayKey = today.format("YYYY-MM-DD");
+const uncontrolledValue = shallowRef(props.defaultValue);
+const panelDate = shallowRef(dayjs(props.modelValue ?? props.defaultValue ?? today.valueOf()));
+const selectedValue = computed(() => {
+	return isUndefined(props.modelValue) ? uncontrolledValue.value : props.modelValue;
+});
+const selectedDateKey = computed(() => {
+	return isNil(selectedValue.value) ? null : dayjs(selectedValue.value).format("YYYY-MM-DD");
+});
+const weekDays = computed(() => {
+	const days = configProvider.locale.date.day;
+	return [...days.slice(1), days[0]];
+});
+const calendarDays = computed(() => {
+	const firstDayOfMonth = panelDate.value.startOf("month");
+	const startOffset = (firstDayOfMonth.day() + 6) % 7;
+	const firstCalendarDay = firstDayOfMonth.subtract(startOffset, "day");
+	const currentMonthKey = panelDate.value.format("YYYY-MM");
+	return Array.from({ length: 42 }, (_, index) => {
+		const date = firstCalendarDay.add(index, "day");
+		const key = date.format("YYYY-MM-DD");
+		const timestamp = date.valueOf();
+		return {
+			key,
+			timestamp,
+			year: date.year(),
+			month: date.month() + 1,
+			date: date.date(),
+			isCurrentMonth: key.slice(0, 7) === currentMonthKey,
+			isToday: key === todayKey,
+			isDisabled: props.isDateDisabled?.(timestamp) ?? false
+		};
+	});
+});
+const panelInfo = computed(() => ({
+	year: panelDate.value.year(),
+	month: panelDate.value.month() + 1
+}));
+function emitPanelChange() {
+	emits("panel-change", panelInfo.value);
+}
+function setPanelDate(date) {
+	if (date.year() === panelDate.value.year() && date.month() === panelDate.value.month()) {
+		return;
+	}
+	panelDate.value = date;
+	emitPanelChange();
+}
+function changeMonth(offset) {
+	setPanelDate(panelDate.value.add(offset, "month"));
+}
+function changeYear(offset) {
+	setPanelDate(panelDate.value.add(offset, "year"));
+}
+function formatModelValue(timestamp) {
+	if (props.valueFormat === "timestamp") {
+		return timestamp;
+	}
+	return dayjs(timestamp).format(props.valueFormat);
+}
+function selectDate(day) {
+	if (day.isDisabled) {
+		return;
+	}
+	const value = formatModelValue(day.timestamp);
+	if (isUndefined(props.modelValue)) {
+		uncontrolledValue.value = value;
+	}
+	emits("change", value);
+	emits("update:modelValue", value);
+}
+function selectToday() {
+	setPanelDate(today);
+	const todayDate = calendarDays.value.find((day) => day.key === todayKey);
+	if (todayDate) {
+		selectDate(todayDate);
+	}
+}
+watch(() => props.modelValue, (value) => {
+	if (isNil(value)) {
+		return;
+	}
+	setPanelDate(dayjs(value));
+});
+</script>
+
+<template>
+  <div data-calendar class="pxd-calendar w-full max-w-full text-foreground" v-bind="$attrs">
+    <div class="gap-1 mbe-2 flex items-center">
+      <div
+        class="pxd-calendar--date min-w-0 ps-1 flex-1 truncate"
+        :class="{ 'font-medium': !compact }"
+      >
+        <slot name="header" v-bind="panelInfo">
+          {{ panelInfo.year }} {{ configProvider.locale.date.month[panelInfo.month - 1] }}
+        </slot>
+      </div>
+
+      <PButton
+        icon
+        size="sm"
+        variant="ghost"
+        class="text-foreground-secondary"
+        aria-label="Previous year"
+        @click="changeYear(-1)"
+      >
+        <ChevronDoubleLeftIcon class="size-4" aria-hidden="true" />
+      </PButton>
+      <PButton
+        icon
+        size="sm"
+        variant="ghost"
+        class="text-foreground-secondary"
+        aria-label="Previous month"
+        @click="changeMonth(-1)"
+      >
+        <ChevronRightIcon class="size-4 rotate-180" aria-hidden="true" />
+      </PButton>
+
+      <PButton size="sm" @click="selectToday">
+        {{ configProvider.locale.date.today }}
+      </PButton>
+
+      <PButton
+        icon
+        size="sm"
+        variant="ghost"
+        class="text-foreground-secondary"
+        aria-label="Next month"
+        @click="changeMonth(1)"
+      >
+        <ChevronRightIcon class="size-4" aria-hidden="true" />
+      </PButton>
+      <PButton
+        icon
+        size="sm"
+        variant="ghost"
+        class="text-foreground-secondary"
+        aria-label="Next year"
+        @click="changeYear(1)"
+      >
+        <ChevronDoubleRightIcon class="size-4" aria-hidden="true" />
+      </PButton>
+    </div>
+
+    <div
+      class="pxd-calendar--grid grid grid-cols-7 select-none"
+      :class="compact ? 'gap-1' : 'border-t border-l'"
+      role="grid"
+    >
+      <div
+        v-for="weekDay in weekDays"
+        :key="weekDay"
+        class="pxd-calendar--grid-head text-xs font-medium text-gray-800"
+        :class="compact ? 'min-h-6 py-1 text-center' : 'p-2 border-r border-b text-right'"
+        role="columnheader"
+      >
+        {{ weekDay }}
+      </div>
+
+      <template v-if="$slots.item">
+        <PCalendarDay
+          v-for="day in calendarDays"
+          :key="day.key"
+          :day="day"
+          :compact="compact"
+          :selected="day.key === selectedDateKey"
+          @change="selectDate"
+        >
+          <template #default="slotProps">
+            <slot name="item" v-bind="slotProps" />
+          </template>
+        </PCalendarDay>
+      </template>
+      <template v-else>
+        <PCalendarDay
+          v-for="day in calendarDays"
+          :key="day.key"
+          :day="day"
+          :compact="compact"
+          :selected="day.key === selectedDateKey"
+          @change="selectDate"
+        />
+      </template>
+    </div>
+  </div>
+</template>

package/dist/components/calendar/types.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentDateTimeValue } from '../../types/shared'
+
+export interface CalendarDateInfo {
+  year: number
+  month: number
+  date: number
+}
+
+export interface CalendarPanelInfo {
+  year: number
+  month: number
+}
+
+export interface CalendarDay {
+  key: string
+  timestamp: number
+  year: number
+  month: number
+  date: number
+  isCurrentMonth: boolean
+  isToday: boolean
+  isDisabled: boolean
+}
+
+export interface CalendarProps {
+  compact?: boolean
+  modelValue?: ComponentDateTimeValue
+  defaultValue?: ComponentDateTimeValue
+  valueFormat?: string
+  isDateDisabled?: (timestamp: number) => boolean
+}
+
+export interface CalendarEmits {
+  'panel-change': [info: CalendarPanelInfo]
+  change: [ComponentDateTimeValue]
+  'update:modelValue': [ComponentDateTimeValue]
+}

package/dist/components/card/index.d.vue.ts

@@ -0,0 +1,21 @@
+import type { CardProps } from './types';
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    footer?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {
+    shape: import("../../types/shared/props.js").ComponentShape;
+    border: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/card/index.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+defineOptions({
+	name: "PCard",
+	inheritAttrs: false
+});
+const props = defineProps({
+	shape: {
+		type: String,
+		required: false,
+		default: "default"
+	},
+	border: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
+});
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-card border bg-background-100",
+	variants: {
+		shape: {
+			default: "rounded-md",
+			square: "rounded-none",
+			rounded: "rounded-xl"
+		},
+		border: { false: "border-transparent" }
+	}
+}, { selection: () => ({
+	shape: props.shape,
+	border: props.border
+}) });
+</script>
+
+<template>
+  <div data-card :class="classes" v-bind="attrs">
+    <div v-if="$slots.header" class="pxd-card--header text-trim-both">
+      <slot name="header" />
+    </div>
+    <div class="pxd-card--content p-4 text-trim-both">
+      <slot />
+    </div>
+    <div v-if="$slots.footer" class="pxd-card--footer text-trim-both">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/dist/components/card/types.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentShape } from '../../types/shared'
+
+export interface CardProps {
+  shape?: ComponentShape
+  border?: boolean
+}

package/dist/components/carousel/index.d.vue.ts

@@ -1,10 +1,13 @@
 import type { CarouselProps } from './types';
-declare var __VLS_1: {}, __VLS_3: {
+declare var __VLS_1: {
+    item: import("./types").CarouselOption;
+    index: number;
+}, __VLS_3: {
     current: number;
     total: number;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    item?: (props: typeof __VLS_1) => any;
 } & {
     indicator?: (props: typeof __VLS_3) => any;
 };
@@ -13,16 +16,17 @@ declare const __VLS_base: import("vue").DefineComponent<CarouselProps, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<CarouselProps> & Readonly<{
     onChange?: ((index: number) => any) | undefined;
 }>, {
-    direction: import("../../types/shared").ComponentDirection;
     height: number | string;
+    options: import("./types").CarouselOption[];
     index: number;
     loop: boolean;
     arrow: boolean;
     autoplay: boolean;
     interval: number;
     indicator: boolean;
+    direction: import("../../types/shared/props.js").ComponentDirection;
     indicatorType: "dot" | "line";
-    indicatorPosition: import("../../types/shared").BasePosition | "center";
+    indicatorPosition: import("../../types/shared/props.js").BasePosition | "center";
     pauseOnHover: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;