@antify/ui 1.0.0

package/dist/components/inputs/AntSwitch.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import AntField from '../forms/AntField.vue';
+import {computed, onMounted, watch} from 'vue';
+import AntSkeleton from '../AntSkeleton.vue';
+import {InputState, Size} from '../../enums';
+import {hasSlotContent} from '../../utils';
+
+const emit = defineEmits(['update:modelValue', 'input', 'blur', 'validate']);
+const props = withDefaults(defineProps<{
+  modelValue: boolean | null;
+  label?: string;
+  description?: string;
+  skeleton?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  size?: Size;
+  state?: InputState
+  messages?: string[]
+}>(), {
+  size: Size.md,
+  state: InputState.base,
+  messages: () => []
+});
+const _value = computed({
+  get: () => props.modelValue,
+  set: (val: boolean | null) => {
+    emit('update:modelValue', val);
+    emit('input', val);
+  }
+});
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
+const buttonClasses = computed(() => {
+  const classes: { [key: string]: boolean } = {
+    'relative inline-flex flex-shrink-0': true,
+    'focus:outline-none': true,
+    'rounded-full ease-in-out duration-200': true,
+    'focus-within:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
+    'focus-within:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
+    'h-5 w-9': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
+    'h-4 w-[30px]': props.size === Size.xs || props.size === Size.xs2,
+    'bg-neutral-300': !_value.value,
+    'invisible': props.skeleton,
+    // Disabled
+    'opacity-50 cursor-not-allowed': props.disabled,
+    'cursor-default': props.readonly
+  };
+  const colorVariant = {
+    [InputState.base]: 'focus-within:ring-primary-200',
+    [InputState.danger]: 'focus-within:ring-danger-200 outline outline-1 -outline-offset-1 outline-danger-500',
+    [InputState.info]: 'focus-within:ring-info-200 outline outline-1 -outline-offset-1 outline-info-500',
+    [InputState.success]: 'focus-within:ring-success-200 outline outline-1 -outline-offset-1 outline-success-500',
+    [InputState.warning]: 'focus-within:ring-warning-200 outline outline-1 -outline-offset-1 outline-warning-500',
+  };
+  const activeColorVariant = {
+    [InputState.base]: 'bg-primary-500',
+    [InputState.danger]: 'bg-danger-500',
+    [InputState.info]: 'bg-info-500',
+    [InputState.success]: 'bg-success-500',
+    [InputState.warning]: 'bg-warning-500',
+  };
+
+  classes[colorVariant[props.state]] = !hasInputState.value;
+  classes[activeColorVariant[props.state]] = !!_value.value;
+
+  return classes;
+});
+const ballClasses = computed(() => ({
+  'pointer-events-none inline-block rounded-full bg-neutral-100 shadow transform ring-0 transition ease-in-out duration-200': true,
+  'h-4 w-4 translate-y-0.5': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
+  'translate-x-[1.125rem]': _value.value && (props.size === Size.lg || props.size === Size.md || props.size === Size.sm),
+  'translate-x-0.5': !_value.value && (props.size === Size.lg || props.size === Size.md || props.size === Size.sm),
+  'h-3.5 w-3.5  translate-y-[1px]': props.size === Size.xs || props.size === Size.xs2,
+  'translate-x-[.925rem]': _value.value && (props.size === Size.xs || props.size === Size.xs2),
+  'translate-x-[1px]': !_value.value && (props.size === Size.xs || props.size === Size.xs2),
+  'invisible': props.skeleton
+}));
+const valueClasses = computed(() => ({
+  'text-for-white-bg-font': true,
+  'text-sm': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
+  'text-xs': props.size === Size.xs || props.size === Size.xs2,
+  'opacity-50 cursor-not-allowed': props.disabled,
+  'cursor-pointer': !hasInputState.value,
+}));
+const fieldSize = computed(() => {
+  if (props.size === Size.lg) {
+    return Size.lg;
+  }
+
+  if (props.size === Size.md) {
+    return Size.md;
+  }
+
+  if (props.size === Size.sm) {
+    return Size.sm;
+  }
+
+  if (props.size === Size.xs) {
+    return Size.xs;
+  }
+
+  return Size.xs2;
+
+});
+
+/**
+ * Validations
+ */
+watch(() => props.skeleton, (val) => {
+  if (!val && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+watch(_value, () => {
+  if (props.messages.length > 0) {
+    emit('validate', props.modelValue);
+  }
+});
+onMounted(() => {
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+
+function changeValue() {
+  if (!hasInputState.value) {
+    _value.value = !_value.value;
+  }
+}
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :description="description"
+    :skeleton="skeleton"
+    :state="state"
+    :messages="messages"
+    :expanded="false"
+  >
+    <div class="relative w-fit flex items-center gap-1.5">
+      <div class="relative w-fit flex items-center">
+        <button
+          v-bind="$attrs"
+          type="button"
+          :class="buttonClasses"
+          role="switch"
+          :aria-checked="!!_value"
+          :disabled="disabled"
+          :tabindex="hasInputState ? -1 : 0"
+          @click="changeValue"
+          @blur="onBlur"
+        >
+          <span
+            aria-hidden="true"
+            :class="ballClasses"
+          >
+            <slot name="icon"/>
+          </span>
+        </button>
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded-full
+        />
+      </div>
+
+      <div
+        v-if="hasSlotContent($slots['default'])"
+        class="relative flex items-center"
+        :class="props.size === Size.lg || props.size === Size.md ||props.size === Size.sm ? 'h-5' : 'h-4'"
+      >
+        <span :class="valueClasses">
+          <slot/>
+        </span>
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded
+          class="l-1.5"
+        />
+      </div>
+    </div>
+  </AntField>
+</template>

package/dist/components/inputs/AntSwitcher.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import AntField from '../forms/AntField.vue';
+import AntButton from '../buttons/AntButton.vue';
+import {faChevronLeft, faChevronRight} from '@fortawesome/free-solid-svg-icons';
+import AntSkeleton from '../AntSkeleton.vue';
+import {type SwitcherOption} from './__types/AntSwitcher.types';
+import {State, Grouped, InputState, Size} from '../../enums';
+import {computed, onMounted, watch} from 'vue';
+
+const emit = defineEmits(['update:modelValue', 'validate', 'blur']);
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  options: string[] | SwitcherOption[];
+  label?: string;
+  description?: string;
+  skeleton?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  state?: InputState;
+  size?: Size,
+  messages?: string[];
+}>(), {
+  state: InputState.base,
+  size: Size.md,
+  messages: () => []
+});
+const _value = computed({
+  get() {
+    const found = props.options.find((option: string | SwitcherOption) =>
+      typeof option === 'string' ? option === props.modelValue : option.value === props.modelValue);
+
+    if (!found) {
+      return props.options[0];
+    }
+
+    return found;
+  },
+  set(val: string | SwitcherOption) {
+    emit('update:modelValue', typeof val === 'string' ? val : val.value);
+  }
+});
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
+const containerClasses = computed(() => {
+  const classes: { [key: string]: boolean } = {
+    'flex relative ring-primary/25 rounded-md outline-none': true,
+    'focus-within:ring-2': (props.size === Size.xs2 || props.size === Size.xs || props.size === Size.sm) && !hasInputState.value,
+    'focus-within:ring-4': (props.size === Size.md || props.size === Size.lg) && !hasInputState.value,
+  };
+  const colorVariant = {
+    [InputState.base]: 'focus-within:ring-primary-200',
+    [InputState.danger]: 'focus-within:ring-danger-200',
+    [InputState.info]: 'focus-within:ring-info-200',
+    [InputState.success]: 'focus-within:ring-success-200',
+    [InputState.warning]: 'focus-within:ring-warning-200',
+  };
+
+  classes[colorVariant[props.state]] = true;
+
+  return classes;
+});
+const itemClasses = computed(() => {
+  const classes: { [key: string]: boolean } = {
+    'grow text-center text-black relative outline outline-1 -outline-offset-1': true,
+    'p-1 text-xs ': props.size === Size.xs2,
+    'p-1.5 text-xs ': props.size === Size.xs,
+    'p-1.5 text-sm ': props.size === Size.sm,
+    'p-2 text-sm ': props.size === Size.md,
+    'p-2.5 text-sm ': props.size === Size.lg,
+    'invisible': props.skeleton,
+    'opacity-50 cursor-not-allowed': props.disabled,
+  };
+
+  const colorVariant = {
+    [InputState.danger]: 'outline-danger-500 bg-danger-100',
+    [InputState.base]: 'outline-neutral-300 bg-white',
+    [InputState.info]: 'outline-info-500 bg-info-100',
+    [InputState.success]: 'outline-success-500 bg-success-100',
+    [InputState.warning]: 'outline-warning-500 bg-warning-100',
+  };
+
+  classes[colorVariant[props.state]] = true;
+
+  return classes;
+});
+
+/**
+ * Validate default value if given after delayed data fetching.
+ */
+watch(() => props.skeleton, (val) => {
+  if (!val && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+watch(_value, () => {
+  if (props.messages.length > 0) {
+    emit('validate', props.modelValue);
+  }
+});
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+
+function prevOption() {
+  if (props.readonly || props.disabled) {
+    return;
+  }
+
+  const index = props.options.findIndex((option) => option === _value.value);
+
+  if (index !== -1 && props.options[index - 1]) {
+    _value.value = props.options[index - 1];
+  } else {
+    _value.value = props.options[props.options.length - 1];
+  }
+}
+
+function nextOption() {
+  if (props.readonly || props.disabled) {
+    return;
+  }
+
+  const index = props.options.findIndex((option) => option === _value.value);
+
+  if (index !== -1 && props.options[index + 1]) {
+    _value.value = props.options[index + 1];
+  } else {
+    _value.value = props.options[0];
+  }
+}
+
+onMounted(() => {
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :state="state"
+    :messages="messages"
+    label-for="noop"
+  >
+    <div
+      :class="containerClasses"
+      tabindex="0"
+      @blur="onBlur"
+      @keydown.left.prevent="prevOption()"
+      @keydown.right.prevent="nextOption()"
+    >
+      <AntButton
+        :icon-left="faChevronLeft"
+        :grouped="Grouped.left"
+        :no-focus="true"
+        :state="state as unknown as State"
+        :size="size"
+        :skeleton="skeleton"
+        :readonly="readonly"
+        :disabled="disabled"
+        @click="prevOption"
+        @blur="onBlur"
+      />
+      <div class="grow relative">
+        <div :class="itemClasses">
+          {{ typeof _value === 'string' ? _value : _value.label }}
+        </div>
+
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          :grouped="Grouped.center"
+          rounded
+        />
+      </div>
+
+      <AntButton
+        :icon-left="faChevronRight"
+        :grouped="Grouped.right"
+        :no-focus="true"
+        :state="state as unknown as State"
+        :size="size"
+        :skeleton="skeleton"
+        :readonly="readonly"
+        :disabled="disabled"
+        @click="nextOption"
+        @blur="onBlur"
+      />
+    </div>
+  </AntField>
+</template>