@proj-airi/ui 0.6.0 → 0.7.0-alpha.1

package/dist/components/Form/Field/FieldKeyValues.vue

@@ -1,54 +0,0 @@
-<script setup>
-import { ref, watch } from "vue";
-import InputKeyValue from "../Input/InputKeyValue.vue";
-const props = defineProps({
-  label: { type: String, required: false },
-  description: { type: String, required: false },
-  name: { type: String, required: false },
-  keyPlaceholder: { type: String, required: false },
-  valuePlaceholder: { type: String, required: false },
-  required: { type: Boolean, required: false },
-  inputClass: { type: String, required: false }
-});
-const emit = defineEmits(["remove", "add"]);
-const keyValues = defineModel({ type: Array, ...{ required: true } });
-const inputKey = ref("");
-const inputValue = ref("");
-watch([inputKey, inputValue], () => {
-  emit("add", inputKey.value, inputValue.value);
-});
-</script>
-
-<template>
-  <div max-w-full>
-    <label flex="~ col gap-2">
-      <div>
-        <div class="flex items-center gap-1 text-sm font-medium">
-          {{ props.label }}
-          <span v-if="props.required !== false" class="text-red-500">*</span>
-        </div>
-        <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
-          {{ props.description }}
-        </div>
-      </div>
-      <div v-auto-animate flex="~ col gap-2">
-        <div
-          v-for="(keyValue, index) in keyValues"
-          :key="index"
-          w-full flex items-center gap-2
-        >
-          <InputKeyValue
-            v-model:property-key="keyValue.key"
-            v-model:property-value="keyValue.value"
-            :key-placeholder="props.keyPlaceholder"
-            :value-placeholder="props.valuePlaceholder"
-            w-full
-          />
-          <button @click="emit('remove', index)">
-            <div i-solar:minus-circle-line-duotone size="6" />
-          </button>
-        </div>
-      </div>
-    </label>
-  </div>
-</template>

package/dist/components/Form/Field/FieldRange.vue

@@ -1,37 +0,0 @@
-<script setup>
-import Range from "../Range/Range.vue";
-const props = defineProps({
-  min: { type: Number, required: false },
-  max: { type: Number, required: false },
-  step: { type: Number, required: false },
-  label: { type: String, required: false },
-  description: { type: String, required: false },
-  formatValue: { type: Function, required: false }
-});
-const modelValue = defineModel({ type: Number, ...{ required: true } });
-</script>
-
-<template>
-  <label flex="~ col gap-4">
-    <div flex="~ row" items-center gap-2>
-      <div flex="1">
-        <div class="flex items-center gap-1 text-sm font-medium">
-          {{ label }}
-        </div>
-        <div class="text-xs text-neutral-500 dark:text-neutral-400">
-          {{ description }}
-        </div>
-      </div>
-      <span font-mono>{{ props.formatValue?.(modelValue) || modelValue }}</span>
-    </div>
-    <div flex="~ row" items-center gap-2>
-      <Range
-        v-model="modelValue"
-        :min="min || 0"
-        :max="max || 1"
-        :step="step || 0.01"
-        w-full
-      />
-    </div>
-  </label>
-</template>

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

@@ -1,4 +0,0 @@
-export { default as FieldCheckbox } from './FieldCheckbox.vue';
-export { default as FieldInput } from './FieldInput.vue';
-export { default as FieldKeyValues } from './FieldKeyValues.vue';
-export { default as FieldRange } from './FieldRange.vue';

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

@@ -1,4 +0,0 @@
-export { default as FieldCheckbox } from "./FieldCheckbox.vue";
-export { default as FieldInput } from "./FieldInput.vue";
-export { default as FieldKeyValues } from "./FieldKeyValues.vue";
-export { default as FieldRange } from "./FieldRange.vue";

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

@@ -1,20 +0,0 @@
-<script setup>
-const props = defineProps({
-  type: { type: String, required: false }
-});
-const modelValue = defineModel({ type: String, ...{ required: true } });
-</script>
-
-<template>
-  <input
-    v-model="modelValue"
-    :type="props.type || 'text'"
-    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-nowrap text-sm outline-none
-    shadow="sm"
-    bg="neutral-50 dark:neutral-950 focus:neutral-50 dark:focus:neutral-900"
-  >
-</template>

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/ColorHueRange.vue

@@ -1,60 +0,0 @@
-<script setup>
-const props = defineProps({
-  disabled: { type: Boolean, required: false },
-  class: { type: String, required: false }
-});
-const colorValue = defineModel("colorValue", { type: String, ...{
-  type: String,
-  default: ""
-} });
-</script>
-
-<template>
-  <input
-    v-model="colorValue"
-    type="range" min="0" max="360" step="0.01"
-    class="color-hue-range"
-    transition="all ease-in-out duration-250"
-    :disabled="props.disabled"
-    :class="[
-      props.disabled ? 'opacity-25 cursor-not-allowed' : 'cursor-pointer',
-      props.class || '',
-    ]"
-  >
-</template>
-
-<style scoped>
-.color-hue-range {
-  --at-apply: appearance-none h-10 rounded-lg;
-  background: linear-gradient(
-    to right,
-    oklch(85% 0.2 0),
-    oklch(85% 0.2 60),
-    oklch(85% 0.2 120),
-    oklch(85% 0.2 180),
-    oklch(85% 0.2 240),
-    oklch(85% 0.2 300),
-    oklch(85% 0.2 360)
-  );
-
-  &::-webkit-slider-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
-      hover: bg-neutral-800 transition-colors duration-200;
-  }
-
-  .dark &::-webkit-slider-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
-      hover: bg-neutral-300 transition-colors duration-200;
-  }
-
-  &::-moz-range-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
-      hover: bg-neutral-800 transition-colors duration-200;
-  }
-
-  .dark &::-moz-range-thumb {
-    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
-      hover: bg-neutral-300 transition-colors duration-200;
-  }
-}
-</style>