@proj-airi/ui 0.5.0 → 0.6.1

package/dist/components/Form/Input/InputFile.vue

@@ -1,65 +0,0 @@
-<script setup>
-import { useDebounce } from "@vueuse/core";
-import { ref } from "vue";
-defineProps({
-  accept: { type: String, required: false },
-  multiple: { type: Boolean, required: false }
-});
-const files = defineModel({ type: Array, ...{ required: false, default: () => [] } });
-const firstFile = ref();
-const isDragging = ref(false);
-const isDraggingDebounced = useDebounce(isDragging, 150);
-function handleFileChange(e) {
-  const input = e.target;
-  if (input.files && input.files.length > 0) {
-    firstFile.value = input.files[0];
-  }
-  files.value = Array.from(input.files || []);
-  isDragging.value = false;
-}
-</script>
-
-<template>
-  <label
-    relative
-    class="min-h-[120px] flex flex-col cursor-pointer items-center justify-center rounded-xl p-6"
-    :class="[
-      isDraggingDebounced ? 'border-primary-400 dark:border-primary-600 hover:border-primary-300 dark:hover:border-primary-700' : 'border-neutral-200 dark:border-neutral-700 hover:border-primary-300 dark:hover:border-primary-700',
-      isDraggingDebounced ? 'bg-primary-50/5 dark:bg-primary-900/5' : 'bg-white/60 dark:bg-black/30 hover:bg-white/80 dark:hover:bg-black/40',
-    ]"
-    border="dashed 2"
-    transition="all duration-300"
-    cursor-pointer opacity-95
-    hover="scale-100 opacity-100 shadow-md dark:shadow-lg"
-    @dragover="isDragging = true"
-    @dragleave="isDragging = false"
-  >
-    <input
-      type="file"
-      :accept="accept"
-      :multiple="multiple"
-      cursor-pointer
-      class="absolute inset-0 h-full w-full opacity-0"
-      @change="handleFileChange"
-    >
-    <slot :is-dragging="isDraggingDebounced" :first-file="firstFile" :files="files">
-      <div
-        class="flex flex-col items-center"
-        :class="[
-          isDraggingDebounced ? 'text-primary-500 dark:text-primary-400' : 'text-neutral-400 dark:text-neutral-500',
-        ]"
-      >
-        <div i-solar:upload-square-line-duotone mb-2 text-5xl />
-        <p font-medium text="center lg">
-          Upload
-        </p>
-        <p v-if="isDraggingDebounced" text="center" text-sm>
-          Release to upload
-        </p>
-        <p v-else text="center" text-sm>
-          Click or drag and drop a file here
-        </p>
-      </div>
-    </slot>
-  </label>
-</template>

package/dist/components/Form/Input/InputKeyValue.vue

@@ -1,17 +0,0 @@
-<script setup>
-import Input from "./Input.vue";
-const props = defineProps({
-  name: { type: String, required: false },
-  keyPlaceholder: { type: String, required: false },
-  valuePlaceholder: { type: String, required: false }
-});
-const key = defineModel("propertyKey", { type: String, ...{ required: true } });
-const value = defineModel("propertyValue", { type: String, ...{ required: true } });
-</script>
-
-<template>
-  <div flex="~ gap-2">
-    <Input v-model="key" :placeholder="props.keyPlaceholder" class="w-1/2" />
-    <Input v-model="value" :placeholder="props.valuePlaceholder" class="w-1/2" />
-  </div>
-</template>

package/dist/components/Form/Input/index.d.ts

@@ -1,3 +0,0 @@
-export { default as Input } from './Input.vue';
-export { default as InputFile } from './InputFile.vue';
-export { default as InputKeyValue } from './InputKeyValue.vue';

package/dist/components/Form/Input/index.mjs

@@ -1,3 +0,0 @@
-export { default as Input } from "./Input.vue";
-export { default as InputFile } from "./InputFile.vue";
-export { default as InputKeyValue } from "./InputKeyValue.vue";

package/dist/components/Form/Radio/Radio.vue

@@ -1,103 +0,0 @@
-<script setup>
-defineProps({
-  id: { type: String, required: true },
-  name: { type: String, required: true },
-  value: { type: String, required: true },
-  title: { type: String, required: true },
-  deprecated: { type: Boolean, required: false, default: false }
-});
-const modelValue = defineModel({ type: String, ...{ required: true } });
-</script>
-
-<template>
-  <label
-    :key="id"
-    class="form_radio relative flex cursor-pointer items-start rounded-xl p-3 pr-[20px]"
-    transition="all duration-200 ease-in-out"
-    border="2 solid"
-    :class="[
-      modelValue === value
-        ? 'bg-primary-50 dark:bg-primary-900/20 border-primary-100 dark:border-primary-900 hover:border-primary-500/30 dark:hover:border-primary-400/30'
-        : 'bg-white dark:bg-neutral-900/20 border-neutral-100 dark:border-neutral-900 hover:border-primary-500/30 dark:hover:border-primary-400/30',
-      modelValue === value
-        ? 'form_radio-active'
-        : '',
-      deprecated ? 'opacity-60' : '',
-    ]"
-  >
-    <input
-      v-model="modelValue"
-      :checked="modelValue === value"
-      type="radio"
-      :name="name"
-      :value="value"
-      class="absolute opacity-0"
-    >
-    <div class="relative mr-3 mt-0.5 flex-shrink-0">
-      <div
-        class="size-5 border-2 rounded-full transition-colors duration-200"
-        :class="[
-          modelValue === value
-            ? 'border-primary-500 dark:border-primary-400'
-            : 'border-neutral-300 dark:border-neutral-600',
-        ]"
-      >
-        <div
-          class="absolute left-1/2 top-1/2 size-3 rounded-full transition-opacity duration-200 -translate-x-1/2 -translate-y-1/2"
-          :class="[
-            modelValue === value
-              ? 'opacity-100 bg-primary-500 dark:bg-primary-400'
-              : 'opacity-0',
-          ]"
-        />
-      </div>
-    </div>
-    <div class="w-full flex flex-col gap-2">
-      <div class="flex items-center">
-        <span
-          class="line-clamp-1 font-medium"
-          :class="[
-            modelValue === value
-              ? 'text-neutral-700 dark:text-neutral-300'
-              : 'text-neutral-700 dark:text-neutral-400',
-          ]"
-        >
-          {{ title }}
-        </span>
-      </div>
-    </div>
-  </label>
-</template>
-
-<style scoped>
-.form_radio {
-  position: relative;
-  overflow: hidden;
-}
-
-.form_radio::before {
-  --at-apply: 'bg-gradient-to-r from-primary-500/0 to-primary-500/0 dark:from-primary-400/0 dark:to-primary-400/0';
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  width: 25%;
-  height: 100%;
-  transition: all 0.35s ease-in-out;
-  mask-image: linear-gradient(120deg, white 100%);
-  opacity: 0;
-}
-
-.form_radio:hover::before,
-.form_radio._hover::before {
-  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
-  width: 85%;
-  opacity: 1;
-}
-
-.form_radio-active::before {
-  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
-  width: 85%;
-  opacity: 0.5;
-}
-</style>

package/dist/components/Form/Radio/index.d.ts

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

package/dist/components/Form/Radio/index.mjs

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

package/dist/components/Form/Range/index.d.ts

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

package/dist/components/Form/Range/index.mjs

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

package/dist/components/Form/Select/Select.vue

@@ -1,98 +0,0 @@
-<script setup>
-import { Dropdown as VDropdown } from "floating-vue";
-import { computed } from "vue";
-const props = defineProps({
-  options: { type: Array, required: true },
-  placeholder: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  title: { type: String, required: false }
-});
-const modelValue = defineModel({ type: [String, Number], ...{ required: true } });
-const selectedLabel = computed(() => {
-  const selected = props.options.find((opt) => opt.value === modelValue.value);
-  return selected ? selected.label : props.placeholder;
-});
-function selectOption(value) {
-  modelValue.value = value;
-}
-</script>
-
-<template>
-  <VDropdown
-    auto-size
-    auto-boundary-max-size
-  >
-    <div
-      class="min-w-[160px] flex cursor-pointer items-center justify-between gap-2 border rounded-lg bg-white p-2.5 text-xs text-neutral-700 shadow-sm outline-none transition-colors disabled:cursor-not-allowed dark:border-neutral-800 dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:text-neutral-200 disabled:text-neutral-400 focus:ring-2 focus:ring-black/10 dark:disabled:bg-neutral-800 dark:hover:bg-neutral-800 dark:disabled:text-neutral-600"
-      :class="{ 'pointer-events-none': props.disabled }"
-    >
-      <div class="flex-1 truncate">
-        <slot :label="selectedLabel">
-          {{ selectedLabel }}
-        </slot>
-      </div>
-      <div i-solar:alt-arrow-down-bold-duotone class="h-3.5 w-3.5 text-neutral-500 dark:text-neutral-400" />
-    </div>
-
-    <template #popper="{ hide }">
-      <div class="min-w-[160px] flex flex-col gap-0.5 border border-neutral-200 rounded-lg bg-white p-1 shadow-lg dark:border-neutral-800 dark:bg-neutral-900">
-        <div
-          v-for="option of props.options"
-          v-bind="{ ...$attrs, class: null, style: null }"
-          :key="option.value"
-          class="cursor-pointer rounded px-2 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
-          :class="{
-            'bg-neutral-100 dark:bg-neutral-800': modelValue === option.value,
-          }"
-          @click="selectOption(option.value); hide()"
-        >
-          {{ option.label }}
-        </div>
-      </div>
-    </template>
-  </VDropdown>
-</template>
-
-<style>
-.resize-observer[data-v-b329ee4c] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  width: 100%;
-  height: 100%;
-  border: none;
-  background-color: transparent;
-  pointer-events: none;
-  display: block;
-  overflow: hidden;
-  opacity: 0;
-}
-
-.resize-observer[data-v-b329ee4c] object {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: -1;
-}
-
-.v-popper__popper {
-  z-index: 10000;
-  top: 0;
-  left: 0;
-  outline: none;
-}
-
-.v-popper__arrow-container {
-  display: none;
-}
-
-.v-popper__inner {
-  border: none !important;
-}
-</style>

package/dist/components/Form/Select/index.d.ts

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

package/dist/components/Form/Select/index.mjs

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

package/dist/components/Form/Textarea/Basic.vue

@@ -1,32 +0,0 @@
-<script setup>
-import { ref, watch } from "vue";
-const events = defineEmits(["submit"]);
-const input = defineModel({ type: String, ...{
-  default: ""
-} });
-const textareaRef = ref();
-const textareaHeight = ref("auto");
-function onKeyDown(e) {
-  if (e.code === "Enter" && !e.shiftKey) {
-    e.preventDefault();
-    events("submit", input.value);
-  }
-}
-watch(input, () => {
-  textareaHeight.value = "auto";
-  requestAnimationFrame(() => {
-    if (!textareaRef.value)
-      return;
-    textareaHeight.value = `${textareaRef.value.scrollHeight}px`;
-  });
-}, { immediate: true });
-</script>
-
-<template>
-  <textarea
-    ref="textareaRef"
-    v-model="input"
-    :style="{ height: textareaHeight }"
-    @keydown="onKeyDown"
-  />
-</template>

package/dist/components/Form/Textarea/Textarea.vue

@@ -1,17 +0,0 @@
-<script setup>
-import BasicTextarea from "./Basic.vue";
-const modelValue = defineModel({ type: String, ...{ default: "" } });
-</script>
-
-<template>
-  <BasicTextarea
-    v-model="modelValue"
-    border="focus:primary-300 dark:focus:primary-400/50 2 solid neutral-100 dark:neutral-900"
-    transition="all duration-200 ease-in-out"
-    text="disabled:neutral-400 dark:disabled:neutral-600"
-    cursor="disabled:not-allowed"
-    w-full rounded-lg px-2 py-1 text-sm outline-none
-    shadow="sm"
-    bg="neutral-50 dark:neutral-950 focus:neutral-50 dark:focus:neutral-900"
-  />
-</template>

package/dist/components/Form/Textarea/index.d.ts

@@ -1,2 +0,0 @@
-export { default as BasicTextarea } from './Basic.vue';
-export { default as Textarea } from './Textarea.vue';

package/dist/components/Form/Textarea/index.mjs

@@ -1,2 +0,0 @@
-export { default as BasicTextarea } from "./Basic.vue";
-export { default as Textarea } from "./Textarea.vue";

package/dist/components/Form/index.d.ts

@@ -1,7 +0,0 @@
-export * from './Checkbox';
-export * from './Field';
-export * from './Input';
-export * from './Radio';
-export * from './Range';
-export * from './Select';
-export * from './Textarea';

package/dist/components/Form/index.mjs

@@ -1,7 +0,0 @@
-export * from "./Checkbox/index.mjs";
-export * from "./Field/index.mjs";
-export * from "./Input/index.mjs";
-export * from "./Radio/index.mjs";
-export * from "./Range/index.mjs";
-export * from "./Select/index.mjs";
-export * from "./Textarea/index.mjs";

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export * from './components/Animations';
-export * from './components/Form';