Merge pull request #493 from 3YOURMIND/refactor-kt-button-group

refactor(KtButtonGroup): Proper TypeScript Types
3YOURMIND · Sep 9, 2021 · 057ebd6 · 057ebd6
2 parents 23bb3c7 + 21f6ab5
commit 057ebd6
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 32 deletions.
diff --git a/packages/kotti-ui/source/kotti-button-group/KtButtonGroup.vue b/packages/kotti-ui/source/kotti-button-group/KtButtonGroup.vue
@@ -1,49 +1,36 @@
 <template>
-	<div :class="objectClass">
+	<div class="kt-button-group">
 		<slot />
 	</div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+import { KottiButtonGroup } from './types'
+
+export default defineComponent<KottiButtonGroup.PropsInternal>({
 	name: 'KtButtonGroup',
-	props: {
-		shadow: Boolean,
-	},
-	computed: {
-		objectClass() {
-			return {
-				'button-group': true,
-				'button-group--shadow': this.shadow,
-			}
-		},
-	},
-}
+})
 </script>
 
 <style lang="scss">
 @import '../kotti-style/_variables.scss';
 
-.button-group {
-	/** Fix for inline element space
-	https://css-tricks.com/fighting-the-space-between-inline-block-elements/ **/
-	font-size: 0;
+.kt-button-group {
+	font-size: 0; /* Fix for inline element space https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
 
 	.kt-button {
 		font-size: $font-size;
 		border-radius: 0;
-	}
 
-	.kt-button:first-of-type {
-		border-radius: $border-radius 0 0 $border-radius;
-	}
-
-	.kt-button:last-of-type {
-		border-radius: 0 $border-radius $border-radius 0;
-	}
+		&:first-of-type {
+			border-radius: $border-radius 0 0 $border-radius;
+		}
 
-	&--shadow {
-		box-shadow: 0 1px 2px rgba($color: #000000, $alpha: 0.24);
+		&:last-of-type {
+			border-radius: 0 $border-radius $border-radius 0;
+		}
 	}
 }
 </style>
diff --git a/packages/kotti-ui/source/kotti-button-group/index.ts b/packages/kotti-ui/source/kotti-button-group/index.ts
@@ -9,5 +9,7 @@ export const KtButtonGroup = attachMeta(makeInstallable(KtButtonGroupVue), {
 	slots: {
 		default: { description: 'Should contain KtButtons', scope: null },
 	},
-	typeScript: null,
+	typeScript: {
+		namespace: 'Kotti.ButtonGroup',
+	},
 })
diff --git a/packages/kotti-ui/source/kotti-button-group/types.ts b/packages/kotti-ui/source/kotti-button-group/types.ts
@@ -0,0 +1,7 @@
+import { SpecifyRequiredProps } from '../types/utilities'
+
+export namespace KottiButtonGroup {
+	export type PropsInternal = {}
+
+	export type Props = SpecifyRequiredProps<PropsInternal, never>
+}
diff --git a/packages/kotti-ui/source/kotti-comment/KtComment.vue b/packages/kotti-ui/source/kotti-comment/KtComment.vue
@@ -18,7 +18,7 @@
 					v-model="inlineMessageValue"
 					class="comment-inline-edit-input form-input"
 				></textarea>
-				<KtButtonGroup class="comment-inline-edit-buttons" shadow>
+				<KtButtonGroup class="comment-inline-edit-buttons">
 					<KtButton icon="close" @click="cancelInlineEdit" />
 					<KtButton icon="check" @click="handleEditConfirm" />
 				</KtButtonGroup>

diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentReply.vue b/packages/kotti-ui/source/kotti-comment/components/CommentReply.vue
@@ -28,7 +28,7 @@
 						v-model="inlineMessageValue"
 						class="comment-inline-edit-input form-input"
 					></textarea>
-					<KtButtonGroup class="comment-inline-edit-buttons" shadow>
+					<KtButtonGroup class="comment-inline-edit-buttons">
 						<KtButton icon="close" @click="cancelInlineEdit" />
 						<KtButton icon="check" @click="handleConfirm" />
 					</KtButtonGroup>

diff --git a/packages/kotti-ui/source/types/kotti.ts b/packages/kotti-ui/source/types/kotti.ts
@@ -3,6 +3,7 @@ export { KottiAvatarGroup as AvatarGroup } from '../kotti-avatar-group/types'
 export { KottiBanner as Banner } from '../kotti-banner/types'
 export { KottiBreadcrumb as Breadcrumb } from '../kotti-breadcrumb/types'
 export { KottiButton as Button } from '../kotti-button/types'
+export { KottiButtonGroup as ButtonGroup } from '../kotti-button-group/types'
 export { KottiCol as Col } from '../kotti-col/types'
 export { KottiField as Field } from '../kotti-field/types'
 export { KottiFieldNumber as FieldNumber } from '../kotti-field-number/types'