@soybeanjs/headless 0.15.5 → 0.17.0

package/dist/components/year-picker/types.d.ts

@@ -0,0 +1,207 @@
+import { Direction, UiClass } from "../../types/common.js";
+import { FormFieldCommonProps } from "../../types/component.js";
+import { PropsToContext } from "../../types/vue.js";
+import { PrimitiveProps } from "../primitive/types.js";
+import { Grid } from "../../date/types.js";
+import { Formatter } from "../../date/formatter.js";
+import { ComputedRef, HTMLAttributes, ShallowRef } from "vue";
+import { DateValue } from "@internationalized/date";
+
+//#region src/components/year-picker/types.d.ts
+/**
+ * Props for the year picker root component.
+ */
+interface YearPickerRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */Omit<HTMLAttributes, 'placeholder'> {
+  /**
+   * Default value.
+   */
+  defaultValue?: DateValue;
+  /**
+   * Default placeholder.
+   */
+  defaultPlaceholder?: DateValue;
+  /**
+   * Placeholder.
+   */
+  placeholder?: DateValue;
+  /**
+   * Current model value.
+   */
+  modelValue?: DateValue;
+  /**
+   * Min value.
+   */
+  minValue?: DateValue;
+  /**
+   * Max value.
+   */
+  maxValue?: DateValue;
+  /**
+   * Locale.
+   */
+  locale?: string;
+  /**
+   * Whether the component is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Whether the component is readonly.
+   */
+  readonly?: boolean;
+  /**
+   * Id.
+   */
+  id?: string;
+  /**
+   * Reading direction of the component.
+   */
+  dir?: Direction;
+  /**
+   * Whether the component is open by default.
+   */
+  defaultOpen?: boolean;
+  /**
+   * Whether the component is open.
+   */
+  open?: boolean;
+  /**
+   * Whether the popup is modal.
+   */
+  modal?: boolean;
+}
+/**
+ * Emits for the year picker root component.
+ */
+type YearPickerRootEmits = {
+  /**
+   * Emitted when the model value changes.
+   */
+  'update:modelValue': [date: DateValue | undefined];
+  /**
+   * Emitted when the placeholder value changes.
+   */
+  'update:placeholder': [date: DateValue];
+  /**
+   * Emitted when the open state changes.
+   */
+  'update:open': [open: boolean];
+};
+/**
+ * Props for the year picker trigger component.
+ */
+interface YearPickerTriggerProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+/**
+ * Props for the year picker popup component.
+ */
+interface YearPickerPopupProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+/**
+ * Context for the year picker root component.
+ */
+interface YearPickerRootContext extends PropsToContext<YearPickerRootProps, 'disabled' | 'readonly'> {
+  /**
+   * Locale used by the component context.
+   */
+  locale: ComputedRef<string>;
+  /**
+   * Reading direction of the component.
+   */
+  dir: ComputedRef<Direction>;
+  /**
+   * Current model value.
+   */
+  modelValue: ShallowRef<DateValue | undefined>;
+  /**
+   * Placeholder used by the component context.
+   */
+  placeholder: ShallowRef<DateValue>;
+  /**
+   * Whether the current value is invalid.
+   */
+  isInvalid: ComputedRef<boolean>;
+  /**
+   * Formatter used by the component context.
+   */
+  formatter: Formatter;
+  /**
+   * Whether the component is open.
+   */
+  open: ShallowRef<boolean | undefined>;
+  /**
+   * Popup id used by the component context.
+   */
+  popupId: string;
+  /**
+   * Display value used by the component context.
+   */
+  displayValue: ComputedRef<string>;
+  /**
+   * Heading value used by the component context.
+   */
+  headingValue: ComputedRef<string>;
+  /**
+   * Focused year used by the component context.
+   */
+  focusedYear: ShallowRef<DateValue>;
+  /**
+   * Year grid used by the component context.
+   */
+  yearGrid: ComputedRef<Grid<DateValue>>;
+  /**
+   * Min value used by the component context.
+   */
+  minValue: ComputedRef<DateValue | undefined>;
+  /**
+   * Max value used by the component context.
+   */
+  maxValue: ComputedRef<DateValue | undefined>;
+  /**
+   * Callback invoked when the year changes.
+   */
+  onYearChange: (date: DateValue) => void;
+  /**
+   * Callback invoked when the placeholder changes.
+   */
+  onPlaceholderChange: (date: DateValue) => void;
+  /**
+   * Whether the year is disabled.
+   */
+  isYearDisabled: (date: DateValue) => boolean;
+  /**
+   * Whether the year is selected.
+   */
+  isYearSelected: (date: DateValue) => boolean;
+  /**
+   * Set open used by the component context.
+   */
+  setOpen: (value: boolean) => void;
+  /**
+   * Set focused year used by the component context.
+   */
+  setFocusedYear: (date: DateValue) => void;
+  /**
+   * Prev page used by the component context.
+   */
+  prevPage: () => void;
+  /**
+   * Next page used by the component context.
+   */
+  nextPage: () => void;
+  /**
+   * Whether the previous button is disabled.
+   */
+  isPrevButtonDisabled: () => boolean;
+  /**
+   * Whether the next button is disabled.
+   */
+  isNextButtonDisabled: () => boolean;
+}
+/**
+ * Available UI slots for the year picker component.
+ */
+type YearPickerUiSlot = 'root' | 'trigger' | 'popup' | 'header' | 'heading' | 'prev' | 'next' | 'grid' | 'cellTrigger';
+/**
+ * UI class overrides for the year picker component.
+ */
+type YearPickerUi = UiClass<YearPickerUiSlot>;
+//#endregion
+export { YearPickerPopupProps, YearPickerRootContext, YearPickerRootEmits, YearPickerRootProps, YearPickerTriggerProps, YearPickerUi, YearPickerUiSlot };

package/dist/components/year-picker/year-picker-popup.js

@@ -0,0 +1 @@
+import{useForwardElement as e}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as t}from"../primitive/primitive.js";import"../primitive/index.js";import{useYearPickerRootContext as n,useYearPickerUi as r}from"./context.js";import{Fragment as ee,createBlock as i,createCommentVNode as a,createElementBlock as o,createElementVNode as s,createTextVNode as c,defineComponent as l,nextTick as u,normalizeClass as d,openBlock as f,renderList as p,renderSlot as m,toDisplayString as h,unref as g,useId as _,watch as v,withCtx as y}from"vue";const te=[`data-disabled`,`disabled`],b=[`id`],x=[`data-disabled`,`disabled`],ne=[`aria-label`,`aria-pressed`,`data-disabled`,`data-focused`,`data-selected`,`data-year-value`,`disabled`,`tabindex`,`onClick`,`onFocus`,`onKeydown`],S=l({name:`YearPickerPopup`,__name:`year-picker-popup`,props:{asChild:{type:Boolean},as:{default:`div`}},setup(l){let S=r(`popup`),C=r(`header`),w=r(`heading`),T=r(`prev`),E=r(`next`),D=r(`grid`),O=r(`cellTrigger`),{yearGrid:k,isYearDisabled:A,setFocusedYear:j,isNextButtonDisabled:M,nextPage:N,isPrevButtonDisabled:P,prevPage:F,focusedYear:I,onYearChange:L,dir:R,open:z,popupId:B,headingValue:V,formatter:H,isYearSelected:U}=n(`YearPickerPopup`),[W,G]=e(),K=_(),q=k,J=e=>{(W.value?.querySelector(`[data-year-value='${e.toString()}']`))?.focus()},Y=(e,t)=>{let n=e;for(;n>=0&&n<q.value.cells.length;){let e=q.value.cells[n];if(!A(e))return j(e),u(()=>{J(e)}),!0;n+=t}return!1},X=e=>{let t=q.value.cells.findIndex(t=>t.year===e.year),n=t===-1?0:t;Y(n,1)||Y(n,-1)},re=(e,t)=>{if(t>0){if(M())return;N()}else{if(P())return;F()}u(()=>{Y(e,t)})},Z=(e,t)=>{let n=e+t,r=t>=0?1:-1;if(n>=0&&n<q.value.cells.length){Y(n,r);return}re(n<0?q.value.cells.length+n:n-q.value.cells.length,r)},Q=()=>{P()||(F(),u(()=>{X(I.value)}))},$=()=>{M()||(N(),u(()=>{X(I.value)}))},ie=e=>{j(e)},ae=e=>{A(e)||L(e)},oe=(e,t,n)=>{if(A(e))return;let r=R.value===`rtl`?-1:1;switch(n.key){case`ArrowRight`:n.preventDefault(),Z(t,r);break;case`ArrowLeft`:n.preventDefault(),Z(t,-r);break;case`ArrowDown`:n.preventDefault(),Z(t,4);break;case`ArrowUp`:n.preventDefault(),Z(t,-4);break;case`Home`:n.preventDefault(),Y(t-t%4,1);break;case`End`:n.preventDefault(),Y(t+(3-t%4),-1);break;case`PageUp`:n.preventDefault(),Q();break;case`PageDown`:n.preventDefault(),$();break;case`Enter`:case` `:n.preventDefault(),L(e);break;default:break}};return v(()=>z.value,e=>{e&&u(()=>{X(I.value)})}),(e,n)=>g(z)?(f(),i(g(t),{key:0,id:g(B),ref:g(G),as:l.as,"as-child":l.asChild,"aria-labelledby":g(K),class:d(g(S)),"data-slot":`popup`,role:`dialog`},{default:y(()=>[s(`div`,{class:d(g(C)),"data-slot":`header`},[s(`button`,{"aria-label":`Previous years`,class:d(g(T)),"data-disabled":g(P)()?``:void 0,"data-slot":`prev`,disabled:g(P)(),type:`button`,onClick:Q},[m(e.$slots,`prev`,{disabled:g(P)()},()=>[n[0]||(n[0]=c(`Prev`,-1))])],10,te),s(`div`,{id:g(K),class:d(g(w)),"data-slot":`heading`},[m(e.$slots,`heading`,{headingValue:g(V)},()=>[c(h(g(V)),1)])],10,b),s(`button`,{"aria-label":`Next years`,class:d(g(E)),"data-disabled":g(M)()?``:void 0,"data-slot":`next`,disabled:g(M)(),type:`button`,onClick:$},[m(e.$slots,`next`,{disabled:g(M)()},()=>[n[1]||(n[1]=c(`Next`,-1))])],10,x)],2),s(`div`,{class:d(g(D)),"data-slot":`grid`},[(f(!0),o(ee,null,p(g(q).cells,(t,n)=>(f(),o(`button`,{key:t.toString(),"aria-label":g(H).fullYear(new Date(t.year,0,1)),"aria-pressed":g(U)(t)?!0:void 0,class:d(g(O)),"data-disabled":g(A)(t)?``:void 0,"data-focused":t.year===g(I).year?``:void 0,"data-selected":g(U)(t)?``:void 0,"data-slot":`cell-trigger`,"data-year-value":t.toString(),disabled:g(A)(t),tabindex:t.year===g(I).year&&!g(A)(t)?0:-1,type:`button`,onClick:e=>ae(t),onFocus:e=>ie(t),onKeydown:e=>oe(t,n,e)},[m(e.$slots,`year`,{date:t,disabled:g(A)(t),focused:t.year===g(I).year,label:String(t.year),selected:g(U)(t)},()=>[c(h(t.year),1)])],42,ne))),128))],2)]),_:3},8,[`id`,`as`,`as-child`,`aria-labelledby`,`class`])):a(`v-if`,!0)}});export{S as default};

package/dist/components/year-picker/year-picker-popup.vue.d.ts

@@ -0,0 +1,36 @@
+import { AsTag } from "../primitive/types.js";
+import { YearPickerPopupProps } from "./types.js";
+import * as _$vue from "vue";
+import { DateValue } from "@internationalized/date";
+
+//#region src/components/year-picker/year-picker-popup.vue.d.ts
+type __VLS_Slots = {
+  heading?: (props: {
+    headingValue: string;
+  }) => any;
+  prev?: (props: {
+    disabled: boolean;
+  }) => any;
+  next?: (props: {
+    disabled: boolean;
+  }) => any;
+  year?: (props: {
+    date: DateValue;
+    label: string;
+    disabled: boolean;
+    focused: boolean;
+    selected: boolean;
+  }) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<YearPickerPopupProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<YearPickerPopupProps> & Readonly<{}>, {
+  as: AsTag | _$vue.Component;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/year-picker/year-picker-root.js

@@ -0,0 +1 @@
+import{getDefaultDate as e,toDate as t}from"../../date/comparators.js";import{createYearGrid as n}from"../../date/calendar.js";import{useDateFormatter as r}from"../../date/formatter.js";import"../../date/index.js";import{useControllableState as i}from"../../composables/use-controllable-state.js";import"../../composables/index.js";import{useDirection as a,useLocale as o}from"../config-provider/context.js";import{Primitive as s}from"../primitive/primitive.js";import"../primitive/index.js";import{provideYearPickerRootContext as c,useYearPickerUi as l}from"./context.js";import{computed as u,createBlock as d,defineComponent as f,normalizeClass as p,openBlock as m,renderSlot as h,shallowRef as g,unref as _,useId as v,watch as y,withCtx as b}from"vue";const x=f({name:`YearPickerRoot`,__name:`year-picker-root`,props:{defaultValue:{default:void 0},defaultPlaceholder:{default:void 0},placeholder:{default:void 0},modelValue:{},minValue:{},maxValue:{},locale:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},id:{},dir:{},defaultOpen:{type:Boolean,default:!1},open:{type:Boolean,default:void 0},modal:{type:Boolean,default:!1},asChild:{type:Boolean},as:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:placeholder`,`update:open`],setup(f,{emit:x}){let S=f,C=x,w=l(`root`),T=v(),E=o(()=>S.locale),D=a(()=>S.dir),O=r(E.value),k=e=>e.set({month:1,day:1}),A=i(()=>S.modelValue,e=>C(`update:modelValue`,e),S.defaultValue?k(S.defaultValue):void 0),j=k(e({defaultPlaceholder:S.placeholder,defaultValue:A.value,locale:S.locale})),M=i(()=>S.placeholder,e=>C(`update:placeholder`,e),S.defaultPlaceholder?k(S.defaultPlaceholder):j.copy()),N=i(()=>S.open,e=>C(`update:open`,e??!1),S.defaultOpen),P=g(k(A.value??M.value)),F=u(()=>n({dateObj:M.value,yearsPerPage:12,decadeAligned:!0})),I=u(()=>S.minValue?k(S.minValue):void 0),L=u(()=>S.maxValue?k(S.maxValue):void 0),R=e=>!!(S.disabled||I.value&&e.year<I.value.year||L.value&&e.year>L.value.year),z=e=>A.value?e.year===A.value.year:!1,B=u(()=>A.value?R(k(A.value)):!1),V=u(()=>A.value?O.fullYear(t(k(A.value))):``),H=u(()=>{let e=F.value.cells[0],t=F.value.cells.at(-1);return!e||!t?``:`${e.year} - ${t.year}`}),U=e=>{let t=k(e);M.value=t.copy(),P.value=t.copy()};return y(E,e=>{O.getLocale()!==e&&O.setLocale(e)}),y(A,e=>{if(!e){P.value=k(M.value).copy();return}let t=k(e);M.value.year!==t.year&&(M.value=t.copy()),P.value=t.copy()}),c({locale:E,dir:D,modelValue:A,placeholder:M,isInvalid:B,formatter:O,open:N,popupId:T,displayValue:V,headingValue:H,focusedYear:P,yearGrid:F,minValue:I,maxValue:L,onYearChange:e=>{let t=k(e);S.readonly||R(t)||(A.value=t.copy(),U(t),N.value=!1)},onPlaceholderChange:U,isYearDisabled:R,isYearSelected:z,setOpen(e){N.value=e},setFocusedYear:e=>{P.value=k(e).copy()},prevPage:()=>{U(M.value.subtract({years:12}))},nextPage:()=>{U(M.value.add({years:12}))},isPrevButtonDisabled:()=>S.disabled?!0:I.value?F.value.cells[0].subtract({years:1}).year<I.value.year:!1,isNextButtonDisabled:()=>{if(S.disabled)return!0;if(!L.value)return!1;let e=F.value.cells.at(-1)?.add({years:1});return!e||e.year>L.value.year},disabled:u(()=>S.disabled),readonly:u(()=>S.readonly)}),(e,t)=>(m(),d(_(s),{as:f.as,"as-child":f.asChild,class:p(_(w)),"data-disabled":f.disabled?``:void 0,"data-invalid":B.value?``:void 0,"data-readonly":f.readonly?``:void 0,dir:_(D),"data-slot":`root`},{default:b(()=>[h(e.$slots,`default`,{displayValue:V.value,modelValue:_(A),open:!!_(N)})]),_:3},8,[`as`,`as-child`,`class`,`data-disabled`,`data-invalid`,`data-readonly`,`dir`]))}});export{x as default};

package/dist/components/year-picker/year-picker-root.vue.d.ts

@@ -0,0 +1,39 @@
+import { YearPickerRootProps } from "./types.js";
+import * as _$vue from "vue";
+import { DateValue } from "@internationalized/date";
+
+//#region src/components/year-picker/year-picker-root.vue.d.ts
+type __VLS_Slots = {
+  default?: (props: {
+    modelValue: DateValue | undefined;
+    displayValue: string;
+    open: boolean;
+  }) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<YearPickerRootProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (date: DateValue | undefined) => any;
+  "update:open": (open: boolean) => any;
+  "update:placeholder": (date: DateValue) => any;
+}, string, _$vue.PublicProps, Readonly<YearPickerRootProps> & Readonly<{
+  "onUpdate:modelValue"?: ((date: DateValue | undefined) => any) | undefined;
+  "onUpdate:open"?: ((open: boolean) => any) | undefined;
+  "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
+}>, {
+  placeholder: DateValue;
+  disabled: boolean;
+  defaultValue: DateValue;
+  open: boolean;
+  defaultOpen: boolean;
+  readonly: boolean;
+  defaultPlaceholder: DateValue;
+  modal: boolean;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/year-picker/year-picker-trigger.js

@@ -0,0 +1 @@
+import{Primitive as e}from"../primitive/primitive.js";import"../primitive/index.js";import{useYearPickerRootContext as t,useYearPickerUi as n}from"./context.js";import{createBlock as r,defineComponent as i,normalizeClass as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";const u=i({name:`YearPickerTrigger`,__name:`year-picker-trigger`,props:{asChild:{type:Boolean},as:{default:`button`}},setup(i){let u=n(`trigger`),{disabled:d,readonly:f,open:p,setOpen:m,popupId:h}=t(`YearPickerTrigger`),g=()=>{d.value||f.value||m(!p.value)};return(t,n)=>(o(),r(c(e),{as:i.as,"as-child":i.asChild,"aria-controls":c(h),"aria-disabled":c(d)?!0:void 0,"aria-expanded":!!c(p),class:a(c(u)),"data-disabled":c(d)?``:void 0,"data-state":c(p)?`open`:`closed`,"data-slot":`trigger`,type:`button`,onClick:g},{default:l(()=>[s(t.$slots,`default`)]),_:3},8,[`as`,`as-child`,`aria-controls`,`aria-disabled`,`aria-expanded`,`class`,`data-disabled`,`data-state`]))}});export{u as default};

package/dist/components/year-picker/year-picker-trigger.vue.d.ts

@@ -0,0 +1,21 @@
+import { AsTag } from "../primitive/types.js";
+import { YearPickerTriggerProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/year-picker/year-picker-trigger.vue.d.ts
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<YearPickerTriggerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<YearPickerTriggerProps> & Readonly<{}>, {
+  as: AsTag | _$vue.Component;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/year-range-picker/context.d.ts

@@ -0,0 +1,9 @@
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
+import { YearRangePickerUiSlot } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/year-range-picker/context.d.ts
+declare const provideYearRangePickerUi: (ui: _$vue.ComputedRef<Partial<UiClass<YearRangePickerUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<YearRangePickerUiSlot>>>, useYearRangePickerUi: UseUiConsumer<YearRangePickerUiSlot>;
+//#endregion
+export { provideYearRangePickerUi };

package/dist/components/year-range-picker/context.js

@@ -0,0 +1 @@
+import{useContext as e}from"../../composables/use-context.js";import{useUiContext as t}from"../../composables/use-ui-context.js";import"../../composables/index.js";const[n,r]=e(`YearRangePickerRoot`),[i,a]=t(`YearRangePickerUi`);export{n as provideYearRangePickerRootContext,i as provideYearRangePickerUi,r as useYearRangePickerRootContext,a as useYearRangePickerUi};

package/dist/components/year-range-picker/index.d.ts

@@ -0,0 +1,6 @@
+import { YearRangePickerPopupProps, YearRangePickerRootContext, YearRangePickerRootEmits, YearRangePickerRootProps, YearRangePickerTriggerProps, YearRangePickerUi, YearRangePickerUiSlot } from "./types.js";
+import { _default } from "./year-range-picker-popup.vue.js";
+import { _default as _default$1 } from "./year-range-picker-root.vue.js";
+import { _default as _default$2 } from "./year-range-picker-trigger.vue.js";
+import { provideYearRangePickerUi } from "./context.js";
+export { _default as YearRangePickerPopup, type YearRangePickerPopupProps, _default$1 as YearRangePickerRoot, type YearRangePickerRootContext, type YearRangePickerRootEmits, type YearRangePickerRootProps, _default$2 as YearRangePickerTrigger, type YearRangePickerTriggerProps, type YearRangePickerUi, type YearRangePickerUiSlot, provideYearRangePickerUi };

package/dist/components/year-range-picker/index.js

@@ -0,0 +1 @@
+import{provideYearRangePickerUi as e}from"./context.js";import t from"./year-range-picker-popup.js";import n from"./year-range-picker-root.js";import r from"./year-range-picker-trigger.js";export{t as YearRangePickerPopup,n as YearRangePickerRoot,r as YearRangePickerTrigger,e as provideYearRangePickerUi};

package/dist/components/year-range-picker/types.d.ts

@@ -0,0 +1,239 @@
+import { Direction, UiClass } from "../../types/common.js";
+import { FormFieldCommonProps } from "../../types/component.js";
+import { PropsToContext } from "../../types/vue.js";
+import { PrimitiveProps } from "../primitive/types.js";
+import { DateRange, Grid } from "../../date/types.js";
+import { Formatter } from "../../date/formatter.js";
+import { ComputedRef, HTMLAttributes, ShallowRef } from "vue";
+import { DateValue } from "@internationalized/date";
+
+//#region src/components/year-range-picker/types.d.ts
+/**
+ * Props for the year range picker root component.
+ */
+interface YearRangePickerRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */Omit<HTMLAttributes, 'placeholder'> {
+  /**
+   * Default value.
+   */
+  defaultValue?: DateRange;
+  /**
+   * Default placeholder.
+   */
+  defaultPlaceholder?: DateValue;
+  /**
+   * Placeholder.
+   */
+  placeholder?: DateValue;
+  /**
+   * Current model value.
+   */
+  modelValue?: DateRange;
+  /**
+   * Min value.
+   */
+  minValue?: DateValue;
+  /**
+   * Max value.
+   */
+  maxValue?: DateValue;
+  /**
+   * Locale.
+   */
+  locale?: string;
+  /**
+   * Whether the component is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Whether the component is readonly.
+   */
+  readonly?: boolean;
+  /**
+   * Id.
+   */
+  id?: string;
+  /**
+   * Reading direction of the component.
+   */
+  dir?: Direction;
+  /**
+   * Whether the component is open by default.
+   */
+  defaultOpen?: boolean;
+  /**
+   * Whether the component is open.
+   */
+  open?: boolean;
+  /**
+   * Whether the popup is modal.
+   */
+  modal?: boolean;
+}
+/**
+ * Emits for the year range picker root component.
+ */
+type YearRangePickerRootEmits = {
+  /**
+   * Emitted when the model value changes.
+   */
+  'update:modelValue': [range: DateRange];
+  /**
+   * Emitted when the placeholder value changes.
+   */
+  'update:placeholder': [date: DateValue];
+  /**
+   * Emitted when the start value changes.
+   */
+  'update:startValue': [date: DateValue | undefined];
+  /**
+   * Emitted when the end value changes.
+   */
+  'update:endValue': [date: DateValue | undefined];
+  /**
+   * Emitted when the open state changes.
+   */
+  'update:open': [open: boolean];
+};
+/**
+ * Props for the year range picker trigger component.
+ */
+interface YearRangePickerTriggerProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+/**
+ * Props for the year range picker popup component.
+ */
+interface YearRangePickerPopupProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+/**
+ * Context for the year range picker root component.
+ */
+interface YearRangePickerRootContext extends PropsToContext<YearRangePickerRootProps, 'disabled' | 'readonly'> {
+  /**
+   * Locale used by the component context.
+   */
+  locale: ComputedRef<string>;
+  /**
+   * Reading direction of the component.
+   */
+  dir: ComputedRef<Direction>;
+  /**
+   * Current model value.
+   */
+  modelValue: ShallowRef<DateRange>;
+  /**
+   * Placeholder used by the component context.
+   */
+  placeholder: ShallowRef<DateValue>;
+  /**
+   * Whether the current value is invalid.
+   */
+  isInvalid: ComputedRef<boolean>;
+  /**
+   * Formatter used by the component context.
+   */
+  formatter: Formatter;
+  /**
+   * Whether the component is open.
+   */
+  open: ShallowRef<boolean | undefined>;
+  /**
+   * Popup id used by the component context.
+   */
+  popupId: string;
+  /**
+   * Display value used by the component context.
+   */
+  displayValue: ComputedRef<string>;
+  /**
+   * Heading value used by the component context.
+   */
+  headingValue: ComputedRef<string>;
+  /**
+   * Focused year used by the component context.
+   */
+  focusedYear: ShallowRef<DateValue>;
+  /**
+   * Hovered year used by the component context.
+   */
+  hoveredYear: ShallowRef<DateValue | undefined>;
+  /**
+   * Year grid used by the component context.
+   */
+  yearGrid: ComputedRef<Grid<DateValue>>;
+  /**
+   * Min value used by the component context.
+   */
+  minValue: ComputedRef<DateValue | undefined>;
+  /**
+   * Max value used by the component context.
+   */
+  maxValue: ComputedRef<DateValue | undefined>;
+  /**
+   * Whether the component has selected range.
+   */
+  hasSelectedRange: ComputedRef<boolean>;
+  /**
+   * Callback invoked when the range changes.
+   */
+  onRangeChange: (date: DateValue) => void;
+  /**
+   * Callback invoked when the placeholder changes.
+   */
+  onPlaceholderChange: (date: DateValue) => void;
+  /**
+   * Whether the year is disabled.
+   */
+  isYearDisabled: (date: DateValue) => boolean;
+  /**
+   * Whether the year is selected.
+   */
+  isYearSelected: (date: DateValue) => boolean;
+  /**
+   * Whether the year is highlighted.
+   */
+  isYearHighlighted: (date: DateValue) => boolean;
+  /**
+   * Whether a range start.
+   */
+  isRangeStart: (date: DateValue) => boolean;
+  /**
+   * Whether a range end.
+   */
+  isRangeEnd: (date: DateValue) => boolean;
+  /**
+   * Set open used by the component context.
+   */
+  setOpen: (value: boolean) => void;
+  /**
+   * Set focused year used by the component context.
+   */
+  setFocusedYear: (date: DateValue) => void;
+  /**
+   * Set hovered year used by the component context.
+   */
+  setHoveredYear: (date: DateValue | undefined) => void;
+  /**
+   * Prev page used by the component context.
+   */
+  prevPage: () => void;
+  /**
+   * Next page used by the component context.
+   */
+  nextPage: () => void;
+  /**
+   * Whether the previous button is disabled.
+   */
+  isPrevButtonDisabled: () => boolean;
+  /**
+   * Whether the next button is disabled.
+   */
+  isNextButtonDisabled: () => boolean;
+}
+/**
+ * Available UI slots for the year range picker component.
+ */
+type YearRangePickerUiSlot = 'root' | 'trigger' | 'popup' | 'header' | 'heading' | 'prev' | 'next' | 'grid' | 'cellTrigger';
+/**
+ * UI class overrides for the year range picker component.
+ */
+type YearRangePickerUi = UiClass<YearRangePickerUiSlot>;
+//#endregion
+export { YearRangePickerPopupProps, YearRangePickerRootContext, YearRangePickerRootEmits, YearRangePickerRootProps, YearRangePickerTriggerProps, YearRangePickerUi, YearRangePickerUiSlot };

package/dist/components/year-range-picker/year-range-picker-popup.js

@@ -0,0 +1 @@
+import{useForwardElement as e}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as t}from"../primitive/primitive.js";import"../primitive/index.js";import{useYearRangePickerRootContext as n,useYearRangePickerUi as r}from"./context.js";import{Fragment as i,createBlock as ee,createCommentVNode as a,createElementBlock as o,createElementVNode as s,createTextVNode as c,defineComponent as l,nextTick as u,normalizeClass as d,openBlock as f,renderList as p,renderSlot as m,toDisplayString as h,unref as g,useId as te,watch as ne,withCtx as re}from"vue";const ie=[`data-disabled`,`disabled`],_=[`id`],v=[`data-disabled`,`disabled`],y=[`aria-label`,`aria-pressed`,`data-disabled`,`data-focused`,`data-highlighted`,`data-range-end`,`data-range-start`,`data-selected`,`data-year-value`,`disabled`,`tabindex`,`onClick`,`onFocus`,`onKeydown`,`onMouseenter`],b=l({name:`YearRangePickerPopup`,__name:`year-range-picker-popup`,props:{asChild:{type:Boolean},as:{default:`div`}},setup(l){let b=r(`popup`),ae=r(`header`),oe=r(`heading`),x=r(`prev`),S=r(`next`),C=r(`grid`),w=r(`cellTrigger`),{dir:T,focusedYear:E,formatter:D,headingValue:O,isNextButtonDisabled:k,isPrevButtonDisabled:A,isRangeEnd:j,isRangeStart:M,isYearDisabled:N,isYearHighlighted:P,isYearSelected:F,modelValue:I,nextPage:L,onRangeChange:R,open:z,popupId:B,prevPage:V,setFocusedYear:H,setHoveredYear:U,yearGrid:W}=n(`YearRangePickerPopup`),[G,K]=e(),q=te(),J=W,se=e=>{(G.value?.querySelector(`[data-year-value='${e.toString()}']`))?.focus()},Y=(e,t)=>{let n=e;for(;n>=0&&n<J.value.cells.length;){let e=J.value.cells[n];if(!N(e))return H(e),u(()=>{se(e)}),!0;n+=t}return!1},X=e=>{let t=J.value.cells.findIndex(t=>t.year===e.year),n=t===-1?0:t;Y(n,1)||Y(n,-1)},ce=(e,t)=>{if(t>0){if(k())return;L()}else{if(A())return;V()}u(()=>{Y(e,t)})},Z=(e,t)=>{let n=e+t,r=t>=0?1:-1;if(n>=0&&n<J.value.cells.length){Y(n,r);return}ce(n<0?J.value.cells.length+n:n-J.value.cells.length,r)},Q=()=>{A()||(V(),u(()=>{X(E.value)}))},$=()=>{k()||(L(),u(()=>{X(E.value)}))},le=e=>{H(e)},ue=e=>{I.value.start&&!I.value.end&&!N(e)&&U(e)},de=e=>{N(e)||R(e)},fe=(e,t,n)=>{if(N(e))return;let r=T.value===`rtl`?-1:1;switch(n.key){case`ArrowRight`:n.preventDefault(),Z(t,r);break;case`ArrowLeft`:n.preventDefault(),Z(t,-r);break;case`ArrowDown`:n.preventDefault(),Z(t,4);break;case`ArrowUp`:n.preventDefault(),Z(t,-4);break;case`Home`:n.preventDefault(),Y(t-t%4,1);break;case`End`:n.preventDefault(),Y(t+(3-t%4),-1);break;case`PageUp`:n.preventDefault(),Q();break;case`PageDown`:n.preventDefault(),$();break;case`Enter`:case` `:n.preventDefault(),R(e);break;default:break}};return ne(()=>z.value,e=>{e&&u(()=>{X(E.value)})}),(e,n)=>g(z)?(f(),ee(g(t),{key:0,id:g(B),ref:g(K),as:l.as,"as-child":l.asChild,"aria-labelledby":g(q),class:d(g(b)),"data-slot":`popup`,role:`dialog`,onMouseleave:n[0]||(n[0]=e=>g(U)(void 0))},{default:re(()=>[s(`div`,{class:d(g(ae)),"data-slot":`header`},[s(`button`,{"aria-label":`Previous years`,class:d(g(x)),"data-disabled":g(A)()?``:void 0,"data-slot":`prev`,disabled:g(A)(),type:`button`,onClick:Q},[m(e.$slots,`prev`,{disabled:g(A)()},()=>[n[1]||(n[1]=c(`Prev`,-1))])],10,ie),s(`div`,{id:g(q),class:d(g(oe)),"data-slot":`heading`},[m(e.$slots,`heading`,{headingValue:g(O)},()=>[c(h(g(O)),1)])],10,_),s(`button`,{"aria-label":`Next years`,class:d(g(S)),"data-disabled":g(k)()?``:void 0,"data-slot":`next`,disabled:g(k)(),type:`button`,onClick:$},[m(e.$slots,`next`,{disabled:g(k)()},()=>[n[2]||(n[2]=c(`Next`,-1))])],10,v)],2),s(`div`,{class:d(g(C)),"data-slot":`grid`},[(f(!0),o(i,null,p(g(J).cells,(t,n)=>(f(),o(`button`,{key:t.toString(),"aria-label":g(D).fullYear(new Date(t.year,0,1)),"aria-pressed":g(F)(t)?!0:void 0,class:d(g(w)),"data-disabled":g(N)(t)?``:void 0,"data-focused":t.year===g(E).year?``:void 0,"data-highlighted":g(P)(t)?``:void 0,"data-range-end":g(j)(t)?``:void 0,"data-range-start":g(M)(t)?``:void 0,"data-selected":g(F)(t)?``:void 0,"data-slot":`cell-trigger`,"data-year-value":t.toString(),disabled:g(N)(t),tabindex:t.year===g(E).year&&!g(N)(t)?0:-1,type:`button`,onClick:e=>de(t),onFocus:e=>le(t),onKeydown:e=>fe(t,n,e),onMouseenter:e=>ue(t)},[m(e.$slots,`year`,{date:t,disabled:g(N)(t),focused:t.year===g(E).year,highlighted:g(P)(t),label:String(t.year),rangeEnd:g(j)(t),rangeStart:g(M)(t),selected:g(F)(t)},()=>[c(h(t.year),1)])],42,y))),128))],2)]),_:3},8,[`id`,`as`,`as-child`,`aria-labelledby`,`class`])):a(`v-if`,!0)}});export{b as default};

package/dist/components/year-range-picker/year-range-picker-popup.vue.d.ts

@@ -0,0 +1,39 @@
+import { AsTag } from "../primitive/types.js";
+import { YearRangePickerPopupProps } from "./types.js";
+import * as _$vue from "vue";
+import { DateValue } from "@internationalized/date";
+
+//#region src/components/year-range-picker/year-range-picker-popup.vue.d.ts
+type __VLS_Slots = {
+  heading?: (props: {
+    headingValue: string;
+  }) => any;
+  prev?: (props: {
+    disabled: boolean;
+  }) => any;
+  next?: (props: {
+    disabled: boolean;
+  }) => any;
+  year?: (props: {
+    date: DateValue;
+    label: string;
+    disabled: boolean;
+    focused: boolean;
+    highlighted: boolean;
+    rangeEnd: boolean;
+    rangeStart: boolean;
+    selected: boolean;
+  }) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<YearRangePickerPopupProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<YearRangePickerPopupProps> & Readonly<{}>, {
+  as: AsTag | _$vue.Component;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/year-range-picker/year-range-picker-root.js

@@ -0,0 +1 @@
+import{isNullish as e}from"../../shared/guard.js";import{getDefaultDate as t,isYearBetweenInclusive as n,toDate as r}from"../../date/comparators.js";import{createYearGrid as i}from"../../date/calendar.js";import{useDateFormatter as a}from"../../date/formatter.js";import"../../date/index.js";import"../../shared/index.js";import{useControllableState as o}from"../../composables/use-controllable-state.js";import"../../composables/index.js";import{useDirection as s,useLocale as c}from"../config-provider/context.js";import{Primitive as l}from"../primitive/primitive.js";import"../primitive/index.js";import{provideYearRangePickerRootContext as u,useYearRangePickerUi as d}from"./context.js";import{computed as f,createBlock as p,defineComponent as m,normalizeClass as h,openBlock as g,renderSlot as _,shallowRef as v,unref as y,useId as b,watch as x,withCtx as S}from"vue";const C=m({name:`YearRangePickerRoot`,__name:`year-range-picker-root`,props:{defaultValue:{default:void 0},defaultPlaceholder:{default:void 0},placeholder:{default:void 0},modelValue:{},minValue:{},maxValue:{},locale:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},id:{},dir:{},defaultOpen:{type:Boolean,default:!1},open:{type:Boolean,default:void 0},modal:{type:Boolean,default:!1},asChild:{type:Boolean},as:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:placeholder`,`update:startValue`,`update:endValue`,`update:open`],setup(m,{emit:C}){let w=m,T=C,E=d(`root`),D=b(),O=c(()=>w.locale),k=s(()=>w.dir),A=a(O.value),j=e=>e.set({month:1,day:1}),M=o(()=>w.modelValue,e=>{T(`update:modelValue`,e),T(`update:startValue`,e.start),T(`update:endValue`,e.end)},w.defaultValue?{start:w.defaultValue.start?j(w.defaultValue.start):void 0,end:w.defaultValue.end?j(w.defaultValue.end):void 0}:{}),N=j(t({defaultPlaceholder:w.placeholder,defaultValue:M.value.start,locale:w.locale})),P=o(()=>w.placeholder,e=>T(`update:placeholder`,e),w.defaultPlaceholder?j(w.defaultPlaceholder):N.copy()),F=o(()=>w.open,e=>T(`update:open`,e??!1),w.defaultOpen),I=v(j(M.value.end??M.value.start??P.value)),L=v(),R=f(()=>i({dateObj:P.value,yearsPerPage:12,decadeAligned:!0})),z=f(()=>w.minValue?j(w.minValue):void 0),B=f(()=>w.maxValue?j(w.maxValue):void 0),V=(e,t)=>e.year<=t.year?{start:e.copy(),end:t.copy()}:{start:t.copy(),end:e.copy()},H=e=>!!(w.disabled||z.value&&e.year<z.value.year||B.value&&e.year>B.value.year),U=e=>M.value.start?e.year===M.value.start.year:!1,W=e=>M.value.end?e.year===M.value.end.year:!1,G=e=>{let{start:t,end:r}=M.value;return!t&&!r?!1:t&&!r?e.year===t.year:t&&r?n(e,t,r):!1},K=e=>{let{start:t,end:r}=M.value;if(!t||r||!L.value)return!1;let i=V(t,L.value);return n(e,i.start,i.end)},q=f(()=>{let{start:e,end:t}=M.value;return!!(e&&H(e)||t&&H(t)||e&&t&&t.year<e.year)}),J=f(()=>{let{start:e,end:t}=M.value;return e&&t?`${A.fullYear(r(e))} – ${A.fullYear(r(t))}`:e?`${A.fullYear(r(e))} – ...`:``}),Y=f(()=>{let e=R.value.cells[0],t=R.value.cells.at(-1);return!e||!t?``:`${e.year} - ${t.year}`}),X=f(()=>!e(M.value.start)&&!e(M.value.end)),Z=e=>{let t=j(e);P.value=t.copy(),I.value=t.copy()};return x(O,e=>{A.getLocale()!==e&&A.setLocale(e)}),x(()=>M.value.start,e=>{e&&P.value.year!==e.year&&(P.value=e.copy())}),x(M,e=>{I.value=(e.end??e.start??P.value).copy()},{deep:!0}),u({locale:O,dir:k,modelValue:M,placeholder:P,isInvalid:q,formatter:A,open:F,popupId:D,displayValue:J,headingValue:Y,focusedYear:I,hoveredYear:L,yearGrid:R,minValue:z,maxValue:B,hasSelectedRange:X,onRangeChange:e=>{let t=j(e);if(w.readonly||H(t))return;let{start:n,end:r}=M.value;if(!n||r){M.value={start:t.copy(),end:void 0},I.value=t.copy(),L.value=void 0,Z(t);return}let i=V(n,t);M.value=i,I.value=t.copy(),L.value=void 0,Z(i.start),F.value=!1},onPlaceholderChange:Z,isYearDisabled:H,isYearSelected:G,isYearHighlighted:K,isRangeStart:U,isRangeEnd:W,setOpen(e){F.value=e},setFocusedYear:e=>{I.value=j(e).copy()},setHoveredYear:e=>{L.value=e?j(e).copy():void 0},prevPage:()=>{Z(P.value.subtract({years:12}))},nextPage:()=>{Z(P.value.add({years:12}))},isPrevButtonDisabled:()=>w.disabled?!0:z.value?R.value.cells[0].subtract({years:1}).year<z.value.year:!1,isNextButtonDisabled:()=>{if(w.disabled)return!0;if(!B.value)return!1;let e=R.value.cells.at(-1)?.add({years:1});return!e||e.year>B.value.year},disabled:f(()=>w.disabled),readonly:f(()=>w.readonly)}),(e,t)=>(g(),p(y(l),{as:m.as,"as-child":m.asChild,class:h(y(E)),"data-disabled":m.disabled?``:void 0,"data-invalid":q.value?``:void 0,"data-readonly":m.readonly?``:void 0,dir:y(k),"data-slot":`root`},{default:S(()=>[_(e.$slots,`default`,{displayValue:J.value,modelValue:y(M),open:!!y(F)})]),_:3},8,[`as`,`as-child`,`class`,`data-disabled`,`data-invalid`,`data-readonly`,`dir`]))}});export{C as default};