@toife/vue 3.1.2 → 3.1.4

package/src/components/layout/grid-item/grid-item.scss

@@ -0,0 +1,49 @@
+@use "@toife/sass-layer" as sass;
+@use "sass:map";
+@use "sass:list";
+
+$grid-item: sass.fn-naming-prefix("grid-item");
+$grid-item-row: sass.fn-naming-var("grid-item", "row");
+$grid-item-column: sass.fn-naming-var("grid-item", "column");
+$grid-item-justify: sass.fn-naming-var("grid-item", "justify");
+$grid-item-align: sass.fn-naming-var("grid-item", "align");
+
+.#{$grid-item} {
+  display: grid;
+  box-sizing: border-box;
+  min-width: 0;
+  grid-column: #{$grid-item-column};
+  grid-row: #{$grid-item-row};
+  justify-self: #{$grid-item-justify};
+  align-self: #{$grid-item-align};
+
+  $bp-names: map.keys(sass.$breakpoints);
+  $bp-count: list.length($bp-names);
+
+  @for $i from 1 through $bp-count {
+    $bp-name: list.nth($bp-names, $i);
+    $bp-min: map.get(sass.$breakpoints, $bp-name);
+
+    @media (min-width: $bp-min) {
+      grid-column: #{sass.fn-naming-cascade-dvar(
+          ("grid-item", "column"),
+          $bp-names,
+          $i,
+          $grid-item-column
+        )};
+      grid-row: #{sass.fn-naming-cascade-dvar(("grid-item", "row"), $bp-names, $i, $grid-item-row)};
+      justify-self: #{sass.fn-naming-cascade-dvar(
+          ("grid-item", "justify"),
+          $bp-names,
+          $i,
+          $grid-item-justify
+        )};
+      align-self: #{sass.fn-naming-cascade-dvar(
+          ("grid-item", "align"),
+          $bp-names,
+          $i,
+          $grid-item-align
+        )};
+    }
+  }
+}

package/src/components/layout/grid-item/grid-item.type.ts

@@ -0,0 +1,14 @@
+export type GridItemJustify = "start" | "end" | "center" | "stretch";
+export type GridItemAlign = "start" | "end" | "center" | "stretch";
+
+export type GridItemOption = {
+  breakpoint?: string;
+  row?: number;
+  column?: number;
+  justify?: GridItemJustify;
+  align?: GridItemAlign;
+};
+
+export type GridItemProps = {
+  options?: GridItemOption[];
+};

package/src/components/layout/grid-item/grid-item.vue

@@ -0,0 +1,27 @@
+<style lang="scss" src="./grid-item.scss" scoped></style>
+<template src="./grid-item.html"></template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { withPrefix, property } from "../../../utils";
+import type { GridItemProps } from "./grid-item.type";
+
+const props = withDefaults(defineProps<GridItemProps>(), {
+  options: () => [],
+});
+
+const gridItemAttrs = computed(() => {
+  const style = props.options.map((option) => {
+    return {
+      [property(["grid-item", "row", option?.breakpoint || ""])]: option.row,
+      [property(["grid-item", "column", option?.breakpoint || ""])]: option.column,
+      [property(["grid-item", "justify", option?.breakpoint || ""])]: option.justify,
+      [property(["grid-item", "align", option?.breakpoint || ""])]: option.align,
+    };
+  });
+
+  return {
+    class: [withPrefix("grid-item")],
+    style,
+  };
+});
+</script>

package/src/components/layout/grid-item/index.ts

@@ -0,0 +1,2 @@
+export { default as GridItem } from "./grid-item.vue";
+export * from "./grid-item.type";

package/src/components/layout/index.ts

@@ -1,3 +1,4 @@
 export * from "./grid";
 export * from "./flex";
-export * from "./cell";
+export * from "./grid-item";
+export * from "./flex-item";

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/radio/radio-group/index.ts

@@ -2,6 +2,6 @@ export { default as RadioGroup } from "./radio-group.vue";
 export type {
   RadioGroupProps,
   RadioGroupProviderState,
-  RadioGroupOrientation,
+  RadioGroupDirection,
 } from "./radio-group.type";
 export { RADIO_GROUP_PROVIDER_STATE_KEY } from "./radio-group.constants";

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

@@ -1,7 +1,7 @@
 import type { ComputedRef } from "vue";
 import type { RadioVariant } from "../radio/radio.type";
 
-export type RadioGroupOrientation = "horizontal" | "vertical";
+export type RadioGroupDirection = "horizontal" | "vertical";
 
 export type RadioGroupProps = {
   modelValue?: string | number;
@@ -10,7 +10,7 @@ export type RadioGroupProps = {
   disabled?: boolean;
   readonly?: boolean;
   shadow?: boolean;
-  orientation?: RadioGroupOrientation;
+  direction?: RadioGroupDirection;
 };
 
 export type RadioGroupEmit = {

package/src/components/radio/radio-group/radio-group.vue

@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<RadioGroupProps>(), {
   disabled: false,
   readonly: false,
   variant: "fill",
-  orientation: "vertical",
+  direction: "vertical",
   shadow: undefined,
 });
 const emit = defineEmits<RadioGroupEmit>();
@@ -37,7 +37,7 @@ const shadow = computed(() => {
 
 const radioGroupAttrs = computed(() => {
   return {
-    class: [withPrefix("radio-group"), props.orientation],
+    class: [withPrefix("radio-group"), props.direction],
   };
 });
 

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;
+};