orio-ui 1.19.0 → 1.23.2

package/dist/runtime/components/ListItem.vue.d.ts

@@ -0,0 +1,29 @@
+export interface ListItemProps {
+    selectable?: boolean;
+}
+type __VLS_Props = ListItemProps;
+type __VLS_ModelProps = {
+    "selected"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    start?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    end?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LocaleSwitcher.d.vue.ts

@@ -0,0 +1,13 @@
+export interface LocaleOption {
+    code: string;
+    flag: string;
+    label: string;
+}
+interface Props {
+    locales?: LocaleOption[];
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    locales: LocaleOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/LocaleSwitcher.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+const props = defineProps({
+  locales: { type: Array, required: false, default: () => [
+    { code: "en", flag: "\u{1F1EC}\u{1F1E7}", label: "English" },
+    { code: "uk", flag: "\u{1F1FA}\u{1F1E6}", label: "\u0423\u043A\u0440\u0430\u0457\u043D\u0441\u044C\u043A\u0430" }
+  ] }
+});
+const { locale } = useI18n();
+const selected = computed({
+  get: () => props.locales.find((l) => l.code === locale.value) ?? props.locales[0],
+  set: (val) => {
+    locale.value = val.code;
+  }
+});
+</script>
+
+<template>
+  <orio-selector
+    v-model="selected"
+    :options="locales"
+    field="code"
+    option-name="label"
+  >
+    <template #trigger-label>
+      <span class="locale-trigger">
+        <span class="locale-flag">{{ selected.flag }}</span>
+        <span class="locale-label">{{ selected.label }}</span>
+      </span>
+    </template>
+    <template #option="{ option }">
+      <span class="locale-option">
+        <span class="locale-flag">{{ option.flag }}</span>
+        <span>{{ option.label }}</span>
+      </span>
+    </template>
+  </orio-selector>
+</template>
+
+<style scoped>
+.locale-option,.locale-trigger{align-items:center;display:flex;gap:.5rem}.locale-flag{font-size:1.25em;line-height:1}
+</style>

package/dist/runtime/components/LocaleSwitcher.vue.d.ts

@@ -0,0 +1,13 @@
+export interface LocaleOption {
+    code: string;
+    flag: string;
+    label: string;
+}
+interface Props {
+    locales?: LocaleOption[];
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    locales: LocaleOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NavButton.vue

@@ -10,7 +10,8 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const { disabled, active } = toRefs(props);
 const slots = useSlots();

package/dist/runtime/components/NumberInput/Horizontal.vue

@@ -12,7 +12,8 @@ defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });
 const { pressAndHold, stop } = usePressAndHold();

package/dist/runtime/components/NumberInput/Vertical.vue

@@ -12,7 +12,8 @@ defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });
 const { pressAndHold, stop } = usePressAndHold();

package/dist/runtime/components/NumberInput/index.vue

@@ -12,7 +12,8 @@ const props = defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const { min, max, step, decimalPlaces } = toRefs(props);
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });

package/dist/runtime/components/RadioButton.vue

@@ -11,7 +11,8 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 </script>
 

package/dist/runtime/components/Selector.vue

@@ -2,21 +2,27 @@
 import { computed, ref, toRef, toRefs } from "vue";
 import { useControlTokens } from "../composables/useControlSize";
 import { useListKeyboard } from "../composables/useListKeyboard";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
 const props = defineProps({
   options: { type: Array, required: true },
   multiple: { type: Boolean, required: false },
   field: { type: String, required: false, default: "id" },
   optionName: { type: String, required: false },
-  placeholder: { type: String, required: false, default: "Select an option" },
+  placeholder: { type: String, required: false },
   appearance: { type: String, required: false },
   error: { type: [String, null], required: false },
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
-const { field, optionName, placeholder } = toRefs(props);
+const { field, optionName } = toRefs(props);
+const resolvedPlaceholder = computed(
+  () => props.placeholder ?? t("selector.placeholder")
+);
 const modelValue = defineModel({ type: null, ...{
   required: true
 } });
@@ -59,7 +65,7 @@ function isOptionSelected(option) {
   }
 }
 function getOptionLabel(option) {
-  if (!option) return placeholder.value;
+  if (!option) return resolvedPlaceholder.value;
   if (typeof option === "string") return option;
   if (optionName.value) return String(option[label.value]);
   return JSON.stringify(option);
@@ -133,7 +139,11 @@ const {
                     {{ getOptionLabel(modelValue) }}
                   </template>
                   <template v-else-if="Array.isArray(modelValue)">
-                    <span> {{ modelValue.length }} selected </span>
+                    <span>
+                      {{
+                        t("selector.selected", { count: modelValue.length })
+                      }}
+                    </span>
                   </template>
                 </slot>
               </div>
@@ -151,15 +161,14 @@ const {
             role="listbox"
             :aria-multiselectable="multiple || void 0"
           >
-            <li
+            <orio-list-item
               v-for="(option, index) in options"
               :key="getOptionKey(option)"
+              :selectable="multiple"
+              :selected="isOptionSelected(option)"
               role="option"
               :aria-selected="isOptionSelected(option)"
-              :class="{
-  selected: isOptionSelected(option),
-  highlighted: index === highlightedIndex
-}"
+              :class="{ highlighted: index === highlightedIndex }"
               @click="toggleOption(option, toggle)"
               @mouseenter="highlightedIndex = index"
             >
@@ -172,10 +181,10 @@ const {
               >
                 {{ getOptionLabel(option) }}
               </slot>
-            </li>
+            </orio-list-item>
           </ul>
           <slot v-else name="no-options">
-            <orio-empty-state title="No options found" size="small" />
+            <orio-empty-state :title="t('selector.noOptions')" size="small" />
           </slot>
           <slot name="options-addon" />
         </div>
@@ -232,19 +241,12 @@ const {
   padding: 0;
   margin: 0;
 }
-.selector-content ul li {
+.selector-content ul :deep(.list-item) {
   padding: var(--control-py) var(--control-px);
   cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-  color: var(--color-text);
-}
-.selector-content ul li:hover, .selector-content ul li.highlighted {
-  background-color: var(--color-surface); /* neutral lift */
 }
-.selector-content ul li.selected {
-  background-color: var(--color-accent);
-  color: var(--color-accent-soft-darker);
-  font-weight: 400;
+.selector-content ul :deep(.list-item).highlighted:not(.selected) {
+  background-color: var(--color-surface);
 }
 
 .trigger-content {

package/dist/runtime/components/SwitchButton.vue

@@ -7,7 +7,8 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: Boolean, ...{ required: false } });
 function toggle() {

package/dist/runtime/components/Tag.d.vue.ts

@@ -1,9 +1,10 @@
 export type TagStyle = "neutral" | "accent";
-interface Props {
+export interface TagProps {
     text: string;
+    id?: string;
     variant?: TagStyle;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<TagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TagProps> & Readonly<{}>, {
     variant: TagStyle;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Tag.vue

@@ -1,6 +1,7 @@
 <script setup>
 defineProps({
   text: { type: String, required: true },
+  id: { type: String, required: false },
   variant: { type: String, required: false, default: "neutral" }
 });
 </script>

package/dist/runtime/components/Tag.vue.d.ts

@@ -1,9 +1,10 @@
 export type TagStyle = "neutral" | "accent";
-interface Props {
+export interface TagProps {
     text: string;
+    id?: string;
     variant?: TagStyle;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<TagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TagProps> & Readonly<{}>, {
     variant: TagStyle;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/TaggableSelector.d.vue.ts

@@ -0,0 +1,16 @@
+import type { SelectProps } from "./Selector.vue.js";
+import type { TagProps } from "./Tag.vue.js";
+type __VLS_Props = SelectProps;
+type __VLS_ModelProps = {
+    modelValue?: TagProps[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: TagProps[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: TagProps[] | undefined) => any) | undefined;
+}>, {
+    optionName: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/TaggableSelector.vue

@@ -0,0 +1,35 @@
+<script setup>
+const props = defineProps({
+  options: { type: Array, required: true },
+  multiple: { type: Boolean, required: false },
+  field: { type: String, required: false },
+  optionName: { type: String, required: false, default: "text" },
+  placeholder: { type: String, required: false },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  layout: { type: String, required: false },
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
+});
+const modelValue = defineModel({ type: Array });
+</script>
+
+<template>
+  <orio-selector v-bind="props" v-model="modelValue" multiple>
+    <template #trigger-label>
+      <orio-tag
+        v-for="tag in modelValue"
+        :key="tag.id"
+        :text="tag.text"
+        :variant="tag.variant"
+      />
+    </template>
+  </orio-selector>
+</template>
+
+<style scoped>
+:deep(.trigger-content){display:flex;flex-wrap:wrap;gap:.5rem;text-align:left}
+</style>

package/dist/runtime/components/TaggableSelector.vue.d.ts

@@ -0,0 +1,16 @@
+import type { SelectProps } from "./Selector.vue.js";
+import type { TagProps } from "./Tag.vue.js";
+type __VLS_Props = SelectProps;
+type __VLS_ModelProps = {
+    modelValue?: TagProps[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: TagProps[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: TagProps[] | undefined) => any) | undefined;
+}>, {
+    optionName: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Textarea.vue

@@ -7,7 +7,8 @@ const props = defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 </script>
 

package/dist/runtime/components/Tooltip.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, nextTick } from "vue";
+import { ref, computed, nextTick, toRefs, watch } from "vue";
 import { useEventListener } from "@vueuse/core";
 const props = defineProps({
   text: { type: String, required: false, default: void 0 },
@@ -8,6 +8,10 @@ const props = defineProps({
   disabled: { type: Boolean, required: false, default: false },
   offset: { type: Number, required: false, default: 8 }
 });
+const { disabled } = toRefs(props);
+watch(disabled, () => {
+  if (disabled.value) hideTooltip();
+});
 const isVisible = ref(false);
 const trigger = ref(null);
 const tooltip = ref(null);
@@ -42,7 +46,7 @@ function calculatePosition() {
   position.value = { top, left };
 }
 function showTooltip() {
-  if (props.disabled) return;
+  if (disabled.value) return;
   if (props.delay > 0) {
     showTimeout = setTimeout(() => {
       isVisible.value = true;
@@ -75,7 +79,9 @@ const tooltipStyle = computed(() => ({
   top: `${position.value.top}px`,
   left: `${position.value.left}px`
 }));
-const arrowClass = computed(() => `arrow-${props.placement}`);
+const arrowClass = computed(
+  () => `orio-tooltip-arrow orio-tooltip-arrow-${props.placement}`
+);
 </script>
 
 <template>
@@ -91,22 +97,26 @@ const arrowClass = computed(() => `arrow-${props.placement}`);
     <Teleport v-if="isVisible" to="body">
       <div
         ref="tooltip"
-        class="tooltip"
+        class="orio-tooltip"
         :style="tooltipStyle"
         role="tooltip"
         :aria-hidden="!isVisible"
       >
-        <div class="content">
+        <div class="orio-tooltip-content">
           <slot name="content">
             {{ text }}
           </slot>
         </div>
-        <div :class="['arrow', arrowClass]" />
+        <div :class="arrowClass" />
       </div>
     </Teleport>
   </div>
 </template>
 
 <style scoped>
-.trigger{align-items:center;display:inline-flex;justify-content:center}.tooltip{pointer-events:none;position:absolute;z-index:9999}.content{background-color:rgba(0,0,0,.9);border-radius:var(--border-radius-sm,4px);box-shadow:0 2px 8px rgba(0,0,0,.15);color:#fff;font-size:var(--font-md);padding:.5rem .75rem;white-space:nowrap}.arrow{border-style:solid;height:0;position:absolute;width:0}.arrow-top{border-color:rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 0;bottom:-4px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%)}.arrow-bottom{border-color:transparent transparent rgba(0,0,0,.9);border-width:0 4px 4px;top:-4px}.arrow-left{border-color:transparent transparent transparent rgba(0,0,0,.9);border-width:4px 0 4px 4px;right:-4px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-right{border-color:transparent rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 4px 0;left:-4px}
+.trigger{align-items:center;display:inline-flex;justify-content:center}
+</style>
+
+<style>
+.orio-tooltip{pointer-events:none;position:absolute;z-index:9999}.orio-tooltip-content{background-color:rgba(0,0,0,.9);border-radius:var(--border-radius-sm,4px);box-shadow:0 2px 8px rgba(0,0,0,.15);color:#fff;font-size:var(--font-md);padding:.5rem .75rem;white-space:nowrap}.orio-tooltip-arrow{border-style:solid;height:0;position:absolute;width:0}.orio-tooltip-arrow-top{border-color:rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 0;bottom:-4px;left:50%;transform:translateX(-50%)}.orio-tooltip-arrow-bottom{border-color:transparent transparent rgba(0,0,0,.9);border-width:0 4px 4px;left:50%;top:-4px;transform:translateX(-50%)}.orio-tooltip-arrow-left{border-color:transparent transparent transparent rgba(0,0,0,.9);border-width:4px 0 4px 4px;right:-4px;top:50%;transform:translateY(-50%)}.orio-tooltip-arrow-right{border-color:transparent rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 4px 0;left:-4px;top:50%;transform:translateY(-50%)}
 </style>

package/dist/runtime/components/ZoomableContainer.d.vue.ts

@@ -0,0 +1,48 @@
+export interface ZoomableContainerProps {
+    minScale?: number;
+    maxScale?: number;
+    initialScale?: number;
+    zoomSpeed?: number;
+    wheelPanSpeed?: number;
+}
+declare function setScaleAt(target: number, px: number, py: number): void;
+declare function panBy(dx: number, dy: number): void;
+declare function centerWorld(): void;
+declare function resetView(): void;
+declare var __VLS_1: {
+    scale: number;
+    tx: number;
+    ty: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ZoomableContainerProps, {
+    scale: import("vue").Ref<number, number>;
+    tx: import("vue").Ref<number, number>;
+    ty: import("vue").Ref<number, number>;
+    setScaleAt: typeof setScaleAt;
+    panBy: typeof panBy;
+    resetView: typeof resetView;
+    centerWorld: typeof centerWorld;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:scale": (value: number) => any;
+    "update:translate": (x: number, y: number) => any;
+}, string, import("vue").PublicProps, Readonly<ZoomableContainerProps> & Readonly<{
+    "onUpdate:scale"?: ((value: number) => any) | undefined;
+    "onUpdate:translate"?: ((x: number, y: number) => any) | undefined;
+}>, {
+    minScale: number;
+    maxScale: number;
+    initialScale: number;
+    zoomSpeed: number;
+    wheelPanSpeed: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};