@proj-airi/ui 0.6.0 → 0.6.1

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>

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

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

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

@@ -1,2 +0,0 @@
-export { default as ColorHueRange } from "./ColorHueRange.vue";
-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';