@antify/ui-module 1.1.3

package/src/runtime/components/form/AntRangeSlider.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import AntField from './Elements/AntField.vue';
+import {FieldValidator} from '@antify/validate';
+import {useVModel} from '@vueuse/core';
+import {computed, onMounted} from 'vue';
+import {InputColorType, Size} from '../../enums';
+import {handleEnumValidation} from '../../handler';
+
+defineOptions({ inheritAttrs: false });
+
+const emits = defineEmits(['update:modelValue', 'update:skeleton'])
+const props = withDefaults(defineProps<{
+  modelValue: number | number[] | undefined;
+  label?: string;
+  description?: string;
+  colorType?: InputColorType;
+  size?: Size,
+  disabled?: boolean;
+  skeleton?: boolean;
+  validator?: FieldValidator;
+  min?: number;
+  max?: number;
+}>(), {
+  colorType: InputColorType.base,
+  size: Size.md,
+  disabled: false,
+  skeleton: false,
+  limiter: false
+});
+
+const value = useVModel(props, 'modelValue', emits);
+const _colorType = computed(() => props.validator?.hasErrors() ? InputColorType.danger : props.colorType);
+const inputClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'text-neutral-base',
+    [InputColorType.danger]: 'text-danger-base',
+    [InputColorType.info]: 'text-info-base',
+    [InputColorType.success]: 'text-success-base',
+    [InputColorType.warning]: 'text-warning-base',
+  };
+
+  return {
+    'ant-range-slider transition-colors relative border-none w-full focus:z-10 h-2 bg-neutral-300 rounded-md outline-none': true,
+    'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
+    'invisible': props.skeleton,
+    [variants[_colorType.value]]: true
+  };
+});
+
+onMounted(() => {
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+  handleEnumValidation(props.size, Size, 'size');
+
+  props.validator?.validate(props.modelValue);
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :color-type="colorType"
+    :validator="validator"
+  >
+    <input
+      v-model="value"
+      :class="inputClasses"
+      type="range"
+      :disabled="disabled || skeleton"
+      :min="min"
+      :max="max"
+      v-bind="$attrs"
+    >
+  </AntField>
+</template>
+
+<style scoped>
+.ant-range-slider {
+  -webkit-appearance: none;
+}
+
+.ant-range-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border-radius: 100%;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  background: #fff;
+  border: 1px solid #CBD5E1;
+  cursor: pointer;
+}
+
+.ant-range-slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #04AA6D;
+  cursor: pointer;
+}
+</style>

package/src/runtime/components/form/AntRichTextEditor.vue

@@ -0,0 +1,237 @@
+<template></template>
+
+<!--<script lang="ts" setup>-->
+<!--defineOptions({ inheritAttrs: false });-->
+<!--// TODO:: fix ts errors-->
+<!--// @ts-nocheck-->
+<!--import {ref, computed, onUnmounted, watch} from 'vue';-->
+<!--import {useEditor, EditorContent} from '@tiptap/vue-3';-->
+<!--import StarterKit from '@tiptap/starter-kit';-->
+<!--import Underline from '@tiptap/extension-underline';-->
+<!--import Heading from '@tiptap/extension-heading';-->
+<!--import AntButton from './AntButton.vue';-->
+<!--import AntSkeleton from '../AntSkeleton.vue';-->
+<!--import {generateId} from '../../utils/helper';-->
+
+<!--const emit = defineEmits(['update:data']);-->
+
+<!--const props =-->
+<!--  defineProps<{-->
+<!--    id?: string;-->
+<!--    data?: string;-->
+<!--    label?: string;-->
+<!--    description?: string;-->
+<!--    validator?: Function;-->
+<!--    errors?: string[];-->
+<!--    isError?: boolean;-->
+<!--    loading?: boolean;-->
+<!--    disabled?: boolean;-->
+<!--  }>();-->
+
+<!--const _data = computed({-->
+<!--  get: () => {-->
+<!--    return props.data || '';-->
+<!--  },-->
+<!--  set: (val) => {-->
+<!--    emit('update:data', val);-->
+<!--  },-->
+<!--});-->
+
+<!--const _id = ref(props.id || generateId(40));-->
+<!--const editor = ref(-->
+<!--  useEditor({-->
+<!--    content: _data.value,-->
+<!--    extensions: [-->
+<!--      StarterKit,-->
+<!--      Underline,-->
+<!--      Heading.configure({-->
+<!--        levels: [1, 2, 3],-->
+<!--      }),-->
+<!--    ],-->
+<!--    onUpdate: ({editor}) => {-->
+<!--      const state = editor.getHTML();-->
+<!--      _data.value = state;-->
+
+<!--      if (props.validator && typeof props.validator === 'function') {-->
+<!--        props.validator(_data.value);-->
+<!--      }-->
+<!--    },-->
+<!--    editable: !props.disabled,-->
+<!--  })-->
+<!--);-->
+
+<!--watch(-->
+<!--  () => props.disabled,-->
+<!--  () => {-->
+<!--    editor.value?.setOptions({editable: !props.disabled});-->
+<!--  }-->
+<!--);-->
+
+<!--onUnmounted(() => editor?.value?.destroy());-->
+<!--</script>-->
+
+<!--<template>-->
+<!--  <div v-if="!loading">-->
+<!--    <slot>-->
+<!--      <label-->
+<!--        v-if="label"-->
+<!--        :for="_id"-->
+<!--        class="block text-sm font-medium text-gray-700"-->
+<!--      >-->
+<!--        {{ label }}-->
+<!--      </label>-->
+<!--    </slot>-->
+
+<!--    <div-->
+<!--      v-if="editor"-->
+<!--      class="border border-gray-200 rounded-md overflow-hidden p-2 bg-gray-50"-->
+<!--    >-->
+<!--      <slot name="buttons" v-bind="editor">-->
+<!--        <div class="space-x-1 mb-2 flex">-->
+<!--          <slot name="headers-buttons" v-bind="editor">-->
+<!--            <AntButton-->
+<!--              @click="-->
+<!--                editor-->
+<!--                  ? editor.chain().focus().toggleHeading({ level: 1 }).run()-->
+<!--                  : false-->
+<!--              "-->
+<!--              :class="{-->
+<!--                '!bg-gray-200': editor.isActive('heading', { level: 1 }),-->
+<!--              }"-->
+<!--              class="hover:bg-gray-200 border-none"-->
+<!--              :disabled="disabled"-->
+<!--            >-->
+<!--              <span>H1</span>-->
+<!--            </AntButton>-->
+
+<!--            <AntButton-->
+<!--              @click="-->
+<!--                editor-->
+<!--                  ? editor.chain().focus().toggleHeading({ level: 2 }).run()-->
+<!--                  : false-->
+<!--              "-->
+<!--              :class="{-->
+<!--                '!bg-gray-200': editor.isActive('heading', { level: 2 }),-->
+<!--              }"-->
+<!--              class="hover:bg-gray-200 border-none"-->
+<!--              :disabled="disabled"-->
+<!--            >-->
+<!--              <span class="">H2</span>-->
+<!--            </AntButton>-->
+
+<!--            <AntButton-->
+<!--              @click="-->
+<!--                editor-->
+<!--                  ? editor.chain().focus().toggleHeading({ level: 3 }).run()-->
+<!--                  : false-->
+<!--              "-->
+<!--              :class="{-->
+<!--                '!bg-gray-200': editor.isActive('heading', { level: 3 }),-->
+<!--              }"-->
+<!--              class="hover:bg-gray-200 border-none"-->
+<!--              :disabled="disabled"-->
+<!--            >-->
+<!--              <span class="">H3</span>-->
+<!--            </AntButton>-->
+<!--          </slot>-->
+
+<!--          <slot name="bold-button" v-bind="editor">-->
+<!--            <AntButton-->
+<!--              @click="-->
+<!--                editor ? editor.chain().focus().toggleBold().run() : false-->
+<!--              "-->
+<!--              :class="{ '!bg-gray-200': editor.isActive('bold') }"-->
+<!--              class="hover:bg-gray-200 border-none"-->
+<!--              :disabled="disabled"-->
+<!--            >-->
+<!--              <span class="font-bold">B</span>-->
+<!--            </AntButton>-->
+<!--          </slot>-->
+
+<!--          <slot name="italic-button" v-bind="editor">-->
+<!--            <AntButton-->
+<!--              @click="-->
+<!--                editor ? editor.chain().focus().toggleItalic().run() : false-->
+<!--              "-->
+<!--              :class="{ '!bg-gray-200': editor.isActive('italic') }"-->
+<!--              class="hover:bg-gray-200 border-none"-->
+<!--              :disabled="disabled"-->
+<!--            >-->
+<!--              <span class="italic">I</span>-->
+<!--            </AntButton>-->
+<!--          </slot>-->
+
+<!--          <slot name="underline-button" v-bind="editor">-->
+<!--            <AntButton-->
+<!--              @click="-->
+<!--                editor ? editor.chain().focus().toggleUnderline().run() : false-->
+<!--              "-->
+<!--              :class="{ '!bg-gray-200': editor.isActive('underline') }"-->
+<!--              class="hover:bg-gray-200 border-none"-->
+<!--              :disabled="disabled"-->
+<!--            >-->
+<!--              <span class="underline">U</span>-->
+<!--            </AntButton>-->
+<!--          </slot>-->
+
+<!--          <slot name="strike-button" v-bind="editor">-->
+<!--            <AntButton-->
+<!--              @click="-->
+<!--                editor ? editor.chain().focus().toggleStrike().run() : false-->
+<!--              "-->
+<!--              :class="{ '!bg-gray-200': editor.isActive('strike') }"-->
+<!--              class="hover:bg-gray-200 border-none"-->
+<!--              :disabled="disabled"-->
+<!--            >-->
+<!--              <span class="line-through">S</span>-->
+<!--            </AntButton>-->
+<!--          </slot>-->
+
+<!--          <slot name="custom-buttons" v-bind="editor"></slot>-->
+<!--        </div>-->
+<!--      </slot>-->
+
+<!--      <EditorContent-->
+<!--        :id="_id"-->
+<!--        :described-by="`${_id}-description`"-->
+<!--        :editor="editor"-->
+<!--        v-bind="$attrs"-->
+<!--        :class="{-->
+<!--          'border-red-300 text-red-900 placeholder-red-300 focus:border-red-500':-->
+<!--            (errors && errors.length > 0) || isError,-->
+<!--        }"-->
+<!--      />-->
+
+<!--      <slot name="errorList" v-bind="{ errors }">-->
+<!--        <div v-for="error in errors" class="text-red-600">{{ error }}</div>-->
+<!--      </slot>-->
+<!--    </div>-->
+
+<!--    <div-->
+<!--      v-if="description"-->
+<!--      class="mt-1 text-sm text-gray-500"-->
+<!--      :id="`${_id}-description`"-->
+<!--    >-->
+<!--      <slot name="description"> {{ description }}</slot>-->
+<!--    </div>-->
+<!--  </div>-->
+
+<!--  <div v-else>-->
+<!--    <AntSkeleton-->
+<!--      :model-value="loading"-->
+<!--      v-if="label || $slots['label']"-->
+<!--      class="w-2/6 h-4 rounded-md mb-1"-->
+<!--    />-->
+
+<!--    <AntSkeleton-->
+<!--      :model-value="loading"-->
+<!--      class="w-full h-24 rounded-md"-->
+<!--    />-->
+
+<!--    <AntSkeleton-->
+<!--      :model-value="loading"-->
+<!--      v-if="description || $slots['description']"-->
+<!--      class="w-4/6 h-4 rounded-md mt-1"-->
+<!--    />-->
+<!--  </div>-->
+<!--</template>-->

package/src/runtime/components/form/AntSearch.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import {computed, onMounted, ref} from 'vue';
+import AntBaseInput from './Elements/AntBaseInput.vue'
+import {Size} from '../../enums/Size.enum'
+import {FieldValidator} from '@antify/validate'
+import {handleEnumValidation} from '../../handler';
+import {faSearch} from '@fortawesome/free-solid-svg-icons';
+import {BaseInputType} from './Elements/__types';
+import AntField from './Elements/AntField.vue';
+
+const emits = defineEmits(['update:modelValue']);
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  size?: Size;
+  disabled?: boolean;
+  skeleton?: boolean;
+  validator?: FieldValidator;
+  inputTimeout?: number;
+  query?: string;
+}>(), {
+  disabled: false,
+  skeleton: false,
+  size: Size.md,
+  inputTimeout: 300,
+  placeholder: 'Search'
+});
+
+const timeout = ref<ReturnType<typeof setTimeout> | null>(null);
+
+// TODO:: implement query prop. Find a way to use vue router in Storybook.
+const _value = computed<string | null>({
+  get: () => props.modelValue,
+  set: (val: string | null) => {
+    if (val === null) {
+      return emits('update:modelValue', val);
+    }
+
+    if (timeout.value) {
+      clearTimeout(timeout.value);
+    }
+
+    timeout.value = setTimeout(() => {
+      emits('update:modelValue', val);
+    }, props.inputTimeout);
+  },
+});
+
+onMounted(() => handleEnumValidation(props.size, Size, 'size'));
+</script>
+
+<template>
+  <AntField
+      :label="label"
+      :size="size"
+      :skeleton="skeleton"
+      :description="description"
+      :validator="validator"
+      data-e2e="search"
+  >
+    <AntBaseInput
+        v-model:value="_value"
+        :type="BaseInputType.search"
+        :size="size"
+        :skeleton="skeleton"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :validator="validator"
+        :icon-left="faSearch"
+        nullable
+        v-bind="$attrs"
+    />
+  </AntField>
+</template>