@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/form/UiBmsInputCheckbox.stories.js

@@ -0,0 +1,77 @@
+import UiBmsInputCheckbox from '@/components/form/UiBmsInputCheckbox.vue';
+import { ref } from 'vue';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/BmsInputCheckbox/Ui',
+  component: UiBmsInputCheckbox,
+};
+
+const Template = (args) => ({
+  setup() {
+    const curentValue = ref(args.modelValue);
+    return { args, curentValue };
+  },
+  components: {
+    UiBmsInputCheckbox,
+  },
+  template: `
+      <div>
+        <UiBmsInputCheckbox v-bind="{...args}" v-model="curentValue">
+          <template v-if="args.labelSlot" #label>
+            <span v-html='args.labelSlot'/>
+          </template>
+        </UiBmsInputCheckbox>
+        Valeur de mon champ : {{ curentValue }}
+      </div>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  modelValue: true,
+  name: 'myCheckboxName',
+};
+
+export const WithNotBooleanValue = Template.bind({});
+WithNotBooleanValue.args = {
+  modelValue: false,
+  value: 'Super!',
+  name: 'myCheckboxName',
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  label: 'My label',
+  modelValue: false,
+  name: 'myCheckboxName',
+};
+
+export const WithLabelAsSlot = Template.bind({});
+WithLabelAsSlot.args = {
+  name: 'myCheckboxName',
+  modelValue: false,
+  labelSlot: '<strong>This is a slotted label</strong>',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  name: 'myCheckboxName',
+  label: 'My label',
+  modelValue: false,
+  disabled: true,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  name: 'myCheckboxName',
+  label: 'My label',
+  modelValue: false,
+  error: true,
+};

package/src/components/form/UiBmsInputCheckbox.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="input-checkbox" :class="{ disabled, error }">
+    <label>
+      <input
+        type="checkbox"
+        :disabled="disabled"
+        :name="name"
+        v-model="inputValue"
+        :value="value"
+      />
+      <span v-if="hasLabel" class="input-checkbox-info">
+        <slot name="label">{{ label }}</slot>
+      </span>
+    </label>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, useSlots } from 'vue';
+
+export interface Props {
+  modelValue: any;
+  value?: any;
+  name: string;
+  label?: string;
+  disabled?: boolean;
+  error?: boolean;
+  required?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  value: true,
+  required: false,
+  label: '',
+  disabled: false,
+  errors: () => [],
+});
+
+const slots = useSlots();
+
+const $emits = defineEmits<{
+  (e: 'update:modelValue', value: any): void;
+}>();
+
+const hasLabel = computed(() => slots.label || props.label);
+
+const inputValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val: any) {
+    $emits('update:modelValue', val);
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.input-checkbox {
+  --input-checkbox-default-color: var(--bms-grey-100);
+  --input-checkbox-default-color-checked: var(--bms-main-100);
+  --input-checkbox-default-background-color: transparent;
+
+  width: fit-content;
+
+  label {
+    display: flex;
+    gap: 4px;
+  }
+
+  &.error {
+    --input-checkbox-default-color: var(--bms-danger-color);
+    --input-checkbox-default-color-checked: var(--bms-danger-color);
+  }
+
+  &.disabled {
+    --input-checkbox-default-color: var(--bms-grey-50);
+    --input-checkbox-default-color-checked: var(--bms-grey-50);
+    --input-checkbox-default-background-color: var(--bms-grey-25);
+    pointer-events: none;
+    input-checkbox-info {
+      color: var(--bms-grey-50);
+    }
+  }
+
+  &-info {
+    line-height: 16px;
+    cursor: default;
+  }
+}
+input[type='checkbox'] {
+  appearance: none;
+  margin: 0;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--input-checkbox-default-color);
+  border-radius: 2px;
+  display: grid;
+  place-content: center;
+  background-color: var(--input-checkbox-default-background-color);
+
+  &::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    background-color: var(--input-checkbox-default-color-checked);
+    transform-origin: bottom left;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  }
+
+  &:hover {
+    border: 2px solid var(--input-checkbox-default-color-checked);
+  }
+
+  &:checked {
+    border: 2px solid var(--input-checkbox-default-color-checked);
+    background-color: transparent;
+
+    &::before {
+      transform: scale(1);
+    }
+  }
+}
+</style>

package/src/components/form/UiBmsSwitch.stories.js

@@ -0,0 +1,40 @@
+import UiBmsSwitch from '@/components/form/UiBmsSwitch.vue';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/Switch',
+  component: UiBmsSwitch,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    UiBmsSwitch,
+  },
+  template: `
+    <UiBmsSwitch v-bind="args"/>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const On = Template.bind({});
+On.args = { modelValue: true };
+
+export const Off = Template.bind({});
+Off.args = { modelValue: false };
+
+export const DisabledOn = Template.bind({});
+DisabledOn.args = { disabled: true, modelValue: true };
+
+export const DisabledOff = Template.bind({});
+DisabledOff.args = { disabled: true, modelValue: false };

package/src/components/form/UiBmsSwitch.vue

@@ -0,0 +1,80 @@
+<template>
+  <input
+    type="checkbox"
+    :disabled="disabled"
+    :name="name"
+    v-model="inputValue"
+  />
+  <div class="switch-wrapper" :class="{ isOn: modelValue, disabled }"></div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    name: string;
+    modelValue: boolean;
+  }>(),
+  {
+    disabled: false,
+    modelValue: false,
+  },
+);
+
+const $emits = defineEmits<{
+  (e: 'update:modelValue', value: any): void;
+}>();
+
+const inputValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val: any) {
+    $emits('update:modelValue', val);
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+input {
+  display: none;
+}
+.switch-wrapper {
+  --switch-background-color: var(--bms-grey-25);
+  --switch-color: var(--bms-grey-100);
+  --switch-transform: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 0.25em;
+  background-color: var(--switch-background-color);
+  width: 2em;
+  height: 1em;
+  border-radius: var(--bms-border-radius-xlarge);
+  position: relative;
+  transition: 0.2s;
+
+  &::before {
+    content: '';
+    transition: 0.5s;
+    transform: var(--switch-transform);
+    width: 0.5em;
+    height: 0.5em;
+    background-color: var(--switch-color);
+    display: block;
+    border-radius: var(--bms-border-radius);
+  }
+  &.isOn {
+    --switch-transform: translateX(1em);
+    --switch-background-color: var(--bms-main-100);
+    --switch-color: var(--bms-white);
+  }
+  &.disabled {
+    --switch-background-color: var(--bms-grey-25);
+    --switch-color: var(--bms-grey-50);
+  }
+}
+</style>

package/src/components/layout/BmsCard.stories.js

@@ -0,0 +1,77 @@
+import BmsCard from '@/components/layout/BmsCard.vue';
+
+export default {
+  title: 'Composants/layout/Card',
+  component: BmsCard,
+};
+
+const Template = (args) => ({
+  components: {
+    BmsCard,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsCard v-bind="args" style="width: 300px; height: 200px;">
+      <template #default>
+        <div>This is content</div>
+      </template>
+    </BmsCard>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Animated = Template.bind({});
+Animated.args = { animated: true };
+
+export const Success = Template.bind({});
+Success.args = { type: 'success' };
+
+export const Danger = Template.bind({});
+Danger.args = { type: 'danger' };
+
+export const Warning = Template.bind({});
+Warning.args = { type: 'warning' };
+
+export const Information = Template.bind({});
+Information.args = { type: 'information' };
+
+const TemplateWithAction = (args) => ({
+  components: {
+    BmsCard,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsCard v-bind="args" style="width: 300px; height: 200px;">
+      <template #default>
+        <div>This is content</div>
+      </template>
+      <template #action>
+        action
+      </template>
+    </BmsCard>
+  `,
+});
+
+export const DefaultWithAction = TemplateWithAction.bind({});
+DefaultWithAction.args = {};
+
+export const AnimatedWithAction = TemplateWithAction.bind({});
+AnimatedWithAction.args = { animated: true };
+
+export const SuccessWithAction = TemplateWithAction.bind({});
+SuccessWithAction.args = { type: 'success' };
+
+export const DangerWithAction = TemplateWithAction.bind({});
+DangerWithAction.args = { type: 'danger' };
+
+export const WarningWithAction = TemplateWithAction.bind({});
+WarningWithAction.args = { type: 'warning' };
+
+export const InformationWithAction = TemplateWithAction.bind({});
+InformationWithAction.args = { type: 'information' };

package/src/components/layout/BmsCard.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="card" :class="`card--${props.type.toLocaleLowerCase()}`">
+    <div ref="blob" class="blob" v-show="animated" />
+    <div
+      ref="mainComponent"
+      class="card__body"
+      :class="{ animated, hasAction: !!$slots.action }"
+    >
+      <div class="card__body__content">
+        <slot></slot>
+      </div>
+      <div class="card__body__action" v-if="!!$slots.action">
+        <slot name="action"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { StatusType } from '@/models';
+import { ref } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    animated?: boolean;
+
+    type?: StatusType;
+  }>(),
+  {
+    animated: false,
+    type: StatusType.Default,
+  },
+);
+
+const blob = ref<HTMLDivElement | null>(null);
+const mainComponent = ref<HTMLDivElement | null>(null);
+
+const onMouseMove = (e: MouseEvent) => {
+  if (!!props.animated && blob.value && mainComponent.value) {
+    const rec = mainComponent.value.getBoundingClientRect();
+    const x = e.clientX - rec.left - rec.width / 2;
+    const y = e.clientY - rec.top - rec.height / 2;
+    blob.value?.animate([{ transform: `translate(${x}px, ${y}px)` }], {
+      duration: 300,
+      fill: 'forwards',
+    });
+  }
+};
+window.addEventListener('mousemove', onMouseMove);
+</script>
+
+<style lang="scss" scoped>
+.card {
+  --summary-card-background-color: rgba(255, 255, 255, 0.5);
+  --summary-card-color: var(--bms-font-color);
+  --card-margin: 2px;
+  border: 1px solid var(--bms-grey-10);
+  border-radius: var(--bms-border-radius-large);
+
+  position: relative;
+  overflow: hidden;
+
+  &.card--information {
+    --summary-card-color: white;
+    --summary-card-background-color: var(--bms-main-100);
+  }
+
+  &.card--success {
+    --summary-card-color: white;
+    --summary-card-background-color: var(--bms-success-color);
+  }
+
+  &.card--warning {
+    --summary-card-color: white;
+    --summary-card-background-color: var(--bms-warning-color);
+  }
+
+  &.card--danger {
+    --summary-card-color: white;
+    --summary-card-background-color: var(--bms-danger-color);
+  }
+
+  --card-content-border-radius: var(--bms-border-radius-large);
+  .hasAction {
+    --card-content-border-radius: var(--bms-border-radius-large)
+      var(--bms-border-radius-large) 0 0;
+    cursor: pointer;
+  }
+
+  &__body {
+    position: relative;
+    min-height: 50px;
+    min-width: 50px;
+    margin: var(--card-margin);
+    width: calc(100% - 2 * var(--card-margin));
+    height: calc(100% - 2 * var(--card-margin));
+
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+
+    &__content {
+      height: 100%;
+      border-radius: var(--card-content-border-radius);
+      background-color: var(--summary-card-background-color);
+      backdrop-filter: blur(40px);
+      color: var(--summary-card-color);
+    }
+
+    &__action {
+      border-top: 1px solid var(--bms-grey-10);
+      border-radius: 0 0 var(--bms-border-radius-large)
+        var(--bms-border-radius-large);
+      background-color: var(--bms-white);
+      color: var(--bms-main-100);
+      padding: 0.5em;
+      cursor: pointer;
+    }
+  }
+
+  .blob {
+    transform: translate(10px, 10px);
+    width: 60%;
+    height: 60%;
+    min-height: 50px;
+    min-width: 50px;
+    background-color: var(--bms-main-25);
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(10px);
+  }
+}
+</style>

package/src/components/layout/BmsContentPageLayout.vue

@@ -0,0 +1,92 @@
+<template>
+  <div :class="wrapperClasses">
+    <div class="page__breadcrumb">
+      <slot name="breadcrumb" />
+    </div>
+    <slot name="tabs" />
+    <div class="page__header">
+      <slot name="header" />
+    </div>
+
+    <main>
+      <slot />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{ size?: 'small' | 'medium' | 'large' | 'full' }>(),
+  { size: 'large' },
+);
+const wrapperClasses = computed(() => `page page--${props.size}`);
+</script>
+
+<style lang="scss" scoped>
+.page {
+  margin: 0 auto;
+  width: var(--wrapper-width, calc(100% - 3.2rem));
+  max-width: 126rem;
+  padding: 2em 0;
+  min-height: calc(100% - var(--bms-header-height));
+  display: flex;
+  flex-direction: column;
+  gap: 2em;
+
+  $sizes: (
+    'small': 80rem,
+    'medium': 126rem,
+    'large': 144rem,
+    'full': 100%,
+  );
+
+  @each $type, $size in $sizes {
+    &--#{$type} {
+      max-width: #{$size};
+    }
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  &__tabs,
+  &__breadcrumb,
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &:empty {
+      display: none;
+    }
+
+    ::v-deep(h1, h2, h3, h4, h5) {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  :deep(.header) {
+    width: 100%;
+
+    .title {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .actions {
+      flex-grow: 1;
+      display: flex;
+      justify-content: flex-end;
+
+      .add-button {
+        text-align: end;
+      }
+    }
+  }
+}
+</style>

package/src/components/layout/BmsForm.stories.js

@@ -0,0 +1,30 @@
+import BmsForm from '@/components/layout/BmsForm.vue';
+
+export default {
+  title: 'Composants/layout/Form',
+  component: BmsForm,
+};
+
+const Template = (args) => ({
+  components: {
+    BmsForm,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsForm v-bind="args">
+      <template #organization>
+        <p>custom slot you can define whith any name(organization)</p>
+      </template>    
+      <template #actions>
+        <div>Slot for Actions components</div>
+      </template>
+      <template #site>
+        <p>custom slot you can define whith any name (site)</p>
+      </template>
+    </BmsForm>
+  `,
+});
+
+export const Default = Template.bind({});

package/src/components/layout/BmsForm.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="form-section">
+    <template v-for="(_, name) in slots">
+      <section v-if="!slotIsAction(name)" :style="'border'">
+        <slot :name="name" />
+      </section>
+    </template>
+    <template v-for="(_, name) in slots">
+      <div v-if="slotIsAction(name)" class="actions">
+        <slot name="actions" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.form-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+
+  section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 1em;
+  }
+}
+</style>
+<script lang="ts" setup>
+const slots = defineSlots();
+
+const slotIsAction = (slotName: string): boolean => {
+  return slotName === 'actions';
+};
+</script>