@toife/vue 3.1.6 → 3.2.2

package/src/components/button/button.scss

@@ -1,124 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$button: sass.fn-naming-prefix("button");
-$loader: sass.fn-naming-prefix("loader");
-
-// Property name
-$radius-ratio: sass.fn-naming-var("radius-ratio");
-$radius-size: sass.fn-naming-var("radius-size");
-$border-width: sass.fn-naming-var("stroke", "width");
-$transition-duration: sass.fn-naming-var("duration");
-$spacing-x: sass.fn-naming-var("spacing", "x");
-$spacing-y: sass.fn-naming-var("spacing", "y");
-
-$button-color: sass.fn-naming-var("button", "color");
-$button-color-disabled: sass.fn-naming-var("button", "color", "disabled");
-
-$button-border-color: sass.fn-naming-var("button", "border-color");
-$button-border-color-hover: sass.fn-naming-var("button", "border-color", "hover");
-$button-border-color-focus: sass.fn-naming-var("button", "border-color", "focus");
-$button-border-color-active: sass.fn-naming-var("button", "border-color", "active");
-$button-border-color-disabled: sass.fn-naming-var("button", "border-color", "disabled");
-
-$button-background-color: sass.fn-naming-var("button", "background-color");
-$button-background-color-hover: sass.fn-naming-var("button", "background-color", "hover");
-$button-background-color-focus: sass.fn-naming-var("button", "background-color", "focus");
-$button-background-color-active: sass.fn-naming-var("button", "background-color", "active");
-$button-background-color-disabled: sass.fn-naming-var("button", "background-color", "disabled");
-
-$button-box-shadow-color-focus: sass.fn-naming-var("button", "box-shadow-color", "focus");
-
-$size-font-size: sass.fn-naming-var("font-size");
-$size-control-block-size: sass.fn-naming-var("control-block-size");
-$size-coefficient-x: sass.fn-naming-var("coefficient-x");
-$size-coefficient-y: sass.fn-naming-var("coefficient-y");
-$size-line-height: sass.fn-naming-var("line-height");
-
-.#{$button} {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-  color: rgba(#{$button-color});
-  background: rgba(#{$button-background-color});
-  border-color: rgba(#{$button-border-color});
-  border-style: solid;
-  border-width: #{$border-width};
-  white-space: nowrap;
-  border-radius: calc(min(#{$size-control-block-size}, #{$radius-size}) * #{$radius-ratio});
-  cursor: pointer;
-  transition:
-    color #{$transition-duration} ease,
-    background-color #{$transition-duration} ease,
-    border-color #{$transition-duration} ease,
-    border-radius #{$transition-duration} ease,
-    box-shadow #{$transition-duration} ease;
-  box-shadow: none;
-
-  padding: calc(#{$spacing-y} * #{$size-coefficient-y}) calc(#{$spacing-x} * #{$size-coefficient-x});
-  font-size: #{$size-font-size};
-  height: #{$size-control-block-size};
-  line-height: #{$size-line-height};
-
-  // Text variant
-  &.text {
-    background-color: transparent;
-    border-color: transparent;
-    color: rgba(#{$button-background-color});
-  }
-
-  // Fill variant
-  &.fill:hover {
-    border-color: rgba(#{$button-border-color-hover});
-    background-color: rgba(#{$button-background-color-hover});
-  }
-
-  &.fill.focus,
-  &.fill:focus {
-    border-color: rgba(#{$button-border-color-focus});
-    background-color: rgba(#{$button-background-color-focus});
-
-    &.shadow {
-      box-shadow: 0 0 0 0.25rem rgba(#{$button-box-shadow-color-focus}, 0.25);
-    }
-  }
-
-  &.fill:active,
-  &.fill.active {
-    border-color: rgba(#{$button-border-color-active});
-    background-color: rgba(#{$button-background-color-active});
-  }
-
-  &.fill:disabled,
-  &.fill.disabled {
-    border-color: rgba(#{$button-border-color-disabled});
-    background-color: rgba(#{$button-background-color-disabled});
-    color: rgba(#{$button-color-disabled});
-    cursor: not-allowed;
-  }
-
-  // Case is block, then display full width
-  &.block {
-    width: 100%;
-  }
-
-  // Style for loading icon
-  .#{$loader} {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  // Style for content of button
-  > span {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: inherit;
-    line-height: inherit;
-  }
-}

package/src/components/button/button.type.ts

@@ -1,14 +0,0 @@
-// Type definitions
-export type ButtonVariant = "fill" | "outline" | "text";
-
-export type ButtonSize = string;
-
-export type ButtonProps = {
-  role?: string;
-  size?: ButtonSize;
-  shape?: string;
-  block?: boolean;
-  loading?: boolean;
-  variant?: ButtonVariant;
-  shadow?: boolean;
-};

package/src/components/button/button.vue

@@ -1,61 +0,0 @@
-<style lang="scss" src="./button.scss" scoped></style>
-<template src="./button.html"></template>
-<script lang="ts" setup>
-import { computed, inject, ref } from "vue";
-import { type ButtonProps } from "./button.type";
-import { cssPrefix } from "../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<ButtonProps>(), {
-  size: "standard",
-  block: false,
-  loading: false,
-  variant: "fill",
-  shadow: undefined,
-});
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const isFocused = ref(false);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const buttonAttrs = computed(() => {
-  const shape = props.shape || appState?.shape.value || "";
-  const role = props.role || appState?.role.value || "";
-  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
-
-  return {
-    class: [
-      cssPrefix(["layer", "button"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["shape", shape]),
-      cssPrefix("button"),
-      cssPrefix(["size", props.size]),
-      props.variant,
-      {
-        block: props.block,
-        shadow,
-        focus: isFocused.value,
-      },
-    ],
-  };
-});
-
-const loaderAttrs = {
-  class: [cssPrefix("loader")],
-} as const;
-
-// Methods
-// ----------------------------------------------------------------------------
-const onFocus = () => {
-  isFocused.value = true;
-};
-
-const onBlur = () => {
-  isFocused.value = false;
-};
-</script>

package/src/components/button/index.ts

@@ -1,2 +0,0 @@
-export { default as Button } from "./button.vue";
-export type { ButtonProps } from "./button.type";

package/src/components/cable/cable.constants.ts

@@ -1 +0,0 @@
-export const CABLE_PROVIDER_STATE_KEY = "cable-state";

package/src/components/cable/cable.html

@@ -1,3 +0,0 @@
-<div v-bind="cableAttrs">
-  <slot />
-</div>

package/src/components/cable/cable.scss

@@ -1,37 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$cable: sass.fn-naming-prefix("cable");
-
-.#{$cable} {
-  position: absolute;
-  z-index: 10;
-
-  &.bottom {
-    bottom: 0;
-    left: 0;
-    height: auto;
-    width: 100%;
-  }
-
-  &.top {
-    left: 0;
-    top: 0;
-    height: auto;
-    width: 100%;
-  }
-
-  &.left {
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: auto;
-  }
-
-  &.right {
-    right: 0;
-    top: 0;
-    height: 100%;
-    width: auto;
-  }
-}

package/src/components/cable/cable.type.ts

@@ -1,11 +0,0 @@
-import type { Ref } from "vue";
-
-// Type definitions
-export type CableProps = {
-  keyboard?: boolean;
-  placement?: string;
-};
-
-export type CableProviderState = {
-  placement: Ref<string>;
-};

package/src/components/cable/cable.vue

@@ -1,33 +0,0 @@
-<style lang="scss" src="./cable.scss" scoped></style>
-<template src="./cable.html"></template>
-<script lang="ts" setup>
-import { computed, provide, toRefs } from "vue";
-import { type CableProviderState, type CableProps } from "./cable.type";
-import { cssPrefix } from "../../utils";
-import { CABLE_PROVIDER_STATE_KEY } from "./cable.constants";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<CableProps>(), {
-  keyboard: false,
-  placement: "bottom",
-});
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const { placement } = toRefs(props);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const cableAttrs = computed(() => {
-  return {
-    class: [cssPrefix(["layer", "cable"]), cssPrefix("cable"), placement.value],
-  };
-});
-
-// Provide / expose (public API)
-// ----------------------------------------------------------------------------
-provide<CableProviderState>(CABLE_PROVIDER_STATE_KEY, {
-  placement,
-});
-</script>

package/src/components/cable/index.ts

@@ -1,3 +0,0 @@
-export { default as Cable } from "./cable.vue";
-export type { CableProps } from "./cable.type";
-export { CABLE_PROVIDER_STATE_KEY } from "./cable.constants";

package/src/components/card/card/card.constants.ts

@@ -1 +0,0 @@
-export const CARD_PROVIDER_STATE_KEY = "card-state";

package/src/components/card/card/card.html

@@ -1,3 +0,0 @@
-<div v-bind="cardAttrs">
-  <slot />
-</div>

package/src/components/card/card/card.scss

@@ -1,37 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$card: sass.fn-naming-prefix("card");
-
-// Property name - layer: card
-$card-background-color: sass.fn-naming-var("card", "background-color");
-$card-color: sass.fn-naming-var("card", "color");
-
-$radius-ratio: sass.fn-naming-var("radius-ratio");
-$radius-size: sass.fn-naming-var("radius-size");
-$transition-duration: sass.fn-naming-var("duration");
-$border-radius: calc(#{$radius-size} * #{$radius-ratio});
-
-.#{$card} {
-  background-color: rgba(#{$card-background-color});
-  color: rgba(#{$card-color});
-  border-radius: #{$border-radius};
-  transition:
-    box-shadow #{$transition-duration} ease,
-    border-color #{$transition-duration} ease,
-    background-color #{$transition-duration} ease,
-    color #{$transition-duration} ease,
-    border-radius #{$transition-duration} ease;
-
-  > div {
-    &:first-child {
-      border-top-left-radius: #{$border-radius};
-      border-top-right-radius: #{$border-radius};
-    }
-
-    &:last-child {
-      border-bottom-left-radius: #{$border-radius};
-      border-bottom-right-radius: #{$border-radius};
-    }
-  }
-}

package/src/components/card/card/card.type.ts

@@ -1,14 +0,0 @@
-import { ComputedRef, Ref } from "vue";
-
-// Type definitions
-export type CardProps = {
-  role?: string;
-  shape?: string;
-  divider?: boolean;
-};
-
-export type CardProviderState = {
-  role: ComputedRef<string>;
-  shape: ComputedRef<string>;
-  divider: ComputedRef<boolean>;
-};

package/src/components/card/card/card.vue

@@ -1,62 +0,0 @@
-<style lang="scss" src="./card.scss"></style>
-<template src="./card.html"></template>
-<script lang="ts" setup>
-import { computed, inject, provide } from "vue";
-import { type CardProps, type CardProviderState } from "./card.type";
-import { cssPrefix } from "../../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
-import { CARD_PROVIDER_STATE_KEY } from "./card.constants";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<CardProps>(), {
-  divider: undefined,
-  shape: undefined,
-  role: undefined,
-});
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const divider = computed(() => {
-  return (props?.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
-});
-
-const shape = computed(() => {
-  return props?.shape || appState?.shape.value || "";
-});
-
-const role = computed(() => {
-  return props.role || appState?.role.value || "";
-});
-
-const cardAttrs = computed(() => {
-  return {
-    class: [
-      cssPrefix(["layer", "card"]),
-      cssPrefix(["role", role.value]),
-      cssPrefix(["shape", shape.value]),
-      cssPrefix("card"),
-      {
-        divider: divider.value,
-      },
-    ],
-  };
-});
-
-const cardProviderState = computed(() => {
-  return {
-    role: role.value,
-    shape: shape.value,
-    divider: divider.value,
-  };
-});
-
-// Provide / expose (public API)
-// ----------------------------------------------------------------------------
-provide<CardProviderState>(CARD_PROVIDER_STATE_KEY, {
-  role,
-  shape,
-  divider,
-});
-</script>

package/src/components/card/card/index.ts

@@ -1,3 +0,0 @@
-export { default as Card } from "./card.vue";
-export * from "./card.type";
-export { CARD_PROVIDER_STATE_KEY } from "./card.constants";

package/src/components/card/card-body/card-body.html

@@ -1,3 +0,0 @@
-<div v-bind="cardBodyAttrs">
-  <slot />
-</div>

package/src/components/card/card-body/card-body.scss

@@ -1,23 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$card-body: sass.fn-naming-prefix("card-body");
-
-// Property name - layer: card
-$card-background-color: sass.fn-naming-var("card", "background-color");
-$card-color: sass.fn-naming-var("card", "color");
-$padding-y: sass.fn-naming-var("spacing", "y");
-$padding-x: sass.fn-naming-var("spacing", "x");
-$transition-duration: sass.fn-naming-var("duration");
-
-.#{$card-body} {
-  background-color: rgba(#{$card-background-color});
-  color: rgba(#{$card-color});
-  padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
-  transition:
-    box-shadow #{$transition-duration} ease,
-    border-color #{$transition-duration} ease,
-    background-color #{$transition-duration} ease,
-    color #{$transition-duration} ease,
-    border-radius #{$transition-duration} ease;
-}

package/src/components/card/card-body/card-body.vue

@@ -1,9 +0,0 @@
-<style lang="scss" src="./card-body.scss"></style>
-<template src="./card-body.html"></template>
-<script lang="ts" setup>
-import { cssPrefix } from "../../../utils";
-
-const cardBodyAttrs = {
-  class: [cssPrefix("card-body")],
-} as const;
-</script>

package/src/components/card/card-body/index.ts

@@ -1 +0,0 @@
-export { default as CardBody } from "./card-body.vue";

package/src/components/card/card-footer/card-footer.html

@@ -1,3 +0,0 @@
-<div v-bind="cardFooterAttrs">
-  <slot />
-</div>

package/src/components/card/card-footer/card-footer.scss

@@ -1,32 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$card-footer: sass.fn-naming-prefix("card-footer");
-
-// Property name - layer: card
-$card-background-color: sass.fn-naming-var("card", "background-color");
-$card-color: sass.fn-naming-var("card", "color");
-$card-border-color: sass.fn-naming-var("card", "border-color");
-
-$padding-y: sass.fn-naming-var("spacing", "y");
-$padding-x: sass.fn-naming-var("spacing", "x");
-$border-width: sass.fn-naming-var("stroke", "width");
-$border: #{$border-width} solid transparent;
-$transition-duration: sass.fn-naming-var("duration");
-
-.#{$card-footer} {
-  background-color: rgba(#{$card-background-color});
-  color: rgba(#{$card-color});
-  padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
-  border-top: #{$border};
-  transition:
-    box-shadow #{$transition-duration} ease,
-    border-color #{$transition-duration} ease,
-    background-color #{$transition-duration} ease,
-    color #{$transition-duration} ease,
-    border-radius #{$transition-duration} ease;
-
-  &.divider {
-    border-color: rgba(#{$card-border-color});
-  }
-}

package/src/components/card/card-footer/card-footer.vue

@@ -1,25 +0,0 @@
-<style lang="scss" src="./card-footer.scss"></style>
-<template src="./card-footer.html"></template>
-<script lang="ts" setup>
-import { computed, inject } from "vue";
-import { cssPrefix } from "../../../utils";
-import { type CardProviderState, CARD_PROVIDER_STATE_KEY } from "../card";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const cardProviderState = inject<CardProviderState>(CARD_PROVIDER_STATE_KEY);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const cardFooterAttrs = computed(() => {
-  const divider = cardProviderState?.divider.value ?? false;
-  return {
-    class: [
-      cssPrefix("card-footer"),
-      {
-        divider,
-      },
-    ],
-  };
-});
-</script>

package/src/components/card/card-footer/index.ts

@@ -1 +0,0 @@
-export { default as CardFooter } from "./card-footer.vue";

package/src/components/card/card-header/card-header.html

@@ -1,3 +0,0 @@
-<div v-bind="cardHeaderAttrs">
-  <slot />
-</div>

package/src/components/card/card-header/card-header.scss

@@ -1,32 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$card-header: sass.fn-naming-prefix("card-header");
-
-// Property name - layer: card
-$card-background-color: sass.fn-naming-var("card", "background-color");
-$card-color: sass.fn-naming-var("card", "color");
-$card-border-color: sass.fn-naming-var("card", "border-color");
-
-$padding-y: sass.fn-naming-var("spacing", "y");
-$padding-x: sass.fn-naming-var("spacing", "x");
-$border-width: sass.fn-naming-var("stroke", "width");
-$border: #{$border-width} solid transparent;
-$transition-duration: sass.fn-naming-var("duration");
-
-.#{$card-header} {
-  background-color: rgba(#{$card-background-color});
-  color: rgba(#{$card-color});
-  padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
-  border-bottom: #{$border};
-  transition:
-    box-shadow #{$transition-duration} ease,
-    border-color #{$transition-duration} ease,
-    background-color #{$transition-duration} ease,
-    color #{$transition-duration} ease,
-    border-radius #{$transition-duration} ease;
-
-  &.divider {
-    border-color: rgba(#{$card-border-color});
-  }
-}

package/src/components/card/card-header/card-header.vue

@@ -1,25 +0,0 @@
-<style lang="scss" src="./card-header.scss"></style>
-<template src="./card-header.html"></template>
-<script lang="ts" setup>
-import { computed, inject } from "vue";
-import { cssPrefix } from "../../../utils";
-import { type CardProviderState, CARD_PROVIDER_STATE_KEY } from "../card";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const cardProviderState = inject<CardProviderState>(CARD_PROVIDER_STATE_KEY);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const cardHeaderAttrs = computed(() => {
-  const divider = cardProviderState?.divider.value ?? false;
-  return {
-    class: [
-      cssPrefix("card-header"),
-      {
-        divider,
-      },
-    ],
-  };
-});
-</script>

package/src/components/card/card-header/index.ts

@@ -1 +0,0 @@
-export { default as CardHeader } from "./card-header.vue";

package/src/components/card/index.ts

@@ -1,4 +0,0 @@
-export * from "./card";
-export * from "./card-body";
-export * from "./card-header";
-export * from "./card-footer";

package/src/components/checkbox/checkbox.html

@@ -1,12 +0,0 @@
-<div
-  v-bind="checkboxAttrs"
-  :tabindex="disabled ? -1 : 0"
-  :aria-checked="props.modelValue"
-  @pointerup="onCheckbox"
-  @focus="onFocus"
-  @blur="onBlur"
-  @keydown="onKeydown"
->
-  <div v-bind="checkboxIconAttrs"></div>
-  <slot></slot>
-</div>