@toife/vue 3.0.7 → 3.1.3

package/src/components/toolbar/toolbar.scss

@@ -1,19 +1,24 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $toolbar: sass.fn-naming-prefix("toolbar");
 
 // Property name - layer: toolbar
-$toolbar-size: sass.fn-naming-var("toolbar", "size");
 $toolbar-background-color: sass.fn-naming-var("toolbar", "background-color");
+$toolbar-color: sass.fn-naming-var("toolbar", "color");
+$toolbar-border-color: sass.fn-naming-var("toolbar", "border-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");
 
+$border-width: sass.fn-naming-var("stroke", "width");
+$border: #{$border-width} solid rgb(#{$toolbar-border-color});
+
 .#{$toolbar} {
   background-color: rgb(#{$toolbar-background-color});
+  color: rgb(#{$toolbar-color});
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,
@@ -21,44 +26,6 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     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};
@@ -76,4 +43,22 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
       padding-top: #{$safe-area-top};
     }
   }
+
+  &.divider {
+    &.bottom {
+      border-top: #{$border};
+    }
+
+    &.top {
+      border-bottom: #{$border};
+    }
+
+    &.left {
+      border-right: #{$border};
+    }
+
+    &.right {
+      border-left: #{$border};
+    }
+  }
 }

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

@@ -2,6 +2,6 @@
 export type ToolbarProps = {
   placement?: string | null;
   safeArea?: boolean;
-  size?: string | number;
   role?: string;
+  divider?: boolean;
 };

package/src/components/toolbar/toolbar.vue

@@ -13,7 +13,7 @@ import { CABLE_PROVIDER_STATE_KEY } from "../cable";
 const props = withDefaults(defineProps<ToolbarProps>(), {
   placement: null,
   safeArea: true,
-  size: "50px",
+  divider: undefined,
 });
 const cable = inject<CableProviderState>(CABLE_PROVIDER_STATE_KEY);
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
@@ -23,6 +23,8 @@ const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 const toolbarAttrs = computed(() => {
   const role = props.role || appState?.role.value || "";
   const placement = props.placement || cable?.placement.value || "";
+  const divider = (props?.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
+
   return {
     class: [
       withPrefix(["layer", "toolbar"]),
@@ -31,11 +33,9 @@ const toolbarAttrs = computed(() => {
       placement,
       {
         "with-safe-area": props.safeArea,
+        divider: divider.value,
       },
     ],
-    style: {
-      [property(["toolbar", "size"])]: props.size + (typeof props.size === "number" ? "px" : ""),
-    },
   };
 });
 </script>

package/src/factory.ts

@@ -15,8 +15,11 @@ import {
   Divider,
   Dropdown,
   Field,
+  Flex,
   FormGroup,
   GestureIndicator,
+  Grid,
+  Cell,
   Image,
   Modal,
   Page,
@@ -63,8 +66,11 @@ export const createToife = (options?: CreateToifeOptions) => {
       app.component(prefix + "divider", Divider);
       app.component(prefix + "dropdown", Dropdown);
       app.component(prefix + "field", Field);
+      app.component(prefix + "flex", Flex);
       app.component(prefix + "form-group", FormGroup);
       app.component(prefix + "gesture-indicator", GestureIndicator);
+      app.component(prefix + "grid", Grid);
+      app.component(prefix + "cell", Cell);
       app.component(prefix + "image", Image);
       app.component(prefix + "modal", Modal);
       app.component(prefix + "page", Page);

package/src/utils/style/index.ts

@@ -39,7 +39,7 @@ export const withPrefix = (name: string | string[]) => {
     names = [p, ...names];
   }
 
-  return names.join(s);
+  return names.filter((item) => item !== undefined && item !== null && item !== "").join(s);
 };
 
 /**