@routa/ui-vue 0.1.0

package/dist/layout/Sider.vue.d.ts

@@ -0,0 +1,59 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly tag: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    readonly width: {
+        readonly type: import('vue').PropType<number | string>;
+        readonly default: 240;
+    };
+    readonly collapsedWidth: {
+        readonly type: import('vue').PropType<number | string>;
+        readonly default: 80;
+    };
+    readonly collapsed: BooleanConstructor;
+    readonly collapseBelow: {
+        readonly type: import('vue').PropType<import('..').LayoutBreakpoint>;
+        readonly default: undefined;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly tag: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    readonly width: {
+        readonly type: import('vue').PropType<number | string>;
+        readonly default: 240;
+    };
+    readonly collapsedWidth: {
+        readonly type: import('vue').PropType<number | string>;
+        readonly default: 80;
+    };
+    readonly collapsed: BooleanConstructor;
+    readonly collapseBelow: {
+        readonly type: import('vue').PropType<import('..').LayoutBreakpoint>;
+        readonly default: undefined;
+    };
+}>> & Readonly<{}>, {
+    readonly width: string | number;
+    readonly collapsed: boolean;
+    readonly tag: string;
+    readonly collapsedWidth: string | number;
+    readonly collapseBelow: import('..').LayoutBreakpoint;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/layout/index.d.ts

@@ -0,0 +1,13 @@
+import { Plugin } from 'vue';
+import { default as Layout } from './Layout.vue';
+import { default as Header } from './Header.vue';
+import { default as Content } from './Content.vue';
+import { default as Footer } from './Footer.vue';
+import { default as Sider } from './Sider.vue';
+export declare const LLayout: typeof Layout & Plugin;
+export declare const LHeader: typeof Header & Plugin;
+export declare const LContent: typeof Content & Plugin;
+export declare const LFooter: typeof Footer & Plugin;
+export declare const LSider: typeof Sider & Plugin;
+export * from './types';
+export default LLayout;

package/dist/layout/index.js

@@ -0,0 +1,2 @@
+require('../style/layout.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),_=require("../chunks/responsive-BYScjISa.js"),L=require("../chunks/style-CjCLKeeU.js"),c=t=>({type:String,default:t}),C={hasSider:Boolean,tag:c("div")},v={tag:c("header")},S={tag:c("main")},g={tag:c("footer")},B={tag:c("aside"),width:{type:[Number,String],default:240},collapsedWidth:{type:[Number,String],default:80},collapsed:Boolean,collapseBelow:{type:String,default:void 0}},k=e.defineComponent({name:"LSider",__name:"Sider",props:B,setup(t){const o=t,s=_.useLayoutBreakpoint(),l=e.computed(()=>L.addUnit(o.width)??"240px"),h=e.computed(()=>L.addUnit(o.collapsedWidth)??"80px"),y=e.computed(()=>o.collapseBelow?_.isBreakpointAtOrBelow(s.value,o.collapseBelow):!1),u=e.computed(()=>o.collapsed||y.value),n=e.computed(()=>u.value?h.value:l.value),r=e.computed(()=>["l-sider",{"l-sider--collapsed":u.value}]),a=e.computed(()=>({flex:`0 0 ${n.value}`,maxWidth:n.value,minWidth:n.value,width:n.value}));return(w,W)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:e.normalizeClass(r.value),style:e.normalizeStyle(a.value)},{default:e.withCtx(()=>[e.renderSlot(w.$slots,"default")]),_:3},8,["class","style"]))}}),P=e.defineComponent({name:"LLayout",__name:"Layout",props:C,setup(t){const o=t,s=e.useSlots(),l=n=>{const r=[];return n.forEach(a=>{if(a.type===e.Fragment&&Array.isArray(a.children)){r.push(...l(a.children));return}r.push(a)}),r},h=e.computed(()=>(s.default?l(s.default()):[]).filter(r=>r.type===e.Comment?!1:r.type===e.Text?String(r.children??"").trim().length>0:!0)),y=e.computed(()=>o.hasSider||h.value.some(n=>n.type===k)),u=e.computed(()=>["l-layout",{"l-layout--has-sider":y.value}]);return(n,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:e.normalizeClass(u.value)},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},8,["class"]))}}),x=e.defineComponent({name:"LHeader",__name:"Header",props:v,setup(t){const o=t;return(s,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:"l-layout-header"},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3}))}}),$=e.defineComponent({name:"LContent",__name:"Content",props:S,setup(t){const o=t;return(s,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:"l-layout-content"},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3}))}}),F=e.defineComponent({name:"LFooter",__name:"Footer",props:g,setup(t){const o=t;return(s,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:"l-layout-footer"},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3}))}}),d=P,i=x,p=$,m=F,f=k;d.install=t=>{t.component("LLayout",d),t.component("LHeader",i),t.component("LContent",p),t.component("LFooter",m),t.component("LSider",f)};i.install=t=>{t.component("LHeader",i)};p.install=t=>{t.component("LContent",p)};m.install=t=>{t.component("LFooter",m)};f.install=t=>{t.component("LSider",f)};exports.LContent=p;exports.LFooter=m;exports.LHeader=i;exports.LLayout=d;exports.LSider=f;exports.contentProps=S;exports.default=d;exports.footerProps=g;exports.headerProps=v;exports.layoutProps=C;exports.siderProps=B;

package/dist/layout/index.mjs

@@ -0,0 +1,154 @@
+import '../style/layout.css';
+import { defineComponent as c, computed as n, openBlock as u, createBlock as i, resolveDynamicComponent as d, normalizeStyle as W, normalizeClass as $, withCtx as p, renderSlot as m, useSlots as F, Comment as P, Text as k, Fragment as H } from "vue";
+import { u as b, i as A } from "../chunks/responsive-jCVnPx1a.mjs";
+import { a as C } from "../chunks/style-C-58-Hx4.mjs";
+const f = (e) => ({
+  type: String,
+  default: e
+}), N = {
+  hasSider: Boolean,
+  tag: f("div")
+}, z = {
+  tag: f("header")
+}, T = {
+  tag: f("main")
+}, D = {
+  tag: f("footer")
+}, E = {
+  tag: f("aside"),
+  width: {
+    type: [Number, String],
+    default: 240
+  },
+  collapsedWidth: {
+    type: [Number, String],
+    default: 80
+  },
+  collapsed: Boolean,
+  collapseBelow: {
+    type: String,
+    default: void 0
+  }
+}, w = /* @__PURE__ */ c({
+  name: "LSider",
+  __name: "Sider",
+  props: E,
+  setup(e) {
+    const t = e, s = b(), l = n(() => C(t.width) ?? "240px"), _ = n(() => C(t.collapsedWidth) ?? "80px"), y = n(() => t.collapseBelow ? A(s.value, t.collapseBelow) : !1), h = n(() => t.collapsed || y.value), o = n(() => h.value ? _.value : l.value), a = n(() => [
+      "l-sider",
+      {
+        "l-sider--collapsed": h.value
+      }
+    ]), r = n(() => ({
+      flex: `0 0 ${o.value}`,
+      maxWidth: o.value,
+      minWidth: o.value,
+      width: o.value
+    }));
+    return (x, G) => (u(), i(d(t.tag), {
+      class: $(a.value),
+      style: W(r.value)
+    }, {
+      default: p(() => [
+        m(x.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class", "style"]));
+  }
+}), O = /* @__PURE__ */ c({
+  name: "LLayout",
+  __name: "Layout",
+  props: N,
+  setup(e) {
+    const t = e, s = F(), l = (o) => {
+      const a = [];
+      return o.forEach((r) => {
+        if (r.type === H && Array.isArray(r.children)) {
+          a.push(...l(r.children));
+          return;
+        }
+        a.push(r);
+      }), a;
+    }, _ = n(() => (s.default ? l(s.default()) : []).filter((a) => a.type === P ? !1 : a.type === k ? String(a.children ?? "").trim().length > 0 : !0)), y = n(() => t.hasSider || _.value.some((o) => o.type === w)), h = n(() => [
+      "l-layout",
+      {
+        "l-layout--has-sider": y.value
+      }
+    ]);
+    return (o, a) => (u(), i(d(t.tag), {
+      class: $(h.value)
+    }, {
+      default: p(() => [
+        m(o.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), U = /* @__PURE__ */ c({
+  name: "LHeader",
+  __name: "Header",
+  props: z,
+  setup(e) {
+    const t = e;
+    return (s, l) => (u(), i(d(t.tag), { class: "l-layout-header" }, {
+      default: p(() => [
+        m(s.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+}), j = /* @__PURE__ */ c({
+  name: "LContent",
+  __name: "Content",
+  props: T,
+  setup(e) {
+    const t = e;
+    return (s, l) => (u(), i(d(t.tag), { class: "l-layout-content" }, {
+      default: p(() => [
+        m(s.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+}), q = /* @__PURE__ */ c({
+  name: "LFooter",
+  __name: "Footer",
+  props: D,
+  setup(e) {
+    const t = e;
+    return (s, l) => (u(), i(d(t.tag), { class: "l-layout-footer" }, {
+      default: p(() => [
+        m(s.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+}), B = O, L = U, v = j, g = q, S = w;
+B.install = (e) => {
+  e.component("LLayout", B), e.component("LHeader", L), e.component("LContent", v), e.component("LFooter", g), e.component("LSider", S);
+};
+L.install = (e) => {
+  e.component("LHeader", L);
+};
+v.install = (e) => {
+  e.component("LContent", v);
+};
+g.install = (e) => {
+  e.component("LFooter", g);
+};
+S.install = (e) => {
+  e.component("LSider", S);
+};
+export {
+  v as LContent,
+  g as LFooter,
+  L as LHeader,
+  B as LLayout,
+  S as LSider,
+  T as contentProps,
+  B as default,
+  D as footerProps,
+  z as headerProps,
+  N as layoutProps,
+  E as siderProps
+};

package/dist/layout/types.d.ts

@@ -0,0 +1,51 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { LayoutBreakpoint } from '../layout-system/types';
+export declare const layoutProps: {
+    readonly hasSider: BooleanConstructor;
+    readonly tag: {
+        type: PropType<string>;
+        default: string;
+    };
+};
+export declare const headerProps: {
+    readonly tag: {
+        type: PropType<string>;
+        default: string;
+    };
+};
+export declare const contentProps: {
+    readonly tag: {
+        type: PropType<string>;
+        default: string;
+    };
+};
+export declare const footerProps: {
+    readonly tag: {
+        type: PropType<string>;
+        default: string;
+    };
+};
+export declare const siderProps: {
+    readonly tag: {
+        type: PropType<string>;
+        default: string;
+    };
+    readonly width: {
+        readonly type: PropType<number | string>;
+        readonly default: 240;
+    };
+    readonly collapsedWidth: {
+        readonly type: PropType<number | string>;
+        readonly default: 80;
+    };
+    readonly collapsed: BooleanConstructor;
+    readonly collapseBelow: {
+        readonly type: PropType<LayoutBreakpoint>;
+        readonly default: undefined;
+    };
+};
+export type LayoutProps = ExtractPropTypes<typeof layoutProps>;
+export type HeaderProps = ExtractPropTypes<typeof headerProps>;
+export type ContentProps = ExtractPropTypes<typeof contentProps>;
+export type FooterProps = ExtractPropTypes<typeof footerProps>;
+export type SiderProps = ExtractPropTypes<typeof siderProps>;

package/dist/layout-system/responsive.d.ts

@@ -0,0 +1,4 @@
+import { LayoutBreakpoint, ResponsiveValue } from './types';
+export declare function useLayoutBreakpoint(): import('vue').ComputedRef<LayoutBreakpoint>;
+export declare function resolveResponsiveValue<T>(value: ResponsiveValue<T> | undefined, breakpoint: LayoutBreakpoint): T | undefined;
+export declare function isBreakpointAtOrBelow(current: LayoutBreakpoint, target: LayoutBreakpoint): boolean;

package/dist/layout-system/types.d.ts

@@ -0,0 +1,3 @@
+export type LayoutBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;
+export declare const layoutBreakpointOrder: readonly ["xs", "sm", "md", "lg", "xl"];

package/dist/loading/Loading.vue.d.ts

@@ -0,0 +1,57 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly mode: {
+        readonly type: import('vue').PropType<import('../../../headless/src/index.ts').LoadingMode>;
+        readonly default: "inline";
+    };
+    readonly text: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly size: {
+        readonly type: import('vue').PropType<import('../../../headless/src/index.ts').LoadingSize>;
+        readonly default: undefined;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly mode: {
+        readonly type: import('vue').PropType<import('../../../headless/src/index.ts').LoadingMode>;
+        readonly default: "inline";
+    };
+    readonly text: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly size: {
+        readonly type: import('vue').PropType<import('../../../headless/src/index.ts').LoadingSize>;
+        readonly default: undefined;
+    };
+}>> & Readonly<{}>, {
+    readonly text: string;
+    readonly loading: boolean;
+    readonly mode: import('../../../headless/src/index.ts').LoadingMode;
+    readonly size: import('../../../headless/src/index.ts').LoadingSize;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/loading/LoadingMask.vue.d.ts

@@ -0,0 +1,8 @@
+import { LoadingSize } from './types';
+type __VLS_Props = {
+    fullscreen?: boolean;
+    text?: string;
+    size?: LoadingSize;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/loading/directive.d.ts

@@ -0,0 +1,5 @@
+import { Directive } from 'vue';
+import { LoadingDirectiveValue } from './types';
+type LoadingBindingValue = boolean | LoadingDirectiveValue;
+export declare const vLoading: Directive<HTMLElement, LoadingBindingValue>;
+export {};

package/dist/loading/index.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vue';
+import { default as Loading } from './Loading.vue';
+import { vLoading } from './directive';
+export declare const LLoading: typeof Loading & Plugin;
+export { vLoading };
+export * from './types';
+export default LLoading;

package/dist/loading/index.js

@@ -0,0 +1,2 @@
+require('../style/loading.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");require("../chunks/manager-C0AUxQ1I.js");const u=require("../chunks/index-DWAWrVaT.js"),C=require("../chunks/use-signals-Bz1smiXh.js"),z=require("../config-provider/index.js"),_=e=>{if(typeof e=="number")return`${e}px`;if(typeof e=="string"&&/^\d+$/.test(e))return`${e}px`;if(typeof e=="string"&&e.endsWith("px"))return e;switch(e){case"small":return"16px";case"large":return"28px";default:return"22px"}},L=(e,o)=>typeof e=="boolean"?{loading:e,text:o.text,fullscreen:!1,size:o.size}:{loading:e.loading,text:e.text??o.text,fullscreen:e.fullscreen??!1,size:e.size??o.size};function T(e={}){const o=u.signal(e.loading??!0),n=u.signal(e.mode??"inline"),a=u.signal(e.text),l=u.signal(e.size),s=u.signal(e.defaultText??""),r=u.signal(e.defaultSize??"medium"),g=i=>{"loading"in i&&(o.value=i.loading??!0),"mode"in i&&i.mode&&(n.value=i.mode),"text"in i&&(a.value=i.text),"size"in i&&(l.value=i.size),"defaultText"in i&&(s.value=i.defaultText??""),"defaultSize"in i&&i.defaultSize!==void 0&&(r.value=i.defaultSize)},d=()=>a.value??s.value,f=()=>l.value??r.value;return{state:{get loading(){return o.value},set loading(i){o.value=i},get mode(){return n.value},set mode(i){n.value=i},get text(){return a.value},set text(i){a.value=i},get size(){return l.value},set size(i){l.value=i},get defaultText(){return s.value},set defaultText(i){s.value=i},get defaultSize(){return r.value},set defaultSize(i){r.value=i},get resolvedText(){return d()},get resolvedSize(){return f()},get indicatorSize(){return _(f())},get isInline(){return n.value==="inline"},get isContainer(){return n.value==="container"},get isFullscreen(){return n.value==="fullscreen"}},actions:{sync:g}}}const S={loading:{type:Boolean,default:!0},mode:{type:String,default:"inline"},text:{type:String,default:void 0},size:{type:[String,Number],default:void 0}},B=["data-theme"],E={class:"l-loading__indicator"},b={key:0,class:"l-loading__text"},m=t.defineComponent({__name:"LoadingMask",props:{fullscreen:{type:Boolean},text:{},size:{}},setup(e){const o=e,{teleportedCssVars:n,teleportedTheme:a}=z.useTeleportedConfig(),l=t.computed(()=>_(o.size)),s=t.computed(()=>["l-loading__mask",{"l-loading--fullscreen":o.fullscreen}]),r=t.computed(()=>({...n.value}));return(g,d)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(s.value),"data-theme":t.unref(a),style:t.normalizeStyle(r.value),role:"status","aria-live":"polite"},[t.createElementVNode("div",E,[t.createElementVNode("span",{class:"l-loading__spinner",style:t.normalizeStyle({width:l.value,height:l.value})},null,4),e.text?(t.openBlock(),t.createElementBlock("span",b,t.toDisplayString(e.text),1)):t.createCommentVNode("",!0)])],14,B))}}),N={key:0,class:"l-loading l-loading--inline",role:"status","aria-live":"polite"},$={class:"l-loading__indicator"},P={key:0,class:"l-loading__text"},R=["aria-busy"],V=t.defineComponent({name:"Loading",__name:"Loading",props:S,setup(e){const o=e,n=z.useRoutaConfig(),a=T({loading:o.loading,mode:o.mode,text:o.text,size:o.size,defaultText:n.feedback.loading.text,defaultSize:n.feedback.loading.size}),{loading:l,isInline:s,isContainer:r,isFullscreen:g,resolvedText:d,resolvedSize:f,indicatorSize:i}=C.useController(a,{loading:()=>o.loading,mode:()=>o.mode,text:()=>o.text,size:()=>o.size,defaultText:()=>n.feedback.loading.text,defaultSize:()=>n.feedback.loading.size});return(y,M)=>t.unref(s)&&t.unref(l)?(t.openBlock(),t.createElementBlock("div",N,[t.createElementVNode("div",$,[t.createElementVNode("span",{class:"l-loading__spinner",style:t.normalizeStyle({width:t.unref(i),height:t.unref(i)})},null,4),t.unref(d)?(t.openBlock(),t.createElementBlock("span",P,t.toDisplayString(t.unref(d)),1)):t.createCommentVNode("",!0)])])):t.unref(r)?(t.openBlock(),t.createElementBlock("div",{key:1,class:"l-loading l-loading--container","aria-busy":t.unref(l)?!0:void 0},[t.renderSlot(y.$slots,"default"),t.unref(l)?(t.openBlock(),t.createBlock(m,{key:0,text:t.unref(d),size:t.unref(f)},null,8,["text","size"])):t.createCommentVNode("",!0)],8,R)):t.unref(g)&&t.unref(l)?(t.openBlock(),t.createBlock(t.Teleport,{key:2,to:"body"},[t.createVNode(m,{fullscreen:"",text:t.unref(d),size:t.unref(f)},null,8,["text","size"])])):t.unref(g)?t.renderSlot(y.$slots,"default",{key:3}):t.createCommentVNode("",!0)}}),c=Symbol("L_LOADING_STATE"),q=(e,o)=>{const n=z.resolveRoutaConfigFromElement(e);return L(o,{text:n.feedback.loading.text,size:n.feedback.loading.size})},D=e=>(e[c]||(e[c]={host:document.createElement("div"),target:e,originalPosition:e.style.position,appliedRelative:!1}),e[c]),x=e=>{const o=e[c];o!=null&&o.appliedRelative&&(e.style.position=o.originalPosition,o.appliedRelative=!1)},k=e=>{const o=e[c];o&&(t.render(null,o.host),o.host.remove(),x(e),o.target=e)},I=(e,o)=>{const n=D(e),a=o.fullscreen?document.body:e;o.fullscreen?x(e):window.getComputedStyle(e).position==="static"&&(n.originalPosition=e.style.position,e.style.position="relative",n.appliedRelative=!0),n.target!==a&&n.host.isConnected&&n.host.remove(),n.target=a,n.host.isConnected||a.appendChild(n.host),t.render(t.h(m,{fullscreen:o.fullscreen,text:o.text,size:o.size}),n.host)},p=(e,o)=>{const n=q(e,o);if(!n.loading){k(e);return}I(e,n)},h={mounted(e,o){const n=e;p(n,o.value),queueMicrotask(()=>{n.isConnected&&p(n,o.value)})},updated(e,o){p(e,o.value)},unmounted(e){const o=e;k(o),delete o[c]}},v=V;v.install=e=>{e.component("LLoading",v),e.directive("loading",h)};exports.LLoading=v;exports.default=v;exports.loadingProps=S;exports.resolveLoadingIndicatorSize=_;exports.vLoading=h;

package/dist/loading/index.mjs

@@ -0,0 +1,275 @@
+import '../style/loading.css';
+import { defineComponent as L, computed as _, openBlock as u, createElementBlock as p, normalizeStyle as y, unref as n, normalizeClass as N, createElementVNode as z, toDisplayString as b, createCommentVNode as m, renderSlot as k, createBlock as T, Teleport as w, createVNode as D, render as E, h as I } from "vue";
+import "../chunks/manager-BUdQK4AD.mjs";
+import { s as c } from "../chunks/index-B0yEC3RG.mjs";
+import { u as P } from "../chunks/use-signals-CE1T2jXK.mjs";
+import { useTeleportedConfig as A, useRoutaConfig as M, resolveRoutaConfigFromElement as F } from "../config-provider/index.mjs";
+const $ = (e) => {
+  if (typeof e == "number")
+    return `${e}px`;
+  if (typeof e == "string" && /^\d+$/.test(e))
+    return `${e}px`;
+  if (typeof e == "string" && e.endsWith("px"))
+    return e;
+  switch (e) {
+    case "small":
+      return "16px";
+    case "large":
+      return "28px";
+    default:
+      return "22px";
+  }
+}, G = (e, t) => typeof e == "boolean" ? {
+  loading: e,
+  text: t.text,
+  fullscreen: !1,
+  size: t.size
+} : {
+  loading: e.loading,
+  text: e.text ?? t.text,
+  fullscreen: e.fullscreen ?? !1,
+  size: e.size ?? t.size
+};
+function O(e = {}) {
+  const t = c(e.loading ?? !0), o = c(e.mode ?? "inline"), s = c(e.text), l = c(e.size), a = c(e.defaultText ?? ""), r = c(e.defaultSize ?? "medium"), f = (i) => {
+    "loading" in i && (t.value = i.loading ?? !0), "mode" in i && i.mode && (o.value = i.mode), "text" in i && (s.value = i.text), "size" in i && (l.value = i.size), "defaultText" in i && (a.value = i.defaultText ?? ""), "defaultSize" in i && i.defaultSize !== void 0 && (r.value = i.defaultSize);
+  }, d = () => s.value ?? a.value, v = () => l.value ?? r.value;
+  return {
+    state: {
+      get loading() {
+        return t.value;
+      },
+      set loading(i) {
+        t.value = i;
+      },
+      get mode() {
+        return o.value;
+      },
+      set mode(i) {
+        o.value = i;
+      },
+      get text() {
+        return s.value;
+      },
+      set text(i) {
+        s.value = i;
+      },
+      get size() {
+        return l.value;
+      },
+      set size(i) {
+        l.value = i;
+      },
+      get defaultText() {
+        return a.value;
+      },
+      set defaultText(i) {
+        a.value = i;
+      },
+      get defaultSize() {
+        return r.value;
+      },
+      set defaultSize(i) {
+        r.value = i;
+      },
+      get resolvedText() {
+        return d();
+      },
+      get resolvedSize() {
+        return v();
+      },
+      get indicatorSize() {
+        return $(v());
+      },
+      get isInline() {
+        return o.value === "inline";
+      },
+      get isContainer() {
+        return o.value === "container";
+      },
+      get isFullscreen() {
+        return o.value === "fullscreen";
+      }
+    },
+    actions: {
+      sync: f
+    }
+  };
+}
+const V = {
+  loading: {
+    type: Boolean,
+    default: !0
+  },
+  mode: {
+    type: String,
+    default: "inline"
+  },
+  text: {
+    type: String,
+    default: void 0
+  },
+  size: {
+    type: [String, Number],
+    default: void 0
+  }
+}, q = ["data-theme"], K = { class: "l-loading__indicator" }, W = {
+  key: 0,
+  class: "l-loading__text"
+}, h = /* @__PURE__ */ L({
+  __name: "LoadingMask",
+  props: {
+    fullscreen: { type: Boolean },
+    text: {},
+    size: {}
+  },
+  setup(e) {
+    const t = e, { teleportedCssVars: o, teleportedTheme: s } = A(), l = _(() => $(t.size)), a = _(() => [
+      "l-loading__mask",
+      {
+        "l-loading--fullscreen": t.fullscreen
+      }
+    ]), r = _(() => ({
+      ...o.value
+    }));
+    return (f, d) => (u(), p("div", {
+      class: N(a.value),
+      "data-theme": n(s),
+      style: y(r.value),
+      role: "status",
+      "aria-live": "polite"
+    }, [
+      z("div", K, [
+        z("span", {
+          class: "l-loading__spinner",
+          style: y({ width: l.value, height: l.value })
+        }, null, 4),
+        e.text ? (u(), p("span", W, b(e.text), 1)) : m("", !0)
+      ])
+    ], 14, q));
+  }
+}), Y = {
+  key: 0,
+  class: "l-loading l-loading--inline",
+  role: "status",
+  "aria-live": "polite"
+}, j = { class: "l-loading__indicator" }, H = {
+  key: 0,
+  class: "l-loading__text"
+}, J = ["aria-busy"], Q = /* @__PURE__ */ L({
+  name: "Loading",
+  __name: "Loading",
+  props: V,
+  setup(e) {
+    const t = e, o = M(), s = O({
+      loading: t.loading,
+      mode: t.mode,
+      text: t.text,
+      size: t.size,
+      defaultText: o.feedback.loading.text,
+      defaultSize: o.feedback.loading.size
+    }), {
+      loading: l,
+      isInline: a,
+      isContainer: r,
+      isFullscreen: f,
+      resolvedText: d,
+      resolvedSize: v,
+      indicatorSize: i
+    } = P(s, {
+      loading: () => t.loading,
+      mode: () => t.mode,
+      text: () => t.text,
+      size: () => t.size,
+      defaultText: () => o.feedback.loading.text,
+      defaultSize: () => o.feedback.loading.size
+    });
+    return (S, te) => n(a) && n(l) ? (u(), p("div", Y, [
+      z("div", j, [
+        z("span", {
+          class: "l-loading__spinner",
+          style: y({ width: n(i), height: n(i) })
+        }, null, 4),
+        n(d) ? (u(), p("span", H, b(n(d)), 1)) : m("", !0)
+      ])
+    ])) : n(r) ? (u(), p("div", {
+      key: 1,
+      class: "l-loading l-loading--container",
+      "aria-busy": n(l) ? !0 : void 0
+    }, [
+      k(S.$slots, "default"),
+      n(l) ? (u(), T(h, {
+        key: 0,
+        text: n(d),
+        size: n(v)
+      }, null, 8, ["text", "size"])) : m("", !0)
+    ], 8, J)) : n(f) && n(l) ? (u(), T(w, {
+      key: 2,
+      to: "body"
+    }, [
+      D(h, {
+        fullscreen: "",
+        text: n(d),
+        size: n(v)
+      }, null, 8, ["text", "size"])
+    ])) : n(f) ? k(S.$slots, "default", { key: 3 }) : m("", !0);
+  }
+}), g = Symbol("L_LOADING_STATE"), U = (e, t) => {
+  const o = F(e);
+  return G(t, {
+    text: o.feedback.loading.text,
+    size: o.feedback.loading.size
+  });
+}, X = (e) => (e[g] || (e[g] = {
+  host: document.createElement("div"),
+  target: e,
+  originalPosition: e.style.position,
+  appliedRelative: !1
+}), e[g]), R = (e) => {
+  const t = e[g];
+  t != null && t.appliedRelative && (e.style.position = t.originalPosition, t.appliedRelative = !1);
+}, B = (e) => {
+  const t = e[g];
+  t && (E(null, t.host), t.host.remove(), R(e), t.target = e);
+}, Z = (e, t) => {
+  const o = X(e), s = t.fullscreen ? document.body : e;
+  t.fullscreen ? R(e) : window.getComputedStyle(e).position === "static" && (o.originalPosition = e.style.position, e.style.position = "relative", o.appliedRelative = !0), o.target !== s && o.host.isConnected && o.host.remove(), o.target = s, o.host.isConnected || s.appendChild(o.host), E(
+    I(h, {
+      fullscreen: t.fullscreen,
+      text: t.text,
+      size: t.size
+    }),
+    o.host
+  );
+}, x = (e, t) => {
+  const o = U(e, t);
+  if (!o.loading) {
+    B(e);
+    return;
+  }
+  Z(e, o);
+}, ee = {
+  mounted(e, t) {
+    const o = e;
+    x(o, t.value), queueMicrotask(() => {
+      o.isConnected && x(o, t.value);
+    });
+  },
+  updated(e, t) {
+    x(e, t.value);
+  },
+  unmounted(e) {
+    const t = e;
+    B(t), delete t[g];
+  }
+}, C = Q;
+C.install = (e) => {
+  e.component("LLoading", C), e.directive("loading", ee);
+};
+export {
+  C as LLoading,
+  C as default,
+  V as loadingProps,
+  $ as resolveLoadingIndicatorSize,
+  ee as vLoading
+};