@sierra-95/svelte-scaffold 1.2.17 → 1.2.19

package/dist/Core/components/Form/Input/select/select.svelte

@@ -1,21 +1,34 @@
 <script lang="ts">
-    export let id: string = '';
-    export let label: string = '';
-    export let value: string | number = '';
-    export let options: { value: string | number; label: string; disabled?: boolean }[] = [];
-    export let background: string ='transparent';
-    export let width: string = '100%';
-    export let maxWidth: string = '';
-    export let height: string = '100%';
-    export let textColor: string = 'inherit';
-    export let optionsColor: string = 'inherit';
-    export let optionsBackground: string = 'white';
-    export let showInput = true;
+    let {
+        id = '',
+        label = '',
+        value = $bindable<string | number>(),
+        options = [],
+        background = 'transparent',
+        width = '100%',
+        maxWidth = '',
+        height = '100%',
+        textColor = 'inherit',
+        optionsColor = 'inherit',
+        optionsBackground = 'white',
+        showInput = true,
+        readonly = false,
+        ...rest
+    } = $props();
 </script>
 
 {#if showInput}
     <label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
-        <select bind:value={value} id={id} name={id} required style="background-color: {background}; height: {height}">
+        <select
+            {...rest}
+            disabled={readonly}  
+            bind:value={value} id={id} name={id} 
+            style="background-color: {background}; height: {height}"
+            required={rest.required}
+            onchange={(e) => {
+                rest.onchange?.(e);
+            }} 
+        >
             {#each options as option}
                 <option 
                     value={option.value} 

package/dist/Core/components/Form/Input/select/select.svelte.d.ts

@@ -1,25 +1,8 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Select: $$__sveltets_2_IsomorphicComponent<{
+declare const Select: import("svelte").Component<{
     id?: string;
     label?: string;
-    value?: string | number;
-    options?: {
-        value: string | number;
-        label: string;
-        disabled?: boolean;
-    }[];
+    value?: any;
+    options?: any[];
     background?: string;
     width?: string;
     maxWidth?: string;
@@ -28,8 +11,7 @@ declare const Select: $$__sveltets_2_IsomorphicComponent<{
     optionsColor?: string;
     optionsBackground?: string;
     showInput?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Select = InstanceType<typeof Select>;
+    readonly?: boolean;
+} & Record<string, any>, {}, "value">;
+type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/global.css

@@ -147,16 +147,39 @@ body[data-theme='dark']{
     --background-v1-gradient-line-end: var(--background-v1-gradient-line-dark-end);
 }
 
-/**Sierra Input*/
+/**START OF INPUTS*/
+select:focus,
+input:focus,
+textarea:focus {
+  outline: none;
+  box-shadow: none;
+}
 .sierra-input{
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
 }
+/*select*/
+.sierra-input select {
+  border-radius: 5px;
+  border: 1px solid var(--input-border);
+  background-color: unset;
+}
+select option {
+  background-color: var(--background-tertiary);
+}
+
+.sierra-input select:disabled{
+  border: 1px solid rgb(from var(--input-border) r g b / 0.3) !important;
+}
+/*input and textarea*/
 .sierra-input input, .sierra-input textarea {
   padding: 0.75rem;
   border-radius: 4px;
 }
+.sierra-input input:read-only, .sierra-input textarea:read-only {
+  border: 1px solid rgb(from var(--input-border) r g b / 0.3) !important;
+}
 
 .sierra-input .underline-input{
   border: none !important;
@@ -175,55 +198,11 @@ body[data-theme='dark']{
 .sierra-input button i{
   color: var(--icon-theme);
 }
+/* END OF INPUTS **/
 
-button{
-  cursor: pointer;
-}
 
-.sierra-text-ellipsis{
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.sierra-text-wrap {
-  white-space: normal;
-  overflow-wrap: break-word;
-  word-break: break-word;
-}
-
-.sierra-translate {
-    display: inline-block;      
-    transition: transform 0.3s ease;
-}
-
-.sierra-translate:hover {
-  transform: translateY(-5px);
-}
 
-.sierra-flex-col{
-  display: flex;
-  flex-direction: column;
-}
-/**Select, Input**/
-select:focus,
-input:focus,
-textarea:focus {
-    outline: none;
-    box-shadow: none;
-}
-select {
-  border-radius: 5px;
-  border: 1px solid var(--input-border);
-  background-color: unset;
-}
-
-select option {
-  background-color: var(--background-tertiary);
-}
-
-
-
-/* Scrollbar */
+/* START OF SCROLLBAR */
 ::-webkit-scrollbar {
   width: 8px;
 }
@@ -241,7 +220,9 @@ select option {
   background: var(--scroll-bar-thumb-hover);
 }
 
-/**Button Ripple Effect */
+/* END OF SCROLLBAR */
+
+/**START OF BUTTON RIPPLE EFFECT */
 button:disabled{
   opacity: 0.6;
   cursor: not-allowed;
@@ -263,10 +244,40 @@ button:disabled{
   background: currentColor;
 }
 
-/**/
+/**END OF BUTTON RIPPLE EFFECT */
+
+/*START OF CONVINIENCE CLASSES*/
+button{
+  cursor: pointer;
+}
 i.fa-chevron-down {
   transition: transform 0.2s;
 }
 i.fa-chevron-down.active {
   transform: rotate(180deg);
+}
+
+.sierra-text-ellipsis{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sierra-text-wrap {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.sierra-translate {
+  display: inline-block;      
+  transition: transform 0.3s ease;
+}
+
+.sierra-translate:hover {
+  transform: translateY(-5px);
+}
+
+.sierra-flex-col{
+  display: flex;
+  flex-direction: column;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sierra-95/svelte-scaffold",
-	"version": "1.2.17",
+	"version": "1.2.19",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",