@toife/vue 3.1.3 → 3.1.4

package/src/components/modal/modal.scss

@@ -9,12 +9,14 @@ $viewport-width: sass.fn-naming-var("viewport", "width");
 $viewport-max-width: sass.fn-naming-var("viewport", "max-width");
 $viewport-height: sass.fn-naming-var("viewport", "height");
 $viewport-max-height: sass.fn-naming-var("viewport", "max-height");
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+$radius-size: sass.fn-naming-var("radius-size");
 $safe-area-top: sass.fn-naming-var("safe-area", "top");
 $safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
 $safe-area-left: sass.fn-naming-var("safe-area", "left");
 $safe-area-right: sass.fn-naming-var("safe-area", "right");
 $transition-duration: sass.fn-naming-var("motion", "duration");
+$border-radius: calc(min(#{$viewport-width}, #{$radius-size}) * #{$radius-ratio});
 
 .#{$modal} {
   background: rgb(#{$modal-background-color});

package/src/components/radio/radio/radio.scss

@@ -22,7 +22,9 @@ $radio-border-color-disabled: sass.fn-naming-var("radio", "border-color", "disab
 $radio-box-shadow-color-focus: sass.fn-naming-var("radio", "box-shadow-color", "focus");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+
+$size-control-mark-size: sass.fn-naming-var("control-mark-size");
 
 .#{$radio} {
   display: inline-flex;
@@ -35,8 +37,8 @@ $border-radius: sass.fn-naming-var("border-radius");
 
   .#{$radio-icon} {
     flex-shrink: 0;
-    width: 1.25rem;
-    height: 1.25rem;
+    width: #{$size-control-mark-size};
+    height: #{$size-control-mark-size};
     display: flex;
     align-items: center;
     justify-content: center;
@@ -54,8 +56,8 @@ $border-radius: sass.fn-naming-var("border-radius");
 
     &::after {
       content: "";
-      width: 0.5rem;
-      height: 0.5rem;
+      width: calc(#{$size-control-mark-size} * 0.5);
+      height: calc(#{$size-control-mark-size} * 0.5);
       border-radius: 50%;
       background-color: rgb(#{$radio-color});
       transform: scale(0);

package/src/components/radio/radio/radio.type.ts

@@ -1,9 +1,13 @@
+import { AppSize } from "@/components/app";
+
 export type RadioVariant = "fill" | "outline";
+export type RadioSize = AppSize;
 
 // Type definitions
 export type RadioProps = {
   value: string | number;
   role?: string;
+  size?: RadioSize;
   variant?: RadioVariant;
   disabled?: boolean;
   readonly?: boolean;

package/src/components/radio/radio/radio.vue

@@ -11,6 +11,7 @@ import { type RadioGroupProviderState, RADIO_GROUP_PROVIDER_STATE_KEY } from "..
 // ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<RadioProps>(), {
   disabled: false,
+  size: "standard",
   shadow: undefined,
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
@@ -43,6 +44,7 @@ const radioAttrs = computed(() => {
     class: [
       withPrefix(["layer", "radio"]),
       withPrefix(["role", role]),
+      withPrefix(["size", props.size]),
       withPrefix("radio"),
       variant,
       {

package/src/components/refresher/refresher.html

@@ -1,6 +1,6 @@
-<div v-bind="refresherAttrs" v-show="calculateOffset > 0">
-  <slot name="icon" :offset="calculateOffset" :refreshing="refreshing"></slot>
-</div>
 <div v-bind="containerAttrs" ref="container">
-  <slot></slot>
+  <div v-bind="refresherIconAttrs" v-show="calculateOffset > 0">
+    <slot name="icon" :offset="calculateOffset" :refreshing="refreshing"></slot>
+  </div>
+  <slot :offset="calculateOffset" :refreshing="refreshing"></slot>
 </div>

package/src/components/refresher/refresher.scss

@@ -1,8 +1,8 @@
 @use "@toife/sass-layer" as sass;
 
 // Class
-$refresher: sass.fn-naming-prefix("refresher");
-$container: sass.fn-naming-prefix("refresher-container");
+$refresher-icon: sass.fn-naming-prefix("refresher-icon");
+$container: sass.fn-naming-prefix("refresher");
 
 // Variables
 $safe-area-top: sass.fn-naming-var("safe-area", "top");
@@ -12,12 +12,18 @@ $offset: sass.fn-naming-var("refresher-offset");
 .#{$container} {
   width: 100%;
   height: 100%;
-  position: relative;
+  max-width: 100%;
+  max-height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   overflow: auto;
 }
 
 // Refresher
-.#{$refresher} {
+.#{$refresher-icon} {
   display: flex;
   justify-content: center;
   align-items: center;

package/src/components/refresher/refresher.vue

@@ -29,13 +29,13 @@ const calculateOffset = computed(() => {
   return props.offset !== undefined ? props.offset : moveOffset.value / 2;
 });
 
-const refresherAttrs = computed(() => {
+const refresherIconAttrs = computed(() => {
   return {
     style: {
       [property("refresher-offset")]: `${calculateOffset.value}px`,
     },
     class: [
-      withPrefix("refresher"),
+      withPrefix("refresher-icon"),
       {
         moving: calculateOffset.value > 0,
       },
@@ -45,7 +45,7 @@ const refresherAttrs = computed(() => {
 
 const containerAttrs = computed(() => {
   return {
-    class: [withPrefix("refresher-container")],
+    class: [withPrefix("refresher")],
   };
 });
 

package/src/components/skeleton/skeleton.scss

@@ -8,8 +8,10 @@ $skeleton-width: sass.fn-naming-var("skeleton", "width");
 $skeleton-height: sass.fn-naming-var("skeleton", "height");
 $skeleton-background-color: sass.fn-naming-var("skeleton", "background-color");
 
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
 $transition-duration: sass.fn-naming-var("motion", "duration");
+$radius-size: sass.fn-naming-var("radius-size");
+$border-radius: calc(#{$radius-size} * #{$radius-ratio});
 
 .#{$skeleton} {
   width: #{$skeleton-width};

package/src/components/slide-range/index.ts

@@ -0,0 +1,2 @@
+export { default as SlideRange } from "./slide-range.vue";
+export type { SlideRangeProps, SlideRangeEmit } from "./slide-range.type";

package/src/components/slide-range/slide-range.html

@@ -0,0 +1,20 @@
+<div v-bind="slideRangeAttrs">
+  <div v-bind="trackContainerAttrs" ref="container">
+    <div v-bind="trackBodyAttrs">
+      <div v-bind="trackBackAttrs" @click="onClickPath" @touchend="onClickPath"></div>
+      <div v-bind="trackFrontAttrs" @click="onClickPath" @touchend="onClickPath"></div>
+      <div
+        v-for="value in ranges"
+        :key="value"
+        v-bind="nodeAttrs(value)"
+        @click="onNodeSelect(value)"
+        @touchend="onNodeSelect(value)"
+      ></div>
+    </div>
+
+    <div v-bind="thumbAttrs" ref="point">
+      <div v-bind="thumbInnerAttrs"></div>
+      <span v-if="percent > 0 && isShowTooltip" v-bind="tooltipAttrs">{{ displayValue }}</span>
+    </div>
+  </div>
+</div>

package/src/components/slide-range/slide-range.scss

@@ -0,0 +1,161 @@
+@use "@toife/sass-layer" as sass;
+
+// Class name
+$slide-range: sass.fn-naming-prefix("slide-range");
+$slide-range-track-container: sass.fn-naming-prefix("slide-range-track-container");
+$slide-range-track-body: sass.fn-naming-prefix("slide-range-track-body");
+$slide-range-track: sass.fn-naming-prefix("slide-range-track");
+$slide-range-node: sass.fn-naming-prefix("slide-range-node");
+$slide-range-thumb: sass.fn-naming-prefix("slide-range-thumb");
+$slide-range-thumb-inner: sass.fn-naming-prefix("slide-range-thumb-inner");
+$slide-range-tooltip: sass.fn-naming-prefix("slide-range-tooltip");
+$shape-pill: sass.fn-naming-prefix("shape-pill");
+$shape-rounded: sass.fn-naming-prefix("shape-rounded");
+$shape-flat: sass.fn-naming-prefix("shape-flat");
+$property-border-radius: sass.fn-naming-property("border-radius");
+
+// Property name
+$spacing-x: sass.fn-naming-var("spacing", "x");
+$border-width: sass.fn-naming-var("stroke", "width");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+$radius-size: sass.fn-naming-var("radius-size");
+
+$slide-range-background-color: sass.fn-naming-var("slide-range", "background-color");
+$slide-range-background-color-hover: sass.fn-naming-var("slide-range", "background-color", "hover");
+$slide-range-background-color-focus: sass.fn-naming-var("slide-range", "background-color", "focus");
+$slide-range-background-color-active: sass.fn-naming-var(
+  "slide-range",
+  "background-color",
+  "active"
+);
+$slide-range-border-color: sass.fn-naming-var("slide-range", "border-color");
+$slide-range-border-color-hover: sass.fn-naming-var("slide-range", "border-color", "hover");
+$slide-range-border-color-focus: sass.fn-naming-var("slide-range", "border-color", "focus");
+$slide-range-border-color-active: sass.fn-naming-var("slide-range", "border-color", "active");
+$slide-range-percent: sass.fn-naming-var("slide-range", "percent");
+$slide-range-position: sass.fn-naming-var("slide-range", "position");
+$slide-range-tooltip-background-color: sass.fn-naming-var(
+  "slide-range",
+  "tooltip-background-color"
+);
+$slide-range-tooltip-color: sass.fn-naming-var("slide-range", "tooltip-color");
+
+.#{$slide-range} {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  &.#{$shape-pill} {
+    #{$property-border-radius}: 50%;
+
+    .#{$slide-range-tooltip} {
+      border-radius: 3px;
+    }
+  }
+
+  &.#{$shape-rounded} {
+    #{$property-border-radius}: 2px;
+
+    .#{$slide-range-tooltip} {
+      border-radius: 2px;
+    }
+  }
+
+  &.#{$shape-flat} {
+    #{$property-border-radius}: 0;
+
+    .#{$slide-range-tooltip} {
+      border-radius: 0;
+    }
+  }
+
+  &.disabled,
+  &.readonly {
+    opacity: 0.6;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  .#{$slide-range-track-container} {
+    position: relative;
+    margin: calc(#{$spacing-x} * 2) #{$spacing-x};
+    width: calc(100% - #{$spacing-x} * 2);
+    height: 1rem;
+    touch-action: none;
+  }
+
+  .#{$slide-range-track-body} {
+    position: relative;
+    width: 100%;
+    height: 1px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .#{$slide-range-track} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1px;
+
+    &.back {
+      width: 100%;
+      background-color: rgb(#{$slide-range-border-color});
+    }
+
+    &.front {
+      width: #{$slide-range-percent};
+      background-color: rgb(#{$slide-range-border-color-active});
+    }
+  }
+
+  .#{$slide-range-node} {
+    position: absolute;
+    left: #{$slide-range-position};
+    top: -3.5px;
+    height: 8px;
+    width: 8px;
+    border-radius: calc(min(8px, #{$radius-size}) * #{$radius-ratio});
+    transform: rotate(45deg);
+    background-color: rgb(#{$slide-range-background-color});
+    border: 1px solid rgb(#{$slide-range-border-color});
+
+    &.active {
+      border-color: rgb(#{$slide-range-border-color-active});
+      background-color: rgb(#{$slide-range-background-color-active});
+    }
+  }
+
+  .#{$slide-range-thumb} {
+    position: absolute;
+    left: #{$slide-range-percent};
+    top: 2px;
+    height: 100%;
+
+    .#{$slide-range-thumb-inner} {
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      border: 1px solid rgb(#{$slide-range-border-color-active});
+      border-radius: calc(12px * #{$radius-ratio});
+      background-color: rgb(#{$slide-range-background-color});
+      transform: translateX(calc(-50% + 2px)) rotate(45deg);
+    }
+
+    .#{$slide-range-tooltip} {
+      position: absolute;
+      top: -23px;
+      left: calc(50% + 0.15rem);
+      transform: translateX(-50%);
+      padding: 0 calc(#{$spacing-x} * 0.5);
+      font-size: 0.6rem;
+      line-height: 0.9rem;
+      white-space: nowrap;
+      color: rgb(#{$slide-range-tooltip-color});
+      background-color: rgb(#{$slide-range-tooltip-background-color});
+    }
+  }
+}

package/src/components/slide-range/slide-range.type.ts

@@ -0,0 +1,16 @@
+export type SlideRangeProps = {
+  modelValue?: string | number;
+  min?: number;
+  max?: number;
+  step?: number;
+  unit?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  role?: string;
+  shape?: string;
+};
+
+export type SlideRangeEmit = {
+  (e: "update:modelValue", value: string): void;
+  (e: "change", value: string): void;
+};

package/src/components/slide-range/slide-range.vue

@@ -0,0 +1,229 @@
+<style lang="scss" src="./slide-range.scss" scoped></style>
+<template src="./slide-range.html"></template>
+<script lang="ts" setup>
+import { gesture } from "@toife/gesture";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { property, withPrefix } from "../../utils";
+import type { SlideRangeProps, SlideRangeEmit } from "./slide-range.type";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+import { inject } from "vue";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<SlideRangeProps>(), {
+  modelValue: "",
+  min: 0,
+  max: 100,
+  step: 25,
+  unit: "",
+  disabled: false,
+  readonly: false,
+});
+const emit = defineEmits<SlideRangeEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const point = ref<HTMLElement | null>(null);
+const container = ref<HTMLElement | null>(null);
+const isShowTooltip = ref(false);
+let tooltipTimeout: ReturnType<typeof setTimeout> | undefined;
+let gestureCleanup: { destroy: () => void } | null = null;
+let dragStartPercent = 0;
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const normalizedValue = computed(() => {
+  if (typeof props.modelValue === "number") return props.modelValue;
+  if (typeof props.modelValue !== "string") return props.min;
+  const parsed = Number.parseFloat(props.modelValue);
+  if (Number.isNaN(parsed)) return props.min;
+  return parsed;
+});
+
+const percent = computed(() => {
+  const delta = props.max - props.min;
+  if (delta <= 0) return 0;
+  const p = ((normalizedValue.value - props.min) / delta) * 100;
+  return Math.max(0, Math.min(100, Math.round(p)));
+});
+
+const ranges = computed(() => {
+  const { min, max, step } = props;
+  if (step <= 0 || max < min) return [min, max];
+
+  const result: number[] = [];
+  for (let value = min; value <= max; value += step) {
+    result.push(value);
+  }
+
+  if (result.at(-1) !== max) {
+    result.push(max);
+  }
+
+  return result;
+});
+
+const displayValue = computed(() => {
+  const value = getValueFromPercent(percent.value);
+  return formatValue(value);
+});
+
+const slideRangeAttrs = computed(() => {
+  const role = props.role || appState?.role.value || "";
+  const shape = props.shape || appState?.shape.value || "";
+  return {
+    class: [
+      withPrefix("slide-range"),
+      withPrefix(["layer", "slide-range"]),
+      withPrefix(["role", role]),
+      withPrefix(["shape", shape]),
+      {
+        disabled: props.disabled,
+        readonly: props.readonly,
+      },
+    ],
+  };
+});
+
+const trackContainerAttrs = {
+  class: [withPrefix("slide-range-track-container")],
+} as const;
+
+const trackBodyAttrs = {
+  class: [withPrefix("slide-range-track-body")],
+} as const;
+
+const trackBackAttrs = {
+  class: [withPrefix("slide-range-track"), "back"],
+} as const;
+
+const trackFrontAttrs = computed(() => {
+  return {
+    class: [withPrefix("slide-range-track"), "front"],
+    style: {
+      [property(["slide-range", "percent"])]: `${percent.value}%`,
+    },
+  };
+});
+
+const thumbAttrs = computed(() => {
+  return {
+    class: [withPrefix("slide-range-thumb")],
+    style: {
+      [property(["slide-range", "percent"])]: `${percent.value}%`,
+    },
+  };
+});
+
+const thumbInnerAttrs = {
+  class: [withPrefix("slide-range-thumb-inner")],
+} as const;
+
+const tooltipAttrs = {
+  class: [withPrefix("slide-range-tooltip")],
+} as const;
+
+// Methods
+// ----------------------------------------------------------------------------
+const nodeAttrs = (value: number) => {
+  const nodePercent = getPercentFromValue(value);
+  return {
+    class: [withPrefix("slide-range-node"), { active: percent.value > nodePercent }],
+    style: {
+      [property(["slide-range", "position"])]: `${nodePercent}%`,
+    },
+  };
+};
+
+const getValueFromPercent = (currentPercent: number) => {
+  const { min, max } = props;
+  return Math.round(min + (max - min) * (currentPercent / 100));
+};
+
+const getPercentFromValue = (value: number) => {
+  const { min, max } = props;
+  if (max <= min) return 0;
+  const p = ((value - min) / (max - min)) * 100;
+  return Math.max(0, Math.min(100, p));
+};
+
+const formatValue = (value: number) => {
+  if (value === 0) return "";
+  return `${value}${props.unit || ""}`;
+};
+
+const showTooltipTemporarily = () => {
+  if (tooltipTimeout) clearTimeout(tooltipTimeout);
+  isShowTooltip.value = true;
+  tooltipTimeout = setTimeout(() => {
+    isShowTooltip.value = false;
+  }, 300);
+};
+
+const emitValueFromPercent = (currentPercent: number) => {
+  if (props.disabled || props.readonly) return;
+  const value = getValueFromPercent(currentPercent);
+  const payload = formatValue(value);
+  emit("update:modelValue", payload);
+  emit("change", payload);
+};
+
+const onNodeSelect = (value: number) => {
+  const nodePercent = getPercentFromValue(value);
+  emitValueFromPercent(nodePercent);
+  showTooltipTemporarily();
+};
+
+const getClientX = (ev: MouseEvent | TouchEvent) => {
+  if ("changedTouches" in ev && ev.changedTouches.length > 0) {
+    return ev.changedTouches[0].clientX;
+  }
+  return (ev as MouseEvent).clientX;
+};
+
+const onClickPath = (ev: MouseEvent | TouchEvent) => {
+  if (props.disabled || props.readonly || !container.value) return;
+  const width = container.value.offsetWidth;
+  const rect = container.value.getBoundingClientRect();
+  const x = getClientX(ev) - rect.left;
+  const p = (x / width) * 100;
+  emitValueFromPercent(Math.max(0, Math.min(100, p)));
+  showTooltipTemporarily();
+};
+
+// Lifecycle
+// ----------------------------------------------------------------------------
+onMounted(() => {
+  if (!point.value || !container.value) return;
+  gestureCleanup = gesture(point.value, {
+    down() {
+      if (props.disabled || props.readonly) return;
+      dragStartPercent = percent.value;
+    },
+    up() {
+      isShowTooltip.value = false;
+    },
+    cancel() {
+      isShowTooltip.value = false;
+    },
+    move({ initialDirection, deltaX }: { initialDirection: string; deltaX: number }) {
+      if (props.disabled || props.readonly) return;
+      if (initialDirection !== "right" && initialDirection !== "left") return;
+      if (!container.value) return;
+
+      const width = container.value.offsetWidth;
+      const p = (deltaX / width) * 100;
+      const nextPercent = Math.max(0, Math.min(100, Math.round(dragStartPercent + p)));
+      emitValueFromPercent(nextPercent);
+      if (tooltipTimeout) clearTimeout(tooltipTimeout);
+      isShowTooltip.value = true;
+    },
+  });
+});
+
+onUnmounted(() => {
+  if (tooltipTimeout) clearTimeout(tooltipTimeout);
+  gestureCleanup?.destroy();
+});
+</script>

package/src/components/switch/switch.scss

@@ -3,8 +3,6 @@
 // Classes
 $switch: sass.fn-naming-prefix("switch");
 $switch-icon: sass.fn-naming-prefix("switch-icon");
-$shape-rounded: sass.fn-naming-prefix("shape-rounded");
-$shape-pill: sass.fn-naming-prefix("shape-pill");
 $switch-wrapper: sass.fn-naming-prefix("switch-wrapper");
 
 // Property name - layer: switch (track + thumb; states like button + inactive)
@@ -19,8 +17,11 @@ $switch-color-disabled: sass.fn-naming-var("switch", "color", "disabled");
 $switch-box-shadow-color-focus: sass.fn-naming-var("switch", "box-shadow-color", "focus");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
 $spacing-x: sass.fn-naming-var("spacing", "x");
+$size-control-mark-size: sass.fn-naming-var("control-mark-size");
+$radius-size: sass.fn-naming-var("radius-size");
+$icon-size: calc(#{$size-control-mark-size} - #{$size-control-mark-size} * 0.2);
 
 .#{$switch-wrapper} {
   display: inline-flex;
@@ -30,8 +31,8 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
   box-shadow: none !important;
 
   .#{$switch} {
-    height: 1.5rem;
-    aspect-ratio: 11/6;
+    height: #{$size-control-mark-size};
+    aspect-ratio: 14/8;
     position: relative;
     transition:
       background-color #{$transition-duration} ease,
@@ -39,15 +40,15 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
       border-color #{$transition-duration} ease,
       border-radius #{$transition-duration} ease,
       box-shadow #{$transition-duration} ease;
-    border-radius: #{$border-radius};
+    border-radius: calc(min(#{$size-control-mark-size}, #{$radius-size}) * #{$radius-ratio});
 
     .#{$switch-icon} {
-      height: calc(100% - 0.3rem);
+      width: #{$icon-size};
+      height: #{$icon-size};
       position: absolute;
       top: 0;
-      border-radius: #{$border-radius};
-      aspect-ratio: 1/1;
-      margin: 0.15rem;
+      border-radius: calc(min(#{$icon-size}, #{$radius-size}) * #{$radius-ratio});
+      margin: calc(#{$size-control-mark-size} * 0.1);
       transition:
         background-color #{$transition-duration} ease,
         color #{$transition-duration} ease,
@@ -55,18 +56,6 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
         border-radius #{$transition-duration} ease,
         transform #{$transition-duration} ease;
     }
-
-    &.#{$shape-rounded} {
-      .#{$switch-icon} {
-        border-radius: calc(#{$border-radius} - 10%);
-      }
-    }
-
-    &.#{$shape-pill} {
-      .#{$switch-icon} {
-        border-radius: 50%;
-      }
-    }
   }
 
   &.disabled {

package/src/components/switch/switch.type.ts

@@ -1,7 +1,12 @@
+import { AppSize } from "../app";
+
+export type SwitchSize = AppSize;
+
 // Type definitions
 export type SwitchProps = {
   modelValue?: boolean;
   role?: string;
+  size?: SwitchSize;
   shape?: string;
   disabled?: boolean;
   readonly?: boolean;