@toife/vue 3.0.6 → 3.1.2

package/src/components/select/select.vue

@@ -0,0 +1,119 @@
+<style lang="scss" src="./select.scss" scoped></style>
+<template src="./select.html"></template>
+<script lang="ts" setup>
+import { computed, inject, ref } from "vue";
+import { type SelectOption, type SelectProps, type SelectEmit } from "./select.type";
+import { property, withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+import { Field } from "../field";
+import { Dropdown } from "../dropdown";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<SelectProps>(), {
+  modelValue: "",
+  type: "text",
+  size: "standard",
+  disabled: false,
+  message: "",
+  help: "",
+  variant: "outline",
+  placeholder: "",
+  shadow: undefined,
+  direction: undefined,
+  options: () => [] as Array<SelectOption>,
+});
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+const emit = defineEmits<SelectEmit>();
+const visible = ref(false);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const role = computed(() => {
+  return props.role || appState?.role.value || "";
+});
+
+const direction = computed(() => {
+  return props.direction || appState?.direction?.value || "left";
+});
+
+const shadow = computed(() => {
+  return props.shadow || appState?.shadow.value || false;
+});
+
+const shape = computed(() => {
+  return props.shape || appState?.shape.value || "";
+});
+
+const selectAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix(["layer", "select"]),
+      withPrefix(["role", role.value]),
+      withPrefix("select"),
+      withPrefix(["direction", direction.value]),
+      withPrefix(["size", props.size]),
+      {
+        disabled: props.disabled,
+      },
+    ],
+  };
+});
+
+const dropdownAttrs = computed(() => {
+  return {
+    role: role.value,
+    direction: direction.value,
+    shadow: shadow.value,
+    shape: shape.value,
+    disabled: props.disabled,
+  };
+});
+
+const fieldAttrs = computed(() => {
+  const propsValue = props.modelValue || props.value;
+  let val: string[] = [];
+  if (propsValue) val = typeof propsValue === "string" ? [propsValue] : (propsValue as string[]);
+  const values: string[] = props.options
+    .filter((option): option is SelectOption => (val || []).includes(option.value))
+    .map((option) => option.label ?? option.value);
+
+  return {
+    modelValue: values.join(","),
+    size: props.size,
+    variant: props.variant,
+    placeholder: props.placeholder,
+    direction: direction.value,
+    role: role.value,
+    shape: shape.value,
+    readonly: true,
+    disabled: props.disabled,
+    shadow: shadow.value,
+  };
+});
+
+const selectIconAttrs = computed(() => ({
+  class: [withPrefix("select-icon")],
+}));
+
+const selectOptionAttrs = computed(() => ({
+  class: [withPrefix("select-option")],
+}));
+
+const selectMessageAttrs = computed(() => ({
+  class: [withPrefix("select-message")],
+}));
+
+const selectHelpAttrs = computed(() => ({
+  class: [withPrefix("select-help")],
+}));
+
+// Methods
+// ----------------------------------------------------------------------------
+const pickOption = (option: SelectOption) => {
+  if (option.disabled || option.value === undefined) return;
+  emit("update:modelValue", option.value);
+  emit("select", option);
+  visible.value = false;
+};
+</script>

package/src/components/skeleton/skeleton.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Classes
 $skeleton: sass.fn-naming-prefix("skeleton");

package/src/components/switch/switch.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Classes
 $switch: sass.fn-naming-prefix("switch");

package/src/components/tabs/tabs/tabs.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $tabs: sass.fn-naming-prefix("tabs");
@@ -30,7 +30,7 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
   position: relative;
   margin: 0;
   list-style: none;
-  border: #{$border-width} solid transparent;
+  border: none;
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,
@@ -113,25 +113,25 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     &.top-start,
     &.top-center,
     &.top-end {
-      border-bottom-color: rgb(#{$tabs-border-color});
+      border-bottom: #{$border-width} solid rgb(#{$tabs-border-color});
     }
 
     &.bottom-start,
     &.bottom-center,
     &.bottom-end {
-      border-top-color: rgb(#{$tabs-border-color});
+      border-top: #{$border-width} solid rgb(#{$tabs-border-color});
     }
 
     &.left-start,
     &.left-center,
     &.left-end {
-      border-right-color: rgb(#{$tabs-border-color});
+      border-right: #{$border-width} solid rgb(#{$tabs-border-color});
     }
 
     &.right-start,
     &.right-center,
     &.right-end {
-      border-left-color: rgb(#{$tabs-border-color});
+      border-left: #{$border-width} solid rgb(#{$tabs-border-color});
     }
   }
 

package/src/components/toast/toast/toast.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $toast: sass.fn-naming-prefix("toast");

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

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $toastContent: sass.fn-naming-prefix("toast-content");

package/src/components/toolbar/toolbar.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $toolbar: sass.fn-naming-prefix("toolbar");

package/src/factory.ts

@@ -13,9 +13,13 @@ import {
   Container,
   DecisionModal,
   Divider,
+  Dropdown,
   Field,
+  Flex,
   FormGroup,
   GestureIndicator,
+  Grid,
+  Cell,
   Image,
   Modal,
   Page,
@@ -28,6 +32,7 @@ import {
   RouteProvider,
   RouteOutlet,
   SegmentedField,
+  Select,
   Skeleton,
   Switch,
   Tab,
@@ -59,9 +64,13 @@ export const createToife = (options?: CreateToifeOptions) => {
       app.component(prefix + "container", Container);
       app.component(prefix + "decision-modal", DecisionModal);
       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);
@@ -72,6 +81,7 @@ export const createToife = (options?: CreateToifeOptions) => {
       app.component(prefix + "route-provider", RouteProvider);
       app.component(prefix + "route-outlet", RouteOutlet);
       app.component(prefix + "segmented-field", SegmentedField);
+      app.component(prefix + "select", Select);
       app.component(prefix + "skeleton", Skeleton);
       app.component(prefix + "switch", Switch);
       app.component(prefix + "tab", Tab);

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);
 };
 
 /**