@unbabel/samora-vue3-components 0.0.3

package/src/components/Molecules/SamChipSelect/SamChipSelect.vue

@@ -0,0 +1,229 @@
+<template>
+  <SamMenu
+    :options="menuOptions"
+    :close-on-content-click="!multiple"
+    class="sam-chip-select"
+  >
+    <template #activator="{ on, isMenuOpen, toggle }">
+      <a
+        :class="[`sam-chip-select__menu-activator`, { 'is-disabled': disabled }]"
+        v-on="disabled ? {} : on"
+      >
+        <SamChip
+          sam-type="outlined"
+          :label="label"
+          :disabled="disabled"
+          :active="isChipActive"
+        >
+          <template #append>
+            <div class="d-flex middle-xs">
+              <SamIcon
+                v-if="shouldBeClearable"
+                class="sam-chip-select__clear-icon"
+                icon="interface-delete"
+                size="xs"
+                @click.stop="clear"
+              />
+
+              <SamIcon
+                class="sam-chip-select__expand-icon"
+                :icon="isMenuOpen ? 'arrow-chevron-up' : 'arrow-chevron-down'"
+                size="sm"
+                @click.stop="toggle"
+              />
+            </div>
+          </template>
+
+          <template v-if="label && !$slots.label">
+           {{ label }}
+          </template>
+
+          <slot
+            name="label"
+            :value="selectedValue"
+            :selection="selectedOption"
+          />
+        </SamChip>
+      </a>
+    </template>
+
+    <template v-if="!items.length">
+      <div
+        v-if="!$slots['no-data']"
+        class="sam-chip-select__no-data"
+      >
+        No data to show
+      </div>
+      <template v-else>
+        <slot name="no-data" />
+      </template>
+    </template>
+    <SamSelectList
+      v-else
+      v-model="selectedValue"
+      :items="items"
+      :multiple="multiple"
+      :has-select-all="hasSelectAll"
+      @item-click="onItemSelection"
+    />
+  </SamMenu>
+</template>
+
+<script>
+import SamMenu from '@/components/Molecules/SamMenu/SamMenu.vue';
+import SamChip from '@/components/Atoms/SamChip/SamChip.vue';
+import SamIcon from '@/components/Atoms/SamIcon/SamIcon.vue';
+import SamSelectList from '@/components/Molecules/SamSelectList/SamSelectList.vue';
+import { objectHasOwnProperties } from '@/utils/objectHelper';
+
+export default {
+  name: 'SamChipSelect',
+  components: {
+    SamSelectList,
+    SamIcon,
+    SamMenu,
+    SamChip,
+  },
+  emits: ['item-selection', 'update:modelValue'],
+  props: {
+    /**
+     * The options for the dropdown
+     */
+    items: {
+      type: Array,
+      required: true,
+      default: () => [],
+      validator: (val) => val.every?.((item) => objectHasOwnProperties(item, 'label', 'value')),
+    },
+    /**
+     * The selection value
+     */
+    modelValue: {
+      type: [Number, String, Array],
+      required: false,
+      default: undefined,
+    },
+    /**
+     * The SamMenu options to be applied
+     */
+    menuOptions: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    /**
+     * If the selection is disabled
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * If the current selection can be cleared out
+     * @values true, false
+     */
+    withClear: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Clear value if the current selection can be cleared out
+     */
+    clearValue: {
+      type: [String, Number, undefined, null],
+      required: false,
+      default: null,
+    },
+    /**
+     * If it allows multiple selection
+     */
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * The Chip label
+     */
+    label: {
+      type: [Number, String],
+      required: true,
+    },
+    hasSelectAll: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      selectedValue: this.modelValue ?? (this.multiple ? [] : this.clearValue),
+    };
+  },
+  computed: {
+    isChipActive() {
+      if (this.multiple) {
+        return this.selectedValue?.length > 0;
+      }
+      return this.selectedValue !== this.clearValue;
+    },
+    selectedOption() {
+      if (this.multiple) {
+        return this.items.filter((item) => this.selectedValue.includes(item.value));
+      }
+      return this.items.find((item) => item.value === this.modelValue);
+    },
+    shouldBeClearable() {
+      return this.withClear && this.selectedValue !== this.clearValue;
+    },
+  },
+  watch: {
+    selectedValue: {
+      handler(value) {
+        this.$emit('update:modelValue', value);
+      },
+      deep: true,
+    }
+  },
+  methods: {
+    onItemSelection(item) {
+      this.$emit('item-selection', { item });
+    },
+    clear() {
+      if (this.multiple) {
+        this.selectedValue = [];
+      } else {
+        this.selectedValue = this.clearValue;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.sam-chip-select__menu-activator {
+  display: block;
+
+  .sam-chip-select__clear-icon {
+    margin-left: $size--2;
+  }
+
+  .sam-chip-select__no-data {
+    @extend .text--caption, .p-4;
+    color: $neutral--60;
+    font-style: italic;
+    text-align: center;
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+
+    .sam-select__expand-icon {
+      color: $neutral--50;
+    }
+  }
+}
+</style>

package/src/components/Molecules/SamChipSelect/__tests__/SamChipSelect.spec.ts

@@ -0,0 +1,95 @@
+import SamChipSelect from '@/components/Molecules/SamChipSelect/SamChipSelect.vue';
+import SamSelectList from '@/components/Molecules/SamSelectList/SamSelectList.vue';
+import SamChip from '@/components/Atoms/SamChip/SamChip.vue';
+import { VueWrapper, mount } from '@vue/test-utils';
+import { ComponentPublicInstance, nextTick } from 'vue';
+
+let wrapper: VueWrapper<ComponentPublicInstance<{}, Record<string, typeof SamChipSelect>>>
+type data = { selectedValue: string}
+interface ChipMethods {
+    onItemSelection: (item: {label: string, value: string}) => void
+}
+
+const options = [
+    { label: 'Alfa', value: 'value1' },
+    { label: 'Bravo', value: 'value2' },
+    { label: 'Charlie', value: 'value3' },
+    { label: 'Delta', value: 'value4' },
+    { label: 'Echo', value: 'value5' },
+]
+
+describe('Components ::: SamChipSelect', () => {
+  it('Should exist', () => {
+    expect(SamChipSelect).toBeTruthy();
+  });
+
+  it('Should render correctly', () => {
+    wrapper = mount(SamChipSelect, {
+      props: {
+        items: options,
+      },
+    });
+
+    expect(wrapper.findComponent(SamChip).exists()).toBe(true)
+  });
+
+  it('Renders SamSelectList when items are present', () => {
+    wrapper = mount(SamChipSelect, {
+        props: {
+          items: options
+        },
+      });
+
+    expect(wrapper.findComponent(SamSelectList).exists()).toBe(true);
+  });
+
+  it('Displays the correct label', () => {
+    wrapper = mount(SamChipSelect, {
+        props: {
+          items: options,
+          label: 'This is a label'
+        },
+      });
+    expect(wrapper.findComponent(SamChip).text()).toContain('This is a label');
+  });
+
+  it('Emits update:modelValue when selectedValue changes', async () => {
+    wrapper = mount(SamChipSelect, {
+        props: {
+          items: options
+        },
+      });
+
+    (wrapper.vm as unknown as data).selectedValue = 'value1';
+    await nextTick();
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['value1']);
+  });
+
+  it('Calls clear method on clear icon click', async () => {
+    wrapper = mount(SamChipSelect, {
+        props: {
+          items: options,
+          modelValue: 'value1',
+          withClear: true
+        },
+    });
+    
+    const clearIcon = wrapper.find('.sam-chip-select__clear-icon');
+    await clearIcon.trigger('click');
+    expect(wrapper.vm.selectedValue).toBe(null);
+  });
+
+  it('Emits item-selection event on item selection', () => {
+    wrapper = mount(SamChipSelect, {
+        props: {
+          items: options
+        },
+    });
+
+    const selectedOption =  { label: 'Bravo', value: 'value2' };
+    (wrapper.vm as unknown as ChipMethods).onItemSelection(selectedOption);
+    expect(wrapper.emitted('item-selection')).toBeTruthy();
+    expect(wrapper.emitted('item-selection')?.[0]).toEqual([{ item: selectedOption }]);
+  });
+});

package/src/components/Molecules/SamDateTimeFilter/SamDateTimeFilter.stories.ts

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import SamDateTimeFilter from '@/components/Molecules/SamDateTimeFilter/SamDateTimeFilter.vue';
+import SamFormGroup from '@/components/Molecules/SamFormGroup/SamFormGroup.vue';
+import { DATEPICKER_MODES } from '@/components/Atoms/SamCalendar/SamCalendar.types';
+import { ref } from 'vue';
+
+const meta: Meta<typeof SamDateTimeFilter> = {
+  component: SamDateTimeFilter,
+  tags: ['autodocs'],
+  argTypes: {
+    mode: { control: 'select', options: Object.values(DATEPICKER_MODES) },
+    onlyDate: { control: 'boolean'}
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DateTimeFilter: Story = {
+    name: "Date and Time Picker",
+    render: (args) => ({
+      components: { SamDateTimeFilter },
+      setup() {
+        const date = ref<null | Date>(new Date())
+
+        return { args, date };
+      },
+      template: `    
+        <SamDateTimeFilter v-model='date'/>
+        <p class="mt-2 text--caption">Data: {{ date }}</p>
+    `
+    })
+};
+
+export const DateTimeFilterStates: Story = {
+    name: "DateTimeFilter States",
+    render: (args) => ({
+      components: { SamDateTimeFilter, SamFormGroup },
+      setup() {
+        const onlyDate = ref(null)
+        const onlyTime = ref(null)
+
+        return { args, onlyDate, onlyTime };
+      },
+      template: `    
+      <div style='display: flex;gap:24px;'>
+        <SamFormGroup label='Disabled'>
+          <SamDateTimeFilter :model-value='new Date()' disabled />
+        </SamFormGroup>        
+      <br/>
+      <div style='width:100%'>
+        <SamFormGroup label='Only date' :message="onlyDate || '--'">
+            <SamDateTimeFilter v-model='onlyDate' only-date />
+        </SamFormGroup>
+        </div>
+        <div style='width:100%'>
+        <SamFormGroup label='Only time' :message="onlyTime || '--'">
+            <SamDateTimeFilter v-model='onlyTime' only-time />
+        </SamFormGroup>
+        </div>
+      </div>        
+     `
+    })
+};
+
+export const DateTimeFilterModes: Story = {
+    name: "DateTimeFilter Modes",
+    render: (args) => ({
+      components: { SamDateTimeFilter, SamFormGroup },
+      setup() {
+        const dateSingle = ref(null)
+        const dateRange = ref(null)
+        const dateMultiple = ref(null)
+
+        return { args, dateSingle, dateRange, dateMultiple };
+      },
+      template: `    
+        <SamFormGroup label='Single'>
+        <SamDateTimeFilter v-model='dateSingle' mode='single' />
+        </SamFormGroup>
+        <SamFormGroup label='Multiple'>
+        <SamDateTimeFilter v-model='dateMultiple' mode='multiple' />
+        </SamFormGroup>
+        <SamFormGroup label='Range'>
+        <SamDateTimeFilter v-model='dateRange' mode='range' only-date/>
+        </SamFormGroup>
+    `
+    })
+};

package/src/components/Molecules/SamDateTimeFilter/SamDateTimeFilter.vue

@@ -0,0 +1,262 @@
+<template>
+  <SamMenu
+    class="sam-date-time-filter"
+    v-bind="menuProps"
+    @open="onMenuOpen"
+    @close="onMenuClose"
+  >
+    <template #activator="{ on, isMenuOpen, toggle }">
+      <a
+        :class="['sam-date-time-filter__menu-activator', { 'is-disabled': disabled }]"
+        v-on="disabled ? {} : on"
+        @click.prevent
+      >
+        <SamChip
+          ref="chip"
+          sam-type="outlined"
+          :label="displayDate"
+          :disabled="disabled"
+          :active="isChipActive"
+        >
+          <template #append>
+            <div class="d-flex middle-xs">
+              <SamIcon
+                v-if="withClear && displayDate"
+                class="sam-date-time-filter__clear-icon"
+                icon="interface-close"
+                size="xs"
+                @click.stop="onInputClear"
+              />
+
+              <SamIcon
+                :class="['sam-date-time-filter__expand-icon', { 'is-flipped': isMenuOpen }]"
+                icon="arrow-chevron-down"
+                size="sm"
+                @click.stop="toggle"
+              />
+            </div>
+          </template>
+          <!-- No option selected -->
+          <template v-if="!displayDate">
+            {{ placeholder }}
+          </template>
+
+          <!-- Fallback -->
+          <template v-else>
+            {{ displayDate }}
+          </template>
+        </SamChip>
+      </a>
+    </template>
+
+    <SamCalendar
+      ref="calendar"
+      class="sam-date-time-filter__calendar"
+      v-bind="calendarBoundProps"
+      :model-value="modelValue"
+      :only-date="onlyDate"
+      :only-time="onlyTime"
+      @change="onCalendarDateChange"
+    />
+  </SamMenu>
+</template>
+
+<script>
+import SamMenu from '@/components/Molecules/SamMenu/SamMenu.vue';
+import SamCalendar from '@/components/Atoms/SamCalendar/SamCalendar.vue';
+import SamChip from '@/components/Atoms/SamChip/SamChip.vue';
+import SamIcon from '@/components/Atoms/SamIcon/SamIcon.vue'
+import { formatDate } from '@/utils/formatData/formatData';
+import { DATEPICKER_MODES } from '@/components/Atoms/SamCalendar/SamCalendar.types';
+
+const isCalendarModeValid = (value) => Object.values(DATEPICKER_MODES).includes(value);
+
+export default {
+  name: 'SamDateTimeFilter',
+  components: { SamChip, SamCalendar, SamIcon, SamMenu },
+  emits: ['change', 'open', 'close', 'update:modelValue'],
+  props: {
+    /**
+     * The Datepicker's chip placeholder.
+     */
+    placeholder: {
+      type: String,
+      default: 'Time frame',
+    },
+      /**
+     * Props to be bound to SamMenu component. See SamMenu component props.
+     */
+     menuProps: {
+      type: Object,
+      default: () => ({
+        closeOnContentClick: false,
+      }),
+    },
+    /**
+     * Props to be bound to SamCalendar component. See SamCalendar component props.
+     */
+    calendarProps: {
+      type: Object,
+      default: () => ({}),
+    },
+    /**
+     * Calendar mode to be assigned
+     * @values "single", "range", "multiple"
+     */
+    mode: {
+      type: String,
+      default: null,
+      validator: isCalendarModeValid,
+    },
+    /**
+     * The component's model value
+     * @model
+     */
+    modelValue: {
+      type: [Date, Array],
+      default: null,
+    },
+    /**
+     * The date format to be displayed in the input. It accepts flatpickr date formats.
+     */
+    displayDateFormat: {
+      type: String,
+      default: null,
+    },
+    /**
+     * If the Calendar should be for dates only
+     * @values true, false
+     */
+    onlyDate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * If the Calendar should be for time only
+     * @values true, false
+     */
+    onlyTime: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Disables the input
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * If the Select should display a clear input button
+     * @values true, false
+     */
+    withClear: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    isChipActive() {
+      return !!this.modelValue && !!this.displayDate;
+    },
+    dateFormat() {
+      if (this.displayDateFormat) return `${this.displayDateFormat}`;
+      if (this.onlyDate || this.calendarProps?.onlyDate) return 'd M, Y';
+      if (this.onlyTime || this.calendarProps?.onlyTime) return 'H:i';
+      return 'd M, Y H:i';
+    },
+    datepickerMode() {
+      if (isCalendarModeValid(this.mode)) return this.mode; // mode prop has higher priority
+      if (isCalendarModeValid(this.calendarProps?.mode)) return this.calendarProps.mode;
+      return DATEPICKER_MODES.SINGLE; // sets default if not valid
+    },
+    calendarBoundProps() {
+      return { ...this.calendarProps, mode: this.datepickerMode };
+    },
+    displayDate() {
+      // for single mode
+      if (this.datepickerMode === DATEPICKER_MODES.SINGLE) return this.formatDate(this.modelValue);
+
+      // for multiple and range modes
+      const formattedDates = this.modelValue?.map?.(this.formatDate).filter?.((date) => !!date);
+
+      if (!formattedDates?.length) return null;
+
+      // for multiple mode
+      if (this.datepickerMode === DATEPICKER_MODES.MULTIPLE)
+        return formattedDates.join(`${this.calendarBoundProps?.multipleModeSeparator ?? ', '}`);
+
+      // for ranged mode
+      if (this.datepickerMode === DATEPICKER_MODES.RANGE) {
+        const [startDate, endDate] = this.modelValue;
+
+        const hasSameDateAndTime = startDate?.getTime() === endDate?.getTime()
+        const hasSameDate = startDate?.toDateString() === endDate?.toDateString()
+
+        if(hasSameDateAndTime || (this.onlyDate && hasSameDate)) {
+          return this.formatDate(startDate);
+        }
+
+        return formattedDates.join(' to ') 
+      };
+
+      // for sanity
+      return null;
+    }
+  },
+  methods: {
+    onCalendarDateChange(datepickerPayload) {
+      this.$emit('change', datepickerPayload);
+      this.$emit('update:modelValue', datepickerPayload);
+    },
+    onMenuOpen(menuPayload) {
+      this.$emit('open', menuPayload);
+    },
+    onMenuClose(menuPayload) {
+      this.$emit('close', menuPayload);
+    },
+    onInputClear($event) {
+      $event.stopPropagation();
+      this.$emit('change', Array.isArray(this.modelValue) ? [] : null);
+      this.$emit('update:modelValue', Array.isArray(this.modelValue) ? [] : null);
+      this.$refs.calendar.clear();
+    },
+    formatDate(date) {
+      return formatDate(date, this.dateFormat);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.sam-date-time-filter {
+  width: 100%;
+
+  ::v-deep(&.sam-menu .menu__content) {
+    min-width: max-content;
+    max-width: max-content;
+    padding: 0;
+  }
+
+  .sam-date-time-filter__menu-activator {
+    display: block;
+
+    .sam-filter__expand-icon {
+      transition: rotate 150ms ease-in-out;
+
+      &.is-flipped {
+        rotate: -180deg;
+      }
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+    }
+  }
+}
+</style>