@nubitio/crud 0.5.11 → 0.5.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/style.css CHANGED
@@ -1930,6 +1930,238 @@ html[data-density=compact] .nb-datagrid .nb-badge {
1930
1930
  outline: none;
1931
1931
  }
1932
1932
 
1933
+ .nb-form__file-upload-error {
1934
+ align-items: center;
1935
+ color: var(--error-color);
1936
+ display: inline-flex;
1937
+ font-size: var(--font-size-xs);
1938
+ gap: var(--space-1);
1939
+ }
1940
+ .nb-form__file-upload {
1941
+ display: flex;
1942
+ flex-direction: column;
1943
+ gap: var(--space-1);
1944
+ width: 100%;
1945
+ }
1946
+
1947
+ .nb-form__file-upload-zone {
1948
+ align-items: center;
1949
+ background: var(--surface-1);
1950
+ border: 1px dashed var(--border-color);
1951
+ border-radius: var(--radius-lg);
1952
+ box-sizing: border-box;
1953
+ cursor: pointer;
1954
+ display: flex;
1955
+ justify-content: center;
1956
+ min-height: 112px;
1957
+ overflow: hidden;
1958
+ position: relative;
1959
+ transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
1960
+ width: 100%;
1961
+ }
1962
+ .nb-form__file-upload-zone:hover:not(.nb-form__file-upload-zone--disabled):not(.nb-form__file-upload-zone--filled) {
1963
+ background: color-mix(in srgb, var(--accent-color) 4%, var(--surface-1));
1964
+ border-color: var(--accent-color);
1965
+ }
1966
+ .nb-form__file-upload-zone--active {
1967
+ background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-1));
1968
+ border-color: var(--accent-color);
1969
+ }
1970
+ .nb-form__file-upload-zone--filled {
1971
+ border-style: solid;
1972
+ cursor: default;
1973
+ min-height: 88px;
1974
+ }
1975
+ .nb-form__file-upload-zone--uploading {
1976
+ pointer-events: none;
1977
+ }
1978
+ .nb-form__file-upload-zone--disabled {
1979
+ cursor: not-allowed;
1980
+ opacity: 0.72;
1981
+ }
1982
+ .nb-form__file-upload-zone:focus-visible {
1983
+ box-shadow: 0 0 0 3px var(--focus-ring-color);
1984
+ outline: none;
1985
+ }
1986
+
1987
+ .nb-form__file-upload--image .nb-form__file-upload-zone {
1988
+ min-height: 168px;
1989
+ }
1990
+
1991
+ .nb-form__file-upload--image .nb-form__file-upload-zone--filled {
1992
+ min-height: 180px;
1993
+ }
1994
+
1995
+ .nb-form__file-upload--invalid .nb-form__file-upload-zone {
1996
+ border-color: var(--error-color);
1997
+ }
1998
+
1999
+ .nb-form__file-upload-placeholder {
2000
+ align-items: center;
2001
+ display: flex;
2002
+ flex-direction: column;
2003
+ gap: var(--space-2);
2004
+ max-width: 320px;
2005
+ padding: var(--space-4);
2006
+ text-align: center;
2007
+ }
2008
+
2009
+ .nb-form__file-upload-icon {
2010
+ align-items: center;
2011
+ background: color-mix(in srgb, var(--accent-color) 10%, transparent);
2012
+ border-radius: 999px;
2013
+ color: var(--accent-color);
2014
+ display: inline-flex;
2015
+ font-size: 24px;
2016
+ height: 48px;
2017
+ justify-content: center;
2018
+ width: 48px;
2019
+ }
2020
+
2021
+ .nb-form__file-upload-title {
2022
+ color: var(--text-primary);
2023
+ font-size: var(--font-size-sm);
2024
+ font-weight: var(--font-weight-semibold);
2025
+ }
2026
+
2027
+ .nb-form__file-upload-hint {
2028
+ color: var(--text-tertiary);
2029
+ font-size: var(--font-size-xs);
2030
+ line-height: var(--line-height-tight);
2031
+ }
2032
+
2033
+ .nb-form__file-upload-preview {
2034
+ display: block;
2035
+ height: 100%;
2036
+ max-height: 220px;
2037
+ object-fit: contain;
2038
+ width: 100%;
2039
+ }
2040
+
2041
+ .nb-form__file-upload-file {
2042
+ align-items: center;
2043
+ display: flex;
2044
+ gap: var(--space-3);
2045
+ max-width: 100%;
2046
+ padding: var(--space-3) var(--space-4);
2047
+ width: 100%;
2048
+ }
2049
+
2050
+ .nb-form__file-upload-file-icon {
2051
+ align-items: center;
2052
+ background: var(--surface-0);
2053
+ border: 1px solid var(--border-subtle);
2054
+ border-radius: var(--radius-md);
2055
+ color: var(--accent-color);
2056
+ display: inline-flex;
2057
+ flex: 0 0 auto;
2058
+ font-size: 22px;
2059
+ height: 44px;
2060
+ justify-content: center;
2061
+ width: 44px;
2062
+ }
2063
+
2064
+ .nb-form__file-upload-file-meta {
2065
+ display: flex;
2066
+ flex: 1 1 auto;
2067
+ flex-direction: column;
2068
+ gap: 2px;
2069
+ min-width: 0;
2070
+ }
2071
+
2072
+ .nb-form__file-upload-file-name {
2073
+ color: var(--text-primary);
2074
+ font-size: var(--font-size-sm);
2075
+ font-weight: var(--font-weight-medium);
2076
+ overflow: hidden;
2077
+ text-overflow: ellipsis;
2078
+ white-space: nowrap;
2079
+ }
2080
+
2081
+ .nb-form__file-upload-file-link {
2082
+ color: var(--accent-color);
2083
+ font-size: var(--font-size-xs);
2084
+ text-decoration: none;
2085
+ }
2086
+ .nb-form__file-upload-file-link:hover {
2087
+ text-decoration: underline;
2088
+ }
2089
+
2090
+ .nb-form__file-upload-overlay {
2091
+ align-items: center;
2092
+ background: rgba(0, 0, 0, 0.42);
2093
+ color: #fff;
2094
+ display: flex;
2095
+ flex-direction: column;
2096
+ font-size: var(--font-size-sm);
2097
+ gap: var(--space-2);
2098
+ inset: 0;
2099
+ justify-content: center;
2100
+ position: absolute;
2101
+ }
2102
+
2103
+ .nb-form__file-upload-spinner {
2104
+ animation: nb-form-file-spin 700ms linear infinite;
2105
+ border: 2px solid rgba(255, 255, 255, 0.35);
2106
+ border-radius: 999px;
2107
+ border-top-color: #fff;
2108
+ height: 24px;
2109
+ width: 24px;
2110
+ }
2111
+
2112
+ @keyframes nb-form-file-spin {
2113
+ to {
2114
+ transform: rotate(360deg);
2115
+ }
2116
+ }
2117
+ .nb-form__file-upload-actions {
2118
+ align-items: center;
2119
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent);
2120
+ bottom: 0;
2121
+ display: flex;
2122
+ gap: var(--space-2);
2123
+ inset-inline: 0;
2124
+ justify-content: center;
2125
+ opacity: 0;
2126
+ padding: var(--space-3);
2127
+ position: absolute;
2128
+ transition: opacity var(--transition-base);
2129
+ }
2130
+
2131
+ .nb-form__file-upload-zone--filled:hover .nb-form__file-upload-actions,
2132
+ .nb-form__file-upload-zone--filled:focus-within .nb-form__file-upload-actions {
2133
+ opacity: 1;
2134
+ }
2135
+
2136
+ .nb-form__file-upload-action {
2137
+ align-items: center;
2138
+ background: var(--surface-1);
2139
+ border: 1px solid var(--border-subtle);
2140
+ border-radius: var(--radius-md);
2141
+ color: var(--text-primary);
2142
+ cursor: pointer;
2143
+ display: inline-flex;
2144
+ font: inherit;
2145
+ font-size: var(--font-size-xs);
2146
+ font-weight: var(--font-weight-medium);
2147
+ gap: var(--space-1);
2148
+ min-height: 28px;
2149
+ padding: 0 var(--space-2);
2150
+ transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
2151
+ }
2152
+ .nb-form__file-upload-action:hover {
2153
+ border-color: var(--accent-color);
2154
+ color: var(--accent-color);
2155
+ }
2156
+ .nb-form__file-upload-action--danger:hover {
2157
+ border-color: var(--error-color);
2158
+ color: var(--error-color);
2159
+ }
2160
+ .nb-form__file-upload-action:focus-visible {
2161
+ box-shadow: 0 0 0 2px var(--focus-ring-color);
2162
+ outline: none;
2163
+ }
2164
+
1933
2165
  .nb-form__file-upload-error {
1934
2166
  align-items: center;
1935
2167
  color: var(--error-color);
@@ -2875,238 +3107,6 @@ html[data-density=compact] .nb-datagrid .nb-badge {
2875
3107
  .nb-form__field .nb-date-picker__trigger:focus-within {
2876
3108
  min-height: var(--control-height-form, 34px);
2877
3109
  }
2878
- .nb-form__file-upload {
2879
- display: flex;
2880
- flex-direction: column;
2881
- gap: var(--space-1);
2882
- width: 100%;
2883
- }
2884
-
2885
- .nb-form__file-upload-zone {
2886
- align-items: center;
2887
- background: var(--surface-1);
2888
- border: 1px dashed var(--border-color);
2889
- border-radius: var(--radius-lg);
2890
- box-sizing: border-box;
2891
- cursor: pointer;
2892
- display: flex;
2893
- justify-content: center;
2894
- min-height: 112px;
2895
- overflow: hidden;
2896
- position: relative;
2897
- transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
2898
- width: 100%;
2899
- }
2900
- .nb-form__file-upload-zone:hover:not(.nb-form__file-upload-zone--disabled):not(.nb-form__file-upload-zone--filled) {
2901
- background: color-mix(in srgb, var(--accent-color) 4%, var(--surface-1));
2902
- border-color: var(--accent-color);
2903
- }
2904
- .nb-form__file-upload-zone--active {
2905
- background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-1));
2906
- border-color: var(--accent-color);
2907
- }
2908
- .nb-form__file-upload-zone--filled {
2909
- border-style: solid;
2910
- cursor: default;
2911
- min-height: 88px;
2912
- }
2913
- .nb-form__file-upload-zone--uploading {
2914
- pointer-events: none;
2915
- }
2916
- .nb-form__file-upload-zone--disabled {
2917
- cursor: not-allowed;
2918
- opacity: 0.72;
2919
- }
2920
- .nb-form__file-upload-zone:focus-visible {
2921
- box-shadow: 0 0 0 3px var(--focus-ring-color);
2922
- outline: none;
2923
- }
2924
-
2925
- .nb-form__file-upload--image .nb-form__file-upload-zone {
2926
- min-height: 168px;
2927
- }
2928
-
2929
- .nb-form__file-upload--image .nb-form__file-upload-zone--filled {
2930
- min-height: 180px;
2931
- }
2932
-
2933
- .nb-form__file-upload--invalid .nb-form__file-upload-zone {
2934
- border-color: var(--error-color);
2935
- }
2936
-
2937
- .nb-form__file-upload-placeholder {
2938
- align-items: center;
2939
- display: flex;
2940
- flex-direction: column;
2941
- gap: var(--space-2);
2942
- max-width: 320px;
2943
- padding: var(--space-4);
2944
- text-align: center;
2945
- }
2946
-
2947
- .nb-form__file-upload-icon {
2948
- align-items: center;
2949
- background: color-mix(in srgb, var(--accent-color) 10%, transparent);
2950
- border-radius: 999px;
2951
- color: var(--accent-color);
2952
- display: inline-flex;
2953
- font-size: 24px;
2954
- height: 48px;
2955
- justify-content: center;
2956
- width: 48px;
2957
- }
2958
-
2959
- .nb-form__file-upload-title {
2960
- color: var(--text-primary);
2961
- font-size: var(--font-size-sm);
2962
- font-weight: var(--font-weight-semibold);
2963
- }
2964
-
2965
- .nb-form__file-upload-hint {
2966
- color: var(--text-tertiary);
2967
- font-size: var(--font-size-xs);
2968
- line-height: var(--line-height-tight);
2969
- }
2970
-
2971
- .nb-form__file-upload-preview {
2972
- display: block;
2973
- height: 100%;
2974
- max-height: 220px;
2975
- object-fit: contain;
2976
- width: 100%;
2977
- }
2978
-
2979
- .nb-form__file-upload-file {
2980
- align-items: center;
2981
- display: flex;
2982
- gap: var(--space-3);
2983
- max-width: 100%;
2984
- padding: var(--space-3) var(--space-4);
2985
- width: 100%;
2986
- }
2987
-
2988
- .nb-form__file-upload-file-icon {
2989
- align-items: center;
2990
- background: var(--surface-0);
2991
- border: 1px solid var(--border-subtle);
2992
- border-radius: var(--radius-md);
2993
- color: var(--accent-color);
2994
- display: inline-flex;
2995
- flex: 0 0 auto;
2996
- font-size: 22px;
2997
- height: 44px;
2998
- justify-content: center;
2999
- width: 44px;
3000
- }
3001
-
3002
- .nb-form__file-upload-file-meta {
3003
- display: flex;
3004
- flex: 1 1 auto;
3005
- flex-direction: column;
3006
- gap: 2px;
3007
- min-width: 0;
3008
- }
3009
-
3010
- .nb-form__file-upload-file-name {
3011
- color: var(--text-primary);
3012
- font-size: var(--font-size-sm);
3013
- font-weight: var(--font-weight-medium);
3014
- overflow: hidden;
3015
- text-overflow: ellipsis;
3016
- white-space: nowrap;
3017
- }
3018
-
3019
- .nb-form__file-upload-file-link {
3020
- color: var(--accent-color);
3021
- font-size: var(--font-size-xs);
3022
- text-decoration: none;
3023
- }
3024
- .nb-form__file-upload-file-link:hover {
3025
- text-decoration: underline;
3026
- }
3027
-
3028
- .nb-form__file-upload-overlay {
3029
- align-items: center;
3030
- background: rgba(0, 0, 0, 0.42);
3031
- color: #fff;
3032
- display: flex;
3033
- flex-direction: column;
3034
- font-size: var(--font-size-sm);
3035
- gap: var(--space-2);
3036
- inset: 0;
3037
- justify-content: center;
3038
- position: absolute;
3039
- }
3040
-
3041
- .nb-form__file-upload-spinner {
3042
- animation: nb-form-file-spin 700ms linear infinite;
3043
- border: 2px solid rgba(255, 255, 255, 0.35);
3044
- border-radius: 999px;
3045
- border-top-color: #fff;
3046
- height: 24px;
3047
- width: 24px;
3048
- }
3049
-
3050
- @keyframes nb-form-file-spin {
3051
- to {
3052
- transform: rotate(360deg);
3053
- }
3054
- }
3055
- .nb-form__file-upload-actions {
3056
- align-items: center;
3057
- background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent);
3058
- bottom: 0;
3059
- display: flex;
3060
- gap: var(--space-2);
3061
- inset-inline: 0;
3062
- justify-content: center;
3063
- opacity: 0;
3064
- padding: var(--space-3);
3065
- position: absolute;
3066
- transition: opacity var(--transition-base);
3067
- }
3068
-
3069
- .nb-form__file-upload-zone--filled:hover .nb-form__file-upload-actions,
3070
- .nb-form__file-upload-zone--filled:focus-within .nb-form__file-upload-actions {
3071
- opacity: 1;
3072
- }
3073
-
3074
- .nb-form__file-upload-action {
3075
- align-items: center;
3076
- background: var(--surface-1);
3077
- border: 1px solid var(--border-subtle);
3078
- border-radius: var(--radius-md);
3079
- color: var(--text-primary);
3080
- cursor: pointer;
3081
- display: inline-flex;
3082
- font: inherit;
3083
- font-size: var(--font-size-xs);
3084
- font-weight: var(--font-weight-medium);
3085
- gap: var(--space-1);
3086
- min-height: 28px;
3087
- padding: 0 var(--space-2);
3088
- transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
3089
- }
3090
- .nb-form__file-upload-action:hover {
3091
- border-color: var(--accent-color);
3092
- color: var(--accent-color);
3093
- }
3094
- .nb-form__file-upload-action--danger:hover {
3095
- border-color: var(--error-color);
3096
- color: var(--error-color);
3097
- }
3098
- .nb-form__file-upload-action:focus-visible {
3099
- box-shadow: 0 0 0 2px var(--focus-ring-color);
3100
- outline: none;
3101
- }
3102
-
3103
- .nb-form__file-upload-error {
3104
- align-items: center;
3105
- color: var(--error-color);
3106
- display: inline-flex;
3107
- font-size: var(--font-size-xs);
3108
- gap: var(--space-1);
3109
- }
3110
3110
  .nb-crud-dialog-root {
3111
3111
  z-index: 2500;
3112
3112
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nubitio/crud",
3
- "version": "0.5.11",
3
+ "version": "0.5.13",
4
4
  "type": "module",
5
5
  "description": "Declarative CRUD engine with field DSL, forms, datagrids, RBAC, conditional logic and pluggable adapters (Hydra/REST).",
6
6
  "license": "MIT",
@@ -56,8 +56,8 @@
56
56
  "react-dom": "^19.0.0",
57
57
  "react-i18next": "^14.0.0",
58
58
  "react-router-dom": "^6.0.0",
59
- "@nubitio/core": "^0.5.11",
60
- "@nubitio/ui": "^0.5.11"
59
+ "@nubitio/core": "^0.5.13",
60
+ "@nubitio/ui": "^0.5.13"
61
61
  },
62
62
  "dependencies": {
63
63
  "react-dropzone": "^15.0.0"