@toife/vue 2.2.0 → 3.0.0

package/src/components/avatar/avatar.scss

@@ -0,0 +1,35 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class
+$avatar: sass.fn-naming-prefix("avatar");
+$shape-pill: sass.fn-naming-prefix("shape-pill");
+
+// Property - layer: surface
+$border-radius: sass.fn-naming-var("border-radius");
+$background-color: sass.fn-naming-var("surface", "background-color");
+$width: sass.fn-naming-var("width");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+// Avatar default is circle
+// With props square then is square
+.#{$avatar} {
+  position: relative;
+  overflow: hidden;
+  background-color: rgb(#{$background-color});
+  width: #{$width};
+  aspect-ratio: 1/1;
+  border-radius: #{$border-radius};
+  background-repeat: no-repeat;
+  background-size: cover;
+  transition:
+    background-color #{$transition-duration} ease,
+    color #{$transition-duration} ease,
+    border-color #{$transition-duration} ease,
+    box-shadow #{$transition-duration} ease,
+    border-radius #{$transition-duration} ease;
+  display: inline-block;
+
+  &.#{$shape-pill} {
+    border-radius: 50%;
+  }
+}

package/src/components/avatar/avatar.type.ts

@@ -0,0 +1,6 @@
+// Define
+export type AvatarProps = {
+  shape?: string;
+  size?: string | number;
+  src?: string;
+};

package/src/components/avatar/avatar.vue

@@ -0,0 +1,45 @@
+<style lang="scss" src="./avatar.scss" scoped></style>
+<template src="./avatar.html"></template>
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+import { type AvatarProps } from "./avatar.type";
+import { property, withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<AvatarProps>(), {
+  size: "22px",
+  src: "",
+});
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+const avatarAttrs = computed(() => {
+  const shape = props?.shape || appState?.shape.value || "";
+  const role = appState?.role.value || "";
+
+  return {
+    class: [
+      withPrefix(["layer", "surface"]),
+      withPrefix(["role", role]),
+      withPrefix(["shape", shape]),
+      withPrefix("avatar"),
+    ],
+    style: {
+      [property("width")]: props.size + (typeof props.size === "number" ? "px" : ""),
+      backgroundImage: `url(${props.src})`,
+    },
+  };
+});
+
+/// Methods
+/// ------------------------------------------------------------
+
+// Lifecycle
+/// ------------------------------------------------------------
+
+// Export, Expose
+/// ------------------------------------------------------------
+</script>

package/src/components/avatar/index.ts

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

package/src/components/button/button.html

@@ -0,0 +1,6 @@
+<button v-bind="buttonAttrs" @focus="onFocus" @blur="onBlur">
+  <span v-show="!props.loading"><slot></slot></span>
+  <template v-if="props.loading">
+    <span v-bind="loaderAttrs"><slot name="loading"></slot></span>
+  </template>
+</button>

package/src/components/button/button.scss

@@ -0,0 +1,113 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$button: sass.fn-naming-prefix("button");
+$loader: sass.fn-naming-prefix("loader");
+
+// Property name
+$border-radius: sass.fn-naming-var("border-radius");
+$border-width: sass.fn-naming-var("stroke", "width");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+$spacing-x: sass.fn-naming-var("spacing", "x");
+$spacing-y: sass.fn-naming-var("spacing", "y");
+
+$color: sass.fn-naming-var("item", "color");
+
+$border-color: sass.fn-naming-var("item", "border-color");
+$border-color-hover: sass.fn-naming-var("item", "border-color", "strong");
+$border-color-focus: sass.fn-naming-var("item", "border-color", "heavy");
+$border-color-active: sass.fn-naming-var("item", "border-color", "heavy");
+$border-color-disabled: sass.fn-naming-var("item", "border-color");
+$border-color-inactive: sass.fn-naming-var("item", "border-color", "soft");
+
+$size-font-size: sass.fn-naming-var("font-size");
+$size-height: sass.fn-naming-var("height");
+$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");
+
+$background-color: sass.fn-naming-var("item", "background-color");
+$background-color-hover: sass.fn-naming-var("item", "background-color", "strong");
+$background-color-focus: sass.fn-naming-var("item", "background-color", "heavy");
+$background-color-active: sass.fn-naming-var("item", "background-color", "heavy");
+$background-color-disabled: sass.fn-naming-var("item", "background-color");
+$background-color-inactive: sass.fn-naming-var("item", "background-color", "soft");
+
+.#{$button} {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  color: rgb(#{$color});
+  background: rgb(#{$background-color});
+  border-color: rgb(#{$border-color});
+  border-style: solid;
+  border-width: #{$border-width};
+  white-space: nowrap;
+  border-radius: #{$border-radius};
+  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-height};
+  line-height: #{$size-line-height};
+
+  &:hover {
+    border-color: rgb(#{$border-color-hover});
+    background-color: rgb(#{$background-color-hover});
+  }
+
+  &.focus,
+  &:focus {
+    border-color: rgb(#{$border-color-focus});
+    background-color: rgb(#{$background-color-focus});
+
+    &.shadow {
+      box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+    }
+  }
+
+  &:active,
+  &.active {
+    border-color: rgb(#{$border-color-active});
+    background-color: rgb(#{$background-color-active});
+  }
+
+  &:disabled,
+  &.disabled {
+    border-color: rgba(#{$border-color-disabled}, 0.5);
+    background-color: rgba(#{$background-color-disabled}, 0.5);
+    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

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

package/src/components/button/button.vue

@@ -0,0 +1,66 @@
+<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 { withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<ButtonProps>(), {
+  size: "standard",
+  block: false,
+  loading: false,
+  variant: "fill",
+  shadow: undefined,
+});
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// State
+/// ------------------------------------------------------------
+const isFocused = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+const shadow = computed(() => {
+  return (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
+});
+
+const buttonAttrs = computed(() => {
+  const shape = props.shape || appState?.shape.value || "";
+  const role = props.role || appState?.role.value || "";
+
+  return {
+    class: [
+      withPrefix(["layer", "item"]),
+      withPrefix(["role", role]),
+      withPrefix(["shape", shape]),
+      withPrefix("button"),
+      withPrefix(["size", props.size]),
+      props.variant,
+      {
+        block: props.block,
+        shadow: shadow.value,
+        focus: isFocused.value,
+      },
+    ],
+  };
+});
+
+const loaderAttrs = computed(() => {
+  return {
+    class: [withPrefix("loader")],
+  };
+});
+
+/// Methods
+/// ------------------------------------------------------------
+const onFocus = () => {
+  isFocused.value = true;
+};
+
+const onBlur = () => {
+  isFocused.value = false;
+};
+</script>

package/src/components/button/index.ts

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

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

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

package/src/components/cable/cable.html

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

package/src/components/cable/cable.scss

@@ -0,0 +1,37 @@
+@use "@toife/sass-layer-generator" 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

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

package/src/components/cable/cable.vue

@@ -0,0 +1,33 @@
+<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 { withPrefix } from "../../utils";
+import { CABLE_PROVIDER_STATE_KEY } from "./cable.constants";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<CableProps>(), {
+  keyboard: false,
+  placement: "bottom",
+});
+
+/// State
+/// ------------------------------------------------------------
+const { placement } = toRefs(props);
+
+/// Computed
+/// ------------------------------------------------------------
+const cableAttrs = computed(() => {
+  return {
+    class: [withPrefix(["layer", "base"]), withPrefix("cable"), placement.value],
+  };
+});
+
+// Export, Expose
+/// ------------------------------------------------------------
+provide<CableProviderState>(CABLE_PROVIDER_STATE_KEY, {
+  placement,
+});
+</script>

package/src/components/cable/index.ts

@@ -0,0 +1,3 @@
+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

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

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

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

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

@@ -0,0 +1,34 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$card: sass.fn-naming-prefix("card");
+
+// Property name - layer: surface
+$background-color: sass.fn-naming-var("surface", "background-color");
+$color: sass.fn-naming-var("surface", "color");
+$border-radius: sass.fn-naming-var("border-radius");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$card} {
+  background-color: rgb(#{$background-color});
+  color: rgb(#{$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

@@ -0,0 +1,14 @@
+import { ComputedRef, Ref } from "vue";
+
+// Define
+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

@@ -0,0 +1,62 @@
+<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 { withPrefix } from "../../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
+import { CARD_PROVIDER_STATE_KEY } from "./card.constants";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<CardProps>(), {
+  divider: undefined,
+  shape: undefined,
+  role: undefined,
+});
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+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: [
+      withPrefix(["layer", "surface"]),
+      withPrefix(["role", role.value]),
+      withPrefix(["shape", shape.value]),
+      withPrefix("card"),
+      {
+        divider: divider.value,
+      },
+    ],
+  };
+});
+
+const cardProviderState = computed(() => {
+  return {
+    role: props.role,
+    shape: shape.value,
+    divider: divider.value,
+  };
+});
+
+/// Export, Expose
+/// ------------------------------------------------------------
+provide<CardProviderState>(CARD_PROVIDER_STATE_KEY, {
+  role,
+  shape,
+  divider,
+});
+</script>

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

@@ -0,0 +1,3 @@
+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

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

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

@@ -0,0 +1,23 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$card-body: sass.fn-naming-prefix("card-body");
+
+// Property name - layer: surface (card)
+$background-color: sass.fn-naming-var("surface", "background-color");
+$color: sass.fn-naming-var("surface", "color");
+$padding-y: sass.fn-naming-var("spacing", "y");
+$padding-x: sass.fn-naming-var("spacing", "x");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$card-body} {
+  background-color: rgb(#{$background-color});
+  color: rgb(#{$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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$card-footer: sass.fn-naming-prefix("card-footer");
+
+// Property name - layer: surface (card)
+$background-color: sass.fn-naming-var("surface", "background-color");
+$color: sass.fn-naming-var("surface", "color");
+$padding-y: sass.fn-naming-var("spacing", "y");
+$padding-x: sass.fn-naming-var("spacing", "x");
+$border-color: sass.fn-naming-var("surface", "border-color");
+$border-width: sass.fn-naming-var("stroke", "width");
+$border: #{$border-width} solid transparent;
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$card-footer} {
+  background-color: rgb(#{$background-color});
+  color: rgb(#{$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: rgb(#{$border-color});
+  }
+}

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

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

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

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

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

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