@mozaic-ds/vue 1.0.0-beta.5 → 1.0.0-beta.8

package/src/components/tag/MTag.vue

@@ -0,0 +1,154 @@
+<template>
+  <label
+    v-if="type === 'selectable'"
+    :for="id"
+    class="mc-tag"
+    :class="classObject"
+  >
+    <input
+      type="checkbox"
+      class="mc-tag__input"
+      :id="id"
+      :name="name"
+      :checked="modelValue"
+      :disabled="disabled"
+      @change="
+        emit('update:modelValue', ($event.target as HTMLInputElement).checked)
+      "
+      v-bind="$attrs"
+    />
+    <span class="mc-tag__label">{{ label }}</span>
+  </label>
+
+  <button
+    v-else-if="type === 'interactive'"
+    class="mc-tag"
+    type="button"
+    :class="classObject"
+    :disabled="disabled"
+    v-bind="$attrs"
+  >
+    <span class="mc-tag__label">{{ label }}</span>
+  </button>
+
+  <button
+    v-else-if="type === 'contextualised'"
+    class="mc-tag"
+    type="button"
+    :class="classObject"
+    :disabled="disabled"
+    v-bind="$attrs"
+  >
+    <MNumberBadge
+      appearance="inverse"
+      :label="contextualisedNumber"
+      :size="size === 'l' ? 'm' : undefined"
+    />
+    <span class="mc-tag__label">{{ label }}</span>
+  </button>
+
+  <span
+    v-else-if="type === 'removable'"
+    class="mc-tag"
+    :class="classObject"
+    v-bind="$attrs"
+  >
+    <span class="mc-tag__label">{{ label }}</span>
+    <button
+      class="mc-tag-removable__remove"
+      type="button"
+      @click="id && emit('remove-tag', id)"
+    >
+      <CrossCircleFilled24
+        class="mc-tag-removable__icon"
+        aria-hidden="true"
+      />
+      <span class="mc-tag-removable__text">removableLabel</span>
+    </button>
+  </span>
+
+  <!-- informative -->
+  <span v-else class="mc-tag" :class="classObject" v-bind="$attrs">
+    <span class="mc-tag__label">{{ label }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
+import MNumberBadge from '../numberbadge/MNumberBadge.vue';
+/**
+ * A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Defines the behavior and layout of the tag.
+     */
+    type?:
+      | 'informative'
+      | 'interactive'
+      | 'contextualised'
+      | 'removable'
+      | 'selectable';
+    /**
+     * Determines the size of the tag.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * A unique identifier for the tag, used to associate the label with the form element. **Required** when type is 'selectable' or 'removable'.
+     */
+    id?: string;
+    /**
+     * The name attribute for the tag element, typically used for form submission. (only relevant for type: 'selectable').
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the tag.
+     */
+    label: string;
+    /**
+     * The tag's checked state, bound via v-model. Used only for type: 'selectable'.
+     */
+    modelValue?: boolean;
+    /**
+     * If `true`, disables the tag, making it non-interactive. Applicable to selectable, interactive, and contextualised types.
+     */
+    disabled?: boolean;
+    /**
+     * A number displayed in the badge when the tag is contextualised.
+     */
+    contextualisedNumber?: number;
+    /**
+     * Accessible label text for the remove button in removable tags.
+     */
+    removableLabel?: string;
+  }>(),
+  {
+    type: 'informative',
+    contextualisedNumber: 99,
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-tag-${props.type}`]: props.type && props.type != 'informative',
+    [`mc-tag--${props.size}`]: props.size && props.size != 'm',
+  };
+});
+
+const emit = defineEmits<{
+  /**
+   * Emits when the tag value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: boolean): void;
+  /**
+   * Emits when the remove button of a tag is clicked, passing the tag's ID.
+   */
+  (on: 'remove-tag', id: string): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/tag';
+</style>

package/src/main.ts

@@ -1,47 +1,26 @@
-import MBadge from './components/badge/MBadge.vue';
-import MBreadcrumb from './components/breadcrumb/MBreadcrumb.vue';
-import MButton from './components/button/MButton.vue';
-import MCheckbox from './components/checkbox/MCheckbox.vue';
-import MCheckboxGroup from './components/checkboxgroup/MCheckboxGroup.vue';
-import MField from './components/field/MField.vue';
-import MFieldGroup from './components/fieldgroup/MFieldGroup.vue';
-import MIconButton from './components/iconbutton/MIconButton.vue';
-import MLink from './components/link/MLink.vue';
-import MLoader from './components/loader/MLoader.vue';
-import MOverlay from './components/overlay/MOverlay.vue';
-import MPasswordInput from './components/passwordinput/MPasswordInput.vue';
-import MQuantitySelector from './components/quantityselector/MQuantitySelector.vue';
-import MRadio from './components/radio/MRadio.vue';
-import MRadioGroup from './components/radiogroup/MRadioGroup.vue';
-import MSelect from './components/select/MSelect.vue';
-import MStatusBadge from './components/statusbadge/MStatusBadge.vue';
-import MStatusNotification from './components/statusnotification/MStatusNotification.vue';
-import MTextArea from './components/textarea/MTextArea.vue';
-import MTextInput from './components/textinput/MTextInput.vue';
-import MToggle from './components/toggle/MToggle.vue';
-import MToggleGroup from './components/togglegroup/MToggleGroup.vue';
-
-export {
-  MBadge,
-  MBreadcrumb,
-  MButton,
-  MCheckbox,
-  MCheckboxGroup,
-  MField,
-  MFieldGroup,
-  MIconButton,
-  MLink,
-  MLoader,
-  MOverlay,
-  MPasswordInput,
-  MQuantitySelector,
-  MRadio,
-  MRadioGroup,
-  MSelect,
-  MStatusBadge,
-  MStatusNotification,
-  MTextArea,
-  MTextInput,
-  MToggle,
-  MToggleGroup,
-};
+export { default as MBreadcrumb } from './components/breadcrumb/MBreadcrumb.vue';
+export { default as MButton } from './components/button/MButton.vue';
+export { default as MCheckbox } from './components/checkbox/MCheckbox.vue';
+export { default as MCheckboxGroup } from './components/checkboxgroup/MCheckboxGroup.vue';
+export { default as MDivider } from './components/divider/MDivider.vue';
+export { default as MField } from './components/field/MField.vue';
+export { default as MFieldGroup } from './components/fieldgroup/MFieldGroup.vue';
+export { default as MIconButton } from './components/iconbutton/MIconButton.vue';
+export { default as MLink } from './components/link/MLink.vue';
+export { default as MLoader } from './components/loader/MLoader.vue';
+export { default as MNumberBadge } from './components/numberbadge/MNumberBadge.vue';
+export { default as MOverlay } from './components/overlay/MOverlay.vue';
+export { default as MPagination } from './components/pagination/MPagination.vue';
+export { default as MPasswordInput } from './components/passwordinput/MPasswordInput.vue';
+export { default as MQuantitySelector } from './components/quantityselector/MQuantitySelector.vue';
+export { default as MRadio } from './components/radio/MRadio.vue';
+export { default as MRadioGroup } from './components/radiogroup/MRadioGroup.vue';
+export { default as MSelect } from './components/select/MSelect.vue';
+export { default as MStatusBadge } from './components/statusbadge/MStatusBadge.vue';
+export { default as MStatusNotification } from './components/statusnotification/MStatusNotification.vue';
+export { default as MTabs } from './components/tabs/MTabs.vue';
+export { default as MTag } from './components/tag/MTag.vue';
+export { default as MTextArea } from './components/textarea/MTextArea.vue';
+export { default as MTextInput } from './components/textinput/MTextInput.vue';
+export { default as MToggle } from './components/toggle/MToggle.vue';
+export { default as MToggleGroup } from './components/togglegroup/MToggleGroup.vue';

package/src/components/badge/MBadge.spec.ts

@@ -1,16 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-import MBadge from './MBadge.vue';
-
-describe('MBadge component', () => {
-  it('renders properly', () => {
-    const wrapper = mount(MBadge, {
-      props: {
-        label: 99,
-      },
-    });
-
-    expect(wrapper.text()).toContain('99');
-  });
-});