@bethinkpl/design-system 30.1.2 → 30.3.0

package/lib/js/components/SelectionTile/SelectionTile.vue

@@ -7,21 +7,26 @@
 				'-ds-default': state === SELECTION_TILE_STATE.DEFAULT,
 				'-ds-disabled': state === SELECTION_TILE_STATE.DISABLED,
 				'-ds-loading': isLoading,
-				'-ds-focused': inputIsFocused && !isLoading,
 			},
 		]"
 		@click="updateIsSelected(!isSelected)"
 	>
 		<div class="ds-selectionTile__wrapper">
-			<component
-				:is="type === SELECTION_TILE_TYPE.RADIO_BUTTON ? 'radio-button' : 'checkbox'"
+			<radio-button
+				v-if="type === SELECTION_TILE_TYPE.RADIO_BUTTON"
 				:size="SELECTION_CONTROL_SIZE.X_SMALL"
 				:is-selected="isSelected"
 				:state="SELECTION_CONTROL_STATE_MAP[state]"
 				@update:is-selected="updateIsSelected($event)"
-				@input:focus="onInputFocus"
-				@input:blur="onInputBlur"
 			/>
+			<checkbox
+				v-else
+				:size="CHECKBOX_SIZES.X_SMALL"
+				:model-value="isSelected"
+				:state="CHECKBOX_STATE_MAP[state]"
+				@update:model-value="(value) => updateIsSelected(value !== false)"
+			/>
+
 			<div class="ds-selectionTile__textWrapper">
 				<div class="ds-selectionTile__title">{{ title }}</div>
 
@@ -102,8 +107,8 @@ $selection-tile-min-height: 48px;
 		display: flex;
 	}
 
-	&:hover:not(.-ds-loading),
-	&.-ds-focused {
+	&:focus-within:not(.-ds-loading),
+	&:hover:not(.-ds-loading) {
 		background-color: $color-neutral-background-weak-hovered;
 		outline-color: $color-neutral-border-hovered;
 	}
@@ -112,8 +117,8 @@ $selection-tile-min-height: 48px;
 		background-color: $color-primary-background;
 		outline-color: $color-primary-border;
 
-		&:hover:not(.-ds-loading),
-		&.-ds-focused {
+		&:focus-within:not(.-ds-loading),
+		&:hover:not(.-ds-loading) {
 			background-color: $color-primary-background-hovered;
 			outline-color: $color-primary-border-hovered;
 		}
@@ -153,8 +158,8 @@ $selection-tile-min-height: 48px;
 }
 </style>
 
-<script lang="ts">
-import { defineAsyncComponent, defineComponent, PropType, toRaw } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import {
 	SELECTION_TILE_STATE,
 	SELECTION_TILE_TYPE,
@@ -166,97 +171,61 @@ import Icon from '../Icons/Icon/Icon.vue';
 import {
 	SELECTION_CONTROL_SIZE,
 	SELECTION_CONTROL_STATE,
+	SelectionControlState,
 } from '../Form/SelectionControl/SelectionControl.consts';
-import SelectionControl from '../Form/SelectionControl/SelectionControl.vue';
+import { CHECKBOX_SIZES, CHECKBOX_STATES, CheckboxState } from '../Form/Checkbox';
+import Checkbox from '../Form/Checkbox/Checkbox.vue';
+import RadioButton from '../Form/RadioButton/RadioButton.vue';
 
-const SELECTION_CONTROL_STATE_MAP = {
+const SELECTION_CONTROL_STATE_MAP: Record<SelectionTileState, SelectionControlState> = {
 	[SELECTION_TILE_STATE.DEFAULT]: SELECTION_CONTROL_STATE.DEFAULT,
 	[SELECTION_TILE_STATE.LOADING]: SELECTION_CONTROL_STATE.LOADING,
 	[SELECTION_TILE_STATE.DISABLED]: SELECTION_CONTROL_STATE.DISABLED,
 };
 
-export default defineComponent({
-	name: 'SelectionTile',
-	components: {
-		SelectionControl,
-		Icon,
-		Checkbox: defineAsyncComponent(() => import('../Form/Checkbox/Checkbox.vue')),
-		RadioButton: defineAsyncComponent(() => import('../Form/RadioButton/RadioButton.vue')),
-	},
-	props: {
-		type: {
-			type: String as PropType<SelectionTileType>,
-			default: SELECTION_TILE_TYPE.RADIO_BUTTON,
-			validator(type: SelectionTileType) {
-				return Object.values(SELECTION_TILE_TYPE).includes(type);
-			},
-		},
-		title: {
-			type: String,
-			required: true,
-		},
-		supportingText: {
-			type: String,
-			default: null,
-		},
-		icon: {
-			type: Object,
-			default: null,
-			validator(icon: IconItem) {
-				return Object.values(ICONS).includes(toRaw(icon));
-			},
-		},
-		isSelected: {
-			type: Boolean,
-			default: false,
-		},
-		state: {
-			type: String as PropType<SelectionTileState>,
-			default: SELECTION_TILE_STATE.DEFAULT,
-			validator(state: SelectionTileState) {
-				return Object.values(SELECTION_TILE_STATE).includes(state);
-			},
-		},
-	},
-	// TODO fix me when touching this file
-	// eslint-disable-next-line vue/require-emit-validator
-	emits: ['update:is-selected', 'icon-click'],
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-			ICON_SIZES: Object.freeze(ICON_SIZES),
-			SELECTION_CONTROL_SIZE: Object.freeze(SELECTION_CONTROL_SIZE),
-			SELECTION_TILE_STATE: Object.freeze(SELECTION_TILE_STATE),
-			SELECTION_TILE_TYPE: Object.freeze(SELECTION_TILE_TYPE),
-			SELECTION_CONTROL_STATE_MAP,
-			inputIsFocused: false,
-		};
-	},
-	computed: {
-		isLoading() {
-			return this.state === SELECTION_TILE_STATE.LOADING;
-		},
-	},
-	methods: {
-		updateIsSelected(value: boolean) {
-			if (this.isLoading || this.state === SELECTION_TILE_STATE.DISABLED) {
-				return;
-			}
+const CHECKBOX_STATE_MAP: Record<SelectionTileState, CheckboxState> = {
+	[SELECTION_TILE_STATE.DEFAULT]: CHECKBOX_STATES.DEFAULT,
+	[SELECTION_TILE_STATE.LOADING]: CHECKBOX_STATES.DEFAULT,
+	[SELECTION_TILE_STATE.DISABLED]: CHECKBOX_STATES.DISABLED,
+};
 
-			this.$emit('update:is-selected', value);
-		},
-		onIconClick(event: Event) {
-			if (!this.isLoading) {
-				event.stopPropagation();
-				this.$emit('icon-click');
-			}
-		},
-		onInputFocus() {
-			this.inputIsFocused = true;
-		},
-		onInputBlur() {
-			this.inputIsFocused = false;
-		},
-	},
+// Props
+const {
+	type = SELECTION_TILE_TYPE.RADIO_BUTTON,
+	supportingText = null,
+	icon = null,
+	isSelected = false,
+	state = SELECTION_TILE_STATE.DEFAULT,
+} = defineProps<{
+	type?: SelectionTileType;
+	title: string;
+	supportingText?: string | null;
+	icon?: IconItem | null;
+	isSelected?: boolean;
+	state?: SelectionTileState;
+}>();
+
+const emit = defineEmits<{
+	'update:is-selected': [value: boolean];
+	'icon-click': [];
+}>();
+
+const isLoading = computed(() => {
+	return state === SELECTION_TILE_STATE.LOADING;
 });
+
+const updateIsSelected = (value: boolean) => {
+	if (isLoading.value || state === SELECTION_TILE_STATE.DISABLED) {
+		return;
+	}
+
+	emit('update:is-selected', value);
+};
+
+const onIconClick = (event: Event) => {
+	if (!isLoading.value) {
+		event.stopPropagation();
+		emit('icon-click');
+	}
+};
 </script>

package/lib/js/composables/useFormFieldWithinForm.ts

@@ -0,0 +1,26 @@
+import { inject, MaybeRefOrGetter, ref, Ref, toValue } from 'vue';
+import { FormContextKey, useField } from 'vee-validate';
+
+export function useFormFieldWithinForm<T = string>(
+	name: MaybeRefOrGetter<string | undefined>,
+	modelValue: Ref<T | undefined>,
+) {
+	const nameValue = toValue(name);
+	const form = inject(FormContextKey, null);
+
+	if (nameValue && !form) {
+		throw new Error(
+			`Field with name "${name}" must be used within a component that provides a FormContext, e.g. by using useForm()`,
+		);
+	}
+
+	const field = nameValue ? useField<Array<string>>(nameValue, undefined) : null;
+
+	const value = field ? field.value : modelValue;
+
+	return {
+		field,
+		value,
+		errors: field?.errors ?? ref<Array<string>>([]),
+	};
+}

package/lib/js/composables/useLegacyI18n.ts

@@ -16,7 +16,6 @@ export const useLegacyI18n = (): IUseLegacyI18n => {
 		throw new Error('useLegacyI18n must be called within a Vue component');
 	}
 
-	// @ts-expect-error
 	const t = internalInstance.root.proxy.$t;
 
 	return {

package/lib/js/icons/fontawesome.ts

@@ -151,6 +151,7 @@ import { faSquare } from '@fortawesome/pro-regular-svg-icons/faSquare';
 import { faSquareCaretRight } from '@fortawesome/pro-regular-svg-icons/faSquareCaretRight';
 import { faSquareCheck } from '@fortawesome/pro-regular-svg-icons/faSquareCheck';
 import { faSquareList } from '@fortawesome/pro-regular-svg-icons/faSquareList';
+import { faSquareMinus } from '@fortawesome/pro-regular-svg-icons/faSquareMinus';
 import { faStar } from '@fortawesome/pro-regular-svg-icons/faStar';
 import { faTag } from '@fortawesome/pro-regular-svg-icons/faTag';
 import { faTags } from '@fortawesome/pro-regular-svg-icons/faTags';
@@ -225,6 +226,9 @@ import { faChevronLeft as falChevronLeft } from '@fortawesome/pro-light-svg-icon
 import { faChevronRight as falChevronRight } from '@fortawesome/pro-light-svg-icons/faChevronRight';
 
 import { faSpinnerThird as fadSpinnerThird } from '@fortawesome/pro-duotone-svg-icons/faSpinnerThird';
+import { faSquareMinus as fadSquareMinus } from '@fortawesome/duotone-regular-svg-icons/faSquareMinus';
+import { faSquare as fadSquare } from '@fortawesome/duotone-regular-svg-icons/faSquare';
+import { faSquareCheck as fadSquareCheck } from '@fortawesome/pro-duotone-svg-icons/faSquareCheck';
 
 import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
 import { faUserGear } from '@fortawesome/pro-regular-svg-icons/faUserGear';
@@ -441,6 +445,7 @@ export const FONTAWESOME_ICONS = {
 	FA_SQUARE_CHECK: faSquareCheck,
 	FA_SQUARE_LIST_SOLID: fasSquareList,
 	FA_SQUARE_LIST: faSquareList,
+	FA_SQUARE_MINUS: faSquareMinus,
 	FA_SQUARE: faSquare,
 	FA_STAR_SOLID: fasStar,
 	FA_STAR: faStar,
@@ -470,6 +475,9 @@ export const FONTAWESOME_ICONS = {
 	FA_WINDOW_MAXIMIZE: faWindowMaximize,
 	FA_XMARK: faXmark,
 	FAD_SPINNER_THIRD: fadSpinnerThird,
+	FAD_SQUARE_MINUS: fadSquareMinus,
+	FAD_SQUARE: fadSquare,
+	FAD_SQUARE_CHECK: fadSquareCheck,
 } as const;
 
 export function initialize() {

package/lib/styles/settings/_animations.scss

@@ -19,3 +19,6 @@
 }
 
 $default-transition-time: 0.3s;
+
+// see https://cubic-bezier.com/#.23,1,.32,1
+$default-cubic-bezier-transition: all $default-transition-time cubic-bezier(0.23, 1, 0.32, 1) 0ms;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "30.1.2",
+  "version": "30.3.0",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",
@@ -41,6 +41,7 @@
     "synchronizeTypography": "npx ts-node tools/importers/SynchronizeTypographyTokens.ts"
   },
   "devDependencies": {
+    "@fortawesome/duotone-regular-svg-icons": "7.0.1",
     "@fortawesome/fontawesome-svg-core": "7.0.1",
     "@fortawesome/free-brands-svg-icons": "7.0.1",
     "@fortawesome/pro-duotone-svg-icons": "7.0.1",
@@ -53,6 +54,7 @@
     "@storybook/addon-controls": "^8.3.4",
     "@storybook/addon-designs": "^8.0.3",
     "@storybook/addon-docs": "^8.3.4",
+    "@storybook/addon-essentials": "8.6.14",
     "@storybook/addon-storysource": "^8.3.4",
     "@storybook/addon-viewport": "^8.3.4",
     "@storybook/vue3": "^8.3.4",
@@ -60,6 +62,7 @@
     "@types/node": "^17.0.9",
     "@typescript-eslint/eslint-plugin": "8.45.0",
     "@typescript-eslint/parser": "8.45.0",
+    "@vee-validate/zod": "4.15.1",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vitest/coverage-c8": "0.33.0",
     "@vitest/ui": "3.1.4",
@@ -100,11 +103,13 @@
     "vue-popperjs": "github:bethinkpl/vue-popper#df07fdb562d604fad966f0e8d6db1fc48febad6e",
     "vue-tsc": "2.2.10",
     "wait-for-expect": "^3.0.2",
-    "yaml-eslint-parser": "^1.3.0"
+    "yaml-eslint-parser": "^1.3.0",
+    "zod": "4.1.12"
   },
   "dependencies": {
     "@primevue/themes": "4.0.0-rc.3",
     "primevue": "4.0.0-rc.3",
+    "reka-ui": "2.6.0",
     "vee-validate": "4.15.1",
     "vue-component-type-helpers": "2.2.10"
   },