@toife/vue 3.0.7 → 3.1.2

package/src/components/select/select.scss

@@ -1,26 +1,36 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $select: sass.fn-naming-prefix("select");
 $select-icon: sass.fn-naming-prefix("select-icon");
+$select-option: sass.fn-naming-prefix("select-option");
+$select-message: sass.fn-naming-prefix("select-message");
+$select-help: sass.fn-naming-prefix("select-help");
 $field: sass.fn-naming-prefix("field");
 $field-input: sass.fn-naming-prefix("field-input");
 
 // Property name
 $app-color: sass.fn-naming-var("app", "color");
 $spacing-x: sass.fn-naming-var("spacing", "x");
+$spacing-y: sass.fn-naming-var("spacing", "y");
 $size-coefficient-x: sass.fn-naming-var("coefficient-x");
+$size-coefficient-y: sass.fn-naming-var("coefficient-y");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
+$select-background-color: sass.fn-naming-var("select", "background-color");
+$select-background-color-hover: sass.fn-naming-var("select", "background-color", "hover");
+$select-background-color-focus: sass.fn-naming-var("select", "background-color", "focus");
+$select-background-color-active: sass.fn-naming-var("select", "background-color", "active");
+$select-color: sass.fn-naming-var("select", "color");
+$select-color-disabled: sass.fn-naming-var("select", "color", "disabled");
+$select-border-color: sass.fn-naming-var("select", "border-color");
+$select-message-color: sass.fn-naming-var("select", "message-color");
+
 .#{$select} {
   &.disabled {
     cursor: not-allowed;
   }
 
-  &.readonly {
-    pointer-events: none;
-  }
-
   .#{$select-icon} {
     display: inline-flex;
     align-items: center;
@@ -48,11 +58,72 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     }
   }
 
-  // :deep(.#{$field}.focus .#{$select-icon} svg) {
-  //   transform: rotate(180deg);
-  // }
+  .#{$select-option} {
+    display: block;
+    width: 100%;
+    padding: calc(var(--t-spacing-y)) calc(var(--t-spacing-x) * var(--t-coefficient-x));
+    text-align: var(--t-text-align);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    background: transparent;
+    cursor: pointer;
+    color: rgb(#{$select-color});
+    background-color: rgb(#{$select-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;
+
+    &:not(:disabled):not(.disabled):not(.readonly) {
+      &:hover,
+      &.hover {
+        background: rgb(#{$select-background-color-hover});
+      }
+
+      &:focus,
+      &.focus {
+        background: rgb(#{$select-background-color-focus});
+      }
+
+      &:active,
+      &.active {
+        background: rgb(#{$select-background-color-active});
+      }
+    }
+
+    &:disabled,
+    &.disabled {
+      cursor: not-allowed;
+      color: rgb(#{$select-color-disabled});
+    }
+  }
+
+  // Message
+  .#{$select-message} {
+    color: rgb(#{$select-message-color});
+    font-size: 0.9em;
+    line-height: 1.5;
+    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;
+  }
 
-  // :deep(.#{$field-input}) {
-  //   cursor: pointer;
-  // }
+  // Help
+  .#{$select-help} {
+    color: rgb(#{$app-color}, 0.75);
+    font-size: 0.8em;
+    line-height: 1.5;
+    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/select/select.type.ts

@@ -4,6 +4,12 @@ import type { AppDirection } from "../app";
 export type SelectVariant = FieldVariant;
 export type SelectSize = FieldSize;
 
+export type SelectOption = {
+  label?: string;
+  value: string;
+  disabled?: boolean;
+};
+
 export type SelectProps = {
   // Wrapper
   modelValue?: string;
@@ -20,7 +26,6 @@ export type SelectProps = {
   value?: string;
   placeholder?: string;
   disabled?: boolean;
-  readonly?: boolean;
   autocomplete?: string;
   tabindex?: number | string;
   line?: number | string;
@@ -29,4 +34,12 @@ export type SelectProps = {
   // Support
   message?: string;
   help?: string;
+
+  // Data
+  options: Array<SelectOption>;
+};
+
+export type SelectEmit = {
+  (e: "update:modelValue", value: string): void;
+  (e: "select", option: SelectOption): void;
 };

package/src/components/select/select.vue

@@ -1,8 +1,8 @@
 <style lang="scss" src="./select.scss" scoped></style>
 <template src="./select.html"></template>
 <script lang="ts" setup>
-import { computed, inject } from "vue";
-import { type SelectProps } from "./select.type";
+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";
@@ -15,15 +15,17 @@ const props = withDefaults(defineProps<SelectProps>(), {
   type: "text",
   size: "standard",
   disabled: false,
-  readonly: 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
 // ----------------------------------------------------------------------------
@@ -47,10 +49,12 @@ 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,
-        readonly: props.readonly,
       },
     ],
   };
@@ -63,22 +67,27 @@ const dropdownAttrs = computed(() => {
     shadow: shadow.value,
     shape: shape.value,
     disabled: props.disabled,
-    readonly: props.readonly,
   };
 });
 
 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: props.modelValue,
+    modelValue: values.join(","),
     size: props.size,
-    message: props.message,
-    help: props.help,
     variant: props.variant,
     placeholder: props.placeholder,
     direction: direction.value,
     role: role.value,
     shape: shape.value,
     readonly: true,
+    disabled: props.disabled,
     shadow: shadow.value,
   };
 });
@@ -86,4 +95,25 @@ const fieldAttrs = computed(() => {
 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

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