Skip to content

Commit

Permalink
feat(vue): Action Sheet components
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Apr 28, 2022
1 parent cf29c54 commit 9b1890b
Show file tree
Hide file tree
Showing 7 changed files with 353 additions and 0 deletions.
107 changes: 107 additions & 0 deletions kitchen-sink/vue/pages/ActionSheet.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<template>
<k-page>
<k-navbar title="ActionSheet">
<template v-if="!isPreview" #left>
<k-navbar-back-link @click="() => history.back()" />
</template>
</k-navbar>

<k-block strong class="space-y-4">
<p>
Action Sheet is a slide-up pane for presenting the user with a set of
alternatives for how to proceed with a given task.
</p>
</k-block>
<k-block-title>Open Action Sheet</k-block-title>
<k-block strong class="flex space-x-4">
<k-button @click="() => (actionsOneOpened = true)">One group</k-button>
<k-button @click="() => (actionsTwoOpened = true)">Two groups</k-button>
</k-block>

<k-actions
:opened="actionsOneOpened"
@backdropclick="() => (actionsOneOpened = false)"
>
<k-actions-group>
<k-actions-label>Do something</k-actions-label>
<k-actions-button bold @click="() => (actionsOneOpened = false)">
Button 1
</k-actions-button>
<k-actions-button @click="() => (actionsOneOpened = false)">
Button 2
</k-actions-button>
<k-actions-button
:colors="{ text: 'text-red-500' }"
@click="() => (actionsOneOpened = false)"
>
Cancel
</k-actions-button>
</k-actions-group>
</k-actions>

<k-actions
:opened="actionsTwoOpened"
@backdropclick="() => (actionsTwoOpened = false)"
>
<k-actions-group>
<k-actions-label>Do something</k-actions-label>
<k-actions-button bold @click="() => (actionsTwoOpened = false)">
Button 1
</k-actions-button>
<k-actions-button @click="() => (actionsTwoOpened = false)">
Button 2
</k-actions-button>
</k-actions-group>
<k-actions-group>
<k-actions-button
:colors="{ text: 'text-red-500' }"
@click="() => (actionsTwoOpened = false)"
>
Cancel
</k-actions-button>
</k-actions-group>
</k-actions>
</k-page>
</template>
<script>
import {
kPage,
kNavbar,
kNavbarBackLink,
kBlockTitle,
kBlock,
kButton,
kActions,
kActionsButton,
kActionsLabel,
kActionsGroup,
} from 'konsta/vue';
import { ref } from 'vue';
export default {
name: 'ActionSheetPage',
components: {
kPage,
kNavbar,
kNavbarBackLink,
kBlockTitle,
kBlock,
kButton,
kActions,
kActionsButton,
kActionsLabel,
kActionsGroup,
},
setup() {
const actionsOneOpened = ref(false);
const actionsTwoOpened = ref(false);
return {
isPreview: document.location.href.includes('examplePreview'),
history: window.history,
actionsOneOpened,
actionsTwoOpened,
};
},
};
</script>
2 changes: 2 additions & 0 deletions kitchen-sink/vue/routes.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Home from './pages/Home.vue';
import ActionSheet from './pages/ActionSheet.vue';
import Badge from './pages/Badge.vue';
import Breadcrumbs from './pages/Breadcrumbs.vue';
import Buttons from './pages/Buttons.vue';
Expand Down Expand Up @@ -30,6 +31,7 @@ import Toolbar from './pages/Toolbar.vue';

const routes = [
Home,
ActionSheet,
Badge,
Breadcrumbs,
Buttons,
Expand Down
49 changes: 49 additions & 0 deletions src/vue/components/Actions.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<template>
<div v-if="backdrop" :class="c.backdrop[state]" @click="onBackdropClick" />
<component :is="component" :class="c.base[state]">
<slot />
</component>
</template>
<script>
import { computed } from 'vue';
import { ActionsClasses } from '../../shared/classes/ActionsClasses.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
export default {
name: 'k-actions',
props: {
component: {
type: String,
default: 'div',
},
ios: {
type: Boolean,
default: undefined,
},
material: {
type: Boolean,
default: undefined,
},
opened: Boolean,
backdrop: { type: Boolean, default: true },
},
emits: ['backdropclick'],
setup(props, ctx) {
const state = computed(() => (props.opened ? 'opened' : 'closed'));
const c = useThemeClasses(props, () =>
ActionsClasses(props, ctx.attrs.class)
);
const onBackdropClick = (e) => {
ctx.emit('backdropclick', e);
};
return {
onBackdropClick,
c,
state,
};
},
};
</script>
84 changes: 84 additions & 0 deletions src/vue/components/ActionsButton.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<template>
<component :is="Component" ref="rippleElRef" :class="c.base">
<slot />
</component>
</template>
<script>
import { ref, computed } from 'vue';
import { cls } from '../../shared/cls.js';
import { useTouchRipple } from '../shared/use-touch-ripple.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
import { ActionsButtonClasses } from '../../shared/classes/ActionsButtonClasses.js';
export default {
name: 'k-actions-button',
props: {
component: {
type: String,
default: 'button',
},
colors: {
type: Object,
},
ios: {
type: Boolean,
default: undefined,
},
material: {
type: Boolean,
default: undefined,
},
// Anchor props
href: {
type: [Boolean, String],
default: undefined,
},
touchRipple: {
type: Boolean,
default: true,
},
hairlines: { type: Boolean, default: true },
bold: { type: Boolean, default: false },
fontSizeIos: { type: String, default: 'text-xl' },
fontSizeMaterial: { type: String, default: 'text-base' },
},
setup(props, ctx) {
const rippleElRef = ref(null);
const Component = computed(() => {
let c = props.component;
if (
typeof props.component === 'undefined' &&
(props.href || props.href === '')
) {
c = 'a';
}
return c;
});
useTouchRipple(rippleElRef, props);
const colors = computed(() => ({
bg: cls('bg-white', useDarkClasses('dark:bg-neutral-800')),
activeBg: cls(
'active:bg-neutral-200',
useDarkClasses('dark:active:bg-neutral-700')
),
text: 'text-primary',
...(props.colors || {}),
}));
const c = useThemeClasses(
props,
() => ActionsButtonClasses(props, colors.value, useDarkClasses),
ctx.attrs.class
);
return {
c,
Component,
rippleElRef,
};
},
};
</script>
39 changes: 39 additions & 0 deletions src/vue/components/ActionsGroup.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<template>
<component :is="component" :class="c.base">
<slot />
</component>
</template>
<script>
import { ActionsGroupClasses } from '../../shared/classes/ActionsGroupClasses.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
export default {
name: 'k-actions-group',
props: {
component: {
type: String,
default: 'div',
},
ios: {
type: Boolean,
default: undefined,
},
material: {
type: Boolean,
default: undefined,
},
hairlines: { type: Boolean, default: true },
},
setup(props, ctx) {
const c = useThemeClasses(
props,
() => ActionsGroupClasses(props),
ctx.attrs.class
);
return {
c,
};
},
};
</script>
60 changes: 60 additions & 0 deletions src/vue/components/ActionsLabel.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<template>
<component :is="component" :class="c.base">
<slot />
</component>
</template>
<script>
import { computed } from 'vue';
import { cls } from '../../shared/cls.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
import { ActionsLabelClasses } from '../../shared/classes/ActionsLabelClasses.js';
export default {
name: 'k-actions-label',
props: {
component: {
type: String,
default: 'button',
},
colors: {
type: Object,
},
ios: {
type: Boolean,
default: undefined,
},
material: {
type: Boolean,
default: undefined,
},
hairlines: { type: Boolean, default: true },
fontSizeIos: { type: String, default: 'text-sm' },
fontSizeMaterial: { type: String, default: 'text-base' },
},
setup(props, ctx) {
const colors = computed(() => ({
bg: cls('bg-white', useDarkClasses('dark:bg-neutral-800')),
activeBg: cls(
'active:bg-neutral-200',
useDarkClasses('dark:active:bg-neutral-700')
),
text: cls(
'text-black text-opacity-55',
useDarkClasses('dark:text-white dark:text-opacity-55')
),
...(props.colors || {}),
}));
const c = useThemeClasses(
props,
() => ActionsLabelClasses(props, colors.value),
ctx.attrs.class
);
return {
c,
};
},
};
</script>
12 changes: 12 additions & 0 deletions src/vue/konsta-vue.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import kApp from './components/App.vue';
import kActions from './components/Actions.vue';
import kActionsButton from './components/ActionsButton.vue';
import kActionsLabel from './components/ActionsLabel.vue';
import kActionsGroup from './components/ActionsGroup.vue';
import kBadge from './components/Badge.vue';
import kBlock from './components/Block.vue';
import kBlockFooter from './components/BlockFooter.vue';
Expand Down Expand Up @@ -55,6 +59,14 @@ export {
// components
kApp,
kApp as App,
kActions,
kActions as Actions,
kActionsButton,
kActionsButton as ActionsButton,
kActionsLabel,
kActionsLabel as ActionsLabel,
kActionsGroup,
kActionsGroup as ActionsGroup,
kBadge,
kBadge as Badge,
kBlock,
Expand Down

0 comments on commit 9b1890b

Please sign in to comment.