init component
This commit is contained in:
Robin COuret
+21
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 Harry Kightlinger
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
|
||||
# buetify
|
||||
Source code for buetify
|
||||
## Project setup
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
### Compiles for production
|
||||
```
|
||||
yarn build
|
||||
```
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
import 'bulma/sass/components/card.sass';
|
||||
import '../../sass/helpers/animations.sass';
|
||||
import './accordion.sass';
|
||||
export declare const ACCORDION_CONTENT_THEME_MAP: {
|
||||
dark: string;
|
||||
light: string;
|
||||
};
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
themeMap: {
|
||||
type: import("vue").PropType<import("../..").ThemeColorMap>;
|
||||
required: boolean;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../..").ThemeColorMap>;
|
||||
};
|
||||
isThemeable: {
|
||||
type: import("vue").PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
transition: {
|
||||
type: import("vue").PropType<import("../../types/Transition").Transition>;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../../types/Transition").Transition>;
|
||||
};
|
||||
onToggle: {
|
||||
type: import("vue").PropType<import("fp-ts/lib/function").FunctionN<[boolean], void>>;
|
||||
required: false;
|
||||
};
|
||||
onSetOn: {
|
||||
type: import("vue").PropType<import("fp-ts/lib/IO").IO<void>>;
|
||||
required: false;
|
||||
};
|
||||
onSetOff: {
|
||||
type: import("vue").PropType<import("fp-ts/lib/IO").IO<void>>;
|
||||
required: false;
|
||||
};
|
||||
isExpanded: {
|
||||
type: import("vue").PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
hasPopup: {
|
||||
type: import("vue").PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../..").ThemeColorMap;
|
||||
hasPopup: boolean;
|
||||
transition: import("../../types/Transition").Transition;
|
||||
isExpanded: boolean;
|
||||
} & {
|
||||
onToggle?: import("fp-ts/lib/function").FunctionN<[boolean], void> | undefined;
|
||||
onSetOn?: import("fp-ts/lib/IO").IO<void> | undefined;
|
||||
onSetOff?: import("fp-ts/lib/IO").IO<void> | undefined;
|
||||
}>, {
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../..").ThemeColorMap;
|
||||
hasPopup: boolean;
|
||||
transition: import("../../types/Transition").Transition;
|
||||
isExpanded: boolean;
|
||||
}>;
|
||||
export default _default;
|
||||
+75
@@ -0,0 +1,75 @@
|
||||
import 'bulma/sass/components/card.sass';
|
||||
import "../../../src/sass/helpers/animations.sass";
|
||||
import "../../../src/components/accordion/accordion.sass";
|
||||
import { defineComponent, h, vShow, withDirectives, Transition } from 'vue';
|
||||
import { DefaultThemePropsDefinition, useTheme } from '../../composables/theme';
|
||||
import { getUseTogglePropsDefinition, useToggle } from '../../composables/toggle';
|
||||
import { FadeTransitionPropsDefinition, useTransition } from '../../composables/transition';
|
||||
import { getThemeableFunctionalComponent } from '../../utils/getThemeableFunctionalComponent';
|
||||
import VerticalExpansionIcon from '../icons/verticalExpansion/VerticalExpansionIcon';
|
||||
|
||||
function generateTitle(slots) {
|
||||
return h('h1', {
|
||||
class: 'card-header-title'
|
||||
}, slots.title && slots.title());
|
||||
}
|
||||
|
||||
function generateTriggerButton(toggle, slots) {
|
||||
return h('button', {
|
||||
class: 'card-header-icon',
|
||||
...toggle.listeners,
|
||||
...toggle.attrs.value,
|
||||
onClick: e => {
|
||||
e.stopPropagation();
|
||||
toggle.toggle();
|
||||
}
|
||||
}, slots.trigger ? slots.trigger({
|
||||
isExpanded: toggle.isOn.value
|
||||
}) : h(VerticalExpansionIcon, {
|
||||
isExpanded: toggle.isOn.value
|
||||
}));
|
||||
}
|
||||
|
||||
function generateHeader(toggle, slots) {
|
||||
return h('header', {
|
||||
class: 'card-header',
|
||||
onClick: toggle.toggle
|
||||
}, [generateTitle(slots), generateTriggerButton(toggle, slots)]);
|
||||
}
|
||||
|
||||
export const ACCORDION_CONTENT_THEME_MAP = {
|
||||
dark: 'is-black-ter',
|
||||
light: ''
|
||||
};
|
||||
const BAccordionContent = getThemeableFunctionalComponent({
|
||||
cls: 'card-content',
|
||||
el: 'section',
|
||||
themeMap: ACCORDION_CONTENT_THEME_MAP
|
||||
});
|
||||
|
||||
function generateBody(toggle, transition, slots) {
|
||||
return h(Transition, transition.value, () => withDirectives(h(BAccordionContent, {
|
||||
'aria-hidden': !toggle.isOn.value
|
||||
}, slots.default), [[vShow, toggle.isOn.value]]));
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'b-accordion',
|
||||
props: { ...getUseTogglePropsDefinition('isExpanded'),
|
||||
...FadeTransitionPropsDefinition,
|
||||
...DefaultThemePropsDefinition
|
||||
},
|
||||
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const toggle = useToggle(props, 'isExpanded');
|
||||
const theme = useTheme(props);
|
||||
const transition = useTransition(props);
|
||||
return () => h('article', {
|
||||
class: ['b-card card', ...theme.themeClasses.value]
|
||||
}, [generateHeader(toggle, slots), generateBody(toggle, transition, slots)]);
|
||||
}
|
||||
|
||||
});
|
||||
//# sourceMappingURL=BAccordion.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+3
@@ -0,0 +1,3 @@
|
||||
import BAccordion from './BAccordion';
|
||||
export { BAccordion };
|
||||
export default BAccordion;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import BAccordion from './BAccordion';
|
||||
export { BAccordion };
|
||||
export default BAccordion;
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAP,MAAuB,cAAvB;AAEA,SAAS,UAAT;AACA,eAAe,UAAf","sourcesContent":["import BAccordion from './BAccordion';\n\nexport { BAccordion };\nexport default BAccordion;\n"],"sourceRoot":"","file":"index.js"}
|
||||
+72
@@ -0,0 +1,72 @@
|
||||
import '../../sass/helpers/animations.sass';
|
||||
import './app.sass';
|
||||
import { VNode } from 'vue';
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
currentRoute: {
|
||||
required: boolean;
|
||||
};
|
||||
isVisible: {
|
||||
type: import("vue").PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
hasPopup: {
|
||||
type: import("vue").PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
breakPoints: {
|
||||
type: import("vue").PropType<{
|
||||
mobile: number;
|
||||
tablet: number;
|
||||
desktop: number;
|
||||
widescreen: number;
|
||||
fullHD: number;
|
||||
}>;
|
||||
required: boolean;
|
||||
default: import("fp-ts/lib/function").Lazy<{
|
||||
mobile: number;
|
||||
tablet: number;
|
||||
desktop: number;
|
||||
widescreen: number;
|
||||
fullHD: number;
|
||||
}>;
|
||||
};
|
||||
isThemeable: {
|
||||
type: import("vue").PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
persistTheme: {
|
||||
type: import("vue").PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
|
||||
isThemeable: boolean;
|
||||
persistTheme: boolean;
|
||||
hasPopup: boolean;
|
||||
breakPoints: {
|
||||
mobile: number;
|
||||
tablet: number;
|
||||
desktop: number;
|
||||
widescreen: number;
|
||||
fullHD: number;
|
||||
};
|
||||
isVisible: boolean;
|
||||
} & {
|
||||
currentRoute?: unknown;
|
||||
}>, {
|
||||
isThemeable: boolean;
|
||||
persistTheme: boolean;
|
||||
hasPopup: boolean;
|
||||
breakPoints: {
|
||||
mobile: number;
|
||||
tablet: number;
|
||||
desktop: number;
|
||||
widescreen: number;
|
||||
fullHD: number;
|
||||
};
|
||||
isVisible: boolean;
|
||||
}>;
|
||||
export default _default;
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
import "../../../src/sass/helpers/animations.sass";
|
||||
import "../../../src/components/app/app.sass";
|
||||
import { defineComponent, shallowRef, h, vShow, withDirectives } from 'vue';
|
||||
import { provideNoticeController } from '../../composables/noticeController';
|
||||
import { providePopupController } from '../../composables/popupController';
|
||||
import { provideTheme, ProvideThemePropDefinitions } from '../../composables/theme';
|
||||
import { formatTransition } from '../../composables/transition';
|
||||
import { provideWindowSize, ProvideWindowSizePropsDefinition } from '../../composables/windowSize';
|
||||
import BSidebar from '../sidebar/BSidebar';
|
||||
import BNoticeContainer from '../notices/noticeContainer/BNoticeContainer';
|
||||
import BPopupContainer from '../popupContainer/BPopupContainer';
|
||||
import { provideSidebarController, ProvideSidebarControllerPropsDefinition } from '../sidebar/composables';
|
||||
const DEFAULT_TRANSITION = {
|
||||
name: 'fade'
|
||||
};
|
||||
|
||||
function generateNoticeContainer(placement, ref) {
|
||||
return h(BNoticeContainer, {
|
||||
ref,
|
||||
class: placement === 'top' ? 'notices-is-top' : 'notices-is-bottom'
|
||||
});
|
||||
}
|
||||
|
||||
function generatePopupContainer(ref) {
|
||||
return h(BPopupContainer, {
|
||||
ref
|
||||
});
|
||||
}
|
||||
|
||||
function generateSidebarSlot(slots, hasHeader, currentRoute, sidebar) {
|
||||
return h(BSidebar, {
|
||||
currentRoute,
|
||||
isFullheight: true
|
||||
}, () => slots.sidebar && slots.sidebar(sidebar));
|
||||
}
|
||||
|
||||
function generateBodyContent(slots, hasNavigationDrawer, sidebar, currentRoute) {
|
||||
const nodes = [];
|
||||
|
||||
if (slots.header) {
|
||||
const header = slots.header(sidebar);
|
||||
if (header) nodes.push(header);
|
||||
}
|
||||
|
||||
nodes.push(h('div', {
|
||||
class: 'b-app-body-content'
|
||||
}, hasNavigationDrawer ? [withDirectives(generateSidebarSlot(slots, !!slots.header, currentRoute, sidebar), [[vShow, sidebar.isVisible.value]]), h('div', {
|
||||
class: 'b-app-content'
|
||||
}, slots.default && slots.default(sidebar))] : [h('div', {
|
||||
class: 'b-app-content'
|
||||
}, slots.default && slots.default(sidebar))]));
|
||||
return nodes;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'b-app',
|
||||
props: { ...ProvideThemePropDefinitions,
|
||||
...ProvideWindowSizePropsDefinition,
|
||||
...ProvideSidebarControllerPropsDefinition
|
||||
},
|
||||
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const popup = shallowRef(null);
|
||||
const top = shallowRef(null);
|
||||
const bottom = shallowRef(null);
|
||||
|
||||
function showNotice(params) {
|
||||
const options = { ...params,
|
||||
transition: params.transition ? formatTransition(params.transition) : DEFAULT_TRANSITION
|
||||
};
|
||||
return params.placement === 'top' ? top.value.showNotice(options) : bottom.value.showNotice(options);
|
||||
}
|
||||
|
||||
function showPopup(params) {
|
||||
return popup.value.showPopup({
|
||||
render: params.render,
|
||||
transition: params.transition ? formatTransition(params.transition) : DEFAULT_TRANSITION
|
||||
});
|
||||
}
|
||||
|
||||
provideTheme(props);
|
||||
provideNoticeController(showNotice);
|
||||
providePopupController(showPopup);
|
||||
provideWindowSize(props);
|
||||
const sidebarController = provideSidebarController(props);
|
||||
return () => {
|
||||
const hasNavigationDrawer = !!slots['sidebar'];
|
||||
const nodes = [generateNoticeContainer('top', top), generateNoticeContainer('bottom', bottom), generatePopupContainer(popup)];
|
||||
nodes.push(h('div', {
|
||||
class: ['b-app', {
|
||||
'has-navigation-drawer': hasNavigationDrawer && sidebarController.isVisible.value,
|
||||
'has-header': !!slots.header
|
||||
}]
|
||||
}, generateBodyContent(slots, hasNavigationDrawer, sidebarController, props.currentRoute)));
|
||||
return h('div', {
|
||||
class: 'b-notices-container'
|
||||
}, nodes);
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
//# sourceMappingURL=BApp.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+3
@@ -0,0 +1,3 @@
|
||||
import BApp from './BApp';
|
||||
export { BApp };
|
||||
export default BApp;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import BApp from './BApp';
|
||||
export { BApp };
|
||||
export default BApp;
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/app/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAP,MAAiB,QAAjB;AAEA,SAAS,IAAT;AACA,eAAe,IAAf","sourcesContent":["import BApp from './BApp';\n\nexport { BApp };\nexport default BApp;\n"],"sourceRoot":"","file":"index.js"}
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
import './app-header.sass';
|
||||
import '../../sass/helpers/flex-helpers.sass';
|
||||
import { SetupContext } from 'vue';
|
||||
export default function (props: {
|
||||
tag?: string;
|
||||
}, { slots }: SetupContext): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>;
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
import "../../../src/components/appHeader/app-header.sass";
|
||||
import "../../../src/sass/helpers/flex-helpers.sass";
|
||||
import { isSome } from 'fp-ts/lib/Option';
|
||||
import { h } from 'vue';
|
||||
import BNavbarBurger from '../navbar/BNavbarBurger';
|
||||
import { useSidebarController } from '../sidebar/composables';
|
||||
|
||||
function generateMainSlot(injection, includeClickHandler, slots) {
|
||||
return h('div', {
|
||||
class: 'main-slot',
|
||||
...(includeClickHandler && isSome(injection.listeners.value) ? {
|
||||
onClick: injection.listeners.value.value.onClick
|
||||
} : {})
|
||||
}, slots.default && slots.default());
|
||||
}
|
||||
|
||||
function generateNavigationButton(injection, slots) {
|
||||
const listeners = isSome(injection.listeners.value) ? injection.listeners.value.value : {};
|
||||
const attrs = isSome(injection.attrs.value) ? injection.attrs.value.value : {};
|
||||
return h('button', {
|
||||
class: 'navigation-icon is-hidden-desktop',
|
||||
...listeners,
|
||||
...attrs,
|
||||
'aria-label': 'Toggle navigation pane'
|
||||
}, slots.trigger ? slots.trigger({
|
||||
isVisible: injection.isVisible.value
|
||||
}) : h(BNavbarBurger, {
|
||||
tag: 'span',
|
||||
isActive: injection.isVisible.value
|
||||
}));
|
||||
}
|
||||
|
||||
export default function (props, {
|
||||
slots
|
||||
}) {
|
||||
const sidebarController = useSidebarController();
|
||||
const isInvisible = !sidebarController.isVisible.value;
|
||||
return h(props.tag ?? 'header', {
|
||||
class: 'b-app-header is-flex flex-direction-row justify-content-center align-items-center has-navigation'
|
||||
}, [generateNavigationButton(sidebarController, slots), generateMainSlot(sidebarController, isInvisible, slots)]);
|
||||
}
|
||||
//# sourceMappingURL=BAppHeader.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/appHeader/BAppHeader.ts"],"names":[],"mappings":"AAAA,OAAO,mDAAP;AACA,OAAO,6CAAP;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAuB,CAAvB,QAAuC,KAAvC;AACA,OAAO,aAAP,MAA0B,yBAA1B;AACA,SAA4B,oBAA5B,QAAwD,wBAAxD;;AAEA,SAAS,gBAAT,CAA0B,SAA1B,EAAwD,mBAAxD,EAAsF,KAAtF,EAAkG;AAChG,SAAO,CAAC,CACN,KADM,EAEN;AACE,IAAA,KAAK,EAAE,WADT;AAEE,QAAI,mBAAmB,IAAI,MAAM,CAAC,SAAS,CAAC,SAAV,CAAoB,KAArB,CAA7B,GACA;AAAE,MAAA,OAAO,EAAE,SAAS,CAAC,SAAV,CAAoB,KAApB,CAA0B,KAA1B,CAAgC;AAA3C,KADA,GAEA,EAFJ;AAFF,GAFM,EAQN,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,OAAN,EARX,CAAR;AAUD;;AAED,SAAS,wBAAT,CAAkC,SAAlC,EAAgE,KAAhE,EAA4E;AAC1E,QAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,SAAV,CAAoB,KAArB,CAAN,GAAoC,SAAS,CAAC,SAAV,CAAoB,KAApB,CAA0B,KAA9D,GAAsE,EAAxF;AACA,QAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,KAAV,CAAgB,KAAjB,CAAN,GAAgC,SAAS,CAAC,KAAV,CAAgB,KAAhB,CAAsB,KAAtD,GAA8D,EAA5E;AACA,SAAO,CAAC,CACN,QADM,EAEN;AACE,IAAA,KAAK,EAAE,mCADT;AAEE,OAAG,SAFL;AAGE,OAAG,KAHL;AAIE,kBAAc;AAJhB,GAFM,EAQN,KAAK,CAAC,OAAN,GACI,KAAK,CAAC,OAAN,CAAc;AAAE,IAAA,SAAS,EAAE,SAAS,CAAC,SAAV,CAAoB;AAAjC,GAAd,CADJ,GAEI,CAAC,CAAC,aAAD,EAAgB;AAAE,IAAA,GAAG,EAAE,MAAP;AAAe,IAAA,QAAQ,EAAE,SAAS,CAAC,SAAV,CAAoB;AAA7C,GAAhB,CAVC,CAAR;AAYD;;AAED,eAAc,UAAU,KAAV,EAAmC;AAAE,EAAA;AAAF,CAAnC,EAA0D;AACtE,QAAM,iBAAiB,GAAG,oBAAoB,EAA9C;AACA,QAAM,WAAW,GAAG,CAAC,iBAAiB,CAAC,SAAlB,CAA4B,KAAjD;AACA,SAAO,CAAC,CACN,KAAK,CAAC,GAAN,IAAa,QADP,EAEN;AACE,IAAA,KAAK,EAAE;AADT,GAFM,EAKN,CAAC,wBAAwB,CAAC,iBAAD,EAAoB,KAApB,CAAzB,EAAqD,gBAAgB,CAAC,iBAAD,EAAoB,WAApB,EAAiC,KAAjC,CAArE,CALM,CAAR;AAOD","sourcesContent":["import './app-header.sass';\nimport '../../sass/helpers/flex-helpers.sass';\nimport { isSome } from 'fp-ts/lib/Option';\nimport { SetupContext, h, Slots } from 'vue';\nimport BNavbarBurger from '../navbar/BNavbarBurger';\nimport { SidebarController, useSidebarController } from '../sidebar/composables';\n\nfunction generateMainSlot(injection: SidebarController, includeClickHandler: boolean, slots: Slots) {\n return h(\n 'div',\n {\n class: 'main-slot',\n ...(includeClickHandler && isSome(injection.listeners.value)\n ? { onClick: injection.listeners.value.value.onClick }\n : {})\n },\n slots.default && slots.default()\n );\n}\n\nfunction generateNavigationButton(injection: SidebarController, slots: Slots) {\n const listeners = isSome(injection.listeners.value) ? injection.listeners.value.value : {};\n const attrs = isSome(injection.attrs.value) ? injection.attrs.value.value : {};\n return h(\n 'button',\n {\n class: 'navigation-icon is-hidden-desktop',\n ...listeners,\n ...attrs,\n 'aria-label': 'Toggle navigation pane'\n },\n slots.trigger\n ? slots.trigger({ isVisible: injection.isVisible.value })\n : h(BNavbarBurger, { tag: 'span', isActive: injection.isVisible.value })\n );\n}\n\nexport default function(props: { tag?: string }, { slots }: SetupContext) {\n const sidebarController = useSidebarController();\n const isInvisible = !sidebarController.isVisible.value;\n return h(\n props.tag ?? 'header',\n {\n class: 'b-app-header is-flex flex-direction-row justify-content-center align-items-center has-navigation'\n },\n [generateNavigationButton(sidebarController, slots), generateMainSlot(sidebarController, isInvisible, slots)]\n );\n}\n"],"sourceRoot":"","file":"BAppHeader.js"}
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import BAppHeader from './BAppHeader';
|
||||
export { BAppHeader };
|
||||
export default BAppHeader;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import BAppHeader from './BAppHeader';
|
||||
export { BAppHeader };
|
||||
export default BAppHeader;
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/appHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAP,MAAuB,cAAvB;AAEA,SAAS,UAAT;AACA,eAAe,UAAf","sourcesContent":["import BAppHeader from './BAppHeader';\n\nexport { BAppHeader };\nexport default BAppHeader;\n"],"sourceRoot":"","file":"index.js"}
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
import 'bulma/sass/elements/button.sass';
|
||||
import { PropType } from 'vue';
|
||||
import { ColorVariant } from '../../types/ColorVariants';
|
||||
import { SizeVariant } from '../../types/SizeVariants';
|
||||
export interface ButtonProps {
|
||||
variant: ColorVariant;
|
||||
isRounded: boolean;
|
||||
isLoading: boolean;
|
||||
isOutlined: boolean;
|
||||
isInverted: boolean;
|
||||
isFocused: boolean;
|
||||
isActive: boolean;
|
||||
isDisabled: boolean;
|
||||
isHovered: boolean;
|
||||
isSelected: boolean;
|
||||
isFullwidth: boolean;
|
||||
size: SizeVariant;
|
||||
tag: 'button' | 'a' | 'input';
|
||||
}
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
tag: {
|
||||
type: PropType<"button" | "input" | "a">;
|
||||
default: "button";
|
||||
validator: (val: string) => boolean;
|
||||
};
|
||||
size: {
|
||||
type: PropType<SizeVariant>;
|
||||
default: SizeVariant;
|
||||
};
|
||||
variant: {
|
||||
type: PropType<ColorVariant>;
|
||||
default: ColorVariant;
|
||||
};
|
||||
isRounded: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isLoading: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isOutlined: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isInverted: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isFocused: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isActive: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isDisabled: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isHovered: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isSelected: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isFullwidth: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
|
||||
tag: "button" | "input" | "a";
|
||||
variant: ColorVariant;
|
||||
size: SizeVariant;
|
||||
isActive: boolean;
|
||||
isRounded: boolean;
|
||||
isLoading: boolean;
|
||||
isOutlined: boolean;
|
||||
isInverted: boolean;
|
||||
isFocused: boolean;
|
||||
isDisabled: boolean;
|
||||
isHovered: boolean;
|
||||
isSelected: boolean;
|
||||
isFullwidth: boolean;
|
||||
} & {}>, {
|
||||
tag: "button" | "input" | "a";
|
||||
variant: ColorVariant;
|
||||
size: SizeVariant;
|
||||
isActive: boolean;
|
||||
isRounded: boolean;
|
||||
isLoading: boolean;
|
||||
isOutlined: boolean;
|
||||
isInverted: boolean;
|
||||
isFocused: boolean;
|
||||
isDisabled: boolean;
|
||||
isHovered: boolean;
|
||||
isSelected: boolean;
|
||||
isFullwidth: boolean;
|
||||
}>;
|
||||
export default _default;
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
import 'bulma/sass/elements/button.sass';
|
||||
import { h, defineComponent } from 'vue';
|
||||
|
||||
function useButtonClasses(props) {
|
||||
return ['button', props.variant, props.size, {
|
||||
'is-rounded': props.isRounded,
|
||||
'is-loading': props.isLoading,
|
||||
'is-outlined': props.isOutlined,
|
||||
'is-inverted': props.isInverted,
|
||||
'is-focused': props.isFocused,
|
||||
'is-active': props.isActive,
|
||||
'is-disabled': props.isDisabled,
|
||||
'is-hovered': props.isHovered,
|
||||
'is-selected': props.isSelected,
|
||||
'is-fullwidth': props.isFullwidth
|
||||
}];
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'b-button',
|
||||
props: {
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'button',
|
||||
validator: val => ['button', 'a', 'input'].includes(val)
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isRounded: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isOutlined: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isInverted: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isFocused: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isHovered: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isSelected: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isFullwidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
return () => h(props.tag, {
|
||||
class: useButtonClasses(props),
|
||||
disabled: props.isDisabled ? true : null
|
||||
}, slots.default && slots.default());
|
||||
}
|
||||
|
||||
});
|
||||
//# sourceMappingURL=BButton.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/button/BButton.ts"],"names":[],"mappings":"AAAA,OAAO,iCAAP;AACA,SAAS,CAAT,EAAsB,eAAtB,QAA6C,KAA7C;;AAqBA,SAAS,gBAAT,CAA0B,KAA1B,EAA4C;AAC1C,SAAO,CACL,QADK,EAEL,KAAK,CAAC,OAFD,EAGL,KAAK,CAAC,IAHD,EAIL;AACE,kBAAc,KAAK,CAAC,SADtB;AAEE,kBAAc,KAAK,CAAC,SAFtB;AAGE,mBAAe,KAAK,CAAC,UAHvB;AAIE,mBAAe,KAAK,CAAC,UAJvB;AAKE,kBAAc,KAAK,CAAC,SALtB;AAME,iBAAa,KAAK,CAAC,QANrB;AAOE,mBAAe,KAAK,CAAC,UAPvB;AAQE,kBAAc,KAAK,CAAC,SARtB;AASE,mBAAe,KAAK,CAAC,UATvB;AAUE,oBAAgB,KAAK,CAAC;AAVxB,GAJK,CAAP;AAiBD;;AAED,eAAe,eAAe,CAAC;AAC7B,EAAA,IAAI,EAAE,UADuB;AAE7B,EAAA,KAAK,EAAE;AACL,IAAA,GAAG,EAAE;AACH,MAAA,IAAI,EAAE,MADH;AAEH,MAAA,OAAO,EAAE,QAFN;AAGH,MAAA,SAAS,EAAG,GAAD,IAAiB,CAAC,QAAD,EAAW,GAAX,EAAgB,OAAhB,EAAyB,QAAzB,CAAkC,GAAlC;AAHzB,KADA;AAML,IAAA,IAAI,EAAE;AACJ,MAAA,IAAI,EAAE,MADF;AAEJ,MAAA,OAAO,EAAE;AAFL,KAND;AAUL,IAAA,OAAO,EAAE;AACP,MAAA,IAAI,EAAE,MADC;AAEP,MAAA,OAAO,EAAE;AAFF,KAVJ;AAcL,IAAA,SAAS,EAAE;AACT,MAAA,IAAI,EAAE,OADG;AAET,MAAA,OAAO,EAAE;AAFA,KAdN;AAkBL,IAAA,SAAS,EAAE;AACT,MAAA,IAAI,EAAE,OADG;AAET,MAAA,OAAO,EAAE;AAFA,KAlBN;AAsBL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,OADI;AAEV,MAAA,OAAO,EAAE;AAFC,KAtBP;AA0BL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,OADI;AAEV,MAAA,OAAO,EAAE;AAFC,KA1BP;AA8BL,IAAA,SAAS,EAAE;AACT,MAAA,IAAI,EAAE,OADG;AAET,MAAA,OAAO,EAAE;AAFA,KA9BN;AAkCL,IAAA,QAAQ,EAAE;AACR,MAAA,IAAI,EAAE,OADE;AAER,MAAA,OAAO,EAAE;AAFD,KAlCL;AAsCL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,OADI;AAEV,MAAA,OAAO,EAAE;AAFC,KAtCP;AA0CL,IAAA,SAAS,EAAE;AACT,MAAA,IAAI,EAAE,OADG;AAET,MAAA,OAAO,EAAE;AAFA,KA1CN;AA8CL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,OADI;AAEV,MAAA,OAAO,EAAE;AAFC,KA9CP;AAkDL,IAAA,WAAW,EAAE;AACX,MAAA,IAAI,EAAE,OADK;AAEX,MAAA,OAAO,EAAE;AAFE;AAlDR,GAFsB;;AAyD7B,EAAA,KAAK,CAAC,KAAD,EAAQ;AAAE,IAAA;AAAF,GAAR,EAAiB;AACpB,WAAO,MACL,CAAC,CACC,KAAK,CAAC,GADP,EAEC;AACE,MAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,CADzB;AAEE,MAAA,QAAQ,EAAE,KAAK,CAAC,UAAN,GAAmB,IAAnB,GAA0B;AAFtC,KAFD,EAMC,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,OAAN,EANlB,CADH;AASD;;AAnE4B,CAAD,CAA9B","sourcesContent":["import 'bulma/sass/elements/button.sass';\nimport { h, PropType, defineComponent } from 'vue';\nimport { ColorVariant } from '../../types/ColorVariants';\nimport { SizeVariant } from '../../types/SizeVariants';\nimport { Classes } from '../../utils/mergeClasses';\n\nexport interface ButtonProps {\n variant: ColorVariant;\n isRounded: boolean;\n isLoading: boolean;\n isOutlined: boolean;\n isInverted: boolean;\n isFocused: boolean;\n isActive: boolean;\n isDisabled: boolean;\n isHovered: boolean;\n isSelected: boolean;\n isFullwidth: boolean;\n size: SizeVariant;\n tag: 'button' | 'a' | 'input';\n}\n\nfunction useButtonClasses(props: ButtonProps): Classes {\n return [\n 'button',\n props.variant,\n props.size,\n {\n 'is-rounded': props.isRounded,\n 'is-loading': props.isLoading,\n 'is-outlined': props.isOutlined,\n 'is-inverted': props.isInverted,\n 'is-focused': props.isFocused,\n 'is-active': props.isActive,\n 'is-disabled': props.isDisabled,\n 'is-hovered': props.isHovered,\n 'is-selected': props.isSelected,\n 'is-fullwidth': props.isFullwidth\n }\n ];\n}\n\nexport default defineComponent({\n name: 'b-button',\n props: {\n tag: {\n type: String as PropType<'button' | 'a' | 'input'>,\n default: 'button' as const,\n validator: (val: string) => ['button', 'a', 'input'].includes(val)\n },\n size: {\n type: String as PropType<SizeVariant>,\n default: '' as SizeVariant\n },\n variant: {\n type: String as PropType<ColorVariant>,\n default: '' as ColorVariant\n },\n isRounded: {\n type: Boolean as PropType<boolean>,\n default: false\n },\n isLoading: {\n type: Boolean as PropType<boolean>,\n default: false\n },\n isOutlined: {\n type: Boolean as PropType<boolean>,\n default: false\n },\n isInverted: {\n type: Boolean as PropType<boolean>,\n default: false\n },\n isFocused: {\n type: Boolean as PropType<boolean>,\n default: false\n },\n isActive: {\n type: Boolean as PropType<boolean>,\n default: false\n },\n isDisabled: {\n type: Boolean as PropType<boolean>,\n default: false\n },\n isHovered: {\n type: Boolean as PropType<boolean>,\n default: false\n },\n isSelected: {\n type: Boolean as PropType<boolean>,\n default: false\n },\n isFullwidth: {\n type: Boolean as PropType<boolean>,\n default: false\n }\n },\n setup(props, { slots }) {\n return () =>\n h(\n props.tag,\n {\n class: useButtonClasses(props),\n disabled: props.isDisabled ? true : null\n },\n slots.default && slots.default()\n );\n }\n});\n"],"sourceRoot":"","file":"BButton.js"}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import BButton from './BButton';
|
||||
import { ButtonTheme } from './theme';
|
||||
export { BButton, ButtonTheme };
|
||||
export default BButton;
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import BButton from './BButton';
|
||||
import { ButtonTheme } from './theme';
|
||||
export { BButton, ButtonTheme };
|
||||
export default BButton;
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAP,MAAoB,WAApB;AACA,SAAS,WAAT,QAA4B,SAA5B;AAEA,SAAS,OAAT,EAAkB,WAAlB;AACA,eAAe,OAAf","sourcesContent":["import BButton from './BButton';\nimport { ButtonTheme } from './theme';\n\nexport { BButton, ButtonTheme };\nexport default BButton;\n"],"sourceRoot":"","file":"index.js"}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import { ThemeColorMap } from '../../types/ThemeColorMap';
|
||||
export declare const ButtonTheme: ThemeColorMap;
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
import { shallowReactive } from 'vue';
|
||||
export const ButtonTheme = shallowReactive({
|
||||
dark: 'is-primary',
|
||||
light: 'is-primary'
|
||||
});
|
||||
//# sourceMappingURL=theme.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/button/theme.ts"],"names":[],"mappings":"AAAA,SAAS,eAAT,QAAgC,KAAhC;AAGA,OAAO,MAAM,WAAW,GAAkB,eAAe,CAAC;AACxD,EAAA,IAAI,EAAE,YADkD;AAExD,EAAA,KAAK,EAAE;AAFiD,CAAD,CAAlD","sourcesContent":["import { shallowReactive } from 'vue';\nimport { ThemeColorMap } from '../../types/ThemeColorMap';\n\nexport const ButtonTheme: ThemeColorMap = shallowReactive({\n dark: 'is-primary',\n light: 'is-primary'\n});\n"],"sourceRoot":"","file":"theme.js"}
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
import 'bulma/sass/components/modal.sass';
|
||||
import './dialog.sass';
|
||||
import { IO } from 'fp-ts/lib/IO';
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
onToggle: {
|
||||
type: import("vue").PropType<import("fp-ts/lib/function").FunctionN<[boolean], void>>;
|
||||
required: false;
|
||||
};
|
||||
onSetOn: {
|
||||
type: import("vue").PropType<IO<void>>;
|
||||
required: false;
|
||||
};
|
||||
onSetOff: {
|
||||
type: import("vue").PropType<IO<void>>;
|
||||
required: false;
|
||||
};
|
||||
isActive: {
|
||||
type: import("vue").PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
hasPopup: {
|
||||
type: import("vue").PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
transition: {
|
||||
type: import("vue").PropType<import("../..").Transition>;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../..").Transition>;
|
||||
};
|
||||
}, {
|
||||
popup: {
|
||||
isOpen: import("vue").ComputedRef<boolean>;
|
||||
attrs: import("vue").ComputedRef<{
|
||||
'aria-haspopup'?: boolean;
|
||||
tabindex: number;
|
||||
role: string;
|
||||
type: string;
|
||||
'aria-pressed': boolean;
|
||||
'aria-expanded': boolean;
|
||||
}>;
|
||||
listeners: {
|
||||
onClick: IO<void>;
|
||||
onKeydown: (e: KeyboardEvent) => void;
|
||||
};
|
||||
props: import("vue").ComputedRef<{
|
||||
onClick: IO<void>;
|
||||
onKeydown: (e: KeyboardEvent) => void;
|
||||
'aria-haspopup'?: boolean;
|
||||
tabindex: number;
|
||||
role: string;
|
||||
type: string;
|
||||
'aria-pressed': boolean;
|
||||
'aria-expanded': boolean;
|
||||
}>;
|
||||
open: (e?: Event | undefined) => void;
|
||||
close: (e?: Event | undefined) => void;
|
||||
toggle: (e?: Event | undefined) => void;
|
||||
};
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
|
||||
hasPopup: boolean;
|
||||
transition: import("../..").Transition;
|
||||
isActive: boolean;
|
||||
} & {
|
||||
onToggle?: import("fp-ts/lib/function").FunctionN<[boolean], void> | undefined;
|
||||
onSetOn?: IO<void> | undefined;
|
||||
onSetOff?: IO<void> | undefined;
|
||||
}>, {
|
||||
hasPopup: boolean;
|
||||
transition: import("../..").Transition;
|
||||
isActive: boolean;
|
||||
}>;
|
||||
export default _default;
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
import 'bulma/sass/components/modal.sass';
|
||||
import "../../../src/components/dialog/dialog.sass";
|
||||
import { head } from 'fp-ts/lib/Array';
|
||||
import { pipe } from 'fp-ts/lib/function';
|
||||
import { exists } from 'fp-ts/lib/Option';
|
||||
import { usePopupController, UsePopupControllerPropsDefinition } from '../../composables/popupController';
|
||||
import { constEmptyArray, isObject } from '../../utils/helpers';
|
||||
import BOverlay from '../overlay/BOverlay';
|
||||
import BDialogContent, { B_DIALOG_CONTENT_NAME } from './BDialogContent';
|
||||
import { defineComponent, shallowRef, h } from 'vue';
|
||||
|
||||
function containsBDialogContent(node) {
|
||||
const components = isObject(node) && node?.type?.components || {}; // eslint-disable-line
|
||||
|
||||
for (const k in components) {
|
||||
if (components[k]?.name === B_DIALOG_CONTENT_NAME) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'b-dialog',
|
||||
props: UsePopupControllerPropsDefinition,
|
||||
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const generateDialog = shallowRef(constEmptyArray);
|
||||
const popup = usePopupController(props, generateDialog);
|
||||
|
||||
generateDialog.value = () => {
|
||||
return [h(BOverlay, { ...attrs,
|
||||
class: 'dialog',
|
||||
isActive: true,
|
||||
onClick: popup.close
|
||||
}, () => {
|
||||
const nodes = slots.default ? slots.default(popup) : [];
|
||||
const isDialogContent = pipe(head(nodes), exists(containsBDialogContent));
|
||||
return isDialogContent ? nodes : h(BDialogContent, {
|
||||
asCard: false
|
||||
}, {
|
||||
header: slots.header ? () => slots.header && slots.header(popup) : undefined,
|
||||
default: () => nodes,
|
||||
footer: () => slots.footer && slots.footer(popup)
|
||||
});
|
||||
})];
|
||||
};
|
||||
|
||||
return {
|
||||
popup
|
||||
};
|
||||
},
|
||||
|
||||
render() {
|
||||
return this.$slots.trigger && this.$slots.trigger(this.popup);
|
||||
}
|
||||
|
||||
});
|
||||
//# sourceMappingURL=BDialog.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/dialog/BDialog.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAP;AACA,OAAO,4CAAP;AACA,SAAS,IAAT,QAAqB,iBAArB;AACA,SAAS,IAAT,QAAqB,oBAArB;AAEA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,kBAAT,EAA6B,iCAA7B,QAAsE,mCAAtE;AACA,SAAS,eAAT,EAA0B,QAA1B,QAA0C,qBAA1C;AACA,OAAO,QAAP,MAAqB,qBAArB;AACA,OAAO,cAAP,IAAyB,qBAAzB,QAAsD,kBAAtD;AACA,SAAS,eAAT,EAAiC,UAAjC,EAA6C,CAA7C,QAAsD,KAAtD;;AAEA,SAAS,sBAAT,CAAgC,IAAhC,EAAyC;AACvC,QAAM,UAAU,GAAI,QAAQ,CAAC,IAAD,CAAR,IAAmB,IAAY,EAAE,IAAd,EAAoB,UAAxC,IAAuD,EAA1E,CADuC,CACuC;;AAC9E,OAAK,MAAM,CAAX,IAAgB,UAAhB,EAA4B;AAC1B,QAAI,UAAU,CAAC,CAAD,CAAV,EAAe,IAAf,KAAwB,qBAA5B,EAAmD;AACjD,aAAO,IAAP;AACD;AACF;;AACD,SAAO,KAAP;AACD;;AAED,eAAe,eAAe,CAAC;AAC7B,EAAA,IAAI,EAAE,UADuB;AAE7B,EAAA,KAAK,EAAE,iCAFsB;;AAG7B,EAAA,KAAK,CAAC,KAAD,EAAQ;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,GAAR,EAAwB;AAC3B,UAAM,cAAc,GAAG,UAAU,CAAC,eAAD,CAAjC;AACA,UAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,cAAR,CAAhC;;AACA,IAAA,cAAc,CAAC,KAAf,GAAuB,MAAK;AAC1B,aAAO,CACL,CAAC,CACC,QADD,EAEC,EACE,GAAG,KADL;AAEE,QAAA,KAAK,EAAE,QAFT;AAGE,QAAA,QAAQ,EAAE,IAHZ;AAIE,QAAA,OAAO,EAAE,KAAK,CAAC;AAJjB,OAFD,EAQC,MAAK;AACH,cAAM,KAAK,GAAG,KAAK,CAAC,OAAN,GAAgB,KAAK,CAAC,OAAN,CAAc,KAAd,CAAhB,GAAuC,EAArD;AACA,cAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,KAAD,CAAL,EAAc,MAAM,CAAC,sBAAD,CAApB,CAA5B;AACA,eAAO,eAAe,GAClB,KADkB,GAElB,CAAC,CACC,cADD,EAEC;AACE,UAAA,MAAM,EAAE;AADV,SAFD,EAKC;AACE,UAAA,MAAM,EAAE,KAAK,CAAC,MAAN,GAAe,MAAM,KAAK,CAAC,MAAN,IAAgB,KAAK,CAAC,MAAN,CAAa,KAAb,CAArC,GAA2D,SADrE;AAEE,UAAA,OAAO,EAAE,MAAM,KAFjB;AAGE,UAAA,MAAM,EAAE,MAAM,KAAK,CAAC,MAAN,IAAgB,KAAK,CAAC,MAAN,CAAa,KAAb;AAHhC,SALD,CAFL;AAaD,OAxBF,CADI,CAAP;AA4BD,KA7BD;;AA8BA,WAAO;AAAE,MAAA;AAAF,KAAP;AACD,GArC4B;;AAsC7B,EAAA,MAAM,GAAA;AACJ,WAAO,KAAK,MAAL,CAAY,OAAZ,IAAuB,KAAK,MAAL,CAAY,OAAZ,CAAoB,KAAK,KAAzB,CAA9B;AACD;;AAxC4B,CAAD,CAA9B","sourcesContent":["import 'bulma/sass/components/modal.sass';\nimport './dialog.sass';\nimport { head } from 'fp-ts/lib/Array';\nimport { pipe } from 'fp-ts/lib/function';\nimport { IO } from 'fp-ts/lib/IO';\nimport { exists } from 'fp-ts/lib/Option';\nimport { usePopupController, UsePopupControllerPropsDefinition } from '../../composables/popupController';\nimport { constEmptyArray, isObject } from '../../utils/helpers';\nimport BOverlay from '../overlay/BOverlay';\nimport BDialogContent, { B_DIALOG_CONTENT_NAME } from './BDialogContent';\nimport { defineComponent, VNode, shallowRef, h } from 'vue';\n\nfunction containsBDialogContent(node: any) { //eslint-disable-line\n const components = (isObject(node) && (node as any)?.type?.components) || {}; // eslint-disable-line\n for (const k in components) {\n if (components[k]?.name === B_DIALOG_CONTENT_NAME) {\n return true;\n }\n }\n return false;\n}\n\nexport default defineComponent({\n name: 'b-dialog',\n props: UsePopupControllerPropsDefinition,\n setup(props, { attrs, slots }) {\n const generateDialog = shallowRef(constEmptyArray as IO<VNode[]>);\n const popup = usePopupController(props, generateDialog);\n generateDialog.value = () => {\n return [\n h(\n BOverlay,\n {\n ...attrs,\n class: 'dialog',\n isActive: true,\n onClick: popup.close\n },\n () => {\n const nodes = slots.default ? slots.default(popup) : [];\n const isDialogContent = pipe(head(nodes), exists(containsBDialogContent));\n return isDialogContent\n ? nodes\n : h(\n BDialogContent,\n {\n asCard: false\n },\n {\n header: slots.header ? () => slots.header && slots.header(popup) : undefined,\n default: () => nodes,\n footer: () => slots.footer && slots.footer(popup)\n }\n );\n }\n )\n ];\n };\n return { popup };\n },\n render() {\n return this.$slots.trigger && this.$slots.trigger(this.popup);\n }\n});\n"],"sourceRoot":"","file":"BDialog.js"}
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
import 'bulma/sass/components/modal.sass';
|
||||
import './dialog.sass';
|
||||
import { SizeVariant } from '../../types/SizeVariants';
|
||||
import { PropType, VNode } from 'vue';
|
||||
export declare const B_DIALOG_CONTENT_NAME = "b-dialog-content";
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
size: {
|
||||
type: PropType<SizeVariant>;
|
||||
required: false;
|
||||
};
|
||||
cardClass: {
|
||||
type: PropType<string>;
|
||||
required: false;
|
||||
};
|
||||
asCard: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
themeMap: {
|
||||
type: PropType<import("../..").ThemeColorMap>;
|
||||
required: boolean;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../..").ThemeColorMap>;
|
||||
};
|
||||
isThemeable: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../..").ThemeColorMap;
|
||||
asCard: boolean;
|
||||
} & {
|
||||
size?: "" | "is-small" | "is-medium" | "is-large" | undefined;
|
||||
cardClass?: string | undefined;
|
||||
}>, {
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../..").ThemeColorMap;
|
||||
asCard: boolean;
|
||||
}>;
|
||||
export default _default;
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
import 'bulma/sass/components/modal.sass';
|
||||
import "../../../src/components/dialog/dialog.sass";
|
||||
import { useThemePropsDefinition, useTheme } from '../../composables/theme';
|
||||
import { defineComponent, h } from 'vue';
|
||||
import { DialogTheme } from './theme';
|
||||
export const B_DIALOG_CONTENT_NAME = 'b-dialog-content';
|
||||
export default defineComponent({
|
||||
name: B_DIALOG_CONTENT_NAME,
|
||||
props: { ...useThemePropsDefinition(DialogTheme, true),
|
||||
size: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
cardClass: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
asCard: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
themeClasses
|
||||
} = useTheme(props);
|
||||
return () => {
|
||||
const nodes = [];
|
||||
|
||||
if (slots.header) {
|
||||
nodes.push(h('header', {
|
||||
class: 'modal-card-head'
|
||||
}, slots.header()));
|
||||
}
|
||||
|
||||
nodes.push(h('section', {
|
||||
class: ['modal-card-body', {
|
||||
'is-titleless': !slots.header
|
||||
}]
|
||||
}, slots.default && slots.default()));
|
||||
|
||||
if (slots.footer) {
|
||||
nodes.push(h('footer', {
|
||||
class: 'modal-card-foot'
|
||||
}, slots.footer()));
|
||||
}
|
||||
|
||||
return h('div', {
|
||||
class: [props.size, 'b-dialog']
|
||||
}, [h('article', {
|
||||
class: ['modal-card', {
|
||||
card: props.asCard
|
||||
}, ...themeClasses.value, props.cardClass]
|
||||
}, nodes)]);
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
//# sourceMappingURL=BDialogContent.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/dialog/BDialogContent.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAP;AACA,OAAO,4CAAP;AACA,SAAS,uBAAT,EAAkC,QAAlC,QAAkD,yBAAlD;AAEA,SAA0B,eAA1B,EAA2C,CAA3C,QAAoD,KAApD;AACA,SAAS,WAAT,QAA4B,SAA5B;AAEA,OAAO,MAAM,qBAAqB,GAAG,kBAA9B;AAEP,eAAe,eAAe,CAAC;AAC7B,EAAA,IAAI,EAAE,qBADuB;AAE7B,EAAA,KAAK,EAAE,EACL,GAAG,uBAAuB,CAAC,WAAD,EAAc,IAAd,CADrB;AAEL,IAAA,IAAI,EAAE;AACJ,MAAA,IAAI,EAAE,MADF;AAEJ,MAAA,QAAQ,EAAE;AAFN,KAFD;AAML,IAAA,SAAS,EAAE;AACT,MAAA,IAAI,EAAE,MADG;AAET,MAAA,QAAQ,EAAE;AAFD,KANN;AAUL,IAAA,MAAM,EAAE;AACN,MAAA,IAAI,EAAE,OADA;AAEN,MAAA,OAAO,EAAE;AAFH;AAVH,GAFsB;;AAiB7B,EAAA,KAAK,CAAC,KAAD,EAAQ;AAAE,IAAA;AAAF,GAAR,EAAiB;AACpB,UAAM;AAAE,MAAA;AAAF,QAAmB,QAAQ,CAAC,KAAD,CAAjC;AACA,WAAO,MAAK;AACV,YAAM,KAAK,GAAY,EAAvB;;AACA,UAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,QAAA,KAAK,CAAC,IAAN,CAAW,CAAC,CAAC,QAAD,EAAW;AAAE,UAAA,KAAK,EAAE;AAAT,SAAX,EAAyC,KAAK,CAAC,MAAN,EAAzC,CAAZ;AACD;;AACD,MAAA,KAAK,CAAC,IAAN,CACE,CAAC,CACC,SADD,EAEC;AAAE,QAAA,KAAK,EAAE,CAAC,iBAAD,EAAoB;AAAE,0BAAgB,CAAC,KAAK,CAAC;AAAzB,SAApB;AAAT,OAFD,EAGC,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,OAAN,EAHlB,CADH;;AAOA,UAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,QAAA,KAAK,CAAC,IAAN,CAAW,CAAC,CAAC,QAAD,EAAW;AAAE,UAAA,KAAK,EAAE;AAAT,SAAX,EAAyC,KAAK,CAAC,MAAN,EAAzC,CAAZ;AACD;;AACD,aAAO,CAAC,CAAC,KAAD,EAAQ;AAAE,QAAA,KAAK,EAAE,CAAC,KAAK,CAAC,IAAP,EAAa,UAAb;AAAT,OAAR,EAA6C,CACnD,CAAC,CACC,SADD,EAEC;AACE,QAAA,KAAK,EAAE,CAAC,YAAD,EAAe;AAAE,UAAA,IAAI,EAAE,KAAK,CAAC;AAAd,SAAf,EAAuC,GAAG,YAAY,CAAC,KAAvD,EAA8D,KAAK,CAAC,SAApE;AADT,OAFD,EAKC,KALD,CADkD,CAA7C,CAAR;AASD,KAxBD;AAyBD;;AA5C4B,CAAD,CAA9B","sourcesContent":["import 'bulma/sass/components/modal.sass';\nimport './dialog.sass';\nimport { useThemePropsDefinition, useTheme } from '../../composables/theme';\nimport { SizeVariant } from '../../types/SizeVariants';\nimport { PropType, VNode, defineComponent, h } from 'vue';\nimport { DialogTheme } from './theme';\n\nexport const B_DIALOG_CONTENT_NAME = 'b-dialog-content';\n\nexport default defineComponent({\n name: B_DIALOG_CONTENT_NAME,\n props: {\n ...useThemePropsDefinition(DialogTheme, true),\n size: {\n type: String as PropType<SizeVariant>,\n required: false\n },\n cardClass: {\n type: String as PropType<string>,\n required: false\n },\n asCard: {\n type: Boolean as PropType<boolean>,\n default: true\n }\n },\n setup(props, { slots }) {\n const { themeClasses } = useTheme(props);\n return () => {\n const nodes: VNode[] = [];\n if (slots.header) {\n nodes.push(h('header', { class: 'modal-card-head' }, slots.header()));\n }\n nodes.push(\n h(\n 'section',\n { class: ['modal-card-body', { 'is-titleless': !slots.header }] },\n slots.default && slots.default()\n )\n );\n if (slots.footer) {\n nodes.push(h('footer', { class: 'modal-card-foot' }, slots.footer()));\n }\n return h('div', { class: [props.size, 'b-dialog'] }, [\n h(\n 'article',\n {\n class: ['modal-card', { card: props.asCard }, ...themeClasses.value, props.cardClass]\n },\n nodes\n )\n ]);\n };\n }\n});\n"],"sourceRoot":"","file":"BDialogContent.js"}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
import 'bulma/sass/components/modal.sass';
|
||||
import './dialog.sass';
|
||||
import { SetupContext } from 'vue';
|
||||
export default function BDialogOverlay(_: any, { attrs, slots }: SetupContext): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>;
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
import 'bulma/sass/components/modal.sass';
|
||||
import "../../../src/components/dialog/dialog.sass";
|
||||
import BOverlay from '../overlay/BOverlay';
|
||||
import { h } from 'vue';
|
||||
export default function BDialogOverlay(_, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
return h(BOverlay, { ...attrs,
|
||||
class: 'dialog'
|
||||
}, slots.default());
|
||||
}
|
||||
//# sourceMappingURL=BDialogOverlay.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/dialog/BDialogOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAP;AACA,OAAO,4CAAP;AACA,OAAO,QAAP,MAAqB,qBAArB;AACA,SAAS,CAAT,QAAgC,KAAhC;AAEA,eAAc,SAAU,cAAV,CAAyB,CAAzB,EAAiC;AAAE,EAAA,KAAF;AAAS,EAAA;AAAT,CAAjC,EAA+D;AAC3E,SAAO,CAAC,CAAC,QAAD,EAAW,EAAE,GAAG,KAAL;AAAY,IAAA,KAAK,EAAE;AAAnB,GAAX,EAA0C,KAAK,CAAC,OAAN,EAA1C,CAAR;AACD","sourcesContent":["import 'bulma/sass/components/modal.sass';\nimport './dialog.sass';\nimport BOverlay from '../overlay/BOverlay';\nimport { h, SetupContext } from 'vue';\n\nexport default function BDialogOverlay(_: any, { attrs, slots }: SetupContext) {\n return h(BOverlay, { ...attrs, class: 'dialog' }, slots.default!());\n}\n"],"sourceRoot":"","file":"BDialogOverlay.js"}
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import BDialog from './BDialog';
|
||||
import BDialogContent from './BDialogContent';
|
||||
import { DialogTheme } from './theme';
|
||||
export { BDialog, BDialogContent, DialogTheme };
|
||||
export default BDialog;
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
import BDialog from './BDialog';
|
||||
import BDialogContent from './BDialogContent';
|
||||
import { DialogTheme } from './theme';
|
||||
export { BDialog, BDialogContent, DialogTheme };
|
||||
export default BDialog;
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAP,MAAoB,WAApB;AACA,OAAO,cAAP,MAA2B,kBAA3B;AACA,SAAS,WAAT,QAA4B,SAA5B;AAEA,SAAS,OAAT,EAAkB,cAAlB,EAAkC,WAAlC;AAEA,eAAe,OAAf","sourcesContent":["import BDialog from './BDialog';\nimport BDialogContent from './BDialogContent';\nimport { DialogTheme } from './theme';\n\nexport { BDialog, BDialogContent, DialogTheme };\n\nexport default BDialog;\n"],"sourceRoot":"","file":"index.js"}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import { ThemeColorMap } from '../../types/ThemeColorMap';
|
||||
export declare const DialogTheme: ThemeColorMap;
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
import { shallowReactive } from 'vue';
|
||||
export const DialogTheme = shallowReactive({
|
||||
dark: 'is-grey-dark',
|
||||
light: ''
|
||||
});
|
||||
//# sourceMappingURL=theme.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/dialog/theme.ts"],"names":[],"mappings":"AAAA,SAAS,eAAT,QAAgC,KAAhC;AAGA,OAAO,MAAM,WAAW,GAAkB,eAAe,CAAC;AACxD,EAAA,IAAI,EAAE,cADkD;AAExD,EAAA,KAAK,EAAE;AAFiD,CAAD,CAAlD","sourcesContent":["import { shallowReactive } from 'vue';\nimport { ThemeColorMap } from '../../types/ThemeColorMap';\n\nexport const DialogTheme: ThemeColorMap = shallowReactive({\n dark: 'is-grey-dark',\n light: ''\n});\n"],"sourceRoot":"","file":"theme.js"}
|
||||
+230
@@ -0,0 +1,230 @@
|
||||
import './dropdown.sass';
|
||||
import { Predicate } from 'fp-ts/lib/function';
|
||||
import { IO } from 'fp-ts/lib/IO';
|
||||
import { TransitionClasses } from '../../types/Transition';
|
||||
import { ExtractPropTypes, PropType, Ref } from 'vue';
|
||||
import { Classes } from '../../utils/mergeClasses';
|
||||
export declare type DropdownPosition = 'is-top-right' | 'is-top-left' | 'is-bottom-left';
|
||||
export declare const BDropdownPropsDefinition: {
|
||||
id: PropType<string>;
|
||||
isDisabled: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isHoverable: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isInline: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
position: {
|
||||
type: PropType<DropdownPosition>;
|
||||
validator: (value: unknown) => boolean;
|
||||
};
|
||||
isMobileModal: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
menuTag: {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
transition: {
|
||||
type: PropType<import("../../types/Transition").Transition>;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../../types/Transition").Transition>;
|
||||
};
|
||||
onToggle: {
|
||||
type: PropType<import("fp-ts/lib/function").FunctionN<[boolean], void>>;
|
||||
required: false;
|
||||
};
|
||||
onSetOn: {
|
||||
type: PropType<IO<void>>;
|
||||
required: false;
|
||||
};
|
||||
onSetOff: {
|
||||
type: PropType<IO<void>>;
|
||||
required: false;
|
||||
};
|
||||
isExpanded: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
hasPopup: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
themeMap: {
|
||||
type: PropType<import("../..").ThemeColorMap>;
|
||||
required: boolean;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../..").ThemeColorMap>;
|
||||
};
|
||||
isThemeable: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
};
|
||||
export declare type BDropdownProps = ExtractPropTypes<typeof BDropdownPropsDefinition>;
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
id: PropType<string>;
|
||||
isDisabled: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isHoverable: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isInline: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
position: {
|
||||
type: PropType<DropdownPosition>;
|
||||
validator: (value: unknown) => boolean;
|
||||
};
|
||||
isMobileModal: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
menuTag: {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
transition: {
|
||||
type: PropType<import("../../types/Transition").Transition>;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../../types/Transition").Transition>;
|
||||
};
|
||||
onToggle: {
|
||||
type: PropType<import("fp-ts/lib/function").FunctionN<[boolean], void>>;
|
||||
required: false;
|
||||
};
|
||||
onSetOn: {
|
||||
type: PropType<IO<void>>;
|
||||
required: false;
|
||||
};
|
||||
onSetOff: {
|
||||
type: PropType<IO<void>>;
|
||||
required: false;
|
||||
};
|
||||
isExpanded: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
hasPopup: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
themeMap: {
|
||||
type: PropType<import("../..").ThemeColorMap>;
|
||||
required: boolean;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../..").ThemeColorMap>;
|
||||
};
|
||||
isThemeable: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
}, {
|
||||
root: Ref<HTMLElement>;
|
||||
rootClasses: Ref<Classes[]>;
|
||||
clickOutsideArgs: {
|
||||
include: () => HTMLElement[];
|
||||
closeConditional: Predicate<Event>;
|
||||
};
|
||||
toggle: {
|
||||
isOn: import("vue").WritableComputedRef<boolean>;
|
||||
isOff: import("vue").ComputedRef<boolean>;
|
||||
attrs: import("vue").ComputedRef<{
|
||||
'aria-haspopup'?: boolean;
|
||||
tabindex: number;
|
||||
role: string;
|
||||
type: string;
|
||||
'aria-pressed': boolean;
|
||||
'aria-expanded': boolean;
|
||||
}>;
|
||||
listeners: {
|
||||
onClick: IO<void>;
|
||||
onKeydown: (e: KeyboardEvent) => void;
|
||||
};
|
||||
props: import("vue").ComputedRef<{
|
||||
onClick: IO<void>;
|
||||
onKeydown: (e: KeyboardEvent) => void;
|
||||
'aria-haspopup'?: boolean;
|
||||
tabindex: number;
|
||||
role: string;
|
||||
type: string;
|
||||
'aria-pressed': boolean;
|
||||
'aria-expanded': boolean;
|
||||
}>;
|
||||
setOn: (e?: Event | undefined) => void;
|
||||
setOff: (e?: Event | undefined) => void;
|
||||
toggle: (e?: Event | undefined) => void;
|
||||
};
|
||||
transition: import("vue").ComputedRef<TransitionClasses>;
|
||||
themeClasses: import("vue").ComputedRef<string[]>;
|
||||
dropdownMenu: Ref<HTMLElement>;
|
||||
displayMobileBackground: import("vue").ComputedRef<boolean>;
|
||||
menuToggle: {
|
||||
isOn: import("vue").ComputedRef<boolean>;
|
||||
isOff: import("vue").ComputedRef<boolean>;
|
||||
attrs: import("vue").ComputedRef<{
|
||||
'aria-haspopup'?: boolean;
|
||||
tabindex: number;
|
||||
role: string;
|
||||
type: string;
|
||||
'aria-pressed': boolean;
|
||||
'aria-expanded': boolean;
|
||||
}>;
|
||||
listeners: {
|
||||
onClick: IO<void>;
|
||||
onKeydown: (e: KeyboardEvent) => void;
|
||||
};
|
||||
props: import("vue").ComputedRef<{
|
||||
onClick: IO<void>;
|
||||
onKeydown: (e: KeyboardEvent) => void;
|
||||
'aria-haspopup'?: boolean;
|
||||
tabindex: number;
|
||||
role: string;
|
||||
type: string;
|
||||
'aria-pressed': boolean;
|
||||
'aria-expanded': boolean;
|
||||
}>;
|
||||
setOn: (e?: Event | undefined) => void;
|
||||
setOff: (e?: Event | undefined) => void;
|
||||
toggle: (e?: Event | undefined) => void;
|
||||
};
|
||||
trigger: Ref<HTMLElement>;
|
||||
computedId: import("vue").ComputedRef<string>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../..").ThemeColorMap;
|
||||
hasPopup: boolean;
|
||||
transition: import("../../types/Transition").Transition;
|
||||
isExpanded: boolean;
|
||||
isDisabled: boolean;
|
||||
isHoverable: boolean;
|
||||
isInline: boolean;
|
||||
isMobileModal: boolean;
|
||||
menuTag: string;
|
||||
} & {
|
||||
onToggle?: import("fp-ts/lib/function").FunctionN<[boolean], void> | undefined;
|
||||
onSetOn?: IO<void> | undefined;
|
||||
onSetOff?: IO<void> | undefined;
|
||||
position?: "is-top-right" | "is-top-left" | "is-bottom-left" | undefined;
|
||||
id?: string | undefined;
|
||||
}>, {
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../..").ThemeColorMap;
|
||||
hasPopup: boolean;
|
||||
transition: import("../../types/Transition").Transition;
|
||||
isExpanded: boolean;
|
||||
isDisabled: boolean;
|
||||
isHoverable: boolean;
|
||||
isInline: boolean;
|
||||
isMobileModal: boolean;
|
||||
menuTag: string;
|
||||
}>;
|
||||
export default _default;
|
||||
+188
@@ -0,0 +1,188 @@
|
||||
import "../../../src/components/dropdown/dropdown.sass";
|
||||
import { useThemePropsDefinition, useTheme } from '../../composables/theme';
|
||||
import { getUseTogglePropsDefinition, useToggle } from '../../composables/toggle';
|
||||
import { FadeTransitionPropsDefinition, useTransition } from '../../composables/transition';
|
||||
import { useWindowSize } from '../../composables/windowSize';
|
||||
import { defineComponent, shallowRef, computed, h, withDirectives, vShow, Transition } from 'vue';
|
||||
import ClickOutside from '../../directives/clickOutside';
|
||||
import { isString } from '../../utils/helpers';
|
||||
import { DropdownThemeMap } from './theme';
|
||||
export const BDropdownPropsDefinition = { ...useThemePropsDefinition(DropdownThemeMap),
|
||||
...getUseTogglePropsDefinition('isExpanded'),
|
||||
...FadeTransitionPropsDefinition,
|
||||
id: String,
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isHoverable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isInline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
validator: value => {
|
||||
return isString(value) && ['is-top-right', 'is-top-left', 'is-bottom-left'].includes(value);
|
||||
}
|
||||
},
|
||||
isMobileModal: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
menuTag: {
|
||||
type: String,
|
||||
default: 'ul'
|
||||
}
|
||||
};
|
||||
let id = 0;
|
||||
|
||||
function generateTrigger(toggle, id, slots) {
|
||||
return h('div', {
|
||||
ref: 'trigger',
|
||||
class: 'dropdown-trigger',
|
||||
role: 'button',
|
||||
'aria-owns': id,
|
||||
'aria-haspopup': 'listbox',
|
||||
'aria-expanded': `${toggle.isOn.value}`,
|
||||
onClick: toggle.toggle
|
||||
}, slots.trigger && slots.trigger(toggle));
|
||||
}
|
||||
|
||||
function generateTransition(transition, children) {
|
||||
return h(Transition, transition, children);
|
||||
}
|
||||
|
||||
function useCloseConditional(toggle, isInWhiteList) {
|
||||
return e => {
|
||||
const target = e.target;
|
||||
return toggle.isOn.value && isInWhiteList(target);
|
||||
};
|
||||
}
|
||||
|
||||
function generateDropdownContent(menuTag, toggle, computedId, themeClasses, slots) {
|
||||
return h(menuTag, {
|
||||
class: ['dropdown-content', ...themeClasses],
|
||||
role: 'menu',
|
||||
id: computedId,
|
||||
'aria-hidden': toggle.isOff.value
|
||||
}, slots.default && slots.default(toggle));
|
||||
}
|
||||
|
||||
function generateDropdownMenu(menuTag, toggle, computedId, themeClasses, transition, slots, useTransition = true) {
|
||||
const menu = () => withDirectives(h('div', {
|
||||
class: 'dropdown-menu'
|
||||
}, [generateDropdownContent(menuTag, toggle, computedId, themeClasses, slots)]), [[vShow, toggle.isOn.value]]);
|
||||
|
||||
return useTransition ? generateTransition(transition, menu) : menu();
|
||||
}
|
||||
|
||||
function generateMobileBackground(menuTag, toggle, computedId, themeClasses, transition, slots) {
|
||||
return generateTransition(transition, () => withDirectives(h('div', {
|
||||
class: 'background',
|
||||
'aria-hidden': toggle.isOff.value,
|
||||
onClick: toggle.setOff
|
||||
}, [generateDropdownMenu(menuTag, toggle, computedId, themeClasses, transition, slots, false)]), [[vShow, toggle.isOn.value]]));
|
||||
}
|
||||
|
||||
function generateChildren(menuTag, isInline, toggle, computedId, transition, themeClasses, shouldDisplayMobileBackground, slots) {
|
||||
const children = [];
|
||||
|
||||
if (!isInline) {
|
||||
children.push(generateTrigger(toggle, computedId, slots));
|
||||
}
|
||||
|
||||
if (shouldDisplayMobileBackground) {
|
||||
children.push(generateMobileBackground(menuTag, toggle, computedId, themeClasses, transition, slots));
|
||||
} else {
|
||||
const menu = generateDropdownMenu(menuTag, toggle, computedId, themeClasses, transition, slots);
|
||||
|
||||
if (menu) {
|
||||
children.push(menu);
|
||||
}
|
||||
}
|
||||
|
||||
return children;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'b-dropdown',
|
||||
props: BDropdownPropsDefinition,
|
||||
|
||||
setup(props) {
|
||||
const windowSize = useWindowSize();
|
||||
const toggle = useToggle(props, 'isExpanded');
|
||||
const {
|
||||
themeClasses
|
||||
} = useTheme(props);
|
||||
const transition = useTransition(props);
|
||||
const root = shallowRef(null);
|
||||
const trigger = shallowRef(null);
|
||||
const dropdownMenu = shallowRef(null);
|
||||
const computedId = computed(() => `dropdown-menu-${props.id ?? id++}`);
|
||||
const rootClasses = computed(() => [props.position, {
|
||||
'is-disabled': props.isDisabled,
|
||||
'is-hoverable': props.isHoverable,
|
||||
'is-inline': props.isInline,
|
||||
'is-active': toggle.isOn.value || props.isInline,
|
||||
'is-mobile-modal': props.isMobileModal
|
||||
}]);
|
||||
const displayMenu = computed(() => !props.isDisabled && (toggle.isOn.value || props.isHoverable) || props.isInline);
|
||||
const isMobileModal = computed(() => props.isMobileModal && !props.isInline && !props.isHoverable);
|
||||
const displayMobileBackground = computed(() => isMobileModal.value && windowSize.value.isTouch);
|
||||
|
||||
function getDependentElements() {
|
||||
return Array.from(dropdownMenu.value?.querySelectorAll('*') ?? []);
|
||||
}
|
||||
|
||||
function isInDropdown(el) {
|
||||
return dropdownMenu.value !== undefined && dropdownMenu.value.contains(el);
|
||||
}
|
||||
|
||||
function isInTrigger(el) {
|
||||
return trigger.value !== undefined && trigger.value.contains(el);
|
||||
}
|
||||
|
||||
function isInWhiteList(el) {
|
||||
if (el === root.value) return true;
|
||||
if (el === dropdownMenu.value) return true;
|
||||
if (el === trigger.value) return true;
|
||||
return isInDropdown(el) || isInTrigger(el);
|
||||
}
|
||||
|
||||
const menuToggle = { ...toggle,
|
||||
isOn: displayMenu,
|
||||
isOff: computed(() => !displayMenu.value)
|
||||
};
|
||||
const closeConditional = useCloseConditional(menuToggle, isInWhiteList);
|
||||
const clickOutsideArgs = {
|
||||
include: getDependentElements,
|
||||
closeConditional
|
||||
};
|
||||
return {
|
||||
root,
|
||||
rootClasses,
|
||||
clickOutsideArgs,
|
||||
toggle,
|
||||
transition,
|
||||
themeClasses,
|
||||
dropdownMenu,
|
||||
displayMobileBackground,
|
||||
menuToggle,
|
||||
trigger,
|
||||
computedId
|
||||
};
|
||||
},
|
||||
|
||||
render() {
|
||||
return withDirectives(h('div', {
|
||||
ref: 'root',
|
||||
class: ['dropdown', ...this.rootClasses]
|
||||
}, generateChildren(this.menuTag, this.isInline, this.menuToggle, this.computedId, this.transition, this.themeClasses, this.displayMobileBackground, this.$slots)), [[ClickOutside, this.toggle.setOff, this.clickOutsideArgs]]);
|
||||
}
|
||||
|
||||
});
|
||||
//# sourceMappingURL=BDropdown.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+4
@@ -0,0 +1,4 @@
|
||||
declare const _default: import("vue").FunctionalComponent<{
|
||||
tag?: string | undefined;
|
||||
}, {}>;
|
||||
export default _default;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import { getSimpleFunctionalComponent } from '../../utils/getSimpleFunctionalComponent';
|
||||
export default getSimpleFunctionalComponent('dropdown-divider', 'hr');
|
||||
//# sourceMappingURL=BDropdownDivider.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/dropdown/BDropdownDivider.ts"],"names":[],"mappings":"AAAA,SAAS,4BAAT,QAA6C,0CAA7C;AAEA,eAAe,4BAA4B,CAAC,kBAAD,EAAqB,IAArB,CAA3C","sourcesContent":["import { getSimpleFunctionalComponent } from '../../utils/getSimpleFunctionalComponent';\n\nexport default getSimpleFunctionalComponent('dropdown-divider', 'hr');\n"],"sourceRoot":"","file":"BDropdownDivider.js"}
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
import { PropType } from 'vue';
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
isActive: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
tag: {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
themeMap: {
|
||||
type: PropType<import("../..").ThemeColorMap>;
|
||||
required: boolean;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../..").ThemeColorMap>;
|
||||
};
|
||||
isThemeable: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../..").ThemeColorMap;
|
||||
tag: string;
|
||||
isActive: boolean;
|
||||
} & {}>, {
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../..").ThemeColorMap;
|
||||
tag: string;
|
||||
isActive: boolean;
|
||||
}>;
|
||||
export default _default;
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
import { useTheme, useThemePropsDefinition } from '../../composables/theme';
|
||||
import { h, defineComponent } from 'vue';
|
||||
import { DropdownThemeMap } from './theme';
|
||||
export default defineComponent({
|
||||
name: 'b-dropdown-item',
|
||||
props: { ...useThemePropsDefinition(DropdownThemeMap, true),
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'li'
|
||||
}
|
||||
},
|
||||
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
themeClasses
|
||||
} = useTheme(props);
|
||||
return () => {
|
||||
return h(props.tag ?? 'li', {
|
||||
role: 'menuitem',
|
||||
tabindex: 0,
|
||||
class: ['dropdown-item', ...themeClasses.value, {
|
||||
'is-active': props.isActive
|
||||
}]
|
||||
}, slots.default && slots.default());
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
//# sourceMappingURL=BDropdownItem.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/dropdown/BDropdownItem.ts"],"names":[],"mappings":"AAAA,SAAS,QAAT,EAAmB,uBAAnB,QAAkD,yBAAlD;AACA,SAAS,CAAT,EAAY,eAAZ,QAA6C,KAA7C;AACA,SAAS,gBAAT,QAAiC,SAAjC;AAEA,eAAe,eAAe,CAAC;AAC7B,EAAA,IAAI,EAAE,iBADuB;AAE7B,EAAA,KAAK,EAAE,EACL,GAAG,uBAAuB,CAAC,gBAAD,EAAmB,IAAnB,CADrB;AAEL,IAAA,QAAQ,EAAE;AACR,MAAA,IAAI,EAAE,OADE;AAER,MAAA,OAAO,EAAE;AAFD,KAFL;AAML,IAAA,GAAG,EAAE;AACH,MAAA,IAAI,EAAE,MADH;AAEH,MAAA,OAAO,EAAE;AAFN;AANA,GAFsB;;AAa7B,EAAA,KAAK,CAAC,KAAD,EAAQ;AAAE,IAAA;AAAF,GAAR,EAAiB;AACpB,UAAM;AAAE,MAAA;AAAF,QAAmB,QAAQ,CAAC,KAAD,CAAjC;AACA,WAAO,MAAK;AACV,aAAO,CAAC,CACN,KAAK,CAAC,GAAN,IAAa,IADP,EAEN;AACE,QAAA,IAAI,EAAE,UADR;AAEE,QAAA,QAAQ,EAAE,CAFZ;AAGE,QAAA,KAAK,EAAE,CAAC,eAAD,EAAkB,GAAG,YAAY,CAAC,KAAlC,EAAyC;AAAE,uBAAa,KAAK,CAAC;AAArB,SAAzC;AAHT,OAFM,EAON,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,OAAN,EAPX,CAAR;AASD,KAVD;AAWD;;AA1B4B,CAAD,CAA9B","sourcesContent":["import { useTheme, useThemePropsDefinition } from '../../composables/theme';\nimport { h, defineComponent, PropType } from 'vue';\nimport { DropdownThemeMap } from './theme';\n\nexport default defineComponent({\n name: 'b-dropdown-item',\n props: {\n ...useThemePropsDefinition(DropdownThemeMap, true),\n isActive: {\n type: Boolean as PropType<boolean>,\n default: false\n },\n tag: {\n type: String as PropType<string>,\n default: 'li'\n }\n },\n setup(props, { slots }) {\n const { themeClasses } = useTheme(props);\n return () => {\n return h(\n props.tag ?? 'li',\n {\n role: 'menuitem',\n tabindex: 0,\n class: ['dropdown-item', ...themeClasses.value, { 'is-active': props.isActive }]\n },\n slots.default && slots.default()\n );\n };\n }\n});\n"],"sourceRoot":"","file":"BDropdownItem.js"}
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
import { PropType } from 'vue';
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
isActive: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
href: {
|
||||
type: PropType<string>;
|
||||
required: true;
|
||||
};
|
||||
tag: {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
themeMap: {
|
||||
type: PropType<import("../..").ThemeColorMap>;
|
||||
required: boolean;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../..").ThemeColorMap>;
|
||||
};
|
||||
isThemeable: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../..").ThemeColorMap;
|
||||
tag: string;
|
||||
isActive: boolean;
|
||||
href: string;
|
||||
} & {}>, {
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../..").ThemeColorMap;
|
||||
tag: string;
|
||||
isActive: boolean;
|
||||
}>;
|
||||
export default _default;
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
import { useTheme, useThemePropsDefinition } from '../../composables/theme';
|
||||
import { h, defineComponent } from 'vue';
|
||||
import { DropdownThemeMap } from './theme';
|
||||
export default defineComponent({
|
||||
name: 'b-dropdown-link-item',
|
||||
props: { ...useThemePropsDefinition(DropdownThemeMap, true),
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
href: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'li'
|
||||
}
|
||||
},
|
||||
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
themeClasses
|
||||
} = useTheme(props);
|
||||
return () => {
|
||||
return h(props.tag ?? 'li', {
|
||||
role: 'menuitem'
|
||||
}, [h('a', { ...attrs,
|
||||
class: ['dropdown-item dropdown-link', ...themeClasses.value, {
|
||||
'is-active': props.isActive
|
||||
}]
|
||||
}, slots.default && slots.default())]);
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
//# sourceMappingURL=BDropdownLink.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/dropdown/BDropdownLink.ts"],"names":[],"mappings":"AAAA,SAAS,QAAT,EAAmB,uBAAnB,QAAkD,yBAAlD;AACA,SAAS,CAAT,EAAY,eAAZ,QAA6C,KAA7C;AACA,SAAS,gBAAT,QAAiC,SAAjC;AAEA,eAAe,eAAe,CAAC;AAC7B,EAAA,IAAI,EAAE,sBADuB;AAE7B,EAAA,KAAK,EAAE,EACL,GAAG,uBAAuB,CAAC,gBAAD,EAAmB,IAAnB,CADrB;AAEL,IAAA,QAAQ,EAAE;AACR,MAAA,IAAI,EAAE,OADE;AAER,MAAA,OAAO,EAAE;AAFD,KAFL;AAML,IAAA,IAAI,EAAE;AACJ,MAAA,IAAI,EAAE,MADF;AAEJ,MAAA,QAAQ,EAAE;AAFN,KAND;AAUL,IAAA,GAAG,EAAE;AACH,MAAA,IAAI,EAAE,MADH;AAEH,MAAA,OAAO,EAAE;AAFN;AAVA,GAFsB;;AAiB7B,EAAA,KAAK,CAAC,KAAD,EAAQ;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,GAAR,EAAwB;AAC3B,UAAM;AAAE,MAAA;AAAF,QAAmB,QAAQ,CAAC,KAAD,CAAjC;AACA,WAAO,MAAK;AACV,aAAO,CAAC,CACN,KAAK,CAAC,GAAN,IAAa,IADP,EAEN;AACE,QAAA,IAAI,EAAE;AADR,OAFM,EAKN,CACE,CAAC,CACC,GADD,EAEC,EACE,GAAG,KADL;AAEE,QAAA,KAAK,EAAE,CAAC,6BAAD,EAAgC,GAAG,YAAY,CAAC,KAAhD,EAAuD;AAAE,uBAAa,KAAK,CAAC;AAArB,SAAvD;AAFT,OAFD,EAMC,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,OAAN,EANlB,CADH,CALM,CAAR;AAgBD,KAjBD;AAkBD;;AArC4B,CAAD,CAA9B","sourcesContent":["import { useTheme, useThemePropsDefinition } from '../../composables/theme';\nimport { h, defineComponent, PropType } from 'vue';\nimport { DropdownThemeMap } from './theme';\n\nexport default defineComponent({\n name: 'b-dropdown-link-item',\n props: {\n ...useThemePropsDefinition(DropdownThemeMap, true),\n isActive: {\n type: Boolean as PropType<boolean>,\n default: false\n },\n href: {\n type: String as PropType<string>,\n required: true\n },\n tag: {\n type: String as PropType<string>,\n default: 'li'\n }\n },\n setup(props, { attrs, slots }) {\n const { themeClasses } = useTheme(props);\n return () => {\n return h(\n props.tag ?? 'li',\n {\n role: 'menuitem'\n },\n [\n h(\n 'a',\n {\n ...attrs,\n class: ['dropdown-item dropdown-link', ...themeClasses.value, { 'is-active': props.isActive }]\n },\n slots.default && slots.default()\n )\n ]\n );\n };\n }\n});\n"],"sourceRoot":"","file":"BDropdownLink.js"}
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
import BDropdown from './BDropdown';
|
||||
import BDropdownDivider from './BDropdownDivider';
|
||||
import BDropdownItem from './BDropdownItem';
|
||||
import BDropdownLink from './BDropdownLink';
|
||||
import { DropdownThemeMap } from './theme';
|
||||
export { BDropdownItem, BDropdownLink, BDropdownDivider, BDropdown, DropdownThemeMap };
|
||||
export default BDropdown;
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
import BDropdown from './BDropdown';
|
||||
import BDropdownDivider from './BDropdownDivider';
|
||||
import BDropdownItem from './BDropdownItem';
|
||||
import BDropdownLink from './BDropdownLink';
|
||||
import { DropdownThemeMap } from './theme';
|
||||
export { BDropdownItem, BDropdownLink, BDropdownDivider, BDropdown, DropdownThemeMap };
|
||||
export default BDropdown;
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAP,MAAsB,aAAtB;AACA,OAAO,gBAAP,MAA6B,oBAA7B;AACA,OAAO,aAAP,MAA0B,iBAA1B;AACA,OAAO,aAAP,MAA0B,iBAA1B;AACA,SAAS,gBAAT,QAAiC,SAAjC;AAEA,SAAS,aAAT,EAAwB,aAAxB,EAAuC,gBAAvC,EAAyD,SAAzD,EAAoE,gBAApE;AAEA,eAAe,SAAf","sourcesContent":["import BDropdown from './BDropdown';\nimport BDropdownDivider from './BDropdownDivider';\nimport BDropdownItem from './BDropdownItem';\nimport BDropdownLink from './BDropdownLink';\nimport { DropdownThemeMap } from './theme';\n\nexport { BDropdownItem, BDropdownLink, BDropdownDivider, BDropdown, DropdownThemeMap };\n\nexport default BDropdown;\n"],"sourceRoot":"","file":"index.js"}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import { ThemeColorMap } from '../../types/ThemeColorMap';
|
||||
export declare const DropdownThemeMap: ThemeColorMap;
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
import { shallowReactive } from 'vue';
|
||||
export const DropdownThemeMap = shallowReactive({
|
||||
dark: 'is-grey-dark',
|
||||
light: ''
|
||||
});
|
||||
//# sourceMappingURL=theme.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../src/components/dropdown/theme.ts"],"names":[],"mappings":"AAAA,SAAS,eAAT,QAAgC,KAAhC;AAGA,OAAO,MAAM,gBAAgB,GAAkB,eAAe,CAAC;AAC7D,EAAA,IAAI,EAAE,cADuD;AAE7D,EAAA,KAAK,EAAE;AAFsD,CAAD,CAAvD","sourcesContent":["import { shallowReactive } from 'vue';\nimport { ThemeColorMap } from '../../types/ThemeColorMap';\n\nexport const DropdownThemeMap: ThemeColorMap = shallowReactive({\n dark: 'is-grey-dark',\n light: ''\n});\n"],"sourceRoot":"","file":"theme.js"}
|
||||
Generated
Vendored
Executable
+230
@@ -0,0 +1,230 @@
|
||||
import '../sass/form.sass';
|
||||
import '../../dropdown/dropdown.sass';
|
||||
import './autocomplete.sass';
|
||||
import { Eq } from 'fp-ts/lib/Eq';
|
||||
import { FunctionN, Predicate } from 'fp-ts/lib/function';
|
||||
import { PropType, VNode } from 'vue';
|
||||
export interface AutocompleteItem<T> {
|
||||
id: string;
|
||||
isSelected: boolean;
|
||||
isHovered: boolean;
|
||||
text: string;
|
||||
value: T;
|
||||
index: number;
|
||||
}
|
||||
export declare const BAutocomplete: import("vue").DefineComponent<{
|
||||
selectedItems: {
|
||||
type: PropType<unknown[]>;
|
||||
required: true;
|
||||
};
|
||||
items: {
|
||||
type: PropType<unknown[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
itemFilter: {
|
||||
type: PropType<FunctionN<[string], Predicate<unknown>>>;
|
||||
required: false;
|
||||
};
|
||||
itemId: {
|
||||
type: PropType<(item: unknown) => any>;
|
||||
default: string;
|
||||
};
|
||||
itemText: {
|
||||
type: PropType<(item: unknown) => any>;
|
||||
default: string;
|
||||
};
|
||||
closeOnSelect: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
clearOnSelect: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
openOnFocus: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
onSelected: {
|
||||
type: PropType<FunctionN<[unknown], void>>;
|
||||
required: false;
|
||||
};
|
||||
"onUpdate:selectedItems": {
|
||||
type: PropType<FunctionN<[unknown[]], void>>;
|
||||
default: import("fp-ts/lib/function").Lazy<FunctionN<[unknown[]], void>>;
|
||||
};
|
||||
modelValue: {
|
||||
type: PropType<string>;
|
||||
required: false;
|
||||
};
|
||||
'onUpdate:modelValue': {
|
||||
type: PropType<FunctionN<[string], void>>;
|
||||
default: import("fp-ts/lib/function").Lazy<FunctionN<[string], void>>;
|
||||
};
|
||||
themeMap: {
|
||||
type: PropType<import("../../..").ThemeColorMap>;
|
||||
required: boolean;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../../..").ThemeColorMap>;
|
||||
};
|
||||
isThemeable: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
eq: {
|
||||
type: PropType<Eq<unknown>>;
|
||||
default: import("fp-ts/lib/function").Lazy<Eq<unknown>>;
|
||||
};
|
||||
isFocused: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
onFocus: {
|
||||
type: PropType<(e?: Event | undefined) => void>;
|
||||
required: false;
|
||||
};
|
||||
onBlur: {
|
||||
type: PropType<(e?: Event | undefined) => void>;
|
||||
required: false;
|
||||
};
|
||||
focusOnMount: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isDisabled: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
isReadonly: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
disableIfReadonly: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
useNativeValidation: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isValid: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
'onUpdate:isValid': {
|
||||
type: PropType<FunctionN<[boolean], void>>;
|
||||
default: import("fp-ts/lib/function").Lazy<() => void>;
|
||||
};
|
||||
variant: {
|
||||
type: PropType<import("../../..").ColorVariant>;
|
||||
default: "";
|
||||
};
|
||||
type: {
|
||||
type: PropType<string>;
|
||||
};
|
||||
autocomplete: {
|
||||
type: PropType<string>;
|
||||
};
|
||||
placeholder: {
|
||||
type: PropType<string>;
|
||||
};
|
||||
size: {
|
||||
type: PropType<import("../../..").SizeVariant>;
|
||||
default: import("../../..").SizeVariant;
|
||||
};
|
||||
isRequired: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
isExpanded: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isLoading: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isRounded: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
maxlength: {
|
||||
type: PropType<string | number>;
|
||||
};
|
||||
icon: null;
|
||||
usePasswordReveal: {
|
||||
type: PropType<boolean>;
|
||||
default: undefined;
|
||||
};
|
||||
}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../../..").ThemeColorMap;
|
||||
variant: import("../../..").ColorVariant;
|
||||
size: import("../../..").SizeVariant;
|
||||
isExpanded: boolean;
|
||||
isRounded: boolean;
|
||||
isLoading: boolean;
|
||||
isFocused: boolean;
|
||||
isDisabled: boolean;
|
||||
focusOnMount: boolean;
|
||||
"onUpdate:modelValue": FunctionN<[string], void>;
|
||||
isReadonly: boolean;
|
||||
disableIfReadonly: boolean;
|
||||
useNativeValidation: boolean;
|
||||
isValid: boolean;
|
||||
"onUpdate:isValid": FunctionN<[boolean], void>;
|
||||
isRequired: boolean;
|
||||
usePasswordReveal: boolean;
|
||||
selectedItems: unknown[];
|
||||
"onUpdate:selectedItems": FunctionN<[unknown[]], void>;
|
||||
items: unknown[];
|
||||
itemId: (item: unknown) => any;
|
||||
itemText: (item: unknown) => any;
|
||||
closeOnSelect: boolean;
|
||||
clearOnSelect: boolean;
|
||||
openOnFocus: boolean;
|
||||
eq: Eq<unknown>;
|
||||
} & {
|
||||
icon?: any;
|
||||
type?: string | undefined;
|
||||
onFocus?: ((e?: Event | undefined) => void) | undefined;
|
||||
onBlur?: ((e?: Event | undefined) => void) | undefined;
|
||||
modelValue?: string | undefined;
|
||||
autocomplete?: string | undefined;
|
||||
placeholder?: string | undefined;
|
||||
maxlength?: string | number | undefined;
|
||||
itemFilter?: FunctionN<[string], Predicate<unknown>> | undefined;
|
||||
onSelected?: FunctionN<[unknown], void> | undefined;
|
||||
}>, {
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../../..").ThemeColorMap;
|
||||
variant: import("../../..").ColorVariant;
|
||||
size: import("../../..").SizeVariant;
|
||||
isExpanded: boolean;
|
||||
isRounded: boolean;
|
||||
isLoading: boolean;
|
||||
isFocused: boolean;
|
||||
isDisabled: boolean;
|
||||
focusOnMount: boolean;
|
||||
"onUpdate:modelValue": FunctionN<[string], void>;
|
||||
isReadonly: boolean;
|
||||
disableIfReadonly: boolean;
|
||||
useNativeValidation: boolean;
|
||||
isValid: boolean;
|
||||
"onUpdate:isValid": FunctionN<[boolean], void>;
|
||||
isRequired: boolean;
|
||||
usePasswordReveal: boolean;
|
||||
"onUpdate:selectedItems": FunctionN<[unknown[]], void>;
|
||||
items: unknown[];
|
||||
itemId: (item: unknown) => any;
|
||||
itemText: (item: unknown) => any;
|
||||
closeOnSelect: boolean;
|
||||
clearOnSelect: boolean;
|
||||
openOnFocus: boolean;
|
||||
eq: Eq<unknown>;
|
||||
}>;
|
||||
Generated
Vendored
Executable
+317
@@ -0,0 +1,317 @@
|
||||
import "../../../../src/components/form/sass/form.sass";
|
||||
import "../../../../src/components/dropdown/dropdown.sass";
|
||||
import "../../../../src/components/form/autocomplete/autocomplete.sass";
|
||||
import { StaticUseInputProps } from '../../../composables/input/useInput';
|
||||
import { getUseModelPropsDefinition } from '../../../composables/model/useModel';
|
||||
import { useProxy } from '../../../composables/proxy';
|
||||
import { getEqPropsDefinition } from '../../../composables/shared';
|
||||
import { useThemePropsDefinition } from '../../../composables/theme';
|
||||
import { constEmptyArray, extractProp, isFunction, isHTMLElement, isObject, isString, toggleListItem } from '../../../utils/helpers';
|
||||
import { DropdownThemeMap } from '../../dropdown';
|
||||
import BDropdown from '../../dropdown/BDropdown';
|
||||
import { isArrowDownEvent, isArrowUpEvent, isEnterEvent, isEscEvent, isTabEvent } from '../../../utils/eventHelpers';
|
||||
import { constant, constVoid } from 'fp-ts/lib/function';
|
||||
import BDropdownDivider from '../../dropdown/BDropdownDivider';
|
||||
import BDropdownItem from '../../dropdown/BDropdownItem';
|
||||
import { head, isEmpty, lookup } from 'fp-ts/lib/Array';
|
||||
import { alt, chain, fold, fromNullable, isSome, map, none, some, toUndefined } from 'fp-ts/lib/Option';
|
||||
import { pipe } from 'fp-ts/lib/pipeable';
|
||||
import { defineComponent, shallowRef, computed, onBeforeUpdate, nextTick, toRef, h } from 'vue';
|
||||
import { BInput } from '../input';
|
||||
|
||||
function getActiveDescendentId(selectedItems, itemId) {
|
||||
return pipe(selectedItems, head, chain(item => {
|
||||
if (isString(item) && isFunction(itemId)) {
|
||||
const id = extractProp(itemId, item);
|
||||
return isString(id) ? some(id) : none;
|
||||
}
|
||||
|
||||
if (isString(item)) {
|
||||
return some(item);
|
||||
}
|
||||
|
||||
if (isString(itemId) && isObject(item) && Object.hasOwnProperty.call(item, itemId)) {
|
||||
const id = item[itemId];
|
||||
return isString(id) ? some(id) : none;
|
||||
}
|
||||
|
||||
const id = extractProp(itemId, item);
|
||||
return isString(id) ? some(id) : none;
|
||||
}), toUndefined);
|
||||
}
|
||||
|
||||
function getAutocompleteItems(items, selectedItems, itemId, itemText, eq, hoveredItem) {
|
||||
return items.map((item, index) => {
|
||||
const id = extractProp(itemId, item);
|
||||
const nid = isString(id) ? id : String(id);
|
||||
const text = extractProp(itemText, item);
|
||||
return {
|
||||
id: nid,
|
||||
isSelected: selectedItems.some(i => eq.equals(i, item)),
|
||||
isHovered: isSome(hoveredItem) ? hoveredItem.value.id === nid : false,
|
||||
text: isString(text) ? text : String(text),
|
||||
value: item,
|
||||
index
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function getSetSelected(props, closeDropdown, inputModel, selectedItemsModel) {
|
||||
const toggle = toggleListItem(props.eq);
|
||||
return item => {
|
||||
const text = extractProp(props.itemText, item.value);
|
||||
inputModel.value = props.clearOnSelect ? '' : isString(text) ? text : String(text);
|
||||
selectedItemsModel.value = toggle(item.value, selectedItemsModel.value || []);
|
||||
|
||||
if (props.closeOnSelect) {
|
||||
closeDropdown();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function getSetHovered(hoveredItem, templateItems) {
|
||||
return item => {
|
||||
const newItem = fromNullable(item);
|
||||
|
||||
if (isSome(newItem)) {
|
||||
hoveredItem.value = newItem;
|
||||
pipe(newItem, map(item => item.index), chain(index => lookup(index, templateItems.value)), fold(constant(constVoid), li => () => li.focus && li.focus()))();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function getOnKeydown(autocompleteItems, hoveredItem, closeDropdown, setSelected, setHovered) {
|
||||
function onArrowPress(isUp) {
|
||||
pipe(hoveredItem.value, map(item => item.index), alt(() => some(0)), chain(index => lookup(isUp ? Math.max(index - 1, 0) : Math.min(index + 1, autocompleteItems.value.length - 1), autocompleteItems.value)), fold(constant(constVoid), newItem => () => setHovered(newItem)))();
|
||||
}
|
||||
|
||||
return function onKeydown(event) {
|
||||
if (isEnterEvent(event)) {
|
||||
event.preventDefault();
|
||||
|
||||
if (isSome(hoveredItem.value)) {
|
||||
setSelected(hoveredItem.value.value);
|
||||
}
|
||||
} else if (isTabEvent(event)) {
|
||||
event.preventDefault();
|
||||
|
||||
if (isSome(hoveredItem.value)) {
|
||||
setSelected(hoveredItem.value.value);
|
||||
} else {
|
||||
nextTick(closeDropdown);
|
||||
}
|
||||
} else if (isArrowUpEvent(event)) {
|
||||
event.preventDefault();
|
||||
onArrowPress(true);
|
||||
} else if (isArrowDownEvent(event)) {
|
||||
event.preventDefault();
|
||||
onArrowPress(false);
|
||||
} else if (isEscEvent(event)) {
|
||||
event.preventDefault();
|
||||
nextTick(closeDropdown);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function getGenerateItem(itemsRef, length, onKeydown, setSelected, setHovered, slots) {
|
||||
return function generateItem(item, index) {
|
||||
return h(BDropdownItem, {
|
||||
key: item.id,
|
||||
ref: el => {
|
||||
if (isHTMLElement(el)) {
|
||||
itemsRef.value[index] = el;
|
||||
}
|
||||
},
|
||||
id: item.id,
|
||||
isActive: item.isSelected,
|
||||
tabindex: item.isSelected ? -1 : 0,
|
||||
'aria-selected': item.isSelected,
|
||||
'aria-label': `Option ${index + 1} of ${length.value}`,
|
||||
class: {
|
||||
'is-hovered': item.isHovered
|
||||
},
|
||||
onClick: () => setSelected(item),
|
||||
onMouseenter: () => setHovered(item),
|
||||
onKeydown
|
||||
}, () => slots.default ? slots.default({
|
||||
option: item,
|
||||
index
|
||||
}) : item.text);
|
||||
};
|
||||
}
|
||||
|
||||
function generateHeaderItem(slots) {
|
||||
return h('li', {
|
||||
class: 'dropdown-item',
|
||||
tabindex: -1
|
||||
}, slots.header && slots.header());
|
||||
}
|
||||
|
||||
function generateFooterItem(slots) {
|
||||
return h('li', {
|
||||
class: 'dropdown-item',
|
||||
tabindex: -1
|
||||
}, slots.footer && slots.footer());
|
||||
}
|
||||
|
||||
function generateLoadingItem(slots) {
|
||||
return h('li', {
|
||||
tabindex: -1
|
||||
}, [h(BDropdownItem, {
|
||||
tag: 'div'
|
||||
}, () => slots.loading ? slots.loading() : 'Loading results...')]);
|
||||
}
|
||||
|
||||
function generateEmptyItem(modelValue, slots) {
|
||||
return h(BDropdownItem, {
|
||||
class: 'is-disabled'
|
||||
}, () => slots.empty ? slots.empty({
|
||||
searchValue: modelValue
|
||||
}) : modelValue ? `No results` : `No results for ${modelValue}`);
|
||||
}
|
||||
|
||||
function defineAutocomplete() {
|
||||
return defineComponent({
|
||||
name: 'b-autocomplete',
|
||||
props: { ...StaticUseInputProps,
|
||||
...getEqPropsDefinition(),
|
||||
...useThemePropsDefinition(DropdownThemeMap),
|
||||
...getUseModelPropsDefinition(),
|
||||
...getUseModelPropsDefinition('selectedItems', 'onUpdate:selectedItems'),
|
||||
selectedItems: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: constEmptyArray
|
||||
},
|
||||
itemFilter: {
|
||||
type: Function,
|
||||
required: false
|
||||
},
|
||||
itemId: {
|
||||
type: [String, Function],
|
||||
default: 'id'
|
||||
},
|
||||
itemText: {
|
||||
type: [String, Function],
|
||||
default: 'text'
|
||||
},
|
||||
closeOnSelect: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
clearOnSelect: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
openOnFocus: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
onSelected: {
|
||||
type: Function,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
value: searchValue
|
||||
} = useProxy(computed(() => props.modelValue ?? ''), toRef(props, 'onUpdate:modelValue'));
|
||||
const {
|
||||
value: selectedItems
|
||||
} = useProxy(toRef(props, 'selectedItems'), toRef(props, 'onUpdate:selectedItems'));
|
||||
const itemsRef = shallowRef([]);
|
||||
const filteredItems = computed(() => {
|
||||
if (props.itemFilter) {
|
||||
return props.items.filter(props.itemFilter(searchValue.value));
|
||||
} else {
|
||||
const sv = searchValue.value.toLowerCase();
|
||||
const extract = props.itemText;
|
||||
return props.items.filter(i => extractProp(extract, i).toLowerCase().includes(sv));
|
||||
}
|
||||
});
|
||||
onBeforeUpdate(() => {
|
||||
itemsRef.value = [];
|
||||
});
|
||||
const dropdown = shallowRef(null);
|
||||
|
||||
function close() {
|
||||
dropdown.value && dropdown.value.toggle.setOff();
|
||||
}
|
||||
|
||||
const hoveredItem = shallowRef(none);
|
||||
const activeDescendentId = computed(() => getActiveDescendentId(props.selectedItems, props.itemId));
|
||||
const autocompleteItems = computed(() => getAutocompleteItems(filteredItems.value, selectedItems.value, props.itemId, props.itemText, props.eq, hoveredItem.value));
|
||||
const numberOfItems = computed(() => autocompleteItems.value.length);
|
||||
const setSelected = getSetSelected(props, close, searchValue, selectedItems);
|
||||
const setHovered = getSetHovered(hoveredItem, itemsRef);
|
||||
const onKeydown = getOnKeydown(autocompleteItems, hoveredItem, close, setSelected, setHovered);
|
||||
const generateItem = getGenerateItem(itemsRef, numberOfItems, onKeydown, setSelected, setHovered, slots);
|
||||
return () => {
|
||||
return h(BDropdown, {
|
||||
ref: dropdown,
|
||||
isMobileModal: false,
|
||||
class: ['b-autocomplete', {
|
||||
'is-expanded': props.isExpanded
|
||||
}]
|
||||
}, {
|
||||
trigger: () => {
|
||||
return h(BInput, {
|
||||
modelValue: searchValue.value,
|
||||
type: 'text',
|
||||
size: props.size,
|
||||
isLoading: props.isLoading,
|
||||
isRounded: props.isRounded,
|
||||
icon: props.icon,
|
||||
maxlength: props.maxlength,
|
||||
autocomplete: 'off',
|
||||
placeholder: props.placeholder,
|
||||
role: 'searchbox',
|
||||
'aria-activedescendant': activeDescendentId.value,
|
||||
'onUpdate:modelValue': val => {
|
||||
searchValue.value = val;
|
||||
},
|
||||
// onFocus: () => {
|
||||
// nextTick().then(() => {
|
||||
// if (props.openOnFocus && toggle.isOff.value) {
|
||||
// toggle.setOn();
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
onBlur: props.onBlur,
|
||||
onKeydown
|
||||
});
|
||||
},
|
||||
default: () => {
|
||||
let nodes;
|
||||
|
||||
if (props.isLoading) {
|
||||
nodes = [generateLoadingItem(slots)];
|
||||
} else {
|
||||
nodes = isEmpty(autocompleteItems.value) ? [generateEmptyItem(searchValue.value, slots)] : autocompleteItems.value.map(generateItem);
|
||||
|
||||
if (slots.header) {
|
||||
nodes.unshift(generateHeaderItem(slots), h(BDropdownDivider));
|
||||
}
|
||||
|
||||
if (slots.footer) {
|
||||
nodes.push(h(BDropdownDivider), generateFooterItem(slots));
|
||||
}
|
||||
}
|
||||
|
||||
return nodes;
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
export const BAutocomplete = defineAutocomplete();
|
||||
//# sourceMappingURL=BAutocomplete.js.map
|
||||
Generated
Vendored
Executable
+1
File diff suppressed because one or more lines are too long
+1
@@ -0,0 +1 @@
|
||||
export * from './BAutocomplete';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export * from './BAutocomplete';
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../src/components/form/autocomplete/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAd","sourcesContent":["export * from './BAutocomplete';\n"],"sourceRoot":"","file":"index.js"}
|
||||
+1991
File diff suppressed because it is too large
Load Diff
+6
@@ -0,0 +1,6 @@
|
||||
import "../../../../src/components/form/checkbox/checkbox.sass";
|
||||
import "../../../../src/components/form/sass/form.sass";
|
||||
import { useSelectionControl } from '../shared/useSelectionControl';
|
||||
export const defineCheckbox = useSelectionControl('checkbox', 'checkbox', 'b-checkbox', 'b-checkbox checkbox');
|
||||
export const BCheckbox = defineCheckbox();
|
||||
//# sourceMappingURL=BCheckbox.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../src/components/form/checkbox/BCheckbox.ts"],"names":[],"mappings":"AAAA,OAAO,wDAAP;AACA,OAAO,gDAAP;AACA,SAAS,mBAAT,QAAoC,+BAApC;AAEA,OAAO,MAAM,cAAc,GAAG,mBAAmB,CAAC,UAAD,EAAa,UAAb,EAAyB,YAAzB,EAAuC,qBAAvC,CAA1C;AAEP,OAAO,MAAM,SAAS,GAAG,cAAc,EAAhC","sourcesContent":["import './checkbox.sass';\nimport '../sass/form.sass';\nimport { useSelectionControl } from '../shared/useSelectionControl';\n\nexport const defineCheckbox = useSelectionControl('checkbox', 'checkbox', 'b-checkbox', 'b-checkbox checkbox');\n\nexport const BCheckbox = defineCheckbox<unknown>();\n"],"sourceRoot":"","file":"BCheckbox.js"}
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import { BCheckbox, defineCheckbox } from './BCheckbox';
|
||||
export { BCheckbox, defineCheckbox };
|
||||
export default BCheckbox;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import { BCheckbox, defineCheckbox } from './BCheckbox';
|
||||
export { BCheckbox, defineCheckbox };
|
||||
export default BCheckbox;
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../src/components/form/checkbox/index.ts"],"names":[],"mappings":"AAAA,SAAS,SAAT,EAAoB,cAApB,QAA0C,aAA1C;AAEA,SAAS,SAAT,EAAoB,cAApB;AAEA,eAAe,SAAf","sourcesContent":["import { BCheckbox, defineCheckbox } from './BCheckbox';\n\nexport { BCheckbox, defineCheckbox };\n\nexport default BCheckbox;\n"],"sourceRoot":"","file":"index.js"}
|
||||
+557
@@ -0,0 +1,557 @@
|
||||
import '../../pagination/pagination.sass';
|
||||
import '../../dropdown/dropdown.sass';
|
||||
import './datepicker.sass';
|
||||
import { DateEvent, EventIndicator, MonthNumber } from './shared';
|
||||
import { WeekdayNumber } from './utils';
|
||||
import { FunctionN } from 'fp-ts/lib/function';
|
||||
import { PropType, VNode, ComponentOptions, FunctionalComponent, ExtractPropTypes } from 'vue';
|
||||
declare type Component = ComponentOptions | FunctionalComponent;
|
||||
export declare type DatepickerPosition = 'is-top-right' | 'is-top-left' | 'is-bottom-left';
|
||||
export interface DatepickerIcons {
|
||||
next: Component;
|
||||
previous: Component;
|
||||
calendar: Component;
|
||||
}
|
||||
export declare function getDatepickerIcons(icons: Partial<DatepickerIcons>): DatepickerIcons;
|
||||
declare const BDatepickerPropsDefinition: {
|
||||
modelValue: {
|
||||
type: PropType<Date | Date[]>;
|
||||
};
|
||||
'onUpdate:modelValue': {
|
||||
type: PropType<FunctionN<[Date | Date[]], void>>;
|
||||
required: true;
|
||||
};
|
||||
year: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
'onUpdate:year': {
|
||||
type: PropType<FunctionN<[number], void>>;
|
||||
required: boolean;
|
||||
};
|
||||
month: {
|
||||
type: PropType<MonthNumber>;
|
||||
default: MonthNumber;
|
||||
};
|
||||
'onUpdate:month': {
|
||||
type: PropType<FunctionN<[MonthNumber], void>>;
|
||||
required: boolean;
|
||||
};
|
||||
dayNames: {
|
||||
type: PropType<string[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<string[]>;
|
||||
};
|
||||
monthNames: {
|
||||
type: PropType<string[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<string[]>;
|
||||
};
|
||||
firstDayOfWeek: {
|
||||
type: PropType<WeekdayNumber>;
|
||||
default: 0;
|
||||
};
|
||||
events: {
|
||||
type: PropType<DateEvent[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
minDate: {
|
||||
type: PropType<Date>;
|
||||
required: boolean;
|
||||
};
|
||||
maxDate: {
|
||||
type: PropType<Date>;
|
||||
required: boolean;
|
||||
};
|
||||
isDisabled: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
unselectableDates: {
|
||||
type: PropType<Date[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
unselectableDaysOfWeek: {
|
||||
type: PropType<number[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
selectableDates: {
|
||||
type: PropType<Date[]>;
|
||||
};
|
||||
showWeekNumber: {
|
||||
type: PropType<boolean>;
|
||||
default: false;
|
||||
};
|
||||
isMultiple: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
placeholder: {
|
||||
type: PropType<string>;
|
||||
};
|
||||
useMobileNative: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
position: {
|
||||
type: PropType<import("../../dropdown/BDropdown").DropdownPosition>;
|
||||
};
|
||||
indicators: {
|
||||
type: PropType<EventIndicator>;
|
||||
default: "bars";
|
||||
};
|
||||
yearsRange: {
|
||||
type: PropType<[number, number]>;
|
||||
default: import("fp-ts/lib/function").Lazy<readonly [-5, 3]>;
|
||||
};
|
||||
closeOnSelect: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isReadonly: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
useNativeValidation: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
icons: {
|
||||
type: PropType<DatepickerIcons>;
|
||||
default: import("fp-ts/lib/function").Lazy<DatepickerIcons>;
|
||||
};
|
||||
isFocused: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
onFocus: {
|
||||
type: PropType<(e?: Event | undefined) => void>;
|
||||
required: false;
|
||||
};
|
||||
onBlur: {
|
||||
type: PropType<(e?: Event | undefined) => void>;
|
||||
required: false;
|
||||
};
|
||||
focusOnMount: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
disableIfReadonly: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
isValid: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
'onUpdate:isValid': {
|
||||
type: PropType<FunctionN<[boolean], void>>;
|
||||
default: import("fp-ts/lib/function").Lazy<() => void>;
|
||||
};
|
||||
variant: {
|
||||
type: PropType<import("../../..").ColorVariant>;
|
||||
default: "";
|
||||
};
|
||||
type: {
|
||||
type: PropType<string>;
|
||||
};
|
||||
autocomplete: {
|
||||
type: PropType<string>;
|
||||
};
|
||||
size: {
|
||||
type: PropType<import("../../..").SizeVariant>;
|
||||
default: import("../../..").SizeVariant;
|
||||
};
|
||||
isRequired: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
isExpanded: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isLoading: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isRounded: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
maxlength: {
|
||||
type: PropType<string | number>;
|
||||
};
|
||||
icon: null;
|
||||
usePasswordReveal: {
|
||||
type: PropType<boolean>;
|
||||
default: undefined;
|
||||
};
|
||||
id: PropType<string>;
|
||||
isHoverable: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isInline: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isMobileModal: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
menuTag: {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
transition: {
|
||||
type: PropType<import("../../..").Transition>;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../../..").Transition>;
|
||||
};
|
||||
onToggle: {
|
||||
type: PropType<FunctionN<[boolean], void>>;
|
||||
required: false;
|
||||
};
|
||||
onSetOn: {
|
||||
type: PropType<import("fp-ts/lib/IO").IO<void>>;
|
||||
required: false;
|
||||
};
|
||||
onSetOff: {
|
||||
type: PropType<import("fp-ts/lib/IO").IO<void>>;
|
||||
required: false;
|
||||
};
|
||||
hasPopup: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
themeMap: {
|
||||
type: PropType<import("../../..").ThemeColorMap>;
|
||||
required: boolean;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../../..").ThemeColorMap>;
|
||||
};
|
||||
isThemeable: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
};
|
||||
export declare type BDatepickerProps = ExtractPropTypes<typeof BDatepickerPropsDefinition>;
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
modelValue: {
|
||||
type: PropType<Date | Date[]>;
|
||||
};
|
||||
'onUpdate:modelValue': {
|
||||
type: PropType<FunctionN<[Date | Date[]], void>>;
|
||||
required: true;
|
||||
};
|
||||
year: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
'onUpdate:year': {
|
||||
type: PropType<FunctionN<[number], void>>;
|
||||
required: boolean;
|
||||
};
|
||||
month: {
|
||||
type: PropType<MonthNumber>;
|
||||
default: MonthNumber;
|
||||
};
|
||||
'onUpdate:month': {
|
||||
type: PropType<FunctionN<[MonthNumber], void>>;
|
||||
required: boolean;
|
||||
};
|
||||
dayNames: {
|
||||
type: PropType<string[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<string[]>;
|
||||
};
|
||||
monthNames: {
|
||||
type: PropType<string[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<string[]>;
|
||||
};
|
||||
firstDayOfWeek: {
|
||||
type: PropType<WeekdayNumber>;
|
||||
default: 0;
|
||||
};
|
||||
events: {
|
||||
type: PropType<DateEvent[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
minDate: {
|
||||
type: PropType<Date>;
|
||||
required: boolean;
|
||||
};
|
||||
maxDate: {
|
||||
type: PropType<Date>;
|
||||
required: boolean;
|
||||
};
|
||||
isDisabled: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
unselectableDates: {
|
||||
type: PropType<Date[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
unselectableDaysOfWeek: {
|
||||
type: PropType<number[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
selectableDates: {
|
||||
type: PropType<Date[]>;
|
||||
};
|
||||
showWeekNumber: {
|
||||
type: PropType<boolean>;
|
||||
default: false;
|
||||
};
|
||||
isMultiple: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
placeholder: {
|
||||
type: PropType<string>;
|
||||
};
|
||||
useMobileNative: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
position: {
|
||||
type: PropType<import("../../dropdown/BDropdown").DropdownPosition>;
|
||||
};
|
||||
indicators: {
|
||||
type: PropType<EventIndicator>;
|
||||
default: "bars";
|
||||
};
|
||||
yearsRange: {
|
||||
type: PropType<[number, number]>;
|
||||
default: import("fp-ts/lib/function").Lazy<readonly [-5, 3]>;
|
||||
};
|
||||
closeOnSelect: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isReadonly: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
useNativeValidation: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
icons: {
|
||||
type: PropType<DatepickerIcons>;
|
||||
default: import("fp-ts/lib/function").Lazy<DatepickerIcons>;
|
||||
};
|
||||
isFocused: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
onFocus: {
|
||||
type: PropType<(e?: Event | undefined) => void>;
|
||||
required: false;
|
||||
};
|
||||
onBlur: {
|
||||
type: PropType<(e?: Event | undefined) => void>;
|
||||
required: false;
|
||||
};
|
||||
focusOnMount: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
disableIfReadonly: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
isValid: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
'onUpdate:isValid': {
|
||||
type: PropType<FunctionN<[boolean], void>>;
|
||||
default: import("fp-ts/lib/function").Lazy<() => void>;
|
||||
};
|
||||
variant: {
|
||||
type: PropType<import("../../..").ColorVariant>;
|
||||
default: "";
|
||||
};
|
||||
type: {
|
||||
type: PropType<string>;
|
||||
};
|
||||
autocomplete: {
|
||||
type: PropType<string>;
|
||||
};
|
||||
size: {
|
||||
type: PropType<import("../../..").SizeVariant>;
|
||||
default: import("../../..").SizeVariant;
|
||||
};
|
||||
isRequired: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
isExpanded: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isLoading: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isRounded: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
maxlength: {
|
||||
type: PropType<string | number>;
|
||||
};
|
||||
icon: null;
|
||||
usePasswordReveal: {
|
||||
type: PropType<boolean>;
|
||||
default: undefined;
|
||||
};
|
||||
id: PropType<string>;
|
||||
isHoverable: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isInline: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isMobileModal: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
menuTag: {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
transition: {
|
||||
type: PropType<import("../../..").Transition>;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../../..").Transition>;
|
||||
};
|
||||
onToggle: {
|
||||
type: PropType<FunctionN<[boolean], void>>;
|
||||
required: false;
|
||||
};
|
||||
onSetOn: {
|
||||
type: PropType<import("fp-ts/lib/IO").IO<void>>;
|
||||
required: false;
|
||||
};
|
||||
onSetOff: {
|
||||
type: PropType<import("fp-ts/lib/IO").IO<void>>;
|
||||
required: false;
|
||||
};
|
||||
hasPopup: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
themeMap: {
|
||||
type: PropType<import("../../..").ThemeColorMap>;
|
||||
required: boolean;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../../..").ThemeColorMap>;
|
||||
};
|
||||
isThemeable: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../../..").ThemeColorMap;
|
||||
hasPopup: boolean;
|
||||
transition: import("../../..").Transition;
|
||||
variant: import("../../..").ColorVariant;
|
||||
size: import("../../..").SizeVariant;
|
||||
icons: DatepickerIcons;
|
||||
isExpanded: boolean;
|
||||
isRounded: boolean;
|
||||
isLoading: boolean;
|
||||
isFocused: boolean;
|
||||
isDisabled: boolean;
|
||||
isHoverable: boolean;
|
||||
isInline: boolean;
|
||||
isMobileModal: boolean;
|
||||
menuTag: string;
|
||||
focusOnMount: boolean;
|
||||
"onUpdate:modelValue": FunctionN<[Date | Date[]], void>;
|
||||
isReadonly: boolean;
|
||||
disableIfReadonly: boolean;
|
||||
useNativeValidation: boolean;
|
||||
isValid: boolean;
|
||||
"onUpdate:isValid": FunctionN<[boolean], void>;
|
||||
isRequired: boolean;
|
||||
usePasswordReveal: boolean;
|
||||
closeOnSelect: boolean;
|
||||
isMultiple: boolean;
|
||||
events: DateEvent[];
|
||||
indicators: EventIndicator;
|
||||
showWeekNumber: boolean;
|
||||
month: MonthNumber;
|
||||
unselectableDates: Date[];
|
||||
unselectableDaysOfWeek: number[];
|
||||
year: number;
|
||||
dayNames: string[];
|
||||
monthNames: string[];
|
||||
firstDayOfWeek: WeekdayNumber;
|
||||
useMobileNative: boolean;
|
||||
yearsRange: [number, number];
|
||||
} & {
|
||||
onToggle?: FunctionN<[boolean], void> | undefined;
|
||||
onSetOn?: import("fp-ts/lib/IO").IO<void> | undefined;
|
||||
onSetOff?: import("fp-ts/lib/IO").IO<void> | undefined;
|
||||
icon?: any;
|
||||
type?: string | undefined;
|
||||
position?: "is-top-right" | "is-top-left" | "is-bottom-left" | undefined;
|
||||
id?: string | undefined;
|
||||
onFocus?: ((e?: Event | undefined) => void) | undefined;
|
||||
onBlur?: ((e?: Event | undefined) => void) | undefined;
|
||||
modelValue?: Date | Date[] | undefined;
|
||||
autocomplete?: string | undefined;
|
||||
placeholder?: string | undefined;
|
||||
maxlength?: string | number | undefined;
|
||||
minDate?: Date | undefined;
|
||||
maxDate?: Date | undefined;
|
||||
selectableDates?: Date[] | undefined;
|
||||
"onUpdate:year"?: FunctionN<[number], void> | undefined;
|
||||
"onUpdate:month"?: FunctionN<[MonthNumber], void> | undefined;
|
||||
}>, {
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../../..").ThemeColorMap;
|
||||
hasPopup: boolean;
|
||||
transition: import("../../..").Transition;
|
||||
variant: import("../../..").ColorVariant;
|
||||
size: import("../../..").SizeVariant;
|
||||
icons: DatepickerIcons;
|
||||
isExpanded: boolean;
|
||||
isRounded: boolean;
|
||||
isLoading: boolean;
|
||||
isFocused: boolean;
|
||||
isDisabled: boolean;
|
||||
isHoverable: boolean;
|
||||
isInline: boolean;
|
||||
isMobileModal: boolean;
|
||||
menuTag: string;
|
||||
focusOnMount: boolean;
|
||||
isReadonly: boolean;
|
||||
disableIfReadonly: boolean;
|
||||
useNativeValidation: boolean;
|
||||
isValid: boolean;
|
||||
"onUpdate:isValid": FunctionN<[boolean], void>;
|
||||
isRequired: boolean;
|
||||
usePasswordReveal: boolean;
|
||||
closeOnSelect: boolean;
|
||||
isMultiple: boolean;
|
||||
events: DateEvent[];
|
||||
indicators: EventIndicator;
|
||||
showWeekNumber: boolean;
|
||||
month: MonthNumber;
|
||||
unselectableDates: Date[];
|
||||
unselectableDaysOfWeek: number[];
|
||||
year: number;
|
||||
dayNames: string[];
|
||||
monthNames: string[];
|
||||
firstDayOfWeek: WeekdayNumber;
|
||||
useMobileNative: boolean;
|
||||
yearsRange: [number, number];
|
||||
}>;
|
||||
export default _default;
|
||||
+541
@@ -0,0 +1,541 @@
|
||||
import "../../../../src/components/pagination/pagination.sass";
|
||||
import "../../../../src/components/dropdown/dropdown.sass";
|
||||
import "../../../../src/components/form/datepicker/datepicker.sass";
|
||||
import { useDisable, UseDisablePropsDefinition } from '../../../composables/disable';
|
||||
import { useEqRef } from '../../../composables/eqRef';
|
||||
import { useFieldData } from '../../../composables/fieldData';
|
||||
import { getUseInputPropsDefinition } from '../../../composables/input/useInput';
|
||||
import { useProxy } from '../../../composables/proxy/useProxy';
|
||||
import { DEFAULT_DAY_NAMES, DEFAULT_MONTH_NAMES } from './shared';
|
||||
import { addDays, eqSerialDate, isDate } from './utils';
|
||||
import { BInput } from '../input/BInput';
|
||||
import { isArrowDownEvent, isArrowLeftEvent, isArrowRightEvent, isArrowUpEvent, isEnterEvent, isEscEvent, isSpaceEvent } from '../../../utils/eventHelpers';
|
||||
import { head, isNonEmpty, range } from 'fp-ts/lib/Array';
|
||||
import { constant } from 'fp-ts/lib/function';
|
||||
import { alt, chain, fromNullable, getEq, isNone, isSome, some } from 'fp-ts/lib/Option';
|
||||
import { pipe } from 'fp-ts/lib/pipeable';
|
||||
import BDropdown, { BDropdownPropsDefinition } from '../../dropdown/BDropdown';
|
||||
import BDatepickerTable from './BDatepickerTable';
|
||||
import BField from '../field/BField';
|
||||
import { BSelect } from '../select/BSelect';
|
||||
import { computed, onUnmounted, onMounted, defineAsyncComponent, defineComponent, h, shallowRef, watch, toRef } from 'vue';
|
||||
import { constEmptyArray, isString, toggleListItem } from '../../../utils/helpers';
|
||||
const DEFAULT_DATEPICKER_ICONS = {
|
||||
previous: defineAsyncComponent(() => import('../../icons/angleLeft')),
|
||||
next: defineAsyncComponent(() => import('../../icons/angleRight')),
|
||||
calendar: defineAsyncComponent(() => import('../../icons/calendar'))
|
||||
};
|
||||
export function getDatepickerIcons(icons) {
|
||||
return { ...DEFAULT_DATEPICKER_ICONS,
|
||||
...icons
|
||||
};
|
||||
}
|
||||
const BDatepickerPropsDefinition = { ...BDropdownPropsDefinition,
|
||||
...UseDisablePropsDefinition,
|
||||
...getUseInputPropsDefinition(),
|
||||
modelValue: {
|
||||
type: [Array, Date]
|
||||
},
|
||||
'onUpdate:modelValue': {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
year: {
|
||||
type: Number,
|
||||
default: new Date().getFullYear()
|
||||
},
|
||||
'onUpdate:year': {
|
||||
type: Function,
|
||||
required: false
|
||||
},
|
||||
month: {
|
||||
type: Number,
|
||||
default: new Date().getMonth()
|
||||
},
|
||||
'onUpdate:month': {
|
||||
type: Function,
|
||||
required: false
|
||||
},
|
||||
dayNames: {
|
||||
type: Array,
|
||||
default: constant(DEFAULT_DAY_NAMES)
|
||||
},
|
||||
monthNames: {
|
||||
type: Array,
|
||||
default: constant(DEFAULT_MONTH_NAMES)
|
||||
},
|
||||
firstDayOfWeek: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
events: {
|
||||
type: Array,
|
||||
default: constEmptyArray
|
||||
},
|
||||
minDate: {
|
||||
type: Date,
|
||||
required: false
|
||||
},
|
||||
maxDate: {
|
||||
type: Date,
|
||||
required: false
|
||||
},
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
unselectableDates: {
|
||||
type: Array,
|
||||
default: constEmptyArray
|
||||
},
|
||||
unselectableDaysOfWeek: {
|
||||
type: Array,
|
||||
default: constEmptyArray
|
||||
},
|
||||
selectableDates: {
|
||||
type: Object
|
||||
},
|
||||
showWeekNumber: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isMultiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
placeholder: {
|
||||
type: String
|
||||
},
|
||||
useMobileNative: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
position: {
|
||||
type: String
|
||||
},
|
||||
indicators: {
|
||||
type: String,
|
||||
default: 'bars'
|
||||
},
|
||||
yearsRange: {
|
||||
type: Array,
|
||||
default: constant([-5, 3])
|
||||
},
|
||||
closeOnSelect: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
isReadonly: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
useNativeValidation: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// openOnFocus: {
|
||||
// type: Boolean as PropType<boolean>,
|
||||
// default: true
|
||||
// },
|
||||
icons: {
|
||||
type: Object,
|
||||
default: constant(DEFAULT_DATEPICKER_ICONS)
|
||||
}
|
||||
};
|
||||
|
||||
function useNative(props) {
|
||||
return props.useMobileNative && !props.isInline;
|
||||
}
|
||||
|
||||
const useFormattedDate = Intl.DateTimeFormat('default', {
|
||||
year: 'numeric',
|
||||
month: 'numeric',
|
||||
day: 'numeric'
|
||||
}).format;
|
||||
|
||||
function useFormattedModelValue(modelValue) {
|
||||
return Array.isArray(modelValue) ? modelValue.map(useFormattedDate).join(', ') : modelValue ? useFormattedDate(modelValue) : null;
|
||||
}
|
||||
|
||||
function parseInputString(str) {
|
||||
const splits = str.split(',').map(s => s.trim());
|
||||
return splits.map(s => new Date(s)).filter(d => isDate(d) && !isNaN(d.getTime()));
|
||||
}
|
||||
|
||||
function generateInput(props, context, data) {
|
||||
const isMobile = useNative(props);
|
||||
return h(BInput, {
|
||||
max: props.maxDate ? useFormattedDate(props.maxDate) : null,
|
||||
min: props.minDate ? useFormattedDate(props.minDate) : null,
|
||||
autocomplete: 'off',
|
||||
type: isMobile ? 'date' : 'text',
|
||||
modelValue: useFormattedModelValue(data.modelValue.value),
|
||||
'onUpdate:modelValue': val => {
|
||||
data.modelValue.value = parseInputString(val);
|
||||
},
|
||||
placeholder: props.placeholder,
|
||||
size: props.size,
|
||||
icon: props.icons.calendar,
|
||||
isRounded: props.isRounded,
|
||||
isDisabled: props.isDisabled,
|
||||
isReadonly: props.isReadonly,
|
||||
isLoading: props.isLoading,
|
||||
useNativeValidation: props.useNativeValidation // onFocus: () => {
|
||||
// if (!isMobile && props.openOnFocus && toggle) {
|
||||
// if (toggle.isOff.value) {
|
||||
// console.log('focus-set-on')
|
||||
// toggle.setOn();
|
||||
// Date.now()
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function generateButton(props, data, isNext) {
|
||||
return h('button', {
|
||||
class: isNext ? 'pagination-next datepicker-next' : 'pagination-previous datepicker-previous',
|
||||
disabled: data.isDisabled,
|
||||
onClick: isNext ? data.nextMonth : data.previousMonth,
|
||||
onKeydown: e => {
|
||||
if (isEnterEvent(e) || isSpaceEvent(e)) {
|
||||
e.preventDefault();
|
||||
isNext ? data.nextMonth() : data.previousMonth();
|
||||
}
|
||||
}
|
||||
}, [h(isNext ? props.icons.next : props.icons.previous, {
|
||||
variant: 'is-link',
|
||||
isThemeable: false
|
||||
})]);
|
||||
}
|
||||
|
||||
function generateYearSelect(props, data) {
|
||||
return h(BSelect, {
|
||||
items: data.years,
|
||||
modelValue: data.year.value,
|
||||
isDisabled: data.isDisabled,
|
||||
size: props.size,
|
||||
'onUpdate:modelValue': data.setYear
|
||||
});
|
||||
}
|
||||
|
||||
function generateMonthSelect(props, data) {
|
||||
return h(BSelect, {
|
||||
items: data.months,
|
||||
isDisabled: data.isDisabled,
|
||||
size: props.size,
|
||||
modelValue: data.month.value,
|
||||
'onUpdate:modelValue': data.setMonth
|
||||
});
|
||||
}
|
||||
|
||||
function generateSelects(props, data) {
|
||||
return h('div', {
|
||||
class: 'pagination-list'
|
||||
}, [h(BField, {
|
||||
class: 'is-marginless'
|
||||
}, () => [generateMonthSelect(props, data), generateYearSelect(props, data)])]);
|
||||
}
|
||||
|
||||
function generateDefaultHeaderContents(props, data) {
|
||||
return h('div', {
|
||||
class: ['pagination field is-centered', props.size]
|
||||
}, [generateButton(props, data, false), generateSelects(props, data), generateButton(props, data, true)]);
|
||||
}
|
||||
|
||||
function generateHeader(props, context, data) {
|
||||
return h('header', {
|
||||
class: 'datepicker-header'
|
||||
}, context.slots.header ? context.slots.header(data) : [generateDefaultHeaderContents(props, data)]);
|
||||
}
|
||||
|
||||
function generateDatepickerTable(props, context, data) {
|
||||
return h(BDatepickerTable, {
|
||||
modelValue: data.modelValue.value,
|
||||
'onUpdate:modelValue': val => {
|
||||
data.modelValue.value = val;
|
||||
},
|
||||
focusedDate: data.focusedDate.value,
|
||||
'onUpdate:focusedDate': val => {
|
||||
data.focusedDate.value = val;
|
||||
},
|
||||
dayNames: props.dayNames,
|
||||
monthNames: props.monthNames,
|
||||
firstDayOfWeek: props.firstDayOfWeek,
|
||||
minDate: props.minDate,
|
||||
maxDate: props.maxDate,
|
||||
month: data.month.value,
|
||||
year: data.year.value,
|
||||
isDisabled: data.isDisabled,
|
||||
unselectableDates: props.unselectableDates,
|
||||
unselectableDaysOfWeek: props.unselectableDaysOfWeek,
|
||||
selectableDates: props.selectableDates,
|
||||
events: props.events,
|
||||
indicators: props.indicators,
|
||||
showWeekNumber: props.showWeekNumber
|
||||
});
|
||||
}
|
||||
|
||||
function generateFooter(context) {
|
||||
return h('footer', {
|
||||
class: 'datepicker-footer'
|
||||
}, context.slots.footer && context.slots.footer());
|
||||
}
|
||||
|
||||
function generateCalendar(props, context, data) {
|
||||
return h('section', {
|
||||
class: 'datepicker-content',
|
||||
'aria-label': 'Datepicker calendar'
|
||||
}, [generateDatepickerTable(props, context, data)]);
|
||||
}
|
||||
|
||||
function generateDatepickerBody(props, context, data) {
|
||||
const nodes = [generateHeader(props, context, data), generateCalendar(props, context, data)];
|
||||
|
||||
if (context.slots.footer) {
|
||||
nodes.push(generateFooter(context));
|
||||
}
|
||||
|
||||
return h('div', nodes);
|
||||
}
|
||||
|
||||
function generateDropdown(props, context, data, dropdown) {
|
||||
return h(BDropdown, {
|
||||
ref: dropdown,
|
||||
position: props.position,
|
||||
isDisabled: props.isDisabled,
|
||||
isInline: props.isInline
|
||||
}, {
|
||||
trigger: () => {
|
||||
return generateInput(props, context, data);
|
||||
},
|
||||
default: () => generateDatepickerBody(props, context, data)
|
||||
});
|
||||
}
|
||||
|
||||
function getMonths(props, focusedMonth) {
|
||||
return props.monthNames.map((month, index) => ({
|
||||
value: index,
|
||||
text: month,
|
||||
isDisabled: false,
|
||||
isSelected: focusedMonth === index
|
||||
}));
|
||||
}
|
||||
|
||||
function getYears(props, focusedYear) {
|
||||
const currentYear = new Date().getFullYear();
|
||||
return range(props.yearsRange[0], props.yearsRange[1]).map(inc => currentYear + inc).map(year => ({
|
||||
value: year,
|
||||
text: year.toString(),
|
||||
isDisabled: false,
|
||||
isSelected: focusedYear === year
|
||||
}));
|
||||
}
|
||||
|
||||
function getSetPreviousMonth(props, month, year) {
|
||||
return e => {
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
if (!props.isDisabled) {
|
||||
if (month.value > 0) {
|
||||
month.value = month.value - 1;
|
||||
} else {
|
||||
month.value = 11;
|
||||
year.value = year.value - 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function getSetNextMonth(props, month, year) {
|
||||
return e => {
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
if (!props.isDisabled) {
|
||||
const mv = month.value;
|
||||
|
||||
if (mv < 11) {
|
||||
month.value = mv + 1;
|
||||
} else {
|
||||
month.value = 0;
|
||||
year.value = year.value + 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function getSetMonth(monthRef) {
|
||||
return month => {
|
||||
if (isString(month)) {
|
||||
const newVal = fromNullable(parseInt(month, 10));
|
||||
|
||||
if (isSome(newVal)) {
|
||||
monthRef.value = newVal.value;
|
||||
}
|
||||
} else {
|
||||
monthRef.value = month;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function getSetYear(yearRef) {
|
||||
return year => {
|
||||
if (isString(year)) {
|
||||
const newVal = fromNullable(parseInt(year, 10));
|
||||
|
||||
if (isSome(newVal)) {
|
||||
yearRef.value = newVal.value;
|
||||
}
|
||||
} else {
|
||||
yearRef.value = year;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const toggleSerialDate = toggleListItem(eqSerialDate);
|
||||
export default defineComponent({
|
||||
name: 'b-datepicker',
|
||||
props: BDatepickerPropsDefinition,
|
||||
|
||||
setup(props, context) {
|
||||
const fieldData = useFieldData();
|
||||
const isDisabled = useDisable(props);
|
||||
const dropdown = shallowRef(null);
|
||||
const internalValue = shallowRef(props.modelValue);
|
||||
watch(() => props.modelValue, newVal => {
|
||||
internalValue.value = newVal;
|
||||
});
|
||||
const modelValue = computed({
|
||||
get() {
|
||||
return internalValue.value;
|
||||
},
|
||||
|
||||
set(val) {
|
||||
if (!val) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (Array.isArray(val) && props.isMultiple || isDate(val)) {
|
||||
props['onUpdate:modelValue'](val);
|
||||
internalValue.value = val;
|
||||
} else if (props.isMultiple && isDate(val)) {
|
||||
const newVal = toggleSerialDate(val, internalValue.value == undefined ? [] : Array.isArray(internalValue.value) ? internalValue.value : [internalValue.value]);
|
||||
props['onUpdate:modelValue'](newVal);
|
||||
internalValue.value = newVal;
|
||||
} else if (Array.isArray(val) && isNonEmpty(val)) {
|
||||
props['onUpdate:modelValue'](val[0]);
|
||||
internalValue.value = val[0];
|
||||
}
|
||||
|
||||
if (props.closeOnSelect) {
|
||||
dropdown.value && dropdown.value.toggle.setOff();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
const focusedDate = useEqRef(getEq(eqSerialDate))(pipe(fromNullable(props.modelValue), chain(v => Array.isArray(v) ? head(v) : some(v)), alt(() => some(new Date()))));
|
||||
const {
|
||||
value: month
|
||||
} = useProxy(toRef(props, 'month'), toRef(props, 'onUpdate:month'));
|
||||
const {
|
||||
value: year
|
||||
} = useProxy(toRef(props, 'year'), toRef(props, 'onUpdate:year'));
|
||||
const nextMonth = getSetNextMonth(props, month, year);
|
||||
const previousMonth = getSetPreviousMonth(props, month, year);
|
||||
const setMonth = getSetMonth(month);
|
||||
const setYear = getSetYear(year);
|
||||
|
||||
function onKeydown(e) {
|
||||
if (dropdown.value === undefined || dropdown.value?.$el === undefined || !dropdown.value.$el.contains(e.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isEscEvent(e)) {
|
||||
dropdown.value && dropdown.value.toggle.setOff();
|
||||
return;
|
||||
}
|
||||
|
||||
const fd = pipe(focusedDate.value, alt(() => pipe(fromNullable(modelValue.value), chain(v => Array.isArray(v) ? head(v) : some(v)))));
|
||||
|
||||
if (isNone(fd)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isEnterEvent(e) || isSpaceEvent(e)) {
|
||||
e.preventDefault();
|
||||
modelValue.value = fd.value;
|
||||
} else if (isArrowUpEvent(e)) {
|
||||
e.preventDefault();
|
||||
focusedDate.value = some(addDays(fd.value, -7));
|
||||
} else if (isArrowRightEvent(e)) {
|
||||
e.preventDefault();
|
||||
focusedDate.value = some(addDays(fd.value, 1));
|
||||
} else if (isArrowDownEvent(e)) {
|
||||
e.preventDefault();
|
||||
focusedDate.value = some(addDays(fd.value, 7));
|
||||
} else if (isArrowLeftEvent(e)) {
|
||||
e.preventDefault();
|
||||
focusedDate.value = some(addDays(fd.value, -1));
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
document.addEventListener('keyup', onKeydown);
|
||||
}
|
||||
});
|
||||
onUnmounted(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
document.removeEventListener('keyup', onKeydown);
|
||||
}
|
||||
});
|
||||
watch(focusedDate, fd => {
|
||||
const m = month.value;
|
||||
const y = year.value;
|
||||
|
||||
if (isSome(fd)) {
|
||||
const fdValue = fd.value;
|
||||
const nMonth = fdValue.getMonth();
|
||||
|
||||
if (nMonth !== m) {
|
||||
month.value = nMonth;
|
||||
}
|
||||
|
||||
const nYear = fdValue.getFullYear();
|
||||
|
||||
if (nYear !== y) {
|
||||
year.value = nYear;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
immediate: true
|
||||
});
|
||||
return () => {
|
||||
const data = {
|
||||
modelValue,
|
||||
month,
|
||||
year,
|
||||
isDisabled: isDisabled.value,
|
||||
focusedDate: focusedDate,
|
||||
nextMonth,
|
||||
previousMonth,
|
||||
setMonth,
|
||||
setYear,
|
||||
months: getMonths(props, month.value),
|
||||
years: getYears(props, year.value)
|
||||
};
|
||||
return h('article', {
|
||||
class: ['b-datepicker control', props.size, {
|
||||
'is-expanded': props.isExpanded || fieldData.attrs.isExpanded.value
|
||||
}]
|
||||
}, [useNative(props) ? generateInput(props, context, data) : generateDropdown(props, context, data, dropdown)]);
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
//# sourceMappingURL=BDatepicker.js.map
|
||||
Generated
Vendored
Executable
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
Executable
+183
@@ -0,0 +1,183 @@
|
||||
import './datepicker.sass';
|
||||
import { DateEvent, MonthNumber } from './shared';
|
||||
import { WeekdayNumber } from './utils';
|
||||
import { FunctionN } from 'fp-ts/lib/function';
|
||||
import { Option } from 'fp-ts/lib/Option';
|
||||
import { PropType, VNode, ExtractPropTypes } from 'vue';
|
||||
export declare const BDatepickerTablePropsDefinition: {
|
||||
modelValue: {
|
||||
type: PropType<Date | Date[]>;
|
||||
};
|
||||
'onUpdate:modelValue': {
|
||||
type: PropType<FunctionN<[Date | Date[]], void>>;
|
||||
required: true;
|
||||
};
|
||||
focusedDate: {
|
||||
type: PropType<Option<Date>>;
|
||||
required: true;
|
||||
};
|
||||
'onUpdate:focusedDate': {
|
||||
type: PropType<FunctionN<[Option<Date>], unknown>>;
|
||||
required: true;
|
||||
};
|
||||
month: {
|
||||
type: PropType<MonthNumber>;
|
||||
required: true;
|
||||
};
|
||||
year: {
|
||||
type: NumberConstructor;
|
||||
required: true;
|
||||
};
|
||||
dayNames: {
|
||||
type: PropType<string[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<string[]>;
|
||||
};
|
||||
monthNames: {
|
||||
type: PropType<string[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<string[]>;
|
||||
};
|
||||
firstDayOfWeek: {
|
||||
type: PropType<WeekdayNumber>;
|
||||
default: 0;
|
||||
};
|
||||
events: {
|
||||
type: PropType<DateEvent[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
indicators: {
|
||||
type: PropType<import("./shared").EventIndicator>;
|
||||
required: true;
|
||||
};
|
||||
minDate: {
|
||||
type: PropType<Date>;
|
||||
required: boolean;
|
||||
};
|
||||
maxDate: {
|
||||
type: PropType<Date>;
|
||||
required: boolean;
|
||||
};
|
||||
isDisabled: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
unselectableDates: {
|
||||
type: PropType<Date[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
unselectableDaysOfWeek: {
|
||||
type: PropType<number[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
selectableDates: {
|
||||
type: PropType<Date[]>;
|
||||
};
|
||||
showWeekNumber: {
|
||||
type: PropType<boolean>;
|
||||
default: false;
|
||||
};
|
||||
};
|
||||
export declare type BDatepickerTableProps = ExtractPropTypes<typeof BDatepickerTablePropsDefinition>;
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
modelValue: {
|
||||
type: PropType<Date | Date[]>;
|
||||
};
|
||||
'onUpdate:modelValue': {
|
||||
type: PropType<FunctionN<[Date | Date[]], void>>;
|
||||
required: true;
|
||||
};
|
||||
focusedDate: {
|
||||
type: PropType<Option<Date>>;
|
||||
required: true;
|
||||
};
|
||||
'onUpdate:focusedDate': {
|
||||
type: PropType<FunctionN<[Option<Date>], unknown>>;
|
||||
required: true;
|
||||
};
|
||||
month: {
|
||||
type: PropType<MonthNumber>;
|
||||
required: true;
|
||||
};
|
||||
year: {
|
||||
type: NumberConstructor;
|
||||
required: true;
|
||||
};
|
||||
dayNames: {
|
||||
type: PropType<string[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<string[]>;
|
||||
};
|
||||
monthNames: {
|
||||
type: PropType<string[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<string[]>;
|
||||
};
|
||||
firstDayOfWeek: {
|
||||
type: PropType<WeekdayNumber>;
|
||||
default: 0;
|
||||
};
|
||||
events: {
|
||||
type: PropType<DateEvent[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
indicators: {
|
||||
type: PropType<import("./shared").EventIndicator>;
|
||||
required: true;
|
||||
};
|
||||
minDate: {
|
||||
type: PropType<Date>;
|
||||
required: boolean;
|
||||
};
|
||||
maxDate: {
|
||||
type: PropType<Date>;
|
||||
required: boolean;
|
||||
};
|
||||
isDisabled: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
unselectableDates: {
|
||||
type: PropType<Date[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
unselectableDaysOfWeek: {
|
||||
type: PropType<number[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
selectableDates: {
|
||||
type: PropType<Date[]>;
|
||||
};
|
||||
showWeekNumber: {
|
||||
type: PropType<boolean>;
|
||||
default: false;
|
||||
};
|
||||
}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
|
||||
isDisabled: boolean;
|
||||
"onUpdate:modelValue": FunctionN<[Date | Date[]], void>;
|
||||
events: DateEvent[];
|
||||
focusedDate: Option<Date>;
|
||||
"onUpdate:focusedDate": FunctionN<[Option<Date>], unknown>;
|
||||
indicators: import("./shared").EventIndicator;
|
||||
showWeekNumber: boolean;
|
||||
month: MonthNumber;
|
||||
unselectableDates: Date[];
|
||||
unselectableDaysOfWeek: number[];
|
||||
year: number;
|
||||
dayNames: string[];
|
||||
monthNames: string[];
|
||||
firstDayOfWeek: WeekdayNumber;
|
||||
} & {
|
||||
modelValue?: Date | Date[] | undefined;
|
||||
minDate?: Date | undefined;
|
||||
maxDate?: Date | undefined;
|
||||
selectableDates?: Date[] | undefined;
|
||||
}>, {
|
||||
isDisabled: boolean;
|
||||
events: DateEvent[];
|
||||
showWeekNumber: boolean;
|
||||
unselectableDates: Date[];
|
||||
unselectableDaysOfWeek: number[];
|
||||
dayNames: string[];
|
||||
monthNames: string[];
|
||||
firstDayOfWeek: WeekdayNumber;
|
||||
}>;
|
||||
export default _default;
|
||||
Generated
Vendored
Executable
+186
@@ -0,0 +1,186 @@
|
||||
import "../../../../src/components/form/datepicker/datepicker.sass";
|
||||
import { DEFAULT_DAY_NAMES, DEFAULT_MONTH_NAMES } from './shared';
|
||||
import { addDays, getDatesInWeek, getEndOfMonth, getEndOfWeek, getStartOfMonth, getStartOfWeek, isDate, isOnOrAfterDate, isOnOrBeforeDate, isWithinWeek } from './utils';
|
||||
import { constEmptyArray } from '../../../utils/helpers';
|
||||
import { isEmpty, rotate } from 'fp-ts/lib/Array';
|
||||
import { constant } from 'fp-ts/lib/function';
|
||||
import { fromNullable, isNone, none } from 'fp-ts/lib/Option';
|
||||
import { defineComponent, h, computed } from 'vue';
|
||||
import BDatepickerTableRow from './BDatepickerTableRow';
|
||||
export const BDatepickerTablePropsDefinition = {
|
||||
modelValue: {
|
||||
type: [Array, Date]
|
||||
},
|
||||
'onUpdate:modelValue': {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
focusedDate: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
'onUpdate:focusedDate': {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
month: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
year: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
dayNames: {
|
||||
type: Array,
|
||||
default: constant(DEFAULT_DAY_NAMES)
|
||||
},
|
||||
monthNames: {
|
||||
type: Array,
|
||||
default: constant(DEFAULT_MONTH_NAMES)
|
||||
},
|
||||
firstDayOfWeek: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
events: {
|
||||
type: Array,
|
||||
default: constEmptyArray
|
||||
},
|
||||
indicators: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
minDate: {
|
||||
type: Date,
|
||||
required: false
|
||||
},
|
||||
maxDate: {
|
||||
type: Date,
|
||||
required: false
|
||||
},
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
unselectableDates: {
|
||||
type: Array,
|
||||
default: constEmptyArray
|
||||
},
|
||||
unselectableDaysOfWeek: {
|
||||
type: Array,
|
||||
default: constEmptyArray
|
||||
},
|
||||
selectableDates: {
|
||||
type: Object
|
||||
},
|
||||
showWeekNumber: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
};
|
||||
|
||||
function getWeeksWithinMonth(props) {
|
||||
const startOfMonth = getStartOfMonth(new Date(props.year, props.month + 1, 0));
|
||||
const endOfCalendar = getEndOfWeek(getEndOfMonth(startOfMonth), props.firstDayOfWeek);
|
||||
const weeks = [];
|
||||
let date = getStartOfWeek(startOfMonth, props.firstDayOfWeek);
|
||||
|
||||
while (isOnOrBeforeDate(date, endOfCalendar)) {
|
||||
weeks.push(getDatesInWeek(date, props.firstDayOfWeek));
|
||||
date = addDays(date, 7);
|
||||
}
|
||||
|
||||
return weeks;
|
||||
}
|
||||
|
||||
function getEventsWithinWeek(props, week) {
|
||||
return props.events.filter(event => {
|
||||
const eventDate = isDate(event) ? event : event.date;
|
||||
return isWithinWeek(week[0], eventDate, props.firstDayOfWeek);
|
||||
});
|
||||
}
|
||||
|
||||
function getWeeks(props) {
|
||||
return getWeeksWithinMonth(props).map((week, weekNumber) => ({
|
||||
week,
|
||||
weekNumber,
|
||||
events: getEventsWithinWeek(props, week)
|
||||
}));
|
||||
}
|
||||
|
||||
function generateTableHeader(dayNames) {
|
||||
return h('thead', {
|
||||
class: 'datepicker-header'
|
||||
}, [h('tr', dayNames.map(day => h('th', {
|
||||
key: day,
|
||||
class: 'datepicker-cell'
|
||||
}, day)))]);
|
||||
}
|
||||
|
||||
function getGenerateTableRow(props, focusedDate) {
|
||||
return function generateTableRow(weekData) {
|
||||
return h(BDatepickerTableRow, {
|
||||
key: weekData.weekNumber,
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': props['onUpdate:modelValue'],
|
||||
focusedDate: focusedDate.value,
|
||||
'onUpdate:focusedDate': val => {
|
||||
focusedDate.value = val;
|
||||
},
|
||||
week: weekData.week,
|
||||
weekNumber: weekData.weekNumber,
|
||||
month: props.month,
|
||||
minDate: fromNullable(props.minDate),
|
||||
maxDate: fromNullable(props.maxDate),
|
||||
unselectableDates: props.unselectableDates,
|
||||
unselectableDaysOfWeek: props.unselectableDaysOfWeek,
|
||||
selectableDates: fromNullable(props.selectableDates),
|
||||
events: weekData.events,
|
||||
indicators: props.indicators
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function generateTableBody(props, focusedDate) {
|
||||
return h('tbody', {
|
||||
class: ['datepicker-body', {
|
||||
'has-events': !isEmpty(props.events)
|
||||
}]
|
||||
}, getWeeks(props).map(getGenerateTableRow(props, focusedDate)));
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'b-datepicker-table',
|
||||
props: BDatepickerTablePropsDefinition,
|
||||
|
||||
setup(props) {
|
||||
const focusedDate = computed({
|
||||
get() {
|
||||
return props.focusedDate;
|
||||
},
|
||||
|
||||
set(date) {
|
||||
if (isNone(date)) {
|
||||
props['onUpdate:focusedDate'](date);
|
||||
} else if (props.minDate && props.maxDate) {
|
||||
props['onUpdate:focusedDate'](isOnOrAfterDate(date.value, props.minDate) && isOnOrBeforeDate(date.value, props.maxDate) ? date : none);
|
||||
} else if (props.minDate) {
|
||||
props['onUpdate:focusedDate'](isOnOrAfterDate(date.value, props.minDate) ? date : none);
|
||||
} else if (props.maxDate) {
|
||||
props['onUpdate:focusedDate'](isOnOrBeforeDate(date.value, props.maxDate) ? date : none);
|
||||
} else {
|
||||
props['onUpdate:focusedDate'](date);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
return () => {
|
||||
return h('table', {
|
||||
class: 'datepicker-table'
|
||||
}, [generateTableHeader(rotate(-props.firstDayOfWeek)(props.dayNames)), generateTableBody(props, focusedDate)]);
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
//# sourceMappingURL=BDatepickerTable.js.map
|
||||
Generated
Vendored
Executable
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
Executable
+41
@@ -0,0 +1,41 @@
|
||||
import './datepicker.sass';
|
||||
import { FunctionN } from 'fp-ts/lib/function';
|
||||
import { DateCell, EventIndicator } from './shared';
|
||||
import { Option } from 'fp-ts/lib/Option';
|
||||
import { PropType, VNode } from 'vue';
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
modelValue: {
|
||||
type: PropType<Date | Date[]>;
|
||||
};
|
||||
'onUpdate:modelValue': {
|
||||
type: PropType<FunctionN<[Date | Date[]], void>>;
|
||||
required: true;
|
||||
};
|
||||
focusedDate: {
|
||||
type: PropType<Option<Date>>;
|
||||
required: true;
|
||||
};
|
||||
'onUpdate:focusedDate': {
|
||||
type: PropType<FunctionN<[Option<Date>], void>>;
|
||||
required: true;
|
||||
};
|
||||
indicators: {
|
||||
type: PropType<EventIndicator>;
|
||||
required: true;
|
||||
};
|
||||
cell: {
|
||||
type: PropType<DateCell>;
|
||||
required: true;
|
||||
};
|
||||
}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
|
||||
"onUpdate:modelValue": FunctionN<[Date | Date[]], void>;
|
||||
focusedDate: Option<Date>;
|
||||
"onUpdate:focusedDate": FunctionN<[Option<Date>], void>;
|
||||
indicators: EventIndicator;
|
||||
cell: DateCell;
|
||||
} & {
|
||||
modelValue?: Date | Date[] | undefined;
|
||||
}>, {}>;
|
||||
export default _default;
|
||||
Generated
Vendored
Executable
+84
@@ -0,0 +1,84 @@
|
||||
import "../../../../src/components/form/datepicker/datepicker.sass";
|
||||
import { toggleListItem } from '../../../utils/helpers';
|
||||
import { eqSerialDate, isSameDay } from './utils';
|
||||
import { exists, getEq, some } from 'fp-ts/lib/Option';
|
||||
import { pipe } from 'fp-ts/lib/pipeable';
|
||||
import { defineComponent, shallowRef, h, watch, onMounted } from 'vue';
|
||||
|
||||
function generateEvents(events) {
|
||||
return h('div', {
|
||||
class: 'events'
|
||||
}, events.map((event, index) => h('div', {
|
||||
key: index,
|
||||
class: ['event', event.variant]
|
||||
})));
|
||||
}
|
||||
|
||||
const toggleSerialDate = toggleListItem(eqSerialDate);
|
||||
const eqOptionSerialDate = getEq(eqSerialDate);
|
||||
export default defineComponent({
|
||||
name: 'b-datepicker-table-cell',
|
||||
props: {
|
||||
modelValue: {
|
||||
type: [Date, Array]
|
||||
},
|
||||
'onUpdate:modelValue': {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
focusedDate: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
'onUpdate:focusedDate': {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
indicators: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
cell: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const buttonRef = shallowRef(null);
|
||||
|
||||
function onClick(e) {
|
||||
e && e.preventDefault();
|
||||
const currentValue = props.modelValue;
|
||||
props['onUpdate:modelValue'](Array.isArray(currentValue) ? toggleSerialDate(props.cell.date, currentValue) : props.cell.date);
|
||||
}
|
||||
|
||||
const onFocus = () => {
|
||||
props['onUpdate:focusedDate'](some(props.cell.date));
|
||||
};
|
||||
|
||||
onMounted(() => watch(() => props.focusedDate, (newVal, oldVal) => {
|
||||
if ((oldVal && !eqOptionSerialDate.equals(newVal, oldVal) || oldVal === undefined) && buttonRef.value && pipe(newVal, exists(d => isSameDay(d, props.cell.date))) && document.activeElement !== buttonRef.value) {
|
||||
buttonRef.value.focus({
|
||||
preventScroll: true
|
||||
});
|
||||
}
|
||||
}, {
|
||||
immediate: true
|
||||
}));
|
||||
return () => {
|
||||
return h('td', [h('button', {
|
||||
ref: buttonRef,
|
||||
class: ['datepicker-cell', props.cell.classes, props.indicators],
|
||||
disabled: props.cell.isDisabled,
|
||||
tabindex: props.cell.isDisabled || props.cell.isSelected ? -1 : 0,
|
||||
'aria-label': props.cell.ariaLabel,
|
||||
onClick,
|
||||
onFocus,
|
||||
onMouseenter: onFocus
|
||||
}, [props.cell.date.getDate(), props.cell.hasEvents ? generateEvents(props.cell.events) : undefined])]);
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
//# sourceMappingURL=BDatepickerTableCell.js.map
|
||||
Generated
Vendored
Executable
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
Executable
+164
@@ -0,0 +1,164 @@
|
||||
import './datepicker.sass';
|
||||
import { DateEvent } from './shared';
|
||||
import { FunctionN } from 'fp-ts/lib/function';
|
||||
import { Option } from 'fp-ts/lib/Option';
|
||||
import { PropType, VNode, ExtractPropTypes } from 'vue';
|
||||
export declare const BDatepickerTableRowPropsDefinition: {
|
||||
modelValue: {
|
||||
type: PropType<Date | Date[]>;
|
||||
};
|
||||
'onUpdate:modelValue': {
|
||||
type: PropType<FunctionN<[Date | Date[]], void>>;
|
||||
required: true;
|
||||
};
|
||||
focusedDate: {
|
||||
type: PropType<Option<Date>>;
|
||||
required: true;
|
||||
};
|
||||
'onUpdate:focusedDate': {
|
||||
type: PropType<FunctionN<[Option<Date>], unknown>>;
|
||||
required: true;
|
||||
};
|
||||
showWeekNumber: {
|
||||
type: PropType<boolean>;
|
||||
default: false;
|
||||
};
|
||||
weekNumber: {
|
||||
type: PropType<number>;
|
||||
required: true;
|
||||
};
|
||||
week: {
|
||||
type: PropType<Date[]>;
|
||||
required: true;
|
||||
};
|
||||
month: {
|
||||
type: PropType<number>;
|
||||
required: true;
|
||||
};
|
||||
minDate: {
|
||||
type: PropType<Option<Date>>;
|
||||
required: true;
|
||||
};
|
||||
maxDate: {
|
||||
type: PropType<Option<Date>>;
|
||||
required: true;
|
||||
};
|
||||
isDisabled: {
|
||||
type: PropType<boolean>;
|
||||
default: false;
|
||||
};
|
||||
unselectableDates: {
|
||||
type: PropType<Date[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
unselectableDaysOfWeek: {
|
||||
type: PropType<number[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
selectableDates: {
|
||||
type: PropType<Option<Date[]>>;
|
||||
default: import("fp-ts/lib/function").Lazy<Option<never>>;
|
||||
};
|
||||
events: {
|
||||
type: PropType<DateEvent[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
indicators: {
|
||||
type: PropType<import("./shared").EventIndicator>;
|
||||
required: true;
|
||||
};
|
||||
};
|
||||
export declare type BDatePickerTableRowProps = ExtractPropTypes<typeof BDatepickerTableRowPropsDefinition>;
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
modelValue: {
|
||||
type: PropType<Date | Date[]>;
|
||||
};
|
||||
'onUpdate:modelValue': {
|
||||
type: PropType<FunctionN<[Date | Date[]], void>>;
|
||||
required: true;
|
||||
};
|
||||
focusedDate: {
|
||||
type: PropType<Option<Date>>;
|
||||
required: true;
|
||||
};
|
||||
'onUpdate:focusedDate': {
|
||||
type: PropType<FunctionN<[Option<Date>], unknown>>;
|
||||
required: true;
|
||||
};
|
||||
showWeekNumber: {
|
||||
type: PropType<boolean>;
|
||||
default: false;
|
||||
};
|
||||
weekNumber: {
|
||||
type: PropType<number>;
|
||||
required: true;
|
||||
};
|
||||
week: {
|
||||
type: PropType<Date[]>;
|
||||
required: true;
|
||||
};
|
||||
month: {
|
||||
type: PropType<number>;
|
||||
required: true;
|
||||
};
|
||||
minDate: {
|
||||
type: PropType<Option<Date>>;
|
||||
required: true;
|
||||
};
|
||||
maxDate: {
|
||||
type: PropType<Option<Date>>;
|
||||
required: true;
|
||||
};
|
||||
isDisabled: {
|
||||
type: PropType<boolean>;
|
||||
default: false;
|
||||
};
|
||||
unselectableDates: {
|
||||
type: PropType<Date[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
unselectableDaysOfWeek: {
|
||||
type: PropType<number[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
selectableDates: {
|
||||
type: PropType<Option<Date[]>>;
|
||||
default: import("fp-ts/lib/function").Lazy<Option<never>>;
|
||||
};
|
||||
events: {
|
||||
type: PropType<DateEvent[]>;
|
||||
default: import("fp-ts/lib/function").Lazy<never[]>;
|
||||
};
|
||||
indicators: {
|
||||
type: PropType<import("./shared").EventIndicator>;
|
||||
required: true;
|
||||
};
|
||||
}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
|
||||
isDisabled: boolean;
|
||||
"onUpdate:modelValue": FunctionN<[Date | Date[]], void>;
|
||||
events: DateEvent[];
|
||||
focusedDate: Option<Date>;
|
||||
"onUpdate:focusedDate": FunctionN<[Option<Date>], unknown>;
|
||||
indicators: import("./shared").EventIndicator;
|
||||
showWeekNumber: boolean;
|
||||
weekNumber: number;
|
||||
week: Date[];
|
||||
month: number;
|
||||
minDate: Option<Date>;
|
||||
maxDate: Option<Date>;
|
||||
unselectableDates: Date[];
|
||||
unselectableDaysOfWeek: number[];
|
||||
selectableDates: Option<Date[]>;
|
||||
} & {
|
||||
modelValue?: Date | Date[] | undefined;
|
||||
}>, {
|
||||
isDisabled: boolean;
|
||||
events: DateEvent[];
|
||||
showWeekNumber: boolean;
|
||||
unselectableDates: Date[];
|
||||
unselectableDaysOfWeek: number[];
|
||||
selectableDates: Option<Date[]>;
|
||||
}>;
|
||||
export default _default;
|
||||
Generated
Vendored
Executable
+202
@@ -0,0 +1,202 @@
|
||||
import "../../../../src/components/form/datepicker/datepicker.sass";
|
||||
import BDatepickerTableCell from './BDatepickerTableCell';
|
||||
import { elemSerialDate, isDate, isOnOrAfterDate, isOnOrBeforeDate, isSameDay } from './utils';
|
||||
import { constEmptyArray, constNone } from '../../../utils/helpers';
|
||||
import { isNonEmpty } from 'fp-ts/lib/Array';
|
||||
import { constTrue, identity } from 'fp-ts/lib/function';
|
||||
import { fold } from 'fp-ts/lib/Option';
|
||||
import { pipe } from 'fp-ts/lib/pipeable';
|
||||
import { defineComponent, computed, h } from 'vue';
|
||||
export const BDatepickerTableRowPropsDefinition = {
|
||||
modelValue: {
|
||||
type: [Date, Array]
|
||||
},
|
||||
'onUpdate:modelValue': {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
focusedDate: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
'onUpdate:focusedDate': {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
showWeekNumber: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
weekNumber: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
week: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
month: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
minDate: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
maxDate: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
unselectableDates: {
|
||||
type: Array,
|
||||
default: constEmptyArray
|
||||
},
|
||||
unselectableDaysOfWeek: {
|
||||
type: Array,
|
||||
default: constEmptyArray
|
||||
},
|
||||
selectableDates: {
|
||||
type: Object,
|
||||
default: constNone
|
||||
},
|
||||
events: {
|
||||
type: Array,
|
||||
default: constEmptyArray
|
||||
},
|
||||
indicators: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
};
|
||||
|
||||
function getIsAfterMinDate(props) {
|
||||
return function isAfterMinDate(date) {
|
||||
return pipe(props.minDate, fold(constTrue, d => isOnOrAfterDate(date, d)));
|
||||
};
|
||||
}
|
||||
|
||||
function getIsBeforeMaxDate(props) {
|
||||
return function isBeforeMaxDate(date) {
|
||||
return pipe(props.maxDate, fold(constTrue, d => isOnOrBeforeDate(date, d)));
|
||||
};
|
||||
}
|
||||
|
||||
function getIsWithinMonth(props) {
|
||||
return function isWithinMonth(date) {
|
||||
return date.getMonth() === props.month;
|
||||
};
|
||||
}
|
||||
|
||||
function getIsEnabled(props) {
|
||||
return function isEnabled(date) {
|
||||
return !elemSerialDate(date, props.unselectableDates) && pipe(props.selectableDates, fold(constTrue, dates => elemSerialDate(date, dates)));
|
||||
};
|
||||
}
|
||||
|
||||
function getIsOnSelectableDayOfWeek(props) {
|
||||
return function isOnSelectableDayOfWeek(date) {
|
||||
return !props.unselectableDaysOfWeek.includes(date.getDay());
|
||||
};
|
||||
}
|
||||
|
||||
function getDatePredicates(props) {
|
||||
const isAfterMinDate = getIsAfterMinDate(props);
|
||||
const isBeforeMaxDate = getIsBeforeMaxDate(props);
|
||||
const isWithinMonth = getIsWithinMonth(props);
|
||||
const isEnabled = getIsEnabled(props);
|
||||
const isOnSelectableDayOfWeek = getIsOnSelectableDayOfWeek(props);
|
||||
|
||||
function isSelectedDate(date) {
|
||||
return Array.isArray(props.modelValue) ? props.modelValue.some(d => isSameDay(d, date)) : props.modelValue ? isSameDay(props.modelValue, date) : false;
|
||||
}
|
||||
|
||||
function isSelectableDate(date) {
|
||||
return [isAfterMinDate(date), isBeforeMaxDate(date), isWithinMonth(date), isEnabled(date), isOnSelectableDayOfWeek(date)].every(identity);
|
||||
}
|
||||
|
||||
return {
|
||||
isAfterMinDate,
|
||||
isBeforeMaxDate,
|
||||
isWithinMonth,
|
||||
isEnabled,
|
||||
isOnSelectableDayOfWeek,
|
||||
isSelectableDate,
|
||||
isSelectedDate
|
||||
};
|
||||
}
|
||||
|
||||
function getDateClassesGenerator(props, predicates) {
|
||||
const today = new Date();
|
||||
return function getDateClasses(date, hasEvents = false) {
|
||||
if (isDate(date)) {
|
||||
const isSelectable = predicates.isSelectableDate(date);
|
||||
return {
|
||||
'is-selected': predicates.isSelectedDate(date),
|
||||
'is-today': isSameDay(date, today),
|
||||
'is-selectable': isSelectable && !props.isDisabled,
|
||||
'is-unselectable': !isSelectable || props.isDisabled,
|
||||
'has-event': hasEvents
|
||||
};
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function generateWeekNumber(weekNumber) {
|
||||
return h('td', [`${weekNumber}`]);
|
||||
}
|
||||
|
||||
function getGenerateCell(props) {
|
||||
return function generateCell(cell) {
|
||||
return h(BDatepickerTableCell, {
|
||||
key: cell.date.toLocaleDateString(),
|
||||
cell,
|
||||
modelValue: props.modelValue,
|
||||
'onUpdate:modelValue': props['onUpdate:modelValue'],
|
||||
focusedDate: props.focusedDate,
|
||||
'onUpdate:focusedDate': props['onUpdate:focusedDate'],
|
||||
indicators: props.indicators
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'b-datepicker-table-row',
|
||||
props: BDatepickerTableRowPropsDefinition,
|
||||
|
||||
setup(props) {
|
||||
const formattedEvents = computed(() => props.events.map(event => isDate(event) ? {
|
||||
date: event,
|
||||
variant: 'is-primary'
|
||||
} : event));
|
||||
const predicates = getDatePredicates(props);
|
||||
const getDateClasses = getDateClassesGenerator(props, predicates);
|
||||
const cells = computed(() => props.week.map(date => {
|
||||
const events = formattedEvents.value.filter(event => isSameDay(date, event.date));
|
||||
const hasEvents = isNonEmpty(events);
|
||||
return {
|
||||
date,
|
||||
events,
|
||||
hasEvents,
|
||||
isSelected: predicates.isSelectedDate(date),
|
||||
isDisabled: props.isDisabled || !predicates.isSelectableDate(date),
|
||||
number: date.getDate(),
|
||||
ariaLabel: date.toLocaleDateString(),
|
||||
classes: getDateClasses(date, hasEvents)
|
||||
};
|
||||
}));
|
||||
const generateCell = getGenerateCell(props);
|
||||
return () => {
|
||||
return h('tr', {
|
||||
class: 'datepicker-row'
|
||||
}, props.showWeekNumber ? [generateWeekNumber(props.weekNumber), ...cells.value.map(generateCell)] : cells.value.map(generateCell));
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
//# sourceMappingURL=BDatepickerTableRow.js.map
|
||||
Generated
Vendored
Executable
+1
File diff suppressed because one or more lines are too long
+3
@@ -0,0 +1,3 @@
|
||||
import BDatepicker from './BDatepicker';
|
||||
export default BDatepicker;
|
||||
export { BDatepicker };
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import BDatepicker from './BDatepicker';
|
||||
export default BDatepicker;
|
||||
export { BDatepicker };
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../src/components/form/datepicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAP,MAAwB,eAAxB;AAEA,eAAe,WAAf;AAEA,SAAS,WAAT","sourcesContent":["import BDatepicker from './BDatepicker';\n\nexport default BDatepicker;\n\nexport { BDatepicker };\n"],"sourceRoot":"","file":"index.js"}
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
import { ColorVariant } from '../../../types/ColorVariants';
|
||||
export declare type DateEvent = Date | DetailedDateEvent;
|
||||
export interface DetailedDateEvent {
|
||||
date: Date;
|
||||
variant: ColorVariant;
|
||||
}
|
||||
export declare type EventIndicator = 'dots' | 'bars';
|
||||
export declare const DEFAULT_DAY_NAMES: string[];
|
||||
export declare const DEFAULT_MONTH_NAMES: string[];
|
||||
export declare type MonthNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
|
||||
export interface DateCell {
|
||||
date: Date;
|
||||
number: number;
|
||||
ariaLabel: string;
|
||||
isDisabled: boolean;
|
||||
isSelected: boolean;
|
||||
events: DetailedDateEvent[];
|
||||
hasEvents: boolean;
|
||||
classes: object;
|
||||
}
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export const DEFAULT_DAY_NAMES = ['Su', 'M', 'Tu', 'W', 'Th', 'F', 'S'];
|
||||
export const DEFAULT_MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
//# sourceMappingURL=shared.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../src/components/form/datepicker/shared.ts"],"names":[],"mappings":"AAWA,OAAO,MAAM,iBAAiB,GAAG,CAAC,IAAD,EAAO,GAAP,EAAY,IAAZ,EAAkB,GAAlB,EAAuB,IAAvB,EAA6B,GAA7B,EAAkC,GAAlC,CAA1B;AAEP,OAAO,MAAM,mBAAmB,GAAG,CACjC,SADiC,EAEjC,UAFiC,EAGjC,OAHiC,EAIjC,OAJiC,EAKjC,KALiC,EAMjC,MANiC,EAOjC,MAPiC,EAQjC,QARiC,EASjC,WATiC,EAUjC,SAViC,EAWjC,UAXiC,EAYjC,UAZiC,CAA5B","sourcesContent":["import { ColorVariant } from '../../../types/ColorVariants';\n\nexport type DateEvent = Date | DetailedDateEvent;\n\nexport interface DetailedDateEvent {\n date: Date;\n variant: ColorVariant;\n}\n\nexport type EventIndicator = 'dots' | 'bars';\n\nexport const DEFAULT_DAY_NAMES = ['Su', 'M', 'Tu', 'W', 'Th', 'F', 'S'];\n\nexport const DEFAULT_MONTH_NAMES = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December'\n];\n\nexport type MonthNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;\n\nexport interface DateCell {\n date: Date;\n number: number;\n ariaLabel: string;\n isDisabled: boolean;\n isSelected: boolean;\n events: DetailedDateEvent[];\n hasEvents: boolean;\n classes: object;\n}\n"],"sourceRoot":"","file":"shared.js"}
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
import { Eq } from 'fp-ts/lib/Eq';
|
||||
import { Ord } from 'fp-ts/lib/Ord';
|
||||
export declare function isDate(value: unknown): value is Date;
|
||||
export declare function getStartOfDay(date: Date): Date;
|
||||
export declare function getEndOfDay(date: Date): Date;
|
||||
export declare function isSameDay(x: Date, y: Date): boolean;
|
||||
export declare function isBeforeDay(date: Date, isBefore: Date): boolean;
|
||||
export declare function isAfterDay(date: Date, isAfter: Date): boolean;
|
||||
export declare function isSameMonth(x: Date, y: Date): boolean;
|
||||
export declare const eqSerialDate: Eq<Date>;
|
||||
export declare const ordSerialDate: Ord<Date>;
|
||||
export declare const isOnOrAfterDate: (x: Date, y: Date) => boolean;
|
||||
export declare const isOnOrBeforeDate: (x: Date, y: Date) => boolean;
|
||||
export declare const elemSerialDate: {
|
||||
(a: Date): (as: Date[]) => boolean;
|
||||
(a: Date, as: Date[]): boolean;
|
||||
};
|
||||
export declare type WeekdayNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
||||
export declare function getStartOfMonth(date: Date): Date;
|
||||
export declare function getEndOfMonth(date: Date): Date;
|
||||
export declare function getStartOfWeek(date: Date, weekStartsOn?: WeekdayNumber): Date;
|
||||
export declare function getEndOfWeek(date: Date, weekStartsOn?: WeekdayNumber): Date;
|
||||
export declare function isWithinWeek(date: Date, secondDate: Date, weekStartsOn?: WeekdayNumber): boolean;
|
||||
export declare function getDaysInMonth(date: Date): number;
|
||||
export declare function addDays(date: Date, days: number): Date;
|
||||
export declare function getDatesInWeek(date: Date, weekStartsOn?: WeekdayNumber): Date[];
|
||||
export declare function addMonths(date: Date, months: number): Date;
|
||||
+108
@@ -0,0 +1,108 @@
|
||||
import { elem } from 'fp-ts/lib/Array';
|
||||
import { fromEquals } from 'fp-ts/lib/Eq';
|
||||
import { fromCompare, geq, leq } from 'fp-ts/lib/Ord';
|
||||
export function isDate(value) {
|
||||
// from date-fns
|
||||
return value instanceof Date || typeof value === 'object' && Object.prototype.toString.call(value) === '[object Date]';
|
||||
}
|
||||
export function getStartOfDay(date) {
|
||||
const clone = new Date(date.getTime());
|
||||
clone.setHours(0, 0, 0, 0);
|
||||
return clone;
|
||||
}
|
||||
export function getEndOfDay(date) {
|
||||
const clone = new Date(date.getTime());
|
||||
clone.setHours(23, 59, 59, 999);
|
||||
return clone;
|
||||
}
|
||||
export function isSameDay(x, y) {
|
||||
return getStartOfDay(x).getTime() === getStartOfDay(y).getTime();
|
||||
}
|
||||
export function isBeforeDay(date, isBefore) {
|
||||
return date.getTime() < getStartOfDay(isBefore).getTime();
|
||||
}
|
||||
export function isAfterDay(date, isAfter) {
|
||||
return date.getTime() > getEndOfDay(isAfter).getTime();
|
||||
}
|
||||
|
||||
function compareSerialDate(x, y) {
|
||||
return isBeforeDay(x, y) ? -1 : isAfterDay(x, y) ? 1 : 0;
|
||||
}
|
||||
|
||||
export function isSameMonth(x, y) {
|
||||
return x.getFullYear() === y.getFullYear() && x.getMonth() === y.getMonth();
|
||||
}
|
||||
export const eqSerialDate = fromEquals(isSameDay);
|
||||
export const ordSerialDate = fromCompare(compareSerialDate);
|
||||
export const isOnOrAfterDate = geq(ordSerialDate);
|
||||
export const isOnOrBeforeDate = leq(ordSerialDate);
|
||||
export const elemSerialDate = elem(ordSerialDate);
|
||||
export function getStartOfMonth(date) {
|
||||
const clone = new Date(date.getTime());
|
||||
clone.setDate(1);
|
||||
clone.setHours(0, 0, 0, 0);
|
||||
return clone;
|
||||
}
|
||||
export function getEndOfMonth(date) {
|
||||
const clone = new Date(date.getTime());
|
||||
const month = clone.getMonth();
|
||||
clone.setFullYear(clone.getFullYear(), month + 1, 0);
|
||||
clone.setHours(23, 59, 59, 999);
|
||||
return clone;
|
||||
}
|
||||
export function getStartOfWeek(date, weekStartsOn = 0) {
|
||||
const clone = new Date(date.getTime());
|
||||
const day = clone.getDay();
|
||||
const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
|
||||
clone.setDate(clone.getDate() - diff);
|
||||
clone.setHours(0, 0, 0, 0);
|
||||
return clone;
|
||||
}
|
||||
export function getEndOfWeek(date, weekStartsOn = 0) {
|
||||
const clone = new Date(date.getTime());
|
||||
const day = clone.getDay();
|
||||
const diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn);
|
||||
clone.setDate(clone.getDate() + diff);
|
||||
clone.setHours(23, 59, 59, 999);
|
||||
return clone;
|
||||
}
|
||||
export function isWithinWeek(date, secondDate, weekStartsOn = 0) {
|
||||
return isOnOrAfterDate(date, getStartOfWeek(secondDate, weekStartsOn)) && isOnOrBeforeDate(date, getEndOfWeek(secondDate, weekStartsOn));
|
||||
}
|
||||
export function getDaysInMonth(date) {
|
||||
const clone = new Date(date.getTime());
|
||||
const year = clone.getFullYear();
|
||||
const monthIndex = clone.getMonth();
|
||||
const lastDayOfMonth = new Date(0);
|
||||
lastDayOfMonth.setFullYear(year, monthIndex + 1, 0);
|
||||
lastDayOfMonth.setHours(0, 0, 0, 0);
|
||||
return lastDayOfMonth.getDate();
|
||||
}
|
||||
export function addDays(date, days) {
|
||||
const clone = new Date(date.getTime());
|
||||
clone.setDate(clone.getDate() + days);
|
||||
return clone;
|
||||
}
|
||||
export function getDatesInWeek(date, weekStartsOn = 0) {
|
||||
const dates = [];
|
||||
let day = getStartOfWeek(date, weekStartsOn);
|
||||
const end = getEndOfWeek(date, weekStartsOn);
|
||||
|
||||
while (isOnOrBeforeDate(day, end)) {
|
||||
dates.push(day);
|
||||
day = addDays(day, 1);
|
||||
}
|
||||
|
||||
return dates;
|
||||
}
|
||||
export function addMonths(date, months) {
|
||||
const clone = new Date(date.getTime());
|
||||
const newMonth = clone.getMonth() + months;
|
||||
const dateWithDesiredMonth = new Date(0);
|
||||
dateWithDesiredMonth.setFullYear(clone.getFullYear(), newMonth, 1);
|
||||
dateWithDesiredMonth.setHours(0, 0, 0, 0);
|
||||
const daysInMonth = getDaysInMonth(dateWithDesiredMonth);
|
||||
clone.setMonth(newMonth, Math.min(daysInMonth, clone.getDate()));
|
||||
return clone;
|
||||
}
|
||||
//# sourceMappingURL=utils.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+157
@@ -0,0 +1,157 @@
|
||||
import '../sass/tools.sass';
|
||||
import { PropType, VNode, ExtractPropTypes } from 'vue';
|
||||
import { AllColorsVariant } from '../../../types/ColorVariants';
|
||||
export declare type FieldPosition = 'is-left' | 'is-centered' | 'is-right';
|
||||
export declare const BFieldPropsDefinition: {
|
||||
isGrouped: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isGroupedMultiline: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
position: {
|
||||
type: PropType<"is-left" | "is-right" | "is-centered">;
|
||||
default: string;
|
||||
};
|
||||
isHorizontal: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
hasAddons: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
customLabelClass: {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
variant: {
|
||||
type: PropType<AllColorsVariant>;
|
||||
required: boolean;
|
||||
};
|
||||
message: {
|
||||
type: PropType<string | {
|
||||
[K: string]: boolean;
|
||||
} | (string | {
|
||||
[K: string]: boolean;
|
||||
})[]>;
|
||||
required: boolean;
|
||||
};
|
||||
isExpanded: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
labelFor: PropType<string>;
|
||||
label: {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
themeMap: {
|
||||
type: PropType<import("../../..").ThemeColorMap>;
|
||||
required: boolean;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../../..").ThemeColorMap>;
|
||||
};
|
||||
isThemeable: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
};
|
||||
export declare type BFieldProps = ExtractPropTypes<typeof BFieldPropsDefinition>;
|
||||
declare const BField: import("vue").DefineComponent<{
|
||||
isGrouped: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
isGroupedMultiline: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
position: {
|
||||
type: PropType<"is-left" | "is-right" | "is-centered">;
|
||||
default: string;
|
||||
};
|
||||
isHorizontal: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
hasAddons: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
customLabelClass: {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
variant: {
|
||||
type: PropType<AllColorsVariant>;
|
||||
required: boolean;
|
||||
};
|
||||
message: {
|
||||
type: PropType<string | {
|
||||
[K: string]: boolean;
|
||||
} | (string | {
|
||||
[K: string]: boolean;
|
||||
})[]>;
|
||||
required: boolean;
|
||||
};
|
||||
isExpanded: {
|
||||
type: PropType<boolean>;
|
||||
default: boolean;
|
||||
};
|
||||
labelFor: PropType<string>;
|
||||
label: {
|
||||
type: PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
themeMap: {
|
||||
type: PropType<import("../../..").ThemeColorMap>;
|
||||
required: boolean;
|
||||
default: import("fp-ts/lib/function").Lazy<import("../../..").ThemeColorMap>;
|
||||
};
|
||||
isThemeable: {
|
||||
type: PropType<boolean>;
|
||||
required: boolean;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../../..").ThemeColorMap;
|
||||
isExpanded: boolean;
|
||||
position: "is-left" | "is-right" | "is-centered";
|
||||
label: string;
|
||||
isGrouped: boolean;
|
||||
isGroupedMultiline: boolean;
|
||||
isHorizontal: boolean;
|
||||
hasAddons: boolean;
|
||||
customLabelClass: string;
|
||||
} & {
|
||||
variant?: "" | "is-black-ter" | "is-orange" | "is-primary" | "is-info" | "is-link" | "is-success" | "is-warning" | "is-danger" | "is-white" | "is-black" | "is-light" | "is-dark" | "is-black-bis" | "is-grey-darker" | "is-grey-dark" | "is-grey" | "is-grey-light" | "is-grey-lighter" | "is-white-ter" | "is-white-bis" | undefined;
|
||||
message?: string | {
|
||||
[K: string]: boolean;
|
||||
} | (string | {
|
||||
[K: string]: boolean;
|
||||
})[] | undefined;
|
||||
labelFor?: string | undefined;
|
||||
}>, {
|
||||
isThemeable: boolean;
|
||||
themeMap: import("../../..").ThemeColorMap;
|
||||
isExpanded: boolean;
|
||||
position: "is-left" | "is-right" | "is-centered";
|
||||
label: string;
|
||||
isGrouped: boolean;
|
||||
isGroupedMultiline: boolean;
|
||||
isHorizontal: boolean;
|
||||
hasAddons: boolean;
|
||||
customLabelClass: string;
|
||||
}>;
|
||||
export interface BFieldBodyProps {
|
||||
message?: string;
|
||||
variant?: AllColorsVariant;
|
||||
tag?: string;
|
||||
}
|
||||
export default BField;
|
||||
+164
@@ -0,0 +1,164 @@
|
||||
import "../../../../src/components/form/sass/tools.sass";
|
||||
import { constant } from 'fp-ts/lib/function';
|
||||
import { provideFieldData, ProvideFieldDataPropsDefinition } from '../../../composables/fieldData';
|
||||
import { DefaultThemePropsDefinition } from '../../../composables/theme';
|
||||
import { h, defineComponent, computed, shallowRef, watch } from 'vue';
|
||||
|
||||
function useRootClasses(props) {
|
||||
return {
|
||||
'is-expanded': props.isExpanded,
|
||||
'is-horizontal': props.isHorizontal
|
||||
};
|
||||
}
|
||||
|
||||
function useFieldType(isGrouped, hasAddons) {
|
||||
return isGrouped ? 'is-grouped' : hasAddons ? 'has-addons' : '';
|
||||
}
|
||||
|
||||
function useInnerFieldClasses(props, fieldType) {
|
||||
const isGrouped = props.isGrouped;
|
||||
const position = props.position;
|
||||
return [fieldType, {
|
||||
'flex-grow-1': props.isExpanded,
|
||||
'is-grouped-multiline': props.isGroupedMultiline,
|
||||
'is-horizontal': props.isHorizontal,
|
||||
'is-grouped-centered': isGrouped && position === 'is-centered',
|
||||
'is-grouped-right': isGrouped && position === 'is-right',
|
||||
'has-addons-centered': !isGrouped && position === 'is-centered',
|
||||
'has-addons-right': !isGrouped && position === 'is-right'
|
||||
}];
|
||||
}
|
||||
|
||||
export const BFieldPropsDefinition = { ...DefaultThemePropsDefinition,
|
||||
...ProvideFieldDataPropsDefinition,
|
||||
isGrouped: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isGroupedMultiline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: 'is-left'
|
||||
},
|
||||
isHorizontal: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hasAddons: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
customLabelClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
};
|
||||
|
||||
function generateInnerLabel(fieldData, customClass) {
|
||||
return h('label', {
|
||||
class: ['label', customClass],
|
||||
id: fieldData.labelId.value,
|
||||
for: fieldData.id.value
|
||||
}, fieldData.label.value);
|
||||
}
|
||||
|
||||
function generateHorizontalLabel(fieldData, customClass, size) {
|
||||
return h('div', {
|
||||
class: ['field-label', size]
|
||||
}, [generateInnerLabel(fieldData, customClass)]);
|
||||
}
|
||||
|
||||
function generateLabel(isHorizontal, fieldData, customClass, size) {
|
||||
const label = fieldData.label.value;
|
||||
|
||||
if (isHorizontal && !!label) {
|
||||
return [generateHorizontalLabel(fieldData, customClass, size)];
|
||||
} else if (!isHorizontal && !!label) {
|
||||
return [generateInnerLabel(fieldData, customClass)];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function generateHelpMessage(isHorizontal, fieldDataAttrs) {
|
||||
return !isHorizontal && !!fieldDataAttrs.message.value ? h('p', {
|
||||
class: ['help', fieldDataAttrs.messageVariant.value],
|
||||
innerHTML: fieldDataAttrs.message.value
|
||||
}) : undefined;
|
||||
}
|
||||
|
||||
function generateBody(props, fieldData, role, hasInnerField, fieldType, slots) {
|
||||
if (props.isHorizontal) {
|
||||
return [h(BFieldBody, // eslint-disable-line
|
||||
{
|
||||
class: {
|
||||
'is-expanded': fieldData.isExpanded.value
|
||||
},
|
||||
message: fieldData.message.value,
|
||||
variant: fieldData.messageVariant.value,
|
||||
role
|
||||
}, slots.default)];
|
||||
} else if (hasInnerField) {
|
||||
return [h('div', {
|
||||
class: 'field-body'
|
||||
}, [h(BField, // eslint-disable-line
|
||||
{
|
||||
hasAddons: false,
|
||||
variant: fieldData.messageVariant.value,
|
||||
class: useInnerFieldClasses(props, fieldType)
|
||||
}, slots.default)])];
|
||||
} else {
|
||||
return slots.default ? slots.default() : [];
|
||||
}
|
||||
}
|
||||
|
||||
const BField = defineComponent({
|
||||
name: 'b-field',
|
||||
props: BFieldPropsDefinition,
|
||||
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const field = shallowRef(null);
|
||||
const fieldData = provideFieldData(props);
|
||||
const role = computed(() => props.isGrouped ? 'group' : '');
|
||||
const size = shallowRef('');
|
||||
watch(field, newVal => {
|
||||
if (props.isHorizontal && newVal) {
|
||||
// Bulma docs: .is-normal for any .input or .button
|
||||
const elements = newVal.querySelectorAll('.input, .select, .button, .textarea');
|
||||
|
||||
if (elements.length > 0) {
|
||||
size.value = 'is-normal';
|
||||
}
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
const hasAddons = !!(props.hasAddons && !props.isHorizontal && slots.default && slots.default().length > 1);
|
||||
const hasInnerField = props.isGrouped || props.isGroupedMultiline || hasAddons;
|
||||
const nodes = [...generateLabel(props.isHorizontal, fieldData.attrs, props.customLabelClass, size.value), ...generateBody(props, fieldData.attrs, role.value, hasInnerField, useFieldType(props.isGrouped, hasAddons), slots), generateHelpMessage(props.isHorizontal, fieldData.attrs)];
|
||||
return h('div', {
|
||||
ref: field,
|
||||
class: ['field', useRootClasses(props)],
|
||||
role: role.value
|
||||
}, nodes);
|
||||
};
|
||||
}
|
||||
|
||||
}); // eslint-disable-next-line
|
||||
|
||||
function BFieldBody(props, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const nodes = slots.default ? slots.default() : [];
|
||||
return h(props.tag ?? 'div', {
|
||||
class: 'field-body'
|
||||
}, nodes.map(element => element.el ? element : h(BField, props, constant(element))));
|
||||
}
|
||||
|
||||
export default BField;
|
||||
//# sourceMappingURL=BField.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+3
@@ -0,0 +1,3 @@
|
||||
import BField from './BField';
|
||||
export default BField;
|
||||
export { BField };
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import BField from './BField';
|
||||
export default BField;
|
||||
export { BField };
|
||||
//# sourceMappingURL=index.js.map
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user