@antify/ui-module 1.7.3 → 1.8.2

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

@@ -1,121 +0,0 @@
-<script setup lang="ts">
-import AntField from '../forms/AntField.vue';
-import {useVModel} from '@vueuse/core';
-import {computed, onMounted, watch} from 'vue';
-import {InputState, Size} from '../../enums';
-import {handleEnumValidation} from '../../handler';
-
-defineOptions({inheritAttrs: false});
-
-const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate', 'blur']);
-const props = withDefaults(defineProps<{
-  modelValue: number | number[] | null;
-  label?: string;
-  description?: string;
-  state?: InputState;
-  size?: Size,
-  disabled?: boolean;
-  skeleton?: boolean;
-  min?: number;
-  max?: number;
-  messages?: string[];
-}>(), {
-  state: InputState.base,
-  size: Size.md,
-  disabled: false,
-  skeleton: false,
-  limiter: false,
-  messages: () => []
-});
-const _modelValue = useVModel(props, 'modelValue', emit);
-const inputClasses = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'text-neutral-base',
-    [InputState.danger]: 'text-danger-base',
-    [InputState.info]: 'text-info-base',
-    [InputState.success]: 'text-success-base',
-    [InputState.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[props.state]]: true
-  };
-});
-
-/**
- * Validate default value if given after delayed data fetching.
- */
-watch(() => props.skeleton, (val) => {
-  if (!val && props.modelValue !== null) {
-    emit('validate', props.modelValue);
-  }
-});
-watch(_modelValue, (val) => {
-  if ([InputState.danger, InputState.warning, InputState.info].includes(props.state)) {
-    emit('validate', val);
-  }
-});
-
-function onBlur(e: FocusEvent) {
-  emit('validate', props.modelValue);
-  emit('blur', e);
-}
-
-onMounted(() => {
-  handleEnumValidation(props.state, InputState, 'state');
-  handleEnumValidation(props.size, Size, 'size');
-
-  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"
-  >
-    <input
-      v-model.number="_modelValue"
-      :class="inputClasses"
-      type="range"
-      :disabled="disabled || skeleton"
-      :min="min"
-      :max="max"
-      v-bind="$attrs"
-      @blur="onBlur"
-    >
-  </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/inputs/AntRichTextEditor.vue

@@ -1,237 +0,0 @@
-<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/inputs/AntSearch.vue

@@ -1,75 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted, ref} from 'vue';
-import AntBaseInput from './Elements/AntBaseInput.vue';
-import {Size} from '../../enums/Size.enum';
-import {handleEnumValidation} from '../../handler';
-import {faSearch} from '@fortawesome/free-solid-svg-icons';
-import {BaseInputType} from './Elements/__types';
-import AntField from '../forms/AntField.vue';
-
-const emits = defineEmits(['update:modelValue']);
-const props = withDefaults(defineProps<{
-  modelValue: string | null;
-  label?: string;
-  placeholder?: string;
-  description?: string;
-  size?: Size;
-  disabled?: boolean;
-  readonly?: boolean;
-  skeleton?: boolean;
-  inputTimeout?: number;
-  query?: string;
-}>(), {
-  disabled: false,
-  skeleton: false,
-  readonly: 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"
-    data-e2e="search"
-  >
-    <AntBaseInput
-      v-model="_value"
-      :type="BaseInputType.search"
-      :size="size"
-      :skeleton="skeleton"
-      :disabled="disabled"
-      :readonly="readonly"
-      :placeholder="placeholder"
-      :icon-left="faSearch"
-      nullable
-      v-bind="$attrs"
-    />
-  </AntField>
-</template>