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

package/dist/components/Form/Range/Range.vue

@@ -1,315 +0,0 @@
-<script setup>
-import { computed, onMounted, ref } from "vue";
-const props = defineProps({
-  min: { type: Number, required: false, default: 0 },
-  max: { type: Number, required: false, default: 100 },
-  step: { type: Number, required: false, default: 1 },
-  disabled: { type: Boolean, required: false, default: false },
-  thumbColor: { type: String, required: false, default: "#9090906e" },
-  trackColor: { type: String, required: false, default: "gray" },
-  trackValueColor: { type: String, required: false, default: "red" }
-});
-const modelValue = defineModel("modelValue", { type: Number, ...{ required: true } });
-const scaledMin = computed(() => props.min * 1e4);
-const scaledMax = computed(() => props.max * 1e4);
-const scaledStep = computed(() => props.step * 1e4);
-const sliderRef = ref();
-const sliderValue = computed({
-  get: () => modelValue.value * 1e4,
-  set: (value) => {
-    modelValue.value = value / 1e4;
-    updateTrackColor();
-  }
-});
-onMounted(() => {
-  updateTrackColor();
-});
-function updateTrackColor() {
-  if (!sliderRef.value)
-    return;
-  sliderRef.value.style.setProperty("--value", sliderRef.value.value);
-  sliderRef.value.style.setProperty("--min", !sliderRef.value.min ? props.min.toString() : sliderRef.value.min);
-  sliderRef.value.style.setProperty("--max", !sliderRef.value.max ? props.max.toString() : sliderRef.value.max);
-}
-function handleInput(e) {
-  const target = e.target;
-  target.style.setProperty("--value", target.value);
-}
-</script>
-
-<template>
-  <input
-    ref="sliderRef"
-    v-model.number="sliderValue"
-    type="range"
-    :min="scaledMin"
-    :max="scaledMax"
-    :step="scaledStep"
-    class="slider-progress form_input-range"
-    @input="handleInput"
-  >
-</template>
-
-<style scoped>
-/*generated with Input range slider CSS style generator (version 20211225)
-https://toughengineer.github.io/demo/slider-styler*/
-.form_input-range {
-  --height: 2em;
-
-  min-height: var(--height);
-  appearance: none;
-  background: transparent;
-  border-radius: 4px;
-  transition: background-color 0.2s ease;
-
-  --thumb-width: 4px;
-  --thumb-height: var(--height);
-  --thumb-box-shadow: 0 0 0px #e6e6e6;
-  --thumb-border: none;
-  --thumb-border-radius: 999px;
-  --thumb-background: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-active: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-
-  --track-height: calc(var(--height) - var(--track-value-padding) * 2);
-  --track-box-shadow: none;
-  --track-border: solid 2px rgb(238, 238, 238);
-  --track-border-radius: 6px;
-  --track-background: rgb(238, 238, 238);
-  --track-background-hover: rgb(238, 238, 238);
-  --track-background-active: rgb(238, 238, 238);
-
-  --track-value-background: rgb(255, 255, 255);
-  --track-value-background-hover: rgb(255, 255, 255);
-  --track-value-background-active: rgb(255, 255, 255);
-  --track-value-padding: 2px;
-}
-
-.dark .form_input-range {
-  --thumb-background: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-  --thumb-background-active: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
-
-  --track-border: solid 2px rgb(44, 44, 44);
-  --track-background: rgb(44, 44, 44);
-  --track-background-hover: rgb(44, 44, 44);
-  --track-background-active: rgb(44, 44, 44);
-
-  --track-value-background: rgb(164, 164, 164);
-  --track-value-background-hover: rgb(164, 164, 164);
-  --track-value-background-active: rgb(164, 164, 164);
-}
-
-/*progress support*/
-.form_input-range.slider-progress {
-  --range: calc(var(--max) - var(--min));
-  --ratio: calc((var(--value) - var(--min)) / var(--range));
-  --sx: calc(0.5 * 0em + var(--ratio) * (100% - 0em));
-}
-
-.form_input-range:focus {
-  outline: none;
-}
-
-/*webkit*/
-.form_input-range::-webkit-slider-thumb {
-  appearance: none;
-  width: var(--thumb-width);
-  height: var(--thumb-height);
-  border-radius: var(--thumb-border-radius);
-  background: var(--thumb-background);
-  border: var(--thumb-border);
-  box-shadow: var(--thumb-box-shadow);
-  margin-top: calc(var(--track-height) * 0.5 - var(--thumb-height) * 0.5 - 2px);
-  margin-left: calc(0 - var(--track-value-padding));
-  cursor: col-resize;
-  transition:
-    background 0.2s ease-in-out,
-    box-shadow 0.2s ease-in-out,
-    border-color 0.2s ease-in-out,
-    transform 0.2s ease-in-out;
-}
-
-.form_input-range::-webkit-slider-runnable-track {
-  height: var(--track-height);
-  border: var(--track-border);
-  border-radius: var(--track-border-radius);
-  background: var(--track-background);
-  box-shadow: var(--track-box-shadow);
-  position: relative;
-  cursor: col-resize;
-  transition:
-    box-shadow 0.2s ease-in-out,
-    border-color 0.2s ease-in-out;
-}
-
-.form_input-range::-webkit-slider-thumb:hover {
-  background: var(--thumb-background-hover);
-}
-
-.form_input-range:hover::-webkit-slider-runnable-track {
-  background: var(--track-background-hover);
-}
-
-.form_input-range::-webkit-slider-thumb:active {
-  background: var(--thumb-background-active);
-}
-
-.form_input-range:active::-webkit-slider-runnable-track {
-  background: var(--track-background-active);
-}
-
-.form_input-range.slider-progress::-webkit-slider-runnable-track {
-  /* margin-left: var(--track-value-padding); */
-  margin-right: calc(0 - var(--track-value-padding));
-  background:
-    linear-gradient(var(--track-value-background), var(--track-value-background)) 0 / var(--sx) 100% no-repeat,
-    var(--track-background);
-}
-
-.form_input-range.slider-progress:hover::-webkit-slider-runnable-track {
-  background:
-    linear-gradient(var(--track-value-background-hover), var(--track-value-background-hover)) 0 / var(--sx) 100%
-      no-repeat,
-    var(--track-background-hover);
-}
-
-.form_input-range.slider-progress:active::-webkit-slider-runnable-track {
-  background:
-    linear-gradient(var(--track-value-background-active), var(--track-value-background-active)) 0 / var(--sx) 100%
-      no-repeat,
-    var(--track-background-active);
-}
-
-/*mozilla*/
-.form_input-range::-moz-range-thumb {
-  width: var(--thumb-width);
-  height: var(--thumb-height);
-  border-radius: var(--thumb-border-radius);
-  background: var(--thumb-background);
-  border: none;
-  box-shadow: var(--thumb-box-shadow);
-  cursor: col-resize;
-  margin-left: calc(0 - var(--track-value-padding));
-}
-
-.form_input-range::-moz-range-track {
-  height: var(--track-height);
-  border: var(--track-border);
-  border-radius: var(--track-border-radius);
-  background: var(--track-background);
-  box-shadow: var(--track-box-shadow);
-  cursor: col-resize;
-  /* Trim left and right paddings of track */
-  width: calc(100% - var(--track-value-padding) * 2);
-}
-
-.form_input-range::-moz-range-thumb:hover {
-  background: var(--thumb-background-hover);
-}
-
-.form_input-range:hover::-moz-range-track {
-  background: var(--track-background-hover);
-}
-
-.form_input-range::-moz-range-thumb:active {
-  background: var(--thumb-background-active);
-}
-
-.form_input-range:active::-moz-range-track {
-  background: var(--track-background-active);
-}
-
-.form_input-range.slider-progress::-moz-range-track {
-  background:
-    linear-gradient(var(--track-value-background), var(--track-value-background)) 0 / var(--sx) 100% no-repeat,
-    var(--track-background);
-}
-
-.form_input-range.slider-progress:hover::-moz-range-track {
-  background:
-    linear-gradient(var(--track-value-background-hover), var(--track-value-background-hover)) 0 / var(--sx) 100%
-      no-repeat,
-    var(--track-background-hover);
-}
-
-.form_input-range.slider-progress:active::-moz-range-track {
-  background:
-    linear-gradient(var(--track-value-background-active), var(--track-value-background-active)) 0 / var(--sx) 100%
-      no-repeat,
-    var(--track-background-active);
-}
-
-/*ms*/
-.form_input-range::-ms-fill-upper {
-  background: transparent;
-  border-color: transparent;
-}
-
-.form_input-range::-ms-fill-lower {
-  background: transparent;
-  border-color: transparent;
-}
-
-.form_input-range::-ms-thumb {
-  width: var(--thumb-width);
-  height: var(--thumb-height);
-  border-radius: var(--thumb-border-radius);
-  background: var(--thumb-background);
-  border: var(--thumb-border);
-  box-shadow: var(--thumb-box-shadow);
-  /** Center thumb */
-  margin-top: 0;
-  /** Shift left thumb */
-  margin-left: calc(0 - var(--track-value-padding));
-  box-sizing: border-box;
-  cursor: col-resize;
-}
-
-.form_input-range::-ms-track {
-  height: var(--track-height);
-  border-radius: var(--track-border-radius);
-  background: var(--track-background);
-  border: var(--track-border);
-  box-shadow: var(--track-box-shadow);
-  box-sizing: border-box;
-  cursor: col-resize;
-}
-
-.form_input-range::-ms-thumb:hover {
-  background: var(--thumb-background-hover);
-}
-
-.form_input-range:hover::-ms-track {
-  background: var(--track-background-hover);
-}
-
-.form_input-range::-ms-thumb:active {
-  background: var(--thumb-background-active);
-}
-
-.form_input-range:active::-ms-track {
-  background: var(--track-background-active);
-}
-
-.form_input-range.slider-progress::-ms-fill-lower {
-  height: var(--track-height);
-  border-radius: var(--track-border-radius) 0 0 var(--track-border-radius);
-  margin: 0;
-  background: var(--track-value-background);
-  border: none;
-  border-right-width: 0;
-  /** Shift left thumb */
-  margin-left: calc(var(--track-value-padding));
-  /** Shift right thumb */
-  margin-right: calc(0 - var(--track-value-padding));
-}
-
-.form_input-range.slider-progress:hover::-ms-fill-lower {
-  background: var(--track-value-background-hover);
-}
-
-.form_input-range.slider-progress:active::-ms-fill-lower {
-  background: var(--track-value-background-active);
-}
-</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';

package/dist/index.mjs

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

package/uno.config.ts

@@ -1,8 +0,0 @@
-import { mergeConfigs } from 'unocss'
-
-import { histoireUnoConfig, sharedUnoConfig } from '../../uno.config'
-
-export default mergeConfigs([
-  sharedUnoConfig(),
-  histoireUnoConfig(),
-])