diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 5b001f80..ccd63e59 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -73,6 +73,7 @@ function sidebar(): DefaultTheme.SidebarItem[] { { text: 'SButtonGroup', link: '/components/button-group' }, { text: 'SCard', link: '/components/card' }, { text: 'SContent', link: '/components/content' }, + { text: 'SControl', link: '/components/control' }, { text: 'SDesc', link: '/components/desc' }, { text: 'SDivider', link: '/components/divider' }, { text: 'SDoc', link: '/components/doc' }, diff --git a/docs/components/control.md b/docs/components/control.md new file mode 100644 index 00000000..063d2f08 --- /dev/null +++ b/docs/components/control.md @@ -0,0 +1,383 @@ +# SControl + +`` is a component to create sets of control actions. + +## Import + +```ts +import SControl from '@globalbrain/sefirot/lib/components/SControl.vue' +import SControlActionBar from '@globalbrain/sefirot/lib/components/SControlActionBar.vue' +import SControlActionBarButton from '@globalbrain/sefirot/lib/components/SControlActionBarButton.vue' +import SControlActionBarClose from '@globalbrain/sefirot/lib/components/SControlActionBarClose.vue' +import SControlActionBarCollapse from '@globalbrain/sefirot/lib/components/SControlActionBarCollapse.vue' +import SControlActionMenu from '@globalbrain/sefirot/lib/components/SControlActionMenu.vue' +import SControlButton from '@globalbrain/sefirot/lib/components/SControlButton.vue' +import SControlCenter from '@globalbrain/sefirot/lib/components/SControlCenter.vue' +import SControlInputSearch from '@globalbrain/sefirot/lib/components/SControlInputSearch.vue' +import SControlLeft from '@globalbrain/sefirot/lib/components/SControlLeft.vue' +import SControlPagination from '@globalbrain/sefirot/lib/components/SControlPagination.vue' +import SControlRight from '@globalbrain/sefirot/lib/components/SControlRight.vue' +import SControlText from '@globalbrain/sefirot/lib/components/SControlText.vue' +``` + +### Mixins + +`` serise are all packed in `Control` mixin, and also it is a part of `Fundamental` mixin. + +```ts +import { mixin as controlMixin } from '@globalbrain/sefirot/lib/mixins/Control' + +app.use(controlMixin) +``` + +## Usage + +`` is a set of multiple components and you can combine them to create a horizontal control bar. + +A simple example would be creating "Cancel" and "Submit" form footer. This component will display 2 buttons aligned to the right. + +```vue-html + + + + + + +``` + +### Controlling layout + +Use ``, ``, and `` to align the content to the left, center, and right. Usually, you should always wrap the content within one of these components even if you only have single section. + +```vue-html + + + + + +``` + +### Adding actions + +Place action components such as `` and `` to add actions. + +```vue-html + + + + + + +``` + +### Combining with `` + +When `` is used inside [``](card), it will inherit the size option from the parent card compoennt and automatically adjust the size of control buttons. This is useful when adding header and footer to the card. + +```vue-html + + + + + + + + + + + + + +``` + +## `` + +The root component of control series. All the other components should be wrapped within it. + +```vue-html + + + +``` + +## `` + +Aligns nested components to the left. + +```vue-html + + + + + +``` + +## `` + +Aligns nested components to the center. + +```vue-html + + + + + +``` + +## `` + +Aligns nested components to the right. + +```vue-html + + + + + +``` + +## `` + +The component is almost identical to [``](button) and you may use almost all the props available in ``. However, `` will automatically adjust its size based on `` usage so remember to always use `` instead of ``. + +```ts +import { + type Mode, + type Tooltip, + type Type +} from '@globalbrain/sefirot/lib/components/SButton.vue' + +interface Props { + tag?: string + type?: Type + mode?: Mode + icon?: any + iconMode?: Mode + label?: string + labelMode?: Mode + href?: string + loading?: boolean + disabled?: boolean + tooltip?: string | Tooltip +} +``` + +```ts +interface Emits { + click: [] +} +``` + +```vue-html + + + + + + +``` + +## `` + +A container for multiple icon based action buttons. This is the root component for action bar series. + +```vue-html + + + + + + + +``` + +## `` + +A generic action bar button. + +```ts +import SButton, { + type Mode, + type Tooltip, + type Type +} from '@globalbrain/sefirot/lib/components/SButton.vue' + +interface Props { + as?: string + icon?: any + href?: string + disabled?: boolean + tooltip?: string | Tooltip +} +``` + +```ts +interface Emits { + click: [] +} +``` + +```vue + + + +``` + +## `` + +A helper component to create a close (X) button. This is exactly the same as passing X icon to ``. + +```ts +interface Props { + as?: string +} +``` + +```ts +interface Emits { + click: [] +} +``` + +```vue-html + + + + + + + +``` + +## `` + +A special component to add a collapse button, and its actual collapse behavior. This component only makes sense when used inside `` component. Add this on + +```ts +interface Props { + as?: string + collapsed?: boolean +} +``` + +```ts +interface Emits { + click: [] +} +``` + +```vue-html + + + + + + + + + + + +``` + +## `` + +A helper component that creates `` component with magnifying glass icon. Useful for adding search feature. + +```ts +interface Props { + placeholder?: string + unitAfter?: any + textColor?: TextColor | ((value: string | null) => TextColor) + align?: Align + disabled?: boolean + value?: string | null + modelValue?: string | null + displayValue?: string | null + validation?: Validatable +} +``` + +```ts +interface Emits { + 'update:model-value': [value: string | null] + 'input': [value: string | null] + 'blur': [value: string | null] + 'enter': [value: string | null] +} +``` + +```vue-html + + + + + +``` + +## `` + +A component to create pagination control. + +```ts +import { type Size } from '@globalbrain/sefirot/lib/components/SPagination.vue' + +interface Props { + size?: Size + total: number + page: number + perPage: number +} +``` + +```ts +interface Emits { + 'update:model-value': [value: string | null] + 'input': [value: string | null] + 'blur': [value: string | null] + 'enter': [value: string | null] +} +``` + +```vue-html + + + + + +``` + +## `` + +Add static text to the control bar. + +```vue-html + + + + Hello, world! + + + +```