@milaboratories/uikit 1.2.3

package/src/components/PlBtnGroup/PlBtnGroup.vue

@@ -0,0 +1,82 @@
+<script lang="ts">
+/**
+ * A component for selecting one value from a list of options
+ */
+export default {
+  name: 'PlBtnGroup',
+};
+</script>
+
+<script lang="ts" setup generic="M = unknown">
+import './pl-btn-group.scss';
+import { useSlots } from 'vue';
+import { PlTooltip } from '@/components/PlTooltip';
+import InnerBorder from '@/utils/InnerBorder.vue';
+import type { SimpleOption } from '@/types';
+
+const slots = useSlots();
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the model value is updated.
+   */
+  (e: 'update:modelValue', value: M): void;
+}>();
+
+const emitModel = (v: M) => emit('update:modelValue', v);
+
+defineProps<{
+  /**
+   * The current selected value.
+   */
+  modelValue?: M;
+  /**
+   * The label text for the component (optional)
+   */
+  label?: string;
+  /**
+   * List of available options for the component
+   */
+  options: Readonly<SimpleOption<M>[]>;
+  /**
+   * If `true`, the component is disabled and cannot be interacted with.
+   */
+  disabled?: boolean;
+  /**
+   * A helper text displayed below the component when there are no errors (optional).
+   */
+  helper?: string;
+  /**
+   * Error message displayed below the component (optional)
+   */
+  error?: string;
+}>();
+</script>
+
+<template>
+  <div class="ui-btn-group" :class="{ disabled }">
+    <label v-if="label">
+      <span>{{ label }}</span>
+      <PlTooltip v-if="slots.tooltip" class="info" position="top">
+        <template #tooltip>
+          <slot name="tooltip" />
+        </template>
+      </PlTooltip>
+    </label>
+    <InnerBorder class="ui-btn-group__container">
+      <div
+        v-for="(opt, i) in options"
+        :key="i"
+        class="ui-btn-group__option"
+        :tabindex="modelValue === opt.value || disabled ? undefined : 0"
+        :class="{ active: modelValue === opt.value }"
+        @keydown.enter="emitModel(opt.value)"
+        @click="emitModel(opt.value)"
+      >
+        {{ opt.text }}
+      </div>
+    </InnerBorder>
+    <div v-if="helper" class="ui-btn-group__helper">{{ helper }}</div>
+    <div v-else-if="error" class="ui-btn-group__error">{{ error }}</div>
+  </div>
+</template>

package/src/components/PlBtnGroup/index.ts

@@ -0,0 +1 @@
+export { default as PlBtnGroup } from './PlBtnGroup.vue';

package/src/components/PlBtnGroup/pl-btn-group.scss

@@ -0,0 +1,124 @@
+@import "@/assets/mixins";
+
+.ui-btn-group {
+  box-sizing: content-box;
+  position: relative;
+  min-height: 32px;
+  font-family: var(--control-font-family);
+
+  label {
+    margin-bottom: 6px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: 500;
+    font-size: var(--font-size-base);
+    line-height: 20px;
+  }
+
+  &__helper {
+    @include field-helper();
+  }
+
+  &__error {
+    @include field-error();
+  }
+
+  .inner-border {
+    min-height: 32px;
+    &::after {
+      border: 1px solid var(--color-border-default);
+      border-radius: 6px;
+    }
+  }
+
+  &__container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: content-box;
+    border-radius: 6px;
+    font-weight: 500;
+    font-size: 10px;
+    text-align: center;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    user-select: none;
+  }
+
+  &__option {
+    position: relative;
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 0 12px;
+    align-self: stretch;
+    cursor: pointer;
+    outline: none;
+
+    font-weight: 600;
+    font-size: 11px;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    color: var(--btn-switcher-option-color);
+
+    &:hover:not(.active) {
+      background-color: var(--btn-sec-hover-grey);
+    }
+
+    &:first-child {
+      border-top-left-radius: 6px;
+      border-bottom-left-radius: 6px;
+    }
+
+    &:last-child {
+      border-top-right-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+
+    &:focus-visible {
+      @include border-fix {
+        border: 2px solid var(--border-color-focus);
+        border-radius: inherit;
+        z-index: 1;
+      }
+    }
+
+    &:not(.active) + .ui-btn-group__option:not(.active) {
+      &::before {
+        content: '';
+        position: absolute;
+        width: 1px;
+        height: 16px;
+        left: -1px;
+        top: 50%;
+        transform: translateY(-50%);
+        background-color: var(--color-border-default);
+      }
+    }
+
+    &.active {
+      background: var(--btn-switcher-bg);
+      border: var(--btn-switcher-active-option-border);
+      box-shadow: var(--btn-group-shape-shadow);
+      color: var(--btn-switcher-active-option-color);
+      border-radius: 6px;
+      z-index: 1;
+      padding: 0 11px;
+    }
+  }
+
+  &.disabled {
+    --color-border-default: var(--color-dis-01);
+    --btn-switcher-bg: var(--color-dis-01);
+    --btn-switcher-option-color: var(--color-dis-01);
+    --btn-switcher-active-option-color: var(--color-dis-00);
+    --btn-switcher-active-option-border: 0px;
+    pointer-events: none;
+    // @TODO
+    tab-index: unset !important;
+  }
+}

package/src/components/PlBtnLink/PlBtnLink.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import './pl-btn-link.scss';
+import type { MaskIconName16, Size } from '@/types';
+import BtnSecondary from '@/components/PlBtnSecondary/PlBtnSecondary.vue';
+import { ref } from 'vue';
+
+const props = defineProps<{
+  /**
+   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.
+   */
+  loading?: boolean;
+  /**
+   * Size of the button, the default value is 'medium'
+   */
+  size?: Size;
+  /**
+   * Icon to display
+   */
+  icon?: MaskIconName16;
+  /**
+   * If `true`, an icon is displayed before the text.
+   */
+  reverse?: boolean;
+  /**
+   * Justify text at the center (is `true` by default)
+   */
+  justifyCenter?: boolean;
+  /**
+   * If `true`, the button is disabled and cannot be interacted with.
+   */
+  disabled?: boolean;
+}>();
+
+const hover = ref(false);
+</script>
+
+<template>
+  <div class="ui-btn-link" :class="{ disabled, loading, hover }" @mouseover="hover = true" @mouseleave="hover = false">
+    <BtnSecondary round :hover="hover" v-bind="props" />
+    <slot />
+  </div>
+</template>

package/src/components/PlBtnLink/index.ts

@@ -0,0 +1 @@
+export { default as PlBtnLink } from './PlBtnLink.vue';

package/src/components/PlBtnLink/pl-btn-link.scss

@@ -0,0 +1,16 @@
+@import "@/assets/mixins";
+
+.ui-btn-link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  --color-text: var(--txt-01);
+  color: var(--txt-01);
+  &.disabled,&.loading {
+    color: var(--color-dis-01);
+  }
+  &:hover {
+    cursor: pointer;
+  }
+}

package/src/components/PlBtnPrimary/PlBtnPrimary.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+/**
+ * Primary button
+ */
+export default {
+  name: 'PlBtnPrimary',
+};
+</script>
+
+<script lang="ts" setup>
+import './pl-btn-primary.scss';
+import type { MaskIconName16, Size } from '@/types';
+import BtnBase from '@/base/BtnBase.vue';
+
+const props = defineProps<{
+  /**
+   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.
+   */
+  loading?: boolean;
+  /**
+   * Size of the button, the default value is 'medium'
+   */
+  size?: Size;
+  /**
+   * If `true` the shape is round.
+   */
+  round?: boolean;
+  /**
+   * Icon to display
+   */
+  icon?: MaskIconName16;
+  /**
+   * If `true`, an icon is displayed before the text.
+   */
+  reverse?: boolean;
+  /**
+   * Justify text at the center
+   */
+  justifyCenter?: boolean;
+}>();
+</script>
+
+<template>
+  <BtnBase class="ui-btn-primary" v-bind="props">
+    <slot />
+  </BtnBase>
+</template>

package/src/components/PlBtnPrimary/__tests__/BtnPrimary.spec.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import BtnPrimary from '../PlBtnPrimary.vue';
+
+describe('BtnPrimary', () => {
+  it('renders properly', () => {
+    const wrapper = mount(BtnPrimary, {
+      slots: {
+        default: 'Button text',
+      },
+    });
+    expect(wrapper.text()).toContain('Button text');
+  });
+});

package/src/components/PlBtnPrimary/index.ts

@@ -0,0 +1 @@
+export { default as PlBtnPrimary } from './PlBtnPrimary.vue';

package/src/components/PlBtnPrimary/pl-btn-primary.scss

@@ -0,0 +1,29 @@
+@import "@/assets/mixins";
+
+.ui-btn-primary {
+  @include base-btn;
+
+  --color-btn-hover: var(--color-primary-hover);
+  --color-btn-background: var(--color-primary-default);
+  --btn-disabled-bg: var(--color-dis-01);
+  --shape-shadow: var(--btn-shape-shadow);
+
+  background-color: var(--color-btn-background);
+  border: none;
+
+  --append-shadow: inset 0 0 0 1px #110529;
+
+  &.loading {
+    background: rgba(7, 5, 41, 0.8);
+  }
+
+  &:disabled {
+    background-color: var(--btn-disabled-bg);
+    box-shadow: none !important;
+    cursor: auto;
+  }
+
+  &:active {
+    --shape-shadow: 0 0 0 0 transparent;
+  }
+}

package/src/components/PlBtnSecondary/PlBtnSecondary.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+/**
+ * Secondary button
+ */
+export default {
+  name: 'PlBtnSecondary',
+};
+</script>
+
+<script lang="ts" setup>
+import './pl-btn-secondary.scss';
+import type { MaskIconName16, Size } from '@/types';
+import BtnBase from '@/base/BtnBase.vue';
+
+const props = defineProps<{
+  /**
+   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.
+   */
+  loading?: boolean;
+  /**
+   * Size of the button, the default value is 'medium'
+   */
+  size?: Size;
+  /**
+   * If `true` the shape is round.
+   */
+  round?: boolean;
+  /**
+   * Icon to display
+   */
+  icon?: MaskIconName16;
+  /**
+   * If `true`, an icon is displayed before the text.
+   */
+  reverse?: boolean;
+  /**
+   * Justify text at the center
+   */
+  justifyCenter?: boolean;
+}>();
+</script>
+
+<template>
+  <BtnBase v-bind="props" class="ui-btn-secondary">
+    <slot />
+  </BtnBase>
+</template>

package/src/components/PlBtnSecondary/index.ts

@@ -0,0 +1 @@
+export { default as PlBtnSecondary } from './PlBtnSecondary.vue';

package/src/components/PlBtnSecondary/pl-btn-secondary.scss

@@ -0,0 +1,26 @@
+@import "@/assets/mixins";
+
+.ui-btn-secondary {
+  @include base-btn;
+
+  --color-border: var(--color-border-default);
+  --color-text: var(--txt-01);
+  --color-btn-hover: var(--btn-sec-hover-grey);
+
+  border: 1px solid var(--color-border);
+  background: transparent;
+
+  &:disabled {
+    --color-text: var(--color-dis-01);
+    --color-border: var(--color-dis-01);
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    border-width: 0;
+  }
+
+  &:active {
+    --drop-shadow: inset 0px 3px 0px rgba(36, 34, 61, 0.12);
+  }
+}

package/src/components/PlCheckbox/PlCheckbox.vue

@@ -0,0 +1,40 @@
+<script lang="ts">
+/** Component for boolean model manipulation */
+export default {
+  name: 'PlCheckbox',
+};
+</script>
+
+<script lang="ts" setup>
+import { useSlots } from 'vue';
+import './pl-checkbox.scss';
+import PlCheckboxBase from './PlCheckboxBase.vue';
+
+defineEmits<{
+  /**
+   * Emitted when the model value is updated.
+   */
+  (e: 'update:modelValue', value: boolean): void;
+}>();
+
+const props = defineProps<{
+  /**
+   * The current boolean value of the checkbox.
+   */
+  modelValue: boolean;
+  /**
+   * If `true`, the checkbox is disabled and cannot be interacted with.
+   */
+  disabled?: boolean;
+}>();
+
+const slots = useSlots();
+</script>
+
+<template>
+  <div v-if="slots['default']" class="pl-checkbox" :class="{ disabled }">
+    <PlCheckboxBase v-bind="props" @update:model-value="$emit('update:modelValue', $event)" />
+    <label @click="$emit('update:modelValue', !$props.modelValue)"><slot /></label>
+  </div>
+  <PlCheckboxBase v-else v-bind="props" @update:model-value="$emit('update:modelValue', $event)" />
+</template>

package/src/components/PlCheckbox/PlCheckboxBase.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import './pl-checkbox-base.scss';
+import { computed } from 'vue';
+
+defineEmits(['update:modelValue']);
+
+const props = defineProps<{
+  modelValue: boolean;
+  disabled?: boolean;
+}>();
+
+const checked = computed(() => props.modelValue);
+</script>
+
+<template>
+  <div
+    tabindex="0"
+    class="pl-checkbox-base"
+    :class="{ checked, disabled }"
+    @click="$emit('update:modelValue', !modelValue)"
+    @keydown.enter="$emit('update:modelValue', !modelValue)"
+  />
+</template>

package/src/components/PlCheckbox/__tests__/PlCheckbox.spec.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import PlCheckbox from '../PlCheckbox.vue';
+
+describe('PlCheckbox', () => {
+  it('renders properly', async () => {
+    const wrapper = mount(PlCheckbox, {
+      slots: {
+        default: 'Slot text',
+      },
+      props: {
+        modelValue: false,
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+      },
+    });
+
+    expect(wrapper.text()).toContain('Slot text');
+
+    await wrapper.find('.pl-checkbox-base').trigger('click');
+    expect(wrapper.props('modelValue')).toBe(true);
+
+    await wrapper.find('.pl-checkbox-base').trigger('click');
+    expect(wrapper.props('modelValue')).toBe(false);
+
+    await wrapper.find('.pl-checkbox-base').trigger('click');
+    expect(wrapper.props('modelValue')).toBe(true);
+  });
+});

package/src/components/PlCheckbox/index.ts

@@ -0,0 +1 @@
+export { default as PlCheckbox } from './PlCheckbox.vue';

package/src/components/PlCheckbox/pl-checkbox-base.scss

@@ -0,0 +1,31 @@
+@import "@/assets/mixins";
+
+.pl-checkbox-base {
+  --base-icon: url('@/assets/images/24_checkbox-base.svg');
+  --checked-icon: url('@/assets/images/24_checkbox-checked.svg');
+  --disabled-icon: url('@/assets/images/24_checkbox-disabled.svg');
+  background-color: red;
+  cursor: pointer;
+  outline: none;
+  border-radius: 4px;
+  @include icon(var(--base-icon), 24px);
+
+  &.checked {
+    @include icon(var(--checked-icon), 24px);
+  }
+
+  &.disabled {
+    @include icon(var(--disabled-icon), 24px);
+    pointer-events: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px var(--border-color-focus);
+  }
+
+  [data-theme="dark"] & {
+    --base-icon: url('@/assets/images/24_checkbox-base-dark.svg');
+    --checked-icon: url('@/assets/images/24_checkbox-checked-dark.svg');
+    --disabled-icon: url('@/assets/images/24_checkbox-disabled-dark.svg');
+  }
+}

package/src/components/PlCheckbox/pl-checkbox.scss

@@ -0,0 +1,58 @@
+@import "@/assets/mixins";
+
+.pl-checkbox-base {
+  --base-icon: url('@/assets/images/24_checkbox-base.svg');
+  --checked-icon: url('@/assets/images/24_checkbox-checked.svg');
+  --disabled-icon: url('@/assets/images/24_checkbox-disabled.svg');
+  --disabled-checked-icon: url('@/assets/images/24_checkbox-disabled-checked.svg');
+
+  cursor: pointer;
+  outline: none;
+  border-radius: 4px;
+  @include icon(var(--base-icon), 24px);
+
+  &.checked {
+    @include icon(var(--checked-icon), 24px);
+  }
+
+  &.disabled {
+    @include icon(var(--disabled-icon), 24px);
+    pointer-events: none;
+  }
+
+  &.disabled:is(.checked) {
+    @include icon(var(--disabled-checked-icon), 24px);
+    pointer-events: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px var(--border-color-focus);
+  }
+
+  [data-theme="dark"] & {
+    --base-icon: url('@/assets/images/24_checkbox-base-dark.svg');
+    --checked-icon: url('@/assets/images/24_checkbox-checked-dark.svg');
+    --disabled-icon: url('@/assets/images/24_checkbox-disabled-dark.svg');
+  }
+}
+
+.pl-checkbox {
+  --color-label: var(--color-text);
+  --cursor-label: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  &.disabled {
+    --color-label: var(--color-dis-01);
+    --cursor-label: default;
+    pointer-events: none;
+  }
+  > label {
+    user-select: none;
+    color: var(--color-label);
+    cursor: var(--cursor-label);
+    font-size: 14px;
+    font-weight: 500;
+  }
+}

package/src/components/PlCheckboxGroup/PlCheckboxGroup.vue

@@ -0,0 +1,56 @@
+<script lang="ts">
+/**
+ * Component for selecting multiple values from a list of options
+ */
+export default {
+  name: 'PlCheckboxGroup',
+};
+</script>
+
+<script lang="ts" setup generic="M = unknown">
+import './pl-checkbox-group.scss';
+import type { SimpleOption } from '@/types';
+import PlCheckboxBase from '@/components/PlCheckbox/PlCheckboxBase.vue';
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: M[]): void;
+}>();
+
+const props = defineProps<{
+  /**
+   * The current selected values.
+   */
+  modelValue: M[];
+  /**
+   * The label text for the component (optional)
+   */
+  label?: string;
+  /**
+   * List of available options for the component
+   */
+  options: SimpleOption<M>[];
+  /**
+   * If `true`, the component is disabled and cannot be interacted with.
+   */
+  disabled?: boolean;
+}>();
+
+const hasValue = (value: M) => {
+  return props.modelValue.includes(value);
+};
+
+const updateModel = (value: M) => {
+  const values = props.modelValue ?? [];
+  emit('update:modelValue', hasValue(value) ? values.filter((v) => v !== value) : [...values, value]);
+};
+</script>
+
+<template>
+  <div class="ui-checkbox-group" :class="{ disabled }">
+    <label v-if="label">{{ label }}</label>
+    <div v-for="(opt, i) in options" :key="i">
+      <PlCheckboxBase :disabled="disabled" :label="opt.text" :model-value="hasValue(opt.value)" @update:model-value="() => updateModel(opt.value)" />
+      <label @click.stop="() => updateModel(opt.value)">{{ opt.text }}</label>
+    </div>
+  </div>
+</template>