@toife/vue 2.2.0 → 3.0.0

package/src/components/toast/toast-content/toast-content.scss

@@ -0,0 +1,41 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$toastContent: sass.fn-naming-prefix("toast-content");
+
+// Properties
+$space-x: sass.fn-naming-var("spacing", "x");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+// layer: item
+$background-color: sass.fn-naming-var("item", "background-color");
+$color: sass.fn-naming-var("item", "color");
+$border-color: sass.fn-naming-var("item", "border-color");
+$border-radius: sass.fn-naming-var("border-radius");
+$border-width: sass.fn-naming-var("stroke", "width");
+$max-height: sass.fn-naming-var("overlay", "max-height");
+
+.#{$toastContent} {
+  width: fit-content;
+  height: fit-content;
+  opacity: 1;
+  transition:
+    background-color #{$transition-duration} ease,
+    color #{$transition-duration} ease,
+    border-color #{$transition-duration} ease,
+    border-radius #{$transition-duration} ease,
+    opacity #{$transition-duration} ease;
+
+  background-color: rgb(#{$background-color});
+  color: rgb(#{$color});
+  border-color: rgb(#{$border-color});
+  border-width: #{$border-width};
+  border-style: solid;
+  max-height: #{$max-height};
+  max-width: 100%;
+  padding: calc(#{$space-x} * 2) calc(#{$space-x} * 4);
+  border-radius: #{$border-radius};
+
+  &.closing {
+    opacity: 0;
+  }
+}

package/src/components/toast/toast-content/toast-content.vue

@@ -0,0 +1,59 @@
+<style lang="scss" src="./toast-content.scss" scoped></style>
+<template src="./toast-content.html"></template>
+<script lang="ts" setup>
+import { computed, inject, onMounted, ref } from "vue";
+import { type ToastContentProps, type ToastContentEmit } from "../toast.type";
+import { withPrefix } from "../../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<ToastContentProps>(), {
+  message: "",
+  duration: 2000,
+  variant: "fill",
+});
+const emit = defineEmits<ToastContentEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// State
+/// ------------------------------------------------------------
+const isClosing = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+const role = computed(() => {
+  return props.role || appState?.role.value || "";
+});
+
+const shape = computed(() => {
+  return props.shape || appState?.shape.value || "";
+});
+
+const contentAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix(["layer", "item"]),
+      withPrefix(["role", role.value]),
+      withPrefix(["shape", shape.value]),
+      withPrefix("toast-content"),
+      props.variant,
+      {
+        closing: isClosing.value,
+      },
+    ],
+  };
+});
+
+// Lifecycle
+/// ------------------------------------------------------------
+onMounted(() => {
+  setTimeout(() => {
+    isClosing.value = true;
+
+    setTimeout(() => {
+      emit("close");
+    }, 500);
+  }, props.duration);
+});
+</script>

package/src/components/toast/toast.composable.ts

@@ -0,0 +1,22 @@
+import { ref } from "vue";
+import type { ToastContentProps } from "./toast.type";
+
+// All messages
+const messages = ref<ToastContentProps[]>([]);
+const messageId = ref(1);
+
+export const useToast = () => {
+  const open = (message: ToastContentProps) => {
+    messages.value.push({ ...message, id: messageId.value++ });
+  };
+
+  const close = (id: number) => {
+    messages.value = messages.value.filter((item) => item.id !== id);
+  };
+
+  return {
+    messages,
+    open,
+    close,
+  };
+};

package/src/components/toast/toast.type.ts

@@ -0,0 +1,25 @@
+export type ToastPlacement =
+  | "bottom-start"
+  | "bottom-center"
+  | "bottom-end"
+  | "top-start"
+  | "top-center"
+  | "top-end";
+
+export type ToastContentVariant = "fill" | "text";
+
+export type ToastProps = {
+  placement: ToastPlacement;
+};
+
+export type ToastContentProps = {
+  id?: number;
+  message: string;
+  duration?: number;
+  role?: string;
+  variant?: ToastContentVariant;
+  placement?: ToastPlacement;
+  shape?: string;
+};
+
+export type ToastContentEmit = { (e: "close"): void };

package/src/components/toolbar/index.ts

@@ -0,0 +1,2 @@
+export { default as Toolbar } from "./toolbar.vue";
+export type { ToolbarProps } from "./toolbar.type";

package/src/components/toolbar/toolbar.html

@@ -0,0 +1,5 @@
+<div v-bind="toolbarAttrs">
+  <div>
+    <slot />
+  </div>
+</div>

package/src/components/toolbar/toolbar.scss

@@ -0,0 +1,79 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$toolbar: sass.fn-naming-prefix("toolbar");
+
+// Property name - layer: surface
+$toolbar-size: sass.fn-naming-var("toolbar", "size");
+$background-color: sass.fn-naming-var("surface", "background-color");
+$safe-area-right: sass.fn-naming-var("safe-area", "right");
+$safe-area-left: sass.fn-naming-var("safe-area", "left");
+$safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
+$safe-area-top: sass.fn-naming-var("safe-area", "top");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$toolbar} {
+  background-color: rgb(#{$background-color});
+  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 {
+    align-items: center;
+    display: flex;
+    position: relative;
+
+    > * {
+      flex: 1;
+    }
+  }
+
+  &.bottom,
+  &.top {
+    > div {
+      flex-direction: row;
+      height: #{$toolbar-size};
+      max-height: #{$toolbar-size};
+      width: 100%;
+
+      > * {
+        height: 100%;
+      }
+    }
+  }
+
+  &.left,
+  &.right {
+    > div {
+      flex-direction: column;
+      width: #{$toolbar-size};
+      max-width: #{$toolbar-size};
+      height: 100%;
+
+      > * {
+        width: 100%;
+      }
+    }
+  }
+
+  &.with-safe-area {
+    &.right {
+      padding-right: #{$safe-area-right};
+    }
+
+    &.left {
+      padding-left: #{$safe-area-left};
+    }
+
+    &.bottom {
+      padding-bottom: #{$safe-area-bottom};
+    }
+
+    &.top {
+      padding-top: #{$safe-area-top};
+    }
+  }
+}

package/src/components/toolbar/toolbar.type.ts

@@ -0,0 +1,7 @@
+// Define
+export type ToolbarProps = {
+  placement?: string | null;
+  safeArea?: boolean;
+  size?: string | number;
+  role?: string;
+};

package/src/components/toolbar/toolbar.vue

@@ -0,0 +1,47 @@
+<style lang="scss" src="./toolbar.scss" scoped></style>
+<template src="./toolbar.html"></template>
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+import { type ToolbarProps } from "./toolbar.type";
+import { property, withPrefix } from "../../utils";
+import { type CableProviderState } from "../cable/cable.type";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+import { CABLE_PROVIDER_STATE_KEY } from "../cable";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<ToolbarProps>(), {
+  placement: null,
+  safeArea: true,
+  size: "50px",
+});
+const cable = inject<CableProviderState>(CABLE_PROVIDER_STATE_KEY);
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+const role = computed(() => {
+  return props.role || appState?.role.value || "";
+});
+
+const placement = computed(() => {
+  return props.placement || cable?.placement.value || "";
+});
+
+const toolbarAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix(["layer", "surface"]),
+      withPrefix(["role", role.value]),
+      withPrefix("toolbar"),
+      placement.value,
+      {
+        "with-safe-area": props.safeArea,
+      },
+    ],
+    style: {
+      [property(["toolbar", "size"])]: props.size + (typeof props.size === "number" ? "px" : ""),
+    },
+  };
+});
+</script>

package/src/env.d.ts

@@ -0,0 +1,7 @@
+// Vue SFC module typings for this package and for consumers (source is built in their app).
+// Intentionally no "vite/client" so projects without Vite still typecheck.
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/src/factory.ts

@@ -0,0 +1,81 @@
+import {
+  Action,
+  App,
+  Avatar,
+  Button,
+  Cable,
+  Card,
+  CardBody,
+  CardHeader,
+  CardFooter,
+  Checkbox,
+  Collapse,
+  Container,
+  DecisionModal,
+  Divider,
+  Field,
+  FormGroup,
+  GestureIndicator,
+  Image,
+  Modal,
+  Page,
+  Present,
+  Radio,
+  RadioGroup,
+  Refresher,
+  RouteNavigator,
+  RouteWrapper,
+  RouteProvider,
+  RouteOutlet,
+  SegmentedField,
+  Skeleton,
+  Switch,
+  Tabs,
+  Toast,
+  ToastContent,
+  Toolbar,
+} from "./components";
+import { type CreateToifeOptions } from "./type";
+
+export const createToife = (options?: CreateToifeOptions) => {
+  return {
+    install: (app: any) => {
+      const prefix = options?.prefix || "t-";
+      app.component(prefix + "app", App);
+      app.component(prefix + "action", Action);
+      app.component(prefix + "avatar", Avatar);
+      app.component(prefix + "button", Button);
+      app.component(prefix + "cable", Cable);
+      app.component(prefix + "card", Card);
+      app.component(prefix + "card-body", CardBody);
+      app.component(prefix + "card-header", CardHeader);
+      app.component(prefix + "card-footer", CardFooter);
+      app.component(prefix + "checkbox", Checkbox);
+      app.component(prefix + "radio", Radio);
+      app.component(prefix + "radio-group", RadioGroup);
+      app.component(prefix + "collapse", Collapse);
+      app.component(prefix + "container", Container);
+      app.component(prefix + "decision-modal", DecisionModal);
+      app.component(prefix + "divider", Divider);
+      app.component(prefix + "field", Field);
+      app.component(prefix + "form-group", FormGroup);
+      app.component(prefix + "gesture-indicator", GestureIndicator);
+      app.component(prefix + "image", Image);
+      app.component(prefix + "modal", Modal);
+      app.component(prefix + "page", Page);
+      app.component(prefix + "present", Present);
+      app.component(prefix + "refresher", Refresher);
+      app.component(prefix + "route-navigator", RouteNavigator);
+      app.component(prefix + "route-wrapper", RouteWrapper);
+      app.component(prefix + "route-provider", RouteProvider);
+      app.component(prefix + "route-outlet", RouteOutlet);
+      app.component(prefix + "segmented-field", SegmentedField);
+      app.component(prefix + "skeleton", Skeleton);
+      app.component(prefix + "switch", Switch);
+      app.component(prefix + "tabs", Tabs);
+      app.component(prefix + "toast", Toast);
+      app.component(prefix + "toast-content", ToastContent);
+      app.component(prefix + "toolbar", Toolbar);
+    },
+  };
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+/// <reference path="./env.d.ts" />
+export * from "./factory";
+export * as utils from "./utils";
+export * from "./components";

package/{dist/type.d.ts → src/type.ts}

@@ -1,3 +1,3 @@
 export type CreateToifeOptions = {
-    prefix?: string;
+  prefix?: string;
 };

package/src/utils/element.ts

@@ -0,0 +1,16 @@
+export const isFormElement = (target: any) => {
+  return (
+    target &&
+    (target.tagName == "INPUT" || target.tagName == "TEXTAREA" || target.isContentEditable)
+  );
+};
+
+export const blurCurrentActive = () => {
+  const active = document.activeElement as HTMLElement | null;
+  if (
+    active &&
+    (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.isContentEditable)
+  ) {
+    active.blur();
+  }
+};

package/src/utils/events.ts

@@ -0,0 +1,12 @@
+import { blurCurrentActive, isFormElement } from "./element";
+
+export const preventDefault = () => {
+  document.addEventListener("contextmenu", (e) => e.preventDefault());
+  document.addEventListener("pointerup", (e) => {
+    !isFormElement(e.target) && blurCurrentActive();
+  });
+
+  if ("virtualKeyboard" in navigator) {
+    (navigator.virtualKeyboard as any).overlaysContent = true;
+  }
+};

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from "./element";
+export * from "./events";
+export * from "./style";

package/src/utils/style/index.ts

@@ -0,0 +1,42 @@
+let prefix: string | null = null;
+let separator: string | null = null;
+
+export const getSeparator = () => {
+  if (!separator)
+    separator = getComputedStyle(document.documentElement).getPropertyValue("--separator").trim();
+
+  return separator;
+};
+
+export const getPrefix = () => {
+  if (!prefix)
+    prefix = getComputedStyle(document.documentElement).getPropertyValue("--prefix").trim();
+
+  return prefix;
+};
+
+export const withPrefix = (name: string | string[]) => {
+  const p = getPrefix();
+  const s = getSeparator();
+  let names = [];
+
+  if (typeof name === "string") {
+    names = [name];
+  } else {
+    names = [...name];
+  }
+
+  if (p) {
+    names = [p, ...names];
+  }
+
+  return names.join(s);
+};
+
+export const property = (name: string | string[]) => {
+  return "--" + withPrefix(name);
+};
+
+export const variable = (name: string | string[]) => {
+  return "var(" + property(name) + ")";
+};

package/dist/components/action/action.type.d.ts

@@ -1,17 +0,0 @@
-export type ActionButton = {
-    text?: string;
-    color?: string;
-    size?: string;
-    variant?: string;
-    handler?: () => void;
-    data?: unknown;
-    key?: string | number;
-};
-export type ActionProps = {
-    actions?: ActionButton[][];
-    visible?: boolean;
-    dismiss?: Array<string>;
-};
-export type ActionEmit = {
-    (e: 'dismiss', type: string, data?: unknown): void;
-};

package/dist/components/action/action.vue.d.ts

@@ -1,14 +0,0 @@
-import { ActionButton, ActionProps } from './action.type';
-declare const _default: import('vue').DefineComponent<ActionProps, {
-    open: () => void;
-    close: () => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    dismiss: (type: string, data?: unknown) => any;
-}, string, import('vue').PublicProps, Readonly<ActionProps> & Readonly<{
-    onDismiss?: ((type: string, data?: unknown) => any) | undefined;
-}>, {
-    dismiss: Array<string>;
-    visible: boolean;
-    actions: ActionButton[][];
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/action/factory.d.ts

@@ -1,3 +0,0 @@
-export declare const createAction: (props?: any, component?: any) => {
-    open(): Promise<any>;
-};

package/dist/components/action/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Action } from './action.vue';
-export * from './factory';

package/dist/components/alert/alert.type.d.ts

@@ -1,16 +0,0 @@
-export type AlertButton = {
-    text?: string;
-    color?: string;
-    variant?: string;
-    handler?: () => void;
-    data?: unknown;
-};
-export type AlertProps = {
-    title?: string;
-    message?: string;
-    actions?: AlertButton[];
-    dismiss?: Array<string>;
-};
-export type AlertEmit = {
-    (e: 'dismiss', type: string, data?: unknown): void;
-};

package/dist/components/alert/alert.vue.d.ts

@@ -1,14 +0,0 @@
-import { AlertButton, AlertProps } from './alert.type';
-declare const _default: import('vue').DefineComponent<AlertProps, {
-    open: () => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    dismiss: (type: string, data?: unknown) => any;
-}, string, import('vue').PublicProps, Readonly<AlertProps> & Readonly<{
-    onDismiss?: ((type: string, data?: unknown) => any) | undefined;
-}>, {
-    dismiss: Array<string>;
-    actions: AlertButton[];
-    title: string;
-    message: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/alert/factory.d.ts

@@ -1,3 +0,0 @@
-export declare const createAlert: (props?: any, component?: any) => {
-    open(): Promise<any>;
-};

package/dist/components/alert/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Alert } from './alert.vue';
-export * from './factory';

package/dist/components/app/app.type.d.ts

@@ -1 +0,0 @@
-export type AppProps = {};

package/dist/components/app/app.vue.d.ts

@@ -1,3 +0,0 @@
-import { AppProps } from './app.type';
-declare const _default: import('vue').DefineComponent<AppProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AppProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/app/index.d.ts

@@ -1 +0,0 @@
-export { default as App } from './app.vue';

package/dist/components/avatar/avatar.type.d.ts

@@ -1,4 +0,0 @@
-export type AvatarProps = {
-    square?: boolean;
-    size?: any;
-};

package/dist/components/avatar/avatar.vue.d.ts

@@ -1,6 +0,0 @@
-import { AvatarProps } from './avatar.type';
-declare const _default: import('vue').DefineComponent<AvatarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
-    size: any;
-    square: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/avatar/index.d.ts

@@ -1 +0,0 @@
-export { default as Avatar } from './avatar.vue';

package/dist/components/back-button/back-button.type.d.ts

@@ -1,4 +0,0 @@
-export type BackButtonProps = {
-    to?: any;
-    router?: any;
-};

package/dist/components/back-button/back-button.vue.d.ts

@@ -1,3 +0,0 @@
-import { BackButtonProps } from './back-button.type';
-declare const _default: import('vue').DefineComponent<BackButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BackButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/back-button/index.d.ts

@@ -1 +0,0 @@
-export { default as BackButton } from './back-button.vue';

package/dist/components/button/button.type.d.ts

@@ -1,10 +0,0 @@
-export type ButtonProps = {
-    color?: any;
-    size?: string;
-    rounded?: boolean;
-    block?: boolean;
-    loading?: boolean;
-    loadingType?: string;
-    variant?: string;
-    activeBackground?: boolean;
-};

package/dist/components/button/button.vue.d.ts

@@ -1,12 +0,0 @@
-import { ButtonProps } from './button.type';
-declare const _default: import('vue').DefineComponent<ButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
-    size: string;
-    color: any;
-    rounded: boolean;
-    block: boolean;
-    loading: boolean;
-    loadingType: string;
-    variant: string;
-    activeBackground: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/button/index.d.ts

@@ -1 +0,0 @@
-export { default as Button } from './button.vue';

package/dist/components/cable/cable.type.d.ts

@@ -1,4 +0,0 @@
-export type CableProps = {
-    keyboard?: boolean;
-    placement?: string;
-};

package/dist/components/cable/cable.vue.d.ts

@@ -1,6 +0,0 @@
-import { CableProps } from './cable.type';
-declare const _default: import('vue').DefineComponent<CableProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CableProps> & Readonly<{}>, {
-    placement: string;
-    keyboard: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/cable/index.d.ts

@@ -1 +0,0 @@
-export { default as Cable } from './cable.vue';

package/dist/components/card/card.type.d.ts

@@ -1,3 +0,0 @@
-export type CardProps = {
-    color?: any;
-};