feat(635): support isExpanded prop to allow expansion by default

3YOURMIND · Jun 23, 2022 · 6583857 · 6583857
1 parent dcd5034
commit 6583857
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 22 deletions.
diff --git a/packages/documentation/pages/usage/components/drawer.vue b/packages/documentation/pages/usage/components/drawer.vue
@@ -9,10 +9,6 @@ It is best to place secondary functionality or information into the drawer, and
 
 ![Structure](~/assets/img/drawer_structure.png)
 
-- **Drawer:** The size of drawer depends on information density.
-- **Handle:** By clicking the handles, the drawer can be `Expanded` to display more information.
-- **Background:** The background should be black `#000000` with `46%` opacity.
-
 ## Size
 
 <div class="element-example">
@@ -54,6 +50,24 @@ It is best to place secondary functionality or information into the drawer, and
 	</KtDrawer>
 </div>
 
+## Expansion
+
+<div class="element-example" >
+	<KtButton type="primary" class="mr-16px" @click="showDefaultExpanded=true" label="Show Expanded-by-default Drawer" />
+	<KtDrawer v-if="showDefaultExpanded" isExpanded @close="showDefaultExpanded=false">
+		<div slot="drawer-header">
+			<h2>Default Size Drawer</h2>
+		</div>
+		<div slot="drawer-body">
+			<p>This drawer is expanded by default.</p>
+		</div>
+		<div slot="drawer-footer">
+			<KtButton @click="showDefaultExpanded=false" class="w-100" label="Close Drawer" />
+		</div>
+	</KtDrawer>
+
+</div>
+
 There are different ways to customize the width of the drawer.
 
 Each drawer has a default state and a wide state, the transition can be triggered by clicking on the arrow at the edge of the drawer.
@@ -125,17 +139,6 @@ When the `disallowCloseOutside` flag is set, it prevents the user from accidenta
 </div>
 
 </ShowCase>
-
-## Usage
-
-### Attributes
-
-| Attribute              | Description                                | Type      | Accepted values | Default |
-| :--------------------- | :----------------------------------------- | :-------- | :-------------- | :------ |
-| `disallowCloseOutside` | closed drawer when click outside of drawer | `Boolean` | —               | `true`  |
-| `defaultWidth`         | width when drawer is closed                | `String`  | CSS width       | —       |
-| `expandWidth`          | width when drawer is expanded              | `String`  | CSS width       | —       |
-| `isWide`               | wide drawer                                | `Boolean` | —               | `false` |
 </template>
 
 <script lang="ts">
@@ -155,6 +158,7 @@ export default defineComponent({
 		return {
 			component: KtDrawer,
 			customizeWidthDrawer: false,
+			showDefaultExpanded: false,
 			showDrawer: false,
 			showWideDrawer: false,
 		}

diff --git a/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue b/packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
@@ -12,7 +12,7 @@
 					<slot name="drawer-footer" />
 				</div>
 				<div class="kt-drawer__handle" @click="onDrawerHandleClick">
-					<i v-if="isExpanded" class="yoco" v-text="Yoco.Icon.CHEVRON_RIGHT" />
+					<i v-if="_isExpanded" class="yoco" v-text="Yoco.Icon.CHEVRON_RIGHT" />
 					<i v-else class="yoco" v-text="Yoco.Icon.CHEVRON_LEFT" />
 				</div>
 			</div>
@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import { Yoco } from '@3yourmind/yoco'
-import { computed, defineComponent, ref } from '@vue/composition-api'
+import { computed, defineComponent, ref, watch } from '@vue/composition-api'
 
 import { makeProps } from '../make-props'
 
@@ -32,22 +32,31 @@ export default defineComponent<KottiDrawer.PropsInternal>({
 	name: 'KtDrawer',
 	props: makeProps(KottiDrawer.propsSchema),
 	setup(props, { emit }) {
-		const isExpanded = ref(false)
+		const _isExpanded = ref(false)
+		watch(
+			() => props.isExpanded,
+			(shouldExpand) => {
+				_isExpanded.value = shouldExpand
+			},
+			{ immediate: true },
+		)
 
 		return {
+			_isExpanded,
 			drawerClass: computed(() => ({
 				'kt-drawer__container': true,
-				'kt-drawer__container--is-expanded': isExpanded.value,
+				'kt-drawer__container--is-expanded': _isExpanded.value,
 				'kt-drawer__container--is-wide': props.isWide,
 			})),
 			drawerWidth: computed(() => {
 				return props.defaultWidth === null || props.expandWidth === null
 					? {}
-					: { width: isExpanded.value ? props.expandWidth : props.defaultWidth }
+					: {
+							width: _isExpanded.value ? props.expandWidth : props.defaultWidth,
+					  }
 			}),
-			isExpanded,
 			onDrawerHandleClick: () => {
-				isExpanded.value = !isExpanded.value
+				_isExpanded.value = !_isExpanded.value
 			},
 			onOutsideDrawerClick: () => {
 				if (!props.disallowCloseOutside) {

diff --git a/packages/kotti-ui/source/kotti-drawer/types.ts b/packages/kotti-ui/source/kotti-drawer/types.ts
@@ -5,6 +5,7 @@ export namespace KottiDrawer {
 		defaultWidth: z.string().nullable().default(null),
 		disallowCloseOutside: z.boolean().default(false),
 		expandWidth: z.string().nullable().default(null),
+		isExpanded: z.boolean().default(false),
 		isWide: z.boolean().default(false),
 	})